Update

frontend/src/features/maintenance/pages/MaintenancePage.tsx

@@ -0,0 +1,117 @@
+/**
+ * @ai-summary Main page for maintenance feature
+ * @ai-context Two-column responsive layout following fuel-logs pattern
+ */
+
+import React, { useState } from 'react';
+import { Grid, Typography, Box } from '@mui/material';
+import { useQueryClient } from '@tanstack/react-query';
+import { MaintenanceRecordForm } from '../components/MaintenanceRecordForm';
+import { MaintenanceRecordsList } from '../components/MaintenanceRecordsList';
+import { MaintenanceRecordEditDialog } from '../components/MaintenanceRecordEditDialog';
+import { useMaintenanceRecords } from '../hooks/useMaintenanceRecords';
+import { FormSuspense } from '../../../components/SuspenseWrappers';
+import type { MaintenanceRecordResponse, UpdateMaintenanceRecordRequest } from '../types/maintenance.types';
+
+export const MaintenancePage: React.FC = () => {
+  const { records, isRecordsLoading, recordsError, updateRecord, deleteRecord } = useMaintenanceRecords();
+  const queryClient = useQueryClient();
+  const [editingRecord, setEditingRecord] = useState<MaintenanceRecordResponse | null>(null);
+  const [editDialogOpen, setEditDialogOpen] = useState(false);
+
+  const handleEdit = (record: MaintenanceRecordResponse) => {
+    setEditingRecord(record);
+    setEditDialogOpen(true);
+  };
+
+  const handleEditSave = async (id: string, data: UpdateMaintenanceRecordRequest) => {
+    try {
+      await updateRecord({ id, data });
+      // Refetch queries after update
+      queryClient.refetchQueries({ queryKey: ['maintenanceRecords'] });
+      setEditDialogOpen(false);
+      setEditingRecord(null);
+    } catch (error) {
+      console.error('Failed to update maintenance record:', error);
+      throw error; // Re-throw to let dialog handle the error
+    }
+  };
+
+  const handleEditClose = () => {
+    setEditDialogOpen(false);
+    setEditingRecord(null);
+  };
+
+  const handleDelete = async (recordId: string) => {
+    try {
+      await deleteRecord(recordId);
+      // Refetch queries after delete
+      queryClient.refetchQueries({ queryKey: ['maintenanceRecords', 'all'] });
+    } catch (error) {
+      console.error('Failed to delete maintenance record:', error);
+    }
+  };
+
+  if (isRecordsLoading) {
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '50vh',
+        }}
+      >
+        <Typography color="text.secondary">Loading maintenance records...</Typography>
+      </Box>
+    );
+  }
+
+  if (recordsError) {
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '50vh',
+        }}
+      >
+        <Typography color="error">
+          Failed to load maintenance records. Please try again.
+        </Typography>
+      </Box>
+    );
+  }
+
+  return (
+    <FormSuspense>
+      <Grid container spacing={2}>
+        {/* Left Column: Form */}
+        <Grid item xs={12} md={6}>
+          <MaintenanceRecordForm />
+        </Grid>
+
+        {/* Right Column: Records List */}
+        <Grid item xs={12} md={6}>
+          <Typography variant="h6" gutterBottom>
+            Recent Maintenance Records
+          </Typography>
+          <MaintenanceRecordsList
+            records={records}
+            onEdit={handleEdit}
+            onDelete={handleDelete}
+          />
+        </Grid>
+      </Grid>
+
+      {/* Edit Dialog */}
+      <MaintenanceRecordEditDialog
+        open={editDialogOpen}
+        record={editingRecord}
+        onClose={handleEditClose}
+        onSave={handleEditSave}
+      />
+    </FormSuspense>
+  );
+};