orderPRO/.paul/phases/53-mobile-status-panel-toggle/53-01-PLAN.md

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

phase	plan	type	wave	depends_on	files_modified	autonomous
53-mobile-status-panel-toggle	01	execute	1		resources/views/components/order-status-panel.php resources/scss/app.scss public/assets/css/app.css	false

## Goal Na mobile (<=768px) panel statusow na stronie listy zamowien powinien byc domyslnie zwinity i rozwijany po kliknieciu w naglowek. Na desktop bez zmian.

Purpose

Panel statusow zajmuje duzo miejsca na ekranie mobilnym, przesuwajac liste zamowien ponizej fold. Uzytkownik musi scrollowac, zeby zobaczyc zamowienia. Zwiniecie panelu daje natychmiastowy dostep do listy.

Output

• Panel statusow zamkniety domyslnie na mobile
• Klikniecie w naglowek "Statusy" rozwija/zwija panel
• Strzalka wskazujaca stan (rozwiniety/zwiniety)
• Na desktop panel zawsze widoczny bez zmian

## Project Context @.paul/PROJECT.md @.paul/STATE.md

Source Files

@resources/views/components/order-status-panel.php @resources/scss/app.scss

<acceptance_criteria>

AC-1: Panel zwiniety domyslnie na mobile

Given urzadzenie z szerokosc viewportu <= 768px
When strona /orders/list sie laduje
Then panel statusow jest zwiniety (widoczny tylko naglowek "Statusy")
And lista zamowien jest widoczna bez scrollowania

AC-2: Rozwijanie i zwijanie panelu

Given panel statusow na mobile
When uzytkownik klika naglowek "Statusy"
Then panel rozwija sie pokazujac drzewko statusow
And strzalka obraca sie wskazujac stan otwarty
When uzytkownik klika ponownie
Then panel zwija sie do samego naglowka

AC-3: Desktop bez zmian

Given urzadzenie z szerokosc viewportu > 768px
When strona /orders/list sie laduje
Then panel statusow jest zawsze widoczny (jak dotychczas)
And naglowek nie reaguje na klikniecie jako toggle

</acceptance_criteria>

Task 1: Zamiana order-status-panel na details/summary resources/views/components/order-status-panel.php Zamien strukture HTML panelu na natywny element `

`:

1. Zamien `<aside class="card order-statuses-side">` na `<details class="card order-statuses-side" id="js-status-panel">`
2. Zamien `<div class="order-statuses-side__title">` na `<summary class="order-statuses-side__title">`
   - Dodaj SVG strzalke (chevron down, 14x14) na koncu summary: `<svg class="order-statuses-side__arrow" ...>`
   - Zamknij `</summary>` zamiast `</div>`
3. Opakuj cala zawartosc grup statusow (petla foreach) w `<div class="order-statuses-side__body">`
4. Zamknij `</details>` zamiast `</aside>`

Struktura wynikowa:
```
<details class="card order-statuses-side" id="js-status-panel">
  <summary class="order-statuses-side__title">
    Statusy
    <svg class="order-statuses-side__arrow" ...chevron-down.../>
  </summary>
  <div class="order-statuses-side__body">
    ...grupy statusow...
  </div>
</details>
```

Dodaj na koncu pliku maly blok `<script>` (inline):
- Na mobile (matchMedia 768px) panel domyslnie zamkniety (brak atrybutu open)
- Na desktop: dodaj atrybut `open` i zablokuj zamykanie (preventDefault na summary click)
- Listener na matchMedia change: reset stanu przy resize

Unikaj: zewnetrznych plikow JS, jQuery

Otworz /orders/list — panel renderuje sie jako details/summary z poprawna struktura HTML AC-1, AC-2, AC-3 satisfied (struktura HTML) Task 2: SCSS dla toggle panelu statusow resources/scss/app.scss 1. Dodaj style do istniejacego bloku `.order-statuses-side`:

`.order-statuses-side__title` (jako summary):
- cursor: pointer na mobile
- display: flex, align-items: center, justify-content: space-between
- list-style: none (usun domyslny marker details)
- &::-webkit-details-marker { display: none }

`.order-statuses-side__arrow`:
- width: 14px, height: 14px
- transition: transform 0.2s ease
- opacity: 0.5
- Ukryj na desktop (display: none)
- Pokaz na mobile (display: block w media query)

`details[open] .order-statuses-side__arrow`:
- transform: rotate(180deg)

`.order-statuses-side__body`:
- Brak dodatkowych stylow (flow domyslny)

2. W media query `@media (max-width: 768px)`:
Dodaj:
```scss
.order-statuses-side__arrow {
  display: block;
}
```

Unikaj: zmian w istniejacych stylach desktop panelu

Na mobile strzalka widoczna, na desktop ukryta. Klikniecie toggle'uje panel. AC-1, AC-2, AC-3 satisfied (style) Task 3: Build CSS public/assets/css/app.css Skompiluj SCSS do CSS: npx sass resources/scss/app.scss public/assets/css/app.css --no-source-map Nowe klasy (order-statuses-side__arrow, order-statuses-side__body) obecne w wynikowym CSS Plik CSS aktualny Rozwijany/zwijany panel statusow na mobile 1. Otworz https://orderpro.projectpro.pl/orders/list (lub lokalnie) 2. Wlacz DevTools > Device Toolbar > 375px 3. Sprawdz: panel statusow zwiniety, widoczny tylko naglowek "Statusy" ze strzalka 4. Kliknij "Statusy" — panel rozwija sie, strzalka obraca sie 5. Kliknij ponownie — panel zwija sie 6. Przelacz na desktop (> 768px) — panel zawsze widoczny, bez strzalki Type "approved" to continue, or describe issues to fix

DO NOT CHANGE

• resources/views/orders/list.php (widok glowny nie wymaga zmian)
• resources/views/layouts/app.php (menu mobilne juz gotowe)
• Logika PHP generowania statusPanel (kontroler/repozytorium)
• Inne komponenty uzytkujace order-status-panel (sprawdzic czy jest reuse)

SCOPE LIMITS

• Tylko panel statusow na mobile — zadne inne elementy listy zamowien
• Nie zmieniaj wygladu poszczegolnych statusow (kolory, badge, hover)
• Nie dodawaj nowych zaleznosci JS

Before declaring plan complete: - [ ] Panel zwiniety domyslnie na mobile - [ ] Klik na naglowek rozwija/zwija panel - [ ] Strzalka obraca sie przy toggle - [ ] Desktop: panel zawsze widoczny, strzalka ukryta - [ ] Brak bledow JS w konsoli - [ ] Inne strony uzywajace panelu statusow dzialaja poprawnie

<success_criteria>

• Wszystkie 3 acceptance criteria spelnione
• Panel nie zajmuje miejsca na mobile gdy zwiniety
• Plynna animacja strzalki (CSS transition)
• Zero regresji na desktop </success_criteria>

After completion, create `.paul/phases/53-mobile-status-panel-toggle/53-01-SUMMARY.md`