'use client'; import React from 'react'; import { Search, RefreshCcw, BarChart3, Download, Eye, Pencil, Trash2, ChevronRight, ChevronLeft, ChevronsRight, ChevronsLeft, AlertCircle } from 'lucide-react'; 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"; import { Card, CardContent } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Separator } from "@/components/ui/separator"; import type { OrderManagementState, OrderManagementHandlers } from '@/backend/hooks/useOrderManagement'; interface Props { state: OrderManagementState; handlers: OrderManagementHandlers; } export const OrderManagementView = ({ state, handlers }: Props) => { return
{/* 1. Page Header */}

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

نظام تتبع ومعالجة الشحنات اللوجستية

{/* 2. Summary Dashboard */}
{/* Total Card */} {/* Pending Card */} handlers.handleKPIStatusClick('PENDING')} data-api-unique-id='ordermanagementview-r46e785fad3b64f07-s436309339' data-api-unique-page-name='src/backend/components/OrderManagementView' /> {/* In Progress Card */} handlers.handleKPIStatusClick('IN_PROGRESS')} data-api-unique-id='ordermanagementview-rd1f4df7ebc832b73-s436309339' data-api-unique-page-name='src/backend/components/OrderManagementView' /> {/* Delivered Card */} handlers.handleKPIStatusClick('DELIVERED')} data-api-unique-id='ordermanagementview-r027a17990a13d792-s436309339' data-api-unique-page-name='src/backend/components/OrderManagementView' /> {/* Cancelled Card */} handlers.handleKPIStatusClick('CANCELLED')} data-api-unique-id='ordermanagementview-r5017795b48bd6a46-s436309339' data-api-unique-page-name='src/backend/components/OrderManagementView' />
{/* 3. Filter & Search Panel */}
{/* Search Bar */}
handlers.handleFormFieldChange('keyword', e.target.value)} data-api-unique-id='ordermanagementview-rc4feb6723327c9e1-s436309339' data-api-unique-page-name='src/backend/components/OrderManagementView' />
{/* Filters Grid */}
{ e.preventDefault(); handlers.handleApplyFilters(); }} className="flex flex-wrap items-end gap-4" data-api-unique-id='ordermanagementview-r22f854bb0b2fbb7f-s436309339' data-api-unique-page-name='src/backend/components/OrderManagementView'> handlers.handleFormFieldChange('startDate', e.target.value)} data-api-unique-id='ordermanagementview-r3aef5d9719537d15-s436309339' data-api-unique-page-name='src/backend/components/OrderManagementView' /> handlers.handleFormFieldChange('endDate', e.target.value)} data-api-unique-id='ordermanagementview-r5254a388a1769a95-s436309339' data-api-unique-page-name='src/backend/components/OrderManagementView' />
{/* 4. Main Data Table */}
رقم الطلب الزبون رقم الهاتف الموقع السائق النوع المبلغ الكلي الحالة تاريخ الإنشاء الإجراءات {state.isLoading ?
جاري استخراج البيانات...
: state.list.length === 0 ?

لا توجد نتائج مطابقة لخيارات البحث

 : state.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} {formatCurrency(order.total_amount)} {new Date(order.created_at).toLocaleString('ar-IQ', { dateStyle: 'medium', timeStyle: 'short' })}
)}
{/* Pagination & Footer Bar */}
عرض {(state.filterForm.page - 1) * state.filterForm.pageSize + 1} - {Math.min(state.filterForm.page * state.filterForm.pageSize, state.total)} من {state.total} طلب
سجل / صفحة:
handlers.handlePageChange(1)} disabled={state.filterForm.page <= 1} icon={} data-api-unique-id='ordermanagementview-r0b993fbfaca410c0-s436309339' data-api-unique-page-name='src/backend/components/OrderManagementView' /> handlers.handlePageChange(state.filterForm.page - 1)} disabled={state.filterForm.page <= 1} icon={} data-api-unique-id='ordermanagementview-rafdae949627b8ac8-s436309339' data-api-unique-page-name='src/backend/components/OrderManagementView' />
صفحة {state.filterForm.page} من {state.totalPages}
handlers.handlePageChange(state.filterForm.page + 1)} disabled={state.filterForm.page >= state.totalPages} icon={} data-api-unique-id='ordermanagementview-r6d8e932aa55e0efa-s436309339' data-api-unique-page-name='src/backend/components/OrderManagementView' /> handlers.handlePageChange(state.totalPages)} disabled={state.filterForm.page >= state.totalPages} icon={} data-api-unique-id='ordermanagementview-r889d1ddf750584c9-s436309339' data-api-unique-page-name='src/backend/components/OrderManagementView' />
{/* Delete Confirmation Modal */}
تأكيد حذف الطلب هل أنت متأكد من رغبتك في حذف الطلب رقم "{state.orderToDelete?.order_no}"؟
هذا الإجراء نهائي وسوف يؤدي إلى إزالة جميع البيانات المرتبطة بهذا السجل.
; }; /** * Helper Components */ const KPIItem = ({ label, value, variant = 'default', onClick }: { label: string; value: number; variant?: 'default' | 'pending' | 'in_progress' | 'delivered' | 'cancelled'; onClick?: () => void; }) => { const styles = { default: "border-primary/20 bg-primary/5", pending: "border-muted-foreground/20 bg-muted/5", in_progress: "border-blue-500/20 bg-blue-500/5", delivered: "border-green-500/20 bg-green-500/5", cancelled: "border-destructive/20 bg-destructive/5" }; const textColors = { default: "text-primary", pending: "text-muted-foreground", in_progress: "text-blue-400", delivered: "text-green-400", cancelled: "text-destructive" }; return

{label}

{value.toLocaleString()}

; }; const FilterGroup = ({ label, children }: { label: string; children: React.ReactNode; }) =>
{children}
; const formatCurrency = (amount: number) => new Intl.NumberFormat('ar-IQ', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(amount); const StatusBadge = ({ status, label }: { status: string; label: string; }) => { const variants: Record = { PENDING: "bg-muted text-muted-foreground border-transparent", IN_PROGRESS: "bg-blue-500/10 text-blue-400 border-blue-500/20", DELIVERED: "bg-green-500/10 text-green-400 border-green-500/20", CANCELLED: "bg-destructive/10 text-destructive border-destructive/20" }; return {label} ; }; const PaginationButton = ({ onClick, disabled, icon }: { onClick: () => void; disabled: boolean; icon: React.ReactNode; }) => ;