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/Car_Maintanance/archive/ArchivedCarsMaintananceModal.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Alert } from "../../UI";
+import { Alert, Input, Modal } from "../../UI";
 import { ArchivedCarMaintenanceTable } from "./ArchivedCarMaintananceTable";
 import { ArchivedCarMaintenanceDetailPanel } from "./ArchivedCarMaintananceDetailpanel";
 import { useArchivedCarMaintenance } from "@/src/hooks/archive/UseArchivedCarsMaintanance";
@@ -25,15 +25,12 @@ export function ArchivedCarsMaintenanceModal({ carId, carLabel, onClose }: Archi
   } = useArchivedCarMaintenance(carId);
 
   return (
-    <div
-      role="dialog" aria-modal="true" aria-labelledby="archive-maintenance-modal-title"
-      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
-      style={{
-        position: "fixed", inset: 0, zIndex: 70,
-        background: "rgba(15,23,42,0.6)", backdropFilter: "blur(4px)",
-        display: "flex", alignItems: "flex-start", justifyContent: "center",
-        padding: "2rem 1rem", overflowY: "auto",
-      }}
+    <Modal
+      open
+      title={`سجلات الصيانة المؤرشفة${carLabel ? ` — ${carLabel}` : ""} (${total})`}
+      subtitle="الأرشيف"
+      onClose={onClose}
+      size="lg"
     >
       {viewRecord && (
         <ArchivedCarMaintenanceDetailPanel
@@ -44,79 +41,36 @@ export function ArchivedCarsMaintenanceModal({ carId, carLabel, onClose }: Archi
         />
       )}
 
-      <div
-        onClick={e => e.stopPropagation()}
-        style={{
-          width: "100%", maxWidth: 980,
-          background: "var(--color-surface-sunken)",
-          borderRadius: "var(--radius-xl)",
-          border: "1px solid var(--color-border)",
-          boxShadow: "0 24px 64px rgba(0,0,0,.2)",
-          overflow: "hidden",
-        }}
-      >
-        <div dir="rtl" style={{
-          display: "flex", alignItems: "center", justifyContent: "space-between",
-          padding: "1.25rem 1.5rem",
-          borderBottom: "1px solid var(--color-border)",
-          background: "var(--color-surface)",
-        }}>
-          <div>
-            <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#EA580C", fontWeight: 600, margin: 0 }}>
-              الأرشيف
-            </p>
-            <h2 id="archive-maintenance-modal-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
-              سجلات الصيانة المؤرشفة{carLabel ? ` — ${carLabel}` : ""}
-              <span style={{ marginInlineStart: 8, fontSize: 13, fontWeight: 500, color: "var(--color-text-muted)" }}>
-                ({total})
-              </span>
-            </h2>
-          </div>
-          <button type="button" onClick={onClose} aria-label="إغلاق"
-            style={{ width: 34, height: 34, borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", cursor: "pointer", fontSize: 18, color: "var(--color-text-muted)", display: "flex", alignItems: "center", justifyContent: "center" }}>
-            ×
-          </button>
-        </div>
-
-        <div style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
-          <div dir="rtl" style={{ position: "relative", maxWidth: 320 }}>
-            <svg style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", width: 16, height: 16, color: "var(--color-text-hint)", pointerEvents: "none" }}
-              fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
-              <circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" />
-            </svg>
-            <input
-              type="text"
-              placeholder="بحث بسبب الصيانة..."
-              value={search}
-              onChange={e => handleSearch(e.target.value)}
-              dir="rtl"
-              style={{
-                width: "100%", height: 40,
-                paddingRight: 36, paddingLeft: 12,
-                borderRadius: "var(--radius-lg)",
-                border: "1px solid var(--color-border)",
-                background: "var(--color-surface)",
-                fontSize: 13, outline: "none",
-                fontFamily: "var(--font-sans)",
-                color: "var(--color-text-primary)",
-              }}
-            />
-          </div>
-
-          {error && <Alert type="error" message={error} onClose={() => setError(null)} />}
-
-          <ArchivedCarMaintenanceTable
-            records={records}
-            loading={loading}
-            search={search}
-            page={page}
-            pages={pages}
-            showCar={!carId}
-            onView={record => setViewRecord(record)}
-            onPageChange={setPage}
+      <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+        <div style={{ maxWidth: 320 }}>
+          <Input
+            label="بحث"
+            type="text"
+            placeholder="بحث بسبب الصيانة..."
+            value={search}
+            onChange={e => handleSearch(e.target.value)}
+            dir="rtl"
+            icon={
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" />
+              </svg>
+            }
           />
         </div>
+
+        {error && <Alert type="error" message={error} onClose={() => setError(null)} />}
+
+        <ArchivedCarMaintenanceTable
+          records={records}
+          loading={loading}
+          search={search}
+          page={page}
+          pages={pages}
+          showCar={!carId}
+          onView={record => setViewRecord(record)}
+          onPageChange={setPage}
+        />
       </div>
-    </div>
+    </Modal>
   );
 }