build dashboard home page and dashboard layer

README.md

@@ -1,72 +1,75 @@
-# Slash.sa — منصة إدارة الأسطول واللوجستيات
+# Slash.sa — Fleet & Logistics Management Platform
 
-منصة ويب متكاملة لإدارة عمليات الأسطول واللوجستيات، مبنية بلغة عربية أولًا (Arabic-first)
-باتجاه RTL كامل، وموجهة للسوق السعودي. تشمل المنصة إدارة المركبات والسائقين والفروع
-والطلبات والرحلات وسجل الصيانة، مع لوحات تحكم منفصلة حسب دور المستخدم (مشرف / عميل / مستخدم ميداني).
+A full-featured web platform for managing fleet and logistics operations, built **Arabic-first** with complete **RTL** support and targeted at the Saudi market. The platform covers vehicle, driver, branch, order, and trip management along with a maintenance log, all backed by role-based dashboards (admin / client / field user).
 
-## المتطلبات الأساسية
+## Prerequisites
 
-- Node.js 20.9 أو أحدث
-- npm (أو أي package manager متوافق)
+- Node.js 20.9 or later
+- npm (or any compatible package manager)
 
-## التقنيات المستخدمة
+## Tech Stack
 
-| الطبقة              | التقنية                                   |
-| -------------------- | ------------------------------------------ |
-| الإطار               | Next.js 16 (App Router)                    |
-| اللغة                | TypeScript                                 |
-| التنسيق              | Tailwind CSS v4                            |
-| النماذج والتحقق      | react-hook-form + yup                      |
-| الأيقونات            | lucide-react (صفحات التسويق) / Tabler Icons Webfont (لوحة التحكم) |
-| المصادقة             | JWT + HttpOnly cookie + middleware للحماية |
+| Layer            | Technology                                              |
+| ---------------- | -------------------------------------------------------- |
+| Framework        | Next.js 16 (App Router)                                  |
+| Language         | TypeScript                                                |
+| Styling          | Tailwind CSS v4                                           |
+| Forms & Validation | react-hook-form + yup                                  |
+| Icons            | lucide-react (marketing pages) / Tabler Icons Webfont (dashboard) |
+| Authentication   | JWT + HttpOnly cookie + protective middleware             |
 
-## هيكل المشروع (مختصر)
+## Project Structure (overview)
+
+```
 app/
-├── (صفحات تسويقية)      home, features/app, how_work, prices, frequently_asked_questions
-├── dashboard/            لوحة التحكم (محمية بواسطة middleware)
+├── (marketing pages)     home, features/app, how_it_works, pricing, faq
+├── dashboard/            protected dashboard (guarded by middleware)
 │   ├── cars, drivers, orders, trips, clients, branches, roles, audit, users
-├── login, register       صفحات المصادقة
-├── api/proxy/[...path]   بروكسي موحّد لكل طلبات الـ backend
-└── components/layout     Navbar, Sidebar, Topbar (تُستخدم عبر الصفحات يدويًا)
+├── login, register       authentication pages
+├── api/proxy/[...path]   unified proxy for all backend requests
+└── components/layout     Navbar, Sidebar, Topbar (manually used across pages)
+
 src/
-├── Components/           مكوّنات لوحة التحكم (مقسّمة حسب الوحدة: Car, Driver, Order...)
-├── hooks/                منطق جلب البيانات والطفرات (Create/Update/Delete) لكل وحدة
-├── services/              طبقة استدعاء الـ API (كل وحدة لها service منفصل)
-├── types/                تعريفات TypeScript لكل نموذج بيانات
-├── validations/          مخططات yup للتحقق من صحة النماذج
-└── lib/                  دوال مساعدة (auth, session, formatters, order-status)
-## التشغيل محليًا
+├── Components/           dashboard components (organized per module: Car, Driver, Order...)
+├── hooks/                data-fetching and mutation logic (Create/Update/Delete) per module
+├── services/             API call layer (each module has its own service)
+├── types/                TypeScript type definitions per data model
+├── validations/          yup schemas for form validation
+└── lib/                  helper functions (auth, session, formatters, order-status)
+```
+
+## Running Locally
 
 ```bash
 npm install
 npm run dev
 ```
 
-افتح [http://localhost:3000](http://localhost:3000) في المتصفح.
+Open [http://localhost:3000](http://localhost:3000) in your browser.
 
-## الأوامر المتاحة
+## Available Scripts
 
-| الأمر            | الوصف                                  |
-| ---------------- | --------------------------------------- |
-| `npm run dev`    | تشغيل بيئة التطوير (Webpack)            |
-| `npm run build`  | بناء نسخة الإنتاج                      |
-| `npm run start`  | تشغيل نسخة الإنتاج المبنية              |
-| `npm run lint`   | فحص الكود بواسطة ESLint                |
+| Command         | Description                          |
+| --------------- | ------------------------------------- |
+| `npm run dev`   | Run the development server (Webpack)  |
+| `npm run build` | Build the production bundle           |
+| `npm run start` | Run the built production version      |
+| `npm run lint`  | Lint the codebase with ESLint         |
 
-## ملاحظات النشر (Deployment)
+## Deployment Notes
 
-- المنصة مبنية على Next.js App Router وتعمل على أي بيئة تدعم Node.js 20.9+ (مثل Vercel).
-- كل طلبات الـ backend تمر عبر `app/api/proxy/[...path]/route.ts`، فتأكد من ضبط الـ backend base URL بشكل صحيح قبل النشر.
-- التوثيق (Authentication) يعتمد على HttpOnly cookie تُضبط عبر `app/api/auth/set-cookie`، وتُمسح عبر `app/api/clear-cookie` — تأكد من تفعيل `Secure` في بيئة الإنتاج (يتم تلقائيًا حسب `NODE_ENV`).
-- الحماية على مستوى الراوت تتم عبر `middleware.ts` — راجع الـ `matcher` فيه عند إضافة مسارات محمية جديدة.
+- The platform is built on the Next.js App Router and runs on any environment that supports Node.js 20.9+ (e.g., Vercel).
+- All backend requests are routed through `app/api/proxy/[...path]/route.ts` — make sure the backend base URL is configured correctly before deploying.
+- Authentication relies on an HttpOnly cookie set via `app/api/auth/set-cookie` and cleared via `app/api/clear-cookie`. Make sure `Secure` is enabled in production (this happens automatically based on `NODE_ENV`).
+- Route-level protection is handled by `middleware.ts` — check its `matcher` config whenever you add new protected routes.
 
-## المساهمة (Contributing)
+## Contributing
 
-1. أنشئ فرعًا جديدًا من `main` باسم واضح للتغيير (مثال: `feature/car-maintenance-filters`).
-2. اتبع نفس أسلوب الكود الموجود: RTL-first، CSS custom property tokens بدل الألوان الثابتة، وهيكلة hooks/services/types/validations لكل وحدة جديدة.
-3. شغّل `npm run lint` قبل فتح Pull Request.
-4. اكتب وصفًا واضحًا للتغيير وربطه بأي تذكرة (issue) ذات صلة.
+1. Create a new branch from `main` with a clear name describing the change (e.g., `feature/car-maintenance-filters`).
+2. Follow the existing code conventions: RTL-first, CSS custom property tokens instead of hardcoded colors, and the hooks/services/types/validations structure for each new module.
+3. Run `npm run lint` before opening a Pull Request.
+4. Write a clear description of the change and link it to any related issue.
 
-## الترخيص
+## License
 
-جميع الحقوق محفوظة © 2026 Slash.sa
+All rights reserved © 2026 Slash.sa

app/components/layout/ConditionalNavbar.tsx

@@ -8,16 +8,11 @@ import Navbar from "./Navbar";
 export default function ConditionalNavbar() {
   const pathname = usePathname();
 
-  // استبدلنا getStoredUser() المباشر بالـ hook عشان يبقى SSR-safe
   const { user, loading } = useStoredUser();
 
-  // لحد ما نتأكد من حالة تسجيل الدخول من الـ storage، منوريش/مخفيش
-  // الناف بار عشان نتجنب وميض (flash) قبل الـ hydration يخلص. مفيش
-  // حاجة تتعرض هنا أصلاً (مفيش avatar/اسم في الناف بار العام)، فـ null
-  // كافية ومفيش داعي لـ Spinner/InlineLoader في المكان ده.
+ 
   if (loading) return null;
 
-  // لو المستخدم مسجل دخول، أو الصفحة الحالية جوه الداشبورد، منظهرش الناف بار العام
   const isDashboardRoute = pathname?.startsWith("/dashboard");
   if (user || isDashboardRoute) return null;
 

app/components/layout/Sidebar.tsx

@@ -146,7 +146,20 @@ const GRAD = "linear-gradient(175deg, #1E3A8A 0%, #1D4ED8 60%, #1565C0 100%)";
 ══════════════════════════════════════════ */
 export function Sidebar() {
   const pathname = usePathname();
-  const user = getStoredUser();
+
+  // ⚠️ التقاط اليوزر بعد الـ mount بس، عشان أول render على الكلاينت
+  // يتطابق مع السيرفر (فاضي) ويتجنب hydration mismatch
+  const [user, setUser] = useState<ReturnType<typeof getStoredUser>>(null);
+
+  useEffect(() => {
+    setUser(getStoredUser());
+  }, []);
+
+  // إعادة القراءة بعد أي navigation (زي بعد الحفظ لو الصلاحيات اتغيرت)
+  useEffect(() => {
+    setUser(getStoredUser());
+  }, [pathname]);
+
   const permissions = user?.permissions ?? [];
   const { open, setOpen } = useSidebarDrawer();
 
@@ -275,17 +288,7 @@ export function Sidebar() {
             color: "#fff",
           }}
         >
-          <svg
-            width="13"
-            height="13"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2.5"
-            strokeLinecap="round"
-          >
-            <path d="M18 6 6 18M6 6l12 12" />
-          </svg>
+          <i className="ti ti-x" style={{ fontSize: 13 }} aria-hidden="true" />
         </button>
 
         <SidebarContent
@@ -363,7 +366,6 @@ function SidebarContent({
                   pathname.startsWith(item.href + "/"));
               return (
                 <Link
-                suppressHydrationWarning
                   key={item.href}
                   href={item.href}
                   title={compact ? item.label : undefined}

app/components/layout/Topbar.tsx

@@ -11,9 +11,6 @@ export function Topbar() {
   const router = useRouter();
   const { setOpen } = useSidebarDrawer();
 
-  // كان بيتقرأ بشكل sync عن طريق getStoredUser() جوه الرندر — استبدلناه بالـ hook
-  // عشان يبقى SSR-safe ومايعملش hydration mismatch، وكمان يعمل subscribe
-  // لأي تغيير في الـ storage (تسجيل دخول/خروج من تاب تاني).
   const { user, loading } = useStoredUser();
 
   async function handleLogout() {

app/dashboard/audit/page.tsx

@@ -1,25 +1,17 @@
 "use client";
 
 import { useCallback, useEffect, useReducer, useState } from "react";
-import { Alert, Spinner } from "@/src/Components/UI";
+import { Alert } from "@/src/Components/UI";
 import { getStoredToken } from "@/src/lib/auth";
 import { get } from "@/src/services/api";
 import Header from "@/src/Components/UI/Header";
+import { AuditTable } from "@/src/Components/audit/AuditTable";
+import { AuditDetailModal } from "@/src/Components/audit/AuditDetailsModel";
+import { AuditLog } from "@/src/types/audit";
 
 // ── Types ──────────────────────────────────────────────────────────────────
-
-interface AuditLog {
-  id: string;
-  action: string;
-  module?: string | null;
-  entityId?: string | null;
-  userId?: string | null;
-  userName?: string | null;
-  ipAddress?: string | null;
-  userAgent?: string | null;
-  metadata?: Record<string, unknown> | null;
-  createdAt: string;
-}
+// (AuditLog itself now lives in @/src/types/audit so AuditTable and
+// AuditDetailModal can both import it — same pattern as Driver/Order.)
 
 // ── State / Reducer ────────────────────────────────────────────────────────
 
@@ -58,44 +50,6 @@ function reducer(s: State, a: Action): State {
   }
 }
 
-// ── Action badge ───────────────────────────────────────────────────────────
-
-const ACTION_COLORS: Record<
-  string,
-  { bg: string; color: string; border: string }
-> = {
-  CREATE: { bg: "#DCFCE7", color: "#166534", border: "#BBF7D0" },
-  UPDATE: { bg: "#EFF6FF", color: "#1D4ED8", border: "#BFDBFE" },
-  DELETE: { bg: "#FEF2F2", color: "#DC2626", border: "#FECACA" },
-  LOGIN: { bg: "#F5F3FF", color: "#5B21B6", border: "#DDD6FE" },
-  LOGOUT: { bg: "#F1F5F9", color: "#475569", border: "#E2E8F0" },
-};
-
-function ActionBadge({ action }: { action: string }) {
-  const upper = action?.toUpperCase() ?? "";
-  const key =
-    Object.keys(ACTION_COLORS).find((k) => upper.includes(k)) ?? "CREATE";
-  const cfg = ACTION_COLORS[key];
-  return (
-    <span
-      style={{
-        display: "inline-flex",
-        alignItems: "center",
-        borderRadius: "var(--radius-full)",
-        border: `1px solid ${cfg.border}`,
-        background: cfg.bg,
-        padding: "0.2rem 0.625rem",
-        fontSize: 11,
-        fontWeight: 700,
-        color: cfg.color,
-        whiteSpace: "nowrap",
-      }}
-    >
-      {action}
-    </span>
-  );
-}
-
 // ── Page ───────────────────────────────────────────────────────────────────
 
 export default function AuditPage() {
@@ -109,12 +63,18 @@ export default function AuditPage() {
   const [page, setPage] = useState(1);
   const [search, setSearch] = useState("");
   const [module, setModule] = useState("");
+  const [selectedLog, setSelectedLog] = useState<AuditLog | null>(null);
 
-  const loadLogs = useCallback(async (p: number, q: string, mod: string) => {
+  const loadLogs = useCallback(async (q: string, mod: string) => {
     dispatch({ type: "LOAD_START" });
     try {
       const token = getStoredToken();
-      const params = new URLSearchParams({ page: String(p), limit: "15" });
+      // Show ALL matching logs at once instead of paginating — a high
+      // limit stands in for "no limit" against an endpoint that still
+      // expects page/limit params. If the backend enforces its own hard
+      // cap below this number, ask it to expose an explicit "all" mode
+      // instead of relying on this number being high enough.
+      const params = new URLSearchParams({ page: "1", limit: "1000" });
       if (q) params.set("search", q);
       if (mod) params.set("module", mod);
       const res = await get<{
@@ -148,29 +108,11 @@ export default function AuditPage() {
   }, []);
 
   useEffect(() => {
-    loadLogs(page, search, module);
-  }, [page, search, module, loadLogs]);
-
-  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)",
-  };
+    loadLogs(search, module);
+  }, [search, module, loadLogs]);
 
   return (
+    <>
       <section
         style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}
       >
@@ -197,168 +139,23 @@ export default function AuditPage() {
       )}
 
       {/* Table */}
-      <div style={cardStyle}>
-        <div
-          dir="rtl"
-          style={{
-            display: "grid",
-            gridTemplateColumns: "1.5fr 1fr 1fr 1.5fr 1fr",
-            ...thStyle,
-          }}
-        >
-          <span>الإجراء</span>
-          <span>الوحدة</span>
-          <span>المستخدم</span>
-          <span>عنوان IP</span>
-          <span style={{ textAlign: "center" }}>الوقت</span>
-        </div>
-
-        {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>
-        ) : state.logs.length === 0 ? (
-          <p
-            style={{
-              textAlign: "center",
-              padding: "4rem 0",
-              fontSize: 13,
-              color: "var(--color-text-muted)",
-            }}
-          >
-            لا توجد سجلات مطابقة
-          </p>
-        ) : (
-          <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
-            {state.logs.map((log, i) => (
-              <li
-                key={log.id}
-                style={{
-                  display: "grid",
-                  gridTemplateColumns: "1.5fr 1fr 1fr 1.5fr 1fr",
-                  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>
-                  <ActionBadge action={log.action} />
-                  {log.entityId && (
-                    <p
-                      style={{
-                        marginTop: 2,
-                        fontFamily: "var(--font-mono)",
-                        fontSize: 10,
-                        color: "var(--color-text-muted)",
-                      }}
-                    >
-                      {log.entityId.slice(0, 12)}…
-                    </p>
-                  )}
-                </div>
-                <span style={{ color: "var(--color-text-secondary)" }}>
-                  {log.module ?? "—"}
-                </span>
-                <span style={{ color: "var(--color-text-secondary)" }}>
-                  {log.userName ?? log.userId ?? "—"}
-                </span>
-                <span
-                  style={{
-                    fontFamily: "var(--font-mono)",
-                    fontSize: 12,
-                    color: "var(--color-text-muted)",
-                  }}
-                >
-                  {log.ipAddress ?? "—"}
-                </span>
-                <span
-                  style={{
-                    textAlign: "center",
-                    fontSize: 11,
-                    color: "var(--color-text-muted)",
-                  }}
-                >
-                  {new Date(log.createdAt).toLocaleString("ar-SA", {
-                    dateStyle: "short",
-                    timeStyle: "short",
-                  })}
-                </span>
-              </li>
-            ))}
-          </ul>
-        )}
-
-        {state.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)" }}>
-                {state.pages}
-              </strong>
-            </span>
-            <div style={{ display: "flex", gap: "0.5rem" }}>
-              {[
-                {
-                  label: "السابق",
-                  action: () => setPage((p) => Math.max(1, p - 1)),
-                  disabled: page === 1,
-                },
-                {
-                  label: "التالي",
-                  action: () => setPage((p) => Math.min(state.pages, p + 1)),
-                  disabled: page === state.pages,
-                },
-              ].map((btn) => (
-                <button
-                  key={btn.label}
-                  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>
+      <AuditTable
+        logs={state.logs}
+        loading={state.loading}
+        search={search}
+        page={page}
+        pages={state.pages}
+        onPageChange={setPage}
+        onRowClick={(log) => setSelectedLog(log)}
+      />
     </section>
+
+    {selectedLog && (
+      <AuditDetailModal
+        log={selectedLog}
+        onClose={() => setSelectedLog(null)}
+      />
+    )}
+    </>
   );
 }

app/dashboard/cars/[carId]/maintenance/[maintenanceId]/page.tsx

@@ -1,8 +1,16 @@
 "use client";
 
+import { useCallback, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
-import { Alert, PageHeader, Spinner } from "@/src/Components/UI";
-import { useCarMaintenanceList } from "@/src/hooks/UseCarsMaintanance";
+import { Alert, ArchiveButton, Button, ConfirmDialog, EmptyState, PageHeader, Spinner, Toast } from "@/src/Components/UI";
+import { CarMaintenanceFormModal } from "@/src/Components/Car_Maintanance/CarMaintananceFormModal";
+import { ArchivedCarsMaintenanceModal } from "@/src/Components/Car_Maintanance/archive/ArchivedCarsMaintananceModal";
+import {
+  useCarMaintenanceList,
+  useCarMaintenanceMutations,
+  useMaintenanceToast,
+} from "@/src/hooks/UseCarsMaintanance";
+import { useCarDetail } from "@/src/hooks/useCars";
 import {
   MAINTENANCE_STATUS_MAP,
   fmtDate,
@@ -10,92 +18,183 @@ import {
   durationDays,
   getMaintenanceStatus,
 } from "@/src/types/carMaintanance";
+import type {
+  CarMaintenance,
+  CreateMaintenancePayload,
+  UpdateMaintenancePayload,
+} from "@/src/types/carMaintanance";
 
-function DetailRow({ label, value, mono = false }: { label: string; value: string; mono?: boolean }) {
-  return (
-    <div style={{
-      display: "flex", justifyContent: "space-between", alignItems: "baseline",
-      padding: "0.75rem 0", borderBottom: "1px solid var(--color-border)",
-    }}>
-      <span style={{ fontSize: 12, color: "var(--color-text-muted)", fontWeight: 600 }}>{label}</span>
-      <span style={{ fontSize: 14, fontFamily: mono ? "var(--font-mono)" : "var(--font-sans)", color: "var(--color-text-primary)" }}>
-        {value}
-      </span>
-    </div>
-  );
-}
-
-export default function CarMaintenanceDetailPage() {
-  const { carId, maintenanceId } = useParams<{ carId: string; maintenanceId: string }>();
-  const router = useRouter();
-
-  // NOTE: GET /cars/:carId/maintenance/:maintenanceId isn't wired up on the
-  // backend yet (returns "Route not found"), so this page resolves the
-  // record from the already-loaded list instead of a dedicated single-record
-  // call. includeDeleted: true so an archived record still resolves to a
-  // real "مؤرشفة" status instead of silently disappearing.
-  const { records, loading, error } = useCarMaintenanceList(carId, { includeDeleted: true });
-  const record = records.find((r) => r.id === maintenanceId) ?? null;
-
-  return (
-    <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem", maxWidth: 720, margin: "0 auto" }} dir="rtl">
-      <PageHeader
-        title="تفاصيل سجل الصيانة"
-        description={record?.reason}
-        backHref={`/dashboard/cars/${carId}/maintenance`}
-        backLabel="العودة"
-      />
-
-      <div style={{
-        borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)",
-        background: "var(--color-surface)", boxShadow: "var(--shadow-card)", padding: "1.5rem",
-      }}>
-        {loading && (
-          <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "2rem 0" }}>
-            <Spinner size="sm" className="text-blue-600" />
-            <span style={{ fontSize: 13, color: "var(--color-text-muted)" }}>جارٍ التحميل…</span>
-          </div>
-        )}
-
-        {error && <Alert type="error" message={error} />}
-
-        {!loading && !error && !record && (
-          <p style={{ fontSize: 13, color: "var(--color-text-muted)", textAlign: "center", padding: "2rem 0" }}>
-            لم يتم العثور على سجل الصيانة.
-          </p>
-        )}
-
-        {!loading && !error && record && (() => {
+function MaintenanceCard({
+  record, onView, onEdit, onDelete,
+}: {
+  record: CarMaintenance;
+  onView: () => void;
+  onEdit: () => void;
+  onDelete: () => void;
+}) {
   const status = MAINTENANCE_STATUS_MAP[getMaintenanceStatus(record)];
+
   return (
-            <>
-              <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: "1.25rem" }}>
-                <span style={{ borderRadius: "var(--radius-full)", border: `1px solid ${status.border}`, background: status.bg, padding: "0.3rem 0.875rem", fontSize: 12, fontWeight: 700, color: status.color }}>
+    <article style={{
+      borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)",
+      background: "var(--color-surface)", overflow: "hidden", boxShadow: "var(--shadow-card)",
+    }}>
+      <div style={{ height: 4, background: status.dot }} />
+      <div style={{ padding: "1.25rem" }}>
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 8 }}>
+          <p style={{ fontSize: 15, fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>
+            {record.reason}
+          </p>
+          <span style={{
+            borderRadius: "var(--radius-full)", border: `1px solid ${status.border}`,
+            background: status.bg, padding: "0.2rem 0.625rem",
+            fontSize: 11, fontWeight: 700, color: status.color, whiteSpace: "nowrap", flexShrink: 0,
+          }}>
             {status.label}
           </span>
         </div>
 
-              <DetailRow label="سبب الصيانة" value={record.reason} />
-              <DetailRow label="التكلفة" value={fmtCost(record.cost)} />
-              <DetailRow label="تاريخ البدء" value={fmtDate(record.startAt)} />
-              <DetailRow label="تاريخ الانتهاء" value={fmtDate(record.endAt)} />
-              <DetailRow label="المدة" value={`${durationDays(record.startAt, record.endAt)} يوم`} />
-              {record.car && (
-                <DetailRow label="المركبة" value={`${record.car.manufacturer} ${record.car.model} — ${record.car.plateLetters} ${record.car.plateNumber}`} mono />
-              )}
-              <DetailRow label="تاريخ الإضافة" value={fmtDate(record.createdAt)} />
-              <DetailRow label="آخر تحديث" value={fmtDate(record.updatedAt)} />
-            </>
-          );
-        })()}
+        <div style={{ marginTop: "0.875rem", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.5rem" }}>
+          <div style={{ fontSize: 11 }}>
+            <span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>التكلفة</span>
+            <span style={{ color: "var(--color-text-primary)", marginTop: 2, display: "block" }}>{fmtCost(record.cost)}</span>
+          </div>
+          <div style={{ fontSize: 11 }}>
+            <span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>المدة</span>
+            <span style={{ color: "var(--color-text-primary)", marginTop: 2, display: "block" }}>{durationDays(record.startAt, record.endAt)} يوم</span>
+          </div>
+          <div style={{ fontSize: 11 }}>
+            <span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>تاريخ البدء</span>
+            <span style={{ color: "var(--color-text-secondary)", marginTop: 2, display: "block" }}>{fmtDate(record.startAt)}</span>
+          </div>
+          <div style={{ fontSize: 11 }}>
+            <span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>تاريخ الانتهاء</span>
+            <span style={{ color: "var(--color-text-secondary)", marginTop: 2, display: "block" }}>{fmtDate(record.endAt)}</span>
+          </div>
         </div>
 
-      <div>
-        <button type="button" onClick={() => router.push(`/dashboard/cars/${carId}/maintenance`)}
-          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 style={{ display: "flex", justifyContent: "space-between", marginTop: "1rem" }}>
+  <Button variant="secondary" size="sm" onClick={onEdit}>
+    تعديل
+  </Button>
+  {/* inline style keeps the original light-red look; Button's own
+      variant="danger" is solid red and would change the visual */}
+  <Button
+    variant="secondary"
+    size="sm"
+    onClick={onDelete}
+    style={{ background: "#FEF2F2", borderColor: "#FECACA", color: "#DC2626" }}
+  >
+    أرشفة
+  </Button>
 </div>
-    </section>
+      </div>
+    </article>
+  );
+}
+
+export default function CarMaintenancePage() {
+  const { carId } = useParams<{ carId: string }>();
+  const router = useRouter();
+
+  const { car, refetch: refetchCar } = useCarDetail(carId);
+  const carLabel = car ? `${car.manufacturer} ${car.model} — ${car.plateLetters} ${car.plateNumber}` : undefined;
+
+  const { records, loading, error, loadRecords, removeRecord, setError } = useCarMaintenanceList(carId);
+  const { toast, notify } = useMaintenanceToast();
+
+  const [formTarget, setFormTarget]     = useState<CarMaintenance | null | false>(false); // false = closed
+  const [deleteTarget, setDeleteTarget] = useState<CarMaintenance | null>(null);
+  const [archiveOpen, setArchiveOpen]   = useState(false);
+
+  const getEditTarget = useCallback(
+    () => (formTarget instanceof Object && formTarget !== null ? (formTarget as CarMaintenance) : null),
+    [formTarget],
+  );
+
+  const { deleting, handleFormSubmit, handleDeleteConfirm } = useCarMaintenanceMutations({
+    carId,
+    onSuccess: (msg) => { notify({ type: "success", message: msg }); loadRecords(); refetchCar(); },
+    onError:   (msg) =>   notify({ type: "error", message: msg }),
+    onDeleted: (id) => { removeRecord(id); setDeleteTarget(null); refetchCar(); },
+    getEditTarget,
+  });
+
+  return (
+    <>
+      <Toast notification={toast} />
+
+      {formTarget !== false && (
+        <CarMaintenanceFormModal
+          editRecord={formTarget}
+          carLabel={carLabel}
+          onClose={() => setFormTarget(false)}
+          onSubmit={(payload: CreateMaintenancePayload | UpdateMaintenancePayload, isNew: boolean) =>
+            handleFormSubmit(payload, isNew).then(ok => { if (ok) setFormTarget(false); return ok; })
+          }
+        />
+      )}
+
+      <ConfirmDialog
+        open={!!deleteTarget}
+        loading={deleting}
+        onCancel={() => setDeleteTarget(null)}
+        onConfirm={() => deleteTarget && handleDeleteConfirm(deleteTarget)}
+        title="حذف سجل الصيانة"
+        description={`هل أنت متأكد من حذف سجل ${deleteTarget?.reason ?? ""} (${deleteTarget ? fmtCost(deleteTarget.cost) : ""})؟ لا يمكن التراجع عن هذا الإجراء.`}
+      />
+
+      {archiveOpen && (
+        <ArchivedCarsMaintenanceModal
+          carId={carId}
+          carLabel={carLabel}
+          onClose={() => setArchiveOpen(false)}
+        />
+      )}
+
+      <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }} dir="rtl">
+        <PageHeader
+          title="سجل الصيانة"
+          description={carLabel ?? "جارٍ تحميل بيانات المركبة…"}
+          backHref="/dashboard/cars"
+          backLabel="المركبات"
+          action={
+            <Button onClick={() => setFormTarget(null)}>
+              <i className="ti ti-plus" style={{ fontSize: 14 }} aria-hidden="true" />
+              إضافة سجل صيانة
+            </Button>
+          }
+        />
+
+        {error && <Alert type="error" message={error} onClose={() => setError(null)} />}
+
+        {loading ? (
+          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, padding: "5rem 0", color: "var(--color-text-muted)" }}>
+            <Spinner size="md" className="text-blue-600" />
+            <span style={{ fontSize: 14 }}>جارٍ تحميل سجلات الصيانة…</span>
+          </div>
+        ) : records.length === 0 ? (
+          <EmptyState
+            icon="🔧"
+            title="لا توجد سجلات صيانة بعد"
+            description='اضغط على "إضافة سجل صيانة" لتسجيل أول عملية صيانة لهذه المركبة.'
+          />
+        ) : (
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: "1rem" }}>
+            {records.map(record => (
+              <MaintenanceCard
+                key={record.id}
+                record={record}
+                onView={() => router.push(`/dashboard/cars/${carId}/maintenance/${record.id}`)}
+                onEdit={() => setFormTarget(record)}
+                onDelete={() => setDeleteTarget(record)}
+              />
+            ))}
+          </div>
+        )}
+      </section>
+
+      <ArchiveButton onClick={() => setArchiveOpen(true)} label="أرشيف الصيانة" />
+    </>
   );
 }

app/dashboard/cars/[carId]/maintenance/page.tsx

@@ -166,9 +166,7 @@ export default function CarMaintenancePage() {
                 display: "inline-flex", alignItems: "center", gap: 7,
                 fontFamily: "var(--font-sans)", whiteSpace: "nowrap",
               }}>
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
-              </svg>
+              <i className="ti ti-plus" style={{ fontSize: 14 }} aria-hidden="true" />
               إضافة سجل صيانة
             </button>
           }

app/dashboard/cars/page.tsx

@@ -11,7 +11,6 @@ import { useCarMaintenanceMutations } from "@/src/hooks/UseCarsMaintanance";
 import { fmtDateShort, isExpiringSoon, STATUS_MAP, INS_MAP } from "@/src/types/car";
 import type { Car, CreateCarPayload, ToastMsg, UpdateCarPayload } from "@/src/types/car";
 import type { CreateMaintenancePayload, UpdateMaintenancePayload } from "@/src/types/carMaintanance";
-import Header from "@/src/Components/UI/Header";
 
 // ── Toast ─────────────────────────────────────────────────────────────────────
 
@@ -42,6 +41,10 @@ function CarToast({ notification }: { notification: ToastMsg | null }) {
 }
 
 // ── CarCard ───────────────────────────────────────────────────────────────────
+// NOTE: hover/lift affordance is implemented via Tailwind `hover:`/`focus-visible:`
+// classes instead of onMouseEnter/onMouseLeave DOM mutation, so keyboard users
+// (tabbing to this card, which is already role="button" tabIndex={0}) get the
+// same visual feedback as mouse users via the native :focus-visible pseudo-class.
 
 function CarCard({
   car,
@@ -74,23 +77,7 @@ function CarCard({
       tabIndex={0}
       onKeyDown={e => { if (e.key === "Enter" || e.key === " ") onClick(); }}
       aria-label={`${car.manufacturer} ${car.model} — ${car.plateLetters} ${car.plateNumber}`}
-      style={{
-        borderRadius: "var(--radius-xl)",
-        border: "1px solid var(--color-border)",
-        background: "var(--color-surface)",
-        overflow: "hidden",
-        boxShadow: "var(--shadow-card)",
-        cursor: "pointer",
-        transition: "box-shadow 200ms, transform 200ms",
-      }}
-      onMouseEnter={e => {
-        (e.currentTarget as HTMLElement).style.boxShadow = "0 8px 24px rgba(37,99,235,.12)";
-        (e.currentTarget as HTMLElement).style.transform = "translateY(-2px)";
-      }}
-      onMouseLeave={e => {
-        (e.currentTarget as HTMLElement).style.boxShadow = "var(--shadow-card)";
-        (e.currentTarget as HTMLElement).style.transform = "translateY(0)";
-      }}
+      className="rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] overflow-hidden shadow-[var(--shadow-card)] cursor-pointer outline-none transition-all duration-200 hover:shadow-[0_8px_24px_rgba(37,99,235,.12)] hover:-translate-y-0.5 focus-visible:shadow-[0_8px_24px_rgba(37,99,235,.12)] focus-visible:-translate-y-0.5 focus-visible:ring-2 focus-visible:ring-[var(--color-brand-600)] focus-visible:ring-offset-2"
     >
       {/* Colour accent bar by status */}
       <div style={{
@@ -195,9 +182,7 @@ function CarCard({
             fontFamily: "var(--font-sans)",
           }}
         >
-          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-            <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
-          </svg>
+          <i className="ti ti-tool" style={{ fontSize: 13 }} aria-hidden="true" />
           إرسال للصيانة
         </button>
 
@@ -309,7 +294,75 @@ export default function CarsPage() {
       <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }} dir="rtl">
 
         {/* ── Header ── */}
-        <Header state={{ total }} search={search} setSearch={setSearch} module="" setModule={() => {}} setPage={setPage} title="المركبات" mainTitle="إدارة المركبات" name="مركبة" isAudit={false} onAdd={() => setFormTarget(null)}/>
+        <header style={{
+          borderRadius: "var(--radius-xl)",
+          border: "1px solid var(--color-border)",
+          background: "var(--color-surface)",
+          padding: "1.5rem 2rem",
+          boxShadow: "var(--shadow-card)",
+        }}>
+          <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600 }}>
+            إدارة الأسطول
+          </p>
+          <div style={{ marginTop: "0.75rem", display: "flex", flexWrap: "wrap", gap: "1rem", alignItems: "flex-end", justifyContent: "space-between" }}>
+            <div>
+              <h1 style={{ fontSize: "1.5rem", fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>
+                المركبات
+              </h1>
+              <p style={{ marginTop: "0.25rem", fontSize: 13, color: "var(--color-text-muted)" }}>
+                إجمالي <strong style={{ color: "var(--color-text-primary)" }}>{total}</strong> مركبة في الأسطول
+              </p>
+            </div>
+
+            <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap", alignItems: "center" }}>
+              {/* Search */}
+              <div style={{ position: "relative", width: 256 }}>
+                <i
+                  className="ti ti-search"
+                  aria-hidden="true"
+                  style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", fontSize: 16, color: "var(--color-text-hint)", pointerEvents: "none" }}
+                />
+                <input
+                  type="text"
+                  placeholder="بحث بالماركة أو اللوحة..."
+                  value={search}
+                  onChange={(e) => { setSearch(e.target.value); setPage(1); }}
+                  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, color: "var(--color-text-primary)",
+                    outline: "none", fontFamily: "var(--font-sans)",
+                  }}
+                />
+              </div>
+
+              {/* Add button */}
+              <button
+                type="button"
+                onClick={() => setFormTarget(null)}
+                style={{
+                  height: 40, padding: "0 1.125rem",
+                  borderRadius: "var(--radius-lg)",
+                  border: "none",
+                  background: "var(--color-brand-600)",
+                  fontSize: 13, fontWeight: 700, color: "#FFF",
+                  cursor: "pointer",
+                  display: "inline-flex", alignItems: "center", gap: 7,
+                  fontFamily: "var(--font-sans)",
+                  boxShadow: "0 1px 4px rgba(37,99,235,.35)",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                <i className="ti ti-plus" style={{ fontSize: 14 }} aria-hidden="true" />
+                إضافة مركبة
+              </button>
+            </div>
+          </div>
+        </header>
+
         {/* Error alert */}
         {error && <Alert type="error" message={error} onClose={() => setError(null)} />}
 
@@ -357,6 +410,14 @@ export default function CarsPage() {
             gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
             gap: "1rem",
           }}>
+            {/* PERF NOTE: Cards are rendered inline via .map() below. At the
+                current pagination size (10-12 items) this is not a bottleneck.
+                If page size increases (e.g. "show all" mode, a larger
+                page-size selector, or removal of server-side pagination),
+                extract <CarCard> is already its own component above — wrap
+                it in React.memo at that point, and make sure onClick /
+                onSendToMaintenance passed to it are stable (useCallback)
+                so memoization is actually effective. */}
             {cars.map((car) => (
               <CarCard
                 key={car.id}

app/dashboard/clients/[clientId]/addresses/page.tsx

@@ -3,7 +3,16 @@
 import { useCallback, useEffect, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 
-import { Alert, ConfirmDialog, Toast, ArchiveButton } from "@/src/Components/UI";
+import {
+  Alert,
+  ConfirmDialog,
+  Toast,
+  ArchiveButton,
+  Button,
+  EmptyState,
+  PageLoader,
+  InlineLoader,
+} from "@/src/Components/UI";
 
 import { useClientAddresses } from "@/src/hooks/useClientAddresses";
 import { clientService }      from "@/src/services/client.service";
@@ -13,6 +22,7 @@ import type { Client, ClientFormData } from "@/src/types/client";
 import type { ClientAddress }          from "@/src/types/client_adresses";
 
 import { AddressFormModal, ClientFormModal } from "@/src/Components/Client";
+import { AddressDetailModal } from "@/src/Components/Client_Adress/AddressDetailModal";
 import { ArchivedClientsAddressesModal } from "@/src/Components/Client_Adress/archive/ArchivedClientsAddressesModal";
 import type {
   CreateAddressFormValues,
@@ -38,16 +48,21 @@ function labelIcon(label: string): string {
 }
 
 // ─── AddressCard ───────────────────────────────────────────────────────────
+// CHANGE: clicking the card now opens AddressDetailModal — same pattern as
+// UserTable → UserDetailModal (viewUserId). Action buttons stop propagation
+// so they don't trigger the modal. `ActionBtn` (custom component) removed in
+// favor of the shared <Button size="sm" /> from the template.
 
 interface AddressCardProps {
   address:        ClientAddress;
+  onView:         () => void;
   onEdit:         () => void;
   onDelete:       () => void;
   onSetPrimary:   () => void;
   settingPrimary: boolean; // true only while THIS card's request is in flight
 }
 
-function AddressCard({ address, onEdit, onDelete, onSetPrimary, settingPrimary }: AddressCardProps) {
+function AddressCard({ address, onView, onEdit, onDelete, onSetPrimary, settingPrimary }: AddressCardProps) {
   const { details, contactPerson } = address;
   const {
     street,
@@ -63,6 +78,10 @@ function AddressCard({ address, onEdit, onDelete, onSetPrimary, settingPrimary }
 
   return (
     <div
+      onClick={onView}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") onView(); }}
       style={{
         position: "relative",
         display: "flex",
@@ -73,6 +92,7 @@ function AddressCard({ address, onEdit, onDelete, onSetPrimary, settingPrimary }
         padding: "1.25rem",
         background: "var(--color-surface)",
         boxShadow: "var(--shadow-card)",
+        cursor: "pointer",
       }}
     >
       {/* Label row */}
@@ -183,8 +203,9 @@ function AddressCard({ address, onEdit, onDelete, onSetPrimary, settingPrimary }
         </div>
       )}
 
-      {/* Actions */}
+      {/* Actions — stopPropagation so clicking them doesn't open the detail modal */}
       <div
+        onClick={(e) => e.stopPropagation()}
         style={{
           display: "flex",
           flexWrap: "wrap",
@@ -194,124 +215,31 @@ function AddressCard({ address, onEdit, onDelete, onSetPrimary, settingPrimary }
           borderTop: "1px solid var(--color-border)",
         }}
       >
-        <ActionBtn onClick={onEdit} color="#1D4ED8" bg="#EFF6FF" border="#BFDBFE">
+        <Button type="button" variant="secondary" size="sm" onClick={onEdit}>
           تعديل
-        </ActionBtn>
+        </Button>
 
         {!address.isPrimary && (
-          <ActionBtn
+          <Button
+            type="button"
+            variant="secondary"
+            size="sm"
             onClick={onSetPrimary}
-            disabled={settingPrimary}
-            color="#B45309"
-            bg="#FFFBEB"
-            border="#FDE68A"
+            loading={settingPrimary}
           >
-            {settingPrimary ? "جارٍ التعيين…" : "تعيين كأساسي"}
-          </ActionBtn>
+            تعيين كأساسي
+          </Button>
         )}
 
-        <ActionBtn
+        <Button
+          type="button"
+          variant="danger"
+          size="sm"
           onClick={onDelete}
-          color="#DC2626"
-          bg="#FEF2F2"
-          border="#FECACA"
-          style={{ marginRight: "auto" }}
+          style={{ marginInlineStart: "auto" }}
         >
           حذف
-        </ActionBtn>
-      </div>
-    </div>
-  );
-}
-
-function ActionBtn({
-  onClick,
-  color,
-  bg,
-  border,
-  style,
-  disabled,
-  children,
-}: {
-  onClick:   () => void;
-  color:     string;
-  bg:        string;
-  border:    string;
-  style?:    React.CSSProperties;
-  disabled?: boolean;
-  children:  React.ReactNode;
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={disabled}
-      style={{
-        height: 30,
-        padding: "0 0.75rem",
-        borderRadius: "var(--radius-md)",
-        border: `1px solid ${border}`,
-        background: bg,
-        fontSize: 12,
-        fontWeight: 600,
-        color,
-        cursor: disabled ? "not-allowed" : "pointer",
-        opacity: disabled ? 0.6 : 1,
-        fontFamily: "var(--font-sans)",
-        transition: "opacity 150ms",
-        ...style,
-      }}
-    >
-      {children}
-    </button>
-  );
-}
-
-// ─── ClientEditModal ───────────────────────────────────────────────────────
-
-interface ClientEditModalProps {
-  client:   Client;
-  onClose:  () => void;
-  onSubmit: (data: ClientFormData, isNew: boolean) => Promise<boolean>;
-}
-
-function ClientEditModal({ client, onClose, onSubmit }: ClientEditModalProps) {
-  return (
-    <div
-      role="dialog"
-      aria-modal="true"
-      aria-label="تعديل بيانات العميل"
-      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
-      style={{
-        position: "fixed",
-        inset: 0,
-        zIndex: 50,
-        background: "rgba(15,23,42,0.55)",
-        backdropFilter: "blur(4px)",
-        display: "flex",
-        alignItems: "flex-start",
-        justifyContent: "center",
-        padding: "2rem 1rem",
-        overflowY: "auto",
-      }}
-    >
-      <div
-        onClick={(e) => e.stopPropagation()}
-        style={{
-          width: "100%",
-          maxWidth: 520,
-          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",
-        }}
-      >
-        <ClientFormModal
-          editClient={client}
-          onClose={onClose}
-          onSubmit={onSubmit}
-        />
+        </Button>
       </div>
     </div>
   );
@@ -341,7 +269,7 @@ export default function ClientAddressesPage() {
       setClientLoading(true);
       clientService
         .getById(clientId, getStoredToken())
-        .then((res) => setClient(res.data))
+        .then((res) => setClient(res))
         .catch(() => router.replace("/dashboard/clients"))
         .finally(() => setClientLoading(false));
     });
@@ -372,6 +300,8 @@ export default function ClientAddressesPage() {
   const [editingClient,  setEditingClient]  = useState(false);
   // Archive browser modal open/closed — scoped to this client's addresses
   const [archiveOpen,    setArchiveOpen]    = useState(false);
+  // Address whose detail modal is open — same pattern as viewUserId/UserDetailModal
+  const [viewAddress,    setViewAddress]    = useState<ClientAddress | null>(null);
 
   // ── Address form handler ─────────────────────────────────────────────────
   const handleAddressSubmit = async (
@@ -403,7 +333,7 @@ export default function ClientAddressesPage() {
     if (!client) return false;
     try {
       const res = await clientService.update(client.id, data, getStoredToken());
-      setClient(res.data);
+      setClient(res);
       return true;
     } catch {
       return false;
@@ -411,21 +341,9 @@ export default function ClientAddressesPage() {
   };
 
   // ── Loading guard ────────────────────────────────────────────────────────
+  // CHANGE: swapped the hand-rolled spinning <div> for the template's PageLoader.
   if (!clientId || clientLoading) {
-    return (
-      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: "100vh" }}>
-        <div
-          style={{
-            width: 40,
-            height: 40,
-            borderRadius: "50%",
-            border: "3px solid var(--color-border)",
-            borderTopColor: "var(--color-brand-600)",
-            animation: "spin 0.7s linear infinite",
-          }}
-        />
-      </div>
-    );
+    return <PageLoader message="جارٍ تحميل بيانات العميل…" />;
   }
 
   // ── Render ────────────────────────────────────────────────────────────────
@@ -433,6 +351,14 @@ export default function ClientAddressesPage() {
     <>
       <Toast notification={notification} />
 
+      {/* Address detail modal — same pattern as viewUserId → UserDetailModal */}
+      {viewAddress && (
+        <AddressDetailModal
+          address={viewAddress}
+          onClose={() => setViewAddress(null)}
+        />
+      )}
+
       {/* Address create / edit modal */}
       {addrFormTarget !== false && (
         <AddressFormModal
@@ -448,14 +374,20 @@ export default function ClientAddressesPage() {
         loading={deleting}
         onCancel={() => { if (!deleting) setDeleteTarget(null); }}
         onConfirm={handleDeleteConfirm}
-        title="حذف العميل"
-        description={`هل أنت متأكد من حذف ${deleteTarget?.label ?? ""}؟ سيتم حذف جميع عناوينه أيضاً. لا يمكن التراجع عن هذا الإجراء.`}
+        title="حذف العنوان"
+        description={`هل أنت متأكد من حذف ${deleteTarget?.label ?? ""}؟ لا يمكن التراجع عن هذا الإجراء.`}
       />
 
-      {/* Client edit modal */}
+      {/*
+        Client edit modal
+        CHANGE: removed the custom `ClientEditModal` wrapper that built its
+        own fixed-position backdrop by hand. `ClientFormModal` already
+        renders the shared <Modal/> internally, so wrapping it in another
+        backdrop produced two stacked overlays. We now render it directly.
+      */}
       {editingClient && client && (
-        <ClientEditModal
-          client={client}
+        <ClientFormModal
+          editClient={client}
           onClose={() => setEditingClient(false)}
           onSubmit={handleClientEditSubmit}
         />
@@ -481,28 +413,17 @@ export default function ClientAddressesPage() {
             boxShadow: "var(--shadow-card)",
           }}
         >
-          <button
+          {/* CHANGE: custom <button> → Button variant="ghost" */}
+          <Button
             type="button"
+            variant="ghost"
+            size="sm"
             onClick={() => router.push("/dashboard/clients")}
-            style={{
-              display: "inline-flex",
-              alignItems: "center",
-              gap: 6,
-              fontSize: 12,
-              fontWeight: 600,
-              color: "var(--color-text-muted)",
-              background: "none",
-              border: "none",
-              cursor: "pointer",
-              marginBottom: 12,
-              fontFamily: "var(--font-sans)",
-            }}
+            style={{ marginBottom: 12 }}
           >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <path d="M15 18l-6-6 6-6" />
-            </svg>
+            <i className="ti ti-chevron-left" style={{ fontSize: 14 }} aria-hidden="true" />
             جميع العملاء
-          </button>
+          </Button>
 
           <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600 }}>
             إدارة العناوين
@@ -521,61 +442,19 @@ export default function ClientAddressesPage() {
             </div>
 
             <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
+              {/* CHANGE: custom <button> → Button variant="secondary" */}
               {client && (
-                <button
-                  type="button"
-                  onClick={() => setEditingClient(true)}
-                  style={{
-                    height: 40,
-                    padding: "0 1rem",
-                    borderRadius: "var(--radius-lg)",
-                    border: "1px solid var(--color-border)",
-                    background: "var(--color-surface)",
-                    fontSize: 13,
-                    fontWeight: 600,
-                    color: "var(--color-text-secondary)",
-                    cursor: "pointer",
-                    display: "inline-flex",
-                    alignItems: "center",
-                    gap: 7,
-                    fontFamily: "var(--font-sans)",
-                  }}
-                >
-                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                    <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 type="button" variant="secondary" onClick={() => setEditingClient(true)}>
+                  <i className="ti ti-edit" style={{ fontSize: 13 }} aria-hidden="true" />
                   تعديل بيانات العميل
-                </button>
+                </Button>
               )}
 
-              <button
-                type="button"
-                onClick={() => setAddrFormTarget(null)}
-                style={{
-                  height: 40,
-                  padding: "0 1.125rem",
-                  borderRadius: "var(--radius-lg)",
-                  border: "none",
-                  background: "var(--color-brand-600)",
-                  fontSize: 13,
-                  fontWeight: 700,
-                  color: "#FFF",
-                  cursor: "pointer",
-                  display: "inline-flex",
-                  alignItems: "center",
-                  gap: 7,
-                  fontFamily: "var(--font-sans)",
-                  boxShadow: "0 1px 4px rgba(37,99,235,.35)",
-                  whiteSpace: "nowrap",
-                }}
-              >
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                  <line x1="12" y1="5" x2="12" y2="19" />
-                  <line x1="5" y1="12" x2="19" y2="12" />
-                </svg>
+              {/* CHANGE: custom <button> → Button variant="primary" */}
+              <Button type="button" variant="primary" onClick={() => setAddrFormTarget(null)}>
+                <i className="ti ti-plus" style={{ fontSize: 14 }} aria-hidden="true" />
                 إضافة عنوان
-              </button>
+              </Button>
             </div>
           </div>
 
@@ -620,46 +499,20 @@ export default function ClientAddressesPage() {
 
         {/* ── Address grid ── */}
         {addrLoading ? (
-          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", padding: "4rem 0", color: "var(--color-text-muted)", gap: 12, fontSize: 13 }}>
-            <div
-              style={{
-                width: 20,
-                height: 20,
-                borderRadius: "50%",
-                border: "2px solid var(--color-border)",
-                borderTopColor: "var(--color-brand-600)",
-                animation: "spin 0.7s linear infinite",
-                flexShrink: 0,
-              }}
-            />
-            جارٍ تحميل العناوين…
-          </div>
+          // CHANGE: hand-rolled spinning <div> → InlineLoader
+          <InlineLoader message="جارٍ تحميل العناوين…" />
         ) : addresses.length === 0 ? (
-          <div
-            style={{
-              borderRadius: "var(--radius-xl)",
-              border: "1px solid var(--color-border)",
-              background: "var(--color-surface)",
-              padding: "4rem 1rem",
-              textAlign: "center",
-              boxShadow: "var(--shadow-card)",
-            }}
-          >
-            <p style={{ fontSize: 32, margin: 0 }}>📍</p>
-            <p style={{ marginTop: 12, fontSize: 15, fontWeight: 700, color: "var(--color-text-primary)" }}>
-              لا توجد عناوين بعد
-            </p>
-            <p style={{ marginTop: 4, fontSize: 13, color: "var(--color-text-muted)" }}>
-              أضف عنواناً واحداً على الأقل حتى يتمكن العميل من استقبال الشحنات والفواتير.
-            </p>
-            <button
-              type="button"
-              onClick={() => setAddrFormTarget(null)}
-              style={{ marginTop: 16, fontSize: 13, fontWeight: 600, color: "var(--color-brand-600)", background: "none", border: "none", cursor: "pointer", textDecoration: "underline" }}
-            >
+          // CHANGE: custom empty-state <div> → EmptyState
+          <EmptyState
+            icon="📍"
+            title="لا توجد عناوين بعد"
+            description="أضف عنواناً واحداً على الأقل حتى يتمكن العميل من استقبال الشحنات والفواتير."
+            action={
+              <Button type="button" variant="primary" onClick={() => setAddrFormTarget(null)}>
                 أضف أول عنوان
-            </button>
-          </div>
+              </Button>
+            }
+          />
         ) : (
           <div
             style={{
@@ -672,6 +525,7 @@ export default function ClientAddressesPage() {
               <AddressCard
                 key={addr.id}
                 address={addr}
+                onView={() => setViewAddress(addr)}
                 onEdit={() => setAddrFormTarget(addr)}
                 onDelete={() => setDeleteTarget(addr)}
                 onSetPrimary={() => handleSetPrimary(addr)}

app/dashboard/clients/page.tsx

@@ -131,7 +131,7 @@ export default function ClientsPage() {
       </section>
 
       {/* Floating button to open the archive browser */}
-      <ArchiveButton onClick={() => setArchiveOpen(true)} label="أرشيف العملاء" />
+      <ArchiveButton onClick={() => setArchiveOpen(true)} label="الأرشيف" />
     </>
   );
 }

app/dashboard/drivers/[driverId]/page.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
-import { ConfirmDialog, Spinner } from "@/src/Components/UI";
+import { ConfirmDialog, Spinner, Button, Toast } from "@/src/Components/UI";
 import { DriverFormModal , PhotoCard } from "@/src/Components/Driver";
 import { DriverReportPanel } from "@/src/Components/Driver_Report/driverReport";
 import type { Driver, CreateDriverPayload, UpdateDriverPayload } from "@/src/types/driver";
@@ -164,14 +164,9 @@ export default function DriverDetailPage() {
     return (
       <div style={{ maxWidth: 480, margin: "4rem auto", borderRadius: "var(--radius-xl)", border: "1px solid #FECACA", background: "#FEF2F2", padding: "1.5rem", textAlign: "center" }}>
         <p style={{ fontSize: 14, color: "#DC2626", fontWeight: 600 }}>⚠ {error ?? "السائق غير موجود"}</p>
-        <button type="button" onClick={() => router.back()} style={{
-          marginTop: "1rem", height: 38, padding: "0 1.25rem",
-          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 variant="secondary" size="sm" onClick={() => router.back()} className="mt-4">
           ← رجوع
-        </button>
+        </Button>
       </div>
     );
   }
@@ -180,35 +175,16 @@ export default function DriverDetailPage() {
     <>
       <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
 
-        {toast && (
-          <div style={{
-            borderRadius: "var(--radius-lg)",
-            border: `1px solid ${toast.type === "success" ? "#BBF7D0" : "#FECACA"}`,
-            background: toast.type === "success" ? "#DCFCE7" : "#FEF2F2",
-            padding: "0.75rem 1.25rem",
-            fontSize: 13,
-            fontWeight: 600,
-            color: toast.type === "success" ? "#166534" : "#DC2626",
-          }}>
-            {toast.type === "success" ? "✓ " : "⚠ "}{toast.message}
-          </div>
-        )}
+        <Toast notification={toast} onDismiss={() => setToast(null)} />
 
         <header style={{
           borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)",
           background: "var(--color-surface)", padding: "1.5rem 2rem", boxShadow: "var(--shadow-card)",
         }}>
-          <button type="button" onClick={() => router.back()} style={{
-            display: "inline-flex", alignItems: "center", gap: 6,
-            fontSize: 12, fontWeight: 600, color: "var(--color-text-muted)",
-            background: "none", border: "none", cursor: "pointer", padding: 0,
-            marginBottom: "1rem", fontFamily: "var(--font-sans)",
-          }}>
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-              <path d="M19 12H5M12 5l-7 7 7 7" />
-            </svg>
+          <Button variant="ghost" size="sm" onClick={() => router.back()} className="mb-4 !px-0">
+            <i className="ti ti-arrow-left" style={{ fontSize: 14 }} aria-hidden="true" />
             العودة إلى قائمة السائقين
-          </button>
+          </Button>
 
           <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: "1rem" }}>
             <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
@@ -249,25 +225,13 @@ export default function DriverDetailPage() {
             </div>
 
             <div style={{ display: "flex", gap: "0.75rem" }}>
-              <button type="button" onClick={() => setDeleteOpen(true)} style={{
-                height: 40, padding: "0 1.25rem", borderRadius: "var(--radius-lg)",
-                border: "1px solid #FECACA", background: "#FEF2F2",
-                fontSize: 13, fontWeight: 700, color: "#DC2626", cursor: "pointer", fontFamily: "var(--font-sans)",
-              }}>
+              <Button variant="danger" onClick={() => setDeleteOpen(true)}>
                 حذف السائق
-              </button>
-              <button type="button" onClick={() => setEditOpen(true)} style={{
-                height: 40, padding: "0 1.25rem", borderRadius: "var(--radius-lg)",
-                border: "none", background: "var(--color-brand-600)",
-                fontSize: 13, fontWeight: 700, color: "#FFF", cursor: "pointer",
-                display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--font-sans)",
-              }}>
-                <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 variant="primary" onClick={() => setEditOpen(true)}>
+                <i className="ti ti-edit" style={{ fontSize: 14 }} aria-hidden="true" />
                 تعديل السائق
-              </button>
+              </Button>
             </div>
           </div>
         </header>

app/dashboard/drivers/page.tsx

@@ -1,91 +1,20 @@
 "use client";
 
 import { useState, useCallback } from "react";
-import {
-  Alert,
-  Spinner,
-  ArchiveButton,
-  ConfirmDialog,
-} from "@/src/Components/UI";
+import { Alert, ArchiveButton, ConfirmDialog } from "@/src/Components/UI";
 import { ArchivedDrivers } from "@/src/Components/Driver/archive/ArchivedDrivers";
+import { DriverTable } from "@/src/Components/Driver/DriverTable";
 import { useDrivers } from "@/src/hooks/useDriver";
-import {
-  CreateDriverPayload,
-  Driver,
-  DRIVER_STATUS_MAP,
-  UpdateDriverPayload,
-} from "@/src/types/driver";
-import { DriverDetailPanel, DriverFormModal } from "@/src/Components/Driver";
-import Header from "@/src/Components/UI/Header";
-
-// ── Helpers ───────────────────────────────────────────────────────────────────
-
-function fmtDate(iso?: string | null): string {
-  if (!iso) return "—";
-  return new Date(iso).toLocaleDateString("ar-SA", {
-    year: "numeric",
-    month: "short",
-    day: "numeric",
-  });
-}
-
-function expirySoon(iso?: string | null): boolean {
-  if (!iso) return false;
-  return (new Date(iso).getTime() - Date.now()) / 86_400_000 <= 90;
-}
-
-// ── 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)",
-};
-
-// Shared across header + rows — keep these in sync or columns will misalign.
-const ROW_GRID_COLUMNS = "2fr 1.2fr 1fr 1.1fr 1.1fr 1fr 0.8fr";
-
-const iconBtnBase: React.CSSProperties = {
-  width: 30,
-  height: 30,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  borderRadius: "var(--radius-md)",
-  cursor: "pointer",
-  flexShrink: 0,
-};
+import { CreateDriverPayload, Driver, UpdateDriverPayload } from "@/src/types/driver";
+import { DriverDetailPanel, DriverFormModal , } from "@/src/Components/Driver";
 
 // ── Page Component ────────────────────────────────────────────────────────────
 
 export default function DriversPage() {
   const {
-    drivers,
-    loading,
-    error,
-    total,
-    pages,
-    page,
-    search,
-    setPage,
-    handleSearch,
-    clearError,
-    createDriver,
-    updateDriver,
-    deleteDriver,
+    drivers, loading, error, total, pages, page,
+    search, setPage, handleSearch, clearError,
+    createDriver, updateDriver, deleteDriver,
     notification,
   } = useDrivers();
 
@@ -155,323 +84,101 @@ export default function DriversPage() {
   // ── Render ────────────────────────────────────────────────────────────────
   return (
     <>
-      <section
-        style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}
-      >
+      <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
+
         {/* ── Header ── */}
-        <Header
-          mainTitle="إدارة السائقين"
-          title="السائقون"
-          name="سائق"
-          state={{ total }}
-          search={search}
-          setSearch={handleSearch}
-          module=""
-          setModule={() => {}}
-          setPage={setPage}
-          isAudit={false}
-          onAdd={() => setFormDriver("new")}
+        <header style={{
+          borderRadius: "var(--radius-xl)",
+          border: "1px solid var(--color-border)",
+          background: "var(--color-surface)",
+          padding: "1.5rem 2rem",
+          boxShadow: "var(--shadow-card)",
+        }}>
+          <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600 }}>
+            إدارة الكوادر
+          </p>
+          <div style={{ marginTop: "0.75rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
+            <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: "1rem" }}>
+              <div>
+                <h1 style={{ fontSize: "1.5rem", fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>
+                  السائقون
+                </h1>
+                <p style={{ marginTop: "0.25rem", fontSize: 13, color: "var(--color-text-muted)" }}>
+                  إجمالي{" "}
+                  <strong style={{ color: "var(--color-text-primary)" }}>{total}</strong>{" "}
+                  سائق مسجل
+                </p>
+              </div>
+
+              <div style={{ display: "flex", gap: "0.75rem", alignItems: "center", flexWrap: "wrap" }}>
+                {/* Search */}
+                <div style={{ position: "relative", width: 288 }}>
+                  <i
+                    className="ti ti-search"
+                    aria-hidden="true"
+                    style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", fontSize: 16, color: "var(--color-text-hint)", pointerEvents: "none" }}
                   />
+                  <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, color: "var(--color-text-primary)",
+                      outline: "none", fontFamily: "var(--font-sans)",
+                    }}
+                  />
+                </div>
+
+                {/* Add button */}
+                <button
+                  type="button"
+                  onClick={() => setFormDriver("new")}
+                  style={{
+                    height: 40, padding: "0 1.25rem",
+                    borderRadius: "var(--radius-lg)",
+                    border: "none",
+                    background: "var(--color-brand-600)",
+                    fontSize: 13, fontWeight: 700, color: "#FFF",
+                    cursor: "pointer",
+                    display: "flex", alignItems: "center", gap: 8,
+                    fontFamily: "var(--font-sans)",
+                    flexShrink: 0,
+                  }}
+                >
+                  <i className="ti ti-plus" style={{ fontSize: 15 }} aria-hidden="true" />
+                  إضافة سائق
+                </button>
+              </div>
+            </div>
+          </div>
+        </header>
 
         {/* ── Notifications ── */}
         {notification && (
           <Alert type={notification.type} message={notification.message} />
         )}
-        {error && <Alert type="error" message={error} onClose={clearError} />}
+        {error && (
+          <Alert type="error" message={error} onClose={clearError} />
+        )}
 
         {/* ── Table ── */}
-        <div style={cardStyle}>
-          <div
-            dir="rtl"
-            style={{
-              display: "grid",
-              gridTemplateColumns: ROW_GRID_COLUMNS,
-              ...thStyle,
-            }}
-          >
-            <span>السائق</span>
-            <span>الفرع</span>
-            <span>الجنسية</span>
-            <span>انتهاء الرخصة</span>
-            <span>انتهاء الهوية</span>
-            <span>الحالة</span>
-            <span>إجراءات</span>
-          </div>
-
-          {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>
-          ) : drivers.length === 0 ? (
-            <p
-              style={{
-                textAlign: "center",
-                padding: "4rem 0",
-                fontSize: 13,
-                color: "var(--color-text-muted)",
-              }}
-            >
-              لا توجد نتائج {search && `لـ "${search}"`}
-            </p>
-          ) : (
-            <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
-              {drivers.map((d, i) => {
-                const statusCfg =
-                  DRIVER_STATUS_MAP[d.status] ?? DRIVER_STATUS_MAP.Inactive;
-                const licWarn = expirySoon(d.licenseExpiry);
-                const idWarn = expirySoon(
-                  (d as Driver & { nationalIdExpiry?: string })
-                    .nationalIdExpiry,
-                );
-
-                return (
-                  <li
-                    key={d.id}
-                    onClick={() => setSelectedDriverId(d.id)}
-                    style={{
-                      display: "grid",
-                      gridTemplateColumns: ROW_GRID_COLUMNS,
-                      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,
-                      cursor: "pointer",
-                      transition: "background 0.15s",
-                    }}
-                    onMouseEnter={(e) =>
-                      (e.currentTarget.style.background =
-                        "var(--color-surface-hover, #F8FAFC)")
-                    }
-                    onMouseLeave={(e) =>
-                      (e.currentTarget.style.background =
-                        i % 2 !== 0
-                          ? "var(--color-surface-muted)"
-                          : "transparent")
-                    }
-                  >
-                    <div>
-                      <p
-                        style={{
-                          fontWeight: 600,
-                          color: "var(--color-text-primary)",
-                          margin: 0,
-                        }}
-                      >
-                        {d.name}
-                      </p>
-                      <p
-                        style={{
-                          marginTop: 2,
-                          fontFamily: "var(--font-mono)",
-                          fontSize: 11,
-                          color: "var(--color-text-muted)",
-                        }}
-                      >
-                        {d.phone}
-                      </p>
-                    </div>
-                    <span style={{ color: "var(--color-text-secondary)" }}>
-                      {d.branch?.name ?? "—"}
-                    </span>
-                    <span style={{ color: "var(--color-text-secondary)" }}>
-                      {d.nationality ?? "—"}
-                    </span>
-                    <span
-                      style={{
-                        fontSize: 12,
-                        fontWeight: licWarn ? 600 : 400,
-                        color: licWarn
-                          ? "#D97706"
-                          : "var(--color-text-secondary)",
-                      }}
-                    >
-                      {licWarn && "⚠ "}
-                      {fmtDate(d.licenseExpiry)}
-                    </span>
-                    <span
-                      style={{
-                        fontSize: 12,
-                        fontWeight: idWarn ? 600 : 400,
-                        color: idWarn
-                          ? "#D97706"
-                          : "var(--color-text-secondary)",
-                      }}
-                    >
-                      {idWarn && "⚠ "}
-                      {fmtDate(
-                        (d as Driver & { nationalIdExpiry?: string })
-                          .nationalIdExpiry,
-                      )}
-                    </span>
-                    <span
-                      style={{
-                        display: "inline-flex",
-                        alignItems: "center",
-                        gap: 5,
-                        borderRadius: "var(--radius-full)",
-                        border: `1px solid ${statusCfg.border}`,
-                        background: statusCfg.bg,
-                        padding: "0.2rem 0.625rem",
-                        fontSize: 11,
-                        fontWeight: 600,
-                        color: statusCfg.color,
-                        width: "fit-content",
-                      }}
-                    >
-                      <span
-                        style={{
-                          width: 6,
-                          height: 6,
-                          borderRadius: "50%",
-                          background: statusCfg.dot,
-                          flexShrink: 0,
-                        }}
+        <DriverTable
+          drivers={drivers}
+          loading={loading}
+          search={search}
+          page={page}
+          pages={pages}
+          onPageChange={setPage}
+          onRowClick={(d) => setSelectedDriverId(d.id)}
+          onEdit={handleEdit}
+          onDelete={handleDelete}
         />
-                      {statusCfg.label}
-                    </span>
-
-                    {/* ── Inline row actions: edit / delete ──
-                         stopPropagation is required on both buttons so the
-                         click doesn't bubble up to the <li> onClick and
-                         open the detail panel as well. */}
-                    <div style={{ display: "flex", gap: "0.4rem" }}>
-                      <button
-                        type="button"
-                        aria-label="تعديل السائق"
-                        title="تعديل"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          handleEdit(d);
-                        }}
-                        style={{
-                          ...iconBtnBase,
-                          border: "1px solid var(--color-brand-200)",
-                          background: "var(--color-brand-50, #EFF6FF)",
-                          color: "var(--color-brand-600)",
-                        }}
-                      >
-                        <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
-                        type="button"
-                        aria-label="حذف السائق"
-                        title="حذف"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          handleDelete(d);
-                        }}
-                        style={{
-                          ...iconBtnBase,
-                          border: "1px solid #FECACA",
-                          background: "#FEF2F2",
-                          color: "#DC2626",
-                        }}
-                      >
-                        <svg
-                          width="14"
-                          height="14"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth="2"
-                        >
-                          <polyline points="3 6 5 6 21 6" />
-                          <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
-                          <path d="M10 11v6M14 11v6" />
-                          <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
-                        </svg>
-                      </button>
-                    </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: () => setPage((p) => Math.max(1, p - 1)),
-                    disabled: page === 1,
-                  },
-                  {
-                    label: "التالي",
-                    action: () => setPage((p) => Math.min(pages, p + 1)),
-                    disabled: page === pages,
-                  },
-                ].map((btn) => (
-                  <button
-                    key={btn.label}
-                    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>
       </section>
 
       {/* ── Detail panel — key forces re-fetch after successful edit ── */}
@@ -506,7 +213,9 @@ export default function DriversPage() {
       />
 
       {/* ── Archive browser modal ── */}
-      {archiveOpen && <ArchivedDrivers onClose={() => setArchiveOpen(false)} />}
+      {archiveOpen && (
+        <ArchivedDrivers onClose={() => setArchiveOpen(false)} />
+      )}
 
       {/* ── Floating button to open the archive browser ── */}
       <ArchiveButton onClick={() => setArchiveOpen(true)} />

app/dashboard/orders/page.tsx

@@ -3,64 +3,13 @@
 
 
 import { useState, useCallback } from "react";
-import { Alert, Spinner, Toast, ArchiveButton, ConfirmDialog } from "@/src/Components/UI";
-import {  ORDER_STATUS_MAP } from "@/src/Components/Order/OrderDetailBanel";
+import { Alert, Toast, ArchiveButton, ConfirmDialog } from "@/src/Components/UI";
+import {  ORDER_STATUS_MAP } from "@/src/Components/Order/OrderDetailModel";
+import { OrderTable } from "@/src/Components/Order/OrderTable";
 import { ArchivedOrdersModal } from "@/src/Components/Order/archive/ArchivedOrdersModal";
 import { useOrders } from "@/src/hooks/useOrder";
 import type { CreateOrderPayload, Order, UpdateOrderPayload } from "@/src/types/order";
 import { OrderFormModal ,  OrderDetailPanel} from "@/src/Components/Order";
-import Header from "@/src/Components/UI/Header";
-
-// ── Helpers — copied verbatim from app/dashboard/drivers/page.tsx ───────
-
-function fmtDate(iso?: string | null): string {
-  if (!iso) return "—";
-  return new Date(iso).toLocaleDateString("ar-SA", {
-    year: "numeric", month: "short", day: "numeric",
-  });
-}
-
-function fmtAmount(n?: number | null): string {
-  if (n == null) return "—";
-  return `${n.toFixed(2)} ر.س`;
-}
-
-// ── Styles — identical tokens/values to the Drivers page, per the
-//    "no new styles" constraint; only column widths differ to fit Order's
-//    field set (shipment / recipient / client / amount / status / actions).
-
-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)",
-};
-
-// Shared across header + rows — keep these in sync or columns will misalign.
-const ROW_GRID_COLUMNS = "1.6fr 1.6fr 1.2fr 1.1fr 1fr 0.8fr";
-
-const iconBtnBase: React.CSSProperties = {
-  width: 30,
-  height: 30,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  borderRadius: "var(--radius-md)",
-  cursor: "pointer",
-  flexShrink: 0,
-};
 
 // ── Page Component ───────────────────────────────────────────────────────
 
@@ -143,18 +92,97 @@ export default function OrderComponent() {
       <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
 
         {/* ── Header ── */}
-        <Header mainTitle="إدارة الطلبات"
-          title="الطلبات"
-          name="طلب"
-          state={{ total }}
-          search={search}
-          setSearch={handleSearch}
-          module=""
-          setModule={() => {}}
-          setPage={setPage}
-          isAudit={false}
-          onAdd={() => setFormOrder("new")}/>
+        <header style={{
+          borderRadius: "var(--radius-xl)",
+          border: "1px solid var(--color-border)",
+          background: "var(--color-surface)",
+          padding: "1.5rem 2rem",
+          boxShadow: "var(--shadow-card)",
+        }}>
+          <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600 }}>
+            إدارة الشحنات
+          </p>
+          <div style={{ marginTop: "0.75rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
+            <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: "1rem" }}>
+              <div>
+                <h1 style={{ fontSize: "1.5rem", fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>
+                  الطلبات
+                </h1>
+                <p style={{ marginTop: "0.25rem", fontSize: 13, color: "var(--color-text-muted)" }}>
+                  إجمالي{" "}
+                  <strong style={{ color: "var(--color-text-primary)" }}>{total}</strong>{" "}
+                  طلب مسجل
+                </p>
+              </div>
 
+              <div style={{ display: "flex", gap: "0.75rem", alignItems: "center", flexWrap: "wrap" }}>
+                {/* Status filter — ported from app/dashboard/orders/page.tsx */}
+                <select
+                  value={statusFilter}
+                  onChange={(e) => handleStatusFilter(e.target.value)}
+                  dir="rtl"
+                  style={{
+                    height: 40, borderRadius: "var(--radius-lg)",
+                    border: "1px solid var(--color-border)",
+                    background: "var(--color-surface)",
+                    fontSize: 13, color: "var(--color-text-secondary)",
+                    padding: "0 0.75rem", outline: "none",
+                    fontFamily: "var(--font-sans)", cursor: "pointer",
+                  }}
+                >
+                  <option value="">كل الحالات</option>
+                  {Object.entries(ORDER_STATUS_MAP).map(([k, v]) => (
+                    <option key={k} value={k}>{v.label}</option>
+                  ))}
+                </select>
+
+                {/* Search */}
+                <div style={{ position: "relative", width: 288 }}>
+                  <i
+                    className="ti ti-search"
+                    aria-hidden="true"
+                    style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", fontSize: 16, color: "var(--color-text-hint)", pointerEvents: "none" }}
+                  />
+                  <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, color: "var(--color-text-primary)",
+                      outline: "none", fontFamily: "var(--font-sans)",
+                    }}
+                  />
+                </div>
+
+                {/* Add button */}
+                <button
+                  type="button"
+                  onClick={() => setFormOrder("new")}
+                  style={{
+                    height: 40, padding: "0 1.25rem",
+                    borderRadius: "var(--radius-lg)",
+                    border: "none",
+                    background: "var(--color-brand-600)",
+                    fontSize: 13, fontWeight: 700, color: "#FFF",
+                    cursor: "pointer",
+                    display: "flex", alignItems: "center", gap: 8,
+                    fontFamily: "var(--font-sans)",
+                    flexShrink: 0,
+                  }}
+                >
+                  <i className="ti ti-plus" style={{ fontSize: 15 }} aria-hidden="true" />
+                  إضافة طلب
+                </button>
+              </div>
+            </div>
+          </div>
+        </header>
 
         {/* ── Notifications: page-level error banner (e.g. failed list load)
              dismissible via clearError() from the hook. Action-result
@@ -167,171 +195,17 @@ export default function OrderComponent() {
         )}
 
         {/* ── Table ── */}
-        <div style={cardStyle}>
-          <div
-            dir="rtl"
-            style={{
-              display: "grid",
-              gridTemplateColumns: ROW_GRID_COLUMNS,
-              ...thStyle,
-            }}
-          >
-            <span>رقم الشحنة</span>
-            <span>المستلم</span>
-            <span>العميل</span>
-            <span>المبلغ</span>
-            <span>الحالة</span>
-            <span>إجراءات</span>
-          </div>
-
-          {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>
-          ) : orders.length === 0 ? (
-            <p style={{ textAlign: "center", padding: "4rem 0", fontSize: 13, color: "var(--color-text-muted)" }}>
-              لا توجد نتائج {search && `لـ "${search}"`}
-            </p>
-          ) : (
-            <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
-              {orders.map((o, i) => {
-                const statusCfg = ORDER_STATUS_MAP[o.currentStatus] ?? ORDER_STATUS_MAP.Created;
-
-                return (
-                  <li
-                    key={o.id}
-                    onClick={() => setSelectedOrderId(o.id)}
-                    style={{
-                      display: "grid",
-                      gridTemplateColumns: ROW_GRID_COLUMNS,
-                      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,
-                      cursor: "pointer",
-                      transition: "background 0.15s",
-                    }}
-                    onMouseEnter={(e) => (e.currentTarget.style.background = "var(--color-surface-hover, #F8FAFC)")}
-                    onMouseLeave={(e) => (e.currentTarget.style.background = i % 2 !== 0 ? "var(--color-surface-muted)" : "transparent")}
-                  >
-                    <div>
-                      <p style={{ fontWeight: 600, fontFamily: "var(--font-mono)", color: "#2563EB", margin: 0 }}>{o.shipmentNumber}</p>
-                      <p style={{ marginTop: 2, fontSize: 11, color: "var(--color-text-muted)" }}>{fmtDate(o.createdAt)}</p>
-                    </div>
-                    <div>
-                      <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>{o.recipientName}</p>
-                      <p style={{ marginTop: 2, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--color-text-muted)" }}>{o.recipientPhone}</p>
-                    </div>
-                    <span style={{ color: "var(--color-text-secondary)" }}>{o.client?.name ?? "—"}</span>
-                    <span style={{ fontWeight: 600, color: "var(--color-text-primary)", fontFamily: "var(--font-mono)" }}>
-                      {fmtAmount(o.totalPrice)}
-                    </span>
-                    <span style={{
-                      display: "inline-flex", alignItems: "center", gap: 5,
-                      borderRadius: "var(--radius-full)",
-                      border: `1px solid ${statusCfg.border}`,
-                      background: statusCfg.bg,
-                      padding: "0.2rem 0.625rem",
-                      fontSize: 11, fontWeight: 600, color: statusCfg.color,
-                      width: "fit-content",
-                    }}>
-                      <span style={{ width: 6, height: 6, borderRadius: "50%", background: statusCfg.dot, flexShrink: 0 }} />
-                      {statusCfg.label}
-                    </span>
-
-                    {/* ── Inline row actions: edit / delete ──
-                         stopPropagation is required on both buttons so the
-                         click doesn't bubble up to the <li> onClick and
-                         open the detail panel as well. */}
-                    <div style={{ display: "flex", gap: "0.4rem" }}>
-                      <button
-                        type="button"
-                        aria-label="تعديل الطلب"
-                        title="تعديل"
-                        onClick={(e) => { e.stopPropagation(); handleEdit(o); }}
-                        style={{
-                          ...iconBtnBase,
-                          border: "1px solid var(--color-brand-200)",
-                          background: "var(--color-brand-50, #EFF6FF)",
-                          color: "var(--color-brand-600)",
-                        }}
-                      >
-                        <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
-                        type="button"
-                        aria-label="حذف الطلب"
-                        title="حذف"
-                        onClick={(e) => { e.stopPropagation(); handleDelete(o); }}
-                        style={{
-                          ...iconBtnBase,
-                          border: "1px solid #FECACA",
-                          background: "#FEF2F2",
-                          color: "#DC2626",
-                        }}
-                      >
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                          <polyline points="3 6 5 6 21 6" />
-                          <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
-                          <path d="M10 11v6M14 11v6" />
-                          <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
-                        </svg>
-                      </button>
-                    </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: () => setPage(p => Math.max(1, p - 1)),     disabled: page === 1     },
-                  { label: "التالي", action: () => setPage(p => Math.min(pages, p + 1)), disabled: page === pages },
-                ].map(btn => (
-                  <button
-                    key={btn.label}
-                    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>
+        <OrderTable
+          orders={orders}
+          loading={loading}
+          search={search}
+          page={page}
+          pages={pages}
+          setPage={setPage}
+          onRowClick={(orderId) => setSelectedOrderId(orderId)}
+          onEdit={handleEdit}
+          onDelete={handleDelete}
+        />
       </section>
 
       {/* ── Detail panel — key forces re-fetch after a successful edit or

app/dashboard/page.tsx

@@ -1,15 +1,21 @@
 "use client";
 
-import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useEffect, useMemo } from "react";
-import { useDashboardSummary } from "@/src/hooks/useDashboardSummary";
+import { useEffect } from "react";
 import { clearAuth, getStoredUser } from "@/src/lib/auth";
 import { Spinner, Alert } from "@/src/Components/UI";
+import { useDashboardOverview } from "@/src/hooks/useDashboardOverview";
+import {
+  KpiSection,
+  AlertsSection,
+  RecentActivityPanel,
+  TrendChartsPanel,
+  QuickAccessFooter,
+} from "@/src/Components/Dashboard";
 
 export default function DashboardPage() {
   const router = useRouter();
-  const { data, error, loading } = useDashboardSummary();
+  const { data, error, loading } = useDashboardOverview();
 
   useEffect(() => {
     const storedUser = getStoredUser();
@@ -20,20 +26,8 @@ export default function DashboardPage() {
     }
   }, [router]);
 
-  const stats       = data?.stats;
-  const alerts      = data?.alerts;
   const activeTrips = data?.activeTrips || [];
 
-  const summaryCards = useMemo(
-    () => [
-      { label: "العملاء",  value: stats?.clients ?? 0,                         accent: "#06B6D4" },
-      { label: "الطلبات",  value: stats?.orders ?? 0,                          accent: "#A78BFA" },
-      { label: "الرحلات",  value: stats?.trips ?? 0,                           accent: "#34D399" },
-      { label: "المركبات و السائقين ", value: (stats?.cars ?? 0) + (stats?.drivers ?? 0),  accent: "#FBBF24" },
-    ],
-    [stats],
-  );
-
   return (
     <section className="flex flex-col gap-6">
 
@@ -57,15 +51,14 @@ export default function DashboardPage() {
               ذكاء الأسطول في لمحة سريعة
             </h1>
             <p style={{ marginTop: "0.75rem", maxWidth: 680, color: "var(--color-text-dark-muted)", fontSize: 14, lineHeight: 1.6, textAlign: "start" }}>
-              عرض واضح لطلبات الأسطول وتنبيهات السلامة وتقدم الرحلات.
+              عرض واضح لكل وحدة من وحدات المنصة، مع تنبيهات فورية واتجاهات الأداء.
             </p>
           </div>
-         
         </div>
       </header>
 
       {/* ── Loading ── */}
-      {loading && (
+      {loading && !data && (
         <div style={{ display: "flex", alignItems: "center", gap: 12, color: "var(--color-text-dark-muted)" }}>
           <Spinner size="sm" className="text-cyan-400" />
           <span style={{ fontSize: 14 }}>جارٍ تحميل البيانات…</span>
@@ -74,43 +67,25 @@ export default function DashboardPage() {
 
       {/* ── Error ── */}
       {error && (
-        <Alert type="error" message={error}
-          className="border-rose-400/30 bg-rose-500/10 text-rose-100" />
+        <Alert type="error" message={error} className="border-rose-400/30 bg-rose-500/10 text-rose-100" />
       )}
 
-      {!loading && !error && (
-        <>
-          {/* ── Summary cards ── */}
-          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-            {summaryCards.map((item) => (
-              <article
-                key={item.label}
-                style={{
-                  borderRadius: "var(--radius-2xl)",
-                  border: "1px solid var(--color-border-dark)",
-                  background: "var(--color-surface-dark-card)",
-                  padding: "1.25rem",
-                  boxShadow: "var(--shadow-card)",
-                }}
-              >
-                <div style={{ height: 3, borderRadius: 999, background: item.accent, marginBottom: "1rem" }} />
-                <p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "var(--color-text-dark-muted)", textAlign: "start" }}>
-                  {item.label}
-                </p>
-                <p style={{ fontSize: "2.25rem", fontWeight: 600, color: "var(--color-text-dark-primary)", marginTop: "0.5rem", textAlign: "start" }}>
-                  {item.value}
-                </p>
-              </article>
-            ))}
+      {/* ── KPI Section: total / active / pending per entity (9 cards) ── */}
+      <KpiSection entities={data?.entities ?? []} loading={loading && !data} />
+
+      {/* ── Alerts Section: urgent cross-entity issues ── */}
+      <AlertsSection alerts={data?.alerts ?? []} loading={loading && !data} />
+
+      {/* ── Insights Row: recent activity log + trend charts ── */}
+      <div className="grid gap-6 xl:grid-cols-[1.1fr_0.9fr]">
+        <RecentActivityPanel logs={data?.recentActivity ?? []} loading={loading && !data} />
+        <TrendChartsPanel series={data?.trends ?? []} loading={loading && !data} />
       </div>
 
-          {/* ── Active trips + alerts ──
-              Column order in the template below stays [trips, alerts] —
-              same reading order as before. In RTL this now renders
-              trips on the right (read first) and alerts on the left,
-              which is the correct mirror; no class change needed (see
-              grid + RTL note in the project report). */}
-          <div className="grid gap-6 xl:grid-cols-[1.1fr_0.9fr]">
+      {/* ── Quick access to every entity page (minimizes navigation clicks) ── */}
+      <QuickAccessFooter />
+
+      {/* ── Active trips (kept from the previous layout — live operational detail) ── */}
       <article style={{ borderRadius: "var(--radius-2xl)", border: "1px solid var(--color-border-dark)", background: "var(--color-surface-dark-card)", padding: "1.5rem", boxShadow: "var(--shadow-card)" }}>
         <div className="flex items-center justify-between">
           <div>
@@ -136,14 +111,6 @@ export default function DashboardPage() {
                 </span>
               </div>
               <div style={{ marginTop: "0.75rem", height: 6, borderRadius: 999, background: "rgba(255,255,255,0.08)" }}>
-                      {/*
-                        Progress fill: width % growing from the bar's
-                        start edge is correct in both directions since
-                        `width` itself is non-directional — the bar's
-                        own inline-start (right, in RTL) is where the
-                        fill begins, matching how the rest of the RTL
-                        layout fills from the right. No change needed.
-                      */}
                 <div style={{ height: 6, borderRadius: 999, width: `${trip.progress}%`, background: "linear-gradient(90deg,#06B6D4,#34D399)" }} />
               </div>
             </div>
@@ -153,32 +120,6 @@ export default function DashboardPage() {
         </div>
       </article>
 
-            <article style={{ borderRadius: "var(--radius-2xl)", border: "1px solid var(--color-border-dark)", background: "var(--color-surface-dark-card)", padding: "1.5rem", boxShadow: "var(--shadow-card)" }}>
-              <p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "#FCD34D", textAlign: "start" }}>تنبيهات الالتزام</p>
-              <h2 style={{ fontSize: "1.25rem", fontWeight: 600, color: "var(--color-text-dark-primary)", marginTop: "0.5rem", textAlign: "start" }}>التجديدات القادمة</h2>
-              <div style={{ marginTop: "1.5rem", display: "flex", flexDirection: "column", gap: "0.75rem" }}>
-                {(alerts?.expiringCars || []).slice(0, 3).map((item, i) => (
-                  <div key={`car-${i}`} style={{ borderRadius: "var(--radius-xl)", border: "1px solid rgba(251,191,36,0.20)", background: "rgba(251,191,36,0.06)", padding: "0.75rem 1rem", fontSize: 13, color: "var(--color-text-dark-primary)", textAlign: "start" }}>
-                    {String((item as Record<string, unknown>).message || "Vehicle expiry alert")}
-                  </div>
-                ))}
-                {(alerts?.expiringDrivers || []).slice(0, 3).map((item, i) => (
-                  <div key={`driver-${i}`} style={{ borderRadius: "var(--radius-xl)", border: "1px solid rgba(251,113,133,0.20)", background: "rgba(244,63,94,0.06)", padding: "0.75rem 1rem", fontSize: 13, color: "var(--color-text-dark-primary)", textAlign: "start" }}>
-                    {String((item as Record<string, unknown>).message || "Driver expiry alert")}
-                  </div>
-                ))}
-                {(alerts?.upcomingMaint || []).slice(0, 3).map((item, i) => (
-                  <div key={`maint-${i}`} style={{ borderRadius: "var(--radius-xl)", border: "1px solid rgba(103,232,249,0.20)", background: "rgba(103,232,249,0.06)", padding: "0.75rem 1rem", fontSize: 13, color: "var(--color-text-dark-primary)", textAlign: "start" }}>
-                    {String((item as Record<string, unknown>).message || "Maintenance alert")}
-                  </div>
-                ))}
-                {!(alerts?.expiringCars?.length || alerts?.expiringDrivers?.length || alerts?.upcomingMaint?.length) && (
-                  <p style={{ fontSize: 13, color: "var(--color-text-dark-muted)", textAlign: "start" }}>لا توجد تنبيهات حالياً.</p>
-                )}
-              </div>
-            </article>
-          </div>
-
       {/* ── Security + endpoints ── */}
       <div className="grid gap-6 lg:grid-cols-2">
         <article style={{ borderRadius: "var(--radius-2xl)", border: "1px solid var(--color-border-dark)", background: "var(--color-surface-dark-card)", padding: "1.5rem", boxShadow: "var(--shadow-card)" }}>
@@ -189,14 +130,6 @@ export default function DashboardPage() {
               آخر تسجيل دخول: <span className="ltr-embed">{data?.accountSecurity?.lastLogin || "—"}</span>
             </div>
             <div style={{ borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border-dark)", background: "var(--color-surface-dark-raised)", padding: "0.875rem 1rem", fontSize: 13, color: "var(--color-text-dark-muted)", textAlign: "start" }}>
-                  {/*
-                    JSON.stringify output is structurally LTR (braces,
-                    colons, commas read left-to-right regardless of
-                    locale). Wrapping it in .ltr-embed prevents the
-                    surrounding RTL paragraph from reordering the
-                    punctuation — without this, nested objects can
-                    render with their braces visually swapped.
-                  */}
               بيانات الجهاز: <span className="ltr-embed">{data?.accountSecurity?.requestMeta ? JSON.stringify(data.accountSecurity.requestMeta) : "—"}</span>
             </div>
           </div>
@@ -207,20 +140,12 @@ export default function DashboardPage() {
           <h2 style={{ fontSize: "1.25rem", fontWeight: 600, color: "var(--color-text-dark-primary)", marginTop: "0.5rem", textAlign: "start" }}>النقاط النهائية</h2>
           <ul style={{ marginTop: "1.5rem", display: "flex", flexDirection: "column", gap: "0.75rem", listStyle: "none", padding: 0 }}>
             {[
-                  "/v1/dashboard/summary — نظرة عامة تشغيلية",
+              "/v1/dashboard/overview — نظرة عامة تشغيلية",
               "/v1/client — إدارة العملاء",
               "/v1/orders — دورة شحن الطلبات",
               "/v1/trip — تنظيم الرحلات",
             ].map((ep) => (
               <li key={ep} style={{ borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border-dark)", background: "var(--color-surface-dark-raised)", padding: "0.875rem 1rem", fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--color-text-dark-muted)", textAlign: "start" }}>
-                    {/*
-                      Each entry mixes an LTR API path with an Arabic
-                      description. Splitting on the em-dash and
-                      isolating only the path keeps the route string
-                      from reading backwards while letting the Arabic
-                      half flow naturally in the paragraph's own
-                      direction.
-                    */}
                 <span className="ltr-embed">{ep.split(" — ")[0]}</span>
                 {" — "}
                 {ep.split(" — ")[1]}
@@ -229,8 +154,6 @@ export default function DashboardPage() {
           </ul>
         </article>
       </div>
-        </>
-      )}
     </section>
   );
 }

app/dashboard/role_permission/page.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function page() {
+  return (
+    <div>page</div>
+  )
+}

app/dashboard/trips/[tripId]/page.tsx

@@ -1,9 +1,11 @@
 "use client";
 
+
+
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
-import { ConfirmDialog, Spinner } from "@/src/Components/UI";
-import { TripFormModal } from "@/src/Components/Trip/Tripformmodal";
+import { Button, ConfirmDialog, Spinner } from "@/src/Components/UI";
+import { TripFormModal } from "@/src/Components/Trip";
 import { TripReportPanel } from "@/src/Components/Trip_Report/Tripreportpanel";
 import { tripService } from "@/src/services/trip.service";
 import { getStoredToken } from "@/src/lib/auth";
@@ -213,7 +215,7 @@ export default function TripDetailPage() {
       const data = await tripService.getById(tripId, token);
       setTrip(data);
     } catch (err: unknown) {
-    setError(err instanceof Error ? err.message : "تعذّر تحميل بيانات الرحلة.");
+      setError(extractApiMessage(err, "تعذّر تحميل بيانات الرحلة."));
     } finally {
       setLoading(false);
     }
@@ -295,25 +297,9 @@ export default function TripDetailPage() {
         <p style={{ fontSize: 14, color: "#DC2626", fontWeight: 600 }}>
           ⚠ {error ?? "الرحلة غير موجودة"}
         </p>
-        <button
-          type="button"
-          onClick={() => router.back()}
-          style={{
-            marginTop: "1rem",
-            height: 38,
-            padding: "0 1.25rem",
-            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 variant="secondary" size="sm" onClick={() => router.back()} style={{ marginTop: "1rem" }}>
           ← رجوع
-        </button>
+        </Button>
       </div>
     );
   }
@@ -337,29 +323,15 @@ export default function TripDetailPage() {
           }}
         >
           {/* Back link */}
-          <button
-            type="button"
+          <Button
+            variant="ghost"
+            size="sm"
             onClick={() => router.back()}
-            style={{
-              display: "inline-flex",
-              alignItems: "center",
-              gap: 6,
-              fontSize: 12,
-              fontWeight: 600,
-              color: "var(--color-text-muted)",
-              background: "none",
-              border: "none",
-              cursor: "pointer",
-              padding: 0,
-              marginBottom: "1rem",
-              fontFamily: "var(--font-sans)",
-            }}
+            style={{ height: "auto", padding: 0, background: "none", marginBottom: "1rem" }}
           >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-              <path d="M19 12H5M12 5l-7 7 7 7" />
-            </svg>
+            <i className="ti ti-arrow-left" style={{ fontSize: 14 }} aria-hidden="true" />
             العودة إلى قائمة الرحلات
-          </button>
+          </Button>
 
           <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: "1rem" }}>
             {/* Icon + title */}
@@ -456,10 +428,7 @@ export default function TripDetailPage() {
                   fontFamily: "var(--font-sans)",
                 }}
               >
-                <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>
+                <i className="ti ti-edit" style={{ fontSize: 14 }} aria-hidden="true" />
                 تعديل الرحلة
               </button>
             </div>

app/dashboard/trips/archived/[tripId]/page.tsx

@@ -1,110 +1,19 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { useParams, useRouter } from "next/navigation";
-import { Spinner, EmptyState, Badge, PageHeader } from "@/src/Components/UI";
-import { tripService } from "@/src/services/trip.service";
-import { getStoredToken } from "@/src/lib/auth";
-import type { Trip } from "@/src/types/trip";
-import { TRIP_STATUS_MAP } from "@/src/types/trip";
+import { ArchivedTripDetailModal } from "@/src/Components/Trip/archive/ArchivedtripDetailModal";
 
-function fmtDateTime(iso?: string | null): string {
-  if (!iso) return "—";
-  return new Date(iso).toLocaleString("ar-SA", { dateStyle: "medium", timeStyle: "short" });
-}
+
+import { useParams, useRouter } from "next/navigation";
 
 export default function ArchivedTripDetailPage() {
   const params = useParams();
   const router = useRouter();
   const tripId = params?.tripId as string;
 
-  const [trip, setTrip] = useState<Trip | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (!tripId) return;
-
-    let cancelled = false;
-    (async () => {
-      setLoading(true);
-      setError(null);
-      try {
-        const token = getStoredToken();
-        const data = await tripService.getArchivedById(tripId, token);
-        if (!cancelled) setTrip(data);
-      } catch {
-        if (!cancelled) setError("لم يتم العثور على هذه الرحلة في الأرشيف.");
-      } finally {
-        if (!cancelled) setLoading(false);
-      }
-    })();
-
-    return () => { cancelled = true; };
-  }, [tripId]);
-
-  if (loading) {
   return (
-      <div className="flex items-center justify-center gap-3 py-24 text-[var(--color-text-muted)]">
-        <Spinner size="sm" />
-        <span className="text-sm">جارٍ التحميل…</span>
-      </div>
-    );
-  }
-
-  if (error || !trip) {
-    return (
-      <EmptyState
-        icon="🗄️"
-        title="الرحلة غير موجودة في الأرشيف"
-        description={error ?? "تعذّر العثور على رحلة بهذا المعرّف."}
-        action={
-          <button
-            onClick={() => router.push("/dashboard/trips")}
-            className="text-sm font-semibold text-[var(--color-brand-600)] underline"
-          >
-            العودة إلى قائمة الرحلات
-          </button>
-        }
+    <ArchivedTripDetailModal
+      tripId={tripId}
+      onClose={() => router.push("/dashboard/trips")}
     />
   );
 }
-
-  const statusConfig = TRIP_STATUS_MAP[trip.status];
-
-  return (
-    <section className="flex flex-col gap-6 p-6" dir="rtl">
-      <PageHeader
-        title={trip.title}
-        description={`رقم الرحلة: ${trip.tripNumber}`}
-        backHref="/dashboard/trips"
-        backLabel="الرحلات"
-        action={<Badge label="مؤرشفة" color="amber" />}
-      />
-
-      <div className="rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] p-6 shadow-[var(--shadow-card)]">
-        <Badge label={statusConfig.label} color="slate" />
-        <dl className="mt-4 grid grid-cols-2 gap-4 text-sm">
-          <div>
-            <dt className="text-[var(--color-text-muted)]">وقت البدء</dt>
-            <dd>{fmtDateTime(trip.startTime)}</dd>
-          </div>
-          <div>
-            <dt className="text-[var(--color-text-muted)]">وقت الانتهاء</dt>
-            <dd>{fmtDateTime(trip.endTime)}</dd>
-          </div>
-          <div>
-            <dt className="text-[var(--color-text-muted)]">تاريخ الأرشفة</dt>
-            <dd>{fmtDateTime(trip.deletedAt)}</dd>
-          </div>
-          {trip.driver && (
-            <div>
-              <dt className="text-[var(--color-text-muted)]">السائق</dt>
-              <dd>{trip.driver.name}</dd>
-            </div>
-          )}
-        </dl>
-      </div>
-    </section>
-  );
-}

app/dashboard/trips/page.tsx

@@ -1,164 +1,31 @@
 "use client";
 
+// app/dashboard/trips/page.tsx
+// CHANGE: replaced the old hand-rolled inline table with <TripTable/>.
+// CHANGE: TripFormModal now imported from the barrel (@/src/Components/Trip)
+// instead of a direct path — avoids the Tripformmodal.tsx case-sensitivity
+// mismatch that breaks on case-sensitive filesystems (Linux/Docker builds).
+// CHANGE: removed the local ArchivedTripsModal wrapper (it duplicated what
+// the new ArchivedTripModal already does — search bar + table + detail) and
+// removed the ArchivedTripList import; now renders <ArchivedTripModal/>
+// directly.
+
 import { useCallback, useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useTrips } from "@/src/hooks/useTrip";
-import { TripFormModal } from "@/src/Components/Trip/Tripformmodal";
-import { ArchivedTripList } from "@/src/Components/Trip/archive/ArchivedTripList";
-import { Alert, Spinner, ArchiveButton, ConfirmDialog , Toast } from "@/src/Components/UI";
-import type {
-  Trip,
-  TripStatus,
-  CreateTripPayload,
-  UpdateTripPayload,
-} from "@/src/types/trip";
-import { TRIP_STATUS_MAP } from "@/src/types/trip";
+import { TripFormModal, TripTable } from "@/src/Components/Trip";
+import { ArchivedTripModal } from "@/src/Components/Trip/archive/ArchivedTripModal";
+import { Alert, ArchiveButton, ConfirmDialog, Toast } from "@/src/Components/UI";
+import type { Trip, CreateTripPayload, UpdateTripPayload } from "@/src/types/trip";
 import Header from "@/src/Components/UI/Header";
 
-// ── Status badge — same visual pattern as Driver's status badge ─────────────
-
-function StatusBadge({ status }: { status: TripStatus }) {
-  const s = TRIP_STATUS_MAP[status];
-  return (
-    <span
-      style={{
-        display: "inline-flex",
-        alignItems: "center",
-        gap: 5,
-        borderRadius: "var(--radius-full)",
-        border: `1px solid ${s.border}`,
-        background: s.bg,
-        padding: "0.2rem 0.625rem",
-        fontSize: 11,
-        fontWeight: 600,
-        color: s.color,
-        width: "fit-content",
-      }}
-    >
-      <span
-        style={{
-          width: 6,
-          height: 6,
-          borderRadius: "50%",
-          background: s.dot,
-          flexShrink: 0,
-        }}
-      />
-      {s.label}
-    </span>
-  );
-}
-
-// ── Archived trips modal — unchanged wrapper, kept as-is ────────────────────
-
-function ArchivedTripsModal({ onClose }: { onClose: () => void }) {
-  const router = useRouter();
-
-  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-trips-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",
-      }}
-    >
-      <div
-        onClick={(e) => e.stopPropagation()}
-        style={{
-          width: "100%",
-          maxWidth: 920,
-          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)",
-          }}
-        >
-          <h2
-            id="archived-trips-title"
-            style={{
-              fontSize: 17,
-              fontWeight: 700,
-              color: "var(--color-text-primary)",
-              margin: 0,
-            }}
-          >
-            أرشيف الرحلات
-          </h2>
-          <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" }}>
-          {/* Was pointing at the normal trip page — send it to the archived route instead */}
-          <ArchivedTripList
-            onView={(trip) =>
-              router.push(`/dashboard/trips/archived/${trip.id}`)
-            }
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
 // ── Page ──────────────────────────────────────────────────────────────────────
 
 export default function TripsPage() {
   const router = useRouter();
 
-  // All list state + mutations now come from the hook, same as useDrivers
-  // is used on the Driver page. No direct tripService calls in this file.
+  // All list state + mutations come from the hook, same as useDrivers is
+  // used on the Driver page. No direct tripService calls in this file.
   const {
     trips,
     total,
@@ -169,8 +36,6 @@ export default function TripsPage() {
     setPage,
     search,
     handleSearch,
-    status,
-    handleStatusFilter,
     createTrip,
     updateTrip,
     deleteTrip,
@@ -202,6 +67,19 @@ export default function TripsPage() {
     setDeleteTarget(trip);
   }, []);
 
+  // TripTable exposes a dedicated "view" action (icon button) instead of a
+  // row click — wired to the trip detail page, same destination the old
+  // row-click handler used to navigate to.
+  const handleView = useCallback(
+    (trip: Trip) => router.push(`/dashboard/trips/${trip.id}`),
+    [router],
+  );
+
+  const handleAdd = useCallback(() => {
+    setEditTrip(null);
+    setShowForm(true);
+  }, []);
+
   // ── Create / update — delegates to the hook (hook fires the toast) ───────
   const handleSubmit = async (
     payload: CreateTripPayload | UpdateTripPayload,
@@ -233,7 +111,8 @@ export default function TripsPage() {
       }}
     >
       {/* ── Header ── */}
-       <Header mainTitle="إدارة الرحلات"
+      <Header
+        mainTitle="إدارة الرحلات"
         title="الرحلات"
         name="رحلة"
         state={{ total }}
@@ -243,288 +122,27 @@ export default function TripsPage() {
         setModule={() => {}}
         setPage={setPage}
         isAudit={false}
-                onAdd={() => { setEditTrip(null); setShowForm(true); }}/>
+        onAdd={handleAdd}
+      />
+
       {/* ── Error handling: Alert banner for list/API errors ──
            Same pattern as the Driver page: a persistent banner tied to the
            hook's `error` state, dismissible via `clearError`. */}
       {error && <Alert type="error" message={error} onClose={clearError} />}
 
       {/* ── Table ── */}
-      <div
-        style={{
-          background: "var(--color-surface)",
-          border: "1px solid var(--color-border)",
-          borderRadius: "var(--radius-xl)",
-          overflow: "hidden",
-          boxShadow: "var(--shadow-card)",
-        }}
-      >
-        <div
-          dir="rtl"
-          style={{
-            display: "grid",
-            gridTemplateColumns: "1.5fr 2fr 1.3fr 1.3fr 1fr 1.1fr 1.1fr 0.8fr",
-            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)",
-          }}
-        >
-          <span>رقم الرحلة</span>
-          <span>العنوان</span>
-          <span>السائق</span>
-          <span>السيارة</span>
-          <span>الحالة</span>
-          <span>البدء</span>
-          <span>الانتهاء</span>
-          <span>إجراءات</span>
-        </div>
-
-        {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>
-        ) : trips.length === 0 ? (
-          <p
-            style={{
-              textAlign: "center",
-              padding: "4rem 0",
-              fontSize: 13,
-              color: "var(--color-text-muted)",
-            }}
-          >
-            لا توجد رحلات مطابقة {search && `لـ "${search}"`}
-          </p>
-        ) : (
-          <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
-            {trips.map((trip, i) => (
-              <li
-                key={trip.id}
-                onClick={() => router.push(`/dashboard/trips/${trip.id}`)}
-                style={{
-                  display: "grid",
-                  gridTemplateColumns:
-                    "1.5fr 2fr 1.3fr 1.3fr 1fr 1.1fr 1.1fr 0.8fr",
-                  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,
-                  cursor: "pointer",
-                  transition: "background 0.15s",
-                }}
-                onMouseEnter={(e) =>
-                  (e.currentTarget.style.background =
-                    "var(--color-surface-hover, #F8FAFC)")
-                }
-                onMouseLeave={(e) =>
-                  (e.currentTarget.style.background =
-                    i % 2 !== 0 ? "var(--color-surface-muted)" : "transparent")
-                }
-              >
-                <span
-                  style={{
-                    fontFamily: "var(--font-mono)",
-                    fontSize: 12,
-                    color: "var(--color-brand-600)",
-                    fontWeight: 700,
-                  }}
-                >
-                  {trip.tripNumber}
-                </span>
-                <span
-                  style={{
-                    fontWeight: 600,
-                    color: "var(--color-text-primary)",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap",
-                  }}
-                >
-                  {trip.title}
-                </span>
-                <span style={{ color: "var(--color-text-secondary)" }}>
-                  {trip.driver?.name ?? "—"}
-                </span>
-                <span style={{ color: "var(--color-text-secondary)" }}>
-                  {trip.car
-                    ? `${trip.car.manufacturer} ${trip.car.model}`
-                    : "—"}
-                </span>
-                <StatusBadge status={trip.status} />
-                <span
-                  style={{ fontSize: 12, color: "var(--color-text-muted)" }}
-                >
-                  {trip.startTime
-                    ? new Date(trip.startTime).toLocaleString("ar-SA", {
-                        dateStyle: "short",
-                        timeStyle: "short",
-                      })
-                    : "—"}
-                </span>
-                <span
-                  style={{ fontSize: 12, color: "var(--color-text-muted)" }}
-                >
-                  {trip.endTime
-                    ? new Date(trip.endTime).toLocaleString("ar-SA", {
-                        dateStyle: "short",
-                        timeStyle: "short",
-                      })
-                    : "—"}
-                </span>
-
-                {/* Inline row actions — stopPropagation so the click does not
-                    also trigger navigation to the detail page. */}
-                <div
-                  style={{ display: "flex", gap: "0.4rem" }}
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  <button
-                    type="button"
-                    aria-label="تعديل الرحلة"
-                    title="تعديل"
-                    onClick={() => handleEdit(trip)}
-                    style={{
-                      width: 30,
-                      height: 30,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      borderRadius: "var(--radius-md)",
-                      cursor: "pointer",
-                      flexShrink: 0,
-                      border: "1px solid var(--color-brand-200)",
-                      background: "var(--color-brand-50, #EFF6FF)",
-                      color: "var(--color-brand-600)",
-                    }}
-                  >
-                    <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
-                    type="button"
-                    aria-label="حذف الرحلة"
-                    title="حذف"
-                    onClick={() => handleDelete(trip)}
-                    style={{
-                      width: 30,
-                      height: 30,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      borderRadius: "var(--radius-md)",
-                      cursor: "pointer",
-                      flexShrink: 0,
-                      border: "1px solid #FECACA",
-                      background: "#FEF2F2",
-                      color: "#DC2626",
-                    }}
-                  >
-                    <svg
-                      width="14"
-                      height="14"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                    >
-                      <polyline points="3 6 5 6 21 6" />
-                      <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
-                      <path d="M10 11v6M14 11v6" />
-                    </svg>
-                  </button>
-                </div>
-              </li>
-            ))}
-          </ul>
-        )}
-
-        {/* ── Pagination — same pattern as Driver page ── */}
-        {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>
-              {" — "}
-              {total} رحلة
-            </span>
-            <div style={{ display: "flex", gap: "0.5rem" }}>
-              {[
-                {
-                  label: "السابق",
-                  action: () => setPage((p) => Math.max(1, p - 1)),
-                  disabled: page === 1,
-                },
-                {
-                  label: "التالي",
-                  action: () => setPage((p) => Math.min(pages, p + 1)),
-                  disabled: page === pages,
-                },
-              ].map((btn) => (
-                <button
-                  key={btn.label}
-                  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>
+      <TripTable
+        trips={trips}
+        loading={loading}
+        search={search}
+        page={page}
+        pages={pages}
+        onEdit={handleEdit}
+        onDelete={handleDelete}
+        onView={handleView}
+        onAddFirst={handleAdd}
+        onPageChange={setPage}
+      />
 
       {/* ── Form modal ── */}
       {showForm && (
@@ -549,10 +167,10 @@ export default function TripsPage() {
         description={`هل أنت متأكد من حذف رحلة ${deleteTarget?.title ?? ""} (${deleteTarget?.tripNumber ?? ""})؟ لا يمكن التراجع عن هذا الإجراء.`}
       />
 
-      {/* ── Archive browser modal ── */}
-      {archiveOpen && (
-        <ArchivedTripsModal onClose={() => setArchiveOpen(false)} />
-      )}
+      {/* ── Archive browser modal — now the split ArchivedTripModal directly,
+           no local wrapper needed since it already ships its own search bar,
+           table, and detail-view wiring. ── */}
+      {archiveOpen && <ArchivedTripModal onClose={() => setArchiveOpen(false)} />}
 
       {/* ── Floating archive button — same component Driver page uses ── */}
       <ArchiveButton onClick={() => setArchiveOpen(true)} label="الأرشيف" />

app/forbidden/page.tsx

@@ -21,11 +21,7 @@ export default function ForbiddenPage() {
           border: "2px solid #FECACA",
           display: "flex", alignItems: "center", justifyContent: "center",
         }}>
-          <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#DC2626" strokeWidth="1.5">
-            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
-            <line x1="12" y1="8" x2="12" y2="12" />
-            <line x1="12" y1="16" x2="12.01" y2="16" />
-          </svg>
+          <i className="ti ti-shield-exclamation" style={{ fontSize: 36, color: "#DC2626" }} aria-hidden="true" />
         </div>
 
         <p style={{

app/not_found/page.tsx

@@ -55,10 +55,7 @@ export default function NotFound() {
               textDecoration: "none",
               display: "inline-flex", alignItems: "center", gap: 8,
             }}>
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-              <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-              <polyline points="9 22 9 12 15 12 15 22" />
-            </svg>
+            <i className="ti ti-home" style={{ fontSize: 14 }} aria-hidden="true" />
             لوحة التحكم
           </Link>
 

src/Components/Branch/BranchDetailModal.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { Spinner } from "../UI";
+import { Alert, Badge, Button, Modal, Spinner } from "../UI";
 import { getStoredToken } from "@/src/lib/auth";
 import { branchService } from "@/src/services/branch.service";
 import type { BranchDetail } from "@/src/types/branch";
@@ -11,7 +11,7 @@ interface BranchDetailModalProps {
   onClose:  () => void;
 }
 
-// ── small helper components ───────────────────────────────────────────────────
+// ── small helper components (no template exists for a plain label/value row) ──
 function DetailRow({ label, value }: { label: string; value?: string | null }) {
   return (
     <div style={{
@@ -29,23 +29,7 @@ function DetailRow({ label, value }: { label: string; value?: string | null }) {
   );
 }
 
-function StatusBadge({ active }: { active: boolean }) {
-  return (
-    <span style={{
-      display: "inline-flex", alignItems: "center", gap: 6,
-      borderRadius: "var(--radius-full)",
-      border: active ? "1px solid #BBF7D0" : "1px solid #FECACA",
-      background: active ? "#DCFCE7" : "#FEF2F2",
-      padding: "0.25rem 0.75rem",
-      fontSize: 12, fontWeight: 600,
-      color: active ? "#166534" : "#991B1B",
-    }}>
-      <span style={{ width: 6, height: 6, borderRadius: "50%", background: active ? "#16A34A" : "#DC2626" }} />
-      {active ? "نشط" : "معطل"}
-    </span>
-  );
-}
-
+// Branch icon badge has no equivalent in the shared UI kit — kept custom.
 function BranchIcon() {
   return (
     <div style={{
@@ -55,10 +39,7 @@ function BranchIcon() {
       flexShrink: 0,
       boxShadow: "0 4px 12px rgba(37,99,235,.3)",
     }}>
-      <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#FFF" strokeWidth="2">
-        <path d="M3 21h18" /><path d="M5 21V7l8-4v18" /><path d="M19 21V11l-6-4" />
-        <path d="M9 9v.01M9 12v.01M9 15v.01M9 18v.01" />
-      </svg>
+      <i className="ti ti-building" style={{ fontSize: 26, color: "#FFF" }} aria-hidden="true" />
     </div>
   );
 }
@@ -69,13 +50,6 @@ export function BranchDetailModal({ branchId, onClose }: BranchDetailModalProps)
   const [loading, setLoading] = useState(true);
   const [error,   setError]   = useState<string | null>(null);
 
-  // close on Escape
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
-    window.addEventListener("keydown", handler);
-    return () => window.removeEventListener("keydown", handler);
-  }, [onClose]);
-
   // fetch branch details on mount
   useEffect(() => {
     let cancelled = false;
@@ -102,60 +76,18 @@ export function BranchDetailModal({ branchId, onClose }: BranchDetailModalProps)
 
   // ── render ────────────────────────────────────────────────────────────────
   return (
-    <div
-      role="dialog" aria-modal="true" aria-labelledby="branch-detail-title"
-      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
-      style={{
-        position: "fixed", inset: 0, zIndex: 55,
-        background: "rgba(15,23,42,0.55)", backdropFilter: "blur(4px)",
-        display: "flex", alignItems: "center", justifyContent: "center", padding: "1rem",
-      }}
+    <Modal
+      open
+      title={branch?.name ?? "عرض الفرع"}
+      subtitle="بيانات الفرع"
+      onClose={onClose}
+      size="md"
+      footer={
+        <Button type="button" variant="secondary" onClick={onClose}>
+          إغلاق
+        </Button>
+      }
     >
-      <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: "#2563EB", fontWeight: 600, margin: 0 }}>
-              بيانات الفرع
-            </p>
-            <h2 id="branch-detail-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
-              {branch?.name ?? "عرض الفرع"}
-            </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" }}>
-
       {/* loading */}
       {loading && (
         <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 10, padding: "3rem 0", color: "var(--color-text-muted)" }}>
@@ -165,17 +97,7 @@ export function BranchDetailModal({ branchId, onClose }: BranchDetailModalProps)
       )}
 
       {/* error */}
-          {!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 && error && <Alert type="error" message={error} />}
 
       {/* content */}
       {!loading && branch && (
@@ -197,7 +119,7 @@ export function BranchDetailModal({ branchId, onClose }: BranchDetailModalProps)
                 </p>
               )}
               <div style={{ marginTop: 8 }}>
-                    <StatusBadge active={branch.isActive} />
+                <Badge label={branch.isActive ? "نشط" : "معطل"} color={branch.isActive ? "green" : "red"} />
               </div>
             </div>
           </div>
@@ -219,31 +141,6 @@ export function BranchDetailModal({ branchId, onClose }: BranchDetailModalProps)
           <DetailRow label="آخر تحديث"          value={fmt(branch.updatedAt)} />
         </div>
       )}
-        </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>
+    </Modal>
   );
 }

src/Components/Branch/BranchTable.tsx

@@ -1,41 +1,14 @@
 "use client";
 
-import { Spinner } from "../UI";
+// src/Components/Branch/BranchTable.tsx
+// MIGRATED to ReusableTable + ActionButtons — same props, same visual
+// result as the original hand-rolled version. No changes required in
+// app/dashboard/branches/page.tsx.
+
+import { Badge, Button, ReusableTable, ActionButtons } from "../UI";
+import type { TableColumn } from "@/src/types/models";
 import type { Branch } from "@/src/types/branch";
 
-// ── status badge ─────────────────────────────────────────────────────────────
-function StatusBadge({ active }: { active: boolean }) {
-  return (
-    <span style={{ display: "inline-flex", alignItems: "center", gap: 5, borderRadius: "var(--radius-full)", border: active ? "1px solid #BBF7D0" : "1px solid #FECACA", background: active ? "#DCFCE7" : "#FEF2F2", padding: "0.2rem 0.625rem", fontSize: 11, fontWeight: 600, color: active ? "#166534" : "#991B1B" }}>
-      <span style={{ width: 6, height: 6, borderRadius: "50%", background: active ? "#16A34A" : "#DC2626" }} />
-      {active ? "نشط" : "معطل"}
-    </span>
-  );
-}
-
-// ── 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>
-  );
-}
-
-// ── 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)",
-};
-
-// ── Props ────────────────────────────────────────────────────────────────────
 interface BranchTableProps {
   branches: Branch[];
   loading: boolean;
@@ -49,107 +22,75 @@ interface BranchTableProps {
   onPageChange: (p: number) => void;
 }
 
-// ── main table ───────────────────────────────────────────────────────────────
-export function BranchTable({ branches, loading, search, page, pages, onEdit, onDelete, onView, onAddFirst, onPageChange }: BranchTableProps) {
-  return (
-    <div style={cardStyle}>
-      {/* column headers */}
-      <div dir="rtl" style={{ display: "grid", gridTemplateColumns: "2fr 1.5fr 1.5fr 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>
-      ) : branches.length === 0 ? (
-        /* empty state */
-        <div style={{ textAlign: "center", padding: "4rem 1rem" }}>
-          <p style={{ fontSize: 13, color: "var(--color-text-muted)" }}>
-            {search ? `لا توجد نتائج لـ "${search}"` : "لا توجد فروع لعرضها."}
-          </p>
-          {!search && (
-            <button type="button" onClick={onAddFirst}
-              style={{ marginTop: 12, fontSize: 13, fontWeight: 600, color: "var(--color-brand-600)", background: "none", border: "none", cursor: "pointer", textDecoration: "underline" }}>
-              أضف أول فرع
-            </button>
-          )}
-        </div>
-      ) : (
-        /* data rows */
-        <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
-          {branches.map((b, i) => (
-            <li key={b.id} style={{
-              display: "grid", gridTemplateColumns: "2fr 1.5fr 1.5fr 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,
-            }}>
+export function BranchTable({
+  branches, loading, search, page, pages,
+  onEdit, onDelete, onView, onAddFirst, onPageChange,
+}: BranchTableProps) {
+  const columns: TableColumn<Branch>[] = [
+    {
+      key: "name",
+      header: "اسم الفرع",
+      width: "2fr",
+      render: (b) => (
         <div>
           <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>{b.name}</p>
           <p style={{ marginTop: 2, fontSize: 11, color: "var(--color-text-muted)" }}>{b.street}</p>
         </div>
-              <span style={{ color: "var(--color-text-secondary)" }}>{b.city || "—"}</span>
-              <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--color-text-secondary)" }}>{b.phone ?? "—"}</span>
-              <StatusBadge active={b.isActive} />
-              <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
-                {new Date(b.createdAt).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" })}
+      ),
+    },
+    { key: "city", header: "المدينة", width: "1.5fr", render: (b) => b.city || "—" },
+    {
+      key: "phone",
+      header: "رقم الجوال",
+      width: "1.5fr",
+      render: (b) => (
+        <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--color-text-secondary)" }}>
+          {b.phone ?? "—"}
         </span>
-              <div style={{ display: "flex", justifyContent: "center", gap: 4 }}>
-                {/* view */}
-                <IconBtn title={`عرض ${b.name}`} color="#059669" bg="#ECFDF5" borderColor="#A7F3D0" onClick={() => onView(b)}>
-                  <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>
-                {/* edit */}
-                <IconBtn title={`تعديل ${b.name}`} color="#1D4ED8" bg="#EFF6FF" borderColor="#BFDBFE" onClick={() => onEdit(b)}>
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                    <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>
-                </IconBtn>
-                {/* delete */}
-                <IconBtn title={`حذف ${b.name}`} color="#DC2626" bg="#FEF2F2" borderColor="#FECACA" onClick={() => onDelete(b)}>
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                    <polyline points="3 6 5 6 21 6" /><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
-                    <path d="M10 11v6M14 11v6" /><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
-                  </svg>
-                </IconBtn>
-              </div>
-            </li>
-          ))}
-        </ul>
-      )}
+      ),
+    },
+    {
+      key: "status",
+      header: "الحالة",
+      width: "1fr",
+      render: (b) => <Badge label={b.isActive ? "Active" : "Disabled"} color={b.isActive ? "green" : "red"} />,
+    },
+    {
+      key: "createdAt",
+      header: "تاريخ الانشاء",
+      width: "1fr",
+      align: "center",
+      render: (b) =>
+        new Date(b.createdAt).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" }),
+    },
+  ];
 
-      {/* 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>
+  return (
+    <ReusableTable
+      columns={columns}
+      data={branches}
+      loading={loading}
+      search={search}
+      page={page}
+      pages={pages}
+      onPageChange={onPageChange}
+      emptyIcon="🏢"
+      emptyDescription={!search ? "No branches to display." : undefined}
+      emptyAction={
+        !search && (
+          <Button type="button" variant="ghost" size="sm" onClick={onAddFirst}>
+            Add first branch
+          </Button>
+        )
+      }
+      renderActions={(b) => (
+        <ActionButtons
+          itemLabel={b.name}
+          onView={() => onView(b)}
+          onEdit={() => onEdit(b)}
+          onDelete={() => onDelete(b)}
+        />
       )}
-    </div>
+    />
   );
 }

src/Components/Branch/DeleteConfirmModal.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useEffect } from "react";
+import { Spinner } from "../UI";
+import type { Branch } from "@/src/types/branch";
+
+interface DeleteConfirmModalProps {
+  branch:    Branch;
+  deleting:  boolean;
+  onCancel:  () => void;
+  onConfirm: () => void;
+}
+
+export function DeleteConfirmModal({ branch, deleting, onCancel, onConfirm }: DeleteConfirmModalProps) {
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => { if (e.key === "Escape") onCancel(); };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onCancel]);
+
+  return (
+    <div
+      role="alertdialog" aria-modal="true" aria-labelledby="branch-del-title"
+      onClick={e => { if (e.target === e.currentTarget) onCancel(); }}
+      style={{ position: "fixed", inset: 0, zIndex: 60, 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: 400, background: "var(--color-surface)", borderRadius: "var(--radius-xl)", border: "1px solid #FECACA", boxShadow: "0 20px 48px rgba(0,0,0,.18)", padding: "2rem", display: "flex", flexDirection: "column", gap: "1rem", textAlign: "center" }}
+      >
+        {/*  icon delete */}
+        <div style={{ width: 52, height: 52, margin: "0 auto", borderRadius: "50%", background: "#FEF2F2", border: "1px solid #FECACA", display: "flex", alignItems: "center", justifyContent: "center" }}>
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#DC2626" strokeWidth="2">
+            <polyline points="3 6 5 6 21 6" /><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+            <path d="M10 11v6M14 11v6" /><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
+          </svg>
+        </div>
+        <div>
+          <h2 id="branch-del-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>حذف الفرع</h2>
+          <p style={{ marginTop: 8, fontSize: 13, color: "var(--color-text-muted)", lineHeight: 1.6 }}>
+            هل أنت متأكد من حذف فرع <strong style={{ color: "var(--color-text-primary)" }}>{branch.name}</strong>؟ لا يمكن التراجع عن هذا الإجراء.
+          </p>
+        </div>
+        <div style={{ display: "flex", gap: "0.5rem" }}>
+          <button type="button" onClick={onCancel} disabled={deleting}
+            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: deleting ? "not-allowed" : "pointer", fontFamily: "var(--font-sans)" }}>
+            إلغاء
+          </button>
+          <button type="button" onClick={onConfirm} disabled={deleting}
+            style={{ flex: 1, height: 40, borderRadius: "var(--radius-md)", border: "none", background: "#DC2626", fontSize: 13, fontWeight: 700, color: "#FFF", cursor: deleting ? "not-allowed" : "pointer", display: "flex", alignItems: "center", justifyContent: "center", gap: 8, fontFamily: "var(--font-sans)", opacity: deleting ? 0.7 : 1 }}>
+            {deleting && <Spinner size="sm" className="text-white" />}
+            {deleting ? "جارٍ الحذف…" : "تأكيد الحذف"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/Components/Branch/archive/ArchivedBranchDetailModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect } from "react";
+import { Badge, Button, Modal } from "../../UI";
 import type { ArchivedBranch } from "@/src/types/branch";
 
 interface ArchivedBranchDetailModalProps {
@@ -26,23 +26,6 @@ function DetailRow({ label, value }: { label: string; value?: string | null }) {
   );
 }
 
-function StatusBadge({ active }: { active: boolean }) {
-  return (
-    <span style={{
-      display: "inline-flex", alignItems: "center", gap: 6,
-      borderRadius: "var(--radius-full)",
-      border: active ? "1px solid #BBF7D0" : "1px solid #FECACA",
-      background: active ? "#DCFCE7" : "#FEF2F2",
-      padding: "0.25rem 0.75rem",
-      fontSize: 12, fontWeight: 600,
-      color: active ? "#166534" : "#991B1B",
-    }}>
-      <span style={{ width: 6, height: 6, borderRadius: "50%", background: active ? "#16A34A" : "#DC2626" }} />
-      {active ? "نشط" : "معطل"}
-    </span>
-  );
-}
-
 function BranchIcon() {
   return (
     <div style={{
@@ -52,10 +35,7 @@ function BranchIcon() {
       flexShrink: 0,
       boxShadow: "0 4px 12px rgba(234,88,12,.3)",
     }}>
-      <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#FFF" strokeWidth="2">
-        <path d="M3 21h18" /><path d="M5 21V7l8-4v18" /><path d="M19 21V11l-6-4" />
-        <path d="M9 9v.01M9 12v.01M9 15v.01M9 18v.01" />
-      </svg>
+      <i className="ti ti-building" style={{ fontSize: 26, color: "#FFF" }} aria-hidden="true" />
     </div>
   );
 }
@@ -65,13 +45,6 @@ function BranchIcon() {
 // modal does NOT fetch — it just renders the ArchivedBranch object that was
 // already loaded from GET /branches/archived (passed down from the table).
 export function ArchivedBranchDetailModal({ branch, onClose }: ArchivedBranchDetailModalProps) {
-  // close on Escape
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
-    window.addEventListener("keydown", handler);
-    return () => window.removeEventListener("keydown", handler);
-  }, [onClose]);
-
   // ── helpers ───────────────────────────────────────────────────────────────
   const fmt = (iso?: string | null) =>
     iso ? new Date(iso).toLocaleDateString("ar-SA", { year: "numeric", month: "long", day: "numeric" }) : null;
@@ -81,59 +54,19 @@ export function ArchivedBranchDetailModal({ branch, onClose }: ArchivedBranchDet
 
   // ── render ────────────────────────────────────────────────────────────────
   return (
-    <div
-      role="dialog" aria-modal="true" aria-labelledby="archived-branch-detail-title"
-      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
-      style={{
-        position: "fixed", inset: 0, zIndex: 55,
-        background: "rgba(15,23,42,0.55)", backdropFilter: "blur(4px)",
-        display: "flex", alignItems: "center", justifyContent: "center", padding: "1rem",
-      }}
+    <Modal
+      open
+      onClose={onClose}
+      size="md"
+      subtitle="فرع مؤرشف"
+      title={branch.name}
+      zIndex={60}
+      footer={
+        <Button variant="secondary" onClick={onClose}>
+          إغلاق
+        </Button>
+      }
     >
-      <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-branch-detail-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
-              {branch.name}
-            </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" }}>
       <div style={{ display: "flex", flexDirection: "column", gap: 0 }} dir="rtl">
 
         {/* icon + name + status row */}
@@ -150,7 +83,7 @@ export function ArchivedBranchDetailModal({ branch, onClose }: ArchivedBranchDet
               #{branch.id}
             </p>
             <div style={{ marginTop: 8 }}>
-                  <StatusBadge active={branch.isActive} />
+              <Badge label={branch.isActive ? "نشط" : "معطل"} color={branch.isActive ? "green" : "red"} />
             </div>
           </div>
         </div>
@@ -176,31 +109,6 @@ export function ArchivedBranchDetailModal({ branch, onClose }: ArchivedBranchDet
         <DetailRow label="تاريخ الإنشاء"      value={fmt(branch.createdAt)} />
         <DetailRow label="آخر تحديث"          value={fmt(branch.updatedAt)} />
       </div>
-        </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>
+    </Modal>
   );
 }

src/Components/Branch/archive/ArchivedBranchTable.tsx

@@ -1,41 +1,13 @@
 "use client";
 
-import { Spinner } from "../../UI";
+// src/Components/Branch/archive/ArchivedBranchTable.tsx
+// MIGRATED to ReusableTable + ActionButtons. View-only, no row click in
+// the original.
+
+import { Badge, ReusableTable, ActionButtons } from "../../UI";
+import type { TableColumn } from "@/src/types/models";
 import type { ArchivedBranch } from "@/src/types/branch";
 
-// ── status badge ─────────────────────────────────────────────────────────────
-function StatusBadge({ active }: { active: boolean }) {
-  return (
-    <span style={{ display: "inline-flex", alignItems: "center", gap: 5, borderRadius: "var(--radius-full)", border: active ? "1px solid #BBF7D0" : "1px solid #FECACA", background: active ? "#DCFCE7" : "#FEF2F2", padding: "0.2rem 0.625rem", fontSize: 11, fontWeight: 600, color: active ? "#166534" : "#991B1B" }}>
-      <span style={{ width: 6, height: 6, borderRadius: "50%", background: active ? "#16A34A" : "#DC2626" }} />
-      {active ? "نشط" : "معطل"}
-    </span>
-  );
-}
-
-// ── 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>
-  );
-}
-
-// ── 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)",
-};
-
-// ── Props ────────────────────────────────────────────────────────────────────
 interface ArchivedBranchTableProps {
   branches: ArchivedBranch[];
   loading: boolean;
@@ -46,89 +18,53 @@ interface ArchivedBranchTableProps {
   onPageChange: (p: number) => void;
 }
 
-// ── main table ───────────────────────────────────────────────────────────────
 export function ArchivedBranchTable({ branches, loading, search, page, pages, onView, onPageChange }: ArchivedBranchTableProps) {
-  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 style={{ textAlign: "center" }}>تاريخ الإنشاء</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>
-      ) : branches.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 }}>
-          {branches.map((b, i) => (
-            <li key={b.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,
-            }}>
+  const columns: TableColumn<ArchivedBranch>[] = [
+    {
+      key: "name",
+      header: "اسم الفرع",
+      width: "2fr",
+      render: (b) => (
         <div>
           <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>{b.name}</p>
           <p style={{ marginTop: 2, fontSize: 11, color: "var(--color-text-muted)" }}>{b.street}</p>
         </div>
-              <span style={{ color: "var(--color-text-secondary)" }}>{b.city || "—"}</span>
-              <StatusBadge active={b.isActive} />
-              <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
-                {new Date(b.createdAt).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" })}
-              </span>
-              <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
-                {new Date(b.updatedAt).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" })}
-              </span>
-              <div style={{ display: "flex", justifyContent: "center", gap: 4 }}>
-                {/* view only — delete/restore not implemented yet */}
-                <IconBtn title={`عرض ${b.name}`} color="#059669" bg="#ECFDF5" borderColor="#A7F3D0" onClick={() => onView(b)}>
-                  <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>
-      )}
+      ),
+    },
+    { key: "city", header: "المدينة", width: "1.5fr", render: (b) => b.city || "—" },
+    {
+      key: "status",
+      header: "الحالة",
+      width: "1fr",
+      render: (b) => <Badge label={b.isActive ? "Active" : "Disabled"} color={b.isActive ? "green" : "red"} />,
+    },
+    {
+      key: "createdAt",
+      header: "تاريخ الانشاء",
+      width: "1fr",
+      align: "center",
+      render: (b) => new Date(b.createdAt).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" }),
+    },
+    {
+      key: "updatedAt",
+      header: "تاريخ التعديل",
+      width: "1fr",
+      align: "center",
+      render: (b) => new Date(b.updatedAt).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" }),
+    },
+  ];
 
-      {/* 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>
+  return (
+    <ReusableTable
+      columns={columns}
+      data={branches}
+      loading={loading}
+      search={search}
+      page={page}
+      pages={pages}
+      onPageChange={onPageChange}
+      emptyDescription={search ? `No results for "${search}"` : "No archived branches."}
+      renderActions={(b) => <ActionButtons itemLabel={b.name} onView={() => onView(b)} />}
+    />
   );
 }

src/Components/Branch/archive/ArchivedBranchesModal.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Alert } from "../../UI";
+import { Alert, Input, Modal } from "../../UI";
 import { ArchivedBranchTable } from "./ArchivedBranchTable";
 import { ArchivedBranchDetailModal } from "./ArchivedBranchDetailModal";
 import { useArchivedBranches } from "@/src/hooks/archive/useArchiveBranch";
@@ -11,6 +11,10 @@ interface ArchivedBranchesModalProps {
   onClose: () => void;
 }
 
+const SearchIcon = (
+  <i className="ti ti-search" style={{ fontSize: 16 }} aria-hidden="true" />
+);
+
 export function ArchivedBranchesModal({ onClose }: ArchivedBranchesModalProps) {
   // hold the full object, not just the id — no GET /branches/archived/{id} route exists
   const [viewBranch, setViewBranch] = useState<ArchivedBranch | null>(null);
@@ -22,79 +26,24 @@ export function ArchivedBranchesModal({ onClose }: ArchivedBranchesModalProps) {
   } = useArchivedBranches();
 
   return (
-    <div
-      role="dialog" aria-modal="true" aria-labelledby="branch-archive-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
+        onClose={onClose}
+        size="lg"
+        subtitle="الأرشيف"
+        title={`الفروع المؤرشفة (${total})`}
       >
-      {viewBranch && (
-        <ArchivedBranchDetailModal branch={viewBranch} onClose={() => setViewBranch(null)} />
-      )}
-
-      <div
-        onClick={e => e.stopPropagation()}
-        style={{
-          width: "100%", maxWidth: 920,
-          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="branch-archive-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" }}>
+        <div style={{ 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"
+          <div dir="rtl" style={{ maxWidth: 320 }}>
+            <Input
+              label="بحث"
               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)",
-              }}
+              icon={SearchIcon}
             />
           </div>
 
@@ -111,7 +60,14 @@ export function ArchivedBranchesModal({ onClose }: ArchivedBranchesModalProps) {
             onPageChange={setPage}
           />
         </div>
-      </div>
-    </div>
+      </Modal>
+
+      {/* Rendered after the list modal so it stacks visually on top of it
+          (both use the shared Modal's fixed full-screen overlay at the same
+          z-index — later in the DOM wins the paint order). */}
+      {viewBranch && (
+        <ArchivedBranchDetailModal branch={viewBranch} onClose={() => setViewBranch(null)} />
+      )}
+    </>
   );
 }

src/Components/Car_Maintanance/CarMaintananceDeleteModal.tsx

@@ -0,0 +1,91 @@
+ "use client";
+
+import { useEffect } from "react";
+import { Spinner } from "../UI";
+import { fmtCost } from "@/src/types/carMaintanance";
+import type { CarMaintenance } from "@/src/types/carMaintanance";
+
+interface CarMaintenanceDeleteModalProps {
+  record: CarMaintenance;
+  deleting: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+export function CarMaintenanceDeleteModal({
+  record,
+  deleting,
+  onCancel,
+  onConfirm,
+}: CarMaintenanceDeleteModalProps) {
+  useEffect(() => {
+    const h = (e: KeyboardEvent) => { if (e.key === "Escape") onCancel(); };
+    window.addEventListener("keydown", h);
+    return () => window.removeEventListener("keydown", h);
+  }, [onCancel]);
+
+  return (
+    <div
+      role="alertdialog" aria-modal="true" aria-labelledby="maintenance-del-title"
+      onClick={e => { if (e.target === e.currentTarget) onCancel(); }}
+      style={{
+        position: "fixed", inset: 0, zIndex: 60,
+        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: 420,
+          background: "var(--color-surface)",
+          borderRadius: "var(--radius-xl)",
+          border: "1px solid #FECACA",
+          boxShadow: "0 20px 48px rgba(0,0,0,.18)",
+          padding: "2rem",
+          display: "flex", flexDirection: "column", gap: "1rem",
+          textAlign: "center",
+        }}
+      >
+        {/* Icon */}
+        <div style={{ width: 52, height: 52, margin: "0 auto", borderRadius: "50%", background: "#FEF2F2", border: "1px solid #FECACA", display: "flex", alignItems: "center", justifyContent: "center" }}>
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#DC2626" strokeWidth="2">
+            <polyline points="3 6 5 6 21 6" />
+            <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+            <path d="M10 11v6M14 11v6" />
+            <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
+          </svg>
+        </div>
+
+        <div>
+          <h2 id="maintenance-del-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>
+            حذف سجل الصيانة
+          </h2>
+          <p style={{ marginTop: 8, fontSize: 13, color: "var(--color-text-muted)", lineHeight: 1.6 }}>
+            هل أنت متأكد من حذف سجل{" "}
+            <strong style={{ color: "var(--color-text-primary)" }}>
+              {record.reason}
+            </strong>
+            {" "}(
+            <span style={{ fontFamily: "var(--font-mono)", fontSize: 12 }}>
+              {fmtCost(record.cost)}
+            </span>
+            )؟ لا يمكن التراجع عن هذا الإجراء.
+          </p>
+        </div>
+
+        <div style={{ display: "flex", gap: "0.5rem" }}>
+          <button type="button" onClick={onCancel} disabled={deleting}
+            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: deleting ? "not-allowed" : "pointer", fontFamily: "var(--font-sans)" }}>
+            إلغاء
+          </button>
+          <button type="button" onClick={onConfirm} disabled={deleting}
+            style={{ flex: 1, height: 40, borderRadius: "var(--radius-md)", border: "none", background: "#DC2626", fontSize: 13, fontWeight: 700, color: "#FFF", cursor: deleting ? "not-allowed" : "pointer", display: "flex", alignItems: "center", justifyContent: "center", gap: 8, fontFamily: "var(--font-sans)", opacity: deleting ? 0.7 : 1 }}>
+            {deleting && <Spinner size="sm" className="text-white" />}
+            {deleting ? "جارٍ الحذف…" : "تأكيد الحذف"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/Components/Car_Maintanance/CarMaintananceDetailPanel.tsx

@@ -1,7 +1,3 @@
-// src/Components/Car_Maintanance/CarMaintananceDetailPanel.tsx
-// CHANGE: replaced CarMaintenanceDeleteModal with ConfirmDialog per Issue 1.
-// Description string rebuilt inline using fmtCost, matching the original
-// modal's wording exactly (see Issue 1 edge-case note on preserving fmtCost formatting).
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
@@ -252,9 +248,7 @@ export function CarMaintenanceDetailPanel({ carId, carLabel, onClose, onCarStatu
         <div style={{ padding: "1rem 1.5rem", borderTop: "1px solid var(--color-border)", background: "var(--color-surface-muted)", flexShrink: 0 }}>
           <button type="button" onClick={() => setFormTarget(null)}
             style={{ width: "100%", height: 40, borderRadius: "var(--radius-md)", border: "none", background: "var(--color-brand-600)", fontSize: 13, fontWeight: 700, color: "#FFF", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", gap: 8, fontFamily: "var(--font-sans)" }}>
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-              <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
-            </svg>
+            <i className="ti ti-plus" style={{ fontSize: 14 }} aria-hidden="true" />
             إضافة سجل صيانة
           </button>
         </div>

src/Components/Car_Maintanance/archive/ArchivedCarMaintananceDetailpanel.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import { useEffect } from "react";
-import { Spinner } from "../../UI";
+import { Alert, Badge, Button, Modal, Spinner } from "../../UI";
 import {
   MAINTENANCE_STATUS_MAP,
   fmtDate,
@@ -33,55 +32,21 @@ function DetailRow({ label, value, mono = false }: { label: string; value: strin
 }
 
 export function ArchivedCarMaintenanceDetailPanel({ record, loading, error, onClose }: ArchivedCarMaintenanceDetailPanelProps) {
-  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-maintenance-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",
-      }}
+    <Modal
+      open
+      title={record ? record.reason : "عرض السجل"}
+      subtitle="سجل صيانة مؤرشف"
+      onClose={onClose}
+      zIndex={60}
+      size="md"
+      footer={
+        <Button type="button" variant="secondary" onClick={onClose}>
+          إغلاق
+        </Button>
+      }
     >
-      <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",
-        }}
-      >
-        <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-maintenance-detail-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
-              {record ? record.reason : "عرض السجل"}
-            </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", overflowY: "auto", maxHeight: "70vh" }} dir="rtl">
+      <div 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" />
@@ -89,23 +54,19 @@ export function ArchivedCarMaintenanceDetailPanel({ record, loading, error, onCl
           </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 && error && <Alert type="error" message={error} />}
 
         {!loading && record && (() => {
           const status = MAINTENANCE_STATUS_MAP[getMaintenanceStatus(record)];
           return (
             <>
               <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: "1.25rem" }}>
+                {/* Dynamic per-status colors come from MAINTENANCE_STATUS_MAP, which
+                    doesn't map cleanly onto the fixed Badge color palette — kept custom. */}
                 <span style={{ borderRadius: "var(--radius-full)", border: `1px solid ${status.border}`, background: status.bg, padding: "0.3rem 0.875rem", fontSize: 12, fontWeight: 700, color: status.color }}>
                   {status.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>
+                <Badge label="مؤرشف" color="red" />
               </div>
 
               {record.car && (
@@ -125,14 +86,6 @@ export function ArchivedCarMaintenanceDetailPanel({ record, loading, error, onCl
           );
         })()}
       </div>
-
-        <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>
+    </Modal>
   );
 }

src/Components/Car_Maintanance/archive/ArchivedCarMaintananceTable.tsx

@@ -1,31 +1,12 @@
 "use client";
 
-import { Spinner } from "../../UI";
+
+
+import { IconBtn, ReusableTable } from "../../UI";
 import { fmtDateShort, fmtCost } from "@/src/types/carMaintanance";
+import type { TableColumn } from "@/src/types/models";
 import type { CarMaintenance } from "@/src/types/carMaintanance";
 
-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)",
-};
-
-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>
-  );
-}
-
 interface ArchivedCarMaintenanceTableProps {
   records:      CarMaintenance[];
   loading:      boolean;
@@ -41,87 +22,78 @@ interface ArchivedCarMaintenanceTableProps {
 export function ArchivedCarMaintenanceTable({
   records, loading, search, page, pages, showCar = false, onView, onPageChange,
 }: ArchivedCarMaintenanceTableProps) {
-  const columns = showCar ? "2fr 1fr 1fr 1fr 1fr 100px" : "2fr 1fr 1fr 1fr 100px";
-
-  return (
-    <div style={cardStyle}>
-      <div dir="rtl" style={{ display: "grid", gridTemplateColumns: columns, ...thStyle }}>
-        <span>سبب الصيانة</span>
-        {showCar && <span>المركبة</span>}
-        <span>التكلفة</span>
-        <span>تاريخ البدء</span>
-        <span style={{ textAlign: "center" }}>تاريخ الانتهاء</span>
-        <span style={{ textAlign: "center" }}>إجراءات</span>
-      </div>
-
-      {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>
-      ) : records.length === 0 ? (
-        <div style={{ textAlign: "center", padding: "4rem 1rem" }}>
-          <p style={{ fontSize: 13, color: "var(--color-text-muted)" }}>
-            {search ? `لا توجد نتائج لـ "${search}"` : "لا توجد سجلات صيانة في الأرشيف."}
-          </p>
-        </div>
-      ) : (
-        <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
-          {records.map((r, i) => (
-            <li key={r.id} style={{
-              display: "grid", gridTemplateColumns: columns,
-              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,
-            }}>
+  const columns: TableColumn<CarMaintenance>[] = [
+    {
+      key: "reason",
+      header: "سبب الصيانة",
+      width: "2fr",
+      render: (r) => (
         <div>
           <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>{r.reason}</p>
           <p style={{ marginTop: 2, fontSize: 11, color: "var(--color-text-muted)" }}>أضيف {fmtDateShort(r.createdAt)}</p>
         </div>
-              {showCar && (
+      ),
+    },
+    // Only shown in the global (cross-car) archive view.
+    ...(showCar
+      ? [{
+          key: "car",
+          header: "المركبة",
+          width: "1fr",
+          render: (r: CarMaintenance) => (
             <span style={{ color: "var(--color-text-secondary)" }}>
               {r.car ? `${r.car.manufacturer} ${r.car.model}` : "—"}
             </span>
-              )}
+          ),
+        } as TableColumn<CarMaintenance>]
+      : []),
+    {
+      key: "cost",
+      header: "التكلفة",
+      width: "1fr",
+      render: (r) => (
         <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "#2563EB", fontWeight: 600 }}>
           {fmtCost(r.cost)}
         </span>
+      ),
+    },
+    { key: "startAt", header: "تاريخ البدء", width: "1fr", render: (r) => (
         <span style={{ color: "var(--color-text-secondary)" }}>{fmtDateShort(r.startAt)}</span>
-              <span style={{ textAlign: "center", fontSize: 12, color: "var(--color-text-muted)" }}>
+      ),
+    },
+    {
+      key: "endAt",
+      header: "تاريخ الانتهاء",
+      width: "1fr",
+      render: (r) => (
+        <span style={{ fontSize: 12, color: "var(--color-text-muted)" }}>
           {fmtDateShort(r.endAt)}
         </span>
-              <div style={{ display: "flex", justifyContent: "center", gap: 4 }}>
-                <IconBtn title={`عرض ${r.reason}`} color="#059669" bg="#ECFDF5" borderColor="#A7F3D0" onClick={() => onView(r)}>
-                  <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>
-      )}
+      ),
+    },
+  ];
 
-      {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>
+  return (
+    <ReusableTable
+      columns={columns}
+      data={records}
+      loading={loading}
+      search={search}
+      page={page}
+      pages={pages}
+      onPageChange={onPageChange}
+      actionsWidth="100px"
+      onRowClick={onView}
+      emptyDescription={search ? `لا توجد نتائج لـ "${search}"` : "لا توجد سجلات صيانة في الأرشيف."}
+      renderActions={(r) => (
+        <IconBtn
+          title={`عرض ${r.reason}`}
+          color="#059669" bg="#ECFDF5" borderColor="#A7F3D0"
+          onClick={() => onView(r)}
+        >
+          <i className="ti ti-eye" style={{ fontSize: 14 }} aria-hidden="true" />
+        </IconBtn>
       )}
-    </div>
+    />
   );
 }

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,62 +41,18 @@ 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
+      <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"
-              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)",
-              }}
+            icon={
+              <i className="ti ti-search" style={{ fontSize: 16 }} aria-hidden="true" />
+            }
           />
         </div>
 
@@ -116,7 +69,6 @@ export function ArchivedCarsMaintenanceModal({ carId, carLabel, onClose }: Archi
           onPageChange={setPage}
         />
       </div>
-      </div>
-    </div>
+    </Modal>
   );
 }

src/Components/Client/Addressformmodal.tsx

@@ -0,0 +1,392 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Alert, Spinner } from "../UI";
+import type {
+  ClientAddress,
+  ClientAddressFormData,
+  ClientAddressFormErrors,
+} from "@/src/types/client";
+
+// ── Fixed styles ───────────────────────────────────────────────────────────
+const S = {
+  input: {
+    width: "100%",
+    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)",
+    outline: "none",
+    fontFamily: "var(--font-sans)",
+  } as React.CSSProperties,
+  label: {
+    display: "flex",
+    flexDirection: "column" as const,
+    gap: 6,
+    fontSize: 12,
+    fontWeight: 600,
+    color: "var(--color-text-secondary)",
+  } as React.CSSProperties,
+  errorText: {
+    fontSize: 11,
+    color: "var(--color-danger)",
+    fontWeight: 500,
+  } as React.CSSProperties,
+};
+
+// ── Validation ─────────────────────────────────────────────────────────────
+function validate(data: ClientAddressFormData): ClientAddressFormErrors {
+  const e: ClientAddressFormErrors = {};
+  if (!data.label.trim())      e.label      = "النوع مطلوب";
+  if (!data.street.trim())     e.street     = "العنوان مطلوب";
+  if (!data.city.trim())       e.city       = "المدينة مطلوبة";
+  if (!data.state.trim())      e.state      = "المنطقة مطلوبة";
+  if (!data.postalCode.trim()) e.postalCode = "الرمز البريدي مطلوب";
+  if (!data.country.trim())    e.country    = "الدولة مطلوبة";
+  return e;
+}
+
+const LABEL_PRESETS = ["فوترة", "شحن", "المقر الرئيسي", "فرع", "مستودع", "أخرى"];
+
+// ── Props ──────────────────────────────────────────────────────────────────
+interface AddressFormModalProps {
+  editAddress: ClientAddress | null; // null = create mode
+  onClose:     () => void;
+  onSubmit:    (data: ClientAddressFormData, isNew: boolean) => Promise<boolean>;
+}
+
+// ── Component ──────────────────────────────────────────────────────────────
+export function AddressFormModal({
+  editAddress,
+  onClose,
+  onSubmit,
+}: AddressFormModalProps) {
+  const isNew = editAddress === null;
+
+  const [form, setForm] = useState<ClientAddressFormData>({
+    label:      editAddress?.label      ?? "",
+    street:     editAddress?.street     ?? "",
+    city:       editAddress?.city       ?? "",
+    state:      editAddress?.state      ?? "",
+    postalCode: editAddress?.postalCode ?? "",
+    country:    editAddress?.country    ?? "المملكة العربية السعودية",
+    isPrimary:  editAddress?.isPrimary  ?? false,
+  });
+  const [errors,   setErrors]   = useState<ClientAddressFormErrors>({});
+  const [saving,   setSaving]   = useState(false);
+  const [apiError, setApiError] = useState("");
+  const firstRef               = useRef<HTMLSelectElement>(null);
+
+  useEffect(() => { firstRef.current?.focus(); }, []);
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onClose]);
+
+  const set = (field: keyof ClientAddressFormData) =>
+    (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+      setForm((p) => ({ ...p, [field]: e.target.value }));
+      if (errors[field as keyof ClientAddressFormErrors])
+        setErrors((p) => ({ ...p, [field]: undefined }));
+    };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const errs = validate(form);
+    if (Object.keys(errs).length) { setErrors(errs); return; }
+    setSaving(true);
+    setApiError("");
+    const ok = await onSubmit(form, isNew);
+    setSaving(false);
+    if (ok) onClose();
+    else setApiError("حدث خطأ غير متوقع. يرجى المحاولة لاحقاً.");
+  };
+
+  const inputStyle = (field: keyof ClientAddressFormErrors): React.CSSProperties => ({
+    ...S.input,
+    ...(errors[field] ? { borderColor: "var(--color-danger)", background: "#FEF2F2" } : {}),
+  });
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="addr-modal-title"
+      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 50,
+        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: 520,
+          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",
+        }}
+      >
+        {/* 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: "#2563EB",
+                fontWeight: 600,
+                margin: 0,
+              }}
+            >
+              {isNew ? "إضافة عنوان" : "تعديل عنوان"}
+            </p>
+            <h2
+              id="addr-modal-title"
+              style={{
+                fontSize: 17,
+                fontWeight: 700,
+                color: "var(--color-text-primary)",
+                margin: "4px 0 0",
+              }}
+            >
+              {isNew ? "عنوان جديد" : editAddress?.label}
+            </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 */}
+        <form
+          onSubmit={handleSubmit}
+          noValidate
+          style={{
+            padding: "1.5rem",
+            display: "flex",
+            flexDirection: "column",
+            gap: "1rem",
+          }}
+        >
+          {apiError && (
+            <Alert type="error" message={apiError} onClose={() => setApiError("")} />
+          )}
+
+          {/* Label + isPrimary */}
+          <div
+            style={{
+              display: "grid",
+              gridTemplateColumns: "1fr auto",
+              gap: "0.75rem",
+              alignItems: "end",
+            }}
+          >
+            <label style={S.label}>
+              نوع العنوان *
+              <select
+                ref={firstRef}
+                style={{ ...inputStyle("label"), cursor: "pointer" }}
+                value={form.label}
+                onChange={set("label")}
+                dir="rtl"
+              >
+                <option value="">اختر النوع</option>
+                {LABEL_PRESETS.map((l) => (
+                  <option key={l} value={l}>{l}</option>
+                ))}
+              </select>
+              {errors.label && <span style={S.errorText}>{errors.label}</span>}
+            </label>
+
+            <label
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                fontSize: 12,
+                fontWeight: 600,
+                color: "var(--color-text-secondary)",
+                paddingBottom: 2,
+                cursor: "pointer",
+                whiteSpace: "nowrap",
+              }}
+            >
+              <input
+                type="checkbox"
+                checked={form.isPrimary}
+                onChange={(e) =>
+                  setForm((p) => ({ ...p, isPrimary: e.target.checked }))
+                }
+                style={{ width: 14, height: 14, cursor: "pointer" }}
+              />
+              عنوان رئيسي
+            </label>
+          </div>
+
+          {/* Street */}
+          <label style={S.label}>
+            الشارع / العنوان التفصيلي *
+            <input
+              style={inputStyle("street")}
+              value={form.street}
+              onChange={set("street")}
+              placeholder="شارع الملك فهد، مبنى 12"
+              dir="rtl"
+            />
+            {errors.street && <span style={S.errorText}>{errors.street}</span>}
+          </label>
+
+          {/* City + State */}
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
+            <label style={S.label}>
+              المدينة *
+              <input
+                style={inputStyle("city")}
+                value={form.city}
+                onChange={set("city")}
+                placeholder="الرياض"
+                dir="rtl"
+              />
+              {errors.city && <span style={S.errorText}>{errors.city}</span>}
+            </label>
+            <label style={S.label}>
+              المنطقة *
+              <input
+                style={inputStyle("state")}
+                value={form.state}
+                onChange={set("state")}
+                placeholder="منطقة الرياض"
+                dir="rtl"
+              />
+              {errors.state && <span style={S.errorText}>{errors.state}</span>}
+            </label>
+          </div>
+
+          {/* Postal code + Country */}
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
+            <label style={S.label}>
+              الرمز البريدي *
+              <input
+                style={inputStyle("postalCode")}
+                value={form.postalCode}
+                onChange={set("postalCode")}
+                placeholder="11564"
+                dir="ltr"
+              />
+              {errors.postalCode && (
+                <span style={S.errorText}>{errors.postalCode}</span>
+              )}
+            </label>
+            <label style={S.label}>
+              الدولة *
+              <input
+                style={inputStyle("country")}
+                value={form.country}
+                onChange={set("country")}
+                placeholder="المملكة العربية السعودية"
+                dir="rtl"
+              />
+              {errors.country && <span style={S.errorText}>{errors.country}</span>}
+            </label>
+          </div>
+
+          {/* Actions */}
+          <div
+            style={{
+              display: "flex",
+              gap: "0.5rem",
+              justifyContent: "flex-end",
+              paddingTop: "0.5rem",
+            }}
+          >
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={saving}
+              style={{
+                height: 40,
+                padding: "0 1.25rem",
+                borderRadius: "var(--radius-md)",
+                border: "1px solid var(--color-border)",
+                background: "var(--color-surface)",
+                fontSize: 13,
+                fontWeight: 600,
+                color: "var(--color-text-secondary)",
+                cursor: saving ? "not-allowed" : "pointer",
+                fontFamily: "var(--font-sans)",
+              }}
+            >
+              إلغاء
+            </button>
+            <button
+              type="submit"
+              disabled={saving}
+              style={{
+                height: 40,
+                padding: "0 1.5rem",
+                borderRadius: "var(--radius-md)",
+                border: "none",
+                background: saving
+                  ? "var(--color-brand-400)"
+                  : "var(--color-brand-600)",
+                fontSize: 13,
+                fontWeight: 700,
+                color: "#FFF",
+                cursor: saving ? "not-allowed" : "pointer",
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                fontFamily: "var(--font-sans)",
+              }}
+            >
+              {saving && <Spinner size="sm" className="text-white" />}
+              {saving ? "جارٍ الحفظ…" : isNew ? "إضافة العنوان" : "حفظ التغييرات"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

src/Components/Client/Clienttable.tsx

@@ -1,18 +1,35 @@
 "use client";
 
+// src/Components/Client/Clienttable.tsx
+// MIGRATED to ReusableTable — this is the one table in the project with
+// extra behavior (a click-to-expand detail panel below the row), so it
+// relies on ReusableTable's `renderExpanded` prop (added specifically to
+// cover this case) instead of the plain `renderActions`/`onRowClick` pair
+// every other table uses. AddressBadge and ClientDetailPanel are kept
+// exactly as in the original — purpose-built layouts with no shared-UI
+// equivalent, same rationale as the original file's comments.
 
-import { useState } from "react";
-import { Spinner } from "../UI";
+import { IconBtn, ReusableTable, Button } from "../UI";
+import type { TableColumn } from "@/src/types/models";
 import type { Client } from "@/src/types/client";
 
 // ── Address count badge ────────────────────────────────────────────────────
-function AddressBadge({ count, onClick }: { count: number; onClick: () => void }) {
+function AddressBadge({
+  count,
+  onClick,
+}: {
+  count: number;
+  onClick: () => void;
+}) {
   const hasAddr = count > 0;
   return (
     <button
       type="button"
-      onClick={(e) => { e.stopPropagation(); onClick(); }}
-      title="إدارة العناوين"
+      onClick={(e) => {
+        e.stopPropagation();
+        onClick();
+      }}
+      title="ادارة العناوين"
       style={{
         display: "inline-flex",
         alignItems: "center",
@@ -29,66 +46,13 @@ function AddressBadge({ count, onClick }: { count: number; onClick: () => void }
         transition: "opacity 150ms",
       }}
     >
-      {count} {count === 1 ? "عنوان" : "عناوين"}
-      {/* Small arrow icon to hint navigation */}
-      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-        <path d="M9 18l6-6-6-6" />
-      </svg>
+      {count} {count === 1 ? "address" : "العناوين"}
+      <i className="ti ti-chevron-right" style={{ fontSize: 10 }} aria-hidden="true" />
     </button>
   );
 }
 
-// ── 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>
-  );
-}
-
-// ── Client detail panel (inline expandable) ────────────────────────────────
-/**
- * ClientDetailPanel — shown below the clicked row.
- * Displays all client fields (name, email, phone, taxId, notes, createdAt)
- * and provides a direct link to the addresses sub-page.
- *
- * @param client         The client whose details are rendered.
- * @param onGoAddresses  Callback that navigates to /dashboard/clients/[id]/addresses.
- * @param onEdit         Opens the edit modal for this client.
- */
+// ── Client detail panel (the expandable content) ───────────────────────────
 function ClientDetailPanel({
   client,
   onGoAddresses,
@@ -126,10 +90,8 @@ function ClientDetailPanel({
 
   return (
     <div
-      dir="rtl"
       style={{
-        /* Slide-down visual treatment: left accent border in brand blue */
-        borderRight: "3px solid var(--color-brand-600)",
+        borderInlineStart: "3px solid var(--color-brand-600)",
         background: "linear-gradient(135deg, #EFF6FF 0%, #F0F9FF 100%)",
         borderBottom: "1px solid #BFDBFE",
         padding: "1.25rem 1.5rem",
@@ -139,7 +101,6 @@ function ClientDetailPanel({
         animation: "detailFadeIn 180ms ease",
       }}
     >
-      {/* ── Top row: name + quick actions ── */}
       <div
         style={{
           display: "flex",
@@ -179,63 +140,29 @@ function ClientDetailPanel({
           )}
         </div>
 
-        {/* Action buttons */}
         <div style={{ display: "flex", gap: "0.5rem", flexShrink: 0 }}>
-          {/* Edit client */}
-          <button
+          <Button
             type="button"
-            onClick={(e) => { e.stopPropagation(); onEdit(); }}
-            style={{
-              height: 32,
-              padding: "0 0.875rem",
-              borderRadius: "var(--radius-md)",
-              border: "1px solid #BFDBFE",
-              background: "#EFF6FF",
-              fontSize: 12,
-              fontWeight: 600,
-              color: "#1D4ED8",
-              cursor: "pointer",
-              display: "inline-flex",
-              alignItems: "center",
-              gap: 6,
-              fontFamily: "var(--font-sans)",
+            variant="secondary"
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation();
+              onEdit();
             }}
           >
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <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>
-
-          {/*
-           * "Addresses" button — KEY FEATURE:
-           * Navigates to /dashboard/clients/[clientId]/addresses
-           */}
-          <button
+            <i className="ti ti-edit" style={{ fontSize: 12 }} aria-hidden="true" />
+            تعديل التفاصيل
+          </Button>
+          <Button
             type="button"
-            onClick={(e) => { e.stopPropagation(); onGoAddresses(); }}
-            style={{
-              height: 32,
-              padding: "0 0.875rem",
-              borderRadius: "var(--radius-md)",
-              border: "none",
-              background: "var(--color-brand-600)",
-              fontSize: 12,
-              fontWeight: 700,
-              color: "#FFF",
-              cursor: "pointer",
-              display: "inline-flex",
-              alignItems: "center",
-              gap: 6,
-              fontFamily: "var(--font-sans)",
-              boxShadow: "0 1px 4px rgba(37,99,235,.3)",
+            variant="primary"
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation();
+              onGoAddresses();
             }}
           >
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
-              <circle cx="12" cy="10" r="3" />
-            </svg>
+            <i className="ti ti-map-pin" style={{ fontSize: 12 }} aria-hidden="true" />
             العناوين
             {client.addresses?.length !== undefined && (
               <span
@@ -251,11 +178,10 @@ function ClientDetailPanel({
                 {client.addresses.length}
               </span>
             )}
-          </button>
+          </Button>
         </div>
       </div>
 
-      {/* ── Info grid ── */}
       <div
         style={{
           display: "grid",
@@ -266,7 +192,7 @@ function ClientDetailPanel({
         }}
       >
         {infoItem(
-          "البريد الإلكتروني",
+          "البريد الالكتروني",
           <a
             href={`mailto:${client.email}`}
             onClick={(e) => e.stopPropagation()}
@@ -275,27 +201,26 @@ function ClientDetailPanel({
             {client.email}
           </a>,
         )}
-        {infoItem("الهاتف", client.phone)}
+        {infoItem("رقم الجوال", client.phone)}
         {infoItem(
-          "تاريخ الإضافة",
-          new Date(client.createdAt).toLocaleDateString("ar-SA", {
+          "تاريخ الانشاء",
+          new Date(client.createdAt).toLocaleDateString("en-US", {
             year: "numeric",
             month: "long",
             day: "numeric",
           }),
         )}
         {infoItem(
-          "آخر تحديث",
-          new Date(client.updatedAt).toLocaleDateString("ar-SA", {
+          "اخر تحديث",
+          new Date(client.updatedAt).toLocaleDateString("en-US", {
             year: "numeric",
             month: "long",
             day: "numeric",
           }),
         )}
-        {client.notes && infoItem("ملاحظات", client.notes)}
+        {client.notes && infoItem("Notes", client.notes)}
       </div>
 
-      {/* Keyframe animation injected via a style tag (scoped) */}
       <style>{`
         @keyframes detailFadeIn {
           from { opacity: 0; transform: translateY(-6px); }
@@ -306,26 +231,6 @@ function ClientDetailPanel({
   );
 }
 
-// ── Shared 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)",
-};
-
 // ── Props ──────────────────────────────────────────────────────────────────
 interface ClientTableProps {
   clients: Client[];
@@ -337,7 +242,6 @@ interface ClientTableProps {
   onDelete: (client: Client) => void;
   onAddFirst: () => void;
   onPageChange: (p: number) => void;
-  /** Navigate to address management for a client */
   onManageAddresses: (client: Client) => void;
 }
 
@@ -354,121 +258,12 @@ export function ClientTable({
   onPageChange,
   onManageAddresses,
 }: ClientTableProps) {
-  /**
-   * expandedId — tracks which client row is currently expanded.
-   * Clicking the same row again collapses it (toggle behaviour).
-   */
-  const [expandedId, setExpandedId] = useState<string | null>(null);
-
-  const handleRowClick = (client: Client) => {
-    // Toggle: collapse if already open, expand otherwise
-    setExpandedId((prev) => (prev === client.id ? null : client.id));
-  };
-
-  return (
-    <div style={cardStyle}>
-      {/* Column headers */}
-      <div
-        dir="rtl"
-        style={{
-          display: "grid",
-          gridTemplateColumns: "2fr 1.5fr 1.5fr 1fr 1fr 80px",
-          ...thStyle,
-        }}
-      >
-        <span>العميل</span>
-        <span>البريد الإلكتروني</span>
-        <span>الهاتف</span>
-        <span>العناوين</span>
-        <span style={{ textAlign: "center" }}>تاريخ الإضافة</span>
-        <span style={{ textAlign: "center" }}>إجراءات</span>
-      </div>
-
-      {/* Loading */}
-      {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>
-      ) : clients.length === 0 ? (
-        /* Empty state */
-        <div style={{ textAlign: "center", padding: "4rem 1rem" }}>
-          <p style={{ fontSize: 13, color: "var(--color-text-muted)" }}>
-            {search
-              ? `لا توجد نتائج لـ "${search}"`
-              : "لا يوجد عملاء لعرضهم."}
-          </p>
-          {!search && (
-            <button
-              type="button"
-              onClick={onAddFirst}
-              style={{
-                marginTop: 12,
-                fontSize: 13,
-                fontWeight: 600,
-                color: "var(--color-brand-600)",
-                background: "none",
-                border: "none",
-                cursor: "pointer",
-                textDecoration: "underline",
-              }}
-            >
-              أضف أول عميل
-            </button>
-          )}
-        </div>
-      ) : (
-        /* Data rows */
-        <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
-          {clients.map((c, i) => {
-            const isExpanded = expandedId === c.id;
-            return (
-              <li key={c.id}>
-                {/* ── Main row ── */}
-                <div
-                  role="button"
-                  tabIndex={0}
-                  aria-expanded={isExpanded}
-                  aria-label={`${c.name} — انقر لعرض التفاصيل`}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter" || e.key === " ") handleRowClick(c);
-                  }}
-                  onClick={() => handleRowClick(c)}
-                  style={{
-                    display: "grid",
-                    gridTemplateColumns: "2fr 1.5fr 1.5fr 1fr 1fr 80px",
-                    alignItems: "center",
-                    gap: "0.5rem",
-                    padding: "0.875rem 1.5rem",
-                    borderBottom: isExpanded
-                      ? "none"
-                      : "1px solid var(--color-border)",
-                    /* Highlight the expanded row with a brand-tinted background */
-                    background: isExpanded
-                      ? "#EFF6FF"
-                      : i % 2 !== 0
-                      ? "var(--color-surface-muted)"
-                      : "transparent",
-                    /* Left accent border when expanded (RTL: border-right in visual) */
-                    borderRight: isExpanded
-                      ? "3px solid var(--color-brand-600)"
-                      : "3px solid transparent",
-                    fontSize: 13,
-                    cursor: "pointer",
-                    transition: "background 120ms, border-color 120ms",
-                    outline: "none",
-                  }}
-                >
-                  {/* Name */}
+  const columns: TableColumn<Client>[] = [
+    {
+      key: "name",
+      header: "اسم العميل",
+      width: "2fr",
+      render: (c, _i, isExpanded) => (
         <div>
           <p
             style={{
@@ -481,23 +276,18 @@ export function ClientTable({
             }}
           >
             {c.name}
-                      {/* Chevron indicator — rotates when expanded */}
-                      <svg
-                        width="12"
-                        height="12"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="2.5"
+            <i
+              className="ti ti-chevron-right"
+              aria-hidden="true"
               style={{
+                fontSize: 12,
                 flexShrink: 0,
                 color: "var(--color-text-muted)",
                 transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
                 transition: "transform 200ms",
+                display: "inline-block",
               }}
-                      >
-                        <path d="M9 18l6-6-6-6" />
-                      </svg>
+            />
           </p>
           {c.taxId && (
             <p
@@ -512,8 +302,13 @@ export function ClientTable({
             </p>
           )}
         </div>
-
-                  {/* Email */}
+      ),
+    },
+    {
+      key: "email",
+      header: "البريد الالكتروني",
+      width: "1.5fr",
+      render: (c) => (
         <span
           style={{
             fontFamily: "var(--font-mono)",
@@ -524,164 +319,94 @@ export function ClientTable({
         >
           {c.email}
         </span>
-
-                  {/* Phone */}
-                  <span style={{ color: "var(--color-text-secondary)" }}>
-                    {c.phone}
-                  </span>
-
-                  {/*
-                   * Address count badge — clicking it navigates directly to
-                   * /dashboard/clients/[clientId]/addresses (bypasses the detail panel).
-                   */}
+      ),
+    },
+    {
+      key: "phone",
+      header: "رقم الجوال",
+      width: "1.5fr",
+      render: (c) => (
+        <span style={{ color: "var(--color-text-secondary)" }}>{c.phone}</span>
+      ),
+    },
+    {
+      key: "addresses",
+      header: "العناوين",
+      width: "1fr",
+      render: (c) => (
         <AddressBadge
           count={c.addresses?.length ?? 0}
           onClick={() => onManageAddresses(c)}
         />
-
-                  {/* Created at */}
-                  <span
-                    style={{
-                      textAlign: "center",
-                      fontSize: 11,
-                      color: "var(--color-text-muted)",
-                    }}
-                  >
-                    {new Date(c.createdAt).toLocaleDateString("ar-SA", {
+      ),
+    },
+    {
+      key: "createdAt",
+      header: "تاريخ الانشاء",
+      width: "1fr",
+      align: "center",
+      render: (c) => (
+        <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
+          {new Date(c.createdAt).toLocaleDateString("en-US", {
             year: "numeric",
             month: "short",
             day: "numeric",
           })}
         </span>
+      ),
+    },
+  ];
 
-                  {/* Row action buttons */}
-                  <div
-                    style={{
-                      display: "flex",
-                      justifyContent: "center",
-                      gap: 6,
-                    }}
-                    onClick={(e) => e.stopPropagation()}
-                  >
+  return (
+    <ReusableTable
+      columns={columns}
+      data={clients}
+      loading={loading}
+      search={search}
+      page={page}
+      pages={pages}
+      onPageChange={onPageChange}
+      actionsWidth="80px"
+      emptyIcon="👥"
+      emptyTitle={
+        search ? `No results for "${search}"` : "No clients to display."
+      }
+      emptyAction={
+        !search && (
+          <Button type="button" variant="ghost" size="sm" onClick={onAddFirst}>
+            Add first client
+          </Button>
+        )
+      }
+      renderActions={(c) => (
+        <>
           <IconBtn
-                      title={`تعديل ${c.name}`}
+            title={`Edit ${c.name}`}
             color="#1D4ED8"
             bg="#EFF6FF"
             borderColor="#BFDBFE"
             onClick={() => onEdit(c)}
           >
-                      <svg
-                        width="14"
-                        height="14"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="2"
-                      >
-                        <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>
+            <i className="ti ti-edit" style={{ fontSize: 14 }} aria-hidden="true" />
           </IconBtn>
           <IconBtn
-                      title={`حذف ${c.name}`}
+            title={`Delete ${c.name}`}
             color="#DC2626"
             bg="#FEF2F2"
             borderColor="#FECACA"
             onClick={() => onDelete(c)}
           >
-                      <svg
-                        width="14"
-                        height="14"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="2"
-                      >
-                        <polyline points="3 6 5 6 21 6" />
-                        <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
-                        <path d="M10 11v6M14 11v6" />
-                        <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
-                      </svg>
+            <i className="ti ti-trash" style={{ fontSize: 14 }} aria-hidden="true" />
           </IconBtn>
-                  </div>
-                </div>
-
-                {/*
-                 * ── Expandable detail panel ──
-                 * Rendered inline below the row when isExpanded is true.
-                 * Contains full client metadata + "العناوين" navigation button.
-                 *
-                 * TEST: Click any row → panel slides in with client details.
-                 *       Click "العناوين" → router.push to /dashboard/clients/[id]/addresses.
-                 *       Click same row again → panel collapses.
-                 */}
-                {isExpanded && (
+        </>
+      )}
+      renderExpanded={(c) => (
         <ClientDetailPanel
           client={c}
           onGoAddresses={() => onManageAddresses(c)}
           onEdit={() => onEdit(c)}
         />
       )}
-              </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>
+    />
   );
 }

src/Components/Client/Deleteconfirmmodal.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import { useEffect } from "react";
+import { Spinner } from "../UI";
+import type { Client } from "@/src/types/client";
+
+interface DeleteConfirmModalProps {
+  client:    Client;
+  deleting:  boolean;
+  onCancel:  () => void;
+  onConfirm: () => void;
+}
+
+export function DeleteConfirmModal({
+  client,
+  deleting,
+  onCancel,
+  onConfirm,
+}: DeleteConfirmModalProps) {
+  // Close on Escape — identical to User/DeleteConfirmModal
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onCancel();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onCancel]);
+
+  return (
+    <div
+      role="alertdialog"
+      aria-modal="true"
+      aria-labelledby="del-client-title"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onCancel();
+      }}
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 60,
+        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: 400,
+          background: "var(--color-surface)",
+          borderRadius: "var(--radius-xl)",
+          border: "1px solid #FECACA",
+          boxShadow: "0 20px 48px rgba(0,0,0,.18)",
+          padding: "2rem",
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+          textAlign: "center",
+        }}
+      >
+        {/* أيقونة الحذف */}
+        <div
+          style={{
+            width: 52,
+            height: 52,
+            margin: "0 auto",
+            borderRadius: "50%",
+            background: "#FEF2F2",
+            border: "1px solid #FECACA",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <svg
+            width="22"
+            height="22"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="#DC2626"
+            strokeWidth="2"
+          >
+            <polyline points="3 6 5 6 21 6" />
+            <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+            <path d="M10 11v6M14 11v6" />
+            <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
+          </svg>
+        </div>
+
+        <div>
+          <h2
+            id="del-client-title"
+            style={{
+              fontSize: 17,
+              fontWeight: 700,
+              color: "var(--color-text-primary)",
+              margin: 0,
+            }}
+          >
+            حذف العميل
+          </h2>
+          <p
+            style={{
+              marginTop: 8,
+              fontSize: 13,
+              color: "var(--color-text-muted)",
+              lineHeight: 1.6,
+            }}
+          >
+            هل أنت متأكد من حذف{" "}
+            <strong style={{ color: "var(--color-text-primary)" }}>
+              {client.name}
+            </strong>
+            ؟ سيتم حذف جميع عناوينه أيضاً. لا يمكن التراجع عن هذا الإجراء.
+          </p>
+        </div>
+
+        <div style={{ display: "flex", gap: "0.5rem" }}>
+          <button
+            type="button"
+            onClick={onCancel}
+            disabled={deleting}
+            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: deleting ? "not-allowed" : "pointer",
+              fontFamily: "var(--font-sans)",
+            }}
+          >
+            إلغاء
+          </button>
+          <button
+            type="button"
+            onClick={onConfirm}
+            disabled={deleting}
+            style={{
+              flex: 1,
+              height: 40,
+              borderRadius: "var(--radius-md)",
+              border: "none",
+              background: "#DC2626",
+              fontSize: 13,
+              fontWeight: 700,
+              color: "#FFF",
+              cursor: deleting ? "not-allowed" : "pointer",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 8,
+              fontFamily: "var(--font-sans)",
+              opacity: deleting ? 0.7 : 1,
+            }}
+          >
+            {deleting && <Spinner size="sm" className="text-white" />}
+            {deleting ? "جارٍ الحذف…" : "تأكيد الحذف"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/Components/Client/archive/ArchivedClientDetailModal.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import { useEffect } from "react";
-import { Spinner } from "../../UI";
+import { Alert, Badge, Button, Modal, Spinner } from "../../UI";
 import { useArchivedClient } from "@/src/hooks/archive/useArchiveClient";
 
 interface ArchivedClientDetailModalProps {
@@ -9,7 +8,7 @@ interface ArchivedClientDetailModalProps {
   onClose:  () => void;
 }
 
-// ── small helper components ───────────────────────────────────────────────────
+// ── small helper components (no template exists for a plain label/value row) ──
 function DetailRow({ label, value }: { label: string; value?: string | null }) {
   return (
     <div style={{
@@ -27,23 +26,7 @@ function DetailRow({ label, value }: { label: string; value?: string | null }) {
   );
 }
 
-function StatusBadge({ active }: { active: boolean }) {
-  return (
-    <span style={{
-      display: "inline-flex", alignItems: "center", gap: 6,
-      borderRadius: "var(--radius-full)",
-      border: active ? "1px solid #BBF7D0" : "1px solid #FECACA",
-      background: active ? "#DCFCE7" : "#FEF2F2",
-      padding: "0.25rem 0.75rem",
-      fontSize: 12, fontWeight: 600,
-      color: active ? "#166534" : "#991B1B",
-    }}>
-      <span style={{ width: 6, height: 6, borderRadius: "50%", background: active ? "#16A34A" : "#DC2626" }} />
-      {active ? "نشط" : "معطل"}
-    </span>
-  );
-}
-
+// Avatar has no equivalent in the shared UI kit — kept custom.
 function Avatar({ name }: { name: string }) {
   const initials = name.trim().split(" ").slice(0, 2).map(w => w[0]).join("").toUpperCase();
   return (
@@ -60,22 +43,6 @@ function Avatar({ name }: { name: string }) {
   );
 }
 
-// Small badge for an archived order row's status
-function OrderStatusBadge({ status }: { status: string }) {
-  return (
-    <span style={{
-      fontSize: 10, fontWeight: 700, textTransform: "uppercase",
-      borderRadius: "var(--radius-full)",
-      border: "1px solid var(--color-border)",
-      background: "var(--color-surface-muted)",
-      color: "var(--color-text-muted)",
-      padding: "0.15rem 0.5rem",
-    }}>
-      {status}
-    </span>
-  );
-}
-
 // ── main component ────────────────────────────────────────────────────────────
 export function ArchivedClientDetailModal({ clientId, onClose }: ArchivedClientDetailModalProps) {
   const {
@@ -85,72 +52,24 @@ export function ArchivedClientDetailModal({ clientId, onClose }: ArchivedClientD
     setOrdersPage,
   } = useArchivedClient(clientId);
 
-  // close on Escape
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
-    window.addEventListener("keydown", handler);
-    return () => window.removeEventListener("keydown", handler);
-  }, [onClose]);
-
   const fmt = (iso?: string | null) =>
     iso ? new Date(iso).toLocaleDateString("ar-SA", { year: "numeric", month: "long", day: "numeric" }) : null;
 
   // ── render ────────────────────────────────────────────────────────────────
   return (
-    <div
-      role="dialog" aria-modal="true" aria-labelledby="archived-client-detail-title"
-      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
-      style={{
-        position: "fixed", inset: 0, zIndex: 55,
-        background: "rgba(15,23,42,0.55)", backdropFilter: "blur(4px)",
-        display: "flex", alignItems: "center", justifyContent: "center", padding: "1rem",
-      }}
+    <Modal
+      open
+      title={client?.name ?? "عرض العميل"}
+      subtitle="عميل مؤرشف"
+      onClose={onClose}
+      zIndex={60}
+      size="md"
+      footer={
+        <Button type="button" variant="secondary" onClick={onClose}>
+          إغلاق
+        </Button>
+      }
     >
-      <div
-        onClick={e => e.stopPropagation()}
-        style={{
-          width: "100%", maxWidth: 560,
-          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-client-detail-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
-              {client?.name ?? "عرض العميل"}
-            </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: "75vh" }}>
-
       {/* loading */}
       {loading && (
         <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 10, padding: "3rem 0", color: "var(--color-text-muted)" }}>
@@ -160,17 +79,7 @@ export function ArchivedClientDetailModal({ clientId, onClose }: ArchivedClientD
       )}
 
       {/* error */}
-          {!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 && error && <Alert type="error" message={error} />}
 
       {/* content */}
       {!loading && client && (
@@ -186,7 +95,7 @@ export function ArchivedClientDetailModal({ clientId, onClose }: ArchivedClientD
             <div style={{ flex: 1, minWidth: 0 }}>
               <p style={{ fontSize: 16, fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>{client.name}</p>
               <div style={{ marginTop: 8 }}>
-                    <StatusBadge active={client.isActive} />
+                <Badge label={client.isActive ? "نشط" : "معطل"} color={client.isActive ? "green" : "red"} />
               </div>
             </div>
           </div>
@@ -220,7 +129,7 @@ export function ArchivedClientDetailModal({ clientId, onClose }: ArchivedClientD
                   fontSize: 12, color: "var(--color-text-secondary)",
                 }}>
                   <strong style={{ color: "var(--color-text-primary)" }}>{addr.label}</strong>
-                      {" — "}{addr.street}، {addr.city}
+                  {" — "}{addr.details?.street}، {addr.details?.city}، {addr.details?.state}، {addr.details?.country}
                 </div>
               ))}
             </div>
@@ -256,7 +165,7 @@ export function ArchivedClientDetailModal({ clientId, onClose }: ArchivedClientD
                     <span style={{ fontWeight: 600, color: "var(--color-text-primary)" }}>
                       {o.orderNumber ?? o.id}
                     </span>
-                        <OrderStatusBadge status={o.status} />
+                    <Badge label={o.status} color="slate" />
                     <span style={{ color: "var(--color-text-muted)" }}>
                       {new Date(o.createdAt).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" })}
                     </span>
@@ -270,16 +179,24 @@ export function ArchivedClientDetailModal({ clientId, onClose }: ArchivedClientD
                     صفحة {ordersPage} من {ordersPages}
                   </span>
                   <div style={{ display: "flex", gap: 6 }}>
-                        <button type="button" disabled={ordersPage === 1}
+                    <Button
+                      type="button"
+                      variant="secondary"
+                      size="sm"
+                      disabled={ordersPage === 1}
                       onClick={() => setOrdersPage(Math.max(1, ordersPage - 1))}
-                          style={{ fontSize: 11, padding: "0.25rem 0.625rem", borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface-muted)", cursor: ordersPage === 1 ? "not-allowed" : "pointer", opacity: ordersPage === 1 ? 0.4 : 1 }}>
+                    >
                       السابق
-                        </button>
-                        <button type="button" disabled={ordersPage === ordersPages}
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="secondary"
+                      size="sm"
+                      disabled={ordersPage === ordersPages}
                       onClick={() => setOrdersPage(Math.min(ordersPages, ordersPage + 1))}
-                          style={{ fontSize: 11, padding: "0.25rem 0.625rem", borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface-muted)", cursor: ordersPage === ordersPages ? "not-allowed" : "pointer", opacity: ordersPage === ordersPages ? 0.4 : 1 }}>
+                    >
                       التالي
-                        </button>
+                    </Button>
                   </div>
                 </div>
               )}
@@ -287,31 +204,6 @@ export function ArchivedClientDetailModal({ clientId, onClose }: ArchivedClientD
           )}
         </div>
       )}
-        </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>
+    </Modal>
   );
 }

src/Components/Client/archive/ArchivedClientTable.tsx

@@ -1,41 +1,13 @@
 "use client";
 
-import { Spinner } from "../../UI";
+// src/Components/Client/archive/ArchivedClientTable.tsx
+// MIGRATED to ReusableTable + ActionButtons. View-only, no row click in
+// the original.
+
+import { Badge, ReusableTable, ActionButtons } from "../../UI";
+import type { TableColumn } from "@/src/types/models";
 import type { ArchivedClient } from "@/src/types/client";
 
-// ── status badge ─────────────────────────────────────────────────────────────
-function StatusBadge({ active }: { active: boolean }) {
-  return (
-    <span style={{ display: "inline-flex", alignItems: "center", gap: 5, borderRadius: "var(--radius-full)", border: active ? "1px solid #BBF7D0" : "1px solid #FECACA", background: active ? "#DCFCE7" : "#FEF2F2", padding: "0.2rem 0.625rem", fontSize: 11, fontWeight: 600, color: active ? "#166534" : "#991B1B" }}>
-      <span style={{ width: 6, height: 6, borderRadius: "50%", background: active ? "#16A34A" : "#DC2626" }} />
-      {active ? "نشط" : "معطل"}
-    </span>
-  );
-}
-
-// ── 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>
-  );
-}
-
-// ── 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)",
-};
-
-// ── Props ────────────────────────────────────────────────────────────────────
 interface ArchivedClientTableProps {
   clients: ArchivedClient[];
   loading: boolean;
@@ -46,89 +18,59 @@ interface ArchivedClientTableProps {
   onPageChange: (p: number) => void;
 }
 
-// ── main table ───────────────────────────────────────────────────────────────
 export function ArchivedClientTable({ clients, loading, search, page, pages, onView, onPageChange }: ArchivedClientTableProps) {
-  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 style={{ textAlign: "center" }}>تاريخ الإنشاء</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>
-      ) : clients.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 }}>
-          {clients.map((c, i) => (
-            <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,
-            }}>
+  const columns: TableColumn<ArchivedClient>[] = [
+    {
+      key: "name",
+      header: "اسم العميل",
+      width: "2fr",
+      render: (c) => (
         <div>
           <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>{c.name}</p>
           <p style={{ marginTop: 2, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--color-text-muted)" }}>{c.phone}</p>
         </div>
-              <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "#2563EB", fontWeight: 600 }}>{c.email}</span>
-              <StatusBadge active={c.isActive} />
-              <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
-                {new Date(c.createdAt).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" })}
-              </span>
-              <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
-                {new Date(c.updatedAt).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" })}
-              </span>
-              <div style={{ display: "flex", justifyContent: "center", gap: 4 }}>
-                {/* view only — delete/restore not implemented yet, matches archived users */}
-                <IconBtn title={`عرض ${c.name}`} 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>
-      )}
+      ),
+    },
+    {
+      key: "email",
+      header: "البريد الالكتروني",
+      width: "1.5fr",
+      render: (c) => <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "#2563EB", fontWeight: 600 }}>{c.email}</span>,
+    },
+    {
+      key: "status",
+      header: "الحالة",
+      width: "1fr",
+      render: (c) => <Badge label={c.isActive ? "Active" : "Disabled"} color={c.isActive ? "green" : "red"} />,
+    },
+    {
+      key: "createdAt",
+      header: "تاريخ الانشاء",
+      width: "1fr",
+      align: "center",
+      render: (c) => new Date(c.createdAt).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" }),
+    },
+    {
+      key: "updatedAt",
+      header: "تاريخ التعديل",
+      width: "1fr",
+      align: "center",
+      render: (c) => new Date(c.updatedAt).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" }),
+    },
+  ];
 
-      {/* 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>
+  return (
+    <ReusableTable
+      columns={columns}
+      data={clients}
+      loading={loading}
+      search={search}
+      page={page}
+      pages={pages}
+      onPageChange={onPageChange}
+      emptyIcon="👥"
+      emptyDescription={search ? `No results for "${search}"` : "No archived clients."}
+      renderActions={(c) => <ActionButtons itemLabel={c.name} onView={() => onView(c)} />}
+    />
   );
 }

src/Components/Client/archive/ArchivedClientsModal.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Alert, Input, Button } from "../../UI";
+import { Alert, Input, Modal } from "../../UI";
 import { ArchivedClientTable } from "./ArchivedClientTable";
 import { ArchivedClientDetailModal } from "./ArchivedClientDetailModal";
 import { useArchivedClients } from "@/src/hooks/archive/useArchivedClients";
@@ -20,62 +20,18 @@ export function ArchivedClientsModal({ onClose }: ArchivedClientsModalProps) {
   } = useArchivedClients();
 
   return (
-    <div
-      role="dialog" aria-modal="true" aria-labelledby="archive-client-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={`العملاء المؤرشفون (${total})`}
+      subtitle="الأرشيف"
+      onClose={onClose}
+      size="lg"
     >
       {viewClientId && (
         <ArchivedClientDetailModal clientId={viewClientId} onClose={() => setViewClientId(null)} />
       )}
 
-      <div
-        onClick={e => e.stopPropagation()}
-        style={{
-          width: "100%", maxWidth: 920,
-          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-client-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"
-            variant="secondary"
-            onClick={onClose}
-            aria-label="إغلاق"
-            style={{ width: 34, height: 34, padding: 0, fontSize: 18, lineHeight: 1 }}
-          >
-            ×
-          </Button>
-        </div>
-
-        {/* body */}
-        <div style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
+      <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
         {/* search */}
         <div style={{ maxWidth: 320 }}>
           <Input
@@ -86,9 +42,7 @@ export function ArchivedClientsModal({ onClose }: ArchivedClientsModalProps) {
             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>
+              <i className="ti ti-search" style={{ fontSize: 16 }} aria-hidden="true" />
             }
           />
         </div>
@@ -105,7 +59,6 @@ export function ArchivedClientsModal({ onClose }: ArchivedClientsModalProps) {
           onPageChange={setPage}
         />
       </div>
-      </div>
-    </div>
+    </Modal>
   );
 }

src/Components/Client/index.ts

@@ -1,6 +1,5 @@
 // src/Components/Client/index.ts
 // CHANGE: removed DeleteConfirmModal export (Issue 1).
 export { ClientFormModal }    from "./Clientformmodal";
-export { ClientTable }        from "./Clienttable";
+export { ClientTable }        from "./ClientTable";
 export { AddressFormModal }   from "../Client_Adress/Addressformmodal";
-export { Toast } from "./Toast";

src/Components/Client_Adress/AddressDetailModal.tsx

@@ -0,0 +1,284 @@
+"use client";
+
+import { Button, Modal } from "../UI";
+import type { ClientAddress } from "@/src/types/client_adresses";
+
+// ─── Helpers ───────────────────────────────────────────────────────────────
+
+function labelIcon(label: string): string {
+  const map: Record<string, string> = {
+    "فوترة":         "💳",
+    "شحن":           "📦",
+    "المقر الرئيسي": "🏢",
+    "فرع":           "🏬",
+    "مستودع":        "🏭",
+    billing:         "💳",
+    shipping:        "📦",
+    "head office":   "🏢",
+    branch:          "🏬",
+    warehouse:       "🏭",
+  };
+  return map[label.toLowerCase()] ?? "📍";
+}
+
+// ─── Sub-components ────────────────────────────────────────────────────────
+
+function DetailRow({
+  label,
+  value,
+  ltr = false,
+}: {
+  label: string;
+  value?: string | null;
+  ltr?: boolean;
+}) {
+  if (!value) return null;
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
+        padding: "0.75rem 0",
+        borderBottom: "1px solid var(--color-border)",
+      }}
+    >
+      <span
+        style={{
+          fontSize: 11,
+          fontWeight: 700,
+          color: "var(--color-text-muted)",
+          textTransform: "uppercase",
+          letterSpacing: "0.07em",
+        }}
+      >
+        {label}
+      </span>
+      <span
+        dir={ltr ? "ltr" : "rtl"}
+        style={{
+          fontSize: 14,
+          fontWeight: 500,
+          color: "var(--color-text-primary)",
+          fontFamily: ltr ? "var(--font-mono)" : "var(--font-sans)",
+        }}
+      >
+        {value}
+      </span>
+    </div>
+  );
+}
+
+function SectionCard({
+  title,
+  icon,
+  children,
+}: {
+  title: string;
+  icon: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      style={{
+        borderRadius: "var(--radius-xl)",
+        border: "1px solid var(--color-border)",
+        background: "var(--color-surface)",
+        boxShadow: "var(--shadow-card)",
+        overflow: "hidden",
+      }}
+    >
+      {/* Card header */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 10,
+          padding: "0.875rem 1.5rem",
+          borderBottom: "1px solid var(--color-border)",
+          background: "var(--color-surface-muted)",
+        }}
+      >
+        <span style={{ fontSize: 16 }} aria-hidden="true">{icon}</span>
+        <p
+          style={{
+            margin: 0,
+            fontSize: 12,
+            fontWeight: 700,
+            color: "var(--color-text-secondary)",
+            letterSpacing: "0.05em",
+            textTransform: "uppercase",
+          }}
+        >
+          {title}
+        </p>
+      </div>
+
+      {/* Card body */}
+      <div
+        dir="rtl"
+        style={{ padding: "0 1.5rem" }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// ─── Body content — was AddressDetails.tsx, now inlined here ───────────────
+
+function AddressDetailsBody({ address }: { address: ClientAddress }) {
+  const { details, contactPerson, location } = address;
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "1rem",
+      }}
+    >
+      {/* Identity card — label + branch */}
+      <div
+        style={{
+          borderRadius: "var(--radius-xl)",
+          border: "1px solid var(--color-border)",
+          background: "var(--color-surface)",
+          boxShadow: "var(--shadow-card)",
+          padding: "1.25rem 1.5rem",
+          display: "flex",
+          alignItems: "center",
+          gap: "1rem",
+        }}
+        dir="rtl"
+      >
+        <div
+          style={{
+            width: 52,
+            height: 52,
+            borderRadius: "var(--radius-lg)",
+            background: "var(--color-brand-50)",
+            border: "1px solid var(--color-brand-100)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: 24,
+            flexShrink: 0,
+          }}
+          aria-hidden="true"
+        >
+          {labelIcon(address.label)}
+        </div>
+
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <p
+            style={{
+              margin: 0,
+              fontSize: 18,
+              fontWeight: 700,
+              color: "var(--color-text-primary)",
+            }}
+          >
+            {address.label}
+          </p>
+          {address.branchName && (
+            <p
+              style={{
+                margin: "3px 0 0",
+                fontSize: 13,
+                color: "var(--color-text-muted)",
+              }}
+            >
+              {address.branchName}
+            </p>
+          )}
+        </div>
+      </div>
+
+      {/* Address details */}
+      <SectionCard title="تفاصيل العنوان" icon="🗺️">
+        <DetailRow label="الشارع"           value={details.street} />
+        <DetailRow label="المدينة"          value={details.city} />
+        <DetailRow label="المنطقة / الولاية" value={details.state} />
+        <DetailRow label="الحي"             value={details.district} />
+        <DetailRow label="رقم المبنى"       value={details.buildingNo} ltr />
+        <DetailRow label="رقم الوحدة"       value={details.unitNo}     ltr />
+        <DetailRow label="الرقم الإضافي"    value={details.additionalNo} ltr />
+        <DetailRow label="الرمز البريدي"    value={details.zipCode}    ltr />
+        <DetailRow label="الشقة / الطابق"   value={details.apartment} />
+        <DetailRow label="الدولة"           value={details.country} />
+      </SectionCard>
+
+      {/* Contact person — only when present */}
+      {(contactPerson?.name || contactPerson?.phone) && (
+        <SectionCard title="جهة الاتصال" icon="👤">
+          <DetailRow label="الاسم"      value={contactPerson.name} />
+          <DetailRow label="رقم الهاتف" value={contactPerson.phone} ltr />
+        </SectionCard>
+      )}
+
+      {/* Coordinates */}
+      {location?.coordinates && (
+        <SectionCard title="الإحداثيات الجغرافية" icon="📡">
+          <DetailRow
+            label="خط الطول (Longitude)"
+            value={String(location.coordinates[0])}
+            ltr
+          />
+          <DetailRow
+            label="خط العرض (Latitude)"
+            value={String(location.coordinates[1])}
+            ltr
+          />
+        </SectionCard>
+      )}
+
+      {/* System metadata */}
+      <SectionCard title="معلومات النظام" icon="🕐">
+        <DetailRow
+          label="تاريخ الإنشاء"
+          value={new Date(address.createdAt).toLocaleString("ar-SA", {
+            dateStyle: "long",
+            timeStyle: "short",
+          })}
+        />
+        <DetailRow
+          label="آخر تحديث"
+          value={new Date(address.updatedAt).toLocaleString("ar-SA", {
+            dateStyle: "long",
+            timeStyle: "short",
+          })}
+        />
+      </SectionCard>
+    </div>
+  );
+}
+
+// ─── Main export — the modal ────────────────────────────────────────────────
+
+interface AddressDetailModalProps {
+  address: ClientAddress;
+  onClose: () => void;
+}
+
+// Unlike UserDetailModal, no fetch-by-id is needed here — the address list
+// (useClientAddresses) already returns the full ClientAddress object with
+// details/contactPerson/location, so we just render what we already have.
+export function AddressDetailModal({ address, onClose }: AddressDetailModalProps) {
+  return (
+    <Modal
+      open
+      title={address.label}
+      subtitle="تفاصيل العنوان"
+      onClose={onClose}
+      size="md"
+      footer={
+        <Button type="button" variant="secondary" onClick={onClose}>
+          إغلاق
+        </Button>
+      }
+    >
+      <AddressDetailsBody address={address} />
+    </Modal>
+  );
+}

src/Components/Client_Adress/archive/ArchivedClientAddressesDetailModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect } from "react";
+import { Button, Modal } from "../../UI";
 import type { ArchivedClientAddress } from "@/src/types/client_adresses";
 
 interface ArchivedClientAddressesDetailModalProps {
@@ -8,7 +8,7 @@ interface ArchivedClientAddressesDetailModalProps {
   onClose: () => void;
 }
 
-// ── small helper components ───────────────────────────────────────────────────
+// ── small helper components (no template exists for a plain label/value row) ──
 function DetailRow({ label, value }: { label: string; value?: string | null }) {
   if (!value) return null;
   return (
@@ -42,69 +42,23 @@ function SectionHeader({ title }: { title: string }) {
 
 // ── main component ────────────────────────────────────────────────────────────
 export function ArchivedClientAddressesDetailModal({ address, onClose }: ArchivedClientAddressesDetailModalProps) {
-  // close on Escape
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
-    window.addEventListener("keydown", handler);
-    return () => window.removeEventListener("keydown", handler);
-  }, [onClose]);
-
   const { details, contactPerson, location } = address;
 
   return (
-    <div
-      role="dialog" aria-modal="true" aria-labelledby="archived-address-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",
-      }}
+    <Modal
+      open
+      title={address.label}
+      subtitle="عنوان مؤرشف"
+      onClose={onClose}
+      zIndex={60}
+      size="md"
+      footer={
+        <Button type="button" variant="secondary" onClick={onClose}>
+          إغلاق
+        </Button>
+      }
     >
-      <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-address-detail-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
-              {address.label}
-            </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">
+      <div dir="rtl">
         <DetailRow label="معرف العميل" value={address.clientId} />
         <DetailRow label="الفرع" value={address.branchName} />
 
@@ -143,30 +97,6 @@ export function ArchivedClientAddressesDetailModal({ address, onClose }: Archive
           <DetailRow label="تاريخ الحذف" value={new Date(address.deletedAt).toLocaleString("ar-SA")} />
         )}
       </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>
+    </Modal>
   );
 }

src/Components/Client_Adress/archive/ArchivedClientAddressesTable.tsx

@@ -1,39 +1,12 @@
 "use client";
 
-import { Spinner } from "../../UI";
+
+import { Badge, IconBtn, ReusableTable } from "../../UI";
+import type { TableColumn } from "@/src/types/models";
 import type { ArchivedClientAddress } from "@/src/types/client_adresses";
 
-// ── validation badge ─────────────────────────────────────────────────────────
-function ValidatedBadge({ validated }: { validated: boolean }) {
-  return (
-    <span style={{ display: "inline-flex", alignItems: "center", gap: 5, borderRadius: "var(--radius-full)", border: validated ? "1px solid #BBF7D0" : "1px solid var(--color-border)", background: validated ? "#DCFCE7" : "var(--color-surface-muted)", padding: "0.2rem 0.625rem", fontSize: 11, fontWeight: 600, color: validated ? "#166534" : "var(--color-text-muted)" }}>
-      <span style={{ width: 6, height: 6, borderRadius: "50%", background: validated ? "#16A34A" : "var(--color-text-hint)" }} />
-      {validated ? "موثّق" : "غير موثّق"}
-    </span>
-  );
-}
 
-// ── 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>
-  );
-}
-
-// ── 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)",
-};
+type Row = ArchivedClientAddress & { id: string };
 
 // ── Props ────────────────────────────────────────────────────────────────────
 interface ArchivedClientAddressesTableProps {
@@ -45,71 +18,87 @@ interface ArchivedClientAddressesTableProps {
 
 // ── main table — no pagination footer: the endpoint returns the full set ─────
 export function ArchivedClientAddressesTable({ addresses, loading, search, onView }: ArchivedClientAddressesTableProps) {
-  return (
-    <div style={cardStyle}>
-      {/* column headers */}
-      <div dir="rtl" style={{ display: "grid", gridTemplateColumns: "1.5fr 2fr 1.2fr 1fr 1fr 100px", ...thStyle }}>
-        <span>النوع</span>
-        <span>العنوان</span>
-        <span>جهة الاتصال</span>
-        <span>الحالة</span>
-        <span style={{ textAlign: "center" }}>تاريخ الإنشاء</span>
-        <span style={{ textAlign: "center" }}>إجراءات</span>
-      </div>
+  const rows: Row[] = addresses.map((a) => ({ ...a, id: a._id }));
 
-      {/* 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>
-      ) : addresses.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 }}>
-          {addresses.map((a, i) => (
-            <li key={a._id} style={{
-              display: "grid", gridTemplateColumns: "1.5fr 2fr 1.2fr 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,
-            }}>
+  const columns: TableColumn<Row>[] = [
+    {
+      key: "type",
+      header: "النوع",
+      width: "1.5fr",
+      render: (a) => (
         <div>
           <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>{a.label}</p>
           {a.branchName && (
             <p style={{ marginTop: 2, fontSize: 11, color: "var(--color-text-muted)" }}>{a.branchName}</p>
           )}
         </div>
+      ),
+    },
+    {
+      key: "address",
+      header: "العنوان",
+      width: "2fr",
+      render: (a) => (
         <span style={{ color: "var(--color-text-secondary)" }}>
           {a.details.street}، {a.details.city}
         </span>
+      ),
+    },
+    {
+      key: "contact",
+      header: "جهة الاتصال",
+      width: "1.2fr",
+      render: (a) => (
         <span style={{ fontSize: 12, color: "var(--color-text-secondary)" }}>
           {a.contactPerson?.name ?? "—"}
         </span>
-              <ValidatedBadge validated={!!a.isValidated} />
-              <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
+      ),
+    },
+    {
+      key: "status",
+      header: "الحالة",
+      width: "1fr",
+      render: (a) => (
+        <Badge
+          label={a.isValidated ? "موثّق" : "غير موثّق"}
+          color={a.isValidated ? "green" : "slate"}
+        />
+      ),
+    },
+    {
+      key: "createdAt",
+      header: "تاريخ الإنشاء",
+      width: "1fr",
+      render: (a) => (
+        <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
           {new Date(a.createdAt).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" })}
         </span>
-              <div style={{ display: "flex", justifyContent: "center", gap: 4 }}>
-                {/* view only — matches archived users/clients: no delete/restore yet */}
-                <IconBtn title={`عرض ${a.label}`} color="#059669" bg="#ECFDF5" borderColor="#A7F3D0" onClick={() => onView(a)}>
-                  <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>
+      ),
+    },
+  ];
+
+  return (
+    <ReusableTable
+      columns={columns}
+      data={rows}
+      loading={loading}
+      search={search}
+      page={1}
+      pages={1}
+      onPageChange={() => {}}
+      actionsWidth="100px"
+      onRowClick={onView}
+      emptyDescription={search ? `لا توجد نتائج لـ "${search}"` : "لا توجد عناوين في الأرشيف."}
+      renderActions={(a) => (
+        // view only — matches archived users/clients: no delete/restore yet
+        <IconBtn
+          title={`عرض ${a.label}`}
+          color="#059669" bg="#ECFDF5" borderColor="#A7F3D0"
+          onClick={() => onView(a)}
+        >
+          <i className="ti ti-eye" style={{ fontSize: 14 }} aria-hidden="true" />
         </IconBtn>
-              </div>
-            </li>
-          ))}
-        </ul>
       )}
-    </div>
+    />
   );
 }

src/Components/Client_Adress/archive/ArchivedClientsAddressesModal.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Alert, Input, Button } from "../../UI";
+import { Alert, Input, Modal } from "../../UI";
 import { ArchivedClientAddressesTable } from "./ArchivedClientAddressesTable";
 import { ArchivedClientAddressesDetailModal } from "./ArchivedClientAddressesDetailModal";
 import { useArchivedClientAddresses } from "@/src/hooks/archive/useArchiveClientAdresses";
@@ -24,62 +24,18 @@ export function ArchivedClientsAddressesModal({ onClose, clientId }: ArchivedCli
   } = useArchivedClientAddresses(clientId);
 
   return (
-    <div
-      role="dialog" aria-modal="true" aria-labelledby="archive-address-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={`العناوين المؤرشفة (${total})`}
+      subtitle="الأرشيف"
+      onClose={onClose}
+      size="lg"
     >
       {viewAddress && (
         <ArchivedClientAddressesDetailModal address={viewAddress} onClose={() => setViewAddress(null)} />
       )}
 
-      <div
-        onClick={e => e.stopPropagation()}
-        style={{
-          width: "100%", maxWidth: 920,
-          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-address-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"
-            variant="secondary"
-            onClick={onClose}
-            aria-label="إغلاق"
-            style={{ width: 34, height: 34, padding: 0, fontSize: 18, lineHeight: 1 }}
-          >
-            ×
-          </Button>
-        </div>
-
-        {/* body */}
-        <div style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
+      <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
         {/* search — client-side only: this endpoint has no server-side search/pagination */}
         <div style={{ maxWidth: 320 }}>
           <Input
@@ -90,9 +46,7 @@ export function ArchivedClientsAddressesModal({ onClose, clientId }: ArchivedCli
             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>
+              <i className="ti ti-search" style={{ fontSize: 16 }} aria-hidden="true" />
             }
           />
         </div>
@@ -106,7 +60,6 @@ export function ArchivedClientsAddressesModal({ onClose, clientId }: ArchivedCli
           onView={setViewAddress}
         />
       </div>
-      </div>
-    </div>
+    </Modal>
   );
 }

src/Components/Dashboard/AlertsSection.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import Link from "next/link";
+import { EmptyState, Spinner } from "@/src/Components/UI";
+import { ENTITY_KPI_CONFIG } from "@/src/types/dashboard";
+import type { DashboardAlert } from "@/src/types/dashboard";
+
+function fmtRelative(iso: string): string {
+  const diffMs = Date.now() - new Date(iso).getTime();
+  const mins = Math.floor(diffMs / 60000);
+  if (mins < 1) return "الآن";
+  if (mins < 60) return `منذ ${mins} د`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `منذ ${hours} س`;
+  return `منذ ${Math.floor(hours / 24)} يوم`;
+}
+
+function AlertListItem({ alert }: { alert: DashboardAlert }) {
+  const entityCfg = ENTITY_KPI_CONFIG.find((e) => e.key === alert.entity);
+  const isCritical = alert.severity === "critical";
+
+  return (
+    <Link
+      href={entityCfg?.href ?? "/dashboard"}
+      style={{
+        display: "flex", alignItems: "center", gap: 12,
+        borderRadius: "var(--radius-lg)",
+        border: "1px solid var(--color-border-dark)",
+        background: "var(--color-surface-dark-raised)",
+        padding: "0.75rem 1rem",
+        textDecoration: "none",
+      }}
+    >
+      <span
+        style={{
+          width: 8, height: 8, borderRadius: "50%", flexShrink: 0,
+          background: isCritical ? "#F87171" : "#FBBF24",
+          boxShadow: isCritical ? "0 0 0 4px rgba(248,113,113,0.15)" : "0 0 0 4px rgba(251,191,36,0.15)",
+        }}
+      />
+      <span style={{ flex: 1, fontSize: 13, color: "var(--color-text-dark-primary)", textAlign: "start" }}>
+        {alert.message}
+      </span>
+      {entityCfg && (
+        <span
+          style={{
+            fontSize: 10, fontWeight: 700, color: entityCfg.accent,
+            background: `${entityCfg.accent}1A`, border: `1px solid ${entityCfg.accent}40`,
+            borderRadius: "var(--radius-full)", padding: "0.15rem 0.55rem", whiteSpace: "nowrap",
+          }}
+        >
+          {entityCfg.label}
+        </span>
+      )}
+      <span style={{ fontSize: 11, color: "var(--color-text-dark-muted)", whiteSpace: "nowrap" }}>
+        {fmtRelative(alert.createdAt)}
+      </span>
+    </Link>
+  );
+}
+
+interface AlertsSectionProps {
+  alerts: DashboardAlert[];
+  loading: boolean;
+}
+
+export function AlertsSection({ alerts, loading }: AlertsSectionProps) {
+  return (
+    <article style={{ borderRadius: "var(--radius-2xl)", border: "1px solid var(--color-border-dark)", background: "var(--color-surface-dark-card)", padding: "1.5rem", boxShadow: "var(--shadow-card)" }}>
+      <div className="flex items-center justify-between">
+        <div>
+          <p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "#FCA5A5", textAlign: "start" }}>
+            تنبيهات عاجلة
+          </p>
+          <h2 style={{ fontSize: "1.1rem", fontWeight: 600, color: "var(--color-text-dark-primary)", marginTop: "0.5rem", textAlign: "start" }}>
+            يحتاج انتباهك
+          </h2>
+        </div>
+        {loading && <Spinner size="sm" className="text-cyan-400" />}
+      </div>
+
+      <div style={{ marginTop: "1.25rem", display: "flex", flexDirection: "column", gap: "0.625rem" }}>
+        {!loading && alerts.length === 0 && <EmptyState icon="✅" title="لا توجد تنبيهات حالياً" />}
+        {alerts.map((alert) => (
+          <AlertListItem key={alert.id} alert={alert} />
+        ))}
+      </div>
+    </article>
+  );
+}

src/Components/Dashboard/KpiSection.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import Link from "next/link";
+import { Spinner } from "@/src/Components/UI";
+import type { EntityKpi } from "@/src/types/dashboard";
+import { ENTITY_KPI_CONFIG, EMPTY_ENTITY_KPI } from "@/src/types/dashboard";
+
+function KpiAnomalyBadge({ anomaly }: { anomaly: EntityKpi["anomaly"] }) {
+  if (!anomaly) return null;
+  const isCritical = anomaly.severity === "critical";
+  return (
+    <div
+      style={{
+        marginTop: "0.75rem",
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        borderRadius: "var(--radius-lg)",
+        border: `1px solid ${isCritical ? "rgba(248,113,113,0.35)" : "rgba(251,191,36,0.35)"}`,
+        background: isCritical ? "rgba(248,113,113,0.08)" : "rgba(251,191,36,0.08)",
+        padding: "0.5rem 0.75rem",
+      }}
+    >
+      <span style={{ width: 6, height: 6, borderRadius: "50%", background: isCritical ? "#F87171" : "#FBBF24", flexShrink: 0 }} />
+      <span style={{ fontSize: 11, color: isCritical ? "#FCA5A5" : "#FDE68A", lineHeight: 1.5 }}>
+        {anomaly.message}
+      </span>
+    </div>
+  );
+}
+
+function KpiCardCounts({ total, active, pending }: { total: number; active: number; pending: number }) {
+  return (
+    <div style={{ marginTop: "0.875rem" }}>
+      <p style={{ fontSize: "2rem", fontWeight: 700, color: "var(--color-text-dark-primary)", fontFamily: "var(--font-mono)", margin: 0, textAlign: "start" }}>
+        {total.toLocaleString("ar-SA")}
+      </p>
+      <div style={{ marginTop: "0.625rem", display: "flex", gap: "0.75rem" }}>
+        <div style={{ flex: 1, borderRadius: "var(--radius-md)", background: "rgba(52,211,153,0.08)", border: "1px solid rgba(52,211,153,0.2)", padding: "0.375rem 0.625rem" }}>
+          <p style={{ fontSize: 10, color: "#6EE7B7", margin: 0 }}>نشط</p>
+          <p style={{ fontSize: 13, fontWeight: 700, color: "#A7F3D0", margin: 0, fontFamily: "var(--font-mono)" }}>
+            {active.toLocaleString("ar-SA")}
+          </p>
+        </div>
+        <div style={{ flex: 1, borderRadius: "var(--radius-md)", background: "rgba(251,191,36,0.08)", border: "1px solid rgba(251,191,36,0.2)", padding: "0.375rem 0.625rem" }}>
+          <p style={{ fontSize: 10, color: "#FCD34D", margin: 0 }}>معلَّق</p>
+          <p style={{ fontSize: 13, fontWeight: 700, color: "#FDE68A", margin: 0, fontFamily: "var(--font-mono)" }}>
+            {pending.toLocaleString("ar-SA")}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function KpiCard({ entity }: { entity: EntityKpi }) {
+  return (
+    <Link
+      href={entity.href}
+      style={{
+        display: "block",
+        borderRadius: "var(--radius-2xl)",
+        border: "1px solid var(--color-border-dark)",
+        background: "var(--color-surface-dark-card)",
+        padding: "1.25rem",
+        boxShadow: "var(--shadow-card)",
+        textDecoration: "none",
+        transition: "transform 150ms, box-shadow 150ms",
+      }}
+      className="hover:-translate-y-0.5 hover:shadow-[0_8px_24px_rgba(6,182,212,.12)]"
+    >
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div
+            style={{
+              width: 40, height: 40, borderRadius: "var(--radius-lg)",
+              background: `${entity.accent}1A`, border: `1px solid ${entity.accent}40`,
+              display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
+            }}
+          >
+            <i className={`ti ti-${entity.icon}`} style={{ fontSize: 18, color: entity.accent }} aria-hidden="true" />
+          </div>
+          <p style={{ fontSize: 13, fontWeight: 600, color: "var(--color-text-dark-primary)", margin: 0 }}>
+            {entity.label}
+          </p>
+        </div>
+        <i className="ti ti-chevron-left" style={{ fontSize: 14, color: "var(--color-text-dark-muted)" }} aria-hidden="true" />
+      </div>
+
+      <KpiCardCounts total={entity.total} active={entity.active} pending={entity.pending} />
+      <KpiAnomalyBadge anomaly={entity.anomaly} />
+    </Link>
+  );
+}
+
+interface KpiSectionProps {
+  entities: EntityKpi[];
+  loading: boolean;
+}
+
+export function KpiSection({ entities, loading }: KpiSectionProps) {
+  // Before the overview resolves, render the static config as zeroed cards
+  // so the grid never collapses to nothing.
+  const list = entities.length > 0 ? entities : ENTITY_KPI_CONFIG.map((cfg) => ({ ...cfg, ...EMPTY_ENTITY_KPI }));
+
+  return (
+    <div>
+      <div className="flex items-center justify-between" style={{ marginBottom: "0.75rem" }}>
+        <p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "#67E8F9", margin: 0 }}>
+          نظرة عامة
+        </p>
+        {loading && <Spinner size="sm" className="text-cyan-400" />}
+      </div>
+      <div className="grid gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))" }}>
+        {list.map((entity) => (
+          <KpiCard key={entity.key} entity={entity} />
+        ))}
+      </div>
+    </div>
+  );
+}

src/Components/Dashboard/QuickAccessFooter.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import Link from "next/link";
+import { ENTITY_KPI_CONFIG } from "@/src/types/dashboard";
+
+export function QuickAccessFooter() {
+  return (
+    <div
+      style={{
+        borderRadius: "var(--radius-2xl)",
+        border: "1px solid var(--color-border-dark)",
+        background: "var(--color-surface-dark-card)",
+        padding: "1rem 1.25rem",
+        boxShadow: "var(--shadow-card)",
+        display: "flex",
+        gap: "0.625rem",
+        overflowX: "auto",
+      }}
+    >
+      {ENTITY_KPI_CONFIG.map((entity) => (
+        <Link
+          key={entity.key}
+          href={entity.href}
+          style={{
+            display: "inline-flex", alignItems: "center", gap: 6, flexShrink: 0,
+            borderRadius: "var(--radius-full)",
+            border: "1px solid var(--color-border-dark)",
+            background: "var(--color-surface-dark-raised)",
+            padding: "0.45rem 0.875rem",
+            fontSize: 12, fontWeight: 600,
+            color: "var(--color-text-dark-primary)",
+            textDecoration: "none",
+            whiteSpace: "nowrap",
+          }}
+        >
+          <i className={`ti ti-${entity.icon}`} style={{ fontSize: 14, color: entity.accent }} aria-hidden="true" />
+          {entity.label}
+        </Link>
+      ))}
+    </div>
+  );
+}

src/Components/Dashboard/RecentActivityPanel.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import Link from "next/link";
+import { EmptyState, Spinner } from "@/src/Components/UI";
+import { ActionBadge } from "@/src/Components/audit/AuditTable";
+import type { AuditLog } from "@/src/types/audit";
+
+function fmtDateTime(iso: string): string {
+  return new Date(iso).toLocaleString("ar-SA", { dateStyle: "short", timeStyle: "short" });
+}
+
+function ActivityItem({ log }: { log: AuditLog }) {
+  return (
+    <div
+      style={{
+        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10,
+        borderRadius: "var(--radius-lg)",
+        border: "1px solid var(--color-border-dark)",
+        background: "var(--color-surface-dark-raised)",
+        padding: "0.75rem 1rem",
+      }}
+    >
+      <div className="flex items-center gap-3" style={{ minWidth: 0 }}>
+        <ActionBadge action={log.action} />
+        <p style={{ fontSize: 12, color: "var(--color-text-dark-primary)", margin: 0, textAlign: "start" }}>
+          {log.userName ?? log.userId ?? "نظام"}{log.module ? ` — ${log.module}` : ""}
+        </p>
+      </div>
+      <span style={{ fontSize: 11, color: "var(--color-text-dark-muted)", whiteSpace: "nowrap" }}>
+        {fmtDateTime(log.createdAt)}
+      </span>
+    </div>
+  );
+}
+
+interface RecentActivityPanelProps {
+  logs: AuditLog[];
+  loading: boolean;
+}
+
+export function RecentActivityPanel({ logs, loading }: RecentActivityPanelProps) {
+  return (
+    <article style={{ borderRadius: "var(--radius-2xl)", border: "1px solid var(--color-border-dark)", background: "var(--color-surface-dark-card)", padding: "1.5rem", boxShadow: "var(--shadow-card)" }}>
+      <div className="flex items-center justify-between">
+        <div>
+          <p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "#C4B5FD", textAlign: "start" }}>
+            سجل النشاط
+          </p>
+          <h2 style={{ fontSize: "1.1rem", fontWeight: 600, color: "var(--color-text-dark-primary)", marginTop: "0.5rem", textAlign: "start" }}>
+            آخر الأنشطة
+          </h2>
+        </div>
+        {loading && <Spinner size="sm" className="text-cyan-400" />}
+      </div>
+
+      <div style={{ marginTop: "1.25rem", display: "flex", flexDirection: "column", gap: "0.625rem" }}>
+        {!loading && logs.length === 0 && <EmptyState icon="🕘" title="لا يوجد نشاط حديث" />}
+        {logs.slice(0, 8).map((log) => (
+          <ActivityItem key={log.id} log={log} />
+        ))}
+      </div>
+
+      {logs.length > 0 && (
+        <Link href="/dashboard/audit" style={{ display: "inline-flex", alignItems: "center", gap: 6, marginTop: "1rem", fontSize: 12, fontWeight: 600, color: "#67E8F9", textDecoration: "none" }}>
+          عرض سجل التدقيق بالكامل
+          <i className="ti ti-arrow-left" style={{ fontSize: 12 }} aria-hidden="true" />
+        </Link>
+      )}
+    </article>
+  );
+}

src/Components/Dashboard/TrendChartsPanel.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { EmptyState, Spinner } from "@/src/Components/UI";
+import type { TrendSeries } from "@/src/types/dashboard";
+
+function MiniTrendChart({ series }: { series: TrendSeries }) {
+  const { points, deltaPercent, title } = series;
+  if (!points.length) return null;
+
+  const width = 300;
+  const height = 64;
+  const values = points.map((p) => p.value);
+  const max = Math.max(...values, 1);
+  const min = Math.min(...values, 0);
+  const range = max - min || 1;
+
+  const coords = points
+    .map((p, i) => {
+      const x = (i / (points.length - 1 || 1)) * width;
+      const y = height - ((p.value - min) / range) * height;
+      return `${x},${y}`;
+    })
+    .join(" ");
+
+  const isUp = deltaPercent >= 0;
+
+  return (
+    <div style={{ borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border-dark)", background: "var(--color-surface-dark-raised)", padding: "1rem" }}>
+      <div className="flex items-center justify-between">
+        <p style={{ fontSize: 12, color: "var(--color-text-dark-muted)", margin: 0 }}>{title}</p>
+        <span
+          style={{
+            fontSize: 11, fontWeight: 700,
+            color: isUp ? "#6EE7B7" : "#FCA5A5",
+            background: isUp ? "rgba(52,211,153,0.1)" : "rgba(248,113,113,0.1)",
+            border: `1px solid ${isUp ? "rgba(52,211,153,0.3)" : "rgba(248,113,113,0.3)"}`,
+            borderRadius: "var(--radius-full)",
+            padding: "0.1rem 0.5rem",
+          }}
+        >
+          {isUp ? "▲" : "▼"} {Math.abs(deltaPercent).toFixed(1)}%
+        </span>
+      </div>
+      <svg viewBox={`0 0 ${width} ${height}`} width="100%" height="96" preserveAspectRatio="none" style={{ marginTop: 8 }}>
+        <polyline points={coords} fill="none" stroke={isUp ? "#34D399" : "#F87171"} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    </div>
+  );
+}
+
+interface TrendChartsPanelProps {
+  series: TrendSeries[];
+  loading: boolean;
+}
+
+export function TrendChartsPanel({ series, loading }: TrendChartsPanelProps) {
+  return (
+    <article style={{ borderRadius: "var(--radius-2xl)", border: "1px solid var(--color-border-dark)", background: "var(--color-surface-dark-card)", padding: "1.5rem", boxShadow: "var(--shadow-card)" }}>
+      <div className="flex items-center justify-between">
+        <div>
+          <p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "#6EE7B7", textAlign: "start" }}>
+            الاتجاهات
+          </p>
+          <h2 style={{ fontSize: "1.1rem", fontWeight: 600, color: "var(--color-text-dark-primary)", marginTop: "0.5rem", textAlign: "start" }}>
+            أداء آخر ٧ أيام
+          </h2>
+        </div>
+        {loading && <Spinner size="sm" className="text-cyan-400" />}
+      </div>
+
+      <div style={{ marginTop: "1.25rem", display: "flex", flexDirection: "column", gap: "0.75rem" }}>
+        {!loading && series.length === 0 && (
+          <EmptyState icon="📈" title="لا توجد بيانات اتجاه بعد" description="سيتم عرض الرسوم البيانية عند توفر بيانات كافية." />
+        )}
+        {series.map((s) => (
+          <MiniTrendChart key={s.key} series={s} />
+        ))}
+      </div>
+    </article>
+  );
+}

src/Components/Dashboard/index.ts

@@ -0,0 +1,5 @@
+export { KpiSection } from "./KpiSection";
+export { AlertsSection } from "./AlertsSection";
+export { RecentActivityPanel } from "./RecentActivityPanel";
+export { TrendChartsPanel } from "./TrendChartsPanel";
+export { QuickAccessFooter } from "./QuickAccessFooter";

src/Components/Driver/DriverDeleteModal.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+
+import { useEffect } from "react";
+import { Spinner } from "../UI";
+import type { Driver } from "@/src/types/driver";
+
+interface DriverDeleteModalProps {
+  driver: Driver;
+  deleting: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+export function DriverDeleteModal({ driver, deleting, onCancel, onConfirm }: DriverDeleteModalProps) {
+  useEffect(() => {
+    const h = (e: KeyboardEvent) => { if (e.key === "Escape") onCancel(); };
+    window.addEventListener("keydown", h);
+    return () => window.removeEventListener("keydown", h);
+  }, [onCancel]);
+
+  return (
+    <div
+      role="alertdialog" aria-modal="true" aria-labelledby="driver-del-title"
+      onClick={e => { if (e.target === e.currentTarget) onCancel(); }}
+      style={{
+        position: "fixed", inset: 0, zIndex: 60,
+        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: 420,
+          background: "var(--color-surface)",
+          borderRadius: "var(--radius-xl)",
+          border: "1px solid #FECACA",
+          boxShadow: "0 20px 48px rgba(0,0,0,.18)",
+          padding: "2rem",
+          display: "flex", flexDirection: "column", gap: "1rem",
+          textAlign: "center",
+        }}
+      >
+        {/* Icon */}
+        <div style={{
+          width: 52, height: 52, margin: "0 auto", borderRadius: "50%",
+          background: "#FEF2F2", border: "1px solid #FECACA",
+          display: "flex", alignItems: "center", justifyContent: "center",
+        }}>
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#DC2626" strokeWidth="2">
+            <polyline points="3 6 5 6 21 6" />
+            <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+            <path d="M10 11v6M14 11v6" />
+            <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
+          </svg>
+        </div>
+
+        <div>
+          <h2 id="driver-del-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>
+            حذف السائق
+          </h2>
+          <p style={{ marginTop: 8, fontSize: 13, color: "var(--color-text-muted)", lineHeight: 1.6 }}>
+            هل أنت متأكد من حذف{" "}
+            <strong style={{ color: "var(--color-text-primary)" }}>{driver.name}</strong>
+            {" "}(
+            <span style={{ fontFamily: "var(--font-mono)", fontSize: 12 }}>
+              {driver.phone}
+            </span>
+            )؟ لا يمكن التراجع عن هذا الإجراء.
+          </p>
+        </div>
+
+        <div style={{ display: "flex", gap: "0.5rem" }}>
+          <button type="button" onClick={onCancel} disabled={deleting}
+            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: deleting ? "not-allowed" : "pointer", fontFamily: "var(--font-sans)",
+            }}>
+            إلغاء
+          </button>
+          <button type="button" onClick={onConfirm} disabled={deleting}
+            style={{
+              flex: 1, height: 40, borderRadius: "var(--radius-md)",
+              border: "none", background: "#DC2626",
+              fontSize: 13, fontWeight: 700, color: "#FFF",
+              cursor: deleting ? "not-allowed" : "pointer",
+              display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
+              fontFamily: "var(--font-sans)", opacity: deleting ? 0.7 : 1,
+            }}>
+            {deleting && <Spinner size="sm" className="text-white" />}
+            {deleting ? "جارٍ الحذف…" : "تأكيد الحذف"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/Components/Driver/DriverDetailPanel.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
-import { Spinner } from "../UI";
+import { Alert, Button, Spinner } from "../UI";
 import { driverService } from "@/src/services/driver.service";
 import { getStoredToken } from "@/src/lib/auth";
 import { DriverReportPanel } from "../Driver_Report/driverReport";
@@ -120,18 +120,7 @@ function PhotoCard({ url, label }: { url?: string | null; label: string }) {
             onError={() => setImgError(true)}
           />
         ) : (
-          <svg
-            width="28"
-            height="28"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="var(--color-text-hint)"
-            strokeWidth="1.5"
-          >
-            <rect x="3" y="3" width="18" height="18" rx="2" />
-            <circle cx="8.5" cy="8.5" r="1.5" />
-            <polyline points="21 15 16 10 5 21" />
-          </svg>
+          <i className="ti ti-photo" style={{ fontSize: 28, color: "var(--color-text-hint)" }} aria-hidden="true" />
         )}
       </div>
       {url && !imgError && (
@@ -306,18 +295,7 @@ export function DriverDetailPanel({
             </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} />}
 
           {driver && !loading && (
             <>
@@ -462,55 +440,18 @@ export function DriverDetailPanel({
               flexShrink: 0,
             }}
           >
-            <button
-              type="button"
-              onClick={() => onDelete(driver)}
-              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(driver)}>
               حذف
-            </button>
+            </Button>
 
-            <button
-              type="button"
-              onClick={() => onEdit(driver)}
-              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,
-              }}
-            >
-              <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 type="button" variant="secondary" onClick={() => onEdit(driver)}>
+              <i className="ti ti-edit" style={{ fontSize: 14 }} aria-hidden="true" />
               تعديل
-            </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>

src/Components/Driver/DriverFormModal.tsx

@@ -86,36 +86,26 @@ export function DriverFormModal({
 }: DriverFormModalProps) {
   const isNew = editDriver === null;
 
-  // ── Local branches (auto-fetched if prop is empty) ─────────────────────────
-  const [branches, setBranches] = useState<Branch[]>(branchesProp);
-  useEffect(() => {
-    if (branchesProp.length > 0) {
-      queueMicrotask(() => setBranches(branchesProp));
-      return;
-    }
-    const token = getStoredToken();
-    get<{ data: { data: Branch[] } }>("branches?limit=100", token)
-      .then((res) => {
-        const list = (res as unknown as { data: { data: Branch[] } }).data?.data ?? [];
-        setBranches(list);
-      })
-      .catch(() => {
-        /* silently ignore */
-      });
-  }, [branchesProp]);
-
   // ── react-hook-form ────────────────────────────────────────────────────────
+  // Moved above the branches-loading effect below: that effect calls
+  // setValue(), so useForm() (which defines it) must run first — otherwise
+  // setValue is referenced before its own initialization (TDZ ReferenceError),
+  // same issue already fixed in TripFormModal.
   const {
     register,
     handleSubmit,
     control,
     setError,
     setFocus,
+    setValue,
     formState: { errors, isSubmitting },
   } = useForm<DriverFormValues>({
-    // Cast the schema itself — the create/update schemas have structurally
-    // different required fields, so yup can't unify them into one type.
-    resolver: yupResolver((isNew ? createDriverSchema : updateDriverSchema) as any),
+    // Cast both the schema argument and the resolver's result — same fix
+    // already applied in TripFormModal: createDriverSchema/updateDriverSchema
+    // have structurally different required fields (union type yupResolver's
+    // single-schema signature won't accept), and yup's inferred type for
+    // .optional() fields is structurally incompatible with DriverFormValues.
+    resolver: yupResolver((isNew ? createDriverSchema : updateDriverSchema) as any) as any,
     defaultValues: {
       name: editDriver?.name ?? "",
       phone: editDriver?.phone ?? "",
@@ -142,6 +132,33 @@ export function DriverFormModal({
     },
   });
 
+  // ── Local branches (auto-fetched if prop is empty) ─────────────────────────
+  const [branches, setBranches] = useState<Branch[]>(branchesProp);
+  useEffect(() => {
+    // defaultValues.branchId was applied before this list existed, so the
+    // <select> had no matching <option> yet and silently fell back to "" —
+    // reapply the saved id now that the option actually exists in the DOM.
+    const savedBranchId = (editDriver as Driver & { branchId?: string })?.branchId;
+
+    if (branchesProp.length > 0) {
+      queueMicrotask(() => {
+        setBranches(branchesProp);
+        if (savedBranchId) setValue("branchId", savedBranchId);
+      });
+      return;
+    }
+    const token = getStoredToken();
+    get<{ data: { data: Branch[] } }>("branches?limit=100", token)
+      .then((res) => {
+        const list = (res as unknown as { data: { data: Branch[] } }).data?.data ?? [];
+        setBranches(list);
+        if (savedBranchId) setValue("branchId", savedBranchId);
+      })
+      .catch(() => {
+        /* silently ignore */
+      });
+  }, [branchesProp, editDriver, setValue]);
+
   const [apiError, setApiError] = useState("");
 
   // register("name") already attaches its own ref — focusing via setFocus

src/Components/Driver/DriverFormModalHelper.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+
+const inputBase: React.CSSProperties = {
+  width: "100%",
+  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)",
+  outline: "none",
+  fontFamily: "var(--font-sans)",
+};
+
+const labelStyle: React.CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 6,
+  fontSize: 12,
+  fontWeight: 600,
+  color: "var(--color-text-secondary)",
+};
+
+export function FileInput({
+  label,
+  current,
+  onChange,
+}: {
+  label: string;
+  current: File | null;
+  onChange: (f: File | null) => void;
+}) {
+  return (
+    <label style={labelStyle}>
+      {label}
+      <input
+        type="file"
+        accept="image/*"
+        onChange={(e) => onChange(e.target.files?.[0] ?? null)}
+        style={{
+          ...inputBase,
+          padding: "0.35rem 0.75rem",
+          height: "auto",
+          cursor: "pointer",
+        }}
+      />
+      {current && (
+        <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
+          {current.name}
+        </span>
+      )}
+    </label>
+  );
+}

src/Components/Driver/DriverPhotos.tsx

@@ -79,18 +79,7 @@ export function PhotoCard({
             />
           </>
         ) : (
-          <svg
-            width="32"
-            height="32"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="var(--color-text-hint)"
-            strokeWidth="1.5"
-          >
-            <rect x="3" y="3" width="18" height="18" rx="2" />
-            <circle cx="8.5" cy="8.5" r="1.5" />
-            <polyline points="21 15 16 10 5 21" />
-          </svg>
+          <i className="ti ti-photo" style={{ fontSize: 32, color: "var(--color-text-hint)" }} aria-hidden="true" />
         )}
       </div>
       {url && !imgError && (

src/Components/Driver/DriverTable.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+// src/Components/Driver/DriverTable.tsx
+// NEW — previously this table was written inline inside
+// app/dashboard/drivers/page.tsx (the only model whose table wasn't
+// already split into its own component). Extracted here using
+// ReusableTable + ActionButtons, matching every other *Table.tsx in the
+// project. Same columns, same warn-highlighting for expiring
+// license/national-ID dates, same row-click-to-view / edit+delete icons
+// behavior as the original inline version.
+//
+// Integration: in app/dashboard/drivers/page.tsx, replace the entire
+// `<div style={cardStyle}>...</div>` table block (and its `fmtDate` /
+// `expirySoon` / `cardStyle` / `thStyle` / `ROW_GRID_COLUMNS` /
+// `iconBtnBase` helpers, now unused) with:
+//
+//   <DriverTable
+//     drivers={drivers}
+//     loading={loading}
+//     search={search}
+//     page={page}
+//     pages={pages}
+//     onPageChange={setPage}
+//     onRowClick={(d) => setSelectedDriverId(d.id)}
+//     onEdit={handleEdit}
+//     onDelete={handleDelete}
+//   />
+
+import { ReusableTable, ActionButtons } from "../UI";
+import { DRIVER_STATUS_MAP } from "@/src/types/driver";
+import type { TableColumn } from "@/src/types/models";
+import type { Driver } from "@/src/types/driver";
+
+function fmtDate(iso?: string | null): string {
+  if (!iso) return "—";
+  return new Date(iso).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
+}
+
+function expirySoon(iso?: string | null): boolean {
+  if (!iso) return false;
+  return (new Date(iso).getTime() - Date.now()) / 86_400_000 <= 90;
+}
+
+interface DriverTableProps {
+  drivers: Driver[];
+  loading: boolean;
+  search: string;
+  page: number;
+  pages: number;
+  onPageChange: (p: number) => void;
+  onRowClick: (driver: Driver) => void;
+  onEdit: (driver: Driver) => void;
+  onDelete: (driver: Driver) => void;
+}
+
+export function DriverTable({
+  drivers, loading, search, page, pages,
+  onPageChange, onRowClick, onEdit, onDelete,
+}: DriverTableProps) {
+  const columns: TableColumn<Driver>[] = [
+    {
+      key: "name",
+      header: "السائقين",
+      width: "2fr",
+      render: (d) => (
+        <div>
+          <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>{d.name}</p>
+          <p style={{ marginTop: 2, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--color-text-muted)" }}>{d.phone}</p>
+        </div>
+      ),
+    },
+    { key: "branch", header: "الفرع", width: "1.2fr", render: (d) => d.branch?.name ?? "—" },
+    { key: "nationality", header: "الجنسية", width: "1fr", render: (d) => d.nationality ?? "—" },
+    {
+      key: "licenseExpiry",
+      header: "تاريخ انتهاء الرخصة",
+      width: "1.1fr",
+      render: (d) => {
+        const warn = expirySoon(d.licenseExpiry);
+        return (
+          <span style={{ fontSize: 12, fontWeight: warn ? 600 : 400, color: warn ? "#D97706" : "var(--color-text-secondary)" }}>
+            {warn && "⚠ "}{fmtDate(d.licenseExpiry)}
+          </span>
+        );
+      },
+    },
+    {
+      key: "nationalIdExpiry",
+      header: "تاريخ انتهاء الهوية الوطنية",
+      width: "1.1fr",
+      render: (d) => {
+        const idExpiry = (d as Driver & { nationalIdExpiry?: string }).nationalIdExpiry;
+        const warn = expirySoon(idExpiry);
+        return (
+          <span style={{ fontSize: 12, fontWeight: warn ? 600 : 400, color: warn ? "#D97706" : "var(--color-text-secondary)" }}>
+            {warn && "⚠ "}{fmtDate(idExpiry)}
+          </span>
+        );
+      },
+    },
+    {
+      key: "status",
+      header: "الحالة",
+      width: "1fr",
+      render: (d) => {
+        const s = DRIVER_STATUS_MAP[d.status] ?? DRIVER_STATUS_MAP.Inactive;
+        return (
+          <span style={{
+            display: "inline-flex", alignItems: "center", gap: 5,
+            borderRadius: "var(--radius-full)",
+            border: `1px solid ${s.border}`,
+            background: s.bg,
+            padding: "0.2rem 0.625rem",
+            fontSize: 11, fontWeight: 600, color: s.color,
+            width: "fit-content",
+          }}>
+            <span style={{ width: 6, height: 6, borderRadius: "50%", background: s.dot, flexShrink: 0 }} />
+            {s.label}
+          </span>
+        );
+      },
+    },
+  ];
+
+  return (
+    <ReusableTable
+      columns={columns}
+      data={drivers}
+      loading={loading}
+      search={search}
+      page={page}
+      pages={pages}
+      onPageChange={onPageChange}
+      actionsWidth="0.8fr"
+      onRowClick={onRowClick}
+      emptyDescription={search ? `No results for "${search}"` : undefined}
+      renderActions={(d) => (
+        <ActionButtons
+          itemLabel={d.name}
+          onEdit={() => onEdit(d)}
+          onDelete={() => onDelete(d)}
+        />
+      )}
+    />
+  );
+}

src/Components/Driver/archive/ArchivedDriverDetailModal.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { Spinner } from "../../UI";
+import { Button, Modal, Spinner, Toast } from "../../UI";
 import { PhotoCard } from "../DriverPhotos";
 import { getStoredToken } from "@/src/lib/auth";
 import { archivedDriverService } from "@/src/services/archive/archivedDriver.service";
@@ -11,6 +11,7 @@ import {
   NATIONAL_ID_TYPE_MAP,
 } from "@/src/types/driver";
 import type { ArchivedDriver, DriverStatusHistoryEntry } from "@/src/types/driver";
+import type { ToastNotification } from "@/src/Components/UI";
 
 interface ArchivedDriverDetailModalProps {
   driverId: string;
@@ -18,6 +19,7 @@ interface ArchivedDriverDetailModalProps {
 }
 
 // ── small helper components ───────────────────────────────────────────────────
+// (No shared-UI equivalents — purpose-built layouts, not generic controls.)
 
 /** Renders a single label/value row inside the detail body. */
 function DetailRow({ label, value }: { label: string; value?: string | null }) {
@@ -55,38 +57,29 @@ function Avatar({ name }: { name: string }) {
 
 /**
  * Modal showing the full profile of a single archived driver, including
- * documents/photos and status history. Fetches `getById` and
- * `getStatusHistory` in parallel on mount.
+ * documents/photos and status history. Fetches `getById` on mount — the
+ * archived detail response includes status history embedded.
  */
 export function ArchivedDriverDetailModal({ driverId, onClose }: ArchivedDriverDetailModalProps) {
   const [driver,  setDriver]  = useState<ArchivedDriver | null>(null);
   const [history, setHistory] = useState<DriverStatusHistoryEntry[]>([]);
   const [loading, setLoading] = useState(true);
-  const [error,   setError]   = useState<string | null>(null);
+  const [notification, setNotification] = useState<ToastNotification | null>(null);
 
-  // close on Escape
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
-    window.addEventListener("keydown", handler);
-    return () => window.removeEventListener("keydown", handler);
-  }, [onClose]);
-
-  // fetch archived driver details + status history on mount
+  // fetch archived driver details on mount — status history comes embedded
+  // in the same response, no separate call needed
   useEffect(() => {
     let cancelled = false;
     (async () => {
       try {
         const token = getStoredToken();
-      const [driverData, historyList] = await Promise.all([
-        archivedDriverService.getByIdUnwrapped(driverId, token),
-        archivedDriverService.getStatusHistoryUnwrapped(driverId, token),
-      ]);
+        const driverData = await archivedDriverService.getByIdUnwrapped(driverId, token);
         if (!cancelled) {
           setDriver(driverData);
-        setHistory(historyList ?? []);
+          setHistory(driverData.statusHistory ?? []);
         }
       } catch {
-      if (!cancelled) setError("تعذّر تحميل بيانات السائق المؤرشف. يرجى المحاولة لاحقاً.");
+        if (!cancelled) setNotification({ type: "error", message: "تعذّر تحميل بيانات السائق المؤرشف. يرجى المحاولة لاحقاً." });
       } finally {
         if (!cancelled) setLoading(false);
       }
@@ -102,60 +95,19 @@ export function ArchivedDriverDetailModal({ driverId, onClose }: ArchivedDriverD
 
   // ── render ────────────────────────────────────────────────────────────────
   return (
-    <div
-      role="dialog" aria-modal="true" aria-labelledby="archived-driver-detail-title"
-      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
-      style={{
-        position: "fixed", inset: 0, zIndex: 55,
-        background: "rgba(15,23,42,0.55)", backdropFilter: "blur(4px)",
-        display: "flex", alignItems: "center", justifyContent: "center", padding: "1rem",
-      }}
+    <Modal
+      open
+      title={driver?.name ?? "عرض السائق"}
+      subtitle="سائق مؤرشف"
+      onClose={onClose}
+      zIndex={60}
+      size="lg"
+      footer={
+        <Button type="button" variant="secondary" onClick={onClose}>
+          إغلاق
+        </Button>
+      }
     >
-      <div
-        onClick={e => e.stopPropagation()}
-        style={{
-          width: "100%", maxWidth: 560,
-          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-driver-detail-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
-              {driver?.name ?? "عرض السائق"}
-            </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: "75vh" }}>
-
       {/* loading */}
       {loading && (
         <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 10, padding: "3rem 0", color: "var(--color-text-muted)" }}>
@@ -165,17 +117,7 @@ export function ArchivedDriverDetailModal({ driverId, onClose }: ArchivedDriverD
       )}
 
       {/* error */}
-          {!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 && <Toast notification={notification} onDismiss={() => setNotification(null)} />}
 
       {/* content */}
       {!loading && driver && (
@@ -271,31 +213,6 @@ export function ArchivedDriverDetailModal({ driverId, onClose }: ArchivedDriverD
           )}
         </div>
       )}
-        </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>
+    </Modal>
   );
 }

src/Components/Driver/archive/ArchivedDriverTable.tsx

@@ -1,45 +1,12 @@
 "use client";
 
-import { Spinner } from "../../UI";
+
+
+import { ReusableTable, ActionButtons } from "../../UI";
 import { DRIVER_STATUS_MAP } from "@/src/types/driver";
+import type { TableColumn } from "@/src/types/models";
 import type { ArchivedDriver } from "@/src/types/driver";
 
-// ── status badge ─────────────────────────────────────────────────────────────
-function StatusBadge({ status }: { status: ArchivedDriver["status"] }) {
-  const cfg = DRIVER_STATUS_MAP[status] ?? DRIVER_STATUS_MAP.Inactive;
-  return (
-    <span style={{ display: "inline-flex", alignItems: "center", gap: 5, borderRadius: "var(--radius-full)", border: `1px solid ${cfg.border}`, background: cfg.bg, padding: "0.2rem 0.625rem", fontSize: 11, fontWeight: 600, color: cfg.color }}>
-      <span style={{ width: 6, height: 6, borderRadius: "50%", background: cfg.dot }} />
-      {cfg.label}
-    </span>
-  );
-}
-
-// ── 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>
-  );
-}
-
-// ── 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)",
-};
-
-const ROW_GRID_COLUMNS = "2fr 1.5fr 1fr 1fr 1fr 100px";
-
-// ── Props ────────────────────────────────────────────────────────────────────
 interface ArchivedDriverTableProps {
   drivers: ArchivedDriver[];
   loading: boolean;
@@ -50,92 +17,70 @@ interface ArchivedDriverTableProps {
   onPageChange: (p: number) => void;
 }
 
-/**
- * Renders the paginated table of archived drivers, including loading,
- * empty, and error-free states. Mirrors ArchivedUserTable for consistency.
- */
 export function ArchivedDriverTable({ drivers, loading, search, page, pages, onView, onPageChange }: ArchivedDriverTableProps) {
-  return (
-    <div style={cardStyle}>
-      {/* column headers */}
-      <div dir="rtl" style={{ display: "grid", gridTemplateColumns: ROW_GRID_COLUMNS, ...thStyle }}>
-        <span>الاسم</span>
-        <span>اسم المستخدم</span>
-        <span>الحالة</span>
-        <span style={{ textAlign: "center" }}>تاريخ الإنشاء</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>
-      ) : drivers.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 }}>
-          {drivers.map((d, i) => (
-            <li key={d.id} onClick={() => onView(d)} style={{
-              display: "grid", gridTemplateColumns: ROW_GRID_COLUMNS,
-              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, cursor: "pointer",
-            }}>
+  const columns: TableColumn<ArchivedDriver>[] = [
+    {
+      key: "name",
+      header: "الاسم",
+      width: "2fr",
+      render: (d) => (
         <div>
           <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>{d.name}</p>
           <p style={{ marginTop: 2, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--color-text-muted)" }}>{d.phone}</p>
         </div>
+      ),
+    },
+    {
+      key: "userName",
+      header: "اسم السائق",
+      width: "1.5fr",
+      render: (d) => (
         <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "#2563EB", fontWeight: 600 }}>{d.userName ?? "—"}</span>
-              <StatusBadge status={d.status} />
-              <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
-                {new Date(d.createdAt).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" })}
+      ),
+    },
+    {
+      key: "status",
+      header: "الحالة",
+      width: "1fr",
+      render: (d) => {
+        const s = DRIVER_STATUS_MAP[d.status] ?? DRIVER_STATUS_MAP.Inactive;
+        return (
+          <span style={{ display: "inline-flex", alignItems: "center", gap: 5, borderRadius: "var(--radius-full)", border: `1px solid ${s.border}`, background: s.bg, padding: "0.2rem 0.625rem", fontSize: 11, fontWeight: 600, color: s.color }}>
+            <span style={{ width: 6, height: 6, borderRadius: "50%", background: s.dot }} />
+            {s.label}
           </span>
-              <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
-                {new Date(d.updatedAt).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" })}
-              </span>
-              <div style={{ display: "flex", justifyContent: "center", gap: 4 }}>
-                {/* view only — delete/restore not implemented yet, same as users */}
-                <IconBtn title={`عرض ${d.name}`} color="#059669" bg="#ECFDF5" borderColor="#A7F3D0" onClick={() => onView(d)}>
-                  <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>
-      )}
+        );
+      },
+    },
+    {
+      key: "createdAt",
+      header: "تاريخ الانشاء",
+      width: "1fr",
+      align: "center",
+      render: (d) => new Date(d.createdAt).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" }),
+    },
+    {
+      key: "updatedAt",
+      header: "تاريخ التعديل",
+      width: "1fr",
+      align: "center",
+      render: (d) => new Date(d.updatedAt).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" }),
+    },
+  ];
 
-      {/* 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>
+  return (
+    <ReusableTable
+      columns={columns}
+      data={drivers}
+      loading={loading}
+      search={search}
+      page={page}
+      pages={pages}
+      onPageChange={onPageChange}
+      onRowClick={onView}
+      emptyIcon="🗄️"
+      emptyDescription={search ? `No results for "${search}"` : "No archived drivers."}
+      renderActions={(d) => <ActionButtons itemLabel={d.name} onView={() => onView(d)} />}
+    />
   );
 }

src/Components/Driver/archive/ArchivedDrivers.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Alert, Input, Modal } from "../../UI";
+import { Input, Modal, Toast } from "../../UI";
 import { ArchivedDriverTable } from "./ArchivedDriverTable";
 import { ArchivedDriverDetailModal } from "./ArchivedDriverDetailModal";
 import { useArchivedDrivers } from "@/src/hooks/archive/useArchivedDrivers";
@@ -11,18 +11,7 @@ interface ArchivedDriversProps {
 }
 
 const searchIcon = (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    aria-hidden="true"
-  >
-    <circle cx="11" cy="11" r="8" />
-    <path d="m21 21-4.35-4.35" />
-  </svg>
+  <i className="ti ti-search" style={{ fontSize: 16 }} aria-hidden="true" />
 );
 
 /**
@@ -34,9 +23,9 @@ export function ArchivedDrivers({ onClose }: ArchivedDriversProps) {
   const [viewDriverId, setViewDriverId] = useState<string | null>(null);
 
   const {
-    drivers, loading, total, pages, error,
+    drivers, loading, total, pages, notification,
     page, search,
-    setPage, handleSearch, clearError,
+    setPage, handleSearch, clearNotification,
   } = useArchivedDrivers();
 
   return (
@@ -65,7 +54,7 @@ export function ArchivedDrivers({ onClose }: ArchivedDriversProps) {
             />
           </div>
 
-          {error && <Alert type="error" message={error} onClose={clearError} />}
+          <Toast notification={notification} onDismiss={clearNotification} />
 
           <ArchivedDriverTable
             drivers={drivers}

src/Components/Order/OrderDeleteModal.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { useEffect } from "react";
+import { Spinner } from "../UI";
+import type { Order } from "@/src/types/order";
+
+interface OrderDeleteModalProps {
+  order: Order;
+  deleting: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+/**
+ * Mirrors DriverDeleteModal.tsx 1:1 — same alertdialog role, same
+ * backdrop/click-outside-to-close behavior, same Escape-to-close effect,
+ * same button layout. Only the copy and the identifying fields differ.
+ */
+export function OrderDeleteModal({ order, deleting, onCancel, onConfirm }: OrderDeleteModalProps) {
+  useEffect(() => {
+    const h = (e: KeyboardEvent) => { if (e.key === "Escape") onCancel(); };
+    window.addEventListener("keydown", h);
+    return () => window.removeEventListener("keydown", h);
+  }, [onCancel]);
+
+  return (
+    <div
+      role="alertdialog" aria-modal="true" aria-labelledby="order-del-title"
+      onClick={e => { if (e.target === e.currentTarget) onCancel(); }}
+      style={{
+        position: "fixed", inset: 0, zIndex: 60,
+        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: 420,
+          background: "var(--color-surface)",
+          borderRadius: "var(--radius-xl)",
+          border: "1px solid #FECACA",
+          boxShadow: "0 20px 48px rgba(0,0,0,.18)",
+          padding: "2rem",
+          display: "flex", flexDirection: "column", gap: "1rem",
+          textAlign: "center",
+        }}
+      >
+        {/* Icon */}
+        <div style={{
+          width: 52, height: 52, margin: "0 auto", borderRadius: "50%",
+          background: "#FEF2F2", border: "1px solid #FECACA",
+          display: "flex", alignItems: "center", justifyContent: "center",
+        }}>
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#DC2626" strokeWidth="2">
+            <polyline points="3 6 5 6 21 6" />
+            <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+            <path d="M10 11v6M14 11v6" />
+            <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
+          </svg>
+        </div>
+
+        <div>
+          <h2 id="order-del-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>
+            حذف الطلب
+          </h2>
+          <p style={{ marginTop: 8, fontSize: 13, color: "var(--color-text-muted)", lineHeight: 1.6 }}>
+            هل أنت متأكد من حذف الطلب{" "}
+            <strong style={{ color: "var(--color-text-primary)" }}>{order.shipmentNumber}</strong>
+            {" "}الخاص بـ{" "}
+            <span style={{ fontFamily: "var(--font-mono)", fontSize: 12 }}>
+              {order.recipientName}
+            </span>
+            ؟ لا يمكن التراجع عن هذا الإجراء.
+          </p>
+        </div>
+
+        <div style={{ display: "flex", gap: "0.5rem" }}>
+          <button type="button" onClick={onCancel} disabled={deleting}
+            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: deleting ? "not-allowed" : "pointer", fontFamily: "var(--font-sans)",
+            }}>
+            إلغاء
+          </button>
+          <button type="button" onClick={onConfirm} disabled={deleting}
+            style={{
+              flex: 1, height: 40, borderRadius: "var(--radius-md)",
+              border: "none", background: "#DC2626",
+              fontSize: 13, fontWeight: 700, color: "#FFF",
+              cursor: deleting ? "not-allowed" : "pointer",
+              display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
+              fontFamily: "var(--font-sans)", opacity: deleting ? 0.7 : 1,
+            }}>
+            {deleting && <Spinner size="sm" className="text-white" />}
+            {deleting ? "جارٍ الحذف…" : "تأكيد الحذف"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/Components/Order/OrderDetailModel.tsx

@@ -0,0 +1,474 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { Alert, Button, Input, Select, Spinner } from "../UI";
+import { orderService } from "@/src/services/order.service";
+import type { Order, OrderStatus, UpdateOrderStatusPayload } from "@/src/types/order";
+
+const ORDER_STATUS_MAP: Record<OrderStatus, { label: string; color: string; bg: string; border: string; dot: string }> = {
+  Created:   { label: "تم الإنشاء",  color: "#1E40AF", bg: "#EFF6FF", border: "#BFDBFE", dot: "#3B82F6" },
+  Assigned:  { label: "مُعيَّن",      color: "#5B21B6", bg: "#F5F3FF", border: "#DDD6FE", dot: "#8B5CF6" },
+  InTransit: { label: "قيد التوصيل", color: "#854D0E", bg: "#FFFBEB", border: "#FDE68A", dot: "#D97706" },
+  Delivered: { label: "تم التسليم",  color: "#166534", bg: "#DCFCE7", border: "#BBF7D0", dot: "#16A34A" },
+  Returned:  { label: "مُرتجع",      color: "#991B1B", bg: "#FEF2F2", border: "#FECACA", dot: "#DC2626" },
+  Cancelled: { label: "ملغي",        color: "#64748B", bg: "#F1F5F9", border: "#E2E8F0", dot: "#94A3B8" },
+};
+
+const PAY_STATUS_MAP: Record<string, { label: string; color: string }> = {
+  Pending:  { label: "معلَّق",   color: "#D97706" },
+  Paid:     { label: "مدفوع",   color: "#16A34A" },
+  Failed:   { label: "فشل",     color: "#DC2626" },
+  Refunded: { label: "مُسترجع", color: "#64748B" },
+};
+
+const PAY_METHOD_LABEL: Record<string, string> = {
+  Cash: "نقداً",
+  Card: "بطاقة",
+  Prepaid: "مدفوع مسبقاً",
+};
+
+function fmtDate(iso?: string | null): string {
+  if (!iso) return "—";
+  return new Date(iso).toLocaleDateString("ar-SA", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+}
+
+function fmtAmount(n?: number | string | null): string {
+  if (n == null || n === "") return "—";
+  const num = Number(n);
+  if (isNaN(num)) return "—";
+  return `${num.toFixed(2)} ر.س`;
+}
+
+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.55rem 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,
+          maxWidth: "60%",
+          textAlign: "left",
+          wordBreak: "break-word",
+        }}
+      >
+        {warn && value !== "—" ? "⚠ " : ""}
+        {value}
+      </span>
+    </div>
+  );
+}
+
+function SectionHeading({ title }: { title: string }) {
+  return (
+    <p
+      style={{
+        fontSize: 11,
+        letterSpacing: "0.25em",
+        textTransform: "uppercase",
+        color: "var(--color-text-hint)",
+        fontWeight: 700,
+        margin: "1.25rem 0 0.5rem",
+      }}
+    >
+      {title}
+    </p>
+  );
+}
+
+interface OrderDetailPanelProps {
+  orderId: string;
+  onClose: () => void;
+  onEdit: (order: Order) => void;
+  onDelete: (order: Order) => void;
+  onStatusChanged?: (order: Order) => void;
+}
+
+export function OrderDetailPanel({
+  orderId,
+  onClose,
+  onEdit,
+  onDelete,
+  onStatusChanged,
+}: OrderDetailPanelProps) {
+  const [order, setOrder] = useState<Order | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const [statusDraft, setStatusDraft] = useState<OrderStatus | "">("");
+  const [statusReason, setStatusReason] = useState("");
+  const [updatingStatus, setUpdatingStatus] = useState(false);
+  const [statusError, setStatusError] = useState<string | null>(null);
+
+  const loadOrder = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await orderService.getById(orderId);
+      setOrder(data);
+      setStatusDraft(data.currentStatus);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "تعذّر تحميل بيانات الطلب.");
+    } finally {
+      setLoading(false);
+    }
+  }, [orderId]);
+
+  useEffect(() => { queueMicrotask(loadOrder); }, [loadOrder]);
+
+  useEffect(() => {
+    const h = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
+    window.addEventListener("keydown", h);
+    return () => window.removeEventListener("keydown", h);
+  }, [onClose]);
+
+  const handleStatusUpdate = useCallback(async () => {
+    if (!order || !statusDraft || statusDraft === order.currentStatus) return;
+    setUpdatingStatus(true);
+    setStatusError(null);
+    try {
+      const payload: UpdateOrderStatusPayload = { status: statusDraft };
+      if (statusReason) payload.reason = statusReason;
+      const updated = await orderService.updateStatus(order.id, payload);
+      setOrder(updated);
+      setStatusReason("");
+      onStatusChanged?.(updated);
+    } catch (err: unknown) {
+      setStatusError(err instanceof Error ? err.message : "تعذّر تحديث حالة الطلب.");
+    } finally {
+      setUpdatingStatus(false);
+    }
+  }, [order, statusDraft, statusReason, onStatusChanged]);
+
+  const statusConfig = order ? ORDER_STATUS_MAP[order.currentStatus] : null;
+  const payStatus = order?.paymentStatus ? PAY_STATUS_MAP[order.paymentStatus] : null;
+
+  return (
+    <>
+      <div
+        onClick={onClose}
+        style={{
+          position: "fixed",
+          inset: 0,
+          zIndex: 40,
+          background: "rgba(15,23,42,0.45)",
+          backdropFilter: "blur(2px)",
+        }}
+      />
+
+      <aside
+        aria-label="تفاصيل الطلب"
+        style={{
+          position: "fixed",
+          top: 0,
+          left: 0,
+          bottom: 0,
+          zIndex: 50,
+          width: "min(520px, 100vw)",
+          background: "var(--color-surface)",
+          borderRight: "1px solid var(--color-border)",
+          display: "flex",
+          flexDirection: "column",
+          boxShadow: "8px 0 40px rgba(0,0,0,.18)",
+          overflowY: "hidden",
+        }}
+      >
+        <div
+          style={{
+            padding: "1.25rem 1.5rem",
+            borderBottom: "1px solid var(--color-border)",
+            background: "var(--color-surface-muted)",
+            flexShrink: 0,
+          }}
+        >
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12 }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+              <div
+                style={{
+                  width: 56,
+                  height: 56,
+                  borderRadius: "50%",
+                  flexShrink: 0,
+                  border: "2px solid var(--color-brand-200)",
+                  background: "var(--color-surface-muted)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <i className="ti ti-package" style={{ fontSize: 24, color: "var(--color-brand-600)" }} aria-hidden="true" />
+              </div>
+
+              <div>
+                <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600, margin: 0 }}>
+                  ملف الطلب
+                </p>
+                {order && (
+                  <h2 style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "3px 0 0", fontFamily: "var(--font-mono)" }}>
+                    {order.shipmentNumber}
+                  </h2>
+                )}
+                {order?.trip?.tripNumber && (
+                  <p style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--color-text-muted)", margin: "2px 0 0" }}>
+                    رحلة: {order.trip.tripNumber}
+                  </p>
+                )}
+              </div>
+            </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",
+                flexShrink: 0,
+              }}
+            >
+              ×
+            </button>
+          </div>
+        </div>
+
+        <div style={{ flex: 1, overflowY: "auto", padding: "1.25rem 1.5rem" }}>
+          {loading && (
+            <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "2rem 0" }}>
+              <Spinner size="sm" className="text-blue-600" />
+              <span style={{ fontSize: 13, color: "var(--color-text-muted)" }}>جارٍ التحميل…</span>
+            </div>
+          )}
+
+          {error && <Alert type="error" message={error} />}
+
+          {order && !loading && (
+            <>
+              <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: "1rem" }}>
+                {statusConfig && (
+                  <span style={{
+                    borderRadius: "var(--radius-full)",
+                    border: `1px solid ${statusConfig.border}`,
+                    background: statusConfig.bg,
+                    padding: "0.3rem 0.875rem",
+                    fontSize: 12,
+                    fontWeight: 700,
+                    color: statusConfig.color,
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 6,
+                  }}>
+                    <span style={{ width: 7, height: 7, borderRadius: "50%", background: statusConfig.dot }} />
+                    {statusConfig.label}
+                  </span>
+                )}
+                {payStatus && (
+                  <span style={{
+                    borderRadius: "var(--radius-full)",
+                    border: "1px solid var(--color-border)",
+                    background: "var(--color-surface-muted)",
+                    padding: "0.3rem 0.875rem",
+                    fontSize: 12,
+                    fontWeight: 700,
+                    color: payStatus.color,
+                  }}>
+                    {payStatus.label}
+                  </span>
+                )}
+              </div>
+
+              <SectionHeading title="بيانات المستلم" />
+              <DetailRow label="اسم المستلم" value={order.recipientName} />
+              <DetailRow label="رقم الجوال"  value={order.recipientPhone} mono />
+              <DetailRow label="العميل"      value={order.client?.name ?? "—"} />
+
+              <SectionHeading title="بيانات الشحنة" />
+              <DetailRow label="رقم الشحنة" value={order.shipmentNumber} mono />
+              <DetailRow label="نوع الشحنة" value={order.type ?? "—"} />
+              <DetailRow label="الكمية"      value={String(order.quantity ?? "—")} />
+              <DetailRow label="الوزن"       value={order.weight != null ? `${order.weight} كجم` : "—"} />
+              <DetailRow label="الرحلة"      value={order.trip?.tripNumber ?? "—"} mono />
+
+              <SectionHeading title="بيانات الدفع" />
+              <DetailRow label="طريقة الدفع" value={order.paymentMethod ? PAY_METHOD_LABEL[order.paymentMethod] ?? order.paymentMethod : "—"} />
+              <DetailRow label="حالة الدفع"   value={payStatus?.label ?? "—"} />
+              <DetailRow label="الإجمالي الفرعي" value={fmtAmount(order.subTotal)} mono />
+              <DetailRow label="ضريبة القيمة المضافة" value={fmtAmount(order.vatAmount)} mono />
+              <DetailRow label="الإجمالي" value={fmtAmount(order.totalPrice)} mono />
+
+              {order.deliveryAddress?.details && Object.values(order.deliveryAddress.details).some(Boolean) && (
+                <>
+                  <SectionHeading title="عنوان التسليم" />
+                  {order.deliveryAddress.details.city      && <DetailRow label="المدينة"       value={order.deliveryAddress.details.city} />}
+                  {order.deliveryAddress.details.district  && <DetailRow label="الحي"          value={order.deliveryAddress.details.district} />}
+                  {order.deliveryAddress.details.street    && <DetailRow label="الشارع"        value={order.deliveryAddress.details.street} />}
+                  {order.deliveryAddress.details.buildingNo && <DetailRow label="رقم المبنى"   value={order.deliveryAddress.details.buildingNo} mono />}
+                  {order.deliveryAddress.details.unitNo    && <DetailRow label="رقم الوحدة"   value={order.deliveryAddress.details.unitNo} mono />}
+                  {order.deliveryAddress.details.zipCode   && <DetailRow label="الرمز البريدي" value={order.deliveryAddress.details.zipCode} mono />}
+                </>
+              )}
+              {!order.deliveryAddress?.details && order.deliveryAddressId && (
+                <>
+                  <SectionHeading title="عنوان التسليم" />
+                  <DetailRow label="معرّف العنوان" value={order.deliveryAddressId} mono />
+                </>
+              )}
+
+              {order.pickupAddress?.details && Object.values(order.pickupAddress.details).some(Boolean) && (
+                <>
+                  <SectionHeading title="عنوان الاستلام" />
+                  {order.pickupAddress.details.city       && <DetailRow label="المدينة"       value={order.pickupAddress.details.city} />}
+                  {order.pickupAddress.details.district   && <DetailRow label="الحي"          value={order.pickupAddress.details.district} />}
+                  {order.pickupAddress.details.street     && <DetailRow label="الشارع"        value={order.pickupAddress.details.street} />}
+                  {order.pickupAddress.details.buildingNo && <DetailRow label="رقم المبنى"   value={order.pickupAddress.details.buildingNo} mono />}
+                  {order.pickupAddress.details.unitNo     && <DetailRow label="رقم الوحدة"   value={order.pickupAddress.details.unitNo} mono />}
+                  {order.pickupAddress.details.zipCode    && <DetailRow label="الرمز البريدي" value={order.pickupAddress.details.zipCode} mono />}
+                </>
+              )}
+              {!order.pickupAddress?.details && order.pickupAddressId && (
+                <>
+                  <SectionHeading title="عنوان الاستلام" />
+                  <DetailRow label="معرّف العنوان" value={order.pickupAddressId} mono />
+                </>
+              )}
+
+              <SectionHeading title="معلومات النظام" />              <DetailRow label="تاريخ الإنشاء" value={fmtDate(order.createdAt)} />
+              <DetailRow label="آخر تحديث"     value={fmtDate(order.updatedAt)} />
+
+              <SectionHeading title="تحديث الحالة" />
+              {statusError && (
+                <Alert type="error" message={statusError} onClose={() => setStatusError(null)} />
+              )}
+              <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 8 }}>
+                <Select
+                  value={statusDraft}
+                  onChange={(e) => setStatusDraft(e.target.value as OrderStatus)}
+                  dir="rtl"
+                >
+                  {Object.entries(ORDER_STATUS_MAP).map(([k, v]) => (
+                    <option key={k} value={k}>{v.label}</option>
+                  ))}
+                </Select>
+                <Input
+                  label="سبب التغيير"
+                  type="text"
+                  value={statusReason}
+                  onChange={(e) => setStatusReason(e.target.value)}
+                  placeholder="سبب التغيير (اختياري)"
+                  dir="rtl"
+                />
+                <Button
+                  type="button"
+                  onClick={handleStatusUpdate}
+                  disabled={!statusDraft || statusDraft === order.currentStatus}
+                  loading={updatingStatus}
+                >
+                  {updatingStatus ? "جارٍ التحديث…" : "تحديث الحالة"}
+                </Button>
+              </div>
+
+              {order.statusHistory && order.statusHistory.length > 0 && (
+                <>
+                  <SectionHeading title="سجل الحالات" />
+                  <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+                    {order.statusHistory.slice(0, 5).map((h) => {
+                      const s = ORDER_STATUS_MAP[h.status] ?? ORDER_STATUS_MAP.Created;
+                      return (
+                        <div
+                          key={h.id}
+                          style={{
+                            display: "flex",
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                            borderRadius: "var(--radius-md)",
+                            border: `1px solid ${s.border}`,
+                            background: s.bg,
+                            padding: "0.5rem 0.875rem",
+                          }}
+                        >
+                          <div>
+                            <span style={{ fontSize: 12, fontWeight: 600, color: s.color }}>{s.label}</span>
+                            {h.reason && (
+                              <span style={{ fontSize: 11, color: "var(--color-text-muted)", marginRight: 8 }}>
+                                — {h.reason}
+                              </span>
+                            )}
+                          </div>
+                          <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
+                            {fmtDate(h.createdAt)}
+                          </span>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </>
+              )}
+            </>
+          )}
+        </div>
+
+        {order && (
+          <div
+            style={{
+              padding: "1rem 1.5rem",
+              borderTop: "1px solid var(--color-border)",
+              background: "var(--color-surface-muted)",
+              display: "flex",
+              gap: "0.75rem",
+              flexShrink: 0,
+            }}
+          >
+            <Button type="button" variant="danger" onClick={() => onDelete(order)}>
+              حذف
+            </Button>
+
+            <Button type="button" variant="secondary" onClick={() => onEdit(order)}>
+              <i className="ti ti-edit" style={{ fontSize: 14 }} aria-hidden="true" />
+              تعديل
+            </Button>
+
+            <Button type="button" variant="secondary" fullWidth onClick={onClose}>
+              إغلاق
+            </Button>
+          </div>
+        )}
+      </aside>
+    </>
+  );
+}
+
+export { ORDER_STATUS_MAP, PAY_STATUS_MAP, PAY_METHOD_LABEL };

src/Components/Order/OrderFormModal.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react";
 import Link from "next/link";
-import { useForm } from "react-hook-form";
+import { useForm, type Resolver } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Alert, Button, Input, Modal, Select } from "../UI";
 import { getStoredToken } from "@/src/lib/auth";
@@ -115,9 +115,20 @@ export function OrderFormModal({
     setFocus,
     formState: { errors, isSubmitting },
   } = useForm<OrderFormValues>({
-    // Cast the schema itself — create/update schemas differ structurally in
-    // which fields are required, so yup can't unify them into one type.
-    resolver: yupResolver<OrderFormValues>((isNew ? createOrderSchema : updateOrderSchema) as any),
+    // create/update schemas differ structurally in which fields are
+    // required (e.g. tripId), so yup can't unify them into one type on
+    // its own — the ternary alone won't typecheck as a single schema
+    // argument. We cast in two places for two separate reasons:
+    //   1. `(...) as any` on the schema — lets the ternary's two
+    //      differently-shaped ObjectSchemas pass as a single argument.
+    //   2. `as unknown as Resolver<OrderFormValues>` on the whole call —
+    //      stops TS from inferring the Resolver's generics from the
+    //      schema's own (slightly different) inferred shape, which is
+    //      what caused the earlier "quantity optional vs required"
+    //      mismatch.
+    resolver: yupResolver(
+      (isNew ? createOrderSchema : updateOrderSchema) as any,
+    ) as unknown as Resolver<OrderFormValues>,
     defaultValues: {
       shipmentNumber: editOrder?.shipmentNumber ?? "",
       recipientName: editOrder?.recipientName ?? "",
@@ -200,14 +211,6 @@ export function OrderFormModal({
     };
   }, []);
 
-  useEffect(() => {
-    const h = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", h);
-    return () => window.removeEventListener("keydown", h);
-  }, [onClose]);
-
   const numberField = (
     field:
       | "quantity"
@@ -369,10 +372,7 @@ export function OrderFormModal({
               ))}
             </Select>
             <Link href="/dashboard/clients" style={createLinkStyle} tabIndex={-1}>
-              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                <line x1="12" y1="5" x2="12" y2="19" />
-                <line x1="5" y1="12" x2="19" y2="12" />
-              </svg>
+              <i className="ti ti-plus" style={{ fontSize: 11 }} aria-hidden="true" />
               إنشاء عميل جديد
             </Link>
           </div>
@@ -415,10 +415,7 @@ export function OrderFormModal({
               ))}
             </Select>
             <Link href="/dashboard/trips" style={createLinkStyle} tabIndex={-1}>
-              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                <line x1="12" y1="5" x2="12" y2="19" />
-                <line x1="5" y1="12" x2="19" y2="12" />
-              </svg>
+              <i className="ti ti-plus" style={{ fontSize: 11 }} aria-hidden="true" />
               إنشاء رحلة جديدة
             </Link>
           </div>

src/Components/Order/OrderTable.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { ReusableTable, ActionButtons } from "../UI";
+import { ORDER_STATUS_MAP } from "./OrderDetailModel";
+import type { TableColumn } from "@/src/types/models";
+import type { Order } from "@/src/types/order";
+
+function fmtDate(iso?: string | null): string {
+  if (!iso) return "—";
+  return new Date(iso).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
+}
+
+function fmtAmount(n?: number | null): string {
+  if (n == null) return "—";
+  return `${n.toFixed(2)} SAR`;
+}
+
+interface OrderTableProps {
+  orders: Order[];
+  loading: boolean;
+  search: string;
+  page: number;
+  pages: number;
+  setPage: React.Dispatch<React.SetStateAction<number>>;
+  onRowClick: (orderId: string) => void;
+  onEdit: (order: Order) => void;
+  onDelete: (order: Order) => void;
+}
+
+export function OrderTable({
+  orders, loading, search, page, pages,
+  setPage, onRowClick, onEdit, onDelete,
+}: OrderTableProps) {
+  const columns: TableColumn<Order>[] = [
+    {
+      key: "shipmentNumber",
+      header: "رقم الشحنة #",
+      width: "1.6fr",
+      render: (o) => (
+        <div>
+          <p style={{ fontWeight: 600, fontFamily: "var(--font-mono)", color: "#2563EB", margin: 0 }}>{o.shipmentNumber}</p>
+          <p style={{ marginTop: 2, fontSize: 11, color: "var(--color-text-muted)" }}>{fmtDate(o.createdAt)}</p>
+        </div>
+      ),
+    },
+    {
+      key: "recipient",
+      header: "المستلم",
+      width: "1.6fr",
+      render: (o) => (
+        <div>
+          <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>{o.recipientName}</p>
+          <p style={{ marginTop: 2, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--color-text-muted)" }}>{o.recipientPhone}</p>
+        </div>
+      ),
+    },
+    { key: "client", header: "العميل", width: "1.2fr", render: (o) => o.client?.name ?? "—" },
+    {
+      key: "amount",
+      header: "الكمية",
+      width: "1.1fr",
+      render: (o) => (
+        <span style={{ fontWeight: 600, color: "var(--color-text-primary)", fontFamily: "var(--font-mono)" }}>
+          {fmtAmount(o.totalPrice)}
+        </span>
+      ),
+    },
+    {
+      key: "status",
+      header: "الحالة",
+      width: "1fr",
+      render: (o) => {
+        const s = ORDER_STATUS_MAP[o.currentStatus] ?? ORDER_STATUS_MAP.Created;
+        return (
+          <span style={{
+            display: "inline-flex", alignItems: "center", gap: 5,
+            borderRadius: "var(--radius-full)",
+            border: `1px solid ${s.border}`,
+            background: s.bg,
+            padding: "0.2rem 0.625rem",
+            fontSize: 11, fontWeight: 600, color: s.color,
+            width: "fit-content",
+          }}>
+            <span style={{ width: 6, height: 6, borderRadius: "50%", background: s.dot, flexShrink: 0 }} />
+            {s.label}
+          </span>
+        );
+      },
+    },
+  ];
+
+  return (
+    <ReusableTable
+      columns={columns}
+      data={orders}
+      loading={loading}
+      search={search}
+      page={page}
+      pages={pages}
+      onPageChange={setPage}
+      actionsWidth="0.8fr"
+      onRowClick={(o) => onRowClick(o.id)}
+      emptyDescription={search ? `No results for "${search}"` : undefined}
+      renderActions={(o) => (
+        <ActionButtons
+          itemLabel={o.shipmentNumber}
+          onEdit={() => onEdit(o)}
+          onDelete={() => onDelete(o)}
+        />
+      )}
+    />
+  );
+}

src/Components/Order/archive/ArchivedOrderDetailModal.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { ORDER_STATUS_MAP } from "../OrderDetailBanel";
+import { Button, Modal } from "../../UI";
+import { ORDER_STATUS_MAP } from "../OrderDetailModel";
 import type { ArchivedOrder } from "@/src/types/order";
 
 interface ArchivedOrderDetailModalProps {
@@ -34,25 +35,20 @@ export function ArchivedOrderDetailModal({ order, onClose }: ArchivedOrderDetail
   const s = ORDER_STATUS_MAP[order.currentStatus] ?? ORDER_STATUS_MAP.Created;
 
   return (
-    <div role="dialog" aria-modal="true" aria-labelledby="archived-order-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" }}>
-        <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-order-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0", fontFamily: "var(--font-mono)" }}>
-              {order.shipmentNumber}
-            </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", overflowY: "auto", maxHeight: "70vh" }} dir="rtl">
+    <Modal
+      open
+      title={order.shipmentNumber}
+      subtitle="طلب مؤرشف"
+      onClose={onClose}
+      zIndex={60}
+      size="md"
+      footer={
+        <Button type="button" variant="secondary" onClick={onClose}>
+          إغلاق
+        </Button>
+      }
+    >
+      <div dir="rtl">
         <span style={{ display: "inline-flex", alignItems: "center", gap: 6, borderRadius: "var(--radius-full)", border: `1px solid ${s.border}`, background: s.bg, padding: "0.3rem 0.875rem", fontSize: 12, fontWeight: 700, color: s.color, marginBottom: 12 }}>
           <span style={{ width: 7, height: 7, borderRadius: "50%", background: s.dot }} />
           {s.label}
@@ -80,14 +76,6 @@ export function ArchivedOrderDetailModal({ order, onClose }: ArchivedOrderDetail
           </div>
         )}
       </div>
-
-        <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>
+    </Modal>
   );
 }

src/Components/Order/archive/ArchivedOrderTable.tsx

@@ -1,29 +1,17 @@
 "use client";
 
-import { Spinner } from "../../UI";
-import { ORDER_STATUS_MAP } from "../OrderDetailBanel";
+import { ReusableTable, ActionButtons } from "../../UI";
+import { ORDER_STATUS_MAP } from "../OrderDetailModel";
+import type { TableColumn } from "@/src/types/models";
 import type { ArchivedOrder } from "@/src/types/order";
 
-
 function fmtAmount(n?: string | number | null): string {
   if (n == null) return "—";
   const num = typeof n === "string" ? parseFloat(n) : n;
   if (Number.isNaN(num)) return "—";
-  return `${num.toFixed(2)} ر.س`;
+  return `${num.toFixed(2)} SAR`;
 }
 
-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)",
-};
-const ROW_GRID = "1.6fr 1.6fr 1fr 1fr 100px";
-
 interface ArchivedOrderTableProps {
   orders: ArchivedOrder[];
   loading: boolean;
@@ -35,92 +23,58 @@ interface ArchivedOrderTableProps {
 }
 
 export function ArchivedOrderTable({ orders, loading, search, page, pages, onView, onPageChange }: ArchivedOrderTableProps) {
-  return (
-    <div style={cardStyle}>
-      <div dir="rtl" style={{ display: "grid", gridTemplateColumns: ROW_GRID, ...thStyle }}>
-        <span>رقم الشحنة</span>
-        <span>المستلم</span>
-        <span>المبلغ</span>
-        <span>الحالة</span>
-        <span style={{ textAlign: "center" }}>إجراءات</span>
-      </div>
-
-      {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>
-      ) : orders.length === 0 ? (
-        <div style={{ textAlign: "center", padding: "4rem 1rem" }}>
-          <p style={{ fontSize: 13, color: "var(--color-text-muted)" }}>
-            {search ? `لا توجد نتائج لـ "${search}"` : "لا توجد طلبات في الأرشيف."}
-          </p>
-        </div>
-      ) : (
-        <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
-          {orders.map((o, i) => {
-            const s = ORDER_STATUS_MAP[o.currentStatus] ?? ORDER_STATUS_MAP.Created;
-            return (
-              <li key={o.id} style={{
-                display: "grid", gridTemplateColumns: ROW_GRID,
-                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,
-              }}>
-                <span style={{ fontWeight: 600, fontFamily: "var(--font-mono)", color: "#2563EB" }}>
-                  {o.shipmentNumber}
-                </span>
+  const columns: TableColumn<ArchivedOrder>[] = [
+    {
+      key: "shipmentNumber",
+      header: "رقم الشحنة #",
+      width: "1.6fr",
+      render: (o) => <span style={{ fontWeight: 600, fontFamily: "var(--font-mono)", color: "#2563EB" }}>{o.shipmentNumber}</span>,
+    },
+    {
+      key: "recipient",
+      header: "المستلم",
+      width: "1.6fr",
+      render: (o) => (
         <div>
           <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>{o.recipientName}</p>
           <p style={{ marginTop: 2, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--color-text-muted)" }}>{o.recipientPhone}</p>
         </div>
-                <span style={{ fontWeight: 600, fontFamily: "var(--font-mono)", color: "var(--color-text-primary)" }}>
-                  {fmtAmount(o.subTotal)}
-                </span>
-                <span style={{
-                  display: "inline-flex", alignItems: "center", gap: 5,
-                  borderRadius: "var(--radius-full)", border: `1px solid ${s.border}`,
-                  background: s.bg, padding: "0.2rem 0.625rem",
-                  fontSize: 11, fontWeight: 600, color: s.color, width: "fit-content",
-                }}>
+      ),
+    },
+    {
+      key: "amount",
+      header: "الكمية",
+      width: "1fr",
+      render: (o) => <span style={{ fontWeight: 600, fontFamily: "var(--font-mono)", color: "var(--color-text-primary)" }}>{fmtAmount(o.subTotal)}</span>,
+    },
+    {
+      key: "status",
+      header: "الحالة",
+      width: "1fr",
+      render: (o) => {
+        const s = ORDER_STATUS_MAP[o.currentStatus] ?? ORDER_STATUS_MAP.Created;
+        return (
+          <span style={{ display: "inline-flex", alignItems: "center", gap: 5, borderRadius: "var(--radius-full)", border: `1px solid ${s.border}`, background: s.bg, padding: "0.2rem 0.625rem", fontSize: 11, fontWeight: 600, color: s.color, width: "fit-content" }}>
             <span style={{ width: 6, height: 6, borderRadius: "50%", background: s.dot }} />
             {s.label}
           </span>
-                <div style={{ display: "flex", justifyContent: "center" }}>
-                  <button type="button" title={`عرض ${o.shipmentNumber}`} aria-label={`عرض ${o.shipmentNumber}`}
-                    onClick={e => { e.stopPropagation(); onView(o); }}
-                    style={{ width: 32, height: 32, borderRadius: "var(--radius-md)", border: "1px solid #A7F3D0", background: "#ECFDF5", color: "#059669", cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
-                    <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>
-                  </button>
-                </div>
-              </li>
         );
-          })}
-        </ul>
-      )}
+      },
+    },
+  ];
 
-      {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>
+  return (
+    <ReusableTable
+      columns={columns}
+      data={orders}
+      loading={loading}
+      search={search}
+      page={page}
+      pages={pages}
+      onPageChange={onPageChange}
+      emptyIcon="🗄️"
+      emptyDescription={search ? `No results for "${search}"` : "No archived orders."}
+      renderActions={(o) => <ActionButtons itemLabel={o.shipmentNumber} onView={() => onView(o)} />}
+    />
   );
 }

src/Components/Order/archive/ArchivedOrdersModal.tsx

@@ -12,18 +12,7 @@ interface ArchivedOrdersModalProps {
 }
 
 const searchIcon = (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    aria-hidden="true"
-  >
-    <circle cx="11" cy="11" r="8" />
-    <path d="m21 21-4.35-4.35" />
-  </svg>
+  <i className="ti ti-search" style={{ fontSize: 16 }} aria-hidden="true" />
 );
 
 export function ArchivedOrdersModal({ onClose }: ArchivedOrdersModalProps) {

src/Components/Order/index.ts

@@ -1,2 +1,3 @@
 export {OrderFormModal} from './OrderFormModal';
-export {OrderDetailPanel} from './OrderDetailBanel';
+export {OrderDetailPanel, ORDER_STATUS_MAP, PAY_STATUS_MAP, PAY_METHOD_LABEL} from './OrderDetailModel';
+export {OrderTable} from './OrderTable';

src/Components/Order/order.tsx

@@ -0,0 +1,210 @@
+"use client";
+import React, { type FC } from "react";
+import { useClientOrders }             from "@/src/hooks/useClientOrders";
+import { fmtDate, fmtAmount }          from "@/src/lib/formatters";
+import { statusColor, statusLabel }    from "@/src/lib/order-status";
+import { clearSession, type ClientSession } from "@/src/lib/session";
+import type { OrderStatus }            from "@/src/types/order";
+import { Spinner }                     from "../UI";
+
+// ─── Order status tracker ─────────────────────
+const STATUS_STEPS: OrderStatus[] = ["CREATED", "IN_TRANSIT", "DELIVERED"];
+const STEP_LABELS                  = ["تم الإنشاء", "قيد التوصيل", "تم التسليم"];
+
+const StepIcon: FC<{ step: number }> = ({ step }) => {
+  if (step === 0) return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <rect x="9" y="3" width="6" height="4" rx="1"/>
+      <path d="M4 7h16v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z"/>
+    </svg>
+  );
+  if (step === 1) return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <rect x="2" y="7" width="20" height="14" rx="2"/>
+      <path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/>
+      <line x1="12" y1="12" x2="12" y2="16"/><line x1="10" y1="14" x2="14" y2="14"/>
+    </svg>
+  );
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <polyline points="20 6 9 17 4 12"/>
+    </svg>
+  );
+};
+
+const OrderTracker: FC<{ status: OrderStatus }> = ({ status }) => {
+  const idx = STATUS_STEPS.indexOf(status === "CANCELLED" ? "CREATED" : status);
+  return (
+    <div className="flex items-center gap-0 py-2" dir="rtl" role="list" aria-label="تقدم الطلب">
+      {STATUS_STEPS.map((s, i) => (
+        <React.Fragment key={s}>
+          <div className="flex flex-col items-center gap-1" role="listitem">
+            <div className={`w-9 h-9 rounded-full flex items-center justify-center transition-all ${
+              status === "CANCELLED"
+                ? "bg-[#FEE2E2] text-red-500 border-2 border-red-200"
+                : i <= idx ? "bg-[#1A73E8] text-white" : "bg-white border-2 border-[#E5E7EB] text-[#D1D5DB]"
+            }`} aria-current={i === idx ? "step" : undefined}>
+              <StepIcon step={i} />
+            </div>
+            <span className={`text-[10px] font-semibold whitespace-nowrap ${
+              status === "CANCELLED" ? "text-red-400" : i <= idx ? "text-[#1A73E8]" : "text-[#9CA3AF]"
+            }`}>
+              {STEP_LABELS[i]}
+            </span>
+          </div>
+          {i < STATUS_STEPS.length - 1 && (
+            <div aria-hidden="true" className={`flex-1 h-0.5 mb-4 mx-1 ${
+              status === "CANCELLED" ? "bg-red-200" : i < idx ? "bg-[#1A73E8]" : "bg-[#E5E7EB]"
+            }`} />
+          )}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};
+
+// ─── DashboardStep ───────────────────────────
+interface DashboardStepProps {
+  session: ClientSession;
+}
+
+const DashboardStep: FC<DashboardStepProps> = ({ session }) => {
+  const { orders, loading, error } = useClientOrders(session.id);
+
+  const activeOrder = orders.find(o => o.status === "CREATED" || o.status === "IN_TRANSIT");
+  const pastOrders  = orders.filter(o => o !== activeOrder);
+
+  const summary = {
+    total:     orders.length,
+    delivered: orders.filter(o => o.status === "DELIVERED").length,
+    pending:   orders.filter(o => o.status === "CREATED" || o.status === "IN_TRANSIT").length,
+  };
+
+  return (
+    <div dir="rtl">
+      {/* Header */}
+      <div className="mb-6 flex items-center justify-between">
+        <div>
+          <h2 className="text-[22px] font-bold text-[#111827] tracking-tight">لوحة الطلبات</h2>
+          <p className="text-[13px] text-[#6B7280] mt-0.5">
+            مرحبًا بعودتك، <strong className="text-[#111827]">{session.name}</strong>
+          </p>
+        </div>
+        <div className="flex items-center gap-1.5 bg-[#D1FAE5] border border-[#A7F3D0] rounded-full px-3 py-1.5" role="status" aria-label="الحساب نشط">
+          <span aria-hidden="true" className="w-2 h-2 rounded-full bg-[#10B981] motion-safe:animate-pulse" />
+          <span className="text-[11px] font-bold text-[#065F46]">نشط</span>
+        </div>
+      </div>
+
+      {/* Loading */}
+      {loading && (
+        <div className="flex flex-col items-center justify-center py-14 gap-3" role="status">
+          <Spinner />
+          <p className="text-[13px] text-[#6B7280]">جارٍ تحميل الطلبات…</p>
+        </div>
+      )}
+
+      {/* Error */}
+      {error && (
+        <div className="flex flex-col items-center gap-3 py-10" role="alert">
+          <p className="text-[13px] text-red-500">{error}</p>
+        </div>
+      )}
+
+      {!loading && !error && (
+        <>
+          {/* Stats */}
+          <div className="grid grid-cols-3 gap-3 mb-6">
+            {[
+              { label: "إجمالي الطلبات", value: summary.total,     color: "text-[#111827]" },
+              { label: "مُسلَّمة",       value: summary.delivered, color: "text-[#34A853]" },
+              { label: "قيد التنفيذ",   value: summary.pending,   color: "text-[#1A73E8]" },
+            ].map(s => (
+              <div key={s.label} className="bg-white border border-[#E5E7EB] rounded-xl p-3.5">
+                <p className="text-[10px] font-bold text-[#9CA3AF] mb-1">{s.label}</p>
+                <p className={`text-[26px] font-bold ${s.color}`}>{s.value}</p>
+              </div>
+            ))}
+          </div>
+
+          {/* Active order tracker */}
+          {activeOrder ? (
+            <div className="bg-gradient-to-bl from-[#0D47A1] to-[#1A73E8] rounded-xl p-4 mb-6">
+              <div className="flex items-center justify-between mb-3">
+                <div>
+                  <p className="text-[11px] font-bold text-white/60 tracking-wide">الطلب الحالي</p>
+                  <p className="text-[14px] font-bold text-white font-mono">{activeOrder.id}</p>
+                </div>
+                <span className={`text-[11px] font-bold border px-2.5 py-1 rounded-full ${
+                  activeOrder.status === "CREATED"
+                    ? "bg-white/15 border-white/30 text-white"
+                    : "bg-[#D1FAE5] border-[#A7F3D0] text-[#065F46]"
+                }`}>
+                  {statusLabel(activeOrder.status)}
+                </span>
+              </div>
+              <OrderTracker status={activeOrder.status} />
+            </div>
+          ) : (
+            <div className="border border-dashed border-[#E5E7EB] rounded-xl p-5 mb-6 text-center">
+              <p className="text-[13px] text-[#9CA3AF]">لا يوجد طلب نشط حاليًا.</p>
+            </div>
+          )}
+
+          {/* Past orders table */}
+          {pastOrders.length > 0 && (
+            <div className="bg-white border border-[#E5E7EB] rounded-xl overflow-hidden">
+              <div className="px-4 py-3 border-b border-[#E5E7EB] flex items-center justify-between">
+                <p className="text-[13px] font-bold text-[#111827]">سجل الطلبات</p>
+                <span className="text-[11px] text-[#9CA3AF] font-medium">{pastOrders.length} طلبات</span>
+              </div>
+              <div className="overflow-x-auto">
+                <table className="w-full" dir="rtl">
+                  <thead>
+                    <tr className="bg-[#F9FAFB]">
+                      {["رقم الطلب", "التاريخ", "الوصف", "الحالة", "المبلغ"].map(h => (
+                        <th key={h} scope="col" className="px-4 py-2.5 text-right text-[10px] font-bold text-[#9CA3AF] uppercase tracking-wide">
+                          {h}
+                        </th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {pastOrders.map((order, i) => (
+                      <tr key={order.id} className={`border-t border-[#F3F4F6] hover:bg-[#FAFAFA] transition-colors ${i % 2 === 0 ? "" : "bg-[#FAFAFA]/30"}`}>
+                        <td className="px-4 py-3">
+                          <span className="font-mono text-[12px] font-semibold text-[#1A73E8]">{order.id}</span>
+                        </td>
+                        <td className="px-4 py-3 text-[12px] text-[#6B7280] whitespace-nowrap">{fmtDate(order.createdAt)}</td>
+                        <td className="px-4 py-3 text-[12px] text-[#374151]">{order.description}</td>
+                        <td className="px-4 py-3">
+                          <span className={`inline-flex items-center gap-1.5 text-[11px] font-bold border px-2.5 py-0.5 rounded-full whitespace-nowrap ${statusColor(order.status)}`}>
+                            <span aria-hidden="true" className="w-1.5 h-1.5 rounded-full bg-current" />
+                            {statusLabel(order.status)}
+                          </span>
+                        </td>
+                        <td className="px-4 py-3 text-[12px] font-semibold text-[#111827] font-mono whitespace-nowrap">
+                          {fmtAmount(order.totalAmount)}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+
+      <button
+        type="button"
+        onClick={() => { clearSession(); window.location.reload(); }}
+        className="mt-4 text-[11px] text-[#9CA3AF] hover:text-red-400 underline transition-colors"
+      >
+        مسح الجلسة وإعادة البدء
+      </button>
+    </div>
+  );
+};
+
+export default DashboardStep;

src/Components/Trip/TripDetailModal.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+
+import { useEffect, useState } from "react";
+import { Alert, Button, Modal, Spinner } from "../UI";
+import { getStoredToken } from "@/src/lib/auth";
+import { tripService } from "@/src/services/trip.service";
+import { TRIP_STATUS_MAP } from "@/src/types/trip";
+import type { Trip } from "@/src/types/trip";
+
+interface TripDetailModalProps {
+  tripId:  string;
+  onClose: () => void;
+}
+
+// ── small helper components ───────────────────────────────────────────────────
+// (No shared-UI equivalents — purpose-built layouts, not generic controls.)
+function DetailRow({ label, value }: { label: string; value?: string | null }) {
+  return (
+    <div style={{
+      display: "flex", flexDirection: "column", gap: 4,
+      padding: "0.75rem 0",
+      borderBottom: "1px solid var(--color-border)",
+    }}>
+      <span style={{ fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.15em", color: "var(--color-text-muted)" }}>
+        {label}
+      </span>
+      <span style={{ fontSize: 13, fontWeight: 500, color: value ? "var(--color-text-primary)" : "var(--color-text-hint)" }}>
+        {value || "—"}
+      </span>
+    </div>
+  );
+}
+
+function StatusBadge({ status }: { status: Trip["status"] }) {
+  const s = TRIP_STATUS_MAP[status];
+  return (
+    <span style={{
+      display: "inline-flex", alignItems: "center", gap: 6,
+      borderRadius: "var(--radius-full)",
+      border: `1px solid ${s.border}`,
+      background: s.bg,
+      padding: "0.25rem 0.75rem",
+      fontSize: 12, fontWeight: 600,
+      color: s.color,
+    }}>
+      <span style={{ width: 6, height: 6, borderRadius: "50%", background: s.dot }} />
+      {s.label}
+    </span>
+  );
+}
+
+// ── main component ────────────────────────────────────────────────────────────
+export function TripDetailModal({ tripId, onClose }: TripDetailModalProps) {
+  const [trip,    setTrip]    = useState<Trip | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error,   setError]   = useState<string | null>(null);
+
+  // fetch trip details on mount
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const token = getStoredToken();
+        const data = await tripService.getById(tripId, token);
+        if (!cancelled) setTrip(data);
+      } catch {
+        if (!cancelled) setError("تعذّر تحميل بيانات الرحلة. يرجى المحاولة لاحقاً.");
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [tripId]);
+
+  // ── helpers ───────────────────────────────────────────────────────────────
+  const fmt = (iso?: string | null) =>
+    iso ? new Date(iso).toLocaleDateString("ar-SA", { year: "numeric", month: "long", day: "numeric", hour: "2-digit", minute: "2-digit" }) : null;
+
+  const cash = (v?: number | string | null) =>
+    v != null ? `${Number(v).toLocaleString("ar-SA")} ر.س` : null;
+
+  // ── render ────────────────────────────────────────────────────────────────
+  return (
+    <Modal
+      open
+      title={trip?.title ?? "عرض الرحلة"}
+      subtitle="تفاصيل الرحلة"
+      onClose={onClose}
+      size="md"
+      footer={
+        <Button type="button" variant="secondary" onClick={onClose}>
+          إغلاق
+        </Button>
+      }
+    >
+      {/* loading */}
+      {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>
+      )}
+
+      {/* error */}
+      {!loading && error && <Alert type="error" message={error} />}
+
+      {/* content */}
+      {!loading && trip && (
+        <div style={{ display: "flex", flexDirection: "column", gap: 0 }} dir="rtl">
+
+          {/* title + trip number + status row */}
+          <div style={{
+            display: "flex", flexDirection: "column", gap: 8,
+            padding: "0 0 1.25rem",
+            borderBottom: "1px solid var(--color-border)",
+            marginBottom: "0.25rem",
+          }}>
+            <p style={{ fontSize: 16, fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>{trip.title}</p>
+            <p style={{ margin: 0, fontFamily: "var(--font-mono)", fontSize: 12, color: "#2563EB", fontWeight: 600 }}>
+              {trip.tripNumber}
+            </p>
+            <StatusBadge status={trip.status} />
+          </div>
+
+          {/* driver / car / branch */}
+          <DetailRow label="السائق"  value={trip.driver?.name} />
+          <DetailRow label="السيارة" value={trip.car ? `${trip.car.manufacturer} ${trip.car.model} — ${trip.car.plateNumber}` : null} />
+          <DetailRow label="الفرع"   value={trip.branch?.name} />
+
+          {/* timing */}
+          <DetailRow label="وقت البدء"    value={fmt(trip.startTime)} />
+          <DetailRow label="وقت الانتهاء" value={fmt(trip.endTime)} />
+
+          {/* counts + cash */}
+          <DetailRow label="المجمّع"        value={String(trip.collectedCount)} />
+          <DetailRow label="المُسلَّم"      value={String(trip.deliveredCount)} />
+          <DetailRow label="المُرتجع"       value={String(trip.returnedCount)} />
+          <DetailRow label="النقد المحصّل"  value={cash(trip.totalCashCollected)} />
+
+          {/* notes */}
+          <DetailRow label="ملاحظات"    value={trip.notes} />
+          <DetailRow label="سبب الإنهاء" value={trip.endReason} />
+
+          {/* timestamps */}
+          <DetailRow label="تاريخ الإنشاء" value={fmt(trip.createdAt)} />
+          <DetailRow label="آخر تحديث"     value={fmt(trip.updatedAt)} />
+        </div>
+      )}
+    </Modal>
+  );
+}

src/Components/Trip/TripTable.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+// src/Components/Trip/TripTable.tsx
+// MIGRATED to ReusableTable + ActionButtons — same props, same visual
+// result as the original. StatusBadge kept custom since colors come
+// dynamically from TRIP_STATUS_MAP (per-status color+dot).
+
+import { Button, ReusableTable, ActionButtons } from "../UI";
+import { TRIP_STATUS_MAP } from "@/src/types/trip";
+import type { TableColumn } from "@/src/types/models";
+import type { Trip } from "@/src/types/trip";
+
+function StatusBadge({ status }: { status: Trip["status"] }) {
+  const s = TRIP_STATUS_MAP[status];
+  return (
+    <span style={{ display: "inline-flex", alignItems: "center", gap: 5, borderRadius: "var(--radius-full)", border: `1px solid ${s.border}`, background: s.bg, padding: "0.2rem 0.625rem", fontSize: 11, fontWeight: 600, color: s.color }}>
+      <span style={{ width: 6, height: 6, borderRadius: "50%", background: s.dot }} />
+      {s.label}
+    </span>
+  );
+}
+
+function fmtDate(iso?: string | null): string {
+  if (!iso) return "—";
+  return new Date(iso).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
+}
+
+interface TripTableProps {
+  trips: Trip[];
+  loading: boolean;
+  search: string;
+  page: number;
+  pages: number;
+  onEdit: (trip: Trip) => void;
+  onDelete: (trip: Trip) => void;
+  onView: (trip: Trip) => void;
+  onAddFirst: () => void;
+  onPageChange: (p: number) => void;
+}
+
+export function TripTable({
+  trips, loading, search, page, pages,
+  onEdit, onDelete, onView, onAddFirst, onPageChange,
+}: TripTableProps) {
+  const columns: TableColumn<Trip>[] = [
+    {
+      key: "title",
+      header: "الرحلة",
+      width: "2fr",
+      render: (t) => (
+        <div>
+          <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>{t.title}</p>
+          <p style={{ marginTop: 2, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--color-text-muted)" }}>{t.tripNumber}</p>
+        </div>
+      ),
+    },
+    { key: "driver", header: "السائق", width: "1.3fr", render: (t) => t.driver?.name ?? "—" },
+    {
+      key: "car",
+      header: "السيارة",
+      width: "1.3fr",
+      render: (t) => (t.car ? `${t.car.manufacturer} ${t.car.model}` : "—"),
+    },
+    { key: "branch", header: "الفرع", width: "1fr", render: (t) => t.branch?.name ?? "—" },
+    { key: "status", header: "الحالة", width: "1fr", render: (t) => <StatusBadge status={t.status} /> },
+    {
+      key: "startTime",
+      header: "معاد البداء",
+      width: "1fr",
+      align: "center",
+      render: (t) => fmtDate(t.startTime),
+    },
+  ];
+
+  return (
+    <ReusableTable
+      columns={columns}
+      data={trips}
+      loading={loading}
+      search={search}
+      page={page}
+      pages={pages}
+      onPageChange={onPageChange}
+      emptyIcon="🚚"
+      emptyDescription={!search ? "No trips to display." : undefined}
+      emptyAction={
+        !search && (
+          <Button type="button" variant="ghost" size="sm" onClick={onAddFirst}>
+            Add first trip
+          </Button>
+        )
+      }
+      renderActions={(t) => (
+        <ActionButtons
+          itemLabel={t.title}
+          onView={() => onView(t)}
+          onEdit={() => onEdit(t)}
+          onDelete={() => onDelete(t)}
+        />
+      )}
+    />
+  );
+}

src/Components/Trip/Tripdeletemodal.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { useEffect } from "react";
+import { Spinner } from "../UI";
+import type { Trip } from "@/src/types/trip";
+
+interface TripDeleteModalProps {
+  trip: Trip;
+  deleting: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+export function TripDeleteModal({ trip, deleting, onCancel, onConfirm }: TripDeleteModalProps) {
+  useEffect(() => {
+    const h = (e: KeyboardEvent) => { if (e.key === "Escape") onCancel(); };
+    window.addEventListener("keydown", h);
+    return () => window.removeEventListener("keydown", h);
+  }, [onCancel]);
+
+  return (
+    <div
+      role="alertdialog" aria-modal="true" aria-labelledby="trip-del-title"
+      onClick={e => { if (e.target === e.currentTarget) onCancel(); }}
+      style={{
+        position: "fixed", inset: 0, zIndex: 60,
+        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: 420,
+          background: "var(--color-surface)",
+          borderRadius: "var(--radius-xl)",
+          border: "1px solid #FECACA",
+          boxShadow: "0 20px 48px rgba(0,0,0,.18)",
+          padding: "2rem",
+          display: "flex", flexDirection: "column", gap: "1rem",
+          textAlign: "center",
+        }}
+      >
+        {/* Icon */}
+        <div style={{
+          width: 52, height: 52, margin: "0 auto", borderRadius: "50%",
+          background: "#FEF2F2", border: "1px solid #FECACA",
+          display: "flex", alignItems: "center", justifyContent: "center",
+        }}>
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#DC2626" strokeWidth="2">
+            <polyline points="3 6 5 6 21 6" />
+            <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+            <path d="M10 11v6M14 11v6" />
+            <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
+          </svg>
+        </div>
+
+        <div>
+          <h2 id="trip-del-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>
+            حذف الرحلة
+          </h2>
+          <p style={{ marginTop: 8, fontSize: 13, color: "var(--color-text-muted)", lineHeight: 1.6 }}>
+            هل أنت متأكد من حذف رحلة{" "}
+            <strong style={{ color: "var(--color-text-primary)" }}>{trip.title}</strong>
+            {" "}(
+            <span style={{ fontFamily: "var(--font-mono)", fontSize: 12 }}>
+              {trip.tripNumber}
+            </span>
+            )؟ لا يمكن التراجع عن هذا الإجراء.
+          </p>
+        </div>
+
+        <div style={{ display: "flex", gap: "0.5rem" }}>
+          <button type="button" onClick={onCancel} disabled={deleting}
+            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: deleting ? "not-allowed" : "pointer", fontFamily: "var(--font-sans)",
+            }}>
+            إلغاء
+          </button>
+          <button type="button" onClick={onConfirm} disabled={deleting}
+            style={{
+              flex: 1, height: 40, borderRadius: "var(--radius-md)",
+              border: "none", background: "#DC2626",
+              fontSize: 13, fontWeight: 700, color: "#FFF",
+              cursor: deleting ? "not-allowed" : "pointer",
+              display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
+              fontFamily: "var(--font-sans)", opacity: deleting ? 0.7 : 1,
+            }}>
+            {deleting && <Spinner size="sm" className="text-white" />}
+            {deleting ? "جارٍ الحذف…" : "تأكيد الحذف"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/Components/Trip/Tripformmodal.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { Alert, Button, Input, Select, Textarea, Spinner } from "../UI";
+import { Alert, Button, Input, Modal, Select, Textarea } from "../UI";
 import { getStoredToken } from "@/src/lib/auth";
 import {
   createTripSchema,
@@ -21,6 +21,8 @@ import type { DriverOption } from "@/src/types/driver";
 import type { CarOption } from "@/src/types/car";
 import type { BranchOption } from "@/src/types/branch";
 
+const FORM_ID = "trip-form";
+
 // ── Shared styles ────────────────────────────────────────────────────────────
 // Only for section headings — everything field-level now comes from the
 // Input / Select / Textarea components themselves.
@@ -82,29 +84,34 @@ export function TripFormModal({
   const [cars, setCars] = useState<CarOption[]>([]);
   const [branches, setBranches] = useState<BranchOption[]>([]);
 
-  useEffect(() => {
-    const token = getStoredToken();
-    driverService.getActiveOptions(token).then(setDrivers).catch(() => {});
-    carService.getActiveOptions(token).then(setCars).catch(() => {});
-    branchService.getOptions(token).then(setBranches).catch(() => {});
-  }, []);
-
   // ── react-hook-form ────────────────────────────────────────────────────────
+  // Moved above the dropdown-loading effect below: that effect calls
+  // setValue(), so useForm() (which defines it) must run first — otherwise
+  // setValue is referenced before its own initialization (TDZ ReferenceError).
   const {
     register,
     handleSubmit,
     setError,
     setFocus,
+    setValue,
     formState: { errors, isSubmitting },
   } = useForm<TripFormValues>({
-    // Cast the schema itself — create/update schemas differ structurally in
-    // which fields are required, so yup can't unify them into one type.
-    resolver: yupResolver<TripFormValues>((isNew ? createTripSchema : updateTripSchema) as any),
+    // Cast both the schema argument and the resolver's result:
+    // - argument: createTripSchema/updateTripSchema have structurally
+    //   different shapes (create requires title/driverId/etc., update makes
+    //   everything optional), so the ternary's type is a union yupResolver's
+    //   single-schema signature won't accept.
+    // - result: yup's inferred type for .optional() fields
+    //   (`collectedCount?: number`) is structurally incompatible with
+    //   TripFormValues's `collectedCount: number | undefined` — letting
+    //   useForm<TripFormValues> alone establish the field-values type avoids
+    //   that mismatch.
+    resolver: yupResolver((isNew ? createTripSchema : updateTripSchema) as any) as any,
     defaultValues: {
       title: editTrip?.title ?? "",
-      driverId: editTrip?.driverId ?? "",
-      carId: editTrip?.carId ?? "",
-      branchId: editTrip?.branchId ?? "",
+      driverId: editTrip?.driverId ?? editTrip?.driver?.id ?? "",
+      carId: editTrip?.carId ?? editTrip?.car?.id ?? "",
+      branchId: editTrip?.branchId ?? editTrip?.branch?.id ?? "",
       status: editTrip?.status ?? "Scheduled",
       startTime: editTrip?.startTime?.slice(0, 16) ?? "",
       endTime: editTrip?.endTime?.slice(0, 16) ?? "",
@@ -119,6 +126,31 @@ export function TripFormModal({
     },
   });
 
+  useEffect(() => {
+    const token = getStoredToken();
+
+    driverService.getActiveOptions(token).then((list) => {
+      setDrivers(list);
+      // defaultValues were applied before this list existed, so the <select>
+      // had no matching <option> yet and silently fell back to "" — reapply
+      // the saved id now that the option actually exists in the DOM.
+      const savedDriverId = editTrip?.driverId ?? editTrip?.driver?.id;
+      if (savedDriverId) setValue("driverId", savedDriverId);
+    }).catch(() => {});
+
+    carService.getActiveOptions(token).then((list) => {
+      setCars(list);
+      const savedCarId = editTrip?.carId ?? editTrip?.car?.id;
+      if (savedCarId) setValue("carId", savedCarId);
+    }).catch(() => {});
+
+    branchService.getOptions(token).then((list) => {
+      setBranches(list);
+      const savedBranchId = editTrip?.branchId ?? editTrip?.branch?.id;
+      if (savedBranchId) setValue("branchId", savedBranchId);
+    }).catch(() => {});
+  }, [editTrip, setValue]);
+
   const [apiError, setApiError] = useState("");
 
   // register("title") already attaches its own ref — Input forwards it
@@ -127,13 +159,6 @@ export function TripFormModal({
   useEffect(() => {
     setFocus("title");
   }, [setFocus]);
-  useEffect(() => {
-    const h = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", h);
-    return () => window.removeEventListener("keydown", h);
-  }, [onClose]);
 
   const numberField = (
     field: "collectedCount" | "deliveredCount" | "returnedCount" | "totalCashCollected",
@@ -189,85 +214,28 @@ export function TripFormModal({
   };
 
   return (
-    <div
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="trip-form-title"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-      style={{
-        position: "fixed",
-        inset: 0,
-        zIndex: 60,
-        background: "rgba(15,23,42,0.55)",
-        backdropFilter: "blur(4px)",
-        display: "flex",
-        alignItems: "flex-start",
-        justifyContent: "center",
-        padding: "2rem 1rem",
-        overflowY: "auto",
-      }}
-    >
-      <div
-        onClick={(e) => e.stopPropagation()}
-        style={{
-          width: "100%",
-          maxWidth: 700,
-          background: "var(--color-surface)",
-          borderRadius: "var(--radius-xl)",
-          border: "1px solid var(--color-border)",
-          boxShadow: "0 24px 56px rgba(0,0,0,.2)",
-          overflow: "hidden",
-        }}
-      >
-        {/* Header */}
-        <div
-          style={{
-            padding: "1.25rem 1.5rem",
-            borderBottom: "1px solid var(--color-border)",
-            background: "var(--color-surface-muted)",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-          }}
-        >
-          <h2
-            id="trip-form-title"
-            style={{
-              fontSize: 16,
-              fontWeight: 700,
-              color: "var(--color-text-primary)",
-              margin: 0,
-            }}
-          >
-            {isNew ? "إضافة رحلة جديدة" : "تعديل بيانات الرحلة"}
-          </h2>
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            onClick={onClose}
-            aria-label="إغلاق"
-            className="!px-1"
-          >
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-              <line x1="18" y1="6" x2="6" y2="18" />
-              <line x1="6" y1="6" x2="18" y2="18" />
-            </svg>
+    <Modal
+      open
+      onClose={onClose}
+      size="lg"
+      title={isNew ? "إضافة رحلة جديدة" : "تعديل بيانات الرحلة"}
+      footer={
+        <>
+          <Button type="button" variant="secondary" onClick={onClose} disabled={isSubmitting}>
+            إلغاء
           </Button>
-        </div>
-
-        {/* Form */}
+          <Button type="submit" form={FORM_ID} variant="primary" loading={isSubmitting}>
+            {isNew ? "إضافة الرحلة" : "حفظ التغييرات"}
+          </Button>
+        </>
+      }
+    >
       <form
+        id={FORM_ID}
         onSubmit={handleSubmit(submitHandler)}
         noValidate
-          style={{
-            padding: "1.5rem",
-            display: "flex",
-            flexDirection: "column",
-            gap: "1rem",
-          }}
+        dir="rtl"
+        className="flex flex-col gap-4"
       >
         {errors.title?.type === "manual" && (
           <Alert type="error" message={errors.title.message ?? ""} onClose={() => setApiError("")} />
@@ -444,18 +412,7 @@ export function TripFormModal({
             />
           </>
         )}
-
-          {/* ── Actions ── */}
-          <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end", paddingTop: "0.5rem" }}>
-            <Button type="button" variant="secondary" onClick={onClose} disabled={isSubmitting}>
-              إلغاء
-            </Button>
-            <Button type="submit" variant="primary" loading={isSubmitting}>
-              {isSubmitting ? "جارٍ الحفظ…" : isNew ? "إضافة الرحلة" : "حفظ التغييرات"}
-            </Button>
-          </div>
       </form>
-      </div>
-    </div>
+    </Modal>
   );
 }

src/Components/Trip/archive/ArchivedTripList.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Spinner, Alert, EmptyState, Input, Button } from "@/src/Components/UI";
+import { Spinner, Alert, EmptyState } from "@/src/Components/UI";
 import { useArchivedTrips } from "@/src/hooks/archive/useArchivedTrips";
 import { TRIP_STATUS_MAP } from "@/src/types/trip";
 import type { Trip } from "@/src/types/trip";
@@ -11,8 +11,6 @@ interface ArchivedTripListProps {
 }
 
 // ── Status badge — reuses the existing trip status color map ────────────────
-// (per-status colors come from TRIP_STATUS_MAP, so the shared Badge component
-// — which only supports a fixed palette — doesn't cover this; kept custom.)
 function TripStatusBadge({ status }: { status: Trip["status"] }) {
   const s = TRIP_STATUS_MAP[status];
   return (
@@ -32,21 +30,6 @@ function fmtDate(iso?: string | null): string {
   return new Date(iso).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" });
 }
 
-const searchIcon = (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    aria-hidden="true"
-  >
-    <circle cx="11" cy="11" r="8" />
-    <path d="m21 21-4.35-4.35" />
-  </svg>
-);
-
 /**
  * ArchivedTripList
  * Displays a paginated, searchable list of archived trips.
@@ -73,14 +56,19 @@ export function ArchivedTripList({ onView }: ArchivedTripListProps) {
           </span>
         </h2>
 
-        <div className="w-full sm:w-72">
-          <Input
-            label="بحث"
+        <div className="relative w-full sm:w-72">
+          <svg
+            className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--color-text-hint)]"
+            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)}
-            icon={searchIcon}
-            dir="rtl"
+            className="h-10 w-full rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] pr-9 pl-3 text-[13px] text-[var(--color-text-primary)] outline-none focus:border-[var(--color-brand-600)] focus:ring-2 focus:ring-[var(--color-brand-600)]/15"
           />
         </div>
       </div>
@@ -154,22 +142,22 @@ export function ArchivedTripList({ onView }: ArchivedTripListProps) {
               <strong className="text-[var(--color-text-primary)]">{pages}</strong>
             </span>
             <div className="flex gap-2">
-              <Button
-                variant="secondary"
-                size="sm"
+              <button
+                type="button"
                 disabled={page === 1}
                 onClick={() => setPage(Math.max(1, page - 1))}
+                className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-muted)] px-3.5 py-1.5 text-[12px] text-[var(--color-text-secondary)] disabled:cursor-not-allowed disabled:opacity-40"
               >
                 السابق
-              </Button>
-              <Button
-                variant="secondary"
-                size="sm"
+              </button>
+              <button
+                type="button"
                 disabled={page === pages}
                 onClick={() => setPage(Math.min(pages, page + 1))}
+                className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-muted)] px-3.5 py-1.5 text-[12px] text-[var(--color-text-secondary)] disabled:cursor-not-allowed disabled:opacity-40"
               >
                 التالي
-              </Button>
+              </button>
             </div>
           </div>
         )}

src/Components/Trip/archive/ArchivedTripModal.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+
+
+import { useState } from "react";
+import { Alert, Input, Modal } from "@/src/Components/UI";
+import { ArchivedTripTable } from "./ArchivedTripTable";
+import { ArchivedTripDetailModal } from "./ArchivedtripDetailModal";
+import { useArchivedTrips } from "@/src/hooks/archive/useArchivedTrips";
+
+interface ArchivedTripModalProps {
+  onClose: () => void;
+}
+
+const searchIcon = (
+  <i className="ti ti-search" style={{ fontSize: 16 }} aria-hidden="true" />
+);
+
+/**
+ * Top-level modal for browsing archived trips. Wires the useArchivedTrips
+ * hook to the table and detail modal, mirroring ArchivedDrivers/
+ * ArchivedUsersModal's structure and behavior.
+ */
+export function ArchivedTripModal({ onClose }: ArchivedTripModalProps) {
+  const [viewTripId, setViewTripId] = useState<string | null>(null);
+
+  const {
+    trips, loading, total, pages, error,
+    page, search,
+    setPage, handleSearch, clearError,
+  } = useArchivedTrips();
+
+  return (
+    <>
+      {viewTripId && (
+        <ArchivedTripDetailModal tripId={viewTripId} onClose={() => setViewTripId(null)} />
+      )}
+
+      <Modal
+        open
+        onClose={onClose}
+        size="lg"
+        subtitle="الأرشيف"
+        title={`الرحلات المؤرشفة (${total})`}
+      >
+        <div dir="rtl" style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+          <div style={{ maxWidth: 320 }}>
+            <Input
+              label="بحث"
+              placeholder="بحث برقم الرحلة أو العنوان..."
+              value={search}
+              onChange={e => handleSearch(e.target.value)}
+              icon={searchIcon}
+              dir="rtl"
+            />
+          </div>
+
+          {error && <Alert type="error" message={error} onClose={clearError} />}
+
+          <ArchivedTripTable
+            trips={trips}
+            loading={loading}
+            search={search}
+            page={page}
+            pages={pages}
+            onView={trip => setViewTripId(trip.id)}
+            onPageChange={setPage}
+          />
+        </div>
+      </Modal>
+    </>
+  );
+}

src/Components/Trip/archive/ArchivedTripTable.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { ReusableTable } from "@/src/Components/UI";
+import { TRIP_STATUS_MAP } from "@/src/types/trip";
+import type { TableColumn } from "@/src/types/models";
+import type { Trip } from "@/src/types/trip";
+
+function fmtDate(iso?: string | null): string {
+  if (!iso) return "—";
+  return new Date(iso).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
+}
+
+interface ArchivedTripTableProps {
+  trips: Trip[];
+  loading: boolean;
+  search: string;
+  page: number;
+  pages: number;
+  onView: (trip: Trip) => void;
+  onPageChange: (p: number) => void;
+}
+
+export function ArchivedTripTable({ trips, loading, search, page, pages, onView, onPageChange }: ArchivedTripTableProps) {
+  const columns: TableColumn<Trip>[] = [
+    {
+      key: "title",
+      header: "الرحلة",
+      width: "2fr",
+      render: (t) => (
+        <div>
+          <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>{t.title}</p>
+          <p style={{ marginTop: 2, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--color-brand-600)" }}>{t.tripNumber}</p>
+        </div>
+      ),
+    },
+    {
+      key: "status",
+      header: "الحالة",
+      width: "1.5fr",
+      render: (t) => {
+        const s = TRIP_STATUS_MAP[t.status];
+        return (
+          <span style={{ display: "inline-flex", alignItems: "center", gap: 5, borderRadius: "var(--radius-full)", border: `1px solid ${s.border}`, background: s.bg, padding: "0.2rem 0.625rem", fontSize: 11, fontWeight: 600, color: s.color }}>
+            <span style={{ width: 6, height: 6, borderRadius: "50%", background: s.dot }} />
+            {s.label}
+          </span>
+        );
+      },
+    },
+    { key: "start", header: "تاريخ البداية", width: "1fr", align: "center", render: (t) => fmtDate(t.startTime) },
+    { key: "end", header: "تاريخ الانتهاء", width: "1fr", align: "center", render: (t) => fmtDate(t.endTime) },
+    {
+      key: "cash",
+      header: "المبلغ المحصل",
+      width: "1fr",
+      align: "center",
+      render: (t) => (
+        <span style={{ fontWeight: 600, fontFamily: "var(--font-mono)" }}>
+          {t.totalCashCollected != null ? `${Number(t.totalCashCollected).toLocaleString("en-US")} SAR` : "—"}
+        </span>
+      ),
+    },
+  ];
+
+  return (
+    <ReusableTable
+      columns={columns}
+      data={trips}
+      loading={loading}
+      search={search}
+      page={page}
+      pages={pages}
+      onPageChange={onPageChange}
+      onRowClick={onView}
+      emptyIcon="🗄️"
+      emptyDescription={search ? `No results for "${search}"` : "No archived trips."}
+    />
+  );
+}

src/Components/Trip/archive/ArchivedtripDetailModal.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+// src/Components/Trip/archive/ArchivedTripDetailModal.tsx
+// New — mirrors ArchivedDriverDetailModal.tsx / ArchivedUserDetailModal.tsx.
+// zIndex={60} because this always opens nested inside ArchivedTripModal.
+
+import { useEffect, useState } from "react";
+import { Alert, Button, Modal, Spinner } from "@/src/Components/UI";
+import { getStoredToken } from "@/src/lib/auth";
+import { archivedTripService } from "@/src/services/archive/archivedTrip.service";
+import { TRIP_STATUS_MAP } from "@/src/types/trip";
+import type { Trip } from "@/src/types/trip";
+
+interface ArchivedTripDetailModalProps {
+  tripId:  string;
+  onClose: () => void;
+}
+
+// ── small helper components ───────────────────────────────────────────────────
+function DetailRow({ label, value }: { label: string; value?: string | null }) {
+  return (
+    <div style={{
+      display: "flex", flexDirection: "column", gap: 4,
+      padding: "0.75rem 0",
+      borderBottom: "1px solid var(--color-border)",
+    }}>
+      <span style={{ fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.15em", color: "var(--color-text-muted)" }}>
+        {label}
+      </span>
+      <span style={{ fontSize: 13, fontWeight: 500, color: value ? "var(--color-text-primary)" : "var(--color-text-hint)" }}>
+        {value || "—"}
+      </span>
+    </div>
+  );
+}
+
+function StatusBadge({ status }: { status: Trip["status"] }) {
+  const s = TRIP_STATUS_MAP[status];
+  return (
+    <span style={{
+      display: "inline-flex", alignItems: "center", gap: 6,
+      borderRadius: "var(--radius-full)",
+      border: `1px solid ${s.border}`,
+      background: s.bg,
+      padding: "0.25rem 0.75rem",
+      fontSize: 12, fontWeight: 600,
+      color: s.color,
+    }}>
+      <span style={{ width: 6, height: 6, borderRadius: "50%", background: s.dot }} />
+      {s.label}
+    </span>
+  );
+}
+
+// ── main component ────────────────────────────────────────────────────────────
+export function ArchivedTripDetailModal({ tripId, onClose }: ArchivedTripDetailModalProps) {
+  const [trip,    setTrip]    = useState<Trip | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error,   setError]   = useState<string | null>(null);
+
+  // fetch archived trip details on mount
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const token = getStoredToken();
+        const data = await archivedTripService.getByIdUnwrapped(tripId, token);
+        if (!cancelled) setTrip(data);
+      } catch {
+        if (!cancelled) setError("تعذّر تحميل بيانات الرحلة المؤرشفة. يرجى المحاولة لاحقاً.");
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [tripId]);
+
+  // ── helpers ───────────────────────────────────────────────────────────────
+  const fmt = (iso?: string | null) =>
+    iso ? new Date(iso).toLocaleDateString("ar-SA", { year: "numeric", month: "long", day: "numeric", hour: "2-digit", minute: "2-digit" }) : null;
+
+  const cash = (v?: number | string | null) =>
+    v != null ? `${Number(v).toLocaleString("ar-SA")} ر.س` : null;
+
+  // ── render ────────────────────────────────────────────────────────────────
+  return (
+    <Modal
+      open
+      title={trip?.title ?? "عرض الرحلة"}
+      subtitle="رحلة مؤرشفة"
+      onClose={onClose}
+      zIndex={60}
+      size="md"
+      footer={
+        <Button type="button" variant="secondary" onClick={onClose}>
+          إغلاق
+        </Button>
+      }
+    >
+      {/* loading */}
+      {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>
+      )}
+
+      {/* error */}
+      {!loading && error && <Alert type="error" message={error} />}
+
+      {/* content */}
+      {!loading && trip && (
+        <div style={{ display: "flex", flexDirection: "column", gap: 0 }} dir="rtl">
+
+          {/* title + trip number + status row */}
+          <div style={{
+            display: "flex", flexDirection: "column", gap: 8,
+            padding: "0 0 1.25rem",
+            borderBottom: "1px solid var(--color-border)",
+            marginBottom: "0.25rem",
+          }}>
+            <p style={{ fontSize: 16, fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>{trip.title}</p>
+            <p style={{ margin: 0, fontFamily: "var(--font-mono)", fontSize: 12, color: "#2563EB", fontWeight: 600 }}>
+              {trip.tripNumber}
+            </p>
+            <StatusBadge status={trip.status} />
+          </div>
+
+          {/* driver / car / branch */}
+          <DetailRow label="السائق"  value={trip.driver?.name} />
+          <DetailRow label="السيارة" value={trip.car ? `${trip.car.manufacturer} ${trip.car.model} — ${trip.car.plateNumber}` : null} />
+          <DetailRow label="الفرع"   value={trip.branch?.name} />
+
+          {/* timing */}
+          <DetailRow label="وقت البدء"    value={fmt(trip.startTime)} />
+          <DetailRow label="وقت الانتهاء" value={fmt(trip.endTime)} />
+
+          {/* counts + cash */}
+          <DetailRow label="المجمّع"        value={String(trip.collectedCount)} />
+          <DetailRow label="المُسلَّم"      value={String(trip.deliveredCount)} />
+          <DetailRow label="المُرتجع"       value={String(trip.returnedCount)} />
+          <DetailRow label="النقد المحصّل"  value={cash(trip.totalCashCollected)} />
+
+          {/* notes */}
+          <DetailRow label="ملاحظات"    value={trip.notes} />
+          <DetailRow label="سبب الإنهاء" value={trip.endReason} />
+
+          {/* timestamps */}
+          <DetailRow label="تاريخ الإنشاء" value={fmt(trip.createdAt)} />
+          <DetailRow label="آخر تحديث"     value={fmt(trip.updatedAt)} />
+        </div>
+      )}
+    </Modal>
+  );
+}

src/Components/Trip/index.ts

@@ -1,3 +1,7 @@
 // src/Components/Trip/index.ts
 // CHANGE: removed TripDeleteModal export (Issue 1).
-export { TripFormModal } from "./Tripformmodal";
+// CHANGE: split the old single-file Trip module into TripTable.tsx /
+// TripFormModal.tsx / TripDetailModal.tsx, mirroring src/Components/User.
+export { TripTable } from "./TripTable";
+export { TripFormModal } from "./TripFormModal";
+export { TripDetailModal } from "./TripDetailModal";

src/Components/UI/ActionButtons.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+
+
+import { IconBtn } from "./IconBtn";
+import type { ActionButtonsProps } from "@/src/types/models";
+
+
+const ViewIcon = <i className="ti ti-eye" style={{ fontSize: 14 }} aria-hidden="true" />;
+
+const EditIcon = <i className="ti ti-edit" style={{ fontSize: 14 }} aria-hidden="true" />;
+
+const DeleteIcon = <i className="ti ti-trash" style={{ fontSize: 14 }} aria-hidden="true" />;
+
+export function ActionButtons({
+  onView,
+  onEdit,
+  onDelete,
+  itemLabel = "",
+  viewLabel = "View",
+  editLabel = "Edit",
+  deleteLabel = "Delete",
+}: ActionButtonsProps) {
+  const suffix = itemLabel ? ` ${itemLabel}` : "";
+
+  return (
+    <>
+      {onView && (
+        <IconBtn title={`${viewLabel}${suffix}`} color="#059669" bg="#ECFDF5" borderColor="#A7F3D0" onClick={onView}>
+          {ViewIcon}
+        </IconBtn>
+      )}
+      {onEdit && (
+        <IconBtn title={`${editLabel}${suffix}`} color="#1D4ED8" bg="#EFF6FF" borderColor="#BFDBFE" onClick={onEdit}>
+          {EditIcon}
+        </IconBtn>
+      )}
+      {onDelete && (
+        <IconBtn title={`${deleteLabel}${suffix}`} color="#DC2626" bg="#FEF2F2" borderColor="#FECACA" onClick={onDelete}>
+          {DeleteIcon}
+        </IconBtn>
+      )}
+    </>
+  );
+}

src/Components/UI/ArchiveButton.tsx

@@ -50,11 +50,7 @@ export function ArchiveButton({
       onMouseEnter={e => (e.currentTarget.style.transform = "translateY(-2px)")}
       onMouseLeave={e => (e.currentTarget.style.transform = "translateY(0)")}
     >
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-        <rect x="2" y="4" width="20" height="5" rx="1" />
-        <path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9" />
-        <path d="M10 13h4" />
-      </svg>
+      <i className="ti ti-archive" style={{ fontSize: 16 }} aria-hidden="true" />
       {label}
     </button>
   );

src/Components/UI/Header.tsx

@@ -1,3 +1,7 @@
+import { Button } from "./Button";
+import { Input } from "./Input";
+import { Select } from "./Select";
+
 export default function Header({
   state,
   search,
@@ -75,50 +79,30 @@ export default function Header({
             display: "flex",
             gap: "0.5rem",
             flexWrap: "wrap",
-            alignItems: "center",
+            alignItems: "flex-end",
           }}
         >
-          <input
+          <Input
+            label="بحث"
             type="text"
-            placeholder="بحث   "
+            placeholder="ابحث..."
             value={search}
             onChange={(e) => {
               setSearch(e.target.value);
               setPage(1);
             }}
             dir="rtl"
-            style={{
-              width: 220,
-              height: 40,
-              padding: "0 0.75rem",
-              borderRadius: "var(--radius-lg)",
-              border: "1px solid var(--color-border)",
-              background: "var(--color-surface)",
-              fontSize: 13,
-              color: "var(--color-text-primary)",
-              outline: "none",
-              fontFamily: "var(--font-sans)",
-            }}
+            className="w-[220px]"
           />
           {isAudit ? (
-            <select
+            <Select
               value={module}
               onChange={(e) => {
                 setModule(e.target.value);
                 setPage(1);
               }}
               dir="rtl"
-              style={{
-                height: 40,
-                padding: "0 0.75rem",
-                borderRadius: "var(--radius-lg)",
-                border: "1px solid var(--color-border)",
-                background: "var(--color-surface)",
-                fontSize: 13,
-                color: "var(--color-text-secondary)",
-                outline: "none",
-                fontFamily: "var(--font-sans)",
-              }}
+              className="w-[180px]"
             >
               <option value="">كل الوحدات</option>
               {[
@@ -135,42 +119,12 @@ export default function Header({
                   {m}
                 </option>
               ))}
-            </select>
+            </Select>
           ) : (
-            <button
-              type="button"
-              onClick={onAdd}
-              style={{
-                height: 40,
-                padding: "0 1.125rem",
-                borderRadius: "var(--radius-lg)",
-                border: "none",
-                background: "var(--color-brand-600)",
-                fontSize: 13,
-                fontWeight: 700,
-                color: "#FFF",
-                cursor: "pointer",
-                display: "inline-flex",
-                alignItems: "center",
-                gap: 7,
-                fontFamily: "var(--font-sans)",
-                boxShadow: "0 1px 4px rgba(37,99,235,.35)",
-                whiteSpace: "nowrap",
-              }}
-            >
-              <svg
-                width="14"
-                height="14"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2.5"
-              >
-                <line x1="12" y1="5" x2="12" y2="19" />
-                <line x1="5" y1="12" x2="19" y2="12" />
-              </svg>
+            <Button onClick={onAdd}>
+              <i className="ti ti-plus" style={{ fontSize: 14 }} aria-hidden="true" />
               إضافة {name}
-            </button>
+            </Button>
           )}
         </div>
       </div>

src/Components/UI/IconBtn.tsx

@@ -0,0 +1,22 @@
+// ── Icon button ───────────────────────────────────────────────────────────────
+// Kept custom rather than swapped for <Button/>: Button's variants only cover
+// primary/secondary/ghost/danger (one accent color each) and its size scale
+// (h-8/h-10/h-11 with horizontal padding) isn't built for a fixed 32×32
+// square icon chip. Forcing it here would misshape the button and collapse
+// the view/edit/delete green/blue/red color-coding into one variant.
+export 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>
+  );
+}

src/Components/UI/ModalProps.tsx

@@ -16,6 +16,8 @@ interface ModalProps {
   subtitle?: string;
   /** ARIA role for the dialog panel — "alertdialog" for destructive/confirm flows */
   role?: "dialog" | "alertdialog";
+  /** Stacking order — bump this for a modal nested inside another modal (default 50) */
+  zIndex?: number;
 }
 
 const MODAL_SIZES: Record<NonNullable<ModalProps["size"]>, string> = {
@@ -33,6 +35,7 @@ export function Modal({
   size = "md",
   subtitle,
   role = "dialog",
+  zIndex = 50,
 }: ModalProps) {
   // Escape key to close
   useEffect(() => {
@@ -47,7 +50,7 @@ export function Modal({
   if (!open) return null;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+    <div className="fixed inset-0 flex items-center justify-center p-4" style={{ zIndex }}>
       {/* Backdrop */}
       <div
         className="absolute inset-0 bg-[var(--color-slate-900)]/50 backdrop-blur-sm"

src/Components/UI/ModelCard.tsx

@@ -0,0 +1,57 @@
+// src/Components/UI/ModelCard.tsx
+//
+// Optional thin wrapper matching the "card with a title row above a table"
+// shape used e.g. around ArchivedTripList's header, OrderComponent's
+// header, and the various archive modals (count + search + table).
+// It intentionally does NOT duplicate Header.tsx (the full page-level
+// title/search/add-button bar already used on every dashboard page) —
+// it's a lighter-weight wrapper for cases where you just need a labeled
+// card around a <ReusableTable/>, e.g. inside a modal or detail panel.
+//
+// Usage:
+//   <ModelCard title="Orders" count={total} countLabel="orders" action={<SearchBox />}>
+//     <ReusableTable columns={columns} data={orders} ... />
+//   </ModelCard>
+
+import type { ModelCardProps } from "@/src/types/models";
+
+export function ModelCard({ title, count, countLabel, action, children }: ModelCardProps) {
+  const hasHeader = title || count !== undefined || action;
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
+      {hasHeader && (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: "0.75rem",
+            flexWrap: "wrap",
+          }}
+        >
+          {(title || count !== undefined) && (
+            <h2 style={{ fontSize: 16, fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>
+              {title}
+              {count !== undefined && (
+                <span
+                  style={{
+                    marginInlineStart: 8,
+                    fontSize: 13,
+                    fontWeight: 500,
+                    color: "var(--color-text-muted)",
+                  }}
+                >
+                  ({count}{countLabel ? ` ${countLabel}` : ""})
+                </span>
+              )}
+            </h2>
+          )}
+          {action && <div style={{ flexShrink: 0 }}>{action}</div>}
+        </div>
+      )}
+
+      {children}
+    </div>
+  );
+}

src/Components/UI/ReusableTable.tsx

@@ -0,0 +1,273 @@
+"use client";
+
+// src/Components/UI/ReusableTable.tsx
+//
+// ============================================================================
+// HOW TO USE
+// ============================================================================
+// ReusableTable replaces the hand-written <table>/<ul><li> markup that is
+// currently duplicated across UserTable.tsx, BranchTable.tsx, RoleTable.tsx,
+// TripTable.tsx, OrderTable.tsx, ArchivedDriverTable.tsx, etc. Those files
+// all share the exact same shape: a grid header row, a loading spinner, an
+// empty state, data rows built from `gridTemplateColumns`, and a two-button
+// pager — only the column definitions and cell content differ per model.
+//
+//   import { ReusableTable, ActionButtons } from "@/src/Components/UI";
+//   import type { TableColumn } from "@/src/types/models";
+//   import type { User } from "@/src/types/user";
+//
+//   const columns: TableColumn<User>[] = [
+//     {
+//       key: "name",
+//       header: "Name",
+//       width: "2fr",
+//       render: (u) => (
+//         <div>
+//           <p style={{ fontWeight: 600 }}>{u.name}</p>
+//           <p style={{ fontSize: 11, color: "var(--color-text-muted)" }}>{u.phone}</p>
+//         </div>
+//       ),
+//     },
+//     { key: "role", header: "Role", width: "1fr", render: (u) => u.role?.name ?? "—" },
+//   ];
+//
+//   <ReusableTable
+//     columns={columns}
+//     data={users}
+//     loading={loading}
+//     search={search}
+//     page={page}
+//     pages={pages}
+//     onPageChange={setPage}
+//     onRowClick={(u) => setViewUserId(u.id)}
+//     renderActions={(u) => (
+//       <ActionButtons
+//         itemLabel={u.name}
+//         onView={() => setViewUserId(u.id)}
+//         onEdit={() => setFormTarget(u)}
+//         onDelete={() => setDeleteTarget(u)}
+//       />
+//     )}
+//   />
+//
+// This produces byte-for-byte the same visual result as the existing
+// UserTable — same cardStyle border/radius/shadow, same thStyle header
+// treatment, same zebra-striped rows, same "السابق/التالي"-style pager
+// (labels are passed as plain strings, so RTL/Arabic labels work exactly
+// as before — nothing about the language is hardcoded here).
+//
+// NOTE ON STYLING: most tables in this codebase (User/Branch/Role/Trip/
+// Order/Driver-archive) use inline `React.CSSProperties` objects with CSS
+// custom properties (`var(--color-border)`, etc). A smaller set of newer
+// files (ArchivedTripTable, ClientTable's expandable rows) use Tailwind
+// utility classes against the same tokens instead. This component follows
+// the majority inline-style pattern so it's a drop-in replacement for the
+// most common case; the two Tailwind-based tables would need a follow-up
+// pass to fully consolidate (flagged here rather than silently converted,
+// since swapping their styling approach is a separate, riskier change).
+// ============================================================================
+
+import { useState } from "react";
+import { Button } from "./Button";
+import { EmptyState } from "./EmptyState";
+import { Spinner } from "./Spinner";
+import type { CrudTableProps, BaseEntity } from "@/src/types/models";
+
+// ── Shared styles — identical values to UserTable.tsx / BranchTable.tsx /
+//    RoleTable.tsx / TripTable.tsx / OrderTable.tsx ──────────────────────────
+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)",
+};
+
+export function ReusableTable<T extends BaseEntity>({
+  columns,
+  data,
+  loading = false,
+  keyExtractor = (item: T) => item.id,
+  onRowClick,
+  search,
+  emptyIcon = "📋",
+  emptyTitle,
+  emptyDescription,
+  emptyAction,
+  page,
+  pages,
+  onPageChange,
+  renderActions,
+  actionsHeader = "إجراءات",
+  actionsWidth = "100px",
+  renderExpanded,
+}: CrudTableProps<T>) {
+  const [expandedKey, setExpandedKey] = useState<string | null>(null);
+
+  const gridTemplateColumns = [
+    ...columns.map((c) => c.width ?? "1fr"),
+    ...(renderActions ? [actionsWidth] : []),
+  ].join(" ");
+
+  const resolvedEmptyTitle =
+    emptyTitle ?? (search ? `No results for "${search}"` : "No records to display.");
+
+  return (
+    <div style={cardStyle}>
+      {/* ── Column headers ── */}
+      <div style={{ display: "grid", gridTemplateColumns, ...thStyle }}>
+        {columns.map((c) => (
+          <span key={c.key} style={{ textAlign: c.align }}>
+            {c.header}
+          </span>
+        ))}
+        {renderActions && (
+          <span style={{ textAlign: "center" }}>{actionsHeader}</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 }}>Loading…</span>
+        </div>
+      ) : data.length === 0 ? (
+        /* ── Empty state ── */
+        <EmptyState
+          icon={emptyIcon}
+          title={resolvedEmptyTitle}
+          description={emptyDescription}
+          action={emptyAction}
+        />
+      ) : (
+        /* ── Data rows ── */
+        <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
+          {data.map((item, i) => {
+            const key = keyExtractor(item);
+            const isExpanded = !!renderExpanded && expandedKey === key;
+            const handleRowClick = renderExpanded
+              ? () => setExpandedKey((prev) => (prev === key ? null : key))
+              : onRowClick
+              ? () => onRowClick(item)
+              : undefined;
+
+            return (
+              <li key={key}>
+                <div
+                  onClick={handleRowClick}
+                  role={renderExpanded ? "button" : undefined}
+                  tabIndex={renderExpanded ? 0 : undefined}
+                  aria-expanded={renderExpanded ? isExpanded : undefined}
+                  onKeyDown={
+                    renderExpanded
+                      ? (e) => {
+                          if (e.key === "Enter" || e.key === " ") handleRowClick?.();
+                        }
+                      : undefined
+                  }
+                  style={{
+                    display: "grid",
+                    gridTemplateColumns,
+                    alignItems: "center",
+                    gap: "0.5rem",
+                    padding: "0.875rem 1.5rem",
+                    borderBottom: isExpanded ? "none" : "1px solid var(--color-border)",
+                    borderInlineStart: renderExpanded
+                      ? isExpanded
+                        ? "3px solid var(--color-brand-600)"
+                        : "3px solid transparent"
+                      : undefined,
+                    background: isExpanded
+                      ? "#EFF6FF"
+                      : i % 2 !== 0
+                      ? "var(--color-surface-muted)"
+                      : "transparent",
+                    fontSize: 13,
+                    cursor: handleRowClick ? "pointer" : "default",
+                    transition: "background 0.15s, border-color 0.15s",
+                    outline: "none",
+                  }}
+                >
+                  {columns.map((c) => (
+                    <div key={c.key} style={{ textAlign: c.align }}>
+                      {c.render(item, i, isExpanded)}
+                    </div>
+                  ))}
+                  {renderActions && (
+                    <div
+                      style={{ display: "flex", justifyContent: "center", gap: 4 }}
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      {renderActions(item, i)}
+                    </div>
+                  )}
+                </div>
+
+                {isExpanded && renderExpanded && renderExpanded(item, i)}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+
+      {/* ── Pagination ── */}
+      {pages !== undefined && pages > 1 && page !== undefined && onPageChange && (
+        <div
+          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)" }}>
+            Page <strong style={{ color: "var(--color-text-primary)" }}>{page}</strong> of{" "}
+            <strong style={{ color: "var(--color-text-primary)" }}>{pages}</strong>
+          </span>
+          <div style={{ display: "flex", gap: "0.5rem" }}>
+            <Button
+              type="button"
+              variant="secondary"
+              size="sm"
+              onClick={() => onPageChange(Math.max(1, page - 1))}
+              disabled={page === 1}
+            >
+              السابق
+            </Button>
+            <Button
+              type="button"
+              variant="secondary"
+              size="sm"
+              onClick={() => onPageChange(Math.min(pages, page + 1))}
+              disabled={page === pages}
+            >
+              التالي
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/Components/UI/Spinner.tsx

@@ -7,10 +7,11 @@ export interface SpinnerProps {
   className?: string;
 }
 
+// Font size (px) for each spinner size — replaces the old h-*/w-* SVG classes.
 const sizeMap: Record<NonNullable<SpinnerProps["size"]>, string> = {
-  sm: "h-4 w-4",
-  md: "h-6 w-6",
-  lg: "h-10 w-10 border-4",
+  sm: "16px",
+  md: "24px",
+  lg: "40px",
 };
 
 /**
@@ -26,32 +27,15 @@ const sizeMap: Record<NonNullable<SpinnerProps["size"]>, string> = {
  */
 export function Spinner({ size = "md", className }: SpinnerProps) {
   return (
-    <svg
+    <i
       role="status"
       aria-label="Loading"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
       className={cn(
-        "motion-safe:animate-spin text-[var(--color-brand-600)] shrink-0",
-        sizeMap[size],
+        "ti ti-loader-2 motion-safe:animate-spin text-[var(--color-brand-600)] shrink-0",
         className,
       )}
-    >
-      <circle
-        className="opacity-25"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        strokeWidth="4"
+      style={{ fontSize: sizeMap[size], lineHeight: 1 }}
     />
-      <path
-        className="opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8v8H4z"
-      />
-    </svg>
   );
 }
 

src/Components/UI/index.ts

@@ -25,3 +25,7 @@ export { Badge } from "./Badge";
 
 export { ArchiveButton } from "./ArchiveButton"
 export { FileInput } from "./FailInput"
+export {IconBtn} from "./IconBtn"
+export { ReusableTable } from "./ReusableTable";
+export { ActionButtons } from "./ActionButtons";
+export { ModelCard } from "./ModelCard";

src/Components/User/DeleteConfirmModal.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useEffect } from "react";
+import { Spinner } from "../UI";
+import type { User } from "@/src/types/user";
+
+interface DeleteConfirmModalProps {
+  user:      User;
+  deleting:  boolean;
+  onCancel:  () => void;
+  onConfirm: () => void;
+}
+
+export function DeleteConfirmModal({ user, deleting, onCancel, onConfirm }: DeleteConfirmModalProps) {
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => { if (e.key === "Escape") onCancel(); };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onCancel]);
+
+  return (
+    <div
+      role="alertdialog" aria-modal="true" aria-labelledby="del-title"
+      onClick={e => { if (e.target === e.currentTarget) onCancel(); }}
+      style={{ position: "fixed", inset: 0, zIndex: 60, 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: 400, background: "var(--color-surface)", borderRadius: "var(--radius-xl)", border: "1px solid #FECACA", boxShadow: "0 20px 48px rgba(0,0,0,.18)", padding: "2rem", display: "flex", flexDirection: "column", gap: "1rem", textAlign: "center" }}
+      >
+        {/*  icon delete */}
+        <div style={{ width: 52, height: 52, margin: "0 auto", borderRadius: "50%", background: "#FEF2F2", border: "1px solid #FECACA", display: "flex", alignItems: "center", justifyContent: "center" }}>
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#DC2626" strokeWidth="2">
+            <polyline points="3 6 5 6 21 6" /><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+            <path d="M10 11v6M14 11v6" /><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
+          </svg>
+        </div>
+        <div>
+          <h2 id="del-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>حذف المستخدم</h2>
+          <p style={{ marginTop: 8, fontSize: 13, color: "var(--color-text-muted)", lineHeight: 1.6 }}>
+            هل أنت متأكد من حذف <strong style={{ color: "var(--color-text-primary)" }}>{user.name}</strong>؟ لا يمكن التراجع عن هذا الإجراء.
+          </p>
+        </div>
+        <div style={{ display: "flex", gap: "0.5rem" }}>
+          <button type="button" onClick={onCancel} disabled={deleting}
+            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: deleting ? "not-allowed" : "pointer", fontFamily: "var(--font-sans)" }}>
+            إلغاء
+          </button>
+          <button type="button" onClick={onConfirm} disabled={deleting}
+            style={{ flex: 1, height: 40, borderRadius: "var(--radius-md)", border: "none", background: "#DC2626", fontSize: 13, fontWeight: 700, color: "#FFF", cursor: deleting ? "not-allowed" : "pointer", display: "flex", alignItems: "center", justifyContent: "center", gap: 8, fontFamily: "var(--font-sans)", opacity: deleting ? 0.7 : 1 }}>
+            {deleting && <Spinner size="sm" className="text-white" />}
+            {deleting ? "جارٍ الحذف…" : "تأكيد الحذف"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/Components/User/Toast.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { Notification } from "@/src/hooks/useUser";
+
+interface ToastProps {
+  notification: Notification | null;
+}
+
+export function Toast({ notification }: ToastProps) {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    if (notification) {
+      setVisible(true);
+    } else {
+      // dismiss after 250ms to allow exit animation
+      const t = setTimeout(() => setVisible(false), 300);
+      return () => clearTimeout(t);
+    }
+  }, [notification]);
+
+  if (!visible && !notification) return null;
+
+  const isSuccess = notification?.type === "success";
+
+  return (
+    <div
+      role="status" aria-live="polite" aria-atomic="true"
+      style={{
+        position: "fixed", bottom: 24, left: "50%",
+        transform: `translateX(-50%) translateY(${notification ? "0" : "16px"})`,
+        zIndex: 9999,
+        transition: "transform 250ms ease, opacity 250ms ease",
+        opacity: notification ? 1 : 0,
+        pointerEvents: "none",
+      }}
+    >
+      <div style={{
+        display: "flex", alignItems: "center", gap: 10,
+        padding: "0.75rem 1.25rem",
+        borderRadius: "var(--radius-full)",
+        background: isSuccess ? "#065F46" : "#7F1D1D",
+        color: "#FFFFFF",
+        fontSize: 13, fontWeight: 600,
+        boxShadow: "0 8px 32px rgba(0,0,0,0.25)",
+        maxWidth: "90vw", whiteSpace: "nowrap",
+        fontFamily: "var(--font-sans)",
+      }}>
+        {/* icon */}
+        <span style={{ fontSize: 16 }}>{isSuccess ? "✓" : "⚠"}</span>
+        <span>{notification?.message}</span>
+      </div>
+    </div>
+  );
+}

src/Components/User/UserFormModal.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import type { Resolver } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
@@ -29,13 +30,19 @@ export function UserFormModal({ editUser, roles, branches, onClose, onSubmit }:
   const resolver: Resolver<UserFormData> = async (values, context, options) => {
     const schema = isNew ? createUserSchema : updateUserSchema;
     const data = !isNew && !values.password ? { ...values, password: undefined } : values;
-    return yupResolver<UserFormData>(schema as any)(data as UserFormData, context, options);
+    // Cast both the schema argument and yupResolver's own return value — same
+    // fix already applied in TripFormModal/DriverFormModal/CarFormModal:
+    // passing an explicit <UserFormData> generic here forces a structural
+    // comparison between yup's inferred optional-field shape and
+    // UserFormData that fails the same way it did for those forms.
+    return (yupResolver(schema as any) as any)(data as UserFormData, context, options);
   };
 
   const {
     register,
     handleSubmit,
     setError,
+    setValue,
     formState: { errors, isSubmitting },
   } = useForm<UserFormData>({
     resolver,
@@ -49,6 +56,26 @@ export function UserFormModal({ editUser, roles, branches, onClose, onSubmit }:
     },
   });
 
+  // roles/branches are passed in as props rather than fetched inside this
+  // modal (unlike Trip/Driver/Car), but the same timing issue applies if the
+  // parent still has them loading when the modal first mounts: defaultValues
+  // are applied before the matching <option> exists, so the <select>
+  // silently falls back to "". Reapply the saved id once each list actually
+  // contains it.
+  useEffect(() => {
+    const savedRoleId = editUser?.role?.id;
+    if (savedRoleId && roles.some(r => r.id === savedRoleId)) {
+      setValue("roleId", savedRoleId);
+    }
+  }, [roles, editUser, setValue]);
+
+  useEffect(() => {
+    const savedBranchId = editUser?.branch?.id;
+    if (savedBranchId && branches.some(b => b.id === savedBranchId)) {
+      setValue("branchId", savedBranchId);
+    }
+  }, [branches, editUser, setValue]);
+
   const submitHandler = async (data: UserFormData) => {
     const payload: Partial<UserFormData> = { ...data };
     if (!isNew && !payload.password) delete payload.password;

src/Components/User/UserTable.tsx

@@ -1,48 +1,31 @@
 "use client";
 
-import { Badge, Button, EmptyState, Spinner } from "../UI";
+import { Badge, ReusableTable, ActionButtons, Button } from "@/src/Components/UI";
+import type { TableColumn } from "@/src/types/models";
 import type { User } from "@/src/types/user";
 
-// ── status badge ─────────────────────────────────────────────────────────────
-// Kept custom rather than swapped for <Badge/>: Badge only renders a label
-// pill (no dot indicator), and the pulse-dot is the whole point of this chip.
 function StatusBadge({ active }: { active: boolean }) {
   return (
-    <span style={{ display: "inline-flex", alignItems: "center", gap: 5, borderRadius: "var(--radius-full)", border: active ? "1px solid #BBF7D0" : "1px solid #FECACA", background: active ? "#DCFCE7" : "#FEF2F2", padding: "0.2rem 0.625rem", fontSize: 11, fontWeight: 600, color: active ? "#166534" : "#991B1B" }}>
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 5,
+        borderRadius: "var(--radius-full)",
+        border: active ? "1px solid #BBF7D0" : "1px solid #FECACA",
+        background: active ? "#DCFCE7" : "#FEF2F2",
+        padding: "0.2rem 0.625rem",
+        fontSize: 11,
+        fontWeight: 600,
+        color: active ? "#166534" : "#991B1B",
+      }}
+    >
       <span style={{ width: 6, height: 6, borderRadius: "50%", background: active ? "#16A34A" : "#DC2626" }} />
-      {active ? "نشط" : "معطل"}
+      {active ? "Active" : "Disabled"}
     </span>
   );
 }
 
-// ── icon button ──────────────────────────────────────────────────────────────
-// Kept custom rather than swapped for <Button/>: Button's variants only cover
-// primary/secondary/ghost/danger (one accent color each) and its size scale
-// (h-8/h-10/h-11 with horizontal padding) isn't built for a fixed 32×32
-// square icon chip. Forcing it here would collapse the view/edit/delete
-// green/blue/red color-coding into a single variant and misshape the 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>
-  );
-}
-
-// ── 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)",
-};
-
-// ── Props ────────────────────────────────────────────────────────────────────
 interface UserTableProps {
   users: User[];
   loading: boolean;
@@ -56,118 +39,77 @@ interface UserTableProps {
   onPageChange: (p: number) => void;
 }
 
-// ── main table ───────────────────────────────────────────────────────────────
-export function UserTable({ users, loading, search, page, pages, onEdit, onDelete, onView, onAddFirst, onPageChange }: UserTableProps) {
-  return (
-    <div style={cardStyle}>
-      {/* column headers */}
-      <div dir="rtl" style={{ display: "grid", gridTemplateColumns: "2fr 1.5fr 1.5fr 1fr 1fr 1fr 100px", ...thStyle }}>
-        <span>الاسم</span>
-        <span>اسم المستخدم</span>
-        <span>الفرع</span>
-        <span>الدور</span>
-        <span>الحالة</span>
-        <span style={{ textAlign: "center" }}>تاريخ الإنشاء</span>
-        <span style={{ textAlign: "center" }}>إجراءات</span>
+export function UserTable({
+  users, loading, search, page, pages,
+  onEdit, onDelete, onView, onAddFirst, onPageChange,
+}: UserTableProps) {
+  const columns: TableColumn<User>[] = [
+    {
+      key: "name",
+      header: "الاسم",
+      width: "2fr",
+      render: (u) => (
+        <div>
+          <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>{u.name}</p>
+          <p style={{ marginTop: 2, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--color-text-muted)" }}>
+            {u.phone}
+          </p>
         </div>
+      ),
+    },
+    {
+      key: "userName",
+      header: "اسم المستخدم",
+      width: "1.5fr",
+      render: (u) => (
+        <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "#2563EB", fontWeight: 600 }}>
+          {u.userName ?? "—"}
+        </span>
+      ),
+    },
+    { key: "branch", header: "الفرع", width: "1.5fr", render: (u) => u.branch?.name ?? "—" },
+    {
+      key: "role",
+      header: "الدور",
+      width: "1fr",
+      render: (u) => <Badge label={u.role?.name ?? "—"} color={u.role?.name === "System Admin" ? "indigo" : "slate"} />,
+    },
+    { key: "status", header: "الحالة", width: "1fr", render: (u) => <StatusBadge active={u.isActive} /> },
+    {
+      key: "createdAt",
+      header: "تم الانشاء",
+      width: "1fr",
+      align: "center",
+      render: (u) => new Date(u.createdAt).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" }),
+    },
+  ];
 
-      {/* 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>
-      ) : users.length === 0 ? (
-        /* empty state */
-        <EmptyState
-          icon="👥"
-          title={search ? `لا توجد نتائج لـ "${search}"` : "لا يوجد مستخدمون لعرضهم."}
-          action={
+  return (
+    <ReusableTable
+      columns={columns}
+      data={users}
+      loading={loading}
+      search={search}
+      page={page}
+      pages={pages}
+      onPageChange={onPageChange}
+      emptyIcon="👥"
+      emptyDescription={!search ? "No users to display." : undefined}
+      emptyAction={
         !search && (
           <Button type="button" variant="ghost" size="sm" onClick={onAddFirst}>
-                أضف أول مستخدم
+            Add first user
           </Button>
         )
       }
+      renderActions={(u) => (
+        <ActionButtons
+          itemLabel={u.name}
+          onView={() => onView(u)}
+          onEdit={() => onEdit(u)}
+          onDelete={() => onDelete(u)}
         />
-      ) : (
-        /* data rows */
-        <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
-          {users.map((u, i) => (
-            <li key={u.id} style={{
-              display: "grid", gridTemplateColumns: "2fr 1.5fr 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 }}>{u.name}</p>
-                <p style={{ marginTop: 2, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--color-text-muted)" }}>{u.phone}</p>
-              </div>
-              <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "#2563EB", fontWeight: 600 }}>{u.userName ?? "—"}</span>
-              <span style={{ color: "var(--color-text-secondary)" }}>{u.branch?.name ?? "—"}</span>
-              <Badge label={u.role?.name ?? "—"} color={u.role?.name === "مدير النظام" ? "indigo" : "slate"} />
-              <StatusBadge active={u.isActive} />
-              <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
-                {new Date(u.createdAt).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" })}
-              </span>
-              <div style={{ display: "flex", justifyContent: "center", gap: 4 }}>
-                {/* view */}
-                <IconBtn title={`عرض ${u.name}`} color="#059669" bg="#ECFDF5" borderColor="#A7F3D0" onClick={() => onView(u)}>
-                  <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>
-                {/* edit */}
-                <IconBtn title={`تعديل ${u.name}`} color="#1D4ED8" bg="#EFF6FF" borderColor="#BFDBFE" onClick={() => onEdit(u)}>
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                    <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>
-                </IconBtn>
-                {/* delete */}
-                <IconBtn title={`حذف ${u.name}`} color="#DC2626" bg="#FEF2F2" borderColor="#FECACA" onClick={() => onDelete(u)}>
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                    <polyline points="3 6 5 6 21 6" /><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
-                    <path d="M10 11v6M14 11v6" /><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
-                  </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" }}>
-            <Button
-              type="button"
-              variant="secondary"
-              size="sm"
-              onClick={() => onPageChange(Math.max(1, page - 1))}
-              disabled={page === 1}
-            >
-              السابق
-            </Button>
-            <Button
-              type="button"
-              variant="secondary"
-              size="sm"
-              onClick={() => onPageChange(Math.min(pages, page + 1))}
-              disabled={page === pages}
-            >
-              التالي
-            </Button>
-          </div>
-        </div>
-      )}
-    </div>
+    />
   );
 }

src/Components/User/archive/Archiveduserdetailmodal.tsx

@@ -102,6 +102,7 @@ export function ArchivedUserDetailModal({ userId, onClose }: ArchivedUserDetailM
       subtitle="مستخدم مؤرشف"
       onClose={onClose}
       size="md"
+      zIndex={60}
       footer={
         <Button type="button" variant="secondary" onClick={onClose}>
           إغلاق

src/Components/User/archive/Archivedusersmodal.tsx

@@ -11,18 +11,7 @@ interface ArchivedUsersModalProps {
 }
 
 const searchIcon = (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    aria-hidden="true"
-  >
-    <circle cx="11" cy="11" r="8" />
-    <path d="m21 21-4.35-4.35" />
-  </svg>
+  <i className="ti ti-search" style={{ fontSize: 16 }} aria-hidden="true" />
 );
 
 export function ArchivedUsersModal({ onClose }: ArchivedUsersModalProps) {

src/Components/User/archive/Archivedusertable.tsx

@@ -1,48 +1,19 @@
 "use client";
 
-import { Button, EmptyState, Spinner } from "../../UI";
+
+import { ReusableTable, ActionButtons } from "../../UI";
+import type { TableColumn } from "@/src/types/models";
 import type { ArchivedUser } from "@/src/types/user";
 
-// ── status badge ─────────────────────────────────────────────────────────────
-// Kept custom rather than swapped for <Badge/>: Badge only renders a label
-// pill (no dot indicator), and the pulse-dot is the whole point of this chip.
 function StatusBadge({ active }: { active: boolean }) {
   return (
     <span style={{ display: "inline-flex", alignItems: "center", gap: 5, borderRadius: "var(--radius-full)", border: active ? "1px solid #BBF7D0" : "1px solid #FECACA", background: active ? "#DCFCE7" : "#FEF2F2", padding: "0.2rem 0.625rem", fontSize: 11, fontWeight: 600, color: active ? "#166534" : "#991B1B" }}>
       <span style={{ width: 6, height: 6, borderRadius: "50%", background: active ? "#16A34A" : "#DC2626" }} />
-      {active ? "نشط" : "معطل"}
+      {active ? "Active" : "Disabled"}
     </span>
   );
 }
 
-// ── icon button ──────────────────────────────────────────────────────────────
-// Kept custom rather than swapped for <Button/>: Button's variants only cover
-// primary/secondary/ghost/danger (one accent color each) and its size scale
-// (h-8/h-10/h-11 with horizontal padding) isn't built for a fixed 32×32
-// square icon chip. Forcing it here would misshape the button and drop the
-// semantic green "view" color.
-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>
-  );
-}
-
-// ── 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)",
-};
-
-// ── Props ────────────────────────────────────────────────────────────────────
 interface ArchivedUserTableProps {
   users: ArchivedUser[];
   loading: boolean;
@@ -53,97 +24,56 @@ interface ArchivedUserTableProps {
   onPageChange: (p: number) => void;
 }
 
-// ── main table ───────────────────────────────────────────────────────────────
 export function ArchivedUserTable({ users, loading, search, page, pages, onView, onPageChange }: ArchivedUserTableProps) {
-  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 style={{ textAlign: "center" }}>تاريخ الإنشاء</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>
-      ) : users.length === 0 ? (
-        /* empty state */
-        <EmptyState
-          icon="🗄️"
-          title={search ? `لا توجد نتائج لـ "${search}"` : "لا يوجد مستخدمون في الأرشيف."}
-        />
-      ) : (
-        /* data rows */
-        <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
-          {users.map((u, i) => (
-            <li key={u.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,
-            }}>
+  const columns: TableColumn<ArchivedUser>[] = [
+    {
+      key: "name",
+      header: "الاسم",
+      width: "2fr",
+      render: (u) => (
         <div>
           <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>{u.name}</p>
           <p style={{ marginTop: 2, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--color-text-muted)" }}>{u.phone}</p>
         </div>
+      ),
+    },
+    {
+      key: "userName",
+      header: "الاسم المستخدم",
+      width: "1.5fr",
+      render: (u) => (
         <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "#2563EB", fontWeight: 600 }}>{u.userName ?? "—"}</span>
-              <StatusBadge active={u.isActive} />
-              <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
-                {new Date(u.createdAt).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" })}
-              </span>
-              <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
-                {new Date(u.updatedAt).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" })}
-              </span>
-              <div style={{ display: "flex", justifyContent: "center", gap: 4 }}>
-                {/* view only — delete/restore not implemented yet */}
-                <IconBtn title={`عرض ${u.name}`} color="#059669" bg="#ECFDF5" borderColor="#A7F3D0" onClick={() => onView(u)}>
-                  <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>
-      )}
+      ),
+    },
+    { key: "status", header: "الحالة", width: "1fr", render: (u) => <StatusBadge active={u.isActive} /> },
+    {
+      key: "createdAt",
+      header: "تاريخ الانشاء",
+      width: "1fr",
+      align: "center",
+      render: (u) => new Date(u.createdAt).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" }),
+    },
+    {
+      key: "updatedAt",
+      header: "تاريخ التعديل",
+      width: "1fr",
+      align: "center",
+      render: (u) => new Date(u.updatedAt).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" }),
+    }
+  ];
 
-      {/* 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" }}>
-            <Button
-              type="button"
-              variant="secondary"
-              size="sm"
-              onClick={() => onPageChange(Math.max(1, page - 1))}
-              disabled={page === 1}
-            >
-              السابق
-            </Button>
-            <Button
-              type="button"
-              variant="secondary"
-              size="sm"
-              onClick={() => onPageChange(Math.min(pages, page + 1))}
-              disabled={page === pages}
-            >
-              التالي
-            </Button>
-          </div>
-        </div>
-      )}
-    </div>
+  return (
+    <ReusableTable
+      columns={columns}
+      data={users}
+      loading={loading}
+      search={search}
+      page={page}
+      pages={pages}
+      onPageChange={onPageChange}
+      emptyIcon="🗄️"
+      emptyDescription={search ? `No results for "${search}"` : "No archived users."}
+      renderActions={(u) => <ActionButtons itemLabel={u.name} onView={() => onView(u)} />}
+    />
   );
 }

src/Components/audit/AuditDetailsModel.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+
+
+import { AuditLog } from "@/src/types/audit";
+import { Button, Modal } from "../UI";
+import { ActionBadge } from "./AuditTable";
+
+interface AuditDetailModalProps {
+  log: AuditLog;
+  onClose: () => void;
+}
+
+// ── small helper components ───────────────────────────────────────────────
+// (Same rationale as UserDetailModal's: purpose-built layouts, not generic
+// form/action controls, so they stay custom rather than pulled from the
+// shared UI kit.)
+
+function DetailRow({ label, value, mono }: { label: string; value?: string | null; mono?: boolean }) {
+  return (
+    <div style={{
+      display: "flex", flexDirection: "column", gap: 4,
+      padding: "0.75rem 0",
+      borderBottom: "1px solid var(--color-border)",
+    }}>
+      <span style={{ fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.15em", color: "var(--color-text-muted)" }}>
+        {label}
+      </span>
+      <span style={{
+        fontSize: 13, fontWeight: 500,
+        fontFamily: mono ? "var(--font-mono)" : undefined,
+        color: value ? "var(--color-text-primary)" : "var(--color-text-hint)",
+        wordBreak: "break-word",
+      }}>
+        {value || "—"}
+      </span>
+    </div>
+  );
+}
+
+// Stands in for UserDetailModal's <Avatar/> — a log entry has no photo, so
+// this is a colored icon circle instead of initials.
+function ActionIcon() {
+  return (
+    <div style={{
+      width: 64, height: 64, borderRadius: "50%",
+      background: "linear-gradient(135deg, #2563EB 0%, #7C3AED 100%)",
+      display: "flex", alignItems: "center", justifyContent: "center",
+      flexShrink: 0,
+      boxShadow: "0 4px 12px rgba(37,99,235,.3)",
+    }}>
+      <i className="ti ti-clipboard-check" style={{ fontSize: 26, color: "#FFF" }} aria-hidden="true" />
+    </div>
+  );
+}
+
+function MetadataBlock({ metadata }: { metadata: Record<string, unknown> }) {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 4, padding: "0.75rem 0" }}>
+      <span style={{ fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.15em", color: "var(--color-text-muted)" }}>
+        بيانات إضافية
+      </span>
+      <pre style={{
+        margin: 0,
+        padding: "0.75rem",
+        borderRadius: "var(--radius-md)",
+        background: "var(--color-surface-muted)",
+        border: "1px solid var(--color-border)",
+        fontFamily: "var(--font-mono)",
+        fontSize: 11,
+        color: "var(--color-text-secondary)",
+        whiteSpace: "pre-wrap",
+        wordBreak: "break-word",
+        direction: "ltr",
+        textAlign: "left",
+      }}>
+        {JSON.stringify(metadata, null, 2)}
+      </pre>
+    </div>
+  );
+}
+
+// ── main component ──────────────────────────────────────────────────────
+export function AuditDetailModal({ log, onClose }: AuditDetailModalProps) {
+  const fmt = (iso?: string | null) =>
+    iso ? new Date(iso).toLocaleString("ar-SA", { dateStyle: "long", timeStyle: "medium" }) : null;
+
+  return (
+    <Modal
+      open
+      title="تفاصيل السجل"
+      subtitle="سجل التدقيق"
+      onClose={onClose}
+      size="md"
+      footer={
+        <Button type="button" variant="secondary" onClick={onClose}>
+          إغلاق
+        </Button>
+      }
+    >
+      <div style={{ display: "flex", flexDirection: "column", gap: 0 }} dir="rtl">
+
+        {/* icon + action + timestamp row */}
+        <div style={{
+          display: "flex", alignItems: "center", gap: "1rem",
+          padding: "0 0 1.25rem",
+          borderBottom: "1px solid var(--color-border)",
+          marginBottom: "0.25rem",
+        }}>
+          <ActionIcon />
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <p style={{ fontSize: 16, fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>
+              {log.module ?? "سجل تدقيق"}
+            </p>
+            <p style={{ marginTop: 3, fontSize: 12, color: "var(--color-text-muted)" }}>
+              {fmt(log.createdAt)}
+            </p>
+            <div style={{ marginTop: 8 }}>
+              <ActionBadge action={log.action} />
+            </div>
+          </div>
+        </div>
+
+        {/* detail rows */}
+        <DetailRow label="المعرّف"        value={log.entityId} mono />
+        <DetailRow label="المستخدم"       value={log.userName ?? log.userId} />
+        <DetailRow label="عنوان IP"       value={log.ipAddress} mono />
+        <DetailRow label="متصفح المستخدم" value={log.userAgent} mono />
+
+        {log.metadata && Object.keys(log.metadata).length > 0 && (
+          <MetadataBlock metadata={log.metadata} />
+        )}
+      </div>
+    </Modal>
+  );
+}

src/Components/audit/AuditTable.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+
+import { ReusableTable } from "../UI";
+import type { TableColumn } from "@/src/types/models";
+import type { AuditLog } from "@/src/types/audit";
+
+// ── Action badge — moved verbatim from app/dashboard/audit/page.tsx ─────────
+
+const ACTION_COLORS: Record<
+  string,
+  { bg: string; color: string; border: string }
+> = {
+  CREATE: { bg: "#DCFCE7", color: "#166534", border: "#BBF7D0" },
+  UPDATE: { bg: "#EFF6FF", color: "#1D4ED8", border: "#BFDBFE" },
+  DELETE: { bg: "#FEF2F2", color: "#DC2626", border: "#FECACA" },
+  LOGIN: { bg: "#F5F3FF", color: "#5B21B6", border: "#DDD6FE" },
+  LOGOUT: { bg: "#F1F5F9", color: "#475569", border: "#E2E8F0" },
+};
+
+// Exported (not just used locally) so AuditDetailModal can render the same
+// badge in its header instead of re-implementing the color mapping.
+export function ActionBadge({ action }: { action: string }) {
+  const upper = action?.toUpperCase() ?? "";
+  const key =
+    Object.keys(ACTION_COLORS).find((k) => upper.includes(k)) ?? "CREATE";
+  const cfg = ACTION_COLORS[key];
+  return (
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        borderRadius: "var(--radius-full)",
+        border: `1px solid ${cfg.border}`,
+        background: cfg.bg,
+        padding: "0.2rem 0.625rem",
+        fontSize: 11,
+        fontWeight: 700,
+        color: cfg.color,
+        whiteSpace: "nowrap",
+      }}
+    >
+      {action}
+    </span>
+  );
+}
+
+function fmtDateTime(iso: string): string {
+  return new Date(iso).toLocaleString("ar-SA", {
+    dateStyle: "short",
+    timeStyle: "short",
+  });
+}
+
+interface AuditTableProps {
+  logs: AuditLog[];
+  loading: boolean;
+  search: string;
+  page: number;
+  pages: number;
+  onPageChange: (p: number) => void;
+  onRowClick: (log: AuditLog) => void;
+}
+
+export function AuditTable({
+  logs, loading, search, page, pages,
+  onPageChange, onRowClick,
+}: AuditTableProps) {
+  const columns: TableColumn<AuditLog>[] = [
+    {
+      key: "action",
+      header: "الإجراء",
+      width: "1.5fr",
+      render: (log) => (
+        <div>
+          <ActionBadge action={log.action} />
+          {log.entityId && (
+            <p style={{ marginTop: 2, fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--color-text-muted)" }}>
+              {log.entityId.slice(0, 12)}…
+            </p>
+          )}
+        </div>
+      ),
+    },
+    { key: "module", header: "الوحدة", width: "1fr", render: (log) => log.module ?? "—" },
+    { key: "user", header: "المستخدم", width: "1fr", render: (log) => log.userName ?? log.userId ?? "—" },
+    {
+      key: "ipAddress",
+      header: "عنوان IP",
+      width: "1.5fr",
+      render: (log) => (
+        <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--color-text-muted)" }}>
+          {log.ipAddress ?? "—"}
+        </span>
+      ),
+    },
+    {
+      key: "createdAt",
+      header: "الوقت",
+      width: "1fr",
+      render: (log) => (
+        <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
+          {fmtDateTime(log.createdAt)}
+        </span>
+      ),
+    },
+  ];
+
+  return (
+    // Now showing ALL matching logs in one request (see the page's
+    // loadLogs), so instead of paging through them, the list scrolls
+    // internally within a fixed max-height. `pages` will naturally stay
+    // at 1 for a normal-sized result set, so ReusableTable's own pager
+    // stays hidden; this wrapper is what actually gives the scroll.
+    <div style={{ maxHeight: "70vh", overflowY: "auto", borderRadius: "var(--radius-xl)" }}>
+      <ReusableTable
+        columns={columns}
+        data={logs}
+        loading={loading}
+        search={search}
+        page={page}
+        pages={pages}
+        onPageChange={onPageChange}
+        onRowClick={onRowClick}
+        emptyDescription={search ? `لا نتائج لـ "${search}"` : "لا توجد سجلات مطابقة"}
+      />
+    </div>
+  );
+}

src/Components/car/CarDeleteModal.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+
+import { useEffect } from "react";
+import { Spinner } from "../UI";
+import type { Car } from "@/src/types/car";
+
+interface CarDeleteModalProps {
+  car: Car;
+  deleting: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+export function CarDeleteModal({ car, deleting, onCancel, onConfirm }: CarDeleteModalProps) {
+  useEffect(() => {
+    const h = (e: KeyboardEvent) => { if (e.key === "Escape") onCancel(); };
+    window.addEventListener("keydown", h);
+    return () => window.removeEventListener("keydown", h);
+  }, [onCancel]);
+
+  return (
+    <div
+      role="alertdialog" aria-modal="true" aria-labelledby="car-del-title"
+      onClick={e => { if (e.target === e.currentTarget) onCancel(); }}
+      style={{
+        position: "fixed", inset: 0, zIndex: 60,
+        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: 420,
+          background: "var(--color-surface)",
+          borderRadius: "var(--radius-xl)",
+          border: "1px solid #FECACA",
+          boxShadow: "0 20px 48px rgba(0,0,0,.18)",
+          padding: "2rem",
+          display: "flex", flexDirection: "column", gap: "1rem",
+          textAlign: "center",
+        }}
+      >
+        {/* Icon */}
+        <div style={{ width: 52, height: 52, margin: "0 auto", borderRadius: "50%", background: "#FEF2F2", border: "1px solid #FECACA", display: "flex", alignItems: "center", justifyContent: "center" }}>
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#DC2626" strokeWidth="2">
+            <polyline points="3 6 5 6 21 6" />
+            <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+            <path d="M10 11v6M14 11v6" />
+            <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
+          </svg>
+        </div>
+
+        <div>
+          <h2 id="car-del-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>
+            حذف المركبة
+          </h2>
+          <p style={{ marginTop: 8, fontSize: 13, color: "var(--color-text-muted)", lineHeight: 1.6 }}>
+            هل أنت متأكد من حذف{" "}
+            <strong style={{ color: "var(--color-text-primary)" }}>
+              {car.manufacturer} {car.model}
+            </strong>
+            {" "}(
+            <span style={{ fontFamily: "var(--font-mono)", fontSize: 12 }}>
+              {car.plateLetters} {car.plateNumber}
+            </span>
+            )؟ لا يمكن التراجع عن هذا الإجراء.
+          </p>
+        </div>
+
+        <div style={{ display: "flex", gap: "0.5rem" }}>
+          <button type="button" onClick={onCancel} disabled={deleting}
+            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: deleting ? "not-allowed" : "pointer", fontFamily: "var(--font-sans)" }}>
+            إلغاء
+          </button>
+          <button type="button" onClick={onConfirm} disabled={deleting}
+            style={{ flex: 1, height: 40, borderRadius: "var(--radius-md)", border: "none", background: "#DC2626", fontSize: 13, fontWeight: 700, color: "#FFF", cursor: deleting ? "not-allowed" : "pointer", display: "flex", alignItems: "center", justifyContent: "center", gap: 8, fontFamily: "var(--font-sans)", opacity: deleting ? 0.7 : 1 }}>
+            {deleting && <Spinner size="sm" className="text-white" />}
+            {deleting ? "جارٍ الحذف…" : "تأكيد الحذف"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/Components/car/CarDetailPanel.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
-import { Spinner } from "../UI";
+import { Alert, Badge, Button, IconBtn, Spinner } from "../UI";
 import { CarImageGallery } from "./CarImageGallery";
 import { useCarDetail } from "@/src/hooks/useCars";
 import { STATUS_MAP, INS_MAP, fmtDate, isExpiringSoon } from "@/src/types/car";
@@ -17,7 +17,7 @@ interface CarDetailPanelProps {
   onDelete: (car: Car) => void;
 }
 
-// ── Row component ─────────────────────────────────────────────────────────────
+// ── Row component (no template exists for a plain label/value row) ────────────
 
 function DetailRow({ label, value, mono = false, warn = false }: {
   label: string; value: string; mono?: boolean; warn?: boolean;
@@ -65,7 +65,9 @@ export function CarDetailPanel({ carId, onClose, onEdit, onDelete }: CarDetailPa
         }}
       />
 
-      {/* Panel */}
+      {/* Panel — a side drawer, not a centered dialog, so it's kept as a
+          custom <aside> rather than the shared <Modal/> (which is
+          centered-only and has no drawer variant). */}
       <aside
         aria-label="تفاصيل المركبة"
         style={{
@@ -96,10 +98,15 @@ export function CarDetailPanel({ carId, onClose, onEdit, onDelete }: CarDetailPa
                 </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", flexShrink: 0 }}>
-              ×
-            </button>
+            <IconBtn
+              title="إغلاق"
+              color="var(--color-text-muted)"
+              bg="var(--color-surface)"
+              borderColor="var(--color-border)"
+              onClick={onClose}
+            >
+              <span style={{ fontSize: 18, lineHeight: 1 }}>×</span>
+            </IconBtn>
           </div>
         </div>
 
@@ -112,16 +119,14 @@ export function CarDetailPanel({ carId, onClose, onEdit, onDelete }: CarDetailPa
             </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} />}
 
           {car && !loading && (
             <>
               {/* Status badges */}
               <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: "1.25rem" }}>
+                {/* Dynamic per-status colors come from STATUS_MAP / INS_MAP, which
+                    don't map cleanly onto the fixed Badge color palette — kept custom. */}
                 {(() => {
                   const s = STATUS_MAP[car.currentStatus];
                   return (
@@ -138,11 +143,7 @@ export function CarDetailPanel({ carId, onClose, onEdit, onDelete }: CarDetailPa
                     </span>
                   );
                 })()}
-                {!car.isActive && (
-                  <span style={{ borderRadius: "var(--radius-full)", border: "1px solid #FECACA", background: "#FEF2F2", padding: "0.3rem 0.875rem", fontSize: 12, fontWeight: 700, color: "#DC2626" }}>
-                    محذوف
-                  </span>
-                )}
+                {!car.isActive && <Badge label="محذوف" color="red" />}
               </div>
 
               {/* Section: Basic Info */}
@@ -227,38 +228,30 @@ export function CarDetailPanel({ carId, onClose, onEdit, onDelete }: CarDetailPa
           }}>
             {/* Row 1: secondary views */}
             <div style={{ display: "flex", gap: "0.75rem" }}>
-              <button type="button" onClick={() => setGallery(true)}
-                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", display: "flex", alignItems: "center", justifyContent: "center", gap: 8, fontFamily: "var(--font-sans)" }}>
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                  <rect x="3" y="3" width="18" height="18" rx="2" />
-                  <circle cx="8.5" cy="8.5" r="1.5" />
-                  <polyline points="21 15 16 10 5 21" />
-                </svg>
+              <Button type="button" variant="secondary" style={{ flex: 1 }} onClick={() => setGallery(true)}>
+                <i className="ti ti-photo" style={{ fontSize: 16 }} aria-hidden="true" />
                 الصور
-              </button>
-              <button type="button" onClick={() => router.push(`/dashboard/cars/${car.id}/maintenance`)}
-                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", display: "flex", alignItems: "center", justifyContent: "center", gap: 8, fontFamily: "var(--font-sans)" }}>
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                  <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
-                </svg>
+              </Button>
+              <Button
+                type="button"
+                variant="secondary"
+                style={{ flex: 1 }}
+                onClick={() => router.push(`/dashboard/cars/${car.id}/maintenance`)}
+              >
+                <i className="ti ti-tool" style={{ fontSize: 16 }} aria-hidden="true" />
                 عرض تاريخ الصيانة
-              </button>
+              </Button>
             </div>
 
             {/* Row 2: primary edit / delete */}
             <div style={{ display: "flex", gap: "0.75rem" }}>
-              <button type="button" onClick={() => onEdit(car)}
-                style={{ flex: 2, height: 40, borderRadius: "var(--radius-md)", border: "none", background: "var(--color-brand-600)", fontSize: 13, fontWeight: 700, color: "#FFF", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", gap: 8, fontFamily: "var(--font-sans)" }}>
-                <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 type="button" variant="primary" style={{ flex: 2 }} onClick={() => onEdit(car)}>
+                <i className="ti ti-edit" style={{ fontSize: 14 }} aria-hidden="true" />
                 تعديل
-              </button>
-              <button type="button" onClick={() => onDelete(car)}
-                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>
+              <Button type="button" variant="danger" onClick={() => onDelete(car)}>
                 حذف
-              </button>
+              </Button>
             </div>
           </div>
         )}

src/Components/car/CarFormModal.tsx

@@ -89,40 +89,26 @@ export function CarFormModal({
 }: CarFormModalProps) {
   const isNew = editCar === null;
 
-  // ── Local branches (auto-fetched if prop is empty) ─────────────────────────
-  const [branches, setBranches] = useState<Branch[]>(branchesProp);
-  const loadBranches = useCallback(() => {
-    if (branchesProp.length > 0) {
-      queueMicrotask(() => setBranches(branchesProp));
-      return;
-    }
-    const token = getStoredToken();
-    branchService
-      .getOptions(token)
-      .then((list) => {
-        queueMicrotask(() => setBranches(list as unknown as Branch[]));
-      })
-      .catch(() => {
-        /* silently ignore */
-      });
-  }, [branchesProp]);
-
-  useEffect(() => {
-    loadBranches();
-  }, [loadBranches]);
-
   // ── react-hook-form ────────────────────────────────────────────────────────
+  // Moved above the branches-loading effect below: that effect calls
+  // setValue(), so useForm() (which defines it) must run first — otherwise
+  // setValue is referenced before its own initialization (TDZ ReferenceError),
+  // same issue already fixed in TripFormModal / DriverFormModal.
   const {
     register,
     handleSubmit,
     setError,
     setFocus,
+    setValue,
     formState: { errors, isSubmitting },
   } = useForm<CarFormValues>({
-    // The create/update schemas have structurally different required fields,
-    // so yup's inferred types don't unify — cast the schema itself (not the
-    // yupResolver() call) to sidestep the mismatch.
-    resolver: yupResolver<CarFormValues>((isNew ? createCarSchema : updateCarSchema) as any),
+    // Cast both the schema argument and the resolver's result — same fix
+    // already applied in TripFormModal/DriverFormModal: createCarSchema/
+    // updateCarSchema have structurally different required fields (union
+    // type yupResolver's single-schema signature won't accept), and yup's
+    // inferred type for .optional() fields is structurally incompatible
+    // with CarFormValues.
+    resolver: yupResolver((isNew ? createCarSchema : updateCarSchema) as any) as any,
     defaultValues: {
       manufacturer: editCar?.manufacturer ?? "",
       model: editCar?.model ?? "",
@@ -148,6 +134,39 @@ export function CarFormModal({
     },
   });
 
+  // ── Local branches (auto-fetched if prop is empty) ─────────────────────────
+  const [branches, setBranches] = useState<Branch[]>(branchesProp);
+  const loadBranches = useCallback(() => {
+    // defaultValues.branchId was applied before this list existed, so the
+    // <select> had no matching <option> yet and silently fell back to "" —
+    // reapply the saved id now that the option actually exists in the DOM.
+    const savedBranchId = editCar?.branch?.id;
+
+    if (branchesProp.length > 0) {
+      queueMicrotask(() => {
+        setBranches(branchesProp);
+        if (savedBranchId) setValue("branchId", savedBranchId);
+      });
+      return;
+    }
+    const token = getStoredToken();
+    branchService
+      .getOptions(token)
+      .then((list) => {
+        queueMicrotask(() => {
+          setBranches(list as unknown as Branch[]);
+          if (savedBranchId) setValue("branchId", savedBranchId);
+        });
+      })
+      .catch(() => {
+        /* silently ignore */
+      });
+  }, [branchesProp, editCar, setValue]);
+
+  useEffect(() => {
+    loadBranches();
+  }, [loadBranches]);
+
   const [apiError, setApiError] = useState("");
 
   // register("manufacturer") already provides a ref for this input, so we