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/Client_Adress/archive/ArchivedClientsAddressesModal.tsx
+++ b/src/Components/Client_Adress/archive/ArchivedClientsAddressesModal.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import { useState } from "react";
+import { Alert } from "../../UI";
+import { ArchivedClientAddressesTable } from "./ArchivedClientAddressesTable";
+import { ArchivedClientAddressesDetailModal } from "./ArchivedClientAddressesDetailModal";
+import { useArchivedClientAddresses } from "@/src/hooks/archive/useArchiveClientAdresses";
+import type { ArchivedClientAddress } from "@/src/types/client_adresses";
+
+interface ArchivedClientsAddressesModalProps {
+  onClose: () => void;
+  /** Optional — scopes the archive to a single client's addresses.
+   *  Pass the current clientId when opened from a client's addresses page;
+   *  omit to browse the full cross-client archive. */
+  clientId?: string;
+}
+
+export function ArchivedClientsAddressesModal({ onClose, clientId }: ArchivedClientsAddressesModalProps) {
+  const [viewAddress, setViewAddress] = useState<ArchivedClientAddress | null>(null);
+
+  const {
+    addresses, total, loading, error, search,
+    handleSearch, clearError,
+  } = useArchivedClientAddresses(clientId);
+
+  return (
+    <div
+      role="dialog" aria-modal="true" aria-labelledby="archive-address-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",
+      }}
+    >
+      {viewAddress && (
+        <ArchivedClientAddressesDetailModal address={viewAddress} onClose={() => setViewAddress(null)} />
+      )}
+
+      <div
+        onClick={e => e.stopPropagation()}
+        style={{
+          width: "100%", maxWidth: 920,
+          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",
+        }}
+      >
+        {/* header */}
+        <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-address-modal-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
+              العناوين المؤرشفة
+              <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>
+
+        {/* body */}
+        <div style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
+          {/* search — client-side only: this endpoint has no server-side search/pagination */}
+          <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={clearError} />}
+
+          <ArchivedClientAddressesTable
+            addresses={addresses}
+            loading={loading}
+            search={search}
+            onView={setViewAddress}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}