finsh user,car,driver pages also add validator layer to app build trip page

Components/Driver/DriverDetailPanel.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-
 import { useCallback, useEffect, useState } from "react";
 import { Spinner } from "../UI";
 import { driverService } from "../../services/driver.service";
 import { getStoredToken } from "../../lib/auth";
+import { DriverReportPanel } from "../Driver_Report/driverReport";
 import type { Driver } from "../../types/driver";
 import {
   DRIVER_STATUS_MAP,
@@ -14,7 +14,6 @@ import {
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
-/** Format an ISO date string to a readable Arabic date. */
 function fmtDate(iso?: string | null): string {
   if (!iso) return "—";
   return new Date(iso).toLocaleDateString("ar-SA", {
@@ -24,19 +23,12 @@ function fmtDate(iso?: string | null): string {
   });
 }
 
-/** Returns true if the date is within 90 days in the future (or already past). */
 function isExpiringSoon(iso?: string | null): boolean {
   if (!iso) return false;
   const diff = new Date(iso).getTime() - Date.now();
   return diff <= 90 * 86_400_000;
 }
 
-/** Build the full image URL via the proxy to avoid CORS issues. */
-function buildPhotoUrl(filename?: string | null): string | null {
-  if (!filename) return null;
-  return `/api/proxy/driver-photos/${filename}`;
-}
-
 // ── Sub-components ────────────────────────────────────────────────────────────
 
 function DetailRow({
@@ -60,13 +52,7 @@ function DetailRow({
         borderBottom: "1px solid var(--color-border)",
       }}
     >
-      <span
+      <span style={{ fontSize: 12, color: "var(--color-text-muted)", fontWeight: 600 }}>
-        style={{
-          fontSize: 12,
-          color: "var(--color-text-muted)",
-          fontWeight: 600,
-        }}
-      >
         {label}
       </span>
       <span
@@ -104,180 +90,72 @@ function SectionHeading({ title }: { title: string }) {
   );
 }
 
-// ── Report generator sub-panel ───────────────────────────────────────────────
+// ── Photos section ────────────────────────────────────────────────────────────
 
-function ReportPanel({ driverId }: { driverId: string }) {
+function PhotoCard({
-  const today = new Date().toISOString().slice(0, 10);
+  url,
-  const [date, setDate] = useState(today);
+  label,
-  const [loading, setLoading] = useState(false);
+}: {
-  const [error, setError] = useState<string | null>(null);
+  url?: string | null;
-  const [reportUrl, setReportUrl] = useState<string | null>(null);
+  label: string;
-
+}) {
-  const handleGenerate = async () => {
+  const [imgError, setImgError] = useState(false);
-    setLoading(true);
-    setError(null);
-    setReportUrl(null);
-    try {
-      const token = getStoredToken();
-      const res = await driverService.getDailyReport(driverId, date, token);
-      const url = (
-        res as unknown as { data: { reportUrl: string } }
-      ).data?.reportUrl;
-      setReportUrl(url ?? null);
-    } catch (err: unknown) {
-      setError(
-        err instanceof Error ? err.message : "تعذّر إنشاء التقرير.",
-      );
-    } finally {
-      setLoading(false);
-    }
-  };
 
   return (
-    <div
+    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-      style={{
+      <span style={{ fontSize: 11, fontWeight: 600, color: "var(--color-text-muted)" }}>
-        marginTop: "1.5rem",
+        {label}
-        borderRadius: "var(--radius-lg)",
+      </span>
-        border: "1px solid var(--color-border)",
+      <div
-        background: "var(--color-surface-muted)",
-        padding: "1rem",
-      }}
-    >
-      <p
         style={{
-          fontSize: 11,
+          width: "100%",
-          letterSpacing: "0.25em",
+          aspectRatio: "4/3",
-          textTransform: "uppercase",
+          borderRadius: "var(--radius-md)",
-          color: "#2563EB",
+          border: "1px solid var(--color-border)",
-          fontWeight: 700,
+          background: "var(--color-surface-muted)",
-          margin: "0 0 0.75rem",
+          overflow: "hidden",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
         }}
       >
-        إنشاء تقرير يومي
+        {url && !imgError ? (
-      </p>
+          // eslint-disable-next-line @next/next/no-img-element
-
+          <img
-      <div style={{ display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap" }}>
+            src={url}
-        {/* Date input */}
+            alt={label}
-        <div style={{ flex: 1, minWidth: 140 }}>
+            style={{ width: "100%", height: "100%", objectFit: "cover" }}
-          <label
+            onError={() => setImgError(true)}
-            htmlFor="report-date"
-            style={{
-              display: "block",
-              fontSize: 11,
-              fontWeight: 600,
-              color: "var(--color-text-muted)",
-              marginBottom: 4,
-            }}
-          >
-            تاريخ التقرير
-          </label>
-          <input
-            id="report-date"
-            type="date"
-            value={date}
-            max={today}
-            onChange={(e) => {
-              setDate(e.target.value);
-              setReportUrl(null);
-              setError(null);
-            }}
-            style={{
-              width: "100%",
-              height: 38,
-              padding: "0 0.625rem",
-              borderRadius: "var(--radius-md)",
-              border: "1px solid var(--color-border)",
-              background: "var(--color-surface)",
-              fontSize: 13,
-              color: "var(--color-text-primary)",
-              outline: "none",
-              fontFamily: "var(--font-sans)",
-            }}
           />
-        </div>
+        ) : (
-
+          <svg
-        {/* Generate button */}
+            width="28"
-        <button
+            height="28"
-          type="button"
+            viewBox="0 0 24 24"
-          onClick={handleGenerate}
+            fill="none"
-          disabled={loading || !date}
+            stroke="var(--color-text-hint)"
-          style={{
+            strokeWidth="1.5"
-            alignSelf: "flex-end",
-            height: 38,
-            padding: "0 1rem",
-            borderRadius: "var(--radius-md)",
-            border: "none",
-            background:
-              loading || !date
-                ? "var(--color-brand-400)"
-                : "var(--color-brand-600)",
-            fontSize: 13,
-            fontWeight: 700,
-            color: "#FFF",
-            cursor: loading || !date ? "not-allowed" : "pointer",
-            display: "flex",
-            alignItems: "center",
-            gap: 8,
-            fontFamily: "var(--font-sans)",
-            whiteSpace: "nowrap",
-          }}
-        >
-          {loading && <Spinner size="sm" className="text-white" />}
-          {loading ? "جارٍ الإنشاء…" : "إنشاء التقرير"}
-        </button>
-      </div>
-
-      {/* Error */}
-      {error && (
-        <div
-          style={{
-            marginTop: "0.75rem",
-            borderRadius: "var(--radius-md)",
-            background: "#FEF2F2",
-            border: "1px solid #FECACA",
-            padding: "0.625rem 0.875rem",
-            fontSize: 12,
-            color: "#DC2626",
-            fontWeight: 500,
-          }}
-        >
-          ⚠ {error}
-        </div>
-      )}
-
-      {/* Success link */}
-      {reportUrl && (
-        <div
-          style={{
-            marginTop: "0.75rem",
-            borderRadius: "var(--radius-md)",
-            background: "#DCFCE7",
-            border: "1px solid #BBF7D0",
-            padding: "0.625rem 0.875rem",
-            fontSize: 12,
-            color: "#166534",
-            fontWeight: 600,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            gap: 8,
-          }}
-        >
-          <span>✓ تم إنشاء التقرير بنجاح</span>
-          <a
-            href={reportUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            style={{
-              color: "#166534",
-              textDecoration: "underline",
-              fontWeight: 700,
-              whiteSpace: "nowrap",
-            }}
           >
-            فتح التقرير ↗
+            <rect x="3" y="3" width="18" height="18" rx="2" />
-          </a>
+            <circle cx="8.5" cy="8.5" r="1.5" />
-        </div>
+            <polyline points="21 15 16 10 5 21" />
+          </svg>
+        )}
+      </div>
+      {url && !imgError && (
+        <a
+          href={url}
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{
+            fontSize: 11,
+            color: "#2563EB",
+            textDecoration: "underline",
+            textAlign: "center",
+          }}
+        >
+          عرض الصورة ↗
+        </a>
       )}
     </div>
   );
@@ -288,6 +166,7 @@ function ReportPanel({ driverId }: { driverId: string }) {
 interface DriverDetailPanelProps {
   driverId: string;
   onClose: () => void;
+  onEdit: (driver: Driver) => void;
   onDelete: (driver: Driver) => void;
 }
 
@@ -296,12 +175,13 @@ interface DriverDetailPanelProps {
 export function DriverDetailPanel({
   driverId,
   onClose,
+  onEdit,
   onDelete,
 }: DriverDetailPanelProps) {
   const [driver, setDriver] = useState<Driver | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [imgError, setImgError] = useState(false);
+  const [avatarError, setAvatarError] = useState(false);
 
   // Fetch driver data
   const loadDriver = useCallback(async () => {
@@ -312,9 +192,7 @@ export function DriverDetailPanel({
       const res = await driverService.getById(driverId, token);
       setDriver((res as unknown as { data: Driver }).data);
     } catch (err: unknown) {
-      setError(
+      setError(err instanceof Error ? err.message : "تعذّر تحميل بيانات السائق.");
-        err instanceof Error ? err.message : "تعذّر تحميل بيانات السائق.",
-      );
     } finally {
       setLoading(false);
     }
@@ -326,14 +204,11 @@ export function DriverDetailPanel({
 
   // Close on Escape key
   useEffect(() => {
-    const h = (e: KeyboardEvent) => {
+    const h = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
-      if (e.key === "Escape") onClose();
-    };
     window.addEventListener("keydown", h);
     return () => window.removeEventListener("keydown", h);
   }, [onClose]);
 
-  const photoUrl = driver ? buildPhotoUrl(driver.photo) : null;
   const statusConfig = driver ? DRIVER_STATUS_MAP[driver.status] : null;
 
   return (
@@ -350,7 +225,7 @@ export function DriverDetailPanel({
         }}
       />
 
-      {/* Slide-in panel — from the left, mirroring CarDetailPanel */}
+      {/* Slide-in panel */}
       <aside
         aria-label="تفاصيل السائق"
         style={{
@@ -377,17 +252,9 @@ export function DriverDetailPanel({
             flexShrink: 0,
           }}
         >
-          <div
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12 }}>
-            style={{
+            {/* Avatar + name */}
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "flex-start",
-              gap: 12,
-            }}
-          >
-            {/* Photo + name */}
             <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-              {/* Avatar */}
               <div
                 style={{
                   width: 56,
@@ -402,62 +269,32 @@ export function DriverDetailPanel({
                   justifyContent: "center",
                 }}
               >
-                {photoUrl && !imgError ? (
+                {driver?.photoUrl && !avatarError ? (
                   // eslint-disable-next-line @next/next/no-img-element
                   <img
-                    src={photoUrl}
+                    src={driver.photoUrl}
-                    alt={driver?.name ?? "صورة السائق"}
+                    alt={driver.name}
                     style={{ width: "100%", height: "100%", objectFit: "cover" }}
-                    onError={() => setImgError(true)}
+                    onError={() => setAvatarError(true)}
                   />
                 ) : (
-                  /* Fallback: initials avatar */
+                  <span style={{ fontSize: 20, fontWeight: 700, color: "var(--color-brand-600)" }}>
-                  <span
-                    style={{
-                      fontSize: 20,
-                      fontWeight: 700,
-                      color: "var(--color-brand-600)",
-                    }}
-                  >
                     {driver?.name?.charAt(0) ?? "?"}
                   </span>
                 )}
               </div>
 
               <div>
-                <p
+                <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600, margin: 0 }}>
-                  style={{
-                    fontSize: 11,
-                    letterSpacing: "0.3em",
-                    textTransform: "uppercase",
-                    color: "#2563EB",
-                    fontWeight: 600,
-                    margin: 0,
-                  }}
-                >
                   ملف السائق
                 </p>
                 {driver && (
-                  <h2
+                  <h2 style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "3px 0 0" }}>
-                    style={{
-                      fontSize: 17,
-                      fontWeight: 700,
-                      color: "var(--color-text-primary)",
-                      margin: "3px 0 0",
-                    }}
-                  >
                     {driver.name}
                   </h2>
                 )}
                 {driver?.userName && (
-                  <p
+                  <p style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--color-text-muted)", margin: "2px 0 0" }}>
-                    style={{
-                      fontSize: 11,
-                      fontFamily: "var(--font-mono)",
-                      color: "var(--color-text-muted)",
-                      margin: "2px 0 0",
-                    }}
-                  >
                     @{driver.userName}
                   </p>
                 )}
@@ -490,23 +327,12 @@ export function DriverDetailPanel({
         </div>
 
         {/* ── Scrollable content ── */}
-        <div
+        <div style={{ flex: 1, overflowY: "auto", padding: "1.25rem 1.5rem" }}>
-          style={{ flex: 1, overflowY: "auto", padding: "1.25rem 1.5rem" }}
-        >
           {/* Loading */}
           {loading && (
-            <div
+            <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "2rem 0" }}>
-              style={{
-                display: "flex",
-                alignItems: "center",
-                gap: 12,
-                padding: "2rem 0",
-              }}
-            >
               <Spinner size="sm" className="text-blue-600" />
-              <span style={{ fontSize: 13, color: "var(--color-text-muted)" }}>
+              <span style={{ fontSize: 13, color: "var(--color-text-muted)" }}>جارٍ التحميل…</span>
-                جارٍ التحميل…
-              </span>
             </div>
           )}
 
@@ -529,14 +355,7 @@ export function DriverDetailPanel({
           {driver && !loading && (
             <>
               {/* Status badges */}
-              <div
+              <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: "1rem" }}>
-                style={{
-                  display: "flex",
-                  gap: 8,
-                  flexWrap: "wrap",
-                  marginBottom: "1rem",
-                }}
-              >
                 {statusConfig && (
                   <span
                     style={{
@@ -552,14 +371,7 @@ export function DriverDetailPanel({
                       gap: 6,
                     }}
                   >
-                    <span
+                    <span style={{ width: 7, height: 7, borderRadius: "50%", background: statusConfig.dot }} />
-                      style={{
-                        width: 7,
-                        height: 7,
-                        borderRadius: "50%",
-                        background: statusConfig.dot,
-                      }}
-                    />
                     {statusConfig.label}
                   </span>
                 )}
@@ -582,35 +394,31 @@ export function DriverDetailPanel({
 
               {/* ── Section: Personal Info ── */}
               <SectionHeading title="البيانات الشخصية" />
-              <DetailRow label="الاسم الكامل"  value={driver.name} />
+              <DetailRow label="الاسم الكامل" value={driver.name} />
-              <DetailRow label="رقم الجوال"    value={driver.phone} mono />
+              <DetailRow label="رقم الجوال" value={driver.phone} mono />
               <DetailRow label="البريد الإلكتروني" value={driver.email ?? "—"} />
-              <DetailRow label="العنوان"        value={driver.address ?? "—"} />
+              <DetailRow label="العنوان" value={driver.address ?? "—"} />
-              <DetailRow label="الجنسية"        value={driver.nationality ?? "—"} />
+              <DetailRow label="الجنسية" value={driver.nationality ?? "—"} />
-              <DetailRow label="الفرع"          value={driver.branch?.name ?? "—"} />
+              <DetailRow label="الفرع" value={driver.branch?.name ?? "—"} />
 
               {/* ── Section: ID & GOSI ── */}
               <SectionHeading title="الهوية والتأمينات" />
               <DetailRow
                 label="نوع الهوية"
-                value={
+                value={driver.nationalIdType ? NATIONAL_ID_TYPE_MAP[driver.nationalIdType] : "—"}
-                  driver.nationalIdType
-                    ? NATIONAL_ID_TYPE_MAP[driver.nationalIdType]
-                    : "—"
-                }
               />
-              <DetailRow label="رقم الهوية"      value={driver.nationalId ?? "—"} mono />
+              <DetailRow label="رقم الهوية" value={driver.nationalId ?? "—"} mono />
               <DetailRow
                 label="انتهاء الهوية"
                 value={fmtDate(driver.nationalIdExpiry)}
                 warn={isExpiringSoon(driver.nationalIdExpiry)}
               />
-              <DetailRow label="رقم GOSI"         value={driver.gosiNumber ?? "—"} mono />
+              <DetailRow label="رقم GOSI" value={driver.gosiNumber ?? "—"} mono />
 
               {/* ── Section: License ── */}
               <SectionHeading title="بيانات رخصة القيادة" />
-              <DetailRow label="رقم الرخصة"   value={driver.licenseNumber ?? "—"} mono />
+              <DetailRow label="رقم الرخصة" value={driver.licenseNumber ?? "—"} mono />
-              <DetailRow label="نوع الرخصة"   value={driver.licenseType ?? "—"} />
+              <DetailRow label="نوع الرخصة" value={driver.licenseType ?? "—"} />
               <DetailRow
                 label="انتهاء الرخصة"
                 value={fmtDate(driver.licenseExpiry)}
@@ -619,34 +427,31 @@ export function DriverDetailPanel({
 
               {/* ── Section: Driver Card ── */}
               <SectionHeading title="بطاقة السائق" />
-              <DetailRow
+              <DetailRow label="رقم البطاقة" value={driver.driverCardNumber ?? "—"} mono />
-                label="رقم البطاقة"
-                value={driver.driverCardNumber ?? "—"}
-                mono
-              />
               <DetailRow
                 label="نوع البطاقة"
-                value={
+                value={driver.driverCardType ? DRIVER_CARD_TYPE_MAP[driver.driverCardType] : "—"}
-                  driver.driverCardType
-                    ? DRIVER_CARD_TYPE_MAP[driver.driverCardType]
-                    : "—"
-                }
               />
               <DetailRow
                 label="انتهاء البطاقة"
                 value={fmtDate(driver.driverCardExpiry)}
                 warn={isExpiringSoon(driver.driverCardExpiry)}
               />
-              <DetailRow
+              <DetailRow label="نوع السائق" value={driver.driverType ?? "—"} />
-                label="نوع السائق"
-                value={driver.driverType ?? "—"}
-              />
 
               {/* ── Section: System Info ── */}
               <SectionHeading title="معلومات النظام" />
-              <DetailRow label="اسم المستخدم"    value={driver.userName ?? "—"} mono />
+              <DetailRow label="اسم المستخدم" value={driver.userName ?? "—"} mono />
-              <DetailRow label="تاريخ الإضافة"   value={fmtDate(driver.createdAt)} />
+              <DetailRow label="تاريخ الإضافة" value={fmtDate(driver.createdAt)} />
-              <DetailRow label="آخر تحديث"        value={fmtDate(driver.updatedAt)} />
+              <DetailRow label="آخر تحديث" value={fmtDate(driver.updatedAt)} />
+
+              {/* ── Section: Photos ── */}
+              <SectionHeading title="الصور والمستندات" />
+              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem", marginTop: "0.5rem" }}>
+                <PhotoCard url={driver.photoUrl} label="صورة السائق" />
+                <PhotoCard url={driver.nationalPhotoUrl} label="صورة الهوية" />
+                <PhotoCard url={driver.driverCardPhotoUrl} label="صورة البطاقة" />
+              </div>
 
               {/* ── Status History ── */}
               {driver.statusHistory && driver.statusHistory.length > 0 && (
@@ -654,8 +459,7 @@ export function DriverDetailPanel({
                   <SectionHeading title="سجل الحالات" />
                   <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                     {driver.statusHistory.slice(0, 5).map((h) => {
-                      const s =
+                      const s = DRIVER_STATUS_MAP[h.status] ?? DRIVER_STATUS_MAP.Active;
-                        DRIVER_STATUS_MAP[h.status] ?? DRIVER_STATUS_MAP.Active;
                       return (
                         <div
                           key={h.id}
@@ -670,33 +474,16 @@ export function DriverDetailPanel({
                           }}
                         >
                           <div>
-                            <span
+                            <span style={{ fontSize: 12, fontWeight: 600, color: s.color }}>
-                              style={{
-                                fontSize: 12,
-                                fontWeight: 600,
-                                color: s.color,
-                              }}
-                            >
                               {s.label}
                             </span>
                             {h.reason && (
-                              <span
+                              <span style={{ fontSize: 11, color: "var(--color-text-muted)", marginRight: 8 }}>
-                                style={{
-                                  fontSize: 11,
-                                  color: "var(--color-text-muted)",
-                                  marginRight: 8,
-                                }}
-                              >
                                 — {h.reason}
                               </span>
                             )}
                           </div>
-                          <span
+                          <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
-                            style={{
-                              fontSize: 11,
-                              color: "var(--color-text-muted)",
-                            }}
-                          >
                             {fmtDate(h.createdAt)}
                           </span>
                         </div>
@@ -707,7 +494,7 @@ export function DriverDetailPanel({
               )}
 
               {/* ── Report Panel ── */}
-              <ReportPanel driverId={driver.id} />
+              <DriverReportPanel driverId={driver.id} />
             </>
           )}
         </div>
@@ -743,6 +530,34 @@ export function DriverDetailPanel({
             >
               حذف
             </button>
+
+            {/* Edit */}
+            <button
+              type="button"
+              onClick={() => onEdit(driver)}
+              style={{
+                height: 40,
+                padding: "0 1rem",
+                borderRadius: "var(--radius-md)",
+                border: "1px solid var(--color-brand-200)",
+                background: "var(--color-brand-50, #EFF6FF)",
+                fontSize: 13,
+                fontWeight: 700,
+                color: "var(--color-brand-600)",
+                cursor: "pointer",
+                fontFamily: "var(--font-sans)",
+                display: "flex",
+                alignItems: "center",
+                gap: 6,
+              }}
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+              </svg>
+              تعديل
+            </button>
+
             {/* Close */}
             <button
               type="button"

Components/Driver/DriverFormModal.tsx

@@ -1,22 +1,24 @@
 "use client";
 
-
 import { useEffect, useRef, useState } from "react";
+import * as yup from "yup";
 import { Alert, Spinner } from "../UI";
-import { get } from "../../services/api";
+import { get } from "@/services/api";
-import { getStoredToken } from "../../lib/auth";
+import { getStoredToken } from "@/lib/auth";
+import { createDriverSchema, updateDriverSchema } from "@/validations/driver.validator";
+import type { DriverSchemaErrors } from "@/validations/driver.validator";
 import type {
   Driver,
-  DriverFormErrors,
   CreateDriverPayload,
   UpdateDriverPayload,
   NationalIdType,
   DriverCardType,
   DriverStatus,
-} from "../../types/driver";
+} from "@/types/driver";
-import type { Branch } from "../../types/branch";
+import type { Branch } from "@/types/branch";
 
 // ── Shared input style ───────────────────────────────────────────────────────
+
 const inputBase: React.CSSProperties = {
   width: "100%",
   height: 40,
@@ -54,24 +56,23 @@ const sectionHeadingStyle: React.CSSProperties = {
   margin: "0.5rem 0 0",
 };
 
+const optionalLabelStyle: React.CSSProperties = {
+  fontSize: 10,
+  fontWeight: 500,
+  color: "var(--color-text-hint)",
+  marginRight: 4,
+};
+
 // ── Date helper ──────────────────────────────────────────────────────────────
+
 function toIsoDateTime(val: string): string {
   if (!val) return val;
   if (val.includes("T")) return val;
   return `${val}T00:00:00.000Z`;
 }
 
-// ── Validation ───────────────────────────────────────────────────────────────
-function validate(form: Partial<CreateDriverPayload>): DriverFormErrors {
-  const e: DriverFormErrors = {};
-  if (!form.name?.trim()) e.name = "الاسم مطلوب";
-  if (!form.phone?.trim()) e.phone = "رقم الجوال مطلوب";
-  if (form.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email))
-    e.email = "البريد الإلكتروني غير صالح";
-  return e;
-}
-
 // ── Props ────────────────────────────────────────────────────────────────────
+
 interface DriverFormModalProps {
   editDriver: Driver | null;
   branches: Branch[];
@@ -83,6 +84,7 @@ interface DriverFormModalProps {
 }
 
 // ── Component ────────────────────────────────────────────────────────────────
+
 export function DriverFormModal({
   editDriver,
   branches: branchesProp,
@@ -110,46 +112,45 @@ export function DriverFormModal({
   }, []);
 
   // ── Form state ────────────────────────────────────────────────────────────
-  const [name, setName] = useState(editDriver?.name ?? "");
+  const [name, setName]               = useState(editDriver?.name ?? "");
-  const [phone, setPhone] = useState(editDriver?.phone ?? "");
+  const [phone, setPhone]             = useState(editDriver?.phone ?? "");
-  const [email, setEmail] = useState(editDriver?.email ?? "");
+  const [email, setEmail]             = useState(editDriver?.email ?? "");
-  const [address, setAddress] = useState(editDriver?.address ?? "");
+  const [address, setAddress]         = useState(editDriver?.address ?? "");
   const [nationality, setNationality] = useState(editDriver?.nationality ?? "");
   const [nationalIdType, setNationalIdType] = useState<NationalIdType | "">(
     editDriver?.nationalIdType ?? "",
   );
   const [nationalId, setNationalId] = useState(
-    // nationalId is not in CreateDriverPayload — read-only from Driver
     (editDriver as Driver & { nationalId?: string })?.nationalId ?? "",
   );
   const [nationalIdExpiry, setNationalIdExpiry] = useState(
     (editDriver as Driver & { nationalIdExpiry?: string })?.nationalIdExpiry?.slice(0, 10) ?? "",
   );
-  const [gosiNumber, setGosiNumber] = useState(editDriver?.gosiNumber ?? "");
+  const [gosiNumber, setGosiNumber]             = useState(editDriver?.gosiNumber ?? "");
-  const [licenseNumber, setLicenseNumber] = useState(editDriver?.licenseNumber ?? "");
+  const [licenseNumber, setLicenseNumber]       = useState(editDriver?.licenseNumber ?? "");
-  const [licenseType, setLicenseType] = useState(editDriver?.licenseType ?? "");
+  const [licenseType, setLicenseType]           = useState(editDriver?.licenseType ?? "");
-  const [licenseExpiry, setLicenseExpiry] = useState(
+  const [licenseExpiry, setLicenseExpiry]       = useState(
     editDriver?.licenseExpiry?.slice(0, 10) ?? "",
   );
   const [driverCardNumber, setDriverCardNumber] = useState(editDriver?.driverCardNumber ?? "");
-  const [driverCardType, setDriverCardType] = useState<DriverCardType | "">(
+  const [driverCardType, setDriverCardType]     = useState<DriverCardType | "">(
     editDriver?.driverCardType ?? "",
   );
   const [driverCardExpiry, setDriverCardExpiry] = useState(
     editDriver?.driverCardExpiry?.slice(0, 10) ?? "",
   );
   const [driverType, setDriverType] = useState(editDriver?.driverType ?? "");
-  const [branchId, setBranchId] = useState(
+  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 [photo, setPhoto]                   = useState<File | null>(null);
-  const [nationalPhoto, setNationalPhoto] = useState<File | null>(null);
+  const [nationalPhoto, setNationalPhoto]   = useState<File | null>(null);
   const [driverCardPhoto, setDriverCardPhoto] = useState<File | null>(null);
 
-  const [errors, setErrors] = useState<DriverFormErrors>({});
+  const [errors, setErrors] = useState<DriverSchemaErrors>({});
   const [saving, setSaving] = useState(false);
   const [apiError, setApiError] = useState("");
   const firstRef = useRef<HTMLInputElement>(null);
@@ -162,45 +163,77 @@ export function DriverFormModal({
   }, [onClose]);
 
   // ── Input error style ──────────────────────────────────────────────────────
-  const inputStyle = (field: keyof DriverFormErrors): React.CSSProperties => ({
+  const inputStyle = (field: keyof DriverSchemaErrors): React.CSSProperties => ({
     ...inputBase,
     ...(errors[field] ? { borderColor: "var(--color-danger)", background: "#FEF2F2" } : {}),
   });
 
-  const clearFieldError = (field: keyof DriverFormErrors) =>
+  const clearFieldError = (field: keyof DriverSchemaErrors) =>
     setErrors((p) => ({ ...p, [field]: undefined }));
 
-  // ── Submit ─────────────────────────────────────────────────────────────────
+  // ── Submit with yup validation ────────────────────────────────────────────
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
-    const errs = validate({ name, phone, email: email || undefined });
+    // Build the raw object to validate
-    if (Object.keys(errs).length) { setErrors(errs); return; }
+    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 } : {}),
+    };
 
-    const raw: Record<string, unknown> = { name, phone };
+    try {
-    if (email)           raw.email = email;
+      const schema = isNew ? createDriverSchema : updateDriverSchema;
-    if (address)         raw.address = address;
+      await schema.validate(raw, { abortEarly: false });
-    if (nationality)     raw.nationality = nationality;
+    } catch (err) {
-    if (nationalIdType)  raw.nationalIdType = nationalIdType;
+      if (err instanceof yup.ValidationError) {
-    if (gosiNumber)      raw.gosiNumber = gosiNumber;
+        const fieldErrors: DriverSchemaErrors = {};
-    if (licenseNumber)   raw.licenseNumber = licenseNumber;
+        err.inner.forEach((e) => {
-    if (licenseType)     raw.licenseType = licenseType;
+          if (e.path) {
-    if (licenseExpiry)   raw.licenseExpiry = toIsoDateTime(licenseExpiry);
+            fieldErrors[e.path as keyof DriverSchemaErrors] = e.message;
-    if (driverCardNumber) raw.driverCardNumber = driverCardNumber;
+          }
-    if (driverCardType)  raw.driverCardType = driverCardType;
+        });
-    if (driverCardExpiry) raw.driverCardExpiry = toIsoDateTime(driverCardExpiry);
+        setErrors(fieldErrors);
-    if (driverType)      raw.driverType = driverType;
+        return;
-    if (branchId)        raw.branchId = branchId;
+      }
-    if (!isNew)          raw.status = status;
+    }
-    if (photo)           raw.photo = photo;
-    if (nationalPhoto)   raw.nationalPhoto = nationalPhoto;
-    if (driverCardPhoto) raw.driverCardPhoto = driverCardPhoto;
 
-    const payload = raw as unknown as CreateDriverPayload;
+    // ── Build clean payload to send to backend ────────────────────────────
+    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 (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("");
-    const ok = await onSubmit(payload, isNew);
+    const ok = await onSubmit(payload as unknown as CreateDriverPayload, isNew);
     setSaving(false);
     if (ok) onClose();
     else setApiError("حدث خطأ غير متوقع. يرجى المحاولة لاحقاً.");
@@ -309,6 +342,7 @@ export function DriverFormModal({
           <p style={sectionHeadingStyle}>البيانات الشخصية</p>
 
           <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
+            {/* Name — required */}
             <label style={labelStyle}>
               الاسم الكامل *
               <input
@@ -323,6 +357,7 @@ export function DriverFormModal({
               {errors.name && <span style={errorTextStyle}>{errors.name}</span>}
             </label>
 
+            {/* Phone — required */}
             <label style={labelStyle}>
               رقم الجوال *
               <input
@@ -335,8 +370,10 @@ export function DriverFormModal({
               {errors.phone && <span style={errorTextStyle}>{errors.phone}</span>}
             </label>
 
+            {/* Email — optional */}
             <label style={labelStyle}>
               البريد الإلكتروني
+              <span style={optionalLabelStyle}>(اختياري)</span>
               <input
                 style={inputStyle("email")}
                 type="email"
@@ -348,26 +385,32 @@ export function DriverFormModal({
               {errors.email && <span style={errorTextStyle}>{errors.email}</span>}
             </label>
 
+            {/* Nationality — optional */}
             <label style={labelStyle}>
               الجنسية
+              <span style={optionalLabelStyle}>(اختياري)</span>
               <input
                 style={inputBase}
                 value={nationality}
-                onChange={(e) => setNationality(e.target.value)}
+                onChange={(e) => { setNationality(e.target.value); clearFieldError("nationality"); }}
                 placeholder="سعودي"
                 dir="rtl"
               />
+              {errors.nationality && <span style={errorTextStyle}>{errors.nationality}</span>}
             </label>
 
+            {/* Address — optional, full width */}
             <label style={{ ...labelStyle, gridColumn: "1 / -1" }}>
               العنوان
+              <span style={optionalLabelStyle}>(اختياري)</span>
               <input
-                style={inputBase}
+                style={inputStyle("address")}
                 value={address}
-                onChange={(e) => setAddress(e.target.value)}
+                onChange={(e) => { setAddress(e.target.value); clearFieldError("address"); }}
                 placeholder="الرياض، حي..."
                 dir="rtl"
               />
+              {errors.address && <span style={errorTextStyle}>{errors.address}</span>}
             </label>
           </div>
 
@@ -375,12 +418,14 @@ export function DriverFormModal({
           <p style={sectionHeadingStyle}>الهوية والتأمينات</p>
 
           <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
+            {/* National ID Type — optional */}
             <label style={labelStyle}>
               نوع الهوية
+              <span style={optionalLabelStyle}>(اختياري)</span>
               <select
-                style={{ ...inputBase, cursor: "pointer" }}
+                style={{ ...inputStyle("nationalIdType"), cursor: "pointer" }}
                 value={nationalIdType}
-                onChange={(e) => setNationalIdType(e.target.value as NationalIdType | "")}
+                onChange={(e) => { setNationalIdType(e.target.value as NationalIdType | ""); clearFieldError("nationalIdType"); }}
                 dir="rtl"
               >
                 <option value="">اختر النوع</option>
@@ -388,10 +433,13 @@ export function DriverFormModal({
                 <option value="Iqama">إقامة</option>
                 <option value="Passport">جواز سفر</option>
               </select>
+              {errors.nationalIdType && <span style={errorTextStyle}>{errors.nationalIdType}</span>}
             </label>
 
+            {/* National ID number — not in backend validator, display only */}
             <label style={labelStyle}>
               رقم الهوية
+              <span style={optionalLabelStyle}>(اختياري)</span>
               <input
                 style={inputBase}
                 value={nationalId}
@@ -401,8 +449,10 @@ export function DriverFormModal({
               />
             </label>
 
+            {/* National ID expiry — not in backend validator, display only */}
             <label style={labelStyle}>
               انتهاء الهوية
+              <span style={optionalLabelStyle}>(اختياري)</span>
               <input
                 style={inputBase}
                 type="date"
@@ -411,8 +461,10 @@ export function DriverFormModal({
               />
             </label>
 
+            {/* GOSI — optional */}
             <label style={labelStyle}>
               رقم GOSI
+              <span style={optionalLabelStyle}>(اختياري)</span>
               <input
                 style={inputBase}
                 value={gosiNumber}
@@ -427,8 +479,10 @@ export function DriverFormModal({
           <p style={sectionHeadingStyle}>رخصة القيادة</p>
 
           <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
+            {/* License number — optional */}
             <label style={labelStyle}>
               رقم الرخصة
+              <span style={optionalLabelStyle}>(اختياري)</span>
               <input
                 style={inputStyle("licenseNumber")}
                 value={licenseNumber}
@@ -439,8 +493,10 @@ export function DriverFormModal({
               {errors.licenseNumber && <span style={errorTextStyle}>{errors.licenseNumber}</span>}
             </label>
 
+            {/* License type — optional */}
             <label style={labelStyle}>
               نوع الرخصة
+              <span style={optionalLabelStyle}>(اختياري)</span>
               <input
                 style={inputBase}
                 value={licenseType}
@@ -450,14 +506,17 @@ export function DriverFormModal({
               />
             </label>
 
+            {/* License expiry — optional, validated if provided */}
             <label style={labelStyle}>
               انتهاء الرخصة
+              <span style={optionalLabelStyle}>(اختياري)</span>
               <input
-                style={inputBase}
+                style={inputStyle("licenseExpiry")}
                 type="date"
                 value={licenseExpiry}
-                onChange={(e) => setLicenseExpiry(e.target.value)}
+                onChange={(e) => { setLicenseExpiry(e.target.value); clearFieldError("licenseExpiry"); }}
               />
+              {errors.licenseExpiry && <span style={errorTextStyle}>{errors.licenseExpiry}</span>}
             </label>
           </div>
 
@@ -465,8 +524,10 @@ export function DriverFormModal({
           <p style={sectionHeadingStyle}>بطاقة السائق</p>
 
           <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
+            {/* Card number — optional */}
             <label style={labelStyle}>
               رقم البطاقة
+              <span style={optionalLabelStyle}>(اختياري)</span>
               <input
                 style={inputBase}
                 value={driverCardNumber}
@@ -476,12 +537,14 @@ export function DriverFormModal({
               />
             </label>
 
+            {/* Card type — optional */}
             <label style={labelStyle}>
               نوع البطاقة
+              <span style={optionalLabelStyle}>(اختياري)</span>
               <select
-                style={{ ...inputBase, cursor: "pointer" }}
+                style={{ ...inputStyle("driverCardType"), cursor: "pointer" }}
                 value={driverCardType}
-                onChange={(e) => setDriverCardType(e.target.value as DriverCardType | "")}
+                onChange={(e) => { setDriverCardType(e.target.value as DriverCardType | ""); clearFieldError("driverCardType"); }}
                 dir="rtl"
               >
                 <option value="">اختر النوع</option>
@@ -490,16 +553,20 @@ export function DriverFormModal({
                 <option value="Annual">سنوية</option>
                 <option value="Restricted">مقيدة</option>
               </select>
+              {errors.driverCardType && <span style={errorTextStyle}>{errors.driverCardType}</span>}
             </label>
 
+            {/* Card expiry — optional, validated if provided */}
             <label style={labelStyle}>
               انتهاء البطاقة
+              <span style={optionalLabelStyle}>(اختياري)</span>
               <input
-                style={inputBase}
+                style={inputStyle("driverCardExpiry")}
                 type="date"
                 value={driverCardExpiry}
-                onChange={(e) => setDriverCardExpiry(e.target.value)}
+                onChange={(e) => { setDriverCardExpiry(e.target.value); clearFieldError("driverCardExpiry"); }}
               />
+              {errors.driverCardExpiry && <span style={errorTextStyle}>{errors.driverCardExpiry}</span>}
             </label>
           </div>
 
@@ -507,12 +574,14 @@ export function DriverFormModal({
           <p style={sectionHeadingStyle}>بيانات تشغيلية</p>
 
           <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
+            {/* Branch — optional */}
             <label style={labelStyle}>
               الفرع
+              <span style={optionalLabelStyle}>(اختياري)</span>
               <select
-                style={{ ...inputBase, cursor: "pointer" }}
+                style={{ ...inputStyle("branchId"), cursor: "pointer" }}
                 value={branchId}
-                onChange={(e) => setBranchId(e.target.value)}
+                onChange={(e) => { setBranchId(e.target.value); clearFieldError("branchId"); }}
                 dir="rtl"
               >
                 <option value="">اختر الفرع</option>
@@ -520,10 +589,13 @@ export function DriverFormModal({
                   <option key={b.id} value={b.id}>{b.name}</option>
                 ))}
               </select>
+              {errors.branchId && <span style={errorTextStyle}>{errors.branchId}</span>}
             </label>
 
+            {/* Driver type — optional */}
             <label style={labelStyle}>
               نوع السائق
+              <span style={optionalLabelStyle}>(اختياري)</span>
               <input
                 style={inputBase}
                 value={driverType}
@@ -533,6 +605,7 @@ export function DriverFormModal({
               />
             </label>
 
+            {/* Status — edit only */}
             {!isNew && (
               <label style={labelStyle}>
                 الحالة
@@ -553,10 +626,13 @@ export function DriverFormModal({
 
           {/* ── Section: Photos ── */}
           <p style={sectionHeadingStyle}>الصور والمستندات</p>
+          <p style={{ fontSize: 11, color: "var(--color-text-hint)", margin: "0.25rem 0 0", fontWeight: 400 }}>
+            جميع حقول الصور اختيارية
+          </p>
 
           <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
-            <FileInput label="صورة السائق" current={photo} onChange={setPhoto} />
+            <FileInput label="صورة السائق"  current={photo}          onChange={setPhoto} />
-            <FileInput label="صورة الهوية" current={nationalPhoto} onChange={setNationalPhoto} />
+            <FileInput label="صورة الهوية"  current={nationalPhoto}  onChange={setNationalPhoto} />
             <FileInput label="صورة البطاقة" current={driverCardPhoto} onChange={setDriverCardPhoto} />
           </div>
 

Components/Driver_Report/driverReport.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import { useState } from "react";
+import { Spinner } from "../UI";
+import { driverService } from "../../services/driver.service";
+import { getStoredToken } from "../../lib/auth";
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+
+interface DriverReportPanelProps {
+  driverId: string;
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function DriverReportPanel({ driverId }: DriverReportPanelProps) {
+  const today = new Date().toISOString().slice(0, 10);
+  const [date, setDate] = useState(today);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleGenerate = async () => {
+    if (!date) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const token = getStoredToken();
+      const res = await driverService.getDailyReport(driverId, date, token);
+      // The response shape: { data: { reportUrl, filename } }
+      const reportUrl = (
+        res as unknown as { data: { reportUrl: string; filename: string } }
+      ).data?.reportUrl;
+
+      if (!reportUrl) throw new Error("لم يتم إرجاع رابط التقرير.");
+
+      // Navigate directly to the report URL
+      window.location.href = reportUrl;
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "تعذّر إنشاء التقرير.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        marginTop: "1.5rem",
+        borderRadius: "var(--radius-lg)",
+        border: "1px solid var(--color-border)",
+        background: "var(--color-surface-muted)",
+        padding: "1rem",
+      }}
+    >
+      {/* Heading */}
+      <p
+        style={{
+          fontSize: 11,
+          letterSpacing: "0.25em",
+          textTransform: "uppercase",
+          color: "#2563EB",
+          fontWeight: 700,
+          margin: "0 0 0.75rem",
+        }}
+      >
+        إنشاء تقرير يومي
+      </p>
+
+      <div
+        style={{
+          display: "flex",
+          gap: "0.5rem",
+          alignItems: "flex-end",
+          flexWrap: "wrap",
+        }}
+      >
+        {/* Date input */}
+        <div style={{ flex: 1, minWidth: 140 }}>
+          <label
+            htmlFor="report-date"
+            style={{
+              display: "block",
+              fontSize: 11,
+              fontWeight: 600,
+              color: "var(--color-text-muted)",
+              marginBottom: 4,
+            }}
+          >
+            تاريخ التقرير
+          </label>
+          <input
+            id="report-date"
+            type="date"
+            value={date}
+            max={today}
+            onChange={(e) => {
+              setDate(e.target.value);
+              setError(null);
+            }}
+            style={{
+              width: "100%",
+              height: 38,
+              padding: "0 0.625rem",
+              borderRadius: "var(--radius-md)",
+              border: "1px solid var(--color-border)",
+              background: "var(--color-surface)",
+              fontSize: 13,
+              color: "var(--color-text-primary)",
+              outline: "none",
+              fontFamily: "var(--font-sans)",
+            }}
+          />
+        </div>
+
+        {/* Generate button */}
+        <button
+          type="button"
+          onClick={handleGenerate}
+          disabled={loading || !date}
+          style={{
+            height: 38,
+            padding: "0 1rem",
+            borderRadius: "var(--radius-md)",
+            border: "none",
+            fontSize: 13,
+            fontWeight: 700,
+            color: "#FFF",
+            background: !date || loading
+              ? "var(--color-brand-400)"
+              : "var(--color-brand-600)",
+            cursor: !date || loading ? "not-allowed" : "pointer",
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            fontFamily: "var(--font-sans)",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {loading && <Spinner size="sm" className="text-white" />}
+          {loading ? "جارٍ الإنشاء…" : "إنشاء التقرير"}
+        </button>
+      </div>
+
+      {/* Error */}
+      {error && (
+        <div
+          style={{
+            marginTop: "0.75rem",
+            borderRadius: "var(--radius-md)",
+            background: "#FEF2F2",
+            border: "1px solid #FECACA",
+            padding: "0.625rem 0.875rem",
+            fontSize: 12,
+            color: "#DC2626",
+            fontWeight: 500,
+          }}
+        >
+          ⚠ {error}
+        </div>
+      )}
+    </div>
+  );
+}

Components/Trip/Tripdeletemodal.tsx

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

Components/Trip/Tripformmodal.tsx

@@ -0,0 +1,497 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import * as yup from "yup";
+import { Alert, Spinner } from "../UI";
+import { get } from "@/services/api";
+import { getStoredToken } from "@/lib/auth";
+import { createTripSchema, updateTripSchema } from "@/validations/trip.validator";
+import type { TripSchemaErrors } from "@/validations/trip.validator";
+import type {
+  Trip,
+  TripStatus,
+  CreateTripPayload,
+  UpdateTripPayload,
+} from "@/types/trip";
+
+// ── Shared styles ────────────────────────────────────────────────────────────
+
+const inputBase: React.CSSProperties = {
+  width: "100%",
+  height: 40,
+  padding: "0 0.75rem",
+  borderRadius: "var(--radius-md)",
+  border: "1px solid var(--color-border)",
+  background: "var(--color-surface)",
+  fontSize: 13,
+  color: "var(--color-text-primary)",
+  outline: "none",
+  fontFamily: "var(--font-sans)",
+};
+
+const labelStyle: React.CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 6,
+  fontSize: 12,
+  fontWeight: 600,
+  color: "var(--color-text-secondary)",
+};
+
+const errorTextStyle: React.CSSProperties = {
+  fontSize: 11,
+  color: "var(--color-danger)",
+  fontWeight: 500,
+};
+
+const sectionHeadingStyle: React.CSSProperties = {
+  fontSize: 11,
+  letterSpacing: "0.25em",
+  textTransform: "uppercase",
+  color: "var(--color-text-hint)",
+  fontWeight: 700,
+  margin: "0.5rem 0 0",
+};
+
+const optionalLabelStyle: React.CSSProperties = {
+  fontSize: 10,
+  fontWeight: 500,
+  color: "var(--color-text-hint)",
+  marginRight: 4,
+};
+
+// ── Driver / Car / Branch minimal types ─────────────────────────────────────
+
+interface DriverOption { id: string; name: string; phone: string; status: string; }
+interface CarOption    { id: string; manufacturer: string; model: string; plateNumber: string; status?: string; }
+interface BranchOption { id: string; name: string; }
+
+// ── Props ────────────────────────────────────────────────────────────────────
+
+interface TripFormModalProps {
+  editTrip: Trip | null;
+  onClose: () => void;
+  onSubmit: (
+    payload: CreateTripPayload | UpdateTripPayload,
+    isNew: boolean,
+  ) => Promise<boolean>;
+}
+
+// ── Component ────────────────────────────────────────────────────────────────
+
+export function TripFormModal({ editTrip, onClose, onSubmit }: TripFormModalProps) {
+  const isNew = editTrip === null;
+
+  // ── Dropdown options ──────────────────────────────────────────────────────
+  const [drivers,  setDrivers]  = useState<DriverOption[]>([]);
+  const [cars,     setCars]     = useState<CarOption[]>([]);
+  const [branches, setBranches] = useState<BranchOption[]>([]);
+
+  useEffect(() => {
+    const token = getStoredToken();
+    // Fetch active drivers
+    get<{ data: { data: DriverOption[] } }>("driver?limit=100&status=Active", token)
+      .then(res => setDrivers((res as unknown as { data: { data: DriverOption[] } }).data?.data ?? []))
+      .catch(() => {});
+    // Fetch active cars
+    get<{ data: { data: CarOption[] } }>("cars?limit=100&status=Active", token)
+      .then(res => setCars((res as unknown as { data: { data: CarOption[] } }).data?.data ?? []))
+      .catch(() => {});
+    // Fetch branches
+    get<{ data: { data: BranchOption[] } }>("branches?limit=100", token)
+      .then(res => setBranches((res as unknown as { data: { data: BranchOption[] } }).data?.data ?? []))
+      .catch(() => {});
+  }, []);
+
+  // ── 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>({});
+  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(); };
+    window.addEventListener("keydown", h);
+    return () => window.removeEventListener("keydown", h);
+  }, [onClose]);
+
+  // ── Error style helper ────────────────────────────────────────────────────
+  const inputStyle = (field: keyof TripSchemaErrors): React.CSSProperties => ({
+    ...inputBase,
+    ...(errors[field] ? { borderColor: "var(--color-danger)", background: "#FEF2F2" } : {}),
+  });
+
+  const clearErr = (field: keyof TripSchemaErrors) =>
+    setErrors(p => ({ ...p, [field]: undefined }));
+
+  // ── Submit ────────────────────────────────────────────────────────────────
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const raw: Record<string, unknown> = {
+      title:              title             || undefined,
+      driverId:           driverId          || undefined,
+      carId:              carId             || undefined,
+      branchId:           branchId          || undefined,
+      status:             status            || undefined,
+      startTime:          startTime         ? `${startTime}:00.000Z` : undefined,
+      endTime:            endTime           ? `${endTime}:00.000Z`   : undefined,
+      collectedCount:     collectedCount    !== "" ? Number(collectedCount)   : undefined,
+      deliveredCount:     deliveredCount    !== "" ? Number(deliveredCount)   : undefined,
+      returnedCount:      returnedCount     !== "" ? Number(returnedCount)    : undefined,
+      totalCashCollected: totalCashCollected !== "" ? Number(totalCashCollected) : undefined,
+      notes:              notes             || undefined,
+      endReason:          endReason         || undefined,
+      ...(!isNew && reason ? { reason } : {}),
+    };
+
+    try {
+      const schema = isNew ? createTripSchema : updateTripSchema;
+      await schema.validate(raw, { abortEarly: false });
+    } catch (err) {
+      if (err instanceof yup.ValidationError) {
+        const map: TripSchemaErrors = {};
+        err.inner.forEach(e => {
+          if (e.path) (map as Record<string, string>)[e.path] = e.message;
+        });
+        setErrors(map);
+      }
+      return;
+    }
+
+    setSaving(true);
+    setApiError("");
+    try {
+      const ok = await onSubmit(raw as CreateTripPayload | UpdateTripPayload, isNew);
+      if (ok) onClose();
+      else setApiError("حدث خطأ أثناء الحفظ. يرجى المحاولة مرة أخرى.");
+    } catch (err) {
+      setApiError(err instanceof Error ? err.message : "حدث خطأ غير متوقع.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div
+      role="dialog" aria-modal="true" aria-labelledby="trip-form-title"
+      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
+      style={{
+        position: "fixed", inset: 0, zIndex: 60,
+        background: "rgba(15,23,42,0.55)", backdropFilter: "blur(4px)",
+        display: "flex", alignItems: "flex-start", justifyContent: "center",
+        padding: "2rem 1rem", overflowY: "auto",
+      }}
+    >
+      <div
+        onClick={e => e.stopPropagation()}
+        style={{
+          width: "100%", maxWidth: 700,
+          background: "var(--color-surface)",
+          borderRadius: "var(--radius-xl)",
+          border: "1px solid var(--color-border)",
+          boxShadow: "0 24px 56px rgba(0,0,0,.2)",
+          overflow: "hidden",
+        }}
+      >
+        {/* Header */}
+        <div style={{
+          padding: "1.25rem 1.5rem",
+          borderBottom: "1px solid var(--color-border)",
+          background: "var(--color-surface-muted)",
+          display: "flex", alignItems: "center", justifyContent: "space-between",
+        }}>
+          <h2 id="trip-form-title" style={{ fontSize: 16, fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>
+            {isNew ? "إضافة رحلة جديدة" : "تعديل بيانات الرحلة"}
+          </h2>
+          <button type="button" onClick={onClose}
+            style={{ background: "none", border: "none", cursor: "pointer", color: "var(--color-text-muted)", padding: 4 }}>
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+              <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} noValidate style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
+
+          {apiError && (
+            <Alert variant="error">{apiError}</Alert>
+          )}
+
+          {/* ── Section: أساسيات الرحلة ── */}
+          <p style={sectionHeadingStyle}>أساسيات الرحلة</p>
+
+          {/* Title */}
+          <label style={labelStyle}>
+            عنوان الرحلة <span style={{ color: "var(--color-danger)" }}>*</span>
+            <input
+              ref={firstRef}
+              style={inputStyle("title")}
+              value={title}
+              onChange={e => { setTitle(e.target.value); clearErr("title"); }}
+              placeholder="مثال: توزيع الرياض الشمالي"
+              dir="rtl"
+            />
+            {errors.title && <span style={errorTextStyle}>{errors.title}</span>}
+          </label>
+
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
+            {/* Driver */}
+            <label style={labelStyle}>
+              السائق <span style={{ color: "var(--color-danger)" }}>*</span>
+              <select
+                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}>{d.name} — {d.phone}</option>
+                ))}
+              </select>
+              {errors.driverId && <span style={errorTextStyle}>{errors.driverId}</span>}
+            </label>
+
+            {/* Car */}
+            <label style={labelStyle}>
+              السيارة <span style={{ color: "var(--color-danger)" }}>*</span>
+              <select
+                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}>{c.manufacturer} {c.model} — {c.plateNumber}</option>
+                ))}
+              </select>
+              {errors.carId && <span style={errorTextStyle}>{errors.carId}</span>}
+            </label>
+          </div>
+
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
+            {/* Branch */}
+            <label style={labelStyle}>
+              الفرع <span style={optionalLabelStyle}>(اختياري)</span>
+              <select
+                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}>{b.name}</option>
+                ))}
+              </select>
+              {errors.branchId && <span style={errorTextStyle}>{errors.branchId}</span>}
+            </label>
+
+            {/* Status */}
+            <label style={labelStyle}>
+              الحالة
+              <select
+                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>
+                <option value="Cancelled">ملغاة</option>
+              </select>
+            </label>
+          </div>
+
+          {/* ── Section: التوقيت ── */}
+          <p style={sectionHeadingStyle}>التوقيت</p>
+
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
+            <label style={labelStyle}>
+              وقت البدء <span style={optionalLabelStyle}>(اختياري)</span>
+              <input
+                type="datetime-local"
+                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
+                type="datetime-local"
+                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 style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: "0.75rem" }}>
+            <label style={labelStyle}>
+              المجمّع <span style={optionalLabelStyle}>(اختياري)</span>
+              <input
+                type="number" 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
+                type="number" 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
+                type="number" 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
+                type="number" 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 style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
+            <label style={labelStyle}>
+              ملاحظات <span style={optionalLabelStyle}>(اختياري)</span>
+              <textarea
+                style={{ ...inputBase, height: 72, padding: "0.5rem 0.75rem", resize: "vertical" }}
+                value={notes}
+                onChange={e => { setNotes(e.target.value); clearErr("notes"); }}
+                placeholder="أي ملاحظات إضافية…"
+                dir="rtl"
+              />
+              {errors.notes && <span style={errorTextStyle}>{errors.notes}</span>}
+            </label>
+
+            <label style={labelStyle}>
+              سبب الإنهاء <span style={optionalLabelStyle}>(اختياري)</span>
+              <textarea
+                style={{ ...inputBase, height: 72, padding: "0.5rem 0.75rem", resize: "vertical" }}
+                value={endReason}
+                onChange={e => { setEndReason(e.target.value); clearErr("endReason"); }}
+                placeholder="سبب إنهاء أو إلغاء الرحلة…"
+                dir="rtl"
+              />
+              {errors.endReason && <span style={errorTextStyle}>{errors.endReason}</span>}
+            </label>
+          </div>
+
+          {/* reason — edit only (for reassigning driver/car) */}
+          {!isNew && (
+            <>
+              <p style={sectionHeadingStyle}>سجل التغيير</p>
+              <label style={labelStyle}>
+                سبب التعديل <span style={optionalLabelStyle}>(مطلوب عند تغيير السائق أو السيارة)</span>
+                <input
+                  style={inputBase}
+                  value={reason}
+                  onChange={e => setReason(e.target.value)}
+                  placeholder="مثال: تغيير السائق بسبب إجازة طارئة"
+                  dir="rtl"
+                />
+              </label>
+            </>
+          )}
+
+          {/* ── Actions ── */}
+          <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end", paddingTop: "0.5rem" }}>
+            <button type="button" onClick={onClose} disabled={saving}
+              style={{
+                height: 40, padding: "0 1.25rem",
+                borderRadius: "var(--radius-md)",
+                border: "1px solid var(--color-border)",
+                background: "var(--color-surface)",
+                fontSize: 13, fontWeight: 600, color: "var(--color-text-secondary)",
+                cursor: saving ? "not-allowed" : "pointer",
+                fontFamily: "var(--font-sans)",
+              }}>
+              إلغاء
+            </button>
+            <button type="submit" disabled={saving}
+              style={{
+                height: 40, padding: "0 1.5rem",
+                borderRadius: "var(--radius-md)",
+                border: "none",
+                background: saving ? "var(--color-brand-400)" : "var(--color-brand-600)",
+                fontSize: 13, fontWeight: 700, color: "#FFF",
+                cursor: saving ? "not-allowed" : "pointer",
+                display: "flex", alignItems: "center", gap: 8,
+                fontFamily: "var(--font-sans)",
+              }}>
+              {saving && <Spinner size="sm" className="text-white" />}
+              {saving ? "جارٍ الحفظ…" : isNew ? "إضافة الرحلة" : "حفظ التغييرات"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

Components/Trip_Report/Tripreportpanel.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useState } from "react";
+import { Spinner } from "../UI";
+import { tripService } from "../../services/trip.service";
+import { getStoredToken } from "../../lib/auth";
+
+interface TripReportPanelProps {
+  tripId: string;
+}
+
+export function TripReportPanel({ tripId }: TripReportPanelProps) {
+  const [loading, setLoading] = useState(false);
+  const [error,   setError]   = useState<string | null>(null);
+
+  const handleGenerate = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const token = getStoredToken();
+      const res = await tripService.getReport(tripId, token);
+      const reportUrl = (res as unknown as { data: { reportUrl: string } }).data?.reportUrl;
+
+      if (!reportUrl) throw new Error("لم يتم إرجاع رابط التقرير.");
+      window.open(reportUrl, "_blank", "noopener,noreferrer");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "تعذّر إنشاء التقرير.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        marginTop: "1.5rem",
+        borderRadius: "var(--radius-lg)",
+        border: "1px solid var(--color-border)",
+        background: "var(--color-surface-muted)",
+        padding: "1rem",
+      }}
+    >
+      <p style={{
+        fontSize: 11,
+        letterSpacing: "0.25em",
+        textTransform: "uppercase",
+        color: "#2563EB",
+        fontWeight: 700,
+        margin: "0 0 0.75rem",
+      }}>
+        إنشاء تقرير الرحلة
+      </p>
+
+      <button
+        type="button"
+        onClick={handleGenerate}
+        disabled={loading}
+        style={{
+          height: 38,
+          padding: "0 1.25rem",
+          borderRadius: "var(--radius-md)",
+          border: "none",
+          fontSize: 13,
+          fontWeight: 700,
+          color: "#FFF",
+          background: loading ? "var(--color-brand-400)" : "var(--color-brand-600)",
+          cursor: loading ? "not-allowed" : "pointer",
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          fontFamily: "var(--font-sans)",
+          whiteSpace: "nowrap",
+        }}
+      >
+        {loading && <Spinner size="sm" className="text-white" />}
+        {loading ? "جارٍ الإنشاء…" : "إنشاء تقرير البيان"}
+      </button>
+
+      {error && (
+        <div
+          style={{
+            marginTop: "0.75rem",
+            borderRadius: "var(--radius-md)",
+            background: "#FEF2F2",
+            border: "1px solid #FECACA",
+            padding: "0.625rem 0.875rem",
+            fontSize: 12,
+            color: "#DC2626",
+            fontWeight: 500,
+          }}
+        >
+          ⚠ {error}
+        </div>
+      )}
+    </div>
+  );
+}

Components/User/UserFormModal.tsx

@@ -1,12 +1,14 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
+import * as yup from "yup";
 import { Alert, Spinner } from "../UI";
+import { createUserSchema, updateUserSchema } from "@/validations/user.validator";
 import type { Branch } from "../../types/branch";
 import type { Role } from "../../types/role";
 import type { FormErrors, User, UserFormData } from "../../types/user";
 
-// ── fixed styles ─────────────────────────────────────────────────
+// ── fixed styles ─────────────────────────────────────────
 const S = {
   input: {
     width: "100%", height: 40, padding: "0 0.75rem",
@@ -24,21 +26,22 @@ const S = {
   errorText: { fontSize: 11, color: "var(--color-danger)", fontWeight: 500 } as React.CSSProperties,
 };
 
-// ── macksure data validation ─────────────────────────────────────────────────────
+// ── yup validation ────────────────────────────────────────────────────────────
-const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+async function validate(data: UserFormData, isNew: boolean): Promise<FormErrors> {
-const PHONE_RE = /^\+?[0-9]{10,15}$/;
+  const schema = isNew ? createUserSchema : updateUserSchema;
-
+  try {
-function validate(data: UserFormData, isNew: boolean): FormErrors {
+    await schema.validate(data, { abortEarly: false });
-  const e: FormErrors = {};
+    return {};
-  if (!data.name.trim())  e.name = "الاسم الكامل مطلوب";
+  } catch (err) {
-  if (data.email && !EMAIL_RE.test(data.email)) e.email = "صيغة البريد الإلكتروني غير صحيحة";
+    if (err instanceof yup.ValidationError) {
-  if (!data.phone.trim()) e.phone = "رقم الهاتف مطلوب";
+      return err.inner.reduce<FormErrors>((acc, e) => {
-  else if (!PHONE_RE.test(data.phone.replace(/\s/g, ""))) e.phone = "رقم هاتف غير صالح (10–15 رقم)";
+        const field = e.path as keyof FormErrors;
-  if (isNew && !data.password) e.password = "كلمة المرور مطلوبة";
+        if (field && !acc[field]) acc[field] = e.message;
-  if (isNew && data.password && data.password.length < 6) e.password = "كلمة المرور 6 أحرف على الأقل";
+        return acc;
-  if (!data.roleId)   e.roleId   = "الدور مطلوب";
+      }, {});
-  if (!data.branchId) e.branchId = "الفرع مطلوب";
+    }
-  return e;
+    return {};
+  }
 }
 
 // ── Props ─────────────────────────────────────────────────────────────────────
@@ -55,12 +58,12 @@ export function UserFormModal({ editUser, roles, branches, onClose, onSubmit }:
   const isNew = editUser === null;
 
   const [form, setForm] = useState<UserFormData>({
-    name:     editUser?.name     ?? "",
+    name:     editUser?.name        ?? "",
-    email:    editUser?.email    ?? "",
+    email:    editUser?.email       ?? "",
-    phone:    editUser?.phone    ?? "",
+    phone:    editUser?.phone       ?? "",
     password: "",
-    roleId:   editUser?.role?.id ?? "",
+    roleId:   editUser?.role?.id    ?? "",
-    branchId: editUser?.branch?.id ?? "",
+    branchId: editUser?.branch?.id  ?? "",
   });
   const [errors,   setErrors]   = useState<FormErrors>({});
   const [saving,   setSaving]   = useState(false);
@@ -77,22 +80,24 @@ export function UserFormModal({ editUser, roles, branches, onClose, onSubmit }:
   const set = (field: keyof UserFormData) =>
     (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
       setForm(p => ({ ...p, [field]: e.target.value }));
+      // clear field error on change
       if (errors[field]) setErrors(p => ({ ...p, [field]: undefined }));
     };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    // makesure data is valid before sending to API
+    const errs = await validate(
-    const errs = validate(form, isNew);
+      !isNew && !form.password
+        ? { ...form, password: undefined as unknown as string }
+        : form,
+      isNew,
+    );
     if (Object.keys(errs).length) { setErrors(errs); return; }
-    // final check to prevent sending bad data to API (shouldn't happen because of validation, but just in case)
-    if (!form.name.trim() || !form.phone.trim() || !form.roleId || !form.branchId) {
-      setApiError("يرجى التأكد من إدخال جميع البيانات المطلوبة.");
-      return;
-    }
     setSaving(true);
     setApiError("");
-    const ok = await onSubmit(form, isNew);
+    const payload: Partial<UserFormData> = { ...form };
+    if (!isNew && !payload.password) delete payload.password;
+    const ok = await onSubmit(payload as UserFormData, isNew);
     setSaving(false);
     if (ok) onClose();
     else setApiError("حدث خطأ غير متوقع. يرجى المحاولة لاحقاً.");
@@ -146,18 +151,18 @@ export function UserFormModal({ editUser, roles, branches, onClose, onSubmit }:
           </button>
         </div>
 
-        {/* body*/}
+        {/* body */}
         <form onSubmit={handleSubmit} noValidate style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
           {apiError && <Alert type="error" message={apiError} onClose={() => setApiError("")} />}
 
-          {/* name field*/}
+          {/* name */}
           <label style={S.label}>
             الاسم الكامل *
             <input ref={firstInputRef} style={inputStyle("name")} value={form.name} onChange={set("name")} placeholder="أحمد الرشيدي" autoComplete="name" dir="rtl" />
             {errors.name && <span style={S.errorText}>{errors.name}</span>}
           </label>
 
-          {/* email and phone fields */}
+          {/* email + phone */}
           <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
             <label style={S.label}>
               البريد الإلكتروني
@@ -171,14 +176,14 @@ export function UserFormModal({ editUser, roles, branches, onClose, onSubmit }:
             </label>
           </div>
 
-          {/* password field */}
+          {/* password */}
           <label style={S.label}>
             {isNew ? "كلمة المرور *" : "كلمة المرور الجديدة (اتركها فارغة إذا لا تريد تغييرها)"}
             <input style={inputStyle("password")} type="password" value={form.password} onChange={set("password")} placeholder="••••••••" autoComplete={isNew ? "new-password" : "off"} dir="ltr" />
             {errors.password && <span style={S.errorText}>{errors.password}</span>}
           </label>
 
-          {/* role and branch fields */}
+          {/* role + branch */}
           <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
             <label style={S.label}>
               الدور *
@@ -198,7 +203,7 @@ export function UserFormModal({ editUser, roles, branches, onClose, onSubmit }:
             </label>
           </div>
 
-          {/* action buttons */}
+          {/* actions */}
           <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end", paddingTop: "0.5rem" }}>
             <button type="button" onClick={onClose} disabled={saving}
               style={{ height: 40, padding: "0 1.25rem", borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", fontSize: 13, fontWeight: 600, color: "var(--color-text-secondary)", cursor: saving ? "not-allowed" : "pointer", fontFamily: "var(--font-sans)" }}>

Components/car/CarDetailPanel.tsx

@@ -5,40 +5,12 @@
 import { useEffect, useState } from "react";
 import { Spinner } from "../UI";
 import { CarImageGallery } from "./CarImageGallery";
-import { carService } from "../../services/car.service";
+import { useCarDetail } from "../../hooks/useCars";
-import { getStoredToken } from "../../lib/auth";
+import { STATUS_MAP, INS_MAP, fmtDate, isExpiringSoon } from "../../types/car";
-import type { Car, CarStatus, InsuranceStatus } from "../../types/car";
+import type { Car, InsuranceStatus } from "../../types/car";
-
-// ── Status config ─────────────────────────────────────────────────────────────
-const STATUS_MAP: Record<CarStatus, { label: string; color: string; bg: string; border: string }> = {
-  Active:        { label: "نشط",       color: "#166534", bg: "#DCFCE7", border: "#BBF7D0" },
-  InMaintenance: { label: "صيانة",     color: "#854D0E", bg: "#FFFBEB", border: "#FDE68A" },
-  InTrip:        { label: "في رحلة",   color: "#1E40AF", bg: "#EFF6FF", border: "#BFDBFE" },
-  Inactive:      { label: "غير نشط",  color: "#64748B", bg: "#F1F5F9", border: "#E2E8F0" },
-};
-
-const INS_MAP: Record<InsuranceStatus, { label: string; color: string }> = {
-  Valid:       { label: "سارٍ",        color: "#16A34A" },
-  Expired:     { label: "منتهي",       color: "#DC2626" },
-  NotInsured:  { label: "غير مؤمَّن", color: "#D97706" },
-};
-
-// ── Helper: format date ───────────────────────────────────────────────────────
-function fmtDate(iso?: string | null): string {
-  if (!iso) return "—";
-  return new Date(iso).toLocaleDateString("ar-SA", {
-    year: "numeric", month: "long", day: "numeric",
-  });
-}
-
-/** Returns true if the date is within 90 days in the future (or already past) */
-function isExpiringSoon(iso?: string | null): boolean {
-  if (!iso) return false;
-  const diff = new Date(iso).getTime() - Date.now();
-  return diff <= 90 * 86_400_000;
-}
 
 // ── Props ─────────────────────────────────────────────────────────────────────
+
 interface CarDetailPanelProps {
   carId: string;
   onClose: () => void;
@@ -47,7 +19,10 @@ interface CarDetailPanelProps {
 }
 
 // ── Row component ─────────────────────────────────────────────────────────────
-function DetailRow({ label, value, mono = false, warn = false }: { label: string; value: string; mono?: boolean; warn?: boolean }) {
+
+function DetailRow({ label, value, mono = false, warn = false }: {
+  label: string; value: string; mono?: boolean; warn?: boolean;
+}) {
   return (
     <div style={{
       display: "flex", justifyContent: "space-between", alignItems: "baseline",
@@ -68,22 +43,10 @@ function DetailRow({ label, value, mono = false, warn = false }: { label: string
 }
 
 // ── Component ─────────────────────────────────────────────────────────────────
-export function CarDetailPanel({ carId, onClose, onEdit, onDelete }: CarDetailPanelProps) {
-  const [car,     setCar]     = useState<Car | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error,   setError]   = useState<string | null>(null);
-  const [gallery, setGallery] = useState(false);
 
-  useEffect(() => {
+export function CarDetailPanel({ carId, onClose, onEdit, onDelete }: CarDetailPanelProps) {
-    const token = getStoredToken();
+  const { car, loading, error } = useCarDetail(carId);
-    setLoading(true);
+  const [gallery, setGallery] = useState(false);
-    setError(null);
-    carService
-      .getById(carId, token)
-      .then(res => setCar((res as unknown as { data: Car }).data))
-      .catch((err: Error) => setError(err.message))
-      .finally(() => setLoading(false));
-  }, [carId]);
 
   useEffect(() => {
     const h = (e: KeyboardEvent) => { if (e.key === "Escape" && !gallery) onClose(); };
@@ -91,7 +54,6 @@ export function CarDetailPanel({ carId, onClose, onEdit, onDelete }: CarDetailPa
     return () => window.removeEventListener("keydown", h);
   }, [gallery, onClose]);
 
-  // ── Render ───────────────────────────────────────────────────────────────────
   return (
     <>
       {/* Backdrop */}
@@ -169,7 +131,7 @@ export function CarDetailPanel({ carId, onClose, onEdit, onDelete }: CarDetailPa
                   );
                 })()}
                 {car.insuranceStatus && (() => {
-                  const ins = INS_MAP[car.insuranceStatus!];
+                  const ins = INS_MAP[car.insuranceStatus as InsuranceStatus];
                   return (
                     <span style={{ borderRadius: "var(--radius-full)", border: `1px solid ${ins.color}33`, background: `${ins.color}11`, padding: "0.3rem 0.875rem", fontSize: 12, fontWeight: 700, color: ins.color }}>
                       تأمين: {ins.label}
@@ -197,31 +159,31 @@ export function CarDetailPanel({ carId, onClose, onEdit, onDelete }: CarDetailPa
               <p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "var(--color-text-hint)", fontWeight: 700, margin: "1.25rem 0 0.5rem" }}>
                 بيانات اللوحة
               </p>
-              <DetailRow label="رقم اللوحة"   value={`${car.plateLetters} ${car.plateNumber}`} mono />
+              <DetailRow label="رقم اللوحة"      value={`${car.plateLetters} ${car.plateNumber}`} mono />
-              <DetailRow label="نوع اللوحة"   value={car.plateType ?? "—"} />
+              <DetailRow label="نوع اللوحة"       value={car.plateType ?? "—"} />
-              <DetailRow label="رقم الاستمارة" value={car.registrationNumber ?? "—"} mono />
+              <DetailRow label="رقم الاستمارة"    value={car.registrationNumber ?? "—"} mono />
               <DetailRow label="رقم الهيكل (VIN)" value={car.vinNumber ?? "—"} mono />
 
               {/* Section: Regulatory */}
               <p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "var(--color-text-hint)", fontWeight: 700, margin: "1.25rem 0 0.5rem" }}>
                 الترخيص والتأمين
               </p>
-              <DetailRow label="انتهاء الاستمارة"    value={fmtDate(car.registrationExpiryDate)} warn={isExpiringSoon(car.registrationExpiryDate)} />
+              <DetailRow label="انتهاء الاستمارة"     value={fmtDate(car.registrationExpiryDate)} warn={isExpiringSoon(car.registrationExpiryDate)} />
-              <DetailRow label="انتهاء التأمين"       value={fmtDate(car.insuranceExpiryDate)}    warn={isExpiringSoon(car.insuranceExpiryDate)} />
+              <DetailRow label="انتهاء التأمين"        value={fmtDate(car.insuranceExpiryDate)}    warn={isExpiringSoon(car.insuranceExpiryDate)} />
-              <DetailRow label="انتهاء الفحص الدوري" value={fmtDate(car.inspectionExpiryDate)}   warn={isExpiringSoon(car.inspectionExpiryDate)} />
+              <DetailRow label="انتهاء الفحص الدوري"  value={fmtDate(car.inspectionExpiryDate)}   warn={isExpiringSoon(car.inspectionExpiryDate)} />
-              <DetailRow label="رقم بطاقة التشغيل"   value={car.operationCardNumber ?? "—"} mono />
+              <DetailRow label="رقم بطاقة التشغيل"    value={car.operationCardNumber ?? "—"} mono />
               <DetailRow label="انتهاء بطاقة التشغيل" value={fmtDate(car.operationCardExpiry)} />
 
               {/* Section: Operational */}
               <p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "var(--color-text-hint)", fontWeight: 700, margin: "1.25rem 0 0.5rem" }}>
                 بيانات تشغيلية
               </p>
-              <DetailRow label="رقم GPS"             value={car.gpsDeviceId ?? "—"} mono />
+              <DetailRow label="رقم GPS"            value={car.gpsDeviceId ?? "—"} mono />
-              <DetailRow label="الطاقة الاستيعابية"  value={car.capacity != null ? String(car.capacity) : "—"} />
+              <DetailRow label="الطاقة الاستيعابية" value={car.capacity != null ? String(car.capacity) : "—"} />
-              <DetailRow label="الوزن (كجم)"         value={car.weight != null ? String(car.weight) : "—"} />
+              <DetailRow label="الوزن (كجم)"        value={car.weight != null ? String(car.weight) : "—"} />
-              <DetailRow label="حالة الحجز"          value={car.currentImpoundStatus ?? "بدون"} />
+              <DetailRow label="حالة الحجز"         value={car.currentImpoundStatus ?? "بدون"} />
-              <DetailRow label="تاريخ الإضافة"       value={fmtDate(car.createdAt)} />
+              <DetailRow label="تاريخ الإضافة"      value={fmtDate(car.createdAt)} />
-              <DetailRow label="آخر تحديث"           value={fmtDate(car.updatedAt)} />
+              <DetailRow label="آخر تحديث"          value={fmtDate(car.updatedAt)} />
 
               {/* Status History */}
               {car.statusHistory && car.statusHistory.length > 0 && (
@@ -263,7 +225,6 @@ export function CarDetailPanel({ carId, onClose, onEdit, onDelete }: CarDetailPa
             display: "flex", gap: "0.75rem",
             flexShrink: 0,
           }}>
-            {/* Gallery */}
             <button type="button" onClick={() => setGallery(true)}
               style={{ flex: 1, height: 40, borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", fontSize: 13, fontWeight: 600, color: "var(--color-text-secondary)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", gap: 8, fontFamily: "var(--font-sans)" }}>
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
@@ -273,8 +234,6 @@ export function CarDetailPanel({ carId, onClose, onEdit, onDelete }: CarDetailPa
               </svg>
               الصور
             </button>
-
-            {/* Edit */}
             <button type="button" onClick={() => onEdit(car)}
               style={{ flex: 2, height: 40, borderRadius: "var(--radius-md)", border: "none", background: "var(--color-brand-600)", fontSize: 13, fontWeight: 700, color: "#FFF", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", gap: 8, fontFamily: "var(--font-sans)" }}>
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
@@ -283,8 +242,6 @@ export function CarDetailPanel({ carId, onClose, onEdit, onDelete }: CarDetailPa
               </svg>
               تعديل
             </button>
-
-            {/* Delete */}
             <button type="button" onClick={() => onDelete(car)}
               style={{ height: 40, padding: "0 1rem", borderRadius: "var(--radius-md)", border: "1px solid #FECACA", background: "#FEF2F2", fontSize: 13, fontWeight: 700, color: "#DC2626", cursor: "pointer", fontFamily: "var(--font-sans)" }}>
               حذف
@@ -293,7 +250,6 @@ export function CarDetailPanel({ carId, onClose, onEdit, onDelete }: CarDetailPa
         )}
       </aside>
 
-      {/* Image gallery overlay */}
       {gallery && car && (
         <CarImageGallery car={car} onClose={() => setGallery(false)} />
       )}

Components/car/CarFormModal.tsx

@@ -1,18 +1,23 @@
 "use client";
+// Components/Car/CarFormModal.tsx
 
 import { useEffect, useRef, useState } from "react";
+import * as yup from "yup";
 import { Alert, Spinner } from "../UI";
 import { get } from "../../services/api";
 import { getStoredToken } from "../../lib/auth";
+import { createCarSchema, updateCarSchema } from "@/validations/car.validator";
 import type {
   Car,
   CarFormErrors,
   CreateCarPayload,
+  InsuranceStatus,
   UpdateCarPayload,
 } from "../../types/car";
 import type { Branch } from "../../types/branch";
 
-// ── Shared input style ───────────────────────────────────────────────────────
+// ── Shared input style ────────────────────────────────────────────────────────
+
 const inputBase: React.CSSProperties = {
   width: "100%",
   height: 40,
@@ -41,34 +46,39 @@ const errorTextStyle: React.CSSProperties = {
   fontWeight: 500,
 };
 
-// ── Validation ───────────────────────────────────────────────────────────────
+// ── yup validation ────────────────────────────────────────────────────────────
-function validate(form: Partial<CreateCarPayload>): CarFormErrors {
+
-  const e: CarFormErrors = {};
+async function validate(
-  if (!form.manufacturer?.trim()) e.manufacturer = "الشركة المصنعة مطلوبة";
+  form: Partial<CreateCarPayload>,
-  if (!form.model?.trim()) e.model = "الموديل مطلوب";
+  isNew: boolean,
-  if (
+): Promise<CarFormErrors> {
-    !form.year ||
+  const schema = isNew ? createCarSchema : updateCarSchema;
-    form.year < 1900 ||
+  try {
-    form.year > new Date().getFullYear() + 1
+    await schema.validate(form, { abortEarly: false });
-  )
+    return {};
-    e.year = "سنة غير صالحة";
+  } catch (err) {
-  if (!form.plateNumber?.trim()) e.plateNumber = "رقم اللوحة مطلوب";
+    if (err instanceof yup.ValidationError) {
-  if (!form.plateLetters?.trim()) e.plateLetters = "حروف اللوحة مطلوبة";
+      return err.inner.reduce<CarFormErrors>((acc, e) => {
-  return e;
+        const field = e.path as keyof CarFormErrors;
+        if (field && !acc[field]) acc[field] = e.message;
+        return acc;
+      }, {});
+    }
+    return {};
+  }
 }
 
-// ── Date helper ──────────────────────────────────────────────────────────────
+// ── Date helper ───────────────────────────────────────────────────────────────
-// <input type="date"> gives "YYYY-MM-DD"; the backend z.string().datetime()
+// <input type="date"> gives "YYYY-MM-DD"; backend expects full ISO-8601.
-// requires a full ISO-8601 string ("YYYY-MM-DDTHH:mm:ss.sssZ").
+
-// We keep state as the short form (so the input renders correctly) and convert
-// only at submit time.
 function toIsoDateTime(val: string): string {
   if (!val) return val;
-  if (val.includes("T")) return val; // Already in ISO format, likely from an existing record — just return as-is.
+  if (val.includes("T")) return val;
-  return `${val}T00:00:00.000Z`; // transform "2026-12-31" → "2026-12-31T00:00:00.000Z"
+  return `${val}T00:00:00.000Z`;
 }
 
-// ── Props ────────────────────────────────────────────────────────────────────
+// ── Props ─────────────────────────────────────────────────────────────────────
+
 interface CarFormModalProps {
   editCar: Car | null;
   /** Pass pre-loaded branches or an empty array — the modal will auto-fetch if empty. */
@@ -80,7 +90,8 @@ interface CarFormModalProps {
   ) => Promise<boolean>;
 }
 
-// ── Component ────────────────────────────────────────────────────────────────
+// ── Component ─────────────────────────────────────────────────────────────────
+
 export function CarFormModal({
   editCar,
   branches: branchesProp,
@@ -104,13 +115,12 @@ export function CarFormModal({
         setBranches(list);
       })
       .catch(() => {
-        /* silently ignore — user can still submit */
+        /* silently ignore */
       });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // ── Form state — each field correctly typed ────────────────────────────────
+  // ── Form state ─────────────────────────────────────────────────────────────
-  // String fields
   const [manufacturer, setManufacturer] = useState(editCar?.manufacturer ?? "");
   const [model, setModel] = useState(editCar?.model ?? "");
   const [color, setColor] = useState(editCar?.color ?? "");
@@ -122,11 +132,11 @@ export function CarFormModal({
   );
   const [vinNumber, setVinNumber] = useState(editCar?.vinNumber ?? "");
   const [branchId, setBranchId] = useState(editCar?.branch?.id ?? "");
-  const [currentStatus, setCurrentStatus] = useState(
+  const [currentStatus, setCurrentStatus] = useState<Car["currentStatus"]>(
     editCar?.currentStatus ?? "Active",
   );
-  const [insuranceStatus, setInsuranceStatus] = useState(
+  const [insuranceStatus, setInsuranceStatus] = useState<InsuranceStatus>(
-    editCar?.insuranceStatus ?? "Valid",
+    (editCar?.insuranceStatus as InsuranceStatus) ?? "Valid",
   );
   const [registrationExpiryDate, setRegistrationExpiryDate] = useState(
     editCar?.registrationExpiryDate?.slice(0, 10) ?? "",
@@ -138,7 +148,6 @@ export function CarFormModal({
     editCar?.inspectionExpiryDate?.slice(0, 10) ?? "",
   );
   const [gpsDeviceId, setGpsDeviceId] = useState(editCar?.gpsDeviceId ?? "");
-  // Numeric fields — undefined when blank
   const [year, setYear] = useState<number | undefined>(
     editCar?.year ?? new Date().getFullYear(),
   );
@@ -165,11 +174,9 @@ export function CarFormModal({
     return () => window.removeEventListener("keydown", h);
   }, [onClose]);
 
-  // ── Number input helper ───────────────────────────────────────────────────
   const parseNum = (v: string): number | undefined =>
     v.trim() === "" ? undefined : Number(v);
 
-  // ── Input error style ─────────────────────────────────────────────────────
   const inputStyle = (field: keyof CarFormErrors): React.CSSProperties => ({
     ...inputBase,
     ...(errors[field]
@@ -181,26 +188,39 @@ export function CarFormModal({
     setErrors((p) => ({ ...p, [field]: undefined }));
 
   // ── Submit ────────────────────────────────────────────────────────────────
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
-    // Build a partial payload for validation (only required fields matter here)
+    // Build snapshot for yup — include all fields so optional rules also run
-    const forValidation: Partial<CreateCarPayload> = {
+    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 = validate(forValidation);
+
+    const errs = await validate(formSnapshot, isNew);
     if (Object.keys(errs).length) {
       setErrors(errs);
       return;
     }
 
-    // Build the full payload — strip empty strings to avoid schema rejection.
+    // Build final payload — convert date strings to ISO-8601 for the backend
-    // We use `unknown` cast here to satisfy TypeScript while we construct the
-    // object dynamically; the structure still fully matches CreateCarPayload.
     const raw: Record<string, unknown> = {
       manufacturer,
       model,
@@ -209,8 +229,6 @@ export function CarFormModal({
       plateLetters,
       currentStatus,
     };
-
-    // Optional string fields — only include if non-empty
     if (color) raw.color = color;
     if (plateType) raw.plateType = plateType;
     if (registrationNumber) raw.registrationNumber = registrationNumber;
@@ -223,16 +241,11 @@ export function CarFormModal({
       raw.insuranceExpiryDate = toIsoDateTime(insuranceExpiryDate);
     if (inspectionExpiryDate)
       raw.inspectionExpiryDate = toIsoDateTime(inspectionExpiryDate);
-
     if (gpsDeviceId) raw.gpsDeviceId = gpsDeviceId;
-
-    // Numeric optional fields
     if (capacity !== undefined) raw.capacity = capacity;
     if (weight !== undefined) raw.weight = weight;
 
-    // Cast to CreateCarPayload — structure is identical, we just built it dynamically
     const payload = raw as unknown as CreateCarPayload;
-
     setSaving(true);
     setApiError("");
     const ok = await onSubmit(payload, isNew);
@@ -242,6 +255,7 @@ export function CarFormModal({
   };
 
   // ── Render ────────────────────────────────────────────────────────────────
+
   return (
     <div
       role="dialog"
@@ -358,7 +372,7 @@ export function CarFormModal({
             />
           )}
 
-          {/* Section: Basic Info */}
+          {/* ── Section: Basic Info ── */}
           <p
             style={{
               fontSize: 11,
@@ -379,7 +393,6 @@ export function CarFormModal({
               gap: "0.75rem",
             }}
           >
-            {/* Manufacturer — directly mapped to CreateCarPayload.manufacturer */}
             <label style={labelStyle}>
               الشركة المصنعة *
               <input
@@ -398,8 +411,6 @@ export function CarFormModal({
                 <span style={errorTextStyle}>{errors.manufacturer}</span>
               )}
             </label>
-
-            {/* Model — directly mapped to CreateCarPayload.model */}
             <label style={labelStyle}>
               الموديل *
               <input
@@ -425,7 +436,6 @@ export function CarFormModal({
               gap: "0.75rem",
             }}
           >
-            {/* Year — maps to CreateCarPayload.year (number) */}
             <label style={labelStyle}>
               سنة الصنع *
               <input
@@ -464,7 +474,7 @@ export function CarFormModal({
             </label>
           </div>
 
-          {/* Section: Plate */}
+          {/* ── Section: Plate ── */}
           <p
             style={{
               fontSize: 11,
@@ -484,7 +494,6 @@ export function CarFormModal({
               gap: "0.75rem",
             }}
           >
-            {/* plateNumber — directly mapped to CreateCarPayload.plateNumber */}
             <label style={labelStyle}>
               رقم اللوحة *
               <input
@@ -501,8 +510,6 @@ export function CarFormModal({
                 <span style={errorTextStyle}>{errors.plateNumber}</span>
               )}
             </label>
-
-            {/* plateLetters — directly mapped to CreateCarPayload.plateLetters */}
             <label style={labelStyle}>
               حروف اللوحة *
               <input
@@ -521,7 +528,7 @@ export function CarFormModal({
             </label>
           </div>
 
-          {/* Section: Registration & Legal */}
+          {/* ── Section: Registration & Legal ── */}
           <p
             style={{
               fontSize: 11,
@@ -542,24 +549,36 @@ export function CarFormModal({
             }}
           >
             <label style={labelStyle}>
-              رقم الاستمارة
+              رقم الاستمارة *
               <input
-                style={inputBase}
+                style={inputStyle("registrationNumber")}
                 value={registrationNumber}
-                onChange={(e) => setRegistrationNumber(e.target.value)}
+                onChange={(e) => {
+                  setRegistrationNumber(e.target.value);
+                  clearFieldError("registrationNumber");
+                }}
                 placeholder="SA-001234"
                 dir="ltr"
               />
+              {errors.registrationNumber && (
+                <span style={errorTextStyle}>{errors.registrationNumber}</span>
+              )}
             </label>
             <label style={labelStyle}>
               رقم الهيكل (VIN)
               <input
-                style={inputBase}
+                style={inputStyle("vinNumber")}
                 value={vinNumber}
-                onChange={(e) => setVinNumber(e.target.value)}
+                onChange={(e) => {
+                  setVinNumber(e.target.value);
+                  clearFieldError("vinNumber");
+                }}
                 placeholder="1HGBH41JXMN109186"
                 dir="ltr"
               />
+              {errors.vinNumber && (
+                <span style={errorTextStyle}>{errors.vinNumber}</span>
+              )}
             </label>
             <label style={labelStyle}>
               انتهاء الاستمارة
@@ -574,11 +593,9 @@ export function CarFormModal({
               حالة التأمين
               <select
                 style={{ ...inputBase, cursor: "pointer" }}
-                value={insuranceStatus ?? "Valid"}
+                value={insuranceStatus}
                 onChange={(e) =>
-                  setInsuranceStatus(
+                  setInsuranceStatus(e.target.value as InsuranceStatus)
-                    e.target.value as Car["insuranceStatus"] | undefined,
-                  )
                 }
                 dir="rtl"
               >
@@ -607,7 +624,7 @@ export function CarFormModal({
             </label>
           </div>
 
-          {/* Section: Operational */}
+          {/* ── Section: Operational ── */}
           <p
             style={{
               fontSize: 11,
@@ -669,35 +686,45 @@ export function CarFormModal({
                 dir="ltr"
               />
             </label>
-            {/* capacity — maps to CreateCarPayload.capacity (number | undefined) */}
             <label style={labelStyle}>
               الطاقة الاستيعابية
               <input
-                style={inputBase}
+                style={inputStyle("capacity")}
                 type="number"
                 min={0}
                 value={capacity ?? ""}
-                onChange={(e) => setCapacity(parseNum(e.target.value))}
+                onChange={(e) => {
+                  setCapacity(parseNum(e.target.value));
+                  clearFieldError("capacity");
+                }}
                 placeholder="0"
                 dir="ltr"
               />
+              {errors.capacity && (
+                <span style={errorTextStyle}>{errors.capacity}</span>
+              )}
             </label>
-            {/* weight — maps to CreateCarPayload.weight (number | undefined) */}
             <label style={labelStyle}>
               الوزن (كجم)
               <input
-                style={inputBase}
+                style={inputStyle("weight")}
                 type="number"
                 min={0}
                 value={weight ?? ""}
-                onChange={(e) => setWeight(parseNum(e.target.value))}
+                onChange={(e) => {
+                  setWeight(parseNum(e.target.value));
+                  clearFieldError("weight");
+                }}
                 placeholder="0"
                 dir="ltr"
               />
+              {errors.weight && (
+                <span style={errorTextStyle}>{errors.weight}</span>
+              )}
             </label>
           </div>
 
-          {/* Actions */}
+          {/* ── Actions ── */}
           <div
             style={{
               display: "flex",

Components/car/CarImageGallery.tsx

@@ -2,110 +2,57 @@
 // Components/Car/CarImageGallery.tsx
 // Full-screen gallery modal for viewing, uploading and deleting car images.
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { Spinner } from "../UI";
-import { carService } from "../../services/car.service";
+import { useCarImages } from "../../hooks/useCars";
-import { getStoredToken } from "../../lib/auth";
+import { STAGE_MAP } from "../../types/car";
 import type { Car, CarImage, ImageStage } from "../../types/car";
 
-// ── Stage badge config ────────────────────────────────────────────────────────
-const STAGE_MAP: Record<ImageStage, { label: string; color: string; bg: string }> = {
-  BEFORE:  { label: "قبل",  color: "#854D0E", bg: "#FFFBEB" },
-  AFTER:   { label: "بعد",  color: "#166534", bg: "#DCFCE7" },
-  GENERAL: { label: "عام",  color: "#1E40AF", bg: "#EFF6FF" },
-};
-
 // ── Props ─────────────────────────────────────────────────────────────────────
+
 interface CarImageGalleryProps {
   car: Car;
   onClose: () => void;
 }
 
 // ── Component ─────────────────────────────────────────────────────────────────
+
 export function CarImageGallery({ car, onClose }: CarImageGalleryProps) {
-  const [images,     setImages]     = useState<CarImage[]>([]);
+  const [stage,    setStage]    = useState<ImageStage>("GENERAL");
-  const [loading,    setLoading]    = useState(true);
+  const [sortBy,   setSortBy]   = useState<"asc" | "desc">("desc");
-  const [uploading,  setUploading]  = useState(false);
+  const [lightbox, setLightbox] = useState<CarImage | null>(null);
-  const [deleting,   setDeleting]   = useState<string | null>(null);
+  const fileRef                 = useRef<HTMLInputElement>(null);
-  const [error,      setError]      = useState<string | null>(null);
-  const [lightbox,   setLightbox]   = useState<CarImage | null>(null);
-  const [stage,      setStage]      = useState<ImageStage>("GENERAL");
-  const [sortBy,     setSortBy]     = useState<"asc" | "desc">("desc");
-  const fileRef                     = useRef<HTMLInputElement>(null);
 
-  // ── Fetch images ────────────────────────────────────────────────────────────
+  const {
-  const fetchImages = useCallback(async () => {
+    images, loading, uploading, deleting, error, setError,
-    setLoading(true);
+    uploadImages, deleteImage,
-    setError(null);
+  } = useCarImages(car.id, sortBy);
-    try {
-      const token = getStoredToken();
-      const res = await carService.getImages(car.id, token, { sortBy });
-      const raw = (res as unknown as { data: CarImage[] }).data ?? [];
-      setImages(raw);
-    } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : "تعذّر تحميل الصور");
-    } finally {
-      setLoading(false);
-    }
-  }, [car.id, sortBy]);
 
-  useEffect(() => { fetchImages(); }, [fetchImages]);
-
-  // Close on Escape
-  useEffect(() => {
-    const h = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        if (lightbox) setLightbox(null);
-        else onClose();
-      }
-    };
-    window.addEventListener("keydown", h);
-    return () => window.removeEventListener("keydown", h);
-  }, [lightbox, onClose]);
-
-  // ── Upload handler ──────────────────────────────────────────────────────────
   const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = Array.from(e.target.files ?? []);
     if (!files.length) return;
-    setUploading(true);
+    await uploadImages(files, stage);
-    setError(null);
+    if (fileRef.current) fileRef.current.value = "";
-    try {
-      const token = getStoredToken();
-      await carService.uploadImages(car.id, files, stage, token);
-      await fetchImages();
-    } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : "فشل رفع الصور");
-    } finally {
-      setUploading(false);
-      if (fileRef.current) fileRef.current.value = "";
-    }
   };
 
-  // ── Delete handler ──────────────────────────────────────────────────────────
   const handleDelete = async (imageId: string) => {
-    setDeleting(imageId);
+    const ok = await deleteImage(imageId);
-    setError(null);
+    if (ok && lightbox?.id === imageId) setLightbox(null);
-    try {
+  };
-      const token = getStoredToken();
+
-      await carService.deleteImage(imageId, token);
+  const handleKeyDown = (e: React.KeyboardEvent) => {
-      setImages(prev => prev.filter(img => img.id !== imageId));
+    if (e.key === "Escape") {
-      if (lightbox?.id === imageId) setLightbox(null);
+      if (lightbox) setLightbox(null);
-    } catch (err: unknown) {
+      else onClose();
-      setError(err instanceof Error ? err.message : "فشل حذف الصورة");
-    } finally {
-      setDeleting(null);
     }
   };
 
-  // ── Helpers ─────────────────────────────────────────────────────────────────
+  const imgSrc = (img: CarImage) => img.url ?? `/api/proxy/car-photos/${img.image}`;
-  /** Build full image URL — uses the proxy so no CORS issues */
-  const imgSrc = (img: CarImage) =>
-    img.url ?? `/api/proxy/car-photos/${img.image}`;
 
-  // ── Render ───────────────────────────────────────────────────────────────────
   return (
     <div
       role="dialog" aria-modal="true" aria-label="معرض صور المركبة"
+      onKeyDown={handleKeyDown}
       onClick={e => { if (e.target === e.currentTarget) onClose(); }}
       style={{
         position: "fixed", inset: 0, zIndex: 70,
@@ -131,56 +78,23 @@ export function CarImageGallery({ car, onClose }: CarImageGalleryProps) {
         </div>
         <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
           {/* Sort */}
-          <select
+          <select value={sortBy} onChange={e => setSortBy(e.target.value as "asc" | "desc")}
-            value={sortBy}
+            style={{ height: 36, borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", fontSize: 12, color: "var(--color-text-secondary)", padding: "0 0.75rem", outline: "none", fontFamily: "var(--font-sans)" }}>
-            onChange={e => setSortBy(e.target.value as "asc" | "desc")}
-            style={{
-              height: 36, borderRadius: "var(--radius-md)",
-              border: "1px solid var(--color-border)",
-              background: "var(--color-surface)",
-              fontSize: 12, color: "var(--color-text-secondary)",
-              padding: "0 0.75rem", outline: "none",
-              fontFamily: "var(--font-sans)",
-            }}
-          >
             <option value="desc">الأحدث أولاً</option>
             <option value="asc">الأقدم أولاً</option>
           </select>
 
           {/* Stage selector for upload */}
-          <select
+          <select value={stage} onChange={e => setStage(e.target.value as ImageStage)}
-            value={stage}
+            style={{ height: 36, borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", fontSize: 12, color: "var(--color-text-secondary)", padding: "0 0.75rem", outline: "none", fontFamily: "var(--font-sans)" }}>
-            onChange={e => setStage(e.target.value as ImageStage)}
-            style={{
-              height: 36, borderRadius: "var(--radius-md)",
-              border: "1px solid var(--color-border)",
-              background: "var(--color-surface)",
-              fontSize: 12, color: "var(--color-text-secondary)",
-              padding: "0 0.75rem", outline: "none",
-              fontFamily: "var(--font-sans)",
-            }}
-          >
             <option value="GENERAL">عام</option>
             <option value="BEFORE">قبل</option>
             <option value="AFTER">بعد</option>
           </select>
 
           {/* Upload button */}
-          <button
+          <button type="button" onClick={() => fileRef.current?.click()} disabled={uploading}
-            type="button"
+            style={{ height: 36, padding: "0 1rem", borderRadius: "var(--radius-md)", border: "none", background: uploading ? "var(--color-brand-400)" : "var(--color-brand-600)", fontSize: 13, fontWeight: 700, color: "#FFF", cursor: uploading ? "not-allowed" : "pointer", display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--font-sans)" }}>
-            onClick={() => fileRef.current?.click()}
-            disabled={uploading}
-            style={{
-              height: 36, padding: "0 1rem",
-              borderRadius: "var(--radius-md)",
-              border: "none",
-              background: uploading ? "var(--color-brand-400)" : "var(--color-brand-600)",
-              fontSize: 13, fontWeight: 700, color: "#FFF",
-              cursor: uploading ? "not-allowed" : "pointer",
-              display: "flex", alignItems: "center", gap: 8,
-              fontFamily: "var(--font-sans)",
-            }}
-          >
             {uploading
               ? <><Spinner size="sm" className="text-white" /> جارٍ الرفع…</>
               : <>
@@ -191,14 +105,7 @@ export function CarImageGallery({ car, onClose }: CarImageGalleryProps) {
                 </>
             }
           </button>
-          <input
+          <input ref={fileRef} type="file" accept="image/*" multiple style={{ display: "none" }} onChange={handleUpload} />
-            ref={fileRef}
-            type="file"
-            accept="image/*"
-            multiple
-            style={{ display: "none" }}
-            onChange={handleUpload}
-          />
 
           {/* Close */}
           <button type="button" onClick={onClose} aria-label="إغلاق"
@@ -228,53 +135,36 @@ export function CarImageGallery({ car, onClose }: CarImageGalleryProps) {
             <div style={{ fontSize: 48, marginBottom: 12 }}>📸</div>
             <p style={{ fontSize: 15, color: "var(--color-text-muted)", fontWeight: 600 }}>لا توجد صور بعد</p>
             <p style={{ fontSize: 13, color: "var(--color-text-hint)", marginTop: 4 }}>
-              اضغط على "رفع صور" لإضافة أولى الصور لهذه المركبة.
+              اضغط على &quot;رفع صور&quot; لإضافة أولى الصور لهذه المركبة.
             </p>
           </div>
         ) : (
-          <div style={{
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: "1rem" }}>
-            display: "grid",
-            gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
-            gap: "1rem",
-          }}>
             {images.map(img => {
               const stageInfo = STAGE_MAP[img.stage ?? "GENERAL"] ?? STAGE_MAP.GENERAL;
               const isDeleting = deleting === img.id;
               return (
-                <div
+                <div key={img.id} style={{
-                  key={img.id}
+                  borderRadius: "var(--radius-xl)",
-                  style={{
+                  border: "1px solid var(--color-border)",
-                    borderRadius: "var(--radius-xl)",
+                  background: "var(--color-surface)",
-                    border: "1px solid var(--color-border)",
+                  overflow: "hidden",
-                    background: "var(--color-surface)",
+                  boxShadow: "var(--shadow-card)",
-                    overflow: "hidden",
+                  opacity: isDeleting ? 0.5 : 1,
-                    boxShadow: "var(--shadow-card)",
+                  transition: "opacity 200ms",
-                    opacity: isDeleting ? 0.5 : 1,
+                }}>
-                    transition: "opacity 200ms",
+                  <div style={{ position: "relative", paddingBottom: "70%", cursor: "pointer" }} onClick={() => setLightbox(img)}>
-                  }}
-                >
-                  {/* Image */}
-                  <div
-                    style={{ position: "relative", paddingBottom: "70%", cursor: "pointer" }}
-                    onClick={() => setLightbox(img)}
-                  >
                     {/* eslint-disable-next-line @next/next/no-img-element */}
                     <img
                       src={imgSrc(img)}
                       alt={`صورة ${stageInfo.label}`}
-                      style={{
+                      style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}
-                        position: "absolute", inset: 0,
-                        width: "100%", height: "100%",
-                        objectFit: "cover",
-                      }}
                       onError={e => { (e.target as HTMLImageElement).src = "/file.svg"; }}
                     />
-                    {/* Stage badge */}
                     <span style={{
                       position: "absolute", top: 8, right: 8,
                       borderRadius: "var(--radius-full)",
-                      background: stageInfo.bg,
+                      background: stageInfo.bg, color: stageInfo.color,
-                      color: stageInfo.color,
                       padding: "0.2rem 0.625rem",
                       fontSize: 10, fontWeight: 700,
                       boxShadow: "0 1px 4px rgba(0,0,0,.12)",
@@ -283,30 +173,12 @@ export function CarImageGallery({ car, onClose }: CarImageGalleryProps) {
                     </span>
                   </div>
 
-                  {/* Footer */}
+                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0.6rem 0.75rem", borderTop: "1px solid var(--color-border)" }}>
-                  <div style={{
-                    display: "flex", alignItems: "center", justifyContent: "space-between",
-                    padding: "0.6rem 0.75rem",
-                    borderTop: "1px solid var(--color-border)",
-                  }}>
                     <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
                       {new Date(img.createdAt).toLocaleDateString("ar-SA", { month: "short", day: "numeric" })}
                     </span>
-                    <button
+                    <button type="button" onClick={() => handleDelete(img.id)} disabled={isDeleting} aria-label="حذف الصورة"
-                      type="button"
+                      style={{ width: 28, height: 28, borderRadius: "var(--radius-sm)", border: "1px solid #FECACA", background: "#FEF2F2", color: "#DC2626", cursor: isDeleting ? "not-allowed" : "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}>
-                      onClick={() => handleDelete(img.id)}
-                      disabled={isDeleting}
-                      aria-label="حذف الصورة"
-                      style={{
-                        width: 28, height: 28,
-                        borderRadius: "var(--radius-sm)",
-                        border: "1px solid #FECACA",
-                        background: "#FEF2F2",
-                        color: "#DC2626",
-                        cursor: isDeleting ? "not-allowed" : "pointer",
-                        display: "flex", alignItems: "center", justifyContent: "center",
-                      }}
-                    >
                       {isDeleting
                         ? <Spinner size="sm" className="text-red-600" />
                         : <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
@@ -325,15 +197,7 @@ export function CarImageGallery({ car, onClose }: CarImageGalleryProps) {
 
       {/* ── Lightbox ── */}
       {lightbox && (
-        <div
+        <div onClick={() => setLightbox(null)} style={{ position: "fixed", inset: 0, zIndex: 80, background: "rgba(0,0,0,0.9)", display: "flex", alignItems: "center", justifyContent: "center", padding: "1rem" }}>
-          onClick={() => setLightbox(null)}
-          style={{
-            position: "fixed", inset: 0, zIndex: 80,
-            background: "rgba(0,0,0,0.9)",
-            display: "flex", alignItems: "center", justifyContent: "center",
-            padding: "1rem",
-          }}
-        >
           {/* eslint-disable-next-line @next/next/no-img-element */}
           <img
             src={imgSrc(lightbox)}
@@ -342,16 +206,7 @@ export function CarImageGallery({ car, onClose }: CarImageGalleryProps) {
             onClick={e => e.stopPropagation()}
             onError={e => { (e.target as HTMLImageElement).src = "/file.svg"; }}
           />
-          <button
+          <button onClick={() => setLightbox(null)} style={{ position: "absolute", top: 24, right: 24, width: 40, height: 40, borderRadius: "50%", background: "rgba(255,255,255,0.15)", border: "none", color: "#fff", fontSize: 20, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}>
-            onClick={() => setLightbox(null)}
-            style={{
-              position: "absolute", top: 24, right: 24,
-              width: 40, height: 40, borderRadius: "50%",
-              background: "rgba(255,255,255,0.15)", border: "none",
-              color: "#fff", fontSize: 20, cursor: "pointer",
-              display: "flex", alignItems: "center", justifyContent: "center",
-            }}
-          >
             ×
           </button>
         </div>

app/NewOrder/page.tsx

@@ -1,95 +0,0 @@
-"use client";
-import { useState, useEffect, useCallback } from "react";
-import { loadSession, type ClientSession }  from "@/lib/session";
-import RegisterStep   from "../..//Components/Client/client";
-import DashboardStep  from "../../Components/Order/order";
-import AddressStep    from "../../Components/Client_Adress/clientAdress";
-import Logo           from "../../utils/logo";
-import { Spinner }    from "../../Components/UI";
-
-type Step = "bootstrap" | "register" | "address" | "dashboard";
-
-function Navbar({ session }: { session: ClientSession | null }) {
-  return (
-    <nav
-      aria-label="Client portal navigation"
-      className="bg-white border-b border-[#E5E7EB] flex items-center justify-between px-5 h-14 sticky top-0 z-30"
-    >
-      <div className="flex items-center gap-2">
-        {session?.name && (
-          <span className="text-[12px] text-[#6B7280] hidden sm:block">{session.name}</span>
-        )}
-        <div aria-hidden="true" className="w-8 h-8 rounded-full bg-[#EBF3FF] flex items-center justify-center">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1A73E8" strokeWidth="2">
-            <circle cx="12" cy="8" r="4"/>
-            <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
-          </svg>
-        </div>
-      </div>
-      <Logo />
-    </nav>
-  );
-}
-
-export default function ClientOrderPage() {
-  const [step,    setStep]    = useState<Step>("bootstrap");
-  const [session, setSession] = useState<ClientSession | null>(null);
-
-  useEffect(() => {
-    const saved = loadSession();
-    if (saved?.id && saved.name) {
-      setSession(saved);
-      setStep("dashboard");
-    } else {
-      setStep("register");
-    }
-  }, []);
-
-  const handleRegistered = useCallback((s: ClientSession) => {
-    setSession(s);
-    setStep("address");
-  }, []);
-
-  const handleAddressComplete = useCallback(() => {
-    setStep("dashboard");
-  }, []);
-
-  return (
-    <div
-      className="min-h-screen bg-[#ECEEF2]"
-      dir="rtl"
-      lang="ar"
-      style={{ fontFamily: "var(--font-sans)" }}
-    >
-      <Navbar session={session} />
-
-      <div className="max-w-lg mx-auto px-4 py-8">
-        <div className="bg-white border border-[#E5E7EB] rounded-2xl p-6 shadow-sm">
-
-          {step === "bootstrap" && (
-            <div className="flex flex-col items-center justify-center py-10 gap-3" role="status">
-              <Spinner size="lg" />
-              <p className="text-[13px] text-[#6B7280]">جارٍ تحميل بيانات الجلسة…</p>
-            </div>
-          )}
-
-          {step === "register" && (
-            <RegisterStep onSuccess={handleRegistered} />
-          )}
-
-          {step === "address" && session && (
-            <AddressStep session={session} onSuccess={handleAddressComplete} />
-          )}
-
-          {step === "dashboard" && session && (
-            <DashboardStep session={session} />
-          )}
-        </div>
-
-        <p className="text-center text-[11px] text-[#9CA3AF] mt-4">
-          LogiFlow · آمن ومشفر · المملكة العربية السعودية 🇸🇦
-        </p>
-      </div>
-    </div>
-  );
-}

app/components/layout/Navbar.tsx

@@ -34,9 +34,7 @@ export default function Navbar() {
         </div>
 
         <div className="mr-auto flex items-center gap-2">
-          <Link href="/NewOrder" className="flex h-[34px] items-center rounded-lg border border-slate-200 bg-white px-3 text-[13px] font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50">
+          
-            إنشاء  طلب جديد
-          </Link>
           <Link href="/login" className="flex h-[34px] items-center rounded-lg bg-blue-600 px-3 text-[13px] font-bold text-white shadow-sm transition hover:bg-blue-700">
             تسجيل الدخول ←
           </Link>

app/components/layout/Sidebar.tsx

@@ -10,25 +10,26 @@ const navSections = [
     label: "الرئيسية",
     items: [
       { href: "/dashboard", label: "Dashboard",   icon: "ti-layout-dashboard", permission: "read-dashboard" },
-      { href: "/users",     label: "Users",        icon: "ti-users",            permission: "read-user"      },
+      { href: "/dashboard/users",     label: "Users",        icon: "ti-users",            permission: "read-user"      },
     ],
   },
   {
     label: "الأسطول",
     items: [
-      { href: "/cars",    label: "Cars",    icon: "ti-car",           permission: "read-car"    },
+      { href: "/dashboard/cars",    label: "Cars",    icon: "ti-car",           permission: "read-car"    },
-      { href: "/drivers", label: "Drivers", icon: "ti-steering-wheel",permission: "read-driver" },
+      { href: "/dashboard/drivers", label: "Drivers", icon: "ti-steering-wheel",permission: "read-driver" },
-      { href: "/trips",   label: "Trips",   icon: "ti-route",         permission: "read-trip"   },
+      { href: "/dashboard/trips",   label: "Trips",   icon: "ti-route",         permission: "read-trip"   },
     ],
   },
   {
     label: "العمليات",
     items: [
-      { href: "/orders",   label: "Orders",   icon: "ti-package",     permission: "read-order"  },
+      { href: "/dashboard/orders",   label: "Orders",   icon: "ti-package",     permission: "read-order"  },
-      { href: "/clients",  label: "Clients",  icon: "ti-users-group", permission: "read-client" },
+      { href: "/dashboard/clients",  label: "Clients",  icon: "ti-users-group", permission: "read-client" },
-      { href: "/branches", label: "Branches", icon: "ti-building",    permission: "read-branch" },
+      { href: "/dashboard/branches", label: "Branches", icon: "ti-building",    permission: "read-branch" },
-      { href: "/roles",    label: "Roles",    icon: "ti-shield",      permission: "read-role"   },
+      { href: "/dashboard/roles",    label: "Roles",    icon: "ti-shield",      permission: "read-role"   },
-      { href: "/audit",    label: "Audit",    icon: "ti-clipboard-list", permission: "read-audit" },
+      { href: "/dashboard/role_permission",    label: "Roles & Permission",    icon: "ti-shield",      permission: "manage-role-permissions"   },
+      { href: "/dashboard/audit",    label: "Audit",    icon: "ti-clipboard-list", permission: "read-audit" },
     ],
   },
 ];

app/dashboard/cars/page.tsx

@@ -1,68 +1,25 @@
 "use client";
+// app/(dashboard)/cars/page.tsx
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
-import { getStoredToken } from "../../lib/auth";
+import { Spinner, Alert } from "@/Components/UI";
-import { carService } from "../../services/car.service";
+import { CarFormModal }   from "@/Components/car/CarFormModal";
-import { get } from "../../services/api";
+import { CarDetailPanel } from "@/Components/car/CarDetailPanel";
-import { Spinner, Alert } from "../../Components/UI";
+import { CarDeleteModal } from "@/Components/car/CarDeleteModal";
-import { CarFormModal }   from "../../Components/car/CarFormModal";
+import { useCars, useCarMutations, useToast } from "@/hooks/useCars";
-import { CarDetailPanel } from "../../Components/car/CarDetailPanel";
+import { fmtDateShort, isExpiringSoon, STATUS_MAP, INS_MAP } from "@/types/car";
-import { CarDeleteModal } from "../../Components/car/CarDeleteModal";
+import type { Car, CreateCarPayload, ToastMsg, UpdateCarPayload } from "@/types/car";
-import type { Car, CreateCarPayload, UpdateCarPayload } from "../../types/car";
 
-// ── API response shape ────────────────────────────────────────────────────────
+// ── Toast ─────────────────────────────────────────────────────────────────────
-interface ApiResponse {
-  data: {
-    data: Car[];
-    pagination: { total: number; page: number; pages: number };
-    meta?: { total: number; pages: number };
-  };
-}
-
-// ── Status badge config ───────────────────────────────────────────────────────
-const STATUS_MAP: Record<
-  Car["currentStatus"],
-  { label: string; color: string; bg: string; border: string; dot: string }
-> = {
-  Active:        { label: "نشط",      color: "#166534", bg: "#DCFCE7", border: "#BBF7D0", dot: "#16A34A" },
-  InMaintenance: { label: "صيانة",    color: "#854D0E", bg: "#FFFBEB", border: "#FDE68A", dot: "#D97706" },
-  InTrip:        { label: "في رحلة",  color: "#1E40AF", bg: "#EFF6FF", border: "#BFDBFE", dot: "#3B82F6" },
-  Inactive:      { label: "غير نشط", color: "#64748B", bg: "#F1F5F9", border: "#E2E8F0", dot: "#94A3B8" },
-};
-
-const INS_MAP: Record<string, { label: string; color: string }> = {
-  Valid:       { label: "سارٍ",        color: "#16A34A" },
-  Expired:     { label: "منتهي",       color: "#DC2626" },
-  NotInsured:  { label: "غير مؤمَّن", color: "#D97706" },
-};
-
-function fmtDate(iso?: string) {
-  if (!iso) return "—";
-  return new Date(iso).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" });
-}
-
-function isExpiringSoon(iso?: string) {
-  if (!iso) return false;
-  return (new Date(iso).getTime() - Date.now()) / 86_400_000 <= 90;
-}
-
-// ── Toast (inline — mirrors Components/User/Toast pattern) ───────────────────
-interface ToastMsg { type: "success" | "error"; message: string }
 
 function CarToast({ notification }: { notification: ToastMsg | null }) {
-  const [vis, setVis] = useState(false);
+  if (!notification) return null;
-  useEffect(() => {
+  const ok = notification.type === "success";
-    if (notification) setVis(true);
-    else { const t = setTimeout(() => setVis(false), 300); return () => clearTimeout(t); }
-  }, [notification]);
-  if (!vis && !notification) return null;
-  const ok = notification?.type === "success";
   return (
     <div role="status" aria-live="polite" style={{
       position: "fixed", bottom: 24, left: "50%",
-      transform: `translateX(-50%) translateY(${notification ? "0" : "16px"})`,
+      transform: "translateX(-50%)",
-      zIndex: 9999, transition: "transform 250ms ease, opacity 250ms ease",
+      zIndex: 9999, pointerEvents: "none",
-      opacity: notification ? 1 : 0, pointerEvents: "none",
     }}>
       <div style={{
         display: "flex", alignItems: "center", gap: 10,
@@ -75,17 +32,18 @@ function CarToast({ notification }: { notification: ToastMsg | null }) {
         fontFamily: "var(--font-sans)",
       }}>
         <span style={{ fontSize: 16 }}>{ok ? "✓" : "⚠"}</span>
-        <span>{notification?.message}</span>
+        <span>{notification.message}</span>
       </div>
     </div>
   );
 }
 
-// ── Vehicle Card component ────────────────────────────────────────────────────
+// ── CarCard ───────────────────────────────────────────────────────────────────
+
 function CarCard({ car, onClick }: { car: Car; onClick: () => void }) {
   const status = STATUS_MAP[car.currentStatus];
   const ins    = car.insuranceStatus ? INS_MAP[car.insuranceStatus] : null;
-  const regWarn = isExpiringSoon(car.registrationExpiryDate as string | undefined);
+  const regWarn = isExpiringSoon(car.registrationExpiryDate);
 
   return (
     <article
@@ -145,7 +103,7 @@ function CarCard({ car, onClick }: { car: Car; onClick: () => void }) {
           </span>
         </div>
 
-        {/* Plate number — prominent */}
+        {/* Plate number */}
         <div style={{
           marginTop: "0.875rem",
           background: "var(--color-surface-muted)",
@@ -166,34 +124,24 @@ function CarCard({ car, onClick }: { car: Car; onClick: () => void }) {
 
         {/* Key attributes grid */}
         <div style={{ marginTop: "0.875rem", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.5rem" }}>
-          {/* Branch */}
           <div style={{ fontSize: 11 }}>
             <span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>الفرع</span>
             <span style={{ color: "var(--color-text-primary)", marginTop: 2, display: "block" }}>
               {car.branch?.name ?? "—"}
             </span>
           </div>
-          {/* Insurance */}
           <div style={{ fontSize: 11 }}>
             <span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>التأمين</span>
-            <span style={{
+            <span style={{ color: ins?.color ?? "var(--color-text-muted)", marginTop: 2, display: "block", fontWeight: 600 }}>
-              color: ins?.color ?? "var(--color-text-muted)",
-              marginTop: 2, display: "block", fontWeight: 600,
-            }}>
               {ins?.label ?? "—"}
             </span>
           </div>
-          {/* Registration expiry */}
           <div style={{ fontSize: 11 }}>
             <span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>انتهاء الاستمارة</span>
-            <span style={{
+            <span style={{ color: regWarn ? "#D97706" : "var(--color-text-secondary)", marginTop: 2, display: "block", fontWeight: regWarn ? 600 : 400 }}>
-              color: regWarn ? "#D97706" : "var(--color-text-secondary)",
+              {regWarn && "⚠ "}{fmtDateShort(car.registrationExpiryDate)}
-              marginTop: 2, display: "block", fontWeight: regWarn ? 600 : 400,
-            }}>
-              {regWarn && "⚠ "}{fmtDate(car.registrationExpiryDate as string | undefined)}
             </span>
           </div>
-          {/* Capacity */}
           <div style={{ fontSize: 11 }}>
             <span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>الطاقة</span>
             <span style={{ color: "var(--color-text-secondary)", marginTop: 2, display: "block" }}>
@@ -203,11 +151,7 @@ function CarCard({ car, onClick }: { car: Car; onClick: () => void }) {
         </div>
 
         {/* Footer CTA hint */}
-        <p style={{
+        <p style={{ marginTop: "0.875rem", fontSize: 11, color: "var(--color-brand-600)", fontWeight: 600, textAlign: "left" }}>
-          marginTop: "0.875rem",
-          fontSize: 11, color: "var(--color-brand-600)",
-          fontWeight: 600, textAlign: "left",
-        }}>
           اضغط لعرض التفاصيل ←
         </p>
       </div>
@@ -216,96 +160,43 @@ function CarCard({ car, onClick }: { car: Car; onClick: () => void }) {
 }
 
 // ── Page ──────────────────────────────────────────────────────────────────────
+
 export default function CarsPage() {
-  // List state
-  const [cars,    setCars]    = useState<Car[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error,   setError]   = useState<string | null>(null);
   const [search,  setSearch]  = useState("");
   const [page,    setPage]    = useState(1);
-  const [total,   setTotal]   = useState(0);
-  const [pages,   setPages]   = useState(1);
 
   // Modal state
-  const [detailId,     setDetailId]     = useState<string | null>(null);   // CarDetailPanel
+  const [detailId,     setDetailId]     = useState<string | null>(null);
-  const [formTarget,   setFormTarget]   = useState<Car | null | false>(false); // false=closed
+  const [formTarget,   setFormTarget]   = useState<Car | null | false>(false); // false = closed
   const [deleteTarget, setDeleteTarget] = useState<Car | null>(null);
-  const [deleting,     setDeleting]     = useState(false);
 
-  // Toast
+  const { toast, notify } = useToast();
-  const [toast, setToast] = useState<{ type: "success" | "error"; message: string } | null>(null);
-  const notify = useCallback((t: typeof toast) => {
-    setToast(t);
-    setTimeout(() => setToast(null), 3500);
-  }, []);
 
-  // ── Fetch list ─────────────────────────────────────────────────────────────
+  const { cars, loading, error, total, pages, loadCars, removeCar, setError } =
-  const loadCars = useCallback(() => {
+    useCars(page, search);
-    const token = getStoredToken();
-    setLoading(true);
-    setError(null);
-    const query = `?page=${page}&limit=12${search ? `&search=${encodeURIComponent(search)}` : ""}`;
-    get<ApiResponse>(`cars${query}`, token)
-      .then((res) => {
-        const payload = (res as unknown as { data: ApiResponse["data"] }).data ?? res;
-        setCars((payload as ApiResponse["data"]).data ?? []);
-        setTotal((payload as ApiResponse["data"]).meta?.total ?? 0);
-        setPages((payload as ApiResponse["data"]).meta?.pages ?? 1);
-      })
-      .catch((err: Error) => setError(err.message))
-      .finally(() => setLoading(false));
-  }, [page, search]);
 
-  useEffect(() => { loadCars(); }, [loadCars]);
+  // Need a stable ref to the current edit target for the mutation hook
+  const getEditTarget = useCallback(() =>
+    formTarget instanceof Object && formTarget !== null ? formTarget as Car : null,
+  [formTarget]);
 
-  // ── Create / Update ────────────────────────────────────────────────────────
+  const { deleting, handleFormSubmit, handleDeleteConfirm } = useCarMutations({
-  const handleFormSubmit = async (
+    onSuccess: (msg) => { notify({ type: "success", message: msg }); loadCars(); },
-    payload: CreateCarPayload | UpdateCarPayload,
+    onError:   (msg) =>   notify({ type: "error",   message: msg }),
-    isNew: boolean,
+    onDeleted: (id) => { removeCar(id); setDeleteTarget(null); },
-  ): Promise<boolean> => {
+    getEditTarget,
-    const token = getStoredToken();
+  });
-    try {
-      if (isNew) {
-        await carService.create(payload as CreateCarPayload, token);
-        notify({ type: "success", message: "تم إضافة المركبة بنجاح." });
-      } else {
-        await carService.update((formTarget as Car).id, payload as UpdateCarPayload, token);
-        notify({ type: "success", message: "تم تحديث بيانات المركبة." });
-      }
-      loadCars();
-      return true;
-    } catch (err: unknown) {
-      notify({ type: "error", message: err instanceof Error ? err.message : "فشلت العملية." });
-      return false;
-    }
-  };
 
-  // ── Delete ─────────────────────────────────────────────────────────────────
+  const handleDelete = async () => {
-  const handleDeleteConfirm = async () => {
     if (!deleteTarget) return;
-    setDeleting(true);
+    await handleDeleteConfirm(deleteTarget);
-    const token = getStoredToken();
-    try {
-      await carService.delete(deleteTarget.id, token);
-      // Optimistic removal — no page refresh needed
-      setCars(prev => prev.filter(c => c.id !== deleteTarget.id));
-      setTotal(prev => Math.max(0, prev - 1));
-      setDeleteTarget(null);
-      notify({ type: "success", message: `تم حذف ${deleteTarget.manufacturer} ${deleteTarget.model} بنجاح.` });
-    } catch (err: unknown) {
-      notify({ type: "error", message: err instanceof Error ? err.message : "فشل الحذف." });
-    } finally {
-      setDeleting(false);
-    }
   };
 
-  // ── Render ─────────────────────────────────────────────────────────────────
+  // ── Render ──────────────────────────────────────────────────────────────────
   return (
     <>
-      {/* Toast notification */}
       <CarToast notification={toast} />
 
-      {/* Detail panel (slide-in) */}
       {detailId && (
         <CarDetailPanel
           carId={detailId}
@@ -315,23 +206,23 @@ export default function CarsPage() {
         />
       )}
 
-      {/* Create / Edit modal */}
       {formTarget !== false && (
         <CarFormModal
           editCar={formTarget}
-          branches={[]}       // loaded inside modal via its own effect in production
+          branches={[]}
           onClose={() => setFormTarget(false)}
-          onSubmit={handleFormSubmit}
+          onSubmit={(payload: CreateCarPayload | UpdateCarPayload, isNew: boolean) =>
+            handleFormSubmit(payload, isNew).then((ok) => { if (ok) setFormTarget(false); return ok; })
+          }
         />
       )}
 
-      {/* Delete confirmation */}
       {deleteTarget && (
         <CarDeleteModal
           car={deleteTarget}
           deleting={deleting}
           onCancel={() => setDeleteTarget(null)}
-          onConfirm={handleDeleteConfirm}
+          onConfirm={handleDelete}
         />
       )}
 
@@ -418,7 +309,6 @@ export default function CarsPage() {
             <span style={{ fontSize: 14 }}>جارٍ تحميل المركبات…</span>
           </div>
         ) : cars.length === 0 ? (
-          /* Empty state */
           <div style={{
             borderRadius: "var(--radius-xl)",
             border: "2px dashed var(--color-border)",
@@ -431,7 +321,7 @@ export default function CarsPage() {
               {search ? `لا توجد مركبات تطابق "${search}"` : "لا توجد مركبات بعد"}
             </p>
             <p style={{ fontSize: 13, color: "var(--color-text-muted)", marginTop: 6 }}>
-              اضغط على "إضافة مركبة" لإضافة أول مركبة في الأسطول.
+              اضغط على &quot;إضافة مركبة&quot; لإضافة أول مركبة في الأسطول.
             </p>
             {!search && (
               <button

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

@@ -2,16 +2,16 @@
 
 import { useEffect, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
-import { Alert }              from "../../../../Components/UI";
+import { Alert }              from "@/Components/UI";
-import { Toast }              from "../../../../Components/Client/Toast";
+import { Toast }              from "@/Components/Client/Toast";
-import { useClientAddresses } from "../../../../hooks/useClientAddresses";
+import { useClientAddresses } from "@/hooks/useClientAddresses";
-import { clientService }      from "../../../../services/client.service";
+import { clientService }      from "@/services/client.service";
-import { getStoredToken }     from "../../../../lib/auth";
+import { getStoredToken }     from "@/lib/auth";
 import type {
   Client,
   ClientAddress,
   ClientAddressFormData,
-} from "../../../../types/client";
+} from "@/types/client";
 import { AddressFormModal } from "@/Components/Client/Addressformmodal";
 import { DeleteConfirmModal } from "@/Components/Client/Deleteconfirmmodal";
 

app/dashboard/clients/page.tsx

@@ -2,10 +2,10 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { Alert }               from "../../Components/UI";
+import { Alert }               from "@/Components/UI";
-import { Toast }               from "../../Components/Client/Toast";
+import { Toast }               from "@/Components/Client/Toast";
-import { useClients }          from "../../hooks/useClients";
+import { useClients }          from "@/hooks/useClients";
-import type { Client, ClientFormData } from "../../types/client";
+import type { Client, ClientFormData } from "@/types/client";
 import { ClientFormModal } from "@/Components/Client/Clientformmodal";
 import { ClientTable } from "@/Components/Client/Clienttable";
 import { DeleteConfirmModal } from "@/Components/Client/Deleteconfirmmodal";
@@ -48,7 +48,7 @@ export default function ClientsPage() {
 
   // ── Navigate to address management ──────────────────────────────────────
   const handleManageAddresses = (client: Client) => {
-    router.push(`/clients/${client.id}/addresses`);
+    router.push(`/dashboard/clients/${client.id}/addresses`);
   };
 
   // ── Render ───────────────────────────────────────────────────────────────

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

@@ -0,0 +1,624 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { Spinner } from "@/Components/UI";
+import { DriverFormModal } from "@/Components/Driver/DriverFormModal";
+import { DriverDeleteModal } from "@/Components/Driver/DriverDeleteModal";
+import { DriverReportPanel } from "@/Components/Driver_Report/driverReport";
+import { driverService } from "@/services";
+import { getStoredToken } from "@/lib/auth";
+import type {
+  Driver,
+  CreateDriverPayload,
+  UpdateDriverPayload,
+} from "@/types/driver";
+import {
+  DRIVER_STATUS_MAP,
+  DRIVER_CARD_TYPE_MAP,
+  NATIONAL_ID_TYPE_MAP,
+} from "@/types/driver";
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function fmtDate(iso?: string | null): string {
+  if (!iso) return "—";
+  return new Date(iso).toLocaleDateString("ar-SA", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+}
+
+function isExpiringSoon(iso?: string | null): boolean {
+  if (!iso) return false;
+  return (new Date(iso).getTime() - Date.now()) <= 90 * 86_400_000;
+}
+
+// ── Sub-components ────────────────────────────────────────────────────────────
+
+function SectionCard({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      style={{
+        borderRadius: "var(--radius-xl)",
+        border: "1px solid var(--color-border)",
+        background: "var(--color-surface)",
+        overflow: "hidden",
+        boxShadow: "var(--shadow-card)",
+      }}
+    >
+      <div
+        style={{
+          padding: "0.875rem 1.5rem",
+          borderBottom: "1px solid var(--color-border)",
+          background: "var(--color-surface-muted)",
+        }}
+      >
+        <p
+          style={{
+            fontSize: 11,
+            letterSpacing: "0.25em",
+            textTransform: "uppercase",
+            color: "var(--color-text-hint)",
+            fontWeight: 700,
+            margin: 0,
+          }}
+        >
+          {title}
+        </p>
+      </div>
+      <div style={{ padding: "1rem 1.5rem" }}>{children}</div>
+    </div>
+  );
+}
+
+function DetailRow({
+  label,
+  value,
+  mono = false,
+  warn = false,
+}: {
+  label: string;
+  value: string;
+  mono?: boolean;
+  warn?: boolean;
+}) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "baseline",
+        padding: "0.55rem 0",
+        borderBottom: "1px solid var(--color-border)",
+      }}
+    >
+      <span style={{ fontSize: 12, color: "var(--color-text-muted)", fontWeight: 600 }}>
+        {label}
+      </span>
+      <span
+        style={{
+          fontSize: 13,
+          fontFamily: mono ? "var(--font-mono)" : "var(--font-sans)",
+          color: warn ? "#D97706" : "var(--color-text-primary)",
+          fontWeight: warn ? 600 : 400,
+          maxWidth: "60%",
+          textAlign: "left",
+          wordBreak: "break-word",
+        }}
+      >
+        {warn && value !== "—" ? "⚠ " : ""}
+        {value}
+      </span>
+    </div>
+  );
+}
+
+function PhotoCard({ url, label }: { url?: string | null; label: string }) {
+  const [imgError, setImgError] = useState(false);
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+      <span style={{ fontSize: 12, fontWeight: 600, color: "var(--color-text-muted)" }}>
+        {label}
+      </span>
+      <div
+        style={{
+          width: "100%",
+          aspectRatio: "4/3",
+          borderRadius: "var(--radius-md)",
+          border: "1px solid var(--color-border)",
+          background: "var(--color-surface-muted)",
+          overflow: "hidden",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        {url && !imgError ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={url}
+            alt={label}
+            style={{ width: "100%", height: "100%", objectFit: "cover" }}
+            onError={() => setImgError(true)}
+          />
+        ) : (
+          <svg
+            width="32"
+            height="32"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="var(--color-text-hint)"
+            strokeWidth="1.5"
+          >
+            <rect x="3" y="3" width="18" height="18" rx="2" />
+            <circle cx="8.5" cy="8.5" r="1.5" />
+            <polyline points="21 15 16 10 5 21" />
+          </svg>
+        )}
+      </div>
+      {url && !imgError && (
+        <a
+          href={url}
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{ fontSize: 11, color: "#2563EB", textDecoration: "underline", textAlign: "center" }}
+        >
+          عرض الصورة ↗
+        </a>
+      )}
+    </div>
+  );
+}
+
+// ── Page ──────────────────────────────────────────────────────────────────────
+
+export default function DriverDetailPage() {
+  const params  = useParams();
+  const router  = useRouter();
+  const driverId = params?.driverId as string;
+
+  const [driver, setDriver]         = useState<Driver | null>(null);
+  const [loading, setLoading]       = useState(true);
+  const [error, setError]           = useState<string | null>(null);
+  const [avatarError, setAvatarError] = useState(false);
+
+  // ── Modal state ───────────────────────────────────────────────────────────
+  const [editOpen, setEditOpen]     = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [deleting, setDeleting]     = useState(false);
+
+  // ── Load driver ───────────────────────────────────────────────────────────
+  const loadDriver = useCallback(async () => {
+    if (!driverId) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const token = getStoredToken();
+      const res = await driverService.getById(driverId, token);
+      setDriver((res as unknown as { data: Driver }).data);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "تعذّر تحميل بيانات السائق.");
+    } finally {
+      setLoading(false);
+    }
+  }, [driverId]);
+
+  useEffect(() => {
+    loadDriver();
+  }, [loadDriver]);
+
+  // ── Edit submit ───────────────────────────────────────────────────────────
+  const handleEditSubmit = useCallback(
+    async (
+      payload: CreateDriverPayload | UpdateDriverPayload,
+      _isNew: boolean,
+    ): Promise<boolean> => {
+      if (!driver) return false;
+      try {
+        const token = getStoredToken();
+        await driverService.update(driver.id, payload as UpdateDriverPayload, token);
+        await loadDriver();
+        return true;
+      } catch {
+        return false;
+      }
+    },
+    [driver, loadDriver],
+  );
+
+  // ── Delete confirm ────────────────────────────────────────────────────────
+  const handleConfirmDelete = useCallback(async () => {
+    if (!driver) return;
+    setDeleting(true);
+    try {
+      const token = getStoredToken();
+      await driverService.delete(driver.id, token);
+      router.push("/dashboard/drivers");
+    } catch {
+      setDeleting(false);
+    }
+  }, [driver, router]);
+
+  // ── Status config ─────────────────────────────────────────────────────────
+  const statusConfig = driver ? DRIVER_STATUS_MAP[driver.status] : null;
+
+  // ── Render: Loading ───────────────────────────────────────────────────────
+  if (loading) {
+    return (
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 12,
+          padding: "6rem 0",
+          color: "var(--color-text-muted)",
+        }}
+      >
+        <Spinner size="sm" className="text-blue-600" />
+        <span style={{ fontSize: 14 }}>جارٍ التحميل…</span>
+      </div>
+    );
+  }
+
+  // ── Render: Error ─────────────────────────────────────────────────────────
+  if (error || !driver) {
+    return (
+      <div
+        style={{
+          maxWidth: 480,
+          margin: "4rem auto",
+          borderRadius: "var(--radius-xl)",
+          border: "1px solid #FECACA",
+          background: "#FEF2F2",
+          padding: "1.5rem",
+          textAlign: "center",
+        }}
+      >
+        <p style={{ fontSize: 14, color: "#DC2626", fontWeight: 600 }}>
+          ⚠ {error ?? "السائق غير موجود"}
+        </p>
+        <button
+          type="button"
+          onClick={() => router.back()}
+          style={{
+            marginTop: "1rem",
+            height: 38,
+            padding: "0 1.25rem",
+            borderRadius: "var(--radius-md)",
+            border: "1px solid var(--color-border)",
+            background: "var(--color-surface)",
+            fontSize: 13,
+            fontWeight: 600,
+            color: "var(--color-text-secondary)",
+            cursor: "pointer",
+            fontFamily: "var(--font-sans)",
+          }}
+        >
+          ← رجوع
+        </button>
+      </div>
+    );
+  }
+
+  // ── Render: Driver detail ─────────────────────────────────────────────────
+  return (
+    <>
+      <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
+
+        {/* ── Page 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)",
+          }}
+        >
+          {/* Back link */}
+          <button
+            type="button"
+            onClick={() => router.back()}
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 6,
+              fontSize: 12,
+              fontWeight: 600,
+              color: "var(--color-text-muted)",
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              padding: 0,
+              marginBottom: "1rem",
+              fontFamily: "var(--font-sans)",
+            }}
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+              <path d="M19 12H5M12 5l-7 7 7 7" />
+            </svg>
+            العودة إلى قائمة السائقين
+          </button>
+
+          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: "1rem" }}>
+            {/* Avatar + name */}
+            <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
+              <div
+                style={{
+                  width: 72,
+                  height: 72,
+                  borderRadius: "50%",
+                  overflow: "hidden",
+                  flexShrink: 0,
+                  border: "2px solid var(--color-brand-200)",
+                  background: "var(--color-surface-muted)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                {driver.photoUrl && !avatarError ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={driver.photoUrl}
+                    alt={driver.name}
+                    style={{ width: "100%", height: "100%", objectFit: "cover" }}
+                    onError={() => setAvatarError(true)}
+                  />
+                ) : (
+                  <span style={{ fontSize: 28, fontWeight: 700, color: "var(--color-brand-600)" }}>
+                    {driver.name.charAt(0)}
+                  </span>
+                )}
+              </div>
+
+              <div>
+                <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600, margin: 0 }}>
+                  ملف السائق
+                </p>
+                <h1 style={{ fontSize: "1.5rem", fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
+                  {driver.name}
+                </h1>
+                <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 6, flexWrap: "wrap" }}>
+                  {driver.userName && (
+                    <span style={{ fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--color-text-muted)" }}>
+                      @{driver.userName}
+                    </span>
+                  )}
+                  <span style={{ fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--color-text-muted)" }}>
+                    {driver.phone}
+                  </span>
+                  {statusConfig && (
+                    <span
+                      style={{
+                        borderRadius: "var(--radius-full)",
+                        border: `1px solid ${statusConfig.border}`,
+                        background: statusConfig.bg,
+                        padding: "0.2rem 0.625rem",
+                        fontSize: 11,
+                        fontWeight: 700,
+                        color: statusConfig.color,
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: 5,
+                      }}
+                    >
+                      <span style={{ width: 6, height: 6, borderRadius: "50%", background: statusConfig.dot, flexShrink: 0 }} />
+                      {statusConfig.label}
+                    </span>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Actions */}
+            <div style={{ display: "flex", gap: "0.75rem" }}>
+              <button
+                type="button"
+                onClick={() => setDeleteOpen(true)}
+                style={{
+                  height: 40,
+                  padding: "0 1.25rem",
+                  borderRadius: "var(--radius-lg)",
+                  border: "1px solid #FECACA",
+                  background: "#FEF2F2",
+                  fontSize: 13,
+                  fontWeight: 700,
+                  color: "#DC2626",
+                  cursor: "pointer",
+                  fontFamily: "var(--font-sans)",
+                }}
+              >
+                حذف السائق
+              </button>
+              <button
+                type="button"
+                onClick={() => setEditOpen(true)}
+                style={{
+                  height: 40,
+                  padding: "0 1.25rem",
+                  borderRadius: "var(--radius-lg)",
+                  border: "none",
+                  background: "var(--color-brand-600)",
+                  fontSize: 13,
+                  fontWeight: 700,
+                  color: "#FFF",
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  fontFamily: "var(--font-sans)",
+                }}
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                </svg>
+                تعديل السائق
+              </button>
+            </div>
+          </div>
+        </header>
+
+        {/* ── Content grid ── */}
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr",
+            gap: "1.5rem",
+          }}
+        >
+          {/* Personal Info */}
+          <SectionCard title="البيانات الشخصية">
+            <DetailRow label="الاسم الكامل"        value={driver.name} />
+            <DetailRow label="رقم الجوال"           value={driver.phone} mono />
+            <DetailRow label="البريد الإلكتروني"    value={driver.email ?? "—"} />
+            <DetailRow label="العنوان"              value={driver.address ?? "—"} />
+            <DetailRow label="الجنسية"              value={driver.nationality ?? "—"} />
+            <DetailRow label="الفرع"                value={driver.branch?.name ?? "—"} />
+            <DetailRow label="نوع السائق"           value={driver.driverType ?? "—"} />
+          </SectionCard>
+
+          {/* ID & GOSI */}
+          <SectionCard title="الهوية والتأمينات">
+            <DetailRow
+              label="نوع الهوية"
+              value={driver.nationalIdType ? NATIONAL_ID_TYPE_MAP[driver.nationalIdType] : "—"}
+            />
+            <DetailRow label="رقم الهوية" value={driver.nationalId ?? "—"} mono />
+            <DetailRow
+              label="انتهاء الهوية"
+              value={fmtDate(driver.nationalIdExpiry)}
+              warn={isExpiringSoon(driver.nationalIdExpiry)}
+            />
+            <DetailRow label="رقم GOSI" value={driver.gosiNumber ?? "—"} mono />
+          </SectionCard>
+
+          {/* License */}
+          <SectionCard title="بيانات رخصة القيادة">
+            <DetailRow label="رقم الرخصة" value={driver.licenseNumber ?? "—"} mono />
+            <DetailRow label="نوع الرخصة" value={driver.licenseType ?? "—"} />
+            <DetailRow
+              label="انتهاء الرخصة"
+              value={fmtDate(driver.licenseExpiry)}
+              warn={isExpiringSoon(driver.licenseExpiry)}
+            />
+          </SectionCard>
+
+          {/* Driver Card */}
+          <SectionCard title="بطاقة السائق">
+            <DetailRow label="رقم البطاقة" value={driver.driverCardNumber ?? "—"} mono />
+            <DetailRow
+              label="نوع البطاقة"
+              value={driver.driverCardType ? DRIVER_CARD_TYPE_MAP[driver.driverCardType] : "—"}
+            />
+            <DetailRow
+              label="انتهاء البطاقة"
+              value={fmtDate(driver.driverCardExpiry)}
+              warn={isExpiringSoon(driver.driverCardExpiry)}
+            />
+          </SectionCard>
+
+          {/* System Info */}
+          <SectionCard title="معلومات النظام">
+            <DetailRow label="اسم المستخدم"  value={driver.userName ?? "—"} mono />
+            <DetailRow label="تاريخ الإضافة" value={fmtDate(driver.createdAt)} />
+            <DetailRow label="آخر تحديث"     value={fmtDate(driver.updatedAt)} />
+          </SectionCard>
+
+          {/* Status History */}
+          {driver.statusHistory && driver.statusHistory.length > 0 && (
+            <SectionCard title="سجل الحالات">
+              <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+                {driver.statusHistory.map((h) => {
+                  const s = DRIVER_STATUS_MAP[h.status] ?? DRIVER_STATUS_MAP.Active;
+                  return (
+                    <div
+                      key={h.id}
+                      style={{
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                        borderRadius: "var(--radius-md)",
+                        border: `1px solid ${s.border}`,
+                        background: s.bg,
+                        padding: "0.5rem 0.875rem",
+                      }}
+                    >
+                      <div>
+                        <span style={{ fontSize: 12, fontWeight: 600, color: s.color }}>
+                          {s.label}
+                        </span>
+                        {h.reason && (
+                          <span style={{ fontSize: 11, color: "var(--color-text-muted)", marginRight: 8 }}>
+                            — {h.reason}
+                          </span>
+                        )}
+                      </div>
+                      <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
+                        {fmtDate(h.createdAt)}
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            </SectionCard>
+          )}
+        </div>
+
+        {/* ── Photos section (full width) ── */}
+        <SectionCard title="الصور والمستندات">
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "1.25rem" }}>
+            <PhotoCard url={driver.photoUrl}          label="صورة السائق" />
+            <PhotoCard url={driver.nationalPhotoUrl}  label="صورة الهوية" />
+            <PhotoCard url={driver.driverCardPhotoUrl} label="صورة بطاقة السائق" />
+          </div>
+        </SectionCard>
+
+        {/* ── Report section (full width) ── */}
+        <div
+          style={{
+            borderRadius: "var(--radius-xl)",
+            border: "1px solid var(--color-border)",
+            background: "var(--color-surface)",
+            boxShadow: "var(--shadow-card)",
+            padding: "1.5rem",
+          }}
+        >
+          <DriverReportPanel driverId={driver.id} />
+        </div>
+
+      </section>
+
+      {/* ── Edit modal ── */}
+      {editOpen && (
+        <DriverFormModal
+          editDriver={driver}
+          branches={[]}
+          onClose={() => setEditOpen(false)}
+          onSubmit={handleEditSubmit}
+        />
+      )}
+
+      {/* ── Delete modal ── */}
+      {deleteOpen && (
+        <DriverDeleteModal
+          driver={driver}
+          deleting={deleting}
+          onCancel={() => setDeleteOpen(false)}
+          onConfirm={handleConfirmDelete}
+        />
+      )}
+    </>
+  );
+}

app/dashboard/layout.tsx

@@ -7,7 +7,10 @@ export default function DashboardLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="flex min-h-screen" style={{ background: "var(--color-surface-muted)" }}>
+    <div
+      className="flex min-h-screen"
+      style={{ background: "var(--color-surface-muted)" }}
+    >
       <Sidebar />
       <div className="flex min-w-0 flex-1 flex-col">
         <Topbar />

app/dashboard/orders/page.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { getStoredToken } from "../../lib/auth";
+import { getStoredToken } from "@/lib/auth";
-import { get } from "../../services/api";
+import { get } from "@/services/api";
-import { Spinner, Alert } from "../../Components/UI";
+import { Spinner, Alert } from "@/Components/UI";
 
 interface Order {
   id: string;

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

@@ -0,0 +1,498 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { Spinner } from "@/Components/UI";
+import { TripFormModal }   from "@/Components/Trip/Tripformmodal";
+import { TripDeleteModal } from "@/Components/Trip/Tripdeletemodal";
+import { TripReportPanel } from "@/Components/Trip_Report/Tripreportpanel";
+import { tripService } from "@/services/trip.service";
+import { getStoredToken } from "@/lib/auth";
+import type {
+  Trip,
+  CreateTripPayload,
+  UpdateTripPayload,
+} from "@/types/trip";
+import { TRIP_STATUS_MAP } from "@/types/trip";
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function fmtDate(iso?: string | null): string {
+  if (!iso) return "—";
+  return new Date(iso).toLocaleDateString("ar-SA", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+function fmtNumber(n?: number | string | null): string {
+  if (n == null || n === "") return "—";
+  return Number(n).toLocaleString("ar-SA");
+}
+
+// ── Sub-components ────────────────────────────────────────────────────────────
+
+function SectionCard({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div
+      style={{
+        borderRadius: "var(--radius-xl)",
+        border: "1px solid var(--color-border)",
+        background: "var(--color-surface)",
+        overflow: "hidden",
+        boxShadow: "var(--shadow-card)",
+      }}
+    >
+      <div style={{
+        padding: "0.875rem 1.5rem",
+        borderBottom: "1px solid var(--color-border)",
+        background: "var(--color-surface-muted)",
+      }}>
+        <p style={{
+          fontSize: 11,
+          letterSpacing: "0.25em",
+          textTransform: "uppercase",
+          color: "var(--color-text-hint)",
+          fontWeight: 700,
+          margin: 0,
+        }}>
+          {title}
+        </p>
+      </div>
+      <div style={{ padding: "1rem 1.5rem" }}>{children}</div>
+    </div>
+  );
+}
+
+function DetailRow({
+  label,
+  value,
+  mono = false,
+}: {
+  label: string;
+  value: string;
+  mono?: boolean;
+}) {
+  return (
+    <div style={{
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "baseline",
+      padding: "0.55rem 0",
+      borderBottom: "1px solid var(--color-border)",
+    }}>
+      <span style={{ fontSize: 12, color: "var(--color-text-muted)", fontWeight: 600 }}>
+        {label}
+      </span>
+      <span style={{
+        fontSize: 13,
+        fontFamily: mono ? "var(--font-mono)" : "var(--font-sans)",
+        color: "var(--color-text-primary)",
+        maxWidth: "60%",
+        textAlign: "left",
+        wordBreak: "break-word",
+      }}>
+        {value}
+      </span>
+    </div>
+  );
+}
+
+// ── Stat card (للأعداد) ───────────────────────────────────────────────────────
+
+function StatCard({
+  label,
+  value,
+  color = "var(--color-brand-600)",
+  bg    = "var(--color-brand-50, #EFF6FF)",
+}: {
+  label: string;
+  value: string;
+  color?: string;
+  bg?: string;
+}) {
+  return (
+    <div style={{
+      borderRadius: "var(--radius-lg)",
+      border: "1px solid var(--color-border)",
+      background: bg,
+      padding: "1rem 1.25rem",
+      display: "flex",
+      flexDirection: "column",
+      gap: 4,
+    }}>
+      <span style={{ fontSize: 11, fontWeight: 600, color: "var(--color-text-muted)" }}>
+        {label}
+      </span>
+      <span style={{ fontSize: 22, fontWeight: 700, color, fontFamily: "var(--font-mono)" }}>
+        {value}
+      </span>
+    </div>
+  );
+}
+
+// ── Page ──────────────────────────────────────────────────────────────────────
+
+export default function TripDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const tripId = params?.tripId as string;
+
+  const [trip,    setTrip]    = useState<Trip | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error,   setError]   = useState<string | null>(null);
+
+  // ── Modal state ───────────────────────────────────────────────────────────
+  const [editOpen,   setEditOpen]   = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [deleting,   setDeleting]   = useState(false);
+
+  // ── Load trip ─────────────────────────────────────────────────────────────
+  const loadTrip = useCallback(async () => {
+    if (!tripId) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const token = getStoredToken();
+      const res = await tripService.getById(tripId, token);
+      setTrip((res as unknown as { data: Trip }).data);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "تعذّر تحميل بيانات الرحلة.");
+    } finally {
+      setLoading(false);
+    }
+  }, [tripId]);
+
+  useEffect(() => { loadTrip(); }, [loadTrip]);
+
+  // ── Edit submit ───────────────────────────────────────────────────────────
+  const handleEditSubmit = useCallback(
+    async (
+      payload: CreateTripPayload | UpdateTripPayload,
+      _isNew: boolean,
+    ): Promise<boolean> => {
+      if (!trip) return false;
+      try {
+        const token = getStoredToken();
+        await tripService.update(trip.id, payload as UpdateTripPayload, token);
+        await loadTrip();
+        return true;
+      } catch {
+        return false;
+      }
+    },
+    [trip, loadTrip],
+  );
+
+  // ── Delete ────────────────────────────────────────────────────────────────
+  const handleConfirmDelete = useCallback(async () => {
+    if (!trip) return;
+    setDeleting(true);
+    try {
+      const token = getStoredToken();
+      await tripService.delete(trip.id, token);
+      router.back();
+    } catch {
+      setDeleting(false);
+      setDeleteOpen(false);
+    }
+  }, [trip, router]);
+
+  const statusConfig = trip ? TRIP_STATUS_MAP[trip.status] : null;
+
+  // ── Loading ───────────────────────────────────────────────────────────────
+  if (loading) {
+    return (
+      <div style={{ display: "flex", justifyContent: "center", padding: "4rem" }}>
+        <Spinner size="lg" />
+      </div>
+    );
+  }
+
+  // ── Error ─────────────────────────────────────────────────────────────────
+  if (error || !trip) {
+    return (
+      <div style={{ padding: "2rem", textAlign: "center" }}>
+        <p style={{ fontSize: 14, color: "var(--color-danger)", marginBottom: "1rem" }}>
+          {error ?? "الرحلة غير موجودة."}
+        </p>
+        <button
+          type="button"
+          onClick={() => router.back()}
+          style={{
+            height: 38, padding: "0 1.25rem",
+            borderRadius: "var(--radius-md)",
+            border: "1px solid var(--color-border)",
+            background: "var(--color-surface)",
+            fontSize: 13, fontWeight: 600, cursor: "pointer",
+            fontFamily: "var(--font-sans)",
+          }}
+        >
+          ← العودة
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <section style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1.5rem" }}>
+
+        {/* ── Header ── */}
+        <header style={{
+          borderRadius: "var(--radius-xl)",
+          border: "1px solid var(--color-border)",
+          background: "var(--color-surface)",
+          boxShadow: "var(--shadow-card)",
+          padding: "1.5rem",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          flexWrap: "wrap",
+          gap: "1rem",
+        }}>
+          {/* Back + trip info */}
+          <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
+            <button
+              type="button"
+              onClick={() => router.back()}
+              style={{
+                width: 38, height: 38, borderRadius: "var(--radius-md)",
+                border: "1px solid var(--color-border)",
+                background: "var(--color-surface-muted)",
+                display: "flex", alignItems: "center", justifyContent: "center",
+                cursor: "pointer", flexShrink: 0,
+              }}
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                <polyline points="15 18 9 12 15 6" />
+              </svg>
+            </button>
+
+            {/* Trip icon */}
+            <div style={{
+              width: 52, height: 52, borderRadius: "var(--radius-lg)",
+              background: "var(--color-brand-50, #EFF6FF)",
+              border: "1px solid var(--color-brand-200, #BFDBFE)",
+              display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
+            }}>
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#2563EB" strokeWidth="1.8">
+                <rect x="1" y="3" width="15" height="13" rx="2" />
+                <path d="M16 8h4l3 5v4h-7V8z" />
+                <circle cx="5.5" cy="18.5" r="2.5" />
+                <circle cx="18.5" cy="18.5" r="2.5" />
+              </svg>
+            </div>
+
+            <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+              <h1 style={{ fontSize: 18, fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>
+                {trip.title}
+              </h1>
+              <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
+                <span style={{ fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--color-text-muted)" }}>
+                  {trip.tripNumber}
+                </span>
+                {statusConfig && (
+                  <span style={{
+                    borderRadius: "var(--radius-full)",
+                    border: `1px solid ${statusConfig.border}`,
+                    background: statusConfig.bg,
+                    padding: "0.2rem 0.625rem",
+                    fontSize: 11,
+                    fontWeight: 700,
+                    color: statusConfig.color,
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 5,
+                  }}>
+                    <span style={{ width: 6, height: 6, borderRadius: "50%", background: statusConfig.dot, flexShrink: 0 }} />
+                    {statusConfig.label}
+                  </span>
+                )}
+                {trip.isDeleted && (
+                  <span style={{
+                    borderRadius: "var(--radius-full)",
+                    border: "1px solid #FECACA",
+                    background: "#FEF2F2",
+                    padding: "0.2rem 0.625rem",
+                    fontSize: 11, fontWeight: 700, color: "#DC2626",
+                  }}>
+                    محذوفة
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Actions */}
+          <div style={{ display: "flex", gap: "0.75rem" }}>
+            <button
+              type="button"
+              onClick={() => setDeleteOpen(true)}
+              style={{
+                height: 40, padding: "0 1.25rem",
+                borderRadius: "var(--radius-lg)",
+                border: "1px solid #FECACA",
+                background: "#FEF2F2",
+                fontSize: 13, fontWeight: 700, color: "#DC2626",
+                cursor: "pointer", fontFamily: "var(--font-sans)",
+              }}
+            >
+              حذف الرحلة
+            </button>
+            <button
+              type="button"
+              onClick={() => setEditOpen(true)}
+              style={{
+                height: 40, padding: "0 1.25rem",
+                borderRadius: "var(--radius-lg)",
+                border: "none",
+                background: "var(--color-brand-600)",
+                fontSize: 13, fontWeight: 700, color: "#FFF",
+                cursor: "pointer",
+                display: "flex", alignItems: "center", gap: 8,
+                fontFamily: "var(--font-sans)",
+              }}
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+              </svg>
+              تعديل الرحلة
+            </button>
+          </div>
+        </header>
+
+        {/* ── Stats row ── */}
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "1rem" }}>
+          <StatCard
+            label="المجمّع"
+            value={String(trip.collectedCount)}
+            color="#1E40AF"
+            bg="#EFF6FF"
+          />
+          <StatCard
+            label="المُسلَّم"
+            value={String(trip.deliveredCount)}
+            color="#166534"
+            bg="#DCFCE7"
+          />
+          <StatCard
+            label="المُرتجع"
+            value={String(trip.returnedCount)}
+            color="#92400E"
+            bg="#FFFBEB"
+          />
+          <StatCard
+            label="النقد المحصّل"
+            value={fmtNumber(trip.totalCashCollected)}
+            color="#581C87"
+            bg="#FAF5FF"
+          />
+        </div>
+
+        {/* ── Content grid ── */}
+        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1.5rem" }}>
+
+          {/* Basic Info */}
+          <SectionCard title="بيانات الرحلة">
+            <DetailRow label="رقم الرحلة"  value={trip.tripNumber} mono />
+            <DetailRow label="العنوان"      value={trip.title} />
+            <DetailRow label="الحالة"       value={statusConfig?.label ?? trip.status} />
+            <DetailRow label="الفرع"        value={trip.branch?.name ?? "—"} />
+            <DetailRow label="وقت البدء"    value={fmtDate(trip.startTime)} />
+            <DetailRow label="وقت الانتهاء" value={fmtDate(trip.endTime)} />
+            <DetailRow label="سبب الإنهاء"  value={trip.endReason ?? "—"} />
+          </SectionCard>
+
+          {/* Driver */}
+          <SectionCard title="السائق">
+            {trip.driver ? (
+              <>
+                <DetailRow label="الاسم"         value={trip.driver.name} />
+                <DetailRow label="الجوال"         value={trip.driver.phone} mono />
+                <DetailRow label="البريد"         value={trip.driver.email ?? "—"} />
+                <DetailRow label="رقم الرخصة"    value={trip.driver.licenseNumber ?? "—"} mono />
+                <DetailRow label="رقم البطاقة"   value={trip.driver.driverCardNumber ?? "—"} mono />
+                <DetailRow label="الجنسية"        value={trip.driver.nationality ?? "—"} />
+              </>
+            ) : (
+              <p style={{ fontSize: 13, color: "var(--color-text-muted)", margin: 0 }}>لا توجد بيانات للسائق.</p>
+            )}
+          </SectionCard>
+
+          {/* Car */}
+          <SectionCard title="السيارة">
+            {trip.car ? (
+              <>
+                <DetailRow label="الماركة"          value={trip.car.manufacturer} />
+                <DetailRow label="الموديل"           value={trip.car.model} />
+                <DetailRow label="السنة"             value={trip.car.year != null ? String(trip.car.year) : "—"} />
+                <DetailRow label="اللون"             value={trip.car.color ?? "—"} />
+                <DetailRow label="رقم اللوحة"        value={trip.car.plateNumber} mono />
+                <DetailRow label="حروف اللوحة"       value={trip.car.plateLetters ?? "—"} mono />
+                <DetailRow label="نوع اللوحة"        value={trip.car.plateType ?? "—"} />
+                <DetailRow label="رقم التسجيل"       value={trip.car.registrationNumber ?? "—"} mono />
+              </>
+            ) : (
+              <p style={{ fontSize: 13, color: "var(--color-text-muted)", margin: 0 }}>لا توجد بيانات للسيارة.</p>
+            )}
+          </SectionCard>
+
+          {/* System Info */}
+          <SectionCard title="معلومات النظام">
+            <DetailRow label="تاريخ الإضافة" value={fmtDate(trip.createdAt)} />
+            <DetailRow label="آخر تحديث"     value={fmtDate(trip.updatedAt)} />
+            {trip.isDeleted && (
+              <DetailRow label="تاريخ الحذف" value={fmtDate(trip.deletedAt)} />
+            )}
+          </SectionCard>
+
+        </div>
+
+        {/* ── Notes (full width, if any) ── */}
+        {trip.notes && (
+          <SectionCard title="الملاحظات">
+            <p style={{ fontSize: 13, color: "var(--color-text-primary)", lineHeight: 1.7, margin: 0 }}>
+              {trip.notes}
+            </p>
+          </SectionCard>
+        )}
+
+        {/* ── Report section ── */}
+        <div style={{
+          borderRadius: "var(--radius-xl)",
+          border: "1px solid var(--color-border)",
+          background: "var(--color-surface)",
+          boxShadow: "var(--shadow-card)",
+          padding: "1.5rem",
+        }}>
+          <TripReportPanel tripId={trip.id} />
+        </div>
+
+      </section>
+
+      {/* ── Edit modal ── */}
+      {editOpen && (
+        <TripFormModal
+          editTrip={trip}
+          onClose={() => setEditOpen(false)}
+          onSubmit={handleEditSubmit}
+        />
+      )}
+
+      {/* ── Delete modal ── */}
+      {deleteOpen && (
+        <TripDeleteModal
+          trip={trip}
+          deleting={deleting}
+          onCancel={() => setDeleteOpen(false)}
+          onConfirm={handleConfirmDelete}
+        />
+      )}
+    </>
+  );
+}

app/dashboard/users/page.tsx

@@ -1,14 +1,14 @@
 "use client";
 
 import { useState } from "react";
-import { Alert }              from "../../Components/UI";
+import { Alert }              from "@/Components/UI";
-import { UserTable }          from "../../Components/User/UserTable";
+import { UserTable }          from "@/Components/User/UserTable";
-import { UserFormModal }      from "../../Components/User/UserFormModal";
+import { UserFormModal }      from "@/Components/User/UserFormModal";
-import { UserDetailModal }    from "../../Components/User/UserDetailModal";
+import { UserDetailModal }    from "@/Components/User/UserDetailModal";
-import { DeleteConfirmModal } from "../../Components/User/DeleteConfirmModal";
+import { DeleteConfirmModal } from "@/Components/User/DeleteConfirmModal";
-import { Toast }              from "../../Components/User/Toast";
+import { Toast }              from "@/Components/User/Toast";
-import { useUsers }           from "../../hooks/useUser";
+import { useUsers }           from "@/hooks/useUser";
-import type { User, UserFormData } from "../../types/user";
+import type { User, UserFormData } from "@/types/user";
 
 export default function UsersPage() {
   // ── Modal state ─────────────────────────────────────────────────────────────

app/not_found/page.tsx

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

app/page.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import Navbar from "./components/layout/Navbar";
+import Logo from "@/utils/logo";
 
 const stats = [
   { label: "الطلبات النشطة", value: "48", color: "text-blue-600" },
@@ -33,27 +34,57 @@ const roles = [
     tone: "dark",
     tag: "مشرف",
     title: "تحكم كامل",
-    items: ["عرض جميع طلبات العملاء", "تحديث حالات الطلبات", "إدارة العملاء والسائقين", "سجل التدقيق", "تعيين الرحلات"],
+    items: [
+      "عرض جميع طلبات العملاء",
+      "تحديث حالات الطلبات",
+      "إدارة العملاء والسائقين",
+      "سجل التدقيق",
+      "تعيين الرحلات",
+    ],
   },
   {
     tone: "blue",
     tag: "عميل",
     title: "طلباتي",
-    items: ["إضافة طلبات جديدة", "تتبع الشحنات النشطة", "عرض سجل الطلبات", "إدارة العناوين", "التواصل مع الدعم"],
+    items: [
+      "إضافة طلبات جديدة",
+      "تتبع الشحنات النشطة",
+      "عرض سجل الطلبات",
+      "إدارة العناوين",
+      "التواصل مع الدعم",
+    ],
   },
   {
     tone: "green",
     tag: "مستخدم",
     title: "وصول ميداني",
-    items: ["عرض الرحلات المعينة", "تحديث حالة التسليم", "الملف الشخصي", "إعدادات الإشعارات", "تفضيلات التطبيق"],
+    items: [
+      "عرض الرحلات المعينة",
+      "تحديث حالة التسليم",
+      "الملف الشخصي",
+      "إعدادات الإشعارات",
+      "تفضيلات التطبيق",
+    ],
   },
 ];
 
 const faqs = [
-  { q: "كيف أنشئ حساب عميل؟", a: "اضغط على “إنشاء حساب عميل” ثم أكمل بياناتك الأساسية لتفعيل الحساب في دقائق." },
+  {
-  { q: "ماذا يحدث إن أدخلت كلمة مرور خاطئة؟", a: "ستظهر لك رسالة خطأ واضحة مع خيار إعادة المحاولة أو استرجاع كلمة المرور." },
+    q: "كيف أنشئ حساب عميل؟",
-  { q: "هل بياناتي الشخصية محمية؟", a: "نعم، يتم تشفير البيانات باستخدام AES-256-GCM وإجراءات أمان متقدمة." },
+    a: "اضغط على “إنشاء حساب عميل” ثم أكمل بياناتك الأساسية لتفعيل الحساب في دقائق.",
-  { q: "هل يمكن للعميل رؤية طلبات عملاء آخرين؟", a: "لا، كل عميل يرى فقط طلباته الخاصة ضمن لوحة التحكم المخصصة له." },
+  },
+  {
+    q: "ماذا يحدث إن أدخلت كلمة مرور خاطئة؟",
+    a: "ستظهر لك رسالة خطأ واضحة مع خيار إعادة المحاولة أو استرجاع كلمة المرور.",
+  },
+  {
+    q: "هل بياناتي الشخصية محمية؟",
+    a: "نعم، يتم تشفير البيانات باستخدام AES-256-GCM وإجراءات أمان متقدمة.",
+  },
+  {
+    q: "هل يمكن للعميل رؤية طلبات عملاء آخرين؟",
+    a: "لا، كل عميل يرى فقط طلباته الخاصة ضمن لوحة التحكم المخصصة له.",
+  },
 ];
 
 export default function Home() {
@@ -73,29 +104,53 @@ export default function Home() {
               إدارة لوجستية سهلة، توصيل مضمون في كل مرة.
             </h1>
             <p className="max-w-xl text-[14px] leading-7 text-white/75">
-              أدِر كل شحنة وعميل وسائق من منصة واحدة آمنة. مصممة للمشرفين والعملاء والمستخدمين الميدانيين.
+              أدِر كل شحنة وعميل وسائق من منصة واحدة آمنة. مصممة للمشرفين
+              والعملاء والمستخدمين الميدانيين.
             </p>
             <div className="flex flex-wrap gap-3">
-              <Link href="/NewOrder" className="h-11 cursor-pointer rounded-xl pt-3 bg-white px-5 text-[13px] font-semibold text-blue-600 shadow-md">
+              <Link
-                إنشاء طلب جديد
+                href="/login"
-              </Link>
+                className="h-11 pt-3 rounded-xl border border-white/30 bg-white/15 px-5 text-[13px] font-semibold text-white shadow-md backdrop-blur"
-              <Link href="/login" className="h-11 pt-3 rounded-xl border border-white/30 bg-white/15 px-5 text-[13px] font-semibold text-white shadow-md backdrop-blur">
+              >
                 تسجيل الدخول للوحة التحكم
               </Link>
             </div>
           </article>
 
           <aside className="w-full max-w-md rounded-2xl border border-white/20 bg-white/12 p-5 shadow-2xl shadow-blue-950/30 backdrop-blur-md">
-            <p className="text-[11px] uppercase tracking-[0.35em] text-white/60">تغذية الطلبات المباشرة</p>
+            <p className="text-[11px] uppercase tracking-[0.35em] text-white/60">
+              تغذية الطلبات المباشرة
+            </p>
             <div className="mt-5 space-y-3">
               {[
-                ["SHIP-202606-00142", "في الطريق", "bg-amber-100 text-amber-800"],
+                [
-                ["SHIP-202606-00139", "تم التسليم", "bg-emerald-100 text-emerald-800"],
+                  "SHIP-202606-00142",
-                ["SHIP-202606-00145", "تم الإنشاء", "bg-blue-100 text-blue-800"],
+                  "في الطريق",
+                  "bg-amber-100 text-amber-800",
+                ],
+                [
+                  "SHIP-202606-00139",
+                  "تم التسليم",
+                  "bg-emerald-100 text-emerald-800",
+                ],
+                [
+                  "SHIP-202606-00145",
+                  "تم الإنشاء",
+                  "bg-blue-100 text-blue-800",
+                ],
               ].map(([code, status, badge]) => (
-                <div key={code} className="flex items-center justify-between rounded-xl border border-white/10 bg-white/8 px-4 py-3">
+                <div
-                  <span className="font-mono text-[12px] text-white/90">{code}</span>
+                  key={code}
-                  <span className={`rounded-full px-3 py-1 text-[11px] font-semibold ${badge}`}>{status}</span>
+                  className="flex items-center justify-between rounded-xl border border-white/10 bg-white/8 px-4 py-3"
+                >
+                  <span className="font-mono text-[12px] text-white/90">
+                    {code}
+                  </span>
+                  <span
+                    className={`rounded-full px-3 py-1 text-[11px] font-semibold ${badge}`}
+                  >
+                    {status}
+                  </span>
                 </div>
               ))}
             </div>
@@ -110,25 +165,94 @@ export default function Home() {
       <section className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-6 py-10 lg:px-8">
         <div className="grid gap-4 md:grid-cols-3">
           {stats.map((item) => (
-            <article key={item.label} className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+            <article
-              <p className="text-[11px] uppercase tracking-[0.35em] text-slate-500">{item.label}</p>
+              key={item.label}
-              <p className={`mt-3 text-[32px] font-extrabold ${item.color}`}>{item.value}</p>
+              className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm"
+            >
+              <p className="text-[11px] uppercase tracking-[0.35em] text-slate-500">
+                {item.label}
+              </p>
+              <p className={`mt-3 text-[32px] font-extrabold ${item.color}`}>
+                {item.value}
+              </p>
             </article>
           ))}
         </div>
 
         <article className="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-slate-200 lg:p-8">
-          <p className="text-[11px] uppercase tracking-[0.35em] text-blue-600">المميزات الأساسية</p>
+          <p className="text-[11px] uppercase tracking-[0.35em] text-blue-600">
-          <h2 className="mt-2 text-[22px] font-extrabold text-slate-900">كل ما يحتاجه فريق اللوجستيك</h2>
+            المميزات الأساسية
-          <p className="mt-2 text-[14px] text-slate-500">من إدارة الطلبات إلى التتبع المباشر، كل شيء في مكان واحد.</p>
+          </p>
+          <h2 className="mt-2 text-[22px] font-extrabold text-slate-900">
+            كل ما يحتاجه فريق اللوجستيك
+          </h2>
+          <p className="mt-2 text-[14px] text-slate-500">
+            من إدارة الطلبات إلى التتبع المباشر، كل شيء في مكان واحد.
+          </p>
           <div className="mt-6 grid gap-4 md:grid-cols-3">
             {features.map((feature) => (
-              <article key={feature.title} className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+              <article
-                <div className={`mb-4 flex h-11 w-11 items-center justify-center rounded-xl ${feature.tone === "blue" ? "bg-blue-100 text-blue-600" : feature.tone === "emerald" ? "bg-emerald-100 text-emerald-600" : "bg-amber-100 text-amber-600"}`}>
+                key={feature.title}
-                  {feature.icon === "truck" ? <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="h-5 w-5"><path d="M3 7h11l3 4h4l-2 4H8" /><circle cx="9" cy="18" r="1.7" fill="currentColor" stroke="none" /><circle cx="18" cy="18" r="1.7" fill="currentColor" stroke="none" /></svg> : feature.icon === "clock" ? <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="h-5 w-5"><circle cx="12" cy="12" r="8" /><path d="M12 7v5l3 2" /></svg> : <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="h-5 w-5"><path d="M16 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2" /><circle cx="9.5" cy="7" r="3" /><path d="M17 8l2 2 4-4" /></svg>}
+                className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm"
+              >
+                <div
+                  className={`mb-4 flex h-11 w-11 items-center justify-center rounded-xl ${feature.tone === "blue" ? "bg-blue-100 text-blue-600" : feature.tone === "emerald" ? "bg-emerald-100 text-emerald-600" : "bg-amber-100 text-amber-600"}`}
+                >
+                  {feature.icon === "truck" ? (
+                    <svg
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="1.8"
+                      className="h-5 w-5"
+                    >
+                      <path d="M3 7h11l3 4h4l-2 4H8" />
+                      <circle
+                        cx="9"
+                        cy="18"
+                        r="1.7"
+                        fill="currentColor"
+                        stroke="none"
+                      />
+                      <circle
+                        cx="18"
+                        cy="18"
+                        r="1.7"
+                        fill="currentColor"
+                        stroke="none"
+                      />
+                    </svg>
+                  ) : feature.icon === "clock" ? (
+                    <svg
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="1.8"
+                      className="h-5 w-5"
+                    >
+                      <circle cx="12" cy="12" r="8" />
+                      <path d="M12 7v5l3 2" />
+                    </svg>
+                  ) : (
+                    <svg
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="1.8"
+                      className="h-5 w-5"
+                    >
+                      <path d="M16 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2" />
+                      <circle cx="9.5" cy="7" r="3" />
+                      <path d="M17 8l2 2 4-4" />
+                    </svg>
+                  )}
                 </div>
-                <h3 className="text-[16px] font-bold text-slate-900">{feature.title}</h3>
+                <h3 className="text-[16px] font-bold text-slate-900">
-                <p className="mt-2 text-[13px] leading-6 text-slate-500">{feature.text}</p>
+                  {feature.title}
+                </h3>
+                <p className="mt-2 text-[13px] leading-6 text-slate-500">
+                  {feature.text}
+                </p>
               </article>
             ))}
           </div>
@@ -138,16 +262,35 @@ export default function Home() {
       <section className="bg-[#ECEEF2] py-2">
         <div className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-6 py-10 lg:px-8">
           <article className="text-center">
-            <p className="text-[11px] uppercase tracking-[0.35em] text-blue-600">أدوار المستخدمين</p>
+            <p className="text-[11px] uppercase tracking-[0.35em] text-blue-600">
-            <h2 className="mt-2 text-[22px] font-extrabold text-slate-900">منصة واحدة، ثلاثة مداخل</h2>
+              أدوار المستخدمين
+            </p>
+            <h2 className="mt-2 text-[22px] font-extrabold text-slate-900">
+              منصة واحدة، ثلاثة مداخل
+            </h2>
           </article>
           <div className="grid gap-4 md:grid-cols-3">
             {roles.map((role) => (
-              <article key={role.title} className={`rounded-2xl border p-5 shadow-sm ${role.tone === "dark" ? "border-slate-800 bg-slate-950 text-slate-100" : role.tone === "blue" ? "border-blue-200 bg-blue-50 text-blue-950" : "border-emerald-200 bg-emerald-50 text-emerald-950"}`}>
+              <article
-                <span className={`inline-flex rounded-full px-3 py-1 text-[11px] font-semibold ${role.tone === "dark" ? "bg-slate-800 text-slate-200" : role.tone === "blue" ? "bg-blue-100 text-blue-700" : "bg-emerald-100 text-emerald-700"}`}>{role.tag}</span>
+                key={role.title}
-                <h3 className="mt-3 text-[18px] font-extrabold">{role.title}</h3>
+                className={`rounded-2xl border p-5 shadow-sm ${role.tone === "dark" ? "border-slate-800 bg-slate-950 text-slate-800" : role.tone === "blue" ? "border-blue-200 bg-blue-50 text-blue-950" : "border-emerald-200 bg-emerald-50 text-emerald-950"}`}
+              >
+                <span
+                  className={`inline-flex rounded-full px-3 py-1 text-[11px] font-semibold ${role.tone === "dark" ? "bg-slate-800 text-slate-200" : role.tone === "blue" ? "bg-blue-100 text-blue-700" : "bg-emerald-100 text-emerald-700"}`}
+                >
+                  {role.tag}
+                </span>
+                <h3 className="mt-3 text-[18px] font-extrabold">
+                  {role.title}
+                </h3>
                 <ul className="mt-4 space-y-2 text-[13px] leading-6">
-                  {role.items.map((item) => <li key={item} className="flex items-start gap-2"> <span className="mt-1 text-[12px]">✓</span><span>{item}</span></li>)}
+                  {role.items.map((item) => (
+                    <li key={item} className="flex items-start gap-2">
+                      {" "}
+                      <span className="mt-1 text-[12px]">✓</span>
+                      <span>{item}</span>
+                    </li>
+                  ))}
                 </ul>
               </article>
             ))}
@@ -157,13 +300,24 @@ export default function Home() {
 
       <section className="mx-auto w-full max-w-7xl px-6 py-10 lg:px-8">
         <article className="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-slate-200 lg:p-8">
-          <p className="text-[11px] uppercase tracking-[0.35em] text-blue-600">الأسئلة الشائعة</p>
+          <p className="text-[11px] uppercase tracking-[0.35em] text-blue-600">
-          <h2 className="mt-2 text-[22px] font-extrabold text-slate-900">أسئلة متكررة</h2>
+            الأسئلة الشائعة
+          </p>
+          <h2 className="mt-2 text-[22px] font-extrabold text-slate-900">
+            أسئلة متكررة
+          </h2>
           <div className="mt-6 space-y-3">
             {faqs.map((faq) => (
-              <article key={faq.q} className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
+              <article
-                <h3 className="text-[14px] font-bold text-slate-900">{faq.q}</h3>
+                key={faq.q}
-                <p className="mt-2 text-[13px] leading-6 text-slate-500">{faq.a}</p>
+                className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"
+              >
+                <h3 className="text-[14px] font-bold text-slate-900">
+                  {faq.q}
+                </h3>
+                <p className="mt-2 text-[13px] leading-6 text-slate-500">
+                  {faq.a}
+                </p>
               </article>
             ))}
           </div>
@@ -172,9 +326,13 @@ export default function Home() {
 
       <footer className="bg-[#0F172A] text-white">
         <div className="mx-auto flex w-full max-w-7xl flex-col gap-4 px-6 py-6 text-[13px] lg:flex-row lg:items-center lg:justify-between lg:px-8">
-          <div className="text-right font-extrabold text-white">Slash.so</div>
+          <Logo white={true} />
-          <div className="text-center text-white/40">© 2026 Slash.so. جميع الحقوق محفوظة.</div>
+          <div className="text-center text-white/40">
-          <div className="flex items-center gap-4 text-white/40">الخصوصية · الشروط · الحالة</div>
+            © 2026 Slash.sa. جميع الحقوق محفوظة.
+          </div>
+          <div className="flex items-center gap-4 text-white/40">
+            الخصوصية · الشروط · الحالة
+          </div>
         </div>
       </footer>
     </main>

app/register/page.tsx

@@ -1,146 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { useMemo, useState } from "react";
-
-export default function RegisterPage() {
-  const [step, setStep] = useState(1);
-  const [form, setForm] = useState({ fullName: "", email: "", phone: "", company: "", address: "" });
-  const [errors, setErrors] = useState<Record<string, string>>({});
-  const [loading, setLoading] = useState(false);
-
-  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-  const phonePattern = /^\+?[0-9]{10,15}$/;
-
-  function validateStep1() {
-    const nextErrors: Record<string, string> = {};
-    if (!form.fullName.trim()) nextErrors.fullName = "This field is required.";
-    if (!form.email.trim()) nextErrors.email = "This field is required.";
-    else if (!emailPattern.test(form.email)) nextErrors.email = "Please enter a valid email address (e.g. name@domain.com).";
-    if (!form.phone.trim()) nextErrors.phone = "This field is required.";
-    else if (!phonePattern.test(form.phone)) nextErrors.phone = "Phone number must be 10–15 digits, with optional country code.";
-    setErrors(nextErrors);
-    return Object.keys(nextErrors).length === 0;
-  }
-
-  function handleNext() {
-    if (validateStep1()) setStep(2);
-  }
-
-  function handleSubmit() {
-    setLoading(true);
-    setTimeout(() => {
-      setLoading(false);
-      window.location.href = "/client";
-    }, 600);
-  }
-
-  const progressSteps: Array<[number, string, boolean]> = [
-    [1, "بياناتك", step >= 1],
-    [2, "التفضيلات", step >= 2],
-    [3, "التأكيد", step >= 3],
-  ];
-
-  const summaryRows = useMemo(
-    () => [
-      ["Full Name", form.fullName || "—"],
-      ["Email", form.email || "—"],
-      ["Phone", form.phone || "—"],
-      ["Company", form.company || "—"],
-      ["Address", form.address || "—"],
-    ],
-    [form],
-  );
-
-  return (
-    <main className="min-h-screen bg-slate-50 p-6 text-slate-900 md:p-10">
-      <section className="mx-auto flex w-full max-w-5xl flex-col gap-6">
-        <header className="flex items-center justify-between gap-3">
-          <div>
-            <p className="text-[12px] uppercase tracking-[0.35em] text-blue-600">تسجيل العميل</p>
-            <h1 className="mt-2 text-[28px] font-bold text-slate-900">إنشاء حساب LogiFlow</h1>
-          </div>
-          <Link href="/login" className="rounded-[9px] border border-slate-200 bg-white px-4 py-2 text-sm text-slate-500 hover:bg-slate-100">العودة لتسجيل الدخول</Link>
-        </header>
-
-        <div className="flex items-center gap-3 rounded-[14px] border border-slate-200 bg-white p-4 shadow-sm">
-          {progressSteps.map(([index, label, done]) => (
-            <div key={String(index)} className="flex flex-1 items-center gap-3">
-              <div className={`flex h-8 w-8 items-center justify-center rounded-full border text-[12px] font-bold ${step === index ? "border-blue-600 bg-blue-50 text-blue-600" : done ? "border-emerald-500 bg-emerald-50 text-emerald-600" : "border-slate-200 bg-slate-100 text-slate-400"}`}>
-                {index}
-              </div>
-              <span className={`text-[12px] font-semibold ${step === index ? "text-blue-600" : done ? "text-emerald-600" : "text-slate-500"}`}>{label}</span>
-              {index < 3 ? <span className="hidden h-px flex-1 bg-slate-200 md:block" /> : null}
-            </div>
-          ))}
-        </div>
-
-        <article className="rounded-[14px] border border-slate-200 bg-white p-6 shadow-sm md:p-8">
-          {step === 1 ? (
-            <div className="space-y-4">
-              <div>
-                <h2 className="text-[18px] font-semibold">المعلومات الشخصية</h2>
-                <p className="text-[13px] text-slate-500">أكمل الحقول المطلوبة للانتقال إلى خطوة التأكيد.</p>
-              </div>
-              <div className="grid gap-4 md:grid-cols-2">
-                <label className="text-[12px] font-semibold uppercase tracking-[0.5px] text-slate-500">الاسم الكامل
-                  <input value={form.fullName} onChange={(e) => setForm({ ...form, fullName: e.target.value })} className="mt-2 h-11 w-full rounded-[9px] border border-slate-200 px-3 text-[14px] text-slate-900" />
-                  {errors.fullName ? <span className="mt-1 block text-[12px] text-red-600">{errors.fullName}</span> : null}
-                </label>
-                <label className="text-[12px] font-semibold uppercase tracking-[0.5px] text-slate-500">البريد الإلكتروني
-                  <input value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} className="mt-2 h-11 w-full rounded-[9px] border border-slate-200 px-3 text-[14px] text-slate-900" />
-                  {errors.email ? <span className="mt-1 block text-[12px] text-red-600">{errors.email}</span> : null}
-                </label>
-                <label className="text-[12px] font-semibold uppercase tracking-[0.5px] text-slate-500">رقم الهاتف
-                  <input value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} className="mt-2 h-11 w-full rounded-[9px] border border-slate-200 px-3 text-[14px] text-slate-900" />
-                  {errors.phone ? <span className="mt-1 block text-[12px] text-red-600">{errors.phone}</span> : null}
-                </label>
-                <label className="text-[12px] font-semibold uppercase tracking-[0.5px] text-slate-500">اسم الشركة
-                  <input value={form.company} onChange={(e) => setForm({ ...form, company: e.target.value })} className="mt-2 h-11 w-full rounded-[9px] border border-slate-200 px-3 text-[14px] text-slate-900" />
-                </label>
-              </div>
-              <label className="block text-[12px] font-semibold uppercase tracking-[0.5px] text-slate-500">العنوان
-                <textarea value={form.address} onChange={(e) => setForm({ ...form, address: e.target.value })} rows={4} className="mt-2 w-full rounded-[9px] border border-slate-200 px-3 py-2 text-[14px] text-slate-900" />
-              </label>
-              <div className="flex gap-3 pt-2">
-                <Link href="/login" className="flex h-10 flex-1 items-center justify-center rounded-[9px] border border-slate-200 bg-white text-sm font-semibold text-slate-500">رجوع</Link>
-                <button type="button" onClick={handleNext} className="flex h-10 flex-2 items-center justify-center rounded-[9px] bg-blue-600 text-sm font-semibold text-white hover:bg-blue-700">التالي</button>
-              </div>
-            </div>
-          ) : null}
-
-          {step === 2 ? (
-            <div className="space-y-4">
-              <div>
-                <h2 className="text-[18px] font-semibold">التفضيلات</h2>
-                <p className="text-[13px] text-slate-500">راجع التفاصيل الاختيارية وانتقل إلى المراجعة.</p>
-              </div>
-              <div className="rounded-[10px] border border-slate-200 bg-slate-100 p-4 text-sm text-slate-500">سيتم إنشاء الحساب بشكل آمن. يتم تشفير البيانات الحساسة أثناء التخزين.</div>
-              <div className="flex gap-3 pt-2">
-                <button type="button" onClick={() => setStep(1)} className="flex h-10 flex-1 items-center justify-center rounded-[9px] border border-slate-200 bg-white text-sm font-semibold text-slate-500">رجوع</button>
-                <button type="button" onClick={() => setStep(3)} className="flex h-10 flex-2 items-center justify-center rounded-[9px] bg-blue-600 text-sm font-semibold text-white hover:bg-blue-700">مراجعة</button>
-              </div>
-            </div>
-          ) : null}
-
-          {step === 3 ? (
-            <div className="space-y-4">
-              <div>
-                <h2 className="text-[18px] font-semibold">تأكيد وإرسال</h2>
-                <p className="text-[13px] text-slate-500">راجع بياناتك قبل إنشاء الحساب.</p>
-              </div>
-              <table className="w-full overflow-hidden rounded-[10px] border border-slate-200 text-left text-sm">
-                <tbody>{summaryRows.map(([label, value]) => <tr key={label} className="border-b border-slate-200 last:border-b-0"><td className="bg-slate-100 px-4 py-3 font-semibold text-slate-500">{label}</td><td className="px-4 py-3 text-slate-900">{value}</td></tr>)}</tbody>
-              </table>
-              <div className="rounded-[10px] border border-blue-200 bg-blue-50 p-3 text-sm text-slate-900">سيتم إنشاء الحساب بشكل آمن. يتم تشفير البيانات الحساسة أثناء التخزين.</div>
-              <div className="flex gap-3 pt-2">
-                <button type="button" onClick={() => setStep(2)} className="flex h-10 flex-1 items-center justify-center rounded-[9px] border border-slate-200 bg-white text-sm font-semibold text-slate-500">رجوع</button>
-                <button type="button" disabled={loading} onClick={handleSubmit} className="flex h-10 flex-2 items-center justify-center rounded-[9px] bg-emerald-500 text-sm font-semibold text-white hover:bg-emerald-600 disabled:cursor-not-allowed disabled:opacity-70">{loading ? "جاري إنشاء الحساب…" : "إنشاء حسابي"}</button>
-              </div>
-            </div>
-          ) : null}
-        </article>
-      </section>
-    </main>
-  );
-}

app/users/[userId]/page.tsx

@@ -1,429 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { useParams, useRouter } from "next/navigation";
-import { PageLoader } from "../../../Components/UI/Spinner";
-import { Alert } from "../../../Components/UI/Alert";
-import { fmtDate } from "../../../utils/helperFun";
-import { getStoredToken } from "../../../lib/auth";
-import { userService } from "../../../services/user.service";
-import type { UserDetail } from "../../../types/user";
-
-// ── helpers ───────────────────────────────────────────────────────────────────
-function safeFmtDate(iso: string | null | undefined): string {
-  if (!iso) return "—";
-  try {
-    const d = new Date(iso);
-    if (isNaN(d.getTime())) return "—";
-    return fmtDate(iso);
-  } catch {
-    return "—";
-  }
-}
-
-// ── sub-components ────────────────────────────────────────────────────────────
-function SectionCard({ title, children }: { title: string; children: React.ReactNode }) {
-  return (
-    <div style={{
-      background: "var(--color-surface)",
-      border: "1px solid var(--color-border)",
-      borderRadius: "var(--radius-xl)",
-      boxShadow: "var(--shadow-card)",
-      overflow: "hidden",
-    }}>
-      <div style={{
-        padding: "0.875rem 1.5rem",
-        borderBottom: "1px solid var(--color-border)",
-        background: "var(--color-surface-muted)",
-      }}>
-        <p style={{
-          margin: 0,
-          fontSize: 11,
-          fontWeight: 700,
-          textTransform: "uppercase",
-          letterSpacing: "0.2em",
-          color: "var(--color-text-muted)",
-        }}>
-          {title}
-        </p>
-      </div>
-      <div style={{ padding: "1.25rem 1.5rem" }}>
-        {children}
-      </div>
-    </div>
-  );
-}
-
-function Field({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
-      <span style={{
-        fontSize: 11,
-        fontWeight: 600,
-        color: "var(--color-text-muted)",
-        textTransform: "uppercase",
-        letterSpacing: "0.15em",
-      }}>
-        {label}
-      </span>
-      <span style={{
-        fontSize: 13,
-        color: "var(--color-text-primary)",
-        fontFamily: "var(--font-sans)",
-      }}>
-        {children}
-      </span>
-    </div>
-  );
-}
-
-function ActiveBadge({ active }: { active: boolean }) {
-  return (
-    <span style={{
-      display: "inline-flex", alignItems: "center", gap: 5,
-      borderRadius: "var(--radius-full)",
-      border: active ? "1px solid #BBF7D0" : "1px solid #FECACA",
-      background: active ? "#DCFCE7" : "#FEF2F2",
-      padding: "0.2rem 0.75rem",
-      fontSize: 12, fontWeight: 600,
-      color: active ? "#166534" : "#991B1B",
-    }}>
-      <span style={{ width: 6, height: 6, borderRadius: "50%", background: active ? "#16A34A" : "#DC2626" }} />
-      {active ? "نشط" : "معطل"}
-    </span>
-  );
-}
-
-function DeletedBadge({ deleted }: { deleted: boolean }) {
-  if (!deleted) return (
-    <span style={{
-      display: "inline-flex", alignItems: "center", gap: 5,
-      borderRadius: "var(--radius-full)",
-      border: "1px solid #BBF7D0",
-      background: "#DCFCE7",
-      padding: "0.2rem 0.75rem",
-      fontSize: 12, fontWeight: 600,
-      color: "#166534",
-    }}>
-      <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#16A34A" }} />
-      موجود
-    </span>
-  );
-  return (
-    <span style={{
-      display: "inline-flex", alignItems: "center", gap: 5,
-      borderRadius: "var(--radius-full)",
-      border: "1px solid #FECACA",
-      background: "#FEF2F2",
-      padding: "0.2rem 0.75rem",
-      fontSize: 12, fontWeight: 600,
-      color: "#991B1B",
-    }}>
-      <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#DC2626" }} />
-      محذوف
-    </span>
-  );
-}
-
-// eye icon
-function EyeIcon({ open }: { open: boolean }) {
-  if (open) return (
-    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" />
-      <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" />
-      <line x1="1" y1="1" x2="23" y2="23" />
-    </svg>
-  );
-  return (
-    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
-      <circle cx="12" cy="12" r="3" />
-    </svg>
-  );
-}
-
-// silhouette fallback avatar
-function AvatarFallback() {
-  return (
-    <div style={{
-      width: 80, height: 80, borderRadius: "50%",
-      background: "var(--color-brand-100)",
-      border: "2px solid var(--color-brand-200)",
-      display: "flex", alignItems: "center", justifyContent: "center",
-      flexShrink: 0,
-    }}>
-      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#2563EB" strokeWidth="1.5">
-        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-        <circle cx="12" cy="7" r="4" />
-      </svg>
-    </div>
-  );
-}
-
-// ── main page ─────────────────────────────────────────────────────────────────
-export default function UserDetailPage() {
-  const params = useParams();
-  const router = useRouter();
-  const userId = typeof params?.userId === "string" ? params.userId : null;
-
-  const [user, setUser]       = useState<UserDetail | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError]     = useState<string | null>(null);
-  const [showToken, setShowToken] = useState(false);
-
-  useEffect(() => {
-    if (!userId) {
-      router.replace("/users");
-      return;
-    }
-    let cancelled = false;
-    async function fetchUser() {
-      try {
-        const token = getStoredToken();
-        const res   = await userService.getById(userId as string, token);
-        if (!cancelled) {
-          setUser((res as { data: UserDetail }).data ?? null);
-        }
-      } catch {
-        if (!cancelled) setError("تعذّر تحميل بيانات المستخدم. يرجى المحاولة لاحقاً.");
-      } finally {
-        if (!cancelled) setLoading(false);
-      }
-    }
-    fetchUser();
-    return () => { cancelled = true; };
-  }, [userId, router]);
-
-  // reset token visibility on unmount
-  useEffect(() => () => { setShowToken(false); }, []);
-
-  if (loading) return <PageLoader message="جارٍ تحميل بيانات المستخدم…" />;
-
-  if (error || !user) {
-    return (
-      <div dir="rtl" style={{ padding: "2rem", maxWidth: 560 }}>
-        <Alert
-          type="error"
-          title="خطأ في التحميل"
-          message={error ?? "المستخدم غير موجود."}
-        />
-        <a
-          href="/users"
-          style={{
-            display: "inline-block", marginTop: "1rem",
-            fontSize: 13, fontWeight: 600,
-            color: "var(--color-brand-600)",
-            textDecoration: "underline",
-          }}
-        >
-          ← العودة إلى قائمة المستخدمين
-        </a>
-      </div>
-    );
-  }
-
-  return (
-    <div dir="rtl" style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
-
-      {/* soft-deleted warning banner */}
-      {user.isDeleted && (
-        <div style={{
-          display: "flex", alignItems: "center", gap: 10,
-          background: "#FEF2F2", border: "1px solid #FECACA",
-          borderRadius: "var(--radius-lg)", padding: "0.875rem 1.25rem",
-          fontSize: 13, fontWeight: 600, color: "#991B1B",
-        }}>
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-            <circle cx="12" cy="12" r="10" />
-            <line x1="12" y1="8" x2="12" y2="12" />
-            <line x1="12" y1="16" x2="12.01" y2="16" />
-          </svg>
-          هذا المستخدم محذوف — تم حذفه بتاريخ {safeFmtDate(user.deletedAt)}.
-        </div>
-      )}
-
-      {/* page header */}
-      <header style={{
-        background: "var(--color-surface)",
-        border: "1px solid var(--color-border)",
-        borderRadius: "var(--radius-xl)",
-        boxShadow: "var(--shadow-card)",
-        padding: "1.5rem 2rem",
-      }}>
-        <a
-          href="/users"
-          style={{
-            display: "inline-flex", alignItems: "center", gap: 6,
-            fontSize: 12, fontWeight: 600,
-            color: "var(--color-brand-600)",
-            textDecoration: "none", marginBottom: "1rem",
-          }}
-        >
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-            <polyline points="15 18 9 12 15 6" />
-          </svg>
-          العودة إلى المستخدمين
-        </a>
-
-        <div style={{ display: "flex", alignItems: "center", gap: "1.25rem", flexWrap: "wrap" }}>
-          {/* avatar */}
-          {user.photo
-            ? <img src={user.photo} alt={user.name} style={{ width: 80, height: 80, borderRadius: "50%", objectFit: "cover", border: "2px solid var(--color-brand-200)", flexShrink: 0 }} />
-            : <AvatarFallback />
-          }
-          <div>
-            <p style={{ margin: 0, fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600 }}>
-              ملف المستخدم
-            </p>
-            <h1 style={{ margin: "4px 0 6px", fontSize: "1.4rem", fontWeight: 700, color: "var(--color-text-primary)" }}>
-              {user.name}
-            </h1>
-            <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
-              {user.userName && (
-                <span style={{
-                  fontFamily: "var(--font-mono)", fontSize: 12,
-                  color: "#2563EB", fontWeight: 600,
-                  background: "#EFF6FF", border: "1px solid #BFDBFE",
-                  borderRadius: "var(--radius-sm)", padding: "2px 8px",
-                }}>
-                  @{user.userName}
-                </span>
-              )}
-              <ActiveBadge active={user.isActive} />
-              <DeletedBadge deleted={user.isDeleted} />
-            </div>
-          </div>
-        </div>
-      </header>
-
-      {/* grid layout */}
-      <div style={{
-        display: "grid",
-        gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
-        gap: "1.25rem",
-      }}>
-
-        {/* Basic Info */}
-        <SectionCard title="المعلومات الأساسية">
-          <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
-            <Field label="الاسم الكامل">{user.name}</Field>
-            <Field label="البريد الإلكتروني">
-              {user.email
-                ? <span style={{ direction: "ltr", display: "inline-block" }}>{user.email}</span>
-                : "—"
-              }
-            </Field>
-            <Field label="رقم الهاتف">
-              <span style={{ direction: "ltr", display: "inline-block", fontFamily: "var(--font-mono)" }}>
-                {user.phone || "—"}
-              </span>
-            </Field>
-            <Field label="المعرف">
-              <span style={{
-                fontFamily: "var(--font-mono)", fontSize: 11,
-                color: "var(--color-text-muted)", wordBreak: "break-all",
-              }}>
-                {user.id}
-              </span>
-            </Field>
-          </div>
-        </SectionCard>
-
-        {/* Role & Branch */}
-        <SectionCard title="الدور والفرع">
-          <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
-            <Field label="الدور">
-              <span style={{
-                display: "inline-flex", alignItems: "center",
-                borderRadius: "var(--radius-full)",
-                border: "1px solid #BFDBFE",
-                background: "#EFF6FF",
-                padding: "0.2rem 0.75rem",
-                fontSize: 12, fontWeight: 600,
-                color: "#1D4ED8",
-              }}>
-                {user.role?.name ?? "—"}
-              </span>
-            </Field>
-            {user.role?.description && (
-              <Field label="وصف الدور">
-                <span style={{ color: "var(--color-text-secondary)" }}>
-                  {user.role.description}
-                </span>
-              </Field>
-            )}
-            <Field label="الفرع">{user.branch?.name ?? "—"}</Field>
-          </div>
-        </SectionCard>
-
-        {/* Account Status */}
-        <SectionCard title="حالة الحساب">
-          <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
-            <Field label="الحالة"><ActiveBadge active={user.isActive} /></Field>
-            <Field label="حالة الحذف"><DeletedBadge deleted={user.isDeleted} /></Field>
-            <Field label="تاريخ الإنشاء">{safeFmtDate(user.createdAt)}</Field>
-            <Field label="آخر تحديث">{safeFmtDate(user.updatedAt)}</Field>
-            <Field label="تاريخ الحذف">{safeFmtDate(user.deletedAt)}</Field>
-            <Field label="آخر تغيير لكلمة المرور">{safeFmtDate(user.passwordChangedAt)}</Field>
-          </div>
-        </SectionCard>
-
-        {/* Refresh Token */}
-        <SectionCard title="رمز التحديث">
-          {user.refreshToken ? (
-            <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
-              <div style={{
-                display: "flex", alignItems: "center", justifyContent: "space-between",
-                background: "var(--color-surface-muted)",
-                border: "1px solid var(--color-border)",
-                borderRadius: "var(--radius-md)",
-                padding: "0.625rem 0.875rem",
-                gap: "0.75rem",
-              }}>
-                <span style={{
-                  fontFamily: "var(--font-mono)", fontSize: 12,
-                  color: "var(--color-text-secondary)",
-                  wordBreak: "break-all", flex: 1,
-                  letterSpacing: showToken ? "normal" : "0.15em",
-                }}>
-                  {showToken ? user.refreshToken : "••••••••••••••••••••••••"}
-                </span>
-                <button
-                  type="button"
-                  onClick={() => setShowToken(p => !p)}
-                  title={showToken ? "إخفاء الرمز" : "إظهار الرمز"}
-                  aria-label={showToken ? "إخفاء رمز التحديث" : "إظهار رمز التحديث"}
-                  style={{
-                    flexShrink: 0,
-                    width: 30, height: 30,
-                    borderRadius: "var(--radius-sm)",
-                    border: "1px solid var(--color-border)",
-                    background: "var(--color-surface)",
-                    color: "var(--color-text-muted)",
-                    cursor: "pointer",
-                    display: "inline-flex", alignItems: "center", justifyContent: "center",
-                    transition: "opacity 150ms",
-                  }}
-                >
-                  <EyeIcon open={showToken} />
-                </button>
-              </div>
-              <p style={{ margin: 0, fontSize: 11, color: "var(--color-text-hint)" }}>
-                هذا الرمز حساس — لا تشاركه مع أي أحد.
-              </p>
-            </div>
-          ) : (
-            <p style={{
-              margin: 0, fontSize: 13,
-              color: "var(--color-text-muted)",
-              fontStyle: "italic",
-            }}>
-              غير متاح
-            </p>
-          )}
-        </SectionCard>
-
-      </div>
-    </div>
-  );
-}

hooks/useCars.ts

@@ -0,0 +1,217 @@
+"use client";
+// hooks/useCars.ts
+// All custom hooks for the Car module.
+
+import { useCallback, useEffect, useState } from "react";
+import { getStoredToken } from "../lib/auth";
+import { carService } from "../services/car.service";
+import { get } from "../services/api";
+import type {
+  Car,
+  CarImage,
+  CarListResponse,
+  CreateCarPayload,
+  ImageStage,
+  ToastMsg,
+  UpdateCarPayload,
+} from "../types/car";
+
+// ── useCars ───────────────────────────────────────────────────────────────────
+// Manages the paginated car list for the main page.
+
+export function useCars(page: number, search: string) {
+  const [cars,    setCars]    = useState<Car[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error,   setError]   = useState<string | null>(null);
+  const [total,   setTotal]   = useState(0);
+  const [pages,   setPages]   = useState(1);
+
+  const loadCars = useCallback(() => {
+    const token = getStoredToken();
+    setLoading(true);
+    setError(null);
+    const query = `?page=${page}&limit=12${search ? `&search=${encodeURIComponent(search)}` : ""}`;
+    get<CarListResponse>(`cars${query}`, token)
+      .then((res) => {
+        const payload = (res as unknown as { data: CarListResponse["data"] }).data ?? res;
+        setCars((payload as CarListResponse["data"]).data ?? []);
+        setTotal((payload as CarListResponse["data"]).meta?.total ?? 0);
+        setPages((payload as CarListResponse["data"]).meta?.pages ?? 1);
+      })
+      .catch((err: Error) => setError(err.message))
+      .finally(() => setLoading(false));
+  }, [page, search]);
+
+  useEffect(() => { loadCars(); }, [loadCars]);
+
+  // Optimistic removal after delete
+  const removeCar = useCallback((id: string) => {
+    setCars(prev => prev.filter(c => c.id !== id));
+    setTotal(prev => Math.max(0, prev - 1));
+  }, []);
+
+  return { cars, loading, error, total, pages, loadCars, removeCar, setError };
+}
+
+// ── useCarDetail ──────────────────────────────────────────────────────────────
+// Fetches a single car by ID — used in CarDetailPanel.
+
+export function useCarDetail(carId: string) {
+  const [car,     setCar]     = useState<Car | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error,   setError]   = useState<string | null>(null);
+
+  useEffect(() => {
+    const token = getStoredToken();
+    setLoading(true);
+    setError(null);
+    carService
+      .getById(carId, token)
+      .then(res => setCar((res as unknown as { data: Car }).data))
+      .catch((err: Error) => setError(err.message))
+      .finally(() => setLoading(false));
+  }, [carId]);
+
+  return { car, loading, error };
+}
+
+// ── useCarMutations ───────────────────────────────────────────────────────────
+// Create, update, and delete operations — used in the main page.
+
+interface UseCarMutationsOptions {
+  onSuccess: (msg: string) => void;
+  onError:   (msg: string) => void;
+  onDeleted: (id: string) => void;
+  getEditTarget: () => Car | null;
+}
+
+export function useCarMutations({
+  onSuccess,
+  onError,
+  onDeleted,
+  getEditTarget,
+}: UseCarMutationsOptions) {
+  const [deleting, setDeleting] = useState(false);
+
+  const handleFormSubmit = useCallback(async (
+    payload: CreateCarPayload | UpdateCarPayload,
+    isNew: boolean,
+  ): Promise<boolean> => {
+    const token = getStoredToken();
+    try {
+      if (isNew) {
+        await carService.create(payload as CreateCarPayload, token);
+        onSuccess("تم إضافة المركبة بنجاح.");
+      } else {
+        const editTarget = getEditTarget();
+        if (!editTarget) return false;
+        await carService.update(editTarget.id, payload as UpdateCarPayload, token);
+        onSuccess("تم تحديث بيانات المركبة.");
+      }
+      return true;
+    } catch (err: unknown) {
+      onError(err instanceof Error ? err.message : "فشلت العملية.");
+      return false;
+    }
+  }, [onSuccess, onError, getEditTarget]);
+
+  const handleDeleteConfirm = useCallback(async (target: Car) => {
+    setDeleting(true);
+    const token = getStoredToken();
+    try {
+      await carService.delete(target.id, token);
+      onDeleted(target.id);
+      onSuccess(`تم حذف ${target.manufacturer} ${target.model} بنجاح.`);
+    } catch (err: unknown) {
+      onError(err instanceof Error ? err.message : "فشل الحذف.");
+    } finally {
+      setDeleting(false);
+    }
+  }, [onSuccess, onError, onDeleted]);
+
+  return { deleting, handleFormSubmit, handleDeleteConfirm };
+}
+
+// ── useToast ──────────────────────────────────────────────────────────────────
+// Simple toast notification state.
+
+export function useToast(duration = 3500) {
+  const [toast, setToast] = useState<ToastMsg | null>(null);
+
+  const notify = useCallback((t: ToastMsg) => {
+    setToast(t);
+    setTimeout(() => setToast(null), duration);
+  }, [duration]);
+
+  return { toast, notify };
+}
+
+// ── useCarImages ──────────────────────────────────────────────────────────────
+// Manages gallery images — used in CarImageGallery.
+
+export function useCarImages(carId: string, sortBy: "asc" | "desc") {
+  const [images,    setImages]    = useState<CarImage[]>([]);
+  const [loading,   setLoading]   = useState(true);
+  const [uploading, setUploading] = useState(false);
+  const [deleting,  setDeleting]  = useState<string | null>(null);
+  const [error,     setError]     = useState<string | null>(null);
+
+  const fetchImages = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const token = getStoredToken();
+      const res = await carService.getImages(carId, token, { sortBy });
+      const raw = (res as unknown as { data: CarImage[] }).data ?? [];
+      setImages(raw);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "تعذّر تحميل الصور");
+    } finally {
+      setLoading(false);
+    }
+  }, [carId, sortBy]);
+
+  useEffect(() => { fetchImages(); }, [fetchImages]);
+
+  const uploadImages = useCallback(async (files: File[], stage: ImageStage) => {
+    setUploading(true);
+    setError(null);
+    try {
+      const token = getStoredToken();
+      await carService.uploadImages(carId, files, stage, token);
+      await fetchImages();
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "فشل رفع الصور");
+    } finally {
+      setUploading(false);
+    }
+  }, [carId, fetchImages]);
+
+  const deleteImage = useCallback(async (imageId: string) => {
+    setDeleting(imageId);
+    setError(null);
+    try {
+      const token = getStoredToken();
+      await carService.deleteImage(imageId, token);
+      setImages(prev => prev.filter(img => img.id !== imageId));
+      return true;
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "فشل حذف الصورة");
+      return false;
+    } finally {
+      setDeleting(null);
+    }
+  }, []);
+
+  return {
+    images,
+    loading,
+    uploading,
+    deleting,
+    error,
+    setError,
+    fetchImages,
+    uploadImages,
+    deleteImage,
+  };
+}

package-lock.json

@@ -10,7 +10,8 @@
       "dependencies": {
         "next": "16.2.7",
         "react": "19.2.4",
-        "react-dom": "19.2.4"
+        "react-dom": "19.2.4",
+        "yup": "^1.7.1"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4.3.0",
@@ -5514,6 +5515,12 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/property-expr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
+      "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==",
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -6209,6 +6216,12 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/tiny-case": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
+      "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.17",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
@@ -6270,6 +6283,12 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==",
+      "license": "MIT"
+    },
     "node_modules/ts-api-utils": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.5.0.tgz",
@@ -6328,6 +6347,18 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/typed-array-buffer": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
@@ -6684,6 +6715,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/yup": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-1.7.1.tgz",
+      "integrity": "sha512-GKHFX2nXul2/4Dtfxhozv701jLQHdf6J34YDh2cEkpqoo8le5Mg6/LrdseVLrFarmFygZTlfIhHx/QKfb/QWXw==",
+      "license": "MIT",
+      "dependencies": {
+        "property-expr": "^2.0.5",
+        "tiny-case": "^1.0.3",
+        "toposort": "^2.0.2",
+        "type-fest": "^2.19.0"
+      }
+    },
     "node_modules/zod": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.3.tgz",

package.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "next": "16.2.7",
     "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react-dom": "19.2.4",
+    "yup": "^1.7.1"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.3.0",

services/car.service.ts

@@ -1,5 +1,3 @@
-
-
 import { get, post, patch, del } from "./api";
 import type {
   Car,

services/driver.service.ts

@@ -4,7 +4,7 @@
 //   - src/routes/driver.route.js      → /api/v1/driver/...
 //   - src/routes/driver_report.route.js → /api/v1/drivers/:id/reports/daily
 
-import { get, post, put, del } from "./api";
+import { get, post, put, del, patch } from "./api";
 import type {
   Driver,
   DriverListResponse,
@@ -81,7 +81,7 @@ export const driverService = {
    * Requires: "update-driver" permission
    */
   update: (id: string, payload: UpdateDriverPayload, token: string | null) =>
-    put<{ data: Driver }>(`driver/${id}`, payload, token),
+    patch<{ data: Driver }>(`driver/${id}`, payload, token),
 
   /**
    * DELETE /driver/:id
@@ -100,10 +100,10 @@ export const driverService = {
    * Requires: "generate-driver-report" permission
    */
   getDailyReport: (id: string, date: string, token: string | null) =>
-    get<DriverReportResponse>(
+  get<DriverReportResponse>(
-      `driver/${id}/reports/daily?date=${encodeURIComponent(date)}`,
+    `drivers/${id}/reports/daily?date=${encodeURIComponent(date)}`,
-      token,
+    token,
-    ),
+  ),
 
   // ── Image upload (multipart) ──────────────────────────────────────────────
 

services/trip.service.ts

@@ -0,0 +1,114 @@
+// services/trip.service.ts
+// All API calls for the Trip module.
+// Endpoints extracted from: trip_api_reference.html → /api/v1/trips/...
+// Follows the exact same pattern as services/driver.service.ts.
+
+import { get, post, patch, del } from "./api";
+import type {
+  Trip,
+  TripListResponse,
+  TripDetailResponse,
+  TripReportResponse,
+  CreateTripPayload,
+  UpdateTripPayload,
+  TripListParams,
+} from "@/types/trip";
+
+/** Build a query string for list endpoints */
+function buildQuery(
+  params: Record<string, string | number | undefined>,
+): string {
+  const entries = Object.entries(params).filter(
+    ([, v]) => v !== undefined && v !== "",
+  );
+  if (!entries.length) return "";
+  return (
+    "?" +
+    entries
+      .map(([k, v]) => `${k}=${encodeURIComponent(String(v))}`)
+      .join("&")
+  );
+}
+
+export const tripService = {
+  /**
+   * GET /trips
+   * Fetch paginated + filterable + searchable trip list.
+   * Requires: "read-trip" permission
+   */
+  getAll: (params: TripListParams = {}, token: string | null) =>
+    get<TripListResponse>(`trips${buildQuery({ ...params })}`, token),
+
+  /**
+   * GET /trips/archived
+   * Fetch soft-deleted (archived) trips. Same filters as getAll.
+   * Requires: "read-deleted-trip" permission
+   */
+  getArchived: (params: TripListParams = {}, token: string | null) =>
+    get<TripListResponse>(`trips/archived${buildQuery({ ...params })}`, token),
+
+  /**
+   * GET /trips/archived/:id
+   * Fetch a single archived trip with full details.
+   * Requires: "read-deleted-trip" permission
+   */
+  getArchivedById: (id: string, token: string | null) =>
+    get<TripDetailResponse>(`trips/archived/${id}`, token),
+
+  /**
+   * GET /trips/:id
+   * Fetch a single trip with full driver/car details.
+   * Requires: "read-trip" permission
+   */
+  getById: (id: string, token: string | null) =>
+    get<TripDetailResponse>(`trips/${id}`, token),
+
+  /**
+   * POST /trips
+   * Create a new trip.
+   * Side effect: driver & car flip to status "InTrip" automatically.
+   * Requires: "create-trip" permission
+   */
+  create: (payload: CreateTripPayload, token: string | null) =>
+    post<{ data: Trip }>("trips", payload, token),
+
+  /**
+   * PATCH /trips/:id
+   * Update trip data / status / reassign driver or car.
+   * Side effects:
+   *  - changing driverId: old driver -> Active, new driver -> InTrip
+   *  - changing carId: same logic for cars
+   *  - status Completed/Cancelled: driver & car both -> Active
+   * Requires: "update-trip" permission
+   */
+  update: (id: string, payload: UpdateTripPayload, token: string | null) =>
+    patch<{ data: Trip }>(`trips/${id}`, payload, token),
+
+  /**
+   * DELETE /trips/:id
+   * Soft-delete a trip (isDeleted=true, deletedAt=now()). 204 No Content.
+   * Requires: "delete-trip" permission
+   */
+  delete: (id: string, token: string | null) =>
+    del<void>(`trips/${id}`, token),
+
+  // ── Reports ───────────────────────────────────────────────────────────────
+
+  /**
+   * GET /trips/:id/reports
+   * Generate the Trip Manifest report (HTML, saved server-side).
+   * Returns { reportUrl }
+   * Requires: "generate-trip-report" permission
+   */
+  getReport: (id: string, token: string | null) =>
+    get<TripReportResponse>(`trips/${id}/reports`, token),
+
+  /**
+   * GET /trips/:id/reports/client/:clientId
+   * Generate a client-filtered version of the trip report.
+   * Returns { reportUrl }
+   * Requires: "generate-trip-report" permission
+   */
+  getClientReport: (id: string, clientId: string, token: string | null) =>
+    get<TripReportResponse>(`trips/${id}/reports/client/${clientId}`, token),
+};

types/car.ts

@@ -6,7 +6,54 @@ export type InsuranceStatus = "Valid" | "Expired" | "NotInsured";
 export type ImpoundStatus = "None" | string;
 export type ImageStage = "BEFORE" | "AFTER" | "GENERAL";
 
-// ── Core Car ────────────────────────────────────────────────────────────────
+// ── Status display config ────────────────────────────────────────────────────
+// Used by page.tsx (CarCard) and CarDetailPanel
+export const STATUS_MAP: Record<
+  CarStatus,
+  { label: string; color: string; bg: string; border: string; dot: string }
+> = {
+  Active:        { label: "نشط",      color: "#166534", bg: "#DCFCE7", border: "#BBF7D0", dot: "#16A34A" },
+  InMaintenance: { label: "صيانة",    color: "#854D0E", bg: "#FFFBEB", border: "#FDE68A", dot: "#D97706" },
+  InTrip:        { label: "في رحلة",  color: "#1E40AF", bg: "#EFF6FF", border: "#BFDBFE", dot: "#3B82F6" },
+  Inactive:      { label: "غير نشط", color: "#64748B", bg: "#F1F5F9", border: "#E2E8F0", dot: "#94A3B8" },
+};
+
+export const INS_MAP: Record<InsuranceStatus, { label: string; color: string }> = {
+  Valid:      { label: "سارٍ",        color: "#16A34A" },
+  Expired:    { label: "منتهي",       color: "#DC2626" },
+  NotInsured: { label: "غير مؤمَّن", color: "#D97706" },
+};
+
+// ── Stage display config ─────────────────────────────────────────────────────
+// Used by CarImageGallery
+export const STAGE_MAP: Record<ImageStage, { label: string; color: string; bg: string }> = {
+  BEFORE:  { label: "قبل", color: "#854D0E", bg: "#FFFBEB" },
+  AFTER:   { label: "بعد", color: "#166534", bg: "#DCFCE7" },
+  GENERAL: { label: "عام", color: "#1E40AF", bg: "#EFF6FF" },
+};
+
+// ── Shared date helpers ───────────────────────────────────────────────────────
+export function fmtDate(iso?: string | null): string {
+  if (!iso) return "—";
+  return new Date(iso).toLocaleDateString("ar-SA", {
+    year: "numeric", month: "long", day: "numeric",
+  });
+}
+
+export function fmtDateShort(iso?: string | null): string {
+  if (!iso) return "—";
+  return new Date(iso).toLocaleDateString("ar-SA", {
+    year: "numeric", month: "short", day: "numeric",
+  });
+}
+
+/** Returns true if the date is within 90 days in the future (or already past) */
+export function isExpiringSoon(iso?: string | null): boolean {
+  if (!iso) return false;
+  return (new Date(iso).getTime() - Date.now()) / 86_400_000 <= 90;
+}
+
+// ── Core Car ─────────────────────────────────────────────────────────────────
 
 export interface Car {
   id: string;
@@ -66,7 +113,7 @@ export interface CarStatusHistoryEntry {
   createdAt: string;
 }
 
-// ── Car Image ────────────────────────────────────────────────────────────────
+// ── Car Image ─────────────────────────────────────────────────────────────────
 
 export interface CarImage {
   id: string;
@@ -82,7 +129,7 @@ export interface CarImage {
   isDeleted: boolean;
 }
 
-// ── Payloads ────────────────────────────────────────────────────────────────
+// ── Payloads ──────────────────────────────────────────────────────────────────
 
 export interface CreateCarPayload {
   manufacturer: string;
@@ -118,7 +165,7 @@ export interface CreateCarPayload {
 
 export type UpdateCarPayload = Partial<CreateCarPayload> & { isActive?: boolean };
 
-// ── API Responses ────────────────────────────────────────────────────────────
+// ── API Responses ─────────────────────────────────────────────────────────────
 
 export interface CarListResponse {
   data: {
@@ -136,7 +183,7 @@ export interface CarImageListResponse {
   data: CarImage[];
 }
 
-// ── Form state ───────────────────────────────────────────────────────────────
+// ── Form state ────────────────────────────────────────────────────────────────
 
 export interface CarFormErrors {
   manufacturer?: string;
@@ -147,3 +194,32 @@ export interface CarFormErrors {
   registrationNumber?: string;
   vinNumber?: string;
 }
+
+// ── Toast ─────────────────────────────────────────────────────────────────────
+
+export interface ToastMsg {
+  type: "success" | "error";
+  message: string;
+}
+//  —  CarFormErrors  ──────────────────────────────────
+
+export interface CarFormErrors {
+  manufacturer?: string;
+  model?: string;
+  year?: string;
+  color?: string;
+  plateNumber?: string;
+  plateLetters?: string;
+  plateType?: string;
+  registrationNumber?: string;
+  vinNumber?: string;
+  branchId?: string;
+  currentStatus?: string;
+  insuranceStatus?: string;
+  registrationExpiryDate?: string;
+  insuranceExpiryDate?: string;
+  inspectionExpiryDate?: string;
+  gpsDeviceId?: string;
+  capacity?: string;
+  weight?: string;
+}

types/driver.ts

@@ -34,6 +34,9 @@ export interface Driver {
   createdAt: string;
   updatedAt: string;
   isDeleted?: boolean;
+  photoUrl?: string | null;
+  nationalPhotoUrl?: string | null;
+  driverCardPhotoUrl?: string | null;
 }
 
 export interface DriverStatusHistoryEntry {

types/trip.ts

@@ -0,0 +1,160 @@
+// types/trip.ts
+// Mirrors the structure of types/driver.ts.
+// Source of truth for endpoint shapes: trip_api_reference.html (/api/v1/trips)
+
+export type TripStatus = "Scheduled" | "InProgress" | "Completed" | "Cancelled";
+
+// ── Embedded summaries returned inside Trip responses ───────────────────────
+// NOTE: Car has no dedicated types/car.ts in this handoff — these summaries
+// are inferred from the response field list in trip_api_reference.html.
+// If a real types/car.ts already exists in the project, prefer importing
+// from there instead of duplicating this shape.
+
+export interface TripDriverSummary {
+  id?: string;
+  name: string;
+  userName?: string | null;
+  email?: string | null;
+  address?: string | null;
+  nationality?: string | null;
+  nationalId?: string | null;
+  gosiNumber?: string | null;
+  phone: string;
+  licenseNumber?: string | null;
+  driverCardNumber?: string | null;
+}
+
+export interface TripCarSummary {
+  id?: string;
+  manufacturer: string;
+  model: string;
+  year?: number | null;
+  color?: string | null;
+  plateNumber: string;
+  plateLetters?: string | null;
+  plateType?: string | null;
+  registrationNumber?: string | null;
+  ownerNationalId?: string | null;
+}
+
+export interface TripBranchSummary {
+  id?: string;
+  name: string;
+}
+
+// ── Core Trip ─────────────────────────────────────────────────────────────
+
+export interface Trip {
+  id: string;
+  tripNumber: string;
+  title: string;
+  startTime?: string | null;
+  endTime?: string | null;
+  status: TripStatus;
+  collectedCount: number;
+  deliveredCount: number;
+  returnedCount: number;
+  totalCashCollected?: number | string | null;
+  notes?: string | null;
+  endReason?: string | null;
+  isDeleted?: boolean;
+  deletedAt?: string | null;
+
+  driverId?: string;
+  carId?: string;
+  branchId?: string | null;
+
+  driver?: TripDriverSummary | null;
+  car?: TripCarSummary | null;
+  branch?: TripBranchSummary | null;
+
+  createdAt: string;
+  updatedAt: string;
+}
+
+// ── Payloads ─────────────────────────────────────────────────────────────────
+
+export interface CreateTripPayload {
+  title: string;
+  driverId: string;
+  carId: string;
+  startTime?: string;
+  endTime?: string;
+  branchId?: string;
+  status?: TripStatus;
+  collectedCount?: number;
+  deliveredCount?: number;
+  returnedCount?: number;
+  totalCashCollected?: number | string;
+  notes?: string;
+  endReason?: string;
+}
+
+export type UpdateTripPayload = Partial<CreateTripPayload> & {
+  /** Reason for changing driverId/carId — recorded in history. Update-only field. */
+  reason?: string;
+};
+
+// ── List query params (GET /trips) ───────────────────────────────────────────
+
+export interface TripListParams {
+  status?: TripStatus;
+  driverId?: string;
+  carId?: string;
+  branchId?: string;
+  /** Searches across tripNumber, status, title, carId, driverId */
+  search?: string;
+  sort?: "createdAt" | "tripNumber" | "status" | "startTime" | "endTime";
+  page?: number;
+  limit?: number;
+}
+
+// ── API Responses ─────────────────────────────────────────────────────────────
+
+export interface TripListResponse {
+  data: {
+    data: Trip[];
+    pagination: { total: number; page: number; limit: number; totalPages: number };
+  };
+}
+
+export interface TripDetailResponse {
+  data: Trip;
+}
+
+export interface TripReportResponse {
+  data: {
+    reportUrl: string;
+  };
+}
+
+// ── Form state ────────────────────────────────────────────────────────────────
+
+export interface TripFormErrors {
+  title?: string;
+  driverId?: string;
+  carId?: string;
+  startTime?: string;
+  endTime?: string;
+  branchId?: string;
+  status?: string;
+  collectedCount?: string;
+  deliveredCount?: string;
+  returnedCount?: string;
+  totalCashCollected?: string;
+  notes?: string;
+  endReason?: string;
+  reason?: string;
+}
+
+// ── Status display config (mirrors DRIVER_STATUS_MAP) ───────────────────────
+
+export const TRIP_STATUS_MAP: Record<
+  TripStatus,
+  { label: string; color: string; bg: string; border: string; dot: string }
+> = {
+  Scheduled:  { label: "مجدولة", color: "#1E40AF", bg: "#EFF6FF", border: "#BFDBFE", dot: "#3B82F6" },
+  InProgress: { label: "جارية",  color: "#92400E", bg: "#FFFBEB", border: "#FDE68A", dot: "#D97706" },
+  Completed:  { label: "مكتملة", color: "#166534", bg: "#DCFCE7", border: "#BBF7D0", dot: "#16A34A" },
+  Cancelled:  { label: "ملغاة",  color: "#991B1B", bg: "#FEF2F2", border: "#FECACA", dot: "#DC2626" },
+};

validations/car.validator.ts

@@ -0,0 +1,236 @@
+import * as yup from "yup";
+
+// ── Enums (mirror backend) ────────────────────────────────────────────────────
+const INSURANCE_STATUSES  = ["Valid", "Expired", "NotInsured"] as const;
+const CAR_STATUSES        = ["Active", "InMaintenance", "InTrip", "Inactive"] as const;
+const IMPOUND_STATUSES    = ["None", "Impounded"] as const;
+const IMAGE_STAGES        = ["BEFORE", "AFTER", "GENERAL"] as const;
+
+// ── Shared date helper ────────────────────────────────────────────────────────
+// <input type="date"> gives "YYYY-MM-DD"; validate as a real date string
+const dateString = yup
+  .string()
+  .test(
+    "valid-date",
+    "تاريخ غير صالح",
+    (val) => {
+      if (!val) return true; // optional
+      return !isNaN(Date.parse(val));
+    },
+  )
+  ;
+
+// ── Create schema ─────────────────────────────────────────────────────────────
+
+export const createCarSchema = yup.object({
+  // Required
+  manufacturer: yup
+    .string()
+    .required("الشركة المصنعة مطلوبة")
+    .min(2, "اسم الشركة يجب أن يكون حرفين على الأقل"),
+
+  model: yup
+    .string()
+    .required("الموديل مطلوب")
+    .min(1, "الموديل مطلوب"),
+
+  year: yup
+    .number()
+    .typeError("سنة الصنع يجب أن تكون رقماً")
+    .required("سنة الصنع مطلوبة")
+    .integer("سنة الصنع يجب أن تكون رقماً صحيحاً")
+    .min(1900, "سنة الصنع غير صالحة")
+    .max(new Date().getFullYear() + 1, "سنة الصنع غير صالحة"),
+
+  plateNumber: yup
+    .string()
+    .required("رقم اللوحة مطلوب")
+    .min(1, "رقم اللوحة مطلوب"),
+
+  plateLetters: yup
+    .string()
+    .required("حروف اللوحة مطلوبة")
+    .min(1, "حروف اللوحة مطلوبة"),
+
+    registrationNumber: yup.string().required("رقم التسجيل مطلوب ").min(4,"رقم التسجيل لا يقل عن 4 ارقام"),
+    
+    vinNumber: yup.string().required(" رقم الهيكل مطلوب").min(4,"رقم الهيكل لا يقل عن 4 ارقام"),
+  // Optional
+  color: yup.string().optional(),
+
+  plateType: yup.string().optional(),
+
+
+
+  ownerNationalId: yup.string().optional(),
+
+  branchId: yup
+    .string()
+    .uuid("معرّف الفرع غير صالح")
+    .optional(),
+
+  currentStatus: yup
+    .mixed<typeof CAR_STATUSES[number]>()
+    .oneOf([...CAR_STATUSES], "حالة المركبة غير صالحة")
+    .optional(),
+
+  insuranceStatus: yup
+    .mixed<typeof INSURANCE_STATUSES[number]>()
+    .oneOf([...INSURANCE_STATUSES], "حالة التأمين غير صالحة")
+    .optional(),
+
+  currentImpoundStatus: yup
+    .mixed<typeof IMPOUND_STATUSES[number]>()
+    .oneOf([...IMPOUND_STATUSES], "حالة الحجز غير صالحة")
+    .optional(),
+
+  registrationExpiryDate: dateString,
+  insuranceExpiryDate:    dateString,
+  inspectionExpiryDate:   dateString,
+  operationCardExpiry:    dateString,
+  registrationIssueDate:  dateString,
+  ownershipStartDate:     dateString,
+  actualUserStartDate:    dateString,
+
+  gpsDeviceId:         yup.string().optional(),
+  operationCardNumber: yup.string().optional(),
+
+  capacity: yup
+    .number()
+    .typeError("الطاقة الاستيعابية يجب أن تكون رقماً")
+    .integer("الطاقة الاستيعابية يجب أن تكون رقماً صحيحاً")
+    .min(0, "الطاقة الاستيعابية يجب أن تكون 0 أو أكثر")
+    .optional(),
+
+  weight: yup
+    .number()
+    .typeError("الوزن يجب أن يكون رقماً")
+    .integer("الوزن يجب أن يكون رقماً صحيحاً")
+    .min(0, "الوزن يجب أن يكون 0 أو أكثر")
+    .optional(),
+});
+
+// ── Update schema (all optional except enums still validated) ─────────────────
+
+export const updateCarSchema = yup.object({
+  manufacturer: yup
+    .string()
+    .min(2, "اسم الشركة يجب أن يكون حرفين على الأقل")
+    .optional(),
+
+  model: yup.string().optional(),
+
+  year: yup
+    .number()
+    .typeError("سنة الصنع يجب أن تكون رقماً")
+    .integer("سنة الصنع يجب أن تكون رقماً صحيحاً")
+    .min(1900, "سنة الصنع غير صالحة")
+    .max(new Date().getFullYear() + 1, "سنة الصنع غير صالحة")
+    .optional(),
+
+  plateNumber:  yup.string().optional(),
+  plateLetters: yup.string().optional(),
+  color:        yup.string().optional(),
+  plateType:    yup.string().optional(),
+
+  registrationNumber: yup.string().optional(),
+  vinNumber:          yup.string().optional(),
+  ownerNationalId:    yup.string().optional(),
+
+  branchId: yup
+    .string()
+    .uuid("معرّف الفرع غير صالح")
+    .optional(),
+
+  currentStatus: yup
+    .mixed<typeof CAR_STATUSES[number]>()
+    .oneOf([...CAR_STATUSES], "حالة المركبة غير صالحة")
+    .optional(),
+
+  insuranceStatus: yup
+    .mixed<typeof INSURANCE_STATUSES[number]>()
+    .oneOf([...INSURANCE_STATUSES], "حالة التأمين غير صالحة")
+    .optional(),
+
+  currentImpoundStatus: yup
+    .mixed<typeof IMPOUND_STATUSES[number]>()
+    .oneOf([...IMPOUND_STATUSES], "حالة الحجز غير صالحة")
+    .optional(),
+
+  isActive: yup.boolean().optional(),
+
+  registrationExpiryDate: dateString,
+  insuranceExpiryDate:    dateString,
+  inspectionExpiryDate:   dateString,
+  operationCardExpiry:    dateString,
+  registrationIssueDate:  dateString,
+  ownershipStartDate:     dateString,
+  actualUserStartDate:    dateString,
+
+  gpsDeviceId:         yup.string().optional(),
+  operationCardNumber: yup.string().optional(),
+
+  capacity: yup
+    .number()
+    .typeError("الطاقة الاستيعابية يجب أن تكون رقماً")
+    .integer("الطاقة الاستيعابية يجب أن تكون رقماً صحيحاً")
+    .min(0, "الطاقة الاستيعابية يجب أن تكون 0 أو أكثر")
+    .optional(),
+
+  weight: yup
+    .number()
+    .typeError("الوزن يجب أن يكون رقماً")
+    .integer("الوزن يجب أن يكون رقماً صحيحاً")
+    .min(0, "الوزن يجب أن يكون 0 أو أكثر")
+    .optional(),
+});
+
+// ── Car image schema (from carImage.validator.js) ─────────────────────────────
+
+export const addCarImagesSchema = yup.object({
+  stage: yup
+    .mixed<typeof IMAGE_STAGES[number]>()
+    .oneOf([...IMAGE_STAGES], "مرحلة الصورة غير صالحة")
+    .optional(),
+
+  maintenanceId: yup
+    .string()
+    .uuid("معرّف الصيانة غير صالح")
+    .optional(),
+});
+
+// ── Infer form error shape ────────────────────────────────────────────────────
+
+export type CarSchemaErrors = Partial<
+  Record<
+    | "manufacturer"
+    | "model"
+    | "year"
+    | "color"
+    | "plateNumber"
+    | "plateLetters"
+    | "plateType"
+    | "registrationNumber"
+    | "vinNumber"
+    | "ownerNationalId"
+    | "branchId"
+    | "currentStatus"
+    | "insuranceStatus"
+    | "currentImpoundStatus"
+    | "isActive"
+    | "registrationExpiryDate"
+    | "insuranceExpiryDate"
+    | "inspectionExpiryDate"
+    | "operationCardExpiry"
+    | "registrationIssueDate"
+    | "ownershipStartDate"
+    | "actualUserStartDate"
+    | "gpsDeviceId"
+    | "operationCardNumber"
+    | "capacity"
+    | "weight"
+    | "stage"
+    | "maintenanceId",
+    string
+  >
+>;

validations/driver.validator.ts

@@ -0,0 +1,207 @@
+import * as yup from "yup"
+import type { NationalIdType, DriverCardType } from "../types/driver";
+
+// ── Create schema ─────────────────────────────────────────────────────────────
+
+export const createDriverSchema = yup.object({
+  // Required
+  name: yup
+    .string()
+    .required("الاسم مطلوب")
+    .min(2, "الاسم يجب أن يكون حرفين على الأقل"),
+
+  phone: yup
+    .string()
+    .required("رقم الجوال مطلوب")
+    .matches(
+      /^(\+966|966|0)?5[0-9]{8}$/,
+      "رقم الجوال غير صالح — يجب أن يكون رقم سعودي صحيح",
+    ),
+
+  // Optional
+  email: yup
+    .string()
+    .email("البريد الإلكتروني غير صالح")
+    .optional(),
+
+  address: yup
+    .string()
+    .min(5, "العنوان يجب أن يكون 5 أحرف على الأقل")
+    .optional(),
+
+  nationality: yup
+    .string()
+    .min(5, "الجنسية يجب أن تكون 5 أحرف على الأقل")
+    .optional(),
+
+  nationalIdType: yup
+    .mixed<NationalIdType>()
+    .oneOf(["NationalID", "Iqama", "Passport"], "نوع الهوية غير صالح")
+    .optional(),
+
+  gosiNumber: yup.string().optional(),
+
+  licenseNumber: yup.string().optional(),
+
+  licenseType: yup.string().optional(),
+
+  licenseExpiry: yup
+    .string()
+    .test(
+      "not-in-past",
+      "تاريخ انتهاء الرخصة يجب أن يكون اليوم أو في المستقبل",
+      (val) => {
+        if (!val) return true; // optional
+        return new Date(val) >= new Date(new Date().toDateString());
+      },
+    )
+    .optional(),
+
+  driverCardNumber: yup.string().optional(),
+
+  driverCardType: yup
+    .mixed<DriverCardType>()
+    .oneOf(
+      ["Temporary", "Seasonal", "Annual", "Restricted"],
+      "نوع بطاقة السائق غير صالح",
+    )
+    .optional(),
+
+  driverCardExpiry: yup
+    .string()
+    .test(
+      "not-in-past",
+      "تاريخ انتهاء بطاقة السائق يجب أن يكون اليوم أو في المستقبل",
+      (val) => {
+        if (!val) return true;
+        return new Date(val) >= new Date(new Date().toDateString());
+      },
+    )
+    .optional(),
+
+  driverType: yup.string().optional(),
+
+  branchId: yup
+    .string()
+    .uuid("معرّف الفرع غير صالح")
+    .optional(),
+});
+
+// ── Update schema (same rules, all optional except they don't change) ─────────
+
+export const updateDriverSchema = yup.object({
+  name: yup
+    .string()
+    .min(2, "الاسم يجب أن يكون حرفين على الأقل")
+    .optional(),
+
+  phone: yup
+    .string()
+    .matches(
+      /^(\+966|966|0)?5[0-9]{8}$/,
+      "رقم الجوال غير صالح — يجب أن يكون رقم سعودي صحيح",
+    )
+    .optional(),
+
+  email: yup
+    .string()
+    .email("البريد الإلكتروني غير صالح")
+    .optional(),
+
+  address: yup
+    .string()
+    .min(5, "العنوان يجب أن يكون 5 أحرف على الأقل")
+    .optional(),
+
+  nationality: yup
+    .string()
+    .min(5, "الجنسية يجب أن تكون 5 أحرف على الأقل")
+    .optional(),
+
+  nationalIdType: yup
+    .mixed<NationalIdType>()
+    .oneOf(["NationalID", "Iqama", "Passport"], "نوع الهوية غير صالح")
+    .optional(),
+
+  gosiNumber: yup.string().optional(),
+
+  licenseNumber: yup.string().optional(),
+
+  licenseType: yup.string().optional(),
+
+  licenseExpiry: yup
+    .string()
+    .test(
+      "not-in-past",
+      "تاريخ انتهاء الرخصة يجب أن يكون اليوم أو في المستقبل",
+      (val) => {
+        if (!val) return true;
+        return new Date(val) >= new Date(new Date().toDateString());
+      },
+    )
+    .optional(),
+
+  driverCardNumber: yup.string().optional(),
+
+  driverCardType: yup
+    .mixed<DriverCardType>()
+    .oneOf(
+      ["Temporary", "Seasonal", "Annual", "Restricted"],
+      "نوع بطاقة السائق غير صالح",
+    )
+    .optional(),
+
+  driverCardExpiry: yup
+    .string()
+    .test(
+      "not-in-past",
+      "تاريخ انتهاء بطاقة السائق يجب أن يكون اليوم أو في المستقبل",
+      (val) => {
+        if (!val) return true;
+        return new Date(val) >= new Date(new Date().toDateString());
+      },
+    )
+    .optional(),
+
+  driverType: yup.string().optional(),
+
+  branchId: yup
+    .string()
+    .uuid("معرّف الفرع غير صالح")
+    .optional(),
+
+  status: yup
+    .mixed<"Active" | "Inactive" | "InTrip" | "Suspended">()
+    .oneOf(
+      ["Active", "Inactive", "InTrip", "Suspended"],
+      "حالة السائق غير صالحة",
+    )
+    .optional(),
+
+  reason: yup.string().optional(),
+});
+
+// ── Infer form error shape ────────────────────────────────────────────────────
+
+export type DriverSchemaErrors = Partial<
+  Record<
+    | "name"
+    | "phone"
+    | "email"
+    | "address"
+    | "nationality"
+    | "nationalIdType"
+    | "gosiNumber"
+    | "licenseNumber"
+    | "licenseType"
+    | "licenseExpiry"
+    | "driverCardNumber"
+    | "driverCardType"
+    | "driverCardExpiry"
+    | "driverType"
+    | "branchId"
+    | "status"
+    | "reason",
+    string
+  >
+>;

validations/trip.validator.ts

@@ -0,0 +1,194 @@
+import * as yup from "yup";
+import type { TripStatus } from "@/types/trip";
+
+const TRIP_STATUSES: TripStatus[] = [
+  "Scheduled",
+  "InProgress",
+  "Completed",
+  "Cancelled",
+];
+
+// NOTE: Unlike driver_validator.ts, there is no actual backend trip validator
+// file in this handoff. The rules below come from trip_api_reference.html
+// (marked "// doc") plus a few sensible defaults that are NOT explicitly
+// stated in the reference (marked "// inferred"). Verify the "inferred" ones
+// against the real backend validator before relying on them.
+
+// ── Create schema ─────────────────────────────────────────────────────────────
+
+export const createTripSchema = yup.object({
+  // Required
+  title: yup
+    .string()
+    .required("عنوان الرحلة مطلوب")
+    .min(3, "عنوان الرحلة يجب أن يكون 3 أحرف على الأقل"), // doc
+
+  driverId: yup
+    .string()
+    .required("السائق مطلوب")
+    .uuid("معرّف السائق غير صالح"), // doc: UUID, driver must be status=Active (enforced server-side)
+
+  carId: yup
+    .string()
+    .required("السيارة مطلوبة")
+    .uuid("معرّف السيارة غير صالح"), // doc: UUID, car must be status=Active (enforced server-side)
+
+  // Optional
+  startTime: yup.string().optional(), // doc: ISO 8601, default now()
+
+  endTime: yup
+    .string()
+    .optional()
+    .test(
+      "after-start",
+      "وقت الانتهاء يجب أن يكون بعد وقت البدء",
+      function (val) {
+        if (!val) return true;
+        const { startTime } = this.parent;
+        if (!startTime) return true;
+        return new Date(val) > new Date(startTime); // inferred
+      },
+    ),
+
+  branchId: yup.string().uuid("معرّف الفرع غير صالح").optional(), // doc
+
+  status: yup
+    .mixed<TripStatus>()
+    .oneOf(TRIP_STATUSES, "حالة الرحلة غير صالحة")
+    .optional(), // doc: default Scheduled
+
+  collectedCount: yup
+    .number()
+    .typeError("القيمة يجب أن تكون رقم")
+    .integer("القيمة يجب أن تكون رقم صحيح")
+    .min(0, "القيمة لا يمكن أن تكون سالبة") // inferred
+    .optional(),
+
+  deliveredCount: yup
+    .number()
+    .typeError("القيمة يجب أن تكون رقم")
+    .integer("القيمة يجب أن تكون رقم صحيح")
+    .min(0, "القيمة لا يمكن أن تكون سالبة") // inferred
+    .optional(),
+
+  returnedCount: yup
+    .number()
+    .typeError("القيمة يجب أن تكون رقم")
+    .integer("القيمة يجب أن تكون رقم صحيح")
+    .min(0, "القيمة لا يمكن أن تكون سالبة") // inferred
+    .optional(),
+
+  totalCashCollected: yup
+    .number()
+    .typeError("القيمة يجب أن تكون رقم")
+    .min(0, "القيمة لا يمكن أن تكون سالبة") // inferred
+    .optional(), // doc: number | string -> Decimal server-side
+
+  notes: yup
+    .string()
+    .min(2, "الملاحظات يجب أن تكون حرفين على الأقل") // doc
+    .optional(),
+
+  endReason: yup
+    .string()
+    .min(2, "سبب الانتهاء يجب أن يكون حرفين على الأقل") // doc
+    .optional(),
+});
+
+// ── Update schema (same rules, all optional + reason) ─────────────────────────
+
+export const updateTripSchema = yup.object({
+  title: yup
+    .string()
+    .min(3, "عنوان الرحلة يجب أن يكون 3 أحرف على الأقل")
+    .optional(),
+
+  driverId: yup.string().uuid("معرّف السائق غير صالح").optional(), // doc: must be Active
+
+  carId: yup.string().uuid("معرّف السيارة غير صالح").optional(), // doc: must be Active
+
+  status: yup
+    .mixed<TripStatus>()
+    .oneOf(TRIP_STATUSES, "حالة الرحلة غير صالحة")
+    .optional(),
+
+  startTime: yup.string().optional(),
+
+  endTime: yup
+    .string()
+    .optional()
+    .test(
+      "after-start",
+      "وقت الانتهاء يجب أن يكون بعد وقت البدء",
+      function (val) {
+        if (!val) return true;
+        const { startTime } = this.parent;
+        if (!startTime) return true;
+        return new Date(val) > new Date(startTime); // inferred
+      },
+    ),
+
+  branchId: yup.string().uuid("معرّف الفرع غير صالح").optional(),
+
+  collectedCount: yup
+    .number()
+    .typeError("القيمة يجب أن تكون رقم")
+    .integer("القيمة يجب أن تكون رقم صحيح")
+    .min(0, "القيمة لا يمكن أن تكون سالبة")
+    .optional(),
+
+  deliveredCount: yup
+    .number()
+    .typeError("القيمة يجب أن تكون رقم")
+    .integer("القيمة يجب أن تكون رقم صحيح")
+    .min(0, "القيمة لا يمكن أن تكون سالبة")
+    .optional(),
+
+  returnedCount: yup
+    .number()
+    .typeError("القيمة يجب أن تكون رقم")
+    .integer("القيمة يجب أن تكون رقم صحيح")
+    .min(0, "القيمة لا يمكن أن تكون سالبة")
+    .optional(),
+
+  totalCashCollected: yup
+    .number()
+    .typeError("القيمة يجب أن تكون رقم")
+    .min(0, "القيمة لا يمكن أن تكون سالبة")
+    .optional(),
+
+  notes: yup
+    .string()
+    .min(2, "الملاحظات يجب أن تكون حرفين على الأقل")
+    .optional(),
+
+  endReason: yup
+    .string()
+    .min(2, "سبب الانتهاء يجب أن يكون حرفين على الأقل")
+    .optional(),
+
+  // Update-only: reason for reassigning driver/car (recorded in history)
+  reason: yup.string().optional(), // doc: no explicit min length stated
+});
+
+// ── Infer form error shape ────────────────────────────────────────────────────
+
+export type TripSchemaErrors = Partial<
+  Record<
+    | "title"
+    | "driverId"
+    | "carId"
+    | "status"
+    | "startTime"
+    | "endTime"
+    | "branchId"
+    | "collectedCount"
+    | "deliveredCount"
+    | "returnedCount"
+    | "totalCashCollected"
+    | "notes"
+    | "endReason"
+    | "reason",
+    string
+  >
+>;

validations/user.validator.ts

@@ -0,0 +1,90 @@
+import * as yup from "yup";
+
+// ── Phone regex — same as backend ─────────────────────────────────────────────
+const SAUDI_PHONE_RE = /^(\+966|966|0)?5[0-9]{8}$/;
+
+// ── Create schema ─────────────────────────────────────────────────────────────
+
+export const createUserSchema = yup.object({
+  name: yup
+    .string()
+    .required("الاسم الكامل مطلوب")
+    .min(2, "الاسم يجب أن يكون حرفين على الأقل"),
+
+  phone: yup
+    .string()
+    .required("رقم الهاتف مطلوب")
+    .matches(SAUDI_PHONE_RE, "رقم الجوال غير صالح — يجب أن يكون رقم سعودي صحيح"),
+
+  email: yup
+    .string()
+    .email("البريد الإلكتروني غير صالح")
+    .optional(),
+
+  password: yup
+    .string()
+    .required("كلمة المرور مطلوبة")
+    .min(8, "كلمة المرور يجب أن تكون 8 أحرف على الأقل"),
+
+  roleId: yup
+    .string()
+    .required("الدور مطلوب")
+    .uuid("معرّف الدور غير صالح"),
+
+  branchId: yup
+    .string()
+    .uuid("معرّف الفرع غير صالح")
+    .optional(),
+});
+
+// ── Update schema ─────────────────────────────────────────────────────────────
+
+export const updateUserSchema = yup.object({
+  name: yup
+    .string()
+    .min(2, "الاسم يجب أن يكون حرفين على الأقل")
+    .optional(),
+
+  phone: yup
+    .string()
+    .matches(SAUDI_PHONE_RE, "رقم الجوال غير صالح — يجب أن يكون رقم سعودي صحيح")
+    .optional(),
+
+  email: yup
+    .string()
+    .email("البريد الإلكتروني غير صالح")
+    .optional(),
+
+  // password is optional on update — only sent if user wants to change it
+  password: yup
+    .string()
+    .min(8, "كلمة المرور يجب أن تكون 8 أحرف على الأقل")
+    .optional(),
+
+  isActive: yup.boolean().optional(),
+
+  roleId: yup
+    .string()
+    .uuid("معرّف الدور غير صالح")
+    .optional(),
+
+  branchId: yup
+    .string()
+    .uuid("معرّف الفرع غير صالح")
+    .optional(),
+});
+
+// ── Infer form error shape ────────────────────────────────────────────────────
+
+export type UserSchemaErrors = Partial<
+  Record<
+    | "name"
+    | "phone"
+    | "email"
+    | "password"
+    | "roleId"
+    | "branchId"
+    | "isActive",
+    string
+  >
+>;