Family Dashboard

Ein Familien-Dashboard zur Verwaltung von Tickets, Notizen, Terminen und mehr.

Struktur

family-dashboard/
├── FamilyDashboard.Api/              # Backend (ASP.NET Core 10)
│   ├── Program.cs                    # Entry Point & Service Registration
│   ├── Routes/                       # API Routes by Feature
│   │   ├── WeatherRoutes.cs          # Wetter-Endpoints
│   │   ├── ScheduleRoutes.cs         # Stundenplan-Endpoints
│   │   ├── WorkRoutes.cs             # Arbeitsplan-Endpoints
│   │   ├── TicketsRoutes.cs          # Ticket-Endpoints
│   │   ├── ProjectsRoutes.cs         # Projekt-Endpoints
│   │   ├── NotesRoutes.cs            # Notizen-Endpoints
│   │   └── WasteRoutes.cs            # Abfall-Endpoints
│   ├── DbContext/
│   │   └── FamilyDashboardDbContext.cs
│   ├── Schedule/
│   │   ├── IScheduleModelService.cs
│   │   ├── ScheduleUntisModelService.cs
│   │   └── Settings/
│   │       └── LoginSettings.cs
│   ├── Work/
│   │   ├── IWorkModelService.cs
│   │   ├── IWorkTicketsModelService.cs
│   │   ├── WorkUntisModelService.cs
│   │   ├── WorkTicketsModelService.cs
│   │   └── Models/
│   │       ├── WorkModel.cs
│   │       ├── WorkType.cs
│   │       └── WorkSourceType.cs
│   ├── Weather/
│   │   └── WeatherForecastService.cs
│   ├── Waste/
│   │   ├── IcsWasteClient.cs
│   │   └── WasteSettings.cs
│   ├── Tickets/
│   │   ├── Models/
│   │   │   ├── Ticket.cs
│   │   │   └── Project.cs
│   │   ├── Request/
│   │   │   ├── CreateTicketRequest.cs
│   │   │   ├── UpdateTicketRequest.cs
│   │   │   ├── CreateProjectRequest.cs
│   │   │   └── UpdateProjectRequest.cs
│   │   └── Response/
│   │       ├── TicketDto.cs
│   │       └── ProjectDto.cs
│   ├── FamilyDashboard.Api.csproj
│   ├── FamilyDashboard.Api.sln
│   └── FamilyDashboard.Api.Tests/    # API-Tests (NUnit)
│       └── Waste/
│           ├── IcsWasteClientTests.cs
│           ├── WasteCollectionEventTests.cs
│           └── WasteSettingsTests.cs
└── FamilyDashboard.Frontend/         # Frontend (React + Vite + MUI v7)
    ├── src/
    │   ├── components/
    │   │   └── Header.tsx            # Header mit Navigation & Uhrzeit
    │   ├── layout/
    │   │   └── DashboardLayout.tsx   # Haupt-Layout mit Grid
    │   ├── pages/
    │   │   └── tickets/
    │   │       ├── TicketDashboard.tsx  # Ticket-Kanban-Board (Container)
    │   │       ├── types.tsx            # Typen & Konstanten
    │   │       ├── utils.ts             # Hilfsfunktionen
    │   │       └── components/          # Refactored Komponenten
    │   │           ├── TicketDashboardHeader.tsx
    │   │           ├── TicketBoard.tsx
    │   │           ├── TicketColumn.tsx
    │   │           ├── TicketCard.tsx
    │   │           ├── TicketDialog.tsx
    │   │           ├── TicketForm.tsx
    │   │           ├── CommentsSection.tsx
    │   │           ├── CommentItem.tsx
    │   │           ├── ProjectDialog.tsx
    │   │           └── TicketMenu.tsx
    │   ├── features/
    │   │   ├── notes/
    │   │   │   ├── NotesWidget.tsx   # Notizen-Übersicht
    │   │   │   └── NoteCard.tsx      # Einzelne Notiz-Karte
    │   │   ├── calendar/
    │   │   │   └── CalendarWidget.tsx
    │   │   ├── schedule/
    │   │   │   └── ScheduleWidget.tsx
    │   │   ├── homework/
    │   │   │   └── HomeworkWidget.tsx
    │   │   └── weather/
    │   │       └── WeatherWidget.tsx
    │   └── App.tsx                   # React Router + Header
    └── package.json

Dashboard Layout

Grid-Struktur (MUI Grid v7)

┌──────────┬──────────┬──────────┐
│ Kalender │  Wetter  │Stundenpl.│  (50vh, md:4)
├─────────────────────────────────┤
│    Hannah (Untis)    │  Max     │  (auto, md:6)
│      Aufgaben        │ (Tickets)│
├─────────────────────────────────┤
│           Notizen               │  (auto, 12)
└─────────────────────────────────┘

Responsive Verhalten:

• Desktop (md+): 3-Spalten oben (Kalender, Wetter, Stundenplan), 2-Spalten Mitte (Aufgaben Hannah & Max), 1-Spalte unten (Notizen)
• Mobile (xs): Alle Widgets untereinander (1 Spalte)

Features

Ticketsystem

• Kanban-Board mit 5 Status-Spalten (Offen, InBearbeitung, InPruefung, Fertig, Abgebrochen)
• Projekt-Management: Projekte erstellen, Tickets zuordnen
• Ticket-Dashboard: /tickets - Separate Verwaltungsoberfläche
• Notizen als Tickets: Notizen werden als Tickets vom Typ "Notiz" ohne DueDate gespeichert
• Aufgaben als Tickets: Aufgaben werden als Tickets vom Typ "Aufgabe" mit DueDate gespeichert
• Ticket-Typen: PBI, Bug, Notiz, Termin, Aufgabe
• Farbcodierte Status: Jeder Status hat eigene Farbe & Icon
• Farbcodierte Typen: PBI=Blau, Bug=Rot, Notiz=Grau, Termin=Orange, Aufgabe=Grün

Notizen-Widget

• Notizzettel-Design: Jede Notiz als separate Karte
• Gelb/Weiß: Wichtige Notizen (gelb), normale Notizen (weiß)
• Kein Scrollen: Widget passt sich automatisch an
• Wichtig/Löschen: Schnelle Aktionen pro Notiz
• Daten: Zeigt nur Tickets vom Typ "Notiz" ohne DueDate

Header

• Navigation zwischen Dashboard und Tickets
• Live-Uhrzeit (Sekunden-Aktualisierung)
• Datum-Anzeige

Widgets

• CalendarWidget: Kalender-Übersicht
• NotesWidget: Notizen (Tickets vom Typ "Notiz" ohne DueDate)
• ScheduleWidget: Stundenplan (unterstützt type="Untis" und type="Json")
• HomeworkWidget: Hausaufgaben & Tests (Untis + Tickets vom Typ "Aufgabe")
• WeatherWidget: Wettervorhersage

API Endpoints

Wetter (WeatherRoutes.cs)

• GET /weatherforecast/city/{name}?country=X - Wetter nach Stadt
• GET /weatherforecast/location?latitude=X&longitude=Y - Wetter nach Koordinaten
• GET /weatherforecast/daily?latitude=X&longitude=Y - Tagesvorhersage

Stundenplan (ScheduleRoutes.cs)

• GET /schedule?type=X - Stundenplan abrufen
  • type=Untis: Untis-Stundenplan (aus WebUntis API)
  • type=Json: JSON-basierter Stundenplan (aus Ticket-Notiz "Stundenplan")

Arbeitsplan (WorkRoutes.cs)

• GET /work?type=X&memberId=X - Arbeitsplan abrufen
  • type=Untis: Untis-Hausaufgaben
  • type=Tickets: Offene Tickets vom Typ "Aufgabe" mit DueDate (Projekt ID 1)

Tickets (TicketsRoutes.cs)

• GET /tickets - Alle Tickets (optional ?projectId=X)
• GET /tickets/{id} - Einzelnes Ticket
• POST /tickets - Neues Ticket erstellen
• PUT /tickets/{id} - Ticket aktualisieren
• DELETE /tickets/{id} - Ticket löschen

Projekte (ProjectsRoutes.cs)

• GET /projects - Alle Projekte
• GET /projects/{id} - Einzelnes Projekt
• POST /projects - Neues Projekt erstellen
• PUT /projects/{id} - Projekt aktualisieren
• DELETE /projects/{id} - Projekt löschen

Notizen (NotesRoutes.cs)

• GET /notes - Alle Notizen (Tickets vom Typ "Notiz" ohne DueDate)
• POST /notes - Neue Notiz erstellen
• PUT /notes/{id} - Notiz aktualisieren
• DELETE /notes/{id} - Notiz löschen

Abfall (WasteRoutes.cs)

• GET /waste/collection?from=YYYY-MM-DD&to=YYYY-MM-DD - Abfuhrtermine im Zeitraum

Datenbank

MySQL 8.0

• Tickets mit AssigneeMemberId (Zuordnung zu Familienmitgliedern)
• Ticket-Typen: PBI, Bug, Notiz, Termin, Aufgabe
• Tabellen: Tickets, Projects, FamilyMembers, CalendarEvents, Notes, Lessons, Lesson

Tests

Backend (NUnit)

cd FamilyDashboard.Api
dotnet test FamilyDashboard.Api.sln

Frontend (Vitest)

cd FamilyDashboard.Frontend
npm run test:run

Starten

Backend

cd FamilyDashboard.Api
dotnet run

Frontend

cd FamilyDashboard.Frontend
npm install
npm run dev

Tech Stack

Backend:

• ASP.NET Core 10
• Entity Framework Core
• MySQL
• NUnit für Tests
• Minimal API mit Feature-basierten Routen

Frontend:

• React 19
• Vite 7
• Material-UI (MUI) v7
• React Router v6
• Vitest für Tests (30 Tests)

Build

# Frontend
cd FamilyDashboard.Frontend
npm run build

# Backend
cd FamilyDashboard.Api
dotnet build

Authentifizierung

Übersicht

Das Family Dashboard verwendet JWT-basierte Authentifizierung mit BCrypt-passwort-Hashing.

Admin-Benutzer anlegen

Neue Benutzer (insbesondere Admin) werden über die Admin-Oberfläche erstellt:

1. Login mit Admin-Zugangsdaten
2. Navigiere zu /admin
3. Klick auf "Hinzufügen"
4. Passwortfeld ausfüllen (min. 8 Zeichen, Groß-/Kleinbuchstaben, Zahl)

Standard-Admin-Zugangsdaten

Feld	Wert
Email	admin@familydashboard.local
Passwort	Admin123X

Security Features

• BCrypt für Passwort-Hashing (Work Factor: 10)
• JWT Tokens mit 60 Minuten Gültigkeit
• 401-Handling mit automatischem Logout und Redirect
• Password-Strength-Indicator (zxcvbn) für sichere Passwörter

Auth Endpoints

Method	Endpoint	Beschreibung
POST	/auth/login	Benutzer einloggen, JWT Token erhalten
POST	/auth/register	Neues Benutzerkonto erstellen (Admin-only)
POST	/familymembers	Benutzer anlegen (mit Password)
PUT	/familymembers/{id}	Benutzer aktualisieren (optional Password)

Frontend Auth-Service

• authService.login(email, password) - Login mit JWT Token
• authService.logout() - Logout und Token löschen
• authService.isAuthenticated() - Token-Validität prüfen
• authService.getCurrentUser() - Benutzerdaten aus Token

---

CI/CD & Deployment

Die Deployment-Pipeline ist vollautomatisiert über Forgejo CI/CD.

Build Pipeline (.forgejo/workflows/build.yml)

Baut Docker-Images aus dem Quellcode und pusht sie ins Forgejo Registry (git.leik4hub.de).

Trigger: Manuell (workflow_dispatch) mit Major/Minor-Version

Versionsschema: {major}.{minor}.{run_number} (z.B. 1.3.47)

Deploy Pipeline (.forgejo/workflows/deploy.yml)

Zieht die gebauten Images aus dem Registry und startet Container via docker compose.

Trigger: Manuell (workflow_dispatch) mit Version-Tag

Infrastruktur

• Runner: Selbst-hosted Runner (Ubuntu, Docker)
• Registry: git.leik4hub.de/relei/familydashboard-{api,frontend}
• Container: docker-compose.yml (API auf Port 8080, Frontend auf Port 8081)

Deploy-Ablauf

1. Build-Workflow in ForgeUI manuell starten (Version wählen)
2. Deploy-Workflow starten (Version oder latest)
3. Runner führt docker compose pull + docker compose up -d aus

Mehr Details: DEPLOYMENT.md

---

Agenten & Skills

Dieses Projekt nutzt ein Skill-basiertes Agenten-System zur Automatisierung von Entwicklungsaufgaben. Skills sind dokumentierte Arbeitsabläufe im agentic_ai/skills/-Verzeichnis.

Verfügbare Skills

Skill Name	Beschreibung	Datei
create-widget	Erstellt ein neues Frontend-Widget mit Komponente, Styles und Einbindung im Layout	agentic_ai/skills/create-widget.md
create-ticket	Ticket im Family Dashboard Ticketsystem anlegen	agentic_ai/skills/create-ticket.md
edit-agents-docs	Sichere Bearbeitung der agents.md-Datei ohne Formatierungsfehler	agentic_ai/skills/edit-agents-docs.md
react-best-practices	Best Practices für React-Entwicklung im Family Dashboard	agentic_ai/best-practices/react-best-practices.md
dotnet-backend-patterns	C#/.NET Backend Patterns für robuste APIs	agentic_ai/best-practices/dotnet-backend-patterns/dotnet-backend-patterns.md

Verwendung von Skills

Skills können vom Agenten mittels des read_skill-Tools geladen werden. Vollständige Dokumentation: agents.md