78 lines
3.0 KiB
JavaScript
78 lines
3.0 KiB
JavaScript
import DashboardStats from './components/DashboardStats'
|
|
import AmountStats from './components/AmountStats'
|
|
import PageStats from '@/Components/features/dashboard/components/PageStats'
|
|
|
|
import UserGroupIcon from '@heroicons/react/24/outline/UserGroupIcon'
|
|
import UsersIcon from '@heroicons/react/24/outline/UsersIcon'
|
|
import CircleStackIcon from '@heroicons/react/24/outline/CircleStackIcon'
|
|
import CreditCardIcon from '@heroicons/react/24/outline/CreditCardIcon'
|
|
import UserChannels from './components/UserChannels'
|
|
import LineChart from './components/LineChart'
|
|
import BarChart from './components/BarChart'
|
|
import DashboardTopBar from './components/DashboardTopBar'
|
|
import { useDispatch } from 'react-redux'
|
|
import { showNotification } from '../common/headerSlice'
|
|
import DoughnutChart from './components/DoughnutChart'
|
|
import { useState } from 'react'
|
|
|
|
const statsData = [
|
|
{ title: "New Users", value: "34.7k", icon: <UserGroupIcon className='w-8 h-8' />, description: "↗︎ 2300 (22%)" },
|
|
{ title: "Total Sales", value: "$34,545", icon: <CreditCardIcon className='w-8 h-8' />, description: "Current month" },
|
|
{ title: "Pending Leads", value: "450", icon: <CircleStackIcon className='w-8 h-8' />, description: "50 in hot leads" },
|
|
{ title: "Active Users", value: "5.6k", icon: <UsersIcon className='w-8 h-8' />, description: "↙ 300 (18%)" },
|
|
]
|
|
|
|
|
|
|
|
function Dashboard() {
|
|
|
|
const dispatch = useDispatch()
|
|
|
|
|
|
const updateDashboardPeriod = (newRange) => {
|
|
// Dashboard range changed, write code to refresh your values
|
|
dispatch(showNotification({ message: `Period updated to ${newRange.startDate} to ${newRange.endDate}`, status: 1 }))
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{/** ---------------------- Select Period Content ------------------------- */}
|
|
<DashboardTopBar updateDashboardPeriod={updateDashboardPeriod} />
|
|
|
|
{/** ---------------------- Different stats content 1 ------------------------- */}
|
|
<div className="grid lg:grid-cols-4 mt-2 md:grid-cols-2 grid-cols-1 gap-6">
|
|
{
|
|
statsData.map((d, k) => {
|
|
return (
|
|
<DashboardStats key={k} {...d} colorIndex={k} />
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
|
|
|
|
|
|
{/** ---------------------- Different charts ------------------------- */}
|
|
<div className="grid lg:grid-cols-2 mt-4 grid-cols-1 gap-6">
|
|
<LineChart />
|
|
<BarChart />
|
|
</div>
|
|
|
|
{/** ---------------------- Different stats content 2 ------------------------- */}
|
|
|
|
<div className="grid lg:grid-cols-2 mt-10 grid-cols-1 gap-6">
|
|
<AmountStats />
|
|
<PageStats />
|
|
</div>
|
|
|
|
{/** ---------------------- User source channels table ------------------------- */}
|
|
|
|
<div className="grid lg:grid-cols-2 mt-4 grid-cols-1 gap-6">
|
|
<UserChannels />
|
|
<DoughnutChart />
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Dashboard |