From 803b35de9776d2ca040d767d85f25dd73b3d8272 Mon Sep 17 00:00:00 2001
From: nichenqin <nichenqin@hotmail.com>
Date: Tue, 22 Oct 2024 14:57:35 +0800
Subject: [PATCH 01/10] chore: some ui updates

---
 .../components/blocks/base/base-detail.svelte | 22 +++++++++++--------
 .../dashboards/[dashboardId]/+layout.ts       |  2 +-
 .../dashboards/[dashboardId]/+page.svelte     |  4 ++--
 .../(authed)/(space)/t/[tableId]/+layout.ts   |  2 +-
 4 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/apps/frontend/src/lib/components/blocks/base/base-detail.svelte b/apps/frontend/src/lib/components/blocks/base/base-detail.svelte
index c7cf8ee4e..f83d8a6a5 100644
--- a/apps/frontend/src/lib/components/blocks/base/base-detail.svelte
+++ b/apps/frontend/src/lib/components/blocks/base/base-detail.svelte
@@ -39,25 +39,25 @@
     {#if $hasPermission("table:create")}
       <button
         type="button"
-        class="flex h-32 w-80 flex-col justify-between rounded-lg border bg-gray-100 px-4 py-7 text-left transition-all hover:bg-gray-200/50 hover:shadow-lg"
+        class="flex h-32 w-80 flex-col justify-between rounded-lg border bg-neutral-50 px-4 py-7 text-left transition-all hover:bg-neutral-100/70 hover:shadow-md"
         on:click={() => {
           baseId.set(base.id)
           openModal(CREATE_TABLE_MODAL)
         }}
       >
-        <PlusCircleIcon class="text-muted-foreground" />
+        <PlusCircleIcon class="text-blue-600" />
 
         Create New Table
       </button>
       <button
         type="button"
-        class="flex h-32 w-80 flex-col justify-between rounded-lg border bg-gray-100 px-4 py-7 text-left transition-all hover:bg-gray-200/50 hover:shadow-lg"
+        class="flex h-32 w-80 flex-col justify-between rounded-lg border bg-neutral-50 px-4 py-7 text-left transition-all hover:bg-neutral-100/70 hover:shadow-md"
         on:click={() => {
           baseId.set(base.id)
           openModal(IMPORT_TABLE_MODAL)
         }}
       >
-        <ImportIcon class="text-muted-foreground" />
+        <ImportIcon class="text-orange-600" />
 
         Import Table
       </button>
@@ -65,9 +65,13 @@
     {#if $hasPermission("dashboard:create")}
       <button
         type="button"
-        class="flex h-32 w-80 flex-col justify-between rounded-lg border bg-gray-100 px-4 py-7 text-left transition-all hover:bg-gray-200/50 hover:shadow-lg"
+        class="flex h-32 w-80 flex-col justify-between rounded-lg border bg-neutral-50 px-4 py-7 text-left transition-all hover:bg-neutral-100/70 hover:shadow-md"
+        on:click={() => {
+          baseId.set(base.id)
+          openModal(CREATE_DASHBOARD_MODAL)
+        }}
       >
-        <LayoutDashboardIcon class="text-muted-foreground" />
+        <LayoutDashboardIcon class="text-green-600" />
 
         Create New Dashboard
       </button>
@@ -76,14 +80,14 @@
 
   <section class="flex flex-1 flex-col overflow-hidden pt-3">
     {#if base.dashboards.length > 0}
-      <h3 class="mt-2 text-2xl font-semibold tracking-tight">Dashboards</h3>
+      <h3 class="mt-2 text-xl font-semibold tracking-tight">Dashboards</h3>
 
       <div class="mt-4 flex flex-wrap gap-2 overflow-y-auto">
         {#each base.dashboards as dashboard}
           {#if dashboard}
             <a
               href={`/dashboards/${dashboard.id}`}
-              class="text-card-foreground h-[100px] w-[300px] overflow-hidden rounded-md border px-4 py-2"
+              class="text-card-foreground h-[100px] w-[300px] overflow-hidden rounded-md border px-4 py-2 transition-all hover:shadow-md"
             >
               <span class="inline-flex items-center font-semibold">
                 <GaugeIcon class="mr-2 h-4 w-4" />
@@ -98,7 +102,7 @@
       </div>
     {/if}
 
-    <h3 class="mt-2 text-2xl font-semibold tracking-tight">Tables</h3>
+    <h3 class="mt-2 text-xl font-semibold tracking-tight">Tables</h3>
 
     <Table.Root class="flex w-full flex-1 flex-col overflow-y-auto">
       <Table.Header class="flex w-full">
diff --git a/apps/frontend/src/routes/(authed)/(space)/dashboards/[dashboardId]/+layout.ts b/apps/frontend/src/routes/(authed)/(space)/dashboards/[dashboardId]/+layout.ts
index 7c1d7efb2..50945c116 100644
--- a/apps/frontend/src/routes/(authed)/(space)/dashboards/[dashboardId]/+layout.ts
+++ b/apps/frontend/src/routes/(authed)/(space)/dashboards/[dashboardId]/+layout.ts
@@ -7,7 +7,7 @@ export const prerender = "auto"
 export const load: LayoutLoad = async (event) => {
   const { dashboardId } = event.params
 
-  event.depends(`dashboard:${dashboardId}`)
+  event.depends(`undb:dashboard:${dashboardId}`)
 
   const store = new GetDashboardQueryStore()
 
diff --git a/apps/frontend/src/routes/(authed)/(space)/dashboards/[dashboardId]/+page.svelte b/apps/frontend/src/routes/(authed)/(space)/dashboards/[dashboardId]/+page.svelte
index c4a0a4e9d..c048eb76c 100644
--- a/apps/frontend/src/routes/(authed)/(space)/dashboards/[dashboardId]/+page.svelte
+++ b/apps/frontend/src/routes/(authed)/(space)/dashboards/[dashboardId]/+page.svelte
@@ -132,8 +132,8 @@
       <ShareButton
         type="dashboard"
         id={$dashboard.id.value}
-        onSuccess={() => {
-          invalidate(`undb:dashboard:${$dashboard.id.value}`)
+        onSuccess={async () => {
+          await invalidate(`undb:dashboard:${$dashboard.id.value}`)
         }}
       />
 
diff --git a/apps/frontend/src/routes/(authed)/(space)/t/[tableId]/+layout.ts b/apps/frontend/src/routes/(authed)/(space)/t/[tableId]/+layout.ts
index d4f5eab89..03a74842d 100644
--- a/apps/frontend/src/routes/(authed)/(space)/t/[tableId]/+layout.ts
+++ b/apps/frontend/src/routes/(authed)/(space)/t/[tableId]/+layout.ts
@@ -7,7 +7,7 @@ export const prerender = "auto"
 export const load: LayoutLoad = async (event) => {
   const { tableId } = event.params
 
-  event.depends(`table:${tableId}`)
+  event.depends(`undb:table:${tableId}`)
 
   const store = new GetTableQueryStore()
 

From 9af652eab1f63f84f21a67ffa711ea30104a5fc3 Mon Sep 17 00:00:00 2001
From: nichenqin <nichenqin@hotmail.com>
Date: Wed, 23 Oct 2024 12:25:12 +0800
Subject: [PATCH 02/10] chore: try to add cdn

---
 Dockerfile                     | 3 +++
 apps/frontend/svelte.config.js | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/Dockerfile b/Dockerfile
index 340e78f45..f35d25f82 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,5 +1,8 @@
 FROM node:22 as builder
 
+ARG CDN_URL
+ENV PUBLIC_CDN_URL=$CDN_URL
+
 WORKDIR /usr/src/app
 
 RUN npm i -g bun
diff --git a/apps/frontend/svelte.config.js b/apps/frontend/svelte.config.js
index d236ed9ea..1a379510c 100644
--- a/apps/frontend/svelte.config.js
+++ b/apps/frontend/svelte.config.js
@@ -12,6 +12,9 @@ const config = {
       pages: "dist",
       fallback: "index.html",
     }),
+    paths: {
+      assets: import.meta.env.PUBLIC_CDN_URL || "",
+    },
     env: {
       publicPrefix: "UNDB_PUBLIC_",
     },

From 5e7974b7af9742df8bca755649b55a7ad0569751 Mon Sep 17 00:00:00 2001
From: nichenqin <nichenqin@hotmail.com>
Date: Wed, 23 Oct 2024 12:42:24 +0800
Subject: [PATCH 03/10] chore: try to add cdn

---
 apps/frontend/svelte.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/svelte.config.js b/apps/frontend/svelte.config.js
index 1a379510c..26cf22c0b 100644
--- a/apps/frontend/svelte.config.js
+++ b/apps/frontend/svelte.config.js
@@ -13,7 +13,7 @@ const config = {
       fallback: "index.html",
     }),
     paths: {
-      assets: import.meta.env.PUBLIC_CDN_URL || "",
+      assets: process.env.env.PUBLIC_CDN_URL || "",
     },
     env: {
       publicPrefix: "UNDB_PUBLIC_",

From ac11194fc5a206f906a4a7ba86d4ec2f551db14f Mon Sep 17 00:00:00 2001
From: nichenqin <nichenqin@hotmail.com>
Date: Wed, 23 Oct 2024 12:51:23 +0800
Subject: [PATCH 04/10] chore: try to add cdn

---
 apps/frontend/svelte.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/svelte.config.js b/apps/frontend/svelte.config.js
index 26cf22c0b..ebe200df0 100644
--- a/apps/frontend/svelte.config.js
+++ b/apps/frontend/svelte.config.js
@@ -13,7 +13,7 @@ const config = {
       fallback: "index.html",
     }),
     paths: {
-      assets: process.env.env.PUBLIC_CDN_URL || "",
+      assets: process.env.PUBLIC_CDN_URL || "",
     },
     env: {
       publicPrefix: "UNDB_PUBLIC_",

From 24de5e22cb240ec83b3c885bc6deaca8a49570d3 Mon Sep 17 00:00:00 2001
From: nichenqin <nichenqin@hotmail.com>
Date: Wed, 23 Oct 2024 13:18:49 +0800
Subject: [PATCH 05/10] chore: try to add cdn

---
 apps/backend/src/modules/web/web.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/apps/backend/src/modules/web/web.tsx b/apps/backend/src/modules/web/web.tsx
index 73cc2386e..2ad1e3e80 100644
--- a/apps/backend/src/modules/web/web.tsx
+++ b/apps/backend/src/modules/web/web.tsx
@@ -6,7 +6,16 @@ import Elysia from "elysia"
 @singleton()
 export class Web {
   route() {
-    const index = Bun.file("dist/index.html")
+    const cdnUrl = process.env.PUBLIC_CDN_URL
+    const getAsset = (path: string) => {
+      if (cdnUrl) {
+        return `${cdnUrl}${path}`
+      }
+      return Bun.file(`dist${path}`)
+    }
+
+    const index = getAsset("/index.html")
+
     return new Elysia()
       .use(staticPlugin({ prefix: "/", assets: "dist" }))
       .use(staticPlugin({ prefix: "/assets", assets: "assets" }))

From e31fbe638ca61188d942ecfbd69062cfe91abe73 Mon Sep 17 00:00:00 2001
From: nichenqin <nichenqin@hotmail.com>
Date: Wed, 23 Oct 2024 15:36:14 +0800
Subject: [PATCH 06/10] chore: try to add cdn

---
 apps/backend/src/modules/web/web.tsx | 37 ++++++++++++++--------------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/apps/backend/src/modules/web/web.tsx b/apps/backend/src/modules/web/web.tsx
index 2ad1e3e80..362255293 100644
--- a/apps/backend/src/modules/web/web.tsx
+++ b/apps/backend/src/modules/web/web.tsx
@@ -7,36 +7,37 @@ import Elysia from "elysia"
 export class Web {
   route() {
     const cdnUrl = process.env.PUBLIC_CDN_URL
-    const getAsset = (path: string) => {
+    const getAsset = async (path: string) => {
       if (cdnUrl) {
-        return `${cdnUrl}${path}`
+        const response = await fetch(`${cdnUrl}${path}`)
+        return response.text()
       }
-      return Bun.file(`dist${path}`)
+      return Bun.file(`dist${path}`).text()
     }
 
-    const index = getAsset("/index.html")
+    const getIndex = () => getAsset("/index.html")
 
     return new Elysia()
       .use(staticPlugin({ prefix: "/", assets: "dist" }))
       .use(staticPlugin({ prefix: "/assets", assets: "assets" }))
-      .get("/", () => index)
-      .get("/t/*", () => index)
-      .get("/dashboards/*", () => index)
-      .get("/s/*", () => index)
-      .get("/bases/*", () => index)
-      .get("/account/*", () => index)
-      .get("/settings", () => index)
-      .get("/login", () => index)
-      .get("/signup", (ctx) => {
+      .get("/", () => getIndex())
+      .get("/t/*", () => getIndex())
+      .get("/dashboards/*", () => getIndex())
+      .get("/s/*", () => getIndex())
+      .get("/bases/*", () => getIndex())
+      .get("/account/*", () => getIndex())
+      .get("/settings", () => getIndex())
+      .get("/login", () => getIndex())
+      .get("/signup", async (ctx) => {
         if (env.UNDB_DISABLE_REGISTRATION) {
           ctx.redirect("/login", 302)
           return
         }
-        return index
+        return getIndex()
       })
-      .get("/verify-email", () => index)
-      .get("/reset-password/*", () => index)
-      .get("/create-from-share/*", () => index)
-      .get("/templates/*", () => index)
+      .get("/verify-email", () => getIndex())
+      .get("/reset-password/*", () => getIndex())
+      .get("/create-from-share/*", () => getIndex())
+      .get("/templates/*", () => getIndex())
   }
 }

From 3832fc1304c07b2db2112625a1c3c7731f225bdc Mon Sep 17 00:00:00 2001
From: nichenqin <nichenqin@hotmail.com>
Date: Thu, 24 Oct 2024 13:00:30 +0800
Subject: [PATCH 07/10] feat: allow to show gallery without an attachment field

---
 .../aggregate/config/aggregate-config.svelte  |  2 +-
 .../blocks/create-field/create-field.svelte   |  2 +-
 .../components/blocks/field/field-menu.svelte |  4 +-
 .../blocks/forms/create-form.svelte           |  2 +-
 .../blocks/forms/form-display.svelte          |  2 +-
 .../blocks/forms/form-fields-editor.svelte    |  2 +-
 .../blocks/forms/form-option.svelte           |  6 +--
 .../gallery-view/gallery-option-button.svelte | 29 +++++++++++
 .../gallery-view/gallery-view-card.svelte     | 49 +++++++++++--------
 .../gallery-view/gallery-view-cards.svelte    |  2 +-
 .../gallery-view-field-form.svelte            | 25 ++++++++--
 .../blocks/gallery-view/gallery-view.svelte   | 17 ++++---
 .../blocks/grid-view/grid-view-footer.svelte  |  2 +-
 .../blocks/import-table/import-table.svelte   |  2 +-
 .../blocks/kanban-view/kanban-view.svelte     |  6 +--
 .../select-kanban-field-form.svelte           | 15 +++++-
 .../kanban-view/select-kanban-lane.svelte     |  2 +-
 .../kanban-view/select-kanban-view.svelte     |  2 +-
 .../blocks/list-view/list-view.svelte         |  4 +-
 .../blocks/share/share-button.svelte          |  4 +-
 .../blocks/update-field/update-field.svelte   |  2 +-
 .../blocks/update-table/update-table.svelte   |  2 +-
 .../view-color-editor.svelte                  |  2 +-
 .../blocks/view-fields/view-fields.svelte     |  4 +-
 .../view-filter-editor.svelte                 |  2 +-
 .../blocks/view-sort/view-sort.svelte         |  2 +-
 .../blocks/view/create-view-button.svelte     |  2 +-
 .../blocks/view/delete-view-dialog.svelte     |  4 +-
 .../blocks/view/duplicate-view.svelte         |  2 +-
 .../widget/create-view-widget-form.svelte     |  2 +-
 .../components/blocks/widget/widget.svelte    |  4 +-
 31 files changed, 136 insertions(+), 71 deletions(-)
 create mode 100644 apps/frontend/src/lib/components/blocks/gallery-view/gallery-option-button.svelte

diff --git a/apps/frontend/src/lib/components/blocks/aggregate/config/aggregate-config.svelte b/apps/frontend/src/lib/components/blocks/aggregate/config/aggregate-config.svelte
index aa50ff5b1..6183daf17 100644
--- a/apps/frontend/src/lib/components/blocks/aggregate/config/aggregate-config.svelte
+++ b/apps/frontend/src/lib/components/blocks/aggregate/config/aggregate-config.svelte
@@ -47,7 +47,7 @@
     mutationFn: trpc.table.view.widget.update.mutate,
     async onSuccess(data, variables, context) {
       if (table) {
-        await invalidate(`table:${table.id.value}`)
+        await invalidate(`undb:table:${table.id.value}`)
         await tick()
         await client.invalidateQueries({ queryKey: ["aggregate", table.id.value, widget.id] })
       }
diff --git a/apps/frontend/src/lib/components/blocks/create-field/create-field.svelte b/apps/frontend/src/lib/components/blocks/create-field/create-field.svelte
index c7c478daa..df01ce3cb 100644
--- a/apps/frontend/src/lib/components/blocks/create-field/create-field.svelte
+++ b/apps/frontend/src/lib/components/blocks/create-field/create-field.svelte
@@ -31,7 +31,7 @@
       async onSuccess() {
         toast.success("Create field success")
         reset()
-        await invalidate(`table:${$table.id.value}`)
+        await invalidate(`undb:table:${$table.id.value}`)
         await client.invalidateQueries({ queryKey: ["records", $table.id.value] })
         onSuccess()
       },
diff --git a/apps/frontend/src/lib/components/blocks/field/field-menu.svelte b/apps/frontend/src/lib/components/blocks/field/field-menu.svelte
index 132c48f39..1c1569b5d 100644
--- a/apps/frontend/src/lib/components/blocks/field/field-menu.svelte
+++ b/apps/frontend/src/lib/components/blocks/field/field-menu.svelte
@@ -56,7 +56,7 @@
     mutationFn: trpc.table.field.delete.mutate,
     async onSuccess() {
       toast.success("Delete field success")
-      await invalidate(`table:${$table.id.value}`)
+      await invalidate(`undb:table:${$table.id.value}`)
       await client.invalidateQueries({ queryKey: ["records", $table.id.value] })
       open = false
       deleteAlertOpen = false
@@ -70,7 +70,7 @@
     mutationFn: trpc.table.field.duplicate.mutate,
     async onSuccess() {
       toast.success("Duplicate field success")
-      await invalidate(`table:${$table.id.value}`)
+      await invalidate(`undb:table:${$table.id.value}`)
       await client.invalidateQueries({ queryKey: ["records", $table.id.value] })
       open = false
     },
diff --git a/apps/frontend/src/lib/components/blocks/forms/create-form.svelte b/apps/frontend/src/lib/components/blocks/forms/create-form.svelte
index 6496c1abd..910d15991 100644
--- a/apps/frontend/src/lib/components/blocks/forms/create-form.svelte
+++ b/apps/frontend/src/lib/components/blocks/forms/create-form.svelte
@@ -22,7 +22,7 @@
     mutationKey: ["table", $table.id.value, "createForm"],
     async onSuccess(data) {
       toast.success("create form successfully")
-      await invalidate(`table:${$table.id.value}`)
+      await invalidate(`undb:table:${$table.id.value}`)
       formId.set(data.formId)
       onSuccess?.()
     },
diff --git a/apps/frontend/src/lib/components/blocks/forms/form-display.svelte b/apps/frontend/src/lib/components/blocks/forms/form-display.svelte
index 7ddd1d5dc..d2100a369 100644
--- a/apps/frontend/src/lib/components/blocks/forms/form-display.svelte
+++ b/apps/frontend/src/lib/components/blocks/forms/form-display.svelte
@@ -37,7 +37,7 @@
     mutationKey: ["table", $table.id.value, "setForm"],
     mutationFn: trpc.table.form.set.mutate,
     async onSuccess() {
-      await invalidate(`table:${$table.id.value}`)
+      await invalidate(`undb:table:${$table.id.value}`)
     },
   })
 
diff --git a/apps/frontend/src/lib/components/blocks/forms/form-fields-editor.svelte b/apps/frontend/src/lib/components/blocks/forms/form-fields-editor.svelte
index bb3a70855..f101da73a 100644
--- a/apps/frontend/src/lib/components/blocks/forms/form-fields-editor.svelte
+++ b/apps/frontend/src/lib/components/blocks/forms/form-fields-editor.svelte
@@ -31,7 +31,7 @@
     mutationKey: ["table", $table.id.value, "setForm"],
     mutationFn: trpc.table.form.set.mutate,
     async onSuccess() {
-      await invalidate(`table:${$table.id.value}`)
+      await invalidate(`undb:table:${$table.id.value}`)
     },
   })
 
diff --git a/apps/frontend/src/lib/components/blocks/forms/form-option.svelte b/apps/frontend/src/lib/components/blocks/forms/form-option.svelte
index 77072a8c7..3c14bde60 100644
--- a/apps/frontend/src/lib/components/blocks/forms/form-option.svelte
+++ b/apps/frontend/src/lib/components/blocks/forms/form-option.svelte
@@ -39,7 +39,7 @@
     mutationKey: ["table", $table.id.value, "setForm"],
     mutationFn: trpc.table.form.set.mutate,
     async onSuccess() {
-      await invalidate(`table:${$table.id.value}`)
+      await invalidate(`undb:table:${$table.id.value}`)
     },
   })
 
@@ -55,7 +55,7 @@
     mutationKey: ["table", $table.id.value, "deleteForm"],
     mutationFn: trpc.table.form.delete.mutate,
     async onSuccess() {
-      await invalidate(`table:${$table.id.value}`)
+      await invalidate(`undb:table:${$table.id.value}`)
       await goto(`/t/${$table.id.value}`)
     },
   })
@@ -76,7 +76,7 @@
     async onSuccess(data) {
       toast.success("Duplicate form successfully")
       duplicateFormDialog = false
-      await invalidate(`table:${$table.id.value}`)
+      await invalidate(`undb:table:${$table.id.value}`)
       formId.set(data.formId)
     },
   })
diff --git a/apps/frontend/src/lib/components/blocks/gallery-view/gallery-option-button.svelte b/apps/frontend/src/lib/components/blocks/gallery-view/gallery-option-button.svelte
new file mode 100644
index 000000000..88281b16d
--- /dev/null
+++ b/apps/frontend/src/lib/components/blocks/gallery-view/gallery-option-button.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button"
+  import { KanbanSquareDashedIcon } from "lucide-svelte"
+  import * as Dropdown from "$lib/components/ui/dropdown-menu"
+  import GalleryViewFieldForm from "./gallery-view-field-form.svelte"
+  import type { GalleryView } from "@undb/table"
+
+  export let view: GalleryView
+  export let readonly = false
+</script>
+
+<Dropdown.Root>
+  <Dropdown.Trigger asChild let:builder>
+    <Button variant="ghost" size="sm" builders={[builder]}>
+      <KanbanSquareDashedIcon class="text-muted-foreground mr-2 h-4 w-4 font-semibold" />
+      Gallery
+    </Button>
+  </Dropdown.Trigger>
+  <Dropdown.Content class="w-[400px] p-2">
+    <Dropdown.Label>
+      {#if !readonly}
+        Update kanban view
+      {:else}
+        Kanban view
+      {/if}
+    </Dropdown.Label>
+    <GalleryViewFieldForm {view} {readonly} />
+  </Dropdown.Content>
+</Dropdown.Root>
diff --git a/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view-card.svelte b/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view-card.svelte
index af25e8fd0..b8840c984 100644
--- a/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view-card.svelte
+++ b/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view-card.svelte
@@ -24,10 +24,14 @@
   let values = record.flatten()
   let displayValues = record.displayValues?.toJSON() ?? {}
 
-  export let fieldId: string
+  export let fieldId: string | undefined
 
-  let field = $table.schema.getFieldById(new FieldIdVo(fieldId)).into(undefined) as AttachmentField | undefined
-  $: fieldValues = record.getValue(new FieldIdVo(fieldId)).into(undefined) as AttachmentFieldValue | undefined
+  let field = (fieldId ? $table.schema.getFieldById(new FieldIdVo(fieldId)).into(undefined) : undefined) as
+    | AttachmentField
+    | undefined
+  $: fieldValues = (fieldId ? record.getValue(new FieldIdVo(fieldId)).into(undefined) : undefined) as
+    | AttachmentFieldValue
+    | undefined
   $: images = fieldValues?.getImages() ?? []
 
   export let color: ViewColor | undefined
@@ -36,23 +40,25 @@
   $: condition = isMatch ? color?.getMatchedFieldConditions($table, record)[0] : undefined
 </script>
 
-<div class="group col-span-1 flex flex-col rounded-md border shadow-sm transition-all hover:shadow-lg">
-  {#if images.length > 0}
-    <Carousel.Root class="h-[150px] w-full overflow-hidden border-b bg-gray-100">
-      <Carousel.Content>
-        {#each images as image}
-          <Carousel.Item>
-            <img src={image.signedUrl} alt="" class="h-full w-full object-cover" />
-          </Carousel.Item>
-        {/each}
-      </Carousel.Content>
-      <Carousel.Previous class="absolute left-2 top-1/2 hidden group-hover:flex" />
-      <Carousel.Next class="absolute right-2 top-1/2 hidden group-hover:flex" />
-    </Carousel.Root>
-  {:else}
-    <div class="flex h-[150px] w-full shrink-0 items-center justify-center border-b bg-gray-100">
-      <ImagesIcon class="text-muted-foreground/50 h-10 w-10" />
-    </div>
+<div class="group col-span-1 flex flex-col rounded-md border bg-white shadow-sm transition-all hover:shadow-lg">
+  {#if field}
+    {#if images.length > 0}
+      <Carousel.Root class="h-[150px] w-full overflow-hidden border-b bg-gray-100">
+        <Carousel.Content>
+          {#each images as image}
+            <Carousel.Item>
+              <img src={image.signedUrl} alt="" class="h-full w-full object-cover" />
+            </Carousel.Item>
+          {/each}
+        </Carousel.Content>
+        <Carousel.Previous class="absolute left-2 top-1/2 hidden group-hover:flex" />
+        <Carousel.Next class="absolute right-2 top-1/2 hidden group-hover:flex" />
+      </Carousel.Root>
+    {:else}
+      <div class="flex h-[150px] w-full shrink-0 items-center justify-center border-b bg-gray-100">
+        <ImagesIcon class="text-muted-foreground/50 h-10 w-10" />
+      </div>
+    {/if}
   {/if}
   <button
     on:click={() => ($r = record.id.value)}
@@ -61,9 +67,10 @@
     {#if isMatch}
       <div class={cn("absolute left-0 top-0 h-full w-1", condition && getBgColor(condition.option.color))}></div>
     {/if}
-    {#each fields.filter((f) => f.id.value !== fieldId) as field}
+    {#each fields.filter((f) => f.id.value !== fieldId) as field, idx}
       <div class="flex w-full">
         <FieldValue
+          class={cn(idx === 0 && "font-semibold")}
           {r}
           {field}
           tableId={$table.id.value}
diff --git a/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view-cards.svelte b/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view-cards.svelte
index d18d1fb49..346940f32 100644
--- a/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view-cards.svelte
+++ b/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view-cards.svelte
@@ -7,7 +7,7 @@
 
   const table = getTable()
   export let viewId: Readable<string | undefined>
-  export let fieldId: string
+  export let fieldId: string | undefined
   export let r: Writable<string | null>
   const recordsStore = getRecordsStore()
 
diff --git a/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view-field-form.svelte b/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view-field-form.svelte
index 2aa9cd847..9e202d521 100644
--- a/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view-field-form.svelte
+++ b/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view-field-form.svelte
@@ -10,8 +10,10 @@
   import { createMutation } from "@tanstack/svelte-query"
   import { toast } from "svelte-sonner"
   import { invalidate } from "$app/navigation"
+  import { CircleCheckBigIcon } from "lucide-svelte"
 
   const table = getTable()
+  export let readonly = false
 
   $: fields = $table.schema.getGalleryFields()
 
@@ -49,7 +51,7 @@
     mutationKey: ["updateView"],
     async onSuccess(data, variables, context) {
       toast.success("View updated")
-      await invalidate(`table:${$table.id.value}`)
+      await invalidate(`undb:table:${$table.id.value}`)
     },
   })
 </script>
@@ -61,6 +63,7 @@
         <FieldPicker
           placeholder="Select a select type field to group gallery lanes"
           value={$formData.gallery?.field}
+          disabled={readonly}
           onValueChange={(field) => {
             if ($formData.gallery) {
               $formData.gallery.field = field
@@ -74,9 +77,21 @@
     </div>
   </form>
 
-  <CreateFieldButton class="w-full" variant="secondary" />
+  {#if !readonly}
+    <CreateFieldButton class="w-full" variant="secondary" />
 
-  <div class="flex w-full justify-end">
-    <Button type="submit" form="select-gallery-field-form">Confirm</Button>
-  </div>
+    <div class="flex w-full justify-end">
+      <Button
+        variant="outline"
+        disabled={readonly}
+        size="sm"
+        class="w-full"
+        type="submit"
+        form="select-gallery-field-form"
+      >
+        <CircleCheckBigIcon class="mr-2 size-4" />
+        Confirm
+      </Button>
+    </div>
+  {/if}
 </div>
diff --git a/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view.svelte b/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view.svelte
index 49ecfad1b..d0c07190b 100644
--- a/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view.svelte
+++ b/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view.svelte
@@ -12,6 +12,7 @@
   import ViewPagination from "../view/view-pagination.svelte"
   import { cn } from "$lib/utils"
   import GalleryViewLoading from "./gallery-view-loading.svelte"
+  import GalleryViewOptionButton from "./gallery-option-button.svelte"
 
   const table = getTable()
   export let viewId: Readable<string | undefined>
@@ -75,12 +76,14 @@
   $: total = ($getRecordsQuery.data as any)?.total
 </script>
 
-<TableTools {r} {readonly} />
-<div class={cn("flex-1 overflow-y-auto overflow-x-hidden p-4", !field && "bg-muted")}>
-  {#if !field}
-    <GalleryViewField {view} />
-  {:else if $isLoading}
-    <GalleryViewLoading />
+<TableTools {r} {viewId} {readonly}>
+  {#if !shareId}
+    <GalleryViewOptionButton {view} {readonly} />
+  {/if}
+</TableTools>
+<div class={cn("flex-1 overflow-y-auto overflow-x-hidden p-4")}>
+  {#if $isLoading}
+    <GalleryViewLoading {viewId} />
   {:else}
     <GalleryViewCards fieldId={field} {viewId} {r} />
   {/if}
@@ -94,7 +97,7 @@
 {/await}
 
 {#await import("$lib/components/blocks/record-detail/table-record-detail-sheet.svelte") then { default: TableRecordDetailSheet }}
-  <TableRecordDetailSheet />
+  <TableRecordDetailSheet {viewId} />
 {/await}
 
 {#await import("$lib/components/blocks/view-widget/view-widget-sheet.svelte") then { default: ViewWidgetSheet }}
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/grid-view-footer.svelte b/apps/frontend/src/lib/components/blocks/grid-view/grid-view-footer.svelte
index 9df49a0b9..bd4128be0 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/grid-view-footer.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/grid-view-footer.svelte
@@ -37,7 +37,7 @@
       mutationKey: ["table", $table.id.value, "setViewAggregate"],
       mutationFn: trpc.table.view.setAggregate.mutate,
       async onSuccess() {
-        await invalidate(`table:${$table.id.value}`)
+        await invalidate(`undb:table:${$table.id.value}`)
         await client.invalidateQueries({ queryKey: ["aggregates", $table.id.value] })
       },
     })),
diff --git a/apps/frontend/src/lib/components/blocks/import-table/import-table.svelte b/apps/frontend/src/lib/components/blocks/import-table/import-table.svelte
index 579baac72..ecd127931 100644
--- a/apps/frontend/src/lib/components/blocks/import-table/import-table.svelte
+++ b/apps/frontend/src/lib/components/blocks/import-table/import-table.svelte
@@ -55,7 +55,7 @@
     async onSuccess() {
       await invalidate("undb:tables")
       await goto(`/t/${tableId}`)
-      await invalidate(`table:${tableId}`)
+      await invalidate(`undb:table:${tableId}`)
       closeModal(IMPORT_TABLE_MODAL)
       baseId.set(null)
     },
diff --git a/apps/frontend/src/lib/components/blocks/kanban-view/kanban-view.svelte b/apps/frontend/src/lib/components/blocks/kanban-view/kanban-view.svelte
index dee12c3c8..8d0bcd0d8 100644
--- a/apps/frontend/src/lib/components/blocks/kanban-view/kanban-view.svelte
+++ b/apps/frontend/src/lib/components/blocks/kanban-view/kanban-view.svelte
@@ -30,7 +30,7 @@
 </script>
 
 {#key $table.id.value}
-  <TableTools {readonly} {r}>
+  <TableTools {readonly} {viewId} {r}>
     {#if !shareId}
       <KanbanOptionButton {view} {readonly} />
     {/if}
@@ -56,10 +56,10 @@
   {/await}
 
   {#await import("$lib/components/blocks/record-detail/table-record-detail-sheet.svelte") then { default: TableRecordDetailSheet }}
-    <TableRecordDetailSheet />
+    <TableRecordDetailSheet {viewId} />
   {/await}
 
   {#await import("$lib/components/blocks/view-widget/view-widget-sheet.svelte") then { default: ViewWidgetSheet }}
-    <ViewWidgetSheet {viewId} {shareId}/>
+    <ViewWidgetSheet {viewId} {shareId} />
   {/await}
 {/key}
diff --git a/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-field-form.svelte b/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-field-form.svelte
index 147569f5f..1ae054014 100644
--- a/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-field-form.svelte
+++ b/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-field-form.svelte
@@ -11,6 +11,7 @@
   import { toast } from "svelte-sonner"
   import { invalidate } from "$app/navigation"
   import { hasPermission } from "$lib/store/space-member.store"
+  import { CircleCheckBigIcon } from "lucide-svelte"
 
   export let readonly = false
 
@@ -52,7 +53,7 @@
     mutationKey: ["updateView"],
     async onSuccess(data, variables, context) {
       toast.success("View updated")
-      await invalidate(`table:${$table.id.value}`)
+      await invalidate(`undb:table:${$table.id.value}`)
     },
   })
 </script>
@@ -84,7 +85,17 @@
 
   {#if !readonly}
     <div class="flex w-full justify-end">
-      <Button type="submit" form="select-kanban-field-form" disabled={readonly}>Confirm</Button>
+      <Button
+        variant="outline"
+        size="sm"
+        class="w-full"
+        type="submit"
+        form="select-kanban-field-form"
+        disabled={readonly}
+      >
+        <CircleCheckBigIcon class="mr-2 size-4" />
+        Confirm
+      </Button>
     </div>
   {/if}
 </div>
diff --git a/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-lane.svelte b/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-lane.svelte
index 92d15fcf8..caee90faf 100644
--- a/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-lane.svelte
+++ b/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-lane.svelte
@@ -134,7 +134,7 @@
     onSuccess: async (data, variables, context) => {
       toast.success("Option updated")
       updateOptionDialogOpen = false
-      await invalidate(`table:${$table.id.value}`)
+      await invalidate(`undb:table:${$table.id.value}`)
     },
     onError: (error, variables, context) => {
       toast.error(error.message)
diff --git a/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-view.svelte b/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-view.svelte
index 7661f9ba9..bd4877ebb 100644
--- a/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-view.svelte
+++ b/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-view.svelte
@@ -43,7 +43,7 @@
     mutationFn: trpc.table.field.update.mutate,
     mutationKey: ["table", $table.id.value, "field", fieldId, "update"],
     async onSuccess(data) {
-      await invalidate(`table:${$table.id.value}`)
+      await invalidate(`undb:table:${$table.id.value}`)
     },
     onError(e) {
       toast.error(e.message)
diff --git a/apps/frontend/src/lib/components/blocks/list-view/list-view.svelte b/apps/frontend/src/lib/components/blocks/list-view/list-view.svelte
index 4882f5767..cf6682ffa 100644
--- a/apps/frontend/src/lib/components/blocks/list-view/list-view.svelte
+++ b/apps/frontend/src/lib/components/blocks/list-view/list-view.svelte
@@ -75,7 +75,7 @@
 <div class={cn("flex-1 overflow-y-auto overflow-x-hidden")}>
   {#if $isLoading}
     <div class="p-4">
-      <ListViewLoading />
+      <ListViewLoading {viewId} />
     </div>
   {:else}
     <ListViewList {viewId} {r} {readonly} />
@@ -88,7 +88,7 @@
 {/await}
 
 {#await import("$lib/components/blocks/record-detail/table-record-detail-sheet.svelte") then { default: TableRecordDetailSheet }}
-  <TableRecordDetailSheet />
+  <TableRecordDetailSheet {viewId} />
 {/await}
 
 {#await import("$lib/components/blocks/view-widget/view-widget-sheet.svelte") then { default: ViewWidgetSheet }}
diff --git a/apps/frontend/src/lib/components/blocks/share/share-button.svelte b/apps/frontend/src/lib/components/blocks/share/share-button.svelte
index c48c10332..8a6cae49d 100644
--- a/apps/frontend/src/lib/components/blocks/share/share-button.svelte
+++ b/apps/frontend/src/lib/components/blocks/share/share-button.svelte
@@ -31,7 +31,7 @@
     mutationFn: trpc.share.enable.mutate,
     async onSuccess(data, variables, context) {
       if ($t) {
-        await invalidate(`table:${$t.id.value}`)
+        await invalidate(`undb:table:${$t.id.value}`)
       }
       onSuccess()
     },
@@ -54,7 +54,7 @@
     mutationFn: trpc.share.disable.mutate,
     async onSuccess(data, variables, context) {
       if ($t) {
-        await invalidate(`table:${$t.id.value}`)
+        await invalidate(`undb:table:${$t.id.value}`)
       }
       onSuccess()
     },
diff --git a/apps/frontend/src/lib/components/blocks/update-field/update-field.svelte b/apps/frontend/src/lib/components/blocks/update-field/update-field.svelte
index 5f6c53ee9..b4ece9396 100644
--- a/apps/frontend/src/lib/components/blocks/update-field/update-field.svelte
+++ b/apps/frontend/src/lib/components/blocks/update-field/update-field.svelte
@@ -33,7 +33,7 @@
       async onSuccess() {
         onSuccess()
         toast.success("Update field success")
-        await invalidate(`table:${$table.id.value}`)
+        await invalidate(`undb:table:${$table.id.value}`)
         await client.invalidateQueries({ queryKey: ["records", $table.id.value] })
         reset()
       },
diff --git a/apps/frontend/src/lib/components/blocks/update-table/update-table.svelte b/apps/frontend/src/lib/components/blocks/update-table/update-table.svelte
index 17d1a4ae9..5478d5531 100644
--- a/apps/frontend/src/lib/components/blocks/update-table/update-table.svelte
+++ b/apps/frontend/src/lib/components/blocks/update-table/update-table.svelte
@@ -19,7 +19,7 @@
     mutationFn: trpc.table.update.mutate,
     async onSuccess(data, variables, context) {
       toast.success("Table updated")
-      await invalidate(`table:${$table.id.value}`)
+      await invalidate(`undb:table:${$table.id.value}`)
       toggleModal(UPDATE_TABLE_MODAL)
     },
     onError(error, variables, context) {
diff --git a/apps/frontend/src/lib/components/blocks/view-color-editor/view-color-editor.svelte b/apps/frontend/src/lib/components/blocks/view-color-editor/view-color-editor.svelte
index 92d2e8a45..bf64b35b7 100644
--- a/apps/frontend/src/lib/components/blocks/view-color-editor/view-color-editor.svelte
+++ b/apps/frontend/src/lib/components/blocks/view-color-editor/view-color-editor.svelte
@@ -38,7 +38,7 @@
     mutationKey: ["table", $table.id.value, "setColor"],
     mutationFn: trpc.table.view.setColor.mutate,
     onSuccess: async () => {
-      await invalidate(`table:${$table.id.value}`)
+      await invalidate(`undb:table:${$table.id.value}`)
       open = false
     },
   })
diff --git a/apps/frontend/src/lib/components/blocks/view-fields/view-fields.svelte b/apps/frontend/src/lib/components/blocks/view-fields/view-fields.svelte
index 81bdc0fa7..9d16610be 100644
--- a/apps/frontend/src/lib/components/blocks/view-fields/view-fields.svelte
+++ b/apps/frontend/src/lib/components/blocks/view-fields/view-fields.svelte
@@ -45,7 +45,7 @@
     mutationFn: trpc.table.view.setFields.mutate,
     mutationKey: ["table", $table.id.value, "setFields"],
     async onSuccess(data, variables, context) {
-      await invalidate(`table:${$table.id.value}`)
+      await invalidate(`undb:table:${$table.id.value}`)
       await client.invalidateQueries({ queryKey: ["records", $table.id.value] })
     },
   })
@@ -77,7 +77,7 @@
     mutationFn: trpc.table.view.setOption.mutate,
     mutationKey: ["table", $table.id.value, "setOption"],
     async onSuccess(data, variables, context) {
-      await invalidate(`table:${$table.id.value}`)
+      await invalidate(`undb:table:${$table.id.value}`)
       client.invalidateQueries({ queryKey: ["records", $table.id.value] })
     },
   })
diff --git a/apps/frontend/src/lib/components/blocks/view-filter-editor/view-filter-editor.svelte b/apps/frontend/src/lib/components/blocks/view-filter-editor/view-filter-editor.svelte
index 7a4b82cd4..290c205cb 100644
--- a/apps/frontend/src/lib/components/blocks/view-filter-editor/view-filter-editor.svelte
+++ b/apps/frontend/src/lib/components/blocks/view-filter-editor/view-filter-editor.svelte
@@ -42,7 +42,7 @@
     mutationKey: ["table", $table.id.value, "setFilters"],
     mutationFn: trpc.table.view.setFilter.mutate,
     onSuccess: async () => {
-      await invalidate(`table:${$table.id.value}`)
+      await invalidate(`undb:table:${$table.id.value}`)
       await client.invalidateQueries({ queryKey: ["records", $table.id.value] })
       await client.invalidateQueries({ queryKey: ["aggregates", $table.id.value] })
       open = false
diff --git a/apps/frontend/src/lib/components/blocks/view-sort/view-sort.svelte b/apps/frontend/src/lib/components/blocks/view-sort/view-sort.svelte
index 94b5839b2..d9d41ed82 100644
--- a/apps/frontend/src/lib/components/blocks/view-sort/view-sort.svelte
+++ b/apps/frontend/src/lib/components/blocks/view-sort/view-sort.svelte
@@ -61,7 +61,7 @@
     mutationKey: ["table", $table.id.value, "setSort"],
     mutationFn: trpc.table.view.setSort.mutate,
     async onSettled() {
-      await invalidate(`table:${$table.id.value}`)
+      await invalidate(`undb:table:${$table.id.value}`)
       await client.invalidateQueries({ queryKey: ["records", $table.id.value] })
       open = false
     },
diff --git a/apps/frontend/src/lib/components/blocks/view/create-view-button.svelte b/apps/frontend/src/lib/components/blocks/view/create-view-button.svelte
index ca8e2a6ee..50d0009b1 100644
--- a/apps/frontend/src/lib/components/blocks/view/create-view-button.svelte
+++ b/apps/frontend/src/lib/components/blocks/view/create-view-button.svelte
@@ -29,7 +29,7 @@
       viewNames = [...viewNames, $formData.name]
       toast.success("created view successfully")
       reset()
-      await invalidate(`table:${tableId}`)
+      await invalidate(`undb:table:${tableId}`)
       await goto(`/t/${tableId}/${data.viewId}`)
     },
     onError(e) {
diff --git a/apps/frontend/src/lib/components/blocks/view/delete-view-dialog.svelte b/apps/frontend/src/lib/components/blocks/view/delete-view-dialog.svelte
index 2b6a4ba4f..f98a1e6e5 100644
--- a/apps/frontend/src/lib/components/blocks/view/delete-view-dialog.svelte
+++ b/apps/frontend/src/lib/components/blocks/view/delete-view-dialog.svelte
@@ -3,7 +3,7 @@
   import { DELETE_VIEW, isModalOpen, toggleModal } from "$lib/store/modal.store"
   import { trpc } from "$lib/trpc/client"
   import { createMutation } from "@tanstack/svelte-query"
-  import {  getTable } from "$lib/store/table.store"
+  import { getTable } from "$lib/store/table.store"
   import { toast } from "svelte-sonner"
   import { goto, invalidate } from "$app/navigation"
   import { page } from "$app/stores"
@@ -15,7 +15,7 @@
     mutationKey: ["table", $viewId, "deleteView"],
     mutationFn: trpc.table.view.delete.mutate,
     async onSuccess(data, variables, context) {
-      await invalidate(`table:${$table.id.value}`)
+      await invalidate(`undb:table:${$table.id.value}`)
       await goto(`/t/${$table.id.value}`)
     },
     onError(error) {
diff --git a/apps/frontend/src/lib/components/blocks/view/duplicate-view.svelte b/apps/frontend/src/lib/components/blocks/view/duplicate-view.svelte
index 373033be9..20e063fdd 100644
--- a/apps/frontend/src/lib/components/blocks/view/duplicate-view.svelte
+++ b/apps/frontend/src/lib/components/blocks/view/duplicate-view.svelte
@@ -23,7 +23,7 @@
     async onSuccess(data, variables, context) {
       closeModal(DUPLICATE_VIEW)
       toast.success("View duplicated")
-      await invalidate(`table:${data.tableId}`)
+      await invalidate(`undb:table:${data.tableId}`)
       await goto(`/t/${data.tableId}/${data.viewId}`)
     },
     onError(error, variables, context) {
diff --git a/apps/frontend/src/lib/components/blocks/widget/create-view-widget-form.svelte b/apps/frontend/src/lib/components/blocks/widget/create-view-widget-form.svelte
index 31fb2e032..b5713cbd7 100644
--- a/apps/frontend/src/lib/components/blocks/widget/create-view-widget-form.svelte
+++ b/apps/frontend/src/lib/components/blocks/widget/create-view-widget-form.svelte
@@ -59,7 +59,7 @@
   const createViewWidgetMutation = createMutation({
     mutationFn: trpc.table.view.widget.create.mutate,
     async onSuccess(data) {
-      await invalidate(`table:${$table.id.value}`)
+      await invalidate(`undb:table:${$table.id.value}`)
       onSuccess()
     },
     onError(error, variables, context) {
diff --git a/apps/frontend/src/lib/components/blocks/widget/widget.svelte b/apps/frontend/src/lib/components/blocks/widget/widget.svelte
index b72b93650..86d5c8c78 100644
--- a/apps/frontend/src/lib/components/blocks/widget/widget.svelte
+++ b/apps/frontend/src/lib/components/blocks/widget/widget.svelte
@@ -44,7 +44,7 @@
     onSuccess: async () => {
       confirmDelete = false
       if (table) {
-        await invalidate(`table:${tableId}`)
+        await invalidate(`undb:table:${tableId}`)
       }
     },
     onError(error, variables, context) {
@@ -88,7 +88,7 @@
     onSuccess: async () => {
       confirmDuplicate = false
       if (table) {
-        await invalidate(`table:${tableId}`)
+        await invalidate(`undb:table:${tableId}`)
       }
     },
     onError(error, variables, context) {

From 1d4f1689e8b76b602c725071cb4fd6cc70c53fe3 Mon Sep 17 00:00:00 2001
From: nichenqin <nichenqin@hotmail.com>
Date: Thu, 24 Oct 2024 13:11:05 +0800
Subject: [PATCH 08/10] fix: fix hidden fields

---
 .../blocks/field-control/reference-control.svelte         | 4 ++--
 .../blocks/record-detail/record-detail-sheet.svelte       | 4 +++-
 .../components/blocks/record-detail/record-detail.svelte  | 8 ++++----
 .../blocks/record-detail/share-record-detail-sheet.svelte | 5 +++--
 .../blocks/record-detail/table-record-detail-sheet.svelte | 2 +-
 .../components/blocks/template/template-preview.svelte    | 2 +-
 .../s/b/[shareId]/t/[tableId]/[[viewId]]/+page.svelte     | 2 +-
 .../src/routes/(share)/s/v/[shareId]/+page.svelte         | 2 +-
 8 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/apps/frontend/src/lib/components/blocks/field-control/reference-control.svelte b/apps/frontend/src/lib/components/blocks/field-control/reference-control.svelte
index 813218c28..9312d7c47 100644
--- a/apps/frontend/src/lib/components/blocks/field-control/reference-control.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-control/reference-control.svelte
@@ -15,7 +15,7 @@
   let selected = writable<string[]>(value)
 
   onMount(() => {
-    selected.set(value)
+    selected?.set(value)
   })
   $: $selected, (value = $selected)
 
@@ -39,7 +39,7 @@
   >
     {#if hasValueReactive}
       <Button size="xs" variant="link" class="px-0" builders={[builder]}>
-        {$selected.length} Linked Records
+        {$selected?.length} Linked Records
       </Button>
     {:else}
       <Button size="xs" variant="link" type="button" class="text-muted-foreground px-0" builders={[builder]}>
diff --git a/apps/frontend/src/lib/components/blocks/record-detail/record-detail-sheet.svelte b/apps/frontend/src/lib/components/blocks/record-detail/record-detail-sheet.svelte
index 5f620bc44..ba0f97609 100644
--- a/apps/frontend/src/lib/components/blocks/record-detail/record-detail-sheet.svelte
+++ b/apps/frontend/src/lib/components/blocks/record-detail/record-detail-sheet.svelte
@@ -12,11 +12,12 @@
   import { preferences } from "$lib/store/persisted.store"
   import { ScrollArea } from "$lib/components/ui/scroll-area"
   import RecordDetailMenu from "./record-detail-menu.svelte"
-  import { type Writable } from "svelte/store"
+  import { type Writable, type Readable } from "svelte/store"
 
   export let readonly = false
   export let recordDo: RecordDO | undefined
   export let isLoading: boolean
+  export let viewId: Readable<string | undefined>
   export let r: Writable<string | null>
 
   const table = getTable()
@@ -70,6 +71,7 @@
             <div class={cn("overflow-hidden", $preferences.showAudit && $r ? "col-span-3" : "col-span-4")}>
               <div class="h-full w-full overflow-auto px-6">
                 <RecordDetail
+                  {viewId}
                   onSuccess={async () => {
                     $r = null
                     await client.invalidateQueries({ queryKey: ["records", $table.id.value] })
diff --git a/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte b/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte
index d8e8b5eb1..ce27e63af 100644
--- a/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte
+++ b/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte
@@ -11,19 +11,19 @@
   import { toast } from "svelte-sonner"
   import { beforeNavigate } from "$app/navigation"
   import { pick } from "radash"
-  import type { Readable } from "svelte/store"
   import * as Collapsible from "$lib/components/ui/collapsible"
   import Button from "$lib/components/ui/button/button.svelte"
   import { preferences } from "$lib/store/persisted.store"
   import { cn } from "$lib/utils"
   import { getRecordsStore } from "$lib/store/records.store"
-  import { type Writable } from "svelte/store"
+  import { type Writable, type Readable } from "svelte/store"
 
   const recordsStore = getRecordsStore()
 
   export let readonly = false
   export let r: Writable<string | null>
   export let record: RecordDO
+  export let viewId: Readable<string | undefined>
 
   beforeNavigate(({ cancel }) => {
     if (mutableFieldTainted) {
@@ -36,7 +36,7 @@
   export let onSuccess: () => void = () => {}
 
   export let table: Readable<TableDo>
-  const fields = $table.getOrderedVisibleFields().filter((f) => f.type !== "button")
+  const fields = $table.getOrderedVisibleFields($viewId).filter((f) => f.type !== "button")
   const schema = $table.schema.getMutableSchema(fields)
 
   export let disabled: boolean = false
@@ -101,7 +101,7 @@
   $: dirty = mutableFieldTainted
   $: disabled = !$tainted || !!$allErrors.length
 
-  $: hiddenFields = $table.getOrderedHiddenFields().filter((f) => f.type !== "button")
+  $: hiddenFields = $table.getOrderedHiddenFields($viewId).filter((f) => f.type !== "button")
 </script>
 
 <form
diff --git a/apps/frontend/src/lib/components/blocks/record-detail/share-record-detail-sheet.svelte b/apps/frontend/src/lib/components/blocks/record-detail/share-record-detail-sheet.svelte
index e9076e6eb..679ca9320 100644
--- a/apps/frontend/src/lib/components/blocks/record-detail/share-record-detail-sheet.svelte
+++ b/apps/frontend/src/lib/components/blocks/record-detail/share-record-detail-sheet.svelte
@@ -3,13 +3,14 @@
   import { trpc } from "$lib/trpc/client"
   import { createQuery } from "@tanstack/svelte-query"
   import { RecordDO } from "@undb/table"
-  import { derived } from "svelte/store"
+  import { derived, type Readable } from "svelte/store"
   import { preferences } from "$lib/store/persisted.store"
   import RecordDetailSheet from "./record-detail-sheet.svelte"
   import { page } from "$app/stores"
   import { r } from "$lib/store/records.store"
 
   export let readonly = false
+  export let viewId: Readable<string | undefined>
 
   const table = getTable()
 
@@ -30,4 +31,4 @@
   $: recordDo = $record.data?.record ? RecordDO.fromJSON($table, $record.data?.record) : undefined
 </script>
 
-<RecordDetailSheet {readonly} {recordDo} isLoading={$record.isLoading} {r} />
+<RecordDetailSheet {readonly} {viewId} {recordDo} isLoading={$record.isLoading} {r} />
diff --git a/apps/frontend/src/lib/components/blocks/record-detail/table-record-detail-sheet.svelte b/apps/frontend/src/lib/components/blocks/record-detail/table-record-detail-sheet.svelte
index 948427f56..d3a31666f 100644
--- a/apps/frontend/src/lib/components/blocks/record-detail/table-record-detail-sheet.svelte
+++ b/apps/frontend/src/lib/components/blocks/record-detail/table-record-detail-sheet.svelte
@@ -32,4 +32,4 @@
   $: recordDo = $record.data?.record ? RecordDO.fromJSON($table, $record.data?.record) : undefined
 </script>
 
-<RecordDetailSheet {readonly} {recordDo} isLoading={$record.isLoading} {r} />
+<RecordDetailSheet {viewId} {readonly} {recordDo} isLoading={$record.isLoading} {r} />
diff --git a/apps/frontend/src/lib/components/blocks/template/template-preview.svelte b/apps/frontend/src/lib/components/blocks/template/template-preview.svelte
index 32a7ed25d..2ef18665e 100644
--- a/apps/frontend/src/lib/components/blocks/template/template-preview.svelte
+++ b/apps/frontend/src/lib/components/blocks/template/template-preview.svelte
@@ -205,4 +205,4 @@
   </div>
 {/if}
 
-<RecordDetailSheet readonly recordDo={$recordDo} isLoading={false} {r} />
+<RecordDetailSheet viewId={currentViewId} readonly recordDo={$recordDo} isLoading={false} {r} />
diff --git a/apps/frontend/src/routes/(share)/s/b/[shareId]/t/[tableId]/[[viewId]]/+page.svelte b/apps/frontend/src/routes/(share)/s/b/[shareId]/t/[tableId]/[[viewId]]/+page.svelte
index 79e8c36d5..2123551c7 100644
--- a/apps/frontend/src/routes/(share)/s/b/[shareId]/t/[tableId]/[[viewId]]/+page.svelte
+++ b/apps/frontend/src/routes/(share)/s/b/[shareId]/t/[tableId]/[[viewId]]/+page.svelte
@@ -40,5 +40,5 @@
 </main>
 
 {#if RecordDetailSheet}
-  <RecordDetailSheet readonly {r} />
+  <RecordDetailSheet {viewId} readonly {r} />
 {/if}
diff --git a/apps/frontend/src/routes/(share)/s/v/[shareId]/+page.svelte b/apps/frontend/src/routes/(share)/s/v/[shareId]/+page.svelte
index cccadabac..d23fb32a4 100644
--- a/apps/frontend/src/routes/(share)/s/v/[shareId]/+page.svelte
+++ b/apps/frontend/src/routes/(share)/s/v/[shareId]/+page.svelte
@@ -21,5 +21,5 @@
 <ShareViewPage {viewId} shareId={$page.params.shareId} />
 
 {#if RecordDetailSheet}
-  <RecordDetailSheet readonly {r} />
+  <RecordDetailSheet {viewId} readonly {r} />
 {/if}

From fb2d72d20f539e5d9c419c93d4a93df5de4771a8 Mon Sep 17 00:00:00 2001
From: nichenqin <nichenqin@hotmail.com>
Date: Thu, 24 Oct 2024 15:34:04 +0800
Subject: [PATCH 09/10] feat: add basic formula field

---
 apps/frontend/schema.graphql                  |   1 +
 .../blocks/field-control/field-control.svelte |   2 +
 .../blocks/field-icon/field-icon.svelte       |   2 +
 .../blocks/field-value/field-value.svelte     |   2 +
 .../blocks/field-value/formula-field.svelte   |  14 +++
 .../editable-cell/formula-cell.svelte         |  16 +++
 .../blocks/grid-view/grid-view-cell.svelte    |   2 +
 .../blocks/record-detail/record-detail.svelte |   6 +-
 packages/graphql/src/index.ts                 |   1 +
 packages/i18n/src/i18n/en/index.ts            |   1 +
 packages/i18n/src/i18n/i18n-types.ts          |   8 ++
 .../record/record-query-creator-visitor.ts    |   2 +
 .../src/record/record-reference-visitor.ts    |   4 +
 .../src/record/record-select-field-visitor.ts |   4 +
 .../persistence/src/template/template-data.ts |  28 ++---
 .../undelying-table-field-updated.visitor.ts  |   2 +
 .../underlying-table-field.visitor.ts         |   9 ++
 .../record/record-visitor.interface.ts        |   2 +
 .../schema/fields/dto/create-field.dto.ts     |   3 +
 .../modules/schema/fields/dto/field.dto.ts    |   2 +
 .../schema/fields/dto/update-field.dto.ts     |   2 +
 .../schema/fields/field-value.factory.ts      |   2 +
 .../modules/schema/fields/field.aggregate.ts  |   2 +
 .../modules/schema/fields/field.factory.ts    |   7 +-
 .../src/modules/schema/fields/field.type.ts   |  10 +-
 .../src/modules/schema/fields/field.util.ts   |   5 +-
 .../modules/schema/fields/field.visitor.ts    |   2 +
 .../formula-field-value.visitor.ts            |   9 ++
 .../formula-field/formula-field-value.vo.ts   |  15 +++
 .../formula-field/formula-field.aggregate.ts  |  15 +++
 .../formula-field/formula-field.condition.ts  |  21 ++++
 .../formula-field.specification.ts            | 107 ++++++++++++++++++
 .../formula-field/formula-field.vo.ts         | 102 +++++++++++++++++
 .../fields/variants/formula-field/index.ts    |   5 +
 .../modules/schema/fields/variants/index.ts   |   1 +
 .../template/src/dto/template-schema.dto.ts   |   4 +-
 .../src/templates/eventPlaning.base.json      |  14 +--
 .../template/src/templates/test.base.json     |  30 ++++-
 38 files changed, 431 insertions(+), 33 deletions(-)
 create mode 100644 apps/frontend/src/lib/components/blocks/field-value/formula-field.svelte
 create mode 100644 apps/frontend/src/lib/components/blocks/grid-view/editable-cell/formula-cell.svelte
 create mode 100644 packages/table/src/modules/schema/fields/variants/formula-field/formula-field-value.visitor.ts
 create mode 100644 packages/table/src/modules/schema/fields/variants/formula-field/formula-field-value.vo.ts
 create mode 100644 packages/table/src/modules/schema/fields/variants/formula-field/formula-field.aggregate.ts
 create mode 100644 packages/table/src/modules/schema/fields/variants/formula-field/formula-field.condition.ts
 create mode 100644 packages/table/src/modules/schema/fields/variants/formula-field/formula-field.specification.ts
 create mode 100644 packages/table/src/modules/schema/fields/variants/formula-field/formula-field.vo.ts
 create mode 100644 packages/table/src/modules/schema/fields/variants/formula-field/index.ts

diff --git a/apps/frontend/schema.graphql b/apps/frontend/schema.graphql
index ab3d90d04..aaadf383c 100644
--- a/apps/frontend/schema.graphql
+++ b/apps/frontend/schema.graphql
@@ -60,6 +60,7 @@ enum FieldType {
   date
   duration
   email
+  formula
   id
   json
   longText
diff --git a/apps/frontend/src/lib/components/blocks/field-control/field-control.svelte b/apps/frontend/src/lib/components/blocks/field-control/field-control.svelte
index 94b34cb07..84e206a48 100644
--- a/apps/frontend/src/lib/components/blocks/field-control/field-control.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-control/field-control.svelte
@@ -14,6 +14,7 @@
   import CheckboxControl from "./checkbox-control.svelte"
   import UrlControl from "./url-control.svelte"
   import RollupField from "../field-value/rollup-field.svelte"
+  import FormulaField from "../field-value/formula-field.svelte"
   import LongTextControl from "./long-text-control.svelte"
   import CurrencyControl from "./currency-control.svelte"
   import ButtonControl from "./button-control.svelte"
@@ -55,6 +56,7 @@
     date: DateControl,
     json: JsonControl,
     checkbox: CheckboxControl,
+    formula: FormulaField,
     user: UserControl,
     duration: DurationControl,
     percentage: PercentageControl,
diff --git a/apps/frontend/src/lib/components/blocks/field-icon/field-icon.svelte b/apps/frontend/src/lib/components/blocks/field-icon/field-icon.svelte
index 940980bb8..34188b529 100644
--- a/apps/frontend/src/lib/components/blocks/field-icon/field-icon.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-icon/field-icon.svelte
@@ -28,6 +28,7 @@
     MousePointerClickIcon,
     TimerIcon,
     PercentIcon,
+    SquareFunctionIcon,
   } from "lucide-svelte"
 
   export let type: FieldType
@@ -58,6 +59,7 @@
     button: MousePointerClickIcon,
     duration: TimerIcon,
     percentage: PercentIcon,
+    formula: SquareFunctionIcon,
   }
 </script>
 
diff --git a/apps/frontend/src/lib/components/blocks/field-value/field-value.svelte b/apps/frontend/src/lib/components/blocks/field-value/field-value.svelte
index 1157c8745..2e46ea7f9 100644
--- a/apps/frontend/src/lib/components/blocks/field-value/field-value.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-value/field-value.svelte
@@ -20,6 +20,7 @@
   import DurationField from "./duration-field.svelte"
   import PercentageField from "./percentage-field.svelte"
   import ButtonControl from "../field-control/button-control.svelte"
+  import FormulaField from "./formula-field.svelte"
 
   export let type: FieldType
   export let value: any
@@ -55,6 +56,7 @@
     user: UserField,
     duration: DurationField,
     percentage: PercentageField,
+    formula: FormulaField,
     button: ButtonControl,
   }
 </script>
diff --git a/apps/frontend/src/lib/components/blocks/field-value/formula-field.svelte b/apps/frontend/src/lib/components/blocks/field-value/formula-field.svelte
new file mode 100644
index 000000000..a15259ded
--- /dev/null
+++ b/apps/frontend/src/lib/components/blocks/field-value/formula-field.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { cn } from "$lib/utils"
+
+  export let value: string | undefined = undefined
+  export let placeholder: string | undefined = undefined
+
+  $: v = value || placeholder || ""
+</script>
+
+{#if v}
+  <div class={cn("truncate text-left text-sm", $$restProps.class)}>
+    {v}
+  </div>
+{/if}
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/formula-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/formula-cell.svelte
new file mode 100644
index 000000000..78a9e0dcc
--- /dev/null
+++ b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/formula-cell.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { trpc } from "$lib/trpc/client"
+  import { cn } from "$lib/utils"
+  import { createMutation } from "@tanstack/svelte-query"
+  import type { FormulaField } from "@undb/table"
+  import { toast } from "svelte-sonner"
+  import { gridViewStore } from "../grid-view.store"
+
+  export let value: string
+</script>
+
+<div class={cn("truncate", $$restProps.class)}>
+  {#if value}
+    {value}
+  {/if}
+</div>
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/grid-view-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/grid-view-cell.svelte
index ab3ac9b73..f950e6fa7 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/grid-view-cell.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/grid-view-cell.svelte
@@ -27,6 +27,7 @@
   import ButtonCell from "./editable-cell/button-cell.svelte"
   import DurationCell from "./editable-cell/duration-cell.svelte"
   import PercentageCell from "./editable-cell/percentage-cell.svelte"
+  import FormulaCell from "./editable-cell/formula-cell.svelte"
   import type { Readable } from "svelte/store"
 
   const table = getTable()
@@ -69,6 +70,7 @@
     user: UserCell,
     duration: DurationCell,
     percentage: PercentageCell,
+    formula: FormulaCell,
   }
 </script>
 
diff --git a/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte b/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte
index ce27e63af..1e715a494 100644
--- a/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte
+++ b/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte
@@ -115,7 +115,9 @@
     {@const dirty = $tainted && $tainted[field.id.value]}
     <Form.Field class="flex gap-2 space-y-0" {form} name={field.id.value}>
       <Form.Control let:attrs>
-        <Form.Label class="text-muted-foreground flex h-4 w-48 shrink-0 items-center justify-between gap-2 pt-4">
+        <Form.Label
+          class="text-muted-foreground flex h-full w-48 shrink-0 items-center justify-between gap-2 truncate pt-2"
+        >
           <div class="flex items-center gap-2">
             <FieldIcon {field} type={field.type} class="h-4 w-4" />
             <span class="flex-1 truncate">{field.name.value}</span>
@@ -141,7 +143,7 @@
               value={values[field.id.value]}
               type={field.type}
               displayValue={displayValues[field.id.value]}
-              class="flex min-h-9 items-center text-xs"
+              class="flex min-h-9 items-center truncate text-xs"
               readonly
             />
           {:else}
diff --git a/packages/graphql/src/index.ts b/packages/graphql/src/index.ts
index f053e4563..a9d4c739d 100644
--- a/packages/graphql/src/index.ts
+++ b/packages/graphql/src/index.ts
@@ -139,6 +139,7 @@ export class Graphql {
         user
         duration
         percentage
+        formula
       }
 
       type Field {
diff --git a/packages/i18n/src/i18n/en/index.ts b/packages/i18n/src/i18n/en/index.ts
index 8be8da763..3414e1668 100644
--- a/packages/i18n/src/i18n/en/index.ts
+++ b/packages/i18n/src/i18n/en/index.ts
@@ -68,6 +68,7 @@ const fieldTypes: Record<FieldType, string> = {
   duration: "Duration",
   button: "Button",
   percentage: "Percentage",
+  formula: "Formula",
 }
 
 const rollupFns: Record<IRollupFn, string> = {
diff --git a/packages/i18n/src/i18n/i18n-types.ts b/packages/i18n/src/i18n/i18n-types.ts
index a5f3a3ee1..1293d1450 100644
--- a/packages/i18n/src/i18n/i18n-types.ts
+++ b/packages/i18n/src/i18n/i18n-types.ts
@@ -265,6 +265,10 @@ type RootTranslation = {
 			 * P​e​r​c​e​n​t​a​g​e
 			 */
 			percentage: string
+			/**
+			 * F​o​r​m​u​l​a
+			 */
+			formula: string
 		}
 		rollupFns: {
 			/**
@@ -666,6 +670,10 @@ export type TranslationFunctions = {
 			 * Percentage
 			 */
 			percentage: () => LocalizedString
+			/**
+			 * Formula
+			 */
+			formula: () => LocalizedString
 		}
 		rollupFns: {
 			/**
diff --git a/packages/persistence/src/record/record-query-creator-visitor.ts b/packages/persistence/src/record/record-query-creator-visitor.ts
index 9cb49e7b5..993802b85 100644
--- a/packages/persistence/src/record/record-query-creator-visitor.ts
+++ b/packages/persistence/src/record/record-query-creator-visitor.ts
@@ -28,6 +28,7 @@ import {
   type UrlField,
   type UserField,
 } from "@undb/table"
+import type { FormulaField } from "@undb/table/src/modules/schema/fields/variants/formula-field"
 import { getTableName } from "drizzle-orm"
 import { sql, type QueryCreator, type SelectExpression } from "kysely"
 import type { IRecordQueryBuilder } from "../qb"
@@ -86,6 +87,7 @@ export class RecordQueryCreatorVisitor implements IFieldVisitor {
   button(field: ButtonField): void {}
   duration(field: DurationField): void {}
   percentage(field: PercentageField): void {}
+  formula(field: FormulaField): void {}
   user(field: UserField): void {
     if (field.isMultiple) {
       const usersTable = getTableName(users)
diff --git a/packages/persistence/src/record/record-reference-visitor.ts b/packages/persistence/src/record/record-reference-visitor.ts
index 3432c7947..f577f1f6a 100644
--- a/packages/persistence/src/record/record-reference-visitor.ts
+++ b/packages/persistence/src/record/record-reference-visitor.ts
@@ -28,6 +28,7 @@ import {
   type UrlField,
   type UserField,
 } from "@undb/table"
+import type { FormulaField } from "@undb/table/src/modules/schema/fields/variants/formula-field"
 import type { SelectQueryBuilder } from "kysely"
 
 export class RecordReferenceVisitor implements IFieldVisitor {
@@ -89,6 +90,9 @@ export class RecordReferenceVisitor implements IFieldVisitor {
   reference(field: ReferenceField): void {
     this.qb = this.qb.leftJoin(field.id.value, `${this.table.id.value}.${ID_TYPE}`, `${field.id.value}.${ID_TYPE}`)
   }
+  formula(field: FormulaField): void {
+    throw new Error("Method not implemented.")
+  }
   percentage(field: PercentageField): void {
     throw new Error("Method not implemented.")
   }
diff --git a/packages/persistence/src/record/record-select-field-visitor.ts b/packages/persistence/src/record/record-select-field-visitor.ts
index a0f6ccde8..cd598ba9c 100644
--- a/packages/persistence/src/record/record-select-field-visitor.ts
+++ b/packages/persistence/src/record/record-select-field-visitor.ts
@@ -28,6 +28,7 @@ import {
   type UrlField,
   type UserField,
 } from "@undb/table"
+import type { FormulaField } from "@undb/table/src/modules/schema/fields/variants/formula-field"
 import { getTableName } from "drizzle-orm"
 import { sql, type ExpressionBuilder, type SelectExpression } from "kysely"
 import { users } from "../tables"
@@ -167,6 +168,9 @@ export class RecordSelectFieldVisitor implements IFieldVisitor {
     const select = `${field.referenceFieldId}.${field.id.value} as ${field.id.value}`
     this.addSelect(select)
   }
+  formula(field: FormulaField): void {
+    this.addSelect(this.getField(field.id.value))
+  }
   attachment(field: AttachmentField): void {
     this.addSelect(this.getField(field.id.value))
   }
diff --git a/packages/persistence/src/template/template-data.ts b/packages/persistence/src/template/template-data.ts
index 941abec9b..cbed464d8 100644
--- a/packages/persistence/src/template/template-data.ts
+++ b/packages/persistence/src/template/template-data.ts
@@ -1,5 +1,5 @@
 import { env } from "@undb/env"
-import { templates,type IBaseTemplateDTO,type ITemplateDTO } from "@undb/template"
+import { templates, type IBaseTemplateDTO, type ITemplateDTO } from "@undb/template"
 
 function getTemplateImage(folder: string, file: string) {
   return env.UNDB_BASE_URL + "/assets/templates/" + folder + "/" + file
@@ -389,16 +389,16 @@ export const templateData: ITemplateDTO[] = [
   },
 ]
 
-// if (env.NODE_ENV === "development") {
-//   templateData.unshift({
-//     id: "test",
-//     icon: "💼",
-//     name: "Test",
-//     categories: ["sales"],
-//     description: "A template for testing",
-//     template: {
-//       type: "base",
-//       template: templates.test as IBaseTemplateDTO,
-//     },
-//   })
-// }
+if (env.NODE_ENV === "development") {
+  templateData.unshift({
+    id: "test",
+    icon: "💼",
+    name: "Test",
+    categories: ["sales"],
+    description: "A template for testing",
+    template: {
+      type: "base",
+      template: templates.test as IBaseTemplateDTO,
+    },
+  })
+}
diff --git a/packages/persistence/src/underlying/undelying-table-field-updated.visitor.ts b/packages/persistence/src/underlying/undelying-table-field-updated.visitor.ts
index e8324286f..6e0df2ef7 100644
--- a/packages/persistence/src/underlying/undelying-table-field-updated.visitor.ts
+++ b/packages/persistence/src/underlying/undelying-table-field-updated.visitor.ts
@@ -27,6 +27,7 @@ import {
   type UrlField,
   type UserField,
 } from "@undb/table"
+import type { FormulaField } from "@undb/table/src/modules/schema/fields/variants/formula-field"
 import { sql } from "kysely"
 import { AbstractQBMutationVisitor } from "../abstract-qb.visitor"
 import type { IRecordQueryBuilder } from "../qb"
@@ -50,6 +51,7 @@ export class UnderlyingTableFieldUpdatedVisitor extends AbstractQBMutationVisito
   string(field: StringField): void {}
   number(field: NumberField): void {}
   rating(field: RatingField): void {}
+  formula(field: FormulaField): void {}
   select(field: SelectField): void {
     const prev = this.prev as SelectField
     const deletedOptions = Options.getDeletedOptions(prev.options, field.options)
diff --git a/packages/persistence/src/underlying/underlying-table-field.visitor.ts b/packages/persistence/src/underlying/underlying-table-field.visitor.ts
index 29e5d54af..4d5a7f22e 100644
--- a/packages/persistence/src/underlying/underlying-table-field.visitor.ts
+++ b/packages/persistence/src/underlying/underlying-table-field.visitor.ts
@@ -5,6 +5,7 @@ import {
   CreatedByField,
   DateField,
   DurationField,
+  FormulaField,
   ID_TYPE,
   JsonField,
   LongTextField,
@@ -180,4 +181,12 @@ export class UnderlyingTableFieldVisitor<TB extends CreateTableBuilder<any, any>
       this.addColumn(c)
     }
   }
+  formula(field: FormulaField): void {
+    const parse = (fn: string): string => {
+      return fn.replaceAll("{{", "").replaceAll("}}", "")
+    }
+    const exp = parse(field.fn)
+    const c = this.tb.addColumn(field.id.value, "text", (b) => b.generatedAlwaysAs(sql.raw(exp)).stored())
+    this.addColumn(c)
+  }
 }
diff --git a/packages/table/src/modules/records/record/record-visitor.interface.ts b/packages/table/src/modules/records/record/record-visitor.interface.ts
index 502c60ce1..c4a4c6add 100644
--- a/packages/table/src/modules/records/record/record-visitor.interface.ts
+++ b/packages/table/src/modules/records/record/record-visitor.interface.ts
@@ -17,6 +17,7 @@ import type { ICreatedAtFieldValueVisitor } from "../../schema/fields/variants/c
 import type { ICurrencyFieldValueVisitor } from "../../schema/fields/variants/currency-field"
 import type { IDurationFieldValueVisitor } from "../../schema/fields/variants/duration-field/duration-field-value.visitor"
 import type { IEmailFieldValueVisitor } from "../../schema/fields/variants/email-field"
+import type { IFormulaFieldValueVisitor } from "../../schema/fields/variants/formula-field/formula-field-value.visitor"
 import type { IIdFieldValueVisitor } from "../../schema/fields/variants/id-field"
 import type { IRatingFieldValueVisitor } from "../../schema/fields/variants/rating-field"
 import type { ISelectFieldValueVisitor } from "../../schema/fields/variants/select-field"
@@ -42,4 +43,5 @@ export type IRecordVisitor = IStringFieldValueVisitor &
   ICurrencyFieldValueVisitor &
   IDurationFieldValueVisitor &
   IPercentageFieldValueVisitor &
+  IFormulaFieldValueVisitor &
   ISpecVisitor
diff --git a/packages/table/src/modules/schema/fields/dto/create-field.dto.ts b/packages/table/src/modules/schema/fields/dto/create-field.dto.ts
index d08df1d52..7850230a8 100644
--- a/packages/table/src/modules/schema/fields/dto/create-field.dto.ts
+++ b/packages/table/src/modules/schema/fields/dto/create-field.dto.ts
@@ -9,6 +9,7 @@ import { createCurrencyFieldDTO, createTablesCurrencyFieldDTO } from "../variant
 import { createDateFieldDTO, createTablesDateFieldDTO } from "../variants/date-field/date-field.vo"
 import { createDurationFieldDTO } from "../variants/duration-field/duration-field.vo"
 import { createEmailFieldDTO, createTablesEmailFieldDTO } from "../variants/email-field/email-field.vo"
+import { createFormulaFieldDTO, createTablesFormulaFieldDTO } from "../variants/formula-field"
 import { createJsonFieldDTO, createTablesJsonFieldDTO } from "../variants/json-field/json-field.vo"
 import { createLongTextFieldDTO, createTablesLongTextFieldDTO } from "../variants/long-text-field/long-text-field.vo"
 import { createNumberFieldDTO, createTablesNumberFieldDTO } from "../variants/number-field/number-field.vo"
@@ -43,6 +44,7 @@ export const createFieldDTO = z.discriminatedUnion("type", [
   createButtonFieldDTO,
   createDurationFieldDTO,
   createPercentageFieldDTO,
+  createFormulaFieldDTO,
 ])
 
 export const createTablesFieldDTO = z.discriminatedUnion("type", [
@@ -63,6 +65,7 @@ export const createTablesFieldDTO = z.discriminatedUnion("type", [
   createTablesLongTextFieldDTO,
   createTablesUserFieldDTO,
   createTablesPercentageFieldDTO,
+  createTablesFormulaFieldDTO,
 ])
 
 export type ICreateFieldDTO = z.infer<typeof createFieldDTO>
diff --git a/packages/table/src/modules/schema/fields/dto/field.dto.ts b/packages/table/src/modules/schema/fields/dto/field.dto.ts
index 1c6950688..a348b4b19 100644
--- a/packages/table/src/modules/schema/fields/dto/field.dto.ts
+++ b/packages/table/src/modules/schema/fields/dto/field.dto.ts
@@ -22,6 +22,7 @@ import { createdAtFieldDTO } from "../variants/created-at-field"
 import { createdByFieldDTO } from "../variants/created-by-field"
 import { createCurrencyFieldDTO, currencyFieldDTO } from "../variants/currency-field"
 import { createEmailFieldDTO, emailFieldDTO } from "../variants/email-field"
+import { formulaFieldDTO } from "../variants/formula-field/formula-field.vo"
 import { idFieldDTO } from "../variants/id-field/id-field.vo"
 import { createLongTextFieldDTO, longTextFieldDTO } from "../variants/long-text-field"
 import { createNumberFieldDTO, numberFieldDTO } from "../variants/number-field/number-field.vo"
@@ -55,6 +56,7 @@ export const fieldDTO = z.discriminatedUnion("type", [
   buttonFieldDTO,
   durationFieldDTO,
   percentageFieldDTO,
+  formulaFieldDTO,
 ])
 
 export type IFieldDTO = z.infer<typeof fieldDTO>
diff --git a/packages/table/src/modules/schema/fields/dto/update-field.dto.ts b/packages/table/src/modules/schema/fields/dto/update-field.dto.ts
index f8b2d0468..b1b719426 100644
--- a/packages/table/src/modules/schema/fields/dto/update-field.dto.ts
+++ b/packages/table/src/modules/schema/fields/dto/update-field.dto.ts
@@ -9,6 +9,7 @@ import { updateCurrencyFieldDTO } from "../variants/currency-field"
 import { updateDateFieldDTO } from "../variants/date-field/date-field.vo"
 import { updateDurationFieldDTO } from "../variants/duration-field/duration-field.vo"
 import { updateEmailFieldDTO } from "../variants/email-field"
+import { updateFormulaFieldDTO } from "../variants/formula-field/formula-field.vo"
 import { updateIdFieldDTO } from "../variants/id-field/id-field.vo"
 import { updateJsonFieldDTO } from "../variants/json-field/json-field.vo"
 import { updateNumberFieldDTO } from "../variants/number-field/number-field.vo"
@@ -45,6 +46,7 @@ export const updateFieldDTO = z.discriminatedUnion("type", [
   updateButtonFieldDTO,
   updateDurationFieldDTO,
   updatePercentageFieldDTO,
+  updateFormulaFieldDTO,
 ])
 
 export type IUpdateFieldDTO = z.infer<typeof updateFieldDTO>
diff --git a/packages/table/src/modules/schema/fields/field-value.factory.ts b/packages/table/src/modules/schema/fields/field-value.factory.ts
index f7f5355e7..ce1b9bbba 100644
--- a/packages/table/src/modules/schema/fields/field-value.factory.ts
+++ b/packages/table/src/modules/schema/fields/field-value.factory.ts
@@ -23,6 +23,7 @@ import { CheckboxFieldValue } from "./variants/checkbox-field"
 import { CreatedByFieldValue } from "./variants/created-by-field"
 import { CurrencyFieldValue } from "./variants/currency-field"
 import { EmailFieldValue } from "./variants/email-field"
+import { FormulaFieldValue } from "./variants/formula-field/formula-field-value.vo"
 import { LongTextFieldValue } from "./variants/long-text-field/long-text-field-value.vo"
 import { PercentageFieldValue } from "./variants/percentage-field" // 新增导入
 import { RatingFieldValue } from "./variants/rating-field"
@@ -68,6 +69,7 @@ export class FieldValueFactory {
       .with("updatedBy", () => Some(new UpdatedByFieldValue(value as string)))
       .with("reference", () => Some(new ReferenceFieldValue(value as string[])))
       .with("rollup", () => Some(new RollupFieldValue(value as number | Date)))
+      .with("formula", () => Some(new FormulaFieldValue(value as any)))
       .with("select", () => Some(new SelectFieldValue(SelectFieldValue.parseValue(value, field as SelectField))))
       .with("email", () => Some(new EmailFieldValue(value as string)))
       .with("url", () => Some(new UrlFieldValue(value as string)))
diff --git a/packages/table/src/modules/schema/fields/field.aggregate.ts b/packages/table/src/modules/schema/fields/field.aggregate.ts
index 574242369..7e6839378 100644
--- a/packages/table/src/modules/schema/fields/field.aggregate.ts
+++ b/packages/table/src/modules/schema/fields/field.aggregate.ts
@@ -6,6 +6,7 @@ import { checkboxFieldAggregate } from "./variants/checkbox-field/checkbox-field
 import { currencyFieldAggregate } from "./variants/currency-field/currency-field.aggregate"
 import { durationFieldAggregate } from "./variants/duration-field/duration-field.aggregate"
 import { emailFieldAggregate } from "./variants/email-field/email-field.aggregate"
+import { formulaFieldAggregate } from "./variants/formula-field/formula-field.aggregate"
 import { jsonFieldAggregate } from "./variants/json-field/json-field.aggregate"
 import { longTextFieldAggregate } from "./variants/long-text-field/long-text-field.aggregate"
 import { percentageFieldAggregate } from "./variants/percentage-field/percentage-field.aggregate"
@@ -30,5 +31,6 @@ export const fieldAggregate = stringFieldAggregate
   .or(currencyFieldAggregate)
   .or(durationFieldAggregate)
   .or(percentageFieldAggregate)
+  .or(formulaFieldAggregate)
 
 export type IFieldAggregate = z.infer<typeof fieldAggregate>
diff --git a/packages/table/src/modules/schema/fields/field.factory.ts b/packages/table/src/modules/schema/fields/field.factory.ts
index 1ef657681..c807b70d6 100644
--- a/packages/table/src/modules/schema/fields/field.factory.ts
+++ b/packages/table/src/modules/schema/fields/field.factory.ts
@@ -13,6 +13,7 @@ import { CurrencyField } from "./variants/currency-field"
 import { DateField } from "./variants/date-field/date-field.vo"
 import { DurationField } from "./variants/duration-field/duration-field.vo"
 import { EmailField } from "./variants/email-field/email-field.vo"
+import { FormulaField } from "./variants/formula-field/formula-field.vo"
 import { IdField } from "./variants/id-field/id-field.vo"
 import { JsonField } from "./variants/json-field/json-field.vo"
 import { LongTextField } from "./variants/long-text-field"
@@ -53,7 +54,8 @@ export class FieldFactory {
       .with({ type: "currency" }, (dto) => new CurrencyField(dto))
       .with({ type: "button" }, (dto) => new ButtonField(dto))
       .with({ type: "duration" }, (dto) => new DurationField(dto))
-      .with({ type: "percentage" }, (dto) => new PercentageField(dto)) // 新增匹配
+      .with({ type: "percentage" }, (dto) => new PercentageField(dto))
+      .with({ type: "formula" }, (dto) => new FormulaField(dto))
       .exhaustive()
   }
 
@@ -76,7 +78,8 @@ export class FieldFactory {
       .with({ type: "currency" }, (dto) => CurrencyField.create(dto))
       .with({ type: "button" }, (dto) => ButtonField.create(dto))
       .with({ type: "duration" }, (dto) => DurationField.create(dto))
-      .with({ type: "percentage" }, (dto) => PercentageField.create(dto)) // 新增匹配
+      .with({ type: "percentage" }, (dto) => PercentageField.create(dto))
+      .with({ type: "formula" }, (dto) => FormulaField.create(dto))
       .otherwise(() => {
         throw new Error("Field type creation not supported")
       })
diff --git a/packages/table/src/modules/schema/fields/field.type.ts b/packages/table/src/modules/schema/fields/field.type.ts
index 4a380c56a..1c44745c9 100644
--- a/packages/table/src/modules/schema/fields/field.type.ts
+++ b/packages/table/src/modules/schema/fields/field.type.ts
@@ -95,6 +95,9 @@ import type {
   IEmailFieldConditionSchema,
   IEmailFieldConstraint,
 } from "./variants/email-field"
+import type { FormulaFieldValue } from "./variants/formula-field/formula-field-value.vo"
+import type { IFormulaFieldConditionSchema } from "./variants/formula-field/formula-field.condition"
+import type { FORMULA_TYPE, FormulaField, IFormulaFieldOption } from "./variants/formula-field/formula-field.vo"
 import type { ID_TYPE, IIdFieldConditionSchema, IdField, IdFieldValue } from "./variants/id-field"
 import {
   LONGTEXT_TYPE,
@@ -164,6 +167,7 @@ export type Field =
   | ButtonField
   | DurationField
   | PercentageField
+  | FormulaField
 
 export type SystemField =
   | IdField
@@ -200,6 +204,7 @@ export type FieldValue =
   | ButtonFieldValue
   | DurationFieldValue
   | PercentageFieldValue
+  | FormulaFieldValue
 
 export type MutableFieldValue =
   | StringFieldValue
@@ -244,6 +249,7 @@ export type FieldType =
   | typeof BUTTON_TYPE
   | typeof DURATION_TYPE
   | typeof PERCENTAGE_TYPE
+  | typeof FORMULA_TYPE
 
 export type NoneSystemFieldType = Exclude<
   FieldType,
@@ -278,11 +284,12 @@ export type IFieldConditionSchema =
   | ICurrencyFieldConditionSchema
   | IDurationFieldConditionSchema
   | IPercentageFieldConditionSchema
+  | IFormulaFieldConditionSchema
   | z.ZodUnion<any>
 
 export type SystemFieldType = Exclude<FieldType, NoneSystemFieldType>
 
-export type IFilterableFieldType = Exclude<FieldType, "reference" | "rollup" | "attachment" | "button">
+export type IFilterableFieldType = Exclude<FieldType, "reference" | "rollup" | "attachment" | "button" | "formula">
 
 export type IFieldConstraint =
   | IStringFieldConstraint
@@ -308,5 +315,6 @@ export type IFieldOption =
   | ISelectFieldOption
   | IButtonFieldOption
   | ICurrencyFieldOption
+  | IFormulaFieldOption
 
 export type IFieldMacro = IUserFieldMacro
diff --git a/packages/table/src/modules/schema/fields/field.util.ts b/packages/table/src/modules/schema/fields/field.util.ts
index 55a2b7382..66e027b3e 100644
--- a/packages/table/src/modules/schema/fields/field.util.ts
+++ b/packages/table/src/modules/schema/fields/field.util.ts
@@ -108,6 +108,7 @@ const sortableFieldTypes: FieldType[] = [
   "url",
   "duration",
   "percentage",
+  "formula",
 ] as const
 
 export function isFieldSortable(type: FieldType): boolean {
@@ -173,6 +174,7 @@ export const filterableFieldTypes = [
   "currency",
   "duration",
   "percentage",
+  "formula",
 ] as const
 
 export const getIsFilterableFieldType = (type: FieldType): type is IFilterableFieldType => {
@@ -200,7 +202,8 @@ export const mutableFieldTypes = [
 
 export const getIsMutableFieldType = (type: FieldType) => mutableFieldTypes.includes(type as any)
 
-export const allFieldTypes: FieldType[] = [...systemFieldTypes, ...fieldTypes] as const
+// TODO: move formula to fieldTypes
+export const allFieldTypes: FieldType[] = [...systemFieldTypes, ...fieldTypes, "formula"] as const
 
 export const fieldsCanBeRollup: FieldType[] = [
   "number",
diff --git a/packages/table/src/modules/schema/fields/field.visitor.ts b/packages/table/src/modules/schema/fields/field.visitor.ts
index 6ccb38205..d920aacab 100644
--- a/packages/table/src/modules/schema/fields/field.visitor.ts
+++ b/packages/table/src/modules/schema/fields/field.visitor.ts
@@ -8,6 +8,7 @@ import type { CurrencyField } from "./variants/currency-field"
 import type { DateField } from "./variants/date-field"
 import type { DurationField } from "./variants/duration-field/duration-field.vo"
 import type { EmailField } from "./variants/email-field"
+import type { FormulaField } from "./variants/formula-field/formula-field.vo"
 import type { IdField } from "./variants/id-field/id-field.vo"
 import type { JsonField } from "./variants/json-field"
 import type { LongTextField } from "./variants/long-text-field"
@@ -46,6 +47,7 @@ export interface IFieldVisitor {
   button(field: ButtonField): void
   duration(field: DurationField): void
   percentage(field: PercentageField): void
+  formula(field: FormulaField): void
 
   reference(field: ReferenceField): void
   rollup(field: RollupField): void
diff --git a/packages/table/src/modules/schema/fields/variants/formula-field/formula-field-value.visitor.ts b/packages/table/src/modules/schema/fields/variants/formula-field/formula-field-value.visitor.ts
new file mode 100644
index 000000000..b4c00cae2
--- /dev/null
+++ b/packages/table/src/modules/schema/fields/variants/formula-field/formula-field-value.visitor.ts
@@ -0,0 +1,9 @@
+import type { FormulaEqual, FormulaGT, FormulaGTE, FormulaLT, FormulaLTE } from "./formula-field.specification"
+
+export interface IFormulaFieldValueVisitor {
+  formulaEqual(s: FormulaEqual): void
+  formulaGT(s: FormulaGT): void
+  formulaGTE(s: FormulaGTE): void
+  formulaLT(s: FormulaLT): void
+  formulaLTE(s: FormulaLTE): void
+}
diff --git a/packages/table/src/modules/schema/fields/variants/formula-field/formula-field-value.vo.ts b/packages/table/src/modules/schema/fields/variants/formula-field/formula-field-value.vo.ts
new file mode 100644
index 000000000..fff2a2551
--- /dev/null
+++ b/packages/table/src/modules/schema/fields/variants/formula-field/formula-field-value.vo.ts
@@ -0,0 +1,15 @@
+import { z } from "@undb/zod"
+import { FieldValueObject } from "../../field-value"
+
+export const formulaFieldValue = z.any()
+export type IFormulaFieldValue = z.infer<typeof formulaFieldValue>
+
+export class FormulaFieldValue extends FieldValueObject<IFormulaFieldValue> {
+  constructor(value: IFormulaFieldValue) {
+    super({ value: value ?? null })
+  }
+
+  isEmpty() {
+    return this.props?.value === null || this.props?.value === undefined
+  }
+}
diff --git a/packages/table/src/modules/schema/fields/variants/formula-field/formula-field.aggregate.ts b/packages/table/src/modules/schema/fields/variants/formula-field/formula-field.aggregate.ts
new file mode 100644
index 000000000..38fa66c76
--- /dev/null
+++ b/packages/table/src/modules/schema/fields/variants/formula-field/formula-field.aggregate.ts
@@ -0,0 +1,15 @@
+import { z } from "@undb/zod"
+
+export const formulaFieldAggregate = z.enum([
+  //
+  // "sum",
+  // "avg",
+  // "min",
+  // "max",
+  "count_empty",
+  "count_uniq",
+  "count_not_empty",
+  "percent_empty",
+  "percent_not_empty",
+  "percent_uniq",
+])
diff --git a/packages/table/src/modules/schema/fields/variants/formula-field/formula-field.condition.ts b/packages/table/src/modules/schema/fields/variants/formula-field/formula-field.condition.ts
new file mode 100644
index 000000000..144dda24f
--- /dev/null
+++ b/packages/table/src/modules/schema/fields/variants/formula-field/formula-field.condition.ts
@@ -0,0 +1,21 @@
+import { z } from "@undb/zod"
+import { createBaseConditionSchema } from "../../condition/base.condition"
+
+export function createFormulaFieldCondition<ItemType extends z.ZodTypeAny>(itemType: ItemType) {
+  const base = createBaseConditionSchema(itemType)
+  return z.union([
+    z.object({ op: z.literal("eq"), value: z.number() }).merge(base),
+    z.object({ op: z.literal("neq"), value: z.number() }).merge(base),
+    z.object({ op: z.literal("gt"), value: z.number() }).merge(base),
+    z.object({ op: z.literal("gte"), value: z.number() }).merge(base),
+    z.object({ op: z.literal("lt"), value: z.number() }).merge(base),
+    z.object({ op: z.literal("lte"), value: z.number() }).merge(base),
+    z.object({ op: z.literal("is_empty"), value: z.undefined() }).merge(base),
+    z.object({ op: z.literal("is_not_empty"), value: z.undefined() }).merge(base),
+  ])
+}
+
+export type IFormulaFieldConditionSchema = ReturnType<typeof createFormulaFieldCondition>
+export type IFormulaFieldCondition = z.infer<IFormulaFieldConditionSchema>
+
+export type IFormulaFieldConditionOp = IFormulaFieldCondition["op"]
diff --git a/packages/table/src/modules/schema/fields/variants/formula-field/formula-field.specification.ts b/packages/table/src/modules/schema/fields/variants/formula-field/formula-field.specification.ts
new file mode 100644
index 000000000..c9efaee11
--- /dev/null
+++ b/packages/table/src/modules/schema/fields/variants/formula-field/formula-field.specification.ts
@@ -0,0 +1,107 @@
+import { Ok, type Result } from "@undb/domain"
+import { isNumber } from "radash"
+import type { IRecordVisitor, RecordDO } from "../../../../records"
+import { RecordComositeSpecification } from "../../../../records/record/record.composite-specification"
+import type { FieldId } from "../../field-id.vo"
+import { FormulaFieldValue } from "./formula-field-value.vo"
+
+export class FormulaEqual extends RecordComositeSpecification {
+  constructor(
+    readonly value: number | null,
+    readonly fieldId: FieldId,
+  ) {
+    super(fieldId)
+  }
+  isSatisfiedBy(t: RecordDO): boolean {
+    const value = t.getValue(this.fieldId)
+    return value.mapOr(false, (v) => isNumber(v.value) && v.value == this.value)
+  }
+  mutate(t: RecordDO): Result<RecordDO, string> {
+    t.values.setValue(this.fieldId, new FormulaFieldValue(this.value))
+    return Ok(t)
+  }
+  accept(v: IRecordVisitor): Result<void, string> {
+    v.formulaEqual(this)
+    return Ok(undefined)
+  }
+}
+
+export class FormulaGT extends RecordComositeSpecification {
+  constructor(
+    readonly value: number,
+    readonly fieldId: FieldId,
+  ) {
+    super(fieldId)
+  }
+  isSatisfiedBy(t: RecordDO): boolean {
+    const value = t.getValue(this.fieldId)
+    return value.mapOr(false, (v) => isNumber(v.value) && v.value > this.value)
+  }
+  mutate(t: RecordDO): Result<RecordDO, string> {
+    throw new Error("Method not implemented.")
+  }
+  accept(v: IRecordVisitor): Result<void, string> {
+    v.formulaGT(this)
+    return Ok(undefined)
+  }
+}
+
+export class FormulaGTE extends RecordComositeSpecification {
+  constructor(
+    readonly value: number,
+    readonly fieldId: FieldId,
+  ) {
+    super(fieldId)
+  }
+  isSatisfiedBy(t: RecordDO): boolean {
+    const value = t.getValue(this.fieldId)
+    return value.mapOr(false, (v) => isNumber(v.value) && v.value >= this.value)
+  }
+  mutate(t: RecordDO): Result<RecordDO, string> {
+    throw new Error("Method not implemented.")
+  }
+  accept(v: IRecordVisitor): Result<void, string> {
+    v.formulaGTE(this)
+    return Ok(undefined)
+  }
+}
+
+export class FormulaLT extends RecordComositeSpecification {
+  constructor(
+    readonly value: number,
+    readonly fieldId: FieldId,
+  ) {
+    super(fieldId)
+  }
+  isSatisfiedBy(t: RecordDO): boolean {
+    const value = t.getValue(this.fieldId)
+    return value.mapOr(false, (v) => isNumber(v.value) && v.value < this.value)
+  }
+  mutate(t: RecordDO): Result<RecordDO, string> {
+    throw new Error("Method not implemented.")
+  }
+  accept(v: IRecordVisitor): Result<void, string> {
+    v.formulaLT(this)
+    return Ok(undefined)
+  }
+}
+
+export class FormulaLTE extends RecordComositeSpecification {
+  constructor(
+    readonly value: number,
+    readonly fieldId: FieldId,
+  ) {
+    super(fieldId)
+  }
+  isSatisfiedBy(t: RecordDO): boolean {
+    const value = t.getValue(this.fieldId)
+    return value.mapOr(false, (v) => isNumber(v.value) && v.value <= this.value)
+  }
+  mutate(t: RecordDO): Result<RecordDO, string> {
+    throw new Error("Method not implemented.")
+  }
+  accept(v: IRecordVisitor): Result<void, string> {
+    v.formulaLTE(this)
+    return Ok(undefined)
+  }
+}
diff --git a/packages/table/src/modules/schema/fields/variants/formula-field/formula-field.vo.ts b/packages/table/src/modules/schema/fields/variants/formula-field/formula-field.vo.ts
new file mode 100644
index 000000000..3f19fd3a7
--- /dev/null
+++ b/packages/table/src/modules/schema/fields/variants/formula-field/formula-field.vo.ts
@@ -0,0 +1,102 @@
+import { Option, Some } from "@undb/domain"
+import { z } from "@undb/zod"
+import { match } from "ts-pattern"
+import type { RecordComositeSpecification } from "../../../../records/record/record.composite-specification"
+import { fieldId, FieldIdVo } from "../../field-id.vo"
+import type { IFieldVisitor } from "../../field.visitor"
+import { AbstractField, baseFieldDTO, createBaseFieldDTO } from "../abstract-field.vo"
+import { StringEmpty } from "../string-field"
+import { FormulaFieldValue } from "./formula-field-value.vo"
+import { formulaFieldAggregate } from "./formula-field.aggregate"
+import {
+  createFormulaFieldCondition,
+  type IFormulaFieldCondition,
+  type IFormulaFieldConditionSchema,
+} from "./formula-field.condition"
+import { FormulaEqual, FormulaGT, FormulaGTE, FormulaLT, FormulaLTE } from "./formula-field.specification"
+
+export const FORMULA_TYPE = "formula" as const
+
+const fn = z.string()
+
+export const formulaFieldOption = z.object({
+  fn,
+})
+
+export type IFormulaFieldOption = z.infer<typeof formulaFieldOption>
+
+export const createFormulaFieldDTO = createBaseFieldDTO.extend({
+  type: z.literal(FORMULA_TYPE),
+  option: formulaFieldOption,
+})
+
+export const createTablesFormulaFieldDTO = createFormulaFieldDTO
+
+export type ICreateFormulaFieldDTO = z.infer<typeof createFormulaFieldDTO>
+
+export const updateFormulaFieldDTO = createFormulaFieldDTO.setKey("id", fieldId)
+export type IUpdateFormulaFieldDTO = z.infer<typeof updateFormulaFieldDTO>
+
+export const formulaFieldDTO = baseFieldDTO.extend({
+  type: z.literal(FORMULA_TYPE),
+  option: formulaFieldOption,
+})
+
+export type IFormulaFieldDTO = z.infer<typeof formulaFieldDTO>
+
+export class FormulaField extends AbstractField<FormulaFieldValue, undefined, IFormulaFieldOption> {
+  constructor(dto: IFormulaFieldDTO) {
+    super(dto)
+    if (dto.option) {
+      this.option = Some(dto.option)
+    }
+  }
+
+  static create(dto: ICreateFormulaFieldDTO) {
+    const field = new FormulaField({ ...dto, id: FieldIdVo.fromStringOrCreate(dto.id).value })
+    return field
+  }
+
+  override computed = true
+
+  override type = FORMULA_TYPE
+
+  override accept(visitor: IFieldVisitor): void {
+    visitor.formula(this)
+  }
+
+  override get valueSchema() {
+    return z.any()
+  }
+
+  override getSpec(condition: IFormulaFieldCondition) {
+    const spec = match(condition)
+      .with({ op: "eq" }, ({ value }) => new FormulaEqual(value, this.id))
+      .with({ op: "neq" }, ({ value }) => new FormulaEqual(value, this.id).not())
+      .with({ op: "gt" }, ({ value }) => new FormulaGT(value, this.id))
+      .with({ op: "gte" }, ({ value }) => new FormulaGTE(value, this.id))
+      .with({ op: "lt" }, ({ value }) => new FormulaLT(value, this.id))
+      .with({ op: "lte" }, ({ value }) => new FormulaLTE(value, this.id))
+      .with({ op: "is_empty" }, () => new StringEmpty(this.id))
+      .with({ op: "is_not_empty" }, () => new StringEmpty(this.id).not())
+      .exhaustive()
+
+    return Option(spec)
+  }
+
+  protected override getConditionSchema(optionType: z.ZodTypeAny): IFormulaFieldConditionSchema {
+    return createFormulaFieldCondition(optionType)
+  }
+
+  override getMutationSpec(value: FormulaFieldValue): Option<RecordComositeSpecification> {
+    return Some(new FormulaEqual(value.value ?? null, this.id))
+  }
+
+  override get aggregate() {
+    return formulaFieldAggregate
+  }
+
+  get fn() {
+    return this.option.mapOr("", (o) => o.fn)
+  }
+}
diff --git a/packages/table/src/modules/schema/fields/variants/formula-field/index.ts b/packages/table/src/modules/schema/fields/variants/formula-field/index.ts
new file mode 100644
index 000000000..099c93305
--- /dev/null
+++ b/packages/table/src/modules/schema/fields/variants/formula-field/index.ts
@@ -0,0 +1,5 @@
+export * from "./formula-field-value.visitor"
+export * from "./formula-field-value.vo"
+export * from "./formula-field.condition"
+export * from "./formula-field.specification"
+export * from "./formula-field.vo"
diff --git a/packages/table/src/modules/schema/fields/variants/index.ts b/packages/table/src/modules/schema/fields/variants/index.ts
index 7b5e8944c..700e4e810 100644
--- a/packages/table/src/modules/schema/fields/variants/index.ts
+++ b/packages/table/src/modules/schema/fields/variants/index.ts
@@ -10,6 +10,7 @@ export * from "./currency-field"
 export * from "./date-field"
 export * from "./duration-field"
 export * from "./email-field"
+export * from "./formula-field"
 export * from "./id-field"
 export * from "./json-field"
 export * from "./long-text-field"
diff --git a/packages/template/src/dto/template-schema.dto.ts b/packages/template/src/dto/template-schema.dto.ts
index c6471bec0..d16da2814 100644
--- a/packages/template/src/dto/template-schema.dto.ts
+++ b/packages/template/src/dto/template-schema.dto.ts
@@ -1,5 +1,5 @@
 import { baseNameSchema } from "@undb/base"
-import { dashboardIdSchema, dashboardLayoutsSchema, dashboardNameSchema, dashboardWidgetsSchema } from "@undb/dashboard"
+import { dashboardIdSchema,dashboardLayoutsSchema,dashboardNameSchema,dashboardWidgetsSchema } from "@undb/dashboard"
 import {
   createFormWithoutNameDTO,
   createTablesAttachmentFieldDTO,
@@ -9,6 +9,7 @@ import {
   createTablesDateFieldDTO,
   createTablesDurationFieldDTO,
   createTablesEmailFieldDTO,
+  createTablesFormulaFieldDTO,
   createTablesJsonFieldDTO,
   createTablesLongTextFieldDTO,
   createTablesNumberFieldDTO,
@@ -53,6 +54,7 @@ const createTemplateFieldDTO = z.discriminatedUnion("type", [
   createTablesPercentageFieldDTO.omit(omitName),
   createTablesDurationFieldDTO.omit(omitName),
   createTablesLongTextFieldDTO.omit(omitName),
+  createTablesFormulaFieldDTO.omit(omitName),
 ])
 
 const templateSchemaDTO = z.record(fieldName, createTemplateFieldDTO)
diff --git a/packages/template/src/templates/eventPlaning.base.json b/packages/template/src/templates/eventPlaning.base.json
index b496b9c10..2343dde2d 100644
--- a/packages/template/src/templates/eventPlaning.base.json
+++ b/packages/template/src/templates/eventPlaning.base.json
@@ -881,23 +881,17 @@
           },
           "Actual": {
             "id": "actual",
-            "type": "currency",
-            "option": {
-              "symbol": "$"
-            }
+            "type": "number"
           },
           "Quantity": {
             "id": "quantity",
-            "type": "currency",
-            "option": {
-              "symbol": "$"
-            }
+            "type": "number"
           },
           "Total cost": {
             "id": "totalCost",
-            "type": "currency",
+            "type": "formula",
             "option": {
-              "symbol": "$"
+              "fn": "{{ actual }} * {{ quantity }}"
             }
           },
           "Total budget": {
diff --git a/packages/template/src/templates/test.base.json b/packages/template/src/templates/test.base.json
index db43ccf0a..7baae825d 100644
--- a/packages/template/src/templates/test.base.json
+++ b/packages/template/src/templates/test.base.json
@@ -35,18 +35,44 @@
                 "tableName": "Table2"
               }
             }
+          },
+          "Count1": {
+            "id": "count1",
+            "type": "number"
+          },
+          "Count2": {
+            "id": "count2",
+            "type": "number"
+          },
+          "Sum": {
+            "id": "sum",
+            "type": "formula",
+            "option": {
+              "fn": "{{count1}} + {{count2}}"
+            }
+          },
+          "Sum2": {
+            "id": "sum2",
+            "type": "formula",
+            "option": {
+              "fn": "{{count1}} + {{sum}}"
+            }
           }
         },
         "records": [
           {
             "Title": "1-1",
             "Ref2": ["1", "2"],
-            "Ref22": ["1", "2"]
+            "Ref22": ["1", "2"],
+            "Count1": 1,
+            "Count2": 2
           },
           {
             "Title": "1-2",
             "Ref2": ["2"],
-            "Ref22": ["2"]
+            "Ref22": ["2"],
+            "Count1": 2,
+            "Count2": 3
           }
         ]
       },

From 233004da3a44b56ff16d9291df70ecfec955a6b1 Mon Sep 17 00:00:00 2001
From: GitHub actions <noreply@github.com>
Date: Thu, 24 Oct 2024 08:03:37 +0000
Subject: [PATCH 10/10] Prepare release v1.0.0-110

---
 CHANGELOG.md | 2 ++
 package.json | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c611b095a..6b0fbb4b4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,7 @@
 # Changelog
 
+## v1.0.0-110
+
 ## v1.0.0-109
 
 
diff --git a/package.json b/package.json
index 12a2d234d..5e31400b4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "undb",
-  "version": "1.0.0-109",
+  "version": "1.0.0-110",
   "private": true,
   "scripts": {
     "build": "NODE_ENV=production bun --bun turbo build",