# Property Valuation Portal - Screen Design Specification ## Document Information - **Project**: JR Solutions Property Valuation Portal - **Version**: 1.0 - **Date**: 2025-12-21 - **Prepared by**: Solution Architect & Product Manager --- ## Table of Contents 1. [Screen Inventory & Information Groups](#1-screen-inventory--information-groups) 2. [Overall Screen Layout Architecture](#2-overall-screen-layout-architecture) 3. [Design Guidelines](#3-design-guidelines) 4. [Detailed Screen Specifications](#4-detailed-screen-specifications) 5. [Mobile PWA Considerations](#5-mobile-pwa-considerations) 6. [Bank-Specific Field Management](#6-bank-specific-field-management) --- ## 1. Screen Inventory & Information Groups ### 1.1 Main Screen Categories Based on the Excel data analysis and workflow requirements, the portal is organized into **7 main screen categories** with **18 total screens**: #### **A. Dashboard & Overview (2 screens)** 1. **Dashboard Home** 2. **My Work Queue** #### **B. Valuation Management (6 screens)** 3. **Valuation List/Search** 4. **Create New Valuation (Wizard)** 5. **Basic Information Screen** 6. **Property Details Screen** 7. **Site & Map Screen** 8. **Valuation & Calculation Screen** #### **C. Document & Evidence (2 screens)** 9. **Document Management Screen** 10. **Photo Gallery & Annotation Screen** #### **D. Review & Approval (2 screens)** 11. **Review Queue Screen** 12. **Approval Screen** #### **E. Reporting & Analytics (2 screens)** 13. **Reports Dashboard** 14. **Custom Report Builder** #### **F. Administration (3 screens)** 15. **User Management Screen** 16. **Reference Data Management** 17. **Bank Configuration Screen** #### **G. Profile & Settings (1 screen)** 18. **User Profile & Settings** --- ## 2. Overall Screen Layout Architecture ### 2.1 Layout Pattern: **Top Navigation with Card-Based Content** **Constraint Adherence**: No sidebar menu, no horizontal scrolling ``` ┌─────────────────────────────────────────────────────────────────────┐ │ HEADER BAR (Fixed Top) │ │ [Logo] [App Name] [Search] [Notifications] [User Menu] │ ├─────────────────────────────────────────────────────────────────────┤ │ BREADCRUMB / CONTEXT BAR │ │ Home > Valuations > VAL-2024-001 > Property Details │ ├─────────────────────────────────────────────────────────────────────┤ │ │ │ ┌───────────────────────────────────────────────────────────────┐ │ │ │ PRIMARY NAVIGATION TABS (Horizontal, Sticky) │ │ │ │ [Dashboard] [Valuations] [Approvals] [Reports] [Admin] │ │ │ └───────────────────────────────────────────────────────────────┘ │ │ │ │ ┌───────────────────────────────────────────────────────────────┐ │ │ │ │ │ │ │ MAIN CONTENT AREA (Vertically Scrollable) │ │ │ │ │ │ │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ │ │ Card/Panel │ │ Card/Panel │ │ Card/Panel │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │ │ │ │ │ │ │ (Content organized in cards/panels for better grouping) │ │ │ │ │ │ │ └───────────────────────────────────────────────────────────────┘ │ │ │ │ ┌───────────────────────────────────────────────────────────────┐ │ │ │ ACTION BAR (Sticky Bottom when editing) │ │ │ │ [Cancel] [Save Draft] [Submit] [Raise Query] │ │ │ └───────────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────────┘ ``` ### 2.2 Navigation Hierarchy ``` Level 1: Top Horizontal Tabs (Main Modules) ├─ Dashboard ├─ Valuations ├─ Approvals ├─ Reports └─ Admin Level 2: Sub-navigation (Contextual Pills/Chips below main tabs) Example in Valuations: [All] [Draft] [In Survey] [Submitted] [In Review] [Approved] [+ Create New] Level 3: Accordion/Tab Groups within Content Area Example in Property Details: ▼ Basic Information ▼ Location Details ▼ Property Specifications ``` ### 2.3 Screen Layout Variants #### **Variant A: List/Table View** - Used for: Valuation List, Document List, User Management - Layout: Full-width table with filters in collapsible panel #### **Variant B: Form View (Single Column)** - Used for: Basic Information, Property Details - Layout: Single column, grouped in accordion panels, max-width 1200px centered #### **Variant C: Split View (60-40)** - Used for: Map Screen, Document Annotation - Layout: Left panel (content), Right panel (map/preview) #### **Variant D: Wizard View** - Used for: Create New Valuation - Layout: Top stepper + content area + bottom actions #### **Variant E: Dashboard Grid** - Used for: Dashboard, Reports - Layout: Responsive grid of cards (4 cols on desktop, 2 on tablet, 1 on mobile) --- ## 3. Design Guidelines ### 3.1 Core Design Principles #### **1. Progressive Disclosure** - Show only relevant fields based on context (property type, bank, workflow stage) - Use accordion panels to group related fields - Expandable sections for optional/advanced fields #### **2. Contextual Validation** - Inline validation with clear error messages - Field-level help text for complex fields - Bank-specific validation rules applied dynamically #### **3. Responsive First** - Mobile-first design approach - Breakpoints: 640px (mobile), 768px (tablet), 1024px (desktop), 1280px (large) - Touch-friendly controls (min 44px tap targets) #### **4. Performance Optimization** - Lazy load content panels - Virtual scrolling for long lists - Optimistic UI updates for better UX #### **5. Accessibility (WCAG 2.1 AA)** - Keyboard navigation support - ARIA labels for screen readers - Sufficient color contrast ratios - Focus indicators ### 3.2 Visual Design System #### **Color Palette** ``` Primary Blue: #2563EB (Actions, Links) Success Green: #10B981 (Approved, Success states) Warning Orange: #F59E0B (Pending, Draft states) Error Red: #EF4444 (Rejected, Errors) Info Cyan: #06B6D4 (Information, Help) Neutral Grays: - Background: #F9FAFB - Borders: #E5E7EB - Text Primary: #111827 - Text Secondary: #6B7280 ``` #### **Typography** ``` Font Family: Inter (system fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI') Heading 1 (H1): 2rem (32px), font-weight: 700 Heading 2 (H2): 1.5rem (24px), font-weight: 600 Heading 3 (H3): 1.25rem (20px), font-weight: 600 Body: 1rem (16px), font-weight: 400 Small: 0.875rem (14px), font-weight: 400 Caption: 0.75rem (12px), font-weight: 400 ``` #### **Spacing Scale (Tailwind CSS)** ``` xs: 0.25rem (4px) sm: 0.5rem (8px) md: 1rem (16px) lg: 1.5rem (24px) xl: 2rem (32px) 2xl: 3rem (48px) ``` #### **Component Specifications** **Buttons** ``` Primary: bg-blue-600, hover:bg-blue-700, px-4 py-2, rounded-md Secondary: bg-gray-200, hover:bg-gray-300, px-4 py-2, rounded-md Danger: bg-red-600, hover:bg-red-700, px-4 py-2, rounded-md Min height: 40px (44px with padding for touch targets) ``` **Input Fields** ``` Text Input: border-gray-300, focus:border-blue-500, px-3 py-2, rounded-md Height: 40px Label: text-sm, font-medium, mb-1 Helper text: text-xs, text-gray-500, mt-1 Error state: border-red-500, text-red-600 helper ``` **Cards/Panels** ``` Background: white Border: 1px solid #E5E7EB Border Radius: 0.5rem (8px) Padding: 1.5rem (24px) Shadow: 0 1px 3px rgba(0,0,0,0.1) ``` **Tables** ``` Header: bg-gray-50, font-weight: 600, border-bottom Row: hover:bg-gray-50, border-bottom Row height: min 48px Sticky header on scroll ``` ### 3.3 Interaction Patterns #### **Form Interactions** - Auto-save draft every 30 seconds - Inline validation on blur - Confirmation dialogs for destructive actions - Loading states for async operations #### **Navigation Interactions** - Active state indicators for current page - Breadcrumb navigation for deep pages - Back button with unsaved changes warning #### **Data Entry Optimization** - Smart defaults based on previous entries - Autocomplete for repeated fields - Bulk operations for multiple items - Copy/Clone functionality for similar valuations ### 3.4 Workflow Status Indicators ``` Draft → Gray badge → 🟤 In Survey → Blue badge → 🔵 Submitted → Cyan badge → 🔷 In Review → Orange badge → 🟠 Query Raised → Purple badge → 🟣 Approved → Green badge → 🟢 Rejected → Red badge → 🔴 On Hold → Yellow badge → 🟡 ``` ### 3.5 Responsive Breakpoints ``` Mobile: < 640px → Single column, stacked cards, hamburger menu for filters Tablet: 640-1024px → 2 columns for cards, sidebar overlay for filters Desktop: > 1024px → Full layout, inline filters, multi-column grids Large: > 1280px → Optimized for larger screens, wider content area ``` ### 3.6 No Horizontal Scroll Strategy 1. **Responsive Tables**: Convert to card view on mobile 2. **Form Layouts**: Single column on small screens 3. **Content Width**: Max-width constraints (1400px) 4. **Overflow**: Use vertical scrolling within sections 5. **Maps**: Responsive aspect ratio containers --- ## 4. Detailed Screen Specifications ### **SCREEN 1: Dashboard Home** #### Purpose Landing page after login, provides overview of user's work and key metrics. #### Information Groups 1. **Welcome Banner** - User name, role, last login 2. **Quick Stats** (4 KPI cards) - Total Valuations (This Month) - Pending Approvals - Queries to Resolve - Completed This Week 3. **Recent Valuations** (Table: Last 5) - Valuation ID, Property Address, Status, Assigned Date, Actions 4. **Quick Actions** (Buttons) - Create New Valuation - View My Queue - Generate Report 5. **Activity Feed** (Timeline) - Recent activities by team/self 6. **Upcoming Deadlines** (List) - Valuations approaching SLA deadline #### Layout - Responsive grid: 4 columns (desktop), 2 columns (tablet), 1 column (mobile) - KPI cards at top - 60-40 split: Recent valuations (left) + Quick actions + Activity (right) #### User Roles Visibility - All roles see this screen - Content filtered based on role permissions --- ### **SCREEN 2: My Work Queue** #### Purpose Personalized list of valuations assigned to the logged-in user. #### Information Groups 1. **Filters Panel** (Collapsible) - Status (Multi-select) - Bank (Multi-select) - Property Type (Multi-select) - Date Range - Priority 2. **Action Bar** - Bulk Actions (Reassign, Export) - View Toggle (Table/Card) - Sort Options 3. **Valuation List** (Table) - Columns: ID, Bank, Property Address, Type, Status, Assigned Date, Due Date, Priority, Actions - Row Actions: View, Edit, Reassign, Comment #### Layout - Full-width table with fixed header - Filters in collapsible top panel - Pagination at bottom - Mobile: Convert to card view #### Attributes (Columns) ``` - Valuation ID (link) - Bank Name - Applicant Name - Property Address - Property Type - Current Status (badge) - Assigned To (avatar + name) - Created Date - Last Updated Date - Due Date (with SLA indicator) - Priority (High/Medium/Low) - Actions (Dropdown: View, Edit, Clone, History) ``` --- ### **SCREEN 3: Valuation List/Search** #### Purpose Global search and list of all valuations (filtered by user permissions). #### Information Groups Same as Screen 2, but includes: 1. **Advanced Search** - Full-text search across all fields - Saved search filters 2. **Column Customization** - Show/hide columns - Reorder columns - Save column preferences 3. **Export Options** - Export to Excel - Export to PDF - Custom templates #### Layout Same as Screen 2 with enhanced filters --- ### **SCREEN 4: Create New Valuation (Wizard)** #### Purpose Step-by-step wizard to create a new valuation request. #### Wizard Steps 1. **Step 1: Basic Information** - Bank Selection * - Property Type * - Valuation Type (Sale/Mortgage/Lease) 2. **Step 2: Applicant Details** - Applicant Name * - Co-Applicant Name - Contact Information - Representative Details 3. **Step 3: Property Location** - Address * - State, District, Mandal, Village - Pincode - Map Pin Location (Optional) 4. **Step 4: Initial Documents** - Upload title deeds (Optional at this stage) - Upload any reference documents 5. **Step 5: Assignment** - Auto-assign or Manual selection - Priority Level - Due Date 6. **Step 6: Review & Submit** - Summary of all entered data - Confirm and Create #### Layout - Top: Stepper indicator (1→2→3→4→5→6) - Middle: Form content (single column, max-width 800px) - Bottom: [Back] [Save Draft] [Next]/[Submit] #### Validation Rules - Required fields marked with * - Bank selection triggers bank-specific field visibility - Property type selection triggers property-specific sections --- ### **SCREEN 5: Basic Information Screen** #### Purpose Capture core information about the valuation, applicant, and property identification. #### Information Groups (Accordion Panels) ##### **Panel 1: Valuation Identification** (Auto-generated, Read-only in edit mode) ``` - Valuation ID (Auto-generated: VAL-YYYY-MMDD-XXXX) - Bank Name (Dropdown, Required) - Property Type (Radio: Plot/Independent House/Apartment Flat, Required) - Valuation Purpose (Dropdown: Sale/Mortgage/Lease/Legal) - Branch/Office Location - Valuation Date (Auto: Today's date) - Target Completion Date (Calculated: Today + Bank SLA days) - Priority (Dropdown: High/Medium/Low) - Status (Badge, Read-only: Auto-managed by workflow) ``` ##### **Panel 2: Applicant/Borrower Details** ``` - Applicant Name/Borrower Name (Text, Required) - Co-Applicant Name/Borrower Name (Text, Optional) - Owner Name (Text, Required if different from applicant) - Contact Person/Representative Name (Text) - Mobile Number (Text, Required, Validation: 10 digits) - Email Address (Email, Optional) - Representative Name/Person Met at Site (Text, filled by surveyor) - Inspection Done By (Auto-populated: Surveyor name) ``` ##### **Panel 3: Property Identification** ``` - Survey Number (Sy No) (Text, Required) - Plot Number (Text) - House Number (Text) [If Property Type = Apartment Flat] - Apartment Name (Text, Required) - Flat Number (Text, Required) - Floor (Number, Required) - Level of Floor From Ground (Number) - Total Floors in Building (Number) - Building Name (Text, Optional for independent house) ``` ##### **Panel 4: Property Location** ``` - Address of the Property (Textarea, Required) - State (Dropdown, Default: Telangana, Required) - District (Dropdown, Dependent on State, Required) - Mandal (Dropdown, Dependent on District, Required) - Village (Text, Required) - Colony Name (Text) - Pincode (Text, Required, Validation: 6 digits) - Coordinates (Lat, Long) (Text, Auto-filled from map or manual entry) - Near By Land Mark (Text) ``` ##### **Panel 5: Locality Classification** ``` - Locality Classification (Radio: Posh/Upper Middle Class/Middle Class/Lower Middle Class) - Locality Type (Radio: Urban/Rural/Semi Urban) - Vicinity Description (Textarea) - Suburb Name (Text) - All Civic Amenities Range (Dropdown: Excellent/Good/Average/Poor) ``` ##### **Panel 6: Proximity & Accessibility** ``` - Railway Station Name and Distance (Text + Number + Unit) - Bus Stand Name and Distance (Text + Number + Unit) - Hospital Name and Distance (Text + Number + Unit) - Institution Name and Distance (Text + Number + Unit) - Nearest Branch/Area Office - Distance (Number + Unit) - Distance From City Center (Number + Unit) - Nearest Major Road (Text) - Distance From Office Location (Number + Unit) ``` ##### **Panel 7: Workflow Information** (Visible to all, editable by admin/team lead) ``` - Assigned To (Surveyor) (Dropdown, User list) - Assigned Date (Date, Auto) - Key-in Operator (Dropdown, User list) - Reviewer (Dropdown, User list) - Approver (Dropdown, User list) ``` #### Layout - Single column form - Accordion panels (initially panel 1 & 2 expanded) - Each panel has edit/view mode toggle - Bank-specific fields highlighted with info icon - Required fields marked with red asterisk #### Attributes Detail **Total Fields: ~40 fields** #### Validation Rules - Bank selection is mandatory and cannot be changed after survey starts - Property type selection triggers conditional field display - Apartment-specific fields only show when Property Type = Apartment Flat - Coordinates validation: Latitude (-90 to 90), Longitude (-180 to 180) #### Bank-Specific Behavior - Some banks may require additional fields in Panel 2 (e.g., PAN, Aadhaar) - Field visibility controlled by bank configuration --- ### **SCREEN 6: Property Details Screen** #### Purpose Capture detailed site characteristics, boundaries, dimensions, and property specifications. #### Information Groups (Accordion Panels) ##### **Panel 1: Site Characteristics** ``` - Shape of the Site (Dropdown: Regular/Irregular/Rectangular/Square/L-Shaped/Trapezoidal) - Level (Dropdown: Plain/Undulated/Sloped) - Development Status (Dropdown: Fully Developed/Under Development/Undeveloped) - Quality of Infrastructure in the Vicinity (Dropdown: Excellent/Good/Average/Poor) - Construction Activity in Area (Dropdown: High/Moderate/Low/None) - Nature of the Site (Dropdown: Dry/Waterlogged/Rocky/Clayey) - Limits (Dropdown: Municipal/Panchayat/Cantonment/Other) - Any Negatives to the locality (Textarea) - Any Positives to the locality (Textarea) - Possibility of frequent flooding / submerging (Radio: Yes/No) - Is plot in town planning approved layout? (Radio: Yes/No) - Corner plot or intermittent plot? (Radio: Corner/Intermittent/End) - Water potentiality (Radio: Yes/No) - Underground sewerage system (Radio: Yes/No) - Is power supply available at the site? (Radio: Yes/No) ``` ##### **Panel 2: Accessibility Details** ``` - Does the property has Road (Radio: Yes/No, Required) - Is it a Land-Locked land? (Radio: Yes/No, Required) [If Yes] - Land Locked Justification (Textarea, Required) - Justification Approval (Checkbox, Reviewer only) - Road Width (Number + Unit: Feet/Meters) - Road Type (Dropdown: Paved/Unpaved/Cement/Mud/Gravel) - Mode of Transport (Checkbox: Bus/Auto/Taxi/Metro/Train) ``` ##### **Panel 3: Boundaries & Dimensions** **Sub-section A: Boundaries as per Documents** ``` - North Boundary (Text) - South Boundary (Text) - East Boundary (Text) - West Boundary (Text) ``` **Sub-section B: Boundaries as per Actuals** (Filled by Surveyor) ``` - North Boundary (Text) - South Boundary (Text) - East Boundary (Text) - West Boundary (Text) - [Variance Indicator if different from documents] ``` **Sub-section C: Dimensions as per Documents** ``` - North Side Length (Number + Unit) - South Side Length (Number + Unit) - East Side Length (Number + Unit) - West Side Length (Number + Unit) ``` **Sub-section D: Dimensions as per Actuals** (Filled by Surveyor) ``` - North Side Length (Number + Unit) - South Side Length (Number + Unit) - East Side Length (Number + Unit) - West Side Length (Number + Unit) - [Variance Indicator if different from documents] ``` ##### **Panel 4: Extents/Areas** **Sub-section: Extents as per Documents** ``` - Area (Number + Unit: Acres-Guntas/Acres-Cents/Sq Mtrs/Sq Yds/Sq Ft) ``` **Sub-section: Extents as per Plan** (If available) ``` - Area (Number + Unit) ``` **Sub-section: Extents as per Actuals** (Surveyor measurement) ``` - Area (Number + Unit) - Measurement Method (Dropdown: Manual/GPS/Map Polygon/Combination) ``` **Variance Summary** (Auto-calculated) ``` - Document vs Actual Variance (%, Read-only) - Variance Status (Badge: Within Tolerance/Needs Review) ``` ##### **Panel 5: Building Details** (Visible only for Independent House & Apartment) ``` - Single Building / Multiple Buildings (Radio) - Number of Buildings (Number, if multiple) ``` **For Each Building:** (Repeatable section) ``` - Building Name/Number (Text) - Building Type (Dropdown: RCC/Load Bearing/Pre-fab/Mixed) - Number of Floors (Number) - Floor Heights (Repeatable for each floor) - Floor Name (Ground/First/Second...) - Floor Height (Number + Unit: Feet/Meters) ``` ##### **Panel 6: Apartment-Specific Details** (Only for Apartment type) ``` - Total Number of Flats in Complex (Number) - Total Number of Towers (Number) - Tower Name/Number (Text) - Flat Type (Dropdown: 1BHK/2BHK/3BHK/Penthouse/Studio) - UDS (Undivided Share) in Sq Yds or Share (Number + Unit) - Carpet Area (Number + Sq Ft) (Auto-calc: ~70% of SBUA, configurable) - Parking Area (Number + Sq Ft) - Number of Parkings Allotted (Number) - Common Area Share (Number + %) - Amenities Access (Checklist: Gym/Pool/Club/Park/Security) ``` ##### **Panel 7: Compliance Checks** ``` - NDMA Compliance (Radio: Yes/No/NA) - NBC 2005 Compliance (Radio: Yes/No/NA) - High Tension Lines Nearby (Radio: Yes/No) [If Yes] - HT Line Distance (Number + Unit) - Buffer Area Impact (Number + Unit) - Buffer Areas (e.g., Reservoir, Cemetery, Railway) (Radio: Yes/No) [If Yes] - Buffer Area Description (Text) - Buffer Area Distance (Number + Unit) - Zone Usage (Dropdown: Residential/Commercial/Industrial/Mixed/Agricultural) - Adherence to building byelaws / FSI (Radio: Yes/No/Partial) - Approved FSI (Number, Ratio) - Actual FSI (Number, Ratio, Auto-calculated) - Plot Coverage (Number, %) - Permissible Plot Coverage (Number, %) ``` #### Layout - Single column form with accordion panels - Comparison view for Document vs Actual (side-by-side on desktop, stacked on mobile) - Repeatable sections for multiple buildings/floors - Conditional visibility based on property type - Visual variance indicators (green/yellow/red) #### Attributes Detail **Total Fields: ~70-90 fields** (varies by property type) #### Validation Rules - Boundary variance > 10% triggers review flag - FSI > Permissible triggers compliance alert - Land-locked property requires reviewer acknowledgment - HT Line distance < 50m triggers warning --- ### **SCREEN 7: Site & Map Screen** #### Purpose Geo-spatial data capture, boundary mapping, and site photos. #### Layout Structure **Split View: 60% Map (Left) - 40% Controls (Right)** #### Information Groups ##### **Left Panel: Interactive Map** ``` Map Features: - Google Maps base layer - Drawing tools (Polygon, Marker, Measure) - Layer toggles: - Property Boundaries - Nearby Properties - Survey Markers - Photos (geo-tagged) - Satellite/Street view toggle - Zoom controls - Search location - Center on property - Full-screen mode Map Data Captured: - Property Boundary Polygon (GeoJSON) - Property Center Point (Lat/Long) - Site Photos with location pins - Nearby landmarks markers ``` ##### **Right Panel: Controls & Information** **Section 1: Location Details** ``` - Latitude (Text, Auto from map or manual) - Longitude (Text, Auto from map or manual) - Accuracy (Meter, Auto from GPS) - Capture Method (Dropdown: GPS/Manual Pin/Address Search) - Captured Date & Time (Auto) ``` **Section 2: Boundary Capture** ``` - Boundary Status (Badge: Not Captured/Partial/Complete) - Boundary Polygon (GeoJSON, Auto-generated from map) - Calculated Area from Polygon (Number + Unit, Auto, Read-only) - Number of Boundary Points (Number, Auto) - [Draw Boundary Button] - Activates polygon drawing mode - [Clear Boundary Button] - [Import KML/GeoJSON Button] - [Export Boundary Button] ``` **Section 3: Area Calculations** (Auto-populated from map polygon) ``` - Total Plot Area (from polygon) (Number + Unit, Read-only) - Comparison with Documents: - Document Area (Number, from Property Details) - Map Area (Number, from polygon) - Variance (%, Auto-calculated) - Variance Status (Badge) ``` **Section 4: Deductions** (Manual entry or map-based) ``` - Road Effected Area (-) (Number + Unit) [If entered] - Proposed Road Width (Number + Unit) - Present Road Width (Number + Unit) - Actual Setback Length (Number + Unit) - Nala (Drainage) Effected Area (-) (Number + Unit) [If entered] - Nala Width (Number + Unit) - Nala Setback Distance (Number + Unit) - Splay Area (-) (Number + Unit) - Buffer Area (-) (Number + Unit) - Buffer Type (Dropdown: HT Line/Water Body/Railway/Other) - Buffer Distance (Number + Unit) - Net Area (Auto-calculated: Total - All Deductions) (Read-only) ``` **Section 5: Site Photos** (Integrated with map) ``` - [Upload Photos Button] - Photo List: - Thumbnail - Caption - Location (Lat/Long if geo-tagged) - Timestamp - [Pin on Map] button - [Delete] button - Photo Categories (Checklist): - Front View - Side Views - Interior (if accessible) - Boundaries - Road/Access - Neighborhood - Defects/Issues ``` **Section 6: Map Layers & Overlays** ``` - Show/Hide Layers (Toggles): - Property Boundary - Deduction Areas (Road/Nala/Splay/Buffer) - Site Photos - Nearby Properties (if available) - Survey Markers - Heatmap (Future: Property values in area) ``` #### Mobile Behavior - Full-screen map mode - Bottom sheet for controls (collapsible) - Swipe up to expand controls - GPS-assisted boundary capture - Photo capture with auto geo-tagging #### Attributes Detail **Fields: ~15-20 fields + GeoJSON polygon + Photos array** #### Validation Rules - Polygon area variance > 15% from documents triggers alert - Deduction areas cannot exceed total area - Net area must be > 0 - Photo upload: Max 50 photos, each < 5MB, formats: JPG/PNG - Boundary polygon must be closed (first point = last point) #### Technical Notes - Store boundary as PostGIS Geometry + GeoJSON snapshot - Use Google Maps JavaScript API for mapping - Implement debounced auto-save for polygon edits - Generate thumbnail sprites for photo gallery - Use signed URLs for photo storage (S3-compatible) --- ### **SCREEN 8: Valuation & Calculation Screen** #### Purpose Capture valuation-specific data, rates, areas, and perform abstract calculations. #### Information Groups (Accordion Panels) ##### **Panel 1: Valuation Method Selection** ``` - Valuation Method (Radio, Required): - Land and Building Method - Composite Method [Selection determines which sections appear below] ``` --- #### **METHOD A: LAND AND BUILDING METHOD** ##### **Panel 2A: Land Valuation** **Section 1: Land Unit Selection** ``` - Land Unit (Dropdown: Acres-Guntas/Acres-Cents/Sq Mtrs/Sq Yds/Sq Ft, Required) ``` **Section 2: Land Areas** ``` - Land Area as per Document (Number + Unit) - Land Area as per Plan (Number + Unit, if available) - Land Area as per Nala (Number + Unit, if applicable) - Land Area as per Actual (Number + Unit, from Site & Map screen) - Adopted Land Area (Dropdown: Select one of above, Required) [Auto-populate selected area value] ``` **Section 3: Land Deductions** ``` - Road Effected Area (-) (Number + Unit, from Site & Map) - Nala Effected Area (-) (Number + Unit, from Site & Map) - Splay Area (-) (Number + Unit, from Site & Map) - Buffer Area (-) (Number + Unit, from Site & Map) - Net Land Area (Auto-calculated: Adopted Area - Deductions, Read-only) ``` **Section 4: Land Rates** ``` - Rate Type (Dropdown, Required): - Guideline Rate (TGIIC/APIIC/AGRI Guideline) - Market Rate (Manual Entry) [If Guideline Rate selected] - Guideline Rate Source (Dropdown: TGIIC/APIIC/AGRI) - Guideline Rate (Number per Unit, Auto-fetched or manual) - Guideline Rate Effective Date (Date) [If Market Rate selected] - Market Rate (Number per Unit, Manual Entry, Required) - Market Rate Justification (Textarea, Required) - Comparable Sales Reference (Text) - Adopted Land Rate (Number per Unit, Required) ``` **Section 5: Land Valuation Calculation** (Auto-calculated) ``` - Land Value = Net Land Area × Adopted Land Rate (Read-only) - Display: ₹ [Amount] ([Area] [Unit] @ ₹ [Rate] per [Unit]) ``` ##### **Panel 3A: Building Valuation** (Only if Property Type = Independent House or Apartment) **Section 1: Built-up Area Units** ``` - BUA Unit (Dropdown: Sq Mtrs/Sq Ft, Required) ``` **Section 2: Built-up Areas** **For Independent House:** ``` - SBUA (Super Built-up Area) as per Plan (Number + Unit) - SBUA as per Actuals (Number + Unit, from survey) - Permissible/Safe SBUA (Number + Unit, based on FSI) - Adopted SBUA (Dropdown: Select one of above, Required) ``` **For Apartment Flat:** ``` - Total BUA as per Plan (Number + Unit) - BUA as per Actuals (Number + Unit) - Adopted Total BUA (Number + Unit, Required) - UDS of the Flat (Number + Unit, from Property Details) - Flat Carpet Area (Number + Unit, from Property Details) - Parking Area (Number + Unit, from Property Details) ``` **Section 3: Building Rate** ``` - Building Rate Basis (Dropdown: PWD Schedule/Market Rate/Custom) - Building Rate per Unit (Number, Required) - Building Age (Years) - Depreciation Method (Dropdown: Straight Line/Written Down) - Depreciation Percentage (%, Auto or Manual) - Depreciated Building Rate (Number, Auto-calculated) ``` **Section 4: Building Valuation Calculation** (Auto-calculated) ``` - Gross Building Value = Adopted BUA × Building Rate - Depreciation Amount = Gross Value × Depreciation % - Net Building Value = Gross - Depreciation (Read-only) - Display: ₹ [Amount] ([Area] [Unit] @ ₹ [Rate] per [Unit], less [Depreciation]% depreciation) ``` ##### **Panel 4A: Valuation Abstract** (Auto-calculated Summary) ``` - Land Value (₹) - Building Value (₹) - Total Property Value (₹) = Land + Building - Distress Sale Value (₹) (typically 75-80% of Total, configurable) - Forced Sale Value (₹) (typically 50-60% of Total, configurable) - Realizable Value (₹) (typically 90-95% of Total, configurable) ``` --- #### **METHOD B: COMPOSITE METHOD** ##### **Panel 2B: Composite Valuation** **Section 1: Land Areas** (Same as Method A, Panel 2A, Section 2 & 3) ``` - Land Area as per Document (Number + Unit) - Land Area as per Plan (Number + Unit) - Adopted Land Area (Dropdown, Required) - Road Effected Area (-) (Number + Unit) - Nala Effected Area (-) (Number + Unit) - Splay Area (-) (Number + Unit) - Buffer Area (-) (Number + Unit) - Net Land Area (Auto-calculated, Read-only) ``` **Section 2: Composite Rate** (For Flats in Apartments) ``` - UDS (Undivided Share) of the Flat (Number + Unit, from Property Details) - Composite Rate per Unit (Number, Manual Entry, Required) - Composite Rate Basis (Textarea: Justification) ``` **Section 3: Composite Valuation Calculation** (Auto-calculated) ``` - Composite Value = UDS × Composite Rate (Read-only) - Display: ₹ [Amount] ([UDS] [Unit] @ ₹ [Rate] per [Unit]) ``` ##### **Panel 3B: Valuation Abstract** (Auto-calculated Summary) ``` - Composite Property Value (₹) - Distress Sale Value (₹) - Forced Sale Value (₹) - Realizable Value (₹) ``` --- #### **COMMON PANELS (Both Methods)** ##### **Panel 5: Additional Remarks** ``` - Valuation Remarks (Textarea) - Market Conditions (Textarea) - Comparable Sales Data (Textarea) - Recommendations (Textarea) ``` ##### **Panel 6: Inspection Data** (From Property Details, Read-only reference) ``` - Inspection Date (Date) - Inspected By (Text) - Weather Conditions (Text) - Time of Inspection (Time) ``` #### Layout - Single column form with accordion panels - Calculation results highlighted in summary cards - Real-time calculation as values change - Comparison tables for areas (Document vs Plan vs Actual) - Mobile: Single column, collapsible sections #### Attributes Detail **Fields: ~40-50 fields** (varies by method) #### Validation Rules - Adopted areas cannot exceed maximum of all input areas - Rates must be > 0 - Market rate requires justification if > 20% variance from guideline - Depreciation cannot exceed 100% - Deduction areas cannot exceed total area - Abstract values auto-calculated and locked #### Calculations ```javascript // Land Value landValue = netLandArea * adoptedLandRate // Building Value (with depreciation) grossBuildingValue = adoptedBUA * buildingRate depreciationAmount = grossBuildingValue * (depreciationPercentage / 100) netBuildingValue = grossBuildingValue - depreciationAmount // Total (Land & Building Method) totalValue = landValue + netBuildingValue // Composite Method compositeValue = udsArea * compositeRate // Abstract Calculations distressSaleValue = totalValue * 0.75 // configurable forcedSaleValue = totalValue * 0.55 // configurable realizableValue = totalValue * 0.90 // configurable ``` --- ### **SCREEN 9: Document Management Screen** #### Purpose Upload, organize, and manage all property-related documents with version control. #### Layout Structure **Main Area: Document Library with Checklist** #### Information Groups ##### **Section 1: Document Checklist** (Top Panel) ``` Checklist of Required Documents (Bank-specific): [Each item is a checkbox with status indicator] ✓ Title Deeds/AOS - Uploaded (2 files) [View] [Upload More] ✓ Land Approvals - Uploaded (1 file) [View] [Upload More] ⚠ Construction Approvals - Pending [Upload] ✓ Property Tax Receipts - Uploaded (3 files) [View] [Upload More] ✓ Utility Bills (Electricity/Water) - Uploaded (2 files) [View] [Upload More] ○ Sale Agreement - Not Required for this Bank ✓ Survey Plans - Uploaded (1 file) [View] [Upload More] ✓ Building Sanction Plans - Uploaded (1 file) [View] [Upload More] ○ Encumbrance Certificate - Pending [Upload] ○ NOC (if applicable) - Not Applicable ✓ Site Photos - Uploaded (15 photos) [View Gallery] Status Summary: - Required: 10 - Uploaded: 7 - Pending: 2 - Not Applicable: 1 ``` ##### **Section 2: Upload Area** ``` [Drag & Drop Area] Drag files here or [Browse Files] Supported formats: PDF, JPG, PNG, DOC, DOCX, XLS, XLSX Max file size: 10MB per file Max 100 files per valuation - Document Type (Dropdown, Required before upload) - Document Description (Text) - Document Date (Date) - Document Number/Reference (Text) - Is this an updated version? (Toggle) [If Yes] - Replaces Document (Dropdown: Select existing doc) - Version Notes (Text) ``` ##### **Section 3: Document Library** (Main List) **View Options:** - Grid View (Default: Thumbnails) - List View (Table with details) - Group By: Document Type / Upload Date / Uploader **Filters:** - Document Type (Multi-select) - Uploaded By (Multi-select) - Date Range - Status (All/Pending Review/Approved/Rejected) **Grid View Item:** ``` ┌─────────────────────┐ │ [Thumbnail/Icon] │ │ Document Name │ │ Type | Date │ │ Uploaded by │ │ [View] [Download] │ │ [•••More] │ └─────────────────────┘ More Actions: - Edit Details - Replace Version - Mark for Review - Add Comment - Delete (if permitted) - View History - Annotate (for images/PDFs) ``` **List View Columns:** ``` - Thumbnail - Document Name (Link to preview) - Document Type - Document Date - File Size - Uploaded By - Uploaded Date - Version (if multiple versions) - Status (Badge: Pending/Reviewed/Approved) - Actions (Dropdown) ``` ##### **Section 4: Document Preview Panel** (Slide-in from right) ``` When user clicks on a document: [Preview Area] - PDF Viewer with zoom/rotate controls - Image Viewer with zoom/pan - Office docs: Google Docs viewer embed [Document Details] - Document Name - Document Type - Document Date - File Name - File Size - Uploaded By & Date - Version Number - Version History (if applicable) [Annotation Tools] (For images and PDFs) - Add Text - Draw Rectangle - Highlight Area - Add Arrow - Add Comment Pin [Actions] - [Download] [Print] [Share Link] [Delete] - [Replace Version] [Mark Reviewed] [Comments Section] - Threaded comments on this document - [Add Comment] textarea ``` ##### **Section 5: Version History** (Expandable) ``` For documents with multiple versions: Version 3 (Current) - 2024-12-20 10:30 AM by John Doe Notes: Updated with corrected property tax amount [View] [Download] [Compare with previous] Version 2 - 2024-12-15 03:45 PM by John Doe Notes: Added missing page 3 [View] [Download] [Restore this version] Version 1 (Original) - 2024-12-10 09:15 AM by Jane Smith [View] [Download] ``` ##### **Section 6: Bulk Actions** ``` [Select Multiple] (Checkbox mode) - Download Selected (ZIP) - Move to Folder - Change Document Type - Delete Selected - Share Selected (Generate access link) ``` #### Mobile Behavior - Simplified upload: Camera capture or gallery select - List view by default - Swipe actions on list items - Bottom sheet for document preview - Inline annotation tools for images #### Attributes Detail **Document Metadata Fields:** ``` - document_id (UUID, Auto) - valuation_id (FK) - document_type (Enum) - document_name (Text) - document_description (Text) - document_date (Date) - document_number (Text) - file_name (Text) - file_path (Text, S3 URL) - file_size (Number, bytes) - file_type (MIME type) - version_number (Number) - parent_document_id (FK, for versions) - version_notes (Text) - uploaded_by (User ID) - uploaded_at (Timestamp) - reviewed_by (User ID, nullable) - reviewed_at (Timestamp, nullable) - status (Enum: pending/reviewed/approved/rejected) - is_required (Boolean, from checklist) - thumbnail_url (Text, generated) - page_count (Number, for PDFs) - annotations (JSON, for markup data) ``` #### Validation Rules - Mandatory documents must be uploaded before submission to Review - File types validated on upload - Virus scan on upload (backend) - Duplicate file detection (same name + size warning) - Version control: Cannot delete if latest version has comments/approvals #### Technical Features - Progressive upload with progress bar - Chunked upload for large files (>10MB) - Auto-generate thumbnails (backend job) - PDF page preview generation - OCR for text extraction (future enhancement) - Signed URLs for secure access (time-limited) - CDN delivery for fast access --- ### **SCREEN 10: Photo Gallery & Annotation Screen** #### Purpose Dedicated screen for viewing, organizing, and annotating site photographs with geo-location. #### Layout Structure **Gallery View with Preview Panel** #### Information Groups ##### **Section 1: Photo Upload & Organization** **Upload Area:** ``` [Camera Icon] Capture Photo (Mobile only) [Upload Icon] Upload from Device [Bulk Upload] Upload Multiple Upload Options: - Auto geo-tag if location enabled - Auto timestamp - Photo Category (Dropdown) ``` **Photo Categories (Tabs):** ``` [All Photos] [Front View] [Side Views] [Interior] [Boundaries] [Road/Access] [Neighborhood] [Defects] [Other] Count badges on each tab ``` **Gallery Grid:** ``` ┌───────┬───────┬───────┬───────┐ │ Photo │ Photo │ Photo │ Photo │ │ 1 │ 2 │ 3 │ 4 │ │ [📍] │ │ [📍] │ │ [📍] = Geo-tagged └───────┴───────┴───────┴───────┘ ... - Responsive grid: 4 cols (desktop), 3 (tablet), 2 (mobile) - Hover: Overlay with photo details - Click: Open preview panel - Multi-select mode: Checkbox on corner ``` ##### **Section 2: Photo Preview Panel** (Modal or Slide-in) **Main Preview Area:** ``` [Large Photo Display] - Zoom In/Out controls - Pan/Move - Rotate (90° increments) - Fullscreen mode - Previous/Next navigation ``` **Annotation Tools:** (Toolbar above photo) ``` [Pointer] [Rectangle] [Circle] [Arrow] [Text] [Free Draw] [Highlight] [Undo] [Clear All] Annotations stored as SVG overlays on image ``` **Photo Details Panel:** (Right side or below) ``` - Photo ID (Auto) - File Name - Captured/Uploaded Date & Time - Captured By (User) - File Size - Dimensions (px) - Category (Dropdown, editable) - Caption (Text, editable) - Location: - Latitude (if geo-tagged) - Longitude (if geo-tagged) - [View on Map] button - EXIF Data (Collapsible): - Camera Model - ISO, Aperture, Shutter Speed - Flash, White Balance [Update Details] button ``` **Actions:** ``` [Download Original] [Download with Annotations] [Delete Photo] [Set as Primary Photo] [Add to Report] [Share] ``` ##### **Section 3: Bulk Operations** **Selection Mode:** ``` [Select Multiple] (Activates checkbox mode) Bulk Actions: - Change Category - Add Tags - Download Selected (ZIP) - Delete Selected - Add to Report Template - Pin to Map (if geo-tagged) ``` ##### **Section 4: Map View Integration** **Toggle to Map View:** ``` [Grid View] / [Map View] toggle Map View: - Display property map (from Site & Map screen) - Show photo markers at geo-tagged locations - Click marker: Open photo preview - Cluster nearby photos - Photo info popups on hover ``` ##### **Section 5: Photo Comparison** (Special feature) ``` [Compare Mode] (Select 2-4 photos) Split View: ┌─────────────┬─────────────┐ │ Photo 1 │ Photo 2 │ │ (Before) │ (After) │ └─────────────┴─────────────┘ Use Cases: - Compare boundaries at different angles - Before/After construction progress - Document vs Actual comparison ``` ##### **Section 6: Photo Report Generator** ``` [Generate Photo Report] button Options: - Select photos to include - Order: Chronological / By Category / Manual - Layout: Grid / List / Full Page - Include annotations: Yes/No - Include captions: Yes/No - Include location map: Yes/No - Export format: PDF / Word / PPT [Generate] → PDF download ``` #### Mobile-Specific Features - Native camera integration - Auto geo-tagging with GPS - Tap to add quick annotation - Swipe for next/previous photo - Pinch to zoom - Offline mode: Queue uploads for when online #### Attributes Detail **Photo Metadata:** ``` - photo_id (UUID) - valuation_id (FK) - category (Enum) - caption (Text) - file_name (Text) - file_path (Text, S3 URL) - file_size (Number, bytes) - thumbnail_path (Text, S3 URL) - width (Number, px) - height (Number, px) - latitude (Number, decimal degrees) - longitude (Number, decimal degrees) - gps_accuracy (Number, meters) - captured_at (Timestamp) - uploaded_by (User ID) - uploaded_at (Timestamp) - exif_data (JSON) - annotations (JSON, SVG data) - is_primary (Boolean) - display_order (Number) - status (Enum: active/deleted) ``` #### Validation Rules - Max 100 photos per valuation (configurable) - File size: Max 10MB per photo (auto-compress if larger) - Formats: JPG, PNG, HEIC (auto-convert HEIC to JPG) - Minimum dimension: 800x600 px - GPS coordinates must be within reasonable range of property location #### Technical Features - Auto-generate multiple thumbnail sizes (150x150, 300x300, 800x600) - Lazy loading for gallery - Image optimization on upload - Progressive JPEG for faster loading - Cloud storage with CDN - Watermark option (configurable) --- ### **SCREEN 11: Review Queue Screen** #### Purpose Dedicated screen for reviewers to view assigned valuations awaiting review. #### Information Groups ##### **Section 1: Queue Filters & Stats** **Top Stats Bar:** ``` ┌────────────────┬────────────────┬────────────────┬────────────────┐ │ Pending Review │ Reviewed Today │ Queries Raised │ Overdue │ │ 15 │ 8 │ 3 │ 2 │ └────────────────┴────────────────┴────────────────┴────────────────┘ ``` **Filters Panel:** (Collapsible) ``` - Priority (All/High/Medium/Low) - Bank (Multi-select) - Property Type (Multi-select) - Assigned Date Range - Due Date Range - Search (Valuation ID, Property Address) ``` ##### **Section 2: Review Queue List** **Table View:** ``` Columns: - Priority (Badge: High 🔴/Medium 🟠/Low 🟢) - Valuation ID (Link) - Bank - Property Address - Property Type - Surveyor - Key-in Operator - Submitted Date - Due Date (with countdown) - Status (Badge: Pending Review/In Review/Query Raised) - Actions (Dropdown: Review/Assign to Another/View Details) Sorting: Click column headers Default Sort: Priority (High first), then Due Date (earliest first) ``` **Row Interactions:** - Click row: Open review panel - Hover: Highlight row - Right-click: Context menu ##### **Section 3: Review Detail Panel** (Slide-in from right, or modal) **Header:** ``` Valuation ID: VAL-2024-1220-0001 Property: Plot No 123, Hitech City, Hyderabad Bank: HDFC Bank | Property Type: Independent House Status: Pending Review | Priority: High Due Date: 2024-12-22 (2 days remaining) ``` **Tabs:** **Tab 1: Summary Review** ``` Checklist Review: [Show side-by-side: Expected vs Actual] ✓ Basic Information Complete ✓ Property Details Complete ✓ Site & Map Data Complete ⚠ Boundary Variance: 12% (Needs attention) ✓ Valuation Calculated ⚠ Mandatory Documents: 2 Pending ✓ Site Photos: 15 Uploaded Risk Indicators: 🔴 High Variance: Boundary dimensions 🟠 Moderate: Document pending 🟢 Low Risk: Valuation within range Auto-generated Review Notes: - Boundary variance exceeds 10% threshold - Construction Approvals document pending - Land value uses market rate (requires justification review) ``` **Tab 2: Detailed Review** (Accordion panels for each section) ``` ▼ Basic Information [Edit Comments] - Fields displayed in read-only format - [Add Comment] button for each field - Status: ✓ Approved / ⚠ Needs Correction ▼ Property Details [Edit Comments] - Same format ▼ Site & Map [View Map] - Embedded map preview - Boundary overlay - [Open Full Map] button ▼ Valuation & Calculation [Review Calculations] - Calculation breakdown - Rate justification - [Recalculate] if needed ▼ Documents [View All] - Document checklist status - Quick preview links ▼ Photos [View Gallery] - Photo count and categories - [Open Gallery] link ``` **Tab 3: Comments & Queries** ``` [Add General Comment] textarea Comment History: ┌────────────────────────────────────────────────────────────┐ │ Reviewer: "Boundary dimensions have 12% variance" │ │ 2024-12-20 10:30 AM by John Reviewer │ │ └─ Surveyor Reply: "Actual measured with GPS" │ │ 2024-12-20 11:00 AM by Jane Surveyor │ └────────────────────────────────────────────────────────────┘ [Raise Query] button → Opens query form: - Query Category (Dropdown: Boundary/Document/Calculation/Other) - Description (Textarea, Required) - Assigned To (Dropdown: Surveyor/Key-in/Creator) - Priority (High/Medium/Low) - Attach Document (Optional) [Send Query] ``` **Tab 4: Comparison** (If previous valuations exist) ``` Compare with Previous Valuations: - Select previous valuation (Dropdown) - Side-by-side comparison table - Variance highlights ``` ##### **Section 4: Review Actions** (Bottom sticky bar) ``` [Reject] [Raise Query] [Request Changes] [Approve & Forward] Action Modals: **Reject:** - Rejection Reason (Textarea, Required) - Notify: [Checkboxes: Surveyor, Key-in, Creator, Team Lead] [Confirm Reject] **Raise Query:** (See Tab 3 form above) **Request Changes:** - Change Request Details (Textarea, Required) - Specific Fields to Correct (Checklist, Optional) - Reassign to Stage (Dropdown: Survey/Data Entry/Current Stage) [Submit Change Request] **Approve & Forward:** - Review Remarks (Textarea, Optional) - Forward to Approver (Dropdown: Auto-select or choose) - Priority (High/Medium/Low) [Approve & Forward] ``` #### Workflow Integration ``` Current Stage: Review Next Stage: Approval (on Approve) / Previous Stage (on Reject/Change Request) Status Updates: - Review Started: Auto-updated when reviewer opens detail panel - Review Completed: Updated on action (Approve/Reject/Query) - Query Raised: Status changes to "Query Raised", assigned back to relevant role - Approved: Status changes to "In Approval", assigned to Approver ``` #### Attributes Detail **Fields: All valuation data in read-only mode + Review metadata** #### Validation Rules - Cannot approve if mandatory documents missing - Boundary variance > 15% requires approver override - Market rate > 120% of guideline rate requires justification - Land-locked property requires acknowledgment #### Mobile Behavior - Simplified review checklist - Swipe cards for different valuations - Bottom sheet for actions - Voice input for comments (English) --- ### **SCREEN 12: Approval Screen** #### Purpose Final approval or rejection of reviewed valuations by authorized approvers. #### Layout & Information Groups **Similar to Review Queue Screen (Screen 11) with following differences:** ##### **Section 1: Approval Queue Stats** ``` ┌──────────────┬──────────────┬──────────────┬──────────────┐ │ Pending │ Approved │ Rejected │ Overdue │ │ Approval │ Today │ Today │ │ │ 12 │ 5 │ 1 │ 1 │ └──────────────┴──────────────┴──────────────┴──────────────┘ ``` ##### **Section 2: Approval Detail Panel** **Additional Tab: Reviewer Comments** ``` Review History: - Reviewer Name - Review Date - Review Remarks - Corrections Made (if any) - Attachments (if any) ``` **Additional Tab: Approval History** (If multi-level approval) ``` Approval Chain: Level 1: Pending (Current) Level 2: [Will be auto-assigned after Level 1] Level 3: [Will be auto-assigned after Level 2] Previous Approvals (if any): - Approver Name - Approval Date - Remarks - Conditions (if any) ``` ##### **Section 3: Approval Actions** (Bottom sticky bar) ``` [Reject] [Send Back to Review] [Approve with Conditions] [Approve] **Approve:** - Approval Remarks (Textarea, Optional) - Conditions (if any) (Textarea, Optional) - Validity Period (Date range, Optional) - Generate Report (Checkbox: Auto-generate PDF report after approval) - Notify: [Checkboxes: Creator, Surveyor, Reviewer, Bank Contact] [Confirm Approval] **Approve with Conditions:** - Conditions (Textarea, Required) - Validity Period (Date range, Required) - Follow-up Required (Checkbox + Date) [Approve with Conditions] **Send Back to Review:** - Reason (Textarea, Required) - Specific Concerns (Textarea) - Reassign to Reviewer (Dropdown) [Send Back] **Reject:** - Rejection Reason (Textarea, Required) - Notify: [Checkboxes: All stakeholders] [Confirm Rejection] ``` ##### **Section 4: Final Valuation Summary** (Read-only) ``` Property Valuation Summary: - Land Value: ₹ X,XX,XXX - Building Value: ₹ X,XX,XXX - Total Property Value: ₹ XX,XX,XXX - Distress Sale Value: ₹ XX,XX,XXX - Forced Sale Value: ₹ XX,XX,XXX - Realizable Value: ₹ XX,XX,XXX Valuation Method: [Land and Building Method / Composite Method] Valuation Date: [Date] Validity Period: [Date range] ``` #### Workflow Integration ``` Current Stage: Approval Next Stage: Approved (on Approve) / Review (on Send Back) / Rejected (on Reject) Status Updates: - Approval Started: Auto-updated when approver opens detail panel - Approved: Status changes to "Approved", valuation locked - Rejected: Status changes to "Rejected" - Sent Back: Status changes to "In Review", reassigned to reviewer Lock Behavior: - After approval, valuation data is locked (read-only) - Only Admin/Shadow Login can unlock - Audit trail maintained for all changes ``` #### Multi-level Approval (If configured) ``` If Bank requires multi-level approval: - Level 1 Approver approves → Auto-assign to Level 2 - Level 2 Approver approves → Auto-assign to Level 3 (if exists) - Final Level approves → Valuation marked "Approved" Each level has same approval screen with visibility of previous level remarks ``` #### Attributes Detail **Fields: All valuation data in read-only mode + Approval metadata** #### Validation Rules - Cannot approve if reviewer has not approved - Cannot approve if critical queries are open - Approval with conditions requires validity period - Multi-level approval: Each level must approve in sequence --- ### **SCREEN 13: Reports Dashboard** #### Purpose Visual dashboard with key metrics, charts, and report generation. #### Information Groups ##### **Section 1: Date Range & Filters** ``` [Date Range Picker] (Preset: Today/This Week/This Month/This Quarter/This Year/Custom) [Bank Filter] (Multi-select) [Property Type Filter] (Multi-select) [Refresh] button [Export Dashboard] (PDF/Excel) ``` ##### **Section 2: KPI Cards** (Top Row) ``` ┌─────────────────┬─────────────────┬─────────────────┬─────────────────┐ │ Total │ Completed │ In Progress │ Average TAT │ │ Valuations │ Valuations │ │ │ │ 250 │ 180 (72%) │ 45 (18%) │ 5.2 days │ │ ↑ 15% vs last │ ↑ 10% vs last │ ↓ 5% vs last │ ↓ 0.8 days │ └─────────────────┴─────────────────┴─────────────────┴─────────────────┘ ┌─────────────────┬─────────────────┬─────────────────┬─────────────────┐ │ Pending │ Queries │ Rejections │ Total Value │ │ Approvals │ Open │ │ (₹ Crores) │ │ 25 │ 12 │ 8 (3.2%) │ 125.5 │ │ 3 overdue │ 4 overdue │ ↓ 2% vs last │ ↑ 18% vs last │ └─────────────────┴─────────────────┴─────────────────┴─────────────────┘ ``` ##### **Section 3: Charts** (Grid Layout) **Row 1: Workflow & Status** ``` ┌──────────────────────────────────┬──────────────────────────────────┐ │ Valuations by Status (Pie) │ Workflow Funnel (Funnel Chart) │ │ │ │ │ - Draft: 15 │ Created: 250 │ │ - In Survey: 25 │ └─ Surveyed: 220 │ │ - Submitted: 20 │ └─ Submitted: 200 │ │ - In Review: 18 │ └─ Reviewed: 190 │ │ - In Approval: 12 │ └─ Approved: 180 │ │ - Approved: 180 │ │ │ - Rejected: 8 │ Conversion Rate: 72% │ └──────────────────────────────────┴──────────────────────────────────┘ ``` **Row 2: Trends & Performance** ``` ┌──────────────────────────────────┬──────────────────────────────────┐ │ Valuations Over Time (Line) │ TAT by Stage (Bar Chart) │ │ │ │ │ [Line chart: X=Date, Y=Count] │ Survey: 2.1 days (avg) │ │ Showing daily/weekly/monthly │ Data Entry: 1.5 days │ │ trend based on date range │ Review: 1.2 days │ │ │ Approval: 0.8 days │ │ │ Target: 5 days (total) │ └──────────────────────────────────┴──────────────────────────────────┘ ``` **Row 3: Distribution & Analysis** ``` ┌──────────────────────────────────┬──────────────────────────────────┐ │ Valuations by Bank (Bar) │ Valuations by Property Type (Pie)│ │ │ │ │ HDFC: 80 │ - Plot: 100 (40%) │ │ SBI: 65 │ - Independent House: 90 (36%) │ │ ICICI: 55 │ - Apartment: 60 (24%) │ │ Axis: 30 │ │ │ Others: 20 │ │ └──────────────────────────────────┴──────────────────────────────────┘ ``` **Row 4: Valuation Analytics** ``` ┌──────────────────────────────────┬──────────────────────────────────┐ │ Avg Property Value by Type (Bar)│ Value Distribution (Histogram) │ │ │ │ │ Plot: ₹ 45L │ [Histogram: Value ranges] │ │ Independent House: ₹ 75L │ < 25L: 50 │ │ Apartment: ₹ 55L │ 25-50L: 80 │ │ │ 50-75L: 60 │ │ │ 75L-1Cr: 40 │ │ │ > 1Cr: 20 │ └──────────────────────────────────┴──────────────────────────────────┘ ``` **Row 5: Team Performance** ``` ┌──────────────────────────────────┬──────────────────────────────────┐ │ Top Performers (Table) │ Workload by Team Member (Bar) │ │ │ │ │ Surveyor | Completed | Avg TAT │ [Bar chart: X=User, Y=Count] │ │ John | 45 | 2.1 days │ Active assignments per user │ │ Jane | 42 | 2.3 days │ Color-coded by status │ │ Bob | 38 | 2.5 days │ │ └──────────────────────────────────┴──────────────────────────────────┘ ``` ##### **Section 4: Quick Report Generation** ``` [Generate Standard Reports] (Dropdown) - Daily Status Report - Weekly Summary Report - Monthly MIS Report - Aging Report (> 5 days) - Bank-wise Summary - Valuation Register - Query Analysis Report - Rejection Analysis Report [Generate] button → PDF/Excel download ``` ##### **Section 5: Saved Reports** (List) ``` Recent Reports: - Monthly_MIS_Dec2024.pdf - Generated on 2024-12-20 [Download] - Aging_Report_2024-12-19.xlsx - Generated on 2024-12-19 [Download] - Bank_Summary_HDFC_Q4.pdf - Generated on 2024-12-15 [Download] [View All Reports] ``` #### Mobile Behavior - Single column layout - Swipe between chart sections - Simplified KPI cards (2 per row) - Tap chart for full-screen view --- ### **SCREEN 14: Custom Report Builder** #### Purpose Advanced report builder for creating custom reports with filters and templates. #### Information Groups ##### **Section 1: Report Configuration** **Step 1: Select Report Type** ``` (Radio buttons) ○ Valuation Register ○ Valuation Summary ○ Document Status Report ○ Workflow Analysis ○ Financial Summary (Valuation Values) ○ Comparison Report ○ Custom Query (Advanced users) ``` **Step 2: Select Date Range** ``` [Date Range Picker] From: [Date] To: [Date] Presets: [This Month] [Last Month] [This Quarter] [This Year] [All Time] ``` **Step 3: Select Filters** ``` - Bank (Multi-select dropdown) - Property Type (Multi-select: Plot/Independent House/Apartment) - Status (Multi-select: Draft/In Survey/...) - Priority (Multi-select: High/Medium/Low) - Assigned To (Multi-select: Users) - Location Filters: - State (Multi-select) - District (Multi-select) - Mandal (Multi-select) - Value Range: - Min Value (₹) - Max Value (₹) - Custom Filters (Advanced): [Add Custom Filter] → Field, Operator, Value ``` **Step 4: Select Columns/Fields** (For tabular reports) ``` Available Fields: Selected Fields: [Search fields] [Reorder drag-drop list] □ Valuation ID ──→ ☑ Valuation ID □ Bank Name ──→ ☑ Bank Name □ Applicant Name ──→ ☑ Applicant Name □ Property Address ──→ ☑ Property Address □ Property Type ──→ ☑ Property Type □ Status ──→ ☑ Status □ Total Value ──→ ☑ Total Value ... (100+ fields) ... (Selected fields) [Select All] [Deselect All] [Move Up] [Move Down] [Remove] ``` **Step 5: Grouping & Sorting** ``` Group By: (Dropdown: None/Bank/Property Type/Status/District/Month) Sort By: (Dropdown: Valuation ID/Date/Value/Status) Sort Order: (Radio: Ascending/Descending) ``` **Step 6: Output Format** ``` (Radio buttons) ○ PDF Report (Formatted) ○ Excel Spreadsheet (Tabular) ○ CSV (Data export) ○ JSON (API export) Include: ☑ Summary Statistics ☑ Charts (if applicable) ☑ Detailed Data ☑ Appendices (Documents list) □ Photos (Warning: Large file size) ``` ##### **Section 2: Report Preview** (Optional) ``` [Generate Preview] button Preview Panel: - Shows first 10 rows of report - Summary statistics - Chart previews [Close Preview] ``` ##### **Section 3: Save & Generate** ``` Report Name: [Text input] (Optional, for saving configuration) Description: [Textarea] (Optional) ☑ Save this report configuration for future use ☑ Schedule this report (Checkbox) [If checked] - Frequency: (Dropdown: Daily/Weekly/Monthly/Quarterly) - Day/Date: (Dependent on frequency) - Email To: (Multi-select: Users/Email addresses) [Generate Report] [Save Configuration] [Cancel] ``` ##### **Section 4: Saved Report Templates** (List) ``` My Saved Reports: ┌─────────────────────────────────────────────────────────────┐ │ Monthly HDFC Summary │ │ Filters: Bank=HDFC, Date=This Month │ │ Last Run: 2024-12-20 | [Run] [Edit] [Delete] [Schedule] │ ├─────────────────────────────────────────────────────────────┤ │ Weekly Aging Report │ │ Filters: Status=In Progress, Date > 5 days │ │ Last Run: 2024-12-18 | [Run] [Edit] [Delete] [Schedule] │ └─────────────────────────────────────────────────────────────┘ [Create New Template] ``` ##### **Section 5: Scheduled Reports** (List) ``` Scheduled Reports: ┌─────────────────────────────────────────────────────────────┐ │ Monthly MIS Report │ │ Frequency: Monthly (1st of month) │ │ Recipients: admin@jr-solutions.com, manager@jr-solutions.com│ │ Next Run: 2025-01-01 | [Pause] [Edit] [Delete] │ └─────────────────────────────────────────────────────────────┘ ``` #### Advanced Features ##### **Custom Query Builder** (For advanced users) ``` [SQL Query Editor] (For admin users only) SELECT * FROM valuations WHERE bank_id = 'HDFC' AND created_at >= '2024-01-01' AND status = 'Approved' ORDER BY valuation_date DESC [Validate Query] [Execute] [Save] Safety: Read-only queries only, no INSERT/UPDATE/DELETE ``` ##### **Data Export API** ``` [Generate API Endpoint] button Returns: API Endpoint: https://api.jr-solutions.com/reports/export/{report_id} API Token: [Show/Hide] [Copy] Expiry: 30 days Use this endpoint to integrate reports with external systems. ``` #### Mobile Behavior - Simplified wizard (step-by-step) - Limited to common report types - Fewer filter options - Email report option (instead of download) --- ### **SCREEN 15: User Management Screen** #### Purpose Manage users, roles, permissions, and team assignments (Admin only). #### Information Groups ##### **Section 1: User List** **Filters:** ``` - Search (Name, Email, Employee ID) - Role (Multi-select: All roles) - Status (Active/Inactive/Locked) - Department/Team ``` **Table:** ``` Columns: - Photo (Avatar) - Name (Link to user detail) - Employee ID - Email - Mobile - Role(s) (Multi-select badges) - Team/Department - Status (Active/Inactive/Locked) - Last Login - Actions (Edit/Deactivate/Reset Password/Assign Role) Bulk Actions: - Activate/Deactivate Selected - Assign to Team - Export User List ``` ##### **Section 2: Add/Edit User** (Modal or Slide-in) **Personal Information:** ``` - First Name (Text, Required) - Last Name (Text, Required) - Employee ID (Text, Required, Unique) - Email (Email, Required, Unique) - Mobile (Text, Required, 10 digits) - Photo (Upload, Optional) ``` **Role & Permissions:** ``` - Primary Role (Dropdown: Creator/Surveyor/Key-in/Reviewer/Approver/Team Lead/Admin, Required) - Additional Roles (Multi-select: Optional secondary roles) - Team/Department (Dropdown) - Reports To (Dropdown: Team Lead/Manager) ``` **Account Settings:** ``` - Status (Radio: Active/Inactive) - Account Expiry Date (Date, Optional) - Password Policy (Dropdown: Default/Strict/Custom) - Two-Factor Authentication (Toggle: Enable/Disable) - Allow Mobile Login (Toggle: Yes/No) ``` **Access Restrictions:** (Optional) ``` - Restrict to Banks (Multi-select: Leave empty for all banks) - Restrict to Locations (Multi-select: State/District) - IP Whitelist (Textarea: Comma-separated IPs) - Working Hours (Time range: From-To, Optional) ``` **Actions:** ``` [Save User] [Send Welcome Email] [Cancel] ``` ##### **Section 3: Role Management** **Predefined Roles:** (Table) ``` Role | Description | Users | Actions Creator | Creates valuation drafts | 15 | [Edit Permissions] [View Users] Surveyor | Site visit & data capture | 25 | [Edit Permissions] [View Users] Key-in | Data entry & calculations | 20 | [Edit Permissions] [View Users] Reviewer | Reviews valuations | 10 | [Edit Permissions] [View Users] Approver | Final approval | 5 | [Edit Permissions] [View Users] Team Lead | Team management | 3 | [Edit Permissions] [View Users] Admin | System administration | 2 | [Edit Permissions] [View Users] [Create Custom Role] ``` **Role Permissions Matrix:** (Edit Permissions Modal) ``` Module | View | Create | Edit | Delete | Approve | Export Dashboard | ✓ | - | - | - | - | ✓ Valuations | ✓ | ✓ | ✓ | ✗ | - | ✓ Approvals | ✓ | - | ✗ | ✗ | ✓ | ✓ Documents | ✓ | ✓ | ✓ | ✓ | - | ✓ Reports | ✓ | - | - | - | - | ✓ Admin | ✗ | ✗ | ✗ | ✗ | - | ✗ [Save Permissions] ``` ##### **Section 4: Team Management** **Teams/Departments:** ``` List of Teams: ┌─────────────────────────────────────────────────────────────┐ │ Survey Team A │ │ Team Lead: John Doe | Members: 8 | Active Valuations: 25 │ │ [View Members] [Edit Team] [Assign Work] │ ├─────────────────────────────────────────────────────────────┤ │ Survey Team B │ │ Team Lead: Jane Smith | Members: 10 | Active Valuations: 30│ │ [View Members] [Edit Team] [Assign Work] │ └─────────────────────────────────────────────────────────────┘ [Create New Team] ``` **Team Details:** (Modal) ``` - Team Name (Text, Required) - Team Lead (Dropdown: Users with Team Lead role) - Members (Multi-select: Users) - Default Assignment Rules: - Auto-assign by location (Toggle) - Auto-assign by workload (Toggle) - Max active assignments per member (Number) - Coverage Areas: - States (Multi-select) - Districts (Multi-select) [Save Team] ``` ##### **Section 5: Audit Log** (Admin only) **Filters:** ``` - Date Range - User (Multi-select) - Action Type (Login/Create/Edit/Delete/Approve/...) - Module (Dashboard/Valuations/...) ``` **Table:** ``` Columns: - Timestamp - User (Name + Role) - Action (Badge: Create/Edit/Delete/Login/...) - Module/Screen - Record ID (Link to record) - IP Address - Device/Browser - Changes (JSON diff, expandable) [Export Audit Log] ``` #### Mobile Behavior - Simplified user list - Basic edit functionality - Role assignment - No advanced features (team/audit) --- ### **SCREEN 16: Reference Data Management** #### Purpose Manage master data, lookups, and configuration (Admin only). #### Information Groups ##### **Section 1: Master Data Categories** (Tab Navigation) **Tabs:** ``` [Banks] [Property Types] [Document Types] [Locations] [Rates] [Lookups] [System Config] ``` --- #### **TAB 1: Banks** **Bank List:** ``` Table: - Bank Name (Text) - Bank Code (Text, Unique) - Logo (Image) - Status (Active/Inactive) - SLA Days (Number) - Multi-level Approval (Toggle) - Contact Person (Text) - Email (Email) - Mobile (Text) - Actions (Edit/Deactivate/Configure) [Add New Bank] ``` **Add/Edit Bank:** (Modal) ``` - Bank Name (Text, Required) - Bank Code (Text, Required, Unique) - Logo (Upload, Optional) - Status (Active/Inactive) - SLA Days (Number, Default: 5, Required) - Multi-level Approval Required (Toggle) [If Yes] - Number of Approval Levels (Number: 1-3) - Contact Information: - Contact Person (Text) - Email (Email) - Mobile (Text) - Address (Textarea) - Report Template (Upload: Custom PDF/Word template, Optional) - Bank-Specific Fields Configuration (Link to Screen 17) [Save Bank] ``` --- #### **TAB 2: Property Types** **Property Type List:** ``` Table: - Property Type (Text) - Code (Text, Unique) - Status (Active/Inactive) - Default Valuation Method (Dropdown) - Actions (Edit/Deactivate) Default Types: - Plot - Independent House - Apartment/Flat [Add New Property Type] ``` --- #### **TAB 3: Document Types** **Document Type List:** ``` Table: - Document Type (Text) - Category (Dropdown: Legal/Financial/Technical/Other) - Is Mandatory (Toggle) - Bank-Specific (Multi-select: Banks) - Property Type-Specific (Multi-select: Types) - File Formats Allowed (Text: PDF, JPG, PNG, DOC) - Max File Size (Number, MB) - Status (Active/Inactive) - Display Order (Number) - Actions (Edit/Deactivate) Default Types: - Title Deeds/AOS - Land Approvals - Construction Approvals - Property Tax Receipts - Utility Bills - ... (from Excel data) [Add New Document Type] ``` --- #### **TAB 4: Locations** **Location Hierarchy:** ``` Tree View: 📁 Telangana (State) 📁 Hyderabad (District) 📁 Serilingampally (Mandal) 📄 Madhapur (Village) 📄 Gachibowli (Village) 📄 Kondapur (Village) 📁 Kukatpally (Mandal) 📄 KPHB (Village) 📄 Miyapur (Village) 📁 Rangareddy (District) 📁 Rajendranagar (Mandal) 📄 Attapur (Village) 📄 Narsingi (Village) [Add State] [Add District] [Add Mandal] [Add Village] [Import from CSV] ``` **Add/Edit Location:** (Modal) ``` - Location Type (Dropdown: State/District/Mandal/Village) - Parent Location (Dropdown: Dependent on type) - Location Name (Text, Required) - Location Code (Text, Unique) - Pincode(s) (Textarea: Comma-separated, for Village level) - Status (Active/Inactive) [Save Location] ``` --- #### **TAB 5: Rates** **Rate Master:** ``` Filters: - Location (State/District/Mandal/Village) - Rate Type (Guideline/Market) - Effective Date Range Table: - Location (Hierarchy display) - Rate Type (TGIIC/APIIC/AGRI/Market) - Rate per Unit (₹) - Unit (Dropdown: Sq Ft/Sq Yard/Sq Mtr/Acre) - Effective From Date - Effective To Date (Optional) - Status (Active/Inactive) - Updated By - Updated Date - Actions (Edit/Deactivate/History) [Add New Rate] [Import Rates CSV] [Export] ``` **Add/Edit Rate:** (Modal) ``` - Location (Cascading dropdowns: State → District → Mandal → Village) - Rate Type (Dropdown: TGIIC/APIIC/AGRI/Market, Required) - Rate per Unit (Number, Required) - Unit (Dropdown: Sq Ft/Sq Yard/Sq Mtr/Acre, Required) - Effective From Date (Date, Required) - Effective To Date (Date, Optional) - Status (Active/Inactive) - Remarks (Textarea) [Save Rate] ``` --- #### **TAB 6: Lookups** **Lookup Categories:** ``` (Accordion panels) ▼ Site Characteristics - Shape of Site: Regular, Irregular, Rectangular, ... - Level: Plain, Undulated, Sloped - Nature of Site: Dry, Waterlogged, Rocky, ... [Edit] [Add New] ▼ Locality Classification - Locality Type: Urban, Rural, Semi Urban - Locality Class: Posh, Upper Middle Class, ... [Edit] [Add New] ▼ Building Specifications - Building Type: RCC, Load Bearing, ... - Floor Type: Ground, First, Second, ... [Edit] [Add New] ▼ Compliance Types - Compliance Category: NDMA, NBC 2005, HT Lines, ... [Edit] [Add New] ▼ Workflow Statuses - Status: Draft, In Survey, Submitted, ... - Priority: High, Medium, Low [Edit] [Add New - Caution: May affect workflow] ... (20+ lookup categories) ``` **Edit Lookup Values:** (Inline edit or modal) ``` Lookup Category: [Category Name] Values: ┌───────────────────┬──────────────┬─────────────────────┐ │ Value │ Display Order│ Actions │ ├───────────────────┼──────────────┼─────────────────────┤ │ Regular │ 1 │ [↑] [↓] [Edit] [×] │ │ Irregular │ 2 │ [↑] [↓] [Edit] [×] │ │ Rectangular │ 3 │ [↑] [↓] [Edit] [×] │ │ ... │ ... │ ... │ └───────────────────┴──────────────┴─────────────────────┘ [Add New Value] ``` --- #### **TAB 7: System Configuration** **Configuration Groups:** ``` (Accordion panels) ▼ General Settings - Application Name (Text) - Application Logo (Upload) - Default Language (Dropdown: English/Telugu/Hindi) - Date Format (Dropdown: DD-MM-YYYY / MM-DD-YYYY / YYYY-MM-DD) - Currency (Dropdown: INR) - Timezone (Dropdown: Asia/Kolkata) [Save] ▼ Workflow Settings - Default SLA Days (Number, Default: 5) - Auto-assignment Enabled (Toggle) - Query Response SLA (Number, Days) - Approval Levels (Number: 1-3) - Allow Workflow Backward Movement (Toggle) [Save] ▼ Validation Rules - Boundary Variance Threshold (Number, %, Default: 10) - FSI Variance Threshold (Number, %, Default: 5) - Market Rate Variance Threshold (Number, %, Default: 20) - Mandatory Document Check (Toggle) [Save] ▼ File Upload Settings - Max File Size per Upload (Number, MB, Default: 10) - Max Photos per Valuation (Number, Default: 100) - Max Documents per Valuation (Number, Default: 100) - Allowed Image Formats (Text: JPG, PNG, HEIC) - Allowed Document Formats (Text: PDF, DOC, DOCX, XLS, XLSX) [Save] ▼ Email/Notification Settings - SMTP Server (Text) - SMTP Port (Number) - SMTP Username (Text) - SMTP Password (Password) - From Email (Email) - Email Notifications Enabled (Toggle) - SMS Notifications Enabled (Toggle) - SMS Gateway API (Text) [Test Connection] [Save] ▼ Security Settings - Password Minimum Length (Number, Default: 8) - Password Requires Special Characters (Toggle) - Password Expiry Days (Number, Default: 90) - Session Timeout (Number, Minutes, Default: 30) - Max Login Attempts (Number, Default: 5) - Two-Factor Authentication (Dropdown: Optional/Mandatory/Disabled) [Save] ▼ Integration Settings - Google Maps API Key (Text) - Storage Provider (Dropdown: AWS S3/Azure Blob/GCP Storage/Cloudflare R2) - Storage Bucket Name (Text) - Storage Access Key (Text) - Storage Secret Key (Password) [Test Connection] [Save] ``` #### Mobile Behavior - View-only mode for most settings - Edit only critical settings - No bulk operations --- ### **SCREEN 17: Bank Configuration Screen** #### Purpose Configure bank-specific fields, validation rules, and report templates (Admin only). #### Information Groups ##### **Section 1: Bank Selection** ``` Select Bank: [Dropdown: All banks] Bank Info: Name, Code, SLA Days, Approval Levels [Edit Bank Details] (Links to Screen 16) ``` ##### **Section 2: Bank-Specific Fields Configuration** **Tab Navigation:** ``` [Basic Info] [Property Details] [Valuation] [Documents] [Workflow] ``` **Tab: Basic Info** ``` Field Configuration Table: ┌─────────────────────────────┬──────────┬───────────┬────────────────┐ │ Field Name │ Visible │ Mandatory │ Custom Label │ ├─────────────────────────────┼──────────┼───────────┼────────────────┤ │ Applicant Name │ ✓ Always │ ✓ │ Borrower Name │ │ Co-Applicant Name │ ✓ │ ✗ │ │ │ PAN Number (Custom Field) │ ✓ │ ✓ │ PAN Number │ │ Aadhaar Number (Custom) │ ✓ │ ✗ │ Aadhaar No │ │ ... │ ... │ ... │ ... │ └─────────────────────────────┴──────────┴───────────┴────────────────┘ [Add Custom Field] button ``` **Add Custom Field:** (Modal) ``` - Field Name (Text, Required) - Field Label (Text, Required) - Field Type (Dropdown: Text/Number/Date/Dropdown/Checkbox/Textarea, Required) - Section (Dropdown: Basic Info/Property Details/..., Required) - Is Mandatory (Toggle) - Default Value (Dependent on field type) - Validation Rules (Textarea: Regex or rules) - Help Text (Text) - Display Order (Number) [Save Custom Field] ``` **Tab: Property Details** (Same structure as Basic Info tab, for Property Details fields) **Tab: Valuation** ``` Valuation Method: - Allowed Methods for this Bank (Checkboxes): ☑ Land and Building Method ☑ Composite Method - Default Method (Radio: Based on above selection) Abstract Configuration: - Distress Sale Value % (Number, Default: 75) - Forced Sale Value % (Number, Default: 55) - Realizable Value % (Number, Default: 90) Calculation Rules: - Building Depreciation Method (Dropdown: Straight Line/Written Down) - Max Depreciation % (Number, Default: 100) - Rate Variance Alert Threshold (Number, %, Default: 20) [Save Configuration] ``` **Tab: Documents** ``` Document Checklist for this Bank: ┌─────────────────────────────┬───────────┬──────────────────────┐ │ Document Type │ Mandatory │ Auto-request at Stage│ ├─────────────────────────────┼───────────┼──────────────────────┤ │ Title Deeds/AOS │ ✓ │ Draft │ │ Land Approvals │ ✓ │ Survey │ │ Construction Approvals │ ✗ │ N/A │ │ Property Tax Receipts │ ✓ │ Data Entry │ │ Bank-specific Document 1 │ ✓ │ Draft │ │ ... │ ... │ ... │ └─────────────────────────────┴───────────┴──────────────────────┘ [Add Document Requirement] ``` **Tab: Workflow** ``` Approval Configuration: - Number of Approval Levels (Radio: 1/2/3) - Level 1 Approver Role (Dropdown: Roles) - Level 2 Approver Role (Dropdown: Roles, if applicable) - Level 3 Approver Role (Dropdown: Roles, if applicable) SLA Configuration: - Total SLA Days (Number, Default: 5) - Stage-wise SLA: - Survey (Number, Days) - Data Entry (Number, Days) - Review (Number, Days) - Approval (Number, Days) Notification Rules: - Notify on Creation (Checkboxes: Roles) - Notify on Query (Checkboxes: Roles) - Notify on Approval (Checkboxes: Roles) - Notify on Rejection (Checkboxes: Roles) [Save Configuration] ``` ##### **Section 3: Report Template Configuration** ``` Current Template: [Bank Name] Default Template Template Preview: [PDF/Word preview] [Upload New Template] (Upload .docx or .pdf with placeholders) Placeholder Documentation: Available Placeholders for Template: - {{valuation_id}} - {{bank_name}} - {{applicant_name}} - {{property_address}} - {{land_value}} - {{building_value}} - {{total_value}} - ... (100+ placeholders) [View Full Placeholder List] Template Status: ✓ Template Uploaded ✓ Placeholders Validated ✓ Sample Report Generated [Test Template] (Generate sample PDF with test data) [Download Current Template] [Restore Default Template] [Save] ``` ##### **Section 4: Bank Portal Integration** (Future enhancement) ``` API Configuration: - Bank API Endpoint (Text) - API Key (Password) - Authentication Method (Dropdown: API Key/OAuth 2.0/Basic Auth) - Webhook URL (Text) - Push Notifications Enabled (Toggle) [Test Connection] [Save] ``` #### Mobile Behavior - View-only mode - No edit functionality on mobile --- ### **SCREEN 18: User Profile & Settings** #### Purpose User's personal profile, preferences, and account settings. #### Information Groups ##### **Section 1: Profile Information** **Personal Details:** ``` [Profile Photo] (Upload/Change) - Name (Text, Read-only or editable based on config) - Employee ID (Text, Read-only) - Email (Email, Read-only) - Mobile (Text, Editable) - Role(s) (Badges, Read-only) - Team/Department (Text, Read-only) - Reports To (Text, Read-only) - Joined Date (Date, Read-only) [Update Profile] ``` ##### **Section 2: Change Password** ``` - Current Password (Password, Required) - New Password (Password, Required) - Confirm New Password (Password, Required) Password Requirements: - Minimum 8 characters - At least 1 uppercase letter - At least 1 number - At least 1 special character [Change Password] ``` ##### **Section 3: Preferences** **Application Settings:** ``` - Language (Dropdown: English/Telugu/Hindi) - Date Format (Dropdown: DD-MM-YYYY / MM-DD-YYYY / YYYY-MM-DD) - Timezone (Dropdown: Asia/Kolkata/...) - Theme (Radio: Light/Dark/Auto) - Default Dashboard View (Dropdown: Grid/List) - Items per Page (Dropdown: 10/25/50/100) - Enable Voice Dictation (Toggle) [Save Preferences] ``` **Notification Preferences:** ``` Email Notifications: ☑ Valuation Assigned to Me ☑ Query Raised on My Valuation ☑ Valuation Approved/Rejected ☑ Daily Summary Email ☐ Weekly Report Email SMS Notifications: ☑ High Priority Assignments ☑ Overdue Valuations ☐ Daily Summary SMS In-App Notifications: ☑ All Activity ☐ Only Mentions [Save Preferences] ``` ##### **Section 4: Security** **Two-Factor Authentication:** ``` Status: Enabled / Disabled [Enable 2FA] / [Disable 2FA] If enabled: - Method: (Radio: SMS/Email/Authenticator App) - Backup Codes: [Generate] [Download] ``` **Active Sessions:** ``` Table: - Device (Browser/Mobile) - Location (IP Address + City) - Last Active (Timestamp) - Actions ([Revoke]) Current Session: [This device] Other Sessions: [List of active sessions] [Revoke All Other Sessions] ``` **Login History:** ``` Recent Login Activity: - Timestamp - Device - Location (IP + City) - Status (Success/Failed) [View Full History] ``` ##### **Section 5: My Activity** **Recent Activity:** ``` Timeline view of user's recent actions: - Valuations created - Valuations approved/reviewed - Comments posted - Documents uploaded - ... [View Full Activity Log] ``` **My Statistics:** ``` Cards: - Total Valuations Completed - Average TAT (Days) - Queries Raised - Approvals Done (if applicable) - Current Active Assignments ``` ##### **Section 6: Help & Support** ``` - User Manual (Link to PDF/Web) - Video Tutorials (Links) - FAQ (Link) - Contact Support (Email/Phone) - Report a Bug (Form) - Feature Request (Form) - System Status (Link) App Version: 1.0.0 Last Updated: 2024-12-21 ``` #### Mobile Behavior - Simplified profile view - Photo capture for profile pic - Quick access to change password - Notification preferences - No advanced settings --- ## 5. Mobile PWA Considerations ### 5.1 PWA Requirements **Installability:** - Web App Manifest (manifest.json) - Service Worker for offline support - HTTPS required - App icons (192x192, 512x512) **Offline Capabilities:** - Cache static assets - Queue upload operations - Sync when online - Offline indicator **Mobile-Specific Features:** - Camera access for photos - GPS for location capture - Touch gestures (swipe, pinch) - Vibration feedback - Push notifications ### 5.2 Mobile Navigation Pattern **Bottom Tab Navigation:** (Primary) ``` ┌─────────────────────────────────────────────────────────────┐ │ [Top App Bar] │ │ ← Back Valuation VAL-2024-001 🔔 📤 │ ├─────────────────────────────────────────────────────────────┤ │ │ │ [Content Area] │ │ (Vertically Scrollable) │ │ │ ├─────────────────────────────────────────────────────────────┤ │ 🏠 📋 ✓ 📊 👤 │ │ Home Queue Approve Reports Profile │ └─────────────────────────────────────────────────────────────┘ ``` **Hamburger Menu:** (Secondary, for less-used features) ``` ☰ Menu (Top-left) ├─ Dashboard ├─ My Queue ├─ Create Valuation ├─ Approvals ├─ Reports ├─ Documents ├─ Settings └─ Logout ``` ### 5.3 Mobile Screen Adaptations **Simplified Forms:** - Single column layout - Larger input fields (min 44px height) - Autocomplete and smart defaults - Voice input support (English) - Progressive disclosure **Touch-Optimized Controls:** - Large buttons (min 44x44px) - Swipe actions (delete, approve) - Pull-to-refresh - Bottom sheets for actions - Floating action button (FAB) for primary action **Map on Mobile:** - Full-screen map mode - Bottom sheet for controls - GPS-assisted boundary capture - Simplified drawing tools - Offline map tiles (optional) **Photo Capture on Mobile:** - Native camera integration - Auto geo-tagging - Quick annotation tools - Batch upload with progress - Thumbnail gallery **Approvals on Mobile:** - Swipe cards for next/previous - Quick approve/reject buttons - Voice comments (English) - Simplified review checklist - Signature capture (optional) ### 5.4 Offline Strategy **Cached for Offline:** - User profile data - Active valuations (limited) - Lookup data (dropdowns) - Static assets (CSS, JS, images) - Map tiles (limited area) **Queue for Sync:** - Photo uploads - Form data changes - Comments - Status updates **Sync Indicators:** - ☁️ Synced - ⏳ Pending Sync - ⚠️ Sync Failed - 🔄 Syncing... --- ## 6. Bank-Specific Field Management ### 6.1 Implementation Strategy **Approach 1: Dynamic Schema (Recommended)** - Store bank-specific fields in JSON column - Use JSON schema for validation - Dynamic form rendering based on bank selection - Pros: Flexible, no schema changes needed - Cons: Complex queries, harder to index **Approach 2: Conditional Visibility** - All possible fields in database schema - Show/hide based on bank configuration - Pros: Simpler queries, better indexing - Cons: Schema changes for new fields **Approach 3: Hybrid** - Core fields in schema - Custom fields in JSON column - Best of both worlds ### 6.2 Configuration Storage **Bank Configuration Table:** ``` bank_configs: - id (UUID, PK) - bank_id (FK) - config_type (Enum: field_config/validation_rules/workflow_config) - config_data (JSON) - created_at (Timestamp) - updated_at (Timestamp) - created_by (User ID) Example JSON for field_config: { "fields": [ { "field_name": "pan_number", "field_label": "PAN Number", "field_type": "text", "section": "basic_info", "is_mandatory": true, "validation_regex": "[A-Z]{5}[0-9]{4}[A-Z]{1}", "help_text": "Enter 10-character PAN", "display_order": 5 }, ... ] } ``` ### 6.3 Form Rendering Logic **Pseudo-code:** ```javascript // On bank selection const bankId = form.getValue('bank_id'); const bankConfig = await fetchBankConfig(bankId); // Merge default fields with bank-specific fields const allFields = [ ...defaultFields, ...bankConfig.fields ]; // Apply visibility and mandatory rules const visibleFields = allFields.filter(field => field.visible && (!field.property_type_specific || field.property_type === selectedPropertyType) ); // Render form renderForm(visibleFields); // Apply validation rules applyValidationRules(visibleFields); ``` ### 6.4 Migration Strategy **Phase 1: Core Fields (All Banks)** - Implement default schema with common fields - Test with primary bank (e.g., HDFC) **Phase 2: Bank-Specific Extensions** - Add bank configuration module - Implement dynamic field rendering - Migrate existing data **Phase 3: Advanced Features** - Conditional field logic (if X then show Y) - Cross-field validation - Bank-specific calculations --- ## Design Document Summary ### Total Screens: 18 1. Dashboard Home 2. My Work Queue 3. Valuation List/Search 4. Create New Valuation (Wizard) 5. Basic Information Screen 6. Property Details Screen 7. Site & Map Screen 8. Valuation & Calculation Screen 9. Document Management Screen 10. Photo Gallery & Annotation Screen 11. Review Queue Screen 12. Approval Screen 13. Reports Dashboard 14. Custom Report Builder 15. User Management Screen 16. Reference Data Management 17. Bank Configuration Screen 18. User Profile & Settings ### Key Information Groups: ~300+ fields total across all screens **Grouped by Functional Area:** - Valuation Identification: 10-15 fields - Applicant Details: 10-12 fields - Property Location: 15-20 fields - Site Characteristics: 25-30 fields - Boundaries & Dimensions: 30-40 fields - Valuation & Calculations: 40-50 fields - Documents: Metadata + files - Photos: Metadata + images - Workflow & Comments: 10-15 fields - Admin/Config: 50+ settings ### Design Principles Applied: ✅ No sidebar menu - Top horizontal navigation ✅ No horizontal scrolling - Responsive single column on mobile ✅ Progressive disclosure - Accordion panels, tabs ✅ Bank-specific fields - Dynamic rendering based on bank selection ✅ Property-type specific fields - Conditional visibility ✅ Mobile PWA support - Bottom tab navigation, offline capability ✅ Workflow-driven - Role-based access, stage-based editing ✅ Map integration - Google Maps with polygon drawing ✅ Document management - Upload, version control, annotation ✅ Photo management - Gallery, annotation, geo-tagging ### Next Steps: 1. Review and approve this design document 2. Create detailed wireframes for each screen 3. Design database schema based on information groups 4. Create API specifications for backend 5. Develop component library for frontend 6. Build MVP with core screens (1-8) 7. Iterate based on user feedback --- **END OF DOCUMENT**