278 lines
10 KiB
TypeScript
278 lines
10 KiB
TypeScript
/**
|
|
* @ai-summary Mobile maintenance screen with tabs for records and schedules
|
|
*/
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { useQueryClient } from '@tanstack/react-query';
|
|
import { Box, Tabs, Tab, FormControl, InputLabel, Select, MenuItem } from '@mui/material';
|
|
import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
|
|
import { Button } from '../../../shared-minimal/components/Button';
|
|
import { useMaintenanceRecords } from '../hooks/useMaintenanceRecords';
|
|
import { useVehicles } from '../../vehicles/hooks/useVehicles';
|
|
import { MaintenanceRecordForm } from '../components/MaintenanceRecordForm';
|
|
import { MaintenanceRecordsList } from '../components/MaintenanceRecordsList';
|
|
import { MaintenanceRecordEditDialog } from '../components/MaintenanceRecordEditDialog';
|
|
import { MaintenanceScheduleForm } from '../components/MaintenanceScheduleForm';
|
|
import { MaintenanceSchedulesList } from '../components/MaintenanceSchedulesList';
|
|
import { MaintenanceScheduleEditDialog } from '../components/MaintenanceScheduleEditDialog';
|
|
import type { MaintenanceRecordResponse, UpdateMaintenanceRecordRequest, MaintenanceScheduleResponse, UpdateScheduleRequest } from '../types/maintenance.types';
|
|
import { getVehicleSubtitle } from '@/core/utils/vehicleDisplay';
|
|
|
|
export const MaintenanceMobileScreen: React.FC = () => {
|
|
const queryClient = useQueryClient();
|
|
const { data: vehicles, isLoading: isLoadingVehicles } = useVehicles();
|
|
const [selectedVehicleId, setSelectedVehicleId] = useState<string>('');
|
|
|
|
// Auto-select first vehicle when vehicles load
|
|
useEffect(() => {
|
|
if (vehicles && vehicles.length > 0 && !selectedVehicleId) {
|
|
setSelectedVehicleId(vehicles[0].id);
|
|
}
|
|
}, [vehicles, selectedVehicleId]);
|
|
|
|
const { records, schedules, isRecordsLoading, isSchedulesLoading, recordsError, schedulesError, updateRecord, deleteRecord, updateSchedule, deleteSchedule } = useMaintenanceRecords(selectedVehicleId || undefined);
|
|
|
|
const [activeTab, setActiveTab] = useState<'records' | 'schedules'>('records');
|
|
const [showForm, setShowForm] = useState(false);
|
|
const [editingRecord, setEditingRecord] = useState<MaintenanceRecordResponse | null>(null);
|
|
const [editDialogOpen, setEditDialogOpen] = useState(false);
|
|
const [editingSchedule, setEditingSchedule] = useState<MaintenanceScheduleResponse | null>(null);
|
|
const [scheduleEditDialogOpen, setScheduleEditDialogOpen] = useState(false);
|
|
|
|
const handleEdit = (record: MaintenanceRecordResponse) => {
|
|
setEditingRecord(record);
|
|
setEditDialogOpen(true);
|
|
};
|
|
|
|
const handleEditSave = async (id: string, data: UpdateMaintenanceRecordRequest) => {
|
|
try {
|
|
await updateRecord({ id, data });
|
|
queryClient.refetchQueries({ queryKey: ['maintenanceRecords'] });
|
|
setEditDialogOpen(false);
|
|
setEditingRecord(null);
|
|
} catch (error) {
|
|
console.error('Failed to update maintenance record:', error);
|
|
throw error;
|
|
}
|
|
};
|
|
|
|
const handleEditClose = () => {
|
|
setEditDialogOpen(false);
|
|
setEditingRecord(null);
|
|
};
|
|
|
|
const handleDelete = async (recordId: string) => {
|
|
try {
|
|
await deleteRecord(recordId);
|
|
queryClient.refetchQueries({ queryKey: ['maintenanceRecords'] });
|
|
} catch (error) {
|
|
console.error('Failed to delete maintenance record:', error);
|
|
}
|
|
};
|
|
|
|
const handleScheduleEdit = (schedule: MaintenanceScheduleResponse) => {
|
|
setEditingSchedule(schedule);
|
|
setScheduleEditDialogOpen(true);
|
|
};
|
|
|
|
const handleScheduleEditSave = async (id: string, data: UpdateScheduleRequest) => {
|
|
try {
|
|
await updateSchedule({ id, data });
|
|
queryClient.refetchQueries({ queryKey: ['maintenanceSchedules'] });
|
|
setScheduleEditDialogOpen(false);
|
|
setEditingSchedule(null);
|
|
} catch (error) {
|
|
console.error('Failed to update maintenance schedule:', error);
|
|
throw error;
|
|
}
|
|
};
|
|
|
|
const handleScheduleEditClose = () => {
|
|
setScheduleEditDialogOpen(false);
|
|
setEditingSchedule(null);
|
|
};
|
|
|
|
const handleScheduleDelete = async (scheduleId: string) => {
|
|
try {
|
|
await deleteSchedule(scheduleId);
|
|
queryClient.refetchQueries({ queryKey: ['maintenanceSchedules'] });
|
|
} catch (error) {
|
|
console.error('Failed to delete maintenance schedule:', error);
|
|
}
|
|
};
|
|
|
|
const isLoading = activeTab === 'records' ? isRecordsLoading : isSchedulesLoading;
|
|
const hasError = activeTab === 'records' ? recordsError : schedulesError;
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Header */}
|
|
<GlassCard>
|
|
<div className="p-4">
|
|
<h2 className="text-lg font-semibold text-slate-800 dark:text-avus mb-3">Maintenance</h2>
|
|
|
|
{/* Vehicle Selector */}
|
|
<Box sx={{ mb: 2 }}>
|
|
<FormControl fullWidth>
|
|
<InputLabel id="maintenance-mobile-vehicle-select-label">Vehicle</InputLabel>
|
|
<Select
|
|
labelId="maintenance-mobile-vehicle-select-label"
|
|
value={selectedVehicleId}
|
|
onChange={(e) => setSelectedVehicleId(e.target.value as string)}
|
|
label="Vehicle"
|
|
disabled={isLoadingVehicles}
|
|
sx={{ minHeight: 44 }}
|
|
>
|
|
{vehicles && vehicles.length > 0 ? (
|
|
vehicles.map((vehicle) => (
|
|
<MenuItem key={vehicle.id} value={vehicle.id} sx={{ minHeight: 44 }}>
|
|
{getVehicleSubtitle(vehicle) || 'Unknown Vehicle'}
|
|
</MenuItem>
|
|
))
|
|
) : (
|
|
<MenuItem disabled>No vehicles available</MenuItem>
|
|
)}
|
|
</Select>
|
|
</FormControl>
|
|
</Box>
|
|
|
|
{/* Tabs */}
|
|
<Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 2 }}>
|
|
<Tabs
|
|
value={activeTab}
|
|
onChange={(_, v) => {
|
|
setActiveTab(v as 'records' | 'schedules');
|
|
setShowForm(false);
|
|
}}
|
|
aria-label="Maintenance tabs"
|
|
sx={{
|
|
minHeight: 40,
|
|
'& .MuiTab-root': {
|
|
minHeight: 40,
|
|
fontSize: '0.875rem',
|
|
textTransform: 'none',
|
|
},
|
|
}}
|
|
>
|
|
<Tab label="Records" value="records" />
|
|
<Tab label="Schedules" value="schedules" />
|
|
</Tabs>
|
|
</Box>
|
|
|
|
{/* Add Button */}
|
|
<div className="flex justify-end mb-3">
|
|
<Button
|
|
onClick={() => setShowForm(!showForm)}
|
|
className="min-h-[44px]"
|
|
>
|
|
{showForm ? 'Cancel' : activeTab === 'records' ? 'Add Record' : 'Add Schedule'}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Loading State */}
|
|
{isLoading && (
|
|
<div className="text-slate-500 dark:text-titanio py-6 text-center">
|
|
Loading maintenance {activeTab}...
|
|
</div>
|
|
)}
|
|
|
|
{/* Error State */}
|
|
{hasError && (
|
|
<div className="py-6 text-center">
|
|
<p className="text-red-600 text-sm mb-3">Failed to load maintenance {activeTab}</p>
|
|
<button
|
|
onClick={() => window.location.reload()}
|
|
className="px-4 py-2 bg-red-600 text-white rounded-lg text-sm"
|
|
>
|
|
Retry
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</GlassCard>
|
|
|
|
{/* Form */}
|
|
{showForm && !isLoading && !hasError && (
|
|
<GlassCard>
|
|
<div className="p-4">
|
|
<h3 className="text-base font-semibold text-slate-800 dark:text-avus mb-3">
|
|
{activeTab === 'records' ? 'New Maintenance Record' : 'New Maintenance Schedule'}
|
|
</h3>
|
|
{activeTab === 'records' ? (
|
|
<MaintenanceRecordForm vehicleId={selectedVehicleId} />
|
|
) : (
|
|
<MaintenanceScheduleForm vehicleId={selectedVehicleId} />
|
|
)}
|
|
</div>
|
|
</GlassCard>
|
|
)}
|
|
|
|
{/* Records List */}
|
|
{activeTab === 'records' && !isLoading && !hasError && (
|
|
<GlassCard>
|
|
<div className="p-4">
|
|
<h3 className="text-base font-semibold text-slate-800 dark:text-avus mb-3">
|
|
Recent Records
|
|
</h3>
|
|
{records && records.length === 0 ? (
|
|
<div className="py-8 text-center">
|
|
<p className="text-slate-600 dark:text-titanio text-sm mb-3">No maintenance records yet</p>
|
|
<p className="text-slate-500 dark:text-titanio text-xs">
|
|
Add a record to track your vehicle maintenance
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<MaintenanceRecordsList
|
|
records={records || []}
|
|
onEdit={handleEdit}
|
|
onDelete={handleDelete}
|
|
/>
|
|
)}
|
|
</div>
|
|
</GlassCard>
|
|
)}
|
|
|
|
{/* Schedules List */}
|
|
{activeTab === 'schedules' && !isLoading && !hasError && (
|
|
<GlassCard>
|
|
<div className="p-4">
|
|
<h3 className="text-base font-semibold text-slate-800 dark:text-avus mb-3">
|
|
Maintenance Schedules
|
|
</h3>
|
|
{schedules && schedules.length === 0 ? (
|
|
<div className="py-8 text-center">
|
|
<p className="text-slate-600 dark:text-titanio text-sm mb-3">No schedules yet</p>
|
|
<p className="text-slate-500 dark:text-titanio text-xs">
|
|
Create a schedule to get maintenance reminders
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<MaintenanceSchedulesList
|
|
schedules={schedules || []}
|
|
onEdit={handleScheduleEdit}
|
|
onDelete={handleScheduleDelete}
|
|
/>
|
|
)}
|
|
</div>
|
|
</GlassCard>
|
|
)}
|
|
|
|
{/* Edit Dialogs */}
|
|
<MaintenanceRecordEditDialog
|
|
open={editDialogOpen}
|
|
record={editingRecord}
|
|
onClose={handleEditClose}
|
|
onSave={handleEditSave}
|
|
/>
|
|
<MaintenanceScheduleEditDialog
|
|
open={scheduleEditDialogOpen}
|
|
schedule={editingSchedule}
|
|
onClose={handleScheduleEditClose}
|
|
onSave={handleScheduleEditSave}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MaintenanceMobileScreen;
|