# Claude Design brief — Lezárás-fotó (admin felület)

> Bemásolható a Claude Design projektbe indító feladatként. Forrás:
> `20_admin_felulet/40_lezaras_foto.md` (feature-spec) `§4`. A design a **meglévő
> admin felület** része, nem különálló termék — a meglévő mintákhoz kell illesztened.

## Kontextus

Az Urbino admin felületén (Angular SPA, városgazdálkodási szerepkörök) a
diszpécser/felelős a bejelentés **lezárásakor** fotóval dokumentálhatja az
elvégzett munkát („Így oldottuk meg"). A lezárás-szabály: **fotó vagy szöveg** —
legalább az egyik kell (nem mindkettő kötelező). Ez a felület a **bejelentés-
adatlap** „Lezárás" akciójában és a **lezárt ügy** adatlapján jelenik meg.

Referencia-képernyő a meglévő adatlaphoz: `manager_bejelentes_adatlap_20260630.png`.

## Kötelező design-keret (illeszd a meglévőhöz)

- **Design system:** Tailwind v4 + **PrimeNG v21**, **Aura** téma, **Blue** primary. Ne vezess be új vizuális nyelvet — a meglévő admin felület komponenseit és térközeit használd.
- **Nyelv:** magyar, **tegező** hangnem. A címkék lentebb adottak.
- **Asztali alapeset**, tableten is működjön. Üres / betöltési / hibaállapot minden felületen kötelező.
- **Újrahasznosítandó minta:** a felületen már létezik egy **borítókép-feltöltő** komponens (kép-preview + feltöltés + törlés) a Beállítások/Tartalom szekcióban. A lezárás-fotó feltöltője ennek a **mintának a többképes változata** — vizuálisan és interakcióban innen indulj, ne nulláról.

## Két felület, amit meg kell tervezned

### 1) Lezárás-dialógus (a fő feladat)

A bejelentés-adatlap „Lezárás" gombjára nyíló dialógus. Tartalma **egyszerre**:
- **Lezárás-megjegyzés** — többsoros szövegmező (`textarea`), opcionális, max 2000 karakter.
- **Fotó-feltöltő** — több kép tölthető fel: egy feltöltő-zóna (drag&drop + tallózás) + a feltöltött képek **thumbnail-rácsa**, minden képen egy **törlés** ikon és a feltöltés-állapot.

Elrendezés (javaslat, finomítható): fejléc → megjegyzés-mező → fotó-feltöltő zóna → thumbnail-rács → lábléc (Mégse / Lezárás).

**Interakció:**
- Minden kép feltöltése **azonnal** megtörténik (nem a Lezárás gombra) → azonnali thumbnail-preview.
- Kép törlése képenként, azonnal.
- A **„Lezárás" gomb tiltott**, amíg nincs sem feltöltött fotó, sem kitöltött megjegyzés (a „legalább az egyik" szabály vizuális kikényszerítése). Amint bármelyik megvan → aktív.

**Állapotok, amiket tervezz meg:**
- Üres (se fotó, se szöveg — Lezárás tiltott).
- Feltöltés folyamatban (per-kép progress/skeleton a thumbnailen).
- Sikeres feltöltés (thumbnail megjelenik).
- Hibák (mezőszintű üzenet a feltöltő alatt): rossz formátum, túl nagy fájl, túl sok fotó (a szövegek lentebb).
- Kész állapot (van fotó és/vagy szöveg — Lezárás aktív).

### 2) Lezárás-dokumentáció galéria (a lezárt ügy adatlapján)

A már **lezárt** (`Resolved`) bejelentés adatlapján a lezárás-fotók
**galériaként** jelennek meg, a lezárás-megjegyzés mellett.
- Szekció-cím: **„Lezárás-dokumentáció"**.
- Thumbnail-rács, feltöltési sorrendben; kattintásra nagyítás (lightbox).
- Külön, halványabb szekció a **bejelentői fotók**nak („Bejelentői fotók") — ez MVP-ben jellemzően üres, tervezd meg az **üres-állapotát** is.

## Címkék (magyar, tegező — ezek kerülnek a `hu.json`-ba)

```
Dialógus címe:            „Bejelentés lezárása"
Megjegyzés-mező címke:    „Hogyan oldottuk meg?" (opcionális)
Fotó feltöltése gomb:     „Fotó feltöltése"
Fotó törlése:             „Fotó törlése"
Nincs lezárás-fotó:       „Nincs lezárás-fotó"
Galéria-cím:              „Lezárás-dokumentáció"
Bejelentői fotók cím:     „Bejelentői fotók"
Lezárás gomb:             „Lezárás"
Mégse gomb:               „Mégse"

Hibaüzenetek (a feltöltő alatt):
- rossz formátum:         „Csak JPEG, PNG vagy WebP kép tölthető fel."
- túl nagy fájl:          „A fotó legfeljebb 10 MB lehet."
- túl sok fotó:           „Legfeljebb 10 fotó tölthető fel egy bejelentéshez."
- nincs kiválasztva:      „Válassz ki egy fotót."
```

## Megkötések, amik a UI-t formálják

- Elfogadott formátum: **JPEG, PNG, WebP**. Max **10 MB** képenként. Max **10** fotó bejelentésenként (a feltöltő-zóna a 10. után jelezze, hogy betelt).
- A galéria a feltöltés sorrendjét mutatja (nincs kézi átrendezés ebben a körben).
- A képek nagyíthatók (lightbox), de nincs képszerkesztés.

## Hatókörön kívül (ne tervezd ebben a briefben)

- A **polgári mobilapp** (Flutter) „Megoldott" képernyője — külön, a polgári tervezés dolga.
- **Bejelentői fotó feltöltése** (a nyitóűrlapon vagy a polgári oldalon) — későbbi iteráció; itt csak a *megjelenítés* üres-állapotát tervezd.
- Kézi átrendezés, feliratozás, thumbnail-optimalizáció.

## Amit a designtól várok

- A **lezárás-dialógus** kész képe mindegyik állapotban (üres, feltöltés közben, sikeres, hibás, kész).
- A **lezárás-dokumentáció galéria** a lezárt adatlapon (fotókkal és üresen).
- PrimeNG v21 / Aura / Blue vizuális nyelvben, a meglévő borítókép-feltöltő mintájával konzisztensen.

Ha valami a specből hiányzik a tervezéshez, jelezd — a részletes forrás a
`40_lezaras_foto.md` `§4` (admin felület) és `§3.5` (a validációs korlátok).