orderPRO/.paul/phases/61-payment-button-activation/61-01-PLAN.md

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

phase	plan	type	wave	depends_on	files_modified	autonomous
61-payment-button-activation	01	execute	1		resources/views/orders/show.php resources/scss/app.scss public/assets/css/app.css	true

## Goal Aktywacja przycisku "Platnosc" w headerze szczegółów zamówienia — kliknięcie przełącza na zakładkę płatności i automatycznie otwiera formularz dodawania płatności. Dodatkowo poprawa odstępu między inputami a buttonami w formularzu płatności.

Purpose

Przycisk "Płatność" jest obecnie nieaktywny (btn--disabled) mimo że zakładka płatności i formularz już istnieją (Phase 56). Aktywacja przycisku skraca ścieżkę użytkownika do dodania płatności.

Output

• Przycisk "Platnosc" aktywny, przełącza na tab payments i otwiera formularz
• Formularz z wizualnym odstępem między inputami a przyciskami

## Source Files @resources/views/orders/show.php (linia 76: przycisk Platnosc, linia 128: tab payments, linia 559-638: panel + formularz) @resources/scss/app.scss (linia 1648-1687: style payment-add-form)

<acceptance_criteria>

AC-1: Przycisk Platnosc aktywny i funkcjonalny

Given użytkownik jest na stronie szczegółów zamówienia /orders/{id}
When klika przycisk "Platnosc" w headerze
Then widok przełącza się na zakładkę "Płatności"
And formularz dodawania płatności jest automatycznie widoczny (rozwinięty)

AC-2: Odstęp między inputami a buttonami formularza

Given formularz dodawania płatności jest widoczny
When użytkownik widzi formularz
Then między rzędem inputów a rzędem przycisków jest wyraźny odstęp (margin-top ≥ 12px)

</acceptance_criteria>

Task 1: Aktywacja przycisku Platnosc i podpięcie JS resources/views/orders/show.php 1. Linia 76: zamień `Platnosc` na `Platnosc` — usunięcie btn--disabled i dodanie ID. 2. W bloku `<script>` na dole pliku dodaj handler: - Nasłuchuje click na `#btn-header-payment` - Wywołuje `setActiveTab('payments')` aby przełączyć na zakładkę płatności - Ustawia `localStorage` (storageKey) na `'payments'` - Pokazuje formularz: `document.getElementById('payment-add-form').style.display = ''` Otworzyć /orders/130, kliknąć przycisk "Platnosc" — widok przeskakuje na tab Płatności, formularz jest widoczny AC-1 satisfied: przycisk aktywny, przełącza tab i otwiera formularz Task 2: Odstęp w formularzu płatności (SCSS) resources/scss/app.scss, public/assets/css/app.css 1. W SCSS (app.scss) do selektora `.payment-add-form__actions` dodaj `margin-top: 12px;` (aktualnie ma tylko gap: 8px bez marginesu górnego, klasa `mt-8` w HTML daje 8px co jest za mało). 2. W HTML (show.php linia 634) zamień `mt-8` na `mt-12` lub zostaw HTML bez zmian i użyj samego SCSS. 3. Zbuduj CSS: `npx sass resources/scss/app.scss public/assets/css/app.css --no-source-map` Otworzyć formularz płatności — wyraźny odstęp między inputami a przyciskami Zapisz/Anuluj AC-2 satisfied: wizualny odstęp ≥ 12px między inputami a buttonami

DO NOT CHANGE

• Logika backend płatności (PaymentController, PaymentRepository)
• Pozostałe przyciski w headerze (Strefa klienta, Drukuj, Pakuj, Edytuj — zostają disabled)
• Tab switching logic (setActiveTab) — reuse istniejącej funkcji

SCOPE LIMITS

• Tylko aktywacja przycisku i poprawa CSS
• Brak zmian w logice formularza zapisywania płatności
• Brak zmian w API/endpointach

Before declaring plan complete: - [ ] Przycisk "Platnosc" nie ma klasy btn--disabled - [ ] Kliknięcie przełącza na tab payments - [ ] Formularz dodawania płatności jest automatycznie widoczny po kliknięciu - [ ] Odstęp między inputami a buttonami w formularzu ≥ 12px - [ ] Build SCSS przechodzi bez błędów - [ ] Pozostałe przyciski disabled bez zmian

<success_criteria>

• Przycisk Platnosc aktywny i funkcjonalny
• Formularz otwarty automatycznie po kliknięciu
• Wizualny odstęp w formularzu poprawiony
• Brak regresji w pozostałych zakładkach i przyciskach </success_criteria>

After completion, create `.paul/phases/61-payment-button-activation/61-01-SUMMARY.md`