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
This commit is contained in:
Dwindi Ramadhana
329
GOALS_TODO.md
Executable file
329
GOALS_TODO.md
Executable file
@@ -0,0 +1,329 @@
|
||||
# 🎯 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
|
||||
Reference in New Issue
Block a user