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

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
-    // which fields are required, so yup can't unify them into one type.
-    resolver: yupResolver<OrderFormValues>((isNew ? createOrderSchema : updateOrderSchema) as any),
+    // create/update schemas differ structurally in which fields are
+    // required (e.g. tripId), so yup can't unify them into one type on
+    // 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
-      .array()
-      .of(yup.number().required())
-      .length(2, "الإحداثيات يجب أن تكون [خط الطول, خط العرض]")
-      .optional(),
+    coordinates: coordinatesSchema,
   }).optional(),
 }).optional();
 
@@ -50,11 +81,7 @@ const pickupAddressSchema = yup.object({
     zipCode:    yup.string().trim().optional(),
   }).optional(),
   location: yup.object({
-    coordinates: yup
-      .array()
-      .of(yup.number().required())
-      .length(2, "الإحداثيات يجب أن تكون [خط الطول, خط العرض]")
-      .optional(),
+    coordinates: coordinatesSchema,
   }).optional(),
 }).optional();