# Interim-UI-Handover → David (AD-28)

**Stand:** 2026-07-08 · **Quelle:** HiveGrid-Cloud, `apps/web/app/components/screens/` · **Owner:** Akeshan

## Was ist das?

Der Dev-Strang hat nach **AD-28** (`.planning/INTERIM-UI-PLAYBOOK.md`) für UI-lastige Tickets **Interim-UI-
Vorschau-Screens** gebaut — lauffähige `<X>Page`-Komponenten aus `~/ui` (VM als Prop), damit Backend/Loader/
Action getestet sind, **bevor** deine finalen Subframe-Screens (`D-*`) stehen. Dieses Verzeichnis ist die
Übergabe dieser Interim-Screens an dich, damit dein Agent jeden Screen dem richtigen `D-*`-Paket + Archetyp
zuordnen und die finale Optik bauen kann.

**Zwei Dinge sind wichtig:**
1. **Layout ist deine freie Hand** (Designer-First). Die Detailseiten listen nur *benötigte Elemente / Daten /
   Aktionen / States* — **keine** Anordnung. Du überschreibst Spec/UX in der „Davids Delta"-Sektion je Screen.
2. Die Interim-Screens sind **lauffähige Referenz**: die `.tsx`-Pfade zeigen in den gebundelten Checkout unter
   `03 Quellen und Referenzen/hivegrid-cloud/` — du kannst jeden Screen real anschauen. Die stabile Grenze ist
   das **View-Model (VM) + der Loader**; dein Subframe-Screen ersetzt nur das `<X>Page`-Innere (Component-Swap,
   kein Neubau). Danach: `🎨 design-nachzug` in der Ticket-Doc auf `erledigt`.

## Domänen-Übersicht

| Seite | Domäne | Bau-Ticket | D-*-Ziel | Screens | Status |
|---|---|---|---|---|---|
| [P06-CRM](P06-CRM.md) | CRM-Kern | R-P6 | D-CRM | 6 | offen |
| [P07-Leads](P07-Leads.md) | Lead-Inbox | R-P7 | D-P7 | 6 | offen |
| [P17-HR](P17-HR.md) | HR-Hub | AK-P17a/b | D-HR | 21 | offen |
| [P04-Files-Tasks](P04-Files-Tasks.md) | Files & Tasks | AK-P4a/b | D-P4 | 6 | offen |
| [P03-Audit-Notifications](P03-Audit-Notifications.md) | Audit & Notifications | AK-P3 | D-P3 | 5 | offen |
| [P05-Integrations](P05-Integrations.md) | Integrations/Apps-Engine | R-P5 | D-P5 | 6 | offen |
| [P02-Auth-RBAC](P02-Auth-RBAC.md) | Auth & RBAC | R-P2a/b | D-P2 | 5 | ✅ David fertig (nur Abgleich) |

**Gesamt: 55 Interim-Screens** über 10 Domänen-Ordner. Archetyp-Codes (A1–A7) stammen aus den Header-
Kommentaren der Interim-Screens bzw. der `D-*`-Screen-Tabelle; bei Unklarheit gilt deine `D0`-Archetypen-Doku.

## Screen-Index (alle 55)

| Screen | D-*-Ziel | Archetyp | Route | Status |
|---|---|---|---|---|
| KontaktListPage | D-CRM | A2 | /app/:tenant/contacts (+ /contacts/companies) | offen |
| KontaktDetailPage | D-CRM | A3 | /app/:tenant/contacts/:id (+ /contacts/companies/:id) | offen |
| KontaktNewPage | D-CRM | A4 | /app/:tenant/contacts/new | offen |
| CustomFieldAdminPage | D-CRM | A2 | /app/:tenant/contacts/admin/custom-fields | offen |
| TagAdminPage | D-CRM | A2 | /app/:tenant/contacts/admin/tags | offen |
| DuplicateToolPage | D-CRM | A5 | /app/:tenant/contacts/admin/duplicates | offen |
| LeadInboxPage | D-P7 | A2 | /:tenant/leads | offen |
| LeadDetailPage | D-P7 | A3 | /:tenant/leads/:id | offen |
| LeadNewPage | D-P7 | A4 | /:tenant/leads/new | offen |
| LeadStatisticsPage | D-P7 | A2 | /:tenant/leads/statistics | offen |
| LeadSourcesAdminPage | D-P7 | A6 | /:tenant/admin/lead-sources | offen |
| LeadAntiSpamAdminPage | D-P7 | A6 | /:tenant/admin/lead-anti-spam | offen |
| HrHubPage | D-HR | A1/A6 | /:tenant/hr | offen |
| HrDirectoryPage | D-HR | A2 | /:tenant/hr/directory | offen |
| HrDirectoryDetailPage | D-HR | A3 | /:tenant/hr/directory/:userId | offen |
| HrLeavePage | D-HR | A2+A4/A5 | /:tenant/hr/leave | offen |
| HrSickPage | D-HR | A2+A4 | /:tenant/hr/sick | offen |
| HrRequestsPage | D-HR | A2+A4/A5 | /:tenant/hr/requests | offen |
| HrPayslipsPage | D-HR | A2 | /:tenant/hr/payslips | offen |
| HrMyDocumentsPage | D-HR | A2 | /:tenant/hr/my-documents | offen |
| HrAnnouncementsFeedPage | D-HR | A2 | /:tenant/hr/announcements | offen |
| HrAnnouncementDetailPage | D-HR | A3 | /:tenant/hr/announcements/:id | offen |
| HrLocationsPage | D-HR | A2+A5 | /:tenant/hr/locations | offen |
| HrPasswordSafeListPage | D-HR | A2+A5 | /:tenant/hr/password-safe | offen |
| HrVaultDetailPage | D-HR | A3+reveal | /:tenant/hr/password-safe/:vaultId | offen |
| HrSurveysListPage | D-HR | A2+A5 | /:tenant/hr/surveys | offen |
| HrSurveyParticipationPage | D-HR | A3/A4 | /:tenant/hr/surveys/:id | offen |
| HrSurveyResultsPage | D-HR | A3 | /:tenant/hr/surveys/:id/results | offen |
| HrAdminAnnouncementsPage | D-HR | A2+A4/A5 | /:tenant/hr/admin/announcements | offen |
| HrAdminPasswordSafePage | D-HR | A2/A6 | /:tenant/hr/admin/password-safe | offen |
| HrAdminPayslipsPage | D-HR | A2+A4 | /:tenant/hr/admin/payslips | offen |
| HrAdminRequestTemplatesPage | D-HR | A2+A5 | /:tenant/hr/admin/request-templates | offen |
| HrAdminUploadRemindersPage | D-HR | A2+A5 | /:tenant/hr/admin/upload-reminders | offen |
| FilesBrowserPage | D-P4 | A2 | /:tenant/files | offen |
| FileUploadPage | D-P4 | A4 | /:tenant/files/upload | offen |
| FileDetailPage | D-P4 | A3 | /:tenant/files/:id | offen |
| TasksListPage | D-P4 | A2 | /:tenant/tasks | offen |
| TaskDetailPage | D-P4 | A3+A5 | /:tenant/tasks/:id | offen |
| TaskNewPage | D-P4 | A5 | /:tenant/tasks/new | offen |
| AuditListPage | D-P3 | A2 | /admin/audit | offen |
| AuditExportPage | D-P3 | A2 | /admin/audit-export | offen |
| NotificationCenterPage | D-P3 | A2 | /app/:tenant/notifications | offen |
| NotificationsDrawer | D-P3 | A2 | n/a (globaler Drawer) | offen |
| NotificationSettingsPage | D-P3 | A6 | /app/:tenant/settings/notifications | offen |
| IntegrationsCatalogPage | D-P5 | A6 | /:tenant/integrations | offen |
| ConnectionDetailPage | D-P5 | A6+A2 | /:tenant/integrations/:app | offen |
| ConnectionCard | D-P5 | (sub) | n/a (Sub von ConnectionDetailPage) | offen |
| ConnectWizardDialog | D-P5 | A5+A6 | n/a (Sub von ConnectionDetailPage) | offen |
| SyncHistoryPage | D-P5 | A2 | /:tenant/integrations/:app/:connectionId/syncs | offen |
| SyncRunDetailPage | D-P5 | A3 | /:tenant/integrations/:app/:connectionId/syncs/:runId | offen |
| CreateWorkspacePage | D-P2 | A3 | /new-account | David fertig |
| MembersPage | D-P2 | A1 | /app/:tenant/settings/members | David fertig |
| RolesPage | D-P2 | A1 | /app/:tenant/settings/roles-and-permissions/roles | David fertig |
| InviteMemberForm | D-P2 | A4 | n/a (Sub von MembersPage) | David fertig |
| GroupMembersDialog | D-P2 | A4 | n/a (Sub von GroupsRoute) | David fertig |

## Verweise

- Interim-UI-Regeln: `03 Quellen und Referenzen/hivegrid-cloud/.planning/INTERIM-UI-PLAYBOOK.md`
- Design-Standards (Spacing/Dialog/Archetypen): `.../hivegrid-cloud/.planning/INTERIM-UI-DESIGN-STANDARDS.md`
- Phasen-Briefs (dein bisheriger Intake, jetzt mit Pointer hierher): `.../hivegrid-cloud/.planning/designer-briefs/PXX-*.md`
- Getrackte offene Design-Nachzüge im Dev-Repo: `grep -rl "design-nachzug: offen" .planning/ticket-docs/`