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

2026-07-06 17:41:12 +03:00
parent 25f3468d74
commit a7e53f2047
56 changed files with 3864 additions and 147 deletions
--- a/src/Components/Car_Maintanance/archive/ArchivedCarsMaintananceModal.tsx
+++ b/src/Components/Car_Maintanance/archive/ArchivedCarsMaintananceModal.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import { useState } from "react";
+import { Alert } from "../../UI";
+import { ArchivedCarMaintenanceTable } from "./ArchivedCarMaintananceTable";
+import { ArchivedCarMaintenanceDetailPanel } from "./ArchivedCarMaintananceDetailpanel";
+import { useArchivedCarMaintenance } from "@/src/hooks/archive/UseArchivedCarsMaintanance";
+import type { CarMaintenance } from "@/src/types/carMaintanance";
+
+interface ArchivedCarsMaintenanceModalProps {
+  /** A car's id to scope the archive to one vehicle, or `null` for the global (all-cars) archive. */
+  carId: string | null;
+  /** Shown in the header, e.g. "تويوتا لاند كروزر — أ ب ج 1234". Ignored for the global view. */
+  carLabel?: string;
+  onClose: () => void;
+}
+
+export function ArchivedCarsMaintenanceModal({ carId, carLabel, onClose }: ArchivedCarsMaintenanceModalProps) {
+  const [viewRecord, setViewRecord] = useState<CarMaintenance | null>(null);
+
+  const {
+    records, loading, total, pages, error,
+    page, search,
+    setPage, handleSearch, setError,
+  } = useArchivedCarMaintenance(carId);
+
+  return (
+    <div
+      role="dialog" aria-modal="true" aria-labelledby="archive-maintenance-modal-title"
+      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
+      style={{
+        position: "fixed", inset: 0, zIndex: 70,
+        background: "rgba(15,23,42,0.6)", backdropFilter: "blur(4px)",
+        display: "flex", alignItems: "flex-start", justifyContent: "center",
+        padding: "2rem 1rem", overflowY: "auto",
+      }}
+    >
+      {viewRecord && (
+        <ArchivedCarMaintenanceDetailPanel
+          record={viewRecord}
+          loading={false}
+          error={null}
+          onClose={() => setViewRecord(null)}
+        />
+      )}
+
+      <div
+        onClick={e => e.stopPropagation()}
+        style={{
+          width: "100%", maxWidth: 980,
+          background: "var(--color-surface-sunken)",
+          borderRadius: "var(--radius-xl)",
+          border: "1px solid var(--color-border)",
+          boxShadow: "0 24px 64px rgba(0,0,0,.2)",
+          overflow: "hidden",
+        }}
+      >
+        <div dir="rtl" style={{
+          display: "flex", alignItems: "center", justifyContent: "space-between",
+          padding: "1.25rem 1.5rem",
+          borderBottom: "1px solid var(--color-border)",
+          background: "var(--color-surface)",
+        }}>
+          <div>
+            <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#EA580C", fontWeight: 600, margin: 0 }}>
+              الأرشيف
+            </p>
+            <h2 id="archive-maintenance-modal-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
+              سجلات الصيانة المؤرشفة{carLabel ? ` — ${carLabel}` : ""}
+              <span style={{ marginInlineStart: 8, fontSize: 13, fontWeight: 500, color: "var(--color-text-muted)" }}>
+                ({total})
+              </span>
+            </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>
+
+        <div style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
+          <div dir="rtl" style={{ position: "relative", maxWidth: 320 }}>
+            <svg style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", width: 16, height: 16, color: "var(--color-text-hint)", pointerEvents: "none" }}
+              fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+              <circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" />
+            </svg>
+            <input
+              type="text"
+              placeholder="بحث بسبب الصيانة..."
+              value={search}
+              onChange={e => handleSearch(e.target.value)}
+              dir="rtl"
+              style={{
+                width: "100%", height: 40,
+                paddingRight: 36, paddingLeft: 12,
+                borderRadius: "var(--radius-lg)",
+                border: "1px solid var(--color-border)",
+                background: "var(--color-surface)",
+                fontSize: 13, outline: "none",
+                fontFamily: "var(--font-sans)",
+                color: "var(--color-text-primary)",
+              }}
+            />
+          </div>
+
+          {error && <Alert type="error" message={error} onClose={() => setError(null)} />}
+
+          <ArchivedCarMaintenanceTable
+            records={records}
+            loading={loading}
+            search={search}
+            page={page}
+            pages={pages}
+            showCar={!carId}
+            onView={record => setViewRecord(record)}
+            onPageChange={setPage}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}