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

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

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

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

## Source Files
@resources/views/orders/show.php
@resources/views/orders/list.php (referencja — istniejacy hover pattern)
</context>

<acceptance_criteria>

## AC-1: Hover zoom na miniaturce
```gherkin
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
```gherkin
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
```gherkin
Given produkt bez zdjecia (placeholder)
When uzytkownik najedzie kursorem
Then nie pojawia sie zadne powiekszenie (brak popup)
```

</acceptance_criteria>

<tasks>

<task type="auto">
  <name>Task 1: Dodanie hover wrappera i JS do show.php</name>
  <files>resources/views/orders/show.php</files>
  <action>
    1. Zamien blok img miniaturki (linie 162-163):
       ```php
       <img src="<?= $e($media) ?>" alt="" class="order-item-thumb">
       ```
       Na wrapper z popup:
       ```php
       <span class="orders-image-hover-wrap">
         <img src="<?= $e($media) ?>" alt="" class="order-item-thumb">
         <img src="<?= $e($media) ?>" alt="" class="orders-image-hover-popup">
       </span>
       ```

    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
  </action>
  <verify>Otworz /orders/117 — najechanie na miniaturke produktu pokazuje powiekszenie</verify>
  <done>AC-1, AC-2, AC-3 satisfied</done>
</task>

<task type="checkpoint:human-verify" gate="blocking">
  <what-built>Hover zoom na miniaturkach produktow w widoku zamowienia</what-built>
  <how-to-verify>
    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
  </how-to-verify>
  <resume-signal>Type "approved" to continue, or describe issues to fix</resume-signal>
</task>

</tasks>

<boundaries>

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

</boundaries>

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

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

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