chore: cleanup root folder markdown files
- Deleted 36 old session/progress files (Oct 8-13) - Deleted deprecated FIREBASE_SETUP.md - Moved 4 planning documents to docs/planning/ - PROJECT_PLAN.md → project-plan.md - PROJECT_STANDARDS.md → project-standards.md - TODO_ADMIN_FEATURES.md → todo-admin-features.md - IMPLEMENTATION_PLAN.md → implementation-plan.md - Updated docs/README.md with new planning documents - Root folder now only contains README.md
This commit is contained in:
dwindown
203
docs/planning/project-standards.md
Normal file
203
docs/planning/project-standards.md
Normal file
@@ -0,0 +1,203 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user