+
+ );
+};
+
+export default BarChart;
diff --git a/src/client/admin/components/Breadcrumb.tsx b/src/client/admin/components/Breadcrumb.tsx
new file mode 100644
index 0000000..3e3a613
--- /dev/null
+++ b/src/client/admin/components/Breadcrumb.tsx
@@ -0,0 +1,24 @@
+import { Link } from 'react-router-dom';
+interface BreadcrumbProps {
+ pageName: string;
+}
+const Breadcrumb = ({ pageName }: BreadcrumbProps) => {
+ return (
+
+
+
+ + Visitors Analytics +
+
+
+
+
+
+
+ );
+};
+
+export default Breadcrumb;
diff --git a/src/client/admin/components/CheckboxOne.tsx b/src/client/admin/components/CheckboxOne.tsx
new file mode 100644
index 0000000..138d413
--- /dev/null
+++ b/src/client/admin/components/CheckboxOne.tsx
@@ -0,0 +1,41 @@
+import { useState } from 'react';
+
+const CheckboxOne = () => {
+ const [isChecked, setIsChecked] = useState+ {pageName} +
+ + +
+
+
+ );
+};
+
+export default CheckboxOne;
diff --git a/src/client/admin/components/CheckboxTwo.tsx b/src/client/admin/components/CheckboxTwo.tsx
new file mode 100644
index 0000000..c9988b3
--- /dev/null
+++ b/src/client/admin/components/CheckboxTwo.tsx
@@ -0,0 +1,50 @@
+import { useState } from 'react';
+
+const CheckboxTwo = () => {
+ const [isChecked, setIsChecked] = useState
+
+
+ );
+};
+
+export default CheckboxTwo;
diff --git a/src/client/admin/components/DailyActiveUsersChart.tsx b/src/client/admin/components/DailyActiveUsersChart.tsx
new file mode 100644
index 0000000..93085ea
--- /dev/null
+++ b/src/client/admin/components/DailyActiveUsersChart.tsx
@@ -0,0 +1,192 @@
+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: [
+ 'Sep',
+ 'Oct',
+ 'Nov',
+ 'Dec',
+ 'Jan',
+ 'Feb',
+ 'Mar',
+ 'Apr',
+ 'May',
+ 'Jun',
+ 'Jul',
+ 'Aug',
+ ],
+ axisBorder: {
+ show: false,
+ },
+ axisTicks: {
+ show: false,
+ },
+ },
+ yaxis: {
+ title: {
+ style: {
+ fontSize: '0px',
+ },
+ },
+ min: 0,
+ max: 100,
+ },
+};
+
+interface ChartOneState {
+ series: {
+ name: string;
+ data: number[];
+ }[];
+}
+
+const DailyActiveUsersChart: React.FC = () => {
+ const [state, setState] = useState
+
+ );
+};
+
+export default DailyActiveUsersChart;
diff --git a/src/client/admin/components/DarkModeSwitcher.tsx b/src/client/admin/components/DarkModeSwitcher.tsx
new file mode 100644
index 0000000..3918fd3
--- /dev/null
+++ b/src/client/admin/components/DarkModeSwitcher.tsx
@@ -0,0 +1,65 @@
+import useColorMode from '../../hooks/useColorMode';
+
+const DarkModeSwitcher = () => {
+ const [colorMode, setColorMode] = useColorMode();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ Total Revenue
+12.04.2022 - 12.05.2022
+
+
+
+
+
+
+
+ Total Sales
+12.04.2022 - 12.05.2022
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default DataStats;
diff --git a/src/client/admin/components/DropdownEditDelete.tsx b/src/client/admin/components/DropdownEditDelete.tsx
new file mode 100644
index 0000000..d31fe8a
--- /dev/null
+++ b/src/client/admin/components/DropdownEditDelete.tsx
@@ -0,0 +1,123 @@
+import { useEffect, useRef, useState } from "react";
+
+const DropdownDefault = () => {
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+
+ const trigger = useRef
+
+
+
+
+
+ + $4,350 +
+Unique Visitors
+
+
+ 18%
+
+
+
+
+
+ + 55.9K +
+Total Pageviews
+
+
+ 25%
+
+
+
+
+
+ + 54% +
+Bounce Rate
+
+
+ 7%
+
+
+
+
+
+ + 2m 56s +
+Visit Duration
+
+
+ 12%
+
+
+
+
+ );
+};
+
+export default DropdownDefault;
diff --git a/src/client/admin/components/DropdownMessage.tsx b/src/client/admin/components/DropdownMessage.tsx
new file mode 100644
index 0000000..ceee6e6
--- /dev/null
+++ b/src/client/admin/components/DropdownMessage.tsx
@@ -0,0 +1,48 @@
+// import { useEffect, useRef, useState } from 'react';
+import { Link } from 'react-router-dom';
+
+const DropdownMessage = () => {
+
+
+ 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"
+ }`}
+ >
+
+
+
+
+ setDropdownOpen(!dropdownOpen)}
+ className="flex items-center gap-4"
+ to="#"
+ >
+
+
+ Thomas Anree
+
+ UX Designer
+
+
+
+ 
+
+
+
+
+
+ {/* */}
+
+ );
+};
+
+export default DropdownUser;
diff --git a/src/client/admin/components/Header.tsx b/src/client/admin/components/Header.tsx
new file mode 100644
index 0000000..0f8b297
--- /dev/null
+++ b/src/client/admin/components/Header.tsx
@@ -0,0 +1,119 @@
+import { Link } from 'react-router-dom';
+import Logo from '../images/logo/logo-icon.svg';
+import DarkModeSwitcher from './DarkModeSwitcher';
+import DropdownMessage from './DropdownMessage';
+import DropdownUser from './DropdownUser';
+
+const Header = (props: {
+ sidebarOpen: string | boolean | undefined;
+ setSidebarOpen: (arg0: boolean) => void;
+}) => {
+ return (
+ setDropdownOpen(true)}
+ onBlur={() => setDropdownOpen(false)}
+ className={`absolute right-0 mt-4 flex w-62.5 flex-col rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark ${
+ dropdownOpen === true ? 'block' : 'hidden'
+ }`}
+ >
+
+ {/* */}
+ -
+
- + + + Account Settings + + +
+
+
+ {/* */}
+
+ {/* */}
+
+
+ 
+
+
+
+
+
+
+
+
+
+ -
+ {/* */}
+
+
+ );
+};
+
+export default PieChart;
diff --git a/src/client/admin/components/ReferrerTable.tsx b/src/client/admin/components/ReferrerTable.tsx
new file mode 100644
index 0000000..cd8009b
--- /dev/null
+++ b/src/client/admin/components/ReferrerTable.tsx
@@ -0,0 +1,176 @@
+import BrandOne from '../images/brand/brand-01.svg';
+import BrandTwo from '../images/brand/brand-02.svg';
+import BrandThree from '../images/brand/brand-03.svg';
+import BrandFour from '../images/brand/brand-04.svg';
+import BrandFive from '../images/brand/brand-05.svg';
+
+const ReferrerTable = () => {
+ return (
+
+
+
+
+
+ + Visitors Analytics +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Desktop + 65% +
+
+
+
+
+
+ + Tablet + 34% +
+
+
+
+
+
+ + Mobile + 45% +
+
+
+
+
+
+ + Unknown + 12% +
+
+
+ );
+};
+
+export default ReferrerTable;
diff --git a/src/client/admin/components/Sidebar.tsx b/src/client/admin/components/Sidebar.tsx
new file mode 100644
index 0000000..ca28b0d
--- /dev/null
+++ b/src/client/admin/components/Sidebar.tsx
@@ -0,0 +1,529 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+import Logo from '../../static/logo.png';
+import SidebarLinkGroup from './SidebarLinkGroup';
+
+interface SidebarProps {
+ sidebarOpen: boolean;
+ setSidebarOpen: (arg: boolean) => void;
+}
+
+const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
+ const location = useLocation();
+ const { pathname } = location;
+
+ const trigger = useRef+ Top Channels +
+ +
+
+
+
+
+
+
+ + Source +
+
+
+ + Visitors +
+
+
+ + Revenues +
+
+
+ + Sales +
+
+
+ + Conversion +
+
+
+
+
+ Google
+
+
+
+ 
+
+
+
+
+ 3.5K
+
+
+
+ $5,768
+
+
+
+ 590
+
+
+ 4.8%
+
+
+
+
+
+
+
+ 
+
+ + Twitter +
+
+
+
+ 2.2K
+
+
+
+ $4,635
+
+
+
+ 467
+
+
+ 4.3%
+
+
+
+
+
+
+
+ 
+
+ Github
+
+
+
+ 2.1K
+
+
+
+ $4,290
+
+
+
+ 420
+
+
+ 3.7%
+
+
+
+
+
+
+
+ 
+
+ Vimeo
+
+
+
+ 1.5K
+
+
+
+ $3,580
+
+
+
+ 389
+
+
+ 2.5%
+
+
+
+
+
+
+ 
+
+ + Facebook +
+
+
+
+ 1.2K
+
+
+
+ $2,740
+
+
+
+ 230
+
+
+ 1.9%
+
+
+
+ );
+};
+
+export default SwitcherOne;
diff --git a/src/client/admin/components/SwitcherTwo.tsx b/src/client/admin/components/SwitcherTwo.tsx
new file mode 100644
index 0000000..9ede1db
--- /dev/null
+++ b/src/client/admin/components/SwitcherTwo.tsx
@@ -0,0 +1,66 @@
+import { useState } from 'react';
+
+const SwitcherTwo = () => {
+ const [enabled, setEnabled] = useState(false);
+
+ return (
+
+
+
+ );
+};
+
+export default SwitcherTwo;
diff --git a/src/client/admin/components/TotalPaidViewsCard.tsx b/src/client/admin/components/TotalPaidViewsCard.tsx
new file mode 100644
index 0000000..eb7cd7c
--- /dev/null
+++ b/src/client/admin/components/TotalPaidViewsCard.tsx
@@ -0,0 +1,53 @@
+const TotalPageViewsCard = () => {
+ return (
+
+
+ );
+};
+
+export default TotalPageViewsCard;
diff --git a/src/client/admin/components/TotalPayingUsersCard.tsx b/src/client/admin/components/TotalPayingUsersCard.tsx
new file mode 100644
index 0000000..082e735
--- /dev/null
+++ b/src/client/admin/components/TotalPayingUsersCard.tsx
@@ -0,0 +1,53 @@
+const TotalPayingUsersCard = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ 0.43%
+
+
+ + $3.456K +
+ Total views +
+
+ );
+};
+
+export default TotalPayingUsersCard;
diff --git a/src/client/admin/components/TotalProfitCard.tsx b/src/client/admin/components/TotalProfitCard.tsx
new file mode 100644
index 0000000..337dd62
--- /dev/null
+++ b/src/client/admin/components/TotalProfitCard.tsx
@@ -0,0 +1,57 @@
+const TotalProfitCard = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ 2.59%
+
+
+ + 2.450 +
+ Total Product +
+
+ );
+};
+
+export default TotalProfitCard;
diff --git a/src/client/admin/components/TotalSignupsCard.tsx b/src/client/admin/components/TotalSignupsCard.tsx
new file mode 100644
index 0000000..d60191b
--- /dev/null
+++ b/src/client/admin/components/TotalSignupsCard.tsx
@@ -0,0 +1,57 @@
+const TotalSignupsCard = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ 4.35%
+
+
+ + $45,2K +
+ Total Profit +
+
+ );
+};
+
+export default TotalSignupsCard;
diff --git a/src/client/admin/components/UsersTable.tsx b/src/client/admin/components/UsersTable.tsx
new file mode 100644
index 0000000..42f5209
--- /dev/null
+++ b/src/client/admin/components/UsersTable.tsx
@@ -0,0 +1,62 @@
+import SwitcherOne from "./SwitcherOne";
+import DropdownEditDelete from "./DropdownEditDelete";
+
+const UsersTable = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ 0.95%
+
+
+ + 3.456 +
+ Total Users +
+
+ );
+};
+
+export default UsersTable;
diff --git a/src/client/admin/fonts/Satoshi-Black.eot b/src/client/admin/fonts/Satoshi-Black.eot
new file mode 100644
index 0000000000000000000000000000000000000000..11747f362ab2511dd102ce6f794ab9d566adbbef
GIT binary patch
literal 73352
zcmc${2Yggj`Zs>hoisv7NGE+tCcRHfCn1Fp2!u`ogc5oUEmR>Oq5>iyQUXfAhO8o@
zYj3-Yis-7Vs907|+5NfdT2WUeci!)F?!A*~LH7N<|Ia^gGn1Kn&v~BbJm)#jdD^)t
zkqPG$n7{;4aQ$JzW(|EZtZ}d)bTFqcZxaM9{W<$#%O9OSR^G-6qlIb0a$&KsOqe6g
z#jS&c1^A>@n2$Sxg;ByxVYaY>f3_5##0ul^$x_@s7tbuh{RKjfkjMWCLZC1U&o02X
zGv)RPkPx9m&
+
+
+ + Users +
+
+
+
+
+ Email
+
+
+
+ Last Active
+
+
+ Has Paid
+
+
+ Subscription Status
+
+
+
+ Total Paid
+
+
+
+
+
+
+ + Apple Watch Series 7 +
+
+
+ Electronics
+
+
+
+
+
+ 22
+
+
+ $45
+
+
+