# Property Valuation Portal - Visual Layout Guide
## Quick Reference Document
This document provides visual representations of the screen layouts and navigation patterns.
---
## 1. Overall Navigation Architecture
```
┌─────────────────────────────────────────────────────────────────────────┐
│ HEADER BAR (Fixed Top) │
│ [JR Logo] Property Valuation Portal 🔍 Search 🔔(3) [User ▼] │
├─────────────────────────────────────────────────────────────────────────┤
│ Breadcrumb: Home > Valuations > VAL-2024-001 │
├─────────────────────────────────────────────────────────────────────────┤
│ PRIMARY TABS: [Dashboard] [Valuations] [Approvals] [Reports] [Admin] │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ MAIN CONTENT AREA │
│ (Vertically Scrollable) │
│ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
NO SIDEBAR - NO HORIZONTAL SCROLL
```
---
## 2. Screen Layout Variants
### Variant A: Dashboard Grid Layout
```
┌──────────────────────────────────────────────────────────────────────┐
│ DASHBOARD │
├──────────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌────────────┐ │
│ │ Total │ │ Completed │ │ Pending │ │ Avg TAT │ │
│ │ 250 │ │ 180 │ │ 45 │ │ 5.2 days │ │
│ │ ↑ 15% │ │ ↑ 10% │ │ ↓ 5% │ │ ↓ 0.8d │ │
│ └────────────┘ └────────────┘ └────────────┘ └────────────┘ │
│ │
│ ┌─────────────────────────────────┬───────────────────────────┐ │
│ │ Recent Valuations Table │ Quick Actions │ │
│ │ ┌───┬──────┬────────┬────────┐ │ [+ Create New] │ │
│ │ │ID │Bank │Address │Status │ │ [My Queue] │ │
│ │ ├───┼──────┼────────┼────────┤ │ [Generate Report] │ │
│ │ │001│HDFC │Hyd │Review │ │ │ │
│ │ │002│SBI │Sec'bad │Survey │ │ Activity Feed │ │
│ │ │003│ICICI │Hyd │Approved│ │ • Valuation 001 approved │ │
│ │ │...│... │... │... │ │ • Query raised on 015 │ │
│ │ └───┴──────┴────────┴────────┘ │ • Survey completed 022 │ │
│ │ │ │ │
│ └─────────────────────────────────┴───────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ Charts Row │ │
│ │ ┌──────────────────┐ ┌──────────────────┐ │ │
│ │ │ Status Pie Chart │ │ Trend Line Chart │ │ │
│ │ └──────────────────┘ └──────────────────┘ │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────┘
```
### Variant B: List/Table Layout
```
┌──────────────────────────────────────────────────────────────────────┐
│ VALUATION LIST [+ Create New] │
├──────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────── FILTERS (Collapsible) ───────────────────────────┐ │
│ │ Status: [All ▼] Bank: [All ▼] Type: [All ▼] Date: [Range] │ │
│ │ [Apply Filters] [Clear] │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ ☐ | ID↕ | Bank↕ | Property | Type | Status↕ | Date↕ | Action│ │
│ ├──┼─────┼───────┼──────────┼──────┼─────────┼───────┼───────┤ │
│ │ ☐│ 001 │ HDFC │ Plot 123 │ Plot │ Review │12/20 │ ⋮ │ │
│ │ ☐│ 002 │ SBI │ House 45 │ IH │ Survey │12/19 │ ⋮ │ │
│ │ ☐│ 003 │ ICICI │ Flat 2B │ Apt │Approved │12/18 │ ⋮ │ │
│ │ ☐│ ... │ ... │ ... │ ... │ ... │... │ ⋮ │ │
│ └──┴─────┴───────┴──────────┴──────┴─────────┴───────┴───────┘ │
│ │
│ Showing 1-25 of 250 [< Previous] [1] [2] [3] ... [10] [Next >] │
│ │
└──────────────────────────────────────────────────────────────────────┘
```
### Variant C: Form Layout (Single Column with Accordion)
```
┌──────────────────────────────────────────────────────────────────────┐
│ VALUATION DETAILS - VAL-2024-001 [Edit] [Clone] │
├──────────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────── BASIC INFORMATION (Expanded) ──────────────────┐ │
│ │ ▼ │ │
│ │ Bank Name: [HDFC Bank ▼] │ │
│ │ Property Type: ○ Plot ◉ Ind House ○ Apartment │ │
│ │ Applicant Name: [John Doe ] │ │
│ │ Contact: [+91 9876543210 ] │ │
│ │ Email: [john@example.com ] │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────── PROPERTY LOCATION (Collapsed) ─────────────────┐ │
│ │ ▶ Click to expand │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────── SITE CHARACTERISTICS (Collapsed) ──────────────┐ │
│ │ ▶ Click to expand │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────── BOUNDARIES & DIMENSIONS (Collapsed) ───────────┐ │
│ │ ▶ Click to expand │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ [View on Map] [Upload Documents] [Add Photos] │
│ │
├──────────────────────────────────────────────────────────────────────┤
│ ACTION BAR (Sticky Bottom) │
│ [Cancel] [Save Draft] [Submit for Review] [Raise Query] │
└──────────────────────────────────────────────────────────────────────┘
```
### Variant D: Split View (Map Screen)
```
┌──────────────────────────────────────────────────────────────────────┐
│ SITE & MAP - VAL-2024-001 │
├──────────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────┬────────────────────────────────────┐ │
│ │ MAP VIEW (60%) │ CONTROLS PANEL (40%) │ │
│ │ │ │ │
│ │ ┌────────────────┐ │ Location Coordinates: │ │
│ │ │ [Satellite ▼] │ │ Lat: [17.4435] Long: [78.3772] │ │
│ │ │ [Layers ▼] │ │ │ │
│ │ │ [Draw Tools] │ │ Boundary Status: ⚠ Partial │ │
│ │ └────────────────┘ │ │ │
│ │ │ [Draw Boundary] [Clear] │ │
│ │ 🗺️ │ │ │
│ │ Google Maps │ Calculated Area: │ │
│ │ Property Boundary │ 2,500 Sq Ft │ │
│ │ Polygon │ │ │
│ │ 📍 Property Pin │ Deductions: │ │
│ │ 📷 Photo Markers │ Road Area: [100] Sq Ft │ │
│ │ │ Nala Area: [50] Sq Ft │ │
│ │ [Zoom +/-] │ Net Area: 2,350 Sq Ft ✓ │ │
│ │ [Fullscreen] │ │ │
│ │ │ ───────────────────────────── │ │
│ │ │ Site Photos (15) │ │
│ │ │ ┌───┬───┬───┐ │ │
│ │ │ │📷 │📷 │📷 │ │ │
│ │ │ └───┴───┴───┘ │ │
│ │ │ [Upload More] [View Gallery] │ │
│ │ │ │ │
│ └────────────────────────┴────────────────────────────────────┘ │
│ │
│ [Back] [Save] [Next: Valuation] │
│ │
└──────────────────────────────────────────────────────────────────────┘
```
### Variant E: Wizard Layout
```
┌──────────────────────────────────────────────────────────────────────┐
│ CREATE NEW VALUATION │
├──────────────────────────────────────────────────────────────────────┤
│ │
│ PROGRESS STEPPER: │
│ ● ────────── ● ────────── ○ ────────── ○ ────────── ○ │
│ Basic Applicant Location Documents Review │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ STEP 2: APPLICANT DETAILS │ │
│ │ │ │
│ │ Applicant Name * │ │
│ │ [_______________________________________] │ │
│ │ │ │
│ │ Co-Applicant Name │ │
│ │ [_______________________________________] │ │
│ │ │ │
│ │ Contact Number * │ │
│ │ [+91] [__________] │ │
│ │ │ │
│ │ Email Address │ │
│ │ [_______________________________________] │ │
│ │ │ │
│ │ * Required fields │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ [← Back] [Save Draft] [Next: Location →] │
│ │
└──────────────────────────────────────────────────────────────────────┘
```
---
## 3. Mobile PWA Layout
### Mobile - Bottom Tab Navigation
```
┌─────────────────────────────┐
│ ← Back Valuation 001 │ ← Top App Bar
│ 🔔 📤 │
├─────────────────────────────┤
│ │
│ │
│ │
│ CONTENT AREA │
│ (Vertically Scrollable) │
│ │
│ │
│ │
│ │
├─────────────────────────────┤
│ 🏠 📋 ✓ 📊 👤 │ ← Bottom Tabs
│ Home Queue Approve Rep Pro │
└─────────────────────────────┘
```
### Mobile - Form View
```
┌─────────────────────────────┐
│ ← Basic Information │
├─────────────────────────────┤
│ │
│ ▼ Valuation Info │
│ Bank: [HDFC ▼] │
│ Type: ◉Plot ○IH ○Apt │
│ │
│ ▼ Applicant Details │
│ Name: [John Doe] │
│ Contact: [98765...] │
│ │
│ ▶ Location (Tap to expand) │
│ │
│ ▶ Site Characteristics │
│ │
│ │
│ │
│ │
├─────────────────────────────┤
│ [Cancel] [Save] [Next] │
└─────────────────────────────┘
```
### Mobile - Map View (Fullscreen)
```
┌─────────────────────────────┐
│ ← Map [Layers] [⋮] │
├─────────────────────────────┤
│ │
│ │
│ 🗺️ │
│ Google Maps │
│ Property Boundary │
│ Polygon │
│ │
│ 📍 Pin │
│ │
│ │
│ [Swipe up for controls ↑] │
├─────────────────────────────┤
│ Lat: 17.44 Lon: 78.37 │ ← Bottom Sheet
│ Area: 2,500 Sq Ft │ (Collapsible)
│ [Draw] [GPS] [Photos] │
└─────────────────────────────┘
```
### Mobile - Photo Gallery
```
┌─────────────────────────────┐
│ ← Photos (15) [+ Add] │
├─────────────────────────────┤
│ │
│ ┌──────┬──────┬──────┐ │
│ │ 📷 │ 📷 │ 📷 │ │
│ │ Front│ Side │ Road │ │
│ └──────┴──────┴──────┘ │
│ │
│ ┌──────┬──────┬──────┐ │
│ │ 📷 │ 📷 │ 📷 │ │
│ │ Bound│Inter│Neigh │ │
│ └──────┴──────┴──────┘ │
│ │
│ (Scroll for more) │
│ │
│ │
│ [Tap photo to view/annotate]│
│ │
├─────────────────────────────┤
│ 🏠 📋 ✓ 📊 👤 │
└─────────────────────────────┘
```
### Mobile - Approval Card
```
┌─────────────────────────────┐
│ ← Pending Approvals (12) │
├─────────────────────────────┤
│ ┌─────────────────────────┐│
│ │ VAL-2024-001 🔴 High ││
│ │ HDFC Bank • Plot ││
│ │ Hitech City, Hyderabad ││
│ │ ││
│ │ Value: ₹45,00,000 ││
│ │ Due: Tomorrow ││
│ │ ││
│ │ [View Details] ││
│ │ ││
│ │ ← Swipe for Actions → ││ ← Swipe Actions
│ └─────────────────────────┘│
│ │
│ ┌─────────────────────────┐│
│ │ VAL-2024-002 🟠 Med ││
│ │ SBI • Independent House ││
│ │ Secunderabad ││
│ │ ... (Swipe for next) ││
│ └─────────────────────────┘│
│ │
├─────────────────────────────┤
│ 🏠 📋 ✓ 📊 👤 │
└─────────────────────────────┘
```
---
## 4. Workflow Status Badge Colors
```
┌────────────────────────────────────────────────────────┐
│ Status │ Badge Color │ Icon │
├────────────────────────┼───────────────┼──────────────┤
│ Draft │ Gray │ 🟤 │
│ In Survey │ Blue │ 🔵 │
│ Submitted │ Cyan │ 🔷 │
│ In Review │ Orange │ 🟠 │
│ Query Raised │ Purple │ 🟣 │
│ In Approval │ Yellow │ 🟡 │
│ Approved │ Green │ 🟢 │
│ Rejected │ Red │ 🔴 │
└────────────────────────┴───────────────┴──────────────┘
```
---
## 5. Component Sizing Guide
### Desktop Buttons
```
┌────────────────────────┐
│ Primary Button │ Height: 40px, Padding: 16px 24px
│ bg-blue-600 │ Rounded: 6px, Font: 16px
└────────────────────────┘
┌────────────────────────┐
│ Secondary Button │ Height: 40px, Padding: 16px 24px
│ bg-gray-200 │ Rounded: 6px, Font: 16px
└────────────────────────┘
```
### Mobile Buttons (Touch Targets)
```
┌────────────────────────┐
│ │ Height: 44px (minimum)
│ Mobile Button │ Padding: 16px 24px
│ │ Rounded: 8px, Font: 16px
└────────────────────────┘
```
### Input Fields
```
Desktop:
┌─────────────────────────────────────┐
│ Input Label (14px, font-medium) │
│ ┌────────────────────────────────┐ │ Height: 40px
│ │ Input Field (16px) │ │ Border: 1px
│ └────────────────────────────────┘ │ Rounded: 6px
│ Helper text (12px, text-gray-500) │
└─────────────────────────────────────┘
Mobile:
┌─────────────────────────────────────┐
│ Input Label (14px) │
│ ┌────────────────────────────────┐ │ Height: 44px
│ │ Input Field (16px) │ │ (touch-friendly)
│ └────────────────────────────────┘ │ Rounded: 8px
│ Helper text (12px) │
└─────────────────────────────────────┘
```
### Cards/Panels
```
┌─────────────────────────────────────────────────┐
│ Card Title (20px, font-semibold) │
│ ───────────────────────────────────────────── │ Padding: 24px
│ │ Border: 1px
│ Card Content │ Rounded: 8px
│ Lorem ipsum dolor sit amet... │ Shadow: sm
│ │ Background: white
│ │
└─────────────────────────────────────────────────┘
```
---
## 6. Responsive Breakpoints
```
┌──────────────────────────────────────────────────────────────┐
│ MOBILE TABLET DESKTOP LARGE │
│ < 640px 640-1024px 1024-1280px > 1280px │
├──────────────────────────────────────────────────────────────┤
│ │
│ • 1 Column • 2 Columns • 3-4 Columns • 4+ Cols│
│ • Stacked • Side-by-side • Grid Layout • Wide │
│ • Bottom Tabs • Sidebar Option • Full Layout • Max │
│ • Full Width • 90% Width • Max 1200px • 1400px │
│ │
└──────────────────────────────────────────────────────────────┘
```
### Layout Examples by Breakpoint:
**Mobile (< 640px):**
```
┌──────────┐
│ Header │
├──────────┤
│ │
│ Card 1 │ ← Full Width
│ │
├──────────┤
│ │
│ Card 2 │ ← Full Width
│ │
├──────────┤
│ Footer │
└──────────┘
```
**Tablet (640-1024px):**
```
┌─────────────────────────┐
│ Header │
├───────────┬─────────────┤
│ │ │
│ Card 1 │ Card 2 │ ← 50-50 Split
│ │ │
├───────────┴─────────────┤
│ Footer │
└─────────────────────────┘
```
**Desktop (1024px+):**
```
┌────────────────────────────────────┐
│ Header │
├──────────┬──────────┬──────────────┤
│ │ │ │
│ Card 1 │ Card 2 │ Card 3 │ ← 33-33-33 Split
│ │ │ │
├──────────┴──────────┴──────────────┤
│ Footer │
└────────────────────────────────────┘
```
---
## 7. Navigation Hierarchy
```
LEVEL 1: Top Horizontal Tabs (Main Modules)
├─ Dashboard
├─ Valuations
│ ├─ LEVEL 2: Sub-tabs (Contextual)
│ │ ├─ All
│ │ ├─ Draft
│ │ ├─ In Survey
│ │ ├─ Submitted
│ │ ├─ In Review
│ │ └─ Approved
│ │
│ └─ LEVEL 3: Content Sections (Within page)
│ ├─ Basic Information (Accordion)
│ ├─ Property Details (Accordion)
│ ├─ Site & Map (Accordion)
│ └─ Valuation (Accordion)
│
├─ Approvals
├─ Reports
└─ Admin
```
---
## 8. User Role Access Matrix
```
┌─────────────────┬─────────┬─────────┬────────┬─────────┬─────────┬──────────┬───────┐
│ Screen/Feature │ Creator │Surveyor │ Key-in │Reviewer │Approver │Team Lead │ Admin │
├─────────────────┼─────────┼─────────┼────────┼─────────┼─────────┼──────────┼───────┤
│ Dashboard │ ✓ │ ✓ │ ✓ │ ✓ │ ✓ │ ✓ │ ✓ │
│ Create New │ ✓ │ ✗ │ ✗ │ ✗ │ ✗ │ ✓ │ ✓ │
│ Edit Draft │ ✓ │ ✗ │ ✗ │ ✗ │ ✗ │ ✓ │ ✓ │
│ Site Survey │ ✗ │ ✓ │ ✗ │ ✗ │ ✗ │ ✗ │ ✓ │
│ Data Entry │ ✗ │ ✗ │ ✓ │ ✗ │ ✗ │ ✗ │ ✓ │
│ Review │ ✗ │ ✗ │ ✗ │ ✓ │ ✗ │ ✓ │ ✓ │
│ Approve │ ✗ │ ✗ │ ✗ │ ✗ │ ✓ │ ✓ │ ✓ │
│ Reports │ ✓ │ ✓ │ ✓ │ ✓ │ ✓ │ ✓ │ ✓ │
│ User Mgmt │ ✗ │ ✗ │ ✗ │ ✗ │ ✗ │ ✗ │ ✓ │
│ Config │ ✗ │ ✗ │ ✗ │ ✗ │ ✗ │ ✗ │ ✓ │
│ Reassign │ ✗ │ ✗ │ ✗ │ ✗ │ ✗ │ ✓ │ ✓ │
│ Delete │ ✗ │ ✗ │ ✗ │ ✗ │ ✗ │ ✗ │ ✓ │
└─────────────────┴─────────┴─────────┴────────┴─────────┴─────────┴──────────┴───────┘
Shadow Login: Full access to all features (overrides all restrictions)
```
---
## 9. Workflow State Transitions
```
START
│
▼
┌─────────┐
│ DRAFT │ ◄────────────┐
└────┬────┘ │
│ Submit │
▼ │
┌──────────┐ │
┌────│ SURVEY │ │ Send Back
│ └────┬─────┘ │
│ │ Complete │
Query │ ▼ │
Raised │ ┌───────────┐ │
│ │ SUBMITTED │ │
│ └─────┬─────┘ │
│ │ Forward │
│ ▼ │
│ ┌──────────┐ │
└───►│ REVIEW │─────────────┘
└────┬─────┘
│ Approve
▼
┌──────────┐
┌────│ APPROVAL │
│ └────┬─────┘
│ │ Approve
Reject │ ▼
│ ┌──────────┐
└───►│ APPROVED │ (LOCKED)
└──────────┘
Note: From any stage (except APPROVED), can move to REJECTED
```
---
## 10. Information Group Distribution
### Field Count by Screen
```
Screen 1: Dashboard Home → ~10 fields (KPIs, filters)
Screen 2: My Work Queue → ~15 columns + filters
Screen 3: Valuation List → ~15 columns + filters
Screen 4: Create Wizard → ~20 fields (across steps)
Screen 5: Basic Information → ~40 fields
Screen 6: Property Details → ~70-90 fields (varies by type)
Screen 7: Site & Map → ~20 fields + GeoJSON + Photos
Screen 8: Valuation & Calculation → ~40-50 fields
Screen 9: Document Management → Metadata + Files
Screen 10: Photo Gallery → Metadata + Images
Screen 11: Review Queue → ~15 columns + review fields
Screen 12: Approval → ~15 columns + approval fields
Screen 13: Reports Dashboard → KPIs + Chart data
Screen 14: Custom Report Builder → ~30 configuration fields
Screen 15: User Management → ~25 user fields + permissions
Screen 16: Reference Data → ~100+ lookup values
Screen 17: Bank Configuration → ~50+ config fields per bank
Screen 18: User Profile → ~20 profile fields
TOTAL: ~300-400 fields across entire application
```
---
## 11. Key Design Decisions Summary
### ✅ Constraints Met:
- **NO Sidebar Menu** → Top horizontal tab navigation
- **NO Horizontal Scrolling** → Responsive single column on mobile, max-width on desktop
- **Progressive Disclosure** → Accordion panels, tabs, collapsible sections
- **Mobile PWA** → Bottom tab navigation, offline support, touch-friendly
### 🎨 Visual Design:
- **Color Palette**: Blue primary, Green success, Red error, Orange warning
- **Typography**: Inter font, clear hierarchy
- **Spacing**: Consistent 4px/8px/16px/24px scale
- **Components**: Material Design inspired, accessible
### 📱 Responsive Strategy:
- **Mobile**: < 640px → Single column, bottom tabs
- **Tablet**: 640-1024px → 2 columns, adaptive
- **Desktop**: > 1024px → Full layout, max 1200px content width
### 🔒 Security:
- Role-based access control
- Stage-based edit permissions
- Audit logging
- Two-factor authentication (optional)
### 🗺️ Map Integration:
- Google Maps JavaScript API
- Polygon drawing for boundaries
- Geo-tagged photos
- Offline capability (optional)
### 📄 Document Management:
- Drag-drop upload
- Version control
- Annotation tools
- Bank-specific checklists
### 🔄 Workflow:
- Draft → Survey → Submitted → Review → Approval → Approved
- Backward movement allowed (with restrictions)
- Multi-level approval (configurable by bank)
- SLA tracking with alerts
---
**END OF VISUAL LAYOUT GUIDE**