'use client'; import { useState, useEffect, useCallback, useMemo } from 'react'; import { useRouter, useSearchParams } from 'next/navigation'; import { OrderManagement, OrderDetail, OrderEdit, MonthlyAnalytics, ReportExport } from '@/backend/route-params'; import type { OrderStatus, OrderSummary, OrderListItem, GetOrderListInput, GetFilterOptionsOutput } from '@/backend/actions/OrderManagement'; import { getOrderList, deleteOrder, getFilterOptions } from '@/backend/actions/OrderManagement'; import { toast } from "sonner"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog"; // ===== 枚举映射 ===== const STATUS_LABELS: Record = { PENDING: 'قيد الانتظار', IN_PROGRESS: 'قيد التوصيل', DELIVERED: 'تم التوصيل', CANCELLED: 'ملغى' }; // ===== 页面组件 ===== export default function OrderManagementPage() { const router = useRouter(); const searchParams = useSearchParams(); const params = OrderManagement.getParams(searchParams); // ===== State ===== const [list, setList] = useState([]); const [total, setTotal] = useState(0); const [summary, setSummary] = useState(null); const [filterOptions, setFilterOptions] = useState({ governorates: [], drivers: [], order_types: [] }); const [isLoading, setIsLoading] = useState(true); const [deleteModalOpen, setDeleteModalOpen] = useState(false); const [orderToDelete, setOrderToDelete] = useState(null); // Form State (Scenario B: pure local state, no immediate side effects) const [filterForm, setFilterForm] = useState({ keyword: params.keyword || '', governorateName: params.governorateName || '', driverName: params.driverName || '', orderType: params.orderType || '', status: params.status || '', startDate: '', endDate: '', page: params.page ? parseInt(params.page, 10) : 1, pageSize: 20 }); // ===== Effects ===== // Load filter options on mount useEffect(() => { let isMounted = true; getFilterOptions({}).then(data => { if (isMounted) setFilterOptions(data); }).catch(err => { toast.error(err.message || 'حدث خطأ أثناء تحميل الخيارات'); }); return () => { isMounted = false; }; }, []); // Sync URL params to state and fetch data const fetchData = useCallback(async () => { setIsLoading(true); try { const input: GetOrderListInput = { keyword: params.keyword || undefined, governorateName: params.governorateName || undefined, driverName: params.driverName || undefined, orderType: params.orderType || undefined, status: params.status as OrderStatus || undefined, startDate: filterForm.startDate || undefined, endDate: filterForm.endDate || undefined, page: params.page ? parseInt(params.page, 10) : 1, page_size: filterForm.pageSize }; const data = await getOrderList(input); setList(data.list); setTotal(data.total); setSummary(data.summary); } catch (error: any) { toast.error(error.message || 'حدث خطأ أثناء جلب البيانات'); } finally { setIsLoading(false); } }, [params, filterForm.startDate, filterForm.endDate, filterForm.pageSize]); useEffect(() => { setFilterForm(prev => ({ ...prev, keyword: params.keyword || '', governorateName: params.governorateName || '', driverName: params.driverName || '', orderType: params.orderType || '', status: params.status || '', page: params.page ? parseInt(params.page, 10) : 1 })); fetchData(); }, [params, fetchData]); // ===== Handlers ===== const handleFormFieldChange = (field: K, value: typeof filterForm[K]) => { setFilterForm(prev => ({ ...prev, [field]: value })); }; const handleApplySearch = () => { OrderManagement.navigateToWithSearch(router, { keyword: filterForm.keyword, page: '1' }); }; const handleApplyFilters = () => { OrderManagement.navigateToWithFilters(router, { governorateName: filterForm.governorateName, driverName: filterForm.driverName, status: filterForm.status }); }; const handleResetFilters = () => { handleFormFieldChange('keyword', ''); handleFormFieldChange('governorateName', ''); handleFormFieldChange('driverName', ''); handleFormFieldChange('orderType', ''); handleFormFieldChange('status', ''); handleFormFieldChange('startDate', ''); handleFormFieldChange('endDate', ''); OrderManagement.navigateToDefault(router); }; const handleKPIStatusClick = (status: OrderStatus) => { OrderManagement.navigateToWithStatus(router, { status }); }; const handleDeleteConfirm = async () => { if (!orderToDelete) return; try { await deleteOrder({ order_id: orderToDelete.order_id }); toast.success('تم حذف الطلب بنجاح'); setDeleteModalOpen(false); setOrderToDelete(null); fetchData(); } catch (error: any) { toast.error(error.message || 'فشل حذف الطلب'); } }; const handlePageChange = (newPage: number) => { OrderManagement.navigateToWithSearch(router, { keyword: filterForm.keyword, page: newPage.toString() }); }; const totalPages = Math.max(1, Math.ceil(total / filterForm.pageSize)); // ===== Render ===== return

إدارة الطلبات

{/* Summary Dashboard */}

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

{summary?.total_count || 0}

handleKPIStatusClick('PENDING')} data-api-unique-id='ordermanagementview-skeleton-with-logic-r7d13dd4f2be136d8-s474044919' data-api-unique-page-name='src/backend/components/OrderManagementView_skeleton_with_logic'>

قيد الانتظار

{summary?.pending_count || 0}

handleKPIStatusClick('IN_PROGRESS')} data-api-unique-id='ordermanagementview-skeleton-with-logic-r7f1f111d7bf750b8-s474044919' data-api-unique-page-name='src/backend/components/OrderManagementView_skeleton_with_logic'>

قيد التوصيل

{summary?.in_progress_count || 0}

handleKPIStatusClick('DELIVERED')} data-api-unique-id='ordermanagementview-skeleton-with-logic-rf215ccad2be86984-s474044919' data-api-unique-page-name='src/backend/components/OrderManagementView_skeleton_with_logic'>

تم التوصيل

{summary?.delivered_count || 0}

handleKPIStatusClick('CANCELLED')} data-api-unique-id='ordermanagementview-skeleton-with-logic-rf01ad011c65466f7-s474044919' data-api-unique-page-name='src/backend/components/OrderManagementView_skeleton_with_logic'>

ملغى

{summary?.cancelled_count || 0}

{/* Filter Panel */}
handleFormFieldChange('keyword', e.target.value)} data-api-unique-id='ordermanagementview-skeleton-with-logic-rf14f35a77345a8e0-s474044919' data-api-unique-page-name='src/backend/components/OrderManagementView_skeleton_with_logic' />
{ e.preventDefault(); handleApplyFilters(); }} data-api-unique-id='ordermanagementview-skeleton-with-logic-r5e64be74cc5ebb76-s474044919' data-api-unique-page-name='src/backend/components/OrderManagementView_skeleton_with_logic'> handleFormFieldChange('startDate', e.target.value)} data-api-unique-id='ordermanagementview-skeleton-with-logic-r530bbf34fb644f69-s474044919' data-api-unique-page-name='src/backend/components/OrderManagementView_skeleton_with_logic' /> handleFormFieldChange('endDate', e.target.value)} data-api-unique-id='ordermanagementview-skeleton-with-logic-r5e7419a4e13e314f-s474044919' data-api-unique-page-name='src/backend/components/OrderManagementView_skeleton_with_logic' />
{/* Main Data Table */}
{isLoading ?
جاري التحميل...
: list.length === 0 ?
لا توجد نتائج مطابقة
: رقم الطلب اسم الزبون رقم الهاتف المحافظة المنطقة اسم السائق نوع الطلب الحالة تاريخ الإنشاء الإجراءات {list.map((order, index) => {order.order_no} {order.customer_name} {order.customer_phone} {order.governorate_name} {order.area_name} {order.driver_name} {order.order_type} {STATUS_LABELS[order.status]} {new Date(order.created_at).toLocaleString('ar-IQ')} )}
}
{/* Pagination */}

عرض {list.length} نتيجة من أصل {total}

{/* Delete Confirmation Modal */} تأكيد حذف الطلب هل أنت متأكد من رغبتك في حذف الطلب رقم {orderToDelete?.order_no} للزبون {orderToDelete?.customer_name}؟ هذا الإجراء نهائي ولا يمكن التراجع عنه.
; }