This feature library provides a comprehensive transaction history view for customer loyalty cards in the CRM system. It displays the last 50 transactions in a tabular format, showing transaction details such as date, booking type, amount, receipt reference, and loyalty points earned or burned. The component uses Angular's Resource API for reactive data loading and handles loading, error, and empty states gracefully.

The component is designed to be embedded within a parent component (such as a customer detail view) and communicates back through output events for coordinated data refreshes.

Components

CrmFeatureCustomerCardTransactionsComponent

Selector: crm-customer-card-transactions

Purpose: Displays a paginated table of customer loyalty card transactions with automatic loading and refresh functionality.

Inputs

customerId: Signal<number | undefined> - The customer ID whose transactions should be loaded. When this value changes, the component automatically fetches new transaction data.

Outputs

reload: EventEmitter<void> - Emitted when the user clicks the refresh button. The parent component is responsible for coordinating multi-resource updates across the page.

Features

Reactive Data Loading: Uses CustomerCardTransactionsResource from @isa/crm/data-access for automatic data fetching with the Resource API pattern
Transaction Display: Shows up to 50 most recent transactions in a styled CDK table
Transaction Types: Visually differentiates between EARN (points gained, green with up arrow) and BURN (points spent, red with down arrow) transactions
Loading States: Displays loading indicator while fetching data
Error Handling: Shows user-friendly error messages when data loading fails
Empty State: Displays an empty state component when no transactions exist
Manual Refresh: Icon button to trigger data reload via parent component
Performance Optimized: Uses trackBy function for efficient list rendering and OnPush change detection strategy

Table Columns

Datum (Date): Transaction timestamp formatted as dd.MM.yyyy HH:mm:ss
Buchungsart (Booking Type): Transaction reason/description
Umsatz (Amount): Transaction amount in EUR with proper decimal formatting
Bon-Nummer (Reference): Receipt/transaction reference number
Lesepunkte (Points): Loyalty points with visual indicators (green up arrow for earned, red down arrow for burned)

Change Detection

The component uses ChangeDetectionStrategy.OnPush for optimal performance and relies on signals for reactive state management.

Usage

Basic Integration

import { CrmFeatureCustomerCardTransactionsComponent } from '@isa/crm/feature/customer-card-transactions';

@Component({
  selector: 'app-customer-detail',
  imports: [CrmFeatureCustomerCardTransactionsComponent],
  template: `
    <crm-customer-card-transactions
      [customerId]="selectedCustomerId()"
      (reload)="reloadAllCustomerData()"
    />
  `
})
export class CustomerDetailComponent {
  selectedCustomerId = signal<number | undefined>(undefined);

  reloadAllCustomerData() {
    // Coordinate refresh of all customer-related resources
    this.customerResource.reload();
    this.transactionsResource.reload();
    // ... other resources
  }
}

Prerequisites

This component requires the CustomerCardTransactionsResource to be provided in the dependency injection tree. Ensure that the resource is properly configured in your parent component or route providers.

import { CustomerCardTransactionsResource } from '@isa/crm/data-access';

@Component({
  providers: [CustomerCardTransactionsResource],
  // ...
})

Dependencies

Internal Dependencies (@isa/*)

@isa/crm/data-access - Provides CustomerCardTransactionsResource for transaction data fetching
@isa/ui/empty-state - Empty state component for when no transactions exist
@isa/ui/buttons - Icon button component for refresh functionality
@isa/icons - Icon library providing isaActionPolygonUp, isaActionPolygonDown, and isaActionRefresh icons
@isa/core/logging - Logging utilities for component diagnostics

External Dependencies

@angular/cdk/table - CDK table module for performant table rendering
@angular/common - DatePipe and DecimalPipe for data formatting
@ng-icons/core - Icon component infrastructure
@generated/swagger/crm-api - Generated API types (LoyaltyBookingInfoDTO)

Architecture Notes

Standalone Component: Fully standalone with no NgModule dependencies
Signal-based: Uses Angular signals for reactive state management
Resource API Pattern: Leverages Angular's Resource API through the data-access layer
Parent-coordinated Refresh: Delegates refresh coordination to parent component to maintain consistency across multiple related data sources
Design System Compliant: Uses Tailwind CSS classes following the ISA design system
Accessibility: Implements semantic HTML table structure with proper header associations

Styling

The component includes custom CSS for the CDK table with the following characteristics:

Rounded header row with gray background (#ced4da)
Row spacing for visual separation
Left-aligned text columns with right-aligned numeric columns
Responsive padding and consistent typography
Transparent icon button styling for the refresh action

Data Model

The component consumes LoyaltyBookingInfoDTO from the CRM API, which includes:

date: Transaction timestamp
reason: Transaction description/reason
amount: Transaction amount in EUR
reference: Receipt/transaction reference number
points: Loyalty points affected
type: Transaction type (EARN or BURN)

Testing

Run unit tests with:

nx test crm-feature-customer-card-transactions