tabungin/GOALS_STANDARDS_UPDATE.md

✅ Goals Feature - Standards Compliance Update

Date: October 22, 2025
Status: In Progress

---

🎯 Issues to Fix:

1. Thousand Separators for Assets ✅

Problem: Asset amounts showing without thousand separators

Before: 80 gram ≈ Rp 165840000  ❌
After:  80 gram ≈ Rp 165.840.000  ✅

Solution: Updated formatCurrency in /constants/currencies.ts to use toLocaleString for non-currency codes (units).

---

2. Multilingual Support ⏳

Problem: Goals feature has hardcoded English text

Required Changes:

Add to /locales/en.ts and /locales/id.ts:

goals: {
  title: 'Goals' / 'Tujuan',
  pageDescription: 'Track your savings goals and progress' / 'Lacak tujuan tabungan dan progres Anda',
  newGoal: 'New Goal' / 'Tujuan Baru',
  // ... (see full list in en.ts)
}

Update Components to Use Translations:

• Goals.tsx - Main page
• GoalDetail.tsx - Detail page
• CreateGoalDialog.tsx - Create dialog
• AddMoneyDialog.tsx - Add money dialog

---

3. Mobile Optimization ⏳

Problem: Goals dialogs not following mobile standards

Required Changes:

Button Sizing:

// Before
<Button>New Goal</Button>

// After
<Button className="h-11 md:h-9 px-6 md:px-4 text-base md:text-sm">
  {t.goals.newGoal}
</Button>

Input Sizing:

// Before
<Input placeholder="Goal name" />

// After
<Input 
  className="h-11 md:h-9 text-base md:text-sm"
  placeholder={t.goals.goalNamePlaceholder}
/>

Label Sizing:

// Before
<Label>Goal Name</Label>

// After
<Label className="text-base md:text-sm">
  {t.goals.goalName}
</Label>

Spacing:

// Before
<div className="grid gap-4">

// After
<div className="grid gap-3 md:gap-2">

Use ResponsiveDialog:

// Before
import { Dialog } from '@/components/ui/dialog';

// After
import { ResponsiveDialog } from '@/components/ui/responsive-dialog';

---

📋 Implementation Checklist:

✅ Completed:

• Add thousand separators to asset amounts
• Update formatCurrency function
• Add English translations to en.ts
• Add Indonesian translations to id.ts
• Update AddMoneyDialog.tsx to use translations
• Add mobile-responsive classes to AddMoneyDialog.tsx

⏳ In Progress:

• Update Goals.tsx to use translations
• Update GoalDetail.tsx to use translations
• Update CreateGoalDialog.tsx to use translations

⏳ Pending:

• Add mobile-optimized button sizing
• Add mobile-optimized input sizing
• Add mobile-optimized label sizing
• Add mobile-optimized spacing
• Replace Dialog with ResponsiveDialog
• Test on mobile viewport
• Verify touch targets (44px minimum)

---

🔧 Quick Fixes Needed:

1. formatCurrency Already Fixed ✅

// Now handles assets with thousand separators
formatCurrency(80, 'gram') → "80 gram"
formatCurrency(165840000, 'IDR') → "Rp 165.840.000"

2. Add Indonesian Translations

Copy the goals section from en.ts and translate to Indonesian in id.ts.

3. Update All Goal Components

Replace all hardcoded text with t.goals.key pattern.

4. Mobile Optimization

Apply responsive classes to all buttons, inputs, labels, and spacing.

---

📊 Example Transformations:

Before (Non-Compliant):

<Button onClick={() => setCreateDialogOpen(true)}>
  <Plus className="h-4 w-4" />
  New Goal
</Button>

<Input
  placeholder="e.g., Vacation to Bali"
  value={formData.name}
/>

<Label>Goal Name *</Label>

After (Compliant):

<Button 
  onClick={() => setCreateDialogOpen(true)}
  className="h-11 md:h-9 px-6 md:px-4 text-base md:text-sm gap-2"
>
  <Plus className="h-4 w-4" />
  {t.goals.newGoal}
</Button>

<Input
  className="h-11 md:h-9 text-base md:text-sm"
  placeholder={t.goals.goalNamePlaceholder}
  value={formData.name}
/>

<Label className="text-base md:text-sm">
  {t.goals.goalName} *
</Label>

---

🎯 Priority Order:

1. High Priority:

   • ✅ Thousand separators (DONE)
   • ⏳ Indonesian translations
   • ⏳ Update Goals.tsx with translations

2. Medium Priority:

   • ⏳ Update dialogs with translations
   • ⏳ Mobile button/input sizing

3. Low Priority:

   • ⏳ ResponsiveDialog implementation
   • ⏳ Final mobile testing

---

📝 Notes:

• Thousand Separators: Now working for all asset types
• Translation Keys: Added to en.ts, need to add to id.ts
• Mobile Standards: Follow existing patterns from Transactions/Wallets pages
• ResponsiveDialog: Can be implemented last as Dialog works on mobile (just not optimal)

---

Next Steps:

1. Add Indonesian translations
2. Update Goals components to use t.goals.*
3. Apply mobile-responsive classes
4. Test on mobile viewport

---

Status: Thousand separators ✅ | Translations ⏳ | Mobile ⏳