Fix Auth Errors

frontend/src/App.tsx

@@ -3,6 +3,7 @@
  */
 
 import { useState, useEffect, useTransition, useCallback, lazy } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
 import { Routes, Route, Navigate } from 'react-router-dom';
 import { useAuth0 } from '@auth0/auth0-react';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -30,7 +31,10 @@ import { RouteSuspense } from './components/SuspenseWrappers';
 import { Vehicle } from './features/vehicles/types/vehicles.types';
 import { FuelLogForm } from './features/fuel-logs/components/FuelLogForm';
 import { FuelLogsList } from './features/fuel-logs/components/FuelLogsList';
+import { FuelLogEditDialog } from './features/fuel-logs/components/FuelLogEditDialog';
 import { useFuelLogs } from './features/fuel-logs/hooks/useFuelLogs';
+import { FuelLogResponse, UpdateFuelLogRequest } from './features/fuel-logs/types/fuel-logs.types';
+import { fuelLogsApi } from './features/fuel-logs/api/fuel-logs.api';
 import { VehicleForm } from './features/vehicles/components/VehicleForm';
 import { useOptimisticVehicles } from './features/vehicles/hooks/useOptimisticVehicles';
 import { CreateVehicleRequest } from './features/vehicles/types/vehicles.types';
@@ -161,7 +165,62 @@ function App() {
   );
 
   const LogFuelScreen = () => {
-    const { fuelLogs, isLoading, error } = useFuelLogs();
+    const queryClient = useQueryClient();
+    const [editingLog, setEditingLog] = useState<FuelLogResponse | null>(null);
+
+    // Safe hook usage with error boundary protection
+    let fuelLogs, isLoading, error;
+
+    try {
+      const hookResult = useFuelLogs();
+      fuelLogs = hookResult.fuelLogs;
+      isLoading = hookResult.isLoading;
+      error = hookResult.error;
+    } catch (hookError) {
+      console.error('[LogFuelScreen] Hook error:', hookError);
+      error = hookError;
+    }
+
+    const handleEdit = (log: FuelLogResponse) => {
+      // Defensive validation before setting editing log
+      if (!log || !log.id) {
+        console.error('[LogFuelScreen] Invalid log data for edit:', log);
+        return;
+      }
+
+      try {
+        setEditingLog(log);
+      } catch (error) {
+        console.error('[LogFuelScreen] Error setting editing log:', error);
+      }
+    };
+
+    const handleDelete = async (_logId: string) => {
+      try {
+        // Invalidate queries to refresh the data
+        queryClient.invalidateQueries({ queryKey: ['fuelLogs'] });
+        queryClient.invalidateQueries({ queryKey: ['fuelLogsStats'] });
+      } catch (error) {
+        console.error('Failed to refresh fuel logs after delete:', error);
+      }
+    };
+
+    const handleSaveEdit = async (id: string, data: UpdateFuelLogRequest) => {
+      try {
+        await fuelLogsApi.update(id, data);
+        // Invalidate queries to refresh the data
+        queryClient.invalidateQueries({ queryKey: ['fuelLogs'] });
+        queryClient.invalidateQueries({ queryKey: ['fuelLogsStats'] });
+        setEditingLog(null);
+      } catch (error) {
+        console.error('Failed to update fuel log:', error);
+        throw error; // Re-throw to let the dialog handle the error
+      }
+    };
+
+    const handleCloseEdit = () => {
+      setEditingLog(null);
+    };
 
     if (error) {
       return (
@@ -181,20 +240,51 @@ function App() {
       );
     }
 
+    // Add loading state for component initialization
+    if (isLoading === undefined) {
+      return (
+        <div className="space-y-4">
+          <GlassCard>
+            <div className="text-center py-8 text-slate-500">
+              Initializing fuel logs...
+            </div>
+          </GlassCard>
+        </div>
+      );
+    }
+
     return (
       <div className="space-y-4">
-        <FuelLogForm />
-        <GlassCard>
-          <div className="py-2">
-            {isLoading ? (
-              <div className="text-center py-8 text-slate-500">
-                Loading fuel logs...
-              </div>
-            ) : (
-              <FuelLogsList logs={fuelLogs || []} />
-            )}
-          </div>
-        </GlassCard>
+        <MobileErrorBoundary screenName="FuelLogForm" key="fuel-form">
+          <FuelLogForm />
+        </MobileErrorBoundary>
+        <MobileErrorBoundary screenName="FuelLogsSection" key="fuel-section">
+          <GlassCard>
+            <div className="py-2">
+              {isLoading ? (
+                <div className="text-center py-8 text-slate-500">
+                  Loading fuel logs...
+                </div>
+              ) : (
+                <FuelLogsList
+                  logs={fuelLogs || []}
+                  onEdit={handleEdit}
+                  onDelete={handleDelete}
+                />
+              )}
+            </div>
+          </GlassCard>
+        </MobileErrorBoundary>
+
+        {/* Edit Dialog */}
+        <MobileErrorBoundary screenName="FuelLogEditDialog" key="fuel-edit-dialog">
+          <FuelLogEditDialog
+            open={!!editingLog}
+            log={editingLog}
+            onClose={handleCloseEdit}
+            onSave={handleSaveEdit}
+          />
+        </MobileErrorBoundary>
       </div>
     );
   };