cheange inlien code to block code and using tamplet

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={{
-            borderRadius: "var(--radius-xl)",
-            border: "2px dashed var(--color-border)",
-            background: "var(--color-surface)",
-            padding: "5rem 2rem",
-            textAlign: "center",
-          }}>
-            <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)",
-                }}
-              >
+          <EmptyState
+            icon="🚗"
+            title={search ? `لا توجد مركبات تطابق "${search}"` : "لا توجد مركبات بعد"}
+            description='اضغط على "إضافة مركبة" لإضافة أول مركبة في الأسطول.'
+            action={!search && (
+              <Button variant="primary" onClick={() => setFormTarget(null)}>
                 إضافة مركبة
-              </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>