From 1e707d55c437dd1ace305c25fec9e0b2de09f8bf Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Thu, 10 Jul 2025 12:30:12 +0200
Subject: [PATCH 01/26] feat: add custom views page

---
 src/dashboard/Dashboard.js                    |   3 +
 src/dashboard/DashboardView.react.js          |   7 +-
 .../Data/Views/CreateViewDialog.react.js      | 111 +++++++++++
 src/dashboard/Data/Views/Views.react.js       | 172 ++++++++++++++++++
 src/lib/ViewPreferences.js                    |  25 +++
 5 files changed, 317 insertions(+), 1 deletion(-)
 create mode 100644 src/dashboard/Data/Views/CreateViewDialog.react.js
 create mode 100644 src/dashboard/Data/Views/Views.react.js
 create mode 100644 src/lib/ViewPreferences.js

diff --git a/src/dashboard/Dashboard.js b/src/dashboard/Dashboard.js
index 96be0559be..b1e8a800bd 100644
--- a/src/dashboard/Dashboard.js
+++ b/src/dashboard/Dashboard.js
@@ -44,6 +44,7 @@ import SlowQueries from './Analytics/SlowQueries/SlowQueries.react';
 import styles from 'dashboard/Apps/AppsIndex.scss';
 import UsersSettings from './Settings/UsersSettings.react';
 import Webhooks from './Data/Webhooks/Webhooks.react';
+import Views from './Data/Views/Views.react';
 import { AsyncStatus } from 'lib/Constants';
 import baseStyles from 'stylesheets/base.scss';
 import { get } from 'lib/AJAX';
@@ -270,6 +271,8 @@ export default class Dashboard extends React.Component {
 
         <Route path="cloud_code" element={<CloudCode />} />
         <Route path="cloud_code/*" element={<CloudCode />} />
+        <Route path="views/:name" element={<Views />} />
+        <Route path="views" element={<Views />} />
         <Route path="webhooks" element={<Webhooks />} />
 
         <Route path="jobs">{JobsRoute}</Route>
diff --git a/src/dashboard/DashboardView.react.js b/src/dashboard/DashboardView.react.js
index 061bcbf1de..eb81f26f2f 100644
--- a/src/dashboard/DashboardView.react.js
+++ b/src/dashboard/DashboardView.react.js
@@ -67,7 +67,7 @@ export default class DashboardView extends React.Component {
         name: 'Browser',
         link: '/browser',
       });
-    }
+      }
 
     if (features.cloudCode && features.cloudCode.viewCode) {
       coreSubsections.push({
@@ -76,6 +76,11 @@ export default class DashboardView extends React.Component {
       });
     }
 
+    coreSubsections.push({
+      name: 'Views',
+      link: '/views',
+    });
+
     //webhooks requires removal of heroku link code, then it should work.
     if (
       features.hooks &&
diff --git a/src/dashboard/Data/Views/CreateViewDialog.react.js b/src/dashboard/Data/Views/CreateViewDialog.react.js
new file mode 100644
index 0000000000..745762c316
--- /dev/null
+++ b/src/dashboard/Data/Views/CreateViewDialog.react.js
@@ -0,0 +1,111 @@
+import Dropdown from 'components/Dropdown/Dropdown.react';
+import Field from 'components/Field/Field.react';
+import Label from 'components/Label/Label.react';
+import Modal from 'components/Modal/Modal.react';
+import Option from 'components/Dropdown/Option.react';
+import React from 'react';
+import TextInput from 'components/TextInput/TextInput.react';
+import Checkbox from 'components/Checkbox/Checkbox.react';
+
+function isValidJSON(value) {
+  try {
+    JSON.parse(value);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export default class CreateViewDialog extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      name: '',
+      className: '',
+      query: '[]',
+      showCounter: false,
+    };
+  }
+
+  valid() {
+    return (
+      this.state.name.length > 0 &&
+      this.state.className.length > 0 &&
+      isValidJSON(this.state.query)
+    );
+  }
+
+  render() {
+    const { classes, onConfirm, onCancel } = this.props;
+    return (
+      <Modal
+        type={Modal.Types.INFO}
+        icon="plus"
+        iconSize={40}
+        title="Create a new view?"
+        subtitle="Define a custom query to display data."
+        confirmText="Create"
+        cancelText="Cancel"
+        disabled={!this.valid()}
+        onCancel={onCancel}
+        onConfirm={() =>
+          onConfirm({
+            name: this.state.name,
+            className: this.state.className,
+            query: JSON.parse(this.state.query),
+            showCounter: this.state.showCounter,
+          })
+        }
+      >
+        <Field
+          label={<Label text="Name" />}
+          input={
+            <TextInput
+              value={this.state.name}
+              onChange={name => this.setState({ name })}
+            />
+          }
+        />
+        <Field
+          label={<Label text="Class" />}
+          input={
+            <Dropdown
+              value={this.state.className}
+              onChange={className => this.setState({ className })}
+            >
+              {classes.map(c => (
+                <Option key={c} value={c}>
+                  {c}
+                </Option>
+              ))}
+            </Dropdown>
+          }
+        />
+        <Field
+          label={
+            <Label
+              text="Query"
+              description="An aggregation pipeline that returns an array of items."
+            />
+          }
+          input={
+            <TextInput
+              multiline={true}
+              value={this.state.query}
+              onChange={query => this.setState({ query })}
+            />
+          }
+        />
+        <Field
+          label={<Label text="Show object counter" />}
+          input={
+            <Checkbox
+              checked={this.state.showCounter}
+              onChange={showCounter => this.setState({ showCounter })}
+            />
+          }
+        />
+      </Modal>
+    );
+  }
+}
diff --git a/src/dashboard/Data/Views/Views.react.js b/src/dashboard/Data/Views/Views.react.js
new file mode 100644
index 0000000000..821f9ccb1a
--- /dev/null
+++ b/src/dashboard/Data/Views/Views.react.js
@@ -0,0 +1,172 @@
+import CategoryList from 'components/CategoryList/CategoryList.react';
+import SidebarAction from 'components/Sidebar/SidebarAction';
+import TableHeader from 'components/Table/TableHeader.react';
+import TableView from 'dashboard/TableView.react';
+import Toolbar from 'components/Toolbar/Toolbar.react';
+import Parse from 'parse';
+import React from 'react';
+import CreateViewDialog from './CreateViewDialog.react';
+import * as ViewPreferences from 'lib/ViewPreferences';
+import { withRouter } from 'lib/withRouter';
+
+@withRouter
+class Views extends TableView {
+  constructor() {
+    super();
+    this.section = 'Core';
+    this.subsection = 'Views';
+    this.state = {
+      views: [],
+      counts: {},
+      data: [],
+      order: [],
+      showCreate: false,
+    };
+    this.action = new SidebarAction('Create a view', () =>
+      this.setState({ showCreate: true })
+    );
+  }
+
+  componentWillMount() {
+    this.loadViews(this.context);
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (this.context !== nextContext) {
+      this.loadViews(nextContext);
+    }
+    if (this.props.params.name !== nextProps.params.name || this.context !== nextContext) {
+      this.loadData(nextProps.params.name, nextContext);
+    }
+  }
+
+  loadViews(app) {
+    const views = ViewPreferences.getViews(app.applicationId);
+    this.setState({ views, counts: {} }, () => {
+      views.forEach(view => {
+        if (view.showCounter) {
+          new Parse.Query(view.className)
+            .aggregate(view.query, { useMasterKey: true })
+            .then(res => {
+              this.setState(({ counts }) => ({
+                counts: { ...counts, [view.name]: res.length },
+              }));
+            });
+        }
+      });
+      this.loadData(this.props.params.name, app);
+    });
+  }
+
+  loadData(name, app = this.context) {
+    if (!name) {
+      this.setState({ data: [], order: [] });
+      return;
+    }
+    const view = (this.state.views || []).find(v => v.name === name);
+    if (!view) {
+      this.setState({ data: [], order: [] });
+      return;
+    }
+    new Parse.Query(view.className)
+      .aggregate(view.query, { useMasterKey: true })
+      .then(results => {
+        const columns = {};
+        results.forEach(item => {
+          Object.keys(item).forEach(key => {
+            if (columns[key]) return;
+            const val = item[key];
+            let type = 'String';
+            if (typeof val === 'number') type = 'Number';
+            else if (typeof val === 'boolean') type = 'Boolean';
+            else if (val && typeof val === 'object') {
+              if (val.__type === 'Date') type = 'Date';
+              else if (val.__type === 'Pointer') type = 'Pointer';
+              else if (val.__type === 'File') type = 'File';
+              else if (val.__type === 'GeoPoint') type = 'GeoPoint';
+              else type = 'Object';
+            }
+            columns[key] = { type };
+          });
+        });
+        const order = Object.keys(columns).map(name => ({ name, width: 150 }));
+        this.setState({ data: results, order, columns });
+      });
+  }
+
+  tableData() {
+    return this.state.data;
+  }
+
+  renderRow(row) {
+    return (
+      <tr key={JSON.stringify(row)}>
+        {this.state.order.map(({ name }) => (
+          <td key={name}>{String(row[name])}</td>
+        ))}
+      </tr>
+    );
+  }
+
+  renderHeaders() {
+    return this.state.order.map(({ name }) => (
+      <TableHeader key={name} width={20} >
+        {name}
+      </TableHeader>
+    ));
+  }
+
+  renderSidebar() {
+    const categories = this.state.views.map(view => ({
+      name: view.name,
+      id: view.name,
+      count: this.state.counts[view.name],
+    }));
+    const current = this.props.params.name || '';
+    return (
+      <CategoryList
+        current={current}
+        linkPrefix={'views/'}
+        categories={categories}
+      />
+    );
+  }
+
+  renderToolbar() {
+    const subsection = this.props.params.name || '';
+    return <Toolbar section="Views" subsection={subsection} />;
+  }
+
+  renderExtras() {
+    if (this.state.showCreate) {
+      let classNames = [];
+      if (this.context?.schema) {
+        const classes = this.context.schema.data.get('classes');
+        if (classes) {
+          classNames = Object.keys(classes.toObject());
+        }
+      }
+      return (
+        <CreateViewDialog
+          classes={classNames}
+          onCancel={() => this.setState({ showCreate: false })}
+          onConfirm={view => {
+            this.setState(
+              state => ({ showCreate: false, views: [...state.views, view] }),
+              () => {
+                ViewPreferences.saveViews(
+                  this.context.applicationId,
+                  this.state.views
+                );
+                this.loadViews(this.context);
+              }
+            );
+          }}
+        />
+      );
+    }
+    return null;
+  }
+}
+
+export default Views;
diff --git a/src/lib/ViewPreferences.js b/src/lib/ViewPreferences.js
new file mode 100644
index 0000000000..0507810522
--- /dev/null
+++ b/src/lib/ViewPreferences.js
@@ -0,0 +1,25 @@
+const VERSION = 1;
+
+export function getViews(appId) {
+  let entry;
+  try {
+    entry = localStorage.getItem(path(appId)) || '[]';
+  } catch {
+    entry = '[]';
+  }
+  try {
+    return JSON.parse(entry);
+  } catch {
+    return [];
+  }
+}
+
+export function saveViews(appId, views) {
+  try {
+    localStorage.setItem(path(appId), JSON.stringify(views));
+  } catch {}
+}
+
+function path(appId) {
+  return `ParseDashboard:${VERSION}:${appId}:Views`;
+}

From 5f61237d938d4d7f3f7ea1ca60a9fac7e71a750e Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Thu, 10 Jul 2025 14:13:00 +0200
Subject: [PATCH 02/26] chore: address lint issues

---
 src/dashboard/DashboardView.react.js    |  2 +-
 src/dashboard/Data/Views/Views.react.js | 38 +++++++++++++++++--------
 src/lib/ViewPreferences.js              |  4 ++-
 3 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/src/dashboard/DashboardView.react.js b/src/dashboard/DashboardView.react.js
index eb81f26f2f..c48e5ac461 100644
--- a/src/dashboard/DashboardView.react.js
+++ b/src/dashboard/DashboardView.react.js
@@ -67,7 +67,7 @@ export default class DashboardView extends React.Component {
         name: 'Browser',
         link: '/browser',
       });
-      }
+    }
 
     if (features.cloudCode && features.cloudCode.viewCode) {
       coreSubsections.push({
diff --git a/src/dashboard/Data/Views/Views.react.js b/src/dashboard/Data/Views/Views.react.js
index 821f9ccb1a..196f697dd5 100644
--- a/src/dashboard/Data/Views/Views.react.js
+++ b/src/dashboard/Data/Views/Views.react.js
@@ -36,7 +36,7 @@ class Views extends TableView {
       this.loadViews(nextContext);
     }
     if (this.props.params.name !== nextProps.params.name || this.context !== nextContext) {
-      this.loadData(nextProps.params.name, nextContext);
+      this.loadData(nextProps.params.name);
     }
   }
 
@@ -54,11 +54,11 @@ class Views extends TableView {
             });
         }
       });
-      this.loadData(this.props.params.name, app);
+      this.loadData(this.props.params.name);
     });
   }
 
-  loadData(name, app = this.context) {
+  loadData(name) {
     if (!name) {
       this.setState({ data: [], order: [] });
       return;
@@ -74,17 +74,27 @@ class Views extends TableView {
         const columns = {};
         results.forEach(item => {
           Object.keys(item).forEach(key => {
-            if (columns[key]) return;
+            if (columns[key]) {
+              return;
+            }
             const val = item[key];
             let type = 'String';
-            if (typeof val === 'number') type = 'Number';
-            else if (typeof val === 'boolean') type = 'Boolean';
-            else if (val && typeof val === 'object') {
-              if (val.__type === 'Date') type = 'Date';
-              else if (val.__type === 'Pointer') type = 'Pointer';
-              else if (val.__type === 'File') type = 'File';
-              else if (val.__type === 'GeoPoint') type = 'GeoPoint';
-              else type = 'Object';
+            if (typeof val === 'number') {
+              type = 'Number';
+            } else if (typeof val === 'boolean') {
+              type = 'Boolean';
+            } else if (val && typeof val === 'object') {
+              if (val.__type === 'Date') {
+                type = 'Date';
+              } else if (val.__type === 'Pointer') {
+                type = 'Pointer';
+              } else if (val.__type === 'File') {
+                type = 'File';
+              } else if (val.__type === 'GeoPoint') {
+                type = 'GeoPoint';
+              } else {
+                type = 'Object';
+              }
             }
             columns[key] = { type };
           });
@@ -116,6 +126,10 @@ class Views extends TableView {
     ));
   }
 
+  renderEmpty() {
+    return <div>No data available</div>;
+  }
+
   renderSidebar() {
     const categories = this.state.views.map(view => ({
       name: view.name,
diff --git a/src/lib/ViewPreferences.js b/src/lib/ViewPreferences.js
index 0507810522..90ebc03c2e 100644
--- a/src/lib/ViewPreferences.js
+++ b/src/lib/ViewPreferences.js
@@ -17,7 +17,9 @@ export function getViews(appId) {
 export function saveViews(appId, views) {
   try {
     localStorage.setItem(path(appId), JSON.stringify(views));
-  } catch {}
+  } catch {
+    // ignore write errors
+  }
 }
 
 function path(appId) {

From eab8cf33481e64e007e932c2d4d6572e3cb06ddf Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Thu, 10 Jul 2025 14:37:16 +0200
Subject: [PATCH 03/26] fix: populate classes in Views dialog

---
 src/dashboard/Data/Views/Views.react.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/dashboard/Data/Views/Views.react.js b/src/dashboard/Data/Views/Views.react.js
index 196f697dd5..77b07c6785 100644
--- a/src/dashboard/Data/Views/Views.react.js
+++ b/src/dashboard/Data/Views/Views.react.js
@@ -8,7 +8,11 @@ import React from 'react';
 import CreateViewDialog from './CreateViewDialog.react';
 import * as ViewPreferences from 'lib/ViewPreferences';
 import { withRouter } from 'lib/withRouter';
+import subscribeTo from 'lib/subscribeTo';
+import { ActionTypes as SchemaActionTypes } from 'lib/stores/SchemaStore';
 
+export default
+@subscribeTo('Schema', 'schema')
 @withRouter
 class Views extends TableView {
   constructor() {
@@ -28,12 +32,16 @@ class Views extends TableView {
   }
 
   componentWillMount() {
-    this.loadViews(this.context);
+    this.props.schema
+      .dispatch(SchemaActionTypes.FETCH)
+      .then(() => this.loadViews(this.context));
   }
 
   componentWillReceiveProps(nextProps, nextContext) {
     if (this.context !== nextContext) {
-      this.loadViews(nextContext);
+      this.props.schema
+        .dispatch(SchemaActionTypes.FETCH)
+        .then(() => this.loadViews(nextContext));
     }
     if (this.props.params.name !== nextProps.params.name || this.context !== nextContext) {
       this.loadData(nextProps.params.name);
@@ -154,8 +162,8 @@ class Views extends TableView {
   renderExtras() {
     if (this.state.showCreate) {
       let classNames = [];
-      if (this.context?.schema) {
-        const classes = this.context.schema.data.get('classes');
+      if (this.props.schema?.data) {
+        const classes = this.props.schema.data.get('classes');
         if (classes) {
           classNames = Object.keys(classes.toObject());
         }
@@ -182,5 +190,3 @@ class Views extends TableView {
     return null;
   }
 }
-
-export default Views;

From d485379a7c371be131f6afb29b8c4fa60f10cb20 Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Thu, 10 Jul 2025 14:49:54 +0200
Subject: [PATCH 04/26] fix: handle view query errors

---
 src/dashboard/Data/Views/Views.react.js | 61 +++++++++++++++++++++----
 1 file changed, 53 insertions(+), 8 deletions(-)

diff --git a/src/dashboard/Data/Views/Views.react.js b/src/dashboard/Data/Views/Views.react.js
index 77b07c6785..2ef9498586 100644
--- a/src/dashboard/Data/Views/Views.react.js
+++ b/src/dashboard/Data/Views/Views.react.js
@@ -5,6 +5,7 @@ import TableView from 'dashboard/TableView.react';
 import Toolbar from 'components/Toolbar/Toolbar.react';
 import Parse from 'parse';
 import React from 'react';
+import Notification from 'dashboard/Data/Browser/Notification.react';
 import CreateViewDialog from './CreateViewDialog.react';
 import * as ViewPreferences from 'lib/ViewPreferences';
 import { withRouter } from 'lib/withRouter';
@@ -24,8 +25,12 @@ class Views extends TableView {
       counts: {},
       data: [],
       order: [],
+      columns: {},
       showCreate: false,
+      lastError: null,
+      lastNote: null,
     };
+    this.noteTimeout = null;
     this.action = new SidebarAction('Create a view', () =>
       this.setState({ showCreate: true })
     );
@@ -59,6 +64,12 @@ class Views extends TableView {
               this.setState(({ counts }) => ({
                 counts: { ...counts, [view.name]: res.length },
               }));
+            })
+            .catch(error => {
+              this.showNote(
+                `Request failed: ${error.message || 'Unknown error occurred'}`,
+                true
+              );
             });
         }
       });
@@ -68,12 +79,12 @@ class Views extends TableView {
 
   loadData(name) {
     if (!name) {
-      this.setState({ data: [], order: [] });
+      this.setState({ data: [], order: [], columns: {} });
       return;
     }
     const view = (this.state.views || []).find(v => v.name === name);
     if (!view) {
-      this.setState({ data: [], order: [] });
+      this.setState({ data: [], order: [], columns: {} });
       return;
     }
     new Parse.Query(view.className)
@@ -104,11 +115,18 @@ class Views extends TableView {
                 type = 'Object';
               }
             }
-            columns[key] = { type };
-          });
+          columns[key] = { type };
         });
-        const order = Object.keys(columns).map(name => ({ name, width: 150 }));
-        this.setState({ data: results, order, columns });
+      });
+      const order = Object.keys(columns).map(name => ({ name, width: 150 }));
+      this.setState({ data: results, order, columns });
+      })
+      .catch(error => {
+        this.showNote(
+          `Request failed: ${error.message || 'Unknown error occurred'}`,
+          true
+        );
+        this.setState({ data: [], order: [], columns: {} });
       });
   }
 
@@ -160,6 +178,7 @@ class Views extends TableView {
   }
 
   renderExtras() {
+    let extras = null;
     if (this.state.showCreate) {
       let classNames = [];
       if (this.props.schema?.data) {
@@ -168,7 +187,7 @@ class Views extends TableView {
           classNames = Object.keys(classes.toObject());
         }
       }
-      return (
+      extras = (
         <CreateViewDialog
           classes={classNames}
           onCancel={() => this.setState({ showCreate: false })}
@@ -187,6 +206,32 @@ class Views extends TableView {
         />
       );
     }
-    return null;
+    let notification = null;
+    if (this.state.lastError) {
+      notification = <Notification note={this.state.lastError} isErrorNote={true} />;
+    } else if (this.state.lastNote) {
+      notification = <Notification note={this.state.lastNote} isErrorNote={false} />;
+    }
+    return (
+      <>
+        {extras}
+        {notification}
+      </>
+    );
+  }
+
+  showNote(message, isError) {
+    if (!message) {
+      return;
+    }
+    clearTimeout(this.noteTimeout);
+    if (isError) {
+      this.setState({ lastError: message, lastNote: null });
+    } else {
+      this.setState({ lastNote: message, lastError: null });
+    }
+    this.noteTimeout = setTimeout(() => {
+      this.setState({ lastError: null, lastNote: null });
+    }, 3500);
   }
 }

From 88252393a278c82660f2c91a839f328b476332b3 Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Thu, 10 Jul 2025 15:00:09 +0200
Subject: [PATCH 05/26] fix: align view table headers

---
 src/dashboard/Data/Views/Views.react.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/dashboard/Data/Views/Views.react.js b/src/dashboard/Data/Views/Views.react.js
index 2ef9498586..684d74a966 100644
--- a/src/dashboard/Data/Views/Views.react.js
+++ b/src/dashboard/Data/Views/Views.react.js
@@ -118,7 +118,9 @@ class Views extends TableView {
           columns[key] = { type };
         });
       });
-      const order = Object.keys(columns).map(name => ({ name, width: 150 }));
+      const colNames = Object.keys(columns);
+      const width = colNames.length > 0 ? 100 / colNames.length : 0;
+      const order = colNames.map(name => ({ name, width }));
       this.setState({ data: results, order, columns });
       })
       .catch(error => {
@@ -137,16 +139,16 @@ class Views extends TableView {
   renderRow(row) {
     return (
       <tr key={JSON.stringify(row)}>
-        {this.state.order.map(({ name }) => (
-          <td key={name}>{String(row[name])}</td>
+        {this.state.order.map(({ name, width }) => (
+          <td key={name} style={{ width: width + '%' }}>{String(row[name])}</td>
         ))}
       </tr>
     );
   }
 
   renderHeaders() {
-    return this.state.order.map(({ name }) => (
-      <TableHeader key={name} width={20} >
+    return this.state.order.map(({ name, width }) => (
+      <TableHeader key={name} width={width}>
         {name}
       </TableHeader>
     ));

From 49cd9fcdc7bea0afe4849c300590edec79b9deaf Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Thu, 10 Jul 2025 15:10:59 +0200
Subject: [PATCH 06/26] feat: link pointers in views

---
 src/dashboard/Data/Views/Views.react.js | 44 +++++++++++++++++++++++--
 1 file changed, 41 insertions(+), 3 deletions(-)

diff --git a/src/dashboard/Data/Views/Views.react.js b/src/dashboard/Data/Views/Views.react.js
index 684d74a966..9854f4831e 100644
--- a/src/dashboard/Data/Views/Views.react.js
+++ b/src/dashboard/Data/Views/Views.react.js
@@ -6,8 +6,10 @@ import Toolbar from 'components/Toolbar/Toolbar.react';
 import Parse from 'parse';
 import React from 'react';
 import Notification from 'dashboard/Data/Browser/Notification.react';
+import Pill from 'components/Pill/Pill.react';
 import CreateViewDialog from './CreateViewDialog.react';
 import * as ViewPreferences from 'lib/ViewPreferences';
+import generatePath from 'lib/generatePath';
 import { withRouter } from 'lib/withRouter';
 import subscribeTo from 'lib/subscribeTo';
 import { ActionTypes as SchemaActionTypes } from 'lib/stores/SchemaStore';
@@ -139,9 +141,33 @@ class Views extends TableView {
   renderRow(row) {
     return (
       <tr key={JSON.stringify(row)}>
-        {this.state.order.map(({ name, width }) => (
-          <td key={name} style={{ width: width + '%' }}>{String(row[name])}</td>
-        ))}
+        {this.state.order.map(({ name, width }) => {
+          const value = row[name];
+          const type = this.state.columns[name]?.type;
+          let content = '';
+          if (type === 'Pointer' && value && value.className && value.objectId) {
+            const id = value.objectId;
+            const className = value.className;
+            content = (
+              <Pill
+                value={id}
+                followClick={true}
+                onClick={() =>
+                  this.handlePointerClick({ className, id })
+                }
+              />
+            );
+          } else if (type === 'Object') {
+            content = JSON.stringify(value);
+          } else {
+            content = String(value);
+          }
+          return (
+            <td key={name} style={{ width: width + '%' }}>
+              {content}
+            </td>
+          );
+        })}
       </tr>
     );
   }
@@ -222,6 +248,18 @@ class Views extends TableView {
     );
   }
 
+  handlePointerClick({ className, id, field = 'objectId' }) {
+    const filters = JSON.stringify([
+      { field, constraint: 'eq', compareTo: id },
+    ]);
+    this.props.navigate(
+      generatePath(
+        this.context,
+        `browser/${className}?filters=${encodeURIComponent(filters)}`
+      )
+    );
+  }
+
   showNote(message, isError) {
     if (!message) {
       return;

From 6ed37baa0cfc731ef8dc7ba22f4bb824de2b49b6 Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Thu, 10 Jul 2025 15:37:25 +0200
Subject: [PATCH 07/26] fix: preserve filter URL for pointer links

---
 src/dashboard/Data/Views/Views.react.js | 29 ++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/dashboard/Data/Views/Views.react.js b/src/dashboard/Data/Views/Views.react.js
index 9854f4831e..2eea78118b 100644
--- a/src/dashboard/Data/Views/Views.react.js
+++ b/src/dashboard/Data/Views/Views.react.js
@@ -14,6 +14,8 @@ import { withRouter } from 'lib/withRouter';
 import subscribeTo from 'lib/subscribeTo';
 import { ActionTypes as SchemaActionTypes } from 'lib/stores/SchemaStore';
 
+const BROWSER_LAST_LOCATION = 'brower_last_location';
+
 export default
 @subscribeTo('Schema', 'schema')
 @withRouter
@@ -252,12 +254,29 @@ class Views extends TableView {
     const filters = JSON.stringify([
       { field, constraint: 'eq', compareTo: id },
     ]);
-    this.props.navigate(
-      generatePath(
-        this.context,
-        `browser/${className}?filters=${encodeURIComponent(filters)}`
-      )
+    const path = generatePath(
+      this.context,
+      `browser/${className}?filters=${encodeURIComponent(filters)}`
     );
+    try {
+      const existing = JSON.parse(
+        window.localStorage.getItem(BROWSER_LAST_LOCATION)
+      ) || [];
+      const updated = existing.filter(
+        e => e.appId !== this.context.applicationId
+      );
+      updated.push({
+        appId: this.context.applicationId,
+        location: path,
+      });
+      window.localStorage.setItem(
+        BROWSER_LAST_LOCATION,
+        JSON.stringify(updated)
+      );
+    } catch {
+      // ignore write errors
+    }
+    this.props.navigate(path);
   }
 
   showNote(message, isError) {

From bb8eabd2ad13082af457f6ec804eb90376d16ec4 Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Thu, 10 Jul 2025 16:08:04 +0200
Subject: [PATCH 08/26] fix: improve views table usability

---
 src/dashboard/Data/Views/Views.react.js | 85 +++++++++++++------------
 src/dashboard/Data/Views/Views.scss     | 58 +++++++++++++++++
 2 files changed, 101 insertions(+), 42 deletions(-)
 create mode 100644 src/dashboard/Data/Views/Views.scss

diff --git a/src/dashboard/Data/Views/Views.react.js b/src/dashboard/Data/Views/Views.react.js
index 2eea78118b..82f84d4b28 100644
--- a/src/dashboard/Data/Views/Views.react.js
+++ b/src/dashboard/Data/Views/Views.react.js
@@ -1,20 +1,20 @@
 import CategoryList from 'components/CategoryList/CategoryList.react';
 import SidebarAction from 'components/Sidebar/SidebarAction';
-import TableHeader from 'components/Table/TableHeader.react';
 import TableView from 'dashboard/TableView.react';
 import Toolbar from 'components/Toolbar/Toolbar.react';
 import Parse from 'parse';
 import React from 'react';
 import Notification from 'dashboard/Data/Browser/Notification.react';
-import Pill from 'components/Pill/Pill.react';
+import Icon from 'components/Icon/Icon.react';
+import DragHandle from 'components/DragHandle/DragHandle.react';
 import CreateViewDialog from './CreateViewDialog.react';
 import * as ViewPreferences from 'lib/ViewPreferences';
 import generatePath from 'lib/generatePath';
 import { withRouter } from 'lib/withRouter';
 import subscribeTo from 'lib/subscribeTo';
 import { ActionTypes as SchemaActionTypes } from 'lib/stores/SchemaStore';
+import styles from './Views.scss';
 
-const BROWSER_LAST_LOCATION = 'brower_last_location';
 
 export default
 @subscribeTo('Schema', 'schema')
@@ -95,11 +95,10 @@ class Views extends TableView {
       .aggregate(view.query, { useMasterKey: true })
       .then(results => {
         const columns = {};
+        const computeWidth = str =>
+          Math.min(100, Math.max((String(str).length + 2) * 8, 40));
         results.forEach(item => {
           Object.keys(item).forEach(key => {
-            if (columns[key]) {
-              return;
-            }
             const val = item[key];
             let type = 'String';
             if (typeof val === 'number') {
@@ -119,13 +118,23 @@ class Views extends TableView {
                 type = 'Object';
               }
             }
-          columns[key] = { type };
+            const content =
+              type === 'Pointer'
+                ? val.objectId
+                : type === 'Object'
+                  ? JSON.stringify(val)
+                  : val;
+            const width = computeWidth(content || key);
+            if (!columns[key]) {
+              columns[key] = { type, width };
+            } else if (width > columns[key].width) {
+              columns[key].width = width;
+            }
+          });
         });
-      });
-      const colNames = Object.keys(columns);
-      const width = colNames.length > 0 ? 100 / colNames.length : 0;
-      const order = colNames.map(name => ({ name, width }));
-      this.setState({ data: results, order, columns });
+        const colNames = Object.keys(columns);
+        const order = colNames.map(name => ({ name, width: columns[name].width }));
+        this.setState({ data: results, order, columns });
       })
       .catch(error => {
         this.showNote(
@@ -142,7 +151,7 @@ class Views extends TableView {
 
   renderRow(row) {
     return (
-      <tr key={JSON.stringify(row)}>
+      <tr key={JSON.stringify(row)} className={styles.tableRow}>
         {this.state.order.map(({ name, width }) => {
           const value = row[name];
           const type = this.state.columns[name]?.type;
@@ -151,13 +160,13 @@ class Views extends TableView {
             const id = value.objectId;
             const className = value.className;
             content = (
-              <Pill
-                value={id}
-                followClick={true}
-                onClick={() =>
-                  this.handlePointerClick({ className, id })
-                }
-              />
+              <span
+                className={styles.pointerLink}
+                onClick={() => this.handlePointerClick({ className, id })}
+              >
+                {id}
+                <Icon name="right-outline" width={12} height={12} fill="#1669a1" />
+              </span>
             );
           } else if (type === 'Object') {
             content = JSON.stringify(value);
@@ -165,7 +174,7 @@ class Views extends TableView {
             content = String(value);
           }
           return (
-            <td key={name} style={{ width: width + '%' }}>
+            <td key={name} className={styles.cell} style={{ width }}>
               {content}
             </td>
           );
@@ -174,11 +183,21 @@ class Views extends TableView {
     );
   }
 
+  handleResize(index, delta) {
+    this.setState(({ order }) => {
+      const newOrder = [...order];
+      const next = Math.max(40, newOrder[index].width + delta);
+      newOrder[index] = { ...newOrder[index], width: next };
+      return { order: newOrder };
+    });
+  }
+
   renderHeaders() {
-    return this.state.order.map(({ name, width }) => (
-      <TableHeader key={name} width={width}>
+    return this.state.order.map(({ name, width }, i) => (
+      <div key={name} className={styles.headerWrap} style={{ width }}>
         {name}
-      </TableHeader>
+        <DragHandle className={styles.handle} onDrag={delta => this.handleResize(i, delta)} />
+      </div>
     ));
   }
 
@@ -258,24 +277,6 @@ class Views extends TableView {
       this.context,
       `browser/${className}?filters=${encodeURIComponent(filters)}`
     );
-    try {
-      const existing = JSON.parse(
-        window.localStorage.getItem(BROWSER_LAST_LOCATION)
-      ) || [];
-      const updated = existing.filter(
-        e => e.appId !== this.context.applicationId
-      );
-      updated.push({
-        appId: this.context.applicationId,
-        location: path,
-      });
-      window.localStorage.setItem(
-        BROWSER_LAST_LOCATION,
-        JSON.stringify(updated)
-      );
-    } catch {
-      // ignore write errors
-    }
     this.props.navigate(path);
   }
 
diff --git a/src/dashboard/Data/Views/Views.scss b/src/dashboard/Data/Views/Views.scss
new file mode 100644
index 0000000000..b3d2d4dff7
--- /dev/null
+++ b/src/dashboard/Data/Views/Views.scss
@@ -0,0 +1,58 @@
+@import 'stylesheets/globals.scss';
+
+.headerWrap {
+  display: inline-block;
+  vertical-align: top;
+  background: #66637A;
+  color: white;
+  line-height: 30px;
+  padding: 0 16px;
+  border-right: 1px solid #e3e3ea;
+  position: relative;
+  white-space: nowrap;
+  max-width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.handle {
+  position: absolute;
+  top: 0;
+  right: -4px;
+  width: 8px;
+  height: 30px;
+  cursor: ew-resize;
+}
+
+.tableRow {
+  @include MonospaceFont;
+  font-size: 12px;
+  white-space: nowrap;
+  height: 30px;
+  border-bottom: 1px solid #e3e3ea;
+}
+
+.tableRow:nth-child(odd) {
+  background: #f4f5f7;
+}
+
+.cell {
+  line-height: 30px;
+  padding: 10px 16px;
+  border-right: 1px solid #e3e3ea;
+  max-width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pointerLink {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+
+  svg {
+    margin-left: 4px;
+    transform: rotate(316deg);
+  }
+}

From e97fbd92dbf44098240a972fc1f41a9926da855a Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Thu, 10 Jul 2025 16:24:26 +0200
Subject: [PATCH 09/26] fix: sync views column widths

---
 src/dashboard/Data/Views/Views.react.js | 52 +++++++++++++++++++++++--
 1 file changed, 49 insertions(+), 3 deletions(-)

diff --git a/src/dashboard/Data/Views/Views.react.js b/src/dashboard/Data/Views/Views.react.js
index 82f84d4b28..9fdb71748d 100644
--- a/src/dashboard/Data/Views/Views.react.js
+++ b/src/dashboard/Data/Views/Views.react.js
@@ -2,6 +2,7 @@ import CategoryList from 'components/CategoryList/CategoryList.react';
 import SidebarAction from 'components/Sidebar/SidebarAction';
 import TableView from 'dashboard/TableView.react';
 import Toolbar from 'components/Toolbar/Toolbar.react';
+import LoaderContainer from 'components/LoaderContainer/LoaderContainer.react';
 import Parse from 'parse';
 import React from 'react';
 import Notification from 'dashboard/Data/Browser/Notification.react';
@@ -14,6 +15,7 @@ import { withRouter } from 'lib/withRouter';
 import subscribeTo from 'lib/subscribeTo';
 import { ActionTypes as SchemaActionTypes } from 'lib/stores/SchemaStore';
 import styles from './Views.scss';
+import tableStyles from 'dashboard/TableView.scss';
 
 
 export default
@@ -30,6 +32,7 @@ class Views extends TableView {
       data: [],
       order: [],
       columns: {},
+      tableWidth: 0,
       showCreate: false,
       lastError: null,
       lastNote: null,
@@ -134,7 +137,8 @@ class Views extends TableView {
         });
         const colNames = Object.keys(columns);
         const order = colNames.map(name => ({ name, width: columns[name].width }));
-        this.setState({ data: results, order, columns });
+        const tableWidth = order.reduce((sum, col) => sum + col.width, 0);
+        this.setState({ data: results, order, columns, tableWidth });
       })
       .catch(error => {
         this.showNote(
@@ -149,6 +153,47 @@ class Views extends TableView {
     return this.state.data;
   }
 
+  renderContent() {
+    const toolbar = this.renderToolbar();
+    const data = this.tableData();
+    const footer = this.renderFooter();
+    let content = null;
+    let headers = null;
+    if (data !== undefined) {
+      if (!Array.isArray(data)) {
+        console.warn('tableData() needs to return an array of objects');
+      } else {
+        if (data.length === 0) {
+          content = <div className={tableStyles.empty}>{this.renderEmpty()}</div>;
+        } else {
+          content = (
+            <div className={tableStyles.rows}>
+              <table style={{ width: this.state.tableWidth, tableLayout: 'fixed' }}>
+                <tbody>{data.map(row => this.renderRow(row))}</tbody>
+              </table>
+              {footer}
+            </div>
+          );
+          headers = this.renderHeaders();
+        }
+      }
+    }
+    const extras = this.renderExtras ? this.renderExtras() : null;
+    const loading = this.state ? this.state.loading : false;
+    return (
+      <div>
+        <LoaderContainer loading={loading}>
+          <div className={tableStyles.content}>{content}</div>
+        </LoaderContainer>
+        {toolbar}
+        <div className={tableStyles.headers} style={{ width: this.state.tableWidth }}>
+          {headers}
+        </div>
+        {extras}
+      </div>
+    );
+  }
+
   renderRow(row) {
     return (
       <tr key={JSON.stringify(row)} className={styles.tableRow}>
@@ -184,11 +229,12 @@ class Views extends TableView {
   }
 
   handleResize(index, delta) {
-    this.setState(({ order }) => {
+    this.setState(({ order, tableWidth }) => {
       const newOrder = [...order];
       const next = Math.max(40, newOrder[index].width + delta);
+      const diff = next - newOrder[index].width;
       newOrder[index] = { ...newOrder[index], width: next };
-      return { order: newOrder };
+      return { order: newOrder, tableWidth: tableWidth + diff };
     });
   }
 

From 1de7b4c47cfd68054476cf1c770ddf76df599e37 Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Thu, 10 Jul 2025 17:35:28 +0200
Subject: [PATCH 10/26] fix: align resizable view columns

---
 src/dashboard/Data/Views/Views.react.js | 14 ++------------
 src/dashboard/Data/Views/Views.scss     |  2 --
 2 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/src/dashboard/Data/Views/Views.react.js b/src/dashboard/Data/Views/Views.react.js
index 9fdb71748d..5bec96823f 100644
--- a/src/dashboard/Data/Views/Views.react.js
+++ b/src/dashboard/Data/Views/Views.react.js
@@ -98,8 +98,7 @@ class Views extends TableView {
       .aggregate(view.query, { useMasterKey: true })
       .then(results => {
         const columns = {};
-        const computeWidth = str =>
-          Math.min(100, Math.max((String(str).length + 2) * 8, 40));
+        const computeWidth = str => Math.max((String(str).length + 2) * 8, 40);
         results.forEach(item => {
           Object.keys(item).forEach(key => {
             const val = item[key];
@@ -121,17 +120,8 @@ class Views extends TableView {
                 type = 'Object';
               }
             }
-            const content =
-              type === 'Pointer'
-                ? val.objectId
-                : type === 'Object'
-                  ? JSON.stringify(val)
-                  : val;
-            const width = computeWidth(content || key);
             if (!columns[key]) {
-              columns[key] = { type, width };
-            } else if (width > columns[key].width) {
-              columns[key].width = width;
+              columns[key] = { type, width: computeWidth(key) };
             }
           });
         });
diff --git a/src/dashboard/Data/Views/Views.scss b/src/dashboard/Data/Views/Views.scss
index b3d2d4dff7..fbd4286c03 100644
--- a/src/dashboard/Data/Views/Views.scss
+++ b/src/dashboard/Data/Views/Views.scss
@@ -10,7 +10,6 @@
   border-right: 1px solid #e3e3ea;
   position: relative;
   white-space: nowrap;
-  max-width: 100px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -40,7 +39,6 @@
   line-height: 30px;
   padding: 10px 16px;
   border-right: 1px solid #e3e3ea;
-  max-width: 100px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

From 5781c2bb36fea619a63e57f2c5d3457960e97870 Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Fri, 11 Jul 2025 00:47:40 +0200
Subject: [PATCH 11/26] fix: align view headers with columns

---
 src/dashboard/Data/Views/Views.react.js | 5 ++++-
 src/dashboard/Data/Views/Views.scss     | 5 +++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/dashboard/Data/Views/Views.react.js b/src/dashboard/Data/Views/Views.react.js
index 5bec96823f..5161c955dc 100644
--- a/src/dashboard/Data/Views/Views.react.js
+++ b/src/dashboard/Data/Views/Views.react.js
@@ -176,7 +176,10 @@ class Views extends TableView {
           <div className={tableStyles.content}>{content}</div>
         </LoaderContainer>
         {toolbar}
-        <div className={tableStyles.headers} style={{ width: this.state.tableWidth }}>
+        <div
+          className={tableStyles.headers}
+          style={{ width: this.state.tableWidth, right: 'auto' }}
+        >
           {headers}
         </div>
         {extras}
diff --git a/src/dashboard/Data/Views/Views.scss b/src/dashboard/Data/Views/Views.scss
index fbd4286c03..35a2c6d438 100644
--- a/src/dashboard/Data/Views/Views.scss
+++ b/src/dashboard/Data/Views/Views.scss
@@ -1,5 +1,9 @@
 @import 'stylesheets/globals.scss';
 
+.headers {
+  right: auto;
+}
+
 .headerWrap {
   display: inline-block;
   vertical-align: top;
@@ -42,6 +46,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  max-width: none;
 }
 
 .pointerLink {

From c0ca3e2290b20e5777b78dedbcd6846aee9cb098 Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Fri, 11 Jul 2025 01:23:43 +0200
Subject: [PATCH 12/26] fix: stabilize column resize

---
 src/dashboard/Data/Views/Views.react.js | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/dashboard/Data/Views/Views.react.js b/src/dashboard/Data/Views/Views.react.js
index 5161c955dc..f8626929d6 100644
--- a/src/dashboard/Data/Views/Views.react.js
+++ b/src/dashboard/Data/Views/Views.react.js
@@ -159,6 +159,7 @@ class Views extends TableView {
           content = (
             <div className={tableStyles.rows}>
               <table style={{ width: this.state.tableWidth, tableLayout: 'fixed' }}>
+                {this.renderColGroup()}
                 <tbody>{data.map(row => this.renderRow(row))}</tbody>
               </table>
               {footer}
@@ -212,7 +213,7 @@ class Views extends TableView {
             content = String(value);
           }
           return (
-            <td key={name} className={styles.cell} style={{ width }}>
+            <td key={name} className={styles.cell}>
               {content}
             </td>
           );
@@ -221,13 +222,25 @@ class Views extends TableView {
     );
   }
 
+  renderColGroup() {
+    return (
+      <colgroup>
+        {this.state.order.map(({ width }, i) => (
+          <col key={i} style={{ width }} />
+        ))}
+      </colgroup>
+    );
+  }
+
   handleResize(index, delta) {
-    this.setState(({ order, tableWidth }) => {
+    this.setState(({ order }) => {
       const newOrder = [...order];
-      const next = Math.max(40, newOrder[index].width + delta);
-      const diff = next - newOrder[index].width;
-      newOrder[index] = { ...newOrder[index], width: next };
-      return { order: newOrder, tableWidth: tableWidth + diff };
+      newOrder[index] = {
+        ...newOrder[index],
+        width: Math.max(40, newOrder[index].width + delta),
+      };
+      const tableWidth = newOrder.reduce((sum, col) => sum + col.width, 0);
+      return { order: newOrder, tableWidth };
     });
   }
 

From 0404b3ed57db2809492d9002b9f04d7adc9c26e0 Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Fri, 11 Jul 2025 01:31:37 +0200
Subject: [PATCH 13/26] fix: sync view headers with scroll

---
 src/dashboard/Data/Views/Views.react.js | 29 ++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/dashboard/Data/Views/Views.react.js b/src/dashboard/Data/Views/Views.react.js
index f8626929d6..059c6a9273 100644
--- a/src/dashboard/Data/Views/Views.react.js
+++ b/src/dashboard/Data/Views/Views.react.js
@@ -26,6 +26,9 @@ class Views extends TableView {
     super();
     this.section = 'Core';
     this.subsection = 'Views';
+    this.contentRef = React.createRef();
+    this.headerRef = React.createRef();
+    this.syncHeaderPosition = this.syncHeaderPosition.bind(this);
     this.state = {
       views: [],
       counts: {},
@@ -49,6 +52,21 @@ class Views extends TableView {
       .then(() => this.loadViews(this.context));
   }
 
+  componentDidMount() {
+    this.syncHeaderPosition();
+    window.addEventListener('scroll', this.syncHeaderPosition);
+    window.addEventListener('resize', this.syncHeaderPosition);
+  }
+
+  componentDidUpdate() {
+    this.syncHeaderPosition();
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.syncHeaderPosition);
+    window.removeEventListener('resize', this.syncHeaderPosition);
+  }
+
   componentWillReceiveProps(nextProps, nextContext) {
     if (this.context !== nextContext) {
       this.props.schema
@@ -174,12 +192,13 @@ class Views extends TableView {
     return (
       <div>
         <LoaderContainer loading={loading}>
-          <div className={tableStyles.content}>{content}</div>
+          <div className={tableStyles.content} ref={this.contentRef}>{content}</div>
         </LoaderContainer>
         {toolbar}
         <div
           className={tableStyles.headers}
           style={{ width: this.state.tableWidth, right: 'auto' }}
+          ref={this.headerRef}
         >
           {headers}
         </div>
@@ -332,6 +351,14 @@ class Views extends TableView {
     this.props.navigate(path);
   }
 
+  syncHeaderPosition() {
+    if (!this.headerRef.current || !this.contentRef.current) {
+      return;
+    }
+    const left = this.contentRef.current.getBoundingClientRect().left;
+    this.headerRef.current.style.left = `${left}px`;
+  }
+
   showNote(message, isError) {
     if (!message) {
       return;

From 1708ad9450da7559c27026e7d8240e1ac67a4527 Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Fri, 11 Jul 2025 01:46:49 +0200
Subject: [PATCH 14/26] fix: allow route for views page

---
 src/dashboard/DashboardView.react.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/dashboard/DashboardView.react.js b/src/dashboard/DashboardView.react.js
index c48e5ac461..bf9aa12dc3 100644
--- a/src/dashboard/DashboardView.react.js
+++ b/src/dashboard/DashboardView.react.js
@@ -306,9 +306,10 @@ export default class DashboardView extends React.Component {
     );
 
     let content = <div className={styles.content}>{this.renderContent()}</div>;
-    const canRoute = [...coreSubsections, ...pushSubsections, ...settingsSections]
-      .map(({ link }) => link.split('/')[1])
-      .includes(this.state.route);
+    const allowedRoutes = [...coreSubsections, ...pushSubsections, ...settingsSections]
+      .map(({ link }) => link.split('/')[1]);
+    const canRoute =
+      allowedRoutes.includes(this.state.route) || this.state.route === 'views';
 
     if (!canRoute) {
       content = (

From d4902604224be74fbc44b019d43105d6904f95e5 Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Fri, 11 Jul 2025 02:01:07 +0200
Subject: [PATCH 15/26] fix: parse route query string

---
 src/dashboard/DashboardView.react.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/dashboard/DashboardView.react.js b/src/dashboard/DashboardView.react.js
index bf9aa12dc3..2dc7cca57b 100644
--- a/src/dashboard/DashboardView.react.js
+++ b/src/dashboard/DashboardView.react.js
@@ -33,7 +33,10 @@ export default class DashboardView extends React.Component {
 
   onRouteChanged() {
     const path = this.props.location?.pathname ?? window.location.pathname;
-    const route = path.split('apps')[1].split('/')[2];
+    const route = path
+      .split('apps')[1]
+      .split('/')[2]
+      .split('?')[0];
     if (route !== this.state.route) {
       this.setState({ route });
     }

From 7c6230ac82afac68c68bbec6ee5b0efff18eb012 Mon Sep 17 00:00:00 2001
From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com>
Date: Fri, 11 Jul 2025 02:02:45 +0200
Subject: [PATCH 16/26] Revert "fix: sync view headers with scroll"

This reverts commit 0404b3ed57db2809492d9002b9f04d7adc9c26e0.
---
 src/dashboard/Data/Views/Views.react.js | 29 +------------------------
 1 file changed, 1 insertion(+), 28 deletions(-)

diff --git a/src/dashboard/Data/Views/Views.react.js b/src/dashboard/Data/Views/Views.react.js
index 059c6a9273..f8626929d6 100644
--- a/src/dashboard/Data/Views/Views.react.js
+++ b/src/dashboard/Data/Views/Views.react.js
@@ -26,9 +26,6 @@ class Views extends TableView {
     super();
     this.section = 'Core';
     this.subsection = 'Views';
-    this.contentRef = React.createRef();
-    this.headerRef = React.createRef();
-    this.syncHeaderPosition = this.syncHeaderPosition.bind(this);
     this.state = {
       views: [],
       counts: {},
@@ -52,21 +49,6 @@ class Views extends TableView {
       .then(() => this.loadViews(this.context));
   }
 
-  componentDidMount() {
-    this.syncHeaderPosition();
-    window.addEventListener('scroll', this.syncHeaderPosition);
-    window.addEventListener('resize', this.syncHeaderPosition);
-  }
-
-  componentDidUpdate() {
-    this.syncHeaderPosition();
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('scroll', this.syncHeaderPosition);
-    window.removeEventListener('resize', this.syncHeaderPosition);
-  }
-
   componentWillReceiveProps(nextProps, nextContext) {
     if (this.context !== nextContext) {
       this.props.schema
@@ -192,13 +174,12 @@ class Views extends TableView {
     return (
       <div>
         <LoaderContainer loading={loading}>
-          <div className={tableStyles.content} ref={this.contentRef}>{content}</div>
+          <div className={tableStyles.content}>{content}</div>
         </LoaderContainer>
         {toolbar}
         <div
           className={tableStyles.headers}
           style={{ width: this.state.tableWidth, right: 'auto' }}
-          ref={this.headerRef}
         >
           {headers}
         </div>
@@ -351,14 +332,6 @@ class Views extends TableView {
     this.props.navigate(path);
   }
 
-  syncHeaderPosition() {
-    if (!this.headerRef.current || !this.contentRef.current) {
-      return;
-    }
-    const left = this.contentRef.current.getBoundingClientRect().left;
-    this.headerRef.current.style.left = `${left}px`;
-  }
-
   showNote(message, isError) {
     if (!message) {
       return;

From 510dea272b6a779932181e5820aa64796e0c2ffe Mon Sep 17 00:00:00 2001
From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com>
Date: Fri, 11 Jul 2025 02:02:48 +0200
Subject: [PATCH 17/26] Revert "fix: allow route for views page"

This reverts commit 1708ad9450da7559c27026e7d8240e1ac67a4527.
---
 src/dashboard/DashboardView.react.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/dashboard/DashboardView.react.js b/src/dashboard/DashboardView.react.js
index 2dc7cca57b..61987c4797 100644
--- a/src/dashboard/DashboardView.react.js
+++ b/src/dashboard/DashboardView.react.js
@@ -309,10 +309,9 @@ export default class DashboardView extends React.Component {
     );
 
     let content = <div className={styles.content}>{this.renderContent()}</div>;
-    const allowedRoutes = [...coreSubsections, ...pushSubsections, ...settingsSections]
-      .map(({ link }) => link.split('/')[1]);
-    const canRoute =
-      allowedRoutes.includes(this.state.route) || this.state.route === 'views';
+    const canRoute = [...coreSubsections, ...pushSubsections, ...settingsSections]
+      .map(({ link }) => link.split('/')[1])
+      .includes(this.state.route);
 
     if (!canRoute) {
       content = (

From d18cb6a054813d8e104b5cf04e90cf13b92b2d07 Mon Sep 17 00:00:00 2001
From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com>
Date: Fri, 11 Jul 2025 02:02:49 +0200
Subject: [PATCH 18/26] Revert "fix: parse route query string"

This reverts commit d4902604224be74fbc44b019d43105d6904f95e5.
---
 src/dashboard/DashboardView.react.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/dashboard/DashboardView.react.js b/src/dashboard/DashboardView.react.js
index 61987c4797..c48e5ac461 100644
--- a/src/dashboard/DashboardView.react.js
+++ b/src/dashboard/DashboardView.react.js
@@ -33,10 +33,7 @@ export default class DashboardView extends React.Component {
 
   onRouteChanged() {
     const path = this.props.location?.pathname ?? window.location.pathname;
-    const route = path
-      .split('apps')[1]
-      .split('/')[2]
-      .split('?')[0];
+    const route = path.split('apps')[1].split('/')[2];
     if (route !== this.state.route) {
       this.setState({ route });
     }

From 80ef8c1808b0514d3efa78e1ca31a4e50090c52b Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Sat, 12 Jul 2025 01:45:45 +0200
Subject: [PATCH 19/26] feat: Allow editing views (#2889)

---
 .../Data/Views/DeleteViewDialog.react.js      |  45 ++++
 .../Data/Views/EditViewDialog.react.js        | 112 ++++++++++
 src/dashboard/Data/Views/Views.react.js       | 204 ++++++++++++++++--
 src/dashboard/Data/Views/Views.scss           |  14 +-
 4 files changed, 343 insertions(+), 32 deletions(-)
 create mode 100644 src/dashboard/Data/Views/DeleteViewDialog.react.js
 create mode 100644 src/dashboard/Data/Views/EditViewDialog.react.js

diff --git a/src/dashboard/Data/Views/DeleteViewDialog.react.js b/src/dashboard/Data/Views/DeleteViewDialog.react.js
new file mode 100644
index 0000000000..eae2ed039d
--- /dev/null
+++ b/src/dashboard/Data/Views/DeleteViewDialog.react.js
@@ -0,0 +1,45 @@
+import Field from 'components/Field/Field.react';
+import Label from 'components/Label/Label.react';
+import Modal from 'components/Modal/Modal.react';
+import React from 'react';
+import TextInput from 'components/TextInput/TextInput.react';
+
+export default class DeleteViewDialog extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      confirmation: '',
+    };
+  }
+
+  valid() {
+    return this.state.confirmation === this.props.name;
+  }
+
+  render() {
+    return (
+      <Modal
+        type={Modal.Types.DANGER}
+        icon="warn-outline"
+        title="Delete view?"
+        subtitle="This action cannot be undone!"
+        disabled={!this.valid()}
+        confirmText="Delete"
+        cancelText="Cancel"
+        onCancel={this.props.onCancel}
+        onConfirm={this.props.onConfirm}
+      >
+        <Field
+          label={<Label text="Confirm this action" description="Enter the view name to continue." />}
+          input={
+            <TextInput
+              placeholder="View name"
+              value={this.state.confirmation}
+              onChange={confirmation => this.setState({ confirmation })}
+            />
+          }
+        />
+      </Modal>
+    );
+  }
+}
diff --git a/src/dashboard/Data/Views/EditViewDialog.react.js b/src/dashboard/Data/Views/EditViewDialog.react.js
new file mode 100644
index 0000000000..50e3bbb57f
--- /dev/null
+++ b/src/dashboard/Data/Views/EditViewDialog.react.js
@@ -0,0 +1,112 @@
+import Dropdown from 'components/Dropdown/Dropdown.react';
+import Field from 'components/Field/Field.react';
+import Label from 'components/Label/Label.react';
+import Modal from 'components/Modal/Modal.react';
+import Option from 'components/Dropdown/Option.react';
+import React from 'react';
+import TextInput from 'components/TextInput/TextInput.react';
+import Checkbox from 'components/Checkbox/Checkbox.react';
+
+function isValidJSON(value) {
+  try {
+    JSON.parse(value);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export default class EditViewDialog extends React.Component {
+  constructor(props) {
+    super();
+    const view = props.view || {};
+    this.state = {
+      name: view.name || '',
+      className: view.className || '',
+      query: JSON.stringify(view.query || [], null, 2),
+      showCounter: !!view.showCounter,
+    };
+  }
+
+  valid() {
+    return (
+      this.state.name.length > 0 &&
+      this.state.className.length > 0 &&
+      isValidJSON(this.state.query)
+    );
+  }
+
+  render() {
+    const { classes, onConfirm, onCancel } = this.props;
+    return (
+      <Modal
+        type={Modal.Types.INFO}
+        icon="edit-solid"
+        iconSize={40}
+        title="Edit view?"
+        subtitle="Update the custom query."
+        confirmText="Save"
+        cancelText="Cancel"
+        disabled={!this.valid()}
+        onCancel={onCancel}
+        onConfirm={() =>
+          onConfirm({
+            name: this.state.name,
+            className: this.state.className,
+            query: JSON.parse(this.state.query),
+            showCounter: this.state.showCounter,
+          })
+        }
+      >
+        <Field
+          label={<Label text="Name" />}
+          input={
+            <TextInput
+              value={this.state.name}
+              onChange={name => this.setState({ name })}
+            />
+          }
+        />
+        <Field
+          label={<Label text="Class" />}
+          input={
+            <Dropdown
+              value={this.state.className}
+              onChange={className => this.setState({ className })}
+            >
+              {classes.map(c => (
+                <Option key={c} value={c}>
+                  {c}
+                </Option>
+              ))}
+            </Dropdown>
+          }
+        />
+        <Field
+          label={
+            <Label
+              text="Query"
+              description="An aggregation pipeline that returns an array of items."
+            />
+          }
+          input={
+            <TextInput
+              multiline={true}
+              value={this.state.query}
+              onChange={query => this.setState({ query })}
+            />
+          }
+        />
+        <Field
+          label={<Label text="Show object counter" />}
+          input={
+            <Checkbox
+              checked={this.state.showCounter}
+              onChange={showCounter => this.setState({ showCounter })}
+            />
+          }
+        />
+      </Modal>
+    );
+  }
+}
diff --git a/src/dashboard/Data/Views/Views.react.js b/src/dashboard/Data/Views/Views.react.js
index f8626929d6..5029ed6ca8 100644
--- a/src/dashboard/Data/Views/Views.react.js
+++ b/src/dashboard/Data/Views/Views.react.js
@@ -6,9 +6,14 @@ import LoaderContainer from 'components/LoaderContainer/LoaderContainer.react';
 import Parse from 'parse';
 import React from 'react';
 import Notification from 'dashboard/Data/Browser/Notification.react';
-import Icon from 'components/Icon/Icon.react';
+import Pill from 'components/Pill/Pill.react';
 import DragHandle from 'components/DragHandle/DragHandle.react';
 import CreateViewDialog from './CreateViewDialog.react';
+import EditViewDialog from './EditViewDialog.react';
+import DeleteViewDialog from './DeleteViewDialog.react';
+import BrowserMenu from 'components/BrowserMenu/BrowserMenu.react';
+import MenuItem from 'components/BrowserMenu/MenuItem.react';
+import Separator from 'components/BrowserMenu/Separator.react';
 import * as ViewPreferences from 'lib/ViewPreferences';
 import generatePath from 'lib/generatePath';
 import { withRouter } from 'lib/withRouter';
@@ -34,9 +39,13 @@ class Views extends TableView {
       columns: {},
       tableWidth: 0,
       showCreate: false,
+      editView: null,
+      editIndex: null,
+      deleteIndex: null,
       lastError: null,
       lastNote: null,
     };
+    this.headersRef = React.createRef();
     this.noteTimeout = null;
     this.action = new SidebarAction('Create a view', () =>
       this.setState({ showCreate: true })
@@ -49,6 +58,10 @@ class Views extends TableView {
       .then(() => this.loadViews(this.context));
   }
 
+  componentWillUnmount() {
+    clearTimeout(this.noteTimeout);
+  }
+
   componentWillReceiveProps(nextProps, nextContext) {
     if (this.context !== nextContext) {
       this.props.schema
@@ -98,7 +111,22 @@ class Views extends TableView {
       .aggregate(view.query, { useMasterKey: true })
       .then(results => {
         const columns = {};
-        const computeWidth = str => Math.max((String(str).length + 2) * 8, 40);
+        const computeWidth = str => {
+          const text =
+            typeof str === 'object' && str !== null
+              ? JSON.stringify(str)
+              : String(str);
+          if (typeof document !== 'undefined') {
+            const canvas =
+              computeWidth._canvas ||
+              (computeWidth._canvas = document.createElement('canvas'));
+            const context = canvas.getContext('2d');
+            context.font = '12px "Source Code Pro", "Courier New", monospace';
+            const width = context.measureText(text).width + 32;
+            return Math.max(width, 40);
+          }
+          return Math.max((text.length + 2) * 12, 40);
+        };
         results.forEach(item => {
           Object.keys(item).forEach(key => {
             const val = item[key];
@@ -121,7 +149,11 @@ class Views extends TableView {
               }
             }
             if (!columns[key]) {
-              columns[key] = { type, width: computeWidth(key) };
+              columns[key] = { type, width: Math.min(computeWidth(key), 200) };
+            }
+            const width = computeWidth(val);
+            if (width > columns[key].width && columns[key].width < 200) {
+              columns[key].width = Math.min(width, 200);
             }
           });
         });
@@ -154,7 +186,11 @@ class Views extends TableView {
         console.warn('tableData() needs to return an array of objects');
       } else {
         if (data.length === 0) {
-          content = <div className={tableStyles.empty}>{this.renderEmpty()}</div>;
+          content = (
+            <div className={tableStyles.empty} style={{ top: 96 }}>
+              {this.renderEmpty()}
+            </div>
+          );
         } else {
           content = (
             <div className={tableStyles.rows}>
@@ -174,15 +210,29 @@ class Views extends TableView {
     return (
       <div>
         <LoaderContainer loading={loading}>
-          <div className={tableStyles.content}>{content}</div>
+          <div
+            className={tableStyles.content}
+            style={{ overflowX: 'auto', paddingTop: 96 }}
+          >
+            <div style={{ width: this.state.tableWidth }}>
+              <div
+                className={tableStyles.headers}
+                style={{
+                  width: this.state.tableWidth,
+                  right: 'auto',
+                  position: 'sticky',
+                  top: 0,
+                  left: 0,
+                }}
+                ref={this.headersRef}
+              >
+                {headers}
+              </div>
+              {content}
+            </div>
+          </div>
         </LoaderContainer>
         {toolbar}
-        <div
-          className={tableStyles.headers}
-          style={{ width: this.state.tableWidth, right: 'auto' }}
-        >
-          {headers}
-        </div>
         {extras}
       </div>
     );
@@ -191,21 +241,37 @@ class Views extends TableView {
   renderRow(row) {
     return (
       <tr key={JSON.stringify(row)} className={styles.tableRow}>
-        {this.state.order.map(({ name, width }) => {
+        {this.state.order.map(({ name }) => {
           const value = row[name];
-          const type = this.state.columns[name]?.type;
+          let type = 'String';
+          if (typeof value === 'number') {
+            type = 'Number';
+          } else if (typeof value === 'boolean') {
+            type = 'Boolean';
+          } else if (value && typeof value === 'object') {
+            if (value.__type === 'Date') {
+              type = 'Date';
+            } else if (value.__type === 'Pointer') {
+              type = 'Pointer';
+            } else if (value.__type === 'File') {
+              type = 'File';
+            } else if (value.__type === 'GeoPoint') {
+              type = 'GeoPoint';
+            } else {
+              type = 'Object';
+            }
+          }
           let content = '';
           if (type === 'Pointer' && value && value.className && value.objectId) {
             const id = value.objectId;
             const className = value.className;
             content = (
-              <span
-                className={styles.pointerLink}
+              <Pill
+                value={id}
                 onClick={() => this.handlePointerClick({ className, id })}
-              >
-                {id}
-                <Icon name="right-outline" width={12} height={12} fill="#1669a1" />
-              </span>
+                followClick
+                shrinkablePill
+              />
             );
           } else if (type === 'Object') {
             content = JSON.stringify(value);
@@ -244,6 +310,7 @@ class Views extends TableView {
     });
   }
 
+
   renderHeaders() {
     return this.state.order.map(({ name, width }, i) => (
       <div key={name} className={styles.headerWrap} style={{ width }}>
@@ -267,7 +334,9 @@ class Views extends TableView {
     return (
       <CategoryList
         current={current}
+        params={this.props.location?.search}
         linkPrefix={'views/'}
+        classClicked={() => {}}
         categories={categories}
       />
     );
@@ -275,7 +344,44 @@ class Views extends TableView {
 
   renderToolbar() {
     const subsection = this.props.params.name || '';
-    return <Toolbar section="Views" subsection={subsection} />;
+    let editMenu = null;
+    if (this.props.params.name) {
+      editMenu = (
+        <BrowserMenu title="Edit" icon="edit-solid" setCurrent={() => {}}>
+          <MenuItem
+            text="Edit view"
+            onClick={() => {
+              const index = this.state.views.findIndex(
+                v => v.name === this.props.params.name
+              );
+              if (index >= 0) {
+                this.setState({
+                  editView: this.state.views[index],
+                  editIndex: index,
+                });
+              }
+            }}
+          />
+          <Separator />
+          <MenuItem
+            text="Delete view"
+            onClick={() => {
+              const index = this.state.views.findIndex(
+                v => v.name === this.props.params.name
+              );
+              if (index >= 0) {
+                this.setState({ deleteIndex: index });
+              }
+            }}
+          />
+        </BrowserMenu>
+      );
+    }
+    return (
+      <Toolbar section="Views" subsection={subsection}>
+        {editMenu}
+      </Toolbar>
+    );
   }
 
   renderExtras() {
@@ -306,6 +412,64 @@ class Views extends TableView {
           }}
         />
       );
+    } else if (this.state.editView) {
+      let classNames = [];
+      if (this.props.schema?.data) {
+        const classes = this.props.schema.data.get('classes');
+        if (classes) {
+          classNames = Object.keys(classes.toObject());
+        }
+      }
+      extras = (
+        <EditViewDialog
+          classes={classNames}
+          view={this.state.editView}
+          onCancel={() => this.setState({ editView: null, editIndex: null })}
+          onConfirm={view => {
+            this.setState(
+              state => {
+                const newViews = [...state.views];
+                newViews[state.editIndex] = view;
+                return { editView: null, editIndex: null, views: newViews };
+              },
+              () => {
+                ViewPreferences.saveViews(
+                  this.context.applicationId,
+                  this.state.views
+                );
+                this.loadViews(this.context);
+              }
+            );
+          }}
+        />
+      );
+    } else if (this.state.deleteIndex !== null) {
+      const name = this.state.views[this.state.deleteIndex]?.name || '';
+      extras = (
+        <DeleteViewDialog
+          name={name}
+          onCancel={() => this.setState({ deleteIndex: null })}
+          onConfirm={() => {
+            this.setState(
+              state => {
+                const newViews = state.views.filter((_, i) => i !== state.deleteIndex);
+                return { deleteIndex: null, views: newViews };
+              },
+              () => {
+                ViewPreferences.saveViews(
+                  this.context.applicationId,
+                  this.state.views
+                );
+                if (this.props.params.name === name) {
+                  const path = generatePath(this.context, 'views');
+                  this.props.navigate(path);
+                }
+                this.loadViews(this.context);
+              }
+            );
+          }}
+        />
+      );
     }
     let notification = null;
     if (this.state.lastError) {
diff --git a/src/dashboard/Data/Views/Views.scss b/src/dashboard/Data/Views/Views.scss
index 35a2c6d438..028832be21 100644
--- a/src/dashboard/Data/Views/Views.scss
+++ b/src/dashboard/Data/Views/Views.scss
@@ -40,8 +40,8 @@
 }
 
 .cell {
-  line-height: 30px;
-  padding: 10px 16px;
+  line-height: 20px;
+  padding: 5px 16px;
   border-right: 1px solid #e3e3ea;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -49,13 +49,3 @@
   max-width: none;
 }
 
-.pointerLink {
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-
-  svg {
-    margin-left: 4px;
-    transform: rotate(316deg);
-  }
-}

From eef72bd53a5b9fc68f019442cb988a30c6860d97 Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Sat, 12 Jul 2025 03:10:40 +0200
Subject: [PATCH 20/26] fix: Prevent stale pointer navigation (#2890)

---
 .../BrowserMenu/BrowserMenu.react.js          |   5 +-
 src/dashboard/Data/Browser/Browser.react.js   |  31 ++--
 .../Data/Browser/BrowserTable.react.js        |   2 +-
 src/dashboard/Data/Views/Views.react.js       | 158 +++++++++++-------
 4 files changed, 118 insertions(+), 78 deletions(-)

diff --git a/src/components/BrowserMenu/BrowserMenu.react.js b/src/components/BrowserMenu/BrowserMenu.react.js
index 2eb60e50ec..ee5f9c0b41 100644
--- a/src/components/BrowserMenu/BrowserMenu.react.js
+++ b/src/components/BrowserMenu/BrowserMenu.react.js
@@ -83,7 +83,10 @@ export default class BrowserMenu extends React.Component {
 BrowserMenu.propTypes = {
   icon: PropTypes.string.isRequired.describe('The name of the icon to place in the menu.'),
   title: PropTypes.string.isRequired.describe('The title text of the menu.'),
-  children: PropTypes.arrayOf(PropTypes.node).describe(
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).describe(
     'The contents of the menu when open. It should be a set of MenuItem and Separator components.'
   ),
 };
diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
index b60df5be4a..c524607f01 100644
--- a/src/dashboard/Data/Browser/Browser.react.js
+++ b/src/dashboard/Data/Browser/Browser.react.js
@@ -44,8 +44,7 @@ import { withRouter } from 'lib/withRouter';
 import { get } from 'lib/AJAX';
 import BrowserFooter from './BrowserFooter.react';
 
-const SELECTED_ROWS_MESSAGE =
-  'There are selected rows. Are you sure you want to leave this page?';
+const SELECTED_ROWS_MESSAGE = 'There are selected rows. Are you sure you want to leave this page?';
 
 function SelectedRowsNavigationPrompt({ when }) {
   const message = SELECTED_ROWS_MESSAGE;
@@ -119,7 +118,7 @@ function SelectedRowsNavigationPrompt({ when }) {
 }
 
 // The initial and max amount of rows fetched by lazy loading
-const BROWSER_LAST_LOCATION = 'brower_last_location';
+const BROWSER_LAST_LOCATION = 'browser_last_location';
 
 @subscribeTo('Schema', 'schema')
 @withRouter
@@ -386,6 +385,13 @@ class Browser extends DashboardView {
   }
   addLocation(appId) {
     if (window.localStorage) {
+      const currentSearch = this.props.location?.search;
+      if (currentSearch) {
+        const params = new URLSearchParams(currentSearch);
+        if (params.has('filters')) {
+          return;
+        }
+      }
       let pathname = null;
       const newLastLocations = [];
 
@@ -1505,22 +1511,17 @@ class Browser extends DashboardView {
 
             if (error.code === Parse.Error.AGGREGATE_ERROR) {
               if (error.errors.length == 1) {
-                errorDeletingNote =
-                  `Error deleting ${className} with id '${error.errors[0].object.id}'`;
+                errorDeletingNote = `Error deleting ${className} with id '${error.errors[0].object.id}'`;
               } else if (error.errors.length < toDeleteObjectIds.length) {
-                errorDeletingNote =
-                  `Error deleting ${error.errors.length} out of ${toDeleteObjectIds.length} ${className} objects`;
+                errorDeletingNote = `Error deleting ${error.errors.length} out of ${toDeleteObjectIds.length} ${className} objects`;
               } else {
-                errorDeletingNote =
-                  `Error deleting all ${error.errors.length} ${className} objects`;
+                errorDeletingNote = `Error deleting all ${error.errors.length} ${className} objects`;
               }
             } else {
               if (toDeleteObjectIds.length == 1) {
-                errorDeletingNote =
-                  `Error deleting ${className} with id '${toDeleteObjectIds[0]}'`;
+                errorDeletingNote = `Error deleting ${className} with id '${toDeleteObjectIds[0]}'`;
               } else {
-                errorDeletingNote =
-                  `Error deleting ${toDeleteObjectIds.length} ${className} objects`;
+                errorDeletingNote = `Error deleting ${toDeleteObjectIds.length} ${className} objects`;
               }
             }
 
@@ -2526,9 +2527,7 @@ class Browser extends DashboardView {
         <Helmet>
           <title>{pageTitle}</title>
         </Helmet>
-        <SelectedRowsNavigationPrompt
-          when={Object.keys(this.state.selection).length > 0}
-        />
+        <SelectedRowsNavigationPrompt when={Object.keys(this.state.selection).length > 0} />
         {browser}
         {notification}
         {extras}
diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js
index 1d8001816a..378d162ff9 100644
--- a/src/dashboard/Data/Browser/BrowserTable.react.js
+++ b/src/dashboard/Data/Browser/BrowserTable.react.js
@@ -574,7 +574,7 @@ export default class BrowserTable extends React.Component {
         id="browser-table"
         style={{
           right: rightValue,
-          'overflow-x': this.props.isResizing ? 'hidden' : 'auto',
+          overflowX: this.props.isResizing ? 'hidden' : 'auto',
         }}
       >
         <DataBrowserHeaderBar
diff --git a/src/dashboard/Data/Views/Views.react.js b/src/dashboard/Data/Views/Views.react.js
index 5029ed6ca8..36b1c75eec 100644
--- a/src/dashboard/Data/Views/Views.react.js
+++ b/src/dashboard/Data/Views/Views.react.js
@@ -2,6 +2,7 @@ import CategoryList from 'components/CategoryList/CategoryList.react';
 import SidebarAction from 'components/Sidebar/SidebarAction';
 import TableView from 'dashboard/TableView.react';
 import Toolbar from 'components/Toolbar/Toolbar.react';
+import Icon from 'components/Icon/Icon.react';
 import LoaderContainer from 'components/LoaderContainer/LoaderContainer.react';
 import Parse from 'parse';
 import React from 'react';
@@ -14,6 +15,7 @@ import DeleteViewDialog from './DeleteViewDialog.react';
 import BrowserMenu from 'components/BrowserMenu/BrowserMenu.react';
 import MenuItem from 'components/BrowserMenu/MenuItem.react';
 import Separator from 'components/BrowserMenu/Separator.react';
+import EmptyState from 'components/EmptyState/EmptyState.react';
 import * as ViewPreferences from 'lib/ViewPreferences';
 import generatePath from 'lib/generatePath';
 import { withRouter } from 'lib/withRouter';
@@ -21,7 +23,7 @@ import subscribeTo from 'lib/subscribeTo';
 import { ActionTypes as SchemaActionTypes } from 'lib/stores/SchemaStore';
 import styles from './Views.scss';
 import tableStyles from 'dashboard/TableView.scss';
-
+import browserStyles from 'dashboard/Data/Browser/Browser.scss';
 
 export default
 @subscribeTo('Schema', 'schema')
@@ -31,6 +33,7 @@ class Views extends TableView {
     super();
     this.section = 'Core';
     this.subsection = 'Views';
+    this._isMounted = false;
     this.state = {
       views: [],
       counts: {},
@@ -44,31 +47,32 @@ class Views extends TableView {
       deleteIndex: null,
       lastError: null,
       lastNote: null,
+      loading: false,
     };
     this.headersRef = React.createRef();
     this.noteTimeout = null;
-    this.action = new SidebarAction('Create a view', () =>
-      this.setState({ showCreate: true })
-    );
+    this.action = new SidebarAction('Create a view', () => this.setState({ showCreate: true }));
+  }
+
+  componentDidMount() {
+    this._isMounted = true;
   }
 
   componentWillMount() {
-    this.props.schema
-      .dispatch(SchemaActionTypes.FETCH)
-      .then(() => this.loadViews(this.context));
+    this.props.schema.dispatch(SchemaActionTypes.FETCH).then(() => this.loadViews(this.context));
   }
 
   componentWillUnmount() {
+    this._isMounted = false;
     clearTimeout(this.noteTimeout);
   }
 
   componentWillReceiveProps(nextProps, nextContext) {
     if (this.context !== nextContext) {
-      this.props.schema
-        .dispatch(SchemaActionTypes.FETCH)
-        .then(() => this.loadViews(nextContext));
+      this.props.schema.dispatch(SchemaActionTypes.FETCH).then(() => this.loadViews(nextContext));
     }
     if (this.props.params.name !== nextProps.params.name || this.context !== nextContext) {
+      window.scrollTo({ top: 0 });
       this.loadData(nextProps.params.name);
     }
   }
@@ -81,30 +85,40 @@ class Views extends TableView {
           new Parse.Query(view.className)
             .aggregate(view.query, { useMasterKey: true })
             .then(res => {
-              this.setState(({ counts }) => ({
-                counts: { ...counts, [view.name]: res.length },
-              }));
+              if (this._isMounted) {
+                this.setState(({ counts }) => ({
+                  counts: { ...counts, [view.name]: res.length },
+                }));
+              }
             })
             .catch(error => {
-              this.showNote(
-                `Request failed: ${error.message || 'Unknown error occurred'}`,
-                true
-              );
+              if (this._isMounted) {
+                this.showNote(`Request failed: ${error.message || 'Unknown error occurred'}`, true);
+              }
             });
         }
       });
-      this.loadData(this.props.params.name);
+      if (this._isMounted) {
+        this.loadData(this.props.params.name);
+      }
     });
   }
 
   loadData(name) {
+    if (this._isMounted) {
+      this.setState({ loading: true });
+    }
     if (!name) {
-      this.setState({ data: [], order: [], columns: {} });
+      if (this._isMounted) {
+        this.setState({ data: [], order: [], columns: {}, loading: false });
+      }
       return;
     }
     const view = (this.state.views || []).find(v => v.name === name);
     if (!view) {
-      this.setState({ data: [], order: [], columns: {} });
+      if (this._isMounted) {
+        this.setState({ data: [], order: [], columns: {}, loading: false });
+      }
       return;
     }
     new Parse.Query(view.className)
@@ -112,14 +126,10 @@ class Views extends TableView {
       .then(results => {
         const columns = {};
         const computeWidth = str => {
-          const text =
-            typeof str === 'object' && str !== null
-              ? JSON.stringify(str)
-              : String(str);
+          const text = typeof str === 'object' && str !== null ? JSON.stringify(str) : String(str);
           if (typeof document !== 'undefined') {
             const canvas =
-              computeWidth._canvas ||
-              (computeWidth._canvas = document.createElement('canvas'));
+              computeWidth._canvas || (computeWidth._canvas = document.createElement('canvas'));
             const context = canvas.getContext('2d');
             context.font = '12px "Source Code Pro", "Courier New", monospace';
             const width = context.measureText(text).width + 32;
@@ -160,17 +170,22 @@ class Views extends TableView {
         const colNames = Object.keys(columns);
         const order = colNames.map(name => ({ name, width: columns[name].width }));
         const tableWidth = order.reduce((sum, col) => sum + col.width, 0);
-        this.setState({ data: results, order, columns, tableWidth });
+        if (this._isMounted) {
+          this.setState({ data: results, order, columns, tableWidth, loading: false });
+        }
       })
       .catch(error => {
-        this.showNote(
-          `Request failed: ${error.message || 'Unknown error occurred'}`,
-          true
-        );
-        this.setState({ data: [], order: [], columns: {} });
+        if (this._isMounted) {
+          this.showNote(`Request failed: ${error.message || 'Unknown error occurred'}`, true);
+          this.setState({ data: [], order: [], columns: {}, loading: false });
+        }
       });
   }
 
+  onRefresh() {
+    this.loadData(this.props.params.name);
+  }
+
   tableData() {
     return this.state.data;
   }
@@ -209,11 +224,8 @@ class Views extends TableView {
     const loading = this.state ? this.state.loading : false;
     return (
       <div>
-        <LoaderContainer loading={loading}>
-          <div
-            className={tableStyles.content}
-            style={{ overflowX: 'auto', paddingTop: 96 }}
-          >
+        <LoaderContainer loading={loading} solid={false}>
+          <div className={tableStyles.content} style={{ overflowX: 'auto', paddingTop: 96 }}>
             <div style={{ width: this.state.tableWidth }}>
               <div
                 className={tableStyles.headers}
@@ -310,7 +322,6 @@ class Views extends TableView {
     });
   }
 
-
   renderHeaders() {
     return this.state.order.map(({ name, width }, i) => (
       <div key={name} className={styles.headerWrap} style={{ width }}>
@@ -321,6 +332,34 @@ class Views extends TableView {
   }
 
   renderEmpty() {
+    if (!this.props.params.name) {
+      if (this.state.views.length > 0) {
+        return (
+          <EmptyState icon="visibility" title="Views" description="Select a view to load the data." />
+        );
+      }
+      return (
+        <EmptyState
+          icon="visibility"
+          title="Views"
+          description={
+            <span>
+              Use views to display aggregated data from your classes.{' '}
+              <a
+                href="https://docs.parseplatform.org/dashboard/guide/#views"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Learn more
+              </a>
+              .
+            </span>
+          }
+          cta="Create a view"
+          action={() => this.setState({ showCreate: true })}
+        />
+      );
+    }
     return <div>No data available</div>;
   }
 
@@ -336,7 +375,9 @@ class Views extends TableView {
         current={current}
         params={this.props.location?.search}
         linkPrefix={'views/'}
-        classClicked={() => {}}
+        classClicked={() => {
+          window.scrollTo({ top: 0 });
+        }}
         categories={categories}
       />
     );
@@ -345,15 +386,14 @@ class Views extends TableView {
   renderToolbar() {
     const subsection = this.props.params.name || '';
     let editMenu = null;
+    let refreshButton = null;
     if (this.props.params.name) {
       editMenu = (
         <BrowserMenu title="Edit" icon="edit-solid" setCurrent={() => {}}>
           <MenuItem
             text="Edit view"
             onClick={() => {
-              const index = this.state.views.findIndex(
-                v => v.name === this.props.params.name
-              );
+              const index = this.state.views.findIndex(v => v.name === this.props.params.name);
               if (index >= 0) {
                 this.setState({
                   editView: this.state.views[index],
@@ -366,9 +406,7 @@ class Views extends TableView {
           <MenuItem
             text="Delete view"
             onClick={() => {
-              const index = this.state.views.findIndex(
-                v => v.name === this.props.params.name
-              );
+              const index = this.state.views.findIndex(v => v.name === this.props.params.name);
               if (index >= 0) {
                 this.setState({ deleteIndex: index });
               }
@@ -376,9 +414,20 @@ class Views extends TableView {
           />
         </BrowserMenu>
       );
+      refreshButton = (
+        <>
+          <a className={browserStyles.toolbarButton} onClick={this.onRefresh.bind(this)}>
+            <Icon name="refresh-solid" width={14} height={14} />
+            <span>Refresh</span>
+          </a>
+          <div className={browserStyles.toolbarSeparator} />
+        </>
+      );
     }
+
     return (
       <Toolbar section="Views" subsection={subsection}>
+        {refreshButton}
         {editMenu}
       </Toolbar>
     );
@@ -402,10 +451,7 @@ class Views extends TableView {
             this.setState(
               state => ({ showCreate: false, views: [...state.views, view] }),
               () => {
-                ViewPreferences.saveViews(
-                  this.context.applicationId,
-                  this.state.views
-                );
+                ViewPreferences.saveViews(this.context.applicationId, this.state.views);
                 this.loadViews(this.context);
               }
             );
@@ -433,10 +479,7 @@ class Views extends TableView {
                 return { editView: null, editIndex: null, views: newViews };
               },
               () => {
-                ViewPreferences.saveViews(
-                  this.context.applicationId,
-                  this.state.views
-                );
+                ViewPreferences.saveViews(this.context.applicationId, this.state.views);
                 this.loadViews(this.context);
               }
             );
@@ -456,10 +499,7 @@ class Views extends TableView {
                 return { deleteIndex: null, views: newViews };
               },
               () => {
-                ViewPreferences.saveViews(
-                  this.context.applicationId,
-                  this.state.views
-                );
+                ViewPreferences.saveViews(this.context.applicationId, this.state.views);
                 if (this.props.params.name === name) {
                   const path = generatePath(this.context, 'views');
                   this.props.navigate(path);
@@ -486,9 +526,7 @@ class Views extends TableView {
   }
 
   handlePointerClick({ className, id, field = 'objectId' }) {
-    const filters = JSON.stringify([
-      { field, constraint: 'eq', compareTo: id },
-    ]);
+    const filters = JSON.stringify([{ field, constraint: 'eq', compareTo: id }]);
     const path = generatePath(
       this.context,
       `browser/${className}?filters=${encodeURIComponent(filters)}`

From 146ec5debee2a7aa0291e5dce9ccf4cd2b5b7e8d Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Sat, 12 Jul 2025 03:50:23 +0200
Subject: [PATCH 21/26] fix: Handle invalid pointers in Views results (#2891)

---
 .../Data/Views/ViewValueDialog.react.js       | 26 ++++++++++++++
 src/dashboard/Data/Views/Views.react.js       | 35 ++++++++++++++++---
 2 files changed, 57 insertions(+), 4 deletions(-)
 create mode 100644 src/dashboard/Data/Views/ViewValueDialog.react.js

diff --git a/src/dashboard/Data/Views/ViewValueDialog.react.js b/src/dashboard/Data/Views/ViewValueDialog.react.js
new file mode 100644
index 0000000000..86ffa3ef61
--- /dev/null
+++ b/src/dashboard/Data/Views/ViewValueDialog.react.js
@@ -0,0 +1,26 @@
+import Field from 'components/Field/Field.react';
+import Label from 'components/Label/Label.react';
+import Modal from 'components/Modal/Modal.react';
+import React from 'react';
+import TextInput from 'components/TextInput/TextInput.react';
+
+export default function ViewValueDialog({ value, onClose }) {
+  let stringValue;
+  if (typeof value === 'object' && value !== null) {
+    stringValue = JSON.stringify(value, null, 2);
+  } else {
+    stringValue = String(value);
+  }
+  return (
+    <Modal
+      type={Modal.Types.INFO}
+      icon="visibility"
+      title="Value"
+      confirmText="Close"
+      showCancel={false}
+      onConfirm={onClose}
+    >
+      <Field label={<Label text="Value" />} input={<TextInput value={stringValue} multiline monospace disabled />} />
+    </Modal>
+  );
+}
diff --git a/src/dashboard/Data/Views/Views.react.js b/src/dashboard/Data/Views/Views.react.js
index 36b1c75eec..e267a2dbe5 100644
--- a/src/dashboard/Data/Views/Views.react.js
+++ b/src/dashboard/Data/Views/Views.react.js
@@ -12,6 +12,7 @@ import DragHandle from 'components/DragHandle/DragHandle.react';
 import CreateViewDialog from './CreateViewDialog.react';
 import EditViewDialog from './EditViewDialog.react';
 import DeleteViewDialog from './DeleteViewDialog.react';
+import ViewValueDialog from './ViewValueDialog.react';
 import BrowserMenu from 'components/BrowserMenu/BrowserMenu.react';
 import MenuItem from 'components/BrowserMenu/MenuItem.react';
 import Separator from 'components/BrowserMenu/Separator.react';
@@ -48,6 +49,7 @@ class Views extends TableView {
       lastError: null,
       lastNote: null,
       loading: false,
+      viewValue: null,
     };
     this.headersRef = React.createRef();
     this.noteTimeout = null;
@@ -149,7 +151,11 @@ class Views extends TableView {
               if (val.__type === 'Date') {
                 type = 'Date';
               } else if (val.__type === 'Pointer') {
-                type = 'Pointer';
+                if (val.className && val.objectId) {
+                  type = 'Pointer';
+                } else {
+                  type = 'Object';
+                }
               } else if (val.__type === 'File') {
                 type = 'File';
               } else if (val.__type === 'GeoPoint') {
@@ -264,7 +270,11 @@ class Views extends TableView {
             if (value.__type === 'Date') {
               type = 'Date';
             } else if (value.__type === 'Pointer') {
-              type = 'Pointer';
+              if (value.className && value.objectId) {
+                type = 'Pointer';
+              } else {
+                type = 'Object';
+              }
             } else if (value.__type === 'File') {
               type = 'File';
             } else if (value.__type === 'GeoPoint') {
@@ -290,8 +300,14 @@ class Views extends TableView {
           } else {
             content = String(value);
           }
+          const isViewable = ['String', 'Number', 'Object'].includes(type);
+          const cellProps = {};
+          if (isViewable) {
+            cellProps.onClick = () => this.handleValueClick(value);
+            cellProps.style = { cursor: 'pointer' };
+          }
           return (
-            <td key={name} className={styles.cell}>
+            <td key={name} className={styles.cell} {...cellProps}>
               {content}
             </td>
           );
@@ -435,7 +451,14 @@ class Views extends TableView {
 
   renderExtras() {
     let extras = null;
-    if (this.state.showCreate) {
+    if (this.state.viewValue !== null) {
+      extras = (
+        <ViewValueDialog
+          value={this.state.viewValue}
+          onClose={() => this.setState({ viewValue: null })}
+        />
+      );
+    } else if (this.state.showCreate) {
       let classNames = [];
       if (this.props.schema?.data) {
         const classes = this.props.schema.data.get('classes');
@@ -534,6 +557,10 @@ class Views extends TableView {
     this.props.navigate(path);
   }
 
+  handleValueClick(value) {
+    this.setState({ viewValue: value });
+  }
+
   showNote(message, isError) {
     if (!message) {
       return;

From 5b96beaa4311f2bc05cb4072f480520362fc6bda Mon Sep 17 00:00:00 2001
From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com>
Date: Sat, 12 Jul 2025 10:32:37 +0200
Subject: [PATCH 22/26] Update TableView.scss

---
 src/dashboard/TableView.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/dashboard/TableView.scss b/src/dashboard/TableView.scss
index 5027e6a89f..08c24d98ca 100644
--- a/src/dashboard/TableView.scss
+++ b/src/dashboard/TableView.scss
@@ -54,8 +54,8 @@ body:global(.expanded) {
   }
 
   td {
-    line-height: 30px;
-    padding: 10px 16px;
+    line-height: normal;
+    padding: 8px 16px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;

From f9514dd90ed5e38331f52a5378b5b38c3647e5aa Mon Sep 17 00:00:00 2001
From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com>
Date: Sat, 12 Jul 2025 11:45:55 +0200
Subject: [PATCH 23/26] Cell height fix

---
 src/dashboard/Data/Config/Config.scss | 4 ++--
 src/dashboard/TableView.scss          | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/dashboard/Data/Config/Config.scss b/src/dashboard/Data/Config/Config.scss
index ce22903024..32ae6d0615 100644
--- a/src/dashboard/Data/Config/Config.scss
+++ b/src/dashboard/Data/Config/Config.scss
@@ -5,8 +5,8 @@
   align-items: center;
   justify-content: center;
   vertical-align: middle;
-  width: 25px;
-  height: 25px;
+  width: 20px;
+  height: 20px;
   cursor: pointer;
   svg {
     fill: currentColor;
diff --git a/src/dashboard/TableView.scss b/src/dashboard/TableView.scss
index 08c24d98ca..6ed24afc12 100644
--- a/src/dashboard/TableView.scss
+++ b/src/dashboard/TableView.scss
@@ -54,7 +54,7 @@ body:global(.expanded) {
   }
 
   td {
-    line-height: normal;
+    line-height: 20px;
     padding: 8px 16px;
     overflow: hidden;
     text-overflow: ellipsis;

From dc366308399ffea4e052b3f400b01e3c93afce1d Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Sat, 12 Jul 2025 13:04:32 +0200
Subject: [PATCH 24/26] fix: Center pill in Views table cells (#2895)

---
 .../Data/Views/ViewValueDialog.react.js       | 13 ++++++++++-
 src/dashboard/Data/Views/Views.react.js       | 23 ++++++++++++++-----
 src/dashboard/Data/Views/Views.scss           |  8 +++++++
 3 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/dashboard/Data/Views/ViewValueDialog.react.js b/src/dashboard/Data/Views/ViewValueDialog.react.js
index 86ffa3ef61..31c7c6794b 100644
--- a/src/dashboard/Data/Views/ViewValueDialog.react.js
+++ b/src/dashboard/Data/Views/ViewValueDialog.react.js
@@ -20,7 +20,18 @@ export default function ViewValueDialog({ value, onClose }) {
       showCancel={false}
       onConfirm={onClose}
     >
-      <Field label={<Label text="Value" />} input={<TextInput value={stringValue} multiline monospace disabled />} />
+      <Field
+        label={<Label text="Value" />}
+        input={
+          <TextInput
+            value={stringValue}
+            multiline
+            monospace
+            disabled
+            onChange={() => {}}
+          />
+        }
+      />
     </Modal>
   );
 }
diff --git a/src/dashboard/Data/Views/Views.react.js b/src/dashboard/Data/Views/Views.react.js
index e267a2dbe5..3ee6f5a332 100644
--- a/src/dashboard/Data/Views/Views.react.js
+++ b/src/dashboard/Data/Views/Views.react.js
@@ -284,7 +284,8 @@ class Views extends TableView {
             }
           }
           let content = '';
-          if (type === 'Pointer' && value && value.className && value.objectId) {
+          const hasPill = type === 'Pointer' && value && value.className && value.objectId;
+          if (hasPill) {
             const id = value.objectId;
             const className = value.className;
             content = (
@@ -301,14 +302,24 @@ class Views extends TableView {
             content = String(value);
           }
           const isViewable = ['String', 'Number', 'Object'].includes(type);
-          const cellProps = {};
+          const classes = [styles.cell];
+          if (hasPill) {
+            classes.push(styles.pillCell);
+          }
+          let cellContent = content;
           if (isViewable) {
-            cellProps.onClick = () => this.handleValueClick(value);
-            cellProps.style = { cursor: 'pointer' };
+            cellContent = (
+              <span
+                className={styles.clickableText}
+                onClick={() => this.handleValueClick(value)}
+              >
+                {content}
+              </span>
+            );
           }
           return (
-            <td key={name} className={styles.cell} {...cellProps}>
-              {content}
+            <td key={name} className={classes.join(' ')}>
+              {cellContent}
             </td>
           );
         })}
diff --git a/src/dashboard/Data/Views/Views.scss b/src/dashboard/Data/Views/Views.scss
index 028832be21..03c6794437 100644
--- a/src/dashboard/Data/Views/Views.scss
+++ b/src/dashboard/Data/Views/Views.scss
@@ -49,3 +49,11 @@
   max-width: none;
 }
 
+.tableRow td.pillCell {
+  line-height: 8px;
+}
+
+.clickableText {
+  cursor: pointer;
+}
+

From d74b4f8ddb206439b1b61740714fe7eef79ec2ae Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Sat, 12 Jul 2025 13:16:32 +0200
Subject: [PATCH 25/26] docs: Add Views feature (#2896)

---
 README.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/README.md b/README.md
index 37667813be..0d4381b291 100644
--- a/README.md
+++ b/README.md
@@ -75,6 +75,7 @@ Parse Dashboard is a standalone dashboard for managing your [Parse Server](https
   - [Change Pointer Key](#change-pointer-key)
     - [Limitations](#limitations)
   - [CSV Export](#csv-export)
+  - [Views](#views)
 - [Contributing](#contributing)
 
 # Getting Started
@@ -1189,6 +1190,12 @@ This feature allows you to change how a pointer is represented in the browser. B
 This feature will take either selected rows or all rows of an individual class and saves them to a CSV file, which is then downloaded. CSV headers are added to the top of the file matching the column names.
 
 > ⚠️ There is currently a 10,000 row limit when exporting all data. If more than 10,000 rows are present in the class, the CSV file will only contain 10,000 rows.
+## Views
+
+▶️ *Core > Views*
+
+Views are saved queries that display aggregated data from your classes. Create a view by providing a name, selecting a class and defining an aggregation pipeline. Optionally enable the object counter to show how many items match the view. Saved views appear in the sidebar, where you can select, edit, or delete them.
+
 
 # Contributing
 

From d657be13c7abb084dc30fb6cb4464343e4c09463 Mon Sep 17 00:00:00 2001
From: Manuel <5673677+mtrezza@users.noreply.github.com>
Date: Sun, 13 Jul 2025 03:07:56 +0200
Subject: [PATCH 26/26] fix: Display ISO string for date objects in views
 (#2897)

---
 src/dashboard/Data/Views/Views.react.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/dashboard/Data/Views/Views.react.js b/src/dashboard/Data/Views/Views.react.js
index 3ee6f5a332..9aa2e1cdfa 100644
--- a/src/dashboard/Data/Views/Views.react.js
+++ b/src/dashboard/Data/Views/Views.react.js
@@ -128,7 +128,13 @@ class Views extends TableView {
       .then(results => {
         const columns = {};
         const computeWidth = str => {
-          const text = typeof str === 'object' && str !== null ? JSON.stringify(str) : String(str);
+          let text = str;
+          if (text === undefined) {
+            text = '';
+          } else if (text && typeof text === 'object') {
+            text = text.__type === 'Date' && text.iso ? text.iso : JSON.stringify(text);
+          }
+          text = String(text);
           if (typeof document !== 'undefined') {
             const canvas =
               computeWidth._canvas || (computeWidth._canvas = document.createElement('canvas'));
@@ -298,6 +304,10 @@ class Views extends TableView {
             );
           } else if (type === 'Object') {
             content = JSON.stringify(value);
+          } else if (type === 'Date') {
+            content = value && value.iso ? value.iso : String(value);
+          } else if (value === undefined) {
+            content = '';
           } else {
             content = String(value);
           }