# Frontend Architecture (Next.js)

**Note:** This document describes a *conceptual* architecture and is not a final, binding requirement.

The frontend uses **Next.js** with **TypeScript** and **FPTS** for functional programming.

## Project Structure

```
timetracker-frontend/
├── public/                         # Statische Dateien
│   ├── assets/
│   └── locales/                    # i18n Übersetzungen
├── src/
│   ├── app/                        # Next.js App Router
│   │   ├── api/                    # API Routes
│   │   ├── (auth)/                 # Auth Pages
│   │   ├── dashboard/
│   │   ├── time-tracking/
│   │   ├── projects/
│   │   └── ...
│   ├── domain/                     # Domain Model (analog zu Backend)
│   │   ├── entities/               # Domain Entities
│   │   │   ├── user.ts
│   │   │   ├── timeEntry.ts
│   │   │   ├── project.ts
│   │   │   └── ...
│   │   └── valueObjects/           # Value Objects
│   │       ├── money.ts
│   │       ├── duration.ts
│   │       └── ...
│   ├── application/                # Anwendungsfälle
│   │   ├── auth/                   # Auth Use Cases
│   │   ├── timeTracking/           # Time Tracking Use Cases
│   │   ├── projects/               # Projects Use Cases
│   │   └── ...
│   ├── infrastructure/             # Infrastruktur
│   │   ├── api/                    # API Client
│   │   │   ├── apiClient.ts        # Axios Konfiguration
│   │   │   ├── endpoints.ts        # API Endpunkte
│   │   │   └── interceptors.ts     # Request/Response Interceptors
│   │   ├── storage/                # Lokale Speicherung
│   │   │   ├── localStorage.ts
│   │   │   └── sessionStorage.ts
│   │   └── external/               # Externe Dienste
│   │       └── ...
│   ├── presentation/               # Präsentationsschicht
│   │   ├── components/             # UI Komponenten
│   │   │   ├── common/             # Allgemeine Komponenten
│   │   │   │   ├── Button/
│   │   │   │   ├── Card/
│   │   │   │   └── ...
│   │   │   ├── layout/             # Layout Komponenten
│   │   │   │   ├── Navbar/
│   │   │   │   ├── Sidebar/
│   │   │   │   └── ...
│   │   │   ├── timeTracker/        # Zeiterfassung Komponenten
│   │   │   │   ├── Timer/
│   │   │   │   ├── EntryForm/
│   │   │   │   └── ...
│   │   │   └── ...
│   │   ├── hooks/                  # Custom React Hooks
│   │   │   ├── useAuth.ts
│   │   │   ├── useTimeTracking.ts
│   │   │   └── ...
│   │   ├── providers/              # Context Provider
│   │   │   ├── AuthProvider.tsx
│   │   │   ├── ThemeProvider.tsx
│   │   │   └── ...
│   │   └── pages/                  # Page Components (für App Router)
│   │       ├── DashboardPage.tsx
│   │       ├── TimeTrackingPage.tsx
│   │       └── ...
│   ├── utils/                      # Utilities
│   │   ├── fp/                     # Funktionale Programmierung (FPTS)
│   │   │   ├── option.ts
│   │   │   ├── result.ts
│   │   │   └── ...
│   │   ├── date/                   # Datumsfunktionen
│   │   │   └── dateUtils.ts
│   │   ├── formatting/             # Formattierung
│   │   │   ├── numberFormat.ts
│   │   │   └── ...
│   │   └── validation/             # Validierung
│   │       └── validators.ts
│   ├── types/                      # TypeScript Typendefinitionen
│   │   ├── api.ts                  # API Response/Request Typen
│   │   ├── auth.ts                 # Auth Typen
│   │   └── ...
│   └── styles/                     # Globale Styles
│       ├── globals.css
│       └── theme.ts
├── docu/                           # Frontend-spezifische Dokumentation
│   ├── component_library.md
│   ├── state_management.md
│   └── ...
├── next.config.js
├── tailwind.config.js
├── tsconfig.json
├── package.json
└── README.md
```