From ec1fccfb6205c330e3445655ceaecf18503eadca Mon Sep 17 00:00:00 2001
From: nichenqin <nichenqin@hotmail.com>
Date: Thu, 5 Dec 2024 12:04:21 +0800
Subject: [PATCH] chore: view widget readonly

---
 .../blocks/aggregate/aggregate.svelte         |  3 +-
 .../calendar-view-toolbar.svelte              |  2 +-
 .../dashboard/dashboard-widget-table.gql      | 33 ----------
 .../blocks/dashboard/dashboard-widget.svelte  | 24 ++++++--
 .../blocks/dashboard/dashboard-widgets.svelte |  3 +
 .../blocks/share/share-calendar-view.svelte   |  2 +-
 .../blocks/share/share-gallery-view.svelte    |  2 +-
 .../blocks/share/share-grid-view.svelte       |  2 +-
 .../blocks/share/share-kanban-view.svelte     |  2 +-
 .../blocks/share/share-list-view.svelte       |  2 +-
 .../blocks/share/share-pivot-view.svelte      |  2 +-
 .../table-tools/share-table-tools.svelte      |  2 +-
 .../blocks/table-tools/table-tools.svelte     |  2 +-
 .../blocks/template/template-preview.svelte   | 46 ++++++++++++++
 .../view-widget/view-widget-button.svelte     |  2 +
 .../view-widget/view-widget-sheet.svelte      |  3 +-
 .../lib/components/blocks/view/view.svelte    |  2 +-
 .../components/blocks/widget/widget.svelte    | 60 ++++++++++---------
 .../dashboards/[dashboardId]/+page.svelte     | 48 +++++++--------
 packages/dashboard/src/dashboard.factory.ts   |  5 +-
 .../dashboard-layout.specification.ts         | 12 +++-
 .../src/value-objects/dashboard-layout.vo.ts  | 57 ++++++++++++++++++
 .../src/value-objects/dashboard-widgets.vo.ts | 16 +++++
 .../src/data-service.registery.ts             |  3 +
 .../src/dashboard/dashboard.mutate-visitor.ts | 14 +++--
 .../src/dashboard/dashboard.repository.ts     |  1 +
 packages/table/package.json                   |  1 +
 packages/template/src/templates/hr.base.json  | 16 +++++
 28 files changed, 254 insertions(+), 113 deletions(-)
 delete mode 100644 apps/frontend/src/lib/components/blocks/dashboard/dashboard-widget-table.gql

diff --git a/apps/frontend/src/lib/components/blocks/aggregate/aggregate.svelte b/apps/frontend/src/lib/components/blocks/aggregate/aggregate.svelte
index 9c0a3f918..d4d78ec88 100644
--- a/apps/frontend/src/lib/components/blocks/aggregate/aggregate.svelte
+++ b/apps/frontend/src/lib/components/blocks/aggregate/aggregate.svelte
@@ -7,13 +7,14 @@
   import { TriangleAlertIcon } from "lucide-svelte"
   import * as Tooltip from "$lib/components/ui/tooltip"
   import type { TableDo } from "@undb/table"
-    import { getDataService, getIsLocal } from "$lib/store/data-service.store"
+  import { getDataService, getIsLocal } from "$lib/store/data-service.store"
 
   export let tableId: string | undefined
   export let table: TableDo | undefined
   export let viewId: string | undefined
   export let shareId: string | undefined
   export let ignoreView: boolean = false
+  export let readonly = false
 
   export let widget: IWidgetDTO
   export let aggregate: IAggregate
diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-toolbar.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-toolbar.svelte
index 979cd5ac6..04be521f3 100644
--- a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-toolbar.svelte
+++ b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-toolbar.svelte
@@ -41,6 +41,6 @@
       <ShareButton type="view" id={$viewId} size="xs" />
     {/if}
 
-    <ViewWidgetButton size="xs" />
+    <ViewWidgetButton size="xs" {readonly} />
   </div>
 </div>
diff --git a/apps/frontend/src/lib/components/blocks/dashboard/dashboard-widget-table.gql b/apps/frontend/src/lib/components/blocks/dashboard/dashboard-widget-table.gql
deleted file mode 100644
index 6e264a57b..000000000
--- a/apps/frontend/src/lib/components/blocks/dashboard/dashboard-widget-table.gql
+++ /dev/null
@@ -1,33 +0,0 @@
-query GetDashboardWidgetTable($tableId: ID!) {
-  table(id: $tableId) {
-    id
-    name
-
-    base {
-      id
-      name
-    }
-
-    schema {
-      id
-      name
-      type
-      defaultValue
-      display
-      constraint
-      option
-      metadata
-    }
-
-    views {
-      id
-      name
-      type
-      filter
-      color
-      sort
-      aggregate
-      fields
-    }
-  }
-}
diff --git a/apps/frontend/src/lib/components/blocks/dashboard/dashboard-widget.svelte b/apps/frontend/src/lib/components/blocks/dashboard/dashboard-widget.svelte
index c12a69a54..ac3e26e9c 100644
--- a/apps/frontend/src/lib/components/blocks/dashboard/dashboard-widget.svelte
+++ b/apps/frontend/src/lib/components/blocks/dashboard/dashboard-widget.svelte
@@ -1,28 +1,40 @@
 <script lang="ts">
   import { TableFactory, type IWidgetDTO } from "@undb/table"
-  import { GetDashboardWidgetShareTableStore, GetDashboardWidgetTableStore } from "$houdini"
+  import { GetDashboardWidgetShareTableStore } from "$houdini"
   import Widget from "../widget/widget.svelte"
   import { setTable } from "$lib/store/table.store"
   import { writable } from "svelte/store"
+  import { getIsLocal } from "$lib/store/data-service.store"
+  import { getDataService } from "$lib/store/data-service.store"
+  import { createQuery } from "@tanstack/svelte-query"
 
   export let tableId: string | undefined
   export let shareId: string | undefined = undefined
+  export let readonly = false
   export let widget: IWidgetDTO
   export let movePointerDown: ((e: Event) => void) | undefined = undefined
   export let resizePointerDown: ((e: Event) => void) | undefined = undefined
 
-  const store = new GetDashboardWidgetTableStore()
+  const isLocal = getIsLocal()
+
   const shareStore = new GetDashboardWidgetShareTableStore()
 
   $: if (tableId) {
     if (shareId) {
       shareStore.fetch({ variables: { shareId, tableId } })
-    } else {
-      store.fetch({ variables: { tableId } })
     }
   }
 
-  $: table = shareId ? $shareStore.data?.tableByShareDashboard : $store.data?.table
+  const getTable = createQuery({
+    queryFn: async () => {
+      const dataService = await getDataService(isLocal)
+      return dataService.table.getTable({ tableId: tableId! })
+    },
+    queryKey: ["dashboard-widget-table", tableId],
+    enabled: !!tableId && !shareId,
+  })
+
+  $: table = shareId ? $shareStore.data?.tableByShareDashboard : $getTable.data
   $: tableDo = table ? new TableFactory().fromJSON(table) : undefined
 
   $: if (tableDo) {
@@ -30,4 +42,4 @@
   }
 </script>
 
-<Widget table={tableDo} {widget} {tableId} {shareId} {movePointerDown} {resizePointerDown} />
+<Widget table={tableDo} {widget} {tableId} {shareId} {movePointerDown} {resizePointerDown} {readonly} />
diff --git a/apps/frontend/src/lib/components/blocks/dashboard/dashboard-widgets.svelte b/apps/frontend/src/lib/components/blocks/dashboard/dashboard-widgets.svelte
index 258e5a0da..ceb64ee6d 100644
--- a/apps/frontend/src/lib/components/blocks/dashboard/dashboard-widgets.svelte
+++ b/apps/frontend/src/lib/components/blocks/dashboard/dashboard-widgets.svelte
@@ -10,6 +10,7 @@
   import type { IDashboardLayouts } from "@undb/dashboard"
 
   export let shareId: string | undefined = undefined
+  export let readonly = false
 
   const dashboard = getDashboard()
 
@@ -20,6 +21,7 @@
   })
 
   const onPointeup = () => {
+    if (readonly) return
     const widgets = $widgetItems
       .map((item) => {
         const { x, y, h, w } = item[COLS]
@@ -54,6 +56,7 @@
       <DashboardWidget
         widget={dataItem.widget}
         {shareId}
+        {readonly}
         tableId={dataItem.tableId}
         {movePointerDown}
         {resizePointerDown}
diff --git a/apps/frontend/src/lib/components/blocks/share/share-calendar-view.svelte b/apps/frontend/src/lib/components/blocks/share/share-calendar-view.svelte
index 89c4694ac..57fd14774 100644
--- a/apps/frontend/src/lib/components/blocks/share/share-calendar-view.svelte
+++ b/apps/frontend/src/lib/components/blocks/share/share-calendar-view.svelte
@@ -10,5 +10,5 @@
 <CalendarView readonly {shareId} {viewId} {r} />
 
 {#await import("$lib/components/blocks/view-widget/view-widget-sheet.svelte") then { default: ViewWidgetSheet }}
-  <ViewWidgetSheet {viewId} {shareId} />
+  <ViewWidgetSheet {viewId} {shareId} readonly />
 {/await}
diff --git a/apps/frontend/src/lib/components/blocks/share/share-gallery-view.svelte b/apps/frontend/src/lib/components/blocks/share/share-gallery-view.svelte
index db73255cf..11c893794 100644
--- a/apps/frontend/src/lib/components/blocks/share/share-gallery-view.svelte
+++ b/apps/frontend/src/lib/components/blocks/share/share-gallery-view.svelte
@@ -10,5 +10,5 @@
 <GalleryView {shareId} {viewId} {r} />
 
 {#await import("$lib/components/blocks/view-widget/view-widget-sheet.svelte") then { default: ViewWidgetSheet }}
-  <ViewWidgetSheet {viewId} {shareId} />
+  <ViewWidgetSheet {viewId} {shareId} readonly />
 {/await}
diff --git a/apps/frontend/src/lib/components/blocks/share/share-grid-view.svelte b/apps/frontend/src/lib/components/blocks/share/share-grid-view.svelte
index f7e998630..665fb6021 100644
--- a/apps/frontend/src/lib/components/blocks/share/share-grid-view.svelte
+++ b/apps/frontend/src/lib/components/blocks/share/share-grid-view.svelte
@@ -76,5 +76,5 @@
 {/if}
 
 {#await import("$lib/components/blocks/view-widget/view-widget-sheet.svelte") then { default: ViewWidgetSheet }}
-  <ViewWidgetSheet {viewId} {shareId} />
+  <ViewWidgetSheet {viewId} {shareId} readonly />
 {/await}
diff --git a/apps/frontend/src/lib/components/blocks/share/share-kanban-view.svelte b/apps/frontend/src/lib/components/blocks/share/share-kanban-view.svelte
index 6f77a8a04..ab2e1b4d1 100644
--- a/apps/frontend/src/lib/components/blocks/share/share-kanban-view.svelte
+++ b/apps/frontend/src/lib/components/blocks/share/share-kanban-view.svelte
@@ -10,5 +10,5 @@
 <KanbanView {shareId} {viewId} {r} />
 
 {#await import("$lib/components/blocks/view-widget/view-widget-sheet.svelte") then { default: ViewWidgetSheet }}
-  <ViewWidgetSheet {viewId} {shareId} />
+  <ViewWidgetSheet {viewId} {shareId} readonly />
 {/await}
diff --git a/apps/frontend/src/lib/components/blocks/share/share-list-view.svelte b/apps/frontend/src/lib/components/blocks/share/share-list-view.svelte
index 5dc81b6de..e7af735de 100644
--- a/apps/frontend/src/lib/components/blocks/share/share-list-view.svelte
+++ b/apps/frontend/src/lib/components/blocks/share/share-list-view.svelte
@@ -10,5 +10,5 @@
 <ListView readonly {shareId} {viewId} {r} />
 
 {#await import("$lib/components/blocks/view-widget/view-widget-sheet.svelte") then { default: ViewWidgetSheet }}
-  <ViewWidgetSheet {viewId} {shareId} />
+  <ViewWidgetSheet {viewId} {shareId} readonly />
 {/await}
diff --git a/apps/frontend/src/lib/components/blocks/share/share-pivot-view.svelte b/apps/frontend/src/lib/components/blocks/share/share-pivot-view.svelte
index fa79513a2..bfd293ab7 100644
--- a/apps/frontend/src/lib/components/blocks/share/share-pivot-view.svelte
+++ b/apps/frontend/src/lib/components/blocks/share/share-pivot-view.svelte
@@ -10,5 +10,5 @@
 <PivotView readonly {shareId} {viewId} {r} />
 
 {#await import("$lib/components/blocks/view-widget/view-widget-sheet.svelte") then { default: ViewWidgetSheet }}
-  <ViewWidgetSheet {viewId} {shareId} />
+  <ViewWidgetSheet {viewId} {shareId} readonly />
 {/await}
diff --git a/apps/frontend/src/lib/components/blocks/table-tools/share-table-tools.svelte b/apps/frontend/src/lib/components/blocks/table-tools/share-table-tools.svelte
index 65d4ea87d..f1760dd60 100644
--- a/apps/frontend/src/lib/components/blocks/table-tools/share-table-tools.svelte
+++ b/apps/frontend/src/lib/components/blocks/table-tools/share-table-tools.svelte
@@ -21,6 +21,6 @@
 
   <div class="flex items-center gap-2">
     <RecordsSearch />
-    <ViewWidgetButton />
+    <ViewWidgetButton readonly />
   </div>
 </div>
diff --git a/apps/frontend/src/lib/components/blocks/table-tools/table-tools.svelte b/apps/frontend/src/lib/components/blocks/table-tools/table-tools.svelte
index df835e9fe..60419b5e8 100644
--- a/apps/frontend/src/lib/components/blocks/table-tools/table-tools.svelte
+++ b/apps/frontend/src/lib/components/blocks/table-tools/table-tools.svelte
@@ -33,6 +33,6 @@
       <ShareViewButton />
     {/if}
     <RecordsSearch />
-    <ViewWidgetButton />
+    <ViewWidgetButton {readonly} />
   </div>
 </div>
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 bd3c5f784..d0b02b5bc 100644
--- a/apps/frontend/src/lib/components/blocks/template/template-preview.svelte
+++ b/apps/frontend/src/lib/components/blocks/template/template-preview.svelte
@@ -17,6 +17,8 @@
   import { preferences } from "$lib/store/persisted.store"
   import { RecordDO } from "@undb/table"
   import { templateStore } from "$lib/store/template.store.svelte"
+  import { setDashboard } from "$lib/store/dashboard.store"
+  import DashboardWidgets from "$lib/components/blocks/dashboard/dashboard-widgets.svelte"
 
   export let template: ITemplateDTO
 
@@ -25,13 +27,18 @@
 
   let t = templateStore.mustGetTemplate(template)
   let tables = t.flatMap((base) => base.tables.map(({ table }) => table))
+  let dashboards = t.flatMap((base) => base.dashboards)
   let bases = t.map((base) => base.base)
 
   let currentTableId = writable<string | undefined>(tables.at(0)?.id.value)
   let currentViewId = writable<string | undefined>(undefined)
+  let currentDashboardId = writable<string | undefined>(undefined)
   let currentTable = derived(currentTableId, ($currentTableId) => {
     return tables.find((table) => table.id.value === $currentTableId)
   })
+  let currentDashboard = derived(currentDashboardId, ($currentDashboardId) => {
+    return dashboards.find((dashboard) => dashboard.id.value === $currentDashboardId)
+  })
 
   let r = writable<string | null>(null)
 
@@ -56,6 +63,10 @@
     setTable(writable($currentTable))
   }
 
+  $: if ($currentDashboard) {
+    setDashboard(writable($currentDashboard))
+  }
+
   let open: Record<string, boolean> =
     tables.length > 0
       ? {
@@ -91,6 +102,7 @@
               {#if base}
                 {@const active = base.id.value === $currentTable?.baseId && !$currentTableId && !$currentViewId}
                 {@const baseTables = tables.filter((t) => t?.baseId === base.id.value)}
+                {@const baseDashboards = dashboards.filter((d) => d.baseId === base.id.value)}
                 <Collapsible.Root bind:open={open[base.id.value]}>
                   <div
                     class={cn(
@@ -128,6 +140,33 @@
                     </div>
                   </div>
                   <Collapsible.Content class="space-y-1 pt-1">
+                    {#each baseDashboards as dashboard}
+                      {@const active = dashboard.id.value === $currentDashboardId}
+                      <div
+                        class={cn(
+                          "group flex h-8 cursor-pointer items-center justify-between gap-1 truncate rounded-md pl-8 pr-2 transition-all",
+                          active ? "bg-gray-800/90" : "hover:bg-gray-100",
+                        )}
+                      >
+                        <button
+                          on:click={() => {
+                            $currentTableId = undefined
+                            $currentViewId = undefined
+                            $currentDashboardId = dashboard.id.value
+                          }}
+                          title={dashboard.name.value}
+                          class={cn(
+                            "flex h-full flex-1 items-center overflow-hidden font-normal text-gray-600",
+                            active && "text-background font-medium",
+                          )}
+                        >
+                          <DatabaseIcon class="mr-2 h-4 w-4" />
+                          <span class="truncate">
+                            {dashboard.name.value}
+                          </span>
+                        </button>
+                      </div>
+                    {/each}
                     {#each baseTables as table}
                       {#if table}
                         {@const active = table.id.value === $currentTableId && !$currentViewId}
@@ -142,6 +181,7 @@
                             <button
                               on:click={() => {
                                 $currentTableId = table.id.value
+                                $currentDashboardId = undefined
                                 $currentViewId = undefined
                               }}
                               title={table.name.value}
@@ -196,6 +236,7 @@
                                   on:click={() => {
                                     $currentTableId = table.id.value
                                     $currentViewId = view.id.value
+                                    $currentDashboardId = undefined
                                   }}
                                 >
                                   <ViewIcon type={view.type} class="mr-2 h-4 w-4" />
@@ -222,6 +263,11 @@
         </section>
       {/if}
     {/key}
+    {#key $currentDashboardId}
+      {#if $currentDashboard}
+        <DashboardWidgets readonly />
+      {/if}
+    {/key}
   </div>
 {/if}
 
diff --git a/apps/frontend/src/lib/components/blocks/view-widget/view-widget-button.svelte b/apps/frontend/src/lib/components/blocks/view-widget/view-widget-button.svelte
index 9ed925cba..b10297b5e 100644
--- a/apps/frontend/src/lib/components/blocks/view-widget/view-widget-button.svelte
+++ b/apps/frontend/src/lib/components/blocks/view-widget/view-widget-button.svelte
@@ -3,6 +3,8 @@
   import { toggleModal, VIEW_WIDGET_MODAL } from "$lib/store/modal.store"
   import { PlugIcon } from "lucide-svelte"
   import { LL } from "@undb/i18n/client"
+
+  export let readonly = false
 </script>
 
 <Button on:click={() => toggleModal(VIEW_WIDGET_MODAL)} variant="outline" size="sm" {...$$restProps}>
diff --git a/apps/frontend/src/lib/components/blocks/view-widget/view-widget-sheet.svelte b/apps/frontend/src/lib/components/blocks/view-widget/view-widget-sheet.svelte
index 734a3f101..5666a102f 100644
--- a/apps/frontend/src/lib/components/blocks/view-widget/view-widget-sheet.svelte
+++ b/apps/frontend/src/lib/components/blocks/view-widget/view-widget-sheet.svelte
@@ -18,6 +18,7 @@
   let table = getTable()
   export let viewId: Readable<string | undefined>
   export let shareId: string | undefined = undefined
+  export let readonly = false
 
   let view = derived([table, viewId], ([$table, $viewId]) => $table?.views.getViewById($viewId))
   let widgets = derived([view], ([$view]) => ($view?.widgets.unwrapOr([]) ?? []).map((w) => w.toJSON()))
@@ -82,7 +83,7 @@
         <p class="text-muted-foreground text-sm">{$LL.table.view.widget.empty()}</p>
       </div>
     {/if}
-    {#if !shareId}
+    {#if !shareId && !readonly}
       <Popover.Root bind:open>
         <Popover.Trigger asChild let:builder>
           <Button size="sm" class="w-full" builders={[builder]} variant={$widgets.length ? "outline" : "default"}>
diff --git a/apps/frontend/src/lib/components/blocks/view/view.svelte b/apps/frontend/src/lib/components/blocks/view/view.svelte
index 7ef0ce565..3ed66576d 100644
--- a/apps/frontend/src/lib/components/blocks/view/view.svelte
+++ b/apps/frontend/src/lib/components/blocks/view/view.svelte
@@ -43,6 +43,6 @@
   {/await}
 
   {#await import("$lib/components/blocks/view-widget/view-widget-sheet.svelte") then { default: ViewWidgetSheet }}
-    <ViewWidgetSheet {viewId} {shareId} />
+    <ViewWidgetSheet {viewId} {shareId} {readonly} />
   {/await}
 {/key}
diff --git a/apps/frontend/src/lib/components/blocks/widget/widget.svelte b/apps/frontend/src/lib/components/blocks/widget/widget.svelte
index 8fe5f8b11..34dc20ea0 100644
--- a/apps/frontend/src/lib/components/blocks/widget/widget.svelte
+++ b/apps/frontend/src/lib/components/blocks/widget/widget.svelte
@@ -27,6 +27,7 @@
   export let viewId: string | undefined = undefined
   export let ignoreView: boolean = false
   export let shareId: string | undefined = undefined
+  export let readonly = false
 
   export let movePointerDown: ((e: Event) => void) | undefined = undefined
   export let resizePointerDown: ((e: Event) => void) | undefined = undefined
@@ -100,7 +101,7 @@
 <div class={cn("group flex h-full w-full flex-col rounded-sm border", $$restProps.class)}>
   <div class="flex items-center justify-between p-2">
     <div class="flex items-center gap-0.5">
-      {#if movePointerDown && !shareId}
+      {#if movePointerDown && !shareId && !readonly}
         <button on:pointerdown={movePointerDown}>
           <GripVerticalIcon
             class="text-muted-foreground size-4 cursor-grab opacity-0 group-hover:block group-hover:opacity-100 dark:text-gray-200"
@@ -109,7 +110,7 @@
       {/if}
       <span class="text-sm font-bold">{widget.name}</span>
     </div>
-    {#if !shareId}
+    {#if !shareId && !readonly}
       <div class="flex items-center gap-2 opacity-0 group-hover:opacity-100">
         <Dialog.Root bind:open portal="body">
           <Dialog.Trigger>
@@ -144,6 +145,7 @@
                     {viewId}
                     {shareId}
                     {ignoreView}
+                    {readonly}
                     aggregate={widget.item.aggregate}
                     class="h-full text-[6rem]"
                   />
@@ -169,31 +171,33 @@
           </Dialog.Content>
         </Dialog.Root>
 
-        <DropdownMenu.Root>
-          <DropdownMenu.Trigger>
-            <EllipsisIcon class="size-3" />
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Content>
-            <DropdownMenu.Item
-              class="text-xs"
-              on:click={() => {
-                open = true
-                editing = true
-              }}
-            >
-              <PencilIcon class="mr-2 size-3" />
-              {$LL.widget.editName()}
-            </DropdownMenu.Item>
-            <DropdownMenu.Item class="text-xs" on:click={() => (confirmDuplicate = true)}>
-              <CopyIcon class="mr-2 size-3" />
-              {$LL.widget.duplicate(widget.name)}
-            </DropdownMenu.Item>
-            <DropdownMenu.Item class="text-xs" on:click={() => (confirmDelete = true)}>
-              <TrashIcon class="mr-2 size-3" />
-              {$LL.widget.delete(widget.name)}
-            </DropdownMenu.Item>
-          </DropdownMenu.Content>
-        </DropdownMenu.Root>
+        {#if !readonly}
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+              <EllipsisIcon class="size-3" />
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content>
+              <DropdownMenu.Item
+                class="text-xs"
+                on:click={() => {
+                  open = true
+                  editing = true
+                }}
+              >
+                <PencilIcon class="mr-2 size-3" />
+                {$LL.widget.editName()}
+              </DropdownMenu.Item>
+              <DropdownMenu.Item class="text-xs" on:click={() => (confirmDuplicate = true)}>
+                <CopyIcon class="mr-2 size-3" />
+                {$LL.widget.duplicate({ name: widget.name })}
+              </DropdownMenu.Item>
+              <DropdownMenu.Item class="text-xs" on:click={() => (confirmDelete = true)}>
+                <TrashIcon class="mr-2 size-3" />
+                {$LL.widget.delete({ name: widget.name })}
+              </DropdownMenu.Item>
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        {/if}
       </div>
     {/if}
   </div>
@@ -201,7 +205,7 @@
     <Aggregate {table} {tableId} {ignoreView} {widget} {viewId} {shareId} aggregate={widget.item.aggregate} />
   {/if}
 
-  {#if resizePointerDown && !shareId}
+  {#if resizePointerDown && !shareId && !readonly}
     <button on:pointerdown={resizePointerDown}>
       <ChevronRightIcon
         class="text-muted-foreground absolute bottom-0 right-0
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 0823bc259..2994d883f 100644
--- a/apps/frontend/src/routes/(authed)/(space)/dashboards/[dashboardId]/+page.svelte
+++ b/apps/frontend/src/routes/(authed)/(space)/dashboards/[dashboardId]/+page.svelte
@@ -107,30 +107,30 @@
       <GaugeIcon class="mr-2 size-4" />
       {$dashboard.name.value}
 
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-          <EllipsisIcon class="text-muted-foreground ml-4 size-4" />
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content>
-          <DropdownMenu.Group>
-            <DropdownMenu.Item class="text-xs" on:click={() => (updateDialogOpen = true)}>
-              <PencilIcon class="mr-2 size-3" />
-              {$LL.dashboard.updateName()}
-            </DropdownMenu.Item>
-            <DropdownMenu.Item class="text-xs" on:click={() => (duplicateDialogOpen = true)}>
-              <CopyIcon class="mr-2 size-3" />
-              {$LL.dashboard.duplicateDashboard()}
-            </DropdownMenu.Item>
-            <DropdownMenu.Item
-              class="text-destructive text-xs hover:!bg-red-100 hover:!text-red-500"
-              on:click={() => (deleteDialogOpen = true)}
-            >
-              <TrashIcon class="mr-2 size-3" />
-              {$LL.dashboard.deleteDashboard()}
-            </DropdownMenu.Item>
-          </DropdownMenu.Group>
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger>
+            <EllipsisIcon class="text-muted-foreground ml-4 size-4" />
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content>
+            <DropdownMenu.Group>
+              <DropdownMenu.Item class="text-xs" on:click={() => (updateDialogOpen = true)}>
+                <PencilIcon class="mr-2 size-3" />
+                {$LL.dashboard.updateName()}
+              </DropdownMenu.Item>
+              <DropdownMenu.Item class="text-xs" on:click={() => (duplicateDialogOpen = true)}>
+                <CopyIcon class="mr-2 size-3" />
+                {$LL.dashboard.duplicateDashboard()}
+              </DropdownMenu.Item>
+              <DropdownMenu.Item
+                class="text-destructive text-xs hover:!bg-red-100 hover:!text-red-500"
+                on:click={() => (deleteDialogOpen = true)}
+              >
+                <TrashIcon class="mr-2 size-3" />
+                {$LL.dashboard.deleteDashboard()}
+              </DropdownMenu.Item>
+            </DropdownMenu.Group>
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
     </h1>
     <div class="flex items-center gap-2">
       <ShareButton
diff --git a/packages/dashboard/src/dashboard.factory.ts b/packages/dashboard/src/dashboard.factory.ts
index f751ca459..8ac912108 100644
--- a/packages/dashboard/src/dashboard.factory.ts
+++ b/packages/dashboard/src/dashboard.factory.ts
@@ -28,19 +28,20 @@ export class DashboardFactory {
       new WithDashboardSpaceId(dto.spaceId),
       new DashboardBaseIdSpecification(dto.baseId),
       WithDashboardWidgets.from(dto.widgets || []),
-      new WithDashboardLayout(dto.layout),
+      new WithDashboardLayout(dto.layout ?? {}),
       WithDashboardDescription.fromString(dto.description),
     )
   }
 
   static create(input: ICreateDashboardDTO): Dashboard {
+    console.log(input)
     const dashboard = this.new(
       new WithDashboardId(DashboardId.fromOrCreate(input.id)),
       WithDashboardName.fromString(input.name),
       new WithDashboardSpaceId(input.spaceId),
       new DashboardBaseIdSpecification(input.baseId!),
       WithDashboardWidgets.from(input.widgets || []),
-      new WithDashboardLayout(input.layout),
+      WithDashboardLayout.create(input.widgets || [], input.layout),
       WithDashboardDescription.fromString(input.description),
     )
 
diff --git a/packages/dashboard/src/specifications/dashboard-layout.specification.ts b/packages/dashboard/src/specifications/dashboard-layout.specification.ts
index bce1cdcfa..77d25ddfa 100644
--- a/packages/dashboard/src/specifications/dashboard-layout.specification.ts
+++ b/packages/dashboard/src/specifications/dashboard-layout.specification.ts
@@ -1,12 +1,20 @@
 import { CompositeSpecification, Ok, Result } from "@undb/domain"
 import type { Dashboard } from "../dashboard.do.js"
 import type { IDashboardSpecVisitor } from "../interface.js"
-import { DashboardLayouts, type IDashboardLayouts } from "../value-objects/index.js"
+import { DashboardLayouts, type IDashboardLayouts, type IDashboardWidget } from "../value-objects/index.js"
 
 export class WithDashboardLayout extends CompositeSpecification<Dashboard, IDashboardSpecVisitor> {
-  constructor(public readonly layout: IDashboardLayouts = {}) {
+  constructor(public readonly layout: IDashboardLayouts) {
     super()
   }
+  static create(widgets: IDashboardWidget[], layouts?: IDashboardLayouts) {
+    if (layouts) {
+      return new WithDashboardLayout(layouts)
+    }
+
+    layouts = DashboardLayouts.getLayouts(widgets)
+    return new WithDashboardLayout(layouts)
+  }
   isSatisfiedBy(t: Dashboard): boolean {
     throw new Error("Method not implemented.")
   }
diff --git a/packages/dashboard/src/value-objects/dashboard-layout.vo.ts b/packages/dashboard/src/value-objects/dashboard-layout.vo.ts
index 616138004..0f725224c 100644
--- a/packages/dashboard/src/value-objects/dashboard-layout.vo.ts
+++ b/packages/dashboard/src/value-objects/dashboard-layout.vo.ts
@@ -3,6 +3,11 @@ import { widgetId, type IWidgetDTO, type IWidgetType } from "@undb/table"
 import { z } from "@undb/zod"
 import { match } from "ts-pattern"
 import { WithDashboardLayout } from "../specifications"
+// @ts-ignore
+import gridHelp from "svelte-grid/build/helper/index.mjs"
+import type { IDashboardWidget } from "./dashboard-widgets.vo"
+
+export const COLS = 24
 
 export const dashboardLayoutSchema = z.object({
   x: z.number().nonnegative(),
@@ -38,6 +43,14 @@ export class DashboardLayouts extends ValueObject<IDashboardLayouts> {
     return this.defaultLayout("aggregate")
   }
 
+  static defaultSize(type: IWidgetType): { w: number; h: number; min: { w: number; h: number } } {
+    return match(type)
+      .with("aggregate", () => ({ w: 6, h: 2, min: { w: 4, h: 2 } }))
+      .with("chart", () => ({ w: 6, h: 4, min: { w: 4, h: 2 } }))
+      .with("table", () => ({ w: 6, h: 4, min: { w: 4, h: 2 } }))
+      .exhaustive()
+  }
+
   static defaultLayout(type: IWidgetType): IDashboardLayout {
     return match(type)
       .with("aggregate", () => ({
@@ -89,6 +102,50 @@ export class DashboardLayouts extends ValueObject<IDashboardLayouts> {
     }
   }
 
+  static getLayouts(widgets: IDashboardWidget[]): IDashboardLayouts {
+    const layouts: IDashboardLayouts = {}
+    const items: any[] = []
+    for (let i = 0; i < widgets.length; i++) {
+      const widget = widgets[i]
+      let position: { x: number; y: number }
+      let newItem = {
+        [COLS]: gridHelp.item({
+          ...DashboardLayouts.defaultLayout(widget.widget.item.type),
+        }),
+      }
+      if (i === 0) {
+        position = { x: 0, y: 0 }
+      } else {
+        const prev = items.slice(0, i)
+        console.log({ newItem }, prev)
+        const foundPosition = gridHelp.findSpace(newItem, prev, COLS)
+        console.log({ foundPosition })
+        position = {
+          x: foundPosition.x,
+          y: foundPosition.y,
+        }
+      }
+
+      newItem = {
+        ...newItem,
+        [COLS]: {
+          ...newItem[COLS],
+          ...position,
+        },
+      }
+
+      items.push(newItem)
+
+      const layout = {
+        ...DashboardLayouts.defaultSize(widget.widget.item.type),
+        ...position,
+      }
+      layouts[widget.widget.id] = layout
+    }
+
+    return layouts
+  }
+
   $addWidget(widgetId: string, layout: IDashboardLayout): WithDashboardLayout {
     const layouts = this.addLayout(widgetId, layout)
     return new WithDashboardLayout(layouts)
diff --git a/packages/dashboard/src/value-objects/dashboard-widgets.vo.ts b/packages/dashboard/src/value-objects/dashboard-widgets.vo.ts
index 07e4382eb..1c4320be0 100644
--- a/packages/dashboard/src/value-objects/dashboard-widgets.vo.ts
+++ b/packages/dashboard/src/value-objects/dashboard-widgets.vo.ts
@@ -5,6 +5,22 @@ import * as z from "@undb/zod"
 import type { IUpdateDashboardWidgetDTO } from "../dto/update-dashboard-widget.dto"
 import { WithDashboardWidgets, type DashboardComositeSpecification } from "../specifications"
 
+export const COLS = 24
+
+export interface IWidgetLayout {
+  x: number
+  y: number
+  h: number
+  w: number
+}
+
+export interface WidgetLayout {
+  [key: number]: IWidgetLayout
+  id: string
+  tableId: string | undefined
+  widget: IWidgetDTO | null
+}
+
 export const dashboardWidgetSchema = z.object({
   table: z.object({
     id: tableId.optional(),
diff --git a/packages/data-service/src/data-service.registery.ts b/packages/data-service/src/data-service.registery.ts
index e2e963b9e..548bbd54e 100644
--- a/packages/data-service/src/data-service.registery.ts
+++ b/packages/data-service/src/data-service.registery.ts
@@ -37,7 +37,9 @@ import {
   RECORD_OUTBOX_SERVICE,
   RECORD_QUERY_REPOSITORY,
   RECORD_REPOSITORY,
+  RECORDS_QUERY_SERVICE,
   RECORDS_SERVICE,
+  RecordsQueryService,
   RecordsService,
   TABLE_OUTBOX_SERVICE,
   TABLE_QUERY_REPOSITORY,
@@ -93,6 +95,7 @@ export const registerDataService = () => {
   container.register(INVITATION_REPOSITORY, InvitationRepository)
   container.register(INVITATION_QUERY_REPOSITORY, InvitationQueryRepository)
   container.register(MAIL_SERVICE, MailService)
+  container.register(RECORDS_QUERY_SERVICE, RecordsQueryService)
   container.register(RECORDS_SERVICE, RecordsService)
   container.register(RECORD_QUERY_REPOSITORY, RecordQueryRepository)
   container.register(OBJECT_STORAGE, LocalObjectStorage)
diff --git a/packages/persistence/src/dashboard/dashboard.mutate-visitor.ts b/packages/persistence/src/dashboard/dashboard.mutate-visitor.ts
index 2a650712d..63f2f8302 100644
--- a/packages/persistence/src/dashboard/dashboard.mutate-visitor.ts
+++ b/packages/persistence/src/dashboard/dashboard.mutate-visitor.ts
@@ -47,12 +47,14 @@ export class DashboardMutateVisitor extends AbstractQBMutationVisitor implements
 
     const tableIds = v.widgets.tableIds
     if (tableIds.length > 0) {
-      const sql = this.qb
-        .insertInto("undb_dashboard_table_id_mapping")
-        .values(tableIds.map((tableId) => ({ dashboard_id: dashboardId, table_id: tableId })))
-        .onConflict((ob) => ob.doNothing())
-        .compile()
-      this.addSql(sql)
+      for (const tableId of tableIds) {
+        const sql = this.qb
+          .insertInto("undb_dashboard_table_id_mapping")
+          .values({ dashboard_id: dashboardId, table_id: tableId })
+          .onConflict((ob) => ob.doNothing())
+          .compile()
+        this.addSql(sql)
+      }
     }
   }
   withDashboardBaseId(v: DashboardBaseIdSpecification): void {
diff --git a/packages/persistence/src/dashboard/dashboard.repository.ts b/packages/persistence/src/dashboard/dashboard.repository.ts
index 944f981c1..096d4e051 100644
--- a/packages/persistence/src/dashboard/dashboard.repository.ts
+++ b/packages/persistence/src/dashboard/dashboard.repository.ts
@@ -102,6 +102,7 @@ export class DashboardRepository implements IDashboardRepository {
       await qb
         .insertInto("undb_dashboard_table_id_mapping")
         .values(tableIds.map((id) => ({ dashboard_id: dashboard.id.value, table_id: id })))
+        .onConflict((ob) => ob.doNothing())
         .execute()
     }
     await this.outboxService.save(dashboard)
diff --git a/packages/table/package.json b/packages/table/package.json
index 09d4cb5cc..dc623fc66 100644
--- a/packages/table/package.json
+++ b/packages/table/package.json
@@ -21,6 +21,7 @@
     "@undb/space": "workspace:*",
     "@undb/utils": "workspace:*",
     "@undb/zod": "workspace:*",
+    "svelte-grid": "^5.1.2",
     "date-fns": "^4.1.0",
     "radash": "^12.1.0",
     "ts-pattern": "^5.5.0"
diff --git a/packages/template/src/templates/hr.base.json b/packages/template/src/templates/hr.base.json
index db7cf1613..d3eea57aa 100644
--- a/packages/template/src/templates/hr.base.json
+++ b/packages/template/src/templates/hr.base.json
@@ -1142,6 +1142,22 @@
                 }
               }
             }
+          },
+          "Total Salary": {
+            "tableName": "Employees",
+            "widget": {
+              "id": "total_salary",
+              "name": "Total Salary",
+              "item": {
+                "type": "aggregate",
+                "aggregate": {
+                  "type": "sum",
+                  "config": {
+                    "field": "salary"
+                  }
+                }
+              }
+            }
           }
         }
       }