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

create driver page and client page also create oll driver , client layer

Browse Source
This commit is contained in:
m7amedez5511
2026-06-14 16:25:56 +03:00
parent 68bfce4345
commit bcc4baf28a
35 changed files with 5551 additions and 816 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
Components/Driver/DriverDeleteModal.tsx Normal file
View File

@@ -0,0 +1,100 @@
"use client";
import { useEffect } from "react";
import { Spinner } from "../UI";
import type { Driver } from "../../types/driver";
interface DriverDeleteModalProps {
driver: Driver;
deleting: boolean;
onCancel: () => void;
onConfirm: () => void;
}
export function DriverDeleteModal({ driver, deleting, onCancel, onConfirm }: DriverDeleteModalProps) {
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="driver-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="driver-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)" }}>{driver.name}</strong>
{" "}(
<span style={{ fontFamily: "var(--font-mono)", fontSize: 12 }}>
{driver.phone}
</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>
);
}

770
Components/Driver/DriverDetailPanel.tsx Normal file
View File

@@ -0,0 +1,770 @@
"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 (
<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>
);
}
// ── 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<string | null>(null);
const [reportUrl, setReportUrl] = useState<string | null>(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 (
<div
style={{
marginTop: "1.5rem",
borderRadius: "var(--radius-lg)",
border: "1px solid var(--color-border)",
background: "var(--color-surface-muted)",
padding: "1rem",
}}
>
<p
style={{
fontSize: 11,
letterSpacing: "0.25em",
textTransform: "uppercase",
color: "#2563EB",
fontWeight: 700,
margin: "0 0 0.75rem",
}}
>
إنشاء تقرير يومي
</p>
<div style={{ display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap" }}>
{/* Date input */}
<div style={{ flex: 1, minWidth: 140 }}>
<label
htmlFor="report-date"
style={{
display: "block",
fontSize: 11,
fontWeight: 600,
color: "var(--color-text-muted)",
marginBottom: 4,
}}
>
تاريخ التقرير
</label>
<input
id="report-date"
type="date"
value={date}
max={today}
onChange={(e) => {
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)",
}}
/>
</div>
{/* Generate button */}
<button
type="button"
onClick={handleGenerate}
disabled={loading || !date}
style={{
alignSelf: "flex-end",
height: 38,
padding: "0 1rem",
borderRadius: "var(--radius-md)",
border: "none",
background:
loading || !date
? "var(--color-brand-400)"
: "var(--color-brand-600)",
fontSize: 13,
fontWeight: 700,
color: "#FFF",
cursor: loading || !date ? "not-allowed" : "pointer",
display: "flex",
alignItems: "center",
gap: 8,
fontFamily: "var(--font-sans)",
whiteSpace: "nowrap",
}}
>
{loading && <Spinner size="sm" className="text-white" />}
{loading ? "جارٍ الإنشاء…" : "إنشاء التقرير"}
</button>
</div>
{/* Error */}
{error && (
<div
style={{
marginTop: "0.75rem",
borderRadius: "var(--radius-md)",
background: "#FEF2F2",
border: "1px solid #FECACA",
padding: "0.625rem 0.875rem",
fontSize: 12,
color: "#DC2626",
fontWeight: 500,
}}
>
⚠ {error}
</div>
)}
{/* Success link */}
{reportUrl && (
<div
style={{
marginTop: "0.75rem",
borderRadius: "var(--radius-md)",
background: "#DCFCE7",
border: "1px solid #BBF7D0",
padding: "0.625rem 0.875rem",
fontSize: 12,
color: "#166534",
fontWeight: 600,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: 8,
}}
>
<span>✓ تم إنشاء التقرير بنجاح</span>
<a
href={reportUrl}
target="_blank"
rel="noopener noreferrer"
style={{
color: "#166534",
textDecoration: "underline",
fontWeight: 700,
whiteSpace: "nowrap",
}}
>
فتح التقرير ↗
</a>
</div>
)}
</div>
);
}
// ── Props ─────────────────────────────────────────────────────────────────────
interface DriverDetailPanelProps {
driverId: string;
onClose: () => void;
onDelete: (driver: Driver) => void;
}
// ── Component ─────────────────────────────────────────────────────────────────
export function DriverDetailPanel({
driverId,
onClose,
onDelete,
}: DriverDetailPanelProps) {
const [driver, setDriver] = useState<Driver | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(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 */}
<div
onClick={onClose}
style={{
position: "fixed",
inset: 0,
zIndex: 40,
background: "rgba(15,23,42,0.45)",
backdropFilter: "blur(2px)",
}}
/>
{/* Slide-in panel — from the left, mirroring CarDetailPanel */}
<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,
}}
>
{/* Photo + name */}
<div style={{ display: "flex", alignItems: "center", gap: 12 }}>
{/* Avatar */}
<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",
}}
>
{photoUrl && !imgError ? (
// eslint-disable-next-line @next/next/no-img-element
<img
src={photoUrl}
alt={driver?.name ?? "صورة السائق"}
style={{ width: "100%", height: "100%", objectFit: "cover" }}
onError={() => setImgError(true)}
/>
) : (
/* Fallback: initials avatar */
<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)} />
{/* ── 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 ── */}
<ReportPanel 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>
{/* 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>
</>
);
}

603
Components/Driver/DriverFormModal.tsx Normal file
View File

@@ -0,0 +1,603 @@
"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 {
Driver,
DriverFormErrors,
CreateDriverPayload,
UpdateDriverPayload,
NationalIdType,
DriverCardType,
DriverStatus,
} from "../../types/driver";
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,
};
const sectionHeadingStyle: React.CSSProperties = {
fontSize: 11,
letterSpacing: "0.25em",
textTransform: "uppercase",
color: "var(--color-text-hint)",
fontWeight: 700,
margin: "0.5rem 0 0",
};
// ── Date helper ──────────────────────────────────────────────────────────────
function toIsoDateTime(val: string): string {
if (!val) return val;
if (val.includes("T")) return val;
return `${val}T00:00:00.000Z`;
}
// ── Validation ───────────────────────────────────────────────────────────────
function validate(form: Partial<CreateDriverPayload>): DriverFormErrors {
const e: DriverFormErrors = {};
if (!form.name?.trim()) e.name = "الاسم مطلوب";
if (!form.phone?.trim()) e.phone = "رقم الجوال مطلوب";
if (form.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email))
e.email = "البريد الإلكتروني غير صالح";
return e;
}
// ── Props ────────────────────────────────────────────────────────────────────
interface DriverFormModalProps {
editDriver: Driver | null;
branches: Branch[];
onClose: () => void;
onSubmit: (
payload: CreateDriverPayload | UpdateDriverPayload,
isNew: boolean,
) => Promise<boolean>;
}
// ── Component ────────────────────────────────────────────────────────────────
export function DriverFormModal({
editDriver,
branches: branchesProp,
onClose,
onSubmit,
}: DriverFormModalProps) {
const isNew = editDriver === 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 */ });
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// ── Form state ────────────────────────────────────────────────────────────
const [name, setName] = useState(editDriver?.name ?? "");
const [phone, setPhone] = useState(editDriver?.phone ?? "");
const [email, setEmail] = useState(editDriver?.email ?? "");
const [address, setAddress] = useState(editDriver?.address ?? "");
const [nationality, setNationality] = useState(editDriver?.nationality ?? "");
const [nationalIdType, setNationalIdType] = useState<NationalIdType | "">(
editDriver?.nationalIdType ?? "",
);
const [nationalId, setNationalId] = useState(
// nationalId is not in CreateDriverPayload — read-only from Driver
(editDriver as Driver & { nationalId?: string })?.nationalId ?? "",
);
const [nationalIdExpiry, setNationalIdExpiry] = useState(
(editDriver as Driver & { nationalIdExpiry?: string })?.nationalIdExpiry?.slice(0, 10) ?? "",
);
const [gosiNumber, setGosiNumber] = useState(editDriver?.gosiNumber ?? "");
const [licenseNumber, setLicenseNumber] = useState(editDriver?.licenseNumber ?? "");
const [licenseType, setLicenseType] = useState(editDriver?.licenseType ?? "");
const [licenseExpiry, setLicenseExpiry] = useState(
editDriver?.licenseExpiry?.slice(0, 10) ?? "",
);
const [driverCardNumber, setDriverCardNumber] = useState(editDriver?.driverCardNumber ?? "");
const [driverCardType, setDriverCardType] = useState<DriverCardType | "">(
editDriver?.driverCardType ?? "",
);
const [driverCardExpiry, setDriverCardExpiry] = useState(
editDriver?.driverCardExpiry?.slice(0, 10) ?? "",
);
const [driverType, setDriverType] = useState(editDriver?.driverType ?? "");
const [branchId, setBranchId] = useState(
(editDriver as Driver & { branchId?: string })?.branchId ?? "",
);
const [status, setStatus] = useState<DriverStatus>(editDriver?.status ?? "Active");
// Photo state (new uploads only)
const [photo, setPhoto] = useState<File | null>(null);
const [nationalPhoto, setNationalPhoto] = useState<File | null>(null);
const [driverCardPhoto, setDriverCardPhoto] = useState<File | null>(null);
const [errors, setErrors] = useState<DriverFormErrors>({});
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]);
// ── Input error style ──────────────────────────────────────────────────────
const inputStyle = (field: keyof DriverFormErrors): React.CSSProperties => ({
...inputBase,
...(errors[field] ? { borderColor: "var(--color-danger)", background: "#FEF2F2" } : {}),
});
const clearFieldError = (field: keyof DriverFormErrors) =>
setErrors((p) => ({ ...p, [field]: undefined }));
// ── Submit ─────────────────────────────────────────────────────────────────
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
const errs = validate({ name, phone, email: email || undefined });
if (Object.keys(errs).length) { setErrors(errs); return; }
const raw: Record<string, unknown> = { name, phone };
if (email) raw.email = email;
if (address) raw.address = address;
if (nationality) raw.nationality = nationality;
if (nationalIdType) raw.nationalIdType = nationalIdType;
if (gosiNumber) raw.gosiNumber = gosiNumber;
if (licenseNumber) raw.licenseNumber = licenseNumber;
if (licenseType) raw.licenseType = licenseType;
if (licenseExpiry) raw.licenseExpiry = toIsoDateTime(licenseExpiry);
if (driverCardNumber) raw.driverCardNumber = driverCardNumber;
if (driverCardType) raw.driverCardType = driverCardType;
if (driverCardExpiry) raw.driverCardExpiry = toIsoDateTime(driverCardExpiry);
if (driverType) raw.driverType = driverType;
if (branchId) raw.branchId = branchId;
if (!isNew) raw.status = status;
if (photo) raw.photo = photo;
if (nationalPhoto) raw.nationalPhoto = nationalPhoto;
if (driverCardPhoto) raw.driverCardPhoto = driverCardPhoto;
const payload = raw as unknown as CreateDriverPayload;
setSaving(true);
setApiError("");
const ok = await onSubmit(payload, isNew);
setSaving(false);
if (ok) onClose();
else setApiError("حدث خطأ غير متوقع. يرجى المحاولة لاحقاً.");
};
// ── File input helper ──────────────────────────────────────────────────────
function FileInput({
label: lbl,
current,
onChange,
}: {
label: string;
current: File | null;
onChange: (f: File | null) => void;
}) {
return (
<label style={labelStyle}>
{lbl}
<input
type="file"
accept="image/*"
onChange={(e) => onChange(e.target.files?.[0] ?? null)}
style={{
...inputBase,
padding: "0.35rem 0.75rem",
height: "auto",
cursor: "pointer",
}}
/>
{current && (
<span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
{current.name}
</span>
)}
</label>
);
}
// ── Render ─────────────────────────────────────────────────────────────────
return (
<div
role="dialog"
aria-modal="true"
aria-labelledby="driver-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: 640,
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="driver-modal-title" style={{ fontSize: 17, fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
{isNew ? "سائق جديد" : editDriver?.name}
</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: Personal Info ── */}
<p style={sectionHeadingStyle}>البيانات الشخصية</p>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
<label style={labelStyle}>
الاسم الكامل *
<input
ref={firstRef}
style={inputStyle("name")}
value={name}
onChange={(e) => { setName(e.target.value); clearFieldError("name"); }}
placeholder="محمد عبدالله"
dir="rtl"
autoComplete="off"
/>
{errors.name && <span style={errorTextStyle}>{errors.name}</span>}
</label>
<label style={labelStyle}>
رقم الجوال *
<input
style={inputStyle("phone")}
value={phone}
onChange={(e) => { setPhone(e.target.value); clearFieldError("phone"); }}
placeholder="05XXXXXXXX"
dir="ltr"
/>
{errors.phone && <span style={errorTextStyle}>{errors.phone}</span>}
</label>
<label style={labelStyle}>
البريد الإلكتروني
<input
style={inputStyle("email")}
type="email"
value={email}
onChange={(e) => { setEmail(e.target.value); clearFieldError("email"); }}
placeholder="example@mail.com"
dir="ltr"
/>
{errors.email && <span style={errorTextStyle}>{errors.email}</span>}
</label>
<label style={labelStyle}>
الجنسية
<input
style={inputBase}
value={nationality}
onChange={(e) => setNationality(e.target.value)}
placeholder="سعودي"
dir="rtl"
/>
</label>
<label style={{ ...labelStyle, gridColumn: "1 / -1" }}>
العنوان
<input
style={inputBase}
value={address}
onChange={(e) => setAddress(e.target.value)}
placeholder="الرياض، حي..."
dir="rtl"
/>
</label>
</div>
{/* ── Section: ID & GOSI ── */}
<p style={sectionHeadingStyle}>الهوية والتأمينات</p>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
<label style={labelStyle}>
نوع الهوية
<select
style={{ ...inputBase, cursor: "pointer" }}
value={nationalIdType}
onChange={(e) => setNationalIdType(e.target.value as NationalIdType | "")}
dir="rtl"
>
<option value="">اختر النوع</option>
<option value="NationalID">هوية وطنية</option>
<option value="Iqama">إقامة</option>
<option value="Passport">جواز سفر</option>
</select>
</label>
<label style={labelStyle}>
رقم الهوية
<input
style={inputBase}
value={nationalId}
onChange={(e) => setNationalId(e.target.value)}
placeholder="1XXXXXXXXX"
dir="ltr"
/>
</label>
<label style={labelStyle}>
انتهاء الهوية
<input
style={inputBase}
type="date"
value={nationalIdExpiry}
onChange={(e) => setNationalIdExpiry(e.target.value)}
/>
</label>
<label style={labelStyle}>
رقم GOSI
<input
style={inputBase}
value={gosiNumber}
onChange={(e) => setGosiNumber(e.target.value)}
placeholder="GOSI-XXXX"
dir="ltr"
/>
</label>
</div>
{/* ── Section: License ── */}
<p style={sectionHeadingStyle}>رخصة القيادة</p>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
<label style={labelStyle}>
رقم الرخصة
<input
style={inputStyle("licenseNumber")}
value={licenseNumber}
onChange={(e) => { setLicenseNumber(e.target.value); clearFieldError("licenseNumber"); }}
placeholder="LIC-XXXX"
dir="ltr"
/>
{errors.licenseNumber && <span style={errorTextStyle}>{errors.licenseNumber}</span>}
</label>
<label style={labelStyle}>
نوع الرخصة
<input
style={inputBase}
value={licenseType}
onChange={(e) => setLicenseType(e.target.value)}
placeholder="خاص / عام"
dir="rtl"
/>
</label>
<label style={labelStyle}>
انتهاء الرخصة
<input
style={inputBase}
type="date"
value={licenseExpiry}
onChange={(e) => setLicenseExpiry(e.target.value)}
/>
</label>
</div>
{/* ── Section: Driver Card ── */}
<p style={sectionHeadingStyle}>بطاقة السائق</p>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
<label style={labelStyle}>
رقم البطاقة
<input
style={inputBase}
value={driverCardNumber}
onChange={(e) => setDriverCardNumber(e.target.value)}
placeholder="CARD-XXXX"
dir="ltr"
/>
</label>
<label style={labelStyle}>
نوع البطاقة
<select
style={{ ...inputBase, cursor: "pointer" }}
value={driverCardType}
onChange={(e) => setDriverCardType(e.target.value as DriverCardType | "")}
dir="rtl"
>
<option value="">اختر النوع</option>
<option value="Temporary">مؤقتة</option>
<option value="Seasonal">موسمية</option>
<option value="Annual">سنوية</option>
<option value="Restricted">مقيدة</option>
</select>
</label>
<label style={labelStyle}>
انتهاء البطاقة
<input
style={inputBase}
type="date"
value={driverCardExpiry}
onChange={(e) => setDriverCardExpiry(e.target.value)}
/>
</label>
</div>
{/* ── Section: Operational ── */}
<p style={sectionHeadingStyle}>بيانات تشغيلية</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}>
نوع السائق
<input
style={inputBase}
value={driverType}
onChange={(e) => setDriverType(e.target.value)}
placeholder="رئيسي / احتياطي"
dir="rtl"
/>
</label>
{!isNew && (
<label style={labelStyle}>
الحالة
<select
style={{ ...inputBase, cursor: "pointer" }}
value={status}
onChange={(e) => setStatus(e.target.value as DriverStatus)}
dir="rtl"
>
<option value="Active">نشط</option>
<option value="InTrip">في رحلة</option>
<option value="Inactive">غير نشط</option>
<option value="Suspended">موقوف</option>
</select>
</label>
)}
</div>
{/* ── Section: Photos ── */}
<p style={sectionHeadingStyle}>الصور والمستندات</p>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
<FileInput label="صورة السائق" current={photo} onChange={setPhoto} />
<FileInput label="صورة الهوية" current={nationalPhoto} onChange={setNationalPhoto} />
<FileInput label="صورة البطاقة" current={driverCardPhoto} onChange={setDriverCardPhoto} />
</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>
);
}

0
Components/Driver/driver.tsx
View File