AI agenti

vo vývoji softvéru

Marián Boďa

O mne

SW dev konzultant
- Web & mobile apps tech leadership
- Agilný proces vo vývoji SW
- AI v SW dev procese
- AI v produktoch
19 rokov vo vývoji SW
výroba, banking, crypto, medical
TS, React, Svelte, Clojure

Vývoj informačných systémov pre zdravotnícke zariadenia

Softmedic

Lekárske ambulancie
Pharmasoft

Lekárne
Sieť zdravia

Rezervačný portál pre pacientov, lekárne a lekárov

Obsah

Slovník
Evolúcia AI nástrojov
Úrovne používania AI
Praktické príklady
Trendy a obmedzenia
Ako začať

Slovník

Základné AI pojmy

AI - Umelá inteligencia
LLM - Veľký jazykový model; AI na spracovanie textu
Agent - Autonómny AI proces schopný plánovať a používať nástroje
Token - Najmenšia jednotka textu (slovo alebo časť slova)
Context window - „Pamäť" modelu v rámci jednej session
Prompt - Zadanie alebo otázka pre AI
AI slop - Nekvalitný AI generovaný obsah

TOKEN

LLM

AGENT

Evolúcia AI nástrojov

Rebríček adopcie AI

Na akom leveli si? 🎮

7+ levelov používania AI

💬 ChatGPT - Otázka → odpoveď
📋 ChatGPT - Copy + paste
⚡ Copilot autocomplete
🤖 Agent 1. generácie (Copilot)
🚀 Agent 2. generácie (IDE):
- Cursor, Windsurf, Cline, Aider (Vibe coding)
🎯 Agent 3. generácie (CLI)
- Claude Code, Qwen 3 Coder, Gemini CLI,...
🌟 + Pokročilé zručnosti... →

Pokročilé zručnosti

Používanie API, CLI, web tools
MCP servery
Context Engineering
TDD
Sub-agenti
Claude Skills
Spec / Plan / TODO workflow
Automation (claude -p)
Paralelizácia
Meta prompting + evals
Self hosting (Ollama, ...)
MCP authoring
agenti ako MCP
/bashes
custom commands

Praktické príklady

Nekvalitné požiadavky → kvalitná dokumentácia
Dokumentácia → testy → funkčný kód
Prototypovanie (Vibe coding+)
MCPs (rozšírenia AI)

Case Study: Pokladňa

Požiadavky

# Epic: Pokladňa

## Prehľad

Implementácia komplexného pokladničného modulu pre správu hotovostných transakcií. Modul umožní flexibilné zobrazenie pokladničných dokladov, pokročilé filtrovanie a vyhľadávanie, dávkové spracovanie a integráciu s účtovníctvom.

### Hlavné ciele
- Personalizované používateľské rozhranie s nastaviteľným rozložením
- Efektívna správa príjmových a výdajových dokladov
- Pokročilé filtrovanie a vyhľadávanie
- Podpora denných uzávierok a exportu do účtovníctva

### User Stories (s odhadmi)

1. **Nastaviteľné rozloženie obrazovky** (13 SP)
2. **Zobrazenie pokladničných dokladov** (8 SP)
3. **Filtrovanie a vyhľadávanie** (13 SP)
4. **Správa dokladov** (21 SP)
5. **Dávkové spracovanie** (5 SP)
6. **Export a tlač** (8 SP)
7. **Integrácia s bankovými účtami** (13 SP) - *voliteľné*

**Celkový odhad: 68-81 SP**

* * *

## Detailné požiadavky

### 1. Hlavná obrazovka

#### Rozloženie
- **Flexibilný layout**
  - Nastaviteľné rozdelenie obrazovky (50/50, 70/30)
  - Presúvanie okrajov myšou (drag & drop)
  - Denný/mesačný tabuľkový pohľad
  - Uloženie personálnych nastavení pre každého používateľa

### 2. Pokladničné doklady

#### Zobrazenie
- **Stĺpce**
  - Dátum a čas
  - Typ dokladu (príjem/výdaj)
  - Číslo dokladu
  - Popis
  - Suma
  - Typ platby (hotovosť, karta, prevod)
  - Zostatok

- **Funkcionality**
  - Pamätanie nastavení používateľa
  - Možnosť skrývania/zobrazenia stĺpcov
  - Sortovanie pomocou šípok ↑↓
  - Personálne uloženie usporiadania

#### Operácie nad stĺpcami
- Denný súčet
- Kontrolný súčet
- Kontextové menu pre operácie

### 3. Stránkovanie a navigácia

- Zobrazenie počtu položiek
- Aktuálna stránka
- Navigačné tlačidlá (prvá, predchádzajúca, nasledujúca, posledná)

### 4. Filtrovanie

#### Funkcionality
- **Ikona filtra** v hlavnom paneli
- **Uložené kombinácie filtrov** (šablóny)
- **Rýchly prístup** k predvoleným filtrom
- **Viditeľný filter panel** pod hlavným panelom

#### Filtrovacie kritériá
- Dátumový rozsah
- Typ dokladu
- Typ platby
- Rozsah súm
- Stav dokladu

### 5. Vyhľadávanie

- **Vyhľadávanie podľa**
  - Čísla dokladu
  - Popisu
  - Poznámky
  - Kombinovaného dátumu/času/sumy

- **Možnosti vyhľadávania**
  - Od začiatku textu
  - Kdekoľvek v texte
  - Regulárne výrazy

### 6. Hromadný výber

- Checkboxy pre výber položiek
- Dávkové spracovanie vybraných dokladov
- Hromadné operácie (export, tlač, zmena stavu)

### 7. Funkcie s dokladmi

#### Základné operácie
- **Nový príjem** - vytvorenie príjmového dokladu
- **Nový výdaj** - vytvorenie výdajového dokladu
- **Úprava** - editácia existujúceho dokladu (ak je povolené)
- **Storno** - stornovanie dokladu

#### Pokročilé funkcie
- **Denná uzávierka** - uzatvorenie a zamknutie dňa
- **Export do účtovníctva** - podpora rôznych formátov
- **Tlač pokladničnej knihy** - generovanie tlačových zostáv

### 8. Technické požiadavky

#### Podporované funkcie
- **Multi-mena** - podpora EUR a CZK (pre zákazníkov s korunami)
- **QR kódy** - generovanie QR kódov na dokladoch (voliteľné)
- **Fiskalná tlačiareň** - integrácia s fiskálnymi tlačiarňami
- **Bankové účty** - prepojenie s bankovými účtami (voliteľné)

#### Riešenie problémov
- **Číslovanie dokladov** - zabezpečenie kontinuity, riešenie dier v číslovaní
- **Audit trail** - sledovanie všetkých zmien
- **Zálohovanie** - automatické zálohy pred uzávierkami

* * *

## User Stories

### US-1: Nastaviteľné rozloženie obrazovky (13 SP)

**Ako** používateľ
**Chcem** si nastaviť rozloženie pokladničnej obrazovky
**Aby** som mal optimálne usporiadanie pre svoju prácu

**Akceptačné kritériá:**
- Možnosť voľby rozdelenia 50/50 alebo 70/30
- Drag & drop pre zmenu veľkosti panelov
- Prepínanie medzi denným a mesačným pohľadom
- Uloženie nastavení pre každého používateľa

* * *

### US-2: Zobrazenie pokladničných dokladov (8 SP)

**Ako** používateľ
**Chcem** vidieť prehľad všetkých pokladničných dokladov
**Aby** som mal kontrolu nad stavom pokladne

**Akceptačné kritériá:**
- Zobrazenie príjmov, výdajov a zostatkov
- Možnosť skrytia/zobrazenia stĺpcov
- Sortovanie podľa všetkých stĺpcov
- Uloženie personálnych nastavení

* * *

### US-3: Filtrovanie a vyhľadávanie (13 SP)

**Ako** používateľ
**Chcem** efektívne filtrovať a vyhľadávať doklady
**Aby** som rýchlo našiel potrebné informácie

**Akceptačné kritériá:**
- Pokročilé filtrovanie s uloženými šablónami
- Fulltextové vyhľadávanie
- Kombinované kritériá
- Rýchly prístup k predvoleným filtrom

* * *

### US-4: Správa dokladov (21 SP)

**Ako** používateľ
**Chcem** vytvárať a spravovať pokladničné doklady
**Aby** som evidoval všetky hotovostné transakcie

**Akceptačné kritériá:**
- Vytvorenie príjmových a výdajových dokladov
- Úprava a storno dokladov
- Denná uzávierka s kontrolami
- Zabezpečenie kontinuity číslovania

* * *

### US-5: Dávkové spracovanie (5 SP)

**Ako** používateľ
**Chcem** hromadne spracovávať vybrané doklady
**Aby** som ušetril čas pri opakovaných úkonoch

**Akceptačné kritériá:**
- Výber viacerých dokladov
- Hromadné operácie (export, tlač, zmena stavu)
- Potvrdenie pred vykonaním operácie

* * *

### US-6: Export a tlač (8 SP)

**Ako** účtovník
**Chcem** exportovať a tlačiť pokladničné doklady
**Aby** som ich mohol spracovať v účtovníctve

**Akceptačné kritériá:**
- Export do podporovaných účtovných formátov
- Tlač pokladničnej knihy
- Generovanie QR kódov (voliteľné)
- Integrácia s fiskálnou tlačiarňou

* * *

### US-7: Integrácia s bankovými účtami (13 SP) - *Voliteľné*

**Ako** používateľ
**Chcem** prepojiť pokladňu s bankovými účtami
**Aby** som mal komplexný prehľad o financiách

**Akceptačné kritériá:**
- Prepojenie transakcií
- Automatické párovanie platieb
- Synchronizácia zostatkov

* * *

## Technické poznámky

### Prioritné otázky na vyriešenie
1. **Multi-mena** - Definitívne rozhodnutie o podpore CZK
2. **Fiskálna tlačiareň** - Špecifikácia podporovaných modelov
3. **Formát exportu** - Konkrétne účtovné formáty
4. **QR kódy** - Rozsah implementácie a použitie
5. **Bankové prepojenie** - Rozsah integrácie

### Závislosti
- Autentifikačný systém pre personálne nastavenia
- Účtovný modul pre export
- Bankový modul pre integráciu (ak bude implementovaná)

### Riziká
- Komplexnosť personalizácie môže predĺžiť vývoj
- Integrácia s fiskálnymi zariadeniami závisí od dodávateľov
- Riešenie dier v číslovaní vyžaduje špeciálnu logiku

* * *

## Poznámky zo stretnutí

**Mária a Dušan:** Rozdielne priority - potrebné ďalšie stretnutie na zosúladenie priorít a finalizáciu požiadaviek.
                        </div>

# 0001: Nastaviteľné rozloženie obrazovky pokladne

## Popis

Implementácia flexibilného rozloženia obrazovky pokladničného modulu s možnosťou personalizácie používateľského rozhrania. Používateľ si môže nastaviť rozdelenie obrazovky, prepínať medzi rôznymi pohľadmi a systém si pamätá jeho preferencie.

## Požiadavky

### 1. Rozdelenie obrazovky (SPLIT)

**Podporované rozloženia:**

- **50/50** - rovnomerné rozdelenie priestoru medzi panely
- **70/30** - prioritné zobrazenie hlavného panelu (70%) s vedľajším panelom (30%)
- **30/70** - obrátené rozloženie s vedľajším panelom naľavo/hore

**Interaktívna úprava:**

- Drag & drop pre presúvanie okrajov medzi panelmi
- Minimálna šírka panelu: 250px pre zachovanie použiteľnosti
- Maximálna šírka: 80% celkovej šírky
- Vizuálny indikátor pri ťahaní (zmena kurzora, zvýraznenie)

### 2. Prepínanie pohľadov (VIEWS)

**Denný pohľad:**
- Tabuľkové zobrazenie transakcií za aktuálny deň
- Automatické načítanie pri zmene dňa
- Hodinové zoskupovanie transakcií

**Mesačný pohľad:**
- Prehľad transakcií za celý mesiac
- Denné súčty a štatistiky
- Možnosť navigácie medzi mesiacmi

### 3. Personalizácia (PERSONALIZATION)

**Ukladanie nastavení:**
- Automatické uloženie pri každej zmene
- Perzistencia nastavení v databáze
- Viazané na používateľský profil

**Obnovované nastavenia:**
- Rozloženie panelov (split ratio)
- Aktívny pohľad (denný/mesačný)
- Poradie a viditeľnosť stĺpcov
- Posledná pozícia v navigácii

## Technické detaily

### Integrácia s existujúcim systémom

- Použitie existujúceho `MasterDetailLayout` komponentu ako vzoru
- Rozšírenie systému personalizácie pre pokladničný modul
- Využitie TanStack Query pre state management
- Kompatibilita s existujúcim systémom používateľských preferencií

## Akceptačné kritériá

1. **Rozloženie obrazovky:**
   - [ ] Používateľ môže prepínať medzi preddefinovanými rozloženiami (50/50, 70/30, 30/70)
   - [ ] Drag & drop funkcia pre manuálnu úpravu rozdelenia funguje plynulo
   - [ ] Minimálne a maximálne limity šírky panelov sú dodržané
   - [ ] Vizuálna spätná väzba pri ťahaní je zreteľná

2. **Prepínanie pohľadov:**
   - [ ] Prepínanie medzi denným a mesačným pohľadom funguje okamžite
   - [ ] Dáta sa správne načítajú pre zvolený pohľad
   - [ ] Navigácia v rámci pohľadov (dni/mesiace) funguje správne

3. **Personalizácia:**
   - [ ] Nastavenia sa automaticky ukladajú pri každej zmene
   - [ ] Pri opätovnom prihlásení sa obnoví posledné nastavenie
   - [ ] Každý používateľ má svoje vlastné nastavenia
   - [ ] Nastavenia sa synchronizujú medzi zariadeniami

4. **Responzívnosť:**
   - [ ] Layout sa správne prispôsobuje rôznym veľkostiam obrazovky
   - [ ] Na mobilných zariadeniach sa automaticky prepne na vertikálne rozloženie
   - [ ] Všetky ovládacie prvky sú dostupné na dotykových zariadeniach

5. **Výkon:**
   - [ ] Zmena rozloženia je plynulá bez viditeľného oneskorenia
   - [ ] Ukladanie preferencií prebieha na pozadí bez blokovania UI
   - [ ] Načítanie uložených nastavení je okamžité

## Testovacie scenáre

1. **Základné rozloženie:**
   - Testovanie všetkých preddefinovaných rozložení
   - Overenie limitov pri manuálnom nastavení
   - Testovanie na rôznych rozlíšeniach

2. **Perzistencia:**
   - Odhlásenie a prihlásenie - overenie obnovenia nastavení
   - Zmena nastavení a refresh stránky
   - Súbežné prihlásenie z viacerých zariadení

3. **Edge cases:**
   - Extrémne malé/veľké rozlíšenia
   - Rýchle prepínanie medzi nastaveniami
   - Prerušenie internetového pripojenia počas ukladania

## UI/UX úvahy

- Tlačidlá pre rýchle prepnutie rozloženia v hornom paneli
- Vizuálne indikátory aktuálneho rozloženia
- Plynulé animácie pri zmene rozloženia
- Tooltips s vysvetlením funkcií
- Klávesové skratky pre časté operácie (Ctrl+L pre zmenu layoutu)

## Odhad pracnosti

- **Implementácia split panelu s drag & drop**: 1 MD
- **Integrácia pohľadov (denný/mesačný)**: 1 MD
- **API pre ukladanie/načítanie preferencií**: 0.5 MD
- **Frontend hooks a state management**: 0.5 MD
- **Responzívny dizajn a mobilná podpora**: 0.5 MD
- **Testovanie a ladenie**: 0.5 MD

**Celkový odhad**: 4 MD

## Závislosti

- Existujúci autentifikačný systém pre identifikáciu používateľa
- @window-splitter/react pre split funkcionalitu
- TanStack Query pre state management
- Backend API pre perzistenciu nastavení

## Budúce vylepšenia

- Preddefinované šablóny rozložení pre rôzne role
- Export/import nastavení medzi používateľmi
- A/B testovanie optimálnych rozložení
- Automatické prispôsobenie na základe používania

</div>

# BDD Scenarios

## Feature: Configurable cash register screen layout

As a cash register module user
I want to customize the screen layout according to my needs
So that I have an optimal working environment

### Background:
```gherkin
Given I am logged in as user "cashier01"
And I am on the cash register module screen
```

* * *

## Scenario: Switching between predefined layouts

```gherkin
Given the screen has a default 50/50 layout
When I click the "Change Layout" button
And I select "70/30" option
Then the main panel takes 70% of the screen width
And the side panel takes 30% of the screen width
And the layout is applied immediately without page refresh
```

## Scenario: Manual layout adjustment using drag and drop

```gherkin
Given the screen has a 50/50 layout
When I grab the divider between panels
And I move it 20% to the right
Then the main panel expands to approximately 70%
And the side panel shrinks to approximately 30%
And I see a visual position indicator while dragging
```

## Scenario: Respecting minimum panel width

```gherkin
Given the screen has a 70/30 layout
When I try to move the divider so the side panel would be less than 250px
Then the divider stops at the position where the side panel has exactly 250px
And a visual limit indicator is displayed
```

## Scenario: Respecting maximum panel width

```gherkin
Given the screen has a 50/50 layout
When I try to move the divider so the main panel would have more than 80% width
Then the divider stops at 80% position
And the side panel maintains at least 20% width
```

* * *

## Scenario: Switching to daily view

```gherkin
Given I am in monthly view
When I click the "Daily View" button
Then a table with transactions for the current day is displayed
And transactions are grouped by hours
And the header date matches the current day
```

## Scenario: Switching to monthly view

```gherkin
Given I am in daily view
When I click the "Monthly View" button
Then an overview of transactions for the entire month is displayed
And I see daily totals for each day
And I can navigate between months using arrows
```

## Scenario: Navigation in daily view

```gherkin
Given I am in daily view showing "15/03/2024"
When I click the "Next Day" arrow
Then the view for "16/03/2024" is displayed
And transactions for the new day are loaded automatically
```

## Scenario: Navigation in monthly view

```gherkin
Given I am in monthly view showing "March 2024"
When I click the "Previous Month" arrow
Then the view for "February 2024" is displayed
And data for the selected month is loaded automatically
```

</div>

# Cash Register Layout Customization Design Document

## User Story #0001

## Executive Summary

This document outlines the implementation plan for a flexible and customizable layout system for the cash register module, enabling users to personalize their workspace through adjustable split panels, switchable views, and persistent preferences. The system will remember user-specific settings and provide an intuitive interface for layout management.

## Current State Analysis

### Existing Components

- **MasterDetailLayout**: Provides split panel functionality with drag-and-drop resizing
- **User Preferences System**: Existing infrastructure for storing user-specific settings
- **TanStack Query**: State management for data fetching and caching
- **Responsive Layout System**: Basic responsive behavior for different screen sizes

### Current Limitations

- No cash register-specific layout customization
- Limited view switching capabilities (daily/monthly views)
- No persistence of layout preferences specific to cash register module
- Lack of preset layout templates (50/50, 70/30, 30/70)

## Architecture Overview

### Design Principles

1. **User-Centric Design**: Prioritize ease of customization and intuitive controls
2. **Performance Optimization**: Instant layout changes without page reloads
3. **Progressive Enhancement**: Build on existing MasterDetailLayout foundation
4. **Persistent State**: All changes automatically saved to user profile
5. **Responsive Behavior**: Adaptive layouts for different device sizes

### Component Structure

```
CashRegisterLayout
├── LayoutControlBar
│   ├── PresetLayoutButtons (50/50, 70/30, 30/70)
│   ├── ViewSwitcher (Daily/Monthly)
│   └── LayoutSettings (additional controls)
├── MasterDetailLayout (enhanced)
│   ├── MainPanel (transactions/primary content)
│   │   ├── DailyView
│   │   └── MonthlyView
│   ├── Resizer (drag handle)
│   └── SidePanel (details/secondary content)
└── useLayoutPreferences() hook
    ├── Load saved preferences
    ├── Auto-save on change
    └── Sync across sessions
```

## Technical Implementation

### Data Model

```typescript
interface CashRegisterLayoutPreferences {
  userId: string
  moduleId: 'cash-register'
  splitRatio: number // 0-100 representing percentage
  activeView: 'daily' | 'monthly'
  panelOrder: 'normal' | 'reversed' // for 30/70 vs 70/30
  columnVisibility: Record<string, boolean>
  columnOrder: string[]
  lastNavigationPosition?: {
    date?: string
    scrollPosition?: number
  }
}
```

### API Endpoints

```typescript
// GET /api/users/:userId/preferences/cash-register
// Returns current user's cash register layout preferences

// PUT /api/users/:userId/preferences/cash-register
// Updates user's cash register layout preferences
// Body: Partial<CashRegisterLayoutPreferences>
```

### React Query Integration

```typescript
// queries/cashRegisterLayout.ts
export const useCashRegisterLayout = () => {
  return useQuery({
    queryKey: ['cashRegisterLayout', userId],
    queryFn: fetchLayoutPreferences,
    staleTime: Infinity, // Preferences don't change from external sources
  })
}

export const useUpdateCashRegisterLayout = () => {
  return useMutation({
    mutationFn: updateLayoutPreferences,
    onSuccess: () => {
      queryClient.invalidateQueries(['cashRegisterLayout'])
    },
  })
}
```

## Implementation Stages

### Stage 1: Layout Control Bar and Preset Templates

**Goal**: Implement UI controls for quick layout switching

#### Tasks:

1. Create `CashRegisterLayoutBar` component
   - Add preset buttons (50/50, 70/30, 30/70)
   - Visual indicators for active layout
   - Tooltips explaining each preset
2. Integrate with existing MasterDetailLayout
   - Pass split ratio as prop
   - Handle layout change callbacks
3. Add smooth transition animations
   - CSS transitions for panel resize
   - Maintain content stability during resize
4. Implement keyboard shortcuts
   - Ctrl+L for layout menu
   - Number keys 1-3 for presets

#### Acceptance Criteria:

- [ ] All three preset layouts work correctly
- [ ] Visual feedback shows current active layout
- [ ] Transitions are smooth without content jumping
- [ ] Keyboard shortcuts function as expected

### Stage 2: View Switching (Daily/Monthly)

**Goal**: Enable switching between daily and monthly transaction views

#### Tasks:

1. Create `ViewSwitcher` component
   - Toggle between daily/monthly views
   - Visual state indicators
2. Implement `DailyView` component
   - Table display of current day's transactions
   - Hourly grouping functionality
   - Auto-refresh on day change
3. Implement `MonthlyView` component
   - Monthly transaction overview
   - Daily summaries and statistics
   - Month navigation controls
4. Add data fetching logic
   - TanStack Query for each view
   - Proper cache management
   - Loading and error states

#### Acceptance Criteria:

- [ ] Seamless switching between views
- [ ] Data loads correctly for each view
- [ ] Navigation within views works properly
- [ ] Loading states display appropriately

### Stage 3: Drag & Drop Resizing Enhancement

**Goal**: Improve the manual resizing experience

#### Tasks:

1. Enhance resize handle
   - Visual feedback during drag
   - Cursor change on hover
   - Highlight active resize area
2. Implement resize constraints
   - Minimum width: 250px
   - Maximum width: 80% of viewport
   - Snap-to-preset functionality
3. Add resize indicators
   - Live width display during drag
   - Percentage indicator
   - Visual guides at constraint boundaries
4. Optimize performance
   - Throttle resize events
   - Use CSS containment
   - Minimize re-renders

#### Acceptance Criteria:

- [ ] Smooth dragging without lag
- [ ] Constraints properly enforced
- [ ] Visual feedback is clear and helpful
- [ ] Performance remains optimal

### Stage 4: Preference Persistence

**Goal**: Save and restore user layout preferences

#### Tasks:

1. Create preference management hooks
   - `useLayoutPreferences()` for reading
   - `useUpdatePreferences()` for writing
2. Implement auto-save mechanism
   - Debounced save on changes
   - Optimistic updates
   - Error recovery
3. Add preference sync
   - Load on component mount
   - Handle conflicts gracefully
   - Cross-tab synchronization
4. Create migration strategy
   - Handle schema changes
   - Default values for new users
   - Backward compatibility

#### Acceptance Criteria:

- [ ] Preferences save automatically
- [ ] Settings restore on login
- [ ] Each user has separate settings
- [ ] Cross-device sync works

### Stage 5: Responsive Behavior

**Goal**: Optimize layout for different screen sizes

#### Tasks:

1. Implement responsive breakpoints
   - Mobile: < 640px
   - Tablet: 640px - 1024px
   - Desktop: > 1024px
2. Mobile-specific layout
   - Single panel view
   - Tab-based navigation
   - Touch-optimized controls
3. Tablet adaptations
   - Vertical split only
   - Adjusted minimum widths
   - Simplified controls
4. Progressive enhancement
   - Feature detection
   - Graceful degradation
   - Performance optimization

#### Acceptance Criteria:

- [ ] Layout adapts to screen size
- [ ] Mobile interface is touch-friendly
- [ ] All features accessible on all devices
- [ ] Performance remains good on mobile

## Testing Strategy

### Unit Tests

```typescript
describe('CashRegisterLayout', () => {
  it('should apply preset layouts correctly')
  it('should persist layout changes')
  it('should switch between views')
  it('should handle resize within constraints')
  it('should restore saved preferences')
})
```

### Integration Tests

- Test preference persistence across sessions
- Verify data loading for different views
- Validate responsive behavior at breakpoints
- Test keyboard navigation and shortcuts

### E2E Tests

Using Playwright for comprehensive testing:

```typescript
test('Cash register layout customization flow', async ({ page }) => {
  // Test preset switching
  await page.click('[data-testid="layout-70-30"]')
  await expect(page.locator('.main-panel')).toHaveCSS('width', '70%')

// Test view switching
  await page.click('[data-testid="monthly-view"]')
  await expect(page.locator('.monthly-data')).toBeVisible()

// Test drag resize
  const resizer = page.locator('.panel-resizer')
  await resizer.dragTo(targetPosition)

// Verify persistence
  await page.reload()
  await expect(page.locator('.main-panel')).toHaveCSS('width', '70%')
})
```

### Performance Testing

- Measure time to switch layouts
- Monitor memory usage during resizing
- Test with large datasets
- Validate smooth animations (60 FPS)

## UI/UX Considerations

### Visual Design

- **Layout Control Bar**: Fixed position at top of cash register module
- **Active State Indicators**: Clear visual feedback for selected layout
- **Resize Handle**: 8px wide with hover state expansion to 12px
- **Transition Timing**: 200ms ease-in-out for layout changes
- **Loading States**: Skeleton screens during data fetching

### Accessibility

- **Keyboard Navigation**: Full keyboard support for all controls
- **ARIA Labels**: Descriptive labels for screen readers
- **Focus Management**: Logical focus order and visible focus indicators
- **Reduced Motion**: Respect `prefers-reduced-motion` setting

### User Experience

- **Instant Feedback**: Immediate visual response to all actions
- **Smart Defaults**: Sensible initial layout (50/50 for new users)
- **Undo Support**: Ability to reset to defaults
- **Contextual Help**: Tooltips explaining features

## Performance Optimization

### Rendering Optimization

- Use `React.memo` for panel components
- Implement `useMemo` for expensive calculations
- Virtualize long transaction lists
- Lazy load monthly view data

### State Management

- Local state for UI changes
- Server state via TanStack Query
- Optimistic updates for preferences
- Efficient cache invalidation

### Bundle Size

- Code split view components
- Lazy load monthly view
- Tree-shake unused utilities
- Optimize CSS delivery

## Migration Plan

### Phase 1: Beta Release

1. Deploy to test environment
2. Enable for selected users
3. Gather feedback
4. Iterate on design

### Phase 2: Gradual Rollout

1. Enable for 10% of users
2. Monitor performance metrics
3. Address any issues
4. Expand to 50%, then 100%

### Phase 3: Legacy Cleanup

1. Remove old layout code
2. Migrate existing preferences
3. Update documentation
4. Archive deprecated components

## API Specification

### Endpoints

```yaml
/api/preferences/cash-register:
  GET:
    description: Retrieve user's cash register layout preferences
    response:
      200: CashRegisterLayoutPreferences
      404: User preferences not found

PUT:
    description: Update user's cash register layout preferences
    body: Partial<CashRegisterLayoutPreferences>
    response:
      200: Updated preferences
      400: Invalid preferences format
```

### WebSocket Events

```typescript
// Real-time preference sync
socket.on('preferences:updated', (data: CashRegisterLayoutPreferences) => {
  // Update local state if user matches
})
```

## Success Metrics

### User Engagement

- **Adoption Rate**: % of users customizing layout
- **Retention**: Users maintaining custom layouts
- **Usage Patterns**: Most popular layout configurations

### Performance Metrics

- **Layout Switch Time**: < 100ms
- **Preference Save Time**: < 200ms
- **Initial Load Time**: < 500ms
- **Animation FPS**: Consistent 60 FPS

### User Satisfaction

- **Support Tickets**: Reduction in layout-related issues
- **User Feedback**: Positive sentiment analysis
- **Feature Requests**: Decreased requests for layout options

## Risk Assessment

### Technical Risks

| Risk                         | Probability | Impact | Mitigation                    |
| ---------------------------- | ----------- | ------ | ----------------------------- |
| Performance degradation      | Low         | High   | Extensive performance testing |
| Browser compatibility        | Medium      | Medium | Progressive enhancement       |
| State synchronization issues | Low         | Medium | Robust conflict resolution    |

### User Experience Risks

| Risk                          | Probability | Impact | Mitigation                         |
| ----------------------------- | ----------- | ------ | ---------------------------------- |
| Complexity overwhelming users | Medium      | Medium | Progressive disclosure of features |
| Loss of saved preferences     | Low         | High   | Backup and recovery mechanisms     |
| Mobile experience issues      | Medium      | Medium | Thorough responsive testing        |

## Timeline Estimate

### Development Effort

- **Stage 1**: Layout Control Bar - 1 MD
- **Stage 2**: View Switching - 1 MD
- **Stage 3**: Drag & Drop Enhancement - 0.5 MD
- **Stage 4**: Preference Persistence - 1 MD
- **Stage 5**: Responsive Behavior - 0.5 MD
- **Testing & Bug Fixes**: 1 MD
- **Documentation & Training**: 0.5 MD

**Total Estimate**: 5.5 MD (includes 1.5 MD buffer from original 4 MD estimate)

## Dependencies

### Technical Dependencies

- `@window-splitter/react` - For split panel functionality
- `TanStack Query` - For state management
- Backend API for preference storage
- Existing authentication system

### Resource Dependencies

- UX design review and approval
- Backend team for API implementation
- QA team for comprehensive testing
- DevOps for deployment pipeline

## Future Enhancements

### Phase 2 Features

- **Layout Templates**: Role-based default layouts
- **Export/Import**: Share layouts between users
- **A/B Testing**: Optimize default layouts
- **AI Recommendations**: Smart layout suggestions based on usage

### Phase 3 Features

- **Multi-panel Layouts**: Support for 3+ panels
- **Floating Panels**: Detachable panel windows
- **Custom Widgets**: User-definable panel content
- **Layout Marketplace**: Community-shared layouts

## Conclusion

This design provides a comprehensive approach to implementing customizable layouts for the cash register module. The staged implementation allows for incremental delivery of value while maintaining system stability. The focus on user experience, performance, and persistence ensures that the solution will meet user needs effectively.

The modular architecture and clear separation of concerns will facilitate future enhancements and maintenance. By building on existing components and following established patterns, we minimize risk and accelerate development.

## Appendix

### A. Component API Reference

```typescript
interface CashRegisterLayoutProps {
  defaultLayout?: '50/50' | '70/30' | '30/70'
  defaultView?: 'daily' | 'monthly'
  onLayoutChange?: (layout: string) => void
  onViewChange?: (view: string) => void
  persistPreferences?: boolean
}
```

### B. CSS Variables

```css
:root {
  --cash-register-panel-min-width: 250px;
  --cash-register-panel-max-width: 80%;
  --cash-register-resizer-width: 8px;
  --cash-register-transition-duration: 200ms;
  --cash-register-mobile-breakpoint: 640px;
  --cash-register-tablet-breakpoint: 1024px;
}
```

### C. Keyboard Shortcuts

| Shortcut | Action                 |
| -------- | ---------------------- |
| Ctrl+L   | Open layout menu       |
| 1        | Apply 50/50 layout     |
| 2        | Apply 70/30 layout     |
| 3        | Apply 30/70 layout     |
| D        | Switch to daily view   |
| M        | Switch to monthly view |
| Ctrl+R   | Reset to defaults      |

### D. Error Codes

| Code     | Description                | User Message                       |
| -------- | -------------------------- | ---------------------------------- |
| PREF_001 | Failed to load preferences | "Unable to load your saved layout" |
| PREF_002 | Failed to save preferences | "Changes could not be saved"       |
| PREF_003 | Invalid preference format  | "Layout settings corrupted"        |
| VIEW_001 | Failed to load view data   | "Unable to load transaction data"  |

</div>

Demo

MCP

Figma
MCP

Context7
MCP

Playwright
MCP

Jira
MCP

Sentry
MCP

Docker
MCP

Claude
MCP

PostgreSQL
MCP

Obmedzenia a riziká

Obmedzenia

🎭 Halucinácie
📏 Context Limit
🛡️ Security riziká (Prompt injection)
🐌 Rýchlosť odpovedí
💰 Náklady na tokeny

Riziká

⚖️ Právne a etické otázky
🚫 Odpor voči zmene
🔗 Prílišná závislosť
📉 Strata zručností
🔐 Ochrana údajov
🤔 Kto nesie zodpovednosť?

Trendy 2025 +

Výber technológie - AI friendly - začína to byť jedno
Paralelizácia
Menšie špecializované modely
Human menej a menej in-the-loop
Meta prompting, evals
On-demand SW (dlhodobo)

Kde a ako začať?

Developer

Nainštaluj CLI agenta:
- Claude Code (20€/mesiac)
- Gemini CLI (free)
- Codex (ak máš ChatGPT konto)
Vysvetlenie kódu, analýza
Generovanie dokumentácie
Code review
Experimentuj 💥

Tím

Pilot projekt
Definícia AI guidelines
Code review process s AI
Knowledge sharing (týždenné sync sessions)

Organizácia

AI stratégia
Security a compliance review
Tréning pre všetkých

Odporúčané zdroje

📺 YouTube kanály

Anthropic
Y Combinator

🎬 Videá

Andrew Ng - Building Faster with AI
Andrej Karpathy - Software is Changing (Again)

Q&A

Vaše otázky?

Ďakujem za pozornosť!

📧 marianboda@gmail.com

Feedback