update page to using same tamplet in all project not using inline code

src/Components/role/archive/ArchivedRolesModal.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Alert } from "../../UI";
+import { Alert, Input, Modal } from "../../UI";
 import { ArchivedRoleTable } from "./ArchivedRoleTable";
 import { ArchivedRoleDetailModal } from "./ArchivedRoleDetailModal";
 import { useArchivedRoles } from "@/src/hooks/archive/useArchiveRole";
@@ -10,6 +10,21 @@ interface ArchivedRolesModalProps {
   onClose: () => void;
 }
 
+const searchIcon = (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    aria-hidden="true"
+  >
+    <circle cx="11" cy="11" r="8" />
+    <path d="m21 21-4.35-4.35" />
+  </svg>
+);
+
 export function ArchivedRolesModal({ onClose }: ArchivedRolesModalProps) {
   const [viewRoleId, setViewRoleId] = useState<string | null>(null);
 
@@ -20,79 +35,28 @@ export function ArchivedRolesModal({ onClose }: ArchivedRolesModalProps) {
   } = useArchivedRoles();
 
   return (
-    <div
-      role="dialog" aria-modal="true" aria-labelledby="role-archive-modal-title"
-      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
-      style={{
-        position: "fixed", inset: 0, zIndex: 70,
-        background: "rgba(15,23,42,0.6)", backdropFilter: "blur(4px)",
-        display: "flex", alignItems: "flex-start", justifyContent: "center",
-        padding: "2rem 1rem", overflowY: "auto",
-      }}
-    >
+    <>
       {viewRoleId && (
         <ArchivedRoleDetailModal roleId={viewRoleId} onClose={() => setViewRoleId(null)} />
       )}
 
-      <div
-        onClick={e => e.stopPropagation()}
-        style={{
-          width: "100%", maxWidth: 920,
-          background: "var(--color-surface-sunken)",
-          borderRadius: "var(--radius-xl)",
-          border: "1px solid var(--color-border)",
-          boxShadow: "0 24px 64px rgba(0,0,0,.2)",
-          overflow: "hidden",
-        }}
+      <Modal
+        open
+        onClose={onClose}
+        size="lg"
+        subtitle="الأرشيف"
+        title={`الأدوار المؤرشفة (${total})`}
       >
-        {/* header */}
-        <div dir="rtl" style={{
-          display: "flex", alignItems: "center", justifyContent: "space-between",
-          padding: "1.25rem 1.5rem",
-          borderBottom: "1px solid var(--color-border)",
-          background: "var(--color-surface)",
-        }}>
-          <div>
-            <p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#EA580C", fontWeight: 600, margin: 0 }}>
-              الأرشيف
-            </p>
-            <h2 id="role-archive-modal-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
-              الأدوار المؤرشفة
-              <span style={{ marginInlineStart: 8, fontSize: 13, fontWeight: 500, color: "var(--color-text-muted)" }}>
-                ({total})
-              </span>
-            </h2>
-          </div>
-          <button type="button" onClick={onClose} aria-label="إغلاق"
-            style={{ width: 34, height: 34, borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", cursor: "pointer", fontSize: 18, color: "var(--color-text-muted)", display: "flex", alignItems: "center", justifyContent: "center" }}>
-            ×
-          </button>
-        </div>
-
-        {/* body */}
-        <div style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
+        <div dir="rtl" style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
           {/* search — client-side, since /role/archived has no search param */}
-          <div dir="rtl" style={{ position: "relative", maxWidth: 320 }}>
-            <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"
+          <div style={{ maxWidth: 320 }}>
+            <Input
+              label="بحث"
               placeholder="بحث باسم الدور..."
               value={search}
               onChange={e => handleSearch(e.target.value)}
+              icon={searchIcon}
               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>
 
@@ -109,7 +73,7 @@ export function ArchivedRolesModal({ onClose }: ArchivedRolesModalProps) {
             onPageChange={setPage}
           />
         </div>
-      </div>
-    </div>
+      </Modal>
+    </>
   );
 }