'use client'; import { useState, useEffect, useCallback, useMemo, useRef } from 'react'; import { useRouter, useSearchParams } from 'next/navigation'; import { ReportExport, MonthlyAnalytics } from '@/backend/route-params'; import { toast } from "sonner"; import type { ReportType, DeliveryOrderStatus, GetReportDataOutput, GetFilterOptionsOutput } from '@/backend/actions/ReportExport'; import { getReportData, getFilterOptions } from '@/backend/actions/ReportExport'; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; // ===== 枚举映射 ===== const REPORT_TYPE_LABELS: Record = { ORDERS: 'تقرير الطلبات', DRIVERS: 'تقرير السائقين', GOVERNORATES: 'تقرير المحافظات' }; const STATUS_LABELS: Record = { PENDING: 'قيد الانتظار', IN_PROGRESS: 'قيد التنفيذ', DELIVERED: 'تم التوصيل', CANCELLED: 'ملغي' }; export default function ReportExportPage() { const router = useRouter(); const searchParams = useSearchParams(); const initialParams = useMemo(() => ReportExport.getParams(searchParams), [searchParams]); // ===== State ===== const [reportType, setReportType] = useState(initialParams.reportType as ReportType || 'ORDERS'); const [startDate, setStartDate] = useState(initialParams.startDate || ''); const [endDate, setEndDate] = useState(initialParams.endDate || ''); const [status, setStatus] = useState(initialParams.status as DeliveryOrderStatus || ''); // 纯文本过滤器的本地 State (处理 IME 场景 A) const [driverName, setDriverName] = useState(initialParams.driverName || ''); const [localDriverName, setLocalDriverName] = useState(initialParams.driverName || ''); const isComposingDriverRef = useRef(false); const [governorateName, setGovernorateName] = useState(initialParams.governorateName || ''); const [localGovernorateName, setLocalGovernorateName] = useState(initialParams.governorateName || ''); const isComposingGovRef = useRef(false); // 数据 State const [filterOptions, setFilterOptions] = useState({ governorates: [], drivers: [] }); const [reportData, setReportData] = useState({}); const [isLoading, setIsLoading] = useState(false); // ===== Effects ===== useEffect(() => { getFilterOptions().then(setFilterOptions).catch(error => toast.error(error.message)); }, []); useEffect(() => { setIsLoading(true); getReportData({ reportType, startDate: startDate || undefined, endDate: endDate || undefined, governorateName: governorateName || undefined, driverName: driverName || undefined, status: status || undefined }).then(data => setReportData(data)).catch(error => { toast.error(error.message); setReportData({}); }).finally(() => setIsLoading(false)); }, [reportType, startDate, endDate, governorateName, driverName, status]); // ===== Handlers ===== const handleDriverChange = useCallback((val: string) => { setLocalDriverName(val); if (!isComposingDriverRef.current) { setDriverName(val); } }, []); const handleDriverCompositionEnd = useCallback(() => { isComposingDriverRef.current = false; setDriverName(localDriverName); }, [localDriverName]); const handleGovChange = useCallback((val: string) => { setLocalGovernorateName(val); if (!isComposingGovRef.current) { setGovernorateName(val); } }, []); const handleGovCompositionEnd = useCallback(() => { isComposingGovRef.current = false; setGovernorateName(localGovernorateName); }, [localGovernorateName]); const handleGoToAnalytics = useCallback(() => { MonthlyAnalytics.navigateToWithDateRange(router, { startDate, endDate }); }, [router, startDate, endDate]); const hasData = useMemo(() => { if (reportType === 'ORDERS' && reportData.orders && reportData.orders.length > 0) return true; if (reportType === 'DRIVERS' && reportData.drivers && reportData.drivers.length > 0) return true; if (reportType === 'GOVERNORATES' && reportData.governorates && reportData.governorates.length > 0) return true; return false; }, [reportType, reportData]); const handleExportCSV = useCallback(() => { if (!hasData) return; try { let csvContent = '\uFEFF'; // UTF-8 BOM for Arabic support if (reportType === 'ORDERS' && reportData.orders) { csvContent += 'رقم الطلب,المحافظة,المنطقة,اسم العميل,رقم الهاتف,السائق,نوع الطلب,الحالة,تاريخ الإنشاء\n'; reportData.orders.forEach(o => { csvContent += `"${o.order_no}","${o.governorate_name}","${o.area_name}","${o.customer_name}","${o.customer_phone}","${o.driver_name}","${o.order_type}","${STATUS_LABELS[o.status]}","${new Date(o.created_at).toLocaleDateString('ar-IQ')}"\n`; }); } else if (reportType === 'DRIVERS' && reportData.drivers) { csvContent += 'اسم السائق,إجمالي الطلبات,قيد الانتظار,قيد التنفيذ,تم التوصيل,ملغي\n'; reportData.drivers.forEach(d => { csvContent += `"${d.driver_name}",${d.total_orders},${d.pending_orders},${d.in_progress_orders},${d.delivered_orders},${d.cancelled_orders}\n`; }); } else if (reportType === 'GOVERNORATES' && reportData.governorates) { csvContent += 'المحافظة,إجمالي الطلبات,قيد الانتظار,قيد التنفيذ,تم التوصيل,ملغي\n'; reportData.governorates.forEach(g => { csvContent += `"${g.governorate_name}",${g.total_orders},${g.pending_orders},${g.in_progress_orders},${g.delivered_orders},${g.cancelled_orders}\n`; }); } const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.setAttribute('download', `report_${reportType}_${new Date().getTime()}.csv`); document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(url); toast.success('تم تصدير ملف Excel بنجاح'); } catch (e) { toast.error('حدث خطأ أثناء التصدير'); } }, [hasData, reportType, reportData]); const handleExportPDF = useCallback(() => { if (!hasData) return; window.print(); toast.success('تم تجهيز التقرير للطباعة / الحفظ كـ PDF'); }, [hasData]); // ===== Render ===== return

تصدير التقارير

val && setReportType(val as ReportType)} data-api-unique-id='reportexportview-skeleton-with-logic-r953e69f6c16bd366-s2814725272' data-api-unique-page-name='src/backend/components/ReportExportView_skeleton_with_logic'> {REPORT_TYPE_LABELS['ORDERS']} {REPORT_TYPE_LABELS['DRIVERS']} {REPORT_TYPE_LABELS['GOVERNORATES']}
setStartDate(e.target.value)} data-api-unique-id='reportexportview-skeleton-with-logic-r0610dc9a454e99a5-s2814725272' data-api-unique-page-name='src/backend/components/ReportExportView_skeleton_with_logic' />
setEndDate(e.target.value)} data-api-unique-id='reportexportview-skeleton-with-logic-r776813968182fafd-s2814725272' data-api-unique-page-name='src/backend/components/ReportExportView_skeleton_with_logic' />
handleGovChange(e.target.value)} onCompositionStart={() => { isComposingGovRef.current = true; }} onCompositionEnd={handleGovCompositionEnd} placeholder="ادخل اسم المحافظة" data-api-unique-id='reportexportview-skeleton-with-logic-r529135faa4aa0279-s2814725272' data-api-unique-page-name='src/backend/components/ReportExportView_skeleton_with_logic' />
handleDriverChange(e.target.value)} onCompositionStart={() => { isComposingDriverRef.current = true; }} onCompositionEnd={handleDriverCompositionEnd} placeholder="ادخل اسم السائق" data-api-unique-id='reportexportview-skeleton-with-logic-r8beb82d3613b0286-s2814725272' data-api-unique-page-name='src/backend/components/ReportExportView_skeleton_with_logic' />
{isLoading ?
جاري تحميل البيانات...
: !hasData ?
لا توجد بيانات مطابقة للمرشحات الحالية لتصديرها.
:
{reportType === 'ORDERS' && رقم الطلب المحافظة اسم العميل اسم السائق الحالة تاريخ الإنشاء {reportData.orders?.slice(0, 50).map(order => {order.order_no} {order.governorate_name} {order.customer_name} {order.driver_name} {STATUS_LABELS[order.status]} {new Date(order.created_at).toLocaleDateString('ar-IQ')} )}
} {reportType === 'DRIVERS' && اسم السائق إجمالي الطلبات قيد الانتظار تم التوصيل {reportData.drivers?.map((driver, index) => {driver.driver_name} {driver.total_orders} {driver.pending_orders} {driver.delivered_orders} )}
} {reportType === 'GOVERNORATES' && المحافظة إجمالي الطلبات قيد الانتظار تم التوصيل {reportData.governorates?.map((gov, index) => {gov.governorate_name} {gov.total_orders} {gov.pending_orders} {gov.delivered_orders} )}
}
عرض معاينة لأول 50 سجل فقط. التصدير سيشمل كافة السجلات المطابقة.
}
; }