585 lines
20 KiB
TypeScript
585 lines
20 KiB
TypeScript
"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,
|
||
DRIVER_CARD_TYPE_MAP,
|
||
NATIONAL_ID_TYPE_MAP,
|
||
} from "../../types/driver";
|
||
|
||
// ── Helpers ───────────────────────────────────────────────────────────────────
|
||
|
||
function fmtDate(iso?: string | null): string {
|
||
if (!iso) return "—";
|
||
return new Date(iso).toLocaleDateString("ar-SA", {
|
||
year: "numeric",
|
||
month: "long",
|
||
day: "numeric",
|
||
});
|
||
}
|
||
|
||
function isExpiringSoon(iso?: string | null): boolean {
|
||
if (!iso) return false;
|
||
const diff = new Date(iso).getTime() - Date.now();
|
||
return diff <= 90 * 86_400_000;
|
||
}
|
||
|
||
// ── Sub-components ────────────────────────────────────────────────────────────
|
||
|
||
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.55rem 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,
|
||
maxWidth: "60%",
|
||
textAlign: "left",
|
||
wordBreak: "break-word",
|
||
}}
|
||
>
|
||
{warn && value !== "—" ? "⚠ " : ""}
|
||
{value}
|
||
</span>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function SectionHeading({ title }: { title: string }) {
|
||
return (
|
||
<p
|
||
style={{
|
||
fontSize: 11,
|
||
letterSpacing: "0.25em",
|
||
textTransform: "uppercase",
|
||
color: "var(--color-text-hint)",
|
||
fontWeight: 700,
|
||
margin: "1.25rem 0 0.5rem",
|
||
}}
|
||
>
|
||
{title}
|
||
</p>
|
||
);
|
||
}
|
||
|
||
// ── Photos section ────────────────────────────────────────────────────────────
|
||
|
||
function PhotoCard({
|
||
url,
|
||
label,
|
||
}: {
|
||
url?: string | null;
|
||
label: string;
|
||
}) {
|
||
const [imgError, setImgError] = useState(false);
|
||
|
||
return (
|
||
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||
<span style={{ fontSize: 11, fontWeight: 600, color: "var(--color-text-muted)" }}>
|
||
{label}
|
||
</span>
|
||
<div
|
||
style={{
|
||
width: "100%",
|
||
aspectRatio: "4/3",
|
||
borderRadius: "var(--radius-md)",
|
||
border: "1px solid var(--color-border)",
|
||
background: "var(--color-surface-muted)",
|
||
overflow: "hidden",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
}}
|
||
>
|
||
{url && !imgError ? (
|
||
// eslint-disable-next-line @next/next/no-img-element
|
||
<img
|
||
src={url}
|
||
alt={label}
|
||
style={{ width: "100%", height: "100%", objectFit: "cover" }}
|
||
onError={() => setImgError(true)}
|
||
/>
|
||
) : (
|
||
<svg
|
||
width="28"
|
||
height="28"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="var(--color-text-hint)"
|
||
strokeWidth="1.5"
|
||
>
|
||
<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>
|
||
)}
|
||
</div>
|
||
{url && !imgError && (
|
||
<a
|
||
href={url}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
style={{
|
||
fontSize: 11,
|
||
color: "#2563EB",
|
||
textDecoration: "underline",
|
||
textAlign: "center",
|
||
}}
|
||
>
|
||
عرض الصورة ↗
|
||
</a>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── Props ─────────────────────────────────────────────────────────────────────
|
||
|
||
interface DriverDetailPanelProps {
|
||
driverId: string;
|
||
onClose: () => void;
|
||
onEdit: (driver: Driver) => void;
|
||
onDelete: (driver: Driver) => void;
|
||
}
|
||
|
||
// ── Component ─────────────────────────────────────────────────────────────────
|
||
|
||
export function DriverDetailPanel({
|
||
driverId,
|
||
onClose,
|
||
onEdit,
|
||
onDelete,
|
||
}: DriverDetailPanelProps) {
|
||
const [driver, setDriver] = useState<Driver | null>(null);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [avatarError, setAvatarError] = 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 statusConfig = driver ? DRIVER_STATUS_MAP[driver.status] : null;
|
||
|
||
return (
|
||
<>
|
||
{/* Backdrop */}
|
||
<div
|
||
onClick={onClose}
|
||
style={{
|
||
position: "fixed",
|
||
inset: 0,
|
||
zIndex: 40,
|
||
background: "rgba(15,23,42,0.45)",
|
||
backdropFilter: "blur(2px)",
|
||
}}
|
||
/>
|
||
|
||
{/* Slide-in panel */}
|
||
<aside
|
||
aria-label="تفاصيل السائق"
|
||
style={{
|
||
position: "fixed",
|
||
top: 0,
|
||
left: 0,
|
||
bottom: 0,
|
||
zIndex: 50,
|
||
width: "min(520px, 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", gap: 12 }}>
|
||
{/* Avatar + name */}
|
||
<div style={{ display: "flex", alignItems: "center", gap: 12 }}>
|
||
<div
|
||
style={{
|
||
width: 56,
|
||
height: 56,
|
||
borderRadius: "50%",
|
||
overflow: "hidden",
|
||
flexShrink: 0,
|
||
border: "2px solid var(--color-brand-200)",
|
||
background: "var(--color-surface-muted)",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
}}
|
||
>
|
||
{driver?.photoUrl && !avatarError ? (
|
||
// eslint-disable-next-line @next/next/no-img-element
|
||
<img
|
||
src={driver.photoUrl}
|
||
alt={driver.name}
|
||
style={{ width: "100%", height: "100%", objectFit: "cover" }}
|
||
onError={() => setAvatarError(true)}
|
||
/>
|
||
) : (
|
||
<span style={{ fontSize: 20, fontWeight: 700, color: "var(--color-brand-600)" }}>
|
||
{driver?.name?.charAt(0) ?? "?"}
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<div>
|
||
<p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600, margin: 0 }}>
|
||
ملف السائق
|
||
</p>
|
||
{driver && (
|
||
<h2 style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "3px 0 0" }}>
|
||
{driver.name}
|
||
</h2>
|
||
)}
|
||
{driver?.userName && (
|
||
<p style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--color-text-muted)", margin: "2px 0 0" }}>
|
||
@{driver.userName}
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Close button */}
|
||
<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>
|
||
|
||
{/* ── Scrollable content ── */}
|
||
<div style={{ flex: 1, overflowY: "auto", padding: "1.25rem 1.5rem" }}>
|
||
{/* Loading */}
|
||
{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 */}
|
||
{error && (
|
||
<div
|
||
style={{
|
||
borderRadius: "var(--radius-md)",
|
||
background: "#FEF2F2",
|
||
border: "1px solid #FECACA",
|
||
padding: "0.75rem 1rem",
|
||
fontSize: 13,
|
||
color: "#DC2626",
|
||
}}
|
||
>
|
||
⚠ {error}
|
||
</div>
|
||
)}
|
||
|
||
{driver && !loading && (
|
||
<>
|
||
{/* Status badges */}
|
||
<div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: "1rem" }}>
|
||
{statusConfig && (
|
||
<span
|
||
style={{
|
||
borderRadius: "var(--radius-full)",
|
||
border: `1px solid ${statusConfig.border}`,
|
||
background: statusConfig.bg,
|
||
padding: "0.3rem 0.875rem",
|
||
fontSize: 12,
|
||
fontWeight: 700,
|
||
color: statusConfig.color,
|
||
display: "inline-flex",
|
||
alignItems: "center",
|
||
gap: 6,
|
||
}}
|
||
>
|
||
<span style={{ width: 7, height: 7, borderRadius: "50%", background: statusConfig.dot }} />
|
||
{statusConfig.label}
|
||
</span>
|
||
)}
|
||
{!driver.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: Personal Info ── */}
|
||
<SectionHeading title="البيانات الشخصية" />
|
||
<DetailRow label="الاسم الكامل" value={driver.name} />
|
||
<DetailRow label="رقم الجوال" value={driver.phone} mono />
|
||
<DetailRow label="البريد الإلكتروني" value={driver.email ?? "—"} />
|
||
<DetailRow label="العنوان" value={driver.address ?? "—"} />
|
||
<DetailRow label="الجنسية" value={driver.nationality ?? "—"} />
|
||
<DetailRow label="الفرع" value={driver.branch?.name ?? "—"} />
|
||
|
||
{/* ── Section: ID & GOSI ── */}
|
||
<SectionHeading title="الهوية والتأمينات" />
|
||
<DetailRow
|
||
label="نوع الهوية"
|
||
value={driver.nationalIdType ? NATIONAL_ID_TYPE_MAP[driver.nationalIdType] : "—"}
|
||
/>
|
||
<DetailRow label="رقم الهوية" value={driver.nationalId ?? "—"} mono />
|
||
<DetailRow
|
||
label="انتهاء الهوية"
|
||
value={fmtDate(driver.nationalIdExpiry)}
|
||
warn={isExpiringSoon(driver.nationalIdExpiry)}
|
||
/>
|
||
<DetailRow label="رقم GOSI" value={driver.gosiNumber ?? "—"} mono />
|
||
|
||
{/* ── Section: License ── */}
|
||
<SectionHeading title="بيانات رخصة القيادة" />
|
||
<DetailRow label="رقم الرخصة" value={driver.licenseNumber ?? "—"} mono />
|
||
<DetailRow label="نوع الرخصة" value={driver.licenseType ?? "—"} />
|
||
<DetailRow
|
||
label="انتهاء الرخصة"
|
||
value={fmtDate(driver.licenseExpiry)}
|
||
warn={isExpiringSoon(driver.licenseExpiry)}
|
||
/>
|
||
|
||
{/* ── Section: Driver Card ── */}
|
||
<SectionHeading title="بطاقة السائق" />
|
||
<DetailRow label="رقم البطاقة" value={driver.driverCardNumber ?? "—"} mono />
|
||
<DetailRow
|
||
label="نوع البطاقة"
|
||
value={driver.driverCardType ? DRIVER_CARD_TYPE_MAP[driver.driverCardType] : "—"}
|
||
/>
|
||
<DetailRow
|
||
label="انتهاء البطاقة"
|
||
value={fmtDate(driver.driverCardExpiry)}
|
||
warn={isExpiringSoon(driver.driverCardExpiry)}
|
||
/>
|
||
<DetailRow label="نوع السائق" value={driver.driverType ?? "—"} />
|
||
|
||
{/* ── Section: System Info ── */}
|
||
<SectionHeading title="معلومات النظام" />
|
||
<DetailRow label="اسم المستخدم" value={driver.userName ?? "—"} mono />
|
||
<DetailRow label="تاريخ الإضافة" value={fmtDate(driver.createdAt)} />
|
||
<DetailRow label="آخر تحديث" value={fmtDate(driver.updatedAt)} />
|
||
|
||
{/* ── Section: Photos ── */}
|
||
<SectionHeading title="الصور والمستندات" />
|
||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem", marginTop: "0.5rem" }}>
|
||
<PhotoCard url={driver.photoUrl} label="صورة السائق" />
|
||
<PhotoCard url={driver.nationalPhotoUrl} label="صورة الهوية" />
|
||
<PhotoCard url={driver.driverCardPhotoUrl} label="صورة البطاقة" />
|
||
</div>
|
||
|
||
{/* ── Status History ── */}
|
||
{driver.statusHistory && driver.statusHistory.length > 0 && (
|
||
<>
|
||
<SectionHeading title="سجل الحالات" />
|
||
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||
{driver.statusHistory.slice(0, 5).map((h) => {
|
||
const s = DRIVER_STATUS_MAP[h.status] ?? DRIVER_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",
|
||
}}
|
||
>
|
||
<div>
|
||
<span style={{ fontSize: 12, fontWeight: 600, color: s.color }}>
|
||
{s.label}
|
||
</span>
|
||
{h.reason && (
|
||
<span style={{ fontSize: 11, color: "var(--color-text-muted)", marginRight: 8 }}>
|
||
— {h.reason}
|
||
</span>
|
||
)}
|
||
</div>
|
||
<span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
|
||
{fmtDate(h.createdAt)}
|
||
</span>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* ── Report Panel ── */}
|
||
<DriverReportPanel driverId={driver.id} />
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{/* ── Footer actions ── */}
|
||
{driver && (
|
||
<div
|
||
style={{
|
||
padding: "1rem 1.5rem",
|
||
borderTop: "1px solid var(--color-border)",
|
||
background: "var(--color-surface-muted)",
|
||
display: "flex",
|
||
gap: "0.75rem",
|
||
flexShrink: 0,
|
||
}}
|
||
>
|
||
{/* Delete */}
|
||
<button
|
||
type="button"
|
||
onClick={() => onDelete(driver)}
|
||
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>
|
||
|
||
{/* Edit */}
|
||
<button
|
||
type="button"
|
||
onClick={() => onEdit(driver)}
|
||
style={{
|
||
height: 40,
|
||
padding: "0 1rem",
|
||
borderRadius: "var(--radius-md)",
|
||
border: "1px solid var(--color-brand-200)",
|
||
background: "var(--color-brand-50, #EFF6FF)",
|
||
fontSize: 13,
|
||
fontWeight: 700,
|
||
color: "var(--color-brand-600)",
|
||
cursor: "pointer",
|
||
fontFamily: "var(--font-sans)",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 6,
|
||
}}
|
||
>
|
||
<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>
|
||
|
||
{/* Close */}
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
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",
|
||
fontFamily: "var(--font-sans)",
|
||
}}
|
||
>
|
||
إغلاق
|
||
</button>
|
||
</div>
|
||
)}
|
||
</aside>
|
||
</>
|
||
);
|
||
} |