
داشبورد مدیریت فروشگاه آنلاین
این پروژه یک داشبورد مدیریتی برای فروشگاه آنلاین است که با استفاده از React، Chart.js و Tailwind CSS پیادهسازی شده است. این داشبورد امکان مشاهده آمار فروش، بازدید، محصولات پرفروش و سفارشات اخیر را فراهم میکند.
ReactNext.jsChart.jsTailwind CSSReact QueryReact Table
نمودار فروش ماهانه
نمودار بازدید هفتگی
ویژگیها
- نمایش آمار فروش به صورت نمودار ستونی
- نمایش آمار بازدید به صورت نمودار خطی
- نمایش محصولات پرفروش
- نمایش سفارشات اخیر
- قابلیت فیلتر کردن دادهها بر اساس بازه زمانی
- طراحی ریسپانسیو برای تمام دستگاهها
جزئیات فنی
این داشبورد با استفاده از React و Next.js پیادهسازی شده است. برای نمایش نمودارها از کتابخانه Chart.js استفاده شده و برای استایلدهی از Tailwind CSS بهره گرفتهایم. همچنین برای مدیریت دادهها از React Query و برای نمایش جداول از React Table استفاده شده است.
این داشبورد به صورت کامل ریسپانسیو طراحی شده و در تمام دستگاهها به خوبی نمایش داده میشود. همچنین از قابلیتهای SSR در Next.js برای بهبود عملکرد و SEO استفاده شده است.
کد نمونه
// نمونه کد برای نمودار فروش
import { Bar } from 'react-chartjs-2';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from 'chart.js';
// Register ChartJS components
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
);
export default function SalesChart() {
const salesData = {
labels: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور'],
datasets: [
{
label: 'فروش سال ۱۴۰۱',
data: [65, 59, 80, 81, 56, 55],
backgroundColor: 'rgba(53, 162, 235, 0.5)',
},
{
label: 'فروش سال ۱۴۰۲',
data: [70, 65, 85, 88, 62, 60],
backgroundColor: 'rgba(75, 192, 192, 0.5)',
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'نمودار فروش ماهانه',
},
},
};
return <Bar options={options} data={salesData} />;
}