From db64b79fe338fe485d8cbfb8705e0a290a7d951b Mon Sep 17 00:00:00 2001
From: m7amedez5511 <m7amedez5511@gmail.com>
Date: Tue, 23 Jun 2026 15:54:07 +0300
Subject: [PATCH] first action update user pages . 2-update driver pages [fixed
 image display and notyfi] 3-update car pages [fixed image] 4-build tripe
 pages crud 5-build some role pages 6-build audit page 7-update ui compounants
 8-update saidebar and topbar 9-cheange view to be ar view 10-cheange
 stractcher to be app,src 11-add validation layer by yup 12-add api
 image-proxy to broke image corse bloken

---
 Components/Trip/Tripformmodal.tsx             |  497 ----
 Components/Trip_Report/Tripreportpanel.tsx    |   97 -
 Components/UI/ModalProps.tsx                  |   54 -
 Components/UI/PageHeader.tsx                  |   29 -
 Components/UI/Select.tsx                      |   52 -
 Components/UI/Textarea.tsx                    |   41 -
 app/api/clear-cookie/route.ts                 |    2 +-
 app/api/proxy-image/[...imagePath]/route.ts   |   35 +
 app/api/proxy/[...path]/route.ts              |   46 +-
 app/components/layout/Navbar.tsx              |   21 +-
 app/components/layout/Sidebar.tsx             |  184 +-
 app/components/layout/Topbar.tsx              |   23 +-
 app/dashboard/audit/page.tsx                  |  223 +-
 app/dashboard/branches/page.tsx               |  494 +++-
 app/dashboard/cars/page.tsx                   |   14 +-
 .../clients/[clientId]/addresses/page.tsx     |   16 +-
 app/dashboard/clients/page.tsx                |   14 +-
 app/dashboard/drivers/[driverId]/page.tsx     |  565 ++--
 app/dashboard/drivers/page.tsx                |  151 +-
 app/dashboard/layout.tsx                      |   17 +-
 app/dashboard/orders/page.tsx                 |    6 +-
 app/dashboard/page.tsx                        |   93 +-
 app/dashboard/role-permission/page.tsx        |  238 ++
 app/dashboard/roles/page.tsx                  |  144 +-
 app/dashboard/trips/[tripId]/page.tsx         |  650 ++---
 app/dashboard/trips/page.tsx                  |  376 ++-
 app/dashboard/users/page.tsx                  |   19 +-
 app/forbidden/page.tsx                        |   65 +-
 app/globals.css                               |   18 +-
 app/layout.tsx                                |   57 +-
 app/login/page.tsx                            |   10 +-
 app/not_found/page.tsx                        |   85 +-
 app/page.tsx                                  |    2 +-
 hooks/useDriver.ts                            |  152 --
 lib/formatters.ts                             |   20 -
 lib/order-status.ts                           |   28 -
 next.config.ts                                |   12 +-
 package-lock.json                             | 2301 ++++++++++++++++-
 package.json                                  |    1 +
 services/driver.service.ts                    |  154 --
 services/index.ts                             |    7 -
 .../Components}/Admen/admen.tsx               |    0
 .../Components}/Client/Addressformmodal.tsx   |    2 +-
 .../Components}/Client/ClientAddressForm.tsx  |    2 +-
 .../Components}/Client/ClientForm.tsx         |    2 +-
 .../Components}/Client/Clientformmodal.tsx    |    2 +-
 .../Components}/Client/Clienttable.tsx        |    2 +-
 .../Components}/Client/Deleteconfirmmodal.tsx |    2 +-
 .../Components}/Client/Toast.tsx              |    2 +-
 src/Components/Client/index.ts                |    5 +
 .../Client_Adress/clientAdress.tsx            |    0
 .../Components}/Driver/DriverDeleteModal.tsx  |    2 +-
 .../Components}/Driver/DriverDetailPanel.tsx  |  208 +-
 .../Components}/Driver/DriverFormModal.tsx    |   38 +-
 src/Components/Driver/DriverPhotos.tsx        |   84 +
 src/Components/Driver/index.ts                |    4 +
 .../Driver_Report/driverReport.tsx            |    4 +-
 {Components => src/Components}/Home/home.tsx  |    0
 .../Components}/Order/order.tsx               |   12 +-
 .../Components}/Trip/Tripdeletemodal.tsx      |    2 +-
 src/Components/Trip/Tripformmodal.tsx         |  732 ++++++
 src/Components/Trip/index.ts                  |    2 +
 .../Trip_Report/Tripreportpanel.tsx           |  120 +
 {Components => src/Components}/UI/Alert.tsx   |    2 +-
 {Components => src/Components}/UI/Badge.tsx   |    0
 {Components => src/Components}/UI/Button.tsx  |    2 +-
 .../Components}/UI/ConfirmDialog.tsx          |   14 +-
 .../Components}/UI/EmptyState.tsx             |    0
 {Components => src/Components}/UI/Input.tsx   |    2 +-
 src/Components/UI/ModalProps.tsx              |  130 +
 src/Components/UI/PageHeader.tsx              |   60 +
 src/Components/UI/Select.tsx                  |   54 +
 {Components => src/Components}/UI/Spinner.tsx |    2 +-
 src/Components/UI/Textarea.tsx                |   64 +
 src/Components/UI/Toast.tsx                   |  101 +
 {Components => src/Components}/UI/index.ts    |   10 +-
 .../Components}/User/DeleteConfirmModal.tsx   |    2 +-
 {Components => src/Components}/User/Toast.tsx |    2 +-
 .../Components}/User/UserDetailModal.tsx      |    6 +-
 .../Components}/User/UserFormModal.tsx        |    8 +-
 .../Components}/User/UserTable.tsx            |    2 +-
 src/Components/User/index.ts                  |    5 +
 .../Components}/car/CarDeleteModal.tsx        |    5 +-
 .../Components}/car/CarDetailPanel.tsx        |    8 +-
 .../Components}/car/CarFormModal.tsx          |   11 +-
 .../Components}/car/CarImageGallery.tsx       |    6 +-
 src/Components/car/index.ts                   |    4 +
 src/Components/role/DeleteRoleModal.tsx       |  130 +
 src/Components/role/RoleDetailModal.tsx       |  375 +++
 src/Components/role/RoleFormModal.tsx         |  510 ++++
 src/Components/role/RoleTable.tsx             |  300 +++
 src/Components/role/RoleToast.tsx             |   57 +
 src/Components/role/index.ts                  |    5 +
 {hooks => src/hooks}/useCars.ts               |    9 +-
 {hooks => src/hooks}/useClientAddresses.ts    |    6 +-
 src/hooks/useClientOrders.ts                  |   45 +
 {hooks => src/hooks}/useClients.ts            |    6 +-
 {hooks => src/hooks}/useDashboardSummary.ts   |    6 +-
 src/hooks/useDriver.ts                        |  211 ++
 {hooks => src/hooks}/useOrder.ts              |    4 +-
 src/hooks/useRole.ts                          |  284 ++
 src/hooks/useTrip.ts                          |  227 ++
 {hooks => src/hooks}/useUser.ts               |   21 +-
 {lib => src/lib}/api.ts                       |    0
 {lib => src/lib}/auth.ts                      |   44 +-
 src/lib/formatters.ts                         |   41 +
 src/lib/order-status.ts                       |   42 +
 {lib => src/lib}/session.ts                   |    4 +-
 {lib => src/lib}/utils.ts                     |    0
 {middleware => src/middleware}/middleware.ts  |    0
 {services => src/services}/api.ts             |    2 +-
 {services => src/services}/auth.service.ts    |    2 +-
 {services => src/services}/car.service.ts     |    2 +-
 {services => src/services}/client.service.ts  |    4 +-
 .../services}/clientAddress.service.ts        |    3 +-
 .../services}/dashboard.service.ts            |    2 +-
 src/services/driver.service.ts                |  273 ++
 src/services/index.ts                         |   11 +
 {services => src/services}/order.service.ts   |    2 +-
 src/services/role.service.ts                  |   95 +
 {services => src/services}/trip.service.ts    |   43 +-
 {services => src/services}/user.service.ts    |    6 +-
 {styles => src/styles}/tokens.css             |   54 +-
 {types => src/types}/auth.ts                  |    0
 {types => src/types}/branch.ts                |    0
 {types => src/types}/car.ts                   |    2 +-
 {types => src/types}/client.ts                |    0
 {types => src/types}/dashboard.ts             |    0
 {types => src/types}/driver.ts                |    0
 {types => src/types}/order.ts                 |    0
 {types => src/types}/role.ts                  |    0
 {types => src/types}/trip.ts                  |    4 -
 {types => src/types}/user.ts                  |    0
 src/utils/helperFun.ts                        |   51 +
 {utils => src/utils}/logo.tsx                 |    0
 .../validations}/car.validator.ts             |    0
 .../validations}/driver.validator.ts          |    2 +-
 .../validations}/trip.validator.ts            |    6 +-
 .../validations}/user.validator.ts            |    0
 utils/helperFun.ts                            |   84 -
 140 files changed, 9266 insertions(+), 2449 deletions(-)
 delete mode 100644 Components/Trip/Tripformmodal.tsx
 delete mode 100644 Components/Trip_Report/Tripreportpanel.tsx
 delete mode 100644 Components/UI/ModalProps.tsx
 delete mode 100644 Components/UI/PageHeader.tsx
 delete mode 100644 Components/UI/Select.tsx
 delete mode 100644 Components/UI/Textarea.tsx
 create mode 100644 app/api/proxy-image/[...imagePath]/route.ts
 create mode 100644 app/dashboard/role-permission/page.tsx
 delete mode 100644 hooks/useDriver.ts
 delete mode 100644 lib/formatters.ts
 delete mode 100644 lib/order-status.ts
 delete mode 100644 services/driver.service.ts
 delete mode 100644 services/index.ts
 rename {Components => src/Components}/Admen/admen.tsx (100%)
 rename {Components => src/Components}/Client/Addressformmodal.tsx (99%)
 rename {Components => src/Components}/Client/ClientAddressForm.tsx (98%)
 rename {Components => src/Components}/Client/ClientForm.tsx (98%)
 rename {Components => src/Components}/Client/Clientformmodal.tsx (99%)
 rename {Components => src/Components}/Client/Clienttable.tsx (99%)
 rename {Components => src/Components}/Client/Deleteconfirmmodal.tsx (98%)
 rename {Components => src/Components}/Client/Toast.tsx (96%)
 create mode 100644 src/Components/Client/index.ts
 rename {Components => src/Components}/Client_Adress/clientAdress.tsx (100%)
 rename {Components => src/Components}/Driver/DriverDeleteModal.tsx (98%)
 rename {Components => src/Components}/Driver/DriverDetailPanel.tsx (77%)
 rename {Components => src/Components}/Driver/DriverFormModal.tsx (95%)
 create mode 100644 src/Components/Driver/DriverPhotos.tsx
 create mode 100644 src/Components/Driver/index.ts
 rename {Components => src/Components}/Driver_Report/driverReport.tsx (97%)
 rename {Components => src/Components}/Home/home.tsx (100%)
 rename {Components => src/Components}/Order/order.tsx (95%)
 rename {Components => src/Components}/Trip/Tripdeletemodal.tsx (98%)
 create mode 100644 src/Components/Trip/Tripformmodal.tsx
 create mode 100644 src/Components/Trip/index.ts
 create mode 100644 src/Components/Trip_Report/Tripreportpanel.tsx
 rename {Components => src/Components}/UI/Alert.tsx (98%)
 rename {Components => src/Components}/UI/Badge.tsx (100%)
 rename {Components => src/Components}/UI/Button.tsx (98%)
 rename {Components => src/Components}/UI/ConfirmDialog.tsx (70%)
 rename {Components => src/Components}/UI/EmptyState.tsx (100%)
 rename {Components => src/Components}/UI/Input.tsx (98%)
 create mode 100644 src/Components/UI/ModalProps.tsx
 create mode 100644 src/Components/UI/PageHeader.tsx
 create mode 100644 src/Components/UI/Select.tsx
 rename {Components => src/Components}/UI/Spinner.tsx (98%)
 create mode 100644 src/Components/UI/Textarea.tsx
 create mode 100644 src/Components/UI/Toast.tsx
 rename {Components => src/Components}/UI/index.ts (59%)
 rename {Components => src/Components}/User/DeleteConfirmModal.tsx (98%)
 rename {Components => src/Components}/User/Toast.tsx (96%)
 rename {Components => src/Components}/User/UserDetailModal.tsx (98%)
 rename {Components => src/Components}/User/UserFormModal.tsx (97%)
 rename {Components => src/Components}/User/UserTable.tsx (99%)
 create mode 100644 src/Components/User/index.ts
 rename {Components => src/Components}/car/CarDeleteModal.tsx (96%)
 rename {Components => src/Components}/car/CarDetailPanel.tsx (97%)
 rename {Components => src/Components}/car/CarFormModal.tsx (98%)
 rename {Components => src/Components}/car/CarImageGallery.tsx (98%)
 create mode 100644 src/Components/car/index.ts
 create mode 100644 src/Components/role/DeleteRoleModal.tsx
 create mode 100644 src/Components/role/RoleDetailModal.tsx
 create mode 100644 src/Components/role/RoleFormModal.tsx
 create mode 100644 src/Components/role/RoleTable.tsx
 create mode 100644 src/Components/role/RoleToast.tsx
 create mode 100644 src/Components/role/index.ts
 rename {hooks => src/hooks}/useCars.ts (97%)
 rename {hooks => src/hooks}/useClientAddresses.ts (97%)
 create mode 100644 src/hooks/useClientOrders.ts
 rename {hooks => src/hooks}/useClients.ts (97%)
 rename {hooks => src/hooks}/useDashboardSummary.ts (85%)
 create mode 100644 src/hooks/useDriver.ts
 rename {hooks => src/hooks}/useOrder.ts (98%)
 create mode 100644 src/hooks/useRole.ts
 create mode 100644 src/hooks/useTrip.ts
 rename {hooks => src/hooks}/useUser.ts (90%)
 rename {lib => src/lib}/api.ts (100%)
 rename {lib => src/lib}/auth.ts (58%)
 create mode 100644 src/lib/formatters.ts
 create mode 100644 src/lib/order-status.ts
 rename {lib => src/lib}/session.ts (90%)
 rename {lib => src/lib}/utils.ts (100%)
 rename {middleware => src/middleware}/middleware.ts (100%)
 rename {services => src/services}/api.ts (98%)
 rename {services => src/services}/auth.service.ts (92%)
 rename {services => src/services}/car.service.ts (99%)
 rename {services => src/services}/client.service.ts (93%)
 rename {services => src/services}/clientAddress.service.ts (93%)
 rename {services => src/services}/dashboard.service.ts (69%)
 create mode 100644 src/services/driver.service.ts
 create mode 100644 src/services/index.ts
 rename {services => src/services}/order.service.ts (97%)
 create mode 100644 src/services/role.service.ts
 rename {services => src/services}/trip.service.ts (73%)
 rename {services => src/services}/user.service.ts (93%)
 rename {styles => src/styles}/tokens.css (60%)
 rename {types => src/types}/auth.ts (100%)
 rename {types => src/types}/branch.ts (100%)
 rename {types => src/types}/car.ts (99%)
 rename {types => src/types}/client.ts (100%)
 rename {types => src/types}/dashboard.ts (100%)
 rename {types => src/types}/driver.ts (100%)
 rename {types => src/types}/order.ts (100%)
 rename {types => src/types}/role.ts (100%)
 rename {types => src/types}/trip.ts (97%)
 rename {types => src/types}/user.ts (100%)
 create mode 100644 src/utils/helperFun.ts
 rename {utils => src/utils}/logo.tsx (100%)
 rename {validations => src/validations}/car.validator.ts (100%)
 rename {validations => src/validations}/driver.validator.ts (98%)
 rename {validations => src/validations}/trip.validator.ts (97%)
 rename {validations => src/validations}/user.validator.ts (100%)
 delete mode 100644 utils/helperFun.ts

diff --git a/Components/Trip/Tripformmodal.tsx b/Components/Trip/Tripformmodal.tsx
deleted file mode 100644
index 7f45026..0000000
--- a/Components/Trip/Tripformmodal.tsx
+++ /dev/null
@@ -1,497 +0,0 @@
-"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>
-  );
-}
\ No newline at end of file
diff --git a/Components/Trip_Report/Tripreportpanel.tsx b/Components/Trip_Report/Tripreportpanel.tsx
deleted file mode 100644
index a0598bb..0000000
--- a/Components/Trip_Report/Tripreportpanel.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-"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>
-  );
-}
\ No newline at end of file
diff --git a/Components/UI/ModalProps.tsx b/Components/UI/ModalProps.tsx
deleted file mode 100644
index 7bb5ad3..0000000
--- a/Components/UI/ModalProps.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-interface ModalProps {
-  open: boolean;
-  title: string;
-  onClose: () => void;
-  children: React.ReactNode;
-  /** Footer slot – typically action buttons */
-  footer?: React.ReactNode;
-  size?: "sm" | "md" | "lg";
-}
-
-const MODAL_SIZES = { sm: "max-w-sm", md: "max-w-lg", lg: "max-w-2xl" };
-
-export function Modal({ open, title, onClose, children, footer, size = "md" }: ModalProps) {
-  if (!open) return null;
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-      {/* Backdrop */}
-      <div
-        className="absolute inset-0 bg-black/40 backdrop-blur-sm"
-        onClick={onClose}
-        aria-hidden="true"
-      />
-      {/* Panel */}
-      <div
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="modal-title"
-        className={`relative w-full ${MODAL_SIZES[size]} rounded-2xl bg-white shadow-2xl flex flex-col max-h-[90vh]`}
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between border-b border-slate-100 px-6 py-4">
-          <h2 id="modal-title" className="text-base font-semibold text-slate-800">
-            {title}
-          </h2>
-          <button
-            onClick={onClose}
-            aria-label="Close"
-            className="text-slate-400 hover:text-slate-600 transition-colors text-xl leading-none"
-          >
-            ×
-          </button>
-        </div>
-        {/* Body */}
-        <div className="flex-1 overflow-y-auto px-6 py-5">{children}</div>
-        {/* Footer */}
-        {footer && (
-          <div className="flex justify-end gap-2 border-t border-slate-100 px-6 py-4">
-            {footer}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/Components/UI/PageHeader.tsx b/Components/UI/PageHeader.tsx
deleted file mode 100644
index bd7e4b6..0000000
--- a/Components/UI/PageHeader.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-interface PageHeaderProps {
-  title: string;
-  description?: string;
-  action?: React.ReactNode;
-  backHref?: string;
-  backLabel?: string;
-}
-
-export function PageHeader({ title, description, action, backHref, backLabel }: PageHeaderProps) {
-  return (
-    <div className="mb-6 flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between">
-      <div>
-        {backHref && (
-          <a
-            href={backHref}
-            className="mb-2 inline-flex items-center gap-1 text-xs text-indigo-600 hover:text-indigo-800 font-medium"
-          >
-            ← {backLabel ?? "Back"}
-          </a>
-        )}
-        <h1 className="text-2xl font-bold tracking-tight text-slate-900">{title}</h1>
-        {description && (
-          <p className="mt-1 text-sm text-slate-500">{description}</p>
-        )}
-      </div>
-      {action && <div className="mt-3 sm:mt-0 shrink-0">{action}</div>}
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/Components/UI/Select.tsx b/Components/UI/Select.tsx
deleted file mode 100644
index 2dddf6d..0000000
--- a/Components/UI/Select.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { forwardRef, SelectHTMLAttributes } from "react";
-
-
-
-
-// ─── Select ──────────────────────────────────────────────────────────────────
-
-interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
-  label?: string;
-  error?: string;
-  wrapperClassName?: string;
-  children: React.ReactNode;
-}
-
-export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
-  { label, error, wrapperClassName = "", className = "", id, children, ...rest },
-  ref
-) {
-  const selectId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
-  return (
-    <div className={`flex flex-col gap-1 ${wrapperClassName}`}>
-      {label && (
-        <label
-          htmlFor={selectId}
-          className="text-xs font-semibold uppercase tracking-wide text-slate-500"
-        >
-          {label}
-        </label>
-      )}
-      <select
-        ref={ref}
-        id={selectId}
-        className={`
-          w-full rounded-lg border bg-white px-3 py-2 text-sm text-slate-800
-          focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500
-          disabled:bg-slate-50 disabled:cursor-not-allowed
-          ${error ? "border-red-400" : "border-slate-300"}
-          ${className}
-        `}
-        {...rest}
-      >
-        {children}
-      </select>
-      {error && <p className="text-xs text-red-600">{error}</p>}
-    </div>
-  );
-});
-
-
-
-
-
diff --git a/Components/UI/Textarea.tsx b/Components/UI/Textarea.tsx
deleted file mode 100644
index c95f263..0000000
--- a/Components/UI/Textarea.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { forwardRef } from "react";
-
-interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-  label?: string;
-  error?: string;
-  wrapperClassName?: string;
-}
-
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
-  { label, error, wrapperClassName = "", className = "", id, ...rest },
-  ref
-) {
-  const taId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
-  return (
-    <div className={`flex flex-col gap-1 ${wrapperClassName}`}>
-      {label && (
-        <label
-          htmlFor={taId}
-          className="text-xs font-semibold uppercase tracking-wide text-slate-500"
-        >
-          {label}
-        </label>
-      )}
-      <textarea
-        ref={ref}
-        id={taId}
-        rows={3}
-        className={`
-          w-full rounded-lg border bg-white px-3 py-2 text-sm text-slate-800
-          placeholder:text-slate-400 resize-none
-          focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500
-          disabled:bg-slate-50 disabled:text-slate-400
-          ${error ? "border-red-400" : "border-slate-300"}
-          ${className}
-        `}
-        {...rest}
-      />
-      {error && <p className="text-xs text-red-600">{error}</p>}
-    </div>
-  );
-});
\ No newline at end of file
diff --git a/app/api/clear-cookie/route.ts b/app/api/clear-cookie/route.ts
index 31c6f15..6df2803 100644
--- a/app/api/clear-cookie/route.ts
+++ b/app/api/clear-cookie/route.ts
@@ -1,4 +1,4 @@
-// app/api/auth/clear-cookie/route.ts
+
 // Clears the HttpOnly auth cookie on logout.
 // Only the server can delete an HttpOnly cookie.
 
diff --git a/app/api/proxy-image/[...imagePath]/route.ts b/app/api/proxy-image/[...imagePath]/route.ts
new file mode 100644
index 0000000..9034826
--- /dev/null
+++ b/app/api/proxy-image/[...imagePath]/route.ts
@@ -0,0 +1,35 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const BACKEND_BASE = "https://logiapi.slash.sa";
+
+export async function GET(
+  _req: NextRequest,
+  { params }: { params: Promise<{ filename: string }> },
+) {
+  const { filename } = await params;
+
+  try {
+    const upstream = await fetch(
+      `${BACKEND_BASE}/public/uploads/driver-photos/${filename}`,
+      { cache: "no-store" },
+    );
+
+    if (!upstream.ok) {
+      return new NextResponse(null, { status: upstream.status });
+    }
+
+    const buffer = await upstream.arrayBuffer();
+    const contentType =
+      upstream.headers.get("Content-Type") ?? "image/jpeg";
+
+    return new NextResponse(buffer, {
+      status: 200,
+      headers: {
+        "Content-Type": contentType,
+        "Cache-Control": "public, max-age=3600, stale-while-revalidate=86400",
+      },
+    });
+  } catch {
+    return new NextResponse(null, { status: 502 });
+  }
+}
\ No newline at end of file
diff --git a/app/api/proxy/[...path]/route.ts b/app/api/proxy/[...path]/route.ts
index 2c1aba7..8808a02 100644
--- a/app/api/proxy/[...path]/route.ts
+++ b/app/api/proxy/[...path]/route.ts
@@ -10,51 +10,54 @@ async function proxy(
   const path = params.path?.join("/") ?? "";
   const targetUrl = `${BACKEND_BASE_URL}/${path}${request.nextUrl.search}`;
 
-  // Read the HttpOnly cookie server-side — this is the ONLY place the raw
-  // token value is accessible after the Issue 3 refactor.
   const cookieStore = await cookies();
   const token = cookieStore.get("auth_token")?.value;
 
   const headers = new Headers();
 
-  // Forward all safe request headers.
   request.headers.forEach((value, key) => {
     if (key === "host" || key === "content-length" || key === "cookie") return;
     headers.set(key, value);
   });
 
-  // Inject the Authorization header using the server-side cookie value.
-  // The client never had access to this token value.
   if (token) {
     headers.set("Authorization", `Bearer ${decodeURIComponent(token)}`);
   }
 
-  if (!headers.has("Content-Type")) {
+  // NOTE: do NOT force a default Content-Type here when there's no body —
+  // for multipart/form-data requests, the browser sets Content-Type itself
+  // (including the multipart boundary). We only need a fallback for bodied
+  // requests that didn't already specify one (e.g. raw JSON fetches).
+  const isBodyless = request.method === "GET" || request.method === "HEAD";
+
+  // CRITICAL FIX: read the body as raw bytes (ArrayBuffer), never as text.
+  // request.text() decodes the body as UTF-8, which corrupts any binary
+  // payload (images inside multipart/form-data) — invalid UTF-8 byte
+  // sequences get silently replaced, mangling the uploaded file before it
+  // ever reaches the backend. ArrayBuffer passes bytes through untouched,
+  // and works equally well for JSON bodies.
+  const body = isBodyless ? undefined : await request.arrayBuffer();
+
+  if (!isBodyless && !headers.has("Content-Type")) {
     headers.set("Content-Type", "application/json");
   }
 
-  const isBodyless = request.method === "GET" || request.method === "HEAD";
-  const body = isBodyless ? undefined : await request.text();
-
   const upstream = await fetch(targetUrl, {
     method: request.method,
     headers,
     body,
     cache: "no-store",
+    // @ts-expect-error - duplex is required by undici when streaming a body
+    // but isn't yet in the official RequestInit types in this Next.js version.
+    duplex: body ? "half" : undefined,
   });
 
   const contentType =
     upstream.headers.get("content-type") || "application/json";
 
-  // Responses with these statuses MUST NOT carry a body (per the Fetch/HTTP
-  // spec). Constructing a NextResponse with a body alongside one of these
-  // statuses throws at runtime, which Next.js then surfaces as a 500 to the
-  // client — even though the upstream call itself succeeded. This is exactly
-  // what happens on DELETE endpoints that correctly return 204 No Content.
   const isNoBodyStatus = [204, 205, 304].includes(upstream.status);
 
   if (isNoBodyStatus) {
-    // Drain the upstream body (should be empty anyway) without parsing it.
     await upstream.text().catch(() => null);
     return new NextResponse(null, {
       status: upstream.status,
@@ -62,6 +65,19 @@ async function proxy(
     });
   }
 
+  // Pass binary responses (e.g. images) through untouched too, just in case
+  // any proxied endpoint ever returns one.
+  if (!contentType.includes("application/json") && !contentType.includes("text")) {
+    const buffer = await upstream.arrayBuffer();
+    return new NextResponse(buffer, {
+      status: upstream.status,
+      headers: {
+        "content-type": contentType,
+        "cache-control": "no-store",
+      },
+    });
+  }
+
   const responseBody = contentType.includes("application/json")
     ? await upstream.json().catch(() => null)
     : await upstream.text();
diff --git a/app/components/layout/Navbar.tsx b/app/components/layout/Navbar.tsx
index 08a5649..c0003f6 100644
--- a/app/components/layout/Navbar.tsx
+++ b/app/components/layout/Navbar.tsx
@@ -1,4 +1,4 @@
-import Logo from "@/utils/logo";
+import Logo from "@/src/utils/logo";
 import Link from "next/link";
 
 
@@ -13,7 +13,7 @@ const navLinks = [
 
 export default function Navbar() {
   return (
-    <nav dir="rtl" className="w-full border-b border-slate-200 bg-white text-slate-900 shadow-sm">x 
+    <nav dir="rtl" className="w-full border-b border-slate-200 bg-white text-slate-900 shadow-sm">
       <div className="mx-auto flex h-14 max-w-7xl items-center gap-4 px-6 lg:px-8">
         <a href="/" className="flex items-center gap-3 text-right">
           <Logo />
@@ -33,8 +33,21 @@ export default function Navbar() {
           ))}
         </div>
 
-        <div className="mr-auto flex items-center gap-2">
-          
+        {/*
+          Was `mr-auto`. `mr-*` is a PHYSICAL Tailwind utility — it means
+          "margin-right" no matter what `dir` says, so it would have
+          pinned the login button to the visual left in both LTR and
+          RTL, fighting the rest of the nav. `ms-auto` ("margin-inline-
+          start: auto") pushes against the start edge instead, which is
+          right in RTL and left in LTR — it tracks `dir` automatically.
+          This is the single most common RTL bug: Tailwind's l/r-prefixed
+          utilities (ml, mr, pl, pr, left-, right-, text-left, text-right,
+          rounded-l, rounded-r, border-l, border-r) are all physical and
+          need their logical (s/e) equivalents — ms, me, ps, pe, start-,
+          end-, text-start, text-end, rounded-s, rounded-e, border-s,
+          border-e — anywhere direction should matter.
+        */}
+        <div className="ms-auto flex items-center gap-2">
           <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>
diff --git a/app/components/layout/Sidebar.tsx b/app/components/layout/Sidebar.tsx
index a0d5f3f..c7dfc47 100644
--- a/app/components/layout/Sidebar.tsx
+++ b/app/components/layout/Sidebar.tsx
@@ -2,8 +2,8 @@
 
 import Link      from "next/link";
 import { usePathname } from "next/navigation";
-import { getStoredUser } from "../../../lib/auth";
-import Logo from "../../../utils/logo";
+import { getStoredUser } from "@/src/lib/auth";
+import Logo from "@/src/utils/logo";
 
 const navSections = [
   {
@@ -40,39 +40,110 @@ export function Sidebar() {
   const permissions = user?.permissions ?? navSections.flatMap(s => s.items.map(i => i.permission));
 
   return (
-    <aside
-      suppressHydrationWarning
-      className="hidden lg:flex lg:flex-col"
-      style={{
-        width: "var(--sidebar-width)",
-        flexShrink: 0,
-        background: "linear-gradient(175deg, #1E3A8A 0%, #1D4ED8 60%, #1565C0 100%)",
-        minHeight: "100vh",
-        padding: "20px 12px",
-      }}
-    >
+    <>
+      {/*
+        Full sidebar — visible lg+.
+        No `left`/`right` is set anywhere: placement comes purely from
+        document order + `dir="rtl"` on <html>. A flex row in RTL lays
+        its first child against the inline-start edge, which is
+        physically the RIGHT of the screen. Because <Sidebar /> is
+        still the first child in DashboardLayout, it now renders on
+        the right automatically — no positional CSS to flip.
+      */}
+      <aside
+        suppressHydrationWarning
+        className="hidden lg:flex lg:flex-col"
+        style={{
+          width: "var(--sidebar-width)",
+          flexShrink: 0,
+          background: "linear-gradient(175deg, #1E3A8A 0%, #1D4ED8 60%, #1565C0 100%)",
+          minHeight: "100vh",
+          padding: "20px 12px",
+        }}
+      >
+        <SidebarContent
+          pathname={pathname}
+          permissions={permissions}
+          user={user}
+          compact={false}
+        />
+      </aside>
+
+      {/*
+        Compact icon rail — md and below (replaces the old behavior of
+        hiding the sidebar entirely under `lg`). Fixed to the
+        inline-end... no: fixed to the RIGHT edge explicitly, because a
+        `position: fixed` element takes no part in flex flow and so
+        gets no automatic RTL placement from document order. This is
+        exactly the kind of element logical properties exist for:
+        `inset-inline-end: 0` means "right in RTL, left in LTR"
+        without a manual swap if direction ever toggles.
+      */}
+      <aside
+        suppressHydrationWarning
+        className="hidden md:flex lg:hidden md:flex-col md:items-center"
+        style={{
+          position: "fixed",
+          insetBlockStart: 0,
+          insetBlockEnd: 0,
+          insetInlineEnd: 0,
+          width: "var(--sidebar-width-compact)",
+          background: "linear-gradient(175deg, #1E3A8A 0%, #1D4ED8 60%, #1565C0 100%)",
+          padding: "16px 0",
+          zIndex: 30,
+          overflowY: "auto",
+        }}
+        aria-label="التنقل المصغر"
+      >
+        <SidebarContent
+          pathname={pathname}
+          permissions={permissions}
+          user={user}
+          compact={true}
+        />
+      </aside>
+    </>
+  );
+}
+
+function SidebarContent({
+  pathname,
+  permissions,
+  user,
+  compact,
+}: {
+  pathname: string;
+  permissions: string[];
+  user: ReturnType<typeof getStoredUser>;
+  compact: boolean;
+}) {
+  return (
+    <>
       {/* Logo */}
-      <div style={{ marginBottom: 28 }}>
+      <div style={{ marginBottom: 28, display: "flex", justifyContent: compact ? "center" : "flex-start" }}>
         <Logo white />
       </div>
 
       {/* Nav sections */}
       <nav
-        style={{ flex: 1, display: "flex", flexDirection: "column", gap: 0 }}
+        style={{ flex: 1, display: "flex", flexDirection: "column", gap: 0, width: "100%" }}
         aria-label="Main navigation"
       >
         {navSections.map((section) => (
           <div key={section.label} style={{ marginBottom: 8 }}>
-            <p style={{
-              fontSize: 9,
-              letterSpacing: "0.14em",
-              textTransform: "uppercase",
-              color: "rgba(255,255,255,0.45)",
-              padding: "8px 8px 4px",
-              fontWeight: 600,
-            }}>
-              {section.label}
-            </p>
+            {!compact && (
+              <p style={{
+                fontSize: 9,
+                letterSpacing: "0.14em",
+                textTransform: "uppercase",
+                color: "rgba(255,255,255,0.45)",
+                padding: "8px 8px 4px",
+                fontWeight: 600,
+                textAlign: "start",
+              }}>
+                {section.label}
+              </p>
+            )}
 
             {section.items.map((item) => {
               const allowed = item.permission === "read-dashboard"
@@ -86,11 +157,14 @@ export function Sidebar() {
                 <Link
                   key={item.href}
                   href={item.href}
+                  title={compact ? item.label : undefined}
+                  aria-label={item.label}
                   style={{
                     display: "flex",
                     alignItems: "center",
+                    justifyContent: compact ? "center" : "flex-start",
                     gap: 9,
-                    padding: "7px 8px",
+                    padding: compact ? "10px" : "7px 8px",
                     borderRadius: 8,
                     fontSize: 13,
                     fontWeight: active ? 500 : 400,
@@ -99,14 +173,15 @@ export function Sidebar() {
                     textDecoration: "none",
                     transition: "var(--transition-base)",
                     marginBottom: 2,
+                    textAlign: "start",
                   }}
                 >
                   <i
                     className={`ti ${item.icon}`}
                     aria-hidden="true"
-                    style={{ fontSize: 16 }}
+                    style={{ fontSize: compact ? 18 : 16, flexShrink: 0 }}
                   />
-                  {item.label}
+                  {!compact && item.label}
                 </Link>
               );
             })}
@@ -114,20 +189,43 @@ export function Sidebar() {
         ))}
       </nav>
 
-      {/* User badge */}
-      <div style={{
-        background: "rgba(255,255,255,0.12)",
-        borderRadius: 10,
-        padding: "10px 12px",
-        marginTop: 8,
-      }}>
-        <p suppressHydrationWarning style={{ fontSize: 13, fontWeight: 500, color: "#fff", margin: 0 }}>
-          {user?.name ?? user?.userName ?? "—"}
-        </p>
-        <p suppressHydrationWarning style={{ fontSize: 11, color: "rgba(255,255,255,0.55)", marginTop: 2 }}>
-          {user?.role ?? "Signed in"}
-        </p>
-      </div>
-    </aside>
+      {/* User badge — collapses to an avatar dot in compact mode */}
+      {compact ? (
+        <div
+          suppressHydrationWarning
+          title={user?.name ?? user?.userName ?? "—"}
+          style={{
+            width: 36,
+            height: 36,
+            borderRadius: "var(--radius-full)",
+            background: "rgba(255,255,255,0.18)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: 13,
+            fontWeight: 600,
+            color: "#fff",
+            marginTop: 8,
+          }}
+        >
+          {(user?.name ?? user?.userName ?? "—").slice(0, 1)}
+        </div>
+      ) : (
+        <div style={{
+          background: "rgba(255,255,255,0.12)",
+          borderRadius: 10,
+          padding: "10px 12px",
+          marginTop: 8,
+          width: "100%",
+        }}>
+          <p suppressHydrationWarning style={{ fontSize: 13, fontWeight: 500, color: "#fff", margin: 0, textAlign: "start" }}>
+            {user?.name ?? user?.userName ?? "—"}
+          </p>
+          <p suppressHydrationWarning style={{ fontSize: 11, color: "rgba(255,255,255,0.55)", marginTop: 2, textAlign: "start" }}>
+            {user?.role ?? "Signed in"}
+          </p>
+        </div>
+      )}
+    </>
   );
 }
\ No newline at end of file
diff --git a/app/components/layout/Topbar.tsx b/app/components/layout/Topbar.tsx
index 7439b9d..423f01b 100644
--- a/app/components/layout/Topbar.tsx
+++ b/app/components/layout/Topbar.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { clearAuth, getStoredUser } from "../../../lib/auth";
+import { clearAuth, getStoredUser } from "@/src/lib/auth";
 
 export function Topbar() {
   const router = useRouter();
@@ -24,14 +24,29 @@ export function Topbar() {
         display: "flex",
         alignItems: "center",
         justifyContent: "space-between",
+        /*
+          `justify-content: space-between` and `display: flex` are
+          direction-agnostic — they already flip with `dir` for free.
+          The title block (first child) lands at the inline-start edge
+          (right, in RTL) and the actions cluster (second child) lands
+          at inline-end (left). That matches the brief's "primary
+          actions easily accessible" requirement: in Arabic dashboards
+          the page title reads first at the right, and the role badge
+          + logout sit together at the natural reading end — unchanged
+          from before, just now correctly positioned by `dir` instead
+          of by accident.
+        */
       }}
     >
       <div>
-        <p style={{ fontSize: 14, fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>
+        <p style={{ fontSize: 14, fontWeight: 600, color: "var(--color-text-primary)", margin: 0, textAlign: "start" }}>
           لوحة التحكم
         </p>
-        <p style={{ fontSize: 11, color: "var(--color-text-muted)", margin: 0 }}>
-          Operations dashboard
+        <p style={{ fontSize: 11, color: "var(--color-text-muted)", margin: 0, textAlign: "start" }}>
+          {/* English product label intentionally stays LTR-embedded so
+              "Operations dashboard" doesn't get its word order or
+              punctuation reversed by the surrounding RTL run. */}
+          <span className="ltr-embed">Operations dashboard</span>
         </p>
       </div>
 
diff --git a/app/dashboard/audit/page.tsx b/app/dashboard/audit/page.tsx
index c5f1983..353cc3f 100644
--- a/app/dashboard/audit/page.tsx
+++ b/app/dashboard/audit/page.tsx
@@ -1,3 +1,222 @@
-export default function AuditPage() {
-  return <section className="rounded-3xl border border-white/10 bg-slate-900/80 p-6 text-slate-100 shadow-2xl shadow-slate-950/20">Audit log module is ready for compliance and activity review.</section>;
+"use client";
+
+import { useCallback, useEffect, useReducer, useState } from "react";
+import { Alert, Spinner } from "@/src/Components/UI";
+import { getStoredToken } from "@/src/lib/auth";
+import { get } from "@/src/services/api";
+
+// ── Types ──────────────────────────────────────────────────────────────────
+
+interface AuditLog {
+  id: string;
+  action: string;
+  module?: string | null;
+  entityId?: string | null;
+  userId?: string | null;
+  userName?: string | null;
+  ipAddress?: string | null;
+  userAgent?: string | null;
+  metadata?: Record<string, unknown> | null;
+  createdAt: string;
 }
+
+// ── State / Reducer ────────────────────────────────────────────────────────
+
+interface State {
+  logs: AuditLog[];
+  loading: boolean;
+  total: number;
+  pages: number;
+  error: string | null;
+}
+
+type Action =
+  | { type: "LOAD_START" }
+  | { type: "LOAD_OK"; logs: AuditLog[]; total: number; pages: number }
+  | { type: "LOAD_ERR"; error: string }
+  | { type: "CLEAR_ERR" };
+
+function reducer(s: State, a: Action): State {
+  switch (a.type) {
+    case "LOAD_START": return { ...s, loading: true, error: null };
+    case "LOAD_OK":    return { ...s, loading: false, logs: a.logs, total: a.total, pages: a.pages };
+    case "LOAD_ERR":   return { ...s, loading: false, error: a.error };
+    case "CLEAR_ERR":  return { ...s, error: null };
+    default:           return s;
+  }
+}
+
+// ── Action badge ───────────────────────────────────────────────────────────
+
+const ACTION_COLORS: Record<string, { bg: string; color: string; border: string }> = {
+  CREATE: { bg: "#DCFCE7", color: "#166534", border: "#BBF7D0" },
+  UPDATE: { bg: "#EFF6FF", color: "#1D4ED8", border: "#BFDBFE" },
+  DELETE: { bg: "#FEF2F2", color: "#DC2626", border: "#FECACA" },
+  LOGIN:  { bg: "#F5F3FF", color: "#5B21B6", border: "#DDD6FE" },
+  LOGOUT: { bg: "#F1F5F9", color: "#475569", border: "#E2E8F0" },
+};
+
+function ActionBadge({ action }: { action: string }) {
+  const upper = action?.toUpperCase() ?? "";
+  const key = Object.keys(ACTION_COLORS).find(k => upper.includes(k)) ?? "CREATE";
+  const cfg = ACTION_COLORS[key];
+  return (
+    <span style={{
+      display: "inline-flex", alignItems: "center",
+      borderRadius: "var(--radius-full)", border: `1px solid ${cfg.border}`,
+      background: cfg.bg, padding: "0.2rem 0.625rem",
+      fontSize: 11, fontWeight: 700, color: cfg.color, whiteSpace: "nowrap",
+    }}>
+      {action}
+    </span>
+  );
+}
+
+// ── Page ───────────────────────────────────────────────────────────────────
+
+export default function AuditPage() {
+  const [state, dispatch] = useReducer(reducer, {
+    logs: [], loading: true, total: 0, pages: 1, error: null,
+  });
+  const [page, setPage]       = useState(1);
+  const [search, setSearch]   = useState("");
+  const [module, setModule]   = useState("");
+
+  const loadLogs = useCallback(async (p: number, q: string, mod: string) => {
+    dispatch({ type: "LOAD_START" });
+    try {
+      const token = getStoredToken();
+      const params = new URLSearchParams({ page: String(p), limit: "15" });
+      if (q)   params.set("search", q);
+      if (mod) params.set("module", mod);
+      const res = await get<{
+        data: { data: AuditLog[]; meta?: { total: number; pages: number }; pagination?: { total: number; pages: number } };
+      }>(`audit?${params}`, token);
+      const payload = (res as unknown as { data: { data: AuditLog[]; meta?: { total: number; pages: number }; pagination?: { total: number; pages: number } } }).data;
+      dispatch({
+        type: "LOAD_OK",
+        logs: payload.data ?? [],
+        total: payload.meta?.total ?? payload.pagination?.total ?? 0,
+        pages: payload.meta?.pages ?? payload.pagination?.pages ?? 1,
+      });
+    } catch {
+      dispatch({ type: "LOAD_ERR", error: "تعذّر تحميل سجل التدقيق. يرجى المحاولة مجدداً." });
+    }
+  }, []);
+
+  useEffect(() => { loadLogs(page, search, module); }, [page, search, module, loadLogs]);
+
+  const cardStyle: React.CSSProperties = {
+    borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)",
+    background: "var(--color-surface)", overflow: "hidden", boxShadow: "var(--shadow-card)",
+  };
+
+  const thStyle: React.CSSProperties = {
+    padding: "0.75rem 1.5rem", fontSize: 11, fontWeight: 700,
+    textTransform: "uppercase", letterSpacing: "0.2em",
+    color: "var(--color-text-muted)", background: "var(--color-surface-muted)",
+    borderBottom: "1px solid var(--color-border)",
+  };
+
+  return (
+    <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
+
+      {/* Header */}
+      <header style={{ borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)", background: "var(--color-surface)", padding: "1.5rem 2rem", boxShadow: "var(--shadow-card)" }}>
+        <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600 }}>
+          الامتثال والمراجعة
+        </p>
+        <div className="mt-3 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+          <div>
+            <h1 style={{ fontSize: "1.5rem", fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>سجل التدقيق</h1>
+            <p style={{ marginTop: "0.25rem", fontSize: 13, color: "var(--color-text-muted)" }}>
+              إجمالي <strong style={{ color: "var(--color-text-primary)" }}>{state.total}</strong> سجل
+            </p>
+          </div>
+          <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap", alignItems: "center" }}>
+            <input type="text" placeholder="بحث بالإجراء أو المستخدم…" value={search}
+              onChange={e => { setSearch(e.target.value); setPage(1); }} dir="rtl"
+              style={{ width: 220, height: 40, padding: "0 0.75rem", borderRadius: "var(--radius-lg)", border: "1px solid var(--color-border)", background: "var(--color-surface)", fontSize: 13, color: "var(--color-text-primary)", outline: "none", fontFamily: "var(--font-sans)" }} />
+            <select value={module} onChange={e => { setModule(e.target.value); setPage(1); }} dir="rtl"
+              style={{ height: 40, padding: "0 0.75rem", borderRadius: "var(--radius-lg)", border: "1px solid var(--color-border)", background: "var(--color-surface)", fontSize: 13, color: "var(--color-text-secondary)", outline: "none", fontFamily: "var(--font-sans)" }}>
+              <option value="">كل الوحدات</option>
+              {["User","Driver","Car","Trip","Order","Client","Role","Branch"].map(m => (
+                <option key={m} value={m}>{m}</option>
+              ))}
+            </select>
+          </div>
+        </div>
+      </header>
+
+      {state.error && <Alert type="error" message={state.error} onClose={() => dispatch({ type: "CLEAR_ERR" })} />}
+
+      {/* Table */}
+      <div style={cardStyle}>
+        <div dir="rtl" style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1.5fr 1fr", ...thStyle }}>
+          <span>الإجراء</span>
+          <span>الوحدة</span>
+          <span>المستخدم</span>
+          <span>عنوان IP</span>
+          <span style={{ textAlign: "center" }}>الوقت</span>
+        </div>
+
+        {state.loading ? (
+          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, padding: "4rem 0", color: "var(--color-text-muted)" }}>
+            <Spinner size="sm" className="text-blue-600" />
+            <span style={{ fontSize: 13 }}>جارٍ التحميل…</span>
+          </div>
+        ) : state.logs.length === 0 ? (
+          <p style={{ textAlign: "center", padding: "4rem 0", fontSize: 13, color: "var(--color-text-muted)" }}>
+            لا توجد سجلات مطابقة
+          </p>
+        ) : (
+          <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
+            {state.logs.map((log, i) => (
+              <li key={log.id} style={{
+                display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1.5fr 1fr",
+                alignItems: "center", gap: "0.5rem", padding: "0.875rem 1.5rem",
+                borderBottom: "1px solid var(--color-border)",
+                background: i % 2 !== 0 ? "var(--color-surface-muted)" : "transparent",
+                fontSize: 13,
+              }}>
+                <div>
+                  <ActionBadge action={log.action} />
+                  {log.entityId && (
+                    <p style={{ marginTop: 2, fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--color-text-muted)" }}>
+                      {log.entityId.slice(0, 12)}…
+                    </p>
+                  )}
+                </div>
+                <span style={{ color: "var(--color-text-secondary)" }}>{log.module ?? "—"}</span>
+                <span style={{ color: "var(--color-text-secondary)" }}>{log.userName ?? log.userId ?? "—"}</span>
+                <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--color-text-muted)" }}>{log.ipAddress ?? "—"}</span>
+                <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
+                  {new Date(log.createdAt).toLocaleString("ar-SA", { dateStyle: "short", timeStyle: "short" })}
+                </span>
+              </li>
+            ))}
+          </ul>
+        )}
+
+        {state.pages > 1 && (
+          <div dir="rtl" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", borderTop: "1px solid var(--color-border)", padding: "0.875rem 1.5rem" }}>
+            <span style={{ fontSize: 12, color: "var(--color-text-muted)" }}>
+              صفحة <strong style={{ color: "var(--color-text-primary)" }}>{page}</strong> من <strong style={{ color: "var(--color-text-primary)" }}>{state.pages}</strong>
+            </span>
+            <div style={{ display: "flex", gap: "0.5rem" }}>
+              {[
+                { label: "السابق", action: () => setPage(p => Math.max(1, p - 1)), disabled: page === 1 },
+                { label: "التالي", action: () => setPage(p => Math.min(state.pages, p + 1)), disabled: page === state.pages },
+              ].map(btn => (
+                <button key={btn.label} onClick={btn.action} disabled={btn.disabled}
+                  style={{ borderRadius: "var(--radius-lg)", border: "1px solid var(--color-border)", background: "var(--color-surface-muted)", padding: "0.375rem 0.875rem", fontSize: 12, color: "var(--color-text-secondary)", cursor: btn.disabled ? "not-allowed" : "pointer", opacity: btn.disabled ? 0.4 : 1, fontFamily: "var(--font-sans)" }}>
+                  {btn.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/app/dashboard/branches/page.tsx b/app/dashboard/branches/page.tsx
index 94cc3d6..c793e3c 100644
--- a/app/dashboard/branches/page.tsx
+++ b/app/dashboard/branches/page.tsx
@@ -1,3 +1,493 @@
-export default function BranchesPage() {
-  return <section className="rounded-3xl border border-white/10 bg-slate-900/80 p-6 text-slate-100 shadow-2xl shadow-slate-950/20">Branches module is ready for the location and hub management table.</section>;
+"use client";
+
+import { useCallback, useEffect, useReducer, useRef, useState } from "react";
+import { Alert, Spinner } from "@/src/Components/UI";
+import { getStoredToken } from "@/src/lib/auth";
+import { get, post, put, del } from "@/src/services/api";
+
+// ── Types ──────────────────────────────────────────────────────────────────
+
+interface Branch {
+  id: string;
+  name: string;
+  address?: string | null;
+  phone?: string | null;
+  createdAt: string;
+  updatedAt: string;
 }
+
+interface BranchFormData {
+  name: string;
+  address: string;
+  phone: string;
+}
+
+// ── State / Reducer ────────────────────────────────────────────────────────
+
+interface State {
+  branches: Branch[];
+  loading: boolean;
+  total: number;
+  pages: number;
+  error: string | null;
+}
+
+type Action =
+  | { type: "LOAD_START" }
+  | { type: "LOAD_OK"; branches: Branch[]; total: number; pages: number }
+  | { type: "LOAD_ERR"; error: string }
+  | { type: "ADD"; branch: Branch }
+  | { type: "UPDATE"; branch: Branch }
+  | { type: "DELETE"; id: string }
+  | { type: "CLEAR_ERR" };
+
+function reducer(s: State, a: Action): State {
+  switch (a.type) {
+    case "LOAD_START": return { ...s, loading: true, error: null };
+    case "LOAD_OK":    return { ...s, loading: false, branches: a.branches, total: a.total, pages: a.pages };
+    case "LOAD_ERR":   return { ...s, loading: false, error: a.error };
+    case "ADD":        return { ...s, branches: [a.branch, ...s.branches], total: s.total + 1 };
+    case "UPDATE":     return { ...s, branches: s.branches.map(b => b.id === a.branch.id ? a.branch : b) };
+    case "DELETE":     return { ...s, branches: s.branches.filter(b => b.id !== a.id), total: Math.max(0, s.total - 1) };
+    case "CLEAR_ERR":  return { ...s, error: null };
+    default:           return s;
+  }
+}
+
+// ── Branch Form Modal ──────────────────────────────────────────────────────
+
+function BranchFormModal({
+  editBranch,
+  onClose,
+  onSubmit,
+}: {
+  editBranch: Branch | null;
+  onClose: () => void;
+  onSubmit: (data: BranchFormData, isNew: boolean) => Promise<boolean>;
+}) {
+  const isNew = editBranch === null;
+  const [form, setForm] = useState<BranchFormData>({
+    name:    editBranch?.name    ?? "",
+    address: editBranch?.address ?? "",
+    phone:   editBranch?.phone   ?? "",
+  });
+  const [errors, setErrors] = useState<Partial<BranchFormData>>({});
+  const [saving, setSaving] = useState(false);
+  const [apiErr, setApiErr] = useState("");
+  const nameRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => { nameRef.current?.focus(); }, []);
+  useEffect(() => {
+    const h = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
+    window.addEventListener("keydown", h);
+    return () => window.removeEventListener("keydown", h);
+  }, [onClose]);
+
+  function validate(): boolean {
+    const e: Partial<BranchFormData> = {};
+    if (!form.name.trim()) e.name = "اسم الفرع مطلوب";
+    setErrors(e);
+    return Object.keys(e).length === 0;
+  }
+
+  async function handleSubmit(ev: React.FormEvent) {
+    ev.preventDefault();
+    if (!validate()) return;
+    setSaving(true);
+    setApiErr("");
+    const ok = await onSubmit(form, isNew);
+    setSaving(false);
+    if (ok) onClose();
+    else setApiErr("حدث خطأ غير متوقع. يرجى المحاولة لاحقاً.");
+  }
+
+  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)",
+  };
+
+  return (
+    <div
+      role="dialog" aria-modal="true"
+      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
+      style={{
+        position: "fixed", inset: 0, zIndex: 50,
+        background: "rgba(15,23,42,0.55)", backdropFilter: "blur(4px)",
+        display: "flex", alignItems: "center", justifyContent: "center", padding: "1rem",
+      }}
+    >
+      <div onClick={e => e.stopPropagation()} style={{
+        width: "100%", maxWidth: 480,
+        background: "var(--color-surface)", borderRadius: "var(--radius-2xl)",
+        border: "1px solid var(--color-border)", boxShadow: "0 24px 64px rgba(0,0,0,.18)",
+        overflow: "hidden",
+      }}>
+        <div style={{
+          display: "flex", alignItems: "center", justifyContent: "space-between",
+          padding: "1.25rem 1.5rem", borderBottom: "1px solid var(--color-border)",
+          background: "var(--color-surface-muted)",
+        }}>
+          <div>
+            <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600, margin: 0 }}>
+              {isNew ? "إضافة فرع" : "تعديل فرع"}
+            </p>
+            <h2 style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
+              {isNew ? "فرع جديد" : editBranch?.name}
+            </h2>
+          </div>
+          <button type="button" onClick={onClose} style={{
+            width: 34, height: 34, borderRadius: "var(--radius-md)",
+            border: "1px solid var(--color-border)", background: "var(--color-surface)",
+            cursor: "pointer", fontSize: 18, color: "var(--color-text-muted)",
+            display: "flex", alignItems: "center", justifyContent: "center",
+          }}>×</button>
+        </div>
+
+        <form onSubmit={handleSubmit} noValidate style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
+          {apiErr && <Alert type="error" message={apiErr} onClose={() => setApiErr("")} />}
+
+          <label style={{ display: "flex", flexDirection: "column", gap: 6, fontSize: 12, fontWeight: 600, color: "var(--color-text-secondary)" }}>
+            اسم الفرع *
+            <input ref={nameRef} style={{ ...inputBase, ...(errors.name ? { borderColor: "var(--color-danger)", background: "#FEF2F2" } : {}) }}
+              value={form.name} onChange={e => { setForm(p => ({ ...p, name: e.target.value })); setErrors(p => ({ ...p, name: undefined })); }}
+              placeholder="فرع الرياض" dir="rtl" />
+            {errors.name && <span style={{ fontSize: 11, color: "var(--color-danger)" }}>{errors.name}</span>}
+          </label>
+
+          <label style={{ display: "flex", flexDirection: "column", gap: 6, fontSize: 12, fontWeight: 600, color: "var(--color-text-secondary)" }}>
+            العنوان (اختياري)
+            <input style={inputBase} value={form.address}
+              onChange={e => setForm(p => ({ ...p, address: e.target.value }))}
+              placeholder="شارع الملك فهد، الرياض" dir="rtl" />
+          </label>
+
+          <label style={{ display: "flex", flexDirection: "column", gap: 6, fontSize: 12, fontWeight: 600, color: "var(--color-text-secondary)" }}>
+            رقم الهاتف (اختياري)
+            <input style={inputBase} value={form.phone}
+              onChange={e => setForm(p => ({ ...p, phone: e.target.value }))}
+              placeholder="+966 11 xxx xxxx" dir="ltr" />
+          </label>
+
+          <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>
+  );
+}
+
+// ── Delete Modal ───────────────────────────────────────────────────────────
+
+function BranchDeleteModal({ branch, deleting, onCancel, onConfirm }: {
+  branch: Branch; deleting: boolean; onCancel: () => void; onConfirm: () => void;
+}) {
+  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"
+      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",
+      }}>
+        <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 style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>حذف الفرع</h2>
+          <p style={{ marginTop: 8, fontSize: 13, color: "var(--color-text-muted)", lineHeight: 1.6 }}>
+            هل أنت متأكد من حذف فرع <strong style={{ color: "var(--color-text-primary)" }}>{branch.name}</strong>؟ لا يمكن التراجع عن هذا الإجراء.
+          </p>
+        </div>
+        <div style={{ display: "flex", gap: "0.5rem" }}>
+          <button type="button" onClick={onCancel} disabled={deleting}
+            style={{ flex: 1, height: 40, borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", fontSize: 13, fontWeight: 600, color: "var(--color-text-secondary)", cursor: deleting ? "not-allowed" : "pointer", fontFamily: "var(--font-sans)" }}>
+            إلغاء
+          </button>
+          <button type="button" onClick={onConfirm} disabled={deleting}
+            style={{ flex: 1, height: 40, borderRadius: "var(--radius-md)", border: "none", background: "#DC2626", fontSize: 13, fontWeight: 700, color: "#FFF", cursor: deleting ? "not-allowed" : "pointer", display: "flex", alignItems: "center", justifyContent: "center", gap: 8, fontFamily: "var(--font-sans)", opacity: deleting ? 0.7 : 1 }}>
+            {deleting && <Spinner size="sm" className="text-white" />}
+            {deleting ? "جارٍ الحذف…" : "تأكيد الحذف"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── Toast ──────────────────────────────────────────────────────────────────
+
+function Toast({ type, message }: { type: "success" | "error"; message: string }) {
+  const ok = type === "success";
+  return (
+    <div role="status" style={{
+      position: "fixed", bottom: 24, left: "50%", transform: "translateX(-50%)", zIndex: 9999,
+      display: "flex", alignItems: "center", gap: 10, padding: "0.75rem 1.25rem",
+      borderRadius: "var(--radius-full)", background: ok ? "#065F46" : "#7F1D1D",
+      color: "#FFF", fontSize: 13, fontWeight: 600, boxShadow: "0 8px 32px rgba(0,0,0,.25)",
+      maxWidth: "90vw", whiteSpace: "nowrap", fontFamily: "var(--font-sans)",
+    }}>
+      <span style={{ fontSize: 16 }}>{ok ? "✓" : "⚠"}</span>
+      <span>{message}</span>
+    </div>
+  );
+}
+
+// ── Page ───────────────────────────────────────────────────────────────────
+
+export default function BranchesPage() {
+  const [state, dispatch] = useReducer(reducer, {
+    branches: [], loading: true, total: 0, pages: 1, error: null,
+  });
+  const [search, setSearch]       = useState("");
+  const [page, setPage]           = useState(1);
+  const [formTarget, setFormTarget] = useState<Branch | null | false>(false);
+  const [deleteTarget, setDeleteTarget] = useState<Branch | null>(null);
+  const [deleting, setDeleting]   = useState(false);
+  const [notification, setNotification] = useState<{ type: "success" | "error"; message: string } | null>(null);
+
+  const notify = useCallback((n: { type: "success" | "error"; message: string }) => {
+    setNotification(n);
+    setTimeout(() => setNotification(null), 4000);
+  }, []);
+
+  const loadBranches = useCallback(async (p: number, q: string) => {
+    dispatch({ type: "LOAD_START" });
+    try {
+      const token = getStoredToken();
+      const qs = `?page=${p}&limit=12${q ? `&search=${encodeURIComponent(q)}` : ""}`;
+      const res = await get<{ data: { data: Branch[]; meta?: { total: number; pages: number }; pagination?: { total: number; pages: number } } }>(`branches${qs}`, token);
+      const payload = (res as unknown as { data: { data: Branch[]; meta?: { total: number; pages: number }; pagination?: { total: number; pages: number } } }).data;
+      dispatch({
+        type: "LOAD_OK",
+        branches: payload.data ?? [],
+        total: payload.meta?.total ?? payload.pagination?.total ?? 0,
+        pages: payload.meta?.pages ?? payload.pagination?.pages ?? 1,
+      });
+    } catch {
+      dispatch({ type: "LOAD_ERR", error: "تعذّر تحميل الفروع. يرجى المحاولة مجدداً." });
+    }
+  }, []);
+
+  useEffect(() => { loadBranches(page, search); }, [page, search, loadBranches]);
+
+  const handleFormSubmit = useCallback(async (data: BranchFormData, isNew: boolean): Promise<boolean> => {
+    try {
+      const token = getStoredToken();
+      if (isNew) {
+        const res = await post<{ data: Branch }>("branches", data, token);
+        dispatch({ type: "ADD", branch: (res as unknown as { data: Branch }).data });
+        notify({ type: "success", message: "تم إضافة الفرع بنجاح." });
+      } else {
+        const res = await put<{ data: Branch }>(`branches/${(formTarget as Branch).id}`, data, token);
+        dispatch({ type: "UPDATE", branch: (res as unknown as { data: Branch }).data });
+        notify({ type: "success", message: "تم تحديث الفرع بنجاح." });
+      }
+      return true;
+    } catch (err) {
+      notify({ type: "error", message: err instanceof Error ? err.message : "تعذّر حفظ الفرع." });
+      return false;
+    }
+  }, [formTarget, notify]);
+
+  const handleDeleteConfirm = useCallback(async () => {
+    if (!deleteTarget) return;
+    setDeleting(true);
+    try {
+      const token = getStoredToken();
+      await del(`branches/${deleteTarget.id}`, token);
+      dispatch({ type: "DELETE", id: deleteTarget.id });
+      notify({ type: "success", message: "تم حذف الفرع بنجاح." });
+      setDeleteTarget(null);
+    } catch (err) {
+      notify({ type: "error", message: err instanceof Error ? err.message : "تعذّر حذف الفرع." });
+    } finally {
+      setDeleting(false);
+    }
+  }, [deleteTarget, notify]);
+
+  const cardStyle: React.CSSProperties = {
+    borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)",
+    background: "var(--color-surface)", overflow: "hidden", boxShadow: "var(--shadow-card)",
+  };
+
+  const thStyle: React.CSSProperties = {
+    padding: "0.75rem 1.5rem", fontSize: 11, fontWeight: 700,
+    textTransform: "uppercase", letterSpacing: "0.2em",
+    color: "var(--color-text-muted)", background: "var(--color-surface-muted)",
+    borderBottom: "1px solid var(--color-border)",
+  };
+
+  return (
+    <>
+      {notification && <Toast type={notification.type} message={notification.message} />}
+
+      {formTarget !== false && (
+        <BranchFormModal
+          editBranch={formTarget}
+          onClose={() => setFormTarget(false)}
+          onSubmit={handleFormSubmit}
+        />
+      )}
+
+      {deleteTarget && (
+        <BranchDeleteModal
+          branch={deleteTarget}
+          deleting={deleting}
+          onCancel={() => setDeleteTarget(null)}
+          onConfirm={handleDeleteConfirm}
+        />
+      )}
+
+      <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
+
+        {/* Header */}
+        <header style={{ borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)", background: "var(--color-surface)", padding: "1.5rem 2rem", boxShadow: "var(--shadow-card)" }}>
+          <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600 }}>
+            إدارة الفروع
+          </p>
+          <div className="mt-3 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+            <div>
+              <h1 style={{ fontSize: "1.5rem", fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>الفروع</h1>
+              <p style={{ marginTop: "0.25rem", fontSize: 13, color: "var(--color-text-muted)" }}>
+                إجمالي <strong style={{ color: "var(--color-text-primary)" }}>{state.total}</strong> فرع
+              </p>
+            </div>
+            <div style={{ display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap" }}>
+              <div style={{ position: "relative", width: 256 }}>
+                <svg style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", width: 16, height: 16, color: "var(--color-text-hint)", pointerEvents: "none" }}
+                  fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                  <circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" />
+                </svg>
+                <input type="text" placeholder="بحث بالاسم..." value={search}
+                  onChange={e => { setSearch(e.target.value); setPage(1); }} dir="rtl"
+                  style={{ width: "100%", height: 40, paddingRight: 36, paddingLeft: 12, borderRadius: "var(--radius-lg)", border: "1px solid var(--color-border)", background: "var(--color-surface)", fontSize: 13, color: "var(--color-text-primary)", outline: "none", fontFamily: "var(--font-sans)" }} />
+              </div>
+              <button type="button" onClick={() => setFormTarget(null)}
+                style={{ height: 40, padding: "0 1.125rem", borderRadius: "var(--radius-lg)", border: "none", background: "var(--color-brand-600)", fontSize: 13, fontWeight: 700, color: "#FFF", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 7, fontFamily: "var(--font-sans)", boxShadow: "0 1px 4px rgba(37,99,235,.35)", whiteSpace: "nowrap" }}>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                  <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
+                </svg>
+                إضافة فرع
+              </button>
+            </div>
+          </div>
+        </header>
+
+        {state.error && <Alert type="error" message={state.error} onClose={() => dispatch({ type: "CLEAR_ERR" })} />}
+
+        {/* Table */}
+        <div style={cardStyle}>
+          <div dir="rtl" style={{ display: "grid", gridTemplateColumns: "2fr 2fr 1.5fr 1fr 100px", ...thStyle }}>
+            <span>الفرع</span>
+            <span>العنوان</span>
+            <span>الهاتف</span>
+            <span style={{ textAlign: "center" }}>تاريخ الإنشاء</span>
+            <span style={{ textAlign: "center" }}>إجراءات</span>
+          </div>
+
+          {state.loading ? (
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, padding: "4rem 0", color: "var(--color-text-muted)" }}>
+              <Spinner size="sm" className="text-blue-600" />
+              <span style={{ fontSize: 13 }}>جارٍ التحميل…</span>
+            </div>
+          ) : state.branches.length === 0 ? (
+            <div style={{ textAlign: "center", padding: "4rem 1rem" }}>
+              <p style={{ fontSize: 13, color: "var(--color-text-muted)" }}>
+                {search ? `لا توجد نتائج لـ "${search}"` : "لا توجد فروع لعرضها."}
+              </p>
+              {!search && (
+                <button type="button" onClick={() => setFormTarget(null)}
+                  style={{ marginTop: 12, fontSize: 13, fontWeight: 600, color: "var(--color-brand-600)", background: "none", border: "none", cursor: "pointer", textDecoration: "underline" }}>
+                  أضف أول فرع
+                </button>
+              )}
+            </div>
+          ) : (
+            <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
+              {state.branches.map((b, i) => (
+                <li key={b.id} style={{
+                  display: "grid", gridTemplateColumns: "2fr 2fr 1.5fr 1fr 100px",
+                  alignItems: "center", gap: "0.5rem", padding: "0.875rem 1.5rem",
+                  borderBottom: "1px solid var(--color-border)",
+                  background: i % 2 !== 0 ? "var(--color-surface-muted)" : "transparent",
+                  fontSize: 13,
+                }}>
+                  <div>
+                    <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>{b.name}</p>
+                    <p style={{ marginTop: 2, fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--color-text-muted)" }}>{b.id.slice(0, 8)}…</p>
+                  </div>
+                  <span style={{ color: "var(--color-text-secondary)" }}>{b.address ?? "—"}</span>
+                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--color-text-secondary)" }}>{b.phone ?? "—"}</span>
+                  <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
+                    {new Date(b.createdAt).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" })}
+                  </span>
+                  <div style={{ display: "flex", justifyContent: "center", gap: 6 }}>
+                    <button type="button" title="تعديل" onClick={() => setFormTarget(b)}
+                      style={{ width: 32, height: 32, borderRadius: "var(--radius-md)", border: "1px solid #BFDBFE", background: "#EFF6FF", color: "#1D4ED8", cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                      </svg>
+                    </button>
+                    <button type="button" title="حذف" onClick={() => setDeleteTarget(b)}
+                      style={{ width: 32, height: 32, borderRadius: "var(--radius-md)", border: "1px solid #FECACA", background: "#FEF2F2", color: "#DC2626", cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <polyline points="3 6 5 6 21 6" /><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+                        <path d="M10 11v6M14 11v6" /><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
+                      </svg>
+                    </button>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+
+          {state.pages > 1 && (
+            <div dir="rtl" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", borderTop: "1px solid var(--color-border)", padding: "0.875rem 1.5rem" }}>
+              <span style={{ fontSize: 12, color: "var(--color-text-muted)" }}>
+                صفحة <strong style={{ color: "var(--color-text-primary)" }}>{page}</strong> من <strong style={{ color: "var(--color-text-primary)" }}>{state.pages}</strong>
+              </span>
+              <div style={{ display: "flex", gap: "0.5rem" }}>
+                {[
+                  { label: "السابق", action: () => setPage(p => Math.max(1, p - 1)), disabled: page === 1 },
+                  { label: "التالي", action: () => setPage(p => Math.min(state.pages, p + 1)), disabled: page === state.pages },
+                ].map(btn => (
+                  <button key={btn.label} onClick={btn.action} disabled={btn.disabled}
+                    style={{ borderRadius: "var(--radius-lg)", border: "1px solid var(--color-border)", background: "var(--color-surface-muted)", padding: "0.375rem 0.875rem", fontSize: 12, color: "var(--color-text-secondary)", cursor: btn.disabled ? "not-allowed" : "pointer", opacity: btn.disabled ? 0.4 : 1, fontFamily: "var(--font-sans)" }}>
+                    {btn.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </section>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/app/dashboard/cars/page.tsx b/app/dashboard/cars/page.tsx
index 0a358f0..1b7eaf9 100644
--- a/app/dashboard/cars/page.tsx
+++ b/app/dashboard/cars/page.tsx
@@ -2,13 +2,13 @@
 // app/(dashboard)/cars/page.tsx
 
 import { useCallback, useState } from "react";
-import { Spinner, Alert } from "@/Components/UI";
-import { CarFormModal }   from "@/Components/car/CarFormModal";
-import { CarDetailPanel } from "@/Components/car/CarDetailPanel";
-import { CarDeleteModal } from "@/Components/car/CarDeleteModal";
-import { useCars, useCarMutations, useToast } from "@/hooks/useCars";
-import { fmtDateShort, isExpiringSoon, STATUS_MAP, INS_MAP } from "@/types/car";
-import type { Car, CreateCarPayload, ToastMsg, UpdateCarPayload } from "@/types/car";
+import { Spinner, Alert } from "@/src/Components/UI";
+import { CarFormModal }   from "@/src/Components/car/CarFormModal";
+import { CarDetailPanel } from "@/src/Components/car/CarDetailPanel";
+import { CarDeleteModal } from "@/src/Components/car/CarDeleteModal";
+import { useCars, useCarMutations, useToast } from "@/src/hooks/useCars";
+import { fmtDateShort, isExpiringSoon, STATUS_MAP, INS_MAP } from "@/src/types/car";
+import type { Car, CreateCarPayload, ToastMsg, UpdateCarPayload } from "@/src/types/car";
 
 // ── Toast ─────────────────────────────────────────────────────────────────────
 
diff --git a/app/dashboard/clients/[clientId]/addresses/page.tsx b/app/dashboard/clients/[clientId]/addresses/page.tsx
index ed58d08..7fcb6ad 100644
--- a/app/dashboard/clients/[clientId]/addresses/page.tsx
+++ b/app/dashboard/clients/[clientId]/addresses/page.tsx
@@ -2,18 +2,18 @@
 
 import { useEffect, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
-import { Alert }              from "@/Components/UI";
-import { Toast }              from "@/Components/Client/Toast";
-import { useClientAddresses } from "@/hooks/useClientAddresses";
-import { clientService }      from "@/services/client.service";
-import { getStoredToken }     from "@/lib/auth";
+import { Alert }              from "@/src/Components/UI";
+import { Toast }              from "@/src/Components/Client/Toast";
+import { useClientAddresses } from "@/src/hooks/useClientAddresses";
+import { clientService }      from "@/src/services/client.service";
+import { getStoredToken }     from "@/src/lib/auth";
 import type {
   Client,
   ClientAddress,
   ClientAddressFormData,
-} from "@/types/client";
-import { AddressFormModal } from "@/Components/Client/Addressformmodal";
-import { DeleteConfirmModal } from "@/Components/Client/Deleteconfirmmodal";
+} from "@/src/types/client";
+import { AddressFormModal } from "@/src/Components/Client/Addressformmodal";
+import { DeleteConfirmModal } from "@/src/Components/Client/Deleteconfirmmodal";
 
 // ── Helpers ────────────────────────────────────────────────────────────────
 
diff --git a/app/dashboard/clients/page.tsx b/app/dashboard/clients/page.tsx
index d8ca959..9f4c375 100644
--- a/app/dashboard/clients/page.tsx
+++ b/app/dashboard/clients/page.tsx
@@ -2,13 +2,13 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { Alert }               from "@/Components/UI";
-import { Toast }               from "@/Components/Client/Toast";
-import { useClients }          from "@/hooks/useClients";
-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";
+import { Alert }               from "@/src/Components/UI";
+import { Toast }               from "@/src/Components/Client/Toast";
+import { useClients }          from "@/src/hooks/useClients";
+import type { Client, ClientFormData } from "@/src/types/client";
+import { ClientFormModal } from "@/src/Components/Client/Clientformmodal";
+import { ClientTable } from "@/src/Components/Client/Clienttable";
+import { DeleteConfirmModal } from "@/src/Components/Client/Deleteconfirmmodal";
 
 export default function ClientsPage() {
   const router = useRouter();
diff --git a/app/dashboard/drivers/[driverId]/page.tsx b/app/dashboard/drivers/[driverId]/page.tsx
index a8dbcc9..65436c4 100644
--- a/app/dashboard/drivers/[driverId]/page.tsx
+++ b/app/dashboard/drivers/[driverId]/page.tsx
@@ -2,31 +2,22 @@
 
 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 { Spinner } from "@/src/Components/UI";
+import { DriverFormModal } from "@/src/Components/Driver/DriverFormModal";
+import { DriverDeleteModal } from "@/src/Components/Driver/DriverDeleteModal";
+import { DriverReportPanel } from "@/src/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";
+import type { Driver, CreateDriverPayload, UpdateDriverPayload } from "@/src/types/driver";
+import { DRIVER_STATUS_MAP, DRIVER_CARD_TYPE_MAP, NATIONAL_ID_TYPE_MAP } from "@/src/types/driver";
+import { PhotoCard } from "@/src/Components/Driver/DriverPhotos";
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
 function fmtDate(iso?: string | null): string {
   if (!iso) return "—";
   return new Date(iso).toLocaleDateString("ar-SA", {
-    year: "numeric",
-    month: "long",
-    day: "numeric",
+    year: "numeric", month: "long", day: "numeric",
   });
 }
 
@@ -37,40 +28,21 @@ function isExpiringSoon(iso?: string | null): boolean {
 
 // ── Sub-components ────────────────────────────────────────────────────────────
 
-function SectionCard({
-  title,
-  children,
-}: {
-  title: string;
-  children: React.ReactNode;
-}) {
+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,
-          }}
-        >
+    <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>
@@ -79,123 +51,59 @@ function SectionCard({
   );
 }
 
-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",
-        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}
+    <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 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 [driver, setDriver]           = useState<Driver | null>(null);
+  const [loading, setLoading]         = useState(true);
+  const [error, setError]             = useState<string | null>(null);
   const [avatarError, setAvatarError] = useState(false);
+  // Reset avatar error when photo changes after an update
+  useEffect(() => {
+    console.log(driver?.photoUrl);
+    
+    setAvatarError(false);
+  }, [driver?.photoUrl]);
+  // Toast shown after edit/delete actions on this page
+  const [toast, setToast]             = useState<{ type: "success" | "error"; message: string } | null>(null);
 
-  // ── Modal state ───────────────────────────────────────────────────────────
   const [editOpen, setEditOpen]     = useState(false);
   const [deleteOpen, setDeleteOpen] = useState(false);
   const [deleting, setDeleting]     = useState(false);
 
+  const showToast = useCallback((type: "success" | "error", message: string) => {
+    setToast({ type, message });
+    setTimeout(() => setToast(null), 4000);
+  }, []);
+
   // ── Load driver ───────────────────────────────────────────────────────────
   const loadDriver = useCallback(async () => {
     if (!driverId) return;
@@ -212,27 +120,37 @@ export default function DriverDetailPage() {
     }
   }, [driverId]);
 
-  useEffect(() => {
-    loadDriver();
-  }, [loadDriver]);
+  useEffect(() => { loadDriver(); }, [loadDriver]);
 
   // ── Edit submit ───────────────────────────────────────────────────────────
   const handleEditSubmit = useCallback(
-    async (
-      payload: CreateDriverPayload | UpdateDriverPayload,
-      _isNew: boolean,
-    ): Promise<boolean> => {
+    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);
+        const typedPayload = payload as UpdateDriverPayload & {
+          photo?: File; nationalPhoto?: File; driverCardPhoto?: File;
+        };
+        const hasFiles = typedPayload.photo || typedPayload.nationalPhoto || typedPayload.driverCardPhoto;
+
+        if (hasFiles) {
+          // Use multipart — JSON.stringify converts File to {} which fails validation
+          await driverService.updateWithImages(driver.id, typedPayload, token);
+        } else {
+          await driverService.update(driver.id, typedPayload, token);
+        }
+
+        // Re-fetch to reflect updated status, name, photos, etc.
         await loadDriver();
+        showToast("success", "تم تحديث بيانات السائق بنجاح.");
         return true;
-      } catch {
+      } catch (err) {
+        const message = err instanceof Error ? err.message : "تعذّر تحديث بيانات السائق.";
+        showToast("error", message);
         return false;
       }
     },
-    [driver, loadDriver],
+    [driver, loadDriver, showToast],
   );
 
   // ── Delete confirm ────────────────────────────────────────────────────────
@@ -243,27 +161,19 @@ export default function DriverDetailPage() {
       const token = getStoredToken();
       await driverService.delete(driver.id, token);
       router.push("/dashboard/drivers");
-    } catch {
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "تعذّر حذف السائق.";
+      showToast("error", message);
       setDeleting(false);
     }
-  }, [driver, router]);
+  }, [driver, router, showToast]);
 
-  // ── 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)",
-        }}
-      >
+      <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>
@@ -273,37 +183,14 @@ export default function DriverDetailPage() {
   // ── 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)",
-          }}
-        >
+      <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>
@@ -315,35 +202,32 @@ export default function DriverDetailPage() {
     <>
       <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
 
+        {/* ── Toast notification ── */}
+        {toast && (
+          <div style={{
+            borderRadius: "var(--radius-lg)",
+            border: `1px solid ${toast.type === "success" ? "#BBF7D0" : "#FECACA"}`,
+            background: toast.type === "success" ? "#DCFCE7" : "#FEF2F2",
+            padding: "0.75rem 1.25rem",
+            fontSize: 13,
+            fontWeight: 600,
+            color: toast.type === "success" ? "#166534" : "#DC2626",
+          }}>
+            {toast.type === "success" ? "✓ " : "⚠ "}{toast.message}
+          </div>
+        )}
+
         {/* ── 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)",
-            }}
-          >
+        <header style={{
+          borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)",
+          background: "var(--color-surface)", padding: "1.5rem 2rem", boxShadow: "var(--shadow-card)",
+        }}>
+          <button type="button" onClick={() => router.back()} style={{
+            display: "inline-flex", alignItems: "center", gap: 6,
+            fontSize: 12, fontWeight: 600, color: "var(--color-text-muted)",
+            background: "none", border: "none", cursor: "pointer", padding: 0,
+            marginBottom: "1rem", fontFamily: "var(--font-sans)",
+          }}>
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
               <path d="M19 12H5M12 5l-7 7 7 7" />
             </svg>
@@ -351,68 +235,35 @@ export default function DriverDetailPage() {
           </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",
-                }}
-              >
+              <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)}
-                  />
+                  <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>
+                  <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>
+                <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.userName}</span>
                   )}
-                  <span style={{ fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--color-text-muted)" }}>
-                    {driver.phone}
-                  </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={{
+                      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>
@@ -421,45 +272,20 @@ export default function DriverDetailPage() {
               </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 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)",
-                }}
-              >
+              <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" />
@@ -471,103 +297,58 @@ export default function DriverDetailPage() {
         </header>
 
         {/* ── Content grid ── */}
-        <div
-          style={{
-            display: "grid",
-            gridTemplateColumns: "1fr 1fr",
-            gap: "1.5rem",
-          }}
-        >
-          {/* Personal Info */}
+        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1.5rem" }}>
           <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 ?? "—"} />
+            <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.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="انتهاء الهوية" 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)}
-            />
+            <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)}
-            />
+            <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 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>
-                        )}
+                        <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>
+                      <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>{fmtDate(h.createdAt)}</span>
                     </div>
                   );
                 })}
@@ -576,31 +357,22 @@ export default function DriverDetailPage() {
           )}
         </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.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",
-          }}
-        >
+        <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}
@@ -610,7 +382,6 @@ export default function DriverDetailPage() {
         />
       )}
 
-      {/* ── Delete modal ── */}
       {deleteOpen && (
         <DriverDeleteModal
           driver={driver}
diff --git a/app/dashboard/drivers/page.tsx b/app/dashboard/drivers/page.tsx
index 9c354b8..74e08bd 100644
--- a/app/dashboard/drivers/page.tsx
+++ b/app/dashboard/drivers/page.tsx
@@ -1,15 +1,12 @@
 "use client";
 
-
 import { useState, useCallback } from "react";
-import { Alert, Spinner } from "@/Components/UI";
-import { DriverFormModal } from "@/Components/Driver/DriverFormModal";
-import { DriverDeleteModal } from "@/Components/Driver/DriverDeleteModal";
-import { driverService } from "@/services";
-import { getStoredToken } from "@/lib/auth";
-import { useDrivers } from "@/hooks/useDriver";
-import { CreateDriverPayload, Driver, DRIVER_STATUS_MAP, UpdateDriverPayload } from "@/types/driver";
-import { DriverDetailPanel } from "@/Components/Driver/DriverDetailPanel";
+import { Alert, Spinner } from "@/src/Components/UI";
+import { DriverFormModal } from "@/src/Components/Driver/DriverFormModal";
+import { DriverDeleteModal } from "@/src/Components/Driver/DriverDeleteModal";
+import { useDrivers } from "@/src/hooks/useDriver";
+import { CreateDriverPayload, Driver, DRIVER_STATUS_MAP, UpdateDriverPayload } from "@/src/types/driver";
+import { DriverDetailPanel } from "@/src/Components/Driver/DriverDetailPanel";
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
@@ -46,13 +43,28 @@ const thStyle: React.CSSProperties = {
   borderBottom: "1px solid var(--color-border)",
 };
 
+// Shared across header + rows — keep these in sync or columns will misalign.
+const ROW_GRID_COLUMNS = "2fr 1.2fr 1fr 1.1fr 1.1fr 1fr 0.8fr";
+
+const iconBtnBase: React.CSSProperties = {
+  width: 30,
+  height: 30,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: "var(--radius-md)",
+  cursor: "pointer",
+  flexShrink: 0,
+};
+
 // ── Page Component ────────────────────────────────────────────────────────────
 
 export default function DriversPage() {
   const {
     drivers, loading, error, total, pages, page,
     search, setPage, handleSearch, clearError,
-    deleteDriver, notification, reload,
+    createDriver, updateDriver, deleteDriver,
+    notification, reload,
   } = useDrivers();
 
   // ── Panel / modal state ───────────────────────────────────────────────────
@@ -60,6 +72,8 @@ export default function DriversPage() {
   const [formDriver, setFormDriver]             = useState<Driver | null | "new">(null);
   const [deleteTarget, setDeleteTarget]         = useState<Driver | null>(null);
   const [deleting, setDeleting]                 = useState(false);
+  // Bumped after a successful edit to force the detail panel to re-fetch
+  const [panelRefreshKey, setPanelRefreshKey]   = useState(0);
 
   // ── Handlers ──────────────────────────────────────────────────────────────
   const handleEdit = useCallback((driver: Driver) => {
@@ -77,34 +91,33 @@ export default function DriversPage() {
       payload: CreateDriverPayload | UpdateDriverPayload,
       isNew: boolean,
     ): Promise<boolean> => {
-      try {
-        const token = getStoredToken();
-        if (isNew) {
-          // Use multipart if there are file fields
-          const hasFiles =
-            (payload as CreateDriverPayload & { photo?: File }).photo ||
-            (payload as CreateDriverPayload & { nationalPhoto?: File }).nationalPhoto ||
-            (payload as CreateDriverPayload & { driverCardPhoto?: File }).driverCardPhoto;
+      let ok: boolean;
 
-          if (hasFiles) {
-            await driverService.createWithImages(
-              payload as Parameters<typeof driverService.createWithImages>[0],
-              token,
-            );
-          } else {
-            await driverService.create(payload as CreateDriverPayload, token);
-          }
-        } else {
-          const id = (formDriver as Driver).id;
-          await driverService.update(id, payload as UpdateDriverPayload, token);
-        }
-        reload();
-        return true;
-      } catch {
-        return false;
+      if (isNew) {
+        ok = await createDriver(
+          payload as CreateDriverPayload & {
+            photo?: File;
+            nationalPhoto?: File;
+            driverCardPhoto?: File;
+          },
+        );
+      } else {
+        const id = (formDriver as Driver).id;
+        ok = await updateDriver(
+          id,
+          payload as UpdateDriverPayload & {
+            photo?: File;
+            nationalPhoto?: File;
+            driverCardPhoto?: File;
+          },
+        );
+        // Re-fetch detail panel so updated status is visible immediately
+        if (ok && selectedDriverId) setPanelRefreshKey((k) => k + 1);
       }
+
+      return ok;
     },
-    [formDriver, reload],
+    [formDriver, createDriver, updateDriver, selectedDriverId],
   );
 
   const handleConfirmDelete = useCallback(async () => {
@@ -198,10 +211,7 @@ export default function DriversPage() {
 
         {/* ── Notifications ── */}
         {notification && (
-          <Alert
-            type={notification.type}
-            message={notification.message}
-          />
+          <Alert type={notification.type} message={notification.message} />
         )}
         {error && (
           <Alert type="error" message={error} onClose={clearError} />
@@ -213,7 +223,7 @@ export default function DriversPage() {
             dir="rtl"
             style={{
               display: "grid",
-              gridTemplateColumns: "2fr 1.2fr 1fr 1.1fr 1.1fr 1fr",
+              gridTemplateColumns: ROW_GRID_COLUMNS,
               ...thStyle,
             }}
           >
@@ -223,6 +233,7 @@ export default function DriversPage() {
             <span>انتهاء الرخصة</span>
             <span>انتهاء الهوية</span>
             <span>الحالة</span>
+            <span>إجراءات</span>
           </div>
 
           {loading ? (
@@ -247,7 +258,7 @@ export default function DriversPage() {
                     onClick={() => setSelectedDriverId(d.id)}
                     style={{
                       display: "grid",
-                      gridTemplateColumns: "2fr 1.2fr 1fr 1.1fr 1.1fr 1fr",
+                      gridTemplateColumns: ROW_GRID_COLUMNS,
                       alignItems: "center", gap: "0.5rem",
                       padding: "0.875rem 1.5rem",
                       borderBottom: "1px solid var(--color-border)",
@@ -259,29 +270,18 @@ export default function DriversPage() {
                     onMouseEnter={(e) => (e.currentTarget.style.background = "var(--color-surface-hover, #F8FAFC)")}
                     onMouseLeave={(e) => (e.currentTarget.style.background = i % 2 !== 0 ? "var(--color-surface-muted)" : "transparent")}
                   >
-                    {/* Name + phone */}
                     <div>
                       <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>{d.name}</p>
                       <p style={{ marginTop: 2, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--color-text-muted)" }}>{d.phone}</p>
                     </div>
-
-                    {/* Branch */}
                     <span style={{ color: "var(--color-text-secondary)" }}>{d.branch?.name ?? "—"}</span>
-
-                    {/* Nationality */}
                     <span style={{ color: "var(--color-text-secondary)" }}>{d.nationality ?? "—"}</span>
-
-                    {/* License expiry */}
                     <span style={{ fontSize: 12, fontWeight: licWarn ? 600 : 400, color: licWarn ? "#D97706" : "var(--color-text-secondary)" }}>
                       {licWarn && "⚠ "}{fmtDate(d.licenseExpiry)}
                     </span>
-
-                    {/* National ID expiry */}
                     <span style={{ fontSize: 12, fontWeight: idWarn ? 600 : 400, color: idWarn ? "#D97706" : "var(--color-text-secondary)" }}>
                       {idWarn && "⚠ "}{fmtDate((d as Driver & { nationalIdExpiry?: string }).nationalIdExpiry)}
                     </span>
-
-                    {/* Status badge */}
                     <span style={{
                       display: "inline-flex", alignItems: "center", gap: 5,
                       borderRadius: "var(--radius-full)",
@@ -294,6 +294,50 @@ export default function DriversPage() {
                       <span style={{ width: 6, height: 6, borderRadius: "50%", background: statusCfg.dot, flexShrink: 0 }} />
                       {statusCfg.label}
                     </span>
+
+                    {/* ── Inline row actions: edit / delete ──
+                         stopPropagation is required on both buttons so the
+                         click doesn't bubble up to the <li> onClick and
+                         open the detail panel as well. */}
+                    <div style={{ display: "flex", gap: "0.4rem" }}>
+                      <button
+                        type="button"
+                        aria-label="تعديل السائق"
+                        title="تعديل"
+                        onClick={(e) => { e.stopPropagation(); handleEdit(d); }}
+                        style={{
+                          ...iconBtnBase,
+                          border: "1px solid var(--color-brand-200)",
+                          background: "var(--color-brand-50, #EFF6FF)",
+                          color: "var(--color-brand-600)",
+                        }}
+                      >
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                        </svg>
+                      </button>
+
+                      <button
+                        type="button"
+                        aria-label="حذف السائق"
+                        title="حذف"
+                        onClick={(e) => { e.stopPropagation(); handleDelete(d); }}
+                        style={{
+                          ...iconBtnBase,
+                          border: "1px solid #FECACA",
+                          background: "#FEF2F2",
+                          color: "#DC2626",
+                        }}
+                      >
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                          <polyline points="3 6 5 6 21 6" />
+                          <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+                          <path d="M10 11v6M14 11v6" />
+                          <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
+                        </svg>
+                      </button>
+                    </div>
                   </li>
                 );
               })}
@@ -344,9 +388,10 @@ export default function DriversPage() {
         </div>
       </section>
 
-      {/* ── Detail panel ── */}
+      {/* ── Detail panel — key forces re-fetch after successful edit ── */}
       {selectedDriverId && (
         <DriverDetailPanel
+          key={`${selectedDriverId}-${panelRefreshKey}`}
           driverId={selectedDriverId}
           onClose={() => setSelectedDriverId(null)}
           onEdit={handleEdit}
diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx
index d51c63c..c979de1 100644
--- a/app/dashboard/layout.tsx
+++ b/app/dashboard/layout.tsx
@@ -11,8 +11,23 @@ export default function DashboardLayout({
       className="flex min-h-screen"
       style={{ background: "var(--color-surface-muted)" }}
     >
+      {/*
+        Sidebar is still the first flex child. With dir="rtl" on <html>
+        (set in app/layout.tsx) this is enough to place the full
+        sidebar on the right with no positional CSS — see Sidebar.tsx.
+      */}
       <Sidebar />
-      <div className="flex min-w-0 flex-1 flex-col">
+
+      {/*
+        The compact icon rail (md and below) is `position: fixed`, so it
+        doesn't take up flex space. This wrapper reserves room for it
+        with `paddingInlineEnd`, which means "right padding in RTL,
+        left padding in LTR" — it never needs to be touched again if
+        direction changes.
+      */}
+      <div
+        className="flex min-w-0 flex-1 flex-col md:[padding-inline-end:var(--sidebar-width-compact)] lg:[padding-inline-end:0]"
+      >
         <Topbar />
         <main className="flex-1 p-6">{children}</main>
       </div>
diff --git a/app/dashboard/orders/page.tsx b/app/dashboard/orders/page.tsx
index 5e7548f..c2cc708 100644
--- a/app/dashboard/orders/page.tsx
+++ b/app/dashboard/orders/page.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { getStoredToken } from "@/lib/auth";
-import { get } from "@/services/api";
-import { Spinner, Alert } from "@/Components/UI";
+import { getStoredToken } from "@/src/lib/auth";
+import { get } from "@/src/services/api";
+import { Spinner, Alert } from "@/src/Components/UI";
 
 interface Order {
   id: string;
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 8377cf4..44f9fec 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -3,9 +3,9 @@
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect, useMemo } from "react";
-import { useDashboardSummary } from "../../hooks/useDashboardSummary";
-import { clearAuth, getStoredUser } from "../../lib/auth";
-import { Spinner, Alert } from "../../Components/UI";
+import { useDashboardSummary } from "@/src/hooks/useDashboardSummary";
+import { clearAuth, getStoredUser } from "@/src/lib/auth";
+import { Spinner, Alert } from "@/src/Components/UI";
 
 export default function DashboardPage() {
   const router = useRouter();
@@ -48,15 +48,15 @@ export default function DashboardPage() {
           backdropFilter: "blur(16px)",
         }}
       >
-        <p style={{ fontSize: 11, letterSpacing: "0.35em", textTransform: "uppercase", color: "#67E8F9" }}>
+        <p style={{ fontSize: 11, letterSpacing: "0.35em", textTransform: "uppercase", color: "#67E8F9", textAlign: "start" }}>
           لوحة العمليات
         </p>
         <div className="mt-4 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
           <div>
-            <h1 style={{ fontSize: "clamp(1.5rem,3vw,2rem)", fontWeight: 600, color: "var(--color-text-dark-primary)", margin: 0 }}>
+            <h1 style={{ fontSize: "clamp(1.5rem,3vw,2rem)", fontWeight: 600, color: "var(--color-text-dark-primary)", margin: 0, textAlign: "start" }}>
               ذكاء الأسطول في لمحة سريعة
             </h1>
-            <p style={{ marginTop: "0.75rem", maxWidth: 680, color: "var(--color-text-dark-muted)", fontSize: 14, lineHeight: 1.6 }}>
+            <p style={{ marginTop: "0.75rem", maxWidth: 680, color: "var(--color-text-dark-muted)", fontSize: 14, lineHeight: 1.6, textAlign: "start" }}>
               عرض واضح لطلبات الأسطول وتنبيهات السلامة وتقدم الرحلات.
             </p>
           </div>
@@ -111,23 +111,28 @@ export default function DashboardPage() {
                 }}
               >
                 <div style={{ height: 3, borderRadius: 999, background: item.accent, marginBottom: "1rem" }} />
-                <p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "var(--color-text-dark-muted)" }}>
+                <p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "var(--color-text-dark-muted)", textAlign: "start" }}>
                   {item.label}
                 </p>
-                <p style={{ fontSize: "2.25rem", fontWeight: 600, color: "var(--color-text-dark-primary)", marginTop: "0.5rem" }}>
+                <p style={{ fontSize: "2.25rem", fontWeight: 600, color: "var(--color-text-dark-primary)", marginTop: "0.5rem", textAlign: "start" }}>
                   {item.value}
                 </p>
               </article>
             ))}
           </div>
 
-          {/* ── Active trips + alerts ── */}
+          {/* ── Active trips + alerts ──
+              Column order in the template below stays [trips, alerts] —
+              same reading order as before. In RTL this now renders
+              trips on the right (read first) and alerts on the left,
+              which is the correct mirror; no class change needed (see
+              grid + RTL note in the project report). */}
           <div className="grid gap-6 xl:grid-cols-[1.1fr_0.9fr]">
             <article style={{ borderRadius: "var(--radius-2xl)", border: "1px solid var(--color-border-dark)", background: "var(--color-surface-dark-card)", padding: "1.5rem", boxShadow: "var(--shadow-card)" }}>
               <div className="flex items-center justify-between">
                 <div>
-                  <p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "#67E8F9" }}>الرحلات النشطة</p>
-                  <h2 style={{ fontSize: "1.25rem", fontWeight: 600, color: "var(--color-text-dark-primary)", marginTop: "0.5rem" }}>تقدم الرحلات</h2>
+                  <p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "#67E8F9", textAlign: "start" }}>الرحلات النشطة</p>
+                  <h2 style={{ fontSize: "1.25rem", fontWeight: 600, color: "var(--color-text-dark-primary)", marginTop: "0.5rem", textAlign: "start" }}>تقدم الرحلات</h2>
                 </div>
                 <span style={{ borderRadius: "var(--radius-full)", background: "rgba(52,211,153,0.10)", padding: "0.25rem 0.75rem", fontSize: 11, color: "#A7F3D0" }}>
                   مباشر
@@ -138,44 +143,54 @@ export default function DashboardPage() {
                   <div key={trip.id} style={{ borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border-dark)", background: "var(--color-surface-dark-raised)", padding: "1rem" }}>
                     <div className="flex items-center justify-between gap-3">
                       <div>
-                        <p style={{ fontSize: 13, fontWeight: 600, color: "var(--color-text-dark-primary)" }}>{trip.tripNumber}</p>
-                        <p style={{ fontSize: 13, color: "var(--color-text-dark-muted)" }}>{trip.title}</p>
+                        <p style={{ fontSize: 13, fontWeight: 600, color: "var(--color-text-dark-primary)", textAlign: "start" }}>
+                          <span className="ltr-embed">{trip.tripNumber}</span>
+                        </p>
+                        <p style={{ fontSize: 13, color: "var(--color-text-dark-muted)", textAlign: "start" }}>{trip.title}</p>
                       </div>
                       <span style={{ borderRadius: "var(--radius-full)", background: "rgba(103,232,249,0.10)", padding: "0.25rem 0.75rem", fontSize: 11, color: "#CFFAFE" }}>
                         {trip.progress}%
                       </span>
                     </div>
                     <div style={{ marginTop: "0.75rem", height: 6, borderRadius: 999, background: "rgba(255,255,255,0.08)" }}>
+                      {/*
+                        Progress fill: width % growing from the bar's
+                        start edge is correct in both directions since
+                        `width` itself is non-directional — the bar's
+                        own inline-start (right, in RTL) is where the
+                        fill begins, matching how the rest of the RTL
+                        layout fills from the right. No change needed.
+                      */}
                       <div style={{ height: 6, borderRadius: 999, width: `${trip.progress}%`, background: "linear-gradient(90deg,#06B6D4,#34D399)" }} />
                     </div>
                   </div>
                 )) : (
-                  <p style={{ fontSize: 13, color: "var(--color-text-dark-muted)" }}>لا توجد رحلات نشطة حالياً.</p>
+                  <p style={{ fontSize: 13, color: "var(--color-text-dark-muted)", textAlign: "start" }}>لا توجد رحلات نشطة حالياً.</p>
                 )}
               </div>
             </article>
 
             <article style={{ borderRadius: "var(--radius-2xl)", border: "1px solid var(--color-border-dark)", background: "var(--color-surface-dark-card)", padding: "1.5rem", boxShadow: "var(--shadow-card)" }}>
-              <p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "#FCD34D" }}>تنبيهات الالتزام</p>
-              <h2 style={{ fontSize: "1.25rem", fontWeight: 600, color: "var(--color-text-dark-primary)", marginTop: "0.5rem" }}>التجديدات القادمة</h2>
+              <p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "#FCD34D", textAlign: "start" }}>تنبيهات الالتزام</p>
+              <h2 style={{ fontSize: "1.25rem", fontWeight: 600, color: "var(--color-text-dark-primary)", marginTop: "0.5rem", textAlign: "start" }}>التجديدات القادمة</h2>
               <div style={{ marginTop: "1.5rem", display: "flex", flexDirection: "column", gap: "0.75rem" }}>
                 {(alerts?.expiringCars || []).slice(0, 3).map((item, i) => (
-                  <div key={`car-${i}`} style={{ borderRadius: "var(--radius-xl)", border: "1px solid rgba(251,191,36,0.20)", background: "rgba(251,191,36,0.06)", padding: "0.75rem 1rem", fontSize: 13, color: "var(--color-text-dark-primary)" }}>
+                  <div key={`car-${i}`} style={{ borderRadius: "var(--radius-xl)", border: "1px solid rgba(251,191,36,0.20)", background: "rgba(251,191,36,0.06)", padding: "0.75rem 1rem", fontSize: 13, color: "var(--color-text-dark-primary)", textAlign: "start" }}>
                     {String((item as Record<string, unknown>).message || "Vehicle expiry alert")}
                   </div>
                 ))}
                 {(alerts?.expiringDrivers || []).slice(0, 3).map((item, i) => (
-                  <div key={`driver-${i}`} style={{ borderRadius: "var(--radius-xl)", border: "1px solid rgba(251,113,133,0.20)", background: "rgba(244,63,94,0.06)", padding: "0.75rem 1rem", fontSize: 13, color: "var(--color-text-dark-primary)" }}>
+                  <div key={`driver-${i}`} style={{ borderRadius: "var(--radius-xl)", border: "1px solid rgba(251,113,133,0.20)", background: "rgba(244,63,94,0.06)", padding: "0.75rem 1rem", fontSize: 13, color: "var(--color-text-dark-primary)", textAlign: "start" }}>
                     {String((item as Record<string, unknown>).message || "Driver expiry alert")}
                   </div>
                 ))}
                 {(alerts?.upcomingMaint || []).slice(0, 3).map((item, i) => (
-                  <div key={`maint-${i}`} style={{ borderRadius: "var(--radius-xl)", border: "1px solid rgba(103,232,249,0.20)", background: "rgba(103,232,249,0.06)", padding: "0.75rem 1rem", fontSize: 13, color: "var(--color-text-dark-primary)" }}>
+                  <div key={`maint-${i}`} style={{ borderRadius: "var(--radius-xl)", border: "1px solid rgba(103,232,249,0.20)", background: "rgba(103,232,249,0.06)", padding: "0.75rem 1rem", fontSize: 13, color: "var(--color-text-dark-primary)", textAlign: "start" }}>
                     {String((item as Record<string, unknown>).message || "Maintenance alert")}
                   </div>
                 ))}
                 {!(alerts?.expiringCars?.length || alerts?.expiringDrivers?.length || alerts?.upcomingMaint?.length) && (
-                  <p style={{ fontSize: 13, color: "var(--color-text-dark-muted)" }}>لا توجد تنبيهات حالياً.</p>
+                  <p style={{ fontSize: 13, color: "var(--color-text-dark-muted)", textAlign: "start" }}>لا توجد تنبيهات حالياً.</p>
                 )}
               </div>
             </article>
@@ -184,21 +199,29 @@ export default function DashboardPage() {
           {/* ── Security + endpoints ── */}
           <div className="grid gap-6 lg:grid-cols-2">
             <article style={{ borderRadius: "var(--radius-2xl)", border: "1px solid var(--color-border-dark)", background: "var(--color-surface-dark-card)", padding: "1.5rem", boxShadow: "var(--shadow-card)" }}>
-              <p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "#C4B5FD" }}>الأمان</p>
-              <h2 style={{ fontSize: "1.25rem", fontWeight: 600, color: "var(--color-text-dark-primary)", marginTop: "0.5rem" }}>لمحة الحساب</h2>
+              <p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "#C4B5FD", textAlign: "start" }}>الأمان</p>
+              <h2 style={{ fontSize: "1.25rem", fontWeight: 600, color: "var(--color-text-dark-primary)", marginTop: "0.5rem", textAlign: "start" }}>لمحة الحساب</h2>
               <div style={{ marginTop: "1.5rem", display: "flex", flexDirection: "column", gap: "0.75rem" }}>
-                <div style={{ borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border-dark)", background: "var(--color-surface-dark-raised)", padding: "0.875rem 1rem", fontSize: 13, color: "var(--color-text-dark-muted)" }}>
-                  آخر تسجيل دخول: {data?.accountSecurity?.lastLogin || "—"}
+                <div style={{ borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border-dark)", background: "var(--color-surface-dark-raised)", padding: "0.875rem 1rem", fontSize: 13, color: "var(--color-text-dark-muted)", textAlign: "start" }}>
+                  آخر تسجيل دخول: <span className="ltr-embed">{data?.accountSecurity?.lastLogin || "—"}</span>
                 </div>
-                <div style={{ borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border-dark)", background: "var(--color-surface-dark-raised)", padding: "0.875rem 1rem", fontSize: 13, color: "var(--color-text-dark-muted)" }}>
-                  بيانات الجهاز: {data?.accountSecurity?.requestMeta ? JSON.stringify(data.accountSecurity.requestMeta) : "—"}
+                <div style={{ borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border-dark)", background: "var(--color-surface-dark-raised)", padding: "0.875rem 1rem", fontSize: 13, color: "var(--color-text-dark-muted)", textAlign: "start" }}>
+                  {/*
+                    JSON.stringify output is structurally LTR (braces,
+                    colons, commas read left-to-right regardless of
+                    locale). Wrapping it in .ltr-embed prevents the
+                    surrounding RTL paragraph from reordering the
+                    punctuation — without this, nested objects can
+                    render with their braces visually swapped.
+                  */}
+                  بيانات الجهاز: <span className="ltr-embed">{data?.accountSecurity?.requestMeta ? JSON.stringify(data.accountSecurity.requestMeta) : "—"}</span>
                 </div>
               </div>
             </article>
 
             <article style={{ borderRadius: "var(--radius-2xl)", border: "1px solid var(--color-border-dark)", background: "var(--color-surface-dark-card)", padding: "1.5rem", boxShadow: "var(--shadow-card)" }}>
-              <p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "#6EE7B7" }}>خريطة الخلفية</p>
-              <h2 style={{ fontSize: "1.25rem", fontWeight: 600, color: "var(--color-text-dark-primary)", marginTop: "0.5rem" }}>النقاط النهائية</h2>
+              <p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "#6EE7B7", textAlign: "start" }}>خريطة الخلفية</p>
+              <h2 style={{ fontSize: "1.25rem", fontWeight: 600, color: "var(--color-text-dark-primary)", marginTop: "0.5rem", textAlign: "start" }}>النقاط النهائية</h2>
               <ul style={{ marginTop: "1.5rem", display: "flex", flexDirection: "column", gap: "0.75rem", listStyle: "none", padding: 0 }}>
                 {[
                   "/v1/dashboard/summary — نظرة عامة تشغيلية",
@@ -206,8 +229,18 @@ export default function DashboardPage() {
                   "/v1/orders — دورة شحن الطلبات",
                   "/v1/trip — تنظيم الرحلات",
                 ].map((ep) => (
-                  <li key={ep} style={{ borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border-dark)", background: "var(--color-surface-dark-raised)", padding: "0.875rem 1rem", fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--color-text-dark-muted)" }}>
-                    {ep}
+                  <li key={ep} style={{ borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border-dark)", background: "var(--color-surface-dark-raised)", padding: "0.875rem 1rem", fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--color-text-dark-muted)", textAlign: "start" }}>
+                    {/*
+                      Each entry mixes an LTR API path with an Arabic
+                      description. Splitting on the em-dash and
+                      isolating only the path keeps the route string
+                      from reading backwards while letting the Arabic
+                      half flow naturally in the paragraph's own
+                      direction.
+                    */}
+                    <span className="ltr-embed">{ep.split(" — ")[0]}</span>
+                    {" — "}
+                    {ep.split(" — ")[1]}
                   </li>
                 ))}
               </ul>
diff --git a/app/dashboard/role-permission/page.tsx b/app/dashboard/role-permission/page.tsx
new file mode 100644
index 0000000..2aec686
--- /dev/null
+++ b/app/dashboard/role-permission/page.tsx
@@ -0,0 +1,238 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { Alert, Spinner } from "@/src/Components/UI";
+import { RoleToast } from "@/src/Components/role/RoleToast";
+import { useRoles } from "@/src/hooks/useRole";
+import type { Role, Permission } from "@/src/services/role.service";
+
+// ── Module label map ───────────────────────────────────────────────────────
+const MODULE_LABELS: Record<string, string> = {
+  Role: "الأدوار", User: "المستخدمون", Branch: "الفروع",
+  Car: "المركبات", CarImage: "صور المركبات", Driver: "السائقون",
+  Order: "الطلبات", Trip: "الرحلات", Client: "العملاء",
+  Permission: "الصلاحيات", Audit: "سجل التدقيق",
+  Dashboard: "لوحة التحكم", Maintenance: "الصيانة",
+};
+const moduleLabel = (mod: string) => MODULE_LABELS[mod] ?? mod;
+
+function groupByModule(permissions: Permission[]): Record<string, Permission[]> {
+  return permissions.reduce<Record<string, Permission[]>>((acc, p) => {
+    (acc[p.module || "أخرى"] ??= []).push(p);
+    return acc;
+  }, {});
+}
+
+// ── Permission Matrix ──────────────────────────────────────────────────────
+
+function PermissionMatrix({
+  role,
+  allPermissions,
+  onSave,
+}: {
+  role: Role;
+  allPermissions: Permission[];
+  onSave: (roleId: string, permIds: string[]) => Promise<boolean>;
+}) {
+  const currentIds = role.permissions?.map(rp => rp.permission.id) ?? [];
+  const [selected, setSelected] = useState<Set<string>>(new Set(currentIds));
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+
+  const grouped = groupByModule(allPermissions);
+
+  const toggle = (id: string) => {
+    setSelected(prev => {
+      const next = new Set(prev);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+    setSaved(false);
+  };
+
+  const toggleModule = (mod: string) => {
+    const ids = (grouped[mod] ?? []).map(p => p.id);
+    const allChecked = ids.every(id => selected.has(id));
+    setSelected(prev => {
+      const next = new Set(prev);
+      allChecked ? ids.forEach(id => next.delete(id)) : ids.forEach(id => next.add(id));
+      return next;
+    });
+    setSaved(false);
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    const ok = await onSave(role.id, [...selected]);
+    setSaving(false);
+    if (ok) setSaved(true);
+  };
+
+  return (
+    <div style={{
+      borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)",
+      background: "var(--color-surface)", boxShadow: "var(--shadow-card)", overflow: "hidden",
+    }}>
+      {/* Role header */}
+      <div style={{
+        padding: "1rem 1.5rem", borderBottom: "1px solid var(--color-border)",
+        background: "var(--color-surface-muted)",
+        display: "flex", alignItems: "center", justifyContent: "space-between",
+      }}>
+        <div>
+          <p style={{ fontSize: 15, fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>{role.name}</p>
+          {role.description && (
+            <p style={{ fontSize: 12, color: "var(--color-text-muted)", marginTop: 2 }}>{role.description}</p>
+          )}
+          <p style={{ fontSize: 11, color: "var(--color-text-hint)", marginTop: 4 }}>
+            {selected.size} من {allPermissions.length} صلاحية مفعّلة
+          </p>
+        </div>
+        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+          {saved && (
+            <span style={{ fontSize: 12, color: "#166534", fontWeight: 600 }}>✓ تم الحفظ</span>
+          )}
+          <button type="button" onClick={handleSave} disabled={saving}
+            style={{
+              height: 36, padding: "0 1.25rem", 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 ? "جارٍ الحفظ…" : "حفظ"}
+          </button>
+        </div>
+      </div>
+
+      {/* Module rows */}
+      <div style={{ padding: "0.75rem" }}>
+        {Object.entries(grouped).map(([mod, perms]) => {
+          const allChecked = perms.every(p => selected.has(p.id));
+          const someChecked = !allChecked && perms.some(p => selected.has(p.id));
+          return (
+            <div key={mod} style={{ marginBottom: "0.5rem" }}>
+              {/* Module header */}
+              <div style={{
+                display: "flex", alignItems: "center", gap: 10,
+                padding: "0.5rem 0.75rem",
+                background: "var(--color-surface-muted)",
+                borderRadius: "var(--radius-md)",
+                marginBottom: "0.375rem",
+              }}>
+                <input type="checkbox" checked={allChecked}
+                  ref={el => { if (el) el.indeterminate = someChecked; }}
+                  onChange={() => toggleModule(mod)}
+                  style={{ width: 15, height: 15, cursor: "pointer", accentColor: "#2563EB" }} />
+                <span style={{ fontSize: 12, fontWeight: 700, color: "var(--color-text-primary)" }}>
+                  {moduleLabel(mod)}
+                </span>
+                <span style={{ fontSize: 10, color: "var(--color-text-muted)", marginRight: "auto" }}>
+                  {perms.filter(p => selected.has(p.id)).length}/{perms.length}
+                </span>
+              </div>
+              {/* Permissions */}
+              <div style={{ display: "flex", flexWrap: "wrap", gap: "0.375rem", paddingRight: "1.5rem" }}>
+                {perms.map(perm => {
+                  const checked = selected.has(perm.id);
+                  return (
+                    <label key={perm.id} style={{
+                      display: "inline-flex", alignItems: "center", gap: 6,
+                      padding: "0.3rem 0.625rem",
+                      borderRadius: "var(--radius-md)",
+                      border: `1px solid ${checked ? "#BFDBFE" : "var(--color-border)"}`,
+                      background: checked ? "#EFF6FF" : "var(--color-surface-muted)",
+                      cursor: "pointer", userSelect: "none",
+                    }}>
+                      <input type="checkbox" checked={checked} onChange={() => toggle(perm.id)}
+                        style={{ width: 13, height: 13, cursor: "pointer", accentColor: "#2563EB" }} />
+                      <span style={{ fontSize: 11, fontWeight: 600, color: checked ? "#1D4ED8" : "var(--color-text-primary)" }}>
+                        {perm.name}
+                      </span>
+                    </label>
+                  );
+                })}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+// ── Page ───────────────────────────────────────────────────────────────────
+
+export default function RolePermissionPage() {
+  const { roles, loading, error, permissions, clearError, updateRolePermissionsBulk, notification } = useRoles();
+  const [selectedRoleId, setSelectedRoleId] = useState<string>("");
+
+  const selectedRole = roles.find(r => r.id === selectedRoleId) ?? null;
+
+  const handleSave = useCallback(async (roleId: string, permIds: string[]): Promise<boolean> => {
+    return updateRolePermissionsBulk(roleId, permIds);
+  }, [updateRolePermissionsBulk]);
+
+  return (
+    <>
+      <RoleToast notification={notification} />
+
+      <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
+
+        {/* Header */}
+        <header style={{ borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)", background: "var(--color-surface)", padding: "1.5rem 2rem", boxShadow: "var(--shadow-card)" }}>
+          <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600 }}>
+            إدارة الصلاحيات
+          </p>
+          <div className="mt-3 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+            <div>
+              <h1 style={{ fontSize: "1.5rem", fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>
+                مصفوفة الصلاحيات
+              </h1>
+              <p style={{ marginTop: "0.25rem", fontSize: 13, color: "var(--color-text-muted)" }}>
+                إدارة صلاحيات كل دور بشكل مجمَّع
+              </p>
+            </div>
+            <div style={{ minWidth: 240 }}>
+              <select value={selectedRoleId} onChange={e => setSelectedRoleId(e.target.value)} dir="rtl"
+                style={{ width: "100%", height: 40, padding: "0 0.75rem", borderRadius: "var(--radius-lg)", border: "1px solid var(--color-border)", background: "var(--color-surface)", fontSize: 13, color: "var(--color-text-primary)", outline: "none", fontFamily: "var(--font-sans)" }}>
+                <option value="">اختر دوراً لتعديل صلاحياته</option>
+                {roles.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}
+              </select>
+            </div>
+          </div>
+        </header>
+
+        {error && <Alert type="error" message={error} onClose={clearError} />}
+
+        {loading ? (
+          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, padding: "4rem 0", color: "var(--color-text-muted)" }}>
+            <Spinner size="sm" className="text-blue-600" />
+            <span style={{ fontSize: 13 }}>جارٍ التحميل…</span>
+          </div>
+        ) : !selectedRole ? (
+          <div style={{
+            borderRadius: "var(--radius-xl)", border: "2px dashed var(--color-border)",
+            background: "var(--color-surface)", padding: "4rem 2rem", textAlign: "center",
+          }}>
+            <p style={{ fontSize: 32, margin: 0 }}>🔐</p>
+            <p style={{ marginTop: 12, fontSize: 15, fontWeight: 700, color: "var(--color-text-primary)" }}>
+              اختر دوراً من القائمة أعلاه
+            </p>
+            <p style={{ marginTop: 4, fontSize: 13, color: "var(--color-text-muted)" }}>
+              ستظهر هنا صلاحيات الدور المحدد وبإمكانك تعديلها مباشرة.
+            </p>
+          </div>
+        ) : (
+          <PermissionMatrix
+            key={selectedRole.id}
+            role={selectedRole}
+            allPermissions={permissions}
+            onSave={handleSave}
+          />
+        )}
+      </section>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/app/dashboard/roles/page.tsx b/app/dashboard/roles/page.tsx
index 6355bc6..3536198 100644
--- a/app/dashboard/roles/page.tsx
+++ b/app/dashboard/roles/page.tsx
@@ -1,3 +1,143 @@
+"use client";
+
+import { useState } from "react";
+import { Alert } from "@/src/Components/UI";
+import { RoleTable }       from "@/src/Components/role/RoleTable";
+import { RoleFormModal }   from "@/src/Components/role/RoleFormModal";
+import { RoleDetailModal } from "@/src/Components/role/RoleDetailModal";
+import { DeleteRoleModal } from "@/src/Components/role/DeleteRoleModal";
+import { RoleToast }       from "@/src/Components/role/RoleToast";
+import { useRoles }        from "@/src/hooks/useRole";
+import type { Role, RoleFormData } from "@/src/services/role.service";
+
 export default function RolesPage() {
-  return <section className="rounded-3xl border border-white/10 bg-slate-900/80 p-6 text-slate-100 shadow-2xl shadow-slate-950/20">Roles and permissions module is ready for RBAC assignment and matrix views.</section>;
-}
+  const {
+    roles, loading, total, pages, error,
+    permissions,
+    page, search,
+    setPage, handleSearch, clearError,
+    createRole, updateRole, deleteRole,
+    updateRolePermissionsBulk,
+    notification,
+  } = useRoles();
+
+  // false = closed | null = create mode | Role = edit mode
+  const [formTarget,   setFormTarget]   = useState<Role | null | false>(false);
+  const [viewTarget,   setViewTarget]   = useState<Role | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<Role | null>(null);
+  const [deleting,     setDeleting]     = useState(false);
+
+  const handleFormSubmit = async (
+    data: RoleFormData,
+    currentPermIds: string[],
+  ): Promise<boolean> => {
+    if (formTarget === null) {
+      return createRole(data);
+    }
+    return updateRole((formTarget as Role).id, data, currentPermIds);
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (!deleteTarget || deleting) return;
+    setDeleting(true);
+    const ok = await deleteRole(deleteTarget.id);
+    setDeleting(false);
+    if (ok) setDeleteTarget(null);
+  };
+
+  const handleSavePermissions = async (
+    roleId: string,
+    permissionIds: string[],
+  ): Promise<boolean> => {
+    return updateRolePermissionsBulk(roleId, permissionIds);
+  };
+
+  return (
+    <>
+      <RoleToast notification={notification} />
+
+      {formTarget !== false && (
+        <RoleFormModal
+          editRole={formTarget}
+          permissions={permissions}
+          onClose={() => setFormTarget(false)}
+          onSubmit={handleFormSubmit}
+        />
+      )}
+
+      {viewTarget && (
+        <RoleDetailModal
+          role={viewTarget}
+          allPermissions={permissions}
+          onClose={() => setViewTarget(null)}
+          onSave={handleSavePermissions}
+        />
+      )}
+
+      {deleteTarget && (
+        <DeleteRoleModal
+          role={deleteTarget}
+          deleting={deleting}
+          onCancel={() => setDeleteTarget(null)}
+          onConfirm={handleDeleteConfirm}
+        />
+      )}
+
+      <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
+
+        {/* Header */}
+        <header style={{
+          borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)",
+          background: "var(--color-surface)", padding: "1.5rem 2rem", boxShadow: "var(--shadow-card)",
+        }}>
+          <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600 }}>
+            إدارة الصلاحيات
+          </p>
+          <div className="mt-3 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+            <div>
+              <h1 style={{ fontSize: "1.5rem", fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>
+                الأدوار والصلاحيات
+              </h1>
+              <p style={{ marginTop: "0.25rem", fontSize: 13, color: "var(--color-text-muted)" }}>
+                إجمالي <strong style={{ color: "var(--color-text-primary)" }}>{total}</strong> دور
+              </p>
+            </div>
+            <div style={{ display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap" }}>
+              <div style={{ position: "relative", width: 256 }}>
+                <svg style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", width: 16, height: 16, color: "var(--color-text-hint)", pointerEvents: "none" }}
+                  fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                  <circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" />
+                </svg>
+                <input type="text" placeholder="بحث بالاسم…" value={search}
+                  onChange={e => handleSearch(e.target.value)} dir="rtl"
+                  style={{ width: "100%", height: 40, paddingRight: 36, paddingLeft: 12, borderRadius: "var(--radius-lg)", border: "1px solid var(--color-border)", background: "var(--color-surface)", fontSize: 13, color: "var(--color-text-primary)", outline: "none", fontFamily: "var(--font-sans)" }} />
+              </div>
+              <button type="button" onClick={() => setFormTarget(null)}
+                style={{ height: 40, padding: "0 1.125rem", borderRadius: "var(--radius-lg)", border: "none", background: "var(--color-brand-600)", fontSize: 13, fontWeight: 700, color: "#FFF", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 7, fontFamily: "var(--font-sans)", boxShadow: "0 1px 4px rgba(37,99,235,.35)", whiteSpace: "nowrap" }}>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                  <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
+                </svg>
+                إضافة دور
+              </button>
+            </div>
+          </div>
+        </header>
+
+        {error && <Alert type="error" message={error} onClose={clearError} />}
+
+        <RoleTable
+          roles={roles}
+          loading={loading}
+          search={search}
+          page={page}
+          pages={pages}
+          onView={role => setViewTarget(role)}
+          onEdit={role => setFormTarget(role)}
+          onDelete={role => setDeleteTarget(role)}
+          onAddFirst={() => setFormTarget(null)}
+          onPageChange={setPage}
+        />
+      </section>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/app/dashboard/trips/[tripId]/page.tsx b/app/dashboard/trips/[tripId]/page.tsx
index b5085c3..3d7067f 100644
--- a/app/dashboard/trips/[tripId]/page.tsx
+++ b/app/dashboard/trips/[tripId]/page.tsx
@@ -1,19 +1,38 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, 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";
+import { Spinner } from "@/src/Components/UI";
+import { TripFormModal } from "@/src/Components/Trip/Tripformmodal";
+import { TripDeleteModal } from "@/src/Components/Trip/Tripdeletemodal";
+import { TripReportPanel } from "@/src/Components/Trip_Report/Tripreportpanel";
+import { tripService } from "@/src/services/trip.service";
+import { getStoredToken } from "@/src/lib/auth";
+import type { Trip, CreateTripPayload, UpdateTripPayload } from "@/src/types/trip";
+import { TRIP_STATUS_MAP } from "@/src/types/trip";
+import { Toast, type ToastNotification } from "@/src/Components/UI/Toast";
+
+// ── API error extractor ────────────────────────────────────────────────────
+// Same shape-walking logic as useTrip.ts — duplicated here on purpose so this
+// page no longer depends on the list hook for a single piece of UI feedback.
+
+function extractApiMessage(err: unknown, fallback: string): string {
+  if (typeof err === "string" && err.trim()) return err.trim();
+
+  if (err && typeof err === "object") {
+    const e = err as Record<string, unknown>;
+    const responseData = (e["response"] as Record<string, unknown> | undefined)?.["data"];
+    if (responseData && typeof responseData === "object") {
+      const rd = responseData as Record<string, unknown>;
+      if (typeof rd["message"] === "string" && rd["message"].trim()) return rd["message"];
+      if (Array.isArray(rd["message"])) return (rd["message"] as string[]).join(" — ");
+      if (typeof rd["error"] === "string" && rd["error"].trim()) return rd["error"];
+    }
+    if (typeof e["message"] === "string" && e["message"].trim()) return e["message"];
+  }
+
+  return fallback;
+}
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
@@ -23,19 +42,26 @@ function fmtDate(iso?: string | null): string {
     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");
+function fmtDateTime(iso?: string | null): string {
+  if (!iso) return "—";
+  return new Date(iso).toLocaleString("ar-SA", {
+    dateStyle: "medium",
+    timeStyle: "short",
+  });
 }
 
 // ── Sub-components ────────────────────────────────────────────────────────────
 
-function SectionCard({ title, children }: { title: string; children: React.ReactNode }) {
+function SectionCard({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
   return (
     <div
       style={{
@@ -46,19 +72,23 @@ function SectionCard({ title, children }: { title: string; children: React.React
         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,
-        }}>
+      <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>
@@ -71,63 +101,70 @@ 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)",
-    }}>
+    <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",
-      }}>
+      <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>
   );
 }
 
-// ── Stat card (للأعداد) ───────────────────────────────────────────────────────
-
 function StatCard({
   label,
   value,
-  color = "var(--color-brand-600)",
-  bg    = "var(--color-brand-50, #EFF6FF)",
+  color,
 }: {
   label: string;
-  value: string;
-  color?: string;
-  bg?: string;
+  value: number | string;
+  color: 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)" }}>
+    <div
+      style={{
+        padding: "1rem 1.25rem",
+        background: "var(--color-surface)",
+        border: "1px solid var(--color-border)",
+        borderRadius: "var(--radius-lg)",
+        boxShadow: "var(--shadow-card)",
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
+      }}
+    >
+      <span style={{ fontSize: 11, fontWeight: 600, color: "var(--color-text-muted)", letterSpacing: "0.05em" }}>
         {label}
       </span>
-      <span style={{ fontSize: 22, fontWeight: 700, color, fontFamily: "var(--font-mono)" }}>
+      <span style={{ fontSize: 22, fontWeight: 800, color, fontFamily: "var(--font-mono)" }}>
         {value}
       </span>
     </div>
@@ -141,14 +178,31 @@ export default function TripDetailPage() {
   const router = useRouter();
   const tripId = params?.tripId as string;
 
-  const [trip,    setTrip]    = useState<Trip | null>(null);
+  const [trip, setTrip]       = useState<Trip | null>(null);
   const [loading, setLoading] = useState(true);
-  const [error,   setError]   = useState<string | null>(null);
+  const [error, setError]     = useState<string | null>(null);
 
   // ── Modal state ───────────────────────────────────────────────────────────
-  const [editOpen,   setEditOpen]   = useState(false);
+  const [editOpen, setEditOpen]     = useState(false);
   const [deleteOpen, setDeleteOpen] = useState(false);
-  const [deleting,   setDeleting]   = useState(false);
+  const [deleting, setDeleting]     = useState(false);
+
+  // ── Notifications (standalone — no longer borrowed from the list hook) ───
+  const [notification, setNotification] = useState<ToastNotification | null>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const notify = useCallback((n: ToastNotification) => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setNotification(n);
+    timerRef.current = setTimeout(() => setNotification(null), 4000);
+  }, []);
+
+  const dismissNotification = useCallback(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setNotification(null);
+  }, []);
+
+  useEffect(() => () => { if (timerRef.current) clearTimeout(timerRef.current); }, []);
 
   // ── Load trip ─────────────────────────────────────────────────────────────
   const loadTrip = useCallback(async () => {
@@ -166,7 +220,9 @@ export default function TripDetailPage() {
     }
   }, [tripId]);
 
-  useEffect(() => { loadTrip(); }, [loadTrip]);
+  useEffect(() => {
+    loadTrip();
+  }, [loadTrip]);
 
   // ── Edit submit ───────────────────────────────────────────────────────────
   const handleEditSubmit = useCallback(
@@ -177,299 +233,317 @@ export default function TripDetailPage() {
       if (!trip) return false;
       try {
         const token = getStoredToken();
-        await tripService.update(trip.id, payload as UpdateTripPayload, token);
-        await loadTrip();
+        const res = await tripService.update(trip.id, payload as UpdateTripPayload, token);
+        const updated = (res as unknown as { data: Trip }).data;
+        setTrip(updated);
+        notify({ type: "success", message: "تم تحديث بيانات الرحلة بنجاح." });
         return true;
-      } catch {
+      } catch (err) {
+        notify({ type: "error", message: extractApiMessage(err, "تعذّر تحديث الرحلة.") });
         return false;
       }
     },
-    [trip, loadTrip],
+    [trip, notify],
   );
 
-  // ── Delete ────────────────────────────────────────────────────────────────
+  // ── Delete confirm ────────────────────────────────────────────────────────
   const handleConfirmDelete = useCallback(async () => {
     if (!trip) return;
     setDeleting(true);
     try {
       const token = getStoredToken();
       await tripService.delete(trip.id, token);
-      router.back();
-    } catch {
+      router.push("/dashboard/trips");
+    } catch (err) {
+      notify({ type: "error", message: extractApiMessage(err, "تعذّر حذف الرحلة.") });
       setDeleting(false);
-      setDeleteOpen(false);
     }
-  }, [trip, router]);
+  }, [trip, router, notify]);
 
+  // ── Status config ─────────────────────────────────────────────────────────
   const statusConfig = trip ? TRIP_STATUS_MAP[trip.status] : null;
 
-  // ── Loading ───────────────────────────────────────────────────────────────
+  // ── Render: Loading ───────────────────────────────────────────────────────
   if (loading) {
     return (
-      <div style={{ display: "flex", justifyContent: "center", padding: "4rem" }}>
-        <Spinner size="lg" />
+      <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>
     );
   }
 
-  // ── Error ─────────────────────────────────────────────────────────────────
+  // ── Render: Error ─────────────────────────────────────────────────────────
   if (error || !trip) {
     return (
-      <div style={{ padding: "2rem", textAlign: "center" }}>
-        <p style={{ fontSize: 14, color: "var(--color-danger)", marginBottom: "1rem" }}>
-          {error ?? "الرحلة غير موجودة."}
+      <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={{
-            height: 38, padding: "0 1.25rem",
+            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, cursor: "pointer",
+            fontSize: 13,
+            fontWeight: 600,
+            color: "var(--color-text-secondary)",
+            cursor: "pointer",
             fontFamily: "var(--font-sans)",
           }}
         >
-          ← العودة
+          ← رجوع
         </button>
       </div>
     );
   }
 
+  // ── Render: Trip detail ────────────────────────────────────────────────────
   return (
     <>
-      <section style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1.5rem" }}>
+      {/* ── Toast notification ── */}
+      <Toast notification={notification} onDismiss={dismissNotification} />
 
-        {/* ── 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>
+      <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
 
-            {/* 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>
+        {/* ── 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", 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}
+          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: "1rem" }}>
+            {/* Icon + title */}
+            <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",
+                }}
+              >
+                <span style={{ fontSize: 28, fontWeight: 700, color: "var(--color-brand-600)" }}>
+                  {trip.title.charAt(0)}
                 </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}
+              </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" }}>
+                  {trip.title}
+                </h1>
+                <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 6, flexWrap: "wrap" }}>
+                  <span style={{ fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--color-text-muted)" }}>
+                    #{trip.tripNumber}
                   </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>
-                )}
+                  {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>
-          </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>
+            {/* 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>
 
         {/* ── 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"
-          />
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))", gap: "0.75rem" }}>
+          <StatCard label="المجمّع" value={trip.collectedCount} color="var(--color-brand-600)" />
+          <StatCard label="المُسلَّم" value={trip.deliveredCount} color="#16A34A" />
+          <StatCard label="المُرتجع" value={trip.returnedCount} color="#D97706" />
           <StatCard
             label="النقد المحصّل"
-            value={fmtNumber(trip.totalCashCollected)}
-            color="#581C87"
-            bg="#FAF5FF"
+            value={trip.totalCashCollected != null ? `${Number(trip.totalCashCollected).toLocaleString("ar-SA")} ر.س` : "—"}
+            color="#7C3AED"
           />
         </div>
 
         {/* ── Content grid ── */}
-        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1.5rem" }}>
-
-          {/* Basic Info */}
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr",
+            gap: "1.5rem",
+          }}
+        >
+          {/* Trip Info */}
           <SectionCard title="بيانات الرحلة">
-            <DetailRow label="رقم الرحلة"  value={trip.tripNumber} mono />
-            <DetailRow label="العنوان"      value={trip.title} />
-            <DetailRow label="الحالة"       value={statusConfig?.label ?? trip.status} />
+            <DetailRow label="وقت البدء"    value={fmtDateTime(trip.startTime)} />
+            <DetailRow label="وقت الانتهاء" value={fmtDateTime(trip.endTime)} />
             <DetailRow label="الفرع"        value={trip.branch?.name ?? "—"} />
-            <DetailRow label="وقت البدء"    value={fmtDate(trip.startTime)} />
-            <DetailRow label="وقت الانتهاء" value={fmtDate(trip.endTime)} />
-            <DetailRow label="سبب الإنهاء"  value={trip.endReason ?? "—"} />
+            {trip.notes    && <DetailRow label="ملاحظات"    value={trip.notes} />}
+            {trip.endReason && <DetailRow label="سبب الإنهاء" value={trip.endReason} warn />}
           </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>
+          {trip.driver && (
+            <SectionCard title="بيانات السائق">
+              <DetailRow label="الاسم"        value={trip.driver.name} />
+              <DetailRow label="الجوال"       value={trip.driver.phone} mono />
+              <DetailRow label="اسم المستخدم" value={trip.driver.userName ?? "—"} mono />
+              <DetailRow label="البريد"       value={trip.driver.email ?? "—"} />
+              <DetailRow label="الجنسية"      value={trip.driver.nationality ?? "—"} />
+              <DetailRow label="رخصة القيادة" value={trip.driver.licenseNumber ?? "—"} mono />
+              <DetailRow label="بطاقة السائق" value={trip.driver.driverCardNumber ?? "—"} mono />
+              <DetailRow label="رقم GOSI"     value={trip.driver.gosiNumber ?? "—"} mono />
+            </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>
+          {trip.car && (
+            <SectionCard title="بيانات السيارة">
+              <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.registrationNumber ?? "—"} mono />
+            </SectionCard>
+          )}
 
           {/* System Info */}
           <SectionCard title="معلومات النظام">
-            <DetailRow label="تاريخ الإضافة" value={fmtDate(trip.createdAt)} />
+            <DetailRow label="رقم الرحلة"    value={trip.tripNumber} mono />
+            <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",
-        }}>
+        {/* ── 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",
+          }}
+        >
           <TripReportPanel tripId={trip.id} />
         </div>
 
diff --git a/app/dashboard/trips/page.tsx b/app/dashboard/trips/page.tsx
index 08ce785..792ede4 100644
--- a/app/dashboard/trips/page.tsx
+++ b/app/dashboard/trips/page.tsx
@@ -1,3 +1,375 @@
-export default function TripsPage() {
-  return <section className="rounded-3xl border border-white/10 bg-slate-900/80 p-6 text-slate-100 shadow-2xl shadow-slate-950/20">Trips module is ready for scheduling, status tracking, and manifest generation.</section>;
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useTrips } from "@/src/hooks/useTrip";
+import { tripService } from "@/src/services/trip.service";
+import { getStoredToken } from "@/src/lib/auth";
+import { TripFormModal } from "@/src/Components/Trip/Tripformmodal";
+import { TripDeleteModal } from "@/src/Components/Trip/Tripdeletemodal";
+import { Spinner } from "@/src/Components/UI";
+import { Toast, type ToastNotification } from "@/src/Components/UI/Toast";
+import type { Trip, TripStatus, CreateTripPayload, UpdateTripPayload } from "@/src/types/trip";
+import { TRIP_STATUS_MAP } from "@/src/types/trip";
+
+// ── API error extractor ────────────────────────────────────────────────────
+// Same logic as the detail page / useTrip.ts — kept local so create/update
+// here can notify independently of the list hook's own notification state.
+
+function extractApiMessage(err: unknown, fallback: string): string {
+  if (typeof err === "string" && err.trim()) return err.trim();
+
+  if (err && typeof err === "object") {
+    const e = err as Record<string, unknown>;
+    const responseData = (e["response"] as Record<string, unknown> | undefined)?.["data"];
+    if (responseData && typeof responseData === "object") {
+      const rd = responseData as Record<string, unknown>;
+      if (typeof rd["message"] === "string" && rd["message"].trim()) return rd["message"];
+      if (Array.isArray(rd["message"])) return (rd["message"] as string[]).join(" — ");
+      if (typeof rd["error"] === "string" && rd["error"].trim()) return rd["error"];
+    }
+    if (typeof e["message"] === "string" && e["message"].trim()) return e["message"];
+  }
+
+  return fallback;
 }
+
+// ── Status badge ─────────────────────────────────────────────────────────────
+
+function StatusBadge({ status }: { status: TripStatus }) {
+  const s = TRIP_STATUS_MAP[status];
+  return (
+    <span style={{
+      display: "inline-flex", alignItems: "center", gap: 5,
+      padding: "3px 10px", borderRadius: 999,
+      fontSize: 11, fontWeight: 700, letterSpacing: "0.02em",
+      color: s.color, background: s.bg, border: `1px solid ${s.border}`,
+    }}>
+      <span style={{ width: 6, height: 6, borderRadius: "50%", background: s.dot, flexShrink: 0 }} />
+      {s.label}
+    </span>
+  );
+}
+
+// ── Page ─────────────────────────────────────────────────────────────────────
+
+export default function TripsPage() {
+  const router = useRouter();
+  const {
+    trips, total, pages, loading, error,
+    page, setPage,
+    search, handleSearch,
+    status, handleStatusFilter,
+    reload,
+  } = useTrips();
+
+  // ── Notifications (standalone — fired explicitly by every action below) ──
+  const [notification, setNotification] = useState<ToastNotification | null>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const notify = useCallback((n: ToastNotification) => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setNotification(n);
+    timerRef.current = setTimeout(() => setNotification(null), 4000);
+  }, []);
+
+  const dismissNotification = useCallback(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setNotification(null);
+  }, []);
+
+  useEffect(() => () => { if (timerRef.current) clearTimeout(timerRef.current); }, []);
+
+  // Local input value is debounced before it reaches the hook's `search`,
+  // exactly like the table reloads only after the user stops typing.
+  const [searchInput, setSearchInput] = useState(search);
+  useEffect(() => {
+    const t = setTimeout(() => handleSearch(searchInput), 400);
+    return () => clearTimeout(t);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchInput]);
+
+  const [showForm, setShowForm]         = useState(false);
+  const [editTrip, setEditTrip]         = useState<Trip | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<Trip | null>(null);
+  const [deleting, setDeleting]         = useState(false);
+
+  // ── Create / update — calls tripService directly and notifies explicitly ──
+  const handleSubmit = async (
+    payload: CreateTripPayload | UpdateTripPayload,
+    isNew: boolean,
+  ): Promise<boolean> => {
+    try {
+      const token = getStoredToken();
+      if (isNew) {
+        await tripService.create(payload as CreateTripPayload, token);
+        notify({ type: "success", message: "تم إضافة الرحلة بنجاح." });
+      } else {
+        await tripService.update(editTrip!.id, payload as UpdateTripPayload, token);
+        notify({ type: "success", message: "تم تحديث بيانات الرحلة بنجاح." });
+      }
+      reload();
+      return true;
+    } catch (err) {
+      notify({
+        type: "error",
+        message: extractApiMessage(err, isNew ? "تعذّر إضافة الرحلة." : "تعذّر تحديث الرحلة."),
+      });
+      return false;
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return;
+    setDeleting(true);
+    try {
+      const token = getStoredToken();
+      await tripService.delete(deleteTarget.id, token);
+      notify({ type: "success", message: "تم حذف الرحلة بنجاح." });
+      setDeleteTarget(null);
+      reload();
+    } catch (err) {
+      notify({ type: "error", message: extractApiMessage(err, "تعذّر حذف الرحلة.") });
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  return (
+    <div dir="rtl" style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1.25rem" }}>
+
+      {/* ── Header ── */}
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: "0.75rem" }}>
+        <div>
+          <h1 style={{ fontSize: 20, fontWeight: 800, color: "var(--color-text-primary)", margin: 0 }}>الرحلات</h1>
+          <p style={{ margin: "2px 0 0", fontSize: 12, color: "var(--color-text-muted)" }}>
+            إدارة جدولة الرحلات وتتبع حالتها
+          </p>
+        </div>
+        <button
+          onClick={() => { setEditTrip(null); setShowForm(true); }}
+          style={{
+            height: 40, padding: "0 1.25rem",
+            borderRadius: "var(--radius-md)", border: "none",
+            background: "var(--color-brand-600)", color: "#FFF",
+            fontSize: 13, fontWeight: 700, cursor: "pointer",
+            display: "flex", alignItems: "center", gap: 8,
+            fontFamily: "var(--font-sans)",
+          }}
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+            <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
+          </svg>
+          إضافة رحلة
+        </button>
+      </div>
+
+      {/* ── Filters ── */}
+      <div style={{
+        display: "flex", gap: "0.75rem", flexWrap: "wrap",
+        background: "var(--color-surface)",
+        border: "1px solid var(--color-border)",
+        borderRadius: "var(--radius-lg)",
+        padding: "0.875rem 1rem",
+      }}>
+        <input
+          value={searchInput}
+          onChange={e => setSearchInput(e.target.value)}
+          placeholder="بحث برقم الرحلة أو العنوان…"
+          dir="rtl"
+          style={{
+            flex: 1, minWidth: 200, height: 38, padding: "0 0.75rem",
+            borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)",
+            background: "var(--color-surface-muted)", fontSize: 13,
+            color: "var(--color-text-primary)", fontFamily: "var(--font-sans)", outline: "none",
+          }}
+        />
+        <select
+          value={status}
+          onChange={e => handleStatusFilter(e.target.value as TripStatus | "")}
+          dir="rtl"
+          style={{
+            height: 38, padding: "0 0.75rem", minWidth: 140,
+            borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)",
+            background: "var(--color-surface-muted)", fontSize: 13,
+            color: "var(--color-text-primary)", fontFamily: "var(--font-sans)",
+            cursor: "pointer", outline: "none",
+          }}
+        >
+          <option value="">كل الحالات</option>
+          <option value="Scheduled">مجدولة</option>
+          <option value="InProgress">جارية</option>
+          <option value="Completed">مكتملة</option>
+          <option value="Cancelled">ملغاة</option>
+        </select>
+      </div>
+
+      {/* ── Table card ── */}
+      <div style={{
+        background: "var(--color-surface)",
+        border: "1px solid var(--color-border)",
+        borderRadius: "var(--radius-xl)",
+        overflow: "hidden",
+        boxShadow: "0 1px 4px rgba(0,0,0,.06)",
+      }}>
+
+        {loading ? (
+          <div style={{ padding: "3rem", display: "flex", justifyContent: "center" }}>
+            <Spinner size="md" />
+          </div>
+        ) : error ? (
+          <div style={{ padding: "2rem", textAlign: "center", color: "var(--color-danger)", fontSize: 13 }}>
+            ⚠ {error}
+          </div>
+        ) : trips.length === 0 ? (
+          <div style={{ padding: "3rem", textAlign: "center", color: "var(--color-text-muted)", fontSize: 13 }}>
+            لا توجد رحلات مطابقة
+          </div>
+        ) : (
+          <div style={{ overflowX: "auto" }}>
+            <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}>
+              <thead>
+                <tr style={{ background: "var(--color-surface-muted)", borderBottom: "1px solid var(--color-border)" }}>
+                  {["رقم الرحلة", "العنوان", "السائق", "السيارة", "الحالة", "البدء", "الانتهاء", "إجراءات"].map(h => (
+                    <th key={h} style={{
+                      padding: "0.75rem 1rem", textAlign: "right", fontWeight: 700,
+                      color: "var(--color-text-secondary)", fontSize: 11,
+                      letterSpacing: "0.03em", whiteSpace: "nowrap",
+                    }}>{h}</th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {trips.map((trip, i) => (
+                  <tr
+                    key={trip.id}
+                    onClick={() => router.push(`/dashboard/trips/${trip.id}`)}
+                    style={{
+                      borderBottom: i < trips.length - 1 ? "1px solid var(--color-border)" : "none",
+                      cursor: "pointer",
+                      transition: "background 0.15s",
+                    }}
+                    onMouseEnter={e => (e.currentTarget.style.background = "var(--color-surface-muted)")}
+                    onMouseLeave={e => (e.currentTarget.style.background = "")}
+                  >
+                    <td style={{ padding: "0.875rem 1rem", whiteSpace: "nowrap" }}>
+                      <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--color-brand-600)", fontWeight: 700 }}>
+                        {trip.tripNumber}
+                      </span>
+                    </td>
+                    <td style={{ padding: "0.875rem 1rem", fontWeight: 600, color: "var(--color-text-primary)", maxWidth: 200 }}>
+                      <span style={{ display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                        {trip.title}
+                      </span>
+                    </td>
+                    <td style={{ padding: "0.875rem 1rem", color: "var(--color-text-secondary)", whiteSpace: "nowrap" }}>
+                      {trip.driver?.name ?? "—"}
+                    </td>
+                    <td style={{ padding: "0.875rem 1rem", color: "var(--color-text-secondary)", whiteSpace: "nowrap" }}>
+                      {trip.car ? `${trip.car.manufacturer} ${trip.car.model}` : "—"}
+                    </td>
+                    <td style={{ padding: "0.875rem 1rem" }}>
+                      <StatusBadge status={trip.status} />
+                    </td>
+                    <td style={{ padding: "0.875rem 1rem", color: "var(--color-text-muted)", fontSize: 12, whiteSpace: "nowrap" }}>
+                      {trip.startTime ? new Date(trip.startTime).toLocaleString("ar-SA", { dateStyle: "short", timeStyle: "short" }) : "—"}
+                    </td>
+                    <td style={{ padding: "0.875rem 1rem", color: "var(--color-text-muted)", fontSize: 12, whiteSpace: "nowrap" }}>
+                      {trip.endTime ? new Date(trip.endTime).toLocaleString("ar-SA", { dateStyle: "short", timeStyle: "short" }) : "—"}
+                    </td>
+                    <td style={{ padding: "0.875rem 1rem" }} onClick={e => e.stopPropagation()}>
+                      <div style={{ display: "flex", gap: 6 }}>
+                        <button
+                          onClick={() => { setEditTrip(trip); setShowForm(true); }}
+                          title="تعديل"
+                          style={{
+                            width: 30, height: 30, borderRadius: "var(--radius-md)",
+                            border: "1px solid var(--color-border)", background: "var(--color-surface)",
+                            cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center",
+                            color: "var(--color-text-muted)",
+                          }}
+                        >
+                          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                          </svg>
+                        </button>
+                        <button
+                          onClick={() => setDeleteTarget(trip)}
+                          title="حذف"
+                          style={{
+                            width: 30, height: 30, borderRadius: "var(--radius-md)",
+                            border: "1px solid #FECACA", background: "#FEF2F2",
+                            cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center",
+                            color: "#DC2626",
+                          }}
+                        >
+                          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                            <polyline points="3 6 5 6 21 6" />
+                            <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+                            <path d="M10 11v6M14 11v6" />
+                          </svg>
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+
+        {/* ── Pagination ── */}
+        {pages > 1 && (
+          <div style={{
+            padding: "0.875rem 1rem",
+            borderTop: "1px solid var(--color-border)",
+            display: "flex", alignItems: "center", justifyContent: "space-between",
+            background: "var(--color-surface-muted)",
+          }}>
+            <span style={{ fontSize: 12, color: "var(--color-text-muted)" }}>
+              {total} رحلة — صفحة {page} من {pages}
+            </span>
+            <div style={{ display: "flex", gap: 6 }}>
+              {[...Array(pages)].map((_, idx) => (
+                <button
+                  key={idx}
+                  onClick={() => setPage(idx + 1)}
+                  style={{
+                    width: 32, height: 32, borderRadius: "var(--radius-md)",
+                    border: "1px solid var(--color-border)",
+                    background: page === idx + 1 ? "var(--color-brand-600)" : "var(--color-surface)",
+                    color: page === idx + 1 ? "#FFF" : "var(--color-text-secondary)",
+                    fontSize: 13, fontWeight: 600, cursor: "pointer",
+                  }}
+                >
+                  {idx + 1}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* ── Modals ── */}
+      {showForm && (
+        <TripFormModal
+          editTrip={editTrip}
+          onClose={() => setShowForm(false)}
+          onSubmit={handleSubmit}
+        />
+      )}
+      {deleteTarget && (
+        <TripDeleteModal
+          trip={deleteTarget}
+          deleting={deleting}
+          onCancel={() => setDeleteTarget(null)}
+          onConfirm={handleDelete}
+        />
+      )}
+
+      {/* ── Toast ── */}
+      <Toast notification={notification} onDismiss={dismissNotification} />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/app/dashboard/users/page.tsx b/app/dashboard/users/page.tsx
index bc31e5b..ccfbb02 100644
--- a/app/dashboard/users/page.tsx
+++ b/app/dashboard/users/page.tsx
@@ -1,14 +1,13 @@
 "use client";
 
 import { useState } from "react";
-import { Alert }              from "@/Components/UI";
-import { UserTable }          from "@/Components/User/UserTable";
-import { UserFormModal }      from "@/Components/User/UserFormModal";
-import { UserDetailModal }    from "@/Components/User/UserDetailModal";
-import { DeleteConfirmModal } from "@/Components/User/DeleteConfirmModal";
-import { Toast }              from "@/Components/User/Toast";
-import { useUsers }           from "@/hooks/useUser";
-import type { User, UserFormData } from "@/types/user";
+import { Alert, Toast } from "@/src/Components/UI";   
+import { UserTable }          from "@/src/Components/User/UserTable";
+import { UserFormModal }      from "@/src/Components/User/UserFormModal";
+import { UserDetailModal }    from "@/src/Components/User/UserDetailModal";
+import { DeleteConfirmModal } from "@/src/Components/User/DeleteConfirmModal";
+import { useUsers }           from "@/src/hooks/useUser";
+import type { User, UserFormData } from "@/src/types/user";
 
 export default function UsersPage() {
   // ── Modal state ─────────────────────────────────────────────────────────────
@@ -41,9 +40,9 @@ export default function UsersPage() {
   const handleDeleteConfirm = async () => {
     if (!deleteTarget || deleting) return;
     setDeleting(true);
-    console.log(setDeleting(true))
+    
     const ok = await deleteUser(deleteTarget.id);
-    console.log(ok)
+    
     setDeleting(false);
     if (ok) setDeleteTarget(null);
   };
diff --git a/app/forbidden/page.tsx b/app/forbidden/page.tsx
index b3c885b..c108b2f 100644
--- a/app/forbidden/page.tsx
+++ b/app/forbidden/page.tsx
@@ -1,12 +1,61 @@
+import Link from "next/link";
+
 export default function ForbiddenPage() {
   return (
-    <main className="min-h-screen bg-[linear-gradient(135deg,#020617_0%,#111827_45%,#172554_100%)] text-slate-100 flex items-center justify-center px-6 py-10">
-      <section className="w-full max-w-xl rounded-3xl border border-rose-400/20 bg-slate-900/85 p-8 shadow-2xl shadow-slate-950/30 text-center">
-        <p className="text-sm uppercase tracking-[0.35em] text-rose-200">Access denied</p>
-        <h1 className="mt-4 text-3xl font-semibold text-white">You do not have permission to open this section.</h1>
-        <p className="mt-3 text-slate-300">Contact an administrator to request access to the required module.</p>
-        <a href="/dashboard" className="mt-6 inline-flex rounded-full bg-cyan-400 px-4 py-2 text-sm font-semibold text-slate-950 hover:bg-cyan-300">Return to dashboard</a>
-      </section>
+    <main
+      dir="rtl"
+      style={{
+        minHeight: "100vh",
+        background: "var(--color-surface-muted)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "2rem",
+        fontFamily: "var(--font-sans)",
+      }}
+    >
+      <div style={{ textAlign: "center", maxWidth: 480 }}>
+        <div style={{
+          width: 80, height: 80, margin: "0 auto",
+          borderRadius: "50%", background: "#FEF2F2",
+          border: "2px solid #FECACA",
+          display: "flex", alignItems: "center", justifyContent: "center",
+        }}>
+          <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#DC2626" strokeWidth="1.5">
+            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+            <line x1="12" y1="8" x2="12" y2="12" />
+            <line x1="12" y1="16" x2="12.01" y2="16" />
+          </svg>
+        </div>
+
+        <p style={{
+          fontSize: "3rem", fontWeight: 800,
+          color: "#DC2626", lineHeight: 1,
+          margin: "1rem 0 0", fontFamily: "var(--font-mono)",
+        }}>403</p>
+
+        <h1 style={{ fontSize: "1.5rem", fontWeight: 700, color: "var(--color-text-primary)", marginTop: "0.75rem" }}>
+          غير مصرح بالوصول
+        </h1>
+
+        <p style={{ fontSize: 14, color: "var(--color-text-muted)", marginTop: "0.75rem", lineHeight: 1.7 }}>
+          ليس لديك الصلاحية للوصول إلى هذه الصفحة. إذا كنت تعتقد أن هذا خطأ، تواصل مع مسؤول النظام.
+        </p>
+
+        <div style={{ marginTop: "2rem", display: "flex", gap: "0.75rem", justifyContent: "center" }}>
+          <Link href="/login"
+            style={{
+              height: 40, padding: "0 1.5rem",
+              borderRadius: "var(--radius-lg)",
+              border: "none", background: "var(--color-brand-600)",
+              fontSize: 13, fontWeight: 700, color: "#FFF",
+              textDecoration: "none",
+              display: "inline-flex", alignItems: "center",
+            }}>
+            تسجيل الدخول بحساب آخر
+          </Link>
+        </div>
+      </div>
     </main>
   );
-}
+}
\ No newline at end of file
diff --git a/app/globals.css b/app/globals.css
index 0e87d44..1bb5c34 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,4 +1,4 @@
-@import "../styles/tokens.css";
+@import "../src/styles/tokens.css";
 @import "tailwindcss";
 
 
@@ -12,7 +12,11 @@
 html {
   scroll-behavior: smooth;
   font-size: 14px;
-  /* RTL is set per route-group layout, not globally */
+  /* `dir` is now set on <html> in app/layout.tsx (lang="ar" dir="rtl").
+     Tailwind v4 ships native `rtl:` / `ltr:` variants that key off this
+     attribute, so utility classes like `rtl:flex-row-reverse` work
+     without a plugin. Route groups no longer need to set `dir`
+     individually — see report Section 1. */
 }
 
 body {
@@ -85,7 +89,17 @@ body {
 }
 
 /* ── Focus ring utility ─────────────────────────────── */
+/* Unchanged: box-shadow rings are direction-neutral. */
 .focus-ring {
   outline: none;
   box-shadow: 0 0 0 2px var(--color-brand-600);
+}
+
+/* ── RTL icon mirroring ─────────────────────────────────
+   Directional glyphs (chevrons, arrows, "back") need to visually
+   point the opposite way in RTL even though the underlying icon
+   font glyph doesn't change. Apply .icon-flip-rtl to any <i>/<svg>
+   whose meaning is "forward"/"back" rather than purely decorative. */
+[dir="rtl"] .icon-flip-rtl {
+  transform: scaleX(-1);
 }
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index 0568498..f39c7ba 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,32 +1,33 @@
-// app/layout.tsx
-// Root layout — single location for font loading and global metadata.
-// No inline styles, no @import in CSS.
-
 import type { Metadata } from "next";
-import { Plus_Jakarta_Sans, IBM_Plex_Mono } from "next/font/google";
+import "@tabler/icons-webfont/dist/tabler-icons.min.css";
 import "./globals.css";
 
-const jakartaSans = Plus_Jakarta_Sans({
-  subsets: ["latin"],
-  weight: ["400", "500", "600", "700"],
-  variable: "--font-sans",
-  display: "swap",
-});
-
-const ibmPlexMono = IBM_Plex_Mono({
-  subsets: ["latin"],
-  weight: ["400", "500"],
-  variable: "--font-mono",
-  display: "swap",
-});
+/**
+ * NOT SHOWN IN THE ORIGINAL FILE SET.
+ * This is the one file every RTL conversion ultimately hinges on:
+ * `dir="rtl"` and `lang="ar"` belong on the root <html> element so
+ * (a) the browser's native bidi algorithm kicks in everywhere,
+ * (b) Tailwind v4's `rtl:`/`ltr:` variants have something to key off,
+ * (c) form controls, scrollbars, and native widgets mirror correctly.
+ *
+ * If your real app/layout.tsx differs (providers, fonts, etc.), keep
+ * everything else as-is and only add the import below.
+ *
+ * ICON FONT: the project already uses Tabler Icons class names
+ * everywhere (ti ti-layout-dashboard, ti ti-car, ti ti-route, ...)
+ * but no stylesheet that defines those classes was ever loaded, so
+ * every icon in the sidebar was silently rendering as nothing.
+ * Self-hosted via `npm install @tabler/icons-webfont` rather than a
+ * CDN <link> — no external request at runtime, works behind
+ * corporate proxies / restrictive network policies, and Next bundles
+ * + fingerprints the CSS and font files automatically. Run
+ * `npm install @tabler/icons-webfont` if it isn't already a
+ * dependency, then this import resolves on its own.
+ */
 
 export const metadata: Metadata = {
-  title: {
-    default: "Slash.sa — Logistics Management",
-    template: "%s | Slash.sa",
-  },
-  description:
-    "Modern logistics client portal — manage deliveries, drivers, and fleet operations.",
+  title: "لوحة التحكم",
+  description: "نظام إدارة الأسطول والعمليات",
 };
 
 export default function RootLayout({
@@ -35,12 +36,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    // dir is set per route-group (ar = RTL, en = LTR) not globally
-    <html
-      lang="ar"
-      className={`${jakartaSans.variable} ${ibmPlexMono.variable} h-full antialiased`}
-    >
-      <body className="min-h-full flex flex-col">{children}</body>
+    <html lang="ar" dir="rtl">
+      <body className="app-shell">{children}</body>
     </html>
   );
 }
\ No newline at end of file
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 84f0ff8..72853ad 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -3,11 +3,11 @@
 import Link from "next/link";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { loginUser } from "../../lib/auth";
-import Logo from "../../utils/logo";
-import { Button } from "../../Components/UI";
-import { Input }  from "../../Components/UI";
-import { Alert }  from "../../Components/UI";
+import { loginUser } from "@/src/lib/auth";
+import Logo from "@/src/utils/logo";
+import { Button } from "@/src/Components/UI";
+import { Input }  from "@/src/Components/UI";
+import { Alert }  from "@/src/Components/UI";
 
 export default function LoginPage() {
   const router = useRouter();
diff --git a/app/not_found/page.tsx b/app/not_found/page.tsx
index cb2be10..7a483f9 100644
--- a/app/not_found/page.tsx
+++ b/app/not_found/page.tsx
@@ -1,7 +1,82 @@
-import React from 'react'
+import Link from "next/link";
 
-export default function page() {
+export default function NotFound() {
   return (
-    <div>page</div>
-  )
-}
+    <main
+      dir="rtl"
+      style={{
+        minHeight: "100vh",
+        background: "var(--color-surface-muted)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "2rem",
+        fontFamily: "var(--font-sans)",
+      }}
+    >
+      <div style={{ textAlign: "center", maxWidth: 480 }}>
+        {/* Large 404 */}
+        <p style={{
+          fontSize: "6rem",
+          fontWeight: 800,
+          color: "var(--color-brand-600)",
+          lineHeight: 1,
+          margin: 0,
+          fontFamily: "var(--font-mono)",
+        }}>
+          404
+        </p>
+
+        <h1 style={{
+          fontSize: "1.5rem",
+          fontWeight: 700,
+          color: "var(--color-text-primary)",
+          marginTop: "1rem",
+        }}>
+          الصفحة غير موجودة
+        </h1>
+
+        <p style={{
+          fontSize: 14,
+          color: "var(--color-text-muted)",
+          marginTop: "0.75rem",
+          lineHeight: 1.7,
+        }}>
+          الصفحة التي تبحث عنها غير موجودة أو ربما تم نقلها أو حذفها.
+        </p>
+
+        <div style={{ marginTop: "2rem", display: "flex", gap: "0.75rem", justifyContent: "center", flexWrap: "wrap" }}>
+          <Link href="/dashboard"
+            style={{
+              height: 40, padding: "0 1.5rem",
+              borderRadius: "var(--radius-lg)",
+              border: "none", background: "var(--color-brand-600)",
+              fontSize: 13, fontWeight: 700, color: "#FFF",
+              textDecoration: "none",
+              display: "inline-flex", alignItems: "center", gap: 8,
+            }}>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+              <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+              <polyline points="9 22 9 12 15 12 15 22" />
+            </svg>
+            لوحة التحكم
+          </Link>
+
+          <Link href="/"
+            style={{
+              height: 40, padding: "0 1.5rem",
+              borderRadius: "var(--radius-lg)",
+              border: "1px solid var(--color-border)",
+              background: "var(--color-surface)",
+              fontSize: 13, fontWeight: 600,
+              color: "var(--color-text-secondary)",
+              textDecoration: "none",
+              display: "inline-flex", alignItems: "center",
+            }}>
+            الصفحة الرئيسية
+          </Link>
+        </div>
+      </div>
+    </main>
+  );
+}
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index abbb4b8..568dc05 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 import Navbar from "./components/layout/Navbar";
-import Logo from "@/utils/logo";
+import Logo from "@/src/utils/logo";
 
 const stats = [
   { label: "الطلبات النشطة", value: "48", color: "text-blue-600" },
diff --git a/hooks/useDriver.ts b/hooks/useDriver.ts
deleted file mode 100644
index c51d7cb..0000000
--- a/hooks/useDriver.ts
+++ /dev/null
@@ -1,152 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useReducer, useState } from "react";
-import { getStoredToken } from "../lib/auth";
-import { driverService } from "../services/driver.service";
-import type { Driver } from "../types/driver";
-
-// ── Notification type ──────────────────────────────────────────────────────
-export interface DriverNotification {
-  type: "success" | "error";
-  message: string;
-}
-
-// ── Table state / reducer ──────────────────────────────────────────────────
-interface TableState {
-  drivers: Driver[];
-  loading: boolean;
-  total: number;
-  pages: number;
-  error: string | null;
-}
-
-type TableAction =
-  | { type: "LOAD_START" }
-  | { type: "LOAD_OK"; drivers: Driver[]; total: number; pages: number }
-  | { type: "LOAD_ERR"; error: string }
-  | { type: "DELETE"; id: string }
-  | { type: "CLEAR_ERR" };
-
-function reducer(s: TableState, a: TableAction): TableState {
-  switch (a.type) {
-    case "LOAD_START":
-      return { ...s, loading: true, error: null };
-    case "LOAD_OK":
-      return {
-        ...s,
-        loading: false,
-        drivers: a.drivers,
-        total: a.total,
-        pages: a.pages,
-      };
-    case "LOAD_ERR":
-      return { ...s, loading: false, error: a.error };
-    case "DELETE":
-      return { ...s, drivers: s.drivers.filter((d) => d.id !== a.id) };
-    case "CLEAR_ERR":
-      return { ...s, error: null };
-    default:
-      return s;
-  }
-}
-
-const initialState: TableState = {
-  drivers: [],
-  loading: true,
-  total: 0,
-  pages: 1,
-  error: null,
-};
-
-// ── Main hook ──────────────────────────────────────────────────────────────
-export function useDrivers() {
-  const [state, dispatch] = useReducer(reducer, initialState);
-  const [search, setSearch] = useState("");
-  const [page, setPage] = useState(1);
-  const [notification, setNotification] =
-    useState<DriverNotification | null>(null);
-
-  /** Show a toast for 4 seconds then auto-dismiss. */
-  const notify = useCallback((n: DriverNotification) => {
-    setNotification(n);
-    setTimeout(() => setNotification(null), 4000);
-  }, []);
-
-  // ── Fetch drivers ─────────────────────────────────────────────────────────
-  const loadDrivers = useCallback(async (p: number, q: string) => {
-    dispatch({ type: "LOAD_START" });
-    try {
-      const token = getStoredToken();
-      const res = await driverService.getAll(p, q, token);
-      // The response shape from the backend:
-      // { data: { data: Driver[], pagination: { total, page, pages }, meta?: ... } }
-      const payload = (
-        res as unknown as {
-          data: {
-            data: Driver[];
-            pagination?: { total: number; pages: number };
-            meta?: { total: number; pages: number };
-          };
-        }
-      ).data ?? res;
-
-      dispatch({
-        type: "LOAD_OK",
-        drivers: payload.data ?? [],
-        total:
-          payload.meta?.total ?? payload.pagination?.total ?? 0,
-        pages:
-          payload.meta?.pages ?? payload.pagination?.pages ?? 1,
-      });
-    } catch {
-      dispatch({
-        type: "LOAD_ERR",
-        error: "تعذّر تحميل بيانات السائقين. يرجى المحاولة مجدداً.",
-      });
-    }
-  }, []);
-
-  // Reload whenever page or search changes.
-  useEffect(() => {
-    loadDrivers(page, search);
-  }, [page, search, loadDrivers]);
-
-  // ── Delete ────────────────────────────────────────────────────────────────
-  const deleteDriver = useCallback(
-    async (id: string): Promise<boolean> => {
-      try {
-        const token = getStoredToken();
-        await driverService.delete(id, token);
-        dispatch({ type: "DELETE", id });
-        notify({ type: "success", message: "تم حذف السائق بنجاح." });
-        return true;
-      } catch (err) {
-        notify({
-          type: "error",
-          message:
-            err instanceof Error ? err.message : "تعذّر حذف السائق.",
-        });
-        return false;
-      }
-    },
-    [notify],
-  );
-
-  // ── Search helper ─────────────────────────────────────────────────────────
-  const handleSearch = useCallback((q: string) => {
-    setSearch(q);
-    setPage(1);
-  }, []);
-
-  return {
-    ...state,
-    page,
-    search,
-    setPage,
-    handleSearch,
-    clearError: () => dispatch({ type: "CLEAR_ERR" }),
-    deleteDriver,
-    notification,
-    reload: () => loadDrivers(page, search),
-  };
-}
\ No newline at end of file
diff --git a/lib/formatters.ts b/lib/formatters.ts
deleted file mode 100644
index 561a696..0000000
--- a/lib/formatters.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-
-/**
- * Format an ISO date string as a localised Arabic date.
- * @example fmtDate("2026-06-08T10:00:00Z") → "٨ يونيو ٢٠٢٦"
- */
-export function fmtDate(iso: string): string {
-  return new Date(iso).toLocaleDateString("ar-SA", {
-    year: "numeric",
-    month: "short",
-    day: "numeric",
-  });
-}
-
-/**
- * Format a numeric amount as Saudi Riyals.
- * @example fmtAmount(1234.5) → "١٬٢٣٤٫٥٠ ر.س"
- */
-export function fmtAmount(n: number): string {
-  return `${n.toFixed(2)} ر.س`;
-}
\ No newline at end of file
diff --git a/lib/order-status.ts b/lib/order-status.ts
deleted file mode 100644
index f17e89d..0000000
--- a/lib/order-status.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-// lib/order-status.ts
-// Order status display config — no React, no network.
-
-import type { OrderStatus } from "../types/client";
-
-export type { OrderStatus };
-
-/** Tailwind class string for a status badge */
-export function statusColor(status: OrderStatus): string {
-  const map: Record<OrderStatus, string> = {
-    CREATED:    "bg-blue-50 text-blue-700 border-blue-200",
-    IN_TRANSIT: "bg-amber-50 text-amber-700 border-amber-200",
-    DELIVERED:  "bg-emerald-50 text-emerald-700 border-emerald-200",
-    CANCELLED:  "bg-red-50 text-red-600 border-red-200",
-  };
-  return map[status];
-}
-
-/** Arabic label for a status */
-export function statusLabel(status: OrderStatus): string {
-  const map: Record<OrderStatus, string> = {
-    CREATED:    "تم الإنشاء",
-    IN_TRANSIT: "قيد التوصيل",
-    DELIVERED:  "تم التسليم",
-    CANCELLED:  "ملغي",
-  };
-  return map[status];
-}
\ No newline at end of file
diff --git a/next.config.ts b/next.config.ts
index 0f637d8..a5eda0d 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -2,9 +2,15 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  // No rewrites needed. All proxying is handled by
-  // app/api/proxy/[...path]/route.ts, which reads the HttpOnly auth cookie
-  // server-side and forwards it as a Bearer token to the backend.
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "logiapi.slash.sa",
+      },
+    ],
+  },
+
 };
 
 export default nextConfig;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index bc92f77..1defd2c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "logistic_client",
       "version": "0.1.0",
       "dependencies": {
+        "@tabler/icons-webfont": "^3.44.0",
         "next": "16.2.7",
         "react": "19.2.4",
         "react-dom": "19.2.4",
@@ -988,11 +989,31 @@
         "url": "https://opencollective.com/libvips"
       }
     },
+    "node_modules/@isaacs/cliui": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-9.0.0.tgz",
+      "integrity": "sha512-AokJm4tuBHillT+FpMtxQ60n8ObyXBatq7jD2/JA9dxbDDokKQm8KMht5ibGzLVU9IJDIKK4TPKgMHEYMn3lMg==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.4"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
       "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -1014,7 +1035,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -1024,14 +1044,12 @@
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.31",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
       "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -1249,6 +1267,62 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@npmcli/agent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@npmcli/agent/-/agent-3.0.0.tgz",
+      "integrity": "sha512-S79NdEgDQd/NGCay6TCoVzXSj74skRZIKJcpJjC5lOq34SZzyI6MqtiiWoiVWoVrTcGjNeC4ipbh1VIHlpfF5Q==",
+      "license": "ISC",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "http-proxy-agent": "^7.0.0",
+        "https-proxy-agent": "^7.0.1",
+        "lru-cache": "^10.0.1",
+        "socks-proxy-agent": "^8.0.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/@npmcli/agent/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "license": "ISC"
+    },
+    "node_modules/@npmcli/fs": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-4.0.0.tgz",
+      "integrity": "sha512-/xGlezI6xfGO9NwuJlnwz/K14qD1kCSAGtacBHnGzeAIuJGazcp45KP5NuyARXoKb7cwulAGWVsbeSxdG/cb0Q==",
+      "license": "ISC",
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/@npmcli/fs/node_modules/semver": {
+      "version": "7.8.5",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
+      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -1265,6 +1339,30 @@
         "tslib": "^2.8.0"
       }
     },
+    "node_modules/@tabler/icons": {
+      "version": "3.44.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.44.0.tgz",
+      "integrity": "sha512-Wn0AOZG9sg0L+bjfMqq4eNhC6pQjIrk94LvvWYNYkY8KH8wC3YILRzQlrnVJc4FUeMxH/AK97QsYCX35H3LndA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
+    "node_modules/@tabler/icons-webfont": {
+      "version": "3.44.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-webfont/-/icons-webfont-3.44.0.tgz",
+      "integrity": "sha512-gN6SCXv88bL5Cehf10bVxBgi4q79WSzOrmjnKkSf6sxRdmRy27ZC+T5dXmqnU2PVGLLrBJqGkmMlHukNGFrl1A==",
+      "dependencies": {
+        "@tabler/icons": "3.44.0",
+        "svg-path-commander": "^2.1.11",
+        "svgtofont": "^6.5.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
     "node_modules/@tailwindcss/node": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.0.tgz",
@@ -1536,6 +1634,16 @@
         "tailwindcss": "4.3.0"
       }
     },
+    "node_modules/@thednp/dommatrix": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@thednp/dommatrix/-/dommatrix-3.0.4.tgz",
+      "integrity": "sha512-xpKtQZqFOuAPfQDbePIh9f48YKfmULV7z9C+anPBSHiOG4P+T3ct7Cx2AZOoUeXbxiDkz7SONANy1bB7p2uysg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20",
+        "pnpm": ">=8.6.0"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.2",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
@@ -1572,7 +1680,6 @@
       "version": "20.19.41",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.41.tgz",
       "integrity": "sha512-ECymXOukMnOoVkC2bb1Vc/w/836DXncOg5m8Xj1RH7xSHZJWNYY6Zh7EH477vcnD5egKNNfy2RpNOmuChhFPgQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
@@ -1598,6 +1705,15 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/sax": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@types/sax/-/sax-1.2.7.tgz",
+      "integrity": "sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.60.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.60.1.tgz",
@@ -2206,11 +2322,34 @@
         "win32"
       ]
     },
+    "node_modules/@xmldom/xmldom": {
+      "version": "0.9.10",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.9.10.tgz",
+      "integrity": "sha512-A9gOqLdi6cV4ibazAjcQufGj0B1y/vDqYrcuP6d/6x8P27gRS8643Dj9o1dEKtB6O7fwxb2FgBmJS2mX7gpvdw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.6"
+      }
+    },
+    "node_modules/a-sync-waterfall": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
+      "integrity": "sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA==",
+      "license": "MIT"
+    },
+    "node_modules/abbrev": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-3.0.1.tgz",
+      "integrity": "sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg==",
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.16.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -2223,12 +2362,20 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.15.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
@@ -2246,11 +2393,19 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -2262,11 +2417,16 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "license": "MIT"
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true,
       "license": "Python-2.0"
     },
     "node_modules/aria-query": {
@@ -2439,6 +2599,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
+      "license": "MIT"
+    },
     "node_modules/ast-types-flow": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
@@ -2456,6 +2622,27 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/auto-config-loader": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/auto-config-loader/-/auto-config-loader-2.0.2.tgz",
+      "integrity": "sha512-0V8gZAGGqiFDP15d6d4/Emi6Gpozbr1S9lSfxJ+lNV8nF+7grhcgbHIgn3O/DQKybS+cDqVMC3rxH8k+o0ISpA==",
+      "license": "MIT",
+      "dependencies": {
+        "ini": "^5.0.0",
+        "jiti": "^2.4.1",
+        "jsonc-eslint-parser": "^2.3.0",
+        "lodash.merge": "^4.6.2",
+        "sucrase": "^3.35.0",
+        "toml-eslint-parser": "^0.10.0",
+        "yaml-eslint-parser": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.5.0",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.5.0.tgz",
@@ -2533,7 +2720,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
@@ -2548,6 +2734,21 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "license": "ISC"
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.15.tgz",
@@ -2606,6 +2807,214 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/bufferstreams": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/bufferstreams/-/bufferstreams-4.0.0.tgz",
+      "integrity": "sha512-azX778/2VQ9K2uiYprSUKLgK2K6lR1KtJycJDsMg7u0+Cc994A9HyGaUKb01e/T+M8jse057429iKXurCaT35g==",
+      "license": "MIT",
+      "dependencies": {
+        "readable-stream": "^3.4.0",
+        "yerror": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=20.11.1"
+      }
+    },
+    "node_modules/cacache": {
+      "version": "19.0.1",
+      "resolved": "https://registry.npmjs.org/cacache/-/cacache-19.0.1.tgz",
+      "integrity": "sha512-hdsUxulXCi5STId78vRVYEtDAjq99ICAUktLTeTYsLoTE6Z8dS0c8pWNCxwdrk9YfJeobDZc2Y186hD/5ZQgFQ==",
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/fs": "^4.0.0",
+        "fs-minipass": "^3.0.0",
+        "glob": "^10.2.2",
+        "lru-cache": "^10.0.1",
+        "minipass": "^7.0.3",
+        "minipass-collect": "^2.0.1",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.4",
+        "p-map": "^7.0.2",
+        "ssri": "^12.0.0",
+        "tar": "^7.4.3",
+        "unique-filename": "^4.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/cacache/node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/cacache/node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/cacache/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/cacache/node_modules/brace-expansion": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.1.tgz",
+      "integrity": "sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/cacache/node_modules/glob": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
+      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/cacache/node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/cacache/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "license": "ISC"
+    },
+    "node_modules/cacache/node_modules/minimatch": {
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/cacache/node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/cacache/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cacache/node_modules/strip-ansi": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.2.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/cacache/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.9.tgz",
@@ -2703,17 +3112,81 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/cheerio": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0.tgz",
+      "integrity": "sha512-quS9HgjQpdaXOvsZz82Oz7uxtXiy6UIsIQcpBj7HRw2M63Skasm9qlDocAM7jNuaxdhpPU7c4kJN+gA5MCu4ww==",
+      "license": "MIT",
+      "dependencies": {
+        "cheerio-select": "^2.1.0",
+        "dom-serializer": "^2.0.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.1.0",
+        "encoding-sniffer": "^0.2.0",
+        "htmlparser2": "^9.1.0",
+        "parse5": "^7.1.2",
+        "parse5-htmlparser2-tree-adapter": "^7.0.0",
+        "parse5-parser-stream": "^7.1.2",
+        "undici": "^6.19.5",
+        "whatwg-mimetype": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=18.17"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/cheerio?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz",
+      "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-select": "^5.1.0",
+        "css-what": "^6.1.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/chownr": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
@@ -2726,9 +3199,29 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/colors-cli": {
+      "version": "1.0.33",
+      "resolved": "https://registry.npmjs.org/colors-cli/-/colors-cli-1.0.33.tgz",
+      "integrity": "sha512-PWGsmoJFdOB0t+BeHgmtuoRZUQucOLl5ii81NBzOOGVxlgE04muFNHlR5j8i8MKbOPELBl3243AI6lGBTj5ICQ==",
+      "license": "MIT",
+      "bin": {
+        "colors": "bin/colors"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      }
+    },
+    "node_modules/commander": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+      "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2747,7 +3240,6 @@
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
@@ -2758,6 +3250,80 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-select": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
+      "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
+      "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "license": "CC0-1.0"
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -2765,6 +3331,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cubic2quad": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/cubic2quad/-/cubic2quad-1.2.1.tgz",
+      "integrity": "sha512-wT5Y7mO8abrV16gnssKdmIhIbA9wSkeMzhh27jAguKrV82i24wER0vL5TGhUJ9dbJNDcigoRZ0IAHFEEEI4THQ==",
+      "license": "MIT"
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -2772,6 +3344,15 @@
       "dev": true,
       "license": "BSD-2-Clause"
     },
+    "node_modules/data-uri-to-buffer": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
+      "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/data-view-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
@@ -2830,7 +3411,6 @@
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
       "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -2910,6 +3490,61 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -2925,6 +3560,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "license": "MIT"
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.366",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.366.tgz",
@@ -2936,9 +3577,31 @@
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "iconv-lite": "^0.6.2"
+      }
+    },
+    "node_modules/encoding-sniffer": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/encoding-sniffer/-/encoding-sniffer-0.2.1.tgz",
+      "integrity": "sha512-5gvq20T6vfpekVtqrYQsSCFZ1wEg5+wW0/QaZMWkFr6BqD3NfKs0rLCx4rrVlSWJeZb5NBJgVLswK/w2MWU+Gw==",
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "^0.6.3",
+        "whatwg-encoding": "^3.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/encoding-sniffer?sponsor=1"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.22.1",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.22.1.tgz",
@@ -2953,6 +3616,33 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/env-paths": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/err-code": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz",
+      "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==",
+      "license": "MIT"
+    },
     "node_modules/es-abstract": {
       "version": "1.24.2",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.2.tgz",
@@ -3134,7 +3824,6 @@
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
       "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -3559,6 +4248,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/exponential-backoff": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/exponential-backoff/-/exponential-backoff-3.1.3.tgz",
+      "integrity": "sha512-ZgEeZXj30q+I0EN+CbSSpIyPaJ5HVQD18Z1m+u1FXbAeT94mr1zw50q4q6jiiC447Nl/YTcIYSAftiGqetwXCA==",
+      "license": "Apache-2.0"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3620,6 +4315,29 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fetch-blob": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
+      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "node-domexception": "^1.0.0",
+        "web-streams-polyfill": "^3.0.3"
+      },
+      "engines": {
+        "node": "^12.20 || >= 14.13"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -3633,6 +4351,12 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "license": "MIT"
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -3700,6 +4424,34 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/formdata-polyfill": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
+      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
+      "license": "MIT",
+      "dependencies": {
+        "fetch-blob": "^3.1.2"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "5.3.4",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
@@ -3714,6 +4466,32 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/fs-extra": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+      "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/fs-minipass": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-3.0.3.tgz",
+      "integrity": "sha512-XUBA9XClHbnJWSfBzjkm6RvPsyg3sryZt06BEQoXcF7EK/xpGaQYJgQKDJSUH5SGZ76Y7pFx1QBnXz09rU5Fbw==",
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -3775,6 +4553,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -3845,6 +4632,30 @@
         "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
       }
     },
+    "node_modules/glob": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-11.1.0.tgz",
+      "integrity": "sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "foreground-child": "^3.3.1",
+        "jackspeak": "^4.1.1",
+        "minimatch": "^10.1.1",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^2.0.0"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -3858,6 +4669,42 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/glob/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/glob/node_modules/brace-expansion": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.6.tgz",
+      "integrity": "sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/glob/node_modules/minimatch": {
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.5"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/globals": {
       "version": "14.0.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
@@ -3905,7 +4752,6 @@
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/has-bigints": {
@@ -4019,6 +4865,69 @@
         "hermes-estree": "0.25.1"
       }
     },
+    "node_modules/htmlparser2": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz",
+      "integrity": "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.1.0",
+        "entities": "^4.5.0"
+      }
+    },
+    "node_modules/http-cache-semantics": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.2.0.tgz",
+      "integrity": "sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -4029,6 +4938,18 @@
         "node": ">= 4"
       }
     },
+    "node_modules/image2uri": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/image2uri/-/image2uri-2.1.2.tgz",
+      "integrity": "sha512-3b2zRma8I3zulb4OCkZruRw1VsnysT9phBzOJj+x3lPkwybJtNa5Sz6Dw8jSQI6OL7Ns4H5h8Y26EJbwq4GhQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "node-fetch": "^3.3.1"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -4050,12 +4971,26 @@
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.8.19"
       }
     },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/ini": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-5.0.0.tgz",
+      "integrity": "sha512-+N0ngpO3e7cRUWOJAS7qw0IZIVc6XPrW4MlFBdD066F2L4k1L6ker3hLqSq7iXxU5tgS4WGkIUElWn5vogAEnw==",
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
     "node_modules/internal-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
@@ -4071,6 +5006,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/ip-address": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.2.0.tgz",
+      "integrity": "sha512-/+S6j4E9AHvW9SWMSEY9Xfy66O5PWvVEJ08O0y5JGyEKQpojb0K0GKpz/v5HJ/G0vi3D2sjGK78119oXZeE0qA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -4255,6 +5199,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-generator-function": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
@@ -4497,7 +5450,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/iterator.prototype": {
@@ -4518,11 +5470,25 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/jackspeak": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-4.2.3.tgz",
+      "integrity": "sha512-ykkVRwrYvFm1nb2AJfKKYPr0emF6IiXDYUaFx4Zn9ZuIH7MrzEZ3sD5RlqGXNRpHtvUHJyOnCEFxOlNDtGo7wg==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^9.0.0"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/jiti": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
       "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "jiti": "lib/jiti-cli.mjs"
@@ -4605,6 +5571,77 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonc-eslint-parser": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/jsonc-eslint-parser/-/jsonc-eslint-parser-2.4.2.tgz",
+      "integrity": "sha512-1e4qoRgnn448pRuMvKGsFFymUCquZV0mpGgOyIKNgD3JVDTsVJyRBGH/Fm0tBb8WsWGgmB1mDe6/yJMQM37DUA==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.5.0",
+        "eslint-visitor-keys": "^3.0.0",
+        "espree": "^9.0.0",
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ota-meshi"
+      }
+    },
+    "node_modules/jsonc-eslint-parser/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/jsonc-eslint-parser/node_modules/espree": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.9.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/jsonc-eslint-parser/node_modules/semver": {
+      "version": "7.8.5",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
+      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jsonfile": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.1.tgz",
+      "integrity": "sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -4926,6 +5963,12 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "license": "MIT"
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -4942,11 +5985,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/loose-envify": {
@@ -4982,6 +6030,28 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/make-fetch-happen": {
+      "version": "14.0.3",
+      "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-14.0.3.tgz",
+      "integrity": "sha512-QMjGbFTP0blj97EeidG5hk/QhKQ3T4ICckQGLgz38QF7Vgbk6e6FTARN8KhKxyBbWn8R0HU+bnw8aSoFPD4qtQ==",
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/agent": "^3.0.0",
+        "cacache": "^19.0.1",
+        "http-cache-semantics": "^4.1.1",
+        "minipass": "^7.0.2",
+        "minipass-fetch": "^4.0.0",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.4",
+        "negotiator": "^1.0.0",
+        "proc-log": "^5.0.0",
+        "promise-retry": "^2.0.1",
+        "ssri": "^12.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -4992,6 +6062,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "license": "CC0-1.0"
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -5002,6 +6078,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/microbuffer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/microbuffer/-/microbuffer-1.0.0.tgz",
+      "integrity": "sha512-O/SUXauVN4x6RaEJFqSPcXNtLFL+QzJHKZlyDVYFwcDDRVca3Fa/37QXXC+4zAGGa4YhHrHxKXuuHvLDIQECtA==",
+      "license": "MIT"
+    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -5039,11 +6121,167 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/minipass": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz",
+      "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/minipass-collect": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-2.0.1.tgz",
+      "integrity": "sha512-D7V8PO9oaz7PWGLbCACuI1qEOsq7UKfLotx/C0Aet43fCUB/wfQ7DYeq2oR/svFJGYDHPr38SHATeaj/ZoKHKw==",
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/minipass-fetch": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-4.0.1.tgz",
+      "integrity": "sha512-j7U11C5HXigVuutxebFadoYBbd7VSdZWggSe64NVdvWNBqGAiXPL2QVCehjmw7lY1oF9gOllYbORh+hiNgfPgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.0.3",
+        "minipass-sized": "^1.0.3",
+        "minizlib": "^3.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      },
+      "optionalDependencies": {
+        "encoding": "^0.1.13"
+      }
+    },
+    "node_modules/minipass-flush": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.7.tgz",
+      "integrity": "sha512-TbqTz9cUwWyHS2Dy89P3ocAGUGxKjjLuR9z8w4WUTGAVgEj17/4nhgo2Du56i0Fm3Pm30g4iA8Lcqctc76jCzA==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/minipass-flush/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-flush/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "license": "ISC"
+    },
+    "node_modules/minipass-pipeline": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
+      "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-pipeline/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-pipeline/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "license": "ISC"
+    },
+    "node_modules/minipass-sized": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/minipass-sized/-/minipass-sized-1.0.3.tgz",
+      "integrity": "sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==",
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-sized/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-sized/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "license": "ISC"
+    },
+    "node_modules/minizlib": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz",
+      "integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nan": {
+      "version": "2.27.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.27.0.tgz",
+      "integrity": "sha512-hC+0LidcL3XE4rp1C4H54KujgXKzbfyTngZTwBByQxsOxCEKZT0MPQ4hOKUH2jU1OYstqdDH4onyHPDzcV0XdQ==",
       "license": "MIT"
     },
     "node_modules/nanoid": {
@@ -5087,6 +6325,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/negotiator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
+      "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/next": {
       "version": "16.2.7",
       "resolved": "https://registry.npmjs.org/next/-/next-16.2.7.tgz",
@@ -5168,6 +6415,26 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/node-domexception": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
+      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
+      "deprecated": "Use your platform's native DOMException instead",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "github",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.5.0"
+      }
+    },
     "node_modules/node-exports-info": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/node-exports-info/-/node-exports-info-1.6.0.tgz",
@@ -5187,6 +6454,84 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/node-fetch": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
+      "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
+      "license": "MIT",
+      "dependencies": {
+        "data-uri-to-buffer": "^4.0.0",
+        "fetch-blob": "^3.1.4",
+        "formdata-polyfill": "^4.0.10"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/node-fetch"
+      }
+    },
+    "node_modules/node-gyp": {
+      "version": "11.5.0",
+      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-11.5.0.tgz",
+      "integrity": "sha512-ra7Kvlhxn5V9Slyus0ygMa2h+UqExPqUIkfk7Pc8QTLT956JLSy51uWFwHtIYy0vI8cB4BDhc/S03+880My/LQ==",
+      "license": "MIT",
+      "dependencies": {
+        "env-paths": "^2.2.0",
+        "exponential-backoff": "^3.1.1",
+        "graceful-fs": "^4.2.6",
+        "make-fetch-happen": "^14.0.3",
+        "nopt": "^8.0.0",
+        "proc-log": "^5.0.0",
+        "semver": "^7.3.5",
+        "tar": "^7.4.3",
+        "tinyglobby": "^0.2.12",
+        "which": "^5.0.0"
+      },
+      "bin": {
+        "node-gyp": "bin/node-gyp.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/node-gyp/node_modules/isexe": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.5.tgz",
+      "integrity": "sha512-6B3tLtFqtQS4ekarvLVMZ+X+VlvQekbe4taUkf/rhVO3d/h0M2rfARm/pXLcPEsjjMsFgrFgSrhQIxcSVrBz8w==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/node-gyp/node_modules/semver": {
+      "version": "7.8.5",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
+      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/node-gyp/node_modules/which": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/which/-/which-5.0.0.tgz",
+      "integrity": "sha512-JEdGzHwwkrbWoGOlIHqQ5gtprKGOenpDHpxE9zVR1bWbOtYRyPPHMe9FaP6x61CmNaTThSkb0DAJte5jD+DmzQ==",
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^3.1.1"
+      },
+      "bin": {
+        "node-which": "bin/which.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.47",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.47.tgz",
@@ -5197,11 +6542,62 @@
         "node": ">=18"
       }
     },
+    "node_modules/nopt": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-8.1.0.tgz",
+      "integrity": "sha512-ieGu42u/Qsa4TFktmaKEwM6MQH0pOWnaB3htzh0JRtx84+Mebc0cbZYN5bC+6WTZ4+77xrL9Pn5m7CV6VIkV7A==",
+      "license": "ISC",
+      "dependencies": {
+        "abbrev": "^3.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
+    "node_modules/nunjucks": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.4.tgz",
+      "integrity": "sha512-26XRV6BhkgK0VOxfbU5cQI+ICFUtMLixv1noZn1tGU38kQH5A5nmmbk/O45xdyBhD1esk47nKrY0mvQpZIhRjQ==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "a-sync-waterfall": "^1.0.0",
+        "asap": "^2.0.3",
+        "commander": "^5.1.0"
+      },
+      "bin": {
+        "nunjucks-precompile": "bin/precompile"
+      },
+      "engines": {
+        "node": ">= 6.9.0"
+      },
+      "peerDependencies": {
+        "chokidar": "^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "chokidar": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -5388,6 +6784,30 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p-map": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-7.0.4.tgz",
+      "integrity": "sha512-tkAQEw8ysMzmkhgw8k+1U/iPhWNhykKnSk4Rd5zLoPJCuJaGRPo6YposrZgaxHKzDHdDWWZvE/Sk7hsL2X/CpQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "license": "BlueOak-1.0.0"
+    },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -5401,6 +6821,55 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.1.0.tgz",
+      "integrity": "sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==",
+      "license": "MIT",
+      "dependencies": {
+        "domhandler": "^5.0.3",
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-parser-stream": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/parse5-parser-stream/-/parse5-parser-stream-7.1.2.tgz",
+      "integrity": "sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==",
+      "license": "MIT",
+      "dependencies": {
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5/node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -5415,7 +6884,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -5428,6 +6896,31 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/path-scurry": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.2.tgz",
+      "integrity": "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^11.0.0",
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "11.5.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.1.tgz",
+      "integrity": "sha512-RPimw/7aMdv2oqRrxKwvZXcPfwBrn/JZ2xYcY9Hus/6LaS3VOAKVWKWgNLCFSiOm1ESXinjsDlidVU7JlnCN2A==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -5447,6 +6940,15 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -5503,6 +7005,28 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/proc-log": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-5.0.0.tgz",
+      "integrity": "sha512-Azwzvl90HaF0aCz1JrDdXQykFakSSNPaPoiZ9fm5qJIMHioDZEi7OAdRwSm6rSoPtY3Qutnm3L7ogmg3dc+wbQ==",
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/promise-retry": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz",
+      "integrity": "sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==",
+      "license": "MIT",
+      "dependencies": {
+        "err-code": "^2.0.2",
+        "retry": "^0.12.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -5580,6 +7104,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -5624,6 +7162,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve": {
       "version": "2.0.0-next.7",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.7.tgz",
@@ -5668,6 +7215,15 @@
         "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
       }
     },
+    "node_modules/retry": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
+      "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/reusify": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
@@ -5723,6 +7279,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/safe-push-apply": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
@@ -5758,6 +7334,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
+    "node_modules/sax": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.6.0.tgz",
+      "integrity": "sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=11.0.0"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
@@ -5885,7 +7476,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
@@ -5898,7 +7488,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -5980,6 +7569,56 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/smart-buffer": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
+      "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/socks": {
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.9.tgz",
+      "integrity": "sha512-LJhUYUvItdQ0LkJTmPeaEObWXAqFyfmP85x0tch/ez9cahmhlBBLbIqDFnvBnUJGagb0JbIQrkBs1wJ+yRYpEw==",
+      "license": "MIT",
+      "dependencies": {
+        "ip-address": "^10.1.1",
+        "smart-buffer": "^4.2.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/socks-proxy-agent": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.5.tgz",
+      "integrity": "sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "^4.3.4",
+        "socks": "^2.8.3"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -5989,6 +7628,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ssri": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-12.0.0.tgz",
+      "integrity": "sha512-S7iGNosepx9RadX82oimUkvr0Ct7IjJbEbs4mJcTxst8um95J3sDYU1RBEOvdu6oL1Wek2ODI5i4MAw+dZ6cAQ==",
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
     "node_modules/stable-hash": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz",
@@ -6010,6 +7661,56 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/string-width/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
     "node_modules/string.prototype.includes": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@@ -6123,6 +7824,31 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -6169,6 +7895,37 @@
         }
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/sucrase/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -6195,6 +7952,157 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-path-commander": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/svg-path-commander/-/svg-path-commander-2.2.1.tgz",
+      "integrity": "sha512-hZ9GOFBT/J31fTu3UCj+dZs1w4ZqiGCG/nQpFm1CEQ/EPFj9x3pHXPi6EjYuZmPlua7K8CdFc2+HxndiZ/Q3+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@thednp/dommatrix": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=16",
+        "pnpm": ">=8.6.0"
+      }
+    },
+    "node_modules/svg-pathdata": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-7.2.0.tgz",
+      "integrity": "sha512-qd+AxqMpfRrRQaWb2SrNFvn69cvl6piqY8TxhYl2Li1g4/LO5F9NJb5wI4vNwRryqgSgD43gYKLm/w3ag1bKvQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.11.1"
+      }
+    },
+    "node_modules/svg2ttf": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/svg2ttf/-/svg2ttf-6.1.0.tgz",
+      "integrity": "sha512-EjxgcmhKcBpx/3fR1hPwVtJAbUc/ZsDpwOTF74SI3PbzCg4pDHnxVmoSuqgEqxVJGqqkSCI6+82cucpn2D5aOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@xmldom/xmldom": "^0.9.10",
+        "argparse": "^2.0.1",
+        "cubic2quad": "^1.2.1",
+        "lodash": "^4.17.10",
+        "microbuffer": "^1.0.0",
+        "svgpath": "^2.1.5"
+      },
+      "bin": {
+        "svg2ttf": "svg2ttf.js"
+      }
+    },
+    "node_modules/svgicons2svgfont": {
+      "version": "15.0.1",
+      "resolved": "https://registry.npmjs.org/svgicons2svgfont/-/svgicons2svgfont-15.0.1.tgz",
+      "integrity": "sha512-rE3BoIipD6DxBejPswalKRZZYA+7sy4miHqiHgXB0zI1xJD3gSCVrXh2R6Sdh9E4XDTxYp7gDxGW2W8DIBif/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/sax": "^1.2.7",
+        "commander": "^12.1.0",
+        "debug": "^4.3.6",
+        "glob": "^11.0.0",
+        "sax": "^1.4.1",
+        "svg-pathdata": "^7.0.0",
+        "transformation-matrix": "^3.0.0",
+        "yerror": "^8.0.0"
+      },
+      "bin": {
+        "svgicons2svgfont": "bin/svgicons2svgfont.js"
+      },
+      "engines": {
+        "node": ">=20.11.1"
+      }
+    },
+    "node_modules/svgicons2svgfont/node_modules/commander": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
+      "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/svgo": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.3.tgz",
+      "integrity": "sha512-+wn7I4p7YgJhHs38k2TNjy1vCfPIfLIJWR5MnCStsN8WuuTcBnRKcMHQLMM2ijxGZmDoZwNv8ipl5aTTen62ng==",
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^7.2.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^2.3.1",
+        "css-what": "^6.1.0",
+        "csso": "^5.0.5",
+        "picocolors": "^1.0.0",
+        "sax": "^1.5.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
+      }
+    },
+    "node_modules/svgo/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/svgpath": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/svgpath/-/svgpath-2.6.0.tgz",
+      "integrity": "sha512-OIWR6bKzXvdXYyO4DK/UWa1VA1JeKq8E+0ug2DG98Y/vOmMpfZNj+TIG988HjfYSqtcy/hFOtZq/n/j5GSESNg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/fontello/svg2ttf?sponsor=1"
+      }
+    },
+    "node_modules/svgtofont": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/svgtofont/-/svgtofont-6.5.2.tgz",
+      "integrity": "sha512-D9aqybvt3yXIi4RLPbPDXwX9fvoTKN8HeiBeRA7Yb+5TtfdF9Bz9/TGZHEu+hlRtAmlZ3YBBluElfy9BMitcoA==",
+      "license": "MIT",
+      "dependencies": {
+        "auto-config-loader": "^2.0.0",
+        "cheerio": "~1.0.0",
+        "colors-cli": "~1.0.28",
+        "fs-extra": "~11.2.0",
+        "image2uri": "^2.1.2",
+        "nunjucks": "^3.2.4",
+        "svg2ttf": "~6.1.0",
+        "svgicons2svgfont": "~15.0.0",
+        "svgo": "~3.3.0",
+        "ttf2eot": "~3.1.0",
+        "ttf2woff": "~3.0.0",
+        "ttf2woff2": "~8.0.0",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "svgtofont": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      },
+      "peerDependencies": {
+        "@types/svg2ttf": "~5.0.1"
+      },
+      "peerDependenciesMeta": {
+        "@types/svg2ttf": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.0.tgz",
@@ -6216,6 +8124,52 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/tar": {
+      "version": "7.5.16",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.16.tgz",
+      "integrity": "sha512-56adEpPMouktRlBLXiaYFFzZ/3+JXa8P9n7WbR+ibIjtviN55mEaOkiysCnPnWm+7kkui1Dn8J9l+g6zV8731w==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.1.0",
+        "yallist": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tar/node_modules/yallist": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/tiny-case": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
@@ -6226,7 +8180,6 @@
       "version": "0.2.17",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
       "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
@@ -6243,7 +8196,6 @@
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12.0.0"
@@ -6261,7 +8213,6 @@
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -6283,12 +8234,48 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toml-eslint-parser": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/toml-eslint-parser/-/toml-eslint-parser-0.10.1.tgz",
+      "integrity": "sha512-9mjy3frhioGIVGcwamlVlUyJ9x+WHw/TXiz9R4YOlmsIuBN43r9Dp8HZ35SF9EKjHrn3BUZj04CF+YqZ2oJ+7w==",
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.0.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ota-meshi"
+      }
+    },
+    "node_modules/toml-eslint-parser/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "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/transformation-matrix": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/transformation-matrix/-/transformation-matrix-3.1.0.tgz",
+      "integrity": "sha512-oYubRWTi2tYFHAL2J8DLvPIqIYcYZ0fSOi2vmSy042Ho4jBW2ce6VP7QfD44t65WQz6bw5w1Pk22J7lcUpaTKA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/chrvadala"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.5.0.tgz",
@@ -6302,6 +8289,12 @@
         "typescript": ">=4.8.4"
       }
     },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "license": "Apache-2.0"
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
@@ -6334,6 +8327,52 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
+    "node_modules/ttf2eot": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/ttf2eot/-/ttf2eot-3.1.0.tgz",
+      "integrity": "sha512-aHTbcYosNHVqb2Qtt9Xfta77ae/5y0VfdwNLUS6sGBeGr22cX2JDMo/i5h3uuOf+FAD3akYOr17+fYd5NK8aXw==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "ttf2eot": "ttf2eot.js"
+      }
+    },
+    "node_modules/ttf2woff": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/ttf2woff/-/ttf2woff-3.0.0.tgz",
+      "integrity": "sha512-OvmFcj70PhmAsVQKfC15XoKH55cRWuaRzvr2fpTNhTNer6JBpG8n6vOhRrIgxMjcikyYt88xqYXMMVapJ4Rjvg==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "pako": "^1.0.0"
+      },
+      "bin": {
+        "ttf2woff": "ttf2woff.js"
+      }
+    },
+    "node_modules/ttf2woff2": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/ttf2woff2/-/ttf2woff2-8.0.1.tgz",
+      "integrity": "sha512-nWSZLaXOgYtvgY6G0SFI8dVHsGWIchlnNMNRglT3Amp2WGy0GSPd9kLAkFd+HvEOzZ/aY6EUrpOF66QaPbipgg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "bindings": "^1.5.0",
+        "bufferstreams": "^4.0.0",
+        "debug": "^4.4.1",
+        "nan": "^2.22.2",
+        "node-gyp": "^11.2.0",
+        "yerror": "^8.0.0"
+      },
+      "bin": {
+        "ttf2woff2": "bin/ttf2woff2.js"
+      },
+      "engines": {
+        "node": ">=20.11.1"
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -6494,13 +8533,54 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/undici": {
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.27.0.tgz",
+      "integrity": "sha512-YmfV3YnEDzXRC5lZ2jWtWWHKGUm1zIt8AhesR1tens+HTNv+YZlN/dp6G727LOvMJ8xjP9Be7Y2Sdr96LDm+pg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.17"
+      }
+    },
     "node_modules/undici-types": {
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/unique-filename": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-4.0.0.tgz",
+      "integrity": "sha512-XSnEewXmQ+veP7xX2dS5Q4yZAvO40cBN2MWkJ7D/6sW4Dg6wYBNwM1Vrnz1FhH5AdeLIlUXRI9e28z1YZi71NQ==",
+      "license": "ISC",
+      "dependencies": {
+        "unique-slug": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/unique-slug": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-5.0.0.tgz",
+      "integrity": "sha512-9OdaqO5kwqR+1kVgHAhsp5vPNU0hnxRa26rBFNfNgM7M6pNtgzeBn3s/xbyCQL3dcjzOatcef6UUHpB/6MaETg==",
+      "license": "ISC",
+      "dependencies": {
+        "imurmurhash": "^0.1.4"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/unrs-resolver": {
       "version": "1.12.2",
       "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.12.2.tgz",
@@ -6580,11 +8660,47 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
+    "node_modules/web-streams-polyfill": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
+      "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "deprecated": "Use @exodus/bytes instead for a more spec-conformant and faster implementation",
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
@@ -6695,6 +8811,50 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@@ -6702,6 +8862,85 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/yaml": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
+      "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
+    },
+    "node_modules/yaml-eslint-parser": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/yaml-eslint-parser/-/yaml-eslint-parser-1.3.2.tgz",
+      "integrity": "sha512-odxVsHAkZYYglR30aPYRY4nUGJnoJ2y1ww2HDvZALo0BDETv9kWbi16J52eHs+PWRNmF4ub6nZqfVOeesOvntg==",
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.0.0",
+        "yaml": "^2.0.0"
+      },
+      "engines": {
+        "node": "^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ota-meshi"
+      }
+    },
+    "node_modules/yaml-eslint-parser/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "17.7.3",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.3.tgz",
+      "integrity": "sha512-GZtjxm/J/4TSxuL3FNYjCmLktBTnIw/rVmKSIyKeYAZpmJB2ig9VauCC5xsa82GNKVKDAqpOn3KVzNt0zmrU0g==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yerror": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/yerror/-/yerror-8.0.0.tgz",
+      "integrity": "sha512-FemWD5/UqNm8ffj8oZIbjWXIF2KE0mZssggYpdaQkWDDgXBQ/35PNIxEuz6/YLn9o0kOxDBNJe8x8k9ljD7k/g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.16.0"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index de4b1fa..fee9919 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@tabler/icons-webfont": "^3.44.0",
     "next": "16.2.7",
     "react": "19.2.4",
     "react-dom": "19.2.4",
diff --git a/services/driver.service.ts b/services/driver.service.ts
deleted file mode 100644
index 26abac9..0000000
--- a/services/driver.service.ts
+++ /dev/null
@@ -1,154 +0,0 @@
-// services/driver.service.ts
-// All API calls for the Driver module.
-// Endpoints extracted from:
-//   - 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, patch } from "./api";
-import type {
-  Driver,
-  DriverListResponse,
-  DriverDetailResponse,
-  DriverReportResponse,
-  CreateDriverPayload,
-  UpdateDriverPayload,
-} from "../types/driver";
-
-/** 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 driverService = {
-  /**
-   * GET /driver
-   * Fetch paginated + searchable driver list.
-   * Requires: "read-driver" permission
-   */
-  getAll: (page = 1, search = "", token: string | null) =>
-    get<DriverListResponse>(
-      `driver${buildQuery({ page, limit: 12, search: search || undefined })}`,
-      token,
-    ),
-
-  /**
-   * GET /driver/archived
-   * Fetch soft-deleted (archived) drivers.
-   * Requires: "read-deleted-driver" permission
-   */
-  getArchived: (token: string | null) =>
-    get<DriverListResponse>("driver/archived", token),
-
-  /**
-   * GET /driver/me
-   * Fetch the currently authenticated driver's info.
-   * Requires: "read-driver" permission
-   */
-  getMe: (token: string | null) =>
-    get<DriverDetailResponse>("driver/me", token),
-
-  /**
-   * GET /driver/:id
-   * Fetch a single driver with status history and branch info.
-   * Requires: "read-driver" permission
-   */
-  getById: (id: string, token: string | null) =>
-    get<DriverDetailResponse>(`driver/${id}`, token),
-
-  /**
-   * POST /driver
-   * Create a new driver (also generates a random userName & password).
-   * Requires: "create-driver" permission
-   * Note: for file uploads (photo / nationalPhoto / driverCardPhoto) use uploadWithImages.
-   */
-  create: (payload: CreateDriverPayload, token: string | null) =>
-    post<{ data: Driver }>("driver", payload, token),
-
-  /**
-   * PATCH /driver/:id
-   * Update driver data or status.
-   * Requires: "update-driver" permission
-   */
-  update: (id: string, payload: UpdateDriverPayload, token: string | null) =>
-    patch<{ data: Driver }>(`driver/${id}`, payload, token),
-
-  /**
-   * DELETE /driver/:id
-   * Soft-delete a driver.
-   * Requires: "delete-driver" permission
-   */
-  delete: (id: string, token: string | null) =>
-    del<void>(`driver/${id}`, token),
-
-  // ── Reports ───────────────────────────────────────────────────────────────
-
-  /**
-   * GET /driver/:id/reports/daily?date=YYYY-MM-DD
-   * Generate an HTML daily report for a driver on a specific date.
-   * Returns { reportUrl, filename }
-   * Requires: "generate-driver-report" permission
-   */
-  getDailyReport: (id: string, date: string, token: string | null) =>
-  get<DriverReportResponse>(
-    `drivers/${id}/reports/daily?date=${encodeURIComponent(date)}`,
-    token,
-  ),
-
-  // ── Image upload (multipart) ──────────────────────────────────────────────
-
-  /**
-   * POST /driver  (multipart/form-data)
-   * Create a driver with photos attached.
-   * photo / nationalPhoto / driverCardPhoto are optional file fields.
-   */
-  createWithImages: async (
-    payload: CreateDriverPayload & {
-      photo?: File;
-      nationalPhoto?: File;
-      driverCardPhoto?: File;
-    },
-    token: string | null,
-  ): Promise<{ data: Driver }> => {
-    const form = new FormData();
-
-    // Text fields
-    Object.entries(payload).forEach(([key, val]) => {
-      if (
-        val !== undefined &&
-        val !== null &&
-        !(val instanceof File)
-      ) {
-        form.append(key, String(val));
-      }
-    });
-
-    // File fields
-    if (payload.photo)         form.append("photo",         payload.photo);
-    if (payload.nationalPhoto) form.append("nationalPhoto", payload.nationalPhoto);
-    if (payload.driverCardPhoto) form.append("driverCardPhoto", payload.driverCardPhoto);
-
-    const res = await fetch("/api/proxy/driver", {
-      method: "POST",
-      headers: token ? { Authorization: `Bearer ${token}` } : {},
-      body: form,
-      cache: "no-store",
-    });
-
-    if (!res.ok) {
-      const json = await res.json().catch(() => null);
-      throw new Error(json?.message ?? `HTTP ${res.status}`);
-    }
-    return res.json() as Promise<{ data: Driver }>;
-  },
-};
\ No newline at end of file
diff --git a/services/index.ts b/services/index.ts
deleted file mode 100644
index e8ba64c..0000000
--- a/services/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export { request, get, post, put, del, ApiError } from "./api";
-export { authService } from "./auth.service";
-export { dashboardService } from "./dashboard.service";
-export { clientService } from "./client.service";
-export {userService} from "./user.service";
-export { carService } from "./car.service";
-export { driverService } from "./driver.service";
\ No newline at end of file
diff --git a/Components/Admen/admen.tsx b/src/Components/Admen/admen.tsx
similarity index 100%
rename from Components/Admen/admen.tsx
rename to src/Components/Admen/admen.tsx
diff --git a/Components/Client/Addressformmodal.tsx b/src/Components/Client/Addressformmodal.tsx
similarity index 99%
rename from Components/Client/Addressformmodal.tsx
rename to src/Components/Client/Addressformmodal.tsx
index 2bae2a8..44f0942 100644
--- a/Components/Client/Addressformmodal.tsx
+++ b/src/Components/Client/Addressformmodal.tsx
@@ -6,7 +6,7 @@ import type {
   ClientAddress,
   ClientAddressFormData,
   ClientAddressFormErrors,
-} from "../../types/client";
+} from "@/src/types/client";
 
 // ── Fixed styles ───────────────────────────────────────────────────────────
 const S = {
diff --git a/Components/Client/ClientAddressForm.tsx b/src/Components/Client/ClientAddressForm.tsx
similarity index 98%
rename from Components/Client/ClientAddressForm.tsx
rename to src/Components/Client/ClientAddressForm.tsx
index 4700977..792775e 100644
--- a/Components/Client/ClientAddressForm.tsx
+++ b/src/Components/Client/ClientAddressForm.tsx
@@ -1,5 +1,5 @@
 import React, { useState, FormEvent } from "react";
-import { ClientAddress, CreateClientAddressPayload } from "../../types/client";
+import { ClientAddress, CreateClientAddressPayload } from "@/src/types/client";
 import { Input, Select, Button } from "../UI";
 
 // ─── Types ────────────────────────────────────────────────────────────────────
diff --git a/Components/Client/ClientForm.tsx b/src/Components/Client/ClientForm.tsx
similarity index 98%
rename from Components/Client/ClientForm.tsx
rename to src/Components/Client/ClientForm.tsx
index feae04e..7b8fcde 100644
--- a/Components/Client/ClientForm.tsx
+++ b/src/Components/Client/ClientForm.tsx
@@ -1,5 +1,5 @@
 import React, { useState, FormEvent } from "react";
-import { Client, CreateClientPayload } from "../../types/client";
+import { Client, CreateClientPayload } from "@/src/types/client";
 import { Input, Textarea, Button } from "../UI";
 
 // ─── Types ────────────────────────────────────────────────────────────────────
diff --git a/Components/Client/Clientformmodal.tsx b/src/Components/Client/Clientformmodal.tsx
similarity index 99%
rename from Components/Client/Clientformmodal.tsx
rename to src/Components/Client/Clientformmodal.tsx
index fd100bb..de6c757 100644
--- a/Components/Client/Clientformmodal.tsx
+++ b/src/Components/Client/Clientformmodal.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import { Alert, Spinner } from "../UI";
-import type { Client, ClientFormData, ClientFormErrors } from "../../types/client";
+import type { Client, ClientFormData, ClientFormErrors } from "@/src/types/client";
 
 // ── Fixed styles (same token system as UserFormModal) ──────────────────────
 const S = {
diff --git a/Components/Client/Clienttable.tsx b/src/Components/Client/Clienttable.tsx
similarity index 99%
rename from Components/Client/Clienttable.tsx
rename to src/Components/Client/Clienttable.tsx
index 856990c..2ae6541 100644
--- a/Components/Client/Clienttable.tsx
+++ b/src/Components/Client/Clienttable.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Spinner } from "../UI";
-import type { Client } from "../../types/client";
+import type { Client } from "@/src/types/client";
 
 // ── Address count badge ────────────────────────────────────────────────────
 function AddressBadge({ count }: { count: number }) {
diff --git a/Components/Client/Deleteconfirmmodal.tsx b/src/Components/Client/Deleteconfirmmodal.tsx
similarity index 98%
rename from Components/Client/Deleteconfirmmodal.tsx
rename to src/Components/Client/Deleteconfirmmodal.tsx
index 93b52f5..20e805d 100644
--- a/Components/Client/Deleteconfirmmodal.tsx
+++ b/src/Components/Client/Deleteconfirmmodal.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect } from "react";
 import { Spinner } from "../UI";
-import type { Client } from "../../types/client";
+import type { Client } from "@/src/types/client";
 
 interface DeleteConfirmModalProps {
   client:    Client;
diff --git a/Components/Client/Toast.tsx b/src/Components/Client/Toast.tsx
similarity index 96%
rename from Components/Client/Toast.tsx
rename to src/Components/Client/Toast.tsx
index af62e2c..bc8979a 100644
--- a/Components/Client/Toast.tsx
+++ b/src/Components/Client/Toast.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import type { Notification } from "../../hooks/useClients";
+import type { Notification } from "@/src/hooks/useClients";
 
 interface ToastProps {
   notification: Notification | null;
diff --git a/src/Components/Client/index.ts b/src/Components/Client/index.ts
new file mode 100644
index 0000000..3fc3880
--- /dev/null
+++ b/src/Components/Client/index.ts
@@ -0,0 +1,5 @@
+export { ClientFormModal } from "./Clientformmodal";
+export { ClientTable } from "./Clienttable";
+export { AddressFormModal } from "./Addressformmodal";
+export { DeleteConfirmModal } from "./Deleteconfirmmodal";
+export { Toast } from "./Toast";
\ No newline at end of file
diff --git a/Components/Client_Adress/clientAdress.tsx b/src/Components/Client_Adress/clientAdress.tsx
similarity index 100%
rename from Components/Client_Adress/clientAdress.tsx
rename to src/Components/Client_Adress/clientAdress.tsx
diff --git a/Components/Driver/DriverDeleteModal.tsx b/src/Components/Driver/DriverDeleteModal.tsx
similarity index 98%
rename from Components/Driver/DriverDeleteModal.tsx
rename to src/Components/Driver/DriverDeleteModal.tsx
index ca9a257..98b7d3c 100644
--- a/Components/Driver/DriverDeleteModal.tsx
+++ b/src/Components/Driver/DriverDeleteModal.tsx
@@ -3,7 +3,7 @@
 
 import { useEffect } from "react";
 import { Spinner } from "../UI";
-import type { Driver } from "../../types/driver";
+import type { Driver } from "@/src/types/driver";
 
 interface DriverDeleteModalProps {
   driver: Driver;
diff --git a/Components/Driver/DriverDetailPanel.tsx b/src/Components/Driver/DriverDetailPanel.tsx
similarity index 77%
rename from Components/Driver/DriverDetailPanel.tsx
rename to src/Components/Driver/DriverDetailPanel.tsx
index 84f0db8..7699ccc 100644
--- a/Components/Driver/DriverDetailPanel.tsx
+++ b/src/Components/Driver/DriverDetailPanel.tsx
@@ -2,15 +2,15 @@
 
 import { useCallback, useEffect, useState } from "react";
 import { Spinner } from "../UI";
-import { driverService } from "../../services/driver.service";
-import { getStoredToken } from "../../lib/auth";
+import { driverService } from "@/src/services/driver.service";
+import { getStoredToken } from "@/src/lib/auth";
 import { DriverReportPanel } from "../Driver_Report/driverReport";
-import type { Driver } from "../../types/driver";
+import type { Driver } from "@/src/types/driver";
 import {
   DRIVER_STATUS_MAP,
   DRIVER_CARD_TYPE_MAP,
   NATIONAL_ID_TYPE_MAP,
-} from "../../types/driver";
+} from "@/src/types/driver";
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
@@ -25,8 +25,7 @@ function fmtDate(iso?: string | null): string {
 
 function isExpiringSoon(iso?: string | null): boolean {
   if (!iso) return false;
-  const diff = new Date(iso).getTime() - Date.now();
-  return diff <= 90 * 86_400_000;
+  return new Date(iso).getTime() - Date.now() <= 90 * 86_400_000;
 }
 
 // ── Sub-components ────────────────────────────────────────────────────────────
@@ -90,17 +89,17 @@ function SectionHeading({ title }: { title: string }) {
   );
 }
 
-// ── Photos section ────────────────────────────────────────────────────────────
+// ── PhotoCard ─────────────────────────────────────────────────────────────────
+// key={url} on the <img> forces a full remount whenever the URL changes,
+// which clears any stale onError state from a previously failed load.
 
-function PhotoCard({
-  url,
-  label,
-}: {
-  url?: string | null;
-  label: string;
-}) {
+function PhotoCard({ url, label }: { url?: string | null; label: string }) {
   const [imgError, setImgError] = useState(false);
 
+  useEffect(() => {
+    setImgError(false);
+  }, [url]);
+
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
       <span style={{ fontSize: 11, fontWeight: 600, color: "var(--color-text-muted)" }}>
@@ -122,6 +121,7 @@ function PhotoCard({
         {url && !imgError ? (
           // eslint-disable-next-line @next/next/no-img-element
           <img
+            key={url}
             src={url}
             alt={label}
             style={{ width: "100%", height: "100%", objectFit: "cover" }}
@@ -181,9 +181,7 @@ export function DriverDetailPanel({
   const [driver, setDriver] = useState<Driver | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [avatarError, setAvatarError] = useState(false);
 
-  // Fetch driver data
   const loadDriver = useCallback(async () => {
     setLoading(true);
     setError(null);
@@ -198,11 +196,8 @@ export function DriverDetailPanel({
     }
   }, [driverId]);
 
-  useEffect(() => {
-    loadDriver();
-  }, [loadDriver]);
+  useEffect(() => { loadDriver(); }, [loadDriver]);
 
-  // Close on Escape key
   useEffect(() => {
     const h = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
     window.addEventListener("keydown", h);
@@ -253,8 +248,8 @@ export function DriverDetailPanel({
           }}
         >
           <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12 }}>
-            {/* Avatar + name */}
             <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+              {/* Avatar — key={photoUrl} forces remount on photo change */}
               <div
                 style={{
                   width: 56,
@@ -269,14 +264,8 @@ export function DriverDetailPanel({
                   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)}
-                  />
+                {driver?.photoUrl ? (
+                  <AvatarImg src={driver.photoUrl} name={driver.name} />
                 ) : (
                   <span style={{ fontSize: 20, fontWeight: 700, color: "var(--color-brand-600)" }}>
                     {driver?.name?.charAt(0) ?? "?"}
@@ -301,7 +290,6 @@ export function DriverDetailPanel({
               </div>
             </div>
 
-            {/* Close button */}
             <button
               type="button"
               onClick={onClose}
@@ -328,7 +316,6 @@ export function DriverDetailPanel({
 
         {/* ── Scrollable content ── */}
         <div style={{ flex: 1, overflowY: "auto", padding: "1.25rem 1.5rem" }}>
-          {/* Loading */}
           {loading && (
             <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "2rem 0" }}>
               <Spinner size="sm" className="text-blue-600" />
@@ -336,18 +323,15 @@ export function DriverDetailPanel({
             </div>
           )}
 
-          {/* Error */}
           {error && (
-            <div
-              style={{
-                borderRadius: "var(--radius-md)",
-                background: "#FEF2F2",
-                border: "1px solid #FECACA",
-                padding: "0.75rem 1rem",
-                fontSize: 13,
-                color: "#DC2626",
-              }}
-            >
+            <div style={{
+              borderRadius: "var(--radius-md)",
+              background: "#FEF2F2",
+              border: "1px solid #FECACA",
+              padding: "0.75rem 1rem",
+              fontSize: 13,
+              color: "#DC2626",
+            }}>
               ⚠ {error}
             </div>
           )}
@@ -357,51 +341,45 @@ export function DriverDetailPanel({
               {/* Status badges */}
               <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: "1rem" }}>
                 {statusConfig && (
-                  <span
-                    style={{
-                      borderRadius: "var(--radius-full)",
-                      border: `1px solid ${statusConfig.border}`,
-                      background: statusConfig.bg,
-                      padding: "0.3rem 0.875rem",
-                      fontSize: 12,
-                      fontWeight: 700,
-                      color: statusConfig.color,
-                      display: "inline-flex",
-                      alignItems: "center",
-                      gap: 6,
-                    }}
-                  >
+                  <span style={{
+                    borderRadius: "var(--radius-full)",
+                    border: `1px solid ${statusConfig.border}`,
+                    background: statusConfig.bg,
+                    padding: "0.3rem 0.875rem",
+                    fontSize: 12,
+                    fontWeight: 700,
+                    color: statusConfig.color,
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 6,
+                  }}>
                     <span style={{ width: 7, height: 7, borderRadius: "50%", background: statusConfig.dot }} />
                     {statusConfig.label}
                   </span>
                 )}
                 {!driver.isActive && (
-                  <span
-                    style={{
-                      borderRadius: "var(--radius-full)",
-                      border: "1px solid #FECACA",
-                      background: "#FEF2F2",
-                      padding: "0.3rem 0.875rem",
-                      fontSize: 12,
-                      fontWeight: 700,
-                      color: "#DC2626",
-                    }}
-                  >
+                  <span style={{
+                    borderRadius: "var(--radius-full)",
+                    border: "1px solid #FECACA",
+                    background: "#FEF2F2",
+                    padding: "0.3rem 0.875rem",
+                    fontSize: 12,
+                    fontWeight: 700,
+                    color: "#DC2626",
+                  }}>
                     محذوف
                   </span>
                 )}
               </div>
 
-              {/* ── Section: Personal Info ── */}
               <SectionHeading title="البيانات الشخصية" />
-              <DetailRow label="الاسم الكامل" value={driver.name} />
-              <DetailRow label="رقم الجوال" value={driver.phone} mono />
+              <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.address ?? "—"} />
+              <DetailRow label="الجنسية"           value={driver.nationality ?? "—"} />
+              <DetailRow label="الفرع"             value={driver.branch?.name ?? "—"} />
 
-              {/* ── Section: ID & GOSI ── */}
               <SectionHeading title="الهوية والتأمينات" />
               <DetailRow
                 label="نوع الهوية"
@@ -415,7 +393,6 @@ export function DriverDetailPanel({
               />
               <DetailRow label="رقم GOSI" value={driver.gosiNumber ?? "—"} mono />
 
-              {/* ── Section: License ── */}
               <SectionHeading title="بيانات رخصة القيادة" />
               <DetailRow label="رقم الرخصة" value={driver.licenseNumber ?? "—"} mono />
               <DetailRow label="نوع الرخصة" value={driver.licenseType ?? "—"} />
@@ -425,7 +402,6 @@ export function DriverDetailPanel({
                 warn={isExpiringSoon(driver.licenseExpiry)}
               />
 
-              {/* ── Section: Driver Card ── */}
               <SectionHeading title="بطاقة السائق" />
               <DetailRow label="رقم البطاقة" value={driver.driverCardNumber ?? "—"} mono />
               <DetailRow
@@ -439,21 +415,18 @@ export function DriverDetailPanel({
               />
               <DetailRow 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.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.photoUrl}           label="صورة السائق" />
+                <PhotoCard url={driver.nationalPhotoUrl}   label="صورة الهوية" />
                 <PhotoCard url={driver.driverCardPhotoUrl} label="صورة البطاقة" />
               </div>
 
-              {/* ── Status History ── */}
               {driver.statusHistory && driver.statusHistory.length > 0 && (
                 <>
                   <SectionHeading title="سجل الحالات" />
@@ -474,9 +447,7 @@ export function DriverDetailPanel({
                           }}
                         >
                           <div>
-                            <span style={{ fontSize: 12, fontWeight: 600, color: s.color }}>
-                              {s.label}
-                            </span>
+                            <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}
@@ -493,7 +464,6 @@ export function DriverDetailPanel({
                 </>
               )}
 
-              {/* ── Report Panel ── */}
               <DriverReportPanel driverId={driver.id} />
             </>
           )}
@@ -511,44 +481,32 @@ export function DriverDetailPanel({
               flexShrink: 0,
             }}
           >
-            {/* Delete */}
             <button
               type="button"
               onClick={() => onDelete(driver)}
               style={{
-                height: 40,
-                padding: "0 1rem",
+                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)",
+                fontSize: 13, fontWeight: 700, color: "#DC2626",
+                cursor: "pointer", fontFamily: "var(--font-sans)",
               }}
             >
               حذف
             </button>
 
-            {/* Edit */}
             <button
               type="button"
               onClick={() => onEdit(driver)}
               style={{
-                height: 40,
-                padding: "0 1rem",
+                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,
+                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">
@@ -558,21 +516,16 @@ export function DriverDetailPanel({
               تعديل
             </button>
 
-            {/* Close */}
             <button
               type="button"
               onClick={onClose}
               style={{
-                flex: 1,
-                height: 40,
+                flex: 1, height: 40,
                 borderRadius: "var(--radius-md)",
                 border: "1px solid var(--color-border)",
                 background: "var(--color-surface)",
-                fontSize: 13,
-                fontWeight: 600,
-                color: "var(--color-text-secondary)",
-                cursor: "pointer",
-                fontFamily: "var(--font-sans)",
+                fontSize: 13, fontWeight: 600, color: "var(--color-text-secondary)",
+                cursor: "pointer", fontFamily: "var(--font-sans)",
               }}
             >
               إغلاق
@@ -582,4 +535,31 @@ export function DriverDetailPanel({
       </aside>
     </>
   );
+}
+
+// ── AvatarImg ─────────────────────────────────────────────────────────────────
+// Separate component so key={src} forces a full remount on photo change,
+// avoiding stale onError state from a previously failed load.
+
+function AvatarImg({ src, name }: { src: string; name: string }) {
+  const [error, setError] = useState(false);
+
+  if (error) {
+    return (
+      <span style={{ fontSize: 20, fontWeight: 700, color: "var(--color-brand-600)" }}>
+        {name.charAt(0)}
+      </span>
+    );
+  }
+
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      key={src}
+      src={src}
+      alt={name}
+      style={{ width: "100%", height: "100%", objectFit: "cover" }}
+      onError={() => setError(true)}
+    />
+  );
 }
\ No newline at end of file
diff --git a/Components/Driver/DriverFormModal.tsx b/src/Components/Driver/DriverFormModal.tsx
similarity index 95%
rename from Components/Driver/DriverFormModal.tsx
rename to src/Components/Driver/DriverFormModal.tsx
index 0003035..6d806c2 100644
--- a/Components/Driver/DriverFormModal.tsx
+++ b/src/Components/Driver/DriverFormModal.tsx
@@ -3,10 +3,10 @@
 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 { createDriverSchema, updateDriverSchema } from "@/validations/driver.validator";
-import type { DriverSchemaErrors } from "@/validations/driver.validator";
+import { get } from "@/src/services/api";
+import { getStoredToken } from "@/src/lib/auth";
+import { createDriverSchema, updateDriverSchema } from "@/src/validations/driver.validator";
+import type { DriverSchemaErrors } from "@/src/validations/driver.validator";
 import type {
   Driver,
   CreateDriverPayload,
@@ -14,8 +14,8 @@ import type {
   NationalIdType,
   DriverCardType,
   DriverStatus,
-} from "@/types/driver";
-import type { Branch } from "@/types/branch";
+} from "@/src/types/driver";
+import type { Branch } from "@/src/types/branch";
 
 // ── Shared input style ───────────────────────────────────────────────────────
 
@@ -217,6 +217,8 @@ export function DriverFormModal({
     if (address)          payload.address          = address;
     if (nationality)      payload.nationality      = nationality;
     if (nationalIdType)   payload.nationalIdType   = nationalIdType;
+    if (nationalId)       payload.nationalId       = nationalId;
+    if (nationalIdExpiry) payload.nationalIdExpiry = toIsoDateTime(nationalIdExpiry);
     if (gosiNumber)       payload.gosiNumber       = gosiNumber;
     if (licenseNumber)    payload.licenseNumber    = licenseNumber;
     if (licenseType)      payload.licenseType      = licenseType;
@@ -233,10 +235,22 @@ export function DriverFormModal({
 
     setSaving(true);
     setApiError("");
-    const ok = await onSubmit(payload as unknown as CreateDriverPayload, isNew);
-    setSaving(false);
-    if (ok) onClose();
-    else setApiError("حدث خطأ غير متوقع. يرجى المحاولة لاحقاً.");
+
+    try {
+      const ok = await onSubmit(payload as unknown as CreateDriverPayload, isNew);
+      if (ok) {
+        onClose();
+      } else {
+        // onSubmit returned false without throwing — show generic fallback
+        setApiError("حدث خطأ غير متوقع. يرجى المحاولة لاحقاً.");
+      }
+    } catch (err) {
+      // onSubmit threw — surface the real API error message
+      const message = err instanceof Error ? err.message : "حدث خطأ غير متوقع. يرجى المحاولة لاحقاً.";
+      setApiError(message);
+    } finally {
+      setSaving(false);
+    }
   };
 
   // ── File input helper ──────────────────────────────────────────────────────
@@ -436,7 +450,7 @@ export function DriverFormModal({
               {errors.nationalIdType && <span style={errorTextStyle}>{errors.nationalIdType}</span>}
             </label>
 
-            {/* National ID number — not in backend validator, display only */}
+            {/* National ID number */}
             <label style={labelStyle}>
               رقم الهوية
               <span style={optionalLabelStyle}>(اختياري)</span>
@@ -449,7 +463,7 @@ export function DriverFormModal({
               />
             </label>
 
-            {/* National ID expiry — not in backend validator, display only */}
+            {/* National ID expiry */}
             <label style={labelStyle}>
               انتهاء الهوية
               <span style={optionalLabelStyle}>(اختياري)</span>
diff --git a/src/Components/Driver/DriverPhotos.tsx b/src/Components/Driver/DriverPhotos.tsx
new file mode 100644
index 0000000..51384c0
--- /dev/null
+++ b/src/Components/Driver/DriverPhotos.tsx
@@ -0,0 +1,84 @@
+import { useEffect, useState } from "react";
+
+export function PhotoCard({
+  url,
+  label,
+}: {
+  url?: string | null;
+  label: string;
+}) {
+  const [imgError, setImgError] = useState(false);
+
+  // Reset error state when url changes so updated images get a fresh load attempt
+  useEffect(() => {
+    setImgError(false);
+  }, [url]);
+
+  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 ? (
+          // key={url} forces a full remount whenever the URL changes,
+          // clearing any stale error state from a previous failed load.
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            key={url}
+            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>
+  );
+}
\ No newline at end of file
diff --git a/src/Components/Driver/index.ts b/src/Components/Driver/index.ts
new file mode 100644
index 0000000..6c63570
--- /dev/null
+++ b/src/Components/Driver/index.ts
@@ -0,0 +1,4 @@
+export { DriverFormModal } from "./DriverFormModal";
+export { DriverDeleteModal } from "./DriverDeleteModal";
+export { DriverDetailPanel } from "./DriverDetailPanel";
+export { PhotoCard } from "./DriverPhotos";
\ No newline at end of file
diff --git a/Components/Driver_Report/driverReport.tsx b/src/Components/Driver_Report/driverReport.tsx
similarity index 97%
rename from Components/Driver_Report/driverReport.tsx
rename to src/Components/Driver_Report/driverReport.tsx
index e08a5e5..c131dd8 100644
--- a/Components/Driver_Report/driverReport.tsx
+++ b/src/Components/Driver_Report/driverReport.tsx
@@ -2,8 +2,8 @@
 
 import { useState } from "react";
 import { Spinner } from "../UI";
-import { driverService } from "../../services/driver.service";
-import { getStoredToken } from "../../lib/auth";
+import { driverService } from "@/src/services/driver.service";
+import { getStoredToken } from "@/src/lib/auth";
 
 // ── Props ─────────────────────────────────────────────────────────────────────
 
diff --git a/Components/Home/home.tsx b/src/Components/Home/home.tsx
similarity index 100%
rename from Components/Home/home.tsx
rename to src/Components/Home/home.tsx
diff --git a/Components/Order/order.tsx b/src/Components/Order/order.tsx
similarity index 95%
rename from Components/Order/order.tsx
rename to src/Components/Order/order.tsx
index e48a848..ee556ab 100644
--- a/Components/Order/order.tsx
+++ b/src/Components/Order/order.tsx
@@ -1,11 +1,11 @@
 "use client";
 import React, { type FC } from "react";
-import { useClientOrders }             from "@/hooks/useClientOrders";
-import { fmtDate, fmtAmount }          from "@/lib/formatters";
-import { statusColor, statusLabel }    from "@/lib/order-status";
-import { clearSession, type ClientSession } from "@/lib/session";
-import type { OrderStatus }            from "@/types/client";
-import { Spinner }                     from "../../Components/UI";
+import { useClientOrders }             from "@/src/hooks/useClientOrders";
+import { fmtDate, fmtAmount }          from "@/src/lib/formatters";
+import { statusColor, statusLabel }    from "@/src/lib/order-status";
+import { clearSession, type ClientSession } from "@/src/lib/session";
+import type { OrderStatus }            from "@/src/types/order";
+import { Spinner }                     from "../UI";
 
 // ─── Order status tracker ─────────────────────
 const STATUS_STEPS: OrderStatus[] = ["CREATED", "IN_TRANSIT", "DELIVERED"];
diff --git a/Components/Trip/Tripdeletemodal.tsx b/src/Components/Trip/Tripdeletemodal.tsx
similarity index 98%
rename from Components/Trip/Tripdeletemodal.tsx
rename to src/Components/Trip/Tripdeletemodal.tsx
index d83f6bb..193a5e9 100644
--- a/Components/Trip/Tripdeletemodal.tsx
+++ b/src/Components/Trip/Tripdeletemodal.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect } from "react";
 import { Spinner } from "../UI";
-import type { Trip } from "../../types/trip";
+import type { Trip } from "@/src/types/trip";
 
 interface TripDeleteModalProps {
   trip: Trip;
diff --git a/src/Components/Trip/Tripformmodal.tsx b/src/Components/Trip/Tripformmodal.tsx
new file mode 100644
index 0000000..ae27820
--- /dev/null
+++ b/src/Components/Trip/Tripformmodal.tsx
@@ -0,0 +1,732 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import * as yup from "yup";
+import { Spinner } from "../UI";
+import { get } from "@/src/services/api";
+import { getStoredToken } from "@/src/lib/auth";
+import {
+  createTripSchema,
+  updateTripSchema,
+} from "@/src/validations/trip.validator";
+import type { TripSchemaErrors } from "@/src/validations/trip.validator";
+import type {
+  Trip,
+  TripStatus,
+  CreateTripPayload,
+  UpdateTripPayload,
+} from "@/src/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();
+    get<{ data: { data: DriverOption[] } }>(
+      "driver?limit=100&status=Active",
+      token,
+    )
+      .then((res) =>
+        setDrivers(
+          (res as unknown as { data: { data: DriverOption[] } }).data?.data ??
+            [],
+        ),
+      )
+      .catch(() => {});
+    get<{ data: { data: CarOption[] } }>("cars?limit=100&status=Active", token)
+      .then((res) =>
+        setCars(
+          (res as unknown as { data: { data: CarOption[] } }).data?.data ?? [],
+        ),
+      )
+      .catch(() => {});
+    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 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 } : {}),
+    };
+
+    // ── Client-side validation ────────────────────────────────────────────
+    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;
+    }
+
+    // ── Call parent handler (notification emitted by the hook) ────────────
+    setSaving(true);
+    try {
+      const ok = await onSubmit(
+        raw as CreateTripPayload | UpdateTripPayload,
+        isNew,
+      );
+      if (ok) onClose();
+      // on failure the hook already fired an error notification — nothing extra needed here
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  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",
+          }}
+        >
+          {/* ── 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={{ color: "var(--color-danger)" }}>*</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>
+  );
+}
diff --git a/src/Components/Trip/index.ts b/src/Components/Trip/index.ts
new file mode 100644
index 0000000..3bbfed2
--- /dev/null
+++ b/src/Components/Trip/index.ts
@@ -0,0 +1,2 @@
+export { TripFormModal } from "./Tripformmodal";
+export { TripDeleteModal } from "./Tripdeletemodal";
\ No newline at end of file
diff --git a/src/Components/Trip_Report/Tripreportpanel.tsx b/src/Components/Trip_Report/Tripreportpanel.tsx
new file mode 100644
index 0000000..8f4bc0e
--- /dev/null
+++ b/src/Components/Trip_Report/Tripreportpanel.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { Spinner } from "../UI";
+import { Toast } from "../UI/Toast";
+import { tripService } from "@/src/services/trip.service";
+import { getStoredToken } from "@/src/lib/auth";
+import type { TripNotification } from "@/src/hooks/useTrip";
+
+interface TripReportPanelProps {
+  tripId: string;
+}
+
+// Extracts a readable message from any error shape the API might return.
+function extractApiMessage(err: unknown, fallback: string): string {
+  if (err && typeof err === "object") {
+    const e = err as Record<string, unknown>;
+    const rd = (e["response"] as Record<string, unknown> | undefined)?.["data"];
+    if (rd && typeof rd === "object") {
+      const msg = (rd as Record<string, unknown>)["message"];
+      if (typeof msg === "string" && msg.trim()) return msg;
+    }
+    if (typeof e["message"] === "string" && e["message"].trim()) return e["message"];
+  }
+  return fallback;
+}
+
+export function TripReportPanel({ tripId }: TripReportPanelProps) {
+  const [loading, setLoading]           = useState(false);
+  const [notification, setNotification] = useState<TripNotification | null>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const notify = (n: TripNotification) => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setNotification(n);
+    timerRef.current = setTimeout(() => setNotification(null), 4000);
+  };
+
+  const handleGenerate = async () => {
+    setLoading(true);
+    try {
+      const token = getStoredToken();
+      const res   = await tripService.getReport(tripId, token);
+      const url   = (res as unknown as { data: { reportUrl: string } }).data?.reportUrl;
+
+      if (!url) {
+        notify({ type: "error", message: "لم يتم إرجاع رابط التقرير من الخادم." });
+        return;
+      }
+
+      window.open(url, "_blank", "noopener,noreferrer");
+      notify({ type: "success", message: "تم إنشاء التقرير بنجاح." });
+    } catch (err) {
+      notify({ type: "error", message: extractApiMessage(err, "تعذّر إنشاء التقرير.") });
+    } 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>
+      </div>
+
+      {/* Toast scoped to this panel — sits at the bottom of the screen */}
+      <Toast
+        notification={notification}
+        onDismiss={() => {
+          if (timerRef.current) clearTimeout(timerRef.current);
+          setNotification(null);
+        }}
+      />
+    </>
+  );
+}
\ No newline at end of file
diff --git a/Components/UI/Alert.tsx b/src/Components/UI/Alert.tsx
similarity index 98%
rename from Components/UI/Alert.tsx
rename to src/Components/UI/Alert.tsx
index 0d7d663..2974fdb 100644
--- a/Components/UI/Alert.tsx
+++ b/src/Components/UI/Alert.tsx
@@ -1,6 +1,6 @@
 // Typed, accessible alert banner with optional dismiss button.
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/src/lib/utils";
 
 export type AlertType = "error" | "info" | "success" | "warning";
 
diff --git a/Components/UI/Badge.tsx b/src/Components/UI/Badge.tsx
similarity index 100%
rename from Components/UI/Badge.tsx
rename to src/Components/UI/Badge.tsx
diff --git a/Components/UI/Button.tsx b/src/Components/UI/Button.tsx
similarity index 98%
rename from Components/UI/Button.tsx
rename to src/Components/UI/Button.tsx
index 560aa75..b4dcf64 100644
--- a/Components/UI/Button.tsx
+++ b/src/Components/UI/Button.tsx
@@ -1,6 +1,6 @@
 // Design-system button with variant, size, and loading state support.
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/src/lib/utils";
 import { Spinner } from "./Spinner";
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
diff --git a/Components/UI/ConfirmDialog.tsx b/src/Components/UI/ConfirmDialog.tsx
similarity index 70%
rename from Components/UI/ConfirmDialog.tsx
rename to src/Components/UI/ConfirmDialog.tsx
index d516a8f..784dc12 100644
--- a/Components/UI/ConfirmDialog.tsx
+++ b/src/Components/UI/ConfirmDialog.tsx
@@ -6,30 +6,36 @@ interface ConfirmDialogProps {
   title: string;
   description: string;
   confirmLabel?: string;
+  cancelLabel?: string;
   onConfirm: () => void;
   onCancel: () => void;
   loading?: boolean;
+  /** Subtitle shown in modal header */
+  subtitle?: string;
 }
 
 export function ConfirmDialog({
   open,
   title,
   description,
-  confirmLabel = "Delete",
+  confirmLabel = "تأكيد",
+  cancelLabel  = "إلغاء",
   onConfirm,
   onCancel,
   loading = false,
+  subtitle,
 }: ConfirmDialogProps) {
   return (
     <Modal
       open={open}
       title={title}
+      subtitle={subtitle}
       onClose={onCancel}
       size="sm"
       footer={
         <>
           <Button variant="secondary" onClick={onCancel} disabled={loading}>
-            Cancel
+            {cancelLabel}
           </Button>
           <Button variant="danger" onClick={onConfirm} loading={loading}>
             {confirmLabel}
@@ -37,7 +43,9 @@ export function ConfirmDialog({
         </>
       }
     >
-      <p className="text-sm text-slate-600">{description}</p>
+      <p className="text-[13px] text-[var(--color-text-muted)] leading-relaxed">
+        {description}
+      </p>
     </Modal>
   );
 }
\ No newline at end of file
diff --git a/Components/UI/EmptyState.tsx b/src/Components/UI/EmptyState.tsx
similarity index 100%
rename from Components/UI/EmptyState.tsx
rename to src/Components/UI/EmptyState.tsx
diff --git a/Components/UI/Input.tsx b/src/Components/UI/Input.tsx
similarity index 98%
rename from Components/UI/Input.tsx
rename to src/Components/UI/Input.tsx
index 89b011a..57ca354 100644
--- a/Components/UI/Input.tsx
+++ b/src/Components/UI/Input.tsx
@@ -1,6 +1,6 @@
 // Accessible labelled input with error and hint state.
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/src/lib/utils";
 
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   /** Visible label text — also used to derive the `htmlFor` id */
diff --git a/src/Components/UI/ModalProps.tsx b/src/Components/UI/ModalProps.tsx
new file mode 100644
index 0000000..14ae2cc
--- /dev/null
+++ b/src/Components/UI/ModalProps.tsx
@@ -0,0 +1,130 @@
+import { useEffect } from "react";
+import { cn } from "@/src/lib/utils";
+
+interface ModalProps {
+  open: boolean;
+  title: string;
+  onClose: () => void;
+  children: React.ReactNode;
+  /** Footer slot – typically action buttons */
+  footer?: React.ReactNode;
+  size?: "sm" | "md" | "lg";
+  /** Subtitle or badge shown below the title */
+  subtitle?: string;
+}
+
+const MODAL_SIZES: Record<NonNullable<ModalProps["size"]>, string> = {
+  sm: "max-w-sm",
+  md: "max-w-lg",
+  lg: "max-w-2xl",
+};
+
+export function Modal({
+  open,
+  title,
+  onClose,
+  children,
+  footer,
+  size = "md",
+  subtitle,
+}: ModalProps) {
+  // Escape key to close
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-[var(--color-slate-900)]/50 backdrop-blur-sm"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+
+      {/* Panel */}
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-title"
+        className={cn(
+          "relative w-full flex flex-col max-h-[90vh]",
+          "bg-[var(--color-surface)]",
+          "rounded-[var(--radius-2xl)]",
+          "border border-[var(--color-border)]",
+          "shadow-[var(--shadow-overlay)]",
+          MODAL_SIZES[size],
+        )}
+      >
+        {/* Header */}
+        <div
+          className={cn(
+            "flex items-center justify-between",
+            "px-6 py-4",
+            "border-b border-[var(--color-border)]",
+            "bg-[var(--color-surface-muted)]",
+            "rounded-t-[var(--radius-2xl)]",
+          )}
+        >
+          <div>
+            {subtitle && (
+              <p className="text-[11px] font-semibold tracking-[0.3em] uppercase text-[var(--color-brand-600)] mb-1">
+                {subtitle}
+              </p>
+            )}
+            <h2
+              id="modal-title"
+              className="text-[17px] font-bold text-[var(--color-text-primary)]"
+            >
+              {title}
+            </h2>
+          </div>
+
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="إغلاق"
+            className={cn(
+              "w-[34px] h-[34px] flex items-center justify-center",
+              "rounded-[var(--radius-md)]",
+              "border border-[var(--color-border)]",
+              "bg-[var(--color-surface)]",
+              "text-[18px] text-[var(--color-text-muted)]",
+              "hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-sunken)]",
+              "transition-colors cursor-pointer",
+            )}
+          >
+            ×
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="flex-1 overflow-y-auto px-6 py-5">
+          {children}
+        </div>
+
+        {/* Footer */}
+        {footer && (
+          <div
+            className={cn(
+              "flex justify-end gap-2",
+              "px-6 py-4",
+              "border-t border-[var(--color-border)]",
+              "bg-[var(--color-surface-muted)]",
+              "rounded-b-[var(--radius-2xl)]",
+            )}
+          >
+            {footer}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/Components/UI/PageHeader.tsx b/src/Components/UI/PageHeader.tsx
new file mode 100644
index 0000000..e58db9b
--- /dev/null
+++ b/src/Components/UI/PageHeader.tsx
@@ -0,0 +1,60 @@
+import { cn } from "@/src/lib/utils";
+
+interface PageHeaderProps {
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+  backHref?: string;
+  backLabel?: string;
+  className?: string;
+}
+
+export function PageHeader({
+  title,
+  description,
+  action,
+  backHref,
+  backLabel,
+  className,
+}: PageHeaderProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between",
+        "rounded-[var(--radius-xl)] border border-[var(--color-border)]",
+        "bg-[var(--color-surface)] shadow-[var(--shadow-card)]",
+        "px-8 py-6",
+        className,
+      )}
+    >
+      <div>
+        {backHref && (
+          <a
+            href={backHref}
+            className={cn(
+              "mb-2 inline-flex items-center gap-1",
+              "text-[12px] font-semibold text-[var(--color-brand-600)]",
+              "hover:text-[var(--color-brand-700)] transition-colors",
+            )}
+          >
+            ← {backLabel ?? "رجوع"}
+          </a>
+        )}
+        <h1 className="text-2xl font-bold tracking-tight text-[var(--color-text-primary)]">
+          {title}
+        </h1>
+        {description && (
+          <p className="mt-1 text-[13px] text-[var(--color-text-muted)]">
+            {description}
+          </p>
+        )}
+      </div>
+
+      {action && (
+        <div className="mt-3 sm:mt-0 shrink-0">
+          {action}
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/Components/UI/Select.tsx b/src/Components/UI/Select.tsx
new file mode 100644
index 0000000..39fc6e0
--- /dev/null
+++ b/src/Components/UI/Select.tsx
@@ -0,0 +1,54 @@
+import React, { forwardRef, SelectHTMLAttributes } from "react";
+import { cn } from "@/src/lib/utils";
+
+// ─── Select ──────────────────────────────────────────────────────────────────
+
+interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  label?: string;
+  error?: string;
+  wrapperClassName?: string;
+  children: React.ReactNode;
+}
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
+  { label, error, wrapperClassName = "", className = "", id, children, ...rest },
+  ref
+) {
+  const selectId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
+
+  return (
+    <div className={cn("flex flex-col gap-1", wrapperClassName)}>
+      {label && (
+        <label
+          htmlFor={selectId}
+          className="text-[12px] font-semibold text-[var(--color-text-muted)] uppercase tracking-wide"
+        >
+          {label}
+        </label>
+      )}
+      <select
+        ref={ref}
+        id={selectId}
+        className={cn(
+          "w-full h-10 rounded-[var(--radius-md)] border px-3 text-[13px]",
+          "bg-[var(--color-surface)] text-[var(--color-text-primary)]",
+          "transition-[border-color,box-shadow]",
+          "focus:outline-none focus:border-[var(--color-brand-600)] focus:ring-2 focus:ring-[var(--color-brand-600)]/15",
+          "disabled:bg-[var(--color-surface-muted)] disabled:text-[var(--color-text-hint)] disabled:cursor-not-allowed",
+          error
+            ? "border-[var(--color-danger)] bg-[var(--color-danger-light)]"
+            : "border-[var(--color-border)]",
+          className,
+        )}
+        {...rest}
+      >
+        {children}
+      </select>
+      {error && (
+        <p className="text-[11px] font-medium text-[var(--color-danger)]">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+});
\ No newline at end of file
diff --git a/Components/UI/Spinner.tsx b/src/Components/UI/Spinner.tsx
similarity index 98%
rename from Components/UI/Spinner.tsx
rename to src/Components/UI/Spinner.tsx
index 444f52e..97bd3d8 100644
--- a/Components/UI/Spinner.tsx
+++ b/src/Components/UI/Spinner.tsx
@@ -1,4 +1,4 @@
-import { cn } from "../../lib/utils";
+import { cn } from "@/src/lib/utils";
 
 export interface SpinnerProps {
   /** Visual size of the spinner */
diff --git a/src/Components/UI/Textarea.tsx b/src/Components/UI/Textarea.tsx
new file mode 100644
index 0000000..e60ad3f
--- /dev/null
+++ b/src/Components/UI/Textarea.tsx
@@ -0,0 +1,64 @@
+import { forwardRef } from "react";
+import { cn } from "@/src/lib/utils";
+
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  error?: string;
+  hint?: string;
+  wrapperClassName?: string;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
+  { label, error, hint, wrapperClassName = "", className = "", id, ...rest },
+  ref
+) {
+  const taId    = id ?? label?.toLowerCase().replace(/\s+/g, "-");
+  const errorId = taId ? `${taId}-error` : undefined;
+  const hintId  = taId ? `${taId}-hint`  : undefined;
+
+  return (
+    <div className={cn("flex flex-col gap-1", wrapperClassName)}>
+      {label && (
+        <label
+          htmlFor={taId}
+          className="text-[12px] font-semibold text-[var(--color-text-muted)] uppercase tracking-wide"
+        >
+          {label}
+        </label>
+      )}
+
+      <textarea
+        ref={ref}
+        id={taId}
+        rows={3}
+        aria-invalid={!!error}
+        aria-describedby={error ? errorId : hint ? hintId : undefined}
+        className={cn(
+          "w-full rounded-[var(--radius-md)] border px-3 py-2 text-[13px] resize-none",
+          "bg-[var(--color-surface)] text-[var(--color-text-primary)]",
+          "placeholder:text-[var(--color-text-hint)]",
+          "transition-[border-color,box-shadow]",
+          "focus:outline-none focus:border-[var(--color-brand-600)] focus:ring-2 focus:ring-[var(--color-brand-600)]/15",
+          "disabled:bg-[var(--color-surface-muted)] disabled:text-[var(--color-text-hint)]",
+          error
+            ? "border-[var(--color-danger)] bg-[var(--color-danger-light)]"
+            : "border-[var(--color-border)]",
+          className,
+        )}
+        {...rest}
+      />
+
+      {error && (
+        <p id={errorId} role="alert" className="text-[11px] font-medium text-[var(--color-danger)]">
+          {error}
+        </p>
+      )}
+
+      {hint && !error && (
+        <p id={hintId} className="text-[11px] text-[var(--color-text-hint)]">
+          {hint}
+        </p>
+      )}
+    </div>
+  );
+});
\ No newline at end of file
diff --git a/src/Components/UI/Toast.tsx b/src/Components/UI/Toast.tsx
new file mode 100644
index 0000000..3262944
--- /dev/null
+++ b/src/Components/UI/Toast.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+export interface ToastNotification {
+  type: "success" | "error";
+  message: string;
+}
+
+interface ToastProps {
+  notification: ToastNotification | null;
+  onDismiss?: () => void;
+}
+
+export function Toast({ notification, onDismiss }: ToastProps) {
+  // `visible` drives the mount/unmount; stays true for 300 ms after
+  // `notification` clears so the CSS exit transition has time to finish.
+  const [visible, setVisible] = useState(false);
+  const exitTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (notification) {
+      if (exitTimer.current) clearTimeout(exitTimer.current);
+      setVisible(true);
+    } else {
+      exitTimer.current = setTimeout(() => setVisible(false), 300);
+    }
+    return () => { if (exitTimer.current) clearTimeout(exitTimer.current); };
+  }, [notification]);
+
+  if (!visible && !notification) return null;
+
+  const isSuccess = notification?.type === "success";
+  const isShowing = !!notification;
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      aria-atomic="true"
+      style={{
+        position: "fixed",
+        bottom: 24,
+        left: "50%",
+        transform: `translateX(-50%) translateY(${isShowing ? "0" : "16px"})`,
+        zIndex: 9999,
+        transition: "transform 250ms ease, opacity 250ms ease",
+        opacity: isShowing ? 1 : 0,
+        pointerEvents: isShowing ? "auto" : "none",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 10,
+          padding: "0.75rem 1rem 0.75rem 1.25rem",
+          borderRadius: "var(--radius-full)",
+          background: isSuccess ? "#065F46" : "#7F1D1D",
+          color: "#FFFFFF",
+          fontSize: 13,
+          fontWeight: 600,
+          boxShadow: "0 8px 32px rgba(0,0,0,0.25)",
+          maxWidth: "90vw",
+          fontFamily: "var(--font-sans)",
+        }}
+      >
+        <span style={{ fontSize: 16, flexShrink: 0 }}>
+          {isSuccess ? "✓" : "⚠"}
+        </span>
+
+        <span style={{ whiteSpace: "pre-wrap", wordBreak: "break-word" }}>
+          {notification?.message}
+        </span>
+
+        {/* Dismiss button — only renders when a handler is provided */}
+        {onDismiss && (
+          <button
+            type="button"
+            onClick={onDismiss}
+            aria-label="إغلاق الإشعار"
+            style={{
+              marginLeft: 4,
+              flexShrink: 0,
+              background: "none",
+              border: "none",
+              color: "rgba(255,255,255,0.7)",
+              cursor: "pointer",
+              fontSize: 18,
+              lineHeight: 1,
+              padding: "0 2px",
+              fontFamily: "var(--font-sans)",
+            }}
+          >
+            ×
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/Components/UI/index.ts b/src/Components/UI/index.ts
similarity index 59%
rename from Components/UI/index.ts
rename to src/Components/UI/index.ts
index 5c4884f..1421a94 100644
--- a/Components/UI/index.ts
+++ b/src/Components/UI/index.ts
@@ -1,4 +1,3 @@
-// components/ui/index.ts
 export { Spinner, PageLoader, InlineLoader } from "./Spinner";
 export type { SpinnerProps } from "./Spinner";
 
@@ -14,3 +13,12 @@ export type { InputProps } from "./Input";
 export { Textarea } from "./Textarea";
 
 export { Select } from "./Select";
+
+export { Toast } from "./Toast";
+export type { ToastNotification } from "./Toast";
+
+export { Modal } from "./ModalProps";
+export { ConfirmDialog } from "./ConfirmDialog";
+export { PageHeader } from "./PageHeader";
+export { EmptyState } from "./EmptyState";
+export { Badge } from "./Badge";
\ No newline at end of file
diff --git a/Components/User/DeleteConfirmModal.tsx b/src/Components/User/DeleteConfirmModal.tsx
similarity index 98%
rename from Components/User/DeleteConfirmModal.tsx
rename to src/Components/User/DeleteConfirmModal.tsx
index ff2a37a..4481bfa 100644
--- a/Components/User/DeleteConfirmModal.tsx
+++ b/src/Components/User/DeleteConfirmModal.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect } from "react";
 import { Spinner } from "../UI";
-import type { User } from "../../types/user";
+import type { User } from "@/src/types/user";
 
 interface DeleteConfirmModalProps {
   user:      User;
diff --git a/Components/User/Toast.tsx b/src/Components/User/Toast.tsx
similarity index 96%
rename from Components/User/Toast.tsx
rename to src/Components/User/Toast.tsx
index 5ff4e06..43bc0fc 100644
--- a/Components/User/Toast.tsx
+++ b/src/Components/User/Toast.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import type { Notification } from "../../hooks/useUser";
+import type { Notification } from "@/src/hooks/useUser";
 
 interface ToastProps {
   notification: Notification | null;
diff --git a/Components/User/UserDetailModal.tsx b/src/Components/User/UserDetailModal.tsx
similarity index 98%
rename from Components/User/UserDetailModal.tsx
rename to src/Components/User/UserDetailModal.tsx
index b832c1b..3bee682 100644
--- a/Components/User/UserDetailModal.tsx
+++ b/src/Components/User/UserDetailModal.tsx
@@ -2,9 +2,9 @@
 
 import { useEffect, useState } from "react";
 import { Spinner } from "../UI";
-import { getStoredToken } from "../../lib/auth";
-import { userService } from "../../services/user.service";
-import type { UserDetail } from "../../types/user";
+import { getStoredToken } from "@/src/lib/auth";
+import { userService } from "@/src/services/user.service";
+import type { UserDetail } from "@/src/types/user";
 
 interface UserDetailModalProps {
   userId:  string;
diff --git a/Components/User/UserFormModal.tsx b/src/Components/User/UserFormModal.tsx
similarity index 97%
rename from Components/User/UserFormModal.tsx
rename to src/Components/User/UserFormModal.tsx
index 7ae4717..99dda2b 100644
--- a/Components/User/UserFormModal.tsx
+++ b/src/Components/User/UserFormModal.tsx
@@ -3,10 +3,10 @@
 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";
+import { createUserSchema, updateUserSchema } from "@/src/validations/user.validator";
+import type { Branch } from "@/src/types/branch";
+import type { Role } from "@/src/types/role";
+import type { FormErrors, User, UserFormData } from "@/src/types/user";
 
 // ── fixed styles ─────────────────────────────────────────
 const S = {
diff --git a/Components/User/UserTable.tsx b/src/Components/User/UserTable.tsx
similarity index 99%
rename from Components/User/UserTable.tsx
rename to src/Components/User/UserTable.tsx
index c24e425..073b82b 100644
--- a/Components/User/UserTable.tsx
+++ b/src/Components/User/UserTable.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Spinner } from "../UI";
-import type { User } from "../../types/user";
+import type { User } from "@/src/types/user";
 
 // ── role badge ───────────────────────────────────────────────────────────────
 function RoleBadge({ name }: { name?: string }) {
diff --git a/src/Components/User/index.ts b/src/Components/User/index.ts
new file mode 100644
index 0000000..a7c1694
--- /dev/null
+++ b/src/Components/User/index.ts
@@ -0,0 +1,5 @@
+export { UserTable } from "./UserTable";
+export { UserFormModal } from "./UserFormModal";
+export { UserDetailModal } from "./UserDetailModal";
+export { DeleteConfirmModal } from "./DeleteConfirmModal";
+export { Toast } from "./Toast";
\ No newline at end of file
diff --git a/Components/car/CarDeleteModal.tsx b/src/Components/car/CarDeleteModal.tsx
similarity index 96%
rename from Components/car/CarDeleteModal.tsx
rename to src/Components/car/CarDeleteModal.tsx
index 3bcb603..8f7e475 100644
--- a/Components/car/CarDeleteModal.tsx
+++ b/src/Components/car/CarDeleteModal.tsx
@@ -1,10 +1,9 @@
 "use client";
-// Components/Car/CarDeleteModal.tsx
-// Confirmation dialog before soft-deleting a car.
+
 
 import { useEffect } from "react";
 import { Spinner } from "../UI";
-import type { Car } from "../../types/car";
+import type { Car } from "@/src/types/car";
 
 interface CarDeleteModalProps {
   car: Car;
diff --git a/Components/car/CarDetailPanel.tsx b/src/Components/car/CarDetailPanel.tsx
similarity index 97%
rename from Components/car/CarDetailPanel.tsx
rename to src/Components/car/CarDetailPanel.tsx
index 18af434..23516ae 100644
--- a/Components/car/CarDetailPanel.tsx
+++ b/src/Components/car/CarDetailPanel.tsx
@@ -1,13 +1,11 @@
 "use client";
-// Components/Car/CarDetailPanel.tsx
-// Slide-in panel showing full car details with action buttons.
 
 import { useEffect, useState } from "react";
 import { Spinner } from "../UI";
 import { CarImageGallery } from "./CarImageGallery";
-import { useCarDetail } from "../../hooks/useCars";
-import { STATUS_MAP, INS_MAP, fmtDate, isExpiringSoon } from "../../types/car";
-import type { Car, InsuranceStatus } from "../../types/car";
+import { useCarDetail } from "@/src/hooks/useCars";
+import { STATUS_MAP, INS_MAP, fmtDate, isExpiringSoon } from "@/src/types/car";
+import type { Car, InsuranceStatus } from "@/src/types/car";
 
 // ── Props ─────────────────────────────────────────────────────────────────────
 
diff --git a/Components/car/CarFormModal.tsx b/src/Components/car/CarFormModal.tsx
similarity index 98%
rename from Components/car/CarFormModal.tsx
rename to src/Components/car/CarFormModal.tsx
index 90ab689..7ae4ea2 100644
--- a/Components/car/CarFormModal.tsx
+++ b/src/Components/car/CarFormModal.tsx
@@ -1,20 +1,19 @@
 "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 { get } from "@/src/services/api";
+import { getStoredToken } from "@/src/lib/auth";
+import { createCarSchema, updateCarSchema } from "@/src/validations/car.validator";
 import type {
   Car,
   CarFormErrors,
   CreateCarPayload,
   InsuranceStatus,
   UpdateCarPayload,
-} from "../../types/car";
-import type { Branch } from "../../types/branch";
+} from "@/src/types/car";
+import type { Branch } from "@/src/types/branch";
 
 // ── Shared input style ────────────────────────────────────────────────────────
 
diff --git a/Components/car/CarImageGallery.tsx b/src/Components/car/CarImageGallery.tsx
similarity index 98%
rename from Components/car/CarImageGallery.tsx
rename to src/Components/car/CarImageGallery.tsx
index 1e0369d..ba77e3c 100644
--- a/Components/car/CarImageGallery.tsx
+++ b/src/Components/car/CarImageGallery.tsx
@@ -4,9 +4,9 @@
 
 import { useRef, useState } from "react";
 import { Spinner } from "../UI";
-import { useCarImages } from "../../hooks/useCars";
-import { STAGE_MAP } from "../../types/car";
-import type { Car, CarImage, ImageStage } from "../../types/car";
+import { useCarImages } from "@/src/hooks/useCars";
+import { STAGE_MAP } from "@/src/types/car";
+import type { Car, CarImage, ImageStage } from "@/src/types/car";
 
 // ── Props ─────────────────────────────────────────────────────────────────────
 
diff --git a/src/Components/car/index.ts b/src/Components/car/index.ts
new file mode 100644
index 0000000..75428a3
--- /dev/null
+++ b/src/Components/car/index.ts
@@ -0,0 +1,4 @@
+export { CarFormModal } from "./CarFormModal";
+export { CarDetailPanel } from "./CarDetailPanel";
+export { CarDeleteModal } from "./CarDeleteModal";
+export { CarImageGallery } from "./CarImageGallery";
\ No newline at end of file
diff --git a/src/Components/role/DeleteRoleModal.tsx b/src/Components/role/DeleteRoleModal.tsx
new file mode 100644
index 0000000..e85d1b8
--- /dev/null
+++ b/src/Components/role/DeleteRoleModal.tsx
@@ -0,0 +1,130 @@
+"use client";
+// Components/Role/DeleteRoleModal.tsx
+// Confirm deletion of a role — mirrors DeleteConfirmModal from Users.
+
+import { useEffect } from "react";
+import { Spinner } from "../UI";
+import type { Role } from "../../../services/role.service";
+
+interface DeleteRoleModalProps {
+  role:      Role;
+  deleting:  boolean;
+  onCancel:  () => void;
+  onConfirm: () => void;
+}
+
+export function DeleteRoleModal({ role, deleting, onCancel, onConfirm }: DeleteRoleModalProps) {
+  useEffect(() => {
+    const h = (e: KeyboardEvent) => { if (e.key === "Escape") onCancel(); };
+    window.addEventListener("keydown", h);
+    return () => window.removeEventListener("keydown", h);
+  }, [onCancel]);
+
+  const permCount = role.permissions?.length ?? 0;
+
+  return (
+    <div
+      role="alertdialog"
+      aria-modal="true"
+      aria-labelledby="del-role-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">
+            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+            <line x1="12" y1="8" x2="12" y2="12"/>
+            <line x1="12" y1="16" x2="12.01" y2="16"/>
+          </svg>
+        </div>
+
+        <div>
+          <h2 id="del-role-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)" }}>{role.name}</strong>؟
+          </p>
+          {permCount > 0 && (
+            <p style={{
+              marginTop: 8, fontSize: 12,
+              background: "#FEF3C7", color: "#92400E",
+              border: "1px solid #FDE68A",
+              borderRadius: "var(--radius-md)",
+              padding: "0.5rem 0.75rem",
+            }}>
+              ⚠ يحتوي هذا الدور على {permCount} صلاحية مرتبطة، سيتم إلغاء ارتباطها تلقائياً.
+            </p>
+          )}
+          <p style={{ marginTop: 6, fontSize: 12, color: "#DC2626" }}>
+            لا يمكن التراجع عن هذا الإجراء.
+          </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>
+  );
+}
\ No newline at end of file
diff --git a/src/Components/role/RoleDetailModal.tsx b/src/Components/role/RoleDetailModal.tsx
new file mode 100644
index 0000000..bf422f2
--- /dev/null
+++ b/src/Components/role/RoleDetailModal.tsx
@@ -0,0 +1,375 @@
+"use client";
+
+import { useState } from "react";
+import { Alert, Spinner } from "../UI";
+import type { Role, Permission } from "../../../services/role.service";
+
+const MODULE_LABELS: Record<string, string> = {
+  Role: "الأدوار",
+  User: "المستخدمون",
+  Branch: "الفروع",
+  Car: "المركبات",
+  CarImage: "صور المركبات",
+  Driver: "السائقون",
+  Order: "الطلبات",
+  Trip: "الرحلات",
+  Client: "العملاء",
+  Permission: "الصلاحيات",
+  Audit: "سجل التدقيق",
+  Dashboard: "لوحة التحكم",
+  Maintenance: "الصيانة",
+};
+const moduleLabel = (mod: string) => MODULE_LABELS[mod] ?? mod;
+
+function groupByModule(
+  permissions: Permission[],
+): Record<string, Permission[]> {
+  return permissions.reduce<Record<string, Permission[]>>((acc, p) => {
+    (acc[p.module || "أخرى"] ??= []).push(p);
+    return acc;
+  }, {});
+}
+
+interface RoleDetailModalProps {
+  role: Role;
+  allPermissions: Permission[];
+  onClose: () => void;
+  onSave: (roleId: string, permissionIds: string[]) => Promise<boolean>;
+}
+
+export function RoleDetailModal({
+  role,
+  allPermissions,
+  onClose,
+  onSave,
+}: RoleDetailModalProps) {
+  const currentIds = role.permissions?.map((rp) => rp.permission.id) ?? [];
+  const [selected, setSelected] = useState<Set<string>>(new Set(currentIds));
+  const [saving, setSaving] = useState(false);
+  const [apiError, setApiError] = useState("");
+  const [saved, setSaved] = useState(false);
+
+  const grouped = groupByModule(allPermissions);
+  const activeSet = new Set(currentIds);
+
+  const toggle = (id: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+    setSaved(false);
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    setApiError("");
+    const ok = await onSave(role.id, [...selected]);
+    setSaving(false);
+    if (ok) {
+      setSaved(true);
+      setTimeout(() => setSaved(false), 2000);
+    } else {
+      setApiError("حدث خطأ أثناء حفظ الصلاحيات. حاول مرة أخرى.");
+    }
+  };
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="role-detail-title"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 50,
+        background: "rgba(15,23,42,0.55)",
+        backdropFilter: "blur(4px)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "1rem",
+      }}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        dir="rtl"
+        style={{
+          width: "100%",
+          maxWidth: 640,
+          background: "var(--color-surface)",
+          borderRadius: "var(--radius-2xl)",
+          border: "1px solid var(--color-border)",
+          boxShadow: "0 24px 64px rgba(0,0,0,.18)",
+          overflow: "hidden",
+          display: "flex",
+          flexDirection: "column",
+          maxHeight: "90vh",
+        }}
+      >
+        {/* Header */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "1.25rem 1.5rem",
+            borderBottom: "1px solid var(--color-border)",
+            background: "var(--color-surface-muted)",
+            flexShrink: 0,
+          }}
+        >
+          <div>
+            <p
+              style={{
+                fontSize: 11,
+                letterSpacing: "0.3em",
+                textTransform: "uppercase",
+                color: "#2563EB",
+                fontWeight: 600,
+                margin: 0,
+              }}
+            >
+              تفاصيل الدور
+            </p>
+            <h2
+              id="role-detail-title"
+              style={{
+                fontSize: 17,
+                fontWeight: 700,
+                color: "var(--color-text-primary)",
+                margin: "4px 0 0",
+              }}
+            >
+              {role.name}
+            </h2>
+            {role.description && (
+              <p
+                style={{
+                  fontSize: 12,
+                  color: "var(--color-text-muted)",
+                  marginTop: 4,
+                }}
+              >
+                {role.description}
+              </p>
+            )}
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="إغلاق"
+            style={{
+              width: 34,
+              height: 34,
+              borderRadius: "var(--radius-md)",
+              border: "1px solid var(--color-border)",
+              background: "var(--color-surface)",
+              cursor: "pointer",
+              fontSize: 18,
+              color: "var(--color-text-muted)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            ×
+          </button>
+        </div>
+
+        {/* Body */}
+        <div
+          style={{
+            padding: "1.5rem",
+            overflowY: "auto",
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            gap: "1rem",
+          }}
+        >
+          {apiError && (
+            <Alert
+              type="error"
+              message={apiError}
+              onClose={() => setApiError("")}
+            />
+          )}
+          {saved && (
+            <Alert
+              type="success"
+              message="تم حفظ التغييرات بنجاح."
+              onClose={() => setSaved(false)}
+            />
+          )}
+
+          <p style={{ fontSize: 12, color: "var(--color-text-muted)" }}>
+            {selected.size} من {allPermissions.length} صلاحية مفعّلة لهذا الدور
+          </p>
+
+          <div
+            style={{
+              border: "1px solid var(--color-border)",
+              borderRadius: "var(--radius-lg)",
+              overflow: "hidden",
+            }}
+          >
+            {Object.entries(grouped).map(([mod, perms], idx) => (
+              <div
+                key={mod}
+                style={{
+                  borderBottom:
+                    idx < Object.keys(grouped).length - 1
+                      ? "1px solid var(--color-border)"
+                      : "none",
+                }}
+              >
+                <div
+                  style={{
+                    padding: "0.625rem 1rem",
+                    background: "var(--color-surface-muted)",
+                    fontSize: 12,
+                    fontWeight: 700,
+                    color: "var(--color-text-primary)",
+                  }}
+                >
+                  {moduleLabel(mod)}
+                </div>
+                <div
+                  style={{
+                    display: "grid",
+                    gridTemplateColumns:
+                      "repeat(auto-fill, minmax(180px, 1fr))",
+                    gap: "0.5rem",
+                    padding: "0.75rem 1rem",
+                  }}
+                >
+                  {perms.map((perm) => {
+                    const checked = selected.has(perm.id);
+                    const wasActive = activeSet.has(perm.id);
+                    return (
+                      <label
+                        key={perm.id}
+                        style={{
+                          display: "flex",
+                          alignItems: "flex-start",
+                          gap: 8,
+                          padding: "0.5rem 0.625rem",
+                          borderRadius: "var(--radius-md)",
+                          border: `1px solid ${checked ? "#BFDBFE" : "var(--color-border)"}`,
+                          background: checked
+                            ? "#EFF6FF"
+                            : "var(--color-surface-muted)",
+                          cursor: "pointer",
+                        }}
+                      >
+                        <input
+                          type="checkbox"
+                          checked={checked}
+                          onChange={() => toggle(perm.id)}
+                          style={{
+                            width: 14,
+                            height: 14,
+                            marginTop: 1,
+                            cursor: "pointer",
+                            accentColor: "#2563EB",
+                          }}
+                        />
+                        <div>
+                          <p
+                            style={{
+                              fontSize: 11,
+                              fontWeight: 600,
+                              color: checked
+                                ? "#1D4ED8"
+                                : "var(--color-text-primary)",
+                              margin: 0,
+                            }}
+                          >
+                            {perm.name}
+                          </p>
+                          <span
+                            style={{
+                              fontSize: 9,
+                              fontWeight: 700,
+                              padding: "1px 6px",
+                              borderRadius: "var(--radius-full)",
+                              color: wasActive ? "#166534" : "#991B1B",
+                              background: wasActive ? "#DCFCE7" : "#FEF2F2",
+                            }}
+                          >
+                            {wasActive ? "نشطة حالياً" : "غير نشطة"}
+                          </span>
+                        </div>
+                      </label>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div
+          style={{
+            display: "flex",
+            gap: "0.5rem",
+            justifyContent: "flex-end",
+            padding: "1rem 1.5rem",
+            borderTop: "1px solid var(--color-border)",
+            flexShrink: 0,
+          }}
+        >
+          <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="button"
+            onClick={handleSave}
+            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 ? "جارٍ الحفظ…" : "حفظ التغييرات"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/Components/role/RoleFormModal.tsx b/src/Components/role/RoleFormModal.tsx
new file mode 100644
index 0000000..13f7536
--- /dev/null
+++ b/src/Components/role/RoleFormModal.tsx
@@ -0,0 +1,510 @@
+"use client";
+
+
+import { useEffect, useRef, useState } from "react";
+import { Alert, Spinner } from "../UI";
+import type { Role, RoleFormData, Permission } from "../../../services/role.service";
+
+// ── Styles ────────────────────────────────────────────────────────────────────
+
+const S = {
+  input: {
+    width: "100%", height: 40, padding: "0 0.75rem",
+    borderRadius: "var(--radius-md)",
+    border: "1px solid var(--color-border)",
+    background: "var(--color-surface)",
+    fontSize: 13, color: "var(--color-text-primary)",
+    outline: "none", fontFamily: "var(--font-sans)",
+  } as React.CSSProperties,
+  label: {
+    display: "flex", flexDirection: "column" as const,
+    gap: 6, fontSize: 12, fontWeight: 600,
+    color: "var(--color-text-secondary)",
+  } as React.CSSProperties,
+  errorText: {
+    fontSize: 11, color: "var(--color-danger)", fontWeight: 500,
+  } as React.CSSProperties,
+};
+
+// ── Module label map (Arabic) ─────────────────────────────────────────────────
+
+const MODULE_LABELS: Record<string, string> = {
+  Role:        "الأدوار",
+  User:        "المستخدمون",
+  Branch:      "الفروع",
+  Car:         "المركبات",
+  CarImage:    "صور المركبات",
+  Driver:      "السائقون",
+  Order:       "الطلبات",
+  Trip:        "الرحلات",
+  Client:      "العملاء",
+  Permission:  "الصلاحيات",
+  Audit:       "سجل التدقيق",
+  Dashboard:   "لوحة التحكم",
+  Maintenance: "الصيانة",
+};
+
+const moduleLabel = (mod: string) => MODULE_LABELS[mod] ?? mod;
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+/** Group permissions by their module field */
+function groupByModule(permissions: Permission[]): Record<string, Permission[]> {
+  return permissions.reduce<Record<string, Permission[]>>((acc, p) => {
+    const key = p.module || "أخرى";
+    if (!acc[key]) acc[key] = [];
+    acc[key].push(p);
+    return acc;
+  }, {});
+}
+
+interface FormErrors {
+  name?: string;
+}
+
+function validate(name: string): FormErrors {
+  const e: FormErrors = {};
+  if (!name.trim()) e.name = "اسم الدور مطلوب";
+  else if (name.trim().length < 2) e.name = "الاسم يجب أن يكون حرفين على الأقل";
+  return e;
+}
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+
+interface RoleFormModalProps {
+  editRole:     Role | null;          // null = create mode
+  permissions:  Permission[];         // all available permissions
+  onClose:      () => void;
+  onSubmit:     (data: RoleFormData, currentPermIds: string[]) => Promise<boolean>;
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function RoleFormModal({ editRole, permissions, onClose, onSubmit }: RoleFormModalProps) {
+  const isNew = editRole === null;
+
+  // Current permission IDs attached to the role being edited
+  const currentPermIds = editRole?.permissions?.map(rp => rp.permission.id) ?? [];
+
+  const [name, setName]               = useState(editRole?.name ?? "");
+  const [description, setDescription] = useState(editRole?.description ?? "");
+  const [selectedPerms, setSelectedPerms] = useState<Set<string>>(new Set(currentPermIds));
+  const [errors, setErrors]           = useState<FormErrors>({});
+  const [saving, setSaving]           = useState(false);
+  const [apiError, setApiError]       = useState("");
+  const [searchPerm, setSearchPerm]   = useState("");
+  const [expandedModules, setExpandedModules] = useState<Set<string>>(new Set());
+  const firstInputRef = useRef<HTMLInputElement>(null);
+
+  const grouped = groupByModule(permissions);
+
+  // Auto-expand modules that have selected permissions or match search
+  useEffect(() => {
+    if (editRole) {
+      const modulesWithSelected = new Set<string>();
+      permissions.forEach(p => {
+        if (currentPermIds.includes(p.id)) modulesWithSelected.add(p.module);
+      });
+      setExpandedModules(modulesWithSelected);
+    }
+    firstInputRef.current?.focus();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Keyboard: Escape closes
+  useEffect(() => {
+    const h = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
+    window.addEventListener("keydown", h);
+    return () => window.removeEventListener("keydown", h);
+  }, [onClose]);
+
+  // ── Checkbox helpers ───────────────────────────────────────────────────────
+
+  const togglePerm = (id: string) => {
+    setSelectedPerms(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const toggleModule = (module: string) => {
+    const modulePerms = (grouped[module] ?? []).map(p => p.id);
+    const allSelected = modulePerms.every(id => selectedPerms.has(id));
+    setSelectedPerms(prev => {
+      const next = new Set(prev);
+      if (allSelected) modulePerms.forEach(id => next.delete(id));
+      else modulePerms.forEach(id => next.add(id));
+      return next;
+    });
+  };
+
+  const toggleExpandModule = (module: string) => {
+    setExpandedModules(prev => {
+      const next = new Set(prev);
+      if (next.has(module)) next.delete(module);
+      else next.add(module);
+      return next;
+    });
+  };
+
+  const selectAll = () => setSelectedPerms(new Set(permissions.map(p => p.id)));
+  const clearAll  = () => setSelectedPerms(new Set());
+
+  // ── Submit ─────────────────────────────────────────────────────────────────
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const errs = validate(name);
+    if (Object.keys(errs).length) { setErrors(errs); return; }
+
+    setSaving(true);
+    setApiError("");
+    const ok = await onSubmit(
+      { name: name.trim(), description: description.trim(), permissionIds: [...selectedPerms] },
+      currentPermIds,
+    );
+    setSaving(false);
+    if (ok) onClose();
+    else setApiError("حدث خطأ غير متوقع. يرجى المحاولة لاحقاً.");
+  };
+
+  // ── Filter permissions by search ───────────────────────────────────────────
+
+  const filteredGrouped = Object.entries(grouped).reduce<Record<string, Permission[]>>((acc, [mod, perms]) => {
+    if (!searchPerm.trim()) {
+      acc[mod] = perms;
+    } else {
+      const q = searchPerm.trim().toLowerCase();
+      const filtered = perms.filter(p =>
+        p.name.toLowerCase().includes(q) ||
+        p.slug.toLowerCase().includes(q) ||
+        p.module.toLowerCase().includes(q)
+      );
+      if (filtered.length) acc[mod] = filtered;
+    }
+    return acc;
+  }, {});
+
+  const totalSelected = selectedPerms.size;
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="role-modal-title"
+      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
+      style={{
+        position: "fixed", inset: 0, zIndex: 50,
+        background: "rgba(15,23,42,0.55)", backdropFilter: "blur(4px)",
+        display: "flex", alignItems: "center", justifyContent: "center", padding: "1rem",
+      }}
+    >
+      <div
+        onClick={e => e.stopPropagation()}
+        style={{
+          width: "100%", maxWidth: 640,
+          background: "var(--color-surface)",
+          borderRadius: "var(--radius-2xl)",
+          border: "1px solid var(--color-border)",
+          boxShadow: "0 24px 64px rgba(0,0,0,.18)",
+          overflow: "hidden",
+          display: "flex", flexDirection: "column",
+          maxHeight: "90vh",
+        }}
+      >
+        {/* ── Modal header ── */}
+        <div style={{
+          display: "flex", alignItems: "center", justifyContent: "space-between",
+          padding: "1.25rem 1.5rem",
+          borderBottom: "1px solid var(--color-border)",
+          background: "var(--color-surface-muted)",
+          flexShrink: 0,
+        }}>
+          <div>
+            <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600, margin: 0 }}>
+              {isNew ? "إضافة دور" : "تعديل دور"}
+            </p>
+            <h2 id="role-modal-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
+              {isNew ? "دور جديد" : editRole.name}
+            </h2>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="إغلاق"
+            style={{
+              width: 34, height: 34, borderRadius: "var(--radius-md)",
+              border: "1px solid var(--color-border)",
+              background: "var(--color-surface)", cursor: "pointer",
+              fontSize: 18, color: "var(--color-text-muted)",
+              display: "flex", alignItems: "center", justifyContent: "center",
+            }}
+          >
+            ×
+          </button>
+        </div>
+
+        {/* ── Scrollable body ── */}
+        <form
+          onSubmit={handleSubmit}
+          noValidate
+          style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1.25rem", overflowY: "auto", flex: 1 }}
+        >
+          {apiError && <Alert type="error" message={apiError} onClose={() => setApiError("")} />}
+
+          {/* Name field */}
+          <label style={S.label}>
+            اسم الدور *
+            <input
+              ref={firstInputRef}
+              value={name}
+              onChange={e => { setName(e.target.value); if (errors.name) setErrors({}); }}
+              placeholder="مدير النظام"
+              autoComplete="off"
+              dir="rtl"
+              style={{
+                ...S.input,
+                ...(errors.name ? { borderColor: "var(--color-danger)", background: "#FEF2F2" } : {}),
+              }}
+            />
+            {errors.name && <span style={S.errorText}>{errors.name}</span>}
+          </label>
+
+          {/* Description field */}
+          <label style={S.label}>
+            الوصف (اختياري)
+            <textarea
+              value={description}
+              onChange={e => setDescription(e.target.value)}
+              placeholder="وصف مختصر لمهام هذا الدور…"
+              rows={2}
+              dir="rtl"
+              style={{
+                ...S.input,
+                height: "auto",
+                padding: "0.5rem 0.75rem",
+                resize: "vertical",
+                minHeight: 60,
+              }}
+            />
+          </label>
+
+          {/* ── Permissions section ── */}
+          <div>
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "0.75rem" }}>
+              <div>
+                <p style={{ fontSize: 12, fontWeight: 700, color: "var(--color-text-secondary)", margin: 0 }}>
+                  الصلاحيات
+                </p>
+                <p style={{ fontSize: 11, color: "var(--color-text-muted)", marginTop: 2 }}>
+                  {totalSelected} من {permissions.length} صلاحية محددة
+                </p>
+              </div>
+              <div style={{ display: "flex", gap: "0.5rem" }}>
+                <button type="button" onClick={selectAll}
+                  style={{ fontSize: 11, fontWeight: 600, color: "#2563EB", background: "var(--color-brand-50)", border: "1px solid var(--color-brand-200)", borderRadius: "var(--radius-md)", padding: "4px 10px", cursor: "pointer", fontFamily: "var(--font-sans)" }}>
+                  تحديد الكل
+                </button>
+                <button type="button" onClick={clearAll}
+                  style={{ fontSize: 11, fontWeight: 600, color: "var(--color-text-muted)", background: "var(--color-surface-muted)", border: "1px solid var(--color-border)", borderRadius: "var(--radius-md)", padding: "4px 10px", cursor: "pointer", fontFamily: "var(--font-sans)" }}>
+                  إلغاء الكل
+                </button>
+              </div>
+            </div>
+
+            {/* Permission search */}
+            <div style={{ position: "relative", marginBottom: "0.75rem" }}>
+              <svg style={{ position: "absolute", right: 10, top: "50%", transform: "translateY(-50%)", width: 14, height: 14, color: "var(--color-text-hint)", pointerEvents: "none" }}
+                fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
+              </svg>
+              <input
+                type="text"
+                placeholder="بحث في الصلاحيات…"
+                value={searchPerm}
+                onChange={e => setSearchPerm(e.target.value)}
+                dir="rtl"
+                style={{
+                  ...S.input,
+                  paddingRight: 30, height: 36, fontSize: 12,
+                }}
+              />
+            </div>
+
+            {/* Grouped permission modules */}
+            {permissions.length === 0 ? (
+              <div style={{ textAlign: "center", padding: "2rem", fontSize: 13, color: "var(--color-text-muted)" }}>
+                جارٍ تحميل الصلاحيات…
+              </div>
+            ) : Object.keys(filteredGrouped).length === 0 ? (
+              <div style={{ textAlign: "center", padding: "1.5rem", fontSize: 12, color: "var(--color-text-muted)" }}>
+                لا توجد نتائج لـ &quot;{searchPerm}&quot;
+              </div>
+            ) : (
+              <div style={{
+                border: "1px solid var(--color-border)",
+                borderRadius: "var(--radius-lg)",
+                overflow: "hidden",
+              }}>
+                {Object.entries(filteredGrouped).map(([mod, perms], idx) => {
+                  const allChecked = perms.every(p => selectedPerms.has(p.id));
+                  const someChecked = !allChecked && perms.some(p => selectedPerms.has(p.id));
+                  const isExpanded = expandedModules.has(mod) || !!searchPerm;
+                  const checkedCount = perms.filter(p => selectedPerms.has(p.id)).length;
+
+                  return (
+                    <div key={mod} style={{ borderBottom: idx < Object.keys(filteredGrouped).length - 1 ? "1px solid var(--color-border)" : "none" }}>
+                      {/* Module header row */}
+                      <div style={{
+                        display: "flex", alignItems: "center", gap: 10,
+                        padding: "0.625rem 1rem",
+                        background: isExpanded ? "var(--color-surface-muted)" : "var(--color-surface)",
+                        cursor: "pointer",
+                        transition: "background 150ms",
+                      }}>
+                        {/* Module checkbox (select/deselect all in module) */}
+                        <input
+                          type="checkbox"
+                          checked={allChecked}
+                          ref={el => { if (el) el.indeterminate = someChecked; }}
+                          onChange={() => toggleModule(mod)}
+                          onClick={e => e.stopPropagation()}
+                          style={{ width: 15, height: 15, cursor: "pointer", flexShrink: 0, accentColor: "#2563EB" }}
+                        />
+                        {/* Module name */}
+                        <button
+                          type="button"
+                          onClick={() => toggleExpandModule(mod)}
+                          style={{
+                            flex: 1, display: "flex", alignItems: "center", justifyContent: "space-between",
+                            background: "none", border: "none", cursor: "pointer", padding: 0,
+                            fontFamily: "var(--font-sans)",
+                          }}
+                        >
+                          <span style={{ fontSize: 12, fontWeight: 700, color: "var(--color-text-primary)" }}>
+                            {moduleLabel(mod)}
+                          </span>
+                          <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+                            {checkedCount > 0 && (
+                              <span style={{
+                                fontSize: 10, fontWeight: 700,
+                                color: "#2563EB",
+                                background: "var(--color-brand-50)",
+                                border: "1px solid var(--color-brand-200)",
+                                borderRadius: "var(--radius-full)",
+                                padding: "1px 7px",
+                              }}>
+                                {checkedCount}/{perms.length}
+                              </span>
+                            )}
+                            <svg
+                              style={{
+                                width: 14, height: 14,
+                                color: "var(--color-text-muted)",
+                                transform: isExpanded ? "rotate(180deg)" : "none",
+                                transition: "transform 200ms",
+                              }}
+                              fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"
+                            >
+                              <path d="m6 9 6 6 6-6"/>
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+
+                      {/* Permissions grid */}
+                      {isExpanded && (
+                        <div style={{
+                          display: "grid",
+                          gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
+                          gap: "0.5rem",
+                          padding: "0.75rem 1rem 0.875rem",
+                          background: "var(--color-surface)",
+                        }}>
+                          {perms.map(perm => {
+                            const checked = selectedPerms.has(perm.id);
+                            return (
+                              <label
+                                key={perm.id}
+                                style={{
+                                  display: "flex", alignItems: "flex-start", gap: 8,
+                                  padding: "0.5rem 0.625rem",
+                                  borderRadius: "var(--radius-md)",
+                                  border: `1px solid ${checked ? "#BFDBFE" : "var(--color-border)"}`,
+                                  background: checked ? "#EFF6FF" : "var(--color-surface-muted)",
+                                  cursor: "pointer",
+                                  transition: "all 150ms",
+                                  userSelect: "none",
+                                }}
+                              >
+                                <input
+                                  type="checkbox"
+                                  checked={checked}
+                                  onChange={() => togglePerm(perm.id)}
+                                  style={{ width: 14, height: 14, marginTop: 1, cursor: "pointer", flexShrink: 0, accentColor: "#2563EB" }}
+                                />
+                                <div>
+                                  <p style={{ fontSize: 11, fontWeight: 600, color: checked ? "#1D4ED8" : "var(--color-text-primary)", margin: 0, lineHeight: 1.4 }}>
+                                    {perm.name}
+                                  </p>
+                                  <p style={{ fontSize: 10, color: "var(--color-text-muted)", margin: "2px 0 0", fontFamily: "var(--font-mono)" }}>
+                                    {perm.slug}
+                                  </p>
+                                </div>
+                              </label>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+
+          {/* ── Action buttons ── */}
+          <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end", paddingTop: "0.25rem", flexShrink: 0 }}>
+            <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>
+  );
+}
\ No newline at end of file
diff --git a/src/Components/role/RoleTable.tsx b/src/Components/role/RoleTable.tsx
new file mode 100644
index 0000000..1468604
--- /dev/null
+++ b/src/Components/role/RoleTable.tsx
@@ -0,0 +1,300 @@
+"use client";
+
+
+import { Spinner } from "../UI";
+import type { Role } from "../../../services/role.service";
+
+// ── Styles  ──────────────────────────────────────────────────
+
+const cardStyle: React.CSSProperties = {
+  borderRadius: "var(--radius-xl)",
+  border: "1px solid var(--color-border)",
+  background: "var(--color-surface)",
+  overflow: "hidden",
+  boxShadow: "var(--shadow-card)",
+};
+
+const thStyle: React.CSSProperties = {
+  padding: "0.75rem 1.5rem",
+  fontSize: 11,
+  fontWeight: 700,
+  textTransform: "uppercase",
+  letterSpacing: "0.2em",
+  color: "var(--color-text-muted)",
+  background: "var(--color-surface-muted)",
+  borderBottom: "1px solid var(--color-border)",
+};
+
+// ── Sub-components ─────────────────────────────────────────────────────────────
+
+function StatusBadge({ active }: { active: boolean }) {
+  return (
+    <span style={{
+      display: "inline-flex", alignItems: "center", gap: 5,
+      borderRadius: "var(--radius-full)",
+      border: active ? "1px solid #BBF7D0" : "1px solid #FECACA",
+      background: active ? "#DCFCE7" : "#FEF2F2",
+      padding: "0.2rem 0.625rem",
+      fontSize: 11, fontWeight: 600,
+      color: active ? "#166534" : "#991B1B",
+    }}>
+      <span style={{ width: 6, height: 6, borderRadius: "50%", background: active ? "#16A34A" : "#DC2626" }} />
+      {active ? "نشط" : "معطل"}
+    </span>
+  );
+}
+
+function IconBtn({
+  onClick, title, color, bg, borderColor, children,
+}: {
+  onClick: () => void;
+  title: string;
+  color: string;
+  bg: string;
+  borderColor: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      title={title}
+      aria-label={title}
+      onClick={e => { e.stopPropagation(); onClick(); }}
+      style={{
+        width: 32, height: 32,
+        borderRadius: "var(--radius-md)",
+        border: `1px solid ${borderColor}`,
+        background: bg, color,
+        cursor: "pointer",
+        display: "inline-flex", alignItems: "center", justifyContent: "center",
+        transition: "opacity 150ms",
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+// ── Props ──────────────────────────────────────────────────────────────────────
+
+interface RoleTableProps {
+  roles:        Role[];
+  loading:      boolean;
+  search:       string;
+  page:         number;
+  pages:        number;
+  onEdit:       (role: Role) => void;
+  onDelete:     (role: Role) => void;
+  onView:       (role: Role) => void;
+  onAddFirst:   () => void;
+  onPageChange: (p: number) => void;
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function RoleTable({
+  roles, loading, search, page, pages, onEdit, onDelete, onView, onAddFirst, onPageChange,
+}: RoleTableProps) {
+  return (
+    <div style={cardStyle}>
+      {/* Column headers */}
+      <div
+        dir="rtl"
+        style={{
+          display: "grid",
+          gridTemplateColumns: "2fr 2.5fr 1fr 1fr 80px",
+          ...thStyle,
+        }}
+      >
+        <span>الدور</span>
+        <span>الصلاحيات</span>
+        <span>الحالة</span>
+        <span style={{ textAlign: "center" }}>تاريخ الإنشاء</span>
+        <span style={{ textAlign: "center" }}>إجراءات</span>
+      </div>
+
+      {/* Loading */}
+      {loading ? (
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, padding: "4rem 0", color: "var(--color-text-muted)" }}>
+          <Spinner size="sm" className="text-blue-600" />
+          <span style={{ fontSize: 13 }}>جارٍ التحميل…</span>
+        </div>
+      ) : roles.length === 0 ? (
+        /* Empty state */
+        <div style={{ textAlign: "center", padding: "4rem 1rem" }}>
+          <p style={{ fontSize: 13, color: "var(--color-text-muted)" }}>
+            {search ? `لا توجد نتائج لـ "${search}"` : "لا توجد أدوار لعرضها."}
+          </p>
+          {!search && (
+            <button
+              type="button"
+              onClick={onAddFirst}
+              style={{
+                marginTop: 12, fontSize: 13, fontWeight: 600,
+                color: "var(--color-brand-600)",
+                background: "none", border: "none",
+                cursor: "pointer", textDecoration: "underline",
+              }}
+            >
+              أضف أول دور
+            </button>
+          )}
+        </div>
+      ) : (
+        /* Data rows */
+        <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
+          {roles.map((role, i) => {
+            const permCount = role.permissions?.length ?? 0;
+            // Show up to 3 permission module badges
+            const modules = [...new Set(role.permissions?.map(rp => rp.permission.module) ?? [])].slice(0, 3);
+            const extra   = (role.permissions?.length ?? 0) - modules.length;
+
+            return (
+              <li
+                key={role.id}
+                onClick={() => onView(role)}
+                style={{
+                  display: "grid",
+                  gridTemplateColumns: "2fr 2.5fr 1fr 1fr 80px",
+                  alignItems: "center",
+                  gap: "0.5rem",
+                  padding: "0.875rem 1.5rem",
+                  borderBottom: "1px solid var(--color-border)",
+                  background: i % 2 !== 0 ? "var(--color-surface-muted)" : "transparent",
+                  cursor: "pointer",
+                  fontSize: 13,
+                }}
+              >
+                {/* Role name + ID */}
+                <div>
+                  <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>
+                    {role.name}
+                  </p>
+                  {role.id && (
+                    <p style={{ marginTop: 2, fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--color-text-muted)" }}>
+                      {role.id.slice(0, 8)}…
+                    </p>
+                  )}
+                </div>
+
+                {/* Permissions preview */}
+                <div style={{ display: "flex", flexWrap: "wrap", gap: "0.25rem", alignItems: "center" }}>
+                  {permCount === 0 ? (
+                    <span style={{ fontSize: 11, color: "var(--color-text-hint)" }}>لا توجد صلاحيات</span>
+                  ) : (
+                    <>
+                      {modules.map(mod => (
+                        <span key={mod} style={{
+                          fontSize: 10, fontWeight: 600,
+                          color: "#374151",
+                          background: "#F3F4F6",
+                          border: "1px solid #E5E7EB",
+                          borderRadius: "var(--radius-full)",
+                          padding: "2px 7px",
+                        }}>
+                          {mod}
+                        </span>
+                      ))}
+                      {extra > 0 && (
+                        <span style={{
+                          fontSize: 10, fontWeight: 700,
+                          color: "#2563EB",
+                          background: "var(--color-brand-50)",
+                          border: "1px solid var(--color-brand-200)",
+                          borderRadius: "var(--radius-full)",
+                          padding: "2px 7px",
+                        }}>
+                          +{extra}
+                        </span>
+                      )}
+                      <span style={{ fontSize: 10, color: "var(--color-text-muted)", marginRight: 2 }}>
+                        ({permCount} صلاحية)
+                      </span>
+                    </>
+                  )}
+                </div>
+
+                {/* Status badge */}
+                <StatusBadge active={role.isActive !== false} />
+
+                {/* Created date */}
+                <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
+                  {new Date(role.createdAt).toLocaleDateString("ar-SA", {
+                    year: "numeric", month: "short", day: "numeric",
+                  })}
+                </span>
+
+                {/* Actions */}
+                <div style={{ display: "flex", justifyContent: "center", gap: 6 }}>
+                  <IconBtn
+                    title={`تعديل ${role.name}`}
+                    color="#1D4ED8" bg="#EFF6FF" borderColor="#BFDBFE"
+                    onClick={() => onEdit(role)}
+                  >
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                      <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+                      <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+                    </svg>
+                  </IconBtn>
+                  <IconBtn
+                    title={`حذف ${role.name}`}
+                    color="#DC2626" bg="#FEF2F2" borderColor="#FECACA"
+                    onClick={() => onDelete(role)}
+                  >
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                      <polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
+                      <path d="M10 11v6M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>
+                    </svg>
+                  </IconBtn>
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+
+      {/* Pagination */}
+      {pages > 1 && (
+        <div
+          dir="rtl"
+          style={{
+            display: "flex", alignItems: "center", justifyContent: "space-between",
+            borderTop: "1px solid var(--color-border)",
+            padding: "0.875rem 1.5rem",
+          }}
+        >
+          <span style={{ fontSize: 12, color: "var(--color-text-muted)" }}>
+            صفحة <strong style={{ color: "var(--color-text-primary)" }}>{page}</strong> من{" "}
+            <strong style={{ color: "var(--color-text-primary)" }}>{pages}</strong>
+          </span>
+          <div style={{ display: "flex", gap: "0.5rem" }}>
+            {[
+              { label: "السابق", action: () => onPageChange(Math.max(1, page - 1)),    disabled: page === 1     },
+              { label: "التالي", action: () => onPageChange(Math.min(pages, page + 1)), disabled: page === pages },
+            ].map(btn => (
+              <button
+                key={btn.label}
+                type="button"
+                onClick={btn.action}
+                disabled={btn.disabled}
+                style={{
+                  borderRadius: "var(--radius-lg)",
+                  border: "1px solid var(--color-border)",
+                  background: "var(--color-surface-muted)",
+                  padding: "0.375rem 0.875rem",
+                  fontSize: 12,
+                  color: "var(--color-text-secondary)",
+                  cursor: btn.disabled ? "not-allowed" : "pointer",
+                  opacity: btn.disabled ? 0.4 : 1,
+                  fontFamily: "var(--font-sans)",
+                }}
+              >
+                {btn.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/Components/role/RoleToast.tsx b/src/Components/role/RoleToast.tsx
new file mode 100644
index 0000000..edf63b9
--- /dev/null
+++ b/src/Components/role/RoleToast.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+
+import { useEffect, useState } from "react";
+import type { RoleNotification } from "../../../hooks/useRole";
+
+interface RoleToastProps {
+  notification: RoleNotification | null;
+}
+
+export function RoleToast({ notification }: RoleToastProps) {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    if (notification) {
+      setVisible(true);
+    } else {
+      const t = setTimeout(() => setVisible(false), 300);
+      return () => clearTimeout(t);
+    }
+  }, [notification]);
+
+  if (!visible && !notification) return null;
+
+  const isSuccess = notification?.type === "success";
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      aria-atomic="true"
+      style={{
+        position: "fixed", bottom: 24, left: "50%",
+        transform: `translateX(-50%) translateY(${notification ? "0" : "16px"})`,
+        zIndex: 9999,
+        transition: "transform 250ms ease, opacity 250ms ease",
+        opacity: notification ? 1 : 0,
+        pointerEvents: "none",
+      }}
+    >
+      <div style={{
+        display: "flex", alignItems: "center", gap: 10,
+        padding: "0.75rem 1.25rem",
+        borderRadius: "var(--radius-full)",
+        background: isSuccess ? "#065F46" : "#7F1D1D",
+        color: "#FFFFFF",
+        fontSize: 13, fontWeight: 600,
+        boxShadow: "0 8px 32px rgba(0,0,0,0.25)",
+        maxWidth: "90vw", whiteSpace: "nowrap",
+        fontFamily: "var(--font-sans)",
+      }}>
+        <span style={{ fontSize: 16 }}>{isSuccess ? "✓" : "⚠"}</span>
+        <span>{notification?.message}</span>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/Components/role/index.ts b/src/Components/role/index.ts
new file mode 100644
index 0000000..deb2c19
--- /dev/null
+++ b/src/Components/role/index.ts
@@ -0,0 +1,5 @@
+export { RoleFormModal } from "./RoleFormModal";
+export { RoleTable } from "./RoleTable";
+export { RoleDetailModal } from "./RoleDetailModal";
+export { DeleteRoleModal } from "./DeleteRoleModal";
+export { RoleToast } from "./RoleToast";
\ No newline at end of file
diff --git a/hooks/useCars.ts b/src/hooks/useCars.ts
similarity index 97%
rename from hooks/useCars.ts
rename to src/hooks/useCars.ts
index f345cd8..32f073c 100644
--- a/hooks/useCars.ts
+++ b/src/hooks/useCars.ts
@@ -1,11 +1,10 @@
 "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 { getStoredToken } from "@/src/lib/auth";
+import { carService } from "@/src/services/car.service";
+import { get } from "@/src/services/api";
 import type {
   Car,
   CarImage,
diff --git a/hooks/useClientAddresses.ts b/src/hooks/useClientAddresses.ts
similarity index 97%
rename from hooks/useClientAddresses.ts
rename to src/hooks/useClientAddresses.ts
index 164da47..e699a3d 100644
--- a/hooks/useClientAddresses.ts
+++ b/src/hooks/useClientAddresses.ts
@@ -2,14 +2,14 @@
 
 
 import { useCallback, useEffect, useReducer, useState } from "react";
-import { getStoredToken } from "../lib/auth";
-import { clientAddressService } from "../services/clientAddress.service";
+import { getStoredToken } from "@/src/lib/auth";
+import { clientAddressService } from "@/src/services/clientAddress.service";
 import type {
   ClientAddress,
   ClientAddressFormData,
   AddressTableAction,
   AddressTableState,
-} from "../types/client";
+} from "@/src/types/client";
 
 // ── Notification ───────────────────────────────────────────────────────────
 export interface Notification {
diff --git a/src/hooks/useClientOrders.ts b/src/hooks/useClientOrders.ts
new file mode 100644
index 0000000..088a092
--- /dev/null
+++ b/src/hooks/useClientOrders.ts
@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { clientService } from "@/src/services/client.service";
+import type { Order } from "@/src/types/order";
+
+interface State {
+  orders:  Order[];
+  error:   string | null;
+  loading: boolean;
+}
+
+/**
+ * Fetches all orders for a client session.
+ *
+ * @example
+ * const { orders, loading, error } = useClientOrders(session.id);
+ */
+export function useClientOrders(clientId: string): State {
+  const [state, setState] = useState<State>({
+    orders: [], error: null, loading: true,
+  });
+
+  useEffect(() => {
+    if (!clientId) {
+      setState({ orders: [], error: null, loading: false });
+      return;
+    }
+
+    let cancelled = false;
+
+    clientService
+      .getOrders(clientId)
+      .then(orders => {
+        if (!cancelled) setState({ orders, error: null, loading: false });
+      })
+      .catch((err: Error) => {
+        if (!cancelled) setState({ orders: [], error: err.message, loading: false });
+      });
+
+    return () => { cancelled = true; };
+  }, [clientId]);
+
+  return state;
+}
\ No newline at end of file
diff --git a/hooks/useClients.ts b/src/hooks/useClients.ts
similarity index 97%
rename from hooks/useClients.ts
rename to src/hooks/useClients.ts
index 1e0401e..03ec24f 100644
--- a/hooks/useClients.ts
+++ b/src/hooks/useClients.ts
@@ -1,14 +1,14 @@
 "use client";
 
 import { useCallback, useEffect, useReducer, useState } from "react";
-import { getStoredToken } from "../lib/auth";
-import { clientService } from "../services/client.service";
+import { getStoredToken } from "@/src/lib/auth";
+import { clientService } from "@/src/services/client.service";
 import type {
   Client,
   ClientFormData,
   ClientTableAction,
   ClientTableState,
-} from "../types/client";
+} from "@/src/types/client";
 
 // ── Notification (mirrors useUsers Notification) ───────────────────────────
 export interface Notification {
diff --git a/hooks/useDashboardSummary.ts b/src/hooks/useDashboardSummary.ts
similarity index 85%
rename from hooks/useDashboardSummary.ts
rename to src/hooks/useDashboardSummary.ts
index 3584b4f..6a8eaca 100644
--- a/hooks/useDashboardSummary.ts
+++ b/src/hooks/useDashboardSummary.ts
@@ -2,9 +2,9 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { dashboardService } from "@/services/dashboard.service";
-import { getStoredToken } from "@/lib/auth";
-import type { DashboardSummary } from "@/types/dashboard";
+import { dashboardService } from "@/src/services/dashboard.service";
+import { getStoredToken } from "@/src/lib/auth";
+import type { DashboardSummary } from "@/src/types/dashboard";
 
 interface State {
   data:    DashboardSummary | null;
diff --git a/src/hooks/useDriver.ts b/src/hooks/useDriver.ts
new file mode 100644
index 0000000..1fffc92
--- /dev/null
+++ b/src/hooks/useDriver.ts
@@ -0,0 +1,211 @@
+"use client";
+
+import { useCallback, useEffect, useReducer, useState } from "react";
+import { getStoredToken } from "@/src/lib/auth";
+import { driverService } from "@/src/services/driver.service";
+import type { Driver, CreateDriverPayload, UpdateDriverPayload } from "@/src/types/driver";
+import type { ToastNotification } from "@/src/Components/UI";
+
+export type DriverNotification = ToastNotification;
+
+// ── Table state / reducer ──────────────────────────────────────────────────
+interface TableState {
+  drivers: Driver[];
+  loading: boolean;
+  total: number;
+  pages: number;
+  error: string | null;
+}
+
+type TableAction =
+  | { type: "LOAD_START" }
+  | { type: "LOAD_OK"; drivers: Driver[]; total: number; pages: number }
+  | { type: "LOAD_ERR"; error: string }
+  | { type: "DELETE"; id: string }
+  | { type: "UPDATE"; driver: Driver }
+  | { type: "CLEAR_ERR" };
+
+function reducer(s: TableState, a: TableAction): TableState {
+  switch (a.type) {
+    case "LOAD_START":
+      return { ...s, loading: true, error: null };
+    case "LOAD_OK":
+      return { ...s, loading: false, drivers: a.drivers, total: a.total, pages: a.pages };
+    case "LOAD_ERR":
+      return { ...s, loading: false, error: a.error };
+    case "DELETE":
+      return { ...s, drivers: s.drivers.filter((d) => d.id !== a.id) };
+    // Instantly reflect updated driver in the list without a full reload
+    case "UPDATE":
+      return { ...s, drivers: s.drivers.map((d) => (d.id === a.driver.id ? a.driver : d)) };
+    case "CLEAR_ERR":
+      return { ...s, error: null };
+    default:
+      return s;
+  }
+}
+
+const initialState: TableState = {
+  drivers: [],
+  loading: true,
+  total: 0,
+  pages: 1,
+  error: null,
+};
+
+// ── Main hook ──────────────────────────────────────────────────────────────
+export function useDrivers() {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const [search, setSearch] = useState("");
+  const [page, setPage] = useState(1);
+  const [notification, setNotification] = useState<ToastNotification | null>(null);
+
+  // Show a toast for 4 seconds then auto-dismiss
+  const notify = useCallback((n: ToastNotification) => {
+    setNotification(n);
+    setTimeout(() => setNotification(null), 4000);
+  }, []);
+
+  // ── Fetch drivers ─────────────────────────────────────────────────────────
+  const loadDrivers = useCallback(async (p: number, q: string) => {
+    dispatch({ type: "LOAD_START" });
+    try {
+      const token = getStoredToken();
+      const res = await driverService.getAll(p, q, token);
+      const payload = (
+        res as unknown as {
+          data: {
+            data: Driver[];
+            pagination?: { total: number; pages: number };
+            meta?: { total: number; pages: number };
+          };
+        }
+      ).data ?? res;
+
+      dispatch({
+        type: "LOAD_OK",
+        drivers: payload.data ?? [],
+        total: payload.meta?.total ?? payload.pagination?.total ?? 0,
+        pages: payload.meta?.pages ?? payload.pagination?.pages ?? 1,
+      });
+    } catch {
+      dispatch({ type: "LOAD_ERR", error: "تعذّر تحميل بيانات السائقين. يرجى المحاولة مجدداً." });
+    }
+  }, []);
+
+  useEffect(() => {
+    loadDrivers(page, search);
+  }, [page, search, loadDrivers]);
+
+  // ── Create ────────────────────────────────────────────────────────────────
+  const createDriver = useCallback(
+    async (
+      payload: CreateDriverPayload & {
+        photo?: File;
+        nationalPhoto?: File;
+        driverCardPhoto?: File;
+      },
+    ): Promise<boolean> => {
+      try {
+        const token = getStoredToken();
+        const hasFiles = payload.photo || payload.nationalPhoto || payload.driverCardPhoto;
+
+        if (hasFiles) {
+          const res = await driverService.createWithImages(payload, token);
+          const created = (res as unknown as { data: Driver }).data;
+          if (created?.id) {
+            await driverService.getById(created.id, token).catch(() => null);
+          }
+        } else {
+          await driverService.create(payload, token);
+        }
+
+        notify({ type: "success", message: "تم إضافة السائق بنجاح." });
+        await loadDrivers(page, search);
+        return true;
+      } catch (err) {
+        // ✅ بنعرض رسالة الخطأ كـ toast برضو، مش بس نرميها لفوق
+        const message = err instanceof Error ? err.message : "تعذّر إضافة السائق. يرجى المحاولة لاحقاً.";
+        notify({ type: "error", message });
+        throw err; // يفضل يترمي عشان DriverFormModal يعرضه جوه المودال كمان لو محتاج
+      }
+    },
+    [notify, loadDrivers, page, search],
+  );
+
+  // ── Update ────────────────────────────────────────────────────────────────
+  const updateDriver = useCallback(
+    async (
+      id: string,
+      payload: UpdateDriverPayload & {
+        photo?: File;
+        nationalPhoto?: File;
+        driverCardPhoto?: File;
+      },
+    ): Promise<boolean> => {
+      try {
+        const token = getStoredToken();
+        const hasFiles = payload.photo || payload.nationalPhoto || payload.driverCardPhoto;
+
+        let updatedDriver: Driver;
+
+        if (hasFiles) {
+          await driverService.updateWithImages(id, payload, token);
+          const fresh = await driverService.getById(id, token);
+          updatedDriver = (fresh as unknown as { data: Driver }).data;
+        } else {
+          const res = await driverService.update(id, payload, token);
+          updatedDriver = (res as unknown as { data: Driver }).data;
+        }
+
+        dispatch({ type: "UPDATE", driver: updatedDriver });
+        notify({ type: "success", message: "تم تحديث بيانات السائق بنجاح." });
+        return true;
+      } catch (err) {
+        // ✅ نفس الفكرة هنا — أي فشل في التحديث يبان كـ toast أحمر
+        const message = err instanceof Error ? err.message : "تعذّر تحديث بيانات السائق. يرجى المحاولة لاحقاً.";
+        notify({ type: "error", message });
+        throw err;
+      }
+    },
+    [notify],
+  );
+
+  // ── Delete ────────────────────────────────────────────────────────────────
+  const deleteDriver = useCallback(
+    async (id: string): Promise<boolean> => {
+      try {
+        const token = getStoredToken();
+        await driverService.delete(id, token);
+        dispatch({ type: "DELETE", id });
+        notify({ type: "success", message: "تم حذف السائق بنجاح." });
+        return true;
+      } catch (err) {
+        const message = err instanceof Error ? err.message : "تعذّر حذف السائق.";
+        notify({ type: "error", message });
+        return false;
+      }
+    },
+    [notify],
+  );
+
+  // ── Search helper ─────────────────────────────────────────────────────────
+  const handleSearch = useCallback((q: string) => {
+    setSearch(q);
+    setPage(1);
+  }, []);
+
+  return {
+    ...state,
+    page,
+    search,
+    setPage,
+    handleSearch,
+    clearError: () => dispatch({ type: "CLEAR_ERR" }),
+    createDriver,
+    updateDriver,
+    deleteDriver,
+    notification,
+    reload: () => loadDrivers(page, search),
+  };
+}
\ No newline at end of file
diff --git a/hooks/useOrder.ts b/src/hooks/useOrder.ts
similarity index 98%
rename from hooks/useOrder.ts
rename to src/hooks/useOrder.ts
index d755efa..2d67480 100644
--- a/hooks/useOrder.ts
+++ b/src/hooks/useOrder.ts
@@ -1,13 +1,13 @@
 "use client";
 
 import { useCallback, useEffect, useReducer } from "react";
-import { orderService } from "../services/order.service";
+import { orderService } from "@/src/services/order.service";
 import type {
   Order,
   CreateOrderPayload,
   UpdateOrderPayload,
   UpdateOrderStatusPayload,
-} from "../types/order";
+} from "@/src/types/order";
 
 // ── State ─────────────────────────────────────────────────
 interface State {
diff --git a/src/hooks/useRole.ts b/src/hooks/useRole.ts
new file mode 100644
index 0000000..bcf9cf6
--- /dev/null
+++ b/src/hooks/useRole.ts
@@ -0,0 +1,284 @@
+"use client";
+
+import { useCallback, useEffect, useReducer, useState } from "react";
+import { getStoredToken } from "@/src/lib/auth";
+import { roleService } from "@/src/services/role.service";
+import type { Role, RoleFormData, Permission } from "@/src/services/role.service";
+
+// ── Notification ──────────────────────────────────────────────────────────────
+
+export interface RoleNotification {
+  type: "success" | "error";
+  message: string;
+}
+
+// ── Table state / reducer ─────────────────────────────────────────────────────
+
+interface TableState {
+  roles: Role[];
+  loading: boolean;
+  total: number;
+  pages: number;
+  error: string | null;
+}
+
+type TableAction =
+  | { type: "LOAD_START" }
+  | { type: "LOAD_OK"; roles: Role[]; total: number; pages: number }
+  | { type: "LOAD_ERR"; error: string }
+  | { type: "ADD"; role: Role }
+  | { type: "UPDATE"; role: Role }
+  | { type: "DELETE"; id: string }
+  | { type: "CLEAR_ERR" };
+
+function tableReducer(s: TableState, a: TableAction): TableState {
+  switch (a.type) {
+    case "LOAD_START":
+      return { ...s, loading: true, error: null };
+    case "LOAD_OK":
+      return {
+        ...s,
+        loading: false,
+        roles: a.roles,
+        total: a.total,
+        pages: a.pages,
+      };
+    case "LOAD_ERR":
+      return { ...s, loading: false, error: a.error };
+    case "ADD":
+      return { ...s, roles: [a.role, ...s.roles] };
+    case "UPDATE":
+      return {
+        ...s,
+        roles: s.roles.map((r) => (r.id === a.role.id ? a.role : r)),
+      };
+    case "DELETE":
+      return { ...s, roles: s.roles.filter((r) => r.id !== a.id) };
+    case "CLEAR_ERR":
+      return { ...s, error: null };
+    default:
+      return s;
+  }
+}
+
+const initialState: TableState = {
+  roles: [],
+  loading: true,
+  total: 0,
+  pages: 1,
+  error: null,
+};
+
+// ── Main hook ─────────────────────────────────────────────────────────────────
+
+export function useRoles() {
+  const [state, dispatch] = useReducer(tableReducer, initialState);
+  const [search, setSearch] = useState("");
+  const [page, setPage] = useState(1);
+  const [permissions, setPermissions] = useState<Permission[]>([]);
+  const [notification, setNotification] = useState<RoleNotification | null>(
+    null,
+  );
+
+  const notify = useCallback((n: RoleNotification) => {
+    setNotification(n);
+    setTimeout(() => setNotification(null), 4000);
+  }, []);
+
+  // ── Fetch roles ─────────────────────────────────────────────────────────────
+  const loadRoles = useCallback(async (p: number, q: string) => {
+    dispatch({ type: "LOAD_START" });
+    try {
+      const token = getStoredToken();
+      const res = await roleService.getAll(p, q, token);
+      const payload =
+        (
+          res as unknown as {
+            data: {
+              data: Role[];
+              meta?: { total: number; pages: number };
+              pagination?: { total: number; pages: number };
+            };
+          }
+        ).data ?? res;
+      dispatch({
+        type: "LOAD_OK",
+        roles: payload.data ?? [],
+        total: payload.meta?.total ?? payload.pagination?.total ?? 0,
+        pages: payload.meta?.pages ?? payload.pagination?.pages ?? 1,
+      });
+    } catch {
+      dispatch({
+        type: "LOAD_ERR",
+        error: "تعذّر تحميل بيانات الأدوار. يرجى المحاولة مجدداً.",
+      });
+    }
+  }, []);
+
+  // ── Load permissions on mount ────────────────────────────────────────────────
+  useEffect(() => {
+    const token = getStoredToken();
+    roleService
+      .getPermissions(token)
+      .then((res) => {
+        //console.log("permissions response:", JSON.stringify(res, null, 2));
+        const raw = (
+          res as unknown as { data: { premissions: { data: Permission[] } } }
+        ).data;
+        setPermissions(raw?.premissions?.data ?? []);
+      })
+      .catch(() => {});
+  }, []);
+
+  // ── Reload when page / search changes ────────────────────────────────────────
+  useEffect(() => {
+    loadRoles(page, search);
+  }, [page, search, loadRoles]);
+
+  // ── CRUD actions ─────────────────────────────────────────────────────────────
+
+  const createRole = useCallback(
+    async (data: RoleFormData): Promise<boolean> => {
+      try {
+        const token = getStoredToken();
+        const res = await roleService.create(data, token);
+        const role = (res as unknown as { data: Role }).data;
+
+        // Assign permissions sequentially (backend handles individually)
+        for (const pid of data.permissionIds) {
+          try {
+            await roleService.assignPermission(role.id, pid, token);
+          } catch {
+            /* non-fatal: skip individual failures */
+          }
+        }
+
+        // Re-fetch to get fresh data with permissions attached
+        await loadRoles(page, search);
+        notify({
+          type: "success",
+          message: "تم إنشاء الدور وتعيين الصلاحيات بنجاح.",
+        });
+        return true;
+      } catch (err) {
+        notify({
+          type: "error",
+          message: err instanceof Error ? err.message : "تعذّر إنشاء الدور.",
+        });
+        return false;
+      }
+    },
+    [page, search, loadRoles, notify],
+  );
+
+  const updateRole = useCallback(
+    async (
+      id: string,
+      data: RoleFormData,
+      currentPermIds: string[],
+    ): Promise<boolean> => {
+      try {
+        const token = getStoredToken();
+        // Update basic fields
+        await roleService.update(id, data, token);
+
+        // Diff permissions: add new, remove removed
+        const toAdd = data.permissionIds.filter(
+          (p) => !currentPermIds.includes(p),
+        );
+        const toRemove = currentPermIds.filter(
+          (p) => !data.permissionIds.includes(p),
+        );
+
+        for (const pid of toAdd) {
+          try {
+            await roleService.assignPermission(id, pid, token);
+          } catch {
+            /* skip */
+          }
+        }
+        for (const pid of toRemove) {
+          try {
+            await roleService.removePermission(id, pid, token);
+          } catch {
+            /* skip */
+          }
+        }
+
+        await loadRoles(page, search);
+        notify({
+          type: "success",
+          message: "تم تحديث الدور والصلاحيات بنجاح.",
+        });
+        return true;
+      } catch (err) {
+        notify({
+          type: "error",
+          message: err instanceof Error ? err.message : "تعذّر تحديث الدور.",
+        });
+        return false;
+      }
+    },
+    [page, search, loadRoles, notify],
+  );
+
+  const deleteRole = useCallback(
+    async (id: string): Promise<boolean> => {
+      try {
+        const token = getStoredToken();
+        await roleService.delete(id, token);
+        dispatch({ type: "DELETE", id });
+        notify({ type: "success", message: "تم حذف الدور بنجاح." });
+        return true;
+      } catch (err) {
+        notify({
+          type: "error",
+          message: err instanceof Error ? err.message : "تعذّر حذف الدور.",
+        });
+        return false;
+      }
+    },
+    [notify],
+  );
+const updateRolePermissionsBulk = useCallback(
+  async (roleId: string, permissionIds: string[]): Promise<boolean> => {
+    try {
+      const token = getStoredToken();
+      const res = await roleService.setPermissions(roleId, permissionIds, token);
+      const updated = (res as unknown as { data: Role }).data;
+      dispatch({ type: "UPDATE", role: updated });
+      notify({ type: "success", message: "تم تحديث صلاحيات الدور بنجاح." });
+      return true;
+    } catch (err) {
+      notify({
+        type: "error",
+        message: err instanceof Error ? err.message : "تعذّر تحديث صلاحيات الدور.",
+      });
+      return false;
+    }
+  },
+  [notify],
+);
+
+
+  const handleSearch = useCallback((q: string) => {
+    setSearch(q);
+    setPage(1);
+  }, []);
+
+  return {
+    ...state,
+    permissions,
+    page,
+    search,
+    setPage,
+    handleSearch,
+    clearError: () => dispatch({ type: "CLEAR_ERR" }),
+    createRole,
+    updateRole,
+    deleteRole,
+    updateRolePermissionsBulk,
+    notification,
+    
+  };
+}
diff --git a/src/hooks/useTrip.ts b/src/hooks/useTrip.ts
new file mode 100644
index 0000000..ae5a879
--- /dev/null
+++ b/src/hooks/useTrip.ts
@@ -0,0 +1,227 @@
+"use client";
+
+import { useCallback, useEffect, useReducer, useRef, useState } from "react";
+import { getStoredToken } from "@/src/lib/auth";
+import { tripService } from "@/src/services/trip.service";
+import type { Trip, TripStatus, CreateTripPayload, UpdateTripPayload } from "@/src/types/trip";
+
+// ── Notification type ──────────────────────────────────────────────────────
+
+export interface TripNotification {
+  type: "success" | "error";
+  message: string;
+}
+
+// ── API error extractor ────────────────────────────────────────────────────
+// Walks common API error shapes to pull the real backend message.
+// Falls back to the provided default only when nothing useful is found.
+
+function extractApiMessage(err: unknown, fallback: string): string {
+  if (typeof err === "string" && err.trim()) return err.trim();
+
+  if (err && typeof err === "object") {
+    const e = err as Record<string, unknown>;
+
+    // Shape: { response: { data: { message: string } } }  (axios-style)
+    const responseData = (e["response"] as Record<string, unknown> | undefined)?.["data"];
+    if (responseData && typeof responseData === "object") {
+      const rd = responseData as Record<string, unknown>;
+      if (typeof rd["message"] === "string" && rd["message"].trim()) return rd["message"];
+      if (Array.isArray(rd["message"])) return (rd["message"] as string[]).join(" — ");
+      if (typeof rd["error"] === "string" && rd["error"].trim()) return rd["error"];
+    }
+
+    // Shape: { message: string }  (plain Error / fetch wrapper)
+    if (typeof e["message"] === "string" && e["message"].trim()) return e["message"];
+  }
+
+  return fallback;
+}
+
+// ── Table state / reducer ──────────────────────────────────────────────────
+
+interface TableState {
+  trips: Trip[];
+  loading: boolean;
+  total: number;
+  pages: number;
+  error: string | null;
+}
+
+type TableAction =
+  | { type: "LOAD_START" }
+  | { type: "LOAD_OK"; trips: Trip[]; total: number; pages: number }
+  | { type: "LOAD_ERR"; error: string }
+  | { type: "ADD";    trip: Trip }
+  | { type: "UPDATE"; trip: Trip }
+  | { type: "DELETE"; id: string }
+  | { type: "CLEAR_ERR" };
+
+function reducer(s: TableState, a: TableAction): TableState {
+  switch (a.type) {
+    case "LOAD_START":  return { ...s, loading: true, error: null };
+    case "LOAD_OK":     return { ...s, loading: false, trips: a.trips, total: a.total, pages: a.pages };
+    case "LOAD_ERR":    return { ...s, loading: false, error: a.error };
+    case "ADD":         return { ...s, trips: [a.trip, ...s.trips], total: s.total + 1 };
+    case "UPDATE":      return { ...s, trips: s.trips.map(t => (t.id === a.trip.id ? a.trip : t)) };
+    case "DELETE":      return { ...s, trips: s.trips.filter(t => t.id !== a.id) };
+    case "CLEAR_ERR":   return { ...s, error: null };
+    default:            return s;
+  }
+}
+
+const initialState: TableState = {
+  trips: [],
+  loading: true,
+  total: 0,
+  pages: 1,
+  error: null,
+};
+
+// ── Main hook ──────────────────────────────────────────────────────────────
+
+export function useTrips() {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const [search, setSearch] = useState("");
+  const [status, setStatus] = useState<TripStatus | "">("");
+  const [page, setPage]     = useState(1);
+  const [notification, setNotification] = useState<TripNotification | null>(null);
+
+  // Ref so the dismiss timer can be cleared if a new notification arrives
+  // before the previous one expires — prevents stale-closure memory leaks.
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const notify = useCallback((n: TripNotification) => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setNotification(n);
+    timerRef.current = setTimeout(() => setNotification(null), 4000);
+  }, []);
+
+  // Clear pending timer on unmount
+  useEffect(() => () => { if (timerRef.current) clearTimeout(timerRef.current); }, []);
+
+  // ── Fetch trips ───────────────────────────────────────────────────────────
+
+  const loadTrips = useCallback(
+    async (p: number, q: string, st: TripStatus | "") => {
+      dispatch({ type: "LOAD_START" });
+      try {
+        const token = getStoredToken();
+        const res = await tripService.getAll(
+          { page: p, limit: 12, search: q || undefined, status: st || undefined },
+          token,
+        );
+        const payload = (
+          res as unknown as {
+            data: { data: Trip[]; pagination?: { total: number; totalPages: number } };
+          }
+        ).data ?? res;
+
+        dispatch({
+          type: "LOAD_OK",
+          trips: payload.data ?? [],
+          total: payload.pagination?.total ?? 0,
+          pages: payload.pagination?.totalPages ?? 1,
+        });
+      } catch (err) {
+        dispatch({
+          type: "LOAD_ERR",
+          error: extractApiMessage(err, "تعذّر تحميل بيانات الرحلات. يرجى المحاولة مجدداً."),
+        });
+      }
+    },
+    [],
+  );
+
+  useEffect(() => {
+    loadTrips(page, search, status);
+  }, [page, search, status, loadTrips]);
+
+  // ── Create ────────────────────────────────────────────────────────────────
+
+  const createTrip = useCallback(
+    async (payload: CreateTripPayload): Promise<boolean> => {
+      try {
+        const token = getStoredToken();
+        const res = await tripService.create(payload, token);
+        const newTrip = (res as unknown as { data: Trip }).data;
+        dispatch({ type: "ADD", trip: newTrip });
+        notify({ type: "success", message: "تم إضافة الرحلة بنجاح." });
+        return true;
+      } catch (err) {
+        notify({ type: "error", message: extractApiMessage(err, "تعذّر إضافة الرحلة.") });
+        return false;
+      }
+    },
+    [notify],
+  );
+
+  // ── Update ────────────────────────────────────────────────────────────────
+
+  const updateTrip = useCallback(
+    async (id: string, payload: UpdateTripPayload): Promise<boolean> => {
+      try {
+        const token = getStoredToken();
+        const res = await tripService.update(id, payload, token);
+        const updated = (res as unknown as { data: Trip }).data;
+        dispatch({ type: "UPDATE", trip: updated });
+        notify({ type: "success", message: "تم تحديث بيانات الرحلة بنجاح." });
+        return true;
+      } catch (err) {
+        notify({ type: "error", message: extractApiMessage(err, "تعذّر تحديث الرحلة.") });
+        return false;
+      }
+    },
+    [notify],
+  );
+
+  // ── Delete ────────────────────────────────────────────────────────────────
+
+  const deleteTrip = useCallback(
+    async (id: string): Promise<boolean> => {
+      try {
+        const token = getStoredToken();
+        await tripService.delete(id, token);
+        dispatch({ type: "DELETE", id });
+        notify({ type: "success", message: "تم حذف الرحلة بنجاح." });
+        return true;
+      } catch (err) {
+        notify({ type: "error", message: extractApiMessage(err, "تعذّر حذف الرحلة.") });
+        return false;
+      }
+    },
+    [notify],
+  );
+
+  // ── Helpers ───────────────────────────────────────────────────────────────
+
+  const handleSearch = useCallback((q: string) => {
+    setSearch(q);
+    setPage(1);
+  }, []);
+
+  const handleStatusFilter = useCallback((s: TripStatus | "") => {
+    setStatus(s);
+    setPage(1);
+  }, []);
+
+  return {
+    ...state,
+    page,
+    search,
+    status,
+    setPage,
+    handleSearch,
+    handleStatusFilter,
+    clearError: () => dispatch({ type: "CLEAR_ERR" }),
+    createTrip,
+    updateTrip,
+    deleteTrip,
+    notification,
+    dismissNotification: () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      setNotification(null);
+    },
+    reload: () => loadTrips(page, search, status),
+  };
+}
\ No newline at end of file
diff --git a/hooks/useUser.ts b/src/hooks/useUser.ts
similarity index 90%
rename from hooks/useUser.ts
rename to src/hooks/useUser.ts
index 1186eee..88e3d09 100644
--- a/hooks/useUser.ts
+++ b/src/hooks/useUser.ts
@@ -1,22 +1,19 @@
 "use client";
 
 import { useCallback, useEffect, useReducer, useState } from "react";
-import { getStoredToken } from "../lib/auth";
-import { userService } from "../services/user.service";
-import type { Branch } from "../types/branch";
-import type { Role } from "../types/role";
+import { getStoredToken } from "@/src/lib/auth";
+import { userService } from "@/src/services/user.service";
+import type { Branch } from "@/src/types/branch";
+import type { Role } from "@/src/types/role";
 import type {
   TableAction,
   TableState,
   User,
   UserFormData,
-} from "../types/user";
+} from "@/src/types/user";
+import type { ToastNotification } from "@/src/Components/UI"
 
-// ── message taype─────────────────────────────────────────
-export interface Notification {
-  type: "success" | "error";
-  message: string;
-}
+export type Notification = ToastNotification;
 
 // ── Reducer  ──────────────────────────────────────
 function tableReducer(s: TableState, a: TableAction): TableState {
@@ -44,10 +41,10 @@ export function useUsers() {
   const [page, setPage]           = useState(1);
   const [roles, setRoles]         = useState<Role[]>([]);
   const [branches, setBranches]   = useState<Branch[]>([]);
-  const [notification, setNotification] = useState<Notification | null>(null);
+  const [notification, setNotification] = useState<ToastNotification | null>(null);
 
   //        notify with auto-dismiss after 4s 
-  const notify = useCallback((n: Notification) => {
+  const notify = useCallback((n: ToastNotification) => {
     setNotification(n);
     setTimeout(() => setNotification(null), 4000);
   }, []);
diff --git a/lib/api.ts b/src/lib/api.ts
similarity index 100%
rename from lib/api.ts
rename to src/lib/api.ts
diff --git a/lib/auth.ts b/src/lib/auth.ts
similarity index 58%
rename from lib/auth.ts
rename to src/lib/auth.ts
index b6ae914..25f107d 100644
--- a/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -1,11 +1,11 @@
-import { authService }   from "@/services/auth.service";
-import type { AuthUser } from "@/types/auth";
+import { authService } from "@/src/services/auth.service";
+import type { AuthUser } from "@/src/types/auth";
 
 const AUTH_TOKEN_KEY    = "auth_token";
 const AUTH_USER_KEY     = "auth_user";
 const AUTH_TOKEN_COOKIE = "auth_token";
 
-// ─── Cookie helpers ───────────────────────────
+// ── Cookie helpers ─────────────────────────────────────────────────────────
 function setTokenCookie(token: string) {
   if (typeof document === "undefined") return;
   const exp = new Date(Date.now() + 7 * 864e5).toUTCString();
@@ -17,7 +17,7 @@ function deleteTokenCookie() {
   document.cookie = `${AUTH_TOKEN_COOKIE}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`;
 }
 
-// ─── Storage ──────────────────────────────────
+// ── Storage ────────────────────────────────────────────────────────────────
 export function getStoredToken(): string | null {
   if (typeof window === "undefined") return null;
   return localStorage.getItem(AUTH_TOKEN_KEY);
@@ -37,24 +37,33 @@ export function saveAuth(token: string, user: AuthUser) {
   setTokenCookie(token);
 }
 
-export function clearAuth() {
-  if (typeof window === "undefined") return;
-  localStorage.removeItem(AUTH_TOKEN_KEY);
-  localStorage.removeItem(AUTH_USER_KEY);
-  deleteTokenCookie();
+/**
+ * Clear auth state: removes localStorage keys, calls /api/clear-cookie to
+ * remove the HttpOnly cookie (only the server can delete an HttpOnly cookie).
+ */
+export async function clearAuth(): Promise<void> {
+  if (typeof window !== "undefined") {
+    localStorage.removeItem(AUTH_TOKEN_KEY);
+    localStorage.removeItem(AUTH_USER_KEY);
+    deleteTokenCookie();
+  }
+  try {
+    await fetch("/api/clear-cookie", { method: "POST", cache: "no-store" });
+  } catch {
+    // Best-effort — if the network call fails the cookie will expire on its own
+  }
 }
 
-// ─── Blocked roles ────────────────────────────
+// ── Blocked roles ──────────────────────────────────────────────────────────
 const BLOCKED_ROLES = ["driver", "سائق"] as const;
 
-// ─── Login ────────────────────────────────────
+// ── Login ──────────────────────────────────────────────────────────────────
 type RawRole = { name?: string; permissions?: Array<{ permission?: { slug?: string } }> } | string;
 
 export async function loginUser(identity: string, password: string) {
   const payload = await authService.login({ identity, password });
 
   const { token, user } = payload.data || {};
-  console.log({ token, user } );
   if (!token || !user) {
     throw new Error("اسم المستخدم أو كلمة المرور غير صحيحة.");
   }
@@ -81,6 +90,17 @@ export async function loginUser(identity: string, password: string) {
         .filter((s): s is string => Boolean(s))
     : [];
 
+  // Store HttpOnly cookie via server endpoint
+  try {
+    await fetch("/api/auth/set-cookie", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ token }),
+    });
+  } catch {
+    // Non-fatal — middleware will still work if cookie was already set
+  }
+
   const fullUser: AuthUser = { ...user, role: roleName, permissions };
   saveAuth(token, fullUser);
   return { token, user: fullUser };
diff --git a/src/lib/formatters.ts b/src/lib/formatters.ts
new file mode 100644
index 0000000..a644240
--- /dev/null
+++ b/src/lib/formatters.ts
@@ -0,0 +1,41 @@
+/**
+ * Format an ISO date string as a localised Arabic date.
+ * @example fmtDate("2026-06-08T10:00:00Z") → "٨ يونيو ٢٠٢٦"
+ */
+export function fmtDate(iso?: string | null): string {
+  if (!iso) return "—";
+  return new Date(iso).toLocaleDateString("ar-SA", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+}
+
+/**
+ * Format an ISO date string as a long Arabic date.
+ * @example fmtDateLong("2026-06-08T10:00:00Z") → "٨ يونيو ٢٠٢٦"
+ */
+export function fmtDateLong(iso?: string | null): string {
+  if (!iso) return "—";
+  return new Date(iso).toLocaleDateString("ar-SA", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+}
+
+/**
+ * Format a numeric amount as Saudi Riyals.
+ * @example fmtAmount(1234.5) → "١٬٢٣٤٫٥٠ ر.س"
+ */
+export function fmtAmount(n: number): string {
+  return `${n.toFixed(2)} ر.س`;
+}
+
+/**
+ * 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;
+}
\ No newline at end of file
diff --git a/src/lib/order-status.ts b/src/lib/order-status.ts
new file mode 100644
index 0000000..cac3b18
--- /dev/null
+++ b/src/lib/order-status.ts
@@ -0,0 +1,42 @@
+// Single source of truth for order status display logic.
+// Imports OrderStatus from src/types/order (not the legacy helperFun).
+import type { OrderStatus } from "@/src/types/order";
+
+export type { OrderStatus };
+
+const STATUS_COLORS: Record<string, string> = {
+  Created:    "bg-blue-50 text-blue-700 border-blue-200",
+  Assigned:   "bg-purple-50 text-purple-700 border-purple-200",
+  InTransit:  "bg-amber-50 text-amber-700 border-amber-200",
+  Delivered:  "bg-emerald-50 text-emerald-700 border-emerald-200",
+  Returned:   "bg-red-50 text-red-600 border-red-200",
+  Cancelled:  "bg-slate-50 text-slate-600 border-slate-200",
+  // Legacy uppercase variants (client portal)
+  CREATED:    "bg-blue-50 text-blue-700 border-blue-200",
+  IN_TRANSIT: "bg-amber-50 text-amber-700 border-amber-200",
+  DELIVERED:  "bg-emerald-50 text-emerald-700 border-emerald-200",
+  CANCELLED:  "bg-red-50 text-red-600 border-red-200",
+};
+
+const STATUS_LABELS: Record<string, string> = {
+  Created:    "تم الإنشاء",
+  Assigned:   "مُعيَّن",
+  InTransit:  "قيد التوصيل",
+  Delivered:  "تم التسليم",
+  Returned:   "مُرتجع",
+  Cancelled:  "ملغي",
+  CREATED:    "تم الإنشاء",
+  IN_TRANSIT: "قيد التوصيل",
+  DELIVERED:  "تم التسليم",
+  CANCELLED:  "ملغي",
+};
+
+/** Tailwind class string for a status badge */
+export function statusColor(status: string): string {
+  return STATUS_COLORS[status] ?? "bg-slate-50 text-slate-600 border-slate-200";
+}
+
+/** Arabic label for a status */
+export function statusLabel(status: string): string {
+  return STATUS_LABELS[status] ?? status;
+}
\ No newline at end of file
diff --git a/lib/session.ts b/src/lib/session.ts
similarity index 90%
rename from lib/session.ts
rename to src/lib/session.ts
index 16b4552..25b90dc 100644
--- a/lib/session.ts
+++ b/src/lib/session.ts
@@ -8,7 +8,7 @@ export interface ClientSession {
   phone: string;
 }
 
-// ── Cookie helpers ────────────────────────────────────
+// ── Cookie helpers ─────────────────────────────────────────────────────────
 export function getCookie(name: string): string | null {
   if (typeof document === "undefined") return null;
   const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`));
@@ -24,7 +24,7 @@ export function deleteCookie(name: string) {
   document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`;
 }
 
-// ── Session read / write ──────────────────────────────
+// ── Session read / write ───────────────────────────────────────────────────
 export function loadSession(): ClientSession | null {
   try {
     const raw = typeof localStorage !== "undefined"
diff --git a/lib/utils.ts b/src/lib/utils.ts
similarity index 100%
rename from lib/utils.ts
rename to src/lib/utils.ts
diff --git a/middleware/middleware.ts b/src/middleware/middleware.ts
similarity index 100%
rename from middleware/middleware.ts
rename to src/middleware/middleware.ts
diff --git a/services/api.ts b/src/services/api.ts
similarity index 98%
rename from services/api.ts
rename to src/services/api.ts
index 683df8c..4721ed6 100644
--- a/services/api.ts
+++ b/src/services/api.ts
@@ -1,4 +1,4 @@
-import { requestJson } from "@/lib/api";
+import { requestJson } from "@/src/lib/api";
 
 function resolveBase() {
   if (typeof window === "undefined") {
diff --git a/services/auth.service.ts b/src/services/auth.service.ts
similarity index 92%
rename from services/auth.service.ts
rename to src/services/auth.service.ts
index 6a11d45..c9b32ef 100644
--- a/services/auth.service.ts
+++ b/src/services/auth.service.ts
@@ -1,5 +1,5 @@
 import { post } from "./api";
-import type { LoginResponse } from "../types/auth";
+import type { LoginResponse } from "@/src/types/auth";
 
 export interface LoginPayload {
   identity: string;
diff --git a/services/car.service.ts b/src/services/car.service.ts
similarity index 99%
rename from services/car.service.ts
rename to src/services/car.service.ts
index 0576e4e..463eb11 100644
--- a/services/car.service.ts
+++ b/src/services/car.service.ts
@@ -6,7 +6,7 @@ import type {
   CarImageListResponse,
   CreateCarPayload,
   UpdateCarPayload,
-} from "../types/car";
+} from "@/src/types/car";
 
 /** Build a query string for list endpoints */
 function buildQuery(params: Record<string, string | number | undefined>): string {
diff --git a/services/client.service.ts b/src/services/client.service.ts
similarity index 93%
rename from services/client.service.ts
rename to src/services/client.service.ts
index 9c76ec9..dd07c62 100644
--- a/services/client.service.ts
+++ b/src/services/client.service.ts
@@ -1,7 +1,7 @@
-// خدمة العملاء — كل نداءات الـ API الخاصة بالعملاء تكون هنا فقط
+
 // Mirrors user.service.ts exactly: token parameter, buildPayload, buildQuery.
 import { get, post, put, del } from "./api";
-import type { ApiResponse, ApiListResponse, Client, ClientFormData } from "../types/client";
+import type { ApiResponse, ApiListResponse, Client, ClientFormData } from "@/src/types/client";
 
 /** نوع الاستجابة لعملية واحدة على عميل */
 export interface ClientResponse {
diff --git a/services/clientAddress.service.ts b/src/services/clientAddress.service.ts
similarity index 93%
rename from services/clientAddress.service.ts
rename to src/services/clientAddress.service.ts
index b813630..efa6b5d 100644
--- a/services/clientAddress.service.ts
+++ b/src/services/clientAddress.service.ts
@@ -1,11 +1,10 @@
-// خدمة عناوين العملاء — كل نداءات الـ API الخاصة بالعناوين تكون هنا فقط
 // Mirrors user.service.ts pattern: explicit token param, buildPayload helper.
 import { get, post, put, patch, del } from "./api";
 import type {
   ApiResponse,
   ClientAddress,
   ClientAddressFormData,
-} from "../types/client";
+} from "@/src/types/client";
 
 const base = (clientId: string) => `client/${clientId}/addresses`;
 
diff --git a/services/dashboard.service.ts b/src/services/dashboard.service.ts
similarity index 69%
rename from services/dashboard.service.ts
rename to src/services/dashboard.service.ts
index 880c33b..7609f07 100644
--- a/services/dashboard.service.ts
+++ b/src/services/dashboard.service.ts
@@ -1,5 +1,5 @@
 import { get } from "./api";
-import type { DashboardSummaryResponse } from "../types/dashboard";
+import type { DashboardSummaryResponse } from "@/src/types/dashboard";
 
 export const dashboardService = {
   getSummary: (token: string) =>
diff --git a/src/services/driver.service.ts b/src/services/driver.service.ts
new file mode 100644
index 0000000..2a9c275
--- /dev/null
+++ b/src/services/driver.service.ts
@@ -0,0 +1,273 @@
+import { get, post, del, patch } from "./api";
+import type {
+  Driver,
+  DriverListResponse,
+  DriverDetailResponse,
+  DriverReportResponse,
+  CreateDriverPayload,
+  UpdateDriverPayload,
+} from "@/src/types/driver";
+
+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("&");
+}
+
+// ── Image URL normaliser ──────────────────────────────────────────────────────
+// Returns the URL as-is — <img> tags are not subject to CORS, so we can point
+// directly at the backend without a Next.js proxy hop.
+// Only strips query-string noise or fixes obviously malformed paths if needed.
+
+function normaliseImageUrl(url: string | null | undefined): string | null {
+  if (!url) return null;
+  return url;
+}
+
+function mapDriverImages<
+  T extends {
+    photoUrl?: string | null;
+    nationalPhotoUrl?: string | null;
+    driverCardPhotoUrl?: string | null;
+  },
+>(driver: T): T {
+  return {
+    ...driver,
+    photoUrl:           normaliseImageUrl(driver.photoUrl),
+    nationalPhotoUrl:   normaliseImageUrl(driver.nationalPhotoUrl),
+    driverCardPhotoUrl: normaliseImageUrl(driver.driverCardPhotoUrl),
+  };
+}
+
+
+
+// ── Image compression ─────────────────────────────────────────────────────────
+// Resizes to max 1024px while preserving the original file type and name.
+
+async function compressImage(file: File, maxPx = 1024, quality = 0.82): Promise<File> {
+  return new Promise((resolve) => {
+    const img = new Image();
+    const objectUrl = URL.createObjectURL(file);
+
+    img.onload = () => {
+      URL.revokeObjectURL(objectUrl);
+
+      let { width, height } = img;
+
+      // Guard: malformed/zero-dimension image — bail out to original file
+      if (!width || !height) {
+        resolve(file);
+        return;
+      }
+
+      // Only resize if actually oversized
+      if (width <= maxPx && height <= maxPx) {
+        resolve(file);
+        return;
+      }
+
+      if (width >= height) {
+        height = Math.round((height / width) * maxPx);
+        width  = maxPx;
+      } else {
+        width  = Math.round((width / height) * maxPx);
+        height = maxPx;
+      }
+
+      const canvas = document.createElement("canvas");
+      canvas.width  = width;
+      canvas.height = height;
+
+      const ctx = canvas.getContext("2d");
+      if (!ctx) { resolve(file); return; }
+
+      // PNG/GIF have transparency — paint white behind them first so toBlob
+      // doesn't hand back a canvas with undefined/black fill in some browsers.
+      // (Skip this for formats that don't carry alpha, like plain JPEG.)
+      const mimeType = file.type || "image/jpeg";
+      if (mimeType !== "image/jpeg") {
+        ctx.fillStyle = "#FFFFFF";
+        ctx.fillRect(0, 0, width, height);
+      }
+
+      ctx.drawImage(img, 0, 0, width, height);
+
+      // quality param is meaningless (and occasionally mishandled) for
+      // lossless formats — only pass it for jpeg/webp.
+      const isLossy = mimeType === "image/jpeg" || mimeType === "image/webp";
+
+      canvas.toBlob(
+        (blob) => {
+          // Guard: empty/undersized blob means the encode failed — fall
+          // back to the original file rather than uploading garbage.
+          if (!blob || blob.size < 100) {
+            resolve(file);
+            return;
+          }
+          resolve(new File([blob], file.name, { type: mimeType, lastModified: Date.now() }));
+        },
+        mimeType,
+        isLossy ? quality : undefined,
+      );
+    };
+
+    img.onerror = () => { URL.revokeObjectURL(objectUrl); resolve(file); };
+    img.src = objectUrl;
+  });
+}
+
+async function compressPayloadImages<
+  T extends { photo?: File; nationalPhoto?: File; driverCardPhoto?: File },
+>(payload: T): Promise<T> {
+  const result = { ...payload };
+  if (result.photo)           result.photo           = await compressImage(result.photo);
+  if (result.nationalPhoto)   result.nationalPhoto   = await compressImage(result.nationalPhoto);
+  if (result.driverCardPhoto) result.driverCardPhoto = await compressImage(result.driverCardPhoto);
+  return result;
+}
+
+// ── Service ───────────────────────────────────────────────────────────────────
+
+export const driverService = {
+  /** GET /driver — paginated + searchable list */
+  getAll: async (page = 1, search = "", token: string | null): Promise<DriverListResponse> => {
+    const res = await get<DriverListResponse>(
+      `driver${buildQuery({ page, limit: 12, search: search || undefined })}`,
+      token,
+    );
+    const body = (res as unknown as { data: { data: Driver[]; pagination: unknown; meta?: unknown } }).data;
+    body.data = body.data.map(mapDriverImages);
+    return res;
+  },
+
+  /** GET /driver/archived */
+  getArchived: async (token: string | null): Promise<DriverListResponse> => {
+    const res = await get<DriverListResponse>("driver/archived", token);
+    const body = (res as unknown as { data: { data: Driver[] } }).data;
+    body.data = body.data.map(mapDriverImages);
+    return res;
+  },
+
+  /** GET /driver/me */
+  getMe: async (token: string | null): Promise<DriverDetailResponse> => {
+    const res = await get<DriverDetailResponse>("driver/me", token);
+    const body = res as unknown as { data: Driver };
+    body.data = mapDriverImages(body.data);
+    return res;
+  },
+
+  /** GET /driver/:id */
+  getById: async (id: string, token: string | null): Promise<DriverDetailResponse> => {
+    const res = await get<DriverDetailResponse>(`driver/${id}`, token);
+    const body = res as unknown as { data: Driver };
+    body.data = mapDriverImages(body.data);
+    return res;
+  },
+
+  /** POST /driver  (JSON — no files) */
+  create: (payload: CreateDriverPayload, token: string | null) =>
+    post<{ data: Driver }>("driver", payload, token),
+
+  /** PATCH /driver/:id  (JSON — no files) */
+  update: async (id: string, payload: UpdateDriverPayload, token: string | null): Promise<{ data: Driver }> => {
+    const res = await patch<{ data: Driver }>(`driver/${id}`, payload, token);
+    const body = res as unknown as { data: Driver };
+    body.data = mapDriverImages(body.data);
+    return res;
+  },
+
+  /** DELETE /driver/:id */
+  delete: (id: string, token: string | null) =>
+    del<void>(`driver/${id}`, token),
+
+  /** GET /drivers/:id/reports/daily?date=YYYY-MM-DD */
+  getDailyReport: (id: string, date: string, token: string | null) =>
+    get<DriverReportResponse>(
+      `drivers/${id}/reports/daily?date=${encodeURIComponent(date)}`,
+      token,
+    ),
+
+  // ── Multipart helpers (with auto compression) ─────────────────────────────
+
+  /**
+   * POST /driver  (multipart/form-data)
+   * Compresses images before upload to stay under backend LIMIT_FILE_SIZE.
+   */
+  createWithImages: async (
+    payload: CreateDriverPayload & {
+      photo?: File;
+      nationalPhoto?: File;
+      driverCardPhoto?: File;
+    },
+    token: string | null,
+  ): Promise<{ data: Driver }> => {
+    const compressed = await compressPayloadImages(payload);
+
+    const form = new FormData();
+    Object.entries(compressed).forEach(([key, val]) => {
+      if (val !== undefined && val !== null && !(val instanceof File)) {
+        form.append(key, String(val));
+      }
+    });
+    if (compressed.photo)           form.append("photo",           compressed.photo);
+    if (compressed.nationalPhoto)   form.append("nationalPhoto",   compressed.nationalPhoto);
+    if (compressed.driverCardPhoto) form.append("driverCardPhoto", compressed.driverCardPhoto);
+
+    const res = await fetch("/api/proxy/driver", {
+      method: "POST",
+      headers: token ? { Authorization: `Bearer ${token}` } : {},
+      body: form,
+      cache: "no-store",
+    });
+
+    if (!res.ok) {
+      const json = await res.json().catch(() => null);
+      throw new Error(json?.message ?? `HTTP ${res.status}`);
+    }
+    const data = await res.json() as { data: Driver };
+    data.data = mapDriverImages(data.data);
+    return data;
+  },
+
+  /**
+   * PATCH /driver/:id  (multipart/form-data)
+   * Compresses images before upload to stay under backend LIMIT_FILE_SIZE.
+   */
+  updateWithImages: async (
+    id: string,
+    payload: UpdateDriverPayload & {
+      photo?: File;
+      nationalPhoto?: File;
+      driverCardPhoto?: File;
+    },
+    token: string | null,
+  ): Promise<{ data: Driver }> => {
+    const compressed = await compressPayloadImages(payload);
+
+    const form = new FormData();
+    Object.entries(compressed).forEach(([key, val]) => {
+      if (val !== undefined && val !== null && !(val instanceof File)) {
+        form.append(key, String(val));
+      }
+    });
+    if (compressed.photo)           form.append("photo",           compressed.photo);
+    if (compressed.nationalPhoto)   form.append("nationalPhoto",   compressed.nationalPhoto);
+    if (compressed.driverCardPhoto) form.append("driverCardPhoto", compressed.driverCardPhoto);
+
+    const res = await fetch(`/api/proxy/driver/${id}`, {
+      method: "PATCH",
+      // Do NOT set Content-Type — browser sets it with the correct boundary
+      headers: token ? { Authorization: `Bearer ${token}` } : {},
+      body: form,
+      cache: "no-store",
+    });
+
+    if (!res.ok) {
+      const json = await res.json().catch(() => null);
+      throw new Error(json?.message ?? `HTTP ${res.status}`);
+    }
+    const data = await res.json() as { data: Driver };
+    data.data = mapDriverImages(data.data);
+    return data;
+  },
+};
\ No newline at end of file
diff --git a/src/services/index.ts b/src/services/index.ts
new file mode 100644
index 0000000..fc4987f
--- /dev/null
+++ b/src/services/index.ts
@@ -0,0 +1,11 @@
+export { request, get, post, put, patch, del, ApiError } from "./api";
+export { authService } from "./auth.service";
+export { dashboardService } from "./dashboard.service";
+export { clientService } from "./client.service";
+export { clientAddressService } from "./clientAddress.service";
+export { userService } from "./user.service";
+export { carService } from "./car.service";
+export { driverService } from "./driver.service";
+export { tripService } from "./trip.service";
+export { orderService } from "./order.service";
+export { roleService } from "./role.service";
\ No newline at end of file
diff --git a/services/order.service.ts b/src/services/order.service.ts
similarity index 97%
rename from services/order.service.ts
rename to src/services/order.service.ts
index 3b51c8f..17be401 100644
--- a/services/order.service.ts
+++ b/src/services/order.service.ts
@@ -7,7 +7,7 @@ import type {
   UpdateOrderStatusPayload,
   TransferOrderPayload,
   OrdersResponse,
-} from "../types/order";
+} from "@/src/types/order";
 
 export const orderService = {
   /** Get all orders (paginated) */
diff --git a/src/services/role.service.ts b/src/services/role.service.ts
new file mode 100644
index 0000000..d9c2c54
--- /dev/null
+++ b/src/services/role.service.ts
@@ -0,0 +1,95 @@
+import { requestJson } from "@/src/lib/api";
+import { get, post, put, del, patch } from "./api";
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export interface Permission {
+  id: string;
+  name: string;
+  slug: string;
+  module: string;
+}
+
+export interface Role {
+  id: string;
+  name: string;
+  description?: string;
+  isActive: boolean;
+  createdAt: string;
+  updatedAt?: string;
+  permissions?: Array<{
+    permission: Permission;
+  }>;
+}
+
+export interface RoleFormData {
+  name: string;
+  description: string;
+  permissionIds: string[];
+}
+
+export interface ApiPaginatedResponse<T> {
+  data: {
+    data: T[];
+    pagination?: { total: number; page: number; pages: number };
+    meta?: { total: number; pages: number };
+  };
+}
+
+export interface RoleResponse {
+  data: Role;
+}
+
+export interface PermissionsResponse {
+  data: {
+    premissions: Permission[];
+  };
+}
+
+/** Build query string for paginated role listing */
+function buildRolesQuery(page: number, search: string): string {
+  return `?page=${page}&limit=10${search ? `&search=${encodeURIComponent(search)}` : ""}`;
+}
+
+export const roleService = {
+  /** Fetch paginated roles list */
+  getAll: (page: number, search: string, token: string | null) =>
+    get<ApiPaginatedResponse<Role>>(`role${buildRolesQuery(page, search)}`, token),
+
+  /** Fetch a single role by ID (includes permissions) */
+  getById: (id: string, token: string | null) =>
+    get<{ data: Role }>(`role/${id}`, token),
+
+  /** Create a new role */
+  create: (data: RoleFormData, token: string | null) =>
+  post<RoleResponse>("role", { name: data.name, description: data.description }, token),
+
+
+  /** Update role name/description */
+  update: (id: string, data: Partial<RoleFormData>, token: string | null) =>
+  put<RoleResponse>(`role/${id}`, { name: data.name, description: data.description }, token),
+
+
+  /** Soft-delete a role */
+  delete: (id: string, token: string | null) =>
+    del<void>(`role/${id}`, token),
+
+  /** Fetch all available permissions for checkbox list */
+  getPermissions: (token: string | null) =>
+    get<PermissionsResponse>("premission?limit=200", token),
+
+  /** Assign a single permission to a role */
+  assignPermission: (roleId: string, permissionId: string, token: string | null) =>
+    post<unknown>(`role/${roleId}/permissions`, { permissionId }, token),
+
+  /** Remove a permission from a role */
+  removePermission: (roleId: string, permissionId: string, token: string | null) =>
+    del<unknown>(`role/${roleId}/permissions/${permissionId}`, token),
+  /** Atomically replace all permissions assigned to a role */
+  setPermissions: (roleId: string, permissionIds: string[], token: string | null) =>
+    patch<{ data: Role }>(`role/${roleId}/permissions`, {
+      method: "PATCH",
+      body: JSON.stringify({ permissionIds }),
+    }, token),
+  
+};
diff --git a/services/trip.service.ts b/src/services/trip.service.ts
similarity index 73%
rename from services/trip.service.ts
rename to src/services/trip.service.ts
index 9219ffb..fd91b28 100644
--- a/services/trip.service.ts
+++ b/src/services/trip.service.ts
@@ -1,8 +1,3 @@
-// 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,
@@ -12,7 +7,7 @@ import type {
   CreateTripPayload,
   UpdateTripPayload,
   TripListParams,
-} from "@/types/trip";
+} from "@/src/types/trip";
 
 /** Build a query string for list endpoints */
 function buildQuery(
@@ -32,48 +27,48 @@ function buildQuery(
 
 export const tripService = {
   /**
-   * GET /trips
+   * GET /trip
    * Fetch paginated + filterable + searchable trip list.
    * Requires: "read-trip" permission
    */
   getAll: (params: TripListParams = {}, token: string | null) =>
-    get<TripListResponse>(`trips${buildQuery({ ...params })}`, token),
+    get<TripListResponse>(`trip${buildQuery({ ...params })}`, token),
 
   /**
-   * GET /trips/archived
+   * GET /trip/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<TripListResponse>(`trip/archived${buildQuery({ ...params })}`, token),
 
   /**
-   * GET /trips/archived/:id
+   * GET /trip/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<TripDetailResponse>(`trip/archived/${id}`, token),
 
   /**
-   * GET /trips/:id
+   * GET /trip/: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),
+    get<TripDetailResponse>(`trip/${id}`, token),
 
   /**
-   * POST /trips
+   * POST /trip
    * 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),
+    post<{ data: Trip }>("trip", payload, token),
 
   /**
-   * PATCH /trips/:id
+   * PATCH /trip/:id
    * Update trip data / status / reassign driver or car.
    * Side effects:
    *  - changing driverId: old driver -> Active, new driver -> InTrip
@@ -82,33 +77,33 @@ export const tripService = {
    * Requires: "update-trip" permission
    */
   update: (id: string, payload: UpdateTripPayload, token: string | null) =>
-    patch<{ data: Trip }>(`trips/${id}`, payload, token),
+    patch<{ data: Trip }>(`trip/${id}`, payload, token),
 
   /**
-   * DELETE /trips/:id
+   * DELETE /trip/: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),
+    del<void>(`trip/${id}`, token),
 
   // ── Reports ───────────────────────────────────────────────────────────────
 
   /**
-   * GET /trips/:id/reports
+   * GET /trip/: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<TripReportResponse>(`trip/${id}/reports`, token),
 
   /**
-   * GET /trips/:id/reports/client/:clientId
+   * GET /trip/: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),
+    get<TripReportResponse>(`trip/${id}/reports/client/${clientId}`, token),
 };
\ No newline at end of file
diff --git a/services/user.service.ts b/src/services/user.service.ts
similarity index 93%
rename from services/user.service.ts
rename to src/services/user.service.ts
index 4a9724f..89bd081 100644
--- a/services/user.service.ts
+++ b/src/services/user.service.ts
@@ -1,8 +1,8 @@
 // خدمة المستخدمين — كل نداءات الـ API الخاصة بالمستخدمين تكون هنا فقط
 import { get, post, put, del } from "./api";
-import type { ApiListResponse, User, UserFormData } from "../types/user";
-import type { Role } from "../types/role";
-import type { Branch } from "../types/branch";
+import type { ApiListResponse, User, UserFormData } from "@/src/types/user";
+import type { Role } from "@/src/types/role";
+import type { Branch } from "@/src/types/branch";
 
 /** نوع الاستجابة لعملية واحدة على مستخدم */
 export interface UserResponse {
diff --git a/styles/tokens.css b/src/styles/tokens.css
similarity index 60%
rename from styles/tokens.css
rename to src/styles/tokens.css
index 10d7310..e8fedbf 100644
--- a/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -13,7 +13,11 @@
   --color-brand-800:  #1E3A8A;
   --color-brand-900:  #172554;
 
-  /* ── Sidebar gradient stops ── */
+  /* ── Sidebar gradient stops ──
+     NOTE: kept as named stops only (top/mid/bottom), never left/right,
+     so the gradient direction is safe to reuse unchanged in RTL. The
+     gradient in Sidebar.tsx already runs top→bottom (175deg), which is
+     direction-agnostic — no change needed for RTL. */
   --sidebar-grad-top:    #1E3A8A;
   --sidebar-grad-mid:    #1D4ED8;
   --sidebar-grad-bottom: #1565C0;
@@ -79,11 +83,16 @@
   --radius-full: 9999px;
 
   /* ── Layout ── */
-  --sidebar-width:   240px;
-  --topbar-height:    56px;
-  --page-padding-x:   24px;
+  --sidebar-width:         240px;
+  --sidebar-width-compact:  72px;  /* NEW: collapsed icon rail for md/sm screens */
+  --topbar-height:          56px;
+  --page-padding-x:         24px;
 
-  /* ── Shadows ── */
+  /* ── Shadows ──
+     NOTE: shadows here are blur+spread only (no x-offset), so they are
+     already direction-neutral and need no RTL variant. If a future
+     shadow ever needs an x-offset, derive it from `--start`/`--end`
+     rather than hardcoding a flipped value inline. */
   --shadow-card:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
   --shadow-overlay: 0 10px 40px rgba(0,0,0,.1);
 
@@ -93,4 +102,39 @@
 
 @media (prefers-reduced-motion: reduce) {
   .animate-spin { animation: none; }
+}
+
+/* ──────────────────────────────────────────────────────
+   RTL / LTR direction layer
+   Toggled by `dir="rtl"` / `dir="ltr"` on <html> (set in the
+   root app/layout.tsx). Everything below uses CSS logical
+   properties so it self-flips with the `dir` attribute —
+   no JS, no duplicate stylesheets, no per-component branching.
+   ────────────────────────────────────────────────────── */
+
+[dir="rtl"] {
+  --start: right;
+  --end: left;
+}
+
+[dir="ltr"],
+:root {
+  --start: left;
+  --end: right;
+}
+
+/* Utility for any inline-direction border that previously assumed LTR
+   (e.g. a left border used as "this edge touches the rail"). */
+.border-inline-start {
+  border-inline-start: 1px solid var(--color-border-dark);
+  border-inline-end: none;
+}
+
+/* Numerals, codes, and API paths read LTR even inside an RTL document
+   (see Edge Cases in the report). Apply to any inline span wrapping
+   such content. */
+.ltr-embed {
+  direction: ltr;
+  unicode-bidi: isolate;
+  display: inline-block;
 }
\ No newline at end of file
diff --git a/types/auth.ts b/src/types/auth.ts
similarity index 100%
rename from types/auth.ts
rename to src/types/auth.ts
diff --git a/types/branch.ts b/src/types/branch.ts
similarity index 100%
rename from types/branch.ts
rename to src/types/branch.ts
diff --git a/types/car.ts b/src/types/car.ts
similarity index 99%
rename from types/car.ts
rename to src/types/car.ts
index 5c3c548..6a985c8 100644
--- a/types/car.ts
+++ b/src/types/car.ts
@@ -1,4 +1,4 @@
-// types/car.ts
+
 // All TypeScript interfaces for the Car module.
 
 export type CarStatus = "Active" | "InMaintenance" | "InTrip" | "Inactive";
diff --git a/types/client.ts b/src/types/client.ts
similarity index 100%
rename from types/client.ts
rename to src/types/client.ts
diff --git a/types/dashboard.ts b/src/types/dashboard.ts
similarity index 100%
rename from types/dashboard.ts
rename to src/types/dashboard.ts
diff --git a/types/driver.ts b/src/types/driver.ts
similarity index 100%
rename from types/driver.ts
rename to src/types/driver.ts
diff --git a/types/order.ts b/src/types/order.ts
similarity index 100%
rename from types/order.ts
rename to src/types/order.ts
diff --git a/types/role.ts b/src/types/role.ts
similarity index 100%
rename from types/role.ts
rename to src/types/role.ts
diff --git a/types/trip.ts b/src/types/trip.ts
similarity index 97%
rename from types/trip.ts
rename to src/types/trip.ts
index fcdddb7..e7524f8 100644
--- a/types/trip.ts
+++ b/src/types/trip.ts
@@ -1,7 +1,3 @@
-// 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 ───────────────────────
diff --git a/types/user.ts b/src/types/user.ts
similarity index 100%
rename from types/user.ts
rename to src/types/user.ts
diff --git a/src/utils/helperFun.ts b/src/utils/helperFun.ts
new file mode 100644
index 0000000..8b18d34
--- /dev/null
+++ b/src/utils/helperFun.ts
@@ -0,0 +1,51 @@
+/**
+ * @deprecated Use imports from src/lib/ instead:
+ *   - Session helpers → src/lib/session.ts
+ *   - Formatters      → src/lib/formatters.ts
+ *   - Auth helpers    → src/lib/auth.ts
+ *
+ * This file is kept only for backwards compatibility during migration.
+ * It will be removed in Phase 3.
+ */
+
+// Re-export from canonical locations so existing imports still resolve.
+export {
+  SESSION_KEY,
+  SESSION_COOKIE,
+  getCookie,
+  setCookie,
+  deleteCookie,
+  loadSession,
+  saveSession,
+  clearSession,
+} from "@/src/lib/session";
+
+export type { ClientSession } from "@/src/lib/session";
+
+export { fmtDate, fmtAmount } from "@/src/lib/formatters";
+
+// ── Order Status (legacy — now in src/lib/order-status.ts) ────────────────
+/** @deprecated import from src/lib/order-status.ts */
+export type OrderStatus = "CREATED" | "IN_TRANSIT" | "DELIVERED" | "CANCELLED";
+
+/** @deprecated import from src/lib/order-status.ts */
+export function statusColor(status: OrderStatus): string {
+  const map: Record<OrderStatus, string> = {
+    CREATED:    "bg-blue-50 text-blue-700 border-blue-200",
+    IN_TRANSIT: "bg-amber-50 text-amber-700 border-amber-200",
+    DELIVERED:  "bg-emerald-50 text-emerald-700 border-emerald-200",
+    CANCELLED:  "bg-red-50 text-red-600 border-red-200",
+  };
+  return map[status];
+}
+
+/** @deprecated import from src/lib/order-status.ts */
+export function statusLabel(status: OrderStatus): string {
+  const map: Record<OrderStatus, string> = {
+    CREATED:    "تم الإنشاء",
+    IN_TRANSIT: "قيد التوصيل",
+    DELIVERED:  "تم التسليم",
+    CANCELLED:  "ملغي",
+  };
+  return map[status];
+}
\ No newline at end of file
diff --git a/utils/logo.tsx b/src/utils/logo.tsx
similarity index 100%
rename from utils/logo.tsx
rename to src/utils/logo.tsx
diff --git a/validations/car.validator.ts b/src/validations/car.validator.ts
similarity index 100%
rename from validations/car.validator.ts
rename to src/validations/car.validator.ts
diff --git a/validations/driver.validator.ts b/src/validations/driver.validator.ts
similarity index 98%
rename from validations/driver.validator.ts
rename to src/validations/driver.validator.ts
index 8c09db9..647895c 100644
--- a/validations/driver.validator.ts
+++ b/src/validations/driver.validator.ts
@@ -1,5 +1,5 @@
 import * as yup from "yup"
-import type { NationalIdType, DriverCardType } from "../types/driver";
+import type { NationalIdType, DriverCardType } from "../src/types/driver";
 
 // ── Create schema ─────────────────────────────────────────────────────────────
 
diff --git a/validations/trip.validator.ts b/src/validations/trip.validator.ts
similarity index 97%
rename from validations/trip.validator.ts
rename to src/validations/trip.validator.ts
index 09c4461..3f5b1e5 100644
--- a/validations/trip.validator.ts
+++ b/src/validations/trip.validator.ts
@@ -1,5 +1,5 @@
 import * as yup from "yup";
-import type { TripStatus } from "@/types/trip";
+import type { TripStatus } from "@/src/types/trip";
 
 const TRIP_STATUSES: TripStatus[] = [
   "Scheduled",
@@ -35,6 +35,7 @@ export const createTripSchema = yup.object({
 
   // Optional
   startTime: yup.string().optional(), // doc: ISO 8601, default now()
+  branchId: yup.string().required("الفرع مطلوبة").uuid("معرّف الفرع غير صالح"),// doc
 
   endTime: yup
     .string()
@@ -50,8 +51,7 @@ export const createTripSchema = yup.object({
       },
     ),
 
-  branchId: yup.string().uuid("معرّف الفرع غير صالح").optional(), // doc
-
+  
   status: yup
     .mixed<TripStatus>()
     .oneOf(TRIP_STATUSES, "حالة الرحلة غير صالحة")
diff --git a/validations/user.validator.ts b/src/validations/user.validator.ts
similarity index 100%
rename from validations/user.validator.ts
rename to src/validations/user.validator.ts
diff --git a/utils/helperFun.ts b/utils/helperFun.ts
deleted file mode 100644
index ae6078a..0000000
--- a/utils/helperFun.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-// ─── fexed ───────────────────────────────────
-export const SESSION_KEY    = "lf_client";
-export const SESSION_COOKIE = "lf_client_id";
-
-// ─── Types ───────────────────────────────────
-export interface ClientSession {
-  id: string;
-  name: string;
-  email: string;
-  phone: string;
-}
-
-// ─── Cookies ─────────────────────────────────
-export function getCookie(name: string): string | null {
-  if (typeof document === "undefined") return null;
-  const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`));
-  return match ? decodeURIComponent(match[2]) : null;
-}
-
-export function setCookie(name: string, value: string, days = 30) {
-  const exp = new Date(Date.now() + days * 864e5).toUTCString();
-  document.cookie = `${name}=${encodeURIComponent(value)}; expires=${exp}; path=/`;
-}
-
-export function deleteCookie(name: string) {
-  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`;
-}
-
-// ─── Session ─────────────────────────────────
-export function loadSession(): ClientSession | null {
-  try {
-    const raw = localStorage.getItem(SESSION_KEY);
-    if (raw) return JSON.parse(raw) as ClientSession;
-  } catch {}
-  const id = getCookie(SESSION_COOKIE);
-  if (id) return { id, name: "", email: "", phone: "" };
-  return null;
-}
-
-export function saveSession(s: ClientSession) {
-  localStorage.setItem(SESSION_KEY, JSON.stringify(s));
-  setCookie(SESSION_COOKIE, s.id);
-}
-
-export function clearSession() {
-  localStorage.removeItem(SESSION_KEY);
-  deleteCookie(SESSION_COOKIE);
-}
-
-// ─── Formatting ──────────────────────────────
-export function fmtDate(iso: string) {
-  return new Date(iso).toLocaleDateString("ar-SA", {
-    year: "numeric",
-    month: "short",
-    day: "numeric",
-  });
-}
-
-export function fmtAmount(n: number) {
-  return `${n.toFixed(2)} ر.س`;
-}
-
-// ─── Order Status ──────────────────────────────
-export type OrderStatus = "CREATED" | "IN_TRANSIT" | "DELIVERED" | "CANCELLED";
-
-export function statusColor(status: OrderStatus) {
-  const map: Record<OrderStatus, string> = {
-    CREATED:    "bg-blue-50 text-blue-700 border-blue-200",
-    IN_TRANSIT: "bg-amber-50 text-amber-700 border-amber-200",
-    DELIVERED:  "bg-emerald-50 text-emerald-700 border-emerald-200",
-    CANCELLED:  "bg-red-50 text-red-600 border-red-200",
-  };
-  return map[status];
-}
-
-export function statusLabel(status: OrderStatus) {
-  const map: Record<OrderStatus, string> = {
-    CREATED:    "تم الإنشاء",
-    IN_TRANSIT: "قيد التوصيل",
-    DELIVERED:  "تم التسليم",
-    CANCELLED:  "ملغي",
-  };
-  return map[status];
-}
\ No newline at end of file