# fuel-logs/

Fuel log tracking UI with receipt OCR scanning. Captures fuel purchases, calculates statistics, and supports camera-based receipt scanning that auto-extracts fields and matches gas stations.

## Subdirectories

| Directory | What | When to read |
| --------- | ---- | ------------ |
| `api/` | Fuel log API endpoints | API integration |
| `components/` | Form components, receipt OCR UI, stats display | UI changes |
| `hooks/` | Data fetching, receipt OCR orchestration, user settings | Business logic |
| `pages/` | FuelLogsPage | Page layout |
| `types/` | TypeScript type definitions | Type changes |

## Key Files

| File | What | When to read |
| ---- | ---- | ------------ |
| `hooks/useReceiptOcr.ts` | Receipt OCR orchestration: camera capture, OCR extraction via /ocr/extract/receipt, station matching via /stations/match, field mapping | Receipt scanning flow, OCR integration |
| `components/ReceiptOcrReviewModal.tsx` | Modal for reviewing OCR-extracted receipt fields with confidence indicators, inline editing, station match display | Receipt review UI, field editing |
| `components/ReceiptCameraButton.tsx` | Button to trigger receipt camera capture (tier-gated) | Receipt capture entry point |
| `components/FuelLogForm.tsx` | Main fuel log form with OCR integration (setValue from accepted receipt) | Form fields, OCR field mapping |
| `components/ReceiptPreview.tsx` | Receipt image preview | Receipt display |
| `components/StationPicker.tsx` | Gas station selection with search | Station selection UI |
| `components/FuelLogsList.tsx` | Fuel log list display | Log listing |
| `components/FuelStatsCard.tsx` | Fuel statistics summary | Statistics display |
| `hooks/useFuelLogs.tsx` | CRUD operations for fuel logs | Data management |
| `types/fuel-logs.types.ts` | FuelLogResponse, CreateFuelLogRequest, LocationData, UnitSystem | Type definitions |

## Receipt OCR Flow

```
ReceiptCameraButton (tier check)
    |
    v
useReceiptOcr.startCapture() -> CameraCapture (shared component)
    |
    v
useReceiptOcr.processImage() -> POST /api/ocr/extract/receipt
    |
    v
ReceiptOcrReviewModal (display extracted fields, confidence indicators)
    |
    +-- POST /api/stations/match (merchantName -> station match)
    |
    v
useReceiptOcr.acceptResult() -> FuelLogForm.setValue() (pre-fill form)
```