'use client'; import { useState, useRef, useEffect, useCallback } from 'react'; import { AppToast } from '@/app/components/AppToast'; import type { Toast } from 'primereact/toast'; import { Skeleton } from 'primereact/skeleton'; import DashboardShell from '../components/DashboardShell'; import { useApi } from '@/hooks/useApi'; import { useSettingsApi } from '@/hooks/useSettingsApi'; import { useAuthStore } from '@/store/authStore'; import 'primereact/resources/themes/lara-light-blue/theme.css'; import 'primereact/resources/primereact.min.css'; // ─── Types ─────────────────────────────────────────────────────────────────── interface City { id: string; name: string; } interface ApiBusOption { id: number; display_code: string; plate_number: string; model: string | null; } interface BusesListPaginated { data: ApiBusOption[]; } interface BusesListApiResponse { key?: string; msg?: string; data: ApiBusOption[] | BusesListPaginated; } interface NeighborhoodOrDestination { id: number; kind: 'neighborhood' | 'destination'; city_id: number; neighborhood_id: number | null; name: string; lat: number | null; lng: number | null; destination_type: string | null; address: string | null; is_active: boolean; } interface NeighborhoodsApiResponse { key: string; msg: string; data: NeighborhoodOrDestination[]; } const DEFAULT_STATION_LAT = 24.7136; const DEFAULT_STATION_LNG = 46.6753; const SETTINGS_PUBLIC_BASE = 'https://sast.4hoste.com/api/v1/settings'; const SETTINGS_PUBLIC_HEADERS = { Accept: 'application/json', 'x-api-key': '5f43766dcd92b8c3e7639d2a8791063c', } as const; interface PathSubmitApiResponse { key?: string; msg?: string; message?: string; status?: string | number; } interface StopEntry { neighborhoodId: string; departureTime: string; returnTime: string; } // ─── Route (from API) ───────────────────────────────────────────────────────── interface ApiRouteOriginDestination { id: number; name: string; address: string; lat: number; lng: number; city: null | { id: number; name: string }; } interface ApiRoute { id: number; display_code: string; description?: string | null; status: 'active' | 'draft' | 'archived'; go_time: string; return_time: string; week_days: string[]; total_distance_km: number; price_per_subscription: number; city: null | { id: number; name: string }; origin: ApiRouteOriginDestination; destination: ApiRouteOriginDestination; stations_count: number; middle_stations_count: number; buses_count: number; subscriptions_count: number; updated_at: string; } interface ApiRoutesResponse { key: string; msg: string; data: { data: ApiRoute[]; pagination: { total_items: number; count_items: number; per_page: number; total_pages: number; current_page: number; next_page_url: string; perv_page_url: string; }; }; } // ─── Single Route (view) ────────────────────────────────────────────────────── interface ApiStation { id: number; name: string; city_id: null | number; city: null | { id: number; name: string }; neighborhood_id: null | number; destination_id: null | number; lat: number; lng: number; address: string; order_index: number; eta_minutes_from_start: number; go_time: string; return_time: string; is_origin: boolean; is_destination: boolean; } interface ApiBus { id: number; plate: string; type_id: string; brand_id: string; model: string; } interface ApiRouteDetail { id: number; description: string; status: 'active' | 'draft' | 'archived'; go_time: string; return_time: string; week_days: string[]; total_distance_km: number; total_duration_min: number; price_per_subscription: number; station_grace_minutes: number; pre_trip_notify_hours: number; bus_id: number | null; captain_id: number | null; bus: ApiBus | null; captain: null | unknown; stations: ApiStation[]; } interface ApiRouteDetailResponse { key: string; msg: string; data: ApiRouteDetail; } // ─── Status config ──────────────────────────────────────────────────────────── const STATUS_CONFIG = { active: { label: 'نشط', color: '#059669', bg: '#DCFCE7' }, draft: { label: 'معطل', color: '#D97706', bg: '#FEF3C7' }, archived: { label: 'موقوف', color: '#64748B', bg: '#F1F5F9' }, } as const; type RouteStatus = keyof typeof STATUS_CONFIG; // ─── Helpers ────────────────────────────────────────────────────────────────── const WEEK_DAYS = [ { label: 'الأحد', value: 0 }, { label: 'الاثنين', value: 1 }, { label: 'الثلاثاء', value: 2 }, { label: 'الأربعاء', value: 3 }, { label: 'الخميس', value: 4 }, { label: 'الجمعة', value: 5 }, { label: 'السبت', value: 6 }, ]; function toApiTimeHm(raw: string): string { const t = raw.trim(); if (!t) return ''; const m = /^(\d{1,2}):(\d{2})(?::\d{2})?/.exec(t); if (!m) return ''; return `${m[1].padStart(2, '0')}:${m[2].padStart(2, '0')}`; } function toTimeInputValue(raw: string): string { return toApiTimeHm(raw) || ''; } function buildPathFormData( opts: { routeName: string; routeStatus: RouteStatus; selectedBusId: string; selectedWeekDays: number[]; stationGraceMinutes: string; preTripNotifyHours: string; selectedCityId: string; departureNeighborhoodId: string; destinationId: string; stops: StopEntry[]; departureStationGoTime: string; departureStationReturnTime: string; destinationStationGoTime: string; destinationStationReturnTime: string; getNeighborhoodStationById: (id: string) => NeighborhoodOrDestination | undefined; getDestinationStationById: (id: string) => NeighborhoodOrDestination | undefined; }, ): FormData { const { routeName, routeStatus, selectedBusId, selectedWeekDays, stationGraceMinutes, preTripNotifyHours, selectedCityId, departureNeighborhoodId, destinationId, stops, departureStationGoTime, departureStationReturnTime, destinationStationGoTime, destinationStationReturnTime, getNeighborhoodStationById, getDestinationStationById, } = opts; const originGo = toApiTimeHm(departureStationGoTime); const originRet = toApiTimeHm(departureStationReturnTime); const destGo = toApiTimeHm(destinationStationGoTime); const destRet = toApiTimeHm(destinationStationReturnTime); const fd = new FormData(); fd.append('description', routeName.trim()); fd.append('status', routeStatus); fd.append('bus_id', selectedBusId); selectedWeekDays.forEach(d => fd.append('week_days[]', String(d))); fd.append('station_grace_minutes', stationGraceMinutes); fd.append('pre_trip_notify_hours', preTripNotifyHours); const allStations = [ { type: 'origin' as const, neighborhoodId: departureNeighborhoodId, goHm: originGo, returnHm: originRet }, ...stops.map(s => ({ type: 'middle' as const, neighborhoodId: s.neighborhoodId, goHm: toApiTimeHm(s.departureTime), returnHm: toApiTimeHm(s.returnTime) })), { type: 'destination' as const, neighborhoodId: destinationId, goHm: destGo, returnHm: destRet }, ]; allStations.forEach((station, index) => { const item = station.type === 'destination' ? getDestinationStationById(station.neighborhoodId) : getNeighborhoodStationById(station.neighborhoodId); if (!item) return; fd.append(`stations[${index}][city_id]`, selectedCityId); fd.append(`stations[${index}][order_index]`, String(index)); fd.append(`stations[${index}][lat]`, String(item.lat ?? DEFAULT_STATION_LAT)); fd.append(`stations[${index}][lng]`, String(item.lng ?? DEFAULT_STATION_LNG)); fd.append(`stations[${index}][address]`, item.name); fd.append(`stations[${index}][go_time]`, station.goHm); fd.append(`stations[${index}][return_time]`, station.returnHm); if (station.type === 'origin') { fd.append(`stations[${index}][neighborhood_id]`, String(item.id)); fd.append(`stations[${index}][is_origin]`, '1'); } else if (station.type === 'destination') { fd.append(`stations[${index}][destination_id]`, String(item.id)); fd.append(`stations[${index}][is_destination]`, '1'); } else { fd.append(`stations[${index}][neighborhood_id]`, String(item.id)); } }); return fd; } /** يفصل المحطات حتى لو رجع الباك اند is_origin/is_destination = false للكل؛ الأولى = انطلاق، الأخيرة = وصول، ما بينهما = وسطى فقط. */ function splitRouteStationsByRole(stations: ApiStation[]): { sorted: ApiStation[]; origin: ApiStation | undefined; destination: ApiStation | undefined; middle: ApiStation[]; } { const sorted = [...stations].sort((a, b) => a.order_index - b.order_index); const n = sorted.length; if (n === 0) return { sorted, origin: undefined, destination: undefined, middle: [] }; const originIdx = sorted.findIndex(s => s.is_origin); const destIdx = sorted.findIndex(s => s.is_destination); const oi = originIdx >= 0 ? originIdx : 0; const di = destIdx >= 0 ? destIdx : n - 1; const origin = sorted[oi]; const destination = sorted[di]; const lo = Math.min(oi, di); const hi = Math.max(oi, di); const middle = sorted.filter((_, i) => i > lo && i < hi); return { sorted, origin, destination, middle }; } function cityIdStringFromStations(stations: ApiStation[]): string { for (const s of stations) { if (s.city_id != null) return String(s.city_id); if (s.city?.id != null) return String(s.city.id); } return ''; } function weekDayName(d: string) { return WEEK_DAYS.find(w => String(w.value) === d)?.label ?? d; } // ─── Sub-components ─────────────────────────────────────────────────────────── function SelectDropdown({ label, value, onChange, options, placeholder, icon, iconColor, disabled = false, errorMsg }: { label: string; value: string; onChange: (v: string) => void; options: { value: string; label: string }[]; placeholder: string; icon: string; iconColor?: string; disabled?: boolean; errorMsg?: string | null; }) { const [open, setOpen] = useState(false); const [search, setSearch] = useState(''); const ref = useRef(null); useEffect(() => { const handler = (e: MouseEvent) => { if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false); }; document.addEventListener('mousedown', handler); return () => document.removeEventListener('mousedown', handler); }, []); const filtered = options.filter(o => o.label.includes(search)); const selected = options.find(o => o.value === value); return (
{open && (
setSearch(e.target.value)} className="w-full h-8 bg-slate-50 rounded-lg px-3 text-xs outline-none text-slate-700" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }} />
{filtered.map(opt => ( ))} {filtered.length === 0 &&

لا توجد نتائج

}
)} {errorMsg &&

{errorMsg}

}
); } function TimePicker({ label, value, onChange }: { label: string; value: string; onChange: (v: string) => void; }) { return (
onChange(e.target.value)} className="w-full h-10 bg-white border border-slate-200 rounded-xl px-3 text-sm outline-none text-slate-700 cursor-pointer" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }} />
); } // ─── Table Skeleton ─────────────────────────────────────────────────────────── function TableSkeleton() { return (
{['رقم المسار', 'اسم المسار', 'نقطة الانطلاق', 'نقطة الوصول', 'المحطات', 'وقت الذهاب', 'وقت العودة', 'الباصات', 'الحالة', ''].map(h => ( ))} {Array.from({ length: 5 }).map((_, i) => ( {Array.from({ length: 10 }).map((__, j) => ( ))} ))}
{h}
); } // ─── Main Page ──────────────────────────────────────────────────────────────── export default function RoutesPage() { const toast = useRef(null); const hasHydrated = useAuthStore((s) => s._hasHydrated); const token = useAuthStore((s) => s.token); // ── API hooks ── const { data: busesResponse, loading: busesLoading, error: busesError, request: fetchBuses } = useApi(); const { request: settingsRequest } = useSettingsApi<{ data: City[] | { data: City[] } } | City[]>(); const { loading: submitLoading, error: submitError, request: submitRoute, lastError: submitLastError } = useApi(); // ── Routes list state ── const [routes, setRoutes] = useState([]); const [routesLoading, setRoutesLoading] = useState(false); const [pagination, setPagination] = useState(null); const [currentPage, setCurrentPage] = useState(1); const [statusFilter, setStatusFilter] = useState<'active' | 'draft' | 'archived'>('active'); const [search, setSearch] = useState(''); // ── View modal state ── const [viewRouteId, setViewRouteId] = useState(null); const [viewRouteDetail, setViewRouteDetail] = useState(null); const [viewLoading, setViewLoading] = useState(false); const { request: fetchRouteDetail } = useApi(); // ── Edit modal state (mirrors add form; filled from paths/:id) ── const [editRoute, setEditRoute] = useState(null); const [editFormLoading, setEditFormLoading] = useState(false); const [editRouteName, setEditRouteName] = useState(''); const [editSelectedCityId, setEditSelectedCityId] = useState(''); const [editSelectedBusId, setEditSelectedBusId] = useState(''); const [editSelectedWeekDays, setEditSelectedWeekDays] = useState([]); const [editStationGraceMinutes, setEditStationGraceMinutes] = useState(''); const [editPreTripNotifyHours, setEditPreTripNotifyHours] = useState(''); const [editRouteStatus, setEditRouteStatus] = useState('active'); const [editDepartureNeighborhoodId, setEditDepartureNeighborhoodId] = useState(''); const [editDestinationId, setEditDestinationId] = useState(''); const [editStops, setEditStops] = useState([]); const [editDepartureStationGoTime, setEditDepartureStationGoTime] = useState(''); const [editDepartureStationReturnTime, setEditDepartureStationReturnTime] = useState(''); const [editDestinationStationGoTime, setEditDestinationStationGoTime] = useState(''); const [editDestinationStationReturnTime, setEditDestinationStationReturnTime] = useState(''); const [editFormError, setEditFormError] = useState(null); const [editNeighborhoodItems, setEditNeighborhoodItems] = useState([]); const [editDestinationItems, setEditDestinationItems] = useState([]); const [editNeighborhoodsLoading, setEditNeighborhoodsLoading] = useState(false); const [editNeighborhoodsError, setEditNeighborhoodsError] = useState(null); const { loading: editLoading, error: editSubmitError, request: updateRoute, lastError: editLastError } = useApi(); // ── Delete modal state ── const [deleteRoute, setDeleteRoute] = useState(null); const { loading: deleteLoading, request: deleteRouteApi } = useApi(); // ── Add modal state ── const [showAdd, setShowAdd] = useState(false); // ── cities & neighborhoods ── const [cities, setCities] = useState([]); const [citiesLoading, setCitiesLoading] = useState(false); const [citiesError, setCitiesError] = useState(null); const [neighborhoodItems, setNeighborhoodItems] = useState([]); const [destinationItems, setDestinationItems] = useState([]); const [neighborhoodsLoading, setNeighborhoodsLoading] = useState(false); const [neighborhoodsError, setNeighborhoodsError] = useState(null); // ── Add form state ── const [routeName, setRouteName] = useState(''); const [selectedCityId, setSelectedCityId] = useState(''); const [selectedBusId, setSelectedBusId] = useState(''); const [selectedWeekDays, setSelectedWeekDays] = useState([]); const [stationGraceMinutes, setStationGraceMinutes] = useState(''); const [preTripNotifyHours, setPreTripNotifyHours] = useState(''); const [routeStatus, setRouteStatus] = useState('active'); const [departureNeighborhoodId, setDepartureNeighborhoodId] = useState(''); const [destinationId, setDestinationId] = useState(''); const [stops, setStops] = useState([]); const [departureStationGoTime, setDepartureStationGoTime] = useState(''); const [departureStationReturnTime, setDepartureStationReturnTime] = useState(''); const [destinationStationGoTime, setDestinationStationGoTime] = useState(''); const [destinationStationReturnTime, setDestinationStationReturnTime] = useState(''); const [formError, setFormError] = useState(null); const busesList: ApiBusOption[] = (() => { const payload = busesResponse?.data; if (!payload) return []; if (Array.isArray(payload)) return payload; return payload.data ?? []; })(); const neighborhoodOptions = neighborhoodItems .filter(n => n.is_active) .map(n => ({ value: String(n.id), label: n.name })); const destinationOptions = destinationItems .filter(n => n.is_active) .map(n => ({ value: String(n.id), label: n.name })); // ── Fetch routes ────────────────────────────────────────────────────────── const { request: fetchRoutesRaw } = useApi(); const fetchRoutes = useCallback(async (page = 1, status: 'active' | 'draft' | 'archived' = 'active') => { setRoutesLoading(true); const res = await fetchRoutesRaw(`paths?paginate=20&status=${status}&page=${page}`); if (res?.data?.data) { setRoutes(res.data.data); setPagination(res.data.pagination); } setRoutesLoading(false); }, [fetchRoutesRaw]); // ── Effects ─────────────────────────────────────────────────────────────── useEffect(() => { if (!hasHydrated || !token) return; void fetchRoutes(currentPage, statusFilter); }, [hasHydrated, token, currentPage, statusFilter, fetchRoutes]); useEffect(() => { if (!hasHydrated || !token) return; void fetchBuses('buses?status=active&paginate=100'); }, [hasHydrated, token, fetchBuses]); useEffect(() => { const fetchCities = async () => { setCitiesLoading(true); setCitiesError(null); const json = await settingsRequest('/cities', { skipAuth: true }); if (json) { let list: City[] = []; if (Array.isArray(json)) list = json; else if (Array.isArray((json as { data: City[] }).data)) list = (json as { data: City[] }).data; else if (Array.isArray(((json as { data: { data: City[] } }).data as { data: City[] })?.data)) list = ((json as { data: { data: City[] } }).data as { data: City[] }).data; setCities(list); } else { setCitiesError('تعذّر تحميل قائمة المدن'); } setCitiesLoading(false); }; void fetchCities(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const fetchNeighborhoods = useCallback(async (cityId: string) => { if (!cityId) { setNeighborhoodItems([]); setDestinationItems([]); return; } setNeighborhoodsLoading(true); setNeighborhoodsError(null); try { const [resN, resD] = await Promise.all([ fetch(`${SETTINGS_PUBLIC_BASE}/cities/${cityId}/neighborhoods`, { headers: SETTINGS_PUBLIC_HEADERS }), fetch(`${SETTINGS_PUBLIC_BASE}/cities/${cityId}/destinations`, { headers: SETTINGS_PUBLIC_HEADERS }), ]); const jsonN = (await resN.json()) as NeighborhoodsApiResponse; const jsonD = (await resD.json()) as NeighborhoodsApiResponse; const hoods = jsonN?.data && Array.isArray(jsonN.data) ? jsonN.data : []; const dests = jsonD?.data && Array.isArray(jsonD.data) ? jsonD.data : []; setNeighborhoodItems(resN.ok ? hoods : []); setDestinationItems(resD.ok ? dests : []); if (!resN.ok || !resD.ok) { setNeighborhoodsError( !resN.ok && !resD.ok ? 'تعذّر تحميل الأحياء ونقاط الوصول' : !resN.ok ? 'تعذّر تحميل الأحياء' : 'تعذّر تحميل نقاط الوصول', ); } else { setNeighborhoodsError(null); } } catch { setNeighborhoodsError('تعذّر الاتصال بالخادم'); setNeighborhoodItems([]); setDestinationItems([]); } setNeighborhoodsLoading(false); }, []); const fetchEditNeighborhoods = useCallback(async (cityId: string) => { if (!cityId) { setEditNeighborhoodItems([]); setEditDestinationItems([]); return; } setEditNeighborhoodsLoading(true); setEditNeighborhoodsError(null); try { const [resN, resD] = await Promise.all([ fetch(`${SETTINGS_PUBLIC_BASE}/cities/${cityId}/neighborhoods`, { headers: SETTINGS_PUBLIC_HEADERS }), fetch(`${SETTINGS_PUBLIC_BASE}/cities/${cityId}/destinations`, { headers: SETTINGS_PUBLIC_HEADERS }), ]); const jsonN = (await resN.json()) as NeighborhoodsApiResponse; const jsonD = (await resD.json()) as NeighborhoodsApiResponse; const hoods = jsonN?.data && Array.isArray(jsonN.data) ? jsonN.data : []; const dests = jsonD?.data && Array.isArray(jsonD.data) ? jsonD.data : []; setEditNeighborhoodItems(hoods); setEditDestinationItems(dests); let err: string | null = null; if (!resN.ok) err = 'تعذّر تحميل الأحياء'; if (!resD.ok) err = err ? `${err} ونقاط الوصول` : 'تعذّر تحميل نقاط الوصول'; setEditNeighborhoodsError(err); if (!resN.ok) setEditNeighborhoodItems([]); if (!resD.ok) setEditDestinationItems([]); } catch { setEditNeighborhoodsError('تعذّر الاتصال بالخادم'); setEditNeighborhoodItems([]); setEditDestinationItems([]); } setEditNeighborhoodsLoading(false); }, []); useEffect(() => { setDepartureNeighborhoodId(''); setDestinationId(''); setStops(prev => prev.map(s => ({ ...s, neighborhoodId: '' }))); if (selectedCityId) void fetchNeighborhoods(selectedCityId); else { setNeighborhoodItems([]); setDestinationItems([]); } }, [selectedCityId, fetchNeighborhoods]); // ── View route ──────────────────────────────────────────────────────────── const handleViewRoute = async (id: number) => { setViewRouteId(id); setViewRouteDetail(null); setViewLoading(true); const res = await fetchRouteDetail(`paths/${id}`); if (res?.data) setViewRouteDetail(res.data); setViewLoading(false); }; // ── Edit route ──────────────────────────────────────────────────────────── const handleCloseEdit = () => { setEditRoute(null); setEditFormLoading(false); setEditFormError(null); setEditRouteName(''); setEditSelectedCityId(''); setEditSelectedBusId(''); setEditSelectedWeekDays([]); setEditStationGraceMinutes(''); setEditPreTripNotifyHours(''); setEditRouteStatus('active'); setEditDepartureNeighborhoodId(''); setEditDestinationId(''); setEditStops([]); setEditDepartureStationGoTime(''); setEditDepartureStationReturnTime(''); setEditDestinationStationGoTime(''); setEditDestinationStationReturnTime(''); setEditNeighborhoodItems([]); setEditDestinationItems([]); setEditNeighborhoodsError(null); }; const handleOpenEdit = async (route: ApiRoute, e: React.MouseEvent) => { e.stopPropagation(); setEditFormError(null); setEditRoute(route); setEditFormLoading(true); setEditNeighborhoodItems([]); setEditDestinationItems([]); const res = await fetchRouteDetail(`paths/${route.id}`); if (!res?.data) { setEditFormLoading(false); toast.current?.show({ severity: 'error', summary: 'خطأ', detail: 'تعذّر تحميل تفاصيل المسار', life: 4000 }); setEditRoute(null); return; } const d = res.data; const { sorted: stations, origin, destination: dest, middle } = splitRouteStationsByRole(d.stations); const cityId = cityIdStringFromStations(stations); if (cityId) { setEditNeighborhoodsLoading(true); setEditNeighborhoodsError(null); try { const [resN, resD] = await Promise.all([ fetch(`${SETTINGS_PUBLIC_BASE}/cities/${cityId}/neighborhoods`, { headers: SETTINGS_PUBLIC_HEADERS }), fetch(`${SETTINGS_PUBLIC_BASE}/cities/${cityId}/destinations`, { headers: SETTINGS_PUBLIC_HEADERS }), ]); const jsonN = (await resN.json()) as NeighborhoodsApiResponse; const jsonD = (await resD.json()) as NeighborhoodsApiResponse; const hoods = jsonN?.data && Array.isArray(jsonN.data) ? jsonN.data : []; const dests = jsonD?.data && Array.isArray(jsonD.data) ? jsonD.data : []; setEditNeighborhoodItems(hoods); setEditDestinationItems(dests); let err: string | null = null; if (!resN.ok) err = 'تعذّر تحميل الأحياء'; if (!resD.ok) err = err ? `${err} ونقاط الوصول` : 'تعذّر تحميل نقاط الوصول'; setEditNeighborhoodsError(err); if (!resN.ok) setEditNeighborhoodItems([]); if (!resD.ok) setEditDestinationItems([]); } catch { setEditNeighborhoodsError('تعذّر الاتصال بالخادم'); setEditNeighborhoodItems([]); setEditDestinationItems([]); } setEditNeighborhoodsLoading(false); } setEditRouteName(d.description); setEditRouteStatus(d.status as RouteStatus); setEditSelectedBusId(d.bus_id != null ? String(d.bus_id) : ''); setEditStationGraceMinutes(String(d.station_grace_minutes ?? '')); setEditPreTripNotifyHours(String(d.pre_trip_notify_hours ?? '')); const weekNums = d.week_days .map(x => { if (typeof x === 'number') return x; const n = parseInt(String(x), 10); return Number.isNaN(n) ? null : n; }) .filter((x): x is number => x !== null); setEditSelectedWeekDays(weekNums); setEditSelectedCityId(cityId); setEditDepartureNeighborhoodId(origin?.neighborhood_id != null ? String(origin.neighborhood_id) : ''); const destId = dest?.destination_id != null ? String(dest.destination_id) : dest?.neighborhood_id != null ? String(dest.neighborhood_id) : ''; setEditDestinationId(destId); setEditStops( middle.map(s => ({ neighborhoodId: s.neighborhood_id != null ? String(s.neighborhood_id) : '', departureTime: toTimeInputValue(s.go_time), returnTime: toTimeInputValue(s.return_time), })), ); setEditDepartureStationGoTime(toTimeInputValue(origin?.go_time ?? '')); setEditDepartureStationReturnTime(toTimeInputValue(origin?.return_time ?? '')); setEditDestinationStationGoTime(toTimeInputValue(dest?.go_time ?? '')); setEditDestinationStationReturnTime(toTimeInputValue(dest?.return_time ?? '')); setEditFormLoading(false); }; const handleEditCityChange = (cityId: string) => { setEditSelectedCityId(cityId); setEditDepartureNeighborhoodId(''); setEditDestinationId(''); setEditStops(prev => prev.map(s => ({ ...s, neighborhoodId: '' }))); void fetchEditNeighborhoods(cityId); }; const handleEditSubmit = async () => { if (!editRoute) return; setEditFormError(null); if (!editRouteName.trim()) return setEditFormError('اسم المسار مطلوب'); if (!editSelectedCityId) return setEditFormError('المدينة مطلوبة'); if (!editSelectedBusId) return setEditFormError('الباص مطلوب'); if (editSelectedWeekDays.length === 0) return setEditFormError('يجب اختيار يوم واحد على الأقل'); if (!editStationGraceMinutes.trim()) return setEditFormError('دقائق الانتظار مطلوبة'); if (!editPreTripNotifyHours) return setEditFormError('ساعات الإشعار مطلوبة'); if (!editDepartureNeighborhoodId) return setEditFormError('نقطة الانطلاق مطلوبة'); if (!editDestinationId) return setEditFormError('نقطة الوصول مطلوبة'); const originGo = toApiTimeHm(editDepartureStationGoTime); const originRet = toApiTimeHm(editDepartureStationReturnTime); if (!originGo) return setEditFormError('وقت ذهاب نقطة الانطلاق مطلوب'); if (!originRet) return setEditFormError('وقت عودة نقطة الانطلاق مطلوب'); for (let i = 0; i < editStops.length; i++) { if (!toApiTimeHm(editStops[i].departureTime) || !toApiTimeHm(editStops[i].returnTime)) return setEditFormError(`أوقات الذهاب والعودة للمحطة الوسطى ${i + 1} مطلوبة`); } const destGo = toApiTimeHm(editDestinationStationGoTime); const destRet = toApiTimeHm(editDestinationStationReturnTime); if (!destGo) return setEditFormError('وقت ذهاب نقطة الوصول مطلوب'); if (!destRet) return setEditFormError('وقت عودة نقطة الوصول مطلوب'); const fd = buildPathFormData({ routeName: editRouteName, routeStatus: editRouteStatus, selectedBusId: editSelectedBusId, selectedWeekDays: editSelectedWeekDays, stationGraceMinutes: editStationGraceMinutes, preTripNotifyHours: editPreTripNotifyHours, selectedCityId: editSelectedCityId, departureNeighborhoodId: editDepartureNeighborhoodId, destinationId: editDestinationId, stops: editStops, departureStationGoTime: editDepartureStationGoTime, departureStationReturnTime: editDepartureStationReturnTime, destinationStationGoTime: editDestinationStationGoTime, destinationStationReturnTime: editDestinationStationReturnTime, getNeighborhoodStationById: getEditNeighborhoodStationById, getDestinationStationById: getEditDestinationStationById, }); const result = await updateRoute(`paths/${editRoute.id}/update`, { method: 'POST', body: fd as unknown as undefined, }); if (!result) { toast.current?.show({ severity: 'error', summary: 'خطأ', detail: editLastError.current || 'لم يتم التعديل', life: 6000 }); return; } toast.current?.show({ severity: result.key === 'success' ? 'success' : 'error', summary: result.key === 'success' ? 'تم' : 'خطأ', detail: result.msg ?? (result.key === 'success' ? 'تم تعديل المسار بنجاح' : 'حدث خطأ'), life: 3000, }); if (result.key === 'success') { handleCloseEdit(); void fetchRoutes(currentPage, statusFilter); } }; // ── Delete route ────────────────────────────────────────────────────────── const handleDeleteConfirm = async () => { if (!deleteRoute) return; const result = await deleteRouteApi(`paths/${deleteRoute.id}`, { method: 'DELETE' }); if (!result) { toast.current?.show({ severity: 'error', summary: 'خطأ', detail: 'لم يتم الحذف', life: 4000 }); return; } toast.current?.show({ severity: result.key === 'success' ? 'success' : 'error', summary: result.key === 'success' ? 'تم' : 'خطأ', detail: result.msg ?? (result.key === 'success' ? 'تم حذف المسار بنجاح' : 'حدث خطأ'), life: 3000, }); if (result.key === 'success') { setDeleteRoute(null); void fetchRoutes(currentPage, statusFilter); } }; // ── Add helpers ─────────────────────────────────────────────────────────── const toggleWeekDay = (day: number) => setSelectedWeekDays(prev => prev.includes(day) ? prev.filter(d => d !== day) : [...prev, day]); const addStop = () => setStops(prev => [...prev, { neighborhoodId: '', departureTime: '', returnTime: '' }]); const removeStop = (i: number) => setStops(prev => prev.filter((_, idx) => idx !== i)); const updateStop = (i: number, field: keyof StopEntry, val: string) => setStops(prev => prev.map((s, idx) => idx === i ? { ...s, [field]: val } : s)); const getNeighborhoodStationById = (id: string) => neighborhoodItems.find(n => String(n.id) === id); const getDestinationStationById = (id: string) => destinationItems.find(n => String(n.id) === id); const getEditNeighborhoodStationById = (id: string) => editNeighborhoodItems.find(n => String(n.id) === id); const getEditDestinationStationById = (id: string) => editDestinationItems.find(n => String(n.id) === id); const editNeighborhoodOptions = editNeighborhoodItems .filter(n => n.is_active) .map(n => ({ value: String(n.id), label: n.name })); const editDestinationOptions = editDestinationItems .filter(n => n.is_active) .map(n => ({ value: String(n.id), label: n.name })); const toggleEditWeekDay = (day: number) => setEditSelectedWeekDays(prev => prev.includes(day) ? prev.filter(d => d !== day) : [...prev, day]); const addEditStop = () => setEditStops(prev => [...prev, { neighborhoodId: '', departureTime: '', returnTime: '' }]); const removeEditStop = (i: number) => setEditStops(prev => prev.filter((_, idx) => idx !== i)); const updateEditStop = (i: number, field: keyof StopEntry, val: string) => setEditStops(prev => prev.map((s, idx) => idx === i ? { ...s, [field]: val } : s)); const departureName = getNeighborhoodStationById(departureNeighborhoodId)?.name ?? ''; const destinationName = getDestinationStationById(destinationId)?.name ?? ''; const stopsNames = stops.map(s => getNeighborhoodStationById(s.neighborhoodId)?.name ?? '').filter(Boolean); const routePreview = [departureName, ...stopsNames, destinationName].filter(Boolean); const editDepartureName = getEditNeighborhoodStationById(editDepartureNeighborhoodId)?.name ?? ''; const editDestinationName = getEditDestinationStationById(editDestinationId)?.name ?? ''; const editStopsNames = editStops.map(s => getEditNeighborhoodStationById(s.neighborhoodId)?.name ?? '').filter(Boolean); const editRoutePreview = [editDepartureName, ...editStopsNames, editDestinationName].filter(Boolean); const handleCloseAdd = () => { setShowAdd(false); setFormError(null); setRouteName(''); setSelectedCityId(''); setSelectedBusId(''); setSelectedWeekDays([]); setStationGraceMinutes(''); setPreTripNotifyHours(''); setRouteStatus('active'); setDepartureNeighborhoodId(''); setDestinationId(''); setStops([]); setDepartureStationGoTime(''); setDepartureStationReturnTime(''); setDestinationStationGoTime(''); setDestinationStationReturnTime(''); setNeighborhoodItems([]); setDestinationItems([]); }; // ── Add submit ──────────────────────────────────────────────────────────── const handleSubmit = async () => { setFormError(null); if (!routeName.trim()) return setFormError('اسم المسار مطلوب'); if (!selectedCityId) return setFormError('المدينة مطلوبة'); if (!selectedBusId) return setFormError('الباص مطلوب'); if (selectedWeekDays.length === 0) return setFormError('يجب اختيار يوم واحد على الأقل'); if (!stationGraceMinutes.trim()) return setFormError('دقائق الانتظار مطلوبة'); if (!preTripNotifyHours) return setFormError('ساعات الإشعار مطلوبة'); if (!departureNeighborhoodId) return setFormError('نقطة الانطلاق مطلوبة'); if (!destinationId) return setFormError('نقطة الوصول مطلوبة'); const originGo = toApiTimeHm(departureStationGoTime); const originRet = toApiTimeHm(departureStationReturnTime); if (!originGo) return setFormError('وقت ذهاب نقطة الانطلاق مطلوب'); if (!originRet) return setFormError('وقت عودة نقطة الانطلاق مطلوب'); for (let i = 0; i < stops.length; i++) { if (!toApiTimeHm(stops[i].departureTime) || !toApiTimeHm(stops[i].returnTime)) return setFormError(`أوقات الذهاب والعودة للمحطة الوسطى ${i + 1} مطلوبة`); } const destGo = toApiTimeHm(destinationStationGoTime); const destRet = toApiTimeHm(destinationStationReturnTime); if (!destGo) return setFormError('وقت ذهاب نقطة الوصول مطلوب'); if (!destRet) return setFormError('وقت عودة نقطة الوصول مطلوب'); const fd = buildPathFormData({ routeName, routeStatus, selectedBusId, selectedWeekDays, stationGraceMinutes, preTripNotifyHours, selectedCityId, departureNeighborhoodId, destinationId, stops, departureStationGoTime, departureStationReturnTime, destinationStationGoTime, destinationStationReturnTime, getNeighborhoodStationById, getDestinationStationById, }); const result = await submitRoute('paths', { method: 'POST', body: fd as unknown as undefined }); if (!result) { toast.current?.show({ severity: 'error', summary: 'حدث خطأ', detail: submitLastError.current || 'لم تتم الإضافة', life: 6000 }); return; } toast.current?.show({ severity: result.key === 'success' ? 'success' : 'error', summary: result.key === 'success' ? 'تم' : 'خطأ', detail: result.msg ?? (result.key === 'success' ? 'تم إضافة المسار بنجاح' : 'حدث خطأ'), life: 3000, }); if (result.key === 'success') { handleCloseAdd(); void fetchRoutes(currentPage, statusFilter); } }; // ── Derived stats ───────────────────────────────────────────────────────── const totalItems = pagination?.total_items ?? 0; const totalPages = pagination?.total_pages ?? 1; const filteredRoutes = routes.filter(r => (r.description ?? '').includes(search) || r.origin?.name.includes(search) || r.destination?.name.includes(search) || r.display_code.includes(search) ); // ─── Render ─────────────────────────────────────────────────────────────── return ( {/* Stats */}
{[ { label: 'إجمالي المسارات', value: totalItems, icon: 'ri-route-fill', color: '#1E3A8A', bg: '#EEF2FF' }, { label: 'الباصات', value: filteredRoutes.reduce((a, r) => a + r.buses_count, 0), icon: 'ri-bus-2-fill', color: '#7C3AED', bg: '#EDE9FE' }, { label: 'المشتركون', value: filteredRoutes.reduce((a, r) => a + r.subscriptions_count, 0), icon: 'ri-group-fill', color: '#D97706', bg: '#FEF3C7' }, { label: 'المحطات', value: filteredRoutes.reduce((a, r) => a + r.stations_count, 0), icon: 'ri-map-pin-fill', color: '#059669', bg: '#DCFCE7' }, ].map((s, i) => (
{routesLoading ? :

{s.value}

}

{s.label}

))}
{/* Toolbar */}
setSearch(e.target.value)} className="h-10 bg-white border border-slate-200 rounded-xl pr-10 pl-4 text-sm outline-none text-slate-700" style={{ width: '280px', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }} />
{/* Status filter */}
{(['active', 'draft', 'archived'] as const).map(s => ( ))}
{/* Table */} {routesLoading ? ( ) : (
{['رقم المسار', 'اسم المسار', 'نقطة الانطلاق', 'نقطة الوصول', 'المحطات', 'وقت الذهاب', 'وقت العودة', 'الباصات', 'الحالة', ''].map(h => ( ))} {filteredRoutes.length === 0 ? ( ) : filteredRoutes.map((r) => { const sc = STATUS_CONFIG[r.status] ?? STATUS_CONFIG.active; const routeName = r.description?.trim() || 'غير مسند'; return ( handleViewRoute(r.id)}> ); })}
{h}

لا توجد مسارات
{r.display_code} {routeName}
{r.origin?.name ?? '—'}
{r.destination?.name ?? '—'}
{r.stations_count} محطة {r.go_time} {r.return_time} {r.buses_count} {sc.label} e.stopPropagation()}>
{/* Pagination */} {totalPages > 1 && (

صفحة {currentPage} من {totalPages}

{Array.from({ length: totalPages }, (_, i) => i + 1).map(p => ( ))}
)}
)} {/* ─── Add Route Modal ──────────────────────────────────────────────── */} {showAdd && (
e.stopPropagation()}>

إضافة مسار جديد

{/* Route Name */}
setRouteName(e.target.value)} className="w-full h-11 bg-slate-50 border border-slate-200 rounded-xl px-4 text-sm outline-none text-slate-700" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }} />
{/* Status — 3 states */}
{(['active', 'draft', 'archived'] as const).map(val => { const sc = STATUS_CONFIG[val]; return ( ); })}
{/* City */} ({ value: String(c.id), label: c.name }))} placeholder={citiesLoading ? 'جاري تحميل المدن...' : 'اختر المدينة'} icon="ri-building-2-line" disabled={citiesLoading} errorMsg={citiesError} /> {/* Bus */} ({ value: String(b.id), label: [b.display_code, b.plate_number, b.model].filter(Boolean).join(' — ') }))} placeholder={busesLoading ? 'جاري تحميل الباصات...' : busesError ? 'تعذّر تحميل الباصات' : busesList.length === 0 ? 'لا توجد باصات نشطة' : 'اختر الباص'} icon="ri-bus-2-line" disabled={busesLoading || !!busesError || busesList.length === 0} errorMsg={busesError} /> {/* Week Days */}
{WEEK_DAYS.map(day => { const active = selectedWeekDays.includes(day.value); return ( ); })}
{/* Grace, Notify */}
setStationGraceMinutes(e.target.value)} className="w-full h-10 bg-white border border-slate-200 rounded-xl px-3 text-sm outline-none text-slate-700" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }} />
setPreTripNotifyHours(e.target.value)} className="w-full h-10 bg-white border border-slate-200 rounded-xl px-3 text-sm outline-none text-slate-700" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }} />
{/* Departure */}

نقطة الانطلاق

{/* Middle stops */} {stops.map((stop, i) => (

محطة وسطى {i + 1}

updateStop(i, 'neighborhoodId', val)} options={neighborhoodOptions} placeholder={!selectedCityId ? 'اختر المدينة أولاً' : neighborhoodsLoading ? 'جاري التحميل...' : 'اختر الحي'} icon="ri-map-pin-line" iconColor="#F59E0B" disabled={!selectedCityId || neighborhoodsLoading} />
updateStop(i, 'departureTime', val)} /> updateStop(i, 'returnTime', val)} />
))} {/* Destination */}

نقطة الوصول

{/* Route Preview */} {routePreview.length >= 2 && (
{routePreview.map((p, i) => ( {p} {i < routePreview.length - 1 && } ))}
)} {(formError || submitError) && (

{formError ?? submitError}

)}
)} {/* ─── View Route Modal ─────────────────────────────────────────────── */} {viewRouteId !== null && (
{ setViewRouteId(null); setViewRouteDetail(null); }}>
e.stopPropagation()}>
{viewLoading ? : <>

{viewRouteDetail?.description ?? '—'}

#{viewRouteDetail?.id} }
{viewLoading ? (
{Array.from({ length: 4 }).map((_, i) => ( ))}
) : viewRouteDetail ? ( <> {/* Info row */}

وقت الإنطلاق

{viewRouteDetail.go_time}

وقت الوصول

{viewRouteDetail.return_time}

سعر الاشتراك

{viewRouteDetail.price_per_subscription} ر.س

الحالة

{STATUS_CONFIG[viewRouteDetail.status]?.label}
{/* Bus info */} {viewRouteDetail.bus && (

الباص

{viewRouteDetail.bus.plate} — {viewRouteDetail.bus.brand_id} {viewRouteDetail.bus.model}

)} {/* Week days */}
{viewRouteDetail.week_days.map(d => ( {weekDayName(d)} ))}
{/* Stations */}
{viewRouteDetail.stations.map((station, i) => { const isFirst = i === 0; const isLast = i === viewRouteDetail.stations.length - 1; const bgColor = isFirst ? '#F0FDF4' : isLast ? '#FFF1F2' : '#FFFBEB'; const borderColor = isFirst ? '#BBF7D0' : isLast ? '#FECDD3' : '#FDE68A'; const iconColor = isFirst ? '#059669' : isLast ? '#EF4444' : '#F59E0B'; const iconBg = isFirst ? '#DCFCE7' : isLast ? '#FEE2E2' : '#FEF3C7'; const icon = isFirst ? 'ri-map-pin-2-fill' : isLast ? 'ri-map-pin-fill' : 'ri-map-pin-line'; const label = isFirst ? 'نقطة الانطلاق' : isLast ? 'نقطة الوصول' : `محطة وسطى ${i}`; return (

{label}

{station.name}

ذهاب / عودة

{station.go_time} / {station.return_time}

); })}
) : (

تعذّر تحميل البيانات

)}
)} {/* ─── Edit Route Dialog (same fields as add; data from paths/:id) ───── */} {editRoute && (
e.stopPropagation()}>

تعديل المسار

{editRoute.display_code}
{editFormLoading ? (
{Array.from({ length: 8 }).map((_, i) => ( ))}
) : ( <>
setEditRouteName(e.target.value)} className="w-full h-11 bg-slate-50 border border-slate-200 rounded-xl px-4 text-sm outline-none text-slate-700" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }} />
{(['active', 'draft', 'archived'] as const).map(val => { const sc = STATUS_CONFIG[val]; return ( ); })}
({ value: String(c.id), label: c.name }))} placeholder={citiesLoading ? 'جاري تحميل المدن...' : 'اختر المدينة'} icon="ri-building-2-line" disabled={citiesLoading} errorMsg={citiesError} /> ({ value: String(b.id), label: [b.display_code, b.plate_number, b.model].filter(Boolean).join(' — ') }))} placeholder={busesLoading ? 'جاري تحميل الباصات...' : busesError ? 'تعذّر تحميل الباصات' : busesList.length === 0 ? 'لا توجد باصات نشطة' : 'اختر الباص'} icon="ri-bus-2-line" disabled={busesLoading || !!busesError || busesList.length === 0} errorMsg={busesError} />
{WEEK_DAYS.map(day => { const active = editSelectedWeekDays.includes(day.value); return ( ); })}
setEditStationGraceMinutes(e.target.value)} className="w-full h-10 bg-white border border-slate-200 rounded-xl px-3 text-sm outline-none text-slate-700" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }} />
setEditPreTripNotifyHours(e.target.value)} className="w-full h-10 bg-white border border-slate-200 rounded-xl px-3 text-sm outline-none text-slate-700" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }} />

نقطة الانطلاق

{editStops.map((stop, i) => (

محطة وسطى {i + 1}

updateEditStop(i, 'neighborhoodId', val)} options={editNeighborhoodOptions} placeholder={!editSelectedCityId ? 'اختر المدينة أولاً' : editNeighborhoodsLoading ? 'جاري التحميل...' : 'اختر الحي'} icon="ri-map-pin-line" iconColor="#F59E0B" disabled={!editSelectedCityId || editNeighborhoodsLoading} />
updateEditStop(i, 'departureTime', val)} /> updateEditStop(i, 'returnTime', val)} />
))}

نقطة الوصول

{editRoutePreview.length >= 2 && (
{editRoutePreview.map((p, i) => ( {p} {i < editRoutePreview.length - 1 && } ))}
)} {(editFormError || editSubmitError) && (

{editFormError ?? editSubmitError}

)}
)}
)} {/* ─── Delete Confirm Dialog ────────────────────────────────────────── */} {deleteRoute && (
setDeleteRoute(null)}>
e.stopPropagation()}>

حذف المسار

هل أنت متأكد من حذف مسار «{deleteRoute.description}»؟ لا يمكن التراجع عن هذا الإجراء.

)} ); }