497 lines
22 KiB
TypeScript
497 lines
22 KiB
TypeScript
"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>
|
||
);
|
||
} |