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:
```typescript
{
  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
```tsx
// 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