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

phase, plan, type, wave, depends_on, files_modified, autonomous

phase	plan	type	wave	depends_on	files_modified	autonomous
44-inline-status-change	01	execute	1		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	true

## 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

## 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)

## 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)

<acceptance_criteria>

AC-1: Dropdown statusów pojawia się po kliknięciu badge

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

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

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>

Task 1: Rozszerzenie updateStatus() o tryb AJAX + przekazanie danych statusów do widoku listy src/Modules/Orders/OrdersController.php 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

- `curl -X POST /orders/1/status -H "X-Requested-With: XMLHttpRequest" -d "new_status=shipped&_token=..." ` zwraca JSON - Standardowy POST nadal zwraca redirect AC-2 i AC-3 satisfied: endpoint zwraca JSON dla AJAX, zachowuje redirect dla form submit Task 2: Dropdown UI + JavaScript moduł inline zmiany statusu + style SCSS 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 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)

- 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 AC-1, AC-2, AC-3 satisfied: dropdown działa, AJAX zmienia status, błędy wyświetlane

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

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

<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>

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