dashboard

2025-10-08 16:58:40 +03:30
parent a3537e5a66
commit 26f1a057be
14 changed files with 1055 additions and 0 deletions
@@ -0,0 +1,87 @@
+import { type FC } from 'react'
+import TitleLine from '../../../components/TitleLine'
+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">
+            {/* دیباگ داده‌های API */}
+            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
+                <h4 className="text-sm font-medium text-blue-800 mb-2">ℹ️ وضعیت اتصال به API</h4>
+                <div className="text-xs text-blue-700 space-y-1">
+                    <div><strong>داده‌های واقعی API:</strong> {Array.isArray(data?.FiveDaysAgoSales) ? `✅ ${data.FiveDaysAgoSales.length} آیتم دریافت شد` : '❌ داده‌ای وجود ندارد'}</div>
+                    <div><strong>نمودار:</strong> {Array.isArray(data?.FiveDaysAgoSales) && data.FiveDaysAgoSales.length > 0 ? '✅ نمایش داده‌های واقعی API' : '⏳ در انتظار داده‌های API'}</div>
+                    <div><strong>منطق نمایش:</strong> فقط از داده‌های واقعی API استفاده می‌شود</div>
+                </div>
+                {Array.isArray(data?.FiveDaysAgoSales) && data.FiveDaysAgoSales.length > 0 && (
+                    <div className="mt-3 p-2 bg-white rounded text-xs">
+                        <div className="font-medium mb-1">نمونه داده واقعی API:</div>
+                        <pre className="text-gray-600 overflow-x-auto">
+                            {JSON.stringify(data.FiveDaysAgoSales[0], null, 2)}
+                        </pre>
+                    </div>
+                )}
+                <div className="mt-3 p-2 bg-green-50 rounded text-xs">
+                    <div className="font-medium mb-1 text-green-800">🎯 نحوه عملکرد نمودار:</div>
+                    <div className="text-green-700">
+                        ۱. فقط از داده‌های واقعی API استفاده می‌شود<br />
+                        ۲. اگر داده وجود نداشته باشد، نمودار خالی نمایش داده می‌شود<br />
+                        ۳. هیچ داده نمونه‌ای استفاده نمی‌شود<br />
+                        ۴. ساختار داده‌های مورد انتظار: totalSales, totalOrders
+                    </div>
+                </div>
+            </div>
+
+            <TitleLine title="نمای کلی داشبورد" />
+
+            {/* آمار کلی */}
+            <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