50dbf6e9fd
FDISK sync: - fix(sync): strip 'KFZ-Führerschein / ' prefix from license class select option text before whitelist validation - fix(sync): fix navigateAndGetTableRows to pick date column with most matches (prevents sidebar tables from hijacking dateColIdx for Beförderungen) - fix(sync): input.value fallback now falls through to textContent when value is empty - feat(sync): expand Ausbildungen to capture Kursnummer, Kurz, Kurs (full name), Erfolgscode from FDISK table; add migration 086 External orders (Bestellungen): - fix(bestellungen): allow erhalten_menge editing in lieferung_pruefen status (resolves deadlock preventing order completion) - fix(bestellungen): show cost/received warnings for bestellt/teillieferung/lieferung_pruefen, not just when abgeschlossen is next - feat(bestellungen): rename status labels to Eingereicht, Genehmigt, Teilweise geliefert, Vollständig geliefert - fix(bestellungen): remove duplicate Bestelldatum from PDF export - feat(bestellungen): add catalog item autocomplete to creation form (auto-fills bezeichnung + artikelnummer) Internal orders (Ausruestungsanfrage): - fix(ausruestung): untracked items with zuweisung_typ='keine' now appear in Nicht-zugewiesen tab (frontend filter was too strict) - feat(ausruestung): load user-specific personal items when ordering for another user - feat(ausruestung): auto-set ist_ersatz=true for items from personal equipment list; add toggle for catalog/free-text items - feat(ausruestung): load item eigenschaften when personal item with artikel_id is checked Ausbildungen display: - feat(mitglieder): show kursname (full), kurs_kurzbezeichnung chip, erfolgscode chip (color-coded) per Ausbildung entry Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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
npm install
Development
Start the development server:
npm run dev
The application will be available at http://localhost:5173
Build
Create a production build:
npm run build
The build output will be in the dist/ directory.
Preview
Preview the production build:
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 servernpm run build- Create production buildnpm run preview- Preview production build locallynpm 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