From 64d37b5df3432190aee72f92f73f625588177481 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Fri, 21 Mar 2025 12:19:12 +0400 Subject: [PATCH 1/4] [dev] refactoring --- src/App.css | 390 +++++++++++++++++++++ src/App.jsx | 5 +- src/Content/LeftPanel/Accardion.jsx | 2 +- src/Content/LeftPanel/Grid.jsx | 2 +- src/Content/LeftPanel/Ribbon.jsx | 2 +- src/Content/LeftPanel/TicketsDataview.jsx | 2 +- src/Content/LeftPanel/Tree.jsx | 2 +- src/Content/RightPanel/Chart.jsx | 2 +- src/Content/RightPanel/MessageDataview.jsx | 4 +- src/{ => MainContainer}/MainContainer.jsx | 2 +- src/{ => MainContainer}/Tabbar.jsx | 8 +- src/{ => MainContainer}/Toolbar.jsx | 2 +- src/{ => Sidebar}/Sidebar.jsx | 8 +- src/{store.js => data.js} | 4 +- src/index.css | 389 -------------------- src/main.jsx | 2 +- 16 files changed, 413 insertions(+), 413 deletions(-) rename src/{ => MainContainer}/MainContainer.jsx (85%) rename src/{ => MainContainer}/Tabbar.jsx (79%) rename src/{ => MainContainer}/Toolbar.jsx (97%) rename src/{ => Sidebar}/Sidebar.jsx (79%) rename src/{store.js => data.js} (99%) delete mode 100644 src/index.css diff --git a/src/App.css b/src/App.css index e69de29..f2f31ab 100644 --- a/src/App.css +++ b/src/App.css @@ -0,0 +1,390 @@ +* { + box-sizing: border-box; + } + + main { + height: 100%; + width: 100%; + display: flex; + } + + :root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + width: 100%; + height: 100%; + + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + body { + margin: 0; + place-items: center; + height: 100vh; + width: 100vw; + } + + #app { + text-align: center; + height: 100%; + width: 100%; + } + + .container { + display: flex; + flex-grow: 1; + overflow: hidden; + } + + .flex-cols { + display: flex; + flex-direction: column; + } + + .grow { + flex-grow: 1; + } + + /* Grid styling */ + .contact_email { + color: var(--dhx-color-primary); + } + + .grid .dhx_grid-content { + border: none; + } + + /* Tickets dataview styling */ + .dhx_dataview_template_a { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + height: 100%; + } + + .dhx_dataview_template_a_box { + background-color: var(--dhx-background-secondary) !important; + } + + .dhx_dataview_template_a_box .dhx_dataview-item__inner-html { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + height: 100%; + } + + .dhx_dataview_template_a_box .dhx_dataview-item { + padding: 20px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + background-color: var(--dhx-background-primary); + border: var(--dhx-border) !important; + margin-bottom: 8px !important; + margin-left: 8px !important; + } + + .dhx_dataview_template_a_box .dhx_dataview-item:first-child { + margin-left: 0 !important; + } + + .dhx_dataview_template_a__head { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + } + + .dhx_dataview_template_a__type { + color: var(--dhx-font-color-contrast); + text-align: center; + text-transform: capitalize; + width: 55px; + height: 20px; + border-radius: 2px; + } + + .dhx_dataview_template_a__type--major { + background-color: var(--dhx-color-danger); + } + + .dhx_dataview_template_a__type--minor { + background-color: var(--dhx-color-success); + } + + .dhx_dataview_template_a__type--normal { + background-color: var(--dhx-color-primary); + } + + .dhx_dataview_template_a__content { + padding-left: 16px; + width: 80%; + } + + .dhx_dataview_template_a__title { + font: var(--dhx-font-family); + font-weight: var(--dhx-font-weight-medium); + padding-bottom: 8px; + } + + .dhx_dataview_template_a__comment { + display: -webkit-box; + max-height: 40px; + text-overflow: ellipsis; + overflow: hidden; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + } + + .dhx_dataview_template_a__body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + margin-top: 20px; + } + + .dhx_dataview_template_a__person { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + } + + .dhx_dataview_template_a__avatar { + width: 40px; + height: 40px; + margin-left: 15px; + margin-right: 16px; + border-radius: 20px; + background: center center/cover no-repeat #f7f7f7; + } + + .dhx_dataview_template_a__name { + color: var(--dhx-font-color-secondary); + } + + .dhx_dataview_template_a__comments { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; + line-height: 20px; + } + + .dhx_dataview_template_a__comments .mdi:before { + position: relative; + top: 4px; + color: var(--dhx-font-color-secondary); + font-size: 20px; + margin-left: 6px; + } + + + /* Message dataview styling */ + .dhx_dataview_template_b_box { + background-color: var(--dhx-background-secondary) !important; + } + + .dhx_dataview_template_b_box .dhx_dataview-item { + padding: 0; + border: var(--dhx-border) !important; + border-radius: 6px; + overflow: hidden; + background-color: var(--dhx-background-primary); + margin-bottom: 8px !important; + margin-left: 8px !important; + } + + .dhx_dataview_template_b_box .dhx_dataview-item:first-child { + margin-left: 0 !important; + } + + .dhx_dataview_template_b { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 100%; + height: 200px; + } + + .dhx_dataview_template_b__avatar { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin-top: 16px; + width: 80px; + height: 80px; + border-radius: 50%; + background-size: 80px 80px; + } + + .dhx_dataview_template_b__status { + position: absolute; + bottom: 1px; + right: 9px; + width: 12px; + height: 12px; + border-radius: 50%; + border: 1px solid var(--dhx-color-white); + background-color: var(--dhx-color-success); + } + + .dhx_dataview_template_b__status.dhx_dataview_template_b__status--offline { + display: none; + } + + .dhx_dataview_template_b__title, + .dhx_dataview_template_b__name, + .dhx_dataview_template_b__message-label { + font: var(--dhx-font-family); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .dhx_dataview_template_b__title { + font-weight: var(--dhx-font-weight-medium); + margin-top: 8px; + } + + .dhx_dataview_template_b__message { + border-top: 1px solid var(--dhx-border-color); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + height: 44px; + width: 100%; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + text-decoration: none; + position: absolute; + left: 0; + bottom: 0; + } + + .dhx_dataview_template_b__message-icon { + margin-right: 4px; + font-size: 16px; + color: var(--dhx-color-primary); + } + + .dhx_dataview_template_b__message-label { + color: var(--dhx-color-primary); + font-weight: 500; + } + + /* Layout cell styling */ + .dhx_layout_cell--overflow-auto { + overflow: auto; + } + + .dhx_layout_cell--border-none { + border: none !important; + } + + .dhx_layout_cell-align_content--center { + display: flex; + align-items: center; + justify-content: center; + } + + /* Colorpicker cell styling */ + .dhx_layout_colorpicker_cell { + display: flex; + justify-content: center; + padding: 40px 0; + background-color: var(--dhx-background-primary); + } + + /* Calendar/Timepicker cell styling */ + .dhx_layout_calendar_cell { + display: flex; + justify-content: center; + align-items: center; + min-width: 248px; + } + + /* Sidebar custom elements styling */ + .dhx_navbar--vertical { + overflow: hidden; + } + + .user-info_container { + padding-top: 8px; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + } + + .user-info_avatar { + height: 40px; + width: 40px; + border-radius: 100%; + } + + .user-info_title { + font-family: Roboto; + font-style: normal; + font-weight: 500; + font-size: 16px; + line-height: 24px; + margin-top: 8px; + } + + .user-info_contact { + font-family: Roboto; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 20px; + margin-bottom: 28px; + } + + .dhx_sidebar--minimized .user-info_avatar { + height: 30px; + width: 30px; + } + + .dhx_sidebar--minimized .user-info_title, + .dhx_sidebar--minimized .user-info_contact { + visibility: hidden; + } + + .dhx-container, + .dhx-container__widget { + height: 100%; + } + \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index f63b7f4..7cf6988 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,7 +1,6 @@ -import MainContainer from "./MainContainer"; -import Sidebar from "./Sidebar"; +import MainContainer from "./MainContainer/MainContainer"; +import Sidebar from "./Sidebar/Sidebar"; import "@dhx/trial-suite/codebase/suite.min.css"; -import "./App.css"; const App = () => { return ( diff --git a/src/Content/LeftPanel/Accardion.jsx b/src/Content/LeftPanel/Accardion.jsx index 6a82e29..c5bbb1d 100644 --- a/src/Content/LeftPanel/Accardion.jsx +++ b/src/Content/LeftPanel/Accardion.jsx @@ -1,6 +1,6 @@ import { useEffect, useRef, useState } from "react"; import { Chart, Layout } from "@dhx/trial-suite"; -import store from "../../store"; +import store from "../../data"; export default function AccordionComponent() { const node = useRef(null); diff --git a/src/Content/LeftPanel/Grid.jsx b/src/Content/LeftPanel/Grid.jsx index bc6336c..fed2b25 100644 --- a/src/Content/LeftPanel/Grid.jsx +++ b/src/Content/LeftPanel/Grid.jsx @@ -1,6 +1,6 @@ import { useEffect, useRef, useState } from "react"; import { Grid, Pagination } from "@dhx/trial-suite"; -import store from "../../store"; +import store from "../../data"; export default function GridComponent() { let [grid, setGrid] = useState(null); diff --git a/src/Content/LeftPanel/Ribbon.jsx b/src/Content/LeftPanel/Ribbon.jsx index a4fc22d..dc9fe01 100644 --- a/src/Content/LeftPanel/Ribbon.jsx +++ b/src/Content/LeftPanel/Ribbon.jsx @@ -1,6 +1,6 @@ import { useEffect, useRef, useState } from "react"; import { Ribbon } from "@dhx/trial-suite"; -import store from "../../store"; +import store from "../../data"; export default function RibbonComponent() { const node = useRef(null); diff --git a/src/Content/LeftPanel/TicketsDataview.jsx b/src/Content/LeftPanel/TicketsDataview.jsx index a0e2860..4881ab0 100644 --- a/src/Content/LeftPanel/TicketsDataview.jsx +++ b/src/Content/LeftPanel/TicketsDataview.jsx @@ -1,7 +1,7 @@ import { useEffect, useRef, useState } from "react"; import { DataView } from "@dhx/trial-suite"; import "@dhx/trial-suite/codebase/suite.min.css"; -import store from "../../store"; +import store from "../../data"; export default function TicketsDataview() { const node = useRef(null); diff --git a/src/Content/LeftPanel/Tree.jsx b/src/Content/LeftPanel/Tree.jsx index f318217..c52f48a 100644 --- a/src/Content/LeftPanel/Tree.jsx +++ b/src/Content/LeftPanel/Tree.jsx @@ -1,6 +1,6 @@ import { useEffect, useRef, useState } from "react"; import { Tree } from "@dhx/trial-suite"; -import store from "../../store"; +import store from "../../data"; export default function TreeComponent() { const node = useRef(null); diff --git a/src/Content/RightPanel/Chart.jsx b/src/Content/RightPanel/Chart.jsx index abecbd9..6114426 100644 --- a/src/Content/RightPanel/Chart.jsx +++ b/src/Content/RightPanel/Chart.jsx @@ -1,6 +1,6 @@ import { useEffect, useRef, useState } from "react"; import { Chart } from "@dhx/trial-suite"; -import store from "../../store"; +import store from "../../data"; export default function ChartComponent() { const node = useRef(null); diff --git a/src/Content/RightPanel/MessageDataview.jsx b/src/Content/RightPanel/MessageDataview.jsx index d0e347d..1bb26ad 100644 --- a/src/Content/RightPanel/MessageDataview.jsx +++ b/src/Content/RightPanel/MessageDataview.jsx @@ -1,6 +1,6 @@ import { useEffect, useRef } from "react"; import { DataView } from "@dhx/trial-suite"; -import store from "../../store"; +import store from "../../data"; export default function MessageDataview() { const node = useRef(null); @@ -34,5 +34,5 @@ export default function MessageDataview() { return () => dataview.destructor(); }, []); - return
; + return
; } diff --git a/src/MainContainer.jsx b/src/MainContainer/MainContainer.jsx similarity index 85% rename from src/MainContainer.jsx rename to src/MainContainer/MainContainer.jsx index 5389555..96e08b7 100644 --- a/src/MainContainer.jsx +++ b/src/MainContainer/MainContainer.jsx @@ -1,4 +1,4 @@ -import Content from "./Content/Content"; +import Content from "../Content/Content"; import Tabbar from "./Tabbar"; import Toolbar from "./Toolbar"; diff --git a/src/Tabbar.jsx b/src/MainContainer/Tabbar.jsx similarity index 79% rename from src/Tabbar.jsx rename to src/MainContainer/Tabbar.jsx index 86479a8..17c3fae 100644 --- a/src/Tabbar.jsx +++ b/src/MainContainer/Tabbar.jsx @@ -5,7 +5,7 @@ const TabbarComponent = () => { const node = useRef(null); useEffect(() => { - const newTabbar = new Tabbar(node.current, { + const tabbar = new Tabbar(node.current, { tabAlign: "center", disabled: ["reports", "tickets", "users", "applications"], views: [ @@ -13,12 +13,12 @@ const TabbarComponent = () => { { id: "reports", tab: "Reports" }, { id: "tickets", tab: "Tickets" }, { id: "users", tab: "Users" }, - { id: "applications", tab: "Applications" }, - ], + { id: "applications", tab: "Applications" } + ] }); return () => { - newTabbar.destructor(); + tabbar.destructor(); }; }, []); diff --git a/src/Toolbar.jsx b/src/MainContainer/Toolbar.jsx similarity index 97% rename from src/Toolbar.jsx rename to src/MainContainer/Toolbar.jsx index a40b81b..30c4946 100644 --- a/src/Toolbar.jsx +++ b/src/MainContainer/Toolbar.jsx @@ -1,6 +1,6 @@ import { useRef, useEffect, useState } from "react"; import { Toolbar, setTheme } from "@dhx/trial-suite"; -import store from "./store"; +import store from "../data"; const ToolbarComponent = () => { let [theme, setThemeState] = useState("light"); diff --git a/src/Sidebar.jsx b/src/Sidebar/Sidebar.jsx similarity index 79% rename from src/Sidebar.jsx rename to src/Sidebar/Sidebar.jsx index 492b4ba..7a099b6 100644 --- a/src/Sidebar.jsx +++ b/src/Sidebar/Sidebar.jsx @@ -1,13 +1,13 @@ import { useEffect, useRef, useState } from "react"; import { Sidebar } from "@dhx/trial-suite"; -import store from "./store"; +import store from "../data"; const SidebarComponent = () => { let [sidebar, setSidebar] = useState(null); - const nodeRef = useRef(null); + const node = useRef(null); useEffect(() => { - const sidebar = new Sidebar(nodeRef.current, {}); + const sidebar = new Sidebar(node.current, {}); setSidebar(sidebar); return () => { sidebar.destructor(); @@ -28,7 +28,7 @@ const SidebarComponent = () => { sidebar.data.parse(store.sidebarData); }, [sidebar]); - return
; + return
; }; export default SidebarComponent; diff --git a/src/store.js b/src/data.js similarity index 99% rename from src/store.js rename to src/data.js index 1e31ab0..0cc95ce 100644 --- a/src/store.js +++ b/src/data.js @@ -1411,7 +1411,7 @@ const country = [ }, ]; -const store = { +const data = { gridDataset, chartData, hotelsData, @@ -1424,4 +1424,4 @@ const store = { toolbarData, }; -export default store; +export default data; diff --git a/src/index.css b/src/index.css deleted file mode 100644 index 1e76557..0000000 --- a/src/index.css +++ /dev/null @@ -1,389 +0,0 @@ -* { - box-sizing: border-box; -} - -main { - height: 100%; - width: 100%; - display: flex; -} - -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - width: 100%; - height: 100%; - - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -body { - margin: 0; - place-items: center; - height: 100vh; - width: 100vw; -} - -#app { - text-align: center; - height: 100%; - width: 100%; -} - -.container { - display: flex; - flex-grow: 1; - overflow: hidden; -} - -.flex-cols { - display: flex; - flex-direction: column; -} - -.grow { - flex-grow: 1; -} - -/* Grid styling */ -.contact_email { - color: var(--dhx-color-primary); -} - -.grid .dhx_grid-content { - border: none; -} - -/* Tickets dataview styling */ -.dhx_dataview_template_a { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - height: 100%; -} - -.dhx_dataview_template_a_box { - background-color: var(--dhx-background-secondary) !important; -} - -.dhx_dataview_template_a_box .dhx_dataview-item__inner-html { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - height: 100%; -} - -.dhx_dataview_template_a_box .dhx_dataview-item { - padding: 20px; - -webkit-box-sizing: border-box; - box-sizing: border-box; - background-color: var(--dhx-background-primary); - border: var(--dhx-border) !important; - margin-bottom: 8px !important; - margin-left: 8px !important; -} - -.dhx_dataview_template_a_box .dhx_dataview-item:first-child { - margin-left: 0 !important; -} - -.dhx_dataview_template_a__head { - display: -webkit-box; - display: -ms-flexbox; - display: flex; -} - -.dhx_dataview_template_a__type { - color: var(--dhx-font-color-contrast); - text-align: center; - text-transform: capitalize; - width: 55px; - height: 20px; - border-radius: 2px; -} - -.dhx_dataview_template_a__type--major { - background-color: var(--dhx-color-danger); -} - -.dhx_dataview_template_a__type--minor { - background-color: var(--dhx-color-success); -} - -.dhx_dataview_template_a__type--normal { - background-color: var(--dhx-color-primary); -} - -.dhx_dataview_template_a__content { - padding-left: 16px; - width: 80%; -} - -.dhx_dataview_template_a__title { - font: var(--dhx-font-family); - font-weight: var(--dhx-font-weight-medium); - padding-bottom: 8px; -} - -.dhx_dataview_template_a__comment { - display: -webkit-box; - max-height: 40px; - text-overflow: ellipsis; - overflow: hidden; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; -} - -.dhx_dataview_template_a__body { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - margin-top: 20px; -} - -.dhx_dataview_template_a__person { - display: -webkit-box; - display: -ms-flexbox; - display: flex; -} - -.dhx_dataview_template_a__avatar { - width: 40px; - height: 40px; - margin-left: 15px; - margin-right: 16px; - border-radius: 20px; - background: center center/cover no-repeat #f7f7f7; -} - -.dhx_dataview_template_a__name { - color: var(--dhx-font-color-secondary); -} - -.dhx_dataview_template_a__comments { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: end; - -ms-flex-align: end; - align-items: flex-end; - line-height: 20px; -} - -.dhx_dataview_template_a__comments .mdi:before { - position: relative; - top: 4px; - color: var(--dhx-font-color-secondary); - font-size: 20px; - margin-left: 6px; -} - - -/* Message dataview styling */ -.dhx_dataview_template_b_box { - background-color: var(--dhx-background-secondary) !important; -} - -.dhx_dataview_template_b_box .dhx_dataview-item { - padding: 0; - border: var(--dhx-border) !important; - border-radius: 6px; - overflow: hidden; - background-color: var(--dhx-background-primary); - margin-bottom: 8px !important; - margin-left: 8px !important; -} - -.dhx_dataview_template_b_box .dhx_dataview-item:first-child { - margin-left: 0 !important; -} - -.dhx_dataview_template_b { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - width: 100%; - height: 200px; -} - -.dhx_dataview_template_b__avatar { - position: relative; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - margin-top: 16px; - width: 80px; - height: 80px; - border-radius: 50%; - background-size: 80px 80px; -} - -.dhx_dataview_template_b__status { - position: absolute; - bottom: 1px; - right: 9px; - width: 12px; - height: 12px; - border-radius: 50%; - border: 1px solid var(--dhx-color-white); - background-color: var(--dhx-color-success); -} - -.dhx_dataview_template_b__status.dhx_dataview_template_b__status--offline { - display: none; -} - -.dhx_dataview_template_b__title, -.dhx_dataview_template_b__name, -.dhx_dataview_template_b__message-label { - font: var(--dhx-font-family); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.dhx_dataview_template_b__title { - font-weight: var(--dhx-font-weight-medium); - margin-top: 8px; -} - -.dhx_dataview_template_b__message { - border-top: 1px solid var(--dhx-border-color); - display: -webkit-box; - display: -ms-flexbox; - display: flex; - height: 44px; - width: 100%; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - text-decoration: none; - position: absolute; - left: 0; - bottom: 0; -} - -.dhx_dataview_template_b__message-icon { - margin-right: 4px; - font-size: 16px; - color: var(--dhx-color-primary); -} - -.dhx_dataview_template_b__message-label { - color: var(--dhx-color-primary); - font-weight: 500; -} - -/* Layout cell styling */ -.dhx_layout_cell--overflow-auto { - overflow: auto; -} - -.dhx_layout_cell--border-none { - border: none !important; -} - -.dhx_layout_cell-align_content--center { - display: flex; - align-items: center; - justify-content: center; -} - -/* Colorpicker cell styling */ -.dhx_layout_colorpicker_cell { - display: flex; - justify-content: center; - padding: 40px 0; - background-color: var(--dhx-background-primary); -} - -/* Calendar/Timepicker cell styling */ -.dhx_layout_calendar_cell { - display: flex; - justify-content: center; - align-items: center; - min-width: 248px; -} - -/* Sidebar custom elements styling */ -.dhx_navbar--vertical { - overflow: hidden; -} - -.user-info_container { - padding-top: 8px; - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: center; -} - -.user-info_avatar { - height: 40px; - width: 40px; - border-radius: 100%; -} - -.user-info_title { - font-family: Roboto; - font-style: normal; - font-weight: 500; - font-size: 16px; - line-height: 24px; - margin-top: 8px; -} - -.user-info_contact { - font-family: Roboto; - font-style: normal; - font-weight: normal; - font-size: 14px; - line-height: 20px; - margin-bottom: 28px; -} - -.dhx_sidebar--minimized .user-info_avatar { - height: 30px; - width: 30px; -} - -.dhx_sidebar--minimized .user-info_title, -.dhx_sidebar--minimized .user-info_contact { - visibility: hidden; -} - -.dhx-container, -.dhx-container__widget { - height: 100%; -} diff --git a/src/main.jsx b/src/main.jsx index b91620d..e5ce6a7 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,7 +1,7 @@ import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App.jsx"; -import "./index.css"; +import "./App.css"; ReactDOM.createRoot(document.getElementById("root")).render( From 2f970debd8dcb6b4996ec37b96b03c2a5916de26 Mon Sep 17 00:00:00 2001 From: Sergey Blinov Date: Wed, 26 Mar 2025 18:14:08 +0300 Subject: [PATCH 2/4] styles refactoring --- src/App.css | 36 +++++++++++++++++++++++++ src/Content/Content.css | 20 -------------- src/Content/Content.jsx | 1 - src/Content/LeftPanel/Accardion.jsx | 2 +- src/Content/LeftPanel/Calendars.jsx | 11 +++----- src/Content/LeftPanel/Grid.jsx | 2 +- src/Content/LeftPanel/LeftContent.jsx | 7 ++--- src/Content/LeftPanel/Ribbon.jsx | 8 +----- src/Content/LeftPanel/SlidersLayout.jsx | 2 +- src/Content/LeftPanel/Tree.jsx | 2 +- src/Content/RightPanel/ButtonsForm.jsx | 2 +- src/Content/RightPanel/Chart.jsx | 2 +- src/Content/RightPanel/Colorpicker.jsx | 3 +-- src/Content/RightPanel/Form.jsx | 2 +- src/Content/RightPanel/RightContent.jsx | 5 +--- 15 files changed, 52 insertions(+), 53 deletions(-) delete mode 100644 src/Content/Content.css diff --git a/src/App.css b/src/App.css index f2f31ab..9cb071e 100644 --- a/src/App.css +++ b/src/App.css @@ -387,4 +387,40 @@ .dhx-container__widget { height: 100%; } + + .wrapper-main { + flex-grow: 1; + overflow: auto !important; + padding: 12px; + gap: 12px; + } + + .grid_container { + min-height: 848px; + min-width: 800px; + } + + .col-wrap { + height: fit-content; + gap: 12px; + } + + .row-wrap { + gap: 12px; + justify-content: space-between; + } + + .content_left { + max-width: 800px; + } + + .ribbon_container { + padding: 50px; + background: var(--dhx-background-primary); + } + + .content_right { + width: 600px; + flex-shrink: 0; + } \ No newline at end of file diff --git a/src/Content/Content.css b/src/Content/Content.css deleted file mode 100644 index 2cfa475..0000000 --- a/src/Content/Content.css +++ /dev/null @@ -1,20 +0,0 @@ -.wrapper-main { - flex-grow: 1; - overflow: auto !important; - padding: 12px; - gap: 12px; -} - -.bordered { - border: var(--dhx-border); -} - -.grid_container { - min-height: 848px; - min-width: 800px; -} - -.col-wrap { - height: fit-content; - gap: 12px; -} \ No newline at end of file diff --git a/src/Content/Content.jsx b/src/Content/Content.jsx index d520df3..498269b 100644 --- a/src/Content/Content.jsx +++ b/src/Content/Content.jsx @@ -1,6 +1,5 @@ import LeftContent from "./LeftPanel/LeftContent"; import RightContent from "./RightPanel/RightContent"; -import "./Content.css"; const Content = () => { return ( diff --git a/src/Content/LeftPanel/Accardion.jsx b/src/Content/LeftPanel/Accardion.jsx index c5bbb1d..c31c1b1 100644 --- a/src/Content/LeftPanel/Accardion.jsx +++ b/src/Content/LeftPanel/Accardion.jsx @@ -79,5 +79,5 @@ export default function AccordionComponent() { chart?.data.parse(store.hotelsData); }, [chart]); - return
; + return
; } diff --git a/src/Content/LeftPanel/Calendars.jsx b/src/Content/LeftPanel/Calendars.jsx index 8cfdfbf..d4643cb 100644 --- a/src/Content/LeftPanel/Calendars.jsx +++ b/src/Content/LeftPanel/Calendars.jsx @@ -31,13 +31,10 @@ export default function Calendars() { }, []); return ( -
-
-
-
+
+
+
+
); } diff --git a/src/Content/LeftPanel/Grid.jsx b/src/Content/LeftPanel/Grid.jsx index fed2b25..5048567 100644 --- a/src/Content/LeftPanel/Grid.jsx +++ b/src/Content/LeftPanel/Grid.jsx @@ -78,7 +78,7 @@ export default function GridComponent() { }, [grid]); return ( -
+
diff --git a/src/Content/LeftPanel/LeftContent.jsx b/src/Content/LeftPanel/LeftContent.jsx index 40ee448..761c625 100644 --- a/src/Content/LeftPanel/LeftContent.jsx +++ b/src/Content/LeftPanel/LeftContent.jsx @@ -8,14 +8,11 @@ import Tree from "./Tree"; export default function LeftContent() { return ( -
+
-
+
diff --git a/src/Content/LeftPanel/Ribbon.jsx b/src/Content/LeftPanel/Ribbon.jsx index dc9fe01..ef6c5d9 100644 --- a/src/Content/LeftPanel/Ribbon.jsx +++ b/src/Content/LeftPanel/Ribbon.jsx @@ -22,11 +22,5 @@ export default function RibbonComponent() { ribbon.data.parse(store.ribbonData); }, [ribbon]); - return ( -
- ); + return
; } diff --git a/src/Content/LeftPanel/SlidersLayout.jsx b/src/Content/LeftPanel/SlidersLayout.jsx index 11efaa3..75ef49a 100644 --- a/src/Content/LeftPanel/SlidersLayout.jsx +++ b/src/Content/LeftPanel/SlidersLayout.jsx @@ -103,5 +103,5 @@ export default function SlidersLayout() { return () => layout.destructor(); }, []); - return
; + return
; } diff --git a/src/Content/LeftPanel/Tree.jsx b/src/Content/LeftPanel/Tree.jsx index c52f48a..b889983 100644 --- a/src/Content/LeftPanel/Tree.jsx +++ b/src/Content/LeftPanel/Tree.jsx @@ -25,5 +25,5 @@ export default function TreeComponent() { tree.data.parse(store.treeData); }, [tree]); - return
; + return
; } diff --git a/src/Content/RightPanel/ButtonsForm.jsx b/src/Content/RightPanel/ButtonsForm.jsx index c2e3f23..20620db 100644 --- a/src/Content/RightPanel/ButtonsForm.jsx +++ b/src/Content/RightPanel/ButtonsForm.jsx @@ -157,5 +157,5 @@ export default function ButtonsForm() { return () => form.destructor(); }, []); - return
; + return
; } diff --git a/src/Content/RightPanel/Chart.jsx b/src/Content/RightPanel/Chart.jsx index 6114426..b50a015 100644 --- a/src/Content/RightPanel/Chart.jsx +++ b/src/Content/RightPanel/Chart.jsx @@ -44,5 +44,5 @@ export default function ChartComponent() { chart.data.parse(store.chartData); }, [chart]); - return
; + return
; } diff --git a/src/Content/RightPanel/Colorpicker.jsx b/src/Content/RightPanel/Colorpicker.jsx index b8a9615..df8ce3e 100644 --- a/src/Content/RightPanel/Colorpicker.jsx +++ b/src/Content/RightPanel/Colorpicker.jsx @@ -71,8 +71,7 @@ export default function ColorpickerComponent() { return (
); } diff --git a/src/Content/RightPanel/Form.jsx b/src/Content/RightPanel/Form.jsx index a55ccdd..c8db840 100644 --- a/src/Content/RightPanel/Form.jsx +++ b/src/Content/RightPanel/Form.jsx @@ -169,5 +169,5 @@ export default function FormComponent() { return () => form.destructor(); }, []); - return
; + return
; } diff --git a/src/Content/RightPanel/RightContent.jsx b/src/Content/RightPanel/RightContent.jsx index 8ed0563..bca300e 100644 --- a/src/Content/RightPanel/RightContent.jsx +++ b/src/Content/RightPanel/RightContent.jsx @@ -6,10 +6,7 @@ import MessageDataview from "./MessageDataview"; export default function RightContent() { return ( -
+
From adc33d275185a90e5d0d70335ed7bbd4731ae789 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Mon, 31 Mar 2025 13:02:46 +0400 Subject: [PATCH 3/4] [update] mono style for all docs changes --- src/Content/Content.jsx | 12 +- src/Content/LeftPanel/Accardion.jsx | 83 - src/Content/LeftPanel/Calendars.jsx | 34 +- src/Content/LeftPanel/Chart.jsx | 55 + src/Content/LeftPanel/Grid.jsx | 28 +- src/Content/LeftPanel/LeftContent.jsx | 30 +- src/Content/LeftPanel/Ribbon.jsx | 21 +- src/Content/LeftPanel/SlidersLayout.jsx | 28 +- src/Content/LeftPanel/TicketsDataview.jsx | 27 +- src/Content/LeftPanel/Tree.jsx | 18 +- src/Content/RightPanel/ButtonsForm.jsx | 31 +- src/Content/RightPanel/Chart.jsx | 31 +- src/Content/RightPanel/Colorpicker.jsx | 10 +- src/Content/RightPanel/Form.jsx | 58 +- src/Content/RightPanel/MessageDataview.jsx | 19 +- src/Content/RightPanel/RightContent.jsx | 18 +- src/MainContainer/MainContainer.jsx | 16 +- src/MainContainer/Tabbar.jsx | 12 +- src/MainContainer/Toolbar.jsx | 19 +- src/Sidebar/Sidebar.jsx | 17 +- src/data.js | 2856 ++++++++++---------- 21 files changed, 1683 insertions(+), 1740 deletions(-) delete mode 100644 src/Content/LeftPanel/Accardion.jsx create mode 100644 src/Content/LeftPanel/Chart.jsx diff --git a/src/Content/Content.jsx b/src/Content/Content.jsx index 498269b..80f193e 100644 --- a/src/Content/Content.jsx +++ b/src/Content/Content.jsx @@ -1,13 +1,11 @@ -import LeftContent from "./LeftPanel/LeftContent"; -import RightContent from "./RightPanel/RightContent"; +import LeftContentComponent from "./LeftPanel/LeftContent"; +import RightContentComponent from "./RightPanel/RightContent"; -const Content = () => { +export default function ContentComponent () { return (
- - + +
); }; - -export default Content; diff --git a/src/Content/LeftPanel/Accardion.jsx b/src/Content/LeftPanel/Accardion.jsx deleted file mode 100644 index c31c1b1..0000000 --- a/src/Content/LeftPanel/Accardion.jsx +++ /dev/null @@ -1,83 +0,0 @@ -import { useEffect, useRef, useState } from "react"; -import { Chart, Layout } from "@dhx/trial-suite"; -import store from "../../data"; - -export default function AccordionComponent() { - const node = useRef(null); - let [chart, setChart] = useState(null); - - useEffect(() => { - const accordion = new Layout(node.current, { - type: "line", - rows: [ - { - header: "HOTELS", - height: "500px", - padding: 40, - id: "chart", - collapsable: true, - }, - ], - }); - const 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, - }, - }); - accordion.getCell("chart").attach(chart); - setChart(chart); - - // Cleanup - return () => { - accordion.destructor(); - chart.destructor(); - }; - }, []); - - useEffect(() => { - chart?.data.parse(store.hotelsData); - }, [chart]); - - return
; -} diff --git a/src/Content/LeftPanel/Calendars.jsx b/src/Content/LeftPanel/Calendars.jsx index d4643cb..47278cc 100644 --- a/src/Content/LeftPanel/Calendars.jsx +++ b/src/Content/LeftPanel/Calendars.jsx @@ -1,40 +1,42 @@ import { useEffect, useRef } from "react"; import { Calendar, Timepicker } from "@dhx/trial-suite"; -export default function Calendars() { - const weekNode = useRef(null); - const timepickerNode = useRef(null); - const yearNode = useRef(null); +export default function CalendarsComponent() { + const week_container = useRef(null); + const timepicker_container = useRef(null); + const year_container = useRef(null); useEffect(() => { - const week = new Calendar(weekNode.current, { + const week_calendar = new Calendar(week_container.current, { weekStart: "monday", timePicker: true, range: true, - value: [new Date(), new Date(Date.now() + 200000000)], + value: [new Date(), new Date(Date.now() + 200000000)] }); - const timePicker = new Timepicker(timepickerNode.current, { + + const timepicker = new Timepicker(timepicker_container.current, { controls: true, - value: new Date(), + value: new Date() }); - const year = new Calendar(yearNode.current, { + + const year_calendar = new Calendar(year_container.current, { timePicker: true, mode: "year", - value: new Date(), + value: new Date() }); return () => { - week.destructor(); - timePicker.destructor(); - year.destructor(); + week_calendar?.destructor(); + timepicker?.destructor(); + year_calendar?.destructor(); }; }, []); return (
-
-
-
+
+
+
); } diff --git a/src/Content/LeftPanel/Chart.jsx b/src/Content/LeftPanel/Chart.jsx new file mode 100644 index 0000000..8097bef --- /dev/null +++ b/src/Content/LeftPanel/Chart.jsx @@ -0,0 +1,55 @@ +import { useEffect, useRef } from "react"; +import { Chart, Layout } from "@dhx/trial-suite"; +import { getData } from "../../data"; + +export default function ChartComponent() { + const { seriesData, hotelsData } = getData(); + const layout_container = useRef(null); + + useEffect(() => { + const layout = new Layout(layout_container.current, { + type: "line", + rows: [ + { + header: "HOTELS", + height: "500px", + padding: 40, + id: "chart", + collapsable: true + } + ] + }); + + const chart = new Chart(null, { + data: hotelsData, + type: "bar", + scales: { + bottom: { + text: "month" + }, + left: { + maxTicks: 10, + max: 100, + min: 0 + } + }, + series: seriesData, + legend: { + series: ["A", "B", "all"], + halign: "right", + valign: "top", + itemPadding: 20, + margin: 40 + } + }); + + layout.getCell("chart").attach(chart); + + return () => { + layout?.destructor(); + chart?.destructor(); + }; + }, []); + + return
; +} diff --git a/src/Content/LeftPanel/Grid.jsx b/src/Content/LeftPanel/Grid.jsx index 5048567..1ab4fc7 100644 --- a/src/Content/LeftPanel/Grid.jsx +++ b/src/Content/LeftPanel/Grid.jsx @@ -1,14 +1,15 @@ -import { useEffect, useRef, useState } from "react"; +import { useEffect, useRef } from "react"; import { Grid, Pagination } from "@dhx/trial-suite"; -import store from "../../data"; +import { getData } from "../../data"; export default function GridComponent() { - let [grid, setGrid] = useState(null); - const gNode = useRef(null); - const pNode = useRef(null); + const { gridData } = getData(); + const grid_container = useRef(null); + const pagination_container = useRef(null); useEffect(() => { const gridConfig = { + data: gridData, autoWidth: true, columns: [ { @@ -58,29 +59,22 @@ export default function GridComponent() { editable: true, }; - const grid = new Grid(gNode.current, gridConfig); - const paginator = new Pagination(pNode.current, { + const grid = new Grid(grid_container.current, gridConfig); + const pagination = new Pagination(pagination_container.current, { pageSize: 20, data: grid.data, }); - // Initialize grid and paginator here - setGrid(grid); - // Cleanup return () => { grid?.destructor(); - paginator?.destructor(); + pagination?.destructor(); }; }, []); - useEffect(() => { - grid?.data.parse(store.gridDataset); - }, [grid]); - return (
-
-
+
+
); } diff --git a/src/Content/LeftPanel/LeftContent.jsx b/src/Content/LeftPanel/LeftContent.jsx index 761c625..ef4b293 100644 --- a/src/Content/LeftPanel/LeftContent.jsx +++ b/src/Content/LeftPanel/LeftContent.jsx @@ -1,23 +1,23 @@ -import Accardion from "./Accardion"; -import Calendars from "./Calendars"; -import Grid from "./Grid"; -import Ribbon from "./Ribbon"; -import SlidersLayout from "./SlidersLayout"; -import TicketsDataview from "./TicketsDataview"; -import Tree from "./Tree"; +import ChartComponent from "./Chart"; +import CalendarsComponent from "./Calendars"; +import GridComponent from "./Grid"; +import RibbonComponent from "./Ribbon"; +import SlidersLayoutComponent from "./SlidersLayout"; +import TicketsDataviewComponent from "./TicketsDataview"; +import TreeComponent from "./Tree"; -export default function LeftContent() { +export default function LeftContentComponent() { return (
- - - + + +
- - + +
- - + +
); } diff --git a/src/Content/LeftPanel/Ribbon.jsx b/src/Content/LeftPanel/Ribbon.jsx index ef6c5d9..b180e44 100644 --- a/src/Content/LeftPanel/Ribbon.jsx +++ b/src/Content/LeftPanel/Ribbon.jsx @@ -1,26 +1,19 @@ import { useEffect, useRef, useState } from "react"; import { Ribbon } from "@dhx/trial-suite"; -import store from "../../data"; +import { getData } from "../../data"; export default function RibbonComponent() { - const node = useRef(null); - let [ribbon, setRibbon] = useState(null); + const { ribbonData } = getData(); + const ribbon_container = useRef(null); useEffect(() => { - const ribbon = new Ribbon(node.current, { - css: "dhx_widget--bordered", + const ribbon = new Ribbon(ribbon_container.current, { + data: ribbonData, + css: "dhx_widget--bordered" }); - setRibbon(ribbon); - - // Cleanup return () => ribbon.destructor(); }, []); - useEffect(() => { - if (!ribbon) return; - ribbon.data.parse(store.ribbonData); - }, [ribbon]); - - return
; + return
; } diff --git a/src/Content/LeftPanel/SlidersLayout.jsx b/src/Content/LeftPanel/SlidersLayout.jsx index 75ef49a..f757815 100644 --- a/src/Content/LeftPanel/SlidersLayout.jsx +++ b/src/Content/LeftPanel/SlidersLayout.jsx @@ -1,13 +1,13 @@ import { useEffect, useRef } from "react"; import { Layout, Slider } from "@dhx/trial-suite"; -export default function SlidersLayout() { - const node = useRef(null); +export default function SlidersLayoutComponent() { + const layout_container = useRef(null); const tickTemplate = (value) => `${value}`; useEffect(() => { - const layout = new Layout(node.current, { + const layout = new Layout(layout_container.current, { type: "none", height: "fit-content", cols: [ @@ -34,24 +34,24 @@ export default function SlidersLayout() { padding: 10, height: "content", id: "slider4", - }, - ], + } + ] }, { padding: "10px 20px", height: "260px", width: "20%", id: "slider5", - }, - ], + } + ] }); + const slider1 = new Slider(null, { min: 0, max: 40, step: 1, }); - // Slider 2 initialization const slider2 = new Slider(null, { min: 0, max: 40, @@ -60,7 +60,6 @@ export default function SlidersLayout() { step: 1, }); - // Slider 3 initialization const slider3 = new Slider(null, { min: 0, max: 40, @@ -72,7 +71,6 @@ export default function SlidersLayout() { tickTemplate, }); - // Slider 4 initialization const slider4 = new Slider(null, { min: 0, max: 40, @@ -81,7 +79,6 @@ export default function SlidersLayout() { value: [0, 20], }); - // Slider 5 initialization const slider5 = new Slider(null, { mode: "vertical", range: true, @@ -91,17 +88,18 @@ export default function SlidersLayout() { tick: 1, majorTick: 5, value: [0, 20], - tickTemplate, + tickTemplate }); - // Attached all sliders in sliderLayout, which is main layout's cell + // Attached all sliders in layout, which is main layout's cell layout.getCell("slider1").attach(slider1); layout.getCell("slider2").attach(slider2); layout.getCell("slider3").attach(slider3); layout.getCell("slider4").attach(slider4); layout.getCell("slider5").attach(slider5); - return () => layout.destructor(); + + return () => layout?.destructor(); }, []); - return
; + return
; } diff --git a/src/Content/LeftPanel/TicketsDataview.jsx b/src/Content/LeftPanel/TicketsDataview.jsx index 4881ab0..956a1e1 100644 --- a/src/Content/LeftPanel/TicketsDataview.jsx +++ b/src/Content/LeftPanel/TicketsDataview.jsx @@ -1,11 +1,11 @@ -import { useEffect, useRef, useState } from "react"; +import { useEffect, useRef } from "react"; import { DataView } from "@dhx/trial-suite"; import "@dhx/trial-suite/codebase/suite.min.css"; -import store from "../../data"; +import { getData } from "../../data"; -export default function TicketsDataview() { - const node = useRef(null); - let [dataview, setDataview] = useState(null); +export default function TicketsDataviewComponent() { + const { ticketsDataviewData } = getData(); + const dataview_container = useRef(null); const template = ({ title, text, type, avatar, name, comments, time }) => `
@@ -31,20 +31,15 @@ export default function TicketsDataview() { `; useEffect(() => { - const dataview = new DataView(node.current, { + const dataview = new DataView(dataview_container.current, { + data: ticketsDataviewData, template, itemsInRow: 2, - css: "dhx_dataview_template_a_box", + css: "dhx_dataview_template_a_box" }); - setDataview(dataview); - // Cleanup - return () => dataview.destructor(); + + return () => dataview?.destructor(); }, []); - useEffect(() => { - if (!dataview) return; - dataview.data.parse(store.ticketsDataviewData); - }, [dataview]); - - return
; + return
; } diff --git a/src/Content/LeftPanel/Tree.jsx b/src/Content/LeftPanel/Tree.jsx index b889983..a855837 100644 --- a/src/Content/LeftPanel/Tree.jsx +++ b/src/Content/LeftPanel/Tree.jsx @@ -1,29 +1,29 @@ import { useEffect, useRef, useState } from "react"; import { Tree } from "@dhx/trial-suite"; -import store from "../../data"; +import { getData } from "../../data"; -export default function TreeComponent() { - const node = useRef(null); +export default function TreeComponent () { + const { treeData } = getData(); + const tree_container = useRef(null); let [tree, setTree] = useState(null); useEffect(() => { - const tree = new Tree(node.current, { + const tree = new Tree(tree_container.current, { checkbox: true, editable: true, keyNavigation: true, - dragMode: "both", + dragMode: "both" }); setTree(tree); - // Cleanup - return () => tree.destructor(); + return () => tree?.destructor(); }, []); useEffect(() => { if (!tree) return; - tree.data.parse(store.treeData); + tree.data.parse(treeData); }, [tree]); - return
; + return
; } diff --git a/src/Content/RightPanel/ButtonsForm.jsx b/src/Content/RightPanel/ButtonsForm.jsx index 20620db..0bddfaa 100644 --- a/src/Content/RightPanel/ButtonsForm.jsx +++ b/src/Content/RightPanel/ButtonsForm.jsx @@ -1,11 +1,11 @@ import { useEffect, useRef } from "react"; import { Form } from "@dhx/trial-suite"; -export default function ButtonsForm() { - const node = useRef(null); +export default function ButtonsFormComponent() { + const buttons_form_container = useRef(null); useEffect(() => { - const form = new Form(node.current, { + const form = new Form(buttons_form_container.current, { height: "content", padding: 40, align: "between", @@ -42,8 +42,8 @@ export default function ButtonsForm() { full: true, disabled: true, size: "small", - }, - ], + } + ] }, { align: "between", @@ -77,8 +77,8 @@ export default function ButtonsForm() { full: true, size: "small", disabled: true, - }, - ], + } + ] }, { align: "between", @@ -112,8 +112,8 @@ export default function ButtonsForm() { full: true, size: "small", disabled: true, - }, - ], + } + ] }, { align: "between", @@ -147,15 +147,14 @@ export default function ButtonsForm() { full: true, size: "small", disabled: true, - }, - ], - }, - ], + } + ] + } + ] }); - // Cleanup - return () => form.destructor(); + return () => form?.destructor(); }, []); - return
; + return
; } diff --git a/src/Content/RightPanel/Chart.jsx b/src/Content/RightPanel/Chart.jsx index b50a015..08de6a1 100644 --- a/src/Content/RightPanel/Chart.jsx +++ b/src/Content/RightPanel/Chart.jsx @@ -1,13 +1,14 @@ import { useEffect, useRef, useState } from "react"; import { Chart } from "@dhx/trial-suite"; -import store from "../../data"; +import { getData } from "../../data"; export default function ChartComponent() { - const node = useRef(null); - let [chart, setChart] = useState(null); + const chart_container = useRef(null); useEffect(() => { - const chart = new Chart(node.current, { + const { chartData } = getData(); + const chart = new Chart(chart_container.current, { + data: chartData, type: "pie", series: [ { @@ -17,32 +18,24 @@ export default function ChartComponent() { 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 + } }); - setChart(chart); - chart.data.parse(store.chartData); - // Cleanup - return () => chart.destructor(); + return () => chart?.destructor(); }, []); - useEffect(() => { - if (!chart) return; - chart.data.parse(store.chartData); - }, [chart]); - - return
; + return
; } diff --git a/src/Content/RightPanel/Colorpicker.jsx b/src/Content/RightPanel/Colorpicker.jsx index df8ce3e..97e7402 100644 --- a/src/Content/RightPanel/Colorpicker.jsx +++ b/src/Content/RightPanel/Colorpicker.jsx @@ -1,8 +1,8 @@ import { useEffect, useRef } from "react"; import { Colorpicker, awaitRedraw } from "@dhx/trial-suite"; -export default function ColorpickerComponent() { - const node = useRef(null); +export default function ColorpickerComponent () { + const colorpicker_container = useRef(null); const hexToHSLChema = (HEX) => { let r = 0, @@ -50,7 +50,7 @@ export default function ColorpickerComponent() { }; useEffect(() => { - const colorpicker = new Colorpicker(node.current, { + const colorpicker = new Colorpicker(colorpicker_container.current, { mode: "picker", }); @@ -65,12 +65,12 @@ export default function ColorpickerComponent() { }); // return () => colorpicker.destructor(); - return () => awaitRedraw().then(() => colorpicker.destructor()); + return () => awaitRedraw().then(() => colorpicker?.destructor()); }, []); return (
); diff --git a/src/Content/RightPanel/Form.jsx b/src/Content/RightPanel/Form.jsx index c8db840..67bbe4e 100644 --- a/src/Content/RightPanel/Form.jsx +++ b/src/Content/RightPanel/Form.jsx @@ -1,36 +1,13 @@ import { useEffect, useRef } from "react"; import { Form } from "@dhx/trial-suite"; +import { getData } from "../../data"; export default function FormComponent() { - const node = useRef(null); - - 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", - }, - // ... add more countries here - ]; + const { country } = getData(); + const form_container = useRef(null); useEffect(() => { - const form = new Form(node.current, { + const form = new Form(form_container.current, { padding: 40, width: "auto", rows: [ @@ -54,8 +31,8 @@ export default function FormComponent() { label: "Surname", placeholder: "Type text", required: true, - }, - ], + } + ] }, { name: "country", @@ -107,9 +84,9 @@ export default function FormComponent() { type: "radioButton", text: "Advanced", value: "2", - }, - ], - }, + } + ] + } }, { name: "backgroundColor", @@ -156,18 +133,15 @@ export default function FormComponent() { id: "4", type: "checkbox", text: "Your option", - }, - ], - }, - }, - ], + } + ] + } + } + ] }); - // Parse the data into the form - - // Cleanup - return () => form.destructor(); + return () => form?.destructor(); }, []); - return
; + return
; } diff --git a/src/Content/RightPanel/MessageDataview.jsx b/src/Content/RightPanel/MessageDataview.jsx index 1bb26ad..6ed0a38 100644 --- a/src/Content/RightPanel/MessageDataview.jsx +++ b/src/Content/RightPanel/MessageDataview.jsx @@ -1,9 +1,10 @@ import { useEffect, useRef } from "react"; import { DataView } from "@dhx/trial-suite"; -import store from "../../data"; +import { getData } from "../../data"; -export default function MessageDataview() { - const node = useRef(null); +export default function MessageDataviewComponent() { + const { messageDataviewData } = getData(); + const dataview_container = useRef(null); function template({ mail, name, avatar, status, delivered }) { return ` @@ -22,17 +23,15 @@ export default function MessageDataview() { } useEffect(() => { - const dataview = new DataView(node.current, { + const dataview = new DataView(dataview_container.current, { + data: messageDataviewData, template, itemsInRow: 2, - css: "dhx_dataview_template_b_box", + css: "dhx_dataview_template_b_box" }); - dataview.data.parse(store.messageDataviewData); - - // Cleanup - return () => dataview.destructor(); + return () => dataview?.destructor(); }, []); - return
; + return
; } diff --git a/src/Content/RightPanel/RightContent.jsx b/src/Content/RightPanel/RightContent.jsx index bca300e..3127f19 100644 --- a/src/Content/RightPanel/RightContent.jsx +++ b/src/Content/RightPanel/RightContent.jsx @@ -1,17 +1,17 @@ -import ButtonsForm from "./ButtonsForm"; -import Chart from "./Chart"; -import Colorpicker from "./Colorpicker"; +import ButtonsFormComponent from "./ButtonsForm"; +import ChartComponent from "./Chart"; +import ColorpickerComponent from "./Colorpicker"; import FormComponent from "./Form"; -import MessageDataview from "./MessageDataview"; +import MessageDataviewComponent from "./MessageDataview"; -export default function RightContent() { +export default function RightContentComponent() { return (
- + - - - + + +
); } diff --git a/src/MainContainer/MainContainer.jsx b/src/MainContainer/MainContainer.jsx index 96e08b7..da0aa37 100644 --- a/src/MainContainer/MainContainer.jsx +++ b/src/MainContainer/MainContainer.jsx @@ -1,15 +1,13 @@ -import Content from "../Content/Content"; -import Tabbar from "./Tabbar"; -import Toolbar from "./Toolbar"; +import ContentComponent from "../Content/Content"; +import TabbarComponent from "./Tabbar"; +import ToolbarComponent from "./Toolbar"; -const MainContainer = () => { +export default function MainContainerComponent () { return (
- - - + + +
); }; - -export default MainContainer; diff --git a/src/MainContainer/Tabbar.jsx b/src/MainContainer/Tabbar.jsx index 17c3fae..e292ec7 100644 --- a/src/MainContainer/Tabbar.jsx +++ b/src/MainContainer/Tabbar.jsx @@ -1,11 +1,11 @@ import { useEffect, useRef } from "react"; import { Tabbar } from "@dhx/trial-suite"; -const TabbarComponent = () => { - const node = useRef(null); +export default function TabbarComponent () { + const tabbar_container = useRef(null); useEffect(() => { - const tabbar = new Tabbar(node.current, { + const tabbar = new Tabbar(tabbar_container.current, { tabAlign: "center", disabled: ["reports", "tickets", "users", "applications"], views: [ @@ -18,11 +18,9 @@ const TabbarComponent = () => { }); return () => { - tabbar.destructor(); + tabbar?.destructor(); }; }, []); - return
; + return
; }; - -export default TabbarComponent; diff --git a/src/MainContainer/Toolbar.jsx b/src/MainContainer/Toolbar.jsx index 30c4946..26f53e6 100644 --- a/src/MainContainer/Toolbar.jsx +++ b/src/MainContainer/Toolbar.jsx @@ -1,17 +1,20 @@ import { useRef, useEffect, useState } from "react"; import { Toolbar, setTheme } from "@dhx/trial-suite"; -import store from "../data"; +import { getData } from "../data"; -const ToolbarComponent = () => { +export default function ToolbarComponent () { + const { toolbarData } = getData(); let [theme, setThemeState] = useState("light"); let [contrast, setContrast] = useState(false); let [toolbar, setToolbar] = useState(null); - const node = useRef(null); + const toolbar_container = useRef(null); useEffect(() => { - const toolbar = new Toolbar(node.current, {}); + const toolbar = new Toolbar(toolbar_container.current, { + data: toolbarData + }); setToolbar(toolbar); - return () => toolbar.destructor(); + return () => toolbar?.destructor(); }, []); useEffect(() => { @@ -35,14 +38,12 @@ const ToolbarComponent = () => { } } }); - toolbar.data.parse(store.toolbarData); + toolbar.data.parse(toolbarData); }, [toolbar]); useEffect(() => { setTheme(`${contrast ? "contrast-" : ""}${theme}`); }, [contrast, theme]); - return
; + return
; }; - -export default ToolbarComponent; diff --git a/src/Sidebar/Sidebar.jsx b/src/Sidebar/Sidebar.jsx index 7a099b6..683efc7 100644 --- a/src/Sidebar/Sidebar.jsx +++ b/src/Sidebar/Sidebar.jsx @@ -1,16 +1,17 @@ import { useEffect, useRef, useState } from "react"; import { Sidebar } from "@dhx/trial-suite"; -import store from "../data"; +import { getData } from "../data"; -const SidebarComponent = () => { +export default function SidebarComponent () { + const { sidebarData } = getData(); let [sidebar, setSidebar] = useState(null); - const node = useRef(null); + const sidebar_container = useRef(null); useEffect(() => { - const sidebar = new Sidebar(node.current, {}); + const sidebar = new Sidebar(sidebar_container.current, {}); setSidebar(sidebar); return () => { - sidebar.destructor(); + sidebar?.destructor(); }; }, []); @@ -25,10 +26,8 @@ const SidebarComponent = () => { : "mdi mdi-backburger"; } }); - sidebar.data.parse(store.sidebarData); + sidebar.data.parse(sidebarData); }, [sidebar]); - return
; + return
; }; - -export default SidebarComponent; diff --git a/src/data.js b/src/data.js index 0cc95ce..efcbd65 100644 --- a/src/data.js +++ b/src/data.js @@ -1,1427 +1,1457 @@ -const sidebarData = [ - { - id: "toggle", - css: "toggle-button", - icon: "mdi mdi-backburger", - }, - { - type: "customHTML", - id: "userInfo", - css: "user-info_item", - html: - "", - }, - { - 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", - }, - ], - }, -]; +export function getData() { -const toolbarData = [ - { - id: "topMenuButton", - type: "button", - value: "Toolbar button", - view: "flat", - icon: "dxi dxi-plus", - size: "small", - circle: true, - color: "secondary", - }, + const sidebarData = [ + { + id: "toggle", + css: "toggle-button", + icon: "mdi mdi-backburger", + }, + { + type: "customHTML", + id: "userInfo", + css: "user-info_item", + html: + "", + }, + { + 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", + }, + ], + }, + ]; - { - type: "spacer", - }, - { - id: "theme", - circle: true, - icon: "mdi mdi-weather-night", - checked: false, - }, + const toolbarData = [ + { + id: "topMenuButton", + type: "button", + value: "Toolbar button", + view: "flat", + icon: "dxi dxi-plus", + size: "small", + circle: true, + color: "secondary", + }, - { - 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, - }, -]; + { + type: "spacer", + }, + { + id: "theme", + circle: true, + icon: "mdi mdi-weather-night", + checked: false, + }, -// 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", - }, -]; + { + 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, + }, + ]; -gridDataset.forEach((item) => (item.totalCost = item.nights * item.price)); + // 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", + }, + ]; -// 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, - }, -]; + gridData.forEach((item) => (item.totalCost = item.nights * item.price)); -// 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 }, -]; + // 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, + }, + ]; -// 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" }, - ], - }, -]; + // 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 }, + ]; -// 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", - }, -]; + // 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 + } + ]; -// 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", - }, - ], - }, - ], - }, -]; + // 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" }, + ], + }, + ]; -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", - }, -]; + // 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", + }, + ]; -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", - }, -]; + // 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 data = { - gridDataset, - chartData, - hotelsData, - ribbonData, - ticketsDataviewData, - treeData, - messageDataviewData, - country, - sidebarData, - toolbarData, -}; + 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", + }, + ]; -export default data; + 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 From 64b13d5afb8d633d9b93a1204dec6b5e8a1ec6c6 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 24 Apr 2025 09:43:09 +0400 Subject: [PATCH 4/4] Add minor fixes --- index.html | 2 +- src/Content/LeftPanel/SlidersLayout.jsx | 18 +++++++++--------- src/data.js | 9 +-------- 3 files changed, 11 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index 0a48e0c..3b450c9 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,7 @@ type="text/css" /> - DHTMLX Suite + React + DHTMLX Suite React
diff --git a/src/Content/LeftPanel/SlidersLayout.jsx b/src/Content/LeftPanel/SlidersLayout.jsx index f757815..23096ad 100644 --- a/src/Content/LeftPanel/SlidersLayout.jsx +++ b/src/Content/LeftPanel/SlidersLayout.jsx @@ -18,22 +18,22 @@ export default function SlidersLayoutComponent() { { 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" } ] }, @@ -41,7 +41,7 @@ export default function SlidersLayoutComponent() { padding: "10px 20px", height: "260px", width: "20%", - id: "slider5", + id: "slider5" } ] }); @@ -49,7 +49,7 @@ export default function SlidersLayoutComponent() { const slider1 = new Slider(null, { min: 0, max: 40, - step: 1, + step: 1 }); const slider2 = new Slider(null, { @@ -57,7 +57,7 @@ export default function SlidersLayoutComponent() { max: 40, range: true, value: [10, 20], - step: 1, + step: 1 }); const slider3 = new Slider(null, { @@ -68,7 +68,7 @@ export default function SlidersLayoutComponent() { value: [0, 20], tick: 1, majorTick: 5, - tickTemplate, + tickTemplate }); const slider4 = new Slider(null, { @@ -76,7 +76,7 @@ export default function SlidersLayoutComponent() { max: 40, step: 10, range: true, - value: [0, 20], + value: [0, 20] }); const slider5 = new Slider(null, { 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 +}