make header one in all page

app/dashboard/clients/page.tsx

@@ -13,6 +13,7 @@ import { useClients }         from "@/src/hooks/useClients";
 import type { Client, ClientFormData } from "@/src/types/client";
 import { ClientFormModal , ClientTable }    from "@/src/Components/Client";
 import { ArchivedClientsModal } from "@/src/Components/Client/archive/ArchivedClientsModal";
+import Header from "@/src/Components/UI/Header";
 
 
 export default function ClientsPage() {
@@ -97,142 +98,19 @@ export default function ClientsPage() {
       <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)",
-          }}
-        >
-          <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>
-              <p
-                style={{
-                  marginTop: "0.25rem",
-                  fontSize: 13,
-                  color: "var(--color-text-muted)",
-                }}
-              >
-                إجمالي{" "}
-                <strong style={{ color: "var(--color-text-primary)" }}>
-                  {total}
-                </strong>{" "}
-                عميل
-              </p>
-            </div>
-
-            <div
-              style={{
-                display: "flex",
-                gap: "0.5rem",
-                flexWrap: "wrap",
-                alignItems: "center",
-              }}
-            >
-              {/* Search input */}
-              <div style={{ position: "relative", width: 256 }}>
-                <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,
-                    outline: "none",
-                    fontFamily: "var(--font-sans)",
-                    color: "var(--color-text-primary)",
-                  }}
-                />
-              </div>
-
-              {/* Add client button */}
-              <button
-                type="button"
-                onClick={() => setFormTarget(null)}
-                style={{
-                  height: 40,
-                  padding: "0 1.125rem",
-                  borderRadius: "var(--radius-lg)",
-                  border: "none",
-                  background: "var(--color-brand-600)",
-                  fontSize: 13,
-                  fontWeight: 700,
-                  color: "#FFF",
-                  cursor: "pointer",
-                  display: "inline-flex",
-                  alignItems: "center",
-                  gap: 7,
-                  fontFamily: "var(--font-sans)",
-                  boxShadow: "0 1px 4px rgba(37,99,235,.35)",
-                  whiteSpace: "nowrap",
-                }}
-              >
-                <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>
-                إضافة عميل
-              </button>
-            </div>
-          </div>
-        </header>
+        <Header
+          state={{ total }}
+          search={search}
+          setSearch={handleSearch}
+          module=""
+          setModule={() => {}}
+          title="العملاء"
+          mainTitle="إدارة العملاء"
+          setPage={setPage}
+          name={"عميل"}
+          isAudit={false}
+          onAdd={() => setFormTarget(null)}
+        />
 
         {/* General load error */}
         {error && <Alert type="error" message={error} onClose={clearError} />}