+ );
+};
+
+export default Layout;
diff --git a/frontend/mobile-ui/src/app/features/Agent/components/LocationPinMap.tsx b/frontend/mobile-ui/src/app/features/Agent/components/LocationPinMap.tsx
new file mode 100644
index 0000000..ac229dc
--- /dev/null
+++ b/frontend/mobile-ui/src/app/features/Agent/components/LocationPinMap.tsx
@@ -0,0 +1,242 @@
+
+// LocationPinMap component displays a Leaflet map with a fixed center pin and reverse geocoding
+import React, { useEffect, useRef } from 'react';
+import { MapContainer, TileLayer } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+import L from 'leaflet';
+
+// Fix for default markers not appearing in Leaflet
+delete (L.Icon.Default.prototype as any)._getIconUrl;
+L.Icon.Default.mergeOptions({
+ iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
+ iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
+ shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
+});
+
+
+// Props for LocationPinMap
+interface LocationPinMapProps {
+ center: [number, number]; // Initial center of the map
+ onLocationUpdate: (lat: number, lng: number, address: string) => void; // Callback when location changes
+}
+
+// Helper function to get reverse geocoded address with fallback
+// Tries Photon API, then a simple area lookup, then falls back to coordinates
+const getReverseGeocodedAddress = async (lat: number, lng: number): Promise => {
+ try {
+ // Use Photon API which is CORS-friendly
+ const response = await fetch(
+ `https://photon.komoot.io/reverse?lat=${lat}&lon=${lng}`,
+ {
+ method: 'GET',
+ headers: {
+ 'Accept': 'application/json'
+ }
+ }
+ );
+
+ if (response.ok) {
+ const data = await response.json();
+ if (data.features && data.features.length > 0) {
+ const feature = data.features[0];
+ if (feature.properties) {
+ const props = feature.properties;
+ const parts = [];
+
+ // Build address from available components
+ if (props.housenumber) parts.push(props.housenumber);
+ if (props.street) parts.push(props.street);
+ if (props.district) parts.push(props.district);
+ if (props.city) parts.push(props.city);
+ if (props.state) parts.push(props.state);
+
+ if (parts.length > 0) {
+ return parts.join(', ');
+ }
+
+ // Fallback to name if available
+ if (props.name) {
+ return props.name;
+ }
+ }
+ }
+ }
+ } catch (error) {
+ console.warn('Photon geocoding failed, trying alternative:', error);
+ }
+
+ // Try alternative approach with a simple area lookup
+ try {
+ // For Indian coordinates, provide a basic area estimation
+ if (lat >= 8 && lat <= 37 && lng >= 68 && lng <= 97) {
+ // This is within India bounds
+ const areas = {
+ bangalore: { lat: 12.9716, lng: 77.5946, name: 'Bangalore, Karnataka' },
+ delhi: { lat: 28.6139, lng: 77.2090, name: 'Delhi' },
+ mumbai: { lat: 19.0760, lng: 72.8777, name: 'Mumbai, Maharashtra' },
+ chennai: { lat: 13.0827, lng: 80.2707, name: 'Chennai, Tamil Nadu' },
+ hyderabad: { lat: 17.3850, lng: 78.4867, name: 'Hyderabad, Telangana' },
+ pune: { lat: 18.5204, lng: 73.8567, name: 'Pune, Maharashtra' }
+ };
+
+ // Find closest major city
+ let closestArea = 'Unknown Area, India';
+ let minDistance = Infinity;
+
+ Object.values(areas).forEach(area => {
+ const distance = Math.sqrt(
+ Math.pow(lat - area.lat, 2) + Math.pow(lng - area.lng, 2)
+ );
+ if (distance < minDistance) {
+ minDistance = distance;
+ closestArea = area.name;
+ }
+ });
+
+ return `Near ${closestArea}`;
+ }
+ } catch (error) {
+ console.warn('Area lookup failed:', error);
+ }
+
+ // Final fallback: return formatted coordinates
+ return `Location: ${lat.toFixed(4)}ยฐN, ${lng.toFixed(4)}ยฐE`;
+};
+
+
+const LocationPinMap: React.FC = ({ center, onLocationUpdate }) => {
+ // Reference to the Leaflet map instance
+ const mapRef = useRef(null);
+ // Reference for debouncing location updates
+ const debounceTimeoutRef = useRef(null);
+ // Reference to the map container div
+ const containerRef = useRef(null);
+
+ // ResizeObserver to handle map resizing when container size changes
+ useEffect(() => {
+ const resizeObserver = new ResizeObserver(() => {
+ if (mapRef.current) {
+ setTimeout(() => {
+ mapRef.current?.invalidateSize();
+ }, 100);
+ }
+ });
+
+ if (containerRef.current) {
+ resizeObserver.observe(containerRef.current);
+ }
+
+ return () => {
+ resizeObserver.disconnect();
+ };
+ }, []);
+
+ // Aggressively fix map size after mount
+ useEffect(() => {
+ const fixMapSize = () => {
+ if (mapRef.current) {
+ mapRef.current.invalidateSize(true);
+ mapRef.current.getContainer().style.height = '100%';
+ }
+ };
+
+ const intervals = [100, 250, 500, 1000];
+ const timeouts = intervals.map(delay => setTimeout(fixMapSize, delay));
+
+ return () => {
+ timeouts.forEach(clearTimeout);
+ };
+ }, []);
+
+ // Clean up debounce timeout on unmount
+ useEffect(() => {
+ return () => {
+ if (debounceTimeoutRef.current) {
+ clearTimeout(debounceTimeoutRef.current);
+ }
+ };
+ }, []);
+
+ // Handler for when the map stops moving (user pans/zooms)
+ const handleMapMoveEnd = () => {
+ if (!mapRef.current) return;
+
+ // Get the center coordinates for location display (no pin needed)
+ const mapCenter = mapRef.current.getCenter();
+ const lat = mapCenter.lat;
+ const lng = mapCenter.lng;
+
+ // Clear previous timeout
+ if (debounceTimeoutRef.current) {
+ clearTimeout(debounceTimeoutRef.current);
+ }
+
+ // Debounce the location update
+ debounceTimeoutRef.current = window.setTimeout(async () => {
+ if (!mapRef.current) return;
+
+ try {
+ // Use a more reliable geocoding approach
+ const address = await getReverseGeocodedAddress(lat, lng);
+ onLocationUpdate(lat, lng, address);
+ } catch (error) {
+ console.error('Error getting address:', error);
+ onLocationUpdate(lat, lng, `${lat.toFixed(6)}, ${lng.toFixed(6)}`);
+ }
+ }, 500); // 500ms debounce
+ };
+
+ // Handler for when the map is ready (mounted)
+ const handleMapReady = () => {
+ // Simplified map size fixing with new CSS overrides
+ setTimeout(() => {
+ if (mapRef.current) {
+ mapRef.current.invalidateSize(true);
+ }
+ }, 100);
+ setTimeout(() => {
+ if (mapRef.current) {
+ mapRef.current.invalidateSize(true);
+ }
+ }, 500);
+ };
+
+ return (
+
+ {/* Leaflet MapContainer with no visible marker, just a center pin overlay */}
+ {
+ if (mapInstance) {
+ mapRef.current = mapInstance;
+ mapInstance.on('moveend', handleMapMoveEnd);
+ handleMapReady();
+ }
+ }}
+ zoomControl={false}
+ attributionControl={false}
+ >
+
+
+
+ {/* Center Pin Overlay with Popup - Figma Design */}
+
+
+
+ Move the map to position the pin
+
+
+
+ );
+};
+
+export default LocationPinMap;
\ No newline at end of file
diff --git a/frontend/mobile-ui/src/app/features/Agent/components/Pagination.tsx b/frontend/mobile-ui/src/app/features/Agent/components/Pagination.tsx
new file mode 100644
index 0000000..e312d17
--- /dev/null
+++ b/frontend/mobile-ui/src/app/features/Agent/components/Pagination.tsx
@@ -0,0 +1,64 @@
+// Pagination component displays page navigation controls for lists with multiple pages.
+// Used in Agent screens to navigate between paginated data sets.
+import React from "react";
+import "../../../../styles/Pagination.css";
+
+// Props for Pagination:
+// - page: current page number
+// - totalPages: total number of pages
+// - onPageChange: callback for changing page
+interface PaginationProps {
+ page: number;
+ totalPages: number;
+ onPageChange: (page: number) => void;
+}
+
+const Pagination: React.FC = ({ page, totalPages, onPageChange }) => {
+ // Only show pagination controls if there are at least 2 pages
+ if (totalPages < 2) return null;
+
+ return (
+
+ {/* Left Arrow: go to previous page, disabled on first page */}
+
+ {/* Current page indicator */}
+
+ {/* Next page button, shown if not on last page */}
+ {page < totalPages && (
+
+ )}
+
+ {/* Ellipsis and last page button, shown if more than one page ahead */}
+ {page < totalPages - 1 && (
+ <>
+ ...
+
+
+ )}
+
+ {/* Right Arrow: go to next page, disabled on last page */}
+
+
+ );
+};
+
+// Export Pagination for use in Agent screens
+export default Pagination;
\ No newline at end of file
diff --git a/frontend/mobile-ui/src/app/features/Agent/components/SearchPropertyResultCard.tsx b/frontend/mobile-ui/src/app/features/Agent/components/SearchPropertyResultCard.tsx
new file mode 100644
index 0000000..2f7c359
--- /dev/null
+++ b/frontend/mobile-ui/src/app/features/Agent/components/SearchPropertyResultCard.tsx
@@ -0,0 +1,174 @@
+// SearchPropertyResultCard displays a property search result with status, address, and location map.
+// Used in Agent screens to show property details and allow viewing location on a map.
+import React from 'react';
+import { Box, Chip, Typography, Button } from '@mui/material';
+import OpenInNewOutlinedIcon from '@mui/icons-material/OpenInNewOutlined';
+import { MapContainer, TileLayer, Marker } from 'react-leaflet';
+import L from 'leaflet';
+
+// Custom SVG icon for map marker (room icon)
+const roomIconSvgString = ``;
+const markerIcon = L.divIcon({
+ html: roomIconSvgString,
+ className: '',
+ iconSize: [18, 18],
+ iconAnchor: [9, 18],
+});
+
+// Props for SearchPropertyResultCard:
+// - id: property ID
+// - address: property address
+// - isVerified: property verification status
+// - highlight: optional highlight flag
+// - onViewLocation: callback for location view button
+export interface SearchPropertyResultCardProps {
+ id: string;
+ address: string;
+ isVerified: boolean;
+ highlight?: boolean;
+ latlng: { lat: number; lng: number };
+ onViewLocation?: () => void;
+}
+
+// Helper to get status label and colors based on verification
+const getStatusProps = (isVerified: boolean) => {
+ if (isVerified) {
+ return {
+ label: 'Verified',
+ color: '#00703C',
+ bg: '#F5F5F5',
+ };
+ }
+ return {
+ label: 'Pending',
+ color: '#A59400',
+ bg: '#FBEEE8',
+ };
+};
+
+const SearchPropertyResultCard: React.FC = ({
+ id,
+ address,
+ isVerified,
+ latlng,
+ onViewLocation,
+}) => {
+ // Get status label and colors
+ const status = getStatusProps(isVerified);
+
+ return (
+
+ {/* Left section: status, ID, address */}
+
+
+
+ {id}
+
+
+ Address
+
+
+ {address}
+
+
+ {/* Map and view location button */}
+
+
+
+
+
+
+
+ {/* Button to view location in detail */}
+ }
+ sx={{
+ backgroundColor: '#DBFAD3',
+ color: '#000',
+ fontWeight: 450,
+ fontSize: 10,
+ minWidth: 0,
+ borderRadius: '10px',
+ pb: 0.5,
+ }}
+ onClick={onViewLocation}
+ >
+ View Location
+
+
+
+ );
+};
+
+// Export SearchPropertyResultCard for use in Agent screens
+export default SearchPropertyResultCard;
diff --git a/frontend/mobile-ui/src/app/features/Agent/components/StepHeader.tsx b/frontend/mobile-ui/src/app/features/Agent/components/StepHeader.tsx
new file mode 100644
index 0000000..21cd231
--- /dev/null
+++ b/frontend/mobile-ui/src/app/features/Agent/components/StepHeader.tsx
@@ -0,0 +1,73 @@
+// StepHeader displays a multi-step header with title, subtitle, step progress, and navigation buttons.
+// Used in Agent property workflows to show progress and provide navigation actions.
+import React from 'react';
+import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
+import '../../../../styles/Agent/StepHeader.css';
+import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
+
+// Props for StepHeader:
+// - title: main header title
+// - subtitle: subheader text
+// - steps: total number of steps (default 6)
+// - activeStep: current active step (default 0)
+// - onPrevious: callback for previous button
+// - previousText: label for previous button
+// - onSaveDraft: callback for save draft button
+// - saveDraftText: label for save draft button
+export interface StepHeaderProps {
+ title: string;
+ subtitle: string;
+ steps?: number;
+ activeStep?: number;
+ onPrevious?: () => void;
+ previousText?: string;
+ onSaveDraft?: () => void;
+ saveDraftText?: string;
+}
+
+const StepHeader: React.FC = ({
+ title,
+ subtitle,
+ steps = 6,
+ activeStep = 0,
+ onPrevious,
+ previousText = "Previous",
+ onSaveDraft,
+ saveDraftText = "Save Draft",
+}) => {
+ // Render step header with title, subtitle, step progress, and navigation buttons
+ return (
+
+ {/* Main header section */}
+
+
+
{title}
+
{subtitle}
+
+
+ {/* Step progress indicator */}
+
+ {[...Array(steps)].map((_, i) => (
+
+ ))}
+
+ {/* Navigation buttons: Previous and Save Draft */}
+
+
+
+
+
+ );
+};
+
+// Export StepHeader for use in Agent screens
+export default StepHeader;
\ No newline at end of file
diff --git a/frontend/mobile-ui/src/app/features/Agent/models/HomePageData.model.ts b/frontend/mobile-ui/src/app/features/Agent/models/HomePageData.model.ts
new file mode 100644
index 0000000..7949438
--- /dev/null
+++ b/frontend/mobile-ui/src/app/features/Agent/models/HomePageData.model.ts
@@ -0,0 +1,229 @@
+// This file defines TypeScript interfaces for Agent home page data models.
+// Used for typing API responses, property details, and related entities.
+//import type { GISDataResponse } from "../../../../redux/apis/gisApi";
+
+export interface Amenity {
+ ID: string;
+ Type: string;
+ Description: string;
+ ExpiryDate: string;
+ PropertyID: string;
+ CreatedAt: string;
+ UpdatedAt: string;
+}
+
+// Details for each floor in a property
+export interface FloorDetail {
+ ID: string;
+ FloorNo: number;
+ Classification: string;
+ NatureOfUsage: string;
+ FirmName: string;
+ OccupancyType: string;
+ OccupancyName: string;
+ constructionDate: string;
+ effectiveFromDate: string;
+ UnstructuredLand: string;
+ LengthFt: number;
+ BreadthFt: number;
+ PlinthAreaSqFt: number;
+ BuildingPermissionNo: string;
+ FloorDetailsEntered: boolean;
+ ConstructionDetailsID: string;
+ CreatedAt: string;
+ UpdatedAt: string;
+}
+
+// Construction details for a property, including all floors
+export interface ConstructionDetails {
+ ID: string;
+ FloorType: string;
+ WallType: string;
+ RoofType: string;
+ WoodType: string;
+ PropertyID: string;
+ FloorDetails: FloorDetail[];
+ CreatedAt: string;
+ UpdatedAt: string;
+}
+
+// GIS coordinate for mapping property location
+export interface GISCoordinate {
+ ID: string;
+ Latitude: number;
+ Longitude: number;
+ GISDataID: string;
+ CreatedAt: string;
+}
+
+// GIS data for a property, including coordinates
+export interface GISData {
+ ID: string;
+ Source: string;
+ Type: string;
+ EntityType: string;
+ PropertyID: string;
+ Coordinates: GISCoordinate[];
+ CreatedAt: string;
+ UpdatedAt: string;
+}
+
+// Document metadata for property files
+export interface Document {
+ ID: string;
+ PropertyID: string;
+ DocumentType: string;
+ DocumentName: string;
+ FileStoreID: string | null;
+ UploadDate: string;
+}
+
+// Suggestion for Address interface
+// Address details for a property
+export interface Address {
+ ID: string;
+ Locality: string;
+ ZoneNo: string;
+ WardNo: string;
+ BlockNo: string;
+ Street: string;
+ ElectionWard: string;
+ SecretariatWard: string;
+ PinCode: number;
+ DifferentCorrespondenceAddress: boolean;
+ PropertyID: string;
+ CreatedAt: string;
+ UpdatedAt: string;
+}
+
+// Assessment details for a property
+export interface AssessmentDetails {
+ ID: string;
+ PropertyID: string;
+ ExtendOfSite: string;
+ IsLandUnderneathBuilding: boolean;
+ IsUnspecifiedShare: boolean;
+ OccupancyCertificateDate: string;
+ OccupancyCertificateNumber: string;
+ ReasonOfCreation: string;
+ CreatedAt: string;
+ UpdatedAt: string;
+}
+
+// Additional details for a property, including amenities and certifications
+export interface AdditionalDetails {
+ ID: string;
+ FieldName: string;
+ fieldValue: {
+ amenities: string[];
+ certification: {
+ earthquake_resistant: boolean;
+ fire_safety: string;
+ green_building: boolean;
+ };
+ construction_year: number;
+ elevator: boolean;
+ floors: number;
+ security: {
+ access_control: string;
+ cctv: boolean;
+ guard: string;
+ };
+ units_per_floor: number;
+ };
+ PropertyID: string;
+ CreatedAt: string;
+ UpdatedAt: string;
+}
+
+// Application data for property workflows
+export interface Application {
+ ID: string;
+ ApplicationNo: string;
+ PropertyID: string;
+ Priority: string;
+ TenantID: string;
+ DueDate: string;
+ AssignedAgent: string;
+ Status: string;
+ WorkflowInstanceID: string;
+ AppliedBy: string;
+ AssesseeID: string;
+ Property: PropertyDetails;
+ ApplicationLogs: any | null;
+ IsDraft: boolean;
+ CreatedAt: string;
+ UpdatedAt: string;
+}
+
+// IGRS details for property registration
+export interface IGRS {
+ id: string;
+ habitation: string;
+ igrsWard: string;
+ igrsLocality: string;
+ igrsBlock: string;
+ doorNoFrom: string;
+ doorNoTo: string;
+ igrsClassification: string;
+ builtUpAreaPct: number;
+ frontSetback: number;
+ rearSetback: number;
+ sideSetback: number;
+ totalPlinthArea: number;
+ createdAt: string;
+ updatedAt: string;
+ PropertyID: string;
+}
+
+// Main property details object, includes all related entities
+export interface PropertyDetails {
+ ID: string;
+ PropertyNo: string;
+ OwnershipType: string;
+ PropertyType: string;
+ ComplexName: string;
+ Address: Address | null;
+ AssessmentDetails: AssessmentDetails | null;
+ Amenities: Amenity | null;
+ ConstructionDetails: ConstructionDetails | null;
+ AdditionalDetails: AdditionalDetails | null;
+ GISData:{
+ ID: string;
+ Source: string;
+ Type: string;
+ EntityType: string;
+ PropertyID: string;
+ Latitude: number;
+ Longitude: number;
+ Coordinates: Array<{
+ ID: string;
+ Latitude: number;
+ Longitude: number;
+ GISDataID: string;
+ CreatedAt: string;
+ }>;
+ CreatedAt: string;
+ UpdatedAt: string;
+ } | null;
+ CreatedAt: string;
+ UpdatedAt: string;
+ Documents: Document[];
+ IGRS: IGRS | null;
+}
+
+// Pagination info for paginated API responses
+export interface PaginationInfo {
+ page: number;
+ size: number;
+ totalItems: number;
+ totalPages: number;
+}
+
+// API response for Agent home page property list
+export interface HomePageResponse {
+ data: Application[];
+ message: string;
+ pagination: PaginationInfo;
+ success: boolean;
+}
diff --git a/frontend/mobile-ui/src/app/features/Agent/models/PropertyInfoSubmittedData.model.ts b/frontend/mobile-ui/src/app/features/Agent/models/PropertyInfoSubmittedData.model.ts
new file mode 100644
index 0000000..a09c187
--- /dev/null
+++ b/frontend/mobile-ui/src/app/features/Agent/models/PropertyInfoSubmittedData.model.ts
@@ -0,0 +1,49 @@
+// This file defines TypeScript interfaces for submitted property info data in Agent workflows.
+// Used for typing form submissions, property details, usage, assessment, and documents.
+import type { Owner } from "../../Citizen/models/Owner.model";
+
+// Main data structure for submitted property info
+export interface PropertyInfoSubmittedData {
+ propertyId: string;
+ owner: Owner;
+ propertyDetails: PropertyDetails;
+ usageDetails: UsageDetails;
+ assessmentDetails: AssessmentDetails;
+ documents: Document[];
+}
+
+// Basic property details (type, location, area)
+export interface PropertyDetails {
+ propertyType: string;
+ zoneWard: string;
+ doorNo: string;
+ plotArea: string;
+}
+
+// Usage details for property (survey, GIS, cadastral info)
+export interface UsageDetails {
+ surveyNumber: string;
+ gisDelination: string;
+ gisReference: string;
+ cadastralMap: string;
+ gisRegistration: string;
+}
+
+// Assessment details for property (construction, usage, tax zone)
+export interface AssessmentDetails {
+ constructionYear: number;
+ buildingUsage: string;
+ builtUpArea: string;
+ floorCount: number;
+ propertyTaxZone: string;
+ assessmentStatus: string;
+ notes: string;
+}
+
+// Document metadata for submitted files
+export interface Document {
+ id: string;
+ name: string;
+ type: string;
+ url?: string;
+}
\ No newline at end of file
diff --git a/frontend/mobile-ui/src/app/features/Agent/models/ReviewPage.model.ts b/frontend/mobile-ui/src/app/features/Agent/models/ReviewPage.model.ts
new file mode 100644
index 0000000..20dc576
--- /dev/null
+++ b/frontend/mobile-ui/src/app/features/Agent/models/ReviewPage.model.ts
@@ -0,0 +1,58 @@
+// This file defines TypeScript interfaces for Agent review page data models.
+// Used for typing API responses, property details, and application items for review workflows.
+import type {Address, AssessmentDetails, ConstructionDetails, GISData, Amenity, Document, AdditionalDetails} from "./HomePageData.model";
+
+// Property details for review page, includes all related entities
+export interface PropertyDetails {
+ ID: string;
+ PropertyNo: string;
+ OwnershipType: string;
+ PropertyType: string;
+ ComplexName: string;
+ Address: Address;
+ AssessmentDetails: AssessmentDetails;
+ Amenities: Amenity[];
+ ConstructionDetails: ConstructionDetails;
+ AdditionalDetails: AdditionalDetails;
+ GISData: GISData;
+ CreatedAt: string;
+ UpdatedAt: string;
+ Documents: Document;
+ IGRS: any;
+}
+
+// Application item for review workflows
+export interface ApplicationItem {
+ ID: string;
+ ApplicationNo: string;
+ PropertyID: string;
+ Priority: string;
+ TenantID: string;
+ DueDate: string;
+ AssignedAgent: string;
+ Status: string;
+ WorkflowInstanceID: string;
+ AppliedBy: string;
+ AssesseeID: string;
+ Property: PropertyDetails;
+ ApplicationLogs: any;
+ IsDraft: boolean;
+ CreatedAt: string;
+ UpdatedAt: string;
+}
+
+// Pagination info for paginated API responses
+export interface PaginationInfo {
+ page: number;
+ size: number;
+ totalItems: number;
+ totalPages: number;
+}
+
+// API response for Agent review page property list
+export interface ApplicationsResponse {
+ data: ApplicationItem[];
+ message: string;
+ pagination: PaginationInfo;
+ success: boolean;
+}
\ No newline at end of file
diff --git a/frontend/mobile-ui/src/app/features/Agent/models/ReviewedPropertyData.model.ts b/frontend/mobile-ui/src/app/features/Agent/models/ReviewedPropertyData.model.ts
new file mode 100644
index 0000000..01da7b0
--- /dev/null
+++ b/frontend/mobile-ui/src/app/features/Agent/models/ReviewedPropertyData.model.ts
@@ -0,0 +1,8 @@
+// This file defines TypeScript interfaces for reviewed property data in Agent workflows.
+// Used for typing lists of properties that have been reviewed by the agent.
+import type { Property } from "../../../../models/Citizen/Property";
+
+// Main data structure for reviewed properties
+export interface ReviewedPropertyData {
+ reviewedProperties: Property[];
+}
\ No newline at end of file
diff --git a/frontend/mobile-ui/src/app/features/Agent/models/SearchPropertyData.model.ts b/frontend/mobile-ui/src/app/features/Agent/models/SearchPropertyData.model.ts
new file mode 100644
index 0000000..3d68a5c
--- /dev/null
+++ b/frontend/mobile-ui/src/app/features/Agent/models/SearchPropertyData.model.ts
@@ -0,0 +1,121 @@
+// Represents the address details of a property
+export interface Address {
+ ID: string; // Unique identifier for the address
+ Locality: string; // Locality or neighborhood
+ ZoneNo: string; // Zone number
+ WardNo: string; // Ward number
+ BlockNo: string; // Block number
+ Street: string; // Street name
+ ElectionWard: string; // Election ward
+ SecretariatWard: string; // Secretariat ward
+ PinCode: number; // Postal code
+ DifferentCorrespondenceAddress: boolean; // If correspondence address is different
+ PropertyID: string; // Linked property ID
+ CreatedAt: string; // Creation timestamp
+ UpdatedAt: string; // Last update timestamp
+ correspondenceAddress1: string; // Correspondence address line 1
+ correspondenceAddress2: string; // Correspondence address line 2
+ correspondenceAddress3: string; // Correspondence address line 3
+}
+
+// Details related to property assessment
+export interface AssessmentDetails {
+ ID: string; // Unique identifier
+ ReasonOfCreation: string; // Reason for assessment creation
+ OccupancyCertificateNumber: string; // Occupancy certificate number
+ OccupancyCertificateDate: string; // Date of occupancy certificate
+ ExtentOfSite: string; // Site area/extent
+ IsLandUnderneathBuilding: string; // Whether land is underneath building
+ IsUnspecifiedShare: boolean; // If property has unspecified share
+ PropertyID: string; // Linked property ID
+ CreatedAt: string; // Creation timestamp
+ UpdatedAt: string; // Last update timestamp
+}
+
+// Construction-related details of the property
+export interface ConstructionDetails {
+ ID: string; // Unique identifier
+ FloorType: string; // Type of floor
+ WallType: string; // Type of wall
+ RoofType: string; // Type of roof
+ WoodType: string; // Type of wood used
+ PropertyID: string; // Linked property ID
+ FloorDetails: any; // Details about each floor (structure may vary)
+ CreatedAt: string; // Creation timestamp
+ UpdatedAt: string; // Last update timestamp
+}
+
+// Any additional custom details for the property
+export interface AdditionalDetails {
+ ID: string; // Unique identifier
+ FieldName: string; // Name of the additional field
+ fieldValue: any; // Value of the field
+ PropertyID: string; // Linked property ID
+ CreatedAt: string; // Creation timestamp
+ UpdatedAt: string; // Last update timestamp
+}
+
+// Main property data model
+export interface PropertyData {
+ ID: string; // Unique property identifier
+ PropertyNo: string; // Property number
+ OwnershipType: string; // Type of ownership
+ PropertyType: string; // Type/category of property
+ ComplexName: string; // Name of the complex (if any)
+ Address: Address; // Address details
+ AssessmentDetails: AssessmentDetails | null; // Assessment details
+ Amenities: any; // Amenities available (structure may vary)
+ ConstructionDetails: ConstructionDetails | null; // Construction details
+ AdditionalDetails: AdditionalDetails | null; // Additional custom details
+ GISData: any; // Geographic Information System data
+ CreatedAt: string; // Creation timestamp
+ UpdatedAt: string; // Last update timestamp
+ Documents: any; // Related documents
+ IGRS: any; // Integrated Grievance Redressal System or similar
+}
+
+// Represents an application related to a property (e.g., assessment, mutation)
+export interface ApplicationData {
+ ID: string; // Unique application identifier
+ ApplicationNo: string; // Application number
+ PropertyID: string; // Linked property ID
+ Priority: string; // Priority of the application
+ TenantID: string; // Tenant or jurisdiction ID
+ DueDate: string; // Due date for processing
+ AssignedAgent: string; // Agent assigned to the application
+ Status: string; // Current status
+ WorkflowInstanceID: string; // Workflow instance identifier
+ AppliedBy: string; // User who applied
+ AssesseeID: string; // Assessee (taxpayer) ID
+ Property: PropertyData; // Property details
+ ApplicationLogs: any; // Logs related to the application
+ IsDraft: boolean; // Whether the application is a draft
+ CreatedAt: string; // Creation timestamp
+ UpdatedAt: string; // Last update timestamp
+}
+
+// Pagination information for paginated responses
+export interface Pagination {
+ page: number; // Current page number
+ size: number; // Number of items per page
+ totalItems: number; // Total number of items
+ totalPages: number; // Total number of pages
+}
+
+// Response structure for property search API
+export interface SearchPropertyResponse {
+ data: ApplicationData[]; // List of application data
+ message: string; // Response message
+ pagination: Pagination; // Pagination info
+ success: boolean; // Success status
+}
+
+// Parameters for searching properties
+export interface SearchPropertyParams {
+ zoneNo?: string; // Filter by zone number
+ wardNo?: string; // Filter by ward number
+ page?: number; // Page number for pagination
+ size?: number; // Page size for pagination
+ sortBy?: string; // Field to sort by
+ sortOrder?: 'asc' | 'desc'; // Sort order
+}
\ No newline at end of file
diff --git a/frontend/mobile-ui/src/app/features/Agent/utils/propertyMapper.ts b/frontend/mobile-ui/src/app/features/Agent/utils/propertyMapper.ts
new file mode 100644
index 0000000..fc5d83c
--- /dev/null
+++ b/frontend/mobile-ui/src/app/features/Agent/utils/propertyMapper.ts
@@ -0,0 +1,37 @@
+// Utility to map Application model to PropertyItem type for Agent screens.
+// Used to transform API data into frontend-friendly format for property lists.
+import type { Application } from '../models/HomePageData.model';
+import type { PropertyItem } from '../../../../types';
+
+// Maps an Application object to a PropertyItem for display in property lists.
+export const mapApplicationToPropertyItem = (application: Application): PropertyItem => {
+ const property = application.Property;
+
+
+ // Return mapped property item with normalized fields
+ return {
+ id: application.ID,
+ pId: application.ApplicationNo,
+ propertyNo: property.PropertyNo || 'N/A',
+ type: property.PropertyType || 'RESIDENTIAL',
+ description: `${property.PropertyType} - ${property.OwnershipType}`,
+ address: property.Address
+ ? `${property.Address.Street}, ${property.Address.Locality}`
+ : 'Address not available',
+ phoneNumber: '', // Not available in Application/Property data
+ area: property.AssessmentDetails?.ExtendOfSite || 'N/A',
+ propertyType: property.PropertyType || 'RESIDENTIAL',
+ status: application.Priority || 'MEDIUM',
+ dueDate: application.DueDate || new Date().toISOString(),
+ // isNew: application.Status === 'ASSIGNED',
+ isNew: (application.Status === 'ASSIGNED'),
+ isDraft: application.IsDraft === true,
+ isVerified: application.Status === 'VERIFIED' || application.Status === 'APPROVED' || application.Status === 'AUDIT_VERIFIED',
+ createdDate: application.CreatedAt,
+ gisData: property.GISData ? {
+ latitude: property.GISData.Latitude,
+ longitude: property.GISData.Longitude,
+ coordinates: property.GISData.Coordinates
+ } : undefined,
+ };
+};
\ No newline at end of file
diff --git a/frontend/mobile-ui/src/app/features/Citizen/api/Citizen.api.ts b/frontend/mobile-ui/src/app/features/Citizen/api/Citizen.api.ts
new file mode 100644
index 0000000..688496a
--- /dev/null
+++ b/frontend/mobile-ui/src/app/features/Citizen/api/Citizen.api.ts
@@ -0,0 +1,63 @@
+// import { createApi } from '@reduxjs/toolkit/query/react';
+// import type { CitizenHomeData } from '../models/CitizenHome.model';
+// import type { Property } from '../models/Property.model';
+// import type { UrgentAttention } from '../models/UrgentAttention.model';
+// import customBaseQuery from '../../../service/BaseQuery.api';
+
+// export const citizenApi = createApi({
+// reducerPath: 'citizenApi',
+// baseQuery: customBaseQuery,
+// tagTypes: ['Properties', 'CitizenHome'],
+// endpoints: (builder) => ({
+// getCitizenHome: builder.query({
+// query: () => `/api/v1/citizen/home`,
+// transformResponse: (response: any) => {
+// const homeJson = response?.home ?? {};
+
+// const user = homeJson.user ?? {};
+// const activeLicenses = user.activeLicenses ?? 0;
+// const numberOfProperties = user.numberOfProperties ?? 0;
+
+// const properties: Property[] = (homeJson.properties ?? []).map((prop: any) => ({
+// id: prop.id,
+// apartmentName: prop.apartmentName ?? '',
+// address: (prop.address as any) ?? '',
+// enumerationProgress: prop.enumerationProgress ?? 0,
+// locationData: prop.locationData ?? { address: '', coordinates: { lat: 0, lng: 0 }, timestamp: '' },
+// }));
+
+// const urgentAttention: UrgentAttention[] = (homeJson.urgentAttention ?? []).map((item: any) => ({
+// id: item.id,
+// type: item.type,
+// message: item.message,
+// date: item.date,
+// status: item.status,
+// }));
+
+// return { activeLicenses, numberOfProperties, properties, urgentAttention };
+// },
+// providesTags: ['CitizenHome'],
+// }),
+
+// getProperties: builder.query({
+// query: () => `/api/v1/citizen/properties`,
+// transformResponse: (response: any) => {
+// if (response == null) return [];
+// if (response && 'properties' in response) {
+// return response.properties as Property[];
+// } else {
+// return response as Property[];
+// }
+// },
+// providesTags: (result) =>
+// result
+// ? [
+// ...result.map(({ id }) => ({ type: 'Properties' as const, id })),
+// { type: 'Properties', id: 'LIST' },
+// ]
+// : [{ type: 'Properties', id: 'LIST' }],
+// }),
+// }),
+// });
+
+// export const { useGetCitizenHomeQuery, useGetPropertiesQuery } = citizenApi;
\ No newline at end of file
diff --git a/frontend/mobile-ui/src/app/features/Citizen/api/CitizenDocumentPageApi/fileStoreApi.ts b/frontend/mobile-ui/src/app/features/Citizen/api/CitizenDocumentPageApi/fileStoreApi.ts
new file mode 100644
index 0000000..c03c140
--- /dev/null
+++ b/frontend/mobile-ui/src/app/features/Citizen/api/CitizenDocumentPageApi/fileStoreApi.ts
@@ -0,0 +1,52 @@
+// fileStoreApi defines API endpoints for file upload and retrieval for Citizen document workflows.
+// Uses Redux Toolkit Query to provide hooks for file blob fetching and uploading to filestore.
+import { filestoreApiSlice } from '../../../../../redux/fileStoreApiSlice';
+import type { UploadResult } from '../../models/CitizenDocumentPageModel/fileStoreModel';
+
+// Response type for file URL lookup
+export interface FileUrlResponse {
+ url: string;
+ fileStoreId: string;
+}
+
+// Inject endpoints for file blob retrieval and file upload
+export const filestoreApi = filestoreApiSlice.injectEndpoints({
+ endpoints: (builder) => ({
+ // Fetch file directly as blob (not URL)
+ getFileBlob: builder.query(
+ {
+ query: ({ fileStoreId, tenantId = "pg" }) => ({
+ url: `/filestore/v1/files/${fileStoreId}?tenantId=${tenantId}`,
+ method: 'GET',
+ responseHandler: (response) => response.blob(), // Get blob directly
+ }),
+ }
+ ),
+
+ // Upload file to filestore using multipart/form-data
+ uploadFileToFilestore: builder.mutation(
+ {
+ query: ({ file, tenantId = "pg", module = "HCM-ADMIN-CONSOLE-CLIENT", tag = "test" }) => {
+ const formData = new FormData();
+ formData.append('file', file);
+ formData.append('tenantId', tenantId);
+ formData.append('module', module);
+ formData.append('tag', tag);
+
+ return {
+ url: '/filestore/v1/files',
+ method: 'POST',
+ body: formData,
+ };
+ },
+ }
+ ),
+ }),
+});
+
+// Export RTK Query hooks for file blob and upload operations
+export const {
+ useGetFileBlobQuery,
+ useLazyGetFileBlobQuery,
+ useUploadFileToFilestoreMutation,
+} = filestoreApi;
\ No newline at end of file
diff --git a/frontend/mobile-ui/src/app/features/Citizen/api/CitizenHomePageApi/CitizenHomePageApi.ts b/frontend/mobile-ui/src/app/features/Citizen/api/CitizenHomePageApi/CitizenHomePageApi.ts
new file mode 100644
index 0000000..bde6020
--- /dev/null
+++ b/frontend/mobile-ui/src/app/features/Citizen/api/CitizenHomePageApi/CitizenHomePageApi.ts
@@ -0,0 +1,28 @@
+// CitizenHomePageApi defines API endpoints for fetching property applications for the Citizen homepage.
+// Uses Redux Toolkit Query to provide hooks for searching applications by assesseeId and draft status.
+import { apiSlice } from '../../../../../redux/apiSlice';
+import type { CitizenApplicationSearchResponse } from './CitizenHomePageModel';
+
+// Inject endpoint for searching citizen applications (homepage)
+export const citizenHomepageApi = apiSlice.injectEndpoints({
+ endpoints: (builder) => ({
+ // Fetch applications for 'homepage' by assesseeId & isDraft
+ getCitizenApplications: builder.query<
+ CitizenApplicationSearchResponse,
+ { assesseeId: string; isDraft?: boolean }
+ >({
+ query: ({ assesseeId, isDraft=true }) => ({
+ url: `/v1/applications/search`,
+ params: {
+ assesseeId,
+ isDraft,
+ },
+ method: 'GET',
+ }),
+ }),
+ }),
+});
+
+// Export RTK Query hook for fetching citizen applications
+export const { useGetCitizenApplicationsQuery } = citizenHomepageApi;
+export default citizenHomepageApi;
diff --git a/frontend/mobile-ui/src/app/features/Citizen/api/CitizenHomePageApi/CitizenHomePageModel.ts b/frontend/mobile-ui/src/app/features/Citizen/api/CitizenHomePageApi/CitizenHomePageModel.ts
new file mode 100644
index 0000000..d5ad4f8
--- /dev/null
+++ b/frontend/mobile-ui/src/app/features/Citizen/api/CitizenHomePageApi/CitizenHomePageModel.ts
@@ -0,0 +1,86 @@
+// Model definitions for Citizen homepage application search API response.
+// Each interface represents a part of the response structure for property applications.
+// Used by CitizenHomePageApi to type API data and enable type-safe access in components.
+//
+// Top-level response from /v1/applications/search?assesseeId=...&isDraft=...
+export interface CitizenApplicationSearchResponse {
+ data: CitizenApplicationSummary[];
+ message: string;
+ pagination: {
+ page: number;
+ size: number;
+ totalItems: number;
+ totalPages: number;
+ };
+ success: boolean;
+}
+
+// Application summary for each property application returned in the data array
+export interface CitizenApplicationSummary {
+ ID: string;
+ ApplicationNo: string;
+ PropertyID: string;
+ Priority: string;
+ TenantID: string;
+ DueDate: string;
+ AssignedAgent: string;
+ Status: string;
+ WorkflowInstanceID: string;
+ AppliedBy: string;
+ AssesseeID: string;
+ Property: CitizenPropertySummary;
+ ApplicationLogs: any;
+ IsDraft: boolean;
+ CreatedAt: string;
+ UpdatedAt: string;
+}
+
+// Property details nested within each application summary
+export interface CitizenPropertySummary {
+ ID: string;
+ PropertyNo: string;
+ OwnershipType: string;
+ PropertyType: string;
+ ComplexName: string;
+ Address: CitizenPropertyAddress;
+ AssessmentDetails: any;
+ Amenities: any[];
+ ConstructionDetails: any;
+ AdditionalDetails: any;
+ GISData: any;
+ CreatedAt: string;
+ UpdatedAt: string;
+ Documents: CitizenPropertyDocument[];
+ IGRS: any;
+ __appId: string;
+}
+
+// Address details for a property, nested within CitizenPropertySummary
+export interface CitizenPropertyAddress {
+ ID: string;
+ Locality: string;
+ ZoneNo: string;
+ WardNo: string;
+ BlockNo: string;
+ Street: string;
+ ElectionWard: string;
+ SecretariatWard: string;
+ PinCode: number;
+ DifferentCorrespondenceAddress: boolean;
+ PropertyID: string;
+ CreatedAt: string;
+ UpdatedAt: string;
+}
+
+// Document metadata for property documents, used in CitizenPropertySummary.Documents
+export interface CitizenPropertyDocument {
+ ID: string;
+ PropertyID: string;
+ DocumentType: string;
+ DocumentName: string;
+ FileStoreID: string;
+ UploadDate: string;
+ action: string;
+ uploadedBy: string;
+ size: string;
+}
\ No newline at end of file
diff --git a/frontend/mobile-ui/src/app/features/Citizen/api/CitizenPropertiesPageApi/CitizenPropertiesPageApi.ts b/frontend/mobile-ui/src/app/features/Citizen/api/CitizenPropertiesPageApi/CitizenPropertiesPageApi.ts
new file mode 100644
index 0000000..1773f36
--- /dev/null
+++ b/frontend/mobile-ui/src/app/features/Citizen/api/CitizenPropertiesPageApi/CitizenPropertiesPageApi.ts
@@ -0,0 +1,28 @@
+// CitizenPropertiesPageApi defines API endpoints for fetching property applications for the Citizen properties page.
+// Uses Redux Toolkit Query to provide hooks for searching applications by assesseeId and draft status.
+import { apiSlice } from '../../../../../redux/apiSlice';
+import type { CitizenApplicationSearchResponse } from '../CitizenHomePageApi/CitizenHomePageModel';
+
+// Inject endpoint for searching citizen properties (properties page)
+export const citizenPropertiesPageApi = apiSlice.injectEndpoints({
+ endpoints: (builder) => ({
+ // Fetch applications for 'homepage' by assesseeId & isDraft
+ getCitizenProperties: builder.query<
+ CitizenApplicationSearchResponse,
+ { assesseeId: string; Status: string; isDraft: boolean }
+ >({
+ query: ({ assesseeId, isDraft=true }) => ({
+ url: `/v1/applications/search`,
+ params: {
+ assesseeId,
+ isDraft,
+ },
+ method: 'GET',
+ }),
+ }),
+ }),
+});
+
+// Export RTK Query hook for fetching citizen properties
+export const { useGetCitizenPropertiesQuery } = citizenPropertiesPageApi;
+export default citizenPropertiesPageApi;
\ No newline at end of file
diff --git a/frontend/mobile-ui/src/app/features/Citizen/api/CitizenPropertiesPageApi/CitizenPropertyPageApi.ts b/frontend/mobile-ui/src/app/features/Citizen/api/CitizenPropertiesPageApi/CitizenPropertyPageApi.ts
new file mode 100644
index 0000000..2db6faa
--- /dev/null
+++ b/frontend/mobile-ui/src/app/features/Citizen/api/CitizenPropertiesPageApi/CitizenPropertyPageApi.ts
@@ -0,0 +1,24 @@
+// CitizenPropertyPageApi defines API endpoints for fetching a single property by propertyId for the Citizen property details page.
+// Uses Redux Toolkit Query to provide hooks for retrieving property details.
+import { apiSlice } from '../../../../../redux/apiSlice';
+import type { CitizenPropertyResponse } from '../../models/CitizenPropertiesPageModel/CitizenPropertyPageModel';
+
+// Inject endpoint for fetching a single citizen property by ID
+export const citizenPropertyPageApi = apiSlice.injectEndpoints({
+ endpoints: (builder) => ({
+ // Fetch single property by propertyId
+ getCitizenPropertyById: builder.query<
+ CitizenPropertyResponse,
+ { propertyId: string }
+ >({
+ query: ({ propertyId }) => ({
+ url: `/v1/properties/${propertyId}`,
+ method: 'GET',
+ }),
+ }),
+ }),
+});
+
+// Export RTK Query hook for fetching a single citizen property by ID
+export const { useGetCitizenPropertyByIdQuery } = citizenPropertyPageApi;
+export default citizenPropertyPageApi;
\ No newline at end of file
diff --git a/frontend/mobile-ui/src/app/features/Citizen/api/Property.slice.ts b/frontend/mobile-ui/src/app/features/Citizen/api/Property.slice.ts
new file mode 100644
index 0000000..4bd82a4
--- /dev/null
+++ b/frontend/mobile-ui/src/app/features/Citizen/api/Property.slice.ts
@@ -0,0 +1,26 @@
+// import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+// import type { Property } from '../models/Property.model';
+// import type { PropertyState } from '../models/PropertyState.model';
+
+// const initialState: PropertyState = {
+// selectedProperty: null,
+// };
+
+// const propertySlice = createSlice({
+// name: 'property',
+// initialState,
+// reducers: {
+// setSelectedProperty(state, action: PayloadAction) {
+// state.selectedProperty = action.payload;
+// },
+// clearSelectedProperty(state) {
+// state.selectedProperty = null;
+// },
+// },
+// });
+
+// export const { setSelectedProperty, clearSelectedProperty } = propertySlice.actions;
+// export default propertySlice.reducer;
+
+
+///
\ No newline at end of file
diff --git a/frontend/mobile-ui/src/app/features/Citizen/components/ChromeTabs.tsx b/frontend/mobile-ui/src/app/features/Citizen/components/ChromeTabs.tsx
new file mode 100644
index 0000000..e159a61
--- /dev/null
+++ b/frontend/mobile-ui/src/app/features/Citizen/components/ChromeTabs.tsx
@@ -0,0 +1,128 @@
+// ChromeTabs.tsx displays a tab switcher UI for toggling between Map and List views on the Citizen homepage.
+// It uses MUI for UI, localization for tab labels, and styled Button for custom tab appearance.
+// Main responsibilities:
+// - Render two tabs (Map, List) with dynamic selection
+// - Pass selected tab index and change handler via props
+// - Use localization for tab labels
+// Props:
+// selected (number): index of selected tab
+// onTabChange (function): callback for tab change
+// height, customWidth, selectedColor (optional): style overrides
+import React from 'react';
+import { Box, Button, styled } from '@mui/material';
+import { useAppSelector } from '../../../../redux/Hooks';
+import { getMessagesFromSession, useLocalization } from '../../../../services/Citizen/Localization/LocalizationContext';
+import LoadingPage from '../../../components/Loader';
+// Props for ChromeTabs: selected tab index, change handler, style overrides
+interface ChromeTabsProps {
+ selected: number;
+ onTabChange: (idx: number) => void;
+ selectedColor?: string;
+ height?: number;
+ customWidth?: string | number;
+}
+
+const SELECTED_BG = "#DFDFDF";
+const UNSELECTED_BG = "#fff";
+const SELECTED_COLOR = "#222";
+const UNSELECTED_COLOR = "#222";
+const BORDER_COLOR = "#222";
+
+// ChromeTabs component: renders two tabs (Map, List) with selection and localization
+const ChromeTabs: React.FC = ({
+ selected,
+ onTabChange,
+ height = 56,
+ customWidth,
+}) => {
+ const lang = useAppSelector(state => state.lang.citizenLang); // Current language
+ const { loading } = useLocalization(); // Global loading state
+ const messages = getMessagesFromSession("CITIZEN")!; // Localized messages
+
+ // Show loader if localization is loading
+ if (loading) {
+ return ;
+ }
+
+ // Render tab switcher UI
+ return (
+
+ onTabChange(0)}
+ >
+ {messages['citizen.home'][lang]?.['map-btn'] ?? "Map"}
+
+ onTabChange(1)}
+ >
+ {messages['citizen.home'][lang]?.['list-btn'] ?? "List"}
+
+
+ );
+};
+
+// TabButton: styled MUI Button for tab appearance and selection
+const TabButton = styled(Button, {
+ shouldForwardProp: (prop) => (
+ prop !== '$isSelected' &&
+ prop !== '$height' &&
+ prop !== '$selectedTab' &&
+ prop !== '$borderRadius'
+ )
+})<{
+ $isSelected: boolean;
+ $height: number;
+ $selectedTab: number;
+ $borderRadius: string;
+}>(
+ ({ $isSelected, $height, $borderRadius, theme }) => ({
+ flex: 1, // Each tab fills half the ChromeTabs container
+ height: $height,
+ padding: theme.spacing(0, 2),
+ fontWeight: 600,
+ borderRadius: $borderRadius,
+ fontSize: 18,
+ textTransform: 'none',
+ backgroundColor: $isSelected ? SELECTED_BG : UNSELECTED_BG,
+ color: $isSelected ? SELECTED_COLOR : UNSELECTED_COLOR,
+ border: 'none',
+ borderBottom: $isSelected ? `2px solid ${SELECTED_BG}` : `2px solid transparent`,
+ boxShadow: 'none',
+ margin: 0,
+ letterSpacing: '0.3px',
+ '&:hover': {
+ backgroundColor: $isSelected ? SELECTED_BG : "#F6F6F6"
+ },
+ '&:focus-visible': {
+ outline: `2px solid ${SELECTED_BG}`,
+ outlineOffset: 2
+ },
+ '&:not(:first-of-type)': {
+ marginLeft: 0
+ }
+ })
+);
+
+// Export ChromeTabs for use in Citizen homepage
+export default ChromeTabs;
\ No newline at end of file
diff --git a/frontend/mobile-ui/src/app/features/Citizen/components/EnumOptComponent.tsx b/frontend/mobile-ui/src/app/features/Citizen/components/EnumOptComponent.tsx
new file mode 100644
index 0000000..8ae40cd
--- /dev/null
+++ b/frontend/mobile-ui/src/app/features/Citizen/components/EnumOptComponent.tsx
@@ -0,0 +1,108 @@
+// EnumOptComponent.tsx displays either enumerated info cards or a progress bar for property enumeration status.
+// It uses MUI for UI, localization for labels, and shows last updated date.
+// Main responsibilities:
+// - Show EnumeratedInfo cards if progress is 100%
+// - Otherwise, show progress bar and last updated info
+// - Use localization for labels/messages
+// Props: property (CitizenPropertyData) - the property whose enumeration status is shown
+import type { FC } from 'react';
+import EnumeratedInfo from './EnumeratedInfo';
+import { Box, LinearProgress, Paper, Typography } from '@mui/material';
+import { useAppSelector } from '../../../../redux/Hooks';
+import {
+ getMessagesFromSession,
+ useLocalization,
+} from '../../../../services/Citizen/Localization/LocalizationContext';
+import LoadingPage from '../../../components/Loader';
+import type { CitizenPropertyData } from '../models/CitizenPropertiesPageModel/CitizenPropertyPageModel';
+
+interface ExtendedPropertyData extends CitizenPropertyData {
+ enumerationProgress?: number;
+ isDraft?: boolean;
+ applicationStatus?: string;
+}
+
+interface EnumOptComponentProps {
+ property: ExtendedPropertyData;
+}
+
+// EnumOptComponent: shows enumerated info or progress bar for property enumeration
+const EnumOptComponent: FC = ({ property }) => {
+ // Localization, state, and hooks
+ const lang = useAppSelector((state) => state.lang.citizenLang); // Current language
+ const { loading } = useLocalization(); // Global loading state
+ const messages = getMessagesFromSession('CITIZEN')!; // Localized messages
+
+ // No property: render nothing
+ if (!property) return null;
+
+ // Get enumeration progress from property
+ // Default to 50 if not provided and not a draft
+ let progress = 50;
+
+ if (property.enumerationProgress !== undefined) {
+ // If enumerationProgress is -1, it means draft, show 0% progress
+ if (property.enumerationProgress === -1) {
+ progress = 0;
+ } else {
+ console.log(property.enumerationProgress);
+
+ progress = property.enumerationProgress;
+ }
+ }
+
+ // Get last updated date from property
+ const lastUpdated = property.UpdatedAt
+ ? new Date(property.UpdatedAt).toLocaleDateString()
+ : '';
+
+ // Show loader if localization is loading
+ if (loading) {
+ return ;
+ }
+
+ // Render enumerated info cards if progress is 100%, else show progress bar
+ return progress === 100 ? (
+ {
+ /* handle view bills */
+ }}
+ onViewLicenses={() => {
+ /* handle view licenses */
+ }}
+ />
+ ) : (
+
+
+ {messages['citizen.my-properties'][lang]['enum-progress']}
+
+
+
+ {progress}%
+
+ {lastUpdated && (
+
+ {messages['citizen.commons'][lang]['last-updated']}: {lastUpdated}
+
+ )}
+
+ );
+};
+
+// Export EnumOptComponent for use in Citizen property details
+export default EnumOptComponent;
diff --git a/frontend/mobile-ui/src/app/features/Citizen/components/EnumeratedInfo.tsx b/frontend/mobile-ui/src/app/features/Citizen/components/EnumeratedInfo.tsx
new file mode 100644
index 0000000..5a6c216
--- /dev/null
+++ b/frontend/mobile-ui/src/app/features/Citizen/components/EnumeratedInfo.tsx
@@ -0,0 +1,139 @@
+// EnumeratedInfo.tsx displays summary cards for bills due and issued licenses on the Citizen dashboard.
+// It uses MUI for UI, localization for labels, and provides buttons to view bills and licenses.
+// Main responsibilities:
+// - Render two cards: bills due and issued licenses
+// - Show total amount and count
+// - Provide buttons for navigation to bills/licenses
+// Props:
+// billsDue (number): count of bills due
+// billsAmount (number): total amount due
+// issuedLicenses (number): count of issued licenses
+// onViewBills, onViewLicenses (function, optional): navigation handlers
+import React from "react";
+import { Box, Button, Typography, Paper } from "@mui/material";
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+import { useAppSelector } from "../../../../redux/Hooks";
+import { getMessagesFromSession, useLocalization } from "../../../../services/Citizen/Localization/LocalizationContext";
+import LoadingPage from "../../../components/Loader";
+
+
+// Props for EnumeratedInfo: bills/amount/licenses and navigation handlers
+interface EnumeratedInfoProps {
+ billsDue: number;
+ billsAmount: number;
+ issuedLicenses: number;
+ onViewBills?: () => void;
+ onViewLicenses?: () => void;
+}
+
+// EnumeratedInfo component: renders summary cards for bills and licenses
+const EnumeratedInfo: React.FC = ({
+ billsAmount,
+ issuedLicenses,
+ onViewBills,
+ onViewLicenses
+}) => {
+ const lang = useAppSelector(state => state.lang.citizenLang); // Current language
+ const { loading } = useLocalization(); // Global loading state
+ const messages = getMessagesFromSession("CITIZEN")!; // Localized messages
+
+ // Show loader if localization is loading
+ if (loading) {
+ return ;
+ }
+
+ // Render summary cards for bills and licenses
+ return (
+
+ {/* Bills Card */}
+
+
+ {messages['citizen.my-properties'][lang]['bills-due']}:
+
+
+ {/* {messages['citizen.my-properties'][lang]['total-amount']}: */}
+ Total Amount :
+
+
+ โน{billsAmount?.toLocaleString?.() || billsAmount}
+
+ }
+ >
+ {/* {messages['citizen.my-properties'][lang]['view-bills']} */}
+ View Bills
+
+
+ {/* Licenses Card */}
+
+
+ Issued Licenses:
+
+
+ {issuedLicenses}
+
+ }
+ >
+ {/* {messages['citizen.my-properties'][lang]['view-licenses']} */}
+ View Licences
+
+
+
+ );
+};
+
+// Export EnumeratedInfo for use in Citizen dashboard
+export default EnumeratedInfo;
\ No newline at end of file
diff --git a/frontend/mobile-ui/src/app/features/Citizen/components/ErrorMessage.tsx b/frontend/mobile-ui/src/app/features/Citizen/components/ErrorMessage.tsx
new file mode 100644
index 0000000..edd0f03
--- /dev/null
+++ b/frontend/mobile-ui/src/app/features/Citizen/components/ErrorMessage.tsx
@@ -0,0 +1,63 @@
+// ErrorMessage.tsx displays a styled error message for the Citizen UI.
+// It uses MUI for UI and shows an error icon, title, and message.
+// Main responsibilities:
+// - Render a centered error card with icon and message
+// - Use Paper for card styling and Typography for text
+// No props required; static error message
+import {type FC} from "react";
+import { Box, Typography, Paper } from "@mui/material";
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+
+// ErrorMessage component: renders a styled error card with icon and message
+const ErrorMessage: FC = () => (
+
+
+ {/* Error icon */}
+
+ {/* Error title */}
+
+ Error
+
+ {/* Error message */}
+
+ Something went wrong
+
+
+
+);
+
+// Export ErrorMessage for use in error boundaries and error states
+export default ErrorMessage;
\ No newline at end of file
diff --git a/frontend/mobile-ui/src/app/features/Citizen/components/InfoCard.tsx b/frontend/mobile-ui/src/app/features/Citizen/components/InfoCard.tsx
new file mode 100644
index 0000000..6cced97
--- /dev/null
+++ b/frontend/mobile-ui/src/app/features/Citizen/components/InfoCard.tsx
@@ -0,0 +1,34 @@
+// InfoCard.tsx displays a styled card with a title and count for summary info on the Citizen dashboard.
+// It uses MUI for UI and is used for showing counts (e.g., bills, licenses, etc.).
+// Main responsibilities:
+// - Render a card with title and count
+// - Style card for dashboard summary
+// Props:
+// title (string): label for the card
+// count (number): value to display
+import React from 'react';
+import { Typography, Paper } from '@mui/material';
+
+// InfoCard component: renders a styled card with title and count
+const InfoCard: React.FC<{ title: string; count: number }> = ({ title, count }) => (
+
+ {/* Card title */}
+ {title}
+ {/* Card count value */}
+ {count}
+
+);
+
+// Export InfoCard for use in dashboard summary sections
+export default InfoCard;
\ No newline at end of file
diff --git a/frontend/mobile-ui/src/app/features/Citizen/components/MapComponent.tsx b/frontend/mobile-ui/src/app/features/Citizen/components/MapComponent.tsx
new file mode 100644
index 0000000..4e7931a
--- /dev/null
+++ b/frontend/mobile-ui/src/app/features/Citizen/components/MapComponent.tsx
@@ -0,0 +1,107 @@
+// MapComponent.tsx displays a Leaflet map centered on a given latitude/longitude with a marker.
+// It uses react-leaflet for map rendering and supports custom tile URL and marker icon.
+// Main responsibilities:
+// - Render a map centered at lat/lng
+// - Show a marker at the property location
+// - Use custom tile URL and icon for map/marker
+// Props:
+// latLng: { lat, lng } - coordinates to center and mark
+// tileUrl: string - URL for map tiles
+// customIcon: L.Icon - Leaflet icon for marker
+import { useEffect, useRef } from 'react';
+import type { FC } from 'react';
+import maplibregl from 'maplibre-gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
+
+type LatLng = { lat: number; lng: number };
+type CustomIconLike = {
+ iconUrl?: string;
+ iconSize?: [number, number];
+ iconAnchor?: [number, number];
+ popupAnchor?: [number, number];
+ className?: string;
+};
+
+const MapComponent: FC<{
+ latLng: LatLng;
+ tileUrl: string; // kept for compatibility with existing callers (tab toggle)
+ customIcon: CustomIconLike;
+}> = ({ latLng, tileUrl, customIcon }) => {
+ const containerRef = useRef(null);
+ const mapRef = useRef(null);
+ const markerRef = useRef(null);
+
+ useEffect(() => {
+ if (!containerRef.current) return;
+
+ // cleanup previous map if any
+ if (mapRef.current) {
+ markerRef.current?.remove();
+ mapRef.current.remove();
+ mapRef.current = null;
+ markerRef.current = null;
+ }
+
+ // Use the tileUrl passed from props as the style
+ mapRef.current = new maplibregl.Map({
+ container: containerRef.current,
+ style: tileUrl,
+ center: [latLng.lng, latLng.lat],
+ zoom: 15,
+ attributionControl: false,
+ scrollZoom: false,
+ doubleClickZoom: false,
+ });
+
+ // create marker element using provided icon-like object (keeps visual same)
+ const el = document.createElement('div');
+ el.style.display = 'inline-block';
+ el.style.lineHeight = '0';
+ el.style.pointerEvents = 'auto';
+
+ const img = document.createElement('img');
+ img.src = customIcon?.iconUrl ?? '';
+ if (customIcon?.iconSize) {
+ img.style.width = `${customIcon.iconSize[0]}px`;
+ img.style.height = `${customIcon.iconSize[1]}px`;
+ } else {
+ img.style.width = '40px';
+ img.style.height = '40px';
+ }
+ img.alt = 'marker';
+ if (customIcon?.className) img.className = customIcon.className;
+
+ el.appendChild(img);
+
+ // position marker with anchor adjustments (maplibre Marker positions by element's top-left)
+ // we'll add margin to mimic iconAnchor behaviour if provided
+ if (customIcon?.iconAnchor) {
+ // convert anchor so element bottom center aligns to coordinates
+ const [ax, ay] = customIcon.iconAnchor;
+ // apply transform so coordinate aligns similarly to Leaflet anchor
+ el.style.transform = `translate(${
+ -ax + (customIcon.iconSize ? customIcon.iconSize[0] / 2 : 20)
+ }px, ${-ay}px)`;
+ } else {
+ el.style.transform = 'translate(-20px, -40px)';
+ }
+ mapRef.current.addControl(new maplibregl.NavigationControl(), 'top-right');
+ markerRef.current = new maplibregl.Marker({ element: el, anchor: 'bottom' })
+ .setLngLat([latLng.lng, latLng.lat])
+ .addTo(mapRef.current);
+
+ return () => {
+ markerRef.current?.remove();
+ markerRef.current = null;
+
+ if (mapRef.current) {
+ mapRef.current.remove();
+ mapRef.current = null;
+ }
+ };
+ }, [latLng.lat, latLng.lng, tileUrl, customIcon]);
+
+ return ;
+};
+
+export default MapComponent;
diff --git a/frontend/mobile-ui/src/app/features/Citizen/components/MapView.tsx b/frontend/mobile-ui/src/app/features/Citizen/components/MapView.tsx
new file mode 100644
index 0000000..8816be2
--- /dev/null
+++ b/frontend/mobile-ui/src/app/features/Citizen/components/MapView.tsx
@@ -0,0 +1,445 @@
+// MapView.tsx displays a Leaflet map with property markers for the Citizen property list/map view.
+// It supports selection, custom marker icons, and property details popups.
+// Main responsibilities:
+// - Render map with property markers and selection
+// - Show property info card on marker select
+// - Handle marker click and details navigation
+// - Use custom icons and panes for selected marker
+// Props:
+// properties: array of property objects
+// selectedMarkerIdx: index of selected marker
+// setSelectedMarkerIdx: callback to set selected marker
+// center, height, showEmptyMessage, zoom, onViewDetails: map options and event handlers
+import React, { useMemo, useEffect, useRef } from 'react';
+import { Box } from '@mui/material';
+import '../../../../styles/Citizen/PropertyMarker.css';
+import maplibregl from 'maplibre-gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { useNavigate } from 'react-router-dom';
+
+import pointerLight from '../../../assets/Citizen/home_page/property_pointer_light.svg';
+import pointerDark from '../../../assets/Citizen/home_page/property_pointer_dark.svg';
+
+// Accept the *application* shape where GISData.Coordinates is under Property
+// ...existing code...
+
+interface GenericProperty {
+ Property?: {
+ GISData?: {
+ Latitude?: number;
+ Longitude?: number;
+ Coordinates?: { Latitude?: number; Longitude?: number }[];
+ };
+ Address?: {
+ BlockNo?: string;
+ PinCode?: string | number;
+ Display?: string;
+ Street?: string;
+ [key: string]: any;
+ };
+ [key: string]: any;
+ };
+ locationData?: {
+ address?: string;
+ coordinates?: {
+ lat?: number;
+ lng?: number;
+ };
+ };
+ PropertyID?: string;
+ id?: string;
+ Status?: string;
+ enumerationProgress?: number;
+ [key: string]: any;
+}
+
+// MapViewProps defines the props for the MapView component
+interface MapViewProps {
+ properties: GenericProperty[];
+ selectedMarkerIdx: number | null;
+ setSelectedMarkerIdx: (idx: number | null) => void;
+ center?: [number, number];
+ height?: number;
+ showEmptyMessage?: boolean;
+ zoom?: number;
+ onViewDetails?: (property: GenericProperty) => void;
+}
+
+const FALLBACK_CENTER: [number, number] = [12.9716, 77.5946];
+
+const STATUS_PROGRESS_MAP: Record = {
+ INITIATED: 20,
+ ASSIGNED: 40,
+ VERIFIED: 60,
+ AUDIT_VERIFIED: 80,
+ APPROVED: 100,
+};
+
+// propertyToMarkerInfo: extracts marker info from property object
+function propertyToMarkerInfo(p: GenericProperty): {
+ lat?: number;
+ lng?: number;
+ address?: any;
+ blockNo?: string;
+ pinCode?: string | number;
+ id?: string;
+ Status?: string;
+ enumerationProgress?: number;
+} {
+ const status = (p.Status || '').toUpperCase();
+ const enumerationProgress = STATUS_PROGRESS_MAP[status] ?? 0;
+
+ if (p?.locationData?.coordinates) {
+ return {
+ lat: p.Property?.GISData?.Latitude,
+ lng: p.Property?.GISData?.Longitude,
+ address: p.locationData.address,
+ blockNo: p?.Property?.Address?.BlockNo,
+ pinCode: p?.Property?.Address?.PinCode,
+ id: p.id,
+ enumerationProgress,
+ };
+ }
+
+ // Check if GISData has direct Latitude/Longitude
+ const gisData = p?.Property?.GISData;
+ let lat: number | undefined;
+ let lng: number | undefined;
+
+ if (gisData) {
+ // First try direct Latitude/Longitude
+ if (gisData.Latitude != null && gisData.Longitude != null) {
+ lat = gisData.Latitude;
+ lng = gisData.Longitude;
+ }
+ // Fallback to Coordinates array
+ else if (gisData.Coordinates?.[0]) {
+ lat = gisData.Coordinates[0].Latitude;
+ lng = gisData.Coordinates[0].Longitude;
+ }
+ }
+
+ const addressObj = p?.Property?.Address;
+ let addressString = '';
+
+ if (addressObj) {
+ // Use Display if available, otherwise construct from parts
+ if (addressObj.Display) {
+ addressString = addressObj.Display;
+ } else if (addressObj.Street || addressObj.Locality) {
+ const parts = [
+ addressObj.Street,
+ addressObj.Locality,
+ addressObj.BlockNo,
+ addressObj.WardNo,
+ ].filter(Boolean);
+ addressString = parts.join(', ');
+ } else {
+ addressString = 'Address not available';
+ }
+ } else {
+ addressString = p?.PropertyID || 'Unknown address';
+ }
+
+ return {
+ lat,
+ lng,
+ address: addressString,
+ blockNo: p?.Property?.Address?.BlockNo,
+ pinCode: p?.Property?.Address?.PinCode,
+ id: p.id || p.PropertyID,
+ enumerationProgress,
+ };
+}
+
+// createMarkerElement: builds a DOM element for MapLibre marker (keeps same HTML/style as Leaflet DivIcon)
+function createMarkerElement(
+ selected: boolean,
+ markerData?: ReturnType
+): HTMLElement {
+ const pointerSize = selected ? 70 : 60;
+ const blockNoStr = markerData?.blockNo
+ ? `