Initial Commit

frontend/src/features/fuel-logs/components/FuelLogsList.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Card, CardContent, Typography, List, ListItem, ListItemText, Chip, Box } from '@mui/material';
+import { FuelLogResponse } from '../types/fuel-logs.types';
+
+export const FuelLogsList: React.FC<{ logs?: FuelLogResponse[] }>= ({ logs }) => {
+  if (!logs || logs.length === 0) {
+    return (
+      <Card variant="outlined"><CardContent><Typography variant="body2" color="text.secondary">No fuel logs yet.</Typography></CardContent></Card>
+    );
+  }
+  return (
+    <List>
+      {logs.map((log) => (
+        <ListItem key={log.id} divider>
+          <ListItemText
+            primary={`${new Date(log.dateTime).toLocaleString()} – $${(log.totalCost || 0).toFixed(2)}`}
+            secondary={`${(log.fuelUnits || 0).toFixed(3)} @ $${(log.costPerUnit || 0).toFixed(3)} • ${log.odometerReading ? `Odo: ${log.odometerReading}` : `Trip: ${log.tripDistance}`}`}
+          />
+          {log.efficiency && typeof log.efficiency === 'number' && !isNaN(log.efficiency) && (
+            <Box><Chip label={`${log.efficiency.toFixed(1)} ${log.efficiencyLabel}`} size="small" color="primary" /></Box>
+          )}
+        </ListItem>
+      ))}
+    </List>
+  );
+};
+