feature(checkout-reward): Enable Delivery Options

Ref: #5480

.claude/agents/architect-review.md

@@ -0,0 +1,50 @@
+---
+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>
+color: gray
+model: opus
+---
+
+You are an expert software architect focused on maintaining architectural integrity. Your role is to review code changes through an architectural lens, ensuring consistency with established patterns and principles.
+
+Your core expertise areas:
+- **Pattern Adherence**: Verifying code follows established architectural patterns (e.g., MVC, Microservices, CQRS).
+- **SOLID Compliance**: Checking for violations of SOLID principles (Single Responsibility, Open/Closed, Liskov Substitution, Interface Segregation, Dependency Inversion).
+- **Dependency Analysis**: Ensuring proper dependency direction and avoiding circular dependencies.
+- **Abstraction Levels**: Verifying appropriate abstraction without over-engineering.
+- **Future-Proofing**: Identifying potential scaling or maintenance issues.
+
+## When to Use This Agent
+
+Use this agent for:
+- Reviewing structural changes in a pull request.
+- Designing new services or components.
+- Refactoring code to improve its architecture.
+- Ensuring API modifications are consistent with the existing design.
+
+## Review Process
+
+1. **Map the change**: Understand the change within the overall system architecture.
+2. **Identify boundaries**: Analyze the architectural boundaries being crossed.
+3. **Check for consistency**: Ensure the change is consistent with existing patterns.
+4. **Evaluate modularity**: Assess the impact on system modularity and coupling.
+5. **Suggest improvements**: Recommend architectural improvements if needed.
+
+## Focus Areas
+
+- **Service Boundaries**: Clear responsibilities and separation of concerns.
+- **Data Flow**: Coupling between components and data consistency.
+- **Domain-Driven Design**: Consistency with the domain model (if applicable).
+- **Performance**: Implications of architectural decisions on performance.
+- **Security**: Security boundaries and data validation points.
+
+## Output Format
+
+Provide a structured review with:
+- **Architectural Impact**: Assessment of the change's impact (High, Medium, Low).
+- **Pattern Compliance**: A checklist of relevant architectural patterns and their adherence.
+- **Violations**: Specific violations found, with explanations.
+- **Recommendations**: Recommended refactoring or design changes.
+- **Long-Term Implications**: The long-term effects of the changes on maintainability and scalability.
+
+Remember: Good architecture enables change. Flag anything that makes future changes harder.

.claude/agents/code-reviewer.md

@@ -0,0 +1,30 @@
+---
+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.
+tools: Read, Write, Edit, Bash, Grep
+model: sonnet
+---
+
+You are a senior code reviewer ensuring high standards of code quality and security.
+
+When invoked:
+1. Run git diff to see recent changes
+2. Focus on modified files
+3. Begin review immediately
+
+Review checklist:
+- Code is simple and readable
+- Functions and variables are well-named
+- No duplicated code
+- Proper error handling
+- No exposed secrets or API keys
+- Input validation implemented
+- Good test coverage
+- Performance considerations addressed
+
+Provide feedback organized by priority:
+- Critical issues (must fix)
+- Warnings (should fix)
+- Suggestions (consider improving)
+
+Include specific examples of how to fix issues.

.claude/agents/context-manager.md

@@ -0,0 +1,178 @@
+---
+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
+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.
+
+## Primary Functions
+
+### Context Capture & Autonomous Storage
+
+**ALWAYS store the following in persistent memory automatically:**
+
+1. **Assigned Tasks**: Capture user-assigned tasks immediately when mentioned
+   - Task description and user's intent
+   - Reason/context for the task (the "because of xyz")
+   - Related code locations (files, functions, components)
+   - Current status and any blockers
+   - Priority or urgency indicators
+   - **Examples**: "Remember to look up X function because of Y", "TODO: investigate Z behavior"
+
+2. **Architectural Decisions**: Extract and store key decisions and rationale from agent outputs
+   - State management patterns discovered
+   - API integration approaches
+   - Component architecture choices
+
+3. **Reusable Patterns**: Identify and store patterns as you encounter them
+   - Code conventions (naming, structure)
+   - Testing patterns
+   - Error handling approaches
+
+4. **Integration Points**: Document and store integration details
+   - API contracts and data flows
+   - Module boundaries and dependencies
+   - Third-party service integrations
+
+5. **Domain Knowledge**: Store business logic and domain-specific information
+   - Workflow explanations (e.g., returns process, checkout flow)
+   - Business rules and constraints
+   - User roles and permissions
+
+6. **Technical Solutions**: Store resolved issues and their solutions
+   - Bug fixes with root cause analysis
+   - Performance optimizations
+   - Configuration solutions
+
+**Use `mcp__memory__create_entities` IMMEDIATELY when you encounter this information - 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
+2. Prepare minimal, relevant context for each agent
+3. Create agent-specific briefings enriched with stored memory
+4. Maintain a context index for quick retrieval
+5. Prune outdated or irrelevant information
+
+### 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)
+
+- **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)
+
+**Ephemeral Memory (File-based - secondary)**:
+- Maintain rolling summaries in temporary files
+- Create session checkpoints
+- Index recent activities
+
+## Workflow Integration
+
+**On every activation, you MUST:**
+
+1. **Query memory first**: Use `mcp__memory__read_graph` 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:
+   - 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
+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
+
+## Context Formats
+
+### Quick Context (< 500 tokens)
+
+- Current task and immediate goals
+- Recent decisions affecting current work (query memory first)
+- Active blockers or dependencies
+- Relevant stored patterns from memory
+
+### Full Context (< 2000 tokens)
+
+- Project architecture overview (enriched with stored decisions)
+- Key design decisions (retrieved from memory)
+- Integration points and APIs (from stored knowledge)
+- Active work streams
+
+### Persistent Context (stored in memory via MCP)
+
+**Store these 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
+- `integration`: API contracts and integration points
+- `solution`: Resolved issues with root cause and fix
+- `convention`: Coding standards and project conventions
+- `domain-knowledge`: Business logic and workflow explanations
+
+**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`
+
+**Task Capture Triggers**: Listen for phrases like:
+- "Remember to..."
+- "TODO: ..."
+- "Don't forget..."
+- "Look into..."
+- "Investigate..."
+- "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.**

.claude/agents/debugger.md

@@ -0,0 +1,31 @@
+---
+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

@@ -0,0 +1,33 @@
+---
+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/error-detective.md

@@ -0,0 +1,33 @@
+---
+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

@@ -0,0 +1,112 @@
+---
+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/search-specialist.md

@@ -0,0 +1,59 @@
+---
+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

@@ -0,0 +1,33 @@
+---
+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

@@ -0,0 +1,37 @@
+---
+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

@@ -0,0 +1,33 @@
+---
+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

@@ -0,0 +1,936 @@
+---
+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/typescript-pro.md

@@ -0,0 +1,38 @@
+---
+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.
+tools: Read, Write, Edit, Bash
+model: sonnet
+---
+
+You are a TypeScript expert specializing in advanced type system features and type-safe application development.
+
+## Focus Areas
+
+- Advanced type system (conditional types, mapped types, template literal types)
+- Generic constraints and type inference optimization
+- Utility types and custom type helpers
+- Strict TypeScript configuration and migration strategies
+- Declaration files and module augmentation
+- Performance optimization and compilation speed
+
+## Approach
+
+1. Leverage TypeScript's type system for compile-time safety
+2. Use strict configuration for maximum type safety
+3. Prefer type inference over explicit typing when clear
+4. Design APIs with generic constraints for flexibility
+5. Optimize build performance with project references
+6. Create reusable type utilities for common patterns
+
+## Output
+
+- Strongly typed TypeScript with comprehensive type coverage
+- Advanced generic types with proper constraints
+- Custom utility types and type helpers
+- Strict tsconfig.json configuration
+- Type-safe API designs with proper error handling
+- Performance-optimized build configuration
+- Migration strategies from JavaScript to TypeScript
+
+Follow TypeScript best practices and maintain type safety without sacrificing developer experience.

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

@@ -0,0 +1,36 @@
+---
+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/code-review.md

@@ -0,0 +1,69 @@
+---
+allowed-tools: Read, Bash, Grep, Glob
+argument-hint: [file-path] | [commit-hash] | --full
+description: Comprehensive code quality review with security, performance, and architecture analysis
+---
+
+# Code Quality Review
+
+Perform comprehensive code quality review: $ARGUMENTS
+
+## Current State
+
+- Git status: !`git status --porcelain`
+- Recent changes: !`git diff --stat HEAD~5`
+- Repository info: !`git log --oneline -5`
+- Build status: !`npm run build --dry-run 2>/dev/null || echo "No build script"`
+
+## Task
+
+Follow these steps to conduct a thorough code review:
+
+1. **Repository Analysis**
+   - Examine the repository structure and identify the primary language/framework
+   - Check for configuration files (package.json, requirements.txt, Cargo.toml, etc.)
+   - Review README and documentation for context
+
+2. **Code Quality Assessment**
+   - Scan for code smells, anti-patterns, and potential bugs
+   - Check for consistent coding style and naming conventions
+   - Identify unused imports, variables, or dead code
+   - Review error handling and logging practices
+
+3. **Security Review**
+   - Look for common security vulnerabilities (SQL injection, XSS, etc.)
+   - Check for hardcoded secrets, API keys, or passwords
+   - Review authentication and authorization logic
+   - Examine input validation and sanitization
+
+4. **Performance Analysis**
+   - Identify potential performance bottlenecks
+   - Check for inefficient algorithms or database queries
+   - Review memory usage patterns and potential leaks
+   - Analyze bundle size and optimization opportunities
+
+5. **Architecture & Design**
+   - Evaluate code organization and separation of concerns
+   - Check for proper abstraction and modularity
+   - Review dependency management and coupling
+   - Assess scalability and maintainability
+
+6. **Testing Coverage**
+   - Check existing test coverage and quality
+   - Identify areas lacking proper testing
+   - Review test structure and organization
+   - Suggest additional test scenarios
+
+7. **Documentation Review**
+   - Evaluate code comments and inline documentation
+   - Check API documentation completeness
+   - Review README and setup instructions
+   - Identify areas needing better documentation
+
+8. **Recommendations**
+   - Prioritize issues by severity (critical, high, medium, low)
+   - Provide specific, actionable recommendations
+   - Suggest tools and practices for improvement
+   - Create a summary report with next steps
+
+Remember to be constructive and provide specific examples with file paths and line numbers where applicable.

.claude/commands/commit.md

@@ -0,0 +1,166 @@
+---
+allowed-tools: Bash(git add:*), Bash(git status:*), Bash(git commit:*), Bash(git diff:*), Bash(git log:*)
+argument-hint: [message] | --no-verify | --amend
+description: Create well-formatted commits with conventional commit format and emoji
+---
+
+# Smart Git Commit
+
+Create well-formatted commit: $ARGUMENTS
+
+## Current Repository State
+
+- Git status: !`git status --porcelain`
+- Current branch: !`git branch --show-current`
+- Staged changes: !`git diff --cached --stat`
+- Unstaged changes: !`git diff --stat`
+- Recent commits: !`git log --oneline -5`
+
+## What This Command Does
+
+1. Unless specified with `--no-verify`, automatically runs pre-commit checks:
+   - `pnpm lint` to ensure code quality
+   - `pnpm build` to verify the build succeeds
+   - `pnpm generate:docs` to update documentation
+2. Checks which files are staged with `git status`
+3. If 0 files are staged, automatically adds all modified and new files with `git add`
+4. Performs a `git diff` to understand what changes are being committed
+5. Analyzes the diff to determine if multiple distinct logical changes are present
+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
+
+## 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:
+  - `feat`: A new feature
+  - `fix`: A bug fix
+  - `docs`: Documentation changes
+  - `style`: Code style changes (formatting, etc)
+  - `refactor`: Code changes that neither fix bugs nor add features
+  - `perf`: Performance improvements
+  - `test`: Adding or fixing tests
+  - `chore`: Changes to the build process, tools, etc.
+- **Present tense, imperative mood**: Write commit messages as commands (e.g., "add feature" not "added feature")
+- **Concise first line**: Keep the first line under 72 characters
+- **Emoji**: Each commit type is paired with an appropriate emoji:
+  - ✨ `feat`: New feature
+  - 🐛 `fix`: Bug fix
+  - 📝 `docs`: Documentation
+  - 💄 `style`: Formatting/style
+  - ♻️ `refactor`: Code refactoring
+  - ⚡️ `perf`: Performance improvements
+  - ✅ `test`: Tests
+  - 🔧 `chore`: Tooling, configuration
+  - 🚀 `ci`: CI/CD improvements
+  - 🗑️ `revert`: Reverting changes
+  - 🧪 `test`: Add a failing test
+  - 🚨 `fix`: Fix compiler/linter warnings
+  - 🔒️ `fix`: Fix security issues
+  - 👥 `chore`: Add or update contributors
+  - 🚚 `refactor`: Move or rename resources
+  - 🏗️ `refactor`: Make architectural changes
+  - 🔀 `chore`: Merge branches
+  - 📦️ `chore`: Add or update compiled files or packages
+  - ➕ `chore`: Add a dependency
+  - ➖ `chore`: Remove a dependency
+  - 🌱 `chore`: Add or update seed files
+  - 🧑‍💻 `chore`: Improve developer experience
+  - 🧵 `feat`: Add or update code related to multithreading or concurrency
+  - 🔍️ `feat`: Improve SEO
+  - 🏷️ `feat`: Add or update types
+  - 💬 `feat`: Add or update text and literals
+  - 🌐 `feat`: Internationalization and localization
+  - 👔 `feat`: Add or update business logic
+  - 📱 `feat`: Work on responsive design
+  - 🚸 `feat`: Improve user experience / usability
+  - 🩹 `fix`: Simple fix for a non-critical issue
+  - 🥅 `fix`: Catch errors
+  - 👽️ `fix`: Update code due to external API changes
+  - 🔥 `fix`: Remove code or files
+  - 🎨 `style`: Improve structure/format of the code
+  - 🚑️ `fix`: Critical hotfix
+  - 🎉 `chore`: Begin a project
+  - 🔖 `chore`: Release/Version tags
+  - 🚧 `wip`: Work in progress
+  - 💚 `fix`: Fix CI build
+  - 📌 `chore`: Pin dependencies to specific versions
+  - 👷 `ci`: Add or update CI build system
+  - 📈 `feat`: Add or update analytics or tracking code
+  - ✏️ `fix`: Fix typos
+  - ⏪️ `revert`: Revert changes
+  - 📄 `chore`: Add or update license
+  - 💥 `feat`: Introduce breaking changes
+  - 🍱 `assets`: Add or update assets
+  - ♿️ `feat`: Improve accessibility
+  - 💡 `docs`: Add or update comments in source code
+  - 🗃️ `db`: Perform database related changes
+  - 🔊 `feat`: Add or update logs
+  - 🔇 `fix`: Remove logs
+  - 🤡 `test`: Mock things
+  - 🥚 `feat`: Add or update an easter egg
+  - 🙈 `chore`: Add or update .gitignore file
+  - 📸 `test`: Add or update snapshots
+  - ⚗️ `experiment`: Perform experiments
+  - 🚩 `feat`: Add, update, or remove feature flags
+  - 💫 `ui`: Add or update animations and transitions
+  - ⚰️ `refactor`: Remove dead code
+  - 🦺 `feat`: Add or update code related to validation
+  - ✈️ `feat`: Improve offline support
+
+## Guidelines for Splitting Commits
+
+When analyzing the diff, consider splitting commits based on these criteria:
+
+1. **Different concerns**: Changes to unrelated parts of the codebase
+2. **Different types of changes**: Mixing features, fixes, refactoring, etc.
+3. **File patterns**: Changes to different types of files (e.g., source code vs documentation)
+4. **Logical grouping**: Changes that would be easier to understand or review separately
+5. **Size**: Very large changes that would be clearer if broken down
+
+## 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
+
+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
+
+## Command Options
+
+- `--no-verify`: Skip running the pre-commit checks (lint, build, generate:docs)
+
+## Important Notes
+
+- By default, pre-commit checks (`pnpm lint`, `pnpm build`, `pnpm generate:docs`) will run to ensure code quality
+- If these checks fail, you'll be asked if you want to proceed with the commit anyway or fix the issues first
+- If specific files are already staged, the command will only commit those files
+- If no files are staged, it will automatically stage all modified and new files
+- The commit message will be constructed based on the changes detected
+- Before committing, the command will review the diff to identify if multiple commits would be more appropriate
+- If suggesting multiple commits, it will help you stage and commit the changes separately
+- Always reviews the commit diff to ensure the message matches the changes

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

@@ -0,0 +1,94 @@
+---
+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/dev:add-e2e-attrs.md

@@ -1,197 +0,0 @@
-# /dev:add-e2e-attrs - Add E2E Test Attributes
-
-Add required E2E test attributes (`data-what`, `data-which`, dynamic `data-*`) to component templates for QA automation.
-
-## Parameters
-- `component-path`: Path to component directory or HTML template file
-
-## Required E2E Attributes
-
-### Core Attributes (Required)
-1. **`data-what`**: Semantic description of element's purpose
-   - Example: `data-what="submit-button"`, `data-what="search-input"`
-2. **`data-which`**: Unique identifier for the specific instance
-   - Example: `data-which="primary"`, `data-which="customer-{{ customerId }}"`
-
-### Dynamic Attributes (Contextual)
-3. **`data-*`**: Additional context based on state/data
-   - Example: `data-status="active"`, `data-index="0"`
-
-## Tasks
-
-### 1. Analyze Component Template
-- Read component HTML template
-- Identify interactive elements that need E2E attributes:
-  - Buttons (`button`, `ui-button`)
-  - Inputs (`input`, `textarea`, `select`)
-  - Links (`a`, `routerLink`)
-  - Custom interactive components
-  - Form elements
-  - Clickable elements (`(click)` handlers)
-
-### 2. Add Missing Attributes
-
-**Buttons:**
-```html
-<!-- BEFORE -->
-<button (click)="submit()">Submit</button>
-
-<!-- AFTER -->
-<button
-  (click)="submit()"
-  data-what="submit-button"
-  data-which="form-primary">
-  Submit
-</button>
-```
-
-**Inputs:**
-```html
-<!-- BEFORE -->
-<input [(ngModel)]="searchTerm" placeholder="Search..." />
-
-<!-- AFTER -->
-<input
-  [(ngModel)]="searchTerm"
-  placeholder="Search..."
-  data-what="search-input"
-  data-which="main-search" />
-```
-
-**Dynamic Lists:**
-```html
-<!-- BEFORE -->
-@for (item of items; track item.id) {
-  <li (click)="selectItem(item)">{{ item.name }}</li>
-}
-
-<!-- AFTER -->
-@for (item of items; track item.id) {
-  <li
-    (click)="selectItem(item)"
-    data-what="list-item"
-    [attr.data-which]="item.id"
-    [attr.data-status]="item.status">
-    {{ item.name }}
-  </li>
-}
-```
-
-**Links:**
-```html
-<!-- BEFORE -->
-<a routerLink="/orders/{{ orderId }}">View Order</a>
-
-<!-- AFTER -->
-<a
-  [routerLink]="['/orders', orderId]"
-  data-what="order-link"
-  [attr.data-which]="orderId">
-  View Order
-</a>
-```
-
-**Custom Components:**
-```html
-<!-- BEFORE -->
-<ui-button (click)="save()">Save</ui-button>
-
-<!-- AFTER -->
-<ui-button
-  (click)="save()"
-  data-what="save-button"
-  data-which="order-form">
-  Save
-</ui-button>
-```
-
-### 3. Naming Conventions
-
-**`data-what` Guidelines:**
-- Use kebab-case
-- Be descriptive but concise
-- Common patterns:
-  - `*-button` (submit-button, cancel-button, delete-button)
-  - `*-input` (email-input, search-input, quantity-input)
-  - `*-link` (product-link, order-link, customer-link)
-  - `*-item` (list-item, menu-item, card-item)
-  - `*-dialog` (confirm-dialog, error-dialog)
-  - `*-dropdown` (status-dropdown, category-dropdown)
-
-**`data-which` Guidelines:**
-- Unique identifier for the instance
-- Use dynamic binding for list items: `[attr.data-which]="item.id"`
-- Static for unique elements: `data-which="primary"`
-- Combine with context: `data-which="customer-{{ customerId }}-edit"`
-
-### 4. Scan for Coverage
-Check template coverage:
-```bash
-# Count interactive elements
-grep -E '(click)=|routerLink|button|input|select|textarea' [template-file]
-
-# Count elements with data-what
-grep -c 'data-what=' [template-file]
-
-# List elements missing E2E attributes
-grep -E '(click)=|button' [template-file] | grep -v 'data-what='
-```
-
-### 5. Validate Attributes
-- No duplicates in `data-which` within same view
-- All interactive elements have both `data-what` and `data-which`
-- Dynamic attributes use proper Angular binding: `[attr.data-*]`
-- Attributes don't contain sensitive data (passwords, tokens)
-
-### 6. Update Component Tests
-Add E2E attribute selectors to tests:
-```typescript
-// Use E2E attributes for element selection
-const submitButton = fixture.nativeElement.querySelector('[data-what="submit-button"][data-which="primary"]');
-expect(submitButton).toBeTruthy();
-```
-
-### 7. Document Attributes
-Add comment block at top of template:
-```html
-<!--
-E2E Test Attributes:
-- data-what="submit-button" data-which="primary" - Main form submission
-- data-what="cancel-button" data-which="primary" - Cancel action
-- data-what="search-input" data-which="main" - Product search field
--->
-```
-
-## Output
-Provide summary:
-- Template analyzed: [path]
-- Interactive elements found: [count]
-- Attributes added: [count]
-- Coverage: [percentage]% (elements with E2E attrs / total interactive elements)
-- List of added attributes with descriptions
-- Validation status: ✅/❌
-
-## Common Patterns by Component Type
-
-**Form Components:**
-- `data-what="[field]-input" data-which="[form-name]"`
-- `data-what="submit-button" data-which="[form-name]"`
-- `data-what="cancel-button" data-which="[form-name]"`
-
-**List/Table Components:**
-- `data-what="list-item" [attr.data-which]="item.id"`
-- `data-what="edit-button" [attr.data-which]="item.id"`
-- `data-what="delete-button" [attr.data-which]="item.id"`
-
-**Navigation Components:**
-- `data-what="nav-link" data-which="[destination]"`
-- `data-what="breadcrumb" data-which="[level]"`
-
-**Dialog Components:**
-- `data-what="confirm-button" data-which="dialog"`
-- `data-what="close-button" data-which="dialog"`
-
-## References
-- CLAUDE.md Code Quality section (E2E Testing Requirements)
-- docs/guidelines/testing.md
-- QA team E2E test documentation (if available)

.claude/commands/eod-report.md

@@ -0,0 +1,434 @@
+---
+allowed-tools: Read, Write, Bash, Grep
+argument-hint: [date] | --yesterday | --save-only
+description: Generate End of Day report summarizing commits and work across all branches
+---
+
+# End of Day Report
+
+Generate daily work summary: $ARGUMENTS
+
+## Current State
+
+- Current Date: !`date +%Y-%m-%d`
+- Current Time: !`date +%H:%M`
+- Current Branch: !`git branch --show-current`
+- Git User: !`git config user.name`
+- Git Email: !`git config user.email`
+
+## Tasks
+
+### 1. Determine Report Date and Scope
+
+**Objective**: Identify the date range for the report
+
+- [ ] Ask user for their work start time
+  - Use AskUserQuestion to ask: "What time did you start working today?"
+  - Provide options: "First commit time", "08:00", "09:00", "10:00", "Custom time"
+  - If "Custom time" selected, ask for specific time (HH:MM format)
+  - Default to first commit time if not specified
+  - Use this for accurate "Work Duration" calculation
+
+- [ ] Check if date argument provided
+  - If `[date]` provided: Use specific date (format: YYYY-MM-DD)
+  - If `--yesterday` provided: Use yesterday's date
+  - Otherwise: Use today's date
+
+```bash
+# Get today's date
+TODAY=$(date +%Y-%m-%d)
+
+# Get yesterday's date
+YESTERDAY=$(date -d "yesterday" +%Y-%m-%d)
+
+# Get start of day
+START_TIME="${TODAY} 00:00:00"
+
+# Get end of day
+END_TIME="${TODAY} 23:59:59"
+```
+
+- [ ] Set report scope
+  - Search across **all branches** (local and remote)
+  - Filter by git user name and email
+  - Include commits from start to end of specified day
+
+### 2. Collect Commit Information
+
+**Objective**: Gather all commits made by the user on the specified date (excluding merge commits)
+
+- [ ] Fetch commits across all branches (non-merge commits only)
+
+```bash
+# Get all non-merge commits by current user today across all branches
+git log --all \
+  --author="$(git config user.name)" \
+  --since="$START_TIME" \
+  --until="$END_TIME" \
+  --pretty=format:"%h|%ai|%s|%D" \
+  --no-merges
+```
+
+**Important**: Use `--no-merges` flag to exclude PR merge commits. These will be tracked separately in section 3.
+
+- [ ] Extract commit details:
+  - Commit hash (short)
+  - Commit time
+  - Commit message
+  - Branch references (if any)
+
+- [ ] Group commits by branch
+  - Parse branch references from commit output
+  - Identify which branch each commit belongs to
+  - Track branch switches during the day
+  - Exclude "Merged PR" commits from this section (they appear in Merge Activity instead)
+
+**Example Output**:
+```
+c208327db|2025-10-28 14:23:45|feat(crm-data-access,checkout): improve primary bonus card selection logic|feature/5202-Praemie
+9020cb305|2025-10-28 10:15:32|✨ feat(navigation): implement title management and enhance tab system|feature/5351-navigation
+```
+
+### 3. Identify PR and Merge Activity
+
+**Objective**: Find pull requests created or merged today, distinguishing between PRs I merged vs PRs merged by colleagues
+
+- [ ] Find ALL merge commits with "Merged PR" (check both author and committer)
+
+```bash
+# Get all PR merge activity with author and committer info
+git log --all \
+  --since="$START_TIME" \
+  --until="$END_TIME" \
+  --grep="Merged PR" \
+  --pretty=format:"%h|%ai|%s|Author: %an <%ae>|Committer: %cn <%ce>"
+```
+
+- [ ] Categorize PR merges:
+  - **PRs I merged**: Where I am the COMMITTER (git config user.name matches committer name)
+  - **My PRs merged by colleagues**: Where I am the AUTHOR but someone else is the COMMITTER
+  - **Colleague PRs I merged**: Where someone else is the AUTHOR and I am the COMMITTER
+
+- [ ] Parse PR numbers from commit messages
+  - Look for patterns: "Merged PR 1234:", "PR #1234", etc.
+  - Extract PR title/description
+  - Note which branch was merged
+  - Note who performed the merge (committer name)
+
+- [ ] Identify branch merges
+  - Look for merge commits to develop/main
+  - Note feature branches merged
+
+### 4. Analyze Branch Activity
+
+**Objective**: Summarize branches worked on today
+
+- [ ] List all branches with commits today
+
+```bash
+# Get unique branches with activity today
+git log --all \
+  --author="$(git config user.name)" \
+  --since="$START_TIME" \
+  --until="$END_TIME" \
+  --pretty=format:"%D" | \
+  grep -v '^$' | \
+  tr ',' '\n' | \
+  sed 's/^ *//' | \
+  grep -E '^(origin/)?[a-zA-Z]' | \
+  sort -u
+```
+
+- [ ] Identify:
+  - Primary branch worked on (most commits)
+  - Other branches touched
+  - New branches created today
+  - Branches merged today
+
+- [ ] Check current branch status
+  - Uncommitted changes
+  - Untracked files
+  - Ahead/behind develop
+
+### 5. Generate Report Summary
+
+**Objective**: Create formatted markdown report
+
+- [ ] Build report structure:
+
+```markdown
+# End of Day Report - YYYY-MM-DD
+
+**Developer**: [Name] <email>
+**Date**: Day, Month DD, YYYY
+**Time**: HH:MM
+
+---
+
+## 📊 Summary
+
+- **Commits**: X commits across Y branches
+- **PRs I Merged**: Z pull requests (as committer)
+- **My PRs Merged by Colleagues**: W pull requests
+- **Primary Branch**: branch-name
+- **Work Duration**: Started at HH:MM, worked for Xh Ym
+
+## 🔨 Commits Today
+
+### Branch: feature/5351-navigation (5 commits)
+- `9020cb3` (10:15) ✨ feat(navigation): implement title management and enhance tab system
+- `abc1234` (11:30) fix(navigation): resolve routing edge case
+- `def5678` (14:45) test(navigation): add comprehensive test coverage
+- `ghi9012` (15:20) refactor(navigation): improve code organization
+- `jkl3456` (16:00) docs(navigation): update README with usage examples
+
+### Branch: feature/5202-Praemie (2 commits)
+- `c208327` (14:23) feat(crm-data-access,checkout): improve primary bonus card selection logic
+- `mno7890` (16:45) fix(checkout): handle edge case for bonus points
+
+## 🔀 Merge Activity
+
+### PRs I Merged (as committer)
+- **PR #1990**: feat(ui): add new button variants → develop
+- **PR #1991**: fix(api): resolve timeout issues → develop
+
+### My PRs Merged by Colleagues
+- **PR #1987**: Carousel Library → develop (merged by Nino Righi)
+- **PR #1989**: fix(checkout): resolve currency constraint violations → develop (merged by Nino Righi)
+
+### Branch Merges
+- `feature/5202-Praemie-stock-info-request-batching` → `feature/5202-Praemie`
+
+## 🌿 Branch Activity
+
+**Primary Branch**: feature/5351-navigation (5 commits)
+
+**Other Branches**:
+- feature/5202-Praemie (2 commits)
+- develop (merged 2 PRs)
+
+**Current Branch**: feature/5351-navigation
+**Status**: 3 files changed, 2 files staged, 1 file untracked
+
+## 📝 Notes
+
+[Optional section for manual notes - left empty by default]
+
+---
+
+_Report generated on YYYY-MM-DD at HH:MM_
+```
+
+**Formatting Rules**:
+- Use emoji for section headers (📊 📝 🔨 🔀 🌿)
+- Group commits by branch
+- Show time for each commit in (HH:MM) format
+- Include commit prefixes (feat:, fix:, docs:, etc.)
+- Sort branches by number of commits (most active first)
+- Highlight primary branch (most commits)
+
+### 6. Save and Display Report
+
+**Objective**: Output report to terminal and save to file
+
+**Display to Terminal**:
+- [ ] Print formatted report to stdout
+- [ ] Use clear visual separators
+- [ ] Ensure easy copy/paste to Slack/Teams/Email
+
+**Save to File**:
+- [ ] Create reports directory if it doesn't exist
+
+```bash
+mkdir -p reports/eod
+```
+
+- [ ] Determine filename
+  - Format: `reports/eod/YYYY-MM-DD.md`
+  - Example: `reports/eod/2025-10-28.md`
+
+- [ ] Write report to file
+
+```bash
+# Save report
+cat > "reports/eod/${TODAY}.md" << 'EOF'
+[report content]
+EOF
+```
+
+- [ ] Provide file location feedback
+  - Show absolute path to saved file
+  - Confirm successful save
+
+**If `--save-only` flag**:
+- [ ] Skip terminal display
+- [ ] Only save to file
+- [ ] Show success message with file path
+
+### 7. Provide Summary Statistics
+
+**Objective**: Show quick statistics and next steps
+
+- [ ] Calculate and display:
+  - Total commits today (excluding PR merge commits)
+  - Number of branches worked on
+  - PRs I merged (as committer)
+  - My PRs merged by colleagues (authored by me, committed by others)
+  - Work duration (user-specified start time → last commit time)
+  - Lines of code changed (optional, if available)
+
+- [ ] Suggest next steps:
+  - Commit uncommitted changes
+  - Push branches to remote
+  - Create PR for completed work
+  - Update task tracking system
+
+## Output Format
+
+### Standard Display
+
+```
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+📋 End of Day Report - 2025-10-28
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+**Developer**: Lorenz Hilpert <lorenz@example.com>
+**Date**: Monday, October 28, 2025
+**Time**: 17:30
+
+---
+
+## 📊 Summary
+
+- **Commits**: 5 commits across 1 branch
+- **PRs I Merged**: 2 pull requests (as committer)
+- **My PRs Merged by Colleagues**: 0
+- **Primary Branch**: feature/5351-navigation
+- **Work Duration**: Started at 09:00, worked for 7h 45m (last commit at 16:45)
+
+## 🔨 Commits Today
+
+### Branch: feature/5351-navigation (5 commits)
+- `9020cb3` (10:15) ✨ feat(navigation): implement title management and enhance tab system
+- `abc1234` (11:30) 🐛 fix(navigation): resolve routing edge case
+- `def5678` (14:45) ✅ test(navigation): add comprehensive test coverage
+- `ghi9012` (15:20) ♻️ refactor(navigation): improve code organization
+- `jkl3456` (16:00) 📝 docs(navigation): update README with usage examples
+
+### Branch: feature/5202-Praemie (2 commits)
+- `c208327` (14:23) ✨ feat(crm-data-access,checkout): improve primary bonus card selection logic
+- `mno7890` (16:45) 🐛 fix(checkout): handle edge case for bonus points
+
+## 🔀 Merge Activity
+
+### PRs I Merged (as committer)
+- **PR #1987**: Carousel Library → develop
+- **PR #1989**: fix(checkout): resolve currency constraint violations → develop
+
+### My PRs Merged by Colleagues
+_None today_
+
+## 🌿 Branch Activity
+
+**Primary Branch**: feature/5351-navigation (5 commits)
+
+**Other Branches**:
+- feature/5202-Praemie (2 commits)
+- develop (2 PR merges)
+
+**Current Status**:
+- Branch: feature/5351-navigation
+- Changes: 3 files changed, 2 files staged, 1 file untracked
+- Remote: 5 commits ahead of origin/feature/5351-navigation
+
+## 📝 Notes
+
+_No additional notes_
+
+---
+
+✅ Report saved to: /home/lorenz/Projects/ISA-Frontend/reports/eod/2025-10-28.md
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+📊 Daily Statistics
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+Total Commits: 5 (excluding PR merges)
+Branches: 1 active branch
+PRs I Merged: 2
+My PRs Merged by Colleagues: 0
+Work Duration: 7h 45m (started at 09:00, last commit at 16:45)
+
+📋 Next Steps
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+1. ✅ Push feature/5351-navigation to remote
+2. ⚠️  Consider creating PR for completed work
+3. 💾 1 untracked file - review and commit if needed
+```
+
+### No Activity Case
+
+```
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+📋 End of Day Report - 2025-10-28
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+**Developer**: Lorenz Hilpert <lorenz@example.com>
+**Date**: Monday, October 28, 2025
+**Time**: 17:30
+
+---
+
+## 📊 Summary
+
+No commits found for today (2025-10-28).
+
+**Possible Reasons**:
+- No development work performed
+- Working on uncommitted changes
+- Using different git user configuration
+
+**Current Branch**: feature/5351-navigation
+**Uncommitted Changes**: 5 files modified, 2 files staged
+
+---
+
+💡 Tip: If you have uncommitted work, commit it before generating the report.
+```
+
+### Yesterday's Report
+
+```
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+📋 End of Day Report - 2025-10-27 (Yesterday)
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+[Report content for yesterday]
+
+✅ Report saved to: /home/lorenz/Projects/ISA-Frontend/reports/eod/2025-10-27.md
+```
+
+## Usage Examples
+
+```bash
+# Generate today's EOD report
+/eod-report
+
+# Generate yesterday's report (if you forgot)
+/eod-report --yesterday
+
+# Generate report for specific date
+/eod-report 2025-10-25
+
+# Save to file only (no terminal output)
+/eod-report --save-only
+
+# Generate yesterday's report and save only
+/eod-report --yesterday --save-only
+```
+
+## References
+
+- Git Log Documentation: https://git-scm.com/docs/git-log
+- Conventional Commits: https://www.conventionalcommits.org/
+- Project Conventions: See CLAUDE.md for commit message standards
+- Git Configuration: `git config user.name` and `git config user.email`

.claude/commands/generate-changelog.md

@@ -0,0 +1,309 @@
+---
+allowed-tools: Read, Write, Edit, Bash, Grep
+argument-hint: [version] | --since [tag] | --dry-run
+description: Generate changelog entries from git tags using Keep a Changelog format
+---
+
+# Generate Changelog
+
+Generate changelog entries from git commits between version tags: $ARGUMENTS
+
+## Current State
+
+- Latest Tag: !`git tag --sort=-creatordate | head -n 1`
+- CHANGELOG.md: !`test -f CHANGELOG.md && echo "exists" || echo "does not exist"`
+- Commits Since Last Tag: !`git log $(git tag --sort=-creatordate | head -n 1)..HEAD --oneline | wc -l`
+- Current Branch: !`git branch --show-current`
+
+## Tasks
+
+### 1. Determine Version Range
+
+**Objective**: Identify the commit range for changelog generation
+
+- [ ] Check if version argument provided
+  - If `[version]` provided: Use as the new version number
+  - If `--since [tag]` provided: Use custom tag as starting point
+  - Otherwise: Use latest tag as starting point
+
+```bash
+# Find latest tag
+LATEST_TAG=$(git tag --sort=-creatordate | head -n 1)
+
+# Get commits since tag
+git log ${LATEST_TAG}..HEAD --oneline
+
+# If no tags exist, use entire history
+if [ -z "$LATEST_TAG" ]; then
+  git log --oneline
+fi
+```
+
+**Edge Cases**:
+- No tags exist → Use entire commit history and suggest version 0.1.0
+- No commits since last tag → Notify user, no changelog needed
+- Invalid tag provided → Error with available tags list
+
+### 2. Extract and Categorize Commits
+
+**Objective**: Parse commit messages and group by Keep a Changelog categories
+
+- [ ] Fetch commits with detailed information
+
+```bash
+# Get commits with format: hash | date | message
+git log ${LATEST_TAG}..HEAD --pretty=format:"%h|%as|%s" --no-merges
+```
+
+- [ ] Parse conventional commit patterns and map to categories:
+
+**Mapping Rules**:
+- `feat:` or `feature:` → **Added**
+- `fix:` or `bugfix:` → **Fixed**
+- `refactor:` → **Changed**
+- `perf:` or `performance:` → **Changed**
+- `docs:` → **Changed** (or skip if only documentation)
+- `style:` → **Changed**
+- `test:` → (skip from changelog)
+- `chore:` → (skip from changelog)
+- `build:` or `ci:` → (skip from changelog)
+- `revert:` → **Changed** or **Fixed**
+- `security:` → **Security**
+- `deprecate:` or `deprecated:` → **Deprecated**
+- `remove:` or `breaking:` → **Removed**
+- Non-conventional commits → **Changed** (default)
+
+- [ ] Extract scope and description from commit messages
+
+**Commit Pattern**: `type(scope): description`
+
+Example:
+```
+feat(checkout): add reward delivery order support
+fix(remission): resolve currency constraint violations
+refactor(navigation): implement title management system
+```
+
+### 3. Generate Changelog Entry
+
+**Objective**: Create properly formatted changelog section
+
+- [ ] Determine version number
+  - Use provided `[version]` argument
+  - Or prompt for new version if not provided
+  - Format: `[X.Y.Z]` following semantic versioning
+
+- [ ] Get current date in ISO format: `YYYY-MM-DD`
+
+```bash
+TODAY=$(date +%Y-%m-%d)
+```
+
+- [ ] Build changelog entry following Keep a Changelog format:
+
+```markdown
+## [VERSION] - YYYY-MM-DD
+
+### Added
+- New feature description from feat: commits
+- Another feature
+
+### Changed
+- Refactored component description
+- Performance improvements
+
+### Deprecated
+- Feature marked for removal
+
+### Removed
+- Deleted feature or breaking change
+
+### Fixed
+- Bug fix description
+- Another fix
+
+### Security
+- Security improvement description
+```
+
+**Rules**:
+- Only include sections that have entries
+- Sort entries alphabetically within each section
+- Use sentence case for descriptions
+- Remove commit type prefix from descriptions
+- Include scope in parentheses if present: `(scope) description`
+- Add reference links to commits/PRs if available
+
+### 4. Update or Preview CHANGELOG.md
+
+**Objective**: Append new entry to changelog file or show preview
+
+**If `--dry-run` flag provided**:
+- [ ] Display generated changelog entry to stdout
+- [ ] Show preview of where it would be inserted
+- [ ] Do NOT modify CHANGELOG.md
+- [ ] Exit with success
+
+**Otherwise (append mode)**:
+- [ ] Check if CHANGELOG.md exists
+  - If not, create with standard header:
+
+```markdown
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+```
+
+- [ ] Read existing CHANGELOG.md content
+- [ ] Find insertion point (after "## [Unreleased]" section, or after main header)
+- [ ] Insert new changelog entry
+- [ ] Maintain reverse chronological order (newest first)
+- [ ] Write updated content back to CHANGELOG.md
+
+```bash
+# Backup existing file
+cp CHANGELOG.md CHANGELOG.md.bak
+
+# Insert new entry
+# (Implementation handled by Edit tool)
+```
+
+### 5. Validate and Report
+
+**Objective**: Verify changelog quality and provide summary
+
+- [ ] Validate generated entry:
+  - Version format is valid (X.Y.Z)
+  - Date is correct (YYYY-MM-DD)
+  - At least one category has entries
+  - No duplicate entries
+  - Proper markdown formatting
+
+- [ ] Report statistics:
+  - Number of commits processed
+  - Entries per category
+  - Version number used
+  - File status (preview/updated)
+
+- [ ] Show next steps:
+  - Review changelog entry
+  - Update version in package.json if needed
+  - Create git tag if appropriate
+  - Commit changelog changes
+
+## Output Format
+
+### Dry Run Preview
+
+```
+🔍 Changelog Preview (--dry-run mode)
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+## [1.5.0] - 2025-10-28
+
+### Added
+- (checkout) Add reward delivery order support
+- (navigation) Implement title management and tab system
+
+### Changed
+- (carousel) Update carousel library implementation
+- (remission) Enhance returns processing workflow
+
+### Fixed
+- (checkout) Resolve currency constraint violations in price handling
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+📊 Statistics
+─────────────
+Commits processed: 12
+Added: 2 entries
+Changed: 2 entries
+Fixed: 1 entry
+Version: 1.5.0
+Date: 2025-10-28
+
+⚠️  This is a preview. Run without --dry-run to update CHANGELOG.md
+```
+
+### Append Mode Success
+
+```
+✅ Changelog Updated Successfully
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+## [1.5.0] - 2025-10-28
+
+### Added
+- (checkout) Add reward delivery order support
+- (navigation) Implement title management and tab system
+
+### Changed
+- (carousel) Update carousel library implementation
+- (remission) Enhance returns processing workflow
+
+### Fixed
+- (checkout) Resolve currency constraint violations in price handling
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+📊 Statistics
+─────────────
+Commits processed: 12
+Added: 2 entries
+Changed: 2 entries
+Fixed: 1 entry
+Version: 1.5.0
+File: CHANGELOG.md (updated)
+Backup: CHANGELOG.md.bak
+
+📋 Next Steps
+─────────────
+1. Review the changelog entry in CHANGELOG.md
+2. Update version in package.json: npm version 1.5.0
+3. Commit the changelog: git add CHANGELOG.md && git commit -m "docs: update changelog for v1.5.0"
+4. Create git tag: git tag -a v1.5.0 -m "Release v1.5.0"
+5. Push changes: git push && git push --tags
+```
+
+### Error Cases
+
+```
+❌ No Changes Found
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+No commits found since last tag (v1.4.5).
+Nothing to add to changelog.
+```
+
+```
+❌ No Tags Found
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+No git tags found in this repository.
+
+Suggestions:
+- Create your first tag: git tag v0.1.0
+- Or specify a commit range: /generate-changelog --since HEAD~10
+- Or generate from all commits: /generate-changelog 0.1.0
+```
+
+```
+⚠️  Invalid Version Format
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+Version "1.5" is invalid.
+Expected format: X.Y.Z (e.g., 1.5.0)
+
+Please provide a valid semantic version.
+```
+
+## References
+
+- Keep a Changelog: https://keepachangelog.com/
+- Semantic Versioning: https://semver.org/
+- Conventional Commits: https://www.conventionalcommits.org/
+- Project Conventions: See CLAUDE.md for commit message standards

.claude/commands/update-docs.md

@@ -0,0 +1,106 @@
+---
+allowed-tools: Read, Write, Edit, Bash
+argument-hint: [doc-type] | --implementation | --api | --architecture | --sync | --validate
+description: Systematically update project documentation with implementation status, API changes, and synchronized content
+---
+
+# Documentation Update & Synchronization
+
+Update project documentation systematically: $ARGUMENTS
+
+## Current Documentation State
+
+- Documentation structure: !`find . -name "*.md" | head -10`
+- Specs directory: @specs/ (if exists)
+- Implementation status: !`grep -r "✅\|❌\|⚠️" docs/ specs/ 2>/dev/null | wc -l` status indicators
+- Recent changes: !`git log --oneline --since="1 week ago" -- "*.md" | head -5`
+- Project progress: @CLAUDE.md or @README.md (if exists)
+
+## Task
+
+## Documentation Analysis
+
+1. Review current documentation status:
+   - Check `specs/implementation_status.md` for overall project status
+   - Review implemented phase document (`specs/phase{N}_implementation_plan.md`)
+   - Review `specs/flutter_structurizr_implementation_spec.md` and `specs/flutter_structurizr_implementation_spec_updated.md`
+   - Review `specs/testing_plan.md` to ensure it is current given recent test passes, failures, and changes
+   - Examine `CLAUDE.md` and `README.md` for project-wide documentation
+   - Check for and document any new lessons learned or best practices in CLAUDE.md
+
+2. Analyze implementation and testing results:
+   - Review what was implemented in the last phase
+   - Review testing results and coverage
+   - Identify new best practices discovered during implementation
+   - Note any implementation challenges and solutions
+   - Cross-reference updated documentation with recent implementation and test results to ensure accuracy
+
+## Documentation Updates
+
+1. Update phase implementation document:
+   - Mark completed tasks with ✅ status
+   - Update implementation percentages
+   - Add detailed notes on implementation approach
+   - Document any deviations from original plan with justification
+   - Add new sections if needed (lessons learned, best practices)
+   - Document specific implementation details for complex components
+   - Include a summary of any new troubleshooting tips or workflow improvements discovered during the phase
+
+2. Update implementation status document:
+   - Update phase completion percentages
+   - Add or update implementation status for components
+   - Add notes on implementation approach and decisions
+   - Document best practices discovered during implementation
+   - Note any challenges overcome and solutions implemented
+
+3. Update implementation specification documents:
+   - Mark completed items with ✅ or strikethrough but preserve original requirements
+   - Add notes on implementation details where appropriate
+   - Add references to implemented files and classes
+   - Update any implementation guidance based on experience
+
+4. Update CLAUDE.md and README.md if necessary:
+   - Add new best practices
+   - Update project status
+   - Add new implementation guidance
+   - Document known issues or limitations
+   - Update usage examples to include new functionality
+
+5. Document new testing procedures:
+   - Add details on test files created
+   - Include test running instructions
+   - Document test coverage
+   - Explain testing approach for complex components
+
+## Documentation Formatting and Structure
+
+1. Maintain consistent documentation style:
+   - Use clear headings and sections
+   - Include code examples where helpful
+   - Use status indicators (✅, ⚠️, ❌) consistently
+   - Maintain proper Markdown formatting
+
+2. Ensure documentation completeness:
+   - Cover all implemented features
+   - Include usage examples
+   - Document API changes or additions
+   - Include troubleshooting guidance for common issues
+
+## Guidelines
+
+- DO NOT CREATE new specification files
+- UPDATE existing files in the `specs/` directory
+- Maintain consistent documentation style
+- Include practical examples where appropriate
+- Cross-reference related documentation sections
+- Document best practices and lessons learned
+- Provide clear status updates on project progress
+- Update numerical completion percentages
+- Ensure documentation reflects actual implementation
+
+Provide a summary of documentation updates after completion, including:
+1. Files updated
+2. Major changes to documentation
+3. Updated completion percentages
+4. New best practices documented
+5. Status of the overall project after this phase

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

@@ -0,0 +1,239 @@
+---
+name: angular-template
+description: This skill should be used when writing or reviewing Angular component templates. It provides guidance on modern Angular 20+ template syntax including control flow (@if, @for, @switch, @defer), content projection (ng-content), template references (ng-template, ng-container), variable declarations (@let), and expression binding. Use when creating components, refactoring to modern syntax, implementing lazy loading, or reviewing template best practices.
+---
+
+# Angular Template
+
+Guide for modern Angular 20+ template patterns: control flow, lazy loading, projection, and binding.
+
+## When to Use
+
+- Creating/reviewing component templates
+- Refactoring legacy `*ngIf/*ngFor/*ngSwitch` to modern syntax
+- Implementing `@defer` lazy loading
+- Designing reusable components with `ng-content`
+- Template performance optimization
+
+**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)
+
+## Control Flow (Angular 17+)
+
+### @if / @else if / @else
+
+```typescript
+@if (user.isAdmin()) {
+  <app-admin-dashboard />
+} @else if (user.isEditor()) {
+  <app-editor-dashboard />
+} @else {
+  <app-viewer-dashboard />
+}
+
+// Store result with 'as'
+@if (user.profile?.settings; as settings) {
+  <p>Theme: {{settings.theme}}</p>
+}
+```
+
+### @for with @empty
+
+```typescript
+@for (product of products(); track product.id) {
+  <app-product-card [product]="product" />
+} @empty {
+  <p>No products available</p>
+}
+```
+
+**CRITICAL:** Always provide `track` expression:
+- Best: `track item.id` or `track item.uuid`
+- Static lists: `track $index`
+- **NEVER:** `track identity(item)` (causes full re-render)
+
+**Contextual variables:** `$count`, `$index`, `$first`, `$last`, `$even`, `$odd`
+
+### @switch
+
+```typescript
+@switch (viewMode()) {
+  @case ('grid') { <app-grid-view /> }
+  @case ('list') { <app-list-view /> }
+  @default { <app-grid-view /> }
+}
+```
+
+## @defer Lazy Loading
+
+### Basic Usage
+
+```typescript
+@defer (on viewport) {
+  <app-heavy-chart />
+} @placeholder (minimum 500ms) {
+  <div class="skeleton"></div>
+} @loading (after 100ms; minimum 1s) {
+  <mat-spinner />
+} @error {
+  <p>Failed to load</p>
+}
+```
+
+### Triggers
+
+| Trigger | Use Case |
+|---------|----------|
+| `idle` (default) | Non-critical features |
+| `viewport` | Below-the-fold content |
+| `interaction` | User-initiated (click/keydown) |
+| `hover` | Tooltips/popovers |
+| `timer(Xs)` | Delayed content |
+| `when(expr)` | Custom condition |
+
+**Multiple triggers:** `@defer (on interaction; on timer(5s))`
+**Prefetching:** `@defer (on interaction; prefetch on idle)`
+
+### Requirements
+
+- Components **MUST be standalone**
+- No `@ViewChild`/`@ContentChild` references
+- Reserve space in `@placeholder` to prevent layout shift
+
+### Best Practices
+
+- ✅ Defer below-the-fold content
+- ❌ Never defer above-the-fold (harms LCP)
+- ❌ Avoid `immediate`/`timer` during initial render (harms TTI)
+- Test with network throttling
+
+## Content Projection
+
+### Single Slot
+
+```typescript
+@Component({
+  selector: 'ui-card',
+  template: `<div class="card"><ng-content></ng-content></div>`
+})
+```
+
+### Multi-Slot with Selectors
+
+```typescript
+@Component({
+  template: `
+    <header><ng-content select="card-header"></ng-content></header>
+    <main><ng-content select="card-body"></ng-content></main>
+    <footer><ng-content></ng-content></footer> <!-- default slot -->
+  `
+})
+```
+
+**Usage:**
+```html
+<ui-card>
+  <card-header><h3>Title</h3></card-header>
+  <card-body><p>Content</p></card-body>
+  <button>Action</button> <!-- goes to default slot -->
+</ui-card>
+```
+
+**Fallback content:** `<ng-content select="title">Default Title</ng-content>`
+**Aliasing:** `<h3 ngProjectAs="card-header">Title</h3>`
+
+### CRITICAL Constraint
+
+`ng-content` **always instantiates** (even if hidden). For conditional projection, use `ng-template` + `NgTemplateOutlet`.
+
+## Template References
+
+### ng-template
+
+```html
+<ng-template #userCard let-user="userData" let-index="i">
+  <div class="user">#{{index}}: {{user.name}}</div>
+</ng-template>
+
+<ng-container
+  *ngTemplateOutlet="userCard; context: {userData: currentUser(), i: 0}">
+</ng-container>
+```
+
+**Access in component:**
+```typescript
+myTemplate = viewChild<TemplateRef<unknown>>('myTemplate');
+```
+
+### ng-container
+
+Groups elements without DOM footprint:
+
+```html
+<p>
+  Hero's name is
+  <ng-container @if="hero()">{{hero().name}}</ng-container>.
+</p>
+```
+
+## Variables
+
+### @let (Angular 18.1+)
+
+```typescript
+@let userName = user().name;
+@let greeting = 'Hello, ' + userName;
+@let asyncData = data$ | async;
+
+<h1>{{greeting}}</h1>
+```
+
+**Scoped to current view** (not hoisted to parent/sibling).
+
+### Template References (#)
+
+```html
+<input #emailInput type="email" />
+<button (click)="sendEmail(emailInput.value)">Send</button>
+
+<app-datepicker #startDate />
+<button (click)="startDate.open()">Open</button>
+```
+
+## Binding Patterns
+
+**Property:** `[disabled]="!isValid()"`
+**Attribute:** `[attr.aria-label]="label()"` `[attr.data-what]="'card'"`
+**Event:** `(click)="save()"` `(input)="onInput($event)"`
+**Two-way:** `[(ngModel)]="userName"`
+**Class:** `[class.active]="isActive()"` or `[class]="{active: isActive()}"`
+**Style:** `[style.width.px]="width()"` or `[style]="{color: textColor()}"`
+
+## Best Practices
+
+1. **Use signals:** `isExpanded = signal(false)`
+2. **Prefer control flow over directives:** Use `@if` not `*ngIf`
+3. **Keep expressions simple:** Use `computed()` for complex logic
+4. **Testing & Accessibility:** Always add E2E and ARIA attributes (see **[html-template](../html-template/SKILL.md)** skill)
+5. **Track expressions:** Required in `@for`, use unique IDs
+
+## Migration
+
+| Legacy | Modern |
+|--------|--------|
+| `*ngIf="condition"` | `@if (condition) { }` |
+| `*ngFor="let item of items"` | `@for (item of items; track item.id) { }` |
+| `[ngSwitch]` | `@switch (value) { @case ('a') { } }` |
+
+**CLI migration:** `ng generate @angular/core:control-flow`
+
+## Reference Files
+
+For detailed examples and edge cases, see:
+- `references/control-flow-reference.md` - @if/@for/@switch patterns
+- `references/defer-patterns.md` - Lazy loading strategies
+- `references/projection-patterns.md` - Advanced ng-content
+- `references/template-reference.md` - ng-template/ng-container
+
+Search with: `grep -r "pattern" references/`

.claude/skills/angular-template/references/control-flow-reference.md

@@ -0,0 +1,185 @@
+# Control Flow Reference
+
+Advanced patterns for `@if`, `@for`, `@switch`.
+
+## @if Patterns
+
+### Store Results with `as`
+
+```typescript
+@if (user.profile?.settings?.theme; as theme) {
+  <p>Theme: {{theme}}</p>
+}
+
+@if (data$ | async; as data) {
+  <app-list [items]="data.items" />
+}
+```
+
+### Complex Conditions
+
+```typescript
+@if (isAdmin() && hasPermission('edit')) {
+  <button (click)="edit()">Edit</button>
+}
+
+@if (user()?.role === 'admin' || user()?.role === 'moderator') {
+  <app-moderation-panel />
+}
+```
+
+## @for Patterns
+
+### Contextual Variables
+
+```typescript
+@for (user of users(); track user.id) {
+  <tr [class.odd]="$odd">
+    <td>{{$index + 1}}</td>
+    <td>{{user.name}}</td>
+    <td>{{$count}} total</td>
+    @if ($first) { <span>First</span> }
+  </tr>
+}
+```
+
+### Track Strategies
+
+```typescript
+// ✅ Best: Unique ID
+@for (order of orders(); track order.uuid) { }
+
+// ✅ Good: Composite key
+@for (item of items(); track item.categoryId + '-' + item.id) { }
+
+// ⚠️ OK: Index (static only)
+@for (color of ['red', 'blue']; track $index) { }
+
+// ❌ NEVER: Identity function
+@for (item of items(); track identity(item)) { }
+```
+
+### Nested Loops
+
+```typescript
+@for (category of categories(); track category.id) {
+  <div class="category">
+    <h3>{{category.name}}</h3>
+    @for (product of category.products; track product.id) {
+      <app-product [product]="product" [categoryIdx]="$index" />
+    }
+  </div>
+}
+```
+
+### Filter in Component
+
+```typescript
+// Component
+activeUsers = computed(() => this.users().filter(u => u.isActive));
+
+// Template
+@for (user of activeUsers(); track user.id) {
+  <app-user-card [user]="user" />
+} @empty {
+  <p>No active users</p>
+}
+```
+
+## @switch Patterns
+
+### Basic Switch
+
+```typescript
+@switch (viewMode()) {
+  @case ('grid') { <app-grid-view /> }
+  @case ('list') { <app-list-view /> }
+  @case ('table') { <app-table-view /> }
+  @default { <app-grid-view /> }
+}
+```
+
+### Nested Switch
+
+```typescript
+@switch (category()) {
+  @case ('electronics') {
+    @switch (subcategory()) {
+      @case ('phones') { <app-phone-list /> }
+      @case ('laptops') { <app-laptop-list /> }
+      @default { <app-electronics-list /> }
+    }
+  }
+  @case ('clothing') { <app-clothing-list /> }
+  @default { <app-all-categories /> }
+}
+```
+
+### Combined with Other Control Flow
+
+```typescript
+@switch (status()) {
+  @case ('loading') { <mat-spinner /> }
+  @case ('success') {
+    @if (data()?.length) {
+      @for (item of data(); track item.id) {
+        <app-item [item]="item" />
+      }
+    } @else {
+      <p>No data</p>
+    }
+  }
+  @case ('error') { <app-error [message]="errorMessage()" /> }
+}
+```
+
+## Common Patterns
+
+### Loading State
+
+```typescript
+@if (isLoading()) {
+  <mat-spinner />
+} @else if (error()) {
+  <app-error [error]="error()" (retry)="loadData()" />
+} @else {
+  @for (item of items(); track item.id) {
+    <app-item [item]="item" />
+  } @empty {
+    <app-empty-state />
+  }
+}
+```
+
+### Tab Navigation
+
+```typescript
+<nav>
+  @for (tab of tabs(); track tab.id) {
+    <button [class.active]="activeTab() === tab.id" (click)="setActiveTab(tab.id)">
+      {{tab.label}}
+    </button>
+  }
+</nav>
+
+@switch (activeTab()) {
+  @case ('profile') { <app-profile /> }
+  @case ('settings') { <app-settings /> }
+  @default { <app-profile /> }
+}
+```
+
+### Hierarchical Data
+
+```typescript
+@for (section of sections(); track section.id) {
+  <details [open]="section.isExpanded">
+    <summary>{{section.title}} ({{section.items.length}})</summary>
+    @for (item of section.items; track item.id) {
+      <div>{{item.name}}</div>
+    } @empty {
+      <p>No items</p>
+    }
+  </details>
+}
+```

.claude/skills/angular-template/references/defer-patterns.md

@@ -0,0 +1,301 @@
+# @defer Patterns
+
+Lazy loading strategies and performance optimization.
+
+## Basic Patterns
+
+### Complete State Management
+
+```typescript
+@defer (on viewport) {
+  <app-product-reviews [productId]="productId()" />
+} @placeholder (minimum 500ms) {
+  <div class="skeleton" style="height: 400px;"></div>
+} @loading (after 100ms; minimum 1s) {
+  <mat-spinner />
+} @error {
+  <p>Failed to load reviews</p>
+  <button (click)="retry()">Retry</button>
+}
+```
+
+## Triggers
+
+### Common Strategies
+
+```typescript
+// Idle: Non-critical features
+@defer (on idle) { <app-recommendations /> }
+
+// Viewport: Below-the-fold
+@defer (on viewport) { <app-comments /> }
+
+// Interaction: User-initiated
+@defer (on interaction) { <app-filters /> }
+
+// Hover: Tooltips/popovers
+@defer (on hover) { <app-user-tooltip /> }
+
+// Timer: Delayed content
+@defer (on timer(3s)) { <app-promo-banner /> }
+
+// When: Custom condition
+@defer (when userLoggedIn()) { <app-personalized-content /> }
+```
+
+### Multiple Triggers
+
+```typescript
+// OR logic: first trigger wins
+@defer (on interaction; on timer(5s)) {
+  <app-newsletter-signup />
+}
+```
+
+### Prefetching
+
+```typescript
+// Load JS on idle, show on interaction
+@defer (on interaction; prefetch on idle) {
+  <app-video-player />
+}
+
+// Load JS on hover, show on click
+@defer (on interaction; prefetch on hover) {
+  <app-modal />
+}
+```
+
+## Performance Patterns
+
+### Bundle Size Reduction
+
+```typescript
+<div class="product-page">
+  <!-- Critical: Load immediately -->
+  <app-product-header [product]="product()" />
+
+  <!-- Heavy chart: Defer on viewport -->
+  @defer (on viewport) {
+    <app-analytics-chart />
+  } @placeholder {
+    <div style="height: 300px;"></div>
+  }
+
+  <!-- Video player: Defer on interaction -->
+  @defer (on interaction; prefetch on idle) {
+    <app-video-player />
+  } @placeholder {
+    <img [src]="videoThumbnail" />
+  }
+</div>
+```
+
+### Staggered Loading
+
+```typescript
+<div class="dashboard">
+  <app-header /> <!-- Immediate -->
+
+  @defer (on idle) {
+    <app-key-metrics /> <!-- Important -->
+  }
+
+  @defer (on viewport) {
+    <app-recent-activity /> <!-- Secondary -->
+  } @placeholder {
+    <div style="height: 400px;"></div>
+  }
+
+  @defer (on viewport) {
+    <app-analytics /> <!-- Tertiary -->
+  } @placeholder {
+    <div style="height: 300px;"></div>
+  }
+</div>
+```
+
+### Conditional Defer (Mobile Only)
+
+```typescript
+// Component
+shouldDefer = computed(() => this.breakpoint([Breakpoint.Tablet]));
+
+// Template
+@if (shouldDefer()) {
+  @defer (on viewport) { <app-heavy-chart /> }
+} @else {
+  <app-heavy-chart />
+}
+```
+
+## Requirements
+
+### Must Be Standalone
+
+```typescript
+// ✅ Valid
+@Component({ standalone: true })
+export class ChartComponent {}
+
+@defer { <app-chart /> } // Will defer
+
+// ❌ Invalid
+@NgModule({ declarations: [ChartComponent] })
+@defer { <app-chart /> } // Won't defer! Loads eagerly
+```
+
+### No External References
+
+```typescript
+// ❌ Invalid: ViewChild reference
+@ViewChild('chart') chart!: ChartComponent;
+@defer { <app-chart #chart /> } // ERROR
+
+// ✅ Valid: Use events
+@defer {
+  <app-chart (dataLoaded)="onChartLoaded($event)" />
+}
+```
+
+## Core Web Vitals
+
+### Prevent Layout Shift (CLS)
+
+```typescript
+// ✅ Reserve exact height
+@defer (on viewport) {
+  <app-large-component />
+} @placeholder {
+  <div style="height: 600px;"></div>
+}
+
+// ❌ No height reserved
+@defer (on viewport) {
+  <app-large-component />
+} @placeholder {
+  <p>Loading...</p> // Causes layout shift
+}
+```
+
+### Don't Defer LCP Elements
+
+```typescript
+// ❌ BAD: Hero image deferred
+@defer (on idle) {
+  <img src="hero.jpg" /> <!-- LCP element! -->
+}
+
+// ✅ GOOD: Load immediately
+<img src="hero.jpg" />
+
+@defer (on viewport) {
+  <app-below-fold-content />
+}
+```
+
+### Improve Time to Interactive (TTI)
+
+```typescript
+// Critical: Immediate
+<button (click)="addToCart()">Add to Cart</button>
+
+// Non-critical: Defer
+@defer (on idle) {
+  <app-social-share />
+}
+```
+
+## Common Pitfalls
+
+### 1. Cascading Defer (Bad)
+
+```typescript
+// ❌ Sequential loads
+@defer (on idle) {
+  <div>
+    @defer (on idle) {
+      <div>
+        @defer (on idle) { <app-nested /> }
+      </div>
+    }
+  </div>
+}
+
+// ✅ Single defer
+@defer (on idle) {
+  <div><div><app-nested /></div></div>
+}
+```
+
+### 2. Above-Fold Defer
+
+```typescript
+// ❌ Above-fold content deferred
+<header>
+  @defer (on idle) {
+    <nav>...</nav> <!-- Should load immediately -->
+  }
+</header>
+
+// ✅ Below-fold only
+<header><nav>...</nav></header>
+<main>
+  @defer (on viewport) {
+    <app-below-fold />
+  }
+</main>
+```
+
+### 3. Missing Minimum Durations
+
+```typescript
+// ❌ Flickers quickly
+@defer {
+  <app-fast-component />
+} @loading {
+  <mat-spinner /> <!-- Flashes briefly -->
+}
+
+// ✅ Smooth loading
+@defer {
+  <app-fast-component />
+} @loading (after 100ms; minimum 500ms) {
+  <mat-spinner />
+}
+```
+
+## Real-World Example
+
+```typescript
+<div class="product-page">
+  <!-- Critical: Immediate -->
+  <app-product-header />
+  <app-product-images />
+  <app-add-to-cart />
+
+  <!-- Important: Idle -->
+  @defer (on idle) {
+    <app-product-description />
+  }
+
+  <!-- Below fold: Viewport -->
+  @defer (on viewport) {
+    <app-reviews />
+  } @placeholder {
+    <div style="min-height: 400px;"></div>
+  }
+
+  <!-- Optional: Interaction -->
+  @defer (on interaction; prefetch on idle) {
+    <app-size-guide />
+  } @placeholder {
+    <button>View Size Guide</button>
+  }
+
+  <!-- Related: Viewport -->
+  @defer (on viewport) {
+    <app-related-products />
+  }
+</div>
+```

.claude/skills/angular-template/references/projection-patterns.md

@@ -0,0 +1,253 @@
+# Content Projection Patterns
+
+Advanced `ng-content`, `ng-template`, and `ng-container` techniques.
+
+## Basic Projection
+
+### Single Slot
+
+```typescript
+@Component({
+  selector: 'ui-panel',
+  template: `<div class="panel"><ng-content></ng-content></div>`
+})
+export class PanelComponent {}
+```
+
+### Multi-Slot with Selectors
+
+```typescript
+@Component({
+  selector: 'ui-card',
+  template: `
+    <header><ng-content select="card-header"></ng-content></header>
+    <main><ng-content select="card-body"></ng-content></main>
+    <footer><ng-content></ng-content></footer> <!-- default -->
+  `
+})
+```
+
+**Usage:**
+```html
+<ui-card>
+  <card-header><h3>Title</h3></card-header>
+  <card-body><p>Content</p></card-body>
+  <button>Action</button> <!-- default slot -->
+</ui-card>
+```
+
+**Selectors:** Element (`card-title`), class (`.actions`), attribute (`[slot='footer']`)
+**Fallback:** `<ng-content select="title">Default</ng-content>`
+**Aliasing:** `<h3 ngProjectAs="card-header">Title</h3>`
+
+## Conditional Projection
+
+`ng-content` always instantiates (even if hidden). Use `ng-template` for truly conditional content:
+
+```typescript
+@Component({
+  selector: 'ui-expandable',
+  imports: [NgTemplateOutlet],
+  template: `
+    <div (click)="toggle()">
+      <ng-content select="header"></ng-content>
+      <span>{{ isExpanded() ? '▼' : '▶' }}</span>
+    </div>
+    @if (isExpanded()) {
+      <ng-container *ngTemplateOutlet="contentTemplate()"></ng-container>
+    }
+  `
+})
+export class ExpandableComponent {
+  isExpanded = signal(false);
+  contentTemplate = contentChild<TemplateRef<unknown>>('content');
+  toggle() { this.isExpanded.update(v => !v); }
+}
+```
+
+**Usage:**
+```html
+<ui-expandable>
+  <header><h3>Click to expand</h3></header>
+  <ng-template #content>
+    <app-heavy-component /> <!-- Only rendered when expanded -->
+  </ng-template>
+</ui-expandable>
+```
+
+## Template-Based Projection
+
+### Accepting Template Fragments
+
+```typescript
+@Component({
+  selector: 'ui-list',
+  imports: [NgTemplateOutlet],
+  template: `
+    <ul>
+      @for (item of items(); track item.id) {
+        <li>
+          <ng-container
+            *ngTemplateOutlet="itemTemplate(); context: { $implicit: item, index: $index }">
+          </ng-container>
+        </li>
+      }
+    </ul>
+  `
+})
+export class ListComponent<T> {
+  items = input.required<T[]>();
+  itemTemplate = contentChild.required<TemplateRef<{ $implicit: T; index: number }>>('itemTemplate');
+}
+```
+
+**Usage:**
+```html
+<ui-list [items]="users()">
+  <ng-template #itemTemplate let-user let-i="index">
+    <div>{{i + 1}}. {{user.name}}</div>
+  </ng-template>
+</ui-list>
+```
+
+### Multiple Template Slots
+
+```typescript
+@Component({
+  selector: 'ui-data-table',
+  imports: [NgTemplateOutlet],
+  template: `
+    <table>
+      <thead><ng-container *ngTemplateOutlet="headerTemplate()"></ng-container></thead>
+      <tbody>
+        @for (row of data(); track row.id) {
+          <ng-container *ngTemplateOutlet="rowTemplate(); context: { $implicit: row }"></ng-container>
+        }
+      </tbody>
+      <tfoot><ng-container *ngTemplateOutlet="footerTemplate()"></ng-container></tfoot>
+    </table>
+  `
+})
+export class DataTableComponent<T> {
+  data = input.required<T[]>();
+  headerTemplate = contentChild.required<TemplateRef<void>>('header');
+  rowTemplate = contentChild.required<TemplateRef<{ $implicit: T }>>('row');
+  footerTemplate = contentChild<TemplateRef<void>>('footer');
+}
+```
+
+## Querying Projected Content
+
+### Using ContentChildren
+
+```typescript
+@Component({
+  selector: 'ui-tabs',
+  template: `
+    <nav>
+      @for (tab of tabs(); track tab.id) {
+        <button [class.active]="tab === activeTab()" (click)="selectTab(tab)">
+          {{tab.label()}}
+        </button>
+      }
+    </nav>
+    <ng-content></ng-content>
+  `
+})
+export class TabsComponent {
+  tabs = contentChildren(TabComponent);
+  activeTab = signal<TabComponent | null>(null);
+
+  ngAfterContentInit() {
+    this.selectTab(this.tabs()[0]);
+  }
+
+  selectTab(tab: TabComponent) {
+    this.tabs().forEach(t => t.isActive.set(false));
+    tab.isActive.set(true);
+    this.activeTab.set(tab);
+  }
+}
+
+@Component({
+  selector: 'ui-tab',
+  template: `@if (isActive()) { <ng-content></ng-content> }`
+})
+export class TabComponent {
+  label = input.required<string>();
+  isActive = signal(false);
+  id = Math.random().toString(36);
+}
+```
+
+## Real-World Examples
+
+### Modal/Dialog
+
+```typescript
+@Component({
+  selector: 'ui-modal',
+  imports: [NgTemplateOutlet],
+  template: `
+    @if (isOpen()) {
+      <div class="backdrop" (click)="close()">
+        <div class="modal" (click)="$event.stopPropagation()">
+          <header>
+            <ng-content select="modal-title"></ng-content>
+            <button (click)="close()">×</button>
+          </header>
+          <main><ng-content></ng-content></main>
+          <footer>
+            <ng-content select="modal-actions">
+              <button (click)="close()">Close</button>
+            </ng-content>
+          </footer>
+        </div>
+      </div>
+    }
+  `
+})
+export class ModalComponent {
+  isOpen = signal(false);
+  open() { this.isOpen.set(true); }
+  close() { this.isOpen.set(false); }
+}
+```
+
+### Form Field Wrapper
+
+```typescript
+@Component({
+  selector: 'ui-form-field',
+  template: `
+    <div class="form-field" [class.has-error]="error()">
+      <label [for]="fieldId()">
+        <ng-content select="field-label"></ng-content>
+        @if (required()) { <span class="required">*</span> }
+      </label>
+      <div class="input-wrapper"><ng-content></ng-content></div>
+      @if (error()) { <span class="error">{{error()}}</span> }
+      @if (hint()) { <span class="hint">{{hint()}}</span> }
+    </div>
+  `
+})
+export class FormFieldComponent {
+  fieldId = input.required<string>();
+  required = input(false);
+  error = input<string>();
+  hint = input<string>();
+}
+```
+
+## Performance Notes
+
+- `ng-content` **always instantiates** projected content
+- For conditional projection, use `ng-template` + `NgTemplateOutlet`
+- Projected content evaluates in **parent component context**
+- Use `computed()` for expensive expressions in projected content
+
+## Common Pitfalls
+
+1. **Using ng-content in structural directives:** Won't work as expected. Use `ng-template` instead.
+2. **Forgetting default slot:** Unmatched content disappears without default `<ng-content></ng-content>`
+3. **Template order matters:** Content renders in template order, not usage order

.claude/skills/angular-template/references/template-reference.md

@@ -0,0 +1,304 @@
+# ng-template and ng-container Reference
+
+Template fragments and grouping elements.
+
+## ng-template Basics
+
+### Creating Fragments
+
+```html
+<ng-template #myFragment>
+  <h3>Template content</h3>
+  <p>Not rendered until explicitly instantiated</p>
+</ng-template>
+```
+
+### Rendering with NgTemplateOutlet
+
+```typescript
+import { NgTemplateOutlet } from '@angular/common';
+
+@Component({
+  imports: [NgTemplateOutlet],
+  template: `
+    <ng-template #greeting><h1>Hello</h1></ng-template>
+    <ng-container *ngTemplateOutlet="greeting"></ng-container>
+  `
+})
+```
+
+### Passing Context
+
+```html
+<ng-template #userCard let-user="user" let-index="idx">
+  <div>#{{index}}: {{user.name}}</div>
+</ng-template>
+
+<ng-container
+  *ngTemplateOutlet="userCard; context: {user: currentUser(), idx: 0}">
+</ng-container>
+```
+
+**$implicit for default parameter:**
+
+```html
+<ng-template #simple let-value>
+  <p>{{value}}</p>
+</ng-template>
+
+<ng-container *ngTemplateOutlet="simple; context: {$implicit: 'Hello'}">
+</ng-container>
+```
+
+## Accessing Templates
+
+### ViewChild
+
+```typescript
+@Component({
+  template: `
+    <ng-template #myTemplate><p>Content</p></ng-template>
+    <button (click)="render()">Render</button>
+  `
+})
+export class MyComponent {
+  myTemplate = viewChild<TemplateRef<unknown>>('myTemplate');
+  viewContainer = inject(ViewContainerRef);
+
+  render() {
+    this.viewContainer.createEmbeddedView(this.myTemplate()!);
+  }
+}
+```
+
+### ContentChild
+
+```typescript
+@Component({
+  selector: 'ui-dialog',
+  template: `<ng-container *ngTemplateOutlet="contentTemplate()"></ng-container>`
+})
+export class DialogComponent {
+  contentTemplate = contentChild<TemplateRef<unknown>>('content');
+}
+```
+
+**Usage:**
+```html
+<ui-dialog>
+  <ng-template #content>
+    <h2>Dialog Content</h2>
+  </ng-template>
+</ui-dialog>
+```
+
+## Programmatic Rendering
+
+### ViewContainerRef
+
+```typescript
+@Component({
+  template: `
+    <ng-template #dynamic let-title>
+      <h2>{{title}}</h2>
+    </ng-template>
+    <button (click)="addView()">Add</button>
+  `
+})
+export class DynamicComponent {
+  dynamic = viewChild<TemplateRef<{ $implicit: string }>>('dynamic');
+  viewContainer = inject(ViewContainerRef);
+  views: EmbeddedViewRef<any>[] = [];
+
+  addView() {
+    const view = this.viewContainer.createEmbeddedView(
+      this.dynamic()!,
+      { $implicit: `View ${this.views.length + 1}` }
+    );
+    this.views.push(view);
+  }
+}
+```
+
+### Custom Directive
+
+```typescript
+@Directive({ selector: '[appDynamicHost]', standalone: true })
+export class DynamicHostDirective {
+  viewContainer = inject(ViewContainerRef);
+
+  render(template: TemplateRef<any>, context?: any) {
+    this.viewContainer.clear();
+    this.viewContainer.createEmbeddedView(template, context);
+  }
+}
+```
+
+## ng-container Patterns
+
+Groups elements without DOM node:
+
+```html
+<!-- Without extra wrapper -->
+<p>
+  Hero's name is
+  <ng-container @if="hero()">{{hero().name}}</ng-container>.
+</p>
+```
+
+### Use Cases
+
+**1. Structural directives without wrappers:**
+```html
+<div>
+  <ng-container @if="showSection()">
+    <h2>Title</h2>
+    <p>Content</p>
+  </ng-container>
+</div>
+```
+
+**2. Grouping multiple elements:**
+```html
+<ul>
+  @for (category of categories(); track category.id) {
+    <ng-container>
+      <li class="header">{{category.name}}</li>
+      @for (item of category.items; track item.id) {
+        <li>{{item.name}}</li>
+      }
+    </ng-container>
+  }
+</ul>
+```
+
+**3. Conditional options:**
+```html
+<select [(ngModel)]="value">
+  @for (group of groups(); track group.id) {
+    <optgroup [label]="group.label">
+      @for (opt of group.options; track opt.id) {
+        <ng-container @if="opt.isEnabled">
+          <option [value]="opt.value">{{opt.label}}</option>
+        </ng-container>
+      }
+    </optgroup>
+  }
+</select>
+```
+
+**4. Template outlets:**
+```html
+<div>
+  <ng-container *ngTemplateOutlet="header()"></ng-container>
+  <main><ng-container *ngTemplateOutlet="content()"></ng-container></main>
+  <ng-container *ngTemplateOutlet="footer()"></ng-container>
+</div>
+```
+
+**5. ViewContainerRef injection:**
+```typescript
+@Directive({ selector: '[appDynamic]', standalone: true })
+export class DynamicDirective {
+  viewContainer = inject(ViewContainerRef); // Injects at ng-container
+}
+```
+
+```html
+<ng-container appDynamic></ng-container>
+```
+
+## Advanced Patterns
+
+### Reusable Repeater
+
+```typescript
+@Component({
+  selector: 'ui-repeater',
+  imports: [NgTemplateOutlet],
+  template: `
+    @for (item of items(); track trackBy(item)) {
+      <ng-container
+        *ngTemplateOutlet="itemTemplate(); context: { $implicit: item, index: $index }">
+      </ng-container>
+    }
+  `
+})
+export class RepeaterComponent<T> {
+  items = input.required<T[]>();
+  itemTemplate = contentChild.required<TemplateRef<{ $implicit: T; index: number }>>('item');
+  trackBy = input<(item: T) => any>((item: any) => item);
+}
+```
+
+### Template Polymorphism
+
+```typescript
+@Component({
+  selector: 'ui-card-list',
+  imports: [NgTemplateOutlet],
+  template: `
+    @for (item of items(); track item.id) {
+      @switch (item.type) {
+        @case ('product') {
+          <ng-container *ngTemplateOutlet="productTpl(); context: { $implicit: item }"></ng-container>
+        }
+        @case ('service') {
+          <ng-container *ngTemplateOutlet="serviceTpl(); context: { $implicit: item }"></ng-container>
+        }
+        @default {
+          <ng-container *ngTemplateOutlet="defaultTpl(); context: { $implicit: item }"></ng-container>
+        }
+      }
+    }
+  `
+})
+export class CardListComponent {
+  items = input.required<Item[]>();
+  productTpl = contentChild.required<TemplateRef<{ $implicit: Item }>>('product');
+  serviceTpl = contentChild.required<TemplateRef<{ $implicit: Item }>>('service');
+  defaultTpl = contentChild.required<TemplateRef<{ $implicit: Item }>>('default');
+}
+```
+
+## Context Scoping
+
+Templates evaluate in **declaration context**, not render context:
+
+```typescript
+@Component({
+  selector: 'parent',
+  template: `
+    <ng-template #tpl>
+      <p>{{parentValue()}}</p> <!-- Evaluates in parent -->
+    </ng-template>
+    <child [template]="tpl"></child>
+  `
+})
+export class ParentComponent {
+  parentValue = signal('Parent');
+}
+
+@Component({
+  selector: 'child',
+  imports: [NgTemplateOutlet],
+  template: `<ng-container *ngTemplateOutlet="template()"></ng-container>`
+})
+export class ChildComponent {
+  template = input.required<TemplateRef<void>>();
+}
+```
+
+**Override with context:**
+```typescript
+<ng-container
+  *ngTemplateOutlet="template(); context: { childData: childValue() }">
+</ng-container>
+```
+
+## Common Pitfalls
+
+1. **Forgetting context:** `<ng-container *ngTemplateOutlet="tpl"></ng-container>` without context won't pass data
+2. **Styling ng-container:** Not in DOM, can't be styled
+3. **Template timing:** Access templates in `ngAfterViewInit`, not constructor
+4. **Confusing ng-template vs ng-content:** Template = reusable fragment, Content = projects parent content

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

@@ -0,0 +1,352 @@
+---
+name: git-workflow
+description: Enforces ISA-Frontend project Git workflow conventions including branch naming, conventional commits, and PR creation against develop branch
+---
+
+# Git Workflow Skill
+
+Enforces Git workflow conventions specific to the ISA-Frontend project.
+
+## When to Use
+
+- Creating new branches for features or bugfixes
+- Writing commit messages
+- Creating pull requests
+- Any Git operations requiring adherence to project conventions
+
+## Core Principles
+
+### 1. Default Branch is `develop` (NOT `main`)
+
+- **All PRs target**: `develop` branch
+- **Feature branches from**: `develop`
+- **Never push directly to**: `develop` or `main`
+
+### 2. Branch Naming Convention
+
+**Format**: `<type>/{task-id}-{short-description}`
+
+**Types**:
+- `feature/` - New features or enhancements
+- `bugfix/` - Bug fixes
+- `hotfix/` - Emergency production fixes
+
+**Rules**:
+- Use English kebab-case for descriptions
+- Start with task/issue ID (e.g., `5391`)
+- Keep description concise - shorten if too long
+- Use hyphens to separate words
+
+**Examples**:
+```bash
+# Good
+feature/5391-praemie-checkout-action-card-delivery-order
+bugfix/6123-fix-login-redirect-loop
+hotfix/7890-critical-payment-error
+
+# Bad
+feature/praemie-checkout  # Missing task ID
+feature/5391_praemie      # Using underscores
+feature-5391-very-long-description-that-goes-on-forever  # Too long
+```
+
+### 3. Conventional Commits (WITHOUT Co-Author Tags)
+
+**Format**: `<type>(<scope>): <description>`
+
+**Types**:
+- `feat`: New feature
+- `fix`: Bug fix
+- `docs`: Documentation only
+- `style`: Code style (formatting, missing semicolons)
+- `refactor`: Code restructuring without feature changes
+- `perf`: Performance improvements
+- `test`: Adding or updating tests
+- `build`: Build system or dependencies
+- `ci`: CI configuration
+- `chore`: Maintenance tasks
+
+**Rules**:
+- ❌ **NO** "Generated with Claude Code" tags
+- ❌ **NO** "Co-Authored-By: Claude" tags
+- ✅ Keep first line under 72 characters
+- ✅ Use imperative mood ("add" not "added")
+- ✅ Body optional but recommended for complex changes
+
+**Examples**:
+```bash
+# Good
+feat(checkout): add bonus card selection for delivery orders
+
+fix(crm): resolve customer search filter reset issue
+
+refactor(oms): extract return validation logic into service
+
+# Bad
+feat(checkout): add bonus card selection
+
+Generated with Claude Code
+Co-Authored-By: Claude <noreply@anthropic.com>
+
+# Also bad
+Added new feature  # Wrong tense
+Fix bug            # Missing scope
+```
+
+### 4. Pull Request Creation
+
+**Target Branch**: Always `develop`
+
+**PR Title Format**: Same as conventional commit
+```
+feat(domain): concise description of changes
+```
+
+**PR Body Structure**:
+```markdown
+## Summary
+- Brief bullet points of changes
+
+## Related Tasks
+- Closes #{task-id}
+- Refs #{related-task}
+
+## Test Plan
+- [ ] Unit tests added/updated
+- [ ] E2E attributes added
+- [ ] Manual testing completed
+
+## Breaking Changes
+None / List breaking changes
+
+## Screenshots (if UI changes)
+[Add screenshots]
+```
+
+## Common Workflows
+
+### Creating a Feature Branch
+
+```bash
+# 1. Update develop
+git checkout develop
+git pull origin develop
+
+# 2. Create feature branch
+git checkout -b feature/5391-praemie-checkout-action-card
+
+# 3. Work and commit
+git add .
+git commit -m "feat(checkout): add primary bonus card selection logic"
+
+# 4. Push to remote
+git push -u origin feature/5391-praemie-checkout-action-card
+
+# 5. Create PR targeting develop (use gh CLI or web UI)
+```
+
+### Creating a Bugfix Branch
+
+```bash
+# From develop
+git checkout develop
+git pull origin develop
+git checkout -b bugfix/6123-login-redirect-loop
+
+# Commit
+git commit -m "fix(auth): resolve infinite redirect on logout"
+```
+
+### Creating a Hotfix Branch
+
+```bash
+# From main (production)
+git checkout main
+git pull origin main
+git checkout -b hotfix/7890-payment-processing-error
+
+# Commit
+git commit -m "fix(checkout): critical payment API timeout handling"
+
+# Merge to both main and develop
+```
+
+## Commit Message Guidelines
+
+### Good Commit Messages
+
+```bash
+feat(crm): add customer loyalty tier calculation
+
+Implements three-tier loyalty system based on annual spend.
+Includes migration for existing customer data.
+
+Refs #5234
+
+---
+
+fix(oms): prevent duplicate return submissions
+
+Adds debouncing to return form submission and validates
+against existing returns in the last 60 seconds.
+
+Closes #5891
+
+---
+
+refactor(catalogue): extract product search into dedicated service
+
+Moves search logic from component to ProductSearchService
+for better testability and reusability.
+
+---
+
+perf(remission): optimize remission list query with pagination
+
+Reduces initial load time from 3s to 800ms by implementing
+cursor-based pagination.
+
+Closes #6234
+```
+
+### Bad Commit Messages
+
+```bash
+# Too vague
+fix: bug fixes
+
+# Missing scope
+feat: new feature
+
+# Wrong tense
+fixed the login issue
+
+# Including banned tags
+feat(checkout): add feature
+
+Generated with Claude Code
+Co-Authored-By: Claude <noreply@anthropic.com>
+```
+
+## Git Configuration Checks
+
+### Verify Git Setup
+
+```bash
+# Check current branch
+git branch --show-current
+
+# Verify remote
+git remote -v  # Should show origin pointing to ISA-Frontend
+
+# Check for uncommitted changes
+git status
+```
+
+## Common Mistakes to Avoid
+
+```bash
+# ❌ Creating PR against main
+gh pr create --base main  # WRONG
+
+# ✅ Always target develop
+gh pr create --base develop  # CORRECT
+
+# ❌ Using underscores in branch names
+git checkout -b feature/5391_my_feature  # WRONG
+
+# ✅ Use hyphens
+git checkout -b feature/5391-my-feature  # CORRECT
+
+# ❌ Adding co-author tags
+git commit -m "feat: something
+
+Co-Authored-By: Claude <noreply@anthropic.com>"  # WRONG
+
+# ✅ Clean commit message
+git commit -m "feat(scope): something"  # CORRECT
+
+# ❌ Forgetting task ID in branch name
+git checkout -b feature/new-checkout-flow  # WRONG
+
+# ✅ Include task ID
+git checkout -b feature/5391-new-checkout-flow  # CORRECT
+```
+
+## Integration with Claude Code
+
+When Claude Code creates commits or PRs:
+
+### Commit Creation
+```bash
+# Claude uses conventional commits WITHOUT attribution
+git commit -m "feat(checkout): implement bonus card selection
+
+Adds logic for selecting primary bonus card during checkout
+for delivery orders. Includes validation and error handling.
+
+Refs #5391"
+```
+
+### PR Creation
+```bash
+# Target develop by default
+gh pr create --base develop \
+  --title "feat(checkout): implement bonus card selection" \
+  --body "## Summary
+- Add primary bonus card selection logic
+- Implement validation for delivery orders
+- Add error handling for API failures
+
+## Related Tasks
+- Closes #5391
+
+## Test Plan
+- [x] Unit tests added
+- [x] E2E attributes added
+- [x] Manual testing completed"
+```
+
+## Branch Cleanup
+
+### After PR Merge
+```bash
+# Update develop
+git checkout develop
+git pull origin develop
+
+# Delete local feature branch
+git branch -d feature/5391-praemie-checkout
+
+# Delete remote branch (usually done by PR merge)
+git push origin --delete feature/5391-praemie-checkout
+```
+
+## Quick Reference
+
+```bash
+# Branch naming
+feature/{task-id}-{description}
+bugfix/{task-id}-{description}
+hotfix/{task-id}-{description}
+
+# Commit format
+<type>(<scope>): <description>
+
+# Common types
+feat, fix, docs, style, refactor, perf, test, build, ci, chore
+
+# PR target
+Always: develop (NOT main)
+
+# Banned in commits
+- "Generated with Claude Code"
+- "Co-Authored-By: Claude"
+- Any AI attribution
+```
+
+## Resources
+
+- [Conventional Commits](https://www.conventionalcommits.org/)
+- Project PR template: `.github/pull_request_template.md`
+- Code review standards: `.github/review-instructions.md`

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

@@ -0,0 +1,298 @@
+---
+name: html-template
+description: This skill should be used when writing or reviewing HTML templates to ensure proper E2E testing attributes (data-what, data-which) and ARIA accessibility attributes are included. Use when creating interactive elements like buttons, inputs, links, forms, dialogs, or any HTML markup requiring testing and accessibility compliance. Works seamlessly with the angular-template skill.
+---
+
+# HTML Template - Testing & Accessibility Attributes
+
+This skill should be used when writing or reviewing HTML templates to ensure proper testing and accessibility attributes are included.
+
+## When to Use This Skill
+
+Use this skill when:
+- Writing or modifying Angular component templates
+- Creating any HTML templates or markup
+- Reviewing code for testing and accessibility compliance
+- Adding interactive elements (buttons, inputs, links, etc.)
+- Implementing forms, lists, navigation, or dialogs
+
+**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
+
+## Overview
+
+This skill provides comprehensive guidance for two critical HTML attribute categories:
+
+### 1. E2E Testing Attributes
+Enable automated end-to-end testing by providing stable selectors for QA automation:
+- **`data-what`**: Semantic description of element's purpose
+- **`data-which`**: Unique identifier for specific instances
+- **`data-*`**: Additional contextual information
+
+### 2. ARIA Accessibility Attributes
+Ensure web applications are accessible to all users, including those using assistive technologies:
+- **Roles**: Define element purpose (button, navigation, dialog, etc.)
+- **Properties**: Provide additional context (aria-label, aria-describedby)
+- **States**: Indicate dynamic states (aria-expanded, aria-disabled)
+- **Live Regions**: Announce dynamic content changes
+
+## Why Both Are Essential
+
+- **E2E Attributes**: Enable reliable automated testing without brittle CSS or XPath selectors
+- **ARIA Attributes**: Ensure compliance with WCAG standards and improve user experience for people with disabilities
+- **Together**: Create robust, testable, and accessible web applications
+
+## Quick Reference
+
+### Button Example
+```html
+<button
+  type="button"
+  (click)="onSubmit()"
+  data-what="submit-button"
+  data-which="registration-form"
+  aria-label="Submit registration form">
+  Submit
+</button>
+```
+
+### Input Example
+```html
+<input
+  type="text"
+  [(ngModel)]="email"
+  data-what="email-input"
+  data-which="registration-form"
+  aria-label="Email address"
+  aria-describedby="email-hint"
+  aria-required="true" />
+<span id="email-hint">We'll never share your email</span>
+```
+
+### Dynamic List Example
+```html
+@for (item of items; track item.id) {
+  <li
+    (click)="selectItem(item)"
+    data-what="list-item"
+    [attr.data-which]="item.id"
+    [attr.data-status]="item.status"
+    [attr.aria-label]="'Select ' + item.name"
+    role="button"
+    tabindex="0">
+    {{ item.name }}
+  </li>
+}
+```
+
+### Link Example
+```html
+<a
+  [routerLink]="['/orders', orderId]"
+  data-what="order-link"
+  [attr.data-which]="orderId"
+  [attr.aria-label]="'View order ' + orderNumber">
+  View Order #{{ orderNumber }}
+</a>
+```
+
+### Dialog Example
+```html
+<div
+  class="dialog"
+  data-what="confirmation-dialog"
+  data-which="delete-item"
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="dialog-title"
+  aria-describedby="dialog-description">
+
+  <h2 id="dialog-title">Confirm Deletion</h2>
+  <p id="dialog-description">Are you sure you want to delete this item?</p>
+
+  <button
+    (click)="confirm()"
+    data-what="confirm-button"
+    data-which="delete-dialog"
+    aria-label="Confirm deletion">
+    Delete
+  </button>
+
+  <button
+    (click)="cancel()"
+    data-what="cancel-button"
+    data-which="delete-dialog"
+    aria-label="Cancel deletion">
+    Cancel
+  </button>
+</div>
+```
+
+## Common Patterns by Element Type
+
+### Interactive Elements That Need Attributes
+
+**Required attributes for:**
+- Buttons (`<button>`, `<ui-button>`, custom button components)
+- Form inputs (`<input>`, `<textarea>`, `<select>`)
+- Links (`<a>`, `[routerLink]`)
+- Clickable elements (elements with `(click)` handlers)
+- Custom interactive components
+- List items in dynamic lists
+- Navigation items
+- Dialog/modal controls
+
+### Naming Conventions
+
+**E2E `data-what` patterns:**
+- `*-button` (submit-button, cancel-button, delete-button)
+- `*-input` (email-input, search-input, quantity-input)
+- `*-link` (product-link, order-link, customer-link)
+- `*-item` (list-item, menu-item, card-item)
+- `*-dialog` (confirm-dialog, error-dialog, info-dialog)
+- `*-dropdown` (status-dropdown, category-dropdown)
+
+**E2E `data-which` guidelines:**
+- Use unique identifiers: `data-which="primary"`, `data-which="customer-list"`
+- Bind dynamically for lists: `[attr.data-which]="item.id"`
+- Combine with context: `data-which="customer-{{ customerId }}-edit"`
+
+**ARIA role patterns:**
+- Interactive elements: `button`, `link`, `menuitem`
+- Structural: `navigation`, `main`, `complementary`, `contentinfo`
+- Widget: `dialog`, `alertdialog`, `tooltip`, `tablist`, `tab`
+- Landmark: `banner`, `search`, `form`, `region`
+
+## Best Practices
+
+### E2E Attributes
+1. ✅ Add to ALL interactive elements
+2. ✅ Use kebab-case for `data-what` values
+3. ✅ Ensure `data-which` is unique within the view
+4. ✅ Use Angular binding for dynamic values: `[attr.data-*]`
+5. ✅ Avoid including sensitive data in attributes
+6. ✅ Document complex attribute patterns in template comments
+
+### ARIA Attributes
+1. ✅ Use semantic HTML first (use `<button>` instead of `<div role="button">`)
+2. ✅ Provide text alternatives for all interactive elements
+3. ✅ Ensure proper keyboard navigation (tabindex, focus management)
+4. ✅ Use `aria-label` when visual label is missing
+5. ✅ Use `aria-labelledby` to reference existing visible labels
+6. ✅ Keep ARIA attributes in sync with visual states
+7. ✅ Test with screen readers (NVDA, JAWS, VoiceOver)
+
+### Combined Best Practices
+1. ✅ Add both E2E and ARIA attributes to every interactive element
+2. ✅ Keep attributes close together in the HTML for readability
+3. ✅ Update tests to use `data-what` and `data-which` selectors
+4. ✅ Validate coverage: all interactive elements should have both types
+5. ✅ Review with QA and accessibility teams
+
+## Detailed References
+
+For comprehensive guides, examples, and patterns, see:
+
+- **[E2E Testing Attributes](references/e2e-attributes.md)** - Complete E2E attribute patterns and conventions
+- **[ARIA Accessibility Attributes](references/aria-attributes.md)** - Comprehensive ARIA guidance and WCAG compliance
+- **[Combined Patterns](references/combined-patterns.md)** - Real-world examples with both attribute types
+
+## Project-Specific Links
+
+- **Testing Guidelines**: `docs/guidelines/testing.md` - Project testing standards including E2E attributes
+- **CLAUDE.md**: Project conventions and requirements
+- **Angular Template Skill**: `.claude/skills/angular-template` - For Angular-specific syntax
+
+## Validation Checklist
+
+Before considering template complete:
+- [ ] All buttons have `data-what`, `data-which`, and `aria-label`
+- [ ] All inputs have `data-what`, `data-which`, and appropriate ARIA attributes
+- [ ] All links have `data-what`, `data-which`, and descriptive ARIA labels
+- [ ] Dynamic lists use `[attr.data-*]` bindings with unique identifiers
+- [ ] Dialogs have proper ARIA roles and relationships
+- [ ] Forms have proper field associations and error announcements
+- [ ] Interactive elements are keyboard accessible (tabindex where needed)
+- [ ] No duplicate `data-which` values within the same view
+- [ ] Screen reader testing completed (if applicable)
+
+## Example: Complete Form
+
+```html
+<form
+  data-what="registration-form"
+  data-which="user-signup"
+  role="form"
+  aria-labelledby="form-title">
+
+  <h2 id="form-title">User Registration</h2>
+
+  <div class="form-field">
+    <label for="username-input">Username</label>
+    <input
+      id="username-input"
+      type="text"
+      [(ngModel)]="username"
+      data-what="username-input"
+      data-which="registration-form"
+      aria-required="true"
+      aria-describedby="username-hint" />
+    <span id="username-hint">Must be at least 3 characters</span>
+  </div>
+
+  <div class="form-field">
+    <label for="email-input">Email</label>
+    <input
+      id="email-input"
+      type="email"
+      [(ngModel)]="email"
+      data-what="email-input"
+      data-which="registration-form"
+      aria-required="true"
+      [attr.aria-invalid]="emailError ? 'true' : null"
+      aria-describedby="email-error" />
+    @if (emailError) {
+      <span
+        id="email-error"
+        role="alert"
+        aria-live="polite">
+        {{ emailError }}
+      </span>
+    }
+  </div>
+
+  <div class="form-actions">
+    <button
+      type="submit"
+      (click)="onSubmit()"
+      data-what="submit-button"
+      data-which="registration-form"
+      [attr.aria-disabled]="!isValid"
+      aria-label="Submit registration form">
+      Register
+    </button>
+
+    <button
+      type="button"
+      (click)="onCancel()"
+      data-what="cancel-button"
+      data-which="registration-form"
+      aria-label="Cancel registration">
+      Cancel
+    </button>
+  </div>
+</form>
+```
+
+## Remember
+
+- **Always use both E2E and ARIA attributes together**
+- **E2E attributes enable automated testing** - your QA team relies on them
+- **ARIA attributes enable accessibility** - legal requirement and right thing to do
+- **Test with real users and assistive technologies** - automated checks aren't enough
+- **Keep attributes up-to-date** - maintain as code changes
+
+---
+
+**This skill works automatically with Angular templates. Both E2E and ARIA attributes should be added to every interactive element.**

.claude/skills/html-template/references/e2e-attributes.md

@@ -0,0 +1,842 @@
+# E2E Testing Attributes - Complete Reference
+
+This reference provides comprehensive guidance for adding E2E (End-to-End) testing attributes to HTML templates for reliable automated testing.
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Core Attribute Types](#core-attribute-types)
+- [Why E2E Attributes?](#why-e2e-attributes)
+- [Naming Conventions](#naming-conventions)
+- [Patterns by Element Type](#patterns-by-element-type)
+- [Patterns by Component Type](#patterns-by-component-type)
+- [Dynamic Attributes](#dynamic-attributes)
+- [Best Practices](#best-practices)
+- [Validation](#validation)
+- [Testing Integration](#testing-integration)
+
+## Overview
+
+E2E testing attributes provide stable, semantic selectors for automated testing. They enable QA automation without relying on brittle CSS classes, IDs, or XPath selectors that frequently break when styling changes.
+
+## Core Attribute Types
+
+### 1. `data-what` (Required)
+**Purpose**: Semantic description of the element's purpose or type
+
+**Format**: kebab-case string
+
+**Examples**:
+- `data-what="submit-button"`
+- `data-what="search-input"`
+- `data-what="product-link"`
+- `data-what="list-item"`
+
+**Guidelines**:
+- Describes WHAT the element is or does
+- Should be consistent across similar elements
+- Use descriptive, semantic names
+- Keep it concise but clear
+
+### 2. `data-which` (Required)
+**Purpose**: Unique identifier for the specific instance of this element type
+
+**Format**: kebab-case string or dynamic binding
+
+**Examples**:
+- `data-which="primary"` (static)
+- `data-which="customer-form"` (static)
+- `[attr.data-which]="item.id"` (dynamic)
+- `[attr.data-which]="'customer-' + customerId"` (dynamic with context)
+
+**Guidelines**:
+- Identifies WHICH specific instance of this element type
+- Must be unique within the same view/component
+- Use dynamic binding for list items: `[attr.data-which]="item.id"`
+- Can combine multiple identifiers: `data-which="customer-123-edit"`
+
+### 3. `data-*` (Contextual)
+**Purpose**: Additional contextual information about state, status, or data
+
+**Format**: Custom attributes with kebab-case names
+
+**Examples**:
+- `data-status="active"`
+- `data-index="0"`
+- `data-role="admin"`
+- `[attr.data-count]="items.length"`
+
+**Guidelines**:
+- Use for additional context that helps testing
+- Avoid sensitive data (passwords, tokens, PII)
+- Use Angular binding for dynamic values: `[attr.data-*]`
+- Keep attribute names semantic and clear
+
+## Why E2E Attributes?
+
+### Problems with Traditional Selectors
+
+**CSS Classes (Bad)**:
+```html
+<!-- Brittle - breaks when styling changes -->
+<button class="btn btn-primary submit">Submit</button>
+```
+```javascript
+// Test breaks when class names change
+await page.click('.btn-primary.submit');
+```
+
+**XPath (Bad)**:
+```javascript
+// Brittle - breaks when structure changes
+await page.click('//div[@class="form"]/button[2]');
+```
+
+**IDs (Better, but limited)**:
+```html
+<!-- IDs must be unique across entire page -->
+<button id="submit-btn">Submit</button>
+```
+
+### Benefits of E2E Attributes
+
+**Stable, Semantic Selectors (Good)**:
+```html
+<button
+  class="btn btn-primary"
+  data-what="submit-button"
+  data-which="registration-form">
+  Submit
+</button>
+```
+```javascript
+// Stable - survives styling and structure changes
+await page.click('[data-what="submit-button"][data-which="registration-form"]');
+```
+
+**Advantages**:
+- ✅ Decoupled from styling (CSS classes can change freely)
+- ✅ Semantic and self-documenting
+- ✅ Consistent across the application
+- ✅ Easy to read and maintain
+- ✅ Survives refactoring and restructuring
+- ✅ QA and developers speak the same language
+
+## Naming Conventions
+
+### Common `data-what` Patterns
+
+| Pattern | Use Case | Examples |
+|---------|----------|----------|
+| `*-button` | All button elements | `submit-button`, `cancel-button`, `delete-button`, `save-button` |
+| `*-input` | Text inputs and textareas | `email-input`, `search-input`, `quantity-input`, `password-input` |
+| `*-select` | Dropdown/select elements | `status-select`, `category-select`, `country-select` |
+| `*-checkbox` | Checkbox inputs | `terms-checkbox`, `subscribe-checkbox`, `remember-checkbox` |
+| `*-radio` | Radio button inputs | `payment-radio`, `shipping-radio` |
+| `*-link` | Navigation links | `product-link`, `order-link`, `customer-link`, `home-link` |
+| `*-item` | List/grid items | `list-item`, `menu-item`, `card-item`, `row-item` |
+| `*-dialog` | Modals and dialogs | `confirm-dialog`, `error-dialog`, `info-dialog` |
+| `*-dropdown` | Dropdown menus | `actions-dropdown`, `filter-dropdown` |
+| `*-toggle` | Toggle switches | `theme-toggle`, `notifications-toggle` |
+| `*-tab` | Tab navigation | `profile-tab`, `settings-tab` |
+| `*-badge` | Status badges | `status-badge`, `count-badge` |
+| `*-icon` | Interactive icons | `close-icon`, `menu-icon`, `search-icon` |
+
+### `data-which` Naming Guidelines
+
+**Static unique identifiers** (single instance):
+- `data-which="primary"` - Primary action button
+- `data-which="secondary"` - Secondary action button
+- `data-which="main-search"` - Main search input
+- `data-which="customer-form"` - Customer form context
+
+**Dynamic identifiers** (multiple instances):
+- `[attr.data-which]="item.id"` - List item by ID
+- `[attr.data-which]="'product-' + product.id"` - Product item
+- `[attr.data-which]="index"` - By array index (use sparingly)
+
+**Contextual identifiers** (combine context):
+- `data-which="customer-{{ customerId }}-edit"` - Edit button for specific customer
+- `data-which="order-{{ orderId }}-cancel"` - Cancel button for specific order
+
+## Patterns by Element Type
+
+### Buttons
+
+```html
+<!-- Submit Button -->
+<button
+  type="submit"
+  (click)="onSubmit()"
+  data-what="submit-button"
+  data-which="registration-form">
+  Submit
+</button>
+
+<!-- Cancel Button -->
+<button
+  type="button"
+  (click)="onCancel()"
+  data-what="cancel-button"
+  data-which="registration-form">
+  Cancel
+</button>
+
+<!-- Delete Button with Confirmation -->
+<button
+  (click)="onDelete(item)"
+  data-what="delete-button"
+  [attr.data-which]="item.id"
+  [attr.data-status]="item.canDelete ? 'enabled' : 'disabled'">
+  Delete
+</button>
+
+<!-- Icon Button -->
+<button
+  (click)="toggleMenu()"
+  data-what="menu-button"
+  data-which="main-nav"
+  aria-label="Toggle menu">
+  <i class="icon-menu"></i>
+</button>
+
+<!-- Custom Button Component -->
+<ui-button
+  (click)="save()"
+  data-what="save-button"
+  data-which="order-form">
+  Save Order
+</ui-button>
+```
+
+### Inputs
+
+```html
+<!-- Text Input -->
+<input
+  type="text"
+  [(ngModel)]="email"
+  placeholder="Email address"
+  data-what="email-input"
+  data-which="registration-form" />
+
+<!-- Textarea -->
+<textarea
+  [(ngModel)]="comments"
+  data-what="comments-textarea"
+  data-which="feedback-form"
+  rows="4"></textarea>
+
+<!-- Number Input with State -->
+<input
+  type="number"
+  [(ngModel)]="quantity"
+  data-what="quantity-input"
+  data-which="order-form"
+  [attr.data-min]="minQuantity"
+  [attr.data-max]="maxQuantity" />
+
+<!-- Search Input -->
+<input
+  type="search"
+  [(ngModel)]="searchTerm"
+  (input)="onSearch()"
+  placeholder="Search products..."
+  data-what="search-input"
+  data-which="product-catalog" />
+
+<!-- Password Input -->
+<input
+  type="password"
+  [(ngModel)]="password"
+  data-what="password-input"
+  data-which="login-form" />
+```
+
+### Select/Dropdown
+
+```html
+<!-- Basic Select -->
+<select
+  [(ngModel)]="selectedStatus"
+  data-what="status-select"
+  data-which="order-filter">
+  <option value="">All Statuses</option>
+  <option value="pending">Pending</option>
+  <option value="completed">Completed</option>
+</select>
+
+<!-- Custom Dropdown Component -->
+<ui-dropdown
+  [(value)]="selectedCategory"
+  data-what="category-dropdown"
+  data-which="product-filter">
+</ui-dropdown>
+```
+
+### Checkboxes and Radios
+
+```html
+<!-- Checkbox -->
+<label>
+  <input
+    type="checkbox"
+    [(ngModel)]="agreedToTerms"
+    data-what="terms-checkbox"
+    data-which="registration-form" />
+  I agree to the terms
+</label>
+
+<!-- Radio Group -->
+<div data-what="payment-radio-group" data-which="checkout-form">
+  <label>
+    <input
+      type="radio"
+      name="payment"
+      value="credit"
+      [(ngModel)]="paymentMethod"
+      data-what="payment-radio"
+      data-which="credit-card" />
+    Credit Card
+  </label>
+  <label>
+    <input
+      type="radio"
+      name="payment"
+      value="paypal"
+      [(ngModel)]="paymentMethod"
+      data-what="payment-radio"
+      data-which="paypal" />
+    PayPal
+  </label>
+</div>
+```
+
+### Links
+
+```html
+<!-- Static Link -->
+<a
+  routerLink="/about"
+  data-what="nav-link"
+  data-which="about">
+  About Us
+</a>
+
+<!-- Dynamic Link with ID -->
+<a
+  [routerLink]="['/products', product.id]"
+  data-what="product-link"
+  [attr.data-which]="product.id">
+  {{ product.name }}
+</a>
+
+<!-- External Link -->
+<a
+  href="https://example.com"
+  target="_blank"
+  data-what="external-link"
+  data-which="documentation">
+  Documentation
+</a>
+
+<!-- Action Link (not navigation) -->
+<a
+  (click)="downloadReport()"
+  data-what="download-link"
+  data-which="sales-report">
+  Download Report
+</a>
+```
+
+### Lists and Tables
+
+```html
+<!-- Dynamic List with @for -->
+<ul data-what="product-list" data-which="catalog">
+  @for (product of products; track product.id) {
+    <li
+      (click)="selectProduct(product)"
+      data-what="list-item"
+      [attr.data-which]="product.id"
+      [attr.data-status]="product.stock > 0 ? 'in-stock' : 'out-of-stock'">
+      {{ product.name }}
+    </li>
+  }
+</ul>
+
+<!-- Table Row -->
+<table data-what="orders-table" data-which="customer-orders">
+  <tbody>
+    @for (order of orders; track order.id) {
+      <tr
+        data-what="table-row"
+        [attr.data-which]="order.id">
+        <td>{{ order.id }}</td>
+        <td>{{ order.date }}</td>
+        <td>
+          <button
+            data-what="view-button"
+            [attr.data-which]="order.id">
+            View
+          </button>
+        </td>
+      </tr>
+    }
+  </tbody>
+</table>
+```
+
+### Dialogs and Modals
+
+```html
+<!-- Confirmation Dialog -->
+<div
+  *ngIf="showDialog"
+  data-what="confirmation-dialog"
+  data-which="delete-item">
+
+  <h2>Confirm Deletion</h2>
+  <p>Are you sure you want to delete this item?</p>
+
+  <button
+    (click)="confirmDelete()"
+    data-what="confirm-button"
+    data-which="delete-dialog">
+    Delete
+  </button>
+
+  <button
+    (click)="cancelDelete()"
+    data-what="cancel-button"
+    data-which="delete-dialog">
+    Cancel
+  </button>
+</div>
+
+<!-- Info Dialog with Close -->
+<div
+  data-what="info-dialog"
+  data-which="welcome-message">
+
+  <button
+    (click)="closeDialog()"
+    data-what="close-button"
+    data-which="dialog">
+    ×
+  </button>
+
+  <div data-what="dialog-content" data-which="welcome">
+    <h2>Welcome!</h2>
+    <p>Thank you for joining us.</p>
+  </div>
+</div>
+```
+
+## Patterns by Component Type
+
+### Form Components
+
+```html
+<form data-what="user-form" data-which="registration">
+  <!-- Field inputs -->
+  <input
+    data-what="username-input"
+    data-which="registration-form"
+    type="text" />
+
+  <input
+    data-what="email-input"
+    data-which="registration-form"
+    type="email" />
+
+  <!-- Action buttons -->
+  <button
+    data-what="submit-button"
+    data-which="registration-form"
+    type="submit">
+    Submit
+  </button>
+
+  <button
+    data-what="cancel-button"
+    data-which="registration-form"
+    type="button">
+    Cancel
+  </button>
+</form>
+```
+
+### List/Table Components
+
+```html
+<!-- Each item needs unique data-which -->
+@for (item of items; track item.id) {
+  <div
+    data-what="list-item"
+    [attr.data-which]="item.id">
+
+    <span data-what="item-name" [attr.data-which]="item.id">
+      {{ item.name }}
+    </span>
+
+    <button
+      data-what="edit-button"
+      [attr.data-which]="item.id">
+      Edit
+    </button>
+
+    <button
+      data-what="delete-button"
+      [attr.data-which]="item.id">
+      Delete
+    </button>
+  </div>
+}
+```
+
+### Navigation Components
+
+```html
+<nav data-what="main-navigation" data-which="header">
+  <a
+    routerLink="/dashboard"
+    data-what="nav-link"
+    data-which="dashboard">
+    Dashboard
+  </a>
+
+  <a
+    routerLink="/orders"
+    data-what="nav-link"
+    data-which="orders">
+    Orders
+  </a>
+
+  <a
+    routerLink="/customers"
+    data-what="nav-link"
+    data-which="customers">
+    Customers
+  </a>
+</nav>
+
+<!-- Breadcrumbs -->
+<nav data-what="breadcrumb" data-which="page-navigation">
+  @for (crumb of breadcrumbs; track $index) {
+    <a
+      [routerLink]="crumb.url"
+      data-what="breadcrumb-link"
+      [attr.data-which]="crumb.id">
+      {{ crumb.label }}
+    </a>
+  }
+</nav>
+```
+
+### Dialog/Modal Components
+
+```html
+<!-- All dialog buttons need clear identifiers -->
+<div data-what="modal" data-which="user-settings">
+  <button
+    data-what="close-button"
+    data-which="modal">
+    Close
+  </button>
+
+  <button
+    data-what="save-button"
+    data-which="modal">
+    Save Changes
+  </button>
+
+  <button
+    data-what="reset-button"
+    data-which="modal">
+    Reset to Defaults
+  </button>
+</div>
+```
+
+## Dynamic Attributes
+
+### Using Angular Binding
+
+When values need to be dynamic, use Angular's attribute binding:
+
+```html
+<!-- Static (simple values) -->
+<button data-what="submit-button" data-which="form">
+
+<!-- Dynamic (from component properties) -->
+<button
+  data-what="submit-button"
+  [attr.data-which]="formId">
+
+<!-- Dynamic (from loop variables) -->
+@for (item of items; track item.id) {
+  <div
+    data-what="list-item"
+    [attr.data-which]="item.id"
+    [attr.data-status]="item.status"
+    [attr.data-index]="$index">
+  </div>
+}
+
+<!-- Dynamic (computed values) -->
+<button
+  data-what="action-button"
+  [attr.data-which]="'customer-' + customerId + '-' + action">
+</button>
+```
+
+### Loop Variables
+
+Angular's `@for` provides special variables:
+
+```html
+@for (item of items; track item.id; let idx = $index; let isFirst = $first) {
+  <div
+    data-what="list-item"
+    [attr.data-which]="item.id"
+    [attr.data-index]="idx"
+    [attr.data-first]="isFirst">
+    {{ item.name }}
+  </div>
+}
+```
+
+## Best Practices
+
+### Do's ✅
+
+1. **Add to ALL interactive elements**
+   - Buttons, inputs, links, clickable elements
+   - Custom components that handle user interaction
+   - Form controls and navigation items
+
+2. **Use consistent naming**
+   - Follow the naming patterns (e.g., `*-button`, `*-input`)
+   - Use kebab-case consistently
+   - Be descriptive but concise
+
+3. **Ensure uniqueness**
+   - `data-which` must be unique within the view
+   - Use item IDs for list items: `[attr.data-which]="item.id"`
+   - Combine context when needed: `data-which="form-primary-submit"`
+
+4. **Use Angular binding for dynamic values**
+   - `[attr.data-which]="item.id"` ✅
+   - `data-which="{{ item.id }}"` ❌ (avoid interpolation)
+
+5. **Document complex patterns**
+   - Add comments for non-obvious attribute choices
+   - Document the expected test selectors
+
+6. **Keep attributes updated**
+   - Update when element purpose changes
+   - Remove when elements are removed
+   - Maintain consistency across refactoring
+
+### Don'ts ❌
+
+1. **Don't include sensitive data**
+   - ❌ `data-which="password-{{ userPassword }}"`
+   - ❌ `data-token="{{ authToken }}"`
+   - ❌ `data-ssn="{{ socialSecurity }}"`
+
+2. **Don't use generic values**
+   - ❌ `data-what="button"` (too generic)
+   - ✅ `data-what="submit-button"` (specific)
+
+3. **Don't duplicate `data-which` in the same view**
+   - ❌ Two buttons with `data-which="primary"`
+   - ✅ `data-which="form-primary"` and `data-which="dialog-primary"`
+
+4. **Don't rely only on index for lists**
+   - ❌ `[attr.data-which]="$index"` (changes when list reorders)
+   - ✅ `[attr.data-which]="item.id"` (stable identifier)
+
+5. **Don't forget about custom components**
+   - Custom components need attributes too
+   - Attributes should be on the component tag, not just internal elements
+
+## Validation
+
+### Coverage Check
+
+Ensure all interactive elements have E2E attributes:
+
+```bash
+# Count interactive elements
+grep -E '\(click\)|routerLink|button|input|select|textarea' component.html | wc -l
+
+# Count elements with data-what
+grep -c 'data-what=' component.html
+
+# Find elements missing E2E attributes
+grep -E '\(click\)|button' component.html | grep -v 'data-what='
+```
+
+### Uniqueness Check
+
+Verify no duplicate `data-which` values in the same template:
+
+```typescript
+// In component tests
+it('should have unique data-which attributes', () => {
+  const elements = fixture.nativeElement.querySelectorAll('[data-which]');
+  const dataWhichValues = Array.from(elements).map(
+    (el: any) => el.getAttribute('data-which')
+  );
+
+  const uniqueValues = new Set(dataWhichValues);
+  expect(dataWhichValues.length).toBe(uniqueValues.size);
+});
+```
+
+### Validation Checklist
+
+- [ ] All buttons have `data-what` and `data-which`
+- [ ] All inputs have `data-what` and `data-which`
+- [ ] All links have `data-what` and `data-which`
+- [ ] All clickable elements have attributes
+- [ ] Dynamic lists use `[attr.data-which]="item.id"`
+- [ ] No duplicate `data-which` values in the same view
+- [ ] No sensitive data in attributes
+- [ ] Custom components have attributes
+- [ ] Attributes use kebab-case
+- [ ] Coverage: 100% of interactive elements
+
+## Testing Integration
+
+### Using E2E Attributes in Tests
+
+**Unit Tests (Angular Testing Utilities)**:
+```typescript
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+describe('MyComponent', () => {
+  let fixture: ComponentFixture<MyComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MyComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MyComponent);
+    fixture.detectChanges();
+  });
+
+  it('should have submit button with E2E attributes', () => {
+    const button = fixture.nativeElement.querySelector(
+      '[data-what="submit-button"][data-which="registration-form"]'
+    );
+    expect(button).toBeTruthy();
+    expect(button.textContent).toContain('Submit');
+  });
+
+  it('should have unique data-which for list items', () => {
+    const items = fixture.nativeElement.querySelectorAll('[data-what="list-item"]');
+    const dataWhichValues = Array.from(items).map(
+      (item: any) => item.getAttribute('data-which')
+    );
+
+    // All should have unique IDs
+    const uniqueValues = new Set(dataWhichValues);
+    expect(dataWhichValues.length).toBe(uniqueValues.size);
+  });
+});
+```
+
+**E2E Tests (Playwright)**:
+```typescript
+import { test, expect } from '@playwright/test';
+
+test('user registration flow', async ({ page }) => {
+  await page.goto('/register');
+
+  // Fill form using E2E attributes
+  await page.fill(
+    '[data-what="username-input"][data-which="registration-form"]',
+    'johndoe'
+  );
+
+  await page.fill(
+    '[data-what="email-input"][data-which="registration-form"]',
+    'john@example.com'
+  );
+
+  // Click submit using E2E attributes
+  await page.click(
+    '[data-what="submit-button"][data-which="registration-form"]'
+  );
+
+  // Verify success
+  await expect(page.locator('[data-what="success-message"]')).toBeVisible();
+});
+```
+
+**E2E Tests (Cypress)**:
+```typescript
+describe('Order Management', () => {
+  it('should edit an order', () => {
+    cy.visit('/orders');
+
+    // Find specific order by ID using data-which
+    cy.get('[data-what="list-item"][data-which="order-123"]')
+      .should('be.visible');
+
+    // Click edit button for that specific order
+    cy.get('[data-what="edit-button"][data-which="order-123"]')
+      .click();
+
+    // Update quantity
+    cy.get('[data-what="quantity-input"][data-which="order-form"]')
+      .clear()
+      .type('5');
+
+    // Save changes
+    cy.get('[data-what="save-button"][data-which="order-form"]')
+      .click();
+  });
+});
+```
+
+## Documentation in Templates
+
+Add comment blocks to document E2E attributes:
+
+```html
+<!--
+E2E Test Attributes:
+- data-what="submit-button" data-which="registration-form" - Main form submission
+- data-what="cancel-button" data-which="registration-form" - Cancel registration
+- data-what="username-input" data-which="registration-form" - Username field
+- data-what="email-input" data-which="registration-form" - Email field
+- data-what="password-input" data-which="registration-form" - Password field
+-->
+
+<form data-what="registration-form" data-which="user-signup">
+  <!-- Form content -->
+</form>
+```
+
+## Related Documentation
+
+- **[ARIA Accessibility Attributes](aria-attributes.md)** - Accessibility guidance
+- **[Combined Patterns](combined-patterns.md)** - Examples with E2E + ARIA together
+- **Testing Guidelines**: `docs/guidelines/testing.md` - Project testing standards
+- **CLAUDE.md**: Project code quality requirements
+
+## Summary
+
+E2E testing attributes are essential for:
+- ✅ Stable, maintainable automated tests
+- ✅ Clear communication between developers and QA
+- ✅ Tests that survive styling and structural changes
+- ✅ Self-documenting code that expresses intent
+- ✅ Reliable CI/CD pipelines
+
+**Always add `data-what` and `data-which` to every interactive element.**

.claude/skills/logging/SKILL.md

@@ -0,0 +1,272 @@
+---
+name: logging-helper
+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.
+---
+
+# Logging Helper Skill
+
+Ensures consistent and efficient logging using `@isa/core/logging` library.
+
+## When to Use
+
+- Adding logging to new components/services
+- Refactoring existing logging code
+- Reviewing code for proper logging patterns
+- Debugging logging issues
+
+## Core Principles
+
+### 1. Always Use Factory Pattern
+
+```typescript
+import { logger } from '@isa/core/logging';
+
+// ✅ DO
+#logger = logger();
+
+// ❌ DON'T
+constructor(private loggingService: LoggingService) {}
+```
+
+### 2. Choose Appropriate Log Levels
+
+- **Trace**: Fine-grained debugging (method entry/exit)
+- **Debug**: Development debugging (variable states)
+- **Info**: Runtime information (user actions, events)
+- **Warn**: Potentially harmful situations
+- **Error**: Errors affecting functionality
+
+### 3. Context Patterns
+
+**Static Context** (component level):
+```typescript
+#logger = logger({ component: 'UserProfileComponent' });
+```
+
+**Dynamic Context** (instance level):
+```typescript
+#logger = logger(() => ({
+  userId: this.authService.currentUserId,
+  storeId: this.config.storeId
+}));
+```
+
+**Message Context** (use functions for performance):
+```typescript
+// ✅ Recommended - lazy evaluation
+this.#logger.info('Order processed', () => ({
+  orderId: order.id,
+  total: order.total,
+  timestamp: Date.now()
+}));
+
+// ✅ Acceptable - static values
+this.#logger.info('Order processed', {
+  orderId: order.id,
+  status: 'completed'
+});
+```
+
+## Essential Patterns
+
+### Component Logging
+```typescript
+@Component({
+  selector: 'app-product-list',
+  standalone: true,
+})
+export class ProductListComponent {
+  #logger = logger({ component: 'ProductListComponent' });
+
+  ngOnInit(): void {
+    this.#logger.info('Component initialized');
+  }
+
+  onAction(id: string): void {
+    this.#logger.debug('Action triggered', { id });
+  }
+}
+```
+
+### Service Logging
+```typescript
+@Injectable({ providedIn: 'root' })
+export class DataService {
+  #logger = logger({ service: 'DataService' });
+
+  fetchData(endpoint: string): Observable<Data> {
+    this.#logger.debug('Fetching data', { endpoint });
+
+    return this.http.get<Data>(endpoint).pipe(
+      tap((data) => this.#logger.info('Data fetched', () => ({
+        endpoint,
+        size: data.length
+      }))),
+      catchError((error) => {
+        this.#logger.error('Fetch failed', error, () => ({
+          endpoint,
+          status: error.status
+        }));
+        return throwError(() => error);
+      })
+    );
+  }
+}
+```
+
+### Error Handling
+```typescript
+try {
+  await this.processOrder(orderId);
+} catch (error) {
+  this.#logger.error('Order processing failed', error as Error, () => ({
+    orderId,
+    step: this.currentStep,
+    attemptNumber: this.retryCount
+  }));
+  throw error;
+}
+```
+
+### Hierarchical Context
+```typescript
+@Component({
+  providers: [
+    provideLoggerContext({ feature: 'checkout', module: 'sales' })
+  ]
+})
+export class CheckoutComponent {
+  #logger = logger(() => ({ userId: this.userService.currentUserId }));
+
+  // Logs include: feature, module, userId + message context
+}
+```
+
+## Common Mistakes to Avoid
+
+```typescript
+// ❌ Don't use console.log
+console.log('User logged in');
+// ✅ Use logger
+this.#logger.info('User logged in');
+
+// ❌ Don't create expensive context eagerly
+this.#logger.debug('Processing', {
+  data: this.computeExpensive() // Always executes
+});
+// ✅ Use function for lazy evaluation
+this.#logger.debug('Processing', () => ({
+  data: this.computeExpensive() // Only if debug enabled
+}));
+
+// ❌ Don't log in tight loops
+for (const item of items) {
+  this.#logger.debug('Item', { item });
+}
+// ✅ Log aggregates
+this.#logger.debug('Batch processed', () => ({
+  count: items.length
+}));
+
+// ❌ Don't log sensitive data
+this.#logger.info('User auth', { password: user.password });
+// ✅ Log safe identifiers only
+this.#logger.info('User auth', { userId: user.id });
+
+// ❌ Don't miss error object
+this.#logger.error('Failed');
+// ✅ Include error object
+this.#logger.error('Failed', error as Error);
+```
+
+## Configuration
+
+### App Configuration
+```typescript
+// app.config.ts
+import { ApplicationConfig, isDevMode } from '@angular/core';
+import {
+  provideLogging, withLogLevel, withSink,
+  LogLevel, ConsoleLogSink
+} from '@isa/core/logging';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideLogging(
+      withLogLevel(isDevMode() ? LogLevel.Debug : LogLevel.Warn),
+      withSink(ConsoleLogSink),
+      withContext({ app: 'ISA', version: '1.0.0' })
+    )
+  ]
+};
+```
+
+## Testing
+
+```typescript
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
+import { LoggingService } from '@isa/core/logging';
+
+describe('MyComponent', () => {
+  const createComponent = createComponentFactory({
+    component: MyComponent,
+    mocks: [LoggingService]
+  });
+
+  it('should log error', () => {
+    const spectator = createComponent();
+    const loggingService = spectator.inject(LoggingService);
+
+    spectator.component.riskyOperation();
+
+    expect(loggingService.error).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.any(Error),
+      expect.any(Function)
+    );
+  });
+});
+```
+
+## Code Review Checklist
+
+- [ ] Uses `logger()` factory, not `LoggingService` injection
+- [ ] Appropriate log level for each message
+- [ ] Context functions for expensive operations
+- [ ] No sensitive information (passwords, tokens, PII)
+- [ ] No `console.log` statements
+- [ ] Error logs include error object
+- [ ] No logging in tight loops
+- [ ] Component/service identified in context
+- [ ] E2E attributes on interactive elements
+
+## Quick Reference
+
+```typescript
+// Import
+import { logger, provideLoggerContext } from '@isa/core/logging';
+
+// Create logger
+#logger = logger();                              // Basic
+#logger = logger({ component: 'Name' });         // Static context
+#logger = logger(() => ({ id: this.id }));       // Dynamic context
+
+// Log messages
+this.#logger.trace('Detailed trace');
+this.#logger.debug('Debug info');
+this.#logger.info('General info', () => ({ key: value }));
+this.#logger.warn('Warning');
+this.#logger.error('Error', error, () => ({ context }));
+
+// Component context
+@Component({
+  providers: [provideLoggerContext({ feature: 'users' })]
+})
+```
+
+## Additional Resources
+
+- Full documentation: `libs/core/logging/README.md`
+- Examples: `.claude/skills/logging-helper/examples.md`
+- Quick reference: `.claude/skills/logging-helper/reference.md`
+- Troubleshooting: `.claude/skills/logging-helper/troubleshooting.md`

.claude/skills/logging/examples.md

@@ -0,0 +1,350 @@
+# Logging Examples
+
+Concise real-world examples of logging patterns.
+
+## 1. Component with Observable
+
+```typescript
+import { Component, OnInit } from '@angular/core';
+import { logger } from '@isa/core/logging';
+
+@Component({
+  selector: 'app-product-list',
+  standalone: true,
+})
+export class ProductListComponent implements OnInit {
+  #logger = logger({ component: 'ProductListComponent' });
+
+  constructor(private productService: ProductService) {}
+
+  ngOnInit(): void {
+    this.#logger.info('Component initialized');
+    this.loadProducts();
+  }
+
+  private loadProducts(): void {
+    this.productService.getProducts().subscribe({
+      next: (products) => {
+        this.#logger.info('Products loaded', () => ({ count: products.length }));
+      },
+      error: (error) => {
+        this.#logger.error('Failed to load products', error);
+      }
+    });
+  }
+}
+```
+
+## 2. Service with HTTP
+
+```typescript
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { logger } from '@isa/core/logging';
+import { catchError, tap } from 'rxjs/operators';
+
+@Injectable({ providedIn: 'root' })
+export class OrderService {
+  private http = inject(HttpClient);
+  #logger = logger({ service: 'OrderService' });
+
+  getOrder(id: string): Observable<Order> {
+    this.#logger.debug('Fetching order', { id });
+
+    return this.http.get<Order>(`/api/orders/${id}`).pipe(
+      tap((order) => this.#logger.info('Order fetched', () => ({
+        id,
+        status: order.status
+      }))),
+      catchError((error) => {
+        this.#logger.error('Fetch failed', error, () => ({ id, status: error.status }));
+        throw error;
+      })
+    );
+  }
+}
+```
+
+## 3. Hierarchical Context
+
+```typescript
+import { Component } from '@angular/core';
+import { logger, provideLoggerContext } from '@isa/core/logging';
+
+@Component({
+  selector: 'oms-return-process',
+  standalone: true,
+  providers: [
+    provideLoggerContext({ feature: 'returns', module: 'oms' })
+  ],
+})
+export class ReturnProcessComponent {
+  #logger = logger(() => ({
+    processId: this.currentProcessId,
+    step: this.currentStep
+  }));
+
+  private currentProcessId = crypto.randomUUID();
+  private currentStep = 1;
+
+  startProcess(orderId: string): void {
+    // Logs include: feature, module, processId, step, orderId
+    this.#logger.info('Process started', { orderId });
+  }
+}
+```
+
+## 4. NgRx Effect
+
+```typescript
+import { Injectable } from '@angular/core';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { logger } from '@isa/core/logging';
+import { map, catchError, tap } from 'rxjs/operators';
+import { of } from 'rxjs';
+
+@Injectable()
+export class OrdersEffects {
+  #logger = logger({ effect: 'OrdersEffects' });
+
+  loadOrders$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(OrdersActions.loadOrders),
+      tap((action) => this.#logger.debug('Loading orders', () => ({
+        page: action.page
+      }))),
+      mergeMap((action) =>
+        this.orderService.getOrders(action.filters).pipe(
+          map((orders) => {
+            this.#logger.info('Orders loaded', () => ({ count: orders.length }));
+            return OrdersActions.loadOrdersSuccess({ orders });
+          }),
+          catchError((error) => {
+            this.#logger.error('Load failed', error);
+            return of(OrdersActions.loadOrdersFailure({ error }));
+          })
+        )
+      )
+    )
+  );
+
+  constructor(
+    private actions$: Actions,
+    private orderService: OrderService
+  ) {}
+}
+```
+
+## 5. Guard with Authorization
+
+```typescript
+import { inject } from '@angular/core';
+import { CanActivateFn, Router } from '@angular/router';
+import { logger } from '@isa/core/logging';
+
+export const authGuard: CanActivateFn = (route, state) => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
+  const log = logger({ guard: 'AuthGuard' });
+
+  if (authService.isAuthenticated()) {
+    log.debug('Access granted', () => ({ route: state.url }));
+    return true;
+  }
+
+  log.warn('Access denied', () => ({
+    attemptedRoute: state.url,
+    redirectTo: '/login'
+  }));
+  return router.createUrlTree(['/login']);
+};
+```
+
+## 6. HTTP Interceptor
+
+```typescript
+import { HttpInterceptorFn } from '@angular/common/http';
+import { inject } from '@angular/core';
+import { tap, catchError } from 'rxjs/operators';
+import { LoggingService } from '@isa/core/logging';
+
+export const loggingInterceptor: HttpInterceptorFn = (req, next) => {
+  const loggingService = inject(LoggingService);
+  const startTime = performance.now();
+
+  loggingService.debug('HTTP Request', () => ({
+    method: req.method,
+    url: req.url
+  }));
+
+  return next(req).pipe(
+    tap((event) => {
+      if (event.type === HttpEventType.Response) {
+        loggingService.info('HTTP Response', () => ({
+          method: req.method,
+          url: req.url,
+          status: event.status,
+          duration: `${(performance.now() - startTime).toFixed(2)}ms`
+        }));
+      }
+    }),
+    catchError((error) => {
+      loggingService.error('HTTP Error', error, () => ({
+        method: req.method,
+        url: req.url,
+        status: error.status
+      }));
+      return throwError(() => error);
+    })
+  );
+};
+```
+
+## 7. Form Validation
+
+```typescript
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { logger } from '@isa/core/logging';
+
+@Component({
+  selector: 'shared-user-form',
+  standalone: true,
+})
+export class UserFormComponent implements OnInit {
+  #logger = logger({ component: 'UserFormComponent' });
+  form!: FormGroup;
+
+  constructor(private fb: FormBuilder) {}
+
+  ngOnInit(): void {
+    this.form = this.fb.group({
+      name: ['', Validators.required],
+      email: ['', [Validators.required, Validators.email]]
+    });
+  }
+
+  onSubmit(): void {
+    if (this.form.invalid) {
+      this.#logger.warn('Invalid form submission', () => ({
+        errors: this.getFormErrors()
+      }));
+      return;
+    }
+
+    this.#logger.info('Form submitted');
+  }
+
+  private getFormErrors(): Record<string, unknown> {
+    const errors: Record<string, unknown> = {};
+    Object.keys(this.form.controls).forEach((key) => {
+      const control = this.form.get(key);
+      if (control?.errors) errors[key] = control.errors;
+    });
+    return errors;
+  }
+}
+```
+
+## 8. Async Progress Tracking
+
+```typescript
+import { Injectable } from '@angular/core';
+import { logger } from '@isa/core/logging';
+import { Observable } from 'rxjs';
+import { tap } from 'rxjs/operators';
+
+@Injectable({ providedIn: 'root' })
+export class ImportService {
+  #logger = logger({ service: 'ImportService' });
+
+  importData(file: File): Observable<number> {
+    const importId = crypto.randomUUID();
+
+    this.#logger.info('Import started', () => ({
+      importId,
+      fileName: file.name,
+      fileSize: file.size
+    }));
+
+    return this.processImport(file).pipe(
+      tap((progress) => {
+        if (progress % 25 === 0) {
+          this.#logger.debug('Import progress', () => ({
+            importId,
+            progress: `${progress}%`
+          }));
+        }
+      }),
+      tap({
+        complete: () => this.#logger.info('Import completed', { importId }),
+        error: (error) => this.#logger.error('Import failed', error, { importId })
+      })
+    );
+  }
+
+  private processImport(file: File): Observable<number> {
+    // Implementation
+  }
+}
+```
+
+## 9. Global Error Handler
+
+```typescript
+import { Injectable, ErrorHandler } from '@angular/core';
+import { logger } from '@isa/core/logging';
+
+@Injectable()
+export class GlobalErrorHandler implements ErrorHandler {
+  #logger = logger({ handler: 'GlobalErrorHandler' });
+
+  handleError(error: Error): void {
+    this.#logger.error('Uncaught error', error, () => ({
+      url: window.location.href,
+      userAgent: navigator.userAgent,
+      timestamp: new Date().toISOString()
+    }));
+  }
+}
+```
+
+## 10. WebSocket Component
+
+```typescript
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { logger } from '@isa/core/logging';
+import { Subject, takeUntil } from 'rxjs';
+
+@Component({
+  selector: 'oms-live-orders',
+  standalone: true,
+})
+export class LiveOrdersComponent implements OnInit, OnDestroy {
+  #logger = logger({ component: 'LiveOrdersComponent' });
+  private destroy$ = new Subject<void>();
+
+  constructor(private wsService: WebSocketService) {}
+
+  ngOnInit(): void {
+    this.#logger.info('Connecting to WebSocket');
+
+    this.wsService.connect('orders').pipe(
+      takeUntil(this.destroy$)
+    ).subscribe({
+      next: (msg) => this.#logger.debug('Message received', () => ({
+        type: msg.type,
+        orderId: msg.orderId
+      })),
+      error: (error) => this.#logger.error('WebSocket error', error),
+      complete: () => this.#logger.info('WebSocket closed')
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.#logger.debug('Component destroyed');
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}
+```

.claude/skills/logging/reference.md

@@ -0,0 +1,192 @@
+# Logging Quick Reference
+
+## API Signatures
+
+```typescript
+// Factory
+function logger(ctx?: MaybeLoggerContextFn): LoggerApi
+
+// Logger API
+interface LoggerApi {
+  trace(message: string, context?: MaybeLoggerContextFn): void;
+  debug(message: string, context?: MaybeLoggerContextFn): void;
+  info(message: string, context?: MaybeLoggerContextFn): void;
+  warn(message: string, context?: MaybeLoggerContextFn): void;
+  error(message: string, error?: Error, context?: MaybeLoggerContextFn): void;
+}
+
+// Types
+type MaybeLoggerContextFn = LoggerContext | (() => LoggerContext);
+interface LoggerContext { [key: string]: unknown; }
+```
+
+## Common Patterns
+
+| Pattern | Code |
+|---------|------|
+| Basic logger | `#logger = logger()` |
+| Static context | `#logger = logger({ component: 'Name' })` |
+| Dynamic context | `#logger = logger(() => ({ id: this.id }))` |
+| Log info | `this.#logger.info('Message')` |
+| Log with context | `this.#logger.info('Message', () => ({ key: value }))` |
+| Log error | `this.#logger.error('Error', error)` |
+| Error with context | `this.#logger.error('Error', error, () => ({ id }))` |
+| Component context | `providers: [provideLoggerContext({ feature: 'x' })]` |
+
+## Configuration
+
+```typescript
+// app.config.ts
+import { provideLogging, withLogLevel, withSink, withContext,
+         LogLevel, ConsoleLogSink } from '@isa/core/logging';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideLogging(
+      withLogLevel(isDevMode() ? LogLevel.Debug : LogLevel.Warn),
+      withSink(ConsoleLogSink),
+      withContext({ app: 'ISA', version: '1.0.0' })
+    )
+  ]
+};
+```
+
+## Log Levels
+
+| Level | Use Case | Example |
+|-------|----------|---------|
+| `Trace` | Method entry/exit | `this.#logger.trace('Entering processData')` |
+| `Debug` | Development info | `this.#logger.debug('Variable state', () => ({ x }))` |
+| `Info` | Runtime events | `this.#logger.info('User logged in', { userId })` |
+| `Warn` | Warnings | `this.#logger.warn('Deprecated API used')` |
+| `Error` | Errors | `this.#logger.error('Operation failed', error)` |
+| `Off` | Disable logging | `withLogLevel(LogLevel.Off)` |
+
+## Decision Trees
+
+### Context Type Decision
+```
+Value changes at runtime?
+├─ Yes → () => ({ value: this.getValue() })
+└─ No  → { value: 'static' }
+
+Computing value is expensive?
+├─ Yes → () => ({ data: this.compute() })
+└─ No  → Either works
+```
+
+### Log Level Decision
+```
+Method flow details? → Trace
+Development debug?  → Debug
+Runtime information? → Info
+Potential problem?  → Warn
+Error occurred?     → Error
+```
+
+## Performance Tips
+
+```typescript
+// ✅ DO: Lazy evaluation
+this.#logger.debug('Data', () => ({
+  result: this.expensive() // Only runs if debug enabled
+}));
+
+// ❌ DON'T: Eager evaluation
+this.#logger.debug('Data', {
+  result: this.expensive() // Always runs
+});
+
+// ✅ DO: Log aggregates
+this.#logger.info('Batch done', () => ({ count: items.length }));
+
+// ❌ DON'T: Log in loops
+for (const item of items) {
+  this.#logger.debug('Item', { item }); // Performance hit
+}
+```
+
+## Testing
+
+```typescript
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
+import { LoggingService } from '@isa/core/logging';
+
+describe('MyComponent', () => {
+  const createComponent = createComponentFactory({
+    component: MyComponent,
+    mocks: [LoggingService]
+  });
+
+  it('logs error', () => {
+    const spectator = createComponent();
+    const logger = spectator.inject(LoggingService);
+
+    spectator.component.operation();
+
+    expect(logger.error).toHaveBeenCalled();
+  });
+});
+```
+
+## Custom Sink
+
+```typescript
+import { Injectable } from '@angular/core';
+import { Sink, LogLevel, LoggerContext } from '@isa/core/logging';
+
+@Injectable()
+export class CustomSink implements Sink {
+  log(level: LogLevel, message: string, context?: LoggerContext, error?: Error): void {
+    // Implementation
+  }
+}
+
+// Register
+provideLogging(withSink(CustomSink))
+```
+
+## Sink Function (with DI)
+
+```typescript
+import { inject } from '@angular/core';
+import { SinkFn, LogLevel } from '@isa/core/logging';
+
+export const remoteSink: SinkFn = () => {
+  const http = inject(HttpClient);
+
+  return (level, message, context, error) => {
+    if (level === LogLevel.Error) {
+      http.post('/api/logs', { level, message, context, error }).subscribe();
+    }
+  };
+};
+
+// Register
+provideLogging(withSinkFn(remoteSink))
+```
+
+## Common Imports
+
+```typescript
+// Main imports
+import { logger, provideLoggerContext } from '@isa/core/logging';
+
+// Configuration imports
+import {
+  provideLogging,
+  withLogLevel,
+  withSink,
+  withContext,
+  LogLevel,
+  ConsoleLogSink
+} from '@isa/core/logging';
+
+// Type imports
+import {
+  LoggerApi,
+  Sink,
+  SinkFn,
+  LoggerContext
+} from '@isa/core/logging';
+```

.claude/skills/logging/troubleshooting.md

@@ -0,0 +1,235 @@
+# Logging Troubleshooting
+
+## 1. Logs Not Appearing
+
+**Problem:** Logger called but nothing in console.
+
+**Solutions:**
+```typescript
+// Check log level
+provideLogging(
+  withLogLevel(isDevMode() ? LogLevel.Debug : LogLevel.Warn)
+)
+
+// Add sink
+provideLogging(
+  withLogLevel(LogLevel.Debug),
+  withSink(ConsoleLogSink) // Required!
+)
+
+// Verify configuration in app.config.ts
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideLogging(...) // Must be present
+  ]
+};
+```
+
+## 2. NullInjectorError
+
+**Error:** `NullInjectorError: No provider for LoggingService!`
+
+**Solution:**
+```typescript
+// app.config.ts
+import { provideLogging, withLogLevel, withSink,
+         LogLevel, ConsoleLogSink } from '@isa/core/logging';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideLogging(
+      withLogLevel(LogLevel.Debug),
+      withSink(ConsoleLogSink)
+    )
+  ]
+};
+```
+
+## 3. Context Not Showing
+
+**Problem:** Context passed but doesn't appear.
+
+**Check:**
+```typescript
+// ✅ Both work:
+this.#logger.info('Message', () => ({ id: '123' })); // Function
+this.#logger.info('Message', { id: '123' });          // Object
+
+// ❌ Common mistake:
+const ctx = { id: '123' };
+this.#logger.info('Message', ctx); // Actually works!
+
+// Verify hierarchical merge:
+// Global → Component → Instance → Message
+```
+
+## 4. Performance Issues
+
+**Problem:** Slow when debug logging enabled.
+
+**Solutions:**
+```typescript
+// ✅ Use lazy evaluation
+this.#logger.debug('Data', () => ({
+  expensive: this.compute() // Only if debug enabled
+}));
+
+// ✅ Reduce log frequency
+this.#logger.debug('Batch', () => ({
+  count: items.length // Not each item
+}));
+
+// ✅ Increase production level
+provideLogging(
+  withLogLevel(isDevMode() ? LogLevel.Debug : LogLevel.Warn)
+)
+```
+
+## 5. Error Object Not Logged
+
+**Problem:** Error shows as `[object Object]`.
+
+**Solution:**
+```typescript
+// ❌ Wrong
+this.#logger.error('Failed', { error }); // Don't wrap in object
+
+// ✅ Correct
+this.#logger.error('Failed', error as Error, () => ({
+  additionalContext: 'value'
+}));
+```
+
+## 6. TypeScript Errors
+
+**Error:** `Type 'X' is not assignable to 'MaybeLoggerContextFn'`
+
+**Solution:**
+```typescript
+// ❌ Wrong type
+this.#logger.info('Message', 'string'); // Invalid
+
+// ✅ Correct types
+this.#logger.info('Message', { key: 'value' });
+this.#logger.info('Message', () => ({ key: 'value' }));
+```
+
+## 7. Logs in Tests
+
+**Problem:** Test output cluttered with logs.
+
+**Solutions:**
+```typescript
+// Mock logging service
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
+import { LoggingService } from '@isa/core/logging';
+
+const createComponent = createComponentFactory({
+  component: MyComponent,
+  mocks: [LoggingService] // Mocks all log methods
+});
+
+// Or disable in tests
+TestBed.configureTestingModule({
+  providers: [
+    provideLogging(withLogLevel(LogLevel.Off))
+  ]
+});
+```
+
+## 8. Undefined Property Error
+
+**Error:** `Cannot read property 'X' of undefined`
+
+**Problem:** Accessing uninitialized property in logger context.
+
+**Solutions:**
+```typescript
+// ❌ Problem
+#logger = logger(() => ({
+  userId: this.userService.currentUserId // May be undefined
+}));
+
+// ✅ Solution 1: Optional chaining
+#logger = logger(() => ({
+  userId: this.userService?.currentUserId ?? 'unknown'
+}));
+
+// ✅ Solution 2: Delay access
+ngOnInit() {
+  this.#logger.info('Init', () => ({
+    userId: this.userService.currentUserId // Safe here
+  }));
+}
+```
+
+## 9. Circular Dependency
+
+**Error:** `NG0200: Circular dependency in DI detected`
+
+**Cause:** Service A ← → Service B both inject LoggingService.
+
+**Solution:**
+```typescript
+// ❌ Creates circular dependency
+constructor(private loggingService: LoggingService) {}
+
+// ✅ Use factory (no circular dependency)
+#logger = logger({ service: 'MyService' });
+```
+
+## 10. Custom Sink Not Working
+
+**Problem:** Sink registered but never called.
+
+**Solutions:**
+```typescript
+// ✅ Correct registration
+provideLogging(
+  withSink(MySink) // Add to config
+)
+
+// ✅ Correct signature
+export class MySink implements Sink {
+  log(
+    level: LogLevel,
+    message: string,
+    context?: LoggerContext,
+    error?: Error
+  ): void {
+    // Implementation
+  }
+}
+
+// ✅ Sink function must return function
+export const mySinkFn: SinkFn = () => {
+  const http = inject(HttpClient);
+  return (level, message, context, error) => {
+    // Implementation
+  };
+};
+```
+
+## Quick Diagnostics
+
+```typescript
+// Enable all logs temporarily
+provideLogging(withLogLevel(LogLevel.Trace))
+
+// Check imports
+import { logger } from '@isa/core/logging'; // ✅ Correct
+import { logger } from '@isa/core/logging/src/lib/logger.factory'; // ❌ Wrong
+
+// Verify console filters in browser DevTools
+// Ensure Info, Debug, Warnings are enabled
+```
+
+## Common Error Messages
+
+| Error | Cause | Fix |
+|-------|-------|-----|
+| `NullInjectorError: LoggingService` | Missing config | Add `provideLogging()` |
+| `Type 'X' not assignable` | Wrong context type | Use object or function |
+| `Cannot read property 'X'` | Undefined property | Use optional chaining |
+| `Circular dependency` | Service injection | Use `logger()` factory |
+| Stack overflow | Infinite loop in context | Don't call logger in context |

.claude/skills/tailwind/SKILL.md

@@ -0,0 +1,333 @@
+---
+name: tailwind
+description: This skill should be used when working with Tailwind CSS styling in the ISA-Frontend project. Use it when writing component styles, choosing color values, applying typography, creating buttons, or determining appropriate spacing and layout utilities. Essential for maintaining design system consistency.
+---
+
+# ISA Tailwind Design System
+
+## Overview
+
+Assist with applying the ISA-specific Tailwind CSS design system throughout the ISA-Frontend Angular monorepo. This skill provides comprehensive knowledge of custom utilities, color palettes, typography classes, button variants, and layout patterns specific to this project.
+
+## When to Use This Skill
+
+Invoke this skill when:
+- **After** checking `libs/ui/**` for existing components (always check first!)
+- Styling layout and spacing for components
+- Choosing appropriate color values for custom elements
+- Applying typography classes to text content
+- Determining spacing, layout, or responsive breakpoints
+- Customizing or extending existing UI components
+- Ensuring design system consistency
+- Questions about which Tailwind utility classes are available
+
+**Important**: This skill provides Tailwind utilities. Always prefer using components from `@isa/ui/*` libraries before applying custom Tailwind styles.
+
+**Works together with:**
+- **[angular-template](../angular-template/SKILL.md)** - Angular template syntax, control flow (@if, @for, @defer), and binding patterns
+- **[html-template](../html-template/SKILL.md)** - E2E testing attributes (`data-what`, `data-which`) and ARIA accessibility
+
+When building Angular components, these three skills work together:
+1. Use **angular-template** for Angular syntax and control flow
+2. Use **html-template** for `data-*` and ARIA attributes
+3. Use **tailwind** (this skill) for styling with the ISA design system
+
+## Core Design System Principles
+
+### 0. Component Libraries First (Most Important)
+
+**Always check `libs/ui/**` for existing components before writing custom Tailwind styles.**
+
+The project has 17 specialized UI component libraries:
+- `@isa/ui/buttons` - Button components
+- `@isa/ui/dialogs` - Dialog/modal components
+- `@isa/ui/inputs` - Input field components
+- `@isa/ui/forms` - Form components
+- `@isa/ui/cards` - Card components
+- `@isa/ui/layout` - Layout components (including breakpoint service)
+- `@isa/ui/tables` - Table components
+- And 10+ more specialized libraries
+
+**Workflow**:
+1. First, search for existing components in `libs/ui/**` that match your needs
+2. If found, import and use the component (prefer composition over custom styling)
+3. Only use Tailwind utilities for:
+   - Layout/spacing adjustments
+   - Component-specific customizations
+   - Cases where no suitable UI component exists
+
+**Example**:
+```typescript
+// ✅ Correct - Use existing component
+import { ButtonComponent } from '@isa/ui/buttons';
+
+// ❌ Wrong - Don't recreate with Tailwind
+<button class="btn btn-accent-1">...</button>
+```
+
+### 1. ISA-Prefixed Colors Only
+
+**Always use `isa-*` prefixed color utilities.** Other color names exist only for backwards compatibility and should not be used in new code.
+
+**Correct color usage**:
+- `bg-isa-accent-red`, `bg-isa-accent-blue`, `bg-isa-accent-green`
+- `bg-isa-secondary-100` through `bg-isa-secondary-900`
+- `bg-isa-neutral-100` through `bg-isa-neutral-900`
+- `text-isa-white`, `text-isa-black`
+
+**Example**:
+```html
+<!-- ✅ Correct -->
+<div class="bg-isa-accent-red text-isa-white">Error message</div>
+<button class="bg-isa-secondary-600 hover:bg-isa-secondary-700">Action</button>
+
+<!-- ❌ Wrong - deprecated colors -->
+<div class="bg-accent-1 text-accent-1-content">...</div>
+<div class="bg-brand">...</div>
+```
+
+### 2. ISA-Prefixed Typography
+
+Always use ISA typography classes instead of arbitrary font sizes:
+- **Headings**: `.isa-text-heading-1-bold`, `.isa-text-heading-2-bold`, `.isa-text-heading-3-bold`
+- **Subtitles**: `.isa-text-subtitle-1-bold`, `.isa-text-subtitle-2-bold`
+- **Body**: `.isa-text-body-1-regular`, `.isa-text-body-1-bold`, `.isa-text-body-2-regular`, `.isa-text-body-2-bold`
+- **Captions**: `.isa-text-caption-regular`, `.isa-text-caption-bold`, `.isa-text-caption-caps`
+
+### 3. Responsive Design with Breakpoint Service
+
+Prefer the breakpoint service from `@isa/ui/layout` for reactive breakpoint detection:
+
+```typescript
+import { breakpoint, Breakpoint } from '@isa/ui/layout';
+
+// In component
+isDesktop = breakpoint([Breakpoint.Desktop, Breakpoint.DekstopL, Breakpoint.DekstopXL]);
+```
+
+```html
+@if (isDesktop()) {
+  <div class="desktop-layout">...</div>
+}
+```
+
+Only use Tailwind breakpoint utilities (`isa-desktop:`, `isa-desktop-l:`, `isa-desktop-xl:`) when the breakpoint service is not appropriate (e.g., pure CSS solutions).
+
+## Quick Reference
+
+### Typography Selection Guide
+
+**Headings**:
+- Large hero text: `.isa-text-heading-1-bold` (60px)
+- Section headers: `.isa-text-heading-2-bold` (48px)
+- Subsection headers: `.isa-text-heading-3-bold` (40px)
+
+**Subtitles**:
+- Prominent subtitles: `.isa-text-subtitle-1-bold` (28px)
+- Section labels: `.isa-text-subtitle-2-bold` (16px, uppercase)
+
+**Body Text**:
+- Standard text: `.isa-text-body-1-regular` (16px)
+- Emphasized text: `.isa-text-body-1-bold` (16px)
+- Smaller text: `.isa-text-body-2-regular` (14px)
+- Smaller emphasized: `.isa-text-body-2-bold` (14px)
+
+**Captions**:
+- Small labels: `.isa-text-caption-regular` (12px)
+- Small emphasized: `.isa-text-caption-bold` (12px)
+- Uppercase labels: `.isa-text-caption-caps` (12px, uppercase)
+
+Each variant has `-big` and `-xl` responsive sizes for larger breakpoints.
+
+### Color Selection Guide
+
+**Always use `isa-*` prefixed colors. Other colors are deprecated.**
+
+**Status/Accent Colors**:
+- Success/Confirm: `bg-isa-accent-green`
+- Error/Danger: `bg-isa-accent-red`
+- Primary/Info: `bg-isa-accent-blue`
+
+**Brand Secondary Colors** (100 = lightest, 900 = darkest):
+- Very light: `bg-isa-secondary-100`, `bg-isa-secondary-200`
+- Light: `bg-isa-secondary-300`, `bg-isa-secondary-400`
+- Medium: `bg-isa-secondary-500`, `bg-isa-secondary-600`
+- Dark: `bg-isa-secondary-700`, `bg-isa-secondary-800`
+- Very dark: `bg-isa-secondary-900`
+
+**Neutral UI** (100 = lightest, 900 = darkest):
+- Light backgrounds: `bg-isa-neutral-100`, `bg-isa-neutral-200`, `bg-isa-neutral-300`
+- Medium backgrounds: `bg-isa-neutral-400`, `bg-isa-neutral-500`, `bg-isa-neutral-600`
+- Dark backgrounds/text: `bg-isa-neutral-700`, `bg-isa-neutral-800`, `bg-isa-neutral-900`
+
+**Basic Colors**:
+- White: `bg-isa-white`, `text-isa-white`
+- Black: `bg-isa-black`, `text-isa-black`
+
+**Example Usage**:
+```html
+<!-- Status indicators -->
+<div class="bg-isa-accent-green text-isa-white">Success</div>
+<div class="bg-isa-accent-red text-isa-white">Error</div>
+
+<!-- Backgrounds -->
+<div class="bg-isa-neutral-100">Light surface</div>
+<div class="bg-isa-secondary-600 text-isa-white">Brand element</div>
+```
+
+### Spacing Patterns
+
+**Component Padding**:
+- Cards: `p-card` (20px) or `p-5` (1.25rem)
+- General spacing: `p-4` (1rem), `p-6` (1.5rem), `p-8` (2rem)
+- Tight spacing: `p-2` (0.5rem), `p-3` (0.75rem)
+
+**Gap/Grid Spacing**:
+- Tight spacing: `gap-2` (0.5rem), `gap-3` (0.75rem)
+- Medium spacing: `gap-4` (1rem), `gap-6` (1.5rem)
+- Wide spacing: `gap-8` (2rem), `gap-10` (2.5rem)
+- Split screen: `gap-split-screen`
+
+**Note**: Prefer Tailwind's standard rem-based spacing (e.g., `p-4`, `gap-6`) over pixel-based utilities (`px-*`) for better scalability and accessibility.
+
+**Layout Heights**:
+- Split screen tablet: `h-split-screen-tablet`
+- Split screen desktop: `h-split-screen-desktop`
+
+### Z-Index Layering
+
+Apply semantic z-index values for proper layering:
+- Dropdowns: `z-dropdown` (50)
+- Sticky elements: `z-sticky` (100)
+- Fixed elements: `z-fixed` (150)
+- Modal backdrops: `z-modalBackdrop` (200)
+- Modals: `z-modal` (250)
+- Popovers: `z-popover` (300)
+- Tooltips: `z-tooltip` (350)
+
+## Common Styling Patterns
+
+**Important**: These are examples for when UI components don't exist. Always check `@isa/ui/*` libraries first!
+
+### Layout Spacing (Use Tailwind)
+```html
+<!-- Container with padding -->
+<div class="p-6">
+  <h2 class="isa-text-heading-2-bold mb-4">Section Title</h2>
+  <div class="flex flex-col gap-4">
+    <!-- Content items -->
+  </div>
+</div>
+```
+
+### Grid Layout (Use Tailwind)
+```html
+<!-- Responsive grid with gap -->
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+  <!-- Grid items -->
+</div>
+```
+
+### Card Layout (Prefer @isa/ui/cards if available)
+```html
+<div class="bg-isa-white p-5 rounded shadow-card">
+  <h3 class="isa-text-subtitle-1-bold mb-4">Card Title</h3>
+  <p class="isa-text-body-1-regular">Card content...</p>
+</div>
+```
+
+### Form Group (Prefer @isa/ui/forms if available)
+```html
+<div class="flex flex-col gap-2">
+  <label class="isa-text-body-2-semibold text-isa-black">Field Label</label>
+  <!-- Use component from @isa/ui/inputs if available -->
+  <input class="shadow-input rounded border border-isa-neutral-400 p-2.5" />
+</div>
+```
+
+### Button Group (Use @isa/ui/buttons)
+```typescript
+// ✅ Preferred - Use component library
+import { ButtonComponent } from '@isa/ui/buttons';
+```
+
+```html
+<div class="flex gap-4">
+  <!-- Use actual button components from @isa/ui/buttons -->
+  <isa-button variant="primary">Save</isa-button>
+  <isa-button variant="secondary">Cancel</isa-button>
+</div>
+```
+
+### Split Screen Layout (Use Tailwind)
+```html
+<div class="grid grid-cols-split-screen gap-split-screen h-split-screen-desktop">
+  <aside class="bg-isa-neutral-100 p-5">Sidebar</aside>
+  <main class="bg-isa-white p-8">Content</main>
+</div>
+```
+
+## Resources
+
+### references/design-system.md
+
+Comprehensive reference documentation containing:
+- Complete color palette with hex values
+- All typography class specifications
+- Button plugin CSS custom properties
+- Spacing and layout utilities
+- Border radius, shadows, and z-index values
+- Custom variants and best practices
+
+Load this reference when:
+- Looking up specific hex color values
+- Determining exact typography specifications
+- Understanding button CSS custom properties
+- Finding less common utility classes
+- Verifying available shadow or radius utilities
+
+## Best Practices
+
+1. **Component libraries first**: Always check `libs/ui/**` before writing custom Tailwind styles
+2. **ISA-prefixed colors only**: Always use `isa-*` colors (e.g., `bg-isa-accent-red`, `text-isa-neutral-700`)
+3. **Use rem over px**: Prefer Tailwind's default rem-based spacing (e.g., `p-4`, `gap-6`) over pixel-based utilities
+4. **Typography system**: Never use arbitrary font sizes - always use `.isa-text-*` classes
+5. **Breakpoints**: Use breakpoint service from `@isa/ui/layout` for logic
+6. **Z-index**: Always use semantic z-index utilities, never arbitrary values
+7. **Consistency**: Always use design system utilities instead of arbitrary values
+
+## Anti-Patterns to Avoid
+
+❌ **Don't** use deprecated colors (backwards compatibility only):
+```html
+<div class="bg-accent-1">...</div> <!-- Wrong - deprecated -->
+<div class="bg-brand">...</div> <!-- Wrong - deprecated -->
+<div class="bg-surface">...</div> <!-- Wrong - deprecated -->
+<div class="bg-isa-secondary-600">...</div> <!-- Correct -->
+```
+
+❌ **Don't** use arbitrary values when utilities exist:
+```html
+<p class="text-[16px]">Text</p> <!-- Wrong -->
+<p class="isa-text-body-1-regular">Text</p> <!-- Correct -->
+```
+
+❌ **Don't** hardcode hex colors:
+```html
+<div class="bg-[#DF001B]">...</div> <!-- Wrong -->
+<div class="bg-isa-accent-red">...</div> <!-- Correct -->
+```
+
+❌ **Don't** recreate components with Tailwind:
+```html
+<button class="btn btn-accent-1">...</button> <!-- Wrong - use @isa/ui/buttons -->
+<isa-button variant="primary">...</isa-button> <!-- Correct -->
+```
+
+❌ **Don't** use arbitrary z-index:
+```html
+<div class="z-[999]">...</div> <!-- Wrong -->
+<div class="z-modal">...</div> <!-- Correct -->
+```
+
+✅ **Do** leverage the component libraries and ISA design system for consistency and maintainability.

.claude/skills/tailwind/references/design-system.md

@@ -0,0 +1,173 @@
+# ISA Tailwind Design System Reference
+
+This document provides a comprehensive reference for the ISA-specific Tailwind CSS design system used throughout the ISA-Frontend project.
+
+## Custom Breakpoints
+
+### ISA Breakpoints (Preferred)
+- `isa-desktop`: 1024px
+- `isa-desktop-l`: 1440px
+- `isa-desktop-xl`: 1920px
+
+**Note**: Prefer using the breakpoint service from `@isa/ui/layout` for reactive breakpoint detection instead of CSS-only solutions.
+
+## Z-Index System
+
+Predefined z-index values for consistent layering:
+
+- `z-dropdown`: 50
+- `z-sticky`: 100
+- `z-fixed`: 150
+- `z-modalBackdrop`: 200
+- `z-modal`: 250
+- `z-popover`: 300
+- `z-tooltip`: 350
+
+**Usage**: `z-modal`, `z-tooltip`, etc.
+
+## Color Palette
+
+**IMPORTANT: Only use `isa-*` prefixed colors in new code.** Other colors listed below exist only for backwards compatibility and should NOT be used.
+
+### ISA Brand Colors (Use These)
+
+#### Accent Colors
+- `isa-accent-red`: #DF001B
+- `isa-accent-blue`: #354ACB
+- `isa-accent-green`: #26830C
+
+#### Accent Color Shades
+- `isa-shades-red-600`: #C60018
+- `isa-shades-red-700`: #B30016
+
+#### Secondary Colors (100-900 scale)
+- `isa-secondary-100`: #EBEFFF (lightest)
+- `isa-secondary-200`: #B9C4FF
+- `isa-secondary-300`: #8FA0FF
+- `isa-secondary-400`: #6E82FE
+- `isa-secondary-500`: #556AEB
+- `isa-secondary-600`: #354ACB
+- `isa-secondary-700`: #1D2F99
+- `isa-secondary-800`: #0C1A66
+- `isa-secondary-900`: #020A33 (darkest)
+
+#### Neutral Colors (100-900 scale)
+- `isa-neutral-100`: #F8F9FA (lightest)
+- `isa-neutral-200`: #E9ECEF
+- `isa-neutral-300`: #DEE2E6
+- `isa-neutral-400`: #CED4DA
+- `isa-neutral-500`: #A5ACB4
+- `isa-neutral-600`: #6C757D
+- `isa-neutral-700`: #495057
+- `isa-neutral-800`: #343A40
+- `isa-neutral-900`: #212529 (darkest)
+
+#### Basic Colors
+- `isa-black`: #000000
+- `isa-white`: #FFFFFF
+
+**Usage**: `bg-isa-accent-red`, `text-isa-secondary-600`, `border-isa-neutral-400`
+
+### Deprecated Colors (DO NOT USE - Backwards Compatibility Only)
+
+The following colors exist in the codebase for backwards compatibility. **DO NOT use them in new code.**
+
+#### Deprecated Semantic Colors
+- `background`, `background-content`
+- `surface`, `surface-content`, `surface-2`, `surface-2-content`
+- `components-menu`, `components-menu-content`, `components-menu-seperator`, `components-menu-hover`
+- `components-button`, `components-button-content`, `components-button-light`, `components-button-hover`
+- `accent-1`, `accent-1-content`, `accent-1-hover`, `accent-1-active`
+- `accent-2`, `accent-2-content`, `accent-2-hover`, `accent-2-active`
+
+#### Deprecated Named Colors
+- `warning`, `brand`
+- `customer`, `font-customer`, `active-customer`, `inactive-customer`, `disabled-customer`
+- `branch`, `font-branch`, `active-branch`, `inactive-branch`, `disabled-branch`
+- `accent-teal`, `accent-green`, `accent-orange`, `accent-darkblue`
+- `ucla-blue`, `wild-blue-yonder`, `dark-cerulean`, `cool-grey`
+- `glitter`, `munsell`, `onyx`, `dark-goldenrod`, `cadet`, `cadet-blue`
+- `control-border`, `background-liste`
+
+**These colors should NOT be used in new code. Use `isa-*` prefixed colors instead.**
+
+## Typography
+
+### ISA Typography Utilities
+
+All typography utilities use **Open Sans** font family.
+
+#### Headings
+
+**Heading 1 Bold** (`.isa-text-heading-1-bold`):
+- Size: 3.75rem (60px)
+- Weight: 700
+- Line Height: 4.5rem (72px)
+- Letter Spacing: 0.02813rem
+
+**Heading 2 Bold** (`.isa-text-heading-2-bold`):
+- Size: 3rem (48px)
+- Weight: 700
+- Line Height: 4rem (64px)
+
+**Heading 3 Bold** (`.isa-text-heading-3-bold`):
+- Size: 2.5rem (40px)
+- Weight: 700
+- Line Height: 3rem (48px)
+
+#### Subtitles
+
+**Subtitle 1 Regular** (`.isa-text-subtitle-1-regular`):
+- Size: 1.75rem (28px)
+- Weight: 400
+- Line Height: 2.5rem (40px)
+
+**Subtitle 1 Bold** (`.isa-text-subtitle-1-bold`):
+- Size: 1.75rem (28px)
+- Weight: 700
+- Line Height: 2.5rem (40px)
+
+**Subtitle 2 Bold** (`.isa-text-subtitle-2-bold`):
+- Size: 1rem (16px)
+- Weight: 700
+- Line Height: 1.5rem (24px)
+- Letter Spacing: 0.025rem
+- Text Transform: UPPERCASE
+
+#### Body Text
+
+**Body 1 Variants** (1rem / 16px base):
+- `.isa-text-body-1-bold`: Weight 700, Line Height 1.5rem
+- `.isa-text-body-1-bold-big`: Size 1.25rem, Weight 700, Line Height 1.75rem
+- `.isa-text-body-1-bold-xl`: Size 1.375rem, Weight 700, Line Height 2.125rem
+- `.isa-text-body-1-semibold`: Weight 600, Line Height 1.5rem
+- `.isa-text-body-1-regular`: Weight 400, Line Height 1.5rem
+- `.isa-text-body-1-regular-big`: Size 1.25rem, Weight 400, Line Height 1.75rem
+- `.isa-text-body-1-regular-xl`: Size 1.375rem, Weight 400, Line Height 2.125rem
+
+**Body 2 Variants** (0.875rem / 14px base):
+- `.isa-text-body-2-bold`: Weight 700, Line Height 1.25rem
+- `.isa-text-body-2-bold-big`: Size 1.125rem, Weight 700, Line Height 1.625rem
+- `.isa-text-body-2-bold-xl`: Size 1.25rem, Weight 700, Line Height 1.75rem
+- `.isa-text-body-2-semibold`: Weight 600, Line Height 1.25rem
+- `.isa-text-body-2-regular`: Weight 400, Line Height 1.25rem
+- `.isa-text-body-2-regular-big`: Size 1.125rem, Weight 400, Line Height 1.625rem
+- `.isa-text-body-2-regular-xl`: Size 1.125rem, Weight 400, Line Height 1.75rem
+
+#### Caption Text
+
+**Caption Variants** (0.75rem / 12px base):
+- `.isa-text-caption-bold`: Weight 700, Line Height 1rem
+- `.isa-text-caption-bold-big`: Size 0.875rem, Weight 700, Line Height 1.25rem
+- `.isa-text-caption-bold-xl`: Size 0.875rem, Weight 700, Line Height 1.25rem
+- `.isa-text-caption-caps`: Weight 700, Line Height 1rem, UPPERCASE
+- `.isa-text-caption-regular`: Weight 400, Line Height 1rem
+- `.isa-text-caption-regular-big`: Size 0.875rem, Weight 400, Line Height 1.25rem
+- `.isa-text-caption-regular-xl`: Size 0.875rem, Weight 400, Line Height 1.25rem
+
+## Best Practices
+
+1. **Use ISA-prefixed utilities**: Prefer `isa-text-*`, `isa-accent-*`, etc. for consistency
+2. **Follow typography system**: Use the predefined typography classes instead of custom font sizes
+3. **Use breakpoint service**: Import from `@isa/ui/layout` for reactive breakpoint detection
+5. **Z-index system**: Always use predefined z-index utilities for layering

.gitignore

@@ -75,8 +75,8 @@ storybook-static
 vite.config.*.timestamp*
 vitest.config.*.timestamp*
 
-.mcp.json
-.memory.json
-
 nx.instructions.md
 CLAUDE.md
+*.pyc
+.vite
+reports/

.mcp.json

@@ -0,0 +1,22 @@
+{
+  "mcpServers": {
+    "context7": {
+      "type": "http",
+      "url": "https://mcp.context7.com/mcp"
+    },
+    "nx-mcp": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["nx-mcp@latest"]
+    },
+    "angular-mcp": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["@angular/cli", "mcp"]
+    },
+    "figma-desktop": {
+      "type": "http",
+      "url": "http://127.0.0.1:3845/mcp"
+    }
+  }
+}

.nvmrc

@@ -0,0 +1 @@
+v22.20.0

CHANGELOG.md

@@ -0,0 +1,139 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+### Added
+- (checkout-reward) Disable and hide delivery options for reward feature purchases
+- (purchase-options) Add disabledPurchaseOptions with flexible visibility control
+- (reward-catalog) Pre-select in-store option for reward purchases
+- (checkout) Complete reward order confirmation with reusable product info component
+- (checkout) Implement reward order confirmation UI and confirmation list item action card component
+- (checkout) Add reward order confirmation feature with schema migrations
+- (stock-info) Implement request batching with BatchingResource
+- (crm) Introduce PrimaryCustomerCardResource and format-name utility
+- Angular template skill for modern template patterns
+- Tailwind ISA design system skill
+
+### Changed
+- (checkout-reward) Implement hierarchical grouping on rewards order confirmation
+- (checkout) Move reward selection helpers to data-access for reusability
+- (common) Add validation for notification channel flag combinations
+- (customer) Merge continueReward and continue methods into unified flow
+- Comprehensive CLAUDE.md overhaul with library reference system
+- Add Claude Code agents, commands, and skills infrastructure
+
+### Fixed
+- (checkout) Resolve currency constraint violations in price handling
+- (checkout) Add complete price structure for reward delivery orders
+- (checkout) Correct reward output desktop/mobile layout and add insufficient stock warnings
+- (customer-card) Implement navigation flow from customer card to reward search
+- (purchase-options) Correct customer features mapping
+- (reward-order-confirmation) Group items by item-level delivery type
+- (reward-order-confirmation) Correct typo and add loading state to collect button
+- (reward-confirmation) Improve action card visibility and status messages
+- (reward-selection-pop-up) Fix width issue
+
+## [4.2] - 2025-10-23
+
+### Added
+- (checkout-reward) Add reward checkout feature (#5258)
+- (crm) Add crm-data-access library with initial component and tests
+- (shared-filter) Add canApply input to filter input menu components
+- Architecture Decision Records (ADRs) documentation
+- Error handling and validation infrastructure enhancements
+
+### Changed
+- (tabs) Implement backwards compatibility for Process → Tabs migration
+- (notifications) Update remission path logic to use Date.now()
+- (customer-card) Deactivate Create Customer with Card feature
+- Update package.json and recreate package-lock.json for npm@11.6
+- Disable markdown format on save in VSCode settings
+
+### Fixed
+- (process) Simulate "old tab logic" for compatibility
+- (tabs) Correct singleton tabs interaction with new tab areas
+- (remission-list) Prioritize reload trigger over exact search
+- (remission-list-item, remission-list-empty-state) Improve empty state handling
+
+## [4.1] - 2025-10-06
+
+### Added
+- (isa-app) Migrate remission navigation to tab-based routing system
+- (utils) Add scroll-top button component
+- (remission-list, empty-state) Add comprehensive empty state handling with user guidance
+- (remission) Ensure package assignment before completing return receipts
+- (libs-ui-dialog-feedback-dialog) Add auto-close functionality with configurable delay
+- (old-ui-tooltip) Add pointer-events-auto to tooltip panel
+
+### Changed
+- (remission-list) Improve item update handling and UI feedback
+- (remission-list, search-item-to-remit-dialog) Simplify dialog flow by removing intermediate steps
+
+### Fixed
+- (remission-list) Ensure list reload after search dialog closes
+- (remission-list) Auto-select single search result when remission started
+- (remission-list, remission-return-receipt-details, libs-dialog) Improve error handling with dedicated error dialog
+- (remission-error) Simplify error handling in remission components
+- (remission) Filter search results by stock availability and display stock info
+- (remission-list, remission-data-access) Add impediment comment and remaining quantity tracking
+- (remission-quantity-and-reason-item) Correct quantity input binding and dropdown behavior
+- (remission-quantity-reason) Correct dropdown placeholder and remove hardcoded values
+- (remission-filter-label) Improve filter button label display and default text
+- (remission-data-access) Remove automatic date defaulting in fetchRemissions
+- (remission-shared-search-item-to-remit-dialog) Display context-aware feedback on errors
+- (isa-app-shell) Improve navigation link targeting for remission sub-routes
+- (oms-data-access) Adjust tolino return eligibility logic for display damage
+- (ui-input-controls-dropdown) Prevent multiple dropdowns from being open simultaneously
+
+## [4.0] - 2025-07-23
+
+### Added
+- (oms-data-access) Initial implementation of OMS data access layer
+- (oms-return-review) Implement return review feature
+- (print-button) Implement reusable print button component with service integration
+- (scanner) Add full-screen scanner styles and components
+- (product-router-link) Add shared product router link directive and builder
+- (tooltip) Add tooltip component and directive with customizable triggers
+- (shared-scanner) Move scanner to shared/scanner location
+- (common-data-access) Add takeUntil operators for keydown events
+
+### Changed
+- (oms-return-review, oms-return-summary) Fix return receipt mapping and ensure process completion
+- (ui-tooltip) Remove native title attribute from tooltip icon host
+- (oms-return-details) Improve layout and styling of order group item controls
+- (searchbox) Improve formatting and add showScannerButton getter
+- (libs-ui-item-rows) Improve data value wrapping and label sizing
+- (shared-filter, search-bar, search-main) Add E2E data attributes for filtering and search
+
+### Fixed
+- (return-details) Update email validation and improve error handling
+- (return-details) Correct storage key retrieval in ReturnDetailsStore
+- (return-details) Small layout fix (#5171)
+- (isa-app-moment-locale) Correct locale initialization for date formatting
+- (oms-return-search) Fix display and logic issues in return search results
+- (oms-return-search) Resolve issues in return search result item rendering
+- (oms-task-list-item) Address styling and layout issues in return task list
+- (ui-dropdown) Improve dropdown usability and conditional rendering
+- (return-search) Correct typo in tooltip content
+- (libs-shared-filter) Improve date range equality for default filter inputs
+
+## [3.4] - 2025-02-10
+
+_Earlier versions available in git history. Detailed changelog entries start from version 4.0._
+
+### Historical Versions
+
+Previous versions (3.3, 3.2, 3.1, 3.0, 2.x, 1.x) are available in the git repository.
+For detailed information about changes in these versions, please refer to:
+- Git tags: `git tag --sort=-creatordate`
+- Commit history: `git log <tag-from>..<tag-to>`
+- Pull requests in the repository
+
+---
+
+_This changelog was initially generated from git commit history. Future entries will be maintained manually following the Keep a Changelog format._

CLAUDE.md

@@ -1,270 +1,30 @@
 # CLAUDE.md
 
-> **Last Updated:** 2025-10-22
-> **Angular Version:** 20.1.2
-> **Nx Version:** 21.3.2
-> **Node.js:** ≥22.0.0
-> **npm:** ≥10.0.0
+This file contains meta-instructions for how Claude should work with the ISA-Frontend codebase.
 
 ## 🔴 CRITICAL: Mandatory Agent Usage
 
-**You MUST use these subagents for ALL research tasks:**
+**You MUST use these subagents for ALL research and knowledge management tasks:**
 - **`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
-- **Direct tools (Read/Bash)**: ONLY for single specific files or commands
 
 **Violations of this rule degrade performance and context quality. NO EXCEPTIONS.**
 
-## Project Overview
+## Communication Guidelines
 
-This is a sophisticated Angular 20.1.2 monorepo managed by Nx 21.3.2. The main application is `isa-app`, a comprehensive inventory and returns management system for retail/e-commerce operations. The system handles complex workflows including order management (OMS), returns processing (remission), customer relationship management (CRM), product cataloging, and checkout/reward systems.
+**Keep answers concise and focused:**
+- 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
 
-## Architecture
+## Researching and Investigating the Codebase
 
-### Monorepo Structure
-- **apps/isa-app**: Main Angular application
-- **libs/**: Reusable libraries organized by domain and type
-  - **core/**: Core utilities (config, logging, storage, tabs, navigation)
-  - **common/**: Shared utilities (data-access, decorators, print)
-  - **ui/**: UI component libraries (buttons, dialogs, inputs, etc.)
-  - **shared/**: Shared domain components (filter, scanner, product components)
-  - **oms/**: Order Management System features and utilities
-  - **remission/**: Remission/returns management features
-  - **catalogue/**: Product catalogue functionality
-  - **utils/**: General utilities (validation, scroll position, parsing)
-  - **icons/**: Icon library
-- **generated/swagger/**: Auto-generated API client code from OpenAPI specs
+**🔴 MANDATORY: You MUST use subagents for research. Direct file reading/searching.**
 
-### Key Architectural Patterns
-- **Domain-Driven Design**: Clear domain boundaries with dedicated modules (OMS, remission, CRM, catalogue, checkout)
-- **Layered Architecture**: Strict dependency hierarchy (Feature → Shared/UI → Data Access → Infrastructure)
-- **Standalone Components**: All new components use Angular standalone architecture with explicit imports
-- **Feature Libraries**: Domain features organized as separate libraries (e.g., `oms-feature-return-search`, `remission-feature-remission-list`)
-- **Data Access Layer**: Separate data-access libraries for each domain with NgRx Signals stores
-- **Shared UI Components**: 17 dedicated UI component libraries with design system integration
-- **Generated API Clients**: 10 auto-generated Swagger/OpenAPI clients with post-processing pipeline
-- **Path Aliases**: Comprehensive TypeScript path mapping (`@isa/domain/layer/feature`)
-- **Component Prefixes**: Domain-specific prefixes (OMS: `oms-feature-*`, Remission: `remi-*`, UI: `ui-*`)
-- **Modern State Management**: NgRx Signals with entities, session persistence, and reactive patterns
-
-## Common Development Commands
-
-### Essential Commands (Project-Specific)
-```bash
-# Start development server with SSL (required for authentication flows)
-npm start
-
-# Run tests for all libraries (excludes main app)
-npm test
-
-# Build for development
-npm run build
-
-# Build for production
-npm run build-prod
-
-# Regenerate all API clients from Swagger/OpenAPI specs
-npm run generate:swagger
-
-# Regenerate library reference documentation
-npm run docs:generate
-
-# Format code with Prettier
-npm run prettier
-
-# Format only staged files (pre-commit hook)
-npm run pretty-quick
-
-# Run CI tests with coverage
-npm run ci
-```
-
-### Standard Nx Commands
-For complete command reference, see [Nx Documentation](https://nx.dev/reference/commands).
-
-**Common patterns:**
-```bash
-# Test specific library (always use --skip-nx-cache)
-npx nx test <project-name> --skip-nx-cache
-
-# Lint a project
-npx nx lint <project-name>
-
-# Show project dependencies
-npx nx graph
-
-# Run tests for affected projects (CI/CD)
-npx nx affected:test --skip-nx-cache
-```
-
-**Important:** Always use `--skip-nx-cache` flag when running tests to ensure fresh results.
-
-## Testing Framework
-
-> **Last Reviewed:** 2025-10-22
-> **Status:** Migration in Progress (Jest → Vitest)
-
-### Current Setup (Migration in Progress)
-- **Jest**: 40 libraries (65.6% - legacy/existing code)
-- **Vitest**: 21 libraries (34.4% - new standard)
-- All formal libraries now have test executors configured
-
-### Testing Strategy
-- **New libraries**: Use Vitest + Angular Testing Utilities (TestBed, ComponentFixture)
-- **Legacy libraries**: Continue with Jest + Spectator until migrated
-- **Advanced mocking**: Use ng-mocks for complex scenarios
-
-### Key Requirements
-- Test files must end with `.spec.ts`
-- Use AAA pattern (Arrange-Act-Assert)
-- **Always include E2E attributes**: `data-what`, `data-which`, and dynamic `data-*` in HTML templates
-- Mock external dependencies appropriately for your framework
-
-**For detailed testing guidelines, framework comparison, and migration instructions, see [`docs/guidelines/testing.md`](docs/guidelines/testing.md).**
-
-**References:**
-- [Jest Documentation](https://jestjs.io/)
-- [Vitest Documentation](https://vitest.dev/)
-- [Angular Testing Guide](https://angular.io/guide/testing)
-- [Spectator](https://ngneat.github.io/spectator/)
-
-## State Management
-- **NgRx Signals**: Primary state management with modern functional approach using `signalStore()`
-- **Entity Management**: Uses `withEntities()` for normalized data storage
-- **Session Persistence**: State persistence with `withStorage()` using SessionStorageProvider
-- **Reactive Methods**: `rxMethod()` with `takeUntilKeydownEscape()` for user-cancellable operations
-- **Custom RxJS Operators**: Specialized operators like `takeUntilAborted()`, `takeUntilKeydown()`
-- **Error Handling**: `tapResponse()` for handling success/error states in stores
-- **Lifecycle Hooks**: `withHooks()` for cleanup and initialization (e.g., orphaned entity cleanup)
-- **Navigation State**: Use `@isa/core/navigation` for temporary navigation context (return URLs, wizard state) instead of query parameters
-
-## Styling and Design System
-- **Framework**: [Tailwind CSS](https://tailwindcss.com/docs) with extensive ISA-specific customization
-- **Custom Breakpoints**: `isa-desktop` (1024px), `isa-desktop-l` (1440px), `isa-desktop-xl` (1920px)
-- **Brand Color System**: `isa-*` color palette with semantic naming
-- **Custom Tailwind Plugins** (7): button, typography, menu, label, input, section, select-bullet
-- **Typography System**: 14 custom utilities (`.isa-text-heading-1-bold`, `.isa-text-body-2-regular`, etc.)
-- **UI Component Libraries**: 17 specialized libraries with consistent APIs (see Library Reference)
-- **Storybook**: Component documentation and development at `npm run storybook`
-
-### Responsive Design with Breakpoint Service
-Use `@isa/ui/layout` for reactive breakpoint detection instead of CSS-only solutions:
-
-```typescript
-import { breakpoint, Breakpoint } from '@isa/ui/layout';
-
-// Detect screen size reactively
-isDesktop = breakpoint([Breakpoint.Desktop, Breakpoint.DekstopL, Breakpoint.DekstopXL]);
-```
-
-**Available Breakpoints:**
-- `Tablet`: max-width: 1279px (mobile/tablet)
-- `Desktop`: 1280px - 1439px (standard desktop)
-- `DekstopL`: 1440px - 1919px (large desktop)
-- `DekstopXL`: 1920px+ (extra large)
-
-**Template Usage:**
-```html
-@if (isDesktop) {
-  <!-- Desktop-specific content -->
-}
-```
-
-**Why:** Prefer breakpoint service over CSS-only (hidden/flex) for SSR and maintainability.
-
-## API Integration and Data Access
-
-**Generated Swagger Clients:** 10 auto-generated TypeScript clients in `generated/swagger/`
-- Available APIs: availability-api, cat-search-api, checkout-api, crm-api, eis-api, inventory-api, isa-api, oms-api, print-api, wws-api
-- Tool: [ng-swagger-gen](https://www.npmjs.com/package/ng-swagger-gen) with custom per-API configuration
-- Post-processing: Automatic Unicode cleanup via `tools/fix-files.js`
-- Regenerate: `npm run generate:swagger`
-
-**Architecture Pattern:**
-- Business logic services wrap generated API clients
-- Type safety: TypeScript + [Zod](https://zod.dev/) schema validation
-- Error handling: Global HTTP interceptor with automatic re-authentication
-- Modern injection: Uses `inject()` function with private field pattern
-- Request cancellation: Built-in via AbortSignal and custom RxJS operators (`takeUntilAborted()`, `takeUntilKeydown()`)
-
-**Data Access Libraries:** See Library Reference section for domain-specific implementations (`@isa/[domain]/data-access`).
-
-## Build Configuration
-- **Framework**: Angular with TypeScript (see `package.json` for current versions)
-- **Requirements**:
-  - Node.js >= 22.0.0 (specified in package.json engines)
-  - npm >= 10.0.0 (specified in package.json engines)
-- **Build System**: Nx monorepo with Vite for testing (Vitest)
-- **Development Server**: Serves with SSL by default (required for authentication flows)
-
-## Important Conventions and Patterns
-
-### Library Organization
-- **Naming Pattern**: `[domain]-[layer]-[feature]` (e.g., `oms-feature-return-search`, `ui-buttons`)
-- **Path Aliases**: `@isa/[domain]/[layer]/[feature]` (e.g., `@isa/oms/data-access`, `@isa/ui/buttons`)
-- **Project Names**: Found in each library's `project.json` file, following consistent naming
-
-### Component Architecture
-- **Standalone Components**: All new components must be standalone with explicit imports
-- **Component Prefixes**: Domain-specific prefixes for clear identification
-  - OMS features: `oms-feature-*` (e.g., `oms-feature-return-search-main`)
-  - Remission features: `remi-*`
-  - UI components: `ui-*`
-  - Core utilities: `core-*`
-- **Signal-based Inputs**: Use Angular signals (`input()`, `computed()`) for reactive properties
-- **Host Binding**: Dynamic CSS classes via Angular host properties
-
-### Dependency Rules
-- **Unidirectional Dependencies**: Feature → Shared/UI → Data Access → Infrastructure
-- **Import Boundaries**: Use path aliases, avoid relative imports across domain boundaries
-- **Generated API Imports**: Import from `@generated/swagger/[api-name]` for API clients
-
-### Code Quality
-- **Modern Angular Patterns**: Prefer `inject()` over constructor injection
-- **Type Safety**: Use Zod schemas for runtime validation alongside TypeScript
-- **Error Handling**: Custom error classes with specific error codes
-- **E2E Testing**: Always include `data-what` and `data-which` attributes in templates
-
-## Development Workflow and Best Practices
-
-### Project Conventions
-- **Default Branch**: `develop` (not main) - Always create PRs against develop
-- **Commit Style**: [Conventional commits](https://www.conventionalcommits.org/) without co-author tags
-- **Nx Cache**: Always use `--skip-nx-cache` for tests to ensure fresh results
-- **Testing**: New libraries use Vitest + Angular Testing Utilities; legacy use Jest + Spectator
-- **E2E Attributes**: Always include `data-what`, `data-which`, and dynamic `data-*` in templates
-- **Design System**: Use ISA-specific Tailwind utilities (`isa-accent-*`, `isa-text-*`)
-
-### Code Quality Tools
-- **Linting**: [ESLint](https://eslint.org/) with Nx dependency checks
-- **Formatting**: [Prettier](https://prettier.io/) with Husky + lint-staged pre-commit hooks
-- **Type Safety**: [TypeScript](https://www.typescriptlang.org/) strict mode + [Zod](https://zod.dev/) validation
-- **Bundle Size**: Monitor carefully (2MB warning, 5MB error for main bundle)
-
-### Nx Workflow Tips
-- Use `npx nx graph` to visualize dependencies
-- Use `npx nx affected:test` for CI/CD optimization
-- Reference: [Nx Documentation](https://nx.dev/getting-started/intro)
-
-## Development Notes and Guidelines
-
-### Getting Started
-- **Application Startup**: Only `isa-app` can be started - it's the main application entry point
-- **SSL Development**: The development server runs with SSL by default (`npm start`), which is crucial for production-like authentication flows
-- **Node Requirements**: Ensure Node.js ≥22.0.0 and npm ≥10.0.0 before starting development
-- **First-Time Setup**: After cloning, run `npm install` then `npm start` to verify everything works
-
-### Essential Documentation References
-- **Testing Guidelines**: Review `docs/guidelines/testing.md` before writing any tests - it covers the Jest→Vitest migration, Spectator→Angular Testing Utilities transition, and E2E attribute requirements
-- **Code Review Standards**: Follow the structured review process in `.github/review-instructions.md` with categorized feedback (🚨 Critical, ❗ Minor, ⚠️ Warnings, ✅ Good Practices)
-- **E2E Testing Requirements**: Always include `data-what`, `data-which`, and dynamic `data-*` attributes in HTML templates - these are essential for automated testing by QA colleagues
-
-### Researching and Investigating the Codebase
-
-**🔴 MANDATORY: You MUST use subagents for research. Direct file reading/searching is FORBIDDEN except for single specific files.**
-
-#### Required Agent Usage
+### Required Agent Usage
 
 | Task Type | Required Agent | Escalation Path |
 |-----------|---------------|-----------------|
@@ -274,7 +34,7 @@ isDesktop = breakpoint([Breakpoint.Desktop, Breakpoint.DekstopL, Breakpoint.Deks
 | **Implementation Analysis** | `Explore` | Multiple file analysis |
 | **Single Specific File** | Read tool directly | No agent needed |
 
-#### Documentation Research System (Two-Tier)
+### Documentation Research System (Two-Tier)
 
 1. **ALWAYS start with `docs-researcher`** (Haiku, 30-120s) for any documentation need
 2. **Auto-escalate to `docs-researcher-advanced`** (Sonnet, 2-7min) when:
@@ -283,7 +43,7 @@ isDesktop = breakpoint([Breakpoint.Desktop, Breakpoint.DekstopL, Breakpoint.Deks
    - Need code inference
    - Complex architectural questions
 
-#### Enforcement Examples
+### Enforcement Examples
 
 ```
 ❌ WRONG: Read libs/ui/buttons/README.md
@@ -297,61 +57,3 @@ isDesktop = breakpoint([Breakpoint.Desktop, Breakpoint.DekstopL, Breakpoint.Deks
 ```
 
 **Remember: Using subagents is NOT optional - it's mandatory for maintaining context efficiency and search quality.**
-
-#### Common Research Patterns
-
-| Information Need | Required Approach |
-|-----------------|-------------------|
-| **Library documentation** | `docs-researcher` → Check library-reference.md → Escalate if needed |
-| **Code patterns/examples** | `Explore` with "medium" or "very thorough" |
-| **Architecture understanding** | `npx nx graph` + `Explore` for implementation |
-| **Debugging/errors** | Direct tool use (Read specific error file, check console) |
-
-#### Debugging Tips
-- **TypeScript errors**: Follow error path to exact file:line
-- **Test failures**: Use `--skip-nx-cache` for fresh output
-- **Module resolution**: Check `tsconfig.base.json` path aliases
-- **State issues**: Use Angular DevTools browser extension
-
-### Library Development Patterns
-- **Library Documentation**: Use `docs-researcher` for ALL library READMEs (mandatory for context management)
-- **New Library Creation**: Use Nx generators with domain-specific naming (`[domain]-[layer]-[feature]`)
-- **Standalone Components**: All new components must be standalone with explicit imports - no NgModules
-- **Testing Framework**: New = Vitest + Angular Testing Utilities, Legacy = Jest + Spectator
-- **Path Aliases**: Always use `@isa/[domain]/[layer]/[feature]` - avoid relative imports
-
-#### Library Reference Guide
-
-The monorepo contains **62 libraries** organized across 12 domains. For quick lookup, see **[`docs/library-reference.md`](docs/library-reference.md)**.
-
-**Quick Overview by Domain:**
-- Availability (1) | Catalogue (1) | Checkout (6) | Common (3) | Core (5) | CRM (1) | Icons (1)
-- OMS (9) | Remission (8) | Shared Components (7) | UI Components (17) | Utilities (3)
-
-### API Integration Workflow
-- **Swagger Generation**: Run `npm run generate:swagger` to regenerate all 10 API clients when backend changes
-- **Data Services**: Wrap generated API clients in domain-specific data-access services with proper error handling and Zod validation
-- **State Management**: Use NgRx Signals with `signalStore()`, entity management, and session persistence for complex state
-
-### Performance and Quality Considerations
-- **Bundle Monitoring**: Watch bundle sizes (2MB warning, 5MB error for main bundle)
-- **Testing Cache**: Always use `--skip-nx-cache` flag when running tests to ensure reliable results
-- **Code Quality**: Pre-commit hooks enforce Prettier formatting and ESLint rules automatically
-- **Memory Management**: Clean up subscriptions and use OnPush change detection for optimal performance
-
-### Common Troubleshooting
-- **Build Issues**: Check Node version and run `npm install` if encountering module resolution errors
-- **Test Failures**: Use `--skip-nx-cache` flag and ensure test isolation (no shared state between tests)
-- **Nx Cache Issues**: If you see `existing outputs match the cache, left as is` during build or testing:
-  - **Option 1**: Run `npx nx reset` to clear the Nx cache completely
-  - **Option 2**: Use `--skip-nx-cache` flag to bypass Nx cache for a specific command (e.g., `npx nx test <project> --skip-nx-cache`)
-  - **When to use**: Always use `--skip-nx-cache` when you need guaranteed fresh builds or test results
-- **SSL Certificates**: Development server uses SSL - accept certificate warnings in browser for localhost
-- **Import Errors**: Verify path aliases in `tsconfig.base.json` and use absolute imports for cross-library dependencies
-
-### Domain-Specific Conventions
-- **Component Prefixes**: Use `oms-feature-*` for OMS, `remi-*` for remission, `ui-*` for shared components
-- **Git Workflow**: Default branch is `develop` (not main), use conventional commits without co-author tags
-- **Design System**: Use ISA-specific Tailwind utilities (`isa-accent-*`, `isa-text-*`) and custom breakpoints (`isa-desktop-*`)
-- **Logging**: Use centralized logging service (`@isa/core/logging`) with contextual information for debugging
-- **Navigation State**: Use `@isa/core/navigation` for passing temporary state between routes (return URLs, form context) instead of query parameters - keeps URLs clean and state reliable

apps/isa-app/.storybook/preview.ts

@@ -1,4 +1,8 @@
 import type { Preview } from '@storybook/angular';
+import { registerLocaleData } from '@angular/common';
+import localeDe from '@angular/common/locales/de';
+
+registerLocaleData(localeDe);
 
 const preview: Preview = {
   tags: ['autodocs'],

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

@@ -1,6 +1,5 @@
-import { inject, isDevMode, NgModule } from '@angular/core';
-import { Location } from '@angular/common';
-import { RouterModule, Routes, Router } from '@angular/router';
+import { isDevMode, NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 import {
   CanActivateCartGuard,
   CanActivateCartWithProcessIdGuard,
@@ -11,7 +10,6 @@ import {
   CanActivateGoodsInGuard,
   CanActivateProductGuard,
   CanActivateProductWithProcessIdGuard,
-  CanActivateRemissionGuard,
   CanActivateTaskCalendarGuard,
   IsAuthenticatedGuard,
 } from './guards';
@@ -33,9 +31,8 @@ import {
 import { MatomoRouteData } from 'ngx-matomo-client';
 import {
   tabResolverFn,
-  TabService,
-  TabNavigationService,
   processResolverFn,
+  hasTabIdGuard,
 } from '@isa/core/tabs';
 import { provideScrollPositionRestoration } from '@isa/utils/scroll-position';
 
@@ -189,7 +186,7 @@ const routes: Routes = [
     path: ':tabId',
     component: MainComponent,
     resolve: { process: processResolverFn, tab: tabResolverFn },
-    canActivate: [IsAuthenticatedGuard],
+    canActivate: [IsAuthenticatedGuard, hasTabIdGuard],
     children: [
       {
         path: 'reward',

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

@@ -68,7 +68,7 @@ import {
   matWifiOff,
 } from '@ng-icons/material-icons/baseline';
 import { NetworkStatusService } from './services/network-status.service';
-import { debounceTime, firstValueFrom } from 'rxjs';
+import { debounceTime, filter, firstValueFrom, switchMap } from 'rxjs';
 import { provideMatomo } from 'ngx-matomo-client';
 import { withRouter, withRouteData } from 'ngx-matomo-client';
 import {
@@ -77,7 +77,7 @@ import {
   LogLevel,
   withSink,
   ConsoleLogSink,
-  logger,
+  logger as loggerFactory,
 } from '@isa/core/logging';
 import {
   IDBStorageProvider,
@@ -85,57 +85,77 @@ import {
   UserStorageProvider,
 } from '@isa/core/storage';
 import { Store } from '@ngrx/store';
-import { TabNavigationService } from '@isa/core/tabs';
 import { OAuthService } from 'angular-oauth2-oidc';
 import z from 'zod';
+import { TabNavigationService } from '@isa/core/tabs';
 
 registerLocaleData(localeDe, localeDeExtra);
 registerLocaleData(localeDe, 'de', localeDeExtra);
 
 export function _appInitializerFactory(config: Config, injector: Injector) {
   return async () => {
+    // Get logging service for initialization logging
+    const logger = loggerFactory(() => ({ service: 'AppInitializer' }));
     const statusElement = document.querySelector('#init-status');
     const laoderElement = document.querySelector('#init-loader');
 
     try {
+      logger.info('Starting application initialization');
+
       let online = false;
       const networkStatus = injector.get(NetworkStatusService);
       while (!online) {
         online = await firstValueFrom(networkStatus.online$);
 
         if (!online) {
+          logger.warn('Waiting for network connection');
           statusElement.innerHTML =
             '<b>Warte auf Netzwerkverbindung (WLAN)</b><br><br>Bitte prüfen Sie die Netzwerkverbindung (WLAN).<br>Sobald eine Netzwerkverbindung besteht, wird die App automatisch neu geladen.';
           await new Promise((resolve) => setTimeout(resolve, 250));
         }
       }
 
+      logger.info('Network connection established');
+
       statusElement.innerHTML = 'Konfigurationen werden geladen...';
+      logger.info('Loading configurations');
 
       statusElement.innerHTML = 'Scanner wird initialisiert...';
+      logger.info('Initializing scanner');
       const scanAdapter = injector.get(ScanAdapterService);
       await scanAdapter.init();
+      logger.info('Scanner initialized');
 
       statusElement.innerHTML = 'Authentifizierung wird geprüft...';
+      logger.info('Initializing authentication');
 
       const auth = injector.get(AuthService);
       try {
-        await auth.init();
+        const authenticated = await auth.init();
+        if (!authenticated) {
+          throw new Error('User is not authenticated');
+        }
       } catch {
         statusElement.innerHTML = 'Authentifizierung wird durchgeführt...';
+        logger.info('Performing login');
         const strategy = injector.get(LoginStrategy);
         await strategy.login();
         return;
       }
 
       statusElement.innerHTML = 'Native Container wird initialisiert...';
+      logger.info('Initializing native container');
       const nativeContainer = injector.get(NativeContainerService);
       await nativeContainer.init();
+      logger.info('Native container initialized');
 
       statusElement.innerHTML = 'Datenbank wird initialisiert...';
+      logger.info('Initializing database');
       await injector.get(IDBStorageProvider).init();
+      logger.info('Database initialized');
 
       statusElement.innerHTML = 'Benutzerzustand wird geladen...';
+      logger.info('Loading user storage');
       const userStorage = injector.get(UserStorageProvider);
       await userStorage.init();
 
@@ -144,16 +164,29 @@ export function _appInitializerFactory(config: Config, injector: Injector) {
       const state = userStorage.get('store');
       if (state && state['version'] === version) {
         store.dispatch({ type: 'HYDRATE', payload: userStorage.get('store') });
+        logger.info('Store hydrated from user storage');
+      } else {
+        logger.debug('Store hydration skipped', () => ({
+          reason: state ? 'version mismatch' : 'no stored state',
+        }));
       }
       // Subscribe on Store changes and save to user storage
-      store.pipe(debounceTime(1000)).subscribe((state) => {
-        userStorage.set('store', { ...state, version });
-      });
+      auth.initialized$
+        .pipe(
+          filter((initialized) => initialized),
+          switchMap(() => store.pipe(debounceTime(1000))),
+        )
+        .subscribe((state) => {
+          userStorage.set('store', state);
+        });
 
+      logger.info('Application initialization completed');
       // Inject tab navigation service to initialize it
       injector.get(TabNavigationService).init();
     } catch (error) {
-      console.error('Error during app initialization', error);
+      logger.error('Application initialization failed', error as Error, () => ({
+        message: (error as Error).message,
+      }));
       laoderElement.remove();
       statusElement.classList.add('text-xl');
       statusElement.innerHTML +=
@@ -199,7 +232,7 @@ export function _notificationsHubOptionsFactory(
 }
 
 const USER_SUB_FACTORY = () => {
-  const _logger = logger(() => ({
+  const _logger = loggerFactory(() => ({
     context: 'USER_SUB',
   }));
   const auth = inject(OAuthService);

apps/isa-app/src/app/interceptors/http-error.interceptor.ts

@@ -8,24 +8,25 @@ import {
 } from '@angular/common/http';
 import { from, NEVER, Observable, throwError } from 'rxjs';
 import { catchError, filter, mergeMap, takeUntil } from 'rxjs/operators';
-import { LoginStrategy } from '@core/auth';
-import { IsaLogProvider } from '../providers';
-import { LogLevel } from '@core/logger';
+import { AuthService, LoginStrategy } from '@core/auth';
 import { injectOnline$ } from '../services/network-status.service';
+import { logger } from '@isa/core/logging';
 
 @Injectable()
 export class HttpErrorInterceptor implements HttpInterceptor {
-  readonly offline$ = injectOnline$().pipe(filter((online) => !online));
-  readonly injector = inject(Injector);
-
-  constructor(private _isaLogProvider: IsaLogProvider) {}
+  #logger = logger(() => ({
+    'http-interceptor': 'HttpErrorInterceptor',
+  }));
+  #offline$ = injectOnline$().pipe(filter((online) => !online));
+  #injector = inject(Injector);
+  #auth = inject(AuthService);
 
   intercept(
     req: HttpRequest<any>,
     next: HttpHandler,
   ): Observable<HttpEvent<any>> {
     return next.handle(req).pipe(
-      takeUntil(this.offline$),
+      takeUntil(this.#offline$),
       catchError((error: HttpErrorResponse, caught: any) =>
         this.handleError(error),
       ),
@@ -33,18 +34,22 @@ export class HttpErrorInterceptor implements HttpInterceptor {
   }
 
   handleError(error: HttpErrorResponse): Observable<any> {
-    if (error.status === 401) {
-      const strategy = this.injector.get(LoginStrategy);
+    return this.#auth.initialized$.pipe(
+      mergeMap((initialized) => {
+        if (initialized && error.status === 401) {
+          const strategy = this.#injector.get(LoginStrategy);
 
-      return from(strategy.login('Sie sind nicht mehr angemeldet')).pipe(
-        mergeMap(() => NEVER),
-      );
-    }
+          return from(strategy.login('Sie sind nicht mehr angemeldet')).pipe(
+            mergeMap(() => NEVER),
+          );
+        }
 
-    if (!error.url.endsWith('/isa/logging')) {
-      this._isaLogProvider.log(LogLevel.ERROR, 'Http Error', error);
-    }
+        if (!error.url.endsWith('/isa/logging')) {
+          this.#logger.error('Http Error', error);
+        }
 
-    return throwError(error);
+        return throwError(() => error);
+      }),
+    );
   }
 }

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

@@ -1,85 +1,85 @@
-{
-  "title": "ISA - Feature",
-  "silentRefresh": {
-    "interval": 300000
-  },
-  "@cdn/product-image": {
-    "url": "https://produktbilder.paragon-data.net"
-  },
-  "@core/auth": {
-    "issuer": "https://sso-test.paragon-data.de",
-    "clientId": "hug-isa",
-    "responseType": "id_token token",
-    "oidc": true,
-    "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"
-  },
-  "@core/logger": {
-    "logLevel": "debug"
-  },
-  "@domain/checkout": {
-    "olaExpiration": "5m"
-  },
-  "@swagger/isa": {
-    "rootUrl": "https://isa-feature.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-feature.paragon-data.net/checkout/v6"
-  },
-  "@swagger/crm": {
-    "rootUrl": "https://isa-feature.paragon-data.net/crm/v6"
-  },
-  "@swagger/oms": {
-    "rootUrl": "https://isa-feature.paragon-data.net/oms/v6"
-  },
-  "@swagger/print": {
-    "rootUrl": "https://isa-feature.paragon-data.net/print/v1"
-  },
-  "@swagger/eis": {
-    "rootUrl": "https://filialinformationsystem-test.paragon-systems.de/eiswebapi/v1"
-  },
-  "@swagger/remi": {
-    "rootUrl": "https://isa-feature.paragon-data.net/inv/v6"
-  },
-  "@swagger/wws": {
-    "rootUrl": "https://isa-test.paragon-data.net/wws/v1"
-  },
-  "hubs": {
-    "notifications": {
-      "url": "https://isa-feature.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 - Feature",
+  "silentRefresh": {
+    "interval": 300000
+  },
+  "@cdn/product-image": {
+    "url": "https://produktbilder.paragon-data.net"
+  },
+  "@core/auth": {
+    "issuer": "https://sso-test.paragon-data.de",
+    "clientId": "hug-isa",
+    "responseType": "id_token token",
+    "oidc": true,
+    "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"
+  },
+  "@core/logger": {
+    "logLevel": "debug"
+  },
+  "@domain/checkout": {
+    "olaExpiration": "5m"
+  },
+  "@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-feature.paragon-data.net/checkout/v6"
+  },
+  "@swagger/crm": {
+    "rootUrl": "https://isa-feature.paragon-data.net/crm/v6"
+  },
+  "@swagger/oms": {
+    "rootUrl": "https://isa-feature.paragon-data.net/oms/v6"
+  },
+  "@swagger/print": {
+    "rootUrl": "https://isa-feature.paragon-data.net/print/v1"
+  },
+  "@swagger/eis": {
+    "rootUrl": "https://filialinformationsystem-test.paragon-systems.de/eiswebapi/v1"
+  },
+  "@swagger/remi": {
+    "rootUrl": "https://isa-feature.paragon-data.net/inv/v6"
+  },
+  "@swagger/wws": {
+    "rootUrl": "https://isa-test.paragon-data.net/wws/v1"
+  },
+  "hubs": {
+    "notifications": {
+      "url": "https://isa-feature.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"
+}

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

@@ -5,6 +5,8 @@ import { isNullOrUndefined } from '@utils/common';
 import { AuthConfig, OAuthService } from 'angular-oauth2-oidc';
 import { JwksValidationHandler } from 'angular-oauth2-oidc-jwks';
 import { BehaviorSubject } from 'rxjs';
+import { logger } from '@isa/core/logging';
+import { Router } from '@angular/router';
 
 /**
  * Storage key for the URL to redirect to after login
@@ -15,9 +17,17 @@ const REDIRECT_URL_KEY = 'auth_redirect_url';
   providedIn: 'root',
 })
 export class AuthService {
-  private readonly _initialized = new BehaviorSubject<boolean>(false);
+  #logger = logger(() => ({ service: 'AuthService' }));
+  #router = inject(Router);
+
+  #initialized = new BehaviorSubject<boolean>(false);
   get initialized$() {
-    return this._initialized.asObservable();
+    return this.#initialized.asObservable();
+  }
+
+  #authenticated = new BehaviorSubject<boolean>(false);
+  get authenticated$() {
+    return this.#authenticated.asObservable();
   }
 
   private _authConfig: AuthConfig;
@@ -27,16 +37,21 @@ export class AuthService {
   ) {
     this._oAuthService.events?.subscribe((event) => {
       if (event.type === 'token_received') {
-        console.log(
-          'SSO Token Expiration:',
-          new Date(this._oAuthService.getAccessTokenExpiration()),
-        );
+        this.#logger.info('SSO token received', () => ({
+          tokenExpiration: new Date(
+            this._oAuthService.getAccessTokenExpiration(),
+          ).toISOString(),
+        }));
 
         // Handle redirect after successful authentication
         setTimeout(() => {
           const redirectUrl = this._getAndClearRedirectUrl();
           if (redirectUrl) {
-            window.location.href = redirectUrl;
+            this.#logger.debug('Redirecting after authentication', () => ({
+              redirectUrl,
+            }));
+
+            this.#router.navigateByUrl(redirectUrl);
           }
         }, 100);
       }
@@ -44,50 +59,72 @@ export class AuthService {
   }
 
   async init() {
-    if (this._initialized.getValue()) {
+    if (this.#initialized.getValue()) {
+      this.#logger.error(
+        'AuthService initialization attempted twice',
+        new Error('Already initialized'),
+      );
       throw new Error('AuthService is already initialized');
     }
 
+    this.#logger.info('Initializing AuthService');
+
     this._authConfig = this._config.get('@core/auth');
+    this.#logger.debug('Auth config loaded', () => ({
+      issuer: this._authConfig.issuer,
+      clientId: this._authConfig.clientId,
+      scope: this._authConfig.scope,
+    }));
 
     this._authConfig.redirectUri = window.location.origin;
-
     this._authConfig.silentRefreshRedirectUri =
       window.location.origin + '/silent-refresh.html';
     this._authConfig.useSilentRefresh = true;
 
+    this.#logger.debug('Auth URIs configured', () => ({
+      redirectUri: this._authConfig.redirectUri,
+      silentRefreshRedirectUri: this._authConfig.silentRefreshRedirectUri,
+    }));
+
     this._oAuthService.configure(this._authConfig);
     this._oAuthService.tokenValidationHandler = new JwksValidationHandler();
 
+    this.#logger.debug('Setting up automatic silent refresh');
     this._oAuthService.setupAutomaticSilentRefresh();
 
-    await this._oAuthService.loadDiscoveryDocumentAndTryLogin();
+    this.#logger.debug('Loading discovery document and attempting login');
+    const authenticated =
+      await this._oAuthService.loadDiscoveryDocumentAndTryLogin();
 
-    if (!this._oAuthService.getAccessToken()) {
-      throw new Error('No access token. User is not authenticated.');
-    }
+    this.#authenticated.next(authenticated);
+    this.#logger.info('AuthService initialized', () => ({ authenticated }));
 
-    this._initialized.next(true);
+    this.#initialized.next(true);
+    return authenticated;
   }
 
   isAuthenticated() {
-    return this.isIdTokenValid();
+    return this.#authenticated.getValue();
   }
 
   isIdTokenValid() {
-    console.log(
-      'ID Token Expiration:',
-      new Date(this._oAuthService.getIdTokenExpiration()),
-    );
-    return this._oAuthService.hasValidIdToken();
+    const expiration = new Date(this._oAuthService.getIdTokenExpiration());
+    const isValid = this._oAuthService.hasValidIdToken();
+    this.#logger.debug('ID token validation check', () => ({
+      expiration: expiration.toISOString(),
+      isValid,
+    }));
+    return isValid;
   }
 
   isAccessTokenValid() {
-    console.log(
-      'ACCESS Token Expiration:',
-      new Date(this._oAuthService.getAccessTokenExpiration()),
-    );
-    return this._oAuthService.hasValidAccessToken();
+    const expiration = new Date(this._oAuthService.getAccessTokenExpiration());
+    const isValid = this._oAuthService.hasValidAccessToken();
+    this.#logger.debug('Access token validation check', () => ({
+      expiration: expiration.toISOString(),
+      isValid,
+    }));
+    return isValid;
   }
 
   getToken() {
@@ -111,6 +148,7 @@ export class AuthService {
     if (isNullOrUndefined(token)) {
       return null;
     }
+
     const base64Url = token.split('.')[1];
     const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
 
@@ -135,18 +173,22 @@ export class AuthService {
   }
 
   login() {
+    this.#logger.info('Initiating login flow');
     this._saveRedirectUrl();
     this._oAuthService.initLoginFlow();
   }
 
   setKeyCardToken(token: string) {
+    this.#logger.debug('Setting keycard token');
     this._oAuthService.customQueryParams = {
       temp_token: token,
     };
   }
 
   async logout() {
+    this.#logger.info('Initiating logout');
     await this._oAuthService.revokeTokenAndLogout();
+    this.#logger.info('Logout completed');
   }
 
   hasRole(role: string | string[]) {
@@ -163,16 +205,20 @@ export class AuthService {
 
   async refresh() {
     try {
+      this.#logger.debug('Refreshing authentication token');
+
       if (
         this._authConfig.responseType.includes('code') &&
         this._authConfig.scope.includes('offline_access')
       ) {
         await this._oAuthService.refreshToken();
+        this.#logger.info('Token refreshed using refresh token');
       } else {
         await this._oAuthService.silentRefresh();
+        this.#logger.info('Token refreshed using silent refresh');
       }
     } catch (error) {
-      console.error(error);
+      this.#logger.error('Token refresh failed', error as Error);
     }
   }
 }

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

@@ -3,31 +3,49 @@ import { ActionHandler } from './action-handler.interface';
 import { CommandService } from './command.service';
 import { FEATURE_ACTION_HANDLERS, ROOT_ACTION_HANDLERS } from './tokens';
 
-export function provideActionHandlers(actionHandlers: Type<ActionHandler>[]): Provider[] {
+export function provideActionHandlers(
+  actionHandlers: Type<ActionHandler>[],
+): Provider[] {
   return [
     CommandService,
-    actionHandlers.map((handler) => ({ provide: FEATURE_ACTION_HANDLERS, useClass: handler, multi: true })),
+    actionHandlers.map((handler) => ({
+      provide: FEATURE_ACTION_HANDLERS,
+      useClass: handler,
+      multi: true,
+    })),
   ];
 }
 
 @NgModule({})
 export class CoreCommandModule {
-  static forRoot(actionHandlers: Type<ActionHandler>[]): ModuleWithProviders<CoreCommandModule> {
+  static forRoot(
+    actionHandlers: Type<ActionHandler>[],
+  ): ModuleWithProviders<CoreCommandModule> {
     return {
       ngModule: CoreCommandModule,
       providers: [
         CommandService,
-        actionHandlers.map((handler) => ({ provide: ROOT_ACTION_HANDLERS, useClass: handler, multi: true })),
+        actionHandlers.map((handler) => ({
+          provide: ROOT_ACTION_HANDLERS,
+          useClass: handler,
+          multi: true,
+        })),
       ],
     };
   }
 
-  static forChild(actionHandlers: Type<ActionHandler>[]): ModuleWithProviders<CoreCommandModule> {
+  static forChild(
+    actionHandlers: Type<ActionHandler>[],
+  ): ModuleWithProviders<CoreCommandModule> {
     return {
       ngModule: CoreCommandModule,
       providers: [
         CommandService,
-        actionHandlers.map((handler) => ({ provide: FEATURE_ACTION_HANDLERS, useClass: handler, multi: true })),
+        actionHandlers.map((handler) => ({
+          provide: FEATURE_ACTION_HANDLERS,
+          useClass: handler,
+          multi: true,
+        })),
       ],
     };
   }

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

@@ -15,10 +15,13 @@ export class CommandService {
     for (const action of actions) {
       const handler = this.getActionHandler(action);
       if (!handler) {
-        console.error('CommandService.handleCommand', 'Action Handler does not exist', { action });
+        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;
@@ -29,10 +32,18 @@ export class CommandService {
   }
 
   getActionHandler(action: string): ActionHandler | undefined {
-    const featureActionHandlers: ActionHandler[] = this.injector.get(FEATURE_ACTION_HANDLERS, []);
-    const rootActionHandlers: ActionHandler[] = this.injector.get(ROOT_ACTION_HANDLERS, []);
+    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);
+    let handler = [...featureActionHandlers, ...rootActionHandlers].find(
+      (handler) => handler.action === action,
+    );
 
     if (this._parent && !handler) {
       handler = this._parent.getActionHandler(action);

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

@@ -72,12 +72,82 @@ import { ApplicationService } from '@core/application';
 import { CustomerDTO } from '@generated/swagger/crm-api';
 import { Config } from '@core/config';
 import parseDuration from 'parse-duration';
-import { CheckoutMetadataService } from '@isa/checkout/data-access';
+import {
+  CheckoutMetadataService,
+  ShoppingCart,
+} from '@isa/checkout/data-access';
+import {
+  ShoppingCartEvent,
+  ShoppingCartEvents,
+} from '@isa/checkout/data-access';
 
+/**
+ * Domain service for managing the complete checkout flow including shopping cart operations,
+ * checkout creation, buyer/payer management, payment processing, and order completion.
+ *
+ * This service orchestrates interactions between:
+ * - NgRx Store for state management
+ * - Multiple Swagger API clients (checkout, OMS, shopping cart, payment, buyer, payer, branch, kulturpass)
+ * - Shopping cart event system for cross-component synchronization
+ * - Availability service for real-time product availability checks
+ *
+ * @remarks
+ * **Process ID Pattern**: All methods require a `processId` (typically `Date.now()`) to isolate
+ * checkout sessions. Multiple concurrent checkout processes can run independently.
+ *
+ * **Observable-First Design**: Most methods return Observables for reactive composition. Consumers
+ * should use RxJS operators for transformation and error handling.
+ *
+ * **Auto-Creation**: Shopping carts auto-create if missing. The service uses `filter()` operators
+ * to trigger lazy initialization and prevent race conditions.
+ *
+ * **Event Sourcing**: Publishes shopping cart events (Created, ItemAdded, ItemUpdated, ItemRemoved)
+ * for synchronization across components. Subscribes to events from `ShoppingCartService` to maintain
+ * consistency.
+ *
+ * **OLA Management**: Tracks Order Level Agreement (OLA) expiration timestamps per item and order type.
+ * Validates availability freshness before checkout completion.
+ *
+ * @example
+ * ```typescript
+ * // Basic shopping cart flow
+ * const processId = Date.now();
+ *
+ * // Add items to cart
+ * this.checkoutService.addItemToShoppingCart({
+ *   processId,
+ *   items: [{ productId: 123, quantity: 2 }]
+ * }).subscribe();
+ *
+ * // Get cart (auto-creates if missing)
+ * this.checkoutService.getShoppingCart({ processId })
+ *   .subscribe(cart => console.log(cart));
+ *
+ * // Complete checkout (orchestrates all steps)
+ * this.checkoutService.completeCheckout({ processId })
+ *   .subscribe(orders => console.log('Orders created:', orders));
+ * ```
+ *
+ * @see DomainCheckoutSelectors For state selection patterns
+ * @see DomainCheckoutActions For available actions
+ * @see ShoppingCartEvents For event system integration
+ */
 @Injectable()
 export class DomainCheckoutService {
+  /** Metadata service for shopping cart persistence */
   #checkoutMetadataService = inject(CheckoutMetadataService);
 
+  /** Event bus for shopping cart synchronization across components */
+  #shoppingCartEvents = inject(ShoppingCartEvents);
+
+  /**
+   * Gets the OLA (Order Level Agreement) expiration duration in milliseconds.
+   *
+   * OLA expiration defines how long availability data remains valid before requiring refresh.
+   * Default is 5 minutes if not configured.
+   *
+   * @returns Duration in milliseconds
+   */
   get olaExpiration() {
     const exp = this._config.get('@domain/checkout.olaExpiration') ?? '5m';
     return parseDuration(exp);
@@ -96,9 +166,56 @@ export class DomainCheckoutService {
     private _payerService: StoreCheckoutPayerService,
     private _branchService: StoreCheckoutBranchService,
     private _kulturpassService: KulturPassService,
-  ) {}
+  ) {
+    // Subscribe to shopping cart events from ShoppingCartService
+    this.#shoppingCartEvents.events$
+      .pipe(
+        // Only process events from ShoppingCartService to avoid circular updates
+        filter((payload) => payload.source === 'ShoppingCartService'),
+      )
+      .subscribe((payload) => {
+        // Update the store with the shopping cart from the event
+        this.store.dispatch(
+          DomainCheckoutActions.setShoppingCartByShoppingCartId({
+            shoppingCartId: payload.shoppingCart.id!,
+            shoppingCart: payload.shoppingCart as any,
+          }),
+        );
+      });
+  }
 
   //#region shoppingcart
+  /**
+   * Retrieves the shopping cart for a given process ID. Auto-creates the cart if it doesn't exist.
+   *
+   * @remarks
+   * **Auto-Creation**: If no cart exists for the process ID, triggers `createShoppingCart()` automatically.
+   * The Observable filters out null/undefined and waits for cart creation to complete.
+   *
+   * **Latest Data**: Setting `latest: true` forces a refresh from the API instead of using cached state.
+   * This is useful before critical operations like checkout completion.
+   *
+   * **Memoization**: Uses `@memorize()` decorator to cache results by parameters, reducing duplicate calls.
+   *
+   * @param params - Parameters object
+   * @param params.processId - Unique process identifier (typically `Date.now()`)
+   * @param params.latest - If true, fetches fresh data from API; if false/undefined, uses store state
+   *
+   * @returns Observable of the shopping cart DTO. Never emits null/undefined.
+   *
+   * @example
+   * ```typescript
+   * // Get cart from store (creates if missing)
+   * this.checkoutService.getShoppingCart({ processId: 123 })
+   *   .pipe(first())
+   *   .subscribe(cart => console.log('Items:', cart.items));
+   *
+   * // Force refresh from API
+   * this.checkoutService.getShoppingCart({ processId: 123, latest: true })
+   *   .pipe(first())
+   *   .subscribe(cart => console.log('Fresh cart:', cart));
+   * ```
+   */
   @memorize()
   getShoppingCart({
     processId,
@@ -127,7 +244,6 @@ export class DomainCheckoutService {
               .pipe(
                 map((response) => response.result),
                 tap((shoppingCart) => {
-                  this.updateProcessCount(processId, shoppingCart);
                   this.store.dispatch(
                     DomainCheckoutActions.setShoppingCart({
                       processId,
@@ -144,6 +260,24 @@ export class DomainCheckoutService {
       );
   }
 
+  /**
+   * Reloads the shopping cart from the API and updates the store with fresh data.
+   *
+   * This is an async method that fetches the latest cart state from the backend
+   * and dispatches an action to update the NgRx store. Unlike `getShoppingCart({ latest: true })`,
+   * this method doesn't return the cart Observable - it's fire-and-forget.
+   *
+   * @param params - Parameters object
+   * @param params.processId - Process identifier
+   *
+   * @returns Promise that resolves when reload completes (or immediately if no cart exists)
+   *
+   * @example
+   * ```typescript
+   * await this.checkoutService.reloadShoppingCart({ processId: 123 });
+   * console.log('Cart reloaded');
+   * ```
+   */
   async reloadShoppingCart({ processId }: { processId: number }) {
     const shoppingCart = await firstValueFrom(
       this.store.select(DomainCheckoutSelectors.selectShoppingCartByProcessId, {
@@ -159,7 +293,6 @@ export class DomainCheckoutService {
       }),
     );
 
-    this.updateProcessCount(processId, cart.result);
     this.store.dispatch(
       DomainCheckoutActions.setShoppingCart({
         processId,
@@ -168,6 +301,29 @@ export class DomainCheckoutService {
     );
   }
 
+  /**
+   * Creates a new shopping cart and associates it with the given process ID.
+   *
+   * @remarks
+   * **State Updates**:
+   * - Saves shopping cart ID to metadata service for persistence
+   * - Publishes `ShoppingCartEvent.Created` event for component synchronization
+   * - Dispatches `setShoppingCart` action to update NgRx store
+   *
+   * **Auto-Invocation**: Usually called automatically by `getShoppingCart()` when no cart exists.
+   * Rarely needs to be called directly.
+   *
+   * @param params - Parameters object
+   * @param params.processId - Process identifier to associate with the new cart
+   *
+   * @returns Observable of the newly created shopping cart DTO
+   *
+   * @example
+   * ```typescript
+   * this.checkoutService.createShoppingCart({ processId: Date.now() })
+   *   .subscribe(cart => console.log('Cart created:', cart.id));
+   * ```
+   */
   createShoppingCart({
     processId,
   }: {
@@ -182,6 +338,11 @@ export class DomainCheckoutService {
             processId,
             shoppingCart.id,
           );
+          this.#shoppingCartEvents.pub(
+            ShoppingCartEvent.Created,
+            shoppingCart as ShoppingCart,
+            'DomainCheckoutService',
+          );
           this.store.dispatch(
             DomainCheckoutActions.setShoppingCart({
               processId,
@@ -192,6 +353,41 @@ export class DomainCheckoutService {
       );
   }
 
+  /**
+   * Adds one or more items to the shopping cart.
+   *
+   * @remarks
+   * **Process Flow**:
+   * 1. Retrieves existing shopping cart (creates if missing)
+   * 2. Calls API to add items
+   * 3. Publishes `ShoppingCartEvent.ItemAdded` event
+   * 4. Updates NgRx store with modified cart
+   *
+   * **Validation**: Ensure items are validated via `canAddItem()` or `canAddItems()` before calling
+   * this method to avoid API errors.
+   *
+   * @param params - Parameters object
+   * @param params.processId - Process identifier
+   * @param params.items - Array of items to add (product, quantity, availability, destination, etc.)
+   *
+   * @returns Observable of the updated shopping cart with new items
+   *
+   * @example
+   * ```typescript
+   * this.checkoutService.addItemToShoppingCart({
+   *   processId: 123,
+   *   items: [{
+   *     product: { ean: '1234567890', catalogProductNumber: 456 },
+   *     quantity: 2,
+   *     availability: availabilityDto,
+   *     destination: destinationDto
+   *   }]
+   * }).subscribe(cart => console.log('Items:', cart.items.length));
+   * ```
+   *
+   * @see canAddItem For single item validation
+   * @see canAddItems For bulk item validation
+   */
   addItemToShoppingCart({
     processId,
     items,
@@ -210,7 +406,11 @@ export class DomainCheckoutService {
           .pipe(
             map((response) => response.result),
             tap((shoppingCart) => {
-              this.updateProcessCount(processId, shoppingCart);
+              this.#shoppingCartEvents.pub(
+                ShoppingCartEvent.ItemAdded,
+                shoppingCart as ShoppingCart,
+                'DomainCheckoutService',
+              );
               this.store.dispatch(
                 DomainCheckoutActions.setShoppingCart({
                   processId,
@@ -270,6 +470,37 @@ export class DomainCheckoutService {
     );
   }
 
+  /**
+   * Validates if a single item can be added to the shopping cart.
+   *
+   * Checks business rules, customer features, and cart compatibility before adding items.
+   * Use this before calling `addItemToShoppingCart()` to prevent API errors.
+   *
+   * @param params - Parameters object
+   * @param params.processId - Process identifier
+   * @param params.availability - OLA availability data for the item
+   * @param params.orderType - Order type (e.g., 'Abholung', 'Versand', 'Download', 'Rücklage')
+   *
+   * @returns Observable of `true` if item can be added, or error message string if not allowed
+   *
+   * @example
+   * ```typescript
+   * this.checkoutService.canAddItem({
+   *   processId: 123,
+   *   availability: olaAvailability,
+   *   orderType: 'Versand'
+   * }).subscribe(result => {
+   *   if (result === true) {
+   *     // Proceed with adding item
+   *     this.checkoutService.addItemToShoppingCart(...);
+   *   } else {
+   *     console.error('Cannot add item:', result);
+   *   }
+   * });
+   * ```
+   *
+   * @see canAddItems For bulk validation
+   */
   canAddItem({
     processId,
     availability,
@@ -315,6 +546,38 @@ export class DomainCheckoutService {
       .pipe(map((response) => response?.result));
   }
 
+  /**
+   * Validates if multiple items can be added to the shopping cart in bulk.
+   *
+   * More efficient than calling `canAddItem()` multiple times. Returns validation
+   * results for each item in the payload.
+   *
+   * @param params - Parameters object
+   * @param params.processId - Process identifier
+   * @param params.payload - Array of item payloads to validate
+   * @param params.orderType - Order type for all items
+   *
+   * @returns Observable array of validation results (one per item). Each result contains
+   * `ok` flag and optional error messages.
+   *
+   * @example
+   * ```typescript
+   * this.checkoutService.canAddItems({
+   *   processId: 123,
+   *   payload: [
+   *     { availabilities: [avail1], productId: 111, quantity: 2 },
+   *     { availabilities: [avail2], productId: 222, quantity: 1 }
+   *   ],
+   *   orderType: 'Versand'
+   * }).subscribe(results => {
+   *   results.forEach((result, index) => {
+   *     console.log(`Item ${index}:`, result.ok ? 'Valid' : result.message);
+   *   });
+   * });
+   * ```
+   *
+   * @see canAddItem For single item validation
+   */
   canAddItems({
     processId,
     payload,
@@ -386,6 +649,50 @@ export class DomainCheckoutService {
       );
   }
 
+  /**
+   * Updates an existing item in the shopping cart (quantity, availability, special comment, etc.).
+   *
+   * @remarks
+   * **Special Behavior**:
+   * - Setting `quantity: 0` removes the item and publishes `ItemRemoved` event instead of `ItemUpdated`
+   * - Always fetches latest cart state (`latest: true`) to avoid stale data conflicts
+   * - If availability is updated, adds timestamp to history for OLA validation
+   *
+   * **Event Publishing**:
+   * - Publishes `ShoppingCartEvent.ItemRemoved` if quantity is 0
+   * - Publishes `ShoppingCartEvent.ItemUpdated` for all other changes
+   *
+   * @param params - Parameters object
+   * @param params.processId - Process identifier
+   * @param params.shoppingCartItemId - ID of the cart item to update
+   * @param params.update - Fields to update (quantity, availability, specialComment, etc.)
+   *
+   * @returns Observable of the updated shopping cart
+   *
+   * @example
+   * ```typescript
+   * // Update quantity
+   * this.checkoutService.updateItemInShoppingCart({
+   *   processId: 123,
+   *   shoppingCartItemId: 456,
+   *   update: { quantity: 5 }
+   * }).subscribe();
+   *
+   * // Remove item (quantity = 0)
+   * this.checkoutService.updateItemInShoppingCart({
+   *   processId: 123,
+   *   shoppingCartItemId: 456,
+   *   update: { quantity: 0 }
+   * }).subscribe();
+   *
+   * // Update availability
+   * this.checkoutService.updateItemInShoppingCart({
+   *   processId: 123,
+   *   shoppingCartItemId: 456,
+   *   update: { availability: newAvailabilityDto }
+   * }).subscribe();
+   * ```
+   */
   updateItemInShoppingCart({
     processId,
     shoppingCartItemId,
@@ -407,6 +714,17 @@ export class DomainCheckoutService {
           .pipe(
             map((response) => response.result),
             tap((shoppingCart) => {
+              // Check if item was removed (quantity === 0)
+              const eventType =
+                update.quantity === 0
+                  ? ShoppingCartEvent.ItemRemoved
+                  : ShoppingCartEvent.ItemUpdated;
+              this.#shoppingCartEvents.pub(
+                eventType,
+                shoppingCart as ShoppingCart,
+                'DomainCheckoutService',
+              );
+
               this.store.dispatch(
                 DomainCheckoutActions.setShoppingCart({
                   processId,
@@ -425,8 +743,6 @@ export class DomainCheckoutService {
                   ),
                 );
               }
-
-              this.updateProcessCount(processId, shoppingCart);
             }),
           ),
       ),
@@ -437,6 +753,34 @@ export class DomainCheckoutService {
 
   //#region Checkout
 
+  /**
+   * Retrieves the checkout entity for a given process. Auto-creates if missing.
+   *
+   * @remarks
+   * **Auto-Creation**: Similar to `getShoppingCart()`, automatically triggers `createCheckout()`
+   * if no checkout exists for the process ID.
+   *
+   * **Refresh**: Setting `refresh: true` forces recreation of the checkout entity from the API.
+   *
+   * **Purpose**: The checkout entity aggregates buyer, payer, payment, destinations, and
+   * notification channels. It's required before order completion.
+   *
+   * @param params - Parameters object
+   * @param params.processId - Process identifier
+   * @param params.refresh - If true, recreates checkout from API; if false/undefined, uses store state
+   *
+   * @returns Observable of the checkout DTO. Never emits null/undefined.
+   *
+   * @example
+   * ```typescript
+   * this.checkoutService.getCheckout({ processId: 123 })
+   *   .pipe(first())
+   *   .subscribe(checkout => {
+   *     console.log('Buyer:', checkout.buyer);
+   *     console.log('Payment:', checkout.payment);
+   *   });
+   * ```
+   */
   getCheckout({
     processId,
     refresh,
@@ -777,6 +1121,40 @@ export class DomainCheckoutService {
     );
   }
 
+  /**
+   * Refreshes the availability data for a single shopping cart item.
+   *
+   * Fetches fresh availability from the appropriate service based on order type
+   * (Abholung, Rücklage, Download, Versand, DIG-Versand, B2B-Versand) and updates
+   * the cart item.
+   *
+   * @remarks
+   * **Order Type Handling**:
+   * - **Abholung** (Pickup): Requires branch for availability check
+   * - **Rücklage** (TakeAway): Requires branch for availability check
+   * - **Download**: No additional parameters needed
+   * - **Versand** (Delivery): Standard delivery availability
+   * - **DIG-Versand** (Digital Delivery): Digital goods delivery
+   * - **B2B-Versand** (B2B Delivery): Business customer delivery
+   *
+   * **Updates**: Automatically calls `updateItemInShoppingCart()` with the new availability
+   * after fetching.
+   *
+   * @param params - Parameters object
+   * @param params.processId - Process identifier
+   * @param params.shoppingCartItemId - ID of the cart item to refresh
+   *
+   * @returns Promise of the refreshed availability DTO, or undefined if item not found
+   *
+   * @example
+   * ```typescript
+   * const availability = await this.checkoutService.refreshAvailability({
+   *   processId: 123,
+   *   shoppingCartItemId: 456
+   * });
+   * console.log('Updated availability:', availability);
+   * ```
+   */
   async refreshAvailability({
     processId,
     shoppingCartItemId,
@@ -804,7 +1182,7 @@ export class DomainCheckoutService {
     let availability: AvailabilityDTO;
 
     switch (item.features.orderType) {
-      case 'Abholung':
+      case 'Abholung': {
         const abholung = await this.availabilityService
           .getPickUpAvailability({
             item: itemData,
@@ -814,7 +1192,8 @@ export class DomainCheckoutService {
           .toPromise();
         availability = abholung[0];
         break;
-      case 'Rücklage':
+      }
+      case 'Rücklage': {
         const ruecklage = await this.availabilityService
           .getTakeAwayAvailability({
             item: itemData,
@@ -824,7 +1203,8 @@ export class DomainCheckoutService {
           .toPromise();
         availability = ruecklage;
         break;
-      case 'Download':
+      }
+      case 'Download': {
         const download = await this.availabilityService
           .getDownloadAvailability({
             item: itemData,
@@ -833,8 +1213,8 @@ export class DomainCheckoutService {
 
         availability = download;
         break;
-
-      case 'Versand':
+      }
+      case 'Versand': {
         const versand = await this.availabilityService
           .getDeliveryAvailability({
             item: itemData,
@@ -844,8 +1224,8 @@ export class DomainCheckoutService {
 
         availability = versand;
         break;
-
-      case 'DIG-Versand':
+      }
+      case 'DIG-Versand': {
         const digVersand = await this.availabilityService
           .getDigDeliveryAvailability({
             item: itemData,
@@ -855,8 +1235,8 @@ export class DomainCheckoutService {
 
         availability = digVersand;
         break;
-
-      case 'B2B-Versand':
+      }
+      case 'B2B-Versand': {
         const b2bVersand = await this.availabilityService
           .getB2bDeliveryAvailability({
             item: itemData,
@@ -866,6 +1246,7 @@ export class DomainCheckoutService {
 
         availability = b2bVersand;
         break;
+      }
     }
 
     await this.updateItemInShoppingCart({
@@ -878,9 +1259,41 @@ export class DomainCheckoutService {
   }
 
   /**
-   * Check if the availability of all items is valid
-   * @param param0 Process Id
-   * @returns true if the availability of all items is valid
+   * Validates if all shopping cart items have fresh availability data (OLA not expired).
+   *
+   * OLA (Order Level Agreement) defines how long availability data remains valid.
+   * This method polls the store at regular intervals and checks if the oldest
+   * availability timestamp is still within the expiration window.
+   *
+   * @remarks
+   * **Polling**: Uses `rxjsInterval()` to continuously check OLA status. The Observable emits
+   * `true` while all items are valid, `false` when any item expires.
+   *
+   * **Timestamp Tracking**: Tracks timestamps per `${itemId}_${orderType}` combination.
+   * Shipping types (Versand, DIG-Versand, B2B-Versand) fall back to generic 'Versand' timestamp.
+   *
+   * **Default Interval**: Polls every `olaExpiration / 10` milliseconds (default: 30 seconds for 5-minute expiration).
+   *
+   * @param params - Parameters object
+   * @param params.processId - Process identifier
+   * @param params.interval - Custom polling interval in milliseconds (optional)
+   *
+   * @returns Observable that emits `true` when OLA is valid, `false` when expired.
+   * Emits only on changes (`distinctUntilChanged()`).
+   *
+   * @example
+   * ```typescript
+   * this.checkoutService.validateOlaStatus({ processId: 123 })
+   *   .subscribe(isValid => {
+   *     if (!isValid) {
+   *       console.warn('Availability data expired! Refresh required.');
+   *       // Trigger availability refresh
+   *     }
+   *   });
+   * ```
+   *
+   * @see olaExpiration For expiration duration configuration
+   * @see checkoutIsValid For combined OLA + availability validation
    */
   validateOlaStatus({
     processId,
@@ -967,6 +1380,39 @@ export class DomainCheckoutService {
     );
   }
 
+  /**
+   * Validates if the checkout is ready for order completion.
+   *
+   * Combines OLA status validation with availability validation. Both must be true
+   * for checkout to proceed.
+   *
+   * @remarks
+   * **Validation Checks**:
+   * - OLA Status: All item availabilities are within expiration window
+   * - Availabilities: All items are marked as available (not out of stock)
+   *
+   * **Polling**: Uses fast polling (250ms) for OLA status to catch expiration quickly.
+   *
+   * @param params - Parameters object
+   * @param params.processId - Process identifier
+   *
+   * @returns Observable that emits `true` when checkout is valid, `false` otherwise.
+   * Emits on every change in either validation.
+   *
+   * @example
+   * ```typescript
+   * this.checkoutService.checkoutIsValid({ processId: 123 })
+   *   .subscribe(isValid => {
+   *     this.checkoutButton.disabled = !isValid;
+   *     if (!isValid) {
+   *       this.showWarning('Checkout unavailable: Availability expired');
+   *     }
+   *   });
+   * ```
+   *
+   * @see validateOlaStatus For OLA-only validation
+   * @see validateAvailabilities For availability-only validation
+   */
   checkoutIsValid({ processId }: { processId: number }): Observable<boolean> {
     const olaStatus$ = this.validateOlaStatus({ processId, interval: 250 });
 
@@ -977,6 +1423,73 @@ export class DomainCheckoutService {
     );
   }
 
+  /**
+   * Orchestrates the complete checkout process from cart validation to order creation.
+   *
+   * This is the most complex method in the service, executing a 12-step sequence that
+   * validates data, updates entities, and creates orders. Each step must complete before
+   * the next begins.
+   *
+   * @remarks
+   * **Execution Sequence** (sequential, not parallel):
+   * 1. **Update Destination**: Sets shipping addresses on delivery destinations
+   * 2. **Refresh Shopping Cart**: Gets latest cart state from API
+   * 3. **Set Special Comments**: Applies agent comments to all cart items
+   * 4. **Refresh Checkout**: Recreates checkout entity from current state
+   * 5. **Check Availabilities**: Validates download items are available
+   * 6. **Update Availabilities**: Refreshes DIG-Versand and B2B-Versand prices
+   * 7. **Set Buyer**: Submits buyer information to checkout
+   * 8. **Set Notification Channels**: Configures email/SMS preferences
+   * 9. **Set Payer**: Submits payer information (if needed for order type)
+   * 10. **Set Payment Type**: Configures payment method (Rechnung/Bar)
+   * 11. **Set Destination**: Updates destinations with shipping addresses
+   * 12. **Complete Order**: Submits to OMS for order creation
+   *
+   * **Payment Type Logic**:
+   * - Download/Versand/DIG-Versand/B2B-Versand → Payment type 128 (Rechnung/Invoice)
+   * - Pickup/TakeAway only → Payment type 4 (Bar/Cash)
+   *
+   * **Payer Requirement**:
+   * - Required for B2B customers or Download/Delivery order types
+   * - Skipped for in-store pickup/takeaway only
+   *
+   * **Error Handling**:
+   * - HTTP 409 (Conflict): Order already exists - dispatches existing orders to store
+   * - Other errors propagate to consumer for handling
+   * - Failed availability checks throw error preventing order creation
+   *
+   * **Side Effects**:
+   * - Logs each step to console (for debugging)
+   * - Updates NgRx store at multiple points
+   * - Dispatches final orders to store on success
+   *
+   * @param params - Parameters object
+   * @param params.processId - Process identifier
+   *
+   * @returns Observable array of created orders (DisplayOrderDTO[])
+   *
+   * @throws Observable error if availability validation fails or API returns non-409 error
+   *
+   * @example
+   * ```typescript
+   * this.checkoutService.completeCheckout({ processId: 123 })
+   *   .subscribe({
+   *     next: (orders) => {
+   *       console.log('Orders created:', orders);
+   *       this.router.navigate(['/order-confirmation']);
+   *     },
+   *     error: (error) => {
+   *       if (error.status === 409) {
+   *         console.log('Order already exists');
+   *       } else {
+   *         console.error('Checkout failed:', error);
+   *       }
+   *     }
+   *   });
+   * ```
+   *
+   * @see completeKulturpassOrder For Kulturpass-specific checkout flow
+   */
   completeCheckout({
     processId,
   }: {
@@ -1330,11 +1843,45 @@ export class DomainCheckoutService {
 
   //#region Common
 
-  // Fix für Ticket #4619 Versand Artikel im Warenkob -> keine Änderung bei Kundendaten erfassen
-  // Auskommentiert, da dieser Aufruf oftmals mit gleichen Parametern aufgerufen wird (ohne ausgewählten Kunden nur ein leeres Objekt bei customerFeatures)
-  // memorize macht keinen deepCompare von Objekten und denkt hier, dass immer der gleiche Return Wert zurückkommt, allerdings ist das hier oft nicht der Fall
-  // und der Decorator memorized dann fälschlicherweise
-  // @memorize()
+  /**
+   * Validates if a customer can be set on the shopping cart based on cart contents and customer features.
+   *
+   * @remarks
+   * **Memoization Disabled**: The `@memorize()` decorator was intentionally disabled for this method
+   * due to shallow comparison issues. The decorator couldn't detect when `customerFeatures` object
+   * changed, causing stale cached results. See Ticket #4619.
+   *
+   * **Response Fields**:
+   * - `ok`: True if customer can be set without issues
+   * - `filter`: Customer search filters (e.g., `{ customertype: 'webshop;guest' }`)
+   * - `message`: Error message if validation fails
+   * - `create`: Options for creating new customer types (store, guest, webshop, b2b)
+   *
+   * **Use Cases**:
+   * - Determine which customer types are compatible with cart contents
+   * - Pre-filter customer search results
+   * - Enable/disable customer type creation buttons
+   *
+   * @param params - Parameters object
+   * @param params.processId - Process identifier
+   * @param params.customerFeatures - Customer feature flags (optional: webshop, guest, b2b, staff, etc.)
+   *
+   * @returns Observable with validation result containing ok, filter, message, and create options
+   *
+   * @example
+   * ```typescript
+   * this.checkoutService.canSetCustomer({
+   *   processId: 123,
+   *   customerFeatures: { webshop: 'true', guest: 'false' }
+   * }).subscribe(result => {
+   *   if (result.ok) {
+   *     console.log('Customer types allowed:', result.create.options.values);
+   *   } else {
+   *     console.error('Cannot set customer:', result.message);
+   *   }
+   * });
+   * ```
+   */
   canSetCustomer({
     processId,
     customerFeatures,
@@ -1429,7 +1976,7 @@ export class DomainCheckoutService {
   ): Observable<{ [key: string]: boolean }> {
     return this.canSetCustomer({ processId, customerFeatures: undefined }).pipe(
       map((res) => {
-        let setableTypes: { [key: string]: boolean } = {
+        const setableTypes: { [key: string]: boolean } = {
           store: false,
           guest: false,
           webshop: false,
@@ -1469,6 +2016,32 @@ export class DomainCheckoutService {
     );
   }
 
+  /**
+   * Retrieves all active, online branches that support shipping.
+   *
+   * @remarks
+   * **Filtering**: Returns only branches matching ALL criteria:
+   * - `status === 1` (Active)
+   * - `branchType === 1` (Standard branch type)
+   * - `isOnline === true` (Available online)
+   * - `isShippingEnabled === true` (Supports shipping)
+   *
+   * **Memoization**: Uses `@memorize()` decorator to cache results. Subsequent calls
+   * return cached data without API round-trip.
+   *
+   * **Pagination**: Fetches up to 999 branches (effectively all branches).
+   *
+   * @returns Observable array of filtered branch DTOs
+   *
+   * @example
+   * ```typescript
+   * this.checkoutService.getBranches()
+   *   .subscribe(branches => {
+   *     console.log('Available branches:', branches.length);
+   *     this.branchDropdown.options = branches;
+   *   });
+   * ```
+   */
   @memorize()
   getBranches(): Observable<BranchDTO[]> {
     return this._branchService
@@ -1549,6 +2122,21 @@ export class DomainCheckoutService {
     );
   }
 
+  /**
+   * Removes all checkout data for a process ID from the store.
+   *
+   * Cleans up shopping cart, checkout entity, buyer, payer, and all associated data.
+   * Call this when a checkout session is complete or cancelled.
+   *
+   * @param params - Parameters object
+   * @param params.processId - Process identifier to remove
+   *
+   * @example
+   * ```typescript
+   * // After successful order or when user cancels
+   * this.checkoutService.removeProcess({ processId: 123 });
+   * ```
+   */
   removeProcess({ processId }: { processId: number }) {
     this.store.dispatch(
       DomainCheckoutActions.removeCheckoutWithProcessId({ processId }),
@@ -1624,13 +2212,4 @@ export class DomainCheckoutService {
     });
   }
   //#endregion
-
-  //#region Common
-
-  async updateProcessCount(processId: number, shoppingCart: ShoppingCartDTO) {
-    this.applicationService.patchProcessData(processId, {
-      count: shoppingCart.items?.length ?? 0,
-    });
-  }
-  //#endregion
 }

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

@@ -19,6 +19,11 @@ export const setShoppingCart = createAction(
   props<{ processId: number; shoppingCart: ShoppingCartDTO }>(),
 );
 
+export const setShoppingCartByShoppingCartId = createAction(
+  `${prefix} Set Shopping Cart By Shopping Cart Id`,
+  props<{ shoppingCartId: number; shoppingCart: ShoppingCartDTO }>(),
+);
+
 export const setCheckout = createAction(
   `${prefix} Set Checkout`,
   props<{ processId: number; checkout: CheckoutDTO }>(),

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

@@ -1,207 +1,311 @@
-import { createReducer, on } from '@ngrx/store';
-import { initialCheckoutState, storeCheckoutAdapter } from './domain-checkout.state';
-
-import * as DomainCheckoutActions from './domain-checkout.actions';
-import { Dictionary } from '@ngrx/entity';
-import { CheckoutEntity } from './defs/checkout.entity';
-import { isNullOrUndefined } from '@utils/common';
-
-const _domainCheckoutReducer = createReducer(
-  initialCheckoutState,
-  on(DomainCheckoutActions.setShoppingCart, (s, { processId, shoppingCart }) => {
-    const entity = getOrCreateCheckoutEntity({ processId, entities: s.entities });
-
-    const addedShoppingCartItems =
-      shoppingCart?.items
-        ?.filter((item) => !entity.shoppingCart?.items?.find((i) => i.id === item.id))
-        ?.map((item) => item.data) ?? [];
-
-    entity.shoppingCart = shoppingCart;
-
-    entity.itemAvailabilityTimestamp = entity.itemAvailabilityTimestamp ? { ...entity.itemAvailabilityTimestamp } : {};
-
-    const now = Date.now();
-
-    for (let shoppingCartItem of addedShoppingCartItems) {
-      if (shoppingCartItem.features?.orderType) {
-        entity.itemAvailabilityTimestamp[`${shoppingCartItem.id}_${shoppingCartItem.features.orderType}`] = now;
-      }
-    }
-
-    return storeCheckoutAdapter.setOne(entity, s);
-  }),
-  on(DomainCheckoutActions.setCheckout, (s, { processId, checkout }) => {
-    const entity = getOrCreateCheckoutEntity({ processId, entities: s.entities });
-    entity.checkout = checkout;
-    return storeCheckoutAdapter.setOne(entity, s);
-  }),
-  on(DomainCheckoutActions.setBuyerCommunicationDetails, (s, { processId, email, mobile }) => {
-    const entity = getOrCreateCheckoutEntity({ processId, entities: s.entities });
-    const communicationDetails = { ...entity.buyer.communicationDetails };
-    communicationDetails.email = email || communicationDetails.email;
-    communicationDetails.mobile = mobile || communicationDetails.mobile;
-    entity.buyer = {
-      ...entity.buyer,
-      communicationDetails,
-    };
-    return storeCheckoutAdapter.setOne(entity, s);
-  }),
-  on(DomainCheckoutActions.setNotificationChannels, (s, { processId, notificationChannels }) => {
-    const entity = getOrCreateCheckoutEntity({ processId, entities: s.entities });
-    return storeCheckoutAdapter.setOne({ ...entity, notificationChannels }, s);
-  }),
-  on(DomainCheckoutActions.setCheckoutDestination, (s, { processId, destination }) => {
-    const entity = getOrCreateCheckoutEntity({ processId, entities: s.entities });
-    entity.checkout = {
-      ...entity.checkout,
-      destinations: entity.checkout.destinations.map((dest) => {
-        if (dest.id === destination.id) {
-          return { ...dest, ...destination };
-        }
-        return { ...dest };
-      }),
-    };
-    return storeCheckoutAdapter.setOne(entity, s);
-  }),
-  on(DomainCheckoutActions.setShippingAddress, (s, { processId, shippingAddress }) => {
-    const entity = getOrCreateCheckoutEntity({ processId, entities: s.entities });
-    entity.shippingAddress = shippingAddress;
-    return storeCheckoutAdapter.setOne(entity, s);
-  }),
-  on(DomainCheckoutActions.setBuyer, (s, { processId, buyer }) => {
-    const entity = getOrCreateCheckoutEntity({ processId, entities: s.entities });
-    entity.buyer = buyer;
-    return storeCheckoutAdapter.setOne(entity, s);
-  }),
-  on(DomainCheckoutActions.setPayer, (s, { processId, payer }) => {
-    const entity = getOrCreateCheckoutEntity({ processId, entities: s.entities });
-    entity.payer = payer;
-    return storeCheckoutAdapter.setOne(entity, s);
-  }),
-  on(DomainCheckoutActions.setSpecialComment, (s, { processId, agentComment }) => {
-    const entity = getOrCreateCheckoutEntity({ processId, entities: s.entities });
-    entity.specialComment = agentComment;
-    return storeCheckoutAdapter.setOne(entity, s);
-  }),
-  on(DomainCheckoutActions.removeCheckoutWithProcessId, (s, { processId }) => {
-    return storeCheckoutAdapter.removeOne(processId, s);
-  }),
-  on(DomainCheckoutActions.setOrders, (s, { orders }) => ({ ...s, orders: [...s.orders, ...orders] })),
-  on(DomainCheckoutActions.updateOrderItem, (s, { item }) => {
-    const orders = [...s.orders];
-
-    const orderToUpdate = orders?.find((order) => order.items?.find((i) => i.id === item?.id));
-    const orderToUpdateIndex = orders?.indexOf(orderToUpdate);
-
-    const orderItemToUpdate = orderToUpdate?.items?.find((i) => i.id === item?.id);
-    const orderItemToUpdateIndex = orderToUpdate?.items?.indexOf(orderItemToUpdate);
-
-    const items = [...orderToUpdate?.items];
-    items[orderItemToUpdateIndex] = item;
-
-    orders[orderToUpdateIndex] = {
-      ...orderToUpdate,
-      items: [...items],
-    };
-
-    return { ...s, orders: [...orders] };
-  }),
-  on(DomainCheckoutActions.removeAllOrders, (s) => ({
-    ...s,
-    orders: [],
-  })),
-  on(DomainCheckoutActions.setOlaError, (s, { processId, olaErrorIds }) => {
-    const entity = getOrCreateCheckoutEntity({ processId, entities: s.entities });
-    entity.olaErrorIds = olaErrorIds;
-    return storeCheckoutAdapter.setOne(entity, s);
-  }),
-  on(DomainCheckoutActions.setCustomer, (s, { processId, customer }) => {
-    const entity = getOrCreateCheckoutEntity({ processId, entities: s.entities });
-    entity.customer = customer;
-    return storeCheckoutAdapter.setOne(entity, s);
-  }),
-  on(
-    DomainCheckoutActions.addShoppingCartItemAvailabilityToHistory,
-    (s, { processId, shoppingCartItemId, availability }) => {
-      const entity = getOrCreateCheckoutEntity({ processId, entities: s.entities });
-
-      const itemAvailabilityTimestamp = entity?.itemAvailabilityTimestamp
-        ? { ...entity?.itemAvailabilityTimestamp }
-        : {};
-
-      const item = entity?.shoppingCart?.items?.find((i) => i.id === shoppingCartItemId)?.data;
-
-      if (!item?.features?.orderType) return s;
-
-      itemAvailabilityTimestamp[`${item.id}_${item?.features?.orderType}`] = Date.now();
-
-      entity.itemAvailabilityTimestamp = itemAvailabilityTimestamp;
-
-      return storeCheckoutAdapter.setOne(entity, s);
-    },
-  ),
-  on(
-    DomainCheckoutActions.addShoppingCartItemAvailabilityToHistoryByShoppingCartId,
-    (s, { shoppingCartId, shoppingCartItemId, availability }) => {
-      const entity = getCheckoutEntityByShoppingCartId({ shoppingCartId, entities: s.entities });
-
-      const itemAvailabilityTimestamp = entity?.itemAvailabilityTimestamp
-        ? { ...entity?.itemAvailabilityTimestamp }
-        : {};
-
-      const item = entity?.shoppingCart?.items?.find((i) => i.id === shoppingCartItemId)?.data;
-
-      if (!item?.features?.orderType) return s;
-
-      itemAvailabilityTimestamp[`${item.id}_${item?.features?.orderType}`] = Date.now();
-
-      entity.itemAvailabilityTimestamp = itemAvailabilityTimestamp;
-
-      return storeCheckoutAdapter.setOne(entity, s);
-    },
-  ),
-);
-
-export function domainCheckoutReducer(state, action) {
-  return _domainCheckoutReducer(state, action);
-}
-
-function getOrCreateCheckoutEntity({
-  entities,
-  processId,
-}: {
-  entities: Dictionary<CheckoutEntity>;
-  processId: number;
-}): CheckoutEntity {
-  let entity = entities[processId];
-
-  if (isNullOrUndefined(entity)) {
-    return {
-      processId,
-      checkout: undefined,
-      shoppingCart: undefined,
-      shippingAddress: undefined,
-      orders: [],
-      payer: undefined,
-      buyer: undefined,
-      specialComment: '',
-      notificationChannels: 0,
-      olaErrorIds: [],
-      customer: undefined,
-      // availabilityHistory: [],
-      itemAvailabilityTimestamp: {},
-    };
-  }
-
-  return { ...entity };
-}
-
-function getCheckoutEntityByShoppingCartId({
-  entities,
-  shoppingCartId,
-}: {
-  entities: Dictionary<CheckoutEntity>;
-  shoppingCartId: number;
-}): CheckoutEntity {
-  return Object.values(entities).find((entity) => entity.shoppingCart?.id === shoppingCartId);
-}
+import { createReducer, on } from '@ngrx/store';
+import {
+  initialCheckoutState,
+  storeCheckoutAdapter,
+} from './domain-checkout.state';
+
+import * as DomainCheckoutActions from './domain-checkout.actions';
+import { Dictionary } from '@ngrx/entity';
+import { CheckoutEntity } from './defs/checkout.entity';
+import { isNullOrUndefined } from '@utils/common';
+
+const _domainCheckoutReducer = createReducer(
+  initialCheckoutState,
+  on(
+    DomainCheckoutActions.setShoppingCart,
+    (s, { processId, shoppingCart }) => {
+      const entity = getOrCreateCheckoutEntity({
+        processId,
+        entities: s.entities,
+      });
+
+      const addedShoppingCartItems =
+        shoppingCart?.items
+          ?.filter(
+            (item) =>
+              !entity.shoppingCart?.items?.find((i) => i.id === item.id),
+          )
+          ?.map((item) => item.data) ?? [];
+
+      entity.shoppingCart = shoppingCart;
+
+      entity.itemAvailabilityTimestamp = entity.itemAvailabilityTimestamp
+        ? { ...entity.itemAvailabilityTimestamp }
+        : {};
+
+      const now = Date.now();
+
+      for (let shoppingCartItem of addedShoppingCartItems) {
+        if (shoppingCartItem.features?.orderType) {
+          entity.itemAvailabilityTimestamp[
+            `${shoppingCartItem.id}_${shoppingCartItem.features.orderType}`
+          ] = now;
+        }
+      }
+
+      return storeCheckoutAdapter.setOne(entity, s);
+    },
+  ),
+  on(
+    DomainCheckoutActions.setShoppingCartByShoppingCartId,
+    (s, { shoppingCartId, shoppingCart }) => {
+      let entity = getCheckoutEntityByShoppingCartId({
+        shoppingCartId,
+        entities: s.entities,
+      });
+
+      if (!entity) {
+        // No entity found for this shoppingCartId, cannot update
+        return s;
+      }
+
+      entity = { ...entity, shoppingCart };
+
+      return storeCheckoutAdapter.setOne(entity, s);
+    },
+  ),
+  on(DomainCheckoutActions.setCheckout, (s, { processId, checkout }) => {
+    const entity = getOrCreateCheckoutEntity({
+      processId,
+      entities: s.entities,
+    });
+    entity.checkout = checkout;
+    return storeCheckoutAdapter.setOne(entity, s);
+  }),
+  on(
+    DomainCheckoutActions.setBuyerCommunicationDetails,
+    (s, { processId, email, mobile }) => {
+      const entity = getOrCreateCheckoutEntity({
+        processId,
+        entities: s.entities,
+      });
+      const communicationDetails = { ...entity.buyer.communicationDetails };
+      communicationDetails.email = email || communicationDetails.email;
+      communicationDetails.mobile = mobile || communicationDetails.mobile;
+      entity.buyer = {
+        ...entity.buyer,
+        communicationDetails,
+      };
+      return storeCheckoutAdapter.setOne(entity, s);
+    },
+  ),
+  on(
+    DomainCheckoutActions.setNotificationChannels,
+    (s, { processId, notificationChannels }) => {
+      const entity = getOrCreateCheckoutEntity({
+        processId,
+        entities: s.entities,
+      });
+      return storeCheckoutAdapter.setOne(
+        { ...entity, notificationChannels },
+        s,
+      );
+    },
+  ),
+  on(
+    DomainCheckoutActions.setCheckoutDestination,
+    (s, { processId, destination }) => {
+      const entity = getOrCreateCheckoutEntity({
+        processId,
+        entities: s.entities,
+      });
+      entity.checkout = {
+        ...entity.checkout,
+        destinations: entity.checkout.destinations.map((dest) => {
+          if (dest.id === destination.id) {
+            return { ...dest, ...destination };
+          }
+          return { ...dest };
+        }),
+      };
+      return storeCheckoutAdapter.setOne(entity, s);
+    },
+  ),
+  on(
+    DomainCheckoutActions.setShippingAddress,
+    (s, { processId, shippingAddress }) => {
+      const entity = getOrCreateCheckoutEntity({
+        processId,
+        entities: s.entities,
+      });
+      entity.shippingAddress = shippingAddress;
+      return storeCheckoutAdapter.setOne(entity, s);
+    },
+  ),
+  on(DomainCheckoutActions.setBuyer, (s, { processId, buyer }) => {
+    const entity = getOrCreateCheckoutEntity({
+      processId,
+      entities: s.entities,
+    });
+    entity.buyer = buyer;
+    return storeCheckoutAdapter.setOne(entity, s);
+  }),
+  on(DomainCheckoutActions.setPayer, (s, { processId, payer }) => {
+    const entity = getOrCreateCheckoutEntity({
+      processId,
+      entities: s.entities,
+    });
+    entity.payer = payer;
+    return storeCheckoutAdapter.setOne(entity, s);
+  }),
+  on(
+    DomainCheckoutActions.setSpecialComment,
+    (s, { processId, agentComment }) => {
+      const entity = getOrCreateCheckoutEntity({
+        processId,
+        entities: s.entities,
+      });
+      entity.specialComment = agentComment;
+      return storeCheckoutAdapter.setOne(entity, s);
+    },
+  ),
+  on(DomainCheckoutActions.removeCheckoutWithProcessId, (s, { processId }) => {
+    return storeCheckoutAdapter.removeOne(processId, s);
+  }),
+  on(DomainCheckoutActions.setOrders, (s, { orders }) => ({
+    ...s,
+    orders: [...s.orders, ...orders],
+  })),
+  on(DomainCheckoutActions.updateOrderItem, (s, { item }) => {
+    const orders = [...s.orders];
+
+    const orderToUpdate = orders?.find((order) =>
+      order.items?.find((i) => i.id === item?.id),
+    );
+    const orderToUpdateIndex = orders?.indexOf(orderToUpdate);
+
+    const orderItemToUpdate = orderToUpdate?.items?.find(
+      (i) => i.id === item?.id,
+    );
+    const orderItemToUpdateIndex =
+      orderToUpdate?.items?.indexOf(orderItemToUpdate);
+
+    const items = [...(orderToUpdate?.items ?? [])];
+    items[orderItemToUpdateIndex] = item;
+
+    orders[orderToUpdateIndex] = {
+      ...orderToUpdate,
+      items: [...items],
+    };
+
+    return { ...s, orders: [...orders] };
+  }),
+  on(DomainCheckoutActions.removeAllOrders, (s) => ({
+    ...s,
+    orders: [],
+  })),
+  on(DomainCheckoutActions.setOlaError, (s, { processId, olaErrorIds }) => {
+    const entity = getOrCreateCheckoutEntity({
+      processId,
+      entities: s.entities,
+    });
+    entity.olaErrorIds = olaErrorIds;
+    return storeCheckoutAdapter.setOne(entity, s);
+  }),
+  on(DomainCheckoutActions.setCustomer, (s, { processId, customer }) => {
+    const entity = getOrCreateCheckoutEntity({
+      processId,
+      entities: s.entities,
+    });
+    entity.customer = customer;
+    return storeCheckoutAdapter.setOne(entity, s);
+  }),
+  on(
+    DomainCheckoutActions.addShoppingCartItemAvailabilityToHistory,
+    (s, { processId, shoppingCartItemId, availability }) => {
+      const entity = getOrCreateCheckoutEntity({
+        processId,
+        entities: s.entities,
+      });
+
+      const itemAvailabilityTimestamp = entity?.itemAvailabilityTimestamp
+        ? { ...entity?.itemAvailabilityTimestamp }
+        : {};
+
+      const item = entity?.shoppingCart?.items?.find(
+        (i) => i.id === shoppingCartItemId,
+      )?.data;
+
+      if (!item?.features?.orderType) return s;
+
+      itemAvailabilityTimestamp[`${item.id}_${item?.features?.orderType}`] =
+        Date.now();
+
+      entity.itemAvailabilityTimestamp = itemAvailabilityTimestamp;
+
+      return storeCheckoutAdapter.setOne(entity, s);
+    },
+  ),
+  on(
+    DomainCheckoutActions.addShoppingCartItemAvailabilityToHistoryByShoppingCartId,
+    (s, { shoppingCartId, shoppingCartItemId, availability }) => {
+      const entity = getCheckoutEntityByShoppingCartId({
+        shoppingCartId,
+        entities: s.entities,
+      });
+
+      const itemAvailabilityTimestamp = entity?.itemAvailabilityTimestamp
+        ? { ...entity?.itemAvailabilityTimestamp }
+        : {};
+
+      const item = entity?.shoppingCart?.items?.find(
+        (i) => i.id === shoppingCartItemId,
+      )?.data;
+
+      if (!item?.features?.orderType) return s;
+
+      itemAvailabilityTimestamp[`${item.id}_${item?.features?.orderType}`] =
+        Date.now();
+
+      entity.itemAvailabilityTimestamp = itemAvailabilityTimestamp;
+
+      return storeCheckoutAdapter.setOne(entity, s);
+    },
+  ),
+);
+
+export function domainCheckoutReducer(state, action) {
+  return _domainCheckoutReducer(state, action);
+}
+
+function getOrCreateCheckoutEntity({
+  entities,
+  processId,
+}: {
+  entities: Dictionary<CheckoutEntity>;
+  processId: number;
+}): CheckoutEntity {
+  let entity = entities[processId];
+
+  if (isNullOrUndefined(entity)) {
+    return {
+      processId,
+      checkout: undefined,
+      shoppingCart: undefined,
+      shippingAddress: undefined,
+      orders: [],
+      payer: undefined,
+      buyer: undefined,
+      specialComment: '',
+      notificationChannels: 0,
+      olaErrorIds: [],
+      customer: undefined,
+      // availabilityHistory: [],
+      itemAvailabilityTimestamp: {},
+    };
+  }
+
+  return { ...entity };
+}
+
+function getCheckoutEntityByShoppingCartId({
+  entities,
+  shoppingCartId,
+}: {
+  entities: Dictionary<CheckoutEntity>;
+  shoppingCartId: number;
+}): CheckoutEntity {
+  return Object.values(entities).find(
+    (entity) => entity.shoppingCart?.id === shoppingCartId,
+  );
+}

apps/isa-app/src/domain/oms/action-handlers/print-shipping-note.action-handler.ts

@@ -20,9 +20,15 @@ export class PrintShippingNoteActionHandler extends ActionHandler<OrderItemsCont
 
   async printShippingNoteHelper(printer: string, receipts: ReceiptDTO[]) {
     try {
-      for (const group of groupBy(receipts, (receipt) => receipt?.buyer?.buyerNumber)) {
+      for (const group of groupBy(
+        receipts,
+        (receipt) => receipt?.buyer?.buyerNumber,
+      )) {
         await this.domainPrinterService
-          .printShippingNote({ printer, receipts: group?.items?.map((r) => r?.id) })
+          .printShippingNote({
+            printer,
+            receipts: group?.items?.map((r) => r?.id),
+          })
           .toPromise();
       }
       return {
@@ -38,7 +44,9 @@ export class PrintShippingNoteActionHandler extends ActionHandler<OrderItemsCont
   }
 
   async handler(data: OrderItemsContext): Promise<OrderItemsContext> {
-    const printerList = await this.domainPrinterService.getAvailableLabelPrinters().toPromise();
+    const printerList = await this.domainPrinterService
+      .getAvailableLabelPrinters()
+      .toPromise();
     const receipts = data?.receipts?.filter((r) => r?.receiptType & 1);
     let printer: Printer;
 
@@ -53,7 +61,8 @@ export class PrintShippingNoteActionHandler extends ActionHandler<OrderItemsCont
           data: {
             printImmediately: !this._environmentSerivce.matchTablet(),
             printerType: 'Label',
-            print: async (printer) => await this.printShippingNoteHelper(printer, receipts),
+            print: async (printer) =>
+              await this.printShippingNoteHelper(printer, receipts),
           } as PrintModalData,
         })
         .afterClosed$.toPromise();

apps/isa-app/src/modal/purchase-options/README.md

@@ -0,0 +1,313 @@
+# Purchase Options Modal
+
+The Purchase Options Modal allows users to select how they want to receive their items (delivery, pickup, in-store, download) during the checkout process.
+
+## Overview
+
+This modal handles the complete purchase option selection flow including:
+- Fetching availability for each purchase option
+- Validating if items can be added to the shopping cart
+- Managing item quantities and prices
+- Supporting reward redemption flows
+
+## Features
+
+### Core Functionality
+- **Multiple Purchase Options**: Delivery, B2B Delivery, Digital Delivery, Pickup, In-Store, Download
+- **Availability Checking**: Real-time availability checks for each option
+- **Branch Selection**: Pick branches for pickup and in-store options
+- **Price Management**: Handle pricing, VAT, and manual price adjustments
+- **Reward Redemption**: Support for redeeming loyalty points
+
+### Advanced Features
+- **Disabled Purchase Options**: Prevent specific options from being available (skips API calls)
+- **Hide Disabled Options**: Toggle visibility of disabled options (show grayed out or hide completely)
+- **Pre-selection**: Pre-select a specific purchase option on open
+- **Single Option Mode**: Show only one specific purchase option
+
+## Usage
+
+### Basic Usage
+
+```typescript
+import { PurchaseOptionsModalService } from '@modal/purchase-options';
+
+constructor(private purchaseOptionsModal: PurchaseOptionsModalService) {}
+
+async openModal() {
+  const modalRef = await this.purchaseOptionsModal.open({
+    tabId: 123,
+    shoppingCartId: 456,
+    type: 'add', // or 'update'
+    items: [/* array of items */],
+  });
+
+  const result = await firstValueFrom(modalRef.afterClosed$);
+}
+```
+
+### Disabling Purchase Options
+
+Prevent specific options from being available. The modal will **not make API calls** for disabled options.
+
+```typescript
+const modalRef = await this.purchaseOptionsModal.open({
+  tabId: 123,
+  shoppingCartId: 456,
+  type: 'add',
+  items: [item1, item2],
+  disabledPurchaseOptions: ['b2b-delivery'], // Disable B2B delivery
+});
+```
+
+### Hide vs Show Disabled Options
+
+Control whether disabled options are hidden or shown with a disabled visual state:
+
+**Hide Disabled Options (default)**
+```typescript
+const modalRef = await this.purchaseOptionsModal.open({
+  tabId: 123,
+  shoppingCartId: 456,
+  type: 'add',
+  items: [item],
+  disabledPurchaseOptions: ['b2b-delivery'],
+  hideDisabledPurchaseOptions: true, // Default - option not visible
+});
+```
+
+**Show Disabled Options (grayed out)**
+```typescript
+const modalRef = await this.purchaseOptionsModal.open({
+  tabId: 123,
+  shoppingCartId: 456,
+  type: 'add',
+  items: [item],
+  disabledPurchaseOptions: ['b2b-delivery'],
+  hideDisabledPurchaseOptions: false, // Show disabled with visual indicator
+});
+```
+
+### Pre-selecting an Option
+
+```typescript
+const modalRef = await this.purchaseOptionsModal.open({
+  tabId: 123,
+  shoppingCartId: 456,
+  type: 'add',
+  items: [item],
+  preSelectOption: {
+    option: 'in-store',
+    showOptionOnly: false, // Optional: show only this option
+  },
+});
+```
+
+### Reward Redemption Flow
+
+```typescript
+const modalRef = await this.purchaseOptionsModal.open({
+  tabId: 123,
+  shoppingCartId: 456,
+  type: 'add',
+  items: [rewardItem],
+  useRedemptionPoints: true,
+  preSelectOption: { option: 'in-store' },
+  disabledPurchaseOptions: ['b2b-delivery'], // Common for rewards
+});
+```
+
+## API Reference
+
+### PurchaseOptionsModalData
+
+```typescript
+interface PurchaseOptionsModalData {
+  /** Tab ID for context */
+  tabId: number;
+
+  /** Shopping cart ID to add/update items */
+  shoppingCartId: number;
+
+  /** Action type: 'add' = new items, 'update' = existing items */
+  type: 'add' | 'update';
+
+  /** Enable redemption points mode */
+  useRedemptionPoints?: boolean;
+
+  /** Items to show in the modal */
+  items: Array<ItemDTO | ShoppingCartItemDTO>;
+
+  /** Pre-configured pickup branch */
+  pickupBranch?: BranchDTO;
+
+  /** Pre-configured in-store branch */
+  inStoreBranch?: BranchDTO;
+
+  /** Pre-select a specific purchase option */
+  preSelectOption?: {
+    option: PurchaseOption;
+    showOptionOnly?: boolean;
+  };
+
+  /** Purchase options to disable (no API calls) */
+  disabledPurchaseOptions?: PurchaseOption[];
+
+  /** Hide disabled options (true) or show as grayed out (false). Default: true */
+  hideDisabledPurchaseOptions?: boolean;
+}
+```
+
+### PurchaseOption Type
+
+```typescript
+type PurchaseOption =
+  | 'delivery'        // Standard delivery
+  | 'dig-delivery'    // Digital delivery
+  | 'b2b-delivery'    // B2B delivery
+  | 'pickup'          // Pickup at branch
+  | 'in-store'        // Reserve in store
+  | 'download'        // Digital download
+  | 'catalog';        // Catalog availability
+```
+
+## Architecture
+
+### Component Structure
+
+```
+purchase-options/
+├── purchase-options-modal.component.ts    # Main modal component
+├── purchase-options-modal.service.ts      # Service to open modal
+├── purchase-options-modal.data.ts         # Data interfaces
+├── store/
+│   ├── purchase-options.store.ts          # NgRx ComponentStore
+│   ├── purchase-options.service.ts        # Business logic service
+│   ├── purchase-options.state.ts          # State interface
+│   ├── purchase-options.types.ts          # Type definitions
+│   └── purchase-options.selectors.ts      # State selectors
+├── purchase-options-tile/
+│   ├── base-purchase-option.directive.ts  # Base directive for tiles
+│   ├── delivery-purchase-options-tile.component.ts
+│   ├── pickup-purchase-options-tile.component.ts
+│   ├── in-store-purchase-options-tile.component.ts
+│   └── download-purchase-options-tile.component.ts
+└── purchase-options-list-item/            # Item list components
+```
+
+### State Management
+
+The modal uses NgRx ComponentStore for state management:
+- **Availability Loading**: Parallel API calls for each enabled option
+- **Can Add Validation**: Check if items can be added to cart
+- **Item Selection**: Track selected items for batch operations
+- **Branch Management**: Handle branch selection for pickup/in-store
+
+### Disabled Options Flow
+
+1. **Configuration**: `disabledPurchaseOptions` array passed to modal
+2. **State**: Stored in store via `initialize()` method
+3. **Availability Loading**: `isOptionDisabled()` check skips API calls
+4. **UI Rendering**:
+   - If `hideDisabledPurchaseOptions: true` → not rendered
+   - If `hideDisabledPurchaseOptions: false` → rendered with `.disabled` class
+5. **Click Prevention**: Disabled tiles prevent click action
+
+## Common Use Cases
+
+### 1. Regular Checkout
+```typescript
+// Show all options
+await modalService.open({
+  tabId: processId,
+  shoppingCartId: cartId,
+  type: 'add',
+  items: catalogItems,
+});
+```
+
+### 2. Reward Redemption
+```typescript
+// Pre-select in-store, disable B2B
+await modalService.open({
+  tabId: processId,
+  shoppingCartId: rewardCartId,
+  type: 'add',
+  items: rewardItems,
+  useRedemptionPoints: true,
+  preSelectOption: { option: 'in-store' },
+  disabledPurchaseOptions: ['b2b-delivery'],
+});
+```
+
+### 3. Update Existing Item
+```typescript
+// Allow user to change delivery option
+await modalService.open({
+  tabId: processId,
+  shoppingCartId: cartId,
+  type: 'update',
+  items: [existingCartItem],
+});
+```
+
+### 4. Gift Cards (In-Store Only)
+```typescript
+// Show only in-store and delivery
+await modalService.open({
+  tabId: processId,
+  shoppingCartId: cartId,
+  type: 'add',
+  items: [giftCardItem],
+  disabledPurchaseOptions: ['pickup', 'b2b-delivery'],
+});
+```
+
+## Testing
+
+### Running Tests
+```bash
+# Run all tests for the app
+npx nx test isa-app --skip-nx-cache
+```
+
+### Testing Disabled Options
+When testing the disabled options feature:
+1. Verify no API calls are made for disabled options
+2. Check UI rendering based on `hideDisabledPurchaseOptions` flag
+3. Ensure click events are prevented on disabled tiles
+4. Validate backward compatibility (defaults work correctly)
+
+## Migration Notes
+
+### From `hidePurchaseOptions` to `disabledPurchaseOptions`
+The field was renamed for clarity:
+- **Old**: `hidePurchaseOptions` (ambiguous - hides from UI)
+- **New**: `disabledPurchaseOptions` (clear - disabled functionality, may or may not be hidden)
+
+This is a **breaking change** if you were using `hidePurchaseOptions`. Update all usages:
+
+```typescript
+// Before
+hidePurchaseOptions: ['b2b-delivery']
+
+// After
+disabledPurchaseOptions: ['b2b-delivery']
+```
+
+## Troubleshooting
+
+### Problem: Disabled option still making API calls
+**Solution**: Ensure the option is in the `disabledPurchaseOptions` array and spelled correctly.
+
+### Problem: Disabled option not showing even with `hideDisabledPurchaseOptions: false`
+**Solution**: Check that `showOption()` logic and availability checks are working correctly.
+
+### Problem: All options disabled
+**Solution**: Don't disable all options. At least one option must be available for users to proceed.
+
+## Related Documentation
+
+- [Checkout Data Access](../../../libs/checkout/data-access/README.md)
+- [Shopping Cart Flow](../../page/checkout/README.md)
+- [Reward System](../../../libs/checkout/feature/reward-catalog/README.md)

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

@@ -5,7 +5,7 @@ import {
   VATValueDTO,
 } from '@generated/swagger/checkout-api';
 import { PurchaseOption } from './store';
-import { OrderType } from '@isa/checkout/data-access';
+import { OrderTypeFeature } from '@isa/checkout/data-access';
 
 export const PURCHASE_OPTIONS: PurchaseOption[] = [
   'in-store',
@@ -23,7 +23,7 @@ export const DELIVERY_PURCHASE_OPTIONS: PurchaseOption[] = [
 ];
 
 export const PURCHASE_OPTION_TO_ORDER_TYPE: {
-  [purchaseOption: string]: OrderType;
+  [purchaseOption: string]: OrderTypeFeature;
 } = {
   'in-store': 'Rücklage',
   'pickup': 'Abholung',

apps/isa-app/src/modal/purchase-options/purchase-options-list-item/purchase-options-list-item.component.html

@@ -242,6 +242,14 @@
       }
     }
 
+    @if (showNoDownloadAvailability$ | async) {
+      <span
+        class="inline-block font-bold text-[#BE8100] mt-[14px] max-w-[19rem]"
+      >
+        Derzeit nicht verfügbar
+      </span>
+    }
+
     @if (showMaxAvailableQuantity$ | async) {
       <span class="font-bold text-[#BE8100] mt-[14px]">
         {{ (availability$ | async)?.inStock }} Exemplare sofort lieferbar

apps/isa-app/src/modal/purchase-options/purchase-options-list-item/purchase-options-list-item.component.ts

@@ -36,6 +36,7 @@ import { GIFT_CARD_MAX_PRICE, PRICE_PATTERN } from '../constants';
 import {
   Item,
   PurchaseOptionsStore,
+  isDownload,
   isItemDTO,
   isShoppingCartItemDTO,
 } from '../store';
@@ -222,13 +223,23 @@ export class PurchaseOptionsListItemComponent
     }),
   );
 
-  fetchingAvailabilities$ = this.item$
-    .pipe(
-      switchMap((item) =>
-        this._store.getFetchingAvailabilitiesForItem$(item.id),
-      ),
-    )
-    .pipe(map((fetchingAvailabilities) => fetchingAvailabilities.length > 0));
+  fetchingAvailabilitiesArray$ = this.item$.pipe(
+    switchMap((item) => this._store.getFetchingAvailabilitiesForItem$(item.id)),
+  );
+
+  fetchingAvailabilities$ = this.fetchingAvailabilitiesArray$.pipe(
+    map((fetchingAvailabilities) => fetchingAvailabilities.length > 0),
+  );
+
+  fetchingInStoreAvailability$ = this.fetchingAvailabilitiesArray$.pipe(
+    map((fetchingAvailabilities) =>
+      fetchingAvailabilities.some((fa) => fa.purchaseOption === 'in-store'),
+    ),
+  );
+
+  isFetchingInStore = toSignal(this.fetchingInStoreAvailability$, {
+    initialValue: false,
+  });
 
   showNotAvailable$ = combineLatest([
     this.availabilities$,
@@ -247,6 +258,35 @@ export class PurchaseOptionsListItemComponent
     }),
   );
 
+  isDownload$ = this.item$.pipe(map((item) => isDownload(item)));
+
+  isDownloadItem = toSignal(this.isDownload$, { initialValue: false });
+
+  showNoDownloadAvailability$ = combineLatest([
+    this.isDownload$,
+    this.availabilities$,
+    this.fetchingAvailabilities$,
+  ]).pipe(
+    map(([isDownloadItem, availabilities, fetchingAvailabilities]) => {
+      // Only check for download items
+      if (!isDownloadItem) {
+        return false;
+      }
+
+      // Don't show error while loading
+      if (fetchingAvailabilities) {
+        return false;
+      }
+
+      // Check if download availability exists
+      const hasDownloadAvailability = availabilities.some(
+        (a) => a.purchaseOption === 'download',
+      );
+
+      return !hasDownloadAvailability;
+    }),
+  );
+
   // Ticket #4813 Artikeldetailseite // EVT-Datum bei der Kaufoption Rücklage anzeigen
   get isEVT() {
     // Einstieg über Kaufoptionen - Hier wird die Katalogavailability verwendet die am ItemDTO hängt
@@ -279,10 +319,16 @@ export class PurchaseOptionsListItemComponent
   });
 
   showLowStockMessage = computed(() => {
+    const availability = this.availability();
+    const inStock = availability?.inStock ?? 0;
+
     return (
       this.useRedemptionPoints() &&
       this.isReservePurchaseOption() &&
-      (!this.availability() || this.availability().inStock < 2)
+      !this.isDownloadItem() &&
+      !this.isFetchingInStore() &&
+      inStock > 0 &&
+      inStock < 2
     );
   });
 

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

@@ -20,6 +20,7 @@ import {
   PickupPurchaseOptionTileComponent,
 } from './purchase-options-tile';
 import {
+  isDownload,
   isGiftCard,
   Item,
   PurchaseOption,
@@ -102,19 +103,16 @@ export class PurchaseOptionsModalComponent implements OnInit, OnDestroy {
 
   purchasingOptions$ = this.store.getPurchaseOptionsInAvailabilities$;
 
-  isDownloadOnly$ = this.purchasingOptions$.pipe(
-    map(
-      (purchasingOptions) =>
-        purchasingOptions.length === 1 && purchasingOptions[0] === 'download',
-    ),
+  isDownloadOnly$ = this.store.items$.pipe(
+    map((items) => items.length > 0 && items.every((item) => isDownload(item))),
   );
 
   isGiftCardOnly$ = this.store.items$.pipe(
     map((items) => items.every((item) => isGiftCard(item, this.store.type))),
   );
 
-  hasDownload$ = this.purchasingOptions$.pipe(
-    map((purchasingOptions) => purchasingOptions.includes('download')),
+  hasDownload$ = this.store.items$.pipe(
+    map((items) => items.some((item) => isDownload(item))),
   );
 
   canContinue$ = this.store.canContinue$;
@@ -154,7 +152,32 @@ export class PurchaseOptionsModalComponent implements OnInit, OnDestroy {
 
   itemTrackBy: TrackByFunction<Item> = (_, item) => item.id;
 
+  /**
+   * Determines if a purchase option should be shown in the UI.
+   *
+   * Evaluation order:
+   * 1. If option is disabled AND hideDisabledPurchaseOptions is true -> hide (return false)
+   * 2. If preSelectOption.showOptionOnly is true -> show only that option
+   * 3. Otherwise -> show the option
+   *
+   * @param option - The purchase option to check
+   * @returns true if the option should be displayed, false otherwise
+   *
+   * @example
+   * ```typescript
+   * // In template
+   * @if (showOption('delivery')) {
+   *   <app-delivery-purchase-options-tile></app-delivery-purchase-options-tile>
+   * }
+   * ```
+   */
   showOption(option: PurchaseOption): boolean {
+    const disabledOptions = this._uiModalRef.data?.disabledPurchaseOptions ?? [];
+    const hideDisabled = this._uiModalRef.data?.hideDisabledPurchaseOptions ?? true;
+
+    if (disabledOptions.includes(option) && hideDisabled) {
+      return false;
+    }
     return this._uiModalRef.data?.preSelectOption?.showOptionOnly
       ? this._uiModalRef.data?.preSelectOption?.option === option
       : true;

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

@@ -6,25 +6,125 @@ import {
 import { Customer } from '@isa/crm/data-access';
 import { ActionType, PurchaseOption } from './store';
 
+/**
+ * Data interface for opening the Purchase Options Modal.
+ *
+ * @example
+ * ```typescript
+ * // Basic usage
+ * const modalRef = await purchaseOptionsModalService.open({
+ *   tabId: 123,
+ *   shoppingCartId: 456,
+ *   type: 'add',
+ *   items: [item1, item2],
+ * });
+ *
+ * // With disabled options
+ * const modalRef = await purchaseOptionsModalService.open({
+ *   tabId: 123,
+ *   shoppingCartId: 456,
+ *   type: 'add',
+ *   items: [rewardItem],
+ *   disabledPurchaseOptions: ['b2b-delivery'],
+ *   hideDisabledPurchaseOptions: true, // Hide completely (default)
+ * });
+ * ```
+ */
 export interface PurchaseOptionsModalData {
+  /** Tab ID for maintaining context across the application */
   tabId: number;
+
+  /** Shopping cart ID where items will be added or updated */
   shoppingCartId: number;
+
+  /**
+   * Action type determining modal behavior:
+   * - 'add': Adding new items to cart
+   * - 'update': Updating existing cart items
+   */
   type: ActionType;
+
+  /**
+   * Enable redemption points mode for reward items.
+   * When true, prices are set to 0 and loyalty points are applied.
+   */
   useRedemptionPoints?: boolean;
+
+  /** Items to display in the modal for purchase option selection */
   items: Array<ItemDTO | ShoppingCartItemDTO>;
+
+  /** Pre-configured branch for pickup option */
   pickupBranch?: BranchDTO;
+
+  /** Pre-configured branch for in-store option */
   inStoreBranch?: BranchDTO;
+
+  /**
+   * Pre-select a specific purchase option on modal open.
+   * Set showOptionOnly to true to display only that option.
+   */
   preSelectOption?: { option: PurchaseOption; showOptionOnly?: boolean };
+
+  /**
+   * Purchase options to disable. Disabled options:
+   * - Will not have availability API calls made
+   * - Will either be hidden or shown as disabled based on hideDisabledPurchaseOptions
+   *
+   * @example ['b2b-delivery', 'download']
+   */
+  disabledPurchaseOptions?: PurchaseOption[];
+
+  /**
+   * Controls visibility of disabled purchase options.
+   * - true (default): Disabled options are completely hidden from the UI
+   * - false: Disabled options are shown with a disabled visual state (grayed out, not clickable)
+   *
+   * @default true
+   */
+  hideDisabledPurchaseOptions?: boolean;
 }
 
+/**
+ * Internal context interface used within the modal component.
+ * Extends PurchaseOptionsModalData with additional runtime data like selected customer.
+ *
+ * @internal
+ */
 export interface PurchaseOptionsModalContext {
+  /** Shopping cart ID where items will be added or updated */
   shoppingCartId: number;
+
+  /**
+   * Action type determining modal behavior:
+   * - 'add': Adding new items to cart
+   * - 'update': Updating existing cart items
+   */
   type: ActionType;
+
+  /** Enable redemption points mode for reward items */
   useRedemptionPoints: boolean;
+
+  /** Items to display in the modal for purchase option selection */
   items: Array<ItemDTO | ShoppingCartItemDTO>;
+
+  /** Customer selected in the current tab (resolved at runtime) */
   selectedCustomer?: Customer;
+
+  /** Default branch resolved from user settings or tab context */
   selectedBranch?: BranchDTO;
+
+  /** Pre-configured branch for pickup option */
   pickupBranch?: BranchDTO;
+
+  /** Pre-configured branch for in-store option */
   inStoreBranch?: BranchDTO;
+
+  /** Pre-select a specific purchase option on modal open */
   preSelectOption?: { option: PurchaseOption; showOptionOnly?: boolean };
+
+  /** Purchase options to disable (no API calls, conditional UI rendering) */
+  disabledPurchaseOptions?: PurchaseOption[];
+
+  /** Controls visibility of disabled purchase options (default: true = hidden) */
+  hideDisabledPurchaseOptions?: boolean;
 }

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

@@ -1,4 +1,4 @@
-import { Injectable, inject } from '@angular/core';
+import { Injectable, inject, untracked } from '@angular/core';
 import { UiModalRef, UiModalService } from '@ui/modal';
 import { PurchaseOptionsModalComponent } from './purchase-options-modal.component';
 import {
@@ -10,13 +10,61 @@ import {
   Customer,
   CrmTabMetadataService,
 } from '@isa/crm/data-access';
+import { TabService } from '@isa/core/tabs';
+import { BranchDTO } from '@generated/swagger/checkout-api';
 
+/**
+ * Service for opening and managing the Purchase Options Modal.
+ *
+ * The Purchase Options Modal allows users to select how they want to receive items
+ * (delivery, pickup, in-store, download) and manages availability checking, pricing,
+ * and shopping cart operations.
+ *
+ * @example
+ * ```typescript
+ * // Basic usage
+ * const modalRef = await this.purchaseOptionsModalService.open({
+ *   tabId: 123,
+ *   shoppingCartId: 456,
+ *   type: 'add',
+ *   items: [item1, item2],
+ * });
+ *
+ * // Await modal close
+ * const result = await firstValueFrom(modalRef.afterClosed$);
+ * ```
+ */
 @Injectable({ providedIn: 'root' })
 export class PurchaseOptionsModalService {
   #uiModal = inject(UiModalService);
+  #tabService = inject(TabService);
   #crmTabMetadataService = inject(CrmTabMetadataService);
   #customerFacade = inject(CustomerFacade);
 
+  /**
+   * Opens the Purchase Options Modal.
+   *
+   * @param data - Configuration data for the modal
+   * @returns Promise resolving to a modal reference
+   *
+   * @example
+   * ```typescript
+   * // Add new items with disabled B2B delivery
+   * const modalRef = await this.purchaseOptionsModalService.open({
+   *   tabId: processId,
+   *   shoppingCartId: cartId,
+   *   type: 'add',
+   *   items: [item1, item2],
+   *   disabledPurchaseOptions: ['b2b-delivery'],
+   * });
+   *
+   * // Wait for modal to close
+   * const action = await firstValueFrom(modalRef.afterClosed$);
+   * if (action === 'continue') {
+   *   // Proceed to next step
+   * }
+   * ```
+   */
   async open(
     data: PurchaseOptionsModalData,
   ): Promise<UiModalRef<string, PurchaseOptionsModalData>> {
@@ -26,7 +74,7 @@ export class PurchaseOptionsModalService {
     };
 
     context.selectedCustomer = await this.#getSelectedCustomer(data);
-
+    context.selectedBranch = this.#getSelectedBranch(data.tabId);
     return this.#uiModal.open<string, PurchaseOptionsModalContext>({
       content: PurchaseOptionsModalComponent,
       data: context,
@@ -46,4 +94,25 @@ export class PurchaseOptionsModalService {
 
     return this.#customerFacade.fetchCustomer({ customerId });
   }
+
+  #getSelectedBranch(tabId: number): BranchDTO | undefined {
+    const tab = untracked(() =>
+      this.#tabService.entities().find((t) => t.id === tabId),
+    );
+
+    if (!tab) {
+      return undefined;
+    }
+
+    const legacyProcessData = tab?.metadata?.process_data;
+
+    if (
+      typeof legacyProcessData === 'object' &&
+      'selectedBranch' in legacyProcessData
+    ) {
+      return legacyProcessData.selectedBranch as BranchDTO;
+    }
+
+    return undefined;
+  }
 }

apps/isa-app/src/modal/purchase-options/purchase-options-tile/base-purchase-option.directive.ts

@@ -2,6 +2,27 @@ import { ChangeDetectorRef, Directive, HostBinding, HostListener } from '@angula
 import { asapScheduler } from 'rxjs';
 import { PurchaseOption, PurchaseOptionsStore } from '../store';
 
+/**
+ * Base directive for purchase option tile components.
+ *
+ * Provides common functionality for all purchase option tiles:
+ * - Visual selected state binding
+ * - Visual disabled state binding
+ * - Click handling with disabled check
+ * - Auto-selection of available items
+ *
+ * @example
+ * ```typescript
+ * export class DeliveryPurchaseOptionTileComponent extends BasePurchaseOptionDirective {
+ *   constructor(
+ *     protected store: PurchaseOptionsStore,
+ *     protected cdr: ChangeDetectorRef,
+ *   ) {
+ *     super('delivery');
+ *   }
+ * }
+ * ```
+ */
 @Directive({
   standalone: false,
 })
@@ -9,15 +30,46 @@ export abstract class BasePurchaseOptionDirective {
   protected abstract store: PurchaseOptionsStore;
   protected abstract cdr: ChangeDetectorRef;
 
+  /**
+   * Binds the 'selected' CSS class to the host element.
+   * Applied when this purchase option is the currently selected one.
+   */
   @HostBinding('class.selected')
   get selected() {
     return this.store.purchaseOption === this.purchaseOption;
   }
 
+  /**
+   * Binds the 'disabled' CSS class to the host element.
+   * Applied when this purchase option is in the disabledPurchaseOptions array.
+   * Disabled options:
+   * - Have no availability API calls made
+   * - Are shown with reduced opacity and not-allowed cursor
+   * - Prevent click interactions
+   */
+  @HostBinding('class.disabled')
+  get disabled() {
+    return this.store.disabledPurchaseOptions.includes(this.purchaseOption);
+  }
+
   constructor(protected purchaseOption: PurchaseOption) {}
 
+  /**
+   * Handles click events on the purchase option tile.
+   *
+   * Behavior:
+   * 1. If disabled, prevents any action
+   * 2. Sets this option as the selected purchase option
+   * 3. Resets selected items
+   * 4. Auto-selects all items that have availability and can be added for this option
+   *
+   * @listens click
+   */
   @HostListener('click')
   setPurchaseOptions() {
+    if (this.disabled) {
+      return;
+    }
     this.store.setPurchaseOption(this.purchaseOption);
     this.store.resetSelectedItems();
     asapScheduler.schedule(() => {

apps/isa-app/src/modal/purchase-options/purchase-options-tile/purchase-options-tile.component.css

@@ -10,6 +10,10 @@
   @apply bg-[#D8DFE5] border-[#0556B4];
 }
 
+:host.disabled {
+  @apply opacity-50 cursor-not-allowed bg-gray-100;
+}
+
 .purchase-options-tile__heading {
   @apply flex flex-row justify-center items-center;
 }

apps/isa-app/src/modal/purchase-options/store/purchase-options.helpers.ts

@@ -13,7 +13,7 @@ import {
   ItemPayloadWithSourceId,
   PurchaseOption,
 } from './purchase-options.types';
-import { OrderType } from '@isa/checkout/data-access';
+import { OrderTypeFeature } from '@isa/checkout/data-access';
 
 export function isItemDTO(item: any, type: ActionType): item is ItemDTO {
   return type === 'add';
@@ -145,7 +145,7 @@ export function mapToOlaAvailability({
 
 export function getOrderTypeForPurchaseOption(
   purchaseOption: PurchaseOption,
-): OrderType | undefined {
+): OrderTypeFeature | undefined {
   switch (purchaseOption) {
     case 'delivery':
     case 'dig-delivery':
@@ -163,7 +163,7 @@ export function getOrderTypeForPurchaseOption(
 }
 
 export function getPurchaseOptionForOrderType(
-  orderType: OrderType,
+  orderType: OrderTypeFeature,
 ): PurchaseOption | undefined {
   switch (orderType) {
     case 'Versand':

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

@@ -17,7 +17,10 @@ import { memorize } from '@utils/common';
 import { AuthService } from '@core/auth';
 import { ApplicationService } from '@core/application';
 import { DomainOmsService } from '@domain/oms';
-import { OrderType, PurchaseOptionsFacade } from '@isa/checkout/data-access';
+import {
+  OrderTypeFeature,
+  PurchaseOptionsFacade,
+} from '@isa/checkout/data-access';
 
 @Injectable({ providedIn: 'root' })
 export class PurchaseOptionsService {
@@ -28,19 +31,12 @@ export class PurchaseOptionsService {
     private _checkoutService: DomainCheckoutService,
     private _omsService: DomainOmsService,
     private _auth: AuthService,
-    private _app: ApplicationService,
   ) {}
 
   getVats$() {
     return this._omsService.getVATs();
   }
 
-  getSelectedBranchForProcess(processId: number): Observable<Branch> {
-    return this._app
-      .getSelectedBranch$(processId)
-      .pipe(take(1), shareReplay(1));
-  }
-
   getCustomerFeatures(processId: number): Observable<Record<string, string>> {
     return this._checkoutService
       .getCustomerFeatures({ processId })
@@ -122,7 +118,7 @@ export class PurchaseOptionsService {
 
   fetchCanAdd(
     shoppingCartId: number,
-    orderType: OrderType,
+    orderType: OrderTypeFeature,
     payload: ItemPayload[],
     customerFeatures: Record<string, string>,
   ): Promise<ItemsResult[]> {
@@ -185,10 +181,11 @@ export class PurchaseOptionsService {
       items,
     });
     console.log('added item to cart', { shoppingCart });
-    this._checkoutService.updateProcessCount(
-      this._app.activatedProcessId,
-      shoppingCart,
-    );
+    // FIX BUILD ERRORS
+    // this._checkoutService.updateProcessCount(
+    //   this._app.activatedProcessId,
+    //   shoppingCart,
+    // );
     return shoppingCart;
   }
 
@@ -203,10 +200,11 @@ export class PurchaseOptionsService {
       values: payload,
     });
     console.log('updated item in cart', { shoppingCart });
-    this._checkoutService.updateProcessCount(
-      this._app.activatedProcessId,
-      shoppingCart,
-    );
+    // FIX BUILD ERRORS
+    // this._checkoutService.updateProcessCount(
+    //   this._app.activatedProcessId,
+    //   shoppingCart,
+    // );
   }
 
   @memorize({ comparer: (_) => true })

apps/isa-app/src/modal/purchase-options/store/purchase-options.state.ts

@@ -37,4 +37,6 @@ export interface PurchaseOptionsState {
   fetchingAvailabilities: Array<FetchingAvailability>;
 
   useRedemptionPoints: boolean;
+
+  disabledPurchaseOptions: PurchaseOption[];
 }

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

@@ -40,7 +40,12 @@ import { uniqueId } from 'lodash';
 import { VATDTO } from '@generated/swagger/oms-api';
 import { DomainCatalogService } from '@domain/catalog';
 import { ItemDTO } from '@generated/swagger/cat-search-api';
-import { Loyalty, OrderType, Promotion } from '@isa/checkout/data-access';
+import {
+  Loyalty,
+  OrderTypeFeature,
+  Promotion,
+} from '@isa/checkout/data-access';
+import { ensureCurrencyDefaults } from '@isa/common/data-access';
 
 @Injectable()
 export class PurchaseOptionsStore extends ComponentStore<PurchaseOptionsState> {
@@ -152,6 +157,10 @@ export class PurchaseOptionsStore extends ComponentStore<PurchaseOptionsState> {
 
   fetchingAvailabilities$ = this.select(Selectors.getFetchingAvailabilities);
 
+  get disabledPurchaseOptions() {
+    return this.get((s) => s.disabledPurchaseOptions);
+  }
+
   get vats$() {
     return this._service.getVats$();
   }
@@ -181,6 +190,7 @@ export class PurchaseOptionsStore extends ComponentStore<PurchaseOptionsState> {
       customerFeatures: {},
       fetchingAvailabilities: [],
       useRedemptionPoints: false,
+      disabledPurchaseOptions: [],
     });
   }
 
@@ -213,13 +223,14 @@ export class PurchaseOptionsStore extends ComponentStore<PurchaseOptionsState> {
     inStoreBranch,
     pickupBranch,
     useRedemptionPoints: showRedemptionPoints,
+    disabledPurchaseOptions,
   }: PurchaseOptionsModalContext) {
     const defaultBranch = await this._service.fetchDefaultBranch().toPromise();
 
     const customerFeatures =
       selectedCustomer?.features.reduce(
         (acc, feature) => {
-          acc[feature.key] = feature.value;
+          acc[feature.key] = feature.key;
           return acc;
         },
         {} as Record<string, string>,
@@ -237,6 +248,7 @@ export class PurchaseOptionsStore extends ComponentStore<PurchaseOptionsState> {
       pickupBranch: pickupBranch ?? selectedBranch,
       inStoreBranch: inStoreBranch ?? selectedBranch,
       customerFeatures,
+      disabledPurchaseOptions: disabledPurchaseOptions ?? [],
     });
 
     await this._loadAvailabilities();
@@ -246,6 +258,19 @@ export class PurchaseOptionsStore extends ComponentStore<PurchaseOptionsState> {
 
   // #region Private funtions for loading and setting Branches and Availabilities
 
+  /**
+   * Checks if a purchase option is disabled.
+   * Disabled options will not have availability API calls made.
+   *
+   * @param option - The purchase option to check
+   * @returns true if the option is in the disabledPurchaseOptions array
+   *
+   * @private
+   */
+  private isOptionDisabled(option: PurchaseOption): boolean {
+    return this.disabledPurchaseOptions.includes(option);
+  }
+
   private async _loadAvailabilities() {
     const items = this.items;
 
@@ -256,15 +281,27 @@ export class PurchaseOptionsStore extends ComponentStore<PurchaseOptionsState> {
     items.forEach((item) => {
       const itemData = mapToItemData(item, this.type);
       if (isDownload(item)) {
-        promises.push(this._loadDownloadAvailability(itemData));
+        if (!this.isOptionDisabled('download')) {
+          promises.push(this._loadDownloadAvailability(itemData));
+        }
       } else {
         if (!isGiftCard(item, this.type)) {
-          promises.push(this._loadPickupAvailability(itemData));
-          promises.push(this._loadInStoreAvailability(itemData));
-          promises.push(this._loadDeliveryAvailability(itemData));
-          promises.push(this._loadDigDeliveryAvailability(itemData));
+          if (!this.isOptionDisabled('pickup')) {
+            promises.push(this._loadPickupAvailability(itemData));
+          }
+          if (!this.isOptionDisabled('in-store')) {
+            promises.push(this._loadInStoreAvailability(itemData));
+          }
+          if (!this.isOptionDisabled('delivery')) {
+            promises.push(this._loadDeliveryAvailability(itemData));
+          }
+          if (!this.isOptionDisabled('dig-delivery')) {
+            promises.push(this._loadDigDeliveryAvailability(itemData));
+          }
+        }
+        if (!this.isOptionDisabled('b2b-delivery')) {
+          promises.push(this._loadB2bDeliveryAvailability(itemData));
         }
-        promises.push(this._loadB2bDeliveryAvailability(itemData));
       }
     });
 
@@ -282,18 +319,30 @@ export class PurchaseOptionsStore extends ComponentStore<PurchaseOptionsState> {
 
     const itemData = mapToItemData(item, this.type);
 
-    if (purchaseOption === 'in-store' || purchaseOption === undefined) {
+    if (
+      (purchaseOption === 'in-store' || purchaseOption === undefined) &&
+      !this.isOptionDisabled('in-store')
+    ) {
       promises.push(this._loadInStoreAvailability(itemData));
     }
 
-    if (purchaseOption === 'pickup' || purchaseOption === undefined) {
+    if (
+      (purchaseOption === 'pickup' || purchaseOption === undefined) &&
+      !this.isOptionDisabled('pickup')
+    ) {
       promises.push(this._loadPickupAvailability(itemData));
     }
 
     if (purchaseOption === 'delivery' || purchaseOption === undefined) {
-      promises.push(this._loadDeliveryAvailability(itemData));
-      promises.push(this._loadDigDeliveryAvailability(itemData));
-      promises.push(this._loadB2bDeliveryAvailability(itemData));
+      if (!this.isOptionDisabled('delivery')) {
+        promises.push(this._loadDeliveryAvailability(itemData));
+      }
+      if (!this.isOptionDisabled('dig-delivery')) {
+        promises.push(this._loadDigDeliveryAvailability(itemData));
+      }
+      if (!this.isOptionDisabled('b2b-delivery')) {
+        promises.push(this._loadB2bDeliveryAvailability(itemData));
+      }
     }
 
     await Promise.all(promises);
@@ -679,7 +728,7 @@ export class PurchaseOptionsStore extends ComponentStore<PurchaseOptionsState> {
         try {
           const res = await this._service.fetchCanAdd(
             this.shoppingCartId,
-            key as OrderType,
+            key as OrderTypeFeature,
             itemPayloads,
             this.customerFeatures,
           );
@@ -688,7 +737,9 @@ export class PurchaseOptionsStore extends ComponentStore<PurchaseOptionsState> {
             this._addCanAddResult({
               canAdd: canAdd.status === 0,
               itemId: item.sourceId,
-              purchaseOption: getPurchaseOptionForOrderType(key as OrderType),
+              purchaseOption: getPurchaseOptionForOrderType(
+                key as OrderTypeFeature,
+              ),
               message: canAdd.message,
             });
           });
@@ -1018,7 +1069,7 @@ export class PurchaseOptionsStore extends ComponentStore<PurchaseOptionsState> {
       throw new Error('Invalid item');
     }
 
-    const price = this.getPriceForPurchaseOption(itemId, this.purchaseOption);
+    let price = this.getPriceForPurchaseOption(itemId, this.purchaseOption);
     const availability = this.getAvailabilityWithPurchaseOption(
       itemId,
       purchaseOption,
@@ -1036,7 +1087,15 @@ export class PurchaseOptionsStore extends ComponentStore<PurchaseOptionsState> {
       // Set loyalty points from item
       loyalty = { value: redemptionPoints };
       // Set price to 0
-      price.value.value = 0;
+      price = ensureCurrencyDefaults({
+        ...price,
+        value: {
+          ...price.value,
+          value: 0,
+          currency: 'EUR',
+          currencySymbol: '€',
+        },
+      });
     }
 
     let destination: EntityDTOContainerOfDestinationDTO;
@@ -1074,7 +1133,7 @@ export class PurchaseOptionsStore extends ComponentStore<PurchaseOptionsState> {
     if (!isShoppingCartItemDTO(item, this.type)) {
       throw new Error('Invalid item');
     }
-    const price = this.getPriceForPurchaseOption(itemId, this.purchaseOption);
+    let price = this.getPriceForPurchaseOption(itemId, this.purchaseOption);
     const availability = this.getAvailabilityWithPurchaseOption(
       itemId,
       purchaseOption,
@@ -1083,7 +1142,15 @@ export class PurchaseOptionsStore extends ComponentStore<PurchaseOptionsState> {
     // If loyalty points is set we know it is a redemption item
     // we need to make sure we don't update the price
     if (this.useRedemptionPoints) {
-      price.value.value = 0;
+      price = ensureCurrencyDefaults({
+        ...price,
+        value: {
+          ...price.value,
+          value: 0,
+          currency: 'EUR',
+          currencySymbol: '€',
+        },
+      });
     }
 
     let destination: EntityDTOContainerOfDestinationDTO;

apps/isa-app/src/modal/purchase-options/store/purchase-options.types.ts

@@ -7,8 +7,25 @@ import {
   ShoppingCartItemDTO,
 } from '@generated/swagger/checkout-api';
 
+/**
+ * Action type for the purchase options modal.
+ * - 'add': Adding new items to the shopping cart
+ * - 'update': Updating existing items in the shopping cart
+ */
 export type ActionType = 'add' | 'update';
 
+/**
+ * Available purchase options for item delivery/fulfillment.
+ *
+ * Each option represents a different way customers can receive their items:
+ * - `delivery`: Standard home/address delivery
+ * - `dig-delivery`: Digital delivery (special handling)
+ * - `b2b-delivery`: Business-to-business delivery
+ * - `pickup`: Pickup at a branch location
+ * - `in-store`: Reserve and collect in store
+ * - `download`: Digital download (e-books, digital content)
+ * - `catalog`: Catalog availability (reference only)
+ */
 export type PurchaseOption =
   | 'delivery'
   | 'dig-delivery'

apps/isa-app/src/page/catalog/article-details/article-details-text/line-type.pipe.ts

@@ -1,4 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core';
+import { REIHE_PREFIX_PATTERN } from './reihe.constants';
 
 @Pipe({
   name: 'lineType',
@@ -7,8 +8,8 @@ import { Pipe, PipeTransform } from '@angular/core';
 })
 export class LineTypePipe implements PipeTransform {
   transform(value: string, ...args: any[]): 'text' | 'reihe' {
-    const REIHE_REGEX = /^Reihe:\s*"(.+)\"$/g;
-    const reihe = REIHE_REGEX.exec(value)?.[1];
+    const REIHE_REGEX = new RegExp(`^${REIHE_PREFIX_PATTERN}:\\s*"(.+)"$`, 'g');
+    const reihe = REIHE_REGEX.exec(value)?.[2];
     return reihe ? 'reihe' : 'text';
   }
 }

apps/isa-app/src/page/catalog/article-details/article-details-text/reihe-route.pipe.ts

@@ -1,9 +1,15 @@
-import { ChangeDetectorRef, OnDestroy, Pipe, PipeTransform } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  OnDestroy,
+  Pipe,
+  PipeTransform,
+} from '@angular/core';
 import { ApplicationService } from '@core/application';
 import { ProductCatalogNavigationService } from '@shared/services/navigation';
 import { isEqual } from 'lodash';
 import { Subscription, combineLatest, BehaviorSubject } from 'rxjs';
 import { distinctUntilChanged } from 'rxjs/operators';
+import { REIHE_PREFIX_PATTERN } from './reihe.constants';
 
 @Pipe({
   name: 'reiheRoute',
@@ -22,10 +28,13 @@ export class ReiheRoutePipe implements PipeTransform, OnDestroy {
     private application: ApplicationService,
     private cdr: ChangeDetectorRef,
   ) {
-    this.subscription = combineLatest([this.application.activatedProcessId$, this.value$])
+    this.subscription = combineLatest([
+      this.application.activatedProcessId$,
+      this.value$,
+    ])
       .pipe(distinctUntilChanged(isEqual))
       .subscribe(([processId, value]) => {
-        const REIHE_REGEX = /[";]|Reihe:/g; // Entferne jedes Semikolon, Anführungszeichen und den String Reihe:
+        const REIHE_REGEX = new RegExp(`[";]|${REIHE_PREFIX_PATTERN}:`, 'g'); // Entferne jedes Semikolon, Anführungszeichen und den String Reihe:/Reihe/Set:/Set/Reihe:
         const reihe = value?.replace(REIHE_REGEX, '')?.trim();
 
         if (!reihe) {
@@ -33,9 +42,15 @@ export class ReiheRoutePipe implements PipeTransform, OnDestroy {
           return;
         }
 
-        const main_qs = reihe.split('/')[0];
+        // Entferne Zahlen am Ende, die mit Leerzeichen, Komma, Slash oder Semikolon getrennt sind
+        // Beispiele: "Harry Potter 1" -> "Harry Potter", "Harry Potter,1" -> "Harry Potter", "Harry Potter/2" -> "Harry Potter"
+        const main_qs = reihe
+          .split('/')[0]
+          .replace(/[\s,;]+\d+$/g, '')
+          .trim();
 
-        const path = this.navigation.getArticleSearchResultsPath(processId).path;
+        const path =
+          this.navigation.getArticleSearchResultsPath(processId).path;
 
         this.result = {
           path,

apps/isa-app/src/page/catalog/article-details/article-details-text/reihe.constants.ts

@@ -0,0 +1,5 @@
+/**
+ * Shared regex pattern for matching Reihe line prefixes.
+ * Matches: "Reihe:", "Reihe/Set:", or "Set/Reihe:"
+ */
+export const REIHE_PREFIX_PATTERN = '(Reihe|Reihe\\/Set|Set\\/Reihe)';

apps/isa-app/src/page/catalog/article-details/article-details.component.ts

@@ -55,8 +55,6 @@ import {
   RewardSelectionPopUpService,
 } from '@isa/checkout/shared/reward-selection-dialog';
 
-import { injectConfirmationDialog, injectFeedbackDialog } from '@isa/ui/dialog';
-
 @Component({
   selector: 'page-article-details',
   templateUrl: 'article-details.component.html',
@@ -210,7 +208,7 @@ export class ArticleDetailsComponent implements OnInit, OnDestroy {
     ).path;
   }
 
-  showMore: boolean = false;
+  showMore = false;
 
   @ViewChild('detailsContainer', { read: ElementRef, static: false })
   detailsContainer: ElementRef;
@@ -610,7 +608,7 @@ export class ArticleDetailsComponent implements OnInit, OnDestroy {
 
   async navigateToResultList() {
     const processId = this.applicationService.activatedProcessId;
-    let crumbs = await this.breadcrumb
+    const crumbs = await this.breadcrumb
       .getBreadcrumbsByKeyAndTags$(this.applicationService.activatedProcessId, [
         'catalog',
         'details',

apps/isa-app/src/page/catalog/article-details/article-details.module.ts

@@ -1,55 +1,47 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ArticleDetailsComponent } from './article-details.component';
-import { ProductImageModule } from '@cdn/product-image';
-import { UiIconModule } from '@ui/icon';
-import { RouterModule } from '@angular/router';
-import { UiStarsModule } from '@ui/stars';
-import { UiSliderModule } from '@ui/slider';
-import { ArticleRecommendationsComponent } from './recommendations/article-recommendations.component';
-import { PipesModule } from '../shared/pipes/pipes.module';
-import { UiTooltipModule } from '@ui/tooltip';
-import { UiCommonModule } from '@ui/common';
-import { OrderDeadlinePipeModule } from '@shared/pipes/order-deadline';
-import { IconModule } from '@shared/components/icon';
-import { ArticleDetailsTextComponent } from './article-details-text/article-details-text.component';
-import { IconBadgeComponent } from 'apps/isa-app/src/shared/components/icon/badge/icon-badge.component';
-import { MatomoModule } from 'ngx-matomo-client';
-import {
-  SelectedRewardShoppingCartResource,
-  SelectedShoppingCartResource,
-} from '@isa/checkout/data-access';
-import { SelectedCustomerBonusCardsResource } from '@isa/crm/data-access';
-import {
-  RewardSelectionService,
-  RewardSelectionPopUpService,
-} from '@isa/checkout/shared/reward-selection-dialog';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    ProductImageModule,
-    UiIconModule,
-    RouterModule,
-    UiStarsModule,
-    UiSliderModule,
-    UiCommonModule,
-    UiTooltipModule,
-    IconModule,
-    PipesModule,
-    OrderDeadlinePipeModule,
-    ArticleDetailsTextComponent,
-    IconBadgeComponent,
-    MatomoModule,
-  ],
-  exports: [ArticleDetailsComponent, ArticleRecommendationsComponent],
-  declarations: [ArticleDetailsComponent, ArticleRecommendationsComponent],
-  providers: [
-    SelectedShoppingCartResource,
-    SelectedRewardShoppingCartResource,
-    SelectedCustomerBonusCardsResource,
-    RewardSelectionService,
-    RewardSelectionPopUpService,
-  ],
-})
-export class ArticleDetailsModule {}
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ArticleDetailsComponent } from './article-details.component';
+import { ProductImageModule } from '@cdn/product-image';
+import { UiIconModule } from '@ui/icon';
+import { RouterModule } from '@angular/router';
+import { UiStarsModule } from '@ui/stars';
+import { UiSliderModule } from '@ui/slider';
+import { ArticleRecommendationsComponent } from './recommendations/article-recommendations.component';
+import { PipesModule } from '../shared/pipes/pipes.module';
+import { UiTooltipModule } from '@ui/tooltip';
+import { UiCommonModule } from '@ui/common';
+import { OrderDeadlinePipeModule } from '@shared/pipes/order-deadline';
+import { IconModule } from '@shared/components/icon';
+import { ArticleDetailsTextComponent } from './article-details-text/article-details-text.component';
+import { IconBadgeComponent } from 'apps/isa-app/src/shared/components/icon/badge/icon-badge.component';
+import { MatomoModule } from 'ngx-matomo-client';
+import {
+  RewardSelectionService,
+  RewardSelectionPopUpService,
+} from '@isa/checkout/shared/reward-selection-dialog';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ProductImageModule,
+    UiIconModule,
+    RouterModule,
+    UiStarsModule,
+    UiSliderModule,
+    UiCommonModule,
+    UiTooltipModule,
+    IconModule,
+    PipesModule,
+    OrderDeadlinePipeModule,
+    ArticleDetailsTextComponent,
+    IconBadgeComponent,
+    MatomoModule,
+  ],
+  exports: [ArticleDetailsComponent, ArticleRecommendationsComponent],
+  declarations: [ArticleDetailsComponent, ArticleRecommendationsComponent],
+  providers: [
+    RewardSelectionService,
+    RewardSelectionPopUpService,
+  ],
+})
+export class ArticleDetailsModule {}

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

@@ -638,6 +638,8 @@ export class CheckoutReviewComponent
     this.#checkoutService.reloadShoppingCart({
       processId: this.applicationService.activatedProcessId,
     });
+
+    this.refreshAvailabilities();
   }
 
   async changeAddress() {

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

@@ -1,15 +1,26 @@
 <div class="summary-wrapper">
   <div class="flex flex-col bg-white rounded pt-10 mb-24">
-    <div class="rounded-[50%] bg-[#26830C] w-8 h-8 flex items-center justify-center self-center">
+    <div
+      class="rounded-[50%] bg-[#26830C] w-8 h-8 flex items-center justify-center self-center"
+    >
       <shared-icon class="text-white" icon="done" [size]="24"></shared-icon>
     </div>
 
     <h1 class="text-center text-h2 my-1 font-bold">Bestellbestätigung</h1>
-    <p class="text-center text-p1 mb-10">Nachfolgend erhalten Sie die Übersicht Ihrer Bestellung.</p>
+    <p class="text-center text-p1 mb-10">
+      Nachfolgend erhalten Sie die Übersicht Ihrer Bestellung.
+    </p>
 
-    @for (displayOrder of displayOrders$ | async; track displayOrder; let i = $index; let orderLast = $last) {
+    @for (
+      displayOrder of displayOrders$ | async;
+      track displayOrder;
+      let i = $index;
+      let orderLast = $last
+    ) {
       @if (i === 0) {
-        <div class="flex flex-row items-center bg-white shadow-card min-h-[3.3125rem]">
+        <div
+          class="flex flex-row items-center bg-white shadow-card min-h-[3.3125rem]"
+        >
           <div class="text-h3 font-bold px-5 py-[0.875rem]">
             {{ displayOrder?.buyer | buyerName }}
           </div>
@@ -17,34 +28,45 @@
         <hr />
       }
       <div class="flex flex-row items-center bg-[#F5F7FA] min-h-[3.3125rem]">
-        <div class="flex flex-row items-center justify-center px-5 py-[0.875rem]">
+        <div
+          class="flex flex-row items-center justify-center px-5 py-[0.875rem]"
+        >
           @if ((displayOrder?.items)[0]?.features?.orderType !== 'Dummy') {
             <shared-icon
               class="mr-2"
-              [size]="(displayOrder?.items)[0]?.features?.orderType === 'B2B-Versand' ? 36 : 24"
+              [size]="
+                (displayOrder?.items)[0]?.features?.orderType === 'B2B-Versand'
+                  ? 36
+                  : 24
+              "
               [icon]="(displayOrder?.items)[0]?.features?.orderType"
             ></shared-icon>
           }
-          <p class="text-p1 font-bold mr-3">{{ (displayOrder?.items)[0]?.features?.orderType }}</p>
+          <p class="text-p1 font-bold mr-3">
+            {{ (displayOrder?.items)[0]?.features?.orderType }}
+          </p>
           @if (
-            (displayOrder?.items)[0]?.features?.orderType === 'Abholung' || (displayOrder?.items)[0]?.features?.orderType === 'Rücklage') {
-            <div
-              >
-              {{ displayOrder.targetBranch?.name }}, {{ displayOrder.targetBranch | branchAddress }}
+            (displayOrder?.items)[0]?.features?.orderType === 'Abholung' ||
+            (displayOrder?.items)[0]?.features?.orderType === 'Rücklage'
+          ) {
+            <div>
+              {{ displayOrder.targetBranch?.name }},
+              {{ displayOrder.targetBranch | branchAddress }}
             </div>
           } @else {
             {{ displayOrder.shippingAddress | branchAddress }}
           }
           @if ((displayOrder?.items)[0]?.features?.orderType === 'Download') {
-            <div>
-              | {{ displayOrder.buyer?.communicationDetails?.email }}
-            </div>
+            <div>| {{ displayOrder.buyer?.communicationDetails?.email }}</div>
           }
         </div>
       </div>
       <hr />
       <div class="flex flex-row justify-between items-center">
-        <div class="flex flex-col px-5 py-4 bg-white" [attr.data-order-type]="(displayOrder?.items)[0]?.features?.orderType">
+        <div
+          class="flex flex-col px-5 py-4 bg-white"
+          [attr.data-order-type]="(displayOrder?.items)[0]?.features?.orderType"
+        >
           <div class="flex flex-row justify-between items-center mb-[0.375rem]">
             <div class="flex flex-row">
               <span class="w-32">Vorgangs-ID</span>
@@ -54,14 +76,28 @@
                     data-which="Vorgangs-ID"
                     data-what="link"
                     class="font-bold text-[#0556B4] no-underline"
-                    [routerLink]="['/kunde', processId, 'customer', 'search', customer?.id, 'orders', displayOrder.id]"
-                    [queryParams]="{ main_qs: customer?.customerNumber, filter_customertype: '' }"
-                    >
+                    [routerLink]="[
+                      '/kunde',
+                      processId,
+                      'customer',
+                      'search',
+                      customer?.id,
+                      'orders',
+                      displayOrder.id,
+                    ]"
+                    [queryParams]="{
+                      main_qs: customer?.customerNumber,
+                      filter_customertype: '',
+                    }"
+                  >
                     {{ displayOrder.orderNumber }}
                   </a>
                 }
               }
-              <ui-spinner class="text-[#0556B4] h-4 w-4" [show]="!(customer$ | async)"></ui-spinner>
+              <ui-spinner
+                class="text-[#0556B4] h-4 w-4"
+                [show]="!(customer$ | async)"
+              ></ui-spinner>
             </div>
           </div>
           <div class="flex flex-row justify-between items-center">
@@ -77,7 +113,7 @@
             type="button"
             class="text-[#0556B4] font-bold flex flex-row items-center justify-center"
             [class.flex-row-reverse]="!expanded[i]"
-            >
+          >
             <shared-icon
               class="mr-1"
               icon="arrow-back"
@@ -95,18 +131,26 @@
             class="page-checkout-summary__items-tablet px-5 pb-[1.875rem] bg-white"
             [class.page-checkout-summary__items]="isDesktop$ | async"
             [class.last]="last"
-            >
+          >
             <div class="page-checkout-summary__items-thumbnail flex flex-row">
-              <a [routerLink]="getProductSearchDetailsPath(order?.product?.ean)" [queryParams]="getProductSearchDetailsQueryParams(order)">
-                <img class="w-[3.125rem] max-h-20 mr-2" [src]="order.product?.ean | productImage: 195 : 315 : true" />
+              <a
+                [routerLink]="getProductSearchDetailsPath(order?.product?.ean)"
+                [queryParams]="getProductSearchDetailsQueryParams(order)"
+              >
+                <img
+                  class="w-[3.125rem] max-h-20 mr-2"
+                  [src]="order.product?.ean | productImage: 195 : 315 : true"
+                />
               </a>
             </div>
-            <div class="page-checkout-summary__items-title whitespace-nowrap overflow-ellipsis overflow-hidden">
+            <div
+              class="page-checkout-summary__items-title whitespace-nowrap overflow-ellipsis overflow-hidden"
+            >
               <a
                 class="font-bold no-underline text-[#0556B4]"
                 [routerLink]="getProductSearchDetailsPath(order?.product?.ean)"
                 [queryParams]="getProductSearchDetailsQueryParams(order)"
-                >
+              >
                 {{ order?.product?.name }}
               </a>
             </div>
@@ -120,40 +164,78 @@
                 }
               </div>
             }
-            <div class="page-checkout-summary__items-quantity font-bold justify-self-end">
+            <div
+              class="page-checkout-summary__items-quantity font-bold justify-self-end"
+            >
               <span>{{ order.quantity }}x</span>
             </div>
-            <div class="page-checkout-summary__items-price font-bold justify-self-end">
-              <span>{{ order.price?.value?.value | currency: ' ' }} {{ order.price?.value?.currency }}</span>
+            <div
+              class="page-checkout-summary__items-price font-bold justify-self-end"
+            >
+              <span
+                >{{ order.price?.value?.value | currency: ' ' }}
+                {{ order.price?.value?.currency }}</span
+              >
             </div>
             <div class="page-checkout-summary__items-delivery product-details">
               <div class="delivery-row">
                 @switch (order?.features?.orderType) {
                   @case ('Abholung') {
                     <span class="order-type">
-                      Abholung ab {{ (order?.subsetItems)[0]?.estimatedShippingDate | date }}
-                      <ng-container [ngTemplateOutlet]="abholfrist" [ngTemplateOutletContext]="{ order: order }"></ng-container>
+                      Abholung ab
+                      {{
+                        (order?.subsetItems)[0]?.estimatedShippingDate | date
+                      }}
+                      <ng-container
+                        [ngTemplateOutlet]="abholfrist"
+                        [ngTemplateOutletContext]="{ order: order }"
+                      ></ng-container>
                     </span>
                   }
                   @case ('Rücklage') {
                     <span class="order-type">
                       {{ order?.features?.orderType }}
-                      <ng-container [ngTemplateOutlet]="abholfrist" [ngTemplateOutletContext]="{ order: order }"></ng-container>
+                      <ng-container
+                        [ngTemplateOutlet]="abholfrist"
+                        [ngTemplateOutletContext]="{ order: order }"
+                      ></ng-container>
                     </span>
                   }
-                  @case (['Versand', 'B2B-Versand', 'DIG-Versand'].indexOf(order?.features?.orderType) > -1) {
+                  @case (
+                    ['Versand', 'B2B-Versand', 'DIG-Versand'].indexOf(
+                      order?.features?.orderType
+                    ) > -1
+                  ) {
                     @if ((order?.subsetItems)[0]?.estimatedDelivery) {
                       <span class="order-type">
                         Zustellung zwischen
-                        {{ ((order?.subsetItems)[0]?.estimatedDelivery?.start | date: 'EEE, dd.MM.')?.replace('.', '') }} und
-                        {{ ((order?.subsetItems)[0]?.estimatedDelivery?.stop | date: 'EEE, dd.MM.')?.replace('.', '') }}
+                        {{
+                          (
+                            (order?.subsetItems)[0]?.estimatedDelivery?.start
+                            | date: 'EEE, dd.MM.'
+                          )?.replace('.', '')
+                        }}
+                        und
+                        {{
+                          (
+                            (order?.subsetItems)[0]?.estimatedDelivery?.stop
+                            | date: 'EEE, dd.MM.'
+                          )?.replace('.', '')
+                        }}
                       </span>
                     } @else {
-                      <span class="order-type">Versanddatum {{ (order?.subsetItems)[0]?.estimatedShippingDate | date }}</span>
+                      <span class="order-type"
+                        >Versanddatum
+                        {{
+                          (order?.subsetItems)[0]?.estimatedShippingDate | date
+                        }}</span
+                      >
                     }
                   }
                   @default {
-                    <span class="order-type">{{ order?.features?.orderType }}</span>
+                    <span class="order-type">{{
+                      order?.features?.orderType
+                    }}</span>
                   }
                 }
               </div>
@@ -165,21 +247,31 @@
         }
       }
       @if (orderLast) {
-        <div class="flex flex-row justify-between items-center min-h-[3.3125rem] bg-white px-5 py-4 rounded-b">
+        <div
+          class="flex flex-row justify-between items-center min-h-[3.3125rem] bg-white px-5 py-4 rounded-b"
+        >
           @if (totalReadingPoints$ | async; as totalReadingPoints) {
             <span class="text-p2 font-bold">
-              {{ totalItemCount$ | async }} Artikel | {{ totalReadingPoints }} Lesepunkte
+              {{ totalItemCount$ | async }} Artikel |
+              {{ totalReadingPoints }} Lesepunkte
             </span>
           }
           <div class="flex flex-row items-center justify-center">
             <div class="text-p1 font-bold flex flex-row items-center">
-              <div class="mr-1">Gesamtsumme {{ totalPrice$ | async | currency: ' ' }} {{ totalPriceCurrency$ | async }}</div>
+              <div class="mr-1">
+                Gesamtsumme {{ totalPrice$ | async | currency: ' ' }}
+                {{ totalPriceCurrency$ | async }}
+              </div>
             </div>
-            @if ((takeNowOrders$ | async)?.length === 1 && (isB2BCustomer$ | async)) {
+            @if (
+              (takeNowOrders$ | async)?.length === 1 && (isB2BCustomer$ | async)
+            ) {
               <div
                 class="bg-brand text-white font-bold text-p1 outline-none border-none rounded-full px-6 py-3 ml-2"
-                >
-                <button class="cta-goods-out" (click)="navigateToShelfOut()">Zur Warenausgabe</button>
+              >
+                <button class="cta-goods-out" (click)="navigateToShelfOut()">
+                  Zur Warenausgabe
+                </button>
               </div>
             }
           </div>
@@ -192,12 +284,23 @@
 <ng-template #abholfrist let-order="order">
   @if (!(updatingPreferredPickUpDate$ | async)[(order?.subsetItems)[0].id]) {
     <div class="inline-flex">
-      <button [uiOverlayTrigger]="deadlineDatepicker" #deadlineDatepickerTrigger="uiOverlayTrigger" class="flex flex-row items-center">
+      <button
+        [uiOverlayTrigger]="deadlineDatepicker"
+        #deadlineDatepickerTrigger="uiOverlayTrigger"
+        class="flex flex-row items-center"
+      >
         <span class="mx-[0.625rem] font-normal">bis</span>
         <strong class="border-r border-[#AEB7C1] pr-4">
-          {{ ((order?.subsetItems)[0]?.preferredPickUpDate | date: 'dd.MM.yy') || 'TT.MM.JJJJ' }}
+          {{
+            ((order?.subsetItems)[0]?.preferredPickUpDate | date: 'dd.MM.yy') ||
+              'TT.MM.JJJJ'
+          }}
         </strong>
-        <shared-icon class="text-[#596470] ml-4" [size]="24" icon="isa-calendar"></shared-icon>
+        <shared-icon
+          class="text-[#596470] ml-4"
+          [size]="24"
+          icon="isa-calendar"
+        ></shared-icon>
       </button>
       <ui-datepicker
         #deadlineDatepicker
@@ -207,12 +310,15 @@
         [min]="minDateDatepicker"
         [disabledDaysOfWeek]="[0]"
         [(selected)]="selectedDate"
-        >
+      >
         <div #content class="grid grid-flow-row gap-2">
           <button
             class="rounded-full font-bold text-white bg-brand py-px-15 px-px-25"
-            (click)="updatePreferredPickUpDate(undefined, selectedDate); deadlineDatepickerTrigger.close()"
-            >
+            (click)="
+              updatePreferredPickUpDate(undefined, selectedDate);
+              deadlineDatepickerTrigger.close()
+            "
+          >
             Für den Warenkorb festlegen
           </button>
         </div>
@@ -225,15 +331,19 @@
 </ng-template>
 
 <div class="relative">
-  <div class="absolute left-1/2 bottom-10 inline-grid grid-flow-col gap-4 justify-center transform -translate-x-1/2">
+  <div
+    class="absolute left-1/2 bottom-10 flex flex-wrap w-full gap-4 justify-center transform -translate-x-1/2"
+  >
     <button
       *ifRole="'Store'"
       [disabled]="isPrinting$ | async"
       type="button"
       class="px-6 py-2 rounded-full border-2 border-solid border-brand text-brand bg-white font-bold text-lg whitespace-nowrap h-14 flex flex-row items-center justify-center print-button"
       (click)="printOrderConfirmation()"
+    >
+      <ui-spinner class="min-h-4 min-w-4" [show]="isPrinting$ | async"
+        >Bestellbestätigung drucken</ui-spinner
       >
-      <ui-spinner class="min-h-4 min-w-4" [show]="isPrinting$ | async">Bestellbestätigung drucken</ui-spinner>
     </button>
 
     @if (hasAbholung$ | async) {
@@ -241,9 +351,18 @@
         type="button"
         class="px-6 py-2 rounded-full border-2 border-solid border-brand text-brand bg-white font-bold text-lg whitespace-nowrap h-14"
         (click)="sendOrderConfirmation()"
-        >
+      >
         Bestellbestätigung senden
       </button>
     }
+    @if (displayRewardNavigation()) {
+      <button
+        type="button"
+        class="px-6 py-2 rounded-full border-2 border-solid border-brand text-white bg-brand font-bold text-lg whitespace-nowrap h-14"
+        (click)="navigateToReward()"
+      >
+        Zur Prämienausgabe
+      </button>
+    }
   </div>
 </div>

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

@@ -6,6 +6,7 @@ import {
   OnDestroy,
   OnInit,
   inject,
+  computed,
 } from '@angular/core';
 import { DomainCheckoutService } from '@domain/checkout';
 import { UiErrorModalComponent, UiModalService } from '@ui/modal';
@@ -33,6 +34,9 @@ import {
 import { EnvironmentService } from '@core/environment';
 import { SendOrderConfirmationModalService } from '@modal/send-order-confirmation';
 import { ToasterService } from '@shared/shell';
+import { SelectedRewardShoppingCartResource } from '@isa/checkout/data-access';
+import { injectTabId } from '@isa/core/tabs';
+import { PrimaryCustomerCardResource } from '@isa/crm/data-access';
 
 @Component({
   selector: 'page-checkout-summary',
@@ -44,6 +48,22 @@ import { ToasterService } from '@shared/shell';
 export class CheckoutSummaryComponent implements OnInit, OnDestroy {
   private _injector = inject(Injector);
 
+  #tabId = injectTabId();
+  #primaryCustomerCardResource = inject(PrimaryCustomerCardResource);
+  #rewardShoppingCartResource = inject(SelectedRewardShoppingCartResource)
+    .resource;
+
+  readonly rewardShoppingCartResponseValue =
+    this.#rewardShoppingCartResource.value.asReadonly();
+  readonly primaryCustomerCardValue =
+    this.#primaryCustomerCardResource.primaryCustomerCard;
+
+  displayRewardNavigation = computed(() => {
+    const rewardShoppingCart = this.rewardShoppingCartResponseValue();
+    const hasPrimaryCard = this.primaryCustomerCardValue();
+    return !!rewardShoppingCart?.items?.length && hasPrimaryCard;
+  });
+
   get sendOrderConfirmationModalService() {
     return this._injector.get(SendOrderConfirmationModalService);
   }
@@ -85,7 +105,7 @@ export class CheckoutSummaryComponent implements OnInit, OnDestroy {
       );
 
       if (ordersWithMultipleFeatures) {
-        for (let orderWithMultipleFeatures of ordersWithMultipleFeatures) {
+        for (const orderWithMultipleFeatures of ordersWithMultipleFeatures) {
           if (orderWithMultipleFeatures?.items?.length > 1) {
             const itemsWithOrderFeature =
               orderWithMultipleFeatures.items.filter(
@@ -397,7 +417,7 @@ export class CheckoutSummaryComponent implements OnInit, OnDestroy {
   }
 
   async navigateToShelfOut() {
-    let takeNowOrders = await this.takeNowOrders$.pipe(first()).toPromise();
+    const takeNowOrders = await this.takeNowOrders$.pipe(first()).toPromise();
     if (takeNowOrders.length != 1) return;
 
     try {
@@ -422,6 +442,10 @@ export class CheckoutSummaryComponent implements OnInit, OnDestroy {
     await this.sendOrderConfirmationModalService.open(orders);
   }
 
+  async navigateToReward() {
+    await this.router.navigate([`/${this.#tabId()}`, 'reward', 'cart']);
+  }
+
   async printOrderConfirmation() {
     this.isPrinting$.next(true);
     const orders = await this.displayOrders$.pipe(first()).toPromise();

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

@@ -1,30 +1,31 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { CheckoutSummaryComponent } from './checkout-summary.component';
-import { PageCheckoutPipeModule } from '../pipes/page-checkout-pipe.module';
-import { ProductImageModule } from '@cdn/product-image';
-import { RouterModule } from '@angular/router';
-import { UiCommonModule } from '@ui/common';
-import { UiSpinnerModule } from '@ui/spinner';
-import { UiDatepickerModule } from '@ui/datepicker';
-import { IconModule } from '@shared/components/icon';
-import { AuthModule } from '@core/auth';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    RouterModule,
-    PageCheckoutPipeModule,
-    ProductImageModule,
-    IconModule,
-    UiCommonModule,
-    UiSpinnerModule,
-    UiDatepickerModule,
-    AuthModule,
-    UiSpinnerModule,
-  ],
-  exports: [CheckoutSummaryComponent],
-  declarations: [CheckoutSummaryComponent],
-})
-export class CheckoutSummaryModule {}
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { CheckoutSummaryComponent } from './checkout-summary.component';
+import { PageCheckoutPipeModule } from '../pipes/page-checkout-pipe.module';
+import { ProductImageModule } from '@cdn/product-image';
+import { RouterModule } from '@angular/router';
+import { UiCommonModule } from '@ui/common';
+import { UiSpinnerModule } from '@ui/spinner';
+import { UiDatepickerModule } from '@ui/datepicker';
+import { IconModule } from '@shared/components/icon';
+import { AuthModule } from '@core/auth';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule,
+    PageCheckoutPipeModule,
+    ProductImageModule,
+    IconModule,
+    UiCommonModule,
+    UiSpinnerModule,
+    UiDatepickerModule,
+    AuthModule,
+    UiSpinnerModule,
+  ],
+  exports: [CheckoutSummaryComponent],
+  declarations: [CheckoutSummaryComponent],
+  providers: [],
+})
+export class CheckoutSummaryModule {}

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

@@ -4,6 +4,7 @@ import { CheckoutReviewComponent } from './checkout-review/checkout-review.compo
 import { CheckoutSummaryComponent } from './checkout-summary/checkout-summary.component';
 import { PageCheckoutComponent } from './page-checkout.component';
 import { CheckoutReviewDetailsComponent } from './checkout-review/details/checkout-review-details.component';
+import { canDeactivateTabCleanup } from '@isa/core/tabs';
 
 const routes: Routes = [
   {
@@ -22,10 +23,12 @@ const routes: Routes = [
       {
         path: 'summary',
         component: CheckoutSummaryComponent,
+        canDeactivate: [canDeactivateTabCleanup],
       },
       {
         path: 'summary/:orderIds',
         component: CheckoutSummaryComponent,
+        canDeactivate: [canDeactivateTabCleanup],
       },
       { path: '', pathMatch: 'full', redirectTo: 'review' },
     ],

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

@@ -1,9 +1,14 @@
 <ng-container *ngIf="orderItem$ | async; let orderItem">
   <div class="grid grid-flow-row gap-px-2">
-    <div class="bg-[#F5F7FA] flex flex-row justify-between items-center p-4 rounded-t">
-      <div class="grid grid-flow-col gap-[0.4375rem] items-center" *ngIf="features$ | async; let features; else: featureLoading">
-        <shared-icon *ngIf="features?.length > 0" [size]="24" icon="person"></shared-icon>
-        <div class="grid grid-flow-col gap-2 items-center font-bold text-p2" *ngFor="let feature of features">
+    <div
+      class="bg-[#F5F7FA] flex flex-row justify-between items-center p-4 rounded-t"
+    >
+      <div
+        class="grid grid-flow-col gap-[0.4375rem] items-center"
+        *ngIf="customerFeature$ | async; let feature; else: featureLoading"
+      >
+        <shared-icon *ngIf="!!feature" [size]="24" icon="person"></shared-icon>
+        <div class="grid grid-flow-col gap-2 items-center font-bold text-p2">
           {{ feature?.description }}
         </div>
       </div>
@@ -18,29 +23,54 @@
       </button>
     </div>
 
-    <div class="page-customer-order-details-header__details bg-white px-4 pt-4 pb-5">
+    <div
+      class="page-customer-order-details-header__details bg-white px-4 pt-4 pb-5"
+    >
       <h2
         class="page-customer-order-details-header__details-header items-center"
         [class.mb-8]="!orderItem?.features?.paid && !isKulturpass"
       >
         <div class="text-h2">
           {{ orderItem?.organisation }}
-          <ng-container *ngIf="!!orderItem?.organisation && (!!orderItem?.firstName || !!orderItem?.lastName)">-</ng-container>
+          <ng-container
+            *ngIf="
+              !!orderItem?.organisation &&
+              (!!orderItem?.firstName || !!orderItem?.lastName)
+            "
+            >-</ng-container
+          >
           {{ orderItem?.lastName }}
           {{ orderItem?.firstName }}
         </div>
-        <div class="page-customer-order-details-header__header-compartment text-h3">
-          {{ orderItem?.compartmentCode }}{{ orderItem?.compartmentInfo && '_' + orderItem?.compartmentInfo }}
+        <div
+          class="page-customer-order-details-header__header-compartment text-h3"
+        >
+          {{ orderItem?.compartmentCode
+          }}{{ orderItem?.compartmentInfo && '_' + orderItem?.compartmentInfo }}
         </div>
       </h2>
 
-      <div class="page-customer-order-details-header__paid-marker mt-[0.375rem]" *ngIf="orderItem?.features?.paid && !isKulturpass">
-        <div class="font-bold w-fit desktop-small:text-p2 px-3 py-[0.125rem] rounded text-white bg-[#26830C]">
+      <div
+        class="page-customer-order-details-header__paid-marker mt-[0.375rem]"
+        *ngIf="orderItem?.features?.paid && !isKulturpass"
+      >
+        <div
+          class="font-bold w-fit desktop-small:text-p2 px-3 py-[0.125rem] rounded text-white bg-[#26830C]"
+        >
           {{ orderItem?.features?.paid }}
         </div>
       </div>
-      <div class="page-customer-order-details-header__paid-marker mt-[0.375rem] text-[#26830C]" *ngIf="isKulturpass">
-        <svg class="fill-current mr-2" xmlns="http://www.w3.org/2000/svg" height="22" viewBox="0 -960 960 960" width="22">
+      <div
+        class="page-customer-order-details-header__paid-marker mt-[0.375rem] text-[#26830C]"
+        *ngIf="isKulturpass"
+      >
+        <svg
+          class="fill-current mr-2"
+          xmlns="http://www.w3.org/2000/svg"
+          height="22"
+          viewBox="0 -960 960 960"
+          width="22"
+        >
           <path
             d="M880-740v520q0 24-18 42t-42 18H140q-24 0-42-18t-18-42v-520q0-24 18-42t42-18h680q24 0 42 18t18 42ZM140-631h680v-109H140v109Zm0 129v282h680v-282H140Zm0 282v-520 520Z"
           />
@@ -49,25 +79,49 @@
       </div>
 
       <div class="page-customer-order-details-header__details-wrapper -mt-3">
-        <div class="flex flex-row page-customer-order-details-header__buyer-number" data-detail-id="Kundennummer">
+        <div
+          class="flex flex-row page-customer-order-details-header__buyer-number"
+          data-detail-id="Kundennummer"
+        >
           <div class="min-w-[9rem]">Kundennummer</div>
-          <div class="flex flex-row font-bold">{{ orderItem?.buyerNumber }}</div>
+          <div class="flex flex-row font-bold">
+            {{ orderItem?.buyerNumber }}
+          </div>
         </div>
-        <div class="flex flex-row page-customer-order-details-header__order-number" data-detail-id="VorgangId">
+        <div
+          class="flex flex-row page-customer-order-details-header__order-number"
+          data-detail-id="VorgangId"
+        >
           <div class="min-w-[9rem]">Vorgang-ID</div>
-          <div class="flex flex-row font-bold">{{ orderItem?.orderNumber }}</div>
+          <div class="flex flex-row font-bold">
+            {{ orderItem?.orderNumber }}
+          </div>
         </div>
-        <div class="flex flex-row page-customer-order-details-header__order-date" data-detail-id="Bestelldatum">
+        <div
+          class="flex flex-row page-customer-order-details-header__order-date"
+          data-detail-id="Bestelldatum"
+        >
           <div class="min-w-[9rem]">Bestelldatum</div>
-          <div class="flex flex-row font-bold">{{ orderItem?.orderDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
+          <div class="flex flex-row font-bold">
+            {{ orderItem?.orderDate | date: 'dd.MM.yy | HH:mm' }} Uhr
+          </div>
         </div>
-        <div class="flex flex-row page-customer-order-details-header__processing-status justify-between" data-detail-id="Status">
+        <div
+          class="flex flex-row page-customer-order-details-header__processing-status justify-between"
+          data-detail-id="Status"
+        >
           <div class="min-w-[9rem]">Status</div>
-          <div *ngIf="!(changeStatusLoader$ | async)" class="flex flex-row font-bold -mr-[0.125rem]">
+          <div
+            *ngIf="!(changeStatusLoader$ | async)"
+            class="flex flex-row font-bold -mr-[0.125rem]"
+          >
             <shared-icon
               class="mr-2 text-black flex items-center justify-center"
               [size]="16"
-              *ngIf="orderItem.processingStatus | processingStatus: 'icon'; let icon"
+              *ngIf="
+                orderItem.processingStatus | processingStatus: 'icon';
+                let icon
+              "
               [icon]="icon"
             ></shared-icon>
 
@@ -91,18 +145,36 @@
                   icon="arrow-drop-down"
                 ></shared-icon>
               </button>
-              <ui-dropdown #statusDropdown yPosition="below" xPosition="after" [xOffset]="8">
-                <button uiDropdownItem *ngFor="let action of statusActions$ | async" (click)="handleActionClick(action)">
+              <ui-dropdown
+                #statusDropdown
+                yPosition="below"
+                xPosition="after"
+                [xOffset]="8"
+              >
+                <button
+                  uiDropdownItem
+                  *ngFor="let action of statusActions$ | async"
+                  (click)="handleActionClick(action)"
+                >
                   {{ action.label }}
                 </button>
               </ui-dropdown>
             </ng-container>
           </div>
-          <ui-spinner *ngIf="changeStatusLoader$ | async; let loader" class="flex flex-row font-bold loader" [show]="loader"></ui-spinner>
+          <ui-spinner
+            *ngIf="changeStatusLoader$ | async; let loader"
+            class="flex flex-row font-bold loader"
+            [show]="loader"
+          ></ui-spinner>
         </div>
-        <div class="flex flex-row page-customer-order-details-header__order-source" data-detail-id="Bestellkanal">
+        <div
+          class="flex flex-row page-customer-order-details-header__order-source"
+          data-detail-id="Bestellkanal"
+        >
           <div class="min-w-[9rem]">Bestellkanal</div>
-          <div class="flex flex-row font-bold">{{ order?.features?.orderSource }}</div>
+          <div class="flex flex-row font-bold">
+            {{ order?.features?.orderSource }}
+          </div>
         </div>
         <div
           class="flex flex-row page-customer-order-details-header__change-date justify-between"
@@ -124,26 +196,39 @@
 
           <ng-template #changeDate>
             <div class="min-w-[9rem]">Geändert</div>
-            <div class="flex flex-row font-bold">{{ orderItem?.processingStatusDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
+            <div class="flex flex-row font-bold">
+              {{
+                orderItem?.processingStatusDate | date: 'dd.MM.yy | HH:mm'
+              }}
+              Uhr
+            </div>
           </ng-template>
         </div>
 
         <div
           class="flex flex-row page-customer-order-details-header__pick-up justify-between"
           data-detail-id="Wunschdatum"
-          *ngIf="orderItem.orderType === 1 && (orderItem.processingStatus === 16 || orderItem.processingStatus === 8192)"
+          *ngIf="
+            orderItem.orderType === 1 &&
+            (orderItem.processingStatus === 16 ||
+              orderItem.processingStatus === 8192)
+          "
         >
           <ng-container *ngTemplateOutlet="preferredPickUpDate"></ng-container>
         </div>
 
-        <div class="flex flex-col page-customer-order-details-header__dig-and-notification">
+        <div
+          class="flex flex-col page-customer-order-details-header__dig-and-notification"
+        >
           <div
             *ngIf="orderItem.orderType === 1"
             class="flex flex-row page-customer-order-details-header__notification"
             data-detail-id="Benachrichtigung"
           >
             <div class="min-w-[9rem]">Benachrichtigung</div>
-            <div class="flex flex-row font-bold">{{ (notificationsChannel | notificationsChannel) || '-' }}</div>
+            <div class="flex flex-row font-bold">
+              {{ (notificationsChannel | notificationsChannel) || '-' }}
+            </div>
           </div>
 
           <div
@@ -162,38 +247,50 @@
       <div *ngIf="showFeature" class="flex flex-row items-center mr-3">
         <ng-container [ngSwitch]="order.features.orderType">
           <ng-container *ngSwitchCase="'Versand'">
-            <div class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2">
+            <div
+              class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2"
+            >
               <shared-icon [size]="24" icon="isa-truck"></shared-icon>
             </div>
             <p class="font-bold text-p1">Versand</p>
           </ng-container>
           <ng-container *ngSwitchCase="'DIG-Versand'">
-            <div class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2">
+            <div
+              class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2"
+            >
               <shared-icon [size]="24" icon="isa-truck"></shared-icon>
             </div>
             <p class="font-bold text-p1">Versand</p>
           </ng-container>
           <ng-container *ngSwitchCase="'B2B-Versand'">
-            <div class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2">
+            <div
+              class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2"
+            >
               <shared-icon [size]="24" icon="isa-b2b-truck"></shared-icon>
             </div>
             <p class="font-bold text-p1">B2B-Versand</p>
           </ng-container>
           <ng-container *ngSwitchCase="'Abholung'">
-            <div class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2">
+            <div
+              class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2"
+            >
               <shared-icon [size]="24" icon="isa-box-out"></shared-icon>
             </div>
             <p class="font-bold text-p1 mr-3">Abholung</p>
             {{ orderItem.targetBranch }}
           </ng-container>
           <ng-container *ngSwitchCase="'Rücklage'">
-            <div class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2">
+            <div
+              class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2"
+            >
               <shared-icon [size]="24" icon="isa-shopping-bag"></shared-icon>
             </div>
             <p class="font-bold text-p1">Rücklage</p>
           </ng-container>
           <ng-container *ngSwitchCase="'Download'">
-            <div class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2">
+            <div
+              class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2"
+            >
               <shared-icon [size]="24" icon="isa-download"></shared-icon>
             </div>
             <p class="font-bold text-p1">Download</p>
@@ -201,50 +298,93 @@
         </ng-container>
       </div>
 
-      <div class="page-customer-order-details-header__additional-addresses" *ngIf="showAddresses">
+      <div
+        class="page-customer-order-details-header__additional-addresses"
+        *ngIf="showAddresses"
+      >
         <button (click)="openAddresses = !openAddresses" class="text-[#0556B4]">
-          Lieferadresse / Rechnungsadresse {{ openAddresses ? 'ausblenden' : 'anzeigen' }}
+          Lieferadresse / Rechnungsadresse
+          {{ openAddresses ? 'ausblenden' : 'anzeigen' }}
         </button>
 
-        <div class="page-customer-order-details-header__addresses-popover" *ngIf="openAddresses">
+        <div
+          class="page-customer-order-details-header__addresses-popover"
+          *ngIf="openAddresses"
+        >
           <button (click)="openAddresses = !openAddresses" class="close">
             <shared-icon icon="close" [size]="24"></shared-icon>
           </button>
 
-          <div class="page-customer-order-details-header__addresses-popover-data">
-            <div *ngIf="order.shipping" class="page-customer-order-details-header__addresses-popover-delivery">
+          <div
+            class="page-customer-order-details-header__addresses-popover-data"
+          >
+            <div
+              *ngIf="order.shipping"
+              class="page-customer-order-details-header__addresses-popover-delivery"
+            >
               <p>Lieferadresse</p>
-              <div class="page-customer-order-details-header__addresses-popover-delivery-data">
+              <div
+                class="page-customer-order-details-header__addresses-popover-delivery-data"
+              >
                 <ng-container *ngIf="order.shipping?.data?.organisation">
                   <p>{{ order.shipping?.data?.organisation?.name }}</p>
                   <p>{{ order.shipping?.data?.organisation?.department }}</p>
                 </ng-container>
-                <p>{{ order.shipping?.data?.firstName }} {{ order.shipping?.data?.lastName }}</p>
+                <p>
+                  {{ order.shipping?.data?.firstName }}
+                  {{ order.shipping?.data?.lastName }}
+                </p>
                 <p>{{ order.shipping?.data?.address?.info }}</p>
-                <p>{{ order.shipping?.data?.address?.street }} {{ order.shipping?.data?.address?.streetNumber }}</p>
-                <p>{{ order.shipping?.data?.address?.zipCode }} {{ order.shipping?.data?.address?.city }}</p>
+                <p>
+                  {{ order.shipping?.data?.address?.street }}
+                  {{ order.shipping?.data?.address?.streetNumber }}
+                </p>
+                <p>
+                  {{ order.shipping?.data?.address?.zipCode }}
+                  {{ order.shipping?.data?.address?.city }}
+                </p>
               </div>
             </div>
-            <div *ngIf="order.billing" class="page-customer-order-details-header__addresses-popover-billing">
+            <div
+              *ngIf="order.billing"
+              class="page-customer-order-details-header__addresses-popover-billing"
+            >
               <p>Rechnungsadresse</p>
-              <div class="page-customer-order-details-header__addresses-popover-billing-data">
+              <div
+                class="page-customer-order-details-header__addresses-popover-billing-data"
+              >
                 <ng-container *ngIf="order.billing?.data?.organisation">
                   <p>{{ order.billing?.data?.organisation?.name }}</p>
                   <p>{{ order.billing?.data?.organisation?.department }}</p>
                 </ng-container>
-                <p>{{ order.billing?.data?.firstName }} {{ order.billing?.data?.lastName }}</p>
+                <p>
+                  {{ order.billing?.data?.firstName }}
+                  {{ order.billing?.data?.lastName }}
+                </p>
                 <p>{{ order.billing?.data?.address?.info }}</p>
-                <p>{{ order.billing?.data?.address?.street }} {{ order.billing?.data?.address?.streetNumber }}</p>
-                <p>{{ order.billing?.data?.address?.zipCode }} {{ order.billing?.data?.address?.city }}</p>
+                <p>
+                  {{ order.billing?.data?.address?.street }}
+                  {{ order.billing?.data?.address?.streetNumber }}
+                </p>
+                <p>
+                  {{ order.billing?.data?.address?.zipCode }}
+                  {{ order.billing?.data?.address?.city }}
+                </p>
               </div>
             </div>
           </div>
         </div>
       </div>
 
-      <div class="page-customer-order-details-header__select grow" *ngIf="showMultiselect$ | async">
-        <button class="cta-select-all" (click)="selectAll()">Alle auswählen</button>
-        {{ selectedOrderItemCount$ | async }} von {{ orderItemCount$ | async }} Titeln
+      <div
+        class="page-customer-order-details-header__select grow"
+        *ngIf="showMultiselect$ | async"
+      >
+        <button class="cta-select-all" (click)="selectAll()">
+          Alle auswählen
+        </button>
+        {{ selectedOrderItemCount$ | async }} von
+        {{ orderItemCount$ | async }} Titeln
       </div>
     </div>
   </div>
@@ -263,13 +403,20 @@
       <button
         [uiOverlayTrigger]="deadlineDatepicker"
         #deadlineDatepickerTrigger="uiOverlayTrigger"
-        [disabled]="!isKulturpass && (!!orderItem?.features?.paid || (changeDateDisabled$ | async))"
+        [disabled]="
+          !isKulturpass &&
+          (!!orderItem?.features?.paid || (changeDateDisabled$ | async))
+        "
         class="cta-pickup-deadline"
       >
         <strong class="border-r border-[#AEB7C1] pr-4">
           {{ orderItem?.pickUpDeadline | date: 'dd.MM.yy' }}
         </strong>
-        <shared-icon class="text-[#596470] ml-4" [size]="24" icon="isa-calendar"></shared-icon>
+        <shared-icon
+          class="text-[#596470] ml-4"
+          [size]="24"
+          icon="isa-calendar"
+        ></shared-icon>
       </button>
       <ui-datepicker
         #deadlineDatepicker
@@ -282,25 +429,46 @@
         (save)="updatePickupDeadline($event)"
       ></ui-datepicker>
     </div>
-    <ui-spinner *ngIf="changeDateLoader$ | async; let loader" class="flex flex-row font-bold loader" [show]="loader"></ui-spinner>
+    <ui-spinner
+      *ngIf="changeDateLoader$ | async; let loader"
+      class="flex flex-row font-bold loader"
+      [show]="loader"
+    ></ui-spinner>
   </ng-template>
 
   <ng-template #preferredPickUpDate>
     <div class="min-w-[9rem]">Zurücklegen bis</div>
-    <div *ngIf="!(changePreferredDateLoader$ | async)" class="flex flex-row font-bold">
+    <div
+      *ngIf="!(changePreferredDateLoader$ | async)"
+      class="flex flex-row font-bold"
+    >
       <button
         [uiOverlayTrigger]="preferredPickUpDatePicker"
         #preferredPickUpDatePickerTrigger="uiOverlayTrigger"
-        [disabled]="(!isKulturpass && !!orderItem?.features?.paid) || (changeDateDisabled$ | async)"
+        [disabled]="
+          (!isKulturpass && !!orderItem?.features?.paid) ||
+          (changeDateDisabled$ | async)
+        "
         class="cta-pickup-preferred"
       >
-        <strong class="border-r border-[#AEB7C1] pr-4" *ngIf="preferredPickUpDate$ | async; let pickUpDate; else: selectTemplate">
+        <strong
+          class="border-r border-[#AEB7C1] pr-4"
+          *ngIf="
+            preferredPickUpDate$ | async;
+            let pickUpDate;
+            else: selectTemplate
+          "
+        >
           {{ pickUpDate | date: 'dd.MM.yy' }}
         </strong>
         <ng-template #selectTemplate>
           <strong class="border-r border-[#AEB7C1] pr-4">Auswählen</strong>
         </ng-template>
-        <shared-icon class="text-[#596470] ml-4" [size]="24" icon="isa-calendar"></shared-icon>
+        <shared-icon
+          class="text-[#596470] ml-4"
+          [size]="24"
+          icon="isa-calendar"
+        ></shared-icon>
       </button>
       <ui-datepicker
         #preferredPickUpDatePicker
@@ -313,7 +481,11 @@
         (save)="updatePreferredPickUpDate($event)"
       ></ui-datepicker>
     </div>
-    <ui-spinner *ngIf="changePreferredDateLoader$ | async; let loader" class="flex flex-row font-bold loader" [show]="loader"></ui-spinner>
+    <ui-spinner
+      *ngIf="changePreferredDateLoader$ | async; let loader"
+      class="flex flex-row font-bold loader"
+      [show]="loader"
+    ></ui-spinner>
   </ng-template>
 
   <ng-template #vslLieferdatum>
@@ -328,7 +500,11 @@
         <span class="border-r border-[#AEB7C1] pr-4">
           {{ orderItem?.estimatedShippingDate | date: 'dd.MM.yy' }}
         </span>
-        <shared-icon class="text-[#596470] ml-4" [size]="24" icon="isa-calendar"></shared-icon>
+        <shared-icon
+          class="text-[#596470] ml-4"
+          [size]="24"
+          icon="isa-calendar"
+        ></shared-icon>
       </button>
       <ui-datepicker
         #uiDatepicker
@@ -341,6 +517,10 @@
         (save)="updateEstimatedShippingDate($event)"
       ></ui-datepicker>
     </div>
-    <ui-spinner *ngIf="changeDateLoader$ | async; let loader" class="flex flex-row font-bold loader" [show]="loader"></ui-spinner>
+    <ui-spinner
+      *ngIf="changeDateLoader$ | async; let loader"
+      class="flex flex-row font-bold loader"
+      [show]="loader"
+    ></ui-spinner>
   </ng-template>
 </ng-container>

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

@@ -11,12 +11,17 @@ import {
 import { CrmCustomerService } from '@domain/crm';
 import { DomainOmsService } from '@domain/oms';
 import { NotificationChannel } from '@generated/swagger/checkout-api';
-import { KeyValueDTOOfStringAndString, OrderDTO, OrderItemListItemDTO } from '@generated/swagger/oms-api';
+import {
+  KeyValueDTOOfStringAndString,
+  OrderDTO,
+  OrderItemListItemDTO,
+} from '@generated/swagger/oms-api';
 import { DateAdapter } from '@ui/common';
 import { cloneDeep } from 'lodash';
 import { BehaviorSubject, combineLatest } from 'rxjs';
 import { filter, first, map, shareReplay, switchMap } from 'rxjs/operators';
 import { CustomerOrderDetailsStore } from '../customer-order-details.store';
+import { getEnabledCustomerFeature } from '@isa/crm/data-access';
 
 @Component({
   selector: 'page-customer-order-details-header',
@@ -39,14 +44,21 @@ export class CustomerOrderDetailsHeaderComponent implements OnChanges {
     return this.order?.features?.orderSource === 'KulturPass';
   }
 
-  minDateDatepicker = this.dateAdapter.addCalendarDays(this.dateAdapter.today(), -1);
+  minDateDatepicker = this.dateAdapter.addCalendarDays(
+    this.dateAdapter.today(),
+    -1,
+  );
   today = this.dateAdapter.today();
 
-  selectedOrderItemCount$ = this._store.selectedeOrderItemSubsetIds$.pipe(map((ids) => ids?.length ?? 0));
+  selectedOrderItemCount$ = this._store.selectedeOrderItemSubsetIds$.pipe(
+    map((ids) => ids?.length ?? 0),
+  );
 
   orderItemCount$ = this._store.items$.pipe(map((items) => items?.length ?? 0));
 
-  orderItem$ = this._store.items$.pipe(map((orderItems) => orderItems?.find((_) => true)));
+  orderItem$ = this._store.items$.pipe(
+    map((orderItems) => orderItems?.find((_) => true)),
+  );
 
   preferredPickUpDate$ = new BehaviorSubject<Date>(undefined);
 
@@ -58,37 +70,57 @@ export class CustomerOrderDetailsHeaderComponent implements OnChanges {
   changeStatusDisabled$ = this._store.changeActionDisabled$;
   changeDateDisabled$ = this.changeStatusDisabled$;
 
-  features$ = this.orderItem$.pipe(
+  customerFeature$ = this.orderItem$.pipe(
     filter((orderItem) => !!orderItem),
     switchMap((orderItem) =>
       this.customerService.getCustomers(orderItem.buyerNumber).pipe(
-        map((res) => res.result.find((c) => c.customerNumber === orderItem.buyerNumber)),
-        map((customer) => customer?.features || []),
-        map((features) => features.filter((f) => f.enabled && !!f.description)),
+        map((res) =>
+          res.result.find((c) => c.customerNumber === orderItem.buyerNumber),
+        ),
+        map((customer) => getEnabledCustomerFeature(customer?.features)),
       ),
     ),
     shareReplay(),
   );
 
   statusActions$ = this.orderItem$.pipe(
-    map((orderItem) => orderItem?.actions?.filter((action) => action.enabled === false)),
+    map((orderItem) =>
+      orderItem?.actions?.filter((action) => action.enabled === false),
+    ),
   );
 
-  showMultiselect$ = combineLatest([this._store.items$, this._store.fetchPartial$, this._store.itemsSelectable$]).pipe(
-    map(([orderItems, fetchPartial, multiSelect]) => multiSelect && fetchPartial && orderItems?.length > 1),
+  showMultiselect$ = combineLatest([
+    this._store.items$,
+    this._store.fetchPartial$,
+    this._store.itemsSelectable$,
+  ]).pipe(
+    map(
+      ([orderItems, fetchPartial, multiSelect]) =>
+        multiSelect && fetchPartial && orderItems?.length > 1,
+    ),
   );
 
-  crudaUpdate$ = this.orderItem$.pipe(map((orederItem) => !!(orederItem?.cruda & 4)));
+  crudaUpdate$ = this.orderItem$.pipe(
+    map((orederItem) => !!(orederItem?.cruda & 4)),
+  );
 
-  editButtonDisabled$ = combineLatest([this.changeStatusLoader$, this.crudaUpdate$]).pipe(
-    map(([changeStatusLoader, crudaUpdate]) => changeStatusLoader || !crudaUpdate),
+  editButtonDisabled$ = combineLatest([
+    this.changeStatusLoader$,
+    this.crudaUpdate$,
+  ]).pipe(
+    map(
+      ([changeStatusLoader, crudaUpdate]) => changeStatusLoader || !crudaUpdate,
+    ),
   );
 
   canEditStatus$ = combineLatest([this.statusActions$, this.crudaUpdate$]).pipe(
-    map(([statusActions, crudaUpdate]) => statusActions?.length > 0 && crudaUpdate),
+    map(
+      ([statusActions, crudaUpdate]) =>
+        statusActions?.length > 0 && crudaUpdate,
+    ),
   );
 
-  openAddresses: boolean = false;
+  openAddresses = false;
 
   get digOrderNumber(): string {
     return this.order?.linkedRecords?.find((_) => true)?.number;
@@ -96,7 +128,8 @@ export class CustomerOrderDetailsHeaderComponent implements OnChanges {
 
   get showAddresses(): boolean {
     return (
-      (this.order?.orderType === 2 || this.order?.orderType === 4) && (!!this.order?.shipping || !!this.order?.billing)
+      (this.order?.orderType === 2 || this.order?.orderType === 4) &&
+      (!!this.order?.shipping || !!this.order?.billing)
     );
   }
 
@@ -130,10 +163,20 @@ export class CustomerOrderDetailsHeaderComponent implements OnChanges {
     this.changeStatusDisabled$.next(true);
     const orderItems = cloneDeep(this._store.items);
     for (const item of orderItems) {
-      if (this.dateAdapter.compareDate(deadline, new Date(item.pickUpDeadline)) !== 0) {
+      if (
+        this.dateAdapter.compareDate(
+          deadline,
+          new Date(item.pickUpDeadline),
+        ) !== 0
+      ) {
         try {
           const res = await this.omsService
-            .setPickUpDeadline(item.orderId, item.orderItemId, item.orderItemSubsetId, deadline?.toISOString())
+            .setPickUpDeadline(
+              item.orderId,
+              item.orderItemId,
+              item.orderItemSubsetId,
+              deadline?.toISOString(),
+            )
             .pipe(first())
             .toPromise();
           item.pickUpDeadline = deadline.toISOString();
@@ -152,7 +195,12 @@ export class CustomerOrderDetailsHeaderComponent implements OnChanges {
     this.changeStatusDisabled$.next(true);
     const orderItems = cloneDeep(this._store.items);
     for (const item of orderItems) {
-      if (this.dateAdapter.compareDate(estimatedShippingDate, new Date(item.pickUpDeadline)) !== 0) {
+      if (
+        this.dateAdapter.compareDate(
+          estimatedShippingDate,
+          new Date(item.pickUpDeadline),
+        ) !== 0
+      ) {
         try {
           const res = await this.omsService
             .setEstimatedShippingDate(
@@ -198,7 +246,10 @@ export class CustomerOrderDetailsHeaderComponent implements OnChanges {
     try {
       await this.omsService.setPreferredPickUpDate({ data }).toPromise();
       this.order.items.forEach((item) => {
-        item.data.subsetItems.forEach((subsetItem) => (subsetItem.data.preferredPickUpDate = date.toISOString()));
+        item.data.subsetItems.forEach(
+          (subsetItem) =>
+            (subsetItem.data.preferredPickUpDate = date.toISOString()),
+        );
       });
       this.findLatestPreferredPickUpDate();
     } catch (error) {
@@ -218,7 +269,10 @@ export class CustomerOrderDetailsHeaderComponent implements OnChanges {
     if (subsetItems?.length > 0) {
       latestDate = new Date(
         subsetItems?.reduce((a, b) => {
-          return new Date(a.data.preferredPickUpDate) > new Date(b.data.preferredPickUpDate) ? a : b;
+          return new Date(a.data.preferredPickUpDate) >
+            new Date(b.data.preferredPickUpDate)
+            ? a
+            : b;
         })?.data?.preferredPickUpDate,
       );
     }

apps/isa-app/src/page/customer/components/customer-result-list/customer-result-list-item-full/customer-result-list-item-full.component.ts

@@ -1,6 +1,7 @@
 import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
 import { CustomerInfoDTO } from '@generated/swagger/crm-api';
 import { CustomerLabelColor, CustomerLabelTextColor } from '../../../constants';
+import { getEnabledCustomerFeature } from '@isa/crm/data-access';
 
 @Component({
   selector: 'page-customer-result-list-item-full',
@@ -15,11 +16,9 @@ export class CustomerResultListItemFullComponent {
   customerLabelTextColor = CustomerLabelTextColor;
 
   get label() {
-    return this.customer?.features?.find((f) => f.enabled);
+    return getEnabledCustomerFeature(this.customer?.features);
   }
 
   @Input()
   customer: CustomerInfoDTO;
-
-  constructor() {}
 }

apps/isa-app/src/page/customer/components/customer-result-list/customer-result-list-item/customer-result-list-item.component.ts

@@ -1,6 +1,7 @@
 import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
 import { CustomerInfoDTO } from '@generated/swagger/crm-api';
 import { CustomerLabelColor, CustomerLabelTextColor } from '../../../constants';
+import { getEnabledCustomerFeature } from '@isa/crm/data-access';
 
 @Component({
   selector: 'page-customer-result-list-item',
@@ -15,11 +16,9 @@ export class CustomerResultListItemComponent {
   customerLabelTextColor = CustomerLabelTextColor;
 
   get label() {
-    return this.customer?.features?.find((f) => f.enabled);
+    return getEnabledCustomerFeature(this.customer?.features);
   }
 
   @Input()
   customer: CustomerInfoDTO;
-
-  constructor() {}
 }

apps/isa-app/src/page/customer/components/customer-type-selector/customer-type-selector.component.html

@@ -1,4 +1,4 @@
-<ng-container *ifRole="'Store'">
+<!-- <ng-container *ifRole="'Store'">
   @if (customerType !== 'b2b') {
     <shared-checkbox
       [ngModel]="p4mUser"
@@ -8,15 +8,17 @@
       Kundenkarte
     </shared-checkbox>
   }
-</ng-container>
+</ng-container> -->
 @for (option of filteredOptions$ | async; track option) {
   @if (option?.enabled !== false) {
     <shared-checkbox
       [ngModel]="option.value === customerType"
-      (ngModelChange)="setValue({ customerType: $event ? option.value : undefined })"
+      (ngModelChange)="
+        setValue({ customerType: $event ? option.value : undefined })
+      "
       [disabled]="isOptionDisabled(option)"
       [name]="option.value"
-      >
+    >
       {{ option.label }}
     </shared-checkbox>
   }

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

@@ -21,7 +21,13 @@ import { OptionDTO } from '@generated/swagger/checkout-api';
 import { UiCheckboxComponent } from '@ui/checkbox';
 import { first, isBoolean, isString } from 'lodash';
 import { combineLatest, Observable, Subject } from 'rxjs';
-import { distinctUntilChanged, filter, map, shareReplay, switchMap } from 'rxjs/operators';
+import {
+  distinctUntilChanged,
+  filter,
+  map,
+  shareReplay,
+  switchMap,
+} from 'rxjs/operators';
 
 export interface CustomerTypeSelectorState {
   processId: number;
@@ -58,18 +64,18 @@ export class CustomerTypeSelectorComponent
 
   @Input()
   get value() {
-    if (this.p4mUser) {
-      return `${this.customerType}-p4m`;
-    }
+    // if (this.p4mUser) {
+    //   return `${this.customerType}-p4m`;
+    // }
     return this.customerType;
   }
   set value(value: string) {
-    if (value.includes('-p4m')) {
-      this.p4mUser = true;
-      this.customerType = value.replace('-p4m', '');
-    } else {
-      this.customerType = value;
-    }
+    // if (value.includes('-p4m')) {
+    //   this.p4mUser = true;
+    //   this.customerType = value.replace('-p4m', '');
+    // } else {
+    this.customerType = value;
+    // }
   }
 
   @Output()
@@ -111,29 +117,36 @@ export class CustomerTypeSelectorComponent
   get filteredOptions$() {
     const options$ = this.select((s) => s.options).pipe(distinctUntilChanged());
     const p4mUser$ = this.select((s) => s.p4mUser).pipe(distinctUntilChanged());
-    const customerType$ = this.select((s) => s.customerType).pipe(distinctUntilChanged());
+    const customerType$ = this.select((s) => s.customerType).pipe(
+      distinctUntilChanged(),
+    );
     return combineLatest([options$, p4mUser$, customerType$]).pipe(
       filter(([options]) => options?.length > 0),
       map(([options, p4mUser, customerType]) => {
-        const initial = { p4mUser: this.p4mUser, customerType: this.customerType };
+        const initial = {
+          p4mUser: this.p4mUser,
+          customerType: this.customerType,
+        };
         let result: OptionDTO[] = options;
-        if (p4mUser) {
-          result = result.filter((o) => o.value === 'store' || (o.value === 'webshop' && o.enabled !== false));
+        // if (p4mUser) {
+        //   result = result.filter((o) => o.value === 'store' || (o.value === 'webshop' && o.enabled !== false));
 
-          result = result.map((o) => {
-            if (o.value === 'store') {
-              return { ...o, enabled: false };
-            }
-            return o;
-          });
-        }
+        //   result = result.map((o) => {
+        //     if (o.value === 'store') {
+        //       return { ...o, enabled: false };
+        //     }
+        //     return o;
+        //   });
+        // }
 
         if (customerType === 'b2b' && this.p4mUser) {
           this.p4mUser = false;
         }
 
-        if (initial.p4mUser !== this.p4mUser || initial.customerType !== this.customerType) {
-          this.setValue({ customerType: this.customerType, p4mUser: this.p4mUser });
+        if (initial.customerType !== this.customerType) {
+          // if (initial.p4mUser !== this.p4mUser || initial.customerType !== this.customerType) {
+          // this.setValue({ customerType: this.customerType, p4mUser: this.p4mUser });
+          this.setValue({ customerType: this.customerType });
         }
 
         return result;
@@ -224,42 +237,51 @@ export class CustomerTypeSelectorComponent
     if (typeof value === 'string') {
       this.value = value;
     } else {
-      if (isBoolean(value.p4mUser)) {
-        this.p4mUser = value.p4mUser;
-      }
+      // if (isBoolean(value.p4mUser)) {
+      //   this.p4mUser = value.p4mUser;
+      // }
       if (isString(value.customerType)) {
         this.customerType = value.customerType;
-      } else if (this.p4mUser) {
-        // Implementierung wie im PBI #3467 beschrieben
-        // wenn customerType nicht gesetzt wird und p4mUser true ist,
-        // dann customerType auf store setzen.
-        // wenn dies nicht möglich ist da der Warenkob keinen store Kunden zulässt,
-        // dann customerType auf webshop setzen.
-        // wenn dies nicht möglich ist da der Warenkob keinen webshop Kunden zulässt,
-        // dann customerType auf den ersten verfügbaren setzen und p4mUser auf false setzen.
-        if (this.enabledOptions.some((o) => o.value === 'store')) {
-          this.customerType = 'store';
-        } else if (this.enabledOptions.some((o) => o.value === 'webshop')) {
-          this.customerType = 'webshop';
-        } else {
-          this.p4mUser = false;
-          const includesGuest = this.enabledOptions.some((o) => o.value === 'guest');
-          this.customerType = includesGuest ? 'guest' : first(this.enabledOptions)?.value;
-        }
-      } else {
+      }
+      // else if (this.p4mUser) {
+      //   // Implementierung wie im PBI #3467 beschrieben
+      //   // wenn customerType nicht gesetzt wird und p4mUser true ist,
+      //   // dann customerType auf store setzen.
+      //   // wenn dies nicht möglich ist da der Warenkob keinen store Kunden zulässt,
+      //   // dann customerType auf webshop setzen.
+      //   // wenn dies nicht möglich ist da der Warenkob keinen webshop Kunden zulässt,
+      //   // dann customerType auf den ersten verfügbaren setzen und p4mUser auf false setzen.
+      //   if (this.enabledOptions.some((o) => o.value === 'store')) {
+      //     this.customerType = 'store';
+      //   } else if (this.enabledOptions.some((o) => o.value === 'webshop')) {
+      //     this.customerType = 'webshop';
+      //   } else {
+      //     this.p4mUser = false;
+      //     const includesGuest = this.enabledOptions.some((o) => o.value === 'guest');
+      //     this.customerType = includesGuest ? 'guest' : first(this.enabledOptions)?.value;
+      //   }
+      // }
+      else {
         // wenn customerType nicht gesetzt wird und p4mUser false ist,
         // dann customerType auf den ersten verfügbaren setzen der nicht mit dem aktuellen customerType übereinstimmt.
         this.customerType =
-          first(this.enabledOptions.filter((o) => o.value === this.customerType))?.value ?? this.customerType;
+          first(
+            this.enabledOptions.filter((o) => o.value === this.customerType),
+          )?.value ?? this.customerType;
       }
     }
 
-    if (this.customerType !== initial.customerType || this.p4mUser !== initial.p4mUser) {
+    if (
+      this.customerType !== initial.customerType ||
+      this.p4mUser !== initial.p4mUser
+    ) {
       this.onChange(this.value);
       this.onTouched();
       this.valueChanges.emit(this.value);
     }
 
-    this.checkboxes?.find((c) => c.name === this.customerType)?.writeValue(true);
+    this.checkboxes
+      ?.find((c) => c.name === this.customerType)
+      ?.writeValue(true);
   }
 }

apps/isa-app/src/page/customer/components/form-blocks/index.ts

@@ -7,6 +7,6 @@ export * from './interests';
 export * from './name';
 export * from './newsletter';
 export * from './organisation';
-export * from './p4m-number';
+// export * from './p4m-number';
 export * from './phone-numbers';
 export * from './form-block';

apps/isa-app/src/page/customer/components/form-blocks/interests/interests-form-block.component.ts

@@ -1,92 +1,99 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
-import { FormBlock } from '../form-block';
-import { InterestsFormBlockData } from './interests-form-block-data';
-import { LoyaltyCardService } from '@generated/swagger/crm-api';
-import { shareReplay } from 'rxjs/operators';
-import { isEqual } from 'lodash';
-import { memorize } from '@utils/common';
-
-@Component({
-  selector: 'app-interests-form-block',
-  templateUrl: 'interests-form-block.component.html',
-  styleUrls: ['interests-form-block.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
-})
-export class InterestsFormBlockComponent extends FormBlock<InterestsFormBlockData, UntypedFormGroup> {
-  private _interests: Map<string, string>;
-
-  get interests(): Map<string, string> {
-    return this._interests;
-  }
-  set interests(value: Map<string, string>) {
-    if (!isEqual(this._interests, value)) {
-      this._interests = value;
-      if (this.control) {
-        this.updateInterestControls();
-      }
-    }
-  }
-
-  get tabIndexEnd() {
-    return this.tabIndexStart + this.interests?.keys.length;
-  }
-
-  constructor(
-    private _fb: UntypedFormBuilder,
-    private _LoyaltyCardService: LoyaltyCardService,
-  ) {
-    super();
-
-    this.getInterests().subscribe({
-      next: (response) => {
-        const interests = new Map<string, string>();
-        response.result.forEach((preference) => {
-          interests.set(preference.key, preference.value);
-        });
-        this.interests = interests;
-      },
-      error: (error) => {
-        console.error(error);
-      },
-    });
-  }
-
-  @memorize({ ttl: 28800000 })
-  getInterests() {
-    return this._LoyaltyCardService.LoyaltyCardListInteressen().pipe(shareReplay(1));
-  }
-
-  updateInterestControls() {
-    const fData = this.data ?? {};
-    this.interests?.forEach((value, key) => {
-      if (!this.control.contains(key)) {
-        this.control.addControl(key, new UntypedFormControl(fData[key] ?? false));
-      }
-    });
-
-    Object.keys(this.control.controls).forEach((key) => {
-      if (!this.interests.has(key)) {
-        this.control.removeControl(key);
-      }
-    });
-  }
-
-  initializeControl(data?: InterestsFormBlockData): void {
-    const fData = data ?? {};
-    this.control = this._fb.group({});
-
-    this.interests?.forEach((value, key) => {
-      this.control.addControl(key, new UntypedFormControl(fData[key] ?? false));
-    });
-  }
-
-  _patchValue(update: { previous: InterestsFormBlockData; current: InterestsFormBlockData }): void {
-    const fData = update.current ?? {};
-
-    this.interests?.forEach((value, key) => {
-      this.control.get(key).patchValue(fData[key] ?? false);
-    });
-  }
-}
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import {
+  UntypedFormBuilder,
+  UntypedFormControl,
+  UntypedFormGroup,
+} from '@angular/forms';
+import { FormBlock } from '../form-block';
+import { InterestsFormBlockData } from './interests-form-block-data';
+import { isEqual } from 'lodash';
+
+@Component({
+  selector: 'app-interests-form-block',
+  templateUrl: 'interests-form-block.component.html',
+  styleUrls: ['interests-form-block.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
+})
+export class InterestsFormBlockComponent extends FormBlock<
+  InterestsFormBlockData,
+  UntypedFormGroup
+> {
+  private _interests: Map<string, string>;
+
+  get interests(): Map<string, string> {
+    return this._interests;
+  }
+  set interests(value: Map<string, string>) {
+    if (!isEqual(this._interests, value)) {
+      this._interests = value;
+      if (this.control) {
+        this.updateInterestControls();
+      }
+    }
+  }
+
+  get tabIndexEnd() {
+    return this.tabIndexStart + this.interests?.keys.length;
+  }
+
+  constructor(private _fb: UntypedFormBuilder) {
+    super();
+
+    // this.getInterests().subscribe({
+    //   next: (response) => {
+    //     const interests = new Map<string, string>();
+    //     response.result.forEach((preference) => {
+    //       interests.set(preference.key, preference.value);
+    //     });
+    //     this.interests = interests;
+    //   },
+    //   error: (error) => {
+    //     console.error(error);
+    //   },
+    // });
+  }
+
+  // @memorize({ ttl: 28800000 })
+  // getInterests() {
+  //   return this._LoyaltyCardService.LoyaltyCardListInteressen().pipe(shareReplay(1));
+  // }
+
+  updateInterestControls() {
+    const fData = this.data ?? {};
+    this.interests?.forEach((value, key) => {
+      if (!this.control.contains(key)) {
+        this.control.addControl(
+          key,
+          new UntypedFormControl(fData[key] ?? false),
+        );
+      }
+    });
+
+    Object.keys(this.control.controls).forEach((key) => {
+      if (!this.interests.has(key)) {
+        this.control.removeControl(key);
+      }
+    });
+  }
+
+  initializeControl(data?: InterestsFormBlockData): void {
+    const fData = data ?? {};
+    this.control = this._fb.group({});
+
+    this.interests?.forEach((value, key) => {
+      this.control.addControl(key, new UntypedFormControl(fData[key] ?? false));
+    });
+  }
+
+  _patchValue(update: {
+    previous: InterestsFormBlockData;
+    current: InterestsFormBlockData;
+  }): void {
+    const fData = update.current ?? {};
+
+    this.interests?.forEach((value, key) => {
+      this.control.get(key).patchValue(fData[key] ?? false);
+    });
+  }
+}

apps/isa-app/src/page/customer/components/form-blocks/p4m-number/index.ts

@@ -1,4 +1,4 @@
-// start:ng42.barrel
-export * from './p4m-number-form-block.component';
-export * from './p4m-number-form-block.module';
-// end:ng42.barrel
+// // start:ng42.barrel
+// export * from './p4m-number-form-block.component';
+// export * from './p4m-number-form-block.module';
+// // end:ng42.barrel

apps/isa-app/src/page/customer/components/form-blocks/p4m-number/p4m-number-form-block.component.html

@@ -1,4 +1,4 @@
-<shared-form-control label="Kundenkartencode" class="flex-grow">
+<!-- <shared-form-control label="Kundenkartencode" class="flex-grow">
   <input
     placeholder="Kundenkartencode"
     class="input-control"
@@ -13,4 +13,4 @@
     <button type="button" (click)="scan()">
       <shared-icon icon="barcode-scan" [size]="32"></shared-icon>
     </button>
-  }
+  } -->

apps/isa-app/src/page/customer/components/form-blocks/p4m-number/p4m-number-form-block.component.ts

@@ -1,49 +1,49 @@
-import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
-import { UntypedFormControl, Validators } from '@angular/forms';
-import { FormBlockControl } from '../form-block';
-import { ScanAdapterService } from '@adapter/scan';
+// import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+// import { UntypedFormControl, Validators } from '@angular/forms';
+// import { FormBlockControl } from '../form-block';
+// import { ScanAdapterService } from '@adapter/scan';
 
-@Component({
-  selector: 'app-p4m-number-form-block',
-  templateUrl: 'p4m-number-form-block.component.html',
-  styleUrls: ['p4m-number-form-block.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
-})
-export class P4mNumberFormBlockComponent extends FormBlockControl<string> {
-  get tabIndexEnd() {
-    return this.tabIndexStart;
-  }
+// @Component({
+//   selector: 'app-p4m-number-form-block',
+//   templateUrl: 'p4m-number-form-block.component.html',
+//   styleUrls: ['p4m-number-form-block.component.scss'],
+//   changeDetection: ChangeDetectionStrategy.OnPush,
+//   standalone: false,
+// })
+// export class P4mNumberFormBlockComponent extends FormBlockControl<string> {
+//   get tabIndexEnd() {
+//     return this.tabIndexStart;
+//   }
 
-  constructor(
-    private scanAdapter: ScanAdapterService,
-    private changeDetectorRef: ChangeDetectorRef,
-  ) {
-    super();
-  }
+//   constructor(
+//     private scanAdapter: ScanAdapterService,
+//     private changeDetectorRef: ChangeDetectorRef,
+//   ) {
+//     super();
+//   }
 
-  updateValidators(): void {
-    this.control.setValidators([...this.getValidatorFn()]);
-    this.control.setAsyncValidators(this.getAsyncValidatorFn());
-    this.control.updateValueAndValidity();
-  }
+//   updateValidators(): void {
+//     this.control.setValidators([...this.getValidatorFn()]);
+//     this.control.setAsyncValidators(this.getAsyncValidatorFn());
+//     this.control.updateValueAndValidity();
+//   }
 
-  initializeControl(data?: string): void {
-    this.control = new UntypedFormControl(data ?? '', [Validators.required], this.getAsyncValidatorFn());
-  }
+//   initializeControl(data?: string): void {
+//     this.control = new UntypedFormControl(data ?? '', [Validators.required], this.getAsyncValidatorFn());
+//   }
 
-  _patchValue(update: { previous: string; current: string }): void {
-    this.control.patchValue(update.current);
-  }
+//   _patchValue(update: { previous: string; current: string }): void {
+//     this.control.patchValue(update.current);
+//   }
 
-  scan() {
-    this.scanAdapter.scan().subscribe((result) => {
-      this.control.patchValue(result);
-      this.changeDetectorRef.markForCheck();
-    });
-  }
+//   scan() {
+//     this.scanAdapter.scan().subscribe((result) => {
+//       this.control.patchValue(result);
+//       this.changeDetectorRef.markForCheck();
+//     });
+//   }
 
-  canScan() {
-    return this.scanAdapter.isReady();
-  }
-}
+//   canScan() {
+//     return this.scanAdapter.isReady();
+//   }
+// }

apps/isa-app/src/page/customer/components/form-blocks/p4m-number/p4m-number-form-block.module.ts

@@ -1,14 +1,14 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+// import { NgModule } from '@angular/core';
+// import { CommonModule } from '@angular/common';
 
-import { P4mNumberFormBlockComponent } from './p4m-number-form-block.component';
-import { ReactiveFormsModule } from '@angular/forms';
-import { IconComponent } from '@shared/components/icon';
-import { FormControlComponent } from '@shared/components/form-control';
+// import { P4mNumberFormBlockComponent } from './p4m-number-form-block.component';
+// import { ReactiveFormsModule } from '@angular/forms';
+// import { IconComponent } from '@shared/components/icon';
+// import { FormControlComponent } from '@shared/components/form-control';
 
-@NgModule({
-  imports: [CommonModule, ReactiveFormsModule, FormControlComponent, IconComponent],
-  exports: [P4mNumberFormBlockComponent],
-  declarations: [P4mNumberFormBlockComponent],
-})
-export class P4mNumberFormBlockModule {}
+// @NgModule({
+//   imports: [CommonModule, ReactiveFormsModule, FormControlComponent, IconComponent],
+//   exports: [P4mNumberFormBlockComponent],
+//   declarations: [P4mNumberFormBlockComponent],
+// })
+// export class P4mNumberFormBlockModule {}

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

@@ -1,4 +1,8 @@
-<div class="wrapper text-center" [@cardFlip]="state" (@cardFlip.done)="flipAnimationDone($event)">
+<div
+  class="wrapper text-center"
+  [@cardFlip]="state"
+  (@cardFlip.done)="flipAnimationDone($event)"
+>
   @if (cardDetails) {
     <div class="card-main">
       <div class="icons text-brand">
@@ -36,12 +40,18 @@
       <div class="barcode-button">
         @if (!isCustomerCard || (isCustomerCard && !frontside)) {
           <div class="barcode-field">
-            <img class="barcode" src="/assets/images/barcode.png" alt="Barcode" />
+            <img
+              class="barcode"
+              src="/assets/images/barcode.png"
+              alt="Barcode"
+            />
           </div>
         }
         @if (isCustomerCard && frontside) {
           <div>
-            <button class="button" (click)="onRewardShop()">Zum Prämienshop</button>
+            <button class="button" (click)="navigateToReward()">
+              Zum Prämienshop
+            </button>
           </div>
         }
       </div>
@@ -55,7 +65,11 @@
     }
     @if (isCustomerCard && frontside) {
       <div class="logo ml-2">
-        <img class="logo-picture" src="/assets/images/Hugendubel_Logo.png" alt="Hugendubel Logo" />
+        <img
+          class="logo-picture"
+          src="/assets/images/Hugendubel_Logo.png"
+          alt="Hugendubel Logo"
+        />
       </div>
     }
   </div>

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

@@ -1,8 +1,18 @@
-import { animate, state, style, transition, trigger } from '@angular/animations';
+import {
+  animate,
+  state,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations';
 import { DecimalPipe } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
+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 { Router } from '@angular/router';
+import { CustomerSearchNavigation } from '@shared/services/navigation';
 
 @Component({
   selector: 'page-customer-kundenkarte',
@@ -35,18 +45,45 @@ import { BonusCardInfoDTO } from '@generated/swagger/crm-api';
   ],
 })
 export class KundenkarteComponent implements OnInit {
+  #tabId = injectTabId();
+  #router = inject(Router);
+  #navigationState = inject(NavigationStateService);
+  #customerNavigationService = inject(CustomerSearchNavigation);
+
   @Input() cardDetails: BonusCardInfoDTO;
   @Input() isCustomerCard: boolean;
+  @Input() customerId: number;
+
   frontside: boolean;
   state: 'front' | 'flip' | 'back' = 'front';
 
-  constructor() {}
-
   ngOnInit() {
     this.frontside = true;
   }
 
-  onRewardShop(): void {}
+  async navigateToReward() {
+    const tabId = this.#tabId();
+    const customerId = this.customerId;
+
+    if (!customerId || !tabId) {
+      return;
+    }
+
+    this.#navigationState.preserveContext(
+      {
+        returnUrl: `/${tabId}/reward`,
+        autoTriggerContinueFn: true,
+      },
+      'select-customer',
+    );
+
+    await this.#router.navigate(
+      this.#customerNavigationService.detailsRoute({
+        processId: tabId,
+        customerId,
+      }).path,
+    );
+  }
 
   onDeletePartnerCard(): void {}
 

apps/isa-app/src/page/customer/create-customer/abstract-create-customer.ts

@@ -1,5 +1,12 @@
 import { HttpErrorResponse } from '@angular/common/http';
-import { ChangeDetectorRef, Directive, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Directive,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  inject,
+} from '@angular/core';
 import {
   AbstractControl,
   AsyncValidatorFn,
@@ -11,7 +18,12 @@ import {
 import { ActivatedRoute, Router } from '@angular/router';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { CrmCustomerService } from '@domain/crm';
-import { AddressDTO, CustomerDTO, PayerDTO, ShippingAddressDTO } from '@generated/swagger/crm-api';
+import {
+  AddressDTO,
+  CustomerDTO,
+  PayerDTO,
+  ShippingAddressDTO,
+} from '@generated/swagger/crm-api';
 import { UiErrorModalComponent, UiModalService } from '@ui/modal';
 import { UiValidators } from '@ui/validators';
 import { isNull } from 'lodash';
@@ -42,7 +54,10 @@ import {
   mapCustomerInfoDtoToCustomerCreateFormData,
 } from './customer-create-form-data';
 import { AddressSelectionModalService } from '../modals';
-import { CustomerCreateNavigation, CustomerSearchNavigation } from '@shared/services/navigation';
+import {
+  CustomerCreateNavigation,
+  CustomerSearchNavigation,
+} from '@shared/services/navigation';
 
 @Directive()
 export abstract class AbstractCreateCustomer implements OnInit, OnDestroy {
@@ -104,7 +119,12 @@ export abstract class AbstractCreateCustomer implements OnInit, OnDestroy {
     );
 
     this.processId$
-      .pipe(startWith(undefined), bufferCount(2, 1), takeUntil(this.onDestroy$), delay(100))
+      .pipe(
+        startWith(undefined),
+        bufferCount(2, 1),
+        takeUntil(this.onDestroy$),
+        delay(100),
+      )
       .subscribe(async ([previous, current]) => {
         if (previous === undefined) {
           await this._initFormData();
@@ -155,7 +175,10 @@ export abstract class AbstractCreateCustomer implements OnInit, OnDestroy {
     }
   }
 
-  async addOrUpdateBreadcrumb(processId: number, formData: CustomerCreateFormData) {
+  async addOrUpdateBreadcrumb(
+    processId: number,
+    formData: CustomerCreateFormData,
+  ) {
     await this.breadcrumb.addOrUpdateBreadcrumbIfNotExists({
       key: processId,
       name: 'Kundendaten erfassen',
@@ -195,7 +218,10 @@ export abstract class AbstractCreateCustomer implements OnInit, OnDestroy {
     console.log('customerTypeChanged', customerType);
   }
 
-  addFormBlock(key: keyof CustomerCreateFormData, block: FormBlock<any, AbstractControl>) {
+  addFormBlock(
+    key: keyof CustomerCreateFormData,
+    block: FormBlock<any, AbstractControl>,
+  ) {
     this.form.addControl(key, block.control);
     this.cdr.markForCheck();
   }
@@ -232,7 +258,10 @@ export abstract class AbstractCreateCustomer implements OnInit, OnDestroy {
       return true;
     }
     // Check Year + Month
-    else if (inputDate.getFullYear() === minBirthDate.getFullYear() && inputDate.getMonth() < minBirthDate.getMonth()) {
+    else if (
+      inputDate.getFullYear() === minBirthDate.getFullYear() &&
+      inputDate.getMonth() < minBirthDate.getMonth()
+    ) {
       return true;
     }
     // Check Year + Month + Day
@@ -279,70 +308,80 @@ export abstract class AbstractCreateCustomer implements OnInit, OnDestroy {
     );
   };
 
-  checkLoyalityCardValidator: AsyncValidatorFn = (control) => {
-    return of(control.value).pipe(
-      delay(500),
-      mergeMap((value) => {
-        const customerId = this.formData?._meta?.customerDto?.id ?? this.formData?._meta?.customerInfoDto?.id;
-        return this.customerService.checkLoyaltyCard({ loyaltyCardNumber: value, customerId }).pipe(
-          map((response) => {
-            if (response.error) {
-              throw response.message;
-            }
+  // checkLoyalityCardValidator: AsyncValidatorFn = (control) => {
+  //   return of(control.value).pipe(
+  //     delay(500),
+  //     mergeMap((value) => {
+  //       const customerId = this.formData?._meta?.customerDto?.id ?? this.formData?._meta?.customerInfoDto?.id;
+  //       return this.customerService.checkLoyaltyCard({ loyaltyCardNumber: value, customerId }).pipe(
+  //         map((response) => {
+  //           if (response.error) {
+  //             throw response.message;
+  //           }
 
-            /**
-             * #4485 Kubi // Verhalten mit angelegte aber nicht verknüpfte Kundenkartencode in Kundensuche und Kundendaten erfassen ist nicht gleich
-             * Fall1: Kundenkarte hat Daten in point4more:
-             * Sobald Kundenkartencode in Feld "Kundenkartencode" reingegeben wird- werden die Daten von point4more in Formular "Kundendaten Erfassen" eingefügt und ersetzen (im Ganzen, nicht inkremental) die Daten in Felder, falls welche schon reingetippt werden.
-             * Fall2: Kundenkarte hat keine Daten in point4more:
-             * Sobald Kundenkartencode in Feld "Kundenkartencode" reingegeben wird- bleiben die Daten in Formular "Kundendaten Erfassen" in Felder, falls welche schon reingetippt werden.
-             */
-            if (response.result && response.result.customer) {
-              const customer = response.result.customer;
-              const data = mapCustomerInfoDtoToCustomerCreateFormData(customer);
+  //           /**
+  //            * #4485 Kubi // Verhalten mit angelegte aber nicht verknüpfte Kundenkartencode in Kundensuche und Kundendaten erfassen ist nicht gleich
+  //            * Fall1: Kundenkarte hat Daten in point4more:
+  //            * Sobald Kundenkartencode in Feld "Kundenkartencode" reingegeben wird- werden die Daten von point4more in Formular "Kundendaten Erfassen" eingefügt und ersetzen (im Ganzen, nicht inkremental) die Daten in Felder, falls welche schon reingetippt werden.
+  //            * Fall2: Kundenkarte hat keine Daten in point4more:
+  //            * Sobald Kundenkartencode in Feld "Kundenkartencode" reingegeben wird- bleiben die Daten in Formular "Kundendaten Erfassen" in Felder, falls welche schon reingetippt werden.
+  //            */
+  //           if (response.result && response.result.customer) {
+  //             const customer = response.result.customer;
+  //             const data = mapCustomerInfoDtoToCustomerCreateFormData(customer);
 
-              if (data.name.firstName && data.name.lastName) {
-                // Fall1
-                this._formData.next(data);
-              } else {
-                // Fall2 Hier müssen die Metadaten gesetzt werden um eine verknüfung zur kundenkarte zu ermöglichen.
-                const current = this.formData;
-                current._meta = data._meta;
-                current.p4m = data.p4m;
-              }
-            }
+  //             if (data.name.firstName && data.name.lastName) {
+  //               // Fall1
+  //               this._formData.next(data);
+  //             } else {
+  //               // Fall2 Hier müssen die Metadaten gesetzt werden um eine verknüfung zur kundenkarte zu ermöglichen.
+  //               const current = this.formData;
+  //               current._meta = data._meta;
+  //               current.p4m = data.p4m;
+  //             }
+  //           }
 
-            return null;
-          }),
-          catchError((error) => {
-            if (error instanceof HttpErrorResponse) {
-              if (error?.error?.invalidProperties?.loyaltyCardNumber) {
-                return of({ invalid: error.error.invalidProperties.loyaltyCardNumber });
-              } else {
-                return of({ invalid: 'Kundenkartencode ist ungültig' });
-              }
-            }
-          }),
-        );
-      }),
-      tap(() => {
-        control.markAsTouched();
-        this.cdr.markForCheck();
-      }),
-    );
-  };
+  //           return null;
+  //         }),
+  //         catchError((error) => {
+  //           if (error instanceof HttpErrorResponse) {
+  //             if (error?.error?.invalidProperties?.loyaltyCardNumber) {
+  //               return of({ invalid: error.error.invalidProperties.loyaltyCardNumber });
+  //             } else {
+  //               return of({ invalid: 'Kundenkartencode ist ungültig' });
+  //             }
+  //           }
+  //         }),
+  //       );
+  //     }),
+  //     tap(() => {
+  //       control.markAsTouched();
+  //       this.cdr.markForCheck();
+  //     }),
+  //   );
+  // };
 
   async navigateToCustomerDetails(customer: CustomerDTO) {
     const processId = await this.processId$.pipe(first()).toPromise();
-    const route = this.customerSearchNavigation.detailsRoute({ processId, customerId: customer.id, customer });
+    const route = this.customerSearchNavigation.detailsRoute({
+      processId,
+      customerId: customer.id,
+      customer,
+    });
 
-    return this.router.navigate(route.path, { queryParams: route.urlTree.queryParams });
+    return this.router.navigate(route.path, {
+      queryParams: route.urlTree.queryParams,
+    });
   }
 
   async validateAddressData(address: AddressDTO): Promise<AddressDTO> {
-    const addressValidationResult = await this.addressVlidationModal.validateAddress(address);
+    const addressValidationResult =
+      await this.addressVlidationModal.validateAddress(address);
 
-    if (addressValidationResult !== undefined && (addressValidationResult as any) !== 'continue') {
+    if (
+      addressValidationResult !== undefined &&
+      (addressValidationResult as any) !== 'continue'
+    ) {
       address = addressValidationResult;
     }
 
@@ -389,7 +428,9 @@ export abstract class AbstractCreateCustomer implements OnInit, OnDestroy {
         } catch (error) {
           this.form.enable();
           setTimeout(() => {
-            this.addressFormBlock.setAddressValidationError(error.error.invalidProperties);
+            this.addressFormBlock.setAddressValidationError(
+              error.error.invalidProperties,
+            );
           }, 10);
 
           return;
@@ -397,7 +438,10 @@ export abstract class AbstractCreateCustomer implements OnInit, OnDestroy {
       }
     }
 
-    if (data.birthDate && isNull(UiValidators.date(new UntypedFormControl(data.birthDate)))) {
+    if (
+      data.birthDate &&
+      isNull(UiValidators.date(new UntypedFormControl(data.birthDate)))
+    ) {
       customer.dateOfBirth = data.birthDate;
     }
 
@@ -406,11 +450,15 @@ export abstract class AbstractCreateCustomer implements OnInit, OnDestroy {
 
       if (this.validateShippingAddress) {
         try {
-          billingAddress.address = await this.validateAddressData(billingAddress.address);
+          billingAddress.address = await this.validateAddressData(
+            billingAddress.address,
+          );
         } catch (error) {
           this.form.enable();
           setTimeout(() => {
-            this.addressFormBlock.setAddressValidationError(error.error.invalidProperties);
+            this.addressFormBlock.setAddressValidationError(
+              error.error.invalidProperties,
+            );
           }, 10);
 
           return;
@@ -426,15 +474,21 @@ export abstract class AbstractCreateCustomer implements OnInit, OnDestroy {
     }
 
     if (data.deviatingDeliveryAddress?.deviatingAddress) {
-      const shippingAddress = this.mapToShippingAddress(data.deviatingDeliveryAddress);
+      const shippingAddress = this.mapToShippingAddress(
+        data.deviatingDeliveryAddress,
+      );
 
       if (this.validateShippingAddress) {
         try {
-          shippingAddress.address = await this.validateAddressData(shippingAddress.address);
+          shippingAddress.address = await this.validateAddressData(
+            shippingAddress.address,
+          );
         } catch (error) {
           this.form.enable();
           setTimeout(() => {
-            this.deviatingDeliveryAddressFormBlock.setAddressValidationError(error.error.invalidProperties);
+            this.deviatingDeliveryAddressFormBlock.setAddressValidationError(
+              error.error.invalidProperties,
+            );
           }, 10);
 
           return;
@@ -474,7 +528,13 @@ export abstract class AbstractCreateCustomer implements OnInit, OnDestroy {
     };
   }
 
-  mapToBillingAddress({ name, address, email, organisation, phoneNumbers }: DeviatingAddressFormBlockData): PayerDTO {
+  mapToBillingAddress({
+    name,
+    address,
+    email,
+    organisation,
+    phoneNumbers,
+  }: DeviatingAddressFormBlockData): PayerDTO {
     return {
       gender: name?.gender,
       title: name?.title,

apps/isa-app/src/page/customer/create-customer/create-customer.module.ts

@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core';
 import { CreateB2BCustomerModule } from './create-b2b-customer/create-b2b-customer.module';
 import { CreateGuestCustomerModule } from './create-guest-customer';
-import { CreateP4MCustomerModule } from './create-p4m-customer';
+// import { CreateP4MCustomerModule } from './create-p4m-customer';
 import { CreateStoreCustomerModule } from './create-store-customer/create-store-customer.module';
 import { CreateWebshopCustomerModule } from './create-webshop-customer/create-webshop-customer.module';
-import { UpdateP4MWebshopCustomerModule } from './update-p4m-webshop-customer';
+// import { UpdateP4MWebshopCustomerModule } from './update-p4m-webshop-customer';
 import { CreateCustomerComponent } from './create-customer.component';
 
 @NgModule({
@@ -13,8 +13,8 @@ import { CreateCustomerComponent } from './create-customer.component';
     CreateGuestCustomerModule,
     CreateStoreCustomerModule,
     CreateWebshopCustomerModule,
-    CreateP4MCustomerModule,
-    UpdateP4MWebshopCustomerModule,
+    // CreateP4MCustomerModule,
+    // UpdateP4MWebshopCustomerModule,
     CreateCustomerComponent,
   ],
   exports: [
@@ -22,8 +22,8 @@ import { CreateCustomerComponent } from './create-customer.component';
     CreateGuestCustomerModule,
     CreateStoreCustomerModule,
     CreateWebshopCustomerModule,
-    CreateP4MCustomerModule,
-    UpdateP4MWebshopCustomerModule,
+    // CreateP4MCustomerModule,
+    // UpdateP4MWebshopCustomerModule,
     CreateCustomerComponent,
   ],
 })

apps/isa-app/src/page/customer/create-customer/create-p4m-customer/create-p4m-customer.component.html

@@ -1,10 +1,10 @@
-@if (formData$ | async; as data) {
+<!-- @if (formData$ | async; as data) {
   <form (keydown.enter)="$event.preventDefault()">
     <h1 class="title flex flex-row items-center justify-center">
-      Kundendaten erfassen
-      <!-- <span
+      Kundendaten erfassen -->
+<!-- <span
     class="rounded-full ml-4 h-8 w-8 text-xl text-center border-2 border-solid border-brand text-brand">i</span> -->
-  </h1>
+<!--  </h1>
   <p class="description">
     Um Sie als Kunde beim nächsten
     <br />
@@ -135,4 +135,4 @@
     </button>
   </div>
 </form>
-}
+} -->