hamid zarghami
59 lines
2.5 KiB
TypeScript
59 lines
2.5 KiB
TypeScript
import { type FC } from 'react'
|
||
import { type DashboardData } from '../types/Types'
|
||
import { Box, ShoppingCart, Message, User } from 'iconsax-react'
|
||
import StatCard from './StatCard'
|
||
|
||
const DashboardOverview: FC<{ data?: DashboardData }> = ({ data }) => {
|
||
if (!data) return null
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
|
||
{/* آمار کلی */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
<StatCard
|
||
title="تعداد محصولات"
|
||
value={data.productCount}
|
||
icon={<Box size={24} color="#3B82F6" />}
|
||
/>
|
||
<StatCard
|
||
title="تعداد سفارشات"
|
||
value={data.proccessingOrders}
|
||
icon={<ShoppingCart size={24} color="#10B981" />}
|
||
/>
|
||
<StatCard
|
||
title="کامنت های خوانده نشده"
|
||
value={data.pendingComments}
|
||
icon={<Message size={24} color="#F59E0B" />}
|
||
/>
|
||
<StatCard
|
||
title="تعداد کاربران"
|
||
value={data.usersCount}
|
||
icon={<User size={24} color="#8B5CF6" />}
|
||
/>
|
||
</div>
|
||
|
||
{/* آمار فروش روزانه */}
|
||
<div className="bg-white rounded-lg p-6 shadow-sm">
|
||
<h3 className="text-lg font-medium mb-4">آمار فروش روزانه</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div className="text-center">
|
||
<div className="text-2xl font-bold text-blue-600">{data.dailySales.totalOrders}</div>
|
||
<div className="text-sm text-gray-600">تعداد سفارشات</div>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="text-2xl font-bold text-green-600">{data.dailySales.totalSales.toLocaleString()} تومان</div>
|
||
<div className="text-sm text-gray-600">مجموع فروش</div>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="text-2xl font-bold text-purple-600">{data.dailySales.itemsSold}</div>
|
||
<div className="text-sm text-gray-600">تعداد آیتم فروش رفته</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default DashboardOverview
|