home page started #2
@@ -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",
|
||||
|
||||
+6
-1
@@ -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 (
|
||||
<div className="">
|
||||
<Routes>
|
||||
<Route path={siteLinks.home} element={<HomePage />} />
|
||||
<Route path={siteLinks.login} element={<LoginPage />} />
|
||||
<Route path={siteLinks.signup} element={<SignupPage />} />
|
||||
<Route path={siteLinks.error} element={<ForgetpwdPage />} />
|
||||
|
||||
{/* protected routes */}
|
||||
<Route element={<UserExist />}>
|
||||
<Route path={siteLinks.home} element={<HomePage />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
import React, { Children } from 'react'
|
||||
|
||||
export default function CardContainer({children}) {
|
||||
return (
|
||||
<div className='w-full h-full py-4 flex flex-col gap-1 rounded-sm shadow-shadow_round bg-white'>{children}</div>
|
||||
)
|
||||
}
|
||||
@@ -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 ?
|
||||
<MainLoader />
|
||||
:
|
||||
<Outlet />
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -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 (
|
||||
<div className='w-full py-4 flex justify-between items-center'>
|
||||
<h1 className='text-3xl text-black font-semibold'>{title}</h1>
|
||||
<div className='flex gap-2 items-center text-black-gray text-base'>
|
||||
<TiHomeOutline />
|
||||
{paths.map((item, index) => (
|
||||
<>
|
||||
<MdKeyboardDoubleArrowRight />
|
||||
<p className={`${index + 1 == paths.length ? 'text-primary' : ''}`}>{item}</p>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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 (
|
||||
<ReactApexChart {...options} type="area" height={'60%'} className='w-full' />
|
||||
)
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="p-10 flex flex-col justify-center items-center gap-8">
|
||||
|
||||
<Link className='w-full block text-left' to={siteLinks.login}>Logout</Link>
|
||||
|
||||
<BreadcrumbCom title={'Home'} paths={['Dashboard', 'Home']} />
|
||||
<div className='w-full grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-8'>
|
||||
<div className='w-full'>
|
||||
<CardContainer>
|
||||
<div className='px-4 flex justify-between items-center'>
|
||||
<div className='flex flex-col gap-1'>
|
||||
<h1 className='text-black text-3xl font-semibold'>52%</h1>
|
||||
<p className='text-black-gray font-medium text-10'>Past 12 hours</p>
|
||||
</div>
|
||||
<div className='flex flex-col gap-1'>
|
||||
<h1 className='text-black-gray text-12 font-semibold'>Revenues</h1>
|
||||
<p className='text-black-gray font-medium text-10 flex gap-2'><span><FaArrowUp /></span> <span>5.35%</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<AreaChart />
|
||||
</CardContainer>
|
||||
</div>
|
||||
<div className='w-full'>
|
||||
<CardContainer>
|
||||
<div className='px-4 flex justify-between items-center'>
|
||||
<div className='flex flex-col gap-1'>
|
||||
<h1 className='text-black text-3xl font-semibold'>52%</h1>
|
||||
<p className='text-black-gray font-medium text-10'>Past 12 hours</p>
|
||||
</div>
|
||||
<div className='flex flex-col gap-1'>
|
||||
<h1 className='text-black-gray text-12 font-semibold'>Conversion Rate</h1>
|
||||
<p className='text-black-gray font-medium text-10 flex gap-2'><span><FaArrowUp /></span> <span>5.35%</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<AreaChart />
|
||||
</CardContainer>
|
||||
</div>
|
||||
<div className='w-full'>
|
||||
<CardContainer>
|
||||
<div className='px-4 flex justify-between items-center'>
|
||||
<div className='flex flex-col gap-1'>
|
||||
<h1 className='text-black text-3xl font-semibold'>52%</h1>
|
||||
<p className='text-black-gray font-medium text-10'>Past 12 hours</p>
|
||||
</div>
|
||||
<div className='flex flex-col gap-1'>
|
||||
<h1 className='text-black-gray text-12 font-semibold'>Transaction</h1>
|
||||
<p className='text-black-gray font-medium text-10 flex gap-2'><span><FaArrowUp /></span> <span>5.35%</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<AreaChart />
|
||||
</CardContainer>
|
||||
</div>
|
||||
<div className='w-full'>
|
||||
<CardContainer>
|
||||
<div className='px-4 flex justify-between items-center'>
|
||||
<div className='flex flex-col gap-1'>
|
||||
<h1 className='text-black text-3xl font-semibold'>52%</h1>
|
||||
<p className='text-black-gray font-medium text-10'>Past 12 hours</p>
|
||||
</div>
|
||||
<div className='flex flex-col gap-1'>
|
||||
<h1 className='text-black-gray text-12 font-semibold'>Purchases</h1>
|
||||
<p className='text-black-gray font-medium text-10 flex gap-2'><span><FaArrowUp /></span> <span>5.35%</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<AreaChart />
|
||||
</CardContainer>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* top selling */}
|
||||
<div className='w-full grid grid-cols-1 xl:grid-cols-9 gap-8'>
|
||||
<div className='w-full col-span-1 xl:col-span-6'>
|
||||
<CardContainer>
|
||||
<div className='px-4 pb-4 flex justify-between items-center border-b'>
|
||||
<div className='flex justify-between'>
|
||||
<h1 className='text-black text-lg font-semibold'>Top Selling Products</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className='px-4 h-[350px]'></div>
|
||||
</CardContainer>
|
||||
</div>
|
||||
<div className='w-full col-span-1 xl:col-span-3'>
|
||||
<CardContainer>
|
||||
<div className='px-4 pb-4 flex justify-between items-center border-b'>
|
||||
<div className='flex justify-between'>
|
||||
<h1 className='text-black text-lg font-semibold'>Lifetime sales</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className='px-4 h-[350px]'></div>
|
||||
</CardContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* yearly sells */}
|
||||
<div className='w-full grid grid-cols-1 xl:grid-cols-2 gap-8'>
|
||||
<div className='w-full'>
|
||||
<CardContainer>
|
||||
<div className='px-4 pb-4 flex justify-between items-center border-b'>
|
||||
<div className='flex justify-between'>
|
||||
<h1 className='text-black text-lg font-semibold'>Yearly Sales Report</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-[350px]'></div>
|
||||
</CardContainer>
|
||||
</div>
|
||||
<div className='w-full'>
|
||||
<CardContainer>
|
||||
<div className='px-4 pb-4 flex justify-between items-center border-b'>
|
||||
<div className='flex justify-between'>
|
||||
<h1 className='text-black text-lg font-semibold'>Invoices Status</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-[350px]'></div>
|
||||
</CardContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* conversion */}
|
||||
<div className='w-full grid grid-cols-1 xl:grid-cols-3 gap-8'>
|
||||
<div className='w-full'>
|
||||
<CardContainer>
|
||||
<div className='px-4 pb-4 flex justify-between items-center border-b'>
|
||||
<div className='flex justify-between'>
|
||||
<h1 className='text-black text-lg font-semibold'>Conversion Visualizer</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-[350px]'></div>
|
||||
</CardContainer>
|
||||
</div>
|
||||
<div className='w-full'>
|
||||
<CardContainer>
|
||||
<div className='px-4 pb-4 flex justify-between items-center border-b'>
|
||||
<div className='flex justify-between'>
|
||||
<h1 className='text-black text-lg font-semibold'>Best selling product</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-[350px]'></div>
|
||||
</CardContainer>
|
||||
</div>
|
||||
<div className='w-full'>
|
||||
<CardContainer>
|
||||
<div className='px-4 pb-4 flex justify-between items-center border-b'>
|
||||
<div className='flex justify-between'>
|
||||
<h1 className='text-black text-lg font-semibold'>Sales overview</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-[350px]'></div>
|
||||
</CardContainer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -4,8 +4,8 @@ import Loader from '../../assets/loader/loader.svg'
|
||||
export default function MainLoader() {
|
||||
return (
|
||||
|
||||
<div className="vh-100 d-flex justify-content-center">
|
||||
<div className="align-self-center">
|
||||
<div className="h-screen flex justify-center">
|
||||
<div className="self-center">
|
||||
<img src={Loader} alt="loader" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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 <div className="samatze">Merms Panel Home <Link to={siteLinks.login}>Logout</Link> </div>;
|
||||
return <Home />
|
||||
}
|
||||
@@ -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)'
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user