6a6e74562c
- 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
330 lines
10 KiB
Markdown
Executable File
330 lines
10 KiB
Markdown
Executable File
# 🎯 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
|