update رAddressDetailModal

app/dashboard/clients/[clientId]/addresses/[addressesId]/page.tsx

@@ -1,100 +0,0 @@
-// app/dashboard/[clientId]/addresses/[addressesId]/page.tsx
-"use client";
-
-import { useCallback, useEffect, useState } from "react";
-import { useParams, useRouter } from "next/navigation";
-
-import { Alert, Spinner, Button } from "@/src/Components/UI";
-import { AddressDetails } from "@/src/Components/Client_Adress/AddressDetails";
-import { clientAddressService } from "@/src/services/clientAddress.service";
-import { getStoredToken } from "@/src/lib/auth";
-import type { ClientAddress } from "@/src/types/client_adresses";
-
-export default function AddressDetailsPage() {
-  const params = useParams();
-  const router = useRouter();
-
-  const clientId  = params?.clientId as string | undefined;
-  const addressId = params?.addressesId as string | undefined;
-
-  const [address, setAddress] = useState<ClientAddress | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError]     = useState<string | null>(null);
-
-  const loadAddress = useCallback(async () => {
-    if (!clientId || !addressId) return;
-    setLoading(true);
-    setError(null);
-    try {
-      const token = getStoredToken();
-      const res = await clientAddressService.getById(clientId, addressId, token);
-      // normalize in case the API returns _id instead of id
-      const raw = res.data as ClientAddress & { _id?: string };
-      setAddress({ ...raw, id: raw.id ?? raw._id ?? "" });
-    } catch {
-      setError("تعذّر تحميل بيانات العنوان. يرجى المحاولة لاحقاً.");
-    } finally {
-      setLoading(false);
-    }
-  }, [clientId, addressId]);
-
-  useEffect(() => {
-    loadAddress();
-  }, [loadAddress]);
-
-  // ── Loading ──────────────────────────────────────────────────────────────
-  if (loading) {
-    return (
-      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: "60vh", gap: 12 }}>
-        <Spinner size="sm" className="text-blue-600" />
-        <span style={{ fontSize: 13, color: "var(--color-text-muted)" }}>جارٍ تحميل بيانات العنوان…</span>
-      </div>
-    );
-  }
-
-  // ── Error ────────────────────────────────────────────────────────────────
-  if (error || !address) {
-    return (
-      <div style={{ display: "flex", flexDirection: "column", gap: "1rem", maxWidth: 640, margin: "2rem auto" }}>
-        <Alert type="error" message={error ?? "العنوان غير موجود."} />
-        <Button
-          type="button"
-          variant="secondary"
-          onClick={() => router.push(`/dashboard/${clientId}/addresses`)}
-        >
-          العودة إلى العناوين
-        </Button>
-      </div>
-    );
-  }
-
-  // ── Content ──────────────────────────────────────────────────────────────
-  return (
-    <section style={{ display: "flex", flexDirection: "column", gap: "1.25rem", maxWidth: 720, margin: "0 auto", padding: "2rem 1rem" }}>
-      <button
-        type="button"
-        onClick={() => router.push(`/dashboard/${clientId}/addresses`)}
-        style={{
-          display: "inline-flex",
-          alignItems: "center",
-          gap: 6,
-          fontSize: 12,
-          fontWeight: 600,
-          color: "var(--color-text-muted)",
-          background: "none",
-          border: "none",
-          cursor: "pointer",
-          alignSelf: "flex-start",
-          fontFamily: "var(--font-sans)",
-        }}
-      >
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-          <path d="M15 18l-6-6 6-6" />
-        </svg>
-        كل العناوين
-      </button>
-
-      <AddressDetails address={address} />
-    </section>
-  );
-}

app/dashboard/clients/[clientId]/addresses/page.tsx

@@ -8,6 +8,10 @@ import {
   ConfirmDialog,
   Toast,
   ArchiveButton,
+  Button,
+  EmptyState,
+  PageLoader,
+  InlineLoader,
 } from "@/src/Components/UI";
 
 import { useClientAddresses } from "@/src/hooks/useClientAddresses";
@@ -18,6 +22,7 @@ import type { Client, ClientFormData } from "@/src/types/client";
 import type { ClientAddress }          from "@/src/types/client_adresses";
 
 import { AddressFormModal, ClientFormModal } from "@/src/Components/Client";
+import { AddressDetailModal } from "@/src/Components/Client_Adress/AddressDetailModal";
 import { ArchivedClientsAddressesModal } from "@/src/Components/Client_Adress/archive/ArchivedClientsAddressesModal";
 import type {
   CreateAddressFormValues,
@@ -28,11 +33,11 @@ import type {
 
 function labelIcon(label: string): string {
   const map: Record<string, string> = {
-    فوترة: "💳",
+    "فوترة":           "💳",
-    شحن: "📦",
+    "شحن":             "📦",
     "المقر الرئيسي":   "🏢",
-    فرع: "🏬",
+    "فرع":             "🏬",
-    مستودع: "🏭",
+    "مستودع":          "🏭",
     billing:           "💳",
     shipping:          "📦",
     "head office":     "🏢",
@@ -43,6 +48,10 @@ function labelIcon(label: string): string {
 }
 
 // ─── AddressCard ───────────────────────────────────────────────────────────
+// CHANGE: clicking the card now opens AddressDetailModal — same pattern as
+// UserTable → UserDetailModal (viewUserId). Action buttons stop propagation
+// so they don't trigger the modal. `ActionBtn` (custom component) removed in
+// favor of the shared <Button size="sm" /> from the template.
 
 interface AddressCardProps {
   address:        ClientAddress;
@@ -53,13 +62,7 @@ interface AddressCardProps {
   settingPrimary: boolean; // true only while THIS card's request is in flight
 }
 
-function AddressCard({
+function AddressCard({ address, onView, onEdit, onDelete, onSetPrimary, settingPrimary }: AddressCardProps) {
-  address,
-  onEdit,
-  onDelete,
-  onSetPrimary,
-  settingPrimary,
-}: AddressCardProps) {
   const { details, contactPerson } = address;
   const {
     street,
@@ -75,6 +78,10 @@ function AddressCard({
 
   return (
     <div
+      onClick={onView}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") onView(); }}
       style={{
         position: "relative",
         display: "flex",
@@ -149,13 +156,7 @@ function AddressCard({
           gap: 2,
         }}
       >
-        <p
+        <p style={{ margin: 0, fontWeight: 600, color: "var(--color-text-primary)" }}>
-          style={{
-            margin: 0,
-            fontWeight: 600,
-            color: "var(--color-text-primary)",
-          }}
-        >
           {street}
         </p>
 
@@ -168,14 +169,7 @@ function AddressCard({
         </p>
 
         {(buildingNo || unitNo || additionalNo) && (
-          <p
+          <p style={{ margin: 0, fontSize: 12, color: "var(--color-text-muted)" }} dir="ltr">
-            style={{
-              margin: 0,
-              fontSize: 12,
-              color: "var(--color-text-muted)",
-            }}
-            dir="ltr"
-          >
             {buildingNo && `مبنى ${buildingNo}`}
             {unitNo && ` · وحدة ${unitNo}`}
             {additionalNo && ` · رقم إضافي ${additionalNo}`}
@@ -209,7 +203,7 @@ function AddressCard({
         </div>
       )}
 
-      {/* Actions */}
+      {/* Actions — stopPropagation so clicking them doesn't open the detail modal */}
       <div
         onClick={(e) => e.stopPropagation()}
         style={{
@@ -221,131 +215,31 @@ function AddressCard({
           borderTop: "1px solid var(--color-border)",
         }}
       >
-        <ActionBtn
+        <Button type="button" variant="secondary" size="sm" onClick={onEdit}>
-          onClick={onEdit}
-          color="#1D4ED8"
-          bg="#EFF6FF"
-          border="#BFDBFE"
-        >
           تعديل
-        </ActionBtn>
+        </Button>
 
         {!address.isPrimary && (
-          <ActionBtn
+          <Button
+            type="button"
+            variant="secondary"
+            size="sm"
             onClick={onSetPrimary}
-            disabled={settingPrimary}
+            loading={settingPrimary}
-            color="#B45309"
-            bg="#FFFBEB"
-            border="#FDE68A"
           >
-            {settingPrimary ? "جارٍ التعيين…" : "تعيين كأساسي"}
+            تعيين كأساسي
-          </ActionBtn>
+          </Button>
         )}
 
-        <ActionBtn
+        <Button
+          type="button"
+          variant="danger"
+          size="sm"
           onClick={onDelete}
-          color="#DC2626"
+          style={{ marginInlineStart: "auto" }}
-          bg="#FEF2F2"
-          border="#FECACA"
-          style={{ marginRight: "auto" }}
         >
           حذف
-        </ActionBtn>
+        </Button>
-      </div>
-    </div>
-  );
-}
-
-function ActionBtn({
-  onClick,
-  color,
-  bg,
-  border,
-  style,
-  disabled,
-  children,
-}: {
-  onClick: () => void;
-  color: string;
-  bg: string;
-  border: string;
-  style?: React.CSSProperties;
-  disabled?: boolean;
-  children: React.ReactNode;
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={disabled}
-      style={{
-        height: 30,
-        padding: "0 0.75rem",
-        borderRadius: "var(--radius-md)",
-        border: `1px solid ${border}`,
-        background: bg,
-        fontSize: 12,
-        fontWeight: 600,
-        color,
-        cursor: disabled ? "not-allowed" : "pointer",
-        opacity: disabled ? 0.6 : 1,
-        fontFamily: "var(--font-sans)",
-        transition: "opacity 150ms",
-        ...style,
-      }}
-    >
-      {children}
-    </button>
-  );
-}
-
-// ─── ClientEditModal ───────────────────────────────────────────────────────
-
-interface ClientEditModalProps {
-  client: Client;
-  onClose: () => void;
-  onSubmit: (data: ClientFormData, isNew: boolean) => Promise<boolean>;
-}
-
-function ClientEditModal({ client, onClose, onSubmit }: ClientEditModalProps) {
-  return (
-    <div
-      role="dialog"
-      aria-modal="true"
-      aria-label="تعديل بيانات العميل"
-      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: "flex-start",
-        justifyContent: "center",
-        padding: "2rem 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",
-        }}
-      >
-        <ClientFormModal
-          editClient={client}
-          onClose={onClose}
-          onSubmit={onSubmit}
-        />
       </div>
     </div>
   );
@@ -400,21 +294,20 @@ export default function ClientAddressesPage() {
   } = useClientAddresses(clientId ?? "");
 
   // ── Modal state ──────────────────────────────────────────────────────────
-  const [addrFormTarget, setAddrFormTarget] = useState<
+  const [addrFormTarget, setAddrFormTarget] = useState<ClientAddress | null | false>(false);
-    ClientAddress | null | false
-  >(false);
   const [deleteTarget,   setDeleteTarget]   = useState<ClientAddress | null>(null);
   const [deleting,       setDeleting]       = useState(false);
   const [editingClient,  setEditingClient]  = useState(false);
   // Archive browser modal open/closed — scoped to this client's addresses
   const [archiveOpen,    setArchiveOpen]    = useState(false);
+  // Address whose detail modal is open — same pattern as viewUserId/UserDetailModal
+  const [viewAddress,    setViewAddress]    = useState<ClientAddress | null>(null);
 
   // ── Address form handler ─────────────────────────────────────────────────
   const handleAddressSubmit = async (
-    data: CreateAddressFormValues | UpdateAddressFormValues,
+    data: CreateAddressFormValues | UpdateAddressFormValues
   ): Promise<boolean> => {
-    if (addrFormTarget === null)
+    if (addrFormTarget === null)  return createAddress(data as CreateAddressFormValues);
-      return createAddress(data as CreateAddressFormValues);
     if (addrFormTarget === false) return false;
     return updateAddress(addrFormTarget.id, data as UpdateAddressFormValues);
   };
@@ -448,28 +341,9 @@ export default function ClientAddressesPage() {
   };
 
   // ── Loading guard ────────────────────────────────────────────────────────
+  // CHANGE: swapped the hand-rolled spinning <div> for the template's PageLoader.
   if (!clientId || clientLoading) {
-    return (
+    return <PageLoader message="جارٍ تحميل بيانات العميل…" />;
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          minHeight: "100vh",
-        }}
-      >
-        <div
-          style={{
-            width: 40,
-            height: 40,
-            borderRadius: "50%",
-            border: "3px solid var(--color-border)",
-            borderTopColor: "var(--color-brand-600)",
-            animation: "spin 0.7s linear infinite",
-          }}
-        />
-      </div>
-    );
   }
 
   // ── Render ────────────────────────────────────────────────────────────────
@@ -477,6 +351,14 @@ export default function ClientAddressesPage() {
     <>
       <Toast notification={notification} />
 
+      {/* Address detail modal — same pattern as viewUserId → UserDetailModal */}
+      {viewAddress && (
+        <AddressDetailModal
+          address={viewAddress}
+          onClose={() => setViewAddress(null)}
+        />
+      )}
+
       {/* Address create / edit modal */}
       {addrFormTarget !== false && (
         <AddressFormModal
@@ -490,18 +372,22 @@ export default function ClientAddressesPage() {
       <ConfirmDialog
         open={!!deleteTarget}
         loading={deleting}
-        onCancel={() => {
+        onCancel={() => { if (!deleting) setDeleteTarget(null); }}
-          if (!deleting) setDeleteTarget(null);
-        }}
         onConfirm={handleDeleteConfirm}
-        title="حذف العميل"
+        title="حذف العنوان"
-        description={`هل أنت متأكد من حذف ${deleteTarget?.label ?? ""}؟ سيتم حذف جميع عناوينه أيضاً. لا يمكن التراجع عن هذا الإجراء.`}
+        description={`هل أنت متأكد من حذف ${deleteTarget?.label ?? ""}؟ لا يمكن التراجع عن هذا الإجراء.`}
       />
 
-      {/* Client edit modal */}
+      {/*
+        Client edit modal
+        CHANGE: removed the custom `ClientEditModal` wrapper that built its
+        own fixed-position backdrop by hand. `ClientFormModal` already
+        renders the shared <Modal/> internally, so wrapping it in another
+        backdrop produced two stacked overlays. We now render it directly.
+      */}
       {editingClient && client && (
-        <ClientEditModal
+        <ClientFormModal
-          client={client}
+          editClient={client}
           onClose={() => setEditingClient(false)}
           onSubmit={handleClientEditSubmit}
         />
@@ -515,9 +401,8 @@ export default function ClientAddressesPage() {
         />
       )}
 
-      <section
+      <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
-        style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}
+
-      >
         {/* ── Header ── */}
         <header
           style={{
@@ -528,145 +413,56 @@ export default function ClientAddressesPage() {
             boxShadow: "var(--shadow-card)",
           }}
         >
-          <button
+          {/* CHANGE: custom <button> → Button variant="ghost" */}
+          <Button
             type="button"
+            variant="ghost"
+            size="sm"
             onClick={() => router.push("/dashboard/clients")}
-            style={{
+            style={{ marginBottom: 12 }}
-              display: "inline-flex",
-              alignItems: "center",
-              gap: 6,
-              fontSize: 12,
-              fontWeight: 600,
-              color: "var(--color-text-muted)",
-              background: "none",
-              border: "none",
-              cursor: "pointer",
-              marginBottom: 12,
-              fontFamily: "var(--font-sans)",
-            }}
-          >
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
           >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
               <path d="M15 18l-6-6 6-6" />
             </svg>
             جميع العملاء
-          </button>
+          </Button>
 
-          <p
+          <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600 }}>
-            style={{
-              fontSize: 11,
-              letterSpacing: "0.3em",
-              textTransform: "uppercase",
-              color: "#2563EB",
-              fontWeight: 600,
-            }}
-          >
             إدارة العناوين
           </p>
 
           <div className="mt-3 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
             <div>
-              <h1
+              <h1 style={{ fontSize: "1.5rem", fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>
-                style={{
-                  fontSize: "1.5rem",
-                  fontWeight: 700,
-                  color: "var(--color-text-primary)",
-                  margin: 0,
-                }}
-              >
                 {client ? `${client.name} — العناوين` : "العناوين"}
               </h1>
-              <p
+              <p style={{ marginTop: "0.25rem", fontSize: 13, color: "var(--color-text-muted)" }}>
-                style={{
-                  marginTop: "0.25rem",
-                  fontSize: 13,
-                  color: "var(--color-text-muted)",
-                }}
-              >
                 إجمالي{" "}
-                <strong style={{ color: "var(--color-text-primary)" }}>
+                <strong style={{ color: "var(--color-text-primary)" }}>{addresses.length}</strong>{" "}
-                  {addresses.length}
-                </strong>{" "}
                 عنوان
               </p>
             </div>
 
             <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
+              {/* CHANGE: custom <button> → Button variant="secondary" */}
               {client && (
-                <button
+                <Button type="button" variant="secondary" onClick={() => setEditingClient(true)}>
-                  type="button"
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                  onClick={() => setEditingClient(true)}
-                  style={{
-                    height: 40,
-                    padding: "0 1rem",
-                    borderRadius: "var(--radius-lg)",
-                    border: "1px solid var(--color-border)",
-                    background: "var(--color-surface)",
-                    fontSize: 13,
-                    fontWeight: 600,
-                    color: "var(--color-text-secondary)",
-                    cursor: "pointer",
-                    display: "inline-flex",
-                    alignItems: "center",
-                    gap: 7,
-                    fontFamily: "var(--font-sans)",
-                  }}
-                >
-                  <svg
-                    width="13"
-                    height="13"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                  >
                     <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
                     <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
                   </svg>
                   تعديل بيانات العميل
-                </button>
+                </Button>
               )}
 
-              <button
+              {/* CHANGE: custom <button> → Button variant="primary" */}
-                type="button"
+              <Button type="button" variant="primary" onClick={() => setAddrFormTarget(null)}>
-                onClick={() => setAddrFormTarget(null)}
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                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)",
-                  boxShadow: "0 1px 4px rgba(37,99,235,.35)",
-                  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>
+              </Button>
             </div>
           </div>
 
@@ -685,15 +481,8 @@ export default function ClientAddressesPage() {
                 borderTop: "1px solid var(--color-border)",
               }}
             >
-              <span
+              <span style={{ fontWeight: 600, color: "var(--color-text-primary)" }}>{client.name}</span>
-                style={{ fontWeight: 600, color: "var(--color-text-primary)" }}
+              <a href={`mailto:${client.email}`} style={{ color: "#2563EB", textDecoration: "none" }}>
-              >
-                {client.name}
-              </span>
-              <a
-                href={`mailto:${client.email}`}
-                style={{ color: "#2563EB", textDecoration: "none" }}
-              >
                 {client.email}
               </a>
               <span>{client.phone}</span>
@@ -718,79 +507,20 @@ export default function ClientAddressesPage() {
 
         {/* ── Address grid ── */}
         {addrLoading ? (
-          <div
+          // CHANGE: hand-rolled spinning <div> → InlineLoader
-            style={{
+          <InlineLoader message="جارٍ تحميل العناوين…" />
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              padding: "4rem 0",
-              color: "var(--color-text-muted)",
-              gap: 12,
-              fontSize: 13,
-            }}
-          >
-            <div
-              style={{
-                width: 20,
-                height: 20,
-                borderRadius: "50%",
-                border: "2px solid var(--color-border)",
-                borderTopColor: "var(--color-brand-600)",
-                animation: "spin 0.7s linear infinite",
-                flexShrink: 0,
-              }}
-            />
-            جارٍ تحميل العناوين…
-          </div>
         ) : addresses.length === 0 ? (
-          <div
+          // CHANGE: custom empty-state <div> → EmptyState
-            style={{
+          <EmptyState
-              borderRadius: "var(--radius-xl)",
+            icon="📍"
-              border: "1px solid var(--color-border)",
+            title="لا توجد عناوين بعد"
-              background: "var(--color-surface)",
+            description="أضف عنواناً واحداً على الأقل حتى يتمكن العميل من استقبال الشحنات والفواتير."
-              padding: "4rem 1rem",
+            action={
-              textAlign: "center",
+              <Button type="button" variant="primary" onClick={() => setAddrFormTarget(null)}>
-              boxShadow: "var(--shadow-card)",
-            }}
-          >
-            <p style={{ fontSize: 32, margin: 0 }}>📍</p>
-            <p
-              style={{
-                marginTop: 12,
-                fontSize: 15,
-                fontWeight: 700,
-                color: "var(--color-text-primary)",
-              }}
-            >
-              لا توجد عناوين بعد
-            </p>
-            <p
-              style={{
-                marginTop: 4,
-                fontSize: 13,
-                color: "var(--color-text-muted)",
-              }}
-            >
-              أضف عنواناً واحداً على الأقل حتى يتمكن العميل من استقبال الشحنات
-              والفواتير.
-            </p>
-            <button
-              type="button"
-              onClick={() => setAddrFormTarget(null)}
-              style={{
-                marginTop: 16,
-                fontSize: 13,
-                fontWeight: 600,
-                color: "var(--color-brand-600)",
-                background: "none",
-                border: "none",
-                cursor: "pointer",
-                textDecoration: "underline",
-              }}
-            >
                 أضف أول عنوان
-            </button>
+              </Button>
-          </div>
+            }
+          />
         ) : (
           <div
             style={{
@@ -803,22 +533,19 @@ export default function ClientAddressesPage() {
               <AddressCard
                 key={addr.id}
                 address={addr}
-    onView={() => router.push(`/dashboard/${clientId}/addresses/${addr.id}`)} 
+                onView={() => setViewAddress(addr)}
                 onEdit={() => setAddrFormTarget(addr)}
                 onDelete={() => setDeleteTarget(addr)}
                 onSetPrimary={() => handleSetPrimary(addr)}
                 settingPrimary={settingPrimaryId === addr.id}
               />
-))}
+            ))}
           </div>
         )}
       </section>
 
       {/* Floating button to open the address archive for this client */}
-      <ArchiveButton
+      <ArchiveButton onClick={() => setArchiveOpen(true)} label="أرشيف العناوين" />
-        onClick={() => setArchiveOpen(true)}
-        label="أرشيف العناوين"
-      />
     </>
   );
 }

src/Components/Client_Adress/AddressDetailModal.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Button, Modal } from "../UI";
 import type { ClientAddress } from "@/src/types/client_adresses";
 
 // ─── Helpers ───────────────────────────────────────────────────────────────
@@ -124,13 +125,9 @@ function SectionCard({
   );
 }
 
-// ─── Main component ────────────────────────────────────────────────────────
+// ─── Body content — was AddressDetails.tsx, now inlined here ───────────────
 
-interface AddressDetailsProps {
+function AddressDetailsBody({ address }: { address: ClientAddress }) {
-  address: ClientAddress;
-}
-
-export function AddressDetails({ address }: AddressDetailsProps) {
   const { details, contactPerson, location } = address;
 
   return (
@@ -256,3 +253,32 @@ export function AddressDetails({ address }: AddressDetailsProps) {
     </div>
   );
 }
+
+// ─── Main export — the modal ────────────────────────────────────────────────
+
+interface AddressDetailModalProps {
+  address: ClientAddress;
+  onClose: () => void;
+}
+
+// Unlike UserDetailModal, no fetch-by-id is needed here — the address list
+// (useClientAddresses) already returns the full ClientAddress object with
+// details/contactPerson/location, so we just render what we already have.
+export function AddressDetailModal({ address, onClose }: AddressDetailModalProps) {
+  return (
+    <Modal
+      open
+      title={address.label}
+      subtitle="تفاصيل العنوان"
+      onClose={onClose}
+      size="md"
+      footer={
+        <Button type="button" variant="secondary" onClick={onClose}>
+          إغلاق
+        </Button>
+      }
+    >
+      <AddressDetailsBody address={address} />
+    </Modal>
+  );
+}