homelab-dashboard/README.md

# Homelab Dashboard

Ein modernes, responsives Dashboard für die Verwaltung von Homelab-Diensten, gebaut mit **Next.js 15**, **TypeScript** und **Tailwind CSS**.

## Features

✨ **Moderne Benutzeroberfläche**
- Elegantes Dark/Light Mode Design
- Responsive Grid-Layout für alle Bildschirmgrößen
- Smooth Animations und Übergänge

🎯 **Service-Management**
- Service-Karten mit Name, Beschreibung und Status
- Farbcodierter Status-Indikator (Online, Warnung, Offline)
- Direkte Links zu Services
- Pulsierender Status-Punkt für visuelle Rückmeldung

📱 **Mobile-First Design**
- Optimiert für Smartphones, Tablets und Desktop
- Touch-freundliche Buttons
- Flexibles Grid-System

## Installation & Setup

### Voraussetzungen
- Node.js 18+ installiert
- npm oder yarn

### Schritt 1: Dependencies installieren

```bash
npm install
```

### Schritt 2: Entwicklungsserver starten

```bash
npm run dev
```

Der Server läuft dann unter `http://localhost:3000`

## Projekt-Struktur

```
homelab-dashboard/
├── app/
│   ├── components/
│   │   ├── Header.tsx          # Header-Komponente
│   │   └── ServiceCard.tsx      # Service-Karten-Komponente
│   ├── globals.css             # Globale Tailwind Styles
│   ├── layout.tsx              # Root Layout
│   └── page.tsx                # Startseite
├── lib/
│   └── data.ts                 # Mock-Daten und Service-Typen
├── tailwind.config.ts          # Tailwind Konfiguration
├── postcss.config.js           # PostCSS Konfiguration
├── next.config.js              # Next.js Konfiguration
├── tsconfig.json               # TypeScript Konfiguration
└── package.json                # Abhängigkeiten
```

## Dienste hinzufügen/bearbeiten

Bearbeite die Datei [src/data/services.ts](src/data/services.ts):

```typescript
export const services: Service[] = [
  {
    id: 'unique-id',
    name: 'Dein Service',
    description: 'Was macht dieser Service?',
    category: 'Infrastruktur', // oder Smart Home, Medien, Dokumente
    status: 'online', // online | warning | offline
    url: 'http://localhost:8000',
    icon: '🖥️', // Optional - ein Emoji für visuelles Feedback
  },
  // ... weitere Services
];
```

### Verfügbare Kategorien

- **Infrastruktur**: Server, Netzwerk, Monitoring
- **Smart Home**: Home Automation und IoT
- **Medien**: Medienserver und Downloading
- **Dokumente**: Dateispeicher und Code-Repositories

## Verfügbare Commands

- `npm run dev` - Entwicklungsserver starten
- `npm run build` - Produktions-Build erstellen
- `npm start` - Produktions-Server starten
- `npm run lint` - Linter ausführen

## Status-Indikatoren

| Status | Farbe | Beschreibung |
|--------|-------|-------------|
| Online | 🟢 Grün | Service läuft einwandfrei |
| Warnung | 🟡 Gelb | Service läuft, aber mit Performance-Problemen |
| Offline | 🔴 Rot | Service ist nicht erreichbar |

## Docker Deployment

### Lokaler Start ohne Docker

```bash
npm install
npm run dev
```

### Lokaler Start mit Docker

```bash
# Build und starte mit docker-compose
docker-compose up --build

# Oder manuell:
docker build -t homelab-dashboard .
docker run -p 3000:3000 homelab-dashboard
```

### Build-Befehl

```bash
npm run build
```

### Run-Befehl

```bash
npm start
```

### Docker Compose Nutzung

```bash
# Start im Hintergrund
docker-compose up -d

# Stoppen
docker-compose down

# Logs anzeigen
docker-compose logs -f homelab-dashboard
```

### Unraid Volume-Mappings

Für Unraid empfiehlt es sich, die Konfigurationsdateien als Volumes zu mounten:

- **config.json**: `/mnt/user/appdata/homelab-dashboard/config.json` → `/app/config.json`
- **services.json**: `/mnt/user/appdata/homelab-dashboard/services.json` → `/app/src/data/services.json`

Dadurch können Konfigurationen außerhalb des Containers verwaltet werden.

## Konfiguration

### Services bearbeiten

Bearbeite `src/data/services.json` für JSON-basierte Konfiguration oder `src/data/services.ts` für TypeScript-basierte Konfiguration.

### App-Konfiguration

Bearbeite `config.json` im Projektroot, um Titel, Beschreibung und andere Einstellungen anzupassen:

```json
{
  "title": "Mein Homelab Dashboard",
  "subtitle": "Live-Status aller verwalteten Dienste",
  "description": "Live-Monitoring-Dashboard für mein Homelab",
  "servicesFile": "src/data/services.json",
  "refreshInterval": 30000,
  "categories": [
    "Infrastruktur",
    "Smart Home",
    "Medien",
    "Dokumente"
  ]
}
```

### Environment Variables

Kopiere `.env.example` zu `.env` und passe die Werte an:

- `PORT`: Port für den Server (Standard: 3000)
- `HOSTNAME`: Hostname binding (Standard: 0.0.0.0)

## Ports

- **3000**: Haupt-HTTP-Port der Anwendung
| Warning | 🟡 Orange | Service hat Probleme, läuft aber |
| Offline | 🔴 Rot | Service ist nicht erreichbar |

## Styling & Anpassungen

Das Projekt nutzt **Tailwind CSS** für Styling. Eigene Farben und Konfiguration können in [tailwind.config.ts](tailwind.config.ts) angepasst werden.

## Browser-Unterstützung

Das Dashboard funktioniert auf modernen Browsern:
- Chrome/Edge 90+
- Firefox 88+
- Safari 14+

## Lizenz

MIT