make header one in all page

app/dashboard/orders/page.tsx

@@ -9,6 +9,7 @@ import { ArchivedOrdersModal } from "@/src/Components/Order/archive/ArchivedOrde
 import { useOrders } from "@/src/hooks/useOrder";
 import type { CreateOrderPayload, Order, UpdateOrderPayload } from "@/src/types/order";
 import { OrderFormModal ,  OrderDetailPanel} from "@/src/Components/Order";
+import Header from "@/src/Components/UI/Header";
 
 // ── Helpers — copied verbatim from app/dashboard/drivers/page.tsx ───────
 
@@ -142,100 +143,18 @@ export default function OrderComponent() {
       <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
 
         {/* ── 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)",
-        }}>
-          <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600 }}>
-            إدارة الشحنات
-          </p>
-          <div style={{ marginTop: "0.75rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
-            <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: "1rem" }}>
-              <div>
-                <h1 style={{ fontSize: "1.5rem", fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>
-                  الطلبات
-                </h1>
-                <p style={{ marginTop: "0.25rem", fontSize: 13, color: "var(--color-text-muted)" }}>
-                  إجمالي{" "}
-                  <strong style={{ color: "var(--color-text-primary)" }}>{total}</strong>{" "}
-                  طلب مسجل
-                </p>
-              </div>
+        <Header mainTitle="إدارة الطلبات"
+          title="الطلبات"
+          name="طلب"
+          state={{ total }}
+          search={search}
+          setSearch={handleSearch}
+          module=""
+          setModule={() => {}}
+          setPage={setPage}
+          isAudit={false}
+          onAdd={() => setFormOrder("new")}/>
 
-              <div style={{ display: "flex", gap: "0.75rem", alignItems: "center", flexWrap: "wrap" }}>
-                {/* Status filter — ported from app/dashboard/orders/page.tsx */}
-                <select
-                  value={statusFilter}
-                  onChange={(e) => handleStatusFilter(e.target.value)}
-                  dir="rtl"
-                  style={{
-                    height: 40, borderRadius: "var(--radius-lg)",
-                    border: "1px solid var(--color-border)",
-                    background: "var(--color-surface)",
-                    fontSize: 13, color: "var(--color-text-secondary)",
-                    padding: "0 0.75rem", outline: "none",
-                    fontFamily: "var(--font-sans)", cursor: "pointer",
-                  }}
-                >
-                  <option value="">كل الحالات</option>
-                  {Object.entries(ORDER_STATUS_MAP).map(([k, v]) => (
-                    <option key={k} value={k}>{v.label}</option>
-                  ))}
-                </select>
-
-                {/* Search */}
-                <div style={{ position: "relative", width: 288 }}>
-                  <svg
-                    style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", width: 16, height: 16, color: "var(--color-text-hint)", pointerEvents: "none" }}
-                    fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"
-                  >
-                    <circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" />
-                  </svg>
-                  <input
-                    type="text"
-                    placeholder="رقم الشحنة أو المستلم..."
-                    value={search}
-                    onChange={(e) => handleSearch(e.target.value)}
-                    dir="rtl"
-                    style={{
-                      width: "100%", height: 40, paddingRight: 36, paddingLeft: 12,
-                      borderRadius: "var(--radius-lg)",
-                      border: "1px solid var(--color-border)",
-                      background: "var(--color-surface)",
-                      fontSize: 13, color: "var(--color-text-primary)",
-                      outline: "none", fontFamily: "var(--font-sans)",
-                    }}
-                  />
-                </div>
-
-                {/* Add button */}
-                <button
-                  type="button"
-                  onClick={() => setFormOrder("new")}
-                  style={{
-                    height: 40, padding: "0 1.25rem",
-                    borderRadius: "var(--radius-lg)",
-                    border: "none",
-                    background: "var(--color-brand-600)",
-                    fontSize: 13, fontWeight: 700, color: "#FFF",
-                    cursor: "pointer",
-                    display: "flex", alignItems: "center", gap: 8,
-                    fontFamily: "var(--font-sans)",
-                    flexShrink: 0,
-                  }}
-                >
-                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                    <path d="M12 5v14M5 12h14" />
-                  </svg>
-                  إضافة طلب
-                </button>
-              </div>
-            </div>
-          </div>
-        </header>
 
         {/* ── Notifications: page-level error banner (e.g. failed list load)
              dismissible via clearError() from the hook. Action-result