The trip files have been reorganized. Errors related to vehicle and driver editing have been resolved, archive display issues fixed, and model data display standardized across the project; order and trip-related issues have also been addressed.

src/Components/Order/OrderDetailBanel.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
-import { Spinner, Alert } from "../UI";
+import { Alert, Button, Input, Select, Spinner } from "../UI";
 import { orderService } from "@/src/services/order.service";
 import type { Order, OrderStatus, UpdateOrderStatusPayload } from "@/src/types/order";
 
@@ -277,18 +277,7 @@ export function OrderDetailPanel({
             </div>
           )}
 
-          {error && (
-            <div style={{
-              borderRadius: "var(--radius-md)",
-              background: "#FEF2F2",
-              border: "1px solid #FECACA",
-              padding: "0.75rem 1rem",
-              fontSize: 13,
-              color: "#DC2626",
-            }}>
-              ⚠ {error}
-            </div>
-          )}
+          {error && <Alert type="error" message={error} />}
 
           {order && !loading && (
             <>
@@ -388,57 +377,31 @@ export function OrderDetailPanel({
                 <Alert type="error" message={statusError} onClose={() => setStatusError(null)} />
               )}
               <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 8 }}>
-                <select
+                <Select
                   value={statusDraft}
                   onChange={(e) => setStatusDraft(e.target.value as OrderStatus)}
                   dir="rtl"
-                  style={{
-                    height: 40, padding: "0 0.75rem",
-                    borderRadius: "var(--radius-md)",
-                    border: "1px solid var(--color-border)",
-                    background: "var(--color-surface)",
-                    fontSize: 13, color: "var(--color-text-primary)",
-                    fontFamily: "var(--font-sans)", cursor: "pointer",
-                  }}
                 >
                   {Object.entries(ORDER_STATUS_MAP).map(([k, v]) => (
                     <option key={k} value={k}>{v.label}</option>
                   ))}
-                </select>
-                <input
+                </Select>
+                <Input
+                  label="سبب التغيير"
                   type="text"
                   value={statusReason}
                   onChange={(e) => setStatusReason(e.target.value)}
                   placeholder="سبب التغيير (اختياري)"
                   dir="rtl"
-                  style={{
-                    height: 40, padding: "0 0.75rem",
-                    borderRadius: "var(--radius-md)",
-                    border: "1px solid var(--color-border)",
-                    background: "var(--color-surface)",
-                    fontSize: 13, color: "var(--color-text-primary)",
-                    fontFamily: "var(--font-sans)",
-                  }}
                 />
-                <button
+                <Button
                   type="button"
                   onClick={handleStatusUpdate}
-                  disabled={updatingStatus || !statusDraft || statusDraft === order.currentStatus}
-                  style={{
-                    height: 40,
-                    borderRadius: "var(--radius-md)",
-                    border: "none",
-                    background: updatingStatus ? "var(--color-brand-400)" : "var(--color-brand-600)",
-                    fontSize: 13, fontWeight: 700, color: "#FFF",
-                    cursor: (updatingStatus || !statusDraft || statusDraft === order.currentStatus) ? "not-allowed" : "pointer",
-                    opacity: (!statusDraft || statusDraft === order.currentStatus) ? 0.6 : 1,
-                    display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
-                    fontFamily: "var(--font-sans)",
-                  }}
+                  disabled={!statusDraft || statusDraft === order.currentStatus}
+                  loading={updatingStatus}
                 >
-                  {updatingStatus && <Spinner size="sm" className="text-white" />}
                   {updatingStatus ? "جارٍ التحديث…" : "تحديث الحالة"}
-                </button>
+                </Button>
               </div>
 
               {order.statusHistory && order.statusHistory.length > 0 && (
@@ -492,55 +455,21 @@ export function OrderDetailPanel({
               flexShrink: 0,
             }}
           >
-            <button
-              type="button"
-              onClick={() => onDelete(order)}
-              style={{
-                height: 40, padding: "0 1rem",
-                borderRadius: "var(--radius-md)",
-                border: "1px solid #FECACA",
-                background: "#FEF2F2",
-                fontSize: 13, fontWeight: 700, color: "#DC2626",
-                cursor: "pointer", fontFamily: "var(--font-sans)",
-              }}
-            >
+            <Button type="button" variant="danger" onClick={() => onDelete(order)}>
               حذف
-            </button>
+            </Button>
 
-            <button
-              type="button"
-              onClick={() => onEdit(order)}
-              style={{
-                height: 40, padding: "0 1rem",
-                borderRadius: "var(--radius-md)",
-                border: "1px solid var(--color-brand-200)",
-                background: "var(--color-brand-50, #EFF6FF)",
-                fontSize: 13, fontWeight: 700, color: "var(--color-brand-600)",
-                cursor: "pointer", fontFamily: "var(--font-sans)",
-                display: "flex", alignItems: "center", gap: 6,
-              }}
-            >
+            <Button type="button" variant="secondary" onClick={() => onEdit(order)}>
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                 <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
                 <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
               </svg>
               تعديل
-            </button>
+            </Button>
 
-            <button
-              type="button"
-              onClick={onClose}
-              style={{
-                flex: 1, height: 40,
-                borderRadius: "var(--radius-md)",
-                border: "1px solid var(--color-border)",
-                background: "var(--color-surface)",
-                fontSize: 13, fontWeight: 600, color: "var(--color-text-secondary)",
-                cursor: "pointer", fontFamily: "var(--font-sans)",
-              }}
-            >
+            <Button type="button" variant="secondary" fullWidth onClick={onClose}>
               إغلاق
-            </button>
+            </Button>
           </div>
         )}
       </aside>