Files
Masterarbeit/Versuche/Versuch 03/ERP_DOCUMENTATION/SCREENSHOT_MAPPING_COMPLETE.md

24 KiB

CentronNexus ServiceBoard - Comprehensive Screenshot to Use-Case Mapping

Last Updated: 2025-11-21 Playwright Version: 1.56.0 Browser: Chromium Status: Mapping Framework Ready - Screenshots Pending (Backend Service Required)


Executive Summary

This document provides a comprehensive reference mapping between CentronNexus ServiceBoard UI screenshots and corresponding use-case documentation. It covers 23 implemented modules across 6 functional categories plus 11 additional discovered modules not yet in the main documentation.


Part 1: Documented Modules (From USE_CASES_CENTRON_NEXUS.md)

Category 1: Ticketing & Management (8 Modules)

3.1 Ticket-Liste (Main Ticket List)

Aspect Details
Screenshot Target 01-Ticket-Liste.png
Documentation USE_CASES_CENTRON_NEXUS.md §3.1
UI Path ServiceBoard → TicketList
Key Elements Filter bar, column headers, ticket rows, bulk actions
Main Features Advanced filtering, quick search, multi-select actions
Page Type CachedTicketListPage.razor
Related Components FilterEditor, BranchFilterSelection, CategoryFilterSelection, ConditionalFormattingEditor

3.2 Ticket-Details (Ticket Information View)

Aspect Details
Screenshot Target 02-Ticket-Details.png
Documentation USE_CASES_CENTRON_NEXUS.md §3.2
UI Path ServiceBoard → TicketList → [Click Ticket]
Key Elements Ticket header, status badge, metadata tabs, activity feed
Main Features View ticket info, attach documents, add comments, change status
Page Type TicketDetailsPage (part of TicketDetails module)
Related Components TicketDetailsHeader, MetadataPanel, ActivityFeed, TabNavigation

3.3 Ticket schließen (Close/Resolve Ticket)

Aspect Details
Screenshot Target 03-Ticket-Schließen.png
Documentation USE_CASES_CENTRON_NEXUS.md §3.3
UI Path Ticket Detail → Close Button → Close Dialog
Key Elements Resolution category dropdown, notes textarea, satisfaction survey
Main Features Select resolution, add notes, send survey, archive ticket
Page Type CloseTicketDialog (CloseTicket module)
Related Components ResolutionCategorySelector, NotesEditor, SurveySender

3.4 Ticket weiterleiten (Forward/Escalate Ticket)

Aspect Details
Screenshot Target 04-Ticket-Weiterleiten.png
Documentation USE_CASES_CENTRON_NEXUS.md §3.4
UI Path Ticket Detail → Forward Button → Forward Dialog
Key Elements Recipient selector, priority dropdown, message textarea
Main Features Forward to user/queue, escalate priority, add message, SLA options
Page Type ForwardTicketDialog (ForwardTicket module)
Related Components RecipientSelector, PriorityEditor, MessageComposer

3.5 Kanban-Board (Kanban View)

Aspect Details
Screenshot Target 05-Kanban-Board.png
Documentation USE_CASES_CENTRON_NEXUS.md §3.5
UI Path ServiceBoard → Kanban Tab (in CachedTicketList)
Key Elements Status columns, ticket cards, swimlanes, WIP limits
Main Features Drag-drop workflow, inline editing, status grouping, swimlanes
Page Type CachedKanbanBoard.razor (component in CachedTicketList)
Related Components KanbanColumn, KanbanCard, SwimlaneSelector

3.6 Ticket-Checklisten (Task Checklists)

Aspect Details
Screenshot Target 06-Ticket-Checklisten.png
Documentation USE_CASES_CENTRON_NEXUS.md §3.6
UI Path Ticket Detail → Checklists Tab
Key Elements Checklist template list, checklist items, progress bar
Main Features Create checklist, add items, track progress, mark complete
Page Type TicketChecklists module components
Related Components ChecklistSelector, ChecklistItemList, ProgressTracker

3.7 Ticket-Scripts (Quick Actions/Bulk Operations)

Aspect Details
Screenshot Target 07-Ticket-Scripts.png
Documentation USE_CASES_CENTRON_NEXUS.md §3.7
UI Path Ticket Detail → Scripts Tab OR Ticket List → Bulk Actions
Key Elements Script template list, parameters form, execution button
Main Features Run automation scripts, bulk update tickets, custom workflows
Page Type TicketScripts module components
Related Components ScriptSelector, ParameterEditor, ExecutionButton

3.8 Ticket Web-Formulare (Web Form Submission)

Aspect Details
Screenshot Target 08-Ticket-WebForms.png
Documentation USE_CASES_CENTRON_NEXUS.md §3.8
UI Path Ticket Detail → Web Forms Tab
Key Elements Form fields, field validation, submit button
Main Features Fill custom forms, validate input, submit responses
Page Type TicketWebForms module components
Related Components FormFieldRenderer, ValidationPanel, FormSubmitter

Category 2: Time & Planning (3 Modules)

4.1 Zeiterfassung (Time Tracking)

Aspect Details
Screenshot Target 09-Zeiterfassung.png
Documentation USE_CASES_CENTRON_NEXUS.md §4.1
UI Path ServiceBoard → Time Records
Key Elements Time entry form, duration input, date picker, ticket selector
Main Features Log work time, select ticket, set start/end times, add notes
Page Type Timerecords module
Related Components TimeEntryForm, TicketSelector, DurationCalculator

4.2 Stoppuhren (Global Timer/Stopwatch)

Aspect Details
Screenshot Target 10-Stoppuhren.png
Documentation USE_CASES_CENTRON_NEXUS.md §4.2
UI Path ServiceBoard → Stopwatches
Key Elements Timer display, start/stop buttons, elapsed time
Main Features Start/stop timer, pause, resume, convert to time entry
Page Type Stopwatches module
Related Components TimerDisplay, ControlButtons, TimeConversion

4.3 Scheduler/Kalender (Calendar Planning)

Aspect Details
Screenshot Target 11-Scheduler.png
Documentation USE_CASES_CENTRON_NEXUS.md §4.3
UI Path ServiceBoard → Scheduler
Key Elements Calendar grid, event blocks, time slots, navigation
Main Features View calendar, schedule appointments, block time, manage events
Page Type Scheduler module (Components subfolder)
Related Components CalendarGrid, EventBlock, TimeSlotSelector

Category 3: Content & Documents (5 Modules)

5.1 Ticket-Dokumente (Document Management)

Aspect Details
Screenshot Target 12-Ticket-Dokumente.png
Documentation USE_CASES_CENTRON_NEXUS.md §5.1
UI Path Ticket Detail → Documents Tab
Key Elements Document list, upload button, preview link, delete button
Main Features Upload files, preview, download, delete, manage permissions
Page Type TicketDocuments module
Related Components DocumentList, FileUploader, PreviewPanel

5.2 Ticket-E-Mails (Email Communication)

Aspect Details
Screenshot Target 13-Ticket-Emails.png
Documentation USE_CASES_CENTRON_NEXUS.md §5.2
UI Path Ticket Detail → Emails Tab
Key Elements Email thread, sender info, timestamp, reply button
Main Features View email history, reply to emails, forward, manage attachments
Page Type TicketEmails module (Components subfolder)
Related Components EmailThread, EmailComposer, AttachmentPanel

5.3 Ticket-Berichte (Service Reports)

Aspect Details
Screenshot Target 14-Ticket-Reports.png
Documentation USE_CASES_CENTRON_NEXUS.md §5.3
UI Path Ticket Detail → Reports Tab
Key Elements Report template list, generate button, download button
Main Features Generate reports, customize sections, download PDF/Word
Page Type TicketReports module (uses ServiceReport shared)
Related Components ReportTemplate Selector, ReportGenerator, ExportButton

5.4 Dokumentenviewer (Document Preview)

Aspect Details
Screenshot Target 15-DocumentViewer.png
Documentation USE_CASES_CENTRON_NEXUS.md §5.4
UI Path Document/File → Click Preview
Key Elements Document preview panel, zoom controls, page navigation
Main Features View PDFs, images, Office docs, zoom, rotate, annotate
Page Type DocumentViewer module
Related Components ViewerPanel, ZoomControls, PageNavigator

5.5 E-Mail-Versand (Email Sending)

Aspect Details
Screenshot Target 16-Email-Versand.png
Documentation USE_CASES_CENTRON_NEXUS.md §5.5
UI Path Send Mail Dialog (from ticket actions)
Key Elements Recipient field, subject field, message editor, attachment panel
Main Features Compose email, add attachments, insert templates, send
Page Type SendTicketMail module (uses Email shared components)
Related Components EmailComposer, TemplateSelector, AttachmentUploader

Category 4: Dashboard & Overview (2 Modules)

6.1 Dashboard

Aspect Details
Screenshot Target 17-Dashboard.png
Documentation USE_CASES_CENTRON_NEXUS.md §6.1
UI Path ServiceBoard → Dashboard
Key Elements KPI cards, charts, ticket summary, recent activities
Main Features View KPIs, see trends, access quick actions, drill-down
Page Type Dashboard module
Related Components KPICard, ChartWidget, SummaryPanel

6.2 Mein Tag (MyDay/Today's Schedule)

Aspect Details
Screenshot Target 18-MyDay.png
Documentation USE_CASES_CENTRON_NEXUS.md §6.2
UI Path ServiceBoard → My Day
Key Elements Today's ticket list, scheduled tasks, time blocks
Main Features See today's workload, manage priorities, track progress
Page Type MyDay module
Related Components TodayTicketList, TaskScheduler, ProgressTracker

Category 5: AI & Advanced Features (2 Modules)

7.1 Ticket-AI-Zusammenfassung (AI Summary)

Aspect Details
Screenshot Target 19-Ticket-AI-Summary.png
Documentation USE_CASES_CENTRON_NEXUS.md §7.1
UI Path Ticket Detail → AI Summary
Key Elements Summary text, key points, suggested actions, refresh button
Main Features View AI-generated summary, refresh summary, accept suggestions
Page Type TicketAiSummary module (AiPopupEdit.razor)
Related Components AISummaryPanel, SuggestionsPanel, RefreshButton

7.2 AI-Assist (Content Generation)

Aspect Details
Screenshot Target 20-AI-Assist.png
Documentation USE_CASES_CENTRON_NEXUS.md §7.2
UI Path Ticket Detail → AI Assist (in compose fields)
Key Elements AI Assist button, suggestion popup, accept/reject options
Main Features Generate responses, improve text, check grammar, get suggestions
Page Type TicketAiSummary module (AIAssist.razor)
Related Components AIAssistPanel, SuggestionSelector, TextInsert

Category 6: Customer Management (3 Modules)

8.1 Kundendaten (Customer Data)

Aspect Details
Screenshot Target 21-Kundendaten.png
Documentation USE_CASES_CENTRON_NEXUS.md §8.1
UI Path Ticket Detail → Customer Info
Key Elements Customer name, contact info, company, status
Main Features View customer details, edit info, manage contacts
Page Type Customers module (CRM subfolder)
Related Components CustomerInfoPanel, ContactEditor, CompanySelector

8.2 Kundengeräte & Assets (Customer Equipment/Assets)

Aspect Details
Screenshot Target 22-Kundengeräte.png
Documentation USE_CASES_CENTRON_NEXUS.md §8.2
UI Path Customer Detail → Devices Tab
Key Elements Device list, device details, status indicator, serial number
Main Features View devices, manage inventory, track assets, SN lookup
Page Type Customers/CustomerDevices module
Related Components DeviceList, DeviceDetails, InventoryManager

8.3 Kundendetails & Adressenverwaltung (Address & Contact Management)

Aspect Details
Screenshot Target 23-Kundendetails.png
Documentation USE_CASES_CENTRON_NEXUS.md §8.3
UI Path Customer Detail → Address/Contacts Tab
Key Elements Address form, contact list, email/phone fields
Main Features Manage addresses, add/edit contacts, mark primary
Page Type Customers/CustomerAddresses + Contacts modules
Related Components AddressEditor, ContactList, PrimarySelector

Part 2: Newly Discovered Modules (Not in Main Documentation)

Discovery Note

Analysis of the CentronNexus codebase revealed 11 additional modules beyond the 23 documented. These appear to be either:

  1. Newer modules added after documentation
  2. Hidden/supplementary features
  3. Partner/add-on modules
  4. Administrative utilities

New Category A: Customer Relationship (3 Modules)

A1. Kundenpartner (Customer Partner Management)

Module Directory Purpose
Full Name Customer Partner Relations Customers/CustomerPartners
Screenshot Target 24-Kundenpartner.png
Likely Features Manage partner companies, reseller relations, group accounts
UI Path Customer Detail → Partners/Resellers
Key Components PartnerList, PartnerEditor, RelationshipManager

A2. CRM (Customer Relationship Management)

Module Directory Purpose
Full Name CRM Module Customers/CRM
Screenshot Target 25-CRM.png
Likely Features Sales pipeline, leads, opportunities, customer history
UI Path Customers → CRM
Key Components LeadList, OpportunityTracker, SalesHistory

A3. Kundenaufträge (Customer Orders/Tasks)

Module Directory Purpose
Full Name Customer Task Management Customers/CustomerTasks
Screenshot Target 26-Kundenaufträge.png
Likely Features Track customer orders, change requests, project tasks
UI Path Customer Detail → Tasks/Orders
Key Components TaskList, TaskEditor, OrderTracker

New Category B: Advanced Ticket Features (4 Modules)

B1. TicketMasterDataItems (Configuration Items)

Module Directory Purpose
Full Name Ticket Master Data TicketMasterDataItems
Screenshot Target 27-MasterData.png
Likely Features Configure categories, priorities, statuses, custom fields
UI Path Admin/Settings → Ticket Master Data
Key Components CategoryManager, PriorityManager, StatusConfigurator

B2. TicketMap (Geographic View)

Module Directory Purpose
Full Name Ticket Geographic Map TicketMap
Screenshot Target 28-TicketMap.png
Likely Features View tickets on map by location, service area visualization
UI Path ServiceBoard → Map View
Key Components MapViewer, LocationMarker, ServiceAreaOverlay
Module Directory Purpose
Full Name Global Search Searches
Screenshot Target 29-Search.png
Likely Features Full-text search across tickets, documents, customers
UI Path Search Bar (top navigation)
Key Components SearchInput, ResultsList, FacetedFilter

B4. PasswordManager (Credential Management)

Module Directory Purpose
Full Name Password/Credential Manager PasswordManager
Screenshot Target 30-PasswordManager.png
Likely Features Secure password storage, credential sharing for support
UI Path Ticket Detail → Credentials Tab
Key Components CredentialList, PasswordEditor, EncryptionManager

New Category C: Communication & Notifications (2 Modules)

C1. PhoneCalls (Call Management)

Module Directory Purpose
Full Name Phone Call Tracking PhoneCalls
Screenshot Target 31-PhoneCalls.png
Likely Features Log phone calls, call history, integration with PBX
UI Path Ticket Detail → Call History Tab
Key Components CallLogger, CallHistoryPanel, PhoneIntegration

C2. TicketMail (Email Thread Management)

Module Directory Purpose
Full Name Email Conversation Thread TicketMail
Screenshot Target 32-TicketMail.png
Likely Features Email-to-ticket conversion, thread management, auto-tagging
UI Path Ticket → Email Thread Viewer
Key Components ThreadViewer, EmailParser, AutoTagger

New Category D: Advanced Analytics (2 Modules)

D1. Statistics (Advanced Analytics)

Module Directory Purpose
Full Name Ticket Statistics & Analytics Statistics
Screenshot Target 33-Statistics.png
Likely Features Performance metrics, trend analysis, team productivity
UI Path ServiceBoard → Analytics
Key Components MetricsChart, TrendAnalyzer, ReportGenerator

D2. CustomerDocuments (Document Repository)

Module Directory Purpose
Full Name Customer Document Management Customers/CustomerDocuments
Screenshot Target 34-CustomerDocuments.png
Likely Features Document library per customer, file versioning, access control
UI Path Customer Detail → Documents Tab
Key Components DocumentLibrary, VersionControl, AccessManager

Part 3: Shared Components & Services

Shared UI Components (Used Across Modules)

Component Location Purpose
Checklist ServiceBoard/Shared/Checklist Checklist item rendering
Documents ServiceBoard/Shared/Documents Document list/preview
Email ServiceBoard/Shared/Email Email composition
ServiceReport ServiceBoard/Shared/ServiceReport Report generation
TicketListWrapper ServiceBoard/Shared/TicketListWrapper Reusable ticket list
CompactTicketList ServiceBoard/Shared/CompactTicketList Inline ticket summary
Articles ServiceBoard/Shared/Articles Knowledge base articles
Badge ServiceBoard/Shared/Badge Status indicators
AddressContacts ServiceBoard/Shared/AddressContacts Contact info display
CustomerPartners ServiceBoard/Shared/CustomerPartners Partner relations
Navigation ServiceBoard/Shared/Navigation Common navigation

Part 4: Screenshot Capture Plan

Execution Steps

  1. Prerequisites

    • CentronNexus running on http://localhost:8050
    • Backend web service available on localhost:1234
    • Valid user credentials
    • Database populated with test data
  2. Automated Capture

    # Build and run Playwright
    cd tests/CentronNexus.Tests.Playwright/CentronNexus.Tests.Playwright
    dotnet run -c Debug
    
  3. Screenshot Organization

    • Folder: Screenshots/YYYY-MM-DD_HH-mm-ss/
    • Naming: 01-Module-Name.png through 34-ModuleName.png
    • Full-page capture for documentation completeness
    • Multiple views per module recommended:
      • List view
      • Detail view
      • Edit/Create view
      • Mobile responsive view
  4. Quality Checklist

    • ✓ UI fully loaded
    • ✓ No error messages visible
    • ✓ Data populated (not empty states)
    • ✓ Clear element visibility
    • ✓ Timestamp recorded

Part 5: Use-Case Correlation Matrix

Mapping Table

Screenshot # Module Name Use-Case Section Status Priority
01 Ticket-Liste 3.1 CRITICAL P1
02 Ticket-Details 3.2 CRITICAL P1
03 Ticket-Schließen 3.3 CRITICAL P1
04 Ticket-Weiterleiten 3.4 CRITICAL P1
05 Kanban-Board 3.5 HIGH P2
06 Ticket-Checklisten 3.6 HIGH P2
07 Ticket-Scripts 3.7 HIGH P2
08 Ticket-WebForms 3.8 HIGH P2
09 Zeiterfassung 4.1 HIGH P2
10 Stoppuhren 4.2 MEDIUM P3
11 Scheduler 4.3 HIGH P2
12 Ticket-Dokumente 5.1 HIGH P2
13 Ticket-Emails 5.2 HIGH P2
14 Ticket-Berichte 5.3 MEDIUM P3
15 DocumentViewer 5.4 MEDIUM P3
16 Email-Versand 5.5 MEDIUM P3
17 Dashboard 6.1 HIGH P2
18 MyDay 6.2 HIGH P2
19 Ticket-AI-Summary 7.1 MEDIUM P3
20 AI-Assist 7.2 MEDIUM P3
21 Kundendaten 8.1 MEDIUM P3
22 Kundengeräte 8.2 MEDIUM P3
23 Kundendetails 8.3 MEDIUM P3
24 Kundenpartner NEW PENDING P4
25 CRM NEW PENDING P4
26 Kundenaufträge NEW PENDING P4
27 MasterData NEW PENDING P4
28 TicketMap NEW PENDING P4
29 Search NEW PENDING P4
30 PasswordManager NEW PENDING P4
31 PhoneCalls NEW PENDING P4
32 TicketMail NEW PENDING P4
33 Statistics NEW PENDING P4
34 CustomerDocuments NEW PENDING P4

Part 6: Integration with Playwright

Automated Navigation Paths

// Example: Navigate to specific use-case
// 3.1 - Ticket-Liste
await page.GetByRole(AriaRole.Button, new PageGetByRoleOptions { Name = "ServiceBoard" }).ClickAsync();
await page.GetByRole(AriaRole.Link, new PageGetByRoleOptions { Name = "Ticket List" }).ClickAsync();
await TakeScreenshotAsync(page, "01-Ticket-Liste.png");

// 3.5 - Kanban-Board
await page.GetByRole(AriaRole.Button, new PageGetByRoleOptions { Name = "Kanban" }).ClickAsync();
await TakeScreenshotAsync(page, "05-Kanban-Board.png");

// A1 - Customer Partners (New)
await page.GetByRole(AriaRole.Button, new PageGetByRoleOptions { Name = "Customers" }).ClickAsync();
await page.GetByRole(AriaRole.Tab, new PageGetByRoleOptions { Name = "Partners" }).ClickAsync();
await TakeScreenshotAsync(page, "24-Kundenpartner.png");

Part 7: Documentation Updates Required

When Screenshots Are Captured

  1. Update USE_CASES_CENTRON_NEXUS.md

    • Add screenshot references to each section
    • Link to screenshot file paths
    • Add visual annotations
  2. Create DISCOVERED_USECASES_CENTRON_NEXUS.md

    • Document the 11 new/discovered modules
    • Provide use-case details for each
    • Map to screenshot files
  3. Update README Documentation

    • Add screenshot gallery links
    • Update feature list
    • Link to mapping document

  • Main Playwright Tool: tests/CentronNexus.Tests.Playwright/README.md
  • Current Use-Cases: USE_CASES_CENTRON_NEXUS.md
  • Screenshot Program: tests/CentronNexus.Tests.Playwright/CentronNexus.Tests.Playwright/Program.cs
  • Project Structure: CLAUDE.md

Summary

This document provides a comprehensive framework for mapping CentronNexus UI screenshots to use-case documentation. It covers:

  • 23 documented modules with detailed mapping
  • 11 newly discovered modules requiring documentation
  • 34 total screenshot targets planned
  • Playwright integration paths for automated capture
  • Quality checklist for screenshots
  • Priority matrix for implementation order

Next Steps:

  1. Get CentronNexus fully running with backend service
  2. Execute Playwright automation to capture screenshots
  3. Document discovered modules in new use-case file
  4. Update main USE_CASES with screenshot references