{ if (e.target === e.currentTarget) onClose(); }}
+ role="dialog"
+ aria-modal="true"
+ aria-labelledby="archived-trips-title"
+ onClick={(e) => {
+ if (e.target === e.currentTarget) onClose();
+ }}
style={{
- position: "fixed", inset: 0, zIndex: 70,
- background: "rgba(15,23,42,0.6)", backdropFilter: "blur(4px)",
- display: "flex", alignItems: "flex-start", justifyContent: "center",
- padding: "2rem 1rem", overflowY: "auto",
+ position: "fixed",
+ inset: 0,
+ zIndex: 70,
+ background: "rgba(15,23,42,0.6)",
+ backdropFilter: "blur(4px)",
+ display: "flex",
+ alignItems: "flex-start",
+ justifyContent: "center",
+ padding: "2rem 1rem",
+ overflowY: "auto",
}}
>
e.stopPropagation()}
+ onClick={(e) => e.stopPropagation()}
style={{
- width: "100%", maxWidth: 920,
+ width: "100%",
+ maxWidth: 920,
background: "var(--color-surface-sunken)",
borderRadius: "var(--radius-xl)",
border: "1px solid var(--color-border)",
@@ -88,62 +96,98 @@ function ArchivedTripsModal({ onClose }: { onClose: () => void }) {
overflow: "hidden",
}}
>
- {/* header */}
-
-
+
+
أرشيف الرحلات
-
- {/* body */}
-
router.push(`/dashboard/trips/${trip.id}`)} />
+ // Was pointing at the normal trip page — send it to the archived
+ route instead
+
+ router.push(`/dashboard/trips/archived/${trip.id}`)
+ }
+ />
);
}
-// ── Page ─────────────────────────────────────────────────────────────────────
+// ── Page ──────────────────────────────────────────────────────────────────────
export default function TripsPage() {
const router = useRouter();
+
+ // All list state + mutations now come from the hook, same as useDrivers
+ // is used on the Driver page. No direct tripService calls in this file.
const {
- trips, total, pages, loading, error,
- page, setPage,
- search, handleSearch,
- status, handleStatusFilter,
- reload,
+ trips,
+ total,
+ pages,
+ loading,
+ error,
+ page,
+ setPage,
+ search,
+ handleSearch,
+ status,
+ handleStatusFilter,
+ createTrip,
+ updateTrip,
+ deleteTrip,
+ notification,
+ dismissNotification,
+ clearError,
} = useTrips();
- // ── Notifications (standalone — fired explicitly by every action below) ──
- const [notification, setNotification] = useState
(null);
- const timerRef = useRef | null>(null);
+ const [showForm, setShowForm] = useState(false);
+ const [editTrip, setEditTrip] = useState(null);
+ const [deleteTarget, setDeleteTarget] = useState(null);
+ const [deleting, setDeleting] = useState(false);
+ const [archiveOpen, setArchiveOpen] = useState(false);
- const notify = useCallback((n: ToastNotification) => {
- if (timerRef.current) clearTimeout(timerRef.current);
- setNotification(n);
- timerRef.current = setTimeout(() => setNotification(null), 4000);
- }, []);
-
- const dismissNotification = useCallback(() => {
- if (timerRef.current) clearTimeout(timerRef.current);
- setNotification(null);
- }, []);
-
- useEffect(() => () => { if (timerRef.current) clearTimeout(timerRef.current); }, []);
-
- // Local input value is debounced before it reaches the hook's `search`,
- // exactly like the table reloads only after the user stops typing.
+ // Debounced search input, same pattern as the Driver page's search box
const [searchInput, setSearchInput] = useState(search);
useEffect(() => {
const t = setTimeout(() => handleSearch(searchInput), 400);
@@ -151,283 +195,539 @@ export default function TripsPage() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [searchInput]);
- const [showForm, setShowForm] = useState(false);
- const [editTrip, setEditTrip] = useState(null);
- const [deleteTarget, setDeleteTarget] = useState(null);
- const [deleting, setDeleting] = useState(false);
- // Archive browser modal open/closed
- const [archiveOpen, setArchiveOpen] = useState(false);
+ const handleEdit = useCallback((trip: Trip) => {
+ setEditTrip(trip);
+ setShowForm(true);
+ }, []);
- // ── Create / update — calls tripService directly and notifies explicitly ──
+ const handleDelete = useCallback((trip: Trip) => {
+ setDeleteTarget(trip);
+ }, []);
+
+ // ── Create / update — delegates to the hook (hook fires the toast) ───────
const handleSubmit = async (
payload: CreateTripPayload | UpdateTripPayload,
isNew: boolean,
): Promise => {
- try {
- const token = getStoredToken();
- if (isNew) {
- await tripService.create(payload as CreateTripPayload, token);
- notify({ type: "success", message: "تم إضافة الرحلة بنجاح." });
- } else {
- await tripService.update(editTrip!.id, payload as UpdateTripPayload, token);
- notify({ type: "success", message: "تم تحديث بيانات الرحلة بنجاح." });
- }
- reload();
- return true;
- } catch (err) {
- notify({
- type: "error",
- message: extractApiMessage(err, isNew ? "تعذّر إضافة الرحلة." : "تعذّر تحديث الرحلة."),
- });
- return false;
+ if (isNew) {
+ return createTrip(payload as CreateTripPayload);
}
+ return updateTrip(editTrip!.id, payload as UpdateTripPayload);
};
- const handleDelete = async () => {
+ // ── Delete confirm — delegates to the hook ────────────────────────────────
+ const handleConfirmDelete = async () => {
if (!deleteTarget) return;
setDeleting(true);
- try {
- const token = getStoredToken();
- await tripService.delete(deleteTarget.id, token);
- notify({ type: "success", message: "تم حذف الرحلة بنجاح." });
- setDeleteTarget(null);
- reload();
- } catch (err) {
- notify({ type: "error", message: extractApiMessage(err, "تعذّر حذف الرحلة.") });
- } finally {
- setDeleting(false);
- }
+ const ok = await deleteTrip(deleteTarget.id);
+ setDeleting(false);
+ if (ok) setDeleteTarget(null);
};
return (
-
-
+
{/* ── Header ── */}
-
-
-
الرحلات
-
- إدارة جدولة الرحلات وتتبع حالتها
-
-
-
-
-
-
-
-
- {/* ── Filters ── */}
-
-
setSearchInput(e.target.value)}
- placeholder="بحث برقم الرحلة أو العنوان…"
- dir="rtl"
+
+
-
-
+ إدارة العمليات
+
+
+
+
+
+ الرحلات
+
+
+ إجمالي{" "}
+
+ {total}
+ {" "}
+ رحلة مسجلة
+
+
- {/* ── Table card ── */}
-
+
+ {/* Search */}
+
+
+
setSearchInput(e.target.value)}
+ dir="rtl"
+ style={{
+ width: "100%",
+ height: 40,
+ paddingRight: 36,
+ paddingLeft: 12,
+ borderRadius: "var(--radius-lg)",
+ border: "1px solid var(--color-border)",
+ background: "var(--color-surface)",
+ fontSize: 13,
+ color: "var(--color-text-primary)",
+ outline: "none",
+ fontFamily: "var(--font-sans)",
+ }}
+ />
+
+
+ {/* Status filter */}
+
+
+ {/* Archive button */}
+
+
+ {/* Add button */}
+
+
+
+
+
+
+ {/* ── Error handling: Alert banner for list/API errors ──
+ Same pattern as the Driver page: a persistent banner tied to the
+ hook's `error` state, dismissible via `clearError`. */}
+ {error &&
}
+
+ {/* ── Table ── */}
+
+
+ رقم الرحلة
+ العنوان
+ السائق
+ السيارة
+ الحالة
+ البدء
+ الانتهاء
+ إجراءات
+
{loading ? (
-
-
-
- ) : error ? (
-
- ⚠ {error}
+
+
+ جارٍ التحميل…
) : trips.length === 0 ? (
-
- لا توجد رحلات مطابقة
-
+
+ لا توجد رحلات مطابقة {search && `لـ "${search}"`}
+
) : (
-
-
-
-
- {["رقم الرحلة", "العنوان", "السائق", "السيارة", "الحالة", "البدء", "الانتهاء", "إجراءات"].map(h => (
- | {h} |
- ))}
-
-
-
- {trips.map((trip, i) => (
- router.push(`/dashboard/trips/${trip.id}`)}
- style={{
- borderBottom: i < trips.length - 1 ? "1px solid var(--color-border)" : "none",
- cursor: "pointer",
- transition: "background 0.15s",
- }}
- onMouseEnter={e => (e.currentTarget.style.background = "var(--color-surface-muted)")}
- onMouseLeave={e => (e.currentTarget.style.background = "")}
- >
- |
-
- {trip.tripNumber}
-
- |
-
-
- {trip.title}
-
- |
-
- {trip.driver?.name ?? "—"}
- |
-
- {trip.car ? `${trip.car.manufacturer} ${trip.car.model}` : "—"}
- |
-
-
- |
-
- {trip.startTime ? new Date(trip.startTime).toLocaleString("ar-SA", { dateStyle: "short", timeStyle: "short" }) : "—"}
- |
-
- {trip.endTime ? new Date(trip.endTime).toLocaleString("ar-SA", { dateStyle: "short", timeStyle: "short" }) : "—"}
- |
- e.stopPropagation()}>
-
-
-
- |
-
- ))}
-
-
-
- )}
-
- {/* ── Pagination ── */}
- {pages > 1 && (
-
-
- {total} رحلة — صفحة {page} من {pages}
-
-
- {[...Array(pages)].map((_, idx) => (
-
);
-}
\ No newline at end of file
+}
diff --git a/src/Components/Admen/admen.tsx b/src/Components/Car_Maintanance/CarMaintananceDeleteModal.tsx
similarity index 100%
rename from src/Components/Admen/admen.tsx
rename to src/Components/Car_Maintanance/CarMaintananceDeleteModal.tsx
diff --git a/src/Components/Car_Maintanance/CarMaintananceDetailPanel.tsx b/src/Components/Car_Maintanance/CarMaintananceDetailPanel.tsx
new file mode 100644
index 0000000..6bb2743
--- /dev/null
+++ b/src/Components/Car_Maintanance/CarMaintananceDetailPanel.tsx
@@ -0,0 +1,278 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { Spinner } from "../UI";
+import { CarMaintenanceFormModal } from "./CarMaintananceFormModal";
+import { CarMaintenanceDeleteModal } from "./CarMaintananceDeleteModal";
+import {
+ useCarMaintenanceList,
+ useCarMaintenanceMutations,
+ useMaintenanceToast,
+} from "@/src/hooks/UseCarsMaintanance";
+import {
+ MAINTENANCE_STATUS_MAP,
+ fmtDate,
+ fmtCost,
+ durationDays,
+ getMaintenanceStatus,
+} from "@/src/types/carMaintanance";
+import type {
+ CarMaintenance,
+ CreateMaintenancePayload,
+ UpdateMaintenancePayload,
+} from "@/src/types/carMaintanance";
+
+// ── Toast ─────────────────────────────────────────────────────────────────────
+// Small floating message that confirms an action worked (or explains why it didn't).
+
+function MaintenanceToast({ notification }: { notification: { type: "success" | "error"; message: string } | null }) {
+ if (!notification) return null;
+ const ok = notification.type === "success";
+ return (
+
+
+ {ok ? "✓" : "⚠"}
+ {notification.message}
+
+
+ );
+}
+
+// ── Record card ───────────────────────────────────────────────────────────────
+
+function MaintenanceCard({
+ record,
+ onEdit,
+ onDelete,
+}: {
+ record: CarMaintenance;
+ onEdit: () => void;
+ onDelete: () => void;
+}) {
+ const status = MAINTENANCE_STATUS_MAP[getMaintenanceStatus(record)];
+
+ return (
+
+
+
+ {record.reason}
+
+
+ {status.label}
+
+
+
+
+
+ التكلفة
+ {fmtCost(record.cost)}
+
+
+ المدة
+ {durationDays(record.startAt, record.endAt)} يوم
+
+
+ تاريخ البدء
+ {fmtDate(record.startAt)}
+
+
+ تاريخ الانتهاء
+ {fmtDate(record.endAt)}
+
+
+
+
+
+
+
+
+ );
+}
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+
+interface CarMaintenanceDetailPanelProps {
+ carId: string;
+ /** e.g. "تويوتا لاند كروزر — أ ب ج 1234", shown in the header. */
+ carLabel?: string;
+ onClose: () => void;
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function CarMaintenanceDetailPanel({ carId, carLabel, onClose }: CarMaintenanceDetailPanelProps) {
+ const { records, loading, error, loadRecords, removeRecord } = useCarMaintenanceList(carId);
+ const { toast, notify } = useMaintenanceToast();
+
+ const [formTarget, setFormTarget] = useState
(false); // false = closed
+ const [deleteTarget, setDeleteTarget] = useState(null);
+
+ const getEditTarget = useCallback(
+ () => (formTarget instanceof Object && formTarget !== null ? (formTarget as CarMaintenance) : null),
+ [formTarget],
+ );
+
+ const { deleting, handleFormSubmit, handleDeleteConfirm } = useCarMaintenanceMutations({
+ carId,
+ onSuccess: (msg) => { notify({ type: "success", message: msg }); loadRecords(); },
+ onError: (msg) => notify({ type: "error", message: msg }),
+ onDeleted: (id) => { removeRecord(id); setDeleteTarget(null); },
+ getEditTarget,
+ });
+
+ useEffect(() => {
+ const h = (e: KeyboardEvent) => { if (e.key === "Escape" && formTarget === false && !deleteTarget) onClose(); };
+ window.addEventListener("keydown", h);
+ return () => window.removeEventListener("keydown", h);
+ }, [formTarget, deleteTarget, onClose]);
+
+ const totalCost = records.reduce((sum, r) => sum + (r.cost ?? 0), 0);
+
+ return (
+ <>
+
+
+ {/* Backdrop */}
+
+
+ {/* Panel */}
+
+
+ {/* Nested modals */}
+ {formTarget !== false && (
+ setFormTarget(false)}
+ onSubmit={(payload: CreateMaintenancePayload | UpdateMaintenancePayload, isNew: boolean) =>
+ handleFormSubmit(payload, isNew)
+ }
+ />
+ )}
+
+ {deleteTarget && (
+ setDeleteTarget(null)}
+ onConfirm={() => handleDeleteConfirm(deleteTarget)}
+ />
+ )}
+
+ );
+}
\ No newline at end of file
diff --git a/src/Components/Car_Maintanance/CarMaintananceFormModal.tsx b/src/Components/Car_Maintanance/CarMaintananceFormModal.tsx
new file mode 100644
index 0000000..0db26a7
--- /dev/null
+++ b/src/Components/Car_Maintanance/CarMaintananceFormModal.tsx
@@ -0,0 +1,300 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import * as yup from "yup";
+import { Alert, Spinner } from "../UI";
+import {
+ createMaintenanceSchema,
+ updateMaintenanceSchema,
+} from "@/src/validations/carMaintanance.validator";
+import type {
+ CarMaintenance,
+ CreateMaintenancePayload,
+ MaintenanceFormErrors,
+ UpdateMaintenancePayload,
+} from "@/src/types/carMaintanance";
+
+// ── Shared input style ────────────────────────────────────────────────────────
+
+const inputBase: React.CSSProperties = {
+ width: "100%",
+ height: 40,
+ padding: "0 0.75rem",
+ borderRadius: "var(--radius-md)",
+ border: "1px solid var(--color-border)",
+ background: "var(--color-surface)",
+ fontSize: 13,
+ color: "var(--color-text-primary)",
+ outline: "none",
+ fontFamily: "var(--font-sans)",
+};
+
+const labelStyle: React.CSSProperties = {
+ display: "flex",
+ flexDirection: "column",
+ gap: 6,
+ fontSize: 12,
+ fontWeight: 600,
+ color: "var(--color-text-secondary)",
+};
+
+const errorTextStyle: React.CSSProperties = {
+ fontSize: 11,
+ color: "var(--color-danger)",
+ fontWeight: 500,
+};
+
+// ── yup validation ────────────────────────────────────────────────────────────
+// Checks the form values against the right schema and turns any problems
+// into a simple field -> message map the inputs below can read from.
+
+async function validate(
+ form: Partial,
+ isNew: boolean,
+): Promise {
+ const schema = isNew ? createMaintenanceSchema : updateMaintenanceSchema;
+ try {
+ await schema.validate(form, { abortEarly: false });
+ return {};
+ } catch (err) {
+ if (err instanceof yup.ValidationError) {
+ return err.inner.reduce((acc, e) => {
+ const field = e.path as keyof MaintenanceFormErrors;
+ if (field && !acc[field]) acc[field] = e.message;
+ return acc;
+ }, {});
+ }
+ return {};
+ }
+}
+
+// ── Date helper ───────────────────────────────────────────────────────────────
+// gives "YYYY-MM-DD"; the backend expects full ISO-8601.
+
+function toIsoDateTime(val: string): string {
+ if (!val) return val;
+ if (val.includes("T")) return val;
+ return `${val}T00:00:00.000Z`;
+}
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+
+interface CarMaintenanceFormModalProps {
+ /** Pass null to create a brand new record, or an existing record to edit it. */
+ editRecord: CarMaintenance | null;
+ /** Shown in the header so the person knows which car this belongs to. */
+ carLabel?: string;
+ onClose: () => void;
+ onSubmit: (
+ payload: CreateMaintenancePayload | UpdateMaintenancePayload,
+ isNew: boolean,
+ ) => Promise;
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function CarMaintenanceFormModal({
+ editRecord,
+ carLabel,
+ onClose,
+ onSubmit,
+}: CarMaintenanceFormModalProps) {
+ const isNew = editRecord === null;
+
+ // ── Form state ─────────────────────────────────────────────────────────────
+ const [reason, setReason] = useState(editRecord?.reason ?? "");
+ const [cost, setCost] = useState(editRecord?.cost ?? undefined);
+ const [startAt, setStartAt] = useState(editRecord?.startAt?.slice(0, 10) ?? "");
+ const [endAt, setEndAt] = useState(editRecord?.endAt?.slice(0, 10) ?? "");
+
+ const [errors, setErrors] = useState({});
+ const [saving, setSaving] = useState(false);
+ const [apiError, setApiError] = useState("");
+ const firstRef = useRef(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]);
+
+ const parseNum = (v: string): number | undefined =>
+ v.trim() === "" ? undefined : Number(v);
+
+ const inputStyle = (field: keyof MaintenanceFormErrors): React.CSSProperties => ({
+ ...inputBase,
+ ...(errors[field] ? { borderColor: "var(--color-danger)", background: "#FEF2F2" } : {}),
+ });
+
+ const clearFieldError = (field: keyof MaintenanceFormErrors) =>
+ setErrors((p) => ({ ...p, [field]: undefined }));
+
+ // ── Submit ────────────────────────────────────────────────────────────────
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+
+ // Build a snapshot for yup — include everything so optional rules also run.
+ const formSnapshot: Partial = {
+ reason,
+ cost,
+ ...(startAt && { startAt }),
+ ...(endAt && { endAt }),
+ };
+
+ const errs = await validate(formSnapshot, isNew);
+ if (Object.keys(errs).length) {
+ setErrors(errs);
+ return;
+ }
+
+ // Build the final payload — dates go out as full ISO-8601 strings.
+ const raw: Record = { reason, cost };
+ if (startAt) raw.startAt = toIsoDateTime(startAt);
+ if (endAt) raw.endAt = toIsoDateTime(endAt);
+
+ const payload = raw as unknown as CreateMaintenancePayload;
+ setSaving(true);
+ setApiError("");
+ const ok = await onSubmit(payload, isNew);
+ setSaving(false);
+ if (ok) onClose();
+ else setApiError("حدث خطأ غير متوقع. يرجى المحاولة لاحقاً.");
+ };
+
+ // ── Render ────────────────────────────────────────────────────────────────
+
+ return (
+ { if (e.target === e.currentTarget) onClose(); }}
+ style={{
+ position: "fixed", inset: 0, zIndex: 50,
+ background: "rgba(15,23,42,0.55)", backdropFilter: "blur(4px)",
+ display: "flex", alignItems: "center", justifyContent: "center",
+ padding: "1rem", overflowY: "auto",
+ }}
+ >
+
e.stopPropagation()}
+ style={{
+ width: "100%", maxWidth: 520,
+ background: "var(--color-surface)",
+ borderRadius: "var(--radius-2xl)",
+ border: "1px solid var(--color-border)",
+ boxShadow: "0 24px 64px rgba(0,0,0,.18)",
+ overflow: "hidden",
+ margin: "auto",
+ }}
+ >
+ {/* Header */}
+
+
+
+ {isNew ? "إضافة سجل صيانة" : "تعديل سجل صيانة"}
+
+
+ {carLabel ?? (isNew ? "سجل صيانة جديد" : "تعديل السجل")}
+
+
+
+
+
+ {/* Form */}
+
+
+