breakpilot-lehrer/website/components/admin/system-info-configs/onboarding-config.ts

import type { SystemInfoConfig } from './types'

export const onboardingConfig: SystemInfoConfig = {
  title: 'Onboarding System-Info',
  description: 'Benutzer- und Schul-Onboarding Workflow.',
  version: '2.0',
  architecture: {
    layers: [
      { title: 'Onboarding UI', components: ['Wizard', 'Progress Bar', 'Tutorials'], color: '#3b82f6' },
      { title: 'Workflow Engine', components: ['Step Manager', 'Validation', 'Skip Logic'], color: '#8b5cf6' },
      { title: 'Data Collection', components: ['Forms', 'File Upload', 'Verification'], color: '#10b981' },
      { title: 'Integration', components: ['CRM', 'School Service', 'Notification'], color: '#f59e0b' },
    ],
  },
  features: [
    { name: 'Multi-Step Wizard', status: 'active', description: 'Gefuehrter Prozess' },
    { name: 'Progress Tracking', status: 'active', description: 'Fortschrittsanzeige' },
    { name: 'Document Upload', status: 'active', description: 'Vertragsuploads' },
    { name: 'Self-Service', status: 'planned', description: 'Autonomes Onboarding' },
  ],
  roadmap: [
    { phase: 'Phase 1: UX (Q1)', priority: 'high', items: ['Wizard Redesign', 'Mobile Optimization', 'Error Handling', 'Help System'] },
    { phase: 'Phase 2: Automation (Q2)', priority: 'medium', items: ['Auto-Verification', 'Document OCR', 'Pre-fill Data', 'Status Updates'] },
    { phase: 'Phase 3: Analytics (Q3)', priority: 'low', items: ['Funnel Analysis', 'Drop-off Points', 'A/B Testing', 'Conversion Optimization'] },
  ],
  technicalDetails: [
    { component: 'Wizard', technology: 'React Hook Form', description: 'Form Management' },
    { component: 'Validation', technology: 'Zod', description: 'Schema Validation' },
    { component: 'Storage', technology: 'PostgreSQL', description: 'Progress Data' },
    { component: 'Files', technology: 'MinIO', description: 'Document Storage' },
  ],
  auditInfo: [
    {
      category: 'Onboarding Status',
      items: [
        { label: 'Conversion Rate', value: 'Tracking', status: 'ok' },
        { label: 'Avg. Completion Time', value: 'Tracking', status: 'ok' },
        { label: 'Drop-off Points', value: 'Analysiert', status: 'ok' },
        { label: 'Support Tickets', value: 'Tracking', status: 'ok' },
      ],
    },
    {
      category: 'Prozess',
      items: [
        { label: 'Wizard Steps', value: 'Konfiguriert', status: 'ok' },
        { label: 'Validation', value: 'Aktiv', status: 'ok' },
        { label: 'Document Upload', value: 'Aktiv', status: 'ok' },
        { label: 'Auto-Verification', value: 'Geplant', status: 'warning' },
      ],
    },
    {
      category: 'Integration',
      items: [
        { label: 'CRM Sync', value: 'Aktiv', status: 'ok' },
        { label: 'E-Mail Notifications', value: 'Aktiv', status: 'ok' },
        { label: 'School Service', value: 'Aktiv', status: 'ok' },
        { label: 'Billing', value: 'Aktiv', status: 'ok' },
      ],
    },
  ],
  fullDocumentation: `
<h2>Onboarding Wizard</h2>

<h3>1. Uebersicht</h3>
<p>Der Onboarding Wizard fuehrt neue Nutzer und Schulen durch den Registrierungsprozess. Er sammelt notwendige Daten, Dokumente und Consents.</p>

<h3>2. Wizard-Architektur</h3>
<pre>
┌─────────────────────────────────────────────────────────────────┐
│                      Onboarding Wizard UI                        │
│  ┌────────────────────────────────────────────────────────────┐ │
│  │ Progress Bar: [=====>                              ] 40%    │ │
│  └────────────────────────────────────────────────────────────┘ │
│  ┌────────────────────────────────────────────────────────────┐ │
│  │                    Current Step                             │ │
│  │                                                             │ │
│  │    ┌─────────────────────────────────────────────────┐     │ │
│  │    │              Form / Upload / Info                │     │ │
│  │    └─────────────────────────────────────────────────┘     │ │
│  │                                                             │ │
│  │    [  Zurueck  ]                          [  Weiter  ]     │ │
│  └────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
</pre>

<h3>3. Wizard Steps (Schulen)</h3>
<table>
  <tr><th>Step</th><th>Titel</th><th>Felder</th><th>Pflicht</th></tr>
  <tr><td>1</td><td>Schuldaten</td><td>Name, Typ, Bundesland</td><td>Ja</td></tr>
  <tr><td>2</td><td>Ansprechpartner</td><td>Name, E-Mail, Telefon</td><td>Ja</td></tr>
  <tr><td>3</td><td>Adresse</td><td>Strasse, PLZ, Ort</td><td>Ja</td></tr>
  <tr><td>4</td><td>Vertrag</td><td>Paket-Auswahl, Upload</td><td>Ja</td></tr>
  <tr><td>5</td><td>Datenschutz</td><td>AVV, Consents</td><td>Ja</td></tr>
  <tr><td>6</td><td>Bestaetigung</td><td>Zusammenfassung</td><td>-</td></tr>
</table>

<h3>4. API Endpoints</h3>
<table>
  <tr><th>Endpoint</th><th>Methode</th><th>Beschreibung</th></tr>
  <tr><td>/api/onboarding/start</td><td>POST</td><td>Wizard starten</td></tr>
  <tr><td>/api/onboarding/{id}/step/{n}</td><td>GET</td><td>Step-Daten laden</td></tr>
  <tr><td>/api/onboarding/{id}/step/{n}</td><td>POST</td><td>Step speichern</td></tr>
  <tr><td>/api/onboarding/{id}/complete</td><td>POST</td><td>Abschliessen</td></tr>
  <tr><td>/api/onboarding/{id}/status</td><td>GET</td><td>Fortschritt</td></tr>
</table>

<h3>5. Validation-Schema</h3>
<pre>
const schoolDataSchema = z.object({
  name: z.string().min(2).max(100),
  type: z.enum([
    "grundschule",
    "hauptschule",
    "realschule",
    "gymnasium",
    "gesamtschule",
    "berufsschule"
  ]),
  bundesland: z.enum([...bundeslaender]),
  studentCount: z.number().positive().optional(),
  website: z.string().url().optional()
});
</pre>

<h3>6. Document Upload</h3>
<pre>
Dokument-Upload Flow:

1. Datei auswaehlen
   └── Typ-Pruefung (PDF, max 10 MB)

2. Upload starten
   └── Progress-Anzeige

3. Virus-Scan
   └── ClamAV

4. Speicherung
   └── MinIO mit Verschluesselung

5. Verifikation (optional)
   └── Manuell oder OCR
</pre>

<h3>7. Status-Workflow</h3>
<pre>
┌──────────┐   ┌──────────┐   ┌───────────┐   ┌───────────┐
│ Started  │ → │ Progress │ → │ Submitted │ → │ Verified  │
└──────────┘   └──────────┘   └───────────┘   └───────────┘
                                    │              │
                                    │              v
                                    │         ┌───────────┐
                                    │         │ Activated │
                                    │         └───────────┘
                                    v
                              ┌───────────┐
                              │ Incomplete│
                              └───────────┘
</pre>

<h3>8. E-Mail-Benachrichtigungen</h3>
<table>
  <tr><th>Trigger</th><th>Template</th><th>Empfaenger</th></tr>
  <tr><td>Start</td><td>Willkommen</td><td>Ansprechpartner</td></tr>
  <tr><td>Pausiert (7 Tage)</td><td>Erinnerung</td><td>Ansprechpartner</td></tr>
  <tr><td>Submitted</td><td>Bestaetigung</td><td>Ansprechpartner</td></tr>
  <tr><td>Verified</td><td>Aktivierung</td><td>Ansprechpartner</td></tr>
  <tr><td>Incomplete</td><td>Fehlende Daten</td><td>Ansprechpartner</td></tr>
</table>

<h3>9. Analytics</h3>
<ul>
  <li><strong>Funnel:</strong> Drop-off pro Step</li>
  <li><strong>Completion Rate:</strong> Abschlussquote</li>
  <li><strong>Avg. Time:</strong> Durchschnittliche Dauer</li>
  <li><strong>Error Rate:</strong> Validierungsfehler</li>
</ul>

<h3>10. A/B Testing (geplant)</h3>
<pre>
Test-Varianten:
├── Step-Reihenfolge
├── Formular-Layout
├── CTA-Texte
├── Hilfe-Inhalte
└── Erfolgsmeldungen

Metriken:
├── Conversion Rate
├── Time to Complete
└── Drop-off Rate
</pre>
`,
}