build dashboard home page and dashboard layer

Replace manual useState + validate() wiring with react-hook-form and
yupResolver across CarFormModal, DriverFormModal, Tripformmodal,
OrderFormModal, BranchFormModal, CarMaintananceFormModal, RoleFormModal,
and UserFormModal, following the existing pattern in Addressformmodal.

- Pin yupResolver's generic explicitly (yupResolver<FormValues>(schema as any))
  since create/update schemas differ structurally and yup can't unify them
  into a single inferred type on its own.
- Replace manual ref-based autofocus (useRef + ref={firstRef}) with
  autoFocus/setFocus to avoid ref collisions with register()'s own ref.
- DriverFormModal: bind photo/nationalPhoto/driverCardPhoto file fields via
  Controller instead of register.
- Tripformmodal: convert startTime/endTime to ISO-8601 via setValueAs while
  keeping the datetime-local input display unaffected.
- OrderFormModal: register nested deliveryAddress/pickupAddress fields via
  dot-path syntax; keep pickupMode as local state; preserve conditional
  address payload assembly.
- CarMaintananceFormModal: keep toNumberOrUndefined cost coercion and
  ISO-8601 date conversion at submit time.
- RoleFormModal: bind permissionIds checkbox group via Controller.
- UserFormModal: add a custom resolver wrapper to preserve the
  empty-password-on-edit behavior (skip password validation when editing
  with a blank password field).

Also replace raw HTML elements with the shared UI kit components
(Modal, Input, Textarea, Select, Button, Alert, Badge, EmptyState) across
form modals, detail modals, and tables:

- RoleFormModal: Modal, Input, Textarea, Button
- OrderFormModal: Modal, Input, Select, Button
- UserDetailModal / Archiveduserdetailmodal: Modal, Alert, Button
- UserTable / Archivedusertable: Badge, Button, EmptyState
- RoleDetailModal / ArchivedRoleDetailModal: Modal, Alert, Select, Button
- RoleTable / ArchivedRoleTable: Button, EmptyState
- Tripreportpanel: Button with built-in loading state instead of manual
  Spinner/disabled/color wiring

StatusBadge, IconBtn, and other per-action custom chips/checkboxes are kept
as-is in every file — the shared Badge/Button components don't support dot
indicators or per-action color-coding, so forcing them in would misshape or
strip semantics from these controls.

Archivedusersmodal, ArchivedRolesModal, and ArchivedTripList required no
changes — already fully compliant with the shared UI kit.

No changes to visual layout, CSS, or Arabic labels/section headings beyond
what's required by the component swaps above.

README.md

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

app/components/layout/ConditionalNavbar.tsx

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

app/components/layout/Sidebar.tsx

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

app/components/layout/Topbar.tsx

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

app/dashboard/audit/page.tsx

@@ -1,25 +1,17 @@
 "use client";
 
 import { useCallback, useEffect, useReducer, useState } from "react";
-import { Alert, Spinner } from "@/src/Components/UI";
+import { Alert } from "@/src/Components/UI";
 import { getStoredToken } from "@/src/lib/auth";
 import { get } from "@/src/services/api";
 import Header from "@/src/Components/UI/Header";
+import { AuditTable } from "@/src/Components/audit/AuditTable";
+import { AuditDetailModal } from "@/src/Components/audit/AuditDetailsModel";
+import { AuditLog } from "@/src/types/audit";
 
 // ── Types ──────────────────────────────────────────────────────────────────
-
+// (AuditLog itself now lives in @/src/types/audit so AuditTable and
-interface AuditLog {
+// AuditDetailModal can both import it — same pattern as Driver/Order.)
-  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;
-}
 
 // ── State / Reducer ────────────────────────────────────────────────────────
 
@@ -58,44 +50,6 @@ function reducer(s: State, a: Action): State {
   }
 }
 
-// ── Action badge ───────────────────────────────────────────────────────────
-
-const ACTION_COLORS: Record<
-  string,
-  { bg: string; color: string; border: string }
-> = {
-  CREATE: { bg: "#DCFCE7", color: "#166534", border: "#BBF7D0" },
-  UPDATE: { bg: "#EFF6FF", color: "#1D4ED8", border: "#BFDBFE" },
-  DELETE: { bg: "#FEF2F2", color: "#DC2626", border: "#FECACA" },
-  LOGIN: { bg: "#F5F3FF", color: "#5B21B6", border: "#DDD6FE" },
-  LOGOUT: { bg: "#F1F5F9", color: "#475569", border: "#E2E8F0" },
-};
-
-function ActionBadge({ action }: { action: string }) {
-  const upper = action?.toUpperCase() ?? "";
-  const key =
-    Object.keys(ACTION_COLORS).find((k) => upper.includes(k)) ?? "CREATE";
-  const cfg = ACTION_COLORS[key];
-  return (
-    <span
-      style={{
-        display: "inline-flex",
-        alignItems: "center",
-        borderRadius: "var(--radius-full)",
-        border: `1px solid ${cfg.border}`,
-        background: cfg.bg,
-        padding: "0.2rem 0.625rem",
-        fontSize: 11,
-        fontWeight: 700,
-        color: cfg.color,
-        whiteSpace: "nowrap",
-      }}
-    >
-      {action}
-    </span>
-  );
-}
-
 // ── Page ───────────────────────────────────────────────────────────────────
 
 export default function AuditPage() {
@@ -109,12 +63,18 @@ export default function AuditPage() {
   const [page, setPage] = useState(1);
   const [search, setSearch] = useState("");
   const [module, setModule] = useState("");
+  const [selectedLog, setSelectedLog] = useState<AuditLog | null>(null);
 
-  const loadLogs = useCallback(async (p: number, q: string, mod: string) => {
+  const loadLogs = useCallback(async (q: string, mod: string) => {
     dispatch({ type: "LOAD_START" });
     try {
       const token = getStoredToken();
-      const params = new URLSearchParams({ page: String(p), limit: "15" });
+      // Show ALL matching logs at once instead of paginating — a high
+      // limit stands in for "no limit" against an endpoint that still
+      // expects page/limit params. If the backend enforces its own hard
+      // cap below this number, ask it to expose an explicit "all" mode
+      // instead of relying on this number being high enough.
+      const params = new URLSearchParams({ page: "1", limit: "1000" });
       if (q) params.set("search", q);
       if (mod) params.set("module", mod);
       const res = await get<{
@@ -148,29 +108,11 @@ export default function AuditPage() {
   }, []);
 
   useEffect(() => {
-    loadLogs(page, search, module);
+    loadLogs(search, module);
-  }, [page, search, module, loadLogs]);
+  }, [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)",
-  };
 
   return (
+    <>
       <section
         style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}
       >
@@ -197,168 +139,23 @@ export default function AuditPage() {
       )}
 
       {/* Table */}
-      <div style={cardStyle}>
+      <AuditTable
-        <div
+        logs={state.logs}
-          dir="rtl"
+        loading={state.loading}
-          style={{
+        search={search}
-            display: "grid",
+        page={page}
-            gridTemplateColumns: "1.5fr 1fr 1fr 1.5fr 1fr",
+        pages={state.pages}
-            ...thStyle,
+        onPageChange={setPage}
-          }}
+        onRowClick={(log) => setSelectedLog(log)}
-        >
+      />
-          <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>
     </section>
+
+    {selectedLog && (
+      <AuditDetailModal
+        log={selectedLog}
+        onClose={() => setSelectedLog(null)}
+      />
+    )}
+    </>
   );
 }

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

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

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

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

app/dashboard/cars/page.tsx

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

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

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

app/dashboard/clients/page.tsx

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

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

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

app/dashboard/drivers/page.tsx

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

app/dashboard/orders/page.tsx

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

app/dashboard/page.tsx

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

app/dashboard/role_permission/page.tsx

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

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

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

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

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

app/dashboard/trips/page.tsx

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

app/forbidden/page.tsx

@@ -21,11 +21,7 @@ export default function ForbiddenPage() {
           border: "2px solid #FECACA",
           display: "flex", alignItems: "center", justifyContent: "center",
         }}>
-          <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#DC2626" strokeWidth="1.5">
+          <i className="ti ti-shield-exclamation" style={{ fontSize: 36, color: "#DC2626" }} aria-hidden="true" />
-            <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>
         </div>
 
         <p style={{

app/not_found/page.tsx

@@ -55,10 +55,7 @@ export default function NotFound() {
               textDecoration: "none",
               display: "inline-flex", alignItems: "center", gap: 8,
             }}>
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+            <i className="ti ti-home" style={{ fontSize: 14 }} aria-hidden="true" />
-              <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>
             لوحة التحكم
           </Link>
 

src/Components/Branch/BranchDetailModal.tsx

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

src/Components/Branch/BranchFormModal.tsx

@@ -1,46 +1,12 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
-import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
-import { Alert, Spinner } from "../UI";
+import { Alert, Button, Input, Modal } from "../UI";
 import { createBranchSchema, updateBranchSchema } from "@/src/validations/branch.validator";
-import type { Branch, BranchFormData, FormErrors } from "@/src/types/branch";
+import type { Branch, BranchFormData } from "@/src/types/branch";
 
-// ── fixed styles ─────────────────────────────────────────
+const FORM_ID = "branch-form";
-const S = {
-  input: {
-    width: "100%", height: 40, padding: "0 0.75rem",
-    borderRadius: "var(--radius-md)",
-    border: "1px solid var(--color-border)",
-    background: "var(--color-surface)",
-    fontSize: 13, color: "var(--color-text-primary)",
-    outline: "none", fontFamily: "var(--font-sans)",
-  } as React.CSSProperties,
-  label: {
-    display: "flex", flexDirection: "column" as const,
-    gap: 6, fontSize: 12, fontWeight: 600,
-    color: "var(--color-text-secondary)",
-  } as React.CSSProperties,
-  errorText: { fontSize: 11, color: "var(--color-danger)", fontWeight: 500 } as React.CSSProperties,
-};
-
-// ── yup validation ────────────────────────────────────────────────────────────
-async function validate(data: BranchFormData, isNew: boolean): Promise<FormErrors> {
-  const schema = isNew ? createBranchSchema : updateBranchSchema;
-  try {
-    await schema.validate(data, { abortEarly: false });
-    return {};
-  } catch (err) {
-    if (err instanceof yup.ValidationError) {
-      return err.inner.reduce<FormErrors>((acc, e) => {
-        const field = e.path as keyof FormErrors;
-        if (field && !acc[field]) acc[field] = e.message;
-        return acc;
-      }, {});
-    }
-    return {};
-  }
-}
 
 // ── Props ─────────────────────────────────────────────────────────────────────
 interface BranchFormModalProps {
@@ -53,7 +19,18 @@ interface BranchFormModalProps {
 export function BranchFormModal({ editBranch, onClose, onSubmit }: BranchFormModalProps) {
   const isNew = editBranch === null;
 
-  const [form, setForm] = useState<BranchFormData>({
+  const {
+    register,
+    handleSubmit,
+    setError,
+    formState: { errors, isSubmitting },
+  } = useForm<BranchFormData>({
+    // Cast the schema itself and pin the generic explicitly on yupResolver —
+    // create/update schemas differ structurally in which fields are required
+    // (e.g. city/street are optional on update), so yup can't unify them
+    // into the single flat BranchFormData shape on its own.
+    resolver: yupResolver<BranchFormData>((isNew ? createBranchSchema : updateBranchSchema) as any),
+    defaultValues: {
       name:       editBranch?.name       ?? "",
       email:      editBranch?.email      ?? "",
       phone:      editBranch?.phone      ?? "",
@@ -67,195 +44,169 @@ export function BranchFormModal({ editBranch, onClose, onSubmit }: BranchFormMod
       zipCode:    editBranch?.zipCode    ?? "",
       latitude:   editBranch?.latitude   != null ? String(editBranch.latitude)  : "",
       longitude:  editBranch?.longitude  != null ? String(editBranch.longitude) : "",
+    },
   });
-  const [errors,   setErrors]   = useState<FormErrors>({});
-  const [saving,   setSaving]   = useState(false);
-  const [apiError, setApiError] = useState("");
-  const firstInputRef           = useRef<HTMLInputElement>(null);
 
-  useEffect(() => { firstInputRef.current?.focus(); }, []);
+  const submitHandler = async (data: BranchFormData) => {
-  useEffect(() => {
+    const ok = await onSubmit(data, isNew);
-    const handler = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
+    if (ok) {
-    window.addEventListener("keydown", handler);
+      onClose();
-    return () => window.removeEventListener("keydown", handler);
+    } else {
-  }, [onClose]);
+      setError("name", { message: "حدث خطأ غير متوقع. يرجى المحاولة لاحقاً." });
-
+    }
-  const set = (field: keyof BranchFormData) =>
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      setForm(p => ({ ...p, [field]: e.target.value }));
-      // clear field error on change
-      if (errors[field]) setErrors(p => ({ ...p, [field]: undefined }));
   };
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    const errs = await validate(form, isNew);
-    if (Object.keys(errs).length) { setErrors(errs); return; }
-    setSaving(true);
-    setApiError("");
-    const ok = await onSubmit(form, isNew);
-    setSaving(false);
-    if (ok) onClose();
-    else setApiError("حدث خطأ غير متوقع. يرجى المحاولة لاحقاً.");
-  };
-
-  // dynamic styles for inputs with errors
-  const inputStyle = (field: keyof FormErrors): React.CSSProperties => ({
-    ...S.input,
-    ...(errors[field] ? { borderColor: "var(--color-danger)", background: "#FEF2F2" } : {}),
-  });
-
   return (
-    <div
+    <Modal
-      role="dialog" aria-modal="true" aria-labelledby="branch-modal-title"
+      open
-      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
+      title={isNew ? "فرع جديد" : editBranch?.name ?? ""}
-      style={{
+      subtitle={isNew ? "إضافة فرع" : "تعديل فرع"}
-        position: "fixed", inset: 0, zIndex: 50,
+      onClose={onClose}
-        background: "rgba(15,23,42,0.55)", backdropFilter: "blur(4px)",
+      size="md"
-        display: "flex", alignItems: "center", justifyContent: "center", padding: "1rem",
+      footer={
-      }}
+        <>
+          <Button variant="secondary" onClick={onClose} disabled={isSubmitting}>
+            إلغاء
+          </Button>
+          <Button type="submit" form={FORM_ID} loading={isSubmitting}>
+            {isNew ? "إضافة الفرع" : "حفظ التغييرات"}
+          </Button>
+        </>
+      }
     >
-      <div
+      <form
-        onClick={e => e.stopPropagation()}
+        id={FORM_ID}
-        style={{
+        onSubmit={handleSubmit(submitHandler)}
-          width: "100%", maxWidth: 560,
+        noValidate
-          background: "var(--color-surface)",
+        style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
-          borderRadius: "var(--radius-2xl)",
-          border: "1px solid var(--color-border)",
-          boxShadow: "0 24px 64px rgba(0,0,0,.18)",
-          overflow: "hidden",
-          display: "flex", flexDirection: "column",
-          maxHeight: "90vh",
-        }}
       >
-        {/* header */}
+        {errors.name?.type === "manual" && (
-        <div style={{
+          <Alert type="error" message={errors.name.message ?? ""} onClose={() => {}} />
-          display: "flex", alignItems: "center", justifyContent: "space-between",
+        )}
-          padding: "1.25rem 1.5rem",
-          borderBottom: "1px solid var(--color-border)",
-          background: "var(--color-surface-muted)",
-        }}>
-          <div>
-            <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600, margin: 0 }}>
-              {isNew ? "إضافة فرع" : "تعديل فرع"}
-            </p>
-            <h2 id="branch-modal-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
-              {isNew ? "فرع جديد" : editBranch?.name}
-            </h2>
-          </div>
-          <button type="button" onClick={onClose} aria-label="إغلاق"
-            style={{ width: 34, height: 34, borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", cursor: "pointer", fontSize: 18, color: "var(--color-text-muted)", display: "flex", alignItems: "center", justifyContent: "center" }}>
-            ×
-          </button>
-        </div>
-
-        {/* body */}
-        <form onSubmit={handleSubmit} noValidate style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem", overflowY: "auto" }}>
-          {apiError && <Alert type="error" message={apiError} onClose={() => setApiError("")} />}
 
         {/* name */}
-          <label style={S.label}>
+        <Input
-            اسم الفرع *
+          label="اسم الفرع *"
-            <input ref={firstInputRef} style={inputStyle("name")} value={form.name} onChange={set("name")} placeholder="فرع الرياض" autoComplete="organization" dir="rtl" />
+          {...register("name")}
-            {errors.name && <span style={S.errorText}>{errors.name}</span>}
+          error={errors.name && errors.name.type !== "manual" ? errors.name.message : undefined}
-          </label>
+          placeholder="فرع الرياض"
+          autoComplete="organization"
+          autoFocus
+          dir="rtl"
+        />
 
         {/* email + phone */}
         <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
-            <label style={S.label}>
+          <Input
-              البريد الإلكتروني
+            label="البريد الإلكتروني"
-              <input style={inputStyle("email")} type="email" value={form.email} onChange={set("email")} placeholder="branch@co.sa" autoComplete="email" dir="ltr" />
+            type="email"
-              {errors.email && <span style={S.errorText}>{errors.email}</span>}
+            {...register("email")}
-            </label>
+            error={errors.email?.message}
-            <label style={S.label}>
+            placeholder="branch@co.sa"
-              رقم الهاتف
+            autoComplete="email"
-              <input style={inputStyle("phone")} type="tel" value={form.phone} onChange={set("phone")} placeholder="+966 5x xxx xxxx" autoComplete="tel" dir="ltr" />
+            dir="ltr"
-              {errors.phone && <span style={S.errorText}>{errors.phone}</span>}
+          />
-            </label>
+          <Input
+            label="رقم الهاتف"
+            type="tel"
+            {...register("phone")}
+            error={errors.phone?.message}
+            placeholder="+966 5x xxx xxxx"
+            autoComplete="tel"
+            dir="ltr"
+          />
         </div>
 
         {/* city + street */}
         <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
-            <label style={S.label}>
+          <Input
-              المدينة *
+            label="المدينة *"
-              <input style={inputStyle("city")} value={form.city} onChange={set("city")} placeholder="الرياض" dir="rtl" />
+            {...register("city")}
-              {errors.city && <span style={S.errorText}>{errors.city}</span>}
+            error={errors.city?.message}
-            </label>
+            placeholder="الرياض"
-            <label style={S.label}>
+            dir="rtl"
-              الشارع *
+          />
-              <input style={inputStyle("street")} value={form.street} onChange={set("street")} placeholder="شارع الملك فهد" dir="rtl" />
+          <Input
-              {errors.street && <span style={S.errorText}>{errors.street}</span>}
+            label="الشارع *"
-            </label>
+            {...register("street")}
+            error={errors.street?.message}
+            placeholder="شارع الملك فهد"
+            dir="rtl"
+          />
         </div>
 
         {/* state + district */}
         <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
-            <label style={S.label}>
+          <Input
-              المنطقة
+            label="المنطقة"
-              <input style={inputStyle("state")} value={form.state} onChange={set("state")} placeholder="منطقة الرياض" dir="rtl" />
+            {...register("state")}
-              {errors.state && <span style={S.errorText}>{errors.state}</span>}
+            error={errors.state?.message}
-            </label>
+            placeholder="منطقة الرياض"
-            <label style={S.label}>
+            dir="rtl"
-              الحي
+          />
-              <input style={inputStyle("district")} value={form.district} onChange={set("district")} placeholder="حي العليا" dir="rtl" />
+          <Input
-              {errors.district && <span style={S.errorText}>{errors.district}</span>}
+            label="الحي"
-            </label>
+            {...register("district")}
+            error={errors.district?.message}
+            placeholder="حي العليا"
+            dir="rtl"
+          />
         </div>
 
         {/* buildingNo + unitNo + zipCode */}
         <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
-            <label style={S.label}>
+          <Input
-              رقم المبنى
+            label="رقم المبنى"
-              <input style={inputStyle("buildingNo")} value={form.buildingNo} onChange={set("buildingNo")} placeholder="1234" dir="ltr" />
+            {...register("buildingNo")}
-              {errors.buildingNo && <span style={S.errorText}>{errors.buildingNo}</span>}
+            error={errors.buildingNo?.message}
-            </label>
+            placeholder="1234"
-            <label style={S.label}>
+            dir="ltr"
-              رقم الوحدة
+          />
-              <input style={inputStyle("unitNo")} value={form.unitNo} onChange={set("unitNo")} placeholder="5" dir="ltr" />
+          <Input
-              {errors.unitNo && <span style={S.errorText}>{errors.unitNo}</span>}
+            label="رقم الوحدة"
-            </label>
+            {...register("unitNo")}
-            <label style={S.label}>
+            error={errors.unitNo?.message}
-              الرمز البريدي
+            placeholder="5"
-              <input style={inputStyle("zipCode")} value={form.zipCode} onChange={set("zipCode")} placeholder="12345" dir="ltr" />
+            dir="ltr"
-              {errors.zipCode && <span style={S.errorText}>{errors.zipCode}</span>}
+          />
-            </label>
+          <Input
+            label="الرمز البريدي"
+            {...register("zipCode")}
+            error={errors.zipCode?.message}
+            placeholder="12345"
+            dir="ltr"
+          />
         </div>
 
         {/* country */}
-          <label style={S.label}>
+        <Input
-            الدولة
+          label="الدولة"
-            <input style={inputStyle("country")} value={form.country} onChange={set("country")} placeholder="SA" dir="ltr" />
+          {...register("country")}
-            {errors.country && <span style={S.errorText}>{errors.country}</span>}
+          error={errors.country?.message}
-          </label>
+          placeholder="SA"
+          dir="ltr"
+        />
 
         {/* latitude + longitude */}
         <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
-            <label style={S.label}>
+          <Input
-              خط العرض (اختياري)
+            label="خط العرض (اختياري)"
-              <input style={inputStyle("latitude")} value={form.latitude} onChange={set("latitude")} placeholder="24.7136" dir="ltr" inputMode="decimal" />
+            {...register("latitude")}
-              {errors.latitude && <span style={S.errorText}>{errors.latitude}</span>}
+            error={errors.latitude?.message}
-            </label>
+            placeholder="24.7136"
-            <label style={S.label}>
+            dir="ltr"
-              خط الطول (اختياري)
+            inputMode="decimal"
-              <input style={inputStyle("longitude")} value={form.longitude} onChange={set("longitude")} placeholder="46.6753" dir="ltr" inputMode="decimal" />
+          />
-              {errors.longitude && <span style={S.errorText}>{errors.longitude}</span>}
+          <Input
-            </label>
+            label="خط الطول (اختياري)"
-          </div>
+            {...register("longitude")}
-
+            error={errors.longitude?.message}
-          {/* actions */}
+            placeholder="46.6753"
-          <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end", paddingTop: "0.5rem" }}>
+            dir="ltr"
-            <button type="button" onClick={onClose} disabled={saving}
+            inputMode="decimal"
-              style={{ height: 40, padding: "0 1.25rem", borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", fontSize: 13, fontWeight: 600, color: "var(--color-text-secondary)", cursor: saving ? "not-allowed" : "pointer", fontFamily: "var(--font-sans)" }}>
+          />
-              إلغاء
-            </button>
-            <button type="submit" disabled={saving}
-              style={{ height: 40, padding: "0 1.5rem", borderRadius: "var(--radius-md)", border: "none", background: saving ? "var(--color-brand-400)" : "var(--color-brand-600)", fontSize: 13, fontWeight: 700, color: "#FFF", cursor: saving ? "not-allowed" : "pointer", display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--font-sans)" }}>
-              {saving && <Spinner size="sm" className="text-white" />}
-              {saving ? "جارٍ الحفظ…" : isNew ? "إضافة الفرع" : "حفظ التغييرات"}
-            </button>
         </div>
       </form>
-      </div>
+    </Modal>
-    </div>
   );
 }

src/Components/Branch/BranchTable.tsx

@@ -1,41 +1,14 @@
 "use client";
 
-import { Spinner } from "../UI";
+// src/Components/Branch/BranchTable.tsx
+// MIGRATED to ReusableTable + ActionButtons — same props, same visual
+// result as the original hand-rolled version. No changes required in
+// app/dashboard/branches/page.tsx.
+
+import { Badge, Button, ReusableTable, ActionButtons } from "../UI";
+import type { TableColumn } from "@/src/types/models";
 import type { Branch } from "@/src/types/branch";
 
-// ── status badge ─────────────────────────────────────────────────────────────
-function StatusBadge({ active }: { active: boolean }) {
-  return (
-    <span style={{ display: "inline-flex", alignItems: "center", gap: 5, borderRadius: "var(--radius-full)", border: active ? "1px solid #BBF7D0" : "1px solid #FECACA", background: active ? "#DCFCE7" : "#FEF2F2", padding: "0.2rem 0.625rem", fontSize: 11, fontWeight: 600, color: active ? "#166534" : "#991B1B" }}>
-      <span style={{ width: 6, height: 6, borderRadius: "50%", background: active ? "#16A34A" : "#DC2626" }} />
-      {active ? "نشط" : "معطل"}
-    </span>
-  );
-}
-
-// ── icon button ──────────────────────────────────────────────────────────────
-function IconBtn({ onClick, title, color, bg, borderColor, children }: { onClick: () => void; title: string; color: string; bg: string; borderColor: string; children: React.ReactNode }) {
-  return (
-    <button type="button" title={title} aria-label={title} onClick={e => { e.stopPropagation(); onClick(); }}
-      style={{ width: 32, height: 32, borderRadius: "var(--radius-md)", border: `1px solid ${borderColor}`, background: bg, color, cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center", transition: "opacity 150ms" }}>
-      {children}
-    </button>
-  );
-}
-
-// ── card / header styles ─────────────────────────────────────────────────────
-const cardStyle: React.CSSProperties = {
-  borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)",
-  background: "var(--color-surface)", overflow: "hidden", boxShadow: "var(--shadow-card)",
-};
-const thStyle: React.CSSProperties = {
-  padding: "0.75rem 1.5rem", fontSize: 11, fontWeight: 700,
-  textTransform: "uppercase", letterSpacing: "0.2em",
-  color: "var(--color-text-muted)", background: "var(--color-surface-muted)",
-  borderBottom: "1px solid var(--color-border)",
-};
-
-// ── Props ────────────────────────────────────────────────────────────────────
 interface BranchTableProps {
   branches: Branch[];
   loading: boolean;
@@ -49,107 +22,75 @@ interface BranchTableProps {
   onPageChange: (p: number) => void;
 }
 
-// ── main table ───────────────────────────────────────────────────────────────
+export function BranchTable({
-export function BranchTable({ branches, loading, search, page, pages, onEdit, onDelete, onView, onAddFirst, onPageChange }: BranchTableProps) {
+  branches, loading, search, page, pages,
-  return (
+  onEdit, onDelete, onView, onAddFirst, onPageChange,
-    <div style={cardStyle}>
+}: BranchTableProps) {
-      {/* column headers */}
+  const columns: TableColumn<Branch>[] = [
-      <div dir="rtl" style={{ display: "grid", gridTemplateColumns: "2fr 1.5fr 1.5fr 1fr 1fr 100px", ...thStyle }}>
+    {
-        <span>الفرع</span>
+      key: "name",
-        <span>المدينة</span>
+      header: "اسم الفرع",
-        <span>الهاتف</span>
+      width: "2fr",
-        <span>الحالة</span>
+      render: (b) => (
-        <span style={{ textAlign: "center" }}>تاريخ الإنشاء</span>
-        <span style={{ textAlign: "center" }}>إجراءات</span>
-      </div>
-
-      {/* loading state */}
-      {loading ? (
-        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, padding: "4rem 0", color: "var(--color-text-muted)" }}>
-          <Spinner size="sm" className="text-blue-600" />
-          <span style={{ fontSize: 13 }}>جارٍ التحميل…</span>
-        </div>
-      ) : branches.length === 0 ? (
-        /* empty state */
-        <div style={{ textAlign: "center", padding: "4rem 1rem" }}>
-          <p style={{ fontSize: 13, color: "var(--color-text-muted)" }}>
-            {search ? `لا توجد نتائج لـ "${search}"` : "لا توجد فروع لعرضها."}
-          </p>
-          {!search && (
-            <button type="button" onClick={onAddFirst}
-              style={{ marginTop: 12, fontSize: 13, fontWeight: 600, color: "var(--color-brand-600)", background: "none", border: "none", cursor: "pointer", textDecoration: "underline" }}>
-              أضف أول فرع
-            </button>
-          )}
-        </div>
-      ) : (
-        /* data rows */
-        <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
-          {branches.map((b, i) => (
-            <li key={b.id} style={{
-              display: "grid", gridTemplateColumns: "2fr 1.5fr 1.5fr 1fr 1fr 100px",
-              alignItems: "center", gap: "0.5rem", padding: "0.875rem 1.5rem",
-              borderBottom: "1px solid var(--color-border)",
-              background: i % 2 !== 0 ? "var(--color-surface-muted)" : "transparent",
-              fontSize: 13,
-            }}>
         <div>
           <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>{b.name}</p>
           <p style={{ marginTop: 2, fontSize: 11, color: "var(--color-text-muted)" }}>{b.street}</p>
         </div>
-              <span style={{ color: "var(--color-text-secondary)" }}>{b.city || "—"}</span>
+      ),
-              <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--color-text-secondary)" }}>{b.phone ?? "—"}</span>
+    },
-              <StatusBadge active={b.isActive} />
+    { key: "city", header: "المدينة", width: "1.5fr", render: (b) => b.city || "—" },
-              <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
+    {
-                {new Date(b.createdAt).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" })}
+      key: "phone",
+      header: "رقم الجوال",
+      width: "1.5fr",
+      render: (b) => (
+        <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--color-text-secondary)" }}>
+          {b.phone ?? "—"}
         </span>
-              <div style={{ display: "flex", justifyContent: "center", gap: 4 }}>
+      ),
-                {/* view */}
+    },
-                <IconBtn title={`عرض ${b.name}`} color="#059669" bg="#ECFDF5" borderColor="#A7F3D0" onClick={() => onView(b)}>
+    {
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      key: "status",
-                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+      header: "الحالة",
-                    <circle cx="12" cy="12" r="3" />
+      width: "1fr",
-                  </svg>
+      render: (b) => <Badge label={b.isActive ? "Active" : "Disabled"} color={b.isActive ? "green" : "red"} />,
-                </IconBtn>
+    },
-                {/* edit */}
+    {
-                <IconBtn title={`تعديل ${b.name}`} color="#1D4ED8" bg="#EFF6FF" borderColor="#BFDBFE" onClick={() => onEdit(b)}>
+      key: "createdAt",
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      header: "تاريخ الانشاء",
-                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+      width: "1fr",
-                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+      align: "center",
-                  </svg>
+      render: (b) =>
-                </IconBtn>
+        new Date(b.createdAt).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" }),
-                {/* 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 */}
+  return (
-      {pages > 1 && (
+    <ReusableTable
-        <div dir="rtl" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", borderTop: "1px solid var(--color-border)", padding: "0.875rem 1.5rem" }}>
+      columns={columns}
-          <span style={{ fontSize: 12, color: "var(--color-text-muted)" }}>
+      data={branches}
-            صفحة <strong style={{ color: "var(--color-text-primary)" }}>{page}</strong> من <strong style={{ color: "var(--color-text-primary)" }}>{pages}</strong>
+      loading={loading}
-          </span>
+      search={search}
-          <div style={{ display: "flex", gap: "0.5rem" }}>
+      page={page}
-            {[
+      pages={pages}
-              { label: "السابق", action: () => onPageChange(Math.max(1, page - 1)),     disabled: page === 1     },
+      onPageChange={onPageChange}
-              { label: "التالي", action: () => onPageChange(Math.min(pages, page + 1)), disabled: page === pages },
+      emptyIcon="🏢"
-            ].map(btn => (
+      emptyDescription={!search ? "No branches to display." : undefined}
-              <button key={btn.label} type="button" onClick={btn.action} disabled={btn.disabled}
+      emptyAction={
-                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)" }}>
+        !search && (
-                {btn.label}
+          <Button type="button" variant="ghost" size="sm" onClick={onAddFirst}>
-              </button>
+            Add first branch
-            ))}
+          </Button>
-          </div>
+        )
-        </div>
+      }
+      renderActions={(b) => (
+        <ActionButtons
+          itemLabel={b.name}
+          onView={() => onView(b)}
+          onEdit={() => onEdit(b)}
+          onDelete={() => onDelete(b)}
+        />
       )}
-    </div>
+    />
   );
 }

src/Components/Branch/DeleteConfirmModal.tsx

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

src/Components/Branch/archive/ArchivedBranchDetailModal.tsx

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

src/Components/Branch/archive/ArchivedBranchTable.tsx

@@ -1,41 +1,13 @@
 "use client";
 
-import { Spinner } from "../../UI";
+// src/Components/Branch/archive/ArchivedBranchTable.tsx
+// MIGRATED to ReusableTable + ActionButtons. View-only, no row click in
+// the original.
+
+import { Badge, ReusableTable, ActionButtons } from "../../UI";
+import type { TableColumn } from "@/src/types/models";
 import type { ArchivedBranch } from "@/src/types/branch";
 
-// ── status badge ─────────────────────────────────────────────────────────────
-function StatusBadge({ active }: { active: boolean }) {
-  return (
-    <span style={{ display: "inline-flex", alignItems: "center", gap: 5, borderRadius: "var(--radius-full)", border: active ? "1px solid #BBF7D0" : "1px solid #FECACA", background: active ? "#DCFCE7" : "#FEF2F2", padding: "0.2rem 0.625rem", fontSize: 11, fontWeight: 600, color: active ? "#166534" : "#991B1B" }}>
-      <span style={{ width: 6, height: 6, borderRadius: "50%", background: active ? "#16A34A" : "#DC2626" }} />
-      {active ? "نشط" : "معطل"}
-    </span>
-  );
-}
-
-// ── icon button ──────────────────────────────────────────────────────────────
-function IconBtn({ onClick, title, color, bg, borderColor, children }: { onClick: () => void; title: string; color: string; bg: string; borderColor: string; children: React.ReactNode }) {
-  return (
-    <button type="button" title={title} aria-label={title} onClick={e => { e.stopPropagation(); onClick(); }}
-      style={{ width: 32, height: 32, borderRadius: "var(--radius-md)", border: `1px solid ${borderColor}`, background: bg, color, cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center", transition: "opacity 150ms" }}>
-      {children}
-    </button>
-  );
-}
-
-// ── card / header styles ─────────────────────────────────────────────────────
-const cardStyle: React.CSSProperties = {
-  borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)",
-  background: "var(--color-surface)", overflow: "hidden", boxShadow: "var(--shadow-card)",
-};
-const thStyle: React.CSSProperties = {
-  padding: "0.75rem 1.5rem", fontSize: 11, fontWeight: 700,
-  textTransform: "uppercase", letterSpacing: "0.2em",
-  color: "var(--color-text-muted)", background: "var(--color-surface-muted)",
-  borderBottom: "1px solid var(--color-border)",
-};
-
-// ── Props ────────────────────────────────────────────────────────────────────
 interface ArchivedBranchTableProps {
   branches: ArchivedBranch[];
   loading: boolean;
@@ -46,89 +18,53 @@ interface ArchivedBranchTableProps {
   onPageChange: (p: number) => void;
 }
 
-// ── main table ───────────────────────────────────────────────────────────────
 export function ArchivedBranchTable({ branches, loading, search, page, pages, onView, onPageChange }: ArchivedBranchTableProps) {
-  return (
+  const columns: TableColumn<ArchivedBranch>[] = [
-    <div style={cardStyle}>
+    {
-      {/* column headers */}
+      key: "name",
-      <div dir="rtl" style={{ display: "grid", gridTemplateColumns: "2fr 1.5fr 1fr 1fr 1fr 100px", ...thStyle }}>
+      header: "اسم الفرع",
-        <span>الفرع</span>
+      width: "2fr",
-        <span>المدينة</span>
+      render: (b) => (
-        <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>
+      ),
-              <StatusBadge active={b.isActive} />
+    },
-              <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
+    { key: "city", header: "المدينة", width: "1.5fr", render: (b) => b.city || "—" },
-                {new Date(b.createdAt).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" })}
+    {
-              </span>
+      key: "status",
-              <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
+      header: "الحالة",
-                {new Date(b.updatedAt).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" })}
+      width: "1fr",
-              </span>
+      render: (b) => <Badge label={b.isActive ? "Active" : "Disabled"} color={b.isActive ? "green" : "red"} />,
-              <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)}>
+      key: "createdAt",
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      header: "تاريخ الانشاء",
-                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+      width: "1fr",
-                    <circle cx="12" cy="12" r="3" />
+      align: "center",
-                  </svg>
+      render: (b) => new Date(b.createdAt).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" }),
-                </IconBtn>
+    },
-              </div>
+    {
-            </li>
+      key: "updatedAt",
-          ))}
+      header: "تاريخ التعديل",
-        </ul>
+      width: "1fr",
-      )}
+      align: "center",
+      render: (b) => new Date(b.updatedAt).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" }),
+    },
+  ];
 
-      {/* pagination */}
+  return (
-      {pages > 1 && (
+    <ReusableTable
-        <div dir="rtl" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", borderTop: "1px solid var(--color-border)", padding: "0.875rem 1.5rem" }}>
+      columns={columns}
-          <span style={{ fontSize: 12, color: "var(--color-text-muted)" }}>
+      data={branches}
-            صفحة <strong style={{ color: "var(--color-text-primary)" }}>{page}</strong> من <strong style={{ color: "var(--color-text-primary)" }}>{pages}</strong>
+      loading={loading}
-          </span>
+      search={search}
-          <div style={{ display: "flex", gap: "0.5rem" }}>
+      page={page}
-            {[
+      pages={pages}
-              { label: "السابق", action: () => onPageChange(Math.max(1, page - 1)),     disabled: page === 1     },
+      onPageChange={onPageChange}
-              { label: "التالي", action: () => onPageChange(Math.min(pages, page + 1)), disabled: page === pages },
+      emptyDescription={search ? `No results for "${search}"` : "No archived branches."}
-            ].map(btn => (
+      renderActions={(b) => <ActionButtons itemLabel={b.name} onView={() => onView(b)} />}
-              <button key={btn.label} type="button" onClick={btn.action} disabled={btn.disabled}
+    />
-                style={{ borderRadius: "var(--radius-lg)", border: "1px solid var(--color-border)", background: "var(--color-surface-muted)", padding: "0.375rem 0.875rem", fontSize: 12, color: "var(--color-text-secondary)", cursor: btn.disabled ? "not-allowed" : "pointer", opacity: btn.disabled ? 0.4 : 1, fontFamily: "var(--font-sans)" }}>
-                {btn.label}
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
   );
 }

src/Components/Branch/archive/ArchivedBranchesModal.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Alert } from "../../UI";
+import { Alert, Input, Modal } from "../../UI";
 import { ArchivedBranchTable } from "./ArchivedBranchTable";
 import { ArchivedBranchDetailModal } from "./ArchivedBranchDetailModal";
 import { useArchivedBranches } from "@/src/hooks/archive/useArchiveBranch";
@@ -11,6 +11,10 @@ interface ArchivedBranchesModalProps {
   onClose: () => void;
 }
 
+const SearchIcon = (
+  <i className="ti ti-search" style={{ fontSize: 16 }} aria-hidden="true" />
+);
+
 export function ArchivedBranchesModal({ onClose }: ArchivedBranchesModalProps) {
   // hold the full object, not just the id — no GET /branches/archived/{id} route exists
   const [viewBranch, setViewBranch] = useState<ArchivedBranch | null>(null);
@@ -22,79 +26,24 @@ export function ArchivedBranchesModal({ onClose }: ArchivedBranchesModalProps) {
   } = useArchivedBranches();
 
   return (
-    <div
+    <>
-      role="dialog" aria-modal="true" aria-labelledby="branch-archive-modal-title"
+      <Modal
-      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
+        open
-      style={{
+        onClose={onClose}
-        position: "fixed", inset: 0, zIndex: 70,
+        size="lg"
-        background: "rgba(15,23,42,0.6)", backdropFilter: "blur(4px)",
+        subtitle="الأرشيف"
-        display: "flex", alignItems: "flex-start", justifyContent: "center",
+        title={`الفروع المؤرشفة (${total})`}
-        padding: "2rem 1rem", overflowY: "auto",
-      }}
       >
-      {viewBranch && (
+        <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
-        <ArchivedBranchDetailModal branch={viewBranch} onClose={() => setViewBranch(null)} />
-      )}
-
-      <div
-        onClick={e => e.stopPropagation()}
-        style={{
-          width: "100%", maxWidth: 920,
-          background: "var(--color-surface-sunken)",
-          borderRadius: "var(--radius-xl)",
-          border: "1px solid var(--color-border)",
-          boxShadow: "0 24px 64px rgba(0,0,0,.2)",
-          overflow: "hidden",
-        }}
-      >
-        {/* header */}
-        <div dir="rtl" style={{
-          display: "flex", alignItems: "center", justifyContent: "space-between",
-          padding: "1.25rem 1.5rem",
-          borderBottom: "1px solid var(--color-border)",
-          background: "var(--color-surface)",
-        }}>
-          <div>
-            <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#EA580C", fontWeight: 600, margin: 0 }}>
-              الأرشيف
-            </p>
-            <h2 id="branch-archive-modal-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
-              الفروع المؤرشفة
-              <span style={{ marginInlineStart: 8, fontSize: 13, fontWeight: 500, color: "var(--color-text-muted)" }}>
-                ({total})
-              </span>
-            </h2>
-          </div>
-          <button type="button" onClick={onClose} aria-label="إغلاق"
-            style={{ width: 34, height: 34, borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", cursor: "pointer", fontSize: 18, color: "var(--color-text-muted)", display: "flex", alignItems: "center", justifyContent: "center" }}>
-            ×
-          </button>
-        </div>
-
-        {/* body */}
-        <div style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
           {/* search */}
-          <div dir="rtl" style={{ position: "relative", maxWidth: 320 }}>
+          <div dir="rtl" style={{ maxWidth: 320 }}>
-            <svg style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", width: 16, height: 16, color: "var(--color-text-hint)", pointerEvents: "none" }}
+            <Input
-              fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+              label="بحث"
-              <circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" />
-            </svg>
-            <input
-              type="text"
               placeholder="بحث بالاسم أو المدينة..."
               value={search}
               onChange={e => handleSearch(e.target.value)}
               dir="rtl"
-              style={{
+              icon={SearchIcon}
-                width: "100%", height: 40,
-                paddingRight: 36, paddingLeft: 12,
-                borderRadius: "var(--radius-lg)",
-                border: "1px solid var(--color-border)",
-                background: "var(--color-surface)",
-                fontSize: 13, outline: "none",
-                fontFamily: "var(--font-sans)",
-                color: "var(--color-text-primary)",
-              }}
             />
           </div>
 
@@ -111,7 +60,14 @@ export function ArchivedBranchesModal({ onClose }: ArchivedBranchesModalProps) {
             onPageChange={setPage}
           />
         </div>
-      </div>
+      </Modal>
-    </div>
+
+      {/* Rendered after the list modal so it stacks visually on top of it
+          (both use the shared Modal's fixed full-screen overlay at the same
+          z-index — later in the DOM wins the paint order). */}
+      {viewBranch && (
+        <ArchivedBranchDetailModal branch={viewBranch} onClose={() => setViewBranch(null)} />
+      )}
+    </>
   );
 }

src/Components/Car_Maintanance/CarMaintananceDeleteModal.tsx

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

src/Components/Car_Maintanance/CarMaintananceDetailPanel.tsx

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

src/Components/Car_Maintanance/CarMaintananceFormModal.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
-import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
-import { Alert, Spinner } from "../UI";
+import { Alert, Button, Input, Modal } from "../UI";
 import {
   createMaintenanceSchema,
   updateMaintenanceSchema,
@@ -10,48 +10,16 @@ import {
 import type {
   CarMaintenance,
   CreateMaintenancePayload,
-  MaintenanceFormErrors,
   UpdateMaintenancePayload,
 } from "@/src/types/carMaintanance";
 
-// ── Shared input style ────────────────────────────────────────────────────────
+const FORM_ID = "maintenance-form";
-
-const inputBase: React.CSSProperties = {
-  width: "100%",
-  height: 40,
-  padding: "0 0.75rem",
-  borderRadius: "var(--radius-md)",
-  border: "1px solid var(--color-border)",
-  background: "var(--color-surface)",
-  fontSize: 13,
-  color: "var(--color-text-primary)",
-  outline: "none",
-  fontFamily: "var(--font-sans)",
-};
-
-const labelStyle: React.CSSProperties = {
-  display: "flex",
-  flexDirection: "column",
-  gap: 6,
-  fontSize: 12,
-  fontWeight: 600,
-  color: "var(--color-text-secondary)",
-};
-
-const errorTextStyle: React.CSSProperties = {
-  fontSize: 11,
-  color: "var(--color-danger)",
-  fontWeight: 500,
-};
 
 // ── Number coercion helper ────────────────────────────────────────────────────
 // The backend can return `cost` as a numeric string (common with Decimal
 // columns getting JSON-serialized as strings), even though our TS type says
-// `number`. If that untouched value round-trips back out on update without
+// `number`. Coerce defensively both when hydrating the form AND right before
-// ever passing through the `<input type="number">` onChange handler, it
+// building the submit payload, so this can never slip through as a string.
-// stays a string and fails the backend's strict `z.number()` check. Coerce
-// defensively both when hydrating the form AND right before building the
-// submit payload, so this can never happen regardless of the source.
 
 function toNumberOrUndefined(v: unknown): number | undefined {
   if (v === undefined || v === null || v === "") return undefined;
@@ -59,30 +27,6 @@ function toNumberOrUndefined(v: unknown): number | undefined {
   return Number.isNaN(n) ? undefined : n;
 }
 
-// ── yup validation ────────────────────────────────────────────────────────────
-// Checks the form values against the right schema and turns any problems
-// into a simple field -> message map the inputs below can read from.
-
-async function validate(
-  form: Partial<CreateMaintenancePayload>,
-  isNew: boolean,
-): Promise<MaintenanceFormErrors> {
-  const schema = isNew ? createMaintenanceSchema : updateMaintenanceSchema;
-  try {
-    await schema.validate(form, { abortEarly: false });
-    return {};
-  } catch (err) {
-    if (err instanceof yup.ValidationError) {
-      return err.inner.reduce<MaintenanceFormErrors>((acc, e) => {
-        const field = e.path as keyof MaintenanceFormErrors;
-        if (field && !acc[field]) acc[field] = e.message;
-        return acc;
-      }, {});
-    }
-    return {};
-  }
-}
-
 // ── Date helper ───────────────────────────────────────────────────────────────
 // <input type="date"> gives "YYYY-MM-DD"; the backend expects full ISO-8601.
 
@@ -92,6 +36,19 @@ function toIsoDateTime(val: string): string {
   return `${val}T00:00:00.000Z`;
 }
 
+// ── Form values shape ────────────────────────────────────────────────────────
+// `cost` stays number | undefined (via setValueAs) so an empty input maps to
+// `undefined` rather than NaN; startAt/endAt stay as raw "YYYY-MM-DD" strings
+// while typed — yup's dateString test accepts that format directly — and are
+// only converted to full ISO-8601 right before the payload is built.
+
+interface MaintenanceFormValues {
+  reason: string;
+  cost: number | undefined;
+  startAt: string;
+  endAt: string;
+}
+
 // ── Props ─────────────────────────────────────────────────────────────────────
 
 interface CarMaintenanceFormModalProps {
@@ -116,208 +73,121 @@ export function CarMaintenanceFormModal({
 }: CarMaintenanceFormModalProps) {
   const isNew = editRecord === null;
 
-  // ── Form state ─────────────────────────────────────────────────────────────
+  const {
-  const [reason, setReason]   = useState(editRecord?.reason ?? "");
+    register,
-  // Coerced defensively: editRecord.cost may arrive as a numeric string from
+    handleSubmit,
-  // the backend (e.g. a Decimal column serialized to JSON as "150").
+    setError,
-  const [cost, setCost]       = useState<number | undefined>(toNumberOrUndefined(editRecord?.cost));
+    formState: { errors, isSubmitting },
-  const [startAt, setStartAt] = useState(editRecord?.startAt?.slice(0, 10) ?? "");
+  } = useForm<MaintenanceFormValues>({
-  const [endAt, setEndAt]     = useState(editRecord?.endAt?.slice(0, 10) ?? "");
+    // Cast the schema itself and pin the generic explicitly — create/update
-
+    // schemas differ structurally in which fields are required, so yup can't
-  const [errors, setErrors]     = useState<MaintenanceFormErrors>({});
+    // unify them into MaintenanceFormValues on its own.
-  const [saving, setSaving]     = useState(false);
+    resolver: yupResolver<MaintenanceFormValues>(
-  const [apiError, setApiError] = useState("");
+      (isNew ? createMaintenanceSchema : updateMaintenanceSchema) as any,
-  const firstRef = useRef<HTMLInputElement>(null);
+    ),
-
+    defaultValues: {
-  useEffect(() => { firstRef.current?.focus(); }, []);
+      reason: editRecord?.reason ?? "",
-  useEffect(() => {
+      // Coerced defensively: editRecord.cost may arrive as a numeric string
-    const h = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
+      // from the backend (e.g. a Decimal column serialized to JSON as "150").
-    window.addEventListener("keydown", h);
+      cost: toNumberOrUndefined(editRecord?.cost),
-    return () => window.removeEventListener("keydown", h);
+      startAt: editRecord?.startAt?.slice(0, 10) ?? "",
-  }, [onClose]);
+      endAt: editRecord?.endAt?.slice(0, 10) ?? "",
-
+    },
-  const parseNum = (v: string): number | undefined =>
-    v.trim() === "" ? undefined : Number(v);
-
-  const inputStyle = (field: keyof MaintenanceFormErrors): React.CSSProperties => ({
-    ...inputBase,
-    ...(errors[field] ? { borderColor: "var(--color-danger)", background: "#FEF2F2" } : {}),
   });
 
-  const clearFieldError = (field: keyof MaintenanceFormErrors) =>
+  const costField = register("cost", {
-    setErrors((p) => ({ ...p, [field]: undefined }));
+    setValueAs: (v) => (v === "" || v === null ? undefined : Number(v)),
+  });
 
   // ── Submit ────────────────────────────────────────────────────────────────
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const submitHandler = async (data: MaintenanceFormValues) => {
-    e.preventDefault();
-
     // Belt-and-braces: re-coerce cost right before it's used, in case it
-    // somehow slipped back into a string (e.g. untouched value hydrated
+    // somehow slipped back into a string.
-    // from a record whose `cost` came back as a numeric string).
+    const safeCost = toNumberOrUndefined(data.cost);
-    const safeCost = toNumberOrUndefined(cost);
 
-    // Build a snapshot for yup — include everything so optional rules also run.
+    // Dates go out as full ISO-8601 strings, and cost always goes out as a
-    const formSnapshot: Partial<CreateMaintenancePayload> = {
+    // real number, never a string.
-      reason,
+    const raw: Record<string, unknown> = { reason: data.reason, cost: safeCost };
-      cost: safeCost,
+    if (data.startAt) raw.startAt = toIsoDateTime(data.startAt);
-      ...(startAt && { startAt }),
+    if (data.endAt) raw.endAt = toIsoDateTime(data.endAt);
-      ...(endAt && { endAt }),
-    };
-
-    const errs = await validate(formSnapshot, isNew);
-    if (Object.keys(errs).length) {
-      setErrors(errs);
-      return;
-    }
-
-    // Build the final payload — dates go out as full ISO-8601 strings, and
-    // cost always goes out as a real number, never a string.
-    const raw: Record<string, unknown> = { reason, cost: safeCost };
-    if (startAt) raw.startAt = toIsoDateTime(startAt);
-    if (endAt) raw.endAt = toIsoDateTime(endAt);
 
     const payload = raw as unknown as CreateMaintenancePayload;
-    setSaving(true);
-    setApiError("");
     const ok = await onSubmit(payload, isNew);
-    setSaving(false);
+    if (ok) {
-    if (ok) onClose();
+      onClose();
-    else setApiError("حدث خطأ غير متوقع. يرجى المحاولة لاحقاً.");
+    } else {
+      setError("reason", { message: "حدث خطأ غير متوقع. يرجى المحاولة لاحقاً." });
+    }
   };
 
   // ── Render ────────────────────────────────────────────────────────────────
 
   return (
-    <div
+    <Modal
-      role="dialog"
+      open
-      aria-modal="true"
+      onClose={onClose}
-      aria-labelledby="maintenance-modal-title"
+      size="sm"
-      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+      subtitle={isNew ? "إضافة سجل صيانة" : "تعديل سجل صيانة"}
-      style={{
+      title={carLabel ?? (isNew ? "سجل صيانة جديد" : "تعديل السجل")}
-        position: "fixed", inset: 0, zIndex: 50,
+      footer={
-        background: "rgba(15,23,42,0.55)", backdropFilter: "blur(4px)",
+        <>
-        display: "flex", alignItems: "center", justifyContent: "center",
+          <Button variant="secondary" type="button" onClick={onClose} disabled={isSubmitting}>
-        padding: "1rem", overflowY: "auto",
+            إلغاء
-      }}
+          </Button>
+          <Button type="submit" form={FORM_ID} loading={isSubmitting}>
+            {isNew ? "إضافة السجل" : "حفظ التغييرات"}
+          </Button>
+        </>
+      }
     >
-      <div
-        onClick={(e) => e.stopPropagation()}
-        style={{
-          width: "100%", maxWidth: 520,
-          background: "var(--color-surface)",
-          borderRadius: "var(--radius-2xl)",
-          border: "1px solid var(--color-border)",
-          boxShadow: "0 24px 64px rgba(0,0,0,.18)",
-          overflow: "hidden",
-          margin: "auto",
-        }}
-      >
-        {/* Header */}
-        <div style={{
-          display: "flex", alignItems: "center", justifyContent: "space-between",
-          padding: "1.25rem 1.5rem",
-          borderBottom: "1px solid var(--color-border)",
-          background: "var(--color-surface-muted)",
-        }}>
-          <div>
-            <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600, margin: 0 }}>
-              {isNew ? "إضافة سجل صيانة" : "تعديل سجل صيانة"}
-            </p>
-            <h2 id="maintenance-modal-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
-              {carLabel ?? (isNew ? "سجل صيانة جديد" : "تعديل السجل")}
-            </h2>
-          </div>
-          <button type="button" onClick={onClose} aria-label="إغلاق"
-            style={{ width: 34, height: 34, borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", cursor: "pointer", fontSize: 18, color: "var(--color-text-muted)", display: "flex", alignItems: "center", justifyContent: "center" }}>
-            ×
-          </button>
-        </div>
-
-        {/* Form */}
       <form
-          onSubmit={handleSubmit}
+        id={FORM_ID}
+        onSubmit={handleSubmit(submitHandler)}
         noValidate
-          style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem", maxHeight: "75vh", overflowY: "auto" }}
         dir="rtl"
+        className="flex flex-col gap-4"
       >
-          {apiError && <Alert type="error" message={apiError} onClose={() => setApiError("")} />}
+        {errors.reason?.type === "manual" && (
+          <Alert type="error" message={errors.reason.message ?? ""} onClose={() => {}} />
+        )}
 
-          <label style={labelStyle}>
+        <Input
-            سبب الصيانة *
+          label="سبب الصيانة *"
-            <input
+          {...register("reason")}
-              ref={firstRef}
+          error={errors.reason && errors.reason.type !== "manual" ? errors.reason.message : undefined}
-              style={inputStyle("reason")}
-              value={reason}
-              onChange={(e) => { setReason(e.target.value); clearFieldError("reason"); }}
           placeholder="تغيير زيت المحرك"
           dir="rtl"
+          autoFocus
         />
-            {errors.reason && <span style={errorTextStyle}>{errors.reason}</span>}
-          </label>
 
-          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-            <label style={labelStyle}>
+          <Input
-              التكلفة (ر.س) *
+            label="التكلفة (ر.س) *"
-              <input
-                style={inputStyle("cost")}
             type="number"
             min={0}
-                value={cost ?? ""}
+            {...costField}
-                onChange={(e) => { setCost(parseNum(e.target.value)); clearFieldError("cost"); }}
+            error={errors.cost?.message}
             placeholder="0"
             dir="ltr"
           />
-              {errors.cost && <span style={errorTextStyle}>{errors.cost}</span>}
-            </label>
 
-            <label style={labelStyle}>
+          <Input
-              تاريخ البدء *
+            label="تاريخ البدء *"
-              <input
-                style={inputStyle("startAt")}
             type="date"
-                value={startAt}
+            {...register("startAt")}
-                onChange={(e) => { setStartAt(e.target.value); clearFieldError("startAt"); }}
+            error={errors.startAt?.message}
           />
-              {errors.startAt && <span style={errorTextStyle}>{errors.startAt}</span>}
-            </label>
         </div>
 
-          <label style={labelStyle}>
+        <Input
-            تاريخ الانتهاء
+          label="تاريخ الانتهاء"
-            <input
-              style={inputStyle("endAt")}
           type="date"
-              value={endAt}
+          {...register("endAt")}
-              onChange={(e) => { setEndAt(e.target.value); clearFieldError("endAt"); }}
+          error={errors.endAt?.message}
+          hint="اتركه فارغاً إذا كانت الصيانة ما زالت جارية."
         />
-            {errors.endAt && <span style={errorTextStyle}>{errors.endAt}</span>}
-            <span style={{ fontSize: 11, color: "var(--color-text-hint)", fontWeight: 400 }}>
-              اتركه فارغاً إذا كانت الصيانة ما زالت جارية.
-            </span>
-          </label>
-
-          {/* Actions */}
-          <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end", paddingTop: "0.5rem" }}>
-            <button
-              type="button"
-              onClick={onClose}
-              disabled={saving}
-              style={{ height: 40, padding: "0 1.25rem", borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", fontSize: 13, fontWeight: 600, color: "var(--color-text-secondary)", cursor: saving ? "not-allowed" : "pointer", fontFamily: "var(--font-sans)" }}
-            >
-              إلغاء
-            </button>
-            <button
-              type="submit"
-              disabled={saving}
-              style={{ height: 40, padding: "0 1.5rem", borderRadius: "var(--radius-md)", border: "none", background: saving ? "var(--color-brand-400)" : "var(--color-brand-600)", fontSize: 13, fontWeight: 700, color: "#FFF", cursor: saving ? "not-allowed" : "pointer", display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--font-sans)" }}
-            >
-              {saving && <Spinner size="sm" className="text-white" />}
-              {saving ? "جارٍ الحفظ…" : isNew ? "إضافة السجل" : "حفظ التغييرات"}
-            </button>
-          </div>
       </form>
-      </div>
+    </Modal>
-    </div>
   );
 }

src/Components/Car_Maintanance/archive/ArchivedCarMaintananceDetailpanel.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import { useEffect } from "react";
+import { Alert, Badge, Button, Modal, Spinner } from "../../UI";
-import { Spinner } from "../../UI";
 import {
   MAINTENANCE_STATUS_MAP,
   fmtDate,
@@ -33,55 +32,21 @@ function DetailRow({ label, value, mono = false }: { label: string; value: strin
 }
 
 export function ArchivedCarMaintenanceDetailPanel({ record, loading, error, onClose }: ArchivedCarMaintenanceDetailPanelProps) {
-  useEffect(() => {
-    const h = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
-    window.addEventListener("keydown", h);
-    return () => window.removeEventListener("keydown", h);
-  }, [onClose]);
-
   return (
-    <div
+    <Modal
-      role="dialog" aria-modal="true" aria-labelledby="archived-maintenance-detail-title"
+      open
-      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
+      title={record ? record.reason : "عرض السجل"}
-      style={{
+      subtitle="سجل صيانة مؤرشف"
-        position: "fixed", inset: 0, zIndex: 80,
+      onClose={onClose}
-        background: "rgba(15,23,42,0.55)", backdropFilter: "blur(4px)",
+      zIndex={60}
-        display: "flex", alignItems: "center", justifyContent: "center", padding: "1rem",
+      size="md"
-      }}
+      footer={
+        <Button type="button" variant="secondary" onClick={onClose}>
+          إغلاق
+        </Button>
+      }
     >
-      <div
+      <div dir="rtl">
-        onClick={e => e.stopPropagation()}
-        style={{
-          width: "100%", maxWidth: 480,
-          background: "var(--color-surface)",
-          borderRadius: "var(--radius-2xl)",
-          border: "1px solid var(--color-border)",
-          boxShadow: "0 24px 64px rgba(0,0,0,.18)",
-          overflow: "hidden",
-          display: "flex", flexDirection: "column",
-        }}
-      >
-        <div style={{
-          display: "flex", alignItems: "center", justifyContent: "space-between",
-          padding: "1.25rem 1.5rem",
-          borderBottom: "1px solid var(--color-border)",
-          background: "var(--color-surface-muted)",
-        }}>
-          <div>
-            <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#EA580C", fontWeight: 600, margin: 0 }}>
-              سجل صيانة مؤرشف
-            </p>
-            <h2 id="archived-maintenance-detail-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
-              {record ? record.reason : "عرض السجل"}
-            </h2>
-          </div>
-          <button type="button" onClick={onClose} aria-label="إغلاق"
-            style={{ width: 34, height: 34, borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", cursor: "pointer", fontSize: 18, color: "var(--color-text-muted)", display: "flex", alignItems: "center", justifyContent: "center" }}>
-            ×
-          </button>
-        </div>
-
-        <div style={{ padding: "1.5rem", overflowY: "auto", maxHeight: "70vh" }} dir="rtl">
         {loading && (
           <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 10, padding: "3rem 0", color: "var(--color-text-muted)" }}>
             <Spinner size="sm" className="text-blue-600" />
@@ -89,23 +54,19 @@ export function ArchivedCarMaintenanceDetailPanel({ record, loading, error, onCl
           </div>
         )}
 
-          {!loading && error && (
+        {!loading && error && <Alert type="error" message={error} />}
-            <div style={{ padding: "1rem 1.25rem", borderRadius: "var(--radius-lg)", background: "#FEF2F2", border: "1px solid #FECACA", fontSize: 13, color: "#991B1B", fontWeight: 500, textAlign: "center" }}>
-              {error}
-            </div>
-          )}
 
         {!loading && record && (() => {
           const status = MAINTENANCE_STATUS_MAP[getMaintenanceStatus(record)];
           return (
             <>
               <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: "1.25rem" }}>
+                {/* Dynamic per-status colors come from MAINTENANCE_STATUS_MAP, which
+                    doesn't map cleanly onto the fixed Badge color palette — kept custom. */}
                 <span style={{ borderRadius: "var(--radius-full)", border: `1px solid ${status.border}`, background: status.bg, padding: "0.3rem 0.875rem", fontSize: 12, fontWeight: 700, color: status.color }}>
                   {status.label}
                 </span>
-                  <span style={{ borderRadius: "var(--radius-full)", border: "1px solid #FECACA", background: "#FEF2F2", padding: "0.3rem 0.875rem", fontSize: 12, fontWeight: 700, color: "#DC2626" }}>
+                <Badge label="مؤرشف" color="red" />
-                    مؤرشف
-                  </span>
               </div>
 
               {record.car && (
@@ -125,14 +86,6 @@ export function ArchivedCarMaintenanceDetailPanel({ record, loading, error, onCl
           );
         })()}
       </div>
-
+    </Modal>
-        <div style={{ padding: "1rem 1.5rem", borderTop: "1px solid var(--color-border)", background: "var(--color-surface-muted)", display: "flex", justifyContent: "flex-end" }}>
-          <button type="button" onClick={onClose}
-            style={{ height: 40, padding: "0 1.5rem", borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", fontSize: 13, fontWeight: 600, color: "var(--color-text-secondary)", cursor: "pointer", fontFamily: "var(--font-sans)" }}>
-            إغلاق
-          </button>
-        </div>
-      </div>
-    </div>
   );
 }

src/Components/Car_Maintanance/archive/ArchivedCarMaintananceTable.tsx

@@ -1,31 +1,12 @@
 "use client";
 
-import { Spinner } from "../../UI";
+
+
+import { IconBtn, ReusableTable } from "../../UI";
 import { fmtDateShort, fmtCost } from "@/src/types/carMaintanance";
+import type { TableColumn } from "@/src/types/models";
 import type { CarMaintenance } from "@/src/types/carMaintanance";
 
-const cardStyle: React.CSSProperties = {
-  borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)",
-  background: "var(--color-surface)", overflow: "hidden", boxShadow: "var(--shadow-card)",
-};
-const thStyle: React.CSSProperties = {
-  padding: "0.75rem 1.5rem", fontSize: 11, fontWeight: 700,
-  textTransform: "uppercase", letterSpacing: "0.2em",
-  color: "var(--color-text-muted)", background: "var(--color-surface-muted)",
-  borderBottom: "1px solid var(--color-border)",
-};
-
-function IconBtn({ onClick, title, color, bg, borderColor, children }: {
-  onClick: () => void; title: string; color: string; bg: string; borderColor: string; children: React.ReactNode;
-}) {
-  return (
-    <button type="button" title={title} aria-label={title} onClick={e => { e.stopPropagation(); onClick(); }}
-      style={{ width: 32, height: 32, borderRadius: "var(--radius-md)", border: `1px solid ${borderColor}`, background: bg, color, cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center", transition: "opacity 150ms" }}>
-      {children}
-    </button>
-  );
-}
-
 interface ArchivedCarMaintenanceTableProps {
   records:      CarMaintenance[];
   loading:      boolean;
@@ -41,87 +22,78 @@ interface ArchivedCarMaintenanceTableProps {
 export function ArchivedCarMaintenanceTable({
   records, loading, search, page, pages, showCar = false, onView, onPageChange,
 }: ArchivedCarMaintenanceTableProps) {
-  const columns = showCar ? "2fr 1fr 1fr 1fr 1fr 100px" : "2fr 1fr 1fr 1fr 100px";
+  const columns: TableColumn<CarMaintenance>[] = [
-
+    {
-  return (
+      key: "reason",
-    <div style={cardStyle}>
+      header: "سبب الصيانة",
-      <div dir="rtl" style={{ display: "grid", gridTemplateColumns: columns, ...thStyle }}>
+      width: "2fr",
-        <span>سبب الصيانة</span>
+      render: (r) => (
-        {showCar && <span>المركبة</span>}
-        <span>التكلفة</span>
-        <span>تاريخ البدء</span>
-        <span style={{ textAlign: "center" }}>تاريخ الانتهاء</span>
-        <span style={{ textAlign: "center" }}>إجراءات</span>
-      </div>
-
-      {loading ? (
-        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, padding: "4rem 0", color: "var(--color-text-muted)" }}>
-          <Spinner size="sm" className="text-blue-600" />
-          <span style={{ fontSize: 13 }}>جارٍ التحميل…</span>
-        </div>
-      ) : records.length === 0 ? (
-        <div style={{ textAlign: "center", padding: "4rem 1rem" }}>
-          <p style={{ fontSize: 13, color: "var(--color-text-muted)" }}>
-            {search ? `لا توجد نتائج لـ "${search}"` : "لا توجد سجلات صيانة في الأرشيف."}
-          </p>
-        </div>
-      ) : (
-        <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
-          {records.map((r, i) => (
-            <li key={r.id} style={{
-              display: "grid", gridTemplateColumns: columns,
-              alignItems: "center", gap: "0.5rem", padding: "0.875rem 1.5rem",
-              borderBottom: "1px solid var(--color-border)",
-              background: i % 2 !== 0 ? "var(--color-surface-muted)" : "transparent",
-              fontSize: 13,
-            }}>
         <div>
           <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>{r.reason}</p>
           <p style={{ marginTop: 2, fontSize: 11, color: "var(--color-text-muted)" }}>أضيف {fmtDateShort(r.createdAt)}</p>
         </div>
-              {showCar && (
+      ),
+    },
+    // Only shown in the global (cross-car) archive view.
+    ...(showCar
+      ? [{
+          key: "car",
+          header: "المركبة",
+          width: "1fr",
+          render: (r: CarMaintenance) => (
             <span style={{ color: "var(--color-text-secondary)" }}>
               {r.car ? `${r.car.manufacturer} ${r.car.model}` : "—"}
             </span>
-              )}
+          ),
+        } as TableColumn<CarMaintenance>]
+      : []),
+    {
+      key: "cost",
+      header: "التكلفة",
+      width: "1fr",
+      render: (r) => (
         <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "#2563EB", fontWeight: 600 }}>
           {fmtCost(r.cost)}
         </span>
+      ),
+    },
+    { key: "startAt", header: "تاريخ البدء", width: "1fr", render: (r) => (
         <span style={{ color: "var(--color-text-secondary)" }}>{fmtDateShort(r.startAt)}</span>
-              <span style={{ textAlign: "center", fontSize: 12, color: "var(--color-text-muted)" }}>
+      ),
+    },
+    {
+      key: "endAt",
+      header: "تاريخ الانتهاء",
+      width: "1fr",
+      render: (r) => (
+        <span style={{ fontSize: 12, color: "var(--color-text-muted)" }}>
           {fmtDateShort(r.endAt)}
         </span>
-              <div style={{ display: "flex", justifyContent: "center", gap: 4 }}>
+      ),
-                <IconBtn title={`عرض ${r.reason}`} color="#059669" bg="#ECFDF5" borderColor="#A7F3D0" onClick={() => onView(r)}>
+    },
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+  ];
-                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
-                    <circle cx="12" cy="12" r="3" />
-                  </svg>
-                </IconBtn>
-              </div>
-            </li>
-          ))}
-        </ul>
-      )}
 
-      {pages > 1 && (
+  return (
-        <div dir="rtl" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", borderTop: "1px solid var(--color-border)", padding: "0.875rem 1.5rem" }}>
+    <ReusableTable
-          <span style={{ fontSize: 12, color: "var(--color-text-muted)" }}>
+      columns={columns}
-            صفحة <strong style={{ color: "var(--color-text-primary)" }}>{page}</strong> من <strong style={{ color: "var(--color-text-primary)" }}>{pages}</strong>
+      data={records}
-          </span>
+      loading={loading}
-          <div style={{ display: "flex", gap: "0.5rem" }}>
+      search={search}
-            {[
+      page={page}
-              { label: "السابق", action: () => onPageChange(Math.max(1, page - 1)),     disabled: page === 1     },
+      pages={pages}
-              { label: "التالي", action: () => onPageChange(Math.min(pages, page + 1)), disabled: page === pages },
+      onPageChange={onPageChange}
-            ].map(btn => (
+      actionsWidth="100px"
-              <button key={btn.label} type="button" onClick={btn.action} disabled={btn.disabled}
+      onRowClick={onView}
-                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)" }}>
+      emptyDescription={search ? `لا توجد نتائج لـ "${search}"` : "لا توجد سجلات صيانة في الأرشيف."}
-                {btn.label}
+      renderActions={(r) => (
-              </button>
+        <IconBtn
-            ))}
+          title={`عرض ${r.reason}`}
-          </div>
+          color="#059669" bg="#ECFDF5" borderColor="#A7F3D0"
-        </div>
+          onClick={() => onView(r)}
+        >
+          <i className="ti ti-eye" style={{ fontSize: 14 }} aria-hidden="true" />
+        </IconBtn>
       )}
-    </div>
+    />
   );
 }

src/Components/Car_Maintanance/archive/ArchivedCarsMaintananceModal.tsx

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

src/Components/Client/Addressformmodal.tsx

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

src/Components/Client/Clientformmodal.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { Alert, Spinner } from "../UI";
+import { Alert, Button, Input, Modal, Select } from "../UI";
 import {
   createClientSchema,
   updateClientSchema,
@@ -11,39 +10,7 @@ import {
 } from "@/src/validations/client.validator";
 import type { Client, ClientFormData } from "@/src/types/client";
 
-// ── Styles ─────────────────────────────────────────────────────────────────
+const FORM_ID = "client-form";
-const S = {
-  input: {
-    width: "100%",
-    height: 40,
-    padding: "0 0.75rem",
-    borderRadius: "var(--radius-md)",
-    border: "1px solid var(--color-border)",
-    background: "var(--color-surface)",
-    fontSize: 13,
-    color: "var(--color-text-primary)",
-    outline: "none",
-    fontFamily: "var(--font-sans)",
-  } as React.CSSProperties,
-  label: {
-    display: "flex",
-    flexDirection: "column" as const,
-    gap: 6,
-    fontSize: 12,
-    fontWeight: 600,
-    color: "var(--color-text-secondary)",
-  } as React.CSSProperties,
-  errorText: {
-    fontSize: 11,
-    color: "var(--color-danger)",
-    fontWeight: 500,
-  } as React.CSSProperties,
-};
-
-const withError = (hasError: boolean): React.CSSProperties => ({
-  ...S.input,
-  ...(hasError ? { borderColor: "var(--color-danger)", background: "#FEF2F2" } : {}),
-});
 
 // ── Props ──────────────────────────────────────────────────────────────────
 interface ClientFormModalProps {
@@ -59,7 +26,6 @@ interface ClientFormModalProps {
 export function ClientFormModal({ editClient, onClose, onSubmit }: ClientFormModalProps) {
   const isNew = editClient === null;
 
-  // FIX 1: was `Schema` (capital S) — now correctly `schema`
   const {
     register,
     handleSubmit,
@@ -76,12 +42,6 @@ export function ClientFormModal({ editClient, onClose, onSubmit }: ClientFormMod
     },
   });
 
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
-    window.addEventListener("keydown", handler);
-    return () => window.removeEventListener("keydown", handler);
-  }, [onClose]);
-
   const submitHandler = async (data: ClientFormData) => {
     const ok = await onSubmit(data, isNew);
     if (ok) {
@@ -92,166 +52,70 @@ export function ClientFormModal({ editClient, onClose, onSubmit }: ClientFormMod
   };
 
   return (
-    <div
+    <Modal
-      role="dialog"
+      open
-      aria-modal="true"
+      onClose={onClose}
-      aria-labelledby="client-modal-title"
+      size="sm"
-      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+      subtitle={isNew ? "إضافة عميل" : "تعديل عميل"}
-      style={{
+      title={isNew ? "عميل جديد" : editClient?.name ?? ""}
-        position: "fixed",
+      footer={
-        inset: 0,
+        <>
-        zIndex: 50,
+          <Button variant="secondary" type="button" onClick={onClose} disabled={isSubmitting}>
-        background: "rgba(15,23,42,0.55)",
+            إلغاء
-        backdropFilter: "blur(4px)",
+          </Button>
-        display: "flex",
+          <Button type="submit" form={FORM_ID} loading={isSubmitting}>
-        alignItems: "center",
+            {isNew ? "إضافة العميل" : "حفظ التغييرات"}
-        justifyContent: "center",
+          </Button>
-        padding: "1rem",
+        </>
-      }}
+      }
     >
-      <div
-        onClick={(e) => e.stopPropagation()}
-        style={{
-          width: "100%",
-          maxWidth: 520,
-          background: "var(--color-surface)",
-          borderRadius: "var(--radius-2xl)",
-          border: "1px solid var(--color-border)",
-          boxShadow: "0 24px 64px rgba(0,0,0,.18)",
-          overflow: "hidden",
-        }}
-      >
-        {/* Header */}
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            padding: "1.25rem 1.5rem",
-            borderBottom: "1px solid var(--color-border)",
-            background: "var(--color-surface-muted)",
-          }}
-        >
-          <div>
-            <p
-              style={{
-                fontSize: 11,
-                letterSpacing: "0.3em",
-                textTransform: "uppercase",
-                color: "#2563EB",
-                fontWeight: 600,
-                margin: 0,
-              }}
-            >
-              {isNew ? "إضافة عميل" : "تعديل عميل"}
-            </p>
-            <h2
-              id="client-modal-title"
-              style={{
-                fontSize: 17,
-                fontWeight: 700,
-                color: "var(--color-text-primary)",
-                margin: "4px 0 0",
-              }}
-            >
-              {isNew ? "عميل جديد" : editClient?.name}
-            </h2>
-          </div>
-          <button
-            type="button"
-            onClick={onClose}
-            aria-label="إغلاق"
-            style={{
-              width: 34,
-              height: 34,
-              borderRadius: "var(--radius-md)",
-              border: "1px solid var(--color-border)",
-              background: "var(--color-surface)",
-              cursor: "pointer",
-              fontSize: 18,
-              color: "var(--color-text-muted)",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
-            ×
-          </button>
-        </div>
-
-        {/* Body */}
       <form
+        id={FORM_ID}
         onSubmit={handleSubmit(submitHandler)}
         noValidate
-          style={{
+        dir="rtl"
-            padding: "1.5rem",
+        className="flex flex-col gap-4"
-            display: "flex",
-            flexDirection: "column",
-            gap: "1rem",
-          }}
       >
         {errors.name?.type === "manual" && (
           <Alert type="error" message={errors.name.message ?? ""} onClose={() => {}} />
         )}
 
-          <label style={S.label}>
+        <Input
-            اسم العميل {isNew && "*"}
+          label={`اسم العميل ${isNew ? "*" : ""}`}
-            <input
-              {...register("name")}
-              style={withError(!!errors.name)}
           placeholder="شركة لوجي فلو للتوصيل"
           autoComplete="organization"
           dir="rtl"
+          error={errors.name?.type !== "manual" ? errors.name?.message : undefined}
+          {...register("name")}
         />
-            {errors.name && errors.name.type !== "manual" && (
-              <span style={S.errorText}>{errors.name.message}</span>
-            )}
-          </label>
 
-          <div
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-            style={{
+          <Input
-              display: "grid",
+            label="البريد الإلكتروني"
-              gridTemplateColumns: "1fr 1fr",
-              gap: "0.75rem",
-            }}
-          >
-            <label style={S.label}>
-              البريد الإلكتروني
-              <input
-                {...register("email")}
-                style={withError(!!errors.email)}
             type="email"
             placeholder="info@company.sa"
             autoComplete="email"
             dir="ltr"
+            error={errors.email?.message}
+            {...register("email")}
           />
-              {errors.email && (
-                <span style={S.errorText}>{errors.email.message}</span>
-              )}
-            </label>
 
-            <label style={S.label}>
+          <Input
-              رقم الهاتف {isNew && "*"}
+            label={`رقم الهاتف ${isNew ? "*" : ""}`}
-              <input
-                {...register("phone")}
-                style={withError(!!errors.phone)}
             type="tel"
             placeholder="05xxxxxxxx"
             autoComplete="tel"
             dir="ltr"
+            error={errors.phone?.message}
+            {...register("phone")}
           />
-              {errors.phone && (
-                <span style={S.errorText}>{errors.phone.message}</span>
-              )}
-            </label>
         </div>
 
-          <label style={S.label}>
+        <Select
-            نوع العميل
+          label="نوع العميل"
-            <select
-              {...register("clientType")}
-              style={{ ...withError(!!errors.clientType), cursor: "pointer" }}
           dir="rtl"
+          error={errors.clientType?.message}
+          {...register("clientType")}
         >
           <option value="">اختر النوع</option>
           {CLIENT_TYPES.map((t) => (
@@ -259,88 +123,20 @@ export function ClientFormModal({ editClient, onClose, onSubmit }: ClientFormMod
               {t === "Individual" ? "فرد" : "شركة"}
             </option>
           ))}
-            </select>
+        </Select>
-            {errors.clientType && (
-              <span style={S.errorText}>{errors.clientType.message}</span>
-            )}
-          </label>
 
         {!isNew && (
-            <label
+          <label className="flex items-center gap-2 text-[12px] font-semibold text-[var(--color-text-secondary)] cursor-pointer">
-              style={{
-                display: "flex",
-                alignItems: "center",
-                gap: 8,
-                fontSize: 12,
-                fontWeight: 600,
-                color: "var(--color-text-secondary)",
-                cursor: "pointer",
-              }}
-            >
             <input
               type="checkbox"
               {...register("isActive" as never)}
               defaultChecked={editClient?.isActive ?? true}
-                style={{ width: 14, height: 14, cursor: "pointer" }}
+              className="w-3.5 h-3.5 cursor-pointer"
             />
             عميل نشط
           </label>
         )}
-
-          <div
-            style={{
-              display: "flex",
-              gap: "0.5rem",
-              justifyContent: "flex-end",
-              paddingTop: "0.5rem",
-            }}
-          >
-            <button
-              type="button"
-              onClick={onClose}
-              disabled={isSubmitting}
-              style={{
-                height: 40,
-                padding: "0 1.25rem",
-                borderRadius: "var(--radius-md)",
-                border: "1px solid var(--color-border)",
-                background: "var(--color-surface)",
-                fontSize: 13,
-                fontWeight: 600,
-                color: "var(--color-text-secondary)",
-                cursor: isSubmitting ? "not-allowed" : "pointer",
-                fontFamily: "var(--font-sans)",
-              }}
-            >
-              إلغاء
-            </button>
-            <button
-              type="submit"
-              disabled={isSubmitting}
-              style={{
-                height: 40,
-                padding: "0 1.5rem",
-                borderRadius: "var(--radius-md)",
-                border: "none",
-                background: isSubmitting
-                  ? "var(--color-brand-400)"
-                  : "var(--color-brand-600)",
-                fontSize: 13,
-                fontWeight: 700,
-                color: "#FFF",
-                cursor: isSubmitting ? "not-allowed" : "pointer",
-                display: "flex",
-                alignItems: "center",
-                gap: 8,
-                fontFamily: "var(--font-sans)",
-              }}
-            >
-              {isSubmitting && <Spinner size="sm" className="text-white" />}
-              {isSubmitting ? "جارٍ الحفظ…" : isNew ? "إضافة العميل" : "حفظ التغييرات"}
-            </button>
-          </div>
       </form>
-      </div>
+    </Modal>
-    </div>
   );
 }

src/Components/Client/Clienttable.tsx

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

src/Components/Client/Deleteconfirmmodal.tsx

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

src/Components/Client/archive/ArchivedClientDetailModal.tsx

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

src/Components/Client/archive/ArchivedClientTable.tsx

@@ -1,41 +1,13 @@
 "use client";
 
-import { Spinner } from "../../UI";
+// src/Components/Client/archive/ArchivedClientTable.tsx
+// MIGRATED to ReusableTable + ActionButtons. View-only, no row click in
+// the original.
+
+import { Badge, ReusableTable, ActionButtons } from "../../UI";
+import type { TableColumn } from "@/src/types/models";
 import type { ArchivedClient } from "@/src/types/client";
 
-// ── status badge ─────────────────────────────────────────────────────────────
-function StatusBadge({ active }: { active: boolean }) {
-  return (
-    <span style={{ display: "inline-flex", alignItems: "center", gap: 5, borderRadius: "var(--radius-full)", border: active ? "1px solid #BBF7D0" : "1px solid #FECACA", background: active ? "#DCFCE7" : "#FEF2F2", padding: "0.2rem 0.625rem", fontSize: 11, fontWeight: 600, color: active ? "#166534" : "#991B1B" }}>
-      <span style={{ width: 6, height: 6, borderRadius: "50%", background: active ? "#16A34A" : "#DC2626" }} />
-      {active ? "نشط" : "معطل"}
-    </span>
-  );
-}
-
-// ── icon button ──────────────────────────────────────────────────────────────
-function IconBtn({ onClick, title, color, bg, borderColor, children }: { onClick: () => void; title: string; color: string; bg: string; borderColor: string; children: React.ReactNode }) {
-  return (
-    <button type="button" title={title} aria-label={title} onClick={e => { e.stopPropagation(); onClick(); }}
-      style={{ width: 32, height: 32, borderRadius: "var(--radius-md)", border: `1px solid ${borderColor}`, background: bg, color, cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center", transition: "opacity 150ms" }}>
-      {children}
-    </button>
-  );
-}
-
-// ── card / header styles ─────────────────────────────────────────────────────
-const cardStyle: React.CSSProperties = {
-  borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)",
-  background: "var(--color-surface)", overflow: "hidden", boxShadow: "var(--shadow-card)",
-};
-const thStyle: React.CSSProperties = {
-  padding: "0.75rem 1.5rem", fontSize: 11, fontWeight: 700,
-  textTransform: "uppercase", letterSpacing: "0.2em",
-  color: "var(--color-text-muted)", background: "var(--color-surface-muted)",
-  borderBottom: "1px solid var(--color-border)",
-};
-
-// ── Props ────────────────────────────────────────────────────────────────────
 interface ArchivedClientTableProps {
   clients: ArchivedClient[];
   loading: boolean;
@@ -46,89 +18,59 @@ interface ArchivedClientTableProps {
   onPageChange: (p: number) => void;
 }
 
-// ── main table ───────────────────────────────────────────────────────────────
 export function ArchivedClientTable({ clients, loading, search, page, pages, onView, onPageChange }: ArchivedClientTableProps) {
-  return (
+  const columns: TableColumn<ArchivedClient>[] = [
-    <div style={cardStyle}>
+    {
-      {/* column headers */}
+      key: "name",
-      <div dir="rtl" style={{ display: "grid", gridTemplateColumns: "2fr 1.5fr 1fr 1fr 1fr 100px", ...thStyle }}>
+      header: "اسم العميل",
-        <span>العميل</span>
+      width: "2fr",
-        <span>البريد الإلكتروني</span>
+      render: (c) => (
-        <span>الحالة</span>
-        <span style={{ textAlign: "center" }}>تاريخ الإنشاء</span>
-        <span style={{ textAlign: "center" }}>آخر تحديث</span>
-        <span style={{ textAlign: "center" }}>إجراءات</span>
-      </div>
-
-      {/* loading state */}
-      {loading ? (
-        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, padding: "4rem 0", color: "var(--color-text-muted)" }}>
-          <Spinner size="sm" className="text-blue-600" />
-          <span style={{ fontSize: 13 }}>جارٍ التحميل…</span>
-        </div>
-      ) : clients.length === 0 ? (
-        /* empty state */
-        <div style={{ textAlign: "center", padding: "4rem 1rem" }}>
-          <p style={{ fontSize: 13, color: "var(--color-text-muted)" }}>
-            {search ? `لا توجد نتائج لـ "${search}"` : "لا يوجد عملاء في الأرشيف."}
-          </p>
-        </div>
-      ) : (
-        /* data rows */
-        <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
-          {clients.map((c, i) => (
-            <li key={c.id} style={{
-              display: "grid", gridTemplateColumns: "2fr 1.5fr 1fr 1fr 1fr 100px",
-              alignItems: "center", gap: "0.5rem", padding: "0.875rem 1.5rem",
-              borderBottom: "1px solid var(--color-border)",
-              background: i % 2 !== 0 ? "var(--color-surface-muted)" : "transparent",
-              fontSize: 13,
-            }}>
         <div>
           <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>{c.name}</p>
           <p style={{ marginTop: 2, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--color-text-muted)" }}>{c.phone}</p>
         </div>
-              <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "#2563EB", fontWeight: 600 }}>{c.email}</span>
+      ),
-              <StatusBadge active={c.isActive} />
+    },
-              <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
+    {
-                {new Date(c.createdAt).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" })}
+      key: "email",
-              </span>
+      header: "البريد الالكتروني",
-              <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
+      width: "1.5fr",
-                {new Date(c.updatedAt).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" })}
+      render: (c) => <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "#2563EB", fontWeight: 600 }}>{c.email}</span>,
-              </span>
+    },
-              <div style={{ display: "flex", justifyContent: "center", gap: 4 }}>
+    {
-                {/* view only — delete/restore not implemented yet, matches archived users */}
+      key: "status",
-                <IconBtn title={`عرض ${c.name}`} color="#059669" bg="#ECFDF5" borderColor="#A7F3D0" onClick={() => onView(c)}>
+      header: "الحالة",
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      width: "1fr",
-                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+      render: (c) => <Badge label={c.isActive ? "Active" : "Disabled"} color={c.isActive ? "green" : "red"} />,
-                    <circle cx="12" cy="12" r="3" />
+    },
-                  </svg>
+    {
-                </IconBtn>
+      key: "createdAt",
-              </div>
+      header: "تاريخ الانشاء",
-            </li>
+      width: "1fr",
-          ))}
+      align: "center",
-        </ul>
+      render: (c) => new Date(c.createdAt).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" }),
-      )}
+    },
+    {
+      key: "updatedAt",
+      header: "تاريخ التعديل",
+      width: "1fr",
+      align: "center",
+      render: (c) => new Date(c.updatedAt).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" }),
+    },
+  ];
 
-      {/* pagination */}
+  return (
-      {pages > 1 && (
+    <ReusableTable
-        <div dir="rtl" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", borderTop: "1px solid var(--color-border)", padding: "0.875rem 1.5rem" }}>
+      columns={columns}
-          <span style={{ fontSize: 12, color: "var(--color-text-muted)" }}>
+      data={clients}
-            صفحة <strong style={{ color: "var(--color-text-primary)" }}>{page}</strong> من <strong style={{ color: "var(--color-text-primary)" }}>{pages}</strong>
+      loading={loading}
-          </span>
+      search={search}
-          <div style={{ display: "flex", gap: "0.5rem" }}>
+      page={page}
-            {[
+      pages={pages}
-              { label: "السابق", action: () => onPageChange(Math.max(1, page - 1)),     disabled: page === 1     },
+      onPageChange={onPageChange}
-              { label: "التالي", action: () => onPageChange(Math.min(pages, page + 1)), disabled: page === pages },
+      emptyIcon="👥"
-            ].map(btn => (
+      emptyDescription={search ? `No results for "${search}"` : "No archived clients."}
-              <button key={btn.label} type="button" onClick={btn.action} disabled={btn.disabled}
+      renderActions={(c) => <ActionButtons itemLabel={c.name} onView={() => onView(c)} />}
-                style={{ borderRadius: "var(--radius-lg)", border: "1px solid var(--color-border)", background: "var(--color-surface-muted)", padding: "0.375rem 0.875rem", fontSize: 12, color: "var(--color-text-secondary)", cursor: btn.disabled ? "not-allowed" : "pointer", opacity: btn.disabled ? 0.4 : 1, fontFamily: "var(--font-sans)" }}>
+    />
-                {btn.label}
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
   );
 }

src/Components/Client/archive/ArchivedClientsModal.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Alert } from "../../UI";
+import { Alert, Input, Modal } from "../../UI";
 import { ArchivedClientTable } from "./ArchivedClientTable";
 import { ArchivedClientDetailModal } from "./ArchivedClientDetailModal";
 import { useArchivedClients } from "@/src/hooks/archive/useArchivedClients";
@@ -20,79 +20,30 @@ export function ArchivedClientsModal({ onClose }: ArchivedClientsModalProps) {
   } = useArchivedClients();
 
   return (
-    <div
+    <Modal
-      role="dialog" aria-modal="true" aria-labelledby="archive-client-modal-title"
+      open
-      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
+      title={`العملاء المؤرشفون (${total})`}
-      style={{
+      subtitle="الأرشيف"
-        position: "fixed", inset: 0, zIndex: 70,
+      onClose={onClose}
-        background: "rgba(15,23,42,0.6)", backdropFilter: "blur(4px)",
+      size="lg"
-        display: "flex", alignItems: "flex-start", justifyContent: "center",
-        padding: "2rem 1rem", overflowY: "auto",
-      }}
     >
       {viewClientId && (
         <ArchivedClientDetailModal clientId={viewClientId} onClose={() => setViewClientId(null)} />
       )}
 
-      <div
+      <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
-        onClick={e => e.stopPropagation()}
-        style={{
-          width: "100%", maxWidth: 920,
-          background: "var(--color-surface-sunken)",
-          borderRadius: "var(--radius-xl)",
-          border: "1px solid var(--color-border)",
-          boxShadow: "0 24px 64px rgba(0,0,0,.2)",
-          overflow: "hidden",
-        }}
-      >
-        {/* header */}
-        <div dir="rtl" style={{
-          display: "flex", alignItems: "center", justifyContent: "space-between",
-          padding: "1.25rem 1.5rem",
-          borderBottom: "1px solid var(--color-border)",
-          background: "var(--color-surface)",
-        }}>
-          <div>
-            <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#EA580C", fontWeight: 600, margin: 0 }}>
-              الأرشيف
-            </p>
-            <h2 id="archive-client-modal-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
-              العملاء المؤرشفون
-              <span style={{ marginInlineStart: 8, fontSize: 13, fontWeight: 500, color: "var(--color-text-muted)" }}>
-                ({total})
-              </span>
-            </h2>
-          </div>
-          <button type="button" onClick={onClose} aria-label="إغلاق"
-            style={{ width: 34, height: 34, borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", cursor: "pointer", fontSize: 18, color: "var(--color-text-muted)", display: "flex", alignItems: "center", justifyContent: "center" }}>
-            ×
-          </button>
-        </div>
-
-        {/* body */}
-        <div style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
         {/* search */}
-          <div dir="rtl" style={{ position: "relative", maxWidth: 320 }}>
+        <div style={{ maxWidth: 320 }}>
-            <svg style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", width: 16, height: 16, color: "var(--color-text-hint)", pointerEvents: "none" }}
+          <Input
-              fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+            label="بحث"
-              <circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" />
-            </svg>
-            <input
             type="text"
             placeholder="بحث بالاسم أو البريد الإلكتروني..."
             value={search}
             onChange={e => handleSearch(e.target.value)}
             dir="rtl"
-              style={{
+            icon={
-                width: "100%", height: 40,
+              <i className="ti ti-search" style={{ fontSize: 16 }} aria-hidden="true" />
-                paddingRight: 36, paddingLeft: 12,
+            }
-                borderRadius: "var(--radius-lg)",
-                border: "1px solid var(--color-border)",
-                background: "var(--color-surface)",
-                fontSize: 13, outline: "none",
-                fontFamily: "var(--font-sans)",
-                color: "var(--color-text-primary)",
-              }}
           />
         </div>
 
@@ -108,7 +59,6 @@ export function ArchivedClientsModal({ onClose }: ArchivedClientsModalProps) {
           onPageChange={setPage}
         />
       </div>
-      </div>
+    </Modal>
-    </div>
   );
 }

src/Components/Client/index.ts

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

src/Components/Client_Adress/AddressDetailModal.tsx

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

src/Components/Client_Adress/Addressformmodal.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { useEffect } from "react";
 import { useForm, type Resolver } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { Alert, Spinner } from "../UI";
+import { Alert, Button, Input, Modal } from "../UI";
 import {
   createAddressSchema,
   updateAddressSchema,
@@ -13,32 +12,9 @@ import {
 import type { ClientAddress } from "@/src/types/client_adresses";
 
 // ── Styles ─────────────────────────────────────────────────────────────────
+// Only section-title styling is left here — every input/label/error visual
+// is now owned by the shared <Input /> component.
 const S = {
-  input: {
-    width: "100%",
-    height: 40,
-    padding: "0 0.75rem",
-    borderRadius: "var(--radius-md)",
-    border: "1px solid var(--color-border)",
-    background: "var(--color-surface)",
-    fontSize: 13,
-    color: "var(--color-text-primary)",
-    outline: "none",
-    fontFamily: "var(--font-sans)",
-  } as React.CSSProperties,
-  label: {
-    display: "flex",
-    flexDirection: "column" as const,
-    gap: 6,
-    fontSize: 12,
-    fontWeight: 600,
-    color: "var(--color-text-secondary)",
-  } as React.CSSProperties,
-  errorText: {
-    fontSize: 11,
-    color: "var(--color-danger)",
-    fontWeight: 500,
-  } as React.CSSProperties,
   sectionTitle: {
     fontSize: 11,
     fontWeight: 700,
@@ -50,11 +26,7 @@ const S = {
   } as React.CSSProperties,
 };
 
-const withError = (hasError: boolean): React.CSSProperties => ({
+const FORM_ID = "address-form";
-  ...S.input,
-  border: hasError ? "1px solid var(--color-danger)" : "1px solid var(--color-border)",
-  background: hasError ? "#FEF2F2" : S.input.background,
-});
 
 // ── Props ──────────────────────────────────────────────────────────────────
 interface AddressFormModalProps {
@@ -138,12 +110,6 @@ export function AddressFormModal({ editAddress, onClose, onSubmit }: AddressForm
     location: locationErr = {},
   } = errors as AddressErrors;
 
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
-    window.addEventListener("keydown", handler);
-    return () => window.removeEventListener("keydown", handler);
-  }, [onClose]);
-
   const submitHandler = async (data: CreateAddressFormValues | UpdateAddressFormValues) => {
     const ok = await onSubmit(data);
     if (ok) {
@@ -154,89 +120,28 @@ export function AddressFormModal({ editAddress, onClose, onSubmit }: AddressForm
   };
 
   return (
-    <div
+    <Modal
-      role="dialog"
+      open
-      aria-modal="true"
+      title={isNew ? "عنوان جديد" : editAddress?.label ?? ""}
-      aria-labelledby="addr-modal-title"
+      subtitle={isNew ? "إضافة عنوان" : "تعديل عنوان"}
-      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+      onClose={onClose}
-      style={{
+      size="md"
-        position: "fixed",
+      footer={
-        inset: 0,
+        <>
-        zIndex: 50,
+          <Button variant="secondary" onClick={onClose} disabled={isSubmitting}>
-        background: "rgba(15,23,42,0.55)",
+            إلغاء
-        backdropFilter: "blur(4px)",
+          </Button>
-        display: "flex",
+          <Button type="submit" form={FORM_ID} loading={isSubmitting}>
-        alignItems: "center",
+            {isNew ? "إضافة العنوان" : "حفظ التغييرات"}
-        justifyContent: "center",
+          </Button>
-        padding: "1rem",
+        </>
-      }}
+      }
     >
-      <div
-        onClick={(e) => e.stopPropagation()}
-        style={{
-          width: "100%",
-          maxWidth: 560,
-          maxHeight: "90vh",
-          background: "var(--color-surface)",
-          borderRadius: "var(--radius-2xl)",
-          border: "1px solid var(--color-border)",
-          boxShadow: "0 24px 64px rgba(0,0,0,.18)",
-          overflow: "hidden",
-          display: "flex",
-          flexDirection: "column",
-        }}
-      >
-        {/* Header */}
-        <div
-          style={{
-            flexShrink: 0,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            padding: "1.25rem 1.5rem",
-            borderBottom: "1px solid var(--color-border)",
-            background: "var(--color-surface-muted)",
-          }}
-        >
-          <div>
-            <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600, margin: 0 }}>
-              {isNew ? "إضافة عنوان" : "تعديل عنوان"}
-            </p>
-            <h2
-              id="addr-modal-title"
-              style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}
-            >
-              {isNew ? "عنوان جديد" : editAddress?.label}
-            </h2>
-          </div>
-          <button
-            type="button"
-            onClick={onClose}
-            aria-label="إغلاق"
-            style={{
-              width: 34,
-              height: 34,
-              borderRadius: "var(--radius-md)",
-              border: "1px solid var(--color-border)",
-              background: "var(--color-surface)",
-              cursor: "pointer",
-              fontSize: 18,
-              color: "var(--color-text-muted)",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
-            ×
-          </button>
-        </div>
-
-        {/* Scrollable body */}
-        <div style={{ overflowY: "auto", flex: 1 }}>
       <form
+        id={FORM_ID}
         onSubmit={handleSubmit(submitHandler)}
         noValidate
-            style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem" }}
+        style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
       >
         {errors.label?.type === "manual" && (
           <Alert type="error" message={errors.label.message ?? ""} onClose={() => {}} />
@@ -245,169 +150,148 @@ export function AddressFormModal({ editAddress, onClose, onSubmit }: AddressForm
         {/* Address Meta */}
         <p style={S.sectionTitle}>بيانات العنوان</p>
 
-            <label style={S.label}>
+        <Input
-              نوع العنوان
+          label={`نوع العنوان${isNew ? " *" : ""}`}
-              <input
           {...register("label")}
-                style={withError(!!errors.label && errors.label.type !== "manual")}
+          error={errors.label && errors.label.type !== "manual" ? errors.label.message : undefined}
           placeholder="مثال: منزل / مكتب / شحن"
           dir="rtl"
         />
-              {errors.label && errors.label.type !== "manual" && (
-                <span style={S.errorText}>{errors.label.message}</span>
-              )}
-            </label>
 
-            <label style={S.label}>
+        <Input
-              اسم الفرع (اختياري)
+          label="اسم الفرع (اختياري)"
-              <input {...register("branchName")} style={S.input} placeholder="فرع الرياض" dir="rtl" />
+          {...register("branchName")}
-            </label>
+          placeholder="فرع الرياض"
+          dir="rtl"
+        />
 
         {/* Address Details */}
         <p style={S.sectionTitle}>تفاصيل العنوان</p>
 
-            <label style={S.label}>
+        <Input
-              الشارع / العنوان التفصيلي {isNew && "*"}
+          label={`الشارع / العنوان التفصيلي${isNew ? " *" : ""}`}
-              <input
           {...register("details.street")}
-                style={withError(!!detailsErr.street)}
+          error={detailsErr.street?.message}
           placeholder="شارع الملك فهد، مبنى 12"
           dir="rtl"
         />
-              {detailsErr.street && <span style={S.errorText}>{detailsErr.street.message}</span>}
-            </label>
 
         <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
-              <label style={S.label}>
+          <Input
-                المدينة {isNew && "*"}
+            label={`المدينة${isNew ? " *" : ""}`}
-                <input {...register("details.city")} style={withError(!!detailsErr.city)} placeholder="الرياض" dir="rtl" />
+            {...register("details.city")}
-                {detailsErr.city && <span style={S.errorText}>{detailsErr.city.message}</span>}
+            error={detailsErr.city?.message}
-              </label>
+            placeholder="الرياض"
-              <label style={S.label}>
+            dir="rtl"
-                المنطقة
+          />
-                <input {...register("details.state")} style={withError(!!detailsErr.state)} placeholder="منطقة الرياض" dir="rtl" />
+          <Input
-                {detailsErr.state && <span style={S.errorText}>{detailsErr.state.message}</span>}
+            label="المنطقة"
-              </label>
+            {...register("details.state")}
+            error={detailsErr.state?.message}
+            placeholder="منطقة الرياض"
+            dir="rtl"
+          />
         </div>
 
         <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
-              <label style={S.label}>
+          <Input
-                الحي (اختياري)
+            label="الحي (اختياري)"
-                <input {...register("details.district")} style={S.input} placeholder="حي العليا" dir="rtl" />
+            {...register("details.district")}
-              </label>
+            placeholder="حي العليا"
-              <label style={S.label}>
+            dir="rtl"
-                رقم المبنى (اختياري)
+          />
-                <input {...register("details.buildingNo")} style={S.input} placeholder="1234" dir="ltr" />
+          <Input
-              </label>
+            label="رقم المبنى (اختياري)"
+            {...register("details.buildingNo")}
+            placeholder="1234"
+            dir="ltr"
+          />
         </div>
 
         <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
-              <label style={S.label}>
+          <Input
-                رقم الوحدة (اختياري)
+            label="رقم الوحدة (اختياري)"
-                <input {...register("details.unitNo")} style={S.input} placeholder="5678" dir="ltr" />
+            {...register("details.unitNo")}
-              </label>
+            placeholder="5678"
-              <label style={S.label}>
+            dir="ltr"
-                الرقم الإضافي (اختياري)
+          />
-                <input {...register("details.additionalNo")} style={S.input} placeholder="0000" dir="ltr" />
+          <Input
-              </label>
+            label="الرقم الإضافي (اختياري)"
+            {...register("details.additionalNo")}
+            placeholder="0000"
+            dir="ltr"
+          />
         </div>
 
         <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
-              <label style={S.label}>
+          <Input
-                الرمز البريدي (اختياري)
+            label="الرمز البريدي (اختياري)"
-                <input {...register("details.zipCode")} style={withError(!!detailsErr.zipCode)} placeholder="11564" dir="ltr" />
+            {...register("details.zipCode")}
-                {detailsErr.zipCode && <span style={S.errorText}>{detailsErr.zipCode.message}</span>}
+            error={detailsErr.zipCode?.message}
-              </label>
+            placeholder="11564"
-              <label style={S.label}>
+            dir="ltr"
-                الدولة
+          />
-                <input {...register("details.country")} style={withError(!!detailsErr.country)} placeholder="SA" dir="ltr" />
+          <Input
-                {detailsErr.country && <span style={S.errorText}>{detailsErr.country.message}</span>}
+            label="الدولة"
-              </label>
+            {...register("details.country")}
+            error={detailsErr.country?.message}
+            placeholder="SA"
+            dir="ltr"
+          />
         </div>
 
-            <label style={S.label}>
+        <Input
-              الشقة / الطابق (اختياري)
+          label="الشقة / الطابق (اختياري)"
-              <input {...register("details.apartment")} style={S.input} placeholder="الطابق الثالث" dir="rtl" />
+          {...register("details.apartment")}
-            </label>
+          placeholder="الطابق الثالث"
+          dir="rtl"
+        />
 
         {/* Contact Person */}
         <p style={S.sectionTitle}>جهة الاتصال (اختياري)</p>
 
         <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
-              <label style={S.label}>
+          <Input
-                الاسم
+            label="الاسم"
-                <input {...register("contactPerson.name")} style={withError(!!contactErr.name)} placeholder="أحمد محمد" dir="rtl" />
+            {...register("contactPerson.name")}
-                {contactErr.name && <span style={S.errorText}>{contactErr.name.message}</span>}
+            error={contactErr.name?.message}
-              </label>
+            placeholder="أحمد محمد"
-              <label style={S.label}>
+            dir="rtl"
-                رقم الهاتف
+          />
-                <input {...register("contactPerson.phone")} style={withError(!!contactErr.phone)} type="tel" placeholder="05xxxxxxxx" dir="ltr" />
+          <Input
-                {contactErr.phone && <span style={S.errorText}>{contactErr.phone.message}</span>}
+            label="رقم الهاتف"
-              </label>
+            {...register("contactPerson.phone")}
+            error={contactErr.phone?.message}
+            type="tel"
+            placeholder="05xxxxxxxx"
+            dir="ltr"
+          />
         </div>
 
         {/* Coordinates */}
-            <p style={S.sectionTitle}>الإحداثيات الجغرافية {isNew && "*"}</p>
+        <p style={S.sectionTitle}>الإحداثيات الجغرافية{isNew ? " *" : ""}</p>
 
         <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
-              <label style={S.label}>
+          <Input
-                خط الطول (Longitude) {isNew && "*"}
+            label={`خط الطول (Longitude)${isNew ? " *" : ""}`}
-                <input {...register("location.coordinates.0" as never)} style={withError(!!locationErr.coordinates)} type="number" step="any" placeholder="46.6753" dir="ltr" />
+            {...register("location.coordinates.0" as never)}
-              </label>
+            error={locationErr.coordinates?.message}
-              <label style={S.label}>
+            type="number"
-                خط العرض (Latitude) {isNew && "*"}
+            step="any"
-                <input {...register("location.coordinates.1" as never)} style={withError(!!locationErr.coordinates)} type="number" step="any" placeholder="24.7136" dir="ltr" />
+            placeholder="46.6753"
-                {locationErr.coordinates && <span style={S.errorText}>{locationErr.coordinates.message}</span>}
+            dir="ltr"
-              </label>
+          />
-            </div>
+          <Input
-
+            label={`خط العرض (Latitude)${isNew ? " *" : ""}`}
-            {/* Actions */}
+            {...register("location.coordinates.1" as never)}
-            <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end", paddingTop: "0.5rem" }}>
+            error={locationErr.coordinates?.message}
-              <button
+            type="number"
-                type="button"
+            step="any"
-                onClick={onClose}
+            placeholder="24.7136"
-                disabled={isSubmitting}
+            dir="ltr"
-                style={{
+          />
-                  height: 40,
-                  padding: "0 1.25rem",
-                  borderRadius: "var(--radius-md)",
-                  border: "1px solid var(--color-border)",
-                  background: "var(--color-surface)",
-                  fontSize: 13,
-                  fontWeight: 600,
-                  color: "var(--color-text-secondary)",
-                  cursor: isSubmitting ? "not-allowed" : "pointer",
-                  fontFamily: "var(--font-sans)",
-                }}
-              >
-                إلغاء
-              </button>
-              <button
-                type="submit"
-                disabled={isSubmitting}
-                style={{
-                  height: 40,
-                  padding: "0 1.5rem",
-                  borderRadius: "var(--radius-md)",
-                  border: "none",
-                  background: isSubmitting ? "var(--color-brand-400)" : "var(--color-brand-600)",
-                  fontSize: 13,
-                  fontWeight: 700,
-                  color: "#FFF",
-                  cursor: isSubmitting ? "not-allowed" : "pointer",
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 8,
-                  fontFamily: "var(--font-sans)",
-                }}
-              >
-                {isSubmitting && <Spinner size="sm" className="text-white" />}
-                {isSubmitting ? "جارٍ الحفظ…" : isNew ? "إضافة العنوان" : "حفظ التغييرات"}
-              </button>
         </div>
       </form>
-        </div>
+    </Modal>
-      </div>
-    </div>
   );
 }

src/Components/Client_Adress/archive/ArchivedClientAddressesDetailModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect } from "react";
+import { Button, Modal } from "../../UI";
 import type { ArchivedClientAddress } from "@/src/types/client_adresses";
 
 interface ArchivedClientAddressesDetailModalProps {
@@ -8,7 +8,7 @@ interface ArchivedClientAddressesDetailModalProps {
   onClose: () => void;
 }
 
-// ── small helper components ───────────────────────────────────────────────────
+// ── small helper components (no template exists for a plain label/value row) ──
 function DetailRow({ label, value }: { label: string; value?: string | null }) {
   if (!value) return null;
   return (
@@ -42,69 +42,23 @@ function SectionHeader({ title }: { title: string }) {
 
 // ── main component ────────────────────────────────────────────────────────────
 export function ArchivedClientAddressesDetailModal({ address, onClose }: ArchivedClientAddressesDetailModalProps) {
-  // close on Escape
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
-    window.addEventListener("keydown", handler);
-    return () => window.removeEventListener("keydown", handler);
-  }, [onClose]);
-
   const { details, contactPerson, location } = address;
 
   return (
-    <div
+    <Modal
-      role="dialog" aria-modal="true" aria-labelledby="archived-address-detail-title"
+      open
-      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
+      title={address.label}
-      style={{
+      subtitle="عنوان مؤرشف"
-        position: "fixed", inset: 0, zIndex: 80,
+      onClose={onClose}
-        background: "rgba(15,23,42,0.55)", backdropFilter: "blur(4px)",
+      zIndex={60}
-        display: "flex", alignItems: "center", justifyContent: "center", padding: "1rem",
+      size="md"
-      }}
+      footer={
+        <Button type="button" variant="secondary" onClick={onClose}>
+          إغلاق
+        </Button>
+      }
     >
-      <div
+      <div dir="rtl">
-        onClick={e => e.stopPropagation()}
-        style={{
-          width: "100%", maxWidth: 480,
-          background: "var(--color-surface)",
-          borderRadius: "var(--radius-2xl)",
-          border: "1px solid var(--color-border)",
-          boxShadow: "0 24px 64px rgba(0,0,0,.18)",
-          overflow: "hidden",
-          display: "flex", flexDirection: "column",
-        }}
-      >
-        {/* ── header ── */}
-        <div style={{
-          display: "flex", alignItems: "center", justifyContent: "space-between",
-          padding: "1.25rem 1.5rem",
-          borderBottom: "1px solid var(--color-border)",
-          background: "var(--color-surface-muted)",
-        }}>
-          <div>
-            <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#EA580C", fontWeight: 600, margin: 0 }}>
-              عنوان مؤرشف
-            </p>
-            <h2 id="archived-address-detail-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
-              {address.label}
-            </h2>
-          </div>
-          <button
-            type="button" onClick={onClose} aria-label="إغلاق"
-            style={{
-              width: 34, height: 34, borderRadius: "var(--radius-md)",
-              border: "1px solid var(--color-border)",
-              background: "var(--color-surface)",
-              cursor: "pointer", fontSize: 18,
-              color: "var(--color-text-muted)",
-              display: "flex", alignItems: "center", justifyContent: "center",
-            }}
-          >
-            ×
-          </button>
-        </div>
-
-        {/* ── body ── */}
-        <div style={{ padding: "1.5rem", overflowY: "auto", maxHeight: "70vh" }} dir="rtl">
         <DetailRow label="معرف العميل" value={address.clientId} />
         <DetailRow label="الفرع" value={address.branchName} />
 
@@ -143,30 +97,6 @@ export function ArchivedClientAddressesDetailModal({ address, onClose }: Archive
           <DetailRow label="تاريخ الحذف" value={new Date(address.deletedAt).toLocaleString("ar-SA")} />
         )}
       </div>
-
+    </Modal>
-        {/* ── footer ── */}
-        <div style={{
-          padding: "1rem 1.5rem",
-          borderTop: "1px solid var(--color-border)",
-          background: "var(--color-surface-muted)",
-          display: "flex", justifyContent: "flex-end",
-        }}>
-          <button
-            type="button" onClick={onClose}
-            style={{
-              height: 40, padding: "0 1.5rem",
-              borderRadius: "var(--radius-md)",
-              border: "1px solid var(--color-border)",
-              background: "var(--color-surface)",
-              fontSize: 13, fontWeight: 600,
-              color: "var(--color-text-secondary)",
-              cursor: "pointer", fontFamily: "var(--font-sans)",
-            }}
-          >
-            إغلاق
-          </button>
-        </div>
-      </div>
-    </div>
   );
 }

src/Components/Client_Adress/archive/ArchivedClientAddressesTable.tsx

@@ -1,39 +1,12 @@
 "use client";
 
-import { Spinner } from "../../UI";
+
+import { Badge, IconBtn, ReusableTable } from "../../UI";
+import type { TableColumn } from "@/src/types/models";
 import type { ArchivedClientAddress } from "@/src/types/client_adresses";
 
-// ── validation badge ─────────────────────────────────────────────────────────
-function ValidatedBadge({ validated }: { validated: boolean }) {
-  return (
-    <span style={{ display: "inline-flex", alignItems: "center", gap: 5, borderRadius: "var(--radius-full)", border: validated ? "1px solid #BBF7D0" : "1px solid var(--color-border)", background: validated ? "#DCFCE7" : "var(--color-surface-muted)", padding: "0.2rem 0.625rem", fontSize: 11, fontWeight: 600, color: validated ? "#166534" : "var(--color-text-muted)" }}>
-      <span style={{ width: 6, height: 6, borderRadius: "50%", background: validated ? "#16A34A" : "var(--color-text-hint)" }} />
-      {validated ? "موثّق" : "غير موثّق"}
-    </span>
-  );
-}
 
-// ── icon button ──────────────────────────────────────────────────────────────
+type Row = ArchivedClientAddress & { id: string };
-function IconBtn({ onClick, title, color, bg, borderColor, children }: { onClick: () => void; title: string; color: string; bg: string; borderColor: string; children: React.ReactNode }) {
-  return (
-    <button type="button" title={title} aria-label={title} onClick={e => { e.stopPropagation(); onClick(); }}
-      style={{ width: 32, height: 32, borderRadius: "var(--radius-md)", border: `1px solid ${borderColor}`, background: bg, color, cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center", transition: "opacity 150ms" }}>
-      {children}
-    </button>
-  );
-}
-
-// ── card / header styles ─────────────────────────────────────────────────────
-const cardStyle: React.CSSProperties = {
-  borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)",
-  background: "var(--color-surface)", overflow: "hidden", boxShadow: "var(--shadow-card)",
-};
-const thStyle: React.CSSProperties = {
-  padding: "0.75rem 1.5rem", fontSize: 11, fontWeight: 700,
-  textTransform: "uppercase", letterSpacing: "0.2em",
-  color: "var(--color-text-muted)", background: "var(--color-surface-muted)",
-  borderBottom: "1px solid var(--color-border)",
-};
 
 // ── Props ────────────────────────────────────────────────────────────────────
 interface ArchivedClientAddressesTableProps {
@@ -45,71 +18,87 @@ interface ArchivedClientAddressesTableProps {
 
 // ── main table — no pagination footer: the endpoint returns the full set ─────
 export function ArchivedClientAddressesTable({ addresses, loading, search, onView }: ArchivedClientAddressesTableProps) {
-  return (
+  const rows: Row[] = addresses.map((a) => ({ ...a, id: a._id }));
-    <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>
 
-      {/* loading state */}
+  const columns: TableColumn<Row>[] = [
-      {loading ? (
+    {
-        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, padding: "4rem 0", color: "var(--color-text-muted)" }}>
+      key: "type",
-          <Spinner size="sm" className="text-blue-600" />
+      header: "النوع",
-          <span style={{ fontSize: 13 }}>جارٍ التحميل…</span>
+      width: "1.5fr",
-        </div>
+      render: (a) => (
-      ) : addresses.length === 0 ? (
-        /* empty state */
-        <div style={{ textAlign: "center", padding: "4rem 1rem" }}>
-          <p style={{ fontSize: 13, color: "var(--color-text-muted)" }}>
-            {search ? `لا توجد نتائج لـ "${search}"` : "لا توجد عناوين في الأرشيف."}
-          </p>
-        </div>
-      ) : (
-        /* data rows */
-        <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
-          {addresses.map((a, i) => (
-            <li key={a._id} style={{
-              display: "grid", gridTemplateColumns: "1.5fr 2fr 1.2fr 1fr 1fr 100px",
-              alignItems: "center", gap: "0.5rem", padding: "0.875rem 1.5rem",
-              borderBottom: "1px solid var(--color-border)",
-              background: i % 2 !== 0 ? "var(--color-surface-muted)" : "transparent",
-              fontSize: 13,
-            }}>
         <div>
           <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>{a.label}</p>
           {a.branchName && (
             <p style={{ marginTop: 2, fontSize: 11, color: "var(--color-text-muted)" }}>{a.branchName}</p>
           )}
         </div>
+      ),
+    },
+    {
+      key: "address",
+      header: "العنوان",
+      width: "2fr",
+      render: (a) => (
         <span style={{ color: "var(--color-text-secondary)" }}>
           {a.details.street}، {a.details.city}
         </span>
+      ),
+    },
+    {
+      key: "contact",
+      header: "جهة الاتصال",
+      width: "1.2fr",
+      render: (a) => (
         <span style={{ fontSize: 12, color: "var(--color-text-secondary)" }}>
           {a.contactPerson?.name ?? "—"}
         </span>
-              <ValidatedBadge validated={!!a.isValidated} />
+      ),
-              <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
+    },
+    {
+      key: "status",
+      header: "الحالة",
+      width: "1fr",
+      render: (a) => (
+        <Badge
+          label={a.isValidated ? "موثّق" : "غير موثّق"}
+          color={a.isValidated ? "green" : "slate"}
+        />
+      ),
+    },
+    {
+      key: "createdAt",
+      header: "تاريخ الإنشاء",
+      width: "1fr",
+      render: (a) => (
+        <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
           {new Date(a.createdAt).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" })}
         </span>
-              <div style={{ display: "flex", justifyContent: "center", gap: 4 }}>
+      ),
-                {/* view only — matches archived users/clients: no delete/restore yet */}
+    },
-                <IconBtn title={`عرض ${a.label}`} color="#059669" bg="#ECFDF5" borderColor="#A7F3D0" onClick={() => onView(a)}>
+  ];
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+
-                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+  return (
-                    <circle cx="12" cy="12" r="3" />
+    <ReusableTable
-                  </svg>
+      columns={columns}
+      data={rows}
+      loading={loading}
+      search={search}
+      page={1}
+      pages={1}
+      onPageChange={() => {}}
+      actionsWidth="100px"
+      onRowClick={onView}
+      emptyDescription={search ? `لا توجد نتائج لـ "${search}"` : "لا توجد عناوين في الأرشيف."}
+      renderActions={(a) => (
+        // view only — matches archived users/clients: no delete/restore yet
+        <IconBtn
+          title={`عرض ${a.label}`}
+          color="#059669" bg="#ECFDF5" borderColor="#A7F3D0"
+          onClick={() => onView(a)}
+        >
+          <i className="ti ti-eye" style={{ fontSize: 14 }} aria-hidden="true" />
         </IconBtn>
-              </div>
-            </li>
-          ))}
-        </ul>
       )}
-    </div>
+    />
   );
 }

src/Components/Client_Adress/archive/ArchivedClientsAddressesModal.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Alert } from "../../UI";
+import { Alert, Input, Modal } from "../../UI";
 import { ArchivedClientAddressesTable } from "./ArchivedClientAddressesTable";
 import { ArchivedClientAddressesDetailModal } from "./ArchivedClientAddressesDetailModal";
 import { useArchivedClientAddresses } from "@/src/hooks/archive/useArchiveClientAdresses";
@@ -24,79 +24,30 @@ export function ArchivedClientsAddressesModal({ onClose, clientId }: ArchivedCli
   } = useArchivedClientAddresses(clientId);
 
   return (
-    <div
+    <Modal
-      role="dialog" aria-modal="true" aria-labelledby="archive-address-modal-title"
+      open
-      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
+      title={`العناوين المؤرشفة (${total})`}
-      style={{
+      subtitle="الأرشيف"
-        position: "fixed", inset: 0, zIndex: 70,
+      onClose={onClose}
-        background: "rgba(15,23,42,0.6)", backdropFilter: "blur(4px)",
+      size="lg"
-        display: "flex", alignItems: "flex-start", justifyContent: "center",
-        padding: "2rem 1rem", overflowY: "auto",
-      }}
     >
       {viewAddress && (
         <ArchivedClientAddressesDetailModal address={viewAddress} onClose={() => setViewAddress(null)} />
       )}
 
-      <div
+      <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
-        onClick={e => e.stopPropagation()}
-        style={{
-          width: "100%", maxWidth: 920,
-          background: "var(--color-surface-sunken)",
-          borderRadius: "var(--radius-xl)",
-          border: "1px solid var(--color-border)",
-          boxShadow: "0 24px 64px rgba(0,0,0,.2)",
-          overflow: "hidden",
-        }}
-      >
-        {/* header */}
-        <div dir="rtl" style={{
-          display: "flex", alignItems: "center", justifyContent: "space-between",
-          padding: "1.25rem 1.5rem",
-          borderBottom: "1px solid var(--color-border)",
-          background: "var(--color-surface)",
-        }}>
-          <div>
-            <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#EA580C", fontWeight: 600, margin: 0 }}>
-              الأرشيف
-            </p>
-            <h2 id="archive-address-modal-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
-              العناوين المؤرشفة
-              <span style={{ marginInlineStart: 8, fontSize: 13, fontWeight: 500, color: "var(--color-text-muted)" }}>
-                ({total})
-              </span>
-            </h2>
-          </div>
-          <button type="button" onClick={onClose} aria-label="إغلاق"
-            style={{ width: 34, height: 34, borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", cursor: "pointer", fontSize: 18, color: "var(--color-text-muted)", display: "flex", alignItems: "center", justifyContent: "center" }}>
-            ×
-          </button>
-        </div>
-
-        {/* body */}
-        <div style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
         {/* search — client-side only: this endpoint has no server-side search/pagination */}
-          <div dir="rtl" style={{ position: "relative", maxWidth: 320 }}>
+        <div style={{ maxWidth: 320 }}>
-            <svg style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", width: 16, height: 16, color: "var(--color-text-hint)", pointerEvents: "none" }}
+          <Input
-              fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+            label="بحث"
-              <circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" />
-            </svg>
-            <input
             type="text"
             placeholder="بحث بالنوع أو المدينة أو الفرع..."
             value={search}
             onChange={e => handleSearch(e.target.value)}
             dir="rtl"
-              style={{
+            icon={
-                width: "100%", height: 40,
+              <i className="ti ti-search" style={{ fontSize: 16 }} aria-hidden="true" />
-                paddingRight: 36, paddingLeft: 12,
+            }
-                borderRadius: "var(--radius-lg)",
-                border: "1px solid var(--color-border)",
-                background: "var(--color-surface)",
-                fontSize: 13, outline: "none",
-                fontFamily: "var(--font-sans)",
-                color: "var(--color-text-primary)",
-              }}
           />
         </div>
 
@@ -109,7 +60,6 @@ export function ArchivedClientsAddressesModal({ onClose, clientId }: ArchivedCli
           onView={setViewAddress}
         />
       </div>
-      </div>
+    </Modal>
-    </div>
   );
 }

src/Components/Dashboard/AlertsSection.tsx

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

src/Components/Dashboard/KpiSection.tsx

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

src/Components/Dashboard/QuickAccessFooter.tsx

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

src/Components/Dashboard/RecentActivityPanel.tsx

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

src/Components/Dashboard/TrendChartsPanel.tsx

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

src/Components/Dashboard/index.ts

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

src/Components/Driver/DriverDeleteModal.tsx

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

src/Components/Driver/DriverDetailPanel.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
-import { Spinner } from "../UI";
+import { Alert, Button, Spinner } from "../UI";
 import { driverService } from "@/src/services/driver.service";
 import { getStoredToken } from "@/src/lib/auth";
 import { DriverReportPanel } from "../Driver_Report/driverReport";
@@ -120,18 +120,7 @@ function PhotoCard({ url, label }: { url?: string | null; label: string }) {
             onError={() => setImgError(true)}
           />
         ) : (
-          <svg
+          <i className="ti ti-photo" style={{ fontSize: 28, color: "var(--color-text-hint)" }} aria-hidden="true" />
-            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>
         )}
       </div>
       {url && !imgError && (
@@ -306,18 +295,7 @@ export function DriverDetailPanel({
             </div>
           )}
 
-          {error && (
+          {error && <Alert type="error" message={error} />}
-            <div style={{
-              borderRadius: "var(--radius-md)",
-              background: "#FEF2F2",
-              border: "1px solid #FECACA",
-              padding: "0.75rem 1rem",
-              fontSize: 13,
-              color: "#DC2626",
-            }}>
-              ⚠ {error}
-            </div>
-          )}
 
           {driver && !loading && (
             <>
@@ -462,55 +440,18 @@ export function DriverDetailPanel({
               flexShrink: 0,
             }}
           >
-            <button
+            <Button type="button" variant="danger" onClick={() => onDelete(driver)}>
-              type="button"
-              onClick={() => onDelete(driver)}
-              style={{
-                height: 40, padding: "0 1rem",
-                borderRadius: "var(--radius-md)",
-                border: "1px solid #FECACA",
-                background: "#FEF2F2",
-                fontSize: 13, fontWeight: 700, color: "#DC2626",
-                cursor: "pointer", fontFamily: "var(--font-sans)",
-              }}
-            >
               حذف
-            </button>
+            </Button>
 
-            <button
+            <Button type="button" variant="secondary" onClick={() => onEdit(driver)}>
-              type="button"
+              <i className="ti ti-edit" style={{ fontSize: 14 }} aria-hidden="true" />
-              onClick={() => onEdit(driver)}
-              style={{
-                height: 40, padding: "0 1rem",
-                borderRadius: "var(--radius-md)",
-                border: "1px solid var(--color-brand-200)",
-                background: "var(--color-brand-50, #EFF6FF)",
-                fontSize: 13, fontWeight: 700, color: "var(--color-brand-600)",
-                cursor: "pointer", fontFamily: "var(--font-sans)",
-                display: "flex", alignItems: "center", gap: 6,
-              }}
-            >
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
-                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
-              </svg>
               تعديل
-            </button>
+            </Button>
 
-            <button
+            <Button type="button" variant="secondary" fullWidth onClick={onClose}>
-              type="button"
-              onClick={onClose}
-              style={{
-                flex: 1, height: 40,
-                borderRadius: "var(--radius-md)",
-                border: "1px solid var(--color-border)",
-                background: "var(--color-surface)",
-                fontSize: 13, fontWeight: 600, color: "var(--color-text-secondary)",
-                cursor: "pointer", fontFamily: "var(--font-sans)",
-              }}
-            >
               إغلاق
-            </button>
+            </Button>
           </div>
         )}
       </aside>

src/Components/Driver/DriverFormModal.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useForm, Controller } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { Alert, Spinner } from "../UI";
+import { Alert, Button, FileInput, Input, Modal, Select } from "../UI";
 import { get } from "@/src/services/api";
 import { getStoredToken } from "@/src/lib/auth";
 import { createDriverSchema, updateDriverSchema } from "@/src/validations/driver.validator";
@@ -16,37 +16,8 @@ import type {
   DriverStatus,
 } from "@/src/types/driver";
 import type { Branch } from "@/src/types/branch";
-import { FileInput } from "@/src/Components/Driver/DriverFormModalHelper";
 
-// ── Shared input style ───────────────────────────────────────────────────────
+// ── Shared bits ──────────────────────────────────────────────────────────────
-
-const inputBase: React.CSSProperties = {
-  width: "100%",
-  height: 40,
-  padding: "0 0.75rem",
-  borderRadius: "var(--radius-md)",
-  border: "1px solid var(--color-border)",
-  background: "var(--color-surface)",
-  fontSize: 13,
-  color: "var(--color-text-primary)",
-  outline: "none",
-  fontFamily: "var(--font-sans)",
-};
-
-const labelStyle: React.CSSProperties = {
-  display: "flex",
-  flexDirection: "column",
-  gap: 6,
-  fontSize: 12,
-  fontWeight: 600,
-  color: "var(--color-text-secondary)",
-};
-
-const errorTextStyle: React.CSSProperties = {
-  fontSize: 11,
-  color: "var(--color-danger)",
-  fontWeight: 500,
-};
 
 const sectionHeadingStyle: React.CSSProperties = {
   fontSize: 11,
@@ -57,12 +28,7 @@ const sectionHeadingStyle: React.CSSProperties = {
   margin: "0.5rem 0 0",
 };
 
-const optionalLabelStyle: React.CSSProperties = {
+const FORM_ID = "driver-form";
-  fontSize: 10,
-  fontWeight: 500,
-  color: "var(--color-text-hint)",
-  marginRight: 4,
-};
 
 // ── Date helper ──────────────────────────────────────────────────────────────
 
@@ -120,33 +86,26 @@ export function DriverFormModal({
 }: DriverFormModalProps) {
   const isNew = editDriver === null;
 
-  // ── Local branches (auto-fetched if prop is empty) ─────────────────────────
-  const [branches, setBranches] = useState<Branch[]>(branchesProp);
-  useEffect(() => {
-    if (branchesProp.length > 0) {
-      queueMicrotask(() => setBranches(branchesProp));
-      return;
-    }
-    const token = getStoredToken();
-    get<{ data: { data: Branch[] } }>("branches?limit=100", token)
-      .then((res) => {
-        const list = (res as unknown as { data: { data: Branch[] } }).data?.data ?? [];
-        setBranches(list);
-      })
-      .catch(() => {
-        /* silently ignore */
-      });
-  }, [branchesProp]);
-
   // ── react-hook-form ────────────────────────────────────────────────────────
+  // Moved above the branches-loading effect below: that effect calls
+  // setValue(), so useForm() (which defines it) must run first — otherwise
+  // setValue is referenced before its own initialization (TDZ ReferenceError),
+  // same issue already fixed in TripFormModal.
   const {
     register,
     handleSubmit,
     control,
     setError,
+    setFocus,
+    setValue,
     formState: { errors, isSubmitting },
   } = useForm<DriverFormValues>({
-    resolver: yupResolver(isNew ? createDriverSchema : updateDriverSchema) as never,
+    // Cast both the schema argument and the resolver's result — same fix
+    // already applied in TripFormModal: createDriverSchema/updateDriverSchema
+    // have structurally different required fields (union type yupResolver's
+    // single-schema signature won't accept), and yup's inferred type for
+    // .optional() fields is structurally incompatible with DriverFormValues.
+    resolver: yupResolver((isNew ? createDriverSchema : updateDriverSchema) as any) as any,
     defaultValues: {
       name: editDriver?.name ?? "",
       phone: editDriver?.phone ?? "",
@@ -173,24 +132,40 @@ export function DriverFormModal({
     },
   });
 
-  const [apiError, setApiError] = useState("");
+  // ── Local branches (auto-fetched if prop is empty) ─────────────────────────
-  const firstRef = useRef<HTMLInputElement>(null);
+  const [branches, setBranches] = useState<Branch[]>(branchesProp);
-
   useEffect(() => {
-    firstRef.current?.focus();
+    // defaultValues.branchId was applied before this list existed, so the
-  }, []);
+    // <select> had no matching <option> yet and silently fell back to "" —
-  useEffect(() => {
+    // reapply the saved id now that the option actually exists in the DOM.
-    const h = (e: KeyboardEvent) => {
+    const savedBranchId = (editDriver as Driver & { branchId?: string })?.branchId;
-      if (e.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", h);
-    return () => window.removeEventListener("keydown", h);
-  }, [onClose]);
 
-  const withError = (hasError: boolean): React.CSSProperties => ({
+    if (branchesProp.length > 0) {
-    ...inputBase,
+      queueMicrotask(() => {
-    ...(hasError ? { borderColor: "var(--color-danger)", background: "#FEF2F2" } : {}),
+        setBranches(branchesProp);
+        if (savedBranchId) setValue("branchId", savedBranchId);
       });
+      return;
+    }
+    const token = getStoredToken();
+    get<{ data: { data: Branch[] } }>("branches?limit=100", token)
+      .then((res) => {
+        const list = (res as unknown as { data: { data: Branch[] } }).data?.data ?? [];
+        setBranches(list);
+        if (savedBranchId) setValue("branchId", savedBranchId);
+      })
+      .catch(() => {
+        /* silently ignore */
+      });
+  }, [branchesProp, editDriver, setValue]);
+
+  const [apiError, setApiError] = useState("");
+
+  // register("name") already attaches its own ref — focusing via setFocus
+  // avoids the ref collision that a separate `ref={firstRef}` would cause.
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus]);
 
   // ── Submit ────────────────────────────────────────────────────────────────
 
@@ -240,67 +215,29 @@ export function DriverFormModal({
   // ── Render ────────────────────────────────────────────────────────────────
 
   return (
-    <div
+    <Modal
-      role="dialog"
+      open
-      aria-modal="true"
+      onClose={onClose}
-      aria-labelledby="driver-modal-title"
+      size="lg"
-      onClick={(e) => {
+      subtitle={isNew ? "إضافة سائق" : "تعديل سائق"}
-        if (e.target === e.currentTarget) onClose();
+      title={isNew ? "سائق جديد" : editDriver?.name ?? ""}
-      }}
+      footer={
-      style={{
+        <>
-        position: "fixed", inset: 0, zIndex: 50,
+          <Button variant="secondary" type="button" onClick={onClose} disabled={isSubmitting}>
-        background: "rgba(15,23,42,0.55)", backdropFilter: "blur(4px)",
+            إلغاء
-        display: "flex", alignItems: "center", justifyContent: "center",
+          </Button>
-        padding: "1rem", overflowY: "auto",
+          <Button type="submit" form={FORM_ID} loading={isSubmitting}>
-      }}
+            {isNew ? "إضافة السائق" : "حفظ التغييرات"}
+          </Button>
+        </>
+      }
     >
-      <div
-        onClick={(e) => e.stopPropagation()}
-        style={{
-          width: "100%", maxWidth: 640,
-          background: "var(--color-surface)",
-          borderRadius: "var(--radius-2xl)",
-          border: "1px solid var(--color-border)",
-          boxShadow: "0 24px 64px rgba(0,0,0,.18)",
-          overflow: "hidden", margin: "auto",
-        }}
-      >
-        {/* Header */}
-        <div style={{
-          display: "flex", alignItems: "center", justifyContent: "space-between",
-          padding: "1.25rem 1.5rem",
-          borderBottom: "1px solid var(--color-border)",
-          background: "var(--color-surface-muted)",
-        }}>
-          <div>
-            <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600, margin: 0 }}>
-              {isNew ? "إضافة سائق" : "تعديل سائق"}
-            </p>
-            <h2 id="driver-modal-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
-              {isNew ? "سائق جديد" : editDriver?.name}
-            </h2>
-          </div>
-          <button type="button" onClick={onClose} aria-label="إغلاق"
-            style={{
-              width: 34, height: 34, borderRadius: "var(--radius-md)",
-              border: "1px solid var(--color-border)", background: "var(--color-surface)",
-              cursor: "pointer", fontSize: 18, color: "var(--color-text-muted)",
-              display: "flex", alignItems: "center", justifyContent: "center",
-            }}>
-            ×
-          </button>
-        </div>
-
-        {/* Form */}
       <form
+        id={FORM_ID}
         onSubmit={handleSubmit(submitHandler)}
         noValidate
-          style={{
-            padding: "1.5rem",
-            display: "flex", flexDirection: "column", gap: "1rem",
-            maxHeight: "75vh", overflowY: "auto",
-          }}
         dir="rtl"
+        className="flex flex-col gap-4"
       >
         {errors.name?.type === "manual" && (
           <Alert type="error" message={errors.name.message ?? ""} onClose={() => setApiError("")} />
@@ -309,235 +246,184 @@ export function DriverFormModal({
         {/* ── Section: Personal Info ── */}
         <p style={sectionHeadingStyle}>البيانات الشخصية</p>
 
-          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-            {/* Name — required */}
+          <Input
-            <label style={labelStyle}>
+            label="الاسم الكامل *"
-              الاسم الكامل *
-              <input
-                ref={firstRef}
-                style={withError(!!errors.name && errors.name.type !== "manual")}
-                {...register("name")}
             placeholder="محمد عبدالله"
             dir="rtl"
             autoComplete="off"
+            error={errors.name?.type !== "manual" ? errors.name?.message : undefined}
+            {...register("name")}
           />
-              {errors.name && errors.name.type !== "manual" && (
-                <span style={errorTextStyle}>{errors.name.message}</span>
-              )}
-            </label>
 
-            {/* Phone — required */}
+          <Input
-            <label style={labelStyle}>
+            label="رقم الجوال *"
-              رقم الجوال *
-              <input
-                style={withError(!!errors.phone)}
-                {...register("phone")}
             placeholder="05XXXXXXXX"
             dir="ltr"
+            error={errors.phone?.message}
+            {...register("phone")}
           />
-              {errors.phone && <span style={errorTextStyle}>{errors.phone.message}</span>}
-            </label>
 
-            {/* Email — optional */}
+          <Input
-            <label style={labelStyle}>
+            label="البريد الإلكتروني (اختياري)"
-              البريد الإلكتروني
-              <span style={optionalLabelStyle}>(اختياري)</span>
-              <input
-                style={withError(!!errors.email)}
             type="email"
-                {...register("email")}
             placeholder="example@mail.com"
             dir="ltr"
+            error={errors.email?.message}
+            {...register("email")}
           />
-              {errors.email && <span style={errorTextStyle}>{errors.email.message}</span>}
-            </label>
 
-            {/* Nationality — optional */}
+          <Input
-            <label style={labelStyle}>
+            label="الجنسية (اختياري)"
-              الجنسية
-              <span style={optionalLabelStyle}>(اختياري)</span>
-              <input
-                style={withError(!!errors.nationality)}
-                {...register("nationality")}
             placeholder="سعودي"
             dir="rtl"
+            error={errors.nationality?.message}
+            {...register("nationality")}
           />
-              {errors.nationality && <span style={errorTextStyle}>{errors.nationality.message}</span>}
-            </label>
 
-            {/* Address — optional, full width */}
+          <Input
-            <label style={{ ...labelStyle, gridColumn: "1 / -1" }}>
+            className="sm:col-span-2"
-              العنوان
+            label="العنوان (اختياري)"
-              <span style={optionalLabelStyle}>(اختياري)</span>
-              <input
-                style={withError(!!errors.address)}
-                {...register("address")}
             placeholder="الرياض، حي..."
             dir="rtl"
+            error={errors.address?.message}
+            {...register("address")}
           />
-              {errors.address && <span style={errorTextStyle}>{errors.address.message}</span>}
-            </label>
         </div>
 
         {/* ── Section: ID & GOSI ── */}
         <p style={sectionHeadingStyle}>الهوية والتأمينات</p>
 
-          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
-            {/* National ID Type — optional */}
+          <Select
-            <label style={labelStyle}>
+            label="نوع الهوية (اختياري)"
-              نوع الهوية
-              <span style={optionalLabelStyle}>(اختياري)</span>
-              <select
-                style={{ ...withError(!!errors.nationalIdType), cursor: "pointer" }}
-                {...register("nationalIdType")}
             dir="rtl"
+            error={errors.nationalIdType?.message}
+            {...register("nationalIdType")}
           >
             <option value="">اختر النوع</option>
             <option value="NationalID">هوية وطنية</option>
             <option value="Iqama">إقامة</option>
             <option value="Passport">جواز سفر</option>
-              </select>
+          </Select>
-              {errors.nationalIdType && <span style={errorTextStyle}>{errors.nationalIdType.message}</span>}
-            </label>
 
-            {/* National ID number */}
+          <Input
-            <label style={labelStyle}>
+            label="رقم الهوية (اختياري)"
-              رقم الهوية
+            placeholder="1XXXXXXXXX"
-              <span style={optionalLabelStyle}>(اختياري)</span>
+            dir="ltr"
-              <input style={inputBase} {...register("nationalId")} placeholder="1XXXXXXXXX" dir="ltr" />
+            error={errors.nationalId?.message}
-            </label>
+            {...register("nationalId")}
+          />
 
-            {/* National ID expiry */}
+          <Input
-            <label style={labelStyle}>
+            label="انتهاء الهوية (اختياري)"
-              انتهاء الهوية
+            type="date"
-              <span style={optionalLabelStyle}>(اختياري)</span>
+            error={errors.nationalIdExpiry?.message}
-              <input style={inputBase} type="date" {...register("nationalIdExpiry")} />
+            {...register("nationalIdExpiry")}
-            </label>
+          />
 
-            {/* GOSI — optional */}
+          <Input
-            <label style={labelStyle}>
+            label="رقم GOSI (اختياري)"
-              رقم GOSI
+            placeholder="GOSI-XXXX"
-              <span style={optionalLabelStyle}>(اختياري)</span>
+            dir="ltr"
-              <input style={inputBase} {...register("gosiNumber")} placeholder="GOSI-XXXX" dir="ltr" />
+            error={errors.gosiNumber?.message}
-            </label>
+            {...register("gosiNumber")}
+          />
         </div>
 
         {/* ── Section: License ── */}
         <p style={sectionHeadingStyle}>رخصة القيادة</p>
 
-          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
-            {/* License number — optional */}
+          <Input
-            <label style={labelStyle}>
+            label="رقم الرخصة (اختياري)"
-              رقم الرخصة
-              <span style={optionalLabelStyle}>(اختياري)</span>
-              <input
-                style={withError(!!errors.licenseNumber)}
-                {...register("licenseNumber")}
             placeholder="LIC-XXXX"
             dir="ltr"
+            error={errors.licenseNumber?.message}
+            {...register("licenseNumber")}
           />
-              {errors.licenseNumber && <span style={errorTextStyle}>{errors.licenseNumber.message}</span>}
-            </label>
 
-            {/* License type — optional */}
+          <Input
-            <label style={labelStyle}>
+            label="نوع الرخصة (اختياري)"
-              نوع الرخصة
+            placeholder="خاص / عام"
-              <span style={optionalLabelStyle}>(اختياري)</span>
+            dir="rtl"
-              <input style={inputBase} {...register("licenseType")} placeholder="خاص / عام" dir="rtl" />
+            error={errors.licenseType?.message}
-            </label>
+            {...register("licenseType")}
+          />
 
-            {/* License expiry — optional, validated if provided */}
+          <Input
-            <label style={labelStyle}>
+            label="انتهاء الرخصة (اختياري)"
-              انتهاء الرخصة
+            type="date"
-              <span style={optionalLabelStyle}>(اختياري)</span>
+            error={errors.licenseExpiry?.message}
-              <input style={withError(!!errors.licenseExpiry)} type="date" {...register("licenseExpiry")} />
+            {...register("licenseExpiry")}
-              {errors.licenseExpiry && <span style={errorTextStyle}>{errors.licenseExpiry.message}</span>}
+          />
-            </label>
         </div>
 
         {/* ── Section: Driver Card ── */}
         <p style={sectionHeadingStyle}>بطاقة السائق</p>
 
-          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
-            {/* Card number — optional */}
+          <Input
-            <label style={labelStyle}>
+            label="رقم البطاقة (اختياري)"
-              رقم البطاقة
+            placeholder="CARD-XXXX"
-              <span style={optionalLabelStyle}>(اختياري)</span>
+            dir="ltr"
-              <input style={inputBase} {...register("driverCardNumber")} placeholder="CARD-XXXX" dir="ltr" />
+            error={errors.driverCardNumber?.message}
-            </label>
+            {...register("driverCardNumber")}
+          />
 
-            {/* Card type — optional */}
+          <Select
-            <label style={labelStyle}>
+            label="نوع البطاقة (اختياري)"
-              نوع البطاقة
-              <span style={optionalLabelStyle}>(اختياري)</span>
-              <select
-                style={{ ...withError(!!errors.driverCardType), cursor: "pointer" }}
-                {...register("driverCardType")}
             dir="rtl"
+            error={errors.driverCardType?.message}
+            {...register("driverCardType")}
           >
             <option value="">اختر النوع</option>
             <option value="Temporary">مؤقتة</option>
             <option value="Seasonal">موسمية</option>
             <option value="Annual">سنوية</option>
             <option value="Restricted">مقيدة</option>
-              </select>
+          </Select>
-              {errors.driverCardType && <span style={errorTextStyle}>{errors.driverCardType.message}</span>}
-            </label>
 
-            {/* Card expiry — optional, validated if provided */}
+          <Input
-            <label style={labelStyle}>
+            label="انتهاء البطاقة (اختياري)"
-              انتهاء البطاقة
-              <span style={optionalLabelStyle}>(اختياري)</span>
-              <input
-                style={withError(!!errors.driverCardExpiry)}
             type="date"
+            error={errors.driverCardExpiry?.message}
             {...register("driverCardExpiry")}
           />
-              {errors.driverCardExpiry && (
-                <span style={errorTextStyle}>{errors.driverCardExpiry.message}</span>
-              )}
-            </label>
         </div>
 
         {/* ── Section: Operational ── */}
         <p style={sectionHeadingStyle}>بيانات تشغيلية</p>
 
-          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
-            {/* Branch — optional */}
+          <Select
-            <label style={labelStyle}>
+            label="الفرع (اختياري)"
-              الفرع
-              <span style={optionalLabelStyle}>(اختياري)</span>
-              <select
-                style={{ ...withError(!!errors.branchId), cursor: "pointer" }}
-                {...register("branchId")}
             dir="rtl"
+            error={errors.branchId?.message}
+            {...register("branchId")}
           >
             <option value="">اختر الفرع</option>
             {branches.map((b) => (
               <option key={b.id} value={b.id}>{b.name}</option>
             ))}
-              </select>
+          </Select>
-              {errors.branchId && <span style={errorTextStyle}>{errors.branchId.message}</span>}
-            </label>
 
-            {/* Driver type — optional */}
+          <Input
-            <label style={labelStyle}>
+            label="نوع السائق (اختياري)"
-              نوع السائق
+            placeholder="رئيسي / احتياطي"
-              <span style={optionalLabelStyle}>(اختياري)</span>
+            dir="rtl"
-              <input style={inputBase} {...register("driverType")} placeholder="رئيسي / احتياطي" dir="rtl" />
+            error={errors.driverType?.message}
-            </label>
+            {...register("driverType")}
+          />
 
           {/* Status — edit only */}
           {!isNew && (
-              <label style={labelStyle}>
+            <Select label="الحالة" dir="rtl" {...register("status")}>
-                الحالة
-                <select style={{ ...inputBase, cursor: "pointer" }} {...register("status")} dir="rtl">
               <option value="Active">نشط</option>
               <option value="InTrip">في رحلة</option>
               <option value="Inactive">غير نشط</option>
               <option value="Suspended">موقوف</option>
-                </select>
+            </Select>
-              </label>
           )}
         </div>
 
@@ -547,7 +433,7 @@ export function DriverFormModal({
           جميع حقول الصور اختيارية
         </p>
 
-          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
           {/* File inputs cannot use register() directly — bind via Controller
               to the existing FileInput component's current/onChange props. */}
           <Controller
@@ -572,45 +458,7 @@ export function DriverFormModal({
             )}
           />
         </div>
-
-          {/* ── Actions ── */}
-          <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end", paddingTop: "0.5rem" }}>
-            <button
-              type="button"
-              onClick={onClose}
-              disabled={isSubmitting}
-              style={{
-                height: 40, padding: "0 1.25rem",
-                borderRadius: "var(--radius-md)",
-                border: "1px solid var(--color-border)",
-                background: "var(--color-surface)",
-                fontSize: 13, fontWeight: 600, color: "var(--color-text-secondary)",
-                cursor: isSubmitting ? "not-allowed" : "pointer",
-                fontFamily: "var(--font-sans)",
-              }}
-            >
-              إلغاء
-            </button>
-            <button
-              type="submit"
-              disabled={isSubmitting}
-              style={{
-                height: 40, padding: "0 1.5rem",
-                borderRadius: "var(--radius-md)",
-                border: "none",
-                background: isSubmitting ? "var(--color-brand-400)" : "var(--color-brand-600)",
-                fontSize: 13, fontWeight: 700, color: "#FFF",
-                cursor: isSubmitting ? "not-allowed" : "pointer",
-                display: "flex", alignItems: "center", gap: 8,
-                fontFamily: "var(--font-sans)",
-              }}
-            >
-              {isSubmitting && <Spinner size="sm" className="text-white" />}
-              {isSubmitting ? "جارٍ الحفظ…" : isNew ? "إضافة السائق" : "حفظ التغييرات"}
-            </button>
-          </div>
       </form>
-      </div>
+    </Modal>
-    </div>
   );
 }

src/Components/Driver/DriverPhotos.tsx

@@ -79,18 +79,7 @@ export function PhotoCard({
             />
           </>
         ) : (
-          <svg
+          <i className="ti ti-photo" style={{ fontSize: 32, color: "var(--color-text-hint)" }} aria-hidden="true" />
-            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>
         )}
       </div>
       {url && !imgError && (

src/Components/Driver/DriverTable.tsx

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

src/Components/Driver/archive/ArchivedDriverDetailModal.tsx

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

src/Components/Driver/archive/ArchivedDriverTable.tsx

@@ -1,45 +1,12 @@
 "use client";
 
-import { Spinner } from "../../UI";
+
+
+import { ReusableTable, ActionButtons } from "../../UI";
 import { DRIVER_STATUS_MAP } from "@/src/types/driver";
+import type { TableColumn } from "@/src/types/models";
 import type { ArchivedDriver } from "@/src/types/driver";
 
-// ── status badge ─────────────────────────────────────────────────────────────
-function StatusBadge({ status }: { status: ArchivedDriver["status"] }) {
-  const cfg = DRIVER_STATUS_MAP[status] ?? DRIVER_STATUS_MAP.Inactive;
-  return (
-    <span style={{ display: "inline-flex", alignItems: "center", gap: 5, borderRadius: "var(--radius-full)", border: `1px solid ${cfg.border}`, background: cfg.bg, padding: "0.2rem 0.625rem", fontSize: 11, fontWeight: 600, color: cfg.color }}>
-      <span style={{ width: 6, height: 6, borderRadius: "50%", background: cfg.dot }} />
-      {cfg.label}
-    </span>
-  );
-}
-
-// ── icon button ──────────────────────────────────────────────────────────────
-function IconBtn({ onClick, title, color, bg, borderColor, children }: { onClick: () => void; title: string; color: string; bg: string; borderColor: string; children: React.ReactNode }) {
-  return (
-    <button type="button" title={title} aria-label={title} onClick={e => { e.stopPropagation(); onClick(); }}
-      style={{ width: 32, height: 32, borderRadius: "var(--radius-md)", border: `1px solid ${borderColor}`, background: bg, color, cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center", transition: "opacity 150ms" }}>
-      {children}
-    </button>
-  );
-}
-
-// ── card / header styles ─────────────────────────────────────────────────────
-const cardStyle: React.CSSProperties = {
-  borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)",
-  background: "var(--color-surface)", overflow: "hidden", boxShadow: "var(--shadow-card)",
-};
-const thStyle: React.CSSProperties = {
-  padding: "0.75rem 1.5rem", fontSize: 11, fontWeight: 700,
-  textTransform: "uppercase", letterSpacing: "0.2em",
-  color: "var(--color-text-muted)", background: "var(--color-surface-muted)",
-  borderBottom: "1px solid var(--color-border)",
-};
-
-const ROW_GRID_COLUMNS = "2fr 1.5fr 1fr 1fr 1fr 100px";
-
-// ── Props ────────────────────────────────────────────────────────────────────
 interface ArchivedDriverTableProps {
   drivers: ArchivedDriver[];
   loading: boolean;
@@ -50,92 +17,70 @@ interface ArchivedDriverTableProps {
   onPageChange: (p: number) => void;
 }
 
-/**
- * Renders the paginated table of archived drivers, including loading,
- * empty, and error-free states. Mirrors ArchivedUserTable for consistency.
- */
 export function ArchivedDriverTable({ drivers, loading, search, page, pages, onView, onPageChange }: ArchivedDriverTableProps) {
-  return (
+  const columns: TableColumn<ArchivedDriver>[] = [
-    <div style={cardStyle}>
+    {
-      {/* column headers */}
+      key: "name",
-      <div dir="rtl" style={{ display: "grid", gridTemplateColumns: ROW_GRID_COLUMNS, ...thStyle }}>
+      header: "الاسم",
-        <span>الاسم</span>
+      width: "2fr",
-        <span>اسم المستخدم</span>
+      render: (d) => (
-        <span>الحالة</span>
-        <span style={{ textAlign: "center" }}>تاريخ الإنشاء</span>
-        <span style={{ textAlign: "center" }}>آخر تحديث</span>
-        <span style={{ textAlign: "center" }}>إجراءات</span>
-      </div>
-
-      {/* loading state */}
-      {loading ? (
-        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, padding: "4rem 0", color: "var(--color-text-muted)" }}>
-          <Spinner size="sm" className="text-blue-600" />
-          <span style={{ fontSize: 13 }}>جارٍ التحميل…</span>
-        </div>
-      ) : drivers.length === 0 ? (
-        /* empty state */
-        <div style={{ textAlign: "center", padding: "4rem 1rem" }}>
-          <p style={{ fontSize: 13, color: "var(--color-text-muted)" }}>
-            {search ? `لا توجد نتائج لـ "${search}"` : "لا يوجد سائقون في الأرشيف."}
-          </p>
-        </div>
-      ) : (
-        /* data rows */
-        <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
-          {drivers.map((d, i) => (
-            <li key={d.id} onClick={() => onView(d)} style={{
-              display: "grid", gridTemplateColumns: ROW_GRID_COLUMNS,
-              alignItems: "center", gap: "0.5rem", padding: "0.875rem 1.5rem",
-              borderBottom: "1px solid var(--color-border)",
-              background: i % 2 !== 0 ? "var(--color-surface-muted)" : "transparent",
-              fontSize: 13, cursor: "pointer",
-            }}>
         <div>
           <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>{d.name}</p>
           <p style={{ marginTop: 2, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--color-text-muted)" }}>{d.phone}</p>
         </div>
+      ),
+    },
+    {
+      key: "userName",
+      header: "اسم السائق",
+      width: "1.5fr",
+      render: (d) => (
         <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "#2563EB", fontWeight: 600 }}>{d.userName ?? "—"}</span>
-              <StatusBadge status={d.status} />
+      ),
-              <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
+    },
-                {new Date(d.createdAt).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" })}
+    {
+      key: "status",
+      header: "الحالة",
+      width: "1fr",
+      render: (d) => {
+        const s = DRIVER_STATUS_MAP[d.status] ?? DRIVER_STATUS_MAP.Inactive;
+        return (
+          <span style={{ display: "inline-flex", alignItems: "center", gap: 5, borderRadius: "var(--radius-full)", border: `1px solid ${s.border}`, background: s.bg, padding: "0.2rem 0.625rem", fontSize: 11, fontWeight: 600, color: s.color }}>
+            <span style={{ width: 6, height: 6, borderRadius: "50%", background: s.dot }} />
+            {s.label}
           </span>
-              <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
+        );
-                {new Date(d.updatedAt).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" })}
+      },
-              </span>
+    },
-              <div style={{ display: "flex", justifyContent: "center", gap: 4 }}>
+    {
-                {/* view only — delete/restore not implemented yet, same as users */}
+      key: "createdAt",
-                <IconBtn title={`عرض ${d.name}`} color="#059669" bg="#ECFDF5" borderColor="#A7F3D0" onClick={() => onView(d)}>
+      header: "تاريخ الانشاء",
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      width: "1fr",
-                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+      align: "center",
-                    <circle cx="12" cy="12" r="3" />
+      render: (d) => new Date(d.createdAt).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" }),
-                  </svg>
+    },
-                </IconBtn>
+    {
-              </div>
+      key: "updatedAt",
-            </li>
+      header: "تاريخ التعديل",
-          ))}
+      width: "1fr",
-        </ul>
+      align: "center",
-      )}
+      render: (d) => new Date(d.updatedAt).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" }),
+    },
+  ];
 
-      {/* pagination */}
+  return (
-      {pages > 1 && (
+    <ReusableTable
-        <div dir="rtl" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", borderTop: "1px solid var(--color-border)", padding: "0.875rem 1.5rem" }}>
+      columns={columns}
-          <span style={{ fontSize: 12, color: "var(--color-text-muted)" }}>
+      data={drivers}
-            صفحة <strong style={{ color: "var(--color-text-primary)" }}>{page}</strong> من <strong style={{ color: "var(--color-text-primary)" }}>{pages}</strong>
+      loading={loading}
-          </span>
+      search={search}
-          <div style={{ display: "flex", gap: "0.5rem" }}>
+      page={page}
-            {[
+      pages={pages}
-              { label: "السابق", action: () => onPageChange(Math.max(1, page - 1)),     disabled: page === 1     },
+      onPageChange={onPageChange}
-              { label: "التالي", action: () => onPageChange(Math.min(pages, page + 1)), disabled: page === pages },
+      onRowClick={onView}
-            ].map(btn => (
+      emptyIcon="🗄️"
-              <button key={btn.label} type="button" onClick={btn.action} disabled={btn.disabled}
+      emptyDescription={search ? `No results for "${search}"` : "No archived drivers."}
-                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)" }}>
+      renderActions={(d) => <ActionButtons itemLabel={d.name} onView={() => onView(d)} />}
-                {btn.label}
+    />
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
   );
 }

src/Components/Driver/archive/ArchivedDrivers.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Alert } from "../../UI";
+import { Input, Modal, Toast } from "../../UI";
 import { ArchivedDriverTable } from "./ArchivedDriverTable";
 import { ArchivedDriverDetailModal } from "./ArchivedDriverDetailModal";
 import { useArchivedDrivers } from "@/src/hooks/archive/useArchivedDrivers";
@@ -10,6 +10,10 @@ interface ArchivedDriversProps {
   onClose: () => void;
 }
 
+const searchIcon = (
+  <i className="ti ti-search" style={{ fontSize: 16 }} aria-hidden="true" />
+);
+
 /**
  * Top-level modal for browsing archived drivers. Wires the
  * useArchivedDrivers hook to the table and detail modal, mirroring
@@ -19,89 +23,38 @@ export function ArchivedDrivers({ onClose }: ArchivedDriversProps) {
   const [viewDriverId, setViewDriverId] = useState<string | null>(null);
 
   const {
-    drivers, loading, total, pages, error,
+    drivers, loading, total, pages, notification,
     page, search,
-    setPage, handleSearch, clearError,
+    setPage, handleSearch, clearNotification,
   } = useArchivedDrivers();
 
   return (
-    <div
+    <>
-      role="dialog" aria-modal="true" aria-labelledby="archive-driver-modal-title"
-      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
-      style={{
-        position: "fixed", inset: 0, zIndex: 70,
-        background: "rgba(15,23,42,0.6)", backdropFilter: "blur(4px)",
-        display: "flex", alignItems: "flex-start", justifyContent: "center",
-        padding: "2rem 1rem", overflowY: "auto",
-      }}
-    >
       {viewDriverId && (
         <ArchivedDriverDetailModal driverId={viewDriverId} onClose={() => setViewDriverId(null)} />
       )}
 
-      <div
+      <Modal
-        onClick={e => e.stopPropagation()}
+        open
-        style={{
+        onClose={onClose}
-          width: "100%", maxWidth: 920,
+        size="lg"
-          background: "var(--color-surface-sunken)",
+        subtitle="الأرشيف"
-          borderRadius: "var(--radius-xl)",
+        title={`السائقون المؤرشفون (${total})`}
-          border: "1px solid var(--color-border)",
-          boxShadow: "0 24px 64px rgba(0,0,0,.2)",
-          overflow: "hidden",
-        }}
       >
-        {/* header */}
+        <div dir="rtl" style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
-        <div dir="rtl" style={{
-          display: "flex", alignItems: "center", justifyContent: "space-between",
-          padding: "1.25rem 1.5rem",
-          borderBottom: "1px solid var(--color-border)",
-          background: "var(--color-surface)",
-        }}>
-          <div>
-            <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#EA580C", fontWeight: 600, margin: 0 }}>
-              الأرشيف
-            </p>
-            <h2 id="archive-driver-modal-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
-              السائقون المؤرشفون
-              <span style={{ marginInlineStart: 8, fontSize: 13, fontWeight: 500, color: "var(--color-text-muted)" }}>
-                ({total})
-              </span>
-            </h2>
-          </div>
-          <button type="button" onClick={onClose} aria-label="إغلاق"
-            style={{ width: 34, height: 34, borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", cursor: "pointer", fontSize: 18, color: "var(--color-text-muted)", display: "flex", alignItems: "center", justifyContent: "center" }}>
-            ×
-          </button>
-        </div>
-
-        {/* body */}
-        <div style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
           {/* search */}
-          <div dir="rtl" style={{ position: "relative", maxWidth: 320 }}>
+          <div style={{ maxWidth: 320 }}>
-            <svg style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", width: 16, height: 16, color: "var(--color-text-hint)", pointerEvents: "none" }}
+            <Input
-              fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+              label="بحث"
-              <circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" />
-            </svg>
-            <input
-              type="text"
               placeholder="بحث بالاسم أو الهاتف..."
               value={search}
               onChange={e => handleSearch(e.target.value)}
+              icon={searchIcon}
               dir="rtl"
-              style={{
-                width: "100%", height: 40,
-                paddingRight: 36, paddingLeft: 12,
-                borderRadius: "var(--radius-lg)",
-                border: "1px solid var(--color-border)",
-                background: "var(--color-surface)",
-                fontSize: 13, outline: "none",
-                fontFamily: "var(--font-sans)",
-                color: "var(--color-text-primary)",
-              }}
             />
           </div>
 
-          {error && <Alert type="error" message={error} onClose={clearError} />}
+          <Toast notification={notification} onDismiss={clearNotification} />
 
           <ArchivedDriverTable
             drivers={drivers}
@@ -113,7 +66,7 @@ export function ArchivedDrivers({ onClose }: ArchivedDriversProps) {
             onPageChange={setPage}
           />
         </div>
-      </div>
+      </Modal>
-    </div>
+    </>
   );
 }

src/Components/Driver_Report/driverReport.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Spinner } from "../UI";
+import { Alert, Button, Input } from "../UI";
 import { driverService } from "@/src/services/driver.service";
 import { getStoredToken } from "@/src/lib/auth";
 
@@ -65,20 +65,8 @@ export function DriverReportPanel({ driverId }: DriverReportPanelProps) {
         }}
       >
         <div style={{ flex: 1, minWidth: 140 }}>
-          <label
+          <Input
-            htmlFor="report-date"
+            label="تاريخ التقرير"
-            style={{
-              display: "block",
-              fontSize: 11,
-              fontWeight: 600,
-              color: "var(--color-text-muted)",
-              marginBottom: 4,
-            }}
-          >
-            تاريخ التقرير
-          </label>
-          <input
-            id="report-date"
             type="date"
             value={date}
             max={today}
@@ -86,64 +74,21 @@ export function DriverReportPanel({ driverId }: DriverReportPanelProps) {
               setDate(e.target.value);
               setError(null);
             }}
-            style={{
-              width: "100%",
-              height: 38,
-              padding: "0 0.625rem",
-              borderRadius: "var(--radius-md)",
-              border: "1px solid var(--color-border)",
-              background: "var(--color-surface)",
-              fontSize: 13,
-              color: "var(--color-text-primary)",
-              outline: "none",
-              fontFamily: "var(--font-sans)",
-            }}
           />
         </div>
 
-        <button
+        <Button onClick={handleGenerate} disabled={!date} loading={loading}>
-          type="button"
-          onClick={handleGenerate}
-          disabled={loading || !date}
-          style={{
-            height: 38,
-            padding: "0 1rem",
-            borderRadius: "var(--radius-md)",
-            border: "none",
-            fontSize: 13,
-            fontWeight: 700,
-            color: "#FFF",
-            background: !date || loading
-              ? "var(--color-brand-400)"
-              : "var(--color-brand-600)",
-            cursor: !date || loading ? "not-allowed" : "pointer",
-            display: "flex",
-            alignItems: "center",
-            gap: 8,
-            fontFamily: "var(--font-sans)",
-            whiteSpace: "nowrap",
-          }}
-        >
-          {loading && <Spinner size="sm" className="text-white" />}
           {loading ? "جارٍ الإنشاء…" : "إنشاء التقرير"}
-        </button>
+        </Button>
       </div>
 
       {error && (
-        <div
+        <Alert
-          style={{
+          type="error"
-            marginTop: "0.75rem",
+          message={error}
-            borderRadius: "var(--radius-md)",
+          onClose={() => setError(null)}
-            background: "#FEF2F2",
+          className="mt-3"
-            border: "1px solid #FECACA",
+        />
-            padding: "0.625rem 0.875rem",
-            fontSize: 12,
-            color: "#DC2626",
-            fontWeight: 500,
-          }}
-        >
-          ⚠ {error}
-        </div>
       )}
     </div>
   );

src/Components/Order/OrderDeleteModal.tsx

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

src/Components/Order/OrderDetailModel.tsx

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

src/Components/Order/OrderFormModal.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import Link from "next/link";
-import { useForm } from "react-hook-form";
+import { useForm, type Resolver } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { Alert, Spinner } from "../UI";
+import { Alert, Button, Input, Modal, Select } from "../UI";
 import { getStoredToken } from "@/src/lib/auth";
 import { clientService } from "@/src/services/client.service";
 import { tripService } from "@/src/services/trip.service";
@@ -22,34 +22,6 @@ import type {
 import type { Client } from "@/src/types/client";
 import type { Trip } from "@/src/types/trip";
 
-const inputBase: React.CSSProperties = {
-  width: "100%",
-  height: 40,
-  padding: "0 0.75rem",
-  borderRadius: "var(--radius-md)",
-  border: "1px solid var(--color-border)",
-  background: "var(--color-surface)",
-  fontSize: 13,
-  color: "var(--color-text-primary)",
-  outline: "none",
-  fontFamily: "var(--font-sans)",
-};
-
-const labelStyle: React.CSSProperties = {
-  display: "flex",
-  flexDirection: "column",
-  gap: 6,
-  fontSize: 12,
-  fontWeight: 600,
-  color: "var(--color-text-secondary)",
-};
-
-const errorTextStyle: React.CSSProperties = {
-  fontSize: 11,
-  color: "var(--color-danger)",
-  fontWeight: 500,
-};
-
 const sectionHeadingStyle: React.CSSProperties = {
   fontSize: 11,
   letterSpacing: "0.25em",
@@ -59,19 +31,12 @@ const sectionHeadingStyle: React.CSSProperties = {
   margin: "0.5rem 0 0",
 };
 
-const optionalLabelStyle: React.CSSProperties = {
-  fontSize: 10,
-  fontWeight: 500,
-  color: "var(--color-text-hint)",
-  marginRight: 4,
-};
-
 const createLinkStyle: React.CSSProperties = {
   fontSize: 11,
   color: "var(--color-brand-600)",
   textDecoration: "none",
   fontWeight: 500,
-  marginTop: 2,
+  marginTop: 6,
   display: "inline-flex",
   alignItems: "center",
   gap: 3,
@@ -147,9 +112,23 @@ export function OrderFormModal({
     register,
     handleSubmit,
     setError,
+    setFocus,
     formState: { errors, isSubmitting },
   } = useForm<OrderFormValues>({
-    resolver: yupResolver(isNew ? createOrderSchema : updateOrderSchema) as never,
+    // create/update schemas differ structurally in which fields are
+    // required (e.g. tripId), so yup can't unify them into one type on
+    // its own — the ternary alone won't typecheck as a single schema
+    // argument. We cast in two places for two separate reasons:
+    //   1. `(...) as any` on the schema — lets the ternary's two
+    //      differently-shaped ObjectSchemas pass as a single argument.
+    //   2. `as unknown as Resolver<OrderFormValues>` on the whole call —
+    //      stops TS from inferring the Resolver's generics from the
+    //      schema's own (slightly different) inferred shape, which is
+    //      what caused the earlier "quantity optional vs required"
+    //      mismatch.
+    resolver: yupResolver(
+      (isNew ? createOrderSchema : updateOrderSchema) as any,
+    ) as unknown as Resolver<OrderFormValues>,
     defaultValues: {
       shipmentNumber: editOrder?.shipmentNumber ?? "",
       recipientName: editOrder?.recipientName ?? "",
@@ -200,7 +179,12 @@ export function OrderFormModal({
   });
 
   const [apiError, setApiError] = useState("");
-  const firstRef = useRef<HTMLInputElement>(null);
+
+  // register("shipmentNumber") already attaches its own ref — focusing via
+  // setFocus avoids the ref collision a separate `ref={firstRef}` would cause.
+  useEffect(() => {
+    setFocus("shipmentNumber");
+  }, [setFocus]);
 
   useEffect(() => {
     let cancelled = false;
@@ -227,22 +211,6 @@ export function OrderFormModal({
     };
   }, []);
 
-  useEffect(() => {
-    firstRef.current?.focus();
-  }, []);
-  useEffect(() => {
-    const h = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", h);
-    return () => window.removeEventListener("keydown", h);
-  }, [onClose]);
-
-  const withError = (hasError: boolean): React.CSSProperties => ({
-    ...inputBase,
-    ...(hasError ? { borderColor: "var(--color-danger)", background: "#FEF2F2" } : {}),
-  });
-
   const numberField = (
     field:
       | "quantity"
@@ -340,79 +308,28 @@ export function OrderFormModal({
   const pickupErr = errors.pickupAddress;
 
   return (
-    <div
+    <Modal
-      role="dialog"
+      open
-      aria-modal="true"
+      title={isNew ? "طلب جديد" : editOrder?.shipmentNumber ?? ""}
-      aria-labelledby="order-modal-title"
+      subtitle={isNew ? "إنشاء طلب" : "تعديل طلب"}
-      onClick={(e) => {
+      onClose={onClose}
-        if (e.target === e.currentTarget) onClose();
+      size="lg"
-      }}
+      footer={
-      style={{
+        <>
-        position: "fixed",
+          <Button type="button" variant="secondary" onClick={onClose} disabled={isSubmitting}>
-        inset: 0,
+            إلغاء
-        zIndex: 50,
+          </Button>
-        background: "rgba(15,23,42,0.55)",
+          <Button type="submit" form="order-form" loading={isSubmitting}>
-        backdropFilter: "blur(4px)",
+            {isNew ? "إنشاء الطلب" : "حفظ التغييرات"}
-        display: "flex",
+          </Button>
-        alignItems: "center",
+        </>
-        justifyContent: "center",
+      }
-        padding: "1rem",
-        overflowY: "auto",
-      }}
     >
-      <div
-        onClick={(e) => e.stopPropagation()}
-        style={{
-          width: "100%",
-          maxWidth: 640,
-          background: "var(--color-surface)",
-          borderRadius: "var(--radius-2xl)",
-          border: "1px solid var(--color-border)",
-          boxShadow: "0 24px 64px rgba(0,0,0,.18)",
-          overflow: "hidden",
-          margin: "auto",
-        }}
-      >
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            padding: "1.25rem 1.5rem",
-            borderBottom: "1px solid var(--color-border)",
-            background: "var(--color-surface-muted)",
-          }}
-        >
-          <div>
-            <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600, margin: 0 }}>
-              {isNew ? "إنشاء طلب" : "تعديل طلب"}
-            </p>
-            <h2
-              id="order-modal-title"
-              style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0", fontFamily: "var(--font-mono)" }}
-            >
-              {isNew ? "طلب جديد" : editOrder?.shipmentNumber}
-            </h2>
-          </div>
-          <button
-            type="button"
-            onClick={onClose}
-            aria-label="إغلاق"
-            style={{
-              width: 34, height: 34, borderRadius: "var(--radius-md)",
-              border: "1px solid var(--color-border)", background: "var(--color-surface)",
-              cursor: "pointer", fontSize: 18, color: "var(--color-text-muted)",
-              display: "flex", alignItems: "center", justifyContent: "center",
-            }}
-          >
-            ×
-          </button>
-        </div>
-
       <form
+        id="order-form"
         onSubmit={handleSubmit(submitHandler)}
         noValidate
-          style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem", maxHeight: "75vh", overflowY: "auto" }}
+        style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
         dir="rtl"
       >
         {errors.shipmentNumber?.type === "manual" && (
@@ -422,28 +339,29 @@ export function OrderFormModal({
         <p style={sectionHeadingStyle}>بيانات الشحنة والمستلم</p>
 
         <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
-            <label style={labelStyle}>
+          <Input
-              رقم الشحنة *
+            id="order-shipmentNumber"
-              <input
+            label="رقم الشحنة *"
-                ref={firstRef}
+            error={
-                style={withError(!!errors.shipmentNumber && errors.shipmentNumber.type !== "manual")}
+              errors.shipmentNumber && errors.shipmentNumber.type !== "manual"
+                ? errors.shipmentNumber.message
+                : undefined
+            }
             {...register("shipmentNumber")}
             placeholder="SHP-0001"
             dir="ltr"
             autoComplete="off"
           />
-              {errors.shipmentNumber && errors.shipmentNumber.type !== "manual" && (
-                <span style={errorTextStyle}>{errors.shipmentNumber.message}</span>
-              )}
-            </label>
 
-            <label style={labelStyle}>
+          <div>
-              العميل *
+            <Select
-              <select
+              id="order-clientId"
-                style={{ ...withError(!!errors.clientId), cursor: relLoading ? "wait" : "pointer" }}
+              label="العميل *"
+              error={errors.clientId?.message}
               disabled={relLoading}
               {...register("clientId")}
               dir="rtl"
+              style={{ cursor: relLoading ? "wait" : "pointer" }}
             >
               <option value="">{relLoading ? "جارٍ التحميل…" : "اختر العميل"}</option>
               {clients.map((c) => (
@@ -452,37 +370,40 @@ export function OrderFormModal({
                   {c.phone ? ` — ${c.phone}` : ""}
                 </option>
               ))}
-              </select>
+            </Select>
-              {errors.clientId && <span style={errorTextStyle}>{errors.clientId.message}</span>}
             <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">
+              <i className="ti ti-plus" style={{ fontSize: 11 }} aria-hidden="true" />
-                  <line x1="12" y1="5" x2="12" y2="19" />
-                  <line x1="5" y1="12" x2="19" y2="12" />
-                </svg>
               إنشاء عميل جديد
             </Link>
-            </label>
+          </div>
 
-            <label style={labelStyle}>
+          <Input
-              اسم المستلم *
+            id="order-recipientName"
-              <input style={withError(!!errors.recipientName)} {...register("recipientName")} placeholder="أحمد محمد" dir="rtl" />
+            label="اسم المستلم *"
-              {errors.recipientName && <span style={errorTextStyle}>{errors.recipientName.message}</span>}
+            error={errors.recipientName?.message}
-            </label>
+            {...register("recipientName")}
+            placeholder="أحمد محمد"
+            dir="rtl"
+          />
 
-            <label style={labelStyle}>
+          <Input
-              رقم جوال المستلم *
+            id="order-recipientPhone"
-              <input style={withError(!!errors.recipientPhone)} {...register("recipientPhone")} placeholder="05XXXXXXXX" dir="ltr" />
+            label="رقم جوال المستلم *"
-              {errors.recipientPhone && <span style={errorTextStyle}>{errors.recipientPhone.message}</span>}
+            error={errors.recipientPhone?.message}
-            </label>
+            {...register("recipientPhone")}
+            placeholder="05XXXXXXXX"
+            dir="ltr"
+          />
 
-            <label style={{ ...labelStyle, gridColumn: "1 / -1" }}>
+          <div style={{ gridColumn: "1 / -1" }}>
-              {isNew ? "الرحلة *" : "الرحلة"}
+            <Select
-              {!isNew && <span style={optionalLabelStyle}>(اختياري)</span>}
+              id="order-tripId"
-              <select
+              label={isNew ? "الرحلة *" : "الرحلة (اختياري)"}
-                style={{ ...withError(!!errors.tripId), cursor: relLoading ? "wait" : "pointer" }}
+              error={errors.tripId?.message}
               disabled={relLoading}
               {...register("tripId")}
               dir="rtl"
+              style={{ cursor: relLoading ? "wait" : "pointer" }}
             >
               <option value="">{relLoading ? "جارٍ التحميل…" : "اختر الرحلة"}</option>
               {trips.map((t) => (
@@ -492,286 +413,260 @@ export function OrderFormModal({
                   {t.driver?.name ? ` (${t.driver.name})` : ""}
                 </option>
               ))}
-              </select>
+            </Select>
-              {errors.tripId && <span style={errorTextStyle}>{errors.tripId.message}</span>}
             <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">
+              <i className="ti ti-plus" style={{ fontSize: 11 }} aria-hidden="true" />
-                  <line x1="12" y1="5" x2="12" y2="19" />
-                  <line x1="5" y1="12" x2="19" y2="12" />
-                </svg>
               إنشاء رحلة جديدة
             </Link>
-            </label>
+          </div>
         </div>
 
         <p style={sectionHeadingStyle}>تفاصيل الشحنة</p>
 
         <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
-            <label style={labelStyle}>
+          <Input
-              نوع الشحنة
+            id="order-type"
-              <span style={optionalLabelStyle}>(اختياري)</span>
+            label="نوع الشحنة (اختياري)"
-              <input style={inputBase} {...register("type")} placeholder="عادي / مبرد" dir="rtl" />
+            {...register("type")}
-            </label>
+            placeholder="عادي / مبرد"
+            dir="rtl"
+          />
 
-            <label style={labelStyle}>
+          <Input
-              الكمية *
+            id="order-quantity"
-              <input type="number" min={1} style={withError(!!errors.quantity)} {...numberField("quantity")} dir="ltr" />
+            label="الكمية *"
-              {errors.quantity && <span style={errorTextStyle}>{errors.quantity.message}</span>}
+            type="number"
-            </label>
+            min={1}
+            error={errors.quantity?.message}
+            {...numberField("quantity")}
+            dir="ltr"
+          />
 
-            <label style={labelStyle}>
+          <Input
-              الوزن (كجم)
+            id="order-weight"
-              <span style={optionalLabelStyle}>(اختياري)</span>
+            label="الوزن (كجم) (اختياري)"
-              <input type="number" min={0} step="0.01" style={inputBase} {...numberField("weight")} dir="ltr" />
+            type="number"
-            </label>
+            min={0}
+            step="0.01"
+            {...numberField("weight")}
+            dir="ltr"
+          />
         </div>
 
         <p style={sectionHeadingStyle}>بيانات الدفع</p>
 
         <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
-            <label style={labelStyle}>
+          <Input
-              الإجمالي الفرعي
+            id="order-subTotal"
-              <span style={optionalLabelStyle}>(اختياري)</span>
+            label="الإجمالي الفرعي (اختياري)"
-              <input type="number" min={0} step="0.01" style={withError(!!errors.subTotal)} {...numberField("subTotal")} dir="ltr" />
+            type="number"
-              {errors.subTotal && <span style={errorTextStyle}>{errors.subTotal.message}</span>}
+            min={0}
-            </label>
+            step="0.01"
+            error={errors.subTotal?.message}
+            {...numberField("subTotal")}
+            dir="ltr"
+          />
 
-            <label style={labelStyle}>
+          <Input
-              نسبة الضريبة (%)
+            id="order-vatRate"
-              <span style={optionalLabelStyle}>(اختياري)</span>
+            label="نسبة الضريبة (%) (اختياري)"
-              <input type="number" min={0} step="0.01" style={withError(!!errors.vatRate)} {...numberField("vatRate")} dir="ltr" />
+            type="number"
-              {errors.vatRate && <span style={errorTextStyle}>{errors.vatRate.message}</span>}
+            min={0}
-            </label>
+            step="0.01"
+            error={errors.vatRate?.message}
+            {...numberField("vatRate")}
+            dir="ltr"
+          />
 
-            <label style={labelStyle}>
+          <Select
-              طريقة الدفع
+            id="order-paymentMethod"
-              <span style={optionalLabelStyle}>(اختياري)</span>
+            label="طريقة الدفع (اختياري)"
-              <select style={{ ...inputBase, cursor: "pointer" }} {...register("paymentMethod")} dir="rtl">
+            {...register("paymentMethod")}
+            dir="rtl"
+            style={{ cursor: "pointer" }}
+          >
             <option value="">اختر الطريقة</option>
             <option value="Cash">نقداً</option>
             <option value="Card">بطاقة</option>
             <option value="Prepaid">مدفوع مسبقاً</option>
-              </select>
+          </Select>
-            </label>
 
           {!isNew && (
-              <label style={labelStyle}>
+            <Select
-                حالة الدفع
+              id="order-paymentStatus"
-                <select style={{ ...inputBase, cursor: "pointer" }} {...register("paymentStatus")} dir="rtl">
+              label="حالة الدفع"
+              {...register("paymentStatus")}
+              dir="rtl"
+              style={{ cursor: "pointer" }}
+            >
               <option value="">—</option>
               <option value="Pending">معلَّق</option>
               <option value="Paid">مدفوع</option>
               <option value="Failed">فشل</option>
               <option value="Refunded">مُسترجع</option>
-                </select>
+            </Select>
-              </label>
           )}
         </div>
 
         <p style={sectionHeadingStyle}>عنوان التسليم</p>
         <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
-            <label style={labelStyle}>
+          <Input
-              المدينة
+            id="delivery-city"
-              <span style={optionalLabelStyle}>(اختياري)</span>
+            label="المدينة (اختياري)"
-              <input style={inputBase} {...register("deliveryAddress.details.city")} placeholder="الرياض" dir="rtl" />
+            {...register("deliveryAddress.details.city")}
-            </label>
+            placeholder="الرياض"
-            <label style={labelStyle}>
+            dir="rtl"
-              الحي
+          />
-              <span style={optionalLabelStyle}>(اختياري)</span>
+          <Input
-              <input style={inputBase} {...register("deliveryAddress.details.district")} placeholder="العليا" dir="rtl" />
+            id="delivery-district"
-            </label>
+            label="الحي (اختياري)"
-            <label style={labelStyle}>
+            {...register("deliveryAddress.details.district")}
-              الشارع
+            placeholder="العليا"
-              <span style={optionalLabelStyle}>(اختياري)</span>
+            dir="rtl"
-              <input style={inputBase} {...register("deliveryAddress.details.street")} placeholder="شارع الأمير محمد" dir="rtl" />
+          />
-            </label>
+          <Input
-            <label style={labelStyle}>
+            id="delivery-street"
-              رقم المبنى
+            label="الشارع (اختياري)"
-              <span style={optionalLabelStyle}>(اختياري)</span>
+            {...register("deliveryAddress.details.street")}
-              <input style={inputBase} {...register("deliveryAddress.details.buildingNo")} placeholder="1234" dir="ltr" />
+            placeholder="شارع الأمير محمد"
-            </label>
+            dir="rtl"
-            <label style={labelStyle}>
+          />
-              رقم الوحدة
+          <Input
-              <span style={optionalLabelStyle}>(اختياري)</span>
+            id="delivery-buildingNo"
-              <input style={inputBase} {...register("deliveryAddress.details.unitNo")} placeholder="56" dir="ltr" />
+            label="رقم المبنى (اختياري)"
-            </label>
+            {...register("deliveryAddress.details.buildingNo")}
-            <label style={labelStyle}>
+            placeholder="1234"
-              الرمز البريدي
+            dir="ltr"
-              <span style={optionalLabelStyle}>(اختياري)</span>
+          />
-              <input style={inputBase} {...register("deliveryAddress.details.zipCode")} placeholder="12345" dir="ltr" />
+          <Input
-            </label>
+            id="delivery-unitNo"
-            <label style={labelStyle}>
+            label="رقم الوحدة (اختياري)"
-              خط الطول (Longitude) *
+            {...register("deliveryAddress.details.unitNo")}
-              <input
+            placeholder="56"
+            dir="ltr"
+          />
+          <Input
+            id="delivery-zipCode"
+            label="الرمز البريدي (اختياري)"
+            {...register("deliveryAddress.details.zipCode")}
+            placeholder="12345"
+            dir="ltr"
+          />
+          <Input
+            id="delivery-lng"
+            label="خط الطول (Longitude) *"
             type="number"
             step="any"
-                style={withError(!!deliveryErr?.location?.coordinates)}
+            error={deliveryErr?.location?.coordinates ? " " : undefined}
             {...coordField("deliveryAddress.location.coordinates.0")}
             placeholder="46.6753"
             dir="ltr"
           />
-            </label>
+          <Input
-            <label style={labelStyle}>
+            id="delivery-lat"
-              خط العرض (Latitude) *
+            label="خط العرض (Latitude) *"
-              <input
             type="number"
             step="any"
-                style={withError(!!deliveryErr?.location?.coordinates)}
+            error={deliveryErr?.location?.coordinates?.message}
             {...coordField("deliveryAddress.location.coordinates.1")}
             placeholder="24.7136"
             dir="ltr"
           />
-              {deliveryErr?.location?.coordinates && (
-                <span style={errorTextStyle}>{deliveryErr.location.coordinates.message}</span>
-              )}
-            </label>
         </div>
 
         <p style={sectionHeadingStyle}>عنوان الاستلام</p>
 
         <div style={{ display: "flex", gap: "0.5rem", marginBottom: "0.25rem" }}>
           {(["id", "new"] as const).map((m) => (
-              <button
+            <Button
               key={m}
               type="button"
+              size="sm"
+              variant={pickupMode === m ? "primary" : "secondary"}
               onClick={() => setPickupMode(m)}
-                style={{
-                  height: 32,
-                  padding: "0 0.875rem",
-                  borderRadius: "var(--radius-md)",
-                  border: `1px solid ${pickupMode === m ? "var(--color-brand-600)" : "var(--color-border)"}`,
-                  background: pickupMode === m ? "var(--color-brand-50, #EFF6FF)" : "var(--color-surface)",
-                  fontSize: 12,
-                  fontWeight: 600,
-                  color: pickupMode === m ? "var(--color-brand-600)" : "var(--color-text-secondary)",
-                  cursor: "pointer",
-                  fontFamily: "var(--font-sans)",
-                }}
             >
               {m === "id" ? "عنوان موجود (ID)" : "عنوان جديد"}
-              </button>
+            </Button>
           ))}
         </div>
 
         {pickupMode === "id" ? (
-            <label style={labelStyle}>
+          <Input
-              معرّف العنوان (MongoDB ID)
+            id="pickup-addressId"
-              <input
+            label="معرّف العنوان (MongoDB ID)"
-                style={inputBase}
             {...register("pickupAddressId")}
             placeholder="67a1b2c3d4e5f6a7b8c9d0e1"
             dir="ltr"
             autoComplete="off"
           />
-            </label>
         ) : (
           <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
-              <label style={labelStyle}>
+            <Input
-                المدينة
+              id="pickup-city"
-                <span style={optionalLabelStyle}>(اختياري)</span>
+              label="المدينة (اختياري)"
-                <input style={inputBase} {...register("pickupAddress.details.city")} placeholder="جدة" dir="rtl" />
+              {...register("pickupAddress.details.city")}
-              </label>
+              placeholder="جدة"
-              <label style={labelStyle}>
+              dir="rtl"
-                الحي
+            />
-                <span style={optionalLabelStyle}>(اختياري)</span>
+            <Input
-                <input style={inputBase} {...register("pickupAddress.details.district")} placeholder="الروضة" dir="rtl" />
+              id="pickup-district"
-              </label>
+              label="الحي (اختياري)"
-              <label style={labelStyle}>
+              {...register("pickupAddress.details.district")}
-                الشارع
+              placeholder="الروضة"
-                <span style={optionalLabelStyle}>(اختياري)</span>
+              dir="rtl"
-                <input style={inputBase} {...register("pickupAddress.details.street")} placeholder="شارع التحلية" dir="rtl" />
+            />
-              </label>
+            <Input
-              <label style={labelStyle}>
+              id="pickup-street"
-                رقم المبنى
+              label="الشارع (اختياري)"
-                <span style={optionalLabelStyle}>(اختياري)</span>
+              {...register("pickupAddress.details.street")}
-                <input style={inputBase} {...register("pickupAddress.details.buildingNo")} placeholder="4321" dir="ltr" />
+              placeholder="شارع التحلية"
-              </label>
+              dir="rtl"
-              <label style={labelStyle}>
+            />
-                رقم الوحدة
+            <Input
-                <span style={optionalLabelStyle}>(اختياري)</span>
+              id="pickup-buildingNo"
-                <input style={inputBase} {...register("pickupAddress.details.unitNo")} placeholder="12" dir="ltr" />
+              label="رقم المبنى (اختياري)"
-              </label>
+              {...register("pickupAddress.details.buildingNo")}
-              <label style={labelStyle}>
+              placeholder="4321"
-                الرمز البريدي
+              dir="ltr"
-                <span style={optionalLabelStyle}>(اختياري)</span>
+            />
-                <input style={inputBase} {...register("pickupAddress.details.zipCode")} placeholder="23456" dir="ltr" />
+            <Input
-              </label>
+              id="pickup-unitNo"
-              <label style={labelStyle}>
+              label="رقم الوحدة (اختياري)"
-                خط الطول (Longitude)
+              {...register("pickupAddress.details.unitNo")}
-                <span style={optionalLabelStyle}>(اختياري)</span>
+              placeholder="12"
-                <input
+              dir="ltr"
+            />
+            <Input
+              id="pickup-zipCode"
+              label="الرمز البريدي (اختياري)"
+              {...register("pickupAddress.details.zipCode")}
+              placeholder="23456"
+              dir="ltr"
+            />
+            <Input
+              id="pickup-lng"
+              label="خط الطول (Longitude) (اختياري)"
               type="number"
               step="any"
-                  style={withError(!!pickupErr?.location?.coordinates)}
+              error={pickupErr?.location?.coordinates ? " " : undefined}
               {...coordField("pickupAddress.location.coordinates.0")}
               placeholder="46.6753"
               dir="ltr"
             />
-              </label>
+            <Input
-              <label style={labelStyle}>
+              id="pickup-lat"
-                خط العرض (Latitude)
+              label="خط العرض (Latitude) (اختياري)"
-                <span style={optionalLabelStyle}>(اختياري)</span>
-                <input
               type="number"
               step="any"
-                  style={withError(!!pickupErr?.location?.coordinates)}
+              error={pickupErr?.location?.coordinates?.message}
               {...coordField("pickupAddress.location.coordinates.1")}
               placeholder="24.7136"
               dir="ltr"
             />
-                {pickupErr?.location?.coordinates && (
-                  <span style={errorTextStyle}>{pickupErr.location.coordinates.message}</span>
-                )}
-              </label>
           </div>
         )}
-
-          <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end", paddingTop: "0.5rem" }}>
-            <button
-              type="button"
-              onClick={onClose}
-              disabled={isSubmitting}
-              style={{
-                height: 40,
-                padding: "0 1.25rem",
-                borderRadius: "var(--radius-md)",
-                border: "1px solid var(--color-border)",
-                background: "var(--color-surface)",
-                fontSize: 13,
-                fontWeight: 600,
-                color: "var(--color-text-secondary)",
-                cursor: isSubmitting ? "not-allowed" : "pointer",
-                fontFamily: "var(--font-sans)",
-              }}
-            >
-              إلغاء
-            </button>
-            <button
-              type="submit"
-              disabled={isSubmitting}
-              style={{
-                height: 40,
-                padding: "0 1.5rem",
-                borderRadius: "var(--radius-md)",
-                border: "none",
-                background: isSubmitting ? "var(--color-brand-400)" : "var(--color-brand-600)",
-                fontSize: 13,
-                fontWeight: 700,
-                color: "#FFF",
-                cursor: isSubmitting ? "not-allowed" : "pointer",
-                display: "flex",
-                alignItems: "center",
-                gap: 8,
-                fontFamily: "var(--font-sans)",
-              }}
-            >
-              {isSubmitting && <Spinner size="sm" className="text-white" />}
-              {isSubmitting ? "جارٍ الحفظ…" : isNew ? "إنشاء الطلب" : "حفظ التغييرات"}
-            </button>
-          </div>
       </form>
-      </div>
+    </Modal>
-    </div>
   );
 }
 

src/Components/Order/OrderTable.tsx

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

src/Components/Order/archive/ArchivedOrderDetailModal.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { ORDER_STATUS_MAP } from "../OrderDetailBanel";
+import { Button, Modal } from "../../UI";
+import { ORDER_STATUS_MAP } from "../OrderDetailModel";
 import type { ArchivedOrder } from "@/src/types/order";
 
 interface ArchivedOrderDetailModalProps {
@@ -34,25 +35,20 @@ export function ArchivedOrderDetailModal({ order, onClose }: ArchivedOrderDetail
   const s = ORDER_STATUS_MAP[order.currentStatus] ?? ORDER_STATUS_MAP.Created;
 
   return (
-    <div role="dialog" aria-modal="true" aria-labelledby="archived-order-title"
+    <Modal
-      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
+      open
-      style={{ position: "fixed", inset: 0, zIndex: 80, background: "rgba(15,23,42,0.55)", backdropFilter: "blur(4px)", display: "flex", alignItems: "center", justifyContent: "center", padding: "1rem" }}>
+      title={order.shipmentNumber}
-      <div onClick={e => e.stopPropagation()}
+      subtitle="طلب مؤرشف"
-        style={{ width: "100%", maxWidth: 480, background: "var(--color-surface)", borderRadius: "var(--radius-2xl)", border: "1px solid var(--color-border)", boxShadow: "0 24px 64px rgba(0,0,0,.18)", overflow: "hidden" }}>
+      onClose={onClose}
-        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "1.25rem 1.5rem", borderBottom: "1px solid var(--color-border)", background: "var(--color-surface-muted)" }}>
+      zIndex={60}
-          <div>
+      size="md"
-            <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#EA580C", fontWeight: 600, margin: 0 }}>طلب مؤرشف</p>
+      footer={
-            <h2 id="archived-order-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0", fontFamily: "var(--font-mono)" }}>
+        <Button type="button" variant="secondary" onClick={onClose}>
-              {order.shipmentNumber}
+          إغلاق
-            </h2>
+        </Button>
-          </div>
+      }
-          <button type="button" onClick={onClose} aria-label="إغلاق"
+    >
-            style={{ width: 34, height: 34, borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", cursor: "pointer", fontSize: 18, color: "var(--color-text-muted)", display: "flex", alignItems: "center", justifyContent: "center" }}>
+      <div dir="rtl">
-            ×
-          </button>
-        </div>
-
-        <div style={{ padding: "1.5rem", overflowY: "auto", maxHeight: "70vh" }} dir="rtl">
         <span style={{ display: "inline-flex", alignItems: "center", gap: 6, borderRadius: "var(--radius-full)", border: `1px solid ${s.border}`, background: s.bg, padding: "0.3rem 0.875rem", fontSize: 12, fontWeight: 700, color: s.color, marginBottom: 12 }}>
           <span style={{ width: 7, height: 7, borderRadius: "50%", background: s.dot }} />
           {s.label}
@@ -80,14 +76,6 @@ export function ArchivedOrderDetailModal({ order, onClose }: ArchivedOrderDetail
           </div>
         )}
       </div>
-
+    </Modal>
-        <div style={{ padding: "1rem 1.5rem", borderTop: "1px solid var(--color-border)", background: "var(--color-surface-muted)", display: "flex", justifyContent: "flex-end" }}>
-          <button type="button" onClick={onClose}
-            style={{ height: 40, padding: "0 1.5rem", borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", fontSize: 13, fontWeight: 600, color: "var(--color-text-secondary)", cursor: "pointer", fontFamily: "var(--font-sans)" }}>
-            إغلاق
-          </button>
-        </div>
-      </div>
-    </div>
   );
 }

src/Components/Order/archive/ArchivedOrderTable.tsx

@@ -1,29 +1,17 @@
 "use client";
 
-import { Spinner } from "../../UI";
+import { ReusableTable, ActionButtons } from "../../UI";
-import { ORDER_STATUS_MAP } from "../OrderDetailBanel";
+import { ORDER_STATUS_MAP } from "../OrderDetailModel";
+import type { TableColumn } from "@/src/types/models";
 import type { ArchivedOrder } from "@/src/types/order";
 
-
 function fmtAmount(n?: string | number | null): string {
   if (n == null) return "—";
   const num = typeof n === "string" ? parseFloat(n) : n;
   if (Number.isNaN(num)) return "—";
-  return `${num.toFixed(2)} ر.س`;
+  return `${num.toFixed(2)} SAR`;
 }
 
-const cardStyle: React.CSSProperties = {
-  borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)",
-  background: "var(--color-surface)", overflow: "hidden", boxShadow: "var(--shadow-card)",
-};
-const thStyle: React.CSSProperties = {
-  padding: "0.75rem 1.5rem", fontSize: 11, fontWeight: 700,
-  textTransform: "uppercase", letterSpacing: "0.2em",
-  color: "var(--color-text-muted)", background: "var(--color-surface-muted)",
-  borderBottom: "1px solid var(--color-border)",
-};
-const ROW_GRID = "1.6fr 1.6fr 1fr 1fr 100px";
-
 interface ArchivedOrderTableProps {
   orders: ArchivedOrder[];
   loading: boolean;
@@ -35,92 +23,58 @@ interface ArchivedOrderTableProps {
 }
 
 export function ArchivedOrderTable({ orders, loading, search, page, pages, onView, onPageChange }: ArchivedOrderTableProps) {
-  return (
+  const columns: TableColumn<ArchivedOrder>[] = [
-    <div style={cardStyle}>
+    {
-      <div dir="rtl" style={{ display: "grid", gridTemplateColumns: ROW_GRID, ...thStyle }}>
+      key: "shipmentNumber",
-        <span>رقم الشحنة</span>
+      header: "رقم الشحنة #",
-        <span>المستلم</span>
+      width: "1.6fr",
-        <span>المبلغ</span>
+      render: (o) => <span style={{ fontWeight: 600, fontFamily: "var(--font-mono)", color: "#2563EB" }}>{o.shipmentNumber}</span>,
-        <span>الحالة</span>
+    },
-        <span style={{ textAlign: "center" }}>إجراءات</span>
+    {
-      </div>
+      key: "recipient",
-
+      header: "المستلم",
-      {loading ? (
+      width: "1.6fr",
-        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, padding: "4rem 0", color: "var(--color-text-muted)" }}>
+      render: (o) => (
-          <Spinner size="sm" className="text-blue-600" />
-          <span style={{ fontSize: 13 }}>جارٍ التحميل…</span>
-        </div>
-      ) : orders.length === 0 ? (
-        <div style={{ textAlign: "center", padding: "4rem 1rem" }}>
-          <p style={{ fontSize: 13, color: "var(--color-text-muted)" }}>
-            {search ? `لا توجد نتائج لـ "${search}"` : "لا توجد طلبات في الأرشيف."}
-          </p>
-        </div>
-      ) : (
-        <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
-          {orders.map((o, i) => {
-            const s = ORDER_STATUS_MAP[o.currentStatus] ?? ORDER_STATUS_MAP.Created;
-            return (
-              <li key={o.id} style={{
-                display: "grid", gridTemplateColumns: ROW_GRID,
-                alignItems: "center", gap: "0.5rem", padding: "0.875rem 1.5rem",
-                borderBottom: "1px solid var(--color-border)",
-                background: i % 2 !== 0 ? "var(--color-surface-muted)" : "transparent",
-                fontSize: 13,
-              }}>
-                <span style={{ fontWeight: 600, fontFamily: "var(--font-mono)", color: "#2563EB" }}>
-                  {o.shipmentNumber}
-                </span>
         <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={{
+      key: "amount",
-                  display: "inline-flex", alignItems: "center", gap: 5,
+      header: "الكمية",
-                  borderRadius: "var(--radius-full)", border: `1px solid ${s.border}`,
+      width: "1fr",
-                  background: s.bg, padding: "0.2rem 0.625rem",
+      render: (o) => <span style={{ fontWeight: 600, fontFamily: "var(--font-mono)", color: "var(--color-text-primary)" }}>{fmtAmount(o.subTotal)}</span>,
-                  fontSize: 11, fontWeight: 600, color: s.color, width: "fit-content",
+    },
-                }}>
+    {
+      key: "status",
+      header: "الحالة",
+      width: "1fr",
+      render: (o) => {
+        const s = ORDER_STATUS_MAP[o.currentStatus] ?? ORDER_STATUS_MAP.Created;
+        return (
+          <span style={{ display: "inline-flex", alignItems: "center", gap: 5, borderRadius: "var(--radius-full)", border: `1px solid ${s.border}`, background: s.bg, padding: "0.2rem 0.625rem", fontSize: 11, fontWeight: 600, color: s.color, width: "fit-content" }}>
             <span style={{ width: 6, height: 6, borderRadius: "50%", background: s.dot }} />
             {s.label}
           </span>
-                <div style={{ display: "flex", justifyContent: "center" }}>
-                  <button type="button" title={`عرض ${o.shipmentNumber}`} aria-label={`عرض ${o.shipmentNumber}`}
-                    onClick={e => { e.stopPropagation(); onView(o); }}
-                    style={{ width: 32, height: 32, borderRadius: "var(--radius-md)", border: "1px solid #A7F3D0", background: "#ECFDF5", color: "#059669", cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
-                      <circle cx="12" cy="12" r="3" />
-                    </svg>
-                  </button>
-                </div>
-              </li>
         );
-          })}
+      },
-        </ul>
+    },
-      )}
+  ];
 
-      {pages > 1 && (
+  return (
-        <div dir="rtl" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", borderTop: "1px solid var(--color-border)", padding: "0.875rem 1.5rem" }}>
+    <ReusableTable
-          <span style={{ fontSize: 12, color: "var(--color-text-muted)" }}>
+      columns={columns}
-            صفحة <strong style={{ color: "var(--color-text-primary)" }}>{page}</strong> من <strong style={{ color: "var(--color-text-primary)" }}>{pages}</strong>
+      data={orders}
-          </span>
+      loading={loading}
-          <div style={{ display: "flex", gap: "0.5rem" }}>
+      search={search}
-            {[
+      page={page}
-              { label: "السابق", action: () => onPageChange(Math.max(1, page - 1)),     disabled: page === 1     },
+      pages={pages}
-              { label: "التالي", action: () => onPageChange(Math.min(pages, page + 1)), disabled: page === pages },
+      onPageChange={onPageChange}
-            ].map(btn => (
+      emptyIcon="🗄️"
-              <button key={btn.label} type="button" onClick={btn.action} disabled={btn.disabled}
+      emptyDescription={search ? `No results for "${search}"` : "No archived orders."}
-                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)" }}>
+      renderActions={(o) => <ActionButtons itemLabel={o.shipmentNumber} onView={() => onView(o)} />}
-                {btn.label}
+    />
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
   );
 }

src/Components/Order/archive/ArchivedOrdersModal.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Alert } from "../../UI";
+import { Alert, Input, Modal } from "../../UI";
 import { ArchivedOrderTable } from "./ArchivedOrderTable";
 import { ArchivedOrderDetailModal } from "./ArchivedOrderDetailModal";
 import { useArchivedOrders } from "@/src/hooks/archive/useArchivedOrders";
@@ -11,6 +11,10 @@ interface ArchivedOrdersModalProps {
   onClose: () => void;
 }
 
+const searchIcon = (
+  <i className="ti ti-search" style={{ fontSize: 16 }} aria-hidden="true" />
+);
+
 export function ArchivedOrdersModal({ onClose }: ArchivedOrdersModalProps) {
   const [viewOrder, setViewOrder] = useState<ArchivedOrder | null>(null);
 
@@ -21,79 +25,28 @@ export function ArchivedOrdersModal({ onClose }: ArchivedOrdersModalProps) {
   } = useArchivedOrders();
 
   return (
-    <div
+    <>
-      role="dialog" aria-modal="true" aria-labelledby="archive-orders-modal-title"
-      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
-      style={{
-        position: "fixed", inset: 0, zIndex: 70,
-        background: "rgba(15,23,42,0.6)", backdropFilter: "blur(4px)",
-        display: "flex", alignItems: "flex-start", justifyContent: "center",
-        padding: "2rem 1rem", overflowY: "auto",
-      }}
-    >
       {viewOrder && (
         <ArchivedOrderDetailModal order={viewOrder} onClose={() => setViewOrder(null)} />
       )}
 
-      <div
+      <Modal
-        onClick={e => e.stopPropagation()}
+        open
-        style={{
+        onClose={onClose}
-          width: "100%", maxWidth: 920,
+        size="lg"
-          background: "var(--color-surface-sunken)",
+        subtitle="الأرشيف"
-          borderRadius: "var(--radius-xl)",
+        title={`الطلبات المؤرشفة (${total})`}
-          border: "1px solid var(--color-border)",
-          boxShadow: "0 24px 64px rgba(0,0,0,.2)",
-          overflow: "hidden",
-        }}
       >
-        {/* header */}
+        <div dir="rtl" style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
-        <div dir="rtl" style={{
-          display: "flex", alignItems: "center", justifyContent: "space-between",
-          padding: "1.25rem 1.5rem",
-          borderBottom: "1px solid var(--color-border)",
-          background: "var(--color-surface)",
-        }}>
-          <div>
-            <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#EA580C", fontWeight: 600, margin: 0 }}>
-              الأرشيف
-            </p>
-            <h2 id="archive-orders-modal-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
-              الطلبات المؤرشفة
-              <span style={{ marginInlineStart: 8, fontSize: 13, fontWeight: 500, color: "var(--color-text-muted)" }}>
-                ({total})
-              </span>
-            </h2>
-          </div>
-          <button type="button" onClick={onClose} aria-label="إغلاق"
-            style={{ width: 34, height: 34, borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", cursor: "pointer", fontSize: 18, color: "var(--color-text-muted)", display: "flex", alignItems: "center", justifyContent: "center" }}>
-            ×
-          </button>
-        </div>
-
-        {/* body */}
-        <div style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
           {/* search */}
-          <div dir="rtl" style={{ position: "relative", maxWidth: 320 }}>
+          <div style={{ maxWidth: 320 }}>
-            <svg style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", width: 16, height: 16, color: "var(--color-text-hint)", pointerEvents: "none" }}
+            <Input
-              fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+              label="بحث"
-              <circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" />
-            </svg>
-            <input
-              type="text"
               placeholder="رقم الشحنة أو المستلم..."
               value={search}
               onChange={e => handleSearch(e.target.value)}
+              icon={searchIcon}
               dir="rtl"
-              style={{
-                width: "100%", height: 40,
-                paddingRight: 36, paddingLeft: 12,
-                borderRadius: "var(--radius-lg)",
-                border: "1px solid var(--color-border)",
-                background: "var(--color-surface)",
-                fontSize: 13, outline: "none",
-                fontFamily: "var(--font-sans)",
-                color: "var(--color-text-primary)",
-              }}
             />
           </div>
 
@@ -109,7 +62,7 @@ export function ArchivedOrdersModal({ onClose }: ArchivedOrdersModalProps) {
             onPageChange={setPage}
           />
         </div>
-      </div>
+      </Modal>
-    </div>
+    </>
   );
 }

src/Components/Order/index.ts

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

src/Components/Order/order.tsx

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

src/Components/Trip/TripDetailModal.tsx

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

src/Components/Trip/TripTable.tsx

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

src/Components/Trip/Tripdeletemodal.tsx

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

src/Components/Trip/Tripformmodal.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { Alert, Spinner } from "../UI";
+import { Alert, Button, Input, Modal, Select, Textarea } from "../UI";
 import { getStoredToken } from "@/src/lib/auth";
 import {
   createTripSchema,
@@ -21,35 +21,11 @@ import type { DriverOption } from "@/src/types/driver";
 import type { CarOption } from "@/src/types/car";
 import type { BranchOption } from "@/src/types/branch";
 
+const FORM_ID = "trip-form";
+
 // ── Shared styles ────────────────────────────────────────────────────────────
-
+// Only for section headings — everything field-level now comes from the
-const inputBase: React.CSSProperties = {
+// Input / Select / Textarea components themselves.
-  width: "100%",
-  height: 40,
-  padding: "0 0.75rem",
-  borderRadius: "var(--radius-md)",
-  border: "1px solid var(--color-border)",
-  background: "var(--color-surface)",
-  fontSize: 13,
-  color: "var(--color-text-primary)",
-  outline: "none",
-  fontFamily: "var(--font-sans)",
-};
-
-const labelStyle: React.CSSProperties = {
-  display: "flex",
-  flexDirection: "column",
-  gap: 6,
-  fontSize: 12,
-  fontWeight: 600,
-  color: "var(--color-text-secondary)",
-};
-
-const errorTextStyle: React.CSSProperties = {
-  fontSize: 11,
-  color: "var(--color-danger)",
-  fontWeight: 500,
-};
 
 const sectionHeadingStyle: React.CSSProperties = {
   fontSize: 11,
@@ -60,13 +36,6 @@ const sectionHeadingStyle: React.CSSProperties = {
   margin: "0.5rem 0 0",
 };
 
-const optionalLabelStyle: React.CSSProperties = {
-  fontSize: 10,
-  fontWeight: 500,
-  color: "var(--color-text-hint)",
-  marginRight: 4,
-};
-
 // ── Form values shape ────────────────────────────────────────────────────────
 // startTime/endTime store the ISO-8601 string (via setValueAs on register),
 // while the <input type="datetime-local"> DOM element itself keeps showing
@@ -115,26 +84,34 @@ export function TripFormModal({
   const [cars, setCars] = useState<CarOption[]>([]);
   const [branches, setBranches] = useState<BranchOption[]>([]);
 
-  useEffect(() => {
-    const token = getStoredToken();
-    driverService.getActiveOptions(token).then(setDrivers).catch(() => {});
-    carService.getActiveOptions(token).then(setCars).catch(() => {});
-    branchService.getOptions(token).then(setBranches).catch(() => {});
-  }, []);
-
   // ── react-hook-form ────────────────────────────────────────────────────────
+  // Moved above the dropdown-loading effect below: that effect calls
+  // setValue(), so useForm() (which defines it) must run first — otherwise
+  // setValue is referenced before its own initialization (TDZ ReferenceError).
   const {
     register,
     handleSubmit,
     setError,
+    setFocus,
+    setValue,
     formState: { errors, isSubmitting },
   } = useForm<TripFormValues>({
-    resolver: yupResolver(isNew ? createTripSchema : updateTripSchema) as never,
+    // Cast both the schema argument and the resolver's result:
+    // - argument: createTripSchema/updateTripSchema have structurally
+    //   different shapes (create requires title/driverId/etc., update makes
+    //   everything optional), so the ternary's type is a union yupResolver's
+    //   single-schema signature won't accept.
+    // - result: yup's inferred type for .optional() fields
+    //   (`collectedCount?: number`) is structurally incompatible with
+    //   TripFormValues's `collectedCount: number | undefined` — letting
+    //   useForm<TripFormValues> alone establish the field-values type avoids
+    //   that mismatch.
+    resolver: yupResolver((isNew ? createTripSchema : updateTripSchema) as any) as any,
     defaultValues: {
       title: editTrip?.title ?? "",
-      driverId: editTrip?.driverId ?? "",
+      driverId: editTrip?.driverId ?? editTrip?.driver?.id ?? "",
-      carId: editTrip?.carId ?? "",
+      carId: editTrip?.carId ?? editTrip?.car?.id ?? "",
-      branchId: editTrip?.branchId ?? "",
+      branchId: editTrip?.branchId ?? editTrip?.branch?.id ?? "",
       status: editTrip?.status ?? "Scheduled",
       startTime: editTrip?.startTime?.slice(0, 16) ?? "",
       endTime: editTrip?.endTime?.slice(0, 16) ?? "",
@@ -149,24 +126,39 @@ export function TripFormModal({
     },
   });
 
+  useEffect(() => {
+    const token = getStoredToken();
+
+    driverService.getActiveOptions(token).then((list) => {
+      setDrivers(list);
+      // defaultValues were applied before this list existed, so the <select>
+      // had no matching <option> yet and silently fell back to "" — reapply
+      // the saved id now that the option actually exists in the DOM.
+      const savedDriverId = editTrip?.driverId ?? editTrip?.driver?.id;
+      if (savedDriverId) setValue("driverId", savedDriverId);
+    }).catch(() => {});
+
+    carService.getActiveOptions(token).then((list) => {
+      setCars(list);
+      const savedCarId = editTrip?.carId ?? editTrip?.car?.id;
+      if (savedCarId) setValue("carId", savedCarId);
+    }).catch(() => {});
+
+    branchService.getOptions(token).then((list) => {
+      setBranches(list);
+      const savedBranchId = editTrip?.branchId ?? editTrip?.branch?.id;
+      if (savedBranchId) setValue("branchId", savedBranchId);
+    }).catch(() => {});
+  }, [editTrip, setValue]);
+
   const [apiError, setApiError] = useState("");
-  const firstRef = useRef<HTMLInputElement>(null);
 
+  // register("title") already attaches its own ref — Input forwards it
+  // through to the underlying <input>, so setFocus works with no separate
+  // ref needed here.
   useEffect(() => {
-    firstRef.current?.focus();
+    setFocus("title");
-  }, []);
+  }, [setFocus]);
-  useEffect(() => {
-    const h = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", h);
-    return () => window.removeEventListener("keydown", h);
-  }, [onClose]);
-
-  const withError = (hasError: boolean): React.CSSProperties => ({
-    ...inputBase,
-    ...(hasError ? { borderColor: "var(--color-danger)", background: "#FEF2F2" } : {}),
-  });
 
   const numberField = (
     field: "collectedCount" | "deliveredCount" | "returnedCount" | "totalCashCollected",
@@ -182,6 +174,9 @@ export function TripFormModal({
       setValueAs: (v) => (v ? `${v}:00.000Z` : ""),
     });
 
+  const titleError =
+    errors.title && errors.title.type !== "manual" ? errors.title.message : undefined;
+
   // ── Submit ────────────────────────────────────────────────────────────────
 
   const submitHandler = async (data: TripFormValues) => {
@@ -219,302 +214,205 @@ export function TripFormModal({
   };
 
   return (
-    <div
+    <Modal
-      role="dialog"
+      open
-      aria-modal="true"
+      onClose={onClose}
-      aria-labelledby="trip-form-title"
+      size="lg"
-      onClick={(e) => {
+      title={isNew ? "إضافة رحلة جديدة" : "تعديل بيانات الرحلة"}
-        if (e.target === e.currentTarget) onClose();
+      footer={
-      }}
+        <>
-      style={{
+          <Button type="button" variant="secondary" onClick={onClose} disabled={isSubmitting}>
-        position: "fixed",
+            إلغاء
-        inset: 0,
+          </Button>
-        zIndex: 60,
+          <Button type="submit" form={FORM_ID} variant="primary" loading={isSubmitting}>
-        background: "rgba(15,23,42,0.55)",
+            {isNew ? "إضافة الرحلة" : "حفظ التغييرات"}
-        backdropFilter: "blur(4px)",
+          </Button>
-        display: "flex",
+        </>
-        alignItems: "flex-start",
+      }
-        justifyContent: "center",
-        padding: "2rem 1rem",
-        overflowY: "auto",
-      }}
     >
-      <div
-        onClick={(e) => e.stopPropagation()}
-        style={{
-          width: "100%",
-          maxWidth: 700,
-          background: "var(--color-surface)",
-          borderRadius: "var(--radius-xl)",
-          border: "1px solid var(--color-border)",
-          boxShadow: "0 24px 56px rgba(0,0,0,.2)",
-          overflow: "hidden",
-        }}
-      >
-        {/* Header */}
-        <div
-          style={{
-            padding: "1.25rem 1.5rem",
-            borderBottom: "1px solid var(--color-border)",
-            background: "var(--color-surface-muted)",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-          }}
-        >
-          <h2
-            id="trip-form-title"
-            style={{
-              fontSize: 16,
-              fontWeight: 700,
-              color: "var(--color-text-primary)",
-              margin: 0,
-            }}
-          >
-            {isNew ? "إضافة رحلة جديدة" : "تعديل بيانات الرحلة"}
-          </h2>
-          <button
-            type="button"
-            onClick={onClose}
-            style={{
-              background: "none",
-              border: "none",
-              cursor: "pointer",
-              color: "var(--color-text-muted)",
-              padding: 4,
-            }}
-          >
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-              <line x1="18" y1="6" x2="6" y2="18" />
-              <line x1="6" y1="6" x2="18" y2="18" />
-            </svg>
-          </button>
-        </div>
-
-        {/* Form */}
       <form
+        id={FORM_ID}
         onSubmit={handleSubmit(submitHandler)}
         noValidate
-          style={{
+        dir="rtl"
-            padding: "1.5rem",
+        className="flex flex-col gap-4"
-            display: "flex",
-            flexDirection: "column",
-            gap: "1rem",
-          }}
       >
         {errors.title?.type === "manual" && (
           <Alert type="error" message={errors.title.message ?? ""} onClose={() => setApiError("")} />
         )}
 
-          {/* ── Section:trip management── */}
+        {/* ── Section: trip management ── */}
         <p style={sectionHeadingStyle}>أساسيات الرحلة</p>
 
         {/* Title */}
-          <label style={labelStyle}>
+        <Input
-            عنوان الرحلة <span style={{ color: "var(--color-danger)" }}>*</span>
+          label="عنوان الرحلة *"
-            <input
+          error={titleError}
-              ref={firstRef}
-              style={withError(!!errors.title && errors.title.type !== "manual")}
           {...register("title")}
           placeholder="مثال: توزيع الرياض الشمالي"
           dir="rtl"
         />
-            {errors.title && errors.title.type !== "manual" && (
-              <span style={errorTextStyle}>{errors.title.message}</span>
-            )}
-          </label>
 
         <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
           {/* Driver */}
-            <label style={labelStyle}>
+          <Select
-              السائق <span style={{ color: "var(--color-danger)" }}>*</span>
+            label="السائق *"
-              <select style={{ ...withError(!!errors.driverId), cursor: "pointer" }} {...register("driverId")} dir="rtl">
+            error={errors.driverId?.message}
+            {...register("driverId")}
+            dir="rtl"
+          >
             <option value="">اختر السائق</option>
             {drivers.map((d) => (
               <option key={d.id} value={d.id}>
                 {d.name} — {d.phone}
               </option>
             ))}
-              </select>
+          </Select>
-              {errors.driverId && <span style={errorTextStyle}>{errors.driverId.message}</span>}
-            </label>
 
           {/* Car */}
-            <label style={labelStyle}>
+          <Select
-              السيارة <span style={{ color: "var(--color-danger)" }}>*</span>
+            label="السيارة *"
-              <select style={{ ...withError(!!errors.carId), cursor: "pointer" }} {...register("carId")} dir="rtl">
+            error={errors.carId?.message}
+            {...register("carId")}
+            dir="rtl"
+          >
             <option value="">اختر السيارة</option>
             {cars.map((c) => (
               <option key={c.id} value={c.id}>
                 {c.manufacturer} {c.model} — {c.plateNumber}
               </option>
             ))}
-              </select>
+          </Select>
-              {errors.carId && <span style={errorTextStyle}>{errors.carId.message}</span>}
-            </label>
         </div>
 
         <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
           {/* Branch */}
-            <label style={labelStyle}>
+          <Select
-              الفرع <span style={{ color: "var(--color-danger)" }}>*</span>
+            label="الفرع *"
-              <select style={{ ...withError(!!errors.branchId), cursor: "pointer" }} {...register("branchId")} dir="rtl">
+            error={errors.branchId?.message}
+            {...register("branchId")}
+            dir="rtl"
+          >
             <option value="">اختر الفرع</option>
             {branches.map((b) => (
               <option key={b.id} value={b.id}>{b.name}</option>
             ))}
-              </select>
+          </Select>
-              {errors.branchId && <span style={errorTextStyle}>{errors.branchId.message}</span>}
-            </label>
 
           {/* Status */}
-            <label style={labelStyle}>
+          <Select label="الحالة" {...register("status")} dir="rtl">
-              الحالة
-              <select style={{ ...inputBase, cursor: "pointer" }} {...register("status")} dir="rtl">
             <option value="Scheduled">مجدولة</option>
             <option value="InProgress">جارية</option>
             <option value="Completed">مكتملة</option>
             <option value="Cancelled">ملغاة</option>
-              </select>
+          </Select>
-            </label>
         </div>
 
         {/* ── Section: التوقيت ── */}
         <p style={sectionHeadingStyle}>التوقيت</p>
 
         <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
-            <label style={labelStyle}>
+          <Input
-              وقت البدء <span style={optionalLabelStyle}>(اختياري)</span>
+            label="وقت البدء"
-              <input type="datetime-local" style={withError(!!errors.startTime)} {...dateTimeField("startTime")} />
+            hint="اختياري"
-              {errors.startTime && <span style={errorTextStyle}>{errors.startTime.message}</span>}
+            type="datetime-local"
-            </label>
+            error={errors.startTime?.message}
-
+            {...dateTimeField("startTime")}
-            <label style={labelStyle}>
+          />
-              وقت الانتهاء <span style={optionalLabelStyle}>(اختياري)</span>
+          <Input
-              <input type="datetime-local" style={withError(!!errors.endTime)} {...dateTimeField("endTime")} />
+            label="وقت الانتهاء"
-              {errors.endTime && <span style={errorTextStyle}>{errors.endTime.message}</span>}
+            hint="اختياري"
-            </label>
+            type="datetime-local"
+            error={errors.endTime?.message}
+            {...dateTimeField("endTime")}
+          />
         </div>
 
         {/* ── Section: الأعداد والمبالغ ── */}
         <p style={sectionHeadingStyle}>الأعداد والمبالغ</p>
 
         <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: "0.75rem" }}>
-            <label style={labelStyle}>
+          <Input
-              المجمّع <span style={optionalLabelStyle}>(اختياري)</span>
+            label="المجمّع"
-              <input type="number" min="0" style={withError(!!errors.collectedCount)} {...numberField("collectedCount")} placeholder="0" dir="ltr" />
+            hint="اختياري"
-              {errors.collectedCount && <span style={errorTextStyle}>{errors.collectedCount.message}</span>}
+            type="number"
-            </label>
+            min="0"
-
+            error={errors.collectedCount?.message}
-            <label style={labelStyle}>
+            {...numberField("collectedCount")}
-              المُسلَّم <span style={optionalLabelStyle}>(اختياري)</span>
+            placeholder="0"
-              <input type="number" min="0" style={withError(!!errors.deliveredCount)} {...numberField("deliveredCount")} placeholder="0" dir="ltr" />
+            dir="ltr"
-              {errors.deliveredCount && <span style={errorTextStyle}>{errors.deliveredCount.message}</span>}
+          />
-            </label>
+          <Input
-
+            label="المُسلَّم"
-            <label style={labelStyle}>
+            hint="اختياري"
-              المُرتجع <span style={optionalLabelStyle}>(اختياري)</span>
+            type="number"
-              <input type="number" min="0" style={withError(!!errors.returnedCount)} {...numberField("returnedCount")} placeholder="0" dir="ltr" />
+            min="0"
-              {errors.returnedCount && <span style={errorTextStyle}>{errors.returnedCount.message}</span>}
+            error={errors.deliveredCount?.message}
-            </label>
+            {...numberField("deliveredCount")}
-
+            placeholder="0"
-            <label style={labelStyle}>
+            dir="ltr"
-              النقد المحصّل <span style={optionalLabelStyle}>(اختياري)</span>
+          />
-              <input type="number" min="0" step="0.01" style={withError(!!errors.totalCashCollected)} {...numberField("totalCashCollected")} placeholder="0.00" dir="ltr" />
+          <Input
-              {errors.totalCashCollected && <span style={errorTextStyle}>{errors.totalCashCollected.message}</span>}
+            label="المُرتجع"
-            </label>
+            hint="اختياري"
+            type="number"
+            min="0"
+            error={errors.returnedCount?.message}
+            {...numberField("returnedCount")}
+            placeholder="0"
+            dir="ltr"
+          />
+          <Input
+            label="النقد المحصّل"
+            hint="اختياري"
+            type="number"
+            min="0"
+            step="0.01"
+            error={errors.totalCashCollected?.message}
+            {...numberField("totalCashCollected")}
+            placeholder="0.00"
+            dir="ltr"
+          />
         </div>
 
         {/* ── Section: ملاحظات ── */}
         <p style={sectionHeadingStyle}>ملاحظات</p>
 
         <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
-            <label style={labelStyle}>
+          <Textarea
-              ملاحظات <span style={optionalLabelStyle}>(اختياري)</span>
+            label="ملاحظات"
-              <textarea
+            hint="اختياري"
-                style={{ ...withError(!!errors.notes), height: 72, padding: "0.5rem 0.75rem", resize: "vertical" }}
+            error={errors.notes?.message}
             {...register("notes")}
             placeholder="أي ملاحظات إضافية…"
             dir="rtl"
+            className="h-[72px]"
           />
-              {errors.notes && <span style={errorTextStyle}>{errors.notes.message}</span>}
+          <Textarea
-            </label>
+            label="سبب الإنهاء"
-
+            hint="اختياري"
-            <label style={labelStyle}>
+            error={errors.endReason?.message}
-              سبب الإنهاء <span style={optionalLabelStyle}>(اختياري)</span>
-              <textarea
-                style={{ ...withError(!!errors.endReason), height: 72, padding: "0.5rem 0.75rem", resize: "vertical" }}
             {...register("endReason")}
             placeholder="سبب إنهاء أو إلغاء الرحلة…"
             dir="rtl"
+            className="h-[72px]"
           />
-              {errors.endReason && <span style={errorTextStyle}>{errors.endReason.message}</span>}
-            </label>
         </div>
 
         {/* reason — edit only (for reassigning driver/car) */}
         {!isNew && (
           <>
             <p style={sectionHeadingStyle}>سجل التغيير</p>
-              <label style={labelStyle}>
+            <Input
-                سبب التعديل{" "}
+              label="سبب التعديل"
-                <span style={optionalLabelStyle}>(مطلوب عند تغيير السائق أو السيارة)</span>
+              hint="مطلوب عند تغيير السائق أو السيارة"
-                <input
-                  style={inputBase}
               {...register("reason")}
               placeholder="مثال: تغيير السائق بسبب إجازة طارئة"
               dir="rtl"
             />
-              </label>
           </>
         )}
-
-          {/* ── Actions ── */}
-          <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end", paddingTop: "0.5rem" }}>
-            <button
-              type="button"
-              onClick={onClose}
-              disabled={isSubmitting}
-              style={{
-                height: 40,
-                padding: "0 1.25rem",
-                borderRadius: "var(--radius-md)",
-                border: "1px solid var(--color-border)",
-                background: "var(--color-surface)",
-                fontSize: 13,
-                fontWeight: 600,
-                color: "var(--color-text-secondary)",
-                cursor: isSubmitting ? "not-allowed" : "pointer",
-                fontFamily: "var(--font-sans)",
-              }}
-            >
-              إلغاء
-            </button>
-            <button
-              type="submit"
-              disabled={isSubmitting}
-              style={{
-                height: 40,
-                padding: "0 1.5rem",
-                borderRadius: "var(--radius-md)",
-                border: "none",
-                background: isSubmitting ? "var(--color-brand-400)" : "var(--color-brand-600)",
-                fontSize: 13,
-                fontWeight: 700,
-                color: "#FFF",
-                cursor: isSubmitting ? "not-allowed" : "pointer",
-                display: "flex",
-                alignItems: "center",
-                gap: 8,
-                fontFamily: "var(--font-sans)",
-              }}
-            >
-              {isSubmitting && <Spinner size="sm" className="text-white" />}
-              {isSubmitting ? "جارٍ الحفظ…" : isNew ? "إضافة الرحلة" : "حفظ التغييرات"}
-            </button>
-          </div>
       </form>
-      </div>
+    </Modal>
-    </div>
   );
 }

src/Components/Trip/archive/ArchivedTripModal.tsx

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

src/Components/Trip/archive/ArchivedTripTable.tsx

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

src/Components/Trip/archive/ArchivedtripDetailModal.tsx

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

src/Components/Trip/index.ts

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

src/Components/Trip_Report/Tripreportpanel.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useRef, useState } from "react";
-import { Spinner ,Toast} from "../UI";
+import { Button, Toast } from "../UI";
 import { tripService } from "@/src/services/trip.service";
 import { getStoredToken } from "@/src/lib/auth";
 import type { TripNotification } from "@/src/hooks/useTrip";
@@ -78,30 +78,9 @@ export function TripReportPanel({ tripId }: TripReportPanelProps) {
           إنشاء تقرير الرحلة
         </p>
 
-        <button
+        <Button type="button" onClick={handleGenerate} loading={loading}>
-          type="button"
-          onClick={handleGenerate}
-          disabled={loading}
-          style={{
-            height: 38,
-            padding: "0 1.25rem",
-            borderRadius: "var(--radius-md)",
-            border: "none",
-            fontSize: 13,
-            fontWeight: 700,
-            color: "#FFF",
-            background: loading ? "var(--color-brand-400)" : "var(--color-brand-600)",
-            cursor: loading ? "not-allowed" : "pointer",
-            display: "flex",
-            alignItems: "center",
-            gap: 8,
-            fontFamily: "var(--font-sans)",
-            whiteSpace: "nowrap",
-          }}
-        >
-          {loading && <Spinner size="sm" className="text-white" />}
           {loading ? "جارٍ الإنشاء…" : "إنشاء تقرير البيان"}
-        </button>
+        </Button>
       </div>
 
       <Toast

src/Components/UI/ActionButtons.tsx

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

src/Components/UI/ArchiveButton.tsx

@@ -50,11 +50,7 @@ export function ArchiveButton({
       onMouseEnter={e => (e.currentTarget.style.transform = "translateY(-2px)")}
       onMouseLeave={e => (e.currentTarget.style.transform = "translateY(0)")}
     >
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <i className="ti ti-archive" style={{ fontSize: 16 }} aria-hidden="true" />
-        <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>
       {label}
     </button>
   );

src/Components/UI/FailInput.tsx

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

src/Components/UI/Header.tsx

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

src/Components/UI/IconBtn.tsx

@@ -0,0 +1,22 @@
+// ── Icon button ───────────────────────────────────────────────────────────────
+// Kept custom rather than swapped for <Button/>: Button's variants only cover
+// primary/secondary/ghost/danger (one accent color each) and its size scale
+// (h-8/h-10/h-11 with horizontal padding) isn't built for a fixed 32×32
+// square icon chip. Forcing it here would misshape the button and collapse
+// the view/edit/delete green/blue/red color-coding into one variant.
+export function IconBtn({ onClick, title, color, bg, borderColor, children }: {
+  onClick: () => void; title: string; color: string; bg: string; borderColor: string; children: React.ReactNode;
+}) {
+  return (
+    <button type="button" title={title} aria-label={title}
+      onClick={e => { e.stopPropagation(); onClick(); }}
+      style={{
+        width: 32, height: 32, borderRadius: "var(--radius-md)",
+        border: `1px solid ${borderColor}`, background: bg, color,
+        cursor: "pointer", display: "inline-flex", alignItems: "center",
+        justifyContent: "center", transition: "opacity 150ms",
+      }}>
+      {children}
+    </button>
+  );
+}

src/Components/UI/Input.tsx

@@ -1,5 +1,6 @@
 // Accessible labelled input with error and hint state.
 
+import { forwardRef } from "react";
 import { cn } from "@/src/lib/utils";
 
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -29,7 +30,10 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
  *   hint="At least 8 characters"
  * />
  */
-export function Input({ label, error, hint, id, icon, className, ...rest }: InputProps) {
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  { label, error, hint, id, icon, className, ...rest },
+  ref,
+) {
   const inputId = id ?? `input-${label.toLowerCase().replace(/\s+/g, "-")}`;
   const errorId = `${inputId}-error`;
   const hintId  = `${inputId}-hint`;
@@ -54,6 +58,7 @@ export function Input({ label, error, hint, id, icon, className, ...rest }: Inpu
         )}
 
         <input
+          ref={ref}
           id={inputId}
           aria-invalid={!!error}
           aria-describedby={
@@ -88,4 +93,4 @@ export function Input({ label, error, hint, id, icon, className, ...rest }: Inpu
       )}
     </div>
   );
-}
+});

src/Components/UI/ModalProps.tsx

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

src/Components/UI/ModelCard.tsx

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

src/Components/UI/ReusableTable.tsx

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

src/Components/UI/Spinner.tsx

@@ -7,10 +7,11 @@ export interface SpinnerProps {
   className?: string;
 }
 
+// Font size (px) for each spinner size — replaces the old h-*/w-* SVG classes.
 const sizeMap: Record<NonNullable<SpinnerProps["size"]>, string> = {
-  sm: "h-4 w-4",
+  sm: "16px",
-  md: "h-6 w-6",
+  md: "24px",
-  lg: "h-10 w-10 border-4",
+  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",
+        "ti ti-loader-2 motion-safe:animate-spin text-[var(--color-brand-600)] shrink-0",
-        sizeMap[size],
         className,
       )}
-    >
+      style={{ fontSize: sizeMap[size], lineHeight: 1 }}
-      <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>
   );
 }
 

src/Components/UI/index.ts

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

src/Components/User/DeleteConfirmModal.tsx

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

src/Components/User/Toast.tsx

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

src/Components/User/UserDetailModal.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { Spinner } from "../UI";
+import { Alert, Button, Modal, Spinner } from "../UI";
 import { getStoredToken } from "@/src/lib/auth";
 import { userService } from "@/src/services/user.service";
 import type { UserDetail } from "@/src/types/user";
@@ -12,6 +12,8 @@ interface UserDetailModalProps {
 }
 
 // ── small helper components ───────────────────────────────────────────────────
+// (No equivalents in the shared UI kit — DetailRow/StatusBadge/Avatar are
+// purpose-built layouts, not generic form/action controls, so they stay custom.)
 function DetailRow({ label, value }: { label: string; value?: string | null }) {
   return (
     <div style={{
@@ -29,6 +31,9 @@ function DetailRow({ label, value }: { label: string; value?: string | null }) {
   );
 }
 
+// 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 status
+// chip's design.
 function StatusBadge({ active }: { active: boolean }) {
   return (
     <span style={{
@@ -68,13 +73,6 @@ export function UserDetailModal({ userId, onClose }: UserDetailModalProps) {
   const [loading, setLoading] = useState(true);
   const [error,   setError]   = useState<string | null>(null);
 
-  // close on Escape
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
-    window.addEventListener("keydown", handler);
-    return () => window.removeEventListener("keydown", handler);
-  }, [onClose]);
-
   // fetch user details on mount
   useEffect(() => {
     let cancelled = false;
@@ -90,7 +88,7 @@ export function UserDetailModal({ userId, onClose }: UserDetailModalProps) {
       }
     })();
     return () => { cancelled = true; };
-}, [userId]);
+  }, [userId]);
 
   // ── helpers ───────────────────────────────────────────────────────────────
   const fmt = (iso?: string | null) =>
@@ -98,60 +96,18 @@ export function UserDetailModal({ userId, onClose }: UserDetailModalProps) {
 
   // ── render ────────────────────────────────────────────────────────────────
   return (
-    <div
+    <Modal
-      role="dialog" aria-modal="true" aria-labelledby="detail-title"
+      open
-      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
+      title={user?.name ?? "عرض المستخدم"}
-      style={{
+      subtitle="بيانات المستخدم"
-        position: "fixed", inset: 0, zIndex: 55,
+      onClose={onClose}
-        background: "rgba(15,23,42,0.55)", backdropFilter: "blur(4px)",
+      size="md"
-        display: "flex", alignItems: "center", justifyContent: "center", padding: "1rem",
+      footer={
-      }}
+        <Button type="button" variant="secondary" onClick={onClose}>
+          إغلاق
+        </Button>
+      }
     >
-      <div
-        onClick={e => e.stopPropagation()}
-        style={{
-          width: "100%", maxWidth: 480,
-          background: "var(--color-surface)",
-          borderRadius: "var(--radius-2xl)",
-          border: "1px solid var(--color-border)",
-          boxShadow: "0 24px 64px rgba(0,0,0,.18)",
-          overflow: "hidden",
-          display: "flex", flexDirection: "column",
-        }}
-      >
-        {/* ── header ── */}
-        <div style={{
-          display: "flex", alignItems: "center", justifyContent: "space-between",
-          padding: "1.25rem 1.5rem",
-          borderBottom: "1px solid var(--color-border)",
-          background: "var(--color-surface-muted)",
-        }}>
-          <div>
-            <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600, margin: 0 }}>
-              بيانات المستخدم
-            </p>
-            <h2 id="detail-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
-              {user?.name ?? "عرض المستخدم"}
-            </h2>
-          </div>
-          <button
-            type="button" onClick={onClose} aria-label="إغلاق"
-            style={{
-              width: 34, height: 34, borderRadius: "var(--radius-md)",
-              border: "1px solid var(--color-border)",
-              background: "var(--color-surface)",
-              cursor: "pointer", fontSize: 18,
-              color: "var(--color-text-muted)",
-              display: "flex", alignItems: "center", justifyContent: "center",
-            }}
-          >
-            ×
-          </button>
-        </div>
-
-        {/* ── body ── */}
-        <div style={{ padding: "1.5rem", overflowY: "auto", maxHeight: "70vh" }}>
-
       {/* loading */}
       {loading && (
         <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 10, padding: "3rem 0", color: "var(--color-text-muted)" }}>
@@ -161,17 +117,7 @@ export function UserDetailModal({ userId, onClose }: UserDetailModalProps) {
       )}
 
       {/* error */}
-          {!loading && error && (
+      {!loading && error && <Alert type="error" message={error} />}
-            <div style={{
-              padding: "1rem 1.25rem",
-              borderRadius: "var(--radius-lg)",
-              background: "#FEF2F2", border: "1px solid #FECACA",
-              fontSize: 13, color: "#991B1B", fontWeight: 500,
-              textAlign: "center",
-            }}>
-              {error}
-            </div>
-          )}
 
       {/* content */}
       {!loading && user && (
@@ -211,31 +157,6 @@ export function UserDetailModal({ userId, onClose }: UserDetailModalProps) {
           )}
         </div>
       )}
-        </div>
+    </Modal>
-
-        {/* ── footer ── */}
-        <div style={{
-          padding: "1rem 1.5rem",
-          borderTop: "1px solid var(--color-border)",
-          background: "var(--color-surface-muted)",
-          display: "flex", justifyContent: "flex-end",
-        }}>
-          <button
-            type="button" onClick={onClose}
-            style={{
-              height: 40, padding: "0 1.5rem",
-              borderRadius: "var(--radius-md)",
-              border: "1px solid var(--color-border)",
-              background: "var(--color-surface)",
-              fontSize: 13, fontWeight: 600,
-              color: "var(--color-text-secondary)",
-              cursor: "pointer", fontFamily: "var(--font-sans)",
-            }}
-          >
-            إغلاق
-          </button>
-        </div>
-      </div>
-    </div>
   );
 }

src/Components/User/UserFormModal.tsx

@@ -1,48 +1,14 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect } from "react";
-import * as yup from "yup";
+import { useForm } from "react-hook-form";
-import { Alert, Spinner } from "../UI";
+import type { Resolver } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Alert, Button, Input, Select } from "../UI";
 import { createUserSchema, updateUserSchema } from "@/src/validations/user.validator";
 import type { Branch } from "@/src/types/branch";
 import type { Role } from "@/src/types/role";
-import type { FormErrors, User, UserFormData } from "@/src/types/user";
+import type { User, UserFormData } from "@/src/types/user";
-
-// ── fixed styles ─────────────────────────────────────────
-const S = {
-  input: {
-    width: "100%", height: 40, padding: "0 0.75rem",
-    borderRadius: "var(--radius-md)",
-    border: "1px solid var(--color-border)",
-    background: "var(--color-surface)",
-    fontSize: 13, color: "var(--color-text-primary)",
-    outline: "none", fontFamily: "var(--font-sans)",
-  } as React.CSSProperties,
-  label: {
-    display: "flex", flexDirection: "column" as const,
-    gap: 6, fontSize: 12, fontWeight: 600,
-    color: "var(--color-text-secondary)",
-  } as React.CSSProperties,
-  errorText: { fontSize: 11, color: "var(--color-danger)", fontWeight: 500 } as React.CSSProperties,
-};
-
-// ── yup validation ────────────────────────────────────────────────────────────
-async function validate(data: UserFormData, isNew: boolean): Promise<FormErrors> {
-  const schema = isNew ? createUserSchema : updateUserSchema;
-  try {
-    await schema.validate(data, { abortEarly: false });
-    return {};
-  } catch (err) {
-    if (err instanceof yup.ValidationError) {
-      return err.inner.reduce<FormErrors>((acc, e) => {
-        const field = e.path as keyof FormErrors;
-        if (field && !acc[field]) acc[field] = e.message;
-        return acc;
-      }, {});
-    }
-    return {};
-  }
-}
 
 // ── Props ─────────────────────────────────────────────────────────────────────
 interface UserFormModalProps {
@@ -57,57 +23,70 @@ interface UserFormModalProps {
 export function UserFormModal({ editUser, roles, branches, onClose, onSubmit }: UserFormModalProps) {
   const isNew = editUser === null;
 
-  const [form, setForm] = useState<UserFormData>({
+  // Custom resolver wrapper — on edit, an empty password field must be
+  // treated as "not provided" (skip the min(8) rule entirely) rather than
+  // validated as an empty string, exactly like the old validate() call did
+  // by stripping `password` from the object before running the schema.
+  const resolver: Resolver<UserFormData> = async (values, context, options) => {
+    const schema = isNew ? createUserSchema : updateUserSchema;
+    const data = !isNew && !values.password ? { ...values, password: undefined } : values;
+    // Cast both the schema argument and yupResolver's own return value — same
+    // fix already applied in TripFormModal/DriverFormModal/CarFormModal:
+    // passing an explicit <UserFormData> generic here forces a structural
+    // comparison between yup's inferred optional-field shape and
+    // UserFormData that fails the same way it did for those forms.
+    return (yupResolver(schema as any) as any)(data as UserFormData, context, options);
+  };
+
+  const {
+    register,
+    handleSubmit,
+    setError,
+    setValue,
+    formState: { errors, isSubmitting },
+  } = useForm<UserFormData>({
+    resolver,
+    defaultValues: {
       name:     editUser?.name        ?? "",
       email:    editUser?.email       ?? "",
       phone:    editUser?.phone       ?? "",
       password: "",
       roleId:   editUser?.role?.id    ?? "",
       branchId: editUser?.branch?.id  ?? "",
+    },
   });
-  const [errors,   setErrors]   = useState<FormErrors>({});
-  const [saving,   setSaving]   = useState(false);
-  const [apiError, setApiError] = useState("");
-  const firstInputRef           = useRef<HTMLInputElement>(null);
 
-  useEffect(() => { firstInputRef.current?.focus(); }, []);
+  // roles/branches are passed in as props rather than fetched inside this
+  // modal (unlike Trip/Driver/Car), but the same timing issue applies if the
+  // parent still has them loading when the modal first mounts: defaultValues
+  // are applied before the matching <option> exists, so the <select>
+  // silently falls back to "". Reapply the saved id once each list actually
+  // contains it.
   useEffect(() => {
-    const handler = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
+    const savedRoleId = editUser?.role?.id;
-    window.addEventListener("keydown", handler);
+    if (savedRoleId && roles.some(r => r.id === savedRoleId)) {
-    return () => window.removeEventListener("keydown", handler);
+      setValue("roleId", savedRoleId);
-  }, [onClose]);
+    }
+  }, [roles, editUser, setValue]);
 
-  const set = (field: keyof UserFormData) =>
+  useEffect(() => {
-    (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    const savedBranchId = editUser?.branch?.id;
-      setForm(p => ({ ...p, [field]: e.target.value }));
+    if (savedBranchId && branches.some(b => b.id === savedBranchId)) {
-      // clear field error on change
+      setValue("branchId", savedBranchId);
-      if (errors[field]) setErrors(p => ({ ...p, [field]: undefined }));
+    }
-    };
+  }, [branches, editUser, setValue]);
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const submitHandler = async (data: UserFormData) => {
-    e.preventDefault();
+    const payload: Partial<UserFormData> = { ...data };
-    const errs = await validate(
-      !isNew && !form.password
-        ? { ...form, password: undefined as unknown as string }
-        : form,
-      isNew,
-    );
-    if (Object.keys(errs).length) { setErrors(errs); return; }
-    setSaving(true);
-    setApiError("");
-    const payload: Partial<UserFormData> = { ...form };
     if (!isNew && !payload.password) delete payload.password;
-    const ok = await onSubmit(payload as UserFormData, isNew);
-    setSaving(false);
-    if (ok) onClose();
-    else setApiError("حدث خطأ غير متوقع. يرجى المحاولة لاحقاً.");
-  };
 
-  // dynamic styles for inputs with errors
+    const ok = await onSubmit(payload as UserFormData, isNew);
-  const inputStyle = (field: keyof FormErrors): React.CSSProperties => ({
+    if (ok) {
-    ...S.input,
+      onClose();
-    ...(errors[field] ? { borderColor: "var(--color-danger)", background: "#FEF2F2" } : {}),
+    } else {
-  });
+      setError("name", { message: "حدث خطأ غير متوقع. يرجى المحاولة لاحقاً." });
+    }
+  };
 
   return (
     <div
@@ -145,75 +124,97 @@ export function UserFormModal({ editUser, roles, branches, onClose, onSubmit }:
               {isNew ? "مستخدم جديد" : editUser?.name}
             </h2>
           </div>
-          <button type="button" onClick={onClose} aria-label="إغلاق"
+          <Button
-            style={{ width: 34, height: 34, borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", cursor: "pointer", fontSize: 18, color: "var(--color-text-muted)", display: "flex", alignItems: "center", justifyContent: "center" }}>
+            type="button"
+            variant="secondary"
+            onClick={onClose}
+            aria-label="إغلاق"
+            style={{ width: 34, height: 34, padding: 0, fontSize: 18 }}
+          >
             ×
-          </button>
+          </Button>
         </div>
 
         {/* body */}
-        <form onSubmit={handleSubmit} noValidate style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
+        <form onSubmit={handleSubmit(submitHandler)} noValidate style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
-          {apiError && <Alert type="error" message={apiError} onClose={() => setApiError("")} />}
+          {errors.name?.type === "manual" && (
+            <Alert type="error" message={errors.name.message ?? ""} onClose={() => {}} />
+          )}
 
           {/* name */}
-          <label style={S.label}>
+          <Input
-            الاسم الكامل *
+            label="الاسم الكامل *"
-            <input ref={firstInputRef} style={inputStyle("name")} value={form.name} onChange={set("name")} placeholder="أحمد الرشيدي" autoComplete="name" dir="rtl" />
+            {...register("name")}
-            {errors.name && <span style={S.errorText}>{errors.name}</span>}
+            error={errors.name && errors.name.type !== "manual" ? errors.name.message : undefined}
-          </label>
+            placeholder="أحمد الرشيدي"
+            autoComplete="name"
+            autoFocus
+            dir="rtl"
+          />
 
           {/* email + phone */}
           <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
-            <label style={S.label}>
+            <Input
-              البريد الإلكتروني
+              label="البريد الإلكتروني"
-              <input style={inputStyle("email")} type="email" value={form.email} onChange={set("email")} placeholder="ahmed@co.sa" autoComplete="email" dir="ltr" />
+              type="email"
-              {errors.email && <span style={S.errorText}>{errors.email}</span>}
+              {...register("email")}
-            </label>
+              error={errors.email?.message}
-            <label style={S.label}>
+              placeholder="ahmed@co.sa"
-              رقم الهاتف *
+              autoComplete="email"
-              <input style={inputStyle("phone")} type="tel" value={form.phone} onChange={set("phone")} placeholder="+966 5x xxx xxxx" autoComplete="tel" dir="ltr" />
+              dir="ltr"
-              {errors.phone && <span style={S.errorText}>{errors.phone}</span>}
+            />
-            </label>
+            <Input
+              label="رقم الهاتف *"
+              type="tel"
+              {...register("phone")}
+              error={errors.phone?.message}
+              placeholder="+966 5x xxx xxxx"
+              autoComplete="tel"
+              dir="ltr"
+            />
           </div>
 
           {/* password */}
-          <label style={S.label}>
+          <Input
-            {isNew ? "كلمة المرور *" : "كلمة المرور الجديدة (اتركها فارغة إذا لا تريد تغييرها)"}
+            label={isNew ? "كلمة المرور *" : "كلمة المرور الجديدة (اتركها فارغة إذا لا تريد تغييرها)"}
-            <input style={inputStyle("password")} type="password" value={form.password} onChange={set("password")} placeholder="••••••••" autoComplete={isNew ? "new-password" : "off"} dir="ltr" />
+            type="password"
-            {errors.password && <span style={S.errorText}>{errors.password}</span>}
+            {...register("password")}
-          </label>
+            error={errors.password?.message}
+            placeholder="••••••••"
+            autoComplete={isNew ? "new-password" : "off"}
+            dir="ltr"
+          />
 
           {/* role + branch */}
           <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
-            <label style={S.label}>
+            <Select
-              الدور *
+              label="الدور *"
-              <select style={{ ...inputStyle("roleId"), cursor: "pointer" }} value={form.roleId} onChange={set("roleId")} dir="rtl">
+              {...register("roleId")}
+              error={errors.roleId?.message}
+              dir="rtl"
+            >
               <option value="">اختر الدور</option>
               {roles.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}
-              </select>
+            </Select>
-              {errors.roleId && <span style={S.errorText}>{errors.roleId}</span>}
+            <Select
-            </label>
+              label="الفرع *"
-            <label style={S.label}>
+              {...register("branchId")}
-              الفرع *
+              error={errors.branchId?.message}
-              <select style={{ ...inputStyle("branchId"), cursor: "pointer" }} value={form.branchId} onChange={set("branchId")} dir="rtl">
+              dir="rtl"
+            >
               <option value="">اختر الفرع</option>
               {branches.map(b => <option key={b.id} value={b.id}>{b.name}</option>)}
-              </select>
+            </Select>
-              {errors.branchId && <span style={S.errorText}>{errors.branchId}</span>}
-            </label>
           </div>
 
           {/* actions */}
           <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end", paddingTop: "0.5rem" }}>
-            <button type="button" onClick={onClose} disabled={saving}
+            <Button type="button" variant="secondary" onClick={onClose} disabled={isSubmitting}>
-              style={{ height: 40, padding: "0 1.25rem", borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", fontSize: 13, fontWeight: 600, color: "var(--color-text-secondary)", cursor: saving ? "not-allowed" : "pointer", fontFamily: "var(--font-sans)" }}>
               إلغاء
-            </button>
+            </Button>
-            <button type="submit" disabled={saving}
+            <Button type="submit" variant="primary" loading={isSubmitting}>
-              style={{ height: 40, padding: "0 1.5rem", borderRadius: "var(--radius-md)", border: "none", background: saving ? "var(--color-brand-400)" : "var(--color-brand-600)", fontSize: 13, fontWeight: 700, color: "#FFF", cursor: saving ? "not-allowed" : "pointer", display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--font-sans)" }}>
+              {isSubmitting ? "جارٍ الحفظ…" : isNew ? "إضافة المستخدم" : "حفظ التغييرات"}
-              {saving && <Spinner size="sm" className="text-white" />}
+            </Button>
-              {saving ? "جارٍ الحفظ…" : isNew ? "إضافة المستخدم" : "حفظ التغييرات"}
-            </button>
           </div>
         </form>
       </div>

src/Components/User/UserTable.tsx

@@ -1,51 +1,31 @@
 "use client";
 
-import { 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";
 
-// ── role badge ───────────────────────────────────────────────────────────────
-function RoleBadge({ name }: { name?: string }) {
-  const isAdmin = name === "مدير النظام";
-  return (
-    <span style={{ display: "inline-flex", alignItems: "center", borderRadius: "var(--radius-full)", border: isAdmin ? "1px solid #BFDBFE" : "1px solid var(--color-border)", background: isAdmin ? "#EFF6FF" : "var(--color-surface-muted)", padding: "0.2rem 0.625rem", fontSize: 11, fontWeight: 600, color: isAdmin ? "#1D4ED8" : "var(--color-text-muted)" }}>
-      {name ?? "—"}
-    </span>
-  );
-}
-
-// ── status badge ─────────────────────────────────────────────────────────────
 function StatusBadge({ active }: { active: boolean }) {
   return (
-    <span style={{ display: "inline-flex", alignItems: "center", gap: 5, borderRadius: "var(--radius-full)", border: active ? "1px solid #BBF7D0" : "1px solid #FECACA", background: active ? "#DCFCE7" : "#FEF2F2", padding: "0.2rem 0.625rem", fontSize: 11, fontWeight: 600, color: active ? "#166534" : "#991B1B" }}>
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 5,
+        borderRadius: "var(--radius-full)",
+        border: active ? "1px solid #BBF7D0" : "1px solid #FECACA",
+        background: active ? "#DCFCE7" : "#FEF2F2",
+        padding: "0.2rem 0.625rem",
+        fontSize: 11,
+        fontWeight: 600,
+        color: active ? "#166534" : "#991B1B",
+      }}
+    >
       <span style={{ width: 6, height: 6, borderRadius: "50%", background: active ? "#16A34A" : "#DC2626" }} />
-      {active ? "نشط" : "معطل"}
+      {active ? "Active" : "Disabled"}
     </span>
   );
 }
 
-// ── icon button ──────────────────────────────────────────────────────────────
-function IconBtn({ onClick, title, color, bg, borderColor, children }: { onClick: () => void; title: string; color: string; bg: string; borderColor: string; children: React.ReactNode }) {
-  return (
-    <button type="button" title={title} aria-label={title} onClick={e => { e.stopPropagation(); onClick(); }}
-      style={{ width: 32, height: 32, borderRadius: "var(--radius-md)", border: `1px solid ${borderColor}`, background: bg, color, cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center", transition: "opacity 150ms" }}>
-      {children}
-    </button>
-  );
-}
-
-// ── card / header styles ─────────────────────────────────────────────────────
-const cardStyle: React.CSSProperties = {
-  borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)",
-  background: "var(--color-surface)", overflow: "hidden", boxShadow: "var(--shadow-card)",
-};
-const thStyle: React.CSSProperties = {
-  padding: "0.75rem 1.5rem", fontSize: 11, fontWeight: 700,
-  textTransform: "uppercase", letterSpacing: "0.2em",
-  color: "var(--color-text-muted)", background: "var(--color-surface-muted)",
-  borderBottom: "1px solid var(--color-border)",
-};
-
-// ── Props ────────────────────────────────────────────────────────────────────
 interface UserTableProps {
   users: User[];
   loading: boolean;
@@ -59,109 +39,77 @@ interface UserTableProps {
   onPageChange: (p: number) => void;
 }
 
-// ── main table ───────────────────────────────────────────────────────────────
+export function UserTable({
-export function UserTable({ users, loading, search, page, pages, onEdit, onDelete, onView, onAddFirst, onPageChange }: UserTableProps) {
+  users, loading, search, page, pages,
-  return (
+  onEdit, onDelete, onView, onAddFirst, onPageChange,
-    <div style={cardStyle}>
+}: UserTableProps) {
-      {/* column headers */}
+  const columns: TableColumn<User>[] = [
-      <div dir="rtl" style={{ display: "grid", gridTemplateColumns: "2fr 1.5fr 1.5fr 1fr 1fr 1fr 100px", ...thStyle }}>
+    {
-        <span>الاسم</span>
+      key: "name",
-        <span>اسم المستخدم</span>
+      header: "الاسم",
-        <span>الفرع</span>
+      width: "2fr",
-        <span>الدور</span>
+      render: (u) => (
-        <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 */
-        <div style={{ textAlign: "center", padding: "4rem 1rem" }}>
-          <p style={{ fontSize: 13, color: "var(--color-text-muted)" }}>
-            {search ? `لا توجد نتائج لـ "${search}"` : "لا يوجد مستخدمون لعرضهم."}
-          </p>
-          {!search && (
-            <button type="button" onClick={onAddFirst}
-              style={{ marginTop: 12, fontSize: 13, fontWeight: 600, color: "var(--color-brand-600)", background: "none", border: "none", cursor: "pointer", textDecoration: "underline" }}>
-              أضف أول مستخدم
-            </button>
-          )}
-        </div>
-      ) : (
-        /* data rows */
-        <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
-          {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>
+          <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>
+    },
-              <RoleBadge name={u.role?.name} />
+    {
-              <StatusBadge active={u.isActive} />
+      key: "userName",
-              <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
+      header: "اسم المستخدم",
-                {new Date(u.createdAt).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" })}
+      width: "1.5fr",
+      render: (u) => (
+        <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "#2563EB", fontWeight: 600 }}>
+          {u.userName ?? "—"}
         </span>
-              <div style={{ display: "flex", justifyContent: "center", gap: 4 }}>
+      ),
-                {/* view */}
+    },
-                <IconBtn title={`عرض ${u.name}`} color="#059669" bg="#ECFDF5" borderColor="#A7F3D0" onClick={() => onView(u)}>
+    { key: "branch", header: "الفرع", width: "1.5fr", render: (u) => u.branch?.name ?? "—" },
-                  <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" />
+      key: "role",
-                    <circle cx="12" cy="12" r="3" />
+      header: "الدور",
-                  </svg>
+      width: "1fr",
-                </IconBtn>
+      render: (u) => <Badge label={u.role?.name ?? "—"} color={u.role?.name === "System Admin" ? "indigo" : "slate"} />,
-                {/* edit */}
+    },
-                <IconBtn title={`تعديل ${u.name}`} color="#1D4ED8" bg="#EFF6FF" borderColor="#BFDBFE" onClick={() => onEdit(u)}>
+    { key: "status", header: "الحالة", width: "1fr", render: (u) => <StatusBadge active={u.isActive} /> },
-                  <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" />
+      key: "createdAt",
-                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+      header: "تم الانشاء",
-                  </svg>
+      width: "1fr",
-                </IconBtn>
+      align: "center",
-                {/* delete */}
+      render: (u) => new Date(u.createdAt).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" }),
-                <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 */}
+  return (
-      {pages > 1 && (
+    <ReusableTable
-        <div dir="rtl" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", borderTop: "1px solid var(--color-border)", padding: "0.875rem 1.5rem" }}>
+      columns={columns}
-          <span style={{ fontSize: 12, color: "var(--color-text-muted)" }}>
+      data={users}
-            صفحة <strong style={{ color: "var(--color-text-primary)" }}>{page}</strong> من <strong style={{ color: "var(--color-text-primary)" }}>{pages}</strong>
+      loading={loading}
-          </span>
+      search={search}
-          <div style={{ display: "flex", gap: "0.5rem" }}>
+      page={page}
-            {[
+      pages={pages}
-              { label: "السابق", action: () => onPageChange(Math.max(1, page - 1)),     disabled: page === 1     },
+      onPageChange={onPageChange}
-              { label: "التالي", action: () => onPageChange(Math.min(pages, page + 1)), disabled: page === pages },
+      emptyIcon="👥"
-            ].map(btn => (
+      emptyDescription={!search ? "No users to display." : undefined}
-              <button key={btn.label} type="button" onClick={btn.action} disabled={btn.disabled}
+      emptyAction={
-                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)" }}>
+        !search && (
-                {btn.label}
+          <Button type="button" variant="ghost" size="sm" onClick={onAddFirst}>
-              </button>
+            Add first user
-            ))}
+          </Button>
-          </div>
+        )
-        </div>
+      }
+      renderActions={(u) => (
+        <ActionButtons
+          itemLabel={u.name}
+          onView={() => onView(u)}
+          onEdit={() => onEdit(u)}
+          onDelete={() => onDelete(u)}
+        />
       )}
-    </div>
+    />
   );
 }

src/Components/User/archive/Archiveduserdetailmodal.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { Spinner } from "../../UI";
+import { Alert, Button, Modal, Spinner } from "../../UI";
 import { getStoredToken } from "@/src/lib/auth";
 import { archivedUserService } from "@/src/services/archive/archivedUser.service";
 import type { ArchivedUser } from "@/src/types/user";
@@ -12,6 +12,8 @@ interface ArchivedUserDetailModalProps {
 }
 
 // ── small helper components ───────────────────────────────────────────────────
+// (No equivalents in the shared UI kit — DetailRow/StatusBadge/Avatar are
+// purpose-built layouts, not generic form/action controls, so they stay custom.)
 function DetailRow({ label, value }: { label: string; value?: string | null }) {
   return (
     <div style={{
@@ -29,6 +31,9 @@ function DetailRow({ label, value }: { label: string; value?: string | null }) {
   );
 }
 
+// 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 status
+// chip's design.
 function StatusBadge({ active }: { active: boolean }) {
   return (
     <span style={{
@@ -68,15 +73,8 @@ export function ArchivedUserDetailModal({ userId, onClose }: ArchivedUserDetailM
   const [loading, setLoading] = useState(true);
   const [error,   setError]   = useState<string | null>(null);
 
-  // close on Escape
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
-    window.addEventListener("keydown", handler);
-    return () => window.removeEventListener("keydown", handler);
-  }, [onClose]);
-
   // fetch archived user details on mount
-useEffect(() => {
+  useEffect(() => {
     let cancelled = false;
     (async () => {
       try {
@@ -90,7 +88,7 @@ useEffect(() => {
       }
     })();
     return () => { cancelled = true; };
-}, [userId]);
+  }, [userId]);
 
   // ── helpers ───────────────────────────────────────────────────────────────
   const fmt = (iso?: string | null) =>
@@ -98,60 +96,19 @@ useEffect(() => {
 
   // ── render ────────────────────────────────────────────────────────────────
   return (
-    <div
+    <Modal
-      role="dialog" aria-modal="true" aria-labelledby="archived-detail-title"
+      open
-      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
+      title={user?.name ?? "عرض المستخدم"}
-      style={{
+      subtitle="مستخدم مؤرشف"
-        position: "fixed", inset: 0, zIndex: 55,
+      onClose={onClose}
-        background: "rgba(15,23,42,0.55)", backdropFilter: "blur(4px)",
+      size="md"
-        display: "flex", alignItems: "center", justifyContent: "center", padding: "1rem",
+      zIndex={60}
-      }}
+      footer={
+        <Button type="button" variant="secondary" onClick={onClose}>
+          إغلاق
+        </Button>
+      }
     >
-      <div
-        onClick={e => e.stopPropagation()}
-        style={{
-          width: "100%", maxWidth: 480,
-          background: "var(--color-surface)",
-          borderRadius: "var(--radius-2xl)",
-          border: "1px solid var(--color-border)",
-          boxShadow: "0 24px 64px rgba(0,0,0,.18)",
-          overflow: "hidden",
-          display: "flex", flexDirection: "column",
-        }}
-      >
-        {/* ── header ── */}
-        <div style={{
-          display: "flex", alignItems: "center", justifyContent: "space-between",
-          padding: "1.25rem 1.5rem",
-          borderBottom: "1px solid var(--color-border)",
-          background: "var(--color-surface-muted)",
-        }}>
-          <div>
-            <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#EA580C", fontWeight: 600, margin: 0 }}>
-              مستخدم مؤرشف
-            </p>
-            <h2 id="archived-detail-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
-              {user?.name ?? "عرض المستخدم"}
-            </h2>
-          </div>
-          <button
-            type="button" onClick={onClose} aria-label="إغلاق"
-            style={{
-              width: 34, height: 34, borderRadius: "var(--radius-md)",
-              border: "1px solid var(--color-border)",
-              background: "var(--color-surface)",
-              cursor: "pointer", fontSize: 18,
-              color: "var(--color-text-muted)",
-              display: "flex", alignItems: "center", justifyContent: "center",
-            }}
-          >
-            ×
-          </button>
-        </div>
-
-        {/* ── body ── */}
-        <div style={{ padding: "1.5rem", overflowY: "auto", maxHeight: "70vh" }}>
-
       {/* loading */}
       {loading && (
         <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 10, padding: "3rem 0", color: "var(--color-text-muted)" }}>
@@ -161,17 +118,7 @@ useEffect(() => {
       )}
 
       {/* error */}
-          {!loading && error && (
+      {!loading && error && <Alert type="error" message={error} />}
-            <div style={{
-              padding: "1rem 1.25rem",
-              borderRadius: "var(--radius-lg)",
-              background: "#FEF2F2", border: "1px solid #FECACA",
-              fontSize: 13, color: "#991B1B", fontWeight: 500,
-              textAlign: "center",
-            }}>
-              {error}
-            </div>
-          )}
 
       {/* content */}
       {!loading && user && (
@@ -205,31 +152,6 @@ useEffect(() => {
           <DetailRow label="آخر تحديث"          value={fmt(user.updatedAt)} />
         </div>
       )}
-        </div>
+    </Modal>
-
-        {/* ── footer ── */}
-        <div style={{
-          padding: "1rem 1.5rem",
-          borderTop: "1px solid var(--color-border)",
-          background: "var(--color-surface-muted)",
-          display: "flex", justifyContent: "flex-end",
-        }}>
-          <button
-            type="button" onClick={onClose}
-            style={{
-              height: 40, padding: "0 1.5rem",
-              borderRadius: "var(--radius-md)",
-              border: "1px solid var(--color-border)",
-              background: "var(--color-surface)",
-              fontSize: 13, fontWeight: 600,
-              color: "var(--color-text-secondary)",
-              cursor: "pointer", fontFamily: "var(--font-sans)",
-            }}
-          >
-            إغلاق
-          </button>
-        </div>
-      </div>
-    </div>
   );
 }