add archive featcher to role , brtanch , car_mainte also update client and clien_addres create car mainte fails and update car fails delete car_maint from saidbar and but it in car model also update car image display

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

@@ -0,0 +1,101 @@
+"use client";
+
+import { useParams, useRouter } from "next/navigation";
+import { Alert, PageHeader, Spinner } from "@/src/Components/UI";
+import { useCarMaintenanceList } from "@/src/hooks/UseCarsMaintanance";
+import {
+  MAINTENANCE_STATUS_MAP,
+  fmtDate,
+  fmtCost,
+  durationDays,
+  getMaintenanceStatus,
+} from "@/src/types/carMaintanance";
+
+function DetailRow({ label, value, mono = false }: { label: string; value: string; mono?: boolean }) {
+  return (
+    <div style={{
+      display: "flex", justifyContent: "space-between", alignItems: "baseline",
+      padding: "0.75rem 0", borderBottom: "1px solid var(--color-border)",
+    }}>
+      <span style={{ fontSize: 12, color: "var(--color-text-muted)", fontWeight: 600 }}>{label}</span>
+      <span style={{ fontSize: 14, fontFamily: mono ? "var(--font-mono)" : "var(--font-sans)", color: "var(--color-text-primary)" }}>
+        {value}
+      </span>
+    </div>
+  );
+}
+
+export default function CarMaintenanceDetailPage() {
+  const { carId, maintenanceId } = useParams<{ carId: string; maintenanceId: string }>();
+  const router = useRouter();
+
+  // NOTE: GET /cars/:carId/maintenance/:maintenanceId isn't wired up on the
+  // backend yet (returns "Route not found"), so this page resolves the
+  // record from the already-loaded list instead of a dedicated single-record
+  // call. includeDeleted: true so an archived record still resolves to a
+  // real "مؤرشفة" status instead of silently disappearing.
+  const { records, loading, error } = useCarMaintenanceList(carId, { includeDeleted: true });
+  const record = records.find((r) => r.id === maintenanceId) ?? null;
+
+  return (
+    <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem", maxWidth: 720, margin: "0 auto" }} dir="rtl">
+      <PageHeader
+        title="تفاصيل سجل الصيانة"
+        description={record?.reason}
+        backHref={`/dashboard/cars/${carId}/maintenance`}
+        backLabel="العودة"
+      />
+
+      <div style={{
+        borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)",
+        background: "var(--color-surface)", boxShadow: "var(--shadow-card)", padding: "1.5rem",
+      }}>
+        {loading && (
+          <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "2rem 0" }}>
+            <Spinner size="sm" className="text-blue-600" />
+            <span style={{ fontSize: 13, color: "var(--color-text-muted)" }}>جارٍ التحميل…</span>
+          </div>
+        )}
+
+        {error && <Alert type="error" message={error} />}
+
+        {!loading && !error && !record && (
+          <p style={{ fontSize: 13, color: "var(--color-text-muted)", textAlign: "center", padding: "2rem 0" }}>
+            لم يتم العثور على سجل الصيانة.
+          </p>
+        )}
+
+        {!loading && !error && record && (() => {
+          const status = MAINTENANCE_STATUS_MAP[getMaintenanceStatus(record)];
+          return (
+            <>
+              <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: "1.25rem" }}>
+                <span style={{ borderRadius: "var(--radius-full)", border: `1px solid ${status.border}`, background: status.bg, padding: "0.3rem 0.875rem", fontSize: 12, fontWeight: 700, color: status.color }}>
+                  {status.label}
+                </span>
+              </div>
+
+              <DetailRow label="سبب الصيانة" value={record.reason} />
+              <DetailRow label="التكلفة" value={fmtCost(record.cost)} />
+              <DetailRow label="تاريخ البدء" value={fmtDate(record.startAt)} />
+              <DetailRow label="تاريخ الانتهاء" value={fmtDate(record.endAt)} />
+              <DetailRow label="المدة" value={`${durationDays(record.startAt, record.endAt)} يوم`} />
+              {record.car && (
+                <DetailRow label="المركبة" value={`${record.car.manufacturer} ${record.car.model} — ${record.car.plateLetters} ${record.car.plateNumber}`} mono />
+              )}
+              <DetailRow label="تاريخ الإضافة" value={fmtDate(record.createdAt)} />
+              <DetailRow label="آخر تحديث" value={fmtDate(record.updatedAt)} />
+            </>
+          );
+        })()}
+      </div>
+
+      <div>
+        <button type="button" onClick={() => router.push(`/dashboard/cars/${carId}/maintenance`)}
+          style={{ height: 40, padding: "0 1.5rem", borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", fontSize: 13, fontWeight: 600, color: "var(--color-text-secondary)", cursor: "pointer", fontFamily: "var(--font-sans)" }}>
+          العودة
+        </button>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,214 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { Alert, ArchiveButton, PageHeader, Spinner, Toast } from "@/src/Components/UI";
+import { CarMaintenanceFormModal } from "@/src/Components/Car_Maintanance/CarMaintananceFormModal";
+import { CarMaintenanceDeleteModal } from "@/src/Components/Car_Maintanance/CarMaintananceDeleteModal";
+import { ArchivedCarsMaintenanceModal } from "@/src/Components/Car_Maintanance/archive/ArchivedCarsMaintananceModal";
+import {
+  useCarMaintenanceList,
+  useCarMaintenanceMutations,
+  useMaintenanceToast,
+} from "@/src/hooks/UseCarsMaintanance";
+import { useCarDetail } from "@/src/hooks/useCars";
+import {
+  MAINTENANCE_STATUS_MAP,
+  fmtDate,
+  fmtCost,
+  durationDays,
+  getMaintenanceStatus,
+} from "@/src/types/carMaintanance";
+import type {
+  CarMaintenance,
+  CreateMaintenancePayload,
+  UpdateMaintenancePayload,
+} from "@/src/types/carMaintanance";
+
+function MaintenanceCard({
+  record, onView, onEdit, onDelete,
+}: {
+  record: CarMaintenance;
+  onView: () => void;
+  onEdit: () => void;
+  onDelete: () => void;
+}) {
+  const status = MAINTENANCE_STATUS_MAP[getMaintenanceStatus(record)];
+
+  return (
+    <article style={{
+      borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)",
+      background: "var(--color-surface)", overflow: "hidden", boxShadow: "var(--shadow-card)",
+    }}>
+      <div style={{ height: 4, background: status.dot }} />
+      <div style={{ padding: "1.25rem" }}>
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 8 }}>
+          <p style={{ fontSize: 15, fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>
+            {record.reason}
+          </p>
+          <span style={{
+            borderRadius: "var(--radius-full)", border: `1px solid ${status.border}`,
+            background: status.bg, padding: "0.2rem 0.625rem",
+            fontSize: 11, fontWeight: 700, color: status.color, whiteSpace: "nowrap", flexShrink: 0,
+          }}>
+            {status.label}
+          </span>
+        </div>
+
+        <div style={{ marginTop: "0.875rem", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.5rem" }}>
+          <div style={{ fontSize: 11 }}>
+            <span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>التكلفة</span>
+            <span style={{ color: "var(--color-text-primary)", marginTop: 2, display: "block" }}>{fmtCost(record.cost)}</span>
+          </div>
+          <div style={{ fontSize: 11 }}>
+            <span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>المدة</span>
+            <span style={{ color: "var(--color-text-primary)", marginTop: 2, display: "block" }}>{durationDays(record.startAt, record.endAt)} يوم</span>
+          </div>
+          <div style={{ fontSize: 11 }}>
+            <span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>تاريخ البدء</span>
+            <span style={{ color: "var(--color-text-secondary)", marginTop: 2, display: "block" }}>{fmtDate(record.startAt)}</span>
+          </div>
+          <div style={{ fontSize: 11 }}>
+            <span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>تاريخ الانتهاء</span>
+            <span style={{ color: "var(--color-text-secondary)", marginTop: 2, display: "block" }}>{fmtDate(record.endAt)}</span>
+          </div>
+        </div>
+
+        <div style={{ display: "flex", gap: "0.5rem", marginTop: "1rem" }}>
+          <button type="button" onClick={onView}
+            style={{ flex: 1, height: 34, borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface-muted)", fontSize: 12, fontWeight: 600, color: "var(--color-text-secondary)", cursor: "pointer", fontFamily: "var(--font-sans)" }}>
+            إظهار التفاصيل
+          </button>
+          <button type="button" onClick={onEdit}
+            style={{ height: 34, padding: "0 0.875rem", borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", fontSize: 12, fontWeight: 600, color: "var(--color-text-secondary)", cursor: "pointer", fontFamily: "var(--font-sans)" }}>
+            تعديل
+          </button>
+          <button type="button" onClick={onDelete}
+            style={{ height: 34, padding: "0 0.875rem", borderRadius: "var(--radius-md)", border: "1px solid #FECACA", background: "#FEF2F2", fontSize: 12, fontWeight: 600, color: "#DC2626", cursor: "pointer", fontFamily: "var(--font-sans)" }}>
+            أرشفة
+          </button>
+        </div>
+      </div>
+    </article>
+  );
+}
+
+export default function CarMaintenancePage() {
+  const { carId } = useParams<{ carId: string }>();
+  const router = useRouter();
+
+  const { car, refetch: refetchCar } = useCarDetail(carId);
+  const carLabel = car ? `${car.manufacturer} ${car.model} — ${car.plateLetters} ${car.plateNumber}` : undefined;
+
+  const { records, loading, error, loadRecords, removeRecord, setError } = useCarMaintenanceList(carId);
+  const { toast, notify } = useMaintenanceToast();
+
+  const [formTarget, setFormTarget]     = useState<CarMaintenance | null | false>(false); // false = closed
+  const [deleteTarget, setDeleteTarget] = useState<CarMaintenance | null>(null);
+  const [archiveOpen, setArchiveOpen]   = useState(false);
+
+  const getEditTarget = useCallback(
+    () => (formTarget instanceof Object && formTarget !== null ? (formTarget as CarMaintenance) : null),
+    [formTarget],
+  );
+
+  const { deleting, handleFormSubmit, handleDeleteConfirm } = useCarMaintenanceMutations({
+    carId,
+    onSuccess: (msg) => { notify({ type: "success", message: msg }); loadRecords(); refetchCar(); },
+    onError:   (msg) =>   notify({ type: "error", message: msg }),
+    onDeleted: (id) => { removeRecord(id); setDeleteTarget(null); refetchCar(); },
+    getEditTarget,
+  });
+
+  return (
+    <>
+      <Toast notification={toast} />
+
+      {formTarget !== false && (
+        <CarMaintenanceFormModal
+          editRecord={formTarget}
+          carLabel={carLabel}
+          onClose={() => setFormTarget(false)}
+          onSubmit={(payload: CreateMaintenancePayload | UpdateMaintenancePayload, isNew: boolean) =>
+            handleFormSubmit(payload, isNew).then(ok => { if (ok) setFormTarget(false); return ok; })
+          }
+        />
+      )}
+
+      {deleteTarget && (
+        <CarMaintenanceDeleteModal
+          record={deleteTarget}
+          deleting={deleting}
+          onCancel={() => setDeleteTarget(null)}
+          onConfirm={() => handleDeleteConfirm(deleteTarget)}
+        />
+      )}
+
+      {archiveOpen && (
+        <ArchivedCarsMaintenanceModal
+          carId={carId}
+          carLabel={carLabel}
+          onClose={() => setArchiveOpen(false)}
+        />
+      )}
+
+      <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }} dir="rtl">
+        <PageHeader
+          title="سجل الصيانة"
+          description={carLabel ?? "جارٍ تحميل بيانات المركبة…"}
+          backHref="/dashboard/cars"
+          backLabel="المركبات"
+          action={
+            <button 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)", 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>
+          }
+        />
+
+        {error && <Alert type="error" message={error} onClose={() => setError(null)} />}
+
+        {loading ? (
+          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, padding: "5rem 0", color: "var(--color-text-muted)" }}>
+            <Spinner size="md" className="text-blue-600" />
+            <span style={{ fontSize: 14 }}>جارٍ تحميل سجلات الصيانة…</span>
+          </div>
+        ) : records.length === 0 ? (
+          <div style={{
+            borderRadius: "var(--radius-xl)", border: "2px dashed var(--color-border)",
+            background: "var(--color-surface)", padding: "5rem 2rem", textAlign: "center",
+          }}>
+            <div style={{ fontSize: 52, marginBottom: 16 }}>🔧</div>
+            <p style={{ fontSize: 16, fontWeight: 600, color: "var(--color-text-primary)" }}>لا توجد سجلات صيانة بعد</p>
+            <p style={{ fontSize: 13, color: "var(--color-text-muted)", marginTop: 6 }}>
+              اضغط على &quot;إضافة سجل صيانة&quot; لتسجيل أول عملية صيانة لهذه المركبة.
+            </p>
+          </div>
+        ) : (
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: "1rem" }}>
+            {records.map(record => (
+              <MaintenanceCard
+                key={record.id}
+                record={record}
+                onView={() => router.push(`/dashboard/cars/${carId}/maintenance/${record.id}`)}
+                onEdit={() => setFormTarget(record)}
+                onDelete={() => setDeleteTarget(record)}
+              />
+            ))}
+          </div>
+        )}
+      </section>
+
+      <ArchiveButton onClick={() => setArchiveOpen(true)} label="أرشيف الصيانة" />
+    </>
+  );
+}

app/dashboard/cars/page.tsx

@@ -7,9 +7,12 @@ import { CarFormModal }      from "@/src/Components/car/CarFormModal";
 import { CarDetailPanel }    from "@/src/Components/car/CarDetailPanel";
 import { CarDeleteModal }    from "@/src/Components/car/CarDeleteModal";
 import { ArchivedCarsModal } from "@/src/Components/car/archive/Archivedcarsmodal";
+import { CarMaintenanceFormModal } from "@/src/Components/Car_Maintanance/CarMaintananceFormModal";
 import { useCars, useCarMutations, useToast } from "@/src/hooks/useCars";
+import { useCarMaintenanceMutations } from "@/src/hooks/UseCarsMaintanance";
 import { fmtDateShort, isExpiringSoon, STATUS_MAP, INS_MAP } from "@/src/types/car";
 import type { Car, CreateCarPayload, ToastMsg, UpdateCarPayload } from "@/src/types/car";
+import type { CreateMaintenancePayload, UpdateMaintenancePayload } from "@/src/types/carMaintanance";
 
 // ── Toast ─────────────────────────────────────────────────────────────────────
 
@@ -41,11 +44,30 @@ function CarToast({ notification }: { notification: ToastMsg | null }) {
 
 // ── CarCard ───────────────────────────────────────────────────────────────────
 
-function CarCard({ car, onClick }: { car: Car; onClick: () => void }) {
+function CarCard({
+  car,
+  onClick,
+  onSendToMaintenance,
+}: {
+  car: Car;
+  onClick: () => void;
+  onSendToMaintenance: (car: Car) => void;
+}) {
   const status = STATUS_MAP[car.currentStatus];
   const ins    = car.insuranceStatus ? INS_MAP[car.insuranceStatus] : null;
   const regWarn = isExpiringSoon(car.registrationExpiryDate);
 
+  // Maintenance status can ONLY be set via this button's flow (POST
+  // cars/:carId/maintenance flips it on the backend). Disable rather than
+  // hide it once the car is already in maintenance or inactive, and explain why.
+  const maintenanceDisabled = car.currentStatus === "InMaintenance" || car.currentStatus === "Inactive";
+  const maintenanceDisabledReason =
+    car.currentStatus === "InMaintenance"
+      ? "المركبة في الصيانة بالفعل"
+      : car.currentStatus === "Inactive"
+        ? "لا يمكن إرسال مركبة غير نشطة للصيانة"
+        : undefined;
+
   return (
     <article
       onClick={onClick}
@@ -151,8 +173,37 @@ function CarCard({ car, onClick }: { car: Car; onClick: () => void }) {
           </div>
         </div>
 
+        {/* Send to Maintenance quick action */}
+        <button
+          type="button"
+          title={maintenanceDisabledReason}
+          disabled={maintenanceDisabled}
+          onClick={(e) => {
+            e.stopPropagation();
+            onSendToMaintenance(car);
+          }}
+          style={{
+            marginTop: "0.875rem",
+            width: "100%",
+            height: 34,
+            borderRadius: "var(--radius-md)",
+            border: `1px solid ${maintenanceDisabled ? "var(--color-border)" : "#FDE68A"}`,
+            background: maintenanceDisabled ? "var(--color-surface-muted)" : "#FFFBEB",
+            fontSize: 12, fontWeight: 700,
+            color: maintenanceDisabled ? "var(--color-text-hint)" : "#854D0E",
+            cursor: maintenanceDisabled ? "not-allowed" : "pointer",
+            display: "flex", alignItems: "center", justifyContent: "center", gap: 6,
+            fontFamily: "var(--font-sans)",
+          }}
+        >
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
+          </svg>
+          إرسال للصيانة
+        </button>
+
         {/* Footer CTA hint */}
-        <p style={{ marginTop: "0.875rem", fontSize: 11, color: "var(--color-brand-600)", fontWeight: 600, textAlign: "left" }}>
+        <p style={{ marginTop: "0.75rem", fontSize: 11, color: "var(--color-brand-600)", fontWeight: 600, textAlign: "left" }}>
           اضغط لعرض التفاصيل ←
         </p>
       </div>
@@ -171,6 +222,7 @@ export default function CarsPage() {
   const [formTarget,   setFormTarget]   = useState<Car | null | false>(false); // false = closed
   const [deleteTarget, setDeleteTarget] = useState<Car | null>(null);
   const [archiveOpen,  setArchiveOpen]  = useState(false);
+  const [maintenanceTarget, setMaintenanceTarget] = useState<Car | null>(null);
 
   const { toast, notify } = useToast();
 
@@ -194,6 +246,18 @@ export default function CarsPage() {
     await handleDeleteConfirm(deleteTarget);
   };
 
+  // "Send to Maintenance" mutation — carId is bound to whichever car the
+  // person just clicked. Errors surface inline inside the modal's own
+  // apiError state (its default behavior), not through the outer toast —
+  // onError is intentionally a no-op here.
+  const { handleFormSubmit: handleMaintenanceSubmit } = useCarMaintenanceMutations({
+    carId: maintenanceTarget?.id ?? "",
+    onSuccess: (msg) => { notify({ type: "success", message: msg }); loadCars(); },
+    onError: () => {},
+    onDeleted: () => {},
+    getEditTarget: () => null,
+  });
+
   // ── Render ──────────────────────────────────────────────────────────────────
   return (
     <>
@@ -228,6 +292,17 @@ export default function CarsPage() {
         />
       )}
 
+      {maintenanceTarget && (
+        <CarMaintenanceFormModal
+          editRecord={null}
+          carLabel={`${maintenanceTarget.manufacturer} ${maintenanceTarget.model} — ${maintenanceTarget.plateLetters} ${maintenanceTarget.plateNumber}`}
+          onClose={() => setMaintenanceTarget(null)}
+          onSubmit={(payload: CreateMaintenancePayload | UpdateMaintenancePayload, isNew: boolean) =>
+            handleMaintenanceSubmit(payload, isNew)
+          }
+        />
+      )}
+
       {archiveOpen && (
         <ArchivedCarsModal onClose={() => setArchiveOpen(false)} />
       )}
@@ -357,6 +432,7 @@ export default function CarsPage() {
                 key={car.id}
                 car={car}
                 onClick={() => setDetailId(car.id)}
+                onSendToMaintenance={(c) => setMaintenanceTarget(c)}
               />
             ))}
           </div>