diff --git a/Components/Driver/DriverDetailPanel.tsx b/Components/Driver/DriverDetailPanel.tsx index f602da7..84f0db8 100644 --- a/Components/Driver/DriverDetailPanel.tsx +++ b/Components/Driver/DriverDetailPanel.tsx @@ -1,10 +1,10 @@ "use client"; - import { useCallback, useEffect, useState } from "react"; import { Spinner } from "../UI"; import { driverService } from "../../services/driver.service"; import { getStoredToken } from "../../lib/auth"; +import { DriverReportPanel } from "../Driver_Report/driverReport"; import type { Driver } from "../../types/driver"; import { DRIVER_STATUS_MAP, @@ -14,7 +14,6 @@ import { // ── 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", { @@ -24,19 +23,12 @@ function fmtDate(iso?: string | null): string { }); } -/** 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({ @@ -60,13 +52,7 @@ function DetailRow({ borderBottom: "1px solid var(--color-border)", }} > - + {label} (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); - } - }; +function PhotoCard({ + url, + label, +}: { + url?: string | null; + label: string; +}) { + const [imgError, setImgError] = useState(false); return ( -
-

+ + {label} + +

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

- -
- {/* 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)", - }} + {url && !imgError ? ( + // eslint-disable-next-line @next/next/no-img-element + {label} setImgError(true)} /> -
- - {/* Generate button */} - -
- - {/* Error */} - {error && ( -
- ⚠ {error} -
- )} - - {/* Success link */} - {reportUrl && ( -
- ✓ تم إنشاء التقرير بنجاح - - فتح التقرير ↗ - -
+ + + + + )} +
+ {url && !imgError && ( + + عرض الصورة ↗ + )}
); @@ -288,6 +166,7 @@ function ReportPanel({ driverId }: { driverId: string }) { interface DriverDetailPanelProps { driverId: string; onClose: () => void; + onEdit: (driver: Driver) => void; onDelete: (driver: Driver) => void; } @@ -296,12 +175,13 @@ interface DriverDetailPanelProps { export function DriverDetailPanel({ driverId, onClose, + onEdit, onDelete, }: DriverDetailPanelProps) { const [driver, setDriver] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); - const [imgError, setImgError] = useState(false); + const [avatarError, setAvatarError] = useState(false); // Fetch driver data const loadDriver = useCallback(async () => { @@ -312,9 +192,7 @@ export function DriverDetailPanel({ const res = await driverService.getById(driverId, token); setDriver((res as unknown as { data: Driver }).data); } catch (err: unknown) { - setError( - err instanceof Error ? err.message : "تعذّر تحميل بيانات السائق.", - ); + setError(err instanceof Error ? err.message : "تعذّر تحميل بيانات السائق."); } finally { setLoading(false); } @@ -326,14 +204,11 @@ export function DriverDetailPanel({ // Close on Escape key useEffect(() => { - const h = (e: KeyboardEvent) => { - if (e.key === "Escape") onClose(); - }; + 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 ( @@ -350,7 +225,7 @@ export function DriverDetailPanel({ }} /> - {/* Slide-in panel — from the left, mirroring CarDetailPanel */} + {/* Slide-in panel */}