"use client"; import { useEffect, useState } from "react"; import { getStoredToken } from "../../lib/auth"; import { get } from "../../services/api"; import { Spinner, Alert } from "../../Components/UI"; interface Car { id: string; manufacturer: string; model: string; year: number; color?: string; plateNumber: string; plateLetters: string; currentStatus: "Active" | "InMaintenance" | "InTrip" | "Inactive"; insuranceStatus?: "Valid" | "Expired" | "NotInsured"; insuranceExpiryDate?: string; registrationExpiryDate?: string; branch?: { name: string }; createdAt: string; } interface ApiResponse { data: { data: Car[]; pagination: { total: number; page: number; pages: number }; meta?: { total: number; pages: number }; }; } const STATUS_MAP: Record< Car["currentStatus"], { label: string; color: string; bg: string; border: string } > = { Active: { label: "نشط", color: "#166534", bg: "#DCFCE7", border: "#BBF7D0" }, InMaintenance: { label: "صيانة", color: "#854D0E", bg: "#FFFBEB", border: "#FDE68A", }, InTrip: { label: "في رحلة", color: "#1E40AF", bg: "#EFF6FF", border: "#BFDBFE", }, Inactive: { label: "غير نشط", color: "#64748B", bg: "#F1F5F9", border: "#E2E8F0", }, }; const INS_MAP: Record = { Valid: { label: "سارٍ", color: "#16A34A" }, Expired: { label: "منتهي", color: "#DC2626" }, NotInsured: { label: "غير مؤمَّن", color: "#D97706" }, }; function fmtDate(iso?: string) { if (!iso) return "—"; return new Date(iso).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric", }); } const cardStyle: React.CSSProperties = { borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)", background: "var(--color-surface)", overflow: "hidden", boxShadow: "var(--shadow-card)", }; const thStyle: React.CSSProperties = { padding: "0.75rem 1.5rem", fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.2em", color: "var(--color-text-muted)", background: "var(--color-surface-muted)", borderBottom: "1px solid var(--color-border)", }; export default function CarsPage() { const [cars, setCars] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [search, setSearch] = useState(""); const [page, setPage] = useState(1); const [total, setTotal] = useState(0); const [pages, setPages] = useState(1); useEffect(() => { const token = getStoredToken(); setLoading(true); setError(null); const query = `?page=${page}&limit=10${search ? `&search=${encodeURIComponent(search)}` : ""}`; get(`cars${query}`, token) .then((res) => { const payload = res.data ?? res; setCars(payload.data ?? []); setTotal(payload.meta?.total ?? 0); setPages(payload.meta?.pages ?? 1); }) .catch((err: Error) => setError(err.message)) .finally(() => setLoading(false)); }, [page, search]); return (
{/* Header */}

إدارة الأسطول

السيارات

إجمالي{" "} {total} {" "} مركبة في الأسطول

{ setSearch(e.target.value); setPage(1); }} 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)", }} />
{error && ( setError(null)} /> )} {/* Table */}
السيارة اللوحة الفرع الحالة التأمين انتهاء الاستمارة
{loading ? (
جارٍ التحميل…
) : cars.length === 0 ? (

لا توجد نتائج {search && `لـ "${search}"`}

) : (
    {cars.map((c, i) => { const status = STATUS_MAP[c.currentStatus]; const ins = c.insuranceStatus ? INS_MAP[c.insuranceStatus] : null; return (

  • {c.manufacturer} {c.model}

    {c.year} {c.color ? ` · ${c.color}` : ""}

    {c.plateLetters} {c.plateNumber} {c.branch?.name ?? "—"} {status.label} {ins?.label ?? "—"} {fmtDate(c.registrationExpiryDate)}
    • ); })}
)} {pages > 1 && (
صفحة{" "} {page} {" "} من{" "} {pages}
{[ { 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) => ( ))}
)}
); }