# POS — Customer Modal (detailed build)

**1:1 from `customer-modal-spec.md`** — fully interactive Clopos Customers modal, QA-tested (0 JS bugs).
Modal **1138×1007** · Inter · ₼ glyph · **radius 8px** (50% avatars/stamps/day-cells · 999px pills). Backdrop `#E9ECF2`. Amounts always 2-decimal (`12.00 ₼`).

Two view variants: **a** (segmented Info/Campaigns/History tabs) · **b-stacked** (same content, no segmented control — all three sections stacked on one scrolling page).

## Shell
Title bar h56 `--secondary-500` "Customers" + close. Body = left list (clamp 260–400) + right pane. Right block content padded 16px; grey pane fills the block (no white frame). On keyboard focus `.body` shrinks (push-up).

## Left list
Search **h56** (icon + "Search..." + clear) · rows h52, 6px gap (avatar 36 `--primary-50`/initials `#205F9F`; selected `--primary-50` + white avatar; name 14 · phone 13 `#666` · code 13 `#999`) · "Create customer" h56 `--primary-500` · **"No results"** empty state.

## Right — View
Sticky white profile header (avatar **56** · name 20/600 · phone•ID · **Apply** → spinner ~1.5s → green **"✓ Applied"** → resets · **dots** menu → Edit / Create transaction / Delete):
- **Info** — KPI 2-up (48px icon tile; Cashback star; Balance `--primary-500`) · metrics bar (4 cells) · info rows (Gender/Birth/E-mail/Address/My-customers + group pill + toggle). Caption↔value gap 4px.
- **Campaigns** — flex-wrap cards: 2 stamp · 2 bar · 1 complete (green Ready).
- **History** — Receipts (48) table.

## Right — Create / Edit form
White sticky header (title + sub; Edit shows avatar) + **Cancel** / **Save**. Sections **Main info · Address · Note** (cards, gap 24):
- Full name | Card · **Mobile** (flag country dropdown + phone + attached **+** → extra phone rows) · Customer group | E-mail · Gender | Birth date (input + 24px calendar → date-picker modal) · Primary & extra addresses — each `[input · edit/arrow btn · +/×]` (arrow when empty, edit ✎ when filled; opens overlay), per-address **note** sub-line · Note textarea.
- **Number fields numeric-only** (Card, phone) — letters stripped. Crisp 1.5px real borders.

## Date picker (Mantine DatePicker · our tokens)
3 levels — **day → month → year**; centre label cycles levels (click year-label/decade → up; pick → down). Arrows navigate current level. 42-cell day grid (outside days dimmed), **circular** selected day, leap-aware. Footer = Button-component **Cancel / Select** (44px); Select disabled until a day is picked.

## POS on-screen keyboard
Appears on focusing **any** input (form · list search · address overlay) — **numpad** for numeric fields, **QWERTY** (shift · ?123 · space · Done) for text. Large touch keys (62/76px). **Push-up**: opening shrinks the content area so the field stays above the keyboard; for overlay inputs the keyboard rises above the overlay (z-55) and the overlay modal shifts up.

## Delete confirm (DS System modal · S)
Overlay rgba(109,109,109,.6) · panel 500 · header `--secondary-300` · trash box `--error-light`/`--error` · Cancel (grey `--grey-400` stroke) / **Delete** (`--error`, no stroke); no modal edge stroke.

## Address overlay (3 steps)
Search (title + search + Select-from-map + LOC results + **"No results"** + per-address note + Confirm) → Map (920px) → Form (legacy). Confirm writes value + note to the target row + toast "Address added".

## Tokens
`--secondary-500/300` navy · `--primary-500/50`/`--p-hover` · `--error`/`--error-light` · `--success`/`--success-light` · `--text-secondary`(#666)/`--text-placeholder`(#999) · `--metal-grey-200` pane · `--grey-300/400` borders · `--radius-md`(8). Verbatim icons: location2_fill (pin) · calendar_today_outlined · editFill `#1794FF`. DS components reused: Button, System-modal, inputs/selects/switch/tag.