db64b79fe3
2-update driver pages [fixed image display and notyfi] 3-update car pages [fixed image] 4-build tripe pages crud 5-build some role pages 6-build audit page 7-update ui compounants 8-update saidebar and topbar 9-cheange view to be ar view 10-cheange stractcher to be app,src 11-add validation layer by yup 12-add api image-proxy to broke image corse bloken
99 lines
3.9 KiB
TypeScript
99 lines
3.9 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect } from "react";
|
||
import { Spinner } from "../UI";
|
||
import type { Trip } from "@/src/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>
|
||
);
|
||
} |