# POS Display Component

A reusable component for displaying Point-of-Sale (POS) terminal information with configurable variants.

## Overview

The `PosDisplayComponent` displays POS entity information in a card-based layout with support for different visibility variants ('consumer', 'partner', 'full').

## Features

- **Variant Support**: Choose from 'consumer', 'partner', or 'full' display modes
- **Conditional Field Visibility**: Fields are dynamically shown/hidden based on variant
- **Edit Mode**: Toggle between view and edit modes
- **Responsive Grid**: Displays up to 3 columns with gap-4 spacing
- **More Actions**: Optional button for additional actions

## Usage

### Basic Usage

```typescript
import { PosDisplayComponent, IPosEntity } from '@/app/components';

@Component({
  selector: 'app-my-component',
  template: `
    <app-pos-display
      variant="consumer"
      [pos]="posData"
      [editMode]="isEditing"
      (onMoreAction)="handleMoreAction()"
      (editModeChange)="editModeChange($event)"
    />
  `,
  standalone: true,
  imports: [PosDisplayComponent],
})
export class MyComponent {
  posData = signal<IPosEntity>({
    id: '123',
    name: 'Terminal 1',
    pos_type: 'PSP',
    serial_number: 'SN123',
    model: 'Model X',
    status: 'active',
    complex: { id: 'c1', name: 'Complex 1' },
    device: { id: 'd1', name: 'Device A' },
    provider: { id: 'p1', name: 'Provider A' },
  });

  isEditing = signal(false);

  handleMoreAction(): void {
    console.log('More action clicked');
  }

  editModeChange(editing: boolean): void {
    this.isEditing.set(editing);
  }
}
```

## Variants

### Consumer Variant
Displays: name, pos_type, serial_number, device, model, provider (6 fields)

### Partner Variant
Displays: name, pos_type, serial_number (3 fields)

### Full Variant
Displays: name, pos_type, serial_number, device, model, provider (6 fields - same as consumer)

## Inputs

| Input | Type | Default | Description |
|-------|------|---------|-------------|
| `variant` | 'consumer' \| 'partner' \| 'full' | 'full' | Display variant mode |
| `pos` | Signal<IPosEntity \| undefined> | undefined | POS entity data |
| `editMode` | Signal<boolean> | false | Edit mode state |
| `cardTitle` | string | 'اطلاعات پایانه‌ی فروش' | Card header title |
| `showMoreActions` | boolean | true | Show more actions button |

## Outputs

| Output | Payload | Description |
|--------|---------|-------------|
| `editModeChange` | boolean | Emitted when edit mode toggled |
| `onMoreAction` | void | Emitted when more actions button clicked |
| `onSubmit` | void | Emitted on form submission |

## Model (IPosEntity)

```typescript
interface IPosEntity {
  id: string;
  name: string;
  serial_number: string;
  model?: string;
  status: string;
  pos_type: string;
  complex: ISummary;
  device?: ISummary;
  provider?: ISummary;
}
```

## Integration in Existing Component

To replace the inline display in your POS single view:

```typescript
// Before: Manual field rendering
<app-key-value label="عنوان" [value]="pos()?.name" />
<app-key-value label="نوع پایانه" [value]="pos()?.pos_type" />
// ... more fields

// After: Use the component
<app-pos-display
  variant="full"
  [pos]="pos"
  [editMode]="editMode"
  (onMoreAction)="toPosLanding()"
/>
```

## Files

- `pos-display.component.ts` - Component logic
- `pos-display.component.html` - Template
- `pos-display.component.scss` - Styles
- `models/posEntity.model.ts` - TypeScript interfaces and types
- `index.ts` - Barrel export
