# Feuerwehr Dashboard - Frontend

React + TypeScript + Vite frontend application for the fire department dashboard.

## Tech Stack

- **React 18.2** - UI library
- **TypeScript 5.2** - Type safety
- **Vite 5.0** - Build tool and dev server
- **React Router DOM 6.20** - Client-side routing
- **Material-UI 5.14** - Component library
- **Axios** - HTTP client
- **Emotion** - CSS-in-JS styling

## Project Structure

```
frontend/
├── src/
│   ├── components/          # Reusable UI components
│   │   ├── auth/           # Authentication components
│   │   ├── dashboard/      # Dashboard-specific components
│   │   └── shared/         # Shared components
│   ├── contexts/           # React contexts for state management
│   ├── pages/              # Page components
│   │   ├── Login.tsx
│   │   ├── Dashboard.tsx
│   │   └── NotFound.tsx
│   ├── services/           # API service layer
│   ├── types/              # TypeScript type definitions
│   ├── utils/              # Utility functions
│   ├── App.tsx             # Root component with routing
│   ├── main.tsx            # Application entry point
│   └── vite-env.d.ts       # Vite environment types
├── index.html              # HTML template
├── vite.config.ts          # Vite configuration
├── tsconfig.json           # TypeScript configuration
├── tsconfig.node.json      # TypeScript config for Node
└── package.json            # Dependencies and scripts
```

## Getting Started

### Prerequisites

- Node.js 18+ and npm

### Installation

```bash
npm install
```

### Development

Start the development server:

```bash
npm run dev
```

The application will be available at `http://localhost:5173`

### Build

Create a production build:

```bash
npm run build
```

The build output will be in the `dist/` directory.

### Preview

Preview the production build:

```bash
npm run preview
```

## Environment Variables

Create a `.env.development` file for development:

```
VITE_API_URL=http://localhost:3000
```

For production, create a `.env.production` file with appropriate values.

## Available Scripts

- `npm run dev` - Start development server
- `npm run build` - Create production build
- `npm run preview` - Preview production build locally
- `npm run lint` - Run ESLint (when configured)

## Routing

The application uses React Router with the following routes:

- `/` - Login page (default)
- `/login` - Login page
- `/dashboard` - Dashboard (main application)
- `/*` - 404 Not Found page

## Features

### Current

- Basic routing structure
- Login page with Material-UI
- Dashboard placeholder
- 404 Not Found page
- Material-UI theming
- TypeScript type safety

### Planned

- Authentication context and JWT handling
- Protected routes
- API integration
- Member management
- Vehicle tracking
- Equipment inventory
- Incident reporting
- And more...

## Configuration

### Vite Configuration

The `vite.config.ts` includes:

- React plugin
- Path alias (`@/` → `./src/`)
- Dev server on port 5173
- API proxy to backend (`/api` → `http://localhost:3000`)
- Source maps for production builds

### TypeScript Configuration

Strict mode enabled with:

- ES2020 target
- Bundler module resolution
- Path mapping for `@/` imports
- Strict type checking

## Styling

Material-UI with custom theme:

- Primary color: Red (#d32f2f) - Fire department theme
- Secondary color: Blue (#1976d2)
- Light mode by default
- Emotion for CSS-in-JS

## Development Notes

- All pages are currently placeholders
- Authentication is not yet implemented
- API integration pending
- Add actual business logic as backend becomes available