From 550256db6bb939b41d05ea4ccd97f09f48893d5b Mon Sep 17 00:00:00 2001
From: nichenqin <nichenqin@hotmail.com>
Date: Thu, 26 Sep 2024 16:44:13 +0800
Subject: [PATCH] feat: template preview

---
 .../blocks/field-control/date-control.svelte  |   2 +-
 .../editable-cell/checkbox-cell.svelte        |   4 +-
 .../grid-view/grid-view-data-table.svelte     |   2 +-
 .../kanban-view/kanban-option-button.svelte   |  11 +-
 .../blocks/kanban-view/kanban-view.svelte     |  18 +-
 .../select-kanban-field-form.svelte           |  16 +-
 .../kanban-view/select-kanban-lane.svelte     |  16 +-
 .../kanban-view/select-kanban-view.svelte     |  29 ++-
 .../blocks/share/share-grid-view.svelte       |   6 +-
 .../blocks/table-tools/table-tools.svelte     |  22 +-
 .../blocks/tables-nav/tables-nav.svelte       |   1 -
 .../blocks/template/template-card.svelte      |  76 +++++--
 .../blocks/template/template-grid-view.svelte |  26 +++
 .../blocks/template/template-preview.svelte   | 191 +++++++++++++++++-
 .../view-color-editor.svelte                  |  14 +-
 .../blocks/view-fields/view-fields.svelte     |  16 +-
 .../view-filter-editor.svelte                 |   2 +-
 .../blocks/view-sort/view-sort.svelte         |   2 +-
 .../create-from-template.command-handler.ts   |   3 -
 .../src/create-from-template.command.ts       |   2 +
 .../space/src/value-objects/space-id.vo.ts    |   2 +-
 packages/template/src/index.ts                |   1 +
 .../src/templates/projectManagement.base.json |   6 +-
 23 files changed, 398 insertions(+), 70 deletions(-)
 create mode 100644 apps/frontend/src/lib/components/blocks/template/template-grid-view.svelte

diff --git a/apps/frontend/src/lib/components/blocks/field-control/date-control.svelte b/apps/frontend/src/lib/components/blocks/field-control/date-control.svelte
index fd84299bc..0b7ce02e1 100644
--- a/apps/frontend/src/lib/components/blocks/field-control/date-control.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-control/date-control.svelte
@@ -25,7 +25,7 @@
   let open = false
 </script>
 
-<Popover.Root bind:open openFocus>
+<Popover.Root bind:open openFocus portal="body">
   <Popover.Trigger asChild let:builder>
     <Button
       disabled={readonly || disabled}
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/checkbox-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/checkbox-cell.svelte
index a7ac9c3db..4e91b921b 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/checkbox-cell.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/checkbox-cell.svelte
@@ -10,6 +10,7 @@
   export let field: CheckboxField
   export let value: boolean = false
   export let recordId: string
+  export let readonly = false
   export let onValueChange: (value: boolean) => void
 
   const updateCell = createMutation({
@@ -23,9 +24,10 @@
 
 <div class={cn($$restProps.class, "flex items-center justify-center")}>
   <Checkbox
+    disabled={readonly}
     bind:checked={value}
     onCheckedChange={(checked) => {
-      onValueChange(checked)
+      onValueChange(!!checked)
       $updateCell.mutate({
         tableId,
         id: recordId,
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/grid-view-data-table.svelte b/apps/frontend/src/lib/components/blocks/grid-view/grid-view-data-table.svelte
index 3eae260ee..fe419e593 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/grid-view-data-table.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/grid-view-data-table.svelte
@@ -36,7 +36,7 @@
   import ShareTableTools from "$lib/components/blocks/table-tools/share-table-tools.svelte"
 
   export let readonly = false
-  export let viewId: Readable<string>
+  export let viewId: Readable<string | undefined>
   export let currentPage: Writable<number | null>
   export let isLoading = false
   export let total: number
diff --git a/apps/frontend/src/lib/components/blocks/kanban-view/kanban-option-button.svelte b/apps/frontend/src/lib/components/blocks/kanban-view/kanban-option-button.svelte
index 500da9fff..7c78c28e2 100644
--- a/apps/frontend/src/lib/components/blocks/kanban-view/kanban-option-button.svelte
+++ b/apps/frontend/src/lib/components/blocks/kanban-view/kanban-option-button.svelte
@@ -6,6 +6,7 @@
   import type { KanbanView } from "@undb/table"
 
   export let view: KanbanView
+  export let readonly = false
 </script>
 
 <Dropdown.Root>
@@ -16,7 +17,13 @@
     </Button>
   </Dropdown.Trigger>
   <Dropdown.Content class="w-[400px] p-2">
-    <Dropdown.Label>Update kanban view</Dropdown.Label>
-    <SelectKanbanFieldForm {view} />
+    <Dropdown.Label>
+      {#if !readonly}
+        Update kanban view
+      {:else}
+        Kanban view
+      {/if}
+    </Dropdown.Label>
+    <SelectKanbanFieldForm {view} {readonly} />
   </Dropdown.Content>
 </Dropdown.Root>
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 a16dccd57..d3e549c0f 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
@@ -1,18 +1,21 @@
 <script lang="ts">
   import { getTable } from "$lib/store/table.store"
   import type { Readable } from "svelte/store"
-  import type { KanbanView } from "@undb/table"
+  import type { KanbanView, RecordDO } from "@undb/table"
   import SelectKanbanField from "./select-kanban-field.svelte"
   import SelectKanbanView from "./select-kanban-view.svelte"
   import TableTools from "../table-tools/table-tools.svelte"
-  import { FieldIdVo } from "@undb/table"
+  import { FieldIdVo, Records } from "@undb/table"
   import SelectKanbanRequiresSingle from "./select-kanban-requires-single.svelte"
   import KanbanOptionButton from "./kanban-option-button.svelte"
   import { createRecordsStore, setRecordsStore } from "$lib/store/records.store"
 
   const table = getTable()
-  export let viewId: Readable<string>
+  export let viewId: Readable<string | undefined>
   export let shareId: string | undefined = undefined
+  export let readonly = false
+  export let records: RecordDO[] | undefined = undefined
+  export let disableRecordQuery = false
 
   $: view = $table.views.getViewById($viewId) as KanbanView
   $: fieldId = view.type === "kanban" ? view.field.into(undefined) : undefined
@@ -20,18 +23,21 @@
 
   const recordsStore = createRecordsStore()
   setRecordsStore(recordsStore)
+  if (records) {
+    recordsStore.setRecords(new Records(records), Date.now())
+  }
 </script>
 
 {#key $table.id.value}
-  <TableTools>
+  <TableTools {readonly}>
     {#if !shareId}
-      <KanbanOptionButton {view} />
+      <KanbanOptionButton {view} {readonly} />
     {/if}
   </TableTools>
   {#if view.type === "kanban"}
     {#if field?.type === "select"}
       {#if field.isSingle}
-        <SelectKanbanView {view} {shareId} {viewId} />
+        <SelectKanbanView {view} {shareId} {viewId} {disableRecordQuery} {readonly} />
       {:else}
         <section class="flex h-full w-full items-center justify-center">
           <SelectKanbanRequiresSingle {view} {field} {shareId} />
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 86c2292bd..147569f5f 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
@@ -10,6 +10,9 @@
   import { createMutation } from "@tanstack/svelte-query"
   import { toast } from "svelte-sonner"
   import { invalidate } from "$app/navigation"
+  import { hasPermission } from "$lib/store/space-member.store"
+
+  export let readonly = false
 
   const table = getTable()
 
@@ -59,6 +62,7 @@
     <div class="grid w-full items-center gap-4">
       <div class="flex flex-col space-y-1.5">
         <FieldPicker
+          disabled={readonly}
           placeholder="Select a select type field to group kanban lanes"
           value={$formData.kanban?.field}
           onValueChange={(field) => {
@@ -74,9 +78,13 @@
     </div>
   </form>
 
-  <CreateFieldButton class="w-full" variant="secondary" />
+  {#if !readonly && $hasPermission("field:update")}
+    <CreateFieldButton class="w-full" variant="secondary" />
+  {/if}
 
-  <div class="flex w-full justify-end">
-    <Button type="submit" form="select-kanban-field-form">Confirm</Button>
-  </div>
+  {#if !readonly}
+    <div class="flex w-full justify-end">
+      <Button type="submit" form="select-kanban-field-form" disabled={readonly}>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 e0c216315..3c0a5ae02 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
@@ -50,19 +50,20 @@
 
   export let tableId: string
   export let view: KanbanView
-  export let viewId: Readable<string>
+  export let viewId: Readable<string | undefined>
   export let fieldId: string
   export let field: SelectField
   export let option: IOption | null
   export let readonly = false
   export let shareId: string | undefined = undefined
+  export let disableRecordQuery = false
 
   $: color = view.color.into(undefined)
 
   const q = queryParam("q")
 
   let getIsLaneCollapsed = kanbanStore.getIsLaneCollapsed
-  $: isLaneCollapsed = $getIsLaneCollapsed($viewId, option?.id ?? "") ?? false
+  $: isLaneCollapsed = $viewId ? ($getIsLaneCollapsed($viewId, option?.id ?? "") ?? false) : false
 
   const query = createInfiniteQuery(
     derived([table, viewId, q], ([$table, $viewId, $q]) => {
@@ -109,7 +110,7 @@
           }
           return pages.length + 1
         },
-        enabled: view?.type === "kanban",
+        enabled: view?.type === "kanban" && !disableRecordQuery,
         filters: {
           conjunction: "and",
           children: [{ field: fieldId, op: "eq", value: option ? option.id : null }],
@@ -304,6 +305,9 @@
             <DropdownMenu.Item
               class="text-xs text-gray-700"
               on:click={() => {
+                if (!$viewId) {
+                  return
+                }
                 kanbanStore.toggleLane($viewId, option?.id ?? "")
               }}
             >
@@ -323,7 +327,7 @@
           getKanbanBgColor(option?.color ?? "gray"),
         )}
       >
-        {#if !readonly && $hasPermission("record:create")}
+        {#if  $hasPermission("record:create")}
           {#if $query.isFetchedAfterMount}
             {#if recordDos.length > 0}
               <Button on:click={onCreateRecord} variant="outline" size="sm" class="w-full">
@@ -339,7 +343,7 @@
                     <Option option={option ?? { id: "", name: "No Option", color: "gray" }} />
                   </div>
                 </div>
-                {#if !(field.required && !option)}
+                {#if !readonly && !(field.required && !option)}
                   <Button on:click={onCreateRecord} variant="outline" size="sm">
                     <PlusIcon class="text-muted-foreground mr-2 h-4 w-4 font-semibold" />
                     New Record
@@ -376,7 +380,7 @@
     </div>
     <div class="mt-2 flex w-full items-center justify-between px-2 py-0.5">
       {#if !shareId}
-        {#if !(field.required && !option)}
+        {#if !(field.required && !option) && !readonly}
           <Button variant="outline" size="xs" on:click={onCreateRecord}>
             <PlusIcon class="text-muted-foreground mr-2 h-3 w-3 font-semibold" />
             New Record
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 21da1d16f..1cea75ebd 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
@@ -25,10 +25,11 @@
 
   const table = getTable()
 
-  export let viewId: Readable<string>
+  export let viewId: Readable<string | undefined>
   export let view: KanbanView
   export let readonly = false
   export let shareId: string | undefined = undefined
+  export let disableRecordQuery = false
 
   let fieldId = view.field.unwrapUnchecked()!
   let field = $table.schema.getFieldById(new FieldIdVo(fieldId)).into(undefined) as SelectField
@@ -99,11 +100,31 @@
 
 <div class="flex-1 overflow-x-auto overflow-y-hidden p-4">
   <div bind:this={lanesContainer} class="flex h-full space-x-2 overflow-y-hidden pr-2">
-    <SelectKanbanLane {field} {readonly} tableId={$table.id.value} {viewId} {fieldId} option={null} {shareId} {view} />
+    <SelectKanbanLane
+      {field}
+      {readonly}
+      tableId={$table.id.value}
+      {viewId}
+      {fieldId}
+      option={null}
+      {shareId}
+      {view}
+      {disableRecordQuery}
+    />
     {#each options as option (option.id)}
-      <SelectKanbanLane {field} {readonly} tableId={$table.id.value} {viewId} {fieldId} {option} {shareId} {view} />
+      <SelectKanbanLane
+        {field}
+        {readonly}
+        tableId={$table.id.value}
+        {viewId}
+        {fieldId}
+        {option}
+        {shareId}
+        {view}
+        {disableRecordQuery}
+      />
     {/each}
-    {#if !shareId}
+    {#if !shareId && !readonly}
       <div class="flex w-[350px] shrink-0 flex-col space-y-2 rounded-sm px-2 pt-2 transition-all">
         <Popover.Root>
           <Popover.Trigger asChild let:builder>
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 44c2e8b32..807667003 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
@@ -2,15 +2,15 @@
   import { page } from "$app/stores"
   import GridViewDataTable from "$lib/components/blocks/grid-view/grid-view-data-table.svelte"
   import { preferences } from "$lib/store/persisted.store"
-  import { createRecordsStore, setRecordsStore, type RecordsStore } from "$lib/store/records.store"
+  import { createRecordsStore, setRecordsStore } from "$lib/store/records.store"
   import { getTable } from "$lib/store/table.store"
   import { trpc } from "$lib/trpc/client"
   import { createQuery } from "@tanstack/svelte-query"
   import { Records, type IRecordsDTO } from "@undb/table"
-  import { derived, writable, type Readable } from "svelte/store"
+  import { derived, type Readable } from "svelte/store"
   import { queryParam, ssp } from "sveltekit-search-params"
 
-  export let viewId: Readable<string>
+  export let viewId: Readable<string | undefined>
 
   const t = getTable()
   const perPage = derived(preferences, ($preferences) => $preferences.gridViewPerPage ?? 50)
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 2ceed1521..5f8fd974b 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
@@ -8,22 +8,28 @@
   import ViewFields from "../view-fields/view-fields.svelte"
   import ShareViewButton from "../share/share-view-button.svelte"
   import BulkUpdateRecordsButton from "../bulk-update-records/bulk-update-records-button.svelte"
+
+  export let readonly = false
 </script>
 
 <div class="flex items-center justify-between gap-2 border-b px-4 py-2">
   <div class="flex items-center gap-2">
-    <CreateRecordButton />
-    <ViewFilterEditor />
-    <ViewColorEditor />
-    <ViewSort />
-    <ViewFields />
+    {#if !readonly}
+      <CreateRecordButton />
+    {/if}
+    <ViewFilterEditor {readonly} />
+    <ViewColorEditor {readonly} />
+    <ViewSort {readonly} />
+    <ViewFields {readonly} />
     <slot></slot>
   </div>
 
   <div class="flex items-center gap-2">
-    <BulkUpdateRecordsButton />
-    <CreateFieldButton />
-    <ShareViewButton />
+    {#if !readonly}
+      <BulkUpdateRecordsButton />
+      <CreateFieldButton />
+      <ShareViewButton />
+    {/if}
     <RecordsSearch />
   </div>
 </div>
diff --git a/apps/frontend/src/lib/components/blocks/tables-nav/tables-nav.svelte b/apps/frontend/src/lib/components/blocks/tables-nav/tables-nav.svelte
index fd367f191..bb2804f7d 100644
--- a/apps/frontend/src/lib/components/blocks/tables-nav/tables-nav.svelte
+++ b/apps/frontend/src/lib/components/blocks/tables-nav/tables-nav.svelte
@@ -5,7 +5,6 @@
     ChevronRightIcon,
     DatabaseIcon,
     HardDriveIcon,
-    SheetIcon,
     PlusIcon,
     EllipsisIcon,
     PencilIcon,
diff --git a/apps/frontend/src/lib/components/blocks/template/template-card.svelte b/apps/frontend/src/lib/components/blocks/template/template-card.svelte
index 0a2f37312..c35b2dc76 100644
--- a/apps/frontend/src/lib/components/blocks/template/template-card.svelte
+++ b/apps/frontend/src/lib/components/blocks/template/template-card.svelte
@@ -7,7 +7,13 @@
   import { toast } from "svelte-sonner"
   import { invalidateAll, goto } from "$app/navigation"
   import { IMPORT_TEMPLATE_MODAL, closeModal } from "$lib/store/modal.store"
-  import { LoaderCircleIcon, FullscreenIcon } from "lucide-svelte"
+  import { FullscreenIcon } from "lucide-svelte"
+  import * as Dialog from "$lib/components/ui/dialog"
+  import TemplatePreview from "./template-preview.svelte"
+  import { Checkbox } from "$lib/components/ui/checkbox/index.js"
+  import Label from "$lib/components/ui/label/label.svelte"
+
+  let includeData = true
 
   export let template: ITemplateDTO
 
@@ -46,19 +52,59 @@
     <p>Card Content</p>
   </Card.Content> -->
   <Card.Footer class="p-0">
-    <Button
-      variant="outline"
-      class="w-full opacity-0 transition-opacity duration-300 group-hover:opacity-100"
-      size="sm"
-      disabled={$createFromTemplate.isPending}
-      on:click={() => $createFromTemplate.mutate({ id: template.id })}
-    >
-      {#if $createFromTemplate.isPending}
-        <LoaderCircleIcon class="mr-2 size-4 animate-spin" />
-      {:else}
-        <FullscreenIcon class="mr-2 size-4" />
-      {/if}
-      Import Template
-    </Button>
+    <Dialog.Root>
+      <Dialog.Trigger asChild let:builder>
+        <Button
+          builders={[builder]}
+          variant="outline"
+          class="w-full opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+          size="sm"
+          disabled={$createFromTemplate.isPending}
+        >
+          <FullscreenIcon class="mr-2 size-4" />
+          Preview Template
+        </Button>
+      </Dialog.Trigger>
+      <Dialog.Content class="flex h-[90%] !w-[90%] !max-w-none flex-col overflow-hidden">
+        <Dialog.Header class="flex flex-row justify-between">
+          <div class="space-y-2">
+            <Dialog.Title>
+              <span>
+                Preview template {template.name}
+              </span>
+            </Dialog.Title>
+            <Dialog.Description class="max-w-4xl">
+              {template.description}
+            </Dialog.Description>
+          </div>
+          <div class="mr-10 space-y-2">
+            <Button
+              disabled={$createFromTemplate.isPending}
+              on:click={() => $createFromTemplate.mutate({ id: template.id, includeData })}
+            >
+              {#if $createFromTemplate.isPending}
+                <LoaderCircleIcon class="mr-2 size-4 animate-spin" />
+              {:else}
+                Use this Template
+              {/if}
+            </Button>
+
+            <div class="flex items-center space-x-2">
+              <Checkbox id="terms" bind:checked={includeData} />
+              <Label
+                for="terms"
+                class="text-xs font-medium leading-none text-gray-500 peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                Include data.
+              </Label>
+            </div>
+          </div>
+        </Dialog.Header>
+
+        <div class="flex-1 overflow-auto rounded-sm border">
+          <TemplatePreview {template} />
+        </div>
+      </Dialog.Content>
+    </Dialog.Root>
   </Card.Footer>
 </Card.Root>
diff --git a/apps/frontend/src/lib/components/blocks/template/template-grid-view.svelte b/apps/frontend/src/lib/components/blocks/template/template-grid-view.svelte
new file mode 100644
index 000000000..68f85af25
--- /dev/null
+++ b/apps/frontend/src/lib/components/blocks/template/template-grid-view.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import GridViewDataTable from "$lib/components/blocks/grid-view/grid-view-data-table.svelte"
+  import { createRecordsStore, setRecordsStore } from "$lib/store/records.store"
+  import { writable } from "svelte/store"
+  import { RecordDO, Records } from "@undb/table"
+  import { type Readable } from "svelte/store"
+  import { onDestroy } from "svelte"
+
+  export let viewId: Readable<string | undefined>
+  export let records: RecordDO[]
+
+  const perPage = writable(50)
+  const currentPage = writable(1)
+
+  let store = createRecordsStore()
+  setRecordsStore(store)
+
+  store.setRecords(new Records(records), new Date().getTime())
+  onDestroy(() => {
+    store.clearRecords()
+  })
+</script>
+
+{#if store}
+  <GridViewDataTable {viewId} readonly {perPage} {currentPage} isLoading={false} total={records.length} />
+{/if}
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 ee2ef43f8..95938d800 100644
--- a/apps/frontend/src/lib/components/blocks/template/template-preview.svelte
+++ b/apps/frontend/src/lib/components/blocks/template/template-preview.svelte
@@ -1,5 +1,194 @@
 <script lang="ts">
-  import type { ITemplateDTO } from "@undb/template"
+  import { TemplateFactory, type ITemplateDTO } from "@undb/template"
+  import { writable } from "svelte/store"
+  import { derived } from "svelte/store"
+  import { setTable } from "$lib/store/table.store"
+  import TemplateGridView from "$lib/components/blocks/template/template-grid-view.svelte"
+  import KanbanView from "$lib/components/blocks/kanban-view/kanban-view.svelte"
+  import { cn } from "$lib/utils"
+  import { HardDriveIcon, DatabaseIcon, ViewIcon, ChevronRightIcon } from "lucide-svelte"
+  import * as Collapsible from "$lib/components/ui/collapsible"
 
   export let template: ITemplateDTO
+
+  let t = TemplateFactory.create(template.template.template, [], "")
+  let tables = t.flatMap((base) => base.tables.map(({ table }) => table))
+  let bases = t.map((base) => base.base)
+
+  let currentBaseId = writable<string | undefined>(bases.at(0)?.id.value)
+  let currentBase = derived(currentBaseId, ($currentBaseId) => {
+    return bases.find((base) => base.id.value === $currentBaseId)
+  })
+  let currentTableId = writable<string | undefined>(tables.at(0)?.id.value)
+  let currentViewId = writable<string | undefined>(undefined)
+  let currentTable = derived(currentTableId, ($currentTableId) => {
+    return tables.find((table) => table.id.value === $currentTableId)
+  })
+  let records = derived(currentTableId, ($currentTableId) => {
+    return t.flatMap((base) => base.tables.find((t) => t.table.id.value === $currentTableId)?.records ?? [])
+  })
+
+  let currentView = derived([currentTable, currentViewId], ([$currentTable, $currentViewId]) => {
+    return $currentTable?.views.getViewById($currentViewId)
+  })
+
+  $: if ($currentTable) {
+    setTable(writable($currentTable))
+  }
+
+  let open: Record<string, boolean> =
+    tables.length > 0
+      ? {
+          [tables.at(0)!.baseId]: true,
+          [tables.at(0)!.id.value]: true,
+        }
+      : {}
 </script>
+
+{#if template.template.type === "base"}
+  <div class="flex h-full overflow-auto">
+    <div class="f-full w-[350px] border-r px-4 py-2">
+      <nav class="items-start gap-1 px-1.5 text-sm font-medium">
+        {#if bases?.length}
+          <ul>
+            {#each bases as base}
+              {#if base}
+                {@const active = base.id.value === $currentTable?.baseId && !$currentTableId && !$currentViewId}
+                {@const baseTables = tables.filter((t) => t?.baseId === base.id.value)}
+                <Collapsible.Root bind:open={open[base.id.value]}>
+                  <div
+                    class={cn(
+                      "group flex h-8 items-center justify-between gap-1 overflow-hidden pl-4 pr-2 transition-all",
+                      active ? "text-background rounded-md bg-gray-800/90" : "hover:bg-gray-100",
+                    )}
+                  >
+                    <button
+                      class={cn(
+                        "flex h-full flex-1 items-center overflow-hidden font-normal text-gray-600",
+                        active && "text-background font-medium",
+                      )}
+                    >
+                      <HardDriveIcon class="mr-2 h-4 w-4" />
+                      <span class="truncate">
+                        {base.name.value}
+                      </span>
+                    </button>
+
+                    <div
+                      class={cn(
+                        "item-center text-muted-foreground flex justify-center gap-2 opacity-0 transition-all group-hover:opacity-100",
+                        active && "text-background",
+                      )}
+                    >
+                      <Collapsible.Trigger class="h-full">
+                        <ChevronRightIcon
+                          class={cn(
+                            "text-muted-foreground h-4 w-4 transition-all",
+                            open[base.id.value] && "rotate-90",
+                            active && "text-background",
+                          )}
+                        />
+                      </Collapsible.Trigger>
+                    </div>
+                  </div>
+                  <Collapsible.Content class="space-y-1 pt-1">
+                    {#each baseTables as table}
+                      {#if table}
+                        {@const active = table.id.value === $currentTableId && !$currentViewId}
+                        {@const views = table.views.views.filter((view) => !view.isDefault)}
+                        <Collapsible.Root bind:open={open[table.id.value]}>
+                          <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 = table.id.value
+                                $currentViewId = undefined
+                              }}
+                              title={table.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">
+                                {table.name.value}
+                              </span>
+                            </button>
+                            <div class="flex items-center gap-2 opacity-0 transition-all group-hover:opacity-100">
+                              {#if views.length > 0}
+                                <Collapsible.Trigger
+                                  on:click={(e) => {
+                                    e.preventDefault()
+                                    e.stopPropagation()
+                                    open[table.id.value] = !open[table.id.value]
+                                  }}
+                                  class={cn(
+                                    "flex h-5 w-5 items-center justify-center rounded-md hover:bg-gray-200",
+                                    active && "hover:bg-primary",
+                                  )}
+                                >
+                                  <ChevronRightIcon
+                                    class={cn(
+                                      "text-muted-foreground h-4 w-4 transition-all",
+                                      open[table.id.value] && "rotate-90",
+                                      active && "text-background",
+                                    )}
+                                  />
+                                </Collapsible.Trigger>
+                              {/if}
+                            </div>
+                          </div>
+                          <Collapsible.Content>
+                            {#each views as view}
+                              {@const active = view.id.value === $currentViewId}
+                              <div
+                                class={cn(
+                                  "group flex h-8 items-center justify-between gap-1 rounded-sm pl-14 pr-2 transition-all",
+                                  active ? "bg-gray-800/90" : "hover:bg-gray-100",
+                                )}
+                              >
+                                <button
+                                  class={cn(
+                                    "flex h-full flex-1 items-center text-xs font-normal",
+                                    active && "text-background font-medium",
+                                  )}
+                                  on:click={() => {
+                                    $currentTableId = table.id.value
+                                    $currentViewId = view.id.value
+                                  }}
+                                >
+                                  <ViewIcon type={view.type} class="mr-2 h-4 w-4" />
+                                  {view.name.value}
+                                </button>
+                              </div>
+                            {/each}
+                          </Collapsible.Content>
+                        </Collapsible.Root>
+                      {/if}
+                    {/each}
+                  </Collapsible.Content>
+                </Collapsible.Root>
+              {/if}
+            {/each}
+          </ul>
+        {/if}
+      </nav>
+    </div>
+    {#key $currentTableId}
+      {#if $currentTable}
+        <section class="flex h-full flex-1 flex-col overflow-auto">
+          {#if $currentView?.type === "grid"}
+            <TemplateGridView viewId={currentViewId} records={$records} />
+          {:else if $currentView?.type === "kanban"}
+            <KanbanView viewId={currentViewId} records={$records} disableRecordQuery readonly />
+          {/if}
+        </section>
+      {/if}
+    {/key}
+  </div>
+{/if}
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 aa084d579..aca8ba32e 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
@@ -51,10 +51,10 @@
   }
 </script>
 
-<Popover.Root bind:open>
+<Popover.Root bind:open portal="body">
   <Popover.Trigger asChild let:builder>
     <Button
-      disabled={!readonly && (!$hasPermission("table:update") && (!color || color?.isEmpty))}
+      disabled={!readonly && !$hasPermission("table:update") && (!color || color?.isEmpty)}
       variant={count || open ? "secondary" : "ghost"}
       builders={[builder]}
       size="sm"
@@ -71,7 +71,7 @@
       <div class="text-muted-foreground px-4 py-3 pb-0 text-xs">Color</div>
     {/if}
     <FiltersEditor
-    {readonly}
+      {readonly}
       bind:value={$value}
       table={$table}
       disableGroup
@@ -87,10 +87,10 @@
         />
       </div>
       <Button size="sm" variant="outline" on:click={() => handleSubmit(validValue)} slot="footer">Submit</Button>
-    <div slot="empty" class="flex flex-col items-center gap-3 px-4 py-6 text-center">
-      <FilterXIcon class="text-primary h-10 w-10" />
-      <h3 class="text-muted-foreground text-sm font-semibold tracking-tight">There's no color filter</h3>
-    </div>
+      <div slot="empty" class="flex flex-col items-center gap-3 px-4 py-6 text-center">
+        <FilterXIcon class="text-primary h-10 w-10" />
+        <h3 class="text-muted-foreground text-sm font-semibold tracking-tight">There's no color filter</h3>
+      </div>
     </FiltersEditor>
   </Popover.Content>
 </Popover.Root>
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 c4a24e1d8..07fd3db41 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
@@ -18,6 +18,8 @@
   import FieldMenu from "../field/field-menu.svelte"
   import { hasPermission } from "$lib/store/space-member.store"
 
+  export let readonly = false
+
   const table = getTable()
   $: fields = $table.getOrderedFields(undefined, $viewId)
   $: viewFieldsVo = $table.getViewFields($viewId)
@@ -47,6 +49,8 @@
   })
 
   const setViewFields = async () => {
+    if (readonly) return
+
     await tick()
     $setViewFieldsMutation.mutate({
       tableId: $table.id.value,
@@ -56,6 +60,7 @@
   }
 
   function swapFields(oldIndex: number, newIndex: number) {
+    if (readonly) return
     const fields = [...viewFields]
     const [removed] = fields.splice(oldIndex, 1)
     fields.splice(newIndex, 0, removed)
@@ -76,6 +81,8 @@
   })
 
   const setViewOption = async (value: boolean) => {
+    if (readonly) return
+
     viewOption.showSystemFields = value
     await tick()
     $setViewOptionMutation.mutate({
@@ -86,7 +93,7 @@
   }
 </script>
 
-<Popover.Root bind:open>
+<Popover.Root bind:open portal="body">
   <Popover.Trigger asChild let:builder>
     <Button variant={open || !!hiddenCount ? "secondary" : "ghost"} builders={[builder]} size="sm">
       <ListIcon class="mr-2 h-4 w-4" />
@@ -115,6 +122,7 @@
           class="h-full p-2"
           animation={200}
           handle=".handler"
+          disabled={readonly}
           onEnd={(event) => {
             if (isNumber(event.oldIndex) && isNumber(event.newIndex)) {
               swapFields(event.oldIndex, event.newIndex)
@@ -128,7 +136,9 @@
                 <div class="flex items-center gap-2">
                   <Switch
                     size="sm"
-                    disabled={(visibleCount === 1 && viewFields.length === 1) || !$hasPermission("table:update")}
+                    disabled={(visibleCount === 1 && viewFields.length === 1) ||
+                      !$hasPermission("table:update") ||
+                      readonly}
                     checked={!viewField.hidden}
                     onCheckedChange={(checked) => {
                       viewField.hidden = !checked
@@ -141,7 +151,7 @@
                   </div>
                 </div>
                 <div class="inline-flex items-center gap-1">
-                  {#if $hasPermission("table:update")}
+                  {#if $hasPermission("table:update") && !readonly}
                     <button class="text-muted-foreground handler">
                       <GripVerticalIcon class="h-3 w-3" />
                     </button>
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 3d4612db6..a15cdfd59 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
@@ -56,7 +56,7 @@
   }
 </script>
 
-<Popover.Root bind:open>
+<Popover.Root bind:open portal="body">
   <Popover.Trigger asChild let:builder>
     <Button
       variant={count || open ? "secondary" : "ghost"}
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 49b7b16c6..037492e03 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
@@ -88,7 +88,7 @@
   }
 </script>
 
-<Popover.Root bind:open>
+<Popover.Root bind:open portal="body">
   <Popover.Trigger asChild let:builder>
     <Button
       variant={count || open ? "secondary" : "ghost"}
diff --git a/packages/command-handlers/src/handlers/create-from-template.command-handler.ts b/packages/command-handlers/src/handlers/create-from-template.command-handler.ts
index 06cd0e06d..532383cd1 100644
--- a/packages/command-handlers/src/handlers/create-from-template.command-handler.ts
+++ b/packages/command-handlers/src/handlers/create-from-template.command-handler.ts
@@ -3,7 +3,6 @@ import { mustGetCurrentSpaceId } from "@undb/context/server"
 import { commandHandler } from "@undb/cqrs"
 import { singleton } from "@undb/di"
 import { type ICommandHandler } from "@undb/domain"
-import { createLogger } from "@undb/logger"
 import { injectTemplateService, type ITemplateService } from "@undb/template"
 
 @commandHandler(CreateFromTemplateCommand)
@@ -11,8 +10,6 @@ import { injectTemplateService, type ITemplateService } from "@undb/template"
 export class CreateFromTemplateCommandHandler
   implements ICommandHandler<CreateFromTemplateCommand, ICreateFromTemplateCommandOutput>
 {
-  private readonly logger = createLogger(CreateFromTemplateCommandHandler.name)
-
   constructor(
     @injectTemplateService()
     private readonly templateService: ITemplateService,
diff --git a/packages/commands/src/create-from-template.command.ts b/packages/commands/src/create-from-template.command.ts
index f11ca68fc..dfb6deeaf 100644
--- a/packages/commands/src/create-from-template.command.ts
+++ b/packages/commands/src/create-from-template.command.ts
@@ -15,9 +15,11 @@ export type ICreateFromTemplateCommandOutput = z.infer<typeof createFromTemplate
 
 export class CreateFromTemplateCommand extends Command implements ICreateFromTemplateCommand {
   public readonly id: string
+  public readonly includeData?: boolean
 
   constructor(props: CommandProps<ICreateFromTemplateCommand>) {
     super(props)
     this.id = props.id
+    this.includeData = props.includeData
   }
 }
diff --git a/packages/space/src/value-objects/space-id.vo.ts b/packages/space/src/value-objects/space-id.vo.ts
index eb31ac5f9..6ba0bbc45 100644
--- a/packages/space/src/value-objects/space-id.vo.ts
+++ b/packages/space/src/value-objects/space-id.vo.ts
@@ -1,7 +1,7 @@
 import { NanoID } from "@undb/domain"
 import { z } from "@undb/zod"
 
-export const spaceIdSchema = z.string().min(1)
+export const spaceIdSchema = z.string()
 
 export type ISpaceId = z.infer<typeof spaceIdSchema>
 
diff --git a/packages/template/src/index.ts b/packages/template/src/index.ts
index 79e2aa720..76afc8f0d 100644
--- a/packages/template/src/index.ts
+++ b/packages/template/src/index.ts
@@ -2,4 +2,5 @@ export * from "./dto"
 export * from "./schema"
 export * from "./service"
 export * from "./template"
+export * from "./template.factory"
 export * from "./templates"
diff --git a/packages/template/src/templates/projectManagement.base.json b/packages/template/src/templates/projectManagement.base.json
index f6e000fad..d5fc284a5 100644
--- a/packages/template/src/templates/projectManagement.base.json
+++ b/packages/template/src/templates/projectManagement.base.json
@@ -91,6 +91,7 @@
           {
             "id": "project-4",
             "Title": "AI Customer Service System",
+            "Status": "inProgress",
             "Due Date": "2024-06-30"
           },
           {
@@ -106,6 +107,7 @@
           {
             "id": "project-7",
             "Title": "Virtual Reality Education Platform",
+            "Status": "inProgress",
             "Due Date": "2024-08-31"
           },
           {
@@ -116,6 +118,7 @@
           {
             "id": "project-9",
             "Title": "Big Data Analytics Tool Development",
+            "Status": "inProgress",
             "Due Date": "2024-07-31"
           },
           {
@@ -141,6 +144,7 @@
           {
             "id": "project-14",
             "Title": "Smart City Traffic Management",
+            "Status": "done",
             "Due Date": "2024-09-30"
           },
           {
@@ -264,7 +268,7 @@
             "type": "grid",
             "fields": [{ "fieldId": "status", "hidden": true }],
             "option": {
-              "showSystemFields": true
+              "showSystemFields": false
             },
             "filter": {
               "conjunction": "and",