401 lines
15 KiB
Markdown
401 lines
15 KiB
Markdown
# 📱 Visual Guide - Manager Settings with UPI ID
|
||
|
||
## 🎯 What You'll See in the App
|
||
|
||
---
|
||
|
||
## 1️⃣ Manager Dashboard → Settings
|
||
|
||
```
|
||
╔═══════════════════════════════════════════════╗
|
||
║ Settings [Back] ║
|
||
╠═══════════════════════════════════════════════╣
|
||
║ ║
|
||
║ Appearance ║
|
||
║ ───────────────────────────────────── ║
|
||
║ [🌙] Theme → ║
|
||
║ [☀️] Dark Mode [Toggle] ║
|
||
║ ║
|
||
║ Account ║
|
||
║ ───────────────────────────────────── ║
|
||
║ [👤] Sunder Rajan → ║
|
||
║ 9876543210 ║
|
||
║ [🔒] Change Password → ║
|
||
║ ║
|
||
║ Payment Settings 🆕 ║
|
||
║ ───────────────────────────────────── ║
|
||
║ [💳] UPI ID [Active] ✓ ║
|
||
║ 9876543210@ybl [Copy] ║
|
||
║ ║
|
||
║ [📊] Payment Statistics → ║
|
||
║ View payment insights ║
|
||
║ ║
|
||
║ [₹] Transaction Fees [FREE] ║
|
||
║ 0% fees • Save lakhs per year! ║
|
||
║ ║
|
||
║ Notifications ║
|
||
║ ───────────────────────────────────── ║
|
||
║ [🔔] Push Notifications [Toggle] ║
|
||
║ [💰] Payment Reminders [Toggle] ║
|
||
║ [🎰] Draw Notifications [Toggle] ║
|
||
║ ║
|
||
║ About ║
|
||
║ ───────────────────────────────────── ║
|
||
║ [ℹ️] App Version ║
|
||
║ 1.0.0 ║
|
||
║ [🔐] Privacy Policy → ║
|
||
║ [📄] Terms of Service → ║
|
||
║ ║
|
||
║ ┌─────────────────────────────────────┐ ║
|
||
║ │ [Logout] │ ║
|
||
║ └─────────────────────────────────────┘ ║
|
||
║ ║
|
||
╚═══════════════════════════════════════════════╝
|
||
```
|
||
|
||
---
|
||
|
||
## 2️⃣ UPI ID - Active State (Configured)
|
||
|
||
```
|
||
╔═══════════════════════════════════════════════╗
|
||
║ Payment Settings ║
|
||
╠═══════════════════════════════════════════════╣
|
||
║ ║
|
||
║ ┌──────────────────────────────────────────┐║
|
||
║ │ │║
|
||
║ │ 💳 UPI ID [Active] ✅ │║
|
||
║ │ │║
|
||
║ │ 9876543210@ybl [📋 Copy] │║
|
||
║ │ ↑ ↑ │║
|
||
║ │ Your UPI ID Tap to copy │║
|
||
║ │ │║
|
||
║ │ ───────────────────────────────────── │║
|
||
║ │ │║
|
||
║ │ 📊 Payment Statistics → │║
|
||
║ │ View payment insights │║
|
||
║ │ │║
|
||
║ │ ───────────────────────────────────── │║
|
||
║ │ │║
|
||
║ │ ₹ Transaction Fees [FREE] 🎉 │║
|
||
║ │ 0% fees • Save lakhs per year! │║
|
||
║ │ │║
|
||
║ └──────────────────────────────────────────┘║
|
||
║ ║
|
||
╚═══════════════════════════════════════════════╝
|
||
|
||
Color Scheme:
|
||
- UPI ID section: Purple background (#F3E5F5)
|
||
- Active badge: Green (#4CAF50)
|
||
- Copy button: Purple icon (#7E3BB4)
|
||
- FREE badge: Green background (#C8E6C9)
|
||
```
|
||
|
||
---
|
||
|
||
## 3️⃣ UPI ID - Pending State (Not Configured)
|
||
|
||
```
|
||
╔═══════════════════════════════════════════════╗
|
||
║ Payment Settings ║
|
||
╠═══════════════════════════════════════════════╣
|
||
║ ║
|
||
║ ┌──────────────────────────────────────────┐║
|
||
║ │ │║
|
||
║ │ 💳 UPI ID ⚠️ │║
|
||
║ │ │║
|
||
║ │ Not configured │║
|
||
║ │ Configure in backend/.env │║
|
||
║ │ ↑ │║
|
||
║ │ Tap for setup instructions │║
|
||
║ │ │║
|
||
║ │ ───────────────────────────────────── │║
|
||
║ │ │║
|
||
║ │ 📊 Payment Statistics → │║
|
||
║ │ View payment insights │║
|
||
║ │ │║
|
||
║ │ ───────────────────────────────────── │║
|
||
║ │ │║
|
||
║ │ ₹ Transaction Fees [FREE] 🎉 │║
|
||
║ │ 0% fees • Save lakhs per year! │║
|
||
║ │ │║
|
||
║ └──────────────────────────────────────────┘║
|
||
║ ║
|
||
╚═══════════════════════════════════════════════╝
|
||
|
||
Color Scheme:
|
||
- UPI ID section: Orange background (#FFF3E0)
|
||
- Warning icon: Orange (#FF9800)
|
||
- Text: Orange (#F57C00)
|
||
```
|
||
|
||
---
|
||
|
||
## 4️⃣ Detailed Info Dialog (Tap on UPI ID)
|
||
|
||
```
|
||
╔═══════════════════════════════════════════════╗
|
||
║ 💳 UPI Payment Settings [X] ║
|
||
╠═══════════════════════════════════════════════╣
|
||
║ ║
|
||
║ Current UPI ID ║
|
||
║ ┌──────────────────────────────────────────┐║
|
||
║ │ 9876543210@ybl [📋 Copy] │║
|
||
║ └──────────────────────────────────────────┘║
|
||
║ ║
|
||
║ ───────────────────────────────────────── ║
|
||
║ ║
|
||
║ How to Update UPI ID ║
|
||
║ ║
|
||
║ ① Open backend/.env file ║
|
||
║ ║
|
||
║ ② Update PHONEPE_UPI_ID=your_upi@paytm ║
|
||
║ ║
|
||
║ ③ Restart backend server ║
|
||
║ ║
|
||
║ ④ Refresh this screen ║
|
||
║ ║
|
||
║ ┌──────────────────────────────────────────┐║
|
||
║ │ 💡 Pro Tip │║
|
||
║ │ │║
|
||
║ │ Members can pay using ANY UPI app │║
|
||
║ │ (PhonePe, GPay, Paytm) directly to │║
|
||
║ │ your personal UPI ID with 0% fees! │║
|
||
║ └──────────────────────────────────────────┘║
|
||
║ ║
|
||
║ [Close] ║
|
||
╚═══════════════════════════════════════════════╝
|
||
```
|
||
|
||
---
|
||
|
||
## 5️⃣ Copy Success Animation
|
||
|
||
```
|
||
When user taps Copy button:
|
||
|
||
┌─────────────────────────────┐
|
||
│ ✓ UPI ID copied to │
|
||
│ clipboard │
|
||
└─────────────────────────────┘
|
||
↑ Snackbar at bottom
|
||
↑ Green background
|
||
↑ Auto-dismisses after 2 sec
|
||
```
|
||
|
||
---
|
||
|
||
## 6️⃣ Status Badge Variations
|
||
|
||
### Active Badge (Green):
|
||
```
|
||
┌──────────┐
|
||
│ Active │ ← Green background (#4CAF50)
|
||
└──────────┘ White text
|
||
```
|
||
|
||
### FREE Badge (Green):
|
||
```
|
||
┌────────┐
|
||
│ FREE │ ← Green background (#C8E6C9)
|
||
└────────┘ Dark green text
|
||
```
|
||
|
||
### Warning Icon (Orange):
|
||
```
|
||
⚠️
|
||
↑
|
||
Orange (#FF9800)
|
||
```
|
||
|
||
---
|
||
|
||
## 🎨 Color Palette
|
||
|
||
### Active State (UPI Configured):
|
||
- **Primary**: Purple `#7E3BB4`
|
||
- **Background**: Light Purple `#F3E5F5`
|
||
- **Badge**: Green `#4CAF50`
|
||
- **Text**: Dark Purple `#6A1B9A`
|
||
|
||
### Pending State (Not Configured):
|
||
- **Primary**: Orange `#FF9800`
|
||
- **Background**: Light Orange `#FFF3E0`
|
||
- **Icon**: Orange `#FF9800`
|
||
- **Text**: Dark Orange `#F57C00`
|
||
|
||
### Success Elements:
|
||
- **FREE Badge**: Light Green `#C8E6C9`
|
||
- **Active Badge**: Green `#4CAF50`
|
||
- **Success Text**: Dark Green `#2E7D32`
|
||
|
||
---
|
||
|
||
## 📱 Responsive Design
|
||
|
||
### Phone (Small Screen):
|
||
```
|
||
Full width cards
|
||
Single column layout
|
||
Compact spacing
|
||
Touch-friendly buttons (44px min)
|
||
```
|
||
|
||
### Tablet (Medium Screen):
|
||
```
|
||
Max width: 450px
|
||
Centered layout
|
||
Increased padding
|
||
Larger touch targets
|
||
```
|
||
|
||
---
|
||
|
||
## 🎬 User Interactions
|
||
|
||
### Tap UPI ID Row:
|
||
```
|
||
Action: Opens detailed info dialog
|
||
Shows: Setup instructions + Pro tips
|
||
Duration: Until user closes
|
||
```
|
||
|
||
### Tap Copy Button:
|
||
```
|
||
Action: Copies UPI ID to clipboard
|
||
Feedback: Green snackbar "Copied!"
|
||
Duration: 2 seconds auto-dismiss
|
||
```
|
||
|
||
### Pull to Refresh:
|
||
```
|
||
Action: Refreshes UPI settings from backend
|
||
Shows: Loading indicator
|
||
Updates: Latest configuration status
|
||
```
|
||
|
||
---
|
||
|
||
## 🔄 State Flow Diagram
|
||
|
||
```
|
||
┌─────────────────────┐
|
||
│ App Launched │
|
||
└──────────┬──────────┘
|
||
│
|
||
↓
|
||
┌─────────────────────┐
|
||
│ Login as Manager │
|
||
└──────────┬──────────┘
|
||
│
|
||
↓
|
||
┌─────────────────────┐
|
||
│ Go to Settings │
|
||
└──────────┬──────────┘
|
||
│
|
||
↓
|
||
┌─────────────────────┐
|
||
│ Load Payment │
|
||
│ Settings Section │
|
||
└──────────┬──────────┘
|
||
│
|
||
↓
|
||
┌──────┴──────┐
|
||
│ │
|
||
↓ ↓
|
||
┌────────┐ ┌─────────┐
|
||
│ Active │ │ Pending │
|
||
│ Theme │ │ Theme │
|
||
└───┬────┘ └────┬────┘
|
||
│ │
|
||
↓ ↓
|
||
[Copy] [Setup Info]
|
||
```
|
||
|
||
---
|
||
|
||
## ✨ Animation Details
|
||
|
||
### Card Entry:
|
||
- Fade in from bottom
|
||
- Duration: 300ms
|
||
- Easing: Smooth curve
|
||
|
||
### Badge Pulse (Active):
|
||
- Subtle scale effect
|
||
- Duration: 1s loop
|
||
- Makes badge noticeable
|
||
|
||
### Copy Button:
|
||
- Press animation
|
||
- Scale: 0.95
|
||
- Duration: 100ms
|
||
|
||
---
|
||
|
||
## 📐 Spacing & Dimensions
|
||
|
||
```
|
||
Card Padding: 20px
|
||
Icon Size: 24px
|
||
Icon Background: 40px circle
|
||
Text Primary: 16sp (600 weight)
|
||
Text Secondary: 14sp (400 weight)
|
||
Badge Text: 10sp (600 weight)
|
||
Divider Height: 1px
|
||
Divider Indent: 72px (after icon)
|
||
Button Height: 44px minimum
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 Accessibility
|
||
|
||
- ✅ **Touch Targets**: Minimum 44px
|
||
- ✅ **Contrast Ratio**: WCAG AA compliant
|
||
- ✅ **Text Size**: Scalable with system settings
|
||
- ✅ **Screen Reader**: Full support
|
||
- ✅ **Tooltips**: On icon buttons
|
||
|
||
---
|
||
|
||
## 🚀 Performance
|
||
|
||
- ⚡ **Initial Load**: < 1 second
|
||
- ⚡ **API Call**: Async, doesn't block UI
|
||
- ⚡ **Copy Action**: Instant feedback
|
||
- ⚡ **Dialog Open**: Smooth animation
|
||
|
||
---
|
||
|
||
## 💡 User Experience Highlights
|
||
|
||
### What Makes It Great:
|
||
|
||
1. **Visual Clarity**
|
||
- Color-coded status (Green = Good, Orange = Action needed)
|
||
- Clear icons and badges
|
||
- Well-organized sections
|
||
|
||
2. **Quick Actions**
|
||
- One-tap copy
|
||
- Easy access to details
|
||
- Helpful error messages
|
||
|
||
3. **Informative**
|
||
- Shows current status
|
||
- Provides setup instructions
|
||
- Displays cost savings
|
||
|
||
4. **Manager-Focused**
|
||
- Only visible to managers
|
||
- Relevant information only
|
||
- Action-oriented design
|
||
|
||
---
|
||
|
||
**That's exactly what you'll see in your app!** 🎉
|
||
|
||
Open Settings as a manager and explore the new Payment Settings section! 🚀
|
||
|