From 16e912e85f46fc3db67090eebf2930f05846e62f Mon Sep 17 00:00:00 2001
From: Serhii Pylypchuk <pylypchukserhii1991@gmail.com>
Date: Tue, 25 Mar 2025 11:24:22 +0400
Subject: [PATCH 1/5] [dev] refactoring

---
 src/App.vue                                   |   22 +-
 src/components/Content/Content.vue            |    9 +-
 .../Content/LeftPanel/Accordion.vue           |   84 -
 .../Content/LeftPanel/Calendars.vue           |   57 +-
 src/components/Content/LeftPanel/Chart.vue    |   60 +
 src/components/Content/LeftPanel/Grid.vue     |   53 +-
 .../Content/LeftPanel/LeftContent.vue         |   36 +-
 src/components/Content/LeftPanel/Ribbon.vue   |   28 +-
 .../Content/LeftPanel/SlidersLayout.vue       |   59 +-
 .../Content/LeftPanel/TicketsDataview.vue     |   65 +-
 src/components/Content/LeftPanel/Tree.vue     |   27 +-
 .../Content/RightPanel/ButtonsForm.vue        |   43 +-
 src/components/Content/RightPanel/Chart.vue   |   24 +-
 .../Content/RightPanel/Colorpicker.vue        |   31 +-
 src/components/Content/RightPanel/Form.vue    |  163 +-
 .../Content/RightPanel/MessageDataview.vue    |   58 +-
 .../Content/RightPanel/RightContent.vue       |   24 +-
 .../{ => MainContainer}/MainContainer.vue     |   22 +-
 src/components/{ => MainContainer}/Tabbar.vue |   31 +-
 .../{ => MainContainer}/Toolbar.vue           |   36 +-
 src/components/{ => Sidebar}/Sidebar.vue      |   33 +-
 src/data.js                                   | 1457 +++++++++++++++++
 src/store.js                                  | 1429 ----------------
 23 files changed, 1845 insertions(+), 2006 deletions(-)
 delete mode 100644 src/components/Content/LeftPanel/Accordion.vue
 create mode 100644 src/components/Content/LeftPanel/Chart.vue
 rename src/components/{ => MainContainer}/MainContainer.vue (85%)
 rename src/components/{ => MainContainer}/Tabbar.vue (56%)
 rename src/components/{ => MainContainer}/Toolbar.vue (71%)
 rename src/components/{ => Sidebar}/Sidebar.vue (56%)
 create mode 100644 src/data.js
 delete mode 100644 src/store.js

diff --git a/src/App.vue b/src/App.vue
index e09a79d..7a964e5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,23 +1,23 @@
-<template>
-  <main>
-    <Sidebar />
-    <MainContainer />
-  </main>
-</template>
-
 <script>
-  import MainContainer from "./components/MainContainer.vue";
-  import Sidebar from "./components/Sidebar.vue";
+  import MainContainer from "./components/MainContainer/MainContainer.vue";
+  import Sidebar from "./components/Sidebar/Sidebar.vue";
   import "@dhx/trial-suite/codebase/suite.min.css";
 
   export default {
     components: {
       MainContainer,
-      Sidebar,
-    },
+      Sidebar
+    }
   };
 </script>
 
+<template>
+  <main>
+    <Sidebar />
+    <MainContainer />
+  </main>
+</template>
+
 <style scoped>
   main {
     height: 100%;
diff --git a/src/components/Content/Content.vue b/src/components/Content/Content.vue
index f033331..2dbbc67 100644
--- a/src/components/Content/Content.vue
+++ b/src/components/Content/Content.vue
@@ -12,8 +12,8 @@ import RightContent from "./RightPanel/RightContent.vue";
 export default {
   components: {
     LeftContent,
-    RightContent,
-  },
+    RightContent
+  }
 };
 </script>
   
@@ -25,9 +25,8 @@ export default {
   padding: 12px;
   gap: 12px;
 }
-</style>
-<style>
+
 .container {
   border: var(--dhx-border);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Content/LeftPanel/Accordion.vue b/src/components/Content/LeftPanel/Accordion.vue
deleted file mode 100644
index f73f882..0000000
--- a/src/components/Content/LeftPanel/Accordion.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div ref="node" class="container"></div>
-</template>
-
-<script>
-import { Chart, Layout } from "@dhx/trial-suite";
-import store from "../../../store.js";
-
-export default {
-  data() {
-    return {
-      node: null,
-      accordion: null,
-      chart: null,
-    };
-  },
-  mounted() {
-    this.accordion = new Layout(this.$refs.node, {
-      type: "line",
-      rows: [
-        {
-          header: "HOTELS",
-          height: "500px",
-          padding: 40,
-          id: "chart",
-          collapsable: true,
-        },
-      ],
-    });
-    this.chart = new Chart(null, {
-      type: "bar",
-      scales: {
-        bottom: {
-          text: "month",
-        },
-        left: {
-          maxTicks: 10,
-          max: 100,
-          min: 0,
-        },
-      },
-      series: [
-        {
-          id: "A",
-          value: "Won deals",
-          color: "none",
-          fill: "var(--dhx-color-primary)",
-          showText: true,
-          showTextTemplate: (sum) => `$${sum}`,
-        },
-        {
-          id: "B",
-          value: "Lost deals",
-          color: "none",
-          fill: "var(--dhx-color-primary-light-active)",
-          showText: true,
-          showTextTemplate: (sum) => `$${sum}`,
-        },
-        {
-          id: "all",
-          value: "All deals",
-          color: "none",
-          fill: "var(--dhx-color-primary-disabled)",
-          type: "area",
-          strokeWidth: 0,
-        },
-      ],
-      legend: {
-        series: ["A", "B", "all"],
-        halign: "right",
-        valign: "top",
-        itemPadding: 20,
-        margin: 40,
-      },
-    });
-    this.accordion.getCell("chart").attach(this.chart);
-    this.chart.data.parse(store.hotelsData);
-  },
-  beforeDestroy() {
-    this.accordion?.destructor();
-    this.chart?.destructor();
-  },
-};
-</script>
\ No newline at end of file
diff --git a/src/components/Content/LeftPanel/Calendars.vue b/src/components/Content/LeftPanel/Calendars.vue
index 6a12dea..98cf41a 100644
--- a/src/components/Content/LeftPanel/Calendars.vue
+++ b/src/components/Content/LeftPanel/Calendars.vue
@@ -1,56 +1,43 @@
-<template>
-  <div class="calendars-wrapper">
-    <div ref="weekNode" class="container dhx_layout_calendar_cell"></div>
-    <div ref="timepickerNode" class="container dhx_layout_calendar_cell"></div>
-    <div ref="yearNode" class="container dhx_layout_calendar_cell"></div>
-  </div>
-</template>
-
 <script>
 import { Calendar, Timepicker } from "@dhx/trial-suite";
 
 export default {
-  data() {
-    return {
-      weekNode: null,
-      timepickerNode: null,
-      yearNode: null,
-      week: null,
-      timePicker: null,
-      year: null,
-    };
-  },
   mounted() {
-    this.week = new Calendar(this.$refs.weekNode, {
+    this.week_calendar = new Calendar(this.$refs.week_container, {
       weekStart: "monday",
       timePicker: true,
       range: true,
-      value: [new Date(), new Date(Date.now() + 200000000)],
+      value: [new Date(), new Date(Date.now() + 200000000)]
     });
-    this.timePicker = new Timepicker(this.$refs.timepickerNode, {
+
+    this.timepicker = new Timepicker(this.$refs.timepicker_container, {
       controls: true,
-      value: new Date(),
+      value: new Date()
     });
-    this.year = new Calendar(this.$refs.yearNode, {
+
+    this.year_calendar = new Calendar(this.$refs.year_container, {
       timePicker: true,
       mode: "year",
-      value: new Date(),
+      value: new Date()
     });
   },
-  beforeDestroy() {
-    if (this.week) {
-      this.week.destructor();
-    }
-    if (this.timePicker) {
-      this.timePicker.destructor();
-    }
-    if (this.year) {
-      this.year.destructor();
-    }
-  },
+
+  unmounted() {
+    this.week_calendar?.destructor();
+    this.timepicker?.destructor();
+    this.year_calendar?.destructor();
+  }
 };
 </script>
 
+<template>
+  <div class="calendars-wrapper">
+    <div ref="week_container" class="container dhx_layout_calendar_cell"></div>
+    <div ref="timepicker_container" class="container dhx_layout_calendar_cell"></div>
+    <div ref="year_container" class="container dhx_layout_calendar_cell"></div>
+  </div>
+</template>
+
 <style scoped>
 .calendars-wrapper {
   display: flex;
diff --git a/src/components/Content/LeftPanel/Chart.vue b/src/components/Content/LeftPanel/Chart.vue
new file mode 100644
index 0000000..aba8a99
--- /dev/null
+++ b/src/components/Content/LeftPanel/Chart.vue
@@ -0,0 +1,60 @@
+<script>
+import { Chart, Layout } from "@dhx/trial-suite";
+import { getData } from "../../../data";
+
+export default {
+  data() {
+    const { seriesData, hotelsData } = getData();
+    return { seriesData, hotelsData };
+  },
+
+  mounted() {
+    this.layout = new Layout(this.$refs.layout_container, {
+      type: "line",
+      rows: [
+        {
+          header: "HOTELS",
+          height: "500px",
+          padding: 40,
+          id: "chart",
+          collapsable: true
+        }
+      ]
+    });
+
+    this.chart = new Chart(null, {
+      data: this.hotelsData,
+      type: "bar",
+      scales: {
+        bottom: {
+          text: "month"
+        },
+        left: {
+          maxTicks: 10,
+          max: 100,
+          min: 0
+        }
+      },
+      series: this.seriesData,
+      legend: {
+        series: ["A", "B", "all"],
+        halign: "right",
+        valign: "top",
+        itemPadding: 20,
+        margin: 40
+      }
+    });
+
+    this.layout.getCell("chart").attach(this.chart);
+  },
+
+  unmounted() {
+    this.layout?.destructor();
+    this.chart?.destructor();
+  }
+};
+</script>
+
+<template>
+  <div ref="layout_container" class="container"></div>
+</template>
diff --git a/src/components/Content/LeftPanel/Grid.vue b/src/components/Content/LeftPanel/Grid.vue
index 31aad46..d0875cf 100644
--- a/src/components/Content/LeftPanel/Grid.vue
+++ b/src/components/Content/LeftPanel/Grid.vue
@@ -1,44 +1,34 @@
-<template>
-  <div class="container">
-    <div ref="gNode" class="grid_container"></div>
-    <div ref="pNode"></div>
-  </div>
-</template>
-
 <script>
 import { Grid, Pagination } from "@dhx/trial-suite";
-import store from "../../../store.js";
+import { getData } from "../../../data";
 
 export default {
   data() {
-    return {
-      gNode: null,
-      pNode: null,
-      grid: null,
-      paginator: null,
-    };
+    const { gridData } = getData();
+    return { gridData };
   },
   mounted() {
     const gridConfig = {
+      data: this.gridData,
       columns: [
         {
           gravity: 2,
           id: "time",
           header: [{ text: "Time", align: "center" }],
           type: "date",
-          dateFormat: "%M %d, %H:%i",
+          dateFormat: "%M %d, %H:%i"
         },
         { id: "nights", header: [{ text: "Nights" }] },
         {
           id: "price",
           header: [{ text: "Price" }],
           type: "number",
-          numberMask: { prefix: "$" },
+          numberMask: { prefix: "$" }
         },
         {
           gravity: 3,
           id: "contactPerson",
-          header: [{ text: "Contact Person" }],
+          header: [{ text: "Contact Person" }]
         },
         {
           gravity: 4,
@@ -47,37 +37,44 @@ export default {
           htmlEnable: true,
           template: (text) => {
             return `<span class="contact_email";>${text}</span>`;
-          },
+          }
         },
         {
           gravity: 2,
           id: "totalCost",
           header: [{ text: "Total Cost" }],
           type: "number",
-          numberMask: { prefix: "$" },
-        },
+          numberMask: { prefix: "$" }
+        }
       ],
       autoWidth: true,
       css: "grid",
       multiselection: true,
       selection: "complex",
-      editable: true,
+      editable: true
     };
 
-    this.grid = new Grid(this.$refs.gNode, gridConfig);
-    this.paginator = new Pagination(this.$refs.pNode, {
+    this.grid = new Grid(this.$refs.grid_container, gridConfig);
+    this.pagination = new Pagination(this.$refs.pagination_container, {
       pageSize: 20,
-      data: this.grid.data,
+      data: this.grid.data
     });
-    this.grid.data.parse(store.gridDataset);
   },
-  beforeDestroy() {
+
+  unmounted() {
     this.grid?.destructor();
-    this.paginator?.destructor();
-  },
+    this.pagination?.destructor();
+  }
 };
 </script>
 
+<template>
+  <div class="container">
+    <div ref="grid_container" class="grid_container"></div>
+    <div ref="pagination_container"></div>
+  </div>
+</template>
+
 <style scoped>
 .container {
   display: flex;
diff --git a/src/components/Content/LeftPanel/LeftContent.vue b/src/components/Content/LeftPanel/LeftContent.vue
index d0d288b..8db4b0a 100644
--- a/src/components/Content/LeftPanel/LeftContent.vue
+++ b/src/components/Content/LeftPanel/LeftContent.vue
@@ -1,21 +1,7 @@
-<template>
-  <div class="left-content-wrapper">
-    <Grid />
-    <Calendars />
-    <Accordion />
-    <div class="block">
-      <SlidersLayout />
-      <Tree />
-    </div>
-    <Ribbon />
-    <TicketsDataview />
-  </div>
-</template>
-  
 <script>
 import Calendars from "./Calendars.vue";
 import Grid from "./Grid.vue";
-import Accordion from "./Accordion.vue";
+import Accordion from "./Chart.vue";
 import Ribbon from "./Ribbon.vue";
 import SlidersLayout from "./SlidersLayout.vue";
 import TicketsDataview from "./TicketsDataview.vue";
@@ -29,10 +15,24 @@ export default {
     Ribbon,
     SlidersLayout,
     TicketsDataview,
-    Tree,
-  },
+    Tree
+  }
 };
 </script>
+
+<template>
+  <div class="left-content-wrapper">
+    <Grid />
+    <Calendars />
+    <Accordion />
+    <div class="block">
+      <SlidersLayout />
+      <Tree />
+    </div>
+    <Ribbon />
+    <TicketsDataview />
+  </div>
+</template>
   
 <style scoped>
 .left-content-wrapper {
@@ -50,4 +50,4 @@ export default {
   width: 100%;
   justify-content: space-between;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Content/LeftPanel/Ribbon.vue b/src/components/Content/LeftPanel/Ribbon.vue
index aed43bb..0246c59 100644
--- a/src/components/Content/LeftPanel/Ribbon.vue
+++ b/src/components/Content/LeftPanel/Ribbon.vue
@@ -1,33 +1,33 @@
-<template>
-  <div ref="node" class="container ribbon-container"></div>
-</template>
-
 <script>
 import { Ribbon } from "@dhx/trial-suite";
-import store from "../../../store.js";
+import { getData } from "../../../data";
 
 export default {
   data() {
-    return {
-      node: null,
-      ribbon: null,
-    };
+    const { ribbonData } = getData();
+    return { ribbonData };
   },
+
   mounted() {
-    this.ribbon = new Ribbon(this.$refs.node, {
-      css: "dhx_widget--bordered",
+    this.ribbon = new Ribbon(this.$refs.ribbon_container, {
+      data: this.ribbonData,
+      css: "dhx_widget--bordered"
     });
-    this.ribbon.data.parse(store.ribbonData);
   },
+
   beforeDestroy() {
     this.ribbon?.destructor();
-  },
+  }
 };
 </script>
 
+<template>
+  <div ref="ribbon_container" class="container ribbon-container"></div>
+</template>
+
 <style>
 .ribbon-container {
   padding: 50px;
   background: var(--dhx-background-primary);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Content/LeftPanel/SlidersLayout.vue b/src/components/Content/LeftPanel/SlidersLayout.vue
index 49a28e7..e21b02c 100644
--- a/src/components/Content/LeftPanel/SlidersLayout.vue
+++ b/src/components/Content/LeftPanel/SlidersLayout.vue
@@ -1,29 +1,15 @@
-<template>
-  <div ref="node" class="container" style="flex-grow: 2"></div>
-</template>
-
 <script>
 import { Layout, Slider } from "@dhx/trial-suite";
 
 export default {
-  data() {
-    return {
-      node: null,
-      sliderLayout: null,
-      slider1: null,
-      slider2: null,
-      slider3: null,
-      slider4: null,
-      slider5: null,
-    };
-  },
   methods: {
     tickTemplate(value) {
       return `${value}`;
-    },
+    }
   },
+  
   mounted() {
-    this.sliderLayout = new Layout(this.$refs.node, {
+    this.layout = new Layout(this.$refs.layout_container, {
       type: "none",
       height: "fit-content",
       cols: [
@@ -50,25 +36,24 @@ export default {
               padding: 10,
               height: "content",
               id: "slider4",
-            },
-          ],
+            }
+          ]
         },
         {
           padding: "10px 20px",
           height: "260px",
           width: "20%",
           id: "slider5",
-        },
-      ],
+        }
+      ]
     });
-    console.log(this.tickTemplate);
 
     this.slider1 = new Slider(null, {
       min: 0,
       max: 40,
       step: 1,
     });
-    // Slider 2 initialization
+
     this.slider2 = new Slider(null, {
       min: 0,
       max: 40,
@@ -77,7 +62,6 @@ export default {
       step: 1,
     });
 
-    // Slider 3 initialization
     this.slider3 = new Slider(null, {
       min: 0,
       max: 40,
@@ -89,7 +73,6 @@ export default {
       tickTemplate: this.tickTemplate,
     });
 
-    // Slider 4 initialization
     this.slider4 = new Slider(null, {
       min: 0,
       max: 40,
@@ -98,7 +81,6 @@ export default {
       value: [0, 20],
     });
 
-    // Slider 5 initialization
     this.slider5 = new Slider(null, {
       mode: "vertical",
       range: true,
@@ -111,15 +93,20 @@ export default {
       tickTemplate: this.tickTemplate,
     });
 
-    // Attached all sliders in sliderLayout, which is main layout's cell
-    this.sliderLayout.getCell("slider1").attach(this.slider1);
-    this.sliderLayout.getCell("slider2").attach(this.slider2);
-    this.sliderLayout.getCell("slider3").attach(this.slider3);
-    this.sliderLayout.getCell("slider4").attach(this.slider4);
-    this.sliderLayout.getCell("slider5").attach(this.slider5);
-  },
-  beforeDestroy() {
-    this.sliderLayout?.destructor();
+    // Attached all sliders in layout, which is main layout's cell
+    this.layout.getCell("slider1").attach(this.slider1);
+    this.layout.getCell("slider2").attach(this.slider2);
+    this.layout.getCell("slider3").attach(this.slider3);
+    this.layout.getCell("slider4").attach(this.slider4);
+    this.layout.getCell("slider5").attach(this.slider5);
   },
+
+  unmounted() {
+    this.layout?.destructor();
+  }
 };
-</script>
\ No newline at end of file
+</script>
+
+<template>
+  <div ref="layout_container" class="container" style="flex-grow: 2"></div>
+</template>
diff --git a/src/components/Content/LeftPanel/TicketsDataview.vue b/src/components/Content/LeftPanel/TicketsDataview.vue
index 2f09891..0856fea 100644
--- a/src/components/Content/LeftPanel/TicketsDataview.vue
+++ b/src/components/Content/LeftPanel/TicketsDataview.vue
@@ -1,59 +1,60 @@
-<template>
-  <div ref="node" class="tickets-container"></div>
-</template>
-
 <script>
 import { DataView } from "@dhx/trial-suite";
 import "@dhx/trial-suite/codebase/suite.min.css";
-import store from "../../../store.js";
+import { getData } from "../../../data";
 
 export default {
   data() {
-    return {
-      node: null,
-      dataview: null,
-    };
+    const { ticketsDataviewData } = getData();
+    return { ticketsDataviewData };
   },
+
   methods: {
     template({ title, text, type, avatar, name, comments, time }) {
       return `
-          <div class="dhx_dataview_template_a">
-            <div class="dhx_dataview_template_a__head">
-              <div class="dhx_dataview_template_a__type dhx_dataview_template_a__type--${type}">${type}</div>
-              <div class="dhx_dataview_template_a__content">
-                <div class="dhx_dataview_template_a__title">${title}</div>
-                <div class="dhx_dataview_template_a__comment">${text}</div>
-              </div>
+        <div class="dhx_dataview_template_a">
+          <div class="dhx_dataview_template_a__head">
+            <div class="dhx_dataview_template_a__type dhx_dataview_template_a__type--${type}">${type}</div>
+            <div class="dhx_dataview_template_a__content">
+              <div class="dhx_dataview_template_a__title">${title}</div>
+              <div class="dhx_dataview_template_a__comment">${text}</div>
             </div>
-            <div class="dhx_dataview_template_a__body">
-              <div class="dhx_dataview_template_a__person">
-                <div class="dhx_dataview_template_a__avatar" style="background-image: url(${avatar})"></div>
-                <div class="dhx_dataview_template_a__info">
-                  <div class="dhx_dataview_template_a__time">${time}</div>
-                  <div class="dhx_dataview_template_a__name">${name}</div>
-                </div>
+          </div>
+          <div class="dhx_dataview_template_a__body">
+            <div class="dhx_dataview_template_a__person">
+              <div class="dhx_dataview_template_a__avatar" style="background-image: url(${avatar})"></div>
+              <div class="dhx_dataview_template_a__info">
+                <div class="dhx_dataview_template_a__time">${time}</div>
+                <div class="dhx_dataview_template_a__name">${name}</div>
               </div>
-              <div class="dhx_dataview_template_a__comments">${comments}
-              <span class="mdi mdi-comment-outline"></span></div>
             </div>
+            <div class="dhx_dataview_template_a__comments">${comments}
+            <span class="mdi mdi-comment-outline"></span></div>
           </div>
-        `;
-    },
+        </div>
+      `;
+    }
   },
+
   mounted() {
-    this.dataview = new DataView(this.$refs.node, {
+    this.dataview = new DataView(this.$refs.dataview_container, {
+      data: this.ticketsDataviewData,
       template: this.template,
       itemsInRow: 2,
-      css: "dhx_dataview_template_a_box",
+      css: "dhx_dataview_template_a_box"
     });
-    this.dataview.data.parse(store.ticketsDataviewData);
   },
-  beforeDestroy() {
+
+  unmounted() {
     this.dataview?.destructor();
-  },
+  }
 };
 </script>
 
+<template>
+  <div ref="dataview_container" class="tickets-container"></div>
+</template>
+
 <style>
 .tickets-container {
   background: var(--dhx-background-primary);
diff --git a/src/components/Content/LeftPanel/Tree.vue b/src/components/Content/LeftPanel/Tree.vue
index 4d84262..181ea02 100644
--- a/src/components/Content/LeftPanel/Tree.vue
+++ b/src/components/Content/LeftPanel/Tree.vue
@@ -1,30 +1,29 @@
-<template>
-  <div ref="node" class="container" style="flex-grow: 1"></div>
-</template>
-
 <script>
 import { Tree } from "@dhx/trial-suite";
-import store from "../../../store.js";
+import { getData } from "../../../data";
 
 export default {
   data() {
-    return {
-      node: null,
-      tree: null,
-    };
+    const { treeData } = getData();
+    return { treeData };
   },
 
   mounted() {
-    this.tree = new Tree(this.$refs.node, {
+    this.tree = new Tree(this.$refs.tree_container, {
+      data: this.treeData,
       checkbox: true,
       editable: true,
       keyNavigation: true,
-      dragMode: "both",
+      dragMode: "both"
     });
-    this.tree.data.parse(store.treeData);
   },
-  beforeDestroy() {
+
+  unmounted() {
     this.tree?.destructor();
-  },
+  }
 };
 </script>
+
+<template>
+  <div ref="tree_container" class="container" style="flex-grow: 1"></div>
+</template>
diff --git a/src/components/Content/RightPanel/ButtonsForm.vue b/src/components/Content/RightPanel/ButtonsForm.vue
index d91d04f..8de6cb0 100644
--- a/src/components/Content/RightPanel/ButtonsForm.vue
+++ b/src/components/Content/RightPanel/ButtonsForm.vue
@@ -1,19 +1,9 @@
-<template>
-  <div ref="node" class="container"></div>
-</template>
-
 <script>
 import { Form } from "@dhx/trial-suite";
 
 export default {
-  data() {
-    return {
-      node: null,
-      form: null,
-    };
-  },
   mounted() {
-    this.form = new Form(this.$refs.node, {
+    this.form = new Form(this.$refs.buttons_form_container, {
       height: "content",
       padding: 40,
       align: "between",
@@ -50,8 +40,8 @@ export default {
               full: true,
               disabled: true,
               size: "small",
-            },
-          ],
+            }
+          ]
         },
         {
           align: "between",
@@ -85,8 +75,8 @@ export default {
               full: true,
               size: "small",
               disabled: true,
-            },
-          ],
+            }
+          ]
         },
         {
           align: "between",
@@ -120,8 +110,8 @@ export default {
               full: true,
               size: "small",
               disabled: true,
-            },
-          ],
+            }
+          ]
         },
         {
           align: "between",
@@ -155,14 +145,19 @@ export default {
               full: true,
               size: "small",
               disabled: true,
-            },
-          ],
-        },
-      ],
+            }
+          ]
+        }
+      ]
     });
   },
-  beforeDestroy() {
+
+  unmounted() {
     this.form?.destructor();
-  },
+  }
 };
-</script>
\ No newline at end of file
+</script>
+
+<template>
+  <div ref="buttons_form_container" class="container"></div>
+</template>
diff --git a/src/components/Content/RightPanel/Chart.vue b/src/components/Content/RightPanel/Chart.vue
index 84181c8..d1b6770 100644
--- a/src/components/Content/RightPanel/Chart.vue
+++ b/src/components/Content/RightPanel/Chart.vue
@@ -1,20 +1,15 @@
-<template>
-  <div ref="node" class="container"></div>
-</template>
-
 <script>
 import { Chart } from "@dhx/trial-suite";
-import store from "../../../store.js";
+import { getData } from "../../../data";
 
 export default {
   data() {
-    return {
-      node: null,
-      chart: null,
-    };
+    const { chartData } = getData();
+    return { chartData };
   },
   mounted() {
-    this.chart = new Chart(this.$refs.node, {
+    this.chart = new Chart(this.$refs.chart_container, {
+      data: this.chartData,
       type: "pie",
       series: [
         {
@@ -39,11 +34,14 @@ export default {
         width: 30,
       },
     });
-    this.chart.data.parse(store.chartData);
   },
 
-  beforeDestroy() {
+  unmounted() {
     this.chart?.destructor();
-  },
+  }
 };
 </script>
+
+<template>
+  <div ref="chart_container" class="container"></div>
+</template>
diff --git a/src/components/Content/RightPanel/Colorpicker.vue b/src/components/Content/RightPanel/Colorpicker.vue
index 5eee324..7780b7c 100644
--- a/src/components/Content/RightPanel/Colorpicker.vue
+++ b/src/components/Content/RightPanel/Colorpicker.vue
@@ -1,20 +1,7 @@
-<template>
-  <div
-    ref="node"
-    class="container colorpicker-container dhx_layout_colorpicker_cell"
-  ></div>
-</template>
-
 <script>
 import { Colorpicker } from "@dhx/trial-suite";
 
 export default {
-  data() {
-    return {
-      node: null,
-      colorpicker: null,
-    };
-  },
   methods: {
     hexToHSLChema(HEX) {
       let r = 0,
@@ -59,10 +46,10 @@ export default {
         s,
         l,
       };
-    },
+    }
   },
   mounted() {
-    this.colorpicker = new Colorpicker(this.$refs.node, { mode: "picker" });
+    this.colorpicker = new Colorpicker(this.$refs.colorpicker_container, { mode: "picker" });
     this.colorpicker.setValue("#0288d1");
     this.colorpicker.events.on("change", (hex) => {
       const { h, s, l } = this.hexToHSLChema(hex);
@@ -73,15 +60,23 @@ export default {
       el.style.setProperty("--dhx-l-primary", l + "%");
     });
   },
-  beforeDestroy() {
+  
+  unmounted() {
     this.colorpicker?.destructor();
-  },
+  }
 };
 </script>
 
+<template>
+  <div
+    ref="colorpicker_container"
+    class="container colorpicker-container dhx_layout_colorpicker_cell"
+  ></div>
+</template>
+
 <style>
 .colorpicker-container {
   display: flex;
   justify-content: center;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Content/RightPanel/Form.vue b/src/components/Content/RightPanel/Form.vue
index c98bba4..d4817ba 100644
--- a/src/components/Content/RightPanel/Form.vue
+++ b/src/components/Content/RightPanel/Form.vue
@@ -1,139 +1,15 @@
-<template>
-  <div ref="node" class="container"></div>
-</template>
-
 <script>
 import { Form } from "@dhx/trial-suite";
+import { getData } from "../../../data";
 
 export default {
   data() {
-    return {
-      node: null,
-      form: null,
-      country: [
-        {
-          id: "austria",
-          value: "Austria",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/at.png",
-        },
-        {
-          value: "Belarus",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/by.png",
-        },
-        {
-          value: "Belgium",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/be.png",
-        },
-        {
-          value: "Bulgaria",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/bg.png",
-        },
-        {
-          value: "Cyprus",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/cy.png",
-        },
-        {
-          value: "Czech Republic",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/cz.png",
-        },
-        {
-          value: "Denmark",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/dk.png",
-        },
-        {
-          id: "estonia",
-          value: "Estonia",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/ee.png",
-        },
-        {
-          value: "Finland",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/fi.png",
-        },
-        {
-          value: "France",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/fr.png",
-        },
-        {
-          value: "Germany",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/de.png",
-        },
-        {
-          value: "Greece",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/gr.png",
-        },
-        {
-          value: "Hungary",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/hu.png",
-        },
-        {
-          value: "Ireland",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/ie.png",
-        },
-        {
-          value: "Italy",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/it.png",
-        },
-        {
-          value: "Latvia",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/lv.png",
-        },
-        {
-          value: "Lithuania",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/lt.png",
-        },
-        {
-          value: "Luxembourg",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/lu.png",
-        },
-        {
-          value: "Malta",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/mt.png",
-        },
-        {
-          value: "Netherlands",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/nl.png",
-        },
-        {
-          value: "Poland",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/pl.png",
-        },
-        {
-          value: "Portugal",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/pt.png",
-        },
-        {
-          value: "Russia",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/ru.png",
-        },
-        {
-          value: "Romania",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/ro.png",
-        },
-        {
-          value: "Slovakia",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/sk.png",
-        },
-        {
-          value: "Slovenia",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/si.png",
-        },
-        {
-          value: "Spain",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/es.png",
-        },
-        {
-          value: "Sweden",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/se.png",
-        },
-        {
-          value: "United Kingdom",
-          src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/gb.png",
-        },
-      ],
-    };
+    const { country } = getData();
+    return { country };
   },
+
   mounted() {
-    this.form = new Form(this.$refs.node, {
+    this.form = new Form(this.$refs.form_container, {
       padding: 40,
       width: "auto",
       rows: [
@@ -157,8 +33,8 @@ export default {
               label: "Surname",
               placeholder: "Type text",
               required: true,
-            },
-          ],
+            }
+          ]
         },
         {
           name: "country",
@@ -210,9 +86,9 @@ export default {
                 type: "radioButton",
                 text: "Advanced",
                 value: "2",
-              },
-            ],
-          },
+              }
+            ]
+          }
         },
         {
           name: "backgroundColor",
@@ -259,15 +135,20 @@ export default {
                 id: "4",
                 type: "checkbox",
                 text: "Your option",
-              },
-            ],
-          },
-        },
-      ],
+              }
+            ]
+          }
+        }
+      ]
     });
   },
-  beforeDestroy() {
+
+  unmounted() {
     this.form?.destructor();
-  },
+  }
 };
 </script>
+
+<template>
+  <div ref="form_container" class="container"></div>
+</template>
diff --git a/src/components/Content/RightPanel/MessageDataview.vue b/src/components/Content/RightPanel/MessageDataview.vue
index 035ae63..a8845cd 100644
--- a/src/components/Content/RightPanel/MessageDataview.vue
+++ b/src/components/Content/RightPanel/MessageDataview.vue
@@ -1,51 +1,51 @@
-<template>
-  <div ref="node"></div>
-</template>
-
 <script>
 import { DataView } from "@dhx/trial-suite";
-import store from "../../../store";
+import { getData } from "../../../data";
 
 export default {
   data() {
-    return {
-      node: null,
-      dataview: null,
-    };
+    const { messageDataviewData } = getData();
+    return { messageDataviewData };
   },
   methods: {
     template({ mail, name, avatar, status, delivered }) {
       return `
-          <div class="dhx_dataview_template_b">
-              <div class="dhx_dataview_template_b__avatar" style="background-image: url(${avatar});">
-                  <div class="dhx_dataview_template_b__status dhx_dataview_template_b__status--${status}"></div>
-              </div>
-              <div class="dhx_dataview_template_b__title">Delivered ${delivered}</div>
-              <div class="dhx_dataview_template_b__name">${name}</div>
-              <a class="dhx_dataview_template_b__message" target="_blank" href="mailto:${mail}">
-                  <span class="dhx_dataview_template_b__message-icon mdi mdi-message-reply-text"></span>
-                  <span class="dhx_dataview_template_b__message-label">Message</span>
-              </a>
-          </div>
-        `;
-    },
+        <div class="dhx_dataview_template_b">
+            <div class="dhx_dataview_template_b__avatar" style="background-image: url(${avatar});">
+                <div class="dhx_dataview_template_b__status dhx_dataview_template_b__status--${status}"></div>
+            </div>
+            <div class="dhx_dataview_template_b__title">Delivered ${delivered}</div>
+            <div class="dhx_dataview_template_b__name">${name}</div>
+            <a class="dhx_dataview_template_b__message" target="_blank" href="mailto:${mail}">
+                <span class="dhx_dataview_template_b__message-icon mdi mdi-message-reply-text"></span>
+                <span class="dhx_dataview_template_b__message-label">Message</span>
+            </a>
+        </div>
+      `;
+    }
   },
+
   mounted() {
-    this.dataview = new DataView(this.$refs.node, {
+    this.dataview = new DataView(this.$refs.dataview_container, {
+      data: this.messageDataviewData,
       template: this.template,
       itemsInRow: 2,
-      css: "dhx_dataview_template_b_box",
+      css: "dhx_dataview_template_b_box"
     });
-    this.dataview.data.parse(store.messageDataviewData);
-  },
-  beforeDestroy() {
-    this.dataview.destructor();
   },
+  
+  unmounted() {
+    this.dataview?.destructor();
+  }
 };
 </script>
 
+<template>
+  <div ref="dataview_container"></div>
+</template>
+
 <style>
 .container {
   flex-grow: 1;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Content/RightPanel/RightContent.vue b/src/components/Content/RightPanel/RightContent.vue
index 780e921..31f4136 100644
--- a/src/components/Content/RightPanel/RightContent.vue
+++ b/src/components/Content/RightPanel/RightContent.vue
@@ -1,13 +1,3 @@
-<template>
-  <div class="right-content-wrapper">
-    <Chart />
-    <Form />
-    <ButtonsForm />
-    <Colorpicker />
-    <MessageDataview />
-  </div>
-</template>
-
 <script>
 import Chart from "./Chart.vue";
 import Form from "./Form.vue";
@@ -21,11 +11,21 @@ export default {
     Form,
     ButtonsForm,
     Colorpicker,
-    MessageDataview,
-  },
+    MessageDataview
+  }
 };
 </script>
 
+<template>
+  <div class="right-content-wrapper">
+    <Chart />
+    <Form />
+    <ButtonsForm />
+    <Colorpicker />
+    <MessageDataview />
+  </div>
+</template>
+
 <style>
 .right-content-wrapper {
   display: flex;
diff --git a/src/components/MainContainer.vue b/src/components/MainContainer/MainContainer.vue
similarity index 85%
rename from src/components/MainContainer.vue
rename to src/components/MainContainer/MainContainer.vue
index 96808ae..62f1163 100644
--- a/src/components/MainContainer.vue
+++ b/src/components/MainContainer/MainContainer.vue
@@ -1,13 +1,5 @@
-<template>
-  <div class="container">
-    <Toolbar />
-    <Tabbar />
-    <Content />
-  </div>
-</template>
-  
 <script>
-import Content from "./Content/Content.vue";
+import Content from "../Content/Content.vue";
 import Tabbar from "./Tabbar.vue";
 import Toolbar from "./Toolbar.vue";
 
@@ -15,10 +7,18 @@ export default {
   components: {
     Content,
     Tabbar,
-    Toolbar,
-  },
+    Toolbar
+  }
 };
 </script>
+
+<template>
+  <div class="container">
+    <Toolbar />
+    <Tabbar />
+    <Content />
+  </div>
+</template>
   
 <style scoped>
   .container {
diff --git a/src/components/Tabbar.vue b/src/components/MainContainer/Tabbar.vue
similarity index 56%
rename from src/components/Tabbar.vue
rename to src/components/MainContainer/Tabbar.vue
index 7e3c454..ad4779b 100644
--- a/src/components/Tabbar.vue
+++ b/src/components/MainContainer/Tabbar.vue
@@ -1,19 +1,9 @@
-<template>
-  <div ref="node"></div>
-</template>
-
 <script>
 import { Tabbar } from "@dhx/trial-suite";
 
 export default {
-  data() {
-    return {
-      node: null,
-      tabbar: null,
-    };
-  },
   mounted() {
-    this.tabbar = new Tabbar(this.$refs.node, {
+    this.tabbar = new Tabbar(this.$refs.tabbar_container, {
       tabAlign: "center",
       disabled: ["reports", "tickets", "users", "applications"],
       views: [
@@ -21,14 +11,17 @@ export default {
         { id: "reports", tab: "Reports" },
         { id: "tickets", tab: "Tickets" },
         { id: "users", tab: "Users" },
-        { id: "applications", tab: "Applications" },
-      ],
+        { id: "applications", tab: "Applications" }
+      ]
     });
   },
-  beforeDestroy() {
-    if (this.tabbar) {
-      this.tabbar.destructor();
-    }
-  },
+
+  unmounted() {
+    this.tabbar?.destructor();
+  }
 };
-</script>
\ No newline at end of file
+</script>
+
+<template>
+  <div ref="tabbar_container"></div>
+</template>
diff --git a/src/components/Toolbar.vue b/src/components/MainContainer/Toolbar.vue
similarity index 71%
rename from src/components/Toolbar.vue
rename to src/components/MainContainer/Toolbar.vue
index 65a36d4..8af83e0 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/MainContainer/Toolbar.vue
@@ -1,22 +1,22 @@
-<template>
-  <div ref="node"></div>
-</template>
-
 <script>
 import { Toolbar, setTheme } from "@dhx/trial-suite";
-import store from "../store.js";
+import { getData } from "../../data";
 
 export default {
   data() {
+    const { toolbarData } = getData();
     return {
-      node: null,
-      toolbar: null,
+      toolbarData,
       contrast: false,
-      theme: "light",
+      theme: "light"
     };
   },
+  
   mounted() {
-    this.toolbar = new Toolbar(this.$refs.node, {});
+    this.toolbar = new Toolbar(this.$refs.toolbar_container, {
+      data: this.toolbarData
+    });
+
     this.toolbar.events.on("click", (id) => {
       switch (id) {
         case "theme": {
@@ -25,7 +25,7 @@ export default {
             checked,
             icon: `mdi mdi-${
               !checked ? "weather-night" : "white-balance-sunny"
-            }`,
+            }`
           });
           this.theme = checked ? "dark" : "light";
           setTheme(`${this.contrast ? "contrast-" : ""}${this.theme}`);
@@ -37,12 +37,14 @@ export default {
         }
       }
     });
-    this.toolbar.data.parse(store.toolbarData);
-  },
-  beforeDestroy() {
-    if (this.toolbar) {
-      this.toolbar.destructor();
-    }
   },
+
+  unmounted() {
+    this.toolbar?.destructor();
+  }
 };
-</script>
\ No newline at end of file
+</script>
+
+<template>
+  <div ref="toolbar_container"></div>
+</template>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar/Sidebar.vue
similarity index 56%
rename from src/components/Sidebar.vue
rename to src/components/Sidebar/Sidebar.vue
index 894c568..3679630 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar/Sidebar.vue
@@ -1,20 +1,18 @@
-<template>
-  <div ref="node" class="dhx_widget--border_right"></div>
-</template>
-
 <script>
 import { Sidebar } from "@dhx/trial-suite";
-import store from "../store.js";
+import { getData } from "../../data";
 
 export default {
   data() {
-    return {
-      sidebar: null,
-      node: null,
-    };
+    const { sidebarData } = getData();
+    return { sidebarData };
   },
+
   mounted() {
-    this.sidebar = new Sidebar(this.$refs.node, {});
+    this.sidebar = new Sidebar(this.$refs.sidebar_container, {
+      data: this.sidebarData
+    });
+
     this.sidebar.events.on("click", (id) => {
       if (id === "toggle") {
         const toggleItem = this.sidebar.data.getItem("toggle");
@@ -24,11 +22,14 @@ export default {
           : "mdi mdi-backburger";
       }
     });
-
-    this.sidebar.data.parse(store.sidebarData);
-  },
-  beforeDestroy() {
-    this.sidebar.destructor();
   },
+
+  unmounted() {
+    this.sidebar?.destructor();
+  }
 };
-</script>
\ No newline at end of file
+</script>
+
+<template>
+  <div ref="sidebar_container" class="dhx_widget--border_right"></div>
+</template>
diff --git a/src/data.js b/src/data.js
new file mode 100644
index 0000000..efcbd65
--- /dev/null
+++ b/src/data.js
@@ -0,0 +1,1457 @@
+export function getData() {
+
+  const sidebarData = [
+    {
+      id: "toggle",
+      css: "toggle-button",
+      icon: "mdi mdi-backburger",
+    },
+    {
+      type: "customHTML",
+      id: "userInfo",
+      css: "user-info_item",
+      html:
+        "<div class='user-info_container'>" +
+        "<img class='user-info_avatar' src='https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_63.jpg'/>" +
+        "<div class='user-info_title'>" +
+        "Gloria McKinney" +
+        "</div>" +
+        "<div class='user-info_contact'>" +
+        "@gmckinney" +
+        "</div>" +
+        "</div>",
+    },
+    {
+      type: "separator",
+    },
+    {
+      id: "today",
+      value: "Today",
+      icon: "mdi mdi-calendar-star",
+    },
+    {
+      id: "overdue",
+      value: "Overdue",
+      icon: "mdi mdi-calendar-start",
+    },
+    {
+      id: "unscheduled",
+      value: "Unscheduled",
+      icon: "mdi mdi-calendar-blank",
+    },
+    {
+      type: "separator",
+    },
+    {
+      id: "projects",
+      value: "Projects",
+      icon: "mdi mdi-folder-star-outline",
+      items: [
+        {
+          id: "project1",
+          value: "Project 1",
+          icon: "mdi mdi-plus",
+        },
+        {
+          id: "project2",
+          value: "Project 2",
+          icon: "mdi mdi-plus",
+        },
+        {
+          id: "project3",
+          value: "Project 3",
+          icon: "mdi mdi-plus",
+        },
+      ],
+    },
+    {
+      type: "separator",
+    },
+    {
+      id: "assigned",
+      value: "Assigned",
+      icon: "mdi mdi-account-search-outline",
+      items: [
+        {
+          id: "person1",
+          value: "Person 1",
+          icon: "mdi mdi-plus",
+        },
+        {
+          id: "person2",
+          value: "Person 2",
+          icon: "mdi mdi-plus",
+        },
+        {
+          id: "Person3",
+          value: "person 3",
+          icon: "mdi mdi-plus",
+        },
+      ],
+    },
+    {
+      type: "separator",
+    },
+    {
+      type: "spacer",
+    },
+    {
+      type: "separator",
+    },
+    {
+      id: "notification",
+      value: "Notification",
+      count: 18,
+      icon: "mdi mdi-bell-outline",
+      countColor: "#D60000",
+    },
+    {
+      id: "configuration",
+      value: "Configuration",
+      icon: "mdi mdi-tune",
+      items: [
+        {
+          id: "myAccount",
+          value: "My Account",
+          icon: "mdi mdi-account-settings",
+        },
+        {
+          id: "general",
+          value: "General Configuration",
+          icon: "mdi mdi-tune",
+        },
+      ],
+    },
+  ];
+
+  const toolbarData = [
+    {
+      id: "topMenuButton",
+      type: "button",
+      value: "Toolbar button",
+      view: "flat",
+      icon: "dxi dxi-plus",
+      size: "small",
+      circle: true,
+      color: "secondary",
+    },
+
+    {
+      type: "spacer",
+    },
+    {
+      id: "theme",
+      circle: true,
+      icon: "mdi mdi-weather-night",
+      checked: false,
+    },
+
+    {
+      id: "contrast",
+      twoState: true,
+      active: false,
+      icon: "mdi mdi-contrast-circle",
+    },
+    {
+      id: "avatar",
+      type: "imageButton",
+      src: "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_63.jpg",
+      count: 15,
+    },
+  ];
+
+  // Data for grid
+  const gridData = [
+    {
+      time: new Date("Jan 28, 2021"),
+      nights: 7,
+      price: 68,
+      contactPerson: "Yoshio Slater",
+      contactEmail: "phasellus.fermentum@yahoo.net",
+    },
+    {
+      time: new Date("Apr 13, 2021"),
+      nights: 6,
+      price: 66,
+      contactPerson: "Christopher Kirk",
+      contactEmail: "posuere.vulputate.lacus@outlook.org",
+    },
+    {
+      time: new Date("Jan 31, 2021"),
+      nights: 15,
+      price: 64,
+      contactPerson: "Jana Meyers",
+      contactEmail: "mollis@aol.edu",
+    },
+    {
+      time: new Date("Feb 22, 2021"),
+      nights: 11,
+      price: 57,
+      contactPerson: "Sawyer Smith",
+      contactEmail: "lorem.ipsum.sodales@icloud.org",
+    },
+    {
+      time: new Date("Feb 3, 2021"),
+      nights: 10,
+      price: 68,
+      contactPerson: "Gabriel Gates",
+      contactEmail: "sollicitudin.a@icloud.com",
+    },
+    {
+      time: new Date("Apr 6, 2021"),
+      nights: 7,
+      price: 67,
+      contactPerson: "Emily Reynolds",
+      contactEmail: "suspendisse.aliquet@outlook.edu",
+    },
+    {
+      time: new Date("May 22, 2021"),
+      nights: 11,
+      price: 70,
+      contactPerson: "Xavier Middleton",
+      contactEmail: "eu@icloud.net",
+    },
+    {
+      time: new Date("Jul 9, 2021"),
+      nights: 11,
+      price: 61,
+      contactPerson: "Tamara Raymond",
+      contactEmail: "vivamus@yahoo.ca",
+    },
+    {
+      time: new Date("Jun 15, 2021"),
+      nights: 15,
+      price: 61,
+      contactPerson: "Jolene Lamb",
+      contactEmail: "vulputate.posuere@outlook.org",
+    },
+    {
+      time: new Date("Jan 31, 2021"),
+      nights: 15,
+      price: 70,
+      contactPerson: "David Wilkins",
+      contactEmail: "ipsum@icloud.org",
+    },
+    {
+      time: new Date("Aug 16, 2021"),
+      nights: 8,
+      price: 65,
+      contactPerson: "Nita Padilla",
+      contactEmail: "quis.pede@google.net",
+    },
+    {
+      time: new Date("Apr 4, 2021"),
+      nights: 13,
+      price: 73,
+      contactPerson: "Martha Fischer",
+      contactEmail: "elit.pharetra@hotmail.org",
+    },
+    {
+      time: new Date("Jun 7, 2021"),
+      nights: 14,
+      price: 69,
+      contactPerson: "Rudyard Powell",
+      contactEmail: "ridiculus.mus@aol.com",
+    },
+    {
+      time: new Date("Sep 14, 2021"),
+      nights: 11,
+      price: 68,
+      contactPerson: "Clementine Mercer",
+      contactEmail: "nec@aol.couk",
+    },
+    {
+      time: new Date("Aug 3, 2021"),
+      nights: 14,
+      price: 74,
+      contactPerson: "Hu Pace",
+      contactEmail: "phasellus.dolor.elit@hotmail.net",
+    },
+    {
+      time: new Date("Sep 12, 2021"),
+      nights: 13,
+      price: 73,
+      contactPerson: "Petra James",
+      contactEmail: "luctus.et@yahoo.net",
+    },
+    {
+      time: new Date("Aug 4, 2021"),
+      nights: 14,
+      price: 60,
+      contactPerson: "Chaney Henson",
+      contactEmail: "in.condimentum@protonmail.net",
+    },
+    {
+      time: new Date("Jul 15, 2021"),
+      nights: 13,
+      price: 59,
+      contactPerson: "Cole Wallace",
+      contactEmail: "in.aliquet@outlook.org",
+    },
+    {
+      time: new Date("Jan 15, 2021"),
+      nights: 13,
+      price: 57,
+      contactPerson: "Emmanuel Miller",
+      contactEmail: "pharetra.quisque.ac@aol.edu",
+    },
+    {
+      time: new Date("Sep 18, 2021"),
+      nights: 9,
+      price: 69,
+      contactPerson: "Uriah Ayers",
+      contactEmail: "nunc.sed.pede@google.net",
+    },
+    {
+      time: new Date("May 24, 2021"),
+      nights: 13,
+      price: 73,
+      contactPerson: "Illiana Floyd",
+      contactEmail: "rhoncus.nullam@hotmail.ca",
+    },
+    {
+      time: new Date("Jul 4, 2021"),
+      nights: 3,
+      price: 61,
+      contactPerson: "Cara Merritt",
+      contactEmail: "sagittis@yahoo.ca",
+    },
+    {
+      time: new Date("Jan 27, 2021"),
+      nights: 4,
+      price: 70,
+      contactPerson: "Yetta O'Neill",
+      contactEmail: "nullam@aol.net",
+    },
+    {
+      time: new Date("Aug 16, 2021"),
+      nights: 9,
+      price: 63,
+      contactPerson: "Chadwick Holland",
+      contactEmail: "congue.turpis@aol.net",
+    },
+    {
+      time: new Date("Mar 22, 2021"),
+      nights: 3,
+      price: 59,
+      contactPerson: "Nell Copeland",
+      contactEmail: "nulla.vulputate@google.edu",
+    },
+    {
+      time: new Date("Feb 26, 2021"),
+      nights: 14,
+      price: 74,
+      contactPerson: "Vivian Fletcher",
+      contactEmail: "bibendum.ullamcorper@icloud.net",
+    },
+    {
+      time: new Date("Jun 26, 2021"),
+      nights: 11,
+      price: 58,
+      contactPerson: "Tatiana Mckay",
+      contactEmail: "ac.arcu@hotmail.ca",
+    },
+    {
+      time: new Date("Jul 30, 2021"),
+      nights: 9,
+      price: 61,
+      contactPerson: "Jamalia Mitchell",
+      contactEmail: "sed.id.risus@aol.edu",
+    },
+    {
+      time: new Date("Jun 15, 2021"),
+      nights: 13,
+      price: 66,
+      contactPerson: "Hedy Kirby",
+      contactEmail: "praesent.luctus@hotmail.com",
+    },
+    {
+      time: new Date("Aug 16, 2021"),
+      nights: 9,
+      price: 67,
+      contactPerson: "Solomon Ortiz",
+      contactEmail: "sem.vitae@yahoo.com",
+    },
+    {
+      time: new Date("Jul 15, 2021"),
+      nights: 3,
+      price: 67,
+      contactPerson: "Adrienne O'Neill",
+      contactEmail: "dapibus.gravida@protonmail.ca",
+    },
+    {
+      time: new Date("Jul 1, 2021"),
+      nights: 7,
+      price: 72,
+      contactPerson: "Alma Rollins",
+      contactEmail: "orci@protonmail.ca",
+    },
+    {
+      time: new Date("Jul 22, 2021"),
+      nights: 11,
+      price: 74,
+      contactPerson: "Gregory Boyd",
+      contactEmail: "curabitur.consequat.lectus@yahoo.net",
+    },
+    {
+      time: new Date("Apr 24, 2021"),
+      nights: 8,
+      price: 74,
+      contactPerson: "Damon Curry",
+      contactEmail: "aliquam.fringilla@hotmail.org",
+    },
+    {
+      time: new Date("Mar 8, 2021"),
+      nights: 5,
+      price: 63,
+      contactPerson: "Imelda Tyson",
+      contactEmail: "nunc.interdum@icloud.edu",
+    },
+    {
+      time: new Date("Apr 13, 2021"),
+      nights: 8,
+      price: 57,
+      contactPerson: "Yen Cannon",
+      contactEmail: "nunc@outlook.couk",
+    },
+    {
+      time: new Date("Feb 27, 2021"),
+      nights: 5,
+      price: 73,
+      contactPerson: "Olivia Patterson",
+      contactEmail: "posuere@google.org",
+    },
+    {
+      time: new Date("Apr 21, 2021"),
+      nights: 13,
+      price: 59,
+      contactPerson: "Ramona Logan",
+      contactEmail: "est@hotmail.ca",
+    },
+    {
+      time: new Date("Jul 8, 2021"),
+      nights: 4,
+      price: 67,
+      contactPerson: "Risa Butler",
+      contactEmail: "suscipit.est.ac@yahoo.net",
+    },
+    {
+      time: new Date("Feb 19, 2021"),
+      nights: 3,
+      price: 71,
+      contactPerson: "Charity Price",
+      contactEmail: "lobortis.augue.scelerisque@protonmail.couk",
+    },
+    {
+      time: new Date("Feb 23, 2021"),
+      nights: 15,
+      price: 59,
+      contactPerson: "Rina Macdonald",
+      contactEmail: "quisque@outlook.com",
+    },
+    {
+      time: new Date("Apr 8, 2021"),
+      nights: 16,
+      price: 68,
+      contactPerson: "Travis Steele",
+      contactEmail: "natoque.penatibus@google.edu",
+    },
+    {
+      time: new Date("Apr 30, 2021"),
+      nights: 9,
+      price: 64,
+      contactPerson: "Deanna Reyes",
+      contactEmail: "dolor@hotmail.net",
+    },
+    {
+      time: new Date("Feb 15, 2021"),
+      nights: 14,
+      price: 67,
+      contactPerson: "Faith Rojas",
+      contactEmail: "sagittis.duis.gravida@hotmail.edu",
+    },
+    {
+      time: new Date("Mar 1, 2021"),
+      nights: 4,
+      price: 73,
+      contactPerson: "Hyacinth Fuentes",
+      contactEmail: "nec.urna@google.com",
+    },
+    {
+      time: new Date("May 9, 2021"),
+      nights: 2,
+      price: 71,
+      contactPerson: "Brenden Sloan",
+      contactEmail: "a.dui.cras@google.net",
+    },
+    {
+      time: new Date("Feb 17, 2021"),
+      nights: 8,
+      price: 74,
+      contactPerson: "Nora Bruce",
+      contactEmail: "egestas.blandit@google.org",
+    },
+    {
+      time: new Date("Jul 20, 2021"),
+      nights: 10,
+      price: 68,
+      contactPerson: "Riley Harrison",
+      contactEmail: "lacus@outlook.ca",
+    },
+    {
+      time: new Date("May 24, 2021"),
+      nights: 12,
+      price: 74,
+      contactPerson: "Mariko Lewis",
+      contactEmail: "volutpat@google.couk",
+    },
+    {
+      time: new Date("Feb 16, 2021"),
+      nights: 2,
+      price: 68,
+      contactPerson: "Todd Jones",
+      contactEmail: "cras.eu.tellus@icloud.org",
+    },
+    {
+      time: new Date("Apr 21, 2021"),
+      nights: 16,
+      price: 69,
+      contactPerson: "Tasha Mcleod",
+      contactEmail: "quam.a@protonmail.org",
+    },
+    {
+      time: new Date("Aug 28, 2021"),
+      nights: 10,
+      price: 74,
+      contactPerson: "Fletcher Bird",
+      contactEmail: "tincidunt@yahoo.com",
+    },
+    {
+      time: new Date("Apr 19, 2021"),
+      nights: 3,
+      price: 57,
+      contactPerson: "Alan Murphy",
+      contactEmail: "tempor.erat.neque@icloud.com",
+    },
+    {
+      time: new Date("Jan 26, 2021"),
+      nights: 13,
+      price: 71,
+      contactPerson: "Hakeem Booth",
+      contactEmail: "porttitor.tellus@hotmail.com",
+    },
+    {
+      time: new Date("Feb 4, 2021"),
+      nights: 11,
+      price: 67,
+      contactPerson: "Courtney Sellers",
+      contactEmail: "penatibus.et@outlook.ca",
+    },
+    {
+      time: new Date("Jul 28, 2021"),
+      nights: 11,
+      price: 67,
+      contactPerson: "Frances Mcdonald",
+      contactEmail: "libero.dui@aol.org",
+    },
+    {
+      time: new Date("Jan 24, 2021"),
+      nights: 6,
+      price: 72,
+      contactPerson: "Devin Mathews",
+      contactEmail: "proin.nisl.sem@google.couk",
+    },
+    {
+      time: new Date("May 13, 2021"),
+      nights: 10,
+      price: 71,
+      contactPerson: "Arden Sparks",
+      contactEmail: "arcu.sed@google.edu",
+    },
+    {
+      time: new Date("Apr 1, 2021"),
+      nights: 2,
+      price: 55,
+      contactPerson: "Roanna Calhoun",
+      contactEmail: "nisi.aenean@outlook.edu",
+    },
+    {
+      time: new Date("Feb 9, 2021"),
+      nights: 12,
+      price: 66,
+      contactPerson: "Zeph Ellis",
+      contactEmail: "nonummy.ipsum.non@aol.org",
+    },
+    {
+      time: new Date("Jun 10, 2021"),
+      nights: 10,
+      price: 73,
+      contactPerson: "Harriet Lee",
+      contactEmail: "mauris.quis@aol.edu",
+    },
+    {
+      time: new Date("Jan 25, 2021"),
+      nights: 7,
+      price: 60,
+      contactPerson: "Chanda Gay",
+      contactEmail: "egestas.blandit.nam@yahoo.ca",
+    },
+    {
+      time: new Date("Aug 22, 2021"),
+      nights: 12,
+      price: 56,
+      contactPerson: "Tiger Roman",
+      contactEmail: "et@aol.org",
+    },
+    {
+      time: new Date("Aug 6, 2021"),
+      nights: 13,
+      price: 59,
+      contactPerson: "Yuri Booker",
+      contactEmail: "pretium.neque@google.ca",
+    },
+    {
+      time: new Date("Apr 12, 2021"),
+      nights: 7,
+      price: 56,
+      contactPerson: "Blaze Gardner",
+      contactEmail: "sed.leo@aol.ca",
+    },
+    {
+      time: new Date("Jun 13, 2021"),
+      nights: 4,
+      price: 73,
+      contactPerson: "Vanna Nieves",
+      contactEmail: "amet.consectetuer@google.edu",
+    },
+    {
+      time: new Date("May 8, 2021"),
+      nights: 4,
+      price: 58,
+      contactPerson: "Malik Mullins",
+      contactEmail: "pede.nec@yahoo.org",
+    },
+    {
+      time: new Date("Apr 25, 2021"),
+      nights: 5,
+      price: 60,
+      contactPerson: "Sarah Goodwin",
+      contactEmail: "condimentum.eget@icloud.couk",
+    },
+    {
+      time: new Date("Jan 13, 2021"),
+      nights: 5,
+      price: 73,
+      contactPerson: "Nigel Griffin",
+      contactEmail: "ornare@yahoo.edu",
+    },
+    {
+      time: new Date("Mar 25, 2021"),
+      nights: 6,
+      price: 67,
+      contactPerson: "Lysandra Gregory",
+      contactEmail: "in.ornare@protonmail.edu",
+    },
+    {
+      time: new Date("Sep 28, 2021"),
+      nights: 8,
+      price: 70,
+      contactPerson: "Breanna Williamson",
+      contactEmail: "nulla.integer@yahoo.ca",
+    },
+    {
+      time: new Date("Feb 10, 2021"),
+      nights: 5,
+      price: 61,
+      contactPerson: "Edward Black",
+      contactEmail: "lobortis.mauris@icloud.couk",
+    },
+    {
+      time: new Date("Jul 28, 2021"),
+      nights: 5,
+      price: 56,
+      contactPerson: "Imogene Stafford",
+      contactEmail: "donec@icloud.net",
+    },
+    {
+      time: new Date("Aug 7, 2021"),
+      nights: 15,
+      price: 56,
+      contactPerson: "Clark Garcia",
+      contactEmail: "sed.leo@hotmail.com",
+    },
+    {
+      time: new Date("Sep 6, 2021"),
+      nights: 6,
+      price: 55,
+      contactPerson: "Uma Tate",
+      contactEmail: "quam@hotmail.ca",
+    },
+    {
+      time: new Date("Apr 9, 2021"),
+      nights: 16,
+      price: 60,
+      contactPerson: "Kennedy Newton",
+      contactEmail: "et.ultrices@protonmail.com",
+    },
+    {
+      time: new Date("Jan 17, 2021"),
+      nights: 13,
+      price: 55,
+      contactPerson: "Tana Fields",
+      contactEmail: "felis.ullamcorper@aol.org",
+    },
+    {
+      time: new Date("Sep 13, 2021"),
+      nights: 9,
+      price: 67,
+      contactPerson: "Chelsea Burke",
+      contactEmail: "nisi@aol.couk",
+    },
+    {
+      time: new Date("Aug 6, 2021"),
+      nights: 13,
+      price: 66,
+      contactPerson: "Samantha Hood",
+      contactEmail: "ac.eleifend@outlook.ca",
+    },
+    {
+      time: new Date("Jan 5, 2021"),
+      nights: 11,
+      price: 65,
+      contactPerson: "Chester Wooten",
+      contactEmail: "id.nunc.interdum@protonmail.net",
+    },
+    {
+      time: new Date("Jun 8, 2021"),
+      nights: 14,
+      price: 69,
+      contactPerson: "Vaughan Hopkins",
+      contactEmail: "morbi.metus.vivamus@google.couk",
+    },
+    {
+      time: new Date("Jan 28, 2021"),
+      nights: 6,
+      price: 58,
+      contactPerson: "Sydnee Montoya",
+      contactEmail: "donec.feugiat@protonmail.edu",
+    },
+    {
+      time: new Date("Jun 4, 2021"),
+      nights: 11,
+      price: 73,
+      contactPerson: "Kelly Espinoza",
+      contactEmail: "ligula.donec@aol.com",
+    },
+    {
+      time: new Date("May 18, 2021"),
+      nights: 2,
+      price: 70,
+      contactPerson: "Jonah Solis",
+      contactEmail: "orci.sem@google.couk",
+    },
+    {
+      time: new Date("Jun 8, 2021"),
+      nights: 3,
+      price: 58,
+      contactPerson: "Denton Taylor",
+      contactEmail: "metus.urna@protonmail.couk",
+    },
+    {
+      time: new Date("Feb 14, 2021"),
+      nights: 4,
+      price: 68,
+      contactPerson: "Keely Sutton",
+      contactEmail: "rutrum.non@hotmail.ca",
+    },
+    {
+      time: new Date("May 17, 2021"),
+      nights: 8,
+      price: 67,
+      contactPerson: "Derek Meyer",
+      contactEmail: "posuere.enim.nisl@aol.org",
+    },
+    {
+      time: new Date("Apr 18, 2021"),
+      nights: 9,
+      price: 73,
+      contactPerson: "Phelan Pena",
+      contactEmail: "ullamcorper.duis@google.net",
+    },
+    {
+      time: new Date("Apr 3, 2021"),
+      nights: 11,
+      price: 71,
+      contactPerson: "Maxwell Morales",
+      contactEmail: "eu.nibh@outlook.ca",
+    },
+    {
+      time: new Date("Aug 1, 2021"),
+      nights: 6,
+      price: 74,
+      contactPerson: "Hope Hines",
+      contactEmail: "rutrum.fusce@hotmail.couk",
+    },
+    {
+      time: new Date("May 28, 2021"),
+      nights: 11,
+      price: 67,
+      contactPerson: "Cullen Woodward",
+      contactEmail: "luctus.et@protonmail.ca",
+    },
+    {
+      time: new Date("Feb 5, 2021"),
+      nights: 11,
+      price: 63,
+      contactPerson: "Leah Tanner",
+      contactEmail: "neque.sed@icloud.couk",
+    },
+    {
+      time: new Date("Sep 27, 2021"),
+      nights: 15,
+      price: 61,
+      contactPerson: "Fletcher Blair",
+      contactEmail: "non.bibendum@yahoo.edu",
+    },
+    {
+      time: new Date("Mar 17, 2021"),
+      nights: 15,
+      price: 63,
+      contactPerson: "Jennifer Daugherty",
+      contactEmail: "ligula@yahoo.couk",
+    },
+    {
+      time: new Date("Mar 29, 2021"),
+      nights: 10,
+      price: 66,
+      contactPerson: "Zeus Riggs",
+      contactEmail: "ac.metus.vitae@outlook.com",
+    },
+    {
+      time: new Date("Jan 5, 2021"),
+      nights: 6,
+      price: 64,
+      contactPerson: "Chelsea Talley",
+      contactEmail: "nec.quam.curabitur@yahoo.net",
+    },
+    {
+      time: new Date("May 12, 2021"),
+      nights: 15,
+      price: 71,
+      contactPerson: "Sara Key",
+      contactEmail: "elementum.lorem@aol.com",
+    },
+    {
+      time: new Date("Jun 27, 2021"),
+      nights: 4,
+      price: 70,
+      contactPerson: "Uriel Mcconnell",
+      contactEmail: "curabitur.consequat@outlook.net",
+    },
+    {
+      time: new Date("Jun 10, 2021"),
+      nights: 10,
+      price: 74,
+      contactPerson: "Molly Atkins",
+      contactEmail: "magna.et@protonmail.ca",
+    },
+    {
+      time: new Date("Feb 11, 2021"),
+      nights: 13,
+      price: 66,
+      contactPerson: "Dieter Burnett",
+      contactEmail: "ac.ipsum.phasellus@google.net",
+    },
+  ];
+
+  gridData.forEach((item) => (item.totalCost = item.nights * item.price));
+
+  // Data for chart
+  const chartData = [
+    {
+      id: "Jan",
+      value: 44.33,
+      month: "Jan",
+      color: "var(--dhx-color-primary-light-active)",
+      opacity: 1,
+    },
+    {
+      id: "Feb",
+      value: 22.12,
+      month: "Feb",
+      color: "var(--dhx-color-primary-active)",
+      opacity: 0.4,
+    },
+    {
+      id: "Mar",
+      value: 53.21,
+      month: "Mar",
+      color: "var(--dhx-color-primary-disabled)",
+      opacity: 0.6,
+    },
+    {
+      id: "Apr",
+      value: 34.25,
+      month: "Apr",
+      color: "var(--dhx-color-primary-light-hover)",
+      opacity: 0.2,
+    },
+  ];
+
+  // Hotels chart data
+  const hotelsData = [
+    { month: "Jan.", "Won deals": 35, "Lost deals": 14, "All deals": 40 },
+    { month: "Feb.", "Won deals": 80, "Lost deals": 59, "All deals": 94 },
+    { month: "Mar.", "Won deals": 35, "Lost deals": 62, "All deals": 48 },
+    { month: "Apr.", "Won deals": 45, "Lost deals": 13, "All deals": 59 },
+    { month: "May.", "Won deals": 45, "Lost deals": 22, "All deals": 59 },
+    { month: "Jun.", "Won deals": 74, "Lost deals": 52, "All deals": 90 },
+    { month: "Jul.", "Won deals": 85, "Lost deals": 78, "All deals": 98 },
+  ];
+
+  // Series chart data
+  const seriesData = [
+    {
+      id: 'A',
+      value: 'Won deals',
+      color: 'none',
+      fill: 'var(--dhx-color-primary)',
+      showText: true,
+      showTextTemplate: (sum) => `$${sum}`
+    },
+    {
+      id: 'B',
+      value: 'Lost deals',
+      color: 'none',
+      fill: 'var(--dhx-color-primary-light-active)',
+      showText: true,
+      showTextTemplate: (sum) => `$${sum}`
+    },
+    {
+      id: 'all',
+      value: 'All deals',
+      color: 'none',
+      fill: 'var(--dhx-color-primary-disabled)',
+      type: 'area',
+      strokeWidth: 0
+    }
+  ];
+
+  // Ribbon data
+  const ribbonData = [
+    {
+      id: "fileBlock",
+      type: "block",
+      title: "File",
+      items: [
+        {
+          type: "block",
+          direction: "col",
+          items: [
+            {
+              value: "File",
+              id: "file",
+              icon: "mdi mdi-file-outline",
+              size: "small",
+              ribbonHeight: "auto",
+            },
+            {
+              type: "block",
+              items: [
+                { id: "folder", icon: "mdi mdi-folder-outline" },
+                { id: "cloud", icon: "mdi mdi-weather-cloudy" },
+              ],
+            },
+          ],
+        },
+        {
+          id: "save",
+          value: "Save",
+          icon: "mdi mdi-content-save",
+          size: "auto",
+        },
+      ],
+    },
+    {
+      type: "block",
+      title: "Action",
+      direction: "col",
+      items: [
+        { id: "copy", icon: "mdi mdi-content-copy", value: "Copy" },
+        { id: "cut", icon: "mdi mdi-content-cut", value: "Cut" },
+      ],
+    },
+    {
+      type: "block",
+      title: "Text",
+      items: [
+        {
+          type: "block",
+          direction: "col",
+          items: [
+            {
+              id: "left",
+              group: "align",
+              value: "Left",
+              icon: "mdi mdi-format-align-left",
+            },
+            {
+              id: "center",
+              group: "align",
+              value: "Center",
+              icon: "mdi mdi-format-align-center",
+            },
+          ],
+        },
+        {
+          type: "block",
+          direction: "col",
+          items: [
+            {
+              id: "right",
+              group: "align",
+              value: "Right",
+              icon: "mdi mdi-format-align-right",
+            },
+            {
+              id: "justify",
+              group: "align",
+              value: "Justify",
+              icon: "mdi mdi-format-align-justify",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      type: "block",
+      title: "Output",
+      items: [
+        { id: "print", value: "Print", icon: "mdi mdi-printer", size: "auto" },
+      ],
+    },
+  ];
+
+  // Tickets Dataview Data
+  const ticketsDataviewData = [
+    {
+      title: "Ticket for Technical Support #T742",
+      text: "Need some support to add a new widget to Dashboard.",
+      type: "major",
+      avatar:
+        "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_14.jpg",
+      name: "Margaret King",
+      comments: "0",
+      time: "12:15",
+    },
+    {
+      title: "Ticket for Sales Manager #S210",
+      text: "Can you tell me about pricing plans? I didn't understand the difference.",
+      type: "minor",
+      avatar:
+        "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_13.jpg",
+      name: "Patsy Rhyne",
+      comments: "2",
+      time: "12:15",
+    },
+    {
+      title: "Ticket for Marketing Manager #M112",
+      text: "Want to mention our scheduler case study in your social media. The company has to be mentioned.",
+      type: "minor",
+      avatar:
+        "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_06.jpg",
+      name: "Ravi Chakrabarti",
+      comments: "6",
+      time: "12:15",
+    },
+    {
+      title: "Ticket for Account Manager #A984",
+      text: "The trial period will end next week. Can you make a discount for us?",
+      type: "normal",
+      avatar:
+        "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_04.jpg",
+      name: "Lucy Miller",
+      comments: "1",
+      time: "12:15",
+    },
+    {
+      title: "Ticket for QA #Q394",
+      text: "I found a bug. When I change the skin settings some buttons don't change.",
+      type: "major",
+      avatar:
+        "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_10.jpg",
+      name: "Michael Willis",
+      comments: "4",
+      time: "12:15",
+    },
+    {
+      title: "Ticket for Technical Support #T741",
+      text: "I can't sign in to my account. Maybe I entered wrong password, help me!",
+      type: "major",
+      avatar:
+        "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_11.jpg",
+      name: "Casey Garcia",
+      comments: "0",
+      time: "12:15",
+    },
+  ];
+
+  // Data for tree
+  const treeData = [
+    {
+      value: "Books",
+      id: "Books",
+      opened: true,
+      items: [
+        {
+          value: "Thrillers",
+          id: "Thrillers",
+          opened: true,
+          items: [
+            {
+              value: "Bestsellers",
+              id: "Bestsellers",
+              checked: true,
+              items: [
+                {
+                  value: "Lawrence Block",
+                  id: "Lawrence Block",
+                },
+              ],
+            },
+            {
+              value: "Robert Crais",
+              id: "Robert Crais",
+            },
+            {
+              value: "Ian Rankin",
+              id: "Ian Rankin",
+            },
+            {
+              value: "James Johns",
+              id: "James Johns",
+            },
+            {
+              value: "Nancy Atherton",
+              id: "Nancy Atherton",
+            },
+          ],
+        },
+        {
+          value: "History",
+          id: "History",
+          items: [
+            {
+              value: "John Mack Faragher",
+              id: "John Mack Faragher",
+            },
+            {
+              value: "Jim Dwyer",
+              id: "Jim Dwyer",
+            },
+            {
+              value: "Larry Schweikart",
+              id: "Larry Schweikart",
+            },
+            {
+              value: "R. Lee Ermey",
+              id: "R. Lee Ermey",
+            },
+          ],
+        },
+        {
+          value: "Horror",
+          id: "Horror",
+          items: [
+            {
+              value: "Stephen King",
+              id: "Stephen King",
+            },
+            {
+              value: "Dan Brown",
+              id: "Dan Brown",
+            },
+            {
+              value: "Mary Janice Davidson",
+              id: "Mary Janice Davidson",
+            },
+            {
+              value: "Katie Macalister",
+              id: "Katie Macalister",
+            },
+          ],
+        },
+        {
+          value: "Fiction & Fantasy",
+          id: "Fiction & Fantasy",
+          items: [
+            {
+              value: "Audrey Niffenegger",
+              id: "Audrey Niffenegger",
+            },
+            {
+              value: "Philip Roth",
+              id: "Philip Roth",
+            },
+          ],
+        },
+        {
+          value: "Teens",
+          id: "Teens",
+          items: [
+            {
+              value: "Joss Whedon",
+              id: "Joss Whedon",
+            },
+            {
+              value: "Meg Cabot",
+              id: "Meg Cabot",
+            },
+            {
+              value: "Garth Nix",
+              id: "Garth Nix",
+            },
+            {
+              value: "Ann Brashares",
+              id: "Ann Brashares",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  const messageDataviewData = [
+    {
+      mail: "pmccoy@flowers.com",
+      name: "Philip Mccoy",
+      avatar:
+        "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_02.jpg",
+      status: "online",
+      delivered: "0/3",
+    },
+    {
+      mail: "clores@flowers.com",
+      name: "Calvin Flores",
+      avatar:
+        "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_04.jpg",
+      status: "online",
+      delivered: "0/3",
+    },
+    {
+      mail: "dwight@flowers.com",
+      name: "Dwight Jones",
+      avatar:
+        "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_05.jpg",
+      status: "offline",
+      delivered: "0/3",
+    },
+    {
+      mail: "flores@flowers.com",
+      name: "Esther Flores",
+      avatar:
+        "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_11.jpg",
+      status: "offline",
+      delivered: "3/3",
+    },
+    {
+      mail: "gregory@flowers.com",
+      name: "Gregory Bell",
+      avatar:
+        "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_10.jpg",
+      status: "online",
+      delivered: "0/3",
+    },
+    {
+      mail: "guy@flowers.com",
+      name: "Guy Webb",
+      avatar:
+        "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_06.jpg",
+      status: "online",
+      delivered: "2/3",
+    },
+    {
+      mail: "pat@flowers.com",
+      name: "Pat Cooper",
+      avatar:
+        "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_15.jpg",
+      status: "offline",
+      delivered: "1/3",
+    },
+    {
+      name: "Shaeleigh Lopez",
+      mail: "odio@hotmail.com",
+      avatar:
+        "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_01.jpg",
+      status: "online",
+      delivered: "0/3",
+    },
+    {
+      name: "Craig Pope",
+      mail: "fermentum.metus.aenean@icloud.edu",
+      avatar:
+        "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_03.jpg",
+      status: "offline",
+      delivered: "1/3",
+    },
+    {
+      name: "Angela Clements",
+      mail: "nonummy.ut@icloud.net",
+      avatar:
+        "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_07.jpg",
+      status: "offline",
+      delivered: "3/3",
+    },
+    {
+      name: "Howard Villarreal",
+      mail: "libero.donec.consectetuer@icloud.com",
+      avatar:
+        "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_08.jpg",
+      status: "online",
+      delivered: "1/3",
+    },
+    {
+      name: "Prescott Stafford",
+      mail: "nunc.ac.sem@icloud.edu",
+      avatar:
+        "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_09.jpg",
+      status: "offline",
+      delivered: "2/3",
+    },
+  ];
+
+  const country = [
+    {
+      id: "austria",
+      value: "Austria",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/at.png",
+    },
+    {
+      value: "Belarus",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/by.png",
+    },
+    {
+      value: "Belgium",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/be.png",
+    },
+    {
+      value: "Bulgaria",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/bg.png",
+    },
+    {
+      value: "Cyprus",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/cy.png",
+    },
+    {
+      value: "Czech Republic",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/cz.png",
+    },
+    {
+      value: "Denmark",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/dk.png",
+    },
+    {
+      id: "estonia",
+      value: "Estonia",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/ee.png",
+    },
+    {
+      value: "Finland",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/fi.png",
+    },
+    {
+      value: "France",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/fr.png",
+    },
+    {
+      value: "Germany",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/de.png",
+    },
+    {
+      value: "Greece",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/gr.png",
+    },
+    {
+      value: "Hungary",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/hu.png",
+    },
+    {
+      value: "Ireland",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/ie.png",
+    },
+    {
+      value: "Italy",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/it.png",
+    },
+    {
+      value: "Latvia",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/lv.png",
+    },
+    {
+      value: "Lithuania",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/lt.png",
+    },
+    {
+      value: "Luxembourg",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/lu.png",
+    },
+    {
+      value: "Malta",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/mt.png",
+    },
+    {
+      value: "Netherlands",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/nl.png",
+    },
+    {
+      value: "Poland",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/pl.png",
+    },
+    {
+      value: "Portugal",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/pt.png",
+    },
+    {
+      value: "Russia",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/ru.png",
+    },
+    {
+      value: "Romania",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/ro.png",
+    },
+    {
+      value: "Slovakia",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/sk.png",
+    },
+    {
+      value: "Slovenia",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/si.png",
+    },
+    {
+      value: "Spain",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/es.png",
+    },
+    {
+      value: "Sweden",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/se.png",
+    },
+    {
+      value: "United Kingdom",
+      src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/gb.png",
+    },
+  ];
+
+  return{
+    gridData,
+    chartData,
+    hotelsData,
+    seriesData,
+    ribbonData,
+    ticketsDataviewData,
+    treeData,
+    messageDataviewData,
+    country,
+    sidebarData,
+    toolbarData
+  };
+}
\ No newline at end of file
diff --git a/src/store.js b/src/store.js
deleted file mode 100644
index c7b0277..0000000
--- a/src/store.js
+++ /dev/null
@@ -1,1429 +0,0 @@
-import { reactive } from "vue";
-
-const sidebarData = [
-  {
-    id: "toggle",
-    css: "toggle-button",
-    icon: "mdi mdi-backburger",
-  },
-  {
-    type: "customHTML",
-    id: "userInfo",
-    css: "user-info_item",
-    html:
-      "<div class='user-info_container'>" +
-      "<img class='user-info_avatar' src='https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_63.jpg'/>" +
-      "<div class='user-info_title'>" +
-      "Gloria McKinney" +
-      "</div>" +
-      "<div class='user-info_contact'>" +
-      "@gmckinney" +
-      "</div>" +
-      "</div>",
-  },
-  {
-    type: "separator",
-  },
-  {
-    id: "today",
-    value: "Today",
-    icon: "mdi mdi-calendar-star",
-  },
-  {
-    id: "overdue",
-    value: "Overdue",
-    icon: "mdi mdi-calendar-start",
-  },
-  {
-    id: "unscheduled",
-    value: "Unscheduled",
-    icon: "mdi mdi-calendar-blank",
-  },
-  {
-    type: "separator",
-  },
-  {
-    id: "projects",
-    value: "Projects",
-    icon: "mdi mdi-folder-star-outline",
-    items: [
-      {
-        id: "project1",
-        value: "Project 1",
-        icon: "mdi mdi-plus",
-      },
-      {
-        id: "project2",
-        value: "Project 2",
-        icon: "mdi mdi-plus",
-      },
-      {
-        id: "project3",
-        value: "Project 3",
-        icon: "mdi mdi-plus",
-      },
-    ],
-  },
-  {
-    type: "separator",
-  },
-  {
-    id: "assigned",
-    value: "Assigned",
-    icon: "mdi mdi-account-search-outline",
-    items: [
-      {
-        id: "person1",
-        value: "Person 1",
-        icon: "mdi mdi-plus",
-      },
-      {
-        id: "person2",
-        value: "Person 2",
-        icon: "mdi mdi-plus",
-      },
-      {
-        id: "Person3",
-        value: "person 3",
-        icon: "mdi mdi-plus",
-      },
-    ],
-  },
-  {
-    type: "separator",
-  },
-  {
-    type: "spacer",
-  },
-  {
-    type: "separator",
-  },
-  {
-    id: "notification",
-    value: "Notification",
-    count: 18,
-    icon: "mdi mdi-bell-outline",
-    countColor: "#D60000",
-  },
-  {
-    id: "configuration",
-    value: "Configuration",
-    icon: "mdi mdi-tune",
-    items: [
-      {
-        id: "myAccount",
-        value: "My Account",
-        icon: "mdi mdi-account-settings",
-      },
-      {
-        id: "general",
-        value: "General Configuration",
-        icon: "mdi mdi-tune",
-      },
-    ],
-  },
-];
-
-const toolbarData = [
-  {
-    id: "topMenuButton",
-    type: "button",
-    value: "Toolbar button",
-    view: "flat",
-    icon: "dxi dxi-plus",
-    size: "small",
-    circle: true,
-    color: "secondary",
-  },
-
-  {
-    type: "spacer",
-  },
-  {
-    id: "theme",
-    circle: true,
-    icon: "mdi mdi-weather-night",
-    checked: false,
-  },
-
-  {
-    id: "contrast",
-    twoState: true,
-    active: false,
-    icon: "mdi mdi-contrast-circle",
-  },
-  {
-    id: "avatar",
-    type: "imageButton",
-    src: "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_63.jpg",
-    count: 15,
-  },
-];
-
-// Data for grid
-const gridDataset = [
-  {
-    time: new Date("Jan 28, 2021"),
-    nights: 7,
-    price: 68,
-    contactPerson: "Yoshio Slater",
-    contactEmail: "phasellus.fermentum@yahoo.net",
-  },
-  {
-    time: new Date("Apr 13, 2021"),
-    nights: 6,
-    price: 66,
-    contactPerson: "Christopher Kirk",
-    contactEmail: "posuere.vulputate.lacus@outlook.org",
-  },
-  {
-    time: new Date("Jan 31, 2021"),
-    nights: 15,
-    price: 64,
-    contactPerson: "Jana Meyers",
-    contactEmail: "mollis@aol.edu",
-  },
-  {
-    time: new Date("Feb 22, 2021"),
-    nights: 11,
-    price: 57,
-    contactPerson: "Sawyer Smith",
-    contactEmail: "lorem.ipsum.sodales@icloud.org",
-  },
-  {
-    time: new Date("Feb 3, 2021"),
-    nights: 10,
-    price: 68,
-    contactPerson: "Gabriel Gates",
-    contactEmail: "sollicitudin.a@icloud.com",
-  },
-  {
-    time: new Date("Apr 6, 2021"),
-    nights: 7,
-    price: 67,
-    contactPerson: "Emily Reynolds",
-    contactEmail: "suspendisse.aliquet@outlook.edu",
-  },
-  {
-    time: new Date("May 22, 2021"),
-    nights: 11,
-    price: 70,
-    contactPerson: "Xavier Middleton",
-    contactEmail: "eu@icloud.net",
-  },
-  {
-    time: new Date("Jul 9, 2021"),
-    nights: 11,
-    price: 61,
-    contactPerson: "Tamara Raymond",
-    contactEmail: "vivamus@yahoo.ca",
-  },
-  {
-    time: new Date("Jun 15, 2021"),
-    nights: 15,
-    price: 61,
-    contactPerson: "Jolene Lamb",
-    contactEmail: "vulputate.posuere@outlook.org",
-  },
-  {
-    time: new Date("Jan 31, 2021"),
-    nights: 15,
-    price: 70,
-    contactPerson: "David Wilkins",
-    contactEmail: "ipsum@icloud.org",
-  },
-  {
-    time: new Date("Aug 16, 2021"),
-    nights: 8,
-    price: 65,
-    contactPerson: "Nita Padilla",
-    contactEmail: "quis.pede@google.net",
-  },
-  {
-    time: new Date("Apr 4, 2021"),
-    nights: 13,
-    price: 73,
-    contactPerson: "Martha Fischer",
-    contactEmail: "elit.pharetra@hotmail.org",
-  },
-  {
-    time: new Date("Jun 7, 2021"),
-    nights: 14,
-    price: 69,
-    contactPerson: "Rudyard Powell",
-    contactEmail: "ridiculus.mus@aol.com",
-  },
-  {
-    time: new Date("Sep 14, 2021"),
-    nights: 11,
-    price: 68,
-    contactPerson: "Clementine Mercer",
-    contactEmail: "nec@aol.couk",
-  },
-  {
-    time: new Date("Aug 3, 2021"),
-    nights: 14,
-    price: 74,
-    contactPerson: "Hu Pace",
-    contactEmail: "phasellus.dolor.elit@hotmail.net",
-  },
-  {
-    time: new Date("Sep 12, 2021"),
-    nights: 13,
-    price: 73,
-    contactPerson: "Petra James",
-    contactEmail: "luctus.et@yahoo.net",
-  },
-  {
-    time: new Date("Aug 4, 2021"),
-    nights: 14,
-    price: 60,
-    contactPerson: "Chaney Henson",
-    contactEmail: "in.condimentum@protonmail.net",
-  },
-  {
-    time: new Date("Jul 15, 2021"),
-    nights: 13,
-    price: 59,
-    contactPerson: "Cole Wallace",
-    contactEmail: "in.aliquet@outlook.org",
-  },
-  {
-    time: new Date("Jan 15, 2021"),
-    nights: 13,
-    price: 57,
-    contactPerson: "Emmanuel Miller",
-    contactEmail: "pharetra.quisque.ac@aol.edu",
-  },
-  {
-    time: new Date("Sep 18, 2021"),
-    nights: 9,
-    price: 69,
-    contactPerson: "Uriah Ayers",
-    contactEmail: "nunc.sed.pede@google.net",
-  },
-  {
-    time: new Date("May 24, 2021"),
-    nights: 13,
-    price: 73,
-    contactPerson: "Illiana Floyd",
-    contactEmail: "rhoncus.nullam@hotmail.ca",
-  },
-  {
-    time: new Date("Jul 4, 2021"),
-    nights: 3,
-    price: 61,
-    contactPerson: "Cara Merritt",
-    contactEmail: "sagittis@yahoo.ca",
-  },
-  {
-    time: new Date("Jan 27, 2021"),
-    nights: 4,
-    price: 70,
-    contactPerson: "Yetta O'Neill",
-    contactEmail: "nullam@aol.net",
-  },
-  {
-    time: new Date("Aug 16, 2021"),
-    nights: 9,
-    price: 63,
-    contactPerson: "Chadwick Holland",
-    contactEmail: "congue.turpis@aol.net",
-  },
-  {
-    time: new Date("Mar 22, 2021"),
-    nights: 3,
-    price: 59,
-    contactPerson: "Nell Copeland",
-    contactEmail: "nulla.vulputate@google.edu",
-  },
-  {
-    time: new Date("Feb 26, 2021"),
-    nights: 14,
-    price: 74,
-    contactPerson: "Vivian Fletcher",
-    contactEmail: "bibendum.ullamcorper@icloud.net",
-  },
-  {
-    time: new Date("Jun 26, 2021"),
-    nights: 11,
-    price: 58,
-    contactPerson: "Tatiana Mckay",
-    contactEmail: "ac.arcu@hotmail.ca",
-  },
-  {
-    time: new Date("Jul 30, 2021"),
-    nights: 9,
-    price: 61,
-    contactPerson: "Jamalia Mitchell",
-    contactEmail: "sed.id.risus@aol.edu",
-  },
-  {
-    time: new Date("Jun 15, 2021"),
-    nights: 13,
-    price: 66,
-    contactPerson: "Hedy Kirby",
-    contactEmail: "praesent.luctus@hotmail.com",
-  },
-  {
-    time: new Date("Aug 16, 2021"),
-    nights: 9,
-    price: 67,
-    contactPerson: "Solomon Ortiz",
-    contactEmail: "sem.vitae@yahoo.com",
-  },
-  {
-    time: new Date("Jul 15, 2021"),
-    nights: 3,
-    price: 67,
-    contactPerson: "Adrienne O'Neill",
-    contactEmail: "dapibus.gravida@protonmail.ca",
-  },
-  {
-    time: new Date("Jul 1, 2021"),
-    nights: 7,
-    price: 72,
-    contactPerson: "Alma Rollins",
-    contactEmail: "orci@protonmail.ca",
-  },
-  {
-    time: new Date("Jul 22, 2021"),
-    nights: 11,
-    price: 74,
-    contactPerson: "Gregory Boyd",
-    contactEmail: "curabitur.consequat.lectus@yahoo.net",
-  },
-  {
-    time: new Date("Apr 24, 2021"),
-    nights: 8,
-    price: 74,
-    contactPerson: "Damon Curry",
-    contactEmail: "aliquam.fringilla@hotmail.org",
-  },
-  {
-    time: new Date("Mar 8, 2021"),
-    nights: 5,
-    price: 63,
-    contactPerson: "Imelda Tyson",
-    contactEmail: "nunc.interdum@icloud.edu",
-  },
-  {
-    time: new Date("Apr 13, 2021"),
-    nights: 8,
-    price: 57,
-    contactPerson: "Yen Cannon",
-    contactEmail: "nunc@outlook.couk",
-  },
-  {
-    time: new Date("Feb 27, 2021"),
-    nights: 5,
-    price: 73,
-    contactPerson: "Olivia Patterson",
-    contactEmail: "posuere@google.org",
-  },
-  {
-    time: new Date("Apr 21, 2021"),
-    nights: 13,
-    price: 59,
-    contactPerson: "Ramona Logan",
-    contactEmail: "est@hotmail.ca",
-  },
-  {
-    time: new Date("Jul 8, 2021"),
-    nights: 4,
-    price: 67,
-    contactPerson: "Risa Butler",
-    contactEmail: "suscipit.est.ac@yahoo.net",
-  },
-  {
-    time: new Date("Feb 19, 2021"),
-    nights: 3,
-    price: 71,
-    contactPerson: "Charity Price",
-    contactEmail: "lobortis.augue.scelerisque@protonmail.couk",
-  },
-  {
-    time: new Date("Feb 23, 2021"),
-    nights: 15,
-    price: 59,
-    contactPerson: "Rina Macdonald",
-    contactEmail: "quisque@outlook.com",
-  },
-  {
-    time: new Date("Apr 8, 2021"),
-    nights: 16,
-    price: 68,
-    contactPerson: "Travis Steele",
-    contactEmail: "natoque.penatibus@google.edu",
-  },
-  {
-    time: new Date("Apr 30, 2021"),
-    nights: 9,
-    price: 64,
-    contactPerson: "Deanna Reyes",
-    contactEmail: "dolor@hotmail.net",
-  },
-  {
-    time: new Date("Feb 15, 2021"),
-    nights: 14,
-    price: 67,
-    contactPerson: "Faith Rojas",
-    contactEmail: "sagittis.duis.gravida@hotmail.edu",
-  },
-  {
-    time: new Date("Mar 1, 2021"),
-    nights: 4,
-    price: 73,
-    contactPerson: "Hyacinth Fuentes",
-    contactEmail: "nec.urna@google.com",
-  },
-  {
-    time: new Date("May 9, 2021"),
-    nights: 2,
-    price: 71,
-    contactPerson: "Brenden Sloan",
-    contactEmail: "a.dui.cras@google.net",
-  },
-  {
-    time: new Date("Feb 17, 2021"),
-    nights: 8,
-    price: 74,
-    contactPerson: "Nora Bruce",
-    contactEmail: "egestas.blandit@google.org",
-  },
-  {
-    time: new Date("Jul 20, 2021"),
-    nights: 10,
-    price: 68,
-    contactPerson: "Riley Harrison",
-    contactEmail: "lacus@outlook.ca",
-  },
-  {
-    time: new Date("May 24, 2021"),
-    nights: 12,
-    price: 74,
-    contactPerson: "Mariko Lewis",
-    contactEmail: "volutpat@google.couk",
-  },
-  {
-    time: new Date("Feb 16, 2021"),
-    nights: 2,
-    price: 68,
-    contactPerson: "Todd Jones",
-    contactEmail: "cras.eu.tellus@icloud.org",
-  },
-  {
-    time: new Date("Apr 21, 2021"),
-    nights: 16,
-    price: 69,
-    contactPerson: "Tasha Mcleod",
-    contactEmail: "quam.a@protonmail.org",
-  },
-  {
-    time: new Date("Aug 28, 2021"),
-    nights: 10,
-    price: 74,
-    contactPerson: "Fletcher Bird",
-    contactEmail: "tincidunt@yahoo.com",
-  },
-  {
-    time: new Date("Apr 19, 2021"),
-    nights: 3,
-    price: 57,
-    contactPerson: "Alan Murphy",
-    contactEmail: "tempor.erat.neque@icloud.com",
-  },
-  {
-    time: new Date("Jan 26, 2021"),
-    nights: 13,
-    price: 71,
-    contactPerson: "Hakeem Booth",
-    contactEmail: "porttitor.tellus@hotmail.com",
-  },
-  {
-    time: new Date("Feb 4, 2021"),
-    nights: 11,
-    price: 67,
-    contactPerson: "Courtney Sellers",
-    contactEmail: "penatibus.et@outlook.ca",
-  },
-  {
-    time: new Date("Jul 28, 2021"),
-    nights: 11,
-    price: 67,
-    contactPerson: "Frances Mcdonald",
-    contactEmail: "libero.dui@aol.org",
-  },
-  {
-    time: new Date("Jan 24, 2021"),
-    nights: 6,
-    price: 72,
-    contactPerson: "Devin Mathews",
-    contactEmail: "proin.nisl.sem@google.couk",
-  },
-  {
-    time: new Date("May 13, 2021"),
-    nights: 10,
-    price: 71,
-    contactPerson: "Arden Sparks",
-    contactEmail: "arcu.sed@google.edu",
-  },
-  {
-    time: new Date("Apr 1, 2021"),
-    nights: 2,
-    price: 55,
-    contactPerson: "Roanna Calhoun",
-    contactEmail: "nisi.aenean@outlook.edu",
-  },
-  {
-    time: new Date("Feb 9, 2021"),
-    nights: 12,
-    price: 66,
-    contactPerson: "Zeph Ellis",
-    contactEmail: "nonummy.ipsum.non@aol.org",
-  },
-  {
-    time: new Date("Jun 10, 2021"),
-    nights: 10,
-    price: 73,
-    contactPerson: "Harriet Lee",
-    contactEmail: "mauris.quis@aol.edu",
-  },
-  {
-    time: new Date("Jan 25, 2021"),
-    nights: 7,
-    price: 60,
-    contactPerson: "Chanda Gay",
-    contactEmail: "egestas.blandit.nam@yahoo.ca",
-  },
-  {
-    time: new Date("Aug 22, 2021"),
-    nights: 12,
-    price: 56,
-    contactPerson: "Tiger Roman",
-    contactEmail: "et@aol.org",
-  },
-  {
-    time: new Date("Aug 6, 2021"),
-    nights: 13,
-    price: 59,
-    contactPerson: "Yuri Booker",
-    contactEmail: "pretium.neque@google.ca",
-  },
-  {
-    time: new Date("Apr 12, 2021"),
-    nights: 7,
-    price: 56,
-    contactPerson: "Blaze Gardner",
-    contactEmail: "sed.leo@aol.ca",
-  },
-  {
-    time: new Date("Jun 13, 2021"),
-    nights: 4,
-    price: 73,
-    contactPerson: "Vanna Nieves",
-    contactEmail: "amet.consectetuer@google.edu",
-  },
-  {
-    time: new Date("May 8, 2021"),
-    nights: 4,
-    price: 58,
-    contactPerson: "Malik Mullins",
-    contactEmail: "pede.nec@yahoo.org",
-  },
-  {
-    time: new Date("Apr 25, 2021"),
-    nights: 5,
-    price: 60,
-    contactPerson: "Sarah Goodwin",
-    contactEmail: "condimentum.eget@icloud.couk",
-  },
-  {
-    time: new Date("Jan 13, 2021"),
-    nights: 5,
-    price: 73,
-    contactPerson: "Nigel Griffin",
-    contactEmail: "ornare@yahoo.edu",
-  },
-  {
-    time: new Date("Mar 25, 2021"),
-    nights: 6,
-    price: 67,
-    contactPerson: "Lysandra Gregory",
-    contactEmail: "in.ornare@protonmail.edu",
-  },
-  {
-    time: new Date("Sep 28, 2021"),
-    nights: 8,
-    price: 70,
-    contactPerson: "Breanna Williamson",
-    contactEmail: "nulla.integer@yahoo.ca",
-  },
-  {
-    time: new Date("Feb 10, 2021"),
-    nights: 5,
-    price: 61,
-    contactPerson: "Edward Black",
-    contactEmail: "lobortis.mauris@icloud.couk",
-  },
-  {
-    time: new Date("Jul 28, 2021"),
-    nights: 5,
-    price: 56,
-    contactPerson: "Imogene Stafford",
-    contactEmail: "donec@icloud.net",
-  },
-  {
-    time: new Date("Aug 7, 2021"),
-    nights: 15,
-    price: 56,
-    contactPerson: "Clark Garcia",
-    contactEmail: "sed.leo@hotmail.com",
-  },
-  {
-    time: new Date("Sep 6, 2021"),
-    nights: 6,
-    price: 55,
-    contactPerson: "Uma Tate",
-    contactEmail: "quam@hotmail.ca",
-  },
-  {
-    time: new Date("Apr 9, 2021"),
-    nights: 16,
-    price: 60,
-    contactPerson: "Kennedy Newton",
-    contactEmail: "et.ultrices@protonmail.com",
-  },
-  {
-    time: new Date("Jan 17, 2021"),
-    nights: 13,
-    price: 55,
-    contactPerson: "Tana Fields",
-    contactEmail: "felis.ullamcorper@aol.org",
-  },
-  {
-    time: new Date("Sep 13, 2021"),
-    nights: 9,
-    price: 67,
-    contactPerson: "Chelsea Burke",
-    contactEmail: "nisi@aol.couk",
-  },
-  {
-    time: new Date("Aug 6, 2021"),
-    nights: 13,
-    price: 66,
-    contactPerson: "Samantha Hood",
-    contactEmail: "ac.eleifend@outlook.ca",
-  },
-  {
-    time: new Date("Jan 5, 2021"),
-    nights: 11,
-    price: 65,
-    contactPerson: "Chester Wooten",
-    contactEmail: "id.nunc.interdum@protonmail.net",
-  },
-  {
-    time: new Date("Jun 8, 2021"),
-    nights: 14,
-    price: 69,
-    contactPerson: "Vaughan Hopkins",
-    contactEmail: "morbi.metus.vivamus@google.couk",
-  },
-  {
-    time: new Date("Jan 28, 2021"),
-    nights: 6,
-    price: 58,
-    contactPerson: "Sydnee Montoya",
-    contactEmail: "donec.feugiat@protonmail.edu",
-  },
-  {
-    time: new Date("Jun 4, 2021"),
-    nights: 11,
-    price: 73,
-    contactPerson: "Kelly Espinoza",
-    contactEmail: "ligula.donec@aol.com",
-  },
-  {
-    time: new Date("May 18, 2021"),
-    nights: 2,
-    price: 70,
-    contactPerson: "Jonah Solis",
-    contactEmail: "orci.sem@google.couk",
-  },
-  {
-    time: new Date("Jun 8, 2021"),
-    nights: 3,
-    price: 58,
-    contactPerson: "Denton Taylor",
-    contactEmail: "metus.urna@protonmail.couk",
-  },
-  {
-    time: new Date("Feb 14, 2021"),
-    nights: 4,
-    price: 68,
-    contactPerson: "Keely Sutton",
-    contactEmail: "rutrum.non@hotmail.ca",
-  },
-  {
-    time: new Date("May 17, 2021"),
-    nights: 8,
-    price: 67,
-    contactPerson: "Derek Meyer",
-    contactEmail: "posuere.enim.nisl@aol.org",
-  },
-  {
-    time: new Date("Apr 18, 2021"),
-    nights: 9,
-    price: 73,
-    contactPerson: "Phelan Pena",
-    contactEmail: "ullamcorper.duis@google.net",
-  },
-  {
-    time: new Date("Apr 3, 2021"),
-    nights: 11,
-    price: 71,
-    contactPerson: "Maxwell Morales",
-    contactEmail: "eu.nibh@outlook.ca",
-  },
-  {
-    time: new Date("Aug 1, 2021"),
-    nights: 6,
-    price: 74,
-    contactPerson: "Hope Hines",
-    contactEmail: "rutrum.fusce@hotmail.couk",
-  },
-  {
-    time: new Date("May 28, 2021"),
-    nights: 11,
-    price: 67,
-    contactPerson: "Cullen Woodward",
-    contactEmail: "luctus.et@protonmail.ca",
-  },
-  {
-    time: new Date("Feb 5, 2021"),
-    nights: 11,
-    price: 63,
-    contactPerson: "Leah Tanner",
-    contactEmail: "neque.sed@icloud.couk",
-  },
-  {
-    time: new Date("Sep 27, 2021"),
-    nights: 15,
-    price: 61,
-    contactPerson: "Fletcher Blair",
-    contactEmail: "non.bibendum@yahoo.edu",
-  },
-  {
-    time: new Date("Mar 17, 2021"),
-    nights: 15,
-    price: 63,
-    contactPerson: "Jennifer Daugherty",
-    contactEmail: "ligula@yahoo.couk",
-  },
-  {
-    time: new Date("Mar 29, 2021"),
-    nights: 10,
-    price: 66,
-    contactPerson: "Zeus Riggs",
-    contactEmail: "ac.metus.vitae@outlook.com",
-  },
-  {
-    time: new Date("Jan 5, 2021"),
-    nights: 6,
-    price: 64,
-    contactPerson: "Chelsea Talley",
-    contactEmail: "nec.quam.curabitur@yahoo.net",
-  },
-  {
-    time: new Date("May 12, 2021"),
-    nights: 15,
-    price: 71,
-    contactPerson: "Sara Key",
-    contactEmail: "elementum.lorem@aol.com",
-  },
-  {
-    time: new Date("Jun 27, 2021"),
-    nights: 4,
-    price: 70,
-    contactPerson: "Uriel Mcconnell",
-    contactEmail: "curabitur.consequat@outlook.net",
-  },
-  {
-    time: new Date("Jun 10, 2021"),
-    nights: 10,
-    price: 74,
-    contactPerson: "Molly Atkins",
-    contactEmail: "magna.et@protonmail.ca",
-  },
-  {
-    time: new Date("Feb 11, 2021"),
-    nights: 13,
-    price: 66,
-    contactPerson: "Dieter Burnett",
-    contactEmail: "ac.ipsum.phasellus@google.net",
-  },
-];
-
-gridDataset.forEach((item) => (item.totalCost = item.nights * item.price));
-
-// Data for chart
-const chartData = [
-  {
-    id: "Jan",
-    value: 44.33,
-    month: "Jan",
-    color: "var(--dhx-color-primary-light-active)",
-    opacity: 1,
-  },
-  {
-    id: "Feb",
-    value: 22.12,
-    month: "Feb",
-    color: "var(--dhx-color-primary-active)",
-    opacity: 0.4,
-  },
-  {
-    id: "Mar",
-    value: 53.21,
-    month: "Mar",
-    color: "var(--dhx-color-primary-disabled)",
-    opacity: 0.6,
-  },
-  {
-    id: "Apr",
-    value: 34.25,
-    month: "Apr",
-    color: "var(--dhx-color-primary-light-hover)",
-    opacity: 0.2,
-  },
-];
-
-// Hotels chart data
-const hotelsData = [
-  { month: "Jan.", "Won deals": 35, "Lost deals": 14, "All deals": 40 },
-  { month: "Feb.", "Won deals": 80, "Lost deals": 59, "All deals": 94 },
-  { month: "Mar.", "Won deals": 35, "Lost deals": 62, "All deals": 48 },
-  { month: "Apr.", "Won deals": 45, "Lost deals": 13, "All deals": 59 },
-  { month: "May.", "Won deals": 45, "Lost deals": 22, "All deals": 59 },
-  { month: "Jun.", "Won deals": 74, "Lost deals": 52, "All deals": 90 },
-  { month: "Jul.", "Won deals": 85, "Lost deals": 78, "All deals": 98 },
-];
-
-// Ribbon data
-const ribbonData = [
-  {
-    id: "fileBlock",
-    type: "block",
-    title: "File",
-    items: [
-      {
-        type: "block",
-        direction: "col",
-        items: [
-          {
-            value: "File",
-            id: "file",
-            icon: "mdi mdi-file-outline",
-            size: "small",
-            ribbonHeight: "auto",
-          },
-          {
-            type: "block",
-            items: [
-              { id: "folder", icon: "mdi mdi-folder-outline" },
-              { id: "cloud", icon: "mdi mdi-weather-cloudy" },
-            ],
-          },
-        ],
-      },
-      {
-        id: "save",
-        value: "Save",
-        icon: "mdi mdi-content-save",
-        size: "auto",
-      },
-    ],
-  },
-  {
-    type: "block",
-    title: "Action",
-    direction: "col",
-    items: [
-      { id: "copy", icon: "mdi mdi-content-copy", value: "Copy" },
-      { id: "cut", icon: "mdi mdi-content-cut", value: "Cut" },
-    ],
-  },
-  {
-    type: "block",
-    title: "Text",
-    items: [
-      {
-        type: "block",
-        direction: "col",
-        items: [
-          {
-            id: "left",
-            group: "align",
-            value: "Left",
-            icon: "mdi mdi-format-align-left",
-          },
-          {
-            id: "center",
-            group: "align",
-            value: "Center",
-            icon: "mdi mdi-format-align-center",
-          },
-        ],
-      },
-      {
-        type: "block",
-        direction: "col",
-        items: [
-          {
-            id: "right",
-            group: "align",
-            value: "Right",
-            icon: "mdi mdi-format-align-right",
-          },
-          {
-            id: "justify",
-            group: "align",
-            value: "Justify",
-            icon: "mdi mdi-format-align-justify",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    type: "block",
-    title: "Output",
-    items: [
-      { id: "print", value: "Print", icon: "mdi mdi-printer", size: "auto" },
-    ],
-  },
-];
-
-// Tickets Dataview Data
-const ticketsDataviewData = [
-  {
-    title: "Ticket for Technical Support #T742",
-    text: "Need some support to add a new widget to Dashboard.",
-    type: "major",
-    avatar:
-      "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_14.jpg",
-    name: "Margaret King",
-    comments: "0",
-    time: "12:15",
-  },
-  {
-    title: "Ticket for Sales Manager #S210",
-    text: "Can you tell me about pricing plans? I didn't understand the difference.",
-    type: "minor",
-    avatar:
-      "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_13.jpg",
-    name: "Patsy Rhyne",
-    comments: "2",
-    time: "12:15",
-  },
-  {
-    title: "Ticket for Marketing Manager #M112",
-    text: "Want to mention our scheduler case study in your social media. The company has to be mentioned.",
-    type: "minor",
-    avatar:
-      "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_06.jpg",
-    name: "Ravi Chakrabarti",
-    comments: "6",
-    time: "12:15",
-  },
-  {
-    title: "Ticket for Account Manager #A984",
-    text: "The trial period will end next week. Can you make a discount for us?",
-    type: "normal",
-    avatar:
-      "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_04.jpg",
-    name: "Lucy Miller",
-    comments: "1",
-    time: "12:15",
-  },
-  {
-    title: "Ticket for QA #Q394",
-    text: "I found a bug. When I change the skin settings some buttons don't change.",
-    type: "major",
-    avatar:
-      "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_10.jpg",
-    name: "Michael Willis",
-    comments: "4",
-    time: "12:15",
-  },
-  {
-    title: "Ticket for Technical Support #T741",
-    text: "I can't sign in to my account. Maybe I entered wrong password, help me!",
-    type: "major",
-    avatar:
-      "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_11.jpg",
-    name: "Casey Garcia",
-    comments: "0",
-    time: "12:15",
-  },
-];
-
-// Data for tree
-const treeData = [
-  {
-    value: "Books",
-    id: "Books",
-    opened: true,
-    items: [
-      {
-        value: "Thrillers",
-        id: "Thrillers",
-        opened: true,
-        items: [
-          {
-            value: "Bestsellers",
-            id: "Bestsellers",
-            checked: true,
-            items: [
-              {
-                value: "Lawrence Block",
-                id: "Lawrence Block",
-              },
-            ],
-          },
-          {
-            value: "Robert Crais",
-            id: "Robert Crais",
-          },
-          {
-            value: "Ian Rankin",
-            id: "Ian Rankin",
-          },
-          {
-            value: "James Johns",
-            id: "James Johns",
-          },
-          {
-            value: "Nancy Atherton",
-            id: "Nancy Atherton",
-          },
-        ],
-      },
-      {
-        value: "History",
-        id: "History",
-        items: [
-          {
-            value: "John Mack Faragher",
-            id: "John Mack Faragher",
-          },
-          {
-            value: "Jim Dwyer",
-            id: "Jim Dwyer",
-          },
-          {
-            value: "Larry Schweikart",
-            id: "Larry Schweikart",
-          },
-          {
-            value: "R. Lee Ermey",
-            id: "R. Lee Ermey",
-          },
-        ],
-      },
-      {
-        value: "Horror",
-        id: "Horror",
-        items: [
-          {
-            value: "Stephen King",
-            id: "Stephen King",
-          },
-          {
-            value: "Dan Brown",
-            id: "Dan Brown",
-          },
-          {
-            value: "Mary Janice Davidson",
-            id: "Mary Janice Davidson",
-          },
-          {
-            value: "Katie Macalister",
-            id: "Katie Macalister",
-          },
-        ],
-      },
-      {
-        value: "Fiction & Fantasy",
-        id: "Fiction & Fantasy",
-        items: [
-          {
-            value: "Audrey Niffenegger",
-            id: "Audrey Niffenegger",
-          },
-          {
-            value: "Philip Roth",
-            id: "Philip Roth",
-          },
-        ],
-      },
-      {
-        value: "Teens",
-        id: "Teens",
-        items: [
-          {
-            value: "Joss Whedon",
-            id: "Joss Whedon",
-          },
-          {
-            value: "Meg Cabot",
-            id: "Meg Cabot",
-          },
-          {
-            value: "Garth Nix",
-            id: "Garth Nix",
-          },
-          {
-            value: "Ann Brashares",
-            id: "Ann Brashares",
-          },
-        ],
-      },
-    ],
-  },
-];
-
-const messageDataviewData = [
-  {
-    mail: "pmccoy@flowers.com",
-    name: "Philip Mccoy",
-    avatar:
-      "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_02.jpg",
-    status: "online",
-    delivered: "0/3",
-  },
-  {
-    mail: "clores@flowers.com",
-    name: "Calvin Flores",
-    avatar:
-      "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_04.jpg",
-    status: "online",
-    delivered: "0/3",
-  },
-  {
-    mail: "dwight@flowers.com",
-    name: "Dwight Jones",
-    avatar:
-      "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_05.jpg",
-    status: "offline",
-    delivered: "0/3",
-  },
-  {
-    mail: "flores@flowers.com",
-    name: "Esther Flores",
-    avatar:
-      "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_11.jpg",
-    status: "offline",
-    delivered: "3/3",
-  },
-  {
-    mail: "gregory@flowers.com",
-    name: "Gregory Bell",
-    avatar:
-      "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_10.jpg",
-    status: "online",
-    delivered: "0/3",
-  },
-  {
-    mail: "guy@flowers.com",
-    name: "Guy Webb",
-    avatar:
-      "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_06.jpg",
-    status: "online",
-    delivered: "2/3",
-  },
-  {
-    mail: "pat@flowers.com",
-    name: "Pat Cooper",
-    avatar:
-      "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_15.jpg",
-    status: "offline",
-    delivered: "1/3",
-  },
-  {
-    name: "Shaeleigh Lopez",
-    mail: "odio@hotmail.com",
-    avatar:
-      "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_01.jpg",
-    status: "online",
-    delivered: "0/3",
-  },
-  {
-    name: "Craig Pope",
-    mail: "fermentum.metus.aenean@icloud.edu",
-    avatar:
-      "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_03.jpg",
-    status: "offline",
-    delivered: "1/3",
-  },
-  {
-    name: "Angela Clements",
-    mail: "nonummy.ut@icloud.net",
-    avatar:
-      "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_07.jpg",
-    status: "offline",
-    delivered: "3/3",
-  },
-  {
-    name: "Howard Villarreal",
-    mail: "libero.donec.consectetuer@icloud.com",
-    avatar:
-      "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_08.jpg",
-    status: "online",
-    delivered: "1/3",
-  },
-  {
-    name: "Prescott Stafford",
-    mail: "nunc.ac.sem@icloud.edu",
-    avatar:
-      "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_09.jpg",
-    status: "offline",
-    delivered: "2/3",
-  },
-];
-
-const country = [
-  {
-    id: "austria",
-    value: "Austria",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/at.png",
-  },
-  {
-    value: "Belarus",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/by.png",
-  },
-  {
-    value: "Belgium",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/be.png",
-  },
-  {
-    value: "Bulgaria",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/bg.png",
-  },
-  {
-    value: "Cyprus",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/cy.png",
-  },
-  {
-    value: "Czech Republic",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/cz.png",
-  },
-  {
-    value: "Denmark",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/dk.png",
-  },
-  {
-    id: "estonia",
-    value: "Estonia",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/ee.png",
-  },
-  {
-    value: "Finland",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/fi.png",
-  },
-  {
-    value: "France",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/fr.png",
-  },
-  {
-    value: "Germany",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/de.png",
-  },
-  {
-    value: "Greece",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/gr.png",
-  },
-  {
-    value: "Hungary",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/hu.png",
-  },
-  {
-    value: "Ireland",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/ie.png",
-  },
-  {
-    value: "Italy",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/it.png",
-  },
-  {
-    value: "Latvia",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/lv.png",
-  },
-  {
-    value: "Lithuania",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/lt.png",
-  },
-  {
-    value: "Luxembourg",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/lu.png",
-  },
-  {
-    value: "Malta",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/mt.png",
-  },
-  {
-    value: "Netherlands",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/nl.png",
-  },
-  {
-    value: "Poland",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/pl.png",
-  },
-  {
-    value: "Portugal",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/pt.png",
-  },
-  {
-    value: "Russia",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/ru.png",
-  },
-  {
-    value: "Romania",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/ro.png",
-  },
-  {
-    value: "Slovakia",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/sk.png",
-  },
-  {
-    value: "Slovenia",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/si.png",
-  },
-  {
-    value: "Spain",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/es.png",
-  },
-  {
-    value: "Sweden",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/se.png",
-  },
-  {
-    value: "United Kingdom",
-    src: "https://snippet.dhtmlx.com/codebase/data/combobox/01/img/gb.png",
-  },
-];
-
-const store = reactive({
-  gridDataset,
-  chartData,
-  hotelsData,
-  ribbonData,
-  ticketsDataviewData,
-  treeData,
-  messageDataviewData,
-  country,
-  sidebarData,
-  toolbarData,
-});
-
-export default store;

From 18fd36b9dd936fbe47e48529bed822e85598b80a Mon Sep 17 00:00:00 2001
From: Serhii Pylypchuk <pylypchukserhii1991@gmail.com>
Date: Sat, 29 Mar 2025 22:55:01 +0400
Subject: [PATCH 2/5] [update] title

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index cbf93ff..242fa64 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
   <!-- Icons -->
   <link href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/7.0.96/css/materialdesignicons.css"
     media="all" rel="stylesheet" type="text/css" />
-  <title>DHTMLX Suite + Vue</title>
+  <title>DHTMLX Suite Vue</title>
 </head>
 
 <body>

From cacaa22596f04e390512cb38f61526d47b2418ac Mon Sep 17 00:00:00 2001
From: Serhii Pylypchuk <pylypchukserhii1991@gmail.com>
Date: Tue, 8 Apr 2025 00:25:01 +0400
Subject: [PATCH 3/5] [dev] refactoring (styles)

---
 .../Content/LeftPanel/LeftContent.vue         |  6 ++--
 .../Content/LeftPanel/SlidersLayout.vue       | 20 +++++------
 .../Content/LeftPanel/TicketsDataview.vue     |  2 +-
 .../Content/RightPanel/ButtonsForm.vue        | 24 ++++++-------
 src/components/Content/RightPanel/Chart.vue   | 11 +++---
 .../Content/RightPanel/Colorpicker.vue        |  3 +-
 src/components/Content/RightPanel/Form.vue    | 34 +++++++++----------
 src/data.js                                   |  9 +----
 8 files changed, 52 insertions(+), 57 deletions(-)

diff --git a/src/components/Content/LeftPanel/LeftContent.vue b/src/components/Content/LeftPanel/LeftContent.vue
index 8db4b0a..1926995 100644
--- a/src/components/Content/LeftPanel/LeftContent.vue
+++ b/src/components/Content/LeftPanel/LeftContent.vue
@@ -1,7 +1,7 @@
 <script>
+import Chart from "./Chart.vue";
 import Calendars from "./Calendars.vue";
 import Grid from "./Grid.vue";
-import Accordion from "./Chart.vue";
 import Ribbon from "./Ribbon.vue";
 import SlidersLayout from "./SlidersLayout.vue";
 import TicketsDataview from "./TicketsDataview.vue";
@@ -9,7 +9,7 @@ import Tree from "./Tree.vue";
 
 export default {
   components: {
-    Accordion,
+    Chart,
     Calendars,
     Grid,
     Ribbon,
@@ -24,7 +24,7 @@ export default {
   <div class="left-content-wrapper">
     <Grid />
     <Calendars />
-    <Accordion />
+    <Chart />
     <div class="block">
       <SlidersLayout />
       <Tree />
diff --git a/src/components/Content/LeftPanel/SlidersLayout.vue b/src/components/Content/LeftPanel/SlidersLayout.vue
index e21b02c..6cf9e40 100644
--- a/src/components/Content/LeftPanel/SlidersLayout.vue
+++ b/src/components/Content/LeftPanel/SlidersLayout.vue
@@ -20,22 +20,22 @@ export default {
             {
               padding: 10,
               height: "content",
-              id: "slider1",
+              id: "slider1"
             },
             {
               padding: 10,
               height: "content",
-              id: "slider2",
+              id: "slider2"
             },
             {
               padding: 10,
               height: "content",
-              id: "slider3",
+              id: "slider3"
             },
             {
               padding: 10,
               height: "content",
-              id: "slider4",
+              id: "slider4"
             }
           ]
         },
@@ -43,7 +43,7 @@ export default {
           padding: "10px 20px",
           height: "260px",
           width: "20%",
-          id: "slider5",
+          id: "slider5"
         }
       ]
     });
@@ -51,7 +51,7 @@ export default {
     this.slider1 = new Slider(null, {
       min: 0,
       max: 40,
-      step: 1,
+      step: 1
     });
 
     this.slider2 = new Slider(null, {
@@ -59,7 +59,7 @@ export default {
       max: 40,
       range: true,
       value: [10, 20],
-      step: 1,
+      step: 1
     });
 
     this.slider3 = new Slider(null, {
@@ -70,7 +70,7 @@ export default {
       value: [0, 20],
       tick: 1,
       majorTick: 5,
-      tickTemplate: this.tickTemplate,
+      tickTemplate: this.tickTemplate
     });
 
     this.slider4 = new Slider(null, {
@@ -78,7 +78,7 @@ export default {
       max: 40,
       step: 10,
       range: true,
-      value: [0, 20],
+      value: [0, 20]
     });
 
     this.slider5 = new Slider(null, {
@@ -90,7 +90,7 @@ export default {
       tick: 1,
       majorTick: 5,
       value: [0, 20],
-      tickTemplate: this.tickTemplate,
+      tickTemplate: this.tickTemplate
     });
 
     // Attached all sliders in layout, which is main layout's cell
diff --git a/src/components/Content/LeftPanel/TicketsDataview.vue b/src/components/Content/LeftPanel/TicketsDataview.vue
index 0856fea..bd37b3b 100644
--- a/src/components/Content/LeftPanel/TicketsDataview.vue
+++ b/src/components/Content/LeftPanel/TicketsDataview.vue
@@ -59,4 +59,4 @@ export default {
 .tickets-container {
   background: var(--dhx-background-primary);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Content/RightPanel/ButtonsForm.vue b/src/components/Content/RightPanel/ButtonsForm.vue
index 8de6cb0..789e711 100644
--- a/src/components/Content/RightPanel/ButtonsForm.vue
+++ b/src/components/Content/RightPanel/ButtonsForm.vue
@@ -19,7 +19,7 @@ export default {
               color: "primary",
               icon: "dxi dxi-plus",
               full: true,
-              size: "small",
+              size: "small"
             },
             {
               padding: 5,
@@ -29,7 +29,7 @@ export default {
               color: "primary",
               full: true,
               view: "link",
-              size: "small",
+              size: "small"
             },
             {
               padding: 5,
@@ -39,7 +39,7 @@ export default {
               color: "primary",
               full: true,
               disabled: true,
-              size: "small",
+              size: "small"
             }
           ]
         },
@@ -54,7 +54,7 @@ export default {
               color: "secondary",
               icon: "dxi dxi-plus",
               full: true,
-              size: "small",
+              size: "small"
             },
             {
               padding: 5,
@@ -64,7 +64,7 @@ export default {
               color: "secondary",
               full: true,
               size: "small",
-              view: "link",
+              view: "link"
             },
             {
               padding: 5,
@@ -74,7 +74,7 @@ export default {
               color: "secondary",
               full: true,
               size: "small",
-              disabled: true,
+              disabled: true
             }
           ]
         },
@@ -89,7 +89,7 @@ export default {
               color: "danger",
               icon: "dxi dxi-plus",
               full: true,
-              size: "small",
+              size: "small"
             },
             {
               padding: 5,
@@ -99,7 +99,7 @@ export default {
               color: "danger",
               full: true,
               size: "small",
-              view: "link",
+              view: "link"
             },
             {
               padding: 5,
@@ -109,7 +109,7 @@ export default {
               color: "danger",
               full: true,
               size: "small",
-              disabled: true,
+              disabled: true
             }
           ]
         },
@@ -124,7 +124,7 @@ export default {
               color: "success",
               icon: "dxi dxi-plus",
               full: true,
-              size: "small",
+              size: "small"
             },
             {
               padding: 5,
@@ -134,7 +134,7 @@ export default {
               color: "success",
               full: true,
               size: "small",
-              view: "link",
+              view: "link"
             },
             {
               padding: 5,
@@ -144,7 +144,7 @@ export default {
               color: "success",
               full: true,
               size: "small",
-              disabled: true,
+              disabled: true
             }
           ]
         }
diff --git a/src/components/Content/RightPanel/Chart.vue b/src/components/Content/RightPanel/Chart.vue
index d1b6770..6a9b1bd 100644
--- a/src/components/Content/RightPanel/Chart.vue
+++ b/src/components/Content/RightPanel/Chart.vue
@@ -7,6 +7,7 @@ export default {
     const { chartData } = getData();
     return { chartData };
   },
+
   mounted() {
     this.chart = new Chart(this.$refs.chart_container, {
       data: this.chartData,
@@ -19,20 +20,20 @@ export default {
           opacity: "opacity",
           text: "month",
           stroke: "var(--dhx-background-primary)",
-          strokeWidth: 0,
-        },
+          strokeWidth: 0
+        }
       ],
       legend: {
         values: {
           id: "value",
           text: "id",
-          color: "color",
+          color: "color"
         },
         // monochrome: "#0288D1",
         align: "right",
         valign: "middle",
-        width: 30,
-      },
+        width: 30
+      }
     });
   },
 
diff --git a/src/components/Content/RightPanel/Colorpicker.vue b/src/components/Content/RightPanel/Colorpicker.vue
index 7780b7c..1f51906 100644
--- a/src/components/Content/RightPanel/Colorpicker.vue
+++ b/src/components/Content/RightPanel/Colorpicker.vue
@@ -44,10 +44,11 @@ export default {
       return {
         h,
         s,
-        l,
+        l
       };
     }
   },
+  
   mounted() {
     this.colorpicker = new Colorpicker(this.$refs.colorpicker_container, { mode: "picker" });
     this.colorpicker.setValue("#0288d1");
diff --git a/src/components/Content/RightPanel/Form.vue b/src/components/Content/RightPanel/Form.vue
index d4817ba..fa10a01 100644
--- a/src/components/Content/RightPanel/Form.vue
+++ b/src/components/Content/RightPanel/Form.vue
@@ -21,10 +21,10 @@ export default {
               type: "input",
               label: "Name",
               placeholder: "Type text",
-              required: true,
+              required: true
             },
             {
-              type: "spacer",
+              type: "spacer"
             },
             {
               width: "48%",
@@ -32,7 +32,7 @@ export default {
               type: "input",
               label: "Surname",
               placeholder: "Type text",
-              required: true,
+              required: true
             }
           ]
         },
@@ -43,27 +43,27 @@ export default {
           placeholder: "Click to select",
           multiselection: true,
           value: ["austria", "estonia"],
-          data: this.country,
+          data: this.country
         },
         {
           name: "birth",
           type: "datepicker",
           label: "Date of Birth",
           placeholder: "Type text",
-          value: new Date(),
+          value: new Date()
         },
         {
           name: "career",
           type: "input",
           label: "Career objective",
           placeholder: "Type text",
-          helpMessage: " Help information",
+          helpMessage: " Help information"
         },
         {
           name: "motivation",
           type: "textarea",
           label: "Motivation",
-          placeholder: "Type text here",
+          placeholder: "Type text here"
         },
         {
           name: "language",
@@ -75,17 +75,17 @@ export default {
               {
                 type: "radioButton",
                 text: "Elementary",
-                value: "1",
+                value: "1"
               },
               {
                 type: "radioButton",
                 text: "Intermediate",
-                value: "2",
+                value: "2"
               },
               {
                 type: "radioButton",
                 text: "Advanced",
-                value: "2",
+                value: "2"
               }
             ]
           }
@@ -94,7 +94,7 @@ export default {
           name: "backgroundColor",
           type: "colorpicker",
           label: "Background color",
-          placeholder: "Click to change",
+          placeholder: "Click to change"
         },
         {
           name: "offices",
@@ -102,12 +102,12 @@ export default {
           label: "Offices",
           placeholder: "You can select several offices",
           multiselection: true,
-          data: this.country,
+          data: this.country
         },
         {
           name: "attachDocument",
           type: "simpleVault",
-          label: "Attach document",
+          label: "Attach document"
         },
         {
           name: "howToContact",
@@ -119,22 +119,22 @@ export default {
                 id: "1",
                 type: "checkbox",
                 text: "Phone",
-                checked: true,
+                checked: true
               },
               {
                 id: "2",
                 type: "checkbox",
-                text: "Mail",
+                text: "Mail"
               },
               {
                 id: "3",
                 type: "checkbox",
-                text: "Messenger",
+                text: "Messenger"
               },
               {
                 id: "4",
                 type: "checkbox",
-                text: "Your option",
+                text: "Your option"
               }
             ]
           }
diff --git a/src/data.js b/src/data.js
index efcbd65..4a7f300 100644
--- a/src/data.js
+++ b/src/data.js
@@ -160,7 +160,6 @@ export function getData() {
     },
   ];
 
-  // Data for grid
   const gridData = [
     {
       time: new Date("Jan 28, 2021"),
@@ -866,7 +865,6 @@ export function getData() {
 
   gridData.forEach((item) => (item.totalCost = item.nights * item.price));
 
-  // Data for chart
   const chartData = [
     {
       id: "Jan",
@@ -898,7 +896,6 @@ export function getData() {
     },
   ];
 
-  // Hotels chart data
   const hotelsData = [
     { month: "Jan.", "Won deals": 35, "Lost deals": 14, "All deals": 40 },
     { month: "Feb.", "Won deals": 80, "Lost deals": 59, "All deals": 94 },
@@ -909,7 +906,6 @@ export function getData() {
     { month: "Jul.", "Won deals": 85, "Lost deals": 78, "All deals": 98 },
   ];
 
-  // Series chart data
   const seriesData = [
     {
       id: 'A',
@@ -937,7 +933,6 @@ export function getData() {
     }
   ];
 
-  // Ribbon data
   const ribbonData = [
     {
       id: "fileBlock",
@@ -1032,7 +1027,6 @@ export function getData() {
     },
   ];
 
-  // Tickets Dataview Data
   const ticketsDataviewData = [
     {
       title: "Ticket for Technical Support #T742",
@@ -1096,7 +1090,6 @@ export function getData() {
     },
   ];
 
-  // Data for tree
   const treeData = [
     {
       value: "Books",
@@ -1454,4 +1447,4 @@ export function getData() {
     sidebarData,
     toolbarData
   };
-}
\ No newline at end of file
+}

From 5b88960ea698ad0b3ae85dd857f701e81e22cde5 Mon Sep 17 00:00:00 2001
From: Sergey Blinov <sematik.mail@gmail.com>
Date: Fri, 11 Apr 2025 16:19:57 +0300
Subject: [PATCH 4/5] styles refactoring

---
 src/App.vue                                   | 16 +--
 src/components/Content/Content.vue            | 14 ---
 .../Content/LeftPanel/Calendars.vue           | 10 --
 src/components/Content/LeftPanel/Grid.vue     | 15 +--
 .../Content/LeftPanel/LeftContent.vue         | 20 +---
 src/components/Content/LeftPanel/Ribbon.vue   |  7 --
 .../Content/LeftPanel/SlidersLayout.vue       |  2 +-
 .../Content/LeftPanel/TicketsDataview.vue     |  6 --
 src/components/Content/LeftPanel/Tree.vue     |  2 +-
 .../Content/RightPanel/Colorpicker.vue        |  7 --
 .../Content/RightPanel/MessageDataview.vue    |  6 --
 .../Content/RightPanel/RightContent.vue       | 12 ---
 .../MainContainer/MainContainer.vue           | 11 +--
 src/style.css                                 | 97 ++++++++++++++++++-
 14 files changed, 98 insertions(+), 127 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 7a964e5..a57ddf3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,22 +12,8 @@
 </script>
 
 <template>
-  <main>
+  <main class="app_main">
     <Sidebar />
     <MainContainer />
   </main>
 </template>
-
-<style scoped>
-  main {
-    height: 100%;
-    width: 100%;
-    display: flex;
-  }
-</style>
-
-<style>
-  .bordered {
-    border: var(--dhx-border);
-  }
-</style>
diff --git a/src/components/Content/Content.vue b/src/components/Content/Content.vue
index 2dbbc67..cf96b2d 100644
--- a/src/components/Content/Content.vue
+++ b/src/components/Content/Content.vue
@@ -16,17 +16,3 @@ export default {
   }
 };
 </script>
-  
-<style scoped>
-.wrapper-content {
-  display: flex;
-  flex-grow: 1;
-  overflow: auto;
-  padding: 12px;
-  gap: 12px;
-}
-
-.container {
-  border: var(--dhx-border);
-}
-</style>
diff --git a/src/components/Content/LeftPanel/Calendars.vue b/src/components/Content/LeftPanel/Calendars.vue
index 98cf41a..3bf416c 100644
--- a/src/components/Content/LeftPanel/Calendars.vue
+++ b/src/components/Content/LeftPanel/Calendars.vue
@@ -37,13 +37,3 @@ export default {
     <div ref="year_container" class="container dhx_layout_calendar_cell"></div>
   </div>
 </template>
-
-<style scoped>
-.calendars-wrapper {
-  display: flex;
-  height: fit-content;
-  flex-direction: row;
-  gap: 12px;
-  justify-content: space-between;
-}
-</style>
diff --git a/src/components/Content/LeftPanel/Grid.vue b/src/components/Content/LeftPanel/Grid.vue
index d0875cf..d090d2e 100644
--- a/src/components/Content/LeftPanel/Grid.vue
+++ b/src/components/Content/LeftPanel/Grid.vue
@@ -69,21 +69,8 @@ export default {
 </script>
 
 <template>
-  <div class="container">
+  <div class="grid-block">
     <div ref="grid_container" class="grid_container"></div>
     <div ref="pagination_container"></div>
   </div>
 </template>
-
-<style scoped>
-.container {
-  display: flex;
-  flex-direction: column;
-  border: var(--dhx-border);
-}
-
-.grid_container {
-  min-height: 848px;
-  width: 798px;
-}
-</style>
diff --git a/src/components/Content/LeftPanel/LeftContent.vue b/src/components/Content/LeftPanel/LeftContent.vue
index 1926995..25140ce 100644
--- a/src/components/Content/LeftPanel/LeftContent.vue
+++ b/src/components/Content/LeftPanel/LeftContent.vue
@@ -25,7 +25,7 @@ export default {
     <Grid />
     <Calendars />
     <Chart />
-    <div class="block">
+    <div class="left-content-block">
       <SlidersLayout />
       <Tree />
     </div>
@@ -33,21 +33,3 @@ export default {
     <TicketsDataview />
   </div>
 </template>
-  
-<style scoped>
-.left-content-wrapper {
-  display: flex;
-  height: 100%;
-  flex-grow: 1;
-  gap: 12px;
-  max-width: 800px;
-  flex-direction: column;
-}
-
-.block {
-  display: flex;
-  gap: 12px;
-  width: 100%;
-  justify-content: space-between;
-}
-</style>
diff --git a/src/components/Content/LeftPanel/Ribbon.vue b/src/components/Content/LeftPanel/Ribbon.vue
index 0246c59..acd1bbe 100644
--- a/src/components/Content/LeftPanel/Ribbon.vue
+++ b/src/components/Content/LeftPanel/Ribbon.vue
@@ -24,10 +24,3 @@ export default {
 <template>
   <div ref="ribbon_container" class="container ribbon-container"></div>
 </template>
-
-<style>
-.ribbon-container {
-  padding: 50px;
-  background: var(--dhx-background-primary);
-}
-</style>
diff --git a/src/components/Content/LeftPanel/SlidersLayout.vue b/src/components/Content/LeftPanel/SlidersLayout.vue
index 6cf9e40..a6db7b6 100644
--- a/src/components/Content/LeftPanel/SlidersLayout.vue
+++ b/src/components/Content/LeftPanel/SlidersLayout.vue
@@ -108,5 +108,5 @@ export default {
 </script>
 
 <template>
-  <div ref="layout_container" class="container" style="flex-grow: 2"></div>
+  <div ref="layout_container" class="container sliders-wrapper"></div>
 </template>
diff --git a/src/components/Content/LeftPanel/TicketsDataview.vue b/src/components/Content/LeftPanel/TicketsDataview.vue
index bd37b3b..dd42aa7 100644
--- a/src/components/Content/LeftPanel/TicketsDataview.vue
+++ b/src/components/Content/LeftPanel/TicketsDataview.vue
@@ -54,9 +54,3 @@ export default {
 <template>
   <div ref="dataview_container" class="tickets-container"></div>
 </template>
-
-<style>
-.tickets-container {
-  background: var(--dhx-background-primary);
-}
-</style>
diff --git a/src/components/Content/LeftPanel/Tree.vue b/src/components/Content/LeftPanel/Tree.vue
index 181ea02..0ccb912 100644
--- a/src/components/Content/LeftPanel/Tree.vue
+++ b/src/components/Content/LeftPanel/Tree.vue
@@ -25,5 +25,5 @@ export default {
 </script>
 
 <template>
-  <div ref="tree_container" class="container" style="flex-grow: 1"></div>
+  <div ref="tree_container" class="container tree-container"></div>
 </template>
diff --git a/src/components/Content/RightPanel/Colorpicker.vue b/src/components/Content/RightPanel/Colorpicker.vue
index 1f51906..d6f165a 100644
--- a/src/components/Content/RightPanel/Colorpicker.vue
+++ b/src/components/Content/RightPanel/Colorpicker.vue
@@ -74,10 +74,3 @@ export default {
     class="container colorpicker-container dhx_layout_colorpicker_cell"
   ></div>
 </template>
-
-<style>
-.colorpicker-container {
-  display: flex;
-  justify-content: center;
-}
-</style>
diff --git a/src/components/Content/RightPanel/MessageDataview.vue b/src/components/Content/RightPanel/MessageDataview.vue
index a8845cd..e993ee2 100644
--- a/src/components/Content/RightPanel/MessageDataview.vue
+++ b/src/components/Content/RightPanel/MessageDataview.vue
@@ -43,9 +43,3 @@ export default {
 <template>
   <div ref="dataview_container"></div>
 </template>
-
-<style>
-.container {
-  flex-grow: 1;
-}
-</style>
diff --git a/src/components/Content/RightPanel/RightContent.vue b/src/components/Content/RightPanel/RightContent.vue
index 31f4136..afc41ca 100644
--- a/src/components/Content/RightPanel/RightContent.vue
+++ b/src/components/Content/RightPanel/RightContent.vue
@@ -25,15 +25,3 @@ export default {
     <MessageDataview />
   </div>
 </template>
-
-<style>
-.right-content-wrapper {
-  display: flex;
-  height: 100%;
-  width: fit-content;
-  gap: 12px;
-  flex: 1;
-  min-width: 500px;
-  flex-direction: column;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/MainContainer/MainContainer.vue b/src/components/MainContainer/MainContainer.vue
index 62f1163..8a0d333 100644
--- a/src/components/MainContainer/MainContainer.vue
+++ b/src/components/MainContainer/MainContainer.vue
@@ -13,18 +13,9 @@ export default {
 </script>
 
 <template>
-  <div class="container">
+  <div class="main-container">
     <Toolbar />
     <Tabbar />
     <Content />
   </div>
 </template>
-  
-<style scoped>
-  .container {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    overflow: hidden;
-  }
-</style>
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index 9c6e44a..9acb916 100644
--- a/src/style.css
+++ b/src/style.css
@@ -8,7 +8,6 @@ body {
   width: 100vw;
   margin: 0;
   padding: 0;
-
 }
 
 :root {
@@ -17,7 +16,6 @@ body {
   font-weight: 400;
   display: flex;
 
-
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -38,6 +36,97 @@ body {
   width: 100%;
 }
 
+.app_main {
+  height: 100%;
+  width: 100%;
+  display: flex;
+}
+
+.main-container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: hidden;
+}
+
+.wrapper-content {
+  display: flex;
+  flex-grow: 1;
+  overflow: auto;
+  padding: 12px;
+  gap: 12px;
+}
+
+.left-content-wrapper {
+  display: flex;
+  height: 100%;
+  flex-grow: 1;
+  gap: 12px;
+  max-width: 800px;
+  flex-direction: column;
+}
+
+.left-content-block {
+  display: flex;
+  gap: 12px;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.grid-block {
+  display: flex;
+  flex-direction: column;
+  border: var(--dhx-border);
+}
+
+.grid_container {
+  min-height: 848px;
+  width: 798px;
+}
+
+.calendars-wrapper {
+  display: flex;
+  height: fit-content;
+  flex-direction: row;
+  gap: 12px;
+  justify-content: space-between;
+}
+
+.tickets-container {
+  background: var(--dhx-background-primary);
+}
+
+.sliders-wrapper {
+  flex-grow: 2;
+}
+
+.tree-container {
+  flex-grow: 1
+}
+
+.ribbon-container {
+  padding: 50px;
+  background: var(--dhx-background-primary);
+}
+
+.right-content-wrapper {
+  display: flex;
+  height: 100%;
+  width: fit-content;
+  gap: 12px;
+  flex: 1;
+  min-width: 500px;
+  flex-direction: column;
+}
+
+.container {
+  border: var(--dhx-border);
+}
+
+.colorpicker-container {
+  display: flex;
+  justify-content: center;
+}
 
 /* Grid styling */
 .contact_email {
@@ -48,7 +137,6 @@ body {
   border: none;
 }
 
-
 /* Tickets dataview styling */
 .dhx_dataview_template_a {
   display: -webkit-box;
@@ -189,7 +277,6 @@ body {
   margin-left: 6px;
 }
 
-
 /* Message dataview styling */
 .dhx_dataview_template_b_box {
   background-color: var(--dhx-background-secondary) !important;
@@ -376,4 +463,4 @@ body {
 .dhx-container,
 .dhx-container__widget {
   height: 100%;
-}
\ No newline at end of file
+}

From c127cb8adc48be9093ca211afa6f2b5ddc7d0a2f Mon Sep 17 00:00:00 2001
From: Serhii Pylypchuk <pylypchukserhii1991@gmail.com>
Date: Mon, 12 May 2025 22:55:35 +0400
Subject: [PATCH 5/5] [update] styles

---
 .../Content/LeftPanel/SlidersLayout.vue       |  2 +-
 src/components/Content/LeftPanel/Tree.vue     |  2 +-
 src/components/MainContainer/Tabbar.vue       |  2 +-
 src/style.css                                 | 20 +++++++++++++++++++
 4 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/Content/LeftPanel/SlidersLayout.vue b/src/components/Content/LeftPanel/SlidersLayout.vue
index a6db7b6..2bcc159 100644
--- a/src/components/Content/LeftPanel/SlidersLayout.vue
+++ b/src/components/Content/LeftPanel/SlidersLayout.vue
@@ -108,5 +108,5 @@ export default {
 </script>
 
 <template>
-  <div ref="layout_container" class="container sliders-wrapper"></div>
+  <div ref="layout_container" class="sliders_widget"></div>
 </template>
diff --git a/src/components/Content/LeftPanel/Tree.vue b/src/components/Content/LeftPanel/Tree.vue
index 0ccb912..706e6d1 100644
--- a/src/components/Content/LeftPanel/Tree.vue
+++ b/src/components/Content/LeftPanel/Tree.vue
@@ -25,5 +25,5 @@ export default {
 </script>
 
 <template>
-  <div ref="tree_container" class="container tree-container"></div>
+  <div ref="tree_container" class="tree_widget"></div>
 </template>
diff --git a/src/components/MainContainer/Tabbar.vue b/src/components/MainContainer/Tabbar.vue
index ad4779b..241db03 100644
--- a/src/components/MainContainer/Tabbar.vue
+++ b/src/components/MainContainer/Tabbar.vue
@@ -23,5 +23,5 @@ export default {
 </script>
 
 <template>
-  <div ref="tabbar_container"></div>
+  <div ref="tabbar_container" class="tabbar_widget"></div>
 </template>
diff --git a/src/style.css b/src/style.css
index 9acb916..563f389 100644
--- a/src/style.css
+++ b/src/style.css
@@ -464,3 +464,23 @@ body {
 .dhx-container__widget {
   height: 100%;
 }
+
+.tabbar_widget {
+  border-top: 1px solid rgb(226, 225, 225);
+}
+
+.tree_widget {
+  padding: 10px;
+  background: white;
+  width: 50%;
+  flex-grow: 1;
+  border: var(--dhx-border);
+}
+
+.sliders_widget {
+  padding: 10px;
+  background: white;
+  width: 50%;
+  flex-grow: 1;
+  border: var(--dhx-border);
+}