cheange inlien code to block code and using tamplet

app/dashboard/cars/[carId]/maintenance/[maintenanceId]/page.tsx

@@ -1,8 +1,16 @@
 "use client";
 
+import { useCallback, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
-import { Alert, PageHeader, Spinner } from "@/src/Components/UI";
+import { Alert, ArchiveButton, Button, ConfirmDialog, EmptyState, PageHeader, Spinner, Toast } from "@/src/Components/UI";
-import { useCarMaintenanceList } from "@/src/hooks/UseCarsMaintanance";
+import { CarMaintenanceFormModal } from "@/src/Components/Car_Maintanance/CarMaintananceFormModal";
+import { ArchivedCarsMaintenanceModal } from "@/src/Components/Car_Maintanance/archive/ArchivedCarsMaintananceModal";
+import {
+  useCarMaintenanceList,
+  useCarMaintenanceMutations,
+  useMaintenanceToast,
+} from "@/src/hooks/UseCarsMaintanance";
+import { useCarDetail } from "@/src/hooks/useCars";
 import {
   MAINTENANCE_STATUS_MAP,
   fmtDate,
@@ -10,92 +18,188 @@ import {
   durationDays,
   getMaintenanceStatus,
 } from "@/src/types/carMaintanance";
+import type {
+  CarMaintenance,
+  CreateMaintenancePayload,
+  UpdateMaintenancePayload,
+} from "@/src/types/carMaintanance";
 
-function DetailRow({ label, value, mono = false }: { label: string; value: string; mono?: boolean }) {
+function MaintenanceCard({
-  return (
+  record, onView, onEdit, onDelete,
-    <div style={{
+}: {
-      display: "flex", justifyContent: "space-between", alignItems: "baseline",
+  record: CarMaintenance;
-      padding: "0.75rem 0", borderBottom: "1px solid var(--color-border)",
+  onView: () => void;
-    }}>
+  onEdit: () => void;
-      <span style={{ fontSize: 12, color: "var(--color-text-muted)", fontWeight: 600 }}>{label}</span>
+  onDelete: () => void;
-      <span style={{ fontSize: 14, fontFamily: mono ? "var(--font-mono)" : "var(--font-sans)", color: "var(--color-text-primary)" }}>
+}) {
-        {value}
-      </span>
-    </div>
-  );
-}
-
-export default function CarMaintenanceDetailPage() {
-  const { carId, maintenanceId } = useParams<{ carId: string; maintenanceId: string }>();
-  const router = useRouter();
-
-  // NOTE: GET /cars/:carId/maintenance/:maintenanceId isn't wired up on the
-  // backend yet (returns "Route not found"), so this page resolves the
-  // record from the already-loaded list instead of a dedicated single-record
-  // call. includeDeleted: true so an archived record still resolves to a
-  // real "مؤرشفة" status instead of silently disappearing.
-  const { records, loading, error } = useCarMaintenanceList(carId, { includeDeleted: true });
-  const record = records.find((r) => r.id === maintenanceId) ?? null;
-
-  return (
-    <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem", maxWidth: 720, margin: "0 auto" }} dir="rtl">
-      <PageHeader
-        title="تفاصيل سجل الصيانة"
-        description={record?.reason}
-        backHref={`/dashboard/cars/${carId}/maintenance`}
-        backLabel="العودة"
-      />
-
-      <div style={{
-        borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)",
-        background: "var(--color-surface)", boxShadow: "var(--shadow-card)", padding: "1.5rem",
-      }}>
-        {loading && (
-          <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "2rem 0" }}>
-            <Spinner size="sm" className="text-blue-600" />
-            <span style={{ fontSize: 13, color: "var(--color-text-muted)" }}>جارٍ التحميل…</span>
-          </div>
-        )}
-
-        {error && <Alert type="error" message={error} />}
-
-        {!loading && !error && !record && (
-          <p style={{ fontSize: 13, color: "var(--color-text-muted)", textAlign: "center", padding: "2rem 0" }}>
-            لم يتم العثور على سجل الصيانة.
-          </p>
-        )}
-
-        {!loading && !error && record && (() => {
   const status = MAINTENANCE_STATUS_MAP[getMaintenanceStatus(record)];
+
   return (
-            <>
+    <article style={{
-              <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: "1.25rem" }}>
+      borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)",
-                <span style={{ borderRadius: "var(--radius-full)", border: `1px solid ${status.border}`, background: status.bg, padding: "0.3rem 0.875rem", fontSize: 12, fontWeight: 700, color: status.color }}>
+      background: "var(--color-surface)", overflow: "hidden", boxShadow: "var(--shadow-card)",
+    }}>
+      <div style={{ height: 4, background: status.dot }} />
+      <div style={{ padding: "1.25rem" }}>
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 8 }}>
+          <p style={{ fontSize: 15, fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>
+            {record.reason}
+          </p>
+          <span style={{
+            borderRadius: "var(--radius-full)", border: `1px solid ${status.border}`,
+            background: status.bg, padding: "0.2rem 0.625rem",
+            fontSize: 11, fontWeight: 700, color: status.color, whiteSpace: "nowrap", flexShrink: 0,
+          }}>
             {status.label}
           </span>
         </div>
 
-              <DetailRow label="سبب الصيانة" value={record.reason} />
+        <div style={{ marginTop: "0.875rem", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.5rem" }}>
-              <DetailRow label="التكلفة" value={fmtCost(record.cost)} />
+          <div style={{ fontSize: 11 }}>
-              <DetailRow label="تاريخ البدء" value={fmtDate(record.startAt)} />
+            <span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>التكلفة</span>
-              <DetailRow label="تاريخ الانتهاء" value={fmtDate(record.endAt)} />
+            <span style={{ color: "var(--color-text-primary)", marginTop: 2, display: "block" }}>{fmtCost(record.cost)}</span>
-              <DetailRow label="المدة" value={`${durationDays(record.startAt, record.endAt)} يوم`} />
+          </div>
-              {record.car && (
+          <div style={{ fontSize: 11 }}>
-                <DetailRow label="المركبة" value={`${record.car.manufacturer} ${record.car.model} — ${record.car.plateLetters} ${record.car.plateNumber}`} mono />
+            <span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>المدة</span>
-              )}
+            <span style={{ color: "var(--color-text-primary)", marginTop: 2, display: "block" }}>{durationDays(record.startAt, record.endAt)} يوم</span>
-              <DetailRow label="تاريخ الإضافة" value={fmtDate(record.createdAt)} />
+          </div>
-              <DetailRow label="آخر تحديث" value={fmtDate(record.updatedAt)} />
+          <div style={{ fontSize: 11 }}>
-            </>
+            <span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>تاريخ البدء</span>
-          );
+            <span style={{ color: "var(--color-text-secondary)", marginTop: 2, display: "block" }}>{fmtDate(record.startAt)}</span>
-        })()}
+          </div>
+          <div style={{ fontSize: 11 }}>
+            <span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>تاريخ الانتهاء</span>
+            <span style={{ color: "var(--color-text-secondary)", marginTop: 2, display: "block" }}>{fmtDate(record.endAt)}</span>
+          </div>
         </div>
 
-      <div>
+        <div style={{ display: "flex", gap: "0.5rem", marginTop: "1rem" }}>
-        <button type="button" onClick={() => router.push(`/dashboard/cars/${carId}/maintenance`)}
+          <Button variant="secondary" size="sm" fullWidth onClick={onView}>
-          style={{ height: 40, padding: "0 1.5rem", borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", fontSize: 13, fontWeight: 600, color: "var(--color-text-secondary)", cursor: "pointer", fontFamily: "var(--font-sans)" }}>
+            إظهار التفاصيل
-          العودة
+          </Button>
-        </button>
+          <Button variant="secondary" size="sm" onClick={onEdit}>
+            تعديل
+          </Button>
+          {/* inline style keeps the original light-red look; Button's own
+              variant="danger" is solid red and would change the visual */}
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={onDelete}
+            style={{ background: "#FEF2F2", borderColor: "#FECACA", color: "#DC2626" }}
+          >
+            أرشفة
+          </Button>
         </div>
-    </section>
+      </div>
+    </article>
+  );
+}
+
+export default function CarMaintenancePage() {
+  const { carId } = useParams<{ carId: string }>();
+  const router = useRouter();
+
+  const { car, refetch: refetchCar } = useCarDetail(carId);
+  const carLabel = car ? `${car.manufacturer} ${car.model} — ${car.plateLetters} ${car.plateNumber}` : undefined;
+
+  const { records, loading, error, loadRecords, removeRecord, setError } = useCarMaintenanceList(carId);
+  const { toast, notify } = useMaintenanceToast();
+
+  const [formTarget, setFormTarget]     = useState<CarMaintenance | null | false>(false); // false = closed
+  const [deleteTarget, setDeleteTarget] = useState<CarMaintenance | null>(null);
+  const [archiveOpen, setArchiveOpen]   = useState(false);
+
+  const getEditTarget = useCallback(
+    () => (formTarget instanceof Object && formTarget !== null ? (formTarget as CarMaintenance) : null),
+    [formTarget],
+  );
+
+  const { deleting, handleFormSubmit, handleDeleteConfirm } = useCarMaintenanceMutations({
+    carId,
+    onSuccess: (msg) => { notify({ type: "success", message: msg }); loadRecords(); refetchCar(); },
+    onError:   (msg) =>   notify({ type: "error", message: msg }),
+    onDeleted: (id) => { removeRecord(id); setDeleteTarget(null); refetchCar(); },
+    getEditTarget,
+  });
+
+  return (
+    <>
+      <Toast notification={toast} />
+
+      {formTarget !== false && (
+        <CarMaintenanceFormModal
+          editRecord={formTarget}
+          carLabel={carLabel}
+          onClose={() => setFormTarget(false)}
+          onSubmit={(payload: CreateMaintenancePayload | UpdateMaintenancePayload, isNew: boolean) =>
+            handleFormSubmit(payload, isNew).then(ok => { if (ok) setFormTarget(false); return ok; })
+          }
+        />
+      )}
+
+      <ConfirmDialog
+        open={!!deleteTarget}
+        loading={deleting}
+        onCancel={() => setDeleteTarget(null)}
+        onConfirm={() => deleteTarget && handleDeleteConfirm(deleteTarget)}
+        title="حذف سجل الصيانة"
+        description={`هل أنت متأكد من حذف سجل ${deleteTarget?.reason ?? ""} (${deleteTarget ? fmtCost(deleteTarget.cost) : ""})؟ لا يمكن التراجع عن هذا الإجراء.`}
+      />
+
+      {archiveOpen && (
+        <ArchivedCarsMaintenanceModal
+          carId={carId}
+          carLabel={carLabel}
+          onClose={() => setArchiveOpen(false)}
+        />
+      )}
+
+      <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }} dir="rtl">
+        <PageHeader
+          title="سجل الصيانة"
+          description={carLabel ?? "جارٍ تحميل بيانات المركبة…"}
+          backHref="/dashboard/cars"
+          backLabel="المركبات"
+          action={
+            <Button onClick={() => setFormTarget(null)}>
+              <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>
+          }
+        />
+
+        {error && <Alert type="error" message={error} onClose={() => setError(null)} />}
+
+        {loading ? (
+          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, padding: "5rem 0", color: "var(--color-text-muted)" }}>
+            <Spinner size="md" className="text-blue-600" />
+            <span style={{ fontSize: 14 }}>جارٍ تحميل سجلات الصيانة…</span>
+          </div>
+        ) : records.length === 0 ? (
+          <EmptyState
+            icon="🔧"
+            title="لا توجد سجلات صيانة بعد"
+            description='اضغط على "إضافة سجل صيانة" لتسجيل أول عملية صيانة لهذه المركبة.'
+          />
+        ) : (
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: "1rem" }}>
+            {records.map(record => (
+              <MaintenanceCard
+                key={record.id}
+                record={record}
+                onView={() => router.push(`/dashboard/cars/${carId}/maintenance/${record.id}`)}
+                onEdit={() => setFormTarget(record)}
+                onDelete={() => setDeleteTarget(record)}
+              />
+            ))}
+          </div>
+        )}
+      </section>
+
+      <ArchiveButton onClick={() => setArchiveOpen(true)} label="أرشيف الصيانة" />
+    </>
   );
 }

app/dashboard/cars/page.tsx

@@ -1,46 +1,17 @@
 "use client";
 
-
 import { useCallback, useState } from "react";
-import { Spinner, Alert, ArchiveButton, ConfirmDialog } from "@/src/Components/UI";
+import { Spinner, Alert, ArchiveButton, ConfirmDialog, Toast, EmptyState, Button } from "@/src/Components/UI";
 import { CarFormModal,CarDetailPanel }      from "@/src/Components/car";
 import { ArchivedCarsModal } from "@/src/Components/car/archive/Archivedcarsmodal";
 import { CarMaintenanceFormModal } from "@/src/Components/Car_Maintanance/CarMaintananceFormModal";
 import { useCars, useCarMutations, useToast } from "@/src/hooks/useCars";
 import { useCarMaintenanceMutations } from "@/src/hooks/UseCarsMaintanance";
 import { fmtDateShort, isExpiringSoon, STATUS_MAP, INS_MAP } from "@/src/types/car";
-import type { Car, CreateCarPayload, ToastMsg, UpdateCarPayload } from "@/src/types/car";
+import type { Car, CreateCarPayload, UpdateCarPayload } from "@/src/types/car";
 import type { CreateMaintenancePayload, UpdateMaintenancePayload } from "@/src/types/carMaintanance";
 import Header from "@/src/Components/UI/Header";
 
-// ── Toast ─────────────────────────────────────────────────────────────────────
-
-function CarToast({ notification }: { notification: ToastMsg | null }) {
-  if (!notification) return null;
-  const ok = notification.type === "success";
-  return (
-    <div role="status" aria-live="polite" style={{
-      position: "fixed", bottom: 24, left: "50%",
-      transform: "translateX(-50%)",
-      zIndex: 9999, pointerEvents: "none",
-    }}>
-      <div style={{
-        display: "flex", alignItems: "center", gap: 10,
-        padding: "0.75rem 1.25rem",
-        borderRadius: "var(--radius-full)",
-        background: ok ? "#065F46" : "#7F1D1D",
-        color: "#FFF", fontSize: 13, fontWeight: 600,
-        boxShadow: "0 8px 32px rgba(0,0,0,.25)",
-        maxWidth: "90vw", whiteSpace: "nowrap",
-        fontFamily: "var(--font-sans)",
-      }}>
-        <span style={{ fontSize: 16 }}>{ok ? "✓" : "⚠"}</span>
-        <span>{notification.message}</span>
-      </div>
-    </div>
-  );
-}
-
 // ── CarCard ───────────────────────────────────────────────────────────────────
 
 function CarCard({
@@ -172,7 +143,11 @@ function CarCard({
           </div>
         </div>
 
-        {/* Send to Maintenance quick action */}
+        {/* Send to Maintenance quick action — kept custom (amber accent isn't
+            one of Button's variants: primary/secondary/ghost/danger). Same
+            rationale as IconBtn: forcing it into an existing variant would
+            misrepresent this as a routine action rather than the
+            maintenance-triggering one it is. */}
         <button
           type="button"
           title={maintenanceDisabledReason}
@@ -260,7 +235,7 @@ export default function CarsPage() {
   // ── Render ──────────────────────────────────────────────────────────────────
   return (
     <>
-      <CarToast notification={toast} />
+      <Toast notification={toast} />
 
       {detailId && (
         <CarDetailPanel
@@ -320,36 +295,16 @@ export default function CarsPage() {
             <span style={{ fontSize: 14 }}>جارٍ تحميل المركبات…</span>
           </div>
         ) : cars.length === 0 ? (
-          <div style={{
+          <EmptyState
-            borderRadius: "var(--radius-xl)",
+            icon="🚗"
-            border: "2px dashed var(--color-border)",
+            title={search ? `لا توجد مركبات تطابق "${search}"` : "لا توجد مركبات بعد"}
-            background: "var(--color-surface)",
+            description='اضغط على "إضافة مركبة" لإضافة أول مركبة في الأسطول.'
-            padding: "5rem 2rem",
+            action={!search && (
-            textAlign: "center",
+              <Button variant="primary" onClick={() => setFormTarget(null)}>
-          }}>
-            <div style={{ fontSize: 52, marginBottom: 16 }}>🚗</div>
-            <p style={{ fontSize: 16, fontWeight: 600, color: "var(--color-text-primary)" }}>
-              {search ? `لا توجد مركبات تطابق "${search}"` : "لا توجد مركبات بعد"}
-            </p>
-            <p style={{ fontSize: 13, color: "var(--color-text-muted)", marginTop: 6 }}>
-              اضغط على &quot;إضافة مركبة&quot; لإضافة أول مركبة في الأسطول.
-            </p>
-            {!search && (
-              <button
-                type="button"
-                onClick={() => setFormTarget(null)}
-                style={{
-                  marginTop: 16, height: 40, padding: "0 1.5rem",
-                  borderRadius: "var(--radius-lg)",
-                  border: "none", background: "var(--color-brand-600)",
-                  fontSize: 13, fontWeight: 700, color: "#FFF",
-                  cursor: "pointer", fontFamily: "var(--font-sans)",
-                }}
-              >
                 إضافة مركبة
-              </button>
+              </Button>
             )}
-          </div>
+          />
         ) : (
           /* ── Card grid ── */
           <div style={{
@@ -389,24 +344,15 @@ export default function CarsPage() {
                 { 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
+                <Button
                   key={btn.label}
+                  variant="secondary"
+                  size="sm"
                   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)",
-                    fontWeight: 600,
-                  }}
                 >
                   {btn.label}
-                </button>
+                </Button>
               ))}
             </div>
           </div>

app/dashboard/drivers/[driverId]/page.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
-import { ConfirmDialog, Spinner } from "@/src/Components/UI";
+import { ConfirmDialog, Spinner, Button, Toast } from "@/src/Components/UI";
 import { DriverFormModal , PhotoCard } from "@/src/Components/Driver";
 import { DriverReportPanel } from "@/src/Components/Driver_Report/driverReport";
 import type { Driver, CreateDriverPayload, UpdateDriverPayload } from "@/src/types/driver";
@@ -164,14 +164,9 @@ export default function DriverDetailPage() {
     return (
       <div style={{ maxWidth: 480, margin: "4rem auto", borderRadius: "var(--radius-xl)", border: "1px solid #FECACA", background: "#FEF2F2", padding: "1.5rem", textAlign: "center" }}>
         <p style={{ fontSize: 14, color: "#DC2626", fontWeight: 600 }}>⚠ {error ?? "السائق غير موجود"}</p>
-        <button type="button" onClick={() => router.back()} style={{
+        <Button variant="secondary" size="sm" onClick={() => router.back()} className="mt-4">
-          marginTop: "1rem", height: 38, padding: "0 1.25rem",
-          borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)",
-          background: "var(--color-surface)", fontSize: 13, fontWeight: 600,
-          color: "var(--color-text-secondary)", cursor: "pointer", fontFamily: "var(--font-sans)",
-        }}>
           ← رجوع
-        </button>
+        </Button>
       </div>
     );
   }
@@ -180,35 +175,18 @@ export default function DriverDetailPage() {
     <>
       <section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
 
-        {toast && (
+        <Toast notification={toast} onDismiss={() => setToast(null)} />
-          <div style={{
-            borderRadius: "var(--radius-lg)",
-            border: `1px solid ${toast.type === "success" ? "#BBF7D0" : "#FECACA"}`,
-            background: toast.type === "success" ? "#DCFCE7" : "#FEF2F2",
-            padding: "0.75rem 1.25rem",
-            fontSize: 13,
-            fontWeight: 600,
-            color: toast.type === "success" ? "#166534" : "#DC2626",
-          }}>
-            {toast.type === "success" ? "✓ " : "⚠ "}{toast.message}
-          </div>
-        )}
 
         <header style={{
           borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)",
           background: "var(--color-surface)", padding: "1.5rem 2rem", boxShadow: "var(--shadow-card)",
         }}>
-          <button type="button" onClick={() => router.back()} style={{
+          <Button variant="ghost" size="sm" onClick={() => router.back()} className="mb-4 !px-0">
-            display: "inline-flex", alignItems: "center", gap: 6,
-            fontSize: 12, fontWeight: 600, color: "var(--color-text-muted)",
-            background: "none", border: "none", cursor: "pointer", padding: 0,
-            marginBottom: "1rem", fontFamily: "var(--font-sans)",
-          }}>
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
               <path d="M19 12H5M12 5l-7 7 7 7" />
             </svg>
             العودة إلى قائمة السائقين
-          </button>
+          </Button>
 
           <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: "1rem" }}>
             <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
@@ -249,25 +227,16 @@ export default function DriverDetailPage() {
             </div>
 
             <div style={{ display: "flex", gap: "0.75rem" }}>
-              <button type="button" onClick={() => setDeleteOpen(true)} style={{
+              <Button variant="danger" onClick={() => setDeleteOpen(true)}>
-                height: 40, padding: "0 1.25rem", borderRadius: "var(--radius-lg)",
-                border: "1px solid #FECACA", background: "#FEF2F2",
-                fontSize: 13, fontWeight: 700, color: "#DC2626", cursor: "pointer", fontFamily: "var(--font-sans)",
-              }}>
                 حذف السائق
-              </button>
+              </Button>
-              <button type="button" onClick={() => setEditOpen(true)} style={{
+              <Button variant="primary" onClick={() => setEditOpen(true)}>
-                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)",
-              }}>
                 <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>
             </div>
           </div>
         </header>

app/dashboard/drivers/page.tsx

@@ -7,6 +7,8 @@ import {
   ArchiveButton,
   ConfirmDialog,
   Toast,
+  Button,
+  IconBtn,
 } from "@/src/Components/UI";
 import { ArchivedDrivers } from "@/src/Components/Driver/archive/ArchivedDrivers";
 import { useDrivers } from "@/src/hooks/useDriver";
@@ -59,17 +61,6 @@ const thStyle: React.CSSProperties = {
 // Shared across header + rows — keep these in sync or columns will misalign.
 const ROW_GRID_COLUMNS = "2fr 1.2fr 1fr 1.1fr 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 ────────────────────────────────────────────────────────────
 
 export default function DriversPage() {
@@ -346,24 +337,16 @@ export default function DriversPage() {
                     </span>
 
                     {/* ── Inline row actions: edit / delete ──
-                         stopPropagation is required on both buttons so the
+                         IconBtn already calls stopPropagation internally so
-                         click doesn't bubble up to the <li> onClick and
+                         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
+                      <IconBtn
-                        type="button"
-                        aria-label="تعديل السائق"
                         title="تعديل"
-                        onClick={(e) => {
+                        color="var(--color-brand-600)"
-                          e.stopPropagation();
+                        bg="var(--color-brand-50, #EFF6FF)"
-                          handleEdit(d);
+                        borderColor="var(--color-brand-200)"
-                        }}
+                        onClick={() => handleEdit(d)}
-                        style={{
-                          ...iconBtnBase,
-                          border: "1px solid var(--color-brand-200)",
-                          background: "var(--color-brand-50, #EFF6FF)",
-                          color: "var(--color-brand-600)",
-                        }}
                       >
                         <svg
                           width="14"
@@ -376,22 +359,14 @@ export default function DriversPage() {
                           <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>
+                      </IconBtn>
 
-                      <button
+                      <IconBtn
-                        type="button"
-                        aria-label="حذف السائق"
                         title="حذف"
-                        onClick={(e) => {
+                        color="#DC2626"
-                          e.stopPropagation();
+                        bg="#FEF2F2"
-                          handleDelete(d);
+                        borderColor="#FECACA"
-                        }}
+                        onClick={() => handleDelete(d)}
-                        style={{
-                          ...iconBtnBase,
-                          border: "1px solid #FECACA",
-                          background: "#FEF2F2",
-                          color: "#DC2626",
-                        }}
                       >
                         <svg
                           width="14"
@@ -406,7 +381,7 @@ export default function DriversPage() {
                           <path d="M10 11v6M14 11v6" />
                           <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
                         </svg>
-                      </button>
+                      </IconBtn>
                     </div>
                   </li>
                 );
@@ -437,37 +412,22 @@ export default function DriversPage() {
                 </strong>
               </span>
               <div style={{ display: "flex", gap: "0.5rem" }}>
-                {[
+                <Button
-                  {
+                  variant="secondary"
-                    label: "السابق",
+                  size="sm"
-                    action: () => setPage((p) => Math.max(1, p - 1)),
+                  onClick={() => setPage((p) => Math.max(1, p - 1))}
-                    disabled: page === 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>
+                </Button>
-                ))}
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={() => setPage((p) => Math.min(pages, p + 1))}
+                  disabled={page === pages}
+                >
+                  التالي
+                </Button>
               </div>
             </div>
           )}

app/dashboard/trips/[tripId]/page.tsx

@@ -11,7 +11,7 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
-import { ConfirmDialog, Spinner } from "@/src/Components/UI";
+import { Button, ConfirmDialog, Spinner } from "@/src/Components/UI";
 import { TripFormModal } from "@/src/Components/Trip";
 import { TripReportPanel } from "@/src/Components/Trip_Report/Tripreportpanel";
 import { tripService } from "@/src/services/trip.service";
@@ -304,25 +304,9 @@ export default function TripDetailPage() {
         <p style={{ fontSize: 14, color: "#DC2626", fontWeight: 600 }}>
           ⚠ {error ?? "الرحلة غير موجودة"}
         </p>
-        <button
+        <Button variant="secondary" size="sm" onClick={() => router.back()} style={{ marginTop: "1rem" }}>
-          type="button"
-          onClick={() => router.back()}
-          style={{
-            marginTop: "1rem",
-            height: 38,
-            padding: "0 1.25rem",
-            borderRadius: "var(--radius-md)",
-            border: "1px solid var(--color-border)",
-            background: "var(--color-surface)",
-            fontSize: 13,
-            fontWeight: 600,
-            color: "var(--color-text-secondary)",
-            cursor: "pointer",
-            fontFamily: "var(--font-sans)",
-          }}
-        >
           ← رجوع
-        </button>
+        </Button>
       </div>
     );
   }
@@ -346,29 +330,17 @@ export default function TripDetailPage() {
           }}
         >
           {/* Back link */}
-          <button
+          <Button
-            type="button"
+            variant="ghost"
+            size="sm"
             onClick={() => router.back()}
-            style={{
+            style={{ height: "auto", padding: 0, background: "none", marginBottom: "1rem" }}
-              display: "inline-flex",
-              alignItems: "center",
-              gap: 6,
-              fontSize: 12,
-              fontWeight: 600,
-              color: "var(--color-text-muted)",
-              background: "none",
-              border: "none",
-              cursor: "pointer",
-              padding: 0,
-              marginBottom: "1rem",
-              fontFamily: "var(--font-sans)",
-            }}
           >
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
               <path d="M19 12H5M12 5l-7 7 7 7" />
             </svg>
             العودة إلى قائمة الرحلات
-          </button>
+          </Button>
 
           <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: "1rem" }}>
             {/* Icon + title */}

src/Components/UI/Header.tsx

@@ -1,3 +1,7 @@
+import { Button } from "./Button";
+import { Input } from "./Input";
+import { Select } from "./Select";
+
 export default function Header({
   state,
   search,
@@ -75,50 +79,30 @@ export default function Header({
             display: "flex",
             gap: "0.5rem",
             flexWrap: "wrap",
-            alignItems: "center",
+            alignItems: "flex-end",
           }}
         >
-          <input
+          <Input
+            label="بحث"
             type="text"
-            placeholder="بحث   "
+            placeholder="ابحث..."
             value={search}
             onChange={(e) => {
               setSearch(e.target.value);
               setPage(1);
             }}
             dir="rtl"
-            style={{
+            className="w-[220px]"
-              width: 220,
-              height: 40,
-              padding: "0 0.75rem",
-              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)",
-            }}
           />
           {isAudit ? (
-            <select
+            <Select
               value={module}
               onChange={(e) => {
                 setModule(e.target.value);
                 setPage(1);
               }}
               dir="rtl"
-              style={{
+              className="w-[180px]"
-                height: 40,
-                padding: "0 0.75rem",
-                borderRadius: "var(--radius-lg)",
-                border: "1px solid var(--color-border)",
-                background: "var(--color-surface)",
-                fontSize: 13,
-                color: "var(--color-text-secondary)",
-                outline: "none",
-                fontFamily: "var(--font-sans)",
-              }}
             >
               <option value="">كل الوحدات</option>
               {[
@@ -135,29 +119,9 @@ export default function Header({
                   {m}
                 </option>
               ))}
-            </select>
+            </Select>
           ) : (
-            <button
+            <Button onClick={onAdd}>
-              type="button"
-              onClick={onAdd}
-              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"
@@ -170,7 +134,7 @@ export default function Header({
                 <line x1="5" y1="12" x2="19" y2="12" />
               </svg>
               إضافة {name}
-            </button>
+            </Button>
           )}
         </div>
       </div>