"use client"; import { useCallback, useEffect, useState } from "react"; import { Spinner } from "../UI"; import { driverService } from "../../services/driver.service"; import { getStoredToken } from "../../lib/auth"; import type { Driver } from "../../types/driver"; import { DRIVER_STATUS_MAP, DRIVER_CARD_TYPE_MAP, NATIONAL_ID_TYPE_MAP, } from "../../types/driver"; // ── Helpers ─────────────────────────────────────────────────────────────────── /** Format an ISO date string to a readable Arabic 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; } /** Build the full image URL via the proxy to avoid CORS issues. */ function buildPhotoUrl(filename?: string | null): string | null { if (!filename) return null; return `/api/proxy/driver-photos/${filename}`; } // ── Sub-components ──────────────────────────────────────────────────────────── function DetailRow({ label, value, mono = false, warn = false, }: { label: string; value: string; mono?: boolean; warn?: boolean; }) { return (
{label} {warn && value !== "—" ? "⚠ " : ""} {value}
); } function SectionHeading({ title }: { title: string }) { return (

{title}

); } // ── Report generator sub-panel ─────────────────────────────────────────────── function ReportPanel({ driverId }: { driverId: string }) { const today = new Date().toISOString().slice(0, 10); const [date, setDate] = useState(today); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [reportUrl, setReportUrl] = useState(null); const handleGenerate = async () => { setLoading(true); setError(null); setReportUrl(null); try { const token = getStoredToken(); const res = await driverService.getDailyReport(driverId, date, token); const url = ( res as unknown as { data: { reportUrl: string } } ).data?.reportUrl; setReportUrl(url ?? null); } catch (err: unknown) { setError( err instanceof Error ? err.message : "تعذّر إنشاء التقرير.", ); } finally { setLoading(false); } }; return (

إنشاء تقرير يومي

{/* Date input */}
{ setDate(e.target.value); setReportUrl(null); setError(null); }} style={{ width: "100%", height: 38, padding: "0 0.625rem", 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)", }} />
{/* Generate button */}
{/* Error */} {error && (
⚠ {error}
)} {/* Success link */} {reportUrl && (
✓ تم إنشاء التقرير بنجاح فتح التقرير ↗
)}
); } // ── Props ───────────────────────────────────────────────────────────────────── interface DriverDetailPanelProps { driverId: string; onClose: () => void; onDelete: (driver: Driver) => void; } // ── Component ───────────────────────────────────────────────────────────────── export function DriverDetailPanel({ driverId, onClose, onDelete, }: DriverDetailPanelProps) { const [driver, setDriver] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [imgError, setImgError] = useState(false); // Fetch driver data const loadDriver = useCallback(async () => { setLoading(true); setError(null); try { const token = getStoredToken(); const res = await driverService.getById(driverId, token); setDriver((res as unknown as { data: Driver }).data); } catch (err: unknown) { setError( err instanceof Error ? err.message : "تعذّر تحميل بيانات السائق.", ); } finally { setLoading(false); } }, [driverId]); useEffect(() => { loadDriver(); }, [loadDriver]); // Close on Escape key useEffect(() => { const h = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", h); return () => window.removeEventListener("keydown", h); }, [onClose]); const photoUrl = driver ? buildPhotoUrl(driver.photo) : null; const statusConfig = driver ? DRIVER_STATUS_MAP[driver.status] : null; return ( <> {/* Backdrop */}
{/* Slide-in panel — from the left, mirroring CarDetailPanel */} ); }