223 lines
11 KiB
TypeScript
223 lines
11 KiB
TypeScript
import { useState } from 'react';
|
||
import { FileText, Download, Calendar, TrendingUp, Users, ShoppingBag, DollarSign } from 'lucide-react';
|
||
import { Button } from '../components/ui/Button';
|
||
import { BarChart } from '../components/charts/BarChart';
|
||
import { LineChart } from '../components/charts/LineChart';
|
||
|
||
export const Reports = () => {
|
||
const [selectedPeriod, setSelectedPeriod] = useState('month');
|
||
|
||
const salesData = [
|
||
{ name: 'فروردین', value: 12000000 },
|
||
{ name: 'اردیبهشت', value: 19000000 },
|
||
{ name: 'خرداد', value: 15000000 },
|
||
{ name: 'تیر', value: 22000000 },
|
||
{ name: 'مرداد', value: 18000000 },
|
||
{ name: 'شهریور', value: 25000000 },
|
||
];
|
||
|
||
const userGrowthData = [
|
||
{ name: 'فروردین', value: 150 },
|
||
{ name: 'اردیبهشت', value: 230 },
|
||
{ name: 'خرداد', value: 180 },
|
||
{ name: 'تیر', value: 280 },
|
||
{ name: 'مرداد', value: 200 },
|
||
{ name: 'شهریور', value: 320 },
|
||
];
|
||
|
||
const reports = [
|
||
{
|
||
id: 1,
|
||
title: 'گزارش فروش ماهانه',
|
||
description: 'گزارش کامل فروش محصولات در ماه گذشته',
|
||
type: 'فروش',
|
||
date: '۱۴۰۲/۰۸/۳۰',
|
||
format: 'PDF'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: 'گزارش کاربران جدید',
|
||
description: 'آمار کاربران جدید عضو شده در سیستم',
|
||
type: 'کاربران',
|
||
date: '۱۴۰۲/۰۸/۲۹',
|
||
format: 'Excel'
|
||
},
|
||
{
|
||
id: 3,
|
||
title: 'گزارش موجودی انبار',
|
||
description: 'وضعیت موجودی محصولات در انبار',
|
||
type: 'انبار',
|
||
date: '۱۴۰۲/۰۸/۲۸',
|
||
format: 'PDF'
|
||
},
|
||
{
|
||
id: 4,
|
||
title: 'گزارش درآمد روزانه',
|
||
description: 'جزئیات درآمد حاصل از فروش در ۳۰ روز گذشته',
|
||
type: 'مالی',
|
||
date: '۱۴۰۲/۰۸/۲۷',
|
||
format: 'Excel'
|
||
}
|
||
];
|
||
|
||
const handleDownloadReport = (reportId: number) => {
|
||
console.log('Downloading report:', reportId);
|
||
};
|
||
|
||
const handleGenerateReport = () => {
|
||
console.log('Generating new report');
|
||
};
|
||
|
||
return (
|
||
<div className="p-6 space-y-6">
|
||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
||
گزارش‌ها و آمار
|
||
</h1>
|
||
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||
مشاهده و دانلود گزارش‌های مختلف سیستم
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-4">
|
||
<select
|
||
value={selectedPeriod}
|
||
onChange={(e) => setSelectedPeriod(e.target.value)}
|
||
className="input max-w-xs"
|
||
>
|
||
<option value="week">هفته گذشته</option>
|
||
<option value="month">ماه گذشته</option>
|
||
<option value="quarter">سه ماه گذشته</option>
|
||
<option value="year">سال گذشته</option>
|
||
</select>
|
||
<Button onClick={handleGenerateReport}>
|
||
<FileText className="h-4 w-4 ml-2" />
|
||
تولید گزارش جدید
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
|
||
<div className="flex items-center">
|
||
<div className="p-3 rounded-full bg-blue-100 dark:bg-blue-900">
|
||
<DollarSign className="h-6 w-6 text-blue-600 dark:text-blue-400" />
|
||
</div>
|
||
<div className="mr-4">
|
||
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">کل فروش</p>
|
||
<p className="text-2xl font-bold text-gray-900 dark:text-gray-100">۱۱۱ میلیون</p>
|
||
<p className="text-xs text-green-600 dark:text-green-400">+۱۲% از ماه قبل</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
|
||
<div className="flex items-center">
|
||
<div className="p-3 rounded-full bg-green-100 dark:bg-green-900">
|
||
<Users className="h-6 w-6 text-green-600 dark:text-green-400" />
|
||
</div>
|
||
<div className="mr-4">
|
||
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">کاربران جدید</p>
|
||
<p className="text-2xl font-bold text-gray-900 dark:text-gray-100">۳۲۰</p>
|
||
<p className="text-xs text-green-600 dark:text-green-400">+۸% از ماه قبل</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
|
||
<div className="flex items-center">
|
||
<div className="p-3 rounded-full bg-purple-100 dark:bg-purple-900">
|
||
<ShoppingBag className="h-6 w-6 text-purple-600 dark:text-purple-400" />
|
||
</div>
|
||
<div className="mr-4">
|
||
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">کل سفارشات</p>
|
||
<p className="text-2xl font-bold text-gray-900 dark:text-gray-100">۱,۲۵۴</p>
|
||
<p className="text-xs text-green-600 dark:text-green-400">+۱۵% از ماه قبل</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
|
||
<div className="flex items-center">
|
||
<div className="p-3 rounded-full bg-yellow-100 dark:bg-yellow-900">
|
||
<TrendingUp className="h-6 w-6 text-yellow-600 dark:text-yellow-400" />
|
||
</div>
|
||
<div className="mr-4">
|
||
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">نرخ رشد</p>
|
||
<p className="text-2xl font-bold text-gray-900 dark:text-gray-100">+۲۳%</p>
|
||
<p className="text-xs text-green-600 dark:text-green-400">بهبود یافته</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
|
||
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
|
||
روند فروش
|
||
</h3>
|
||
<BarChart data={salesData} />
|
||
</div>
|
||
|
||
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
|
||
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
|
||
رشد کاربران
|
||
</h3>
|
||
<LineChart data={userGrowthData} />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow">
|
||
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
|
||
گزارش‌های اخیر
|
||
</h3>
|
||
</div>
|
||
<div className="p-6">
|
||
<div className="space-y-4">
|
||
{reports.map((report) => (
|
||
<div
|
||
key={report.id}
|
||
className="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
||
>
|
||
<div className="flex items-center">
|
||
<div className="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg ml-4">
|
||
<FileText className="h-5 w-5 text-blue-600 dark:text-blue-400" />
|
||
</div>
|
||
<div>
|
||
<h4 className="font-medium text-gray-900 dark:text-gray-100">
|
||
{report.title}
|
||
</h4>
|
||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||
{report.description}
|
||
</p>
|
||
<div className="flex items-center mt-1 space-x-4">
|
||
<span className="text-xs text-gray-500 dark:text-gray-500">
|
||
نوع: {report.type}
|
||
</span>
|
||
<span className="text-xs text-gray-500 dark:text-gray-500">
|
||
تاریخ: {report.date}
|
||
</span>
|
||
<span className="text-xs text-gray-500 dark:text-gray-500">
|
||
فرمت: {report.format}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Button
|
||
size="sm"
|
||
variant="secondary"
|
||
onClick={() => handleDownloadReport(report.id)}
|
||
>
|
||
<Download className="h-4 w-4 ml-2" />
|
||
دانلود
|
||
</Button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|