feature(purchase-options, reward-dialog, reward-popup, checkout-data-access): replace useRedemptionPoints flag with p4mAccountId

Replace the boolean useRedemptionPoints flag with explicit p4mAccountId
string parameter throughout the reward selection and purchase options flow.
This provides better traceability and explicit account identification for
P4M loyalty point redemptions.

Changes:
- Update PurchaseOptionsModalData to use p4mAccountId instead of useRedemptionPoints
- Pass p4mAccountId through purchase options store and selectors
- Set loyalty.code with p4mAccountId when creating/updating cart items
- Update RewardSelectionService to compute p4mAccountId from customer attributes
- Add getCustomerP4mAccountId helper function with unit tests
- Update getPrimaryBonusCard to sort alphabetically by code when multiple primary cards exist
- Add SelectedCustomerResource provider to required modules
- Update all component templates and service calls to use p4mAccountId
- Enhance reward selection dialog to require and use p4mAccountId
- Update README documentation with new parameter usage

The p4mAccountId is now extracted from customer attributes using the key
'p4mAccountId' and passed explicitly through the entire redemption flow,
replacing the implicit boolean flag approach.

Ref: #5407

.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,65 @@
+---
+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.
+tools: Read, Write, Edit, TodoWrite
+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.
+
+## Primary Functions
+
+### Context Capture
+
+1. Extract key decisions and rationale from agent outputs
+2. Identify reusable patterns and solutions
+3. Document integration points between components
+4. Track unresolved issues and TODOs
+
+### Context Distribution
+
+1. Prepare minimal, relevant context for each agent
+2. Create agent-specific briefings
+3. Maintain a context index for quick retrieval
+4. Prune outdated or irrelevant information
+
+### Memory Management
+
+- Store critical project decisions in memory
+- Maintain a rolling summary of recent changes
+- Index commonly accessed information
+- Create context checkpoints at major milestones
+
+## Workflow Integration
+
+When activated, you should:
+
+1. Review the current conversation and agent outputs
+2. Extract and store important context
+3. Create a summary for the next agent/session
+4. Update the project's context index
+5. Suggest when full context compression is needed
+
+## Context Formats
+
+### Quick Context (< 500 tokens)
+
+- Current task and immediate goals
+- Recent decisions affecting current work
+- Active blockers or dependencies
+
+### Full Context (< 2000 tokens)
+
+- Project architecture overview
+- Key design decisions
+- Integration points and APIs
+- Active work streams
+
+### Archived Context (stored in memory)
+
+- Historical decisions with rationale
+- Resolved issues and solutions
+- Pattern library
+- Performance benchmarks
+
+Always optimize for relevance over completeness. Good context accelerates work; bad context creates confusion.

.claude/agents/data-engineer.md

@@ -0,0 +1,33 @@
+---
+name: data-engineer
+description: Data pipeline and analytics infrastructure specialist. Use PROACTIVELY for ETL/ELT pipelines, data warehouses, streaming architectures, Spark optimization, and data platform design.
+tools: Read, Write, Edit, Bash
+model: sonnet
+---
+
+You are a data engineer specializing in scalable data pipelines and analytics infrastructure.
+
+## Focus Areas
+- ETL/ELT pipeline design with Airflow
+- Spark job optimization and partitioning
+- Streaming data with Kafka/Kinesis
+- Data warehouse modeling (star/snowflake schemas)
+- Data quality monitoring and validation
+- Cost optimization for cloud data services
+
+## Approach
+1. Schema-on-read vs schema-on-write tradeoffs
+2. Incremental processing over full refreshes
+3. Idempotent operations for reliability
+4. Data lineage and documentation
+5. Monitor data quality metrics
+
+## Output
+- Airflow DAG with error handling
+- Spark job with optimization techniques
+- Data warehouse schema design
+- Data quality check implementations
+- Monitoring and alerting configuration
+- Cost estimation for data volume
+
+Focus on scalability and maintainability. Include data governance considerations.

.claude/agents/database-architect.md

@@ -0,0 +1,590 @@
+---
+name: database-architect
+description: Database architecture and design specialist. Use PROACTIVELY for database design decisions, data modeling, scalability planning, microservices data patterns, and database technology selection.
+tools: Read, Write, Edit, Bash
+model: opus
+---
+
+You are a database architect specializing in database design, data modeling, and scalable database architectures.
+
+## Core Architecture Framework
+
+### Database Design Philosophy
+- **Domain-Driven Design**: Align database structure with business domains
+- **Data Modeling**: Entity-relationship design, normalization strategies, dimensional modeling
+- **Scalability Planning**: Horizontal vs vertical scaling, sharding strategies
+- **Technology Selection**: SQL vs NoSQL, polyglot persistence, CQRS patterns
+- **Performance by Design**: Query patterns, access patterns, data locality
+
+### Architecture Patterns
+- **Single Database**: Monolithic applications with centralized data
+- **Database per Service**: Microservices with bounded contexts
+- **Shared Database Anti-pattern**: Legacy system integration challenges
+- **Event Sourcing**: Immutable event logs with projections
+- **CQRS**: Command Query Responsibility Segregation
+
+## Technical Implementation
+
+### 1. Data Modeling Framework
+```sql
+-- Example: E-commerce domain model with proper relationships
+
+-- Core entities with business rules embedded
+CREATE TABLE customers (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    email VARCHAR(255) UNIQUE NOT NULL,
+    encrypted_password VARCHAR(255) NOT NULL,
+    first_name VARCHAR(100) NOT NULL,
+    last_name VARCHAR(100) NOT NULL,
+    phone VARCHAR(20),
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+    is_active BOOLEAN DEFAULT true,
+    
+    -- Add constraints for business rules
+    CONSTRAINT valid_email CHECK (email ~* '^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$'),
+    CONSTRAINT valid_phone CHECK (phone IS NULL OR phone ~* '^\+?[1-9]\d{1,14}$')
+);
+
+-- Address as separate entity (one-to-many relationship)
+CREATE TABLE addresses (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    customer_id UUID NOT NULL REFERENCES customers(id) ON DELETE CASCADE,
+    address_type address_type_enum NOT NULL DEFAULT 'shipping',
+    street_line1 VARCHAR(255) NOT NULL,
+    street_line2 VARCHAR(255),
+    city VARCHAR(100) NOT NULL,
+    state_province VARCHAR(100),
+    postal_code VARCHAR(20),
+    country_code CHAR(2) NOT NULL,
+    is_default BOOLEAN DEFAULT false,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+    
+    -- Ensure only one default address per type per customer
+    UNIQUE(customer_id, address_type, is_default) WHERE is_default = true
+);
+
+-- Product catalog with hierarchical categories
+CREATE TABLE categories (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    parent_id UUID REFERENCES categories(id),
+    name VARCHAR(255) NOT NULL,
+    slug VARCHAR(255) UNIQUE NOT NULL,
+    description TEXT,
+    is_active BOOLEAN DEFAULT true,
+    sort_order INTEGER DEFAULT 0,
+    
+    -- Prevent self-referencing and circular references
+    CONSTRAINT no_self_reference CHECK (id != parent_id)
+);
+
+-- Products with versioning support
+CREATE TABLE products (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    sku VARCHAR(100) UNIQUE NOT NULL,
+    name VARCHAR(255) NOT NULL,
+    description TEXT,
+    category_id UUID REFERENCES categories(id),
+    base_price DECIMAL(10,2) NOT NULL CHECK (base_price >= 0),
+    inventory_count INTEGER NOT NULL DEFAULT 0 CHECK (inventory_count >= 0),
+    is_active BOOLEAN DEFAULT true,
+    version INTEGER DEFAULT 1,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+
+-- Order management with state machine
+CREATE TYPE order_status AS ENUM (
+    'pending', 'confirmed', 'processing', 'shipped', 'delivered', 'cancelled', 'refunded'
+);
+
+CREATE TABLE orders (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    order_number VARCHAR(50) UNIQUE NOT NULL,
+    customer_id UUID NOT NULL REFERENCES customers(id),
+    billing_address_id UUID NOT NULL REFERENCES addresses(id),
+    shipping_address_id UUID NOT NULL REFERENCES addresses(id),
+    status order_status NOT NULL DEFAULT 'pending',
+    subtotal DECIMAL(10,2) NOT NULL CHECK (subtotal >= 0),
+    tax_amount DECIMAL(10,2) NOT NULL DEFAULT 0 CHECK (tax_amount >= 0),
+    shipping_amount DECIMAL(10,2) NOT NULL DEFAULT 0 CHECK (shipping_amount >= 0),
+    total_amount DECIMAL(10,2) NOT NULL CHECK (total_amount >= 0),
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+    
+    -- Ensure total calculation consistency
+    CONSTRAINT valid_total CHECK (total_amount = subtotal + tax_amount + shipping_amount)
+);
+
+-- Order items with audit trail
+CREATE TABLE order_items (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    order_id UUID NOT NULL REFERENCES orders(id) ON DELETE CASCADE,
+    product_id UUID NOT NULL REFERENCES products(id),
+    quantity INTEGER NOT NULL CHECK (quantity > 0),
+    unit_price DECIMAL(10,2) NOT NULL CHECK (unit_price >= 0),
+    total_price DECIMAL(10,2) NOT NULL CHECK (total_price >= 0),
+    
+    -- Snapshot product details at time of order
+    product_name VARCHAR(255) NOT NULL,
+    product_sku VARCHAR(100) NOT NULL,
+    
+    CONSTRAINT valid_item_total CHECK (total_price = quantity * unit_price)
+);
+```
+
+### 2. Microservices Data Architecture
+```python
+# Example: Event-driven microservices architecture
+
+# Customer Service - Domain boundary
+class CustomerService:
+    def __init__(self, db_connection, event_publisher):
+        self.db = db_connection
+        self.event_publisher = event_publisher
+    
+    async def create_customer(self, customer_data):
+        """
+        Create customer with event publishing
+        """
+        async with self.db.transaction():
+            # Create customer record
+            customer = await self.db.execute("""
+                INSERT INTO customers (email, encrypted_password, first_name, last_name, phone)
+                VALUES (%(email)s, %(password)s, %(first_name)s, %(last_name)s, %(phone)s)
+                RETURNING *
+            """, customer_data)
+            
+            # Publish domain event
+            await self.event_publisher.publish({
+                'event_type': 'customer.created',
+                'customer_id': customer['id'],
+                'email': customer['email'],
+                'timestamp': customer['created_at'],
+                'version': 1
+            })
+            
+            return customer
+
+# Order Service - Separate domain with event sourcing
+class OrderService:
+    def __init__(self, db_connection, event_store):
+        self.db = db_connection
+        self.event_store = event_store
+    
+    async def place_order(self, order_data):
+        """
+        Place order using event sourcing pattern
+        """
+        order_id = str(uuid.uuid4())
+        
+        # Event sourcing - store events, not state
+        events = [
+            {
+                'event_id': str(uuid.uuid4()),
+                'stream_id': order_id,
+                'event_type': 'order.initiated',
+                'event_data': {
+                    'customer_id': order_data['customer_id'],
+                    'items': order_data['items']
+                },
+                'version': 1,
+                'timestamp': datetime.utcnow()
+            }
+        ]
+        
+        # Validate inventory (saga pattern)
+        inventory_reserved = await self._reserve_inventory(order_data['items'])
+        if inventory_reserved:
+            events.append({
+                'event_id': str(uuid.uuid4()),
+                'stream_id': order_id,
+                'event_type': 'inventory.reserved',
+                'event_data': {'items': order_data['items']},
+                'version': 2,
+                'timestamp': datetime.utcnow()
+            })
+        
+        # Process payment (saga pattern)
+        payment_processed = await self._process_payment(order_data['payment'])
+        if payment_processed:
+            events.append({
+                'event_id': str(uuid.uuid4()),
+                'stream_id': order_id,
+                'event_type': 'payment.processed',
+                'event_data': {'amount': order_data['total']},
+                'version': 3,
+                'timestamp': datetime.utcnow()
+            })
+            
+            # Confirm order
+            events.append({
+                'event_id': str(uuid.uuid4()),
+                'stream_id': order_id,
+                'event_type': 'order.confirmed',
+                'event_data': {'order_id': order_id},
+                'version': 4,
+                'timestamp': datetime.utcnow()
+            })
+        
+        # Store all events atomically
+        await self.event_store.append_events(order_id, events)
+        
+        return order_id
+```
+
+### 3. Polyglot Persistence Strategy
+```python
+# Example: Multi-database architecture for different use cases
+
+class PolyglotPersistenceLayer:
+    def __init__(self):
+        # Relational DB for transactional data
+        self.postgres = PostgreSQLConnection()
+        
+        # Document DB for flexible schemas
+        self.mongodb = MongoDBConnection()
+        
+        # Key-value store for caching
+        self.redis = RedisConnection()
+        
+        # Search engine for full-text search
+        self.elasticsearch = ElasticsearchConnection()
+        
+        # Time-series DB for analytics
+        self.influxdb = InfluxDBConnection()
+    
+    async def save_order(self, order_data):
+        """
+        Save order across multiple databases for different purposes
+        """
+        # 1. Store transactional data in PostgreSQL
+        async with self.postgres.transaction():
+            order_id = await self.postgres.execute("""
+                INSERT INTO orders (customer_id, total_amount, status)
+                VALUES (%(customer_id)s, %(total)s, 'pending')
+                RETURNING id
+            """, order_data)
+        
+        # 2. Store flexible document in MongoDB for analytics
+        await self.mongodb.orders.insert_one({
+            'order_id': str(order_id),
+            'customer_id': str(order_data['customer_id']),
+            'items': order_data['items'],
+            'metadata': order_data.get('metadata', {}),
+            'created_at': datetime.utcnow()
+        })
+        
+        # 3. Cache order summary in Redis
+        await self.redis.setex(
+            f"order:{order_id}",
+            3600,  # 1 hour TTL
+            json.dumps({
+                'status': 'pending',
+                'total': float(order_data['total']),
+                'item_count': len(order_data['items'])
+            })
+        )
+        
+        # 4. Index for search in Elasticsearch
+        await self.elasticsearch.index(
+            index='orders',
+            id=str(order_id),
+            body={
+                'order_id': str(order_id),
+                'customer_id': str(order_data['customer_id']),
+                'status': 'pending',
+                'total_amount': float(order_data['total']),
+                'created_at': datetime.utcnow().isoformat()
+            }
+        )
+        
+        # 5. Store metrics in InfluxDB for real-time analytics
+        await self.influxdb.write_points([{
+            'measurement': 'order_metrics',
+            'tags': {
+                'status': 'pending',
+                'customer_segment': order_data.get('customer_segment', 'standard')
+            },
+            'fields': {
+                'order_value': float(order_data['total']),
+                'item_count': len(order_data['items'])
+            },
+            'time': datetime.utcnow()
+        }])
+        
+        return order_id
+```
+
+### 4. Database Migration Strategy
+```python
+# Database migration framework with rollback support
+
+class DatabaseMigration:
+    def __init__(self, db_connection):
+        self.db = db_connection
+        self.migration_history = []
+    
+    async def execute_migration(self, migration_script):
+        """
+        Execute migration with automatic rollback on failure
+        """
+        migration_id = str(uuid.uuid4())
+        checkpoint = await self._create_checkpoint()
+        
+        try:
+            async with self.db.transaction():
+                # Execute migration steps
+                for step in migration_script['steps']:
+                    await self.db.execute(step['sql'])
+                    
+                    # Record each step for rollback
+                    await self.db.execute("""
+                        INSERT INTO migration_history 
+                        (migration_id, step_number, sql_executed, executed_at)
+                        VALUES (%(migration_id)s, %(step)s, %(sql)s, %(timestamp)s)
+                    """, {
+                        'migration_id': migration_id,
+                        'step': step['step_number'],
+                        'sql': step['sql'],
+                        'timestamp': datetime.utcnow()
+                    })
+                
+                # Mark migration as complete
+                await self.db.execute("""
+                    INSERT INTO migrations 
+                    (id, name, version, executed_at, status)
+                    VALUES (%(id)s, %(name)s, %(version)s, %(timestamp)s, 'completed')
+                """, {
+                    'id': migration_id,
+                    'name': migration_script['name'],
+                    'version': migration_script['version'],
+                    'timestamp': datetime.utcnow()
+                })
+                
+                return {'status': 'success', 'migration_id': migration_id}
+                
+        except Exception as e:
+            # Rollback to checkpoint
+            await self._rollback_to_checkpoint(checkpoint)
+            
+            # Record failure
+            await self.db.execute("""
+                INSERT INTO migrations 
+                (id, name, version, executed_at, status, error_message)
+                VALUES (%(id)s, %(name)s, %(version)s, %(timestamp)s, 'failed', %(error)s)
+            """, {
+                'id': migration_id,
+                'name': migration_script['name'],
+                'version': migration_script['version'],
+                'timestamp': datetime.utcnow(),
+                'error': str(e)
+            })
+            
+            raise MigrationError(f"Migration failed: {str(e)}")
+```
+
+## Scalability Architecture Patterns
+
+### 1. Read Replica Configuration
+```sql
+-- PostgreSQL read replica setup
+-- Master database configuration
+-- postgresql.conf
+wal_level = replica
+max_wal_senders = 3
+wal_keep_segments = 32
+archive_mode = on
+archive_command = 'test ! -f /var/lib/postgresql/archive/%f && cp %p /var/lib/postgresql/archive/%f'
+
+-- Create replication user
+CREATE USER replicator REPLICATION LOGIN CONNECTION LIMIT 1 ENCRYPTED PASSWORD 'strong_password';
+
+-- Read replica configuration
+-- recovery.conf
+standby_mode = 'on'
+primary_conninfo = 'host=master.db.company.com port=5432 user=replicator password=strong_password'
+restore_command = 'cp /var/lib/postgresql/archive/%f %p'
+```
+
+### 2. Horizontal Sharding Strategy
+```python
+# Application-level sharding implementation
+
+class ShardManager:
+    def __init__(self, shard_config):
+        self.shards = {}
+        for shard_id, config in shard_config.items():
+            self.shards[shard_id] = DatabaseConnection(config)
+    
+    def get_shard_for_customer(self, customer_id):
+        """
+        Consistent hashing for customer data distribution
+        """
+        hash_value = hashlib.md5(str(customer_id).encode()).hexdigest()
+        shard_number = int(hash_value[:8], 16) % len(self.shards)
+        return f"shard_{shard_number}"
+    
+    async def get_customer_orders(self, customer_id):
+        """
+        Retrieve customer orders from appropriate shard
+        """
+        shard_key = self.get_shard_for_customer(customer_id)
+        shard_db = self.shards[shard_key]
+        
+        return await shard_db.fetch_all("""
+            SELECT * FROM orders 
+            WHERE customer_id = %(customer_id)s 
+            ORDER BY created_at DESC
+        """, {'customer_id': customer_id})
+    
+    async def cross_shard_analytics(self, query_template, params):
+        """
+        Execute analytics queries across all shards
+        """
+        results = []
+        
+        # Execute query on all shards in parallel
+        tasks = []
+        for shard_key, shard_db in self.shards.items():
+            task = shard_db.fetch_all(query_template, params)
+            tasks.append(task)
+        
+        shard_results = await asyncio.gather(*tasks)
+        
+        # Aggregate results from all shards
+        for shard_result in shard_results:
+            results.extend(shard_result)
+        
+        return results
+```
+
+## Architecture Decision Framework
+
+### Database Technology Selection Matrix
+```python
+def recommend_database_technology(requirements):
+    """
+    Database technology recommendation based on requirements
+    """
+    recommendations = {
+        'relational': {
+            'use_cases': ['ACID transactions', 'complex relationships', 'reporting'],
+            'technologies': {
+                'PostgreSQL': 'Best for complex queries, JSON support, extensions',
+                'MySQL': 'High performance, wide ecosystem, simple setup',
+                'SQL Server': 'Enterprise features, Windows integration, BI tools'
+            }
+        },
+        'document': {
+            'use_cases': ['flexible schema', 'rapid development', 'JSON documents'],
+            'technologies': {
+                'MongoDB': 'Rich query language, horizontal scaling, aggregation',
+                'CouchDB': 'Eventual consistency, offline-first, HTTP API',
+                'Amazon DocumentDB': 'Managed MongoDB-compatible, AWS integration'
+            }
+        },
+        'key_value': {
+            'use_cases': ['caching', 'session storage', 'real-time features'],
+            'technologies': {
+                'Redis': 'In-memory, data structures, pub/sub, clustering',
+                'Amazon DynamoDB': 'Managed, serverless, predictable performance',
+                'Cassandra': 'Wide-column, high availability, linear scalability'
+            }
+        },
+        'search': {
+            'use_cases': ['full-text search', 'analytics', 'log analysis'],
+            'technologies': {
+                'Elasticsearch': 'Full-text search, analytics, REST API',
+                'Apache Solr': 'Enterprise search, faceting, highlighting',
+                'Amazon CloudSearch': 'Managed search, auto-scaling, simple setup'
+            }
+        },
+        'time_series': {
+            'use_cases': ['metrics', 'IoT data', 'monitoring', 'analytics'],
+            'technologies': {
+                'InfluxDB': 'Purpose-built for time series, SQL-like queries',
+                'TimescaleDB': 'PostgreSQL extension, SQL compatibility',
+                'Amazon Timestream': 'Managed, serverless, built-in analytics'
+            }
+        }
+    }
+    
+    # Analyze requirements and return recommendations
+    recommended_stack = []
+    
+    for requirement in requirements:
+        for category, info in recommendations.items():
+            if requirement in info['use_cases']:
+                recommended_stack.append({
+                    'category': category,
+                    'requirement': requirement,
+                    'options': info['technologies']
+                })
+    
+    return recommended_stack
+```
+
+## Performance and Monitoring
+
+### Database Health Monitoring
+```sql
+-- PostgreSQL performance monitoring queries
+
+-- Connection monitoring
+SELECT 
+    state,
+    COUNT(*) as connection_count,
+    AVG(EXTRACT(epoch FROM (now() - state_change))) as avg_duration_seconds
+FROM pg_stat_activity 
+WHERE state IS NOT NULL
+GROUP BY state;
+
+-- Lock monitoring
+SELECT 
+    pg_class.relname,
+    pg_locks.mode,
+    COUNT(*) as lock_count
+FROM pg_locks
+JOIN pg_class ON pg_locks.relation = pg_class.oid
+WHERE pg_locks.granted = true
+GROUP BY pg_class.relname, pg_locks.mode
+ORDER BY lock_count DESC;
+
+-- Query performance analysis
+SELECT 
+    query,
+    calls,
+    total_time,
+    mean_time,
+    rows,
+    100.0 * shared_blks_hit / nullif(shared_blks_hit + shared_blks_read, 0) AS hit_percent
+FROM pg_stat_statements 
+ORDER BY total_time DESC 
+LIMIT 20;
+
+-- Index usage analysis
+SELECT 
+    schemaname,
+    tablename,
+    indexname,
+    idx_tup_read,
+    idx_tup_fetch,
+    idx_scan,
+    CASE 
+        WHEN idx_scan = 0 THEN 'Unused'
+        WHEN idx_scan < 10 THEN 'Low Usage'
+        ELSE 'Active'
+    END as usage_status
+FROM pg_stat_user_indexes
+ORDER BY idx_scan DESC;
+```
+
+Your architecture decisions should prioritize:
+1. **Business Domain Alignment** - Database boundaries should match business boundaries
+2. **Scalability Path** - Plan for growth from day one, but start simple
+3. **Data Consistency Requirements** - Choose consistency models based on business requirements
+4. **Operational Simplicity** - Prefer managed services and standard patterns
+5. **Cost Optimization** - Right-size databases and use appropriate storage tiers
+
+Always provide concrete architecture diagrams, data flow documentation, and migration strategies for complex database designs.

.claude/agents/database-optimizer.md

@@ -0,0 +1,33 @@
+---
+name: database-optimizer
+description: SQL query optimization and database schema design specialist. Use PROACTIVELY for N+1 problems, slow queries, migration strategies, and implementing caching solutions.
+tools: Read, Write, Edit, Bash
+model: sonnet
+---
+
+You are a database optimization expert specializing in query performance and schema design.
+
+## Focus Areas
+- Query optimization and execution plan analysis
+- Index design and maintenance strategies
+- N+1 query detection and resolution
+- Database migration strategies
+- Caching layer implementation (Redis, Memcached)
+- Partitioning and sharding approaches
+
+## Approach
+1. Measure first - use EXPLAIN ANALYZE
+2. Index strategically - not every column needs one
+3. Denormalize when justified by read patterns
+4. Cache expensive computations
+5. Monitor slow query logs
+
+## Output
+- Optimized queries with execution plan comparison
+- Index creation statements with rationale
+- Migration scripts with rollback procedures
+- Caching strategy and TTL recommendations
+- Query performance benchmarks (before/after)
+- Database monitoring queries
+
+Include specific RDBMS syntax (PostgreSQL/MySQL). Show query execution times.

.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/frontend-developer.md

@@ -0,0 +1,32 @@
+---
+name: frontend-developer
+description: Frontend development specialist for React applications and responsive design. Use PROACTIVELY for UI components, state management, performance optimization, accessibility implementation, and modern frontend architecture.
+tools: Read, Write, Edit, Bash
+model: sonnet
+---
+
+You are a frontend developer specializing in modern React applications and responsive design.
+
+## Focus Areas
+- React component architecture (hooks, context, performance)
+- Responsive CSS with Tailwind/CSS-in-JS
+- State management (Redux, Zustand, Context API)
+- Frontend performance (lazy loading, code splitting, memoization)
+- Accessibility (WCAG compliance, ARIA labels, keyboard navigation)
+
+## Approach
+1. Component-first thinking - reusable, composable UI pieces
+2. Mobile-first responsive design
+3. Performance budgets - aim for sub-3s load times
+4. Semantic HTML and proper ARIA attributes
+5. Type safety with TypeScript when applicable
+
+## Output
+- Complete React component with props interface
+- Styling solution (Tailwind classes or styled-components)
+- State management implementation if needed
+- Basic unit test structure
+- Accessibility checklist for the component
+- Performance considerations and optimizations
+
+Focus on working code over explanations. Include usage examples in comments.

.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/sql-pro.md

@@ -0,0 +1,36 @@
+---
+name: sql-pro
+description: Write complex SQL queries, optimize execution plans, and design normalized schemas. Masters CTEs, window functions, and stored procedures. Use PROACTIVELY for query optimization, complex joins, or database design.
+tools: Read, Write, Edit, Bash
+model: sonnet
+---
+
+You are a SQL expert specializing in query optimization and database design.
+
+## Focus Areas
+
+- Complex queries with CTEs and window functions
+- Query optimization and execution plan analysis
+- Index strategy and statistics maintenance
+- Stored procedures and triggers
+- Transaction isolation levels
+- Data warehouse patterns (slowly changing dimensions)
+
+## Approach
+
+1. Write readable SQL - CTEs over nested subqueries
+2. EXPLAIN ANALYZE before optimizing
+3. Indexes are not free - balance write/read performance
+4. Use appropriate data types - save space and improve speed
+5. Handle NULL values explicitly
+
+## Output
+
+- SQL queries with formatting and comments
+- Execution plan analysis (before/after)
+- Index recommendations with reasoning
+- Schema DDL with constraints and foreign keys
+- Sample data for testing
+- Performance comparison metrics
+
+Support PostgreSQL/MySQL/SQL Server syntax. Always specify which dialect.

.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/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,235 @@
+---
+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
+
+## 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. **E2E attributes:** Always add `[attr.data-what]` and `[attr.data-which]`
+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-commit-helper/SKILL.md

@@ -0,0 +1,203 @@
+---
+name: Git Commit Helper
+description: Generate descriptive commit messages by analyzing git diffs. Use when the user asks for help writing commit messages or reviewing staged changes.
+---
+
+# Git Commit Helper
+
+## Quick start
+
+Analyze staged changes and generate commit message:
+
+```bash
+# View staged changes
+git diff --staged
+
+# Generate commit message based on changes
+# (Claude will analyze the diff and suggest a message)
+```
+
+## Commit message format
+
+Follow conventional commits format:
+
+```
+<type>(<scope>): <description>
+
+[optional body]
+
+[optional footer]
+```
+
+### Types
+
+- **feat**: New feature
+- **fix**: Bug fix
+- **docs**: Documentation changes
+- **style**: Code style changes (formatting, missing semicolons)
+- **refactor**: Code refactoring
+- **test**: Adding or updating tests
+- **chore**: Maintenance tasks
+
+### Examples
+
+**Feature commit:**
+```
+feat(auth): add JWT authentication
+
+Implement JWT-based authentication system with:
+- Login endpoint with token generation
+- Token validation middleware
+- Refresh token support
+```
+
+**Bug fix:**
+```
+fix(api): handle null values in user profile
+
+Prevent crashes when user profile fields are null.
+Add null checks before accessing nested properties.
+```
+
+**Refactor:**
+```
+refactor(database): simplify query builder
+
+Extract common query patterns into reusable functions.
+Reduce code duplication in database layer.
+```
+
+## Analyzing changes
+
+Review what's being committed:
+
+```bash
+# Show files changed
+git status
+
+# Show detailed changes
+git diff --staged
+
+# Show statistics
+git diff --staged --stat
+
+# Show changes for specific file
+git diff --staged path/to/file
+```
+
+## Commit message guidelines
+
+**DO:**
+- Use imperative mood ("add feature" not "added feature")
+- Keep first line under 50 characters
+- Capitalize first letter
+- No period at end of summary
+- Explain WHY not just WHAT in body
+
+**DON'T:**
+- Use vague messages like "update" or "fix stuff"
+- Include technical implementation details in summary
+- Write paragraphs in summary line
+- Use past tense
+
+## Multi-file commits
+
+When committing multiple related changes:
+
+```
+refactor(core): restructure authentication module
+
+- Move auth logic from controllers to service layer
+- Extract validation into separate validators
+- Update tests to use new structure
+- Add integration tests for auth flow
+
+Breaking change: Auth service now requires config object
+```
+
+## Scope examples
+
+**Frontend:**
+- `feat(ui): add loading spinner to dashboard`
+- `fix(form): validate email format`
+
+**Backend:**
+- `feat(api): add user profile endpoint`
+- `fix(db): resolve connection pool leak`
+
+**Infrastructure:**
+- `chore(ci): update Node version to 20`
+- `feat(docker): add multi-stage build`
+
+## Breaking changes
+
+Indicate breaking changes clearly:
+
+```
+feat(api)!: restructure API response format
+
+BREAKING CHANGE: All API responses now follow JSON:API spec
+
+Previous format:
+{ "data": {...}, "status": "ok" }
+
+New format:
+{ "data": {...}, "meta": {...} }
+
+Migration guide: Update client code to handle new response structure
+```
+
+## Template workflow
+
+1. **Review changes**: `git diff --staged`
+2. **Identify type**: Is it feat, fix, refactor, etc.?
+3. **Determine scope**: What part of the codebase?
+4. **Write summary**: Brief, imperative description
+5. **Add body**: Explain why and what impact
+6. **Note breaking changes**: If applicable
+
+## Interactive commit helper
+
+Use `git add -p` for selective staging:
+
+```bash
+# Stage changes interactively
+git add -p
+
+# Review what's staged
+git diff --staged
+
+# Commit with message
+git commit -m "type(scope): description"
+```
+
+## Amending commits
+
+Fix the last commit message:
+
+```bash
+# Amend commit message only
+git commit --amend
+
+# Amend and add more changes
+git add forgotten-file.js
+git commit --amend --no-edit
+```
+
+## Best practices
+
+1. **Atomic commits** - One logical change per commit
+2. **Test before commit** - Ensure code works
+3. **Reference issues** - Include issue numbers if applicable
+4. **Keep it focused** - Don't mix unrelated changes
+5. **Write for humans** - Future you will read this
+
+## Commit message checklist
+
+- [ ] Type is appropriate (feat/fix/docs/etc.)
+- [ ] Scope is specific and clear
+- [ ] Summary is under 50 characters
+- [ ] Summary uses imperative mood
+- [ ] Body explains WHY not just WHAT
+- [ ] Breaking changes are clearly marked
+- [ ] Related issue numbers are included

.claude/skills/logging-helper/SKILL.md

@@ -0,0 +1,272 @@
+---
+name: logging-helper
+description: Ensures consistent usage of the @isa/core/logging library across the codebase with best practices for performance and maintainability
+---
+
+# 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-helper/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-helper/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-helper/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-isa/SKILL.md

@@ -0,0 +1,324 @@
+---
+name: tailwind-isa
+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.
+
+## 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-isa/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,6 @@ storybook-static
 vite.config.*.timestamp*
 vitest.config.*.timestamp*
 
-.mcp.json
-.memory.json
-
 nx.instructions.md
 CLAUDE.md
+*.pyc

.mcp.json

@@ -0,0 +1,22 @@
+{
+  "mcpServers": {
+    "context7": {
+      "type": "sse",
+      "url": "https://mcp.context7.com/sse"
+    },
+    "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

CLAUDE.md

@@ -230,6 +230,13 @@ isDesktop = breakpoint([Breakpoint.Desktop, Breakpoint.DekstopL, Breakpoint.Deks
 
 ### Project Conventions
 - **Default Branch**: `develop` (not main) - Always create PRs against develop
+- **Branch Naming**: When starting work on a new feature or bug, create a branch following this pattern:
+  - Format: `feature/{task-id}-{short-description}` or `bugfix/{task-id}-{short-description}`
+  - Use English kebab-case for the description
+  - Start with the task/issue ID (e.g., `5391`)
+  - Keep description concise - shorten if the full title is too long
+  - Example: For task "#5391 Prämie Checkout // Action Card - Versandbestellung"
+    - Branch: `feature/5391-praemie-checkout-action-card-delivery-order`
 - **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

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

@@ -804,7 +804,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 +814,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 +825,8 @@ export class DomainCheckoutService {
           .toPromise();
         availability = ruecklage;
         break;
-      case 'Download':
+      }
+      case 'Download': {
         const download = await this.availabilityService
           .getDownloadAvailability({
             item: itemData,
@@ -833,8 +835,8 @@ export class DomainCheckoutService {
 
         availability = download;
         break;
-
-      case 'Versand':
+      }
+      case 'Versand': {
         const versand = await this.availabilityService
           .getDeliveryAvailability({
             item: itemData,
@@ -844,8 +846,8 @@ export class DomainCheckoutService {
 
         availability = versand;
         break;
-
-      case 'DIG-Versand':
+      }
+      case 'DIG-Versand': {
         const digVersand = await this.availabilityService
           .getDigDeliveryAvailability({
             item: itemData,
@@ -855,8 +857,8 @@ export class DomainCheckoutService {
 
         availability = digVersand;
         break;
-
-      case 'B2B-Versand':
+      }
+      case 'B2B-Versand': {
         const b2bVersand = await this.availabilityService
           .getB2bDeliveryAvailability({
             item: itemData,
@@ -866,6 +868,7 @@ export class DomainCheckoutService {
 
         availability = b2bVersand;
         break;
+      }
     }
 
     await this.updateItemInShoppingCart({

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],
+  p4mAccountId: 'abc-123-uuid',
+  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';
+
+  /** P4M account ID for loyalty point redemption */
+  p4mAccountId?: string;
+
+  /** 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,
+  p4mAccountId: 'customer-p4m-uuid',
+  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/purchase-options-list-item/purchase-options-list-item.component.ts

@@ -99,7 +99,7 @@ export class PurchaseOptionsListItemComponent
     return item.redemptionPoints;
   });
 
-  showRedemptionPoints = toSignal(this._store.useRedemptionPoints$);
+  showRedemptionPoints = toSignal(this._store.p4mAccountId$, { initialValue: undefined });
 
   quantityFormControl = new FormControl<number>(null);
 
@@ -270,7 +270,7 @@ export class PurchaseOptionsListItemComponent
     return undefined;
   }
 
-  useRedemptionPoints = toSignal(this._store.useRedemptionPoints$);
+  p4mAccountId = toSignal(this._store.p4mAccountId$);
 
   purchaseOption = toSignal(this._store.purchaseOption$);
 
@@ -280,7 +280,7 @@ export class PurchaseOptionsListItemComponent
 
   showLowStockMessage = computed(() => {
     return (
-      this.useRedemptionPoints() &&
+      !!this.p4mAccountId() &&
       this.isReservePurchaseOption() &&
       (!this.availability() || this.availability().inStock < 2)
     );

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

@@ -154,7 +154,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;
-  useRedemptionPoints?: boolean;
+
+  /**
+   * P4M account ID for loyalty point redemption.
+   * When set (typically a UUID string), prices are set to 0 and loyalty points with this account ID are applied.
+   */
+  p4mAccountId?: string;
+
+  /** 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;
-  useRedemptionPoints: boolean;
+
+  /** P4M account ID for loyalty point redemption */
+  p4mAccountId?: string;
+
+  /** 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

@@ -11,22 +11,66 @@ import {
   CrmTabMetadataService,
 } from '@isa/crm/data-access';
 
+/**
+ * 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);
   #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>> {
     const context: PurchaseOptionsModalContext = {
-      useRedemptionPoints: !!data.useRedemptionPoints,
+      p4mAccountId: data.p4mAccountId,
       ...data,
     };
 
     context.selectedCustomer = await this.#getSelectedCustomer(data);
-
     return this.#uiModal.open<string, PurchaseOptionsModalContext>({
       content: PurchaseOptionsModalComponent,
       data: context,

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.selectors.ts

@@ -20,8 +20,8 @@ export function getType(state: PurchaseOptionsState): ActionType {
   return state.type;
 }
 
-export function getUseRedemptionPoints(state: PurchaseOptionsState): boolean {
-  return state.useRedemptionPoints;
+export function getP4mAccountId(state: PurchaseOptionsState): string | undefined {
+  return state.p4mAccountId;
 }
 
 export function getShoppingCartId(state: PurchaseOptionsState): number {

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

@@ -36,5 +36,7 @@ export interface PurchaseOptionsState {
 
   fetchingAvailabilities: Array<FetchingAvailability>;
 
-  useRedemptionPoints: boolean;
+  p4mAccountId?: string;
+
+  disabledPurchaseOptions: PurchaseOption[];
 }

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

@@ -50,11 +50,11 @@ export class PurchaseOptionsStore extends ComponentStore<PurchaseOptionsState> {
 
   type$ = this.select(Selectors.getType);
 
-  get useRedemptionPoints() {
-    return this.get(Selectors.getUseRedemptionPoints);
+  get p4mAccountId() {
+    return this.get(Selectors.getP4mAccountId);
   }
 
-  useRedemptionPoints$ = this.select(Selectors.getUseRedemptionPoints);
+  p4mAccountId$ = this.select(Selectors.getP4mAccountId);
 
   get shoppingCartId() {
     return this.get(Selectors.getShoppingCartId);
@@ -152,6 +152,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$();
   }
@@ -180,7 +184,8 @@ export class PurchaseOptionsStore extends ComponentStore<PurchaseOptionsState> {
       canAddResults: [],
       customerFeatures: {},
       fetchingAvailabilities: [],
-      useRedemptionPoints: false,
+      p4mAccountId: undefined,
+      disabledPurchaseOptions: [],
     });
   }
 
@@ -212,14 +217,15 @@ export class PurchaseOptionsStore extends ComponentStore<PurchaseOptionsState> {
     type,
     inStoreBranch,
     pickupBranch,
-    useRedemptionPoints: showRedemptionPoints,
+    p4mAccountId,
+    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>,
@@ -228,7 +234,7 @@ export class PurchaseOptionsStore extends ComponentStore<PurchaseOptionsState> {
     this.patchState({
       type: type,
       shoppingCartId,
-      useRedemptionPoints: showRedemptionPoints,
+      p4mAccountId,
       items: items.map((item) => ({
         ...item,
         quantity: item['quantity'] ?? 1,
@@ -237,6 +243,7 @@ export class PurchaseOptionsStore extends ComponentStore<PurchaseOptionsState> {
       pickupBranch: pickupBranch ?? selectedBranch,
       inStoreBranch: inStoreBranch ?? selectedBranch,
       customerFeatures,
+      disabledPurchaseOptions: disabledPurchaseOptions ?? [],
     });
 
     await this._loadAvailabilities();
@@ -246,6 +253,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 +276,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 +314,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);
@@ -1028,15 +1072,21 @@ export class PurchaseOptionsStore extends ComponentStore<PurchaseOptionsState> {
     let loyalty: Loyalty | undefined = undefined;
     const redemptionPoints: number | null = item.redemptionPoints || null;
 
-    // "Lesepunkte einlösen" logic
-    // If "Lesepunkte einlösen" is checked and item has redemption points, set price to 0 and remove promotion
-    if (this.useRedemptionPoints) {
+    // P4M loyalty point redemption logic
+    // If p4mAccountId is set, set price to 0 and apply loyalty
+    if (this.p4mAccountId) {
       // If loyalty is set, we need to remove promotion
       promotion = undefined;
-      // Set loyalty points from item
-      loyalty = { value: redemptionPoints };
+      // Set loyalty points from item with P4M account ID
+      loyalty = { value: redemptionPoints, code: this.p4mAccountId };
       // Set price to 0
-      price.value.value = 0;
+      price.value = {
+        value: 0,
+        currency: price.value.currency ?? 'EUR',
+        currencySymbol: price.value.currencySymbol ?? '€',
+      };
+      // Set VAT to undefined for loyalty redemption
+      price.vat = undefined;
     }
 
     let destination: EntityDTOContainerOfDestinationDTO;
@@ -1080,10 +1130,16 @@ export class PurchaseOptionsStore extends ComponentStore<PurchaseOptionsState> {
       purchaseOption,
     );
 
-    // If loyalty points is set we know it is a redemption item
+    // If P4M account ID is set we know it is a loyalty redemption item
     // we need to make sure we don't update the price
-    if (this.useRedemptionPoints) {
-      price.value.value = 0;
+    if (this.p4mAccountId) {
+      price.value = {
+        value: 0,
+        currency: price.value.currency ?? 'EUR',
+        currencySymbol: price.value.currencySymbol ?? '€',
+      };
+      // Set VAT to undefined for loyalty redemption
+      price.vat = undefined;
     }
 
     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.module.ts

@@ -23,6 +23,7 @@ import {
   RewardSelectionService,
   RewardSelectionPopUpService,
 } from '@isa/checkout/shared/reward-selection-dialog';
+import { SelectedCustomerResource } from '@isa/crm/data-access';
 
 @NgModule({
   imports: [
@@ -46,6 +47,7 @@ import {
   providers: [
     SelectedShoppingCartResource,
     SelectedRewardShoppingCartResource,
+    SelectedCustomerResource,
     RewardSelectionService,
     RewardSelectionPopUpService,
   ],

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

@@ -10,6 +10,7 @@ import { UiSpinnerModule } from '@ui/spinner';
 import { UiDatepickerModule } from '@ui/datepicker';
 import { IconModule } from '@shared/components/icon';
 import { AuthModule } from '@core/auth';
+import { SelectedRewardShoppingCartResource } from '@isa/checkout/data-access';
 
 @NgModule({
   imports: [
@@ -26,5 +27,6 @@ import { AuthModule } from '@core/auth';
   ],
   exports: [CheckoutSummaryComponent],
   declarations: [CheckoutSummaryComponent],
+  providers: [SelectedRewardShoppingCartResource],
 })
 export class CheckoutSummaryModule {}

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/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>
-}
+} -->

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

@@ -1,292 +1,292 @@
-import { Component, ChangeDetectionStrategy, ViewChild, OnInit } from '@angular/core';
-import { AsyncValidatorFn, ValidatorFn, Validators } from '@angular/forms';
-import { Result } from '@domain/defs';
-import { CustomerDTO, CustomerInfoDTO, KeyValueDTOOfStringAndString } from '@generated/swagger/crm-api';
-import { UiErrorModalComponent, UiModalResult } from '@ui/modal';
-import { NEVER, Observable, of } from 'rxjs';
-import { catchError, distinctUntilChanged, first, map, switchMap, takeUntil, withLatestFrom } from 'rxjs/operators';
-import {
-  AddressFormBlockComponent,
-  AddressFormBlockData,
-  DeviatingAddressFormBlockComponent,
-} from '../../components/form-blocks';
-import { NameFormBlockData } from '../../components/form-blocks/name/name-form-block-data';
-import { WebshopCustomnerAlreadyExistsModalComponent, WebshopCustomnerAlreadyExistsModalData } from '../../modals';
-import { validateEmail } from '../../validators/email-validator';
-import { AbstractCreateCustomer } from '../abstract-create-customer';
-import { encodeFormData, mapCustomerDtoToCustomerCreateFormData } from '../customer-create-form-data';
-import { zipCodeValidator } from '../../validators/zip-code-validator';
+// import { Component, ChangeDetectionStrategy, ViewChild, OnInit } from '@angular/core';
+// import { AsyncValidatorFn, ValidatorFn, Validators } from '@angular/forms';
+// import { Result } from '@domain/defs';
+// import { CustomerDTO, CustomerInfoDTO, KeyValueDTOOfStringAndString } from '@generated/swagger/crm-api';
+// import { UiErrorModalComponent, UiModalResult } from '@ui/modal';
+// import { NEVER, Observable, of } from 'rxjs';
+// import { catchError, distinctUntilChanged, first, map, switchMap, takeUntil, withLatestFrom } from 'rxjs/operators';
+// import {
+//   AddressFormBlockComponent,
+//   AddressFormBlockData,
+//   DeviatingAddressFormBlockComponent,
+// } from '../../components/form-blocks';
+// import { NameFormBlockData } from '../../components/form-blocks/name/name-form-block-data';
+// import { WebshopCustomnerAlreadyExistsModalComponent, WebshopCustomnerAlreadyExistsModalData } from '../../modals';
+// import { validateEmail } from '../../validators/email-validator';
+// import { AbstractCreateCustomer } from '../abstract-create-customer';
+// import { encodeFormData, mapCustomerDtoToCustomerCreateFormData } from '../customer-create-form-data';
+// import { zipCodeValidator } from '../../validators/zip-code-validator';
 
-@Component({
-  selector: 'app-create-p4m-customer',
-  templateUrl: 'create-p4m-customer.component.html',
-  styleUrls: ['../create-customer.scss', 'create-p4m-customer.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
-})
-export class CreateP4MCustomerComponent extends AbstractCreateCustomer implements OnInit {
-  validateAddress = true;
+// @Component({
+//   selector: 'app-create-p4m-customer',
+//   templateUrl: 'create-p4m-customer.component.html',
+//   styleUrls: ['../create-customer.scss', 'create-p4m-customer.component.scss'],
+//   changeDetection: ChangeDetectionStrategy.OnPush,
+//   standalone: false,
+// })
+// export class CreateP4MCustomerComponent extends AbstractCreateCustomer implements OnInit {
+//   validateAddress = true;
 
-  validateShippingAddress = true;
+//   validateShippingAddress = true;
 
-  get _customerType() {
-    return this.activatedRoute.snapshot.data.customerType;
-  }
+//   get _customerType() {
+//     return this.activatedRoute.snapshot.data.customerType;
+//   }
 
-  get customerType() {
-    return `${this._customerType}-p4m`;
-  }
+//   get customerType() {
+//     return `${this._customerType}-p4m`;
+//   }
 
-  nameRequiredMarks: (keyof NameFormBlockData)[] = ['gender', 'firstName', 'lastName'];
+//   nameRequiredMarks: (keyof NameFormBlockData)[] = ['gender', 'firstName', 'lastName'];
 
-  nameValidationFns: Record<keyof NameFormBlockData, ValidatorFn[]> = {
-    firstName: [Validators.required],
-    lastName: [Validators.required],
-    gender: [Validators.required],
-    title: [],
-  };
+//   nameValidationFns: Record<keyof NameFormBlockData, ValidatorFn[]> = {
+//     firstName: [Validators.required],
+//     lastName: [Validators.required],
+//     gender: [Validators.required],
+//     title: [],
+//   };
 
-  emailRequiredMark: boolean;
+//   emailRequiredMark: boolean;
 
-  emailValidatorFn: ValidatorFn[];
+//   emailValidatorFn: ValidatorFn[];
 
-  asyncEmailVlaidtorFn: AsyncValidatorFn[];
+//   asyncEmailVlaidtorFn: AsyncValidatorFn[];
 
-  asyncLoyaltyCardValidatorFn: AsyncValidatorFn[];
+//   asyncLoyaltyCardValidatorFn: AsyncValidatorFn[];
 
-  shippingAddressRequiredMarks: (keyof AddressFormBlockData)[] = [
-    'street',
-    'streetNumber',
-    'zipCode',
-    'city',
-    'country',
-  ];
+//   shippingAddressRequiredMarks: (keyof AddressFormBlockData)[] = [
+//     'street',
+//     'streetNumber',
+//     'zipCode',
+//     'city',
+//     'country',
+//   ];
 
-  shippingAddressValidators: Record<string, ValidatorFn[]> = {
-    street: [Validators.required],
-    streetNumber: [Validators.required],
-    zipCode: [Validators.required, zipCodeValidator()],
-    city: [Validators.required],
-    country: [Validators.required],
-  };
+//   shippingAddressValidators: Record<string, ValidatorFn[]> = {
+//     street: [Validators.required],
+//     streetNumber: [Validators.required],
+//     zipCode: [Validators.required, zipCodeValidator()],
+//     city: [Validators.required],
+//     country: [Validators.required],
+//   };
 
-  addressRequiredMarks: (keyof AddressFormBlockData)[];
+//   addressRequiredMarks: (keyof AddressFormBlockData)[];
 
-  addressValidatorFns: Record<string, ValidatorFn[]>;
+//   addressValidatorFns: Record<string, ValidatorFn[]>;
 
-  @ViewChild(AddressFormBlockComponent, { static: false })
-  addressFormBlock: AddressFormBlockComponent;
+//   @ViewChild(AddressFormBlockComponent, { static: false })
+//   addressFormBlock: AddressFormBlockComponent;
 
-  @ViewChild(DeviatingAddressFormBlockComponent, { static: false })
-  deviatingDeliveryAddressFormBlock: DeviatingAddressFormBlockComponent;
+//   @ViewChild(DeviatingAddressFormBlockComponent, { static: false })
+//   deviatingDeliveryAddressFormBlock: DeviatingAddressFormBlockComponent;
 
-  agbValidatorFns = [Validators.requiredTrue];
+//   agbValidatorFns = [Validators.requiredTrue];
 
-  birthDateValidatorFns = [];
+//   birthDateValidatorFns = [];
 
-  existingCustomer$: Observable<CustomerInfoDTO | CustomerDTO | null>;
+//   existingCustomer$: Observable<CustomerInfoDTO | CustomerDTO | null>;
 
-  ngOnInit(): void {
-    super.ngOnInit();
-    this.initMarksAndValidators();
-    this.existingCustomer$ = this.customerExists$.pipe(
-      distinctUntilChanged(),
-      switchMap((exists) => {
-        if (exists) {
-          return this.fetchCustomerInfo();
-        }
-        return of(null);
-      }),
-    );
+//   ngOnInit(): void {
+//     super.ngOnInit();
+//     this.initMarksAndValidators();
+//     this.existingCustomer$ = this.customerExists$.pipe(
+//       distinctUntilChanged(),
+//       switchMap((exists) => {
+//         if (exists) {
+//           return this.fetchCustomerInfo();
+//         }
+//         return of(null);
+//       }),
+//     );
 
-    this.existingCustomer$
-      .pipe(
-        takeUntil(this.onDestroy$),
-        switchMap((info) => {
-          if (info) {
-            return this.customerService.getCustomer(info.id, 2).pipe(
-              map((res) => res.result),
-              catchError((err) => NEVER),
-            );
-          }
-          return NEVER;
-        }),
-        withLatestFrom(this.processId$),
-      )
-      .subscribe(([customer, processId]) => {
-        if (customer) {
-          this.modal
-            .open({
-              content: WebshopCustomnerAlreadyExistsModalComponent,
-              data: {
-                customer,
-                processId,
-              } as WebshopCustomnerAlreadyExistsModalData,
-              title: 'Es existiert bereits ein Onlinekonto mit dieser E-Mail-Adresse',
-            })
-            .afterClosed$.subscribe(async (result: UiModalResult<boolean>) => {
-              if (result.data) {
-                this.navigateToUpdatePage(customer);
-              } else {
-                this.formData.email = '';
-                this.cdr.markForCheck();
-              }
-            });
-        }
-      });
-  }
+//     this.existingCustomer$
+//       .pipe(
+//         takeUntil(this.onDestroy$),
+//         switchMap((info) => {
+//           if (info) {
+//             return this.customerService.getCustomer(info.id, 2).pipe(
+//               map((res) => res.result),
+//               catchError((err) => NEVER),
+//             );
+//           }
+//           return NEVER;
+//         }),
+//         withLatestFrom(this.processId$),
+//       )
+//       .subscribe(([customer, processId]) => {
+//         if (customer) {
+//           this.modal
+//             .open({
+//               content: WebshopCustomnerAlreadyExistsModalComponent,
+//               data: {
+//                 customer,
+//                 processId,
+//               } as WebshopCustomnerAlreadyExistsModalData,
+//               title: 'Es existiert bereits ein Onlinekonto mit dieser E-Mail-Adresse',
+//             })
+//             .afterClosed$.subscribe(async (result: UiModalResult<boolean>) => {
+//               if (result.data) {
+//                 this.navigateToUpdatePage(customer);
+//               } else {
+//                 this.formData.email = '';
+//                 this.cdr.markForCheck();
+//               }
+//             });
+//         }
+//       });
+//   }
 
-  async navigateToUpdatePage(customer: CustomerDTO) {
-    const processId = await this.processId$.pipe(first()).toPromise();
-    this.router.navigate(['/kunde', processId, 'customer', 'create', 'webshop-p4m', 'update'], {
-      queryParams: {
-        formData: encodeFormData({
-          ...mapCustomerDtoToCustomerCreateFormData(customer),
-          p4m: this.formData.p4m,
-        }),
-      },
-    });
-  }
+//   async navigateToUpdatePage(customer: CustomerDTO) {
+//     const processId = await this.processId$.pipe(first()).toPromise();
+//     this.router.navigate(['/kunde', processId, 'customer', 'create', 'webshop-p4m', 'update'], {
+//       queryParams: {
+//         formData: encodeFormData({
+//           ...mapCustomerDtoToCustomerCreateFormData(customer),
+//           p4m: this.formData.p4m,
+//         }),
+//       },
+//     });
+//   }
 
-  initMarksAndValidators() {
-    this.asyncLoyaltyCardValidatorFn = [this.checkLoyalityCardValidator];
-    this.birthDateValidatorFns = [Validators.required, this.minBirthDateValidator()];
-    if (this._customerType === 'webshop') {
-      this.emailRequiredMark = true;
-      this.emailValidatorFn = [Validators.required, Validators.email, validateEmail];
-      this.asyncEmailVlaidtorFn = [this.emailExistsValidator];
-      this.addressRequiredMarks = this.shippingAddressRequiredMarks;
-      this.addressValidatorFns = this.shippingAddressValidators;
-    } else {
-      this.emailRequiredMark = false;
-      this.emailValidatorFn = [Validators.email, validateEmail];
-    }
-  }
+//   initMarksAndValidators() {
+//     this.asyncLoyaltyCardValidatorFn = [this.checkLoyalityCardValidator];
+//     this.birthDateValidatorFns = [Validators.required, this.minBirthDateValidator()];
+//     if (this._customerType === 'webshop') {
+//       this.emailRequiredMark = true;
+//       this.emailValidatorFn = [Validators.required, Validators.email, validateEmail];
+//       this.asyncEmailVlaidtorFn = [this.emailExistsValidator];
+//       this.addressRequiredMarks = this.shippingAddressRequiredMarks;
+//       this.addressValidatorFns = this.shippingAddressValidators;
+//     } else {
+//       this.emailRequiredMark = false;
+//       this.emailValidatorFn = [Validators.email, validateEmail];
+//     }
+//   }
 
-  fetchCustomerInfo(): Observable<CustomerDTO | null> {
-    const email = this.formData.email;
-    return this.customerService.getOnlineCustomerByEmail(email).pipe(
-      map((result) => {
-        if (result) {
-          return result;
-        }
-        return null;
-      }),
-      catchError((err) => {
-        this.modal.open({
-          content: UiErrorModalComponent,
-          data: err,
-        });
-        return [null];
-      }),
-    );
-  }
+//   fetchCustomerInfo(): Observable<CustomerDTO | null> {
+//     const email = this.formData.email;
+//     return this.customerService.getOnlineCustomerByEmail(email).pipe(
+//       map((result) => {
+//         if (result) {
+//           return result;
+//         }
+//         return null;
+//       }),
+//       catchError((err) => {
+//         this.modal.open({
+//           content: UiErrorModalComponent,
+//           data: err,
+//         });
+//         return [null];
+//       }),
+//     );
+//   }
 
-  getInterests(): KeyValueDTOOfStringAndString[] {
-    const interests: KeyValueDTOOfStringAndString[] = [];
+//   getInterests(): KeyValueDTOOfStringAndString[] {
+//     const interests: KeyValueDTOOfStringAndString[] = [];
 
-    for (const key in this.formData.interests) {
-      if (this.formData.interests[key]) {
-        interests.push({ key, group: 'KUBI_INTERESSEN' });
-      }
-    }
+//     for (const key in this.formData.interests) {
+//       if (this.formData.interests[key]) {
+//         interests.push({ key, group: 'KUBI_INTERESSEN' });
+//       }
+//     }
 
-    return interests;
-  }
+//     return interests;
+//   }
 
-  getNewsletter(): KeyValueDTOOfStringAndString | undefined {
-    if (this.formData.newsletter) {
-      return { key: 'kubi_newsletter', group: 'KUBI_NEWSLETTER' };
-    }
-  }
+//   getNewsletter(): KeyValueDTOOfStringAndString | undefined {
+//     if (this.formData.newsletter) {
+//       return { key: 'kubi_newsletter', group: 'KUBI_NEWSLETTER' };
+//     }
+//   }
 
-  static MapCustomerInfoDtoToCustomerDto(customerInfoDto: CustomerInfoDTO): CustomerDTO {
-    return {
-      address: customerInfoDto.address,
-      agentComment: customerInfoDto.agentComment,
-      bonusCard: customerInfoDto.bonusCard,
-      campaignCode: customerInfoDto.campaignCode,
-      communicationDetails: customerInfoDto.communicationDetails,
-      createdInBranch: customerInfoDto.createdInBranch,
-      customerGroup: customerInfoDto.customerGroup,
-      customerNumber: customerInfoDto.customerNumber,
-      customerStatus: customerInfoDto.customerStatus,
-      customerType: customerInfoDto.customerType,
-      dateOfBirth: customerInfoDto.dateOfBirth,
-      features: customerInfoDto.features,
-      firstName: customerInfoDto.firstName,
-      lastName: customerInfoDto.lastName,
-      gender: customerInfoDto.gender,
-      hasOnlineAccount: customerInfoDto.hasOnlineAccount,
-      isGuestAccount: customerInfoDto.isGuestAccount,
-      label: customerInfoDto.label,
-      notificationChannels: customerInfoDto.notificationChannels,
-      organisation: customerInfoDto.organisation,
-      title: customerInfoDto.title,
-      id: customerInfoDto.id,
-      pId: customerInfoDto.pId,
-    };
-  }
+// static MapCustomerInfoDtoToCustomerDto(customerInfoDto: CustomerInfoDTO): CustomerDTO {
+//   return {
+//     address: customerInfoDto.address,
+//     agentComment: customerInfoDto.agentComment,
+//     bonusCard: customerInfoDto.bonusCard,
+//     campaignCode: customerInfoDto.campaignCode,
+//     communicationDetails: customerInfoDto.communicationDetails,
+//     createdInBranch: customerInfoDto.createdInBranch,
+//     customerGroup: customerInfoDto.customerGroup,
+//     customerNumber: customerInfoDto.customerNumber,
+//     customerStatus: customerInfoDto.customerStatus,
+//     customerType: customerInfoDto.customerType,
+//     dateOfBirth: customerInfoDto.dateOfBirth,
+//     features: customerInfoDto.features,
+//     firstName: customerInfoDto.firstName,
+//     lastName: customerInfoDto.lastName,
+//     gender: customerInfoDto.gender,
+//     hasOnlineAccount: customerInfoDto.hasOnlineAccount,
+//     isGuestAccount: customerInfoDto.isGuestAccount,
+//     label: customerInfoDto.label,
+//     notificationChannels: customerInfoDto.notificationChannels,
+//     organisation: customerInfoDto.organisation,
+//     title: customerInfoDto.title,
+//     id: customerInfoDto.id,
+//     pId: customerInfoDto.pId,
+//   };
+// }
 
-  async saveCustomer(customer: CustomerDTO): Promise<CustomerDTO> {
-    const isWebshop = this._customerType === 'webshop';
-    let res: Result<CustomerDTO>;
+//   async saveCustomer(customer: CustomerDTO): Promise<CustomerDTO> {
+//     const isWebshop = this._customerType === 'webshop';
+//     let res: Result<CustomerDTO>;
 
-    const { customerDto, customerInfoDto } = this.formData?._meta ?? {};
+//     const { customerDto, customerInfoDto } = this.formData?._meta ?? {};
 
-    if (customerDto) {
-      customer = { ...customerDto, ...customer };
-    } else if (customerInfoDto) {
-      customer = { ...CreateP4MCustomerComponent.MapCustomerInfoDtoToCustomerDto(customerInfoDto), ...customer };
-    }
+//     if (customerDto) {
+//       customer = { ...customerDto, ...customer };
+//     } else if (customerInfoDto) {
+//       customer = { ...CreateP4MCustomerComponent.MapCustomerInfoDtoToCustomerDto(customerInfoDto), ...customer };
+//     }
 
-    const p4mFeature = customer.features?.find((attr) => attr.key === 'p4mUser');
-    if (p4mFeature) {
-      p4mFeature.value = this.formData.p4m;
-    } else {
-      customer.features.push({
-        key: 'p4mUser',
-        value: this.formData.p4m,
-      });
-    }
+//     const p4mFeature = customer.features?.find((attr) => attr.key === 'p4mUser');
+//     if (p4mFeature) {
+//       p4mFeature.value = this.formData.p4m;
+//     } else {
+//       customer.features.push({
+//         key: 'p4mUser',
+//         value: this.formData.p4m,
+//       });
+//     }
 
-    const interests = this.getInterests();
+//     const interests = this.getInterests();
 
-    if (interests.length > 0) {
-      customer.features?.push(...interests);
-      // TODO: Klärung wie Interessen zukünftig gespeichert werden
-      // await this._loyaltyCardService
-      //   .LoyaltyCardSaveInteressen({
-      //     customerId: res.result.id,
-      //     interessen: this.getInterests(),
-      //   })
-      //   .toPromise();
-    }
+//     if (interests.length > 0) {
+//       customer.features?.push(...interests);
+//       // TODO: Klärung wie Interessen zukünftig gespeichert werden
+//       // await this._loyaltyCardService
+//       //   .LoyaltyCardSaveInteressen({
+//       //     customerId: res.result.id,
+//       //     interessen: this.getInterests(),
+//       //   })
+//       //   .toPromise();
+//     }
 
-    const newsletter = this.getNewsletter();
+//     const newsletter = this.getNewsletter();
 
-    if (newsletter) {
-      customer.features.push(newsletter);
-    } else {
-      customer.features = customer.features.filter(
-        (feature) => feature.key !== 'kubi_newsletter' && feature.group !== 'KUBI_NEWSLETTER',
-      );
-    }
+//     if (newsletter) {
+//       customer.features.push(newsletter);
+//     } else {
+//       customer.features = customer.features.filter(
+//         (feature) => feature.key !== 'kubi_newsletter' && feature.group !== 'KUBI_NEWSLETTER',
+//       );
+//     }
 
-    if (isWebshop) {
-      if (customer.id > 0) {
-        if (this.formData?._meta?.hasLocalityCard) {
-          res = await this.customerService.updateStoreP4MToWebshopP4M(customer);
-        } else {
-          res = await this.customerService.updateToP4MOnlineCustomer(customer);
-        }
-      } else {
-        res = await this.customerService.createOnlineCustomer(customer).toPromise();
-      }
-    } else {
-      res = await this.customerService.createStoreCustomer(customer).toPromise();
-    }
+//     if (isWebshop) {
+//       if (customer.id > 0) {
+//         if (this.formData?._meta?.hasLocalityCard) {
+//           res = await this.customerService.updateStoreP4MToWebshopP4M(customer);
+//         } else {
+//           res = await this.customerService.updateToP4MOnlineCustomer(customer);
+//         }
+//       } else {
+//         res = await this.customerService.createOnlineCustomer(customer).toPromise();
+//       }
+//     } else {
+//       res = await this.customerService.createStoreCustomer(customer).toPromise();
+//     }
 
-    return res.result;
-  }
-}
+//     return res.result;
+//   }
+// }

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

@@ -1,45 +1,45 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+// import { NgModule } from '@angular/core';
+// import { CommonModule } from '@angular/common';
 
-import { CreateP4MCustomerComponent } from './create-p4m-customer.component';
-import {
-  AddressFormBlockModule,
-  BirthDateFormBlockModule,
-  InterestsFormBlockModule,
-  NameFormBlockModule,
-  OrganisationFormBlockModule,
-  P4mNumberFormBlockModule,
-  NewsletterFormBlockModule,
-  DeviatingAddressFormBlockComponentModule,
-  AcceptAGBFormBlockModule,
-  EmailFormBlockModule,
-  PhoneNumbersFormBlockModule,
-} from '../../components/form-blocks';
-import { CustomerTypeSelectorModule } from '../../components/customer-type-selector';
-import { UiSpinnerModule } from '@ui/spinner';
-import { UiIconModule } from '@ui/icon';
-import { RouterModule } from '@angular/router';
+// import { CreateP4MCustomerComponent } from './create-p4m-customer.component';
+// import {
+//   AddressFormBlockModule,
+//   BirthDateFormBlockModule,
+//   InterestsFormBlockModule,
+//   NameFormBlockModule,
+//   OrganisationFormBlockModule,
+//   P4mNumberFormBlockModule,
+//   NewsletterFormBlockModule,
+//   DeviatingAddressFormBlockComponentModule,
+//   AcceptAGBFormBlockModule,
+//   EmailFormBlockModule,
+//   PhoneNumbersFormBlockModule,
+// } from '../../components/form-blocks';
+// import { CustomerTypeSelectorModule } from '../../components/customer-type-selector';
+// import { UiSpinnerModule } from '@ui/spinner';
+// import { UiIconModule } from '@ui/icon';
+// import { RouterModule } from '@angular/router';
 
-@NgModule({
-  imports: [
-    CommonModule,
-    CustomerTypeSelectorModule,
-    AddressFormBlockModule,
-    BirthDateFormBlockModule,
-    InterestsFormBlockModule,
-    NameFormBlockModule,
-    OrganisationFormBlockModule,
-    P4mNumberFormBlockModule,
-    NewsletterFormBlockModule,
-    DeviatingAddressFormBlockComponentModule,
-    AcceptAGBFormBlockModule,
-    EmailFormBlockModule,
-    PhoneNumbersFormBlockModule,
-    UiSpinnerModule,
-    UiIconModule,
-    RouterModule,
-  ],
-  exports: [CreateP4MCustomerComponent],
-  declarations: [CreateP4MCustomerComponent],
-})
-export class CreateP4MCustomerModule {}
+// @NgModule({
+//   imports: [
+//     CommonModule,
+//     CustomerTypeSelectorModule,
+//     AddressFormBlockModule,
+//     BirthDateFormBlockModule,
+//     InterestsFormBlockModule,
+//     NameFormBlockModule,
+//     OrganisationFormBlockModule,
+//     P4mNumberFormBlockModule,
+//     NewsletterFormBlockModule,
+//     DeviatingAddressFormBlockComponentModule,
+//     AcceptAGBFormBlockModule,
+//     EmailFormBlockModule,
+//     PhoneNumbersFormBlockModule,
+//     UiSpinnerModule,
+//     UiIconModule,
+//     RouterModule,
+//   ],
+//   exports: [CreateP4MCustomerComponent],
+//   declarations: [CreateP4MCustomerComponent],
+// })
+// export class CreateP4MCustomerModule {}

apps/isa-app/src/page/customer/create-customer/create-p4m-customer/index.ts

@@ -1,2 +1,2 @@
-export * from './create-p4m-customer.component';
-export * from './create-p4m-customer.module';
+// export * from './create-p4m-customer.component';
+// export * from './create-p4m-customer.module';

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

@@ -1,6 +1,6 @@
 import { Component, ChangeDetectionStrategy, ViewChild } from '@angular/core';
 import { ValidatorFn, Validators } from '@angular/forms';
-import { CustomerDTO } from '@generated/swagger/crm-api';
+import { CustomerDTO, CustomerInfoDTO } from '@generated/swagger/crm-api';
 import { map } from 'rxjs/operators';
 import {
   AddressFormBlockComponent,
@@ -10,13 +10,16 @@ import {
 import { NameFormBlockData } from '../../components/form-blocks/name/name-form-block-data';
 import { validateEmail } from '../../validators/email-validator';
 import { AbstractCreateCustomer } from '../abstract-create-customer';
-import { CreateP4MCustomerComponent } from '../create-p4m-customer';
+// import { CreateP4MCustomerComponent } from '../create-p4m-customer';
 import { zipCodeValidator } from '../../validators/zip-code-validator';
 
 @Component({
   selector: 'app-create-webshop-customer',
   templateUrl: 'create-webshop-customer.component.html',
-  styleUrls: ['../create-customer.scss', 'create-webshop-customer.component.scss'],
+  styleUrls: [
+    '../create-customer.scss',
+    'create-webshop-customer.component.scss',
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: false,
 })
@@ -26,7 +29,11 @@ export class CreateWebshopCustomerComponent extends AbstractCreateCustomer {
   validateAddress = true;
   validateShippingAddress = true;
 
-  nameRequiredMarks: (keyof NameFormBlockData)[] = ['gender', 'firstName', 'lastName'];
+  nameRequiredMarks: (keyof NameFormBlockData)[] = [
+    'gender',
+    'firstName',
+    'lastName',
+  ];
 
   nameValidationFns: Record<keyof NameFormBlockData, ValidatorFn[]> = {
     firstName: [Validators.required],
@@ -35,7 +42,13 @@ export class CreateWebshopCustomerComponent extends AbstractCreateCustomer {
     title: [],
   };
 
-  addressRequiredMarks: (keyof AddressFormBlockData)[] = ['street', 'streetNumber', 'zipCode', 'city', 'country'];
+  addressRequiredMarks: (keyof AddressFormBlockData)[] = [
+    'street',
+    'streetNumber',
+    'zipCode',
+    'city',
+    'country',
+  ];
 
   addressValidators: Record<string, ValidatorFn[]> = {
     street: [Validators.required],
@@ -68,7 +81,11 @@ export class CreateWebshopCustomerComponent extends AbstractCreateCustomer {
       if (customerDto) {
         customer = { ...customerDto, ...customer };
       } else if (customerInfoDto) {
-        customer = { ...CreateP4MCustomerComponent.MapCustomerInfoDtoToCustomerDto(customerInfoDto), ...customer };
+        customer = {
+          // ...CreateP4MCustomerComponent.MapCustomerInfoDtoToCustomerDto(customerInfoDto),
+          ...this.mapCustomerInfoDtoToCustomerDto(customerInfoDto),
+          ...customer,
+        };
       }
 
       const res = await this.customerService.updateToOnlineCustomer(customer);
@@ -80,4 +97,34 @@ export class CreateWebshopCustomerComponent extends AbstractCreateCustomer {
         .toPromise();
     }
   }
+
+  mapCustomerInfoDtoToCustomerDto(
+    customerInfoDto: CustomerInfoDTO,
+  ): CustomerDTO {
+    return {
+      address: customerInfoDto.address,
+      agentComment: customerInfoDto.agentComment,
+      bonusCard: customerInfoDto.bonusCard,
+      campaignCode: customerInfoDto.campaignCode,
+      communicationDetails: customerInfoDto.communicationDetails,
+      createdInBranch: customerInfoDto.createdInBranch,
+      customerGroup: customerInfoDto.customerGroup,
+      customerNumber: customerInfoDto.customerNumber,
+      customerStatus: customerInfoDto.customerStatus,
+      customerType: customerInfoDto.customerType,
+      dateOfBirth: customerInfoDto.dateOfBirth,
+      features: customerInfoDto.features,
+      firstName: customerInfoDto.firstName,
+      lastName: customerInfoDto.lastName,
+      gender: customerInfoDto.gender,
+      hasOnlineAccount: customerInfoDto.hasOnlineAccount,
+      isGuestAccount: customerInfoDto.isGuestAccount,
+      label: customerInfoDto.label,
+      notificationChannels: customerInfoDto.notificationChannels,
+      organisation: customerInfoDto.organisation,
+      title: customerInfoDto.title,
+      id: customerInfoDto.id,
+      pId: customerInfoDto.pId,
+    };
+  }
 }

apps/isa-app/src/page/customer/create-customer/defs/customer-query-params.ts

@@ -1,7 +1,7 @@
 import { CustomerDTO, Gender } from '@generated/swagger/crm-api';
 
 export interface CreateCustomerQueryParams {
-  p4mNumber?: string;
+  // p4mNumber?: string;
   customerId?: number;
   gender?: Gender;
   title?: string;

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

@@ -1,6 +1,6 @@
 export * from './create-b2b-customer';
 export * from './create-guest-customer';
-export * from './create-p4m-customer';
+// export * from './create-p4m-customer';
 export * from './create-store-customer';
 export * from './create-webshop-customer';
 export * from './defs';

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

@@ -1,4 +1,4 @@
-@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">Kundenkartendaten erfasen</h1>
     <p class="description">Bitte erfassen Sie die Kundenkarte</p>
@@ -106,4 +106,4 @@
       </button>
     </div>
   </form>
-}
+} -->

apps/isa-app/src/page/customer/create-customer/update-p4m-webshop-customer/update-p4m-webshop-customer.component.ts

@@ -1,156 +1,156 @@
-import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
-import { AsyncValidatorFn, ValidatorFn, Validators } from '@angular/forms';
-import { Result } from '@domain/defs';
-import { CustomerDTO, KeyValueDTOOfStringAndString, PayerDTO } from '@generated/swagger/crm-api';
-import { AddressFormBlockData } from '../../components/form-blocks';
-import { NameFormBlockData } from '../../components/form-blocks/name/name-form-block-data';
-import { AbstractCreateCustomer } from '../abstract-create-customer';
-import { CreateP4MCustomerComponent } from '../create-p4m-customer';
+// import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
+// import { AsyncValidatorFn, ValidatorFn, Validators } from '@angular/forms';
+// import { Result } from '@domain/defs';
+// import { CustomerDTO, KeyValueDTOOfStringAndString, PayerDTO } from '@generated/swagger/crm-api';
+// import { AddressFormBlockData } from '../../components/form-blocks';
+// import { NameFormBlockData } from '../../components/form-blocks/name/name-form-block-data';
+// import { AbstractCreateCustomer } from '../abstract-create-customer';
+// import { CreateP4MCustomerComponent } from '../create-p4m-customer';
 
-@Component({
-  selector: 'page-update-p4m-webshop-customer',
-  templateUrl: 'update-p4m-webshop-customer.component.html',
-  styleUrls: ['../create-customer.scss', 'update-p4m-webshop-customer.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
-})
-export class UpdateP4MWebshopCustomerComponent extends AbstractCreateCustomer implements OnInit {
-  customerType = 'webshop-p4m/update';
+// @Component({
+//   selector: 'page-update-p4m-webshop-customer',
+//   templateUrl: 'update-p4m-webshop-customer.component.html',
+//   styleUrls: ['../create-customer.scss', 'update-p4m-webshop-customer.component.scss'],
+//   changeDetection: ChangeDetectionStrategy.OnPush,
+//   standalone: false,
+// })
+// export class UpdateP4MWebshopCustomerComponent extends AbstractCreateCustomer implements OnInit {
+//   customerType = 'webshop-p4m/update';
 
-  validateAddress = true;
+//   validateAddress = true;
 
-  validateShippingAddress = true;
+//   validateShippingAddress = true;
 
-  agbValidatorFns = [Validators.requiredTrue];
+//   agbValidatorFns = [Validators.requiredTrue];
 
-  birthDateValidatorFns = [Validators.required, this.minBirthDateValidator()];
+//   birthDateValidatorFns = [Validators.required, this.minBirthDateValidator()];
 
-  nameRequiredMarks: (keyof NameFormBlockData)[] = ['gender', 'firstName', 'lastName'];
+//   nameRequiredMarks: (keyof NameFormBlockData)[] = ['gender', 'firstName', 'lastName'];
 
-  nameValidationFns: Record<keyof NameFormBlockData, ValidatorFn[]> = {
-    firstName: [Validators.required],
-    lastName: [Validators.required],
-    gender: [Validators.required],
-    title: [],
-  };
+//   nameValidationFns: Record<keyof NameFormBlockData, ValidatorFn[]> = {
+//     firstName: [Validators.required],
+//     lastName: [Validators.required],
+//     gender: [Validators.required],
+//     title: [],
+//   };
 
-  addressRequiredMarks: (keyof AddressFormBlockData)[] = ['street', 'streetNumber', 'zipCode', 'city', 'country'];
+//   addressRequiredMarks: (keyof AddressFormBlockData)[] = ['street', 'streetNumber', 'zipCode', 'city', 'country'];
 
-  addressValidatorFns: Record<string, ValidatorFn[]> = {
-    street: [Validators.required],
-    streetNumber: [Validators.required],
-    zipCode: [Validators.required],
-    city: [Validators.required],
-    country: [Validators.required],
-  };
+//   addressValidatorFns: Record<string, ValidatorFn[]> = {
+//     street: [Validators.required],
+//     streetNumber: [Validators.required],
+//     zipCode: [Validators.required],
+//     city: [Validators.required],
+//     country: [Validators.required],
+//   };
 
-  asyncLoyaltyCardValidatorFn: AsyncValidatorFn[] = [this.checkLoyalityCardValidator];
+//   asyncLoyaltyCardValidatorFn: AsyncValidatorFn[] = [this.checkLoyalityCardValidator];
 
-  get billingAddress(): PayerDTO | undefined {
-    const payers = this.formData?._meta?.customerDto?.payers;
+//   get billingAddress(): PayerDTO | undefined {
+//     const payers = this.formData?._meta?.customerDto?.payers;
 
-    if (!payers || payers.length === 0) {
-      return undefined;
-    }
+//     if (!payers || payers.length === 0) {
+//       return undefined;
+//     }
 
-    // the default payer is the payer with the latest isDefault(Date) value
-    const defaultPayer = payers.reduce((prev, curr) =>
-      new Date(prev.isDefault) > new Date(curr.isDefault) ? prev : curr,
-    );
+//     // the default payer is the payer with the latest isDefault(Date) value
+//     const defaultPayer = payers.reduce((prev, curr) =>
+//       new Date(prev.isDefault) > new Date(curr.isDefault) ? prev : curr,
+//     );
 
-    return defaultPayer.payer.data;
-  }
+//     return defaultPayer.payer.data;
+//   }
 
-  get shippingAddress() {
-    const shippingAddresses = this.formData?._meta?.customerDto?.shippingAddresses;
+//   get shippingAddress() {
+//     const shippingAddresses = this.formData?._meta?.customerDto?.shippingAddresses;
 
-    if (!shippingAddresses || shippingAddresses.length === 0) {
-      return undefined;
-    }
+//     if (!shippingAddresses || shippingAddresses.length === 0) {
+//       return undefined;
+//     }
 
-    // the default shipping address is the shipping address with the latest isDefault(Date) value
-    const defaultShippingAddress = shippingAddresses.reduce((prev, curr) =>
-      new Date(prev.data.isDefault) > new Date(curr.data.isDefault) ? prev : curr,
-    );
+//     // the default shipping address is the shipping address with the latest isDefault(Date) value
+//     const defaultShippingAddress = shippingAddresses.reduce((prev, curr) =>
+//       new Date(prev.data.isDefault) > new Date(curr.data.isDefault) ? prev : curr,
+//     );
 
-    return defaultShippingAddress.data;
-  }
+//     return defaultShippingAddress.data;
+//   }
 
-  ngOnInit() {
-    super.ngOnInit();
-  }
+//   ngOnInit() {
+//     super.ngOnInit();
+//   }
 
-  getInterests(): KeyValueDTOOfStringAndString[] {
-    const interests: KeyValueDTOOfStringAndString[] = [];
+//   getInterests(): KeyValueDTOOfStringAndString[] {
+//     const interests: KeyValueDTOOfStringAndString[] = [];
 
-    for (const key in this.formData.interests) {
-      if (this.formData.interests[key]) {
-        interests.push({ key, group: 'KUBI_INTERESSEN' });
-      }
-    }
+//     for (const key in this.formData.interests) {
+//       if (this.formData.interests[key]) {
+//         interests.push({ key, group: 'KUBI_INTERESSEN' });
+//       }
+//     }
 
-    return interests;
-  }
+//     return interests;
+//   }
 
-  getNewsletter(): KeyValueDTOOfStringAndString | undefined {
-    if (this.formData.newsletter) {
-      return { key: 'kubi_newsletter', group: 'KUBI_NEWSLETTER' };
-    }
-  }
+//   getNewsletter(): KeyValueDTOOfStringAndString | undefined {
+//     if (this.formData.newsletter) {
+//       return { key: 'kubi_newsletter', group: 'KUBI_NEWSLETTER' };
+//     }
+//   }
 
-  async saveCustomer(customer: CustomerDTO): Promise<CustomerDTO> {
-    let res: Result<CustomerDTO>;
+//   async saveCustomer(customer: CustomerDTO): Promise<CustomerDTO> {
+//     let res: Result<CustomerDTO>;
 
-    const { customerDto, customerInfoDto } = this.formData?._meta ?? {};
+//     const { customerDto, customerInfoDto } = this.formData?._meta ?? {};
 
-    if (customerDto) {
-      customer = { ...customerDto, shippingAddresses: [], payers: [], ...customer };
+//     if (customerDto) {
+//       customer = { ...customerDto, shippingAddresses: [], payers: [], ...customer };
 
-      if (customerDto.shippingAddresses?.length) {
-        customer.shippingAddresses.unshift(...customerDto.shippingAddresses);
-      }
-      if (customerDto.payers?.length) {
-        customer.payers.unshift(...customerDto.payers);
-      }
-    } else if (customerInfoDto) {
-      customer = { ...CreateP4MCustomerComponent.MapCustomerInfoDtoToCustomerDto(customerInfoDto), ...customer };
-    }
+//       if (customerDto.shippingAddresses?.length) {
+//         customer.shippingAddresses.unshift(...customerDto.shippingAddresses);
+//       }
+//       if (customerDto.payers?.length) {
+//         customer.payers.unshift(...customerDto.payers);
+//       }
+//     } else if (customerInfoDto) {
+//       customer = { ...CreateP4MCustomerComponent.MapCustomerInfoDtoToCustomerDto(customerInfoDto), ...customer };
+//     }
 
-    const p4mFeature = customer.features?.find((attr) => attr.key === 'p4mUser');
-    if (p4mFeature) {
-      p4mFeature.value = this.formData.p4m;
-    } else {
-      customer.features.push({
-        key: 'p4mUser',
-        value: this.formData.p4m,
-      });
-    }
+//     const p4mFeature = customer.features?.find((attr) => attr.key === 'p4mUser');
+//     if (p4mFeature) {
+//       p4mFeature.value = this.formData.p4m;
+//     } else {
+//       customer.features.push({
+//         key: 'p4mUser',
+//         value: this.formData.p4m,
+//       });
+//     }
 
-    const interests = this.getInterests();
+//     const interests = this.getInterests();
 
-    if (interests.length > 0) {
-      customer.features?.push(...interests);
-      // TODO: Klärung wie Interessen zukünftig gespeichert werden
-      // await this._loyaltyCardService
-      //   .LoyaltyCardSaveInteressen({
-      //     customerId: res.result.id,
-      //     interessen: this.getInterests(),
-      //   })
-      //   .toPromise();
-    }
+//     if (interests.length > 0) {
+//       customer.features?.push(...interests);
+//       // TODO: Klärung wie Interessen zukünftig gespeichert werden
+//       // await this._loyaltyCardService
+//       //   .LoyaltyCardSaveInteressen({
+//       //     customerId: res.result.id,
+//       //     interessen: this.getInterests(),
+//       //   })
+//       //   .toPromise();
+//     }
 
-    const newsletter = this.getNewsletter();
+//     const newsletter = this.getNewsletter();
 
-    if (newsletter) {
-      customer.features.push(newsletter);
-    } else {
-      customer.features = customer.features.filter(
-        (feature) => feature.key !== 'kubi_newsletter' && feature.group !== 'KUBI_NEWSLETTER',
-      );
-    }
+//     if (newsletter) {
+//       customer.features.push(newsletter);
+//     } else {
+//       customer.features = customer.features.filter(
+//         (feature) => feature.key !== 'kubi_newsletter' && feature.group !== 'KUBI_NEWSLETTER',
+//       );
+//     }
 
-    res = await this.customerService.updateToP4MOnlineCustomer(customer);
+//     res = await this.customerService.updateToP4MOnlineCustomer(customer);
 
-    return res.result;
-  }
-}
+//     return res.result;
+//   }
+// }

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

@@ -1,48 +1,48 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+// import { NgModule } from '@angular/core';
+// import { CommonModule } from '@angular/common';
 
-import { UpdateP4MWebshopCustomerComponent } from './update-p4m-webshop-customer.component';
+// import { UpdateP4MWebshopCustomerComponent } from './update-p4m-webshop-customer.component';
 
-import {
-  AddressFormBlockModule,
-  BirthDateFormBlockModule,
-  InterestsFormBlockModule,
-  NameFormBlockModule,
-  OrganisationFormBlockModule,
-  P4mNumberFormBlockModule,
-  NewsletterFormBlockModule,
-  DeviatingAddressFormBlockComponentModule,
-  AcceptAGBFormBlockModule,
-  EmailFormBlockModule,
-  PhoneNumbersFormBlockModule,
-} from '../../components/form-blocks';
-import { UiFormControlModule } from '@ui/form-control';
-import { UiInputModule } from '@ui/input';
-import { CustomerPipesModule } from '@shared/pipes/customer';
-import { CustomerTypeSelectorModule } from '../../components/customer-type-selector';
-import { UiSpinnerModule } from '@ui/spinner';
+// import {
+//   AddressFormBlockModule,
+//   BirthDateFormBlockModule,
+//   InterestsFormBlockModule,
+//   NameFormBlockModule,
+//   OrganisationFormBlockModule,
+//   P4mNumberFormBlockModule,
+//   NewsletterFormBlockModule,
+//   DeviatingAddressFormBlockComponentModule,
+//   AcceptAGBFormBlockModule,
+//   EmailFormBlockModule,
+//   PhoneNumbersFormBlockModule,
+// } from '../../components/form-blocks';
+// import { UiFormControlModule } from '@ui/form-control';
+// import { UiInputModule } from '@ui/input';
+// import { CustomerPipesModule } from '@shared/pipes/customer';
+// import { CustomerTypeSelectorModule } from '../../components/customer-type-selector';
+// import { UiSpinnerModule } from '@ui/spinner';
 
-@NgModule({
-  imports: [
-    CommonModule,
-    CustomerTypeSelectorModule,
-    AddressFormBlockModule,
-    BirthDateFormBlockModule,
-    InterestsFormBlockModule,
-    NameFormBlockModule,
-    OrganisationFormBlockModule,
-    P4mNumberFormBlockModule,
-    NewsletterFormBlockModule,
-    DeviatingAddressFormBlockComponentModule,
-    AcceptAGBFormBlockModule,
-    EmailFormBlockModule,
-    PhoneNumbersFormBlockModule,
-    UiFormControlModule,
-    UiInputModule,
-    CustomerPipesModule,
-    UiSpinnerModule,
-  ],
-  exports: [UpdateP4MWebshopCustomerComponent],
-  declarations: [UpdateP4MWebshopCustomerComponent],
-})
-export class UpdateP4MWebshopCustomerModule {}
+// @NgModule({
+//   imports: [
+//     CommonModule,
+//     CustomerTypeSelectorModule,
+//     AddressFormBlockModule,
+//     BirthDateFormBlockModule,
+//     InterestsFormBlockModule,
+//     NameFormBlockModule,
+//     OrganisationFormBlockModule,
+//     P4mNumberFormBlockModule,
+//     NewsletterFormBlockModule,
+//     DeviatingAddressFormBlockComponentModule,
+//     AcceptAGBFormBlockModule,
+//     EmailFormBlockModule,
+//     PhoneNumbersFormBlockModule,
+//     UiFormControlModule,
+//     UiInputModule,
+//     CustomerPipesModule,
+//     UiSpinnerModule,
+//   ],
+//   exports: [UpdateP4MWebshopCustomerComponent],
+//   declarations: [UpdateP4MWebshopCustomerComponent],
+// })
+// export class UpdateP4MWebshopCustomerModule {}

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

@@ -1,15 +1,33 @@
-import { Component, ChangeDetectionStrategy, OnInit, OnDestroy, inject, effect, untracked } from '@angular/core';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  OnInit,
+  OnDestroy,
+  inject,
+  effect,
+  untracked,
+} from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
-import { BehaviorSubject, Subject, Subscription, fromEvent } from 'rxjs';
+import {
+  BehaviorSubject,
+  Subject,
+  Subscription,
+  firstValueFrom,
+  fromEvent,
+} from 'rxjs';
 import { CustomerSearchStore } from './store/customer-search.store';
 import { provideComponentStore } from '@ngrx/component-store';
 import { Breadcrumb, BreadcrumbService } from '@core/breadcrumb';
 import { delay, filter, first, switchMap, takeUntil } from 'rxjs/operators';
-import { CustomerCreateNavigation, CustomerSearchNavigation } from '@shared/services/navigation';
+import {
+  CustomerCreateNavigation,
+  CustomerSearchNavigation,
+} from '@shared/services/navigation';
 import { CustomerSearchMainAutocompleteProvider } from './providers/customer-search-main-autocomplete.provider';
 import { FilterAutocompleteProvider } from '@shared/components/filter';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { provideCancelSearchSubject } from '@shared/services/cancel-subject';
+import { injectFeedbackErrorDialog } from '@isa/ui/dialog';
 
 @Component({
   selector: 'page-customer-search',
@@ -28,6 +46,7 @@ import { provideCancelSearchSubject } from '@shared/services/cancel-subject';
   standalone: false,
 })
 export class CustomerSearchComponent implements OnInit, OnDestroy {
+  #errorFeedbackDialog = injectFeedbackErrorDialog();
   private _store = inject(CustomerSearchStore);
   private _activatedRoute = inject(ActivatedRoute);
   private _router = inject(Router);
@@ -37,7 +56,11 @@ export class CustomerSearchComponent implements OnInit, OnDestroy {
 
   private searchStore = inject(CustomerSearchStore);
 
-  keyEscPressed = toSignal(fromEvent(document, 'keydown').pipe(filter((e: KeyboardEvent) => e.key === 'Escape')));
+  keyEscPressed = toSignal(
+    fromEvent(document, 'keydown').pipe(
+      filter((e: KeyboardEvent) => e.key === 'Escape'),
+    ),
+  );
 
   get breadcrumb() {
     let breadcrumb: string;
@@ -53,7 +76,9 @@ export class CustomerSearchComponent implements OnInit, OnDestroy {
 
   private _breadcrumbs$ = this._store.processId$.pipe(
     filter((id) => !!id),
-    switchMap((id) => this._breadcrumbService.getBreadcrumbsByKeyAndTag$(id, 'customer')),
+    switchMap((id) =>
+      this._breadcrumbService.getBreadcrumbsByKeyAndTag$(id, 'customer'),
+    ),
   );
 
   side$ = new BehaviorSubject<string | undefined>(undefined);
@@ -97,53 +122,77 @@ export class CustomerSearchComponent implements OnInit, OnDestroy {
         this.checkDetailsBreadcrumb();
       });
 
-    this._eventsSubscription = this._router.events.pipe(takeUntil(this._onDestroy$)).subscribe((event) => {
-      if (event instanceof NavigationEnd) {
-        this.checkAndUpdateProcessId();
-        this.checkAndUpdateSide();
-        this.checkAndUpdateCustomerId();
-        this.checkBreadcrumbs();
-      }
-    });
-
-    this._store.customerListResponse$
+    this._eventsSubscription = this._router.events
       .pipe(takeUntil(this._onDestroy$))
-      .subscribe(async ([response, filter, processId, restored, skipNavigation]) => {
-        if (this._store.processId === processId) {
-          if (skipNavigation) {
-            return;
-          }
-
-          if (response.hits === 1) {
-            // Navigate to details page
-            const customer = response.result[0];
-
-            if (customer.id < 0) {
-              // navigate to create customer
-              const route = this._createNavigation.upgradeCustomerRoute({ processId, customerInfo: customer });
-              await this._router.navigate(route.path, { queryParams: route.queryParams });
-              return;
-            } else {
-              const route = this._navigation.detailsRoute({ processId, customerId: customer.id });
-              await this._router.navigate(route.path, { queryParams: filter.getQueryParams() });
-            }
-          } else if (response.hits > 1) {
-            const route = this._navigation.listRoute({ processId, filter });
-
-            if (
-              (['details'].includes(this.breadcrumb) &&
-                response?.result?.some((c) => c.id === this._store.customerId)) ||
-              restored
-            ) {
-              await this._router.navigate([], { queryParams: route.queryParams });
-            } else {
-              await this._router.navigate(route.path, { queryParams: route.queryParams });
-            }
-          }
-
+      .subscribe((event) => {
+        if (event instanceof NavigationEnd) {
+          this.checkAndUpdateProcessId();
+          this.checkAndUpdateSide();
+          this.checkAndUpdateCustomerId();
           this.checkBreadcrumbs();
         }
       });
+
+    this._store.customerListResponse$
+      .pipe(takeUntil(this._onDestroy$))
+      .subscribe(
+        async ([response, filter, processId, restored, skipNavigation]) => {
+          if (this._store.processId === processId) {
+            if (skipNavigation) {
+              return;
+            }
+
+            if (response.hits === 1) {
+              // Navigate to details page
+              const customer = response.result[0];
+
+              if (customer.id < 0) {
+                // #5375 - Zusätzlich soll bei Kunden bei denen ein Upgrade möglich ist ein Dialog angezeigt werden, dass Kundenneuanlage mit Kundenkarte nicht möglich ist
+                await firstValueFrom(
+                  this.#errorFeedbackDialog({
+                    data: {
+                      errorMessage:
+                        'Kundenneuanlage mit Kundenkarte nicht möglich',
+                    },
+                  }).closed,
+                );
+                // navigate to create customer
+                // const route = this._createNavigation.upgradeCustomerRoute({ processId, customerInfo: customer });
+                // await this._router.navigate(route.path, { queryParams: route.queryParams });
+                return;
+              } else {
+                const route = this._navigation.detailsRoute({
+                  processId,
+                  customerId: customer.id,
+                });
+                await this._router.navigate(route.path, {
+                  queryParams: filter.getQueryParams(),
+                });
+              }
+            } else if (response.hits > 1) {
+              const route = this._navigation.listRoute({ processId, filter });
+
+              if (
+                (['details'].includes(this.breadcrumb) &&
+                  response?.result?.some(
+                    (c) => c.id === this._store.customerId,
+                  )) ||
+                restored
+              ) {
+                await this._router.navigate([], {
+                  queryParams: route.queryParams,
+                });
+              } else {
+                await this._router.navigate(route.path, {
+                  queryParams: route.queryParams,
+                });
+              }
+            }
+
+            this.checkBreadcrumbs();
+          }
+        },
+      );
   }
 
   ngOnDestroy(): void {
@@ -169,7 +218,11 @@ export class CustomerSearchComponent implements OnInit, OnDestroy {
       this._store.setProcessId(processId);
       this._store.reset(this._activatedRoute.snapshot.queryParams);
       if (!['main', 'filter'].some((s) => s === this.breadcrumb)) {
-        const skipNavigation = ['orders', 'order-details', 'order-details-history'].includes(this.breadcrumb);
+        const skipNavigation = [
+          'orders',
+          'order-details',
+          'order-details-history',
+        ].includes(this.breadcrumb);
         this._store.search({ skipNavigation });
       }
     }
@@ -229,7 +282,9 @@ export class CustomerSearchComponent implements OnInit, OnDestroy {
     const mainBreadcrumb = await this.getMainBreadcrumb();
 
     if (!mainBreadcrumb) {
-      const navigation = this._navigation.defaultRoute({ processId: this._store.processId });
+      const navigation = this._navigation.defaultRoute({
+        processId: this._store.processId,
+      });
       const breadcrumb: Breadcrumb = {
         key: this._store.processId,
         tags: ['customer', 'search', 'main'],
@@ -242,14 +297,19 @@ export class CustomerSearchComponent implements OnInit, OnDestroy {
       this._breadcrumbService.addBreadcrumb(breadcrumb);
     } else {
       this._breadcrumbService.patchBreadcrumb(mainBreadcrumb.id, {
-        params: { ...this.snapshot.queryParams, ...(mainBreadcrumb.params ?? {}) },
+        params: {
+          ...this.snapshot.queryParams,
+          ...(mainBreadcrumb.params ?? {}),
+        },
       });
     }
   }
 
   async getCreateCustomerBreadcrumb(): Promise<Breadcrumb | undefined> {
     const breadcrumbs = await this.getBreadcrumbs();
-    return breadcrumbs.find((b) => b.tags.includes('create') && b.tags.includes('customer'));
+    return breadcrumbs.find(
+      (b) => b.tags.includes('create') && b.tags.includes('customer'),
+    );
   }
 
   async checkCreateCustomerBreadcrumb() {
@@ -262,7 +322,9 @@ export class CustomerSearchComponent implements OnInit, OnDestroy {
 
   async getSearchBreadcrumb(): Promise<Breadcrumb | undefined> {
     const breadcrumbs = await this.getBreadcrumbs();
-    return breadcrumbs.find((b) => b.tags.includes('list') && b.tags.includes('search'));
+    return breadcrumbs.find(
+      (b) => b.tags.includes('list') && b.tags.includes('search'),
+    );
   }
 
   async checkSearchBreadcrumb() {
@@ -288,7 +350,9 @@ export class CustomerSearchComponent implements OnInit, OnDestroy {
       const name = this._store.queryParams?.main_qs || 'Suche';
 
       if (!searchBreadcrumb) {
-        const navigation = this._navigation.listRoute({ processId: this._store.processId });
+        const navigation = this._navigation.listRoute({
+          processId: this._store.processId,
+        });
         const breadcrumb: Breadcrumb = {
           key: this._store.processId,
           tags: ['customer', 'search', 'list'],
@@ -300,7 +364,10 @@ export class CustomerSearchComponent implements OnInit, OnDestroy {
 
         this._breadcrumbService.addBreadcrumb(breadcrumb);
       } else {
-        this._breadcrumbService.patchBreadcrumb(searchBreadcrumb.id, { params: this.snapshot.queryParams, name });
+        this._breadcrumbService.patchBreadcrumb(searchBreadcrumb.id, {
+          params: this.snapshot.queryParams,
+          name,
+        });
       }
     } else {
       if (searchBreadcrumb) {
@@ -311,7 +378,9 @@ export class CustomerSearchComponent implements OnInit, OnDestroy {
 
   async getDetailsBreadcrumb(): Promise<Breadcrumb | undefined> {
     const breadcrumbs = await this.getBreadcrumbs();
-    return breadcrumbs.find((b) => b.tags.includes('details') && b.tags.includes('search'));
+    return breadcrumbs.find(
+      (b) => b.tags.includes('details') && b.tags.includes('search'),
+    );
   }
 
   async checkDetailsBreadcrumb() {
@@ -333,7 +402,8 @@ export class CustomerSearchComponent implements OnInit, OnDestroy {
       ].includes(this.breadcrumb)
     ) {
       const customer = this._store.customer;
-      const fullName = `${customer?.firstName ?? ''} ${customer?.lastName ?? ''}`.trim();
+      const fullName =
+        `${customer?.firstName ?? ''} ${customer?.lastName ?? ''}`.trim();
 
       if (!detailsBreadcrumb) {
         const navigation = this._navigation.detailsRoute({
@@ -515,7 +585,10 @@ export class CustomerSearchComponent implements OnInit, OnDestroy {
   async checkOrderDetailsBreadcrumb() {
     const orderDetailsBreadcrumb = await this.getOrderDetailsBreadcrumb();
 
-    if (this.breadcrumb === 'order-details' || this.breadcrumb === 'order-details-history') {
+    if (
+      this.breadcrumb === 'order-details' ||
+      this.breadcrumb === 'order-details-history'
+    ) {
       if (!orderDetailsBreadcrumb) {
         const navigation = this._navigation.orderDetialsRoute({
           processId: this._store.processId,
@@ -546,7 +619,8 @@ export class CustomerSearchComponent implements OnInit, OnDestroy {
   }
 
   async checkOrderDetailsHistoryBreadcrumb() {
-    const orderDetailsHistoryBreadcrumb = await this.getOrderDetailsHistoryBreadcrumb();
+    const orderDetailsHistoryBreadcrumb =
+      await this.getOrderDetailsHistoryBreadcrumb();
 
     if (this.breadcrumb === 'order-details-history') {
       if (!orderDetailsHistoryBreadcrumb) {
@@ -569,7 +643,9 @@ export class CustomerSearchComponent implements OnInit, OnDestroy {
         this._breadcrumbService.addBreadcrumb(breadcrumb);
       }
     } else if (orderDetailsHistoryBreadcrumb) {
-      this._breadcrumbService.removeBreadcrumb(orderDetailsHistoryBreadcrumb.id);
+      this._breadcrumbService.removeBreadcrumb(
+        orderDetailsHistoryBreadcrumb.id,
+      );
     }
   }
 

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

@@ -20,6 +20,7 @@ import {
   RewardSelectionService,
   RewardSelectionPopUpService,
 } from '@isa/checkout/shared/reward-selection-dialog';
+import { SelectedCustomerResource } from '@isa/crm/data-access';
 
 @NgModule({
   imports: [
@@ -40,6 +41,7 @@ import {
   providers: [
     SelectedShoppingCartResource,
     SelectedRewardShoppingCartResource,
+    SelectedCustomerResource,
     RewardSelectionService,
     RewardSelectionPopUpService,
   ],

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

@@ -173,41 +173,26 @@
   </div>
 </shared-loader>
 
-@if (hasReturnUrl()) {
-  <button
-    type="button"
-    (click)="continueReward()"
-    class="w-60 text-white text-lg bg-brand rounded-full px-5 py-3 absolute top-[calc(100vh-19.375rem)] left-1/2 -translate-x-1/2 font-bold disabled:bg-inactive-branch"
-    [disabled]="!(hasKundenkarte$ | async)"
-  >
-    <shared-loader [loading]="showLoader$ | async" spinnerSize="32"
-      >Auswählen</shared-loader
-    >
-  </button>
-} @else {
-  @if (shoppingCartHasNoItems$ | async) {
-    <button
-      type="button"
-      (click)="continue()"
-      class="text-white text-lg bg-brand rounded-full px-5 py-3 absolute top-[calc(100vh-19.375rem)] left-1/2 -translate-x-1/2 font-bold disabled:bg-inactive-branch"
-      [disabled]="showLoader$ | async"
-    >
-      <shared-loader [loading]="showLoader$ | async" spinnerSize="32"
-        >Weiter zur Artikelsuche</shared-loader
-      >
-    </button>
-  }
-
-  @if (shoppingCartHasItems$ | async) {
-    <button
-      type="button"
-      (click)="continue()"
-      class="text-white text-lg bg-brand rounded-full px-5 py-3 absolute top-[calc(100vh-19.375rem)] left-1/2 -translate-x-1/2 font-bold disabled:bg-inactive-branch"
-      [disabled]="showLoader$ | async"
-    >
-      <shared-loader [loading]="showLoader$ | async" spinnerSize="32"
-        >Weiter zum Warenkorb</shared-loader
-      >
-    </button>
-  }
-}
+<button
+  type="button"
+  (click)="continue()"
+  [class]="
+    'text-white text-lg bg-brand rounded-full px-5 py-3 absolute top-[calc(100vh-19.375rem)] left-1/2 -translate-x-1/2 font-bold disabled:bg-inactive-branch' +
+    (hasReturnUrl() ? ' w-60' : '')
+  "
+  [disabled]="
+    hasReturnUrl()
+      ? !(hasKundenkarte$ | async) || (showLoader$ | async)
+      : (showLoader$ | async)
+  "
+>
+  <shared-loader [loading]="showLoader$ | async" spinnerSize="32">
+    @if (hasReturnUrl()) {
+      Auswählen
+    } @else if (shoppingCartHasItems$ | async) {
+      Weiter zum Warenkorb
+    } @else {
+      Weiter zur Artikelsuche
+    }
+  </shared-loader>
+</button>

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

@@ -313,7 +313,18 @@ export class CustomerDetailsViewMainComponent
 
   ngOnInit() {
     // Check if we have a return URL context
-    this.checkHasReturnUrl();
+    this.checkHasReturnUrl().then(async () => {
+      // Check if we should auto-trigger continue() (only from Kundenkarte)
+      const context = await this._navigationState.restoreContext<{
+        returnUrl?: string;
+        autoTriggerContinueFn?: boolean;
+      }>('select-customer');
+
+      if (context?.autoTriggerContinueFn) {
+        // Auto-trigger continue() ONLY when coming from Kundenkarte
+        this.continue();
+      }
+    });
 
     this.processId$
       .pipe(
@@ -352,32 +363,12 @@ export class CustomerDetailsViewMainComponent
     this._onDestroy$.complete();
   }
 
-  @logAsync
-  // #5262 Für die Auswahl des Kunden im "Prämienshop-Modus" (Getrennt vom regulären Checkout-Prozess)
-  async continueReward() {
-    if (this.hasReturnUrl()) {
-      this._setSelectedCustomerIdInTab();
-
-      // Restore from preserved context (auto-scoped to current tab) and clean up
-      const context = await this._navigationState.restoreAndClearContext<{
-        returnUrl?: string;
-      }>('select-customer');
-
-      if (context?.returnUrl) {
-        await this._router.navigateByUrl(context.returnUrl);
-        return;
-      }
-
-      // No returnUrl found, navigate to default reward page
-      await this._router.navigate(['/', this.processId, 'reward']);
-    }
-  }
-
   @logAsync
   async continue() {
     if (this.isBusy) return;
     this.setIsBusy(true);
 
+    // Shared validation and setup for all flows
     const canAddCustomer = await this._canAddCustomerAsync();
     if (this.shoppingCartHasItems && !canAddCustomer) {
       this.setIsBusy(false);
@@ -420,6 +411,25 @@ export class CustomerDetailsViewMainComponent
 
     this._setShippingAddress();
 
+    // #5262 Check for reward selection flow before navigation
+    if (this.hasReturnUrl()) {
+      // Restore from preserved context (auto-scoped to current tab) and clean up
+      const context = await this._navigationState.restoreAndClearContext<{
+        returnUrl?: string;
+      }>('select-customer');
+
+      if (context?.returnUrl) {
+        await this._router.navigateByUrl(context.returnUrl);
+      } else {
+        // No returnUrl found, navigate to default reward page
+        await this._router.navigate(['/', this.processId, 'reward']);
+      }
+
+      this.setIsBusy(false);
+      return;
+    }
+
+    // Regular checkout navigation
     if (this.shoppingCartHasItems) {
       await this.#rewardSelectionPopUpFlow(this.processId);
     } else {

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

@@ -17,6 +17,7 @@
     class="justify-self-center"
     [cardDetails]="karte"
     [isCustomerCard]="true"
+    [customerId]="customerId$ | async"
   ></page-customer-kundenkarte>
 }
 

apps/isa-app/src/page/customer/guards/customer-create.guard.ts

@@ -1,5 +1,10 @@
 import { inject, Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Params, Router, RouterStateSnapshot } from '@angular/router';
+import {
+  ActivatedRouteSnapshot,
+  Params,
+  Router,
+  RouterStateSnapshot,
+} from '@angular/router';
 import { DomainCheckoutService } from '@domain/checkout';
 import { CustomerCreateFormData, decodeFormData } from '../create-customer';
 import { CustomerCreateNavigation } from '@shared/services/navigation';
@@ -9,7 +14,10 @@ export class CustomerCreateGuard {
   private checkoutService = inject(DomainCheckoutService);
   private customerCreateNavigation = inject(CustomerCreateNavigation);
 
-  async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
+  async canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot,
+  ): Promise<boolean> {
     // exit with true if canActivateChild will be called
     if (route.firstChild) {
       return true;
@@ -19,10 +27,15 @@ export class CustomerCreateGuard {
 
     const processId = this.getProcessId(route);
     const formData = this.getFormData(route);
-    const canActivateCustomerType = await this.setableCustomerTypes(processId, formData);
+    const canActivateCustomerType = await this.setableCustomerTypes(
+      processId,
+      formData,
+    );
 
     if (canActivateCustomerType[customerType] !== true) {
-      customerType = Object.keys(canActivateCustomerType).find((key) => canActivateCustomerType[key]);
+      customerType = Object.keys(canActivateCustomerType).find(
+        (key) => canActivateCustomerType[key],
+      );
     }
 
     await this.navigate(processId, customerType, route.queryParams);
@@ -30,9 +43,14 @@ export class CustomerCreateGuard {
     return true;
   }
 
-  async canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
+  async canActivateChild(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot,
+  ): Promise<boolean> {
     const processId = this.getProcessId(route);
-    const customerType = route.routeConfig.path?.replace('create/', '')?.replace('/update', '');
+    const customerType = route.routeConfig.path
+      ?.replace('create/', '')
+      ?.replace('/update', '');
 
     if (customerType === 'create-customer-main') {
       return true;
@@ -40,29 +58,39 @@ export class CustomerCreateGuard {
 
     const formData = this.getFormData(route);
 
-    const canActivateCustomerType = await this.setableCustomerTypes(processId, formData);
+    const canActivateCustomerType = await this.setableCustomerTypes(
+      processId,
+      formData,
+    );
 
     if (canActivateCustomerType[customerType]) {
       return true;
     }
 
-    const activatableCustomerType = Object.keys(canActivateCustomerType)?.find((key) => canActivateCustomerType[key]);
+    const activatableCustomerType = Object.keys(canActivateCustomerType)?.find(
+      (key) => canActivateCustomerType[key],
+    );
 
     await this.navigate(processId, activatableCustomerType, route.queryParams);
 
     return false;
   }
 
-  async setableCustomerTypes(processId: number, formData: CustomerCreateFormData): Promise<Record<string, boolean>> {
-    const res = await this.checkoutService.getSetableCustomerTypes(processId).toPromise();
+  async setableCustomerTypes(
+    processId: number,
+    formData: CustomerCreateFormData,
+  ): Promise<Record<string, boolean>> {
+    const res = await this.checkoutService
+      .getSetableCustomerTypes(processId)
+      .toPromise();
 
-    if (res.store) {
-      res['store-p4m'] = true;
-    }
+    // if (res.store) {
+    //   res['store-p4m'] = true;
+    // }
 
-    if (res.webshop) {
-      res['webshop-p4m'] = true;
-    }
+    // if (res.webshop) {
+    //   res['webshop-p4m'] = true;
+    // }
 
     if (formData?._meta) {
       const customerType = formData._meta.customerType;
@@ -107,7 +135,11 @@ export class CustomerCreateGuard {
     return {};
   }
 
-  navigate(processId: number, customerType: string, queryParams: Params): Promise<boolean> {
+  navigate(
+    processId: number,
+    customerType: string,
+    queryParams: Params,
+  ): Promise<boolean> {
     const path = this.customerCreateNavigation.createCustomerRoute({
       customerType,
       processId,

apps/isa-app/src/page/customer/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.component.ts

@@ -31,7 +31,9 @@ export class CantAddCustomerToCartModalComponent {
   get option() {
     return (
       this.ref.data.upgradeableTo?.options.values.find((upgradeOption) =>
-        this.ref.data.required.options.values.some((requiredOption) => upgradeOption.key === requiredOption.key),
+        this.ref.data.required.options.values.some(
+          (requiredOption) => upgradeOption.key === requiredOption.key,
+        ),
       ) || { value: this.queryParams }
     );
   }
@@ -39,7 +41,9 @@ export class CantAddCustomerToCartModalComponent {
   get queryParams() {
     let option = this.ref.data.required?.options.values.find((f) => f.selected);
     if (!option) {
-      option = this.ref.data.required?.options.values.find((f) => (isBoolean(f.enabled) ? f.enabled : true));
+      option = this.ref.data.required?.options.values.find((f) =>
+        isBoolean(f.enabled) ? f.enabled : true,
+      );
     }
     return option ? { customertype: option.value } : {};
   }
@@ -57,27 +61,29 @@ export class CantAddCustomerToCartModalComponent {
     const queryParams: Record<string, string> = {};
 
     if (customer) {
-      queryParams['formData'] = encodeFormData(mapCustomerDtoToCustomerCreateFormData(customer));
+      queryParams['formData'] = encodeFormData(
+        mapCustomerDtoToCustomerCreateFormData(customer),
+      );
     }
 
-    if (option === 'webshop' && attributes.some((a) => a.key === 'p4mUser')) {
-      const nav = this.customerCreateNavigation.createCustomerRoute({
-        processId: this.applicationService.activatedProcessId,
-        customerType: 'webshop-p4m',
-      });
-      this.router.navigate(nav.path, {
-        queryParams: { ...nav.queryParams, ...queryParams },
-      });
-    } else {
-      const nav = this.customerCreateNavigation.createCustomerRoute({
-        processId: this.applicationService.activatedProcessId,
-        customerType: option as any,
-      });
+    // if (option === 'webshop' && attributes.some((a) => a.key === 'p4mUser')) {
+    //   const nav = this.customerCreateNavigation.createCustomerRoute({
+    //     processId: this.applicationService.activatedProcessId,
+    //     customerType: 'webshop-p4m',
+    //   });
+    //   this.router.navigate(nav.path, {
+    //     queryParams: { ...nav.queryParams, ...queryParams },
+    //   });
+    // } else {
+    const nav = this.customerCreateNavigation.createCustomerRoute({
+      processId: this.applicationService.activatedProcessId,
+      customerType: option as any,
+    });
 
-      this.router.navigate(nav.path, {
-        queryParams: { ...nav.queryParams, ...queryParams },
-      });
-    }
+    this.router.navigate(nav.path, {
+      queryParams: { ...nav.queryParams, ...queryParams },
+    });
+    // }
 
     this.ref.close();
   }

apps/isa-app/src/page/customer/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.component.html

@@ -1,7 +1,11 @@
-<div class="font-bold text-center border-t border-b border-solid border-disabled-customer -mx-4 py-4">
+<div
+  class="font-bold text-center border-t border-b border-solid border-disabled-customer -mx-4 py-4"
+>
   {{ customer?.communicationDetails?.email }}
 </div>
-<div class="grid grid-flow-row gap-1 text-sm font-bold border-b border-solid border-disabled-customer -mx-4 py-4 px-14">
+<div
+  class="grid grid-flow-row gap-1 text-sm font-bold border-b border-solid border-disabled-customer -mx-4 py-4 px-14"
+>
   @if (customer?.organisation?.name) {
     <span>{{ customer?.organisation?.name }}</span>
   }
@@ -16,23 +20,26 @@
 </div>
 
 <div class="grid grid-flow-col gap-4 justify-around mt-12">
-  <button class="border-2 border-solid border-brand rounded-full font-bold text-brand px-6 py-3 text-lg" (click)="close(false)">
+  <button
+    class="border-2 border-solid border-brand rounded-full font-bold text-brand px-6 py-3 text-lg"
+    (click)="close(false)"
+  >
     neues Onlinekonto anlegen
   </button>
   @if (!isWebshopWithP4M) {
     <button
       class="border-2 border-solid border-brand rounded-full font-bold text-white px-6 py-3 text-lg bg-brand"
       (click)="close(true)"
-      >
+    >
       Daten übernehmen
     </button>
   }
-  @if (isWebshopWithP4M) {
+  <!-- @if (isWebshopWithP4M) {
     <button
       class="border-2 border-solid border-brand rounded-full font-bold text-white px-6 py-3 text-lg bg-brand"
       (click)="selectCustomer()"
       >
       Datensatz auswählen
     </button>
-  }
+  } -->
 </div>

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

@@ -9,11 +9,11 @@ import { CustomerCreateGuard } from './guards/customer-create.guard';
 import {
   CreateB2BCustomerComponent,
   CreateGuestCustomerComponent,
-  CreateP4MCustomerComponent,
+  // CreateP4MCustomerComponent,
   CreateStoreCustomerComponent,
   CreateWebshopCustomerComponent,
 } from './create-customer';
-import { UpdateP4MWebshopCustomerComponent } from './create-customer/update-p4m-webshop-customer';
+// import { UpdateP4MWebshopCustomerComponent } from './create-customer/update-p4m-webshop-customer';
 import { CreateCustomerComponent } from './create-customer/create-customer.component';
 import { CustomerDataEditB2BComponent } from './customer-search/edit-main-view/customer-data-edit-b2b.component';
 import { CustomerDataEditB2CComponent } from './customer-search/edit-main-view/customer-data-edit-b2c.component';
@@ -40,8 +40,16 @@ export const routes: Routes = [
         path: '',
         component: CustomerSearchComponent,
         children: [
-          { path: 'search', component: CustomerMainViewComponent, data: { side: 'main', breadcrumb: 'main' } },
-          { path: 'search/list', component: CustomerResultsMainViewComponent, data: { breadcrumb: 'search' } },
+          {
+            path: 'search',
+            component: CustomerMainViewComponent,
+            data: { side: 'main', breadcrumb: 'main' },
+          },
+          {
+            path: 'search/list',
+            component: CustomerResultsMainViewComponent,
+            data: { breadcrumb: 'search' },
+          },
           {
             path: 'search/filter',
             component: CustomerFilterMainViewComponent,
@@ -80,7 +88,10 @@ export const routes: Routes = [
           {
             path: 'search/:customerId/orders/:orderId/:orderItemId/history',
             component: CustomerOrderDetailsHistoryMainViewComponent,
-            data: { side: 'order-details', breadcrumb: 'order-details-history' },
+            data: {
+              side: 'order-details',
+              breadcrumb: 'order-details-history',
+            },
           },
           {
             path: 'search/:customerId/edit/b2b',
@@ -140,13 +151,13 @@ export const routes: Routes = [
           { path: 'create/webshop', component: CreateWebshopCustomerComponent },
           { path: 'create/b2b', component: CreateB2BCustomerComponent },
           { path: 'create/guest', component: CreateGuestCustomerComponent },
-          { path: 'create/webshop-p4m', component: CreateP4MCustomerComponent, data: { customerType: 'webshop' } },
-          { path: 'create/store-p4m', component: CreateP4MCustomerComponent, data: { customerType: 'store' } },
-          {
-            path: 'create/webshop-p4m/update',
-            component: UpdateP4MWebshopCustomerComponent,
-            data: { customerType: 'webshop' },
-          },
+          // { path: 'create/webshop-p4m', component: CreateP4MCustomerComponent, data: { customerType: 'webshop' } },
+          // { path: 'create/store-p4m', component: CreateP4MCustomerComponent, data: { customerType: 'store' } },
+          // {
+          //   path: 'create/webshop-p4m/update',
+          //   component: UpdateP4MWebshopCustomerComponent,
+          //   data: { customerType: 'webshop' },
+          // },
           {
             path: 'create-customer-main',
             outlet: 'side',

apps/isa-app/src/shared/services/navigation/customer-create.navigation.ts

@@ -3,7 +3,10 @@ import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 import { CustomerInfoDTO } from '@generated/swagger/crm-api';
 import { NavigationRoute } from './defs/navigation-route';
-import { encodeFormData, mapCustomerInfoDtoToCustomerCreateFormData } from 'apps/isa-app/src/page/customer';
+import {
+  encodeFormData,
+  mapCustomerInfoDtoToCustomerCreateFormData,
+} from 'apps/isa-app/src/page/customer';
 
 @Injectable({ providedIn: 'root' })
 export class CustomerCreateNavigation {
@@ -33,7 +36,9 @@ export class CustomerCreateNavigation {
 
   navigateToDefault(params: { processId: NumberInput }): Promise<boolean> {
     const route = this.defaultRoute(params);
-    return this._router.navigate(route.path, { queryParams: route.queryParams });
+    return this._router.navigate(route.path, {
+      queryParams: route.queryParams,
+    });
   }
 
   createCustomerRoute(params: {
@@ -54,7 +59,9 @@ export class CustomerCreateNavigation {
     ];
 
     let formData = params?.customerInfo
-      ? encodeFormData(mapCustomerInfoDtoToCustomerCreateFormData(params.customerInfo))
+      ? encodeFormData(
+          mapCustomerInfoDtoToCustomerCreateFormData(params.customerInfo),
+        )
       : undefined;
 
     const urlTree = this._router.createUrlTree(path, {
@@ -79,7 +86,9 @@ export class CustomerCreateNavigation {
     processId: NumberInput;
     customerInfo: CustomerInfoDTO;
   }): NavigationRoute {
-    const formData = encodeFormData(mapCustomerInfoDtoToCustomerCreateFormData(customerInfo));
+    const formData = encodeFormData(
+      mapCustomerInfoDtoToCustomerCreateFormData(customerInfo),
+    );
     const path = [
       '/kunde',
       coerceNumberProperty(processId),
@@ -88,14 +97,16 @@ export class CustomerCreateNavigation {
         outlets: {
           primary: [
             'create',
-            customerInfo?.features?.find((feature) => feature.key === 'webshop') ? 'webshop-p4m' : 'store-p4m',
+            // customerInfo?.features?.find((feature) => feature.key === 'webshop') ? 'webshop-p4m' : 'store-p4m',
           ],
           side: 'create-customer-main',
         },
       },
     ];
 
-    const urlTree = this._router.createUrlTree(path, { queryParams: { formData } });
+    const urlTree = this._router.createUrlTree(path, {
+      queryParams: { formData },
+    });
 
     return {
       path,

azure-pipelines.yml

@@ -12,7 +12,7 @@ variables:
     value: '4'
   # Minor Version einstellen
   - name: 'Minor'
-    value: '1'
+    value: '2'
   - name: 'Patch'
     value: "$[counter(format('{0}.{1}', variables['Major'], variables['Minor']),0)]"
   - name: 'BuildUniqueID'

docs/architecture/adr/0001-implement-data-access-api-requests.md

@@ -11,226 +11,70 @@
 
 ---
 ## Summary (Decision in One Sentence)
-Standardize data-access library implementation patterns for API requests using Zod schemas for validation, domain-specific models extending generated DTOs, and service layers that integrate with generated Swagger clients.
+Standardize all data-access libraries with a three-layer architecture: Zod schemas for validation, domain models extending generated DTOs, and services with consistent error handling and logging.
 
 ## Context & Problem Statement
-The ISA Frontend application requires consistent and maintainable patterns for implementing API requests across multiple domain libraries. Current data-access libraries show varying implementation approaches that need standardization.
 
-**Business drivers / user needs:**
-- Consistent error handling across all API interactions
-- Type-safe request/response handling to prevent runtime errors
-- Maintainable code structure for easy onboarding and development
-- Reliable validation of API inputs and outputs
+Inconsistent patterns across data-access libraries (`catalogue`, `remission`, `crm`, `oms`) cause:
+- High cognitive load when switching domains
+- Duplicated validation and error handling code
+- Mixed approaches to request cancellation and logging
+- No standard for extending generated DTOs
 
-**Technical constraints:**
-- Must integrate with generated Swagger clients (`@generated/swagger/*`)
-- Need to support abort signals for request cancellation
-- Require caching and performance optimization capabilities
-- Must align with existing logging infrastructure (`@isa/core/logging`)
-- Support for domain-specific model extensions beyond generated DTOs
+**Goals:** Standardize structure, reduce boilerplate 40%, eliminate validation runtime errors, improve type safety.
 
-**Current pain points:**
-- Inconsistent validation patterns across different data-access libraries
-- Mixed approaches to error handling and response processing
-- Duplication of common patterns (abort signal handling, response parsing)
-- Lack of standardized model extension patterns
+**Constraints:** Must integrate with generated Swagger clients, support AbortSignal, align with `@isa/core/logging`.
 
-**Measurable goals:**
-- Standardize API request patterns across all 4+ data-access libraries
-- Reduce boilerplate code by 40% through shared utilities
-- Improve type safety with comprehensive Zod schema coverage
-
-### Scope
-**In scope:**
-- Schema validation patterns using Zod
-- Model definition standards extending generated DTOs
-- Service implementation patterns with generated Swagger clients
-- Error handling and response processing standardization
-- Integration with common utilities and logging
-
-**Out of scope:**
-- Modification of generated Swagger client code
-- Changes to backend API contracts
-- Authentication/authorization mechanisms
-- Caching implementation details (handled by decorators)
+**Scope:** Schema validation, model extensions, service patterns, standard exports.
 
 ## Decision
-Implement a three-layer architecture pattern for data-access libraries:
 
-1. **Schema Layer**: Use Zod schemas for input validation and type inference, following the naming convention `<Operation>Schema` with corresponding `<Operation>` and `<Operation>Input` types
-2. **Model Layer**: Define domain-specific interfaces that extend generated DTOs, using `EntityContainer<T>` pattern for lazy-loaded relationships
-3. **Service Layer**: Create injectable services that integrate generated Swagger clients, implement standardized error handling, and support request cancellation via AbortSignal
+Implement a **three-layer architecture** for all data-access libraries:
 
-All data-access libraries will follow the standard export structure: `models`, `schemas`, `services`, and optionally `stores` and `helpers`.
+1. **Schema Layer** (`schemas/`): Zod schemas for input validation and type inference
+   - Pattern: `<Operation>Schema` with `<Operation>` and `<Operation>Input` types
+   - Example: `SearchItemsSchema`, `SearchItems`, `SearchItemsInput`
 
-## Rationale
-**Alignment with strategic/technical direction:**
-- Leverages existing Zod integration for consistent validation across the application
-- Builds upon established generated Swagger client infrastructure
-- Aligns with Angular dependency injection patterns and service architecture
-- Supports the project's type-safety goals with TypeScript
+2. **Model Layer** (`models/`): Domain-specific interfaces extending generated DTOs
+   - Pattern: `interface MyModel extends GeneratedDTO { ... }`
+   - Use `EntityContainer<T>` for lazy-loaded relationships
 
-**Trade-offs considered:**
-- **Schema validation overhead**: Zod validation adds minimal runtime cost but provides significant development-time safety
-- **Model extension complexity**: Interface extension pattern adds a layer but enables domain-specific enhancements
-- **Service layer abstraction**: Additional abstraction over generated clients but enables consistent error handling and logging
+3. **Service Layer** (`services/`): Injectable services integrating Swagger clients
+   - Pattern: Async methods with AbortSignal support
+   - Standardized error handling with `ResponseArgsError`
+   - Structured logging via `@isa/core/logging`
 
-**Evidence from current implementation:**
-- Analysis of 4 data-access libraries shows successful patterns in `catalogue`, `remission`, `crm`, and `oms`
-- `RemissionReturnReceiptService` demonstrates effective integration with logging and error handling
-- `EntityContainer<T>` pattern proven effective for lazy-loaded relationships in remission domain
-
-**Developer experience impact:**
-- Consistent patterns reduce cognitive load when switching between domains
-- Type inference from Zod schemas eliminates manual type definitions
-- Standardized error handling reduces debugging time
-- Auto-completion and type safety improve development velocity
-
-**Long-term maintainability:**
-- Clear separation of concerns between validation, models, and API integration
-- Generated client changes don't break domain-specific model extensions
-- Consistent logging and error handling simplifies troubleshooting
-
-## Alternatives Considered
-| Alternative | Summary | Pros | Cons | Reason Not Chosen |
-|-------------|---------|------|------|-------------------|
-| Option A | | | | |
-| Option B | | | | |
-| Option C | | | | |
-
-Add deeper detail below if needed:
-### Option A – <name>
-### Option B – <name>
-### Option C – <name>
-
-## Consequences
-### Positive
-- …
-### Negative / Risks / Debt Introduced
-- …
-### Neutral / Open Questions
-- …
-
-## Implementation Plan
-
-### Phase 0 – Analysis & Standards (Completed)
-- ✅ Analyzed existing data-access libraries (`catalogue`, `remission`, `crm`, `oms`)
-- ✅ Identified common patterns and best practices
-- ✅ Documented standard library structure
-
-### Phase 1 – Common Utilities Enhancement
-- Enhance `@isa/common/data-access` with additional utilities
-- Add standardized error types and response handling
-- Create reusable operators and decorators
-- Add helper functions for common API patterns
-
-### Phase 2 – Template & Generator Creation
-- Create Nx generator for new data-access libraries
-- Develop template files for schemas, models, and services
-- Add code snippets and documentation templates
-- Create migration guide for existing libraries
-
-### Phase 3 – Existing Library Standardization
-- Update `catalogue/data-access` to follow complete pattern
-- Migrate `crm/data-access` to standard structure
-- Ensure `remission/data-access` follows all conventions
-- Standardize `oms/data-access` implementation
-
-### Phase 4 – New Library Implementation
-- Apply patterns to new domain libraries as they're created
-- Use Nx generator for consistent setup
-- Enforce patterns through code review and linting
-
-### Tasks / Workstreams
-**Infrastructure:**
-- Update `@isa/common/data-access` with enhanced utilities
-- Add ESLint rules for data-access pattern enforcement
-- Update `tsconfig.base.json` path mappings as needed
-
-**Library Enhancements:**
-- Create Nx generator: `nx g @isa/generators:data-access-lib <domain>`
-- Add utility functions to `@isa/common/data-access`
-- Enhanced error handling and logging patterns
-
-**Migration Tasks:**
-- Standardize schema validation across all libraries
-- Ensure consistent model extension patterns
-- Align service implementations with logging standards
-- Update tests to match new patterns
-
-**Documentation:**
-- Create data-access implementation guide
-- Update onboarding materials with patterns
-- Add code examples to development wiki
-- Document generator usage and options
-
-### Acceptance Criteria
-- [ ] All data-access libraries follow standardized structure
-- [ ] All API requests use Zod schema validation
-- [ ] All services implement consistent error handling
-- [ ] All services support AbortSignal for cancellation
-- [ ] All models extend generated DTOs appropriately
-- [ ] Nx generator produces compliant library structure
-- [ ] Code review checklist includes data-access patterns
-- [ ] Performance benchmarks show no degradation
-
-### Rollback Plan
-- Individual library changes can be reverted via Git
-- Generated libraries can be recreated with previous patterns
-- No breaking changes to existing public APIs
-- Gradual migration allows for partial rollback by domain
-
-## Architectural Impact
-### Nx / Monorepo Layout
-- Data-access libraries follow domain-based organization: `libs/<domain>/data-access/`
-- Each library exports standard modules: `models`, `schemas`, `services`
-- Dependencies on `@isa/common/data-access` for shared utilities
-- Integration with generated Swagger clients via `@generated/swagger/<api-name>`
-
-### Module / Library Design
-**Standard public API structure (`src/index.ts`):**
+**Standard exports structure:**
 ```typescript
+// src/index.ts
 export * from './lib/models';
 export * from './lib/schemas';
 export * from './lib/services';
 // Optional: stores, helpers
 ```
 
-**Path aliases in `tsconfig.base.json`:**
-- `@isa/<domain>/data-access` for each domain library
-- `@generated/swagger/<api-name>` for generated clients
-- `@isa/common/data-access` for shared utilities
+## Rationale
 
-### State Management
-- Services integrate with NgRx signal stores in feature libraries
-- `EntityContainer<T>` pattern supports lazy loading in state management
-- Resource factory pattern used for async state management (see remission examples)
-- Caching implemented via decorators (`@Cache`, `@InFlight`)
+**Why this approach:**
+- **Type Safety**: Zod provides runtime validation + compile-time types with zero manual type definitions
+- **Separation of Concerns**: Clear boundaries between validation, domain logic, and API integration
+- **Consistency**: Identical patterns across all domains reduce cognitive load
+- **Maintainability**: Changes to generated clients don't break domain-specific enhancements
+- **Developer Experience**: Auto-completion, type inference, and standardized error handling improve velocity
 
-### Runtime & Performance
-- Zod schema validation adds minimal runtime overhead
-- Generated clients are tree-shakeable
-- AbortSignal support enables request cancellation
-- Caching decorators reduce redundant API calls
-- `firstValueFrom` pattern avoids memory leaks from subscriptions
+**Evidence supporting this decision:**
+- Analysis of 4 existing data-access libraries shows these patterns emerging naturally
+- `RemissionReturnReceiptService` demonstrates successful integration with logging
+- `EntityContainer<T>` pattern proven effective for relationship management
+- Zod validation catches input errors before API calls, reducing backend load
 
-### Security & Compliance
-- All API calls go through generated clients with consistent auth handling
-- Input validation via Zod schemas prevents injection attacks
-- AbortSignal support enables proper request cleanup
-- Logging excludes sensitive data through structured context
+## Consequences
 
-### Observability & Logging
-- Consistent logging via `@isa/core/logging` with service-level context
-- Structured logging with operation context and request metadata
-- Error logging includes request details without sensitive data
-- Debug logging for development troubleshooting
+**Positive:** Consistent patterns, runtime + compile-time type safety, clear maintainability, reusable utilities, structured debugging, optimized performance.
 
-### DX / Tooling
-- Consistent patterns reduce learning curve across domains
-- Type inference from Zod schemas eliminates manual type definitions
-- Auto-completion from TypeScript interfaces
-- Standard error handling patterns
+**Negative:** Migration effort for existing libs, learning curve for Zod, ~1-2ms validation overhead, extra abstraction layer.
+
+**Open Questions:** User-facing error message conventions, testing standards.
 
 ## Detailed Design Elements
 
@@ -319,6 +163,13 @@ export class DomainService {
 ## Code Examples
 
 ### Complete Data-Access Library Structure
+See full examples in existing implementations:
+- `libs/catalogue/data-access` - Basic patterns
+- `libs/remission/data-access` - Advanced with EntityContainer
+- `libs/crm/data-access` - Service examples
+- `libs/oms/data-access` - Model extensions
+
+**Quick Reference:**
 ```typescript
 // libs/domain/data-access/src/lib/schemas/fetch-items.schema.ts
 import { z } from 'zod';
@@ -347,15 +198,7 @@ export interface Item extends ItemDTO {
   formattedPrice: string;
 }
 
-// libs/domain/data-access/src/lib/services/item.service.ts
-import { inject, Injectable } from '@angular/core';
-import { ItemService as GeneratedItemService } from '@generated/swagger/domain-api';
-import { firstValueFrom } from 'rxjs';
-import { takeUntilAborted, ResponseArgsError } from '@isa/common/data-access';
-import { logger } from '@isa/core/logging';
-import { FetchItemsInput, FetchItemsSchema } from '../schemas';
-import { Item } from '../models';
-
+// Service
 @Injectable({ providedIn: 'root' })
 export class ItemService {
   #itemService = inject(GeneratedItemService);
@@ -480,8 +323,9 @@ When and how this ADR will be re-evaluated (date, trigger conditions, metrics th
 ## Status Log
 | Date | Change | Author |
 |------|--------|--------|
-| 2025-09-29 | Created (Draft) | Lorenz, Nino |
-| 2025-09-25 | Analysis completed, comprehensive patterns documented | AI Assistant |
+| 2025-10-02 | Condensed for readability | Lorenz, Nino |
+| 2025-09-29 | Created (Draft) | Lorenz |
+| 2025-09-25 | Analysis completed, comprehensive patterns documented | Lorenz, Nino |
 
 ## References
 **Existing Implementation Examples:**

generated/swagger/crm-api/src/models/entity-dtocontainer-of-attribute-dto.ts

@@ -1,6 +1,7 @@
 /* tslint:disable */
 import { EntityDTOReferenceContainer } from './entity-dtoreference-container';
 import { AttributeDTO } from './attribute-dto';
-export interface EntityDTOContainerOfAttributeDTO extends EntityDTOReferenceContainer {
+export interface EntityDTOContainerOfAttributeDTO
+  extends EntityDTOReferenceContainer {
   data?: AttributeDTO;
 }

libs/checkout/data-access/src/lib/facades/reward-selection.facade.ts

@@ -9,13 +9,16 @@ export class RewardSelectionFacade {
   completeRewardSelection({
     tabId,
     rewardSelectionItems,
+    p4mAccountId,
   }: {
     tabId: number;
     rewardSelectionItems: RewardSelectionItem[];
+    p4mAccountId: string;
   }) {
     return this.#shoppingCartService.completeRewardSelection({
       tabId,
       rewardSelectionItems,
+      p4mAccountId,
     });
   }
 }

libs/checkout/data-access/src/lib/helpers/calculate-loyalty-points-value.helper.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { calculateLoyaltyPointsValue } from './get-loyalty-points.helper';
+import { calculateLoyaltyPointsValue } from './calculate-loyalty-points-value.helper';
 import { RewardSelectionItem } from '@isa/checkout/data-access';
 
 describe('calculateLoyaltyPointsValue', () => {

libs/checkout/data-access/src/lib/helpers/calculate-price-value.helper.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { calculatePriceValue } from './get-price.helper';
+import { calculatePriceValue } from './calculate-price-value.helper';
 import { RewardSelectionItem } from '@isa/checkout/data-access';
 
 describe('calculatePriceValue', () => {

libs/checkout/data-access/src/lib/helpers/checkout-data.helpers.spec.ts

@@ -5,6 +5,7 @@ import {
   hasValidItemId,
   hasValidDestinationData,
   ShippingTargets,
+  calculateTotalLoyaltyPoints,
 } from './checkout-data.helpers';
 import {
   EntityDTOContainerOfShoppingCartItemDTO,
@@ -610,4 +611,214 @@ describe('Checkout Data Helpers', () => {
       expect(ShippingTargets.B2B_DELIVERY).toBe(16);
     });
   });
+
+  describe('calculateTotalLoyaltyPoints', () => {
+    it('should calculate total loyalty points with quantities', () => {
+      // Arrange
+      const items: EntityDTOContainerOfShoppingCartItemDTO[] = [
+        {
+          id: 1,
+          data: {
+            loyalty: { value: 18500 },
+            quantity: 1,
+          },
+        } as EntityDTOContainerOfShoppingCartItemDTO,
+        {
+          id: 2,
+          data: {
+            loyalty: { value: 20100 },
+            quantity: 2,
+          },
+        } as EntityDTOContainerOfShoppingCartItemDTO,
+      ];
+
+      // Act
+      const result = calculateTotalLoyaltyPoints(items);
+
+      // Assert
+      // 18500 × 1 + 20100 × 2 = 18500 + 40200 = 58700
+      expect(result).toBe(58700);
+    });
+
+    it('should return 0 for empty array', () => {
+      // Arrange
+      const items: EntityDTOContainerOfShoppingCartItemDTO[] = [];
+
+      // Act
+      const result = calculateTotalLoyaltyPoints(items);
+
+      // Assert
+      expect(result).toBe(0);
+    });
+
+    it('should return 0 for undefined items', () => {
+      // Arrange
+      const items = undefined;
+
+      // Act
+      const result = calculateTotalLoyaltyPoints(items);
+
+      // Assert
+      expect(result).toBe(0);
+    });
+
+    it('should handle items without loyalty points', () => {
+      // Arrange
+      const items: EntityDTOContainerOfShoppingCartItemDTO[] = [
+        {
+          id: 1,
+          data: {
+            loyalty: null,
+            quantity: 2,
+          },
+        } as EntityDTOContainerOfShoppingCartItemDTO,
+        {
+          id: 2,
+          data: {
+            loyalty: { value: 10000 },
+            quantity: 1,
+          },
+        } as EntityDTOContainerOfShoppingCartItemDTO,
+      ];
+
+      // Act
+      const result = calculateTotalLoyaltyPoints(items);
+
+      // Assert
+      // 0 × 2 + 10000 × 1 = 10000
+      expect(result).toBe(10000);
+    });
+
+    it('should treat missing quantity as 1', () => {
+      // Arrange
+      const items: EntityDTOContainerOfShoppingCartItemDTO[] = [
+        {
+          id: 1,
+          data: {
+            loyalty: { value: 15000 },
+            quantity: undefined,
+          },
+        } as EntityDTOContainerOfShoppingCartItemDTO,
+      ];
+
+      // Act
+      const result = calculateTotalLoyaltyPoints(items);
+
+      // Assert
+      // 15000 × 1 (default) = 15000
+      expect(result).toBe(15000);
+    });
+
+    it('should handle items with zero loyalty points', () => {
+      // Arrange
+      const items: EntityDTOContainerOfShoppingCartItemDTO[] = [
+        {
+          id: 1,
+          data: {
+            loyalty: { value: 0 },
+            quantity: 5,
+          },
+        } as EntityDTOContainerOfShoppingCartItemDTO,
+        {
+          id: 2,
+          data: {
+            loyalty: { value: 12000 },
+            quantity: 1,
+          },
+        } as EntityDTOContainerOfShoppingCartItemDTO,
+      ];
+
+      // Act
+      const result = calculateTotalLoyaltyPoints(items);
+
+      // Assert
+      // 0 × 5 + 12000 × 1 = 12000
+      expect(result).toBe(12000);
+    });
+
+    it('should handle items with null data', () => {
+      // Arrange
+      const items: EntityDTOContainerOfShoppingCartItemDTO[] = [
+        {
+          id: 1,
+          data: null,
+        } as EntityDTOContainerOfShoppingCartItemDTO,
+        {
+          id: 2,
+          data: {
+            loyalty: { value: 8000 },
+            quantity: 2,
+          },
+        } as EntityDTOContainerOfShoppingCartItemDTO,
+      ];
+
+      // Act
+      const result = calculateTotalLoyaltyPoints(items);
+
+      // Assert
+      // 0 + 8000 × 2 = 16000
+      expect(result).toBe(16000);
+    });
+
+    it('should handle multiple items with different quantities', () => {
+      // Arrange
+      const items: EntityDTOContainerOfShoppingCartItemDTO[] = [
+        {
+          id: 1,
+          data: {
+            loyalty: { value: 5000 },
+            quantity: 3,
+          },
+        } as EntityDTOContainerOfShoppingCartItemDTO,
+        {
+          id: 2,
+          data: {
+            loyalty: { value: 10000 },
+            quantity: 1,
+          },
+        } as EntityDTOContainerOfShoppingCartItemDTO,
+        {
+          id: 3,
+          data: {
+            loyalty: { value: 2500 },
+            quantity: 4,
+          },
+        } as EntityDTOContainerOfShoppingCartItemDTO,
+      ];
+
+      // Act
+      const result = calculateTotalLoyaltyPoints(items);
+
+      // Assert
+      // 5000 × 3 + 10000 × 1 + 2500 × 4 = 15000 + 10000 + 10000 = 35000
+      expect(result).toBe(35000);
+    });
+
+    it('should handle items with zero quantity', () => {
+      // Arrange
+      const items: EntityDTOContainerOfShoppingCartItemDTO[] = [
+        {
+          id: 1,
+          data: {
+            loyalty: { value: 20000 },
+            quantity: 0,
+          },
+        } as EntityDTOContainerOfShoppingCartItemDTO,
+        {
+          id: 2,
+          data: {
+            loyalty: { value: 10000 },
+            quantity: 2,
+          },
+        } as EntityDTOContainerOfShoppingCartItemDTO,
+      ];
+
+      // Act
+      const result = calculateTotalLoyaltyPoints(items);
+
+      // Assert
+      // 20000 × 0 + 10000 × 2 = 0 + 20000 = 20000
+      expect(result).toBe(20000);
+    });
+  });
 });

libs/checkout/data-access/src/lib/helpers/checkout-data.helpers.ts

@@ -162,3 +162,51 @@ export function hasValidDestinationData(
     destination.data !== undefined
   );
 }
+
+/**
+ * Calculates the total loyalty points required for a shopping cart.
+ *
+ * @remarks
+ * Pure calculation function that sums up all loyalty point values from shopping cart items,
+ * accounting for item quantities. Returns 0 if the cart has no items or if items is undefined/null.
+ * Safely handles missing loyalty data by treating missing values as 0 points.
+ * Treats missing quantities as 1 (default quantity).
+ *
+ * Used in reward shopping cart components to:
+ * - Calculate total points required for checkout
+ * - Validate if customer has sufficient points
+ * - Display remaining points after purchase
+ *
+ * @param items - Shopping cart items to calculate total points from
+ * @returns Total loyalty points required (sum of all item loyalty values × quantities), or 0 if no items
+ *
+ * @example
+ * ```typescript
+ * const items = [
+ *   { data: { loyalty: { value: 20100 }, quantity: 2 } },  // 20100 × 2 = 40200
+ *   { data: { loyalty: { value: 9100 }, quantity: 1 } },   // 9100 × 1 = 9100
+ *   { data: { loyalty: null } }                            // 0 points (counted as 0)
+ * ];
+ * const total = calculateTotalLoyaltyPoints(items);
+ * // Returns: 49300
+ * ```
+ *
+ * @example
+ * ```typescript
+ * const emptyCart = [];
+ * const total = calculateTotalLoyaltyPoints(emptyCart);
+ * // Returns: 0
+ * ```
+ */
+export function calculateTotalLoyaltyPoints(
+  items: EntityDTOContainerOfShoppingCartItemDTO[] | undefined,
+): number {
+  if (!items?.length) {
+    return 0;
+  }
+  return items.reduce((sum, item) => {
+    const loyaltyValue = item.data?.loyalty?.value ?? 0;
+    const quantity = item.data?.quantity ?? 1;
+    return sum + loyaltyValue * quantity;
+  }, 0);
+}