# @isa/crm/feature/customer-card-transactions

A standalone Angular component that displays customer loyalty card transaction history with automatic data loading and refresh capabilities.

## Overview

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

1. **Datum (Date)**: Transaction timestamp formatted as `dd.MM.yyyy HH:mm:ss`
2. **Buchungsart (Booking Type)**: Transaction reason/description
3. **Umsatz (Amount)**: Transaction amount in EUR with proper decimal formatting
4. **Bon-Nummer (Reference)**: Receipt/transaction reference number
5. **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

```typescript
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.

```typescript
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:

```bash
nx test crm-feature-customer-card-transactions
```
