From 3eb7c9b1d4173846f64d41d7ea636fe3014acb0c Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Fri, 24 Apr 2026 00:35:57 +0100
Subject: [PATCH] feat(base): render formula cells with error badge support

---
 .../base/components/cells/cell-formula.tsx    | 38 +++++++++++++++++++
 .../base/components/grid/grid-cell.tsx        |  2 +
 2 files changed, 40 insertions(+)
 create mode 100644 apps/client/src/features/base/components/cells/cell-formula.tsx

diff --git a/apps/client/src/features/base/components/cells/cell-formula.tsx b/apps/client/src/features/base/components/cells/cell-formula.tsx
new file mode 100644
index 000000000..507348ea6
--- /dev/null
+++ b/apps/client/src/features/base/components/cells/cell-formula.tsx
@@ -0,0 +1,38 @@
+import { Badge, Tooltip } from "@mantine/core";
+import {
+  IBaseProperty,
+  isFormulaErrorCell,
+} from "@/features/base/types/base.types";
+import { CellText } from "./cell-text";
+import { CellNumber } from "./cell-number";
+import { CellCheckbox } from "./cell-checkbox";
+import { CellDate } from "./cell-date";
+
+type Props = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellFormula(props: Props) {
+  const { value, property } = props;
+  if (isFormulaErrorCell(value)) {
+    return (
+      <Tooltip label={`${value.__err}: ${value.msg}`}>
+        <Badge color="red" variant="light" size="sm">
+          #ERROR
+        </Badge>
+      </Tooltip>
+    );
+  }
+  const opts = (property.typeOptions ?? {}) as { resultType?: string };
+  const resultType = opts.resultType ?? "null";
+  const readOnlyProps = { ...props, isEditing: false };
+  if (resultType === "number") return <CellNumber {...readOnlyProps} />;
+  if (resultType === "boolean") return <CellCheckbox {...readOnlyProps} />;
+  if (resultType === "date") return <CellDate {...readOnlyProps} />;
+  return <CellText {...readOnlyProps} />;
+}
diff --git a/apps/client/src/features/base/components/grid/grid-cell.tsx b/apps/client/src/features/base/components/grid/grid-cell.tsx
index 8079441e0..c4f35bdba 100644
--- a/apps/client/src/features/base/components/grid/grid-cell.tsx
+++ b/apps/client/src/features/base/components/grid/grid-cell.tsx
@@ -19,6 +19,7 @@ import { CellPage } from "@/features/base/components/cells/cell-page";
 import { CellCreatedAt } from "@/features/base/components/cells/cell-created-at";
 import { CellLastEditedAt } from "@/features/base/components/cells/cell-last-edited-at";
 import { CellLastEditedBy } from "@/features/base/components/cells/cell-last-edited-by";
+import { CellFormula } from "@/features/base/components/cells/cell-formula";
 import { RowNumberCell } from "./row-number-cell";
 import classes from "@/features/base/styles/grid.module.css";
 
@@ -50,6 +51,7 @@ const cellComponents: Record<
   createdAt: CellCreatedAt,
   lastEditedAt: CellLastEditedAt,
   lastEditedBy: CellLastEditedBy,
+  formula: CellFormula,
 };
 
 type RowDragProps = {