diff --git a/src/routes.js b/src/routes.js
index 71c45c6..bc7f34c 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -50,6 +50,7 @@ const UserShift = React.lazy(() => import('./views/SimproV2/UserShift'));
const Kanban = React.lazy(() => import('./views/SimproV2/Kanban'));
// const DashboardProject = React.lazy(() => import('./views/DashboardProject'));
const DashboardBOD = React.lazy(() => import('./views/Dashboard/DashboardBOD'));
+const DashboardDyna = React.lazy(() => import('./views/Dashboard/DashboardDyna'));
const DashboardDND = React.lazy(() => import('./components/wj/App'))
const DashboardCustomer = React.lazy(() => import('./views/Dashboard/DashboardCustomer'));
const DashboardProject = React.lazy(() => import('./views/Dashboard/DashboardProject'));
@@ -63,6 +64,7 @@ const SalesContact = React.lazy(() => import('./views/SimproV2/SalesContact'))
const routes = [
{ path: '/', exact: true, name: 'Home' },
{ path: '/dashboard', name: 'DashboardBOD', component: DashboardBOD },
+ { path: '/dashboard-dyna', name: 'DashboardBOD', component: DashboardDyna },
{ path: '/dashboard-dnd', name: 'DashboardBOD', component: DashboardDND },
{ path: '/dashboard-customer/:PROJECT_ID/:GANTT_ID/:SCURVE', name: 'DashboardCustomer', component: DashboardCustomer },
{ path: '/dashboard-project/:PROJECT_ID/:GANTT_ID/:Header', exact: true, name: 'Dashboard Project', component: DashboardProject },
diff --git a/src/views/Dashboard/DashboardDyna.js b/src/views/Dashboard/DashboardDyna.js
new file mode 100644
index 0000000..2443392
--- /dev/null
+++ b/src/views/Dashboard/DashboardDyna.js
@@ -0,0 +1,296 @@
+import React, { useState } from 'react';
+import { Row, Col, Button, Modal } from 'antd';
+import { RightOutlined, LeftOutlined } from '@ant-design/icons';
+import { Widgets } from 'react-awesome-query-builder';
+
+const DashboardDyna = () => {
+ const [templates, setTemplates] = useState([]);
+ const [widgets, setWidgets] = useState([]);
+ const [templateColSpan, setTemplateColSpan] = useState(5);
+ const [widgetColSpan, setWidgetColSpan] = useState(5);
+ const [dashboardColSpan, setDashboardColSpan] = useState(19);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [templateIndex, setTemplateIndex] = useState(0);
+ const [columnIndex, setColumnIndex] = useState(0);
+
+ const addWidget = (widget) => {
+ // Make a copy of the current widgets state
+ const newWidgets = [...widgets];
+ if (!newWidgets[templateIndex]) {
+ newWidgets[templateIndex] = []
+ }
+
+ // Make sure the templateIndex and columnIndex are within bounds
+ // if (templateIndex <= newWidgets.length && columnIndex <= newWidgets[templateIndex].length) {
+ // Make a copy of the nested array at templateIndex
+ const nestedArray = [...newWidgets[templateIndex]];
+
+ // Update the value at columnIndex
+ nestedArray[columnIndex] = widget;
+
+ // Update the nested array in the newWidgets array
+ newWidgets[templateIndex] = nestedArray;
+
+ // Update the state with the newWidgets array
+ setWidgets(newWidgets);
+ // }
+ const lastIndex = templates.length - 1;
+ if (lastIndex >= 0) {
+ let id = templates[templateIndex].id;
+ let updatedTemplate = checkTemplate(id, newWidgets, true);
+ let updatedTemplates = [...templates];
+ updatedTemplates[templateIndex] = updatedTemplate;
+ setTemplates(updatedTemplates);
+ }
+ };
+
+
+ const addTemplate = (template) => {
+ const lastIndex = templates.length - 1;
+ setTemplates([...templates, checkTemplate(template)]);
+ };
+
+ const clearTemplates = () => {
+ setTemplates([]);
+ clearWidgets()
+ };
+
+ const clearWidgets = () => {
+ setWidgets([]);
+ };
+
+ const showModal = (template = 0, column = 0) => {
+ setTemplateIndex(template);
+ setColumnIndex(column);
+ setIsModalOpen(true);
+ };
+
+ const handleOk = () => {
+ setIsModalOpen(false);
+ };
+
+ const handleCancel = () => {
+ setIsModalOpen(false);
+ };
+
+ const checkTemplate = (template, widgets = null, add_widget = false) => {
+ let component, widgetCount, id = template;
+ let templateIndex = templates.length;
+ if (add_widget) {
+ templateIndex--
+ }
+ switch (template) {
+ case 0:
+ component = (
+
+ showModal(templateIndex, 0)}>
+
+ {widgets ? widgets[templateIndex][0] : null}
+
+
+
+ );
+ widgetCount = 1;
+ break;
+ case 1:
+ component = (
+
+ showModal(templateIndex, 0)}>
+
+ {widgets ? widgets[templateIndex][0] : null}
+
+ showModal(templateIndex, 1)}>
+
+ {widgets ? widgets[templateIndex][1] : null}
+
+ showModal(templateIndex, 2)}>
+
+ {widgets ? widgets[templateIndex][2] : null}
+
+ showModal(templateIndex, 3)}>
+
+ {widgets ? widgets[templateIndex][3] : null}
+
+
+ );
+ widgetCount = 4;
+ break;
+ case 2:
+ component = (
+
+ showModal(templateIndex, 0)}>
+
+ {widgets ? widgets[templateIndex][0] : null}
+
+ showModal(templateIndex, 1)}>
+
+ {widgets ? widgets[templateIndex][1] : null}
+
+
+ );
+ widgetCount = 2;
+ break;
+ case 3:
+ component = (
+
+ showModal(templateIndex, 0)}>
+
+ {widgets ? widgets[templateIndex][0] : null}
+
+ showModal(templateIndex, 1)}>
+
+ {widgets ? widgets[templateIndex][1] : null}
+
+
+ );
+ widgetCount = 2;
+ break;
+ default:
+ break;
+ }
+ return { component, widgetCount, id };
+ };
+
+ const toggleTemplateColumn = () => {
+ if (templateColSpan === 1) {
+ setTemplateColSpan(5);
+ setDashboardColSpan(dashboardColSpan - 4);
+ } else {
+ setTemplateColSpan(1);
+ setDashboardColSpan(dashboardColSpan + 4);
+ }
+ };
+
+ const toggleWidgetColumn = () => {
+ if (widgetColSpan === 1) {
+ setWidgetColSpan(5);
+ setDashboardColSpan(dashboardColSpan - 4);
+ } else {
+ setWidgetColSpan(1);
+ setDashboardColSpan(dashboardColSpan + 4);
+ }
+ };
+
+ return (
+
+
+
+
+
+
+ {templateColSpan === 1 ?
+
} onClick={toggleTemplateColumn}>
+ :
+ <>
+
Template
+
+
addTemplate(0)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
+
+
+
+
+
addTemplate(1)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
addTemplate(2)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
+
+
+
+
+
+
+
+
addTemplate(3)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
+
+
+
+
+
+
+
+
} onClick={toggleTemplateColumn}>
+
+ }
+
+
+
+
+
+
Dashboard
+ {templates.length > 0 ? templates.map((template) => {
+ return template.component;
+ }) : null}
+
+
+
+
+
+
+
+
+ {widgetColSpan === 1 ?
+
} onClick={toggleWidgetColumn}>
+ :
+ <>
+
Widget
+
+
addWidget(0)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
+
+
+
+
+ Pie Chart Project By Role
+
+
+
addWidget(1)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
+
+
+
+
+ Pie Chart Project By Role
+
+
+
addWidget(2)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
+
+
+
+
+ Pie Chart Project By Role
+
+
+
addWidget(3)} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
+
+
+
+
+ Pie Chart Project By Role
+
+
+
+ }
+
+
+
+