SWR Data Flows & Mutation UX

// The standard fetcher for list endpoints
export const listFetcher = async (url: string) => {
  const res = await fetch(url);
  if (!res.ok) {
    const body = await res.json();
    throw new Error(body.error?.message || 'Request failed');
  }
  const json = await res.json();
  return json.data; // Extracts from the { data: [...], meta: {...} } envelope
};

// The standard fetcher for mutation endpoints
export const mutationFetcher = async (
  url: string,
  { arg }: { arg: { method: string; body?: unknown } }
) => {
  const res = await fetch(url, {
    method: arg.method,
    headers: { 'Content-Type': 'application/json' },
    body: arg.body ? JSON.stringify(arg.body) : undefined,
  });
  if (!res.ok) {
    const body = await res.json();
    throw new Error(body.error?.message || 'Request failed');
  }
  return res.json();
};

import useSWR from 'swr';
import useSWRMutation from 'swr/mutation';
import { listFetcher, mutationFetcher } from '@/lib/swr-helpers';

export function useVehicleFleet() {
  const { data, error, isLoading, mutate } = useSWR(
    '/api/vehicle-fleet',
    listFetcher
  );

  const { trigger: create } = useSWRMutation(
    '/api/vehicle-fleet',
    mutationFetcher
  );

  const { trigger: update } = useSWRMutation(
    '/api/vehicle-fleet',
    mutationFetcher
  );

  const { trigger: remove } = useSWRMutation(
    '/api/vehicle-fleet',
    mutationFetcher
  );

  return {
    data,
    error,
    isLoading,
    create: (body: VehicleFleetCreate) =>
      create({ method: 'POST', body }),
    update: (body: VehicleFleetUpdate) =>
      update({ method: 'PUT', body }),
    remove: (id: number) =>
      remove({ method: 'DELETE', body: { id } }),
    mutate,
  };
}

const [snackbar, setSnackbar] = useState<{
  open: boolean;
  message: string;
  severity: 'success' | 'error';
}>({ open: false, message: '', severity: 'success' });

const handleCreate = async (formData: VehicleFleetCreate) => {
  try {
    await create(formData);
    await mutate(); // Revalidate the list
    setSnackbar({
      open: true,
      message: 'Vehicle added successfully',
      severity: 'success',
    });
  } catch (err) {
    setSnackbar({
      open: true,
      message: err instanceof Error ? err.message : 'Failed to add vehicle',
      severity: 'error',
    });
  }
};

const handleStatusToggle = async (vehicle: VehicleFleetRow) => {
  const newStatus = vehicle.status === 'active' ? 'inactive' : 'active';

  // Optimistically update the local cache
  await mutate(
    data?.map(v =>
      v.id === vehicle.id ? { ...v, status: newStatus } : v
    ),
    { revalidate: false }
  );

  try {
    await update({ id: vehicle.id, status: newStatus });
    await mutate(); // Revalidate with server truth
    setSnackbar({ open: true, message: 'Status updated', severity: 'success' });
  } catch (err) {
    // Rollback: revalidate from server to restore original state
    await mutate();
    setSnackbar({
      open: true,
      message: err instanceof Error ? err.message : 'Failed to update status',
      severity: 'error',
    });
  }
};

Build the vehicle-fleet page component at
src/app/(protected)/vehicle-fleet/page.tsx

Requirements:

1. DATA FETCHING:
   - Import useVehicleFleet from '@/hooks/useVehicleFleet'
   - Use the hook's data, error, isLoading, create, update, remove, mutate
   - Show MUI Skeleton while isLoading is true
   - Show error alert if error is defined

2. TABLE:
   - MUI DataGrid with columns: vehicle_id, make, model, year,
     assigned_to, status, actions
   - Sortable columns
   - Status column renders colored chip (active=green, inactive=gray,
     maintenance=amber)

3. MUTATIONS WITH FEEDBACK:
   - Add button opens MUI Dialog with form fields
   - Edit button opens same dialog pre-populated
   - Delete button opens confirmation dialog, then soft-deletes
   - MUI Snackbar after every mutation (success green, error red)
   - NO empty catch blocks -- every error shows in the snackbar
   - Optimistic update for status toggle (active ↔ inactive)

4. SWR PATTERNS:
   - After create/update: await mutate() to revalidate
   - After delete: await mutate() to revalidate
   - Optimistic status toggle with rollback on error
   - No direct fetch() calls -- everything goes through the hook

5. DENSITY:
   - Wrap the content in DensityGate from '@/components/DensityGate'
   - Executive: summary cards (total vehicles, active count, by status)
   - Operational: the full DataGrid with actions
   - Technical: DataGrid plus raw JSON viewer and audit columns

6. STYLING:
   - 'use client' directive at top
   - MUI 7 components throughout
   - Import module CSS from '@/styles/vehicle-fleet.module.css'

Every mutation MUST show feedback. No silent operations.