tabungin/docs/planning/project-standards.md

Tabungin Project Standards

🌐 Multilingual Support (COMPLETED)

Languages Supported:

• ✅ English (EN) - Full translation
• ✅ Indonesian (ID) - Full translation (Default)

Implementation:

• Location: /apps/web/src/locales/
  • en.ts - English translations
  • id.ts - Indonesian translations
• Context: LanguageContext.tsx - Language state management
• Component: LanguageToggle.tsx - Language switcher UI
• Usage: const { t } = useLanguage() then t.section.key

Translation Structure:

{
  nav: { ... },
  overview: { ... },
  wallets: { ... },
  transactions: { ... },
  profile: { ... },
  walletDialog: { ... },
  transactionDialog: { ... },
  dateRange: { ... }
}

Rules:

1. ✅ ALL user-facing text MUST use translations - No hardcoded strings
2. ✅ Both EN and ID must have identical keys - Type-safe with TypeScript
3. ✅ Toast messages use translations - toast.success(t.section.key)
4. ✅ Error messages use translations - Consistent UX

---

🎨 UI Component Library (COMPLETED)

Framework: shadcn/ui

• Built on Radix UI primitives
• Tailwind CSS styling
• Fully customizable components

Components Used:

• ✅ Button, Input, Label, Badge
• ✅ Card, Alert, Separator, Tabs
• ✅ Dialog, Drawer (Responsive)
• ✅ Select, Popover, Calendar
• ✅ Sidebar, Breadcrumb
• ✅ Toast (Sonner)

Styling Convention:

• Tailwind CSS for all styling
• Dark mode support via useTheme hook
• Responsive design with md:, lg: breakpoints

---

📱 Mobile UI/UX Optimization (COMPLETED ✅)

Status:

• ✅ Profile Page - Fully optimized
• ✅ Overview Page - Fully optimized
• ✅ Wallets Page - Fully optimized
• ✅ Transactions Page - Fully optimized
• ✅ Responsive Dialogs - Desktop (Dialog) / Mobile (Drawer)

Mobile Standards:

1. Touch Target Sizes

• Buttons: h-11 (44px) on mobile, h-10 on desktop
• Inputs: h-11 (44px) on mobile, h-10 on desktop
• Minimum width: min-w-[100px] for buttons
• Padding: px-6 on mobile, px-4 on desktop

2. Typography

• Inputs/Labels: text-base (16px) on mobile to prevent iOS zoom
• Desktop: text-sm (14px) for compact layout
• Responsive: text-base md:text-sm

3. Spacing

• Form fields: space-y-3 on mobile, space-y-2 on desktop
• Touch targets: Minimum 8px gap between tappable elements
• Padding: More generous on mobile (p-6 vs p-4)

4. Responsive Patterns

// Button sizing
<Button className="h-11 md:h-9 px-6 md:px-4 text-base md:text-sm">

// Input sizing
<Input className="h-11 md:h-9 text-base md:text-sm" />

// Label sizing
<Label className="text-base md:text-sm">

// Spacing
<div className="space-y-3 md:space-y-2">

5. Responsive Dialog/Drawer

• Desktop (≥768px): Uses Dialog (modal)
• Mobile (<768px): Uses Drawer (bottom sheet)
• Component: ResponsiveDialog wrapper
• Usage: Replace Dialog with ResponsiveDialog

---

🏗️ Architecture Standards

Frontend Structure:

/apps/web/src/
├── components/
│   ├── dialogs/          # Form dialogs (Wallet, Transaction)
│   ├── layout/           # Layout components (Sidebar, Dashboard)
│   ├── pages/            # Page components (Overview, Profile, etc.)
│   └── ui/               # shadcn components
├── contexts/             # React contexts (Auth, Language, Theme)
├── hooks/                # Custom hooks
├── locales/              # Translation files (en.ts, id.ts)
└── lib/                  # Utilities

Backend Structure:

/apps/api/src/
├── auth/                 # Authentication module
├── users/                # User management
├── wallets/              # Wallet CRUD
├── transactions/         # Transaction CRUD
├── otp/                  # OTP verification (Email, WhatsApp, TOTP)
└── prisma/               # Database client

---

📋 Development Checklist for New Pages

When creating a new page, ensure:

✅ Multilingual

• All text uses t.section.key from translations
• Both en.ts and id.ts have matching keys
• Toast messages are translated
• Error messages are translated

✅ UI Components

• Uses shadcn/ui components
• Follows existing design patterns
• Dark mode compatible

✅ Mobile Optimization

• 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: space-y-3 md:space-y-2
• Dialogs use ResponsiveDialog component
• Touch targets meet 44px minimum
• Tested on mobile viewport

✅ Code Quality

• TypeScript strict mode passing
• No lint errors/warnings
• Follows existing patterns
• Proper error handling

---

🎯 Next Steps

Completed:

1. ✅ Profile page mobile optimization
2. ✅ Overview page mobile optimization
3. ✅ Wallets page mobile optimization
4. ✅ Transactions page mobile optimization
5. ✅ WhatsApp number validation
6. ✅ Language toggle moved to header
7. ✅ Responsive Dialog/Drawer system

Future Enhancements:

• Add more languages (if needed)
• Improve loading states
• Add skeleton loaders
• Optimize performance
• Add E2E tests

---

📝 Notes

• Default Language: Indonesian (ID)
• Theme: Light/Dark mode support
• Responsive Breakpoint: 768px (md)
• Touch Target Standard: 44px (Apple HIG & Material Design)
• Font Size (Mobile): 16px minimum to prevent iOS zoom

---

Last Updated: October 12, 2025 Status: Mobile optimization in progress