tabungin/GOALS_TODO.md

🎯 Goals Feature - TODO List

Date: October 22, 2025
Status: In Progress

---

✅ Completed:

Backend:

• Goals CRUD API endpoints
• Allocations API (add/remove money)
• Reserved balance tracking in Wallet model
• Centralized WalletBalanceService
• Milestone tracking (25%, 50%, 75%, 100%)

Frontend - Core:

• Goals page (list view - table)
• Goal detail page
• Create goal dialog
• Add money dialog (✅ Fully compliant with standards)
• Breadcrumb shows goal name
• Thousand separators for assets

Standards Compliance:

• Translations added (EN + ID)
• AddMoneyDialog mobile-optimized
• 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:

// 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:

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