+ {children}
+
+
+
+
+ );
+};
+
+export default Loader;
diff --git a/frontend/src/components/Breadcrumbs/Breadcrumb.tsx b/frontend/src/components/Breadcrumbs/Breadcrumb.tsx
new file mode 100644
index 0000000..b877095
--- /dev/null
+++ b/frontend/src/components/Breadcrumbs/Breadcrumb.tsx
@@ -0,0 +1,26 @@
+import { Link } from 'react-router-dom';
+interface BreadcrumbProps {
+ pageName: string;
+}
+const Breadcrumb = ({ pageName }: BreadcrumbProps) => {
+ return (
+
+
+ );
+};
+
+export default Breadcrumb;
diff --git a/frontend/src/components/CardDataStats.tsx b/frontend/src/components/CardDataStats.tsx
new file mode 100644
index 0000000..6de47f3
--- /dev/null
+++ b/frontend/src/components/CardDataStats.tsx
@@ -0,0 +1,77 @@
+import React, { ReactNode } from 'react';
+
+interface CardDataStatsProps {
+ title: string;
+ total: string;
+ rate: string;
+ levelUp?: boolean;
+ levelDown?: boolean;
+ children: ReactNode;
+}
+
+const CardDataStats: React.FC+ {pageName} +
+ + +
+
+ );
+};
+
+export default CardDataStats;
diff --git a/frontend/src/components/Charts/BarChart.tsx b/frontend/src/components/Charts/BarChart.tsx
new file mode 100644
index 0000000..aaf90c8
--- /dev/null
+++ b/frontend/src/components/Charts/BarChart.tsx
@@ -0,0 +1,153 @@
+import { ApexOptions } from 'apexcharts';
+import React, { useState } from 'react';
+import ReactApexChart from 'react-apexcharts';
+
+const options: ApexOptions = {
+ colors: ['#3C50E0', '#80CAEE'],
+ chart: {
+ fontFamily: 'Satoshi, sans-serif',
+ type: 'bar',
+ height: 335,
+ stacked: true,
+ toolbar: {
+ show: false,
+ },
+ zoom: {
+ enabled: false,
+ },
+ },
+
+ responsive: [
+ {
+ breakpoint: 1536,
+ options: {
+ plotOptions: {
+ bar: {
+ borderRadius: 0,
+ columnWidth: '25%',
+ },
+ },
+ },
+ },
+ ],
+ plotOptions: {
+ bar: {
+ horizontal: false,
+ borderRadius: 0,
+ columnWidth: '25%',
+ borderRadiusApplication: 'end',
+ borderRadiusWhenStacked: 'last',
+ },
+ },
+ dataLabels: {
+ enabled: false,
+ },
+
+ xaxis: {
+ categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
+ },
+ legend: {
+ position: 'top',
+ horizontalAlign: 'left',
+ fontFamily: 'Satoshi',
+ fontWeight: 500,
+ fontSize: '14px',
+
+ markers: {
+ radius: 99,
+ },
+ },
+ fill: {
+ opacity: 1,
+ },
+};
+
+interface ChartTwoState {
+ series: {
+ name: string;
+ data: number[];
+ }[];
+}
+
+const ChartTwo: React.FC = () => {
+ const [state, setState] = useState
+ {children}
+
+
+
+
+
+
+
+
+ {rate}
+
+ {levelUp && (
+
+ )}
+ {levelDown && (
+
+ )}
+
+ + {total} +
+ {title} +
+
+ );
+};
+
+export default ChartTwo;
diff --git a/frontend/src/components/Charts/LineChart.tsx b/frontend/src/components/Charts/LineChart.tsx
new file mode 100644
index 0000000..5985439
--- /dev/null
+++ b/frontend/src/components/Charts/LineChart.tsx
@@ -0,0 +1,201 @@
+import { ApexOptions } from 'apexcharts';
+import React, { useState } from 'react';
+import ReactApexChart from 'react-apexcharts';
+
+const options: ApexOptions = {
+ legend: {
+ show: false,
+ position: 'top',
+ horizontalAlign: 'left',
+ },
+ colors: ['#3C50E0', '#80CAEE'],
+ chart: {
+ fontFamily: 'Satoshi, sans-serif',
+ height: 335,
+ type: 'area',
+ dropShadow: {
+ enabled: true,
+ color: '#623CEA14',
+ top: 10,
+ blur: 4,
+ left: 0,
+ opacity: 0.1,
+ },
+
+ toolbar: {
+ show: false,
+ },
+ },
+ responsive: [
+ {
+ breakpoint: 1024,
+ options: {
+ chart: {
+ height: 300,
+ },
+ },
+ },
+ {
+ breakpoint: 1366,
+ options: {
+ chart: {
+ height: 350,
+ },
+ },
+ },
+ ],
+ stroke: {
+ width: [2, 2],
+ curve: 'straight',
+ },
+ // labels: {
+ // show: false,
+ // position: "top",
+ // },
+ grid: {
+ xaxis: {
+ lines: {
+ show: true,
+ },
+ },
+ yaxis: {
+ lines: {
+ show: true,
+ },
+ },
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ markers: {
+ size: 4,
+ colors: '#fff',
+ strokeColors: ['#3056D3', '#80CAEE'],
+ strokeWidth: 3,
+ strokeOpacity: 0.9,
+ strokeDashArray: 0,
+ fillOpacity: 1,
+ discrete: [],
+ hover: {
+ size: undefined,
+ sizeOffset: 5,
+ },
+ },
+ xaxis: {
+ type: 'category',
+ categories: [
+ 'Current',
+ '3 Hour',
+ '6 Hour',
+ '9 Hour',
+ '12 Hour',
+ '15 Hour',
+ '18 Hour',
+ '21 Hour',
+ '24 Hour',
+ '27 Hour',
+ '30 Hour',
+ '33 Hour',
+ ],
+ axisBorder: {
+ show: false,
+ },
+ axisTicks: {
+ show: false,
+ },
+ },
+ yaxis: {
+ title: {
+ style: {
+ fontSize: '0px',
+ },
+ },
+ min: 0,
+ max: 100,
+ },
+};
+
+interface ChartOneState {
+ series: {
+ name: string;
+ data: number[];
+ }[];
+}
+
+const LineChart: React.FC = () => {
+ const [state, setState] = useState
+
+
+
+
+ + Air Quality +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default LineChart;
diff --git a/frontend/src/components/Charts/PieChart.tsx b/frontend/src/components/Charts/PieChart.tsx
new file mode 100644
index 0000000..afb6eff
--- /dev/null
+++ b/frontend/src/components/Charts/PieChart.tsx
@@ -0,0 +1,163 @@
+import { ApexOptions } from 'apexcharts';
+import React, { useState } from 'react';
+import ReactApexChart from 'react-apexcharts';
+
+interface ChartThreeState {
+ series: number[];
+}
+
+const options: ApexOptions = {
+ chart: {
+ fontFamily: 'Satoshi, sans-serif',
+ type: 'donut',
+ },
+ colors: ['#3C50E0', '#6577F3', '#8FD0EF', '#0FADCF'],
+ labels: ['Desktop', 'Tablet', 'Mobile', 'Unknown'],
+ legend: {
+ show: false,
+ position: 'bottom',
+ },
+
+ plotOptions: {
+ pie: {
+ donut: {
+ size: '65%',
+ background: 'transparent',
+ },
+ },
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ responsive: [
+ {
+ breakpoint: 2600,
+ options: {
+ chart: {
+ width: 380,
+ },
+ },
+ },
+ {
+ breakpoint: 640,
+ options: {
+ chart: {
+ width: 200,
+ },
+ },
+ },
+ ],
+};
+
+const PieChart: React.FC = () => {
+ const [state, setState] = useState
+
+
+
+
+
+
+
+
+
+
+
+ Indoor Temperature
+3 Hour Interval
+
+
+
+
+
+
+
+ + Outdoor Temperature +
+3 Hour Interval
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default PieChart;
diff --git a/frontend/src/components/Dropdowns/DropdownDefault.tsx b/frontend/src/components/Dropdowns/DropdownDefault.tsx
new file mode 100644
index 0000000..548d514
--- /dev/null
+++ b/frontend/src/components/Dropdowns/DropdownDefault.tsx
@@ -0,0 +1,128 @@
+import { useEffect, useRef, useState } from "react";
+
+const DropdownDefault = () => {
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+
+ const trigger = useRef
+
+
+
+
+ + Visitors Analytics +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Desktop + 65% +
+
+
+
+
+
+ + Tablet + 34% +
+
+
+
+
+
+ + Mobile + 45% +
+
+
+
+
+
+ + Unknown + 12% +
+
+
+
+ );
+};
+
+export default DropdownDefault;
diff --git a/frontend/src/components/Header/DarkModeSwitcher.tsx b/frontend/src/components/Header/DarkModeSwitcher.tsx
new file mode 100644
index 0000000..3918fd3
--- /dev/null
+++ b/frontend/src/components/Header/DarkModeSwitcher.tsx
@@ -0,0 +1,65 @@
+import useColorMode from '../../hooks/useColorMode';
+
+const DarkModeSwitcher = () => {
+ const [colorMode, setColorMode] = useColorMode();
+
+ return (
+ setDropdownOpen(true)}
+ onBlur={() => setDropdownOpen(false)}
+ className={`absolute right-0 top-full z-40 w-40 space-y-1 rounded-sm border border-stroke bg-white p-1.5 shadow-default dark:border-strokedark dark:bg-boxdark ${
+ dropdownOpen === true ? 'block' : 'hidden'
+ }`}
+ >
+
+
+
+
+
+
+ {/* */}
+
+ {/* */}
+
+
+ 
+
+
+
+
+
+
+
+ -
+ {/* */}
+
+
+ ))};
+// let dataJSON: any;
+// let headers = new Headers();
+// headers.append('Access-Control-Allow-Origin', 'http://127.0.0.1:8000');
+// headers.append("Access-Control-Allow-Methods", 'POST');
+// headers.append("Access-Control-Allow-Headers", 'Content-Type, Authorization');
+// fetch("http://127.0.0.1:8000/data",{method:'POST',headers:headers})
+// .then(response => {
+// return response
+// })
+// .then(data => {
+// console.log(data);
+// dataJSON=data;
+// })
+const fireToast = () => {
+const alertSettings=localStorage.getItem("alertSettings");
+if (alertSettings){
+ for (const alertSetting of JSON.parse(alertSettings)) {
+ console.log(alertSetting);
+
+ const value=isNaN(parseFloat(alertSetting.value))?alertSetting.value:parseFloat(alertSetting.value);
+ const para=alertSetting.criterion<2?"delta_"+alertSetting.para:alertSetting.para;
+ if (alertSetting.id=="ALL"){
+ Object.keys(dataJSON).map((id:string)=>
+ {
+ const condition=alertSetting.criterion=='0'?value<=-1*dataJSON[id][para]:
+ alertSetting.criterion=='1'||alertSetting.criterion=='3'?value>=dataJSON[id][para]:
+ alertSetting.criterion=='2'?value<=dataJSON[id][para]:
+ value==dataJSON[id][para];
+ const realValue=alertSetting.criterion=='0'?dataJSON[id][para]*-1:dataJSON[id][para];
+ if (condition){
+ const msg=`${alertSetting.para} of ${id} ${alertSetting.criterion==0?"goes down by":alertSetting.criterion==1?"goes up by":alertSetting.criterion==2?"is smaller than":alertSetting.criterion==3?"is greater than":"is equal to"} ${realValue}`;
+ createToast(id,msg,alertSetting.type)
+ }
+
+
+ }
+
+ );
+ }
+ else{
+ const id=alertSetting.id;
+
+ const condition=alertSetting.criterion=='0'?value>=-1*dataJSON[id][para]:
+ alertSetting.criterion=='1'||alertSetting.criterion=='3'?value>=dataJSON[id][para]:
+ alertSetting.criterion=='2'?value<=dataJSON[id][para]:
+ value==dataJSON[id][para];
+ const realValue=alertSetting.criterion=='0'?dataJSON[id][para]*-1:dataJSON[id][para];
+
+ if (condition){
+ const msg=`${alertSetting.para} of ${id} ${alertSetting.criterion==0?"goes down by":alertSetting.criterion==1?"goes up by":alertSetting.criterion==2?"is smaller than":alertSetting.criterion==3?"is greater than":"is equal to"} ${realValue}`;
+ createToast(id,msg,alertSetting.type)
+ }
+ }
+ };
+ }
+}
+
+export default fireToast;
+
\ No newline at end of file
diff --git a/frontend/src/hooks/useColorMode.tsx b/frontend/src/hooks/useColorMode.tsx
new file mode 100644
index 0000000..02eaf8e
--- /dev/null
+++ b/frontend/src/hooks/useColorMode.tsx
@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import useLocalStorage from './useLocalStorage';
+
+const useColorMode = () => {
+ const [colorMode, setColorMode] = useLocalStorage('color-theme', 'light');
+
+ useEffect(() => {
+ const className = 'dark';
+ const bodyClass = window.document.body.classList;
+
+ colorMode === 'dark'
+ ? bodyClass.add(className)
+ : bodyClass.remove(className);
+ }, [colorMode]);
+
+ return [colorMode, setColorMode];
+};
+
+export default useColorMode;
diff --git a/frontend/src/hooks/useLocalStorage.tsx b/frontend/src/hooks/useLocalStorage.tsx
new file mode 100644
index 0000000..68492a8
--- /dev/null
+++ b/frontend/src/hooks/useLocalStorage.tsx
@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react';
+
+type SetValue
+
+
+
+
+
+
+ + {title} +
++ {msg} +
+
+
+
+
+
+
+ {/* */}
+
+ );
+};
+
+export default DefaultLayout;
diff --git a/frontend/src/lib.d.ts b/frontend/src/lib.d.ts
new file mode 100644
index 0000000..091d25e
--- /dev/null
+++ b/frontend/src/lib.d.ts
@@ -0,0 +1,4 @@
+declare module '*.svg' {
+ const content: any;
+ export default content;
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
new file mode 100644
index 0000000..551cead
--- /dev/null
+++ b/frontend/src/main.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter as Router } from 'react-router-dom';
+import App from './App';
+import './css/style.css';
+import 'jsvectormap/dist/css/jsvectormap.css';
+import 'flatpickr/dist/flatpickr.min.css';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+
+ {/* */}
+
+ {/* */}
+
+ {/* */}
+
+
+ {/* */}
+
+ {/* */}
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit + suspendisse. +
+ + + + +
+
+
+ Start for free
+
+ + Sign In to TailAdmin +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit + suspendisse. +
+ + + + +
+
+
+ Start for free
+
+ + Sign Up to TailAdmin +
+ + +
+ Camera here
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* */}
+
+
+
+ {/* */}
+
+
+
+
+
+ + Attention needed +
++ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy + text ever since the 1500s, when +
+
+
+ {/* */}
+
+
+
+
+
+ + Message Sent Successfully +
++ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. +
+
+
+
+
+
+
+
+ + There were 1 errors with your submission +
+-
+
- + Lorem Ipsum is simply dummy text of the printing + +
+
+
+ {/* */}
+
+
+
+ + Normal Button +
+
+
+
+
+ Button
+
+
+
+ Button
+
+
+
+ Button
+
+
+
+ Button
+
+
+
+
+
+ Button
+
+
+
+ Button
+
+
+
+ Button
+
+
+
+ Button
+
+
+
+
+
+ Button
+
+
+
+ Button
+
+
+
+ Button
+
+
+
+ Button
+
+
+
+
+
+
+
+ + Button With Icon +
+
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ Button With Icon
+
+
+