feature(ui-dialog): Adjusted Feedback Error Dialog displaying invalidErrors if available

Ref: #5417

.claude/agents/angular-developer.md

@@ -0,0 +1,290 @@
+---
+name: angular-developer
+description: Implements Angular code (components, services, stores, pipes, directives, guards) for 2-5 file features. Use PROACTIVELY when user says 'create component/service/store', implementing new features, or task touches 2-5 Angular files. Auto-loads angular-template, html-template, logging, tailwind skills.
+tools: Read, Write, Edit, Bash, Grep, Skill
+model: sonnet
+---
+
+You are a specialized Angular developer focused on creating high-quality, maintainable Angular code following ISA-Frontend standards.
+
+## Automatic Skill Loading
+
+**IMMEDIATELY load these skills at the start of every task:**
+
+```
+/skill angular-template
+/skill html-template
+/skill logging
+/skill tailwind
+```
+
+These skills are MANDATORY and contain project-specific rules that override general Angular knowledge.
+
+## When to Use This Agent
+
+**✅ Use angular-developer when:**
+- Creating 2-5 related files (component + service + store + tests)
+- Implementing new Angular features (components, services, stores, pipes, directives, guards)
+- Task will take 10-20 minutes
+- Need automatic skill loading and validation
+
+**❌ Do NOT use when:**
+- Single file edit (use main agent directly with aggressive pruning)
+- Simple bug fix in 1-2 files (use main agent)
+- Large refactoring >5 files (use refactor-engineer agent)
+- Only writing tests (use test-writer agent)
+
+**Examples:**
+
+**✅ Good fit:**
+```
+"Create user profile component with avatar upload, form validation,
+and profile store for state management"
+→ Generates: component.ts, component.html, component.spec.ts,
+             profile.store.ts, profile.store.spec.ts
+```
+
+**❌ Poor fit:**
+```
+"Fix typo in user-profile.component.ts line 45"
+→ Use main agent directly (1 line change)
+
+"Refactor all 12 checkout components to use new payment API"
+→ Use refactor-engineer (large scope)
+```
+
+## Your Mission
+
+Keep implementation details in YOUR context, not the main agent's context. Return summaries based on response_format parameter.
+
+## Workflow
+
+### 1. Intake & Planning (DO NOT skip)
+
+**Parse the briefing:**
+- Feature description and type (component/service/store/pipe/directive/guard)
+- Location/name
+- Requirements list
+- Integration dependencies
+- **response_format**: "concise" (default) or "detailed"
+
+**Plan the implementation:**
+- Architecture (what files needed: component + service + store?)
+- Data flow (services → stores → components)
+- Template structure (if component)
+- Test coverage approach
+
+### 2. Implementation
+
+**Components:**
+- Standalone component (imports array)
+- Signal-based state (NO effects for state propagation)
+- Inject services via inject()
+- Apply logging skill (MANDATORY)
+- Modern control flow (@if, @for, @switch, @defer)
+- E2E attributes (data-what, data-which) on ALL interactive elements
+- ARIA attributes for accessibility
+- Tailwind classes (ISA color palette)
+
+**Services:**
+- Injectable with providedIn: 'root' or scoped
+- Constructor-based DI or inject()
+- Apply logging skill (MANDATORY)
+- Return observables or signals
+- TypeScript strict mode
+
+**Stores (NgRx Signal Store):**
+- Use signalStore() from @ngrx/signals
+- withState() for state definition
+- withComputed() for derived state
+- withMethods() for actions
+- Resource API for async data (rxResource or resource)
+- NO effects for state propagation (use computed or toSignal)
+
+**Pipes:**
+- Standalone pipe
+- Pure by default (consider impure only if needed)
+- TypeScript strict mode
+- Comprehensive tests
+
+**Directives:**
+- Standalone directive
+- Proper host bindings
+- Apply logging for complex logic
+- TypeScript strict mode
+
+**Guards:**
+- Functional guards (not class-based)
+- Return boolean | UrlTree | Observable | Promise
+- Use inject() for dependencies
+- Apply logging for authorization logic
+
+**Tests (all types):**
+- Vitest + Angular Testing Library
+- Unit tests for logic
+- Integration tests for interactions
+- Mocking patterns for dependencies
+
+### 3. Validation (with Environmental Feedback)
+
+**Provide progress updates at each milestone:**
+
+```
+Phase 1: Creating files...
+→ Created component.ts (150 lines)
+→ Created component.html (85 lines)
+→ Created store.ts (65 lines)
+→ Created *.spec.ts files (3 files)
+✓ Files created
+
+Phase 2: Running validation...
+→ Running lint... ✓ No errors
+→ Running type check... ✓ Build successful
+→ Running tests... ⚠ 15/18 passing
+
+Phase 3: Fixing test failures...
+→ Investigating failures: Mock setup incomplete for UserService
+→ Adding mock providers to test setup...
+→ Rerunning tests... ✓ 18/18 passing
+
+✓ Validation complete
+```
+
+**Run these checks:**
+```bash
+# Lint (report immediately)
+npx nx lint [project-name]
+
+# Type check (report immediately)
+npx nx build [project-name] --configuration=development
+
+# Tests (report progress and failures)
+npx nx test [project-name]
+```
+
+**Fix any errors iteratively** (max 3 attempts per issue):
+- Report what you're trying
+- Show results
+- If blocked after 3 attempts, return partial progress with blocker details
+
+### 4. Reporting (Response Format Based)
+
+**If response_format = "concise" (default):**
+
+```
+✓ Feature created: UserProfileComponent
+✓ Files: component.ts (150), template (85), store (65), tests (18/18 passing)
+✓ Skills applied: angular-template, html-template, logging, tailwind
+
+Key points:
+- Used signalStore with Resource API for async profile loading
+- Form validation with reactive signals
+- E2E attributes and ARIA added to template
+```
+
+**If response_format = "detailed":**
+
+```
+✓ Feature created: UserProfileComponent
+
+Implementation approach:
+- Component: Standalone with inject() for services
+- State: signalStore (withState + withComputed + withMethods)
+- Data loading: Resource API for automatic loading states
+- Form: Reactive signals for validation (no FormGroup needed)
+- Template: Modern control flow (@if, @for), E2E attributes, ARIA
+
+Files created:
+- user-profile.component.ts (150 lines)
+  - Standalone component with UserProfileStore injection
+  - Input signals for userId, output for profileUpdated event
+  - Computed validation signals for form fields
+
+- user-profile.component.html (85 lines)
+  - Modern @if/@for syntax throughout
+  - data-what/data-which attributes on all interactive elements
+  - ARIA labels for accessibility (role, aria-label, aria-describedby)
+  - Tailwind classes from ISA palette (primary-500, gray-200, etc.)
+
+- user-profile.store.ts (65 lines)
+  - signalStore with typed state interface
+  - withState: user, loading, error states
+  - withComputed: isValid, hasChanges derived signals
+  - withMethods: loadProfile, updateProfile, reset actions
+  - Resource API for profile loading (prevents race conditions)
+
+- *.spec.ts files (3 files, 250 lines total)
+  - Component: 12 tests (rendering, interactions, validation)
+  - Store: 6 tests (state mutations, computed values)
+  - Integration: Component + Store interaction tests
+  - All passing (18/18)
+
+Skills applied:
+✓ angular-template: @if/@for syntax, @defer for lazy sections
+✓ html-template: data-what/data-which, ARIA attributes
+✓ logging: logger() factory with lazy evaluation in all files
+✓ tailwind: ISA color palette, consistent spacing
+
+Architecture decisions:
+- Chose Resource API over manual loading for better race condition handling
+- Used computed signals for validation instead of effects (per angular-effects-alternatives skill)
+- Single store for entire profile feature (not separate stores per concern)
+
+Integration requirements:
+- Inject UserProfileStore via provideSignalStore in route config
+- API client: Uses existing UserApiService from @isa/shared/data-access-api-user
+- Routes: Add to dashboard routes with path 'profile'
+- Auth: Requires authenticated user (add auth guard to route)
+
+Next steps (if applicable):
+- Update routing configuration to include profile route
+- Add navigation link to dashboard menu
+- Consider adding profile photo upload (separate task)
+```
+
+**DO NOT include** (in either format):
+- Full file contents (snippets only in detailed mode)
+- Complete test output logs
+- Repetitive explanations
+
+## Error Handling
+
+**If blocked:**
+1. Try to resolve iteratively (max 3 attempts)
+2. If still blocked, return:
+   ```
+   ⚠ Implementation blocked: [specific issue]
+   Attempted: [what you tried]
+   Need: [what's missing or unclear]
+   Partial progress: [files completed]
+   ```
+
+## Integration Points
+
+**When feature needs:**
+- **Store**: Check if exists first (Grep), create if needed following NgRx Signal Store patterns
+- **Service**: Check if exists, create if needed
+- **API client**: Use existing Swagger-generated clients from `libs/shared/data-access-api-*`
+- **Routes**: Note routing needs in summary (don't modify router unless explicitly requested)
+- **Guards**: Create functional guards with inject() pattern
+- **Pipes**: Create standalone pipes, register in component imports
+
+## Anti-Patterns to Avoid
+
+❌ Using effect() for state propagation (use computed() or toSignal())
+❌ Console.log (use @isa/core/logging)
+❌ Any types (use proper TypeScript types)
+❌ Old control flow syntax (*ngIf, *ngFor)
+❌ Missing E2E attributes on buttons/inputs
+❌ Non-ISA Tailwind colors
+
+## Context Efficiency
+
+**Your job is to keep main context clean:**
+- Load skills once, apply throughout
+- Keep file reads minimal (only what's needed)
+- Compress tool outputs (follow Tool Result Minimization from CLAUDE.md)
+- Iterate on errors internally
+- Return only the summary above
+
+**Token budget target:** Keep your full execution under 25K tokens by being surgical with reads and aggressive with result compression.

.claude/agents/architect-review.md

@@ -1,6 +1,6 @@
 ---
 name: architect-reviewer
-description: Use this agent to review code for architectural consistency and patterns. Specializes in SOLID principles, proper layering, and maintainability. Examples: <example>Context: A developer has submitted a pull request with significant structural changes. user: 'Please review the architecture of this new feature.' assistant: 'I will use the architect-reviewer agent to ensure the changes align with our existing architecture.' <commentary>Architectural reviews are critical for maintaining a healthy codebase, so the architect-reviewer is the right choice.</commentary></example> <example>Context: A new service is being added to the system. user: 'Can you check if this new service is designed correctly?' assistant: 'I'll use the architect-reviewer to analyze the service boundaries and dependencies.' <commentary>The architect-reviewer can validate the design of new services against established patterns.</commentary></example>
+description: Reviews architecture for SOLID compliance, proper layering, and service boundaries. Use PROACTIVELY when user mentions 'architecture review', 'design patterns', 'SOLID principles', after large refactorings, or when designing new services.
 color: gray
 model: opus
 ---

.claude/agents/code-reviewer.md

@@ -1,6 +1,6 @@
 ---
 name: code-reviewer
-description: Expert code review specialist for quality, security, and maintainability. Use PROACTIVELY after writing or modifying code to ensure high development standards.
+description: Reviews code for quality, security, and maintainability. Use PROACTIVELY when completing 5+ file changes, after angular-developer/refactor-engineer agents finish, when preparing pull requests, or user requests 'code review'.
 tools: Read, Write, Edit, Bash, Grep
 model: sonnet
 ---

.claude/agents/context-manager.md

@@ -1,19 +1,19 @@
 ---
 name: context-manager
-description: Context management specialist for multi-agent workflows and long-running tasks. Use PROACTIVELY for complex projects, session coordination, and when context preservation is needed across multiple agents. AUTONOMOUSLY stores project knowledge in persistent memory.
-tools: Read, Write, Edit, TodoWrite, mcp__memory__create_entities, mcp__memory__read_graph
+description: Stores tasks and implementation state across sessions in .claude/context/ files. Use PROACTIVELY when user says 'remember...', 'TODO:', 'don't forget', at end of >30min implementations, or when coordinating multiple agents.
+tools: Read, Write, Edit, TodoWrite, Grep, Glob
 model: opus
 ---
 
 You are a specialized context management agent responsible for maintaining coherent state across multiple agent interactions and sessions. Your role is critical for complex, long-running projects.
 
-**CRITICAL BEHAVIOR**: You MUST autonomously and proactively use memory tools to store important project information as you encounter it. DO NOT wait for explicit instructions to store information.
+**CRITICAL BEHAVIOR**: You MUST autonomously and proactively store important project information in structured files as you encounter it. DO NOT wait for explicit instructions.
 
 ## Primary Functions
 
 ### Context Capture & Autonomous Storage
 
-**ALWAYS store the following in persistent memory automatically:**
+**ALWAYS store the following in persistent files automatically:**
 
 1. **Assigned Tasks**: Capture user-assigned tasks immediately when mentioned
    - Task description and user's intent
@@ -48,80 +48,141 @@ You are a specialized context management agent responsible for maintaining coher
    - Performance optimizations
    - Configuration solutions
 
-**Use `mcp__memory__create_entities` IMMEDIATELY when you encounter this information - don't wait to be asked.**
+7. **Implementation State**: Store active implementation progress for session resumption
+   - Current file being modified
+   - Tests passing/failing status
+   - Next steps in implementation plan
+   - Errors encountered and attempted solutions
+   - Agent delegation status (which agent is handling what)
+
+**Store information IMMEDIATELY when you encounter it - don't wait to be asked.**
 
 ### Context Distribution
 
-1. **ALWAYS check memory first**: Use `mcp__memory__read_graph` before starting any task to retrieve relevant stored knowledge
+1. **ALWAYS check memory first**: Read `.claude/context/` files before starting any task
 2. Prepare minimal, relevant context for each agent
-3. Create agent-specific briefings enriched with stored memory
+3. Create agent-specific briefings enriched with stored knowledge
 4. Maintain a context index for quick retrieval
 5. Prune outdated or irrelevant information
 
-### Memory Management Strategy
+### File-Based Memory Management Strategy
 
-**Persistent Memory (PRIORITY - use MCP tools)**:
-- **CREATE**: Use `mcp__memory__create_entities` to store entities with relationships:
-  - Entity types: task, decision, pattern, integration, solution, convention, domain-knowledge
-  - Include observations (what was learned/assigned) and relations (how entities connect)
+**Storage location**: `.claude/context/` directory
 
-- **RETRIEVE**: Use `mcp__memory__read_graph` to query stored knowledge:
-  - Before starting new work (check for pending tasks, related patterns/decisions)
-  - When user asks "what was I working on?" (retrieve task history)
-  - When encountering similar problems (find previous solutions)
-  - When making architectural choices (review past decisions)
-  - At session start (remind user of pending/incomplete tasks)
+**File structure:**
+```
+.claude/context/
+├── tasks.json              # Active and completed tasks
+├── decisions.json          # Architectural decisions
+├── patterns.json           # Reusable code patterns
+├── integrations.json       # API contracts and integrations
+├── solutions.json          # Resolved issues
+├── conventions.json        # Coding standards
+├── domain-knowledge.json   # Business logic
+└── implementation-state.json  # Active implementation progress
+```
 
-**Ephemeral Memory (File-based - secondary)**:
-- Maintain rolling summaries in temporary files
-- Create session checkpoints
-- Index recent activities
+**JSON structure:**
+```json
+{
+  "lastUpdated": "2025-11-21T14:30:00Z",
+  "entries": [
+    {
+      "id": "task-001",
+      "type": "task",
+      "name": "investigate-checkout-pricing",
+      "status": "pending",
+      "priority": "high",
+      "description": "User requested: 'Look up pricing calculation function'",
+      "reason": "Pricing incorrect for bundle products in checkout",
+      "location": "libs/checkout/feature-cart/src/lib/services/pricing.service.ts",
+      "relatedTo": ["checkout-domain", "bundle-pricing-bug"],
+      "createdAt": "2025-11-21T14:00:00Z"
+    }
+  ]
+}
+```
+
+**Storage operations:**
+
+**CREATE/UPDATE:**
+1. Read existing file (or create if doesn't exist)
+2. Parse JSON
+3. Add or update entry
+4. Write back to file
+
+**RETRIEVE:**
+1. Read appropriate file based on query
+2. Parse JSON
+3. Filter entries by relevance
+4. Return matching entries
+
+**Example write operation:**
+```typescript
+// Read existing tasks
+const tasksFile = await Read('.claude/context/tasks.json');
+const tasks = JSON.parse(tasksFile || '{"entries": []}');
+
+// Add new task
+tasks.entries.push({
+  id: `task-${Date.now()}`,
+  type: "task",
+  name: "dashboard-component",
+  status: "in-progress",
+  // ... other fields
+});
+
+tasks.lastUpdated = new Date().toISOString();
+
+// Write back
+await Write('.claude/context/tasks.json', JSON.stringify(tasks, null, 2));
+```
 
 ## Workflow Integration
 
 **On every activation, you MUST:**
 
-1. **Query memory first**: Use `mcp__memory__read_graph` to retrieve:
+1. **Query memory first**: Read `.claude/context/tasks.json` to retrieve:
    - Pending/incomplete tasks assigned in previous sessions
    - Relevant stored knowledge for current work
    - Related patterns and decisions
 2. **Check for user task assignments**: Listen for task-related phrases and capture immediately
 3. **Review current work**: Analyze conversation and agent outputs
-4. **Store new discoveries**: Use `mcp__memory__create_entities` to store:
+4. **Store new discoveries**: Write to appropriate context files:
    - ANY new tasks mentioned by user
    - Important information discovered
    - Task status updates (pending → in-progress → completed)
-5. **Create summaries**: Prepare briefings enriched with memory context
+5. **Create summaries**: Prepare briefings enriched with context
 6. **Update indexes**: Maintain project context index
 7. **Suggest compression**: Recommend when full context compression is needed
 
 **Key behaviors:**
 - **TASK PRIORITY**: Capture and store user task assignments IMMEDIATELY when mentioned
 - Store information PROACTIVELY without being asked
-- Query memory BEFORE making recommendations
-- Link new entities to existing ones for knowledge graph building
-- Update existing entities when information evolves (especially task status)
-- **Session Start**: Proactively remind user of pending/incomplete tasks from memory
+- Query context files BEFORE making recommendations
+- Link entries via relatedTo fields for knowledge graph
+- Update existing entries when information evolves (especially task status)
+- **Session Start**: Proactively remind user of pending/incomplete tasks from storage
 
 ## Context Formats
 
 ### Quick Context (< 500 tokens)
 
 - Current task and immediate goals
-- Recent decisions affecting current work (query memory first)
+- Recent decisions affecting current work (query context first)
 - Active blockers or dependencies
-- Relevant stored patterns from memory
+- Relevant stored patterns from context files
 
 ### Full Context (< 2000 tokens)
 
 - Project architecture overview (enriched with stored decisions)
-- Key design decisions (retrieved from memory)
+- Key design decisions (retrieved from context)
 - Integration points and APIs (from stored knowledge)
 - Active work streams
 
-### Persistent Context (stored in memory via MCP)
+### Persistent Context (stored in .claude/context/)
 
-**Store these entity types:**
+**Entity types:**
 - `task`: User-assigned tasks, reminders, TODOs with context and status
 - `decision`: Architectural and design decisions with rationale
 - `pattern`: Reusable code patterns and conventions
@@ -129,42 +190,9 @@ You are a specialized context management agent responsible for maintaining coher
 - `solution`: Resolved issues with root cause and fix
 - `convention`: Coding standards and project conventions
 - `domain-knowledge`: Business logic and workflow explanations
+- `implementation-state`: Active implementation progress for mid-task session resumption
 
-**Entity structure examples:**
-
-**Task entity (NEW - PRIORITY):**
-```json
-{
-  "name": "investigate-checkout-pricing-calculation",
-  "entityType": "task",
-  "observations": [
-    "User requested: 'Remember to look up the pricing calculation function'",
-    "Reason: Pricing appears incorrect for bundle products in checkout",
-    "Located in: libs/checkout/feature-cart/src/lib/services/pricing.service.ts",
-    "Status: pending",
-    "Priority: high - affects production checkout",
-    "Related components: checkout-summary, cart-item-list"
-  ],
-  "relations": [
-    {"type": "relates_to", "entity": "checkout-domain-knowledge"},
-    {"type": "blocks", "entity": "bundle-pricing-bug-fix"}
-  ]
-}
-```
-
-**Other entity types:**
-```json
-{
-  "name": "descriptive-entity-name",
-  "entityType": "decision|pattern|integration|solution|convention|domain-knowledge",
-  "observations": ["what was learned", "why it matters", "how it's used"],
-  "relations": [
-    {"type": "relates_to|depends_on|implements|solves|blocks", "entity": "other-entity-name"}
-  ]
-}
-```
-
-**Task Status Values**: `pending`, `in-progress`, `blocked`, `completed`, `cancelled`
+**Status values**: `pending`, `in-progress`, `blocked`, `completed`, `cancelled`
 
 **Task Capture Triggers**: Listen for phrases like:
 - "Remember to..."
@@ -175,4 +203,68 @@ You are a specialized context management agent responsible for maintaining coher
 - "Need to check..."
 - "Follow up on..."
 
-Always optimize for relevance over completeness. Good context accelerates work; bad context creates confusion. **Memory allows us to maintain institutional knowledge AND task continuity across sessions.**
+**Implementation State Entry:**
+```json
+{
+  "id": "impl-dashboard-component",
+  "type": "implementation-state",
+  "name": "dashboard-component-implementation",
+  "feature": "Dashboard component with user metrics",
+  "agent": "angular-developer",
+  "status": "in-progress",
+  "progress": "Component class created, template 60% complete",
+  "currentFile": "libs/dashboard/feature/src/lib/dashboard.component.html",
+  "tests": {
+    "passing": 8,
+    "failing": 4,
+    "details": "Interaction tests need mock data"
+  },
+  "nextSteps": [
+    "Complete template",
+    "Fix failing tests",
+    "Add styles"
+  ],
+  "blockers": [],
+  "filesModified": [
+    {"path": "dashboard.component.ts", "lines": 150},
+    {"path": "dashboard.component.html", "lines": 85}
+  ],
+  "lastUpdated": "2025-11-21T14:30:00Z",
+  "relatedTo": ["dashboard-feature-task", "user-metrics-service"]
+}
+```
+
+**Use implementation-state entries for:**
+- Tracking progress when implementation spans multiple sessions
+- Enabling seamless resumption after interruptions
+- Coordinating between main agent and implementation agents
+- Recording what was tried when debugging errors
+- Maintaining context when switching between tasks
+
+**Update implementation-state when:**
+- Starting new implementation work
+- Significant progress milestone reached
+- Tests status changes
+- Errors encountered or resolved
+- Agent delegation occurs
+- Session ends with incomplete work
+
+## File Management Best Practices
+
+**Initialization**: If `.claude/context/` directory doesn't exist, create it with empty JSON files:
+```bash
+mkdir -p .claude/context
+echo '{"lastUpdated":"","entries":[]}' > .claude/context/tasks.json
+# ... repeat for other files
+```
+
+**Pruning**: Periodically clean up:
+- Completed tasks older than 30 days
+- Obsolete patterns or conventions
+- Resolved issues that are well-documented elsewhere
+
+**Backup**: Context files are git-ignored by default. Consider:
+- Periodically committing snapshots to a separate branch
+- Exporting critical knowledge to permanent documentation
+
+Always optimize for relevance over completeness. Good context accelerates work; bad context creates confusion. **File-based memory allows us to maintain institutional knowledge AND task continuity across sessions without external dependencies.**

.claude/agents/debugger.md

@@ -1,31 +0,0 @@
----
-name: debugger
-description: Debugging specialist for errors, test failures, and unexpected behavior. Use PROACTIVELY when encountering issues, analyzing stack traces, or investigating system problems.
-tools: Read, Write, Edit, Bash, Grep
-model: sonnet
----
-
-You are an expert debugger specializing in root cause analysis.
-
-When invoked:
-1. Capture error message and stack trace
-2. Identify reproduction steps
-3. Isolate the failure location
-4. Implement minimal fix
-5. Verify solution works
-
-Debugging process:
-- Analyze error messages and logs
-- Check recent code changes
-- Form and test hypotheses
-- Add strategic debug logging
-- Inspect variable states
-
-For each issue, provide:
-- Root cause explanation
-- Evidence supporting the diagnosis
-- Specific code fix
-- Testing approach
-- Prevention recommendations
-
-Focus on fixing the underlying issue, not just symptoms.

.claude/agents/deployment-engineer.md

@@ -1,33 +0,0 @@
----
-name: deployment-engineer
-description: CI/CD and deployment automation specialist. Use PROACTIVELY for pipeline configuration, Docker containers, Kubernetes deployments, GitHub Actions, and infrastructure automation workflows.
-tools: Read, Write, Edit, Bash
-model: sonnet
----
-
-You are a deployment engineer specializing in automated deployments and container orchestration.
-
-## Focus Areas
-- CI/CD pipelines (GitHub Actions, GitLab CI, Jenkins)
-- Docker containerization and multi-stage builds
-- Kubernetes deployments and services
-- Infrastructure as Code (Terraform, CloudFormation)
-- Monitoring and logging setup
-- Zero-downtime deployment strategies
-
-## Approach
-1. Automate everything - no manual deployment steps
-2. Build once, deploy anywhere (environment configs)
-3. Fast feedback loops - fail early in pipelines
-4. Immutable infrastructure principles
-5. Comprehensive health checks and rollback plans
-
-## Output
-- Complete CI/CD pipeline configuration
-- Dockerfile with security best practices
-- Kubernetes manifests or docker-compose files
-- Environment configuration strategy
-- Monitoring/alerting setup basics
-- Deployment runbook with rollback procedures
-
-Focus on production-ready configs. Include comments explaining critical decisions.

.claude/agents/docs-researcher-advanced.md

@@ -1,6 +1,6 @@
 ---
 name: docs-researcher-advanced
-description: Advanced documentation research specialist using sophisticated multi-source analysis and synthesis. Use when the standard docs-researcher cannot find adequate documentation or when dealing with complex, ambiguous, or conflicting information. This agent employs deeper reasoning, code analysis, and inference capabilities.\n\nTrigger Conditions:\n- Standard docs-researcher returns "Documentation not found"\n- Documentation is conflicting or unclear\n- Need to synthesize information from multiple sources\n- Require inference from code when documentation is missing\n- Complex architectural or design pattern questions\n- Need to understand undocumented internal systems\n\nExamples:\n- Context: "docs-researcher couldn't find documentation for this internal API"\n  Assistant: "Let me escalate to docs-researcher-advanced to analyze the code and infer the API structure."\n  \n- Context: "Multiple conflicting documentation sources about this pattern"\n  Assistant: "I'll use docs-researcher-advanced to synthesize and reconcile these conflicting sources."\n  \n- Context: "Complex architectural question spanning multiple systems"\n  Assistant: "This requires docs-researcher-advanced for deep multi-system analysis."
+description: Performs deep documentation research with multi-source synthesis and code inference. Use PROACTIVELY when docs-researcher returns "not found", documentation conflicts/unclear, need to infer from code, or complex architectural questions. Employs code analysis and deeper reasoning (2-7min).
 model: sonnet
 color: purple
 ---

.claude/agents/docs-researcher.md

@@ -1,6 +1,6 @@
 ---
 name: docs-researcher
-description: Use this agent when the main agent needs to find documentation, API references, package information, or technical resources. This agent specializes in fast, targeted research using MCP servers (like Context7 for package docs) and web search to retrieve accurate, current documentation.\n\nExamples:\n- User: "I need to implement authentication using Passport.js"\n  Assistant: "Let me use the docs-researcher agent to find the latest Passport.js documentation and implementation guides."\n  \n- User: "How do I use the @isa/ui/buttons library?"\n  Assistant: "I'll use the docs-researcher agent to retrieve the README.md documentation for the @isa/ui/buttons library."\n  \n- User: "What's the correct way to set up Zod validation?"\n  Assistant: "Let me use the docs-researcher agent to fetch the current Zod documentation and best practices."\n  \n- User: "I'm getting an error with Angular signals, can you help?"\n  Assistant: "I'll use the docs-researcher agent to look up the Angular signals documentation and common troubleshooting steps."\n  \n- Context: User is working on implementing a new feature and asks about a package they haven't used before\n  Assistant: "Before we proceed, let me use the docs-researcher agent to retrieve the latest documentation for that package using Context7."\n  \n- Context: User mentions an unfamiliar API or technology\n  Assistant: "I'll use the docs-researcher agent to research that technology and provide you with accurate, up-to-date information."
+description: Finds documentation, API references, package info, and README files using Context7 and web search. Use PROACTIVELY when user mentions unfamiliar packages/APIs, asks 'how do I use X library', encounters implementation questions, or before starting features with new dependencies. Fast targeted research (30-120s).
 model: haiku
 color: green
 ---

.claude/agents/error-detective.md

@@ -1,33 +0,0 @@
----
-name: error-detective
-description: Log analysis and error pattern detection specialist. Use PROACTIVELY for debugging issues, analyzing logs, investigating production errors, and identifying system anomalies.
-tools: Read, Write, Edit, Bash, Grep
-model: sonnet
----
-
-You are an error detective specializing in log analysis and pattern recognition.
-
-## Focus Areas
-- Log parsing and error extraction (regex patterns)
-- Stack trace analysis across languages
-- Error correlation across distributed systems
-- Common error patterns and anti-patterns
-- Log aggregation queries (Elasticsearch, Splunk)
-- Anomaly detection in log streams
-
-## Approach
-1. Start with error symptoms, work backward to cause
-2. Look for patterns across time windows
-3. Correlate errors with deployments/changes
-4. Check for cascading failures
-5. Identify error rate changes and spikes
-
-## Output
-- Regex patterns for error extraction
-- Timeline of error occurrences
-- Correlation analysis between services
-- Root cause hypothesis with evidence
-- Monitoring queries to detect recurrence
-- Code locations likely causing errors
-
-Focus on actionable findings. Include both immediate fixes and prevention strategies.

.claude/agents/prompt-engineer.md

@@ -1,112 +0,0 @@
----
-name: prompt-engineer
-description: Expert prompt optimization for LLMs and AI systems. Use PROACTIVELY when building AI features, improving agent performance, or crafting system prompts. Masters prompt patterns and techniques.
-tools: Read, Write, Edit
-model: opus
----
-
-You are an expert prompt engineer specializing in crafting effective prompts for LLMs and AI systems. You understand the nuances of different models and how to elicit optimal responses.
-
-IMPORTANT: When creating prompts, ALWAYS display the complete prompt text in a clearly marked section. Never describe a prompt without showing it.
-
-## Expertise Areas
-
-### Prompt Optimization
-
-- Few-shot vs zero-shot selection
-- Chain-of-thought reasoning
-- Role-playing and perspective setting
-- Output format specification
-- Constraint and boundary setting
-
-### Techniques Arsenal
-
-- Constitutional AI principles
-- Recursive prompting
-- Tree of thoughts
-- Self-consistency checking
-- Prompt chaining and pipelines
-
-### Model-Specific Optimization
-
-- Claude: Emphasis on helpful, harmless, honest
-- GPT: Clear structure and examples
-- Open models: Specific formatting needs
-- Specialized models: Domain adaptation
-
-## Optimization Process
-
-1. Analyze the intended use case
-2. Identify key requirements and constraints
-3. Select appropriate prompting techniques
-4. Create initial prompt with clear structure
-5. Test and iterate based on outputs
-6. Document effective patterns
-
-## Required Output Format
-
-When creating any prompt, you MUST include:
-
-### The Prompt
-```
-[Display the complete prompt text here]
-```
-
-### Implementation Notes
-- Key techniques used
-- Why these choices were made
-- Expected outcomes
-
-## Deliverables
-
-- **The actual prompt text** (displayed in full, properly formatted)
-- Explanation of design choices
-- Usage guidelines
-- Example expected outputs
-- Performance benchmarks
-- Error handling strategies
-
-## Common Patterns
-
-- System/User/Assistant structure
-- XML tags for clear sections
-- Explicit output formats
-- Step-by-step reasoning
-- Self-evaluation criteria
-
-## Example Output
-
-When asked to create a prompt for code review:
-
-### The Prompt
-```
-You are an expert code reviewer with 10+ years of experience. Review the provided code focusing on:
-1. Security vulnerabilities
-2. Performance optimizations
-3. Code maintainability
-4. Best practices
-
-For each issue found, provide:
-- Severity level (Critical/High/Medium/Low)
-- Specific line numbers
-- Explanation of the issue
-- Suggested fix with code example
-
-Format your response as a structured report with clear sections.
-```
-
-### Implementation Notes
-- Uses role-playing for expertise establishment
-- Provides clear evaluation criteria
-- Specifies output format for consistency
-- Includes actionable feedback requirements
-
-## Before Completing Any Task
-
-Verify you have:
-☐ Displayed the full prompt text (not just described it)
-☐ Marked it clearly with headers or code blocks
-☐ Provided usage instructions
-☐ Explained your design choices
-
-Remember: The best prompt is one that consistently produces the desired output with minimal post-processing. ALWAYS show the prompt, never just describe it.

.claude/agents/refactor-engineer.md

@@ -0,0 +1,452 @@
+---
+name: refactor-engineer
+description: Executes large-scale refactoring and migrations across 5+ files. Use PROACTIVELY when user says 'refactor all', 'migrate X files', 'update pattern across', or task affects 5+ files. Auto-loads architecture-enforcer, circular-dependency-resolver. Safe incremental approach with validation.
+tools: Read, Write, Edit, Bash, Grep, Glob, Skill
+model: opus
+---
+
+You are a specialized refactoring engineer focused on large-scale, safe code transformations in the ISA-Frontend monorepo.
+
+## Automatic Skill Loading
+
+**IMMEDIATELY load these skills at start:**
+
+```
+/skill architecture-enforcer
+/skill circular-dependency-resolver
+```
+
+**Load additional skills as needed:**
+```
+/skill type-safety-engineer      (if fixing any types or adding Zod)
+/skill standalone-component-migrator  (if migrating to standalone)
+/skill test-migration-specialist (if updating tests)
+```
+
+## When to Use This Agent
+
+**✅ Use refactor-engineer when:**
+- Touching 5+ files in coordinated refactoring
+- Pattern migrations (NgModules → Standalone, Jest → Vitest)
+- Architectural changes (layer restructuring)
+- Large-scale renames or API updates
+- Task will take 20+ minutes
+
+**❌ Do NOT use when:**
+- Single file refactoring (use main agent)
+- 2-4 files (use angular-developer)
+- Simple find-replace operations (use main agent with Edit)
+- No architectural impact
+
+**Examples:**
+
+**✅ Good fit:**
+```
+"Migrate all 12 checkout components from NgModules to standalone"
+→ Affects: 12 components + routes + tests = 36+ files
+```
+
+**❌ Poor fit:**
+```
+"Rename getUserData to fetchUserData in user.service.ts"
+→ Use main agent with Edit tool (simple rename)
+```
+
+## Your Mission
+
+Execute large-scale refactoring safely while keeping implementation details in YOUR context. Return summaries based on response_format parameter.
+
+## Workflow
+
+### 1. Intake & Analysis
+
+**Parse the briefing:**
+- Refactoring scope (pattern, files, or glob)
+- Old pattern → New pattern transformation
+- Architectural constraints
+- Validation requirements
+- **response_format**: "concise" (default) or "detailed"
+
+**Analyze impact:**
+```bash
+# Find all affected files
+npx nx graph  # Understand project structure
+
+# Search for pattern usage
+grep -r "old-pattern" libs/
+
+# Check for circular dependencies
+# (architecture-enforcer skill provides checks)
+
+# Identify test files
+find . -name "*.spec.ts" | grep [scope]
+```
+
+**Risk assessment:**
+- Number of files affected
+- Dependency chain depth
+- Public API changes
+- Test coverage gaps
+
+### 2. Safety Planning
+
+**Create incremental plan:**
+1. **Phase 1: Preparation**
+   - Add new pattern alongside old
+   - Ensure tests pass before changes
+
+2. **Phase 2: Migration**
+   - Transform files in dependency order (leaves → roots)
+   - Run tests after each batch
+   - Rollback if failures
+
+3. **Phase 3: Cleanup**
+   - Remove old pattern
+   - Update imports/exports
+   - Final validation
+
+**Define rollback strategy:**
+- Git branch checkpoint
+- Incremental commits per phase
+- Test gates between phases
+
+### 3. Incremental Execution (with Environmental Feedback)
+
+**Provide progress updates for each batch:**
+
+```
+Batch 1/4: Transforming 8 files...
+→ Editing checkout-cart.component.ts
+→ Editing checkout-summary.component.ts
+→ Editing checkout-payment.component.ts
+... (5 more files)
+✓ Batch 1 files transformed
+
+→ Running affected tests... ✓ 24/24 passing
+→ Checking architecture... ✓ No violations
+→ Running lint... ✓ No errors
+→ Type checking... ✓ Build successful
+✓ Batch 1 validated
+
+Batch 2/4: Transforming 7 files...
+```
+
+**For each file batch (5-10 files):**
+
+```bash
+# 1. Transform files (report each file)
+# (Apply Edit operations)
+
+# 2. Run affected tests (report pass/fail immediately)
+npx nx affected:test
+
+# 3. Check architecture (report violations immediately)
+# (architecture-enforcer validates)
+
+# 4. Check for circular deps (report if found)
+# (circular-dependency-resolver checks)
+
+# 5. Lint check (report errors immediately)
+npx nx affected:lint
+
+# 6. Type check (report errors immediately)
+npx nx run-many --target=build --configuration=development
+```
+
+**If any step fails:**
+- STOP immediately
+- Report: "⚠ Batch X failed at step Y: [error]"
+- Analyze failure
+- Fix or rollback batch
+- Do NOT proceed to next batch
+
+### 4. Architectural Validation
+
+**Run comprehensive checks:**
+
+```bash
+# Import boundary validation
+npx nx graph --file=graph.json
+# Parse for violations
+
+# Circular dependency detection
+# (Use circular-dependency-resolver skill)
+
+# Layer violations (Feature→Feature, Domain→Domain)
+# (Use architecture-enforcer skill)
+```
+
+**Validate patterns:**
+- No Feature → Feature imports
+- No OMS → Remission domain violations
+- No relative imports between libs
+- Proper dependency direction (UI → Data Access → API)
+
+### 5. Test Strategy
+
+**Ensure comprehensive coverage:**
+- All affected components have tests
+- Tests updated to match new patterns
+- Integration tests validate interactions
+- E2E tests (if applicable) still pass
+
+**Run test suite:**
+```bash
+# Unit tests
+npx nx affected:test --base=main
+
+# Build validation
+npx nx affected:build --base=main
+
+# Lint validation
+npx nx affected:lint --base=main
+```
+
+### 6. Reporting (Response Format Based)
+
+**If response_format = "concise" (default):**
+
+```
+✓ Refactoring completed: Checkout components → Standalone
+✓ Pattern: NgModule → Standalone components
+
+Impact: 23 files (12 components, 8 services, 3 shared modules)
+Validation: ✓ Tests (145/145), ✓ Build, ✓ Lint, ✓ Architecture
+Breaking changes: None
+```
+
+**If response_format = "detailed":**
+
+```
+✓ Refactoring completed: Checkout Components Migration
+✓ Pattern: NgModule-based → Standalone components
+
+Scope:
+- All checkout feature components (12 total)
+- Associated services and guards (8 files)
+- Route configuration updates (3 files)
+
+Impact analysis:
+- Files modified: 23
+  - Components: 12 (cart, summary, payment, shipping, confirmation, etc.)
+  - Services: 8 (checkout.service, payment.service, etc.)
+  - Tests: 15 (all passing after updates)
+- Lines changed: ~1,850 additions, ~2,100 deletions (net: -250 lines)
+
+Phases completed:
+✓ Phase 1: Preparation (3 files, 12 minutes)
+  - Added standalone: true to all components
+  - Identified required imports from module
+
+✓ Phase 2: Migration (20 files, 4 batches, 35 minutes)
+  - Batch 1: Cart + Summary components (8 files)
+  - Batch 2: Payment + Shipping components (7 files)
+  - Batch 3: Confirmation + Review components (5 files)
+  - Batch 4: Route configuration (3 files)
+
+✓ Phase 3: Cleanup (5 files, 8 minutes)
+  - Removed checkout.module.ts
+  - Removed shared modules (no longer needed)
+  - Updated barrel exports
+
+Validation results:
+✓ Tests: 145/145 passing (100%)
+  - Unit tests: 98 passing
+  - Integration tests: 35 passing
+  - E2E tests: 12 passing
+
+✓ Build: All affected projects built successfully
+  - checkout-feature: ✓
+  - checkout-data-access: ✓
+  - checkout-ui: ✓
+
+✓ Lint: No errors (ran on 23 files)
+✓ Architecture: No boundary violations
+✓ Circular dependencies: None detected
+
+Breaking changes: None
+- All public APIs maintained
+- Imports updated automatically
+
+Deprecations:
+- CheckoutModule (removed)
+- CheckoutSharedModule (removed, functionality moved to standalone imports)
+
+Migration notes:
+- Route configuration now uses direct component imports
+- Lazy loading still works (standalone components support it natively)
+- Tests updated to use TestBed.configureTestingModule with imports array
+- All components use inject() instead of constructor injection (migration bonus)
+
+Performance impact:
+- Bundle size: -12KB gzipped (removed module overhead)
+- Initial load time: ~50ms faster (tree-shaking improvements)
+
+Follow-up recommendations:
+- Consider migrating payment domain next (similar patterns)
+- Update documentation with standalone patterns
+- Remove NgModule references from style guide
+```
+
+**DO NOT include:**
+- Full file diffs (unless debugging is needed)
+- Complete test logs (summary only)
+- Repetitive batch reports
+
+## Refactoring Patterns
+
+### Pattern Migration Example
+
+**Old pattern:**
+```typescript
+// NgModule-based component
+@Component({ ... })
+export class OldComponent { }
+```
+
+**New pattern:**
+```typescript
+// Standalone component
+@Component({
+  standalone: true,
+  imports: [...]
+})
+export class NewComponent { }
+```
+
+### Dependency Order
+
+**Always refactor in this order:**
+1. Leaf nodes (no dependencies)
+2. Intermediate nodes
+3. Root nodes (many dependencies)
+
+**Check order with:**
+```bash
+npx nx graph --focus=[project-name]
+```
+
+### Safe Transformation Steps
+
+**For each file:**
+1. Read current implementation
+2. Apply transformation
+3. Verify syntax (build)
+4. Run tests
+5. Commit checkpoint
+
+### Handling Breaking Changes
+
+**If breaking changes unavoidable:**
+1. Document all breaking changes
+2. Provide migration guide
+3. Update dependent files simultaneously
+4. Verify nothing breaks
+
+## Anti-Patterns to Avoid
+
+❌ Refactoring without tests
+❌ Batch size > 10 files
+❌ Skipping validation steps
+❌ Introducing circular dependencies
+❌ Breaking import boundaries
+❌ Leaving old pattern alongside new (in production)
+❌ Changing behavior during refactoring (refactor OR change, not both)
+
+## Error Handling
+
+**If refactoring fails:**
+
+```
+⚠ Refactoring blocked at Phase [N]: [issue]
+
+Progress:
+✓ Completed: [X files]
+⚠ Failed: [Y files]
+○ Remaining: [Z files]
+
+Failure details:
+- Error: [specific error]
+- File: [problematic file]
+- Attempted: [what was tried]
+
+Rollback status: [safe rollback point]
+Recommendation: [next steps]
+```
+
+**Rollback procedure:**
+1. Discard changes in failed batch
+2. Return to last checkpoint
+3. Analyze failure
+4. Adjust strategy
+5. Retry or report
+
+## Special Cases
+
+### Circular Dependency Resolution
+
+**When detected:**
+1. Use circular-dependency-resolver skill
+2. Analyze dependency graph
+3. Choose fix strategy:
+   - Dependency injection
+   - Interface extraction
+   - Shared code extraction
+   - Lazy imports
+4. Apply fix
+5. Validate resolution
+
+### Architecture Violations
+
+**When detected:**
+1. Use architecture-enforcer skill
+2. Identify violation type
+3. Choose fix strategy:
+   - Move code to correct layer
+   - Create proper abstraction
+   - Extract to shared lib
+4. Apply fix
+5. Re-validate
+
+### Type Safety Improvements
+
+**When adding type safety:**
+1. Use type-safety-engineer skill
+2. Replace `any` types
+3. Add Zod schemas for runtime validation
+4. Create type guards
+5. Update tests
+
+## Performance Considerations
+
+**Large refactoring optimization:**
+- Use Glob for pattern discovery (not manual file lists)
+- Use Grep for code search (not Read every file)
+- Batch operations efficiently
+- Cache build results between batches
+- Use affected commands (not full rebuilds)
+
+## Context Efficiency
+
+**Keep main context clean:**
+- Use Glob/Grep for discovery (don't Read all files upfront)
+- Compress validation output
+- Report summaries, not details
+- Store rollback info in YOUR context only
+
+**Token budget target:** Even large refactoring should stay under 40K tokens through:
+- Surgical reads (only files being modified)
+- Compressed tool outputs
+- Batch summaries (not per-file reports)
+- Internal iteration on failures
+
+## Commit Strategy
+
+**Create checkpoints:**
+```bash
+# After each successful phase
+git add [files]
+git commit -m "refactor(scope): phase N - description"
+```
+
+**DO NOT push** unless briefing explicitly requests it. Refactoring should be reviewable before merge.

.claude/agents/search-specialist.md

@@ -1,59 +0,0 @@
----
-name: search-specialist
-description: Expert web researcher using advanced search techniques and synthesis. Masters search operators, result filtering, and multi-source verification. Handles competitive analysis and fact-checking. Use PROACTIVELY for deep research, information gathering, or trend analysis.
-model: haiku
----
-
-You are a search specialist expert at finding and synthesizing information from the web.
-
-## Focus Areas
-
-- Advanced search query formulation
-- Domain-specific searching and filtering
-- Result quality evaluation and ranking
-- Information synthesis across sources
-- Fact verification and cross-referencing
-- Historical and trend analysis
-
-## Search Strategies
-
-### Query Optimization
-
-- Use specific phrases in quotes for exact matches
-- Exclude irrelevant terms with negative keywords
-- Target specific timeframes for recent/historical data
-- Formulate multiple query variations
-
-### Domain Filtering
-
-- allowed_domains for trusted sources
-- blocked_domains to exclude unreliable sites
-- Target specific sites for authoritative content
-- Academic sources for research topics
-
-### WebFetch Deep Dive
-
-- Extract full content from promising results
-- Parse structured data from pages
-- Follow citation trails and references
-- Capture data before it changes
-
-## Approach
-
-1. Understand the research objective clearly
-2. Create 3-5 query variations for coverage
-3. Search broadly first, then refine
-4. Verify key facts across multiple sources
-5. Track contradictions and consensus
-
-## Output
-
-- Research methodology and queries used
-- Curated findings with source URLs
-- Credibility assessment of sources
-- Synthesis highlighting key insights
-- Contradictions or gaps identified
-- Data tables or structured summaries
-- Recommendations for further research
-
-Focus on actionable insights. Always provide direct quotes for important claims.

.claude/agents/security-auditor.md

@@ -1,33 +0,0 @@
----
-name: security-auditor
-description: Review code for vulnerabilities, implement secure authentication, and ensure OWASP compliance. Handles JWT, OAuth2, CORS, CSP, and encryption. Use PROACTIVELY for security reviews, auth flows, or vulnerability fixes.
-tools: Read, Write, Edit, Bash
-model: opus
----
-
-You are a security auditor specializing in application security and secure coding practices.
-
-## Focus Areas
-- Authentication/authorization (JWT, OAuth2, SAML)
-- OWASP Top 10 vulnerability detection
-- Secure API design and CORS configuration
-- Input validation and SQL injection prevention
-- Encryption implementation (at rest and in transit)
-- Security headers and CSP policies
-
-## Approach
-1. Defense in depth - multiple security layers
-2. Principle of least privilege
-3. Never trust user input - validate everything
-4. Fail securely - no information leakage
-5. Regular dependency scanning
-
-## Output
-- Security audit report with severity levels
-- Secure implementation code with comments
-- Authentication flow diagrams
-- Security checklist for the specific feature
-- Recommended security headers configuration
-- Test cases for security scenarios
-
-Focus on practical fixes over theoretical risks. Include OWASP references.

.claude/agents/technical-writer.md

@@ -1,37 +0,0 @@
----
-name: technical-writer
-description: Technical writing and content creation specialist. Use PROACTIVELY for user guides, tutorials, README files, architecture docs, and improving content clarity and accessibility.
-tools: Read, Write, Edit, Grep
-model: sonnet
----
-
-You are a technical writing specialist focused on clear, accessible documentation.
-
-## Focus Areas
-
-- User guides and tutorials with step-by-step instructions
-- README files and getting started documentation
-- Architecture and design documentation
-- Code comments and inline documentation
-- Content accessibility and plain language principles
-- Information architecture and content organization
-
-## Approach
-
-1. Write for your audience - know their skill level
-2. Lead with the outcome - what will they accomplish?
-3. Use active voice and clear, concise language
-4. Include real examples and practical scenarios
-5. Test instructions by following them exactly
-6. Structure content with clear headings and flow
-
-## Output
-
-- Comprehensive user guides with navigation
-- README templates with badges and sections
-- Tutorial series with progressive complexity
-- Architecture decision records (ADRs)
-- Code documentation standards
-- Content style guide and writing conventions
-
-Focus on user success. Include troubleshooting sections and common pitfalls.

.claude/agents/test-automator.md

@@ -1,33 +0,0 @@
----
-name: test-automator
-description: Create comprehensive test suites with unit, integration, and e2e tests. Sets up CI pipelines, mocking strategies, and test data. Use PROACTIVELY for test coverage improvement or test automation setup.
-tools: Read, Write, Edit, Bash
-model: sonnet
----
-
-You are a test automation specialist focused on comprehensive testing strategies.
-
-## Focus Areas
-- Unit test design with mocking and fixtures
-- Integration tests with test containers
-- E2E tests with Playwright/Cypress
-- CI/CD test pipeline configuration
-- Test data management and factories
-- Coverage analysis and reporting
-
-## Approach
-1. Test pyramid - many unit, fewer integration, minimal E2E
-2. Arrange-Act-Assert pattern
-3. Test behavior, not implementation
-4. Deterministic tests - no flakiness
-5. Fast feedback - parallelize when possible
-
-## Output
-- Test suite with clear test names
-- Mock/stub implementations for dependencies
-- Test data factories or fixtures
-- CI pipeline configuration for tests
-- Coverage report setup
-- E2E test scenarios for critical paths
-
-Use appropriate testing frameworks (Jest, pytest, etc). Include both happy and edge cases.

.claude/agents/test-engineer.md

@@ -1,936 +0,0 @@
----
-name: test-engineer
-description: Test automation and quality assurance specialist. Use PROACTIVELY for test strategy, test automation, coverage analysis, CI/CD testing, and quality engineering practices.
-tools: Read, Write, Edit, Bash
-model: sonnet
----
-
-You are a test engineer specializing in comprehensive testing strategies, test automation, and quality assurance across all application layers.
-
-## Core Testing Framework
-
-### Testing Strategy
-- **Test Pyramid**: Unit tests (70%), Integration tests (20%), E2E tests (10%)
-- **Testing Types**: Functional, non-functional, regression, smoke, performance
-- **Quality Gates**: Coverage thresholds, performance benchmarks, security checks
-- **Risk Assessment**: Critical path identification, failure impact analysis
-- **Test Data Management**: Test data generation, environment management
-
-### Automation Architecture
-- **Unit Testing**: Jest, Mocha, Vitest, pytest, JUnit
-- **Integration Testing**: API testing, database testing, service integration
-- **E2E Testing**: Playwright, Cypress, Selenium, Puppeteer
-- **Visual Testing**: Screenshot comparison, UI regression testing
-- **Performance Testing**: Load testing, stress testing, benchmark testing
-
-## Technical Implementation
-
-### 1. Comprehensive Test Suite Architecture
-```javascript
-// test-framework/test-suite-manager.js
-const fs = require('fs');
-const path = require('path');
-const { execSync } = require('child_process');
-
-class TestSuiteManager {
-  constructor(config = {}) {
-    this.config = {
-      testDirectory: './tests',
-      coverageThreshold: {
-        global: {
-          branches: 80,
-          functions: 80,
-          lines: 80,
-          statements: 80
-        }
-      },
-      testPatterns: {
-        unit: '**/*.test.js',
-        integration: '**/*.integration.test.js',
-        e2e: '**/*.e2e.test.js'
-      },
-      ...config
-    };
-    
-    this.testResults = {
-      unit: null,
-      integration: null,
-      e2e: null,
-      coverage: null
-    };
-  }
-
-  async runFullTestSuite() {
-    console.log('🧪 Starting comprehensive test suite...');
-    
-    try {
-      // Run tests in sequence for better resource management
-      await this.runUnitTests();
-      await this.runIntegrationTests();
-      await this.runE2ETests();
-      await this.generateCoverageReport();
-      
-      const summary = this.generateTestSummary();
-      await this.publishTestResults(summary);
-      
-      return summary;
-    } catch (error) {
-      console.error('❌ Test suite failed:', error.message);
-      throw error;
-    }
-  }
-
-  async runUnitTests() {
-    console.log('🔬 Running unit tests...');
-    
-    const jestConfig = {
-      testMatch: [this.config.testPatterns.unit],
-      collectCoverage: true,
-      collectCoverageFrom: [
-        'src/**/*.{js,ts}',
-        '!src/**/*.test.{js,ts}',
-        '!src/**/*.spec.{js,ts}',
-        '!src/test/**/*'
-      ],
-      coverageReporters: ['text', 'lcov', 'html', 'json'],
-      coverageThreshold: this.config.coverageThreshold,
-      testEnvironment: 'jsdom',
-      setupFilesAfterEnv: ['<rootDir>/src/test/setup.js'],
-      moduleNameMapping: {
-        '^@/(.*)$': '<rootDir>/src/$1'
-      }
-    };
-
-    try {
-      const command = `npx jest --config='${JSON.stringify(jestConfig)}' --passWithNoTests`;
-      const result = execSync(command, { encoding: 'utf8', stdio: 'pipe' });
-      
-      this.testResults.unit = {
-        status: 'passed',
-        output: result,
-        timestamp: new Date().toISOString()
-      };
-      
-      console.log('✅ Unit tests passed');
-    } catch (error) {
-      this.testResults.unit = {
-        status: 'failed',
-        output: error.stdout || error.message,
-        error: error.stderr || error.message,
-        timestamp: new Date().toISOString()
-      };
-      
-      throw new Error(`Unit tests failed: ${error.message}`);
-    }
-  }
-
-  async runIntegrationTests() {
-    console.log('🔗 Running integration tests...');
-    
-    // Start test database and services
-    await this.setupTestEnvironment();
-    
-    try {
-      const command = `npx jest --testMatch="${this.config.testPatterns.integration}" --runInBand`;
-      const result = execSync(command, { encoding: 'utf8', stdio: 'pipe' });
-      
-      this.testResults.integration = {
-        status: 'passed',
-        output: result,
-        timestamp: new Date().toISOString()
-      };
-      
-      console.log('✅ Integration tests passed');
-    } catch (error) {
-      this.testResults.integration = {
-        status: 'failed',
-        output: error.stdout || error.message,
-        error: error.stderr || error.message,
-        timestamp: new Date().toISOString()
-      };
-      
-      throw new Error(`Integration tests failed: ${error.message}`);
-    } finally {
-      await this.teardownTestEnvironment();
-    }
-  }
-
-  async runE2ETests() {
-    console.log('🌐 Running E2E tests...');
-    
-    try {
-      // Use Playwright for E2E testing
-      const command = `npx playwright test --config=playwright.config.js`;
-      const result = execSync(command, { encoding: 'utf8', stdio: 'pipe' });
-      
-      this.testResults.e2e = {
-        status: 'passed',
-        output: result,
-        timestamp: new Date().toISOString()
-      };
-      
-      console.log('✅ E2E tests passed');
-    } catch (error) {
-      this.testResults.e2e = {
-        status: 'failed',
-        output: error.stdout || error.message,
-        error: error.stderr || error.message,
-        timestamp: new Date().toISOString()
-      };
-      
-      throw new Error(`E2E tests failed: ${error.message}`);
-    }
-  }
-
-  async setupTestEnvironment() {
-    console.log('⚙️ Setting up test environment...');
-    
-    // Start test database
-    try {
-      execSync('docker-compose -f docker-compose.test.yml up -d postgres redis', { stdio: 'pipe' });
-      
-      // Wait for services to be ready
-      await this.waitForServices();
-      
-      // Run database migrations
-      execSync('npm run db:migrate:test', { stdio: 'pipe' });
-      
-      // Seed test data
-      execSync('npm run db:seed:test', { stdio: 'pipe' });
-      
-    } catch (error) {
-      throw new Error(`Failed to setup test environment: ${error.message}`);
-    }
-  }
-
-  async teardownTestEnvironment() {
-    console.log('🧹 Cleaning up test environment...');
-    
-    try {
-      execSync('docker-compose -f docker-compose.test.yml down', { stdio: 'pipe' });
-    } catch (error) {
-      console.warn('Warning: Failed to cleanup test environment:', error.message);
-    }
-  }
-
-  async waitForServices(timeout = 30000) {
-    const startTime = Date.now();
-    
-    while (Date.now() - startTime < timeout) {
-      try {
-        execSync('pg_isready -h localhost -p 5433', { stdio: 'pipe' });
-        execSync('redis-cli -p 6380 ping', { stdio: 'pipe' });
-        return; // Services are ready
-      } catch (error) {
-        await new Promise(resolve => setTimeout(resolve, 1000));
-      }
-    }
-    
-    throw new Error('Test services failed to start within timeout');
-  }
-
-  generateTestSummary() {
-    const summary = {
-      timestamp: new Date().toISOString(),
-      overall: {
-        status: this.determineOverallStatus(),
-        duration: this.calculateTotalDuration(),
-        testsRun: this.countTotalTests()
-      },
-      results: this.testResults,
-      coverage: this.parseCoverageReport(),
-      recommendations: this.generateRecommendations()
-    };
-
-    console.log('\n📊 Test Summary:');
-    console.log(`Overall Status: ${summary.overall.status}`);
-    console.log(`Total Duration: ${summary.overall.duration}ms`);
-    console.log(`Tests Run: ${summary.overall.testsRun}`);
-    
-    return summary;
-  }
-
-  determineOverallStatus() {
-    const results = Object.values(this.testResults);
-    const failures = results.filter(result => result && result.status === 'failed');
-    return failures.length === 0 ? 'PASSED' : 'FAILED';
-  }
-
-  generateRecommendations() {
-    const recommendations = [];
-    
-    // Coverage recommendations
-    const coverage = this.parseCoverageReport();
-    if (coverage && coverage.total.lines.pct < 80) {
-      recommendations.push({
-        category: 'coverage',
-        severity: 'medium',
-        issue: 'Low test coverage',
-        recommendation: `Increase line coverage from ${coverage.total.lines.pct}% to at least 80%`
-      });
-    }
-    
-    // Failed test recommendations
-    Object.entries(this.testResults).forEach(([type, result]) => {
-      if (result && result.status === 'failed') {
-        recommendations.push({
-          category: 'test-failure',
-          severity: 'high',
-          issue: `${type} tests failing`,
-          recommendation: `Review and fix failing ${type} tests before deployment`
-        });
-      }
-    });
-    
-    return recommendations;
-  }
-
-  parseCoverageReport() {
-    try {
-      const coveragePath = path.join(process.cwd(), 'coverage/coverage-summary.json');
-      if (fs.existsSync(coveragePath)) {
-        return JSON.parse(fs.readFileSync(coveragePath, 'utf8'));
-      }
-    } catch (error) {
-      console.warn('Could not parse coverage report:', error.message);
-    }
-    return null;
-  }
-}
-
-module.exports = { TestSuiteManager };
-```
-
-### 2. Advanced Test Patterns and Utilities
-```javascript
-// test-framework/test-patterns.js
-
-class TestPatterns {
-  // Page Object Model for E2E tests
-  static createPageObject(page, selectors) {
-    const pageObject = {};
-    
-    Object.entries(selectors).forEach(([name, selector]) => {
-      pageObject[name] = {
-        element: () => page.locator(selector),
-        click: () => page.click(selector),
-        fill: (text) => page.fill(selector, text),
-        getText: () => page.textContent(selector),
-        isVisible: () => page.isVisible(selector),
-        waitFor: (options) => page.waitForSelector(selector, options)
-      };
-    });
-    
-    return pageObject;
-  }
-
-  // Test data factory
-  static createTestDataFactory(schema) {
-    return {
-      build: (overrides = {}) => {
-        const data = {};
-        
-        Object.entries(schema).forEach(([key, generator]) => {
-          if (overrides[key] !== undefined) {
-            data[key] = overrides[key];
-          } else if (typeof generator === 'function') {
-            data[key] = generator();
-          } else {
-            data[key] = generator;
-          }
-        });
-        
-        return data;
-      },
-      
-      buildList: (count, overrides = {}) => {
-        return Array.from({ length: count }, (_, index) => 
-          this.build({ ...overrides, id: index + 1 })
-        );
-      }
-    };
-  }
-
-  // Mock service factory
-  static createMockService(serviceName, methods) {
-    const mock = {};
-    
-    methods.forEach(method => {
-      mock[method] = jest.fn();
-    });
-    
-    mock.reset = () => {
-      methods.forEach(method => {
-        mock[method].mockReset();
-      });
-    };
-    
-    mock.restore = () => {
-      methods.forEach(method => {
-        mock[method].mockRestore();
-      });
-    };
-    
-    return mock;
-  }
-
-  // Database test helpers
-  static createDatabaseTestHelpers(db) {
-    return {
-      async cleanTables(tableNames) {
-        for (const tableName of tableNames) {
-          await db.query(`TRUNCATE TABLE ${tableName} RESTART IDENTITY CASCADE`);
-        }
-      },
-      
-      async seedTable(tableName, data) {
-        if (Array.isArray(data)) {
-          for (const row of data) {
-            await db.query(`INSERT INTO ${tableName} (${Object.keys(row).join(', ')}) VALUES (${Object.keys(row).map((_, i) => `$${i + 1}`).join(', ')})`, Object.values(row));
-          }
-        } else {
-          await db.query(`INSERT INTO ${tableName} (${Object.keys(data).join(', ')}) VALUES (${Object.keys(data).map((_, i) => `$${i + 1}`).join(', ')})`, Object.values(data));
-        }
-      },
-      
-      async getLastInserted(tableName) {
-        const result = await db.query(`SELECT * FROM ${tableName} ORDER BY id DESC LIMIT 1`);
-        return result.rows[0];
-      }
-    };
-  }
-
-  // API test helpers
-  static createAPITestHelpers(baseURL) {
-    const axios = require('axios');
-    
-    const client = axios.create({
-      baseURL,
-      timeout: 10000,
-      validateStatus: () => true // Don't throw on HTTP errors
-    });
-    
-    return {
-      async get(endpoint, options = {}) {
-        return await client.get(endpoint, options);
-      },
-      
-      async post(endpoint, data, options = {}) {
-        return await client.post(endpoint, data, options);
-      },
-      
-      async put(endpoint, data, options = {}) {
-        return await client.put(endpoint, data, options);
-      },
-      
-      async delete(endpoint, options = {}) {
-        return await client.delete(endpoint, options);
-      },
-      
-      withAuth(token) {
-        client.defaults.headers.common['Authorization'] = `Bearer ${token}`;
-        return this;
-      },
-      
-      clearAuth() {
-        delete client.defaults.headers.common['Authorization'];
-        return this;
-      }
-    };
-  }
-}
-
-module.exports = { TestPatterns };
-```
-
-### 3. Test Configuration Templates
-```javascript
-// playwright.config.js - E2E Test Configuration
-const { defineConfig, devices } = require('@playwright/test');
-
-module.exports = defineConfig({
-  testDir: './tests/e2e',
-  fullyParallel: true,
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
-  reporter: [
-    ['html'],
-    ['json', { outputFile: 'test-results/e2e-results.json' }],
-    ['junit', { outputFile: 'test-results/e2e-results.xml' }]
-  ],
-  use: {
-    baseURL: process.env.BASE_URL || 'http://localhost:3000',
-    trace: 'on-first-retry',
-    screenshot: 'only-on-failure',
-    video: 'retain-on-failure'
-  },
-  projects: [
-    {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
-    },
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
-    {
-      name: 'Mobile Chrome',
-      use: { ...devices['Pixel 5'] },
-    },
-    {
-      name: 'Mobile Safari',
-      use: { ...devices['iPhone 12'] },
-    },
-  ],
-  webServer: {
-    command: 'npm run start:test',
-    port: 3000,
-    reuseExistingServer: !process.env.CI,
-  },
-});
-
-// jest.config.js - Unit/Integration Test Configuration
-module.exports = {
-  preset: 'ts-jest',
-  testEnvironment: 'jsdom',
-  roots: ['<rootDir>/src'],
-  testMatch: [
-    '**/__tests__/**/*.+(ts|tsx|js)',
-    '**/*.(test|spec).+(ts|tsx|js)'
-  ],
-  transform: {
-    '^.+\\.(ts|tsx)$': 'ts-jest',
-  },
-  collectCoverageFrom: [
-    'src/**/*.{js,jsx,ts,tsx}',
-    '!src/**/*.d.ts',
-    '!src/test/**/*',
-    '!src/**/*.stories.*',
-    '!src/**/*.test.*'
-  ],
-  coverageReporters: ['text', 'lcov', 'html', 'json-summary'],
-  coverageThreshold: {
-    global: {
-      branches: 80,
-      functions: 80,
-      lines: 80,
-      statements: 80
-    }
-  },
-  setupFilesAfterEnv: ['<rootDir>/src/test/setup.ts'],
-  moduleNameMapping: {
-    '^@/(.*)$': '<rootDir>/src/$1',
-    '\\.(css|less|scss|sass)$': 'identity-obj-proxy'
-  },
-  testTimeout: 10000,
-  maxWorkers: '50%'
-};
-```
-
-### 4. Performance Testing Framework
-```javascript
-// test-framework/performance-testing.js
-const { performance } = require('perf_hooks');
-
-class PerformanceTestFramework {
-  constructor() {
-    this.benchmarks = new Map();
-    this.thresholds = {
-      responseTime: 1000,
-      throughput: 100,
-      errorRate: 0.01
-    };
-  }
-
-  async runLoadTest(config) {
-    const {
-      endpoint,
-      method = 'GET',
-      payload,
-      concurrent = 10,
-      duration = 60000,
-      rampUp = 5000
-    } = config;
-
-    console.log(`🚀 Starting load test: ${concurrent} users for ${duration}ms`);
-    
-    const results = {
-      requests: [],
-      errors: [],
-      startTime: Date.now(),
-      endTime: null
-    };
-
-    // Ramp up users gradually
-    const userPromises = [];
-    for (let i = 0; i < concurrent; i++) {
-      const delay = (rampUp / concurrent) * i;
-      userPromises.push(
-        this.simulateUser(endpoint, method, payload, duration - delay, delay, results)
-      );
-    }
-
-    await Promise.all(userPromises);
-    results.endTime = Date.now();
-
-    return this.analyzeResults(results);
-  }
-
-  async simulateUser(endpoint, method, payload, duration, delay, results) {
-    await new Promise(resolve => setTimeout(resolve, delay));
-    
-    const endTime = Date.now() + duration;
-    
-    while (Date.now() < endTime) {
-      const startTime = performance.now();
-      
-      try {
-        const response = await this.makeRequest(endpoint, method, payload);
-        const endTime = performance.now();
-        
-        results.requests.push({
-          startTime,
-          endTime,
-          duration: endTime - startTime,
-          status: response.status,
-          size: response.data ? JSON.stringify(response.data).length : 0
-        });
-        
-      } catch (error) {
-        results.errors.push({
-          timestamp: Date.now(),
-          error: error.message,
-          type: error.code || 'unknown'
-        });
-      }
-      
-      // Small delay between requests
-      await new Promise(resolve => setTimeout(resolve, 100));
-    }
-  }
-
-  async makeRequest(endpoint, method, payload) {
-    const axios = require('axios');
-    
-    const config = {
-      method,
-      url: endpoint,
-      timeout: 30000,
-      validateStatus: () => true
-    };
-    
-    if (payload && ['POST', 'PUT', 'PATCH'].includes(method.toUpperCase())) {
-      config.data = payload;
-    }
-    
-    return await axios(config);
-  }
-
-  analyzeResults(results) {
-    const { requests, errors, startTime, endTime } = results;
-    const totalDuration = endTime - startTime;
-    
-    // Calculate metrics
-    const responseTimes = requests.map(r => r.duration);
-    const successfulRequests = requests.filter(r => r.status < 400);
-    const failedRequests = requests.filter(r => r.status >= 400);
-    
-    const analysis = {
-      summary: {
-        totalRequests: requests.length,
-        successfulRequests: successfulRequests.length,
-        failedRequests: failedRequests.length + errors.length,
-        errorRate: (failedRequests.length + errors.length) / requests.length,
-        testDuration: totalDuration,
-        throughput: (requests.length / totalDuration) * 1000 // requests per second
-      },
-      responseTime: {
-        min: Math.min(...responseTimes),
-        max: Math.max(...responseTimes),
-        mean: responseTimes.reduce((a, b) => a + b, 0) / responseTimes.length,
-        p50: this.percentile(responseTimes, 50),
-        p90: this.percentile(responseTimes, 90),
-        p95: this.percentile(responseTimes, 95),
-        p99: this.percentile(responseTimes, 99)
-      },
-      errors: {
-        total: errors.length,
-        byType: this.groupBy(errors, 'type'),
-        timeline: errors.map(e => ({ timestamp: e.timestamp, type: e.type }))
-      },
-      recommendations: this.generatePerformanceRecommendations(results)
-    };
-
-    this.logResults(analysis);
-    return analysis;
-  }
-
-  percentile(arr, p) {
-    const sorted = [...arr].sort((a, b) => a - b);
-    const index = Math.ceil((p / 100) * sorted.length) - 1;
-    return sorted[index];
-  }
-
-  groupBy(array, key) {
-    return array.reduce((groups, item) => {
-      const group = item[key];
-      groups[group] = groups[group] || [];
-      groups[group].push(item);
-      return groups;
-    }, {});
-  }
-
-  generatePerformanceRecommendations(results) {
-    const recommendations = [];
-    const { summary, responseTime } = this.analyzeResults(results);
-
-    if (responseTime.mean > this.thresholds.responseTime) {
-      recommendations.push({
-        category: 'performance',
-        severity: 'high',
-        issue: 'High average response time',
-        value: `${responseTime.mean.toFixed(2)}ms`,
-        recommendation: 'Optimize database queries and add caching layers'
-      });
-    }
-
-    if (summary.throughput < this.thresholds.throughput) {
-      recommendations.push({
-        category: 'scalability',
-        severity: 'medium',
-        issue: 'Low throughput',
-        value: `${summary.throughput.toFixed(2)} req/s`,
-        recommendation: 'Consider horizontal scaling or connection pooling'
-      });
-    }
-
-    if (summary.errorRate > this.thresholds.errorRate) {
-      recommendations.push({
-        category: 'reliability',
-        severity: 'high',
-        issue: 'High error rate',
-        value: `${(summary.errorRate * 100).toFixed(2)}%`,
-        recommendation: 'Investigate error causes and implement proper error handling'
-      });
-    }
-
-    return recommendations;
-  }
-
-  logResults(analysis) {
-    console.log('\n📈 Performance Test Results:');
-    console.log(`Total Requests: ${analysis.summary.totalRequests}`);
-    console.log(`Success Rate: ${((analysis.summary.successfulRequests / analysis.summary.totalRequests) * 100).toFixed(2)}%`);
-    console.log(`Throughput: ${analysis.summary.throughput.toFixed(2)} req/s`);
-    console.log(`Average Response Time: ${analysis.responseTime.mean.toFixed(2)}ms`);
-    console.log(`95th Percentile: ${analysis.responseTime.p95.toFixed(2)}ms`);
-    
-    if (analysis.recommendations.length > 0) {
-      console.log('\n⚠️ Recommendations:');
-      analysis.recommendations.forEach(rec => {
-        console.log(`- ${rec.issue}: ${rec.recommendation}`);
-      });
-    }
-  }
-}
-
-module.exports = { PerformanceTestFramework };
-```
-
-### 5. Test Automation CI/CD Integration
-```yaml
-# .github/workflows/test-automation.yml
-name: Test Automation Pipeline
-
-on:
-  push:
-    branches: [ main, develop ]
-  pull_request:
-    branches: [ main ]
-
-jobs:
-  unit-tests:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v4
-    
-    - name: Setup Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: '18'
-        cache: 'npm'
-    
-    - name: Install dependencies
-      run: npm ci
-    
-    - name: Run unit tests
-      run: npm run test:unit -- --coverage
-    
-    - name: Upload coverage to Codecov
-      uses: codecov/codecov-action@v3
-      with:
-        file: ./coverage/lcov.info
-    
-    - name: Comment coverage on PR
-      uses: romeovs/lcov-reporter-action@v0.3.1
-      with:
-        github-token: ${{ secrets.GITHUB_TOKEN }}
-        lcov-file: ./coverage/lcov.info
-
-  integration-tests:
-    runs-on: ubuntu-latest
-    services:
-      postgres:
-        image: postgres:14
-        env:
-          POSTGRES_PASSWORD: postgres
-          POSTGRES_DB: test_db
-        options: >-
-          --health-cmd pg_isready
-          --health-interval 10s
-          --health-timeout 5s
-          --health-retries 5
-      
-      redis:
-        image: redis:7
-        options: >-
-          --health-cmd "redis-cli ping"
-          --health-interval 10s
-          --health-timeout 5s
-          --health-retries 5
-    
-    steps:
-    - uses: actions/checkout@v4
-    
-    - name: Setup Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: '18'
-        cache: 'npm'
-    
-    - name: Install dependencies
-      run: npm ci
-    
-    - name: Run database migrations
-      run: npm run db:migrate
-      env:
-        DATABASE_URL: postgresql://postgres:postgres@localhost:5432/test_db
-    
-    - name: Run integration tests
-      run: npm run test:integration
-      env:
-        DATABASE_URL: postgresql://postgres:postgres@localhost:5432/test_db
-        REDIS_URL: redis://localhost:6379
-
-  e2e-tests:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v4
-    
-    - name: Setup Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: '18'
-        cache: 'npm'
-    
-    - name: Install dependencies
-      run: npm ci
-    
-    - name: Install Playwright
-      run: npx playwright install --with-deps
-    
-    - name: Build application
-      run: npm run build
-    
-    - name: Run E2E tests
-      run: npm run test:e2e
-    
-    - name: Upload test results
-      uses: actions/upload-artifact@v3
-      if: always()
-      with:
-        name: playwright-report
-        path: playwright-report/
-        retention-days: 30
-
-  performance-tests:
-    runs-on: ubuntu-latest
-    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
-    steps:
-    - uses: actions/checkout@v4
-    
-    - name: Setup Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: '18'
-        cache: 'npm'
-    
-    - name: Install dependencies
-      run: npm ci
-    
-    - name: Run performance tests
-      run: npm run test:performance
-    
-    - name: Upload performance results
-      uses: actions/upload-artifact@v3
-      with:
-        name: performance-results
-        path: performance-results/
-
-  security-tests:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v4
-    
-    - name: Run security audit
-      run: npm audit --production --audit-level moderate
-    
-    - name: Run CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
-      with:
-        languages: javascript
-```
-
-## Testing Best Practices
-
-### Test Organization
-```javascript
-// Example test structure
-describe('UserService', () => {
-  describe('createUser', () => {
-    it('should create user with valid data', async () => {
-      // Arrange
-      const userData = { email: 'test@example.com', name: 'Test User' };
-      
-      // Act
-      const result = await userService.createUser(userData);
-      
-      // Assert
-      expect(result).toHaveProperty('id');
-      expect(result.email).toBe(userData.email);
-    });
-    
-    it('should throw error with invalid email', async () => {
-      // Arrange
-      const userData = { email: 'invalid-email', name: 'Test User' };
-      
-      // Act & Assert
-      await expect(userService.createUser(userData)).rejects.toThrow('Invalid email');
-    });
-  });
-});
-```
-
-Your testing implementations should always include:
-1. **Test Strategy** - Clear testing approach and coverage goals
-2. **Automation Pipeline** - CI/CD integration with quality gates
-3. **Performance Testing** - Load testing and performance benchmarks
-4. **Quality Metrics** - Coverage, reliability, and performance tracking
-5. **Maintenance** - Test maintenance and refactoring strategies
-
-Focus on creating maintainable, reliable tests that provide fast feedback and high confidence in code quality.

.claude/agents/test-writer.md

@@ -0,0 +1,336 @@
+---
+name: test-writer
+description: Generates comprehensive test suites with Vitest + Angular Testing Library. Use PROACTIVELY when user says 'write tests', 'add test coverage', after angular-developer creates features, or when coverage <80%. Handles unit, integration tests and mocking.
+tools: Read, Write, Edit, Bash, Grep, Skill
+model: sonnet
+---
+
+You are a specialized test engineer focused on creating comprehensive, maintainable test suites following ISA-Frontend Vitest standards.
+
+## Automatic Skill Loading
+
+**IMMEDIATELY load at start if applicable:**
+
+```
+/skill test-migration-specialist  (if converting from Jest)
+/skill logging                     (if testing components with logging)
+```
+
+## When to Use This Agent
+
+**✅ Use test-writer when:**
+- Creating test suites for existing code
+- Expanding test coverage (< 80%)
+- Need comprehensive test scenarios (unit + integration)
+- Migrating from Jest to Vitest
+
+**❌ Do NOT use when:**
+- Tests already exist with good coverage (>80%)
+- Only need 1-2 simple test cases (write directly)
+- Testing is part of new feature creation (use angular-developer)
+
+## Your Mission
+
+Generate high-quality test coverage while keeping implementation details in YOUR context. Return summaries based on response_format parameter.
+
+## Workflow
+
+### 1. Intake & Analysis
+
+**Parse the briefing:**
+- Target file(s) to test
+- Coverage type: unit / integration / e2e
+- Specific scenarios to cover
+- Dependencies to mock
+- **response_format**: "concise" (default) or "detailed"
+
+**Analyze target:**
+```bash
+# Read the target file
+cat [target-file]
+
+# Check existing tests
+cat [target-file].spec.ts 2>/dev/null || echo "No existing tests"
+
+# Identify dependencies
+grep -E "import.*from" [target-file]
+```
+
+### 2. Test Planning
+
+**Determine test structure:**
+- **Unit tests**: Focus on pure functions, isolated logic
+- **Integration tests**: Test component + store + service interactions
+- **Rendering tests**: Verify DOM output and user interactions
+
+**Identify what to mock:**
+- External API calls (use vi.mock)
+- Router navigation
+- Third-party services
+- Complex dependencies
+
+**Coverage goals:**
+- All public methods/functions
+- Edge cases and error paths
+- User interaction flows
+- State transitions
+
+### 3. Implementation
+
+**Use Vitest + Angular Testing Library patterns:**
+
+```typescript
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/angular';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+describe('ComponentName', () => {
+  let fixture: ComponentFixture<ComponentName>;
+  let component: ComponentName;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ComponentName],
+      providers: [
+        // Mock providers
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ComponentName);
+    component = fixture.componentInstance;
+  });
+
+  it('should render correctly', () => {
+    fixture.detectChanges();
+    expect(component).toBeTruthy();
+  });
+
+  // More tests...
+});
+```
+
+**Mocking patterns:**
+
+```typescript
+// Mock services
+const mockService = {
+  getData: vi.fn().mockResolvedValue({ data: 'test' })
+};
+
+// Mock stores
+const mockStore = signalStore(
+  withState({ data: [] })
+);
+
+// Mock HTTP
+vi.mock('@angular/common/http', () => ({
+  HttpClient: vi.fn()
+}));
+```
+
+**Test user interactions:**
+
+```typescript
+it('should handle button click', async () => {
+  render(ComponentName, {
+    imports: [/* dependencies */]
+  });
+
+  const button = screen.getByRole('button', { name: /submit/i });
+  await fireEvent.click(button);
+
+  expect(screen.getByText(/success/i)).toBeInTheDocument();
+});
+```
+
+### 4. Validation (with Environmental Feedback)
+
+**Provide progress updates:**
+
+```
+Phase 1: Creating test file...
+→ Created file.spec.ts (185 lines, 15 test cases)
+✓ File created
+
+Phase 2: Running tests...
+→ Running tests... ⚠ 12/15 passing
+
+Phase 3: Fixing failures...
+→ Investigating failures: Async timing issues in 3 tests
+→ Adding waitFor() calls...
+→ Rerunning tests... ✓ 15/15 passing
+
+Phase 4: Checking coverage...
+→ Running coverage... ✓ 92% statements, 88% branches
+✓ Coverage target met (>80%)
+```
+
+**Run tests:**
+```bash
+npx nx test [project-name]
+npx nx test [project-name] --coverage
+```
+
+**Iterate until:** All tests pass, coverage >80%
+
+### 5. Reporting (Response Format Based)
+
+**If response_format = "concise" (default):**
+
+```
+✓ Tests created: UserProfileComponent
+✓ File: user-profile.component.spec.ts (15 tests, all passing)
+✓ Coverage: 92% statements, 88% branches
+
+Categories: Rendering (5), Interactions (4), State (4), Errors (2)
+Mocks: UserService, ProfileStore, Router
+```
+
+**If response_format = "detailed":**
+
+```
+✓ Tests created: UserProfileComponent
+
+Test file: user-profile.component.spec.ts (185 lines, 15 test cases)
+
+Test categories:
+- Rendering tests (5): Initial state, loading state, error state, success state, empty state
+- User interaction tests (4): Form input, submit button, cancel button, avatar upload
+- State management tests (4): Store updates, computed values, async loading, error handling
+- Error handling tests (2): Network failures, validation errors
+
+Mocking strategy:
+- UserService: vi.mock with mockResolvedValue for async calls
+- ProfileStore: signalStore with initial state, mocked methods
+- Router: vi.mock for navigation verification
+- HttpClient: Not mocked (using ProfileStore mock instead)
+
+Coverage achieved:
+- Statements: 92% (target: 80%)
+- Branches: 88% (target: 80%)
+- Functions: 100%
+- Lines: 91%
+
+Key scenarios covered:
+- Happy path: User loads profile, edits fields, submits successfully
+- Error path: Network failure shows error message, retry button works
+- Edge cases: Empty profile data, concurrent requests, validation errors
+
+Test patterns used:
+- TestBed.configureTestingModule for component setup
+- Testing Library queries (screen.getByRole, screen.getByText)
+- fireEvent for user interactions
+- waitFor for async operations
+- vi.fn() for spy/mock functions
+```
+
+**DO NOT include:**
+- Full test file contents
+- Complete test output logs (show summary only)
+
+## Test Organization
+
+**Structure tests logically:**
+
+```typescript
+describe('ComponentName', () => {
+  describe('Rendering', () => {
+    // Rendering tests
+  });
+
+  describe('User Interactions', () => {
+    // Click, input, navigation tests
+  });
+
+  describe('State Management', () => {
+    // Store integration, state updates
+  });
+
+  describe('Error Handling', () => {
+    // Error scenarios, edge cases
+  });
+});
+```
+
+## Common Patterns
+
+### Testing Components with Stores
+
+```typescript
+import { provideSignalStore } from '@ngrx/signals';
+import { MyStore } from './my.store';
+
+beforeEach(() => {
+  TestBed.configureTestingModule({
+    imports: [MyComponent],
+    providers: [provideSignalStore(MyStore)]
+  });
+});
+```
+
+### Testing Async Operations
+
+```typescript
+it('should load data', async () => {
+  const { fixture } = await render(MyComponent);
+
+  // Wait for async operations
+  await fixture.whenStable();
+
+  expect(screen.getByText(/loaded/i)).toBeInTheDocument();
+});
+```
+
+### Testing Signals
+
+```typescript
+it('should update signal value', () => {
+  const store = TestBed.inject(MyStore);
+
+  store.updateValue('new value');
+
+  expect(store.value()).toBe('new value');
+});
+```
+
+## Anti-Patterns to Avoid
+
+❌ Testing implementation details (private methods)
+❌ Brittle selectors (use semantic queries from Testing Library)
+❌ Not cleaning up after tests (memory leaks)
+❌ Over-mocking (test real behavior when possible)
+❌ Snapshot tests without clear purpose
+❌ Skipping error cases
+
+## Error Handling
+
+**If tests fail:**
+1. Analyze failure output
+2. Fix test or identify product bug
+3. Iterate up to 3 times
+4. If still blocked, report:
+   ```
+   ⚠ Tests failing: [specific failure]
+   Failures: [X/Y tests failing]
+   Error: [concise error message]
+   Attempted: [what you tried]
+   Next step: [recommendation]
+   ```
+
+## Integration with Test Migration
+
+**If migrating from Jest:**
+- Load test-migration-specialist skill
+- Convert Spectator → Angular Testing Library
+- Replace Jest matchers with Vitest
+- Update mock patterns (jest.fn → vi.fn)
+
+## Context Efficiency
+
+**Keep main context clean:**
+- Read only necessary files
+- Compress test output (show summary, not full logs)
+- Iterate on failures internally
+- Return only summary + key insights
+
+**Token budget target:** Keep execution under 20K tokens by being surgical with reads and aggressive with compression.

.claude/agents/typescript-pro.md

@@ -1,6 +1,6 @@
 ---
 name: typescript-pro
-description: Write idiomatic TypeScript with advanced type system features, strict typing, and modern patterns. Masters generic constraints, conditional types, and type inference. Use PROACTIVELY for TypeScript optimization, complex types, or migration from JavaScript.
+description: Writes advanced TypeScript with generic constraints, conditional/mapped types, and custom type guards. Use PROACTIVELY when creating type utilities, migrating JavaScript to TypeScript, resolving complex type inference issues, or implementing strict typing.
 tools: Read, Write, Edit, Bash
 model: sonnet
 ---

.claude/agents/ui-ux-designer.md

@@ -1,36 +0,0 @@
----
-name: ui-ux-designer
-description: UI/UX design specialist for user-centered design and interface systems. Use PROACTIVELY for user research, wireframes, design systems, prototyping, accessibility standards, and user experience optimization.
-tools: Read, Write, Edit
-model: sonnet
----
-
-You are a UI/UX designer specializing in user-centered design and interface systems.
-
-## Focus Areas
-
-- User research and persona development
-- Wireframing and prototyping workflows
-- Design system creation and maintenance
-- Accessibility and inclusive design principles
-- Information architecture and user flows
-- Usability testing and iteration strategies
-
-## Approach
-
-1. User needs first - design with empathy and data
-2. Progressive disclosure for complex interfaces
-3. Consistent design patterns and components
-4. Mobile-first responsive design thinking
-5. Accessibility built-in from the start
-
-## Output
-
-- User journey maps and flow diagrams
-- Low and high-fidelity wireframes
-- Design system components and guidelines
-- Prototype specifications for development
-- Accessibility annotations and requirements
-- Usability testing plans and metrics
-
-Focus on solving user problems. Include design rationale and implementation notes.

.claude/commands/commit.md

@@ -29,12 +29,33 @@ Create well-formatted commit: $ARGUMENTS
 6. If multiple distinct changes are detected, suggests breaking the commit into multiple smaller commits
 7. For each commit (or the single commit if not split), creates a commit message using emoji conventional commit format
 
+## Determining the Scope
+
+The scope in commit messages MUST be the `name` field from the affected library's `project.json`:
+
+1. **Check the file path**: `libs/ui/label/src/...` → Look at `libs/ui/label/project.json`
+2. **Read the project name**: The `"name"` field (e.g., `"name": "ui-label"`)
+3. **Use that as scope**: `feat(ui-label): ...`
+
+**Examples:**
+- File: `libs/remission/feature/remission-list/src/...` → Scope: `remission-feature-remission-list`
+- File: `libs/ui/notice/src/...` → Scope: `ui-notice`
+- File: `apps/isa-app/src/...` → Scope: `isa-app`
+
+**Multi-project changes:**
+- If changes span 2-3 related projects, use the primary one or list them: `feat(ui-label, ui-notice): ...`
+- If changes span many unrelated projects, split into separate commits
+
 ## Best Practices for Commits
 
 - **Verify before committing**: Ensure code is linted, builds correctly, and documentation is updated
 - **Atomic commits**: Each commit should contain related changes that serve a single purpose
 - **Split large changes**: If changes touch multiple concerns, split them into separate commits
-- **Conventional commit format**: Use the format `<type>: <description>` where type is one of:
+- **Conventional commit format**: Use the format `<type>(<scope>): <description>` where:
+  - **scope**: The project name from `project.json` of the affected library (e.g., `ui-label`, `crm-feature-checkout`)
+  - Determine the scope by checking which library/project the changes belong to
+  - If changes span multiple projects, use the primary affected project or split into multiple commits
+  - type is one of:
   - `feat`: A new feature
   - `fix`: A bug fix
   - `docs`: Documentation changes
@@ -122,37 +143,73 @@ When analyzing the diff, consider splitting commits based on these criteria:
 
 ## Examples
 
-Good commit messages:
-- ✨ feat: add user authentication system
-- 🐛 fix: resolve memory leak in rendering process
-- 📝 docs: update API documentation with new endpoints
-- ♻️ refactor: simplify error handling logic in parser
-- 🚨 fix: resolve linter warnings in component files
-- 🧑‍💻 chore: improve developer tooling setup process
-- 👔 feat: implement business logic for transaction validation
-- 🩹 fix: address minor styling inconsistency in header
-- 🚑️ fix: patch critical security vulnerability in auth flow
-- 🎨 style: reorganize component structure for better readability
-- 🔥 fix: remove deprecated legacy code
-- 🦺 feat: add input validation for user registration form
-- 💚 fix: resolve failing CI pipeline tests
-- 📈 feat: implement analytics tracking for user engagement
-- 🔒️ fix: strengthen authentication password requirements
-- ♿️ feat: improve form accessibility for screen readers
+Good commit messages (scope = project name from project.json):
+- ✨ feat(auth-feature-login): add user authentication system
+- 🐛 fix(ui-renderer): resolve memory leak in rendering process
+- 📝 docs(crm-api): update API documentation with new endpoints
+- ♻️ refactor(shared-utils): simplify error handling logic in parser
+- 🚨 fix(ui-label): resolve linter warnings in component files
+- 🧑‍💻 chore(dev-tools): improve developer tooling setup process
+- 👔 feat(checkout-feature): implement business logic for transaction validation
+- 🩹 fix(ui-header): address minor styling inconsistency in header
+- 🚑️ fix(auth-core): patch critical security vulnerability in auth flow
+- 🎨 style(ui-components): reorganize component structure for better readability
+- 🔥 fix(legacy-module): remove deprecated legacy code
+- 🦺 feat(user-registration): add input validation for user registration form
+- 💚 fix(ci-config): resolve failing CI pipeline tests
+- 📈 feat(analytics-feature): implement analytics tracking for user engagement
+- 🔒️ fix(auth-password): strengthen authentication password requirements
+- ♿️ feat(ui-forms): improve form accessibility for screen readers
 
 Example of splitting commits:
-- First commit: ✨ feat: add new solc version type definitions
-- Second commit: 📝 docs: update documentation for new solc versions
-- Third commit: 🔧 chore: update package.json dependencies
-- Fourth commit: 🏷️ feat: add type definitions for new API endpoints
-- Fifth commit: 🧵 feat: improve concurrency handling in worker threads
-- Sixth commit: 🚨 fix: resolve linting issues in new code
-- Seventh commit: ✅ test: add unit tests for new solc version features
-- Eighth commit: 🔒️ fix: update dependencies with security vulnerabilities
+- First commit: ✨ feat(ui-label): add prio-label component with variant styles
+- Second commit: 📝 docs(ui-label): update README with usage examples
+- Third commit: 🔧 chore(ui-notice): scaffold new notice library
+- Fourth commit: 🏷️ feat(shared-types): add type definitions for new API endpoints
+- Fifth commit: ♻️ refactor(pickup-shelf): update components to use new label
+- Sixth commit: 🚨 fix(remission-list): resolve linting issues in new code
+- Seventh commit: ✅ test(ui-label): add unit tests for prio-label component
+- Eighth commit: 🔒️ fix(deps): update dependencies with security vulnerabilities
 
 ## Command Options
 
 - `--no-verify`: Skip running the pre-commit checks (lint, build, generate:docs)
+- `--amend`: Amend the previous commit (RESTRICTED - see rules below)
+
+## Amend Rules (CRITICAL)
+
+**ONLY use `--amend` in these specific cases:**
+
+1. **Adding pre-commit hook fixes**: If a pre-commit hook modified files (formatting, linting auto-fixes), you may amend to include those changes.
+
+2. **Before amending, ALWAYS verify:**
+   ```bash
+   # Check authorship - NEVER amend another developer's commit
+   git log -1 --format='%an %ae'
+
+   # Check not pushed - NEVER amend pushed commits
+   git status  # Should show "Your branch is ahead of..."
+   ```
+
+3. **If either check fails:**
+   - Create a NEW commit instead
+   - Never amend commits authored by others
+   - Never amend commits already pushed to remote
+
+**Example workflow for pre-commit hook changes:**
+```bash
+# 1. Initial commit triggers pre-commit hook
+git commit -m "feat(scope): add feature"
+# Hook modifies files...
+
+# 2. Verify safe to amend
+git log -1 --format='%an %ae'  # Your name/email
+git status                      # "Your branch is ahead..."
+
+# 3. Stage hook changes and amend
+git add .
+git commit --amend --no-edit
+```
 
 ## Important Notes
 

.claude/commands/create-architecture-documentation.md

@@ -1,94 +0,0 @@
----
-allowed-tools: Read, Write, Edit, Bash
-argument-hint: [framework] | --c4-model | --arc42 | --adr | --plantuml | --full-suite
-description: Generate comprehensive architecture documentation with diagrams, ADRs, and interactive visualization
----
-
-# Architecture Documentation Generator
-
-Generate comprehensive architecture documentation: $ARGUMENTS
-
-## Current Architecture Context
-
-- Project structure: !`find . -type f -name "*.json" -o -name "*.yaml" -o -name "*.toml" | head -5`
-- Documentation exists: @docs/ or @README.md (if exists)
-- Architecture files: !`find . -name "*architecture*" -o -name "*design*" -o -name "*.puml" | head -3`
-- Services/containers: @docker-compose.yml or @k8s/ (if exists)
-- API definitions: !`find . -name "*api*" -o -name "*openapi*" -o -name "*swagger*" | head -3`
-
-## Task
-
-Generate comprehensive architecture documentation with modern tooling and best practices:
-
-1. **Architecture Analysis and Discovery**
-   - Analyze current system architecture and component relationships
-   - Identify key architectural patterns and design decisions
-   - Document system boundaries, interfaces, and dependencies
-   - Assess data flow and communication patterns
-   - Identify architectural debt and improvement opportunities
-
-2. **Architecture Documentation Framework**
-   - Choose appropriate documentation framework and tools:
-     - **C4 Model**: Context, Containers, Components, Code diagrams
-     - **Arc42**: Comprehensive architecture documentation template
-     - **Architecture Decision Records (ADRs)**: Decision documentation
-     - **PlantUML/Mermaid**: Diagram-as-code documentation
-     - **Structurizr**: C4 model tooling and visualization
-     - **Draw.io/Lucidchart**: Visual diagramming tools
-
-3. **System Context Documentation**
-   - Create high-level system context diagrams
-   - Document external systems and integrations
-   - Define system boundaries and responsibilities
-   - Document user personas and stakeholders
-   - Create system landscape and ecosystem overview
-
-4. **Container and Service Architecture**
-   - Document container/service architecture and deployment view
-   - Create service dependency maps and communication patterns
-   - Document deployment architecture and infrastructure
-   - Define service boundaries and API contracts
-   - Document data persistence and storage architecture
-
-5. **Component and Module Documentation**
-   - Create detailed component architecture diagrams
-   - Document internal module structure and relationships
-   - Define component responsibilities and interfaces
-   - Document design patterns and architectural styles
-   - Create code organization and package structure documentation
-
-6. **Data Architecture Documentation**
-   - Document data models and database schemas
-   - Create data flow diagrams and processing pipelines
-   - Document data storage strategies and technologies
-   - Define data governance and lifecycle management
-   - Create data integration and synchronization documentation
-
-7. **Security and Compliance Architecture**
-   - Document security architecture and threat model
-   - Create authentication and authorization flow diagrams
-   - Document compliance requirements and controls
-   - Define security boundaries and trust zones
-   - Create incident response and security monitoring documentation
-
-8. **Quality Attributes and Cross-Cutting Concerns**
-   - Document performance characteristics and scalability patterns
-   - Create reliability and availability architecture documentation
-   - Document monitoring and observability architecture
-   - Define maintainability and evolution strategies
-   - Create disaster recovery and business continuity documentation
-
-9. **Architecture Decision Records (ADRs)**
-   - Create comprehensive ADR template and process
-   - Document historical architectural decisions and rationale
-   - Create decision tracking and review process
-   - Document trade-offs and alternatives considered
-   - Set up ADR maintenance and evolution procedures
-
-10. **Documentation Automation and Maintenance**
-    - Set up automated diagram generation from code annotations
-    - Configure documentation pipeline and publishing automation
-    - Set up documentation validation and consistency checking
-    - Create documentation review and approval process
-    - Train team on architecture documentation practices and tools
-    - Set up documentation versioning and change management

.claude/commands/docs-library.md

@@ -1,3 +1,9 @@
+---
+allowed-tools: Read, Write, Edit, Bash, Grep, Glob, Task
+argument-hint: [library-name]
+description: Generate or update README.md for a specific library with comprehensive documentation
+---
+
 # /docs:library - Generate/Update Library README
 
 Generate or update README.md for a specific library with comprehensive documentation.

.claude/commands/docs-refresh-reference.md

@@ -1,3 +1,9 @@
+---
+allowed-tools: Read, Write, Edit, Bash, Grep, Glob
+argument-hint: --dry-run | --force
+description: Regenerate library reference documentation (docs/library-reference.md) by scanning all monorepo libraries
+---
+
 # /docs:refresh-reference - Regenerate Library Reference
 
 Regenerate the library reference documentation (`docs/library-reference.md`) by scanning all libraries in the monorepo.

.claude/commands/quality-bundle-analyze.md

@@ -1,129 +0,0 @@
-# /quality:bundle-analyze - Analyze Bundle Sizes
-
-Analyze production bundle sizes and provide optimization recommendations. Project thresholds: 2MB warning, 5MB error.
-
-## Tasks
-
-### 1. Run Production Build
-```bash
-# Clean previous build
-rm -rf dist/
-
-# Build for production
-npm run build-prod
-```
-
-### 2. Analyze Bundle Output
-```bash
-# List bundle files with sizes
-ls -lh dist/apps/isa-app/browser/*.js | awk '{print $9, $5}'
-
-# Get total bundle size
-du -sh dist/apps/isa-app/browser/
-```
-
-### 3. Identify Large Files
-Parse build output and identify:
-- Main bundle size
-- Lazy-loaded chunk sizes
-- Vendor chunks
-- Files exceeding thresholds:
-  - **Warning**: > 2MB
-  - **Error**: > 5MB
-
-### 4. Analyze Dependencies
-```bash
-# Check for duplicate dependencies
-npm ls --depth=0 | grep -E "UNMET|deduped"
-
-# Show largest node_modules packages
-du -sh node_modules/* | sort -rh | head -20
-```
-
-### 5. Source Map Analysis
-Use source maps to identify large contributors:
-```bash
-# Install source-map-explorer if needed
-npm install -g source-map-explorer
-
-# Analyze main bundle
-source-map-explorer dist/apps/isa-app/browser/main.*.js
-```
-
-### 6. Generate Recommendations
-Based on analysis, provide actionable recommendations:
-
-**If bundle > 2MB:**
-- Identify heavy dependencies to replace or remove
-- Suggest lazy loading opportunities
-- Check for unused imports
-
-**Code Splitting Opportunities:**
-- Large feature modules that could be lazy-loaded
-- Heavy libraries that could be dynamically imported
-- Vendor code that could be split into separate chunks
-
-**Dependency Optimization:**
-- Replace large libraries with smaller alternatives
-- Remove unused dependencies
-- Use tree-shakeable imports
-
-**Build Configuration:**
-- Enable/optimize compression
-- Check for source maps in production (should be disabled)
-- Verify optimization flags
-
-### 7. Comparative Analysis
-If previous build data exists:
-```bash
-# Compare with previous build
-# (Requires manual tracking or CI/CD integration)
-echo "Current build: $(du -sh dist/apps/isa-app/browser/ | awk '{print $1}')"
-```
-
-### 8. Generate Report
-Create formatted report with:
-- Total bundle size with threshold status (✅ < 2MB, ⚠️ 2-5MB, ❌ > 5MB)
-- Main bundle and largest chunks
-- Top 10 largest dependencies
-- Optimization recommendations prioritized by impact
-- Lazy loading opportunities
-
-## Output Format
-```
-Bundle Analysis Report
-======================
-
-Total Size: X.XX MB [STATUS]
-Main Bundle: X.XX MB
-Largest Chunks:
-  - chunk-name.js: X.XX MB
-  - ...
-
-Largest Dependencies:
-  1. dependency-name: X.XX MB
-  ...
-
-Recommendations:
-🔴 Critical (> 5MB):
-  - [Action items]
-
-⚠️ Warning (2-5MB):
-  - [Action items]
-
-✅ Optimization Opportunities:
-  - [Action items]
-
-Lazy Loading Candidates:
-  - [Feature modules]
-```
-
-## Error Handling
-- Build failures: Show error and suggest fixes
-- Missing tools: Offer to install (source-map-explorer)
-- No dist folder: Run build first
-
-## References
-- CLAUDE.md Build Configuration section
-- Angular build optimization: https://angular.dev/tools/cli/build
-- package.json (build-prod script)

.claude/commands/quality-coverage.md

@@ -1,201 +0,0 @@
-# /quality:coverage - Generate Test Coverage Report
-
-Generate comprehensive test coverage report with recommendations for improving coverage.
-
-## Parameters
-- `library-name` (optional): Specific library to analyze. If omitted, analyzes all libraries.
-
-## Tasks
-
-### 1. Run Coverage Analysis
-```bash
-# Single library
-npx nx test [library-name] --skip-nx-cache --coverage
-
-# All libraries (if no library specified)
-npm run ci # Runs all tests with coverage
-```
-
-### 2. Parse Coverage Report
-Coverage output typically in:
-- `coverage/libs/[domain]/[layer]/[name]/`
-- Look for `coverage-summary.json` or text output
-
-Extract metrics:
-- **Line coverage**: % of executable lines tested
-- **Branch coverage**: % of conditional branches tested
-- **Function coverage**: % of functions called in tests
-- **Statement coverage**: % of statements executed
-
-### 3. Identify Uncovered Code
-Parse coverage report to find:
-- **Uncovered files**: Files with 0% coverage
-- **Partially covered files**: < 80% coverage
-- **Uncovered lines**: Specific line numbers not tested
-- **Uncovered branches**: Conditional paths not tested
-
-```bash
-# List files with coverage below 80%
-# (Parse from coverage JSON output)
-```
-
-### 4. Categorize Coverage Gaps
-
-**Critical (High Risk):**
-- Service methods handling business logic
-- Data transformation functions
-- Error handling code paths
-- Security-related functions
-- State management store actions
-
-**Important (Medium Risk):**
-- Component public methods
-- Utility functions
-- Validators
-- Pipes and filters
-- Guard functions
-
-**Low Priority:**
-- Getters/setters
-- Simple property assignments
-- Console logging
-- Type definitions
-
-### 5. Generate Recommendations
-
-For each coverage gap, provide:
-- **File and line numbers**
-- **Risk level** (Critical/Important/Low)
-- **Suggested test type** (unit/integration)
-- **Test approach** (example test scenario)
-
-Example:
-```
-📍 libs/oms/data-access/src/lib/services/order.service.ts:45-52
-🔴 Critical - Business Logic
-❌ 0% coverage - Error handling path
-
-Recommended test:
-it('should handle API error when fetching order', async () => {
-  // Mock API to return error
-  // Call method
-  // Verify error handling
-});
-```
-
-### 6. Calculate Coverage Trends
-If historical data available:
-- Compare with previous coverage percentage
-- Show improvement/regression
-- Identify files with declining coverage
-
-### 7. Generate HTML Report
-```bash
-# Open coverage report in browser (if available)
-open coverage/libs/[domain]/[layer]/[name]/index.html
-```
-
-### 8. Create Coverage Summary Report
-
-**Overall Metrics:**
-```
-Coverage Summary for [library-name]
-====================================
-
-Line Coverage:     XX.X% (XXX/XXX lines)
-Branch Coverage:   XX.X% (XXX/XXX branches)
-Function Coverage: XX.X% (XXX/XXX functions)
-Statement Coverage: XX.X% (XXX/XXX statements)
-
-Target: 80% (Recommended minimum)
-Status: ✅ Met / ⚠️ Below Target / 🔴 Critical
-```
-
-**Files Needing Attention:**
-```
-🔴 Critical (< 50% coverage):
-  1. service-name.service.ts - 35% (business logic)
-  2. data-processor.ts - 42% (transformations)
-
-⚠️ Below Target (50-79% coverage):
-  3. component-name.component.ts - 68%
-  4. validator.ts - 72%
-
-✅ Well Covered (≥ 80% coverage):
-  - Other files maintaining good coverage
-```
-
-**Top Priority Tests to Add:**
-1. [File:Line] - [Description] - [Risk Level]
-2. ...
-
-### 9. Framework-Specific Notes
-
-**Vitest:**
-- Coverage provider: v8 or istanbul
-- Config in `vitest.config.ts`
-- Coverage thresholds configurable
-
-**Jest:**
-- Coverage collected via `--coverage` flag
-- Config in `jest.config.ts`
-- Coverage directory: `coverage/`
-
-### 10. Set Coverage Thresholds (Optional)
-Suggest adding to test config:
-```typescript
-// vitest.config.ts
-coverage: {
-  thresholds: {
-    lines: 80,
-    functions: 80,
-    branches: 80,
-    statements: 80
-  }
-}
-```
-
-## Output Format
-```
-Test Coverage Report
-====================
-
-Library: [name]
-Test Framework: [Vitest/Jest]
-Generated: [timestamp]
-
-📊 Coverage Metrics
--------------------
-Lines:      XX.X% ████████░░ (XXX/XXX)
-Branches:   XX.X% ███████░░░ (XXX/XXX)
-Functions:  XX.X% █████████░ (XXX/XXX)
-Statements: XX.X% ████████░░ (XXX/XXX)
-
-🎯 Target: 80% | Status: [✅/⚠️/🔴]
-
-🔍 Coverage Gaps
-----------------
-[Categorized list with priorities]
-
-💡 Recommendations
-------------------
-[Prioritized list of tests to add]
-
-📈 Next Steps
--------------
-1. Focus on critical coverage gaps first
-2. Add tests for business logic in [files]
-3. Consider setting coverage thresholds
-4. Re-run: npx nx test [library-name] --skip-nx-cache --coverage
-```
-
-## Error Handling
-- No coverage data: Ensure `--coverage` flag used
-- Missing library: Verify library name is correct
-- Coverage tool not configured: Check test config for coverage setup
-
-## References
-- docs/guidelines/testing.md
-- CLAUDE.md Testing Framework section
-- Vitest coverage: https://vitest.dev/guide/coverage
-- Jest coverage: https://jestjs.io/docs/configuration#collectcoverage-boolean

.claude/commands/quality.md

@@ -0,0 +1,188 @@
+---
+allowed-tools: Read, Write, Edit, Bash, Grep, Glob
+argument-hint: bundle | coverage [library-name] | --all
+description: Analyze code quality: bundle sizes, test coverage, with optimization recommendations
+---
+
+# /quality - Code Quality Analysis
+
+Comprehensive quality analysis including bundle sizes and test coverage.
+
+## Subcommands
+
+- `bundle` - Analyze production bundle sizes
+- `coverage [library-name]` - Test coverage analysis
+- No argument - Run both analyses
+- `[library-name]` - Coverage for specific library
+
+## Bundle Analysis
+
+### 1. Run Production Build
+```bash
+# Clean previous build
+rm -rf dist/
+
+# Build for production
+npm run build-prod
+```
+
+### 2. Analyze Bundle Output
+```bash
+# List bundle files with sizes
+ls -lh dist/apps/isa-app/browser/*.js | awk '{print $9, $5}'
+
+# Get total bundle size
+du -sh dist/apps/isa-app/browser/
+```
+
+### 3. Identify Large Files
+Parse build output and identify:
+- Main bundle size
+- Lazy-loaded chunk sizes
+- Vendor chunks
+- Files exceeding thresholds:
+  - **Warning**: > 2MB
+  - **Error**: > 5MB
+
+### 4. Analyze Dependencies
+```bash
+# Check for duplicate dependencies
+npm ls --depth=0 | grep -E "UNMET|deduped"
+
+# Show largest node_modules packages
+du -sh node_modules/* | sort -rh | head -20
+```
+
+### 5. Source Map Analysis (Optional)
+```bash
+# Install source-map-explorer if needed
+npm install -g source-map-explorer
+
+# Analyze main bundle
+source-map-explorer dist/apps/isa-app/browser/main.*.js
+```
+
+### 6. Bundle Recommendations
+
+**If bundle > 2MB:**
+- Identify heavy dependencies to replace or remove
+- Suggest lazy loading opportunities
+- Check for unused imports
+
+**Code Splitting Opportunities:**
+- Large feature modules that could be lazy-loaded
+- Heavy libraries that could be dynamically imported
+
+**Dependency Optimization:**
+- Replace large libraries with smaller alternatives
+- Remove unused dependencies
+- Use tree-shakeable imports
+
+---
+
+## Coverage Analysis
+
+### 1. Run Coverage Analysis
+```bash
+# Single library
+npx nx test [library-name] --skip-nx-cache --coverage
+
+# All libraries (if no library specified)
+npm run ci # Runs all tests with coverage
+```
+
+### 2. Parse Coverage Report
+Coverage output in: `coverage/libs/[domain]/[layer]/[name]/`
+
+Extract metrics:
+- **Line coverage**: % of executable lines tested
+- **Branch coverage**: % of conditional branches tested
+- **Function coverage**: % of functions called in tests
+- **Statement coverage**: % of statements executed
+
+### 3. Identify Uncovered Code
+Parse coverage report to find:
+- **Uncovered files**: Files with 0% coverage
+- **Partially covered files**: < 80% coverage
+- **Uncovered lines**: Specific line numbers not tested
+- **Uncovered branches**: Conditional paths not tested
+
+### 4. Categorize Coverage Gaps
+
+**Critical (High Risk):**
+- Service methods handling business logic
+- Data transformation functions
+- Error handling code paths
+- Security-related functions
+- State management store actions
+
+**Important (Medium Risk):**
+- Component public methods
+- Utility functions
+- Validators and guards
+
+**Low Priority:**
+- Getters/setters
+- Simple property assignments
+
+### 5. Generate Recommendations
+
+For each coverage gap provide:
+- **File and line numbers**
+- **Risk level** (Critical/Important/Low)
+- **Suggested test type** (unit/integration)
+- **Test approach** (example test scenario)
+
+---
+
+## Output Formats
+
+### Bundle Report
+```
+Bundle Analysis Report
+======================
+
+Total Size: X.XX MB [STATUS]
+Main Bundle: X.XX MB
+Largest Chunks:
+  - chunk-name.js: X.XX MB
+
+Largest Dependencies:
+  1. dependency-name: X.XX MB
+
+Recommendations:
+  - [Prioritized action items]
+```
+
+### Coverage Report
+```
+Coverage Summary for [library-name]
+====================================
+
+Line Coverage:     XX.X% (XXX/XXX lines)
+Branch Coverage:   XX.X% (XXX/XXX branches)
+Function Coverage: XX.X% (XXX/XXX functions)
+
+Target: 80% (Recommended minimum)
+Status: [Met/Below Target/Critical]
+
+Files Needing Attention:
+  [Categorized list with priorities]
+
+Top Priority Tests to Add:
+  [Prioritized recommendations]
+```
+
+## Error Handling
+
+- **Build failures**: Show error and suggest fixes
+- **Missing tools**: Offer to install (source-map-explorer)
+- **No coverage data**: Ensure `--coverage` flag used
+- **Missing library**: Verify library name is correct
+
+## References
+
+- CLAUDE.md Build Configuration section
+- docs/guidelines/testing.md
+- Angular build optimization: https://angular.dev/tools/cli/build
+- Vitest coverage: https://vitest.dev/guide/coverage

.claude/skills/angular-effects-alternatives/SKILL.md

@@ -0,0 +1,417 @@
+---
+name: angular-effects-alternatives
+description: This skill should be used when writing Angular code with signals and effects. Use when deciding whether to use effect(), computed(), or reactive patterns for state management. Applies to all Angular components and services using signals, especially when considering effect() for state propagation, data synchronization, or reactive flows. Essential for code review of effect usage and refactoring imperative patterns to declarative alternatives.
+---
+
+# Angular Effects Alternatives
+
+## Overview
+
+This skill guides proper usage of Angular's `effect()` and provides declarative alternatives for common patterns. Effects are frequently misused for state propagation, leading to circular updates, maintenance issues, and violations of reactive principles. This skill prevents anti-patterns and promotes maintainable, declarative code.
+
+## When to Use Effects (Valid Use Cases)
+
+Effects are **primarily for rendering content that cannot be rendered through data binding**. Valid use cases are limited to:
+
+### 1. Logging
+Recording application events or debugging:
+
+```typescript
+effect(() => {
+  const error = this.error();
+  if (error) {
+    console.error('Error occurred:', error);
+  }
+});
+```
+
+### 2. Canvas Painting
+Custom graphics rendering (e.g., Angular Three library, Chart.js integration):
+
+```typescript
+effect(() => {
+  const data = this.chartData();
+  this.renderCanvas(data);
+});
+```
+
+### 3. Custom DOM Behavior
+Imperative APIs that require direct DOM manipulation:
+
+```typescript
+effect(() => {
+  const message = this.notificationMessage();
+  if (message) {
+    this.snackBar.open(message, 'Close');
+  }
+});
+```
+
+**Key principle:** Data binding is the preferred way to display data. Effects should only be used when data binding is insufficient.
+
+## Understanding Auto-Tracking
+
+Angular automatically tracks signals accessed during effect execution, **even within called methods**:
+
+```typescript
+effect(() => {
+  this.logError(); // Signal tracking happens inside this method
+});
+
+logError(): void {
+  const error = this.error(); // This signal is automatically tracked
+  if (error) {
+    console.error(error);
+  }
+}
+```
+
+**Implication:** Auto-tracking makes effect dependencies non-obvious and hard to maintain. This is a primary reason to avoid effects for state management.
+
+## When NOT to Use Effects (Anti-Patterns)
+
+### ❌ Anti-Pattern 1: State Propagation
+
+**NEVER use effects to propagate state changes to other state:**
+
+```typescript
+// ❌ WRONG - Anti-pattern
+effect(() => {
+  const value = this.source();
+  this.derived.set(value * 2);
+});
+```
+
+**Problems:**
+- Risk of circular updates and infinite loops
+- Hard to maintain due to implicit tracking
+- Violates declarative reactive principles
+- Inappropriate glitch-free semantics
+
+### ❌ Anti-Pattern 2: Synchronizing Signals
+
+```typescript
+// ❌ WRONG - Anti-pattern
+effect(() => {
+  const filter = this.filter();
+  this.loadData(filter);
+});
+```
+
+### ❌ Anti-Pattern 3: Event Emulation
+
+```typescript
+// ❌ WRONG - Anti-pattern
+effect(() => {
+  const count = this.itemCount();
+  this.countChanged.emit(count);
+});
+```
+
+**Why signals ≠ events:** Signals are designed to be glitch-free, collapsing multiple updates. This makes them inappropriate for representing discrete events.
+
+## Decision Tree: Effect vs Alternative
+
+```
+Need to react to signal changes?
+│
+├─ Synchronous derivation?
+│  └─ ✅ Use computed()
+│
+├─ Asynchronous derivation?
+│  └─ ✅ Use Resource API
+│
+├─ Complex reactive flow with race conditions?
+│  └─ ✅ Use RxJS (toObservable + operators + toSignal)
+│
+├─ Event-based trigger (not state change)?
+│  └─ ✅ React to event directly, not signal
+│
+├─ Need RxJS operators with signals?
+│  └─ ✅ Use reactive helpers (rxMethod, deriveAsync)
+│
+└─ Rendering non-data-bound content (logging, canvas, imperative API)?
+   └─ ✅ Use effect()
+```
+
+## Recommended Alternatives
+
+### Alternative 1: Use `computed()` for Synchronous Derivations
+
+**When to use:** Deriving new state synchronously from existing signals.
+
+```typescript
+// ✅ CORRECT - Declarative
+const derived = computed(() => {
+  return this.baseSignal() * 2;
+});
+
+const fullName = computed(() => {
+  return `${this.firstName()} ${this.lastName()}`;
+});
+```
+
+**Benefits:**
+- Declarative and maintainable
+- Automatic dependency tracking
+- Memoized and efficient
+- No risk of circular updates
+
+### Alternative 2: Use Resource API for Asynchronous Derivations
+
+**When to use:** Loading data based on reactive parameters.
+
+```typescript
+// ✅ CORRECT - Declarative async state
+readonly itemsResource = resource({
+  params: this.filter,
+  loader: ({ params, abortSignal }) => {
+    return this.dataService.load(params, abortSignal);
+  }
+});
+
+readonly items = computed(() => this.itemsResource.value() ?? []);
+```
+
+**Benefits:**
+- Automatic race condition handling
+- Built-in loading/error states
+- Declarative parameter tracking
+- Cancellation support
+
+**See also:** `ngrx-resource-api` skill for detailed Resource API patterns.
+
+### Alternative 3: React to Events, Not State Changes
+
+**When to use:** User interactions or DOM events should trigger actions.
+
+```typescript
+// ❌ WRONG - Reacting to signal change
+effect(() => {
+  const searchTerm = this.searchTerm();
+  this.search(searchTerm);
+});
+
+// ✅ CORRECT - React to event
+<input (input)="search($event.target.value)" />
+
+// Component
+search(term: string): void {
+  this.searchTerm.set(term);
+  this.performSearch(term);
+}
+```
+
+**Benefits:**
+- Clear causality (event → action)
+- No auto-tracking complexity
+- Explicit control flow
+
+### Alternative 4: RxJS Integration
+
+**When to use:** Complex reactive flows requiring operators like `debounceTime`, `switchMap`, `combineLatest`.
+
+```typescript
+// ✅ CORRECT - RxJS for complex flows
+readonly searchTerm = signal('');
+readonly searchTerm$ = toObservable(this.searchTerm);
+
+readonly results$ = this.searchTerm$.pipe(
+  debounceTime(300),
+  distinctUntilChanged(),
+  switchMap(term => this.searchService.search(term))
+);
+
+readonly results = toSignal(this.results$, { initialValue: [] });
+```
+
+**Benefits:**
+- Full RxJS operator ecosystem
+- Race condition prevention (`switchMap`)
+- Powerful composition
+- Type-safe streams
+
+**Pattern:** Signal → Observable (toObservable) → RxJS operators → Signal (toSignal)
+
+### Alternative 5: Reactive Helpers
+
+**When to use:** Need RxJS operators but prefer signal-centric API.
+
+#### Using `rxMethod` (NgRx Signal Store)
+
+```typescript
+readonly loadItem = rxMethod<number>(
+  pipe(
+    tap(() => patchState(this, { loading: true })),
+    switchMap(id => this.service.findById(id)),
+    tap(item => patchState(this, { item, loading: false }))
+  )
+);
+
+// Call with signal or value
+constructor() {
+  this.loadItem(this.selectedId);
+}
+```
+
+#### Using `deriveAsync` (ngxtension)
+
+```typescript
+readonly data = deriveAsync(() => {
+  const filter = this.filter();
+  return this.service.load(filter);
+});
+```
+
+**Benefits:**
+- Signal-friendly API
+- RxJS operator support
+- Cleaner than manual Observable conversion
+- Automatic subscription management
+
+## The `explicitEffect` Consideration
+
+Some libraries provide `explicitEffect` to restrict auto-tracking:
+
+```typescript
+// Uses untracked() internally to limit tracking
+explicitEffect(this.id, (id) => {
+  this.store.load(id);
+});
+```
+
+**Evaluation:**
+- ✅ Mitigates auto-tracking drawbacks
+- ✅ Makes dependencies explicit
+- ❌ Still imperative (not declarative)
+- ❌ Doesn't solve circular update risks
+- ❌ Less idiomatic than reactive alternatives
+
+**Recommendation:** Prefer declarative patterns (computed, Resource API, RxJS) over `explicitEffect`.
+
+## Common Refactoring Patterns
+
+### Pattern 1: Effect for State Sync → computed()
+
+```typescript
+// ❌ Before
+effect(() => {
+  const x = this.x();
+  const y = this.y();
+  this.sum.set(x + y);
+});
+
+// ✅ After
+readonly sum = computed(() => this.x() + this.y());
+```
+
+### Pattern 2: Effect for Async Load → Resource API
+
+```typescript
+// ❌ Before
+effect(() => {
+  const id = this.selectedId();
+  this.loadItem(id);
+});
+
+// ✅ After
+readonly itemResource = resource({
+  params: this.selectedId,
+  loader: ({ params }) => this.service.loadItem(params)
+});
+```
+
+### Pattern 3: Effect for Debounced Search → RxJS
+
+```typescript
+// ❌ Before
+effect(() => {
+  const term = this.searchTerm();
+  // No way to debounce within effect
+  this.search(term);
+});
+
+// ✅ After
+readonly searchTerm$ = toObservable(this.searchTerm);
+readonly results = toSignal(
+  this.searchTerm$.pipe(
+    debounceTime(300),
+    switchMap(term => this.searchService.search(term))
+  ),
+  { initialValue: [] }
+);
+```
+
+### Pattern 4: Effect for Event Notification → Direct Event Handling
+
+```typescript
+// ❌ Before
+effect(() => {
+  const value = this.value();
+  this.valueChange.emit(value);
+});
+
+// ✅ After
+updateValue(newValue: string): void {
+  this.value.set(newValue);
+  this.valueChange.emit(newValue);
+}
+```
+
+## Code Review Checklist
+
+When reviewing code with `effect()`, ask:
+
+- [ ] Is this for rendering non-data-bound content? (logging, canvas, imperative APIs)
+  - **YES:** Effect is appropriate
+  - **NO:** Continue checklist
+
+- [ ] Is this synchronous state derivation?
+  - **YES:** Use `computed()` instead
+
+- [ ] Is this asynchronous data loading?
+  - **YES:** Use Resource API instead
+
+- [ ] Does this need RxJS operators (debounce, switchMap, etc.)?
+  - **YES:** Use RxJS integration or reactive helpers instead
+
+- [ ] Is this reacting to a user event?
+  - **YES:** Handle event directly instead
+
+- [ ] Could this cause circular updates?
+  - **YES:** Refactor immediately - this will cause bugs
+
+## Anti-Pattern Detection Rules
+
+Flag any effect that:
+
+1. **Calls `set()` or `update()` on signals** - Likely state propagation anti-pattern
+2. **Calls service methods that update state** - Hidden state propagation
+3. **Emits events based on signal changes** - Signal/event semantic mismatch
+4. **Has try/catch for async operations** - Should use Resource API
+5. **Would benefit from debouncing/throttling** - Should use RxJS
+
+## Migration Strategy
+
+When converting effects to alternatives:
+
+1. **Identify effect purpose** - State derivation? Async load? Event handling?
+2. **Choose appropriate alternative** - Use decision tree above
+3. **Implement replacement** - Follow patterns in this skill
+4. **Test thoroughly** - Ensure reactive flow works correctly
+5. **Remove effect** - Clean up unused code
+
+## Key Principles
+
+1. **Effects are for side effects, not state management**
+2. **Prefer declarative over imperative**
+3. **Use computed() for sync, Resource API for async**
+4. **React to events, not state changes**
+5. **RxJS for complex reactive flows**
+6. **Auto-tracking is powerful but opaque - avoid when possible**
+
+## When in Doubt
+
+Ask: "Can the user see this without an effect using data binding?"
+- **YES:** Don't use effect, use data binding
+- **NO:** Effect might be appropriate (but verify against decision tree)

.claude/skills/angular-template/SKILL.md

@@ -18,6 +18,7 @@ Guide for modern Angular 20+ template patterns: control flow, lazy loading, proj
 **Related Skills:** These skills work together when writing Angular templates:
 - **[html-template](../html-template/SKILL.md)** - E2E testing attributes (`data-what`, `data-which`) and ARIA accessibility
 - **[tailwind](../tailwind/SKILL.md)** - ISA design system styling (colors, typography, spacing, layout)
+- **[logging](../logging/SKILL.md)** - MANDATORY logging in all Angular files using `@isa/core/logging`
 
 ## Control Flow (Angular 17+)
 

.claude/skills/api-change-analyzer/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: api-change-analyzer
-description: This skill should be used when analyzing Swagger/OpenAPI specification changes BEFORE regenerating API clients. It compares old vs new specs, categorizes changes as breaking/compatible/warnings, finds affected code, and generates migration strategies. Use this skill when the user wants to check API changes safely before sync, mentions "check breaking changes", or needs impact assessment.
+description: This skill should be used when checking for breaking changes before API regeneration, assessing backend API update impact, or user mentions "check breaking changes", "API diff", "impact assessment". Analyzes Swagger/OpenAPI spec changes, categorizes as breaking/compatible/warnings, and provides migration strategies.
 ---
 
 # API Change Analyzer

.claude/skills/architecture-documentation/SKILL.md

@@ -0,0 +1,171 @@
+---
+name: architecture-documentation
+description: Generate architecture documentation (C4, Arc42, ADRs, PlantUML). Auto-invoke when user mentions "architecture docs", "C4 model", "ADR", "document architecture", "system design", or "create architecture diagram".
+---
+
+# Architecture Documentation Skill
+
+Generate comprehensive architecture documentation using modern frameworks and best practices.
+
+## When to Use
+
+- Creating or updating architecture documentation
+- Generating C4 model diagrams (Context, Container, Component, Code)
+- Writing Architecture Decision Records (ADRs)
+- Documenting system design and component relationships
+- Creating PlantUML or Mermaid diagrams
+
+## Available Frameworks
+
+### C4 Model
+Best for: Visualizing software architecture at different abstraction levels
+
+Levels:
+1. **Context** - System landscape and external actors
+2. **Container** - High-level technology choices (apps, databases, etc.)
+3. **Component** - Internal structure of containers
+4. **Code** - Class/module level detail (optional)
+
+See: `@references/c4-model.md` for patterns and examples
+
+### Arc42 Template
+Best for: Comprehensive architecture documentation
+
+Sections:
+1. Introduction and Goals
+2. Constraints
+3. Context and Scope
+4. Solution Strategy
+5. Building Block View
+6. Runtime View
+7. Deployment View
+8. Cross-cutting Concepts
+9. Architecture Decisions
+10. Quality Requirements
+11. Risks and Technical Debt
+12. Glossary
+
+See: `@references/arc42.md` for template structure
+
+### Architecture Decision Records (ADRs)
+Best for: Documenting individual architectural decisions
+
+See: `@references/adr-template.md` for format and examples
+
+## Workflow
+
+### 1. Discovery Phase
+```bash
+# Find existing architecture files
+find . -name "*architecture*" -o -name "*.puml" -o -name "*.mmd"
+
+# Identify service boundaries
+cat nx.json docker-compose.yml
+
+# Check for existing ADRs
+ls -la docs/adr/ docs/decisions/
+```
+
+### 2. Analysis Phase
+- Analyze codebase structure (`libs/`, `apps/`)
+- Identify dependencies from `tsconfig.base.json` paths
+- Review service boundaries from `project.json` tags
+- Map data flow from API definitions
+
+### 3. Documentation Phase
+Based on the request, create appropriate documentation:
+
+**For C4 diagrams:**
+```
+docs/architecture/
+├── c4-context.puml
+├── c4-container.puml
+└── c4-component-[name].puml
+```
+
+**For ADRs:**
+```
+docs/adr/
+├── 0001-record-architecture-decisions.md
+├── 0002-[decision-title].md
+└── template.md
+```
+
+**For Arc42:**
+```
+docs/architecture/
+└── arc42/
+    ├── 01-introduction.md
+    ├── 02-constraints.md
+    └── ...
+```
+
+## ISA-Frontend Specific Context
+
+### Monorepo Structure
+- **apps/**: Angular applications
+- **libs/**: Shared libraries organized by domain
+  - `libs/[domain]/feature/` - Feature modules
+  - `libs/[domain]/data-access/` - State management
+  - `libs/[domain]/ui/` - Presentational components
+  - `libs/[domain]/util/` - Utilities
+
+### Key Architectural Patterns
+- **Nx Monorepo** with strict module boundaries
+- **NgRx Signal Store** for state management
+- **Standalone Components** (Angular 20+)
+- **Domain-Driven Design** library organization
+
+### Documentation Locations
+- ADRs: `docs/adr/`
+- Architecture diagrams: `docs/architecture/`
+- API documentation: Generated from Swagger/OpenAPI
+
+## Output Standards
+
+### PlantUML Format
+```plantuml
+@startuml C4_Context
+!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
+
+Person(user, "User", "System user")
+System(system, "ISA System", "Main application")
+System_Ext(external, "External API", "Third-party service")
+
+Rel(user, system, "Uses")
+Rel(system, external, "Calls")
+@enduml
+```
+
+### Mermaid Format
+```mermaid
+graph TD
+    A[User] --> B[ISA App]
+    B --> C[API Gateway]
+    C --> D[Backend Services]
+```
+
+### ADR Format
+```markdown
+# ADR-XXXX: [Title]
+
+## Status
+[Proposed | Accepted | Deprecated | Superseded]
+
+## Context
+[What is the issue?]
+
+## Decision
+[What was decided?]
+
+## Consequences
+[What are the results?]
+```
+
+## Best Practices
+
+1. **Start with Context** - Always begin with C4 Level 1 (System Context)
+2. **Use Consistent Notation** - Stick to one diagramming tool/format
+3. **Keep ADRs Atomic** - One decision per ADR
+4. **Version Control** - Commit documentation with code changes
+5. **Review Regularly** - Architecture docs decay; schedule reviews

.claude/skills/architecture-documentation/references/adr-template.md

@@ -0,0 +1,213 @@
+# Architecture Decision Record (ADR) Template
+
+## Overview
+
+Architecture Decision Records document significant architectural decisions along with their context and consequences.
+
+## ADR Format
+
+### Standard Template
+
+```markdown
+# ADR-XXXX: [Short Title]
+
+## Status
+[Proposed | Accepted | Deprecated | Superseded by ADR-YYYY]
+
+## Date
+YYYY-MM-DD
+
+## Context
+What is the issue that we're seeing that is motivating this decision or change?
+
+## Decision
+What is the change that we're proposing and/or doing?
+
+## Consequences
+
+### Positive
+- Benefit 1
+- Benefit 2
+
+### Negative
+- Drawback 1
+- Drawback 2
+
+### Neutral
+- Side effect 1
+
+## Alternatives Considered
+
+### Option 1: [Name]
+- Pros: ...
+- Cons: ...
+- Why rejected: ...
+
+### Option 2: [Name]
+- Pros: ...
+- Cons: ...
+- Why rejected: ...
+
+## References
+- [Link to related documentation]
+- [Link to discussion thread]
+```
+
+## Example ADRs
+
+### ADR-0001: Use Nx Monorepo
+
+```markdown
+# ADR-0001: Use Nx Monorepo for Project Organization
+
+## Status
+Accepted
+
+## Date
+2024-01-15
+
+## Context
+The ISA Frontend consists of multiple applications and shared libraries. We need a way to:
+- Share code between applications
+- Maintain consistent tooling and dependencies
+- Enable efficient CI/CD with affected-based testing
+- Enforce architectural boundaries
+
+## Decision
+We will use Nx as our monorepo tool with the following structure:
+- `apps/` - Deployable applications
+- `libs/` - Shared libraries organized by domain and type
+
+## Consequences
+
+### Positive
+- Single version of dependencies across all projects
+- Affected-based testing reduces CI time
+- Consistent tooling (ESLint, Prettier, TypeScript)
+- Built-in dependency graph visualization
+
+### Negative
+- Learning curve for team members new to Nx
+- More complex initial setup
+- All code in single repository increases clone time
+
+### Neutral
+- Requires discipline in library boundaries
+- Need to maintain `project.json` and tags
+
+## Alternatives Considered
+
+### Polyrepo
+- Pros: Simpler individual repos, independent deployments
+- Cons: Dependency management nightmare, code duplication
+- Why rejected: Too much overhead for code sharing
+```
+
+### ADR-0002: Adopt NgRx Signal Store
+
+```markdown
+# ADR-0002: Adopt NgRx Signal Store for State Management
+
+## Status
+Accepted
+
+## Date
+2024-03-01
+
+## Context
+We need a state management solution that:
+- Integrates well with Angular signals
+- Provides predictable state updates
+- Supports devtools for debugging
+- Has good TypeScript support
+
+## Decision
+We will use NgRx Signal Store for new features and gradually migrate existing stores.
+
+## Consequences
+
+### Positive
+- Native signal integration
+- Simpler boilerplate than classic NgRx
+- Better performance with fine-grained reactivity
+- Excellent TypeScript inference
+
+### Negative
+- Migration effort for existing NgRx stores
+- Different patterns from classic NgRx
+
+### Neutral
+- Team needs to learn new API
+
+## Alternatives Considered
+
+### Classic NgRx (Store + Effects)
+- Pros: Mature, well-documented
+- Cons: Verbose boilerplate, doesn't leverage signals
+- Why rejected: Signal Store is the future direction
+
+### Akita
+- Pros: Less boilerplate
+- Cons: Not Angular-native, less community support
+- Why rejected: NgRx has better Angular integration
+```
+
+## ADR Naming Convention
+
+```
+docs/adr/
+├── 0000-adr-template.md          # Template file
+├── 0001-use-nx-monorepo.md
+├── 0002-adopt-ngrx-signal-store.md
+├── 0003-standalone-components.md
+└── README.md                      # Index of all ADRs
+```
+
+## ADR Index Template
+
+```markdown
+# Architecture Decision Records
+
+This directory contains Architecture Decision Records (ADRs) for the ISA Frontend.
+
+## Index
+
+| ADR | Title | Status | Date |
+|-----|-------|--------|------|
+| [0001](0001-use-nx-monorepo.md) | Use Nx Monorepo | Accepted | 2024-01-15 |
+| [0002](0002-adopt-ngrx-signal-store.md) | Adopt NgRx Signal Store | Accepted | 2024-03-01 |
+| [0003](0003-standalone-components.md) | Migrate to Standalone Components | Accepted | 2024-04-01 |
+
+## Process
+
+1. Copy `0000-adr-template.md` to `XXXX-short-title.md`
+2. Fill in the template
+3. Submit PR for review
+4. Update status once decided
+5. Update this index
+```
+
+## Best Practices
+
+1. **One decision per ADR** - Keep ADRs focused
+2. **Number sequentially** - Never reuse numbers
+3. **Record context** - Why was this needed?
+4. **Document alternatives** - Show what was considered
+5. **Keep concise** - 1-2 pages max
+6. **Update status** - Mark deprecated decisions
+7. **Link related ADRs** - Reference superseding decisions
+8. **Review regularly** - Quarterly ADR review meetings
+
+## When to Write an ADR
+
+Write an ADR when:
+- Choosing a framework or library
+- Defining code organization patterns
+- Setting up infrastructure
+- Establishing conventions
+- Making trade-offs that affect multiple teams
+
+Don't write an ADR for:
+- Small implementation details
+- Obvious choices with no alternatives
+- Temporary solutions

.claude/skills/architecture-documentation/references/arc42.md

@@ -0,0 +1,268 @@
+# Arc42 Architecture Documentation Template
+
+## Overview
+
+Arc42 is a template for architecture documentation with 12 sections covering all aspects of software architecture.
+
+## Template Structure
+
+### 1. Introduction and Goals
+
+```markdown
+# 1. Introduction and Goals
+
+## 1.1 Requirements Overview
+- Core business requirements driving the architecture
+- Key functional requirements
+- Quality goals and priorities
+
+## 1.2 Quality Goals
+| Priority | Quality Goal | Description |
+|----------|-------------|-------------|
+| 1 | Performance | < 200ms response time |
+| 2 | Usability | Intuitive for store employees |
+| 3 | Reliability | 99.9% uptime during store hours |
+
+## 1.3 Stakeholders
+| Role | Expectations |
+|------|-------------|
+| Store Employee | Fast, reliable daily operations |
+| IT Operations | Easy deployment and monitoring |
+| Development Team | Maintainable, testable code |
+```
+
+### 2. Architecture Constraints
+
+```markdown
+# 2. Architecture Constraints
+
+## 2.1 Technical Constraints
+| Constraint | Background |
+|------------|------------|
+| Angular 20+ | Company standard frontend framework |
+| TypeScript strict | Type safety requirement |
+| Browser support | Chrome 90+, Edge 90+ |
+
+## 2.2 Organizational Constraints
+| Constraint | Background |
+|------------|------------|
+| Monorepo | Nx-based shared codebase |
+| CI/CD | Azure DevOps pipelines |
+| Code review | All changes require PR approval |
+
+## 2.3 Conventions
+- Conventional commits
+- ESLint/Prettier formatting
+- Component-driven development
+```
+
+### 3. System Scope and Context
+
+```markdown
+# 3. System Scope and Context
+
+## 3.1 Business Context
+[C4 Level 1 - System Context Diagram]
+
+| Neighbor | Description |
+|----------|-------------|
+| Store Employee | Primary user performing daily operations |
+| Backend APIs | Provides business logic and data |
+| Printer Service | Label and receipt printing |
+
+## 3.2 Technical Context
+[Deployment/Network Diagram]
+
+| Interface | Protocol | Description |
+|-----------|----------|-------------|
+| REST API | HTTPS/JSON | Backend communication |
+| WebSocket | WSS | Real-time updates |
+| OAuth2 | HTTPS | Authentication |
+```
+
+### 4. Solution Strategy
+
+```markdown
+# 4. Solution Strategy
+
+## Key Architectural Decisions
+
+| Decision | Rationale |
+|----------|-----------|
+| Angular SPA | Rich interactive UI, offline capability |
+| NgRx Signal Store | Predictable state management |
+| Nx Monorepo | Code sharing, consistent tooling |
+| Standalone Components | Better tree-shaking, simpler imports |
+
+## Quality Achievement Strategies
+
+| Quality Goal | Approach |
+|--------------|----------|
+| Performance | Lazy loading, caching, code splitting |
+| Maintainability | Domain-driven library structure |
+| Testability | Component isolation, dependency injection |
+```
+
+### 5. Building Block View
+
+```markdown
+# 5. Building Block View
+
+## Level 1: Application Overview
+[C4 Container Diagram]
+
+## Level 2: Domain Decomposition
+| Domain | Purpose | Libraries |
+|--------|---------|-----------|
+| CRM | Customer management | crm-feature-*, crm-data-access-* |
+| OMS | Order management | oms-feature-*, oms-data-access-* |
+| Checkout | Transactions | checkout-feature-*, checkout-data-access-* |
+
+## Level 3: Feature Details
+[C4 Component Diagrams per domain]
+```
+
+### 6. Runtime View
+
+```markdown
+# 6. Runtime View
+
+## Scenario 1: User Login
+```mermaid
+sequenceDiagram
+    User->>App: Open application
+    App->>Auth: Redirect to login
+    Auth->>App: Return token
+    App->>API: Fetch user profile
+    API->>App: User data
+    App->>User: Display dashboard
+```
+
+## Scenario 2: Order Processing
+[Sequence diagram for order flow]
+```
+
+### 7. Deployment View
+
+```markdown
+# 7. Deployment View
+
+## Infrastructure
+```mermaid
+graph TD
+    CDN[CDN] --> Browser[User Browser]
+    Browser --> LB[Load Balancer]
+    LB --> API[API Gateway]
+    API --> Services[Backend Services]
+```
+
+## Environments
+| Environment | URL | Purpose |
+|-------------|-----|---------|
+| Development | dev.isa.local | Local development |
+| Staging | staging.isa.com | Integration testing |
+| Production | isa.com | Live system |
+```
+
+### 8. Cross-cutting Concepts
+
+```markdown
+# 8. Cross-cutting Concepts
+
+## 8.1 Domain Model
+[Domain entity relationships]
+
+## 8.2 Security
+- Authentication: OAuth2/OIDC
+- Authorization: Role-based access control
+- Data protection: HTTPS, encrypted storage
+
+## 8.3 Error Handling
+- Global error interceptor
+- User-friendly error messages
+- Error logging to backend
+
+## 8.4 Logging
+- @isa/core/logging library
+- Structured log format
+- Log levels: trace, debug, info, warn, error
+```
+
+### 9. Architecture Decisions
+
+```markdown
+# 9. Architecture Decisions
+
+See [ADR folder](../adr/) for detailed decision records.
+
+## Key Decisions
+- ADR-0001: Use Nx Monorepo
+- ADR-0002: Adopt NgRx Signal Store
+- ADR-0003: Migrate to Standalone Components
+```
+
+### 10. Quality Requirements
+
+```markdown
+# 10. Quality Requirements
+
+## Quality Tree
+```
+Quality
+├── Performance
+│   ├── Response Time < 200ms
+│   └── Time to Interactive < 3s
+├── Reliability
+│   ├── Uptime 99.9%
+│   └── Graceful degradation
+└── Maintainability
+    ├── Test coverage > 80%
+    └── Clear module boundaries
+```
+
+## Quality Scenarios
+| Scenario | Measure | Target |
+|----------|---------|--------|
+| Page load | Time to interactive | < 3s |
+| API call | Response time | < 200ms |
+| Build | CI pipeline duration | < 10min |
+```
+
+### 11. Risks and Technical Debt
+
+```markdown
+# 11. Risks and Technical Debt
+
+## Identified Risks
+| Risk | Probability | Impact | Mitigation |
+|------|-------------|--------|------------|
+| Backend unavailable | Medium | High | Offline mode |
+| Performance degradation | Low | Medium | Monitoring |
+
+## Technical Debt
+| Item | Priority | Effort |
+|------|----------|--------|
+| Legacy Jest tests | Medium | High |
+| Any types in codebase | High | Medium |
+```
+
+### 12. Glossary
+
+```markdown
+# 12. Glossary
+
+| Term | Definition |
+|------|------------|
+| ADR | Architecture Decision Record |
+| C4 | Context, Container, Component, Code model |
+| ISA | In-Store Application |
+| SPA | Single Page Application |
+```
+
+## Best Practices
+
+1. **Start with sections 1-4** - Goals, constraints, context, strategy
+2. **Add diagrams to section 5** - Building block views
+3. **Document decisions in section 9** - Link to ADRs
+4. **Keep updated** - Review quarterly
+5. **Use templates** - Consistent formatting

.claude/skills/architecture-documentation/references/c4-model.md

@@ -0,0 +1,163 @@
+# C4 Model Reference
+
+## Overview
+
+The C4 model provides a way to visualize software architecture at four levels of abstraction:
+1. **Context** - System landscape
+2. **Container** - Applications and data stores
+3. **Component** - Internal structure
+4. **Code** - Class/module detail (optional)
+
+## Level 1: System Context Diagram
+
+Shows the system under design and its relationships with users and external systems.
+
+### PlantUML Template
+```plantuml
+@startuml C4_Context
+!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
+
+LAYOUT_WITH_LEGEND()
+
+title System Context Diagram - ISA Frontend
+
+Person(user, "Store Employee", "Uses the ISA application")
+Person(admin, "Administrator", "Manages system configuration")
+
+System(isa, "ISA Frontend", "Angular application for in-store operations")
+
+System_Ext(backend, "ISA Backend", "REST API services")
+System_Ext(auth, "Auth Provider", "Authentication service")
+System_Ext(printer, "Printer Service", "Receipt/label printing")
+
+Rel(user, isa, "Uses", "Browser")
+Rel(admin, isa, "Configures", "Browser")
+Rel(isa, backend, "API calls", "HTTPS/JSON")
+Rel(isa, auth, "Authenticates", "OAuth2")
+Rel(isa, printer, "Prints", "WebSocket")
+
+@enduml
+```
+
+### Key Elements
+- **Person**: Human users of the system
+- **System**: The system being documented (highlighted)
+- **System_Ext**: External systems the system depends on
+- **Rel**: Relationships between elements
+
+## Level 2: Container Diagram
+
+Shows the high-level technology choices and how containers communicate.
+
+### PlantUML Template
+```plantuml
+@startuml C4_Container
+!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
+
+LAYOUT_WITH_LEGEND()
+
+title Container Diagram - ISA Frontend
+
+Person(user, "Store Employee")
+
+System_Boundary(isa, "ISA Frontend") {
+    Container(spa, "SPA", "Angular 20", "Single-page application")
+    Container(pwa, "Service Worker", "Workbox", "Offline capability")
+    ContainerDb(storage, "Local Storage", "IndexedDB", "Offline data cache")
+}
+
+System_Ext(api, "ISA API Gateway")
+System_Ext(cdn, "CDN", "Static assets")
+
+Rel(user, spa, "Uses", "Browser")
+Rel(spa, pwa, "Registers")
+Rel(pwa, storage, "Caches data")
+Rel(spa, api, "API calls", "REST/JSON")
+Rel(spa, cdn, "Loads assets", "HTTPS")
+
+@enduml
+```
+
+### Container Types
+- **Container**: Application or service
+- **ContainerDb**: Database or data store
+- **ContainerQueue**: Message queue
+
+## Level 3: Component Diagram
+
+Shows the internal structure of a container.
+
+### PlantUML Template
+```plantuml
+@startuml C4_Component
+!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
+
+LAYOUT_WITH_LEGEND()
+
+title Component Diagram - OMS Feature Module
+
+Container_Boundary(oms, "OMS Feature") {
+    Component(list, "Order List", "Angular Component", "Displays orders")
+    Component(detail, "Order Detail", "Angular Component", "Order management")
+    Component(store, "Order Store", "NgRx Signal Store", "State management")
+    Component(api, "Order API Service", "Angular Service", "API communication")
+}
+
+ContainerDb_Ext(backend, "OMS Backend API")
+
+Rel(list, store, "Reads state")
+Rel(detail, store, "Reads/writes state")
+Rel(store, api, "Fetches data")
+Rel(api, backend, "HTTP requests")
+
+@enduml
+```
+
+## ISA-Frontend Domain Components
+
+### Suggested Component Structure
+
+```
+libs/[domain]/
+├── feature/           → Component diagrams
+│   └── [feature]/
+├── data-access/       → Store/API components
+│   └── [store]/
+├── ui/                → Presentational components
+│   └── [component]/
+└── util/              → Utility components
+    └── [util]/
+```
+
+### Domain Boundaries
+- **CRM**: Customer management, loyalty
+- **OMS**: Order management, returns
+- **Checkout**: Payment, transactions
+- **Remission**: Product returns processing
+- **Catalogue**: Product information
+
+## Mermaid Alternative
+
+```mermaid
+C4Context
+    title System Context - ISA Frontend
+
+    Person(user, "Store Employee", "Daily operations")
+
+    System(isa, "ISA Frontend", "Angular SPA")
+
+    System_Ext(backend, "Backend Services")
+    System_Ext(auth, "Auth Service")
+
+    Rel(user, isa, "Uses")
+    Rel(isa, backend, "API calls")
+    Rel(isa, auth, "Authenticates")
+```
+
+## Best Practices
+
+1. **One diagram per level** - Don't mix abstraction levels
+2. **Consistent naming** - Use same names across diagrams
+3. **Show key relationships** - Not every possible connection
+4. **Include legends** - Explain notation
+5. **Keep it simple** - 5-20 elements per diagram max

.claude/skills/architecture-enforcer/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: architecture-enforcer
-description: This skill should be used when validating import boundaries and architectural rules in the ISA-Frontend monorepo. It checks for circular dependencies, layer violations (Feature→Feature), domain violations (OMS→Remission), and relative imports. Use this skill when the user wants to check architecture, mentions "validate boundaries", "check imports", or needs dependency analysis.
+description: This skill should be used when checking architecture compliance, validating layer boundaries (Feature→Feature violations), detecting circular dependencies, or user mentions "check architecture", "validate boundaries", "check imports". Validates import boundaries and architectural rules in ISA-Frontend monorepo.
 ---
 
 # Architecture Enforcer

.claude/skills/circular-dependency-resolver/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: circular-dependency-resolver
-description: This skill should be used when detecting and resolving circular dependencies in the ISA-Frontend monorepo. It uses graph algorithms to find A→B→C→A cycles, categorizes by severity, provides multiple fix strategies (DI, interface extraction, shared code), and validates fixes. Use this skill when the user mentions "circular dependencies", "dependency cycles", or has build/runtime issues from circular imports.
+description: This skill should be used when build fails with circular import warnings, user mentions "circular dependencies" or "dependency cycles", or fixing A→B→C→A import cycles. Detects and resolves circular dependencies using graph algorithms with DI, interface extraction, and shared code fix strategies.
 ---
 
 # Circular Dependency Resolver

.claude/skills/css-keyframes-animations/SKILL.md

@@ -0,0 +1,392 @@
+---
+name: css-keyframes-animations
+description: This skill should be used when writing or reviewing CSS animations in Angular components. Use when creating entrance/exit animations, implementing @keyframes instead of @angular/animations, applying timing functions and fill modes, creating staggered animations, or ensuring GPU-accelerated performance. Essential for modern Angular 20+ components using animate.enter/animate.leave directives and converting legacy Angular animations to native CSS.
+---
+
+# CSS @keyframes Animations
+
+## Overview
+
+Implement native CSS @keyframes animations for Angular applications, replacing @angular/animations with GPU-accelerated, zero-bundle-size alternatives. This skill provides comprehensive guidance on creating performant entrance/exit animations, staggered effects, and proper timing configurations.
+
+## When to Use This Skill
+
+Apply this skill when:
+- **Writing Angular components** with entrance/exit animations
+- **Converting @angular/animations** to native CSS @keyframes
+- **Implementing animate.enter/animate.leave** in Angular 20+ templates
+- **Creating staggered animations** for lists or collections
+- **Debugging animation issues** (snap-back, wrong starting positions, choppy playback)
+- **Optimizing animation performance** for GPU acceleration
+- **Reviewing animation code** for accessibility and best practices
+
+## Quick Start
+
+### Basic Animation Setup
+
+1. **Define @keyframes** in component CSS:
+```css
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+```
+
+2. **Apply animation** to element:
+```css
+.element {
+  animation: fadeIn 0.3s ease-out;
+}
+```
+
+3. **Use with Angular 20+ directives**:
+```html
+@if (visible()) {
+  <div animate.enter="fade-in" animate.leave="fade-out">
+    Content
+  </div>
+}
+```
+
+### Common Pitfall: Element Snaps Back
+
+**Problem:** Element returns to original state after animation completes.
+
+**Solution:** Add `forwards` fill mode:
+```css
+.element {
+  animation: fadeOut 1s forwards;
+}
+```
+
+### Common Pitfall: Animation Conflicts with State Transitions
+
+**Problem:** Entrance animation overrides initial state transforms (e.g., stacked cards appear unstacked then jump).
+
+**Solution:** Animate only properties that don't conflict with state. Use opacity-only animations when transforms are state-driven:
+```css
+/* BAD: Overrides stacked transform */
+@keyframes cardEntrance {
+  from { transform: translateY(20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+/* GOOD: Only animates opacity, allows state transforms to apply */
+@keyframes cardEntrance {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+```
+
+## Core Principles
+
+### 1. GPU-Accelerated Properties Only
+
+**Always use** for animations:
+- `transform` (translate, rotate, scale)
+- `opacity`
+
+**Avoid animating** (triggers layout recalculation):
+- `width`, `height`
+- `top`, `left`, `right`, `bottom`
+- `margin`, `padding`
+- `font-size`
+
+### 2. Fill Modes
+
+| Fill Mode | Behavior | Use Case |
+|-----------|----------|----------|
+| `forwards` | Keep end state | Exit animations (stay invisible) |
+| `backwards` | Apply start state during delay | Entrance with delay (prevent flash) |
+| `both` | Both of above | Complex sequences |
+
+### 3. Timing Functions
+
+Choose appropriate easing for animation type:
+
+```css
+/* Entrance animations - ease-out (fast start, slow end) */
+animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+
+/* Exit animations - ease-in (slow start, fast end) */
+animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
+
+/* Bouncy overshoot effect */
+animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+```
+
+Tool: [cubic-bezier.com](https://cubic-bezier.com) for custom curves.
+
+### 4. Staggered Animations
+
+Create cascading effects using CSS custom properties:
+
+**Template:**
+```html
+@for (item of items(); track item.id; let idx = $index) {
+  <div [style.--i]="idx" class="stagger-item">
+    {{ item.name }}
+  </div>
+}
+```
+
+**CSS:**
+```css
+.stagger-item {
+  animation: fadeSlideIn 0.5s ease-out backwards;
+  animation-delay: calc(var(--i, 0) * 100ms);
+}
+```
+
+### 5. Accessibility
+
+Always respect reduced motion preferences:
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  .animated {
+    animation: none;
+    /* Or use simpler, faster animation */
+    animation-duration: 0.1s;
+  }
+}
+```
+
+## Common Animation Patterns
+
+### Fade Entrance/Exit
+
+```css
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+.fade-in { animation: fadeIn 0.3s ease-out; }
+.fade-out { animation: fadeOut 0.3s ease-in forwards; }
+```
+
+### Slide Entrance
+
+```css
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.slide-in-up { animation: slideInUp 0.3s ease-out; }
+```
+
+### Scale Entrance
+
+```css
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.scale-in { animation: scaleIn 0.2s ease-out; }
+```
+
+### Loading Spinner
+
+```css
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #3498db;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+```
+
+### Shake (Error Feedback)
+
+```css
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
+  20%, 40%, 60%, 80% { transform: translateX(5px); }
+}
+
+.error-input {
+  animation: shake 0.5s ease-in-out;
+}
+```
+
+## Angular 20+ Integration
+
+### Basic Usage with animate.enter/animate.leave
+
+```typescript
+@Component({
+  template: `
+    @if (show()) {
+      <div animate.enter="fade-in" animate.leave="fade-out">
+        Content
+      </div>
+    }
+  `,
+  styles: [`
+    .fade-in { animation: fadeIn 0.3s ease-out; }
+    .fade-out { animation: fadeOut 0.3s ease-in forwards; }
+
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+
+    @keyframes fadeOut {
+      from { opacity: 1; }
+      to { opacity: 0; }
+    }
+  `]
+})
+```
+
+### Dynamic Animation Classes
+
+```typescript
+@Component({
+  template: `
+    @if (show()) {
+      <div [animate.enter]="enterAnim()" [animate.leave]="leaveAnim()">
+        Content
+      </div>
+    }
+  `
+})
+export class DynamicAnimComponent {
+  show = signal(false);
+  enterAnim = signal('slide-in-up');
+  leaveAnim = signal('slide-out-down');
+}
+```
+
+## Debugging Animations
+
+### Common Issues
+
+| Problem | Cause | Solution |
+|---------|-------|----------|
+| Animation doesn't run | Missing duration | Add `animation-duration: 0.3s` |
+| Element snaps back | No fill mode | Add `animation-fill-mode: forwards` |
+| Wrong starting position during delay | No backwards fill | Add `animation-fill-mode: backwards` |
+| Choppy animation | Animating layout properties | Use `transform` instead |
+| State conflict (jump/snap) | Animation overrides state transforms | Animate only opacity, not transform |
+
+### Browser DevTools
+
+- **Chrome DevTools** → More Tools → Animations panel
+- **Firefox DevTools** → Inspector → Animations tab
+
+### Animation Events
+
+```typescript
+element.addEventListener('animationend', (e) => {
+  console.log('Animation completed:', e.animationName);
+  // Clean up, remove element, etc.
+});
+```
+
+## Resources
+
+### references/keyframes-guide.md
+
+Comprehensive deep-dive covering:
+- Complete @keyframes syntax reference
+- Detailed timing functions and cubic-bezier curves
+- Advanced techniques (direction, play-state, @starting-style)
+- Performance optimization strategies
+- Extensive common patterns library
+- Debugging techniques and troubleshooting
+
+**When to reference:** Complex animation requirements, custom easing curves, advanced techniques, performance optimization, or learning comprehensive details.
+
+### assets/animations.css
+
+Ready-to-use CSS file with common animation patterns:
+- Fade animations (in/out)
+- Slide animations (up/down/left/right)
+- Scale animations (in/out)
+- Utility animations (spin, shimmer, shake, breathe, attention-pulse)
+- Toast/notification animations
+- Accessibility (@media prefers-reduced-motion)
+
+**Usage:** Copy this file to project and import in component styles or global styles:
+
+```css
+@import 'path/to/animations.css';
+```
+
+Then use classes directly:
+```html
+<div animate.enter="fade-in" animate.leave="slide-out-down">
+```
+
+## Migration from @angular/animations
+
+### Before (Angular Animations)
+
+```typescript
+import { trigger, state, style, transition, animate } from '@angular/animations';
+
+@Component({
+  animations: [
+    trigger('fadeIn', [
+      transition(':enter', [
+        style({ opacity: 0 }),
+        animate('300ms ease-out', style({ opacity: 1 }))
+      ])
+    ])
+  ]
+})
+```
+
+### After (CSS @keyframes)
+
+```typescript
+@Component({
+  template: `
+    @if (show()) {
+      <div animate.enter="fade-in">Content</div>
+    }
+  `,
+  styles: [`
+    .fade-in { animation: fadeIn 0.3s ease-out; }
+
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+  `]
+})
+```
+
+**Benefits:**
+- Zero JavaScript bundle size (~60KB savings)
+- GPU hardware acceleration
+- Standard CSS (transferable skills)
+- Better performance

.claude/skills/css-keyframes-animations/assets/animations.css

@@ -0,0 +1,278 @@
+/**
+ * Reusable CSS @keyframes Animations
+ *
+ * Common animation patterns for Angular applications.
+ * Import this file in your component styles or global styles.
+ */
+
+/* ============================================
+   FADE ANIMATIONS
+   ============================================ */
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+.fade-in {
+  animation: fadeIn 0.3s ease-out;
+}
+
+.fade-out {
+  animation: fadeOut 0.3s ease-in;
+}
+
+/* ============================================
+   SLIDE ANIMATIONS
+   ============================================ */
+
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideOutDown {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+}
+
+@keyframes slideInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideOutUp {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideOutLeft {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideOutRight {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+}
+
+.slide-in-up { animation: slideInUp 0.3s ease-out; }
+.slide-out-down { animation: slideOutDown 0.3s ease-in; }
+.slide-in-down { animation: slideInDown 0.3s ease-out; }
+.slide-out-up { animation: slideOutUp 0.3s ease-in; }
+.slide-in-left { animation: slideInLeft 0.3s ease-out; }
+.slide-out-left { animation: slideOutLeft 0.3s ease-in; }
+.slide-in-right { animation: slideInRight 0.3s ease-out; }
+.slide-out-right { animation: slideOutRight 0.3s ease-in; }
+
+/* ============================================
+   SCALE ANIMATIONS
+   ============================================ */
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes scaleOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+
+.scale-in { animation: scaleIn 0.2s ease-out; }
+.scale-out { animation: scaleOut 0.2s ease-in; }
+
+/* ============================================
+   UTILITY ANIMATIONS
+   ============================================ */
+
+/* Loading Spinner */
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.spin {
+  animation: spin 1s linear infinite;
+}
+
+/* Skeleton Loading */
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.shimmer {
+  background: linear-gradient(
+    90deg,
+    #f0f0f0 25%,
+    #e0e0e0 50%,
+    #f0f0f0 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+/* Attention Pulse */
+@keyframes attention-pulse {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
+  }
+  50% {
+    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
+  }
+}
+
+.attention-pulse {
+  animation: attention-pulse 2s ease-in-out infinite;
+}
+
+/* Shake (Error Feedback) */
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
+  20%, 40%, 60%, 80% { transform: translateX(5px); }
+}
+
+.shake {
+  animation: shake 0.5s ease-in-out;
+}
+
+/* Breathing/Pulsing */
+@keyframes breathe {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.05);
+  }
+}
+
+.breathe {
+  animation: breathe 2s ease-in-out infinite;
+}
+
+/* ============================================
+   TOAST/NOTIFICATION ANIMATIONS
+   ============================================ */
+
+@keyframes toastIn {
+  from {
+    opacity: 0;
+    transform: translateY(100%) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes toastOut {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%) scale(0.9);
+  }
+}
+
+.toast-in {
+  animation: toastIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.toast-out {
+  animation: toastOut 0.2s ease-in forwards;
+}
+
+/* ============================================
+   ACCESSIBILITY
+   ============================================ */
+
+/* Respect user's motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

.claude/skills/css-keyframes-animations/references/keyframes-guide.md

@@ -0,0 +1,833 @@
+# CSS @keyframes Deep Dive
+
+A comprehensive guide for Angular developers transitioning from `@angular/animations` to native CSS animations.
+
+---
+
+## Table of Contents
+
+1. [Understanding @keyframes](#understanding-keyframes)
+2. [Basic Syntax](#basic-syntax)
+3. [Animation Properties](#animation-properties)
+4. [Timing Functions (Easing)](#timing-functions-easing)
+5. [Fill Modes](#fill-modes)
+6. [Advanced Techniques](#advanced-techniques)
+7. [Angular 20+ Integration](#angular-20-integration)
+8. [Common Patterns & Recipes](#common-patterns--recipes)
+9. [Performance Tips](#performance-tips)
+10. [Debugging Animations](#debugging-animations)
+
+---
+
+## Understanding @keyframes
+
+The `@keyframes` at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (waypoints) along the animation. Unlike transitions (which only animate between two states), keyframes let you define multiple intermediate steps.
+
+### How It Differs from @angular/animations
+
+| @angular/animations | Native CSS @keyframes |
+|---------------------|----------------------|
+| ~60KB JavaScript bundle | Zero JS overhead |
+| CPU-based rendering | GPU hardware acceleration |
+| Angular-specific syntax | Standard CSS (transferable skills) |
+| `trigger()`, `state()`, `animate()` | `@keyframes` + CSS classes |
+
+---
+
+## Basic Syntax
+
+### The @keyframes Rule
+
+```css
+@keyframes animation-name {
+  from {
+    /* Starting styles (same as 0%) */
+  }
+  to {
+    /* Ending styles (same as 100%) */
+  }
+}
+```
+
+### Percentage-Based Keyframes
+
+For more control, use percentages to define multiple waypoints:
+
+```css
+@keyframes bounce {
+  0% {
+    transform: translateY(0);
+  }
+  25% {
+    transform: translateY(-30px);
+  }
+  50% {
+    transform: translateY(0);
+  }
+  75% {
+    transform: translateY(-15px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+```
+
+### Combining Multiple Percentages
+
+You can apply the same styles to multiple keyframes:
+
+```css
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.05);
+  }
+}
+```
+
+### Applying the Animation
+
+```css
+.element {
+  animation: bounce 1s ease-in-out infinite;
+}
+```
+
+---
+
+## Animation Properties
+
+### Individual Properties
+
+| Property | Description | Example |
+|----------|-------------|---------|
+| `animation-name` | Name of the @keyframes | `animation-name: bounce;` |
+| `animation-duration` | How long one cycle takes | `animation-duration: 2s;` |
+| `animation-timing-function` | Speed curve (easing) | `animation-timing-function: ease-in;` |
+| `animation-delay` | Wait before starting | `animation-delay: 500ms;` |
+| `animation-iteration-count` | How many times to run | `animation-iteration-count: 3;` or `infinite` |
+| `animation-direction` | Forward, reverse, or alternate | `animation-direction: alternate;` |
+| `animation-fill-mode` | Styles before/after animation | `animation-fill-mode: forwards;` |
+| `animation-play-state` | Pause or play | `animation-play-state: paused;` |
+
+### Shorthand Syntax
+
+```css
+/* animation: name duration timing-function delay iteration-count direction fill-mode play-state */
+.element {
+  animation: slideIn 0.5s ease-out 0.2s 1 normal forwards running;
+}
+```
+
+**Minimum required:** name and duration
+
+```css
+.element {
+  animation: fadeIn 1s;
+}
+```
+
+### Multiple Animations
+
+Apply multiple animations to a single element:
+
+```css
+.element {
+  animation:
+    fadeIn 0.5s ease-out,
+    slideUp 0.5s ease-out,
+    pulse 2s ease-in-out 0.5s infinite;
+}
+```
+
+---
+
+## Timing Functions (Easing)
+
+The timing function controls how the animation progresses over time—where it speeds up and slows down.
+
+### Keyword Values
+
+| Keyword | Cubic-Bezier Equivalent | Description |
+|---------|------------------------|-------------|
+| `linear` | `cubic-bezier(0, 0, 1, 1)` | Constant speed |
+| `ease` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Default: slow start, fast middle, slow end |
+| `ease-in` | `cubic-bezier(0.42, 0, 1, 1)` | Slow start, fast end |
+| `ease-out` | `cubic-bezier(0, 0, 0.58, 1)` | Fast start, slow end |
+| `ease-in-out` | `cubic-bezier(0.42, 0, 0.58, 1)` | Slow start and end |
+
+### Custom Cubic-Bezier
+
+Create custom easing curves with `cubic-bezier(x1, y1, x2, y2)`:
+
+```css
+/* Bouncy overshoot effect */
+.element {
+  animation-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
+}
+
+/* Smooth deceleration */
+.element {
+  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
+}
+```
+
+**Tool:** Use [cubic-bezier.com](https://cubic-bezier.com) to visualize and create custom curves.
+
+### Popular Easing Functions
+
+```css
+/* Ease Out Quart - Great for enter animations */
+cubic-bezier(0.25, 1, 0.5, 1)
+
+/* Ease In Out Cubic - Smooth state changes */
+cubic-bezier(0.65, 0, 0.35, 1)
+
+/* Ease Out Back - Slight overshoot */
+cubic-bezier(0.34, 1.56, 0.64, 1)
+
+/* Ease In Out Back - Overshoot both ends */
+cubic-bezier(0.68, -0.6, 0.32, 1.6)
+```
+
+### Steps Function
+
+For frame-by-frame animations (like sprite sheets):
+
+```css
+/* 6 discrete steps */
+.sprite {
+  animation: walk 1s steps(6) infinite;
+}
+
+/* Step positions */
+steps(4, jump-start)  /* Jump at start of each interval */
+steps(4, jump-end)    /* Jump at end of each interval (default) */
+steps(4, jump-both)   /* Jump at both ends */
+steps(4, jump-none)   /* No jump at ends */
+```
+
+### Timing Function Per Keyframe
+
+Apply different easing to different segments:
+
+```css
+@keyframes complexMove {
+  0% {
+    transform: translateX(0);
+    animation-timing-function: ease-out;
+  }
+  50% {
+    transform: translateX(100px);
+    animation-timing-function: ease-in;
+  }
+  100% {
+    transform: translateX(200px);
+  }
+}
+```
+
+**Important:** The timing function applies to each step individually, not the entire animation.
+
+---
+
+## Fill Modes
+
+Fill modes control what styles apply before and after the animation runs.
+
+### Values
+
+| Value | Before Animation | After Animation |
+|-------|-----------------|-----------------|
+| `none` | Original styles | Original styles |
+| `forwards` | Original styles | **Last keyframe styles** |
+| `backwards` | **First keyframe styles** | Original styles |
+| `both` | **First keyframe styles** | **Last keyframe styles** |
+
+### Common Problem: Element Snaps Back
+
+```css
+/* BAD: Element disappears then reappears after animation */
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+.element {
+  animation: fadeOut 1s; /* Element snaps back to opacity: 1 */
+}
+
+/* GOOD: Element stays invisible */
+.element {
+  animation: fadeOut 1s forwards;
+}
+```
+
+### Backwards Fill Mode (for delays)
+
+```css
+@keyframes slideIn {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/* Without backwards: element visible at original position during delay */
+/* With backwards: element starts at first keyframe position during delay */
+.element {
+  animation: slideIn 0.5s ease-out 1s backwards;
+}
+```
+
+---
+
+## Advanced Techniques
+
+### Animation Direction
+
+Control playback direction:
+
+```css
+animation-direction: normal;           /* 0% → 100% */
+animation-direction: reverse;          /* 100% → 0% */
+animation-direction: alternate;        /* 0% → 100% → 0% */
+animation-direction: alternate-reverse; /* 100% → 0% → 100% */
+```
+
+**Use Case:** Breathing/pulsing effects
+
+```css
+@keyframes breathe {
+  from { transform: scale(1); }
+  to { transform: scale(1.1); }
+}
+
+.element {
+  animation: breathe 2s ease-in-out infinite alternate;
+}
+```
+
+### Staggered Animations
+
+Create cascading effects with animation-delay:
+
+```css
+.item { animation: fadeSlideIn 0.5s ease-out backwards; }
+.item:nth-child(1) { animation-delay: 0ms; }
+.item:nth-child(2) { animation-delay: 100ms; }
+.item:nth-child(3) { animation-delay: 200ms; }
+.item:nth-child(4) { animation-delay: 300ms; }
+
+/* Or use CSS custom properties */
+.item {
+  animation: fadeSlideIn 0.5s ease-out backwards;
+  animation-delay: calc(var(--i, 0) * 100ms);
+}
+```
+
+In your template:
+
+```html
+<div class="item" style="--i: 0">First</div>
+<div class="item" style="--i: 1">Second</div>
+<div class="item" style="--i: 2">Third</div>
+```
+
+### @starting-style (Modern CSS)
+
+Define styles for when an element first enters the DOM:
+
+```css
+.modal {
+  opacity: 1;
+  transform: scale(1);
+  transition: opacity 0.3s, transform 0.3s;
+
+  @starting-style {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+```
+
+### Animating Auto Height
+
+Use CSS Grid for height: auto animations:
+
+```css
+.accordion-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.3s ease-out;
+}
+
+.accordion-content.open {
+  grid-template-rows: 1fr;
+}
+
+.accordion-content > div {
+  overflow: hidden;
+}
+```
+
+### Pause/Play with CSS
+
+```css
+.element {
+  animation: spin 2s linear infinite;
+  animation-play-state: running;
+}
+
+.element:hover {
+  animation-play-state: paused;
+}
+
+/* Or with a class */
+.element.paused {
+  animation-play-state: paused;
+}
+```
+
+---
+
+## Angular 20+ Integration
+
+### Using animate.enter and animate.leave
+
+Angular 20.2+ provides `animate.enter` and `animate.leave` to apply CSS classes when elements enter/leave the DOM.
+
+```typescript
+@Component({
+  selector: 'app-example',
+  template: `
+    @if (isVisible()) {
+      <div animate.enter="fade-in" animate.leave="fade-out">
+        Content here
+      </div>
+    }
+    <button (click)="toggle()">Toggle</button>
+  `,
+  styles: [`
+    .fade-in {
+      animation: fadeIn 0.3s ease-out;
+    }
+
+    .fade-out {
+      animation: fadeOut 0.3s ease-in;
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+
+    @keyframes fadeOut {
+      from { opacity: 1; }
+      to { opacity: 0; }
+    }
+  `]
+})
+export class ExampleComponent {
+  isVisible = signal(false);
+  toggle() { this.isVisible.update(v => !v); }
+}
+```
+
+### Dynamic Animation Classes
+
+```typescript
+@Component({
+  template: `
+    @if (show()) {
+      <div [animate.enter]="enterAnimation()" [animate.leave]="leaveAnimation()">
+        Dynamic animations!
+      </div>
+    }
+  `
+})
+export class DynamicAnimComponent {
+  show = signal(false);
+  enterAnimation = signal('slide-in-right');
+  leaveAnimation = signal('slide-out-left');
+}
+```
+
+### Reusable Animation CSS File
+
+Create a shared `animations.css`:
+
+```css
+/* animations.css */
+
+/* Fade animations */
+.fade-in { animation: fadeIn 0.3s ease-out; }
+.fade-out { animation: fadeOut 0.3s ease-in; }
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+/* Slide animations */
+.slide-in-up { animation: slideInUp 0.3s ease-out; }
+.slide-out-down { animation: slideOutDown 0.3s ease-in; }
+
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideOutDown {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+}
+
+/* Scale animations */
+.scale-in { animation: scaleIn 0.2s ease-out; }
+.scale-out { animation: scaleOut 0.2s ease-in; }
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes scaleOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+```
+
+Import in `styles.css` or `angular.json`:
+
+```css
+@import 'animations.css';
+```
+
+---
+
+## Common Patterns & Recipes
+
+### Loading Spinner
+
+```css
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #3498db;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+```
+
+### Skeleton Loading
+
+```css
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    #f0f0f0 25%,
+    #e0e0e0 50%,
+    #f0f0f0 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+```
+
+### Attention Pulse
+
+```css
+@keyframes attention-pulse {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
+  }
+  50% {
+    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
+  }
+}
+
+.notification-badge {
+  animation: attention-pulse 2s ease-in-out infinite;
+}
+```
+
+### Shake (Error Feedback)
+
+```css
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
+  20%, 40%, 60%, 80% { transform: translateX(5px); }
+}
+
+.error-input {
+  animation: shake 0.5s ease-in-out;
+}
+```
+
+### Slide Down Menu
+
+```css
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.dropdown-menu {
+  animation: slideDown 0.2s ease-out forwards;
+}
+```
+
+### Toast Notification
+
+```css
+@keyframes toastIn {
+  from {
+    opacity: 0;
+    transform: translateY(100%) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes toastOut {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%) scale(0.9);
+  }
+}
+
+.toast {
+  animation: toastIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.toast.leaving {
+  animation: toastOut 0.2s ease-in forwards;
+}
+```
+
+---
+
+## Performance Tips
+
+### Use Transform and Opacity
+
+These properties are GPU-accelerated and don't trigger layout:
+
+```css
+/* GOOD - GPU accelerated */
+@keyframes good {
+  from { transform: translateX(0); opacity: 0; }
+  to { transform: translateX(100px); opacity: 1; }
+}
+
+/* AVOID - Triggers layout recalculation */
+@keyframes avoid {
+  from { left: 0; width: 100px; }
+  to { left: 100px; width: 200px; }
+}
+```
+
+### Use will-change Sparingly
+
+```css
+.element {
+  will-change: transform, opacity;
+}
+
+/* Remove after animation */
+.element.animation-complete {
+  will-change: auto;
+}
+```
+
+### Respect Reduced Motion
+
+```css
+@keyframes fadeSlide {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.element {
+  animation: fadeSlide 0.3s ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .element {
+    animation: none;
+    /* Or use a simpler fade */
+    animation: fadeIn 0.1s ease-out;
+  }
+}
+```
+
+### Avoid Animating Layout Properties
+
+Properties that trigger layout (reflow):
+
+- `width`, `height`
+- `top`, `left`, `right`, `bottom`
+- `margin`, `padding`
+- `font-size`
+- `border-width`
+
+Use `transform: scale()` instead of `width/height` when possible.
+
+---
+
+## Debugging Animations
+
+### Browser DevTools
+
+1. **Chrome DevTools** → More Tools → Animations
+   - Pause, slow down, or step through animations
+   - Inspect timing curves
+
+2. **Firefox** → Inspector → Animations tab
+   - Visual timeline of all animations
+
+### Force Slow Motion
+
+```css
+/* Temporarily add to debug */
+* {
+  animation-duration: 3s !important;
+}
+```
+
+### Animation Events in JavaScript
+
+```typescript
+element.addEventListener('animationstart', (e) => {
+  console.log('Started:', e.animationName);
+});
+
+element.addEventListener('animationend', (e) => {
+  console.log('Ended:', e.animationName);
+  // Clean up class, remove element, etc.
+});
+
+element.addEventListener('animationiteration', (e) => {
+  console.log('Iteration:', e.animationName);
+});
+```
+
+### Common Issues
+
+| Problem | Solution |
+|---------|----------|
+| Animation not running | Check `animation-duration` is > 0 |
+| Element snaps back | Add `animation-fill-mode: forwards` |
+| Animation starts wrong | Use `animation-fill-mode: backwards` with delay |
+| Choppy animation | Use `transform` instead of layout properties |
+| Animation restarts on state change | Ensure Angular doesn't recreate the element |
+
+---
+
+## Quick Reference Card
+
+```css
+/* Basic setup */
+@keyframes name {
+  from { /* start */ }
+  to { /* end */ }
+}
+
+.element {
+  animation: name 0.3s ease-out forwards;
+}
+
+/* Angular 20+ */
+<div animate.enter="fade-in" animate.leave="fade-out">
+
+/* Shorthand order */
+animation: name duration timing delay count direction fill-mode state;
+
+/* Common timing functions */
+ease-out: cubic-bezier(0, 0, 0.58, 1)      /* Enter animations */
+ease-in: cubic-bezier(0.42, 0, 1, 1)       /* Exit animations */
+ease-in-out: cubic-bezier(0.42, 0, 0.58, 1) /* State changes */
+
+/* Fill modes */
+forwards  → Keep end state
+backwards → Apply start state during delay
+both      → Both of the above
+```
+
+---
+
+## Resources
+
+- [MDN CSS Animations Guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)
+- [Angular Animation Migration Guide](https://angular.dev/guide/animations/migration)
+- [Cubic Bezier Tool](https://cubic-bezier.com)
+- [Easing Functions Cheat Sheet](https://easings.net)
+- [Josh W. Comeau's Keyframe Guide](https://www.joshwcomeau.com/animation/keyframe-animations/)

.claude/skills/git-workflow/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: git-workflow
-description: Enforces ISA-Frontend project Git workflow conventions including branch naming, conventional commits, and PR creation against develop branch
+description: This skill should be used when creating branches, writing commits, or creating pull requests. Enforces ISA-Frontend Git conventions including feature/task-id-name branch format, conventional commits without co-author tags, and PRs targeting develop branch.
 ---
 
 # Git Workflow Skill

.claude/skills/html-template/SKILL.md

@@ -19,6 +19,7 @@ Use this skill when:
 **Works seamlessly with:**
 - **[angular-template](../angular-template/SKILL.md)** - Angular template syntax, control flow, and modern patterns
 - **[tailwind](../tailwind/SKILL.md)** - ISA design system styling for visual design
+- **[logging](../logging/SKILL.md)** - MANDATORY logging in all Angular components using `@isa/core/logging`
 
 ## Overview
 

.claude/skills/library-scaffolder/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: library-scaffolder
-description: This skill should be used when creating new Angular libraries in the ISA-Frontend monorepo. It handles Nx library generation with proper naming conventions, Vitest configuration with JUnit/Cobertura reporters, path alias setup, and validation. Use this skill when the user wants to create a new library, scaffold a feature/data-access/ui/util library, or requests "new library" creation.
+description: This skill should be used when creating feature/data-access/ui/util libraries or user says "create library", "new library", "scaffold library". Creates new Angular libraries in ISA-Frontend monorepo with proper Nx configuration, Vitest setup, architectural tags, and path aliases.
 ---
 
 # Library Scaffolder
@@ -51,6 +51,7 @@ npx nx generate @nx/angular:library \
   --name=[domain]-[layer]-[name] \
   --directory=libs/[domain]/[layer]/[name] \
   --importPath=@isa/[domain]/[layer]/[name] \
+  --prefix=[domain] \
   --style=css \
   --unitTestRunner=vitest \
   --standalone=true \
@@ -69,13 +70,53 @@ npx nx generate @nx/angular:library \
   --name=[domain]-[layer]-[name] \
   --directory=libs/[domain]/[layer]/[name] \
   --importPath=@isa/[domain]/[layer]/[name] \
+  --prefix=[domain] \
   --style=css \
   --unitTestRunner=vitest \
   --standalone=true \
   --skipTests=false
 ```
 
-### Step 4: Configure Vitest with JUnit and Cobertura
+### Step 4: Add Architectural Tags
+
+**CRITICAL**: Immediately after library generation, add proper tags to `project.json` for `@nx/enforce-module-boundaries`.
+
+Run the tagging script:
+```bash
+node scripts/add-library-tags.js
+```
+
+Or manually add tags to `libs/[domain]/[layer]/[name]/project.json`:
+
+```json
+{
+  "name": "[domain]-[layer]-[name]",
+  "tags": [
+    "scope:[domain]",
+    "type:[layer]"
+  ]
+}
+```
+
+**Tag Rules:**
+- **Scope tag**: `scope:[domain]` (e.g., `scope:oms`, `scope:crm`, `scope:ui`, `scope:shared`)
+- **Type tag**: `type:[layer]` (e.g., `type:feature`, `type:data-access`, `type:ui`, `type:util`)
+
+**Examples:**
+- `libs/oms/feature/return-search` → `["scope:oms", "type:feature"]`
+- `libs/ui/buttons` → `["scope:ui", "type:ui"]`
+- `libs/shared/scanner` → `["scope:shared", "type:shared"]`
+- `libs/core/auth` → `["scope:core", "type:core"]`
+
+**Verification:**
+```bash
+# Check tags were added
+cat libs/[domain]/[layer]/[name]/project.json | jq '.tags'
+
+# Should output: ["scope:[domain]", "type:[layer]"]
+```
+
+### Step 5: Configure Vitest with JUnit and Cobertura
 
 Update `libs/[path]/vite.config.mts`:
 
@@ -113,7 +154,7 @@ defineConfig(() => ({
 
 **Critical**: Adjust path depth based on library location.
 
-### Step 5: Verify Configuration
+### Step 6: Verify Configuration
 
 1. **Check Path Alias**
    - Verify `tsconfig.base.json` was updated
@@ -128,7 +169,7 @@ defineConfig(() => ({
    - JUnit XML: `testresults/junit-[library-name].xml`
    - Cobertura XML: `coverage/libs/[path]/cobertura-coverage.xml`
 
-### Step 6: Create Library README
+### Step 7: Create Library README
 
 Use `docs-researcher` to find similar library READMEs, then create comprehensive documentation including:
 - Overview and purpose
@@ -137,7 +178,7 @@ Use `docs-researcher` to find similar library READMEs, then create comprehensive
 - Usage examples
 - Testing information (Vitest + Angular Testing Utilities)
 
-### Step 7: Update Library Reference
+### Step 8: Update Library Reference
 
 Add entry to `docs/library-reference.md` under appropriate domain:
 
@@ -150,10 +191,10 @@ Add entry to `docs/library-reference.md` under appropriate domain:
 [Brief description]
 ```
 
-### Step 8: Run Full Validation
+### Step 9: Run Full Validation
 
 ```bash
-# Lint
+# Lint (includes boundary checks)
 npx nx lint [library-name]
 
 # Test with coverage
@@ -166,7 +207,7 @@ npx nx build [library-name]
 npx nx graph --focus=[library-name]
 ```
 
-### Step 9: Generate Creation Report
+### Step 10: Generate Creation Report
 
 ```
 Library Created Successfully
@@ -181,6 +222,7 @@ Import Alias: @isa/[domain]/[layer]/[name]
 Test Framework: Vitest with Angular Testing Utilities
 Style: CSS
 Standalone: Yes
+Tags: scope:[domain], type:[layer]
 JUnit Reporter: ✅ testresults/junit-[library-name].xml
 Cobertura Coverage: ✅ coverage/libs/[path]/cobertura-coverage.xml
 
@@ -193,12 +235,18 @@ import { Component } from '@isa/[domain]/[layer]/[name]';
 npx nx test [library-name] --skip-nx-cache
 npx nx test [library-name] --coverage.enabled=true --skip-nx-cache
 
+🏗️ Architecture Compliance
+--------------------------
+Tags enforce module boundaries via @nx/enforce-module-boundaries
+Run lint to check for violations: npx nx lint [library-name]
+
 📝 Next Steps
 -------------
 1. Develop library features
 2. Write tests using Vitest + Angular Testing Utilities
 3. Add E2E attributes (data-what, data-which) to templates
 4. Update README with usage examples
+5. Follow architecture rules (see eslint.config.js for constraints)
 ```
 
 ## Error Handling
@@ -220,4 +268,8 @@ npx nx test [library-name] --coverage.enabled=true --skip-nx-cache
 - docs/guidelines/testing.md (Vitest, JUnit, Cobertura sections)
 - docs/library-reference.md (domain patterns)
 - CLAUDE.md (Library Organization, Testing Framework sections)
+- eslint.config.js (@nx/enforce-module-boundaries configuration)
+- scripts/add-library-tags.js (automatic tagging script)
+- .claude/skills/architecture-enforcer (boundary validation)
 - Nx Angular Library Generator: https://nx.dev/nx-api/angular/generators/library
+- Nx Enforce Module Boundaries: https://nx.dev/nx-api/eslint-plugin/documents/enforce-module-boundaries

.claude/skills/logging/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: logging-helper
+name: logging
 description: This skill should be used when working with Angular components, directives, services, pipes, guards, or TypeScript classes. Logging is MANDATORY in all Angular files. Implements @isa/core/logging with logger() factory pattern, appropriate log levels, lazy evaluation for performance, error handling, and avoids console.log and common mistakes.
 ---
 

.claude/skills/ngrx-resource-api/SKILL.md

@@ -0,0 +1,287 @@
+---
+name: ngrx-resource-api
+description: This skill should be used when implementing Angular's Resource API with NgRx Signal Store for reactive data management. Use when creating signal stores that load data reactively, need automatic race condition prevention, or require declarative resource management without RxJS. Applies to data-access libraries, feature stores with API integration, and components needing reactive filtering or pagination.
+---
+
+# NgRx Resource API
+
+## Overview
+
+This skill enables integration of Angular's Resource API with NgRx Signal Store to create reactive data flows without RxJS while automatically preventing race conditions. The Resource API handles concurrent request management declaratively, eliminating manual `switchMap` or `takeUntilDestroyed` patterns.
+
+## Core Architectural Concepts
+
+### Reactive Flow Graph
+
+Establish three clear interaction points in the store:
+
+1. **Filter signals trigger resource loading** - Parameter changes automatically reload resources
+2. **Methods explicitly invoke operations** - Use `signalMethod` for user-triggered actions
+3. **Computed signals derive view models** - Transform loaded data for component consumption
+
+### The withProps Pattern for Dependency Injection
+
+Inject services via `withProps` with underscore-prefixed properties to mark them as internal implementation details:
+
+```typescript
+withProps(() => ({
+  _dataService: inject(DataService),
+  _notificationService: inject(ToastService),
+}))
+```
+
+**Benefits:**
+- Centralizes dependency injection in one location
+- Clear distinction between internal (prefixed) and public properties
+- Services available to all subsequent feature sections
+
+## Implementation Steps
+
+### Step 1: Inject Services with withProps
+
+Create the initial `withProps` section to inject required services:
+
+```typescript
+export const MyStore = signalStore(
+  withProps(() => ({
+    _dataService: inject(DataService),
+    _toastService: inject(ToastService),
+  })),
+  // ... additional features
+);
+```
+
+**Naming convention:** Prefix all injected services with underscore (`_`) to indicate internal use.
+
+### Step 2: Define Filter State
+
+Add state properties that will serve as resource parameters:
+
+```typescript
+withState({
+  filter: {
+    searchTerm: '',
+    category: '',
+  } as MyFilter,
+})
+```
+
+### Step 3: Configure Resources
+
+In a subsequent `withProps` section, create resources that reference the injected services and state:
+
+```typescript
+withProps((store) => ({
+  _itemsResource: resource({
+    params: store.filter,
+    loader: (loaderParams) => {
+      const filter = loaderParams.params;
+      const abortSignal = loaderParams.abortSignal;
+      return store._dataService.loadItems(filter, abortSignal);
+    }
+  })
+}))
+```
+
+**Key points:**
+- Resources automatically reload when `params` signal changes
+- `abortSignal` enables automatic cancellation of in-flight requests
+- Loader must return a Promise (use `.findPromise()` if service returns Observable)
+
+### Step 4: Expose Read-Only Resources (Optional)
+
+If the resource should be accessible to consumers, expose it as read-only:
+
+```typescript
+withProps((store) => ({
+  itemsResource: store._itemsResource.asReadonly(),
+}))
+```
+
+**Pattern:** Internal resources use underscore prefix, public versions are read-only without prefix.
+
+### Step 5: Create Signal Methods for Updates
+
+Use `signalMethod` for actions that update state and trigger resource reloads:
+
+```typescript
+withMethods((store) => ({
+  updateFilter: signalMethod<MyFilter>((filter) => {
+    patchState(store, { filter });
+  }),
+
+  refresh: () => {
+    store._itemsResource.reload();
+  }
+}))
+```
+
+**Important:** `signalMethod` implementations are **untracked by convention** - they don't re-execute when signals change. This provides explicit control flow.
+
+### Step 6: Add Error Handling
+
+Use `withHooks` to react to resource errors:
+
+```typescript
+withHooks({
+  onInit: (store) => {
+    effect(() => {
+      const error = store._itemsResource.error();
+      if (error) {
+        store._toastService.show('Error: ' + getMessage(error));
+      }
+    });
+  }
+})
+```
+
+**Pattern:** Error effects should be read-only - they observe errors and trigger side effects, but don't modify state.
+
+## Common Patterns
+
+### Template Integration with linkedSignal
+
+For two-way form binding that synchronizes with the store:
+
+```typescript
+export class MyComponent {
+  #store = inject(MyStore);
+
+  // Create linked signal for form field
+  searchTerm = linkedSignal(() => this.#store.filter().searchTerm);
+
+  // Combine form fields into filter object
+  #linkedFilter = computed(() => ({
+    searchTerm: this.searchTerm(),
+    // ... other fields
+  }));
+
+  constructor() {
+    // Sync form changes back to store
+    this.#store.updateFilter(this.#linkedFilter);
+  }
+}
+```
+
+**Benefits:**
+- Two-way binding for forms
+- Automatic store synchronization
+- Type-safe filter construction
+
+### Working with Resource Data
+
+Access resource data through resource signals:
+
+```typescript
+withComputed((store) => ({
+  items: computed(() => store._itemsResource.value() ?? []),
+  isLoading: computed(() => store._itemsResource.isLoading()),
+  hasError: computed(() => store._itemsResource.hasError()),
+}))
+```
+
+**Available signals:**
+- `value()` - The loaded data (undefined while loading)
+- `isLoading()` - Loading state boolean
+- `hasError()` - Error state boolean
+- `error()` - Error object if present
+- `status()` - Overall status: 'idle' | 'loading' | 'resolved' | 'error'
+
+### Updating Resource Data Locally
+
+For temporary working copies before server writes:
+
+```typescript
+withMethods((store) => ({
+  updateLocalItem: (id: string, changes: Partial<Item>) => {
+    store._itemsResource.update((currentItems) => {
+      return currentItems.map(item =>
+        item.id === id ? { ...item, ...changes } : item
+      );
+    });
+  }
+}))
+```
+
+**Note:** This pattern feels unconventional but aligns with maintaining temporary working copies before server persistence.
+
+### Multiple Resources in One Store
+
+Combine multiple resources for complex data requirements:
+
+```typescript
+withProps((store) => ({
+  _itemsResource: resource({
+    params: store.filter,
+    loader: (params) => store._dataService.loadItems(params.params, params.abortSignal)
+  }),
+
+  _detailsResource: resource({
+    params: store.selectedId,
+    loader: (params) => {
+      if (!params.params) return Promise.resolve(null);
+      return store._dataService.loadDetails(params.params, params.abortSignal);
+    }
+  })
+}))
+```
+
+**Pattern:** Each resource has independent params and loading state, but can share service instances.
+
+## Important Considerations
+
+### Race Condition Prevention
+
+The Resource API automatically handles race conditions:
+- New requests automatically cancel pending requests
+- No need for `switchMap`, `takeUntilDestroyed`, or manual abort handling
+- Declarative parameter changes trigger clean cancellation
+
+### Untracked Signal Methods
+
+`signalMethod` implementations deliberately skip reactive tracking:
+- Provides explicit, predictable control flow
+- Prevents unexpected re-executions from signal changes
+- Makes side effects obvious at call sites
+
+### Loader Function Requirements
+
+Loaders must:
+- Return a `Promise` (not Observable)
+- Accept and pass through the `abortSignal` to enable cancellation
+- Handle the signal in the underlying HTTP call
+
+**Converting Observables:**
+```typescript
+loader: (params) => {
+  return firstValueFrom(
+    this._service.load$(params.params)
+      .pipe(takeUntilDestroyed(this._destroyRef))
+  );
+}
+```
+
+### Resource Lifecycle
+
+Resources maintain their own state machine:
+1. **Idle** - Initial state before first load
+2. **Loading** - Request in progress
+3. **Resolved** - Data loaded successfully
+4. **Error** - Request failed
+
+State transitions automatically trigger reactive updates to dependent computeds and effects.
+
+## When to Use This Pattern
+
+**Use Resource API with Signal Store when:**
+- Loading data based on reactive filter/search parameters
+- Need automatic race condition handling for concurrent requests
+- Want declarative data loading without RxJS subscriptions
+- Building stores with frequently changing query parameters
+- Implementing pagination, filtering, or search features
+
+**Consider alternatives when:**
+- Simple one-time data loads (use `rxMethod` or direct service calls)
+- Complex Observable chains with multiple operators needed
+- Need fine-grained control over request timing/caching
+- Working with WebSocket or SSE streams (use `rxMethod` instead)

.claude/skills/test-migration-specialist/references/migration-patterns.md

@@ -0,0 +1,346 @@
+# Jest to Vitest Migration Patterns
+
+## Overview
+
+This reference provides syntax mappings and patterns for migrating tests from Jest (with Spectator) to Vitest (with Angular Testing Library).
+
+## Configuration Migration
+
+### Jest Config → Vitest Config
+
+**Before (jest.config.ts):**
+```typescript
+export default {
+  displayName: 'my-lib',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../coverage/libs/my-lib',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular',
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+  ],
+};
+```
+
+**After (vitest.config.ts):**
+```typescript
+import { defineConfig } from 'vitest/config';
+import angular from '@analogjs/vite-plugin-angular';
+
+export default defineConfig({
+  plugins: [angular()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['src/test-setup.ts'],
+    include: ['**/*.spec.ts'],
+    reporters: ['default'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+    },
+  },
+});
+```
+
+### Test Setup Migration
+
+**Before (test-setup.ts - Jest):**
+```typescript
+import 'jest-preset-angular/setup-jest';
+```
+
+**After (test-setup.ts - Vitest):**
+```typescript
+import '@analogjs/vitest-angular/setup-zone';
+```
+
+## Import Changes
+
+### Test Function Imports
+
+**Before (Jest):**
+```typescript
+import { describe, it, expect, beforeEach, afterEach } from '@jest/globals';
+```
+
+**After (Vitest):**
+```typescript
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+```
+
+### Mock Imports
+
+**Before (Jest):**
+```typescript
+jest.fn()
+jest.spyOn()
+jest.mock()
+jest.useFakeTimers()
+```
+
+**After (Vitest):**
+```typescript
+vi.fn()
+vi.spyOn()
+vi.mock()
+vi.useFakeTimers()
+```
+
+## Mock Migration Patterns
+
+### Function Mocks
+
+**Before (Jest):**
+```typescript
+const mockFn = jest.fn();
+const mockFnWithReturn = jest.fn().mockReturnValue('value');
+const mockFnWithAsync = jest.fn().mockResolvedValue('async value');
+```
+
+**After (Vitest):**
+```typescript
+const mockFn = vi.fn();
+const mockFnWithReturn = vi.fn().mockReturnValue('value');
+const mockFnWithAsync = vi.fn().mockResolvedValue('async value');
+```
+
+### Spy Migration
+
+**Before (Jest):**
+```typescript
+const spy = jest.spyOn(service, 'method');
+spy.mockImplementation(() => 'mocked');
+```
+
+**After (Vitest):**
+```typescript
+const spy = vi.spyOn(service, 'method');
+spy.mockImplementation(() => 'mocked');
+```
+
+### Module Mocks
+
+**Before (Jest):**
+```typescript
+jest.mock('@isa/core/logging', () => ({
+  logger: jest.fn(() => ({
+    info: jest.fn(),
+    error: jest.fn(),
+  })),
+}));
+```
+
+**After (Vitest):**
+```typescript
+vi.mock('@isa/core/logging', () => ({
+  logger: vi.fn(() => ({
+    info: vi.fn(),
+    error: vi.fn(),
+  })),
+}));
+```
+
+## Spectator → Angular Testing Library
+
+### Component Testing
+
+**Before (Spectator):**
+```typescript
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
+
+describe('MyComponent', () => {
+  let spectator: Spectator<MyComponent>;
+  const createComponent = createComponentFactory({
+    component: MyComponent,
+    imports: [CommonModule],
+    providers: [
+      { provide: MyService, useValue: mockService },
+    ],
+  });
+
+  beforeEach(() => {
+    spectator = createComponent();
+  });
+
+  it('should render title', () => {
+    expect(spectator.query('.title')).toHaveText('Hello');
+  });
+
+  it('should handle click', () => {
+    spectator.click('.button');
+    expect(mockService.doSomething).toHaveBeenCalled();
+  });
+});
+```
+
+**After (Angular Testing Library):**
+```typescript
+import { render, screen, fireEvent } from '@testing-library/angular';
+
+describe('MyComponent', () => {
+  it('should render title', async () => {
+    await render(MyComponent, {
+      imports: [CommonModule],
+      providers: [
+        { provide: MyService, useValue: mockService },
+      ],
+    });
+
+    expect(screen.getByText('Hello')).toBeInTheDocument();
+  });
+
+  it('should handle click', async () => {
+    await render(MyComponent, {
+      providers: [{ provide: MyService, useValue: mockService }],
+    });
+
+    fireEvent.click(screen.getByRole('button'));
+    expect(mockService.doSomething).toHaveBeenCalled();
+  });
+});
+```
+
+### Query Selectors
+
+| Spectator | Angular Testing Library |
+|-----------|------------------------|
+| `spectator.query('.class')` | `screen.getByTestId()` or `screen.getByRole()` |
+| `spectator.queryAll('.class')` | `screen.getAllByRole()` |
+| `spectator.query('button')` | `screen.getByRole('button')` |
+| `spectator.query('[data-testid]')` | `screen.getByTestId()` |
+
+### Events
+
+| Spectator | Angular Testing Library |
+|-----------|------------------------|
+| `spectator.click(element)` | `fireEvent.click(element)` or `await userEvent.click(element)` |
+| `spectator.typeInElement(value, element)` | `await userEvent.type(element, value)` |
+| `spectator.blur(element)` | `fireEvent.blur(element)` |
+| `spectator.focus(element)` | `fireEvent.focus(element)` |
+
+### Service Testing
+
+**Before (Spectator):**
+```typescript
+import { createServiceFactory, SpectatorService } from '@ngneat/spectator/jest';
+
+describe('MyService', () => {
+  let spectator: SpectatorService<MyService>;
+  const createService = createServiceFactory({
+    service: MyService,
+    providers: [
+      { provide: HttpClient, useValue: mockHttp },
+    ],
+  });
+
+  beforeEach(() => {
+    spectator = createService();
+  });
+
+  it('should fetch data', () => {
+    spectator.service.getData().subscribe(data => {
+      expect(data).toEqual(expectedData);
+    });
+  });
+});
+```
+
+**After (TestBed):**
+```typescript
+import { TestBed } from '@angular/core/testing';
+
+describe('MyService', () => {
+  let service: MyService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        MyService,
+        { provide: HttpClient, useValue: mockHttp },
+      ],
+    });
+    service = TestBed.inject(MyService);
+  });
+
+  it('should fetch data', () => {
+    service.getData().subscribe(data => {
+      expect(data).toEqual(expectedData);
+    });
+  });
+});
+```
+
+## Async Testing
+
+### Observable Testing
+
+**Before (Jest):**
+```typescript
+it('should emit values', (done) => {
+  service.data$.subscribe({
+    next: (value) => {
+      expect(value).toBe(expected);
+      done();
+    },
+  });
+});
+```
+
+**After (Vitest):**
+```typescript
+import { firstValueFrom } from 'rxjs';
+
+it('should emit values', async () => {
+  const value = await firstValueFrom(service.data$);
+  expect(value).toBe(expected);
+});
+```
+
+### Timer Mocks
+
+**Before (Jest):**
+```typescript
+jest.useFakeTimers();
+service.startTimer();
+jest.advanceTimersByTime(1000);
+expect(callback).toHaveBeenCalled();
+jest.useRealTimers();
+```
+
+**After (Vitest):**
+```typescript
+vi.useFakeTimers();
+service.startTimer();
+vi.advanceTimersByTime(1000);
+expect(callback).toHaveBeenCalled();
+vi.useRealTimers();
+```
+
+## Common Matchers
+
+| Jest | Vitest |
+|------|--------|
+| `expect(x).toBe(y)` | Same |
+| `expect(x).toEqual(y)` | Same |
+| `expect(x).toHaveBeenCalled()` | Same |
+| `expect(x).toHaveBeenCalledWith(y)` | Same |
+| `expect(x).toMatchSnapshot()` | `expect(x).toMatchSnapshot()` |
+| `expect(x).toHaveText('text')` | `expect(x).toHaveTextContent('text')` (with jest-dom) |
+
+## Migration Checklist
+
+1. [ ] Update `vitest.config.ts`
+2. [ ] Update `test-setup.ts`
+3. [ ] Replace `jest.fn()` with `vi.fn()`
+4. [ ] Replace `jest.spyOn()` with `vi.spyOn()`
+5. [ ] Replace `jest.mock()` with `vi.mock()`
+6. [ ] Replace Spectator with Angular Testing Library
+7. [ ] Update queries to use accessible selectors
+8. [ ] Update async patterns
+9. [ ] Run tests and fix any remaining issues
+10. [ ] Remove Jest dependencies from `package.json`

.claude/skills/type-safety-engineer/references/zod-patterns.md

@@ -0,0 +1,293 @@
+# Zod Patterns Reference
+
+## Overview
+
+Zod is a TypeScript-first schema validation library. Use it for runtime validation at system boundaries (API responses, form inputs, external data).
+
+## Basic Schema Patterns
+
+### Primitive Types
+
+```typescript
+import { z } from 'zod';
+
+// Basic types
+const stringSchema = z.string();
+const numberSchema = z.number();
+const booleanSchema = z.boolean();
+const dateSchema = z.date();
+
+// With constraints
+const emailSchema = z.string().email();
+const positiveNumber = z.number().positive();
+const nonEmptyString = z.string().min(1);
+const optionalString = z.string().optional();
+const nullableString = z.string().nullable();
+```
+
+### Object Schemas
+
+```typescript
+// Basic object
+const userSchema = z.object({
+  id: z.string().uuid(),
+  email: z.string().email(),
+  name: z.string().min(1),
+  age: z.number().int().positive().optional(),
+  role: z.enum(['admin', 'user', 'guest']),
+  createdAt: z.string().datetime(),
+});
+
+// Infer TypeScript type from schema
+type User = z.infer<typeof userSchema>;
+
+// Partial and Pick utilities
+const partialUser = userSchema.partial();           // All fields optional
+const requiredUser = userSchema.required();         // All fields required
+const pickedUser = userSchema.pick({ email: true, name: true });
+const omittedUser = userSchema.omit({ createdAt: true });
+```
+
+### Array Schemas
+
+```typescript
+// Basic array
+const stringArray = z.array(z.string());
+
+// With constraints
+const nonEmptyArray = z.array(z.string()).nonempty();
+const limitedArray = z.array(z.number()).min(1).max(10);
+
+// Tuple (fixed length, different types)
+const coordinate = z.tuple([z.number(), z.number()]);
+```
+
+## API Response Validation
+
+### Pattern: Validate API Responses
+
+```typescript
+// Define response schema
+const apiResponseSchema = z.object({
+  data: z.object({
+    items: z.array(userSchema),
+    total: z.number(),
+    page: z.number(),
+    pageSize: z.number(),
+  }),
+  meta: z.object({
+    timestamp: z.string().datetime(),
+    requestId: z.string().uuid(),
+  }),
+});
+
+// In Angular service
+@Injectable({ providedIn: 'root' })
+export class UserService {
+  #http = inject(HttpClient);
+  #logger = logger({ component: 'UserService' });
+
+  getUsers(): Observable<User[]> {
+    return this.#http.get('/api/users').pipe(
+      map((response) => {
+        const result = apiResponseSchema.safeParse(response);
+        if (!result.success) {
+          this.#logger.error('Invalid API response', {
+            errors: result.error.errors
+          });
+          throw new Error('Invalid API response');
+        }
+        return result.data.data.items;
+      })
+    );
+  }
+}
+```
+
+### Pattern: Coerce Types
+
+```typescript
+// API returns string IDs, coerce to number
+const productSchema = z.object({
+  id: z.coerce.number(),           // "123" -> 123
+  price: z.coerce.number(),        // "99.99" -> 99.99
+  inStock: z.coerce.boolean(),     // "true" -> true
+  createdAt: z.coerce.date(),      // "2024-01-01" -> Date
+});
+```
+
+## Form Validation
+
+### Pattern: Form Schema
+
+```typescript
+// Define form schema with custom error messages
+const loginFormSchema = z.object({
+  email: z.string()
+    .email({ message: 'Invalid email address' }),
+  password: z.string()
+    .min(8, { message: 'Password must be at least 8 characters' })
+    .regex(/[A-Z]/, { message: 'Must contain uppercase letter' })
+    .regex(/[0-9]/, { message: 'Must contain number' }),
+  rememberMe: z.boolean().default(false),
+});
+
+// Use with Angular forms
+type LoginForm = z.infer<typeof loginFormSchema>;
+```
+
+### Pattern: Cross-field Validation
+
+```typescript
+const passwordFormSchema = z.object({
+  password: z.string().min(8),
+  confirmPassword: z.string(),
+}).refine(
+  (data) => data.password === data.confirmPassword,
+  {
+    message: "Passwords don't match",
+    path: ['confirmPassword'], // Error path
+  }
+);
+```
+
+## Type Guards
+
+### Pattern: Create Type Guard from Schema
+
+```typescript
+// Schema
+const customerSchema = z.object({
+  type: z.literal('customer'),
+  customerId: z.string(),
+  loyaltyPoints: z.number(),
+});
+
+// Type guard function
+function isCustomer(value: unknown): value is z.infer<typeof customerSchema> {
+  return customerSchema.safeParse(value).success;
+}
+
+// Usage
+if (isCustomer(data)) {
+  console.log(data.loyaltyPoints); // Type-safe access
+}
+```
+
+### Pattern: Discriminated Unions
+
+```typescript
+const customerSchema = z.object({
+  type: z.literal('customer'),
+  customerId: z.string(),
+});
+
+const guestSchema = z.object({
+  type: z.literal('guest'),
+  sessionId: z.string(),
+});
+
+const userSchema = z.discriminatedUnion('type', [
+  customerSchema,
+  guestSchema,
+]);
+
+type User = z.infer<typeof userSchema>;
+// User = { type: 'customer'; customerId: string } | { type: 'guest'; sessionId: string }
+```
+
+## Replacing `any` Types
+
+### Before (unsafe)
+
+```typescript
+function processOrder(order: any) {
+  // No type safety
+  console.log(order.items.length);
+  console.log(order.customer.name);
+}
+```
+
+### After (with Zod)
+
+```typescript
+const orderSchema = z.object({
+  id: z.string().uuid(),
+  items: z.array(z.object({
+    productId: z.string(),
+    quantity: z.number().positive(),
+    price: z.number().nonnegative(),
+  })),
+  customer: z.object({
+    name: z.string(),
+    email: z.string().email(),
+  }),
+  status: z.enum(['pending', 'confirmed', 'shipped', 'delivered']),
+});
+
+type Order = z.infer<typeof orderSchema>;
+
+function processOrder(input: unknown): Order {
+  const order = orderSchema.parse(input); // Throws if invalid
+  console.log(order.items.length);        // Type-safe
+  console.log(order.customer.name);       // Type-safe
+  return order;
+}
+```
+
+## Error Handling
+
+### Pattern: Structured Error Handling
+
+```typescript
+const result = schema.safeParse(data);
+
+if (!result.success) {
+  // Access formatted errors
+  const formatted = result.error.format();
+
+  // Access flat error list
+  const flat = result.error.flatten();
+
+  // Custom error mapping
+  const errors = result.error.errors.map(err => ({
+    field: err.path.join('.'),
+    message: err.message,
+    code: err.code,
+  }));
+}
+```
+
+## Transform Patterns
+
+### Pattern: Transform on Parse
+
+```typescript
+const userInputSchema = z.object({
+  email: z.string().email().transform(s => s.toLowerCase()),
+  name: z.string().transform(s => s.trim()),
+  tags: z.string().transform(s => s.split(',')),
+});
+
+// Input: { email: "USER@EXAMPLE.COM", name: "  John  ", tags: "a,b,c" }
+// Output: { email: "user@example.com", name: "John", tags: ["a", "b", "c"] }
+```
+
+### Pattern: Default Values
+
+```typescript
+const configSchema = z.object({
+  theme: z.enum(['light', 'dark']).default('light'),
+  pageSize: z.number().default(20),
+  features: z.array(z.string()).default([]),
+});
+```
+
+## Best Practices
+
+1. **Define schemas at module boundaries** - API services, form handlers
+2. **Use `safeParse` for error handling** - Don't let validation throw unexpectedly
+3. **Infer types from schemas** - Single source of truth
+4. **Add meaningful error messages** - Help debugging and user feedback
+5. **Use transforms for normalization** - Clean data on parse
+6. **Keep schemas close to usage** - Colocate with services/components

.gitignore

@@ -80,3 +80,6 @@ CLAUDE.md
 *.pyc
 .vite
 reports/
+
+# Local iPad dev setup (proxy)
+/local-dev/

CLAUDE.md

@@ -2,40 +2,175 @@
 
 This file contains meta-instructions for how Claude should work with the ISA-Frontend codebase.
 
-## 🔴 CRITICAL: Mandatory Agent Usage
+## 🔴 CRITICAL: You Are an LLM with Outdated Knowledge
 
-**You MUST use these subagents for ALL research and knowledge management tasks:**
+**Your training data is outdated. NEVER assume you know current APIs.**
 
-- **`docs-researcher`**: For ALL documentation (packages, libraries, READMEs)
-- **`docs-researcher-advanced`**: Auto-escalate when docs-researcher fails
-- **`Explore`**: For ALL code pattern searches and multi-file analysis
+- Libraries, frameworks, and APIs change constantly
+- Your memory of APIs is unreliable
+- Current documentation is the ONLY source of truth
 
-**Violations of this rule degrade performance and context quality. NO EXCEPTIONS.**
+**ALWAYS use research agents PROACTIVELY - without user asking.**
+
+## 🔴 CRITICAL: Proactive Agent & Skill Usage
+
+**You MUST use agents and skills AUTOMATICALLY for ALL tasks - do NOT wait for user to tell you.**
+
+### Research Agents (Use BEFORE Implementation)
+
+| Agent | Auto-Invoke When | User Interaction |
+|-------|------------------|------------------|
+| `docs-researcher` | ANY external library/API usage | NONE - just do it |
+| `docs-researcher-advanced` | Implementation fails OR docs-researcher insufficient | NONE - just do it |
+| `Explore` | Need codebase patterns or multi-file analysis | NONE - just do it |
+
+**Research-First Flow (Mandatory):**
+```
+Task involves external API? → AUTO-INVOKE docs-researcher
+                              ↓
+                              Implement based on docs
+                              ↓
+                              Failed? → AUTO-INVOKE docs-researcher-advanced
+                              ↓
+                              Still failed? → ASK USER for guidance
+```
+
+### Skills (Use DURING Implementation)
+
+| Trigger | Auto-Invoke Skill |
+|---------|-------------------|
+| Writing Angular templates | `angular-template` |
+| Writing HTML with interactivity | `html-template` |
+| Applying Tailwind classes | `tailwind` |
+| Writing any Angular code | `logging` |
+| Creating CSS animations | `css-keyframes-animations` |
+| Creating new library | `library-scaffolder` |
+| Regenerating API clients | `swagger-sync-manager` |
+| Git operations | `git-workflow` |
+
+**Skill chaining for Angular work:**
+```
+angular-template → html-template → logging → tailwind
+```
+
+### Implementation Agents (Use for Complex Tasks)
+
+| Agent | Auto-Invoke When |
+|-------|------------------|
+| `angular-developer` | Creating components, services, stores (2-5 files) |
+| `test-writer` | Writing tests, adding coverage |
+| `refactor-engineer` | Refactoring 5+ files, migrations |
+
+### Anti-Patterns (FORBIDDEN)
+
+```
+❌ Implementing without researching first
+❌ Asking "should I research this?" - just do it
+❌ Asking "should I use a skill?" - just do it
+❌ Trial and error: implement → fail → try again → fail
+❌ Writing Angular code without loading skills first
+```
+
+### Correct Pattern
+
+```
+✅ "Researching [library] API..." → [auto-invokes docs-researcher]
+✅ "Loading angular-template skill..." → [auto-invokes skill]
+✅ "Implementing based on current docs..."
+✅ If fails: "Escalating research..." → [auto-invokes docs-researcher-advanced]
+```
 
 ## Communication Guidelines
 
-**Keep answers concise and focused:**
+- Keep answers concise and focused
+- Use bullet points and structured formatting
+- Skip verbose explanations unless requested
+- Focus on what the user needs, not everything you know
 
-- Provide direct, actionable responses without unnecessary elaboration
-- Skip verbose explanations unless specifically requested
-- Focus on what the user needs to know, not everything you know
-- Use bullet points and structured formatting for clarity
-- Only provide detailed explanations when complexity requires it
+## Context Management
 
-## Researching and Investigating the Codebase
+**Context bloat kills reliability. Minimize aggressively.**
 
-**🔴 MANDATORY: You MUST use subagents for research. Direct file reading/searching.**
+### Tool Result Minimization
 
-### Required Agent Usage
+| Tool | Keep | Discard |
+|------|------|---------|
+| Bash (success) | `✓ Command succeeded` | Full output |
+| Bash (failure) | Exit code + error (max 10 lines) | Verbose output |
+| Edit | `✓ Modified file.ts` | Full diffs |
+| Read | Extracted relevant section | Full file content |
+| Agent results | 1-2 sentence summary | Raw JSON/full output |
+
+### Agent Result Handling
+
+```
+❌ WRONG: "Docs researcher returned: [huge JSON...]"
+✅ RIGHT: "docs-researcher found: Use signalStore() with withState()"
+```
+
+### Session Cleanup
+
+Use `/clear` between unrelated tasks to prevent context degradation.
+
+### Long-Running Task Pattern
+
+For complex tasks approaching context limits:
+1. Dump progress to a `.md` file (e.g., `progress.md`)
+2. Use `/clear` to reset context
+3. Resume by reading the progress file
+4. Continue from where you left off
+
+### Context Monitoring
+
+- Use `/context` to check current token usage
+- Fresh session baseline: ~20k tokens
+- Consider `/compact` when approaching 150k tokens
+- Prefer `/clear` over `/compact` when starting new topics
+
+## Extended Thinking
+
+Use progressive thinking depth for complex analysis:
+
+| Trigger | Thinking Budget | Use Case |
+|---------|----------------|----------|
+| `"think"` | ~4k tokens | Basic analysis, simple decisions |
+| `"think hard"` | ~10k tokens | Moderate complexity, multi-factor decisions |
+| `"think harder"` | ~16k tokens | Deep analysis, architectural decisions |
+| `"ultrathink"` | ~32k tokens | Maximum depth, critical planning |
+
+**Examples:**
+- "Think about how to structure this component"
+- "Think hard about the best approach for state management"
+- "Ultrathink about the architecture for this feature"
+
+## Code Investigation (MANDATORY)
+
+**Never speculate about code you haven't read.**
+
+If user references a specific file:
+1. **READ the file first** using the Read tool
+2. **THEN provide analysis** based on actual contents
+3. If file doesn't exist, **say so explicitly**
+
+**Anti-Hallucination Rules:**
+- Never describe code you haven't opened
+- Never assume file contents based on names
+- Never guess API signatures without documentation
+- Always verify imports and dependencies exist
+
+## Implementation Decisions
 
 | Task Type                         | Required Agent     | Escalation Path                           |
 | --------------------------------- | ------------------ | ----------------------------------------- |
 | **Package/Library Documentation** | `docs-researcher`  | → `docs-researcher-advanced` if not found |
 | **Internal Library READMEs**      | `docs-researcher`  | Keep context clean                        |
+| **Monorepo Library Overview**     | `docs-researcher`  | Uses `docs/library-reference.md`          |
 | **Code Pattern Search**           | `Explore`          | Set thoroughness level                    |
 | **Implementation Analysis**       | `Explore`          | Multiple file analysis                    |
 | **Single Specific File**          | Read tool directly | No agent needed                           |
 
+**Note:** The `docs-researcher` agent uses `docs/library-reference.md` as a primary index for discovering monorepo libraries. This file contains descriptions and locations for all libraries, enabling quick library discovery without reading individual READMEs.
+
 ### Documentation Research System (Two-Tier)
 
 1. **ALWAYS start with `docs-researcher`** (Haiku, 30-120s) for any documentation need
@@ -45,31 +180,60 @@ This file contains meta-instructions for how Claude should work with the ISA-Fro
    - Need code inference
    - Complex architectural questions
 
-### Enforcement Examples
+### When to Use Agents vs Direct Tools
 
 ```
-❌ WRONG: Read libs/ui/buttons/README.md
-✅ RIGHT: Task → docs-researcher → "Find documentation for @isa/ui/buttons"
-
-❌ WRONG: Grep for "signalStore" patterns
-✅ RIGHT: Task → Explore → "Find all signalStore implementations"
-
-❌ WRONG: WebSearch for Zod documentation
-✅ RIGHT: Task → docs-researcher → "Find Zod validation documentation"
+Single known file? → Read tool directly
+Code pattern search? → Explore agent
+Documentation lookup? → docs-researcher agent
+Creating 2-5 Angular files? → angular-developer agent
+Refactoring 5+ files? → refactor-engineer agent
+Simple 1-file edit? → Direct implementation
 ```
 
-**Remember: Using subagents is NOT optional - it's mandatory for maintaining context efficiency and search quality.**
+### Proactive Agent Triggers
+
+**Auto-invoke `angular-developer` when user says:**
+- "Create component/service/store/pipe/directive/guard"
+- Task touches 2-5 Angular files
+
+**Auto-invoke `test-writer` when user says:**
+- "Write tests", "Add coverage"
+
+**Auto-invoke `refactor-engineer` when user says:**
+- "Refactor all", "Migrate X files", "Update pattern across"
+
+**Auto-invoke `context-manager` when user says:**
+- "Remember to", "TODO:", "Don't forget"
+
+## Agent Communication
+
+### Briefing Agents
+
+Keep briefings focused:
+```
+Implement: [type] at [path]
+Purpose: [1 sentence]
+Requirements: [list]
+```
+
+### Agent Results
+
+Extract only what's needed, discard the rest:
+```
+✓ Created 3 files
+✓ Tests: 12/12 passing
+✓ Skills applied: angular-template, logging
+```
 
 <!-- nx configuration start-->
 <!-- Leave the start & end comments to automatically receive updates. -->
 
 # General Guidelines for working with Nx
 
-- When running tasks (for example build, lint, test, e2e, etc.), always prefer running the task through `nx` (i.e. `nx run`, `nx run-many`, `nx affected`) instead of using the underlying tooling directly
-- You have access to the Nx MCP server and its tools, use them to help the user
-- When answering questions about the repository, use the `nx_workspace` tool first to gain an understanding of the workspace architecture where applicable.
-- When working in individual projects, use the `nx_project_details` mcp tool to analyze and understand the specific project structure and dependencies
-- For questions around nx configuration, best practices or if you're unsure, use the `nx_docs` tool to get relevant, up-to-date docs. Always use this instead of assuming things about nx configuration
-- If the user needs help with an Nx configuration or project graph error, use the `nx_workspace` tool to get any errors
+- Run tasks through `nx` (i.e. `nx run`, `nx run-many`, `nx affected`) instead of underlying tooling
+- Use `nx_workspace` tool to understand workspace architecture
+- Use `nx_project_details` for specific project structure
+- Use `nx_docs` for nx configuration questions
 
 <!-- nx configuration end-->

apps/isa-app/project.json

@@ -1,162 +1,162 @@
-{
-  "name": "isa-app",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "application",
-  "prefix": "app",
-  "sourceRoot": "apps/isa-app/src",
-  "tags": [],
-  "targets": {
-    "build": {
-      "executor": "@angular-devkit/build-angular:application",
-      "options": {
-        "allowedCommonJsDependencies": [
-          "lodash",
-          "moment",
-          "jsrsasign",
-          "pdfjs-dist/build/pdf",
-          "pdfjs-dist/web/pdf_viewer",
-          "pdfjs-dist/es5/build/pdf",
-          "pdfjs-dist/es5/web/pdf_viewer"
-        ],
-        "outputPath": "dist/isa-app",
-        "index": "apps/isa-app/src/index.html",
-        "browser": "apps/isa-app/src/main.ts",
-        "polyfills": ["zone.js"],
-        "tsConfig": "apps/isa-app/tsconfig.app.json",
-        "inlineStyleLanguage": "scss",
-        "assets": [
-          "apps/isa-app/src/favicon.ico",
-          "apps/isa-app/src/assets",
-          "apps/isa-app/src/config",
-          "apps/isa-app/src/silent-refresh.html",
-          "apps/isa-app/src/manifest.webmanifest",
-          {
-            "glob": "**/*",
-            "input": "node_modules/scandit-web-datacapture-barcode/build/engine",
-            "output": "scandit"
-          }
-        ],
-        "styles": [
-          "@angular/cdk/overlay-prebuilt.css",
-          "apps/isa-app/src/tailwind.scss",
-          "apps/isa-app/src/styles.scss"
-        ],
-        "scripts": []
-      },
-      "configurations": {
-        "production": {
-          "budgets": [
-            {
-              "type": "initial",
-              "maximumWarning": "2mb",
-              "maximumError": "5mb"
-            },
-            {
-              "type": "anyComponentStyle",
-              "maximumWarning": "25kb"
-            }
-          ],
-          "fileReplacements": [
-            {
-              "replace": "apps/isa-app/src/environments/environment.ts",
-              "with": "apps/isa-app/src/environments/environment.prod.ts"
-            }
-          ],
-          "outputHashing": "all",
-          "serviceWorker": "apps/isa-app/ngsw-config.json"
-        },
-        "development": {
-          "optimization": false,
-          "extractLicenses": false,
-          "sourceMap": true
-        }
-      },
-      "defaultConfiguration": "production",
-      "outputs": ["{options.outputPath}"]
-    },
-    "serve": {
-      "executor": "@angular-devkit/build-angular:dev-server",
-      "configurations": {
-        "production": {
-          "buildTarget": "isa-app:build:production"
-        },
-        "development": {
-          "buildTarget": "isa-app:build:development"
-        }
-      },
-      "defaultConfiguration": "development",
-      "continuous": true
-    },
-    "extract-i18n": {
-      "executor": "@angular-devkit/build-angular:extract-i18n",
-      "options": {
-        "buildTarget": "isa-app:build"
-      }
-    },
-    "lint": {
-      "executor": "@nx/eslint:lint"
-    },
-    "test": {
-      "executor": "@nx/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
-      "options": {
-        "jestConfig": "apps/isa-app/jest.config.ts"
-      }
-    },
-    "serve-static": {
-      "executor": "@nx/web:file-server",
-      "options": {
-        "buildTarget": "isa-app:build",
-        "staticFilePath": "dist/apps/isa-app/browser",
-        "spa": true
-      }
-    },
-    "storybook": {
-      "executor": "@storybook/angular:start-storybook",
-      "options": {
-        "port": 4400,
-        "configDir": "apps/isa-app/.storybook",
-        "browserTarget": "isa-app:build",
-        "compodoc": false,
-        "open": false,
-        "assets": [
-          {
-            "glob": "**/*",
-            "input": "apps/isa-app/src/assets",
-            "output": "/assets"
-          }
-        ],
-        "styles": [
-          "@angular/cdk/overlay-prebuilt.css",
-          "apps/isa-app/src/tailwind.scss",
-          "apps/isa-app/src/styles.scss"
-        ]
-      },
-      "configurations": {
-        "ci": {
-          "quiet": true
-        }
-      }
-    },
-    "build-storybook": {
-      "executor": "@storybook/angular:build-storybook",
-      "outputs": ["{options.outputDir}"],
-      "options": {
-        "outputDir": "dist/storybook/isa-app",
-        "configDir": "apps/isa-app/.storybook",
-        "browserTarget": "isa-app:build",
-        "compodoc": false,
-        "styles": [
-          "@angular/cdk/overlay-prebuilt.css",
-          "apps/isa-app/src/tailwind.scss",
-          "apps/isa-app/src/styles.scss"
-        ]
-      },
-      "configurations": {
-        "ci": {
-          "quiet": true
-        }
-      }
-    }
-  }
-}
+{
+  "name": "isa-app",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "prefix": "app",
+  "sourceRoot": "apps/isa-app/src",
+  "tags": ["skip:ci"],
+  "targets": {
+    "build": {
+      "executor": "@angular-devkit/build-angular:application",
+      "options": {
+        "allowedCommonJsDependencies": [
+          "lodash",
+          "moment",
+          "jsrsasign",
+          "pdfjs-dist/build/pdf",
+          "pdfjs-dist/web/pdf_viewer",
+          "pdfjs-dist/es5/build/pdf",
+          "pdfjs-dist/es5/web/pdf_viewer"
+        ],
+        "outputPath": "dist/isa-app",
+        "index": "apps/isa-app/src/index.html",
+        "browser": "apps/isa-app/src/main.ts",
+        "polyfills": ["zone.js"],
+        "tsConfig": "apps/isa-app/tsconfig.app.json",
+        "inlineStyleLanguage": "scss",
+        "assets": [
+          "apps/isa-app/src/favicon.ico",
+          "apps/isa-app/src/assets",
+          "apps/isa-app/src/config",
+          "apps/isa-app/src/silent-refresh.html",
+          "apps/isa-app/src/manifest.webmanifest",
+          {
+            "glob": "**/*",
+            "input": "node_modules/scandit-web-datacapture-barcode/build/engine",
+            "output": "scandit"
+          }
+        ],
+        "styles": [
+          "@angular/cdk/overlay-prebuilt.css",
+          "apps/isa-app/src/tailwind.scss",
+          "apps/isa-app/src/styles.scss"
+        ],
+        "scripts": []
+      },
+      "configurations": {
+        "production": {
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "2mb",
+              "maximumError": "5mb"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "25kb"
+            }
+          ],
+          "fileReplacements": [
+            {
+              "replace": "apps/isa-app/src/environments/environment.ts",
+              "with": "apps/isa-app/src/environments/environment.prod.ts"
+            }
+          ],
+          "outputHashing": "all",
+          "serviceWorker": "apps/isa-app/ngsw-config.json"
+        },
+        "development": {
+          "optimization": false,
+          "extractLicenses": false,
+          "sourceMap": true
+        }
+      },
+      "defaultConfiguration": "production",
+      "outputs": ["{options.outputPath}"]
+    },
+    "serve": {
+      "executor": "@angular-devkit/build-angular:dev-server",
+      "configurations": {
+        "production": {
+          "buildTarget": "isa-app:build:production"
+        },
+        "development": {
+          "buildTarget": "isa-app:build:development"
+        }
+      },
+      "defaultConfiguration": "development",
+      "continuous": true
+    },
+    "extract-i18n": {
+      "executor": "@angular-devkit/build-angular:extract-i18n",
+      "options": {
+        "buildTarget": "isa-app:build"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "apps/isa-app/jest.config.ts"
+      }
+    },
+    "serve-static": {
+      "executor": "@nx/web:file-server",
+      "options": {
+        "buildTarget": "isa-app:build",
+        "staticFilePath": "dist/apps/isa-app/browser",
+        "spa": true
+      }
+    },
+    "storybook": {
+      "executor": "@storybook/angular:start-storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "apps/isa-app/.storybook",
+        "browserTarget": "isa-app:build",
+        "compodoc": false,
+        "open": false,
+        "assets": [
+          {
+            "glob": "**/*",
+            "input": "apps/isa-app/src/assets",
+            "output": "/assets"
+          }
+        ],
+        "styles": [
+          "@angular/cdk/overlay-prebuilt.css",
+          "apps/isa-app/src/tailwind.scss",
+          "apps/isa-app/src/styles.scss"
+        ]
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@storybook/angular:build-storybook",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "outputDir": "dist/storybook/isa-app",
+        "configDir": "apps/isa-app/.storybook",
+        "browserTarget": "isa-app:build",
+        "compodoc": false,
+        "styles": [
+          "@angular/cdk/overlay-prebuilt.css",
+          "apps/isa-app/src/tailwind.scss",
+          "apps/isa-app/src/styles.scss"
+        ]
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    }
+  }
+}

apps/isa-app/src/app/app-routing.module.ts

@@ -1,4 +1,4 @@
-import { isDevMode, NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import {
   CanActivateCartGuard,
@@ -7,23 +7,17 @@ import {
   CanActivateCustomerOrdersGuard,
   CanActivateCustomerOrdersWithProcessIdGuard,
   CanActivateCustomerWithProcessIdGuard,
-  CanActivateGoodsInGuard,
   CanActivateProductGuard,
   CanActivateProductWithProcessIdGuard,
-  CanActivateTaskCalendarGuard,
   IsAuthenticatedGuard,
 } from './guards';
-import { CanActivateAssortmentGuard } from './guards/can-activate-assortment.guard';
-import { CanActivatePackageInspectionGuard } from './guards/can-activate-package-inspection.guard';
 import { MainComponent } from './main.component';
-import { PreviewComponent } from './preview';
 import {
   BranchSectionResolver,
   CustomerSectionResolver,
   ProcessIdResolver,
 } from './resolvers';
 import { TokenLoginComponent, TokenLoginModule } from './token-login';
-import { ProcessIdGuard } from './guards/process-id.guard';
 import {
   ActivateProcessIdGuard,
   ActivateProcessIdWithConfigKeyGuard,
@@ -74,8 +68,12 @@ const routes: Routes = [
             loadChildren: () =>
               import('@page/catalog').then((m) => m.PageCatalogModule),
             canActivate: [CanActivateProductWithProcessIdGuard],
-            resolve: { processId: ProcessIdResolver },
+            resolve: {
+              processId: ProcessIdResolver,
+            },
           },
+          // TODO: Check if order and :processId/order is still being used
+          // If not, remove these routes and the related guards and resolvers
           {
             path: 'order',
             loadChildren: () =>
@@ -87,7 +85,9 @@ const routes: Routes = [
             loadChildren: () =>
               import('@page/customer-order').then((m) => m.CustomerOrderModule),
             canActivate: [CanActivateCustomerOrdersWithProcessIdGuard],
-            resolve: { processId: ProcessIdResolver },
+            resolve: {
+              processId: ProcessIdResolver,
+            },
           },
           {
             path: 'customer',
@@ -100,7 +100,9 @@ const routes: Routes = [
             loadChildren: () =>
               import('@page/customer').then((m) => m.CustomerModule),
             canActivate: [CanActivateCustomerWithProcessIdGuard],
-            resolve: { processId: ProcessIdResolver },
+            resolve: {
+              processId: ProcessIdResolver,
+            },
           },
           {
             path: 'cart',
@@ -113,10 +115,13 @@ const routes: Routes = [
             loadChildren: () =>
               import('@page/checkout').then((m) => m.PageCheckoutModule),
             canActivate: [CanActivateCartWithProcessIdGuard],
+            resolve: {
+              processId: ProcessIdResolver,
+            },
           },
           {
             path: 'pickup-shelf',
-            canActivate: [ProcessIdGuard],
+            canActivate: [ActivateProcessIdGuard],
             // NOTE: This is a workaround for the canActivate guard not being called
             loadChildren: () =>
               import('@page/pickup-shelf').then((m) => m.PickupShelfOutModule),
@@ -126,6 +131,9 @@ const routes: Routes = [
             canActivate: [ActivateProcessIdGuard],
             loadChildren: () =>
               import('@page/pickup-shelf').then((m) => m.PickupShelfOutModule),
+            resolve: {
+              processId: ProcessIdResolver,
+            },
           },
           { path: '**', redirectTo: 'dashboard', pathMatch: 'full' },
         ],
@@ -141,7 +149,7 @@ const routes: Routes = [
               import('@page/task-calendar').then(
                 (m) => m.PageTaskCalendarModule,
               ),
-            canActivate: [CanActivateTaskCalendarGuard],
+            canActivate: [ActivateProcessIdWithConfigKeyGuard('taskCalendar')],
           },
           {
             path: 'pickup-shelf',
@@ -154,27 +162,23 @@ const routes: Routes = [
             path: 'goods/in',
             loadChildren: () =>
               import('@page/goods-in').then((m) => m.GoodsInModule),
-            canActivate: [CanActivateGoodsInGuard],
+            canActivate: [ActivateProcessIdWithConfigKeyGuard('goodsIn')],
           },
-          // {
-          //   path: 'remission',
-          //   loadChildren: () =>
-          //     import('@page/remission').then((m) => m.PageRemissionModule),
-          //   canActivate: [CanActivateRemissionGuard],
-          // },
           {
             path: 'package-inspection',
             loadChildren: () =>
               import('@page/package-inspection').then(
                 (m) => m.PackageInspectionModule,
               ),
-            canActivate: [CanActivatePackageInspectionGuard],
+            canActivate: [
+              ActivateProcessIdWithConfigKeyGuard('packageInspection'),
+            ],
           },
           {
             path: 'assortment',
             loadChildren: () =>
               import('@page/assortment').then((m) => m.AssortmentModule),
-            canActivate: [CanActivateAssortmentGuard],
+            canActivate: [ActivateProcessIdWithConfigKeyGuard('assortment')],
           },
           { path: '**', redirectTo: 'task-calendar', pathMatch: 'full' },
         ],
@@ -243,13 +247,6 @@ const routes: Routes = [
   },
 ];
 
-if (isDevMode()) {
-  routes.unshift({
-    path: 'preview',
-    component: PreviewComponent,
-  });
-}
-
 @NgModule({
   imports: [
     RouterModule.forRoot(routes, {

apps/isa-app/src/app/app.module.ts

@@ -1,4 +1,5 @@
 import { version } from '../../../../package.json';
+import { IsaTitleStrategy } from '@isa/common/title-management';
 import {
   HTTP_INTERCEPTORS,
   provideHttpClient,
@@ -56,7 +57,6 @@ import {
   ScanditScanAdapterModule,
 } from '@adapter/scan';
 import * as Commands from './commands';
-import { PreviewComponent } from './preview';
 import { NativeContainerService } from '@external/native-container';
 import { ShellModule } from '@shared/shell';
 import { MainComponent } from './main.component';
@@ -87,6 +87,7 @@ import {
 import { Store } from '@ngrx/store';
 import { OAuthService } from 'angular-oauth2-oidc';
 import z from 'zod';
+import { TitleStrategy } from '@angular/router';
 import { TabNavigationService } from '@isa/core/tabs';
 
 registerLocaleData(localeDe, localeDeExtra);
@@ -270,7 +271,6 @@ const USER_SUB_FACTORY = () => {
     CoreCommandModule.forRoot(Object.values(Commands)),
     CoreLoggerModule.forRoot(),
     AppStoreModule,
-    PreviewComponent,
     AuthModule.forRoot(),
     CoreApplicationModule.forRoot(),
     UiModalModule.forRoot(),
@@ -330,6 +330,7 @@ const USER_SUB_FACTORY = () => {
       useValue: 'EUR',
     },
     provideUserSubFactory(USER_SUB_FACTORY),
+    { provide: TitleStrategy, useClass: IsaTitleStrategy },
   ],
 })
 export class AppModule {}

apps/isa-app/src/app/guards/activate-process-id.guard.ts

@@ -1,47 +1,82 @@
-import { inject } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivateFn, RouterStateSnapshot } from '@angular/router';
-import { ApplicationService } from '@core/application';
-import { Config } from '@core/config';
-import { take } from 'rxjs/operators';
-
-export const ActivateProcessIdGuard: CanActivateFn = async (
-  route: ActivatedRouteSnapshot,
-  state: RouterStateSnapshot,
-) => {
-  const application = inject(ApplicationService);
-
-  const processIdStr = route.params.processId;
-
-  if (!processIdStr) {
-    return false;
-  }
-
-  const processId = Number(processIdStr);
-
-  // Check if Process already exists
-  const process = await application.getProcessById$(processId).pipe(take(1)).toPromise();
-
-  if (!process) {
-    application.createCustomerProcess(processId);
-  }
-
-  application.activateProcess(processId);
-
-  return true;
-};
-
-export const ActivateProcessIdWithConfigKeyGuard: (key: string) => CanActivateFn =
-  (key) => async (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
-    const application = inject(ApplicationService);
-    const config = inject(Config);
-
-    const processId = config.get(`process.ids.${key}`);
-
-    if (isNaN(processId)) {
-      return false;
-    }
-
-    application.activateProcess(processId);
-
-    return true;
-  };
+import { inject } from '@angular/core';
+import {
+  ActivatedRouteSnapshot,
+  CanActivateFn,
+  RouterStateSnapshot,
+} from '@angular/router';
+import { ApplicationService } from '@core/application';
+import { Config } from '@core/config';
+import { take } from 'rxjs/operators';
+import z from 'zod';
+
+export const ActivateProcessIdGuard: CanActivateFn = async (
+  route: ActivatedRouteSnapshot,
+  state: RouterStateSnapshot,
+) => {
+  const application = inject(ApplicationService);
+
+  const processIdStr = route.params.processId;
+
+  if (!processIdStr) {
+    return false;
+  }
+
+  const processId = Number(processIdStr);
+
+  // Check if Process already exists
+  const process = await application
+    .getProcessById$(processId)
+    .pipe(take(1))
+    .toPromise();
+
+  if (!process) {
+    application.createProcess({
+      id: processId,
+      type: 'cart',
+      section: 'customer',
+      name: `Vorgang ${processId}`,
+    });
+  }
+
+  application.activateProcess(processId);
+
+  return true;
+};
+
+export const ActivateProcessIdWithConfigKeyGuard: (
+  key: string,
+) => CanActivateFn =
+  (key) =>
+  async (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
+    const application = inject(ApplicationService);
+    const config = inject(Config);
+
+    const processId = config.get(`process.ids.${key}`, z.coerce.number());
+
+    if (typeof processId !== 'number' || isNaN(processId)) {
+      return false;
+    }
+
+    const processTitle = config.get(
+      `process.titles.${key}`,
+      z.string().default(key),
+    );
+
+    const process = await application
+      .getProcessById$(processId)
+      .pipe(take(1))
+      .toPromise();
+
+    if (!process) {
+      await application.createProcess({
+        id: processId,
+        type: key,
+        section: 'customer', // Not important anymore
+        name: processTitle,
+      });
+    }
+
+    application.activateProcess(processId);
+
+    return true;
+  };

apps/isa-app/src/app/guards/can-activate-goods-in.guard.ts

@@ -1,34 +1,34 @@
-import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
-import { ApplicationService } from '@core/application';
-import { Config } from '@core/config';
-import { first } from 'rxjs/operators';
-import { z } from 'zod';
-
-@Injectable({ providedIn: 'root' })
-export class CanActivateGoodsInGuard {
-  constructor(
-    private readonly _applicationService: ApplicationService,
-    private readonly _config: Config,
-  ) {}
-
-  async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
-    const pid = this._config.get('process.ids.goodsIn', z.number());
-    const process = await this._applicationService
-      .getProcessById$(pid)
-      .pipe(first())
-      .toPromise();
-    if (!process) {
-      await this._applicationService.createProcess({
-        id: this._config.get('process.ids.goodsIn'),
-        type: 'goods-in',
-        section: 'branch',
-        name: '',
-      });
-    }
-    this._applicationService.activateProcess(
-      this._config.get('process.ids.goodsIn'),
-    );
-    return true;
-  }
-}
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { ApplicationService } from '@core/application';
+import { Config } from '@core/config';
+import { first } from 'rxjs/operators';
+import { z } from 'zod';
+
+@Injectable({ providedIn: 'root' })
+export class CanActivateGoodsInGuard {
+  constructor(
+    private readonly _applicationService: ApplicationService,
+    private readonly _config: Config,
+  ) {}
+
+  async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+    const pid = this._config.get('process.ids.goodsIn', z.number());
+    const process = await this._applicationService
+      .getProcessById$(pid)
+      .pipe(first())
+      .toPromise();
+    if (!process) {
+      await this._applicationService.createProcess({
+        id: this._config.get('process.ids.goodsIn'),
+        type: 'goods-in',
+        section: 'branch',
+        name: 'Abholfach',
+      });
+    }
+    this._applicationService.activateProcess(
+      this._config.get('process.ids.goodsIn'),
+    );
+    return true;
+  }
+}

apps/isa-app/src/app/preview/index.ts

@@ -1,3 +0,0 @@
-// start:ng42.barrel
-export * from './preview.component';
-// end:ng42.barrel

apps/isa-app/src/app/preview/preview.component.css

@@ -1,3 +0,0 @@
-:host {
-  @apply grid min-h-screen content-center justify-center;
-}

apps/isa-app/src/app/preview/preview.component.html

@@ -1,10 +0,0 @@
-<h1>Platform: {{ platform | json }}</h1>
-<br />
-<h1>{{ appVersion }}</h1>
-<br />
-<h1>{{ userAgent }}</h1>
-<br />
-<h1>Navigator: {{ navigator | json }}</h1>
-<br />
-<br />
-<h1>Device: {{ device }}</h1>

apps/isa-app/src/app/preview/preview.component.ts

@@ -1,56 +0,0 @@
-import { Platform, PlatformModule } from '@angular/cdk/platform';
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { BranchDTO } from '@generated/swagger/checkout-api';
-import { BehaviorSubject } from 'rxjs';
-
-@Component({
-  selector: 'app-preview',
-  templateUrl: 'preview.component.html',
-  styleUrls: ['preview.component.css'],
-  imports: [CommonModule, PlatformModule],
-})
-export class PreviewComponent {
-  selectedBranch$ = new BehaviorSubject<BranchDTO>({});
-
-  get appVersion() {
-    return 'App Version: ' + (window.navigator as any).appVersion;
-  }
-
-  get userAgent() {
-    return 'User Agent: ' + (window.navigator as any).userAgent;
-  }
-
-  get navigator() {
-    const nav = {};
-    for (const i in window.navigator) nav[i] = navigator[i];
-    return nav;
-  }
-
-  get platform() {
-    return this._platform;
-  }
-
-  get device() {
-    const isIpadNative = this._platform.IOS && !this._platform.SAFARI;
-    const isIpadMini6Native = window?.navigator?.userAgent?.includes('Macintosh') && !this._platform.SAFARI;
-    const isNative = isIpadNative || isIpadMini6Native;
-    const isPWA = this._platform.IOS && this._platform.SAFARI;
-    const isDesktop = !isNative && !isPWA;
-    if (isNative) {
-      if (isIpadMini6Native) {
-        return 'IPAD mini 6 Native App';
-      } else if (isIpadNative) {
-        return 'IPAD mini 2 Native App or IPAD mini 5 Native App';
-      }
-    } else if (isPWA) {
-      return 'IPAD Safari PWA';
-    } else if (isDesktop) return 'Desktop or Macintosh';
-  }
-
-  constructor(private readonly _platform: Platform) {}
-
-  setNewBranch(branch: BranchDTO) {
-    this.selectedBranch$.next(branch);
-  }
-}

apps/isa-app/src/app/resolvers/index.ts

@@ -1,4 +1,2 @@
-// start:ng42.barrel
-export * from './process-id.resolver';
-export * from './section.resolver';
-// end:ng42.barrel
+export * from './process-id.resolver';
+export * from './section.resolver';

apps/isa-app/src/config/config.json

@@ -1,87 +1,86 @@
-{
-  "title": "ISA - Local",
-  "silentRefresh": {
-    "interval": 300000
-  },
-  "debug": true,
-  "dev-scanner": true,
-  "@cdn/product-image": {
-    "url": "https://produktbilder.paragon-data.net"
-  },
-  "@core/auth": {
-    "issuer": "https://sso-test.paragon-data.de",
-    "clientId": "isa-client",
-    "responseType": "code",
-    "scope": "openid profile cmf_user isa-isa-webapi isa-checkout-webapi isa-cat-webapi isa-ava-webapi isa-crm-webapi isa-review-webapi isa-kpi-webapi isa-oms-webapi isa-nbo-webapi isa-print-webapi eis-service isa-inv-webapi isa-wws-webapi",
-    "showDebugInformation": true
-  },
-  "@core/logger": {
-    "logLevel": "debug"
-  },
-  "@swagger/isa": {
-    "rootUrl": "https://isa-test.paragon-data.net/isa/v1"
-  },
-  "@swagger/cat": {
-    "rootUrl": "https://isa-test.paragon-data.net/catsearch/v6"
-  },
-  "@swagger/av": {
-    "rootUrl": "https://isa-test.paragon-data.net/ava/v6"
-  },
-  "@swagger/checkout": {
-    "rootUrl": "https://isa-test.paragon-data.net/checkout/v6"
-  },
-  "@swagger/crm": {
-    "rootUrl": "https://isa-test.paragon-data.net/crm/v6"
-  },
-  "@swagger/oms": {
-    "rootUrl": "https://isa-test.paragon-data.net/oms/v6"
-  },
-  "@swagger/print": {
-    "rootUrl": "https://isa-test.paragon-data.net/print/v1"
-  },
-  "@swagger/eis": {
-    "rootUrl": "https://filialinformationsystem-test.paragon-systems.de/eiswebapi/v1"
-  },
-  "@swagger/remi": {
-    "rootUrl": "https://isa-test.paragon-data.net/inv/v6"
-  },
-  "@swagger/wws": {
-    "rootUrl": "https://isa-test.paragon-data.net/wws/v1"
-  },
-  "@domain/checkout": {
-    "olaExpiration": "5m"
-  },
-  "hubs": {
-    "notifications": {
-      "url": "https://isa-test.paragon-data.net/isa/v1/rt",
-      "enableAutomaticReconnect": false,
-      "httpOptions": {
-        "transport": 1,
-        "logMessageContent": true,
-        "skipNegotiation": true
-      }
-    }
-  },
-  "process": {
-    "ids": {
-      "goodsOut": 1000,
-      "goodsIn": 2000,
-      "taskCalendar": 3000,
-      "remission": 4000,
-      "packageInspection": 5000,
-      "assortment": 6000,
-      "pickupShelf": 7000
-    }
-  },
-  "checkForUpdates": 3600000,
-  "licence": {
-    "scandit": "Ae8F2Wx2RMq5Lvn7UUAlWzVFZTt2+ubMAF8XtDpmPlNkBeG/LWs1M7AbgDW0LQqYLnszClEENaEHS56/6Ts2vrJ1Ux03CXUjK3jUvZpF5OchXR1CpnmpepJ6WxPCd7LMVHUGG1BbwPLDTFjP3y8uT0caTSmmGrYQWAs4CZcEF+ZBabP0z7vfm+hCZF/ebj9qqCJZcW8nH/n19hohshllzYBjFXjh87P2lIh1s6yZS3OaQWWXo/o0AKdxx7T6CVyR0/G5zq6uYJWf6rs3euUBEhpzOZHbHZK86Lvy2AVBEyVkkcttlDW1J2fA4l1W1JV/Xibz8AQV6kG482EpGF42KEoK48paZgX3e1AQsqUtmqzw294dcP4zMVstnw5/WrwKKi/5E/nOOJT2txYP1ZufIjPrwNFsqTlv7xCQlHjMzFGYwT816yD5qLRLbwOtjrkUPXNZLZ06T4upvWwJDmm8XgdeoDqMjHdcO4lwji1bl9EiIYJ/2qnsk9yZ2FqSaHzn4cbiL0f5u2HFlNAP0GUujGRlthGhHi6o4dFU+WAxKsFMKVt+SfoQUazNKHFVQgiAklTIZxIc/HUVzRvOLMxf+wFDerraBtcqGJg+g/5mrWYqeDBGhCBHtKiYf6244IJ4afzNTiH1/30SJcRzXwbEa3A7q1fJTx9/nLTOfVPrJKBQs7f/OQs2dA7LDCel8mzXdbjvsNQaeU5+iCIAq6zbTNKy1xT8wwj+VZrQmtNJs+qeznD+u29nCM24h8xCmRpvNPo4/Mww/lrTNrrNwLBSn1pMIwsH7yS9hH0v0oNAM3A6bVtk1D9qEkbyw+xZa+MZGpMP0D0CdcsqHalPcm5r/Ik="
-  },
-  "gender": {
-    "0": "Keine Anrede",
-    "1": "Enby",
-    "2": "Herr",
-    "4": "Frau"
-  },
-  "@shared/icon": "/assets/icons.json"
-}
+{
+  "title": "ISA - Local",
+  "silentRefresh": {
+    "interval": 300000
+  },
+  "debug": true,
+  "dev-scanner": true,
+  "@cdn/product-image": {
+    "url": "https://produktbilder.paragon-data.net"
+  },
+  "@core/auth": {
+    "issuer": "https://sso-test.paragon-data.de",
+    "clientId": "isa-client",
+    "responseType": "code",
+    "scope": "openid profile cmf_user isa-isa-webapi isa-checkout-webapi isa-cat-webapi isa-ava-webapi isa-crm-webapi isa-review-webapi isa-kpi-webapi isa-oms-webapi isa-nbo-webapi isa-print-webapi eis-service isa-inv-webapi isa-wws-webapi",
+    "showDebugInformation": true
+  },
+  "@core/logger": {
+    "logLevel": "debug"
+  },
+  "@swagger/isa": {
+    "rootUrl": "https://isa-test.paragon-data.net/isa/v1"
+  },
+  "@swagger/cat": {
+    "rootUrl": "https://isa-test.paragon-data.net/catsearch/v6"
+  },
+  "@swagger/av": {
+    "rootUrl": "https://isa-test.paragon-data.net/ava/v6"
+  },
+  "@swagger/checkout": {
+    "rootUrl": "https://isa-test.paragon-data.net/checkout/v6"
+  },
+  "@swagger/crm": {
+    "rootUrl": "https://isa-test.paragon-data.net/crm/v6"
+  },
+  "@swagger/oms": {
+    "rootUrl": "https://isa-test.paragon-data.net/oms/v6"
+  },
+  "@swagger/print": {
+    "rootUrl": "https://isa-test.paragon-data.net/print/v1"
+  },
+  "@swagger/eis": {
+    "rootUrl": "https://filialinformationsystem-test.paragon-systems.de/eiswebapi/v1"
+  },
+  "@swagger/remi": {
+    "rootUrl": "https://isa-test.paragon-data.net/inv/v6"
+  },
+  "@swagger/wws": {
+    "rootUrl": "https://isa-test.paragon-data.net/wws/v1"
+  },
+  "@domain/checkout": {
+    "olaExpiration": "5m"
+  },
+  "hubs": {
+    "notifications": {
+      "url": "https://isa-test.paragon-data.net/isa/v1/rt",
+      "enableAutomaticReconnect": false,
+      "httpOptions": {
+        "transport": 1,
+        "logMessageContent": true,
+        "skipNegotiation": true
+      }
+    }
+  },
+  "process": {
+    "ids": {
+      "goodsOut": 1000,
+      "goodsIn": 2000,
+      "taskCalendar": 3000,
+      "packageInspection": 5000,
+      "assortment": 6000,
+      "pickupShelf": 2000
+    }
+  },
+  "checkForUpdates": 3600000,
+  "licence": {
+    "scandit": "Ae8F2Wx2RMq5Lvn7UUAlWzVFZTt2+ubMAF8XtDpmPlNkBeG/LWs1M7AbgDW0LQqYLnszClEENaEHS56/6Ts2vrJ1Ux03CXUjK3jUvZpF5OchXR1CpnmpepJ6WxPCd7LMVHUGG1BbwPLDTFjP3y8uT0caTSmmGrYQWAs4CZcEF+ZBabP0z7vfm+hCZF/ebj9qqCJZcW8nH/n19hohshllzYBjFXjh87P2lIh1s6yZS3OaQWWXo/o0AKdxx7T6CVyR0/G5zq6uYJWf6rs3euUBEhpzOZHbHZK86Lvy2AVBEyVkkcttlDW1J2fA4l1W1JV/Xibz8AQV6kG482EpGF42KEoK48paZgX3e1AQsqUtmqzw294dcP4zMVstnw5/WrwKKi/5E/nOOJT2txYP1ZufIjPrwNFsqTlv7xCQlHjMzFGYwT816yD5qLRLbwOtjrkUPXNZLZ06T4upvWwJDmm8XgdeoDqMjHdcO4lwji1bl9EiIYJ/2qnsk9yZ2FqSaHzn4cbiL0f5u2HFlNAP0GUujGRlthGhHi6o4dFU+WAxKsFMKVt+SfoQUazNKHFVQgiAklTIZxIc/HUVzRvOLMxf+wFDerraBtcqGJg+g/5mrWYqeDBGhCBHtKiYf6244IJ4afzNTiH1/30SJcRzXwbEa3A7q1fJTx9/nLTOfVPrJKBQs7f/OQs2dA7LDCel8mzXdbjvsNQaeU5+iCIAq6zbTNKy1xT8wwj+VZrQmtNJs+qeznD+u29nCM24h8xCmRpvNPo4/Mww/lrTNrrNwLBSn1pMIwsH7yS9hH0v0oNAM3A6bVtk1D9qEkbyw+xZa+MZGpMP0D0CdcsqHalPcm5r/Ik="
+  },
+  "gender": {
+    "0": "Keine Anrede",
+    "1": "Enby",
+    "2": "Herr",
+    "4": "Frau"
+  },
+  "@shared/icon": "/assets/icons.json"
+}

apps/isa-app/src/core/application/application.service.ts

@@ -1,174 +1,196 @@
-import { Injectable } from '@angular/core';
-import { Store } from '@ngrx/store';
-import { BranchDTO } from '@generated/swagger/checkout-api';
-import { isBoolean, isNumber } from '@utils/common';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { first, map, switchMap } from 'rxjs/operators';
-import { ApplicationProcess } from './defs';
-import {
-  removeProcess,
-  selectSection,
-  selectProcesses,
-  setSection,
-  addProcess,
-  setActivatedProcess,
-  selectActivatedProcess,
-  patchProcess,
-  patchProcessData,
-  selectTitle,
-  setTitle,
-} from './store';
-
-@Injectable()
-export class ApplicationService {
-  private activatedProcessIdSubject = new BehaviorSubject<number>(undefined);
-
-  get activatedProcessId() {
-    return this.activatedProcessIdSubject.value;
-  }
-
-  get activatedProcessId$() {
-    return this.activatedProcessIdSubject.asObservable();
-  }
-
-  constructor(private store: Store) {}
-
-  getProcesses$(section?: 'customer' | 'branch') {
-    const processes$ = this.store.select(selectProcesses);
-    return processes$.pipe(
-      map((processes) => processes.filter((process) => (section ? process.section === section : true))),
-    );
-  }
-
-  getProcessById$(processId: number): Observable<ApplicationProcess> {
-    return this.getProcesses$().pipe(map((processes) => processes.find((process) => process.id === processId)));
-  }
-
-  getSection$() {
-    return this.store.select(selectSection);
-  }
-
-  getTitle$() {
-    return this.getSection$().pipe(
-      map((section) => {
-        return section === 'customer' ? 'Kundenbereich' : 'Filialbereich';
-      }),
-    );
-  }
-
-  /** @deprecated */
-  getActivatedProcessId$() {
-    return this.store.select(selectActivatedProcess).pipe(map((process) => process?.id));
-  }
-
-  activateProcess(activatedProcessId: number) {
-    this.store.dispatch(setActivatedProcess({ activatedProcessId }));
-    this.activatedProcessIdSubject.next(activatedProcessId);
-  }
-
-  removeProcess(processId: number) {
-    this.store.dispatch(removeProcess({ processId }));
-  }
-
-  patchProcess(processId: number, changes: Partial<ApplicationProcess>) {
-    this.store.dispatch(patchProcess({ processId, changes }));
-  }
-
-  patchProcessData(processId: number, data: Record<string, any>) {
-    this.store.dispatch(patchProcessData({ processId, data }));
-  }
-
-  getSelectedBranch$(processId?: number): Observable<BranchDTO> {
-    if (!processId) {
-      return this.activatedProcessId$.pipe(
-        switchMap((processId) => this.getProcessById$(processId).pipe(map((process) => process?.data?.selectedBranch))),
-      );
-    }
-
-    return this.getProcessById$(processId).pipe(map((process) => process?.data?.selectedBranch));
-  }
-
-  readonly REGEX_PROCESS_NAME = /^Vorgang \d+$/;
-
-  async createCustomerProcess(processId?: number): Promise<ApplicationProcess> {
-    const processes = await this.getProcesses$('customer').pipe(first()).toPromise();
-
-    const processIds = processes.filter((x) => this.REGEX_PROCESS_NAME.test(x.name)).map((x) => +x.name.split(' ')[1]);
-
-    const maxId = processIds.length > 0 ? Math.max(...processIds) : 0;
-
-    const process: ApplicationProcess = {
-      id: processId ?? Date.now(),
-      type: 'cart',
-      name: `Vorgang ${maxId + 1}`,
-      section: 'customer',
-      closeable: true,
-    };
-
-    await this.createProcess(process);
-
-    return process;
-  }
-
-  async createProcess(process: ApplicationProcess) {
-    const existingProcess = await this.getProcessById$(process?.id).pipe(first()).toPromise();
-    if (existingProcess?.id === process?.id) {
-      throw new Error('Process Id existiert bereits');
-    }
-
-    if (!isNumber(process.id)) {
-      throw new Error('Process Id nicht gesetzt');
-    }
-
-    if (!isBoolean(process.closeable)) {
-      process.closeable = true;
-    }
-
-    if (!isBoolean(process.confirmClosing)) {
-      process.confirmClosing = true;
-    }
-
-    process.created = this._createTimestamp();
-    process.activated = 0;
-    this.store.dispatch(addProcess({ process }));
-  }
-
-  setSection(section: 'customer' | 'branch') {
-    this.store.dispatch(setSection({ section }));
-  }
-
-  getLastActivatedProcessWithSectionAndType$(
-    section: 'customer' | 'branch',
-    type: string,
-  ): Observable<ApplicationProcess> {
-    return this.getProcesses$(section).pipe(
-      map((processes) =>
-        processes
-          ?.filter((process) => process.type === type)
-          ?.reduce((latest, current) => {
-            if (!latest) {
-              return current;
-            }
-            return latest?.activated > current?.activated ? latest : current;
-          }, undefined),
-      ),
-    );
-  }
-
-  getLastActivatedProcessWithSection$(section: 'customer' | 'branch'): Observable<ApplicationProcess> {
-    return this.getProcesses$(section).pipe(
-      map((processes) =>
-        processes?.reduce((latest, current) => {
-          if (!latest) {
-            return current;
-          }
-          return latest?.activated > current?.activated ? latest : current;
-        }, undefined),
-      ),
-    );
-  }
-
-  private _createTimestamp() {
-    return Date.now();
-  }
-}
+import { Injectable } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { BranchDTO } from '@generated/swagger/checkout-api';
+import { isBoolean, isNumber } from '@utils/common';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { first, map, switchMap } from 'rxjs/operators';
+import { ApplicationProcess } from './defs';
+import {
+  removeProcess,
+  selectSection,
+  selectProcesses,
+  setSection,
+  addProcess,
+  setActivatedProcess,
+  selectActivatedProcess,
+  patchProcess,
+  patchProcessData,
+  selectTitle,
+  setTitle,
+} from './store';
+
+@Injectable()
+export class ApplicationService {
+  private activatedProcessIdSubject = new BehaviorSubject<number>(undefined);
+
+  get activatedProcessId() {
+    return this.activatedProcessIdSubject.value;
+  }
+
+  get activatedProcessId$() {
+    return this.activatedProcessIdSubject.asObservable();
+  }
+
+  constructor(private store: Store) {}
+
+  getProcesses$(section?: 'customer' | 'branch') {
+    const processes$ = this.store.select(selectProcesses);
+    return processes$.pipe(
+      map((processes) =>
+        processes.filter((process) =>
+          section ? process.section === section : true,
+        ),
+      ),
+    );
+  }
+
+  getProcessById$(processId: number): Observable<ApplicationProcess> {
+    return this.getProcesses$().pipe(
+      map((processes) => processes.find((process) => process.id === processId)),
+    );
+  }
+
+  getSection$() {
+    return this.store.select(selectSection);
+  }
+
+  getTitle$() {
+    return this.getSection$().pipe(
+      map((section) => {
+        return section === 'customer' ? 'Kundenbereich' : 'Filialbereich';
+      }),
+    );
+  }
+
+  /** @deprecated */
+  getActivatedProcessId$() {
+    return this.store
+      .select(selectActivatedProcess)
+      .pipe(map((process) => process?.id));
+  }
+
+  activateProcess(activatedProcessId: number) {
+    this.store.dispatch(setActivatedProcess({ activatedProcessId }));
+    this.activatedProcessIdSubject.next(activatedProcessId);
+  }
+
+  removeProcess(processId: number) {
+    this.store.dispatch(removeProcess({ processId }));
+  }
+
+  patchProcess(processId: number, changes: Partial<ApplicationProcess>) {
+    this.store.dispatch(patchProcess({ processId, changes }));
+  }
+
+  patchProcessData(processId: number, data: Record<string, any>) {
+    this.store.dispatch(patchProcessData({ processId, data }));
+  }
+
+  getSelectedBranch$(processId?: number): Observable<BranchDTO> {
+    if (!processId) {
+      return this.activatedProcessId$.pipe(
+        switchMap((processId) =>
+          this.getProcessById$(processId).pipe(
+            map((process) => process?.data?.selectedBranch),
+          ),
+        ),
+      );
+    }
+
+    return this.getProcessById$(processId).pipe(
+      map((process) => process?.data?.selectedBranch),
+    );
+  }
+
+  readonly REGEX_PROCESS_NAME = /^Vorgang \d+$/;
+
+  async createCustomerProcess(processId?: number): Promise<ApplicationProcess> {
+    const processes = await this.getProcesses$('customer')
+      .pipe(first())
+      .toPromise();
+
+    const processIds = processes
+      .filter((x) => this.REGEX_PROCESS_NAME.test(x.name))
+      .map((x) => +x.name.split(' ')[1]);
+
+    const maxId = processIds.length > 0 ? Math.max(...processIds) : 0;
+
+    const process: ApplicationProcess = {
+      id: processId ?? Date.now(),
+      type: 'cart',
+      name: `Vorgang ${maxId + 1}`,
+      section: 'customer',
+      closeable: true,
+    };
+
+    await this.createProcess(process);
+
+    return process;
+  }
+
+  async createProcess(process: ApplicationProcess) {
+    const existingProcess = await this.getProcessById$(process?.id)
+      .pipe(first())
+      .toPromise();
+    if (existingProcess?.id === process?.id) {
+      throw new Error('Process Id existiert bereits');
+    }
+
+    if (!isNumber(process.id)) {
+      throw new Error('Process Id nicht gesetzt');
+    }
+
+    if (!isBoolean(process.closeable)) {
+      process.closeable = true;
+    }
+
+    if (!isBoolean(process.confirmClosing)) {
+      process.confirmClosing = true;
+    }
+
+    process.created = this._createTimestamp();
+    process.activated = 0;
+    this.store.dispatch(addProcess({ process }));
+  }
+
+  setSection(section: 'customer' | 'branch') {
+    this.store.dispatch(setSection({ section }));
+  }
+
+  getLastActivatedProcessWithSectionAndType$(
+    section: 'customer' | 'branch',
+    type: string,
+  ): Observable<ApplicationProcess> {
+    return this.getProcesses$(section).pipe(
+      map((processes) =>
+        processes
+          ?.filter((process) => process.type === type)
+          ?.reduce((latest, current) => {
+            if (!latest) {
+              return current;
+            }
+            return latest?.activated > current?.activated ? latest : current;
+          }, undefined),
+      ),
+    );
+  }
+
+  getLastActivatedProcessWithSection$(
+    section: 'customer' | 'branch',
+  ): Observable<ApplicationProcess> {
+    return this.getProcesses$(section).pipe(
+      map((processes) =>
+        processes?.reduce((latest, current) => {
+          if (!latest) {
+            return current;
+          }
+          return latest?.activated > current?.activated ? latest : current;
+        }, undefined),
+      ),
+    );
+  }
+
+  private _createTimestamp() {
+    return Date.now();
+  }
+}

apps/isa-app/src/core/command/command.service.ts

@@ -1,54 +1,54 @@
-import { Injectable, Injector, Optional, SkipSelf } from '@angular/core';
-import { ActionHandler } from './action-handler.interface';
-import { FEATURE_ACTION_HANDLERS, ROOT_ACTION_HANDLERS } from './tokens';
-
-@Injectable()
-export class CommandService {
-  constructor(
-    private injector: Injector,
-    @Optional() @SkipSelf() private _parent: CommandService,
-  ) {}
-
-  async handleCommand<T>(command: string, data?: T): Promise<T> {
-    const actions = this.getActions(command);
-
-    for (const action of actions) {
-      const handler = this.getActionHandler(action);
-      if (!handler) {
-        console.error(
-          'CommandService.handleCommand',
-          'Action Handler does not exist',
-          { action },
-        );
-        throw new Error('Action Handler does not exist');
-      }
-      data = await handler.handler(data, this);
-    }
-    return data;
-  }
-
-  getActions(command: string) {
-    return command?.split('|') || [];
-  }
-
-  getActionHandler(action: string): ActionHandler | undefined {
-    const featureActionHandlers: ActionHandler[] = this.injector.get(
-      FEATURE_ACTION_HANDLERS,
-      [],
-    );
-    const rootActionHandlers: ActionHandler[] = this.injector.get(
-      ROOT_ACTION_HANDLERS,
-      [],
-    );
-
-    let handler = [...featureActionHandlers, ...rootActionHandlers].find(
-      (handler) => handler.action === action,
-    );
-
-    if (this._parent && !handler) {
-      handler = this._parent.getActionHandler(action);
-    }
-
-    return handler;
-  }
-}
+import { Injectable, Injector, Optional, SkipSelf } from '@angular/core';
+import { ActionHandler } from './action-handler.interface';
+import { FEATURE_ACTION_HANDLERS, ROOT_ACTION_HANDLERS } from './tokens';
+
+@Injectable()
+export class CommandService {
+  constructor(
+    private injector: Injector,
+    @Optional() @SkipSelf() private _parent: CommandService,
+  ) {}
+
+  async handleCommand<T>(command: string, data: T): Promise<T> {
+    const actions = this.getActions(command);
+
+    for (const action of actions) {
+      const handler = this.getActionHandler(action);
+      if (!handler) {
+        console.error(
+          'CommandService.handleCommand',
+          'Action Handler does not exist',
+          { action },
+        );
+        throw new Error('Action Handler does not exist');
+      }
+      data = await handler.handler(data, this);
+    }
+    return data;
+  }
+
+  getActions(command: string) {
+    return command?.split('|') || [];
+  }
+
+  getActionHandler(action: string): ActionHandler | undefined {
+    const featureActionHandlers: ActionHandler[] = this.injector.get(
+      FEATURE_ACTION_HANDLERS,
+      [],
+    );
+    const rootActionHandlers: ActionHandler[] = this.injector.get(
+      ROOT_ACTION_HANDLERS,
+      [],
+    );
+
+    let handler = [...featureActionHandlers, ...rootActionHandlers].find(
+      (handler) => handler.action === action,
+    );
+
+    if (this._parent && !handler) {
+      handler = this._parent.getActionHandler(action);
+    }
+
+    return handler;
+  }
+}

apps/isa-app/src/domain/checkout/checkout.service.ts

@@ -1251,7 +1251,12 @@ export class DomainCheckoutService {
 
     await this.updateItemInShoppingCart({
       processId,
-      update: { availability },
+      update: {
+        availability: {
+          ...availability,
+          price: item?.availability?.price ?? availability?.price,
+        }, // #5488 After Refreshing Availabilities in Cart make sure to keep the original selected price from purchasing options modal
+      },
       shoppingCartItemId: item.id,
     }).toPromise();
 

apps/isa-app/src/domain/checkout/store/domain-checkout.reducer.ts

@@ -35,7 +35,7 @@ const _domainCheckoutReducer = createReducer(
 
       const now = Date.now();
 
-      for (let shoppingCartItem of addedShoppingCartItems) {
+      for (const shoppingCartItem of addedShoppingCartItems) {
         if (shoppingCartItem.features?.orderType) {
           entity.itemAvailabilityTimestamp[
             `${shoppingCartItem.id}_${shoppingCartItem.features.orderType}`
@@ -275,7 +275,7 @@ function getOrCreateCheckoutEntity({
   entities: Dictionary<CheckoutEntity>;
   processId: number;
 }): CheckoutEntity {
-  let entity = entities[processId];
+  const entity = entities[processId];
 
   if (isNullOrUndefined(entity)) {
     return {

apps/isa-app/src/modal/purchase-options/purchase-options-modal.service.ts

@@ -12,6 +12,7 @@ import {
 } from '@isa/crm/data-access';
 import { TabService } from '@isa/core/tabs';
 import { BranchDTO } from '@generated/swagger/checkout-api';
+import { CheckoutMetadataService } from '@isa/checkout/data-access';
 
 /**
  * Service for opening and managing the Purchase Options Modal.
@@ -39,6 +40,7 @@ export class PurchaseOptionsModalService {
   #uiModal = inject(UiModalService);
   #tabService = inject(TabService);
   #crmTabMetadataService = inject(CrmTabMetadataService);
+  #checkoutMetadataService = inject(CheckoutMetadataService);
   #customerFacade = inject(CustomerFacade);
 
   /**
@@ -74,7 +76,10 @@ export class PurchaseOptionsModalService {
     };
 
     context.selectedCustomer = await this.#getSelectedCustomer(data);
-    context.selectedBranch = this.#getSelectedBranch(data.tabId);
+    context.selectedBranch = this.#getSelectedBranch(
+      data.tabId,
+      data.useRedemptionPoints,
+    );
     return this.#uiModal.open<string, PurchaseOptionsModalContext>({
       content: PurchaseOptionsModalComponent,
       data: context,
@@ -95,7 +100,10 @@ export class PurchaseOptionsModalService {
     return this.#customerFacade.fetchCustomer({ customerId });
   }
 
-  #getSelectedBranch(tabId: number): BranchDTO | undefined {
+  #getSelectedBranch(
+    tabId: number,
+    useRedemptionPoints: boolean,
+  ): BranchDTO | undefined {
     const tab = untracked(() =>
       this.#tabService.entities().find((t) => t.id === tabId),
     );
@@ -104,6 +112,10 @@ export class PurchaseOptionsModalService {
       return undefined;
     }
 
+    if (useRedemptionPoints) {
+      return this.#checkoutMetadataService.getSelectedBranch(tabId);
+    }
+
     const legacyProcessData = tab?.metadata?.process_data;
 
     if (

apps/isa-app/src/page/assortment/routes.ts

@@ -1,14 +1,19 @@
-import { Routes } from '@angular/router';
-import { AssortmentComponent } from './assortment.component';
-import { PriceUpdateComponent } from './price-update/price-update.component';
-
-export const routes: Routes = [
-  {
-    path: '',
-    component: AssortmentComponent,
-    children: [
-      { path: 'price-update', component: PriceUpdateComponent },
-      { path: '**', redirectTo: 'price-update' },
-    ],
-  },
-];
+import { Routes } from '@angular/router';
+import { AssortmentComponent } from './assortment.component';
+import { PriceUpdateComponent } from './price-update/price-update.component';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: AssortmentComponent,
+    title: 'Sortiment',
+    children: [
+      {
+        path: 'price-update',
+        component: PriceUpdateComponent,
+        title: 'Sortiment - Preisänderung',
+      },
+      { path: '**', redirectTo: 'price-update' },
+    ],
+  },
+];

apps/isa-app/src/page/catalog/page-catalog-routing.module.ts

@@ -1,125 +1,135 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { ArticleDetailsComponent } from './article-details/article-details.component';
-import { ArticleSearchComponent } from './article-search/article-search.component';
-import { ArticleSearchFilterComponent } from './article-search/search-filter/search-filter.component';
-import { ArticleSearchMainComponent } from './article-search/search-main/search-main.component';
-import { ArticleSearchResultsComponent } from './article-search/search-results/search-results.component';
-import { PageCatalogComponent } from './page-catalog.component';
-import { MatomoRouteData } from 'ngx-matomo-client';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: PageCatalogComponent,
-    data: {
-      matomo: {
-        title: 'Artikelsuche',
-      } as MatomoRouteData,
-    },
-    children: [
-      {
-        path: 'filter',
-        component: ArticleSearchFilterComponent,
-        data: {
-          matomo: {
-            title: 'Artikelsuche - Filter',
-          } as MatomoRouteData,
-        },
-      },
-      {
-        path: 'filter/:id',
-        component: ArticleSearchFilterComponent,
-        data: {
-          matomo: {
-            title: 'Artikelsuche - Filter',
-          } as MatomoRouteData,
-        },
-      },
-      {
-        path: 'search',
-        component: ArticleSearchComponent,
-        outlet: 'side',
-        data: {
-          matomo: {
-            title: 'Artikelsuche',
-          } as MatomoRouteData,
-        },
-        children: [
-          {
-            path: '',
-            component: ArticleSearchMainComponent,
-          },
-        ],
-      },
-      {
-        path: 'results',
-        component: ArticleSearchResultsComponent,
-        data: {
-          matomo: {
-            title: 'Artikelsuche - Trefferliste',
-          } as MatomoRouteData,
-        },
-      },
-      {
-        path: 'results',
-        component: ArticleSearchResultsComponent,
-        outlet: 'side',
-        data: {
-          matomo: {
-            title: 'Artikelsuche - Trefferliste',
-          } as MatomoRouteData,
-        },
-      },
-      {
-        path: 'results/:id',
-        component: ArticleSearchResultsComponent,
-        outlet: 'side',
-        data: {
-          matomo: {
-            title: 'Artikelsuche - Artikeldetails',
-          } as MatomoRouteData,
-        },
-      },
-      {
-        path: 'results/:ean/ean',
-        component: ArticleSearchResultsComponent,
-        outlet: 'side',
-        data: {
-          matomo: {
-            title: 'Artikelsuche - Artikeldetails (EAN)',
-          } as MatomoRouteData,
-        },
-      },
-      {
-        path: 'details/:id',
-        component: ArticleDetailsComponent,
-        data: {
-          matomo: {
-            title: 'Artikelsuche - Artikeldetails (ID)',
-          } as MatomoRouteData,
-        },
-      },
-      {
-        path: 'details/:ean/ean',
-        component: ArticleDetailsComponent,
-        data: {
-          matomo: {
-            title: 'Artikelsuche - Artikeldetails (EAN)',
-          } as MatomoRouteData,
-        },
-      },
-      {
-        path: '',
-        pathMatch: 'full',
-        redirectTo: 'filter',
-      },
-    ],
-  },
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class PageCatalogRoutingModule {}
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ArticleDetailsComponent } from './article-details/article-details.component';
+import { ArticleSearchComponent } from './article-search/article-search.component';
+import { ArticleSearchFilterComponent } from './article-search/search-filter/search-filter.component';
+import { ArticleSearchMainComponent } from './article-search/search-main/search-main.component';
+import { ArticleSearchResultsComponent } from './article-search/search-results/search-results.component';
+import { PageCatalogComponent } from './page-catalog.component';
+import { MatomoRouteData } from 'ngx-matomo-client';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PageCatalogComponent,
+    title: 'Artikelsuche',
+    data: {
+      matomo: {
+        title: 'Artikelsuche',
+      } as MatomoRouteData,
+    },
+    children: [
+      {
+        path: 'filter',
+        component: ArticleSearchFilterComponent,
+        title: 'Artikelsuche - Filter',
+        data: {
+          matomo: {
+            title: 'Artikelsuche - Filter',
+          } as MatomoRouteData,
+        },
+      },
+      {
+        path: 'filter/:id',
+        component: ArticleSearchFilterComponent,
+        title: 'Artikelsuche - Filter',
+        data: {
+          matomo: {
+            title: 'Artikelsuche - Filter',
+          } as MatomoRouteData,
+        },
+      },
+      {
+        path: 'search',
+        component: ArticleSearchComponent,
+        outlet: 'side',
+        title: 'Artikelsuche',
+        data: {
+          matomo: {
+            title: 'Artikelsuche',
+          } as MatomoRouteData,
+        },
+        children: [
+          {
+            path: '',
+            component: ArticleSearchMainComponent,
+          },
+        ],
+      },
+      {
+        path: 'results',
+        component: ArticleSearchResultsComponent,
+        title: 'Artikelsuche - Trefferliste',
+        data: {
+          matomo: {
+            title: 'Artikelsuche - Trefferliste',
+          } as MatomoRouteData,
+        },
+      },
+      {
+        path: 'results',
+        component: ArticleSearchResultsComponent,
+        outlet: 'side',
+        title: 'Artikelsuche - Trefferliste',
+        data: {
+          matomo: {
+            title: 'Artikelsuche - Trefferliste',
+          } as MatomoRouteData,
+        },
+      },
+      {
+        path: 'results/:id',
+        component: ArticleSearchResultsComponent,
+        outlet: 'side',
+        title: 'Artikelsuche - Artikeldetails',
+        data: {
+          matomo: {
+            title: 'Artikelsuche - Artikeldetails',
+          } as MatomoRouteData,
+        },
+      },
+      {
+        path: 'results/:ean/ean',
+        component: ArticleSearchResultsComponent,
+        outlet: 'side',
+        title: 'Artikelsuche - Artikeldetails (EAN)',
+        data: {
+          matomo: {
+            title: 'Artikelsuche - Artikeldetails (EAN)',
+          } as MatomoRouteData,
+        },
+      },
+      {
+        path: 'details/:id',
+        component: ArticleDetailsComponent,
+        title: 'Artikelsuche - Artikeldetails (ID)',
+        data: {
+          matomo: {
+            title: 'Artikelsuche - Artikeldetails (ID)',
+          } as MatomoRouteData,
+        },
+      },
+      {
+        path: 'details/:ean/ean',
+        component: ArticleDetailsComponent,
+        title: 'Artikelsuche - Artikeldetails (EAN)',
+        data: {
+          matomo: {
+            title: 'Artikelsuche - Artikeldetails (EAN)',
+          } as MatomoRouteData,
+        },
+      },
+      {
+        path: '',
+        pathMatch: 'full',
+        redirectTo: 'filter',
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class PageCatalogRoutingModule {}

apps/isa-app/src/page/checkout/checkout-review/checkout-review.component.html

@@ -132,7 +132,7 @@
             }
           }
           <page-shopping-cart-item
-            (changeItem)="changeItem($event)"
+            (changeItem)="showPurchasingListModal([$event.shoppingCartItem])"
             (changeDummyItem)="changeDummyItem($event)"
             (changeQuantity)="updateItemQuantity($event)"
             [quantityError]="

apps/isa-app/src/page/checkout/checkout-review/checkout-review.component.ts

@@ -388,26 +388,6 @@ export class CheckoutReviewComponent
     this.openDummyModal({ data: shoppingCartItem, changeDataFromCart: true });
   }
 
-  async changeItem({
-    shoppingCartItem,
-  }: {
-    shoppingCartItem: ShoppingCartItemDTO;
-  }) {
-    const shoppingCart = await firstValueFrom(this.shoppingCart$);
-    const modalRef = await this._purchaseOptionsModalService.open({
-      tabId: this.applicationService.activatedProcessId,
-      shoppingCartId: shoppingCart.id,
-      items: [shoppingCartItem],
-      type: 'update',
-    });
-
-    await firstValueFrom(modalRef.afterClosed$);
-    // Reload Shopping Cart after modal is closed to get updated items
-    this.#checkoutService.reloadShoppingCart({
-      processId: this.applicationService.activatedProcessId,
-    });
-  }
-
   async openPrintModal() {
     const shoppingCart = await this.shoppingCart$.pipe(first()).toPromise();
     this.uiModal.open({

apps/isa-app/src/page/checkout/page-checkout-routing.module.ts

@@ -14,20 +14,24 @@ const routes: Routes = [
       {
         path: 'details',
         component: CheckoutReviewDetailsComponent,
+        title: 'Bestelldetails',
         outlet: 'side',
       },
       {
         path: 'review',
         component: CheckoutReviewComponent,
+        title: 'Bestellung überprüfen',
       },
       {
         path: 'summary',
         component: CheckoutSummaryComponent,
+        title: 'Bestellübersicht',
         canDeactivate: [canDeactivateTabCleanup],
       },
       {
         path: 'summary/:orderIds',
         component: CheckoutSummaryComponent,
+        title: 'Bestellübersicht',
         canDeactivate: [canDeactivateTabCleanup],
       },
       { path: '', pathMatch: 'full', redirectTo: 'review' },

apps/isa-app/src/page/customer-order/customer-order-details/customer-order-details-item/customer-order-details-item.component.html

@@ -1,29 +1,66 @@
 @if (orderItem$ | async; as orderItem) {
   <div #features class="page-customer-order-details-item__features">
     @if (orderItem?.features?.prebooked) {
-      <img [uiOverlayTrigger]="prebookedTooltip" src="/assets/images/tag_icon_preorder.svg" [alt]="orderItem?.features?.prebooked" />
-      <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #prebookedTooltip [closeable]="true">
+      <img
+        [uiOverlayTrigger]="prebookedTooltip"
+        src="/assets/images/tag_icon_preorder.svg"
+        [alt]="orderItem?.features?.prebooked"
+      />
+      <ui-tooltip
+        yPosition="above"
+        xPosition="after"
+        [yOffset]="-11"
+        [xOffset]="-8"
+        #prebookedTooltip
+        [closeable]="true"
+      >
         Artikel wird für Sie vorgemerkt.
       </ui-tooltip>
     }
     @if (notificationsSent$ | async; as notificationsSent) {
       @if (notificationsSent?.NOTIFICATION_EMAIL) {
-        <img [uiOverlayTrigger]="emailTooltip" src="/assets/images/email_bookmark.svg" />
-        <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #emailTooltip [closeable]="true">
+        <img
+          [uiOverlayTrigger]="emailTooltip"
+          src="/assets/images/email_bookmark.svg"
+        />
+        <ui-tooltip
+          yPosition="above"
+          xPosition="after"
+          [yOffset]="-11"
+          [xOffset]="-8"
+          #emailTooltip
+          [closeable]="true"
+        >
           Per E-Mail benachrichtigt
           <br />
-          @for (notification of notificationsSent?.NOTIFICATION_EMAIL; track notification) {
+          @for (
+            notification of notificationsSent?.NOTIFICATION_EMAIL;
+            track notification
+          ) {
             {{ notification | date: 'dd.MM.yyyy | HH:mm' }} Uhr
             <br />
           }
         </ui-tooltip>
       }
       @if (notificationsSent?.NOTIFICATION_SMS) {
-        <img [uiOverlayTrigger]="smsTooltip" src="/assets/images/sms_bookmark.svg" />
-        <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #smsTooltip [closeable]="true">
+        <img
+          [uiOverlayTrigger]="smsTooltip"
+          src="/assets/images/sms_bookmark.svg"
+        />
+        <ui-tooltip
+          yPosition="above"
+          xPosition="after"
+          [yOffset]="-11"
+          [xOffset]="-8"
+          #smsTooltip
+          [closeable]="true"
+        >
           Per SMS benachrichtigt
           <br />
-          @for (notification of notificationsSent?.NOTIFICATION_SMS; track notification) {
+          @for (
+            notification of notificationsSent?.NOTIFICATION_SMS;
+            track notification
+          ) {
             {{ notification | date: 'dd.MM.yyyy | HH:mm' }} Uhr
             <br />
           }
@@ -33,7 +70,10 @@
   </div>
   <div class="page-customer-order-details-item__item-container">
     <div class="page-customer-order-details-item__thumbnail">
-      <img [src]="orderItem.product?.ean | productImage" [alt]="orderItem.product?.name" />
+      <img
+        [src]="orderItem.product?.ean | productImage"
+        [alt]="orderItem.product?.name"
+      />
     </div>
     <div class="page-customer-order-details-item__details">
       <div class="flex flex-row justify-between items-start mb-[1.3125rem]">
@@ -42,19 +82,29 @@
           #elementDistance="uiElementDistance"
           [style.max-width.px]="elementDistance.distanceChange | async"
           class="flex flex-col"
-          >
-          <div class="font-normal mb-[0.375rem]">{{ orderItem.product?.contributors }}</div>
+        >
+          @if (hasRewardPoints$ | async) {
+            <ui-label class="w-10 mb-2">Prämie</ui-label>
+          }
+          <div class="font-normal mb-[0.375rem]">
+            {{ orderItem.product?.contributors }}
+          </div>
           <div>{{ orderItem.product?.name }}</div>
         </h3>
         <div class="history-wrapper flex flex-col items-end justify-center">
-          <button class="cta-history text-p1" (click)="historyClick.emit(orderItem)">Historie</button>
+          <button
+            class="cta-history text-p1"
+            (click)="historyClick.emit(orderItem)"
+          >
+            Historie
+          </button>
           @if (selectable$ | async) {
             <input
               [ngModel]="selected$ | async"
               (ngModelChange)="setSelected($event)"
               class="isa-select-bullet mt-4"
               type="checkbox"
-              />
+            />
           }
         </div>
       </div>
@@ -72,19 +122,26 @@
               [showSpinner]="false"
             ></ui-quantity-dropdown>
           }
-          <span class="overall-quantity">(von {{ orderItem?.overallQuantity }})</span>
+          <span class="overall-quantity"
+            >(von {{ orderItem?.overallQuantity }})</span
+          >
         </div>
       </div>
       @if (!!orderItem.product?.formatDetail) {
         <div class="detail">
           <div class="label">Format</div>
           <div class="value">
-            @if (orderItem?.product?.format && orderItem?.product?.format !== 'UNKNOWN') {
+            @if (
+              orderItem?.product?.format &&
+              orderItem?.product?.format !== 'UNKNOWN'
+            ) {
               <img
                 class="format-icon"
-                [src]="'/assets/images/Icon_' + orderItem.product?.format + '.svg'"
+                [src]="
+                  '/assets/images/Icon_' + orderItem.product?.format + '.svg'
+                "
                 alt="format icon"
-                />
+              />
             }
             <span>{{ orderItem.product?.formatDetail }}</span>
           </div>
@@ -96,10 +153,17 @@
           <div class="value">{{ orderItem.product?.ean }}</div>
         </div>
       }
-      @if (orderItem.price !== undefined) {
+      @if (orderItem.price !== undefined || (hasRewardPoints$ | async)) {
         <div class="detail">
-          <div class="label">Preis</div>
-          <div class="value">{{ orderItem.price | currency: 'EUR' }}</div>
+          @if (hasRewardPoints$ | async) {
+            <div class="label">Prämie</div>
+            <div class="value">
+              {{ rewardPoints$ | async | number: '1.0-0' }} Lesepunkte
+            </div>
+          } @else {
+            <div class="label">Preis</div>
+            <div class="value">{{ orderItem.price | currency: 'EUR' }}</div>
+          }
         </div>
       }
       @if (!!orderItem.retailPrice?.vat?.inPercent) {
@@ -133,14 +197,23 @@
             orderItemFeature(orderItem) === 'Versand' ||
             orderItemFeature(orderItem) === 'B2B-Versand' ||
             orderItemFeature(orderItem) === 'DIG-Versand'
-            ) {
-            {{ orderItem?.estimatedDelivery ? 'Lieferung zwischen' : 'Lieferung ab' }}
+          ) {
+            {{
+              orderItem?.estimatedDelivery
+                ? 'Lieferung zwischen'
+                : 'Lieferung ab'
+            }}
           }
-          @if (orderItemFeature(orderItem) === 'Abholung' || orderItemFeature(orderItem) === 'Rücklage') {
+          @if (
+            orderItemFeature(orderItem) === 'Abholung' ||
+            orderItemFeature(orderItem) === 'Rücklage'
+          ) {
             Abholung ab
           }
         </div>
-        @if (!!orderItem?.estimatedDelivery || !!orderItem?.estimatedShippingDate) {
+        @if (
+          !!orderItem?.estimatedDelivery || !!orderItem?.estimatedShippingDate
+        ) {
           <div class="value bg-[#D8DFE5] rounded w-max px-2">
             @if (!!orderItem?.estimatedDelivery) {
               {{ orderItem?.estimatedDelivery?.start | date: 'dd.MM.yy' }} und
@@ -155,14 +228,22 @@
       </div>
       @if (getOrderItemTrackingData(orderItem); as trackingData) {
         <div class="page-customer-order-details-item__tracking-details">
-          <div class="label">{{ trackingData.length > 1 ? 'Sendungsnummern' : 'Sendungsnummer' }}</div>
+          <div class="label">
+            {{ trackingData.length > 1 ? 'Sendungsnummern' : 'Sendungsnummer' }}
+          </div>
           @for (tracking of trackingData; track tracking) {
             @if (tracking.trackingProvider === 'DHL' && !isNative) {
-              <a class="value text-[#0556B4]" [href]="getTrackingNumberLink(tracking.trackingNumber)" target="_blank">
+              <a
+                class="value text-[#0556B4]"
+                [href]="getTrackingNumberLink(tracking.trackingNumber)"
+                target="_blank"
+              >
                 {{ tracking.trackingProvider }}: {{ tracking.trackingNumber }}
               </a>
             } @else {
-              <p class="value">{{ tracking.trackingProvider }}: {{ tracking.trackingNumber }}</p>
+              <p class="value">
+                {{ tracking.trackingProvider }}: {{ tracking.trackingNumber }}
+              </p>
             }
           }
         </div>
@@ -206,7 +287,9 @@
         @if (!!receipt?.printedDate) {
           <div class="detail">
             <div class="label">Erstellt am</div>
-            <div class="value">{{ receipt?.printedDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
+            <div class="value">
+              {{ receipt?.printedDate | date: 'dd.MM.yy | HH:mm' }} Uhr
+            </div>
           </div>
         }
         @if (!!receipt?.receiptText) {
@@ -219,12 +302,20 @@
           <div class="detail">
             <div class="label">Belegart</div>
             <div class="value">
-              {{ receipt?.receiptType === 1 ? 'Lieferschein' : receipt?.receiptType === 64 ? 'Zahlungsbeleg' : '-' }}
+              {{
+                receipt?.receiptType === 1
+                  ? 'Lieferschein'
+                  : receipt?.receiptType === 64
+                    ? 'Zahlungsbeleg'
+                    : '-'
+              }}
             </div>
           </div>
         }
       }
-      <div class="page-customer-order-details-item__comment flex flex-col items-start mt-[1.625rem]">
+      <div
+        class="page-customer-order-details-item__comment flex flex-col items-start mt-[1.625rem]"
+      >
         <div class="label mb-[0.375rem]">Anmerkung</div>
         <div class="flex flex-row w-full">
           <textarea
@@ -248,17 +339,23 @@
               <button
                 type="reset"
                 class="clear"
-                (click)="specialCommentControl.setValue(''); saveSpecialComment(); triggerResize()"
-                >
+                (click)="
+                  specialCommentControl.setValue('');
+                  saveSpecialComment();
+                  triggerResize()
+                "
+              >
                 <shared-icon icon="close" [size]="24"></shared-icon>
               </button>
             }
-            @if (specialCommentControl?.enabled && specialCommentControl.dirty) {
+            @if (
+              specialCommentControl?.enabled && specialCommentControl.dirty
+            ) {
               <button
                 class="cta-save"
                 type="submit"
                 (click)="saveSpecialComment()"
-                >
+              >
                 Speichern
               </button>
             }

apps/isa-app/src/page/customer-order/customer-order-details/customer-order-details-item/customer-order-details-item.component.ts

@@ -15,12 +15,25 @@ import { DomainOmsService, DomainReceiptService } from '@domain/oms';
 import { ComponentStore } from '@ngrx/component-store';
 import { tapResponse } from '@ngrx/operators';
 
-import { OrderDTO, OrderItemListItemDTO, ReceiptDTO, ReceiptType } from '@generated/swagger/oms-api';
+import {
+  OrderDTO,
+  OrderItemListItemDTO,
+  ReceiptDTO,
+  ReceiptType,
+} from '@generated/swagger/oms-api';
 import { isEqual } from 'lodash';
 import { combineLatest, NEVER, Subject, Observable } from 'rxjs';
-import { catchError, filter, first, map, switchMap, withLatestFrom } from 'rxjs/operators';
+import {
+  catchError,
+  filter,
+  first,
+  map,
+  switchMap,
+  withLatestFrom,
+} from 'rxjs/operators';
 import { CustomerOrderDetailsStore } from '../customer-order-details.store';
 import { EnvironmentService } from '@core/environment';
+import { getOrderItemRewardFeature } from '@isa/oms/data-access';
 
 export interface CustomerOrderDetailsItemComponentState {
   orderItem?: OrderItemListItemDTO;
@@ -59,7 +72,12 @@ export class CustomerOrderDetailsItemComponent
       // Remove Prev OrderItem from selected list
       this._store.selectOrderItem(this.orderItem, false);
 
-      this.patchState({ orderItem, quantity: orderItem?.quantity, receipts: [], more: false });
+      this.patchState({
+        orderItem,
+        quantity: orderItem?.quantity,
+        receipts: [],
+        more: false,
+      });
       this.specialCommentControl.reset(orderItem?.specialComment);
 
       // Add New OrderItem to selected list if selected was set to true by its input
@@ -94,8 +112,23 @@ export class CustomerOrderDetailsItemComponent
     ),
   );
 
-  canChangeQuantity$ = combineLatest([this.orderItem$, this._store.fetchPartial$]).pipe(
-    map(([item, partialPickup]) => ([16, 8192].includes(item?.processingStatus) || partialPickup) && item.quantity > 1),
+  hasRewardPoints$ = this.orderItem$.pipe(
+    map((orderItem) => getOrderItemRewardFeature(orderItem) !== undefined),
+  );
+
+  rewardPoints$ = this.orderItem$.pipe(
+    map((orderItem) => getOrderItemRewardFeature(orderItem)),
+  );
+
+  canChangeQuantity$ = combineLatest([
+    this.orderItem$,
+    this._store.fetchPartial$,
+  ]).pipe(
+    map(
+      ([item, partialPickup]) =>
+        ([16, 8192].includes(item?.processingStatus) || partialPickup) &&
+        item.quantity > 1,
+    ),
   );
 
   get quantity() {
@@ -111,7 +144,9 @@ export class CustomerOrderDetailsItemComponent
 
   @Input()
   get selected() {
-    return this._store.selectedeOrderItemSubsetIds.includes(this.orderItem?.orderItemSubsetId);
+    return this._store.selectedeOrderItemSubsetIds.includes(
+      this.orderItem?.orderItemSubsetId,
+    );
   }
   set selected(selected: boolean) {
     if (this.selected !== selected) {
@@ -120,22 +155,36 @@ export class CustomerOrderDetailsItemComponent
     }
   }
 
-  readonly selected$ = combineLatest([this.orderItem$, this._store.selectedeOrderItemSubsetIds$]).pipe(
-    map(([orderItem, selectedItems]) => selectedItems.includes(orderItem?.orderItemSubsetId)),
+  readonly selected$ = combineLatest([
+    this.orderItem$,
+    this._store.selectedeOrderItemSubsetIds$,
+  ]).pipe(
+    map(([orderItem, selectedItems]) =>
+      selectedItems.includes(orderItem?.orderItemSubsetId),
+    ),
   );
 
   @Output()
   selectedChange = new EventEmitter<boolean>();
 
   get selectable() {
-    return this._store.itemsSelectable && this._store.items.length > 1 && this._store.fetchPartial;
+    return (
+      this._store.itemsSelectable &&
+      this._store.items.length > 1 &&
+      this._store.fetchPartial
+    );
   }
 
   readonly selectable$ = combineLatest([
     this._store.items$,
     this._store.itemsSelectable$,
     this._store.fetchPartial$,
-  ]).pipe(map(([orderItems, selectable, fetchPartial]) => orderItems.length > 1 && selectable && fetchPartial));
+  ]).pipe(
+    map(
+      ([orderItems, selectable, fetchPartial]) =>
+        orderItems.length > 1 && selectable && fetchPartial,
+    ),
+  );
 
   get receipts() {
     return this.get((s) => s.receipts);
@@ -173,6 +222,7 @@ export class CustomerOrderDetailsItemComponent
     });
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   ngOnInit() {}
 
   ngOnDestroy() {
@@ -182,37 +232,39 @@ export class CustomerOrderDetailsItemComponent
     this._onDestroy$.complete();
   }
 
-  loadReceipts = this.effect((done$: Observable<(receipts: ReceiptDTO[]) => void | undefined>) =>
-    done$.pipe(
-      withLatestFrom(this.orderItem$),
-      filter(([_, orderItem]) => !!orderItem),
-      switchMap(([done, orderItem]) =>
-        this._domainReceiptService
-          .getReceipts({
-            receiptType: 65 as ReceiptType,
-            ids: [orderItem.orderItemSubsetId],
-            eagerLoading: 1,
-          })
-          .pipe(
-            tapResponse(
-              (res) => {
-                const receipts = res.result.map((r) => r.item3?.data).filter((f) => !!f);
-                this.receipts = receipts;
+  loadReceipts = this.effect(
+    (done$: Observable<(receipts: ReceiptDTO[]) => void | undefined>) =>
+      done$.pipe(
+        withLatestFrom(this.orderItem$),
+        filter(([, orderItem]) => !!orderItem),
+        switchMap(([done, orderItem]) =>
+          this._domainReceiptService
+            .getReceipts({
+              receiptType: 65 as ReceiptType,
+              ids: [orderItem.orderItemSubsetId],
+              eagerLoading: 1,
+            })
+            .pipe(
+              tapResponse(
+                (res) => {
+                  const receipts = res.result
+                    .map((r) => r.item3?.data)
+                    .filter((f) => !!f);
+                  this.receipts = receipts;
 
-                if (typeof done === 'function') {
-                  done?.(receipts);
-                }
-              },
-              (err) => {
-                if (typeof done === 'function') {
-                  done?.([]);
-                }
-              },
-              () => {},
+                  if (typeof done === 'function') {
+                    done?.(receipts);
+                  }
+                },
+                () => {
+                  if (typeof done === 'function') {
+                    done?.([]);
+                  }
+                },
+              ),
             ),
-          ),
+        ),
       ),
-    ),
   );
 
   async saveSpecialComment() {
@@ -220,7 +272,7 @@ export class CustomerOrderDetailsItemComponent
 
     try {
       this.specialCommentControl.reset(this.specialCommentControl.value);
-      const res = await this._omsService
+      await this._omsService
         .patchComment({
           orderId,
           orderItemId,
@@ -230,7 +282,10 @@ export class CustomerOrderDetailsItemComponent
         .pipe(first())
         .toPromise();
 
-      this.orderItem = { ...this.orderItem, specialComment: this.specialCommentControl.value ?? '' };
+      this.orderItem = {
+        ...this.orderItem,
+        specialComment: this.specialCommentControl.value ?? '',
+      };
       this._store.updateOrderItems([this.orderItem]);
       this.specialCommentChanged.emit();
     } catch (error) {
@@ -253,8 +308,9 @@ export class CustomerOrderDetailsItemComponent
 
   orderItemFeature(orderItemListItem: OrderItemListItemDTO) {
     const orderItems = this.order?.items;
-    return orderItems?.find((orderItem) => orderItem.data.id === orderItemListItem.orderItemId)?.data?.features
-      ?.orderType;
+    return orderItems?.find(
+      (orderItem) => orderItem.data.id === orderItemListItem.orderItemId,
+    )?.data?.features?.orderType;
   }
 
   getOrderItemTrackingData(
@@ -263,15 +319,18 @@ export class CustomerOrderDetailsItemComponent
     const orderItems = this.order?.items;
     const completeTrackingInformation = orderItems
       ?.find((orderItem) => orderItem.data.id === orderItemListItem.orderItemId)
-      ?.data?.subsetItems?.find((subsetItem) => subsetItem.id === orderItemListItem.orderItemSubsetId)
-      ?.data?.trackingNumber;
+      ?.data?.subsetItems?.find(
+        (subsetItem) => subsetItem.id === orderItemListItem.orderItemSubsetId,
+      )?.data?.trackingNumber;
 
     if (!completeTrackingInformation) {
       return;
     }
 
     // Beispielnummer: 'DHL: 124124' - Bei mehreren Tracking-Informationen muss noch ein Splitter eingebaut werden, je nach dem welcher Trenner verwendet wird
-    const trackingInformationPairs = completeTrackingInformation.split(':').map((obj) => obj.trim());
+    const trackingInformationPairs = completeTrackingInformation
+      .split(':')
+      .map((obj) => obj.trim());
     return this._trackingTransformationHelper(trackingInformationPairs);
   }
 
@@ -282,7 +341,10 @@ export class CustomerOrderDetailsItemComponent
     return trackingInformationPairs.reduce(
       (acc, current, index, array) => {
         if (index % 2 === 0) {
-          acc.push({ trackingProvider: current, trackingNumber: array[index + 1] });
+          acc.push({
+            trackingProvider: current,
+            trackingNumber: array[index + 1],
+          });
         }
         return acc;
       },

apps/isa-app/src/page/customer-order/customer-order-details/customer-order-details.module.ts

@@ -17,6 +17,7 @@ import { ProductImageModule } from '@cdn/product-image';
 import { CustomerOrderDetailsStore } from './customer-order-details.store';
 import { UiDatepickerModule } from '@ui/datepicker';
 import { UiDropdownModule } from '@ui/dropdown';
+import { LabelComponent } from '@isa/ui/label';
 
 @NgModule({
   imports: [
@@ -34,6 +35,7 @@ import { UiDropdownModule } from '@ui/dropdown';
     CustomerOrderPipesModule,
     ProductImageModule,
     CustomerOrderDetailsTagsComponent,
+    LabelComponent,
   ],
   exports: [
     CustomerOrderDetailsComponent,
@@ -41,7 +43,11 @@ import { UiDropdownModule } from '@ui/dropdown';
     CustomerOrderDetailsHeaderComponent,
     CustomerOrderDetailsTagsComponent,
   ],
-  declarations: [CustomerOrderDetailsComponent, CustomerOrderDetailsItemComponent, CustomerOrderDetailsHeaderComponent],
+  declarations: [
+    CustomerOrderDetailsComponent,
+    CustomerOrderDetailsItemComponent,
+    CustomerOrderDetailsHeaderComponent,
+  ],
   providers: [CustomerOrderDetailsStore],
 })
 export class CustomerOrderDetailsModule {}

apps/isa-app/src/page/customer/components/kundenkarte/kundenkarte.component.ts

@@ -9,8 +9,7 @@ import { DecimalPipe } from '@angular/common';
 import { Component, Input, OnInit, inject } from '@angular/core';
 import { IconComponent } from '@shared/components/icon';
 import { BonusCardInfoDTO } from '@generated/swagger/crm-api';
-import { injectTabId } from '@isa/core/tabs';
-import { NavigationStateService } from '@isa/core/navigation';
+import { injectTabId, TabService } from '@isa/core/tabs';
 import { Router } from '@angular/router';
 import { CustomerSearchNavigation } from '@shared/services/navigation';
 
@@ -47,7 +46,7 @@ import { CustomerSearchNavigation } from '@shared/services/navigation';
 export class KundenkarteComponent implements OnInit {
   #tabId = injectTabId();
   #router = inject(Router);
-  #navigationState = inject(NavigationStateService);
+  #tabService = inject(TabService);
   #customerNavigationService = inject(CustomerSearchNavigation);
 
   @Input() cardDetails: BonusCardInfoDTO;
@@ -69,13 +68,12 @@ export class KundenkarteComponent implements OnInit {
       return;
     }
 
-    this.#navigationState.preserveContext(
-      {
+    this.#tabService.patchTabMetadata(tabId, {
+      'select-customer': {
         returnUrl: `/${tabId}/reward`,
         autoTriggerContinueFn: true,
       },
-      'select-customer',
-    );
+    });
 
     await this.#router.navigate(
       this.#customerNavigationService.detailsRoute({

apps/isa-app/src/page/customer/customer-page.component.ts

@@ -1,5 +1,11 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  OnDestroy,
+  inject,
+} from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { TabService } from '@isa/core/tabs';
 import { map } from 'rxjs/operators';
 
 @Component({
@@ -9,8 +15,17 @@ import { map } from 'rxjs/operators';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: false,
 })
-export class CustomerComponent {
+export class CustomerComponent implements OnDestroy {
+  private _tabService = inject(TabService);
   processId$ = this._activatedRoute.data.pipe(map((data) => data.processId));
 
   constructor(private _activatedRoute: ActivatedRoute) {}
+
+  ngOnDestroy() {
+    const tab = this._tabService.activatedTab();
+    // #5512 Always clear preserved select-customer context if navigating out of customer area
+    this._tabService.patchTabMetadata(tab.id, {
+      'select-customer': null,
+    });
+  }
 }

apps/isa-app/src/page/customer/customer-search/details-main-view/details-main-view-billing-addresses/details-main-view-billing-addresses.component.ts

@@ -166,6 +166,11 @@ export class DetailsMainViewBillingAddressesComponent
               customer as unknown as Customer,
             ),
           );
+          // Clear the selected payer ID when using customer address
+          this.crmTabMetadataService.setSelectedPayerId(
+            this.tabId(),
+            undefined,
+          );
         }
       });
   }

apps/isa-app/src/page/customer/customer-search/details-main-view/details-main-view-delivery-addresses/details-main-view-delivery-addresses.component.ts

@@ -191,6 +191,11 @@ export class DetailsMainViewDeliveryAddressesComponent
               customer as unknown as Customer,
             ),
           );
+          // Clear the selected shipping address ID when using customer address
+          this.crmTabMetadataService.setSelectedShippingAddressId(
+            this.tabId(),
+            undefined,
+          );
         }
       });
   }

apps/isa-app/src/page/customer/customer-search/details-main-view/details-main-view.component.ts

@@ -49,9 +49,14 @@ import {
   NavigateAfterRewardSelection,
   RewardSelectionPopUpService,
 } from '@isa/checkout/shared/reward-selection-dialog';
-import { NavigationStateService } from '@isa/core/navigation';
+import { TabService } from '@isa/core/tabs';
 import { ShippingAddressDTO as CrmShippingAddressDTO } from '@generated/swagger/crm-api';
 
+interface SelectCustomerContext {
+  returnUrl?: string;
+  autoTriggerContinueFn?: boolean;
+}
+
 export interface CustomerDetailsViewMainState {
   isBusy: boolean;
   shoppingCart: ShoppingCartDTO;
@@ -80,7 +85,7 @@ export class CustomerDetailsViewMainComponent
   private _router = inject(Router);
   private _activatedRoute = inject(ActivatedRoute);
   private _genderSettings = inject(GenderSettingsService);
-  private _navigationState = inject(NavigationStateService);
+  private _tabService = inject(TabService);
   private _onDestroy$ = new Subject<void>();
 
   customerService = inject(CrmCustomerService);
@@ -97,18 +102,19 @@ export class CustomerDetailsViewMainComponent
     map(([fetchingCustomer, fetchingList]) => fetchingCustomer || fetchingList),
   );
 
-  async getReturnUrlFromContext(): Promise<string | null> {
-    // Get from preserved context (survives intermediate navigations, auto-scoped to tab)
-    const context = await this._navigationState.restoreContext<{
-      returnUrl?: string;
-    }>('select-customer');
+  getReturnUrlFromContext(): string | null {
+    // Get from preserved context (survives intermediate navigations, scoped to tab)
+    const context = this._tabService.activatedTab()?.metadata?.[
+      'select-customer'
+    ] as SelectCustomerContext | undefined;
 
     return context?.returnUrl ?? null;
   }
 
-  async checkHasReturnUrl(): Promise<void> {
-    const hasContext =
-      await this._navigationState.hasPreservedContext('select-customer');
+  checkHasReturnUrl(): void {
+    const hasContext = !!this._tabService.activatedTab()?.metadata?.[
+      'select-customer'
+    ];
     this.hasReturnUrl.set(hasContext);
   }
 
@@ -321,18 +327,23 @@ export class CustomerDetailsViewMainComponent
 
   ngOnInit() {
     // Check if we have a return URL context
-    this.checkHasReturnUrl().then(async () => {
-      // Check if we should auto-trigger continue() (only from Kundenkarte)
-      const context = await this._navigationState.restoreContext<{
-        returnUrl?: string;
-        autoTriggerContinueFn?: boolean;
-      }>('select-customer');
+    this.checkHasReturnUrl();
 
-      if (context?.autoTriggerContinueFn) {
-        // Auto-trigger continue() ONLY when coming from Kundenkarte
-        this.continue();
-      }
-    });
+    // Check if we should auto-trigger continue() (only from Kundenkarte)
+    const tab = this._tabService.activatedTab();
+    const context = tab?.metadata?.['select-customer'] as
+      | SelectCustomerContext
+      | undefined;
+
+    if (context?.autoTriggerContinueFn && tab) {
+      // Clear the autoTriggerContinueFn flag immediately (preserves returnUrl)
+      this._tabService.patchTabMetadata(tab.id, {
+        'select-customer': { ...context, autoTriggerContinueFn: undefined },
+      });
+
+      // Auto-trigger continue() ONLY when coming from Kundenkarte
+      this.continue();
+    }
 
     this.processId$
       .pipe(
@@ -430,10 +441,18 @@ export class CustomerDetailsViewMainComponent
 
     // #5262 Check for reward selection flow before navigation
     if (this.hasReturnUrl()) {
-      // Restore from preserved context (auto-scoped to current tab) and clean up
-      const context = await this._navigationState.restoreAndClearContext<{
-        returnUrl?: string;
-      }>('select-customer');
+      // Restore from preserved context (scoped to current tab) and clean up
+      const tab = this._tabService.activatedTab();
+      const context = tab?.metadata?.['select-customer'] as
+        | SelectCustomerContext
+        | undefined;
+
+      // Clear the context
+      if (tab) {
+        this._tabService.patchTabMetadata(tab.id, {
+          'select-customer': null,
+        });
+      }
 
       if (context?.returnUrl) {
         await this._router.navigateByUrl(context.returnUrl);

apps/isa-app/src/page/customer/customer-search/kundenkarte-main-view/kundenkarte-main-view.component.html

@@ -8,12 +8,31 @@
 <crm-customer-loyalty-cards
   [customerId]="customerId$ | async"
   [tabId]="processId$ | async"
+  (navigateToPraemienshop)="onNavigateToPraemienshop()"
+  (cardUpdated)="reloadCardTransactionsAndCards()"
   class="mt-4"
 />
+@let activeCardCode = firstActiveCardCode();
+
+@if (activeCardCode) {
+  <crm-customer-bon-redemption
+    [cardCode]="activeCardCode"
+    class="mt-4"
+    (redeemed)="reloadCardTransactionsAndCards()"
+  />
+  <crm-customer-booking
+    [cardCode]="activeCardCode"
+    class="mt-4"
+    (booked)="reloadCardTransactionsAndCards()"
+  />
+}
+
 <crm-customer-card-transactions
-  [cardCode]="firstActiveCardCode()"
+  [customerId]="customerId()"
   class="mt-8"
+  (reload)="reloadCardTransactionsAndCards()"
 />
+
 <utils-scroll-top-button
   [target]="hostElement"
   class="flex flex-col justify-self-end fixed bottom-6 right-6"

apps/isa-app/src/page/customer/customer-search/kundenkarte-main-view/kundenkarte-main-view.component.ts

@@ -5,16 +5,24 @@ import {
   computed,
   effect,
   ElementRef,
+  OnDestroy,
 } from '@angular/core';
 import { CustomerSearchStore } from '../store';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { map } from 'rxjs/operators';
+import { TabService } from '@isa/core/tabs';
+import { CustomerSearchNavigation } from '@shared/services/navigation';
 import { AsyncPipe } from '@angular/common';
 import { CustomerMenuComponent } from '../../components/customer-menu';
 import { CustomerLoyaltyCardsComponent } from '@isa/crm/feature/customer-loyalty-cards';
 import { CrmFeatureCustomerCardTransactionsComponent } from '@isa/crm/feature/customer-card-transactions';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { CustomerBonusCardsResource } from '@isa/crm/data-access';
+import {
+  CustomerBonusCardsResource,
+  CustomerCardTransactionsResource,
+} from '@isa/crm/data-access';
+import { CrmFeatureCustomerBookingComponent } from '@isa/crm/feature/customer-booking';
+import { CrmFeatureCustomerBonRedemptionComponent } from '@isa/crm/feature/customer-bon-redemption';
 import { ScrollTopButtonComponent } from '@isa/utils/scroll-position';
 
 @Component({
@@ -28,17 +36,27 @@ import { ScrollTopButtonComponent } from '@isa/utils/scroll-position';
     AsyncPipe,
     CustomerLoyaltyCardsComponent,
     CrmFeatureCustomerCardTransactionsComponent,
+    CrmFeatureCustomerBookingComponent,
+    CrmFeatureCustomerBonRedemptionComponent,
     ScrollTopButtonComponent,
   ],
-  providers: [CustomerBonusCardsResource],
+  providers: [CustomerBonusCardsResource, CustomerCardTransactionsResource],
 })
-export class KundenkarteMainViewComponent {
+export class KundenkarteMainViewComponent implements OnDestroy {
+  #reloadTimeoutId?: ReturnType<typeof setTimeout>;
+
   private _store = inject(CustomerSearchStore);
   private _activatedRoute = inject(ActivatedRoute);
-  private _bonusCardsResource = inject(CustomerBonusCardsResource);
-
+  #bonusCardsResource = inject(CustomerBonusCardsResource);
+  #cardTransactionsResource = inject(CustomerCardTransactionsResource);
   elementRef = inject(ElementRef);
+  #router = inject(Router);
+  #tabService = inject(TabService);
+  #customerNavigationService = inject(CustomerSearchNavigation);
 
+  /**
+   * Returns the native DOM element of this component
+   */
   get hostElement() {
     return this.elementRef.nativeElement;
   }
@@ -58,7 +76,7 @@ export class KundenkarteMainViewComponent {
    * Get the first active card code
    */
   readonly firstActiveCardCode = computed(() => {
-    const cards = this._bonusCardsResource.resource.value();
+    const cards = this.#bonusCardsResource.resource.value();
     const firstActiveCard = cards?.find((card) => card.isActive);
     return firstActiveCard?.code;
   });
@@ -68,8 +86,59 @@ export class KundenkarteMainViewComponent {
     effect(() => {
       const customerId = this.customerId();
       if (customerId) {
-        this._bonusCardsResource.params({ customerId: Number(customerId) });
+        this.#bonusCardsResource.params({ customerId: Number(customerId) });
       }
     });
   }
+
+  /**
+   * Reloads both card transactions and bonus cards resources after a 500ms delay.
+   * Only triggers reload if the resource is not currently loading to prevent concurrent requests.
+   */
+  reloadCardTransactionsAndCards() {
+    this.#reloadTimeoutId = setTimeout(() => {
+      if (!this.#cardTransactionsResource.resource.isLoading()) {
+        this.#cardTransactionsResource.resource.reload();
+      }
+
+      if (!this.#bonusCardsResource.resource.isLoading()) {
+        this.#bonusCardsResource.resource.reload();
+      }
+    }, 500);
+  }
+
+  /**
+   * Handle navigation to Prämienshop with proper customer selection.
+   * Uses autoTriggerContinueFn pattern to auto-select customer via details view.
+   */
+  async onNavigateToPraemienshop(): Promise<void> {
+    const tabId = this._store.processId;
+    const customerId = this.customerId();
+
+    if (!customerId || !tabId) {
+      return;
+    }
+
+    // Preserve context for auto-triggering continue() in details view
+    this.#tabService.patchTabMetadata(tabId, {
+      'select-customer': {
+        returnUrl: `/${tabId}/reward`,
+        autoTriggerContinueFn: true,
+      },
+    });
+
+    // Navigate to customer details - will auto-trigger continue()
+    await this.#router.navigate(
+      this.#customerNavigationService.detailsRoute({
+        processId: tabId,
+        customerId: Number(customerId),
+      }).path,
+    );
+  }
+
+  ngOnDestroy(): void {
+    if (this.#reloadTimeoutId) {
+      clearTimeout(this.#reloadTimeoutId);
+    }
+  }
 }

apps/isa-app/src/page/customer/customer-search/order-details-main-view/order-item-list-item/order-item-list-item.component.html

@@ -11,13 +11,11 @@
         [alt]="name"
       />
     }
-    @if (hasRewardPoints$ | async) {
-      <ui-label [type]="Labeltype.Tag" [priority]="LabelPriority.High">
-        Prämie
-      </ui-label>
-    }
   </div>
   <div class="grid grid-flow-row gap-2">
+    @if (hasRewardPoints$ | async) {
+      <ui-label class="w-10">Prämie</ui-label>
+    }
     <div class="grid grid-flow-col justify-between items-end">
       <span>{{ orderItem.product?.contributors }}</span>
       @if (orderDetailsHistoryRoute$ | async; as orderDetailsHistoryRoute) {
@@ -25,7 +23,7 @@
           [routerLink]="orderDetailsHistoryRoute.path"
           [queryParams]="orderDetailsHistoryRoute.urlTree.queryParams"
           [queryParamsHandling]="'merge'"
-          class="text-brand font-bold text-xl"
+          class="text-brand font-bold text-xl relative -top-8"
         >
           Historie
         </a>
@@ -64,7 +62,9 @@
         <div class="col-data">
           @if (hasRewardPoints$ | async) {
             <div class="col-label">Prämie</div>
-            <div class="col-value">{{ rewardPoints$ | async | number: '1.0-0' }} Lesepunkte</div>
+            <div class="col-value">
+              {{ rewardPoints$ | async | number: '1.0-0' }} Lesepunkte
+            </div>
           } @else {
             <div class="col-label">Preis</div>
             <div class="col-value">

apps/isa-app/src/page/customer/customer-search/order-details-main-view/order-item-list-item/order-item-list-item.component.ts

@@ -21,7 +21,7 @@ import { map, takeUntil } from 'rxjs/operators';
 import { CustomerSearchStore } from '../../store';
 import { CustomerSearchNavigation } from '@shared/services/navigation';
 import { PaymentTypePipe } from '@shared/pipes/customer';
-import { LabelComponent, Labeltype, LabelPriority } from '@isa/ui/label';
+import { LabelComponent } from '@isa/ui/label';
 import { getOrderItemRewardFeature } from '@isa/oms/data-access';
 import { IconComponent } from '@shared/components/icon';
 
@@ -113,9 +113,6 @@ export class CustomerOrderItemListItemComponent implements OnInit, OnDestroy {
     map((orderItem) => getOrderItemRewardFeature(orderItem)),
   );
 
-  Labeltype = Labeltype;
-  LabelPriority = LabelPriority;
-
   ngOnInit() {
     this.customerId$
       .pipe(takeUntil(this._onDestroy))

apps/isa-app/src/page/customer/routes.ts

@@ -1,170 +1,187 @@
-import { Routes } from '@angular/router';
-import { CustomerComponent } from './customer-page.component';
-import { CustomerSearchComponent } from './customer-search/customer-search.component';
-import { CustomerResultsMainViewComponent } from './customer-search/results-main-view/results-main-view.component';
-import { CustomerDetailsViewMainComponent } from './customer-search/details-main-view/details-main-view.component';
-import { CustomerHistoryMainViewComponent } from './customer-search/history-main-view/history-main-view.component';
-import { CustomerFilterMainViewComponent } from './customer-search/filter-main-view/filter-main-view.component';
-import { CustomerCreateGuard } from './guards/customer-create.guard';
-import {
-  CreateB2BCustomerComponent,
-  CreateGuestCustomerComponent,
-  // CreateP4MCustomerComponent,
-  CreateStoreCustomerComponent,
-  CreateWebshopCustomerComponent,
-} from './create-customer';
-// import { UpdateP4MWebshopCustomerComponent } from './create-customer/update-p4m-webshop-customer';
-import { CreateCustomerComponent } from './create-customer/create-customer.component';
-import { CustomerDataEditB2BComponent } from './customer-search/edit-main-view/customer-data-edit-b2b.component';
-import { CustomerDataEditB2CComponent } from './customer-search/edit-main-view/customer-data-edit-b2c.component';
-import { AddBillingAddressMainViewComponent } from './customer-search/add-billing-address-main-view/add-billing-address-main-view.component';
-import { AddShippingAddressMainViewComponent } from './customer-search/add-shipping-address-main-view/add-shipping-address-main-view.component';
-import { EditBillingAddressMainViewComponent } from './customer-search/edit-billing-address-main-view/edit-billing-address-main-view.component';
-import { EditShippingAddressMainViewComponent } from './customer-search/edit-shipping-address-main-view/edit-shipping-address-main-view.component';
-import { CustomerOrdersMainViewComponent } from './customer-search/orders-main-view/orders-main-view.component';
-import { OrderDetailsMainViewComponent } from './customer-search/order-details-main-view/order-details-main-view.component';
-import { KundenkarteMainViewComponent } from './customer-search/kundenkarte-main-view/kundenkarte-main-view.component';
-import { CustomerOrderDetailsHistoryMainViewComponent } from './customer-search/order-details-history-main-view/order-details-history-main-view.component';
-import { CustomerMainViewComponent } from './customer-search/main-view/main-view.component';
-import { MainSideViewComponent } from './customer-search/main-side-view/main-side-view.component';
-import { CustomerResultsSideViewComponent } from './customer-search/results-side-view/results-side-view.component';
-import { OrderDetailsSideViewComponent } from './customer-search/order-details-side-view/order-details-side-view.component';
-import { CustomerCreateSideViewComponent } from './create-customer/customer-create-side-view';
-
-export const routes: Routes = [
-  {
-    path: '',
-    component: CustomerComponent,
-    children: [
-      {
-        path: '',
-        component: CustomerSearchComponent,
-        children: [
-          {
-            path: 'search',
-            component: CustomerMainViewComponent,
-            data: { side: 'main', breadcrumb: 'main' },
-          },
-          {
-            path: 'search/list',
-            component: CustomerResultsMainViewComponent,
-            data: { breadcrumb: 'search' },
-          },
-          {
-            path: 'search/filter',
-            component: CustomerFilterMainViewComponent,
-            data: { side: 'results', breadcrumb: 'filter' },
-          },
-          {
-            path: 'search/:customerId',
-            component: CustomerDetailsViewMainComponent,
-            data: { side: 'results', breadcrumb: 'details' },
-          },
-          {
-            path: 'search/:customerId/history',
-            component: CustomerHistoryMainViewComponent,
-            data: { side: 'results', breadcrumb: 'history' },
-          },
-          {
-            path: 'search/:customerId/kundenkarte',
-            component: KundenkarteMainViewComponent,
-            data: { side: 'results', breadcrumb: 'kundenkarte' },
-          },
-          {
-            path: 'search/:customerId/orders',
-            component: CustomerOrdersMainViewComponent,
-            data: { side: 'results', breadcrumb: 'orders' },
-          },
-          {
-            path: 'search/:customerId/orders/:orderId',
-            component: OrderDetailsMainViewComponent,
-            data: { side: 'order-details', breadcrumb: 'order-details' },
-          },
-          {
-            path: 'search/:customerId/orders/:orderId/:orderItemId',
-            component: OrderDetailsMainViewComponent,
-            data: { side: 'order-details', breadcrumb: 'order-details' },
-          },
-          {
-            path: 'search/:customerId/orders/:orderId/:orderItemId/history',
-            component: CustomerOrderDetailsHistoryMainViewComponent,
-            data: {
-              side: 'order-details',
-              breadcrumb: 'order-details-history',
-            },
-          },
-          {
-            path: 'search/:customerId/edit/b2b',
-            component: CustomerDataEditB2BComponent,
-            data: { side: 'results', breadcrumb: 'edit' },
-          },
-          {
-            path: 'search/:customerId/edit',
-            component: CustomerDataEditB2CComponent,
-            data: { side: 'results', breadcrumb: 'edit' },
-          },
-          {
-            path: 'search/:customerId/billingaddress/add',
-            component: AddBillingAddressMainViewComponent,
-            data: { side: 'results', breadcrumb: 'add-billing-address' },
-          },
-          {
-            path: 'search/:customerId/billingaddress/:payerId/edit',
-            component: EditBillingAddressMainViewComponent,
-            data: { side: 'results', breadcrumb: 'edit-billing-address' },
-          },
-          {
-            path: 'search/:customerId/shippingaddress/add',
-            component: AddShippingAddressMainViewComponent,
-            data: { side: 'results', breadcrumb: 'add-shipping-address' },
-          },
-          {
-            path: 'search/:customerId/shippingaddress/:shippingAddressId/edit',
-            component: EditShippingAddressMainViewComponent,
-            data: { side: 'results', breadcrumb: 'edit-shipping-address' },
-          },
-          {
-            path: 'search-customer-main',
-            outlet: 'side',
-            component: MainSideViewComponent,
-          },
-          {
-            path: 'results',
-            outlet: 'side',
-            component: CustomerResultsSideViewComponent,
-          },
-          {
-            path: 'order-details',
-            outlet: 'side',
-            component: OrderDetailsSideViewComponent,
-          },
-        ],
-      },
-      {
-        path: '',
-        component: CreateCustomerComponent,
-        canActivate: [CustomerCreateGuard],
-        canActivateChild: [CustomerCreateGuard],
-        children: [
-          { path: 'create', component: CreateStoreCustomerComponent },
-          { path: 'create/store', component: CreateStoreCustomerComponent },
-          { path: 'create/webshop', component: CreateWebshopCustomerComponent },
-          { path: 'create/b2b', component: CreateB2BCustomerComponent },
-          { path: 'create/guest', component: CreateGuestCustomerComponent },
-          // { path: 'create/webshop-p4m', component: CreateP4MCustomerComponent, data: { customerType: 'webshop' } },
-          // { path: 'create/store-p4m', component: CreateP4MCustomerComponent, data: { customerType: 'store' } },
-          // {
-          //   path: 'create/webshop-p4m/update',
-          //   component: UpdateP4MWebshopCustomerComponent,
-          //   data: { customerType: 'webshop' },
-          // },
-          {
-            path: 'create-customer-main',
-            outlet: 'side',
-            component: CustomerCreateSideViewComponent,
-          },
-        ],
-      },
-    ],
-  },
-];
+import { Routes } from '@angular/router';
+import { CustomerComponent } from './customer-page.component';
+import { CustomerSearchComponent } from './customer-search/customer-search.component';
+import { CustomerResultsMainViewComponent } from './customer-search/results-main-view/results-main-view.component';
+import { CustomerDetailsViewMainComponent } from './customer-search/details-main-view/details-main-view.component';
+import { CustomerHistoryMainViewComponent } from './customer-search/history-main-view/history-main-view.component';
+import { CustomerFilterMainViewComponent } from './customer-search/filter-main-view/filter-main-view.component';
+import { CustomerCreateGuard } from './guards/customer-create.guard';
+import {
+  CreateB2BCustomerComponent,
+  CreateGuestCustomerComponent,
+  // CreateP4MCustomerComponent,
+  CreateStoreCustomerComponent,
+  CreateWebshopCustomerComponent,
+} from './create-customer';
+// import { UpdateP4MWebshopCustomerComponent } from './create-customer/update-p4m-webshop-customer';
+import { CreateCustomerComponent } from './create-customer/create-customer.component';
+import { CustomerDataEditB2BComponent } from './customer-search/edit-main-view/customer-data-edit-b2b.component';
+import { CustomerDataEditB2CComponent } from './customer-search/edit-main-view/customer-data-edit-b2c.component';
+import { AddBillingAddressMainViewComponent } from './customer-search/add-billing-address-main-view/add-billing-address-main-view.component';
+import { AddShippingAddressMainViewComponent } from './customer-search/add-shipping-address-main-view/add-shipping-address-main-view.component';
+import { EditBillingAddressMainViewComponent } from './customer-search/edit-billing-address-main-view/edit-billing-address-main-view.component';
+import { EditShippingAddressMainViewComponent } from './customer-search/edit-shipping-address-main-view/edit-shipping-address-main-view.component';
+import { CustomerOrdersMainViewComponent } from './customer-search/orders-main-view/orders-main-view.component';
+import { OrderDetailsMainViewComponent } from './customer-search/order-details-main-view/order-details-main-view.component';
+import { KundenkarteMainViewComponent } from './customer-search/kundenkarte-main-view/kundenkarte-main-view.component';
+import { CustomerOrderDetailsHistoryMainViewComponent } from './customer-search/order-details-history-main-view/order-details-history-main-view.component';
+import { CustomerMainViewComponent } from './customer-search/main-view/main-view.component';
+import { MainSideViewComponent } from './customer-search/main-side-view/main-side-view.component';
+import { CustomerResultsSideViewComponent } from './customer-search/results-side-view/results-side-view.component';
+import { OrderDetailsSideViewComponent } from './customer-search/order-details-side-view/order-details-side-view.component';
+import { CustomerCreateSideViewComponent } from './create-customer/customer-create-side-view';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: CustomerComponent,
+    children: [
+      {
+        path: '',
+        component: CustomerSearchComponent,
+        children: [
+          {
+            path: 'search',
+            component: CustomerMainViewComponent,
+            title: 'Kundensuche',
+            data: { side: 'main', breadcrumb: 'main' },
+          },
+          {
+            path: 'search/list',
+            component: CustomerResultsMainViewComponent,
+            title: 'Kundensuche - Trefferliste',
+            data: { breadcrumb: 'search' },
+          },
+          {
+            path: 'search/filter',
+            component: CustomerFilterMainViewComponent,
+            title: 'Kundensuche - Filter',
+            data: { side: 'results', breadcrumb: 'filter' },
+          },
+          {
+            path: 'search/:customerId',
+            component: CustomerDetailsViewMainComponent,
+            title: 'Kundendetails',
+            data: { side: 'results', breadcrumb: 'details' },
+          },
+          {
+            path: 'search/:customerId/history',
+            component: CustomerHistoryMainViewComponent,
+            title: 'Kundendetails - Verlauf',
+            data: { side: 'results', breadcrumb: 'history' },
+          },
+          {
+            path: 'search/:customerId/kundenkarte',
+            component: KundenkarteMainViewComponent,
+            title: 'Kundendetails - Kundenkarte',
+            data: { side: 'results', breadcrumb: 'kundenkarte' },
+          },
+          {
+            path: 'search/:customerId/orders',
+            component: CustomerOrdersMainViewComponent,
+            title: 'Kundendetails - Bestellungen',
+            data: { side: 'results', breadcrumb: 'orders' },
+          },
+          {
+            path: 'search/:customerId/orders/:orderId',
+            component: OrderDetailsMainViewComponent,
+            title: 'Kundendetails - Bestelldetails',
+            data: { side: 'order-details', breadcrumb: 'order-details' },
+          },
+          {
+            path: 'search/:customerId/orders/:orderId/:orderItemId',
+            component: OrderDetailsMainViewComponent,
+            title: 'Kundendetails - Bestelldetails',
+            data: { side: 'order-details', breadcrumb: 'order-details' },
+          },
+          {
+            path: 'search/:customerId/orders/:orderId/:orderItemId/history',
+            component: CustomerOrderDetailsHistoryMainViewComponent,
+            title: 'Kundendetails - Bestelldetails Verlauf',
+            data: {
+              side: 'order-details',
+              breadcrumb: 'order-details-history',
+            },
+          },
+          {
+            path: 'search/:customerId/edit/b2b',
+            component: CustomerDataEditB2BComponent,
+            title: 'Kundendetails - Bearbeiten (B2B)',
+            data: { side: 'results', breadcrumb: 'edit' },
+          },
+          {
+            path: 'search/:customerId/edit',
+            component: CustomerDataEditB2CComponent,
+            title: 'Kundendetails - Bearbeiten',
+            data: { side: 'results', breadcrumb: 'edit' },
+          },
+          {
+            path: 'search/:customerId/billingaddress/add',
+            component: AddBillingAddressMainViewComponent,
+            title: 'Kundendetails - Neue Rechnungsadresse',
+            data: { side: 'results', breadcrumb: 'add-billing-address' },
+          },
+          {
+            path: 'search/:customerId/billingaddress/:payerId/edit',
+            component: EditBillingAddressMainViewComponent,
+            title: 'Kundendetails - Rechnungsadresse bearbeiten',
+            data: { side: 'results', breadcrumb: 'edit-billing-address' },
+          },
+          {
+            path: 'search/:customerId/shippingaddress/add',
+            component: AddShippingAddressMainViewComponent,
+            title: 'Kundendetails - Neue Lieferadresse',
+            data: { side: 'results', breadcrumb: 'add-shipping-address' },
+          },
+          {
+            path: 'search/:customerId/shippingaddress/:shippingAddressId/edit',
+            component: EditShippingAddressMainViewComponent,
+            title: 'Kundendetails - Lieferadresse bearbeiten',
+            data: { side: 'results', breadcrumb: 'edit-shipping-address' },
+          },
+          {
+            path: 'search-customer-main',
+            outlet: 'side',
+            component: MainSideViewComponent,
+          },
+          {
+            path: 'results',
+            outlet: 'side',
+            component: CustomerResultsSideViewComponent,
+          },
+          {
+            path: 'order-details',
+            outlet: 'side',
+            component: OrderDetailsSideViewComponent,
+          },
+        ],
+      },
+      {
+        path: '',
+        component: CreateCustomerComponent,
+        canActivate: [CustomerCreateGuard],
+        canActivateChild: [CustomerCreateGuard],
+        title: 'Kundendaten erfassen',
+        children: [
+          { path: 'create', component: CreateStoreCustomerComponent },
+          { path: 'create/store', component: CreateStoreCustomerComponent },
+          { path: 'create/webshop', component: CreateWebshopCustomerComponent },
+          { path: 'create/b2b', component: CreateB2BCustomerComponent },
+          { path: 'create/guest', component: CreateGuestCustomerComponent },
+          // { path: 'create/webshop-p4m', component: CreateP4MCustomerComponent, data: { customerType: 'webshop' } },
+          // { path: 'create/store-p4m', component: CreateP4MCustomerComponent, data: { customerType: 'store' } },
+          // {
+          //   path: 'create/webshop-p4m/update',
+          //   component: UpdateP4MWebshopCustomerComponent,
+          //   data: { customerType: 'webshop' },
+          // },
+          {
+            path: 'create-customer-main',
+            outlet: 'side',
+            component: CustomerCreateSideViewComponent,
+          },
+        ],
+      },
+    ],
+  },
+];

apps/isa-app/src/page/dashboard/dashboard-routing-module.ts

@@ -1,16 +1,17 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { DashboardComponent } from './dashboard.component';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: DashboardComponent,
-  },
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class DashboardRoutingModule {}
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { DashboardComponent } from './dashboard.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: DashboardComponent,
+    title: 'Dashboard',
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class DashboardRoutingModule {}

apps/isa-app/src/page/goods-in/good-in-routing.module.ts

@@ -1,35 +1,51 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { GoodsInCleanupListComponent } from './goods-in-cleanup-list/goods-in-cleanup-list.component';
-import { GoodsInCleanupListModule } from './goods-in-cleanup-list/goods-in-cleanup-list.module';
-import { GoodsInListComponent } from './goods-in-list/goods-in-list.component';
-import { GoodsInListModule } from './goods-in-list/goods-in-list.module';
-import { GoodsInRemissionPreviewComponent } from './goods-in-remission-preview/goods-in-remission-preview.component';
-import { GoodsInRemissionPreviewModule } from './goods-in-remission-preview/goods-in-remission-preview.module';
-import { GoodsInReservationComponent } from './goods-in-reservation/goods-in-reservation.component';
-import { GoodsInReservationModule } from './goods-in-reservation/goods-in-reservation.module';
-import { GoodsInComponent } from './goods-in.component';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: GoodsInComponent,
-    children: [
-      { path: 'list', component: GoodsInListComponent },
-      { path: 'reservation', component: GoodsInReservationComponent },
-      { path: 'cleanup', component: GoodsInCleanupListComponent },
-      { path: 'preview', component: GoodsInRemissionPreviewComponent },
-    ],
-  },
-];
-@NgModule({
-  imports: [
-    RouterModule.forChild(routes),
-    GoodsInListModule,
-    GoodsInCleanupListModule,
-    GoodsInReservationModule,
-    GoodsInRemissionPreviewModule,
-  ],
-  exports: [RouterModule],
-})
-export class GoodsInRoutingModule {}
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { GoodsInCleanupListComponent } from './goods-in-cleanup-list/goods-in-cleanup-list.component';
+import { GoodsInCleanupListModule } from './goods-in-cleanup-list/goods-in-cleanup-list.module';
+import { GoodsInListComponent } from './goods-in-list/goods-in-list.component';
+import { GoodsInListModule } from './goods-in-list/goods-in-list.module';
+import { GoodsInRemissionPreviewComponent } from './goods-in-remission-preview/goods-in-remission-preview.component';
+import { GoodsInRemissionPreviewModule } from './goods-in-remission-preview/goods-in-remission-preview.module';
+import { GoodsInReservationComponent } from './goods-in-reservation/goods-in-reservation.component';
+import { GoodsInReservationModule } from './goods-in-reservation/goods-in-reservation.module';
+import { GoodsInComponent } from './goods-in.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: GoodsInComponent,
+    children: [
+      {
+        path: 'list',
+        component: GoodsInListComponent,
+        title: 'Abholfach - Fehlende',
+      },
+      {
+        path: 'reservation',
+        component: GoodsInReservationComponent,
+        title: 'Abholfach - Reservierung',
+      },
+      {
+        path: 'cleanup',
+        component: GoodsInCleanupListComponent,
+        title: 'Abholfach - Ausräumen',
+      },
+      {
+        path: 'preview',
+        component: GoodsInRemissionPreviewComponent,
+        title: 'Abholfach - Vorschau',
+      },
+    ],
+  },
+];
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes),
+    GoodsInListModule,
+    GoodsInCleanupListModule,
+    GoodsInReservationModule,
+    GoodsInRemissionPreviewModule,
+  ],
+  exports: [RouterModule],
+})
+export class GoodsInRoutingModule {}

apps/isa-app/src/page/package-inspection/routes.ts

@@ -1,22 +1,24 @@
-import { Routes } from '@angular/router';
-import { PackageDetailsComponent } from './package-details';
-import { PackageInspectionComponent } from './package-inspection.component';
-import { PackageResultComponent } from './package-result';
-
-export const packageInspectionRoutes: Routes = [
-  {
-    path: '',
-    component: PackageInspectionComponent,
-    children: [
-      {
-        path: 'packages',
-        component: PackageResultComponent,
-      },
-      {
-        path: 'packages/:id',
-        component: PackageDetailsComponent,
-      },
-      { path: '**', redirectTo: 'packages' },
-    ],
-  },
-];
+import { Routes } from '@angular/router';
+import { PackageDetailsComponent } from './package-details';
+import { PackageInspectionComponent } from './package-inspection.component';
+import { PackageResultComponent } from './package-result';
+
+export const packageInspectionRoutes: Routes = [
+  {
+    path: '',
+    component: PackageInspectionComponent,
+    title: 'Packstück-Prüfung',
+    children: [
+      {
+        path: 'packages',
+        component: PackageResultComponent,
+      },
+      {
+        path: 'packages/:id',
+        component: PackageDetailsComponent,
+        title: 'Packstück-Prüfung - Details',
+      },
+      { path: '**', redirectTo: 'packages' },
+    ],
+  },
+];

apps/isa-app/src/page/pickup-shelf/pickup-shelf-in/routes.ts

@@ -1,146 +1,168 @@
-import { Routes } from '@angular/router';
-import { PickupShelfInComponent } from './pickup-shelf-in.component';
-import { PickupShelfFilterComponent } from '../shared/pickup-shelf-filter/pickup-shelf-filter.component';
-import { PickupShelfInDetailsComponent } from './pickup-shelf-in-details/pickup-shelf-in-details.component';
-import { viewResolver } from '../resolvers/view.resolver';
-import { PickUpShelfHistoryComponent } from '../shared/pickup-shelf-history/pickup-shelf-history.component';
-import { PickUpShelfInMainSideViewComponent } from './pickup-shelf-in-main-side-view/pickup-shelf-in-main-side-view.component';
-import { PickUpShelfInMainComponent } from './pickup-shelf-in-main/pickup-shelf-in-main.component';
-import { PickUpShelfInListComponent } from './pickup-shelf-in-list/pickup-shelf-in-list.component';
-import { PickupShelfInEditComponent } from './pickup-shelf-in-edit/pickup-shelf-in-edit.component';
-import { MatomoRouteData } from 'ngx-matomo-client';
-
-export const routes: Routes = [
-  {
-    path: '',
-    component: PickupShelfInComponent,
-    resolve: {
-      view: viewResolver,
-    },
-    runGuardsAndResolvers: 'always',
-    children: [
-      {
-        path: 'main',
-        component: PickUpShelfInMainComponent,
-        data: {
-          view: 'main',
-          matomo: {
-            title: 'Abholfach',
-          } as MatomoRouteData,
-        },
-      },
-      {
-        path: 'list',
-        component: PickUpShelfInListComponent,
-        data: {
-          view: 'list',
-          matomo: {
-            title: 'Abholfach - Trefferliste',
-          } as MatomoRouteData,
-        },
-      },
-      {
-        path: 'list/filter',
-        component: PickupShelfFilterComponent,
-        data: {
-          view: 'filter',
-          matomo: {
-            title: 'Abholfach - Filter',
-          } as MatomoRouteData,
-        },
-      },
-      {
-        path: 'order/:orderId/:orderNumber/item/status/:orderItemProcessingStatus/:orderItemSubsetId/edit',
-        component: PickupShelfInEditComponent,
-        data: {
-          view: 'edit',
-          matomo: {
-            title: 'Abholfach - Bearbeiten',
-          } as MatomoRouteData,
-        },
-      },
-      {
-        path: 'order/:orderId/compartment/:compartmentCode/:orderItemSubsetId/edit',
-        component: PickupShelfInEditComponent,
-        data: {
-          view: 'edit',
-          matomo: {
-            title: 'Abholfach - Bearbeiten',
-          } as MatomoRouteData,
-        },
-      },
-      {
-        path: 'order/:orderId/compartment/:compartmentCode/:compartmentInfo/:orderItemSubsetId/edit',
-        component: PickupShelfInEditComponent,
-        data: {
-          view: 'edit',
-          matomo: {
-            title: 'Abholfach - Bearbeiten',
-          } as MatomoRouteData,
-        },
-      },
-      {
-        path: 'order/:orderId/:orderNumber/item/status/:orderItemProcessingStatus/:orderItemSubsetId/history',
-        component: PickUpShelfHistoryComponent,
-        data: {
-          view: 'history',
-          matomo: {
-            title: 'Abholfach - Historie',
-          } as MatomoRouteData,
-        },
-      },
-      {
-        path: 'order/:orderId/compartment/:compartmentCode/:orderItemSubsetId/history',
-        component: PickUpShelfHistoryComponent,
-        data: {
-          view: 'history',
-          matomo: {
-            title: 'Abholfach - Historie',
-          } as MatomoRouteData,
-        },
-      },
-      {
-        path: 'order/:orderId/compartment/:compartmentCode/:compartmentInfo/:orderItemSubsetId/history',
-        component: PickUpShelfHistoryComponent,
-        data: {
-          view: 'history',
-          matomo: {
-            title: 'Abholfach - Historie',
-          } as MatomoRouteData,
-        },
-      },
-      {
-        path: 'order/:orderId/:orderNumber/item/status/:orderItemProcessingStatus/:orderItemSubsetId',
-        component: PickupShelfInDetailsComponent,
-        data: {
-          view: 'details',
-          matomo: {
-            title: 'Abholfach - Details',
-          } as MatomoRouteData,
-        },
-      },
-      {
-        path: 'order/:orderId/compartment/:compartmentCode/:orderItemSubsetId',
-        component: PickupShelfInDetailsComponent,
-        data: {
-          view: 'details',
-          matomo: {
-            title: 'Abholfach - Details',
-          } as MatomoRouteData,
-        },
-      },
-      {
-        path: 'order/:orderId/compartment/:compartmentCode/:compartmentInfo/:orderItemSubsetId',
-        component: PickupShelfInDetailsComponent,
-        data: {
-          view: 'details',
-          matomo: {
-            title: 'Abholfach - Details',
-          } as MatomoRouteData,
-        },
-      },
-      { path: 'search', component: PickUpShelfInMainSideViewComponent, outlet: 'side' },
-      { path: 'list', component: PickUpShelfInListComponent, data: { view: 'list' }, outlet: 'side' },
-    ],
-  },
-];
+import { Routes } from '@angular/router';
+import { PickupShelfInComponent } from './pickup-shelf-in.component';
+import { PickupShelfFilterComponent } from '../shared/pickup-shelf-filter/pickup-shelf-filter.component';
+import { PickupShelfInDetailsComponent } from './pickup-shelf-in-details/pickup-shelf-in-details.component';
+import { viewResolver } from '../resolvers/view.resolver';
+import { PickUpShelfHistoryComponent } from '../shared/pickup-shelf-history/pickup-shelf-history.component';
+import { PickUpShelfInMainSideViewComponent } from './pickup-shelf-in-main-side-view/pickup-shelf-in-main-side-view.component';
+import { PickUpShelfInMainComponent } from './pickup-shelf-in-main/pickup-shelf-in-main.component';
+import { PickUpShelfInListComponent } from './pickup-shelf-in-list/pickup-shelf-in-list.component';
+import { PickupShelfInEditComponent } from './pickup-shelf-in-edit/pickup-shelf-in-edit.component';
+import { MatomoRouteData } from 'ngx-matomo-client';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: PickupShelfInComponent,
+    resolve: {
+      view: viewResolver,
+    },
+    runGuardsAndResolvers: 'always',
+    title: 'Abholfach - Einbuchen',
+    children: [
+      {
+        path: 'main',
+        component: PickUpShelfInMainComponent,
+        data: {
+          view: 'main',
+          matomo: {
+            title: 'Abholfach',
+          } as MatomoRouteData,
+        },
+      },
+      {
+        path: 'list',
+        component: PickUpShelfInListComponent,
+        title: 'Abholfach - Trefferliste',
+        data: {
+          view: 'list',
+          matomo: {
+            title: 'Abholfach - Trefferliste',
+          } as MatomoRouteData,
+        },
+      },
+      {
+        path: 'list/filter',
+        component: PickupShelfFilterComponent,
+        title: 'Abholfach - Filter',
+        data: {
+          view: 'filter',
+          matomo: {
+            title: 'Abholfach - Filter',
+          } as MatomoRouteData,
+        },
+      },
+      {
+        path: 'order/:orderId/:orderNumber/item/status/:orderItemProcessingStatus/:orderItemSubsetId/edit',
+        component: PickupShelfInEditComponent,
+        title: 'Abholfach - Bearbeiten',
+        data: {
+          view: 'edit',
+          matomo: {
+            title: 'Abholfach - Bearbeiten',
+          } as MatomoRouteData,
+        },
+      },
+      {
+        path: 'order/:orderId/compartment/:compartmentCode/:orderItemSubsetId/edit',
+        component: PickupShelfInEditComponent,
+        title: 'Abholfach - Bearbeiten',
+        data: {
+          view: 'edit',
+          matomo: {
+            title: 'Abholfach - Bearbeiten',
+          } as MatomoRouteData,
+        },
+      },
+      {
+        path: 'order/:orderId/compartment/:compartmentCode/:compartmentInfo/:orderItemSubsetId/edit',
+        component: PickupShelfInEditComponent,
+        title: 'Abholfach - Bearbeiten',
+        data: {
+          view: 'edit',
+          matomo: {
+            title: 'Abholfach - Bearbeiten',
+          } as MatomoRouteData,
+        },
+      },
+      {
+        path: 'order/:orderId/:orderNumber/item/status/:orderItemProcessingStatus/:orderItemSubsetId/history',
+        component: PickUpShelfHistoryComponent,
+        title: 'Abholfach - Historie',
+        data: {
+          view: 'history',
+          matomo: {
+            title: 'Abholfach - Historie',
+          } as MatomoRouteData,
+        },
+      },
+      {
+        path: 'order/:orderId/compartment/:compartmentCode/:orderItemSubsetId/history',
+        component: PickUpShelfHistoryComponent,
+        title: 'Abholfach - Historie',
+        data: {
+          view: 'history',
+          matomo: {
+            title: 'Abholfach - Historie',
+          } as MatomoRouteData,
+        },
+      },
+      {
+        path: 'order/:orderId/compartment/:compartmentCode/:compartmentInfo/:orderItemSubsetId/history',
+        component: PickUpShelfHistoryComponent,
+        title: 'Abholfach - Historie',
+        data: {
+          view: 'history',
+          matomo: {
+            title: 'Abholfach - Historie',
+          } as MatomoRouteData,
+        },
+      },
+      {
+        path: 'order/:orderId/:orderNumber/item/status/:orderItemProcessingStatus/:orderItemSubsetId',
+        component: PickupShelfInDetailsComponent,
+        title: 'Abholfach - Details',
+        data: {
+          view: 'details',
+          matomo: {
+            title: 'Abholfach - Details',
+          } as MatomoRouteData,
+        },
+      },
+      {
+        path: 'order/:orderId/compartment/:compartmentCode/:orderItemSubsetId',
+        component: PickupShelfInDetailsComponent,
+        title: 'Abholfach - Details',
+        data: {
+          view: 'details',
+          matomo: {
+            title: 'Abholfach - Details',
+          } as MatomoRouteData,
+        },
+      },
+      {
+        path: 'order/:orderId/compartment/:compartmentCode/:compartmentInfo/:orderItemSubsetId',
+        component: PickupShelfInDetailsComponent,
+        title: 'Abholfach - Details',
+        data: {
+          view: 'details',
+          matomo: {
+            title: 'Abholfach - Details',
+          } as MatomoRouteData,
+        },
+      },
+      {
+        path: 'search',
+        component: PickUpShelfInMainSideViewComponent,
+
+        outlet: 'side',
+      },
+      {
+        path: 'list',
+        component: PickUpShelfInListComponent,
+        data: { view: 'list' },
+        outlet: 'side',
+      },
+    ],
+  },
+];

apps/isa-app/src/page/pickup-shelf/pickup-shelf-out/routes.ts

@@ -1,75 +1,107 @@
-import { Routes } from '@angular/router';
-import { PickupShelfOutComponent } from './pickup-shelf-out.component';
-import { PickupShelfOutMainComponent } from './pickup-shelf-out-main/pickup-shelf-out-main.component';
-
-import { PickupShelfOutListComponent } from './pickup-shelf-out-list/pickup-shelf-out-list.component';
-import { PickupShelfFilterComponent } from '../shared/pickup-shelf-filter/pickup-shelf-filter.component';
-import { PickupShelfOutDetailsComponent } from './pickup-shelf-out-details/pickup-shelf-out-details.component';
-import { PickupShelfOutMainSideViewComponent } from './pickup-shelf-out-main-side-view/pickup-shelf-out-main-side-view.component';
-import { viewResolver } from '../resolvers/view.resolver';
-import { PickUpShelfHistoryComponent } from '../shared/pickup-shelf-history/pickup-shelf-history.component';
-import { PickupShelfOutEditComponent } from './pickup-shelf-out-edit/pickup-shelf-out-edit.component';
-
-export const routes: Routes = [
-  {
-    path: '',
-    component: PickupShelfOutComponent,
-    resolve: {
-      view: viewResolver,
-    },
-    runGuardsAndResolvers: 'always',
-    children: [
-      { path: 'main', component: PickupShelfOutMainComponent, data: { view: 'main' } },
-      { path: 'list', component: PickupShelfOutListComponent, data: { view: 'list' } },
-      { path: 'list/filter', component: PickupShelfFilterComponent, data: { view: 'filter' } },
-      {
-        path: 'order/:orderId/:orderNumber/item/status/:orderItemProcessingStatus/edit',
-        component: PickupShelfOutEditComponent,
-        data: { view: 'edit' },
-      },
-      {
-        path: 'order/:orderId/compartment/:compartmentCode/status/:orderItemProcessingStatus/edit',
-        component: PickupShelfOutEditComponent,
-        data: { view: 'edit' },
-      },
-
-      {
-        path: 'order/:orderId/compartment/:compartmentCode/:compartmentInfo/status/:orderItemProcessingStatus/edit',
-        component: PickupShelfOutEditComponent,
-        data: { view: 'edit' },
-      },
-      {
-        path: 'order/:orderId/:orderNumber/item/status/:orderItemProcessingStatus/history',
-        component: PickUpShelfHistoryComponent,
-        data: { view: 'history' },
-      },
-      {
-        path: 'order/:orderId/compartment/:compartmentCode/status/:orderItemProcessingStatus/history',
-        component: PickUpShelfHistoryComponent,
-        data: { view: 'history' },
-      },
-      {
-        path: 'order/:orderId/compartment/:compartmentCode/:compartmentInfo/status/:orderItemProcessingStatus/history',
-        component: PickUpShelfHistoryComponent,
-        data: { view: 'history' },
-      },
-      {
-        path: 'order/:orderId/:orderNumber/item/status/:orderItemProcessingStatus',
-        component: PickupShelfOutDetailsComponent,
-        data: { view: 'details' },
-      },
-      {
-        path: 'order/:orderId/compartment/:compartmentCode/status/:orderItemProcessingStatus',
-        component: PickupShelfOutDetailsComponent,
-        data: { view: 'details' },
-      },
-      {
-        path: 'order/:orderId/compartment/:compartmentCode/:compartmentInfo/status/:orderItemProcessingStatus',
-        component: PickupShelfOutDetailsComponent,
-        data: { view: 'details' },
-      },
-      { path: 'search', component: PickupShelfOutMainSideViewComponent, outlet: 'side' },
-      { path: 'list', component: PickupShelfOutListComponent, data: { view: 'list' }, outlet: 'side' },
-    ],
-  },
-];
+import { Routes } from '@angular/router';
+import { PickupShelfOutComponent } from './pickup-shelf-out.component';
+import { PickupShelfOutMainComponent } from './pickup-shelf-out-main/pickup-shelf-out-main.component';
+
+import { PickupShelfOutListComponent } from './pickup-shelf-out-list/pickup-shelf-out-list.component';
+import { PickupShelfFilterComponent } from '../shared/pickup-shelf-filter/pickup-shelf-filter.component';
+import { PickupShelfOutDetailsComponent } from './pickup-shelf-out-details/pickup-shelf-out-details.component';
+import { PickupShelfOutMainSideViewComponent } from './pickup-shelf-out-main-side-view/pickup-shelf-out-main-side-view.component';
+import { viewResolver } from '../resolvers/view.resolver';
+import { PickUpShelfHistoryComponent } from '../shared/pickup-shelf-history/pickup-shelf-history.component';
+import { PickupShelfOutEditComponent } from './pickup-shelf-out-edit/pickup-shelf-out-edit.component';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: PickupShelfOutComponent,
+    resolve: {
+      view: viewResolver,
+    },
+    runGuardsAndResolvers: 'always',
+    title: 'Warenausgabe',
+    children: [
+      {
+        path: 'main',
+        component: PickupShelfOutMainComponent,
+        data: { view: 'main' },
+      },
+      {
+        path: 'list',
+        component: PickupShelfOutListComponent,
+        data: { view: 'list' },
+      },
+      {
+        path: 'list/filter',
+        component: PickupShelfFilterComponent,
+        data: { view: 'filter' },
+      },
+      {
+        path: 'order/:orderId/:orderNumber/item/status/:orderItemProcessingStatus/edit',
+        component: PickupShelfOutEditComponent,
+        title: 'Warenausgabe - Details',
+        data: { view: 'edit' },
+      },
+      {
+        path: 'order/:orderId/compartment/:compartmentCode/status/:orderItemProcessingStatus/edit',
+        component: PickupShelfOutEditComponent,
+        title: 'Warenausgabe - Details',
+        data: { view: 'edit' },
+      },
+
+      {
+        path: 'order/:orderId/compartment/:compartmentCode/:compartmentInfo/status/:orderItemProcessingStatus/edit',
+        component: PickupShelfOutEditComponent,
+        title: 'Warenausgabe - Details',
+        data: { view: 'edit' },
+      },
+      {
+        path: 'order/:orderId/:orderNumber/item/status/:orderItemProcessingStatus/history',
+        component: PickUpShelfHistoryComponent,
+        title: 'Warenausgabe - Verlauf',
+        data: { view: 'history' },
+      },
+      {
+        path: 'order/:orderId/compartment/:compartmentCode/status/:orderItemProcessingStatus/history',
+        component: PickUpShelfHistoryComponent,
+        title: 'Warenausgabe - Verlauf',
+        data: { view: 'history' },
+      },
+      {
+        path: 'order/:orderId/compartment/:compartmentCode/:compartmentInfo/status/:orderItemProcessingStatus/history',
+        component: PickUpShelfHistoryComponent,
+        title: 'Warenausgabe - Verlauf',
+        data: { view: 'history' },
+      },
+      {
+        path: 'order/:orderId/:orderNumber/item/status/:orderItemProcessingStatus',
+        component: PickupShelfOutDetailsComponent,
+        title: 'Warenausgabe - Details',
+        data: { view: 'details' },
+      },
+      {
+        path: 'order/:orderId/compartment/:compartmentCode/status/:orderItemProcessingStatus',
+        component: PickupShelfOutDetailsComponent,
+        title: 'Warenausgabe - Details',
+        data: { view: 'details' },
+      },
+      {
+        path: 'order/:orderId/compartment/:compartmentCode/:compartmentInfo/status/:orderItemProcessingStatus',
+        component: PickupShelfOutDetailsComponent,
+        title: 'Warenausgabe - Details',
+        data: { view: 'details' },
+      },
+      {
+        path: 'search',
+        component: PickupShelfOutMainSideViewComponent,
+        outlet: 'side',
+        data: { view: 'search' },
+      },
+      {
+        path: 'list',
+        component: PickupShelfOutListComponent,
+        data: { view: 'list' },
+        outlet: 'side',
+      },
+    ],
+  },
+];

apps/isa-app/src/page/pickup-shelf/shared/pickup-shelf-details-item/pickup-shelf-details-item.component.html

@@ -1,31 +1,75 @@
 @if (orderItem) {
   <div #features class="page-pickup-shelf-details-item__features">
     @if (orderItem?.features?.prebooked) {
-      <img [uiOverlayTrigger]="prebookedTooltip" src="/assets/images/tag_icon_preorder.svg" [alt]="orderItem?.features?.prebooked" />
-      <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #prebookedTooltip [closeable]="true">
+      <img
+        [uiOverlayTrigger]="prebookedTooltip"
+        src="/assets/images/tag_icon_preorder.svg"
+        [alt]="orderItem?.features?.prebooked"
+      />
+      <ui-tooltip
+        yPosition="above"
+        xPosition="after"
+        [yOffset]="-11"
+        [xOffset]="-8"
+        #prebookedTooltip
+        [closeable]="true"
+      >
         Artikel wird für Sie vorgemerkt.
       </ui-tooltip>
     }
     @if (hasEmailNotification$ | async) {
-      <img [uiOverlayTrigger]="emailTooltip" src="/assets/images/email_bookmark.svg" />
-      <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #emailTooltip [closeable]="true">
+      <img
+        [uiOverlayTrigger]="emailTooltip"
+        src="/assets/images/email_bookmark.svg"
+      />
+      <ui-tooltip
+        yPosition="above"
+        xPosition="after"
+        [yOffset]="-11"
+        [xOffset]="-8"
+        #emailTooltip
+        [closeable]="true"
+      >
         Per E-Mail benachrichtigt
         <br />
-        @for (notifications of emailNotificationDates$ | async; track notifications) {
-          @for (notificationDate of notifications.dates; track notificationDate) {
-            {{ notifications.type | notificationType }} {{ notificationDate | date: 'dd.MM.yyyy | HH:mm' }} Uhr
+        @for (
+          notifications of emailNotificationDates$ | async;
+          track notifications
+        ) {
+          @for (
+            notificationDate of notifications.dates;
+            track notificationDate
+          ) {
+            {{ notifications.type | notificationType }}
+            {{ notificationDate | date: 'dd.MM.yyyy | HH:mm' }} Uhr
             <br />
           }
         }
       </ui-tooltip>
     }
     @if (hasSmsNotification$ | async) {
-      <img [uiOverlayTrigger]="smsTooltip" src="/assets/images/sms_bookmark.svg" />
-      <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #smsTooltip [closeable]="true">
+      <img
+        [uiOverlayTrigger]="smsTooltip"
+        src="/assets/images/sms_bookmark.svg"
+      />
+      <ui-tooltip
+        yPosition="above"
+        xPosition="after"
+        [yOffset]="-11"
+        [xOffset]="-8"
+        #smsTooltip
+        [closeable]="true"
+      >
         Per SMS benachrichtigt
         <br />
-        @for (notifications of smsNotificationDates$ | async; track notifications) {
-          @for (notificationDate of notifications.dates; track notificationDate) {
+        @for (
+          notifications of smsNotificationDates$ | async;
+          track notifications
+        ) {
+          @for (
+            notificationDate of notifications.dates;
+            track notificationDate
+          ) {
             {{ notificationDate | date: 'dd.MM.yyyy | HH:mm' }} Uhr
             <br />
           }
@@ -39,280 +83,336 @@
         [productImageNavigation]="orderItem?.product?.ean"
         [src]="orderItem.product?.ean | productImage"
         [alt]="orderItem.product?.name"
-        />
-      @if (hasRewardPoints$ | async) {
-        <ui-label [type]="Labeltype.Tag" [priority]="LabelPriority.High">
-          Prämie
-        </ui-label>
-      }
+      />
+    </div>
+    <div class="page-pickup-shelf-details-item__details">
+      <div class="flex flex-row justify-between items-start mb-[1.3125rem]">
+        <h3
+          [uiElementDistance]="features"
+          #elementDistance="uiElementDistance"
+          [style.max-width.px]="elementDistance.distanceChange | async"
+          class="flex flex-col"
+        >
+          @if (hasRewardPoints$ | async) {
+            <ui-label class="w-10 mb-2">Prämie</ui-label>
+          }
+          <div class="font-normal mb-[0.375rem]">
+            {{ orderItem.product?.contributors }}
+          </div>
+          <div>{{ orderItem.product?.name }}</div>
+        </h3>
+        <div class="history-wrapper flex flex-col items-end justify-center">
+          <button
+            class="cta-history text-p1"
+            (click)="historyClick.emit(orderItem)"
+          >
+            Historie
+          </button>
+          @if (selectable$ | async) {
+            <input
+              [ngModel]="selected$ | async"
+              (ngModelChange)="
+                setSelected($event);
+                tracker.trackEvent({
+                  category: 'pickup-shelf-list-item',
+                  action: 'select',
+                  name: orderItem?.product?.name,
+                  value: $event ? 1 : 0,
+                })
+              "
+              class="isa-select-bullet mt-4"
+              type="checkbox"
+              matomoTracker
+              #tracker="matomo"
+            />
+          }
+        </div>
       </div>
-      <div class="page-pickup-shelf-details-item__details">
-        <div class="flex flex-row justify-between items-start mb-[1.3125rem]">
-          <h3
-            [uiElementDistance]="features"
-            #elementDistance="uiElementDistance"
-            [style.max-width.px]="elementDistance.distanceChange | async"
-            class="flex flex-col"
-            >
-            <div class="font-normal mb-[0.375rem]">{{ orderItem.product?.contributors }}</div>
-            <div>{{ orderItem.product?.name }}</div>
-          </h3>
-          <div class="history-wrapper flex flex-col items-end justify-center">
-            <button class="cta-history text-p1" (click)="historyClick.emit(orderItem)">Historie</button>
-            @if (selectable$ | async) {
-              <input
-                [ngModel]="selected$ | async"
-            (ngModelChange)="
-              setSelected($event);
-              tracker.trackEvent({
-                category: 'pickup-shelf-list-item',
-                action: 'select',
-                name: orderItem?.product?.name,
-                value: $event ? 1 : 0,
-              })
-            "
-                class="isa-select-bullet mt-4"
-                type="checkbox"
-                matomoTracker
-                #tracker="matomo"
-                />
-            }
-          </div>
+      <div class="detail">
+        <div class="label">Menge</div>
+        <div class="value">
+          @if (!(canChangeQuantity$ | async)) {
+            {{ orderItem?.quantity }}x
+          }
+          @if (canChangeQuantity$ | async) {
+            <ui-quantity-dropdown
+              [showTrash]="false"
+              [range]="orderItem?.quantity"
+              [(ngModel)]="quantity"
+              (ngModelChange)="
+                tracker.trackEvent({
+                  category: 'pickup-shelf-list-item',
+                  action: 'quantity',
+                  name: orderItem?.product?.name,
+                  value: $event,
+                })
+              "
+              [showSpinner]="false"
+              matomoTracker
+              #tracker="matomo"
+            ></ui-quantity-dropdown>
+          }
+          <span class="overall-quantity"
+            >(von {{ orderItem?.overallQuantity }})</span
+          >
         </div>
+      </div>
+      @if (!!orderItem.product?.formatDetail) {
         <div class="detail">
-          <div class="label">Menge</div>
+          <div class="label">Format</div>
           <div class="value">
-            @if (!(canChangeQuantity$ | async)) {
-              {{ orderItem?.quantity }}x
+            @if (
+              orderItem?.product?.format &&
+              orderItem?.product?.format !== 'UNKNOWN'
+            ) {
+              <img
+                class="format-icon"
+                [src]="
+                  '/assets/images/Icon_' + orderItem.product?.format + '.svg'
+                "
+                alt="format icon"
+              />
             }
-            @if (canChangeQuantity$ | async) {
-              <ui-quantity-dropdown
-                [showTrash]="false"
-                [range]="orderItem?.quantity"
-                [(ngModel)]="quantity"
-            (ngModelChange)="
-              tracker.trackEvent({ category: 'pickup-shelf-list-item', action: 'quantity', name: orderItem?.product?.name, value: $event })
-            "
-                [showSpinner]="false"
-                matomoTracker
-                #tracker="matomo"
-              ></ui-quantity-dropdown>
-            }
-            <span class="overall-quantity">(von {{ orderItem?.overallQuantity }})</span>
+            <span>{{ orderItem.product?.formatDetail }}</span>
           </div>
         </div>
-        @if (!!orderItem.product?.formatDetail) {
-          <div class="detail">
-            <div class="label">Format</div>
+      }
+      @if (!!orderItem.product?.ean) {
+        <div class="detail">
+          <div class="label">ISBN/EAN</div>
+          <div class="value">{{ orderItem.product?.ean }}</div>
+        </div>
+      }
+      @if (orderItem.price !== undefined || (hasRewardPoints$ | async)) {
+        <div class="detail">
+          @if (hasRewardPoints$ | async) {
+            <div class="label">Prämie</div>
             <div class="value">
-              @if (orderItem?.product?.format && orderItem?.product?.format !== 'UNKNOWN') {
-                <img
-                  class="format-icon"
-                  [src]="'/assets/images/Icon_' + orderItem.product?.format + '.svg'"
-                  alt="format icon"
-                  />
-              }
-              <span>{{ orderItem.product?.formatDetail }}</span>
-            </div>
-          </div>
-        }
-        @if (!!orderItem.product?.ean) {
-          <div class="detail">
-            <div class="label">ISBN/EAN</div>
-            <div class="value">{{ orderItem.product?.ean }}</div>
-          </div>
-        }
-        @if (orderItem.price !== undefined || (hasRewardPoints$ | async)) {
-          <div class="detail">
-            @if (hasRewardPoints$ | async) {
-              <div class="label">Prämie</div>
-              <div class="value">{{ rewardPoints$ | async | number: '1.0-0' }} Lesepunkte</div>
-            } @else {
-              <div class="label">Preis</div>
-              <div class="value">{{ orderItem.price | currency: 'EUR' }}</div>
-            }
-          </div>
-        }
-        @if (!!orderItem.retailPrice?.vat?.inPercent) {
-          <div class="detail">
-            <div class="label">MwSt</div>
-            <div class="value">{{ orderItem.retailPrice?.vat?.inPercent }}%</div>
-          </div>
-        }
-        <hr class="border-[#EDEFF0] border-t-2 my-4" />
-        @if (orderItem.supplier) {
-          <div class="detail">
-            <div class="label">Lieferant</div>
-            <div class="value">{{ orderItem.supplier }}</div>
-            @if (!expanded) {
-              <button
-                (click)="expanded = !expanded"
-                type="button"
-                class="page-pickup-shelf-details-item__more text-[#0556B4] font-bold flex flex-row items-center justify-center"
-                [class.flex-row-reverse]="!expanded"
-                >
-                <shared-icon class="mr-1" icon="arrow-back" [size]="20" [class.ml-1]="!expanded" [class.rotate-180]="!expanded"></shared-icon>
-                {{ expanded ? 'Weniger' : 'Mehr' }}
-              </button>
-            }
-          </div>
-        }
-        @if (!!orderItem.ssc || !!orderItem.sscText) {
-          <div class="detail">
-            <div class="label">Meldenummer</div>
-            <div class="value">{{ orderItem.ssc }} - {{ orderItem.sscText }}</div>
-          </div>
-        }
-        @if (expanded) {
-          @if (!!orderItem.targetBranch) {
-            <div class="detail">
-              <div class="label">Zielfiliale</div>
-              <div class="value">{{ orderItem.targetBranch }}</div>
+              {{ rewardPoints$ | async | number: '1.0-0' }} Lesepunkte
             </div>
+          } @else {
+            <div class="label">Preis</div>
+            <div class="value">{{ orderItem.price | currency: 'EUR' }}</div>
           }
-          <div class="detail">
-            <div class="label">
-              @if (
-                orderItemFeature(orderItem) === 'Versand' ||
-                orderItemFeature(orderItem) === 'B2B-Versand' ||
-                orderItemFeature(orderItem) === 'DIG-Versand'
-                ) {
-                {{ orderItem?.estimatedDelivery ? 'Lieferung zwischen' : 'Lieferung ab' }}
-              }
-              @if (orderItemFeature(orderItem) === 'Abholung' || orderItemFeature(orderItem) === 'Rücklage') {
-                Abholung ab
-              }
-            </div>
-            @if (!!orderItem?.estimatedDelivery || !!orderItem?.estimatedShippingDate) {
-              <div class="value bg-[#D8DFE5] rounded w-max px-2">
-                @if (!!orderItem?.estimatedDelivery) {
-                  {{ orderItem?.estimatedDelivery?.start | date: 'dd.MM.yy' }} und
-                  {{ orderItem?.estimatedDelivery?.stop | date: 'dd.MM.yy' }}
-                } @else {
-                  @if (!!orderItem?.estimatedShippingDate) {
-                    {{ orderItem?.estimatedShippingDate | date: 'dd.MM.yy' }}
-                  }
-                }
-              </div>
-            }
-          </div>
-          <hr class="border-[#EDEFF0] border-t-2 my-4" />
-          @if (!!orderItem?.compartmentCode) {
-            <div class="detail">
-              <div class="label">Abholfachnr.</div>
-              <div class="value">{{ orderItem?.compartmentCode }}</div>
-            </div>
-          }
-          <div class="detail">
-            <div class="label">Vormerker</div>
-            <div class="value">{{ orderItem.isPrebooked ? 'Ja' : 'Nein' }}</div>
-          </div>
-          <hr class="border-[#EDEFF0] border-t-2 my-4" />
-          @if (!!orderItem.paymentProcessing) {
-            <div class="detail">
-              <div class="label">Zahlungsweg</div>
-              <div class="value">{{ orderItem.paymentProcessing || '-' }}</div>
-            </div>
-          }
-          @if (!!orderItem.paymentType) {
-            <div class="detail">
-              <div class="label">Zahlungsart</div>
-              <div class="value">{{ orderItem.paymentType | paymentType }}</div>
-            </div>
-          }
-          @if (receiptCount$ | async; as count) {
-            <h4 class="receipt-header">
-              {{ count > 1 ? 'Belege' : 'Beleg' }}
-            </h4>
-          }
-          @for (receipt of receipts$ | async; track receipt) {
-            @if (!!receipt?.receiptNumber) {
-              <div class="detail">
-                <div class="label">Belegnummer</div>
-                <div class="value">{{ receipt?.receiptNumber }}</div>
-              </div>
-            }
-            @if (!!receipt?.printedDate) {
-              <div class="detail">
-                <div class="label">Erstellt am</div>
-                <div class="value">{{ receipt?.printedDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
-              </div>
-            }
-            @if (!!receipt?.receiptText) {
-              <div class="detail">
-                <div class="label">Rechnungstext</div>
-                <div class="value">{{ receipt?.receiptText || '-' }}</div>
-              </div>
-            }
-            @if (!!receipt?.receiptType) {
-              <div class="detail">
-                <div class="label">Belegart</div>
-                <div class="value">
-                  {{ receipt?.receiptType === 1 ? 'Lieferschein' : receipt?.receiptType === 64 ? 'Zahlungsbeleg' : '-' }}
-                </div>
-              </div>
-            }
-          }
-          @if (!!orderItem.paymentProcessing || !!orderItem.paymentType || !!(receiptCount$ | async)) {
-            <hr
-              class="border-[#EDEFF0] border-t-2 my-4"
-              />
-          }
-          @if (expanded) {
+        </div>
+      }
+      @if (!!orderItem.retailPrice?.vat?.inPercent) {
+        <div class="detail">
+          <div class="label">MwSt</div>
+          <div class="value">{{ orderItem.retailPrice?.vat?.inPercent }}%</div>
+        </div>
+      }
+      <hr class="border-[#EDEFF0] border-t-2 my-4" />
+      @if (orderItem.supplier) {
+        <div class="detail">
+          <div class="label">Lieferant</div>
+          <div class="value">{{ orderItem.supplier }}</div>
+          @if (!expanded) {
             <button
               (click)="expanded = !expanded"
               type="button"
-              class="page-pickup-shelf-details-item__less text-[#0556B4] font-bold flex flex-row items-center justify-center"
-              >
-              <shared-icon class="mr-1" icon="arrow-back" [size]="20"></shared-icon>
-              Weniger
+              class="page-pickup-shelf-details-item__more text-[#0556B4] font-bold flex flex-row items-center justify-center"
+              [class.flex-row-reverse]="!expanded"
+            >
+              <shared-icon
+                class="mr-1"
+                icon="arrow-back"
+                [size]="20"
+                [class.ml-1]="!expanded"
+                [class.rotate-180]="!expanded"
+              ></shared-icon>
+              {{ expanded ? 'Weniger' : 'Mehr' }}
             </button>
           }
+        </div>
+      }
+      @if (!!orderItem.ssc || !!orderItem.sscText) {
+        <div class="detail">
+          <div class="label">Meldenummer</div>
+          <div class="value">{{ orderItem.ssc }} - {{ orderItem.sscText }}</div>
+        </div>
+      }
+      @if (expanded) {
+        @if (!!orderItem.targetBranch) {
+          <div class="detail">
+            <div class="label">Zielfiliale</div>
+            <div class="value">{{ orderItem.targetBranch }}</div>
+          </div>
         }
-        <div class="page-pickup-shelf-details-item__comment flex flex-col items-start mt-[1.625rem]">
-          <div class="label mb-[0.375rem]">Anmerkung</div>
-          <div class="flex flex-row w-full">
-            <textarea
-              matInput
-              cdkTextareaAutosize
-              #autosize="cdkTextareaAutosize"
-              cdkAutosizeMinRows="1"
-              cdkAutosizeMaxRows="5"
-              maxlength="200"
-              #specialCommentInput
-              (keydown.delete)="triggerResize()"
-              (keydown.backspace)="triggerResize()"
-              type="text"
-              name="comment"
-              placeholder="Eine Anmerkung hinzufügen"
-              [formControl]="specialCommentControl"
-              [class.inactive]="!specialCommentControl.dirty"
-            ></textarea>
-            <div class="comment-actions">
-              @if (!!specialCommentControl.value?.length) {
-                <button
-                  type="reset"
-                  class="clear"
-                  (click)="specialCommentControl.setValue(''); saveSpecialComment(); triggerResize()"
-                  >
-                  <shared-icon icon="close" [size]="24"></shared-icon>
-                </button>
-              }
-              @if (specialCommentControl?.enabled && specialCommentControl.dirty) {
-                <button
-                  class="cta-save"
-                  type="submit"
-                  (click)="saveSpecialComment()"
-                  matomoClickCategory="pickup-shelf-details-item"
-                  matomoClickAction="save"
-                  matomoClickName="special-comment"
-                  >
-                  Speichern
-                </button>
+        <div class="detail">
+          <div class="label">
+            @if (
+              orderItemFeature(orderItem) === 'Versand' ||
+              orderItemFeature(orderItem) === 'B2B-Versand' ||
+              orderItemFeature(orderItem) === 'DIG-Versand'
+            ) {
+              {{
+                orderItem?.estimatedDelivery
+                  ? 'Lieferung zwischen'
+                  : 'Lieferung ab'
+              }}
+            }
+            @if (
+              orderItemFeature(orderItem) === 'Abholung' ||
+              orderItemFeature(orderItem) === 'Rücklage'
+            ) {
+              Abholung ab
+            }
+          </div>
+          @if (
+            !!orderItem?.estimatedDelivery || !!orderItem?.estimatedShippingDate
+          ) {
+            <div class="value bg-[#D8DFE5] rounded w-max px-2">
+              @if (!!orderItem?.estimatedDelivery) {
+                {{ orderItem?.estimatedDelivery?.start | date: 'dd.MM.yy' }} und
+                {{ orderItem?.estimatedDelivery?.stop | date: 'dd.MM.yy' }}
+              } @else {
+                @if (!!orderItem?.estimatedShippingDate) {
+                  {{ orderItem?.estimatedShippingDate | date: 'dd.MM.yy' }}
+                }
               }
             </div>
+          }
+        </div>
+        <hr class="border-[#EDEFF0] border-t-2 my-4" />
+        @if (!!orderItem?.compartmentCode) {
+          <div class="detail">
+            <div class="label">Abholfachnr.</div>
+            <div class="value">{{ orderItem?.compartmentCode }}</div>
+          </div>
+        }
+        <div class="detail">
+          <div class="label">Vormerker</div>
+          <div class="value">{{ orderItem.isPrebooked ? 'Ja' : 'Nein' }}</div>
+        </div>
+        <hr class="border-[#EDEFF0] border-t-2 my-4" />
+        @if (!!orderItem.paymentProcessing) {
+          <div class="detail">
+            <div class="label">Zahlungsweg</div>
+            <div class="value">{{ orderItem.paymentProcessing || '-' }}</div>
+          </div>
+        }
+        @if (!!orderItem.paymentType) {
+          <div class="detail">
+            <div class="label">Zahlungsart</div>
+            <div class="value">{{ orderItem.paymentType | paymentType }}</div>
+          </div>
+        }
+        @if (receiptCount$ | async; as count) {
+          <h4 class="receipt-header">
+            {{ count > 1 ? 'Belege' : 'Beleg' }}
+          </h4>
+        }
+        @for (receipt of receipts$ | async; track receipt) {
+          @if (!!receipt?.receiptNumber) {
+            <div class="detail">
+              <div class="label">Belegnummer</div>
+              <div class="value">{{ receipt?.receiptNumber }}</div>
+            </div>
+          }
+          @if (!!receipt?.printedDate) {
+            <div class="detail">
+              <div class="label">Erstellt am</div>
+              <div class="value">
+                {{ receipt?.printedDate | date: 'dd.MM.yy | HH:mm' }} Uhr
+              </div>
+            </div>
+          }
+          @if (!!receipt?.receiptText) {
+            <div class="detail">
+              <div class="label">Rechnungstext</div>
+              <div class="value">{{ receipt?.receiptText || '-' }}</div>
+            </div>
+          }
+          @if (!!receipt?.receiptType) {
+            <div class="detail">
+              <div class="label">Belegart</div>
+              <div class="value">
+                {{
+                  receipt?.receiptType === 1
+                    ? 'Lieferschein'
+                    : receipt?.receiptType === 64
+                      ? 'Zahlungsbeleg'
+                      : '-'
+                }}
+              </div>
+            </div>
+          }
+        }
+        @if (
+          !!orderItem.paymentProcessing ||
+          !!orderItem.paymentType ||
+          !!(receiptCount$ | async)
+        ) {
+          <hr class="border-[#EDEFF0] border-t-2 my-4" />
+        }
+        @if (expanded) {
+          <button
+            (click)="expanded = !expanded"
+            type="button"
+            class="page-pickup-shelf-details-item__less text-[#0556B4] font-bold flex flex-row items-center justify-center"
+          >
+            <shared-icon
+              class="mr-1"
+              icon="arrow-back"
+              [size]="20"
+            ></shared-icon>
+            Weniger
+          </button>
+        }
+      }
+      <div
+        class="page-pickup-shelf-details-item__comment flex flex-col items-start mt-[1.625rem]"
+      >
+        <div class="label mb-[0.375rem]">Anmerkung</div>
+        <div class="flex flex-row w-full">
+          <textarea
+            matInput
+            cdkTextareaAutosize
+            #autosize="cdkTextareaAutosize"
+            cdkAutosizeMinRows="1"
+            cdkAutosizeMaxRows="5"
+            maxlength="200"
+            #specialCommentInput
+            (keydown.delete)="triggerResize()"
+            (keydown.backspace)="triggerResize()"
+            type="text"
+            name="comment"
+            placeholder="Eine Anmerkung hinzufügen"
+            [formControl]="specialCommentControl"
+            [class.inactive]="!specialCommentControl.dirty"
+          ></textarea>
+          <div class="comment-actions">
+            @if (!!specialCommentControl.value?.length) {
+              <button
+                type="reset"
+                class="clear"
+                (click)="
+                  specialCommentControl.setValue('');
+                  saveSpecialComment();
+                  triggerResize()
+                "
+              >
+                <shared-icon icon="close" [size]="24"></shared-icon>
+              </button>
+            }
+            @if (
+              specialCommentControl?.enabled && specialCommentControl.dirty
+            ) {
+              <button
+                class="cta-save"
+                type="submit"
+                (click)="saveSpecialComment()"
+                matomoClickCategory="pickup-shelf-details-item"
+                matomoClickAction="save"
+                matomoClickName="special-comment"
+              >
+                Speichern
+              </button>
+            }
           </div>
         </div>
       </div>
     </div>
-  }
+  </div>
+}

apps/isa-app/src/page/pickup-shelf/shared/pickup-shelf-details-item/pickup-shelf-details-item.component.ts

@@ -1,5 +1,10 @@
 import { CdkTextareaAutosize, TextFieldModule } from '@angular/cdk/text-field';
-import { AsyncPipe, CurrencyPipe, DatePipe, DecimalPipe } from '@angular/common';
+import {
+  AsyncPipe,
+  CurrencyPipe,
+  DatePipe,
+  DecimalPipe,
+} from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -11,12 +16,23 @@ import {
   inject,
   OnDestroy,
 } from '@angular/core';
-import { FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
-import { NavigateOnClickDirective, ProductImageModule } from '@cdn/product-image';
-import { DBHOrderItemListItemDTO, OrderDTO, ReceiptDTO } from '@generated/swagger/oms-api';
+import {
+  FormsModule,
+  ReactiveFormsModule,
+  UntypedFormControl,
+} from '@angular/forms';
+import {
+  NavigateOnClickDirective,
+  ProductImageModule,
+} from '@cdn/product-image';
+import {
+  DBHOrderItemListItemDTO,
+  OrderDTO,
+  ReceiptDTO,
+} from '@generated/swagger/oms-api';
 import { getOrderItemRewardFeature } from '@isa/oms/data-access';
 import { UiCommonModule } from '@ui/common';
-import { LabelComponent, Labeltype, LabelPriority } from '@isa/ui/label';
+import { LabelComponent } from '@isa/ui/label';
 import { UiTooltipModule } from '@ui/tooltip';
 import { PickupShelfPaymentTypePipe } from '../pipes/payment-type.pipe';
 import { IconModule } from '@shared/components/icon';
@@ -60,8 +76,8 @@ export interface PickUpShelfDetailsItemComponentState {
     NotificationTypePipe,
     NavigateOnClickDirective,
     MatomoModule,
-    LabelComponent
-],
+    LabelComponent,
+  ],
 })
 export class PickUpShelfDetailsItemComponent
   extends ComponentStore<PickUpShelfDetailsItemComponentState>
@@ -88,7 +104,11 @@ export class PickUpShelfDetailsItemComponent
         this._store.selectOrderItem(this.orderItem, false);
       }
 
-      this.patchState({ orderItem, quantity: orderItem?.quantity, more: false });
+      this.patchState({
+        orderItem,
+        quantity: orderItem?.quantity,
+        more: false,
+      });
       this.specialCommentControl.reset(orderItem?.specialComment);
       // Add New OrderItem to selected list if selected was set to true by its input
       if (this.get((s) => s.selected)) {
@@ -110,16 +130,24 @@ export class PickUpShelfDetailsItemComponent
   readonly orderItem$ = this.select((s) => s.orderItem);
 
   emailNotificationDates$ = this.orderItem$.pipe(
-    switchMap((orderItem) => this._store.getEmailNotificationDate$(orderItem?.orderItemSubsetId)),
+    switchMap((orderItem) =>
+      this._store.getEmailNotificationDate$(orderItem?.orderItemSubsetId),
+    ),
   );
 
-  hasEmailNotification$ = this.emailNotificationDates$.pipe(map((dates) => dates?.length > 0));
+  hasEmailNotification$ = this.emailNotificationDates$.pipe(
+    map((dates) => dates?.length > 0),
+  );
 
   smsNotificationDates$ = this.orderItem$.pipe(
-    switchMap((orderItem) => this._store.getSmsNotificationDate$(orderItem?.orderItemSubsetId)),
+    switchMap((orderItem) =>
+      this._store.getSmsNotificationDate$(orderItem?.orderItemSubsetId),
+    ),
   );
 
-  hasSmsNotification$ = this.smsNotificationDates$.pipe(map((dates) => dates?.length > 0));
+  hasSmsNotification$ = this.smsNotificationDates$.pipe(
+    map((dates) => dates?.length > 0),
+  );
 
   /**
    * Observable that indicates whether the order item has reward points (Lesepunkte).
@@ -137,8 +165,15 @@ export class PickUpShelfDetailsItemComponent
     map((orderItem) => getOrderItemRewardFeature(orderItem)),
   );
 
-  canChangeQuantity$ = combineLatest([this.orderItem$, this._store.fetchPartial$]).pipe(
-    map(([item, partialPickup]) => ([16, 8192].includes(item?.processingStatus) || partialPickup) && item.quantity > 1),
+  canChangeQuantity$ = combineLatest([
+    this.orderItem$,
+    this._store.fetchPartial$,
+  ]).pipe(
+    map(
+      ([item, partialPickup]) =>
+        ([16, 8192].includes(item?.processingStatus) || partialPickup) &&
+        item.quantity > 1,
+    ),
   );
 
   get quantity() {
@@ -147,7 +182,10 @@ export class PickUpShelfDetailsItemComponent
   set quantity(quantity: number) {
     if (this.quantity !== quantity) {
       this.patchState({ quantity });
-      this._store.setSelectedOrderItemQuantity({ orderItemSubsetId: this.orderItem.orderItemSubsetId, quantity });
+      this._store.setSelectedOrderItemQuantity({
+        orderItemSubsetId: this.orderItem.orderItemSubsetId,
+        quantity,
+      });
     }
   }
 
@@ -155,7 +193,9 @@ export class PickUpShelfDetailsItemComponent
 
   @Input()
   get selected() {
-    return this._store.selectedOrderItemIds.includes(this.orderItem?.orderItemSubsetId);
+    return this._store.selectedOrderItemIds.includes(
+      this.orderItem?.orderItemSubsetId,
+    );
   }
   set selected(selected: boolean) {
     if (this.selected !== selected) {
@@ -164,23 +204,40 @@ export class PickUpShelfDetailsItemComponent
     }
   }
 
-  readonly selected$ = combineLatest([this.orderItem$, this._store.selectedOrderItemIds$]).pipe(
-    map(([orderItem, selectedItems]) => selectedItems.includes(orderItem?.orderItemSubsetId)),
+  readonly selected$ = combineLatest([
+    this.orderItem$,
+    this._store.selectedOrderItemIds$,
+  ]).pipe(
+    map(([orderItem, selectedItems]) =>
+      selectedItems.includes(orderItem?.orderItemSubsetId),
+    ),
   );
 
   @Output()
   selectedChange = new EventEmitter<boolean>();
 
   get isItemSelectable() {
-    return this._store.orderItems?.some((item) => !!item?.actions && item?.actions?.length > 0);
+    return this._store.orderItems?.some(
+      (item) => !!item?.actions && item?.actions?.length > 0,
+    );
   }
 
   get selectable() {
-    return this.isItemSelectable && this._store.orderItems.length > 1 && this._store.fetchPartial;
+    return (
+      this.isItemSelectable &&
+      this._store.orderItems.length > 1 &&
+      this._store.fetchPartial
+    );
   }
 
-  readonly selectable$ = combineLatest([this._store.orderItems$, this._store.fetchPartial$]).pipe(
-    map(([orderItems, fetchPartial]) => orderItems.length > 1 && this.isItemSelectable && fetchPartial),
+  readonly selectable$ = combineLatest([
+    this._store.orderItems$,
+    this._store.fetchPartial$,
+  ]).pipe(
+    map(
+      ([orderItems, fetchPartial]) =>
+        orderItems.length > 1 && this.isItemSelectable && fetchPartial,
+    ),
   );
 
   get receipts() {
@@ -193,7 +250,9 @@ export class PickUpShelfDetailsItemComponent
 
   readonly receipts$ = this._store.receipts$;
 
-  readonly receiptCount$ = this.receipts$.pipe(map((receipts) => receipts?.length));
+  readonly receiptCount$ = this.receipts$.pipe(
+    map((receipts) => receipts?.length),
+  );
 
   specialCommentControl = new UntypedFormControl();
 
@@ -203,10 +262,6 @@ export class PickUpShelfDetailsItemComponent
 
   expanded = false;
 
-  // Expose to template
-  Labeltype = Labeltype;
-  LabelPriority = LabelPriority;
-
   constructor(private _cdr: ChangeDetectorRef) {
     super({
       more: false,
@@ -239,8 +294,9 @@ export class PickUpShelfDetailsItemComponent
 
   orderItemFeature(orderItemListItem: DBHOrderItemListItemDTO) {
     const orderItems = this.order?.items;
-    return orderItems?.find((orderItem) => orderItem.data.id === orderItemListItem.orderItemId)?.data?.features
-      ?.orderType;
+    return orderItems?.find(
+      (orderItem) => orderItem.data.id === orderItemListItem.orderItemId,
+    )?.data?.features?.orderType;
   }
 
   triggerResize() {

apps/isa-app/src/page/pickup-shelf/shared/pickup-shelf-list-item/pickup-shelf-list-item.component.html

@@ -4,12 +4,16 @@
   [routerLinkActive]="!isTablet && !primaryOutletActive ? 'active' : ''"
   queryParamsHandling="preserve"
   (click)="onDetailsClick()"
-  >
+>
   <div
     class="page-pickup-shelf-list-item__item-grid-container"
-    [class.page-pickup-shelf-list-item__item-grid-container-main]="primaryOutletActive"
-    [class.page-pickup-shelf-list-item__item-grid-container-secondary]="primaryOutletActive && isItemSelectable === undefined"
-    >
+    [class.page-pickup-shelf-list-item__item-grid-container-main]="
+      primaryOutletActive
+    "
+    [class.page-pickup-shelf-list-item__item-grid-container-secondary]="
+      primaryOutletActive && isItemSelectable === undefined
+    "
+  >
     <div class="page-pickup-shelf-list-item__item-thumbnail text-center">
       @if (item?.product?.ean | productImage; as productImage) {
         <img
@@ -18,88 +22,126 @@
           [productImageNavigation]="item?.product?.ean"
           [src]="productImage"
           [alt]="item?.product?.name"
-          />
-      }
-      @if (hasRewardPoints) {
-        <ui-label [type]="Labeltype.Tag" [priority]="LabelPriority.High">
-          Prämie
-        </ui-label>
+        />
       }
     </div>
 
     <div
       class="page-pickup-shelf-list-item__item-title-contributors flex flex-col"
-      [class.mr-32]="showCompartmentCode && item.features?.paid && (isTablet || isDesktopSmall || primaryOutletActive)"
-      >
+      [class.mr-32]="
+        showCompartmentCode &&
+        item.features?.paid &&
+        (isTablet || isDesktopSmall || primaryOutletActive)
+      "
+    >
+      @if (hasRewardPoints) {
+        <ui-label class="w-10 mb-2">Prämie</ui-label>
+      }
+
       <div
         class="page-pickup-shelf-list-item__item-contributors text-p2 font-normal text-ellipsis overflow-hidden max-w-[24rem] whitespace-nowrap mb-[0.375rem]"
-        >
-        @for (contributor of contributors; track contributor; let last = $last) {
+      >
+        @for (
+          contributor of contributors;
+          track contributor;
+          let last = $last
+        ) {
           {{ contributor }}{{ last ? '' : ';' }}
         }
       </div>
 
       <div
         class="page-pickup-shelf-list-item__item-title font-bold text-p1 desktop-small:text-p2"
-        [class.page-pickup-shelf-list-item__item-title-bigger-text-size]="!primaryOutletActive"
-        >
+        [class.page-pickup-shelf-list-item__item-title-bigger-text-size]="
+          !primaryOutletActive
+        "
+      >
         {{ item?.product?.name }}
       </div>
     </div>
 
-    <div class="page-pickup-shelf-list-item__item-ean-quantity-changed flex flex-col">
-      <div class="page-pickup-shelf-list-item__item-ean text-p2 flex flex-row mb-[0.375rem]" [attr.data-ean]="item?.product?.ean">
+    <div
+      class="page-pickup-shelf-list-item__item-ean-quantity-changed flex flex-col"
+    >
+      <div
+        class="page-pickup-shelf-list-item__item-ean text-p2 flex flex-row mb-[0.375rem]"
+        [attr.data-ean]="item?.product?.ean"
+      >
         <div class="min-w-[7.5rem]">EAN</div>
         <div class="font-bold">{{ item?.product?.ean }}</div>
       </div>
 
-      <div class="page-pickup-shelf-list-item__item-quantity flex flex-row text-p2 mb-[0.375rem]" [attr.data-menge]="item.quantity">
+      <div
+        class="page-pickup-shelf-list-item__item-quantity flex flex-row text-p2 mb-[0.375rem]"
+        [attr.data-menge]="item.quantity"
+      >
         <div class="min-w-[7.5rem]">Menge</div>
         <div class="font-bold">{{ item.quantity }} x</div>
       </div>
 
-      <div class="page-pickup-shelf-list-item__item-changed text-p2" [attr.data-geaendert]="item?.processingStatusDate">
+      <div
+        class="page-pickup-shelf-list-item__item-changed text-p2"
+        [attr.data-geaendert]="item?.processingStatusDate"
+      >
         @if (showChangeDate) {
           <div class="flex flex-row">
             <div class="min-w-[7.5rem]">Geändert</div>
-            <div class="font-bold">{{ item?.processingStatusDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
+            <div class="font-bold">
+              {{ item?.processingStatusDate | date: 'dd.MM.yy | HH:mm' }} Uhr
+            </div>
           </div>
         } @else {
           <div class="flex flex-row" [attr.data-bestelldatum]="item?.orderDate">
             <div class="min-w-[7.5rem]">Bestelldatum</div>
-            <div class="font-bold">{{ item?.orderDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
+            <div class="font-bold">
+              {{ item?.orderDate | date: 'dd.MM.yy | HH:mm' }} Uhr
+            </div>
           </div>
         }
       </div>
     </div>
 
-    <div class="page-pickup-shelf-list-item__item-order-number-processing-status-paid flex flex-col">
+    <div
+      class="page-pickup-shelf-list-item__item-order-number-processing-status-paid flex flex-col"
+    >
       @if (showCompartmentCode) {
         <div
           class="page-pickup-shelf-list-item__item-order-number text-h3 mb-[0.375rem] self-end font-bold break-all text-right"
           [attr.data-compartment-code]="item?.compartmentCode"
           [attr.data-compartment-info]="item?.compartmentInfo"
-          >
-          {{ item?.compartmentCode }}{{ item?.compartmentInfo && '_' + item?.compartmentInfo }}
+        >
+          {{ item?.compartmentCode
+          }}{{ item?.compartmentInfo && '_' + item?.compartmentInfo }}
         </div>
       }
 
-      <div class="page-pickup-shelf-list-item__item-processing-paid-status flex flex-col font-bold self-end text-p2 mb-[0.375rem]">
+      <div
+        class="page-pickup-shelf-list-item__item-processing-paid-status flex flex-col font-bold self-end text-p2 mb-[0.375rem]"
+      >
         <div
           class="page-pickup-shelf-list-item__item-processing-status flex flex-row mb-[0.375rem] rounded p-3 py-[0.125rem] text-white"
           [style]="processingStatusColor"
           [attr.data-processing-status]="item.processingStatus"
-          >
+        >
           {{ item.processingStatus | processingStatus }}
         </div>
 
-        <div class="page-pickup-shelf-list-item__item-paid self-end flex flex-row">
-          @if (item.features?.paid && (isTablet || isDesktopSmall || primaryOutletActive)) {
+        <div
+          class="page-pickup-shelf-list-item__item-paid self-end flex flex-row"
+        >
+          @if (
+            item.features?.paid &&
+            (isTablet || isDesktopSmall || primaryOutletActive)
+          ) {
             <div
               class="font-bold flex flex-row items-center justify-center text-p2 text-[#26830C]"
               [attr.data-paid]="item.features?.paid"
-              >
-              <shared-icon class="flex items-center justify-center mr-[0.375rem]" [size]="24" icon="credit-card"></shared-icon>
+            >
+              <shared-icon
+                class="flex items-center justify-center mr-[0.375rem]"
+                [size]="24"
+                icon="credit-card"
+              ></shared-icon>
               {{ item.features?.paid }}
             </div>
           }
@@ -110,28 +152,35 @@
     @if (isItemSelectable) {
       <div
         class="page-pickup-shelf-list-item__item-select-bullet justify-self-end self-center mb-2"
-        [class.page-pickup-shelf-list-item__item-select-bullet-primary]="primaryOutletActive"
-        >
+        [class.page-pickup-shelf-list-item__item-select-bullet-primary]="
+          primaryOutletActive
+        "
+      >
         <input
           (click)="$event.stopPropagation()"
           [ngModel]="selectedItem"
-        (ngModelChange)="
-          setSelected();
-          tracker.trackEvent({ category: 'pickup-shelf-list-item', action: 'select', name: item?.product?.name, value: $event ? 1 : 0 })
-        "
+          (ngModelChange)="
+            setSelected();
+            tracker.trackEvent({
+              category: 'pickup-shelf-list-item',
+              action: 'select',
+              name: item?.product?.name,
+              value: $event ? 1 : 0,
+            })
+          "
           class="isa-select-bullet"
           type="checkbox"
           matomoTracker
           #tracker="matomo"
-          />
-        </div>
-      }
-
-      <div
-        [attr.data-special-comment]="item?.specialComment"
-        class="page-pickup-shelf-list-item__item-special-comment break-words font-bold text-p2 mt-[0.375rem] text-[#996900]"
-        >
-        {{ item?.specialComment }}
+        />
       </div>
+    }
+
+    <div
+      [attr.data-special-comment]="item?.specialComment"
+      class="page-pickup-shelf-list-item__item-special-comment break-words font-bold text-p2 mt-[0.375rem] text-[#996900]"
+    >
+      {{ item?.specialComment }}
     </div>
-  </a>
+  </div>
+</a>

apps/isa-app/src/page/pickup-shelf/shared/pickup-shelf-list-item/pickup-shelf-list-item.component.ts

@@ -1,12 +1,21 @@
 import { DatePipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, ElementRef, Input, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  inject,
+} from '@angular/core';
 import { RouterLink, RouterLinkActive } from '@angular/router';
-import { NavigateOnClickDirective, ProductImageModule } from '@cdn/product-image';
+import {
+  NavigateOnClickDirective,
+  ProductImageModule,
+} from '@cdn/product-image';
 import { EnvironmentService } from '@core/environment';
 import { IconModule } from '@shared/components/icon';
 import { DBHOrderItemListItemDTO } from '@generated/swagger/oms-api';
 import { getOrderItemRewardFeature } from '@isa/oms/data-access';
-import { LabelComponent, Labeltype, LabelPriority } from '@isa/ui/label';
+import { LabelComponent } from '@isa/ui/label';
 import { UiCommonModule } from '@ui/common';
 import { PickupShelfProcessingStatusPipe } from '../pipes/processing-status.pipe';
 import { FormsModule } from '@angular/forms';
@@ -32,8 +41,8 @@ import { MatomoModule } from 'ngx-matomo-client';
     PickupShelfProcessingStatusPipe,
     NavigateOnClickDirective,
     MatomoModule,
-    LabelComponent
-],
+    LabelComponent,
+  ],
   providers: [PickupShelfProcessingStatusPipe],
 })
 export class PickUpShelfListItemComponent {
@@ -45,6 +54,7 @@ export class PickUpShelfListItemComponent {
 
   @Input() primaryOutletActive = false;
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   @Input() itemDetailsLink: any[] = [];
 
   @Input() isItemSelectable?: boolean = undefined;
@@ -64,7 +74,9 @@ export class PickUpShelfListItemComponent {
   }
 
   get contributors() {
-    return this.item?.product?.contributors?.split(';').map((val) => val.trim());
+    return this.item?.product?.contributors
+      ?.split(';')
+      .map((val) => val.trim());
   }
 
   get showChangeDate() {
@@ -73,11 +85,19 @@ export class PickUpShelfListItemComponent {
 
   // Zeige nur CompartmentCode an wenn verfügbar
   get showCompartmentCode() {
-    return !!this.item?.compartmentCode && (this.isTablet || this.isDesktopSmall || this.primaryOutletActive);
+    return (
+      !!this.item?.compartmentCode &&
+      (this.isTablet || this.isDesktopSmall || this.primaryOutletActive)
+    );
   }
 
   get processingStatusColor() {
-    return { 'background-color': this._processingStatusPipe.transform(this.item?.processingStatus, true) };
+    return {
+      'background-color': this._processingStatusPipe.transform(
+        this.item?.processingStatus,
+        true,
+      ),
+    };
   }
 
   /**
@@ -90,14 +110,12 @@ export class PickUpShelfListItemComponent {
 
   selected$ = this.store.selectedListItems$.pipe(
     map((selectedListItems) =>
-      selectedListItems?.find((item) => item?.orderItemSubsetId === this.item?.orderItemSubsetId),
+      selectedListItems?.find(
+        (item) => item?.orderItemSubsetId === this.item?.orderItemSubsetId,
+      ),
     ),
   );
 
-  // Expose to template
-  Labeltype = Labeltype;
-  LabelPriority = LabelPriority;
-
   constructor(
     private _elRef: ElementRef,
     private _environment: EnvironmentService,
@@ -125,7 +143,9 @@ export class PickUpShelfListItemComponent {
         store: 'PickupShelfDetailsStore',
       })) ?? [];
 
-    return items.some((i) => i.orderItemSubsetId === this.item.orderItemSubsetId);
+    return items.some(
+      (i) => i.orderItemSubsetId === this.item.orderItemSubsetId,
+    );
   }
 
   addOrderItemIntoCache() {
@@ -144,7 +164,10 @@ export class PickUpShelfListItemComponent {
   }
 
   scrollIntoView() {
-    this._elRef.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    this._elRef.nativeElement.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center',
+    });
   }
 
   setSelected() {

apps/isa-app/src/page/task-calendar/page-task-calendar-routing.module.ts

@@ -1,27 +1,36 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { PageTaskCalendarComponent } from './page-task-calendar.component';
-import { CalendarComponent } from './pages/calendar/calendar.component';
-import { CalendarModule } from './pages/calendar/calendar.module';
-import { TaskSearchComponent } from './pages/task-search';
-import { TasksComponent } from './pages/tasks/tasks.component';
-import { TasksModule } from './pages/tasks/tasks.module';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: PageTaskCalendarComponent,
-    children: [
-      { path: 'calendar', component: CalendarComponent },
-      { path: 'tasks', component: TasksComponent },
-      { path: 'search', component: TaskSearchComponent },
-      { path: '', pathMatch: 'full', redirectTo: 'tasks' },
-    ],
-  },
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes), CalendarModule, TasksModule],
-  exports: [RouterModule],
-})
-export class PageTaskCalendarRoutingModule {}
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { PageTaskCalendarComponent } from './page-task-calendar.component';
+import { CalendarComponent } from './pages/calendar/calendar.component';
+import { CalendarModule } from './pages/calendar/calendar.module';
+import { TaskSearchComponent } from './pages/task-search';
+import { TasksComponent } from './pages/tasks/tasks.component';
+import { TasksModule } from './pages/tasks/tasks.module';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PageTaskCalendarComponent,
+    title: 'Tätigkeitskalender',
+    children: [
+      { path: 'calendar', component: CalendarComponent },
+      {
+        path: 'tasks',
+        title: 'Tätigkeitskalender - Aufgaben',
+        component: TasksComponent,
+      },
+      {
+        path: 'search',
+        title: 'Tätigkeitskalender - Suche',
+        component: TaskSearchComponent,
+      },
+      { path: '', pathMatch: 'full', redirectTo: 'tasks' },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes), CalendarModule, TasksModule],
+  exports: [RouterModule],
+})
+export class PageTaskCalendarRoutingModule {}

apps/isa-app/src/tailwind.scss

@@ -20,6 +20,7 @@
   @import "../../../libs/ui/skeleton-loader/src/skeleton-loader.scss";
   @import "../../../libs/ui/tooltip/src/tooltip.scss";
   @import "../../../libs/ui/label/src/label.scss";
+  @import "../../../libs/ui/notice/src/notice.scss";
   @import "../../../libs/ui/switch/src/switch.scss";
 
   .input-control {

apps/isa-app/src/ui/modal/dialog/dialog-modal.component.html

@@ -1,16 +1,43 @@
 @if (modalRef.data.subtitle; as subtitle) {
   <h2 class="subtitle">{{ subtitle }}</h2>
 }
-@if (modalRef.data.content; as content) {
-  <p class="content">
-    {{ content }}
-  </p>
+
+<!-- QR Code Display Mode -->
+@if (shouldShowQrCode(); as showQr) {
+  @if (parsedContent(); as parsed) {
+    @if (parsed.textBefore) {
+      <p class="content">{{ parsed.textBefore }}</p>
+    }
+
+    <div class="qr-code-container">
+      <qrcode
+        [qrdata]="parsed.url!"
+        [width]="200"
+        [errorCorrectionLevel]="'M'"
+        [margin]="2"
+      ></qrcode>
+    </div>
+
+    @if (parsed.textAfter) {
+      <p class="content">{{ parsed.textAfter }}</p>
+    }
+  }
+} @else {
+  <!-- Default Text Display Mode -->
+  @if (modalRef.data.content; as content) {
+    <p class="content">
+      {{ content }}
+    </p>
+  }
 }
 
 @if (modalRef.data.actions; as actions) {
   <div class="actions">
     @for (action of actions; track action) {
-      <button [class.selected]="action.selected" (click)="handleCommand(action.command)">
+      <button
+        [class.selected]="action.selected"
+        (click)="handleCommand(action.command)"
+      >
         {{ action.label }}
       </button>
     }

apps/isa-app/src/ui/modal/dialog/dialog-modal.component.scss

@@ -15,11 +15,15 @@
   @apply text-lg text-center whitespace-pre-wrap mb-8 px-16;
 }
 
+.qr-code-container {
+  @apply flex flex-col items-center justify-center mb-8;
+}
+
 .actions {
   @apply text-center mb-8;
 
   button {
-    @apply border-2 border-solid border-brand bg-white text-brand rounded-full py-3 px-6 font-bold text-lg outline-none self-end whitespace-nowrap ml-4;
+    @apply border-2 border-solid border-brand bg-white text-brand rounded-full py-3 px-6 font-bold text-lg outline-none self-end whitespace-nowrap;
 
     &.selected {
       @apply bg-brand text-white;

apps/isa-app/src/ui/modal/dialog/dialog-modal.component.ts

@@ -1,7 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, computed, OnInit } from '@angular/core';
 import { CommandService } from '@core/command';
 import { UiModalRef } from '../defs/modal-ref';
 import { DialogModel } from './dialog.model';
+import { parseDialogContentForUrl } from './dialog.helper';
 
 @Component({
   selector: 'ui-dialog-modal',
@@ -10,6 +11,26 @@ import { DialogModel } from './dialog.model';
   standalone: false,
 })
 export class UiDialogModalComponent implements OnInit {
+  /**
+   * Parsed content with URL extracted for QR code display.
+   * Only relevant when showUrlAsQrCode is true.
+   */
+  readonly parsedContent = computed(() => {
+    const data = this.modalRef.data;
+    if (!data.showUrlAsQrCode) {
+      return null;
+    }
+    return parseDialogContentForUrl(data.content);
+  });
+
+  /**
+   * Whether to show the QR code instead of the URL text.
+   */
+  readonly shouldShowQrCode = computed(() => {
+    const parsed = this.parsedContent();
+    return parsed !== null && parsed.url !== null;
+  });
+
   constructor(
     public modalRef: UiModalRef<any, DialogModel<any>>,
     private _command: CommandService,

apps/isa-app/src/ui/modal/dialog/dialog.helper.ts

@@ -0,0 +1,48 @@
+import { ParsedDialogContent } from './dialog.model';
+
+/**
+ * Regular expression to match URLs in text.
+ * Matches http:// and https:// URLs.
+ */
+const URL_REGEX = /https?:\/\/[^\s]+/i;
+
+/**
+ * Parses the dialog content and extracts the first URL.
+ * Splits the content into text before the URL, the URL itself, and text after.
+ *
+ * @param content - The dialog content string to parse
+ * @returns ParsedDialogContent with the split content
+ */
+export const parseDialogContentForUrl = (
+  content: string | undefined,
+): ParsedDialogContent => {
+  if (!content) {
+    return { textBefore: '', url: null, textAfter: '' };
+  }
+
+  const match = content.match(URL_REGEX);
+
+  if (!match || match.index === undefined) {
+    return { textBefore: content, url: null, textAfter: '' };
+  }
+
+  const url = match[0];
+  const urlIndex = match.index;
+  const textBefore = content.substring(0, urlIndex).trim();
+  const textAfter = content.substring(urlIndex + url.length).trim();
+
+  return { textBefore, url, textAfter };
+};
+
+/**
+ * Checks if the given content contains a URL.
+ *
+ * @param content - The content string to check
+ * @returns true if a URL is found, false otherwise
+ */
+export const contentHasUrl = (content: string | undefined): boolean => {
+  if (!content) {
+    return false;
+  }
+  return URL_REGEX.test(content);
+};

apps/isa-app/src/ui/modal/dialog/dialog.model.spec.ts

@@ -0,0 +1,152 @@
+import { contentHasUrl, parseDialogContentForUrl } from './dialog.helper';
+import { ParsedDialogContent } from './dialog.model';
+
+describe('parseDialogContentForUrl', () => {
+  it('should return empty result for undefined content', () => {
+    const result = parseDialogContentForUrl(undefined);
+
+    expect(result).toEqual<ParsedDialogContent>({
+      textBefore: '',
+      url: null,
+      textAfter: '',
+    });
+  });
+
+  it('should return empty result for empty string', () => {
+    const result = parseDialogContentForUrl('');
+
+    expect(result).toEqual<ParsedDialogContent>({
+      textBefore: '',
+      url: null,
+      textAfter: '',
+    });
+  });
+
+  it('should return content as textBefore when no URL is found', () => {
+    const content = 'This is some text without a URL';
+
+    const result = parseDialogContentForUrl(content);
+
+    expect(result).toEqual<ParsedDialogContent>({
+      textBefore: content,
+      url: null,
+      textAfter: '',
+    });
+  });
+
+  it('should extract https URL from content', () => {
+    const content = 'Text before https://example.com text after';
+
+    const result = parseDialogContentForUrl(content);
+
+    expect(result).toEqual<ParsedDialogContent>({
+      textBefore: 'Text before',
+      url: 'https://example.com',
+      textAfter: 'text after',
+    });
+  });
+
+  it('should extract http URL from content', () => {
+    const content = 'Text before http://example.com text after';
+
+    const result = parseDialogContentForUrl(content);
+
+    expect(result).toEqual<ParsedDialogContent>({
+      textBefore: 'Text before',
+      url: 'http://example.com',
+      textAfter: 'text after',
+    });
+  });
+
+  it('should handle URL at the beginning of content', () => {
+    const content = 'https://example.com/path text after';
+
+    const result = parseDialogContentForUrl(content);
+
+    expect(result).toEqual<ParsedDialogContent>({
+      textBefore: '',
+      url: 'https://example.com/path',
+      textAfter: 'text after',
+    });
+  });
+
+  it('should handle URL at the end of content', () => {
+    const content = 'Text before https://example.com/path';
+
+    const result = parseDialogContentForUrl(content);
+
+    expect(result).toEqual<ParsedDialogContent>({
+      textBefore: 'Text before',
+      url: 'https://example.com/path',
+      textAfter: '',
+    });
+  });
+
+  it('should handle real-world content with newlines', () => {
+    const content = `Punkte: 80500
+Um alle Vorteile der Kundenkarte nutzen zu können, ist eine Verknüpfung zu einem Online-Konto notwendig. Kund:innen können sich über den QR-Code selbstständig anmelden oder die Kundenkarte dem bestehendem Konto hinzufügen. Bereits gesammelte Punkte werden übernommen.
+https://h-k.me/QOHNTFVA`;
+
+    const result = parseDialogContentForUrl(content);
+
+    expect(result.url).toBe('https://h-k.me/QOHNTFVA');
+    expect(result.textBefore).toContain('Punkte: 80500');
+    expect(result.textBefore).toContain(
+      'Bereits gesammelte Punkte werden übernommen.',
+    );
+    expect(result.textAfter).toBe('');
+  });
+
+  it('should extract only the first URL when multiple URLs are present', () => {
+    const content = 'First https://first.com then https://second.com';
+
+    const result = parseDialogContentForUrl(content);
+
+    expect(result).toEqual<ParsedDialogContent>({
+      textBefore: 'First',
+      url: 'https://first.com',
+      textAfter: 'then https://second.com',
+    });
+  });
+
+  it('should handle URLs with paths and query parameters', () => {
+    const content =
+      'Visit https://example.com/path?query=value&foo=bar for more';
+
+    const result = parseDialogContentForUrl(content);
+
+    expect(result.url).toBe('https://example.com/path?query=value&foo=bar');
+    expect(result.textBefore).toBe('Visit');
+    expect(result.textAfter).toBe('for more');
+  });
+});
+
+describe('contentHasUrl', () => {
+  it('should return false for undefined content', () => {
+    expect(contentHasUrl(undefined)).toBe(false);
+  });
+
+  it('should return false for empty string', () => {
+    expect(contentHasUrl('')).toBe(false);
+  });
+
+  it('should return false for content without URL', () => {
+    expect(contentHasUrl('This is text without a URL')).toBe(false);
+  });
+
+  it('should return true for content with https URL', () => {
+    expect(contentHasUrl('Check out https://example.com')).toBe(true);
+  });
+
+  it('should return true for content with http URL', () => {
+    expect(contentHasUrl('Check out http://example.com')).toBe(true);
+  });
+
+  it('should return true for real-world content', () => {
+    const content = `Punkte: 80500
+Um alle Vorteile der Kundenkarte nutzen zu können...
+https://h-k.me/QOHNTFVA`;
+
+    expect(contentHasUrl(content)).toBe(true);
+  });
+});

apps/isa-app/src/ui/modal/dialog/dialog.model.ts

@@ -1,4 +1,7 @@
-import { DialogSettings, KeyValueDTOOfStringAndString } from '@generated/swagger/crm-api';
+import {
+  DialogSettings,
+  KeyValueDTOOfStringAndString,
+} from '@generated/swagger/crm-api';
 
 export interface DialogModel<T = any> {
   actions?: Array<KeyValueDTOOfStringAndString>;
@@ -14,4 +17,21 @@ export interface DialogModel<T = any> {
    * default: true
    */
   handleCommand?: boolean;
+  /**
+   * If true, URLs in the content will be displayed as QR codes.
+   * default: false
+   */
+  showUrlAsQrCode?: boolean;
+}
+
+/**
+ * Result of parsing content for URLs
+ */
+export interface ParsedDialogContent {
+  /** Text before the URL */
+  textBefore: string;
+  /** The extracted URL (if any) */
+  url: string | null;
+  /** Text after the URL */
+  textAfter: string;
 }

apps/isa-app/src/ui/modal/dialog/open-dialog.interceptor.ts

@@ -13,6 +13,7 @@ import { Observable, throwError } from 'rxjs';
 import { catchError, tap } from 'rxjs/operators';
 import { DialogModel } from './dialog.model';
 import { ToasterService } from '@shared/shell';
+import { contentHasUrl } from './dialog.helper';
 
 @Injectable()
 export class OpenDialogInterceptor implements HttpInterceptor {
@@ -21,7 +22,10 @@ export class OpenDialogInterceptor implements HttpInterceptor {
     private _toast: ToasterService,
   ) {}
 
-  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+  intercept(
+    req: HttpRequest<any>,
+    next: HttpHandler,
+  ): Observable<HttpEvent<any>> {
     return next.handle(req).pipe(
       tap((response) => {
         if (response instanceof HttpResponse) {
@@ -59,9 +63,17 @@ export class OpenDialogInterceptor implements HttpInterceptor {
   }
 
   openDialog(model: DialogModel<any>) {
+    // Auto-detect URLs and enable QR code display if URL is found
+    // Can be overridden by explicitly setting showUrlAsQrCode in the model
+    const showUrlAsQrCode =
+      model.showUrlAsQrCode ?? contentHasUrl(model.content);
+
     this._modal.open({
       content: UiDialogModalComponent,
-      data: model,
+      data: {
+        ...model,
+        showUrlAsQrCode,
+      },
       title: model.title,
       config: {
         canClose: (model.settings & 1) === 1,

apps/isa-app/src/ui/modal/modal.module.ts

@@ -2,7 +2,6 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import { CommonModule } from '@angular/common';
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { UiModalComponent } from './modal.component';
-import { UiModalService } from './modal.service';
 import { UiDebugModalComponent } from './debug-modal/debug-modal.component';
 import { UiMessageModalComponent } from './message-modal.component';
 import { UiIconModule } from '@ui/icon';
@@ -10,9 +9,10 @@ import { UiDialogModalComponent } from './dialog/dialog-modal.component';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import { OpenDialogInterceptor } from './dialog/open-dialog.interceptor';
 import { UiPromptModalComponent } from './prompt-modal';
+import { QRCodeComponent } from 'angularx-qrcode';
 
 @NgModule({
-  imports: [CommonModule, OverlayModule, UiIconModule],
+  imports: [CommonModule, OverlayModule, UiIconModule, QRCodeComponent],
   declarations: [
     UiModalComponent,
     UiDebugModalComponent,