checkpoint: goals feature, wallet balance, and goals/wallet detail UI

- Add goals feature (models, migrations, API, web pages) - Add reserved/centralized wallet balance service - Add wallet detail page and overview components - Add new UI components (progress, multi-select, FAB) - Remove stray empty -H/-d files from working tree
2026-06-17 20:40:00 +07:00
parent 35e93b826a
commit 6a6e74562c
401 changed files with 9517 additions and 397 deletions
--- a/GOALS_PROGRESS_SUMMARY.md
+++ b/GOALS_PROGRESS_SUMMARY.md
@@ -0,0 +1,287 @@
+# ✅ Goals Feature - Progress Summary
+
+**Date:** October 22, 2025, 11:25 PM  
+**Execution Order:** A → C → B (As requested)
+
+---
+
+## ✅ **Phase A: Translations - COMPLETED**
+
+### **What Was Done:**
+1. ✅ Added English translations to `en.ts`
+2. ✅ Added Indonesian translations to `id.ts`
+3. ✅ Updated `AddMoneyDialog.tsx` with translations + mobile classes
+4. ✅ Updated `Goals.tsx` with translations + mobile classes
+
+### **Components Now Translated:**
+- ✅ `AddMoneyDialog.tsx` - Fully compliant
+- ✅ `Goals.tsx` - Fully compliant
+
+### **Remaining:**
+- ⏳ `GoalDetail.tsx` - Pending
+- ⏳ `CreateGoalDialog.tsx` - Pending
+
+---
+
+## ✅ **Phase C: Overview Integration - COMPLETED**
+
+### **What Was Created:**
+1. ✅ `GoalsSummaryCard.tsx` component
+2. ✅ Added to Overview page
+
+### **Features:**
+- Shows goals summary stats
+- Displays top 3 active goals with progress bars
+- Overall progress percentage
+- Total target vs current amount
+- Click to navigate to goal detail
+- "View All" button to Goals page
+- Empty state with "Create First Goal" button
+- Loading state
+- Fully translated (EN/ID)
+- Mobile-optimized
+
+### **What It Looks Like:**
+```
+┌─────────────────────────────────────────┐
+│ 🎯 Goals                    [View All →]│
+│ 3 active • 45% progress                 │
+├─────────────────────────────────────────┤
+│ Total Target:        Rp 100.000.000     │
+│ Current Amount:      Rp 45.000.000      │
+│ ━━━━━━━━━░░░░░░░░░░░ 45%               │
+│                                         │
+│ Active Goals:                           │
+│ • MacBook Pro M4    75% ━━━━━━━━░░     │
+│   Rp 30M / Rp 40M                       │
+│                                         │
+│ • Vacation to Bali  30% ━━━░░░░░░░     │
+│   Rp 15M / Rp 50M                       │
+│                                         │
+│ • Emergency Fund    50% ━━━━━░░░░░     │
+│   Rp 10M / Rp 20M                       │
+│                                         │
+│ [View All Goals →]                      │
+└─────────────────────────────────────────┘
+```
+
+---
+
+## ⏳ **Phase B: Wallets Enhancement - NEXT**
+
+### **What Needs to Be Done:**
+
+#### **1. Create WalletCard Component**
+**File:** `/components/pages/wallets/WalletCard.tsx`
+
+**Features:**
+- Show wallet name and icon
+- Display Total / Reserved / Available balances
+- Progress bar showing reserved portion
+- List of goals using this wallet (optional)
+- Click to view details
+- Mobile-optimized
+
+**Design:**
+```
+┌─────────────────────────────────────────┐
+│ 💼 Bank BCA                      [Edit] │
+├─────────────────────────────────────────┤
+│ Total Balance:        Rp 5.000.000      │
+│ Reserved for Goals:   Rp 2.000.000 (40%)│
+│ ━━━━━━━━░░░░░░░░░░░░                    │
+│ Available:            Rp 3.000.000 (60%)│
+│                                         │
+│ Reserved by:                            │
+│ • MacBook Pro: Rp 1.500.000            │
+│ • Vacation: Rp 500.000                 │
+│                                         │
+│ [View Details] [Add Transaction]        │
+└─────────────────────────────────────────┘
+```
+
+#### **2. Update Wallets Page**
+**File:** `/components/pages/Wallets.tsx`
+
+**Changes:**
+- Replace table view with card grid (or add toggle)
+- Use `/api/wallets/balances` endpoint
+- Show Total / Reserved / Available for each wallet
+- Add progress bar
+- Optionally show which goals are using the wallet
+
+**API Already Available:**
+```typescript
+GET /api/wallets/balances
+// Returns:
+[
+  {
+    walletId: "uuid",
+    kind: "money",
+    currency: "IDR",
+    totalBalance: 5000000,
+    reservedBalance: 2000000,
+    availableBalance: 3000000
+  }
+]
+```
+
+---
+
+## 📊 **Overall Progress:**
+
+### **Completed:**
+- ✅ Backend: Goals CRUD, Allocations, Reserved Balance
+- ✅ Backend: Centralized WalletBalanceService
+- ✅ Backend: API endpoints for wallet balances
+- ✅ Frontend: Goals page (table view)
+- ✅ Frontend: Goal detail page
+- ✅ Frontend: Create goal dialog
+- ✅ Frontend: Add money dialog (fully compliant)
+- ✅ Frontend: Breadcrumb shows goal name
+- ✅ Frontend: Thousand separators for assets
+- ✅ Frontend: Asset display format (`80 gram ≈ Rp 165.840.000`)
+- ✅ Translations: EN + ID added
+- ✅ Translations: AddMoneyDialog implemented
+- ✅ Translations: Goals.tsx implemented
+- ✅ Mobile: AddMoneyDialog optimized
+- ✅ Mobile: Goals.tsx optimized
+- ✅ Overview: Goals Summary Card added
+
+### **In Progress:**
+- ⏳ Translations: GoalDetail.tsx
+- ⏳ Translations: CreateGoalDialog.tsx
+
+### **Next Up:**
+- 📋 Wallets: Balance partition display
+- 📋 Wallets: WalletCard component
+- 📋 Goals: Card view (alternative to table)
+- 📋 Float Action Button (FAB)
+
+---
+
+## 🎯 **Key Achievements Today:**
+
+### **1. Thousand Separators** ✅
+All asset amounts now show properly:
+- `80 gram` → `80 gram` (with separators)
+- `Rp 165840000` → `Rp 165.840.000`
+
+### **2. Centralized Balance** ✅
+Single source of truth for wallet balances:
+- Respects wallet kind (money vs asset)
+- Calculates Total / Reserved / Available
+- Reusable across the app
+
+### **3. Translations** ✅
+Goals feature now supports EN/ID:
+- AddMoneyDialog: 100% translated
+- Goals.tsx: 100% translated
+- GoalsSummaryCard: 100% translated
+
+### **4. Mobile Optimization** ✅
+Following project standards:
+- Touch targets: 44px (h-11 on mobile)
+- Font sizes: 16px on mobile (prevents zoom)
+- Responsive spacing and padding
+
+### **5. Overview Integration** ✅
+Goals now visible on Overview page:
+- Shows top 3 active goals
+- Overall progress
+- Quick navigation
+- Empty state handling
+
+---
+
+## 📝 **Next Session TODO:**
+
+### **Priority 1: Wallets Enhancement**
+1. Create `WalletCard.tsx` component
+2. Update `Wallets.tsx` to use cards
+3. Show Total / Reserved / Available
+4. Add progress bar for reserved amount
+5. Optionally list goals using the wallet
+
+### **Priority 2: Complete Translations**
+1. Update `GoalDetail.tsx` with translations
+2. Update `CreateGoalDialog.tsx` with translations
+3. Apply mobile-responsive classes
+
+### **Priority 3: UI Improvements**
+1. Goals page: Add card view option
+2. Add view toggle (Cards / Table)
+3. Float Action Button (FAB)
+
+---
+
+## 🚀 **How to Test:**
+
+### **1. Goals Summary on Overview:**
+```bash
+1. Go to Overview page
+2. Scroll down - you'll see "Goals" section
+3. If you have goals, see top 3 with progress
+4. Click on a goal to view details
+5. Click "View All Goals" to go to Goals page
+```
+
+### **2. Translations:**
+```bash
+1. Toggle language (EN/ID) in header
+2. Go to Goals page
+3. Click "New Goal" or "Add Money"
+4. All text should change language
+```
+
+### **3. Asset Formatting:**
+```bash
+1. Create asset wallet (e.g., Gold)
+2. Add to goal
+3. Check display shows: "80 gram ≈ Rp 165.840.000"
+4. Thousand separators should be visible
+```
+
+---
+
+## 📊 **Statistics:**
+
+**Files Created:** 3
+- `GoalsSummaryCard.tsx`
+- `GOALS_TODO.md`
+- `GOALS_PROGRESS_SUMMARY.md`
+
+**Files Modified:** 5
+- `en.ts` - Added goals translations
+- `id.ts` - Added goals translations
+- `Goals.tsx` - Translations + mobile classes
+- `AddMoneyDialog.tsx` - Translations + mobile classes
+- `Overview.tsx` - Added Goals Summary
+
+**Lines of Code:** ~500+
+
+**Features Completed:** 5
+1. Thousand separators
+2. Centralized balance service
+3. Translations (partial)
+4. Mobile optimization (partial)
+5. Overview integration
+
+---
+
+## ✅ **Summary:**
+
+**Today's Execution: A → C → B**
+
+- ✅ **A (Translations):** AddMoneyDialog + Goals.tsx done
+- ✅ **C (Overview):** Goals Summary Card added
+- ⏳ **B (Wallets):** Ready to start next
+
+**Status:** On track! 🎉
+
+**Next:** Wallets page enhancement with balance partition display.
+
+---
+
+**Last Updated:** October 22, 2025, 11:25 PM  
+**Ready for:** Wallets Enhancement (Phase B)