add archive layout pages to user car driver trip order

src/Components/car/archive/Archivedcardetailpanel.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { useEffect } from "react";
+import { Spinner } from "../../UI";
+import { STATUS_MAP, INS_MAP, fmtDate, isExpiringSoon } from "@/src/types/car";
+import type { Car, InsuranceStatus } from "@/src/types/car";
+
+interface ArchivedCarDetailPanelProps {
+  car:     Car | null;
+  loading: boolean;
+  error:   string | null;
+  onClose: () => void;
+}
+
+function DetailRow({ label, value, mono = false, warn = false }: {
+  label: string; value: string; mono?: boolean; warn?: boolean;
+}) {
+  return (
+    <div style={{
+      display: "flex", justifyContent: "space-between", alignItems: "baseline",
+      padding: "0.6rem 0",
+      borderBottom: "1px solid var(--color-border)",
+    }}>
+      <span style={{ fontSize: 12, color: "var(--color-text-muted)", fontWeight: 600 }}>{label}</span>
+      <span style={{
+        fontSize: 13,
+        fontFamily: mono ? "var(--font-mono)" : "var(--font-sans)",
+        color: warn ? "#D97706" : "var(--color-text-primary)",
+        fontWeight: warn ? 600 : 400,
+      }}>
+        {warn && value !== "—" ? "⚠ " : ""}{value}
+      </span>
+    </div>
+  );
+}
+
+export function ArchivedCarDetailPanel({ car, loading, error, onClose }: ArchivedCarDetailPanelProps) {
+  useEffect(() => {
+    const h = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
+    window.addEventListener("keydown", h);
+    return () => window.removeEventListener("keydown", h);
+  }, [onClose]);
+
+  return (
+    <div
+      role="dialog" aria-modal="true" aria-labelledby="archived-car-detail-title"
+      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
+      style={{
+        position: "fixed", inset: 0, zIndex: 80,
+        background: "rgba(15,23,42,0.55)", backdropFilter: "blur(4px)",
+        display: "flex", alignItems: "center", justifyContent: "center", padding: "1rem",
+      }}
+    >
+      <div
+        onClick={e => e.stopPropagation()}
+        style={{
+          width: "100%", maxWidth: 480,
+          background: "var(--color-surface)",
+          borderRadius: "var(--radius-2xl)",
+          border: "1px solid var(--color-border)",
+          boxShadow: "0 24px 64px rgba(0,0,0,.18)",
+          overflow: "hidden",
+          display: "flex", flexDirection: "column",
+        }}
+      >
+        {/* header */}
+        <div style={{
+          display: "flex", alignItems: "center", justifyContent: "space-between",
+          padding: "1.25rem 1.5rem",
+          borderBottom: "1px solid var(--color-border)",
+          background: "var(--color-surface-muted)",
+        }}>
+          <div>
+            <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#EA580C", fontWeight: 600, margin: 0 }}>
+              مركبة مؤرشفة
+            </p>
+            <h2 id="archived-car-detail-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
+              {car ? `${car.manufacturer} ${car.model}` : "عرض المركبة"}
+            </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>
+
+        {/* body */}
+        <div style={{ padding: "1.5rem", overflowY: "auto", maxHeight: "70vh" }} dir="rtl">
+          {loading && (
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 10, padding: "3rem 0", color: "var(--color-text-muted)" }}>
+              <Spinner size="sm" className="text-blue-600" />
+              <span style={{ fontSize: 13 }}>جارٍ التحميل…</span>
+            </div>
+          )}
+
+          {!loading && error && (
+            <div style={{ padding: "1rem 1.25rem", borderRadius: "var(--radius-lg)", background: "#FEF2F2", border: "1px solid #FECACA", fontSize: 13, color: "#991B1B", fontWeight: 500, textAlign: "center" }}>
+              {error}
+            </div>
+          )}
+
+          {!loading && car && (
+            <>
+              {/* status badges */}
+              <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: "1.25rem" }}>
+                {(() => {
+                  const s = STATUS_MAP[car.currentStatus];
+                  return (
+                    <span style={{ borderRadius: "var(--radius-full)", border: `1px solid ${s.border}`, background: s.bg, padding: "0.3rem 0.875rem", fontSize: 12, fontWeight: 700, color: s.color }}>
+                      {s.label}
+                    </span>
+                  );
+                })()}
+                {car.insuranceStatus && (() => {
+                  const ins = INS_MAP[car.insuranceStatus as InsuranceStatus];
+                  return (
+                    <span style={{ borderRadius: "var(--radius-full)", border: `1px solid ${ins.color}33`, background: `${ins.color}11`, padding: "0.3rem 0.875rem", fontSize: 12, fontWeight: 700, color: ins.color }}>
+                      تأمين: {ins.label}
+                    </span>
+                  );
+                })()}
+                <span style={{ borderRadius: "var(--radius-full)", border: "1px solid #FECACA", background: "#FEF2F2", padding: "0.3rem 0.875rem", fontSize: 12, fontWeight: 700, color: "#DC2626" }}>
+                  مؤرشفة
+                </span>
+              </div>
+
+              <DetailRow label="رقم اللوحة" value={`${car.plateLetters} ${car.plateNumber}`} mono />
+              <DetailRow label="الفرع" value={car.branch?.name ?? "—"} />
+              <DetailRow label="رقم الاستمارة" value={car.registrationNumber ?? "—"} mono />
+              <DetailRow label="رقم الهيكل (VIN)" value={car.vinNumber ?? "—"} mono />
+              <DetailRow label="انتهاء الاستمارة" value={fmtDate(car.registrationExpiryDate)} warn={isExpiringSoon(car.registrationExpiryDate)} />
+              <DetailRow label="انتهاء التأمين" value={fmtDate(car.insuranceExpiryDate)} warn={isExpiringSoon(car.insuranceExpiryDate)} />
+              <DetailRow label="تاريخ الإضافة" value={fmtDate(car.createdAt)} />
+              <DetailRow label="آخر تحديث" value={fmtDate(car.updatedAt)} />
+            </>
+          )}
+        </div>
+
+        {/* footer */}
+        <div style={{ padding: "1rem 1.5rem", borderTop: "1px solid var(--color-border)", background: "var(--color-surface-muted)", display: "flex", justifyContent: "flex-end" }}>
+          <button type="button" onClick={onClose}
+            style={{ height: 40, padding: "0 1.5rem", 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>
+        </div>
+      </div>
+    </div>
+  );
+}

src/Components/car/archive/Archivedcarsmodal.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useState } from "react";
+import { Alert } from "../../UI";
+import { ArchivedCarTable } from "./Archivedcartable";
+import { ArchivedCarDetailPanel } from "./Archivedcardetailpanel";
+import { useArchivedCars } from "@/src/hooks/archive/Usearchivedcars";
+import type { Car } from "@/src/types/car";
+
+interface ArchivedCarsModalProps {
+  onClose: () => void;
+}
+
+export function ArchivedCarsModal({ onClose }: ArchivedCarsModalProps) {
+  const [viewCar, setViewCar] = useState<Car | null>(null);
+
+  const {
+    cars, loading, total, pages, error,
+    page, search,
+    setPage, handleSearch, setError,
+  } = useArchivedCars();
+
+  return (
+    <div
+      role="dialog" aria-modal="true" aria-labelledby="archive-cars-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",
+      }}
+    >
+      {viewCar && (
+        <ArchivedCarDetailPanel
+          car={viewCar}
+          loading={false}
+          error={null}
+          onClose={() => setViewCar(null)}
+        />
+      )}
+
+      <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",
+        }}
+      >
+        {/* header */}
+        <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-cars-modal-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
+              المركبات المؤرشفة
+              <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>
+
+        {/* body */}
+        <div style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
+          {/* search */}
+          <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)} />}
+
+          <ArchivedCarTable
+            cars={cars}
+            loading={loading}
+            search={search}
+            page={page}
+            pages={pages}
+            onView={car => setViewCar(car)}
+            onPageChange={setPage}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

src/Components/car/archive/Archivedcartable.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { Spinner } from "../../UI";
+import { STATUS_MAP, fmtDateShort } from "@/src/types/car";
+import type { Car } from "@/src/types/car";
+
+// ── card / header styles ─────────────────────────────────────────────────────
+const cardStyle: React.CSSProperties = {
+  borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)",
+  background: "var(--color-surface)", overflow: "hidden", boxShadow: "var(--shadow-card)",
+};
+const thStyle: React.CSSProperties = {
+  padding: "0.75rem 1.5rem", fontSize: 11, fontWeight: 700,
+  textTransform: "uppercase", letterSpacing: "0.2em",
+  color: "var(--color-text-muted)", background: "var(--color-surface-muted)",
+  borderBottom: "1px solid var(--color-border)",
+};
+
+// ── icon button ──────────────────────────────────────────────────────────────
+function IconBtn({ onClick, title, color, bg, borderColor, children }: { onClick: () => void; title: string; color: string; bg: string; borderColor: string; children: React.ReactNode }) {
+  return (
+    <button type="button" title={title} aria-label={title} onClick={e => { e.stopPropagation(); onClick(); }}
+      style={{ width: 32, height: 32, borderRadius: "var(--radius-md)", border: `1px solid ${borderColor}`, background: bg, color, cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center", transition: "opacity 150ms" }}>
+      {children}
+    </button>
+  );
+}
+
+// ── Props ────────────────────────────────────────────────────────────────────
+interface ArchivedCarTableProps {
+  cars:         Car[];
+  loading:      boolean;
+  search:       string;
+  page:         number;
+  pages:        number;
+  onView:       (car: Car) => void;
+  onPageChange: (p: number) => void;
+}
+
+// ── main table ───────────────────────────────────────────────────────────────
+export function ArchivedCarTable({ cars, loading, search, page, pages, onView, onPageChange }: ArchivedCarTableProps) {
+  return (
+    <div style={cardStyle}>
+      {/* column headers */}
+      <div dir="rtl" style={{ display: "grid", gridTemplateColumns: "2fr 1.5fr 1fr 1fr 1fr 100px", ...thStyle }}>
+        <span>المركبة</span>
+        <span>رقم اللوحة</span>
+        <span>الفرع</span>
+        <span>آخر حالة</span>
+        <span style={{ textAlign: "center" }}>تاريخ الإضافة</span>
+        <span style={{ textAlign: "center" }}>إجراءات</span>
+      </div>
+
+      {/* loading state */}
+      {loading ? (
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, padding: "4rem 0", color: "var(--color-text-muted)" }}>
+          <Spinner size="sm" className="text-blue-600" />
+          <span style={{ fontSize: 13 }}>جارٍ التحميل…</span>
+        </div>
+      ) : cars.length === 0 ? (
+        /* empty state */
+        <div style={{ textAlign: "center", padding: "4rem 1rem" }}>
+          <p style={{ fontSize: 13, color: "var(--color-text-muted)" }}>
+            {search ? `لا توجد نتائج لـ "${search}"` : "لا توجد مركبات في الأرشيف."}
+          </p>
+        </div>
+      ) : (
+        /* data rows */
+        <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
+          {cars.map((c, i) => {
+            const status = STATUS_MAP[c.currentStatus];
+            return (
+              <li key={c.id} style={{
+                display: "grid", gridTemplateColumns: "2fr 1.5fr 1fr 1fr 1fr 100px",
+                alignItems: "center", gap: "0.5rem", padding: "0.875rem 1.5rem",
+                borderBottom: "1px solid var(--color-border)",
+                background: i % 2 !== 0 ? "var(--color-surface-muted)" : "transparent",
+                fontSize: 13,
+              }}>
+                <div>
+                  <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>
+                    {c.manufacturer} {c.model}
+                  </p>
+                  <p style={{ marginTop: 2, fontSize: 11, color: "var(--color-text-muted)" }}>{c.year}{c.color ? ` · ${c.color}` : ""}</p>
+                </div>
+                <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "#2563EB", fontWeight: 600 }}>
+                  {c.plateLetters} {c.plateNumber}
+                </span>
+                <span style={{ color: "var(--color-text-secondary)" }}>{c.branch?.name ?? "—"}</span>
+                <span style={{ display: "inline-flex", alignItems: "center", gap: 5, borderRadius: "var(--radius-full)", border: `1px solid ${status.border}`, background: status.bg, padding: "0.2rem 0.625rem", fontSize: 11, fontWeight: 700, color: status.color, width: "fit-content" }}>
+                  <span style={{ width: 6, height: 6, borderRadius: "50%", background: status.dot }} />
+                  {status.label}
+                </span>
+                <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
+                  {fmtDateShort(c.createdAt)}
+                </span>
+                <div style={{ display: "flex", justifyContent: "center", gap: 4 }}>
+                  {/* view only — delete/restore not implemented yet */}
+                  <IconBtn title={`عرض ${c.manufacturer} ${c.model}`} color="#059669" bg="#ECFDF5" borderColor="#A7F3D0" onClick={() => onView(c)}>
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                      <circle cx="12" cy="12" r="3" />
+                    </svg>
+                  </IconBtn>
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+
+      {/* pagination */}
+      {pages > 1 && (
+        <div dir="rtl" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", borderTop: "1px solid var(--color-border)", padding: "0.875rem 1.5rem" }}>
+          <span style={{ fontSize: 12, color: "var(--color-text-muted)" }}>
+            صفحة <strong style={{ color: "var(--color-text-primary)" }}>{page}</strong> من <strong style={{ color: "var(--color-text-primary)" }}>{pages}</strong>
+          </span>
+          <div style={{ display: "flex", gap: "0.5rem" }}>
+            {[
+              { label: "السابق", action: () => onPageChange(Math.max(1, page - 1)),     disabled: page === 1     },
+              { label: "التالي", action: () => onPageChange(Math.min(pages, page + 1)), disabled: page === pages },
+            ].map(btn => (
+              <button key={btn.label} type="button" onClick={btn.action} disabled={btn.disabled}
+                style={{ borderRadius: "var(--radius-lg)", border: "1px solid var(--color-border)", background: "var(--color-surface-muted)", padding: "0.375rem 0.875rem", fontSize: 12, color: "var(--color-text-secondary)", cursor: btn.disabled ? "not-allowed" : "pointer", opacity: btn.disabled ? 0.4 : 1, fontFamily: "var(--font-sans)" }}>
+                {btn.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}