# ScanStation — Report Scrap UX Redesign

> **STATUS: ✅ IMPLEMENTED — 2026-04-05**
> Overlay/slide panel — done. Piece selection required + reason required before LOG SCRAP activates. Qty field removed. Commits: `169a390`.

## Kontekst

Moduł: **ScanStation**
Komponent: karta MO (Manufacturing Order) + panel Report Scrap

---

## Obecne zachowanie (AS-IS)

1. Operator skanuje MO → wyświetla się karta MO z informacjami (numer MO, Part, Customer, Operation, Qty).
2. Operator klika **REPORT SCRAP**.
3. Panel „Report Scrap" otwiera się **poniżej** karty MO — obie karty są widoczne jednocześnie i strona rozciąga się w dół.

```
┌──────────────────────────────┐
│         MO INFO              │  ← zawsze widoczna
│  MO2604-0001 / SF2371-00     │
│  Operation: Forming FM7      │
│  [CONFIRM] [REPORT SCRAP]    │
│  [DOWNTIME]  [Clear]         │
└──────────────────────────────┘
┌──────────────────────────────┐
│      ⚠ Report Scrap          │  ← pojawia się PONIŻEJ
│  Scrap qty: [ - 1 + ]        │
│  Reason: ___________         │
└──────────────────────────────┘
```

---

## Oczekiwane zachowanie (TO-BE)

Panel **Report Scrap** ma **zastąpić (overlay/slide)** kartę MO — w tym samym miejscu layoutu, bez przewijania strony.

### Przepływ

```
Krok 1 — stan domyślny
┌──────────────────────────────┐
│         MO INFO              │
│  MO2604-0001 / SF2371-00     │
│  Operation: Forming FM7      │
│  [CONFIRM] [REPORT SCRAP]    │
│  [DOWNTIME]  [Clear]         │
└──────────────────────────────┘

Krok 2 — klik REPORT SCRAP → animacja przejścia (slide-left / fade)
┌──────────────────────────────┐
│      ⚠ Report Scrap          │  ← wchodzi na miejsce MO INFO
│  Scrap qty: [ - 1 + ]        │
│  Reason: [ dropdown ]        │
│                              │
│  [✗ Cancel]   [✔ Submit]     │
└──────────────────────────────┘

Krok 3a — klik CANCEL
→ animacja powrotu → wyświetla się ponownie karta MO INFO

Krok 3b — klik SUBMIT (udane zgłoszenie)
→ animacja powrotu → wyświetla się ponownie karta MO INFO
   (opcjonalnie: krótki toast/komunikat sukcesu)
```

---

## Wymagania UX

| # | Wymaganie |
|---|-----------|
| 1 | Panel Report Scrap zajmuje **dokładnie ten sam obszar** co karta MO (brak scroll, brak zmiany wysokości layoutu). |
| 2 | Przejście jest **animowane** (np. slide-left lub cross-fade, czas ~250 ms). |
| 3 | Karta MO **nie jest niszczona** — tylko ukryta — żeby powrót był natychmiastowy. |
| 4 | Przyciski **Cancel** i **Submit** są zawsze widoczne w obrębie panelu Report Scrap. |
| 5 | Po pomyślnym Submit wyświetlany jest krótki **feedback** (toast lub zmiana koloru przycisku) przed powrotem do MO. |
| 6 | Zachowanie identyczne na **mobile** (touch) i **desktop**. |

---

## Sugerowana implementacja (front-end)

### Podejście: przełączanie widoku przez state

```
view: 'mo' | 'report-scrap' | 'downtime'
```

Komponent renderuje warunkowo odpowiednią kartę w tym samym kontenerze z klasą animacji CSS.

```html
<div class="card-container">
  <!-- v-if / *ngIf / conditional render -->
  <MoInfoCard  v-if="view === 'mo'"          @report-scrap="view = 'report-scrap'" />
  <ReportScrap v-if="view === 'report-scrap'" @cancel="view = 'mo'" @submitted="view = 'mo'" />
</div>
```

```css
.card-container {
  position: relative;
  /* stała wysokość = wysokość karty MO */
}

/* animacja przejścia np. Vue <Transition> lub CSS class toggle */
.slide-enter-active, .slide-leave-active { transition: transform 250ms ease, opacity 250ms ease; }
.slide-enter-from  { transform: translateX(100%); opacity: 0; }
.slide-leave-to    { transform: translateX(-100%); opacity: 0; }
```

---

## Powiązane komponenty / pliki (do uzupełnienia)

- [ ] `ScanStation.vue` / `ScanStation.tsx` — główny kontener
- [ ] `MoInfoCard` — karta MO
- [ ] `ReportScrapPanel` — panel zgłaszania braków
- [ ] Store / state — `currentView`

---

## Status

- [ ] Design zaakceptowany
- [ ] Implementacja
- [ ] Testy
- [ ] Deploy