# NewEnglandBio Frontend

SvelteKit web application for heating oil and biofuel price comparison across New England's 6 states (MA, CT, RI, VT, NH, ME).

## Tech Stack

- **Framework:** SvelteKit with TypeScript
- **Styling:** Tailwind CSS + DaisyUI
- **Icons:** lucide-svelte
- **Build:** Vite, adapter-node
- **Maps:** Pure SVG (no map library) — path data in `src/lib/states/*.ts`

## Project Structure

```
src/
├── lib/
│   ├── api/
│   │   ├── client.ts        # Fetch wrapper with auth, error handling
│   │   ├── types.ts         # API response types
│   │   └── index.ts
│   ├── types/
│   │   └── types.ts         # App-wide TypeScript interfaces
│   ├── states/              # SVG county path data per state
│   │   ├── connecticut.ts
│   │   ├── maine.ts
│   │   ├── massachusetts.ts
│   │   ├── newhampshire.ts
│   │   ├── rhodeisland.ts
│   │   └── vermont.ts
│   └── states.ts            # State/county stores and data
└── routes/
    ├── +error.svelte
    └── (app)/
        ├── +layout.svelte           # Navbar, footer, dark mode
        ├── +page.svelte             # Home — interactive NE state map
        ├── login/+page.svelte
        ├── register/+page.svelte
        ├── [stateSlug]/
        │   ├── +page.svelte         # County map for a state
        │   └── [countySlug]/
        │       └── +page.svelte     # Listings & oil prices for a county
        └── vendor/
            ├── +layout.svelte
            ├── +page.svelte          # Vendor dashboard
            ├── profile/+page.svelte  # Edit company profile
            └── listing/
                ├── +page.svelte      # Create listing
                └── [id]/+page.svelte # Edit listing
```

## Routes

| Path | Access | Description |
|------|--------|-------------|
| `/` | Public | Interactive New England map |
| `/login` | Public | Login form |
| `/register` | Public | Registration form |
| `/:stateSlug` | Public | County map for a state (e.g. `/MA`) |
| `/:stateSlug/:countySlug` | Public | Listings and oil prices for a county |
| `/vendor` | Auth | Vendor dashboard |
| `/vendor/profile` | Auth | Edit company profile |
| `/vendor/listing` | Auth | Create new listing |
| `/vendor/listing/:id` | Auth | Edit a listing |

## Setup

```bash
npm install
```

### Environment

Create `.env`:

```
PUBLIC_API_URL=http://localhost:9552
```

### Development

```bash
npm run dev
```

Dev server starts on **port 5169** with `--host` for network access. Vite proxies `/api` requests to the Rust API during development.

### Production Build

```bash
npm run build
node build
```

Runs on **port 3000** using adapter-node.

## Docker

**Development:**
```bash
docker build -f Dockerfile -t frontend-dev .
```

**Production (multi-stage):**
```bash
docker build -f Dockerfile.prod -t frontend-prod .
docker run -p 3000:3000 frontend-prod
```

## API Client

The API client (`src/lib/api/client.ts`) provides typed methods for all backend interactions:

- **Auth:** `login()`, `register()`, `logout()`, `isAuthenticated()`, `getStoredUser()`
- **Company:** `getCompany()`, `createCompany()`, `updateCompany()`, `deleteCompany()`
- **Listings:** `getListings()`, `getListingById()`, `createListing()`, `updateListing()`, `deleteListing()`
- **Public:** `getListingsByCounty()`, `getOilPricesByCounty()`, `getCountiesByState()`, `getCategories()`

Auth uses JWT stored as an httpOnly cookie. User info cached in localStorage.

## Styling

Tailwind + DaisyUI with two themes (light/dark). Custom utility classes:

- `.btn-blue-oil` — primary CTA buttons
- `.bg-orange-oil` — accent backgrounds
- `.btn-state` — map state buttons

## Scripts

| Command | Description |
|---------|-------------|
| `npm run dev` | Dev server (port 5169) |
| `npm run build` | Production build |
| `npm run preview` | Preview production build |
| `npm run check` | Svelte type checking |
| `npm run check:watch` | Type checking (watch mode) |

## Known Issues

- Maine SVG map paths are inaccurate (CRIT-001)
- API URL `http://localhost:9552` is hardcoded in some components