'use client'; import React from 'react'; import { ArrowRight, Edit2, Trash2, User, MapPin, Truck, Clock, History, AlertCircle, CheckCircle2, Package, Calendar, Wallet } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Separator } from "@/components/ui/separator"; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog"; import { ScrollArea } from "@/components/ui/scroll-area"; import type { OrderDetailState, OrderDetailHandlers } from '@/backend/hooks/useOrderDetail'; interface Props { state: OrderDetailState; handlers: OrderDetailHandlers; } export const OrderDetailView = ({ state, handlers }: Props) => { const { isLoading, displayData, isDeleteDialogOpen, isDeleting, statusChangeDialog, isChangingStatus, STATUS_LABELS } = state; if (isLoading) { return

جاري تحميل تفاصيل الطلب...

; } if (!displayData) { return

عذراً، الطلب غير موجود

يبدو أن الرابط الذي اتبعته غير صحيح أو تم حذف الطلب مسبقاً.

; } // 辅助函数：根据状态获取颜色 const getStatusColor = (status: string) => { switch (status) { case 'PENDING': return 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20'; case 'IN_PROGRESS': return 'bg-primary text-primary-foreground'; case 'DELIVERED': return 'bg-green-500 text-white'; case 'CANCELLED': return 'bg-destructive text-destructive-foreground'; default: return 'bg-muted text-muted-foreground'; } }; return
{/* 顶部导航与操作栏 */}

تفاصيل الطلب #{displayData.order_no || '---'}

عرض وإدارة تفاصيل الطلب وتتبع الحالة

{/* 主内容网格 */}
{/* 右侧：客户与地理位置 */}
بيانات الزبون
اسم الزبون

{displayData.customer_name}

رقم الهاتف

{displayData.customer_phone}

 بيانات الموقع
المحافظة

{displayData.governorate_name}

المنطقة

{displayData.area_name}

أقرب نقطة دالة

{displayData.nearest_landmark}
{/* 中间：配送与时间戳 */}
بيانات التوصيل
السائق المسؤول

{displayData.driver_name || 'لم يتم التعيين بعد'}

نوع الطلب {displayData.order_type}
المبلغ الكلي
{displayData.total_amount_formatted}
الطوابع الزمنية
تاريخ الإنشاء

{displayData.created_at_formatted}

آخر تحديث

{displayData.updated_at_formatted}
{/* 左侧：状态中心与历史记录 */}
مركز التحكم بالحالة
الحالة الحالية للطلب {STATUS_LABELS[displayData.status as keyof typeof STATUS_LABELS]}
{/* 动态操作按钮 */} {(displayData.status === 'PENDING' || displayData.status === 'IN_PROGRESS') &&
{displayData.status === 'PENDING' && <> } {displayData.status === 'IN_PROGRESS' && <> }
} سجل الحالات
{displayData.histories.length === 0 ?

لا يوجد سجل حركات لهذا الطلب

:
{displayData.histories.map((history: any, index: number) =>
{history.from_status ? STATUS_LABELS[history.from_status as keyof typeof STATUS_LABELS] : 'جديد'} {STATUS_LABELS[history.to_status as keyof typeof STATUS_LABELS]}

المشغل: {history.changed_by_name || 'النظام'}

)}
}
{/* الحوارات - Dialogs */} {/* تأكيد الحذف */} تأكيد الحذف النهائي هل أنت متأكد من رغبتك في حذف هذا الطلب بشكل نهائي؟ سيتم مسح كافة البيانات وسجل الحالات المرتبط به، ولا يمكن التراجع عن هذا الإجراء. {/* تغيير الحالة */} !open && handlers.setStatusChangeDialog({ isOpen: false, targetStatus: null })} data-api-unique-id='orderdetailview-re907e2cefcaf312b-s617231029' data-api-unique-page-name='src/backend/components/OrderDetailView'> تحديث حالة الطلب أنت على وشك تغيير حالة الطلب الحالية إلى "{statusChangeDialog.targetStatus && STATUS_LABELS[statusChangeDialog.targetStatus]}" . هل ترغب في المتابعة؟
; };