orderPRO/.paul/phases/44-inline-status-change/44-01-PLAN.md

---
phase: 44-inline-status-change
plan: 01
type: execute
wave: 1
depends_on: []
files_modified:
  - src/Modules/Orders/OrdersController.php
  - resources/views/orders/list.php
  - resources/scss/modules/_orders.scss
  - resources/js/modules/inline-status-change.js
  - public/assets/css/modules/orders.css
  - public/assets/js/modules/inline-status-change.js
autonomous: true
---

<objective>
## Goal
Dodać szybką zmianę statusu zamówienia bezpośrednio z listy zamówień — kliknięcie w badge statusu otwiera dropdown z dostępnymi statusami, wybór zmienia status przez AJAX bez przeładowania strony.

## Purpose
Operator nie musi wchodzić w szczegóły zamówienia aby zmienić status — oszczędność czasu przy obsłudze wielu zamówień.

## Output
- Zmodyfikowany kontroler z obsługą AJAX w `updateStatus()`
- Dropdown statusów w kolumnie statusu na liście zamówień
- JS moduł do inline zmiany statusu
- Style SCSS dla dropdowna
</objective>

<context>
## Project Context
@.paul/PROJECT.md
@.paul/ROADMAP.md
@.paul/STATE.md

## Source Files
@src/Modules/Orders/OrdersController.php — metody: index(), updateStatus(), toTableRow(), statusBadge(), buildAllStatusOptions(), statusColorMap()
@resources/views/orders/list.php — widok listy zamówień
@resources/views/components/table-list.php — komponent tabeli (kolumna status_badges jest raw HTML)
@routes/web.php — POST /orders/{id}/status endpoint (linia 337)
</context>

<skills>
## Required Skills (from SPECIAL-FLOWS.md)

| Skill | Priority | When to Invoke | Loaded? |
|-------|----------|----------------|---------|
| sonar-scanner | required | Po APPLY, przed UNIFY | ○ |

**BLOCKING:** Required skills MUST be loaded before APPLY proceeds.

## Skill Invocation Checklist
- [ ] sonar-scanner loaded (run command or confirm)
</skills>

<acceptance_criteria>

## AC-1: Dropdown statusów pojawia się po kliknięciu badge
```gherkin
Given lista zamówień wyświetla zamówienia z badge'ami statusów
When operator kliknie w badge statusu zamówienia
Then pojawia się dropdown z listą wszystkich dostępnych statusów pogrupowanych wg grup statusowych
And aktualny status jest wyróżniony w dropdown
And kliknięcie poza dropdown zamyka go
```

## AC-2: Zmiana statusu przez AJAX
```gherkin
Given dropdown statusów jest otwarty przy zamówieniu
When operator wybierze nowy status z listy
Then wysyłany jest request AJAX POST /orders/{id}/status z new_status i _token
And badge statusu zamienia się na nowy (z prawidłowym kolorem i etykietą)
And dropdown zamyka się automatycznie
And nie następuje przeładowanie strony
```

## AC-3: Obsługa błędów AJAX
```gherkin
Given operator wybiera nowy status z dropdown
When request AJAX zwróci błąd (CSRF expired, order not found, server error)
Then wyświetla się komunikat błędu przez OrderProAlerts
And badge wraca do poprzedniego stanu
And dropdown zamyka się
```

</acceptance_criteria>

<tasks>

<task type="auto">
  <name>Task 1: Rozszerzenie updateStatus() o tryb AJAX + przekazanie danych statusów do widoku listy</name>
  <files>src/Modules/Orders/OrdersController.php</files>
  <action>
    1. W metodzie `updateStatus()` — wykryj request AJAX przez nagłówek `X-Requested-With: XMLHttpRequest`:
       - Jeśli AJAX: zwróć `Response::json(...)` z kluczami: `success`, `status_code`, `status_label`, `status_color` (kolor hex z grupy)
       - Jeśli nie-AJAX: zachowaj obecne zachowanie (redirect)
       - Przy błędach AJAX: zwróć JSON z `success: false` i `error` message
    2. W metodzie `index()` — przekaż `allStatuses` (z `buildAllStatusOptions()`) i `statusColorMap` do widoku, aby JS miał dane do budowy dropdown
    3. W metodzie `toTableRow()` — dodaj do HTML badge `data-order-id` i `data-current-status` atrybuty, aby JS mógł zidentyfikować zamówienie i aktualny status

    Unikaj: Zmiany zachowania dla nie-AJAX requestów; dodawania nowych zależności
  </action>
  <verify>
    - `curl -X POST /orders/1/status -H "X-Requested-With: XMLHttpRequest" -d "new_status=shipped&_token=..." ` zwraca JSON
    - Standardowy POST nadal zwraca redirect
  </verify>
  <done>AC-2 i AC-3 satisfied: endpoint zwraca JSON dla AJAX, zachowuje redirect dla form submit</done>
</task>

<task type="auto">
  <name>Task 2: Dropdown UI + JavaScript moduł inline zmiany statusu + style SCSS</name>
  <files>resources/views/orders/list.php, resources/scss/modules/_orders.scss, resources/js/modules/inline-status-change.js, public/assets/js/modules/inline-status-change.js, public/assets/css/modules/orders.css</files>
  <action>
    1. W `resources/views/orders/list.php`:
       - Dodaj `<script>` tag z danymi statusów jako JSON (allStatuses, statusColorMap, csrfToken) w `data-*` atrybucie lub inline `<script>` zmienna
       - Załaduj `inline-status-change.js` na dole strony
    2. W `resources/js/modules/inline-status-change.js`:
       - Na klik w `.orders-status-wrap` (badge kontener) — zbuduj dropdown z pogrupowanymi statusami
       - Dropdown: pozycjonowanie absolutne pod/nad badge, grupy statusów z nagłówkami, opcje z kolorami
       - Zaznacz aktualny status (odczytaj z `data-current-status`)
       - Na wybór statusu: fetch POST do `/orders/{orderId}/status` z `X-Requested-With: XMLHttpRequest`
       - Po sukcesie: zaktualizuj badge HTML (nowy kolor, nowa etykieta), zamknij dropdown
       - Po błędzie: `OrderProAlerts.alert(...)`, zamknij dropdown
       - Klik poza dropdown: zamknij
       - Obsługa wielu otwartych dropdown (tylko jeden naraz)
    3. Skopiuj JS do `public/assets/js/modules/inline-status-change.js`
    4. W `resources/scss/modules/_orders.scss`:
       - Style dla `.orders-status-dropdown`: pozycja absolutna, max-height ze scroll, shadow, border-radius
       - `.orders-status-dropdown__group-header`: etykieta grupy (muted, uppercase, mały font)
       - `.orders-status-dropdown__item`: element opcji z kółkiem koloru i etykietą, hover state
       - `.orders-status-dropdown__item.is-current`: wyróżnienie aktualnego statusu
       - `.orders-status-wrap` cursor: pointer gdy dropdown aktywny
    5. Zbuilduj SCSS do CSS

    Unikaj: natywnych alert()/confirm(); inline CSS w widoku; jQuery (vanilla JS)
  </action>
  <verify>
    - Na liście zamówień kliknięcie w status otwiera dropdown
    - Wybór statusu zmienia badge bez przeładowania
    - Kliknięcie poza dropdown zamyka go
    - Build CSS przechodzi bez błędów
  </verify>
  <done>AC-1, AC-2, AC-3 satisfied: dropdown działa, AJAX zmienia status, błędy wyświetlane</done>
</task>

</tasks>

<boundaries>

## DO NOT CHANGE
- resources/views/components/table-list.php (komponent generyczny — nie modyfikować)
- src/Modules/Orders/OrdersRepository.php (logika zapisu statusu działa poprawnie)
- database/migrations/* (brak zmian w schemacie)
- routes/web.php (endpoint POST /orders/{id}/status już istnieje)

## SCOPE LIMITS
- Tylko lista zamówień (/orders/list) — nie strona szczegółów
- Brak bulk zmiany statusu (tylko pojedyncze zamówienie)
- Brak drag & drop ani kanban — prosty dropdown

</boundaries>

<verification>
Before declaring plan complete:
- [ ] Kliknięcie badge na liście otwiera dropdown ze statusami
- [ ] Wybór statusu wysyła AJAX i aktualizuje badge
- [ ] Błędy wyświetlane przez OrderProAlerts
- [ ] Klik poza dropdown zamyka go
- [ ] Standardowy updateStatus (non-AJAX) nadal działa
- [ ] Build SCSS przechodzi bez błędów
- [ ] `php -l` na zmienionych plikach PHP bez błędów
</verification>

<success_criteria>
- Wszystkie taski ukończone
- Wszystkie kryteria akceptacji spełnione
- Brak błędów PHP syntax
- Build CSS bez błędów
- Zmiana statusu działa na liście bez przeładowania
</success_criteria>

<output>
After completion, create `.paul/phases/44-inline-status-change/44-01-SUMMARY.md`
</output>