The client files, client address files, and order files have been modified to implement all CRUD operations and endpoints related to the archive.

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

@@ -3,14 +3,19 @@
 import { useCallback, useEffect, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 
-import { Alert, ConfirmDialog, Toast, ArchiveButton } from "@/src/Components/UI";
+import {
+  Alert,
+  ConfirmDialog,
+  Toast,
+  ArchiveButton,
+} from "@/src/Components/UI";
 
 import { useClientAddresses } from "@/src/hooks/useClientAddresses";
-import { clientService }      from "@/src/services/client.service";
-import { getStoredToken }     from "@/src/lib/auth";
+import { clientService } from "@/src/services/client.service";
+import { getStoredToken } from "@/src/lib/auth";
 
 import type { Client, ClientFormData } from "@/src/types/client";
-import type { ClientAddress }          from "@/src/types/client_adresses";
+import type { ClientAddress } from "@/src/types/client_adresses";
 
 import { AddressFormModal, ClientFormModal } from "@/src/Components/Client";
 import { ArchivedClientsAddressesModal } from "@/src/Components/Client_Adress/archive/ArchivedClientsAddressesModal";
@@ -23,16 +28,16 @@ import type {
 
 function labelIcon(label: string): string {
   const map: Record<string, string> = {
-    "فوترة":           "💳",
-    "شحن":             "📦",
-    "المقر الرئيسي":   "🏢",
-    "فرع":             "🏬",
-    "مستودع":          "🏭",
-    billing:           "💳",
-    shipping:          "📦",
-    "head office":     "🏢",
-    branch:            "🏬",
-    warehouse:         "🏭",
+    فوترة: "💳",
+    شحن: "📦",
+    "المقر الرئيسي": "🏢",
+    فرع: "🏬",
+    مستودع: "🏭",
+    billing: "💳",
+    shipping: "📦",
+    "head office": "🏢",
+    branch: "🏬",
+    warehouse: "🏭",
   };
   return map[label.toLowerCase()] ?? "📍";
 }
@@ -40,14 +45,21 @@ function labelIcon(label: string): string {
 // ─── AddressCard ───────────────────────────────────────────────────────────
 
 interface AddressCardProps {
-  address:        ClientAddress;
-  onEdit:         () => void;
-  onDelete:       () => void;
-  onSetPrimary:   () => void;
+  address: ClientAddress;
+  onView:         () => void;
+  onEdit: () => void;
+  onDelete: () => void;
+  onSetPrimary: () => void;
   settingPrimary: boolean; // true only while THIS card's request is in flight
 }
 
-function AddressCard({ address, onEdit, onDelete, onSetPrimary, settingPrimary }: AddressCardProps) {
+function AddressCard({
+  address,
+  onEdit,
+  onDelete,
+  onSetPrimary,
+  settingPrimary,
+}: AddressCardProps) {
   const { details, contactPerson } = address;
   const {
     street,
@@ -73,6 +85,7 @@ function AddressCard({ address, onEdit, onDelete, onSetPrimary, settingPrimary }
         padding: "1.25rem",
         background: "var(--color-surface)",
         boxShadow: "var(--shadow-card)",
+        cursor: "pointer",  
       }}
     >
       {/* Label row */}
@@ -136,7 +149,13 @@ function AddressCard({ address, onEdit, onDelete, onSetPrimary, settingPrimary }
           gap: 2,
         }}
       >
-        <p style={{ margin: 0, fontWeight: 600, color: "var(--color-text-primary)" }}>
+        <p
+          style={{
+            margin: 0,
+            fontWeight: 600,
+            color: "var(--color-text-primary)",
+          }}
+        >
           {street}
         </p>
 
@@ -149,7 +168,14 @@ function AddressCard({ address, onEdit, onDelete, onSetPrimary, settingPrimary }
         </p>
 
         {(buildingNo || unitNo || additionalNo) && (
-          <p style={{ margin: 0, fontSize: 12, color: "var(--color-text-muted)" }} dir="ltr">
+          <p
+            style={{
+              margin: 0,
+              fontSize: 12,
+              color: "var(--color-text-muted)",
+            }}
+            dir="ltr"
+          >
             {buildingNo && `مبنى ${buildingNo}`}
             {unitNo && ` · وحدة ${unitNo}`}
             {additionalNo && ` · رقم إضافي ${additionalNo}`}
@@ -185,6 +211,7 @@ function AddressCard({ address, onEdit, onDelete, onSetPrimary, settingPrimary }
 
       {/* Actions */}
       <div
+          onClick={(e) => e.stopPropagation()} 
         style={{
           display: "flex",
           flexWrap: "wrap",
@@ -194,7 +221,12 @@ function AddressCard({ address, onEdit, onDelete, onSetPrimary, settingPrimary }
           borderTop: "1px solid var(--color-border)",
         }}
       >
-        <ActionBtn onClick={onEdit} color="#1D4ED8" bg="#EFF6FF" border="#BFDBFE">
+        <ActionBtn
+          onClick={onEdit}
+          color="#1D4ED8"
+          bg="#EFF6FF"
+          border="#BFDBFE"
+        >
           تعديل
         </ActionBtn>
 
@@ -233,13 +265,13 @@ function ActionBtn({
   disabled,
   children,
 }: {
-  onClick:   () => void;
-  color:     string;
-  bg:        string;
-  border:    string;
-  style?:    React.CSSProperties;
+  onClick: () => void;
+  color: string;
+  bg: string;
+  border: string;
+  style?: React.CSSProperties;
   disabled?: boolean;
-  children:  React.ReactNode;
+  children: React.ReactNode;
 }) {
   return (
     <button
@@ -270,8 +302,8 @@ function ActionBtn({
 // ─── ClientEditModal ───────────────────────────────────────────────────────
 
 interface ClientEditModalProps {
-  client:   Client;
-  onClose:  () => void;
+  client: Client;
+  onClose: () => void;
   onSubmit: (data: ClientFormData, isNew: boolean) => Promise<boolean>;
 }
 
@@ -281,7 +313,9 @@ function ClientEditModal({ client, onClose, onSubmit }: ClientEditModalProps) {
       role="dialog"
       aria-modal="true"
       aria-label="تعديل بيانات العميل"
-      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
       style={{
         position: "fixed",
         inset: 0,
@@ -320,8 +354,8 @@ function ClientEditModal({ client, onClose, onSubmit }: ClientEditModalProps) {
 // ─── Page ──────────────────────────────────────────────────────────────────
 
 export default function ClientAddressesPage() {
-  const params   = useParams();
-  const router   = useRouter();
+  const params = useParams();
+  const router = useRouter();
 
   const clientId = (params?.clientId ?? params?.id) as string | undefined;
 
@@ -332,7 +366,7 @@ export default function ClientAddressesPage() {
   }, [clientId]);
 
   // ── Parent client ────────────────────────────────────────────────────────
-  const [client, setClient]               = useState<Client | null>(null);
+  const [client, setClient] = useState<Client | null>(null);
   const [clientLoading, setClientLoading] = useState(true);
 
   const loadClient = useCallback(() => {
@@ -341,7 +375,7 @@ export default function ClientAddressesPage() {
       setClientLoading(true);
       clientService
         .getById(clientId, getStoredToken())
-        .then((res) => setClient(res.data))
+        .then((res) => setClient(res))
         .catch(() => router.replace("/dashboard/clients"))
         .finally(() => setClientLoading(false));
     });
@@ -366,18 +400,21 @@ export default function ClientAddressesPage() {
   } = useClientAddresses(clientId ?? "");
 
   // ── Modal state ──────────────────────────────────────────────────────────
-  const [addrFormTarget, setAddrFormTarget] = useState<ClientAddress | null | false>(false);
-  const [deleteTarget,   setDeleteTarget]   = useState<ClientAddress | null>(null);
-  const [deleting,       setDeleting]       = useState(false);
-  const [editingClient,  setEditingClient]  = useState(false);
+  const [addrFormTarget, setAddrFormTarget] = useState<
+    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);
+  const [archiveOpen, setArchiveOpen] = useState(false);
 
   // ── Address form handler ─────────────────────────────────────────────────
   const handleAddressSubmit = async (
-    data: CreateAddressFormValues | UpdateAddressFormValues
+    data: CreateAddressFormValues | UpdateAddressFormValues,
   ): Promise<boolean> => {
-    if (addrFormTarget === null)  return createAddress(data as CreateAddressFormValues);
+    if (addrFormTarget === null)
+      return createAddress(data as CreateAddressFormValues);
     if (addrFormTarget === false) return false;
     return updateAddress(addrFormTarget.id, data as UpdateAddressFormValues);
   };
@@ -403,7 +440,7 @@ export default function ClientAddressesPage() {
     if (!client) return false;
     try {
       const res = await clientService.update(client.id, data, getStoredToken());
-      setClient(res.data);
+      setClient(res);
       return true;
     } catch {
       return false;
@@ -413,7 +450,14 @@ export default function ClientAddressesPage() {
   // ── Loading guard ────────────────────────────────────────────────────────
   if (!clientId || clientLoading) {
     return (
-      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: "100vh" }}>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          minHeight: "100vh",
+        }}
+      >
         <div
           style={{
             width: 40,
@@ -446,7 +490,9 @@ export default function ClientAddressesPage() {
       <ConfirmDialog
         open={!!deleteTarget}
         loading={deleting}
-        onCancel={() => { if (!deleting) setDeleteTarget(null); }}
+        onCancel={() => {
+          if (!deleting) setDeleteTarget(null);
+        }}
         onConfirm={handleDeleteConfirm}
         title="حذف العميل"
         description={`هل أنت متأكد من حذف ${deleteTarget?.label ?? ""}؟ سيتم حذف جميع عناوينه أيضاً. لا يمكن التراجع عن هذا الإجراء.`}
@@ -469,8 +515,9 @@ export default function ClientAddressesPage() {
         />
       )}
 
-      <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
-
+      <section
+        style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}
+      >
         {/* ── Header ── */}
         <header
           style={{
@@ -498,24 +545,54 @@ export default function ClientAddressesPage() {
               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>
 
-          <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600 }}>
+          <p
+            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 style={{ fontSize: "1.5rem", fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>
+              <h1
+                style={{
+                  fontSize: "1.5rem",
+                  fontWeight: 700,
+                  color: "var(--color-text-primary)",
+                  margin: 0,
+                }}
+              >
                 {client ? `${client.name} — العناوين` : "العناوين"}
               </h1>
-              <p style={{ marginTop: "0.25rem", fontSize: 13, color: "var(--color-text-muted)" }}>
+              <p
+                style={{
+                  marginTop: "0.25rem",
+                  fontSize: 13,
+                  color: "var(--color-text-muted)",
+                }}
+              >
                 إجمالي{" "}
-                <strong style={{ color: "var(--color-text-primary)" }}>{addresses.length}</strong>{" "}
+                <strong style={{ color: "var(--color-text-primary)" }}>
+                  {addresses.length}
+                </strong>{" "}
                 عنوان
               </p>
             </div>
@@ -541,7 +618,14 @@ export default function ClientAddressesPage() {
                     fontFamily: "var(--font-sans)",
                   }}
                 >
-                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <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>
@@ -570,7 +654,14 @@ export default function ClientAddressesPage() {
                   whiteSpace: "nowrap",
                 }}
               >
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                <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>
@@ -594,8 +685,15 @@ export default function ClientAddressesPage() {
                 borderTop: "1px solid var(--color-border)",
               }}
             >
-              <span style={{ fontWeight: 600, color: "var(--color-text-primary)" }}>{client.name}</span>
-              <a href={`mailto:${client.email}`} style={{ color: "#2563EB", textDecoration: "none" }}>
+              <span
+                style={{ fontWeight: 600, color: "var(--color-text-primary)" }}
+              >
+                {client.name}
+              </span>
+              <a
+                href={`mailto:${client.email}`}
+                style={{ color: "#2563EB", textDecoration: "none" }}
+              >
                 {client.email}
               </a>
               <span>{client.phone}</span>
@@ -620,7 +718,17 @@ export default function ClientAddressesPage() {
 
         {/* ── Address grid ── */}
         {addrLoading ? (
-          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", padding: "4rem 0", color: "var(--color-text-muted)", gap: 12, fontSize: 13 }}>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: "4rem 0",
+              color: "var(--color-text-muted)",
+              gap: 12,
+              fontSize: 13,
+            }}
+          >
             <div
               style={{
                 width: 20,
@@ -646,16 +754,39 @@ export default function ClientAddressesPage() {
             }}
           >
             <p style={{ fontSize: 32, margin: 0 }}>📍</p>
-            <p style={{ marginTop: 12, fontSize: 15, fontWeight: 700, color: "var(--color-text-primary)" }}>
+            <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
+              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" }}
+              style={{
+                marginTop: 16,
+                fontSize: 13,
+                fontWeight: 600,
+                color: "var(--color-brand-600)",
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                textDecoration: "underline",
+              }}
             >
               أضف أول عنوان
             </button>
@@ -668,22 +799,26 @@ export default function ClientAddressesPage() {
               gap: "1rem",
             }}
           >
-            {addresses.map((addr) => (
-              <AddressCard
-                key={addr.id}
-                address={addr}
-                onEdit={() => setAddrFormTarget(addr)}
-                onDelete={() => setDeleteTarget(addr)}
-                onSetPrimary={() => handleSetPrimary(addr)}
-                settingPrimary={settingPrimaryId === addr.id}
-              />
-            ))}
+           {addresses.map((addr) => (
+  <AddressCard
+    key={addr.id}
+    address={addr}
+    onView={() => router.push(`/dashboard/${clientId}/addresses/${addr.id}`)} 
+    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 onClick={() => setArchiveOpen(true)} label="أرشيف العناوين" />
+      <ArchiveButton
+        onClick={() => setArchiveOpen(true)}
+        label="أرشيف العناوين"
+      />
     </>
   );
-}
+}