# 🎯 Goals Feature - TODO List

**Date:** October 22, 2025  
**Status:** In Progress

---

## ✅ **Completed:**

### **Backend:**
- [x] Goals CRUD API endpoints
- [x] Allocations API (add/remove money)
- [x] Reserved balance tracking in Wallet model
- [x] Centralized WalletBalanceService
- [x] Milestone tracking (25%, 50%, 75%, 100%)

### **Frontend - Core:**
- [x] Goals page (list view - table)
- [x] Goal detail page
- [x] Create goal dialog
- [x] Add money dialog (✅ Fully compliant with standards)
- [x] Breadcrumb shows goal name
- [x] Thousand separators for assets

### **Standards Compliance:**
- [x] Translations added (EN + ID)
- [x] AddMoneyDialog mobile-optimized
- [x] Asset display format: `80 gram ≈ Rp 165.840.000`

---

## 🔄 **In Progress:**

### **1. Implement Translations** ⏳
**Status:** Translations exist but not used in components

**Files to Update:**
- [ ] `Goals.tsx` - Main goals page
- [ ] `GoalDetail.tsx` - Goal detail page
- [ ] `CreateGoalDialog.tsx` - Create goal dialog

**Pattern:**
```tsx
// Import
import { useLanguage } from '@/contexts/LanguageContext';

// Use
const { t } = useLanguage();

// Replace
"New Goal" → {t.goals.newGoal}
"Create Goal" → {t.goals.createGoal}
```

---

## 📋 **Pending Tasks:**

### **2. Wallets Page Enhancement** 🆕 HIGH PRIORITY
**Goal:** Show balance partition (Total / Reserved / Available)

**Current State:**
```
Wallet Card:
├── Name: "Bank BCA"
├── Balance: Rp 5.000.000
└── [Edit] [Delete]
```

**Desired State:**
```
Wallet Card:
├── Name: "Bank BCA"
├── Total Balance: Rp 5.000.000
├── Reserved for Goals: Rp 2.000.000 (40%)
│   └── Progress bar showing reserved portion
├── Available: Rp 3.000.000 (60%)
└── [View Details] [Add Transaction]
```

**Implementation:**
- [ ] Create new `WalletCard` component
- [ ] Fetch wallet balances from `/api/wallets/balances`
- [ ] Show Total / Reserved / Available
- [ ] Add progress bar for reserved amount
- [ ] Show which goals are using this wallet (optional)
- [ ] Keep table view as alternative (add toggle)

**Files to Create/Modify:**
- `/components/pages/wallets/WalletCard.tsx` (NEW)
- `/components/pages/Wallets.tsx` (UPDATE)

---

### **3. Overview Page - Goals Section** 🆕 HIGH PRIORITY
**Goal:** Show goals summary in Overview

**Add Section:**
```
┌─────────────────────────────────────────┐
│ 🎯 Goals Overview                       │
├─────────────────────────────────────────┤
│ Total Goals: 5 (3 active, 2 completed) │
│ Total Target: Rp 100.000.000           │
│ Total Saved: Rp 45.000.000 (45%)       │
│ ━━━━━━━━━━░░░░░░░░░░ 45%              │
│                                         │
│ Active Goals:                           │
│ • MacBook Pro M4    75% ━━━━━━━━░░     │
│ • Vacation to Bali  30% ━━━░░░░░░░     │
│ • Emergency Fund    50% ━━━━━░░░░░     │
│                                         │
│ [View All Goals →]                      │
└─────────────────────────────────────────┘
```

**Implementation:**
- [ ] Add goals summary API endpoint (or calculate in frontend)
- [ ] Create `GoalsSummaryCard` component
- [ ] Show top 3 active goals with progress
- [ ] Link to Goals page
- [ ] Add to Overview page

**Files to Create/Modify:**
- `/components/pages/overview/GoalsSummaryCard.tsx` (NEW)
- `/components/pages/Overview.tsx` (UPDATE)

---

### **4. Float Action Button (FAB)** 🆕 MEDIUM PRIORITY
**Goal:** Quick actions from any page

**Design:**
```
┌─────────────────────────────────────────┐
│                                    [+]  │ ← FAB (bottom-right)
│                                         │
│  Click FAB:                             │
│  ┌─────────────────┐                    │
│  │ + New Goal      │                    │
│  │ 💰 Add Money    │                    │
│  │ 📝 Transaction  │                    │
│  │ 💼 New Wallet   │                    │
│  └─────────────────┘                    │
└─────────────────────────────────────────┘
```

**Implementation:**
- [ ] Create `FloatActionButton` component
- [ ] Add to main layout (DashboardLayout)
- [ ] Show context-aware actions:
  - On Goals page: "New Goal" + "Add Money"
  - On Wallets page: "New Wallet" + "Add Transaction"
  - On Transactions page: "Add Transaction"
  - On Overview: All actions
- [ ] Mobile-optimized (56px circle, bottom-right)
- [ ] Desktop: Optional (or smaller)

**Files to Create/Modify:**
- `/components/layout/FloatActionButton.tsx` (NEW)
- `/components/layout/DashboardLayout.tsx` (UPDATE)

---

### **5. Goals Page - Card View** 🆕 MEDIUM PRIORITY
**Goal:** Better visual representation of goals

**Current:** Table view (functional but not visual)

**Desired:** Card grid view
```
┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐
│ 🏖️ Vacation      │ │ 💻 MacBook Pro   │ │ 🚨 Emergency     │
│ Rp 15M / Rp 50M  │ │ Rp 30M / Rp 40M  │ │ Rp 10M / Rp 20M  │
│ ━━━━━░░░░░░ 30%  │ │ ━━━━━━━━░░ 75%   │ │ ━━━━━░░░░░ 50%   │
│ 45 days left     │ │ 20 days left     │ │ No deadline      │
│ [Add Money]      │ │ [Add Money]      │ │ [Add Money]      │
└──────────────────┘ └──────────────────┘ └──────────────────┘
```

**Implementation:**
- [ ] Create `GoalCard` component
- [ ] Add view toggle (Cards / Table)
- [ ] Grid layout (responsive: 1 col mobile, 2-3 cols desktop)
- [ ] Show progress visually
- [ ] Quick "Add Money" button on card
- [ ] Keep table view as option

**Files to Create/Modify:**
- `/components/pages/goals/GoalCard.tsx` (NEW)
- `/components/pages/Goals.tsx` (UPDATE - add toggle)

---

### **6. Mobile Optimization - Remaining Components** ⏳
**Goal:** Apply standards to all Goal components

**Pending:**
- [ ] `Goals.tsx` - Buttons, inputs, spacing
- [ ] `GoalDetail.tsx` - Buttons, layout
- [ ] `CreateGoalDialog.tsx` - Form fields, buttons
- [ ] Replace `Dialog` with `ResponsiveDialog` (all dialogs)

**Standards:**
- Buttons: `h-11 md:h-9 px-6 md:px-4 text-base md:text-sm`
- Inputs: `h-11 md:h-9 text-base md:text-sm`
- Labels: `text-base md:text-sm`
- Spacing: `gap-3 md:gap-2`

---

## 🎨 **UI/UX Enhancements (Future):**

### **7. Goal Categories with Icons** 💡
- [ ] Add category icons to goal cards
- [ ] Color-code by category
- [ ] Filter by category

### **8. Goal Templates** 💡
- [ ] Pre-defined goal templates
- [ ] "Emergency Fund" → Auto-set to 6 months expenses
- [ ] "Vacation" → Popular destinations with avg costs

### **9. Notifications** 💡
- [ ] Milestone achieved notifications
- [ ] Goal deadline reminders
- [ ] Weekly progress summary

### **10. Analytics** 💡
- [ ] Goal completion rate
- [ ] Average time to complete goals
- [ ] Savings velocity (how fast you save)

---

## 📊 **Priority Matrix:**

| Task | Priority | Effort | Impact | Status |
|------|----------|--------|--------|--------|
| Implement Translations | 🔴 High | Low | High | ⏳ In Progress |
| Wallets Page - Balance Partition | 🔴 High | Medium | High | 📋 Pending |
| Overview - Goals Section | 🔴 High | Medium | High | 📋 Pending |
| Goals Page - Card View | 🟡 Medium | Medium | High | 📋 Pending |
| Float Action Button | 🟡 Medium | Low | Medium | 📋 Pending |
| Mobile Optimization | 🟡 Medium | Low | High | 📋 Pending |
| Goal Categories/Icons | 🟢 Low | Low | Low | 💡 Future |
| Goal Templates | 🟢 Low | Medium | Medium | 💡 Future |
| Notifications | 🟢 Low | High | Medium | 💡 Future |
| Analytics | 🟢 Low | High | Low | 💡 Future |

---

## 🚀 **Recommended Implementation Order:**

### **Immediate Tasks (Phase 1):**
1. ✅ Implement translations:
   - ✅ `Goals.tsx` - DONE
   - ⏳ `GoalDetail.tsx` - Pending
   - ⏳ `CreateGoalDialog.tsx` - Pending

### **Phase 2: Wallets Enhancement** (Next)
2. 🆕 Wallets page - Show balance partition
   - Create WalletCard component
   - Show Total / Reserved / Available

### **Phase 3: Overview Integration** (Next)
3. 🆕 Overview page - Goals section
   - Create GoalsSummaryCard
   - Show top 3 active goals
   - Link to Goals page

### **Phase 4: UI Improvements** (Later)
4. 🆕 Goals page - Card view
5. 🆕 Float Action Button
6. Mobile optimization (remaining)

---

## 📝 **Quick Reference:**

### **API Endpoints Available:**
```
GET    /api/goals                    - List all goals
GET    /api/goals/:id                - Get goal details
POST   /api/goals                    - Create goal
PATCH  /api/goals/:id                - Update goal
DELETE /api/goals/:id                - Delete goal
POST   /api/goals/:id/allocations    - Add money to goal
DELETE /api/goals/:id/allocations/:allocationId - Remove allocation
GET    /api/wallets/balances         - Get all wallet balances ✅
GET    /api/wallets/:id/balance      - Get single wallet balance ✅
```

### **Translation Keys Available:**
```typescript
t.goals.title
t.goals.newGoal
t.goals.createGoal
t.goals.addMoney
t.goals.totalBalance
t.goals.reservedForGoals
t.goals.availableToAllocate
// ... (see en.ts and id.ts for full list)
```

---

## ✅ **Current Status Summary:**

**Working:**
- ✅ Goals CRUD
- ✅ Add/Remove allocations
- ✅ Reserved balance tracking
- ✅ Thousand separators
- ✅ Asset display format
- ✅ AddMoneyDialog (fully compliant)

**In Progress:**
- ⏳ Translations implementation

**Next Up:**
- 📋 Wallets page enhancement
- 📋 Overview page integration
- 📋 Card view for goals

---

**Last Updated:** October 22, 2025, 11:15 PM  
**Next Action:** Continue implementing translations in Goals.tsx