diff --git a/README.md b/README.md
index b3dc044..ea7c7a6 100644
--- a/README.md
+++ b/README.md
@@ -1,72 +1,15 @@
-# Slash.sa — منصة إدارة الأسطول واللوجستيات
+You are a senior frontend architect specializing in admin dashboards for logistics systems. Your objective is to create a comprehensive redesign plan for the home (dashboard) page of a logistics management system built with Next.js, Tailwind CSS, and TypeScript. This system tracks shipments and orders alongside nine core entities: Users, Drivers, Cars, Trips, Orders, Customers, Branches, Roles, and Audit/Withdrawal.
 
-منصة ويب متكاملة لإدارة عمليات الأسطول واللوجستيات، مبنية بلغة عربية أولًا (Arabic-first)
-باتجاه RTL كامل، وموجهة للسوق السعودي. تشمل المنصة إدارة المركبات والسائقين والفروع
-والطلبات والرحلات وسجل الصيانة، مع لوحات تحكم منفصلة حسب دور المستخدم (مشرف / عميل / مستخدم ميداني).
+The dashboard should display total counts, active counts, and pending counts for each of these entities in separate KPI cards, with visual alerts for anomalies. Additionally, the design must utilize the `@tabler/icons-webfont` icon library. It is imperative to follow the existing template block, ensuring consistency in the color palette, typography scale, spacing system, and layout patterns. The code structure must align with the existing architecture, preserving the component file structure, hooks, types folder, and page layout patterns.
 
-## المتطلبات الأساسية
+Divide the page into specific, visually distinct sections that include: KPI cards for totals, active and pending counts; recent activity logs; alert messages for urgent issues; and charts demonstrating trends over time. Each section should be explicitly labeled. Ensure that each component in the output is accompanied by a description of its required data state, including types and default values, to facilitate direct implementation.
 
-- Node.js 20.9 أو أحدث
-- npm (أو أي package manager متوافق)
+The output must strictly utilize only Tailwind CSS and the `@tabler/icons-webfont` library — no additional UI frameworks or libraries such as Shadcn, Material UI, or Headless UI should be included. 
 
-## التقنيات المستخدمة
+The final plan should produce a structured document containing:
+- A component tree presented as an indented list detailing the hierarchy and relationships.
+- A wireframe description outlining the layout section by section in clear text.
+- A data/state requirement table for each component that lists the necessary data attributes.
+- A responsive design strategy that specifies how each section adapts to mobile, tablet, and desktop views, ensuring all elements remain accessible and legible.
 
-| الطبقة              | التقنية                                   |
-| -------------------- | ------------------------------------------ |
-| الإطار               | Next.js 16 (App Router)                    |
-| اللغة                | TypeScript                                 |
-| التنسيق              | Tailwind CSS v4                            |
-| النماذج والتحقق      | react-hook-form + yup                      |
-| الأيقونات            | lucide-react (صفحات التسويق) / Tabler Icons Webfont (لوحة التحكم) |
-| المصادقة             | JWT + HttpOnly cookie + middleware للحماية |
-
-## هيكل المشروع (مختصر)
-app/
-├── (صفحات تسويقية)      home, features/app, how_work, prices, frequently_asked_questions
-├── dashboard/            لوحة التحكم (محمية بواسطة middleware)
-│   ├── cars, drivers, orders, trips, clients, branches, roles, audit, users
-├── login, register       صفحات المصادقة
-├── api/proxy/[...path]   بروكسي موحّد لكل طلبات الـ backend
-└── components/layout     Navbar, Sidebar, Topbar (تُستخدم عبر الصفحات يدويًا)
-src/
-├── Components/           مكوّنات لوحة التحكم (مقسّمة حسب الوحدة: Car, Driver, Order...)
-├── hooks/                منطق جلب البيانات والطفرات (Create/Update/Delete) لكل وحدة
-├── services/              طبقة استدعاء الـ API (كل وحدة لها service منفصل)
-├── types/                تعريفات TypeScript لكل نموذج بيانات
-├── validations/          مخططات yup للتحقق من صحة النماذج
-└── lib/                  دوال مساعدة (auth, session, formatters, order-status)
-## التشغيل محليًا
-
-```bash
-npm install
-npm run dev
-```
-
-افتح [http://localhost:3000](http://localhost:3000) في المتصفح.
-
-## الأوامر المتاحة
-
-| الأمر            | الوصف                                  |
-| ---------------- | --------------------------------------- |
-| `npm run dev`    | تشغيل بيئة التطوير (Webpack)            |
-| `npm run build`  | بناء نسخة الإنتاج                      |
-| `npm run start`  | تشغيل نسخة الإنتاج المبنية              |
-| `npm run lint`   | فحص الكود بواسطة ESLint                |
-
-## ملاحظات النشر (Deployment)
-
-- المنصة مبنية على 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` فيه عند إضافة مسارات محمية جديدة.
-
-## المساهمة (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) ذات صلة.
-
-## الترخيص
-
-جميع الحقوق محفوظة © 2026 Slash.sa
\ No newline at end of file
+Success criteria for the resulting design must be clearly defined: the dashboard must cover all nine entities, use the specified icon set exclusively, respect the existing design tokens, and create a coherent layout that minimizes navigation clicks while maximizing data visibility. The entire output must be written in clear, technical English.
\ No newline at end of file
diff --git a/app/components/layout/ConditionalNavbar.tsx b/app/components/layout/ConditionalNavbar.tsx
index ab7de6e..a03aba9 100644
--- a/app/components/layout/ConditionalNavbar.tsx
+++ b/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;
 
diff --git a/app/components/layout/Sidebar.tsx b/app/components/layout/Sidebar.tsx
index cf93166..e743219 100644
--- a/app/components/layout/Sidebar.tsx
+++ b/app/components/layout/Sidebar.tsx
@@ -288,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
diff --git a/app/components/layout/Topbar.tsx b/app/components/layout/Topbar.tsx
index 092897a..ed706cb 100644
--- a/app/components/layout/Topbar.tsx
+++ b/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() {
diff --git a/app/dashboard/audit/page.tsx b/app/dashboard/audit/page.tsx
index 01fcbe8..e2970d0 100644
--- a/app/dashboard/audit/page.tsx
+++ b/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,32 +108,14 @@ 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" }}
-    >
+    <>
+      <section
+        style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}
+      >
       {/* Header */}
       <Header
         state={state}
@@ -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)}
+      />
+    )}
+    </>
   );
-}
+}
\ No newline at end of file
diff --git a/app/dashboard/cars/[carId]/maintenance/[maintenanceId]/page.tsx b/app/dashboard/cars/[carId]/maintenance/[maintenanceId]/page.tsx
index 9745255..c1aeee3 100644
--- a/app/dashboard/cars/[carId]/maintenance/[maintenanceId]/page.tsx
+++ b/app/dashboard/cars/[carId]/maintenance/[maintenanceId]/page.tsx
@@ -73,24 +73,21 @@ function MaintenanceCard({
           </div>
         </div>
 
-        <div style={{ display: "flex", gap: "0.5rem", marginTop: "1rem" }}>
-          <Button variant="secondary" size="sm" fullWidth onClick={onView}>
-            إظهار التفاصيل
-          </Button>
-          <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>
+  <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>
       </div>
     </article>
   );
@@ -163,9 +160,7 @@ export default function CarMaintenancePage() {
           backLabel="المركبات"
           action={
             <Button onClick={() => setFormTarget(null)}>
-              <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>
           }
diff --git a/app/dashboard/cars/[carId]/maintenance/page.tsx b/app/dashboard/cars/[carId]/maintenance/page.tsx
index 0382f70..b9787ed 100644
--- a/app/dashboard/cars/[carId]/maintenance/page.tsx
+++ b/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>
           }
diff --git a/app/dashboard/cars/page.tsx b/app/dashboard/cars/page.tsx
index 75a2319..2e16d8e 100644
--- a/app/dashboard/cars/page.tsx
+++ b/app/dashboard/cars/page.tsx
@@ -1,18 +1,50 @@
 "use client";
 
+
 import { useCallback, useState } from "react";
-import { Spinner, Alert, ArchiveButton, ConfirmDialog, Toast, EmptyState, Button } from "@/src/Components/UI";
+import { Spinner, Alert, ArchiveButton, ConfirmDialog } from "@/src/Components/UI";
 import { CarFormModal,CarDetailPanel }      from "@/src/Components/car";
 import { ArchivedCarsModal } from "@/src/Components/car/archive/Archivedcarsmodal";
 import { CarMaintenanceFormModal } from "@/src/Components/Car_Maintanance/CarMaintananceFormModal";
 import { useCars, useCarMutations, useToast } from "@/src/hooks/useCars";
 import { useCarMaintenanceMutations } from "@/src/hooks/UseCarsMaintanance";
 import { fmtDateShort, isExpiringSoon, STATUS_MAP, INS_MAP } from "@/src/types/car";
-import type { Car, CreateCarPayload, UpdateCarPayload } 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 ─────────────────────────────────────────────────────────────────────
+
+function CarToast({ notification }: { notification: ToastMsg | null }) {
+  if (!notification) return null;
+  const ok = notification.type === "success";
+  return (
+    <div role="status" aria-live="polite" style={{
+      position: "fixed", bottom: 24, left: "50%",
+      transform: "translateX(-50%)",
+      zIndex: 9999, pointerEvents: "none",
+    }}>
+      <div style={{
+        display: "flex", alignItems: "center", gap: 10,
+        padding: "0.75rem 1.25rem",
+        borderRadius: "var(--radius-full)",
+        background: ok ? "#065F46" : "#7F1D1D",
+        color: "#FFF", fontSize: 13, fontWeight: 600,
+        boxShadow: "0 8px 32px rgba(0,0,0,.25)",
+        maxWidth: "90vw", whiteSpace: "nowrap",
+        fontFamily: "var(--font-sans)",
+      }}>
+        <span style={{ fontSize: 16 }}>{ok ? "✓" : "⚠"}</span>
+        <span>{notification.message}</span>
+      </div>
+    </div>
+  );
+}
 
 // ── 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,
@@ -45,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={{
@@ -143,11 +159,7 @@ function CarCard({
           </div>
         </div>
 
-        {/* Send to Maintenance quick action — kept custom (amber accent isn't
-            one of Button's variants: primary/secondary/ghost/danger). Same
-            rationale as IconBtn: forcing it into an existing variant would
-            misrepresent this as a routine action rather than the
-            maintenance-triggering one it is. */}
+        {/* Send to Maintenance quick action */}
         <button
           type="button"
           title={maintenanceDisabledReason}
@@ -170,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>
 
@@ -235,7 +245,7 @@ export default function CarsPage() {
   // ── Render ──────────────────────────────────────────────────────────────────
   return (
     <>
-      <Toast notification={toast} />
+      <CarToast notification={toast} />
 
       {detailId && (
         <CarDetailPanel
@@ -284,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)} />}
 
@@ -295,16 +373,36 @@ export default function CarsPage() {
             <span style={{ fontSize: 14 }}>جارٍ تحميل المركبات…</span>
           </div>
         ) : cars.length === 0 ? (
-          <EmptyState
-            icon="🚗"
-            title={search ? `لا توجد مركبات تطابق "${search}"` : "لا توجد مركبات بعد"}
-            description='اضغط على "إضافة مركبة" لإضافة أول مركبة في الأسطول.'
-            action={!search && (
-              <Button variant="primary" onClick={() => setFormTarget(null)}>
+          <div style={{
+            borderRadius: "var(--radius-xl)",
+            border: "2px dashed var(--color-border)",
+            background: "var(--color-surface)",
+            padding: "5rem 2rem",
+            textAlign: "center",
+          }}>
+            <div style={{ fontSize: 52, marginBottom: 16 }}>🚗</div>
+            <p style={{ fontSize: 16, fontWeight: 600, color: "var(--color-text-primary)" }}>
+              {search ? `لا توجد مركبات تطابق "${search}"` : "لا توجد مركبات بعد"}
+            </p>
+            <p style={{ fontSize: 13, color: "var(--color-text-muted)", marginTop: 6 }}>
+              اضغط على &quot;إضافة مركبة&quot; لإضافة أول مركبة في الأسطول.
+            </p>
+            {!search && (
+              <button
+                type="button"
+                onClick={() => setFormTarget(null)}
+                style={{
+                  marginTop: 16, height: 40, padding: "0 1.5rem",
+                  borderRadius: "var(--radius-lg)",
+                  border: "none", background: "var(--color-brand-600)",
+                  fontSize: 13, fontWeight: 700, color: "#FFF",
+                  cursor: "pointer", fontFamily: "var(--font-sans)",
+                }}
+              >
                 إضافة مركبة
-              </Button>
+              </button>
             )}
-          />
+          </div>
         ) : (
           /* ── Card grid ── */
           <div style={{
@@ -312,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}
@@ -344,15 +450,24 @@ export default function CarsPage() {
                 { 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
+                <button
                   key={btn.label}
-                  variant="secondary"
-                  size="sm"
                   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)",
+                    fontWeight: 600,
+                  }}
                 >
                   {btn.label}
-                </Button>
+                </button>
               ))}
             </div>
           </div>
diff --git a/app/dashboard/clients/[clientId]/addresses/page.tsx b/app/dashboard/clients/[clientId]/addresses/page.tsx
index b736620..1cb028a 100644
--- a/app/dashboard/clients/[clientId]/addresses/page.tsx
+++ b/app/dashboard/clients/[clientId]/addresses/page.tsx
@@ -421,9 +421,7 @@ export default function ClientAddressesPage() {
             onClick={() => router.push("/dashboard/clients")}
             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>
 
@@ -447,20 +445,14 @@ export default function ClientAddressesPage() {
               {/* CHANGE: custom <button> → Button variant="secondary" */}
               {client && (
                 <Button type="button" variant="secondary" onClick={() => setEditingClient(true)}>
-                  <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>
+                  <i className="ti ti-edit" style={{ fontSize: 13 }} aria-hidden="true" />
                   تعديل بيانات العميل
                 </Button>
               )}
 
               {/* CHANGE: custom <button> → Button variant="primary" */}
               <Button type="button" variant="primary" onClick={() => setAddrFormTarget(null)}>
-                <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>
diff --git a/app/dashboard/drivers/[driverId]/page.tsx b/app/dashboard/drivers/[driverId]/page.tsx
index d132014..ba3ff46 100644
--- a/app/dashboard/drivers/[driverId]/page.tsx
+++ b/app/dashboard/drivers/[driverId]/page.tsx
@@ -182,9 +182,7 @@ export default function DriverDetailPage() {
           background: "var(--color-surface)", padding: "1.5rem 2rem", boxShadow: "var(--shadow-card)",
         }}>
           <Button variant="ghost" size="sm" onClick={() => router.back()} className="mb-4 !px-0">
-            <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>
 
@@ -231,10 +229,7 @@ export default function DriverDetailPage() {
                 حذف السائق
               </Button>
               <Button variant="primary" onClick={() => setEditOpen(true)}>
-                <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>
diff --git a/app/dashboard/drivers/page.tsx b/app/dashboard/drivers/page.tsx
index ba8b90a..401150e 100644
--- a/app/dashboard/drivers/page.tsx
+++ b/app/dashboard/drivers/page.tsx
@@ -1,96 +1,32 @@
 "use client";
 
 import { useState, useCallback } from "react";
-import {
-  Alert,
-  Spinner,
-  ArchiveButton,
-  ConfirmDialog,
-  Toast,
-  Button,
-  IconBtn,
-} 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";
+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,
-    clearNotification,
   } = useDrivers();
 
   // ── Panel / modal state ───────────────────────────────────────────────────
   const [selectedDriverId, setSelectedDriverId] = useState<string | null>(null);
-  const [formDriver, setFormDriver] = useState<Driver | null | "new">(null);
-  const [deleteTarget, setDeleteTarget] = useState<Driver | null>(null);
-  const [deleting, setDeleting] = useState(false);
+  const [formDriver, setFormDriver]             = useState<Driver | null | "new">(null);
+  const [deleteTarget, setDeleteTarget]         = useState<Driver | null>(null);
+  const [deleting, setDeleting]                 = useState(false);
   // Bumped after a successful edit to force the detail panel to re-fetch
-  const [panelRefreshKey, setPanelRefreshKey] = useState(0);
+  const [panelRefreshKey, setPanelRefreshKey]   = useState(0);
   // Archive browser modal open/closed
-  const [archiveOpen, setArchiveOpen] = useState(false);
+  const [archiveOpen, setArchiveOpen]           = useState(false);
 
   // ── Handlers ──────────────────────────────────────────────────────────────
   const handleEdit = useCallback((driver: Driver) => {
@@ -148,290 +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>
 
-        {/* ── Notifications ── */}
-        <Toast notification={notification} onDismiss={clearNotification} />
-        {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)}
+              <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={{
-                      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",
+                      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)",
                     }}
-                    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,
-                        }}
-                      />
-                      {statusCfg.label}
-                    </span>
+                  />
+                </div>
 
-                    {/* ── Inline row actions: edit / delete ──
-                         IconBtn already calls stopPropagation internally 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" }}>
-                      <IconBtn
-                        title="تعديل"
-                        color="var(--color-brand-600)"
-                        bg="var(--color-brand-50, #EFF6FF)"
-                        borderColor="var(--color-brand-200)"
-                        onClick={() => handleEdit(d)}
-                      >
-                        <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>
-                      </IconBtn>
-
-                      <IconBtn
-                        title="حذف"
-                        color="#DC2626"
-                        bg="#FEF2F2"
-                        borderColor="#FECACA"
-                        onClick={() => handleDelete(d)}
-                      >
-                        <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
-                  variant="secondary"
-                  size="sm"
-                  onClick={() => setPage((p) => Math.max(1, p - 1))}
-                  disabled={page === 1}
+                {/* 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,
+                  }}
                 >
-                  السابق
-                </Button>
-                <Button
-                  variant="secondary"
-                  size="sm"
-                  onClick={() => setPage((p) => Math.min(pages, p + 1))}
-                  disabled={page === pages}
-                >
-                  التالي
-                </Button>
+                  <i className="ti ti-plus" style={{ fontSize: 15 }} aria-hidden="true" />
+                  إضافة سائق
+                </button>
               </div>
             </div>
-          )}
-        </div>
+          </div>
+        </header>
+
+        {/* ── Notifications ── */}
+        {notification && (
+          <Alert type={notification.type} message={notification.message} />
+        )}
+        {error && (
+          <Alert type="error" message={error} onClose={clearError} />
+        )}
+
+        {/* ── Table ── */}
+        <DriverTable
+          drivers={drivers}
+          loading={loading}
+          search={search}
+          page={page}
+          pages={pages}
+          onPageChange={setPage}
+          onRowClick={(d) => setSelectedDriverId(d.id)}
+          onEdit={handleEdit}
+          onDelete={handleDelete}
+        />
       </section>
 
       {/* ── Detail panel — key forces re-fetch after successful edit ── */}
@@ -466,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)} />
diff --git a/app/dashboard/orders/page.tsx b/app/dashboard/orders/page.tsx
index 30260af..2438daa 100644
--- a/app/dashboard/orders/page.tsx
+++ b/app/dashboard/orders/page.tsx
@@ -1,18 +1,17 @@
 "use client";
 
+
+
 import { useState, useCallback } from "react";
 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, OrderTable } from "@/src/Components/Order";
-import Header from "@/src/Components/UI/Header";
+import { OrderFormModal ,  OrderDetailPanel} from "@/src/Components/Order";
 
 // ── Page Component ───────────────────────────────────────────────────────
-// Table markup/styles now live in src/Components/Order/orderTable.tsx;
-// detail panel in OrderDetailModel.tsx (renamed from OrderDetailBanel.tsx);
-// form modal unchanged in OrderFormModal.tsx. This page only wires state
-// and handlers between the three.
 
 export default function OrderComponent() {
   const {
@@ -93,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
@@ -124,7 +202,7 @@ export default function OrderComponent() {
           page={page}
           pages={pages}
           setPage={setPage}
-          onRowClick={setSelectedOrderId}
+          onRowClick={(orderId) => setSelectedOrderId(orderId)}
           onEdit={handleEdit}
           onDelete={handleDelete}
         />
@@ -183,5 +261,6 @@ export default function OrderComponent() {
 }
 
 // Named export alongside the default, mirroring src/Components/Driver/index.ts's
-// pattern of re-exporting each piece for use elsewhere.
+// pattern of re-exporting each piece for use elsewhere (e.g. a future
+// app/dashboard/orders/page.tsx importing { OrderComponent }).
 export { OrderComponent };
\ No newline at end of file
diff --git a/app/dashboard/trips/[tripId]/page.tsx b/app/dashboard/trips/[tripId]/page.tsx
index 77855ab..cdd4731 100644
--- a/app/dashboard/trips/[tripId]/page.tsx
+++ b/app/dashboard/trips/[tripId]/page.tsx
@@ -1,13 +1,6 @@
 "use client";
 
-// app/dashboard/trips/[tripId]/page.tsx
-// 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: loadTrip's catch block now uses the same extractApiMessage helper
-// already defined in this file (and used by handleEditSubmit/handleConfirmDelete)
-// instead of `err instanceof Error ? err.message : ...` — so backend
-// validation messages surface correctly here too, not just on edit/delete.
+
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
@@ -336,9 +329,7 @@ export default function TripDetailPage() {
             onClick={() => router.back()}
             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>
 
@@ -437,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>
diff --git a/app/dashboard/trips/archived/[tripId]/page.tsx b/app/dashboard/trips/archived/[tripId]/page.tsx
index 5134eab..9640eda 100644
--- a/app/dashboard/trips/archived/[tripId]/page.tsx
+++ b/app/dashboard/trips/archived/[tripId]/page.tsx
@@ -1,16 +1,7 @@
 "use client";
 
 import { ArchivedTripDetailModal } from "@/src/Components/Trip/archive/ArchivedtripDetailModal";
-// app/dashboard/trips/archived/[tripId]/page.tsx
-// CHANGE: rebuilt as a thin route wrapper around the shared
-// ArchivedTripDetailModal instead of its own independent fetch/loading/error/
-// render logic. This route now shows the exact same full detail view as the
-// in-app archive browser (driver + car + counts + cash + notes + endReason,
-// not just the handful of fields this page used to render on its own), and
-// stays in sync automatically with any future changes to that component.
-// `onClose` navigates back to the trips list (via router.push) instead of
-// closing an in-place modal, since this route has no page behind it to
-// reveal.
+
 
 import { useParams, useRouter } from "next/navigation";
 
diff --git a/app/forbidden/page.tsx b/app/forbidden/page.tsx
index c108b2f..c0beea6 100644
--- a/app/forbidden/page.tsx
+++ b/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={{
diff --git a/app/not_found/page.tsx b/app/not_found/page.tsx
index 7a483f9..1ed74f6 100644
--- a/app/not_found/page.tsx
+++ b/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>
 
diff --git a/src/Components/Branch/BranchDetailModal.tsx b/src/Components/Branch/BranchDetailModal.tsx
index 87b3cfa..d62f154 100644
--- a/src/Components/Branch/BranchDetailModal.tsx
+++ b/src/Components/Branch/BranchDetailModal.tsx
@@ -39,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>
   );
 }
diff --git a/src/Components/Branch/BranchTable.tsx b/src/Components/Branch/BranchTable.tsx
index 17f4682..a1deb24 100644
--- a/src/Components/Branch/BranchTable.tsx
+++ b/src/Components/Branch/BranchTable.tsx
@@ -1,134 +1,96 @@
 "use client";
 
-import { Badge, Button, EmptyState, IconBtn, 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";
 
-// ── 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;
-  search:       string;
-  page:         number;
-  pages:        number;
-  onEdit:       (branch: Branch) => void;
-  onDelete:     (branch: Branch) => void;
-  onView:       (branch: Branch) => void;
-  onAddFirst:   () => void;
+  branches: Branch[];
+  loading: boolean;
+  search: string;
+  page: number;
+  pages: number;
+  onEdit: (branch: Branch) => void;
+  onDelete: (branch: Branch) => void;
+  onView: (branch: Branch) => void;
+  onAddFirst: () => void;
   onPageChange: (p: number) => void;
 }
 
-// ── main table ───────────────────────────────────────────────────────────────
-export function BranchTable({ branches, loading, search, page, pages, onEdit, onDelete, onView, onAddFirst, onPageChange }: BranchTableProps) {
+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>
+      ),
+    },
+    { 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>
+      ),
+    },
+    {
+      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" }),
+    },
+  ];
+
   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 */
-        <EmptyState
-          icon="🏢"
-          title={search ? `لا توجد نتائج لـ "${search}"` : "لا توجد فروع لعرضها."}
-          action={
-            !search && (
-              <Button type="button" variant="ghost" size="sm" onClick={onAddFirst}>
-                أضف أول فرع
-              </Button>
-            )
-          }
+    <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)}
         />
-      ) : (
-        /* 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,
-            }}>
-              <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>
-              <Badge label={b.isActive ? "نشط" : "معطل"} color={b.isActive ? "green" : "red"} />
-              <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>
-              <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>
       )}
-
-      {/* 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" variant="secondary" size="sm" onClick={btn.action} disabled={btn.disabled}>
-                {btn.label}
-              </Button>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
+    />
   );
 }
\ No newline at end of file
diff --git a/src/Components/Branch/archive/ArchivedBranchDetailModal.tsx b/src/Components/Branch/archive/ArchivedBranchDetailModal.tsx
index bf7c549..9b25f91 100644
--- a/src/Components/Branch/archive/ArchivedBranchDetailModal.tsx
+++ b/src/Components/Branch/archive/ArchivedBranchDetailModal.tsx
@@ -35,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>
   );
 }
diff --git a/src/Components/Branch/archive/ArchivedBranchTable.tsx b/src/Components/Branch/archive/ArchivedBranchTable.tsx
index ded557e..f77b41f 100644
--- a/src/Components/Branch/archive/ArchivedBranchTable.tsx
+++ b/src/Components/Branch/archive/ArchivedBranchTable.tsx
@@ -1,121 +1,70 @@
 "use client";
 
-import { Badge, Button, IconBtn, 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";
 
-// ── 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;
-  search:       string;
-  page:         number;
-  pages:        number;
-  onView:       (branch: ArchivedBranch) => void;
+  branches: ArchivedBranch[];
+  loading: boolean;
+  search: string;
+  page: number;
+  pages: number;
+  onView: (branch: ArchivedBranch) => void;
   onPageChange: (p: number) => void;
 }
 
-// ── main table ───────────────────────────────────────────────────────────────
 export function ArchivedBranchTable({ branches, loading, search, page, pages, onView, onPageChange }: ArchivedBranchTableProps) {
+  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>
+      ),
+    },
+    { 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" }),
+    },
+  ];
+
   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,
-            }}>
-              <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>
-              <Badge label={b.isActive ? "نشط" : "معطل"} color={b.isActive ? "green" : "red"} />
-              <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>
-      )}
-
-      {/* 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
-              variant="secondary"
-              size="sm"
-              onClick={() => onPageChange(Math.max(1, page - 1))}
-              disabled={page === 1}
-            >
-              السابق
-            </Button>
-            <Button
-              variant="secondary"
-              size="sm"
-              onClick={() => onPageChange(Math.min(pages, page + 1))}
-              disabled={page === pages}
-            >
-              التالي
-            </Button>
-          </div>
-        </div>
-      )}
-    </div>
+    <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)} />}
+    />
   );
 }
\ No newline at end of file
diff --git a/src/Components/Branch/archive/ArchivedBranchesModal.tsx b/src/Components/Branch/archive/ArchivedBranchesModal.tsx
index 8abaec8..739d504 100644
--- a/src/Components/Branch/archive/ArchivedBranchesModal.tsx
+++ b/src/Components/Branch/archive/ArchivedBranchesModal.tsx
@@ -12,9 +12,7 @@ interface ArchivedBranchesModalProps {
 }
 
 const SearchIcon = (
-  <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" />
 );
 
 export function ArchivedBranchesModal({ onClose }: ArchivedBranchesModalProps) {
diff --git a/src/Components/Car_Maintanance/CarMaintananceDetailPanel.tsx b/src/Components/Car_Maintanance/CarMaintananceDetailPanel.tsx
index 1313df4..d1e2e81 100644
--- a/src/Components/Car_Maintanance/CarMaintananceDetailPanel.tsx
+++ b/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>
diff --git a/src/Components/Car_Maintanance/archive/ArchivedCarMaintananceTable.tsx b/src/Components/Car_Maintanance/archive/ArchivedCarMaintananceTable.tsx
index db9364d..cb4c3a4 100644
--- a/src/Components/Car_Maintanance/archive/ArchivedCarMaintananceTable.tsx
+++ b/src/Components/Car_Maintanance/archive/ArchivedCarMaintananceTable.tsx
@@ -1,19 +1,11 @@
 "use client";
 
-import { Button, EmptyState, IconBtn, Spinner } from "../../UI";
-import { fmtDateShort, fmtCost } from "@/src/types/carMaintanance";
-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)",
-};
+
+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";
 
 interface ArchivedCarMaintenanceTableProps {
   records:      CarMaintenance[];
@@ -30,85 +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";
+  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>
+      ),
+    },
+    // 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>
+      ),
+    },
+    {
+      key: "endAt",
+      header: "تاريخ الانتهاء",
+      width: "1fr",
+      render: (r) => (
+        <span style={{ fontSize: 12, color: "var(--color-text-muted)" }}>
+          {fmtDateShort(r.endAt)}
+        </span>
+      ),
+    },
+  ];
 
   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 ? (
-        <EmptyState
-          icon="🔧"
-          title={search ? `لا توجد نتائج لـ "${search}"` : "لا توجد سجلات صيانة في الأرشيف."}
-        />
-      ) : (
-        <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,
-            }}>
-              <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 && (
-                <span style={{ color: "var(--color-text-secondary)" }}>
-                  {r.car ? `${r.car.manufacturer} ${r.car.model}` : "—"}
-                </span>
-              )}
-              <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "#2563EB", fontWeight: 600 }}>
-                {fmtCost(r.cost)}
-              </span>
-              <span style={{ color: "var(--color-text-secondary)" }}>{fmtDateShort(r.startAt)}</span>
-              <span style={{ textAlign: "center", 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>
+    <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>
       )}
-
-      {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" variant="secondary" size="sm" onClick={btn.action} disabled={btn.disabled}>
-                {btn.label}
-              </Button>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
+    />
   );
 }
\ No newline at end of file
diff --git a/src/Components/Car_Maintanance/archive/ArchivedCarsMaintananceModal.tsx b/src/Components/Car_Maintanance/archive/ArchivedCarsMaintananceModal.tsx
index 69b00e2..846e9d5 100644
--- a/src/Components/Car_Maintanance/archive/ArchivedCarsMaintananceModal.tsx
+++ b/src/Components/Car_Maintanance/archive/ArchivedCarsMaintananceModal.tsx
@@ -51,9 +51,7 @@ export function ArchivedCarsMaintenanceModal({ carId, carLabel, onClose }: Archi
             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>
diff --git a/src/Components/Client/Clienttable.tsx b/src/Components/Client/Clienttable.tsx
index fd198a4..982528e 100644
--- a/src/Components/Client/Clienttable.tsx
+++ b/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 { Button, EmptyState, IconBtn, 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,25 +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>
   );
 }
 
-// ── 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,
@@ -85,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",
@@ -98,7 +101,6 @@ function ClientDetailPanel({
         animation: "detailFadeIn 180ms ease",
       }}
     >
-      {/* ── Top row: name + quick actions ── */}
       <div
         style={{
           display: "flex",
@@ -138,36 +140,29 @@ function ClientDetailPanel({
           )}
         </div>
 
-        {/* Action buttons */}
         <div style={{ display: "flex", gap: "0.5rem", flexShrink: 0 }}>
-          {/* Edit client */}
           <Button
             type="button"
             variant="secondary"
             size="sm"
-            onClick={(e) => { e.stopPropagation(); onEdit(); }}
+            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>
-            تعديل البيانات
+            <i className="ti ti-edit" style={{ fontSize: 12 }} aria-hidden="true" />
+            تعديل التفاصيل
           </Button>
-
-          {/*
-           * "Addresses" button — KEY FEATURE:
-           * Navigates to /dashboard/clients/[clientId]/addresses
-           */}
           <Button
             type="button"
             variant="primary"
             size="sm"
-            onClick={(e) => { e.stopPropagation(); onGoAddresses(); }}
+            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
@@ -187,7 +182,6 @@ function ClientDetailPanel({
         </div>
       </div>
 
-      {/* ── Info grid ── */}
       <div
         style={{
           display: "grid",
@@ -198,7 +192,7 @@ function ClientDetailPanel({
         }}
       >
         {infoItem(
-          "البريد الإلكتروني",
+          "البريد الالكتروني",
           <a
             href={`mailto:${client.email}`}
             onClick={(e) => e.stopPropagation()}
@@ -207,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); }
@@ -238,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[];
@@ -269,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;
 }
 
@@ -286,311 +258,155 @@ 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));
-  };
+  const columns: TableColumn<Client>[] = [
+    {
+      key: "name",
+      header: "اسم العميل",
+      width: "2fr",
+      render: (c, _i, isExpanded) => (
+        <div>
+          <p
+            style={{
+              fontWeight: 600,
+              color: "var(--color-text-primary)",
+              margin: 0,
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+            }}
+          >
+            {c.name}
+            <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",
+              }}
+            />
+          </p>
+          {c.taxId && (
+            <p
+              style={{
+                marginTop: 2,
+                fontFamily: "var(--font-mono)",
+                fontSize: 11,
+                color: "var(--color-text-muted)",
+              }}
+            >
+              {c.taxId}
+            </p>
+          )}
+        </div>
+      ),
+    },
+    {
+      key: "email",
+      header: "البريد الالكتروني",
+      width: "1.5fr",
+      render: (c) => (
+        <span
+          style={{
+            fontFamily: "var(--font-mono)",
+            fontSize: 12,
+            color: "#2563EB",
+            fontWeight: 600,
+          }}
+        >
+          {c.email}
+        </span>
+      ),
+    },
+    {
+      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)}
+        />
+      ),
+    },
+    {
+      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>
+      ),
+    },
+  ];
 
   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 */
-        <EmptyState
-          icon="👥"
-          title={search ? `لا توجد نتائج لـ "${search}"` : "لا يوجد عملاء لعرضهم."}
-          action={
-            !search && (
-              <Button type="button" variant="ghost" size="sm" onClick={onAddFirst}>
-                أضف أول عميل
-              </Button>
-            )
-          }
+    <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={`Edit ${c.name}`}
+            color="#1D4ED8"
+            bg="#EFF6FF"
+            borderColor="#BFDBFE"
+            onClick={() => onEdit(c)}
+          >
+            <i className="ti ti-edit" style={{ fontSize: 14 }} aria-hidden="true" />
+          </IconBtn>
+          <IconBtn
+            title={`Delete ${c.name}`}
+            color="#DC2626"
+            bg="#FEF2F2"
+            borderColor="#FECACA"
+            onClick={() => onDelete(c)}
+          >
+            <i className="ti ti-trash" style={{ fontSize: 14 }} aria-hidden="true" />
+          </IconBtn>
+        </>
+      )}
+      renderExpanded={(c) => (
+        <ClientDetailPanel
+          client={c}
+          onGoAddresses={() => onManageAddresses(c)}
+          onEdit={() => onEdit(c)}
         />
-      ) : (
-        /* 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 */}
-                  <div>
-                    <p
-                      style={{
-                        fontWeight: 600,
-                        color: "var(--color-text-primary)",
-                        margin: 0,
-                        display: "flex",
-                        alignItems: "center",
-                        gap: 6,
-                      }}
-                    >
-                      {c.name}
-                      {/* Chevron indicator — rotates when expanded */}
-                      <svg
-                        width="12"
-                        height="12"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="2.5"
-                        style={{
-                          flexShrink: 0,
-                          color: "var(--color-text-muted)",
-                          transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
-                          transition: "transform 200ms",
-                        }}
-                      >
-                        <path d="M9 18l6-6-6-6" />
-                      </svg>
-                    </p>
-                    {c.taxId && (
-                      <p
-                        style={{
-                          marginTop: 2,
-                          fontFamily: "var(--font-mono)",
-                          fontSize: 11,
-                          color: "var(--color-text-muted)",
-                        }}
-                      >
-                        {c.taxId}
-                      </p>
-                    )}
-                  </div>
-
-                  {/* Email */}
-                  <span
-                    style={{
-                      fontFamily: "var(--font-mono)",
-                      fontSize: 12,
-                      color: "#2563EB",
-                      fontWeight: 600,
-                    }}
-                  >
-                    {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).
-                   */}
-                  <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", {
-                      year: "numeric",
-                      month: "short",
-                      day: "numeric",
-                    })}
-                  </span>
-
-                  {/* Row action buttons */}
-                  <div
-                    style={{
-                      display: "flex",
-                      justifyContent: "center",
-                      gap: 6,
-                    }}
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    <IconBtn
-                      title={`تعديل ${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>
-                    </IconBtn>
-                    <IconBtn
-                      title={`حذف ${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>
-                    </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 && (
-                  <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"
-                variant="secondary"
-                size="sm"
-                onClick={btn.action}
-                disabled={btn.disabled}
-              >
-                {btn.label}
-              </Button>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
+    />
   );
 }
\ No newline at end of file
diff --git a/src/Components/Client/archive/ArchivedClientTable.tsx b/src/Components/Client/archive/ArchivedClientTable.tsx
index 8b7be5a..9821449 100644
--- a/src/Components/Client/archive/ArchivedClientTable.tsx
+++ b/src/Components/Client/archive/ArchivedClientTable.tsx
@@ -1,112 +1,76 @@
 "use client";
 
-import { Badge, Button, EmptyState, IconBtn, 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";
 
-// ── 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;
-  search:       string;
-  page:         number;
-  pages:        number;
-  onView:       (client: ArchivedClient) => void;
+  clients: ArchivedClient[];
+  loading: boolean;
+  search: string;
+  page: number;
+  pages: number;
+  onView: (client: ArchivedClient) => void;
   onPageChange: (p: number) => void;
 }
 
-// ── main table ───────────────────────────────────────────────────────────────
 export function ArchivedClientTable({ clients, loading, search, page, pages, onView, onPageChange }: ArchivedClientTableProps) {
+  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>
+      ),
+    },
+    {
+      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" }),
+    },
+  ];
+
   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 */
-        <EmptyState
-          icon="👥"
-          title={search ? `لا توجد نتائج لـ "${search}"` : "لا يوجد عملاء في الأرشيف."}
-        />
-      ) : (
-        /* 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,
-            }}>
-              <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>
-              <Badge label={c.isActive ? "نشط" : "معطل"} color={c.isActive ? "green" : "red"} />
-              <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>
-      )}
-
-      {/* 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" variant="secondary" size="sm" onClick={btn.action} disabled={btn.disabled}>
-                {btn.label}
-              </Button>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
+    <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)} />}
+    />
   );
 }
\ No newline at end of file
diff --git a/src/Components/Client/archive/ArchivedClientsModal.tsx b/src/Components/Client/archive/ArchivedClientsModal.tsx
index f416585..9bbc2e5 100644
--- a/src/Components/Client/archive/ArchivedClientsModal.tsx
+++ b/src/Components/Client/archive/ArchivedClientsModal.tsx
@@ -42,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>
diff --git a/src/Components/Client/index.ts b/src/Components/Client/index.ts
index 5b31610..6dbd86c 100644
--- a/src/Components/Client/index.ts
+++ b/src/Components/Client/index.ts
@@ -1,5 +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";
diff --git a/src/Components/Client_Adress/archive/ArchivedClientAddressesTable.tsx b/src/Components/Client_Adress/archive/ArchivedClientAddressesTable.tsx
index 1595245..09f7f79 100644
--- a/src/Components/Client_Adress/archive/ArchivedClientAddressesTable.tsx
+++ b/src/Components/Client_Adress/archive/ArchivedClientAddressesTable.tsx
@@ -1,19 +1,12 @@
 "use client";
 
-import { Badge, EmptyState, IconBtn, Spinner } from "../../UI";
+
+import { Badge, IconBtn, ReusableTable } from "../../UI";
+import type { TableColumn } from "@/src/types/models";
 import type { ArchivedClientAddress } from "@/src/types/client_adresses";
 
-// ── 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 {
@@ -25,73 +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>
+  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>
-      ) : addresses.length === 0 ? (
-        /* empty state */
-        <EmptyState
-          icon="📍"
-          title={search ? `لا توجد نتائج لـ "${search}"` : "لا توجد عناوين في الأرشيف."}
+      ),
+    },
+    {
+      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>
+      ),
+    },
+    {
+      key: "status",
+      header: "الحالة",
+      width: "1fr",
+      render: (a) => (
+        <Badge
+          label={a.isValidated ? "موثّق" : "غير موثّق"}
+          color={a.isValidated ? "green" : "slate"}
         />
-      ) : (
-        /* 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,
-            }}>
-              <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>
-              <span style={{ color: "var(--color-text-secondary)" }}>
-                {a.details.street}، {a.details.city}
-              </span>
-              <span style={{ fontSize: 12, color: "var(--color-text-secondary)" }}>
-                {a.contactPerson?.name ?? "—"}
-              </span>
-              <Badge
-                label={a.isValidated ? "موثّق" : "غير موثّق"}
-                color={a.isValidated ? "green" : "slate"}
-              />
-              <span style={{ textAlign: "center", 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>
-                </IconBtn>
-              </div>
-            </li>
-          ))}
-        </ul>
+      ),
+    },
+    {
+      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>
+      ),
+    },
+  ];
+
+  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>
+    />
   );
 }
\ No newline at end of file
diff --git a/src/Components/Client_Adress/archive/ArchivedClientsAddressesModal.tsx b/src/Components/Client_Adress/archive/ArchivedClientsAddressesModal.tsx
index 362b3be..d6a25e4 100644
--- a/src/Components/Client_Adress/archive/ArchivedClientsAddressesModal.tsx
+++ b/src/Components/Client_Adress/archive/ArchivedClientsAddressesModal.tsx
@@ -46,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>
diff --git a/src/Components/Driver/DriverDetailPanel.tsx b/src/Components/Driver/DriverDetailPanel.tsx
index 2f0164e..f62da4c 100644
--- a/src/Components/Driver/DriverDetailPanel.tsx
+++ b/src/Components/Driver/DriverDetailPanel.tsx
@@ -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 && (
@@ -456,10 +445,7 @@ export function DriverDetailPanel({
             </Button>
 
             <Button type="button" variant="secondary" onClick={() => onEdit(driver)}>
-              <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>
 
diff --git a/src/Components/Driver/DriverPhotos.tsx b/src/Components/Driver/DriverPhotos.tsx
index b204520..d8de201 100644
--- a/src/Components/Driver/DriverPhotos.tsx
+++ b/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 && (
@@ -110,4 +99,4 @@ export function PhotoCard({
       )}
     </div>
   );
-}
\ No newline at end of file
+} 
\ No newline at end of file
diff --git a/src/Components/Driver/DriverTable.tsx b/src/Components/Driver/DriverTable.tsx
new file mode 100644
index 0000000..7eebc24
--- /dev/null
+++ b/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)}
+        />
+      )}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/Components/Driver/archive/ArchivedDriverTable.tsx b/src/Components/Driver/archive/ArchivedDriverTable.tsx
index b199d22..2ed28ef 100644
--- a/src/Components/Driver/archive/ArchivedDriverTable.tsx
+++ b/src/Components/Driver/archive/ArchivedDriverTable.tsx
@@ -1,142 +1,86 @@
 "use client";
 
-import { Button, EmptyState, IconBtn, 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 ─────────────────────────────────────────────────────────────
-// Kept custom rather than swapped for <Badge/>: colors come dynamically from
-// DRIVER_STATUS_MAP (multiple statuses, each with its own color+dot), which
-// the shared Badge component's fixed palette doesn't cover.
-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>
-  );
-}
-
-// ── 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;
-  search:       string;
-  page:         number;
-  pages:        number;
-  onView:       (driver: ArchivedDriver) => void;
+  drivers: ArchivedDriver[];
+  loading: boolean;
+  search: string;
+  page: number;
+  pages: number;
+  onView: (driver: ArchivedDriver) => void;
   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>
+  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>
-      ) : drivers.length === 0 ? (
-        /* empty state */
-        <EmptyState
-          icon="🗄️"
-          title={search ? `لا توجد نتائج لـ "${search}"` : "لا يوجد سائقون في الأرشيف."}
-        />
-      ) : (
-        /* 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",
-            }}>
-              <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={{ 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" })}
-              </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>
-      )}
-
-      {/* 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>
+      ),
+    },
+    {
+      key: "userName",
+      header: "اسم السائق",
+      width: "1.5fr",
+      render: (d) => (
+        <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "#2563EB", fontWeight: 600 }}>{d.userName ?? "—"}</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 }}>
+            <span style={{ width: 6, height: 6, borderRadius: "50%", background: s.dot }} />
+            {s.label}
           </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>
+        );
+      },
+    },
+    {
+      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" }),
+    },
+  ];
+
+  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)} />}
+    />
   );
 }
\ No newline at end of file
diff --git a/src/Components/Driver/archive/ArchivedDrivers.tsx b/src/Components/Driver/archive/ArchivedDrivers.tsx
index 85401d3..e8788cd 100644
--- a/src/Components/Driver/archive/ArchivedDrivers.tsx
+++ b/src/Components/Driver/archive/ArchivedDrivers.tsx
@@ -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" />
 );
 
 /**
diff --git a/src/Components/Order/OrderDetailModel.tsx b/src/Components/Order/OrderDetailModel.tsx
index 9d0b50e..456cbc5 100644
--- a/src/Components/Order/OrderDetailModel.tsx
+++ b/src/Components/Order/OrderDetailModel.tsx
@@ -222,10 +222,7 @@ export function OrderDetailPanel({
                   justifyContent: "center",
                 }}
               >
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-brand-600)" 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"/>
-                </svg>
+                <i className="ti ti-package" style={{ fontSize: 24, color: "var(--color-brand-600)" }} aria-hidden="true" />
               </div>
 
               <div>
@@ -460,10 +457,7 @@ export function OrderDetailPanel({
             </Button>
 
             <Button type="button" variant="secondary" onClick={() => onEdit(order)}>
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
-                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
-              </svg>
+              <i className="ti ti-edit" style={{ fontSize: 14 }} aria-hidden="true" />
               تعديل
             </Button>
 
diff --git a/src/Components/Order/OrderFormModal.tsx b/src/Components/Order/OrderFormModal.tsx
index b466289..4426782 100644
--- a/src/Components/Order/OrderFormModal.tsx
+++ b/src/Components/Order/OrderFormModal.tsx
@@ -372,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>
@@ -418,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>
diff --git a/src/Components/Order/OrderTable.tsx b/src/Components/Order/OrderTable.tsx
index 42c3b54..071aafd 100644
--- a/src/Components/Order/OrderTable.tsx
+++ b/src/Components/Order/OrderTable.tsx
@@ -1,60 +1,20 @@
 "use client";
 
-import { Spinner } from "../UI";
-import type { Order } from "@/src/types/order";
+import { ReusableTable, ActionButtons } from "../UI";
 import { ORDER_STATUS_MAP } from "./OrderDetailModel";
-
-// ── Helpers — copied verbatim from app/dashboard/drivers/page.tsx ───────
+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("ar-SA", {
-    year: "numeric", month: "short", day: "numeric",
-  });
+  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)} ر.س`;
+  return `${n.toFixed(2)} SAR`;
 }
 
-// ── 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,
-};
-
 interface OrderTableProps {
   orders: Order[];
   loading: boolean;
@@ -68,181 +28,86 @@ interface OrderTableProps {
 }
 
 export function OrderTable({
-  orders,
-  loading,
-  search,
-  page,
-  pages,
-  setPage,
-  onRowClick,
-  onEdit,
-  onDelete,
+  orders, loading, search, page, pages,
+  setPage, onRowClick, onEdit, onDelete,
 }: OrderTableProps) {
-  return (
-    <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>
+  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>
-      ) : 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={() => onRowClick(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(); onEdit(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(); onDelete(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>
+      ),
+    },
+    {
+      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>
-          <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>
+        );
+      },
+    },
+  ];
+
+  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)}
+        />
       )}
-    </div>
+    />
   );
 }
\ No newline at end of file
diff --git a/src/Components/Order/archive/ArchivedOrderTable.tsx b/src/Components/Order/archive/ArchivedOrderTable.tsx
index 9ab59ee..3d9088c 100644
--- a/src/Components/Order/archive/ArchivedOrderTable.tsx
+++ b/src/Components/Order/archive/ArchivedOrderTable.tsx
@@ -1,132 +1,80 @@
 "use client";
 
-import { Button, EmptyState, IconBtn, Spinner } from "../../UI";
+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;
-  search:       string;
-  page:         number;
-  pages:        number;
-  onView:       (order: ArchivedOrder) => void;
+  orders: ArchivedOrder[];
+  loading: boolean;
+  search: string;
+  page: number;
+  pages: number;
+  onView: (order: ArchivedOrder) => void;
   onPageChange: (p: number) => void;
 }
 
 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>
+  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>
-      ) : orders.length === 0 ? (
-        <EmptyState
-          icon="🗄️"
-          title={search ? `لا توجد نتائج لـ "${search}"` : "لا توجد طلبات في الأرشيف."}
-        />
-      ) : (
-        <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>
-                <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",
-                }}>
-                  <span style={{ width: 6, height: 6, borderRadius: "50%", background: s.dot }} />
-                  {s.label}
-                </span>
-                <div style={{ display: "flex", justifyContent: "center" }}>
-                  <IconBtn title={`عرض ${o.shipmentNumber}`} color="#059669" bg="#ECFDF5" borderColor="#A7F3D0" onClick={() => onView(o)}>
-                    <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>
+      ),
+    },
+    {
+      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", 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={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)} />}
+    />
   );
 }
\ No newline at end of file
diff --git a/src/Components/Order/archive/ArchivedOrdersModal.tsx b/src/Components/Order/archive/ArchivedOrdersModal.tsx
index 69c3ce2..e1fab42 100644
--- a/src/Components/Order/archive/ArchivedOrdersModal.tsx
+++ b/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) {
diff --git a/src/Components/Trip/TripDetailModal.tsx b/src/Components/Trip/TripDetailModal.tsx
index 0db5fab..de68c6b 100644
--- a/src/Components/Trip/TripDetailModal.tsx
+++ b/src/Components/Trip/TripDetailModal.tsx
@@ -1,8 +1,5 @@
 "use client";
 
-// src/Components/Trip/TripDetailModal.tsx
-// New — split out of the old single-file Trip module, mirroring
-// UserDetailModal.tsx / ArchivedDriverDetailModal.tsx for consistency.
 
 import { useEffect, useState } from "react";
 import { Alert, Button, Modal, Spinner } from "../UI";
diff --git a/src/Components/Trip/TripTable.tsx b/src/Components/Trip/TripTable.tsx
index 2c4ea9b..8b5f5d5 100644
--- a/src/Components/Trip/TripTable.tsx
+++ b/src/Components/Trip/TripTable.tsx
@@ -1,17 +1,15 @@
 "use client";
 
 // src/Components/Trip/TripTable.tsx
-// New — split out of the old single-file Trip module, mirroring
-// UserTable.tsx for consistency.
+// 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, EmptyState, IconBtn, Spinner } from "../UI";
+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";
 
-// ── status badge ─────────────────────────────────────────────────────────────
-// Kept custom rather than swapped for <Badge/>: colors come dynamically from
-// TRIP_STATUS_MAP (per-status color+dot), which Badge's fixed palette
-// doesn't cover — mirrors DriverTable's StatusBadge.
 function StatusBadge({ status }: { status: Trip["status"] }) {
   const s = TRIP_STATUS_MAP[status];
   return (
@@ -22,151 +20,84 @@ function StatusBadge({ status }: { status: Trip["status"] }) {
   );
 }
 
-// ── 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.3fr 1.3fr 1fr 1fr 1fr 100px";
-
 function fmtDate(iso?: string | null): string {
   if (!iso) return "—";
-  return new Date(iso).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" });
+  return new Date(iso).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
 }
 
-// ── Props ────────────────────────────────────────────────────────────────────
 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;
+  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;
 }
 
-// ── main table ───────────────────────────────────────────────────────────────
-export function TripTable({ trips, loading, search, page, pages, onEdit, onDelete, onView, onAddFirst, onPageChange }: TripTableProps) {
+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 (
-    <div style={cardStyle}>
-      {/* column headers */}
-      <div dir="rtl" style={{ display: "grid", gridTemplateColumns: ROW_GRID_COLUMNS, ...thStyle }}>
-        <span>الرحلة</span>
-        <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>
-      ) : trips.length === 0 ? (
-        /* empty state */
-        <EmptyState
-          icon="🚚"
-          title={search ? `لا توجد نتائج لـ "${search}"` : "لا توجد رحلات لعرضها."}
-          action={
-            !search && (
-              <Button type="button" variant="ghost" size="sm" onClick={onAddFirst}>
-                أضف أول رحلة
-              </Button>
-            )
-          }
+    <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)}
         />
-      ) : (
-        /* data rows */
-        <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
-          {trips.map((t, i) => (
-            <li key={t.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,
-            }}>
-              <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>
-              <span style={{ color: "var(--color-text-secondary)" }}>{t.driver?.name ?? "—"}</span>
-              <span style={{ color: "var(--color-text-secondary)" }}>{t.car ? `${t.car.manufacturer} ${t.car.model}` : "—"}</span>
-              <span style={{ color: "var(--color-text-secondary)" }}>{t.branch?.name ?? "—"}</span>
-              <StatusBadge status={t.status} />
-              <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
-                {fmtDate(t.startTime)}
-              </span>
-              <div style={{ display: "flex", justifyContent: "center", gap: 4 }}>
-                {/* view */}
-                <IconBtn title={`عرض ${t.title}`} color="#059669" bg="#ECFDF5" borderColor="#A7F3D0" onClick={() => onView(t)}>
-                  <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={`تعديل ${t.title}`} color="#1D4ED8" bg="#EFF6FF" borderColor="#BFDBFE" onClick={() => onEdit(t)}>
-                  <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={`حذف ${t.title}`} color="#DC2626" bg="#FEF2F2" borderColor="#FECACA" onClick={() => onDelete(t)}>
-                  <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>
+    />
   );
 }
\ No newline at end of file
diff --git a/src/Components/Trip/Tripformmodal.tsx b/src/Components/Trip/Tripformmodal.tsx
index df5ede1..7de7081 100644
--- a/src/Components/Trip/Tripformmodal.tsx
+++ b/src/Components/Trip/Tripformmodal.tsx
@@ -1,17 +1,5 @@
 "use client";
 
-// src/Components/Trip/TripFormModal.tsx
-// CHANGE: renamed from Tripformmodal.tsx (proper PascalCase, matches
-// UserFormModal.tsx / DriverFormModal.tsx). Split out of the old single-file
-// Trip module into TripFormModal.tsx / TripTable.tsx / TripDetailModal.tsx.
-// FIX 1: notes/endReason schema — empty string now transforms to undefined
-// before .min() runs, so leaving them blank on create no longer fails
-// validation despite .optional() (see trip.validator.ts).
-// FIX 2: edit-mode defaultValues now fall back to the nested driver/car/branch
-// ids, and setValue() re-applies the saved id once each dropdown's options
-// actually load — previously the <select> had no matching <option> yet when
-// defaultValues were first applied, so the old selection silently reset to "".
-
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
diff --git a/src/Components/Trip/archive/ArchivedTripModal.tsx b/src/Components/Trip/archive/ArchivedTripModal.tsx
index 25daa74..794fe64 100644
--- a/src/Components/Trip/archive/ArchivedTripModal.tsx
+++ b/src/Components/Trip/archive/ArchivedTripModal.tsx
@@ -1,9 +1,6 @@
 "use client";
 
-// src/Components/Trip/archive/ArchivedTripModal.tsx
-// Split out of the old ArchivedTripList.tsx — this is the top-level modal
-// wrapper (search bar + ArchivedTripTable + opens ArchivedTripDetailModal),
-// mirroring ArchivedDrivers.tsx / ArchivedUsersModal.tsx.
+
 
 import { useState } from "react";
 import { Alert, Input, Modal } from "@/src/Components/UI";
@@ -16,18 +13,7 @@ interface ArchivedTripModalProps {
 }
 
 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" />
 );
 
 /**
diff --git a/src/Components/Trip/archive/ArchivedTripTable.tsx b/src/Components/Trip/archive/ArchivedTripTable.tsx
index aee96d3..66edfb2 100644
--- a/src/Components/Trip/archive/ArchivedTripTable.tsx
+++ b/src/Components/Trip/archive/ArchivedTripTable.tsx
@@ -1,135 +1,79 @@
 "use client";
 
-// src/Components/Trip/archive/ArchivedTripTable.tsx
-// Split out of the old ArchivedTripList.tsx — this is just the table portion
-// (headers, rows, pagination), mirroring ArchivedDriverTable.tsx. Styling is
-// preserved exactly (Tailwind classes) as it was in the original file.
-
-import { Spinner, EmptyState, Button } from "@/src/Components/UI";
+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";
 
-// ── Status badge — reuses the existing trip status color map ────────────────
-function TripStatusBadge({ status }: { status: Trip["status"] }) {
-  const s = TRIP_STATUS_MAP[status];
-  return (
-    <span
-      className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-[11px] font-bold"
-      style={{ color: s.color, background: s.bg, border: `1px solid ${s.border}` }}
-    >
-      <span className="h-1.5 w-1.5 rounded-full" style={{ background: s.dot }} />
-      {s.label}
-    </span>
-  );
-}
-
-// ── Date formatting helper ───────────────────────────────────────────────────
 function fmtDate(iso?: string | null): string {
   if (!iso) return "—";
-  return new Date(iso).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" });
+  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;
+  trips: Trip[];
+  loading: boolean;
+  search: string;
+  page: number;
+  pages: number;
+  onView: (trip: Trip) => void;
   onPageChange: (p: number) => void;
 }
 
-/**
- * ArchivedTripTable
- * Renders the paginated, searchable table of archived trips, including
- * loading, empty, and data-row states. Mirrors ArchivedDriverTable.tsx.
- */
 export function ArchivedTripTable({ trips, loading, search, page, pages, onView, onPageChange }: ArchivedTripTableProps) {
-  return (
-    <div className="overflow-hidden rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] shadow-[var(--shadow-card)]">
-      {/* column headers */}
-      <div className="grid grid-cols-[2fr_1.5fr_1fr_1fr_1fr] gap-2 border-b border-[var(--color-border)] bg-[var(--color-surface-muted)] px-6 py-3 text-[11px] font-bold uppercase tracking-[0.2em] text-[var(--color-text-muted)]">
-        <span>الرحلة</span>
-        <span>الحالة</span>
-        <span className="text-center">البدء</span>
-        <span className="text-center">الانتهاء</span>
-        <span className="text-center">النقد المحصّل</span>
-      </div>
-
-      {/* ── Loading state ── */}
-      {loading ? (
-        <div className="flex items-center justify-center gap-3 py-16 text-[var(--color-text-muted)]">
-          <Spinner size="sm" />
-          <span className="text-[13px]">جارٍ التحميل…</span>
+  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>
-      ) : trips.length === 0 ? (
-        /* ── Empty state ── */
-        <EmptyState
-          icon="🗄️"
-          title="لا توجد رحلات مؤرشفة"
-          description={search ? `لا توجد نتائج لـ "${search}"` : "لم يتم أرشفة أي رحلات بعد."}
-        />
-      ) : (
-        /* ── Data rows ── */
-        <ul className="m-0 list-none p-0">
-          {trips.map((trip, i) => (
-            <li
-              key={trip.id}
-              onClick={() => onView(trip)}
-              className={`grid grid-cols-[2fr_1.5fr_1fr_1fr_1fr] items-center gap-2 border-b border-[var(--color-border)] px-6 py-3.5 text-[13px] transition-colors hover:bg-[var(--color-surface-muted)] cursor-pointer ${
-                i % 2 !== 0 ? "bg-[var(--color-surface-muted)]/40" : ""
-              }`}
-            >
-              <div className="min-w-0">
-                <p className="m-0 truncate font-semibold text-[var(--color-text-primary)]">{trip.title}</p>
-                <p className="mt-0.5 font-mono text-[11px] text-[var(--color-brand-600)]">{trip.tripNumber}</p>
-              </div>
-              <div>
-                <TripStatusBadge status={trip.status} />
-              </div>
-              <span className="text-center text-[12px] text-[var(--color-text-muted)]">
-                {fmtDate(trip.startTime)}
-              </span>
-              <span className="text-center text-[12px] text-[var(--color-text-muted)]">
-                {fmtDate(trip.endTime)}
-              </span>
-              <span className="text-center font-mono text-[12px] font-semibold text-[var(--color-text-primary)]">
-                {trip.totalCashCollected != null
-                  ? `${Number(trip.totalCashCollected).toLocaleString("ar-SA")} ر.س`
-                  : "—"}
-              </span>
-            </li>
-          ))}
-        </ul>
-      )}
-
-      {/* ── Pagination ── */}
-      {pages > 1 && (
-        <div className="flex items-center justify-between border-t border-[var(--color-border)] px-6 py-3.5">
-          <span className="text-[12px] text-[var(--color-text-muted)]">
-            صفحة <strong className="text-[var(--color-text-primary)]">{page}</strong> من{" "}
-            <strong className="text-[var(--color-text-primary)]">{pages}</strong>
+      ),
+    },
+    {
+      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>
-          <div className="flex gap-2">
-            <Button
-              variant="secondary"
-              size="sm"
-              disabled={page === 1}
-              onClick={() => onPageChange(Math.max(1, page - 1))}
-            >
-              السابق
-            </Button>
-            <Button
-              variant="secondary"
-              size="sm"
-              disabled={page === pages}
-              onClick={() => onPageChange(Math.min(pages, page + 1))}
-            >
-              التالي
-            </Button>
-          </div>
-        </div>
-      )}
-    </div>
+        );
+      },
+    },
+    { 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."}
+    />
   );
 }
\ No newline at end of file
diff --git a/src/Components/UI/ActionButtons.tsx b/src/Components/UI/ActionButtons.tsx
new file mode 100644
index 0000000..197e126
--- /dev/null
+++ b/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>
+      )}
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/Components/UI/ArchiveButton.tsx b/src/Components/UI/ArchiveButton.tsx
index 6b5e6d7..254546c 100644
--- a/src/Components/UI/ArchiveButton.tsx
+++ b/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>
   );
diff --git a/src/Components/UI/Header.tsx b/src/Components/UI/Header.tsx
index 880fd9b..9b0cd93 100644
--- a/src/Components/UI/Header.tsx
+++ b/src/Components/UI/Header.tsx
@@ -122,17 +122,7 @@ export default function Header({
             </Select>
           ) : (
             <Button onClick={onAdd}>
-              <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" />
               إضافة {name}
             </Button>
           )}
diff --git a/src/Components/UI/ModelCard.tsx b/src/Components/UI/ModelCard.tsx
new file mode 100644
index 0000000..e303070
--- /dev/null
+++ b/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>
+  );
+}
\ No newline at end of file
diff --git a/src/Components/UI/ReusableTable.tsx b/src/Components/UI/ReusableTable.tsx
new file mode 100644
index 0000000..f793967
--- /dev/null
+++ b/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>
+  );
+}
\ No newline at end of file
diff --git a/src/Components/UI/Spinner.tsx b/src/Components/UI/Spinner.tsx
index 97bd3d8..0220c3e 100644
--- a/src/Components/UI/Spinner.tsx
+++ b/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"
-      />
-      <path
-        className="opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8v8H4z"
-      />
-    </svg>
+      style={{ fontSize: sizeMap[size], lineHeight: 1 }}
+    />
   );
 }
 
diff --git a/src/Components/UI/index.ts b/src/Components/UI/index.ts
index 6595442..63c15f3 100644
--- a/src/Components/UI/index.ts
+++ b/src/Components/UI/index.ts
@@ -25,4 +25,7 @@ export { Badge } from "./Badge";
 
 export { ArchiveButton } from "./ArchiveButton"
 export { FileInput } from "./FailInput"
-export {IconBtn} from "./IconBtn"
\ No newline at end of file
+export {IconBtn} from "./IconBtn"
+export { ReusableTable } from "./ReusableTable";
+export { ActionButtons } from "./ActionButtons";
+export { ModelCard } from "./ModelCard";
\ No newline at end of file
diff --git a/src/Components/User/UserTable.tsx b/src/Components/User/UserTable.tsx
index ca93bce..9144a00 100644
--- a/src/Components/User/UserTable.tsx
+++ b/src/Components/User/UserTable.tsx
@@ -1,158 +1,115 @@
 "use client";
 
-import { Badge, Button, EmptyState, IconBtn, 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>
   );
 }
 
-// ── 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;
-  search:       string;
-  page:         number;
-  pages:        number;
-  onEdit:       (user: User) => void;
-  onDelete:     (user: User) => void;
-  onView:       (user: User) => void;
-  onAddFirst:   () => void;
+  users: User[];
+  loading: boolean;
+  search: string;
+  page: number;
+  pages: number;
+  onEdit: (user: User) => void;
+  onDelete: (user: User) => void;
+  onView: (user: User) => void;
+  onAddFirst: () => void;
   onPageChange: (p: number) => void;
 }
 
-// ── main table ───────────────────────────────────────────────────────────────
-export function UserTable({ users, loading, search, page, pages, onEdit, onDelete, onView, onAddFirst, onPageChange }: UserTableProps) {
+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" }),
+    },
+  ];
+
   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>
-      </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}"` : "لا يوجد مستخدمون لعرضهم."}
-          action={
-            !search && (
-              <Button type="button" variant="ghost" size="sm" onClick={onAddFirst}>
-                أضف أول مستخدم
-              </Button>
-            )
-          }
+    <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>
+    />
   );
 }
\ No newline at end of file
diff --git a/src/Components/User/archive/Archivedusersmodal.tsx b/src/Components/User/archive/Archivedusersmodal.tsx
index 8cd83c7..0d96fe9 100644
--- a/src/Components/User/archive/Archivedusersmodal.tsx
+++ b/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) {
diff --git a/src/Components/User/archive/Archivedusertable.tsx b/src/Components/User/archive/Archivedusertable.tsx
index b0fb571..33df88d 100644
--- a/src/Components/User/archive/Archivedusertable.tsx
+++ b/src/Components/User/archive/Archivedusertable.tsx
@@ -1,134 +1,79 @@
 "use client";
 
-import { Button, EmptyState, IconBtn, 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>
   );
 }
 
-// ── 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;
-  search:       string;
-  page:         number;
-  pages:        number;
-  onView:       (user: ArchivedUser) => void;
+  users: ArchivedUser[];
+  loading: boolean;
+  search: string;
+  page: number;
+  pages: number;
+  onView: (user: ArchivedUser) => void;
   onPageChange: (p: number) => void;
 }
 
-// ── main table ───────────────────────────────────────────────────────────────
 export function ArchivedUserTable({ users, loading, search, page, pages, onView, onPageChange }: ArchivedUserTableProps) {
+  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>
+      ),
+    },
+    { 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" }),
+    }
+  ];
+
   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,
-            }}>
-              <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>
-              <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>
-      )}
-
-      {/* 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>
+    <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)} />}
+    />
   );
 }
\ No newline at end of file
diff --git a/src/Components/audit/AuditDetailsModel.tsx b/src/Components/audit/AuditDetailsModel.tsx
new file mode 100644
index 0000000..15ebd90
--- /dev/null
+++ b/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>
+  );
+}
\ No newline at end of file
diff --git a/src/Components/audit/AuditTable.tsx b/src/Components/audit/AuditTable.tsx
new file mode 100644
index 0000000..252d53a
--- /dev/null
+++ b/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>
+  );
+}
\ No newline at end of file
diff --git a/src/Components/car/CarDetailPanel.tsx b/src/Components/car/CarDetailPanel.tsx
index 3794859..d39e344 100644
--- a/src/Components/car/CarDetailPanel.tsx
+++ b/src/Components/car/CarDetailPanel.tsx
@@ -229,11 +229,7 @@ export function CarDetailPanel({ carId, onClose, onEdit, onDelete }: CarDetailPa
             {/* Row 1: secondary views */}
             <div style={{ display: "flex", gap: "0.75rem" }}>
               <Button type="button" variant="secondary" style={{ flex: 1 }} onClick={() => setGallery(true)}>
-                <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>
+                <i className="ti ti-photo" style={{ fontSize: 16 }} aria-hidden="true" />
                 الصور
               </Button>
               <Button
@@ -242,9 +238,7 @@ export function CarDetailPanel({ carId, onClose, onEdit, onDelete }: CarDetailPa
                 style={{ flex: 1 }}
                 onClick={() => router.push(`/dashboard/cars/${car.id}/maintenance`)}
               >
-                <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>
+                <i className="ti ti-tool" style={{ fontSize: 16 }} aria-hidden="true" />
                 عرض تاريخ الصيانة
               </Button>
             </div>
@@ -252,10 +246,7 @@ export function CarDetailPanel({ carId, onClose, onEdit, onDelete }: CarDetailPa
             {/* Row 2: primary edit / delete */}
             <div style={{ display: "flex", gap: "0.75rem" }}>
               <Button type="button" variant="primary" style={{ flex: 2 }} onClick={() => onEdit(car)}>
-                <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>
               <Button type="button" variant="danger" onClick={() => onDelete(car)}>
diff --git a/src/Components/car/CarImageGallery.tsx b/src/Components/car/CarImageGallery.tsx
index b4c8003..d65e6ad 100644
--- a/src/Components/car/CarImageGallery.tsx
+++ b/src/Components/car/CarImageGallery.tsx
@@ -120,9 +120,7 @@ export function CarImageGallery({ car, onClose }: CarImageGalleryProps) {
             loading={uploading}
           >
             {!uploading && (
-              <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-upload" style={{ fontSize: 14 }} aria-hidden="true" />
             )}
             {uploading ? "جارٍ الرفع…" : "رفع صور"}
           </Button>
@@ -224,10 +222,7 @@ export function CarImageGallery({ car, onClose }: CarImageGalleryProps) {
                     >
                       {isDeleting
                         ? <Spinner size="sm" className="text-red-600" />
-                        : <svg width="12" height="12" 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" />
-                          </svg>
+                        : <i className="ti ti-trash" style={{ fontSize: 12 }} aria-hidden="true" />
                       }
                     </IconBtn>
                   </div>
diff --git a/src/Components/car/archive/Archivedcarsmodal.tsx b/src/Components/car/archive/Archivedcarsmodal.tsx
index 014d921..6e8da63 100644
--- a/src/Components/car/archive/Archivedcarsmodal.tsx
+++ b/src/Components/car/archive/Archivedcarsmodal.tsx
@@ -48,9 +48,7 @@ export function ArchivedCarsModal({ onClose }: ArchivedCarsModalProps) {
             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>
diff --git a/src/Components/car/archive/Archivedcartable.tsx b/src/Components/car/archive/Archivedcartable.tsx
index 4511c1d..fe71599 100644
--- a/src/Components/car/archive/Archivedcartable.tsx
+++ b/src/Components/car/archive/Archivedcartable.tsx
@@ -1,20 +1,17 @@
 "use client";
 
-import { Button, EmptyState, IconBtn, Spinner } from "../../UI";
-import { STATUS_MAP, fmtDateShort } from "@/src/types/car";
-import type { Car } from "@/src/types/car";
+// src/Components/Car/archive/ArchivedCarTable.tsx
+// Converted to use ReusableTable, matching DriverTable / OrderTable /
+// AuditTable — previously this was its own hand-rolled cardStyle/thStyle
+// grid. Same columns, same view-only action (delete/restore still not
+// implemented), same empty/loading text. Row click now also opens the
+// view action, same as Driver/Order's onRowClick, in addition to the
+// explicit eye icon.
 
-// ── 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)",
-};
+import { IconBtn, ReusableTable } from "../../UI";
+import { STATUS_MAP, fmtDateShort } from "@/src/types/car";
+import type { TableColumn } from "@/src/types/models";
+import type { Car } from "@/src/types/car";
 
 // ── Props ────────────────────────────────────────────────────────────────────
 interface ArchivedCarTableProps {
@@ -29,100 +26,89 @@ interface ArchivedCarTableProps {
 
 // ── main table ───────────────────────────────────────────────────────────────
 export function ArchivedCarTable({ cars, loading, search, page, pages, onView, onPageChange }: ArchivedCarTableProps) {
-  return (
-    <div style={cardStyle}>
-      {/* column headers */}
-      <div dir="rtl" style={{ display: "grid", gridTemplateColumns: "2fr 1.5fr 1fr 1fr 1fr 100px", ...thStyle }}>
-        <span>المركبة</span>
-        <span>رقم اللوحة</span>
-        <span>الفرع</span>
-        <span>آخر حالة</span>
-        <span style={{ textAlign: "center" }}>تاريخ الإضافة</span>
-        <span style={{ textAlign: "center" }}>إجراءات</span>
-      </div>
-
-      {/* loading state */}
-      {loading ? (
-        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, padding: "4rem 0", color: "var(--color-text-muted)" }}>
-          <Spinner size="sm" className="text-blue-600" />
-          <span style={{ fontSize: 13 }}>جارٍ التحميل…</span>
+  const columns: TableColumn<Car>[] = [
+    {
+      key: "vehicle",
+      header: "المركبة",
+      width: "2fr",
+      render: (c) => (
+        <div>
+          <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>
+            {c.manufacturer} {c.model}
+          </p>
+          <p style={{ marginTop: 2, fontSize: 11, color: "var(--color-text-muted)" }}>
+            {c.year}{c.color ? ` · ${c.color}` : ""}
+          </p>
         </div>
-      ) : cars.length === 0 ? (
-        /* empty state */
-        <EmptyState
-          icon="🚗"
-          title={search ? `لا توجد نتائج لـ "${search}"` : "لا توجد مركبات في الأرشيف."}
-        />
-      ) : (
-        /* data rows */
-        <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
-          {cars.map((c, i) => {
-            const status = STATUS_MAP[c.currentStatus];
-            return (
-              <li key={c.id} style={{
-                display: "grid", gridTemplateColumns: "2fr 1.5fr 1fr 1fr 1fr 100px",
-                alignItems: "center", gap: "0.5rem", padding: "0.875rem 1.5rem",
-                borderBottom: "1px solid var(--color-border)",
-                background: i % 2 !== 0 ? "var(--color-surface-muted)" : "transparent",
-                fontSize: 13,
-              }}>
-                <div>
-                  <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>
-                    {c.manufacturer} {c.model}
-                  </p>
-                  <p style={{ marginTop: 2, fontSize: 11, color: "var(--color-text-muted)" }}>{c.year}{c.color ? ` · ${c.color}` : ""}</p>
-                </div>
-                <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "#2563EB", fontWeight: 600 }}>
-                  {c.plateLetters} {c.plateNumber}
-                </span>
-                <span style={{ color: "var(--color-text-secondary)" }}>{c.branch?.name ?? "—"}</span>
-                <span style={{ display: "inline-flex", alignItems: "center", gap: 5, borderRadius: "var(--radius-full)", border: `1px solid ${status.border}`, background: status.bg, padding: "0.2rem 0.625rem", fontSize: 11, fontWeight: 700, color: status.color, width: "fit-content" }}>
-                  <span style={{ width: 6, height: 6, borderRadius: "50%", background: status.dot }} />
-                  {status.label}
-                </span>
-                <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
-                  {fmtDateShort(c.createdAt)}
-                </span>
-                <div style={{ display: "flex", justifyContent: "center", gap: 4 }}>
-                  {/* view only — delete/restore not implemented yet */}
-                  <IconBtn title={`عرض ${c.manufacturer} ${c.model}`} color="#059669" bg="#ECFDF5" borderColor="#A7F3D0" onClick={() => onView(c)}>
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
-                      <circle cx="12" cy="12" r="3" />
-                    </svg>
-                  </IconBtn>
-                </div>
-              </li>
-            );
-          })}
-        </ul>
-      )}
-
-      {/* pagination */}
-      {pages > 1 && (
-        <div dir="rtl" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", borderTop: "1px solid var(--color-border)", padding: "0.875rem 1.5rem" }}>
-          <span style={{ fontSize: 12, color: "var(--color-text-muted)" }}>
-            صفحة <strong style={{ color: "var(--color-text-primary)" }}>{page}</strong> من <strong style={{ color: "var(--color-text-primary)" }}>{pages}</strong>
+      ),
+    },
+    {
+      key: "plate",
+      header: "رقم اللوحة",
+      width: "1.5fr",
+      render: (c) => (
+        <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "#2563EB", fontWeight: 600 }}>
+          {c.plateLetters} {c.plateNumber}
+        </span>
+      ),
+    },
+    { key: "branch", header: "الفرع", width: "1fr", render: (c) => c.branch?.name ?? "—" },
+    {
+      key: "status",
+      header: "آخر حالة",
+      width: "1fr",
+      render: (c) => {
+        const status = STATUS_MAP[c.currentStatus];
+        return (
+          <span style={{
+            display: "inline-flex", alignItems: "center", gap: 5,
+            borderRadius: "var(--radius-full)",
+            border: `1px solid ${status.border}`,
+            background: status.bg,
+            padding: "0.2rem 0.625rem",
+            fontSize: 11, fontWeight: 700, color: status.color,
+            width: "fit-content",
+          }}>
+            <span style={{ width: 6, height: 6, borderRadius: "50%", background: status.dot }} />
+            {status.label}
           </span>
-          <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"
-                variant="secondary"
-                size="sm"
-                onClick={btn.action}
-                disabled={btn.disabled}
-              >
-                {btn.label}
-              </Button>
-            ))}
-          </div>
-        </div>
+        );
+      },
+    },
+    {
+      key: "createdAt",
+      header: "تاريخ الإضافة",
+      width: "1fr",
+      render: (c) => (
+        <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
+          {fmtDateShort(c.createdAt)}
+        </span>
+      ),
+    },
+  ];
+
+  return (
+    <ReusableTable
+      columns={columns}
+      data={cars}
+      loading={loading}
+      search={search}
+      page={page}
+      pages={pages}
+      onPageChange={onPageChange}
+      actionsWidth="100px"
+      onRowClick={onView}
+      emptyDescription={search ? `لا توجد نتائج لـ "${search}"` : "لا توجد مركبات في الأرشيف."}
+      renderActions={(c) => (
+        // view only — delete/restore not implemented yet
+        <IconBtn
+          title={`عرض ${c.manufacturer} ${c.model}`}
+          color="#059669" bg="#ECFDF5" borderColor="#A7F3D0"
+          onClick={() => onView(c)}
+        >
+          <i className="ti ti-eye" style={{ fontSize: 14 }} aria-hidden="true" />
+        </IconBtn>
       )}
-    </div>
+    />
   );
 }
\ No newline at end of file
diff --git a/src/Components/role/RoleTable.tsx b/src/Components/role/RoleTable.tsx
index 85f9175..a6e9447 100644
--- a/src/Components/role/RoleTable.tsx
+++ b/src/Components/role/RoleTable.tsx
@@ -1,11 +1,9 @@
 "use client";
 
-import { Role } from "@/src/types/role";
-import { Button, EmptyState, IconBtn, Spinner } from "../UI";
+import { Button, ReusableTable, ActionButtons } from "../UI";
+import type { TableColumn } from "@/src/types/models";
+import type { Role } from "@/src/types/role";
 
-// ── 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={{
@@ -18,157 +16,88 @@ function StatusBadge({ active }: { active: boolean }) {
       color: active ? "#166534" : "#991B1B",
     }}>
       <span style={{ width: 6, height: 6, borderRadius: "50%", background: active ? "#16A34A" : "#DC2626" }} />
-      {active ? "نشط" : "معطل"}
+      {active ? "Active" : "Disabled"}
     </span>
   );
 }
 
-
-
-// ── 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 RoleTableProps {
-  roles:        Role[];
-  loading:      boolean;
-  search:       string;
-  page:         number;
-  pages:        number;
-  onEdit:       (role: Role) => void;
-  onDelete:     (role: Role) => void;
-  onView:       (role: Role) => void;
-  onAddFirst:   () => void;
+  roles: Role[];
+  loading: boolean;
+  search: string;
+  page: number;
+  pages: number;
+  onEdit: (role: Role) => void;
+  onDelete: (role: Role) => void;
+  onView: (role: Role) => void;
+  onAddFirst: () => void;
   onPageChange: (p: number) => void;
 }
 
-// ── Main table ────────────────────────────────────────────────────────────────
 export function RoleTable({
   roles, loading, search, page, pages,
   onEdit, onDelete, onView, onAddFirst, onPageChange,
 }: RoleTableProps) {
+  const columns: TableColumn<Role>[] = [
+    {
+      key: "name",
+      header: " الدور",
+      width: "2fr",
+      render: (r) => <span style={{ fontWeight: 600, color: "var(--color-text-primary)" }}>{r.name}</span>,
+    },
+    {
+      key: "description",
+      header: "الوصف",
+      width: "3fr",
+      render: (r) =>
+        r.description || <span style={{ color: "var(--color-text-hint)", fontStyle: "italic" }}>No description</span>,
+    },
+    {
+      key: "permissions",
+      header: "الصلحيات",
+      width: "1fr",
+      render: (r) => (
+        <span style={{
+          display: "inline-flex", alignItems: "center", justifyContent: "center",
+          width: 28, height: 28, borderRadius: "var(--radius-full)",
+          background: "#EFF6FF", border: "1px solid #BFDBFE",
+          fontSize: 11, fontWeight: 700, color: "#1D4ED8",
+        }}>
+          {r.permissions?.length ?? 0}
+        </span>
+      ),
+    },
+    { key: "status", header: "الحالة", width: "1fr", render: (r) => <StatusBadge active={r.isActive} /> },
+  ];
+
   return (
-    <div style={cardStyle}>
-      {/* Column headers */}
-      <div dir="rtl" style={{ display: "grid", gridTemplateColumns: "2fr 3fr 1fr 1fr 120px", ...thStyle }}>
-        <span>اسم الدور</span>
-        <span>الوصف</span>
-        <span>الصلاحيات</span>
-        <span>الحالة</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>
-      ) : roles.length === 0 ? (
-        /* Empty state */
-        <EmptyState
-          icon="🛡️"
-          title={search ? `لا توجد نتائج لـ "${search}"` : "لا توجد أدوار لعرضها"}
-          description={!search ? "ابدأ بإنشاء أول دور في النظام" : undefined}
-          action={
-            !search && (
-              <Button type="button" variant="ghost" size="sm" onClick={onAddFirst}>
-                إضافة أول دور
-              </Button>
-            )
-          }
+    <ReusableTable
+      columns={columns}
+      data={roles}
+      loading={loading}
+      search={search}
+      page={page}
+      pages={pages}
+      onPageChange={onPageChange}
+      actionsWidth="120px"
+      emptyIcon="🛡️"
+      emptyTitle={search ? undefined : "No roles to display"}
+      emptyDescription={!search ? "Start by creating the first role in the system" : undefined}
+      emptyAction={
+        !search && (
+          <Button type="button" variant="ghost" size="sm" onClick={onAddFirst}>
+            Add first role
+          </Button>
+        )
+      }
+      renderActions={(r) => (
+        <ActionButtons
+          itemLabel={r.name}
+          onView={() => onView(r)}
+          onEdit={() => onEdit(r)}
+          onDelete={() => onDelete(r)}
         />
-      ) : (
-        /* Data rows */
-        <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
-          {roles.map((role, i) => (
-            <li key={role.id} style={{
-              display: "grid", gridTemplateColumns: "2fr 3fr 1fr 1fr 120px",
-              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, color: "var(--color-text-primary)" }}>{role.name}</span>
-              <span style={{ color: "var(--color-text-secondary)", fontSize: 12 }}>
-                {role.description || <span style={{ color: "var(--color-text-hint)", fontStyle: "italic" }}>لا يوجد وصف</span>}
-              </span>
-              <span style={{
-                display: "inline-flex", alignItems: "center", justifyContent: "center",
-                width: 28, height: 28, borderRadius: "var(--radius-full)",
-                background: "#EFF6FF", border: "1px solid #BFDBFE",
-                fontSize: 11, fontWeight: 700, color: "#1D4ED8",
-              }}>
-                {role.permissions?.length ?? 0}
-              </span>
-              <StatusBadge active={role.isActive} />
-              <div style={{ display: "flex", justifyContent: "center", gap: 4 }}>
-                {/* View */}
-                <IconBtn title={`عرض ${role.name}`} color="#059669" bg="#ECFDF5" borderColor="#A7F3D0" onClick={() => onView(role)}>
-                  <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={`تعديل ${role.name}`} color="#1D4ED8" bg="#EFF6FF" borderColor="#BFDBFE" onClick={() => onEdit(role)}>
-                  <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={`حذف ${role.name}`} color="#DC2626" bg="#FEF2F2" borderColor="#FECACA" onClick={() => onDelete(role)}>
-                  <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>
+    />
   );
 }
\ No newline at end of file
diff --git a/src/Components/role/archive/ArchivedRoleDetailModal.tsx b/src/Components/role/archive/ArchivedRoleDetailModal.tsx
index 73d3679..0084565 100644
--- a/src/Components/role/archive/ArchivedRoleDetailModal.tsx
+++ b/src/Components/role/archive/ArchivedRoleDetailModal.tsx
@@ -59,10 +59,7 @@ function RoleIcon() {
       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="M12 2 3 7v6c0 5 4 9 9 9s9-4 9-9V7l-9-5z" />
-        <path d="m9 12 2 2 4-4" />
-      </svg>
+      <i className="ti ti-shield-check" style={{ fontSize: 26, color: "#FFF" }} aria-hidden="true" />
     </div>
   );
 }
diff --git a/src/Components/role/archive/ArchivedRoleTable.tsx b/src/Components/role/archive/ArchivedRoleTable.tsx
index 929399e..c5a0278 100644
--- a/src/Components/role/archive/ArchivedRoleTable.tsx
+++ b/src/Components/role/archive/ArchivedRoleTable.tsx
@@ -1,131 +1,61 @@
 "use client";
 
-import { Button, EmptyState, IconBtn, Spinner } from "../../UI";
+import { ReusableTable, ActionButtons } from "../../UI";
+import type { TableColumn } from "@/src/types/models";
 import type { ArchivedRole } from "@/src/types/role";
 
-// ── 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>
   );
 }
 
-// ── 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 ArchivedRoleTableProps {
-  roles:        ArchivedRole[];
-  loading:      boolean;
-  search:       string;
-  page:         number;
-  pages:        number;
-  onView:       (role: ArchivedRole) => void;
+  roles: ArchivedRole[];
+  loading: boolean;
+  search: string;
+  page: number;
+  pages: number;
+  onView: (role: ArchivedRole) => void;
   onPageChange: (p: number) => void;
 }
 
-// ── main table ───────────────────────────────────────────────────────────────
 export function ArchivedRoleTable({ roles, loading, search, page, pages, onView, onPageChange }: ArchivedRoleTableProps) {
+  const columns: TableColumn<ArchivedRole>[] = [
+    { key: "name", header: "الدور", width: "2fr", render: (r) => <span style={{ fontWeight: 600, color: "var(--color-text-primary)" }}>{r.name}</span> },
+    { key: "description", header: "الوصف", width: "2fr", render: (r) => r.description || "—" },
+    { key: "status", header: "الحالة", width: "1fr", render: (r) => <StatusBadge active={r.isActive} /> },
+    {
+      key: "createdAt",
+      header: "تاريخ الانشاء",
+      width: "1fr",
+      align: "center",
+      render: (r) => new Date(r.createdAt).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" }),
+    },
+    {
+      key: "updatedAt",
+      header: "تاريخ التعديل",
+      width: "1fr",
+      align: "center",
+      render: (r) => new Date(r.updatedAt).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" }),
+    },
+  ];
+
   return (
-    <div style={cardStyle}>
-      {/* column headers */}
-      <div dir="rtl" style={{ display: "grid", gridTemplateColumns: "2fr 2fr 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>
-      ) : roles.length === 0 ? (
-        /* empty state */
-        <EmptyState
-          icon="🛡️"
-          title={search ? `لا توجد نتائج لـ "${search}"` : "لا توجد أدوار في الأرشيف."}
-        />
-      ) : (
-        /* data rows */
-        <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
-          {roles.map((r, i) => (
-            <li key={r.id} style={{
-              display: "grid", gridTemplateColumns: "2fr 2fr 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,
-            }}>
-              <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>{r.name}</p>
-              <span style={{ color: "var(--color-text-secondary)" }}>{r.description || "—"}</span>
-              <StatusBadge active={r.isActive} />
-              <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
-                {new Date(r.createdAt).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" })}
-              </span>
-              <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
-                {new Date(r.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={`عرض ${r.name}`} 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>
-      )}
-
-      {/* 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>
+    <ReusableTable
+      columns={columns}
+      data={roles}
+      loading={loading}
+      search={search}
+      page={page}
+      pages={pages}
+      onPageChange={onPageChange}
+      emptyIcon="🛡️"
+      emptyDescription={search ? `No results for "${search}"` : "No archived roles."}
+      renderActions={(r) => <ActionButtons itemLabel={r.name} onView={() => onView(r)} />}
+    />
   );
 }
\ No newline at end of file
diff --git a/src/Components/role/archive/ArchivedRolesModal.tsx b/src/Components/role/archive/ArchivedRolesModal.tsx
index e8423b1..42708ac 100644
--- a/src/Components/role/archive/ArchivedRolesModal.tsx
+++ b/src/Components/role/archive/ArchivedRolesModal.tsx
@@ -11,18 +11,7 @@ interface ArchivedRolesModalProps {
 }
 
 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 ArchivedRolesModal({ onClose }: ArchivedRolesModalProps) {
diff --git a/src/hooks/useDriver.ts b/src/hooks/useDriver.ts
index ae4fdce..c7f5aac 100644
--- a/src/hooks/useDriver.ts
+++ b/src/hooks/useDriver.ts
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useReducer, useState } from "react";
+import { useCallback, useEffect, useReducer, useRef, useState } from "react";
 import { getStoredToken } from "@/src/lib/auth";
 import { driverService } from "@/src/services/driver.service";
 import type { Driver, CreateDriverPayload, UpdateDriverPayload } from "@/src/types/driver";
@@ -59,11 +59,21 @@ export function useDrivers() {
   const [page, setPage] = useState(1);
   const [notification, setNotification] = useState<ToastNotification | null>(null);
 
+  // Ref so the dismiss timer can be cleared if a new notification arrives
+  // before the previous one expires — prevents stale-closure memory leaks
+  // and premature/duplicate toast dismissal on rapid successive calls.
+  // Pattern copied from useTrip.ts for consistency across list hooks.
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   const notify = useCallback((n: ToastNotification) => {
+    if (timerRef.current) clearTimeout(timerRef.current);
     setNotification(n);
-    setTimeout(() => setNotification(null), 4000);
+    timerRef.current = setTimeout(() => setNotification(null), 4000);
   }, []);
 
+  // Clear pending timer on unmount
+  useEffect(() => () => { if (timerRef.current) clearTimeout(timerRef.current); }, []);
+
   // ── Fetch drivers ─────────────────────────────────────────────────────────
   const loadDrivers = useCallback(async (p: number, q: string) => {
     dispatch({ type: "LOAD_START" });
@@ -179,7 +189,6 @@ export function useDrivers() {
     updateDriver,
     deleteDriver,
     notification,
-    clearNotification: () => setNotification(null),
     reload: () => loadDrivers(page, search),
   };
 }
\ No newline at end of file
diff --git a/src/hooks/useOrder.ts b/src/hooks/useOrder.ts
index 60b2291..0b96430 100644
--- a/src/hooks/useOrder.ts
+++ b/src/hooks/useOrder.ts
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useReducer, useState } from "react";
+import { useCallback, useEffect, useReducer, useRef, useState } from "react";
 import { orderService } from "@/src/services/order.service";
 import type {
   Order,
@@ -64,11 +64,21 @@ export function useOrders() {
   const [statusFilter, setStatusFilter] = useState("");
   const [notification, setNotification] = useState<ToastNotification | null>(null);
 
+  // Ref so the dismiss timer can be cleared if a new notification arrives
+  // before the previous one expires — prevents stale-closure memory leaks
+  // and premature/duplicate toast dismissal on rapid successive calls.
+  // Pattern copied from useTrip.ts for consistency across list hooks.
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   const notify = useCallback((n: ToastNotification) => {
+    if (timerRef.current) clearTimeout(timerRef.current);
     setNotification(n);
-    setTimeout(() => setNotification(null), 4000);
+    timerRef.current = setTimeout(() => setNotification(null), 4000);
   }, []);
 
+  // Clear pending timer on unmount
+  useEffect(() => () => { if (timerRef.current) clearTimeout(timerRef.current); }, []);
+
   // ── Fetch orders ───────────────────────────────────────────────────────
   const loadOrders = useCallback(async (p: number, q: string, status: string) => {
     dispatch({ type: "LOAD_START" });
diff --git a/src/hooks/useUser.ts b/src/hooks/useUser.ts
index 3226d9d..83bb00c 100644
--- a/src/hooks/useUser.ts
+++ b/src/hooks/useUser.ts
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useReducer, useState } from "react";
+import { useCallback, useEffect, useReducer, useRef, useState } from "react";
 import { getStoredToken } from "@/src/lib/auth";
 import { userService } from "@/src/services/user.service";
 import type { Branch } from "@/src/types/branch";
@@ -42,12 +42,22 @@ export function useUsers() {
   const [branches, setBranches]   = useState<Branch[]>([]);
   const [notification, setNotification] = useState<ToastNotification | null>(null);
 
-  //        notify with auto-dismiss after 4s 
+  // Ref so the dismiss timer can be cleared if a new notification arrives
+  // before the previous one expires — prevents stale-closure memory leaks
+  // and premature/duplicate toast dismissal on rapid successive calls.
+  // Pattern copied from useTrip.ts for consistency across list hooks.
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  //        notify with auto-dismiss after 4s
   const notify = useCallback((n: ToastNotification) => {
+    if (timerRef.current) clearTimeout(timerRef.current);
     setNotification(n);
-    setTimeout(() => setNotification(null), 4000);
+    timerRef.current = setTimeout(() => setNotification(null), 4000);
   }, []);
 
+  // Clear pending timer on unmount
+  useEffect(() => () => { if (timerRef.current) clearTimeout(timerRef.current); }, []);
+
   // fetch users with pagination and search
  const loadUsers = useCallback(async (p: number, q: string) => {
   dispatch({ type: "LOAD_START" });
@@ -90,7 +100,7 @@ useEffect(() => {
     try {
       const token = getStoredToken();
       const res   = await userService.update(id, data, token);
-      dispatch({ type: "UPDATE", user: res });
+      dispatch({ type: "UPDATE", user: res?.data });
       notify({ type: "success", message: "تم تحديث بيانات المستخدم بنجاح." });
       return true;
     } catch (err) {
diff --git a/src/types/audit.ts b/src/types/audit.ts
new file mode 100644
index 0000000..fdbac8f
--- /dev/null
+++ b/src/types/audit.ts
@@ -0,0 +1,14 @@
+
+
+export 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;
+}
\ No newline at end of file
diff --git a/src/types/models.ts b/src/types/models.ts
new file mode 100644
index 0000000..6ad533e
--- /dev/null
+++ b/src/types/models.ts
@@ -0,0 +1,108 @@
+
+
+import type { ReactNode } from "react";
+
+/**
+ * Minimal shape every row must satisfy so ReusableTable can key rows.
+ * Extend this in your model-specific type (e.g. `interface User extends
+ * BaseEntity { ... }`) — nothing here overrides your existing model types.
+ */
+export interface BaseEntity {
+  id: string;
+}
+
+/**
+ * Describes a single column in ReusableTable.
+ *
+ * `render` receives the row item (and its index) and returns whatever
+ * should appear in that cell — a plain string, a <Badge/>, a <span> with
+ * custom styling, etc. This mirrors how every existing table in this
+ * project (UserTable, BranchTable, RoleTable, TripTable, OrderTable...)
+ * already renders its cells inline.
+ */
+export interface TableColumn<T> {
+  /** Stable key for the column (used as the React key, not displayed) */
+  key: string;
+  /** Column header label — pass whatever language your page needs
+   *  (the original app's headers are Arabic, e.g. "الاسم" / "الحالة") */
+  header: string;
+  /** Cell renderer for a given row. `isExpanded` is only meaningful when
+   *  the table is used with `renderExpanded` (e.g. to rotate a chevron
+   *  icon) — existing 2-arg render functions keep working unchanged. */
+  render: (item: T, index: number, isExpanded: boolean) => ReactNode;
+  /** CSS grid track size, e.g. "2fr", "1.5fr", "120px". Defaults to "1fr" */
+  width?: string;
+  /** Text alignment for the column body (header stays start-aligned,
+   *  matching the existing tables) */
+  align?: "left" | "right" | "center";
+}
+
+/**
+ * Props accepted by <ReusableTable/>. `T` must at minimum have an `id`
+ * (see BaseEntity) so keyExtractor has a sane default.
+ */
+export interface CrudTableProps<T extends BaseEntity> {
+  columns: TableColumn<T>[];
+  data: T[];
+  loading?: boolean;
+  /** Defaults to `item => item.id` — override for composite keys */
+  keyExtractor?: (item: T) => string;
+  /** Optional row click — e.g. open a detail panel (same pattern as
+   *  DriversPage / OrderComponent's row `onClick`) */
+  onRowClick?: (item: T) => void;
+
+  /** Used only to vary the empty-state message ("no results for X") */
+  search?: string;
+  emptyIcon?: string;
+  emptyTitle?: string;
+  emptyDescription?: string;
+  emptyAction?: ReactNode;
+
+  /** Pagination — omit `pages`/`onPageChange` to hide the pagination bar */
+  page?: number;
+  pages?: number;
+  onPageChange?: (page: number) => void;
+
+  /** Renders the trailing "actions" cell for each row (typically an
+   *  <ActionButtons/>). Omit to render a table with no actions column. */
+  renderActions?: (item: T, index: number) => ReactNode;
+  actionsHeader?: string;
+  actionsWidth?: string;
+
+  /**
+   * Renders an expandable panel below a row (used by ClientTable's
+   * click-to-expand detail panel). When provided, clicking a row toggles
+   * that row's panel open/closed instead of firing `onRowClick`, and the
+   * row gets the brand-accent highlight treatment (matches
+   * ClientTable.tsx's original ClientDetailPanel behavior exactly).
+   */
+  renderExpanded?: (item: T, index: number) => ReactNode;
+}
+
+/**
+ * Props for <ActionButtons/>. Every handler is optional so a model that
+ * only supports View + Delete (no edit, e.g. archived records) can simply
+ * omit `onEdit`.
+ */
+export interface ActionButtonsProps {
+  onView?: () => void;
+  onEdit?: () => void;
+  onDelete?: () => void;
+  /** Accessible label context, e.g. the row's display name — produces
+   *  aria-labels like "View John Doe" instead of just "View" */
+  itemLabel?: string;
+  viewLabel?: string;
+  editLabel?: string;
+  deleteLabel?: string;
+}
+
+/** Props for <ModelCard/> — the card chrome wrapping a ReusableTable */
+export interface ModelCardProps {
+  title?: string;
+  count?: number;
+  countLabel?: string;
+  /** Slot for a search box / add button / filter, right-aligned like the
+   *  existing Header.tsx pattern */
+  action?: ReactNode;
+  children: ReactNode;
+}
\ No newline at end of file