From d5a0430b42f0e67cf618a7ae2b430a92779fcb85 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Thu, 5 Dec 2024 11:57:05 +0100 Subject: [PATCH] home page started --- package.json | 2 + src/App.js | 7 +- src/component/CardContainer.jsx | 7 + src/component/authorization/UserExist.jsx | 26 ++++ src/component/breadcrumb/BreadcrumbCom.jsx | 20 +++ src/component/charts/AreaChart.jsx | 47 ++++++ src/component/home/Home.jsx | 163 +++++++++++++++++++++ src/component/loaders/MainLoader.jsx | 4 +- src/views/HomePage.js | 6 +- tailwind.config.js | 3 + 10 files changed, 278 insertions(+), 7 deletions(-) create mode 100644 src/component/CardContainer.jsx create mode 100644 src/component/authorization/UserExist.jsx create mode 100644 src/component/breadcrumb/BreadcrumbCom.jsx create mode 100644 src/component/charts/AreaChart.jsx create mode 100644 src/component/home/Home.jsx diff --git a/package.json b/package.json index e935fa2..c3146a3 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,9 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "apexcharts": "^4.1.0", "react": "^18.3.1", + "react-apexcharts": "^1.7.0", "react-dom": "^18.3.1", "react-icons": "^5.4.0", "react-router-dom": "^7.0.2", diff --git a/src/App.js b/src/App.js index d263ed6..b2f1b0e 100644 --- a/src/App.js +++ b/src/App.js @@ -6,6 +6,7 @@ import siteLinks from './links/siteLinks'; import HomePage from './views/HomePage'; import SignupPage from './views/SignupPage'; import ForgetpwdPage from './views/ForgetpwdPage'; +import UserExist from './component/authorization/UserExist'; @@ -13,10 +14,14 @@ function App() { return (
- } /> } /> } /> } /> + + {/* protected routes */} + }> + } /> +
); diff --git a/src/component/CardContainer.jsx b/src/component/CardContainer.jsx new file mode 100644 index 0000000..38365a4 --- /dev/null +++ b/src/component/CardContainer.jsx @@ -0,0 +1,7 @@ +import React, { Children } from 'react' + +export default function CardContainer({children}) { + return ( +
{children}
+ ) +} diff --git a/src/component/authorization/UserExist.jsx b/src/component/authorization/UserExist.jsx new file mode 100644 index 0000000..813a938 --- /dev/null +++ b/src/component/authorization/UserExist.jsx @@ -0,0 +1,26 @@ +import React, { useEffect, useState } from 'react' +import { Outlet } from 'react-router-dom' +import MainLoader from '../loaders/MainLoader' + +export default function UserExist() { + + const [loading, setLoading] = useState(true) + + useEffect(()=>{ + const timer = setTimeout(()=>{ + setLoading(false) + },1000) + + return () => clearTimeout(timer) + },[]) + + return ( + <> + {loading ? + + : + + } + + ) +} diff --git a/src/component/breadcrumb/BreadcrumbCom.jsx b/src/component/breadcrumb/BreadcrumbCom.jsx new file mode 100644 index 0000000..e39b063 --- /dev/null +++ b/src/component/breadcrumb/BreadcrumbCom.jsx @@ -0,0 +1,20 @@ +import React from 'react' +import { MdKeyboardDoubleArrowRight } from 'react-icons/md' +import { TiHomeOutline } from 'react-icons/ti' + +export default function BreadcrumbCom({title, paths}) { + return ( +
+

{title}

+
+ + {paths.map((item, index) => ( + <> + +

{item}

+ + ))} +
+
+ ) +} diff --git a/src/component/charts/AreaChart.jsx b/src/component/charts/AreaChart.jsx new file mode 100644 index 0000000..293ca44 --- /dev/null +++ b/src/component/charts/AreaChart.jsx @@ -0,0 +1,47 @@ +import React from 'react' +import ReactApexChart from 'react-apexcharts'; + +export default function AreaChart() { + + var options = { + series: [{ + name: 'value', + data: [31, 40, 28, 51, 42, 109, 100] + }, + // { + // name: 'series2', + // data: [11, 32, 45, 32, 34, 52, 41] + // } + ], + options:{ + chart: { + height: 350, + type: 'area', + zoom: { + enabled: false + } + }, + dataLabels: { + enabled: false + }, + stroke: { + curve: 'smooth' + }, + xaxis: { + // type: 'datetime', + // categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"] + type: 'text', + categories: ["mon", "tues", "wed", "thur", "fri", "sat", "sun"] + }, + // tooltip: { + // x: { + // format: 'dd/MM/yy HH:mm' + // }, + // }, + } + }; + + return ( + + ) +} diff --git a/src/component/home/Home.jsx b/src/component/home/Home.jsx new file mode 100644 index 0000000..3aa621a --- /dev/null +++ b/src/component/home/Home.jsx @@ -0,0 +1,163 @@ +import React from 'react' +import { Link } from 'react-router-dom' +import siteLinks from '../../links/siteLinks' +import AreaChart from '../charts/AreaChart' +import CardContainer from '../CardContainer' +import { FaArrowUp } from 'react-icons/fa' +import BreadcrumbCom from '../breadcrumb/BreadcrumbCom' + +export default function Home() { + return ( +
+ + Logout + + +
+
+ +
+
+

52%

+

Past 12 hours

+
+
+

Revenues

+

5.35%

+
+
+ + +
+
+ +
+
+

52%

+

Past 12 hours

+
+
+

Conversion Rate

+

5.35%

+
+
+ + +
+
+ +
+
+

52%

+

Past 12 hours

+
+
+

Transaction

+

5.35%

+
+
+ + +
+
+ +
+
+

52%

+

Past 12 hours

+
+
+

Purchases

+

5.35%

+
+
+ + +
+ +
+ + {/* top selling */} +
+
+ +
+
+

Top Selling Products

+
+
+
+ +
+
+ +
+
+

Lifetime sales

+
+
+
+ +
+
+ + {/* yearly sells */} +
+
+ +
+
+

Yearly Sales Report

+
+
+
+ +
+
+ +
+
+

Invoices Status

+
+
+
+ +
+
+ + {/* conversion */} +
+
+ +
+
+

Conversion Visualizer

+
+
+
+ +
+
+ +
+
+

Best selling product

+
+
+
+ +
+
+ +
+
+

Sales overview

+
+
+
+ +
+
+
+ ) +} diff --git a/src/component/loaders/MainLoader.jsx b/src/component/loaders/MainLoader.jsx index 94f2790..40e6037 100644 --- a/src/component/loaders/MainLoader.jsx +++ b/src/component/loaders/MainLoader.jsx @@ -4,8 +4,8 @@ import Loader from '../../assets/loader/loader.svg' export default function MainLoader() { return ( -
-
+
+
loader
diff --git a/src/views/HomePage.js b/src/views/HomePage.js index d2e23c9..e55a2ef 100644 --- a/src/views/HomePage.js +++ b/src/views/HomePage.js @@ -1,9 +1,7 @@ -import { Link } from 'react-router-dom'; -import siteLinks from '../links/siteLinks'; -import '../css/App.css'; +import Home from '../component/home/Home'; export default function HomePage(){ - return
Merms Panel Home Logout
; + return } \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 094094e..3565a4f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -30,6 +30,9 @@ export default { }, backgroundImage: { login_gradient: 'linear-gradient(to right, #8e54e9 0, #4776e6 100%)' + }, + boxShadow: { + shadow_round: '0 0px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.19)' } }, },