make header one in all page

app/dashboard/audit/page.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useReducer, useState } from "react";
 import { Alert, Spinner } from "@/src/Components/UI";
 import { getStoredToken } from "@/src/lib/auth";
 import { get } from "@/src/services/api";
+import Header from "@/src/Components/UI/Header";
 
 // ── Types ──────────────────────────────────────────────────────────────────
 
@@ -38,17 +39,31 @@ type Action =
 
 function reducer(s: State, a: Action): State {
   switch (a.type) {
-    case "LOAD_START": return { ...s, loading: true, error: null };
+    case "LOAD_START":
-    case "LOAD_OK":    return { ...s, loading: false, logs: a.logs, total: a.total, pages: a.pages };
+      return { ...s, loading: true, error: null };
-    case "LOAD_ERR":   return { ...s, loading: false, error: a.error };
+    case "LOAD_OK":
-    case "CLEAR_ERR":  return { ...s, error: null };
+      return {
-    default:           return s;
+        ...s,
+        loading: false,
+        logs: a.logs,
+        total: a.total,
+        pages: a.pages,
+      };
+    case "LOAD_ERR":
+      return { ...s, loading: false, error: a.error };
+    case "CLEAR_ERR":
+      return { ...s, error: null };
+    default:
+      return s;
   }
 }
 
 // ── Action badge ───────────────────────────────────────────────────────────
 
-const ACTION_COLORS: Record<string, { bg: string; color: string; border: string }> = {
+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" },
@@ -58,15 +73,24 @@ const ACTION_COLORS: Record<string, { bg: string; color: string; border: string
 
 function ActionBadge({ action }: { action: string }) {
   const upper = action?.toUpperCase() ?? "";
-  const key = Object.keys(ACTION_COLORS).find(k => upper.includes(k)) ?? "CREATE";
+  const key =
+    Object.keys(ACTION_COLORS).find((k) => upper.includes(k)) ?? "CREATE";
   const cfg = ACTION_COLORS[key];
   return (
-    <span style={{
+    <span
-      display: "inline-flex", alignItems: "center",
+      style={{
-      borderRadius: "var(--radius-full)", border: `1px solid ${cfg.border}`,
+        display: "inline-flex",
-      background: cfg.bg, padding: "0.2rem 0.625rem",
+        alignItems: "center",
-      fontSize: 11, fontWeight: 700, color: cfg.color, whiteSpace: "nowrap",
+        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>
   );
@@ -76,7 +100,11 @@ function ActionBadge({ action }: { action: string }) {
 
 export default function AuditPage() {
   const [state, dispatch] = useReducer(reducer, {
-    logs: [], loading: true, total: 0, pages: 1, error: null,
+    logs: [],
+    loading: true,
+    total: 0,
+    pages: 1,
+    error: null,
   });
   const [page, setPage] = useState(1);
   const [search, setSearch] = useState("");
@@ -90,9 +118,21 @@ export default function AuditPage() {
       if (q) params.set("search", q);
       if (mod) params.set("module", mod);
       const res = await get<{
-        data: { data: AuditLog[]; meta?: { total: number; pages: number }; pagination?: { total: number; pages: number } };
+        data: {
+          data: AuditLog[];
+          meta?: { total: number; pages: number };
+          pagination?: { total: number; pages: number };
+        };
       }>(`audit?${params}`, token);
-      const payload = (res as unknown as { data: { data: AuditLog[]; meta?: { total: number; pages: number }; pagination?: { total: number; pages: number } } }).data;
+      const payload = (
+        res as unknown as {
+          data: {
+            data: AuditLog[];
+            meta?: { total: number; pages: number };
+            pagination?: { total: number; pages: number };
+          };
+        }
+      ).data;
       dispatch({
         type: "LOAD_OK",
         logs: payload.data ?? [],
@@ -100,59 +140,72 @@ export default function AuditPage() {
         pages: payload.meta?.pages ?? payload.pagination?.pages ?? 1,
       });
     } catch {
-      dispatch({ type: "LOAD_ERR", error: "تعذّر تحميل سجل التدقيق. يرجى المحاولة مجدداً." });
+      dispatch({
+        type: "LOAD_ERR",
+        error: "تعذّر تحميل سجل التدقيق. يرجى المحاولة مجدداً.",
+      });
     }
   }, []);
 
-  useEffect(() => { loadLogs(page, search, module); }, [page, search, module, loadLogs]);
+  useEffect(() => {
+    loadLogs(page, search, module);
+  }, [page, search, module, loadLogs]);
 
   const cardStyle: React.CSSProperties = {
-    borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)",
+    borderRadius: "var(--radius-xl)",
-    background: "var(--color-surface)", overflow: "hidden", boxShadow: "var(--shadow-card)",
+    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,
+    padding: "0.75rem 1.5rem",
-    textTransform: "uppercase", letterSpacing: "0.2em",
+    fontSize: 11,
-    color: "var(--color-text-muted)", background: "var(--color-surface-muted)",
+    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" }}>
+    <section
-
+      style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}
+    >
       {/* Header */}
-      <header style={{ borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)", background: "var(--color-surface)", padding: "1.5rem 2rem", boxShadow: "var(--shadow-card)" }}>
+      <Header
-        <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600 }}>
+        state={state}
-          الامتثال والمراجعة
+        search={search}
-        </p>
+        setSearch={setSearch}
-        <div className="mt-3 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+        module={module}
-          <div>
+        setModule={setModule}
-            <h1 style={{ fontSize: "1.5rem", fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>سجل التدقيق</h1>
+        setPage={setPage}
-            <p style={{ marginTop: "0.25rem", fontSize: 13, color: "var(--color-text-muted)" }}>
+        title={"الامتثال والمراجعة"}
-              إجمالي <strong style={{ color: "var(--color-text-primary)" }}>{state.total}</strong> سجل
+        mainTitle={"سجل التدقيق"}
-            </p>
+        name = {"سجل"}
-          </div>
+        isAudit={true}
-          <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap", alignItems: "center" }}>
+      />
-            <input type="text" placeholder="بحث بالإجراء أو المستخدم…" value={search}
-              onChange={e => { setSearch(e.target.value); setPage(1); }} dir="rtl"
-              style={{ width: 220, height: 40, padding: "0 0.75rem", borderRadius: "var(--radius-lg)", border: "1px solid var(--color-border)", background: "var(--color-surface)", fontSize: 13, color: "var(--color-text-primary)", outline: "none", fontFamily: "var(--font-sans)" }} />
-            <select value={module} onChange={e => { setModule(e.target.value); setPage(1); }} dir="rtl"
-              style={{ height: 40, padding: "0 0.75rem", borderRadius: "var(--radius-lg)", border: "1px solid var(--color-border)", background: "var(--color-surface)", fontSize: 13, color: "var(--color-text-secondary)", outline: "none", fontFamily: "var(--font-sans)" }}>
-              <option value="">كل الوحدات</option>
-              {["User","Driver","Car","Trip","Order","Client","Role","Branch"].map(m => (
-                <option key={m} value={m}>{m}</option>
-              ))}
-            </select>
-          </div>
-        </div>
-      </header>
 
-      {state.error && <Alert type="error" message={state.error} onClose={() => dispatch({ type: "CLEAR_ERR" })} />}
+      {state.error && (
+        <Alert
+          type="error"
+          message={state.error}
+          onClose={() => dispatch({ type: "CLEAR_ERR" })}
+        />
+      )}
 
       {/* Table */}
       <div style={cardStyle}>
-        <div dir="rtl" style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1.5fr 1fr", ...thStyle }}>
+        <div
+          dir="rtl"
+          style={{
+            display: "grid",
+            gridTemplateColumns: "1.5fr 1fr 1fr 1.5fr 1fr",
+            ...thStyle,
+          }}
+        >
           <span>الإجراء</span>
           <span>الوحدة</span>
           <span>المستخدم</span>
@@ -161,37 +214,88 @@ export default function AuditPage() {
         </div>
 
         {state.loading ? (
-          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, padding: "4rem 0", color: "var(--color-text-muted)" }}>
+          <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
+            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={{
+              <li
-                display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1.5fr 1fr",
+                key={log.id}
-                alignItems: "center", gap: "0.5rem", padding: "0.875rem 1.5rem",
+                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",
+                  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)" }}>
+                    <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)" }}>
-                <span style={{ color: "var(--color-text-secondary)" }}>{log.userName ?? log.userId ?? "—"}</span>
+                  {log.module ?? "—"}
-                <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--color-text-muted)" }}>{log.ipAddress ?? "—"}</span>
+                </span>
-                <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
+                <span style={{ color: "var(--color-text-secondary)" }}>
-                  {new Date(log.createdAt).toLocaleString("ar-SA", { dateStyle: "short", timeStyle: "short" })}
+                  {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>
             ))}
@@ -199,17 +303,55 @@ export default function AuditPage() {
         )}
 
         {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" }}>
+          <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>
+              صفحة{" "}
+              <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 },
+                  label: "السابق",
-              ].map(btn => (
+                  action: () => setPage((p) => Math.max(1, p - 1)),
-                <button key={btn.label} onClick={btn.action} disabled={btn.disabled}
+                  disabled: page === 1,
-                  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)" }}>
+                },
+                {
+                  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>
               ))}

app/dashboard/branches/page.tsx

@@ -6,6 +6,7 @@ import { BranchDetailModal, BranchTable ,BranchFormModal }   from "@/src/Compone
 import { useBranches }         from "@/src/hooks/useBranch";
 import type { Branch, BranchFormData } from "@/src/types/branch";
 import { ArchivedBranchesModal } from "@/src/Components/Branch/archive/ArchivedBranchesModal";
+import Header from "@/src/Components/UI/Header";
 
 
 export default function BranchesPage() {
@@ -88,79 +89,19 @@ export default function BranchesPage() {
       <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
 
         {/* ── Page header ── */}
-        <header style={{
+        <Header
-          borderRadius: "var(--radius-xl)",
+          state={{ total }}
-          border: "1px solid var(--color-border)",
+          search={search}
-          background: "var(--color-surface)",
+          setSearch={handleSearch}
-          padding: "1.5rem 2rem",
+          module=""
-          boxShadow: "var(--shadow-card)",
+          setModule={() => {}}
-        }}>
+          title="الفروع"
-          <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600 }}>
+          mainTitle="إدارة الفروع"
-            إدارة الفروع
+          setPage={setPage}
-          </p>
+          name={"فرع"}
-          <div className="mt-3 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+          isAudit={false}
-            <div>
+          onAdd={() => setFormTarget(null)}
-              <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 input */}
-              <div style={{ position: "relative", width: 256 }}>
-                <svg style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", width: 16, height: 16, color: "var(--color-text-hint)", pointerEvents: "none" }}
-                  fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
-                  <circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" />
-                </svg>
-                <input
-                  type="text"
-                  placeholder="بحث بالاسم أو المدينة..."
-                  value={search}
-                  onChange={e => handleSearch(e.target.value)}
-                  dir="rtl"
-                  style={{
-                    width: "100%", height: 40,
-                    paddingRight: 36, paddingLeft: 12,
-                    borderRadius: "var(--radius-lg)",
-                    border: "1px solid var(--color-border)",
-                    background: "var(--color-surface)",
-                    fontSize: 13, outline: "none",
-                    fontFamily: "var(--font-sans)",
-                    color: "var(--color-text-primary)",
-                  }}
         />
-              </div>
-
-              {/* Add branch 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",
-                }}
-              >
-                <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>
-            </div>
-          </div>
-        </header>
 
         {/* General load error */}
         {error && <Alert type="error" message={error} onClose={clearError} />}

app/dashboard/cars/page.tsx

@@ -11,6 +11,7 @@ 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 ─────────────────────────────────────────────────────────────────────
 
@@ -308,76 +309,7 @@ export default function CarsPage() {
       <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }} dir="rtl">
 
         {/* ── Header ── */}
-        <header style={{
+        <Header state={{ total }} search={search} setSearch={setSearch} module="" setModule={() => {}} setPage={setPage} title="المركبات" mainTitle="إدارة المركبات" name="مركبة" isAudit={false} onAdd={() => setFormTarget(null)}/>
-          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 }}>
-                <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) => { 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",
-                }}
-              >
-                <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>
-            </div>
-          </div>
-        </header>
-
         {/* Error alert */}
         {error && <Alert type="error" message={error} onClose={() => setError(null)} />}
 

app/dashboard/clients/page.tsx

@@ -13,6 +13,7 @@ import { useClients }         from "@/src/hooks/useClients";
 import type { Client, ClientFormData } from "@/src/types/client";
 import { ClientFormModal , ClientTable }    from "@/src/Components/Client";
 import { ArchivedClientsModal } from "@/src/Components/Client/archive/ArchivedClientsModal";
+import Header from "@/src/Components/UI/Header";
 
 
 export default function ClientsPage() {
@@ -97,142 +98,19 @@ export default function ClientsPage() {
       <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
 
         {/* ── Page header ── */}
-        <header
+        <Header
-          style={{
+          state={{ total }}
-            borderRadius: "var(--radius-xl)",
+          search={search}
-            border: "1px solid var(--color-border)",
+          setSearch={handleSearch}
-            background: "var(--color-surface)",
+          module=""
-            padding: "1.5rem 2rem",
+          setModule={() => {}}
-            boxShadow: "var(--shadow-card)",
+          title="العملاء"
-          }}
+          mainTitle="إدارة العملاء"
-        >
+          setPage={setPage}
-          <p
+          name={"عميل"}
-            style={{
+          isAudit={false}
-              fontSize: 11,
+          onAdd={() => setFormTarget(null)}
-              letterSpacing: "0.3em",
-              textTransform: "uppercase",
-              color: "#2563EB",
-              fontWeight: 600,
-            }}
-          >
-            إدارة العملاء
-          </p>
-          <div className="mt-3 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-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 input */}
-              <div style={{ position: "relative", width: 256 }}>
-                <svg
-                  style={{
-                    position: "absolute",
-                    right: 12,
-                    top: "50%",
-                    transform: "translateY(-50%)",
-                    width: 16,
-                    height: 16,
-                    color: "var(--color-text-hint)",
-                    pointerEvents: "none",
-                  }}
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  viewBox="0 0 24 24"
-                >
-                  <circle cx="11" cy="11" r="8" />
-                  <path d="m21 21-4.35-4.35" />
-                </svg>
-                <input
-                  type="text"
-                  placeholder="بحث بالاسم أو الهاتف أو البريد…"
-                  value={search}
-                  onChange={(e) => handleSearch(e.target.value)}
-                  dir="rtl"
-                  style={{
-                    width: "100%",
-                    height: 40,
-                    paddingRight: 36,
-                    paddingLeft: 12,
-                    borderRadius: "var(--radius-lg)",
-                    border: "1px solid var(--color-border)",
-                    background: "var(--color-surface)",
-                    fontSize: 13,
-                    outline: "none",
-                    fontFamily: "var(--font-sans)",
-                    color: "var(--color-text-primary)",
-                  }}
         />
-              </div>
-
-              {/* Add client 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",
-                }}
-              >
-                <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>
-            </div>
-          </div>
-        </header>
 
         {/* General load error */}
         {error && <Alert type="error" message={error} onClose={clearError} />}

app/dashboard/drivers/page.tsx

@@ -1,18 +1,31 @@
 "use client";
 
 import { useState, useCallback } from "react";
-import { Alert, Spinner, ArchiveButton, ConfirmDialog } from "@/src/Components/UI";
+import {
+  Alert,
+  Spinner,
+  ArchiveButton,
+  ConfirmDialog,
+} from "@/src/Components/UI";
 import { ArchivedDrivers } from "@/src/Components/Driver/archive/ArchivedDrivers";
 import { useDrivers } from "@/src/hooks/useDriver";
-import { CreateDriverPayload, Driver, DRIVER_STATUS_MAP, UpdateDriverPayload } from "@/src/types/driver";
+import {
-import { DriverDetailPanel, DriverFormModal , } from "@/src/Components/Driver";
+  CreateDriverPayload,
+  Driver,
+  DRIVER_STATUS_MAP,
+  UpdateDriverPayload,
+} from "@/src/types/driver";
+import { DriverDetailPanel, DriverFormModal } from "@/src/Components/Driver";
+import Header from "@/src/Components/UI/Header";
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
 function fmtDate(iso?: string | null): string {
   if (!iso) return "—";
   return new Date(iso).toLocaleDateString("ar-SA", {
-    year: "numeric", month: "short", day: "numeric",
+    year: "numeric",
+    month: "short",
+    day: "numeric",
   });
 }
 
@@ -60,9 +73,19 @@ const iconBtnBase: React.CSSProperties = {
 
 export default function DriversPage() {
   const {
-    drivers, loading, error, total, pages, page,
+    drivers,
-    search, setPage, handleSearch, clearError,
+    loading,
-    createDriver, updateDriver, deleteDriver,
+    error,
+    total,
+    pages,
+    page,
+    search,
+    setPage,
+    handleSearch,
+    clearError,
+    createDriver,
+    updateDriver,
+    deleteDriver,
     notification,
   } = useDrivers();
 
@@ -132,91 +155,29 @@ export default function DriversPage() {
   // ── Render ────────────────────────────────────────────────────────────────
   return (
     <>
-      <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
+      <section
-
+        style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}
+      >
         {/* ── Header ── */}
-        <header style={{
+        <Header
-          borderRadius: "var(--radius-xl)",
+          mainTitle="إدارة السائقين"
-          border: "1px solid var(--color-border)",
+          title="السائقون"
-          background: "var(--color-surface)",
+          name="سائق"
-          padding: "1.5rem 2rem",
+          state={{ total }}
-          boxShadow: "var(--shadow-card)",
+          search={search}
-        }}>
+          setSearch={handleSearch}
-          <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600 }}>
+          module=""
-            إدارة الكوادر
+          setModule={() => {}}
-          </p>
+          setPage={setPage}
-          <div style={{ marginTop: "0.75rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
+          isAudit={false}
-            <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: "1rem" }}>
+          onAdd={() => setFormDriver("new")}
-              <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 }}>
-                  <svg
-                    style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", width: 16, height: 16, color: "var(--color-text-hint)", pointerEvents: "none" }}
-                    fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"
-                  >
-                    <circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" />
-                  </svg>
-                  <input
-                    type="text"
-                    placeholder="بحث بالاسم أو الهاتف..."
-                    value={search}
-                    onChange={(e) => handleSearch(e.target.value)}
-                    dir="rtl"
-                    style={{
-                      width: "100%", height: 40, paddingRight: 36, paddingLeft: 12,
-                      borderRadius: "var(--radius-lg)",
-                      border: "1px solid var(--color-border)",
-                      background: "var(--color-surface)",
-                      fontSize: 13, 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,
-                  }}
-                >
-                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                    <path d="M12 5v14M5 12h14" />
-                  </svg>
-                  إضافة سائق
-                </button>
-              </div>
-            </div>
-          </div>
-        </header>
 
         {/* ── Notifications ── */}
         {notification && (
           <Alert type={notification.type} message={notification.message} />
         )}
-        {error && (
+        {error && <Alert type="error" message={error} onClose={clearError} />}
-          <Alert type="error" message={error} onClose={clearError} />
-        )}
 
         {/* ── Table ── */}
         <div style={cardStyle}>
@@ -238,20 +199,40 @@ export default function DriversPage() {
           </div>
 
           {loading ? (
-            <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, padding: "4rem 0", color: "var(--color-text-muted)" }}>
+            <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)" }}>
+            <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 statusCfg =
+                  DRIVER_STATUS_MAP[d.status] ?? DRIVER_STATUS_MAP.Inactive;
                 const licWarn = expirySoon(d.licenseExpiry);
-                const idWarn    = expirySoon((d as Driver & { nationalIdExpiry?: string }).nationalIdExpiry);
+                const idWarn = expirySoon(
+                  (d as Driver & { nationalIdExpiry?: string })
+                    .nationalIdExpiry,
+                );
 
                 return (
                   <li
@@ -260,39 +241,107 @@ export default function DriversPage() {
                     style={{
                       display: "grid",
                       gridTemplateColumns: ROW_GRID_COLUMNS,
-                      alignItems: "center", gap: "0.5rem",
+                      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",
+                      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)")}
+                    onMouseEnter={(e) =>
-                    onMouseLeave={(e) => (e.currentTarget.style.background = i % 2 !== 0 ? "var(--color-surface-muted)" : "transparent")}
+                      (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
-                      <p style={{ marginTop: 2, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--color-text-muted)" }}>{d.phone}</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)" }}>
-                    <span style={{ color: "var(--color-text-secondary)" }}>{d.nationality ?? "—"}</span>
+                      {d.branch?.name ?? "—"}
-                    <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)" }}>
+                    <span style={{ color: "var(--color-text-secondary)" }}>
-                      {idWarn && "⚠ "}{fmtDate((d as Driver & { nationalIdExpiry?: string }).nationalIdExpiry)}
+                      {d.nationality ?? "—"}
                     </span>
-                    <span style={{
+                    <span
-                      display: "inline-flex", alignItems: "center", gap: 5,
+                      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,
+                        fontSize: 11,
+                        fontWeight: 600,
+                        color: statusCfg.color,
                         width: "fit-content",
-                    }}>
+                      }}
-                      <span style={{ width: 6, height: 6, borderRadius: "50%", background: statusCfg.dot, flexShrink: 0 }} />
+                    >
+                      <span
+                        style={{
+                          width: 6,
+                          height: 6,
+                          borderRadius: "50%",
+                          background: statusCfg.dot,
+                          flexShrink: 0,
+                        }}
+                      />
                       {statusCfg.label}
                     </span>
 
@@ -305,7 +354,10 @@ export default function DriversPage() {
                         type="button"
                         aria-label="تعديل السائق"
                         title="تعديل"
-                        onClick={(e) => { e.stopPropagation(); handleEdit(d); }}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleEdit(d);
+                        }}
                         style={{
                           ...iconBtnBase,
                           border: "1px solid var(--color-brand-200)",
@@ -313,7 +365,14 @@ export default function DriversPage() {
                           color: "var(--color-brand-600)",
                         }}
                       >
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                        <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>
@@ -323,7 +382,10 @@ export default function DriversPage() {
                         type="button"
                         aria-label="حذف السائق"
                         title="حذف"
-                        onClick={(e) => { e.stopPropagation(); handleDelete(d); }}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleDelete(d);
+                        }}
                         style={{
                           ...iconBtnBase,
                           border: "1px solid #FECACA",
@@ -331,7 +393,14 @@ export default function DriversPage() {
                           color: "#DC2626",
                         }}
                       >
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <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" />
@@ -350,21 +419,36 @@ export default function DriversPage() {
             <div
               dir="rtl"
               style={{
-                display: "flex", alignItems: "center", justifyContent: "space-between",
+                display: "flex",
-                borderTop: "1px solid var(--color-border)", padding: "0.875rem 1.5rem",
+                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)" }}>
+                  {page}
+                </strong>{" "}
                 من{" "}
-                <strong style={{ color: "var(--color-text-primary)" }}>{pages}</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 },
+                    label: "السابق",
-                ].map(btn => (
+                    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}
@@ -374,7 +458,8 @@ export default function DriversPage() {
                       border: "1px solid var(--color-border)",
                       background: "var(--color-surface-muted)",
                       padding: "0.375rem 0.875rem",
-                      fontSize: 12, color: "var(--color-text-secondary)",
+                      fontSize: 12,
+                      color: "var(--color-text-secondary)",
                       cursor: btn.disabled ? "not-allowed" : "pointer",
                       opacity: btn.disabled ? 0.4 : 1,
                       fontFamily: "var(--font-sans)",
@@ -421,9 +506,7 @@ export default function DriversPage() {
       />
 
       {/* ── Archive browser modal ── */}
-      {archiveOpen && (
+      {archiveOpen && <ArchivedDrivers onClose={() => setArchiveOpen(false)} />}
-        <ArchivedDrivers onClose={() => setArchiveOpen(false)} />
-      )}
 
       {/* ── Floating button to open the archive browser ── */}
       <ArchiveButton onClick={() => setArchiveOpen(true)} />

app/dashboard/orders/page.tsx

@@ -9,6 +9,7 @@ import { ArchivedOrdersModal } from "@/src/Components/Order/archive/ArchivedOrde
 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 ───────
 
@@ -142,100 +143,18 @@ export default function OrderComponent() {
       <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
 
         {/* ── Header ── */}
-        <header style={{
+        <Header 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={() => setFormOrder("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" }}>
-                {/* 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 }}>
-                  <svg
-                    style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", width: 16, height: 16, color: "var(--color-text-hint)", pointerEvents: "none" }}
-                    fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"
-                  >
-                    <circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" />
-                  </svg>
-                  <input
-                    type="text"
-                    placeholder="رقم الشحنة أو المستلم..."
-                    value={search}
-                    onChange={(e) => handleSearch(e.target.value)}
-                    dir="rtl"
-                    style={{
-                      width: "100%", height: 40, paddingRight: 36, paddingLeft: 12,
-                      borderRadius: "var(--radius-lg)",
-                      border: "1px solid var(--color-border)",
-                      background: "var(--color-surface)",
-                      fontSize: 13, 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,
-                  }}
-                >
-                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                    <path d="M12 5v14M5 12h14" />
-                  </svg>
-                  إضافة طلب
-                </button>
-              </div>
-            </div>
-          </div>
-        </header>
 
         {/* ── Notifications: page-level error banner (e.g. failed list load)
              dismissible via clearError() from the hook. Action-result

app/dashboard/roles/page.tsx

@@ -7,6 +7,7 @@ import { RoleFormModal,RoleDetailModal }   from "@/src/Components/role";
 import { useRoles }        from "@/src/hooks/useRole";
 import { Role, RoleFormData } from "@/src/types/role";
 import { ArchivedRolesModal } from "@/src/Components/role/archive/ArchivedRolesModal";
+import Header from "@/src/Components/UI/Header";
 
 
 export default function RolesPage() {
@@ -91,78 +92,17 @@ export default function RolesPage() {
       <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
 
         {/* Page header */}
-        <header style={{
+        <Header 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 className="mt-3 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+                 onAdd={() => setFormTarget(null)}/>
-            <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: 240 }}>
-                <svg style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", width: 16, height: 16, color: "var(--color-text-hint)", pointerEvents: "none" }}
-                  fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
-                  <circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" />
-                </svg>
-                <input
-                  type="text"
-                  placeholder="بحث باسم الدور..."
-                  value={search}
-                  onChange={e => handleSearch(e.target.value)}
-                  dir="rtl"
-                  style={{
-                    width: "100%", height: 40,
-                    paddingRight: 36, paddingLeft: 12,
-                    borderRadius: "var(--radius-lg)",
-                    border: "1px solid var(--color-border)",
-                    background: "var(--color-surface)",
-                    fontSize: 13, outline: "none",
-                    fontFamily: "var(--font-sans)",
-                    color: "var(--color-text-primary)",
-                  }}
-                />
-              </div>
-
-              {/* Add role 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",
-                }}
-              >
-                <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>
-            </div>
-          </div>
-        </header>
 
         {/* Error alert */}
         {error && <Alert type="error" message={error} onClose={clearError} />}

app/dashboard/trips/page.tsx

@@ -13,6 +13,7 @@ import type {
   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 ─────────────
 
@@ -232,224 +233,17 @@ export default function TripsPage() {
       }}
     >
       {/* ── Header ── */}
-      <header
+       <Header mainTitle="إدارة الرحلات"
-        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={() => {}}
-      >
+                setPage={setPage}
-        <p
+                isAudit={false}
-          style={{
+                onAdd={() => { setEditTrip(null); setShowForm(true); }}/>
-            fontSize: 11,
-            letterSpacing: "0.3em",
-            textTransform: "uppercase",
-            color: "#2563EB",
-            fontWeight: 600,
-          }}
-        >
-          إدارة العمليات
-        </p>
-        <div
-          style={{
-            marginTop: "0.75rem",
-            display: "flex",
-            flexDirection: "column",
-            gap: "1rem",
-          }}
-        >
-          <div
-            style={{
-              display: "flex",
-              alignItems: "flex-end",
-              justifyContent: "space-between",
-              flexWrap: "wrap",
-              gap: "1rem",
-            }}
-          >
-            <div>
-              <h1
-                style={{
-                  fontSize: "1.5rem",
-                  fontWeight: 700,
-                  color: "var(--color-text-primary)",
-                  margin: 0,
-                }}
-              >
-                الرحلات
-              </h1>
-              <p
-                style={{
-                  marginTop: "0.25rem",
-                  fontSize: 13,
-                  color: "var(--color-text-muted)",
-                }}
-              >
-                إجمالي{" "}
-                <strong style={{ color: "var(--color-text-primary)" }}>
-                  {total}
-                </strong>{" "}
-                رحلة مسجلة
-              </p>
-            </div>
-
-            <div
-              style={{
-                display: "flex",
-                gap: "0.75rem",
-                alignItems: "center",
-                flexWrap: "wrap",
-              }}
-            >
-              {/* Search */}
-              <div style={{ position: "relative", width: 288 }}>
-                <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={searchInput}
-                  onChange={(e) => setSearchInput(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>
-
-              {/* Status filter */}
-              <select
-                value={status}
-                onChange={(e) =>
-                  handleStatusFilter(e.target.value as TripStatus | "")
-                }
-                dir="rtl"
-                style={{
-                  height: 40,
-                  padding: "0 0.75rem",
-                  minWidth: 140,
-                  borderRadius: "var(--radius-lg)",
-                  border: "1px solid var(--color-border)",
-                  background: "var(--color-surface)",
-                  fontSize: 13,
-                  color: "var(--color-text-primary)",
-                  fontFamily: "var(--font-sans)",
-                  cursor: "pointer",
-                  outline: "none",
-                }}
-              >
-                <option value="">كل الحالات</option>
-                <option value="Scheduled">مجدولة</option>
-                <option value="InProgress">جارية</option>
-                <option value="Completed">مكتملة</option>
-                <option value="Cancelled">ملغاة</option>
-              </select>
-
-              {/* Archive button */}
-              <button
-                type="button"
-                onClick={() => setArchiveOpen(true)}
-                style={{
-                  height: 40,
-                  padding: "0 1.25rem",
-                  borderRadius: "var(--radius-lg)",
-                  border: "1px solid var(--color-border)",
-                  background: "var(--color-surface)",
-                  color: "var(--color-text-secondary)",
-                  fontSize: 13,
-                  fontWeight: 700,
-                  cursor: "pointer",
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 8,
-                  fontFamily: "var(--font-sans)",
-                }}
-              >
-                <svg
-                  width="16"
-                  height="16"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                >
-                  <rect x="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>
-                أرشيف الرحلات
-              </button>
-
-              {/* Add button */}
-              <button
-                type="button"
-                onClick={() => {
-                  setEditTrip(null);
-                  setShowForm(true);
-                }}
-                style={{
-                  height: 40,
-                  padding: "0 1.25rem",
-                  borderRadius: "var(--radius-lg)",
-                  border: "none",
-                  background: "var(--color-brand-600)",
-                  fontSize: 13,
-                  fontWeight: 700,
-                  color: "#FFF",
-                  cursor: "pointer",
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 8,
-                  fontFamily: "var(--font-sans)",
-                  flexShrink: 0,
-                }}
-              >
-                <svg
-                  width="15"
-                  height="15"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2.5"
-                >
-                  <path d="M12 5v14M5 12h14" />
-                </svg>
-                إضافة رحلة
-              </button>
-            </div>
-          </div>
-        </div>
-      </header>
-
       {/* ── 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`. */}

app/dashboard/users/page.tsx

@@ -6,6 +6,7 @@ import { UserFormModal,UserDetailModal,UserTable }      from "@/src/Components/U
 import { useUsers }           from "@/src/hooks/useUser";
 import type { User, UserFormData } from "@/src/types/user";
 import { ArchivedUsersModal } from "@/src/Components/User/archive/Archivedusersmodal";
+import Header from "@/src/Components/UI/Header";
 
 export default function UsersPage() {
   // ── Modal state ─────────────────────────────────────────────────────────────
@@ -90,79 +91,17 @@ export default function UsersPage() {
       <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
 
         {/* ── Page header ── */}
-        <header style={{
+       <Header 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 className="mt-3 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+                onAdd={() => setFormTarget(null)}/>
-            <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 input */}
-              <div style={{ position: "relative", width: 256 }}>
-                <svg style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", width: 16, height: 16, color: "var(--color-text-hint)", pointerEvents: "none" }}
-                  fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
-                  <circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" />
-                </svg>
-                <input
-                  type="text"
-                  placeholder="بحث بالاسم أو الهاتف..."
-                  value={search}
-                  onChange={e => handleSearch(e.target.value)}
-                  dir="rtl"
-                  style={{
-                    width: "100%", height: 40,
-                    paddingRight: 36, paddingLeft: 12,
-                    borderRadius: "var(--radius-lg)",
-                    border: "1px solid var(--color-border)",
-                    background: "var(--color-surface)",
-                    fontSize: 13, outline: "none",
-                    fontFamily: "var(--font-sans)",
-                    color: "var(--color-text-primary)",
-                  }}
-                />
-              </div>
-
-              {/* Add user 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",
-                }}
-              >
-                <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>
-            </div>
-          </div>
-        </header>
 
         {/* General load error */}
         {error && <Alert type="error" message={error} onClose={clearError} />}

src/Components/Driver/DriverFormModal.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
-import * as yup from "yup";
+import { useForm, Controller } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
 import { Alert, Spinner } from "../UI";
 import { get } from "@/src/services/api";
 import { getStoredToken } from "@/src/lib/auth";
 import { createDriverSchema, updateDriverSchema } from "@/src/validations/driver.validator";
-import type { DriverSchemaErrors } from "@/src/validations/driver.validator";
 import type {
   Driver,
   CreateDriverPayload,
@@ -72,6 +72,32 @@ function toIsoDateTime(val: string): string {
   return `${val}T00:00:00.000Z`;
 }
 
+// ── Form values shape ────────────────────────────────────────────────────────
+
+interface DriverFormValues {
+  name: string;
+  phone: string;
+  email: string;
+  address: string;
+  nationality: string;
+  nationalIdType: NationalIdType | "";
+  nationalId: string;
+  nationalIdExpiry: string;
+  gosiNumber: string;
+  licenseNumber: string;
+  licenseType: string;
+  licenseExpiry: string;
+  driverCardNumber: string;
+  driverCardType: DriverCardType | "";
+  driverCardExpiry: string;
+  driverType: string;
+  branchId: string;
+  status: DriverStatus;
+  photo: File | null;
+  nationalPhoto: File | null;
+  driverCardPhoto: File | null;
+}
+
 // ── Props ────────────────────────────────────────────────────────────────────
 
 interface DriverFormModalProps {
@@ -104,161 +130,123 @@ export function DriverFormModal({
     const token = getStoredToken();
     get<{ data: { data: Branch[] } }>("branches?limit=100", token)
       .then((res) => {
-        const list =
+        const list = (res as unknown as { data: { data: Branch[] } }).data?.data ?? [];
-          (res as unknown as { data: { data: Branch[] } }).data?.data ?? [];
         setBranches(list);
       })
-      .catch(() => { /* silently ignore */ });
+      .catch(() => {
+        /* silently ignore */
+      });
   }, [branchesProp]);
 
-  // ── Form state ────────────────────────────────────────────────────────────
+  // ── react-hook-form ────────────────────────────────────────────────────────
-  const [name, setName]               = useState(editDriver?.name ?? "");
+  const {
-  const [phone, setPhone]             = useState(editDriver?.phone ?? "");
+    register,
-  const [email, setEmail]             = useState(editDriver?.email ?? "");
+    handleSubmit,
-  const [address, setAddress]         = useState(editDriver?.address ?? "");
+    control,
-  const [nationality, setNationality] = useState(editDriver?.nationality ?? "");
+    setError,
-  const [nationalIdType, setNationalIdType] = useState<NationalIdType | "">(
+    formState: { errors, isSubmitting },
-    editDriver?.nationalIdType ?? "",
+  } = useForm<DriverFormValues>({
-  );
+    resolver: yupResolver(isNew ? createDriverSchema : updateDriverSchema) as never,
-  const [nationalId, setNationalId] = useState(
+    defaultValues: {
-    (editDriver as Driver & { nationalId?: string })?.nationalId ?? "",
+      name: editDriver?.name ?? "",
-  );
+      phone: editDriver?.phone ?? "",
-  const [nationalIdExpiry, setNationalIdExpiry] = useState(
+      email: editDriver?.email ?? "",
+      address: editDriver?.address ?? "",
+      nationality: editDriver?.nationality ?? "",
+      nationalIdType: editDriver?.nationalIdType ?? "",
+      nationalId: (editDriver as Driver & { nationalId?: string })?.nationalId ?? "",
+      nationalIdExpiry:
         (editDriver as Driver & { nationalIdExpiry?: string })?.nationalIdExpiry?.slice(0, 10) ?? "",
-  );
+      gosiNumber: editDriver?.gosiNumber ?? "",
-  const [gosiNumber, setGosiNumber]             = useState(editDriver?.gosiNumber ?? "");
+      licenseNumber: editDriver?.licenseNumber ?? "",
-  const [licenseNumber, setLicenseNumber]       = useState(editDriver?.licenseNumber ?? "");
+      licenseType: editDriver?.licenseType ?? "",
-  const [licenseType, setLicenseType]           = useState(editDriver?.licenseType ?? "");
+      licenseExpiry: editDriver?.licenseExpiry?.slice(0, 10) ?? "",
-  const [licenseExpiry, setLicenseExpiry]       = useState(
+      driverCardNumber: editDriver?.driverCardNumber ?? "",
-    editDriver?.licenseExpiry?.slice(0, 10) ?? "",
+      driverCardType: editDriver?.driverCardType ?? "",
-  );
+      driverCardExpiry: editDriver?.driverCardExpiry?.slice(0, 10) ?? "",
-  const [driverCardNumber, setDriverCardNumber] = useState(editDriver?.driverCardNumber ?? "");
+      driverType: editDriver?.driverType ?? "",
-  const [driverCardType, setDriverCardType]     = useState<DriverCardType | "">(
+      branchId: (editDriver as Driver & { branchId?: string })?.branchId ?? "",
-    editDriver?.driverCardType ?? "",
+      status: editDriver?.status ?? "Active",
-  );
+      photo: null,
-  const [driverCardExpiry, setDriverCardExpiry] = useState(
+      nationalPhoto: null,
-    editDriver?.driverCardExpiry?.slice(0, 10) ?? "",
+      driverCardPhoto: null,
-  );
+    },
-  const [driverType, setDriverType] = useState(editDriver?.driverType ?? "");
+  });
-  const [branchId, setBranchId]     = useState(
-    (editDriver as Driver & { branchId?: string })?.branchId ?? "",
-  );
-  const [status, setStatus] = useState<DriverStatus>(editDriver?.status ?? "Active");
 
-  // Photo state (new uploads only)
-  const [photo, setPhoto]                   = useState<File | null>(null);
-  const [nationalPhoto, setNationalPhoto]   = useState<File | null>(null);
-  const [driverCardPhoto, setDriverCardPhoto] = useState<File | null>(null);
-
-  const [errors, setErrors] = useState<DriverSchemaErrors>({});
-  const [saving, setSaving] = useState(false);
   const [apiError, setApiError] = useState("");
   const firstRef = useRef<HTMLInputElement>(null);
 
-  useEffect(() => { firstRef.current?.focus(); }, []);
   useEffect(() => {
-    const h = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
+    firstRef.current?.focus();
+  }, []);
+  useEffect(() => {
+    const h = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
     window.addEventListener("keydown", h);
     return () => window.removeEventListener("keydown", h);
   }, [onClose]);
 
-  // ── Input error style ──────────────────────────────────────────────────────
+  const withError = (hasError: boolean): React.CSSProperties => ({
-  const inputStyle = (field: keyof DriverSchemaErrors): React.CSSProperties => ({
     ...inputBase,
-    ...(errors[field] ? { borderColor: "var(--color-danger)", background: "#FEF2F2" } : {}),
+    ...(hasError ? { borderColor: "var(--color-danger)", background: "#FEF2F2" } : {}),
   });
 
-  const clearFieldError = (field: keyof DriverSchemaErrors) =>
+  // ── Submit ────────────────────────────────────────────────────────────────
-    setErrors((p) => ({ ...p, [field]: undefined }));
 
-  // ── Submit with yup validation ────────────────────────────────────────────
+  const submitHandler = useCallback(
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    async (data: DriverFormValues) => {
-    e.preventDefault();
+      const payload: Record<string, unknown> = { name: data.name, phone: data.phone };
+      if (data.email) payload.email = data.email;
+      if (data.address) payload.address = data.address;
+      if (data.nationality) payload.nationality = data.nationality;
+      if (data.nationalIdType) payload.nationalIdType = data.nationalIdType;
+      if (data.nationalId) payload.nationalId = data.nationalId;
+      if (data.nationalIdExpiry) payload.nationalIdExpiry = toIsoDateTime(data.nationalIdExpiry);
+      if (data.gosiNumber) payload.gosiNumber = data.gosiNumber;
+      if (data.licenseNumber) payload.licenseNumber = data.licenseNumber;
+      if (data.licenseType) payload.licenseType = data.licenseType;
+      if (data.licenseExpiry) payload.licenseExpiry = toIsoDateTime(data.licenseExpiry);
+      if (data.driverCardNumber) payload.driverCardNumber = data.driverCardNumber;
+      if (data.driverCardType) payload.driverCardType = data.driverCardType;
+      if (data.driverCardExpiry) payload.driverCardExpiry = toIsoDateTime(data.driverCardExpiry);
+      if (data.driverType) payload.driverType = data.driverType;
+      if (data.branchId) payload.branchId = data.branchId;
+      if (!isNew) payload.status = data.status;
+      // File fields are excluded from the JSON diff unless actually chosen —
+      // matches the pre-refactor behavior exactly.
+      if (data.photo) payload.photo = data.photo;
+      if (data.nationalPhoto) payload.nationalPhoto = data.nationalPhoto;
+      if (data.driverCardPhoto) payload.driverCardPhoto = data.driverCardPhoto;
 
-    // Build the raw object to validate
-    const raw: Record<string, unknown> = {
-      name:             name          || undefined,
-      phone:            phone         || undefined,
-      email:            email         || undefined,
-      address:          address       || undefined,
-      nationality:      nationality   || undefined,
-      nationalIdType:   nationalIdType || undefined,
-      gosiNumber:       gosiNumber    || undefined,
-      licenseNumber:    licenseNumber || undefined,
-      licenseType:      licenseType   || undefined,
-      licenseExpiry:    licenseExpiry || undefined,
-      driverCardNumber: driverCardNumber || undefined,
-      driverCardType:   driverCardType   || undefined,
-      driverCardExpiry: driverCardExpiry || undefined,
-      driverType:       driverType    || undefined,
-      branchId:         branchId      || undefined,
-      ...(!isNew ? { status } : {}),
-    };
-
-    try {
-      const schema = isNew ? createDriverSchema : updateDriverSchema;
-      await schema.validate(raw, { abortEarly: false });
-    } catch (err) {
-      if (err instanceof yup.ValidationError) {
-        const fieldErrors: DriverSchemaErrors = {};
-        err.inner.forEach((e) => {
-          if (e.path) {
-            fieldErrors[e.path as keyof DriverSchemaErrors] = e.message;
-          }
-        });
-        setErrors(fieldErrors);
-        return;
-      }
-    }
-
-    const payload: Record<string, unknown> = { name, phone };
-    if (email)            payload.email            = email;
-    if (address)          payload.address          = address;
-    if (nationality)      payload.nationality      = nationality;
-    if (nationalIdType)   payload.nationalIdType   = nationalIdType;
-    if (nationalId)       payload.nationalId       = nationalId;
-    if (nationalIdExpiry) payload.nationalIdExpiry = toIsoDateTime(nationalIdExpiry);
-    if (gosiNumber)       payload.gosiNumber       = gosiNumber;
-    if (licenseNumber)    payload.licenseNumber    = licenseNumber;
-    if (licenseType)      payload.licenseType      = licenseType;
-    if (licenseExpiry)    payload.licenseExpiry    = toIsoDateTime(licenseExpiry);
-    if (driverCardNumber) payload.driverCardNumber = driverCardNumber;
-    if (driverCardType)   payload.driverCardType   = driverCardType;
-    if (driverCardExpiry) payload.driverCardExpiry = toIsoDateTime(driverCardExpiry);
-    if (driverType)       payload.driverType       = driverType;
-    if (branchId)         payload.branchId         = branchId;
-    if (!isNew)           payload.status           = status;
-    if (photo)            payload.photo            = photo;
-    if (nationalPhoto)    payload.nationalPhoto    = nationalPhoto;
-    if (driverCardPhoto)  payload.driverCardPhoto  = driverCardPhoto;
-
-    setSaving(true);
       setApiError("");
-
       try {
         const ok = await onSubmit(payload as unknown as CreateDriverPayload, isNew);
         if (ok) {
           onClose();
         } else {
-        // onSubmit returned false without throwing — show generic fallback
+          setError("name", { message: "حدث خطأ غير متوقع. يرجى المحاولة لاحقاً." });
           setApiError("حدث خطأ غير متوقع. يرجى المحاولة لاحقاً.");
         }
       } catch (err) {
-      // onSubmit threw — surface the real API error message
         const message = err instanceof Error ? err.message : "حدث خطأ غير متوقع. يرجى المحاولة لاحقاً.";
+        setError("name", { message });
         setApiError(message);
-    } finally {
-      setSaving(false);
       }
-  };
+    },
+    [isNew, onSubmit, onClose, setError],
+  );
+
+  // ── Render ────────────────────────────────────────────────────────────────
 
-  // ── Render ─────────────────────────────────────────────────────────────────
   return (
     <div
       role="dialog"
       aria-modal="true"
       aria-labelledby="driver-modal-title"
-      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+      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)",
@@ -305,7 +293,7 @@ export function DriverFormModal({
 
         {/* Form */}
         <form
-          onSubmit={handleSubmit}
+          onSubmit={handleSubmit(submitHandler)}
           noValidate
           style={{
             padding: "1.5rem",
@@ -314,8 +302,8 @@ export function DriverFormModal({
           }}
           dir="rtl"
         >
-          {apiError && (
+          {errors.name?.type === "manual" && (
-            <Alert type="error" message={apiError} onClose={() => setApiError("")} />
+            <Alert type="error" message={errors.name.message ?? ""} onClose={() => setApiError("")} />
           )}
 
           {/* ── Section: Personal Info ── */}
@@ -327,27 +315,27 @@ export function DriverFormModal({
               الاسم الكامل *
               <input
                 ref={firstRef}
-                style={inputStyle("name")}
+                style={withError(!!errors.name && errors.name.type !== "manual")}
-                value={name}
+                {...register("name")}
-                onChange={(e) => { setName(e.target.value); clearFieldError("name"); }}
                 placeholder="محمد عبدالله"
                 dir="rtl"
                 autoComplete="off"
               />
-              {errors.name && <span style={errorTextStyle}>{errors.name}</span>}
+              {errors.name && errors.name.type !== "manual" && (
+                <span style={errorTextStyle}>{errors.name.message}</span>
+              )}
             </label>
 
             {/* Phone — required */}
             <label style={labelStyle}>
               رقم الجوال *
               <input
-                style={inputStyle("phone")}
+                style={withError(!!errors.phone)}
-                value={phone}
+                {...register("phone")}
-                onChange={(e) => { setPhone(e.target.value); clearFieldError("phone"); }}
                 placeholder="05XXXXXXXX"
                 dir="ltr"
               />
-              {errors.phone && <span style={errorTextStyle}>{errors.phone}</span>}
+              {errors.phone && <span style={errorTextStyle}>{errors.phone.message}</span>}
             </label>
 
             {/* Email — optional */}
@@ -355,14 +343,13 @@ export function DriverFormModal({
               البريد الإلكتروني
               <span style={optionalLabelStyle}>(اختياري)</span>
               <input
-                style={inputStyle("email")}
+                style={withError(!!errors.email)}
                 type="email"
-                value={email}
+                {...register("email")}
-                onChange={(e) => { setEmail(e.target.value); clearFieldError("email"); }}
                 placeholder="example@mail.com"
                 dir="ltr"
               />
-              {errors.email && <span style={errorTextStyle}>{errors.email}</span>}
+              {errors.email && <span style={errorTextStyle}>{errors.email.message}</span>}
             </label>
 
             {/* Nationality — optional */}
@@ -370,13 +357,12 @@ export function DriverFormModal({
               الجنسية
               <span style={optionalLabelStyle}>(اختياري)</span>
               <input
-                style={inputBase}
+                style={withError(!!errors.nationality)}
-                value={nationality}
+                {...register("nationality")}
-                onChange={(e) => { setNationality(e.target.value); clearFieldError("nationality"); }}
                 placeholder="سعودي"
                 dir="rtl"
               />
-              {errors.nationality && <span style={errorTextStyle}>{errors.nationality}</span>}
+              {errors.nationality && <span style={errorTextStyle}>{errors.nationality.message}</span>}
             </label>
 
             {/* Address — optional, full width */}
@@ -384,13 +370,12 @@ export function DriverFormModal({
               العنوان
               <span style={optionalLabelStyle}>(اختياري)</span>
               <input
-                style={inputStyle("address")}
+                style={withError(!!errors.address)}
-                value={address}
+                {...register("address")}
-                onChange={(e) => { setAddress(e.target.value); clearFieldError("address"); }}
                 placeholder="الرياض، حي..."
                 dir="rtl"
               />
-              {errors.address && <span style={errorTextStyle}>{errors.address}</span>}
+              {errors.address && <span style={errorTextStyle}>{errors.address.message}</span>}
             </label>
           </div>
 
@@ -403,9 +388,8 @@ export function DriverFormModal({
               نوع الهوية
               <span style={optionalLabelStyle}>(اختياري)</span>
               <select
-                style={{ ...inputStyle("nationalIdType"), cursor: "pointer" }}
+                style={{ ...withError(!!errors.nationalIdType), cursor: "pointer" }}
-                value={nationalIdType}
+                {...register("nationalIdType")}
-                onChange={(e) => { setNationalIdType(e.target.value as NationalIdType | ""); clearFieldError("nationalIdType"); }}
                 dir="rtl"
               >
                 <option value="">اختر النوع</option>
@@ -413,45 +397,28 @@ export function DriverFormModal({
                 <option value="Iqama">إقامة</option>
                 <option value="Passport">جواز سفر</option>
               </select>
-              {errors.nationalIdType && <span style={errorTextStyle}>{errors.nationalIdType}</span>}
+              {errors.nationalIdType && <span style={errorTextStyle}>{errors.nationalIdType.message}</span>}
             </label>
 
             {/* National ID number */}
             <label style={labelStyle}>
               رقم الهوية
               <span style={optionalLabelStyle}>(اختياري)</span>
-              <input
+              <input style={inputBase} {...register("nationalId")} placeholder="1XXXXXXXXX" dir="ltr" />
-                style={inputBase}
-                value={nationalId}
-                onChange={(e) => setNationalId(e.target.value)}
-                placeholder="1XXXXXXXXX"
-                dir="ltr"
-              />
             </label>
 
             {/* National ID expiry */}
             <label style={labelStyle}>
               انتهاء الهوية
               <span style={optionalLabelStyle}>(اختياري)</span>
-              <input
+              <input style={inputBase} type="date" {...register("nationalIdExpiry")} />
-                style={inputBase}
-                type="date"
-                value={nationalIdExpiry}
-                onChange={(e) => setNationalIdExpiry(e.target.value)}
-              />
             </label>
 
             {/* GOSI — optional */}
             <label style={labelStyle}>
               رقم GOSI
               <span style={optionalLabelStyle}>(اختياري)</span>
-              <input
+              <input style={inputBase} {...register("gosiNumber")} placeholder="GOSI-XXXX" dir="ltr" />
-                style={inputBase}
-                value={gosiNumber}
-                onChange={(e) => setGosiNumber(e.target.value)}
-                placeholder="GOSI-XXXX"
-                dir="ltr"
-              />
             </label>
           </div>
 
@@ -464,39 +431,27 @@ export function DriverFormModal({
               رقم الرخصة
               <span style={optionalLabelStyle}>(اختياري)</span>
               <input
-                style={inputStyle("licenseNumber")}
+                style={withError(!!errors.licenseNumber)}
-                value={licenseNumber}
+                {...register("licenseNumber")}
-                onChange={(e) => { setLicenseNumber(e.target.value); clearFieldError("licenseNumber"); }}
                 placeholder="LIC-XXXX"
                 dir="ltr"
               />
-              {errors.licenseNumber && <span style={errorTextStyle}>{errors.licenseNumber}</span>}
+              {errors.licenseNumber && <span style={errorTextStyle}>{errors.licenseNumber.message}</span>}
             </label>
 
             {/* License type — optional */}
             <label style={labelStyle}>
               نوع الرخصة
               <span style={optionalLabelStyle}>(اختياري)</span>
-              <input
+              <input style={inputBase} {...register("licenseType")} placeholder="خاص / عام" dir="rtl" />
-                style={inputBase}
-                value={licenseType}
-                onChange={(e) => setLicenseType(e.target.value)}
-                placeholder="خاص / عام"
-                dir="rtl"
-              />
             </label>
 
             {/* License expiry — optional, validated if provided */}
             <label style={labelStyle}>
               انتهاء الرخصة
               <span style={optionalLabelStyle}>(اختياري)</span>
-              <input
+              <input style={withError(!!errors.licenseExpiry)} type="date" {...register("licenseExpiry")} />
-                style={inputStyle("licenseExpiry")}
+              {errors.licenseExpiry && <span style={errorTextStyle}>{errors.licenseExpiry.message}</span>}
-                type="date"
-                value={licenseExpiry}
-                onChange={(e) => { setLicenseExpiry(e.target.value); clearFieldError("licenseExpiry"); }}
-              />
-              {errors.licenseExpiry && <span style={errorTextStyle}>{errors.licenseExpiry}</span>}
             </label>
           </div>
 
@@ -508,13 +463,7 @@ export function DriverFormModal({
             <label style={labelStyle}>
               رقم البطاقة
               <span style={optionalLabelStyle}>(اختياري)</span>
-              <input
+              <input style={inputBase} {...register("driverCardNumber")} placeholder="CARD-XXXX" dir="ltr" />
-                style={inputBase}
-                value={driverCardNumber}
-                onChange={(e) => setDriverCardNumber(e.target.value)}
-                placeholder="CARD-XXXX"
-                dir="ltr"
-              />
             </label>
 
             {/* Card type — optional */}
@@ -522,9 +471,8 @@ export function DriverFormModal({
               نوع البطاقة
               <span style={optionalLabelStyle}>(اختياري)</span>
               <select
-                style={{ ...inputStyle("driverCardType"), cursor: "pointer" }}
+                style={{ ...withError(!!errors.driverCardType), cursor: "pointer" }}
-                value={driverCardType}
+                {...register("driverCardType")}
-                onChange={(e) => { setDriverCardType(e.target.value as DriverCardType | ""); clearFieldError("driverCardType"); }}
                 dir="rtl"
               >
                 <option value="">اختر النوع</option>
@@ -533,7 +481,7 @@ export function DriverFormModal({
                 <option value="Annual">سنوية</option>
                 <option value="Restricted">مقيدة</option>
               </select>
-              {errors.driverCardType && <span style={errorTextStyle}>{errors.driverCardType}</span>}
+              {errors.driverCardType && <span style={errorTextStyle}>{errors.driverCardType.message}</span>}
             </label>
 
             {/* Card expiry — optional, validated if provided */}
@@ -541,12 +489,13 @@ export function DriverFormModal({
               انتهاء البطاقة
               <span style={optionalLabelStyle}>(اختياري)</span>
               <input
-                style={inputStyle("driverCardExpiry")}
+                style={withError(!!errors.driverCardExpiry)}
                 type="date"
-                value={driverCardExpiry}
+                {...register("driverCardExpiry")}
-                onChange={(e) => { setDriverCardExpiry(e.target.value); clearFieldError("driverCardExpiry"); }}
               />
-              {errors.driverCardExpiry && <span style={errorTextStyle}>{errors.driverCardExpiry}</span>}
+              {errors.driverCardExpiry && (
+                <span style={errorTextStyle}>{errors.driverCardExpiry.message}</span>
+              )}
             </label>
           </div>
 
@@ -559,9 +508,8 @@ export function DriverFormModal({
               الفرع
               <span style={optionalLabelStyle}>(اختياري)</span>
               <select
-                style={{ ...inputStyle("branchId"), cursor: "pointer" }}
+                style={{ ...withError(!!errors.branchId), cursor: "pointer" }}
-                value={branchId}
+                {...register("branchId")}
-                onChange={(e) => { setBranchId(e.target.value); clearFieldError("branchId"); }}
                 dir="rtl"
               >
                 <option value="">اختر الفرع</option>
@@ -569,32 +517,21 @@ export function DriverFormModal({
                   <option key={b.id} value={b.id}>{b.name}</option>
                 ))}
               </select>
-              {errors.branchId && <span style={errorTextStyle}>{errors.branchId}</span>}
+              {errors.branchId && <span style={errorTextStyle}>{errors.branchId.message}</span>}
             </label>
 
             {/* Driver type — optional */}
             <label style={labelStyle}>
               نوع السائق
               <span style={optionalLabelStyle}>(اختياري)</span>
-              <input
+              <input style={inputBase} {...register("driverType")} placeholder="رئيسي / احتياطي" dir="rtl" />
-                style={inputBase}
-                value={driverType}
-                onChange={(e) => setDriverType(e.target.value)}
-                placeholder="رئيسي / احتياطي"
-                dir="rtl"
-              />
             </label>
 
             {/* Status — edit only */}
             {!isNew && (
               <label style={labelStyle}>
                 الحالة
-                <select
+                <select style={{ ...inputBase, cursor: "pointer" }} {...register("status")} dir="rtl">
-                  style={{ ...inputBase, cursor: "pointer" }}
-                  value={status}
-                  onChange={(e) => setStatus(e.target.value as DriverStatus)}
-                  dir="rtl"
-                >
                   <option value="Active">نشط</option>
                   <option value="InTrip">في رحلة</option>
                   <option value="Inactive">غير نشط</option>
@@ -611,9 +548,29 @@ export function DriverFormModal({
           </p>
 
           <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
-            <FileInput label="صورة السائق" current={photo} onChange={setPhoto} />
+            {/* File inputs cannot use register() directly — bind via Controller
-            <FileInput label="صورة الهوية" current={nationalPhoto} onChange={setNationalPhoto} />
+                to the existing FileInput component's current/onChange props. */}
-            <FileInput label="صورة البطاقة" current={driverCardPhoto} onChange={setDriverCardPhoto} />
+            <Controller
+              name="photo"
+              control={control}
+              render={({ field }) => (
+                <FileInput label="صورة السائق" current={field.value} onChange={field.onChange} />
+              )}
+            />
+            <Controller
+              name="nationalPhoto"
+              control={control}
+              render={({ field }) => (
+                <FileInput label="صورة الهوية" current={field.value} onChange={field.onChange} />
+              )}
+            />
+            <Controller
+              name="driverCardPhoto"
+              control={control}
+              render={({ field }) => (
+                <FileInput label="صورة البطاقة" current={field.value} onChange={field.onChange} />
+              )}
+            />
           </div>
 
           {/* ── Actions ── */}
@@ -621,14 +578,14 @@ export function DriverFormModal({
             <button
               type="button"
               onClick={onClose}
-              disabled={saving}
+              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",
+                cursor: isSubmitting ? "not-allowed" : "pointer",
                 fontFamily: "var(--font-sans)",
               }}
             >
@@ -636,20 +593,20 @@ export function DriverFormModal({
             </button>
             <button
               type="submit"
-              disabled={saving}
+              disabled={isSubmitting}
               style={{
                 height: 40, padding: "0 1.5rem",
                 borderRadius: "var(--radius-md)",
                 border: "none",
-                background: saving ? "var(--color-brand-400)" : "var(--color-brand-600)",
+                background: isSubmitting ? "var(--color-brand-400)" : "var(--color-brand-600)",
                 fontSize: 13, fontWeight: 700, color: "#FFF",
-                cursor: saving ? "not-allowed" : "pointer",
+                cursor: isSubmitting ? "not-allowed" : "pointer",
                 display: "flex", alignItems: "center", gap: 8,
                 fontFamily: "var(--font-sans)",
               }}
             >
-              {saving && <Spinner size="sm" className="text-white" />}
+              {isSubmitting && <Spinner size="sm" className="text-white" />}
-              {saving ? "جارٍ الحفظ…" : isNew ? "إضافة السائق" : "حفظ التغييرات"}
+              {isSubmitting ? "جارٍ الحفظ…" : isNew ? "إضافة السائق" : "حفظ التغييرات"}
             </button>
           </div>
         </form>

src/Components/Trip/Tripformmodal.tsx

@@ -1,14 +1,14 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import * as yup from "yup";
+import { useForm } from "react-hook-form";
-import { Spinner } from "../UI";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Alert, Spinner } from "../UI";
 import { getStoredToken } from "@/src/lib/auth";
 import {
   createTripSchema,
   updateTripSchema,
 } from "@/src/validations/trip.validator";
-import type { TripSchemaErrors } from "@/src/validations/trip.validator";
 import type {
   Trip,
   TripStatus,
@@ -21,7 +21,6 @@ import type { DriverOption } from "@/src/types/driver";
 import type { CarOption } from "@/src/types/car";
 import type { BranchOption } from "@/src/types/branch";
 
-
 // ── Shared styles ────────────────────────────────────────────────────────────
 
 const inputBase: React.CSSProperties = {
@@ -68,9 +67,28 @@ const optionalLabelStyle: React.CSSProperties = {
   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
+// the raw "YYYY-MM-DDTHH:mm" value the user typed — the transform only
+// affects what's handed to the yup resolver and to onSubmit.
 
-
+interface TripFormValues {
-
+  title: string;
+  driverId: string;
+  carId: string;
+  branchId: string;
+  status: TripStatus;
+  startTime: string;
+  endTime: string;
+  collectedCount: number | undefined;
+  deliveredCount: number | undefined;
+  returnedCount: number | undefined;
+  totalCashCollected: number | undefined;
+  notes: string;
+  endReason: string;
+  reason: string; // update-only
+}
 
 // ── Props ────────────────────────────────────────────────────────────────────
 
@@ -103,39 +121,35 @@ export function TripFormModal({
     carService.getActiveOptions(token).then(setCars).catch(() => {});
     branchService.getOptions(token).then(setBranches).catch(() => {});
   }, []);
-  //console.log("cars", cars);
-  // ── Form state ────────────────────────────────────────────────────────────
-  const [title, setTitle] = useState(editTrip?.title ?? "");
-  const [driverId, setDriverId] = useState(editTrip?.driverId ?? "");
-  const [carId, setCarId] = useState(editTrip?.carId ?? "");
-  const [branchId, setBranchId] = useState(editTrip?.branchId ?? "");
-  const [status, setStatus] = useState<TripStatus>(
-    editTrip?.status ?? "Scheduled",
-  );
-  const [startTime, setStartTime] = useState(
-    editTrip?.startTime?.slice(0, 16) ?? "",
-  );
-  const [endTime, setEndTime] = useState(editTrip?.endTime?.slice(0, 16) ?? "");
-  const [collectedCount, setCollectedCount] = useState<string>(
-    editTrip?.collectedCount != null ? String(editTrip.collectedCount) : "",
-  );
-  const [deliveredCount, setDeliveredCount] = useState<string>(
-    editTrip?.deliveredCount != null ? String(editTrip.deliveredCount) : "",
-  );
-  const [returnedCount, setReturnedCount] = useState<string>(
-    editTrip?.returnedCount != null ? String(editTrip.returnedCount) : "",
-  );
-  const [totalCashCollected, setTotalCashCollected] = useState<string>(
-    editTrip?.totalCashCollected != null
-      ? String(editTrip.totalCashCollected)
-      : "",
-  );
-  const [notes, setNotes] = useState(editTrip?.notes ?? "");
-  const [endReason, setEndReason] = useState(editTrip?.endReason ?? "");
-  const [reason, setReason] = useState(""); // update-only
 
-  const [errors, setErrors] = useState<TripSchemaErrors>({});
+  // ── react-hook-form ────────────────────────────────────────────────────────
-  const [saving, setSaving] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    setError,
+    formState: { errors, isSubmitting },
+  } = useForm<TripFormValues>({
+    resolver: yupResolver(isNew ? createTripSchema : updateTripSchema) as never,
+    defaultValues: {
+      title: editTrip?.title ?? "",
+      driverId: editTrip?.driverId ?? "",
+      carId: editTrip?.carId ?? "",
+      branchId: editTrip?.branchId ?? "",
+      status: editTrip?.status ?? "Scheduled",
+      startTime: editTrip?.startTime?.slice(0, 16) ?? "",
+      endTime: editTrip?.endTime?.slice(0, 16) ?? "",
+      collectedCount: editTrip?.collectedCount ?? undefined,
+      deliveredCount: editTrip?.deliveredCount ?? undefined,
+      returnedCount: editTrip?.returnedCount ?? undefined,
+      totalCashCollected:
+        editTrip?.totalCashCollected != null ? Number(editTrip.totalCashCollected) : undefined,
+      notes: editTrip?.notes ?? "",
+      endReason: editTrip?.endReason ?? "",
+      reason: "",
+    },
+  });
+
+  const [apiError, setApiError] = useState("");
   const firstRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -149,67 +163,58 @@ export function TripFormModal({
     return () => window.removeEventListener("keydown", h);
   }, [onClose]);
 
-  // ── Error style helper ────────────────────────────────────────────────────
+  const withError = (hasError: boolean): React.CSSProperties => ({
-  const inputStyle = (field: keyof TripSchemaErrors): React.CSSProperties => ({
     ...inputBase,
-    ...(errors[field]
+    ...(hasError ? { borderColor: "var(--color-danger)", background: "#FEF2F2" } : {}),
-      ? { borderColor: "var(--color-danger)", background: "#FEF2F2" }
-      : {}),
   });
 
-  const clearErr = (field: keyof TripSchemaErrors) =>
+  const numberField = (
-    setErrors((p) => ({ ...p, [field]: undefined }));
+    field: "collectedCount" | "deliveredCount" | "returnedCount" | "totalCashCollected",
+  ) =>
+    register(field, {
+      setValueAs: (v) => (v === "" || v === null ? undefined : Number(v)),
+    });
+
+  // datetime-local -> ISO-8601, applied at the RHF-value level only (DOM input
+  // keeps showing the raw datetime-local string the user picked).
+  const dateTimeField = (field: "startTime" | "endTime") =>
+    register(field, {
+      setValueAs: (v) => (v ? `${v}:00.000Z` : ""),
+    });
 
   // ── Submit ────────────────────────────────────────────────────────────────
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
 
+  const submitHandler = async (data: TripFormValues) => {
     const raw: Record<string, unknown> = {
-      title: title || undefined,
+      title: data.title || undefined,
-      driverId: driverId || undefined,
+      driverId: data.driverId || undefined,
-      carId: carId || undefined,
+      carId: data.carId || undefined,
-      branchId: branchId || undefined,
+      branchId: data.branchId || undefined,
-      status: status || undefined,
+      status: data.status || undefined,
-      startTime: startTime ? `${startTime}:00.000Z` : undefined,
+      startTime: data.startTime || undefined,
-      endTime: endTime ? `${endTime}:00.000Z` : undefined,
+      endTime: data.endTime || undefined,
-      collectedCount:
+      collectedCount: data.collectedCount,
-        collectedCount !== "" ? Number(collectedCount) : undefined,
+      deliveredCount: data.deliveredCount,
-      deliveredCount:
+      returnedCount: data.returnedCount,
-        deliveredCount !== "" ? Number(deliveredCount) : undefined,
+      totalCashCollected: data.totalCashCollected,
-      returnedCount: returnedCount !== "" ? Number(returnedCount) : undefined,
+      notes: data.notes || undefined,
-      totalCashCollected:
+      endReason: data.endReason || undefined,
-        totalCashCollected !== "" ? Number(totalCashCollected) : undefined,
+      ...(!isNew && data.reason ? { reason: data.reason } : {}),
-      notes: notes || undefined,
-      endReason: endReason || undefined,
-      ...(!isNew && reason ? { reason } : {}),
     };
 
-    // ── Client-side validation ────────────────────────────────────────────
+    setApiError("");
     try {
-      const schema = isNew ? createTripSchema : updateTripSchema;
+      const ok = await onSubmit(raw as CreateTripPayload | UpdateTripPayload, isNew);
-      await schema.validate(raw, { abortEarly: false });
+      if (ok) {
+        onClose();
+      } else {
+        setError("title", { message: "حدث خطأ غير متوقع. يرجى المحاولة لاحقاً." });
+        setApiError("حدث خطأ غير متوقع. يرجى المحاولة لاحقاً.");
+      }
     } catch (err) {
-      if (err instanceof yup.ValidationError) {
+      const message = err instanceof Error ? err.message : "حدث خطأ غير متوقع. يرجى المحاولة لاحقاً.";
-        const map: TripSchemaErrors = {};
+      setError("title", { message });
-        err.inner.forEach((e) => {
+      setApiError(message);
-          if (e.path) (map as Record<string, string>)[e.path] = e.message;
-        });
-        setErrors(map);
-      }
-      return;
-    }
-
-    // ── Call parent handler (notification emitted by the hook) ────────────
-    setSaving(true);
-    try {
-      const ok = await onSubmit(
-        raw as CreateTripPayload | UpdateTripPayload,
-        isNew,
-      );
-      if (ok) onClose();
-      // on failure the hook already fired an error notification — nothing extra needed here
-    } finally {
-      setSaving(false);
     }
   };
 
@@ -279,14 +284,7 @@ export function TripFormModal({
               padding: 4,
             }}
           >
-            <svg
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-              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>
@@ -295,7 +293,7 @@ export function TripFormModal({
 
         {/* Form */}
         <form
-          onSubmit={handleSubmit}
+          onSubmit={handleSubmit(submitHandler)}
           noValidate
           style={{
             padding: "1.5rem",
@@ -304,6 +302,10 @@ export function TripFormModal({
             gap: "1rem",
           }}
         >
+          {errors.title?.type === "manual" && (
+            <Alert type="error" message={errors.title.message ?? ""} onClose={() => setApiError("")} />
+          )}
+
           {/* ── Section:trip management── */}
           <p style={sectionHeadingStyle}>أساسيات الرحلة</p>
 
@@ -312,37 +314,21 @@ export function TripFormModal({
             عنوان الرحلة <span style={{ color: "var(--color-danger)" }}>*</span>
             <input
               ref={firstRef}
-              style={inputStyle("title")}
+              style={withError(!!errors.title && errors.title.type !== "manual")}
-              value={title}
+              {...register("title")}
-              onChange={(e) => {
-                setTitle(e.target.value);
-                clearErr("title");
-              }}
               placeholder="مثال: توزيع الرياض الشمالي"
               dir="rtl"
             />
-            {errors.title && <span style={errorTextStyle}>{errors.title}</span>}
+            {errors.title && errors.title.type !== "manual" && (
+              <span style={errorTextStyle}>{errors.title.message}</span>
+            )}
           </label>
 
-          <div
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
-            style={{
-              display: "grid",
-              gridTemplateColumns: "1fr 1fr",
-              gap: "0.75rem",
-            }}
-          >
             {/* Driver */}
             <label style={labelStyle}>
               السائق <span style={{ color: "var(--color-danger)" }}>*</span>
-              <select
+              <select style={{ ...withError(!!errors.driverId), cursor: "pointer" }} {...register("driverId")} dir="rtl">
-                style={{ ...inputStyle("driverId"), cursor: "pointer" }}
-                value={driverId}
-                onChange={(e) => {
-                  setDriverId(e.target.value);
-                  clearErr("driverId");
-                }}
-                dir="rtl"
-              >
                 <option value="">اختر السائق</option>
                 {drivers.map((d) => (
                   <option key={d.id} value={d.id}>
@@ -350,23 +336,13 @@ export function TripFormModal({
                   </option>
                 ))}
               </select>
-              {errors.driverId && (
+              {errors.driverId && <span style={errorTextStyle}>{errors.driverId.message}</span>}
-                <span style={errorTextStyle}>{errors.driverId}</span>
-              )}
             </label>
 
             {/* Car */}
             <label style={labelStyle}>
               السيارة <span style={{ color: "var(--color-danger)" }}>*</span>
-              <select
+              <select style={{ ...withError(!!errors.carId), cursor: "pointer" }} {...register("carId")} dir="rtl">
-                style={{ ...inputStyle("carId"), cursor: "pointer" }}
-                value={carId}
-                onChange={(e) => {
-                  setCarId(e.target.value);
-                  clearErr("carId");
-                }}
-                dir="rtl"
-              >
                 <option value="">اختر السيارة</option>
                 {cars.map((c) => (
                   <option key={c.id} value={c.id}>
@@ -374,52 +350,27 @@ export function TripFormModal({
                   </option>
                 ))}
               </select>
-              {errors.carId && (
+              {errors.carId && <span style={errorTextStyle}>{errors.carId.message}</span>}
-                <span style={errorTextStyle}>{errors.carId}</span>
-              )}
             </label>
           </div>
 
-          <div
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
-            style={{
-              display: "grid",
-              gridTemplateColumns: "1fr 1fr",
-              gap: "0.75rem",
-            }}
-          >
             {/* Branch */}
             <label style={labelStyle}>
               الفرع <span style={{ color: "var(--color-danger)" }}>*</span>
-              <select
+              <select style={{ ...withError(!!errors.branchId), cursor: "pointer" }} {...register("branchId")} dir="rtl">
-                style={{ ...inputStyle("branchId"), cursor: "pointer" }}
-                value={branchId}
-                onChange={(e) => {
-                  setBranchId(e.target.value);
-                  clearErr("branchId");
-                }}
-                dir="rtl"
-              >
                 <option value="">اختر الفرع</option>
                 {branches.map((b) => (
-                  <option key={b.id} value={b.id}>
+                  <option key={b.id} value={b.id}>{b.name}</option>
-                    {b.name}
-                  </option>
                 ))}
               </select>
-              {errors.branchId && (
+              {errors.branchId && <span style={errorTextStyle}>{errors.branchId.message}</span>}
-                <span style={errorTextStyle}>{errors.branchId}</span>
-              )}
             </label>
 
             {/* Status */}
             <label style={labelStyle}>
               الحالة
-              <select
+              <select style={{ ...inputBase, cursor: "pointer" }} {...register("status")} dir="rtl">
-                style={{ ...inputBase, cursor: "pointer" }}
-                value={status}
-                onChange={(e) => setStatus(e.target.value as TripStatus)}
-                dir="rtl"
-              >
                 <option value="Scheduled">مجدولة</option>
                 <option value="InProgress">جارية</option>
                 <option value="Completed">مكتملة</option>
@@ -431,186 +382,73 @@ export function TripFormModal({
           {/* ── Section: التوقيت ── */}
           <p style={sectionHeadingStyle}>التوقيت</p>
 
-          <div
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
-            style={{
-              display: "grid",
-              gridTemplateColumns: "1fr 1fr",
-              gap: "0.75rem",
-            }}
-          >
             <label style={labelStyle}>
               وقت البدء <span style={optionalLabelStyle}>(اختياري)</span>
-              <input
+              <input type="datetime-local" style={withError(!!errors.startTime)} {...dateTimeField("startTime")} />
-                type="datetime-local"
+              {errors.startTime && <span style={errorTextStyle}>{errors.startTime.message}</span>}
-                style={inputStyle("startTime")}
-                value={startTime}
-                onChange={(e) => {
-                  setStartTime(e.target.value);
-                  clearErr("startTime");
-                }}
-              />
-              {errors.startTime && (
-                <span style={errorTextStyle}>{errors.startTime}</span>
-              )}
             </label>
 
             <label style={labelStyle}>
               وقت الانتهاء <span style={optionalLabelStyle}>(اختياري)</span>
-              <input
+              <input type="datetime-local" style={withError(!!errors.endTime)} {...dateTimeField("endTime")} />
-                type="datetime-local"
+              {errors.endTime && <span style={errorTextStyle}>{errors.endTime.message}</span>}
-                style={inputStyle("endTime")}
-                value={endTime}
-                onChange={(e) => {
-                  setEndTime(e.target.value);
-                  clearErr("endTime");
-                }}
-              />
-              {errors.endTime && (
-                <span style={errorTextStyle}>{errors.endTime}</span>
-              )}
             </label>
           </div>
 
           {/* ── Section: الأعداد والمبالغ ── */}
           <p style={sectionHeadingStyle}>الأعداد والمبالغ</p>
 
-          <div
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: "0.75rem" }}>
-            style={{
-              display: "grid",
-              gridTemplateColumns: "1fr 1fr 1fr 1fr",
-              gap: "0.75rem",
-            }}
-          >
             <label style={labelStyle}>
               المجمّع <span style={optionalLabelStyle}>(اختياري)</span>
-              <input
+              <input type="number" min="0" style={withError(!!errors.collectedCount)} {...numberField("collectedCount")} placeholder="0" dir="ltr" />
-                type="number"
+              {errors.collectedCount && <span style={errorTextStyle}>{errors.collectedCount.message}</span>}
-                min="0"
-                style={inputStyle("collectedCount")}
-                value={collectedCount}
-                onChange={(e) => {
-                  setCollectedCount(e.target.value);
-                  clearErr("collectedCount");
-                }}
-                placeholder="0"
-                dir="ltr"
-              />
-              {errors.collectedCount && (
-                <span style={errorTextStyle}>{errors.collectedCount}</span>
-              )}
             </label>
 
             <label style={labelStyle}>
               المُسلَّم <span style={optionalLabelStyle}>(اختياري)</span>
-              <input
+              <input type="number" min="0" style={withError(!!errors.deliveredCount)} {...numberField("deliveredCount")} placeholder="0" dir="ltr" />
-                type="number"
+              {errors.deliveredCount && <span style={errorTextStyle}>{errors.deliveredCount.message}</span>}
-                min="0"
-                style={inputStyle("deliveredCount")}
-                value={deliveredCount}
-                onChange={(e) => {
-                  setDeliveredCount(e.target.value);
-                  clearErr("deliveredCount");
-                }}
-                placeholder="0"
-                dir="ltr"
-              />
-              {errors.deliveredCount && (
-                <span style={errorTextStyle}>{errors.deliveredCount}</span>
-              )}
             </label>
 
             <label style={labelStyle}>
               المُرتجع <span style={optionalLabelStyle}>(اختياري)</span>
-              <input
+              <input type="number" min="0" style={withError(!!errors.returnedCount)} {...numberField("returnedCount")} placeholder="0" dir="ltr" />
-                type="number"
+              {errors.returnedCount && <span style={errorTextStyle}>{errors.returnedCount.message}</span>}
-                min="0"
-                style={inputStyle("returnedCount")}
-                value={returnedCount}
-                onChange={(e) => {
-                  setReturnedCount(e.target.value);
-                  clearErr("returnedCount");
-                }}
-                placeholder="0"
-                dir="ltr"
-              />
-              {errors.returnedCount && (
-                <span style={errorTextStyle}>{errors.returnedCount}</span>
-              )}
             </label>
 
             <label style={labelStyle}>
               النقد المحصّل <span style={optionalLabelStyle}>(اختياري)</span>
-              <input
+              <input type="number" min="0" step="0.01" style={withError(!!errors.totalCashCollected)} {...numberField("totalCashCollected")} placeholder="0.00" dir="ltr" />
-                type="number"
+              {errors.totalCashCollected && <span style={errorTextStyle}>{errors.totalCashCollected.message}</span>}
-                min="0"
-                step="0.01"
-                style={inputStyle("totalCashCollected")}
-                value={totalCashCollected}
-                onChange={(e) => {
-                  setTotalCashCollected(e.target.value);
-                  clearErr("totalCashCollected");
-                }}
-                placeholder="0.00"
-                dir="ltr"
-              />
-              {errors.totalCashCollected && (
-                <span style={errorTextStyle}>{errors.totalCashCollected}</span>
-              )}
             </label>
           </div>
 
           {/* ── Section: ملاحظات ── */}
           <p style={sectionHeadingStyle}>ملاحظات</p>
 
-          <div
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
-            style={{
-              display: "grid",
-              gridTemplateColumns: "1fr 1fr",
-              gap: "0.75rem",
-            }}
-          >
             <label style={labelStyle}>
               ملاحظات <span style={optionalLabelStyle}>(اختياري)</span>
               <textarea
-                style={{
+                style={{ ...withError(!!errors.notes), height: 72, padding: "0.5rem 0.75rem", resize: "vertical" }}
-                  ...inputBase,
+                {...register("notes")}
-                  height: 72,
-                  padding: "0.5rem 0.75rem",
-                  resize: "vertical",
-                }}
-                value={notes}
-                onChange={(e) => {
-                  setNotes(e.target.value);
-                  clearErr("notes");
-                }}
                 placeholder="أي ملاحظات إضافية…"
                 dir="rtl"
               />
-              {errors.notes && (
+              {errors.notes && <span style={errorTextStyle}>{errors.notes.message}</span>}
-                <span style={errorTextStyle}>{errors.notes}</span>
-              )}
             </label>
 
             <label style={labelStyle}>
               سبب الإنهاء <span style={optionalLabelStyle}>(اختياري)</span>
               <textarea
-                style={{
+                style={{ ...withError(!!errors.endReason), height: 72, padding: "0.5rem 0.75rem", resize: "vertical" }}
-                  ...inputBase,
+                {...register("endReason")}
-                  height: 72,
-                  padding: "0.5rem 0.75rem",
-                  resize: "vertical",
-                }}
-                value={endReason}
-                onChange={(e) => {
-                  setEndReason(e.target.value);
-                  clearErr("endReason");
-                }}
                 placeholder="سبب إنهاء أو إلغاء الرحلة…"
                 dir="rtl"
               />
-              {errors.endReason && (
+              {errors.endReason && <span style={errorTextStyle}>{errors.endReason.message}</span>}
-                <span style={errorTextStyle}>{errors.endReason}</span>
-              )}
             </label>
           </div>
 
@@ -620,13 +458,10 @@ export function TripFormModal({
               <p style={sectionHeadingStyle}>سجل التغيير</p>
               <label style={labelStyle}>
                 سبب التعديل{" "}
-                <span style={optionalLabelStyle}>
+                <span style={optionalLabelStyle}>(مطلوب عند تغيير السائق أو السيارة)</span>
-                  (مطلوب عند تغيير السائق أو السيارة)
-                </span>
                 <input
                   style={inputBase}
-                  value={reason}
+                  {...register("reason")}
-                  onChange={(e) => setReason(e.target.value)}
                   placeholder="مثال: تغيير السائق بسبب إجازة طارئة"
                   dir="rtl"
                 />
@@ -635,18 +470,11 @@ export function TripFormModal({
           )}
 
           {/* ── Actions ── */}
-          <div
+          <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end", paddingTop: "0.5rem" }}>
-            style={{
-              display: "flex",
-              gap: "0.5rem",
-              justifyContent: "flex-end",
-              paddingTop: "0.5rem",
-            }}
-          >
             <button
               type="button"
               onClick={onClose}
-              disabled={saving}
+              disabled={isSubmitting}
               style={{
                 height: 40,
                 padding: "0 1.25rem",
@@ -656,7 +484,7 @@ export function TripFormModal({
                 fontSize: 13,
                 fontWeight: 600,
                 color: "var(--color-text-secondary)",
-                cursor: saving ? "not-allowed" : "pointer",
+                cursor: isSubmitting ? "not-allowed" : "pointer",
                 fontFamily: "var(--font-sans)",
               }}
             >
@@ -664,31 +492,25 @@ export function TripFormModal({
             </button>
             <button
               type="submit"
-              disabled={saving}
+              disabled={isSubmitting}
               style={{
                 height: 40,
                 padding: "0 1.5rem",
                 borderRadius: "var(--radius-md)",
                 border: "none",
-                background: saving
+                background: isSubmitting ? "var(--color-brand-400)" : "var(--color-brand-600)",
-                  ? "var(--color-brand-400)"
-                  : "var(--color-brand-600)",
                 fontSize: 13,
                 fontWeight: 700,
                 color: "#FFF",
-                cursor: saving ? "not-allowed" : "pointer",
+                cursor: isSubmitting ? "not-allowed" : "pointer",
                 display: "flex",
                 alignItems: "center",
                 gap: 8,
                 fontFamily: "var(--font-sans)",
               }}
             >
-              {saving && <Spinner size="sm" className="text-white" />}
+              {isSubmitting && <Spinner size="sm" className="text-white" />}
-              {saving
+              {isSubmitting ? "جارٍ الحفظ…" : isNew ? "إضافة الرحلة" : "حفظ التغييرات"}
-                ? "جارٍ الحفظ…"
-                : isNew
-                  ? "إضافة الرحلة"
-                  : "حفظ التغييرات"}
             </button>
           </div>
         </form>

src/Components/UI/Header.tsx

@@ -0,0 +1,179 @@
+export default function Header({
+  state,
+  search,
+  setSearch,
+  module,
+  setModule,
+  setPage,
+  title,
+  mainTitle,
+  name,
+  isAudit = false,
+  onAdd,
+}: {
+  state: any;
+  search: string;
+  setSearch: (search: string) => void;
+  module: string;
+  setModule: (module: string) => void;
+  setPage: (page: number) => void;
+  title: string;
+  mainTitle: string;
+  name: string;
+  isAudit?: boolean;
+  onAdd?: () => void;
+}) {
+  return (
+    <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,
+        }}
+      >
+        {title}
+      </p>
+      <div className="mt-3 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <h1
+            style={{
+              fontSize: "1.5rem",
+              fontWeight: 700,
+              color: "var(--color-text-primary)",
+              margin: 0,
+            }}
+          >
+            {mainTitle}
+          </h1>
+          <p
+            style={{
+              marginTop: "0.25rem",
+              fontSize: 13,
+              color: "var(--color-text-muted)",
+            }}
+          >
+            إجمالي{" "}
+            <strong style={{ color: "var(--color-text-primary)" }}>
+              {state.total}
+            </strong>{" "}
+            {name}
+          </p>
+        </div>
+        <div
+          style={{
+            display: "flex",
+            gap: "0.5rem",
+            flexWrap: "wrap",
+            alignItems: "center",
+          }}
+        >
+          <input
+            type="text"
+            placeholder="بحث   "
+            value={search}
+            onChange={(e) => {
+              setSearch(e.target.value);
+              setPage(1);
+            }}
+            dir="rtl"
+            style={{
+              width: 220,
+              height: 40,
+              padding: "0 0.75rem",
+              borderRadius: "var(--radius-lg)",
+              border: "1px solid var(--color-border)",
+              background: "var(--color-surface)",
+              fontSize: 13,
+              color: "var(--color-text-primary)",
+              outline: "none",
+              fontFamily: "var(--font-sans)",
+            }}
+          />
+          {isAudit ? (
+            <select
+              value={module}
+              onChange={(e) => {
+                setModule(e.target.value);
+                setPage(1);
+              }}
+              dir="rtl"
+              style={{
+                height: 40,
+                padding: "0 0.75rem",
+                borderRadius: "var(--radius-lg)",
+                border: "1px solid var(--color-border)",
+                background: "var(--color-surface)",
+                fontSize: 13,
+                color: "var(--color-text-secondary)",
+                outline: "none",
+                fontFamily: "var(--font-sans)",
+              }}
+            >
+              <option value="">كل الوحدات</option>
+              {[
+                "User",
+                "Driver",
+                "Car",
+                "Trip",
+                "Order",
+                "Client",
+                "Role",
+                "Branch",
+              ].map((m) => (
+                <option key={m} value={m}>
+                  {m}
+                </option>
+              ))}
+            </select>
+          ) : (
+            <button
+              type="button"
+              onClick={onAdd}
+              style={{
+                height: 40,
+                padding: "0 1.125rem",
+                borderRadius: "var(--radius-lg)",
+                border: "none",
+                background: "var(--color-brand-600)",
+                fontSize: 13,
+                fontWeight: 700,
+                color: "#FFF",
+                cursor: "pointer",
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 7,
+                fontFamily: "var(--font-sans)",
+                boxShadow: "0 1px 4px rgba(37,99,235,.35)",
+                whiteSpace: "nowrap",
+              }}
+            >
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2.5"
+              >
+                <line x1="12" y1="5" x2="12" y2="19" />
+                <line x1="5" y1="12" x2="19" y2="12" />
+              </svg>
+              إضافة {name}
+            </button>
+          )}
+        </div>
+      </div>
+    </header>
+  );
+}

src/Components/car/CarFormModal.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
-import * as yup from "yup";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
 import { Alert, Spinner } from "../UI";
 import { getStoredToken } from "@/src/lib/auth";
 import {
@@ -10,7 +11,6 @@ import {
 } from "@/src/validations/car.validator";
 import type {
   Car,
-  CarFormErrors,
   CreateCarPayload,
   InsuranceStatus,
   UpdateCarPayload,
@@ -18,7 +18,6 @@ import type {
 import type { Branch } from "@/src/types/branch";
 import { branchService } from "@/src/services/branch.service";
 
-
 // ── Shared input style ────────────────────────────────────────────────────────
 
 const inputBase: React.CSSProperties = {
@@ -49,27 +48,14 @@ const errorTextStyle: React.CSSProperties = {
   fontWeight: 500,
 };
 
-// ── yup validation ────────────────────────────────────────────────────────────
+const sectionHeadingStyle: React.CSSProperties = {
-
+  fontSize: 11,
-async function validate(
+  letterSpacing: "0.25em",
-  form: Partial<CreateCarPayload>,
+  textTransform: "uppercase",
-  isNew: boolean,
+  color: "var(--color-text-hint)",
-): Promise<CarFormErrors> {
+  fontWeight: 700,
-  const schema = isNew ? createCarSchema : updateCarSchema;
+  margin: "0.5rem 0 0",
-  try {
+};
-    await schema.validate(form, { abortEarly: false });
-    return {};
-  } catch (err) {
-    if (err instanceof yup.ValidationError) {
-      return err.inner.reduce<CarFormErrors>((acc, e) => {
-        const field = e.path as keyof CarFormErrors;
-        if (field && !acc[field]) acc[field] = e.message;
-        return acc;
-      }, {});
-    }
-    return {};
-  }
-}
 
 // ── Date helper ───────────────────────────────────────────────────────────────
 // <input type="date"> gives "YYYY-MM-DD"; backend expects full ISO-8601.
@@ -80,6 +66,30 @@ function toIsoDateTime(val: string): string {
   return `${val}T00:00:00.000Z`;
 }
 
+// ── Form values shape ─────────────────────────────────────────────────────────
+// Mirrors the subset of CreateCarPayload/UpdateCarPayload actually edited here.
+
+interface CarFormValues {
+  manufacturer: string;
+  model: string;
+  color: string;
+  plateNumber: string;
+  plateLetters: string;
+  plateType: string;
+  registrationNumber: string;
+  vinNumber: string;
+  branchId: string;
+  currentStatus: Car["currentStatus"];
+  insuranceStatus: InsuranceStatus;
+  registrationExpiryDate: string;
+  insuranceExpiryDate: string;
+  inspectionExpiryDate: string;
+  gpsDeviceId: string;
+  year: number | undefined;
+  capacity: number | undefined;
+  weight: number | undefined;
+}
+
 // ── Props ─────────────────────────────────────────────────────────────────────
 
 interface CarFormModalProps {
@@ -125,46 +135,39 @@ const loadBranches = useCallback(() => {
     loadBranches();
   }, [loadBranches]);
 
-  // ── Form state ─────────────────────────────────────────────────────────────
+  // ── react-hook-form ────────────────────────────────────────────────────────
-  const [manufacturer, setManufacturer] = useState(editCar?.manufacturer ?? "");
+  const {
-  const [model, setModel] = useState(editCar?.model ?? "");
+    register,
-  const [color, setColor] = useState(editCar?.color ?? "");
+    handleSubmit,
-  const [plateNumber, setPlateNumber] = useState(editCar?.plateNumber ?? "");
+    setError,
-  const [plateLetters, setPlateLetters] = useState(editCar?.plateLetters ?? "");
+    formState: { errors, isSubmitting },
-  const [plateType, setPlateType] = useState(editCar?.plateType ?? "");
+  } = useForm<CarFormValues>({
-  const [registrationNumber, setRegistrationNumber] = useState(
+    resolver: yupResolver(isNew ? createCarSchema : updateCarSchema) as never,
-    editCar?.registrationNumber ?? "",
+    defaultValues: {
-  );
+      manufacturer: editCar?.manufacturer ?? "",
-  const [vinNumber, setVinNumber] = useState(editCar?.vinNumber ?? "");
+      model: editCar?.model ?? "",
-  const [branchId, setBranchId] = useState(editCar?.branch?.id ?? "");
+      color: editCar?.color ?? "",
-  const [currentStatus, setCurrentStatus] = useState<Car["currentStatus"]>(
+      plateNumber: editCar?.plateNumber ?? "",
-    editCar?.currentStatus ?? "Active",
+      plateLetters: editCar?.plateLetters ?? "",
-  );
+      plateType: editCar?.plateType ?? "",
-  const [insuranceStatus, setInsuranceStatus] = useState<InsuranceStatus>(
+      registrationNumber: editCar?.registrationNumber ?? "",
-    (editCar?.insuranceStatus as InsuranceStatus) ?? "Valid",
+      vinNumber: editCar?.vinNumber ?? "",
-  );
+      branchId: editCar?.branch?.id ?? "",
-  const [registrationExpiryDate, setRegistrationExpiryDate] = useState(
+      currentStatus: editCar?.currentStatus ?? "Active",
-    editCar?.registrationExpiryDate?.slice(0, 10) ?? "",
+      insuranceStatus: (editCar?.insuranceStatus as InsuranceStatus) ?? "Valid",
-  );
+      registrationExpiryDate: editCar?.registrationExpiryDate?.slice(0, 10) ?? "",
-  const [insuranceExpiryDate, setInsuranceExpiryDate] = useState(
+      insuranceExpiryDate: editCar?.insuranceExpiryDate?.slice(0, 10) ?? "",
-    editCar?.insuranceExpiryDate?.slice(0, 10) ?? "",
+      inspectionExpiryDate: editCar?.inspectionExpiryDate?.slice(0, 10) ?? "",
-  );
+      gpsDeviceId: editCar?.gpsDeviceId ?? "",
-  const [inspectionExpiryDate, setInspectionExpiryDate] = useState(
+      // NOTE: kept as number | undefined instead of RHF's valueAsNumber so an
-    editCar?.inspectionExpiryDate?.slice(0, 10) ?? "",
+      // empty input maps to `undefined` (matches the old parseNum() guard)
-  );
+      // rather than NaN, which would otherwise trip the yup .typeError() rule.
-  const [gpsDeviceId, setGpsDeviceId] = useState(editCar?.gpsDeviceId ?? "");
+      year: editCar?.year ?? new Date().getFullYear(),
-  const [year, setYear] = useState<number | undefined>(
+      capacity: editCar?.capacity ?? undefined,
-    editCar?.year ?? new Date().getFullYear(),
+      weight: editCar?.weight ?? undefined,
-  );
+    },
-  const [capacity, setCapacity] = useState<number | undefined>(
+  });
-    editCar?.capacity ?? undefined,
-  );
-  const [weight, setWeight] = useState<number | undefined>(
-    editCar?.weight ?? undefined,
-  );
 
-  const [errors, setErrors] = useState<CarFormErrors>({});
-  const [saving, setSaving] = useState(false);
   const [apiError, setApiError] = useState("");
   const firstRef = useRef<HTMLInputElement>(null);
 
@@ -179,84 +182,63 @@ const loadBranches = useCallback(() => {
     return () => window.removeEventListener("keydown", h);
   }, [onClose]);
 
-  const parseNum = (v: string): number | undefined =>
+  // Numeric fields: empty string -> undefined (never NaN), matching the
-    v.trim() === "" ? undefined : Number(v);
+  // behavior of the old parseNum() helper.
-
+  const numberField = (
-  const inputStyle = (field: keyof CarFormErrors): React.CSSProperties => ({
+    field: "year" | "capacity" | "weight",
-    ...inputBase,
+  ) =>
-    ...(errors[field]
+    register(field, {
-      ? { borderColor: "var(--color-danger)", background: "#FEF2F2" }
+      setValueAs: (v) => (v === "" || v === null ? undefined : Number(v)),
-      : {}),
     });
 
-  const clearFieldError = (field: keyof CarFormErrors) =>
+  const withError = (hasError: boolean): React.CSSProperties => ({
-    setErrors((p) => ({ ...p, [field]: undefined }));
+    ...inputBase,
+    ...(hasError ? { borderColor: "var(--color-danger)", background: "#FEF2F2" } : {}),
+  });
 
   // ── Submit ────────────────────────────────────────────────────────────────
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const submitHandler = async (data: CarFormValues) => {
-    e.preventDefault();
+    // Build final payload — convert date strings to ISO-8601 for the backend,
-
+    // and drop empty-optional fields exactly like the pre-refactor version did.
-    // Build snapshot for yup — include all fields so optional rules also run
-    const formSnapshot: Partial<CreateCarPayload> = {
-      manufacturer,
-      model,
-      year,
-      plateNumber,
-      plateLetters,
-      currentStatus,
-      insuranceStatus,
-      registrationNumber,
-      vinNumber,
-      ...(color && { color }),
-      ...(plateType && { plateType }),
-      ...(branchId && { branchId }),
-      ...(registrationExpiryDate && { registrationExpiryDate }),
-      ...(insuranceExpiryDate && { insuranceExpiryDate }),
-      ...(inspectionExpiryDate && { inspectionExpiryDate }),
-      ...(gpsDeviceId && { gpsDeviceId }),
-      ...(capacity !== undefined && { capacity }),
-      ...(weight !== undefined && { weight }),
-    };
-
-    const errs = await validate(formSnapshot, isNew);
-    if (Object.keys(errs).length) {
-      setErrors(errs);
-      return;
-    }
-
-    // Build final payload — convert date strings to ISO-8601 for the backend
     const raw: Record<string, unknown> = {
-      manufacturer,
+      manufacturer: data.manufacturer,
-      model,
+      model: data.model,
-      year,
+      year: data.year,
-      plateNumber,
+      plateNumber: data.plateNumber,
-      plateLetters,
+      plateLetters: data.plateLetters,
-      currentStatus,
+      currentStatus: data.currentStatus,
     };
-    if (color) raw.color = color;
+    if (data.color) raw.color = data.color;
-    if (plateType) raw.plateType = plateType;
+    if (data.plateType) raw.plateType = data.plateType;
-    if (registrationNumber) raw.registrationNumber = registrationNumber;
+    if (data.registrationNumber) raw.registrationNumber = data.registrationNumber;
-    if (vinNumber) raw.vinNumber = vinNumber;
+    if (data.vinNumber) raw.vinNumber = data.vinNumber;
-    if (branchId) raw.branchId = branchId;
+    if (data.branchId) raw.branchId = data.branchId;
-    if (insuranceStatus) raw.insuranceStatus = insuranceStatus;
+    if (data.insuranceStatus) raw.insuranceStatus = data.insuranceStatus;
-    if (registrationExpiryDate)
+    if (data.registrationExpiryDate)
-      raw.registrationExpiryDate = toIsoDateTime(registrationExpiryDate);
+      raw.registrationExpiryDate = toIsoDateTime(data.registrationExpiryDate);
-    if (insuranceExpiryDate)
+    if (data.insuranceExpiryDate)
-      raw.insuranceExpiryDate = toIsoDateTime(insuranceExpiryDate);
+      raw.insuranceExpiryDate = toIsoDateTime(data.insuranceExpiryDate);
-    if (inspectionExpiryDate)
+    if (data.inspectionExpiryDate)
-      raw.inspectionExpiryDate = toIsoDateTime(inspectionExpiryDate);
+      raw.inspectionExpiryDate = toIsoDateTime(data.inspectionExpiryDate);
-    if (gpsDeviceId) raw.gpsDeviceId = gpsDeviceId;
+    if (data.gpsDeviceId) raw.gpsDeviceId = data.gpsDeviceId;
-    if (capacity !== undefined) raw.capacity = capacity;
+    // Defensive re-coercion: mirrors CarMaintenanceFormModal's
-    if (weight !== undefined) raw.weight = weight;
+    // toNumberOrUndefined() safeguard, in case capacity/weight ever round-trip
+    // as numeric strings from a Decimal-backed field on the backend.
+    if (data.capacity !== undefined && data.capacity !== null && !Number.isNaN(Number(data.capacity)))
+      raw.capacity = Number(data.capacity);
+    if (data.weight !== undefined && data.weight !== null && !Number.isNaN(Number(data.weight)))
+      raw.weight = Number(data.weight);
 
     const payload = raw as unknown as CreateCarPayload;
-    setSaving(true);
     setApiError("");
     const ok = await onSubmit(payload, isNew);
-    setSaving(false);
+    if (ok) {
-    if (ok) onClose();
+      onClose();
-    else setApiError("حدث خطأ غير متوقع. يرجى المحاولة لاحقاً.");
+    } else {
+      setError("manufacturer", { message: "حدث خطأ غير متوقع. يرجى المحاولة لاحقاً." });
+      setApiError("حدث خطأ غير متوقع. يرجى المحاولة لاحقاً.");
+    }
   };
 
   // ── Render ────────────────────────────────────────────────────────────────
@@ -328,9 +310,7 @@ const loadBranches = useCallback(() => {
                 margin: "4px 0 0",
               }}
             >
-              {isNew
+              {isNew ? "مركبة جديدة" : `${editCar?.manufacturer} ${editCar?.model}`}
-                ? "مركبة جديدة"
-                : `${editCar?.manufacturer} ${editCar?.model}`}
             </h2>
           </div>
           <button
@@ -357,7 +337,7 @@ const loadBranches = useCallback(() => {
 
         {/* Form */}
         <form
-          onSubmit={handleSubmit}
+          onSubmit={handleSubmit(submitHandler)}
           noValidate
           style={{
             padding: "1.5rem",
@@ -369,241 +349,130 @@ const loadBranches = useCallback(() => {
           }}
           dir="rtl"
         >
-          {apiError && (
+          {errors.manufacturer?.type === "manual" && (
             <Alert
               type="error"
-              message={apiError}
+              message={errors.manufacturer.message ?? ""}
               onClose={() => setApiError("")}
             />
           )}
 
           {/* ── Section: Basic Info ── */}
-          <p
+          <p style={sectionHeadingStyle}>بيانات أساسية</p>
-            style={{
-              fontSize: 11,
-              letterSpacing: "0.25em",
-              textTransform: "uppercase",
-              color: "var(--color-text-hint)",
-              fontWeight: 700,
-              margin: 0,
-            }}
-          >
-            بيانات أساسية
-          </p>
 
-          <div
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
-            style={{
-              display: "grid",
-              gridTemplateColumns: "1fr 1fr",
-              gap: "0.75rem",
-            }}
-          >
             <label style={labelStyle}>
               الشركة المصنعة *
               <input
                 ref={firstRef}
-                style={inputStyle("manufacturer")}
+                style={withError(!!errors.manufacturer && errors.manufacturer.type !== "manual")}
-                value={manufacturer}
+                {...register("manufacturer")}
-                onChange={(e) => {
-                  setManufacturer(e.target.value);
-                  clearFieldError("manufacturer");
-                }}
                 placeholder="تويوتا"
                 dir="rtl"
                 autoComplete="off"
               />
-              {errors.manufacturer && (
+              {errors.manufacturer && errors.manufacturer.type !== "manual" && (
-                <span style={errorTextStyle}>{errors.manufacturer}</span>
+                <span style={errorTextStyle}>{errors.manufacturer.message}</span>
               )}
             </label>
             <label style={labelStyle}>
               الموديل *
               <input
-                style={inputStyle("model")}
+                style={withError(!!errors.model)}
-                value={model}
+                {...register("model")}
-                onChange={(e) => {
-                  setModel(e.target.value);
-                  clearFieldError("model");
-                }}
                 placeholder="لاند كروزر"
                 dir="rtl"
               />
-              {errors.model && (
+              {errors.model && <span style={errorTextStyle}>{errors.model.message}</span>}
-                <span style={errorTextStyle}>{errors.model}</span>
-              )}
             </label>
           </div>
 
-          <div
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
-            style={{
-              display: "grid",
-              gridTemplateColumns: "1fr 1fr 1fr",
-              gap: "0.75rem",
-            }}
-          >
             <label style={labelStyle}>
               سنة الصنع *
               <input
-                style={inputStyle("year")}
+                style={withError(!!errors.year)}
                 type="number"
                 min={1900}
                 max={new Date().getFullYear() + 1}
-                value={year ?? ""}
+                {...numberField("year")}
-                onChange={(e) => {
-                  setYear(parseNum(e.target.value));
-                  clearFieldError("year");
-                }}
                 dir="ltr"
               />
-              {errors.year && <span style={errorTextStyle}>{errors.year}</span>}
+              {errors.year && <span style={errorTextStyle}>{errors.year.message}</span>}
             </label>
             <label style={labelStyle}>
               اللون
-              <input
+              <input style={inputBase} {...register("color")} placeholder="أبيض" dir="rtl" />
-                style={inputBase}
-                value={color}
-                onChange={(e) => setColor(e.target.value)}
-                placeholder="أبيض"
-                dir="rtl"
-              />
             </label>
             <label style={labelStyle}>
               نوع اللوحة
-              <input
+              <input style={inputBase} {...register("plateType")} placeholder="خاص" dir="rtl" />
-                style={inputBase}
-                value={plateType}
-                onChange={(e) => setPlateType(e.target.value)}
-                placeholder="خاص"
-                dir="rtl"
-              />
             </label>
           </div>
 
           {/* ── Section: Plate ── */}
-          <p
+          <p style={sectionHeadingStyle}>بيانات اللوحة</p>
-            style={{
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
-              fontSize: 11,
-              letterSpacing: "0.25em",
-              textTransform: "uppercase",
-              color: "var(--color-text-hint)",
-              fontWeight: 700,
-              margin: "0.5rem 0 0",
-            }}
-          >
-            بيانات اللوحة
-          </p>
-          <div
-            style={{
-              display: "grid",
-              gridTemplateColumns: "1fr 1fr",
-              gap: "0.75rem",
-            }}
-          >
             <label style={labelStyle}>
               رقم اللوحة *
               <input
-                style={inputStyle("plateNumber")}
+                style={withError(!!errors.plateNumber)}
-                value={plateNumber}
+                {...register("plateNumber")}
-                onChange={(e) => {
-                  setPlateNumber(e.target.value);
-                  clearFieldError("plateNumber");
-                }}
                 placeholder="1234"
                 dir="ltr"
               />
               {errors.plateNumber && (
-                <span style={errorTextStyle}>{errors.plateNumber}</span>
+                <span style={errorTextStyle}>{errors.plateNumber.message}</span>
               )}
             </label>
             <label style={labelStyle}>
               حروف اللوحة *
               <input
-                style={inputStyle("plateLetters")}
+                style={withError(!!errors.plateLetters)}
-                value={plateLetters}
+                {...register("plateLetters")}
-                onChange={(e) => {
-                  setPlateLetters(e.target.value);
-                  clearFieldError("plateLetters");
-                }}
                 placeholder="أ ب ج"
                 dir="rtl"
               />
               {errors.plateLetters && (
-                <span style={errorTextStyle}>{errors.plateLetters}</span>
+                <span style={errorTextStyle}>{errors.plateLetters.message}</span>
               )}
             </label>
           </div>
 
           {/* ── Section: Registration & Legal ── */}
-          <p
+          <p style={sectionHeadingStyle}>الترخيص والتأمين</p>
-            style={{
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
-              fontSize: 11,
-              letterSpacing: "0.25em",
-              textTransform: "uppercase",
-              color: "var(--color-text-hint)",
-              fontWeight: 700,
-              margin: "0.5rem 0 0",
-            }}
-          >
-            الترخيص والتأمين
-          </p>
-          <div
-            style={{
-              display: "grid",
-              gridTemplateColumns: "1fr 1fr",
-              gap: "0.75rem",
-            }}
-          >
             <label style={labelStyle}>
               رقم الاستمارة *
               <input
-                style={inputStyle("registrationNumber")}
+                style={withError(!!errors.registrationNumber)}
-                value={registrationNumber}
+                {...register("registrationNumber")}
-                onChange={(e) => {
-                  setRegistrationNumber(e.target.value);
-                  clearFieldError("registrationNumber");
-                }}
                 placeholder="SA-001234"
                 dir="ltr"
               />
               {errors.registrationNumber && (
-                <span style={errorTextStyle}>{errors.registrationNumber}</span>
+                <span style={errorTextStyle}>{errors.registrationNumber.message}</span>
               )}
             </label>
             <label style={labelStyle}>
               رقم الهيكل (VIN)
               <input
-                style={inputStyle("vinNumber")}
+                style={withError(!!errors.vinNumber)}
-                value={vinNumber}
+                {...register("vinNumber")}
-                onChange={(e) => {
-                  setVinNumber(e.target.value);
-                  clearFieldError("vinNumber");
-                }}
                 placeholder="1HGBH41JXMN109186"
                 dir="ltr"
               />
               {errors.vinNumber && (
-                <span style={errorTextStyle}>{errors.vinNumber}</span>
+                <span style={errorTextStyle}>{errors.vinNumber.message}</span>
               )}
             </label>
             <label style={labelStyle}>
               انتهاء الاستمارة
-              <input
+              <input style={inputBase} type="date" {...register("registrationExpiryDate")} />
-                style={inputBase}
-                type="date"
-                value={registrationExpiryDate}
-                onChange={(e) => setRegistrationExpiryDate(e.target.value)}
-              />
             </label>
             <label style={labelStyle}>
               حالة التأمين
-              <select
+              <select style={{ ...inputBase, cursor: "pointer" }} {...register("insuranceStatus")} dir="rtl">
-                style={{ ...inputBase, cursor: "pointer" }}
-                value={insuranceStatus}
-                onChange={(e) =>
-                  setInsuranceStatus(e.target.value as InsuranceStatus)
-                }
-                dir="rtl"
-              >
                 <option value="Valid">سارٍ</option>
                 <option value="Expired">منتهي</option>
                 <option value="NotInsured">غير مؤمَّن</option>
@@ -611,52 +480,20 @@ const loadBranches = useCallback(() => {
             </label>
             <label style={labelStyle}>
               انتهاء التأمين
-              <input
+              <input style={inputBase} type="date" {...register("insuranceExpiryDate")} />
-                style={inputBase}
-                type="date"
-                value={insuranceExpiryDate}
-                onChange={(e) => setInsuranceExpiryDate(e.target.value)}
-              />
             </label>
             <label style={labelStyle}>
               انتهاء الفحص الدوري
-              <input
+              <input style={inputBase} type="date" {...register("inspectionExpiryDate")} />
-                style={inputBase}
-                type="date"
-                value={inspectionExpiryDate}
-                onChange={(e) => setInspectionExpiryDate(e.target.value)}
-              />
             </label>
           </div>
 
           {/* ── Section: Operational ── */}
-          <p
+          <p style={sectionHeadingStyle}>بيانات تشغيلية</p>
-            style={{
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
-              fontSize: 11,
-              letterSpacing: "0.25em",
-              textTransform: "uppercase",
-              color: "var(--color-text-hint)",
-              fontWeight: 700,
-              margin: "0.5rem 0 0",
-            }}
-          >
-            بيانات تشغيلية
-          </p>
-          <div
-            style={{
-              display: "grid",
-              gridTemplateColumns: "1fr 1fr 1fr",
-              gap: "0.75rem",
-            }}
-          >
             <label style={labelStyle}>
               الفرع
-              <select
+              <select style={{ ...inputBase, cursor: "pointer" }} {...register("branchId")} dir="rtl">
-                style={{ ...inputBase, cursor: "pointer" }}
-                value={branchId}
-                onChange={(e) => setBranchId(e.target.value)}
-                dir="rtl"
-              >
                 <option value="">اختر الفرع</option>
                 {branches.map((b) => (
                   <option key={b.id} value={b.id}>
@@ -667,14 +504,7 @@ const loadBranches = useCallback(() => {
             </label>
             <label style={labelStyle}>
               الحالة
-              <select
+              <select style={{ ...inputBase, cursor: "pointer" }} {...register("currentStatus")} dir="rtl">
-                style={{ ...inputBase, cursor: "pointer" }}
-                value={currentStatus}
-                onChange={(e) =>
-                  setCurrentStatus(e.target.value as Car["currentStatus"])
-                }
-                dir="rtl"
-              >
                 <option value="Active">نشط</option>
                 <option value="InMaintenance">صيانة</option>
                 <option value="InTrip">في رحلة</option>
@@ -683,65 +513,42 @@ const loadBranches = useCallback(() => {
             </label>
             <label style={labelStyle}>
               رقم GPS
-              <input
+              <input style={inputBase} {...register("gpsDeviceId")} placeholder="GPS-001" dir="ltr" />
-                style={inputBase}
-                value={gpsDeviceId}
-                onChange={(e) => setGpsDeviceId(e.target.value)}
-                placeholder="GPS-001"
-                dir="ltr"
-              />
             </label>
             <label style={labelStyle}>
               الطاقة الاستيعابية
               <input
-                style={inputStyle("capacity")}
+                style={withError(!!errors.capacity)}
                 type="number"
                 min={0}
-                value={capacity ?? ""}
+                {...numberField("capacity")}
-                onChange={(e) => {
-                  setCapacity(parseNum(e.target.value));
-                  clearFieldError("capacity");
-                }}
                 placeholder="0"
                 dir="ltr"
               />
               {errors.capacity && (
-                <span style={errorTextStyle}>{errors.capacity}</span>
+                <span style={errorTextStyle}>{errors.capacity.message}</span>
               )}
             </label>
             <label style={labelStyle}>
               الوزن (كجم)
               <input
-                style={inputStyle("weight")}
+                style={withError(!!errors.weight)}
                 type="number"
                 min={0}
-                value={weight ?? ""}
+                {...numberField("weight")}
-                onChange={(e) => {
-                  setWeight(parseNum(e.target.value));
-                  clearFieldError("weight");
-                }}
                 placeholder="0"
                 dir="ltr"
               />
-              {errors.weight && (
+              {errors.weight && <span style={errorTextStyle}>{errors.weight.message}</span>}
-                <span style={errorTextStyle}>{errors.weight}</span>
-              )}
             </label>
           </div>
 
           {/* ── Actions ── */}
-          <div
+          <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end", paddingTop: "0.5rem" }}>
-            style={{
-              display: "flex",
-              gap: "0.5rem",
-              justifyContent: "flex-end",
-              paddingTop: "0.5rem",
-            }}
-          >
             <button
               type="button"
               onClick={onClose}
-              disabled={saving}
+              disabled={isSubmitting}
               style={{
                 height: 40,
                 padding: "0 1.25rem",
@@ -751,7 +558,7 @@ const loadBranches = useCallback(() => {
                 fontSize: 13,
                 fontWeight: 600,
                 color: "var(--color-text-secondary)",
-                cursor: saving ? "not-allowed" : "pointer",
+                cursor: isSubmitting ? "not-allowed" : "pointer",
                 fontFamily: "var(--font-sans)",
               }}
             >
@@ -759,31 +566,25 @@ const loadBranches = useCallback(() => {
             </button>
             <button
               type="submit"
-              disabled={saving}
+              disabled={isSubmitting}
               style={{
                 height: 40,
                 padding: "0 1.5rem",
                 borderRadius: "var(--radius-md)",
                 border: "none",
-                background: saving
+                background: isSubmitting ? "var(--color-brand-400)" : "var(--color-brand-600)",
-                  ? "var(--color-brand-400)"
-                  : "var(--color-brand-600)",
                 fontSize: 13,
                 fontWeight: 700,
                 color: "#FFF",
-                cursor: saving ? "not-allowed" : "pointer",
+                cursor: isSubmitting ? "not-allowed" : "pointer",
                 display: "flex",
                 alignItems: "center",
                 gap: 8,
                 fontFamily: "var(--font-sans)",
               }}
             >
-              {saving && <Spinner size="sm" className="text-white" />}
+              {isSubmitting && <Spinner size="sm" className="text-white" />}
-              {saving
+              {isSubmitting ? "جارٍ الحفظ…" : isNew ? "إضافة المركبة" : "حفظ التغييرات"}
-                ? "جارٍ الحفظ…"
-                : isNew
-                  ? "إضافة المركبة"
-                  : "حفظ التغييرات"}
             </button>
           </div>
         </form>