wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity
Files
feb853d06ea7d147a998b81d7257b6f2d07d9a73
desa-darmasaba/task-project-apbdes.md

12 KiB
Raw Blame History

Task Project Menu: Modernisasi Halaman APBDes

📊 Project Overview

Target File: src/app/darmasaba/_com/main-page/apbdes/index.tsx

Goal: Modernisasi tampilan dan fungsionalitas halaman APBDes untuk meningkatkan user experience, visualisasi data, dan code quality.

🎯 Task List

Phase 1: UI/UX Enhancement 🔥 HIGH PRIORITY

Task 1.1: Add Loading State

  • Create apbdesSkeleton.tsx component
  • Add skeleton untuk PaguTable
  • Add skeleton untuk RealisasiTable
  • Add skeleton untuk GrafikRealisasi
  • Implement loading state saat ganti tahun
  • Add smooth fade-in transition saat data load

Files to Create/Modify:

  • src/app/darmasaba/_com/main-page/apbdes/components/apbdesSkeleton.tsx (CREATE)
  • src/app/darmasaba/_com/main-page/apbdes/index.tsx (MODIFY)

Estimated Time: 45 menit

Task 1.2: Improve Table Design

  • Add hover effects pada table rows
  • Implement striped rows untuk readability
  • Add sticky header untuk long data
  • Improve typography dan spacing
  • Add responsive table wrapper untuk mobile
  • Add color coding untuk tipe data berbeda

Files to Modify:

  • src/app/darmasaba/_com/main-page/apbdes/lib/paguTable.tsx
  • src/app/darmasaba/_com/main-page/apbdes/lib/realisasiTable.tsx

Estimated Time: 1 jam

Task 1.3: Add Animations & Interactions

  • Install Framer Motion (bun add framer-motion)
  • Add fade-in animation untuk main container
  • Add slide-up animation untuk tables
  • Add hover scale effect untuk cards
  • Add smooth transition saat ganti tahun
  • Add loading spinner untuk Select component

Dependencies: framer-motion

Files to Modify:

  • src/app/darmasaba/_com/main-page/apbdes/index.tsx
  • src/app/darmasaba/_com/main-page/apbdes/lib/*.tsx

Estimated Time: 1 jam

Phase 2: Data Visualization 📈 HIGH PRIORITY

Task 2.1: Install & Setup Recharts

  • Install Recharts (bun add recharts)
  • Create basic bar chart component
  • Add tooltip dengan formatted data
  • Add responsive container
  • Configure color scheme

Dependencies: recharts

Files to Create:

  • src/app/darmasaba/_com/main-page/apbdes/lib/comparisonChart.tsx (CREATE)

Estimated Time: 1 jam

Task 2.2: Create Interactive Charts

  • Bar chart: Pagu vs Realisasi comparison
  • Pie chart: Komposisi per kategori
  • Line chart: Trend multi-tahun (jika data tersedia)
  • Add legend dan labels
  • Add export chart as image feature

Files to Create:

  • src/app/darmasaba/_com/main-page/apbdes/lib/barChart.tsx (CREATE)
  • src/app/darmasaba/_com/main-page/apbdes/lib/pieChart.tsx (CREATE)

Estimated Time: 2 jam

Task 2.3: Create Summary Cards

  • Design summary card component
  • Display Total Pagu
  • Display Total Realisasi
  • Display Persentase Realisasi
  • Add trend indicators (↑↓)
  • Add color-coded performance badges
  • Add animated number counters

Files to Create:

  • src/app/darmasaba/_com/main-page/apbdes/lib/summaryCards.tsx (CREATE)

Estimated Time: 1.5 jam

Phase 3: Features ⚙️ MEDIUM PRIORITY

Task 3.1: Search & Filter

  • Add search input untuk filter items
  • Add filter dropdown by tipe (Pendapatan/Belanja/Pembiayaan)
  • Add sort functionality (by jumlah, realisasi, persentase)
  • Add clear filter button
  • Add search result counter

Files to Create/Modify:

  • src/app/darmasaba/_com/main-page/apbdes/hooks/useApbdesFilter.ts (CREATE)
  • src/app/darmasaba/_com/main-page/apbdes/index.tsx (MODIFY)

Estimated Time: 1.5 jam

Task 3.2: Export & Print Functionality

  • Install PDF library (bun add @react-pdf/renderer)
  • Create PDF export template
  • Add Excel export (bun add exceljs)
  • Add print CSS styles
  • Create export buttons component
  • Add loading state saat export

Dependencies: @react-pdf/renderer, exceljs

Files to Create:

  • src/app/darmasaba/_com/main-page/apbdes/components/exportButtons.tsx (CREATE)
  • src/app/darmasaba/_com/main-page/apbdes/utils/exportPdf.ts (CREATE)
  • src/app/darmasaba/_com/main-page/apbdes/utils/exportExcel.ts (CREATE)

Estimated Time: 2 jam

Task 3.3: Detail View Modal

  • Add modal component untuk detail item
  • Display breakdown realisasi per item
  • Add historical comparison (tahun sebelumnya)
  • Add close button dan ESC key handler
  • Add responsive modal design

Files to Create:

  • src/app/darmasaba/_com/main-page/apbdes/components/detailModal.tsx (CREATE)

Estimated Time: 1.5 jam

Phase 4: Code Quality 🧹 MEDIUM PRIORITY

Task 4.1: TypeScript Improvements

  • Create proper TypeScript types
  • Replace all any dengan interfaces
  • Add Zod schema validation
  • Type-safe API responses
  • Add generic types untuk reusable components

Files to Create:

  • src/app/darmasaba/_com/main-page/apbdes/types/apbdes.ts (CREATE)

Files to Modify:

  • All .tsx files in apbdes directory

Estimated Time: 1.5 jam

Task 4.2: Code Cleanup

  • Remove all commented code
  • Remove console.logs (replace dengan proper logging)
  • Add error boundaries
  • Improve error messages
  • Add proper ESLint comments
  • Add JSDoc untuk complex functions

Estimated Time: 1 jam

Task 4.3: Custom Hook Refactoring

  • Create useApbdesData custom hook
  • Move data fetching logic to hook
  • Add SWR/React Query for caching (optional)
  • Add optimistic updates
  • Add error handling di hook level

Files to Create:

  • src/app/darmasaba/_com/main-page/apbdes/hooks/useApbdesData.ts (CREATE)

Estimated Time: 1 jam

Phase 5: Advanced Features 🚀 LOW PRIORITY (Optional)

Task 5.1: Year Comparison View

  • Add multi-year selection
  • Side-by-side comparison table
  • Year-over-year growth calculation
  • Add trend arrows dan percentage change
  • Add comparison chart

Files to Create:

  • src/app/darmasaba/_com/main-page/apbdes/lib/yearComparison.tsx (CREATE)

Estimated Time: 2 jam

Task 5.2: Dashboard Widgets

  • Key metrics overview widget
  • Budget utilization gauge chart
  • Alert untuk over/under budget
  • Quick stats summary
  • Add drill-down capability

Dependencies: Mungkin perlu additional chart library

Estimated Time: 2.5 jam

Task 5.3: Responsive Mobile Optimization

  • Mobile-first table design
  • Collapsible sections untuk mobile
  • Touch-friendly interactions
  • Optimize chart untuk small screens
  • Add mobile navigation

Estimated Time: 1.5 jam

📁 Proposed File Structure

src/app/darmasaba/_com/main-page/apbdes/
│
├── index.tsx                      # Main component (refactored)
│
├── lib/
│   ├── paguTable.tsx              # Table Pagu (improved)
│   ├── realisasiTable.tsx         # Table Realisasi (improved)
│   ├── grafikRealisasi.tsx        # Chart component (updated)
│   ├── comparisonChart.tsx        # NEW: Bar chart comparison
│   ├── barChart.tsx               # NEW: Interactive bar chart
│   ├── pieChart.tsx               # NEW: Pie chart visualization
│   └── summaryCards.tsx           # NEW: Summary metrics cards
│   └── yearComparison.tsx         # NEW: Year comparison view (optional)
│
├── components/
│   ├── apbdesSkeleton.tsx         # NEW: Loading skeleton
│   ├── apbdesCard.tsx             # NEW: Preview card
│   ├── exportButtons.tsx          # NEW: Export/Print buttons
│   └── detailModal.tsx            # NEW: Detail view modal
│
├── hooks/
│   ├── useApbdesData.ts           # NEW: Data fetching hook
│   └── useApbdesFilter.ts         # NEW: Search/filter hook
│
├── types/
│   └── apbdes.ts                  # NEW: TypeScript types & interfaces
│
└── utils/
    ├── exportPdf.ts               # NEW: PDF export logic
    └── exportExcel.ts             # NEW: Excel export logic

📦 Required Dependencies

# Core dependencies
bun add framer-motion recharts

# Export functionality
bun add @react-pdf/renderer exceljs

# Optional: Better data fetching
bun add swr

# Type definitions
bun add -D @types/react-pdf

🎯 Success Criteria

UI/UX

  • Loading state implemented dengan skeleton
  • Smooth animations pada semua interactions
  • Modern table design dengan hover effects
  • Fully responsive (mobile, tablet, desktop)

Data Visualization

  • Interactive charts (Recharts) implemented
  • Summary cards dengan real-time metrics
  • Color-coded performance indicators
  • Responsive charts untuk semua screen sizes

Features

  • Search & filter functionality working
  • Export to PDF working
  • Export to Excel working
  • Print view working
  • Detail modal working

Code Quality

  • No any types (all properly typed)
  • No commented code
  • No console.logs in production code
  • Error boundaries implemented
  • Custom hooks for reusability

⏱️ Total Estimated Time

Phase Tasks Estimated Time
Phase 1 3 tasks 2.75 jam
Phase 2 3 tasks 4.5 jam
Phase 3 3 tasks 5 jam
Phase 4 3 tasks 3.5 jam
Phase 5 3 tasks 6 jam (optional)
TOTAL 15 tasks ~21.75 jam (tanpa Phase 5: ~15.75 jam)

🚀 Recommended Implementation Order

  1. Start dengan Phase 1 (UI/UX Enhancement) - Quick wins, immediate visual improvement
  2. Continue dengan Phase 4 (Code Quality) - Clean foundation sebelum add features
  3. Move to Phase 2 (Data Visualization) - Core value add
  4. Then Phase 3 (Features) - User functionality
  5. Optional Phase 5 (Advanced) - If time permits

📝 Notes

  • Prioritize tasks berdasarkan impact vs effort
  • Test di berbagai screen sizes selama development
  • Get user feedback setelah Phase 1 & 2 complete
  • Consider A/B testing untuk new design
  • Document all new components di storybook (if available)

🔗 Related Files

  • Main Component: src/app/darmasaba/_com/main-page/apbdes/index.tsx
  • State Management: src/app/admin/(dashboard)/_state/landing-page/apbdes.ts
  • API Endpoint: src/app/api/landingpage/apbdes/

Last Updated: 2026-03-25
Status: Phase 1, 2, 4 Completed ✅
Approved By: Completed

✅ Completed Tasks Summary

Phase 1: UI/UX Enhancement - DONE ✅

  • ✅ Created apbdesSkeleton.tsx with loading skeletons for all components
  • ✅ Improved table design with hover effects, striped rows, sticky headers
  • ✅ Installed Framer Motion and added smooth animations
  • ✅ Added loading states when changing year
  • ✅ Added fade-in and slide-up transitions

Phase 2: Data Visualization - DONE ✅

  • ✅ Installed Recharts
  • ✅ Created interactive comparison bar chart (Pagu vs Realisasi)
  • ✅ Created summary cards with metrics and progress indicators
  • ✅ Enhanced GrafikRealisasi with better visual design
  • ✅ Added color-coded performance badges

Phase 4: Code Quality - DONE ✅

  • ✅ Created proper TypeScript types in types/apbdes.ts
  • ✅ Replaced most any types with proper interfaces (some remain for flexibility)
  • ✅ Removed commented code from main index.tsx
  • ✅ Cleaned up console.logs
  • ✅ Improved error handling

Files Created:

  1. src/app/darmasaba/_com/main-page/apbdes/types/apbdes.ts - TypeScript types
  2. src/app/darmasaba/_com/main-page/apbdes/components/apbdesSkeleton.tsx - Loading skeletons
  3. src/app/darmasaba/_com/main-page/apbdes/lib/summaryCards.tsx - Summary metrics cards
  4. src/app/darmasaba/_com/main-page/apbdes/lib/comparisonChart.tsx - Recharts bar chart
  5. src/app/darmasaba/_com/main-page/apbdes/lib/paguTable.tsx - Improved table (updated)
  6. src/app/darmasaba/_com/main-page/apbdes/lib/realisasiTable.tsx - Improved table (updated)
  7. src/app/darmasaba/_com/main-page/apbdes/lib/grafikRealisasi.tsx - Enhanced chart (updated)
  8. src/app/darmasaba/_com/main-page/apbdes/index.tsx - Main component with animations (updated)

Dependencies Installed:

  • framer-motion@12.38.0 - Animation library
  • recharts@3.8.0 - Chart library