Skip to content

GUI Design Specifications

This document contains design-level specifications for the GUI components of the Wippidu Kita App. These specifications bridge between GUI requirements (req~gui-*) and implementations (impl~).

Absence Notification GUI Design

dsn~gui-abwesenheitsmeldung~1

The absence notification GUI is implemented as a multi-step form:

Step 1 - Child Selection (notify.html): - Displays list of parent's children with checkboxes - Pre-selects if parent has only one child - Shows child photo, name, and current group - Validates at least one child is selected

Step 2 - Status Details: - Radio buttons for absence type: Illness, Vacation, Other - Date picker for start date (FromDate) - Date picker for end date (ToDate) - Optional textarea for additional message/notes - Submit button to create notification

Technical Implementation: - Controller: controller/notify.go - Notify, NotifySend - Templates: notify.html, notify-edit.html - Model: AbsenceNotification with type enum

Needs: impl, utest

Covers:

  • req~gui-kinder-status~1

Absence History GUI Design

dsn~gui-abwesenheitshistorie~1

Parents can view their submitted absence notifications:

History View (notify-history.html): - Table listing all past notifications - Columns: Child name, Type, From date, To date, Status - Sorted by date descending (newest first) - Edit button for modifiable notifications - Visual indicators for active vs. past notifications

Edit View (notify-edit.html): - Pre-filled form with existing notification data - Allows modification of dates and message - Revoke option to cancel notification

Needs: impl, utest

Covers:

  • req~gui-status-overview~1

dsn~gui-menu-struktur~1

The application implements role-based navigation menus:

Base Layout (base.html): - Responsive header with logo and user info - Role indicator for dual-role users - Role switcher dropdown for users with multiple roles - Language switcher (DE/EN) - Logout button

Parent Menu: - Home (children overview) - Notify (absence notification) - Messages (from staff) - Parental Letters - News/Announcements - Documents (placeholder)

Employee Menu: - Home (group overview) - Notifications (view absence notifications) - Location Children (all children in location) - Messages (send to parents) - Parental Letters (create/manage) - News (view/create)

Group Leader Menu (extends Employee): - All Employee menu items - Parental Letter creation with review workflow - News creation for group

Location Leader Menu (extends Group Leader): - All Group Leader menu items - Parent Access Time Management - Location-wide parental letters

Admin Menu (extends all): - Location selector - User Management - Child Management - News Management (global) - API Token Management - Sync Processing Dashboard

Needs: impl

Covers:

  • req~gui-menu-structures~1

News/Announcements GUI Design

dsn~gui-ankuendigungen~1

News and announcements are displayed in a blog-style list:

List View - Parent (news-list-parent.html): - Cards showing title, date, and preview - Unread indicator for new items - Click to view full content - Sorted by publish date descending

List View - Employee (news-list-employee.html): - Same as parent view plus: - Edit/Delete buttons for own news - Scope indicator (Group/Location/Global) - Read statistics summary

Detail View (news-detail.html, news-detail-employee.html): - Full news content with markdown rendering - Author and publish date - Employee view shows read/unread statistics - Edit button for authorized users

Create/Edit Forms (news-create.html, news-edit.html): - Title input field - Rich text area for content - Scope selector (Group or Location-wide) - Valid until date picker (optional)

Needs: impl, utest

Covers:

  • req~gui-ankuendigungen-meldungen~1

Announcement Creation GUI Design

dsn~gui-ankuendigung-erstellen~1

Staff can create news/announcements:

Form Fields (news-create.html): - Scope dropdown: Group-specific or Location-wide - Group selector (if group-specific) - Title field (required, single line) - Content textarea with markdown support - Valid until date (optional expiration)

Workflow: - Group Leaders can create for their groups - Location Leaders can create for entire location - Admins can create global announcements

Needs: impl

Covers:

  • req~gui-ankuendigung-schreiben~1

Group Overview GUI Design

dsn~gui-gruppenuebersicht~1

Employee view of children in their assigned groups:

Notifications View (notifications.html): - Shows today's absence notifications - Grouped by group name - Displays: Child photo, name, absence type, date range - Visual distinction for illness vs vacation

Location Children View (location-children.html): - Table of all children in employee's location(s) - Columns: Photo, Name, Group, Status - Search/filter functionality - Click to view child details

Home View - Employee (home.html employee section): - Quick stats: Total children, Present today, Absent today - Recent notifications summary - Quick links to common actions

Needs: impl, utest

Covers:

  • req~gui-gruppenuebersicht~1

Child Detail Page GUI Design

dsn~gui-kind-seite~1

Detailed view of a single child:

Parent View (child.html): - Child photo and full name - Birthday and age - Current group and location - Recent absence notifications - Link to notify absence

Employee View (employee-child.html): - All parent view information plus: - Parent/guardian contact information - Recent messages to parents - Absence history - Group assignment details - Link to send message to parents

Needs: impl, utest

Covers:

  • req~kind-seite~1

Parental Letters GUI Design

dsn~gui-elternbriefe~1

Multi-role parental letter system:

List View - Parent (parental-letters-list-parent.html): - List of received letters - Unread indicator - Response status indicator - Click to view and respond

List View - Employee (parental-letters-list-employee.html): - Letters created by user - Status indicators: Draft, Pending Review, Published - Response statistics (answered/total) - Edit/Delete actions for drafts

Detail View - Parent (parental-letter-view-parent.html): - Full letter content - Response form if response requested/required - Visual indicator for required responses - Submit response button

Detail View - Employee (parental-letter-view-employee.html): - Full letter content - Response summary table - List of responders and non-responders - Response details expandable

Needs: impl, utest

Covers:

  • req~gui-elternbriefe~1
  • req~gui-elternbrief-anzeigen~1

Parental Letter Creation GUI Design

dsn~gui-elternbrief-erstellen~1

Form for creating parental letters:

Create Form (parental-letter-create.html): - Scope selector: Group or Location-wide - Group dropdown (for group-specific letters) - Title field (required) - Content textarea with markdown support - Response settings: - Checkbox: Allow responses - Checkbox: Require response (only if responses allowed) - Reviewer selection dropdown - Save as draft / Submit for review buttons

Edit Form (parental-letter-edit.html): - All create form fields pre-filled - Status indicator - Version history (if applicable)

Review Form (parental-letter-review.html): - Read-only letter preview - Approve / Request changes buttons - Comment field for feedback

Needs: impl, utest

Covers:

  • req~gui-elternbrief-schreiben~1

Parent Messages GUI Design

dsn~gui-eltern-nachrichten~1

Direct messaging between staff and parents:

Message List - Employee (parent-messages.html): - List of sent messages - Recipient (child/parent) indicator - Response status - Date sent - Click to view details

Message List - Parent (parent-received-messages.html): - List of received messages - Unread indicator - Response required indicator - Sender information

Message Form (parent-message-form.html): - Child selector dropdown with search - Multi-child selection support - Title field - Message content textarea - Response settings: - Checkbox: Allow response - Checkbox: Require response - Send button

Message Detail (parent-message-detail.html): - Full message content - Response thread (if responses enabled) - Response form for parents

Needs: impl, utest

Covers:

  • req~gui-eltern-nachrichten~1

Location Documents GUI Design

dsn~gui-einrichtungsdokumente~1

Document management and display:

Status: Not yet implemented (placeholder page)

Planned Implementation: - Document list grouped by category - Categories: Meal plans, Weekly plans, Notices - Upload interface for staff - Download links for all users - Expiration date support

Covers:

  • req~gui-einrichtungsdokumente~1

Parent Access Time Management GUI Design

dsn~gui-zugriffszeiten~1

Location Leaders manage parent access periods:

List View (location-access-times-list.html): - Search-first interface (search by child name) - Results show: Parent name, Child name, Valid from, Valid until - Edit button for each relationship - Location filter for multi-location users

Edit Form (location-access-times-edit.html): - Parent information display (read-only) - Child information display (read-only) - Valid from date picker - Valid until date picker - Save button

Needs: impl, utest

Covers:

  • req~zugriffsmanagement~1

Admin User Management GUI Design

dsn~gui-admin-benutzerverwaltung~1

Admin interface for user management:

User List (admin-users-list.html): - Paginated table of all users - Columns: Name, Email, Roles, Status - Search by name/email - Filter by role - Click to view details

User Detail (admin-users-detail.html): - User information - Role assignments - Children relationships with validity dates - Edit user button - Add child relationship button - Impersonate user button

User Edit (admin-users-edit.html): - Editable user fields - Role checkboxes - Save/Cancel buttons

Child Relationship Management: - admin-users-add-child.html - Add child to user - admin-users-edit-child.html - Edit relationship dates

Needs: impl

Covers:

  • req~rechtevergabe-system~1

Admin Child Management GUI Design

dsn~gui-admin-kinderverwaltung~1

Admin interface for child management:

Child List (admin-children-list.html): - Paginated table of all children - Columns: Photo, Name, Group, Location, Active - Search by name - Filter by group/location - Click to view details

Child Detail (admin-children-detail.html): - Child information - Group assignment - Parent relationships - Edit button - Add parent button

Child Create/Edit: - admin-children-create.html - New child form - admin-children-edit.html - Edit child form - Fields: Name, Birthday, Group, Photo

Needs: impl

Covers:

  • req~datenbank-modell~1

Admin Sync Dashboard GUI Design

dsn~gui-admin-sync~1

Admin interface for intranet data sync processing:

Dashboard (admin-sync.html): - Pending record counts per staging table - Process All button with confirmation - Individual process buttons: - Process Locations - Process Groups - Process Children - Process Child-Group assignments - Recent processing log table - Log columns: Type, Started, Status, Created, Updated, Errors

Needs: impl

Covers:

  • req~import-export-system~1

Responsive Design

dsn~gui-responsive~1

The application implements responsive design for multiple device types:

Breakpoints: - Mobile: < 768px - Tablet: 768px - 1024px - Desktop: > 1024px

Mobile Optimizations: - Collapsible navigation menu (hamburger) - Stacked form layouts - Touch-friendly button sizes (min 44px) - Swipe gestures for navigation (planned)

Desktop Optimizations: - Sidebar navigation - Multi-column layouts where appropriate - Keyboard shortcuts (planned)

Implementation: - Tailwind CSS utility classes - CSS media queries in base template - Responsive tables with horizontal scroll on mobile

Needs: impl

Covers:

  • feat~responsive-design~1
  • feat~touch-design~1

Login/Authentication GUI Design

dsn~gui-login~1

Authentication interface:

Login Page (login.html): - Email input field - Password input field - Login button - Error message display area - Language switcher

Session Management: - JWT token in HTTP-only cookie - 7-day session duration - Automatic redirect to login on session expiry

Needs: impl, utest

Covers:

  • req~rechtevergabe-system~1

Home Page GUI Design

dsn~gui-home~1

Role-based home page:

Parent Home (home.html - parent section): - Children cards with photos - Quick status indicators per child - Recent notifications summary - Quick action: Report absence - Unread messages/letters indicator

Employee Home (home.html - employee section): - Today's absence summary - Group statistics - Recent notifications - Quick links to common tasks

Dual-Role Users: - Role switcher in header - Home content updates based on active role - Persistent role preference in session

Needs: impl

Covers:

  • req~gui-menu-structures~1