citrus-cms/resources/views/guide/spool-release-wizard.md

Spool Release Wizard Design Guide / Spool Release Wizard Tasarım Rehberi

Overview / Genel Bakış

• EN: This document describes the architecture of the new Spool Release Wizard. It consolidates Spool List, Weld/Paint information, release triggers, rollback, and area overview features into a single multistep experience.
• TR: Bu doküman, tüm Spool Listesi, Weld/Paint bilgileri, release tetikleyicileri, rollback ve alan özetini tek bir çok adımlı sihirbazda toplayan yeni Spool Release Wizard mimarisini anlatır.

Goals / Hedefler

1. EN: Faster batch release & rollback operations with minimal page reloads.
   TR: Sayfa yenilemesine gerek kalmadan daha hızlı toplu release ve rollback işlemleri.
2. EN: Step-by-step guidance for SHOP/FIELD users with contextual validation.
   TR: SHOP/FIELD kullanıcıları için bağlamsal doğrulamalarla adım adım yönlendirme.
3. EN: Modern UI using cards, steppers, and collapsible panels, still powered by existing DevExtreme grids and helper partials.
   TR: Mevcut DevExtreme grid ve helper parçalarını kullanırken kartlar, stepper ve açılır panellerle modern arayüz.

File Structure / Dosya Yapısı

resources/views/admin/type/
├─ spool-release-wizard.blade.php          # Main wizard shell
└─ spool-release-wizard/                   # Partials per step
   ├─ bootstrap-data.blade.php             # Shared PHP logic (queries, release actions)
   ├─ step-1-select.blade.php              # Spool list + chart selector
   ├─ step-2-inspect.blade.php             # Weld/Paint info form + checklist
   ├─ step-3-release.blade.php             # Release buttons, paint follow-up feedback
   ├─ step-4-rollback.blade.php            # Release list + rollback actions
   ├─ step-5-overview.blade.php            # Spool area overview cards/grid
   └─ wizard-nav.blade.php                 # Stepper navigation + controls
resources/js/spool-release-wizard.js       # (Optional) Future dedicated script
resources/views/guide/spool-release-wizard.md  # This file

Data Flow / Veri Akışı

1. EN: bootstrap-data.blade.php mirrors the query logic from spool-release-ndt.blade.php, preparing $weldInfos, $paintInfos, $showReleaseButton, counters, etc., and executing release or rollback requests before the UI loads.
   TR: bootstrap-data.blade.php, spool-release-ndt.blade.phpdeki sorgu mantığını aynen kopyalayarak $weldInfos, $paintInfos, $showReleaseButton, sayaçlar vb. verileri hazırlar ve UI yüklenmeden önce release/rollback isteklerini çalıştırır.
2. EN: Steps share selected ISO/SPL state via hidden inputs in the form; DevExtreme grids post data back through classic form submissions to keep compatibility with existing back-end actions.
   TR: Adımlar seçilen ISO/SPL durumunu formdaki gizli alanlar üzerinden paylaşır; DevExtreme gridleri mevcut back-end aksiyonlarıyla uyumlu kalmak için klasik form gönderimi yapar.

Step Breakdown / Adım Detayları

1. Select – Chart + Spool List grid. Multi-select triggers form submission (POST) that fills iso_number & spool_number.
   TR: Grafik + Spool List grid’i. Çoklu seçim form gönderimiyle iso_number ve spool_number alanlarını doldurur.
2. Inspect – Shows ISO/SPool filters, painting cycles, NDT %, PWHT, spool status chip, checklist upload, SHOP/FIELD toggle.
   TR: ISO/SPL filtreleri, boyama çevrimleri, NDT %, PWHT, statü etiketi, checklist yükleme ve SHOP/FIELD seçimi burada.
3. Release – Houses release buttons, modals, summary of generated numbers, and includes paint-follow-up-updater feedback area.
   TR: Release butonları, modallar, oluşturulan numara özetleri ve paint-follow-up-updater geri bildirim alanı burada.
4. Rollback – Displays release history (NDT/Paint lists) with inline rollback triggers, plus log toasts.
   TR: Release geçmişi ve rollback tetikleyicilerini, ayrıca log bildirimlerini gösterir.
5. Overview – Compact cards that summarize Waiting/OnGoing/etc. counts plus a button to open the full Spool Area grid modal (spool-area-release).
   TR: Waiting/OnGoing vb. sayıları özetleyen kartlar ve tam Spool Area grid modali açan buton içerir.

UI Patterns / Arayüz Kalıpları

• Bootstrap 5 vertical pills-based stepper (wizard-nav.blade.php).
• DevExtreme grids kept intact but wrapped inside cards with contextual toolbars.
• Progress bar & status badges updated when selection changes.
• Responsive two-column layout for large screens, stacked for mobile.

Future Enhancements / Gelecek Geliştirmeler

• Replace form submissions with Axios-powered API calls for fully async navigation.
• Persist wizard state in localStorage to resume partially completed releases.
• Integrate real-time notifications (Echo) for long-running batch operations.

---

• EN: Follow this structure when extending the wizard so all existing release logic stays intact while offering a modern UX.
• TR: Mevcut release mantığını koruyup modern UX sunmak için sihirbazı genişletirken bu yapıya bağlı kalın.

Spool Release Wizard Specification / Spool Release Sihirbazı Şartnamesi

1. Goal / Amaç

• EN: Replace the legacy three-column Spool Release screens with a unified, step-by-step wizard that handles selection, validation, release, rollback, and overview actions faster and with a modern UI.
• TR: Eski üç sütunlu Spool Release ekranlarını seçim, doğrulama, release, rollback ve özet işlemlerini daha hızlı ve modern bir arayüzle yöneten tekil bir sihirbaz ile değiştirmek.

2. File Layout / Dosya Yapısı

• resources/views/admin/type/spool-release-wizard.blade.php → Main wrapper (breadcrumb, stepper container, global JS include).
• resources/views/admin/type/spool-release-wizard/layout/stepper.blade.php → Step headers + navigation buttons.
• resources/views/admin/type/spool-release-wizard/steps/*.blade.php → Individual step content (lazy-loaded via @includeWhen).
• resources/views/admin/type/spool-release-wizard/modals/*.blade.php → Shared confirmation dialogs (release, rollback, PDF, detail).
• public/js/spool-release-wizard.js (or mix asset) → State store, DevExtreme data sources, AJAX POST helpers.

3. Wizard Steps / Sihirbaz Adımları

1. Select Spools / Spool Seçimi
   • EN: DevExtreme card + pie chart summarizing statuses, grid for filtering ISO/SPL with multi-select (reuses admin-ajax/spool-list).
   • TR: Durum özetli grafik + çoklu seçimli grid; seçimler global store’a yazılır.
2. Review Info / Bilgileri İncele
   • EN: Weld/Paint info cards, painting cycle badges, PWHT/NDT indicators, checklist upload + SHOP/FIELD toggle.
   • TR: Boya döngüsü, NDT %, PWHT etiketleri ve checklist yükleme alanı gösterilir.
3. Release Actions / Release İşlemleri
   • EN: NDT Release & NDT+Paint Release buttons, preview of affected rows, asynchronous execution with progress feedback.
   • TR: Tetikleme sonrası sonuç adetleri toast + activity log’da listelenir.
4. Rollback & History / Rollback & Geçmiş
   • EN: Release list datagrid with inline rollback controls, filters by status/date.
   • TR: Toplu rollback için seçilen ISO/SPL state’i kullanılır.
5. Overview / Genel Bakış
   • EN: Mini dashboard summarizing Spool Area Release stats; modal can open the full DevExtreme grid for audits.
   • TR: Genel ilerleme kartları ve PDF üretim butonları tek adımda sunulur.

4. State Management / Durum Yönetimi

• EN: Central WizardStore (JavaScript module) keeps selectedIsos, selectedSpools, filters, and step.
• TR: WizardStore seçili ISO/SPL, filtreler ve adım bilgisini saklar; her adım store.onChange ile güncellenir.
• EN: API calls reuse existing endpoints (?ajax=spool-list, ?ajax=spool-area-release, release querystrings) but triggered via fetch/AJAX POST.
• TR: Mevcut endpoint’ler fetch/AJAX ile çağrılır; sayfa yenilenmeden sonuç toplanır.

5. Performance Notes / Performans Notları

• Lazy-load heavy grids (Release List, Spool Area) only when their step becomes active.
• Share cached dataset between chart and grid to avoid duplicate requests.
• Use Promise.all for parallel data loads (e.g., painting cycles + weld info).
• Debounce filters in selection grid to reduce server load.

6. UX Enhancements / UX İyileştirmeleri

• Stepper breadcrumbs with completion ticks.
• Floating action bar for quick release/rollback once prerequisites satisfied.
• Toast + log area showing recent operations (release numbers, rollback summaries).
• Mobile-friendly layout; grids switch to cards under 992px.

7. Migration Checklist / Migrasyon Kontrolü

• Reuse existing helper partials where possible (chart, upload, weld-info) but namespace them under spool-release-wizard.
• Confirm get_counter patterns remain unchanged.
• Ensure rollback + release operations still call paint-follow-up-updater inclusions.
• Verify permissions (is_stellar(), isAuth) before exposing action buttons.
• Update menu link to point to wizard once stabilized (separate task).

8. Testing / Test

• Selection & navigation across steps.
• Release flow with/without painting cycle.
• Rollback for multiple ISO/SPL.
• Overview stats matching legacy Spool Area Release.
• Responsiveness on tablet/mobile.

---

• EN: Once development completes, deprecate legacy pages gradually while keeping endpoints backward-compatible.
• TR: Geliştirme tamamlandığında eski ekranlar kademeli olarak devre dışı bırakılır, ancak endpoint’ler geriye dönük uyumluluğu korur.