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

finsh user,car,driver pages also add validator layer to app build trip page

Browse Source
This commit is contained in:
m7amedez5511
2026-06-18 16:51:31 +03:00
parent a23d21f222
commit c1b77f89cd
45 changed files with 4128 additions and 1690 deletions
Download Patch File Download Diff File Expand all files Collapse all files

413
Components/Driver/DriverDetailPanel.tsx
View File

@@ -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)",
}}
>
<span
style={{
fontSize: 12,
color: "var(--color-text-muted)",
fontWeight: 600,
}}
>
<span style={{ fontSize: 12, color: "var(--color-text-muted)", fontWeight: 600 }}>
{label}
</span>
<span
@@ -104,180 +90,72 @@ function SectionHeading({ title }: { title: string }) {
);
}
// ── Report generator sub-panel ───────────────────────────────────────────────
// ── Photos section ────────────────────────────────────────────────────────────
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);
}
};
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={{
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",
aspectRatio: "4/3",
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)",
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)}
/>
</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",
}}
) : (
<svg
width="28"
height="28"
viewBox="0 0 24 24"
fill="none"
stroke="var(--color-text-hint)"
strokeWidth="1.5"
>
{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>
<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>
)}
{/* 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>
</div>
{url && !imgError && (
<a
href={reportUrl}
href={url}
target="_blank"
rel="noopener noreferrer"
style={{
color: "#166534",
fontSize: 11,
color: "#2563EB",
textDecoration: "underline",
fontWeight: 700,
whiteSpace: "nowrap",
textAlign: "center",
}}
>
فتح التقرير ↗
عرض الصورة ↗
</a>
</div>
)}
</div>
);
@@ -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<Driver | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(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 */}
<aside
aria-label="تفاصيل السائق"
style={{
@@ -377,17 +252,9 @@ export function DriverDetailPanel({
flexShrink: 0,
}}
>
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "flex-start",
gap: 12,
}}
>
{/* Photo + name */}
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12 }}>
{/* Avatar + name */}
<div style={{ display: "flex", alignItems: "center", gap: 12 }}>
{/* Avatar */}
<div
style={{
width: 56,
@@ -402,62 +269,32 @@ export function DriverDetailPanel({
justifyContent: "center",
}}
>
{photoUrl && !imgError ? (
{driver?.photoUrl && !avatarError ? (
// eslint-disable-next-line @next/next/no-img-element
<img
src={photoUrl}
alt={driver?.name ?? "صورة السائق"}
src={driver.photoUrl}
alt={driver.name}
style={{ width: "100%", height: "100%", objectFit: "cover" }}
onError={() => setImgError(true)}
onError={() => setAvatarError(true)}
/>
) : (
/* Fallback: initials avatar */
<span
style={{
fontSize: 20,
fontWeight: 700,
color: "var(--color-brand-600)",
}}
>
<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 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",
}}
>
<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",
}}
>
<p style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--color-text-muted)", margin: "2px 0 0" }}>
@{driver.userName}
</p>
)}
@@ -490,23 +327,12 @@ export function DriverDetailPanel({
</div>
{/* ── Scrollable content ── */}
<div
style={{ flex: 1, overflowY: "auto", padding: "1.25rem 1.5rem" }}
>
<div style={{ flex: 1, overflowY: "auto", padding: "1.25rem 1.5rem" }}>
{/* Loading */}
{loading && (
<div
style={{
display: "flex",
alignItems: "center",
gap: 12,
padding: "2rem 0",
}}
>
<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>
<span style={{ fontSize: 13, color: "var(--color-text-muted)" }}>جارٍ التحميل…</span>
</div>
)}
@@ -529,14 +355,7 @@ export function DriverDetailPanel({
{driver && !loading && (
<>
{/* Status badges */}
<div
style={{
display: "flex",
gap: 8,
flexWrap: "wrap",
marginBottom: "1rem",
}}
>
<div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: "1rem" }}>
{statusConfig && (
<span
style={{
@@ -552,14 +371,7 @@ export function DriverDetailPanel({
gap: 6,
}}
>
<span
style={{
width: 7,
height: 7,
borderRadius: "50%",
background: statusConfig.dot,
}}
/>
<span style={{ width: 7, height: 7, borderRadius: "50%", background: statusConfig.dot }} />
{statusConfig.label}
</span>
)}
@@ -593,11 +405,7 @@ export function DriverDetailPanel({
<SectionHeading title="الهوية والتأمينات" />
<DetailRow
label="نوع الهوية"
value={
driver.nationalIdType
? NATIONAL_ID_TYPE_MAP[driver.nationalIdType]
: "—"
}
value={driver.nationalIdType ? NATIONAL_ID_TYPE_MAP[driver.nationalIdType] : "—"}
/>
<DetailRow label="رقم الهوية" value={driver.nationalId ?? "—"} mono />
<DetailRow
@@ -619,28 +427,17 @@ export function DriverDetailPanel({
{/* ── Section: Driver Card ── */}
<SectionHeading title="بطاقة السائق" />
<DetailRow
label="رقم البطاقة"
value={driver.driverCardNumber ?? "—"}
mono
/>
<DetailRow label="رقم البطاقة" value={driver.driverCardNumber ?? "—"} mono />
<DetailRow
label="نوع البطاقة"
value={
driver.driverCardType
? DRIVER_CARD_TYPE_MAP[driver.driverCardType]
: "—"
}
value={driver.driverCardType ? DRIVER_CARD_TYPE_MAP[driver.driverCardType] : "—"}
/>
<DetailRow
label="انتهاء البطاقة"
value={fmtDate(driver.driverCardExpiry)}
warn={isExpiringSoon(driver.driverCardExpiry)}
/>
<DetailRow
label="نوع السائق"
value={driver.driverType ?? "—"}
/>
<DetailRow label="نوع السائق" value={driver.driverType ?? "—"} />
{/* ── Section: System Info ── */}
<SectionHeading title="معلومات النظام" />
@@ -648,14 +445,21 @@ export function DriverDetailPanel({
<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;
const s = DRIVER_STATUS_MAP[h.status] ?? DRIVER_STATUS_MAP.Active;
return (
<div
key={h.id}
@@ -670,33 +474,16 @@ export function DriverDetailPanel({
}}
>
<div>
<span
style={{
fontSize: 12,
fontWeight: 600,
color: s.color,
}}
>
<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,
}}
>
<span style={{ fontSize: 11, color: "var(--color-text-muted)", marginRight: 8 }}>
— {h.reason}
</span>
)}
</div>
<span
style={{
fontSize: 11,
color: "var(--color-text-muted)",
}}
>
<span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
{fmtDate(h.createdAt)}
</span>
</div>
@@ -707,7 +494,7 @@ export function DriverDetailPanel({
)}
{/* ── Report Panel ── */}
<ReportPanel driverId={driver.id} />
<DriverReportPanel driverId={driver.id} />
</>
)}
</div>
@@ -743,6 +530,34 @@ export function DriverDetailPanel({
>
حذف
</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"

188
Components/Driver/DriverFormModal.tsx
View File

@@ -1,22 +1,24 @@
"use client";
import { useEffect, useRef, useState } from "react";
import * as yup from "yup";
import { Alert, Spinner } from "../UI";
import { get } from "../../services/api";
import { getStoredToken } from "../../lib/auth";
import { get } from "@/services/api";
import { getStoredToken } from "@/lib/auth";
import { createDriverSchema, updateDriverSchema } from "@/validations/driver.validator";
import type { DriverSchemaErrors } from "@/validations/driver.validator";
import type {
Driver,
DriverFormErrors,
CreateDriverPayload,
UpdateDriverPayload,
NationalIdType,
DriverCardType,
DriverStatus,
} from "../../types/driver";
import type { Branch } from "../../types/branch";
} from "@/types/driver";
import type { Branch } from "@/types/branch";
// ── Shared input style ───────────────────────────────────────────────────────
const inputBase: React.CSSProperties = {
width: "100%",
height: 40,
@@ -54,24 +56,23 @@ const sectionHeadingStyle: React.CSSProperties = {
margin: "0.5rem 0 0",
};
const optionalLabelStyle: React.CSSProperties = {
fontSize: 10,
fontWeight: 500,
color: "var(--color-text-hint)",
marginRight: 4,
};
// ── 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[];
@@ -83,6 +84,7 @@ interface DriverFormModalProps {
}
// ── Component ────────────────────────────────────────────────────────────────
export function DriverFormModal({
editDriver,
branches: branchesProp,
@@ -119,7 +121,6 @@ export function DriverFormModal({
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(
@@ -149,7 +150,7 @@ export function DriverFormModal({
const [nationalPhoto, setNationalPhoto] = useState<File | null>(null);
const [driverCardPhoto, setDriverCardPhoto] = useState<File | null>(null);
const [errors, setErrors] = useState<DriverFormErrors>({});
const [errors, setErrors] = useState<DriverSchemaErrors>({});
const [saving, setSaving] = useState(false);
const [apiError, setApiError] = useState("");
const firstRef = useRef<HTMLInputElement>(null);
@@ -162,45 +163,77 @@ export function DriverFormModal({
}, [onClose]);
// ── Input error style ──────────────────────────────────────────────────────
const inputStyle = (field: keyof DriverFormErrors): React.CSSProperties => ({
const inputStyle = (field: keyof DriverSchemaErrors): React.CSSProperties => ({
...inputBase,
...(errors[field] ? { borderColor: "var(--color-danger)", background: "#FEF2F2" } : {}),
});
const clearFieldError = (field: keyof DriverFormErrors) =>
const clearFieldError = (field: keyof DriverSchemaErrors) =>
setErrors((p) => ({ ...p, [field]: undefined }));
// ── Submit ─────────────────────────────────────────────────────────────────
// ── Submit with yup validation ────────────────────────────────────────────
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
const errs = validate({ name, phone, email: email || undefined });
if (Object.keys(errs).length) { setErrors(errs); return; }
// Build the raw object to validate
const raw: Record<string, unknown> = {
name: name || undefined,
phone: phone || undefined,
email: email || undefined,
address: address || undefined,
nationality: nationality || undefined,
nationalIdType: nationalIdType || undefined,
gosiNumber: gosiNumber || undefined,
licenseNumber: licenseNumber || undefined,
licenseType: licenseType || undefined,
licenseExpiry: licenseExpiry || undefined,
driverCardNumber: driverCardNumber || undefined,
driverCardType: driverCardType || undefined,
driverCardExpiry: driverCardExpiry || undefined,
driverType: driverType || undefined,
branchId: branchId || undefined,
...(!isNew ? { status } : {}),
};
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;
try {
const schema = isNew ? createDriverSchema : updateDriverSchema;
await schema.validate(raw, { abortEarly: false });
} catch (err) {
if (err instanceof yup.ValidationError) {
const fieldErrors: DriverSchemaErrors = {};
err.inner.forEach((e) => {
if (e.path) {
fieldErrors[e.path as keyof DriverSchemaErrors] = e.message;
}
});
setErrors(fieldErrors);
return;
}
}
const payload = raw as unknown as CreateDriverPayload;
// ── Build clean payload to send to backend ────────────────────────────
const payload: Record<string, unknown> = { name, phone };
if (email) payload.email = email;
if (address) payload.address = address;
if (nationality) payload.nationality = nationality;
if (nationalIdType) payload.nationalIdType = nationalIdType;
if (gosiNumber) payload.gosiNumber = gosiNumber;
if (licenseNumber) payload.licenseNumber = licenseNumber;
if (licenseType) payload.licenseType = licenseType;
if (licenseExpiry) payload.licenseExpiry = toIsoDateTime(licenseExpiry);
if (driverCardNumber) payload.driverCardNumber = driverCardNumber;
if (driverCardType) payload.driverCardType = driverCardType;
if (driverCardExpiry) payload.driverCardExpiry = toIsoDateTime(driverCardExpiry);
if (driverType) payload.driverType = driverType;
if (branchId) payload.branchId = branchId;
if (!isNew) payload.status = status;
if (photo) payload.photo = photo;
if (nationalPhoto) payload.nationalPhoto = nationalPhoto;
if (driverCardPhoto) payload.driverCardPhoto = driverCardPhoto;
setSaving(true);
setApiError("");
const ok = await onSubmit(payload, isNew);
const ok = await onSubmit(payload as unknown as CreateDriverPayload, isNew);
setSaving(false);
if (ok) onClose();
else setApiError("حدث خطأ غير متوقع. يرجى المحاولة لاحقاً.");
@@ -309,6 +342,7 @@ export function DriverFormModal({
<p style={sectionHeadingStyle}>البيانات الشخصية</p>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
{/* Name — required */}
<label style={labelStyle}>
الاسم الكامل *
<input
@@ -323,6 +357,7 @@ export function DriverFormModal({
{errors.name && <span style={errorTextStyle}>{errors.name}</span>}
</label>
{/* Phone — required */}
<label style={labelStyle}>
رقم الجوال *
<input
@@ -335,8 +370,10 @@ export function DriverFormModal({
{errors.phone && <span style={errorTextStyle}>{errors.phone}</span>}
</label>
{/* Email — optional */}
<label style={labelStyle}>
البريد الإلكتروني
<span style={optionalLabelStyle}>(اختياري)</span>
<input
style={inputStyle("email")}
type="email"
@@ -348,26 +385,32 @@ export function DriverFormModal({
{errors.email && <span style={errorTextStyle}>{errors.email}</span>}
</label>
{/* Nationality — optional */}
<label style={labelStyle}>
الجنسية
<span style={optionalLabelStyle}>(اختياري)</span>
<input
style={inputBase}
value={nationality}
onChange={(e) => setNationality(e.target.value)}
onChange={(e) => { setNationality(e.target.value); clearFieldError("nationality"); }}
placeholder="سعودي"
dir="rtl"
/>
{errors.nationality && <span style={errorTextStyle}>{errors.nationality}</span>}
</label>
{/* Address — optional, full width */}
<label style={{ ...labelStyle, gridColumn: "1 / -1" }}>
العنوان
<span style={optionalLabelStyle}>(اختياري)</span>
<input
style={inputBase}
style={inputStyle("address")}
value={address}
onChange={(e) => setAddress(e.target.value)}
onChange={(e) => { setAddress(e.target.value); clearFieldError("address"); }}
placeholder="الرياض، حي..."
dir="rtl"
/>
{errors.address && <span style={errorTextStyle}>{errors.address}</span>}
</label>
</div>
@@ -375,12 +418,14 @@ export function DriverFormModal({
<p style={sectionHeadingStyle}>الهوية والتأمينات</p>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
{/* National ID Type — optional */}
<label style={labelStyle}>
نوع الهوية
<span style={optionalLabelStyle}>(اختياري)</span>
<select
style={{ ...inputBase, cursor: "pointer" }}
style={{ ...inputStyle("nationalIdType"), cursor: "pointer" }}
value={nationalIdType}
onChange={(e) => setNationalIdType(e.target.value as NationalIdType | "")}
onChange={(e) => { setNationalIdType(e.target.value as NationalIdType | ""); clearFieldError("nationalIdType"); }}
dir="rtl"
>
<option value="">اختر النوع</option>
@@ -388,10 +433,13 @@ export function DriverFormModal({
<option value="Iqama">إقامة</option>
<option value="Passport">جواز سفر</option>
</select>
{errors.nationalIdType && <span style={errorTextStyle}>{errors.nationalIdType}</span>}
</label>
{/* National ID number — not in backend validator, display only */}
<label style={labelStyle}>
رقم الهوية
<span style={optionalLabelStyle}>(اختياري)</span>
<input
style={inputBase}
value={nationalId}
@@ -401,8 +449,10 @@ export function DriverFormModal({
/>
</label>
{/* National ID expiry — not in backend validator, display only */}
<label style={labelStyle}>
انتهاء الهوية
<span style={optionalLabelStyle}>(اختياري)</span>
<input
style={inputBase}
type="date"
@@ -411,8 +461,10 @@ export function DriverFormModal({
/>
</label>
{/* GOSI — optional */}
<label style={labelStyle}>
رقم GOSI
<span style={optionalLabelStyle}>(اختياري)</span>
<input
style={inputBase}
value={gosiNumber}
@@ -427,8 +479,10 @@ export function DriverFormModal({
<p style={sectionHeadingStyle}>رخصة القيادة</p>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
{/* License number — optional */}
<label style={labelStyle}>
رقم الرخصة
<span style={optionalLabelStyle}>(اختياري)</span>
<input
style={inputStyle("licenseNumber")}
value={licenseNumber}
@@ -439,8 +493,10 @@ export function DriverFormModal({
{errors.licenseNumber && <span style={errorTextStyle}>{errors.licenseNumber}</span>}
</label>
{/* License type — optional */}
<label style={labelStyle}>
نوع الرخصة
<span style={optionalLabelStyle}>(اختياري)</span>
<input
style={inputBase}
value={licenseType}
@@ -450,14 +506,17 @@ export function DriverFormModal({
/>
</label>
{/* License expiry — optional, validated if provided */}
<label style={labelStyle}>
انتهاء الرخصة
<span style={optionalLabelStyle}>(اختياري)</span>
<input
style={inputBase}
style={inputStyle("licenseExpiry")}
type="date"
value={licenseExpiry}
onChange={(e) => setLicenseExpiry(e.target.value)}
onChange={(e) => { setLicenseExpiry(e.target.value); clearFieldError("licenseExpiry"); }}
/>
{errors.licenseExpiry && <span style={errorTextStyle}>{errors.licenseExpiry}</span>}
</label>
</div>
@@ -465,8 +524,10 @@ export function DriverFormModal({
<p style={sectionHeadingStyle}>بطاقة السائق</p>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
{/* Card number — optional */}
<label style={labelStyle}>
رقم البطاقة
<span style={optionalLabelStyle}>(اختياري)</span>
<input
style={inputBase}
value={driverCardNumber}
@@ -476,12 +537,14 @@ export function DriverFormModal({
/>
</label>
{/* Card type — optional */}
<label style={labelStyle}>
نوع البطاقة
<span style={optionalLabelStyle}>(اختياري)</span>
<select
style={{ ...inputBase, cursor: "pointer" }}
style={{ ...inputStyle("driverCardType"), cursor: "pointer" }}
value={driverCardType}
onChange={(e) => setDriverCardType(e.target.value as DriverCardType | "")}
onChange={(e) => { setDriverCardType(e.target.value as DriverCardType | ""); clearFieldError("driverCardType"); }}
dir="rtl"
>
<option value="">اختر النوع</option>
@@ -490,16 +553,20 @@ export function DriverFormModal({
<option value="Annual">سنوية</option>
<option value="Restricted">مقيدة</option>
</select>
{errors.driverCardType && <span style={errorTextStyle}>{errors.driverCardType}</span>}
</label>
{/* Card expiry — optional, validated if provided */}
<label style={labelStyle}>
انتهاء البطاقة
<span style={optionalLabelStyle}>(اختياري)</span>
<input
style={inputBase}
style={inputStyle("driverCardExpiry")}
type="date"
value={driverCardExpiry}
onChange={(e) => setDriverCardExpiry(e.target.value)}
onChange={(e) => { setDriverCardExpiry(e.target.value); clearFieldError("driverCardExpiry"); }}
/>
{errors.driverCardExpiry && <span style={errorTextStyle}>{errors.driverCardExpiry}</span>}
</label>
</div>
@@ -507,12 +574,14 @@ export function DriverFormModal({
<p style={sectionHeadingStyle}>بيانات تشغيلية</p>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
{/* Branch — optional */}
<label style={labelStyle}>
الفرع
<span style={optionalLabelStyle}>(اختياري)</span>
<select
style={{ ...inputBase, cursor: "pointer" }}
style={{ ...inputStyle("branchId"), cursor: "pointer" }}
value={branchId}
onChange={(e) => setBranchId(e.target.value)}
onChange={(e) => { setBranchId(e.target.value); clearFieldError("branchId"); }}
dir="rtl"
>
<option value="">اختر الفرع</option>
@@ -520,10 +589,13 @@ export function DriverFormModal({
<option key={b.id} value={b.id}>{b.name}</option>
))}
</select>
{errors.branchId && <span style={errorTextStyle}>{errors.branchId}</span>}
</label>
{/* Driver type — optional */}
<label style={labelStyle}>
نوع السائق
<span style={optionalLabelStyle}>(اختياري)</span>
<input
style={inputBase}
value={driverType}
@@ -533,6 +605,7 @@ export function DriverFormModal({
/>
</label>
{/* Status — edit only */}
{!isNew && (
<label style={labelStyle}>
الحالة
@@ -553,6 +626,9 @@ export function DriverFormModal({
{/* ── Section: Photos ── */}
<p style={sectionHeadingStyle}>الصور والمستندات</p>
<p style={{ fontSize: 11, color: "var(--color-text-hint)", margin: "0.25rem 0 0", fontWeight: 400 }}>
جميع حقول الصور اختيارية
</p>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "0.75rem" }}>
<FileInput label="صورة السائق" current={photo} onChange={setPhoto} />

163
Components/Driver_Report/driverReport.tsx
View File

@@ -0,0 +1,163 @@
"use client";
import { useState } from "react";
import { Spinner } from "../UI";
import { driverService } from "../../services/driver.service";
import { getStoredToken } from "../../lib/auth";
// ── Props ─────────────────────────────────────────────────────────────────────
interface DriverReportPanelProps {
driverId: string;
}
// ── Component ─────────────────────────────────────────────────────────────────
export function DriverReportPanel({ driverId }: DriverReportPanelProps) {
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 handleGenerate = async () => {
if (!date) return;
setLoading(true);
setError(null);
try {
const token = getStoredToken();
const res = await driverService.getDailyReport(driverId, date, token);
// The response shape: { data: { reportUrl, filename } }
const reportUrl = (
res as unknown as { data: { reportUrl: string; filename: string } }
).data?.reportUrl;
if (!reportUrl) throw new Error("لم يتم إرجاع رابط التقرير.");
// Navigate directly to the report URL
window.location.href = reportUrl;
} catch (err) {
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",
}}
>
{/* Heading */}
<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: "flex-end",
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);
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={{
height: 38,
padding: "0 1rem",
borderRadius: "var(--radius-md)",
border: "none",
fontSize: 13,
fontWeight: 700,
color: "#FFF",
background: !date || loading
? "var(--color-brand-400)"
: "var(--color-brand-600)",
cursor: !date || loading ? "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>
)}
</div>
);
}

99
Components/Trip/Tripdeletemodal.tsx Normal file
View File

@@ -0,0 +1,99 @@
"use client";
import { useEffect } from "react";
import { Spinner } from "../UI";
import type { Trip } from "../../types/trip";
interface TripDeleteModalProps {
trip: Trip;
deleting: boolean;
onCancel: () => void;
onConfirm: () => void;
}
export function TripDeleteModal({ trip, deleting, onCancel, onConfirm }: TripDeleteModalProps) {
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="trip-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="trip-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)" }}>{trip.title}</strong>
{" "}(
<span style={{ fontFamily: "var(--font-mono)", fontSize: 12 }}>
{trip.tripNumber}
</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>
);
}

497
Components/Trip/Tripformmodal.tsx Normal file
View File

@@ -0,0 +1,497 @@
"use client";
import { useEffect, useRef, useState } from "react";
import * as yup from "yup";
import { Alert, Spinner } from "../UI";
import { get } from "@/services/api";
import { getStoredToken } from "@/lib/auth";
import { createTripSchema, updateTripSchema } from "@/validations/trip.validator";
import type { TripSchemaErrors } from "@/validations/trip.validator";
import type {
Trip,
TripStatus,
CreateTripPayload,
UpdateTripPayload,
} from "@/types/trip";
// ── Shared styles ────────────────────────────────────────────────────────────
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",
};
const optionalLabelStyle: React.CSSProperties = {
fontSize: 10,
fontWeight: 500,
color: "var(--color-text-hint)",
marginRight: 4,
};
// ── Driver / Car / Branch minimal types ─────────────────────────────────────
interface DriverOption { id: string; name: string; phone: string; status: string; }
interface CarOption { id: string; manufacturer: string; model: string; plateNumber: string; status?: string; }
interface BranchOption { id: string; name: string; }
// ── Props ────────────────────────────────────────────────────────────────────
interface TripFormModalProps {
editTrip: Trip | null;
onClose: () => void;
onSubmit: (
payload: CreateTripPayload | UpdateTripPayload,
isNew: boolean,
) => Promise<boolean>;
}
// ── Component ────────────────────────────────────────────────────────────────
export function TripFormModal({ editTrip, onClose, onSubmit }: TripFormModalProps) {
const isNew = editTrip === null;
// ── Dropdown options ──────────────────────────────────────────────────────
const [drivers, setDrivers] = useState<DriverOption[]>([]);
const [cars, setCars] = useState<CarOption[]>([]);
const [branches, setBranches] = useState<BranchOption[]>([]);
useEffect(() => {
const token = getStoredToken();
// Fetch active drivers
get<{ data: { data: DriverOption[] } }>("driver?limit=100&status=Active", token)
.then(res => setDrivers((res as unknown as { data: { data: DriverOption[] } }).data?.data ?? []))
.catch(() => {});
// Fetch active cars
get<{ data: { data: CarOption[] } }>("cars?limit=100&status=Active", token)
.then(res => setCars((res as unknown as { data: { data: CarOption[] } }).data?.data ?? []))
.catch(() => {});
// Fetch branches
get<{ data: { data: BranchOption[] } }>("branches?limit=100", token)
.then(res => setBranches((res as unknown as { data: { data: BranchOption[] } }).data?.data ?? []))
.catch(() => {});
}, []);
// ── Form state ────────────────────────────────────────────────────────────
const [title, setTitle] = useState(editTrip?.title ?? "");
const [driverId, setDriverId] = useState(editTrip?.driverId ?? "");
const [carId, setCarId] = useState(editTrip?.carId ?? "");
const [branchId, setBranchId] = useState(editTrip?.branchId ?? "");
const [status, setStatus] = useState<TripStatus>(editTrip?.status ?? "Scheduled");
const [startTime, setStartTime] = useState(editTrip?.startTime?.slice(0, 16) ?? "");
const [endTime, setEndTime] = useState(editTrip?.endTime?.slice(0, 16) ?? "");
const [collectedCount, setCollectedCount] = useState<string>(
editTrip?.collectedCount != null ? String(editTrip.collectedCount) : "",
);
const [deliveredCount, setDeliveredCount] = useState<string>(
editTrip?.deliveredCount != null ? String(editTrip.deliveredCount) : "",
);
const [returnedCount, setReturnedCount] = useState<string>(
editTrip?.returnedCount != null ? String(editTrip.returnedCount) : "",
);
const [totalCashCollected, setTotalCashCollected] = useState<string>(
editTrip?.totalCashCollected != null ? String(editTrip.totalCashCollected) : "",
);
const [notes, setNotes] = useState(editTrip?.notes ?? "");
const [endReason, setEndReason] = useState(editTrip?.endReason ?? "");
const [reason, setReason] = useState(""); // update-only
const [errors, setErrors] = useState<TripSchemaErrors>({});
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]);
// ── Error style helper ────────────────────────────────────────────────────
const inputStyle = (field: keyof TripSchemaErrors): React.CSSProperties => ({
...inputBase,
...(errors[field] ? { borderColor: "var(--color-danger)", background: "#FEF2F2" } : {}),
});
const clearErr = (field: keyof TripSchemaErrors) =>
setErrors(p => ({ ...p, [field]: undefined }));
// ── Submit ────────────────────────────────────────────────────────────────
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
const raw: Record<string, unknown> = {
title: title || undefined,
driverId: driverId || undefined,
carId: carId || undefined,
branchId: branchId || undefined,
status: status || undefined,
startTime: startTime ? `${startTime}:00.000Z` : undefined,
endTime: endTime ? `${endTime}:00.000Z` : undefined,
collectedCount: collectedCount !== "" ? Number(collectedCount) : undefined,
deliveredCount: deliveredCount !== "" ? Number(deliveredCount) : undefined,
returnedCount: returnedCount !== "" ? Number(returnedCount) : undefined,
totalCashCollected: totalCashCollected !== "" ? Number(totalCashCollected) : undefined,
notes: notes || undefined,
endReason: endReason || undefined,
...(!isNew && reason ? { reason } : {}),
};
try {
const schema = isNew ? createTripSchema : updateTripSchema;
await schema.validate(raw, { abortEarly: false });
} catch (err) {
if (err instanceof yup.ValidationError) {
const map: TripSchemaErrors = {};
err.inner.forEach(e => {
if (e.path) (map as Record<string, string>)[e.path] = e.message;
});
setErrors(map);
}
return;
}
setSaving(true);
setApiError("");
try {
const ok = await onSubmit(raw as CreateTripPayload | UpdateTripPayload, isNew);
if (ok) onClose();
else setApiError("حدث خطأ أثناء الحفظ. يرجى المحاولة مرة أخرى.");
} catch (err) {
setApiError(err instanceof Error ? err.message : "حدث خطأ غير متوقع.");
} finally {
setSaving(false);
}
};
return (
<div
role="dialog" aria-modal="true" aria-labelledby="trip-form-title"
onClick={e => { if (e.target === e.currentTarget) onClose(); }}
style={{
position: "fixed", inset: 0, zIndex: 60,
background: "rgba(15,23,42,0.55)", backdropFilter: "blur(4px)",
display: "flex", alignItems: "flex-start", justifyContent: "center",
padding: "2rem 1rem", overflowY: "auto",
}}
>
<div
onClick={e => e.stopPropagation()}
style={{
width: "100%", maxWidth: 700,
background: "var(--color-surface)",
borderRadius: "var(--radius-xl)",
border: "1px solid var(--color-border)",
boxShadow: "0 24px 56px rgba(0,0,0,.2)",
overflow: "hidden",
}}
>
{/* Header */}
<div style={{
padding: "1.25rem 1.5rem",
borderBottom: "1px solid var(--color-border)",
background: "var(--color-surface-muted)",
display: "flex", alignItems: "center", justifyContent: "space-between",
}}>
<h2 id="trip-form-title" style={{ fontSize: 16, fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>
{isNew ? "إضافة رحلة جديدة" : "تعديل بيانات الرحلة"}
</h2>
<button type="button" onClick={onClose}
style={{ background: "none", border: "none", cursor: "pointer", color: "var(--color-text-muted)", padding: 4 }}>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
<line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
</svg>
</button>
</div>
{/* Form */}
<form onSubmit={handleSubmit} noValidate style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
{apiError && (
<Alert variant="error">{apiError}</Alert>
)}
{/* ── Section: أساسيات الرحلة ── */}
<p style={sectionHeadingStyle}>أساسيات الرحلة</p>
{/* Title */}
<label style={labelStyle}>
عنوان الرحلة <span style={{ color: "var(--color-danger)" }}>*</span>
<input
ref={firstRef}
style={inputStyle("title")}
value={title}
onChange={e => { setTitle(e.target.value); clearErr("title"); }}
placeholder="مثال: توزيع الرياض الشمالي"
dir="rtl"
/>
{errors.title && <span style={errorTextStyle}>{errors.title}</span>}
</label>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
{/* Driver */}
<label style={labelStyle}>
السائق <span style={{ color: "var(--color-danger)" }}>*</span>
<select
style={{ ...inputStyle("driverId"), cursor: "pointer" }}
value={driverId}
onChange={e => { setDriverId(e.target.value); clearErr("driverId"); }}
dir="rtl"
>
<option value="">اختر السائق</option>
{drivers.map(d => (
<option key={d.id} value={d.id}>{d.name} — {d.phone}</option>
))}
</select>
{errors.driverId && <span style={errorTextStyle}>{errors.driverId}</span>}
</label>
{/* Car */}
<label style={labelStyle}>
السيارة <span style={{ color: "var(--color-danger)" }}>*</span>
<select
style={{ ...inputStyle("carId"), cursor: "pointer" }}
value={carId}
onChange={e => { setCarId(e.target.value); clearErr("carId"); }}
dir="rtl"
>
<option value="">اختر السيارة</option>
{cars.map(c => (
<option key={c.id} value={c.id}>{c.manufacturer} {c.model} — {c.plateNumber}</option>
))}
</select>
{errors.carId && <span style={errorTextStyle}>{errors.carId}</span>}
</label>
</div>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
{/* Branch */}
<label style={labelStyle}>
الفرع <span style={optionalLabelStyle}>(اختياري)</span>
<select
style={{ ...inputStyle("branchId"), cursor: "pointer" }}
value={branchId}
onChange={e => { setBranchId(e.target.value); clearErr("branchId"); }}
dir="rtl"
>
<option value="">اختر الفرع</option>
{branches.map(b => (
<option key={b.id} value={b.id}>{b.name}</option>
))}
</select>
{errors.branchId && <span style={errorTextStyle}>{errors.branchId}</span>}
</label>
{/* Status */}
<label style={labelStyle}>
الحالة
<select
style={{ ...inputBase, cursor: "pointer" }}
value={status}
onChange={e => setStatus(e.target.value as TripStatus)}
dir="rtl"
>
<option value="Scheduled">مجدولة</option>
<option value="InProgress">جارية</option>
<option value="Completed">مكتملة</option>
<option value="Cancelled">ملغاة</option>
</select>
</label>
</div>
{/* ── Section: التوقيت ── */}
<p style={sectionHeadingStyle}>التوقيت</p>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
<label style={labelStyle}>
وقت البدء <span style={optionalLabelStyle}>(اختياري)</span>
<input
type="datetime-local"
style={inputStyle("startTime")}
value={startTime}
onChange={e => { setStartTime(e.target.value); clearErr("startTime"); }}
/>
{errors.startTime && <span style={errorTextStyle}>{errors.startTime}</span>}
</label>
<label style={labelStyle}>
وقت الانتهاء <span style={optionalLabelStyle}>(اختياري)</span>
<input
type="datetime-local"
style={inputStyle("endTime")}
value={endTime}
onChange={e => { setEndTime(e.target.value); clearErr("endTime"); }}
/>
{errors.endTime && <span style={errorTextStyle}>{errors.endTime}</span>}
</label>
</div>
{/* ── Section: الأعداد والمبالغ ── */}
<p style={sectionHeadingStyle}>الأعداد والمبالغ</p>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: "0.75rem" }}>
<label style={labelStyle}>
المجمّع <span style={optionalLabelStyle}>(اختياري)</span>
<input
type="number" min="0"
style={inputStyle("collectedCount")}
value={collectedCount}
onChange={e => { setCollectedCount(e.target.value); clearErr("collectedCount"); }}
placeholder="0"
dir="ltr"
/>
{errors.collectedCount && <span style={errorTextStyle}>{errors.collectedCount}</span>}
</label>
<label style={labelStyle}>
المُسلَّم <span style={optionalLabelStyle}>(اختياري)</span>
<input
type="number" min="0"
style={inputStyle("deliveredCount")}
value={deliveredCount}
onChange={e => { setDeliveredCount(e.target.value); clearErr("deliveredCount"); }}
placeholder="0"
dir="ltr"
/>
{errors.deliveredCount && <span style={errorTextStyle}>{errors.deliveredCount}</span>}
</label>
<label style={labelStyle}>
المُرتجع <span style={optionalLabelStyle}>(اختياري)</span>
<input
type="number" min="0"
style={inputStyle("returnedCount")}
value={returnedCount}
onChange={e => { setReturnedCount(e.target.value); clearErr("returnedCount"); }}
placeholder="0"
dir="ltr"
/>
{errors.returnedCount && <span style={errorTextStyle}>{errors.returnedCount}</span>}
</label>
<label style={labelStyle}>
النقد المحصّل <span style={optionalLabelStyle}>(اختياري)</span>
<input
type="number" min="0" step="0.01"
style={inputStyle("totalCashCollected")}
value={totalCashCollected}
onChange={e => { setTotalCashCollected(e.target.value); clearErr("totalCashCollected"); }}
placeholder="0.00"
dir="ltr"
/>
{errors.totalCashCollected && <span style={errorTextStyle}>{errors.totalCashCollected}</span>}
</label>
</div>
{/* ── Section: ملاحظات ── */}
<p style={sectionHeadingStyle}>ملاحظات</p>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
<label style={labelStyle}>
ملاحظات <span style={optionalLabelStyle}>(اختياري)</span>
<textarea
style={{ ...inputBase, height: 72, padding: "0.5rem 0.75rem", resize: "vertical" }}
value={notes}
onChange={e => { setNotes(e.target.value); clearErr("notes"); }}
placeholder="أي ملاحظات إضافية…"
dir="rtl"
/>
{errors.notes && <span style={errorTextStyle}>{errors.notes}</span>}
</label>
<label style={labelStyle}>
سبب الإنهاء <span style={optionalLabelStyle}>(اختياري)</span>
<textarea
style={{ ...inputBase, height: 72, padding: "0.5rem 0.75rem", resize: "vertical" }}
value={endReason}
onChange={e => { setEndReason(e.target.value); clearErr("endReason"); }}
placeholder="سبب إنهاء أو إلغاء الرحلة…"
dir="rtl"
/>
{errors.endReason && <span style={errorTextStyle}>{errors.endReason}</span>}
</label>
</div>
{/* reason — edit only (for reassigning driver/car) */}
{!isNew && (
<>
<p style={sectionHeadingStyle}>سجل التغيير</p>
<label style={labelStyle}>
سبب التعديل <span style={optionalLabelStyle}>(مطلوب عند تغيير السائق أو السيارة)</span>
<input
style={inputBase}
value={reason}
onChange={e => setReason(e.target.value)}
placeholder="مثال: تغيير السائق بسبب إجازة طارئة"
dir="rtl"
/>
</label>
</>
)}
{/* ── 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/Trip/tripe.tsx
View File

97
Components/Trip_Report/Tripreportpanel.tsx Normal file
View File

@@ -0,0 +1,97 @@
"use client";
import { useState } from "react";
import { Spinner } from "../UI";
import { tripService } from "../../services/trip.service";
import { getStoredToken } from "../../lib/auth";
interface TripReportPanelProps {
tripId: string;
}
export function TripReportPanel({ tripId }: TripReportPanelProps) {
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const handleGenerate = async () => {
setLoading(true);
setError(null);
try {
const token = getStoredToken();
const res = await tripService.getReport(tripId, token);
const reportUrl = (res as unknown as { data: { reportUrl: string } }).data?.reportUrl;
if (!reportUrl) throw new Error("لم يتم إرجاع رابط التقرير.");
window.open(reportUrl, "_blank", "noopener,noreferrer");
} catch (err) {
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>
<button
type="button"
onClick={handleGenerate}
disabled={loading}
style={{
height: 38,
padding: "0 1.25rem",
borderRadius: "var(--radius-md)",
border: "none",
fontSize: 13,
fontWeight: 700,
color: "#FFF",
background: loading ? "var(--color-brand-400)" : "var(--color-brand-600)",
cursor: loading ? "not-allowed" : "pointer",
display: "flex",
alignItems: "center",
gap: 8,
fontFamily: "var(--font-sans)",
whiteSpace: "nowrap",
}}
>
{loading && <Spinner size="sm" className="text-white" />}
{loading ? "جارٍ الإنشاء…" : "إنشاء تقرير البيان"}
</button>
{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>
)}
</div>
);
}

0
Components/Trip_Report/tripe_report.tsx
View File

65
Components/User/UserFormModal.tsx
View File

@@ -1,12 +1,14 @@
"use client";
import { useEffect, useRef, useState } from "react";
import * as yup from "yup";
import { Alert, Spinner } from "../UI";
import { createUserSchema, updateUserSchema } from "@/validations/user.validator";
import type { Branch } from "../../types/branch";
import type { Role } from "../../types/role";
import type { FormErrors, User, UserFormData } from "../../types/user";
// ── fixed styles ─────────────────────────────────────────────────
// ── fixed styles ─────────────────────────────────────────
const S = {
input: {
width: "100%", height: 40, padding: "0 0.75rem",
@@ -24,21 +26,22 @@ const S = {
errorText: { fontSize: 11, color: "var(--color-danger)", fontWeight: 500 } as React.CSSProperties,
};
// ── macksure data validation ─────────────────────────────────────────────────────
const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const PHONE_RE = /^\+?[0-9]{10,15}$/;
function validate(data: UserFormData, isNew: boolean): FormErrors {
const e: FormErrors = {};
if (!data.name.trim()) e.name = "الاسم الكامل مطلوب";
if (data.email && !EMAIL_RE.test(data.email)) e.email = "صيغة البريد الإلكتروني غير صحيحة";
if (!data.phone.trim()) e.phone = "رقم الهاتف مطلوب";
else if (!PHONE_RE.test(data.phone.replace(/\s/g, ""))) e.phone = "رقم هاتف غير صالح (10–15 رقم)";
if (isNew && !data.password) e.password = "كلمة المرور مطلوبة";
if (isNew && data.password && data.password.length < 6) e.password = "كلمة المرور 6 أحرف على الأقل";
if (!data.roleId) e.roleId = "الدور مطلوب";
if (!data.branchId) e.branchId = "الفرع مطلوب";
return e;
// ── yup validation ────────────────────────────────────────────────────────────
async function validate(data: UserFormData, isNew: boolean): Promise<FormErrors> {
const schema = isNew ? createUserSchema : updateUserSchema;
try {
await schema.validate(data, { abortEarly: false });
return {};
} catch (err) {
if (err instanceof yup.ValidationError) {
return err.inner.reduce<FormErrors>((acc, e) => {
const field = e.path as keyof FormErrors;
if (field && !acc[field]) acc[field] = e.message;
return acc;
}, {});
}
return {};
}
}
// ── Props ─────────────────────────────────────────────────────────────────────
@@ -77,22 +80,24 @@ export function UserFormModal({ editUser, roles, branches, onClose, onSubmit }:
const set = (field: keyof UserFormData) =>
(e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
setForm(p => ({ ...p, [field]: e.target.value }));
// clear field error on change
if (errors[field]) setErrors(p => ({ ...p, [field]: undefined }));
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
// makesure data is valid before sending to API
const errs = validate(form, isNew);
const errs = await validate(
!isNew && !form.password
? { ...form, password: undefined as unknown as string }
: form,
isNew,
);
if (Object.keys(errs).length) { setErrors(errs); return; }
// final check to prevent sending bad data to API (shouldn't happen because of validation, but just in case)
if (!form.name.trim() || !form.phone.trim() || !form.roleId || !form.branchId) {
setApiError("يرجى التأكد من إدخال جميع البيانات المطلوبة.");
return;
}
setSaving(true);
setApiError("");
const ok = await onSubmit(form, isNew);
const payload: Partial<UserFormData> = { ...form };
if (!isNew && !payload.password) delete payload.password;
const ok = await onSubmit(payload as UserFormData, isNew);
setSaving(false);
if (ok) onClose();
else setApiError("حدث خطأ غير متوقع. يرجى المحاولة لاحقاً.");
@@ -146,18 +151,18 @@ export function UserFormModal({ editUser, roles, branches, onClose, onSubmit }:
</button>
</div>
{/* body*/}
{/* body */}
<form onSubmit={handleSubmit} noValidate style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
{apiError && <Alert type="error" message={apiError} onClose={() => setApiError("")} />}
{/* name field*/}
{/* name */}
<label style={S.label}>
الاسم الكامل *
<input ref={firstInputRef} style={inputStyle("name")} value={form.name} onChange={set("name")} placeholder="أحمد الرشيدي" autoComplete="name" dir="rtl" />
{errors.name && <span style={S.errorText}>{errors.name}</span>}
</label>
{/* email and phone fields */}
{/* email + phone */}
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
<label style={S.label}>
البريد الإلكتروني
@@ -171,14 +176,14 @@ export function UserFormModal({ editUser, roles, branches, onClose, onSubmit }:
</label>
</div>
{/* password field */}
{/* password */}
<label style={S.label}>
{isNew ? "كلمة المرور *" : "كلمة المرور الجديدة (اتركها فارغة إذا لا تريد تغييرها)"}
<input style={inputStyle("password")} type="password" value={form.password} onChange={set("password")} placeholder="••••••••" autoComplete={isNew ? "new-password" : "off"} dir="ltr" />
{errors.password && <span style={S.errorText}>{errors.password}</span>}
</label>
{/* role and branch fields */}
{/* role + branch */}
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}>
<label style={S.label}>
الدور *
@@ -198,7 +203,7 @@ export function UserFormModal({ editUser, roles, branches, onClose, onSubmit }:
</label>
</div>
{/* action buttons */}
{/* 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)" }}>

68
Components/car/CarDetailPanel.tsx
View File

@@ -5,40 +5,12 @@
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;
}
import { useCarDetail } from "../../hooks/useCars";
import { STATUS_MAP, INS_MAP, fmtDate, isExpiringSoon } from "../../types/car";
import type { Car, InsuranceStatus } from "../../types/car";
// ── Props ─────────────────────────────────────────────────────────────────────
interface CarDetailPanelProps {
carId: string;
onClose: () => void;
@@ -47,7 +19,10 @@ interface CarDetailPanelProps {
}
// ── Row component ─────────────────────────────────────────────────────────────
function DetailRow({ label, value, mono = false, warn = false }: { label: string; value: string; mono?: boolean; warn?: boolean }) {
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",
@@ -68,22 +43,10 @@ function DetailRow({ label, value, mono = false, warn = false }: { label: string
}
// ── 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]);
export function CarDetailPanel({ carId, onClose, onEdit, onDelete }: CarDetailPanelProps) {
const { car, loading, error } = useCarDetail(carId);
const [gallery, setGallery] = useState(false);
useEffect(() => {
const h = (e: KeyboardEvent) => { if (e.key === "Escape" && !gallery) onClose(); };
@@ -91,7 +54,6 @@ export function CarDetailPanel({ carId, onClose, onEdit, onDelete }: CarDetailPa
return () => window.removeEventListener("keydown", h);
}, [gallery, onClose]);
// ── Render ───────────────────────────────────────────────────────────────────
return (
<>
{/* Backdrop */}
@@ -169,7 +131,7 @@ export function CarDetailPanel({ carId, onClose, onEdit, onDelete }: CarDetailPa
);
})()}
{car.insuranceStatus && (() => {
const ins = INS_MAP[car.insuranceStatus!];
const ins = INS_MAP[car.insuranceStatus as 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}
@@ -263,7 +225,6 @@ export function CarDetailPanel({ carId, onClose, onEdit, onDelete }: CarDetailPa
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">
@@ -273,8 +234,6 @@ export function CarDetailPanel({ carId, onClose, onEdit, onDelete }: CarDetailPa
</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">
@@ -283,8 +242,6 @@ export function CarDetailPanel({ carId, onClose, onEdit, onDelete }: CarDetailPa
</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)" }}>
حذف
@@ -293,7 +250,6 @@ export function CarDetailPanel({ carId, onClose, onEdit, onDelete }: CarDetailPa
)}
</aside>
{/* Image gallery overlay */}
{gallery && car && (
<CarImageGallery car={car} onClose={() => setGallery(false)} />
)}

173
Components/car/CarFormModal.tsx
View File

@@ -1,18 +1,23 @@
"use client";
// Components/Car/CarFormModal.tsx
import { useEffect, useRef, useState } from "react";
import * as yup from "yup";
import { Alert, Spinner } from "../UI";
import { get } from "../../services/api";
import { getStoredToken } from "../../lib/auth";
import { createCarSchema, updateCarSchema } from "@/validations/car.validator";
import type {
Car,
CarFormErrors,
CreateCarPayload,
InsuranceStatus,
UpdateCarPayload,
} from "../../types/car";
import type { Branch } from "../../types/branch";
// ── Shared input style ───────────────────────────────────────────────────────
// ── Shared input style ────────────────────────────────────────────────────────
const inputBase: React.CSSProperties = {
width: "100%",
height: 40,
@@ -41,34 +46,39 @@ const errorTextStyle: React.CSSProperties = {
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;
// ── yup validation ────────────────────────────────────────────────────────────
async function validate(
form: Partial<CreateCarPayload>,
isNew: boolean,
): Promise<CarFormErrors> {
const schema = isNew ? createCarSchema : updateCarSchema;
try {
await schema.validate(form, { abortEarly: false });
return {};
} catch (err) {
if (err instanceof yup.ValidationError) {
return err.inner.reduce<CarFormErrors>((acc, e) => {
const field = e.path as keyof CarFormErrors;
if (field && !acc[field]) acc[field] = e.message;
return acc;
}, {});
}
return {};
}
}
// ── 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.
// ── Date helper ───────────────────────────────────────────────────────────────
// <input type="date"> gives "YYYY-MM-DD"; backend expects full ISO-8601.
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"
if (val.includes("T")) return val;
return `${val}T00:00:00.000Z`;
}
// ── Props ────────────────────────────────────────────────────────────────────
// ── Props ─────────────────────────────────────────────────────────────────────
interface CarFormModalProps {
editCar: Car | null;
/** Pass pre-loaded branches or an empty array — the modal will auto-fetch if empty. */
@@ -80,7 +90,8 @@ interface CarFormModalProps {
) => Promise<boolean>;
}
// ── Component ────────────────────────────────────────────────────────────────
// ── Component ─────────────────────────────────────────────────────────────────
export function CarFormModal({
editCar,
branches: branchesProp,
@@ -104,13 +115,12 @@ export function CarFormModal({
setBranches(list);
})
.catch(() => {
/* silently ignore — user can still submit */
/* silently ignore */
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// ── Form state — each field correctly typed ────────────────────────────────
// String fields
// ── Form state ─────────────────────────────────────────────────────────────
const [manufacturer, setManufacturer] = useState(editCar?.manufacturer ?? "");
const [model, setModel] = useState(editCar?.model ?? "");
const [color, setColor] = useState(editCar?.color ?? "");
@@ -122,11 +132,11 @@ export function CarFormModal({
);
const [vinNumber, setVinNumber] = useState(editCar?.vinNumber ?? "");
const [branchId, setBranchId] = useState(editCar?.branch?.id ?? "");
const [currentStatus, setCurrentStatus] = useState(
const [currentStatus, setCurrentStatus] = useState<Car["currentStatus"]>(
editCar?.currentStatus ?? "Active",
);
const [insuranceStatus, setInsuranceStatus] = useState(
editCar?.insuranceStatus ?? "Valid",
const [insuranceStatus, setInsuranceStatus] = useState<InsuranceStatus>(
(editCar?.insuranceStatus as InsuranceStatus) ?? "Valid",
);
const [registrationExpiryDate, setRegistrationExpiryDate] = useState(
editCar?.registrationExpiryDate?.slice(0, 10) ?? "",
@@ -138,7 +148,6 @@ export function CarFormModal({
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(),
);
@@ -165,11 +174,9 @@ export function CarFormModal({
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]
@@ -181,26 +188,39 @@ export function CarFormModal({
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> = {
// Build snapshot for yup — include all fields so optional rules also run
const formSnapshot: Partial<CreateCarPayload> = {
manufacturer,
model,
year,
plateNumber,
plateLetters,
currentStatus,
insuranceStatus,
registrationNumber,
vinNumber,
...(color && { color }),
...(plateType && { plateType }),
...(branchId && { branchId }),
...(registrationExpiryDate && { registrationExpiryDate }),
...(insuranceExpiryDate && { insuranceExpiryDate }),
...(inspectionExpiryDate && { inspectionExpiryDate }),
...(gpsDeviceId && { gpsDeviceId }),
...(capacity !== undefined && { capacity }),
...(weight !== undefined && { weight }),
};
const errs = validate(forValidation);
const errs = await validate(formSnapshot, isNew);
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.
// Build final payload — convert date strings to ISO-8601 for the backend
const raw: Record<string, unknown> = {
manufacturer,
model,
@@ -209,8 +229,6 @@ export function CarFormModal({
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;
@@ -223,16 +241,11 @@ export function CarFormModal({
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);
@@ -242,6 +255,7 @@ export function CarFormModal({
};
// ── Render ────────────────────────────────────────────────────────────────
return (
<div
role="dialog"
@@ -358,7 +372,7 @@ export function CarFormModal({
/>
)}
{/* Section: Basic Info */}
{/* ── Section: Basic Info ── */}
<p
style={{
fontSize: 11,
@@ -379,7 +393,6 @@ export function CarFormModal({
gap: "0.75rem",
}}
>
{/* Manufacturer — directly mapped to CreateCarPayload.manufacturer */}
<label style={labelStyle}>
الشركة المصنعة *
<input
@@ -398,8 +411,6 @@ export function CarFormModal({
<span style={errorTextStyle}>{errors.manufacturer}</span>
)}
</label>
{/* Model — directly mapped to CreateCarPayload.model */}
<label style={labelStyle}>
الموديل *
<input
@@ -425,7 +436,6 @@ export function CarFormModal({
gap: "0.75rem",
}}
>
{/* Year — maps to CreateCarPayload.year (number) */}
<label style={labelStyle}>
سنة الصنع *
<input
@@ -464,7 +474,7 @@ export function CarFormModal({
</label>
</div>
{/* Section: Plate */}
{/* ── Section: Plate ── */}
<p
style={{
fontSize: 11,
@@ -484,7 +494,6 @@ export function CarFormModal({
gap: "0.75rem",
}}
>
{/* plateNumber — directly mapped to CreateCarPayload.plateNumber */}
<label style={labelStyle}>
رقم اللوحة *
<input
@@ -501,8 +510,6 @@ export function CarFormModal({
<span style={errorTextStyle}>{errors.plateNumber}</span>
)}
</label>
{/* plateLetters — directly mapped to CreateCarPayload.plateLetters */}
<label style={labelStyle}>
حروف اللوحة *
<input
@@ -521,7 +528,7 @@ export function CarFormModal({
</label>
</div>
{/* Section: Registration & Legal */}
{/* ── Section: Registration & Legal ── */}
<p
style={{
fontSize: 11,
@@ -542,24 +549,36 @@ export function CarFormModal({
}}
>
<label style={labelStyle}>
رقم الاستمارة
رقم الاستمارة *
<input
style={inputBase}
style={inputStyle("registrationNumber")}
value={registrationNumber}
onChange={(e) => setRegistrationNumber(e.target.value)}
onChange={(e) => {
setRegistrationNumber(e.target.value);
clearFieldError("registrationNumber");
}}
placeholder="SA-001234"
dir="ltr"
/>
{errors.registrationNumber && (
<span style={errorTextStyle}>{errors.registrationNumber}</span>
)}
</label>
<label style={labelStyle}>
رقم الهيكل (VIN)
<input
style={inputBase}
style={inputStyle("vinNumber")}
value={vinNumber}
onChange={(e) => setVinNumber(e.target.value)}
onChange={(e) => {
setVinNumber(e.target.value);
clearFieldError("vinNumber");
}}
placeholder="1HGBH41JXMN109186"
dir="ltr"
/>
{errors.vinNumber && (
<span style={errorTextStyle}>{errors.vinNumber}</span>
)}
</label>
<label style={labelStyle}>
انتهاء الاستمارة
@@ -574,11 +593,9 @@ export function CarFormModal({
حالة التأمين
<select
style={{ ...inputBase, cursor: "pointer" }}
value={insuranceStatus ?? "Valid"}
value={insuranceStatus}
onChange={(e) =>
setInsuranceStatus(
e.target.value as Car["insuranceStatus"] | undefined,
)
setInsuranceStatus(e.target.value as InsuranceStatus)
}
dir="rtl"
>
@@ -607,7 +624,7 @@ export function CarFormModal({
</label>
</div>
{/* Section: Operational */}
{/* ── Section: Operational ── */}
<p
style={{
fontSize: 11,
@@ -669,35 +686,45 @@ export function CarFormModal({
dir="ltr"
/>
</label>
{/* capacity — maps to CreateCarPayload.capacity (number | undefined) */}
<label style={labelStyle}>
الطاقة الاستيعابية
<input
style={inputBase}
style={inputStyle("capacity")}
type="number"
min={0}
value={capacity ?? ""}
onChange={(e) => setCapacity(parseNum(e.target.value))}
onChange={(e) => {
setCapacity(parseNum(e.target.value));
clearFieldError("capacity");
}}
placeholder="0"
dir="ltr"
/>
{errors.capacity && (
<span style={errorTextStyle}>{errors.capacity}</span>
)}
</label>
{/* weight — maps to CreateCarPayload.weight (number | undefined) */}
<label style={labelStyle}>
الوزن (كجم)
<input
style={inputBase}
style={inputStyle("weight")}
type="number"
min={0}
value={weight ?? ""}
onChange={(e) => setWeight(parseNum(e.target.value))}
onChange={(e) => {
setWeight(parseNum(e.target.value));
clearFieldError("weight");
}}
placeholder="0"
dir="ltr"
/>
{errors.weight && (
<span style={errorTextStyle}>{errors.weight}</span>
)}
</label>
</div>
{/* Actions */}
{/* ── Actions ── */}
<div
style={{
display: "flex",

231
Components/car/CarImageGallery.tsx
View File

@@ -2,110 +2,57 @@
// Components/Car/CarImageGallery.tsx
// Full-screen gallery modal for viewing, uploading and deleting car images.
import { useCallback, useEffect, useRef, useState } from "react";
import { useRef, useState } from "react";
import { Spinner } from "../UI";
import { carService } from "../../services/car.service";
import { getStoredToken } from "../../lib/auth";
import { useCarImages } from "../../hooks/useCars";
import { STAGE_MAP } from "../../types/car";
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 [lightbox, setLightbox] = useState<CarImage | null>(null);
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]);
const {
images, loading, uploading, deleting, error, setError,
uploadImages, deleteImage,
} = useCarImages(car.id, sortBy);
useEffect(() => { fetchImages(); }, [fetchImages]);
const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
const files = Array.from(e.target.files ?? []);
if (!files.length) return;
await uploadImages(files, stage);
if (fileRef.current) fileRef.current.value = "";
};
// Close on Escape
useEffect(() => {
const h = (e: KeyboardEvent) => {
const handleDelete = async (imageId: string) => {
const ok = await deleteImage(imageId);
if (ok && lightbox?.id === imageId) setLightbox(null);
};
const handleKeyDown = (e: React.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 = "";
}
};
const imgSrc = (img: CarImage) => img.url ?? `/api/proxy/car-photos/${img.image}`;
// ── 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="معرض صور المركبة"
onKeyDown={handleKeyDown}
onClick={e => { if (e.target === e.currentTarget) onClose(); }}
style={{
position: "fixed", inset: 0, zIndex: 70,
@@ -131,56 +78,23 @@ export function CarImageGallery({ car, onClose }: CarImageGalleryProps) {
</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)",
}}
>
<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)",
}}
>
<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)",
}}
>
<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" /> جارٍ الرفع…</>
: <>
@@ -191,14 +105,7 @@ export function CarImageGallery({ car, onClose }: CarImageGalleryProps) {
</>
}
</button>
<input
ref={fileRef}
type="file"
accept="image/*"
multiple
style={{ display: "none" }}
onChange={handleUpload}
/>
<input ref={fileRef} type="file" accept="image/*" multiple style={{ display: "none" }} onChange={handleUpload} />
{/* Close */}
<button type="button" onClick={onClose} aria-label="إغلاق"
@@ -228,22 +135,16 @@ export function CarImageGallery({ car, onClose }: CarImageGalleryProps) {
<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 }}>
اضغط على "رفع صور" لإضافة أولى الصور لهذه المركبة.
اضغط على &quot;رفع صور&quot; لإضافة أولى الصور لهذه المركبة.
</p>
</div>
) : (
<div style={{
display: "grid",
gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
gap: "1rem",
}}>
<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={{
<div key={img.id} style={{
borderRadius: "var(--radius-xl)",
border: "1px solid var(--color-border)",
background: "var(--color-surface)",
@@ -251,30 +152,19 @@ export function CarImageGallery({ car, onClose }: CarImageGalleryProps) {
boxShadow: "var(--shadow-card)",
opacity: isDeleting ? 0.5 : 1,
transition: "opacity 200ms",
}}
>
{/* Image */}
<div
style={{ position: "relative", paddingBottom: "70%", cursor: "pointer" }}
onClick={() => setLightbox(img)}
>
}}>
<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",
}}
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,
background: stageInfo.bg, color: stageInfo.color,
padding: "0.2rem 0.625rem",
fontSize: 10, fontWeight: 700,
boxShadow: "0 1px 4px rgba(0,0,0,.12)",
@@ -283,30 +173,12 @@ export function CarImageGallery({ car, onClose }: CarImageGalleryProps) {
</span>
</div>
{/* Footer */}
<div style={{
display: "flex", alignItems: "center", justifyContent: "space-between",
padding: "0.6rem 0.75rem",
borderTop: "1px solid var(--color-border)",
}}>
<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",
}}
>
<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">
@@ -325,15 +197,7 @@ export function CarImageGallery({ car, onClose }: CarImageGalleryProps) {
{/* ── 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",
}}
>
<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)}
@@ -342,16 +206,7 @@ export function CarImageGallery({ car, onClose }: CarImageGalleryProps) {
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 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>

95
app/NewOrder/page.tsx
View File

@@ -1,95 +0,0 @@
"use client";
import { useState, useEffect, useCallback } from "react";
import { loadSession, type ClientSession } from "@/lib/session";
import RegisterStep from "../..//Components/Client/client";
import DashboardStep from "../../Components/Order/order";
import AddressStep from "../../Components/Client_Adress/clientAdress";
import Logo from "../../utils/logo";
import { Spinner } from "../../Components/UI";
type Step = "bootstrap" | "register" | "address" | "dashboard";
function Navbar({ session }: { session: ClientSession | null }) {
return (
<nav
aria-label="Client portal navigation"
className="bg-white border-b border-[#E5E7EB] flex items-center justify-between px-5 h-14 sticky top-0 z-30"
>
<div className="flex items-center gap-2">
{session?.name && (
<span className="text-[12px] text-[#6B7280] hidden sm:block">{session.name}</span>
)}
<div aria-hidden="true" className="w-8 h-8 rounded-full bg-[#EBF3FF] flex items-center justify-center">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1A73E8" strokeWidth="2">
<circle cx="12" cy="8" r="4"/>
<path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
</svg>
</div>
</div>
<Logo />
</nav>
);
}
export default function ClientOrderPage() {
const [step, setStep] = useState<Step>("bootstrap");
const [session, setSession] = useState<ClientSession | null>(null);
useEffect(() => {
const saved = loadSession();
if (saved?.id && saved.name) {
setSession(saved);
setStep("dashboard");
} else {
setStep("register");
}
}, []);
const handleRegistered = useCallback((s: ClientSession) => {
setSession(s);
setStep("address");
}, []);
const handleAddressComplete = useCallback(() => {
setStep("dashboard");
}, []);
return (
<div
className="min-h-screen bg-[#ECEEF2]"
dir="rtl"
lang="ar"
style={{ fontFamily: "var(--font-sans)" }}
>
<Navbar session={session} />
<div className="max-w-lg mx-auto px-4 py-8">
<div className="bg-white border border-[#E5E7EB] rounded-2xl p-6 shadow-sm">
{step === "bootstrap" && (
<div className="flex flex-col items-center justify-center py-10 gap-3" role="status">
<Spinner size="lg" />
<p className="text-[13px] text-[#6B7280]">جارٍ تحميل بيانات الجلسة…</p>
</div>
)}
{step === "register" && (
<RegisterStep onSuccess={handleRegistered} />
)}
{step === "address" && session && (
<AddressStep session={session} onSuccess={handleAddressComplete} />
)}
{step === "dashboard" && session && (
<DashboardStep session={session} />
)}
</div>
<p className="text-center text-[11px] text-[#9CA3AF] mt-4">
LogiFlow · آمن ومشفر · المملكة العربية السعودية 🇸🇦
</p>
</div>
</div>
);
}

4
app/components/layout/Navbar.tsx
View File

@@ -34,9 +34,7 @@ export default function Navbar() {
</div>
<div className="mr-auto flex items-center gap-2">
<Link href="/NewOrder" className="flex h-[34px] items-center rounded-lg border border-slate-200 bg-white px-3 text-[13px] font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50">
إنشاء طلب جديد
</Link>
<Link href="/login" className="flex h-[34px] items-center rounded-lg bg-blue-600 px-3 text-[13px] font-bold text-white shadow-sm transition hover:bg-blue-700">
تسجيل الدخول ←
</Link>

19
app/components/layout/Sidebar.tsx
View File

@@ -10,25 +10,26 @@ const navSections = [
label: "الرئيسية",
items: [
{ href: "/dashboard", label: "Dashboard", icon: "ti-layout-dashboard", permission: "read-dashboard" },
{ href: "/users", label: "Users", icon: "ti-users", permission: "read-user" },
{ href: "/dashboard/users", label: "Users", icon: "ti-users", permission: "read-user" },
],
},
{
label: "الأسطول",
items: [
{ href: "/cars", label: "Cars", icon: "ti-car", permission: "read-car" },
{ href: "/drivers", label: "Drivers", icon: "ti-steering-wheel",permission: "read-driver" },
{ href: "/trips", label: "Trips", icon: "ti-route", permission: "read-trip" },
{ href: "/dashboard/cars", label: "Cars", icon: "ti-car", permission: "read-car" },
{ href: "/dashboard/drivers", label: "Drivers", icon: "ti-steering-wheel",permission: "read-driver" },
{ href: "/dashboard/trips", label: "Trips", icon: "ti-route", permission: "read-trip" },
],
},
{
label: "العمليات",
items: [
{ href: "/orders", label: "Orders", icon: "ti-package", permission: "read-order" },
{ href: "/clients", label: "Clients", icon: "ti-users-group", permission: "read-client" },
{ href: "/branches", label: "Branches", icon: "ti-building", permission: "read-branch" },
{ href: "/roles", label: "Roles", icon: "ti-shield", permission: "read-role" },
{ href: "/audit", label: "Audit", icon: "ti-clipboard-list", permission: "read-audit" },
{ href: "/dashboard/orders", label: "Orders", icon: "ti-package", permission: "read-order" },
{ href: "/dashboard/clients", label: "Clients", icon: "ti-users-group", permission: "read-client" },
{ href: "/dashboard/branches", label: "Branches", icon: "ti-building", permission: "read-branch" },
{ href: "/dashboard/roles", label: "Roles", icon: "ti-shield", permission: "read-role" },
{ href: "/dashboard/role_permission", label: "Roles & Permission", icon: "ti-shield", permission: "manage-role-permissions" },
{ href: "/dashboard/audit", label: "Audit", icon: "ti-clipboard-list", permission: "read-audit" },
],
},
];

0
app/audit/page.tsx → app/dashboard/audit/page.tsx
View File

0
app/branches/page.tsx → app/dashboard/branches/page.tsx
View File

206
app/cars/page.tsx → app/dashboard/cars/page.tsx
View File

@@ -1,68 +1,25 @@
"use client";
// app/(dashboard)/cars/page.tsx
import { useCallback, useEffect, useState } from "react";
import { getStoredToken } from "../../lib/auth";
import { carService } from "../../services/car.service";
import { get } from "../../services/api";
import { Spinner, Alert } from "../../Components/UI";
import { CarFormModal } from "../../Components/car/CarFormModal";
import { CarDetailPanel } from "../../Components/car/CarDetailPanel";
import { CarDeleteModal } from "../../Components/car/CarDeleteModal";
import type { Car, CreateCarPayload, UpdateCarPayload } from "../../types/car";
import { useCallback, useState } from "react";
import { Spinner, Alert } from "@/Components/UI";
import { CarFormModal } from "@/Components/car/CarFormModal";
import { CarDetailPanel } from "@/Components/car/CarDetailPanel";
import { CarDeleteModal } from "@/Components/car/CarDeleteModal";
import { useCars, useCarMutations, useToast } from "@/hooks/useCars";
import { fmtDateShort, isExpiringSoon, STATUS_MAP, INS_MAP } from "@/types/car";
import type { Car, CreateCarPayload, ToastMsg, UpdateCarPayload } from "@/types/car";
// ── API response shape ────────────────────────────────────────────────────────
interface ApiResponse {
data: {
data: Car[];
pagination: { total: number; page: number; pages: number };
meta?: { total: number; pages: number };
};
}
// ── Status badge config ───────────────────────────────────────────────────────
const STATUS_MAP: Record<
Car["currentStatus"],
{ label: string; color: string; bg: string; border: string; dot: string }
> = {
Active: { label: "نشط", color: "#166534", bg: "#DCFCE7", border: "#BBF7D0", dot: "#16A34A" },
InMaintenance: { label: "صيانة", color: "#854D0E", bg: "#FFFBEB", border: "#FDE68A", dot: "#D97706" },
InTrip: { label: "في رحلة", color: "#1E40AF", bg: "#EFF6FF", border: "#BFDBFE", dot: "#3B82F6" },
Inactive: { label: "غير نشط", color: "#64748B", bg: "#F1F5F9", border: "#E2E8F0", dot: "#94A3B8" },
};
const INS_MAP: Record<string, { label: string; color: string }> = {
Valid: { label: "سارٍ", color: "#16A34A" },
Expired: { label: "منتهي", color: "#DC2626" },
NotInsured: { label: "غير مؤمَّن", color: "#D97706" },
};
function fmtDate(iso?: string) {
if (!iso) return "—";
return new Date(iso).toLocaleDateString("ar-SA", { year: "numeric", month: "short", day: "numeric" });
}
function isExpiringSoon(iso?: string) {
if (!iso) return false;
return (new Date(iso).getTime() - Date.now()) / 86_400_000 <= 90;
}
// ── Toast (inline — mirrors Components/User/Toast pattern) ───────────────────
interface ToastMsg { type: "success" | "error"; message: string }
// ── Toast ─────────────────────────────────────────────────────────────────────
function CarToast({ notification }: { notification: ToastMsg | null }) {
const [vis, setVis] = useState(false);
useEffect(() => {
if (notification) setVis(true);
else { const t = setTimeout(() => setVis(false), 300); return () => clearTimeout(t); }
}, [notification]);
if (!vis && !notification) return null;
const ok = notification?.type === "success";
if (!notification) return null;
const ok = notification.type === "success";
return (
<div role="status" aria-live="polite" style={{
position: "fixed", bottom: 24, left: "50%",
transform: `translateX(-50%) translateY(${notification ? "0" : "16px"})`,
zIndex: 9999, transition: "transform 250ms ease, opacity 250ms ease",
opacity: notification ? 1 : 0, pointerEvents: "none",
transform: "translateX(-50%)",
zIndex: 9999, pointerEvents: "none",
}}>
<div style={{
display: "flex", alignItems: "center", gap: 10,
@@ -75,17 +32,18 @@ function CarToast({ notification }: { notification: ToastMsg | null }) {
fontFamily: "var(--font-sans)",
}}>
<span style={{ fontSize: 16 }}>{ok ? "✓" : "⚠"}</span>
<span>{notification?.message}</span>
<span>{notification.message}</span>
</div>
</div>
);
}
// ── Vehicle Card component ────────────────────────────────────────────────────
// ── CarCard ───────────────────────────────────────────────────────────────────
function CarCard({ car, onClick }: { car: Car; onClick: () => void }) {
const status = STATUS_MAP[car.currentStatus];
const ins = car.insuranceStatus ? INS_MAP[car.insuranceStatus] : null;
const regWarn = isExpiringSoon(car.registrationExpiryDate as string | undefined);
const regWarn = isExpiringSoon(car.registrationExpiryDate);
return (
<article
@@ -145,7 +103,7 @@ function CarCard({ car, onClick }: { car: Car; onClick: () => void }) {
</span>
</div>
{/* Plate number — prominent */}
{/* Plate number */}
<div style={{
marginTop: "0.875rem",
background: "var(--color-surface-muted)",
@@ -166,34 +124,24 @@ function CarCard({ car, onClick }: { car: Car; onClick: () => void }) {
{/* Key attributes grid */}
<div style={{ marginTop: "0.875rem", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.5rem" }}>
{/* Branch */}
<div style={{ fontSize: 11 }}>
<span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>الفرع</span>
<span style={{ color: "var(--color-text-primary)", marginTop: 2, display: "block" }}>
{car.branch?.name ?? "—"}
</span>
</div>
{/* Insurance */}
<div style={{ fontSize: 11 }}>
<span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>التأمين</span>
<span style={{
color: ins?.color ?? "var(--color-text-muted)",
marginTop: 2, display: "block", fontWeight: 600,
}}>
<span style={{ color: ins?.color ?? "var(--color-text-muted)", marginTop: 2, display: "block", fontWeight: 600 }}>
{ins?.label ?? "—"}
</span>
</div>
{/* Registration expiry */}
<div style={{ fontSize: 11 }}>
<span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>انتهاء الاستمارة</span>
<span style={{
color: regWarn ? "#D97706" : "var(--color-text-secondary)",
marginTop: 2, display: "block", fontWeight: regWarn ? 600 : 400,
}}>
{regWarn && "⚠ "}{fmtDate(car.registrationExpiryDate as string | undefined)}
<span style={{ color: regWarn ? "#D97706" : "var(--color-text-secondary)", marginTop: 2, display: "block", fontWeight: regWarn ? 600 : 400 }}>
{regWarn && "⚠ "}{fmtDateShort(car.registrationExpiryDate)}
</span>
</div>
{/* Capacity */}
<div style={{ fontSize: 11 }}>
<span style={{ color: "var(--color-text-muted)", fontWeight: 600, display: "block" }}>الطاقة</span>
<span style={{ color: "var(--color-text-secondary)", marginTop: 2, display: "block" }}>
@@ -203,11 +151,7 @@ function CarCard({ car, onClick }: { car: Car; onClick: () => void }) {
</div>
{/* Footer CTA hint */}
<p style={{
marginTop: "0.875rem",
fontSize: 11, color: "var(--color-brand-600)",
fontWeight: 600, textAlign: "left",
}}>
<p style={{ marginTop: "0.875rem", fontSize: 11, color: "var(--color-brand-600)", fontWeight: 600, textAlign: "left" }}>
اضغط لعرض التفاصيل ←
</p>
</div>
@@ -216,96 +160,43 @@ function CarCard({ car, onClick }: { car: Car; onClick: () => void }) {
}
// ── Page ──────────────────────────────────────────────────────────────────────
export default function CarsPage() {
// List state
const [cars, setCars] = useState<Car[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [search, setSearch] = useState("");
const [page, setPage] = useState(1);
const [total, setTotal] = useState(0);
const [pages, setPages] = useState(1);
// Modal state
const [detailId, setDetailId] = useState<string | null>(null); // CarDetailPanel
const [formTarget, setFormTarget] = useState<Car | null | false>(false); // false=closed
const [detailId, setDetailId] = useState<string | null>(null);
const [formTarget, setFormTarget] = useState<Car | null | false>(false); // false = closed
const [deleteTarget, setDeleteTarget] = useState<Car | null>(null);
const [deleting, setDeleting] = useState(false);
// Toast
const [toast, setToast] = useState<{ type: "success" | "error"; message: string } | null>(null);
const notify = useCallback((t: typeof toast) => {
setToast(t);
setTimeout(() => setToast(null), 3500);
}, []);
const { toast, notify } = useToast();
// ── Fetch list ─────────────────────────────────────────────────────────────
const loadCars = useCallback(() => {
const token = getStoredToken();
setLoading(true);
setError(null);
const query = `?page=${page}&limit=12${search ? `&search=${encodeURIComponent(search)}` : ""}`;
get<ApiResponse>(`cars${query}`, token)
.then((res) => {
const payload = (res as unknown as { data: ApiResponse["data"] }).data ?? res;
setCars((payload as ApiResponse["data"]).data ?? []);
setTotal((payload as ApiResponse["data"]).meta?.total ?? 0);
setPages((payload as ApiResponse["data"]).meta?.pages ?? 1);
})
.catch((err: Error) => setError(err.message))
.finally(() => setLoading(false));
}, [page, search]);
const { cars, loading, error, total, pages, loadCars, removeCar, setError } =
useCars(page, search);
useEffect(() => { loadCars(); }, [loadCars]);
// Need a stable ref to the current edit target for the mutation hook
const getEditTarget = useCallback(() =>
formTarget instanceof Object && formTarget !== null ? formTarget as Car : null,
[formTarget]);
// ── Create / Update ────────────────────────────────────────────────────────
const handleFormSubmit = async (
payload: CreateCarPayload | UpdateCarPayload,
isNew: boolean,
): Promise<boolean> => {
const token = getStoredToken();
try {
if (isNew) {
await carService.create(payload as CreateCarPayload, token);
notify({ type: "success", message: "تم إضافة المركبة بنجاح." });
} else {
await carService.update((formTarget as Car).id, payload as UpdateCarPayload, token);
notify({ type: "success", message: "تم تحديث بيانات المركبة." });
}
loadCars();
return true;
} catch (err: unknown) {
notify({ type: "error", message: err instanceof Error ? err.message : "فشلت العملية." });
return false;
}
};
const { deleting, handleFormSubmit, handleDeleteConfirm } = useCarMutations({
onSuccess: (msg) => { notify({ type: "success", message: msg }); loadCars(); },
onError: (msg) => notify({ type: "error", message: msg }),
onDeleted: (id) => { removeCar(id); setDeleteTarget(null); },
getEditTarget,
});
// ── Delete ─────────────────────────────────────────────────────────────────
const handleDeleteConfirm = async () => {
const handleDelete = async () => {
if (!deleteTarget) return;
setDeleting(true);
const token = getStoredToken();
try {
await carService.delete(deleteTarget.id, token);
// Optimistic removal — no page refresh needed
setCars(prev => prev.filter(c => c.id !== deleteTarget.id));
setTotal(prev => Math.max(0, prev - 1));
setDeleteTarget(null);
notify({ type: "success", message: `تم حذف ${deleteTarget.manufacturer} ${deleteTarget.model} بنجاح.` });
} catch (err: unknown) {
notify({ type: "error", message: err instanceof Error ? err.message : "فشل الحذف." });
} finally {
setDeleting(false);
}
await handleDeleteConfirm(deleteTarget);
};
// ── Render ─────────────────────────────────────────────────────────────────
// ── Render ──────────────────────────────────────────────────────────────────
return (
<>
{/* Toast notification */}
<CarToast notification={toast} />
{/* Detail panel (slide-in) */}
{detailId && (
<CarDetailPanel
carId={detailId}
@@ -315,23 +206,23 @@ export default function CarsPage() {
/>
)}
{/* Create / Edit modal */}
{formTarget !== false && (
<CarFormModal
editCar={formTarget}
branches={[]} // loaded inside modal via its own effect in production
branches={[]}
onClose={() => setFormTarget(false)}
onSubmit={handleFormSubmit}
onSubmit={(payload: CreateCarPayload | UpdateCarPayload, isNew: boolean) =>
handleFormSubmit(payload, isNew).then((ok) => { if (ok) setFormTarget(false); return ok; })
}
/>
)}
{/* Delete confirmation */}
{deleteTarget && (
<CarDeleteModal
car={deleteTarget}
deleting={deleting}
onCancel={() => setDeleteTarget(null)}
onConfirm={handleDeleteConfirm}
onConfirm={handleDelete}
/>
)}
@@ -418,7 +309,6 @@ export default function CarsPage() {
<span style={{ fontSize: 14 }}>جارٍ تحميل المركبات…</span>
</div>
) : cars.length === 0 ? (
/* Empty state */
<div style={{
borderRadius: "var(--radius-xl)",
border: "2px dashed var(--color-border)",
@@ -431,7 +321,7 @@ export default function CarsPage() {
{search ? `لا توجد مركبات تطابق "${search}"` : "لا توجد مركبات بعد"}
</p>
<p style={{ fontSize: 13, color: "var(--color-text-muted)", marginTop: 6 }}>
اضغط على "إضافة مركبة" لإضافة أول مركبة في الأسطول.
اضغط على &quot;إضافة مركبة&quot; لإضافة أول مركبة في الأسطول.
</p>
{!search && (
<button

12
app/clients/[clientId]/addresses/page.tsx → app/dashboard/clients/[clientId]/addresses/page.tsx
View File

@@ -2,16 +2,16 @@
import { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { Alert } from "../../../../Components/UI";
import { Toast } from "../../../../Components/Client/Toast";
import { useClientAddresses } from "../../../../hooks/useClientAddresses";
import { clientService } from "../../../../services/client.service";
import { getStoredToken } from "../../../../lib/auth";
import { Alert } from "@/Components/UI";
import { Toast } from "@/Components/Client/Toast";
import { useClientAddresses } from "@/hooks/useClientAddresses";
import { clientService } from "@/services/client.service";
import { getStoredToken } from "@/lib/auth";
import type {
Client,
ClientAddress,
ClientAddressFormData,
} from "../../../../types/client";
} from "@/types/client";
import { AddressFormModal } from "@/Components/Client/Addressformmodal";
import { DeleteConfirmModal } from "@/Components/Client/Deleteconfirmmodal";

10
app/clients/page.tsx → app/dashboard/clients/page.tsx
View File

@@ -2,10 +2,10 @@
import { useState } from "react";
import { useRouter } from "next/navigation";
import { Alert } from "../../Components/UI";
import { Toast } from "../../Components/Client/Toast";
import { useClients } from "../../hooks/useClients";
import type { Client, ClientFormData } from "../../types/client";
import { Alert } from "@/Components/UI";
import { Toast } from "@/Components/Client/Toast";
import { useClients } from "@/hooks/useClients";
import type { Client, ClientFormData } from "@/types/client";
import { ClientFormModal } from "@/Components/Client/Clientformmodal";
import { ClientTable } from "@/Components/Client/Clienttable";
import { DeleteConfirmModal } from "@/Components/Client/Deleteconfirmmodal";
@@ -48,7 +48,7 @@ export default function ClientsPage() {
// ── Navigate to address management ──────────────────────────────────────
const handleManageAddresses = (client: Client) => {
router.push(`/clients/${client.id}/addresses`);
router.push(`/dashboard/clients/${client.id}/addresses`);
};
// ── Render ───────────────────────────────────────────────────────────────

624
app/dashboard/drivers/[driverId]/page.tsx Normal file
View File

@@ -0,0 +1,624 @@
"use client";
import { useCallback, useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { Spinner } from "@/Components/UI";
import { DriverFormModal } from "@/Components/Driver/DriverFormModal";
import { DriverDeleteModal } from "@/Components/Driver/DriverDeleteModal";
import { DriverReportPanel } from "@/Components/Driver_Report/driverReport";
import { driverService } from "@/services";
import { getStoredToken } from "@/lib/auth";
import type {
Driver,
CreateDriverPayload,
UpdateDriverPayload,
} 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;
return (new Date(iso).getTime() - Date.now()) <= 90 * 86_400_000;
}
// ── Sub-components ────────────────────────────────────────────────────────────
function SectionCard({
title,
children,
}: {
title: string;
children: React.ReactNode;
}) {
return (
<div
style={{
borderRadius: "var(--radius-xl)",
border: "1px solid var(--color-border)",
background: "var(--color-surface)",
overflow: "hidden",
boxShadow: "var(--shadow-card)",
}}
>
<div
style={{
padding: "0.875rem 1.5rem",
borderBottom: "1px solid var(--color-border)",
background: "var(--color-surface-muted)",
}}
>
<p
style={{
fontSize: 11,
letterSpacing: "0.25em",
textTransform: "uppercase",
color: "var(--color-text-hint)",
fontWeight: 700,
margin: 0,
}}
>
{title}
</p>
</div>
<div style={{ padding: "1rem 1.5rem" }}>{children}</div>
</div>
);
}
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 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: 12, 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="32"
height="32"
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>
);
}
// ── Page ──────────────────────────────────────────────────────────────────────
export default function DriverDetailPage() {
const params = useParams();
const router = useRouter();
const driverId = params?.driverId as string;
const [driver, setDriver] = useState<Driver | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [avatarError, setAvatarError] = useState(false);
// ── Modal state ───────────────────────────────────────────────────────────
const [editOpen, setEditOpen] = useState(false);
const [deleteOpen, setDeleteOpen] = useState(false);
const [deleting, setDeleting] = useState(false);
// ── Load driver ───────────────────────────────────────────────────────────
const loadDriver = useCallback(async () => {
if (!driverId) return;
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]);
// ── Edit submit ───────────────────────────────────────────────────────────
const handleEditSubmit = useCallback(
async (
payload: CreateDriverPayload | UpdateDriverPayload,
_isNew: boolean,
): Promise<boolean> => {
if (!driver) return false;
try {
const token = getStoredToken();
await driverService.update(driver.id, payload as UpdateDriverPayload, token);
await loadDriver();
return true;
} catch {
return false;
}
},
[driver, loadDriver],
);
// ── Delete confirm ────────────────────────────────────────────────────────
const handleConfirmDelete = useCallback(async () => {
if (!driver) return;
setDeleting(true);
try {
const token = getStoredToken();
await driverService.delete(driver.id, token);
router.push("/dashboard/drivers");
} catch {
setDeleting(false);
}
}, [driver, router]);
// ── Status config ─────────────────────────────────────────────────────────
const statusConfig = driver ? DRIVER_STATUS_MAP[driver.status] : null;
// ── Render: Loading ───────────────────────────────────────────────────────
if (loading) {
return (
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: 12,
padding: "6rem 0",
color: "var(--color-text-muted)",
}}
>
<Spinner size="sm" className="text-blue-600" />
<span style={{ fontSize: 14 }}>جارٍ التحميل…</span>
</div>
);
}
// ── Render: Error ─────────────────────────────────────────────────────────
if (error || !driver) {
return (
<div
style={{
maxWidth: 480,
margin: "4rem auto",
borderRadius: "var(--radius-xl)",
border: "1px solid #FECACA",
background: "#FEF2F2",
padding: "1.5rem",
textAlign: "center",
}}
>
<p style={{ fontSize: 14, color: "#DC2626", fontWeight: 600 }}>
⚠ {error ?? "السائق غير موجود"}
</p>
<button
type="button"
onClick={() => router.back()}
style={{
marginTop: "1rem",
height: 38,
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: "pointer",
fontFamily: "var(--font-sans)",
}}
>
← رجوع
</button>
</div>
);
}
// ── Render: Driver detail ─────────────────────────────────────────────────
return (
<>
<section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
{/* ── Page header ── */}
<header
style={{
borderRadius: "var(--radius-xl)",
border: "1px solid var(--color-border)",
background: "var(--color-surface)",
padding: "1.5rem 2rem",
boxShadow: "var(--shadow-card)",
}}
>
{/* Back link */}
<button
type="button"
onClick={() => router.back()}
style={{
display: "inline-flex",
alignItems: "center",
gap: 6,
fontSize: 12,
fontWeight: 600,
color: "var(--color-text-muted)",
background: "none",
border: "none",
cursor: "pointer",
padding: 0,
marginBottom: "1rem",
fontFamily: "var(--font-sans)",
}}
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
<path d="M19 12H5M12 5l-7 7 7 7" />
</svg>
العودة إلى قائمة السائقين
</button>
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: "1rem" }}>
{/* Avatar + name */}
<div style={{ display: "flex", alignItems: "center", gap: 16 }}>
<div
style={{
width: 72,
height: 72,
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: 28, 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>
<h1 style={{ fontSize: "1.5rem", fontWeight: 700, color: "var(--color-text-primary)", margin: "4px 0 0" }}>
{driver.name}
</h1>
<div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 6, flexWrap: "wrap" }}>
{driver.userName && (
<span style={{ fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--color-text-muted)" }}>
@{driver.userName}
</span>
)}
<span style={{ fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--color-text-muted)" }}>
{driver.phone}
</span>
{statusConfig && (
<span
style={{
borderRadius: "var(--radius-full)",
border: `1px solid ${statusConfig.border}`,
background: statusConfig.bg,
padding: "0.2rem 0.625rem",
fontSize: 11,
fontWeight: 700,
color: statusConfig.color,
display: "inline-flex",
alignItems: "center",
gap: 5,
}}
>
<span style={{ width: 6, height: 6, borderRadius: "50%", background: statusConfig.dot, flexShrink: 0 }} />
{statusConfig.label}
</span>
)}
</div>
</div>
</div>
{/* Actions */}
<div style={{ display: "flex", gap: "0.75rem" }}>
<button
type="button"
onClick={() => setDeleteOpen(true)}
style={{
height: 40,
padding: "0 1.25rem",
borderRadius: "var(--radius-lg)",
border: "1px solid #FECACA",
background: "#FEF2F2",
fontSize: 13,
fontWeight: 700,
color: "#DC2626",
cursor: "pointer",
fontFamily: "var(--font-sans)",
}}
>
حذف السائق
</button>
<button
type="button"
onClick={() => setEditOpen(true)}
style={{
height: 40,
padding: "0 1.25rem",
borderRadius: "var(--radius-lg)",
border: "none",
background: "var(--color-brand-600)",
fontSize: 13,
fontWeight: 700,
color: "#FFF",
cursor: "pointer",
display: "flex",
alignItems: "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>
</div>
</div>
</header>
{/* ── Content grid ── */}
<div
style={{
display: "grid",
gridTemplateColumns: "1fr 1fr",
gap: "1.5rem",
}}
>
{/* Personal Info */}
<SectionCard 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 ?? "—"} />
<DetailRow label="نوع السائق" value={driver.driverType ?? "—"} />
</SectionCard>
{/* ID & GOSI */}
<SectionCard 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 />
</SectionCard>
{/* License */}
<SectionCard title="بيانات رخصة القيادة">
<DetailRow label="رقم الرخصة" value={driver.licenseNumber ?? "—"} mono />
<DetailRow label="نوع الرخصة" value={driver.licenseType ?? "—"} />
<DetailRow
label="انتهاء الرخصة"
value={fmtDate(driver.licenseExpiry)}
warn={isExpiringSoon(driver.licenseExpiry)}
/>
</SectionCard>
{/* Driver Card */}
<SectionCard 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)}
/>
</SectionCard>
{/* System Info */}
<SectionCard title="معلومات النظام">
<DetailRow label="اسم المستخدم" value={driver.userName ?? "—"} mono />
<DetailRow label="تاريخ الإضافة" value={fmtDate(driver.createdAt)} />
<DetailRow label="آخر تحديث" value={fmtDate(driver.updatedAt)} />
</SectionCard>
{/* Status History */}
{driver.statusHistory && driver.statusHistory.length > 0 && (
<SectionCard title="سجل الحالات">
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
{driver.statusHistory.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>
</SectionCard>
)}
</div>
{/* ── Photos section (full width) ── */}
<SectionCard title="الصور والمستندات">
<div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "1.25rem" }}>
<PhotoCard url={driver.photoUrl} label="صورة السائق" />
<PhotoCard url={driver.nationalPhotoUrl} label="صورة الهوية" />
<PhotoCard url={driver.driverCardPhotoUrl} label="صورة بطاقة السائق" />
</div>
</SectionCard>
{/* ── Report section (full width) ── */}
<div
style={{
borderRadius: "var(--radius-xl)",
border: "1px solid var(--color-border)",
background: "var(--color-surface)",
boxShadow: "var(--shadow-card)",
padding: "1.5rem",
}}
>
<DriverReportPanel driverId={driver.id} />
</div>
</section>
{/* ── Edit modal ── */}
{editOpen && (
<DriverFormModal
editDriver={driver}
branches={[]}
onClose={() => setEditOpen(false)}
onSubmit={handleEditSubmit}
/>
)}
{/* ── Delete modal ── */}
{deleteOpen && (
<DriverDeleteModal
driver={driver}
deleting={deleting}
onCancel={() => setDeleteOpen(false)}
onConfirm={handleConfirmDelete}
/>
)}
</>
);
}

0
app/drivers/page.tsx → app/dashboard/drivers/page.tsx
View File

5
app/dashboard/layout.tsx
View File

@@ -7,7 +7,10 @@ export default function DashboardLayout({
children: React.ReactNode;
}) {
return (
<div className="flex min-h-screen" style={{ background: "var(--color-surface-muted)" }}>
<div
className="flex min-h-screen"
style={{ background: "var(--color-surface-muted)" }}
>
<Sidebar />
<div className="flex min-w-0 flex-1 flex-col">
<Topbar />

6
app/orders/page.tsx → app/dashboard/orders/page.tsx
View File

@@ -1,9 +1,9 @@
"use client";
import { useEffect, useState } from "react";
import { getStoredToken } from "../../lib/auth";
import { get } from "../../services/api";
import { Spinner, Alert } from "../../Components/UI";
import { getStoredToken } from "@/lib/auth";
import { get } from "@/services/api";
import { Spinner, Alert } from "@/Components/UI";
interface Order {
id: string;

0
app/roles/page.tsx → app/dashboard/roles/page.tsx
View File

498
app/dashboard/trips/[tripId]/page.tsx Normal file
View File

@@ -0,0 +1,498 @@
"use client";
import { useCallback, useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { Spinner } from "@/Components/UI";
import { TripFormModal } from "@/Components/Trip/Tripformmodal";
import { TripDeleteModal } from "@/Components/Trip/Tripdeletemodal";
import { TripReportPanel } from "@/Components/Trip_Report/Tripreportpanel";
import { tripService } from "@/services/trip.service";
import { getStoredToken } from "@/lib/auth";
import type {
Trip,
CreateTripPayload,
UpdateTripPayload,
} from "@/types/trip";
import { TRIP_STATUS_MAP } from "@/types/trip";
// ── Helpers ───────────────────────────────────────────────────────────────────
function fmtDate(iso?: string | null): string {
if (!iso) return "—";
return new Date(iso).toLocaleDateString("ar-SA", {
year: "numeric",
month: "long",
day: "numeric",
hour: "2-digit",
minute: "2-digit",
});
}
function fmtNumber(n?: number | string | null): string {
if (n == null || n === "") return "—";
return Number(n).toLocaleString("ar-SA");
}
// ── Sub-components ────────────────────────────────────────────────────────────
function SectionCard({ title, children }: { title: string; children: React.ReactNode }) {
return (
<div
style={{
borderRadius: "var(--radius-xl)",
border: "1px solid var(--color-border)",
background: "var(--color-surface)",
overflow: "hidden",
boxShadow: "var(--shadow-card)",
}}
>
<div style={{
padding: "0.875rem 1.5rem",
borderBottom: "1px solid var(--color-border)",
background: "var(--color-surface-muted)",
}}>
<p style={{
fontSize: 11,
letterSpacing: "0.25em",
textTransform: "uppercase",
color: "var(--color-text-hint)",
fontWeight: 700,
margin: 0,
}}>
{title}
</p>
</div>
<div style={{ padding: "1rem 1.5rem" }}>{children}</div>
</div>
);
}
function DetailRow({
label,
value,
mono = false,
}: {
label: string;
value: string;
mono?: 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: "var(--color-text-primary)",
maxWidth: "60%",
textAlign: "left",
wordBreak: "break-word",
}}>
{value}
</span>
</div>
);
}
// ── Stat card (للأعداد) ───────────────────────────────────────────────────────
function StatCard({
label,
value,
color = "var(--color-brand-600)",
bg = "var(--color-brand-50, #EFF6FF)",
}: {
label: string;
value: string;
color?: string;
bg?: string;
}) {
return (
<div style={{
borderRadius: "var(--radius-lg)",
border: "1px solid var(--color-border)",
background: bg,
padding: "1rem 1.25rem",
display: "flex",
flexDirection: "column",
gap: 4,
}}>
<span style={{ fontSize: 11, fontWeight: 600, color: "var(--color-text-muted)" }}>
{label}
</span>
<span style={{ fontSize: 22, fontWeight: 700, color, fontFamily: "var(--font-mono)" }}>
{value}
</span>
</div>
);
}
// ── Page ──────────────────────────────────────────────────────────────────────
export default function TripDetailPage() {
const params = useParams();
const router = useRouter();
const tripId = params?.tripId as string;
const [trip, setTrip] = useState<Trip | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
// ── Modal state ───────────────────────────────────────────────────────────
const [editOpen, setEditOpen] = useState(false);
const [deleteOpen, setDeleteOpen] = useState(false);
const [deleting, setDeleting] = useState(false);
// ── Load trip ─────────────────────────────────────────────────────────────
const loadTrip = useCallback(async () => {
if (!tripId) return;
setLoading(true);
setError(null);
try {
const token = getStoredToken();
const res = await tripService.getById(tripId, token);
setTrip((res as unknown as { data: Trip }).data);
} catch (err: unknown) {
setError(err instanceof Error ? err.message : "تعذّر تحميل بيانات الرحلة.");
} finally {
setLoading(false);
}
}, [tripId]);
useEffect(() => { loadTrip(); }, [loadTrip]);
// ── Edit submit ───────────────────────────────────────────────────────────
const handleEditSubmit = useCallback(
async (
payload: CreateTripPayload | UpdateTripPayload,
_isNew: boolean,
): Promise<boolean> => {
if (!trip) return false;
try {
const token = getStoredToken();
await tripService.update(trip.id, payload as UpdateTripPayload, token);
await loadTrip();
return true;
} catch {
return false;
}
},
[trip, loadTrip],
);
// ── Delete ────────────────────────────────────────────────────────────────
const handleConfirmDelete = useCallback(async () => {
if (!trip) return;
setDeleting(true);
try {
const token = getStoredToken();
await tripService.delete(trip.id, token);
router.back();
} catch {
setDeleting(false);
setDeleteOpen(false);
}
}, [trip, router]);
const statusConfig = trip ? TRIP_STATUS_MAP[trip.status] : null;
// ── Loading ───────────────────────────────────────────────────────────────
if (loading) {
return (
<div style={{ display: "flex", justifyContent: "center", padding: "4rem" }}>
<Spinner size="lg" />
</div>
);
}
// ── Error ─────────────────────────────────────────────────────────────────
if (error || !trip) {
return (
<div style={{ padding: "2rem", textAlign: "center" }}>
<p style={{ fontSize: 14, color: "var(--color-danger)", marginBottom: "1rem" }}>
{error ?? "الرحلة غير موجودة."}
</p>
<button
type="button"
onClick={() => router.back()}
style={{
height: 38, padding: "0 1.25rem",
borderRadius: "var(--radius-md)",
border: "1px solid var(--color-border)",
background: "var(--color-surface)",
fontSize: 13, fontWeight: 600, cursor: "pointer",
fontFamily: "var(--font-sans)",
}}
>
← العودة
</button>
</div>
);
}
return (
<>
<section style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "1.5rem" }}>
{/* ── Header ── */}
<header style={{
borderRadius: "var(--radius-xl)",
border: "1px solid var(--color-border)",
background: "var(--color-surface)",
boxShadow: "var(--shadow-card)",
padding: "1.5rem",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
flexWrap: "wrap",
gap: "1rem",
}}>
{/* Back + trip info */}
<div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
<button
type="button"
onClick={() => router.back()}
style={{
width: 38, height: 38, borderRadius: "var(--radius-md)",
border: "1px solid var(--color-border)",
background: "var(--color-surface-muted)",
display: "flex", alignItems: "center", justifyContent: "center",
cursor: "pointer", flexShrink: 0,
}}
>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
<polyline points="15 18 9 12 15 6" />
</svg>
</button>
{/* Trip icon */}
<div style={{
width: 52, height: 52, borderRadius: "var(--radius-lg)",
background: "var(--color-brand-50, #EFF6FF)",
border: "1px solid var(--color-brand-200, #BFDBFE)",
display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
}}>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#2563EB" strokeWidth="1.8">
<rect x="1" y="3" width="15" height="13" rx="2" />
<path d="M16 8h4l3 5v4h-7V8z" />
<circle cx="5.5" cy="18.5" r="2.5" />
<circle cx="18.5" cy="18.5" r="2.5" />
</svg>
</div>
<div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
<h1 style={{ fontSize: 18, fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>
{trip.title}
</h1>
<div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
<span style={{ fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--color-text-muted)" }}>
{trip.tripNumber}
</span>
{statusConfig && (
<span style={{
borderRadius: "var(--radius-full)",
border: `1px solid ${statusConfig.border}`,
background: statusConfig.bg,
padding: "0.2rem 0.625rem",
fontSize: 11,
fontWeight: 700,
color: statusConfig.color,
display: "inline-flex",
alignItems: "center",
gap: 5,
}}>
<span style={{ width: 6, height: 6, borderRadius: "50%", background: statusConfig.dot, flexShrink: 0 }} />
{statusConfig.label}
</span>
)}
{trip.isDeleted && (
<span style={{
borderRadius: "var(--radius-full)",
border: "1px solid #FECACA",
background: "#FEF2F2",
padding: "0.2rem 0.625rem",
fontSize: 11, fontWeight: 700, color: "#DC2626",
}}>
محذوفة
</span>
)}
</div>
</div>
</div>
{/* Actions */}
<div style={{ display: "flex", gap: "0.75rem" }}>
<button
type="button"
onClick={() => setDeleteOpen(true)}
style={{
height: 40, padding: "0 1.25rem",
borderRadius: "var(--radius-lg)",
border: "1px solid #FECACA",
background: "#FEF2F2",
fontSize: 13, fontWeight: 700, color: "#DC2626",
cursor: "pointer", fontFamily: "var(--font-sans)",
}}
>
حذف الرحلة
</button>
<button
type="button"
onClick={() => setEditOpen(true)}
style={{
height: 40, padding: "0 1.25rem",
borderRadius: "var(--radius-lg)",
border: "none",
background: "var(--color-brand-600)",
fontSize: 13, fontWeight: 700, color: "#FFF",
cursor: "pointer",
display: "flex", alignItems: "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>
</div>
</header>
{/* ── Stats row ── */}
<div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "1rem" }}>
<StatCard
label="المجمّع"
value={String(trip.collectedCount)}
color="#1E40AF"
bg="#EFF6FF"
/>
<StatCard
label="المُسلَّم"
value={String(trip.deliveredCount)}
color="#166534"
bg="#DCFCE7"
/>
<StatCard
label="المُرتجع"
value={String(trip.returnedCount)}
color="#92400E"
bg="#FFFBEB"
/>
<StatCard
label="النقد المحصّل"
value={fmtNumber(trip.totalCashCollected)}
color="#581C87"
bg="#FAF5FF"
/>
</div>
{/* ── Content grid ── */}
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1.5rem" }}>
{/* Basic Info */}
<SectionCard title="بيانات الرحلة">
<DetailRow label="رقم الرحلة" value={trip.tripNumber} mono />
<DetailRow label="العنوان" value={trip.title} />
<DetailRow label="الحالة" value={statusConfig?.label ?? trip.status} />
<DetailRow label="الفرع" value={trip.branch?.name ?? "—"} />
<DetailRow label="وقت البدء" value={fmtDate(trip.startTime)} />
<DetailRow label="وقت الانتهاء" value={fmtDate(trip.endTime)} />
<DetailRow label="سبب الإنهاء" value={trip.endReason ?? "—"} />
</SectionCard>
{/* Driver */}
<SectionCard title="السائق">
{trip.driver ? (
<>
<DetailRow label="الاسم" value={trip.driver.name} />
<DetailRow label="الجوال" value={trip.driver.phone} mono />
<DetailRow label="البريد" value={trip.driver.email ?? "—"} />
<DetailRow label="رقم الرخصة" value={trip.driver.licenseNumber ?? "—"} mono />
<DetailRow label="رقم البطاقة" value={trip.driver.driverCardNumber ?? "—"} mono />
<DetailRow label="الجنسية" value={trip.driver.nationality ?? "—"} />
</>
) : (
<p style={{ fontSize: 13, color: "var(--color-text-muted)", margin: 0 }}>لا توجد بيانات للسائق.</p>
)}
</SectionCard>
{/* Car */}
<SectionCard title="السيارة">
{trip.car ? (
<>
<DetailRow label="الماركة" value={trip.car.manufacturer} />
<DetailRow label="الموديل" value={trip.car.model} />
<DetailRow label="السنة" value={trip.car.year != null ? String(trip.car.year) : "—"} />
<DetailRow label="اللون" value={trip.car.color ?? "—"} />
<DetailRow label="رقم اللوحة" value={trip.car.plateNumber} mono />
<DetailRow label="حروف اللوحة" value={trip.car.plateLetters ?? "—"} mono />
<DetailRow label="نوع اللوحة" value={trip.car.plateType ?? "—"} />
<DetailRow label="رقم التسجيل" value={trip.car.registrationNumber ?? "—"} mono />
</>
) : (
<p style={{ fontSize: 13, color: "var(--color-text-muted)", margin: 0 }}>لا توجد بيانات للسيارة.</p>
)}
</SectionCard>
{/* System Info */}
<SectionCard title="معلومات النظام">
<DetailRow label="تاريخ الإضافة" value={fmtDate(trip.createdAt)} />
<DetailRow label="آخر تحديث" value={fmtDate(trip.updatedAt)} />
{trip.isDeleted && (
<DetailRow label="تاريخ الحذف" value={fmtDate(trip.deletedAt)} />
)}
</SectionCard>
</div>
{/* ── Notes (full width, if any) ── */}
{trip.notes && (
<SectionCard title="الملاحظات">
<p style={{ fontSize: 13, color: "var(--color-text-primary)", lineHeight: 1.7, margin: 0 }}>
{trip.notes}
</p>
</SectionCard>
)}
{/* ── Report section ── */}
<div style={{
borderRadius: "var(--radius-xl)",
border: "1px solid var(--color-border)",
background: "var(--color-surface)",
boxShadow: "var(--shadow-card)",
padding: "1.5rem",
}}>
<TripReportPanel tripId={trip.id} />
</div>
</section>
{/* ── Edit modal ── */}
{editOpen && (
<TripFormModal
editTrip={trip}
onClose={() => setEditOpen(false)}
onSubmit={handleEditSubmit}
/>
)}
{/* ── Delete modal ── */}
{deleteOpen && (
<TripDeleteModal
trip={trip}
deleting={deleting}
onCancel={() => setDeleteOpen(false)}
onConfirm={handleConfirmDelete}
/>
)}
</>
);
}

0
app/trips/page.tsx → app/dashboard/trips/page.tsx
View File

16
app/users/page.tsx → app/dashboard/users/page.tsx
View File

@@ -1,14 +1,14 @@
"use client";
import { useState } from "react";
import { Alert } from "../../Components/UI";
import { UserTable } from "../../Components/User/UserTable";
import { UserFormModal } from "../../Components/User/UserFormModal";
import { UserDetailModal } from "../../Components/User/UserDetailModal";
import { DeleteConfirmModal } from "../../Components/User/DeleteConfirmModal";
import { Toast } from "../../Components/User/Toast";
import { useUsers } from "../../hooks/useUser";
import type { User, UserFormData } from "../../types/user";
import { Alert } from "@/Components/UI";
import { UserTable } from "@/Components/User/UserTable";
import { UserFormModal } from "@/Components/User/UserFormModal";
import { UserDetailModal } from "@/Components/User/UserDetailModal";
import { DeleteConfirmModal } from "@/Components/User/DeleteConfirmModal";
import { Toast } from "@/Components/User/Toast";
import { useUsers } from "@/hooks/useUser";
import type { User, UserFormData } from "@/types/user";
export default function UsersPage() {
// ── Modal state ─────────────────────────────────────────────────────────────

7
app/not_found/page.tsx Normal file
View File

@@ -0,0 +1,7 @@
import React from 'react'
export default function page() {
return (
<div>page</div>
)
}

246
app/page.tsx
View File

@@ -1,5 +1,6 @@
import Link from "next/link";
import Navbar from "./components/layout/Navbar";
import Logo from "@/utils/logo";
const stats = [
{ label: "الطلبات النشطة", value: "48", color: "text-blue-600" },
@@ -33,27 +34,57 @@ const roles = [
tone: "dark",
tag: "مشرف",
title: "تحكم كامل",
items: ["عرض جميع طلبات العملاء", "تحديث حالات الطلبات", "إدارة العملاء والسائقين", "سجل التدقيق", "تعيين الرحلات"],
items: [
"عرض جميع طلبات العملاء",
"تحديث حالات الطلبات",
"إدارة العملاء والسائقين",
"سجل التدقيق",
"تعيين الرحلات",
],
},
{
tone: "blue",
tag: "عميل",
title: "طلباتي",
items: ["إضافة طلبات جديدة", "تتبع الشحنات النشطة", "عرض سجل الطلبات", "إدارة العناوين", "التواصل مع الدعم"],
items: [
"إضافة طلبات جديدة",
"تتبع الشحنات النشطة",
"عرض سجل الطلبات",
"إدارة العناوين",
"التواصل مع الدعم",
],
},
{
tone: "green",
tag: "مستخدم",
title: "وصول ميداني",
items: ["عرض الرحلات المعينة", "تحديث حالة التسليم", "الملف الشخصي", "إعدادات الإشعارات", "تفضيلات التطبيق"],
items: [
"عرض الرحلات المعينة",
"تحديث حالة التسليم",
"الملف الشخصي",
"إعدادات الإشعارات",
"تفضيلات التطبيق",
],
},
];
const faqs = [
{ q: "كيف أنشئ حساب عميل؟", a: "اضغط على “إنشاء حساب عميل” ثم أكمل بياناتك الأساسية لتفعيل الحساب في دقائق." },
{ q: "ماذا يحدث إن أدخلت كلمة مرور خاطئة؟", a: "ستظهر لك رسالة خطأ واضحة مع خيار إعادة المحاولة أو استرجاع كلمة المرور." },
{ q: "هل بياناتي الشخصية محمية؟", a: "نعم، يتم تشفير البيانات باستخدام AES-256-GCM وإجراءات أمان متقدمة." },
{ q: "هل يمكن للعميل رؤية طلبات عملاء آخرين؟", a: "لا، كل عميل يرى فقط طلباته الخاصة ضمن لوحة التحكم المخصصة له." },
{
q: "كيف أنشئ حساب عميل؟",
a: "اضغط على “إنشاء حساب عميل” ثم أكمل بياناتك الأساسية لتفعيل الحساب في دقائق.",
},
{
q: "ماذا يحدث إن أدخلت كلمة مرور خاطئة؟",
a: "ستظهر لك رسالة خطأ واضحة مع خيار إعادة المحاولة أو استرجاع كلمة المرور.",
},
{
q: "هل بياناتي الشخصية محمية؟",
a: "نعم، يتم تشفير البيانات باستخدام AES-256-GCM وإجراءات أمان متقدمة.",
},
{
q: "هل يمكن للعميل رؤية طلبات عملاء آخرين؟",
a: "لا، كل عميل يرى فقط طلباته الخاصة ضمن لوحة التحكم المخصصة له.",
},
];
export default function Home() {
@@ -73,29 +104,53 @@ export default function Home() {
إدارة لوجستية سهلة، توصيل مضمون في كل مرة.
</h1>
<p className="max-w-xl text-[14px] leading-7 text-white/75">
أدِر كل شحنة وعميل وسائق من منصة واحدة آمنة. مصممة للمشرفين والعملاء والمستخدمين الميدانيين.
أدِر كل شحنة وعميل وسائق من منصة واحدة آمنة. مصممة للمشرفين
والعملاء والمستخدمين الميدانيين.
</p>
<div className="flex flex-wrap gap-3">
<Link href="/NewOrder" className="h-11 cursor-pointer rounded-xl pt-3 bg-white px-5 text-[13px] font-semibold text-blue-600 shadow-md">
إنشاء طلب جديد
</Link>
<Link href="/login" className="h-11 pt-3 rounded-xl border border-white/30 bg-white/15 px-5 text-[13px] font-semibold text-white shadow-md backdrop-blur">
<Link
href="/login"
className="h-11 pt-3 rounded-xl border border-white/30 bg-white/15 px-5 text-[13px] font-semibold text-white shadow-md backdrop-blur"
>
تسجيل الدخول للوحة التحكم
</Link>
</div>
</article>
<aside className="w-full max-w-md rounded-2xl border border-white/20 bg-white/12 p-5 shadow-2xl shadow-blue-950/30 backdrop-blur-md">
<p className="text-[11px] uppercase tracking-[0.35em] text-white/60">تغذية الطلبات المباشرة</p>
<p className="text-[11px] uppercase tracking-[0.35em] text-white/60">
تغذية الطلبات المباشرة
</p>
<div className="mt-5 space-y-3">
{[
["SHIP-202606-00142", "في الطريق", "bg-amber-100 text-amber-800"],
["SHIP-202606-00139", "تم التسليم", "bg-emerald-100 text-emerald-800"],
["SHIP-202606-00145", "تم الإنشاء", "bg-blue-100 text-blue-800"],
[
"SHIP-202606-00142",
"في الطريق",
"bg-amber-100 text-amber-800",
],
[
"SHIP-202606-00139",
"تم التسليم",
"bg-emerald-100 text-emerald-800",
],
[
"SHIP-202606-00145",
"تم الإنشاء",
"bg-blue-100 text-blue-800",
],
].map(([code, status, badge]) => (
<div key={code} className="flex items-center justify-between rounded-xl border border-white/10 bg-white/8 px-4 py-3">
<span className="font-mono text-[12px] text-white/90">{code}</span>
<span className={`rounded-full px-3 py-1 text-[11px] font-semibold ${badge}`}>{status}</span>
<div
key={code}
className="flex items-center justify-between rounded-xl border border-white/10 bg-white/8 px-4 py-3"
>
<span className="font-mono text-[12px] text-white/90">
{code}
</span>
<span
className={`rounded-full px-3 py-1 text-[11px] font-semibold ${badge}`}
>
{status}
</span>
</div>
))}
</div>
@@ -110,25 +165,94 @@ export default function Home() {
<section className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-6 py-10 lg:px-8">
<div className="grid gap-4 md:grid-cols-3">
{stats.map((item) => (
<article key={item.label} className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
<p className="text-[11px] uppercase tracking-[0.35em] text-slate-500">{item.label}</p>
<p className={`mt-3 text-[32px] font-extrabold ${item.color}`}>{item.value}</p>
<article
key={item.label}
className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm"
>
<p className="text-[11px] uppercase tracking-[0.35em] text-slate-500">
{item.label}
</p>
<p className={`mt-3 text-[32px] font-extrabold ${item.color}`}>
{item.value}
</p>
</article>
))}
</div>
<article className="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-slate-200 lg:p-8">
<p className="text-[11px] uppercase tracking-[0.35em] text-blue-600">المميزات الأساسية</p>
<h2 className="mt-2 text-[22px] font-extrabold text-slate-900">كل ما يحتاجه فريق اللوجستيك</h2>
<p className="mt-2 text-[14px] text-slate-500">من إدارة الطلبات إلى التتبع المباشر، كل شيء في مكان واحد.</p>
<p className="text-[11px] uppercase tracking-[0.35em] text-blue-600">
المميزات الأساسية
</p>
<h2 className="mt-2 text-[22px] font-extrabold text-slate-900">
كل ما يحتاجه فريق اللوجستيك
</h2>
<p className="mt-2 text-[14px] text-slate-500">
من إدارة الطلبات إلى التتبع المباشر، كل شيء في مكان واحد.
</p>
<div className="mt-6 grid gap-4 md:grid-cols-3">
{features.map((feature) => (
<article key={feature.title} className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
<div className={`mb-4 flex h-11 w-11 items-center justify-center rounded-xl ${feature.tone === "blue" ? "bg-blue-100 text-blue-600" : feature.tone === "emerald" ? "bg-emerald-100 text-emerald-600" : "bg-amber-100 text-amber-600"}`}>
{feature.icon === "truck" ? <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="h-5 w-5"><path d="M3 7h11l3 4h4l-2 4H8" /><circle cx="9" cy="18" r="1.7" fill="currentColor" stroke="none" /><circle cx="18" cy="18" r="1.7" fill="currentColor" stroke="none" /></svg> : feature.icon === "clock" ? <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="h-5 w-5"><circle cx="12" cy="12" r="8" /><path d="M12 7v5l3 2" /></svg> : <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="h-5 w-5"><path d="M16 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2" /><circle cx="9.5" cy="7" r="3" /><path d="M17 8l2 2 4-4" /></svg>}
<article
key={feature.title}
className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm"
>
<div
className={`mb-4 flex h-11 w-11 items-center justify-center rounded-xl ${feature.tone === "blue" ? "bg-blue-100 text-blue-600" : feature.tone === "emerald" ? "bg-emerald-100 text-emerald-600" : "bg-amber-100 text-amber-600"}`}
>
{feature.icon === "truck" ? (
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.8"
className="h-5 w-5"
>
<path d="M3 7h11l3 4h4l-2 4H8" />
<circle
cx="9"
cy="18"
r="1.7"
fill="currentColor"
stroke="none"
/>
<circle
cx="18"
cy="18"
r="1.7"
fill="currentColor"
stroke="none"
/>
</svg>
) : feature.icon === "clock" ? (
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.8"
className="h-5 w-5"
>
<circle cx="12" cy="12" r="8" />
<path d="M12 7v5l3 2" />
</svg>
) : (
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.8"
className="h-5 w-5"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2" />
<circle cx="9.5" cy="7" r="3" />
<path d="M17 8l2 2 4-4" />
</svg>
)}
</div>
<h3 className="text-[16px] font-bold text-slate-900">{feature.title}</h3>
<p className="mt-2 text-[13px] leading-6 text-slate-500">{feature.text}</p>
<h3 className="text-[16px] font-bold text-slate-900">
{feature.title}
</h3>
<p className="mt-2 text-[13px] leading-6 text-slate-500">
{feature.text}
</p>
</article>
))}
</div>
@@ -138,16 +262,35 @@ export default function Home() {
<section className="bg-[#ECEEF2] py-2">
<div className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-6 py-10 lg:px-8">
<article className="text-center">
<p className="text-[11px] uppercase tracking-[0.35em] text-blue-600">أدوار المستخدمين</p>
<h2 className="mt-2 text-[22px] font-extrabold text-slate-900">منصة واحدة، ثلاثة مداخل</h2>
<p className="text-[11px] uppercase tracking-[0.35em] text-blue-600">
أدوار المستخدمين
</p>
<h2 className="mt-2 text-[22px] font-extrabold text-slate-900">
منصة واحدة، ثلاثة مداخل
</h2>
</article>
<div className="grid gap-4 md:grid-cols-3">
{roles.map((role) => (
<article key={role.title} className={`rounded-2xl border p-5 shadow-sm ${role.tone === "dark" ? "border-slate-800 bg-slate-950 text-slate-100" : role.tone === "blue" ? "border-blue-200 bg-blue-50 text-blue-950" : "border-emerald-200 bg-emerald-50 text-emerald-950"}`}>
<span className={`inline-flex rounded-full px-3 py-1 text-[11px] font-semibold ${role.tone === "dark" ? "bg-slate-800 text-slate-200" : role.tone === "blue" ? "bg-blue-100 text-blue-700" : "bg-emerald-100 text-emerald-700"}`}>{role.tag}</span>
<h3 className="mt-3 text-[18px] font-extrabold">{role.title}</h3>
<article
key={role.title}
className={`rounded-2xl border p-5 shadow-sm ${role.tone === "dark" ? "border-slate-800 bg-slate-950 text-slate-800" : role.tone === "blue" ? "border-blue-200 bg-blue-50 text-blue-950" : "border-emerald-200 bg-emerald-50 text-emerald-950"}`}
>
<span
className={`inline-flex rounded-full px-3 py-1 text-[11px] font-semibold ${role.tone === "dark" ? "bg-slate-800 text-slate-200" : role.tone === "blue" ? "bg-blue-100 text-blue-700" : "bg-emerald-100 text-emerald-700"}`}
>
{role.tag}
</span>
<h3 className="mt-3 text-[18px] font-extrabold">
{role.title}
</h3>
<ul className="mt-4 space-y-2 text-[13px] leading-6">
{role.items.map((item) => <li key={item} className="flex items-start gap-2"> <span className="mt-1 text-[12px]">✓</span><span>{item}</span></li>)}
{role.items.map((item) => (
<li key={item} className="flex items-start gap-2">
{" "}
<span className="mt-1 text-[12px]">✓</span>
<span>{item}</span>
</li>
))}
</ul>
</article>
))}
@@ -157,13 +300,24 @@ export default function Home() {
<section className="mx-auto w-full max-w-7xl px-6 py-10 lg:px-8">
<article className="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-slate-200 lg:p-8">
<p className="text-[11px] uppercase tracking-[0.35em] text-blue-600">الأسئلة الشائعة</p>
<h2 className="mt-2 text-[22px] font-extrabold text-slate-900">أسئلة متكررة</h2>
<p className="text-[11px] uppercase tracking-[0.35em] text-blue-600">
الأسئلة الشائعة
</p>
<h2 className="mt-2 text-[22px] font-extrabold text-slate-900">
أسئلة متكررة
</h2>
<div className="mt-6 space-y-3">
{faqs.map((faq) => (
<article key={faq.q} className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
<h3 className="text-[14px] font-bold text-slate-900">{faq.q}</h3>
<p className="mt-2 text-[13px] leading-6 text-slate-500">{faq.a}</p>
<article
key={faq.q}
className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"
>
<h3 className="text-[14px] font-bold text-slate-900">
{faq.q}
</h3>
<p className="mt-2 text-[13px] leading-6 text-slate-500">
{faq.a}
</p>
</article>
))}
</div>
@@ -172,9 +326,13 @@ export default function Home() {
<footer className="bg-[#0F172A] text-white">
<div className="mx-auto flex w-full max-w-7xl flex-col gap-4 px-6 py-6 text-[13px] lg:flex-row lg:items-center lg:justify-between lg:px-8">
<div className="text-right font-extrabold text-white">Slash.so</div>
<div className="text-center text-white/40">© 2026 Slash.so. جميع الحقوق محفوظة.</div>
<div className="flex items-center gap-4 text-white/40">الخصوصية · الشروط · الحالة</div>
<Logo white={true} />
<div className="text-center text-white/40">
© 2026 Slash.sa. جميع الحقوق محفوظة.
</div>
<div className="flex items-center gap-4 text-white/40">
الخصوصية · الشروط · الحالة
</div>
</div>
</footer>
</main>

146
app/register/page.tsx
View File

@@ -1,146 +0,0 @@
"use client";
import Link from "next/link";
import { useMemo, useState } from "react";
export default function RegisterPage() {
const [step, setStep] = useState(1);
const [form, setForm] = useState({ fullName: "", email: "", phone: "", company: "", address: "" });
const [errors, setErrors] = useState<Record<string, string>>({});
const [loading, setLoading] = useState(false);
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const phonePattern = /^\+?[0-9]{10,15}$/;
function validateStep1() {
const nextErrors: Record<string, string> = {};
if (!form.fullName.trim()) nextErrors.fullName = "This field is required.";
if (!form.email.trim()) nextErrors.email = "This field is required.";
else if (!emailPattern.test(form.email)) nextErrors.email = "Please enter a valid email address (e.g. name@domain.com).";
if (!form.phone.trim()) nextErrors.phone = "This field is required.";
else if (!phonePattern.test(form.phone)) nextErrors.phone = "Phone number must be 10–15 digits, with optional country code.";
setErrors(nextErrors);
return Object.keys(nextErrors).length === 0;
}
function handleNext() {
if (validateStep1()) setStep(2);
}
function handleSubmit() {
setLoading(true);
setTimeout(() => {
setLoading(false);
window.location.href = "/client";
}, 600);
}
const progressSteps: Array<[number, string, boolean]> = [
[1, "بياناتك", step >= 1],
[2, "التفضيلات", step >= 2],
[3, "التأكيد", step >= 3],
];
const summaryRows = useMemo(
() => [
["Full Name", form.fullName || "—"],
["Email", form.email || "—"],
["Phone", form.phone || "—"],
["Company", form.company || "—"],
["Address", form.address || "—"],
],
[form],
);
return (
<main className="min-h-screen bg-slate-50 p-6 text-slate-900 md:p-10">
<section className="mx-auto flex w-full max-w-5xl flex-col gap-6">
<header className="flex items-center justify-between gap-3">
<div>
<p className="text-[12px] uppercase tracking-[0.35em] text-blue-600">تسجيل العميل</p>
<h1 className="mt-2 text-[28px] font-bold text-slate-900">إنشاء حساب LogiFlow</h1>
</div>
<Link href="/login" className="rounded-[9px] border border-slate-200 bg-white px-4 py-2 text-sm text-slate-500 hover:bg-slate-100">العودة لتسجيل الدخول</Link>
</header>
<div className="flex items-center gap-3 rounded-[14px] border border-slate-200 bg-white p-4 shadow-sm">
{progressSteps.map(([index, label, done]) => (
<div key={String(index)} className="flex flex-1 items-center gap-3">
<div className={`flex h-8 w-8 items-center justify-center rounded-full border text-[12px] font-bold ${step === index ? "border-blue-600 bg-blue-50 text-blue-600" : done ? "border-emerald-500 bg-emerald-50 text-emerald-600" : "border-slate-200 bg-slate-100 text-slate-400"}`}>
{index}
</div>
<span className={`text-[12px] font-semibold ${step === index ? "text-blue-600" : done ? "text-emerald-600" : "text-slate-500"}`}>{label}</span>
{index < 3 ? <span className="hidden h-px flex-1 bg-slate-200 md:block" /> : null}
</div>
))}
</div>
<article className="rounded-[14px] border border-slate-200 bg-white p-6 shadow-sm md:p-8">
{step === 1 ? (
<div className="space-y-4">
<div>
<h2 className="text-[18px] font-semibold">المعلومات الشخصية</h2>
<p className="text-[13px] text-slate-500">أكمل الحقول المطلوبة للانتقال إلى خطوة التأكيد.</p>
</div>
<div className="grid gap-4 md:grid-cols-2">
<label className="text-[12px] font-semibold uppercase tracking-[0.5px] text-slate-500">الاسم الكامل
<input value={form.fullName} onChange={(e) => setForm({ ...form, fullName: e.target.value })} className="mt-2 h-11 w-full rounded-[9px] border border-slate-200 px-3 text-[14px] text-slate-900" />
{errors.fullName ? <span className="mt-1 block text-[12px] text-red-600">{errors.fullName}</span> : null}
</label>
<label className="text-[12px] font-semibold uppercase tracking-[0.5px] text-slate-500">البريد الإلكتروني
<input value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} className="mt-2 h-11 w-full rounded-[9px] border border-slate-200 px-3 text-[14px] text-slate-900" />
{errors.email ? <span className="mt-1 block text-[12px] text-red-600">{errors.email}</span> : null}
</label>
<label className="text-[12px] font-semibold uppercase tracking-[0.5px] text-slate-500">رقم الهاتف
<input value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} className="mt-2 h-11 w-full rounded-[9px] border border-slate-200 px-3 text-[14px] text-slate-900" />
{errors.phone ? <span className="mt-1 block text-[12px] text-red-600">{errors.phone}</span> : null}
</label>
<label className="text-[12px] font-semibold uppercase tracking-[0.5px] text-slate-500">اسم الشركة
<input value={form.company} onChange={(e) => setForm({ ...form, company: e.target.value })} className="mt-2 h-11 w-full rounded-[9px] border border-slate-200 px-3 text-[14px] text-slate-900" />
</label>
</div>
<label className="block text-[12px] font-semibold uppercase tracking-[0.5px] text-slate-500">العنوان
<textarea value={form.address} onChange={(e) => setForm({ ...form, address: e.target.value })} rows={4} className="mt-2 w-full rounded-[9px] border border-slate-200 px-3 py-2 text-[14px] text-slate-900" />
</label>
<div className="flex gap-3 pt-2">
<Link href="/login" className="flex h-10 flex-1 items-center justify-center rounded-[9px] border border-slate-200 bg-white text-sm font-semibold text-slate-500">رجوع</Link>
<button type="button" onClick={handleNext} className="flex h-10 flex-2 items-center justify-center rounded-[9px] bg-blue-600 text-sm font-semibold text-white hover:bg-blue-700">التالي</button>
</div>
</div>
) : null}
{step === 2 ? (
<div className="space-y-4">
<div>
<h2 className="text-[18px] font-semibold">التفضيلات</h2>
<p className="text-[13px] text-slate-500">راجع التفاصيل الاختيارية وانتقل إلى المراجعة.</p>
</div>
<div className="rounded-[10px] border border-slate-200 bg-slate-100 p-4 text-sm text-slate-500">سيتم إنشاء الحساب بشكل آمن. يتم تشفير البيانات الحساسة أثناء التخزين.</div>
<div className="flex gap-3 pt-2">
<button type="button" onClick={() => setStep(1)} className="flex h-10 flex-1 items-center justify-center rounded-[9px] border border-slate-200 bg-white text-sm font-semibold text-slate-500">رجوع</button>
<button type="button" onClick={() => setStep(3)} className="flex h-10 flex-2 items-center justify-center rounded-[9px] bg-blue-600 text-sm font-semibold text-white hover:bg-blue-700">مراجعة</button>
</div>
</div>
) : null}
{step === 3 ? (
<div className="space-y-4">
<div>
<h2 className="text-[18px] font-semibold">تأكيد وإرسال</h2>
<p className="text-[13px] text-slate-500">راجع بياناتك قبل إنشاء الحساب.</p>
</div>
<table className="w-full overflow-hidden rounded-[10px] border border-slate-200 text-left text-sm">
<tbody>{summaryRows.map(([label, value]) => <tr key={label} className="border-b border-slate-200 last:border-b-0"><td className="bg-slate-100 px-4 py-3 font-semibold text-slate-500">{label}</td><td className="px-4 py-3 text-slate-900">{value}</td></tr>)}</tbody>
</table>
<div className="rounded-[10px] border border-blue-200 bg-blue-50 p-3 text-sm text-slate-900">سيتم إنشاء الحساب بشكل آمن. يتم تشفير البيانات الحساسة أثناء التخزين.</div>
<div className="flex gap-3 pt-2">
<button type="button" onClick={() => setStep(2)} className="flex h-10 flex-1 items-center justify-center rounded-[9px] border border-slate-200 bg-white text-sm font-semibold text-slate-500">رجوع</button>
<button type="button" disabled={loading} onClick={handleSubmit} className="flex h-10 flex-2 items-center justify-center rounded-[9px] bg-emerald-500 text-sm font-semibold text-white hover:bg-emerald-600 disabled:cursor-not-allowed disabled:opacity-70">{loading ? "جاري إنشاء الحساب…" : "إنشاء حسابي"}</button>
</div>
</div>
) : null}
</article>
</section>
</main>
);
}

429
app/users/[userId]/page.tsx
View File

@@ -1,429 +0,0 @@
"use client";
import { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { PageLoader } from "../../../Components/UI/Spinner";
import { Alert } from "../../../Components/UI/Alert";
import { fmtDate } from "../../../utils/helperFun";
import { getStoredToken } from "../../../lib/auth";
import { userService } from "../../../services/user.service";
import type { UserDetail } from "../../../types/user";
// ── helpers ───────────────────────────────────────────────────────────────────
function safeFmtDate(iso: string | null | undefined): string {
if (!iso) return "—";
try {
const d = new Date(iso);
if (isNaN(d.getTime())) return "—";
return fmtDate(iso);
} catch {
return "—";
}
}
// ── sub-components ────────────────────────────────────────────────────────────
function SectionCard({ title, children }: { title: string; children: React.ReactNode }) {
return (
<div style={{
background: "var(--color-surface)",
border: "1px solid var(--color-border)",
borderRadius: "var(--radius-xl)",
boxShadow: "var(--shadow-card)",
overflow: "hidden",
}}>
<div style={{
padding: "0.875rem 1.5rem",
borderBottom: "1px solid var(--color-border)",
background: "var(--color-surface-muted)",
}}>
<p style={{
margin: 0,
fontSize: 11,
fontWeight: 700,
textTransform: "uppercase",
letterSpacing: "0.2em",
color: "var(--color-text-muted)",
}}>
{title}
</p>
</div>
<div style={{ padding: "1.25rem 1.5rem" }}>
{children}
</div>
</div>
);
}
function Field({ label, children }: { label: string; children: React.ReactNode }) {
return (
<div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
<span style={{
fontSize: 11,
fontWeight: 600,
color: "var(--color-text-muted)",
textTransform: "uppercase",
letterSpacing: "0.15em",
}}>
{label}
</span>
<span style={{
fontSize: 13,
color: "var(--color-text-primary)",
fontFamily: "var(--font-sans)",
}}>
{children}
</span>
</div>
);
}
function ActiveBadge({ active }: { active: boolean }) {
return (
<span style={{
display: "inline-flex", alignItems: "center", gap: 5,
borderRadius: "var(--radius-full)",
border: active ? "1px solid #BBF7D0" : "1px solid #FECACA",
background: active ? "#DCFCE7" : "#FEF2F2",
padding: "0.2rem 0.75rem",
fontSize: 12, fontWeight: 600,
color: active ? "#166534" : "#991B1B",
}}>
<span style={{ width: 6, height: 6, borderRadius: "50%", background: active ? "#16A34A" : "#DC2626" }} />
{active ? "نشط" : "معطل"}
</span>
);
}
function DeletedBadge({ deleted }: { deleted: boolean }) {
if (!deleted) return (
<span style={{
display: "inline-flex", alignItems: "center", gap: 5,
borderRadius: "var(--radius-full)",
border: "1px solid #BBF7D0",
background: "#DCFCE7",
padding: "0.2rem 0.75rem",
fontSize: 12, fontWeight: 600,
color: "#166534",
}}>
<span style={{ width: 6, height: 6, borderRadius: "50%", background: "#16A34A" }} />
موجود
</span>
);
return (
<span style={{
display: "inline-flex", alignItems: "center", gap: 5,
borderRadius: "var(--radius-full)",
border: "1px solid #FECACA",
background: "#FEF2F2",
padding: "0.2rem 0.75rem",
fontSize: 12, fontWeight: 600,
color: "#991B1B",
}}>
<span style={{ width: 6, height: 6, borderRadius: "50%", background: "#DC2626" }} />
محذوف
</span>
);
}
// eye icon
function EyeIcon({ open }: { open: boolean }) {
if (open) return (
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" />
<path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" />
<line x1="1" y1="1" x2="23" y2="23" />
</svg>
);
return (
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
<circle cx="12" cy="12" r="3" />
</svg>
);
}
// silhouette fallback avatar
function AvatarFallback() {
return (
<div style={{
width: 80, height: 80, borderRadius: "50%",
background: "var(--color-brand-100)",
border: "2px solid var(--color-brand-200)",
display: "flex", alignItems: "center", justifyContent: "center",
flexShrink: 0,
}}>
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#2563EB" strokeWidth="1.5">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
<circle cx="12" cy="7" r="4" />
</svg>
</div>
);
}
// ── main page ─────────────────────────────────────────────────────────────────
export default function UserDetailPage() {
const params = useParams();
const router = useRouter();
const userId = typeof params?.userId === "string" ? params.userId : null;
const [user, setUser] = useState<UserDetail | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [showToken, setShowToken] = useState(false);
useEffect(() => {
if (!userId) {
router.replace("/users");
return;
}
let cancelled = false;
async function fetchUser() {
try {
const token = getStoredToken();
const res = await userService.getById(userId as string, token);
if (!cancelled) {
setUser((res as { data: UserDetail }).data ?? null);
}
} catch {
if (!cancelled) setError("تعذّر تحميل بيانات المستخدم. يرجى المحاولة لاحقاً.");
} finally {
if (!cancelled) setLoading(false);
}
}
fetchUser();
return () => { cancelled = true; };
}, [userId, router]);
// reset token visibility on unmount
useEffect(() => () => { setShowToken(false); }, []);
if (loading) return <PageLoader message="جارٍ تحميل بيانات المستخدم…" />;
if (error || !user) {
return (
<div dir="rtl" style={{ padding: "2rem", maxWidth: 560 }}>
<Alert
type="error"
title="خطأ في التحميل"
message={error ?? "المستخدم غير موجود."}
/>
<a
href="/users"
style={{
display: "inline-block", marginTop: "1rem",
fontSize: 13, fontWeight: 600,
color: "var(--color-brand-600)",
textDecoration: "underline",
}}
>
← العودة إلى قائمة المستخدمين
</a>
</div>
);
}
return (
<div dir="rtl" style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
{/* soft-deleted warning banner */}
{user.isDeleted && (
<div style={{
display: "flex", alignItems: "center", gap: 10,
background: "#FEF2F2", border: "1px solid #FECACA",
borderRadius: "var(--radius-lg)", padding: "0.875rem 1.25rem",
fontSize: 13, fontWeight: 600, color: "#991B1B",
}}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<circle cx="12" cy="12" r="10" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
هذا المستخدم محذوف — تم حذفه بتاريخ {safeFmtDate(user.deletedAt)}.
</div>
)}
{/* page header */}
<header style={{
background: "var(--color-surface)",
border: "1px solid var(--color-border)",
borderRadius: "var(--radius-xl)",
boxShadow: "var(--shadow-card)",
padding: "1.5rem 2rem",
}}>
<a
href="/users"
style={{
display: "inline-flex", alignItems: "center", gap: 6,
fontSize: 12, fontWeight: 600,
color: "var(--color-brand-600)",
textDecoration: "none", marginBottom: "1rem",
}}
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
<polyline points="15 18 9 12 15 6" />
</svg>
العودة إلى المستخدمين
</a>
<div style={{ display: "flex", alignItems: "center", gap: "1.25rem", flexWrap: "wrap" }}>
{/* avatar */}
{user.photo
? <img src={user.photo} alt={user.name} style={{ width: 80, height: 80, borderRadius: "50%", objectFit: "cover", border: "2px solid var(--color-brand-200)", flexShrink: 0 }} />
: <AvatarFallback />
}
<div>
<p style={{ margin: 0, fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600 }}>
ملف المستخدم
</p>
<h1 style={{ margin: "4px 0 6px", fontSize: "1.4rem", fontWeight: 700, color: "var(--color-text-primary)" }}>
{user.name}
</h1>
<div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
{user.userName && (
<span style={{
fontFamily: "var(--font-mono)", fontSize: 12,
color: "#2563EB", fontWeight: 600,
background: "#EFF6FF", border: "1px solid #BFDBFE",
borderRadius: "var(--radius-sm)", padding: "2px 8px",
}}>
@{user.userName}
</span>
)}
<ActiveBadge active={user.isActive} />
<DeletedBadge deleted={user.isDeleted} />
</div>
</div>
</div>
</header>
{/* grid layout */}
<div style={{
display: "grid",
gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
gap: "1.25rem",
}}>
{/* Basic Info */}
<SectionCard title="المعلومات الأساسية">
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
<Field label="الاسم الكامل">{user.name}</Field>
<Field label="البريد الإلكتروني">
{user.email
? <span style={{ direction: "ltr", display: "inline-block" }}>{user.email}</span>
: "—"
}
</Field>
<Field label="رقم الهاتف">
<span style={{ direction: "ltr", display: "inline-block", fontFamily: "var(--font-mono)" }}>
{user.phone || "—"}
</span>
</Field>
<Field label="المعرف">
<span style={{
fontFamily: "var(--font-mono)", fontSize: 11,
color: "var(--color-text-muted)", wordBreak: "break-all",
}}>
{user.id}
</span>
</Field>
</div>
</SectionCard>
{/* Role & Branch */}
<SectionCard title="الدور والفرع">
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
<Field label="الدور">
<span style={{
display: "inline-flex", alignItems: "center",
borderRadius: "var(--radius-full)",
border: "1px solid #BFDBFE",
background: "#EFF6FF",
padding: "0.2rem 0.75rem",
fontSize: 12, fontWeight: 600,
color: "#1D4ED8",
}}>
{user.role?.name ?? "—"}
</span>
</Field>
{user.role?.description && (
<Field label="وصف الدور">
<span style={{ color: "var(--color-text-secondary)" }}>
{user.role.description}
</span>
</Field>
)}
<Field label="الفرع">{user.branch?.name ?? "—"}</Field>
</div>
</SectionCard>
{/* Account Status */}
<SectionCard title="حالة الحساب">
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
<Field label="الحالة"><ActiveBadge active={user.isActive} /></Field>
<Field label="حالة الحذف"><DeletedBadge deleted={user.isDeleted} /></Field>
<Field label="تاريخ الإنشاء">{safeFmtDate(user.createdAt)}</Field>
<Field label="آخر تحديث">{safeFmtDate(user.updatedAt)}</Field>
<Field label="تاريخ الحذف">{safeFmtDate(user.deletedAt)}</Field>
<Field label="آخر تغيير لكلمة المرور">{safeFmtDate(user.passwordChangedAt)}</Field>
</div>
</SectionCard>
{/* Refresh Token */}
<SectionCard title="رمز التحديث">
{user.refreshToken ? (
<div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
<div style={{
display: "flex", alignItems: "center", justifyContent: "space-between",
background: "var(--color-surface-muted)",
border: "1px solid var(--color-border)",
borderRadius: "var(--radius-md)",
padding: "0.625rem 0.875rem",
gap: "0.75rem",
}}>
<span style={{
fontFamily: "var(--font-mono)", fontSize: 12,
color: "var(--color-text-secondary)",
wordBreak: "break-all", flex: 1,
letterSpacing: showToken ? "normal" : "0.15em",
}}>
{showToken ? user.refreshToken : "••••••••••••••••••••••••"}
</span>
<button
type="button"
onClick={() => setShowToken(p => !p)}
title={showToken ? "إخفاء الرمز" : "إظهار الرمز"}
aria-label={showToken ? "إخفاء رمز التحديث" : "إظهار رمز التحديث"}
style={{
flexShrink: 0,
width: 30, height: 30,
borderRadius: "var(--radius-sm)",
border: "1px solid var(--color-border)",
background: "var(--color-surface)",
color: "var(--color-text-muted)",
cursor: "pointer",
display: "inline-flex", alignItems: "center", justifyContent: "center",
transition: "opacity 150ms",
}}
>
<EyeIcon open={showToken} />
</button>
</div>
<p style={{ margin: 0, fontSize: 11, color: "var(--color-text-hint)" }}>
هذا الرمز حساس — لا تشاركه مع أي أحد.
</p>
</div>
) : (
<p style={{
margin: 0, fontSize: 13,
color: "var(--color-text-muted)",
fontStyle: "italic",
}}>
غير متاح
</p>
)}
</SectionCard>
</div>
</div>
);
}

217
hooks/useCars.ts Normal file
View File

@@ -0,0 +1,217 @@
"use client";
// hooks/useCars.ts
// All custom hooks for the Car module.
import { useCallback, useEffect, useState } from "react";
import { getStoredToken } from "../lib/auth";
import { carService } from "../services/car.service";
import { get } from "../services/api";
import type {
Car,
CarImage,
CarListResponse,
CreateCarPayload,
ImageStage,
ToastMsg,
UpdateCarPayload,
} from "../types/car";
// ── useCars ───────────────────────────────────────────────────────────────────
// Manages the paginated car list for the main page.
export function useCars(page: number, search: string) {
const [cars, setCars] = useState<Car[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [total, setTotal] = useState(0);
const [pages, setPages] = useState(1);
const loadCars = useCallback(() => {
const token = getStoredToken();
setLoading(true);
setError(null);
const query = `?page=${page}&limit=12${search ? `&search=${encodeURIComponent(search)}` : ""}`;
get<CarListResponse>(`cars${query}`, token)
.then((res) => {
const payload = (res as unknown as { data: CarListResponse["data"] }).data ?? res;
setCars((payload as CarListResponse["data"]).data ?? []);
setTotal((payload as CarListResponse["data"]).meta?.total ?? 0);
setPages((payload as CarListResponse["data"]).meta?.pages ?? 1);
})
.catch((err: Error) => setError(err.message))
.finally(() => setLoading(false));
}, [page, search]);
useEffect(() => { loadCars(); }, [loadCars]);
// Optimistic removal after delete
const removeCar = useCallback((id: string) => {
setCars(prev => prev.filter(c => c.id !== id));
setTotal(prev => Math.max(0, prev - 1));
}, []);
return { cars, loading, error, total, pages, loadCars, removeCar, setError };
}
// ── useCarDetail ──────────────────────────────────────────────────────────────
// Fetches a single car by ID — used in CarDetailPanel.
export function useCarDetail(carId: string) {
const [car, setCar] = useState<Car | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
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]);
return { car, loading, error };
}
// ── useCarMutations ───────────────────────────────────────────────────────────
// Create, update, and delete operations — used in the main page.
interface UseCarMutationsOptions {
onSuccess: (msg: string) => void;
onError: (msg: string) => void;
onDeleted: (id: string) => void;
getEditTarget: () => Car | null;
}
export function useCarMutations({
onSuccess,
onError,
onDeleted,
getEditTarget,
}: UseCarMutationsOptions) {
const [deleting, setDeleting] = useState(false);
const handleFormSubmit = useCallback(async (
payload: CreateCarPayload | UpdateCarPayload,
isNew: boolean,
): Promise<boolean> => {
const token = getStoredToken();
try {
if (isNew) {
await carService.create(payload as CreateCarPayload, token);
onSuccess("تم إضافة المركبة بنجاح.");
} else {
const editTarget = getEditTarget();
if (!editTarget) return false;
await carService.update(editTarget.id, payload as UpdateCarPayload, token);
onSuccess("تم تحديث بيانات المركبة.");
}
return true;
} catch (err: unknown) {
onError(err instanceof Error ? err.message : "فشلت العملية.");
return false;
}
}, [onSuccess, onError, getEditTarget]);
const handleDeleteConfirm = useCallback(async (target: Car) => {
setDeleting(true);
const token = getStoredToken();
try {
await carService.delete(target.id, token);
onDeleted(target.id);
onSuccess(`تم حذف ${target.manufacturer} ${target.model} بنجاح.`);
} catch (err: unknown) {
onError(err instanceof Error ? err.message : "فشل الحذف.");
} finally {
setDeleting(false);
}
}, [onSuccess, onError, onDeleted]);
return { deleting, handleFormSubmit, handleDeleteConfirm };
}
// ── useToast ──────────────────────────────────────────────────────────────────
// Simple toast notification state.
export function useToast(duration = 3500) {
const [toast, setToast] = useState<ToastMsg | null>(null);
const notify = useCallback((t: ToastMsg) => {
setToast(t);
setTimeout(() => setToast(null), duration);
}, [duration]);
return { toast, notify };
}
// ── useCarImages ──────────────────────────────────────────────────────────────
// Manages gallery images — used in CarImageGallery.
export function useCarImages(carId: string, sortBy: "asc" | "desc") {
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 fetchImages = useCallback(async () => {
setLoading(true);
setError(null);
try {
const token = getStoredToken();
const res = await carService.getImages(carId, 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);
}
}, [carId, sortBy]);
useEffect(() => { fetchImages(); }, [fetchImages]);
const uploadImages = useCallback(async (files: File[], stage: ImageStage) => {
setUploading(true);
setError(null);
try {
const token = getStoredToken();
await carService.uploadImages(carId, files, stage, token);
await fetchImages();
} catch (err: unknown) {
setError(err instanceof Error ? err.message : "فشل رفع الصور");
} finally {
setUploading(false);
}
}, [carId, fetchImages]);
const deleteImage = useCallback(async (imageId: string) => {
setDeleting(imageId);
setError(null);
try {
const token = getStoredToken();
await carService.deleteImage(imageId, token);
setImages(prev => prev.filter(img => img.id !== imageId));
return true;
} catch (err: unknown) {
setError(err instanceof Error ? err.message : "فشل حذف الصورة");
return false;
} finally {
setDeleting(null);
}
}, []);
return {
images,
loading,
uploading,
deleting,
error,
setError,
fetchImages,
uploadImages,
deleteImage,
};
}

45
package-lock.json generated
View File

@@ -10,7 +10,8 @@
"dependencies": {
"next": "16.2.7",
"react": "19.2.4",
"react-dom": "19.2.4"
"react-dom": "19.2.4",
"yup": "^1.7.1"
},
"devDependencies": {
"@tailwindcss/postcss": "^4.3.0",
@@ -5514,6 +5515,12 @@
"react-is": "^16.13.1"
}
},
"node_modules/property-expr": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
"integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==",
"license": "MIT"
},
"node_modules/punycode": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -6209,6 +6216,12 @@
"url": "https://opencollective.com/webpack"
}
},
"node_modules/tiny-case": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
"integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==",
"license": "MIT"
},
"node_modules/tinyglobby": {
"version": "0.2.17",
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
@@ -6270,6 +6283,12 @@
"node": ">=8.0"
}
},
"node_modules/toposort": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
"integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==",
"license": "MIT"
},
"node_modules/ts-api-utils": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.5.0.tgz",
@@ -6328,6 +6347,18 @@
"node": ">= 0.8.0"
}
},
"node_modules/type-fest": {
"version": "2.19.0",
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
"integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
"license": "(MIT OR CC0-1.0)",
"engines": {
"node": ">=12.20"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/typed-array-buffer": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
@@ -6684,6 +6715,18 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/yup": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/yup/-/yup-1.7.1.tgz",
"integrity": "sha512-GKHFX2nXul2/4Dtfxhozv701jLQHdf6J34YDh2cEkpqoo8le5Mg6/LrdseVLrFarmFygZTlfIhHx/QKfb/QWXw==",
"license": "MIT",
"dependencies": {
"property-expr": "^2.0.5",
"tiny-case": "^1.0.3",
"toposort": "^2.0.2",
"type-fest": "^2.19.0"
}
},
"node_modules/zod": {
"version": "4.4.3",
"resolved": "https://registry.npmjs.org/zod/-/zod-4.4.3.tgz",

3
package.json
View File

@@ -11,7 +11,8 @@
"dependencies": {
"next": "16.2.7",
"react": "19.2.4",
"react-dom": "19.2.4"
"react-dom": "19.2.4",
"yup": "^1.7.1"
},
"devDependencies": {
"@tailwindcss/postcss": "^4.3.0",

2
services/car.service.ts
View File

@@ -1,5 +1,3 @@
import { get, post, patch, del } from "./api";
import type {
Car,

6
services/driver.service.ts
View File

@@ -4,7 +4,7 @@
// - src/routes/driver.route.js → /api/v1/driver/...
// - src/routes/driver_report.route.js → /api/v1/drivers/:id/reports/daily
import { get, post, put, del } from "./api";
import { get, post, put, del, patch } from "./api";
import type {
Driver,
DriverListResponse,
@@ -81,7 +81,7 @@ export const driverService = {
* Requires: "update-driver" permission
*/
update: (id: string, payload: UpdateDriverPayload, token: string | null) =>
put<{ data: Driver }>(`driver/${id}`, payload, token),
patch<{ data: Driver }>(`driver/${id}`, payload, token),
/**
* DELETE /driver/:id
@@ -101,7 +101,7 @@ export const driverService = {
*/
getDailyReport: (id: string, date: string, token: string | null) =>
get<DriverReportResponse>(
`driver/${id}/reports/daily?date=${encodeURIComponent(date)}`,
`drivers/${id}/reports/daily?date=${encodeURIComponent(date)}`,
token,
),

114
services/trip.service.ts Normal file
View File

@@ -0,0 +1,114 @@
// services/trip.service.ts
// All API calls for the Trip module.
// Endpoints extracted from: trip_api_reference.html → /api/v1/trips/...
// Follows the exact same pattern as services/driver.service.ts.
import { get, post, patch, del } from "./api";
import type {
Trip,
TripListResponse,
TripDetailResponse,
TripReportResponse,
CreateTripPayload,
UpdateTripPayload,
TripListParams,
} from "@/types/trip";
/** Build a query string for list endpoints */
function buildQuery(
params: Record<string, string | number | undefined>,
): string {
const entries = Object.entries(params).filter(
([, v]) => v !== undefined && v !== "",
);
if (!entries.length) return "";
return (
"?" +
entries
.map(([k, v]) => `${k}=${encodeURIComponent(String(v))}`)
.join("&")
);
}
export const tripService = {
/**
* GET /trips
* Fetch paginated + filterable + searchable trip list.
* Requires: "read-trip" permission
*/
getAll: (params: TripListParams = {}, token: string | null) =>
get<TripListResponse>(`trips${buildQuery({ ...params })}`, token),
/**
* GET /trips/archived
* Fetch soft-deleted (archived) trips. Same filters as getAll.
* Requires: "read-deleted-trip" permission
*/
getArchived: (params: TripListParams = {}, token: string | null) =>
get<TripListResponse>(`trips/archived${buildQuery({ ...params })}`, token),
/**
* GET /trips/archived/:id
* Fetch a single archived trip with full details.
* Requires: "read-deleted-trip" permission
*/
getArchivedById: (id: string, token: string | null) =>
get<TripDetailResponse>(`trips/archived/${id}`, token),
/**
* GET /trips/:id
* Fetch a single trip with full driver/car details.
* Requires: "read-trip" permission
*/
getById: (id: string, token: string | null) =>
get<TripDetailResponse>(`trips/${id}`, token),
/**
* POST /trips
* Create a new trip.
* Side effect: driver & car flip to status "InTrip" automatically.
* Requires: "create-trip" permission
*/
create: (payload: CreateTripPayload, token: string | null) =>
post<{ data: Trip }>("trips", payload, token),
/**
* PATCH /trips/:id
* Update trip data / status / reassign driver or car.
* Side effects:
* - changing driverId: old driver -> Active, new driver -> InTrip
* - changing carId: same logic for cars
* - status Completed/Cancelled: driver & car both -> Active
* Requires: "update-trip" permission
*/
update: (id: string, payload: UpdateTripPayload, token: string | null) =>
patch<{ data: Trip }>(`trips/${id}`, payload, token),
/**
* DELETE /trips/:id
* Soft-delete a trip (isDeleted=true, deletedAt=now()). 204 No Content.
* Requires: "delete-trip" permission
*/
delete: (id: string, token: string | null) =>
del<void>(`trips/${id}`, token),
// ── Reports ───────────────────────────────────────────────────────────────
/**
* GET /trips/:id/reports
* Generate the Trip Manifest report (HTML, saved server-side).
* Returns { reportUrl }
* Requires: "generate-trip-report" permission
*/
getReport: (id: string, token: string | null) =>
get<TripReportResponse>(`trips/${id}/reports`, token),
/**
* GET /trips/:id/reports/client/:clientId
* Generate a client-filtered version of the trip report.
* Returns { reportUrl }
* Requires: "generate-trip-report" permission
*/
getClientReport: (id: string, clientId: string, token: string | null) =>
get<TripReportResponse>(`trips/${id}/reports/client/${clientId}`, token),
};

86
types/car.ts
View File

@@ -6,7 +6,54 @@ export type InsuranceStatus = "Valid" | "Expired" | "NotInsured";
export type ImpoundStatus = "None" | string;
export type ImageStage = "BEFORE" | "AFTER" | "GENERAL";
// ── Core Car ────────────────────────────────────────────────────────────────
// ── Status display config ────────────────────────────────────────────────────
// Used by page.tsx (CarCard) and CarDetailPanel
export const STATUS_MAP: Record<
CarStatus,
{ label: string; color: string; bg: string; border: string; dot: string }
> = {
Active: { label: "نشط", color: "#166534", bg: "#DCFCE7", border: "#BBF7D0", dot: "#16A34A" },
InMaintenance: { label: "صيانة", color: "#854D0E", bg: "#FFFBEB", border: "#FDE68A", dot: "#D97706" },
InTrip: { label: "في رحلة", color: "#1E40AF", bg: "#EFF6FF", border: "#BFDBFE", dot: "#3B82F6" },
Inactive: { label: "غير نشط", color: "#64748B", bg: "#F1F5F9", border: "#E2E8F0", dot: "#94A3B8" },
};
export const INS_MAP: Record<InsuranceStatus, { label: string; color: string }> = {
Valid: { label: "سارٍ", color: "#16A34A" },
Expired: { label: "منتهي", color: "#DC2626" },
NotInsured: { label: "غير مؤمَّن", color: "#D97706" },
};
// ── Stage display config ─────────────────────────────────────────────────────
// Used by CarImageGallery
export 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" },
};
// ── Shared date helpers ───────────────────────────────────────────────────────
export function fmtDate(iso?: string | null): string {
if (!iso) return "—";
return new Date(iso).toLocaleDateString("ar-SA", {
year: "numeric", month: "long", day: "numeric",
});
}
export function fmtDateShort(iso?: string | null): string {
if (!iso) return "—";
return new Date(iso).toLocaleDateString("ar-SA", {
year: "numeric", month: "short", day: "numeric",
});
}
/** Returns true if the date is within 90 days in the future (or already past) */
export function isExpiringSoon(iso?: string | null): boolean {
if (!iso) return false;
return (new Date(iso).getTime() - Date.now()) / 86_400_000 <= 90;
}
// ── Core Car ─────────────────────────────────────────────────────────────────
export interface Car {
id: string;
@@ -66,7 +113,7 @@ export interface CarStatusHistoryEntry {
createdAt: string;
}
// ── Car Image ────────────────────────────────────────────────────────────────
// ── Car Image ─────────────────────────────────────────────────────────────────
export interface CarImage {
id: string;
@@ -82,7 +129,7 @@ export interface CarImage {
isDeleted: boolean;
}
// ── Payloads ────────────────────────────────────────────────────────────────
// ── Payloads ──────────────────────────────────────────────────────────────────
export interface CreateCarPayload {
manufacturer: string;
@@ -118,7 +165,7 @@ export interface CreateCarPayload {
export type UpdateCarPayload = Partial<CreateCarPayload> & { isActive?: boolean };
// ── API Responses ────────────────────────────────────────────────────────────
// ── API Responses ─────────────────────────────────────────────────────────────
export interface CarListResponse {
data: {
@@ -136,7 +183,7 @@ export interface CarImageListResponse {
data: CarImage[];
}
// ── Form state ───────────────────────────────────────────────────────────────
// ── Form state ────────────────────────────────────────────────────────────────
export interface CarFormErrors {
manufacturer?: string;
@@ -147,3 +194,32 @@ export interface CarFormErrors {
registrationNumber?: string;
vinNumber?: string;
}
// ── Toast ─────────────────────────────────────────────────────────────────────
export interface ToastMsg {
type: "success" | "error";
message: string;
}
// — CarFormErrors ──────────────────────────────────
export interface CarFormErrors {
manufacturer?: string;
model?: string;
year?: string;
color?: string;
plateNumber?: string;
plateLetters?: string;
plateType?: string;
registrationNumber?: string;
vinNumber?: string;
branchId?: string;
currentStatus?: string;
insuranceStatus?: string;
registrationExpiryDate?: string;
insuranceExpiryDate?: string;
inspectionExpiryDate?: string;
gpsDeviceId?: string;
capacity?: string;
weight?: string;
}

3
types/driver.ts
View File

@@ -34,6 +34,9 @@ export interface Driver {
createdAt: string;
updatedAt: string;
isDeleted?: boolean;
photoUrl?: string | null;
nationalPhotoUrl?: string | null;
driverCardPhotoUrl?: string | null;
}
export interface DriverStatusHistoryEntry {

160
types/trip.ts Normal file
View File

@@ -0,0 +1,160 @@
// types/trip.ts
// Mirrors the structure of types/driver.ts.
// Source of truth for endpoint shapes: trip_api_reference.html (/api/v1/trips)
export type TripStatus = "Scheduled" | "InProgress" | "Completed" | "Cancelled";
// ── Embedded summaries returned inside Trip responses ───────────────────────
// NOTE: Car has no dedicated types/car.ts in this handoff — these summaries
// are inferred from the response field list in trip_api_reference.html.
// If a real types/car.ts already exists in the project, prefer importing
// from there instead of duplicating this shape.
export interface TripDriverSummary {
id?: string;
name: string;
userName?: string | null;
email?: string | null;
address?: string | null;
nationality?: string | null;
nationalId?: string | null;
gosiNumber?: string | null;
phone: string;
licenseNumber?: string | null;
driverCardNumber?: string | null;
}
export interface TripCarSummary {
id?: string;
manufacturer: string;
model: string;
year?: number | null;
color?: string | null;
plateNumber: string;
plateLetters?: string | null;
plateType?: string | null;
registrationNumber?: string | null;
ownerNationalId?: string | null;
}
export interface TripBranchSummary {
id?: string;
name: string;
}
// ── Core Trip ─────────────────────────────────────────────────────────────
export interface Trip {
id: string;
tripNumber: string;
title: string;
startTime?: string | null;
endTime?: string | null;
status: TripStatus;
collectedCount: number;
deliveredCount: number;
returnedCount: number;
totalCashCollected?: number | string | null;
notes?: string | null;
endReason?: string | null;
isDeleted?: boolean;
deletedAt?: string | null;
driverId?: string;
carId?: string;
branchId?: string | null;
driver?: TripDriverSummary | null;
car?: TripCarSummary | null;
branch?: TripBranchSummary | null;
createdAt: string;
updatedAt: string;
}
// ── Payloads ─────────────────────────────────────────────────────────────────
export interface CreateTripPayload {
title: string;
driverId: string;
carId: string;
startTime?: string;
endTime?: string;
branchId?: string;
status?: TripStatus;
collectedCount?: number;
deliveredCount?: number;
returnedCount?: number;
totalCashCollected?: number | string;
notes?: string;
endReason?: string;
}
export type UpdateTripPayload = Partial<CreateTripPayload> & {
/** Reason for changing driverId/carId — recorded in history. Update-only field. */
reason?: string;
};
// ── List query params (GET /trips) ───────────────────────────────────────────
export interface TripListParams {
status?: TripStatus;
driverId?: string;
carId?: string;
branchId?: string;
/** Searches across tripNumber, status, title, carId, driverId */
search?: string;
sort?: "createdAt" | "tripNumber" | "status" | "startTime" | "endTime";
page?: number;
limit?: number;
}
// ── API Responses ─────────────────────────────────────────────────────────────
export interface TripListResponse {
data: {
data: Trip[];
pagination: { total: number; page: number; limit: number; totalPages: number };
};
}
export interface TripDetailResponse {
data: Trip;
}
export interface TripReportResponse {
data: {
reportUrl: string;
};
}
// ── Form state ────────────────────────────────────────────────────────────────
export interface TripFormErrors {
title?: string;
driverId?: string;
carId?: string;
startTime?: string;
endTime?: string;
branchId?: string;
status?: string;
collectedCount?: string;
deliveredCount?: string;
returnedCount?: string;
totalCashCollected?: string;
notes?: string;
endReason?: string;
reason?: string;
}
// ── Status display config (mirrors DRIVER_STATUS_MAP) ───────────────────────
export const TRIP_STATUS_MAP: Record<
TripStatus,
{ label: string; color: string; bg: string; border: string; dot: string }
> = {
Scheduled: { label: "مجدولة", color: "#1E40AF", bg: "#EFF6FF", border: "#BFDBFE", dot: "#3B82F6" },
InProgress: { label: "جارية", color: "#92400E", bg: "#FFFBEB", border: "#FDE68A", dot: "#D97706" },
Completed: { label: "مكتملة", color: "#166534", bg: "#DCFCE7", border: "#BBF7D0", dot: "#16A34A" },
Cancelled: { label: "ملغاة", color: "#991B1B", bg: "#FEF2F2", border: "#FECACA", dot: "#DC2626" },
};

236
validations/car.validator.ts Normal file
View File

@@ -0,0 +1,236 @@
import * as yup from "yup";
// ── Enums (mirror backend) ────────────────────────────────────────────────────
const INSURANCE_STATUSES = ["Valid", "Expired", "NotInsured"] as const;
const CAR_STATUSES = ["Active", "InMaintenance", "InTrip", "Inactive"] as const;
const IMPOUND_STATUSES = ["None", "Impounded"] as const;
const IMAGE_STAGES = ["BEFORE", "AFTER", "GENERAL"] as const;
// ── Shared date helper ────────────────────────────────────────────────────────
// <input type="date"> gives "YYYY-MM-DD"; validate as a real date string
const dateString = yup
.string()
.test(
"valid-date",
"تاريخ غير صالح",
(val) => {
if (!val) return true; // optional
return !isNaN(Date.parse(val));
},
)
;
// ── Create schema ─────────────────────────────────────────────────────────────
export const createCarSchema = yup.object({
// Required
manufacturer: yup
.string()
.required("الشركة المصنعة مطلوبة")
.min(2, "اسم الشركة يجب أن يكون حرفين على الأقل"),
model: yup
.string()
.required("الموديل مطلوب")
.min(1, "الموديل مطلوب"),
year: yup
.number()
.typeError("سنة الصنع يجب أن تكون رقماً")
.required("سنة الصنع مطلوبة")
.integer("سنة الصنع يجب أن تكون رقماً صحيحاً")
.min(1900, "سنة الصنع غير صالحة")
.max(new Date().getFullYear() + 1, "سنة الصنع غير صالحة"),
plateNumber: yup
.string()
.required("رقم اللوحة مطلوب")
.min(1, "رقم اللوحة مطلوب"),
plateLetters: yup
.string()
.required("حروف اللوحة مطلوبة")
.min(1, "حروف اللوحة مطلوبة"),
registrationNumber: yup.string().required("رقم التسجيل مطلوب ").min(4,"رقم التسجيل لا يقل عن 4 ارقام"),
vinNumber: yup.string().required(" رقم الهيكل مطلوب").min(4,"رقم الهيكل لا يقل عن 4 ارقام"),
// Optional
color: yup.string().optional(),
plateType: yup.string().optional(),
ownerNationalId: yup.string().optional(),
branchId: yup
.string()
.uuid("معرّف الفرع غير صالح")
.optional(),
currentStatus: yup
.mixed<typeof CAR_STATUSES[number]>()
.oneOf([...CAR_STATUSES], "حالة المركبة غير صالحة")
.optional(),
insuranceStatus: yup
.mixed<typeof INSURANCE_STATUSES[number]>()
.oneOf([...INSURANCE_STATUSES], "حالة التأمين غير صالحة")
.optional(),
currentImpoundStatus: yup
.mixed<typeof IMPOUND_STATUSES[number]>()
.oneOf([...IMPOUND_STATUSES], "حالة الحجز غير صالحة")
.optional(),
registrationExpiryDate: dateString,
insuranceExpiryDate: dateString,
inspectionExpiryDate: dateString,
operationCardExpiry: dateString,
registrationIssueDate: dateString,
ownershipStartDate: dateString,
actualUserStartDate: dateString,
gpsDeviceId: yup.string().optional(),
operationCardNumber: yup.string().optional(),
capacity: yup
.number()
.typeError("الطاقة الاستيعابية يجب أن تكون رقماً")
.integer("الطاقة الاستيعابية يجب أن تكون رقماً صحيحاً")
.min(0, "الطاقة الاستيعابية يجب أن تكون 0 أو أكثر")
.optional(),
weight: yup
.number()
.typeError("الوزن يجب أن يكون رقماً")
.integer("الوزن يجب أن يكون رقماً صحيحاً")
.min(0, "الوزن يجب أن يكون 0 أو أكثر")
.optional(),
});
// ── Update schema (all optional except enums still validated) ─────────────────
export const updateCarSchema = yup.object({
manufacturer: yup
.string()
.min(2, "اسم الشركة يجب أن يكون حرفين على الأقل")
.optional(),
model: yup.string().optional(),
year: yup
.number()
.typeError("سنة الصنع يجب أن تكون رقماً")
.integer("سنة الصنع يجب أن تكون رقماً صحيحاً")
.min(1900, "سنة الصنع غير صالحة")
.max(new Date().getFullYear() + 1, "سنة الصنع غير صالحة")
.optional(),
plateNumber: yup.string().optional(),
plateLetters: yup.string().optional(),
color: yup.string().optional(),
plateType: yup.string().optional(),
registrationNumber: yup.string().optional(),
vinNumber: yup.string().optional(),
ownerNationalId: yup.string().optional(),
branchId: yup
.string()
.uuid("معرّف الفرع غير صالح")
.optional(),
currentStatus: yup
.mixed<typeof CAR_STATUSES[number]>()
.oneOf([...CAR_STATUSES], "حالة المركبة غير صالحة")
.optional(),
insuranceStatus: yup
.mixed<typeof INSURANCE_STATUSES[number]>()
.oneOf([...INSURANCE_STATUSES], "حالة التأمين غير صالحة")
.optional(),
currentImpoundStatus: yup
.mixed<typeof IMPOUND_STATUSES[number]>()
.oneOf([...IMPOUND_STATUSES], "حالة الحجز غير صالحة")
.optional(),
isActive: yup.boolean().optional(),
registrationExpiryDate: dateString,
insuranceExpiryDate: dateString,
inspectionExpiryDate: dateString,
operationCardExpiry: dateString,
registrationIssueDate: dateString,
ownershipStartDate: dateString,
actualUserStartDate: dateString,
gpsDeviceId: yup.string().optional(),
operationCardNumber: yup.string().optional(),
capacity: yup
.number()
.typeError("الطاقة الاستيعابية يجب أن تكون رقماً")
.integer("الطاقة الاستيعابية يجب أن تكون رقماً صحيحاً")
.min(0, "الطاقة الاستيعابية يجب أن تكون 0 أو أكثر")
.optional(),
weight: yup
.number()
.typeError("الوزن يجب أن يكون رقماً")
.integer("الوزن يجب أن يكون رقماً صحيحاً")
.min(0, "الوزن يجب أن يكون 0 أو أكثر")
.optional(),
});
// ── Car image schema (from carImage.validator.js) ─────────────────────────────
export const addCarImagesSchema = yup.object({
stage: yup
.mixed<typeof IMAGE_STAGES[number]>()
.oneOf([...IMAGE_STAGES], "مرحلة الصورة غير صالحة")
.optional(),
maintenanceId: yup
.string()
.uuid("معرّف الصيانة غير صالح")
.optional(),
});
// ── Infer form error shape ────────────────────────────────────────────────────
export type CarSchemaErrors = Partial<
Record<
| "manufacturer"
| "model"
| "year"
| "color"
| "plateNumber"
| "plateLetters"
| "plateType"
| "registrationNumber"
| "vinNumber"
| "ownerNationalId"
| "branchId"
| "currentStatus"
| "insuranceStatus"
| "currentImpoundStatus"
| "isActive"
| "registrationExpiryDate"
| "insuranceExpiryDate"
| "inspectionExpiryDate"
| "operationCardExpiry"
| "registrationIssueDate"
| "ownershipStartDate"
| "actualUserStartDate"
| "gpsDeviceId"
| "operationCardNumber"
| "capacity"
| "weight"
| "stage"
| "maintenanceId",
string
>
>;

207
validations/driver.validator.ts Normal file
View File

@@ -0,0 +1,207 @@
import * as yup from "yup"
import type { NationalIdType, DriverCardType } from "../types/driver";
// ── Create schema ─────────────────────────────────────────────────────────────
export const createDriverSchema = yup.object({
// Required
name: yup
.string()
.required("الاسم مطلوب")
.min(2, "الاسم يجب أن يكون حرفين على الأقل"),
phone: yup
.string()
.required("رقم الجوال مطلوب")
.matches(
/^(\+966|966|0)?5[0-9]{8}$/,
"رقم الجوال غير صالح — يجب أن يكون رقم سعودي صحيح",
),
// Optional
email: yup
.string()
.email("البريد الإلكتروني غير صالح")
.optional(),
address: yup
.string()
.min(5, "العنوان يجب أن يكون 5 أحرف على الأقل")
.optional(),
nationality: yup
.string()
.min(5, "الجنسية يجب أن تكون 5 أحرف على الأقل")
.optional(),
nationalIdType: yup
.mixed<NationalIdType>()
.oneOf(["NationalID", "Iqama", "Passport"], "نوع الهوية غير صالح")
.optional(),
gosiNumber: yup.string().optional(),
licenseNumber: yup.string().optional(),
licenseType: yup.string().optional(),
licenseExpiry: yup
.string()
.test(
"not-in-past",
"تاريخ انتهاء الرخصة يجب أن يكون اليوم أو في المستقبل",
(val) => {
if (!val) return true; // optional
return new Date(val) >= new Date(new Date().toDateString());
},
)
.optional(),
driverCardNumber: yup.string().optional(),
driverCardType: yup
.mixed<DriverCardType>()
.oneOf(
["Temporary", "Seasonal", "Annual", "Restricted"],
"نوع بطاقة السائق غير صالح",
)
.optional(),
driverCardExpiry: yup
.string()
.test(
"not-in-past",
"تاريخ انتهاء بطاقة السائق يجب أن يكون اليوم أو في المستقبل",
(val) => {
if (!val) return true;
return new Date(val) >= new Date(new Date().toDateString());
},
)
.optional(),
driverType: yup.string().optional(),
branchId: yup
.string()
.uuid("معرّف الفرع غير صالح")
.optional(),
});
// ── Update schema (same rules, all optional except they don't change) ─────────
export const updateDriverSchema = yup.object({
name: yup
.string()
.min(2, "الاسم يجب أن يكون حرفين على الأقل")
.optional(),
phone: yup
.string()
.matches(
/^(\+966|966|0)?5[0-9]{8}$/,
"رقم الجوال غير صالح — يجب أن يكون رقم سعودي صحيح",
)
.optional(),
email: yup
.string()
.email("البريد الإلكتروني غير صالح")
.optional(),
address: yup
.string()
.min(5, "العنوان يجب أن يكون 5 أحرف على الأقل")
.optional(),
nationality: yup
.string()
.min(5, "الجنسية يجب أن تكون 5 أحرف على الأقل")
.optional(),
nationalIdType: yup
.mixed<NationalIdType>()
.oneOf(["NationalID", "Iqama", "Passport"], "نوع الهوية غير صالح")
.optional(),
gosiNumber: yup.string().optional(),
licenseNumber: yup.string().optional(),
licenseType: yup.string().optional(),
licenseExpiry: yup
.string()
.test(
"not-in-past",
"تاريخ انتهاء الرخصة يجب أن يكون اليوم أو في المستقبل",
(val) => {
if (!val) return true;
return new Date(val) >= new Date(new Date().toDateString());
},
)
.optional(),
driverCardNumber: yup.string().optional(),
driverCardType: yup
.mixed<DriverCardType>()
.oneOf(
["Temporary", "Seasonal", "Annual", "Restricted"],
"نوع بطاقة السائق غير صالح",
)
.optional(),
driverCardExpiry: yup
.string()
.test(
"not-in-past",
"تاريخ انتهاء بطاقة السائق يجب أن يكون اليوم أو في المستقبل",
(val) => {
if (!val) return true;
return new Date(val) >= new Date(new Date().toDateString());
},
)
.optional(),
driverType: yup.string().optional(),
branchId: yup
.string()
.uuid("معرّف الفرع غير صالح")
.optional(),
status: yup
.mixed<"Active" | "Inactive" | "InTrip" | "Suspended">()
.oneOf(
["Active", "Inactive", "InTrip", "Suspended"],
"حالة السائق غير صالحة",
)
.optional(),
reason: yup.string().optional(),
});
// ── Infer form error shape ────────────────────────────────────────────────────
export type DriverSchemaErrors = Partial<
Record<
| "name"
| "phone"
| "email"
| "address"
| "nationality"
| "nationalIdType"
| "gosiNumber"
| "licenseNumber"
| "licenseType"
| "licenseExpiry"
| "driverCardNumber"
| "driverCardType"
| "driverCardExpiry"
| "driverType"
| "branchId"
| "status"
| "reason",
string
>
>;

194
validations/trip.validator.ts Normal file
View File

@@ -0,0 +1,194 @@
import * as yup from "yup";
import type { TripStatus } from "@/types/trip";
const TRIP_STATUSES: TripStatus[] = [
"Scheduled",
"InProgress",
"Completed",
"Cancelled",
];
// NOTE: Unlike driver_validator.ts, there is no actual backend trip validator
// file in this handoff. The rules below come from trip_api_reference.html
// (marked "// doc") plus a few sensible defaults that are NOT explicitly
// stated in the reference (marked "// inferred"). Verify the "inferred" ones
// against the real backend validator before relying on them.
// ── Create schema ─────────────────────────────────────────────────────────────
export const createTripSchema = yup.object({
// Required
title: yup
.string()
.required("عنوان الرحلة مطلوب")
.min(3, "عنوان الرحلة يجب أن يكون 3 أحرف على الأقل"), // doc
driverId: yup
.string()
.required("السائق مطلوب")
.uuid("معرّف السائق غير صالح"), // doc: UUID, driver must be status=Active (enforced server-side)
carId: yup
.string()
.required("السيارة مطلوبة")
.uuid("معرّف السيارة غير صالح"), // doc: UUID, car must be status=Active (enforced server-side)
// Optional
startTime: yup.string().optional(), // doc: ISO 8601, default now()
endTime: yup
.string()
.optional()
.test(
"after-start",
"وقت الانتهاء يجب أن يكون بعد وقت البدء",
function (val) {
if (!val) return true;
const { startTime } = this.parent;
if (!startTime) return true;
return new Date(val) > new Date(startTime); // inferred
},
),
branchId: yup.string().uuid("معرّف الفرع غير صالح").optional(), // doc
status: yup
.mixed<TripStatus>()
.oneOf(TRIP_STATUSES, "حالة الرحلة غير صالحة")
.optional(), // doc: default Scheduled
collectedCount: yup
.number()
.typeError("القيمة يجب أن تكون رقم")
.integer("القيمة يجب أن تكون رقم صحيح")
.min(0, "القيمة لا يمكن أن تكون سالبة") // inferred
.optional(),
deliveredCount: yup
.number()
.typeError("القيمة يجب أن تكون رقم")
.integer("القيمة يجب أن تكون رقم صحيح")
.min(0, "القيمة لا يمكن أن تكون سالبة") // inferred
.optional(),
returnedCount: yup
.number()
.typeError("القيمة يجب أن تكون رقم")
.integer("القيمة يجب أن تكون رقم صحيح")
.min(0, "القيمة لا يمكن أن تكون سالبة") // inferred
.optional(),
totalCashCollected: yup
.number()
.typeError("القيمة يجب أن تكون رقم")
.min(0, "القيمة لا يمكن أن تكون سالبة") // inferred
.optional(), // doc: number | string -> Decimal server-side
notes: yup
.string()
.min(2, "الملاحظات يجب أن تكون حرفين على الأقل") // doc
.optional(),
endReason: yup
.string()
.min(2, "سبب الانتهاء يجب أن يكون حرفين على الأقل") // doc
.optional(),
});
// ── Update schema (same rules, all optional + reason) ─────────────────────────
export const updateTripSchema = yup.object({
title: yup
.string()
.min(3, "عنوان الرحلة يجب أن يكون 3 أحرف على الأقل")
.optional(),
driverId: yup.string().uuid("معرّف السائق غير صالح").optional(), // doc: must be Active
carId: yup.string().uuid("معرّف السيارة غير صالح").optional(), // doc: must be Active
status: yup
.mixed<TripStatus>()
.oneOf(TRIP_STATUSES, "حالة الرحلة غير صالحة")
.optional(),
startTime: yup.string().optional(),
endTime: yup
.string()
.optional()
.test(
"after-start",
"وقت الانتهاء يجب أن يكون بعد وقت البدء",
function (val) {
if (!val) return true;
const { startTime } = this.parent;
if (!startTime) return true;
return new Date(val) > new Date(startTime); // inferred
},
),
branchId: yup.string().uuid("معرّف الفرع غير صالح").optional(),
collectedCount: yup
.number()
.typeError("القيمة يجب أن تكون رقم")
.integer("القيمة يجب أن تكون رقم صحيح")
.min(0, "القيمة لا يمكن أن تكون سالبة")
.optional(),
deliveredCount: yup
.number()
.typeError("القيمة يجب أن تكون رقم")
.integer("القيمة يجب أن تكون رقم صحيح")
.min(0, "القيمة لا يمكن أن تكون سالبة")
.optional(),
returnedCount: yup
.number()
.typeError("القيمة يجب أن تكون رقم")
.integer("القيمة يجب أن تكون رقم صحيح")
.min(0, "القيمة لا يمكن أن تكون سالبة")
.optional(),
totalCashCollected: yup
.number()
.typeError("القيمة يجب أن تكون رقم")
.min(0, "القيمة لا يمكن أن تكون سالبة")
.optional(),
notes: yup
.string()
.min(2, "الملاحظات يجب أن تكون حرفين على الأقل")
.optional(),
endReason: yup
.string()
.min(2, "سبب الانتهاء يجب أن يكون حرفين على الأقل")
.optional(),
// Update-only: reason for reassigning driver/car (recorded in history)
reason: yup.string().optional(), // doc: no explicit min length stated
});
// ── Infer form error shape ────────────────────────────────────────────────────
export type TripSchemaErrors = Partial<
Record<
| "title"
| "driverId"
| "carId"
| "status"
| "startTime"
| "endTime"
| "branchId"
| "collectedCount"
| "deliveredCount"
| "returnedCount"
| "totalCashCollected"
| "notes"
| "endReason"
| "reason",
string
>
>;

90
validations/user.validator.ts Normal file
View File

@@ -0,0 +1,90 @@
import * as yup from "yup";
// ── Phone regex — same as backend ─────────────────────────────────────────────
const SAUDI_PHONE_RE = /^(\+966|966|0)?5[0-9]{8}$/;
// ── Create schema ─────────────────────────────────────────────────────────────
export const createUserSchema = yup.object({
name: yup
.string()
.required("الاسم الكامل مطلوب")
.min(2, "الاسم يجب أن يكون حرفين على الأقل"),
phone: yup
.string()
.required("رقم الهاتف مطلوب")
.matches(SAUDI_PHONE_RE, "رقم الجوال غير صالح — يجب أن يكون رقم سعودي صحيح"),
email: yup
.string()
.email("البريد الإلكتروني غير صالح")
.optional(),
password: yup
.string()
.required("كلمة المرور مطلوبة")
.min(8, "كلمة المرور يجب أن تكون 8 أحرف على الأقل"),
roleId: yup
.string()
.required("الدور مطلوب")
.uuid("معرّف الدور غير صالح"),
branchId: yup
.string()
.uuid("معرّف الفرع غير صالح")
.optional(),
});
// ── Update schema ─────────────────────────────────────────────────────────────
export const updateUserSchema = yup.object({
name: yup
.string()
.min(2, "الاسم يجب أن يكون حرفين على الأقل")
.optional(),
phone: yup
.string()
.matches(SAUDI_PHONE_RE, "رقم الجوال غير صالح — يجب أن يكون رقم سعودي صحيح")
.optional(),
email: yup
.string()
.email("البريد الإلكتروني غير صالح")
.optional(),
// password is optional on update — only sent if user wants to change it
password: yup
.string()
.min(8, "كلمة المرور يجب أن تكون 8 أحرف على الأقل")
.optional(),
isActive: yup.boolean().optional(),
roleId: yup
.string()
.uuid("معرّف الدور غير صالح")
.optional(),
branchId: yup
.string()
.uuid("معرّف الفرع غير صالح")
.optional(),
});
// ── Infer form error shape ────────────────────────────────────────────────────
export type UserSchemaErrors = Partial<
Record<
| "name"
| "phone"
| "email"
| "password"
| "roleId"
| "branchId"
| "isActive",
string
>
>;