# Quick Implementation Guide - Drag & Drop + Modern Icons **Target**: Update dashboard_flow.blade.php dan hasil_seleksi.blade.php **Time**: 15-20 menit --- ## ๐Ÿš€ STEP 1: Add CSS & JS Files (PALING PENTING!) ### 1A. Tambahkan di BAGIAN ATAS file (setelah tag `` existing styles ```html ``` ### 1B. Tambahkan SEBELUM closing `` atau setelah Lucide script ```html ``` --- ## ๐ŸŽฏ STEP 2: Replace Upload Zone HTML ### Cari section ini (around line 633): ```html ``` ### GANTI dengan kode ini: ```html
Klik atau drag & drop file ke sini
Upload bukti transfer pembayaran pendaftaran
๐Ÿ“„ Format: JPG, PNG, atau PDF ยท Maksimal 20MB
filename.jpg
0 KB
``` ### Update Submit Button (line ~644): **GANTI**: ```html ``` **DENGAN**: ```html ``` --- ## ๐ŸŽฏ STEP 3: Replace Upload Zone 2 (Uang Pangkal) ### Cari section ini (around line 1995): ```html ``` ### GANTI dengan (sama seperti di atas tapi ubah ID): ```html
Klik atau drag & drop file ke sini
Upload bukti transfer uang pangkal & SPP Juli
๐Ÿ“„ Format: JPG, PNG, atau PDF ยท Maksimal 20MB
filename.jpg
0 KB
``` ### Update Submit Button 2 (line ~2006): ```html ``` --- ## โœจ STEP 4: Add Modern Icons (OPTIONAL tapi RECOMMENDED) ### Cara Cepat: Tambahkan class ke semua icon Lucide: **BEFORE**: ```html ``` **AFTER**: ```html ``` ### Icon Animation Classes: | Icon Type | Animation Class | Use Case | |-----------|----------------|----------| | Success/Check | `icon-pulse` | โœ… Completed steps | | Upload | `icon-float` | โฌ†๏ธ Upload actions | | Loading/Processing | `icon-spin` | โš™๏ธ Settings, loading | | Warning | `icon-bounce` | โš ๏ธ Alerts, warnings | | Default | `icon-animated` | ๐ŸŽฏ All other icons | ### Examples to Find & Replace: ```html ``` --- ## ๐Ÿงช Testing Steps 1. **Clear Browser Cache**: Ctrl + Shift + R 2. **Check Network Tab**: Verify CSS & JS files load (200 OK) 3. **Test Drag & Drop**: - Drag file over upload zone โ†’ should highlight green - Drop file โ†’ filename should appear - Click remove button โ†’ file should clear 4. **Test Click Upload**: - Click upload zone โ†’ file picker opens - Select file โ†’ preview appears 5. **Test Form Submit**: - Upload file - Click "Upload Bukti Transfer" - Verify file submits correctly 6. **Check Icons**: - Hover over icons โ†’ should have animation - Check all icons render correctly --- ## โšก Quick Find & Replace Use your editor's Find & Replace (Ctrl+H): ### Replace 1: Upload Zone **Find**: `