216 lines
10 KiB
JavaScript
216 lines
10 KiB
JavaScript
import React from 'react';
|
|
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ArcElement } from 'chart.js';
|
|
import { Bar, Doughnut } from 'react-chartjs-2';
|
|
import { Head } from '@inertiajs/react';
|
|
import { useEffect } from 'react';
|
|
import { useDispatch } from 'react-redux';
|
|
import { setPageTitle } from '@/Components/features/common/headerSlice';
|
|
import Squares2X2Icon from '@heroicons/react/24/outline/Squares2X2Icon'
|
|
|
|
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ArcElement);
|
|
|
|
const Dashboard = () => {
|
|
const barChartData = {
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
|
|
datasets: [
|
|
{
|
|
label: 'CHN',
|
|
data: [12, 19, 8, 15, 12, 8, 16, 20, 15, 14],
|
|
backgroundColor: 'rgb(196, 151, 239)',
|
|
},
|
|
{
|
|
label: 'USA',
|
|
data: [19, 12, 15, 8, 9, 16, 14, 12, 10, 15],
|
|
backgroundColor: 'rgb(86, 207, 225)',
|
|
},
|
|
{
|
|
label: 'UK',
|
|
data: [15, 15, 10, 12, 20, 14, 8, 16, 10, 18],
|
|
backgroundColor: 'rgb(255, 170, 145)',
|
|
},
|
|
],
|
|
};
|
|
|
|
const doughnutChartData = {
|
|
labels: ['Social Media', 'Direct', 'Email', 'Organic'],
|
|
datasets: [
|
|
{
|
|
data: [35, 30, 15, 20],
|
|
backgroundColor: [
|
|
'rgb(255, 99, 132)',
|
|
'rgb(54, 162, 235)',
|
|
'rgb(153, 102, 255)',
|
|
'rgb(75, 192, 192)',
|
|
],
|
|
borderWidth: 0,
|
|
},
|
|
],
|
|
};
|
|
|
|
const barChartOptions = {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
},
|
|
},
|
|
scales: {
|
|
x: {
|
|
grid: {
|
|
display: false,
|
|
},
|
|
},
|
|
y: {
|
|
grid: {
|
|
display: false,
|
|
},
|
|
ticks: {
|
|
display: false,
|
|
},
|
|
},
|
|
},
|
|
maintainAspectRatio: false,
|
|
};
|
|
|
|
const doughnutChartOptions = {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
},
|
|
},
|
|
cutout: '70%',
|
|
maintainAspectRatio: false,
|
|
};
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
useEffect(() => {
|
|
dispatch(setPageTitle("Dashboard"));
|
|
}, [dispatch]);
|
|
|
|
return (
|
|
<div className="card bg-base-100 shadow-xl">
|
|
<Head title="Dashboard" />
|
|
<div className="card-body">
|
|
<div className="flex items-center mb-6">
|
|
<div className="bg-gradient-to-tr from-blue-400 to-blue-600 p-3 rounded-lg mr-3">
|
|
<Squares2X2Icon className="h-6 w-6 text-white" />
|
|
</div>
|
|
<h1 className="text-2xl font-bold">Dashboard</h1>
|
|
<div className="ml-auto">
|
|
<span className="text-gray-700">Overview</span>
|
|
<span className="ml-2 text-gray-500">
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
|
<div className="rounded-lg overflow-hidden bg-gradient-to-r from-orange-300 to-pink-400 text-white p-6">
|
|
<div className="flex justify-between">
|
|
<div>
|
|
<p className="text-xl font-medium mb-4">Weekly Sales</p>
|
|
<p className="text-4xl font-bold mb-6">$ 15,0000</p>
|
|
<p>Increased by 60%</p>
|
|
</div>
|
|
<div>
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10 text-white opacity-80" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-lg overflow-hidden bg-gradient-to-r from-blue-300 to-blue-500 text-white p-6">
|
|
<div className="flex justify-between">
|
|
<div>
|
|
<p className="text-xl font-medium mb-4">Weekly Orders</p>
|
|
<p className="text-4xl font-bold mb-6">45,6334</p>
|
|
<p>Decreased by 10%</p>
|
|
</div>
|
|
<div>
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10 text-white opacity-80" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-lg overflow-hidden bg-gradient-to-r from-green-300 to-teal-500 text-white p-6">
|
|
<div className="flex justify-between">
|
|
<div>
|
|
<p className="text-xl font-medium mb-4">Visitors Online</p>
|
|
<p className="text-4xl font-bold mb-6">95,5741</p>
|
|
<p>Increased by 5%</p>
|
|
</div>
|
|
<div>
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10 text-white opacity-80" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12l-1.25-1.25M12 20l1.25-1.25M4 12l1.25 1.25M12 4l-1.25 1.25M20 12h-2M12 20v-2M4 12h2M12 4v2" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
<div className=" rounded-lg p-6 shadow">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h2 className="text-xl font-bold">Visit And Sales Statistics</h2>
|
|
<div className="flex space-x-4">
|
|
<div className="flex items-center">
|
|
<span className="h-3 w-3 rounded-full bg-purple-400 mr-1"></span>
|
|
<span className="text-gray-500 text-sm">CHN</span>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<span className="h-3 w-3 rounded-full bg-cyan-400 mr-1"></span>
|
|
<span className="text-gray-500 text-sm">USA</span>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<span className="h-3 w-3 rounded-full bg-orange-300 mr-1"></span>
|
|
<span className="text-gray-500 text-sm">UK</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="h-64">
|
|
<Bar data={barChartData} options={barChartOptions} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-lg p-6 shadow">
|
|
<div className="mb-6">
|
|
<h2 className="text-xl font-bold">Traffic Sources</h2>
|
|
</div>
|
|
<div className="flex justify-center">
|
|
<div className="h-64 w-64">
|
|
<Doughnut data={doughnutChartData} options={doughnutChartOptions} />
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 mt-6">
|
|
<div className="flex items-center justify-center">
|
|
<span className="h-3 w-3 rounded-full bg-pink-400 mr-2"></span>
|
|
<span className="text-gray-700 text-sm">Social Media</span>
|
|
</div>
|
|
<div className="flex items-center justify-center">
|
|
<span className="h-3 w-3 rounded-full bg-blue-400 mr-2"></span>
|
|
<span className="text-gray-700 text-sm">Direct</span>
|
|
</div>
|
|
<div className="flex items-center justify-center">
|
|
<span className="h-3 w-3 rounded-full bg-purple-400 mr-2"></span>
|
|
<span className="text-gray-700 text-sm">Email</span>
|
|
</div>
|
|
<div className="flex items-center justify-center">
|
|
<span className="h-3 w-3 rounded-full bg-teal-400 mr-2"></span>
|
|
<span className="text-gray-700 text-sm">Organic</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Dashboard; |