kundenkarte/CLAUDE.md

CLAUDE_CODE_DISABLE_AUTO_MEMORY=0

KundenKarte Module - Entwicklungshinweise

Dolibarr App Navigation (Vor/Zurück Pfeile)

Problem

Die Dolibarr Mobile App hat eigene Navigations-Pfeile (vorheriger/nächster Kunde), die zwischen Datensätzen navigieren. Diese verwenden andere Parameter als unsere Module erwarten:

• Kunden-Navigation: Dolibarr verwendet socid, Module erwarten oft id
• Kontakt-Navigation: Dolibarr verwendet contactid, Module erwarten oft id

Wenn man diese Pfeile auf einem Modul-Tab verwendet, verliert das Modul die ID und zeigt einen Fehler oder leere Seite.

Lösung: Beide Parameter akzeptieren

In JEDEM Tab-PHP-File muss am Anfang beide Parameter akzeptiert werden:

Für Kunden-Tabs (thirdparty):

// Get parameters
// Support both 'id' and 'socid' for compatibility with Dolibarr's customer navigation arrows
$id = GETPOSTINT('id');
if ($id <= 0) {
    $id = GETPOSTINT('socid');
}

Für Kontakt-Tabs (contact):

// Get parameters
// Support both 'id' and 'contactid' for compatibility with Dolibarr's contact navigation arrows
$id = GETPOSTINT('id');
if ($id <= 0) {
    $id = GETPOSTINT('contactid');
}

Betroffene Dateien in diesem Modul

• tabs/anlagen.php - Kunden-Anlagen (socid)
• tabs/favoriteproducts.php - Kunden-Favoriten (socid)
• tabs/contact_anlagen.php - Kontakt-Anlagen (contactid)
• tabs/contact_favoriteproducts.php - Kontakt-Favoriten (contactid)

Best Practices für zukünftige Module

1. IMMER beide Parameter akzeptieren - id UND socid/contactid
2. Tab-Definition in modXxx.class.php verwendet ?id=__ID__ - das ist korrekt
3. Dolibarr's dol_banner_tab() generiert die Navigationspfeile mit socid/contactid
4. Fallback bei fehlender ID - zur Liste weiterleiten, nicht Fehler zeigen:

if ($id <= 0) {
    header('Location: '.DOL_URL_ROOT.'/societe/list.php');
    exit;
}

Mobile Ansicht - Einheitliche Button-Größen

Problem

Auf mobilen Geräten haben die Buttons (Kompakt, Aufklappen, Einklappen, PDF Export) unterschiedliche Größen.

Lösung

CSS Media Queries für einheitliche Button-Größen:

@media (max-width: 768px) {
    .kundenkarte-tree-controls {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .kundenkarte-tree-controls .button {
        flex: 1 1 auto !important;
        min-width: 80px !important;
        max-width: 150px !important;
        padding: 10px 8px !important;
        font-size: 12px !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    /* 2x2 Grid auf sehr kleinen Bildschirmen */
    .kundenkarte-tree-controls {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }
}

Migrationen

Alle Datenbankänderungen werden als idempotente Migrationen in modKundenKarte.class.php implementiert:

• runMigrations() wird bei jeder Modulaktivierung aufgerufen
• Jede Migration prüft zuerst, ob die Änderung bereits existiert
• Später werden Migrationen entfernt und Tabellen direkt korrekt erstellt

Dateistruktur

• tabs/anlagen.php - Hauptansicht für Anlagen auf Kundenebene
• tabs/contact_anlagen.php - Anlagen für Kontakte
• tabs/favoriteproducts.php - Lieblingsprodukte auf Kundenebene
• tabs/contact_favoriteproducts.php - Lieblingsprodukte für Kontakte
• admin/anlage_types.php - Verwaltung der Element-Typen
• ajax/ - AJAX-Endpunkte für dynamische Funktionen
• js/kundenkarte.js - Alle JavaScript-Komponenten
• css/kundenkarte.css - Alle Styles (Dark Mode)

Wichtige Hinweise

FontAwesome Icons

• Dolibarr verwendet FontAwesome 4.x Format: fa fa-icon-name
• NICHT: fas fa-icon-name oder far fa-icon-name

Badge-Farben

• Können pro Feld in Admin > Element-Typen konfiguriert werden
• Spalte badge_color in llx_kundenkarte_anlage_type_field
• Hex-Format: #RRGGBB

Datei-Vorschau Tooltip

• AJAX-Endpoint: ajax/file_preview.php
• Zeigt Thumbnails für Bilder, Icons für Dokumente
• Hover über Datei-Badge im Baum

PWA Mobile App

Übersicht

Offline-fähige Progressive Web App für Elektriker zur Schaltschrank-Dokumentation vor Ort.

Dateien

• pwa.php - Haupteinstieg (HTML/CSS/JS Container)
• pwa_auth.php - Token-basierte Authentifizierung (15 Tage gültig)
• ajax/pwa_api.php - Alle AJAX-Endpoints für die PWA
• js/pwa.js - Komplette App-Logik (vanilla JS, kein jQuery)
• css/pwa.css - Mobile-First Dark Mode Design
• sw.js - Service Worker für Offline-Cache
• manifest.json - Web App Manifest für Installation

Workflow

1. Login mit Dolibarr-Credentials → Token wird lokal gespeichert
2. Kunde suchen → Anlagen werden gecached
3. Anlage mit Schaltplan-Editor auswählen → Daten werden gecached
4. Offline arbeiten: Felder, Hutschienen, Automaten hinzufügen
5. Änderungen werden in lokaler Queue gespeichert
6. Bei Internetverbindung: Automatische Synchronisierung

Token-Authentifizierung

• Tokens enthalten: user_id, login, created, expires, hash
• Hash = MD5(user_id + login + MAIN_SECURITY_SALT)
• Gültigkeit: 15 Tage
• Gespeichert in localStorage

Offline-Sync

• Alle Änderungen werden in offlineQueue (localStorage) gespeichert
• Badge zeigt Anzahl ungesyncte Änderungen
• Sync-Button oder automatisch bei Online-Event
• Bei Sync werden Aktionen der Reihe nach ausgeführt

Installation auf Smartphone

1. PWA im Browser öffnen: https://domain/dolibarr/custom/kundenkarte/pwa.php
2. Browser-Menü → "Zum Startbildschirm hinzufügen"
3. App öffnet sich als Standalone ohne Browser-UI