add archive endpoint to user , driver , car ,order ,trip and update trip fails also update saidecar

src/Components/Car_Maintanance/CarMaintananceDetailPanel.tsx

@@ -0,0 +1,278 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { Spinner } from "../UI";
+import { CarMaintenanceFormModal } from "./CarMaintananceFormModal";
+import { CarMaintenanceDeleteModal } from "./CarMaintananceDeleteModal";
+import {
+  useCarMaintenanceList,
+  useCarMaintenanceMutations,
+  useMaintenanceToast,
+} from "@/src/hooks/UseCarsMaintanance";
+import {
+  MAINTENANCE_STATUS_MAP,
+  fmtDate,
+  fmtCost,
+  durationDays,
+  getMaintenanceStatus,
+} from "@/src/types/carMaintanance";
+import type {
+  CarMaintenance,
+  CreateMaintenancePayload,
+  UpdateMaintenancePayload,
+} from "@/src/types/carMaintanance";
+
+// ── Toast ─────────────────────────────────────────────────────────────────────
+// Small floating message that confirms an action worked (or explains why it didn't).
+
+function MaintenanceToast({ notification }: { notification: { type: "success" | "error"; message: string } | null }) {
+  if (!notification) return null;
+  const ok = notification.type === "success";
+  return (
+    <div role="status" aria-live="polite" style={{
+      position: "fixed", bottom: 24, left: "50%", transform: "translateX(-50%)",
+      zIndex: 9999, pointerEvents: "none",
+    }}>
+      <div style={{
+        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>{notification.message}</span>
+      </div>
+    </div>
+  );
+}
+
+// ── Record card ───────────────────────────────────────────────────────────────
+
+function MaintenanceCard({
+  record,
+  onEdit,
+  onDelete,
+}: {
+  record: CarMaintenance;
+  onEdit: () => void;
+  onDelete: () => void;
+}) {
+  const status = MAINTENANCE_STATUS_MAP[getMaintenanceStatus(record)];
+
+  return (
+    <div style={{
+      borderRadius: "var(--radius-lg)",
+      border: "1px solid var(--color-border)",
+      background: "var(--color-surface)",
+      padding: "1rem",
+      display: "flex", flexDirection: "column", gap: "0.6rem",
+    }}>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 8 }}>
+        <p style={{ fontSize: 14, 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={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.4rem", fontSize: 12 }}>
+        <div>
+          <span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>التكلفة</span>
+          <span style={{ color: "var(--color-text-primary)" }}>{fmtCost(record.cost)}</span>
+        </div>
+        <div>
+          <span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>المدة</span>
+          <span style={{ color: "var(--color-text-primary)" }}>{durationDays(record.startAt, record.endAt)} يوم</span>
+        </div>
+        <div>
+          <span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>تاريخ البدء</span>
+          <span style={{ color: "var(--color-text-primary)" }}>{fmtDate(record.startAt)}</span>
+        </div>
+        <div>
+          <span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>تاريخ الانتهاء</span>
+          <span style={{ color: "var(--color-text-primary)" }}>{fmtDate(record.endAt)}</span>
+        </div>
+      </div>
+
+      <div style={{ display: "flex", gap: "0.5rem", paddingTop: "0.25rem" }}>
+        <button type="button" onClick={onEdit}
+          style={{ flex: 1, height: 32, 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={onDelete}
+          style={{ height: 32, 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>
+  );
+}
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+
+interface CarMaintenanceDetailPanelProps {
+  carId: string;
+  /** e.g. "تويوتا لاند كروزر — أ ب ج 1234", shown in the header. */
+  carLabel?: string;
+  onClose: () => void;
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function CarMaintenanceDetailPanel({ carId, carLabel, onClose }: CarMaintenanceDetailPanelProps) {
+  const { records, loading, error, loadRecords, removeRecord } = useCarMaintenanceList(carId);
+  const { toast, notify } = useMaintenanceToast();
+
+  const [formTarget, setFormTarget]     = useState<CarMaintenance | null | false>(false); // false = closed
+  const [deleteTarget, setDeleteTarget] = useState<CarMaintenance | null>(null);
+
+  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(); },
+    onError:   (msg) =>   notify({ type: "error", message: msg }),
+    onDeleted: (id) => { removeRecord(id); setDeleteTarget(null); },
+    getEditTarget,
+  });
+
+  useEffect(() => {
+    const h = (e: KeyboardEvent) => { if (e.key === "Escape" && formTarget === false && !deleteTarget) onClose(); };
+    window.addEventListener("keydown", h);
+    return () => window.removeEventListener("keydown", h);
+  }, [formTarget, deleteTarget, onClose]);
+
+  const totalCost = records.reduce((sum, r) => sum + (r.cost ?? 0), 0);
+
+  return (
+    <>
+      <MaintenanceToast notification={toast} />
+
+      {/* Backdrop */}
+      <div onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 40, background: "rgba(15,23,42,0.45)", backdropFilter: "blur(2px)" }} />
+
+      {/* Panel */}
+      <aside
+        aria-label="سجل صيانة المركبة"
+        style={{
+          position: "fixed", top: 0, left: 0, bottom: 0, zIndex: 50,
+          width: "min(480px, 100vw)",
+          background: "var(--color-surface)",
+          borderRight: "1px solid var(--color-border)",
+          display: "flex", flexDirection: "column",
+          boxShadow: "8px 0 40px rgba(0,0,0,.18)",
+        }}
+      >
+        {/* Header */}
+        <div style={{ padding: "1.25rem 1.5rem", borderBottom: "1px solid var(--color-border)", background: "var(--color-surface-muted)", flexShrink: 0 }}>
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
+            <div>
+              <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600, margin: 0 }}>
+                سجل الصيانة
+              </p>
+              <h2 style={{ fontSize: 18, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
+                {carLabel ?? "المركبة"}
+              </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", flexShrink: 0 }}>
+              ×
+            </button>
+          </div>
+
+          {!loading && !error && records.length > 0 && (
+            <p style={{ marginTop: 10, fontSize: 12, color: "var(--color-text-muted)" }}>
+              {records.length} سجل · إجمالي التكلفة {fmtCost(totalCost)}
+            </p>
+          )}
+        </div>
+
+        {/* Content */}
+        <div style={{ flex: 1, overflowY: "auto", padding: "1.5rem" }} dir="rtl">
+          {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 && (
+            <div style={{ borderRadius: "var(--radius-md)", background: "#FEF2F2", border: "1px solid #FECACA", padding: "0.75rem 1rem", fontSize: 13, color: "#DC2626" }}>
+              ⚠ {error}
+            </div>
+          )}
+
+          {!loading && !error && records.length === 0 && (
+            <div style={{ textAlign: "center", padding: "3rem 0" }}>
+              <div style={{ fontSize: 40, marginBottom: 10 }}>🔧</div>
+              <p style={{ fontSize: 14, fontWeight: 600, color: "var(--color-text-primary)" }}>لا توجد سجلات صيانة بعد</p>
+              <p style={{ fontSize: 12, color: "var(--color-text-hint)", marginTop: 4 }}>
+                اضغط على &quot;إضافة سجل&quot; لتسجيل أول عملية صيانة لهذه المركبة.
+              </p>
+            </div>
+          )}
+
+          {!loading && !error && records.length > 0 && (
+            <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
+              {records.map((record) => (
+                <MaintenanceCard
+                  key={record.id}
+                  record={record}
+                  onEdit={() => setFormTarget(record)}
+                  onDelete={() => setDeleteTarget(record)}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Footer actions */}
+        <div style={{ padding: "1rem 1.5rem", borderTop: "1px solid var(--color-border)", background: "var(--color-surface-muted)", flexShrink: 0 }}>
+          <button type="button" onClick={() => setFormTarget(null)}
+            style={{ width: "100%", height: 40, borderRadius: "var(--radius-md)", border: "none", background: "var(--color-brand-600)", fontSize: 13, fontWeight: 700, color: "#FFF", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", gap: 8, fontFamily: "var(--font-sans)" }}>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+              <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
+            </svg>
+            إضافة سجل صيانة
+          </button>
+        </div>
+      </aside>
+
+      {/* Nested modals */}
+      {formTarget !== false && (
+        <CarMaintenanceFormModal
+          editRecord={formTarget}
+          carLabel={carLabel}
+          onClose={() => setFormTarget(false)}
+          onSubmit={(payload: CreateMaintenancePayload | UpdateMaintenancePayload, isNew: boolean) =>
+            handleFormSubmit(payload, isNew)
+          }
+        />
+      )}
+
+      {deleteTarget && (
+        <CarMaintenanceDeleteModal
+          record={deleteTarget}
+          deleting={deleting}
+          onCancel={() => setDeleteTarget(null)}
+          onConfirm={() => handleDeleteConfirm(deleteTarget)}
+        />
+      )}
+    </>
+  );
+}

src/Components/Car_Maintanance/CarMaintananceFormModal.tsx

@@ -0,0 +1,300 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import * as yup from "yup";
+import { Alert, Spinner } from "../UI";
+import {
+  createMaintenanceSchema,
+  updateMaintenanceSchema,
+} from "@/src/validations/carMaintanance.validator";
+import type {
+  CarMaintenance,
+  CreateMaintenancePayload,
+  MaintenanceFormErrors,
+  UpdateMaintenancePayload,
+} from "@/src/types/carMaintanance";
+
+// ── Shared input style ────────────────────────────────────────────────────────
+
+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,
+};
+
+// ── yup validation ────────────────────────────────────────────────────────────
+// Checks the form values against the right schema and turns any problems
+// into a simple field -> message map the inputs below can read from.
+
+async function validate(
+  form: Partial<CreateMaintenancePayload>,
+  isNew: boolean,
+): Promise<MaintenanceFormErrors> {
+  const schema = isNew ? createMaintenanceSchema : updateMaintenanceSchema;
+  try {
+    await schema.validate(form, { abortEarly: false });
+    return {};
+  } catch (err) {
+    if (err instanceof yup.ValidationError) {
+      return err.inner.reduce<MaintenanceFormErrors>((acc, e) => {
+        const field = e.path as keyof MaintenanceFormErrors;
+        if (field && !acc[field]) acc[field] = e.message;
+        return acc;
+      }, {});
+    }
+    return {};
+  }
+}
+
+// ── Date helper ───────────────────────────────────────────────────────────────
+// <input type="date"> gives "YYYY-MM-DD"; the backend expects full ISO-8601.
+
+function toIsoDateTime(val: string): string {
+  if (!val) return val;
+  if (val.includes("T")) return val;
+  return `${val}T00:00:00.000Z`;
+}
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+
+interface CarMaintenanceFormModalProps {
+  /** Pass null to create a brand new record, or an existing record to edit it. */
+  editRecord: CarMaintenance | null;
+  /** Shown in the header so the person knows which car this belongs to. */
+  carLabel?: string;
+  onClose: () => void;
+  onSubmit: (
+    payload: CreateMaintenancePayload | UpdateMaintenancePayload,
+    isNew: boolean,
+  ) => Promise<boolean>;
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function CarMaintenanceFormModal({
+  editRecord,
+  carLabel,
+  onClose,
+  onSubmit,
+}: CarMaintenanceFormModalProps) {
+  const isNew = editRecord === null;
+
+  // ── Form state ─────────────────────────────────────────────────────────────
+  const [reason, setReason]   = useState(editRecord?.reason ?? "");
+  const [cost, setCost]       = useState<number | undefined>(editRecord?.cost ?? undefined);
+  const [startAt, setStartAt] = useState(editRecord?.startAt?.slice(0, 10) ?? "");
+  const [endAt, setEndAt]     = useState(editRecord?.endAt?.slice(0, 10) ?? "");
+
+  const [errors, setErrors]     = useState<MaintenanceFormErrors>({});
+  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]);
+
+  const parseNum = (v: string): number | undefined =>
+    v.trim() === "" ? undefined : Number(v);
+
+  const inputStyle = (field: keyof MaintenanceFormErrors): React.CSSProperties => ({
+    ...inputBase,
+    ...(errors[field] ? { borderColor: "var(--color-danger)", background: "#FEF2F2" } : {}),
+  });
+
+  const clearFieldError = (field: keyof MaintenanceFormErrors) =>
+    setErrors((p) => ({ ...p, [field]: undefined }));
+
+  // ── Submit ────────────────────────────────────────────────────────────────
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    // Build a snapshot for yup — include everything so optional rules also run.
+    const formSnapshot: Partial<CreateMaintenancePayload> = {
+      reason,
+      cost,
+      ...(startAt && { startAt }),
+      ...(endAt && { endAt }),
+    };
+
+    const errs = await validate(formSnapshot, isNew);
+    if (Object.keys(errs).length) {
+      setErrors(errs);
+      return;
+    }
+
+    // Build the final payload — dates go out as full ISO-8601 strings.
+    const raw: Record<string, unknown> = { reason, cost };
+    if (startAt) raw.startAt = toIsoDateTime(startAt);
+    if (endAt) raw.endAt = toIsoDateTime(endAt);
+
+    const payload = raw as unknown as CreateMaintenancePayload;
+    setSaving(true);
+    setApiError("");
+    const ok = await onSubmit(payload, isNew);
+    setSaving(false);
+    if (ok) onClose();
+    else setApiError("حدث خطأ غير متوقع. يرجى المحاولة لاحقاً.");
+  };
+
+  // ── Render ────────────────────────────────────────────────────────────────
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="maintenance-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", overflowY: "auto",
+      }}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        style={{
+          width: "100%", maxWidth: 520,
+          background: "var(--color-surface)",
+          borderRadius: "var(--radius-2xl)",
+          border: "1px solid var(--color-border)",
+          boxShadow: "0 24px 64px rgba(0,0,0,.18)",
+          overflow: "hidden",
+          margin: "auto",
+        }}
+      >
+        {/* Header */}
+        <div style={{
+          display: "flex", alignItems: "center", justifyContent: "space-between",
+          padding: "1.25rem 1.5rem",
+          borderBottom: "1px solid var(--color-border)",
+          background: "var(--color-surface-muted)",
+        }}>
+          <div>
+            <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600, margin: 0 }}>
+              {isNew ? "إضافة سجل صيانة" : "تعديل سجل صيانة"}
+            </p>
+            <h2 id="maintenance-modal-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
+              {carLabel ?? (isNew ? "سجل صيانة جديد" : "تعديل السجل")}
+            </h2>
+          </div>
+          <button type="button" onClick={onClose} aria-label="إغلاق"
+            style={{ width: 34, height: 34, borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", cursor: "pointer", fontSize: 18, color: "var(--color-text-muted)", display: "flex", alignItems: "center", justifyContent: "center" }}>
+            ×
+          </button>
+        </div>
+
+        {/* Form */}
+        <form
+          onSubmit={handleSubmit}
+          noValidate
+          style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem", maxHeight: "75vh", overflowY: "auto" }}
+          dir="rtl"
+        >
+          {apiError && <Alert type="error" message={apiError} onClose={() => setApiError("")} />}
+
+          <label style={labelStyle}>
+            سبب الصيانة *
+            <input
+              ref={firstRef}
+              style={inputStyle("reason")}
+              value={reason}
+              onChange={(e) => { setReason(e.target.value); clearFieldError("reason"); }}
+              placeholder="تغيير زيت المحرك"
+              dir="rtl"
+            />
+            {errors.reason && <span style={errorTextStyle}>{errors.reason}</span>}
+          </label>
+
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
+            <label style={labelStyle}>
+              التكلفة (ر.س) *
+              <input
+                style={inputStyle("cost")}
+                type="number"
+                min={0}
+                value={cost ?? ""}
+                onChange={(e) => { setCost(parseNum(e.target.value)); clearFieldError("cost"); }}
+                placeholder="0"
+                dir="ltr"
+              />
+              {errors.cost && <span style={errorTextStyle}>{errors.cost}</span>}
+            </label>
+
+            <label style={labelStyle}>
+              تاريخ البدء *
+              <input
+                style={inputStyle("startAt")}
+                type="date"
+                value={startAt}
+                onChange={(e) => { setStartAt(e.target.value); clearFieldError("startAt"); }}
+              />
+              {errors.startAt && <span style={errorTextStyle}>{errors.startAt}</span>}
+            </label>
+          </div>
+
+          <label style={labelStyle}>
+            تاريخ الانتهاء
+            <input
+              style={inputStyle("endAt")}
+              type="date"
+              value={endAt}
+              onChange={(e) => { setEndAt(e.target.value); clearFieldError("endAt"); }}
+            />
+            {errors.endAt && <span style={errorTextStyle}>{errors.endAt}</span>}
+            <span style={{ fontSize: 11, color: "var(--color-text-hint)", fontWeight: 400 }}>
+              اتركه فارغاً إذا كانت الصيانة ما زالت جارية.
+            </span>
+          </label>
+
+          {/* Actions */}
+          <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end", paddingTop: "0.5rem" }}>
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={saving}
+              style={{ height: 40, padding: "0 1.25rem", borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", fontSize: 13, fontWeight: 600, color: "var(--color-text-secondary)", cursor: saving ? "not-allowed" : "pointer", fontFamily: "var(--font-sans)" }}
+            >
+              إلغاء
+            </button>
+            <button
+              type="submit"
+              disabled={saving}
+              style={{ height: 40, padding: "0 1.5rem", borderRadius: "var(--radius-md)", border: "none", background: saving ? "var(--color-brand-400)" : "var(--color-brand-600)", fontSize: 13, fontWeight: 700, color: "#FFF", cursor: saving ? "not-allowed" : "pointer", display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--font-sans)" }}
+            >
+              {saving && <Spinner size="sm" className="text-white" />}
+              {saving ? "جارٍ الحفظ…" : isNew ? "إضافة السجل" : "حفظ التغييرات"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

src/Components/Order/archive/ArchivedOrderDetailModal.tsx

@@ -22,6 +22,14 @@ function fmtDate(iso?: string | null): string {
   return new Date(iso).toLocaleDateString("ar-SA", { year: "numeric", month: "long", day: "numeric" });
 }
 
+
+function fmtAmount(n?: string | number | null): string {
+  if (n == null) return "—";
+  const num = typeof n === "string" ? parseFloat(n) : n;
+  if (Number.isNaN(num)) return "—";
+  return `${num.toFixed(2)} ر.س`;
+}
+
 export function ArchivedOrderDetailModal({ order, onClose }: ArchivedOrderDetailModalProps) {
   const s = ORDER_STATUS_MAP[order.currentStatus] ?? ORDER_STATUS_MAP.Created;
 
@@ -53,7 +61,7 @@ export function ArchivedOrderDetailModal({ order, onClose }: ArchivedOrderDetail
           <DetailRow label="اسم المستلم" value={order.recipientName} />
           <DetailRow label="رقم الجوال" value={order.recipientPhone} mono />
           <DetailRow label="الكمية" value={String(order.quantity)} />
-          <DetailRow label="الإجمالي الفرعي" value={order.subTotal != null ? `${order.subTotal.toFixed(2)} ر.س` : "—"} mono />
+          <DetailRow label="الإجمالي الفرعي" value={fmtAmount(order.subTotal)} mono />
           <DetailRow label="تاريخ الإنشاء" value={fmtDate(order.createdAt)} />
           <DetailRow label="آخر تحديث" value={fmtDate(order.updatedAt)} />
 

src/Components/Order/archive/ArchivedOrderTable.tsx

@@ -4,9 +4,12 @@ import { Spinner } from "../../UI";
 import { ORDER_STATUS_MAP } from "../OrderDetailBanel";
 import type { ArchivedOrder } from "@/src/types/order";
 
-function fmtAmount(n?: number | null): string {
+
+function fmtAmount(n?: string | number | null): string {
   if (n == null) return "—";
-  return `${n.toFixed(2)} ر.س`;
+  const num = typeof n === "string" ? parseFloat(n) : n;
+  if (Number.isNaN(num)) return "—";
+  return `${num.toFixed(2)} ر.س`;
 }
 
 const cardStyle: React.CSSProperties = {

src/hooks/UseCarsMaintanance.ts

@@ -0,0 +1,159 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { getStoredToken } from "@/src/lib/auth";
+import { carMaintenanceService } from "@/src/services/carMaintanance.service";
+import type {
+  CarMaintenance,
+  CreateMaintenancePayload,
+  MaintenanceToastMsg,
+  UpdateMaintenancePayload,
+} from "../types/carMaintanance";
+
+// ── useCarMaintenanceList ─────────────────────────────────────────────────────
+// Loads every maintenance record for one car — used in the detail panel.
+
+export function useCarMaintenanceList(carId: string | null) {
+  const [records, setRecords] = useState<CarMaintenance[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error,   setError]   = useState<string | null>(null);
+
+  const loadRecords = useCallback(() => {
+    if (!carId) return;
+    const token = getStoredToken();
+    setLoading(true);
+    setError(null);
+    carMaintenanceService
+      .getAll(carId, token)
+      .then((res) => {
+        const payload = (res as unknown as { data: { data: CarMaintenance[] } }).data ?? res;
+        setRecords((payload as { data: CarMaintenance[] }).data ?? []);
+      })
+      .catch((err: Error) => setError(err.message))
+      .finally(() => setLoading(false));
+  }, [carId]);
+
+  useEffect(() => { loadRecords(); }, [loadRecords]);
+
+  // Remove a record from the list right away, instead of waiting on a refetch.
+  const removeRecord = useCallback((id: string) => {
+    setRecords((prev) => prev.filter((r) => r.id !== id));
+  }, []);
+
+  return { records, loading, error, loadRecords, removeRecord, setError };
+}
+
+// ── useCarMaintenanceDetail ───────────────────────────────────────────────────
+// Fetches a single maintenance record by id.
+
+export function useCarMaintenanceDetail(carId: string | null, maintenanceId: string | null) {
+  const [record,  setRecord]  = useState<CarMaintenance | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error,   setError]   = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!carId || !maintenanceId) return;
+    const token = getStoredToken();
+    setLoading(true);
+    setError(null);
+    carMaintenanceService
+      .getById(carId, maintenanceId, token)
+      .then((res) => setRecord((res as unknown as { data: CarMaintenance }).data))
+      .catch((err: Error) => setError(err.message))
+      .finally(() => setLoading(false));
+  }, [carId, maintenanceId]);
+
+  return { record, loading, error };
+}
+
+// ── useCarMaintenanceMutations ────────────────────────────────────────────────
+// Create, update, and soft-delete operations for maintenance records.
+
+interface UseCarMaintenanceMutationsOptions {
+  carId: string;
+  onSuccess: (msg: string) => void;
+  onError:   (msg: string) => void;
+  onDeleted: (id: string) => void;
+  getEditTarget: () => CarMaintenance | null;
+}
+
+export function useCarMaintenanceMutations({
+  carId,
+  onSuccess,
+  onError,
+  onDeleted,
+  getEditTarget,
+}: UseCarMaintenanceMutationsOptions) {
+  const [saving,   setSaving]   = useState(false);
+  const [deleting, setDeleting] = useState(false);
+
+  const handleFormSubmit = useCallback(
+    async (
+      payload: CreateMaintenancePayload | UpdateMaintenancePayload,
+      isNew: boolean,
+    ): Promise<boolean> => {
+      const token = getStoredToken();
+      setSaving(true);
+      try {
+        if (isNew) {
+          await carMaintenanceService.create(carId, payload as CreateMaintenancePayload, token);
+          onSuccess("تم إضافة سجل الصيانة بنجاح.");
+        } else {
+          const editTarget = getEditTarget();
+          if (!editTarget) return false;
+          await carMaintenanceService.update(
+            carId,
+            editTarget.id,
+            payload as UpdateMaintenancePayload,
+            token,
+          );
+          onSuccess("تم تحديث سجل الصيانة.");
+        }
+        return true;
+      } catch (err: unknown) {
+        // Show the backend's own message when it has one, otherwise a generic fallback.
+        onError(err instanceof Error ? err.message : "فشلت العملية.");
+        return false;
+      } finally {
+        setSaving(false);
+      }
+    },
+    [carId, onSuccess, onError, getEditTarget],
+  );
+
+  const handleDeleteConfirm = useCallback(
+    async (target: CarMaintenance) => {
+      setDeleting(true);
+      const token = getStoredToken();
+      try {
+        await carMaintenanceService.delete(carId, target.id, token);
+        onDeleted(target.id);
+        onSuccess("تم حذف سجل الصيانة بنجاح.");
+      } catch (err: unknown) {
+        onError(err instanceof Error ? err.message : "فشل الحذف.");
+      } finally {
+        setDeleting(false);
+      }
+    },
+    [carId, onSuccess, onError, onDeleted],
+  );
+
+  return { saving, deleting, handleFormSubmit, handleDeleteConfirm };
+}
+
+// ── useMaintenanceToast ────────────────────────────────────────────────────────
+// Simple toast notification state, same shape as useCars' useToast.
+
+export function useMaintenanceToast(duration = 3500) {
+  const [toast, setToast] = useState<MaintenanceToastMsg | null>(null);
+
+  const notify = useCallback(
+    (t: MaintenanceToastMsg) => {
+      setToast(t);
+      setTimeout(() => setToast(null), duration);
+    },
+    [duration],
+  );
+
+  return { toast, notify };
+}

src/hooks/archive/useArchivedOrders.ts

@@ -1,58 +1,112 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+"use client";
+
+import { useCallback, useEffect, useReducer, useState } from "react";
 import { getStoredToken } from "@/src/lib/auth";
 import { archivedOrderService } from "@/src/services/archive/archivedOrder.service";
 import type { ArchivedOrder } from "@/src/types/order";
 
 const PAGE_SIZE = 10;
 
+// ── Table state / reducer ──────────────────────────────────────────────────
+// نفس شكل TableState/TableAction اللي في useOrder.ts عشان الهوكين يفضلوا متسقين
+interface TableState {
+  orders: ArchivedOrder[];
+  loading: boolean;
+  error: string | null;
+}
+
+type TableAction =
+  | { type: "LOAD_START" }
+  | { type: "LOAD_OK"; orders: ArchivedOrder[] }
+  | { type: "LOAD_ERR"; error: 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, orders: a.orders };
+    case "LOAD_ERR":
+      return { ...s, loading: false, error: a.error };
+    case "CLEAR_ERR":
+      return { ...s, error: null };
+    default:
+      return s;
+  }
+}
+
+const initialState: TableState = {
+  orders: [],
+  loading: true,
+  error: null,
+};
+
+// ── Main hook ──────────────────────────────────────────────────────────────
 export function useArchivedOrders() {
-  const [orders, setOrders] = useState<ArchivedOrder[]>([]);
-  const [loading, setLoading] = useState(true);
+  const [state, dispatch] = useReducer(reducer, initialState);
   const [page, setPage] = useState(1);
   const [search, setSearch] = useState("");
-  const [error, setError] = useState<string | null>(null);
 
+  // ── Fetch archived orders ─────────────────────────────────────────────
   const load = useCallback(async () => {
-    setLoading(true);
+    dispatch({ type: "LOAD_START" });
     try {
       const token = getStoredToken();
       const res = await archivedOrderService.getAll(token);
-      setOrders(res.data);
-      setError(null);
+
+      // نفس الـ pattern بتاع useOrder.ts:
+      // get() بترجع axios response كامل، فـ res.data هو الـ JSON body
+      // {success, message, responseAt, data}. الـ "?? res" احتياطي لو
+      // الـ interceptor بتاع axios بيرجّع الـ body مباشرة من غير .data
+      const payload =
+        (res as unknown as { data: { data: ArchivedOrder[] } }).data ?? res;
+
+      dispatch({ type: "LOAD_OK", orders: payload.data ?? [] });
     } catch {
-      setError("تعذّر تحميل الطلبات المؤرشفة. يرجى المحاولة لاحقاً.");
-    } finally {
-      setLoading(false);
+      dispatch({
+        type: "LOAD_ERR",
+        error: "تعذّر تحميل الطلبات المؤرشفة. يرجى المحاولة لاحقاً.",
+      });
     }
   }, []);
 
-  useEffect(() => { load(); }, [load]);
+  useEffect(() => {
+    load();
+  }, [load]);
 
-  // Client-side search — endpoint has no `?search=` param in the sample payload
-  const filtered = useMemo(() => {
-    if (!search.trim()) return orders;
-    const q = search.trim().toLowerCase();
-    return orders.filter(
-      o =>
-        o.shipmentNumber.toLowerCase().includes(q) ||
-        o.recipientName.toLowerCase().includes(q) ||
-        o.recipientPhone.includes(q),
-    );
-  }, [orders, search]);
+  // ── Client-side search — الـ endpoint معندوش ?search= param ────────────
+  const filtered = !search.trim()
+    ? state.orders
+    : state.orders.filter((o) => {
+        const q = search.trim().toLowerCase();
+        return (
+          o.shipmentNumber.toLowerCase().includes(q) ||
+          o.recipientName.toLowerCase().includes(q) ||
+          o.recipientPhone.includes(q)
+        );
+      });
 
   const pages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
   const paginated = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
 
-  const handleSearch = (value: string) => {
+  // ── Search / page helpers ──────────────────────────────────────────────
+  const handleSearch = useCallback((value: string) => {
     setSearch(value);
     setPage(1);
-  };
+  }, []);
 
   return {
     orders: paginated,
     total: filtered.length,
-    loading, pages, page, search, error,
-    setPage, handleSearch, clearError: () => setError(null),
+    loading: state.loading,
+    pages,
+    page,
+    search,
+    error: state.error,
+    setPage,
+    handleSearch,
+    clearError: () => dispatch({ type: "CLEAR_ERR" }),
     refresh: load,
   };
 }

src/services/carMaintanance.service.ts

@@ -0,0 +1,80 @@
+import { get, post, patch, del } from "./api";
+import type {
+  CarMaintenance,
+  MaintenanceListResponse,
+  MaintenanceDetailResponse,
+  CreateMaintenancePayload,
+  UpdateMaintenancePayload,
+} from "@/src/types/carMaintanance";
+
+/** Build a query string for list endpoints — skips empty values. */
+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 carMaintenanceService = {
+  /**
+   * GET /cars/:carId/maintenance
+   * Fetch every maintenance record that belongs to one car.
+   *
+   * Example response:
+   * { "data": { "data": [ { "id": "...", "reason": "تغيير زيت", "cost": 150, ... } ] } }
+   */
+  getAll: (carId: string, token: string | null) =>
+    get<MaintenanceListResponse>(`cars/${carId}/maintenance`, token),
+
+  /**
+   * GET /cars/:carId/maintenance/:maintenanceId
+   * Fetch a single maintenance record with full details.
+   */
+  getById: (carId: string, maintenanceId: string, token: string | null) =>
+    get<MaintenanceDetailResponse>(`cars/${carId}/maintenance/${maintenanceId}`, token),
+
+  /**
+   * POST /cars/:carId/maintenance
+   * Create a new maintenance record for a car.
+   *
+   * Example request body:
+   * { "reason": "تغيير زيت", "cost": 150, "startAt": "2026-01-10T00:00:00.000Z" }
+   */
+  create: (carId: string, payload: CreateMaintenancePayload, token: string | null) =>
+    post<{ data: CarMaintenance }>(`cars/${carId}/maintenance`, payload, token),
+
+  /**
+   * PATCH /cars/:carId/maintenance/:maintenanceId
+   * Update an existing maintenance record (for example, closing it out
+   * by setting an endAt date, or correcting the cost).
+   */
+  update: (
+    carId: string,
+    maintenanceId: string,
+    payload: UpdateMaintenancePayload,
+    token: string | null,
+  ) =>
+    patch<{ data: CarMaintenance }>(
+      `cars/${carId}/maintenance/${maintenanceId}`,
+      payload,
+      token,
+    ),
+
+  /**
+   * DELETE /cars/:carId/maintenance/:maintenanceId
+   * Soft-delete a maintenance record (returns 204 No Content).
+   */
+  delete: (carId: string, maintenanceId: string, token: string | null) =>
+    del<void>(`cars/${carId}/maintenance/${maintenanceId}`, token),
+
+  /**
+   * GET /cars/:carId/maintenance/archived
+   * Fetch soft-deleted maintenance records for a car — mirrors the car
+   * module's archive pattern in case the backend exposes the same route.
+   */
+  getArchived: (carId: string, token: string | null) =>
+    get<MaintenanceListResponse>(`cars/${carId}/maintenance/archived`, token),
+};
+
+// Re-exported so callers can build extra filters (day/month/year, search…)
+// the same way carService does, without duplicating the helper.
+export { buildQuery as buildMaintenanceQuery };

src/types/carMaintanance.ts

@@ -0,0 +1,119 @@
+// All TypeScript interfaces for the Car Maintenance module.
+// This file follows the same pattern as src/types/car.ts so the two
+// modules feel consistent to work with.
+
+// ── Status helpers ───────────────────────────────────────────────────────────
+// A maintenance record is "ongoing" while it has no end date yet, and
+// "completed" once endAt is filled in. This is worked out on the frontend —
+// the backend does not send a status field.
+export type MaintenanceStatus = "Ongoing" | "Completed";
+
+export const MAINTENANCE_STATUS_MAP: Record<
+  MaintenanceStatus,
+  { label: string; color: string; bg: string; border: string; dot: string }
+> = {
+  Ongoing:   { label: "جارية",  color: "#854D0E", bg: "#FFFBEB", border: "#FDE68A", dot: "#D97706" },
+  Completed: { label: "منتهية", color: "#166534", bg: "#DCFCE7", border: "#BBF7D0", dot: "#16A34A" },
+};
+
+/** Works out whether a record is still open or already finished. */
+export function getMaintenanceStatus(record: Pick<CarMaintenance, "endAt">): MaintenanceStatus {
+  return record.endAt ? "Completed" : "Ongoing";
+}
+
+// ── Shared date + money helpers ──────────────────────────────────────────────
+
+export function fmtDate(iso?: string | null): string {
+  if (!iso) return "—";
+  return new Date(iso).toLocaleDateString("ar-SA", {
+    year: "numeric", month: "long", day: "numeric",
+  });
+}
+
+export function fmtDateShort(iso?: string | null): string {
+  if (!iso) return "—";
+  return new Date(iso).toLocaleDateString("ar-SA", {
+    year: "numeric", month: "short", day: "numeric",
+  });
+}
+
+export function fmtCost(cost?: number | null): string {
+  if (cost === undefined || cost === null) return "—";
+  return `${cost.toLocaleString("ar-SA")} ر.س`;
+}
+
+/** How many days a maintenance job has taken (or is still taking). */
+export function durationDays(startAt: string, endAt?: string | null): number {
+  const start = new Date(startAt).getTime();
+  const end = endAt ? new Date(endAt).getTime() : Date.now();
+  return Math.max(0, Math.round((end - start) / 86_400_000));
+}
+
+// ── Core Maintenance record ──────────────────────────────────────────────────
+
+export interface CarMaintenance {
+  id: string;
+  carId: string;
+
+  reason: string;
+  cost: number;
+  startAt: string;
+  endAt?: string | null;
+
+  isActive: boolean;
+  createdAt: string;
+  updatedAt: string;
+
+  // Optional expanded relation — present when the record is fetched
+  // together with its parent car (e.g. from a "for this car" list).
+  car?: {
+    id: string;
+    manufacturer: string;
+    model: string;
+    plateNumber: string;
+    plateLetters: string;
+  } | null;
+}
+
+// ── Payloads ──────────────────────────────────────────────────────────────────
+
+export interface CreateMaintenancePayload {
+  reason: string;
+  cost: number;
+  startAt: string;
+  endAt?: string;
+}
+
+export type UpdateMaintenancePayload = Partial<CreateMaintenancePayload> & {
+  isActive?: boolean;
+};
+
+// ── API Responses ─────────────────────────────────────────────────────────────
+
+export interface MaintenanceListResponse {
+  data: {
+    data: CarMaintenance[];
+    pagination?: { total: number; page: number; pages: number };
+    meta?: { total: number; pages: number };
+  };
+}
+
+export interface MaintenanceDetailResponse {
+  data: CarMaintenance;
+}
+
+// ── Form state ────────────────────────────────────────────────────────────────
+
+export interface MaintenanceFormErrors {
+  reason?: string;
+  cost?: string;
+  startAt?: string;
+  endAt?: string;
+}
+
+// ── Toast ─────────────────────────────────────────────────────────────────────
+
+export interface MaintenanceToastMsg {
+  type: "success" | "error";
+  message: string;
+}

src/types/order.ts

@@ -120,7 +120,7 @@ export interface ArchivedOrder {
   deliveryAddressId?: string | null;
   currentStatus: OrderStatus;
   quantity: number;
-  subTotal?: number | null;
+  subTotal?: string | number | null;   
   createdAt: string;
   updatedAt: string;
   statusHistory?: Array<{

src/validations/carMaintanance.validator.ts

@@ -0,0 +1,75 @@
+import * as yup from "yup";
+
+// ── Shared date helper ────────────────────────────────────────────────────────
+// <input type="date"> gives back "YYYY-MM-DD" — just check it parses as a real date.
+const dateString = yup
+  .string()
+  .test("valid-date", "تاريخ غير صالح", (val) => {
+    if (!val) return true; // optional, unless required elsewhere
+    return !isNaN(Date.parse(val));
+  });
+
+// ── Create schema ─────────────────────────────────────────────────────────────
+// Used when adding a brand-new maintenance record for a car.
+
+export const createMaintenanceSchema = yup.object({
+  reason: yup
+    .string()
+    .required("سبب الصيانة مطلوب")
+    .min(3, "سبب الصيانة يجب أن يكون 3 أحرف على الأقل"),
+
+  cost: yup
+    .number()
+    .typeError("التكلفة يجب أن تكون رقماً")
+    .required("التكلفة مطلوبة")
+    .min(0, "التكلفة يجب أن تكون 0 أو أكثر"),
+
+  startAt: dateString.required("تاريخ البدء مطلوب"),
+
+  // endAt is optional (the job may still be ongoing), but if it is given
+  // it must not be earlier than the start date.
+  endAt: dateString.test(
+    "after-start",
+    "تاريخ الانتهاء يجب أن يكون بعد تاريخ البدء",
+    function (val) {
+      const { startAt } = this.parent as { startAt?: string };
+      if (!val || !startAt) return true;
+      return new Date(val).getTime() >= new Date(startAt).getTime();
+    },
+  ),
+});
+
+// ── Update schema (everything optional, but same rules where present) ─────────
+
+export const updateMaintenanceSchema = yup.object({
+  reason: yup
+    .string()
+    .min(3, "سبب الصيانة يجب أن يكون 3 أحرف على الأقل")
+    .optional(),
+
+  cost: yup
+    .number()
+    .typeError("التكلفة يجب أن تكون رقماً")
+    .min(0, "التكلفة يجب أن تكون 0 أو أكثر")
+    .optional(),
+
+  startAt: dateString.optional(),
+
+  endAt: dateString.test(
+    "after-start",
+    "تاريخ الانتهاء يجب أن يكون بعد تاريخ البدء",
+    function (val) {
+      const { startAt } = this.parent as { startAt?: string };
+      if (!val || !startAt) return true;
+      return new Date(val).getTime() >= new Date(startAt).getTime();
+    },
+  ),
+
+  isActive: yup.boolean().optional(),
+});
+
+// ── Infer form error shape ────────────────────────────────────────────────────
+
+export type MaintenanceSchemaErrors = Partial<
+  Record<"reason" | "cost" | "startAt" | "endAt" | "isActive", string>
+>;