📚 Documentation

📊 📊 Stakeholder Presentations
🎨 🎨 Design & Wireframes
🗄️ 🗄️ Database Design
🏗️ 🏗️ Architecture & Specs
📦 📦 Phase Reports
# JR SOLUTIONS PROPERTY VALUATION PORTAL ## DETAILED WIREFRAME SPECIFICATIONS **Version:** 2.0 **Date:** December 2024 **Status:** Ready for Figma Implementation **Total Screens:** 18 --- ## TABLE OF CONTENTS 1. [Dashboard Screens](#1-dashboard-screens) 2. [Valuation Management Screens](#2-valuation-management-screens) 3. [Document & Evidence Screens](#3-document--evidence-screens) 4. [Review & Approval Screens](#4-review--approval-screens) 5. [Reporting & Analytics Screens](#5-reporting--analytics-screens) 6. [Administration Screens](#6-administration-screens) 7. [Profile & Settings Screens](#7-profile--settings-screens) 8. [Component Library](#8-component-library) 9. [Responsive Breakpoints](#9-responsive-breakpoints) --- ## DESIGN PRINCIPLES ### ✅ MUST HAVE - **NO Sidebar Menu** - Use top navigation only - **NO Horizontal Scrolling** - All content must fit viewport width - **Mobile-First Design** - Primary focus on mobile/tablet usability - **Progressive Web App (PWA)** - Offline capability, installable - **Touch-Friendly** - Minimum 44px touch targets - **Accessibility** - WCAG 2.1 AA compliant ### 🎨 VISUAL GUIDELINES - **Primary Color:** `#2563EB` (Blue-600) - **Secondary Color:** `#10B981` (Green-500) - **Accent Color:** `#F59E0B` (Amber-500) - **Error Color:** `#EF4444` (Red-500) - **Text Primary:** `#111827` (Gray-900) - **Text Secondary:** `#6B7280` (Gray-500) - **Background:** `#F9FAFB` (Gray-50) - **Surface:** `#FFFFFF` (White) - **Border:** `#E5E7EB` (Gray-200) ### 📏 SPACING SYSTEM - **Base Unit:** 4px - **Spacing Scale:** 4, 8, 12, 16, 24, 32, 48, 64px - **Component Padding:** 16px (mobile), 24px (desktop) - **Card Gap:** 16px - **Section Gap:** 32px ### 🔤 TYPOGRAPHY - **Heading 1:** 32px/40px, Bold (Mobile: 24px/32px) - **Heading 2:** 24px/32px, Bold (Mobile: 20px/28px) - **Heading 3:** 20px/28px, Semibold (Mobile: 18px/24px) - **Heading 4:** 18px/24px, Semibold (Mobile: 16px/24px) - **Body Large:** 16px/24px, Regular - **Body:** 14px/20px, Regular - **Caption:** 12px/16px, Regular - **Label:** 14px/20px, Medium --- ## 1. DASHBOARD SCREENS ### 1.1 ROLE-BASED DASHBOARD (Main Landing) **Screen ID:** `DASH-001` **Roles:** All (Content varies by role) **Layout Pattern:** Dashboard Grid **Mobile Priority:** High #### LAYOUT STRUCTURE ``` ┌─────────────────────────────────────────────────────────────┐ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ TOP NAVIGATION BAR [🔔] [👤] │ │ │ │ [JR Solutions Logo] [Search...] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ BREADCRUMB │ │ │ │ Dashboard │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ WELCOME HEADER │ │ │ │ Good Morning, [User Name] │ │ │ │ Today is [Date] │ │ │ │ │ │ │ │ QUICK ACTIONS ROW (Horizontal Scroll on Mobile) │ │ │ │ [+ New Valuation] [Import Data] [Reports] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ KEY METRICS - 4 CARDS (2x2 Grid on Mobile) │ │ │ │ │ │ │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │ │ │ PENDING │ │ IN PROGRESS │ │ COMPLETED │ │ │ │ │ │ 48 │ │ 127 │ │ 1,234 │ │ │ │ │ │ ↑ 12% WoW │ │ ↓ 5% WoW │ │ ↑ 8% WoW │ │ │ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │ │ │ │ │ │ │ ┌─────────────┐ │ │ │ │ │AVG TURNAROUND│ │ │ │ │ │ 3.2 Days │ │ │ │ │ │ ↓ 0.5 Days │ │ │ │ │ └─────────────┘ │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ WORKFLOW STATUS VISUALIZATION │ │ │ │ (Horizontal Bar Chart) │ │ │ │ │ │ │ │ Draft [███░░░░░░░] 30 │ │ │ │ Survey [████░░░░░░] 40 │ │ │ │ Submitted [██████░░░░] 60 │ │ │ │ Review [████░░░░░░] 45 │ │ │ │ Approval [██░░░░░░░░] 18 │ │ │ │ Approved [████████░░] 82 │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ RECENT VALUATIONS - DATA TABLE │ │ │ │ [Filter: All ▼] [Bank: All ▼] [Status: All ▼] │ │ │ │ │ │ │ │ ╔═══════════════════════════════════════════════════╗ │ │ │ │ ║ Ref No │Property │Bank │Status ║ │ │ │ │ ╟───────────┼───────────────┼────────┼───────────╢ │ │ │ │ ║ VL-2024-01│123 Main St │SBI │Review ║ │ │ │ │ ║ VL-2024-02│456 Park Ave │HDFC │Survey ║ │ │ │ │ ║ VL-2024-03│789 Lake View │ICICI │Approved ║ │ │ │ │ ╚═══════════════════════════════════════════════════╝ │ │ │ │ │ │ │ │ [View All] → │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ MY TASKS / PENDING ACTIONS │ │ │ │ │ │ │ │ • 12 Valuations require your review │ │ │ │ • 5 Site surveys scheduled for this week │ │ │ │ • 3 Documents pending upload │ │ │ │ │ │ │ │ [View All Tasks] → │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ FOOTER NAVIGATION (Mobile Only) │ │ │ │ [🏠 Dashboard] [📋 List] [➕ New] [📊 Reports] [⚙️] │ │ │ └─────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` #### COMPONENT SPECIFICATIONS **1. Top Navigation Bar** - Height: 64px (Desktop), 56px (Mobile) - Background: White (#FFFFFF) - Box Shadow: 0 1px 3px rgba(0,0,0,0.1) - Logo: Max height 40px - Search: Full-width on mobile, 320px on desktop - Icons: 24px, Gray-600, Active: Blue-600 - Notification Badge: Red dot indicator **2. Welcome Header** - Background: Linear gradient (Blue-600 to Blue-700) - Text Color: White - Padding: 24px (Desktop), 16px (Mobile) - Border Radius: 8px - Margin Bottom: 24px **3. Quick Actions Row** - Layout: Horizontal scroll on mobile, flex row on desktop - Button Style: Primary (Blue-600), Height 44px - Icon + Text, Bold, White text - Gap: 12px - Padding: 8px horizontal scroll padding **4. Key Metrics Cards** - Background: White - Border: 1px solid Gray-200 - Border Radius: 8px - Padding: 20px - Min Height: 120px - Shadow: 0 1px 2px rgba(0,0,0,0.05) - Number: 32px, Bold, Gray-900 - Label: 14px, Medium, Gray-600 - Trend: 12px, Green/Red with arrow icon - Grid: 2x2 on mobile, 4x1 on desktop **5. Workflow Status Visualization** - Background: White card - Bar Height: 32px - Bar Colors: Status-specific (Draft: Gray, Survey: Blue, etc.) - Label Position: Left-aligned - Count Position: Right-aligned - Gap: 8px between bars **6. Recent Valuations Table** - Background: White card - Border: 1px solid Gray-200 - Header: Gray-50 background, Bold text - Row Height: 56px - Hover: Gray-50 background - Mobile: Stack columns, show only key fields **7. My Tasks Panel** - Background: Amber-50 (light warning color) - Border Left: 4px solid Amber-500 - Padding: 16px - Icon: Warning/Info icon - List Style: Bullet points with counts #### RESPONSIVE BEHAVIOR **Desktop (≥1024px)** - Full dashboard layout - 4-column metrics grid - Full table with all columns - Side-by-side panels **Tablet (768px - 1023px)** - 2-column metrics grid - Condensed table columns - Stacked panels **Mobile (≤767px)** - Single column layout - Horizontal scroll metrics - Card-based list view instead of table - Bottom navigation bar visible - Reduced heading sizes #### INTERACTIONS 1. **Metric Card Click:** Navigate to filtered list view 2. **Workflow Bar Click:** Filter by status 3. **Table Row Click:** Open valuation detail 4. **Quick Action Buttons:** Modal or navigation 5. **Notification Icon:** Dropdown panel 6. **Profile Icon:** User menu dropdown 7. **Search:** Type-ahead results dropdown #### DATA REQUIREMENTS - User profile (name, role, photo) - Metrics (real-time counts, trends) - Recent valuations (last 10-20 records) - Pending tasks (user-specific) - Notifications (unread count) - Workflow status distribution --- ### 1.2 ANALYTICS DASHBOARD (Optional) **Screen ID:** `DASH-002` **Roles:** Team Lead, Admin **Layout Pattern:** Dashboard Grid **Mobile Priority:** Medium #### LAYOUT STRUCTURE ``` ┌─────────────────────────────────────────────────────────────┐ │ TOP NAVIGATION BAR │ └─────────────────────────────────────────────────────────────┘ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ PAGE HEADER │ │ │ │ Analytics & Performance │ │ │ │ [Date Range Picker: Last 30 Days ▼] [Export Report] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ PERFORMANCE METRICS - 5 CARDS │ │ │ │ (Horizontal scroll on mobile) │ │ │ │ │ │ │ │ [Total Cases] [Avg Time] [Accuracy%] [Productivity] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌────────────────────────────────┬────────────────────────┐ │ │ │ TREND CHART (60% width) │ BANK DISTRIBUTION (40%)│ │ │ │ (Line/Area chart showing │ (Pie/Donut chart) │ │ │ │ daily/weekly volumes) │ │ │ │ │ │ │ │ │ └────────────────────────────────┴────────────────────────┘ │ │ │ │ ┌────────────────────────────────┬────────────────────────┐ │ │ │ TOP PERFORMERS (50%) │ PROPERTY TYPE MIX (50%)│ │ │ │ (Leaderboard list) │ (Horizontal bars) │ │ │ │ │ │ │ │ └────────────────────────────────┴────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ TURNAROUND TIME BY STAGE │ │ │ │ (Funnel chart or timeline) │ │ │ └─────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` #### COMPONENT SPECIFICATIONS **Date Range Picker** - Preset Ranges: Today, Last 7 Days, Last 30 Days, Last Quarter, Custom - Calendar: Date range selection - Position: Dropdown below button - Width: 320px **Charts** - Library: Chart.js or Recharts - Colors: Brand color palette - Tooltips: On hover, show exact values - Responsive: Scale to container width - Legend: Bottom position - Grid: Light gray, subtle **Performance Cards** - Same style as dashboard metrics - Include sparkline mini-charts - Show trend direction - Compare to previous period **Leaderboard** - Rank number (1-10) - User photo + name - Count/score - Progress bar - Highlight top 3 with badge --- ## 2. VALUATION MANAGEMENT SCREENS ### 2.1 VALUATION LIST VIEW **Screen ID:** `VAL-001` **Roles:** All **Layout Pattern:** List + Filter **Mobile Priority:** Critical #### LAYOUT STRUCTURE ``` ┌─────────────────────────────────────────────────────────────┐ │ TOP NAVIGATION BAR │ └─────────────────────────────────────────────────────────────┘ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ PAGE HEADER │ │ │ │ Valuation List (234) [+ New Valuation]│ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ SEARCH & FILTERS BAR │ │ │ │ [🔍 Search by ref, property, applicant...] │ │ │ │ [🔽 Filter] [Bank ▼] [Status ▼] [Date ▼] [Clear All] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ ACTIVE FILTERS (Chips) │ │ │ │ [Bank: HDFC ×] [Status: Review ×] [Date: Last 30 Days ×]│ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ BULK ACTIONS BAR (When items selected) │ │ │ │ [✓ 5 selected] [Assign] [Export] [Delete] [Clear] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ LIST VIEW / TABLE │ │ │ │ [View: List ● | Grid ○] [Sort: Recent ▼] [Cols ⚙] │ │ │ │ │ │ │ │ ╔════════════════════════════════════════════════════╗ │ │ │ │ ║ [☐] │Ref No │Property │Bank │Status │...║ │ │ │ │ ╟────┼──────────┼─────────────┼─────┼───────────┼───╢ │ │ │ │ ║ [☐] │VL-001 │123 Main St │SBI │ Review │...║ │ │ │ │ ║ [☐] │VL-002 │456 Park Ave │HDFC │ Survey │...║ │ │ │ │ ║ [☐] │VL-003 │789 Lake Rd │ICICI│ Approved │...║ │ │ │ │ ╚════════════════════════════════════════════════════╝ │ │ │ │ │ │ │ │ [← Prev] [Page 1 of 12] [Next →] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ FOOTER NAVIGATION (Mobile) │ └─────────────────────────────────────────────────────────────┘ ``` #### MOBILE CARD VIEW (Alternative to Table) ``` ┌─────────────────────────────────────┐ │ ┌─────────────────────────────────┐ │ │ │ VL-2024-001 [●●●] │ │ (Kebab menu) │ │ 123 Main Street, Hyderabad │ │ │ │ │ │ │ │ 🏦 SBI Bank │ │ │ │ 📍 Residential - Apartment │ │ │ │ 📅 15 Dec 2024 │ │ │ │ │ │ │ │ [Status: In Review 🟡] │ │ │ │ │ │ │ │ Assigned: John Doe │ │ │ │ Value: ₹45,00,000 │ │ │ │ │ │ │ │ [View Details →] │ │ │ └─────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────┐ │ │ │ VL-2024-002 [●●●] │ │ │ │ ... │ │ │ └─────────────────────────────────┘ │ └─────────────────────────────────────┘ ``` #### COMPONENT SPECIFICATIONS **Search Bar** - Full width on mobile, 400px on desktop - Icon: Left-aligned magnifying glass - Placeholder: "Search by ref, property, applicant..." - Debounce: 300ms - Clear button: Show when text entered **Filter Button** - Opens filter panel/drawer - Badge: Show count of active filters - Mobile: Bottom sheet - Desktop: Dropdown panel **Filter Chips** - Style: Rounded pill, Gray-100 background - Close icon: X button - Hover: Gray-200 - Animation: Fade in/out **Table/List Toggle** - Radio button style - Icons: List/Grid - Mobile default: Card view - Desktop default: Table view **Status Badge** - Rounded pill shape - Color coded: - Draft: Gray - Survey: Blue - Submitted: Indigo - Review: Yellow - Approval: Orange - Approved: Green - Rejected: Red - Icon + Text **Bulk Action Bar** - Fixed position when items selected - Background: Blue-50 - Border: Blue-200 - Actions: Icon + Text buttons - Clear selection: Close icon **Pagination** - Desktop: Previous | Page X of Y | Next - Mobile: Load More button (infinite scroll optional) - Page size: 20 items default, configurable #### RESPONSIVE BEHAVIOR **Desktop** - Full table with all columns - Horizontal column selector - Hover effects on rows - Checkbox column visible **Mobile** - Card-based list - Swipe actions (delete, assign) - Pull to refresh - Infinite scroll or Load More - Bottom sheet filters #### INTERACTIONS 1. **Row/Card Click:** Navigate to detail view 2. **Checkbox Select:** Enable bulk actions 3. **Status Badge Click:** Filter by status 4. **Filter Dropdown:** Multi-select with Apply/Clear 5. **Sort Dropdown:** Change sort order 6. **Kebab Menu:** Quick actions (Edit, Delete, Assign) 7. **Search:** Real-time filtering 8. **Pull Down:** Refresh list (mobile) --- ### 2.2 CREATE/EDIT VALUATION FORM **Screen ID:** `VAL-002` **Roles:** Creator, Team Lead, Admin **Layout Pattern:** Multi-Step Form **Mobile Priority:** Critical #### LAYOUT STRUCTURE ``` ┌─────────────────────────────────────────────────────────────┐ │ TOP NAVIGATION BAR [Save] [Cancel] │ └─────────────────────────────────────────────────────────────┘ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ PAGE HEADER │ │ │ │ Create New Valuation │ │ │ │ Save as draft at any time │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ PROGRESS STEPPER (Non-linear, all accessible) │ │ │ │ ① Basic ─ ② Names ─ ③ Location ─ ④ Property ─ ⑤ Valuation│ │ │ │ Info Info & Site Details & Abstract │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ FORM CONTENT AREA (Scrollable) │ │ │ │ │ │ │ │ ┌───────────────────────────────────────────────────┐ │ │ │ │ │ SECTION: Basic Information │ │ │ │ │ │ │ │ │ │ │ │ Bank Selection * │ │ │ │ │ │ [Select Bank ▼] │ │ │ │ │ │ │ │ │ │ │ │ ┌─────────────────────┬─────────────────────┐ │ │ │ │ │ │ │ Reference Number │ Application Date │ │ │ │ │ │ │ │ [VL-2024-AUTO] │ [15 Dec 2024] │ │ │ │ │ │ │ └─────────────────────┴─────────────────────┘ │ │ │ │ │ │ │ │ │ │ │ │ Property Type * │ │ │ │ │ │ ┌─────────┬─────────┬─────────┬─────────┐ │ │ │ │ │ │ │[○] Resi │[●] Comm │[○] Agri │[○] Indus│ │ │ │ │ │ │ └─────────┴─────────┴─────────┴─────────┘ │ │ │ │ │ │ │ │ │ │ │ │ Sub Type * │ │ │ │ │ │ [Select Sub Type ▼] │ │ │ │ │ │ (Options: Apartment, Villa, Plot, etc.) │ │ │ │ │ │ │ │ │ │ │ │ Purpose │ │ │ │ │ │ [Select Purpose ▼] │ │ │ │ │ │ │ │ │ │ │ └───────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌───────────────────────────────────────────────────┐ │ │ │ │ │ SECTION: Names & Parties │ │ │ │ │ │ │ │ │ │ │ │ Applicant Name * │ │ │ │ │ │ [Enter full name] │ │ │ │ │ │ │ │ │ │ │ │ Contact Details │ │ │ │ │ │ ┌─────────────────────┬─────────────────────┐ │ │ │ │ │ │ │ Mobile Number │ Email Address │ │ │ │ │ │ │ │ [+91 __________] │ [email@example.com] │ │ │ │ │ │ │ └─────────────────────┴─────────────────────┘ │ │ │ │ │ │ │ │ │ │ │ │ Owner Name(s) │ │ │ │ │ │ [Enter owner name] │ │ │ │ │ │ [+ Add Another Owner] │ │ │ │ │ │ │ │ │ │ │ │ Legal Heir / Relationship (if applicable) │ │ │ │ │ │ [Enter details] │ │ │ │ │ └───────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ [Continue to Location & Site →] │ │ │ │ [← Previous] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ FLOATING ACTION BUTTONS (Mobile) │ │ │ │ [💾 Save Draft] [Next →] │ │ │ └─────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` #### STEP 3: LOCATION & SITE (Example) ``` ┌─────────────────────────────────────────────────────────────┐ │ STEP 3: Location & Site │ │ │ │ ┌───────────────────────────────────────────────────────┐ │ │ │ SECTION: Property Address │ │ │ │ │ │ │ │ Door/Plot Number │ │ │ │ [Enter number] │ │ │ │ │ │ │ │ Street/Road Name │ │ │ │ [Enter street name] │ │ │ │ │ │ │ │ Locality/Area │ │ │ │ [Enter locality] │ │ │ │ │ │ │ │ City/Village * │ │ │ │ [Enter city] │ │ │ │ │ │ │ │ ┌─────────────────────┬─────────────────────┐ │ │ │ │ │ District * │ State * │ │ │ │ │ │ [Hyderabad ▼] │ [Telangana ▼] │ │ │ │ │ └─────────────────────┴─────────────────────┘ │ │ │ │ │ │ │ │ PIN Code │ │ │ │ [______] │ │ │ └───────────────────────────────────────────────────────┘ │ │ │ │ ┌───────────────────────────────────────────────────────┐ │ │ │ SECTION: Map & Geolocation │ │ │ │ │ │ │ │ ┌─────────────────────────────────────────────────┐ │ │ │ │ │ │ │ │ │ │ │ [GOOGLE MAPS EMBED] │ │ │ │ │ │ Height: 300px │ │ │ │ │ │ [📍 Marker on property location] │ │ │ │ │ │ │ │ │ │ │ │ [Search Location] │ │ │ │ │ │ [📍 Use Current Location] │ │ │ │ │ │ [✏️ Edit Marker Position] │ │ │ │ │ └─────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌─────────────────────┬─────────────────────┐ │ │ │ │ │ Latitude │ Longitude │ │ │ │ │ │ [17.4065] │ [78.4772] │ │ │ │ │ └─────────────────────┴─────────────────────┘ │ │ │ │ │ │ │ │ Location Accuracy: [●●●●○] Good │ │ │ └───────────────────────────────────────────────────────┘ │ │ │ │ ┌───────────────────────────────────────────────────────┐ │ │ │ SECTION: Site Characteristics │ │ │ │ │ │ │ │ Shape of Site │ │ │ │ [Select shape ▼] │ │ │ │ │ │ │ │ ┌─────────────────────┬─────────────────────┐ │ │ │ │ │ Road Width (ft) │ No. of Roads │ │ │ │ │ │ [___] │ [1 ▼] │ │ │ │ │ └─────────────────────┴─────────────────────┘ │ │ │ │ │ │ │ │ Boundaries │ │ │ │ North: [Description] │ │ │ │ South: [Description] │ │ │ │ East: [Description] │ │ │ │ West: [Description] │ │ │ │ │ │ │ │ Terrain / Topography │ │ │ │ [Select ▼] │ │ │ └───────────────────────────────────────────────────────┘ │ │ │ │ [← Previous] [Continue to Property Details →] │ └─────────────────────────────────────────────────────────────┘ ``` #### COMPONENT SPECIFICATIONS **Progress Stepper** - Style: Horizontal dots/circles with connecting lines - States: Completed (Blue), Current (Blue + Bold), Pending (Gray) - Mobile: Smaller text, horizontal scroll if needed - Click: Navigate to any step (non-linear) **Form Sections** - Background: White cards - Border: 1px solid Gray-200 - Border Radius: 8px - Padding: 24px - Margin Between: 16px - Section Header: 18px Bold, Gray-900 **Input Fields** - Height: 44px (touch-friendly) - Border: 1px solid Gray-300 - Border Radius: 6px - Padding: 12px - Focus: Blue-600 border, subtle shadow - Error: Red-500 border - Success: Green-500 border - Helper Text: 12px, Gray-600, below input - Error Text: 12px, Red-500, below input **Dropdown Selects** - Native select on mobile (better UX) - Custom dropdown on desktop - Search: Enabled for long lists (>10 items) - Multi-select: Checkboxes with chips **Radio Button Groups (Property Type)** - Layout: Horizontal row on desktop, 2x2 grid on mobile - Card Style: Border with hover effect - Selected: Blue border, Blue background (subtle) - Icon + Text - Min Width: 100px **Map Component** - Height: 300px (desktop), 200px (mobile) - Controls: Zoom, Search, Current Location - Marker: Draggable - Autocomplete: Google Places API - Offline: Show static map image **Action Buttons** - Primary: Blue-600, White text - Secondary: White, Gray-600 border - Height: 44px - Full width on mobile - Fixed bottom bar on mobile **Save Draft Indicator** - Auto-save every 30 seconds - Visual feedback: "Saving..." → "Saved ✓" - Toast notification for manual save #### FORM VALIDATION **Required Fields (*)** - Visual: Red asterisk - Validation: On blur or submit - Error Message: Inline below field - Scroll to first error on submit **Field Types** - Text: Max length, alphanumeric - Number: Min/max, decimals - Phone: +91 format, 10 digits - Email: Valid email format - Date: Date picker, past dates only - Currency: Rupee symbol, comma separated **Conditional Fields** - Show/hide based on selections - Example: Property type → Sub type options - Example: Bank → Bank-specific fields - Smooth transition animation #### DATA SAVING **Auto-Save** - Trigger: Every 30 seconds - Trigger: On field blur - Status: Draft - Indicator: Visual feedback **Manual Save** - Button: "Save Draft" - Status: Draft - Redirect: Optional (stay on form or go to list) **Submit** - Button: "Submit for Review" or role-specific action - Validation: All required fields - Status: Changes to next workflow stage - Redirect: Detail view or list --- ### 2.3 VALUATION DETAIL VIEW **Screen ID:** `VAL-003` **Roles:** All (Read-only for some) **Layout Pattern:** Tabs + Panels **Mobile Priority:** High #### LAYOUT STRUCTURE ``` ┌─────────────────────────────────────────────────────────────┐ │ TOP NAVIGATION BAR [Edit] [Share] │ └─────────────────────────────────────────────────────────────┘ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ BREADCRUMB │ │ │ │ Dashboard > Valuations > VL-2024-001 │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ HEADER CARD - Property Overview │ │ │ │ │ │ │ │ VL-2024-001 [Status: Review] │ │ │ │ 123 Main Street, Hyderabad, Telangana │ │ │ │ │ │ │ │ ┌───────────────┬────────────────┬───────────────┐ │ │ │ │ │ Bank: SBI │ Type: Resi-Apt │ Value: ₹45L │ │ │ │ │ └───────────────┴────────────────┴───────────────┘ │ │ │ │ │ │ │ │ Applicant: Mr. Rajesh Kumar │ │ │ │ Created: 10 Dec 2024 | Last Updated: 15 Dec 2024 │ │ │ │ Assigned: John Doe (Surveyor) │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ WORKFLOW PROGRESS BAR │ │ │ │ Draft ──✓── Survey ──✓── Submitted ──●── Review ─────► │ │ │ │ (Current) │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ TAB NAVIGATION (Horizontal scroll on mobile) │ │ │ │ [Overview ●] [Details] [Documents] [Activity] [Maps] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ TAB CONTENT AREA (Scrollable) │ │ │ │ │ │ │ │ ┌───────────────────────────────────────────────────┐ │ │ │ │ │ SECTION: Basic Information │ │ │ │ │ │ │ │ │ │ │ │ Reference Number: VL-2024-001 │ │ │ │ │ │ Application Date: 10 Dec 2024 │ │ │ │ │ │ Bank: State Bank of India │ │ │ │ │ │ Property Type: Residential - Apartment │ │ │ │ │ │ Purpose: Home Loan │ │ │ │ │ └───────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌───────────────────────────────────────────────────┐ │ │ │ │ │ SECTION: Names & Parties │ │ │ │ │ │ │ │ │ │ │ │ Applicant Name: Mr. Rajesh Kumar │ │ │ │ │ │ Contact: +91 98765 43210 │ │ │ │ │ │ Email: rajesh@example.com │ │ │ │ │ │ Owner Name: Mrs. Lakshmi Kumar │ │ │ │ │ └───────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌───────────────────────────────────────────────────┐ │ │ │ │ │ SECTION: Property Address │ │ │ │ │ │ │ │ │ │ │ │ Door No: 12-3-456/78 │ │ │ │ │ │ Street: MG Road │ │ │ │ │ │ Locality: Banjara Hills │ │ │ │ │ │ City: Hyderabad │ │ │ │ │ │ District: Hyderabad │ │ │ │ │ │ State: Telangana │ │ │ │ │ │ PIN Code: 500034 │ │ │ │ │ └───────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌───────────────────────────────────────────────────┐ │ │ │ │ │ SECTION: Site Characteristics │ │ │ │ │ │ │ │ │ │ │ │ Shape: Regular │ │ │ │ │ │ Road Width: 40 feet │ │ │ │ │ │ No. of Roads: 2 │ │ │ │ │ │ Boundaries: │ │ │ │ │ │ North: Open plot │ │ │ │ │ │ South: Road │ │ │ │ │ │ East: Residential building │ │ │ │ │ │ West: Road │ │ │ │ │ └───────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ [Show More Sections ▼] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ ACTION BAR (Context-sensitive based on role & status) │ │ │ │ [✏️ Edit] [📤 Send to Review] [💬 Add Comment] [⋯ More]│ │ │ └─────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` #### DOCUMENTS TAB ``` ┌─────────────────────────────────────────────────────────────┐ │ TAB: Documents [Upload Files] │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ DOCUMENT CATEGORIES │ │ │ │ [All ●] [Photos] [PDFs] [Certificates] [Others] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ PHOTOS GRID (if Photos category selected) │ │ │ │ │ │ │ │ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │ │ │ │ │[IMG]│ │[IMG]│ │[IMG]│ │[IMG]│ │ │ │ │ │ 1 │ │ 2 │ │ 3 │ │ 4 │ │ │ │ │ └─────┘ └─────┘ └─────┘ └─────┘ │ │ │ │ │ │ │ │ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │ │ │ │ │[IMG]│ │[IMG]│ │[IMG]│ │[+] │ │ │ │ │ │ 5 │ │ 6 │ │ 7 │ │Add │ │ │ │ │ └─────┘ └─────┘ └─────┘ └─────┘ │ │ │ │ │ │ │ │ [View All 24 Photos] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ DOCUMENT LIST │ │ │ │ │ │ │ │ ┌─────────────────────────────────────────────────┐ │ │ │ │ │ 📄 Sale Deed.pdf [View] [⋯] │ │ │ │ │ │ Uploaded by John Doe on 12 Dec 2024 │ │ │ │ │ │ 2.4 MB │ │ │ │ │ └─────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌─────────────────────────────────────────────────┐ │ │ │ │ │ 📄 Encumbrance Certificate.pdf [View] [⋯] │ │ │ │ │ │ Uploaded by Admin on 13 Dec 2024 │ │ │ │ │ │ 1.8 MB │ │ │ │ │ └─────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ [Show All 12 Documents] │ │ │ └─────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` #### ACTIVITY TAB ``` ┌─────────────────────────────────────────────────────────────┐ │ TAB: Activity & Comments [Add Comment] │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ TIMELINE (Vertical) │ │ │ │ │ │ │ │ ● 15 Dec 2024, 3:45 PM │ │ │ │ John Doe moved to Review stage │ │ │ │ Comment: "Survey completed, all details verified." │ │ │ │ │ │ │ │ ● 13 Dec 2024, 11:20 AM │ │ │ │ Jane Smith uploaded 12 photos │ │ │ │ [View Photos] │ │ │ │ │ │ │ │ ● 12 Dec 2024, 2:30 PM │ │ │ │ John Doe started survey │ │ │ │ │ │ │ │ ● 10 Dec 2024, 10:00 AM │ │ │ │ System assigned to John Doe │ │ │ │ │ │ │ │ ● 10 Dec 2024, 9:45 AM │ │ │ │ Admin created valuation VL-2024-001 │ │ │ │ │ │ │ │ [Load Earlier Activity...] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ COMMENT INPUT │ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ │ │ Add a comment... │ │ │ │ │ │ │ │ │ │ │ │ [📎 Attach] [😊 Emoji] │ │ │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ [Cancel] [Post Comment] │ │ │ └─────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` #### COMPONENT SPECIFICATIONS **Header Card** - Background: White - Border: 1px solid Gray-200 - Padding: 24px - Shadow: Subtle - Responsive: Stack on mobile **Quick Stats Row** - 3 cards in row (desktop) - Stack on mobile - Icon + Label + Value - Color coded icons **Status Badge** (Large variant) - Height: 36px - Font: 14px Bold - Rounded: 18px - Color coded with icon **Workflow Progress Bar** - Horizontal timeline - Checkmark for completed - Dot for current - Gray for pending - Connecting lines - Mobile: Horizontal scroll or vertical **Tab Navigation** - Underline style (not pills) - Active: Blue-600 underline, Bold - Inactive: Gray-600, Regular - Mobile: Horizontal scroll - Sticky: On scroll **Section Cards** - Background: White - Border: 1px solid Gray-200 - Padding: 20px - Margin: 16px between - Collapsible: Optional **Label-Value Pairs** - Layout: 2-column grid (desktop), stack (mobile) - Label: 14px Medium, Gray-600 - Value: 14px Regular, Gray-900 - Gap: 8px vertical **Photo Grid** - Grid: 4 columns (desktop), 2 columns (mobile) - Aspect Ratio: 1:1 - Gap: 12px - Hover: Overlay with actions - Click: Lightbox viewer **Document List Items** - Background: Gray-50 - Border: 1px solid Gray-200 - Padding: 16px - Icon: File type specific - Actions: View, Download, Delete **Timeline** - Vertical layout - Dot + Line connector - Timestamp: 12px, Gray-600 - Event: 14px, Gray-900 - Comment: 14px, Gray-700, Italic - Attachments: Preview thumbnails **Action Bar** - Fixed bottom on mobile - Inline on desktop - Context-sensitive buttons - Primary + Secondary actions - Overflow menu for more actions #### RESPONSIVE BEHAVIOR **Desktop** - Full layout with all sections visible - Tabs inline - Side-by-side panels - Hover effects **Mobile** - Stacked layout - Tabs horizontal scroll - Bottom action bar - Pull to refresh - Swipe gestures #### ROLE-BASED VISIBILITY **Creator** - Can edit (if in Draft) - Can submit for review - Full access to own records **Surveyor** - Can edit survey data - Can upload documents - Can add comments **Reviewer/Approver** - Read-only data - Can approve/reject/send back - Can add comments **Admin** - Full access - Can reassign - Can override --- ## 3. DOCUMENT & EVIDENCE SCREENS ### 3.1 DOCUMENT UPLOAD & MANAGEMENT **Screen ID:** `DOC-001` **Roles:** Creator, Surveyor, Key-in **Layout Pattern:** Grid + Upload **Mobile Priority:** Critical (Camera integration) #### LAYOUT STRUCTURE ``` ┌─────────────────────────────────────────────────────────────┐ │ TOP NAVIGATION BAR │ └─────────────────────────────────────────────────────────────┘ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ PAGE HEADER │ │ │ │ Documents - VL-2024-001 [Upload Files] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ UPLOAD ZONE (Drag & Drop) │ │ │ │ │ │ │ │ 📤 │ │ │ │ Drag files here or click to browse │ │ │ │ Supports: JPG, PNG, PDF, DOC (Max 10MB each) │ │ │ │ │ │ │ │ [📷 Take Photo] [📁 Browse Files] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ QUICK FILTERS │ │ │ │ [All ●] [Photos] [PDFs] [Certificates] [Recent] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ DOCUMENTS BY CATEGORY │ │ │ │ │ │ │ │ ┌───────────────────────────────────────────────────┐ │ │ │ │ │ PROPERTY PHOTOS (24) [View All] │ │ │ │ │ │ │ │ │ │ │ │ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │ │ │ │ │ │ │[IMG]│ │[IMG]│ │[IMG]│ │[IMG]│ │[+12]│ │ │ │ │ │ │ │Front│ │Back │ │Side │ │Inter│ │More │ │ │ │ │ │ │ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ │ │ │ │ │ │ │ │ │ │ │ │ [Upload More Photos] │ │ │ │ │ └───────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌───────────────────────────────────────────────────┐ │ │ │ │ │ LEGAL DOCUMENTS (5) [View All] │ │ │ │ │ │ │ │ │ │ │ │ ┌───────────────────────────────────────────┐ │ │ │ │ │ │ │ 📄 Sale Deed.pdf [View] [⋯] │ │ │ │ │ │ │ │ 2.4 MB • 12 Dec 2024 • John Doe │ │ │ │ │ │ │ └───────────────────────────────────────────┘ │ │ │ │ │ │ │ │ │ │ │ │ ┌───────────────────────────────────────────┐ │ │ │ │ │ │ │ 📄 Encumbrance Certificate.pdf [View] [⋯]│ │ │ │ │ │ │ │ 1.8 MB • 13 Dec 2024 • Admin │ │ │ │ │ │ │ └───────────────────────────────────────────┘ │ │ │ │ │ │ │ │ │ │ │ │ [+ Add Legal Document] │ │ │ │ │ └───────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌───────────────────────────────────────────────────┐ │ │ │ │ │ CERTIFICATES (3) [View All] │ │ │ │ │ │ ... (Similar structure) │ │ │ │ │ └───────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` #### MOBILE CAMERA INTEGRATION ``` ┌─────────────────────────────────────┐ │ 📷 CAMERA MODE │ │ │ │ ┌─────────────────────────────────┐ │ │ │ │ │ │ │ [CAMERA VIEWFINDER] │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ [Grid Overlay] │ │ │ │ │ │ │ │ │ │ │ └─────────────────────────────────┘ │ │ │ │ Document Type: [Property Photo ▼] │ │ Description: [Front View ] │ │ │ │ [🔄] [⚡] [◉] [HDR] [🔲] │ │ Flip Flash Capture Grid Cancel │ │ │ │ Photos: 8/20 | Location: ON ✓ │ └─────────────────────────────────────┘ ``` #### PHOTO VIEWER / LIGHTBOX ``` ┌─────────────────────────────────────────────────────────────┐ │ [×] [Share] │ │ │ │ │ │ ┌─────────────────────────────┐ │ │ │ │ │ │ │ │ │ │ │ │ │ │ [←] │ PHOTO IMAGE │ [→] │ │ │ │ │ │ │ │ │ │ │ │ │ │ └─────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────┐ │ │ │ Front View of Property │ │ │ │ 📷 Captured on 13 Dec 2024, 2:30 PM by John Doe │ │ │ │ 📍 Location: 17.4065, 78.4772 │ │ │ │ │ │ │ │ [✏️ Edit] [💬 Comment] [🗑️ Delete] [⬇ Download] │ │ │ └──────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────┐ │ │ │ THUMBNAIL STRIP (Horizontal scroll) │ │ │ │ [▢] [▢] [▪] [▢] [▢] [▢] [▢] ... │ │ │ │ ↑ Current │ │ │ └──────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` #### COMPONENT SPECIFICATIONS **Upload Zone** - Background: Gray-50 with dashed border - Hover: Blue-50 background - Drag Over: Blue-100 background - Height: 200px (desktop), 150px (mobile) - Icon: 48px - Text: 14px, Gray-600 - Buttons: Primary (Camera), Secondary (Browse) **Mobile Camera Button** - Opens native camera - Capture multiple photos in sequence - Auto-tag with location - Auto-tag with timestamp - Preview before saving **Photo Grid** - Grid: 4 columns (desktop), 3 columns (tablet), 2 columns (mobile) - Aspect Ratio: 1:1 (square thumbnails) - Gap: 12px - Border: 1px solid Gray-200 - Hover: Overlay with actions (Edit, Delete, View) - Selected: Blue border **Document Card** - Background: White - Border: 1px solid Gray-200 - Padding: 16px - Icon: File type specific (PDF, DOC, JPG) - Size: 48px icon - File Info: Name, Size, Date, Uploader - Actions: View, Download, Delete (icon buttons) **Category Sections** - Collapsible accordion style - Header: Category name + count - Expand/Collapse: Chevron icon - Default: All expanded **Upload Progress** - Progress bar: Blue-600 - Percentage: Center-aligned - Cancel button: X icon - Success: Green checkmark - Error: Red X with retry button **Lightbox Viewer** - Full screen overlay - Background: Black 90% opacity - Image: Centered, max width/height - Controls: Previous, Next, Close, Download - Zoom: Pinch to zoom (mobile), Scroll wheel (desktop) - Swipe: Left/right to navigate (mobile) - Thumbnails: Bottom strip, horizontal scroll #### FILE VALIDATION **Allowed Types** - Images: JPG, JPEG, PNG, HEIC - Documents: PDF, DOC, DOCX - Max Size: 10MB per file - Max Files: 50 per upload **Error Messages** - File too large: "File exceeds 10MB limit" - Invalid type: "File type not supported" - Upload failed: "Upload failed, please retry" #### METADATA CAPTURE **Photos** - Auto-capture: GPS coordinates - Auto-capture: Timestamp - User input: Description/title - User input: Category/tag - EXIF data: Camera model, settings **Documents** - User input: Document type (dropdown) - User input: Description - Auto-capture: Upload date, Uploader name - File metadata: Size, type, name --- ### 3.2 MAP & GEOLOCATION VIEW **Screen ID:** `MAP-001` **Roles:** All (Surveyor primary) **Layout Pattern:** Full-Screen Map **Mobile Priority:** Critical #### LAYOUT STRUCTURE ``` ┌─────────────────────────────────────────────────────────────┐ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ MINI HEADER (Floating) [🔙] [🔍] [⚙️] │ │ │ │ VL-2024-001 - Map View │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ │ │ │ │ │ │ │ │ FULL-SCREEN MAP │ │ │ │ (Google Maps Embed) │ │ │ │ │ │ │ │ [📍 Property Marker] │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ BOTTOM SHEET (Draggable) [Handle ≡] │ │ │ │ │ │ │ │ 123 Main Street, Hyderabad │ │ │ │ Lat: 17.4065, Lon: 78.4772 │ │ │ │ Accuracy: ●●●●○ Good │ │ │ │ │ │ │ │ [📍 Update Location] [🧭 Directions] [📸 Street View] │ │ │ │ │ │ │ │ ┌───────────────────────────────────────────────────┐ │ │ │ │ │ NEARBY LANDMARKS │ │ │ │ │ │ • Metro Station (0.5 km) │ │ │ │ │ │ • School (1.2 km) │ │ │ │ │ │ • Hospital (2.3 km) │ │ │ │ │ └───────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ [View Full Details] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ MAP CONTROLS (Floating, Right Side) │ │ │ │ [+] Zoom In │ │ │ │ [−] Zoom Out │ │ │ │ [⊙] My Location │ │ │ │ [⛰] Terrain │ │ │ │ [🛰] Satellite │ │ │ └─────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` #### EDIT LOCATION MODE ``` ┌─────────────────────────────────────────────────────────────┐ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ EDIT MODE HEADER [Cancel] [Save] │ │ │ │ Drag marker to adjust location │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ │ │ │ │ FULL-SCREEN MAP │ │ │ │ │ │ │ │ [📍 Draggable Marker] │ │ │ │ (with crosshair) │ │ │ │ │ │ │ │ │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ LOCATION INFO (Floating, Bottom) │ │ │ │ Lat: 17.4065 Lon: 78.4772 Accuracy: High │ │ │ │ [Use Current Location] [Search Address] │ │ │ └─────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` #### COMPONENT SPECIFICATIONS **Map Container** - Height: 100vh - header height - Background: Gray-200 (loading state) - API: Google Maps JavaScript API - Zoom Level: 16 (default) - Map Type: Roadmap (default) **Property Marker** - Icon: Custom pin icon (Blue, house symbol) - Size: 48px - Shadow: Yes - Label: Property reference number - Click: Show info window - Draggable: In edit mode only **Map Controls** - Position: Right side, 16px from edge - Background: White - Border Radius: 4px - Shadow: 0 2px 4px rgba(0,0,0,0.2) - Size: 44px × 44px (touch-friendly) - Icon: 24px - Stack vertically with 8px gap **Bottom Sheet** - Default: 40% height (collapsed) - Expanded: 70% height - Background: White - Border Radius: 16px 16px 0 0 - Handle: 32px wide, 4px tall, Gray-300 - Drag: Smooth animation - States: Collapsed, Half-expanded, Fully-expanded **Location Search** - Autocomplete: Google Places API - Dropdown: Below input field - Results: Address + distance - Click: Update marker position **Nearby Landmarks** - Auto-populate from Google Places - Categories: Metro, Schools, Hospitals, Markets - Distance: Calculated from property - Icon: Category-specific - Click: Show on map **Accuracy Indicator** - Visual: 5-dot scale - Colors: Green (high), Yellow (medium), Red (low) - Label: Text (High, Good, Medium, Low) - GPS: Based on device accuracy #### MAP FEATURES **Map Types** - Roadmap (default) - Satellite - Hybrid - Terrain **Layers** - Traffic (optional) - Transit (optional) - Bicycle (optional) **Interactions** - Pan: Touch drag - Zoom: Pinch (mobile), Scroll wheel (desktop) - Rotate: Two-finger rotate (mobile) - Tilt: Not enabled - Double-click: Zoom in - Right-click: Context menu **Offline Support** - Cache: Last viewed map tiles - Placeholder: Show static map image - Indicator: "Offline Mode" banner - Sync: When online again #### RESPONSIVE BEHAVIOR **Desktop** - Full height map - Side panel for details (optional) - Larger map controls **Mobile** - Full screen map - Bottom sheet for details - Floating controls - Simplified UI --- ## 4. REVIEW & APPROVAL SCREENS ### 4.1 REVIEW WORKFLOW SCREEN **Screen ID:** `REV-001` **Roles:** Reviewer, Approver **Layout Pattern:** Split View (Detail + Actions) **Mobile Priority:** High #### LAYOUT STRUCTURE ``` ┌─────────────────────────────────────────────────────────────┐ │ TOP NAVIGATION BAR │ └─────────────────────────────────────────────────────────────┘ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ PAGE HEADER │ │ │ │ Review Valuation - VL-2024-001 │ │ │ │ Assigned to you on 14 Dec 2024 │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ REVIEW CHECKLIST │ │ │ │ Complete all checks before approval │ │ │ │ │ │ │ │ [✓] Property details verified │ │ │ │ [✓] Documents complete and valid │ │ │ │ [✓] Site survey data accurate │ │ │ │ [✓] Valuation calculations correct │ │ │ │ [⬚] Financial abstract reviewed │ │ │ │ │ │ │ │ Progress: 4 of 5 completed (80%) │ │ │ │ [████████░░] 80% │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ CONTENT TABS │ │ │ │ [Summary ●] [Details] [Documents] [History] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ TAB CONTENT (Summary - Key Info for Quick Review) │ │ │ │ │ │ │ │ ┌───────────────────┬───────────────────────┐ │ │ │ │ │ Property Info │ Financial Summary │ │ │ │ │ │ │ │ │ │ │ │ │ Type: Resi-Apt │ Land Value: ₹20L │ │ │ │ │ │ Area: 1200 sqft │ Building: ₹25L │ │ │ │ │ │ Bank: SBI │ Total: ₹45L │ │ │ │ │ └───────────────────┴───────────────────────┘ │ │ │ │ │ │ │ │ ┌───────────────────────────────────────────────────┐ │ │ │ │ │ VERIFICATION NOTES │ │ │ │ │ │ │ │ │ │ │ │ ✓ All documents verified by Surveyor on 13 Dec │ │ │ │ │ │ ✓ Site visit completed, photos uploaded │ │ │ │ │ │ ⚠ Pending: Encumbrance certificate │ │ │ │ │ └───────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌───────────────────────────────────────────────────┐ │ │ │ │ │ COMPARISONS (If Available) │ │ │ │ │ │ │ │ │ │ │ │ Similar Properties in Area: │ │ │ │ │ │ • VL-2024-045: ₹42L (1150 sqft, same locality) │ │ │ │ │ │ • VL-2024-032: ₹48L (1250 sqft, nearby) │ │ │ │ │ │ │ │ │ │ │ │ This valuation: Within normal range ✓ │ │ │ │ │ └───────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ REVIEWER COMMENT/FEEDBACK SECTION │ │ │ │ │ │ │ │ Add your review comments (required for rejection) │ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ │ │ │ │ │ │ │ │ [Text area for comments] │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ [📎 Attach File] [💬 Add to Activity Log] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ ACTION PANEL (Fixed Bottom Bar) │ │ │ │ │ │ │ │ [⬅ Send Back] [❌ Reject] [✓ Approve] [⏸ Hold] │ │ │ │ │ │ │ │ [Send Back: Request changes from submitter] │ │ │ │ [Reject: Decline valuation with reason] │ │ │ │ [Approve: Move to next stage / completion] │ │ │ │ [Hold: Temporarily pause for clarification] │ │ │ └─────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` #### APPROVAL CONFIRMATION MODAL ``` ┌─────────────────────────────────────────┐ │ ┌─────────────────────────────────────┐ │ │ │ Confirm Approval [×] │ │ │ ├─────────────────────────────────────┤ │ │ │ │ │ │ │ You are about to approve: │ │ │ │ │ │ │ │ VL-2024-001 │ │ │ │ 123 Main Street, Hyderabad │ │ │ │ Value: ₹45,00,000 │ │ │ │ │ │ │ │ This action will: │ │ │ │ • Move valuation to Approved status │ │ │ │ • Notify bank and stakeholders │ │ │ │ • Generate final report │ │ │ │ │ │ │ │ Add approval note (optional): │ │ │ │ ┌─────────────────────────────────┐ │ │ │ │ │ │ │ │ │ │ └─────────────────────────────────┘ │ │ │ │ │ │ │ │ [☐] Notify applicant │ │ │ │ [☐] Generate PDF report │ │ │ │ │ │ │ │ [Cancel] [Confirm Approval ✓] │ │ │ └─────────────────────────────────────┘ │ └─────────────────────────────────────────┘ ``` #### REJECT/SEND BACK MODAL ``` ┌─────────────────────────────────────────┐ │ ┌─────────────────────────────────────┐ │ │ │ Send Back for Revision [×] │ │ │ ├─────────────────────────────────────┤ │ │ │ │ │ │ │ VL-2024-001 will be returned to: │ │ │ │ [Submitter ▼] │ │ │ │ │ │ │ │ Reason (required) * │ │ │ │ ┌─────────────────────────────────┐ │ │ │ │ │ Please provide detailed reasons │ │ │ │ │ │ for sending back... │ │ │ │ │ │ │ │ │ │ │ └─────────────────────────────────┘ │ │ │ │ │ │ │ │ Issues to address (select all): │ │ │ │ [☐] Missing documents │ │ │ │ [☐] Incorrect calculations │ │ │ │ [☐] Incomplete property details │ │ │ │ [☐] Photo quality issues │ │ │ │ [☐] Other (specify above) │ │ │ │ │ │ │ │ [☐] Notify via email │ │ │ │ [☐] Set priority: High │ │ │ │ │ │ │ │ [Cancel] [Send Back ⬅] │ │ │ └─────────────────────────────────────┘ │ └─────────────────────────────────────────┘ ``` #### COMPONENT SPECIFICATIONS **Review Checklist** - Background: Blue-50 - Border: Blue-200 - Padding: 20px - Checkboxes: Clickable, save state - Progress Bar: Blue-600, animated - Icon: Checkmark (completed), Empty (pending) **Split View Layout (Desktop)** - Left: Valuation details (60%) - Right: Review panel (40%) - Divider: Resizable - Mobile: Stacked, swipe between **Summary Cards** - 2-column grid (desktop) - Stacked (mobile) - Quick stats - Color-coded indicators **Verification Notes** - Background: White - Border Left: 4px colored bar - Green: Verified - Yellow: Pending - Red: Issue - Icon: Status-specific **Comparisons Panel** - Background: Gray-50 - List: Similar valuations - Highlight: Current property - Range indicator: Within/outside normal **Comment Text Area** - Min Height: 100px - Max Length: 2000 characters - Character count: Bottom right - Resize: Vertical only - Placeholder: Context-specific **Action Buttons** - Size: Large (48px height) - Full width on mobile - Color coded: - Send Back: Blue - Reject: Red - Approve: Green - Hold: Yellow - Icon + Text - Tooltip: Explain action **Confirmation Modal** - Width: 500px (desktop), Full width (mobile) - Overlay: Dark 50% opacity - Animation: Fade in + slide up - Focus trap: Yes - Esc key: Close modal --- ### 4.2 BULK REVIEW QUEUE **Screen ID:** `REV-002` **Roles:** Reviewer, Approver **Layout Pattern:** List + Batch Actions **Mobile Priority:** Medium #### LAYOUT STRUCTURE ``` ┌─────────────────────────────────────────────────────────────┐ │ TOP NAVIGATION BAR │ └─────────────────────────────────────────────────────────────┘ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ PAGE HEADER │ │ │ │ Review Queue (45 Pending) │ │ │ │ Last updated: 2 minutes ago [🔄 Refresh] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ FILTERS & SORTING │ │ │ │ [Priority ▼] [Bank ▼] [Age ▼] [Value ▼] [Clear] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ BULK ACTIONS BAR (When items selected) │ │ │ │ [✓ 5 selected] [Approve All] [Assign] [Export] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ REVIEW QUEUE LIST │ │ │ │ │ │ │ │ ┌───────────────────────────────────────────────────┐ │ │ │ │ │ [☐] VL-2024-001 • HIGH PRIORITY [Review] │ │ │ │ │ │ 123 Main St, Hyderabad • SBI • ₹45L │ │ │ │ │ │ Submitted: 2 days ago • Assigned: You │ │ │ │ │ │ ⏱ SLA: 1 day remaining │ │ │ │ │ └───────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌───────────────────────────────────────────────────┐ │ │ │ │ │ [☐] VL-2024-002 • NORMAL [Review] │ │ │ │ │ │ 456 Park Ave, Hyderabad • HDFC • ₹32L │ │ │ │ │ │ Submitted: 1 day ago • Assigned: You │ │ │ │ │ │ ⏱ SLA: 2 days remaining │ │ │ │ │ └───────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌───────────────────────────────────────────────────┐ │ │ │ │ │ [☐] VL-2024-003 • URGENT ⚠️ [Review] │ │ │ │ │ │ 789 Lake Rd, Hyderabad • ICICI • ₹58L │ │ │ │ │ │ Submitted: 4 days ago • Assigned: You │ │ │ │ │ │ ⚠ SLA: OVERDUE by 1 day │ │ │ │ │ └───────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ [Load More...] (15 of 45 shown) │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ PRODUCTIVITY METRICS │ │ │ │ Today: 8 Reviewed • This Week: 42 • Avg Time: 12 min │ │ │ └─────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` --- ## 5. REPORTING & ANALYTICS SCREENS ### 5.1 REPORTS DASHBOARD **Screen ID:** `REP-001` **Roles:** Team Lead, Admin **Layout Pattern:** Grid + Filters **Mobile Priority:** Low #### LAYOUT STRUCTURE ``` ┌─────────────────────────────────────────────────────────────┐ │ TOP NAVIGATION BAR │ └─────────────────────────────────────────────────────────────┘ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ PAGE HEADER │ │ │ │ Reports & Analytics [Generate Report] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ FILTERS │ │ │ │ [Date Range ▼] [Bank ▼] [Type ▼] [Status ▼] [Apply] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ QUICK REPORTS (Cards) │ │ │ │ │ │ │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ │ │📊 Performance│ │📈 Trend │ │🏦 Bank-wise │ │ │ │ │ │ Report │ │ Analysis │ │ Summary │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ [Generate] │ │ [Generate] │ │ [Generate] │ │ │ │ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │ │ │ │ │ │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ │ │👤 Team │ │📍 Area-wise │ │⏱ Turnaround │ │ │ │ │ │ Performance │ │ Report │ │ Report │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ [Generate] │ │ [Generate] │ │ [Generate] │ │ │ │ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ RECENT REPORTS │ │ │ │ │ │ │ │ ╔═══════════════════════════════════════════════════╗ │ │ │ │ ║ Report Name │Generated │Format │Actions║ │ │ │ │ ╟───────────────────┼─────────────┼────────┼───────╢ │ │ │ │ ║ Monthly Summary │15 Dec 2024 │PDF │[⬇] ║ │ │ │ │ ║ Team Performance │14 Dec 2024 │Excel │[⬇] ║ │ │ │ │ ║ Bank-wise Report │12 Dec 2024 │PDF │[⬇] ║ │ │ │ │ ╚═══════════════════════════════════════════════════╝ │ │ │ │ │ │ │ │ [View All Reports] → │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ EXPORT OPTIONS │ │ │ │ Format: [● PDF] [○ Excel] [○ CSV] │ │ │ │ Include: [✓] Charts [✓] Summary [✓] Details │ │ │ │ Email to: [email@example.com] [+ Add] │ │ │ │ │ │ │ │ [Generate & Download] │ │ │ └─────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` --- ## 6. ADMINISTRATION SCREENS ### 6.1 USER MANAGEMENT **Screen ID:** `ADM-001` **Roles:** Admin **Layout Pattern:** List + Form **Mobile Priority:** Low #### LAYOUT STRUCTURE ``` ┌─────────────────────────────────────────────────────────────┐ │ TOP NAVIGATION BAR │ └─────────────────────────────────────────────────────────────┘ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ PAGE HEADER │ │ │ │ User Management (48 Users) [+ Add User] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ FILTERS & SEARCH │ │ │ │ [🔍 Search users...] [Role ▼] [Status ▼] [Clear] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ USER LIST TABLE │ │ │ │ │ │ │ │ ╔═══════════════════════════════════════════════════╗ │ │ │ │ ║ User │Role │Status │Last Login │Actions║ │ │ │ │ ╟───────────┼──────────┼────────┼───────────┼───────╢ │ │ │ │ ║ John Doe │Surveyor │Active │2 hrs ago │[⋯] ║ │ │ │ │ ║ Jane Smith │Reviewer │Active │1 day ago │[⋯] ║ │ │ │ │ ║ Bob Wilson │Creator │Inactive│5 days ago │[⋯] ║ │ │ │ │ ╚═══════════════════════════════════════════════════╝ │ │ │ │ │ │ │ │ [← Prev] [Page 1 of 3] [Next →] │ │ │ └─────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` --- ## 7. PROFILE & SETTINGS SCREENS ### 7.1 USER PROFILE **Screen ID:** `PRO-001` **Roles:** All **Layout Pattern:** Form + Settings **Mobile Priority:** Medium #### LAYOUT STRUCTURE ``` ┌─────────────────────────────────────────────────────────────┐ │ TOP NAVIGATION BAR │ └─────────────────────────────────────────────────────────────┘ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ PAGE HEADER │ │ │ │ My Profile [Edit] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ PROFILE CARD │ │ │ │ │ │ │ │ ┌─────┐ │ │ │ │ │ │ John Doe │ │ │ │ │ JD │ john.doe@jrsolutions.com │ │ │ │ │ │ Surveyor │ │ │ │ └─────┘ Member since: Jan 2024 │ │ │ │ │ │ │ │ [Change Photo] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ TAB NAVIGATION │ │ │ │ [Personal Info ●] [Preferences] [Security] [Activity] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ TAB CONTENT (Personal Info) │ │ │ │ │ │ │ │ Full Name: [John Doe] │ │ │ │ Email: [john.doe@jrsolutions.com] │ │ │ │ Phone: [+91 98765 43210] │ │ │ │ Role: Surveyor (Cannot change) │ │ │ │ Department: [Field Operations ▼] │ │ │ │ Location: [Hyderabad ▼] │ │ │ │ │ │ │ │ [Cancel] [Save Changes] │ │ │ └─────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` --- ## 8. COMPONENT LIBRARY ### BUTTONS **Primary Button** - Background: Blue-600 - Text: White, 14px Bold - Height: 44px - Padding: 12px 24px - Border Radius: 6px - Hover: Blue-700 - Active: Blue-800 - Disabled: Gray-300, Cursor not-allowed **Secondary Button** - Background: White - Text: Blue-600, 14px Bold - Border: 1px solid Blue-600 - Height: 44px - Hover: Blue-50 - Active: Blue-100 **Icon Button** - Size: 44px × 44px - Icon: 24px - Background: Transparent - Hover: Gray-100 - Ripple effect ### INPUT FIELDS **Text Input** - Height: 44px - Padding: 12px - Border: 1px solid Gray-300 - Border Radius: 6px - Font: 14px Regular - Focus: Blue-600 border, 0 0 0 3px Blue-100 shadow - Error: Red-500 border **Dropdown Select** - Same as text input - Chevron icon: Right-aligned - Dropdown: Below or above (auto) - Max height: 300px, scroll **Checkbox** - Size: 20px × 20px - Border: 2px solid Gray-400 - Checked: Blue-600 background, White checkmark - Hover: Blue-100 border **Radio Button** - Size: 20px × 20px - Border: 2px solid Gray-400 - Selected: Blue-600 border, Blue-600 dot (8px) - Hover: Blue-100 border **Date Picker** - Input: Same as text input - Icon: Calendar icon, right-aligned - Picker: Dropdown calendar - Mobile: Native date picker ### CARDS **Basic Card** - Background: White - Border: 1px solid Gray-200 - Border Radius: 8px - Padding: 20px - Shadow: 0 1px 2px rgba(0,0,0,0.05) - Hover: 0 4px 6px rgba(0,0,0,0.1) (optional) **Metric Card** - Same as basic card - Number: 32px Bold, Gray-900 - Label: 14px Medium, Gray-600 - Icon: 40px, Color-coded - Trend: 12px, Green/Red with arrow ### NAVIGATION **Top Navigation Bar** - Height: 64px (desktop), 56px (mobile) - Background: White - Shadow: 0 1px 3px rgba(0,0,0,0.1) - Logo: Left-aligned, max 40px height - Icons: Right-aligned, 24px - Sticky: Yes **Bottom Navigation (Mobile)** - Height: 56px - Background: White - Shadow: 0 -1px 3px rgba(0,0,0,0.1) - Items: 5 max - Icon: 24px, above label - Label: 10px, below icon - Active: Blue-600 - Inactive: Gray-600 **Breadcrumb** - Font: 14px Regular - Color: Gray-600 - Separator: `/` or `>` - Last item: Gray-900, Bold - Hover: Blue-600, Underline ### BADGES & LABELS **Status Badge** - Height: 24px - Padding: 4px 8px - Border Radius: 12px - Font: 12px Bold - Color-coded by status **Count Badge** - Size: 20px × 20px (or auto width) - Border Radius: 10px - Background: Red-500 - Text: White, 10px Bold - Position: Absolute, top-right ### MODALS & OVERLAYS **Modal** - Width: 500px (desktop), 100% - 32px (mobile) - Max Height: 90vh - Background: White - Border Radius: 8px - Overlay: Black 50% opacity - Animation: Fade in + slide up **Bottom Sheet (Mobile)** - Full width - Border Radius: 16px 16px 0 0 - Handle: 32px × 4px, Gray-300 - Draggable: Yes - Backdrop: Black 50% opacity **Toast Notification** - Width: 320px (desktop), 100% - 32px (mobile) - Position: Top-right (desktop), Top-center (mobile) - Padding: 16px - Border Radius: 8px - Shadow: 0 4px 6px rgba(0,0,0,0.1) - Auto-dismiss: 5 seconds - Types: Success (Green), Error (Red), Info (Blue), Warning (Yellow) ### TABLES **Data Table** - Border: 1px solid Gray-200 - Header: Gray-50 background, Bold - Row Height: 56px - Padding: 16px - Hover: Gray-50 background - Selected: Blue-50 background - Zebra: Optional (Gray-25 alternate rows) --- ## 9. RESPONSIVE BREAKPOINTS ### BREAKPOINTS - **Mobile:** < 768px - **Tablet:** 768px - 1023px - **Desktop:** ≥ 1024px - **Large Desktop:** ≥ 1440px ### RESPONSIVE RULES **Typography** - Scale down heading sizes by 20-25% on mobile - Maintain at least 14px for body text **Spacing** - Reduce padding/margins by 25-50% on mobile - Maintain minimum 16px touch targets **Grids** - Desktop: 3-4 columns - Tablet: 2-3 columns - Mobile: 1-2 columns **Navigation** - Desktop: Top horizontal nav - Mobile: Bottom tab bar **Forms** - Desktop: Multi-column layouts - Mobile: Single column, full width inputs **Tables** - Desktop: Full table - Mobile: Card-based list or horizontal scroll **Images** - Responsive: max-width 100%, height auto - Lazy load: Yes --- ## NOTES FOR FIGMA IMPLEMENTATION ### FIGMA BEST PRACTICES 1. **Use Auto Layout** - All components should use Auto Layout for responsive behavior - Set proper resizing constraints 2. **Create Component Library** - Button variants - Input field variants - Card components - Navigation components 3. **Use Styles** - Color styles for all brand colors - Text styles for all typography - Effect styles for shadows 4. **Naming Convention** - Screens: `[CATEGORY]/[SCREEN-ID] Screen Name` - Components: `[TYPE]/Component Name` - Example: `Dashboard/DASH-001 Role Dashboard` - Example: `Buttons/Primary Button` 5. **Organize with Frames** - Desktop frames: 1440px width - Tablet frames: 768px width - Mobile frames: 375px width 6. **Use Figma Plugins** - Iconify for icons - Unsplash for placeholder images - Content Reel for dummy data 7. **Document Your Designs** - Add annotations for interactions - Document states (default, hover, active, disabled, error) - Link screens for prototype flow ### DELIVERABLES CHECKLIST - [ ] All 18 screens designed (Desktop + Mobile) - [ ] Complete component library - [ ] Design system documentation - [ ] Interactive prototype - [ ] Annotations and specs - [ ] Responsive behavior defined - [ ] Accessibility notes - [ ] Developer handoff package --- ## APPENDIX ### SCREEN SUMMARY | ID | Screen Name | Category | Priority | |----|-------------|----------|----------| | DASH-001 | Role-Based Dashboard | Dashboard | Critical | | DASH-002 | Analytics Dashboard | Dashboard | Medium | | VAL-001 | Valuation List | Valuation | Critical | | VAL-002 | Create/Edit Valuation | Valuation | Critical | | VAL-003 | Valuation Detail | Valuation | High | | DOC-001 | Document Management | Documents | Critical | | MAP-001 | Map & Geolocation | Documents | Critical | | REV-001 | Review Workflow | Review | High | | REV-002 | Bulk Review Queue | Review | Medium | | REP-001 | Reports Dashboard | Reporting | Medium | | ADM-001 | User Management | Admin | Low | | PRO-001 | User Profile | Profile | Medium | ### COLOR PALETTE ``` Primary Colors: - Blue-600: #2563EB (Primary actions) - Blue-500: #3B82F6 (Hover states) - Blue-700: #1D4ED8 (Active states) Secondary Colors: - Green-500: #10B981 (Success, Approved) - Red-500: #EF4444 (Error, Rejected) - Yellow-500: #F59E0B (Warning, Pending) - Gray-900: #111827 (Text primary) - Gray-600: #4B5563 (Text secondary) - Gray-300: #D1D5DB (Borders) - Gray-50: #F9FAFB (Background) ``` ### ICON LIBRARY **Font Awesome Free 6.4.0** - Use solid style for primary actions - Use regular style for secondary actions - 24px standard size - Color: Inherit from text or custom --- **END OF WIREFRAME SPECIFICATIONS**