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/[addressesId]/page.tsx

@@ -1,339 +1,100 @@
+// app/dashboard/[clientId]/addresses/[addressesId]/page.tsx
 "use client";
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 
-import { Alert, ConfirmDialog, Toast }         from "@/src/Components/UI";
+import { Alert, Spinner, Button } from "@/src/Components/UI";
-import { AddressFormModal }                    from "@/src/Components/Client";
+import { AddressDetails } from "@/src/Components/Client_Adress/AddressDetails";
-import { AddressDetails }                      from "@/src/Components/Client_Adress/AddressDetails";
+import { clientAddressService } from "@/src/services/clientAddress.service";
-import { clientAddressService }                from "@/src/services/clientAddress.service";
+import { getStoredToken } from "@/src/lib/auth";
-import { clientService }                       from "@/src/services/client.service";
+import type { ClientAddress } from "@/src/types/client_adresses";
-import { getStoredToken }                      from "@/src/lib/auth";
 
-import type { Client }            from "@/src/types/client";
+export default function AddressDetailsPage() {
-import type { ClientAddress }     from "@/src/types/client_adresses";
+  const params = useParams();
-import type { ToastNotification } from "@/src/Components/UI";
+  const router = useRouter();
-import type {
-  CreateAddressFormValues,
-  UpdateAddressFormValues,
-} from "@/src/validations/client_address.validator";
 
-// ─── Page ──────────────────────────────────────────────────────────────────
+  const clientId  = params?.clientId as string | undefined;
+  const addressId = params?.addressesId as string | undefined;
 
-export default function AddressDetailPage() {
-  const params   = useParams();
-  const router   = useRouter();
-
-  const clientId  = (params?.clientId  ?? params?.id) as string | undefined;
-  const addressId = params?.addressId as string | undefined;
-
-  // ── Data state ───────────────────────────────────────────────────────────
   const [address, setAddress] = useState<ClientAddress | null>(null);
-  const [client,  setClient]  = useState<Client | null>(null);
   const [loading, setLoading] = useState(true);
-  const [error,   setError]   = useState<string | null>(null);
+  const [error, setError]     = useState<string | null>(null);
 
-  // ── Modal state ──────────────────────────────────────────────────────────
+  const loadAddress = useCallback(async () => {
-  const [editOpen,   setEditOpen]   = useState(false);
-  const [deleteOpen, setDeleteOpen] = useState(false);
-  const [deleting,   setDeleting]   = useState(false);
-
-  // ── Toast ────────────────────────────────────────────────────────────────
-  const [notification, setNotification] = useState<ToastNotification | null>(null);
-
-  const notify = (n: ToastNotification) => {
-    setNotification(n);
-    setTimeout(() => setNotification(null), 4000);
-  };
-
-  // ── Fetch ────────────────────────────────────────────────────────────────
-  useEffect(() => {
     if (!clientId || !addressId) return;
     setLoading(true);
-
+    setError(null);
-    Promise.all([
+    try {
-      clientAddressService.getById(clientId, addressId, getStoredToken()),
+      const token = getStoredToken();
-      clientService.getById(clientId, getStoredToken()),
+      const res = await clientAddressService.getById(clientId, addressId, token);
-    ])
+      // normalize in case the API returns _id instead of id
-      .then(([addrRes, clientRes]) => {
+      const raw = res.data as ClientAddress & { _id?: string };
-        const raw = (addrRes as any).data ?? addrRes;
+      setAddress({ ...raw, id: raw.id ?? raw._id ?? "" });
-        setAddress({ ...raw, id: raw.id ?? raw._id });
+    } catch {
-        setClient(clientRes?.data);
+      setError("تعذّر تحميل بيانات العنوان. يرجى المحاولة لاحقاً.");
-      })
+    } finally {
-      .catch(() => setError("تعذّر تحميل بيانات العنوان. يرجى المحاولة مجدداً."))
+      setLoading(false);
-      .finally(() => setLoading(false));
+    }
   }, [clientId, addressId]);
 
-  // ── Update ───────────────────────────────────────────────────────────────
+  useEffect(() => {
-  const handleUpdateSubmit = async (
+    loadAddress();
-    data: CreateAddressFormValues | UpdateAddressFormValues
+  }, [loadAddress]);
-  ): Promise<boolean> => {
-    if (!clientId || !addressId) return false;
-    try {
-      const res = await clientAddressService.update(
-        clientId,
-        addressId,
-        data as UpdateAddressFormValues,
-        getStoredToken()
-      );
-      const raw = (res as any).data ?? res;
-      setAddress({ ...raw, id: raw.id ?? raw._id });
-      notify({ type: "success", message: "تم تحديث العنوان بنجاح." });
-      return true;
-    } catch (err) {
-      notify({
-        type: "error",
-        message: err instanceof Error ? err.message : "تعذّر تحديث العنوان.",
-      });
-      return false;
-    }
-  };
 
-  // ── Delete ───────────────────────────────────────────────────────────────
+  // ── Loading ──────────────────────────────────────────────────────────────
-  const handleDeleteConfirm = async () => {
-    if (!clientId || !addressId || deleting) return;
-    setDeleting(true);
-    try {
-      await clientAddressService.delete(clientId, addressId, getStoredToken());
-      notify({ type: "success", message: "تم حذف العنوان بنجاح." });
-      // short delay so the toast shows before navigation
-      setTimeout(() => {
-        router.replace(`/dashboard/clients/${clientId}/addresses`);
-      }, 700);
-    } catch (err) {
-      notify({
-        type: "error",
-        message: err instanceof Error ? err.message : "تعذّر حذف العنوان.",
-      });
-      setDeleting(false);
-    }
-  };
-
-  // ── Guards ───────────────────────────────────────────────────────────────
   if (loading) {
     return (
-      <div
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: "60vh", gap: 12 }}>
-        style={{
+        <Spinner size="sm" className="text-blue-600" />
-          display: "flex",
+        <span style={{ fontSize: 13, color: "var(--color-text-muted)" }}>جارٍ تحميل بيانات العنوان…</span>
-          alignItems: "center",
-          justifyContent: "center",
-          minHeight: "60vh",
-        }}
-      >
-        <div
-          style={{
-            width: 36,
-            height: 36,
-            borderRadius: "50%",
-            border: "3px solid var(--color-border)",
-            borderTopColor: "var(--color-brand-600)",
-            animation: "spin 0.7s linear infinite",
-          }}
-        />
       </div>
     );
   }
 
+  // ── Error ────────────────────────────────────────────────────────────────
   if (error || !address) {
     return (
-      <section style={{ padding: "2rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
+      <div style={{ display: "flex", flexDirection: "column", gap: "1rem", maxWidth: 640, margin: "2rem auto" }}>
-        <Alert type="error" message={error ?? "لم يتم العثور على العنوان."} />
+        <Alert type="error" message={error ?? "العنوان غير موجود."} />
-        <button
+        <Button
           type="button"
-          onClick={() => router.back()}
+          variant="secondary"
-          style={{
+          onClick={() => router.push(`/dashboard/${clientId}/addresses`)}
-            alignSelf: "flex-start",
-            fontSize: 13,
-            fontWeight: 600,
-            color: "var(--color-brand-600)",
-            background: "none",
-            border: "none",
-            cursor: "pointer",
-            fontFamily: "var(--font-sans)",
-          }}
         >
-          ← رجوع
+          العودة إلى العناوين
-        </button>
+        </Button>
-      </section>
+      </div>
     );
   }
 
-  // ── Render ────────────────────────────────────────────────────────────────
+  // ── Content ──────────────────────────────────────────────────────────────
   return (
-    <>
+    <section style={{ display: "flex", flexDirection: "column", gap: "1.25rem", maxWidth: 720, margin: "0 auto", padding: "2rem 1rem" }}>
-      <Toast notification={notification} />
+      <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>
 
-      {/* Edit modal */}
+      <AddressDetails address={address} />
-      {editOpen && (
+    </section>
-        <AddressFormModal
-          editAddress={address}
-          onClose={() => setEditOpen(false)}
-          onSubmit={handleUpdateSubmit}
-        />
-      )}
-
-      {/* Delete confirmation */}
-      <ConfirmDialog
-        open={deleteOpen}
-        loading={deleting}
-        onCancel={() => { if (!deleting) setDeleteOpen(false); }}
-        onConfirm={handleDeleteConfirm}
-        title="حذف العميل"
-        description={`هل أنت متأكد من حذف ${address.label}؟ سيتم حذف جميع عناوينه أيضاً. لا يمكن التراجع عن هذا الإجراء.`}
-      />
-
-      <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
-
-        {/* ── Page header ── */}
-        <header
-          style={{
-            borderRadius: "var(--radius-xl)",
-            border: "1px solid var(--color-border)",
-            background: "var(--color-surface)",
-            padding: "1.5rem 2rem",
-            boxShadow: "var(--shadow-card)",
-          }}
-        >
-          {/* Back link */}
-          <button
-            type="button"
-            onClick={() => router.push(`/dashboard/clients/${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",
-              marginBottom: 12,
-              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>
-            {client ? `${client.name} — العناوين` : "العناوين"}
-          </button>
-
-          <p
-            style={{
-              fontSize: 11,
-              letterSpacing: "0.3em",
-              textTransform: "uppercase",
-              color: "#2563EB",
-              fontWeight: 600,
-              margin: 0,
-            }}
-          >
-            تفاصيل العنوان
-          </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,
-                }}
-              >
-                {address.label}
-              </h1>
-              {client && (
-                <p style={{ marginTop: "0.25rem", fontSize: 13, color: "var(--color-text-muted)" }}>
-                  {client.name}
-                </p>
-              )}
-            </div>
-
-            {/* Action buttons */}
-            <div style={{ display: "flex", gap: "0.5rem" }}>
-              <button
-                type="button"
-                onClick={() => setEditOpen(true)}
-                style={{
-                  height: 40,
-                  padding: "0 1rem",
-                  borderRadius: "var(--radius-lg)",
-                  border: "1px solid #BFDBFE",
-                  background: "#EFF6FF",
-                  fontSize: 13,
-                  fontWeight: 600,
-                  color: "#1D4ED8",
-                  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
-                type="button"
-                onClick={() => setDeleteOpen(true)}
-                style={{
-                  height: 40,
-                  padding: "0 1rem",
-                  borderRadius: "var(--radius-lg)",
-                  border: "1px solid #FECACA",
-                  background: "#FEF2F2",
-                  fontSize: 13,
-                  fontWeight: 600,
-                  color: "#DC2626",
-                  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"
-                >
-                  <polyline points="3 6 5 6 21 6" />
-                  <path d="M19 6l-1 14H6L5 6" />
-                  <path d="M10 11v6M14 11v6" />
-                  <path d="M9 6V4h6v2" />
-                </svg>
-                حذف
-              </button>
-            </div>
-          </div>
-        </header>
-
-        {/* ── Address details component ── */}
-        <AddressDetails address={address} />
-
-      </section>
-    </>
   );
 }

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 { clientService } from "@/src/services/client.service";
-import { getStoredToken }     from "@/src/lib/auth";
+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:           "💳",
+    billing: "💳",
-    shipping:          "📦",
+    shipping: "📦",
-    "head office":     "🏢",
+    "head office": "🏢",
-    branch:            "🏬",
+    branch: "🏬",
-    warehouse:         "🏭",
+    warehouse: "🏭",
   };
   return map[label.toLowerCase()] ?? "📍";
 }
@@ -40,14 +45,21 @@ function labelIcon(label: string): string {
 // ─── AddressCard ───────────────────────────────────────────────────────────
 
 interface AddressCardProps {
-  address:        ClientAddress;
+  address: ClientAddress;
-  onEdit:         () => void;
+  onView:         () => void;
-  onDelete:       () => void;
+  onEdit: () => void;
-  onSetPrimary:   () => 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;
+  onClick: () => void;
-  color:     string;
+  color: string;
-  bg:        string;
+  bg: string;
-  border:    string;
+  border: string;
-  style?:    React.CSSProperties;
+  style?: React.CSSProperties;
   disabled?: boolean;
-  children:  React.ReactNode;
+  children: React.ReactNode;
 }) {
   return (
     <button
@@ -270,8 +302,8 @@ function ActionBtn({
 // ─── ClientEditModal ───────────────────────────────────────────────────────
 
 interface ClientEditModalProps {
-  client:   Client;
+  client: Client;
-  onClose:  () => void;
+  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 params = useParams();
-  const router   = useRouter();
+  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 [addrFormTarget, setAddrFormTarget] = useState<
-  const [deleteTarget,   setDeleteTarget]   = useState<ClientAddress | null>(null);
+    ClientAddress | null | false
-  const [deleting,       setDeleting]       = useState(false);
+  >(false);
-  const [editingClient,  setEditingClient]  = useState(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>
+              <span
-              <a href={`mailto:${client.email}`} style={{ color: "#2563EB", textDecoration: "none" }}>
+                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) => (
+           {addresses.map((addr) => (
-              <AddressCard
+  <AddressCard
-                key={addr.id}
+    key={addr.id}
-                address={addr}
+    address={addr}
-                onEdit={() => setAddrFormTarget(addr)}
+    onView={() => router.push(`/dashboard/${clientId}/addresses/${addr.id}`)} 
-                onDelete={() => setDeleteTarget(addr)}
+    onEdit={() => setAddrFormTarget(addr)}
-                onSetPrimary={() => handleSetPrimary(addr)}
+    onDelete={() => setDeleteTarget(addr)}
-                settingPrimary={settingPrimaryId === addr.id}
+    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="أرشيف العناوين"
+      />
     </>
   );
 }

app/dashboard/clients/page.tsx

@@ -131,7 +131,7 @@ export default function ClientsPage() {
       </section>
 
       {/* Floating button to open the archive browser */}
-      <ArchiveButton onClick={() => setArchiveOpen(true)} label="أرشيف العملاء" />
+      <ArchiveButton onClick={() => setArchiveOpen(true)} label="الأرشيف" />
     </>
   );
 }

app/dashboard/orders/page.tsx

@@ -1,68 +1,18 @@
 "use client";
 
-
-
 import { useState, useCallback } from "react";
-import { Alert, Spinner, Toast, ArchiveButton, ConfirmDialog } from "@/src/Components/UI";
+import { Alert, Toast, ArchiveButton, ConfirmDialog } from "@/src/Components/UI";
-import {  ORDER_STATUS_MAP } from "@/src/Components/Order/OrderDetailBanel";
 import { ArchivedOrdersModal } from "@/src/Components/Order/archive/ArchivedOrdersModal";
 import { useOrders } from "@/src/hooks/useOrder";
 import type { CreateOrderPayload, Order, UpdateOrderPayload } from "@/src/types/order";
-import { OrderFormModal ,  OrderDetailPanel} from "@/src/Components/Order";
+import { OrderFormModal, OrderDetailPanel, OrderTable } from "@/src/Components/Order";
 import Header from "@/src/Components/UI/Header";
 
-// ── Helpers — copied verbatim from app/dashboard/drivers/page.tsx ───────
-
-function fmtDate(iso?: string | null): string {
-  if (!iso) return "—";
-  return new Date(iso).toLocaleDateString("ar-SA", {
-    year: "numeric", month: "short", day: "numeric",
-  });
-}
-
-function fmtAmount(n?: number | null): string {
-  if (n == null) return "—";
-  return `${n.toFixed(2)} ر.س`;
-}
-
-// ── Styles — identical tokens/values to the Drivers page, per the
-//    "no new styles" constraint; only column widths differ to fit Order's
-//    field set (shipment / recipient / client / amount / status / actions).
-
-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)",
-};
-
-// Shared across header + rows — keep these in sync or columns will misalign.
-const ROW_GRID_COLUMNS = "1.6fr 1.6fr 1.2fr 1.1fr 1fr 0.8fr";
-
-const iconBtnBase: React.CSSProperties = {
-  width: 30,
-  height: 30,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  borderRadius: "var(--radius-md)",
-  cursor: "pointer",
-  flexShrink: 0,
-};
-
 // ── Page Component ───────────────────────────────────────────────────────
+// Table markup/styles now live in src/Components/Order/orderTable.tsx;
+// detail panel in OrderDetailModel.tsx (renamed from OrderDetailBanel.tsx);
+// form modal unchanged in OrderFormModal.tsx. This page only wires state
+// and handlers between the three.
 
 export default function OrderComponent() {
   const {
@@ -167,171 +117,17 @@ export default function OrderComponent() {
         )}
 
         {/* ── Table ── */}
-        <div style={cardStyle}>
+        <OrderTable
-          <div
+          orders={orders}
-            dir="rtl"
+          loading={loading}
-            style={{
+          search={search}
-              display: "grid",
+          page={page}
-              gridTemplateColumns: ROW_GRID_COLUMNS,
+          pages={pages}
-              ...thStyle,
+          setPage={setPage}
-            }}
+          onRowClick={setSelectedOrderId}
-          >
+          onEdit={handleEdit}
-            <span>رقم الشحنة</span>
+          onDelete={handleDelete}
-            <span>المستلم</span>
+        />
-            <span>العميل</span>
-            <span>المبلغ</span>
-            <span>الحالة</span>
-            <span>إجراءات</span>
-          </div>
-
-          {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>
-          ) : orders.length === 0 ? (
-            <p style={{ textAlign: "center", padding: "4rem 0", fontSize: 13, color: "var(--color-text-muted)" }}>
-              لا توجد نتائج {search && `لـ "${search}"`}
-            </p>
-          ) : (
-            <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
-              {orders.map((o, i) => {
-                const statusCfg = ORDER_STATUS_MAP[o.currentStatus] ?? ORDER_STATUS_MAP.Created;
-
-                return (
-                  <li
-                    key={o.id}
-                    onClick={() => setSelectedOrderId(o.id)}
-                    style={{
-                      display: "grid",
-                      gridTemplateColumns: ROW_GRID_COLUMNS,
-                      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,
-                      cursor: "pointer",
-                      transition: "background 0.15s",
-                    }}
-                    onMouseEnter={(e) => (e.currentTarget.style.background = "var(--color-surface-hover, #F8FAFC)")}
-                    onMouseLeave={(e) => (e.currentTarget.style.background = i % 2 !== 0 ? "var(--color-surface-muted)" : "transparent")}
-                  >
-                    <div>
-                      <p style={{ fontWeight: 600, fontFamily: "var(--font-mono)", color: "#2563EB", margin: 0 }}>{o.shipmentNumber}</p>
-                      <p style={{ marginTop: 2, fontSize: 11, color: "var(--color-text-muted)" }}>{fmtDate(o.createdAt)}</p>
-                    </div>
-                    <div>
-                      <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>{o.recipientName}</p>
-                      <p style={{ marginTop: 2, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--color-text-muted)" }}>{o.recipientPhone}</p>
-                    </div>
-                    <span style={{ color: "var(--color-text-secondary)" }}>{o.client?.name ?? "—"}</span>
-                    <span style={{ fontWeight: 600, color: "var(--color-text-primary)", fontFamily: "var(--font-mono)" }}>
-                      {fmtAmount(o.totalPrice)}
-                    </span>
-                    <span style={{
-                      display: "inline-flex", alignItems: "center", gap: 5,
-                      borderRadius: "var(--radius-full)",
-                      border: `1px solid ${statusCfg.border}`,
-                      background: statusCfg.bg,
-                      padding: "0.2rem 0.625rem",
-                      fontSize: 11, fontWeight: 600, color: statusCfg.color,
-                      width: "fit-content",
-                    }}>
-                      <span style={{ width: 6, height: 6, borderRadius: "50%", background: statusCfg.dot, flexShrink: 0 }} />
-                      {statusCfg.label}
-                    </span>
-
-                    {/* ── Inline row actions: edit / delete ──
-                         stopPropagation is required on both buttons so the
-                         click doesn't bubble up to the <li> onClick and
-                         open the detail panel as well. */}
-                    <div style={{ display: "flex", gap: "0.4rem" }}>
-                      <button
-                        type="button"
-                        aria-label="تعديل الطلب"
-                        title="تعديل"
-                        onClick={(e) => { e.stopPropagation(); handleEdit(o); }}
-                        style={{
-                          ...iconBtnBase,
-                          border: "1px solid var(--color-brand-200)",
-                          background: "var(--color-brand-50, #EFF6FF)",
-                          color: "var(--color-brand-600)",
-                        }}
-                      >
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                          <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
-                        type="button"
-                        aria-label="حذف الطلب"
-                        title="حذف"
-                        onClick={(e) => { e.stopPropagation(); handleDelete(o); }}
-                        style={{
-                          ...iconBtnBase,
-                          border: "1px solid #FECACA",
-                          background: "#FEF2F2",
-                          color: "#DC2626",
-                        }}
-                      >
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                          <polyline points="3 6 5 6 21 6" />
-                          <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
-                          <path d="M10 11v6M14 11v6" />
-                          <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
-                        </svg>
-                      </button>
-                    </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: () => setPage(p => Math.max(1, p - 1)),     disabled: page === 1     },
-                  { label: "التالي", action: () => setPage(p => Math.min(pages, p + 1)), disabled: page === pages },
-                ].map(btn => (
-                  <button
-                    key={btn.label}
-                    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>
       </section>
 
       {/* ── Detail panel — key forces re-fetch after a successful edit or
@@ -387,6 +183,5 @@ export default function OrderComponent() {
 }
 
 // Named export alongside the default, mirroring src/Components/Driver/index.ts's
-// pattern of re-exporting each piece for use elsewhere (e.g. a future
+// pattern of re-exporting each piece for use elsewhere.
-// app/dashboard/orders/page.tsx importing { OrderComponent }).
 export { OrderComponent };

src/Components/Client/Toast.tsx

@@ -1,5 +0,0 @@
-
-
-// Re-export the canonical implementation so existing imports keep working.
-export { Toast } from "@/src/Components/UI";
-export type { ToastNotification as Notification } from "@/src/Components/UI";

src/Components/Client/archive/ArchivedClientDetailModal.tsx

@@ -129,7 +129,7 @@ export function ArchivedClientDetailModal({ clientId, onClose }: ArchivedClientD
                   fontSize: 12, color: "var(--color-text-secondary)",
                 }}>
                   <strong style={{ color: "var(--color-text-primary)" }}>{addr.label}</strong>
-                  {" — "}{addr.street}، {addr.city}
+                  {" — "}{addr.details?.street}، {addr.details?.city}، {addr.details?.state}، {addr.details?.country}
                 </div>
               ))}
             </div>

src/Components/Client/index.ts

@@ -3,4 +3,3 @@
 export { ClientFormModal }    from "./Clientformmodal";
 export { ClientTable }        from "./Clienttable";
 export { AddressFormModal }   from "../Client_Adress/Addressformmodal";
-export { Toast } from "./Toast";

src/Components/Order/OrderFormModal.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react";
 import Link from "next/link";
-import { useForm } from "react-hook-form";
+import { useForm, type Resolver } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Alert, Button, Input, Modal, Select } from "../UI";
 import { getStoredToken } from "@/src/lib/auth";
@@ -115,9 +115,20 @@ export function OrderFormModal({
     setFocus,
     formState: { errors, isSubmitting },
   } = useForm<OrderFormValues>({
-    // Cast the schema itself — create/update schemas differ structurally in
+    // create/update schemas differ structurally in which fields are
-    // which fields are required, so yup can't unify them into one type.
+    // required (e.g. tripId), so yup can't unify them into one type on
-    resolver: yupResolver<OrderFormValues>((isNew ? createOrderSchema : updateOrderSchema) as any),
+    // its own — the ternary alone won't typecheck as a single schema
+    // argument. We cast in two places for two separate reasons:
+    //   1. `(...) as any` on the schema — lets the ternary's two
+    //      differently-shaped ObjectSchemas pass as a single argument.
+    //   2. `as unknown as Resolver<OrderFormValues>` on the whole call —
+    //      stops TS from inferring the Resolver's generics from the
+    //      schema's own (slightly different) inferred shape, which is
+    //      what caused the earlier "quantity optional vs required"
+    //      mismatch.
+    resolver: yupResolver(
+      (isNew ? createOrderSchema : updateOrderSchema) as any,
+    ) as unknown as Resolver<OrderFormValues>,
     defaultValues: {
       shipmentNumber: editOrder?.shipmentNumber ?? "",
       recipientName: editOrder?.recipientName ?? "",

src/Components/Order/OrderTable.tsx

@@ -0,0 +1,248 @@
+"use client";
+
+import { Spinner } from "../UI";
+import type { Order } from "@/src/types/order";
+import { ORDER_STATUS_MAP } from "./OrderDetailModel";
+
+// ── Helpers — copied verbatim from app/dashboard/drivers/page.tsx ───────
+
+function fmtDate(iso?: string | null): string {
+  if (!iso) return "—";
+  return new Date(iso).toLocaleDateString("ar-SA", {
+    year: "numeric", month: "short", day: "numeric",
+  });
+}
+
+function fmtAmount(n?: number | null): string {
+  if (n == null) return "—";
+  return `${n.toFixed(2)} ر.س`;
+}
+
+// ── Styles — identical tokens/values to the Drivers page, per the
+//    "no new styles" constraint; only column widths differ to fit Order's
+//    field set (shipment / recipient / client / amount / status / actions).
+
+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)",
+};
+
+// Shared across header + rows — keep these in sync or columns will misalign.
+const ROW_GRID_COLUMNS = "1.6fr 1.6fr 1.2fr 1.1fr 1fr 0.8fr";
+
+const iconBtnBase: React.CSSProperties = {
+  width: 30,
+  height: 30,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: "var(--radius-md)",
+  cursor: "pointer",
+  flexShrink: 0,
+};
+
+interface OrderTableProps {
+  orders: Order[];
+  loading: boolean;
+  search: string;
+  page: number;
+  pages: number;
+  setPage: React.Dispatch<React.SetStateAction<number>>;
+  onRowClick: (orderId: string) => void;
+  onEdit: (order: Order) => void;
+  onDelete: (order: Order) => void;
+}
+
+export function OrderTable({
+  orders,
+  loading,
+  search,
+  page,
+  pages,
+  setPage,
+  onRowClick,
+  onEdit,
+  onDelete,
+}: OrderTableProps) {
+  return (
+    <div style={cardStyle}>
+      <div
+        dir="rtl"
+        style={{
+          display: "grid",
+          gridTemplateColumns: ROW_GRID_COLUMNS,
+          ...thStyle,
+        }}
+      >
+        <span>رقم الشحنة</span>
+        <span>المستلم</span>
+        <span>العميل</span>
+        <span>المبلغ</span>
+        <span>الحالة</span>
+        <span>إجراءات</span>
+      </div>
+
+      {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>
+      ) : orders.length === 0 ? (
+        <p style={{ textAlign: "center", padding: "4rem 0", fontSize: 13, color: "var(--color-text-muted)" }}>
+          لا توجد نتائج {search && `لـ "${search}"`}
+        </p>
+      ) : (
+        <ul dir="rtl" style={{ listStyle: "none", margin: 0, padding: 0 }}>
+          {orders.map((o, i) => {
+            const statusCfg = ORDER_STATUS_MAP[o.currentStatus] ?? ORDER_STATUS_MAP.Created;
+
+            return (
+              <li
+                key={o.id}
+                onClick={() => onRowClick(o.id)}
+                style={{
+                  display: "grid",
+                  gridTemplateColumns: ROW_GRID_COLUMNS,
+                  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,
+                  cursor: "pointer",
+                  transition: "background 0.15s",
+                }}
+                onMouseEnter={(e) => (e.currentTarget.style.background = "var(--color-surface-hover, #F8FAFC)")}
+                onMouseLeave={(e) => (e.currentTarget.style.background = i % 2 !== 0 ? "var(--color-surface-muted)" : "transparent")}
+              >
+                <div>
+                  <p style={{ fontWeight: 600, fontFamily: "var(--font-mono)", color: "#2563EB", margin: 0 }}>{o.shipmentNumber}</p>
+                  <p style={{ marginTop: 2, fontSize: 11, color: "var(--color-text-muted)" }}>{fmtDate(o.createdAt)}</p>
+                </div>
+                <div>
+                  <p style={{ fontWeight: 600, color: "var(--color-text-primary)", margin: 0 }}>{o.recipientName}</p>
+                  <p style={{ marginTop: 2, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--color-text-muted)" }}>{o.recipientPhone}</p>
+                </div>
+                <span style={{ color: "var(--color-text-secondary)" }}>{o.client?.name ?? "—"}</span>
+                <span style={{ fontWeight: 600, color: "var(--color-text-primary)", fontFamily: "var(--font-mono)" }}>
+                  {fmtAmount(o.totalPrice)}
+                </span>
+                <span style={{
+                  display: "inline-flex", alignItems: "center", gap: 5,
+                  borderRadius: "var(--radius-full)",
+                  border: `1px solid ${statusCfg.border}`,
+                  background: statusCfg.bg,
+                  padding: "0.2rem 0.625rem",
+                  fontSize: 11, fontWeight: 600, color: statusCfg.color,
+                  width: "fit-content",
+                }}>
+                  <span style={{ width: 6, height: 6, borderRadius: "50%", background: statusCfg.dot, flexShrink: 0 }} />
+                  {statusCfg.label}
+                </span>
+
+                {/* ── Inline row actions: edit / delete ──
+                     stopPropagation is required on both buttons so the
+                     click doesn't bubble up to the <li> onClick and
+                     open the detail panel as well. */}
+                <div style={{ display: "flex", gap: "0.4rem" }}>
+                  <button
+                    type="button"
+                    aria-label="تعديل الطلب"
+                    title="تعديل"
+                    onClick={(e) => { e.stopPropagation(); onEdit(o); }}
+                    style={{
+                      ...iconBtnBase,
+                      border: "1px solid var(--color-brand-200)",
+                      background: "var(--color-brand-50, #EFF6FF)",
+                      color: "var(--color-brand-600)",
+                    }}
+                  >
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                      <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
+                    type="button"
+                    aria-label="حذف الطلب"
+                    title="حذف"
+                    onClick={(e) => { e.stopPropagation(); onDelete(o); }}
+                    style={{
+                      ...iconBtnBase,
+                      border: "1px solid #FECACA",
+                      background: "#FEF2F2",
+                      color: "#DC2626",
+                    }}
+                  >
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                      <polyline points="3 6 5 6 21 6" />
+                      <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+                      <path d="M10 11v6M14 11v6" />
+                      <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
+                    </svg>
+                  </button>
+                </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: () => setPage(p => Math.max(1, p - 1)),     disabled: page === 1     },
+              { label: "التالي", action: () => setPage(p => Math.min(pages, p + 1)), disabled: page === pages },
+            ].map(btn => (
+              <button
+                key={btn.label}
+                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/Order/archive/ArchivedOrderDetailModal.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Button, Modal } from "../../UI";
-import { ORDER_STATUS_MAP } from "../OrderDetailBanel";
+import { ORDER_STATUS_MAP } from "../OrderDetailModel";
 import type { ArchivedOrder } from "@/src/types/order";
 
 interface ArchivedOrderDetailModalProps {
@@ -40,6 +40,7 @@ export function ArchivedOrderDetailModal({ order, onClose }: ArchivedOrderDetail
       title={order.shipmentNumber}
       subtitle="طلب مؤرشف"
       onClose={onClose}
+      zIndex={60}
       size="md"
       footer={
         <Button type="button" variant="secondary" onClick={onClose}>

src/Components/Order/archive/ArchivedOrderTable.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Button, EmptyState, IconBtn, Spinner } from "../../UI";
-import { ORDER_STATUS_MAP } from "../OrderDetailBanel";
+import { ORDER_STATUS_MAP } from "../OrderDetailModel";
 import type { ArchivedOrder } from "@/src/types/order";
 
 

src/Components/Order/index.ts

@@ -1,2 +1,3 @@
 export {OrderFormModal} from './OrderFormModal';
-export {OrderDetailPanel} from './OrderDetailBanel';
+export {OrderDetailPanel, ORDER_STATUS_MAP, PAY_STATUS_MAP, PAY_METHOD_LABEL} from './OrderDetailModel';
+export {OrderTable} from './OrderTable';

src/validations/order.validation.ts

@@ -3,6 +3,41 @@ import * as yup from "yup";
 // ── Saudi mobile regex (05xxxxxxxx) ─────────────────────────────────────────
 const SAUDI_PHONE_RE = /^(05\d{8}|009665\d{8}|\+9665\d{8})$/;
 
+// ── Coordinates sub-schema (shared by delivery & pickup) ────────────────────
+// OrderFormModal always sends coordinates as a 2-element array —
+// `[undefined, undefined]` when the user hasn't touched the lng/lat inputs,
+// NOT `undefined` itself. A plain `.of(yup.number().required())` therefore
+// fails on every order whose address has no coordinates yet, even though
+// the array itself is `.optional()` — the array being *present* is enough
+// to make yup walk into `.required()` on each (undefined) element.
+// (Same root cause as the deliveryAddress bug documented below: yup
+// validates whatever *is* there, regardless of what the outer field's
+// optionality implies.)
+//
+// Fix: a custom `.test()` that treats "both lng and lat are empty" as a
+// valid "no coordinates provided" state, and only fails when exactly one
+// of the two is filled in (genuinely incomplete input).
+const coordinatesSchema = yup
+  .array()
+  .of(yup.number().typeError("الإحداثيات يجب أن تكون أرقامًا"))
+  .test(
+    "coords-both-or-none",
+    "الإحداثيات يجب أن تكون [خط الطول, خط العرض]",
+    (value) => {
+      // Field never sent at all — fine.
+      if (!value) return true;
+      const [lng, lat] = value;
+      const lngEmpty = lng === undefined || lng === null || Number.isNaN(lng);
+      const latEmpty = lat === undefined || lat === null || Number.isNaN(lat);
+      // Untouched [undefined, undefined] from defaultValues — treat as
+      // "no coordinates provided", not a validation error.
+      if (lngEmpty && latEmpty) return true;
+      // Only one of the two filled in — genuinely incomplete, block submit.
+      return !lngEmpty && !latEmpty;
+    },
+  )
+  .optional();
+
 // ── Address sub-schemas (mirrors backend orderAddressSchema) ─────────────────
 
 // Delivery address — coordinates SHOULD be required by the backend (MongoDB
@@ -30,11 +65,7 @@ const deliveryAddressSchema = yup.object({
     zipCode:    yup.string().trim().optional(),
   }).optional(),
   location: yup.object({
-    coordinates: yup
+    coordinates: coordinatesSchema,
-      .array()
-      .of(yup.number().required())
-      .length(2, "الإحداثيات يجب أن تكون [خط الطول, خط العرض]")
-      .optional(),
   }).optional(),
 }).optional();
 
@@ -50,11 +81,7 @@ const pickupAddressSchema = yup.object({
     zipCode:    yup.string().trim().optional(),
   }).optional(),
   location: yup.object({
-    coordinates: yup
+    coordinates: coordinatesSchema,
-      .array()
-      .of(yup.number().required())
-      .length(2, "الإحداثيات يجب أن تكون [خط الطول, خط العرض]")
-      .optional(),
   }).optional(),
 }).optional();