mfathy/LogisicsApp_Client
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

create car page and update user page

Browse Source
This commit is contained in:
m7amedez5511
2026-06-13 17:49:48 +03:00
parent e0e38dc87a
commit 68bfce4345
12 changed files with 2320 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
Components/car/CarDeleteModal.tsx Normal file
View File

@@ -0,0 +1,87 @@
"use client";
// Components/Car/CarDeleteModal.tsx
// Confirmation dialog before soft-deleting a car.
import { useEffect } from "react";
import { Spinner } from "../UI";
import type { Car } from "../../types/car";
interface CarDeleteModalProps {
car: Car;
deleting: boolean;
onCancel: () => void;
onConfirm: () => void;
}
export function CarDeleteModal({ car, deleting, onCancel, onConfirm }: CarDeleteModalProps) {
useEffect(() => {
const h = (e: KeyboardEvent) => { if (e.key === "Escape") onCancel(); };
window.addEventListener("keydown", h);
return () => window.removeEventListener("keydown", h);
}, [onCancel]);
return (
<div
role="alertdialog" aria-modal="true" aria-labelledby="car-del-title"
onClick={e => { if (e.target === e.currentTarget) onCancel(); }}
style={{
position: "fixed", inset: 0, zIndex: 60,
background: "rgba(15,23,42,0.55)", backdropFilter: "blur(4px)",
display: "flex", alignItems: "center", justifyContent: "center", padding: "1rem",
}}
>
<div
onClick={e => e.stopPropagation()}
style={{
width: "100%", maxWidth: 420,
background: "var(--color-surface)",
borderRadius: "var(--radius-xl)",
border: "1px solid #FECACA",
boxShadow: "0 20px 48px rgba(0,0,0,.18)",
padding: "2rem",
display: "flex", flexDirection: "column", gap: "1rem",
textAlign: "center",
}}
>
{/* Icon */}
<div style={{ width: 52, height: 52, margin: "0 auto", borderRadius: "50%", background: "#FEF2F2", border: "1px solid #FECACA", display: "flex", alignItems: "center", justifyContent: "center" }}>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#DC2626" strokeWidth="2">
<polyline points="3 6 5 6 21 6" />
<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
<path d="M10 11v6M14 11v6" />
<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
</svg>
</div>
<div>
<h2 id="car-del-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>
حذف المركبة
</h2>
<p style={{ marginTop: 8, fontSize: 13, color: "var(--color-text-muted)", lineHeight: 1.6 }}>
هل أنت متأكد من حذف{" "}
<strong style={{ color: "var(--color-text-primary)" }}>
{car.manufacturer} {car.model}
</strong>
{" "}(
<span style={{ fontFamily: "var(--font-mono)", fontSize: 12 }}>
{car.plateLetters} {car.plateNumber}
</span>
)؟ لا يمكن التراجع عن هذا الإجراء.
</p>
</div>
<div style={{ display: "flex", gap: "0.5rem" }}>
<button type="button" onClick={onCancel} disabled={deleting}
style={{ flex: 1, height: 40, borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", fontSize: 13, fontWeight: 600, color: "var(--color-text-secondary)", cursor: deleting ? "not-allowed" : "pointer", fontFamily: "var(--font-sans)" }}>
إلغاء
</button>
<button type="button" onClick={onConfirm} disabled={deleting}
style={{ flex: 1, height: 40, borderRadius: "var(--radius-md)", border: "none", background: "#DC2626", fontSize: 13, fontWeight: 700, color: "#FFF", cursor: deleting ? "not-allowed" : "pointer", display: "flex", alignItems: "center", justifyContent: "center", gap: 8, fontFamily: "var(--font-sans)", opacity: deleting ? 0.7 : 1 }}>
{deleting && <Spinner size="sm" className="text-white" />}
{deleting ? "جارٍ الحذف…" : "تأكيد الحذف"}
</button>
</div>
</div>
</div>
);
}

302
Components/car/CarDetailPanel.tsx Normal file
View File

@@ -0,0 +1,302 @@
"use client";
// Components/Car/CarDetailPanel.tsx
// Slide-in panel showing full car details with action buttons.
import { useEffect, useState } from "react";
import { Spinner } from "../UI";
import { CarImageGallery } from "./CarImageGallery";
import { carService } from "../../services/car.service";
import { getStoredToken } from "../../lib/auth";
import type { Car, CarStatus, InsuranceStatus } from "../../types/car";
// ── Status config ─────────────────────────────────────────────────────────────
const STATUS_MAP: Record<CarStatus, { 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<InsuranceStatus, { label: string; color: string }> = {
Valid: { label: "سارٍ", color: "#16A34A" },
Expired: { label: "منتهي", color: "#DC2626" },
NotInsured: { label: "غير مؤمَّن", color: "#D97706" },
};
// ── Helper: format date ───────────────────────────────────────────────────────
function fmtDate(iso?: string | null): string {
if (!iso) return "—";
return new Date(iso).toLocaleDateString("ar-SA", {
year: "numeric", month: "long", day: "numeric",
});
}
/** Returns true if the date is within 90 days in the future (or already past) */
function isExpiringSoon(iso?: string | null): boolean {
if (!iso) return false;
const diff = new Date(iso).getTime() - Date.now();
return diff <= 90 * 86_400_000;
}
// ── Props ─────────────────────────────────────────────────────────────────────
interface CarDetailPanelProps {
carId: string;
onClose: () => void;
onEdit: (car: Car) => void;
onDelete: (car: Car) => void;
}
// ── Row component ─────────────────────────────────────────────────────────────
function DetailRow({ label, value, mono = false, warn = false }: { label: string; value: string; mono?: boolean; warn?: boolean }) {
return (
<div style={{
display: "flex", justifyContent: "space-between", alignItems: "baseline",
padding: "0.6rem 0",
borderBottom: "1px solid var(--color-border)",
}}>
<span style={{ fontSize: 12, color: "var(--color-text-muted)", fontWeight: 600 }}>{label}</span>
<span style={{
fontSize: 13,
fontFamily: mono ? "var(--font-mono)" : "var(--font-sans)",
color: warn ? "#D97706" : "var(--color-text-primary)",
fontWeight: warn ? 600 : 400,
}}>
{warn && value !== "—" ? "⚠ " : ""}{value}
</span>
</div>
);
}
// ── Component ─────────────────────────────────────────────────────────────────
export function CarDetailPanel({ carId, onClose, onEdit, onDelete }: CarDetailPanelProps) {
const [car, setCar] = useState<Car | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [gallery, setGallery] = useState(false);
useEffect(() => {
const token = getStoredToken();
setLoading(true);
setError(null);
carService
.getById(carId, token)
.then(res => setCar((res as unknown as { data: Car }).data))
.catch((err: Error) => setError(err.message))
.finally(() => setLoading(false));
}, [carId]);
useEffect(() => {
const h = (e: KeyboardEvent) => { if (e.key === "Escape" && !gallery) onClose(); };
window.addEventListener("keydown", h);
return () => window.removeEventListener("keydown", h);
}, [gallery, onClose]);
// ── Render ───────────────────────────────────────────────────────────────────
return (
<>
{/* Backdrop */}
<div
onClick={onClose}
style={{
position: "fixed", inset: 0, zIndex: 40,
background: "rgba(15,23,42,0.45)", backdropFilter: "blur(2px)",
}}
/>
{/* Panel */}
<aside
aria-label="تفاصيل المركبة"
style={{
position: "fixed", top: 0, left: 0, bottom: 0, zIndex: 50,
width: "min(480px, 100vw)",
background: "var(--color-surface)",
borderRight: "1px solid var(--color-border)",
display: "flex", flexDirection: "column",
boxShadow: "8px 0 40px rgba(0,0,0,.18)",
overflowY: "hidden",
}}
>
{/* Header */}
<div style={{
padding: "1.25rem 1.5rem",
borderBottom: "1px solid var(--color-border)",
background: "var(--color-surface-muted)",
flexShrink: 0,
}}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
<div>
<p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600, margin: 0 }}>
تفاصيل المركبة
</p>
{car && (
<h2 style={{ fontSize: 18, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
{car.manufacturer} {car.model} {car.year}
</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", flexShrink: 0 }}>
×
</button>
</div>
</div>
{/* Content */}
<div style={{ flex: 1, overflowY: "auto", 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 && (
<div style={{ borderRadius: "var(--radius-md)", background: "#FEF2F2", border: "1px solid #FECACA", padding: "0.75rem 1rem", fontSize: 13, color: "#DC2626" }}>
⚠ {error}
</div>
)}
{car && !loading && (
<>
{/* Status badges */}
<div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: "1.25rem" }}>
{(() => {
const s = STATUS_MAP[car.currentStatus];
return (
<span style={{ borderRadius: "var(--radius-full)", border: `1px solid ${s.border}`, background: s.bg, padding: "0.3rem 0.875rem", fontSize: 12, fontWeight: 700, color: s.color }}>
{s.label}
</span>
);
})()}
{car.insuranceStatus && (() => {
const ins = INS_MAP[car.insuranceStatus!];
return (
<span style={{ borderRadius: "var(--radius-full)", border: `1px solid ${ins.color}33`, background: `${ins.color}11`, padding: "0.3rem 0.875rem", fontSize: 12, fontWeight: 700, color: ins.color }}>
تأمين: {ins.label}
</span>
);
})()}
{!car.isActive && (
<span style={{ borderRadius: "var(--radius-full)", border: "1px solid #FECACA", background: "#FEF2F2", padding: "0.3rem 0.875rem", fontSize: 12, fontWeight: 700, color: "#DC2626" }}>
محذوف
</span>
)}
</div>
{/* Section: Basic Info */}
<p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "var(--color-text-hint)", fontWeight: 700, marginBottom: "0.5rem" }}>
بيانات أساسية
</p>
<DetailRow label="الشركة المصنعة" value={car.manufacturer} />
<DetailRow label="الموديل" value={car.model} />
<DetailRow label="سنة الصنع" value={String(car.year)} />
<DetailRow label="اللون" value={car.color ?? "—"} />
<DetailRow label="الفرع" value={car.branch?.name ?? "—"} />
{/* Section: Plate */}
<p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "var(--color-text-hint)", fontWeight: 700, margin: "1.25rem 0 0.5rem" }}>
بيانات اللوحة
</p>
<DetailRow label="رقم اللوحة" value={`${car.plateLetters} ${car.plateNumber}`} mono />
<DetailRow label="نوع اللوحة" value={car.plateType ?? "—"} />
<DetailRow label="رقم الاستمارة" value={car.registrationNumber ?? "—"} mono />
<DetailRow label="رقم الهيكل (VIN)" value={car.vinNumber ?? "—"} mono />
{/* Section: Regulatory */}
<p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "var(--color-text-hint)", fontWeight: 700, margin: "1.25rem 0 0.5rem" }}>
الترخيص والتأمين
</p>
<DetailRow label="انتهاء الاستمارة" value={fmtDate(car.registrationExpiryDate)} warn={isExpiringSoon(car.registrationExpiryDate)} />
<DetailRow label="انتهاء التأمين" value={fmtDate(car.insuranceExpiryDate)} warn={isExpiringSoon(car.insuranceExpiryDate)} />
<DetailRow label="انتهاء الفحص الدوري" value={fmtDate(car.inspectionExpiryDate)} warn={isExpiringSoon(car.inspectionExpiryDate)} />
<DetailRow label="رقم بطاقة التشغيل" value={car.operationCardNumber ?? "—"} mono />
<DetailRow label="انتهاء بطاقة التشغيل" value={fmtDate(car.operationCardExpiry)} />
{/* Section: Operational */}
<p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "var(--color-text-hint)", fontWeight: 700, margin: "1.25rem 0 0.5rem" }}>
بيانات تشغيلية
</p>
<DetailRow label="رقم GPS" value={car.gpsDeviceId ?? "—"} mono />
<DetailRow label="الطاقة الاستيعابية" value={car.capacity != null ? String(car.capacity) : "—"} />
<DetailRow label="الوزن (كجم)" value={car.weight != null ? String(car.weight) : "—"} />
<DetailRow label="حالة الحجز" value={car.currentImpoundStatus ?? "بدون"} />
<DetailRow label="تاريخ الإضافة" value={fmtDate(car.createdAt)} />
<DetailRow label="آخر تحديث" value={fmtDate(car.updatedAt)} />
{/* Status History */}
{car.statusHistory && car.statusHistory.length > 0 && (
<>
<p style={{ fontSize: 11, letterSpacing: "0.25em", textTransform: "uppercase", color: "var(--color-text-hint)", fontWeight: 700, margin: "1.25rem 0 0.75rem" }}>
سجل الحالات
</p>
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
{car.statusHistory.slice(0, 6).map(h => {
const s = STATUS_MAP[h.carStatus] ?? STATUS_MAP.Active;
return (
<div key={h.id} style={{
display: "flex", justifyContent: "space-between", alignItems: "center",
borderRadius: "var(--radius-md)",
border: `1px solid ${s.border}`,
background: s.bg,
padding: "0.5rem 0.875rem",
}}>
<span style={{ fontSize: 12, fontWeight: 600, color: s.color }}>{s.label}</span>
<span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
{fmtDate(h.createdAt)}
</span>
</div>
);
})}
</div>
</>
)}
</>
)}
</div>
{/* Footer actions */}
{car && (
<div style={{
padding: "1rem 1.5rem",
borderTop: "1px solid var(--color-border)",
background: "var(--color-surface-muted)",
display: "flex", gap: "0.75rem",
flexShrink: 0,
}}>
{/* Gallery */}
<button type="button" onClick={() => setGallery(true)}
style={{ flex: 1, height: 40, 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", display: "flex", alignItems: "center", justifyContent: "center", gap: 8, fontFamily: "var(--font-sans)" }}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<rect x="3" y="3" width="18" height="18" rx="2" />
<circle cx="8.5" cy="8.5" r="1.5" />
<polyline points="21 15 16 10 5 21" />
</svg>
الصور
</button>
{/* Edit */}
<button type="button" onClick={() => onEdit(car)}
style={{ flex: 2, height: 40, borderRadius: "var(--radius-md)", border: "none", background: "var(--color-brand-600)", fontSize: 13, fontWeight: 700, color: "#FFF", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "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>
{/* Delete */}
<button type="button" onClick={() => onDelete(car)}
style={{ height: 40, padding: "0 1rem", borderRadius: "var(--radius-md)", border: "1px solid #FECACA", background: "#FEF2F2", fontSize: 13, fontWeight: 700, color: "#DC2626", cursor: "pointer", fontFamily: "var(--font-sans)" }}>
حذف
</button>
</div>
)}
</aside>
{/* Image gallery overlay */}
{gallery && car && (
<CarImageGallery car={car} onClose={() => setGallery(false)} />
)}
</>
);
}

761
Components/car/CarFormModal.tsx Normal file
View File

@@ -0,0 +1,761 @@
"use client";
import { useEffect, useRef, useState } from "react";
import { Alert, Spinner } from "../UI";
import { get } from "../../services/api";
import { getStoredToken } from "../../lib/auth";
import type {
Car,
CarFormErrors,
CreateCarPayload,
UpdateCarPayload,
} from "../../types/car";
import type { Branch } from "../../types/branch";
// ── Shared input style ───────────────────────────────────────────────────────
const inputBase: React.CSSProperties = {
width: "100%",
height: 40,
padding: "0 0.75rem",
borderRadius: "var(--radius-md)",
border: "1px solid var(--color-border)",
background: "var(--color-surface)",
fontSize: 13,
color: "var(--color-text-primary)",
outline: "none",
fontFamily: "var(--font-sans)",
};
const labelStyle: React.CSSProperties = {
display: "flex",
flexDirection: "column",
gap: 6,
fontSize: 12,
fontWeight: 600,
color: "var(--color-text-secondary)",
};
const errorTextStyle: React.CSSProperties = {
fontSize: 11,
color: "var(--color-danger)",
fontWeight: 500,
};
// ── Validation ───────────────────────────────────────────────────────────────
function validate(form: Partial<CreateCarPayload>): CarFormErrors {
const e: CarFormErrors = {};
if (!form.manufacturer?.trim()) e.manufacturer = "الشركة المصنعة مطلوبة";
if (!form.model?.trim()) e.model = "الموديل مطلوب";
if (
!form.year ||
form.year < 1900 ||
form.year > new Date().getFullYear() + 1
)
e.year = "سنة غير صالحة";
if (!form.plateNumber?.trim()) e.plateNumber = "رقم اللوحة مطلوب";
if (!form.plateLetters?.trim()) e.plateLetters = "حروف اللوحة مطلوبة";
return e;
}
// ── Date helper ──────────────────────────────────────────────────────────────
// <input type="date"> gives "YYYY-MM-DD"; the backend z.string().datetime()
// requires a full ISO-8601 string ("YYYY-MM-DDTHH:mm:ss.sssZ").
// We keep state as the short form (so the input renders correctly) and convert
// only at submit time.
function toIsoDateTime(val: string): string {
if (!val) return val;
if (val.includes("T")) return val; // Already in ISO format, likely from an existing record — just return as-is.
return `${val}T00:00:00.000Z`; // transform "2026-12-31" → "2026-12-31T00:00:00.000Z"
}
// ── Props ────────────────────────────────────────────────────────────────────
interface CarFormModalProps {
editCar: Car | null;
/** Pass pre-loaded branches or an empty array — the modal will auto-fetch if empty. */
branches: Branch[];
onClose: () => void;
onSubmit: (
payload: CreateCarPayload | UpdateCarPayload,
isNew: boolean,
) => Promise<boolean>;
}
// ── Component ────────────────────────────────────────────────────────────────
export function CarFormModal({
editCar,
branches: branchesProp,
onClose,
onSubmit,
}: CarFormModalProps) {
const isNew = editCar === null;
// ── Local branches (auto-fetched if prop is empty) ─────────────────────────
const [branches, setBranches] = useState<Branch[]>(branchesProp);
useEffect(() => {
if (branchesProp.length > 0) {
setBranches(branchesProp);
return;
}
const token = getStoredToken();
get<{ data: { data: Branch[] } }>("branches?limit=100", token)
.then((res) => {
const list =
(res as unknown as { data: { data: Branch[] } }).data?.data ?? [];
setBranches(list);
})
.catch(() => {
/* silently ignore — user can still submit */
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// ── Form state — each field correctly typed ────────────────────────────────
// String fields
const [manufacturer, setManufacturer] = useState(editCar?.manufacturer ?? "");
const [model, setModel] = useState(editCar?.model ?? "");
const [color, setColor] = useState(editCar?.color ?? "");
const [plateNumber, setPlateNumber] = useState(editCar?.plateNumber ?? "");
const [plateLetters, setPlateLetters] = useState(editCar?.plateLetters ?? "");
const [plateType, setPlateType] = useState(editCar?.plateType ?? "");
const [registrationNumber, setRegistrationNumber] = useState(
editCar?.registrationNumber ?? "",
);
const [vinNumber, setVinNumber] = useState(editCar?.vinNumber ?? "");
const [branchId, setBranchId] = useState(editCar?.branch?.id ?? "");
const [currentStatus, setCurrentStatus] = useState(
editCar?.currentStatus ?? "Active",
);
const [insuranceStatus, setInsuranceStatus] = useState(
editCar?.insuranceStatus ?? "Valid",
);
const [registrationExpiryDate, setRegistrationExpiryDate] = useState(
editCar?.registrationExpiryDate?.slice(0, 10) ?? "",
);
const [insuranceExpiryDate, setInsuranceExpiryDate] = useState(
editCar?.insuranceExpiryDate?.slice(0, 10) ?? "",
);
const [inspectionExpiryDate, setInspectionExpiryDate] = useState(
editCar?.inspectionExpiryDate?.slice(0, 10) ?? "",
);
const [gpsDeviceId, setGpsDeviceId] = useState(editCar?.gpsDeviceId ?? "");
// Numeric fields — undefined when blank
const [year, setYear] = useState<number | undefined>(
editCar?.year ?? new Date().getFullYear(),
);
const [capacity, setCapacity] = useState<number | undefined>(
editCar?.capacity ?? undefined,
);
const [weight, setWeight] = useState<number | undefined>(
editCar?.weight ?? undefined,
);
const [errors, setErrors] = useState<CarFormErrors>({});
const [saving, setSaving] = useState(false);
const [apiError, setApiError] = useState("");
const firstRef = useRef<HTMLInputElement>(null);
useEffect(() => {
firstRef.current?.focus();
}, []);
useEffect(() => {
const h = (e: KeyboardEvent) => {
if (e.key === "Escape") onClose();
};
window.addEventListener("keydown", h);
return () => window.removeEventListener("keydown", h);
}, [onClose]);
// ── Number input helper ───────────────────────────────────────────────────
const parseNum = (v: string): number | undefined =>
v.trim() === "" ? undefined : Number(v);
// ── Input error style ─────────────────────────────────────────────────────
const inputStyle = (field: keyof CarFormErrors): React.CSSProperties => ({
...inputBase,
...(errors[field]
? { borderColor: "var(--color-danger)", background: "#FEF2F2" }
: {}),
});
const clearFieldError = (field: keyof CarFormErrors) =>
setErrors((p) => ({ ...p, [field]: undefined }));
// ── Submit ────────────────────────────────────────────────────────────────
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
// Build a partial payload for validation (only required fields matter here)
const forValidation: Partial<CreateCarPayload> = {
manufacturer,
model,
year,
plateNumber,
plateLetters,
};
const errs = validate(forValidation);
if (Object.keys(errs).length) {
setErrors(errs);
return;
}
// Build the full payload — strip empty strings to avoid schema rejection.
// We use `unknown` cast here to satisfy TypeScript while we construct the
// object dynamically; the structure still fully matches CreateCarPayload.
const raw: Record<string, unknown> = {
manufacturer,
model,
year,
plateNumber,
plateLetters,
currentStatus,
};
// Optional string fields — only include if non-empty
if (color) raw.color = color;
if (plateType) raw.plateType = plateType;
if (registrationNumber) raw.registrationNumber = registrationNumber;
if (vinNumber) raw.vinNumber = vinNumber;
if (branchId) raw.branchId = branchId;
if (insuranceStatus) raw.insuranceStatus = insuranceStatus;
if (registrationExpiryDate)
raw.registrationExpiryDate = toIsoDateTime(registrationExpiryDate);
if (insuranceExpiryDate)
raw.insuranceExpiryDate = toIsoDateTime(insuranceExpiryDate);
if (inspectionExpiryDate)
raw.inspectionExpiryDate = toIsoDateTime(inspectionExpiryDate);
if (gpsDeviceId) raw.gpsDeviceId = gpsDeviceId;
// Numeric optional fields
if (capacity !== undefined) raw.capacity = capacity;
if (weight !== undefined) raw.weight = weight;
// Cast to CreateCarPayload — structure is identical, we just built it dynamically
const payload = raw as unknown as CreateCarPayload;
setSaving(true);
setApiError("");
const ok = await onSubmit(payload, isNew);
setSaving(false);
if (ok) onClose();
else setApiError("حدث خطأ غير متوقع. يرجى المحاولة لاحقاً.");
};
// ── Render ────────────────────────────────────────────────────────────────
return (
<div
role="dialog"
aria-modal="true"
aria-labelledby="car-modal-title"
onClick={(e) => {
if (e.target === e.currentTarget) onClose();
}}
style={{
position: "fixed",
inset: 0,
zIndex: 50,
background: "rgba(15,23,42,0.55)",
backdropFilter: "blur(4px)",
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "1rem",
overflowY: "auto",
}}
>
<div
onClick={(e) => e.stopPropagation()}
style={{
width: "100%",
maxWidth: 620,
background: "var(--color-surface)",
borderRadius: "var(--radius-2xl)",
border: "1px solid var(--color-border)",
boxShadow: "0 24px 64px rgba(0,0,0,.18)",
overflow: "hidden",
margin: "auto",
}}
>
{/* Header */}
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: "1.25rem 1.5rem",
borderBottom: "1px solid var(--color-border)",
background: "var(--color-surface-muted)",
}}
>
<div>
<p
style={{
fontSize: 11,
letterSpacing: "0.3em",
textTransform: "uppercase",
color: "#2563EB",
fontWeight: 600,
margin: 0,
}}
>
{isNew ? "إضافة مركبة" : "تعديل مركبة"}
</p>
<h2
id="car-modal-title"
style={{
fontSize: 17,
fontWeight: 700,
color: "var(--color-text-primary)",
margin: "4px 0 0",
}}
>
{isNew
? "مركبة جديدة"
: `${editCar?.manufacturer} ${editCar?.model}`}
</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>
{/* Form */}
<form
onSubmit={handleSubmit}
noValidate
style={{
padding: "1.5rem",
display: "flex",
flexDirection: "column",
gap: "1rem",
maxHeight: "75vh",
overflowY: "auto",
}}
dir="rtl"
>
{apiError && (
<Alert
type="error"
message={apiError}
onClose={() => setApiError("")}
/>
)}
{/* Section: Basic Info */}
<p
style={{
fontSize: 11,
letterSpacing: "0.25em",
textTransform: "uppercase",
color: "var(--color-text-hint)",
fontWeight: 700,
margin: 0,
}}
>
بيانات أساسية
</p>
<div
style={{
display: "grid",
gridTemplateColumns: "1fr 1fr",
gap: "0.75rem",
}}
>
{/* Manufacturer — directly mapped to CreateCarPayload.manufacturer */}
<label style={labelStyle}>
الشركة المصنعة *
<input
ref={firstRef}
style={inputStyle("manufacturer")}
value={manufacturer}
onChange={(e) => {
setManufacturer(e.target.value);
clearFieldError("manufacturer");
}}
placeholder="تويوتا"
dir="rtl"
autoComplete="off"
/>
{errors.manufacturer && (
<span style={errorTextStyle}>{errors.manufacturer}</span>
)}
</label>
{/* Model — directly mapped to CreateCarPayload.model */}
<label style={labelStyle}>
الموديل *
<input
style={inputStyle("model")}
value={model}
onChange={(e) => {
setModel(e.target.value);
clearFieldError("model");
}}
placeholder="لاند كروزر"
dir="rtl"
/>
{errors.model && (
<span style={errorTextStyle}>{errors.model}</span>
)}
</label>
</div>
<div
style={{
display: "grid",
gridTemplateColumns: "1fr 1fr 1fr",
gap: "0.75rem",
}}
>
{/* Year — maps to CreateCarPayload.year (number) */}
<label style={labelStyle}>
سنة الصنع *
<input
style={inputStyle("year")}
type="number"
min={1900}
max={new Date().getFullYear() + 1}
value={year ?? ""}
onChange={(e) => {
setYear(parseNum(e.target.value));
clearFieldError("year");
}}
dir="ltr"
/>
{errors.year && <span style={errorTextStyle}>{errors.year}</span>}
</label>
<label style={labelStyle}>
اللون
<input
style={inputBase}
value={color}
onChange={(e) => setColor(e.target.value)}
placeholder="أبيض"
dir="rtl"
/>
</label>
<label style={labelStyle}>
نوع اللوحة
<input
style={inputBase}
value={plateType}
onChange={(e) => setPlateType(e.target.value)}
placeholder="خاص"
dir="rtl"
/>
</label>
</div>
{/* Section: Plate */}
<p
style={{
fontSize: 11,
letterSpacing: "0.25em",
textTransform: "uppercase",
color: "var(--color-text-hint)",
fontWeight: 700,
margin: "0.5rem 0 0",
}}
>
بيانات اللوحة
</p>
<div
style={{
display: "grid",
gridTemplateColumns: "1fr 1fr",
gap: "0.75rem",
}}
>
{/* plateNumber — directly mapped to CreateCarPayload.plateNumber */}
<label style={labelStyle}>
رقم اللوحة *
<input
style={inputStyle("plateNumber")}
value={plateNumber}
onChange={(e) => {
setPlateNumber(e.target.value);
clearFieldError("plateNumber");
}}
placeholder="1234"
dir="ltr"
/>
{errors.plateNumber && (
<span style={errorTextStyle}>{errors.plateNumber}</span>
)}
</label>
{/* plateLetters — directly mapped to CreateCarPayload.plateLetters */}
<label style={labelStyle}>
حروف اللوحة *
<input
style={inputStyle("plateLetters")}
value={plateLetters}
onChange={(e) => {
setPlateLetters(e.target.value);
clearFieldError("plateLetters");
}}
placeholder="أ ب ج"
dir="rtl"
/>
{errors.plateLetters && (
<span style={errorTextStyle}>{errors.plateLetters}</span>
)}
</label>
</div>
{/* Section: Registration & Legal */}
<p
style={{
fontSize: 11,
letterSpacing: "0.25em",
textTransform: "uppercase",
color: "var(--color-text-hint)",
fontWeight: 700,
margin: "0.5rem 0 0",
}}
>
الترخيص والتأمين
</p>
<div
style={{
display: "grid",
gridTemplateColumns: "1fr 1fr",
gap: "0.75rem",
}}
>
<label style={labelStyle}>
رقم الاستمارة
<input
style={inputBase}
value={registrationNumber}
onChange={(e) => setRegistrationNumber(e.target.value)}
placeholder="SA-001234"
dir="ltr"
/>
</label>
<label style={labelStyle}>
رقم الهيكل (VIN)
<input
style={inputBase}
value={vinNumber}
onChange={(e) => setVinNumber(e.target.value)}
placeholder="1HGBH41JXMN109186"
dir="ltr"
/>
</label>
<label style={labelStyle}>
انتهاء الاستمارة
<input
style={inputBase}
type="date"
value={registrationExpiryDate}
onChange={(e) => setRegistrationExpiryDate(e.target.value)}
/>
</label>
<label style={labelStyle}>
حالة التأمين
<select
style={{ ...inputBase, cursor: "pointer" }}
value={insuranceStatus ?? "Valid"}
onChange={(e) =>
setInsuranceStatus(
e.target.value as Car["insuranceStatus"] | undefined,
)
}
dir="rtl"
>
<option value="Valid">سارٍ</option>
<option value="Expired">منتهي</option>
<option value="NotInsured">غير مؤمَّن</option>
</select>
</label>
<label style={labelStyle}>
انتهاء التأمين
<input
style={inputBase}
type="date"
value={insuranceExpiryDate}
onChange={(e) => setInsuranceExpiryDate(e.target.value)}
/>
</label>
<label style={labelStyle}>
انتهاء الفحص الدوري
<input
style={inputBase}
type="date"
value={inspectionExpiryDate}
onChange={(e) => setInspectionExpiryDate(e.target.value)}
/>
</label>
</div>
{/* Section: Operational */}
<p
style={{
fontSize: 11,
letterSpacing: "0.25em",
textTransform: "uppercase",
color: "var(--color-text-hint)",
fontWeight: 700,
margin: "0.5rem 0 0",
}}
>
بيانات تشغيلية
</p>
<div
style={{
display: "grid",
gridTemplateColumns: "1fr 1fr 1fr",
gap: "0.75rem",
}}
>
<label style={labelStyle}>
الفرع
<select
style={{ ...inputBase, cursor: "pointer" }}
value={branchId}
onChange={(e) => setBranchId(e.target.value)}
dir="rtl"
>
<option value="">اختر الفرع</option>
{branches.map((b) => (
<option key={b.id} value={b.id}>
{b.name}
</option>
))}
</select>
</label>
<label style={labelStyle}>
الحالة
<select
style={{ ...inputBase, cursor: "pointer" }}
value={currentStatus}
onChange={(e) =>
setCurrentStatus(e.target.value as Car["currentStatus"])
}
dir="rtl"
>
<option value="Active">نشط</option>
<option value="InMaintenance">صيانة</option>
<option value="InTrip">في رحلة</option>
<option value="Inactive">غير نشط</option>
</select>
</label>
<label style={labelStyle}>
رقم GPS
<input
style={inputBase}
value={gpsDeviceId}
onChange={(e) => setGpsDeviceId(e.target.value)}
placeholder="GPS-001"
dir="ltr"
/>
</label>
{/* capacity — maps to CreateCarPayload.capacity (number | undefined) */}
<label style={labelStyle}>
الطاقة الاستيعابية
<input
style={inputBase}
type="number"
min={0}
value={capacity ?? ""}
onChange={(e) => setCapacity(parseNum(e.target.value))}
placeholder="0"
dir="ltr"
/>
</label>
{/* weight — maps to CreateCarPayload.weight (number | undefined) */}
<label style={labelStyle}>
الوزن (كجم)
<input
style={inputBase}
type="number"
min={0}
value={weight ?? ""}
onChange={(e) => setWeight(parseNum(e.target.value))}
placeholder="0"
dir="ltr"
/>
</label>
</div>
{/* Actions */}
<div
style={{
display: "flex",
gap: "0.5rem",
justifyContent: "flex-end",
paddingTop: "0.5rem",
}}
>
<button
type="button"
onClick={onClose}
disabled={saving}
style={{
height: 40,
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: saving ? "not-allowed" : "pointer",
fontFamily: "var(--font-sans)",
}}
>
إلغاء
</button>
<button
type="submit"
disabled={saving}
style={{
height: 40,
padding: "0 1.5rem",
borderRadius: "var(--radius-md)",
border: "none",
background: saving
? "var(--color-brand-400)"
: "var(--color-brand-600)",
fontSize: 13,
fontWeight: 700,
color: "#FFF",
cursor: saving ? "not-allowed" : "pointer",
display: "flex",
alignItems: "center",
gap: 8,
fontFamily: "var(--font-sans)",
}}
>
{saving && <Spinner size="sm" className="text-white" />}
{saving
? "جارٍ الحفظ…"
: isNew
? "إضافة المركبة"
: "حفظ التغييرات"}
</button>
</div>
</form>
</div>
</div>
);
}

361
Components/car/CarImageGallery.tsx Normal file
View File

@@ -0,0 +1,361 @@
"use client";
// Components/Car/CarImageGallery.tsx
// Full-screen gallery modal for viewing, uploading and deleting car images.
import { useCallback, useEffect, useRef, useState } from "react";
import { Spinner } from "../UI";
import { carService } from "../../services/car.service";
import { getStoredToken } from "../../lib/auth";
import type { Car, CarImage, ImageStage } from "../../types/car";
// ── Stage badge config ────────────────────────────────────────────────────────
const STAGE_MAP: Record<ImageStage, { label: string; color: string; bg: string }> = {
BEFORE: { label: "قبل", color: "#854D0E", bg: "#FFFBEB" },
AFTER: { label: "بعد", color: "#166534", bg: "#DCFCE7" },
GENERAL: { label: "عام", color: "#1E40AF", bg: "#EFF6FF" },
};
// ── Props ─────────────────────────────────────────────────────────────────────
interface CarImageGalleryProps {
car: Car;
onClose: () => void;
}
// ── Component ─────────────────────────────────────────────────────────────────
export function CarImageGallery({ car, onClose }: CarImageGalleryProps) {
const [images, setImages] = useState<CarImage[]>([]);
const [loading, setLoading] = useState(true);
const [uploading, setUploading] = useState(false);
const [deleting, setDeleting] = useState<string | null>(null);
const [error, setError] = useState<string | null>(null);
const [lightbox, setLightbox] = useState<CarImage | null>(null);
const [stage, setStage] = useState<ImageStage>("GENERAL");
const [sortBy, setSortBy] = useState<"asc" | "desc">("desc");
const fileRef = useRef<HTMLInputElement>(null);
// ── Fetch images ────────────────────────────────────────────────────────────
const fetchImages = useCallback(async () => {
setLoading(true);
setError(null);
try {
const token = getStoredToken();
const res = await carService.getImages(car.id, token, { sortBy });
const raw = (res as unknown as { data: CarImage[] }).data ?? [];
setImages(raw);
} catch (err: unknown) {
setError(err instanceof Error ? err.message : "تعذّر تحميل الصور");
} finally {
setLoading(false);
}
}, [car.id, sortBy]);
useEffect(() => { fetchImages(); }, [fetchImages]);
// Close on Escape
useEffect(() => {
const h = (e: KeyboardEvent) => {
if (e.key === "Escape") {
if (lightbox) setLightbox(null);
else onClose();
}
};
window.addEventListener("keydown", h);
return () => window.removeEventListener("keydown", h);
}, [lightbox, onClose]);
// ── Upload handler ──────────────────────────────────────────────────────────
const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
const files = Array.from(e.target.files ?? []);
if (!files.length) return;
setUploading(true);
setError(null);
try {
const token = getStoredToken();
await carService.uploadImages(car.id, files, stage, token);
await fetchImages();
} catch (err: unknown) {
setError(err instanceof Error ? err.message : "فشل رفع الصور");
} finally {
setUploading(false);
if (fileRef.current) fileRef.current.value = "";
}
};
// ── Delete handler ──────────────────────────────────────────────────────────
const handleDelete = async (imageId: string) => {
setDeleting(imageId);
setError(null);
try {
const token = getStoredToken();
await carService.deleteImage(imageId, token);
setImages(prev => prev.filter(img => img.id !== imageId));
if (lightbox?.id === imageId) setLightbox(null);
} catch (err: unknown) {
setError(err instanceof Error ? err.message : "فشل حذف الصورة");
} finally {
setDeleting(null);
}
};
// ── Helpers ─────────────────────────────────────────────────────────────────
/** Build full image URL — uses the proxy so no CORS issues */
const imgSrc = (img: CarImage) =>
img.url ?? `/api/proxy/car-photos/${img.image}`;
// ── Render ───────────────────────────────────────────────────────────────────
return (
<div
role="dialog" aria-modal="true" aria-label="معرض صور المركبة"
onClick={e => { if (e.target === e.currentTarget) onClose(); }}
style={{
position: "fixed", inset: 0, zIndex: 70,
background: "rgba(15,23,42,0.7)", backdropFilter: "blur(6px)",
display: "flex", flexDirection: "column",
}}
>
{/* ── Header ── */}
<div style={{
display: "flex", alignItems: "center", justifyContent: "space-between",
padding: "1rem 1.5rem",
background: "var(--color-surface)",
borderBottom: "1px solid var(--color-border)",
flexShrink: 0,
}}>
<div>
<p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600, margin: 0 }}>
معرض الصور
</p>
<h2 style={{ fontSize: 16, fontWeight: 700, color: "var(--color-text-primary)", margin: "2px 0 0" }}>
{car.manufacturer} {car.model} — {car.plateLetters} {car.plateNumber}
</h2>
</div>
<div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
{/* Sort */}
<select
value={sortBy}
onChange={e => setSortBy(e.target.value as "asc" | "desc")}
style={{
height: 36, borderRadius: "var(--radius-md)",
border: "1px solid var(--color-border)",
background: "var(--color-surface)",
fontSize: 12, color: "var(--color-text-secondary)",
padding: "0 0.75rem", outline: "none",
fontFamily: "var(--font-sans)",
}}
>
<option value="desc">الأحدث أولاً</option>
<option value="asc">الأقدم أولاً</option>
</select>
{/* Stage selector for upload */}
<select
value={stage}
onChange={e => setStage(e.target.value as ImageStage)}
style={{
height: 36, borderRadius: "var(--radius-md)",
border: "1px solid var(--color-border)",
background: "var(--color-surface)",
fontSize: 12, color: "var(--color-text-secondary)",
padding: "0 0.75rem", outline: "none",
fontFamily: "var(--font-sans)",
}}
>
<option value="GENERAL">عام</option>
<option value="BEFORE">قبل</option>
<option value="AFTER">بعد</option>
</select>
{/* Upload button */}
<button
type="button"
onClick={() => fileRef.current?.click()}
disabled={uploading}
style={{
height: 36, padding: "0 1rem",
borderRadius: "var(--radius-md)",
border: "none",
background: uploading ? "var(--color-brand-400)" : "var(--color-brand-600)",
fontSize: 13, fontWeight: 700, color: "#FFF",
cursor: uploading ? "not-allowed" : "pointer",
display: "flex", alignItems: "center", gap: 8,
fontFamily: "var(--font-sans)",
}}
>
{uploading
? <><Spinner size="sm" className="text-white" /> جارٍ الرفع…</>
: <>
<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>
<input
ref={fileRef}
type="file"
accept="image/*"
multiple
style={{ display: "none" }}
onChange={handleUpload}
/>
{/* Close */}
<button type="button" onClick={onClose} aria-label="إغلاق"
style={{ width: 36, height: 36, borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", cursor: "pointer", fontSize: 20, color: "var(--color-text-muted)", display: "flex", alignItems: "center", justifyContent: "center" }}>
×
</button>
</div>
</div>
{/* ── Error ── */}
{error && (
<div style={{ padding: "0.75rem 1.5rem", background: "#FEF2F2", borderBottom: "1px solid #FECACA", fontSize: 13, color: "#DC2626", fontWeight: 500 }}>
⚠ {error}
<button onClick={() => setError(null)} style={{ marginRight: 8, fontSize: 14, background: "none", border: "none", color: "#DC2626", cursor: "pointer" }}>×</button>
</div>
)}
{/* ── Gallery Grid ── */}
<div style={{ flex: 1, overflowY: "auto", padding: "1.5rem" }}>
{loading ? (
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, padding: "4rem 0" }}>
<Spinner size="lg" />
<span style={{ fontSize: 14, color: "var(--color-text-muted)" }}>جارٍ تحميل الصور…</span>
</div>
) : images.length === 0 ? (
<div style={{ textAlign: "center", padding: "5rem 0" }}>
<div style={{ fontSize: 48, marginBottom: 12 }}>📸</div>
<p style={{ fontSize: 15, color: "var(--color-text-muted)", fontWeight: 600 }}>لا توجد صور بعد</p>
<p style={{ fontSize: 13, color: "var(--color-text-hint)", marginTop: 4 }}>
اضغط على "رفع صور" لإضافة أولى الصور لهذه المركبة.
</p>
</div>
) : (
<div style={{
display: "grid",
gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
gap: "1rem",
}}>
{images.map(img => {
const stageInfo = STAGE_MAP[img.stage ?? "GENERAL"] ?? STAGE_MAP.GENERAL;
const isDeleting = deleting === img.id;
return (
<div
key={img.id}
style={{
borderRadius: "var(--radius-xl)",
border: "1px solid var(--color-border)",
background: "var(--color-surface)",
overflow: "hidden",
boxShadow: "var(--shadow-card)",
opacity: isDeleting ? 0.5 : 1,
transition: "opacity 200ms",
}}
>
{/* Image */}
<div
style={{ position: "relative", paddingBottom: "70%", cursor: "pointer" }}
onClick={() => setLightbox(img)}
>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={imgSrc(img)}
alt={`صورة ${stageInfo.label}`}
style={{
position: "absolute", inset: 0,
width: "100%", height: "100%",
objectFit: "cover",
}}
onError={e => { (e.target as HTMLImageElement).src = "/file.svg"; }}
/>
{/* Stage badge */}
<span style={{
position: "absolute", top: 8, right: 8,
borderRadius: "var(--radius-full)",
background: stageInfo.bg,
color: stageInfo.color,
padding: "0.2rem 0.625rem",
fontSize: 10, fontWeight: 700,
boxShadow: "0 1px 4px rgba(0,0,0,.12)",
}}>
{stageInfo.label}
</span>
</div>
{/* Footer */}
<div style={{
display: "flex", alignItems: "center", justifyContent: "space-between",
padding: "0.6rem 0.75rem",
borderTop: "1px solid var(--color-border)",
}}>
<span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
{new Date(img.createdAt).toLocaleDateString("ar-SA", { month: "short", day: "numeric" })}
</span>
<button
type="button"
onClick={() => handleDelete(img.id)}
disabled={isDeleting}
aria-label="حذف الصورة"
style={{
width: 28, height: 28,
borderRadius: "var(--radius-sm)",
border: "1px solid #FECACA",
background: "#FEF2F2",
color: "#DC2626",
cursor: isDeleting ? "not-allowed" : "pointer",
display: "flex", alignItems: "center", justifyContent: "center",
}}
>
{isDeleting
? <Spinner size="sm" className="text-red-600" />
: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<polyline points="3 6 5 6 21 6" />
<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
</svg>
}
</button>
</div>
</div>
);
})}
</div>
)}
</div>
{/* ── Lightbox ── */}
{lightbox && (
<div
onClick={() => setLightbox(null)}
style={{
position: "fixed", inset: 0, zIndex: 80,
background: "rgba(0,0,0,0.9)",
display: "flex", alignItems: "center", justifyContent: "center",
padding: "1rem",
}}
>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={imgSrc(lightbox)}
alt="عرض مكبَّر"
style={{ maxWidth: "90vw", maxHeight: "90vh", borderRadius: "var(--radius-lg)", objectFit: "contain" }}
onClick={e => e.stopPropagation()}
onError={e => { (e.target as HTMLImageElement).src = "/file.svg"; }}
/>
<button
onClick={() => setLightbox(null)}
style={{
position: "absolute", top: 24, right: 24,
width: 40, height: 40, borderRadius: "50%",
background: "rgba(255,255,255,0.15)", border: "none",
color: "#fff", fontSize: 20, cursor: "pointer",
display: "flex", alignItems: "center", justifyContent: "center",
}}
>
×
</button>
</div>
)}
</div>
);
}

0
Components/car/car.tsx
View File