From cc68ea45392ffb240ffe9ad9ae7c89abaf74e620 Mon Sep 17 00:00:00 2001
From: Nawaz Dhandala <hello@nawazdhandala.com>
Date: Mon, 30 Mar 2026 15:36:11 +0100
Subject: [PATCH] feat: implement modal for template selection in Dashboards
 and update service to handle default dashboard config

---
 .../src/Pages/Dashboards/Dashboards.tsx       | 64 ++++++++++++-------
 Common/Server/Services/DashboardService.ts    | 12 +++-
 2 files changed, 50 insertions(+), 26 deletions(-)

diff --git a/App/FeatureSet/Dashboard/src/Pages/Dashboards/Dashboards.tsx b/App/FeatureSet/Dashboard/src/Pages/Dashboards/Dashboards.tsx
index 4f62dcf425..a792159251 100644
--- a/App/FeatureSet/Dashboard/src/Pages/Dashboards/Dashboards.tsx
+++ b/App/FeatureSet/Dashboard/src/Pages/Dashboards/Dashboards.tsx
@@ -27,16 +27,19 @@ import {
 } from "Common/Types/Dashboard/DashboardTemplates";
 import DashboardViewConfig from "Common/Types/Dashboard/DashboardViewConfig";
 import { JSONObject } from "Common/Types/JSON";
-import Card from "Common/UI/Components/Card/Card";
+import IconProp from "Common/Types/Icon/IconProp";
+import Modal, { ModalWidth } from "Common/UI/Components/Modal/Modal";
 
 const Dashboards: FunctionComponent<PageComponentProps> = (): ReactElement => {
   const [selectedTemplate, setSelectedTemplate] =
     useState<DashboardTemplateType | null>(null);
   const [showCreateForm, setShowCreateForm] = useState<boolean>(false);
+  const [showTemplateModal, setShowTemplateModal] = useState<boolean>(false);
 
   const handleTemplateClick: (type: DashboardTemplateType) => void =
     useCallback((type: DashboardTemplateType): void => {
       setSelectedTemplate(type);
+      setShowTemplateModal(false);
       setShowCreateForm(true);
     }, []);
 
@@ -56,28 +59,34 @@ const Dashboards: FunctionComponent<PageComponentProps> = (): ReactElement => {
         },
       ]}
     >
-      <Card
-        title="Create from Template"
-        description="Choose a template to quickly get started with a pre-configured dashboard."
-      >
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-          {DashboardTemplates.map(
-            (template: DashboardTemplate): ReactElement => {
-              return (
-                <DashboardTemplateCard
-                  key={template.type}
-                  title={template.name}
-                  description={template.description}
-                  icon={template.icon}
-                  onClick={() => {
-                    handleTemplateClick(template.type);
-                  }}
-                />
-              );
-            },
-          )}
-        </div>
-      </Card>
+      {showTemplateModal && (
+        <Modal
+          title="Create from Template"
+          description="Choose a template to quickly get started with a pre-configured dashboard."
+          onClose={() => {
+            setShowTemplateModal(false);
+          }}
+          modalWidth={ModalWidth.Large}
+        >
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+            {DashboardTemplates.map(
+              (template: DashboardTemplate): ReactElement => {
+                return (
+                  <DashboardTemplateCard
+                    key={template.type}
+                    title={template.name}
+                    description={template.description}
+                    icon={template.icon}
+                    onClick={() => {
+                      handleTemplateClick(template.type);
+                    }}
+                  />
+                );
+              },
+            )}
+          </div>
+        </Modal>
+      )}
 
       <ModelTable<Dashboard>
         modelType={Dashboard}
@@ -92,6 +101,15 @@ const Dashboards: FunctionComponent<PageComponentProps> = (): ReactElement => {
         cardProps={{
           title: "Dashboards",
           description: "Here is a list of dashboards for this project.",
+          buttons: [
+            {
+              title: "Create from Template",
+              onClick: () => {
+                setShowTemplateModal(true);
+              },
+              icon: IconProp.Template,
+            },
+          ],
         }}
         showViewIdButton={true}
         noItemsMessage={"No dashboards found."}
diff --git a/Common/Server/Services/DashboardService.ts b/Common/Server/Services/DashboardService.ts
index b7ad648768..94724d1dcd 100644
--- a/Common/Server/Services/DashboardService.ts
+++ b/Common/Server/Services/DashboardService.ts
@@ -55,9 +55,15 @@ export class Service extends DatabaseService<Model> {
       }
     }
 
-    // make sure dashboard config is empty.
-    createBy.data.dashboardViewConfig =
-      DashboardViewConfigUtil.createDefaultDashboardViewConfig();
+    // use default empty config only if no template config was provided.
+    if (
+      !createBy.data.dashboardViewConfig ||
+      !createBy.data.dashboardViewConfig.components ||
+      createBy.data.dashboardViewConfig.components.length === 0
+    ) {
+      createBy.data.dashboardViewConfig =
+        DashboardViewConfigUtil.createDefaultDashboardViewConfig();
+    }
 
     return Promise.resolve({ createBy, carryForward: null });
   }