diff --git a/.github/GITHUB_ACTIONS_SETUP.md b/.github/GITHUB_ACTIONS_SETUP.md new file mode 100644 index 0000000..1c1cffb --- /dev/null +++ b/.github/GITHUB_ACTIONS_SETUP.md @@ -0,0 +1,115 @@ +# GitHub Actions CI/CD Pipeline Documentation + +## Overview +Pipeline CI/CD ini menggunakan GitHub Actions untuk melakukan automated testing dan code quality checks. Pipeline ini berjalan pada setiap push dan pull request ke branch `main`. + +## Workflows + +### 1. **test.yml** - CI Testing Pipeline +**Trigger:** Push dan Pull Request ke `main` atau `develop` + +**Jobs:** +- ✅ Checkout kode repository +- ✅ Setup Node.js (testing dengan versi 18.x dan 20.x) +- ✅ Install dependencies menggunakan npm ci +- ✅ Run ESLint untuk code style checking +- ✅ Check TypeScript types menggunakan tsc +- ✅ Build verification (non-blocking) + +**Duration:** ~3-5 menit per node version + +### 2. **pr-checks.yml** - Pull Request Specific Checks +**Trigger:** Pull Request events (opened, synchronize, reopened) + +**Jobs:** +- ✅ Checkout kode dengan full history +- ✅ Setup Node.js (latest 20.x) +- ✅ Install dependencies +- ✅ Strict lint checking (no warnings allowed) +- ✅ TypeScript type checking +- ✅ Full build verification +- ✅ Auto comment pada PR dengan status hasil + +**Duration:** ~4-6 menit + +## Fitur + +### ✅ Apa yang di-check: +1. **Linting** - Menggunakan ESLint untuk memastikan code style consistency +2. **Type Safety** - TypeScript compiler untuk memastikan type correctness +3. **Build Verification** - Memastikan project dapat di-build tanpa error + +### ❌ Apa yang TIDAK termasuk: +- Docker build +- Image pushing ke registry +- Production deployment +- Production build optimization + +## Setup Required + +### 1. Branch Protection Rules (Optional tapi Recommended) +Go to Settings → Branches → Add rule untuk `main`: +``` +- Require status checks to pass before merging +- Require code reviews before merging +- Require branches to be up to date before merging +``` + +### 2. Environment Variables (Jika diperlukan) +Tambahkan di Settings → Secrets and variables → Actions: +``` +Tidak ada secret yang diperlukan saat ini untuk pipeline ini +``` + +## Logs dan Monitoring + +### Mengakses Workflow Logs: +1. Buka GitHub repository +2. Klik tab "Actions" +3. Pilih workflow yang ingin dilihat +4. Klik run specific untuk melihat detail logs + +### Status Badges: +Tambahkan ke README.md untuk menampilkan status pipeline: +```markdown +![CI Testing](https://github.com/{owner}/{repo}/actions/workflows/test.yml/badge.svg) +![PR Checks](https://github.com/{owner}/{repo}/actions/workflows/pr-checks.yml/badge.svg) +``` + +## Troubleshooting + +### 1. Build fails dengan error tertentu +- Check logs di Actions tab +- Verifikasi dependensi di package.json +- Pastikan Node.js version compatible + +### 2. ESLint errors +- Run locally: `npm run lint` +- Fix issues: `npx eslint --fix` + +### 3. TypeScript errors +- Run locally: `npx tsc --noEmit` +- Check tsconfig.json settings + +## Maintenance + +### Update Actions Versions: +Workflows menggunakan latest versions dari: +- `actions/checkout@v4` +- `actions/setup-node@v4` +- `actions/github-script@v7` + +Untuk update dependencies, edit workflow files dan ubah version numbers. + +### Adding Tests: +Untuk menambahkan unit tests di masa depan: +1. Install test framework (Jest, Vitest, etc.) +2. Add test script ke package.json: `"test": "jest"` +3. Update workflows untuk menjalankan `npm test` + +## Next Steps + +1. ✅ Push workflow files ke repository +2. ✅ Go to Actions tab untuk verify workflows +3. ✅ Setup branch protection rules (optional) +4. ✅ Add status badges ke README.md diff --git a/.github/workflows/ci-cd.yml b/.github/workflows/ci-cd.yml new file mode 100644 index 0000000..9abf106 --- /dev/null +++ b/.github/workflows/ci-cd.yml @@ -0,0 +1,37 @@ +name: Trashware PR Gatekeeper + +on: + pull_request: + branches: [ main ] + types: [ opened, synchronize, reopened ] + +concurrency: + group: ${{ github.workflow }}-${{ github.ref }} + cancel-in-progress: true + +jobs: + validate-pr: + name: Code Quality Check + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - name: Setup Node.js 20.x + uses: actions/setup-node@v4 + with: + node-version: '20.x' + cache: 'npm' + + - name: Install Dependencies + run: npm ci + + - name: Run ESLint + run: npm run lint -- --max-warnings=0 + + - name: Check TypeScript Compilation + run: npx tsc --noEmit + + - name: Verify Next.js Production Build + run: npm run build \ No newline at end of file diff --git a/CHANGELOG_NAVBAR.md b/CHANGELOG_NAVBAR.md new file mode 100644 index 0000000..268b9fa --- /dev/null +++ b/CHANGELOG_NAVBAR.md @@ -0,0 +1,670 @@ +# Dokumentasi Perubahan Navbar Component + +## Update Terakhir: 4 Juni 2026 (Final) +## Files: +- `src/components/layout/navbar/index.tsx` +- `src/components/manage/ManageBin.tsx` +- `src/components/layout/sidebar/index.tsx` + +### Ringkasan Perubahan +Dokumentasi komprehensif perubahan UI/UX yang mencakup redesign navbar, fix manage bin form data, dan sidebar positioning. + +--- + +## Perubahan Utama (Update Terbaru) + +### Layout Structure - Redesign Komprehensif + +**Sebelum (Grid-based):** +```tsx +
+
+ {/* Menu & Bell Mobile */} +
+
+ {/* Search */} +
+
+ {/* Bell & Profile */} +
+
+``` + +**Sesudah (Flexbox-based):** +```tsx +
+ {/* Menu */} + {/* Search */} + {/* Spacer (hidden di mobile) */} + {/* Bell + Profile */} +
+``` + +**Keuntungan:** +- ✅ Lebih simple dan maintainable +- ✅ Responsive behavior lebih konsisten +- ✅ 1 baris di mobile, 1 baris di desktop (tidak ada layout shift) + +--- + +### Menu Button - Mobile Only (Updated) + +**Sebelum:** +```tsx +className="hidden h-8 w-8 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-700 shadow-sm transition hover:bg-gray-50 sm:hidden sm:h-10 sm:w-10 sm:rounded-xl" +``` + +**Sesudah:** +```tsx +className="flex sm:hidden h-8 w-8 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-700 shadow-sm transition hover:bg-gray-50" +``` + +**Perubahan:** +- `hidden` → `flex sm:hidden` (lebih explicit) +- Dihapus `sm:h-10 sm:w-10 sm:rounded-xl` (tidak perlu di hidden) +- Ditambah `flex-shrink-0` ke parent + +**Hasil:** Menu button hanya tampil di mobile dengan sizing yang konsisten. + +--- + +### Search Bar - Extended Length (NEW) + +**Sebelum:** +```tsx +className="flex items-center gap-1 sm:gap-2 flex-1 sm:flex-none" +``` + +**Sesudah:** +```tsx +className="flex items-center gap-1 sm:gap-2 flex-1 sm:flex-1 sm:max-w-4xl" +``` + +**Perubahan:** +- `sm:flex-none` → `sm:flex-1` (search bar grow di desktop) +- Ditambah `sm:max-w-4xl` untuk membatasi width maksimal yang reasonable + +**Hasil:** Search bar sekarang lebih panjang dan mengisi space dengan lebih baik di desktop. + +--- + +### Notification Icon - Mobile Position (Updated) + +**Lokasi:** Sebelah kanan search bar + +**Kelas:** +```tsx +className="flex sm:hidden relative hover:text-emerald-500 cursor-pointer transition-colors group items-center justify-center text-gray-500" +``` + +**Perubahan:** +- Sekarang di dalam search container yang flex-1, sehingga responsif dengan search bar + +**Hasil:** Bell icon mobile sejajar dengan search bar dalam 1 baris yang compact. + +--- + +### Spacer - Desktop Layout Helper (NEW) + +**Penambahan:** +```tsx +{/* Spacer for desktop - pushes right side to the right */} +
+``` + +**Fungsi:** +- Tersembunyi di mobile +- Di desktop, mengisi space tengah untuk mendorong profile ke kanan +- Memastikan profile section selalu nempel ke right edge + +**Hasil:** Profile button dan bell selalu di ujung kanan desktop, creating clean alignment. + +--- + +### Right Side (Bell + Profile) - Fixed Position (Updated) + +**Sebelum:** +```tsx +className="col-start-3 row-start-1 flex items-center justify-end gap-1.5 sm:gap-4 lg:gap-6 flex-shrink-0 order-2 sm:order-3" +``` + +**Sesudah:** +```tsx +className="flex items-center justify-end gap-1 sm:gap-4 lg:gap-6 flex-shrink-0" +``` + +**Perubahan:** +- Dihapus `col-start-3`, `row-start-1`, `order-2`, `order-3` (tidak perlu di flexbox) +- Tetap `flex-shrink-0` untuk prevent shrinking +- Gap di mobile `gap-1`, desktop `sm:gap-4` + +**Hasil:** Bell dan profile tetap di kanan, tidak pernah bergeser. + +--- + +## Responsive Behavior - Updated + +| Komponen | Mobile | Desktop | Catatan | +|---|---|---|---| +| **Menu** | ✅ Tampil (`flex`) | ❌ Tersembunyi (`sm:hidden`) | Flex-shrink-0, tidak take space | +| **Search** | ✅ Tampil (grow) | ✅ Tampil (flex-1, max-w-4xl) | Full width mobile, long di desktop | +| **Bell Mobile** | ✅ Sebelah search | ❌ Tersembunyi | Dalam search container | +| **Spacer** | ❌ Hidden | ✅ Flex-1 | Mendorong right section ke kanan | +| **Bell Desktop** | ❌ Hidden | ✅ Sebelah profile | Di right section | +| **Profile** | ✅ Tampil (compact) | ✅ Tampil (expanded) | Justify-end, always right | + +--- + +## Visual Layout + +**📱 Mobile Layout (1 baris):** +``` +┌─────────────────────────────┐ +│ ☰ [Search........] 🔔 │ P │ +└─────────────────────────────┘ + ^ ^ + Menu Search + Bell Profile +``` + +**💻 Desktop Layout (1 baris):** +``` +┌──────────────────────────────────────────────┐ +│ [Search.........................] 🔔 │ Profile │ +└──────────────────────────────────────────────┘ + Search (flex-1, max-w-4xl) Right (flex-shrink) +``` + +--- + +## Keuntungan Perubahan (Updated) + +1. **Unified Layout**: Satu baris di mobile dan desktop, tidak ada layout shift +2. **Extended Search**: Search bar lebih panjang di desktop untuk mencari dengan lebih nyaman +3. **Flexbox Purity**: Tidak ada grid complexity, lebih mudah maintain +4. **Better Performance**: Lebih sedkit class, lebih simple DOM structure +5. **Consistent Spacing**: Gap yang responsive (gap-1 → sm:gap-3 → lg:gap-6) +6. **Accessibility**: Semantic order tetap terjaga, aria-label preserved +7. **Mobile-First**: Optimized untuk mobile experience tanpa compromise desktop + +--- + +## Class Overview + +| Element | Classes | Purpose | +|---|---|---| +| Header | `flex items-center gap-1 px-2 py-2 sm:gap-3 sm:px-5 sm:py-4 lg:h-20 lg:px-8 lg:gap-6` | Main flex container dengan responsive gap & padding | +| Menu Button | `flex sm:hidden h-8 w-8` | Mobile only, fixed size | +| Search Container | `flex-1 sm:flex-1 sm:max-w-4xl` | Grow di mobile & desktop, max length di desktop | +| Spacer | `hidden sm:flex flex-1` | Desktop only, flex-1 to push right section right | +| Right Section | `flex-shrink-0 justify-end` | Stay compact, always right aligned | +| Bell Desktop | `hidden sm:flex` | Desktop only | +| Profile | Selalu visible | Responsive text & avatar size | + +--- + +## Testing Checklist + +- [ ] Mobile: ☰ | Search | 🔔 | Profile dalam 1 baris +- [ ] Desktop: Search panjang, 🔔 sebelah profile nempel ke kanan +- [ ] Search tidak wrap/overflow di mobile +- [ ] Search max-width masuk akal di desktop (tidak terlalu panjang) +- [ ] Profile text hidden di mobile, visible di desktop +- [ ] Menu button hanya tampil di mobile +- [ ] Bell mobile hanya di mobile, bell desktop hanya di desktop (tidak duplikat) +- [ ] Notification badge tampil dengan benar di semua lokasi +- [ ] Pages /notifications, /settings, /profile: search & bell tersembunyi dengan benar +- [ ] Hover effects bekerja di semua button +- [ ] No layout shift/CLS saat resize window + +--- + +## Browser Compatibility + +- ✅ Chrome/Edge (latest) +- ✅ Firefox (latest) +- ✅ Safari (latest) +- ✅ Mobile browsers (iOS Safari, Chrome Android) + +--- + +## Performance Notes + +- Flexbox layout lebih cepat dari grid untuk simple 1D layouts +- `flex-shrink-0` prevents expensive recalculations pada responsive changes +- No animation frame drops expected dari flexbox reflow + +--- + +# Dokumentasi Perubahan Tambahan + +## 1. ManageBin - Form Data Population Fix +**File:** `src/components/manage/ManageBin.tsx` +**Tanggal:** 4 Juni 2026 + +### Masalah +Ketika mengedit bin dari table, form modal tidak menampilkan data bin yang dipilih (form kosong). + +### Solusi +Tambahkan `useEffect` untuk populate form data ketika `editData` atau `isOpen` berubah. + +**Kode Sebelum:** +```tsx +export default function ManageBin({ isOpen, onClose, editData }: ManageBinProps) { + const [formData, setFormData] = useState({ + id: "", + gedung: "", + lantai: "", + ruang: "", + capacity: 0, + level: 0, + status: 'on' + }); + const [error, setError] = useState(null); + + // Form tidak pernah populate dengan editData +``` + +**Kode Sesudah:** +```tsx +export default function ManageBin({ isOpen, onClose, editData }: ManageBinProps) { + const [formData, setFormData] = useState({ + id: "", + gedung: "", + lantai: "", + ruang: "", + capacity: 0, + level: 0, + status: 'on' + }); + const [error, setError] = useState(null); + + // Populate form data ketika editData berubah + useEffect(() => { + if (editData) { + setFormData(editData); + } else { + // Reset form untuk create baru + setFormData({ + id: "", + gedung: "", + lantai: "", + ruang: "", + capacity: 0, + level: 0, + status: 'on' + }); + } + setError(null); + }, [editData, isOpen]); +``` + +### Detail Perubahan +| Aspek | Sebelum | Sesudah | +|---|---|---| +| Form Population | Manual, tidak terjadi otomatis | useEffect triggers on editData change | +| Edit Flow | Form kosong saat dibuka | Form langsung populated dengan data | +| Create Flow | ✅ Work | ✅ Work (form di-reset) | +| Reset | Tidak ada | Auto-reset saat create modal dibuka | + +### Impact +- ✅ User dapat melihat data bin yang akan diedit +- ✅ Lebih intuitif dan user-friendly +- ✅ Mengurangi confusion saat edit bin + +--- + +## 2. Sidebar - Fixed Position (Tidak Scroll) +**File:** `src/components/layout/sidebar/index.tsx` & `src/pages/_app.tsx` +**Tanggal:** 4 Juni 2026 + +### Masalah +Sidebar menggunakan `sticky` positioning, sehingga ketika page di-scroll, sidebar ikut ter-scroll (bergeser). Selain itu, sidebar juga overlap dengan main content. + +### Solusi +Ubah positioning menggunakan `fixed` dengan proper margin di main content untuk mencegah overlap. + +**Kode Sebelum (Sidebar):** +```tsx +