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

src/Components/Branch/archive/ArchivedBranchDetailModal.tsx

@@ -0,0 +1,206 @@
+"use client";
+
+import { useEffect } from "react";
+import type { ArchivedBranch } from "@/src/types/branch";
+
+interface ArchivedBranchDetailModalProps {
+  branch:  ArchivedBranch;
+  onClose: () => void;
+}
+
+// ── small helper components ───────────────────────────────────────────────────
+function DetailRow({ label, value }: { label: string; value?: string | null }) {
+  return (
+    <div style={{
+      display: "flex", flexDirection: "column", gap: 4,
+      padding: "0.75rem 0",
+      borderBottom: "1px solid var(--color-border)",
+    }}>
+      <span style={{ fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.15em", color: "var(--color-text-muted)" }}>
+        {label}
+      </span>
+      <span style={{ fontSize: 13, fontWeight: 500, color: value ? "var(--color-text-primary)" : "var(--color-text-hint)" }}>
+        {value || "—"}
+      </span>
+    </div>
+  );
+}
+
+function StatusBadge({ active }: { active: boolean }) {
+  return (
+    <span style={{
+      display: "inline-flex", alignItems: "center", gap: 6,
+      borderRadius: "var(--radius-full)",
+      border: active ? "1px solid #BBF7D0" : "1px solid #FECACA",
+      background: active ? "#DCFCE7" : "#FEF2F2",
+      padding: "0.25rem 0.75rem",
+      fontSize: 12, fontWeight: 600,
+      color: active ? "#166534" : "#991B1B",
+    }}>
+      <span style={{ width: 6, height: 6, borderRadius: "50%", background: active ? "#16A34A" : "#DC2626" }} />
+      {active ? "نشط" : "معطل"}
+    </span>
+  );
+}
+
+function BranchIcon() {
+  return (
+    <div style={{
+      width: 64, height: 64, borderRadius: "50%",
+      background: "linear-gradient(135deg, #EA580C 0%, #B91C1C 100%)",
+      display: "flex", alignItems: "center", justifyContent: "center",
+      flexShrink: 0,
+      boxShadow: "0 4px 12px rgba(234,88,12,.3)",
+    }}>
+      <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#FFF" strokeWidth="2">
+        <path d="M3 21h18" /><path d="M5 21V7l8-4v18" /><path d="M19 21V11l-6-4" />
+        <path d="M9 9v.01M9 12v.01M9 15v.01M9 18v.01" />
+      </svg>
+    </div>
+  );
+}
+
+// ── main component ────────────────────────────────────────────────────────────
+// NOTE: there is no GET /branches/archived/{id} route on the backend, so this
+// modal does NOT fetch — it just renders the ArchivedBranch object that was
+// already loaded from GET /branches/archived (passed down from the table).
+export function ArchivedBranchDetailModal({ branch, onClose }: ArchivedBranchDetailModalProps) {
+  // close on Escape
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onClose]);
+
+  // ── helpers ───────────────────────────────────────────────────────────────
+  const fmt = (iso?: string | null) =>
+    iso ? new Date(iso).toLocaleDateString("ar-SA", { year: "numeric", month: "long", day: "numeric" }) : null;
+
+  const fullAddress = (b: ArchivedBranch) =>
+    [b.street, b.district, b.city, b.state, b.country].filter(Boolean).join("، ") || null;
+
+  // ── render ────────────────────────────────────────────────────────────────
+  return (
+    <div
+      role="dialog" aria-modal="true" aria-labelledby="archived-branch-detail-title"
+      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
+      style={{
+        position: "fixed", inset: 0, zIndex: 55,
+        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",
+          display: "flex", flexDirection: "column",
+        }}
+      >
+        {/* ── 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: "#EA580C", fontWeight: 600, margin: 0 }}>
+              فرع مؤرشف
+            </p>
+            <h2 id="archived-branch-detail-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
+              {branch.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>
+
+        {/* ── body ── */}
+        <div style={{ padding: "1.5rem", overflowY: "auto", maxHeight: "70vh" }}>
+          <div style={{ display: "flex", flexDirection: "column", gap: 0 }} dir="rtl">
+
+            {/* icon + name + status row */}
+            <div style={{
+              display: "flex", alignItems: "center", gap: "1rem",
+              padding: "0 0 1.25rem",
+              borderBottom: "1px solid var(--color-border)",
+              marginBottom: "0.25rem",
+            }}>
+              <BranchIcon />
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <p style={{ fontSize: 16, fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>{branch.name}</p>
+                <p style={{ marginTop: 3, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--color-text-muted)" }}>
+                  #{branch.id}
+                </p>
+                <div style={{ marginTop: 8 }}>
+                  <StatusBadge active={branch.isActive} />
+                </div>
+              </div>
+            </div>
+
+            {/* detail rows — every field requested */}
+            <DetailRow label="رقم الهاتف"        value={branch.phone} />
+            <DetailRow label="البريد الإلكتروني"  value={branch.email} />
+            <DetailRow label="الدولة"             value={branch.country} />
+            <DetailRow label="المدينة"            value={branch.city} />
+            <DetailRow label="المنطقة"            value={branch.state} />
+            <DetailRow label="الحي"               value={branch.district} />
+            <DetailRow label="الشارع"             value={branch.street} />
+            <DetailRow label="العنوان الكامل"     value={fullAddress(branch)} />
+            <DetailRow label="رقم المبنى"         value={branch.buildingNo} />
+            <DetailRow label="رقم الوحدة"         value={branch.unitNo} />
+            <DetailRow label="الرمز البريدي"      value={branch.zipCode} />
+            <DetailRow
+              label="الموقع الجغرافي"
+              value={branch.latitude != null && branch.longitude != null
+                ? `${branch.latitude}, ${branch.longitude}`
+                : null}
+            />
+            <DetailRow label="تاريخ الإنشاء"      value={fmt(branch.createdAt)} />
+            <DetailRow label="آخر تحديث"          value={fmt(branch.updatedAt)} />
+          </div>
+        </div>
+
+        {/* ── footer ── */}
+        <div style={{
+          padding: "1rem 1.5rem",
+          borderTop: "1px solid var(--color-border)",
+          background: "var(--color-surface-muted)",
+          display: "flex", justifyContent: "flex-end",
+        }}>
+          <button
+            type="button" onClick={onClose}
+            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>
+      </div>
+    </div>
+  );
+}

src/Components/Branch/archive/ArchivedBranchTable.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { Spinner } from "../../UI";
+import type { ArchivedBranch } from "@/src/types/branch";
+
+// ── status badge ─────────────────────────────────────────────────────────────
+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>
+  );
+}
+
+// ── icon button ──────────────────────────────────────────────────────────────
+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>
+  );
+}
+
+// ── card / header 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)",
+};
+
+// ── Props ────────────────────────────────────────────────────────────────────
+interface ArchivedBranchTableProps {
+  branches:     ArchivedBranch[];
+  loading:      boolean;
+  search:       string;
+  page:         number;
+  pages:        number;
+  onView:       (branch: ArchivedBranch) => void;
+  onPageChange: (p: number) => void;
+}
+
+// ── main table ───────────────────────────────────────────────────────────────
+export function ArchivedBranchTable({ branches, loading, search, page, pages, onView, onPageChange }: ArchivedBranchTableProps) {
+  return (
+    <div style={cardStyle}>
+      {/* column headers */}
+      <div dir="rtl" style={{ display: "grid", gridTemplateColumns: "2fr 1.5fr 1fr 1fr 1fr 100px", ...thStyle }}>
+        <span>الفرع</span>
+        <span>المدينة</span>
+        <span>الحالة</span>
+        <span style={{ textAlign: "center" }}>تاريخ الإنشاء</span>
+        <span style={{ textAlign: "center" }}>آخر تحديث</span>
+        <span style={{ textAlign: "center" }}>إجراءات</span>
+      </div>
+
+      {/* loading 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>
+      ) : branches.length === 0 ? (
+        /* empty state */
+        <div style={{ textAlign: "center", padding: "4rem 1rem" }}>
+          <p style={{ fontSize: 13, color: "var(--color-text-muted)" }}>
+            {search ? `لا توجد نتائج لـ "${search}"` : "لا توجد فروع في الأرشيف."}
+          </p>
+        </div>
+      ) : (
+        /* data rows */
+        <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
+          {branches.map((b, i) => (
+            <li key={b.id} style={{
+              display: "grid", gridTemplateColumns: "2fr 1.5fr 1fr 1fr 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, fontSize: 11, color: "var(--color-text-muted)" }}>{b.street}</p>
+              </div>
+              <span style={{ color: "var(--color-text-secondary)" }}>{b.city || "—"}</span>
+              <StatusBadge active={b.isActive} />
+              <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>
+              <span style={{ textAlign: "center", fontSize: 11, color: "var(--color-text-muted)" }}>
+                {new Date(b.updatedAt).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" })}
+              </span>
+              <div style={{ display: "flex", justifyContent: "center", gap: 4 }}>
+                {/* view only — delete/restore not implemented yet */}
+                <IconBtn title={`عرض ${b.name}`} color="#059669" bg="#ECFDF5" borderColor="#A7F3D0" onClick={() => onView(b)}>
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                    <circle cx="12" cy="12" r="3" />
+                  </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>
+  );
+}

src/Components/Branch/archive/ArchivedBranchesModal.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { useState } from "react";
+import { Alert } from "../../UI";
+import { ArchivedBranchTable } from "./ArchivedBranchTable";
+import { ArchivedBranchDetailModal } from "./ArchivedBranchDetailModal";
+import { useArchivedBranches } from "@/src/hooks/archive/useArchiveBranch";
+import type { ArchivedBranch } from "@/src/types/branch";
+
+interface ArchivedBranchesModalProps {
+  onClose: () => void;
+}
+
+export function ArchivedBranchesModal({ onClose }: ArchivedBranchesModalProps) {
+  // hold the full object, not just the id — no GET /branches/archived/{id} route exists
+  const [viewBranch, setViewBranch] = useState<ArchivedBranch | null>(null);
+
+  const {
+    branches, loading, total, pages, error,
+    page, search,
+    setPage, handleSearch, clearError,
+  } = useArchivedBranches();
+
+  return (
+    <div
+      role="dialog" aria-modal="true" aria-labelledby="branch-archive-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",
+      }}
+    >
+      {viewBranch && (
+        <ArchivedBranchDetailModal branch={viewBranch} onClose={() => setViewBranch(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="branch-archive-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 */}
+          <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>
+
+          {/* general fetch error — fallback UI */}
+          {error && <Alert type="error" message={error} onClose={clearError} />}
+
+          <ArchivedBranchTable
+            branches={branches}
+            loading={loading}
+            search={search}
+            page={page}
+            pages={pages}
+            onView={branch => setViewBranch(branch)}
+            onPageChange={setPage}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}