# 01 · UI/UX araşdırması və audit — `D:\Workspace\Projects`

> Tarix: 2026-08-23 · Əhatə: `Demo/`, `Developer/`, `Production/` altındakı 14 layihə
> Məqsəd: mövcud interfeyslərdən təkrar istifadə oluna bilən pattern-ləri çıxarmaq və
> yeni layihələr üçün şablona çevirmək.
> Nəticə artefaktları: bu qovluqdakı `02`–`06` sənədləri və `../reference-previews/` HTML ekranları.

---

## 1. İnventar

| # | Layihə | Yer | Tip | Front stack | UI mənbəyi |
|---|--------|-----|-----|-------------|------------|
| 1 | **hub.ubs.az** | Developer | API HUB / biznes platforması | React + Tailwind (spec) | `ui-ux/design.md` + tokens + 7 komponent |
| 2 | **posflame.com** (Sahil POS) | Developer | Restoran POS/ERP | Vite + React + TS + Tailwind | `UI_UX_SPECIFICATION.md` + 28 base komponent |
| 3 | **ASAN Invest** | Demo | Dövlət investisiya portalı | Statik mokap (HTML/CSS/JS) | `DESIGN.md`, `BRAND.md`, `mockup/` |
| 4 | **backlog.ubs.az** | Developer | Tapşırıq/kanban + MCP | Next.js + Supabase + dnd-kit | `DESIGN.md` |
| 5 | **kanban.ubs.az** | Developer | Claude sessiya lövhəsi | Fastify + vanilla JS | `public/styles.css` (Rəf tokenləri) |
| 6 | **feedback.az** | Developer | Rəy/QR platforması | Next.js + Prisma + next-intl | `src/web` |
| 7 | **emailaze.com** | Production | SaaS marketinq + panel | Vite + React + Tailwind | landing + auth səhifələri |
| 8 | **mail.net.az** | Production | Poçt xidməti | Vite + React (token-siz Tailwind) | landing + auth |
| 9 | **autopilot.ubs.az** | Developer | Anbar (masaüstü) | Electron + React + Supabase | `src/{auth,catalog,stock,admin}` |
| 10 | **asaninvest.ubs.az** | Developer | Sənədləşmə repo | — | yalnız `docs/` |
| 11 | **onebase.ubs.az** | Developer | Layihə xülasəsi | — | yalnız MD |
| 12 | **Optima.Support** | Developer | 1C konfiqurasiyası | 1C idarə olunan formalar | `docs/` |
| 13 | **Optima.Agent** | Production | 1C CFE/EPF | 1C idarə olunan formalar | — |
| 14 | **raft.az** | Production | Brend paketi | statik HTML | loqo, vizit kart, blank |

**Qruplaşma — 4 interfeys ailəsi:**

1. **Biznes platforması / ERP qabığı** — hub, posflame, autopilot, Optima (1C)
2. **İş axını lövhəsi** — backlog, kanban
3. **Marketinq + SaaS panel** — emailaze, mail.net.az, feedback
4. **Qurum/portal** — ASAN Invest, raft.az brend qatı

Şablonlar məhz bu 4 ailəyə görə qurulub.

---

## 2. Ortaq pattern-lər (təkrarlanan və işləyən)

### 2.1 Qovluq strukturu — de-fakto standart

posflame, emailaze, mail.net.az, hub eyni ağacı işlədir:

```
src/
├─ components/
│  ├─ base/       ← təmiz UI (Button, Input, DataTable, EmptyState…)
│  └─ feature/    ← domen bilən (DashboardLayout, AuthGuard, OrgSelector…)
├─ pages/<ad>/    ← hər səhifə öz qovluğunda
├─ i18n/local/{az,en,ru}/
└─ router/
```

Bu ayrım işləyir: `base/` heç bir domen tipini import etmir, ona görə layihələr arası köçürülə bilir.
**Şablona daxil edildi** → `05-component-contract.md`.

### 2.2 Token üzərində rəng — sərt kodlanmış hex yoxdur

hub və posflame eyni yanaşmanı iki fərqli lüğətlə tətbiq edir:

| Sistem | Lüğət | Nümunə |
|---|---|---|
| hub / posflame | **5 rol × 11 addım**, OKLCH kanalları | `--primary-500`, `bg-primary-500` |
| ASAN, backlog, kanban, Rəf kitabxanası | **38 semantik token** | `--primary`, `--surface-2`, `--text-muted` |

İkisi eyni fəlsəfədir, fərq təfərrüat səviyyəsindədir. **Şablon 38 semantik tokeni əsas götürür**
(`tokens/tokens.css` — 8 skin artıq mövcuddur), çünki:

- komponent kodu addım nömrəsi seçmir → yanlış addım seçmək mümkün deyil,
- skin dəyişəndə heç bir sinif adı dəyişmir,
- kontrast müqaviləsi mərkəzləşdirilə bilir.

5 rollu sistemdən keçid xəritəsi → `02-design-system-template.md` §Miqrasiya.

### 2.3 «Kölgə yox, sərhəd» qaydası

hub və posflame ikisi də açıq şəkildə yazır: dərinlik **sərhəd + qat toniyle** verilir, `box-shadow` ilə yox.
ASAN eyni nəticəyə başqa yolla gəlir (hairline `--line`, `--line-strong`).
Yalnız modal və dropdown kölgə alır — çünki onlar həqiqətən üzən qatdır.

### 2.4 Üç bantlı tətbiq qabığı

hub `Sidebar + TopBar + CommandBar + Main`, posflame `Sidebar + Topbar + Main`.
Hər ikisi: sidebar `w-64`, topbar `h-14`/`h-16`, main scroll edən yeganə sahə.
**Şablon:** `../reference-previews/app-shell.html` (komanda paneli daxil).

### 2.5 CRUD siyahı reseptı

posflame-də açıq yazılıb və digər layihələrdə də təkrarlanır:

```
PageHeader (başlıq + lede + CTA)
  → Filtr (BranchFilter / FilterTabs / SearchInput)
    → DataTable (+ RowActions)
      → EmptyState | ErrorState + RetryButton | Skeleton
        → FormModal (CRUD əməliyyatı)
```

**Şablon:** `../reference-previews/crud-list.html` — dördü də bir səhifədə göstərilib.

### 2.6 Dil: AZ default, üç dil

Bütün veb layihələr `az / en / ru` daşıyır (`i18n/local/…` və ya `next-intl`).
Dil seçicisi emoji bayraq yox, iki hərfli kod göstərir — bu qərar `i18n-standard.md`-də
Windows-da bayraq emoji-nin `AZ AZ` kimi ikiqat render olunmasına görə qeydə alınıb.

### 2.7 Modal siyasəti

`frontend-modal-policy.md`: modal **yalnız düymələrlə** bağlanır; backdrop kliki və ESC qadağandır.
Səbəb — uzun formalarda təsadüfi klik bütün girişi itirir. Şablon buna əməl edir
(`../reference-previews/form-modal.html`).

---

## 3. Fərqlər — və hansının şablona düşdüyü

| Mövzu | Variantlar | Şablon qərarı |
|---|---|---|
| **Rəng lüğəti** | 5 rol × 11 addım (hub, posflame) · 38 semantik (ASAN, Rəf) | **38 semantik** — sadə, skin-agnostik |
| **Şrift** | Inter (hub, ASAN, backlog) · Plus Jakarta + Lora (posflame) · Inter + DM Sans (emailaze) · Commissioner (Rəf) | Skin qərar verir; kod yalnız `--font-body/display/mono` görür |
| **Brend rəngi** | qızıl+firuzə (hub) · terrakota+zeytun (posflame) · kobalt (ASAN) · indiqo (emailaze) · terrakota (backlog) | Şablon rəng seçmir — 8 skin təklif edir |
| **Tema** | light-first (ASAN, hub) · dark-first (backlog) | Hər ikisi birinci dərəcəli; `data-theme` + `prefers-color-scheme` |
| **İkon** | Remix Icon CDN (hub) · lucide-react (feedback) · unicode (kanban) | Şablon ikon kitabxanası tələb etmir; ölçü qabı qaydası saxlanılır |
| **Hərəkət** | framer-motion səhifə keçidi (hub) · CSS keçid (digərləri) | CSS + `prefers-reduced-motion`; framer yalnız lazım olanda |

---

## 4. Aşkarlanmış problemlər

Aşağıdakılar audit zamanı **real fayllarda** görülüb. Hər biri şablonda qarşısı alınan qayda ilə cütləşdirilib.

| # | Tapıntı | Harada | Nəticə | Şablon cavabı |
|---|---|---|---|---|
| P1 | `tailwind.config.ts` boş — `theme.extend: {}`, bütün rənglər sinif adlarında sərt kodlanıb | `mail.net.az` | Rebrend mümkün deyil, tünd tema yoxdur | `02` §Token müqaviləsi — boş konfiq ilə start qadağan |
| P2 | Brend rəngi konfiqdə sərt hex, gradient CSS-də ikinci dəfə təkrarlanıb (`#1e1b4b` iki yerdə) | `emailaze.com` | Rəng dəyişikliyi iki faylda sinxron edilməlidir | Gradient də tokendən qidalanır |
| P3 | `base/` yalnız `Logo.tsx` və ya `Button.tsx` — düymə, input, badge hər səhifədə yenidən yazılıb | `emailaze`, `mail.net.az` | Vizual dreyf: eyni düymənin 3 fərqli hündürlüyü | `05-component-contract.md` — minimum 12 base komponent |
| P4 | Dizayn sənədi var, amma kodda tətbiq olunmayıb (spec `ui-ux/` qovluğunda təcrid olunub) | `hub.ubs.az` | Sənəd köhnəlir, kod ayrı yaşayır | `06-qa-checklist.md` — spec↔kod uyğunluq gate-i |
| P5 | İki fərqli token lüğəti eyni ekosistemdə paralel işləyir | hub/posflame ↔ backlog/kanban | Komponent köçürmək mümkün deyil | Vahid 38 token + miqrasiya cədvəli |
| P6 | Boş/xəta vəziyyəti yalnız bəzi səhifələrdə var | posflame-də var, digərlərində qismən | «Sonsuz spinner» halı | `04-ux-patterns.md` §Dörd vəziyyət qaydası |
| P7 | Statik mokapda `#page` hash-router olmadan konkret səhifəni açmaq mümkün deyil | Asan.Invest mokapı (əvvəlki iterasiya) | QA screenshot çətinləşir | Şablon səhifələri ayrı-ayrı fayllardır |

---

## 5. Güclü tərəflər — saxlanılan qərarlar

- **ASAN Invest** — kontrast dəyərləri token cədvəlində rəqəmlə yazılıb (`13.4:1`, `4.8:1` döşəməsi).
  Bu, «gözəl görünür» mübahisəsini ölçüyə çevirir. → `06-qa-checklist.md`-ə keçdi.
- **ASAN Invest** — status heç vaxt tək rənglə verilmir; hər pill etiket, hər SLA zolağı qalan vaxtı daşıyır.
  → şablonda bütün `.badge` mətnlidir.
- **posflame** — 28 base komponentin hər birinin variant siyahısı sənədləşdirilib. → `05` sənədinin əsası.
- **hub** — «bir ekranda bir dominant vurğu» qaydası. → `02` §Rəng iyerarxiyası.
- **backlog** — hərəkət büdcəsi (`ease-out-quart`, 150–220ms) və `prefers-reduced-motion` fallback-ı.
  → `preview.css`-də tətbiq olunub.
- **Rəf token kitabxanası** — 8 skin × light/dark artıq generasiya olunub və kontrast müqaviləsi var.
  Şablon onun üzərində qurulub, paralel sistem yaratmayıb.

---

## 6. Şablon → layihə uyğunluğu

| Yeni layihə tipi | Başlanğıc skin | Ekran şablonları | Oxunacaq sənəd |
|---|---|---|---|
| ERP / biznes platforması | `neutral-pro` və ya `industrial` | 01 qabıq, 02 CRUD, 03 panel, 04 forma | 02, 04, 05 |
| Dövlət / qurum portalı | `clinical` | 02 CRUD, 03 panel, 07 auth | 02, 06 (kontrast) |
| SaaS məhsul | `signal` | 06 landing, 07 auth, 03 panel | 02, 03 |
| Restoran / qonaqpərvərlik | `atelier` | 01 qabıq, 02 CRUD, 04 forma | 02, 04 |
| Media / dark-first alət | `nocturne` | 05 lövhə, 03 panel | 02, 04 |
| Daxili alət / lövhə | `neutral-pro` | 05 lövhə, 02 CRUD | 04, 05 |

---

## 7. Növbəti addımlar

1. `mail.net.az` və `emailaze.com` üçün token miqrasiyası (P1, P2) — ayrıca tapşırıq.
2. `hub.ubs.az` spesifikasiyasının koda düşməsi (P4).
3. 5 rollu OKLCH sistemindən istifadə edən layihələr üçün avtomatik xəritələmə skripti.

---

**Mənbələr:** `Developer/hub.ubs.az/ui-ux/design.md` · `Developer/posflame.com/UI_UX_SPECIFICATION.md` ·
`Demo/Asan.Invest/DESIGN.md`, `BRAND.md` · `Developer/backlog.ubs.az/DESIGN.md` ·
`Developer/kanban.ubs.az/public/styles.css` · `Production/*/tailwind.config.ts` ·
`Agents/Agent.Designer/tokens/tokens.css`