orderPRO/.paul/phases/54-order-detail-image-hover/54-01-PLAN.md

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

phase	plan	type	wave	depends_on	files_modified	autonomous
54-order-detail-image-hover	01	execute	1		resources/views/orders/show.php	false

## Goal Dodanie hover-zoom na miniaturkach produktow w widoku szczegolowym zamowienia (/orders/{id}), identycznie jak dziala na liscie zamowien.

Purpose

Na liscie zamowien po najechaniu na miniaturke produktu pojawia sie powiekszony podglad (350x350px). W widoku szczegolowym zamowienia tego brakuje — uzytkownik nie moze szybko sprawdzic zdjecia produktu.

Output

• Miniaturki produktow w show.php opakowane w orders-image-hover-wrap
• Popup powiekszenia na hover (fixed, 350x350)
• JS pozycjonujacy popup (identyczny z list.php)

## Project Context @.paul/PROJECT.md

Source Files

@resources/views/orders/show.php @resources/views/orders/list.php (referencja — istniejacy hover pattern)

<acceptance_criteria>

AC-1: Hover zoom na miniaturce

Given widok szczegolowy zamowienia z produktem majacym zdjecie
When uzytkownik najedzie kursorem na miniaturke produktu
Then obok miniaturki pojawia sie powiekszony podglad (350x350px)
And podglad znika po zjechaniu kursorem

AC-2: Pozycjonowanie popup

Given miniaturka produktu blisko prawej krawedzi ekranu
When uzytkownik najedzie kursorem
Then popup pojawia sie po lewej stronie miniaturki (nie wychodzi poza viewport)

AC-3: Brak zdjecia

Given produkt bez zdjecia (placeholder)
When uzytkownik najedzie kursorem
Then nie pojawia sie zadne powiekszenie (brak popup)

</acceptance_criteria>

Task 1: Dodanie hover wrappera i JS do show.php resources/views/orders/show.php 1. Zamien blok img miniaturki (linie 162-163): ```php ``` Na wrapper z popup: ```php ```

2. Na koncu pliku (przed zamykajacym tagiem lub po ostatnim script) dodaj blok JS
   identyczny z tym z list.php — delegowany mouseenter na document
   szukajacy .orders-image-hover-wrap i pozycjonujacy popup:
   ```js
   (function () {
     var POPUP_GAP = 12;
     document.addEventListener('mouseenter', function (e) {
       if (!e.target || !e.target.closest) return;
       var wrap = e.target.closest('.orders-image-hover-wrap');
       if (!wrap) return;
       var popup = wrap.querySelector('.orders-image-hover-popup');
       if (!popup) return;
       var rect = wrap.getBoundingClientRect();
       var pw = 350; var ph = 350;
       var left = rect.right + POPUP_GAP;
       if (left + pw > window.innerWidth) left = rect.left - pw - POPUP_GAP;
       var top = rect.top + rect.height / 2 - ph / 2;
       if (top < 4) top = 4;
       if (top + ph > window.innerHeight - 4) top = window.innerHeight - 4 - ph;
       popup.style.left = left + 'px';
       popup.style.top = top + 'px';
     }, true);
   })();
   ```

Unikaj: duplikowania CSS (style juz istnieja w app.scss)
Unikaj: zmian w czesci placeholder (order-item-thumb--empty) — tam nie ma zdjecia

Otworz /orders/117 — najechanie na miniaturke produktu pokazuje powiekszenie AC-1, AC-2, AC-3 satisfied Hover zoom na miniaturkach produktow w widoku zamowienia 1. Otworz https://orderpro.projectpro.pl/orders/117 2. Najedz kursorem na miniaturke produktu w tabeli 3. Sprawdz: pojawia sie powiekszony podglad (350x350) obok miniaturki 4. Zjezdzaj kursorem — popup znika 5. Sprawdz produkt bez zdjecia — brak popupu 6. Sprawdz przy prawej krawedzi — popup po lewej stronie Type "approved" to continue, or describe issues to fix

DO NOT CHANGE

• resources/scss/app.scss (style hover juz istnieja)
• resources/views/orders/list.php (hover tam juz dziala)
• resources/views/components/ (komponenty wspolne)

SCOPE LIMITS

• Tylko miniaturki produktow w show.php
• Nie zmieniaj rozmiaru miniaturek
• Nie dodawaj hover na mobile (na dotykowych ekranach hover nie dziala)

Before declaring plan complete: - [ ] Hover zoom dziala na miniaturkach z obrazkiem - [ ] Popup pozycjonowany poprawnie (prawo lub lewo) - [ ] Brak popup na placeholder (brak zdjecia) - [ ] Brak bledow JS w konsoli - [ ] Lista zamowien hover nadal dziala

<success_criteria>

• Wszystkie 3 acceptance criteria spelnione
• Identyczne zachowanie jak na liscie zamowien
• Zero nowych plikow CSS/JS (reuse istniejacych stylow) </success_criteria>

After completion, create `.paul/phases/54-order-detail-image-hover/54-01-SUMMARY.md`