'use client'; import { useState, useEffect, useCallback, useMemo } from 'react'; import { useRouter, useSearchParams } from 'next/navigation'; import { MonthlyAnalytics, ReportExport } from '@/backend/route-params'; import type { GetMonthlyAnalyticsOutput, DashboardKpis, MonthlyStatItem, DriverStatItem, GovernorateStatItem, DeliveryOrderStatus } from '@/backend/actions/MonthlyAnalytics'; import { getMonthlyAnalytics } from '@/backend/actions/MonthlyAnalytics'; import { toast } from "sonner"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"; import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table"; // ===== 枚举映射 ===== const STATUS_LABELS: Record = { PENDING: 'قيد الانتظار', IN_PROGRESS: 'قيد التوصيل', DELIVERED: 'تم التوصيل', CANCELLED: 'ملغى' }; // ===== 类型定义 ===== interface FilterForm { startDate: string; endDate: string; } export default function MonthlyAnalyticsPage() { const router = useRouter(); const searchParams = useSearchParams(); // ===== 页面入参 ===== const params = useMemo(() => MonthlyAnalytics.getParams(searchParams), [searchParams]); // ===== State ===== const [isLoading, setIsLoading] = useState(true); const [analyticsData, setAnalyticsData] = useState(null); const [filterForm, setFilterForm] = useState({ startDate: params.startDate, endDate: params.endDate }); // ===== Effects ===== // 监听 URL 参数变化，发起后端请求 useEffect(() => { let isMounted = true; const fetchAnalytics = async () => { setIsLoading(true); try { const data = await getMonthlyAnalytics({ startDate: params.startDate, endDate: params.endDate }); if (isMounted) { setAnalyticsData(data); } } catch (error: any) { if (isMounted) { toast.error(error.message || 'حدث خطأ أثناء جلب البيانات'); } } finally { if (isMounted) { setIsLoading(false); } } }; fetchAnalytics(); return () => { isMounted = false; }; }, [params]); // 同步 URL 参数到本地表单 useEffect(() => { setFilterForm({ startDate: params.startDate, endDate: params.endDate }); }, [params]); // ===== Handlers ===== const handleFilterChange = useCallback((key: K, value: FilterForm[K]) => { setFilterForm(prev => ({ ...prev, [key]: value })); }, []); const handleApplyFilters = useCallback(() => { MonthlyAnalytics.navigateToWithDateRange(router, { startDate: filterForm.startDate, endDate: filterForm.endDate }); }, [router, filterForm]); const handleExportClick = useCallback(() => { // 根据需求，导出按钮链接到 B07 页面 ReportExport.navigateToDefault(router); }, [router]); // ===== Render Helpers ===== const renderKPIs = (kpis: DashboardKpis) =>

إجمالي الطلبات

{kpis?.totalOrders ?? 0}

طلبات الشهر الحالي

{kpis?.currentMonthOrders ?? 0}

الطلبات المنجزة

{kpis?.deliveredOrders ?? 0}

الطلبات الملغاة

{kpis?.cancelledOrders ?? 0}

; const renderTrendChart = (trend: MonthlyStatItem[]) => أداء الطلبات لآخر 12 شهراً {trend && trend.length > 0 ? الشهر عدد الطلبات {trend.map((item, index) => {item.month} {item.order_count} )}

لا توجد بيانات

} ; const renderGovernorateStats = (stats: GovernorateStatItem[]) => تحليل الطلبات حسب المحافظة {stats && stats.length > 0 ? المحافظة عدد الطلبات {stats.map((item, index) => {item.governorateName} {item.order_count} )}

لا توجد بيانات

} ; const renderDriverStats = (stats: DriverStatItem[]) => ترتيب السائقين {stats && stats.length > 0 ? السائق عدد الطلبات {stats.map((item, index) => {item.driverName} {item.order_count} )}

لا توجد بيانات

} ; // ===== Main Render ===== return

handleFilterChange('startDate', e.target.value)} data-api-unique-id='monthlyanalyticsview-skeleton-with-logic-rfb8e97e5da695190-s1661070401' data-api-unique-page-name='src/backend/components/MonthlyAnalyticsView_skeleton_with_logic' /> handleFilterChange('endDate', e.target.value)} data-api-unique-id='monthlyanalyticsview-skeleton-with-logic-rbb0fbacfc2f64764-s1661070401' data-api-unique-page-name='src/backend/components/MonthlyAnalyticsView_skeleton_with_logic' />

{isLoading ?

جاري تحميل البيانات...

: !analyticsData ?

لا توجد بيانات لعرضها في هذه الفترة.

{renderKPIs(analyticsData.kpis)}

{renderTrendChart(analyticsData.monthlyTrend)}

{renderGovernorateStats(analyticsData.governorateStats)}

{renderDriverStats(analyticsData.driverStats)}

}

; }