update رAddressDetailModal

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 {
-  address: ClientAddress;
-}
-
-export function AddressDetails({ address }: AddressDetailsProps) {
+function AddressDetailsBody({ address }: { address: ClientAddress }) {
   const { details, contactPerson, location } = address;
 
   return (
@@ -255,4 +252,33 @@ export function AddressDetails({ address }: AddressDetailsProps) {
       </SectionCard>
     </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>
+  );
 }