diff --git a/Form7ApprovalPending/config.json b/Form7ApprovalPending/config.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/Form7ApprovalPending/config.json @@ -0,0 +1 @@ +{} diff --git a/Form7ApprovalPending/icon.svg b/Form7ApprovalPending/icon.svg new file mode 100644 index 0000000..39ab732 --- /dev/null +++ b/Form7ApprovalPending/icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Form7ApprovalPending/manifest.json b/Form7ApprovalPending/manifest.json new file mode 100644 index 0000000..8b83821 --- /dev/null +++ b/Form7ApprovalPending/manifest.json @@ -0,0 +1,29 @@ +{ + "name": "Form7ApprovalPending", + "label": "Form7ApprovalPending", + "type": "widget", + "version": "1.16.0", + "exbVersion": "1.16.0", + "author": "Tanii GIS Developer", + "description": "This is a barebones, simple widget. It includes an example of how to use the config file, and it includes a placeholder SVG icon. It intentionally does not include the following so you can use this to start from scratch: i18n translations, a Settings panel, unit tests. See the documentation for more information on how to implement these features.", + "copyright": "", + "license": "http://www.apache.org/licenses/LICENSE-2.0", + "properties": { + "hasSettingPage": false + }, + "widgets": [ + { + "uri": "Approval_Pending", + "label": "Approval_Pending", + "thumbnail": "thumbnail.png", + "description": "Summarizes Street Light, Highmast, and Pillar Box counts by zone." + } + ], + "framework": "react", + "translatedLocales": ["en"], + "dataSources": [], + "elements": [] +} + + + diff --git a/Form7ApprovalPending/src/config.ts b/Form7ApprovalPending/src/config.ts new file mode 100644 index 0000000..780aacf --- /dev/null +++ b/Form7ApprovalPending/src/config.ts @@ -0,0 +1,7 @@ +import { type ImmutableObject } from 'seamless-immutable' + +export interface Config { + exampleConfigProperty: string +} + +export type IMConfig = ImmutableObject diff --git a/Form7ApprovalPending/src/runtime/widget.tsx b/Form7ApprovalPending/src/runtime/widget.tsx new file mode 100644 index 0000000..1100adf --- /dev/null +++ b/Form7ApprovalPending/src/runtime/widget.tsx @@ -0,0 +1,1317 @@ +import React, { useEffect, useMemo, useState } from 'react'; +import FeatureLayer from '@arcgis/core/layers/FeatureLayer'; +import { + Box, + Typography, + FormControl, + Select, + MenuItem, + InputLabel, + Button +} from '@mui/material'; + +interface Form7Record { + zone: string; + ward: string; + status: string; +} + +interface ZoneData { + zone_no: string; + pendingCount: number; + toBeVerifiedCount: number; + totalCount: number; +} + +const FORM7_POINT_LAYER_URL = + 'https://gisgcc.chennaicorporation.gov.in/server/rest/services/Revenue/Form7_Point/FeatureServer/0'; + +const ZoneIntimationOnly = () => { + // ===================================================== + // DATA + // ===================================================== + + const [records, setRecords] = useState([]); + + const [loading, setLoading] = useState(true); + + const [error, setError] = useState(''); + + // ===================================================== + // FILTERS + // ===================================================== + + const [selectedZone, setSelectedZone] = useState(''); + + const [selectedWard, setSelectedWard] = useState(''); + + const [selectedStatus, setSelectedStatus] = useState(''); + + // Skeleton filters for tomorrow + const [selectedCreatedUser, setSelectedCreatedUser] = + useState(''); + + const [selectedCreatedDate, setSelectedCreatedDate] = + useState(''); + + // ===================================================== + // NORMALIZE ZONE + // ===================================================== + + const normalizeZone = (zone: any): string => { + if ( + zone === null || + zone === undefined || + zone === '' + ) { + return ''; + } + + const value = String(zone).trim(); + + const match = value.match(/\d+/); + + if (!match) { + return ''; + } + + return match[0].padStart(2, '0'); + }; + + // ===================================================== + // NORMALIZE TEXT + // ===================================================== + + const normalizeText = (value: any): string => { + if ( + value === null || + value === undefined + ) { + return ''; + } + + return String(value).trim(); + }; + + // ===================================================== + // FETCH FORM 7 DATA + // ===================================================== + + const fetchData = async () => { + setLoading(true); + + setError(''); + + try { + const form7Layer = new FeatureLayer({ + url: FORM7_POINT_LAYER_URL + }); + + await form7Layer.load(); + + console.log( + 'Form 7 Point layer loaded:', + form7Layer + ); + + console.table( + form7Layer.fields.map(field => ({ + name: field.name, + alias: field.alias, + type: field.type + })) + ); + + // ================================================= + // QUERY + // ================================================= + + const query = form7Layer.createQuery(); + + query.where = '1=1'; + + query.outFields = [ + 'zone_number', + 'ward_number', + 'status' + ]; + + query.returnGeometry = false; + + console.log( + 'Form 7 query:', + { + where: query.where, + outFields: query.outFields + } + ); + + const result = + await form7Layer.queryFeatures(query); + + console.log( + 'Form 7 query result:', + result + ); + + console.log( + 'Form 7 record count:', + result.features.length + ); + + // ================================================= + // CONVERT TO SIMPLE RECORDS + // ================================================= + + const formattedRecords: Form7Record[] = + result.features + .map(feature => { + + const attributes = + feature.attributes || {}; + + const zone = + normalizeZone( + attributes.zone_number + ); + + const ward = + normalizeText( + attributes.ward_number + ); + + const status = + normalizeText( + attributes.status + ).toLowerCase(); + + return { + zone, + ward, + status + }; + }) + .filter(record => record.zone !== ''); + + console.log( + 'Formatted Form 7 records:', + formattedRecords + ); + + setRecords(formattedRecords); + + } catch (err: any) { + + console.error( + 'Error loading Form 7 Point data:', + err + ); + + console.error( + 'Error details:', + err?.details + ); + + setError( + err?.message || + 'Unable to load Form 7 Point data.' + ); + + setRecords([]); + + } finally { + + setLoading(false); + + } + }; + + // ===================================================== + // LOAD DATA + // ===================================================== + + useEffect(() => { + fetchData(); + }, []); + + // ===================================================== + // ZONE DROPDOWN + // ===================================================== + + const zones = useMemo(() => { + + const uniqueZones = + Array.from( + new Set( + records + .map(record => record.zone) + .filter(Boolean) + ) + ); + + return uniqueZones.sort( + (a, b) => + parseInt(a, 10) - + parseInt(b, 10) + ); + + }, [records]); + + // ===================================================== + // WARD DROPDOWN + // ===================================================== + + const wards = useMemo(() => { + + const filteredRecords = + selectedZone + ? records.filter( + record => + record.zone === selectedZone + ) + : records; + + const uniqueWards = + Array.from( + new Set( + filteredRecords + .map(record => record.ward) + .filter(Boolean) + ) + ); + + return uniqueWards.sort( + (a, b) => { + + const numA = + parseInt(a.replace(/\D/g, ''), 10); + + const numB = + parseInt(b.replace(/\D/g, ''), 10); + + if ( + !isNaN(numA) && + !isNaN(numB) + ) { + return numA - numB; + } + + return a.localeCompare(b); + } + ); + + }, [records, selectedZone]); + + // ===================================================== + // STATUS DROPDOWN + // ===================================================== + + const statuses = useMemo(() => { + + const uniqueStatuses = + Array.from( + new Set( + records + .map(record => record.status) + .filter(Boolean) + ) + ); + + return uniqueStatuses; + + }, [records]); + + // ===================================================== + // FILTERED RECORDS + // ===================================================== + + const filteredRecords = useMemo(() => { + + return records.filter(record => { + + if ( + selectedZone && + record.zone !== selectedZone + ) { + return false; + } + + if ( + selectedWard && + record.ward !== selectedWard + ) { + return false; + } + + if ( + selectedStatus && + record.status !== + selectedStatus.toLowerCase() + ) { + return false; + } + + // ================================================= + // CREATED USER + // ================================================= + // Editor tracking will be connected tomorrow. + // Currently no filtering is applied. + + // ================================================= + // CREATED DATE + // ================================================= + // Editor tracking will be connected tomorrow. + // Currently no filtering is applied. + + return true; + }); + + }, [ + records, + selectedZone, + selectedWard, + selectedStatus, + selectedCreatedUser, + selectedCreatedDate + ]); + + // ===================================================== + // CREATE ZONE SUMMARY + // ===================================================== + + const zoneData: ZoneData[] = useMemo(() => { + + const pendingMap: Record< + string, + number + > = {}; + + const tbvMap: Record< + string, + number + > = {}; + + const totalMap: Record< + string, + number + > = {}; + + filteredRecords.forEach(record => { + + const zone = + record.zone; + + if (!zone) { + return; + } + + // TOTAL + + totalMap[zone] = + (totalMap[zone] || 0) + 1; + + // PENDING + + if ( + record.status === 'pending' + ) { + pendingMap[zone] = + (pendingMap[zone] || 0) + 1; + } + + // TO BE VERIFIED + + if ( + record.status === + 'to be verified' + ) { + tbvMap[zone] = + (tbvMap[zone] || 0) + 1; + } + + }); + + const allZones = + new Set([ + ...Object.keys(totalMap), + ...Object.keys(pendingMap), + ...Object.keys(tbvMap) + ]); + + const result: ZoneData[] = + Array.from(allZones).map( + zone => ({ + zone_no: zone, + + pendingCount: + pendingMap[zone] || 0, + + toBeVerifiedCount: + tbvMap[zone] || 0, + + totalCount: + totalMap[zone] || 0 + }) + ); + + result.sort( + (a, b) => + parseInt(a.zone_no, 10) - + parseInt(b.zone_no, 10) + ); + + return result; + + }, [filteredRecords]); + + // ===================================================== + // SUMMARY CARD COUNTS + // ===================================================== + + const totalPending = + filteredRecords.filter( + record => + record.status === 'pending' + ).length; + + const totalTBV = + filteredRecords.filter( + record => + record.status === + 'to be verified' + ).length; + + const totalRecords = + filteredRecords.length; + + // ===================================================== + // RESET FILTERS + // ===================================================== + + const resetFilters = () => { + + setSelectedZone(''); + + setSelectedWard(''); + + setSelectedStatus(''); + + setSelectedCreatedUser(''); + + setSelectedCreatedDate(''); + + }; + + // ===================================================== + // LOADING + // ===================================================== + + if (loading) { + + return ( + + + + + + Loading Form 7 Point summary... + + + + + + ); + } + + // ===================================================== + // ERROR + // ===================================================== + + if (error) { + + return ( + + + + + + {error} + + + + + + ); + } + + // ===================================================== + // MAIN UI + // ===================================================== + + return ( + + + {/* ================================================= + HEADER + ================================================= */} + + + + + Form 7 Point Intimation + + + + Zone-wise approval status summary + + + + + {/* ================================================= + SUMMARY CARDS + ================================================= */} + + + + {/* TOTAL */} + + + + + TOTAL + + + + {totalRecords.toLocaleString()} + + + + + {/* PENDING */} + + + + + PENDING + + + + {totalPending.toLocaleString()} + + + + + {/* TO BE VERIFIED */} + + + + + TO BE VERIFIED + + + + {totalTBV.toLocaleString()} + + + + + + + {/* ================================================= + FILTER CARD + ================================================= */} + + + + + + + Filters + + + + + + + {/* FILTER ROW */} + + + + {/* ZONE */} + + + + + Zone + + + + + + + {/* WARD */} + + + + + Ward + + + + + + + {/* STATUS */} + + + + + Approval Status + + + + + + + {/* CREATED USER SKELETON */} + + + + + Created User + + + + + + + {/* CREATED DATE SKELETON */} + + + + + Created Date + + + + + + + + + {/* EDITOR TRACKING NOTE */} + + + + + Created User and Created Date + filters will be enabled after + Editor Tracking fields are + available. + + + + + + + {/* ================================================= + ZONE TABLE + ================================================= */} + + + + {/* TABLE HEADER */} + + + + + ZONE + + + + PENDING + + + + TO BE VERIFIED + + + + TOTAL + + + + + {/* TABLE BODY */} + + + + {zoneData.length === 0 ? ( + + + + + No records found for the + selected filters. + + + + + ) : ( + + zoneData.map( + (zone, index) => ( + + + + {/* ZONE */} + + + Zone {zone.zone_no} + + + {/* PENDING */} + + + + + 0 + ? '#fff3e0' + : '#f5f5f5', + color: + zone.pendingCount > + 0 + ? '#ef6c00' + : '#9e9e9e', + textAlign: + 'center', + fontSize: 12, + fontWeight: 700 + }} + > + {zone.pendingCount.toLocaleString()} + + + + + {/* TO BE VERIFIED */} + + + + + 0 + ? '#e8f5e9' + : '#f5f5f5', + color: + zone.toBeVerifiedCount > + 0 + ? '#2e7d32' + : '#9e9e9e', + textAlign: + 'center', + fontSize: 12, + fontWeight: 700 + }} + > + {zone.toBeVerifiedCount.toLocaleString()} + + + + + {/* TOTAL */} + + + {zone.totalCount.toLocaleString()} + + + + + ) + ) + + )} + + + + + + + ); +}; + +export default ZoneIntimationOnly; \ No newline at end of file diff --git a/Form7Buildingdatesummary/config.json b/Form7Buildingdatesummary/config.json new file mode 100644 index 0000000..0ce5fd8 --- /dev/null +++ b/Form7Buildingdatesummary/config.json @@ -0,0 +1,5 @@ +{ + "exampleConfigProperty": "test", + "useMapWidget": true + +} diff --git a/Form7Buildingdatesummary/icon.svg b/Form7Buildingdatesummary/icon.svg new file mode 100644 index 0000000..77fac85 --- /dev/null +++ b/Form7Buildingdatesummary/icon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/Form7Buildingdatesummary/manifest.json b/Form7Buildingdatesummary/manifest.json new file mode 100644 index 0000000..7374658 --- /dev/null +++ b/Form7Buildingdatesummary/manifest.json @@ -0,0 +1,19 @@ +{ + "name": "Form7Buildingdatesummary", + "label": "Form7Buildingdatesummary", + "type": "widget", + "version": "1.16.0", + "exbVersion": "1.16.0", + "author": "Esri R&D Center Beijing", + "description": "This is a barebones, simple widget. It includes an example of how to use the config file, and it includes a placeholder SVG icon. It intentionally does not include the following so you can use this to start from scratch: i18n translations, a Settings panel, unit tests. See the documentation for more information on how to implement these features.", + "copyright": "", + "license": "http://www.apache.org/licenses/LICENSE-2.0", + "properties": {}, + "translatedLocales": [ + "en" + ], + "defaultSize": { + "width": 800, + "height": 500 + } +} \ No newline at end of file diff --git a/Form7Buildingdatesummary/src/config.ts b/Form7Buildingdatesummary/src/config.ts new file mode 100644 index 0000000..780aacf --- /dev/null +++ b/Form7Buildingdatesummary/src/config.ts @@ -0,0 +1,7 @@ +import { type ImmutableObject } from 'seamless-immutable' + +export interface Config { + exampleConfigProperty: string +} + +export type IMConfig = ImmutableObject diff --git a/Form7Buildingdatesummary/src/runtime/components/LoadingPopup.css b/Form7Buildingdatesummary/src/runtime/components/LoadingPopup.css new file mode 100644 index 0000000..5d83905 --- /dev/null +++ b/Form7Buildingdatesummary/src/runtime/components/LoadingPopup.css @@ -0,0 +1,45 @@ +.loading-overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 1000; + display: flex; + justify-content: center; + align-items: center; + } + + .loading-box { + background: #fff; + padding: 24px; + border-radius: 8px; + width: 280px; + text-align: center; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); + } + + .loading-title { + font-size: 1.2rem; + font-weight: bold; + margin-bottom: 16px; + } + + .spinner { + border: 4px solid #e0e0e0; + border-top: 4px solid #009688; + border-radius: 50%; + width: 32px; + height: 32px; + animation: spin 1s linear infinite; + margin: 0 auto 12px auto; + } + + @keyframes spin { + to { + transform: rotate(360deg); + } + } + + .loading-message { + color: #555; + } + \ No newline at end of file diff --git a/Form7Buildingdatesummary/src/runtime/components/LoadingPopup.tsx b/Form7Buildingdatesummary/src/runtime/components/LoadingPopup.tsx new file mode 100644 index 0000000..0a2cc49 --- /dev/null +++ b/Form7Buildingdatesummary/src/runtime/components/LoadingPopup.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import './LoadingPopup.css'; + +interface LoadingPopupProps { + show: boolean; + message?: string; +} + +const LoadingPopup: React.FC = ({ show, message = "Preparing to download ..." }) => { + if (!show) return null; + + return ( +
+
+

Please Wait..

+
+

{message}

+
+
+ ); +}; + +export default LoadingPopup; diff --git a/Form7Buildingdatesummary/src/runtime/components/LoadingSpinner.jsx b/Form7Buildingdatesummary/src/runtime/components/LoadingSpinner.jsx new file mode 100644 index 0000000..0a2cc49 --- /dev/null +++ b/Form7Buildingdatesummary/src/runtime/components/LoadingSpinner.jsx @@ -0,0 +1,23 @@ +import React from 'react'; +import './LoadingPopup.css'; + +interface LoadingPopupProps { + show: boolean; + message?: string; +} + +const LoadingPopup: React.FC = ({ show, message = "Preparing to download ..." }) => { + if (!show) return null; + + return ( +
+
+

Please Wait..

+
+

{message}

+
+
+ ); +}; + +export default LoadingPopup; diff --git a/Form7Buildingdatesummary/src/runtime/widget.tsx b/Form7Buildingdatesummary/src/runtime/widget.tsx new file mode 100644 index 0000000..0019921 --- /dev/null +++ b/Form7Buildingdatesummary/src/runtime/widget.tsx @@ -0,0 +1,1548 @@ +import React, { useEffect, useState } from 'react'; +import { AllWidgetProps } from 'jimu-core'; +import FeatureLayer from '@arcgis/core/layers/FeatureLayer'; + +type SummaryRow = { + zone: string; + countsByDate: { [date: string]: number }; + total: number; +}; + +const ZoneWardDateSummary = (props: AllWidgetProps) => { + + // ============================================================ + // FORM 7 POINT LAYER + // ============================================================ + + const pointLayerUrl = + 'https://gisgcc.chennaicorporation.gov.in/server/rest/services/Revenue/Form7_Point/FeatureServer/0'; + + // ============================================================ + // STATE + // ============================================================ + + const [zones, setZones] = useState([]); + const [selectedZone, setSelectedZone] = useState(''); + + const [startDate, setStartDate] = useState(''); + const [endDate, setEndDate] = useState(''); + + const [summaryRows, setSummaryRows] = useState([]); + const [dateColumns, setDateColumns] = useState([]); + + const [loadingZones, setLoadingZones] = useState(false); + const [loading, setLoading] = useState(false); + + const [message, setMessage] = useState(''); + const [messageType, setMessageType] = + useState<'error' | 'success' | ''>(''); + + // ============================================================ + // HELPERS + // ============================================================ + + const fmtDateKey = (d: Date) => { + const y = d.getFullYear(); + const m = (d.getMonth() + 1).toString().padStart(2, '0'); + const day = d.getDate().toString().padStart(2, '0'); + + return `${y}-${m}-${day}`; + }; + + const displayDate = (iso: string) => { + const d = new Date(`${iso}T00:00:00`); + + const dd = d.getDate().toString().padStart(2, '0'); + const mm = (d.getMonth() + 1).toString().padStart(2, '0'); + const yy = d.getFullYear().toString().slice(-2); + + return `${dd}.${mm}.${yy}`; + }; + + const rangeDates = ( + startISO: string, + endISO: string + ) => { + const arr: string[] = []; + + if (!startISO || !endISO) { + return arr; + } + + const start = new Date(`${startISO}T00:00:00`); + const end = new Date(`${endISO}T00:00:00`); + + for ( + let d = new Date(start); + d <= end; + d.setDate(d.getDate() + 1) + ) { + arr.push(fmtDateKey(new Date(d))); + } + + return arr; + }; + + const toDateWhere = ( + fieldName: string, + startISO?: string, + endISO?: string +) => { + + const parts: string[] = []; + + if (startISO) { + parts.push( + `${fieldName} >= DATE '${startISO} 00:00:00'` + ); + } + + if (endISO) { + parts.push( + `${fieldName} <= DATE '${endISO} 23:59:59'` + ); + } + + return parts.join(' AND '); +}; + const safeGetAttr = ( + attr: any, + field: string + ) => { + + if (!attr) { + return null; + } + + return ( + attr[field] ?? + attr[field.toUpperCase()] ?? + attr[field.toLowerCase()] ?? + null + ); + }; + + // ============================================================ + // LOAD ZONES + // ============================================================ + + useEffect(() => { + + const loadZones = async () => { + + setLoadingZones(true); + + try { + + const fl = new FeatureLayer({ + url: pointLayerUrl + }); + + const query = fl.createQuery(); + + query.outFields = ['zone_number']; + query.returnGeometry = false; + query.where = '1=1'; + + const result = await fl.queryFeatures(query); + + const collected: string[] = []; + + result.features.forEach(feature => { + + const value = safeGetAttr( + feature.attributes, + 'zone_number' + ); + + if ( + value !== null && + value !== undefined && + String(value).trim() !== '' + ) { + + collected.push( + String(value).trim() + ); + } + + }); + + const uniqueZones = Array.from( + new Set(collected) + ).sort((a, b) => + a.localeCompare(b, undefined, { + numeric: true + }) + ); + + setZones(uniqueZones); + + } catch (error) { + + console.error( + 'Failed to load zones:', + error + ); + + setMessage( + 'Unable to load zones from Form 7 Point layer.' + ); + + setMessageType('error'); + + } finally { + + setLoadingZones(false); + + } + }; + + loadZones(); + + }, [pointLayerUrl]); + + // ============================================================ + // FETCH SUMMARY + // ============================================================ + + const fetchAndBuildSummary = async () => { + + setMessage(''); + setMessageType(''); + + setSummaryRows([]); + setDateColumns([]); + + // ---------------------------------------------------------- + // VALIDATION + // ---------------------------------------------------------- + + if (!startDate || !endDate) { + + setMessage( + 'Please select both Start Date and End Date.' + ); + + setMessageType('error'); + + return; + } + + if (startDate > endDate) { + + setMessage( + 'Start Date cannot be later than End Date.' + ); + + setMessageType('error'); + + return; + } + + // ---------------------------------------------------------- + // DATE COLUMNS + // ---------------------------------------------------------- + + const dCols = rangeDates( + startDate, + endDate + ); + + if (dCols.length === 0) { + + setMessage( + 'Invalid date range.' + ); + + setMessageType('error'); + + return; + } + + setDateColumns(dCols); + + setLoading(true); + + try { + + const zoneFieldName = 'zone_number'; + const dateFieldName = 'created_date'; + + // -------------------------------------------------------- + // BUILD WHERE CLAUSE + // -------------------------------------------------------- + + const dateWhere = + toDateWhere( + dateFieldName, + startDate, + endDate + ); + + let zoneWhere = ''; + + if (selectedZone) { + + const trimmedZone = + selectedZone.replace(/'/g, "''"); + + zoneWhere = + `${zoneFieldName} = '${trimmedZone}'`; + } + + const whereParts = [ + dateWhere, + zoneWhere + ].filter(Boolean); + + const whereClause = + whereParts.length > 0 + ? whereParts.join(' AND ') + : '1=1'; + + console.log( + 'Form 7 Query:', + whereClause + ); + + // -------------------------------------------------------- + // QUERY LAYER + // -------------------------------------------------------- + + const fl = new FeatureLayer({ + url: pointLayerUrl + }); + + const query = fl.createQuery(); + + query.outFields = [ + zoneFieldName, + dateFieldName + ]; + + query.returnGeometry = false; + query.where = whereClause; + + const result = + await fl.queryFeatures(query); + + // -------------------------------------------------------- + // TRANSFER LIMIT + // -------------------------------------------------------- + + if ((result as any).exceededTransferLimit) { + + console.warn( + 'Query exceeded transfer limit.' + ); + + setMessage( + 'Partial results returned because the service limit was reached. Please narrow the date range or select a zone.' + ); + + setMessageType('error'); + } + + // -------------------------------------------------------- + // GROUP DATA + // -------------------------------------------------------- + + const grouping: { + [zone: string]: { + [date: string]: number; + }; + } = {}; + + result.features.forEach(feature => { + + const attributes = + feature.attributes; + + const rawZone = + safeGetAttr( + attributes, + zoneFieldName + ); + + if ( + rawZone === null || + rawZone === undefined + ) { + return; + } + + const zone = + String(rawZone).trim(); + + if (!zone) { + return; + } + + const createdValue = + safeGetAttr( + attributes, + dateFieldName + ); + + if ( + createdValue === null || + createdValue === undefined + ) { + return; + } + + let dateValue: Date; + + if ( + typeof createdValue === 'number' + ) { + dateValue = + new Date(createdValue); + } else { + dateValue = + new Date(createdValue); + } + + if ( + isNaN(dateValue.getTime()) + ) { + return; + } + + const dateKey = + fmtDateKey(dateValue); + + if (!dCols.includes(dateKey)) { + return; + } + + if (!grouping[zone]) { + grouping[zone] = {}; + } + + grouping[zone][dateKey] = + (grouping[zone][dateKey] || 0) + 1; + + }); + + // -------------------------------------------------------- + // SELECTED ZONE WITH ZERO RESULTS + // -------------------------------------------------------- + + if ( + selectedZone && + !grouping[selectedZone] + ) { + + grouping[selectedZone] = {}; + + } + + // -------------------------------------------------------- + // BUILD TABLE ROWS + // -------------------------------------------------------- + + const rows: SummaryRow[] = + Object.keys(grouping) + .sort((a, b) => + a.localeCompare( + b, + undefined, + { + numeric: true + } + ) + ) + .map(zoneName => { + + const countsByDate: { + [date: string]: number; + } = {}; + + let total = 0; + + dCols.forEach(date => { + + const count = + grouping[zoneName]?.[date] || 0; + + countsByDate[date] = + count; + + total += count; + + }); + + return { + zone: zoneName, + countsByDate, + total + }; + + }); + + setSummaryRows(rows); + + if (rows.length === 0) { + + setMessage( + 'No Form 7 Point records found for the selected criteria.' + ); + + setMessageType('error'); + + } else { + + setMessage( + `${rows.reduce( + (sum, row) => sum + row.total, + 0 + )} records found.` + ); + + setMessageType('success'); + + } + + } catch (error) { + + console.error( + 'Error fetching Form 7 summary:', + error + ); + + setMessage( + 'Error fetching Form 7 Point data. Please check the service or browser console.' + ); + + setMessageType('error'); + + setSummaryRows([]); + setDateColumns([]); + + } finally { + + setLoading(false); + + } + }; + + // ============================================================ + // TOTAL HELPERS + // ============================================================ + + const getGrandTotal = () => { + + return summaryRows.reduce( + (sum, row) => + sum + row.total, + 0 + ); + }; + + const getDateTotal = ( + date: string + ) => { + + return summaryRows.reduce( + (sum, row) => + sum + + (row.countsByDate[date] || 0), + 0 + ); + }; + + // ============================================================ + // EXPORT EXCEL + // ============================================================ + + const exportData = async () => { + + if ( + dateColumns.length === 0 || + summaryRows.length === 0 + ) { + + setMessage( + 'No data available to export.' + ); + + setMessageType('error'); + + return; + } + + const headerDates = + dateColumns.map(displayDate); + + const rowsForExport: any[] = + summaryRows.map(row => { + + const obj: any = { + Zone: row.zone + }; + + dateColumns.forEach( + (date, index) => { + + obj[headerDates[index]] = + row.countsByDate[date] || 0; + + } + ); + + obj.Total = row.total; + + return obj; + + }); + + // ---------------------------------------------------------- + // TOTAL ROW + // ---------------------------------------------------------- + + const totalRow: any = { + Zone: 'TOTAL' + }; + + dateColumns.forEach( + (date, index) => { + + totalRow[headerDates[index]] = + getDateTotal(date); + + } + ); + + totalRow.Total = + getGrandTotal(); + + rowsForExport.push(totalRow); + + const filenameBase = + `form7_point_zone_daily_summary_${startDate}_to_${endDate}`; + + const xlsxFilename = + `${filenameBase}.xlsx`; + + const csvFilename = + `${filenameBase}.csv`; + + try { + + // -------------------------------------------------------- + // XLSX FROM WINDOW + // -------------------------------------------------------- + + if ((window as any).XLSX) { + + const XLSX = + (window as any).XLSX; + + const worksheet = + XLSX.utils.json_to_sheet( + rowsForExport + ); + + const workbook = + XLSX.utils.book_new(); + + XLSX.utils.book_append_sheet( + workbook, + worksheet, + 'Form 7 Summary' + ); + + XLSX.writeFile( + workbook, + xlsxFilename + ); + + return; + } + + // -------------------------------------------------------- + // XLSX PACKAGE + // -------------------------------------------------------- + + const mod = + await import('xlsx').catch( + () => null + ); + + if ( + mod && + mod.utils + ) { + + const worksheet = + mod.utils.json_to_sheet( + rowsForExport + ); + + const workbook = + mod.utils.book_new(); + + mod.utils.book_append_sheet( + workbook, + worksheet, + 'Form 7 Summary' + ); + + mod.writeFile( + workbook, + xlsxFilename + ); + + return; + } + + // -------------------------------------------------------- + // CSV FALLBACK + // -------------------------------------------------------- + + const headers = [ + 'Zone', + ...headerDates, + 'Total' + ]; + + const lines = [ + headers.join(',') + ]; + + rowsForExport.forEach(row => { + + const values: string[] = [ + row.Zone + ]; + + dateColumns.forEach( + (_, index) => { + + values.push( + String( + row[headerDates[index]] ?? 0 + ) + ); + + } + ); + + values.push( + String(row.Total ?? 0) + ); + + const safeValues = + values.map(value => { + + if ( + value.includes(',') + ) { + + return `"${value.replace( + /"/g, + '""' + )}"`; + + } + + return value; + + }); + + lines.push( + safeValues.join(',') + ); + + }); + + const csv = + lines.join('\n'); + + const blob = + new Blob( + [csv], + { + type: + 'text/csv;charset=utf-8;' + } + ); + + const url = + URL.createObjectURL(blob); + + const link = + document.createElement('a'); + + link.href = url; + link.download = csvFilename; + + link.click(); + + URL.revokeObjectURL(url); + + } catch (error) { + + console.error( + 'Export failed:', + error + ); + + setMessage( + 'Export failed. Please check the browser console.' + ); + + setMessageType('error'); + + } + }; + + // ============================================================ + // RESET + // ============================================================ + + const resetFilters = () => { + + setSelectedZone(''); + setStartDate(''); + setEndDate(''); + + setSummaryRows([]); + setDateColumns([]); + + setMessage(''); + setMessageType(''); + }; + + // ============================================================ + // STYLES + // ============================================================ + + const wrapper: React.CSSProperties = { + width: '100%', + height: '100%', + boxSizing: 'border-box', + padding: '18px', + fontFamily: + 'Arial, Helvetica, sans-serif', + background: + '#f5f7fa', + overflow: 'auto' + }; + + const card: React.CSSProperties = { + background: '#ffffff', + borderRadius: '10px', + border: '1px solid #e1e6ed', + boxShadow: + '0 2px 8px rgba(0,0,0,0.06)', + padding: '18px', + marginBottom: '14px' + }; + + const headerTitle: React.CSSProperties = { + margin: 0, + fontSize: '20px', + fontWeight: 700, + color: '#172b4d' + }; + + const headerSubtitle: React.CSSProperties = { + margin: '5px 0 0', + fontSize: '12px', + color: '#6b778c' + }; + + const filterGrid: React.CSSProperties = { + display: 'grid', + gridTemplateColumns: + 'repeat(auto-fit, minmax(180px, 1fr))', + gap: '14px', + alignItems: 'end' + }; + + const fieldWrapper: React.CSSProperties = { + display: 'flex', + flexDirection: 'column' + }; + + const fieldLabel: React.CSSProperties = { + fontSize: '12px', + fontWeight: 600, + color: '#42526e', + marginBottom: '6px' + }; + + const inputStyle: React.CSSProperties = { + width: '100%', + height: '38px', + padding: '0 10px', + boxSizing: 'border-box', + border: + '1px solid #c7d0dc', + borderRadius: '6px', + background: '#ffffff', + color: '#172b4d', + fontSize: '13px', + outline: 'none' + }; + + const primaryButton: React.CSSProperties = { + height: '38px', + padding: '0 18px', + border: 'none', + borderRadius: '6px', + background: '#1976d2', + color: '#ffffff', + fontSize: '13px', + fontWeight: 600, + cursor: 'pointer' + }; + + const secondaryButton: React.CSSProperties = { + height: '38px', + padding: '0 18px', + border: + '1px solid #c7d0dc', + borderRadius: '6px', + background: '#ffffff', + color: '#42526e', + fontSize: '13px', + fontWeight: 600, + cursor: 'pointer' + }; + + const exportButton: React.CSSProperties = { + height: '38px', + padding: '0 18px', + border: 'none', + borderRadius: '6px', + background: '#2e7d32', + color: '#ffffff', + fontSize: '13px', + fontWeight: 600, + cursor: 'pointer' + }; + + const buttonContainer: React.CSSProperties = { + display: 'flex', + gap: '8px', + flexWrap: 'wrap' + }; + + const summaryCard: React.CSSProperties = { + display: 'grid', + gridTemplateColumns: + 'repeat(auto-fit, minmax(150px, 1fr))', + gap: '12px', + marginBottom: '14px' + }; + + const statBox: React.CSSProperties = { + background: '#ffffff', + border: + '1px solid #e1e6ed', + borderRadius: '8px', + padding: '14px 16px' + }; + + const statLabel: React.CSSProperties = { + fontSize: '11px', + color: '#6b778c', + marginBottom: '5px' + }; + + const statValue: React.CSSProperties = { + fontSize: '22px', + fontWeight: 700, + color: '#172b4d' + }; + + const tableContainer: React.CSSProperties = { + background: '#ffffff', + borderRadius: '10px', + border: + '1px solid #e1e6ed', + boxShadow: + '0 2px 8px rgba(0,0,0,0.05)', + overflow: 'auto', + maxHeight: '58vh' + }; + + const table: React.CSSProperties = { + borderCollapse: 'separate', + borderSpacing: 0, + width: '100%', + minWidth: + Math.max( + 650, + dateColumns.length * 105 + 220 + ) + }; + + const headerCell: React.CSSProperties = { + padding: '11px 12px', + borderBottom: + '1px solid #dfe4ea', + background: '#eef4fb', + color: '#344563', + fontSize: '12px', + fontWeight: 700, + textAlign: 'center', + whiteSpace: 'nowrap', + position: 'sticky', + top: 0, + zIndex: 3 + }; + + const zoneHeaderCell: React.CSSProperties = { + ...headerCell, + textAlign: 'left', + left: 0, + zIndex: 5, + minWidth: '120px' + }; + + const totalHeaderCell: React.CSSProperties = { + ...headerCell, + background: '#fff3e0', + minWidth: '100px' + }; + + const zoneCell: React.CSSProperties = { + padding: '10px 12px', + borderBottom: + '1px solid #edf0f3', + background: '#ffffff', + color: '#172b4d', + fontSize: '13px', + fontWeight: 600, + position: 'sticky', + left: 0, + zIndex: 2 + }; + + const dataCell: React.CSSProperties = { + padding: '10px 12px', + borderBottom: + '1px solid #edf0f3', + color: '#42526e', + fontSize: '13px', + textAlign: 'center', + background: '#ffffff' + }; + + const totalCell: React.CSSProperties = { + ...dataCell, + fontWeight: 700, + background: '#fffaf2', + color: '#7a4b00' + }; + + const totalRowZone: React.CSSProperties = { + ...zoneCell, + fontWeight: 800, + background: '#fff3e0', + color: '#7a4b00', + zIndex: 2 + }; + + const totalRowCell: React.CSSProperties = { + ...dataCell, + fontWeight: 800, + background: '#fff3e0', + color: '#7a4b00' + }; + + // ============================================================ + // RENDER + // ============================================================ + + return ( +
+ + {/* ======================================================== + HEADER + ======================================================== */} + +
+ +
+ +
+ +

+ Form 7 Point Summary +

+ +

+ Zone-wise daily record count based on Created Date +

+ +
+ +
+ FORM 7 POINT +
+ +
+ +
+ + {/* ======================================================== + FILTER CARD + ======================================================== */} + +
+ +
+ + {/* Zone */} + +
+ + + + + +
+ + {/* Start Date */} + +
+ + + + + setStartDate( + e.target.value + ) + } + /> + +
+ + {/* End Date */} + +
+ + + + + setEndDate( + e.target.value + ) + } + /> + +
+ + {/* Buttons */} + +
+ + + + + + + +
+ +
+ +
+ + {/* ======================================================== + MESSAGE + ======================================================== */} + + {message && ( + +
+ {message} +
+ + )} + + {/* ======================================================== + SUMMARY STATISTICS + ======================================================== */} + + {summaryRows.length > 0 && ( + +
+ +
+ +
+ TOTAL RECORDS +
+ +
+ {getGrandTotal().toLocaleString()} +
+ +
+ +
+ +
+ ZONES +
+ +
+ {summaryRows.length} +
+ +
+ +
+ +
+ DATE RANGE +
+ +
+ {startDate && + endDate + ? `${displayDate( + startDate + )} - ${displayDate( + endDate + )}` + : '-'} +
+ +
+ +
+ + )} + + {/* ======================================================== + TABLE + ======================================================== */} + +
+ + {loading ? ( + +
+ +
+ ⟳ +
+ + Fetching Form 7 Point records... + +
+ + ) : summaryRows.length === 0 ? ( + +
+ + Select a zone and date range, + then click Submit to + view the summary. + +
+ + ) : ( + + + + + + + + + + {dateColumns.map( + date => ( + + + + ) + )} + + + + + + + + + + {summaryRows.map( + row => ( + + + + + + {dateColumns.map( + date => ( + + + + ) + )} + + + + + + ) + )} + + {/* ================================================= + TOTAL ROW + ================================================= */} + + + + + + {dateColumns.map( + date => ( + + + + ) + )} + + + + + + + +
+ Zone + + {displayDate(date)} + + Total +
+ Zone {row.zone} + + {( + row + .countsByDate[ + date + ] || 0 + ).toLocaleString()} + + {row.total.toLocaleString()} +
+ TOTAL + + {getDateTotal( + date + ).toLocaleString()} + + {getGrandTotal().toLocaleString()} +
+ + )} + +
+ +
+ ); +}; + +export default ZoneWardDateSummary; \ No newline at end of file diff --git a/Form7Buildingdatesummary/src/setting/setting.tsx b/Form7Buildingdatesummary/src/setting/setting.tsx new file mode 100644 index 0000000..1e5fa3d --- /dev/null +++ b/Form7Buildingdatesummary/src/setting/setting.tsx @@ -0,0 +1,20 @@ +import { React } from 'jimu-core' +import { type AllWidgetSettingProps } from 'jimu-for-builder' +import { MapWidgetSelector } from 'jimu-ui/advanced/setting-components' + +const Setting = (props: AllWidgetSettingProps) => { + const onMapWidgetSelected = (useMapWidgetIds: string[]) => { + console.log("Selected Map Widget IDs:", useMapWidgetIds); + props.onSettingChange({ + id: props.id, + useMapWidgetIds: useMapWidgetIds + }) + } + + return
+ +
+} + +export default Setting + diff --git a/Form7Buildingdatesummary/src/zoom-in.png b/Form7Buildingdatesummary/src/zoom-in.png new file mode 100644 index 0000000..73ac96e Binary files /dev/null and b/Form7Buildingdatesummary/src/zoom-in.png differ diff --git a/Form7Generartion_Filter/config.json b/Form7Generartion_Filter/config.json new file mode 100644 index 0000000..0ce5fd8 --- /dev/null +++ b/Form7Generartion_Filter/config.json @@ -0,0 +1,5 @@ +{ + "exampleConfigProperty": "test", + "useMapWidget": true + +} diff --git a/Form7Generartion_Filter/icon.svg b/Form7Generartion_Filter/icon.svg new file mode 100644 index 0000000..c22ca44 --- /dev/null +++ b/Form7Generartion_Filter/icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/Form7Generartion_Filter/manifest.json b/Form7Generartion_Filter/manifest.json new file mode 100644 index 0000000..6fdf28d --- /dev/null +++ b/Form7Generartion_Filter/manifest.json @@ -0,0 +1,19 @@ +{ + "name": "Form7Generartion_Filter", + "label": "Form7Generartion_Filter", + "type": "widget", + "version": "1.16.0", + "exbVersion": "1.16.0", + "author": "Esri R&D Center Beijing", + "description": "This is a barebones, simple widget. It includes an example of how to use the config file, and it includes a placeholder SVG icon. It intentionally does not include the following so you can use this to start from scratch: i18n translations, a Settings panel, unit tests. See the documentation for more information on how to implement these features.", + "copyright": "", + "license": "http://www.apache.org/licenses/LICENSE-2.0", + "properties": {}, + "translatedLocales": [ + "en" + ], + "defaultSize": { + "width": 800, + "height": 500 + } +} \ No newline at end of file diff --git a/Form7Generartion_Filter/src/config.ts b/Form7Generartion_Filter/src/config.ts new file mode 100644 index 0000000..780aacf --- /dev/null +++ b/Form7Generartion_Filter/src/config.ts @@ -0,0 +1,7 @@ +import { type ImmutableObject } from 'seamless-immutable' + +export interface Config { + exampleConfigProperty: string +} + +export type IMConfig = ImmutableObject diff --git a/Form7Generartion_Filter/src/runtime/assets/zoom-in.svg b/Form7Generartion_Filter/src/runtime/assets/zoom-in.svg new file mode 100644 index 0000000..bb2d2e5 --- /dev/null +++ b/Form7Generartion_Filter/src/runtime/assets/zoom-in.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Form7Generartion_Filter/src/runtime/components/LoadingPopup.css b/Form7Generartion_Filter/src/runtime/components/LoadingPopup.css new file mode 100644 index 0000000..5d83905 --- /dev/null +++ b/Form7Generartion_Filter/src/runtime/components/LoadingPopup.css @@ -0,0 +1,45 @@ +.loading-overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 1000; + display: flex; + justify-content: center; + align-items: center; + } + + .loading-box { + background: #fff; + padding: 24px; + border-radius: 8px; + width: 280px; + text-align: center; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); + } + + .loading-title { + font-size: 1.2rem; + font-weight: bold; + margin-bottom: 16px; + } + + .spinner { + border: 4px solid #e0e0e0; + border-top: 4px solid #009688; + border-radius: 50%; + width: 32px; + height: 32px; + animation: spin 1s linear infinite; + margin: 0 auto 12px auto; + } + + @keyframes spin { + to { + transform: rotate(360deg); + } + } + + .loading-message { + color: #555; + } + \ No newline at end of file diff --git a/Form7Generartion_Filter/src/runtime/components/LoadingPopup.tsx b/Form7Generartion_Filter/src/runtime/components/LoadingPopup.tsx new file mode 100644 index 0000000..0a2cc49 --- /dev/null +++ b/Form7Generartion_Filter/src/runtime/components/LoadingPopup.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import './LoadingPopup.css'; + +interface LoadingPopupProps { + show: boolean; + message?: string; +} + +const LoadingPopup: React.FC = ({ show, message = "Preparing to download ..." }) => { + if (!show) return null; + + return ( +
+
+

Please Wait..

+
+

{message}

+
+
+ ); +}; + +export default LoadingPopup; diff --git a/Form7Generartion_Filter/src/runtime/components/LoadingSpinner.jsx b/Form7Generartion_Filter/src/runtime/components/LoadingSpinner.jsx new file mode 100644 index 0000000..0a2cc49 --- /dev/null +++ b/Form7Generartion_Filter/src/runtime/components/LoadingSpinner.jsx @@ -0,0 +1,23 @@ +import React from 'react'; +import './LoadingPopup.css'; + +interface LoadingPopupProps { + show: boolean; + message?: string; +} + +const LoadingPopup: React.FC = ({ show, message = "Preparing to download ..." }) => { + if (!show) return null; + + return ( +
+
+

Please Wait..

+
+

{message}

+
+
+ ); +}; + +export default LoadingPopup; diff --git a/Form7Generartion_Filter/src/runtime/simple_widget.css b/Form7Generartion_Filter/src/runtime/simple_widget.css new file mode 100644 index 0000000..cae5cd3 --- /dev/null +++ b/Form7Generartion_Filter/src/runtime/simple_widget.css @@ -0,0 +1,857 @@ +.form7-container { + width: 100%; + height: 100%; + overflow-y: auto; + overflow-x: hidden; + + background: #f4f8fc; + + font-family: + "Segoe UI", + Arial, + sans-serif; + + color: #1f2937; + + box-sizing: border-box; + + padding: 16px; +} + + +/* ========================================================= + HEADER +========================================================= */ + +.form7-header { + display: flex; + align-items: center; + gap: 12px; + + background: #ffffff; + + border: 1px solid #dbe7f2; + + border-radius: 12px; + + padding: 14px 16px; + + margin-bottom: 14px; + + box-shadow: + 0 2px 8px rgba(30, 64, 100, 0.06); +} + +.form7-header-icon { + width: 42px; + height: 42px; + + border-radius: 10px; + + display: flex; + align-items: center; + justify-content: center; + + background: #e0f2fe; + + color: #0369a1; + + font-size: 14px; + font-weight: 700; + + border: 1px solid #bae6fd; +} + +.form7-title { + font-size: 18px; + + font-weight: 700; + + color: #123b5d; + + line-height: 1.2; +} + +.form7-subtitle { + margin-top: 4px; + + font-size: 12px; + + color: #6b7f93; +} + + +/* ========================================================= + SUMMARY +========================================================= */ + +.form7-summary { + display: grid; + + grid-template-columns: + repeat(3, 1fr); + + gap: 10px; + + margin-bottom: 14px; +} + +.summary-card { + display: flex; + + align-items: center; + + gap: 10px; + + background: #ffffff; + + border: 1px solid #dbe7f2; + + border-radius: 11px; + + padding: 12px; + + box-shadow: + 0 2px 7px rgba(30, 64, 100, 0.05); +} + +.summary-icon { + width: 34px; + height: 34px; + + flex-shrink: 0; + + display: flex; + align-items: center; + justify-content: center; + + border-radius: 9px; + + background: #e0f2fe; + + color: #0284c7; + + font-size: 14px; + + font-weight: 700; +} + +.summary-label { + font-size: 10px; + + color: #718096; + + margin-bottom: 2px; + + text-transform: uppercase; + + letter-spacing: 0.4px; +} + +.summary-value { + font-size: 20px; + + font-weight: 700; + + color: #164e70; +} + +.summary-small { + font-size: 17px; +} + + +/* ========================================================= + FILTER CARD +========================================================= */ + +.form7-filter-card { + background: #ffffff; + + border: 1px solid #dbe7f2; + + border-radius: 12px; + + padding: 16px; + + margin-bottom: 14px; + + box-shadow: + 0 2px 8px rgba(30, 64, 100, 0.06); +} + +.section-title { + font-size: 14px; + + font-weight: 700; + + color: #174b70; +} + +.section-description { + font-size: 11px; + + color: #718096; + + margin-top: 3px; + + margin-bottom: 14px; +} + +.filter-grid { + display: grid; + + grid-template-columns: + repeat(3, 1fr); + + gap: 12px; +} + +.filter-field { + display: flex; + + flex-direction: column; + + min-width: 0; +} + +.filter-field label { + font-size: 11px; + + font-weight: 600; + + color: #486174; + + margin-bottom: 6px; +} + +.required { + color: #dc2626; + + margin-left: 3px; +} + +.filter-field select, +.filter-field input { + width: 100%; + + height: 36px; + + box-sizing: border-box; + + border: 1px solid #cbd9e6; + + border-radius: 7px; + + background: #ffffff; + + color: #263f52; + + padding: 0 10px; + + font-size: 12px; + + outline: none; + + transition: + border-color 0.15s ease, + box-shadow 0.15s ease; +} + +.filter-field select:hover, +.filter-field input:hover { + border-color: #8dbbd8; +} + +.filter-field select:focus, +.filter-field input:focus { + border-color: #38a3d1; + + box-shadow: + 0 0 0 3px + rgba(56, 163, 209, 0.12); +} + +.filter-field select:disabled, +.filter-field input:disabled { + background: #f3f6f9; + + color: #9aa8b5; + + cursor: not-allowed; +} + +.disabled-input-wrapper { + position: relative; +} + +.disabled-input-wrapper input { + padding-right: 48px; +} + +.tracking-badge { + position: absolute; + + right: 7px; + + top: 50%; + + transform: translateY(-50%); + + background: #e5eef5; + + color: #7890a2; + + border-radius: 5px; + + padding: 3px 5px; + + font-size: 9px; + + font-weight: 600; +} + + +/* ========================================================= + ACTION BUTTONS +========================================================= */ + +.filter-actions { + display: flex; + + justify-content: flex-end; + + gap: 8px; + + margin-top: 16px; + + padding-top: 13px; + + border-top: 1px solid #edf2f7; +} + +.reset-button, +.search-button { + height: 36px; + + border-radius: 7px; + + padding: 0 16px; + + font-size: 12px; + + font-weight: 600; + + cursor: pointer; + + display: flex; + + align-items: center; + + justify-content: center; + + gap: 6px; + + transition: + background 0.15s ease, + border-color 0.15s ease, + transform 0.1s ease; +} + +.reset-button { + background: #ffffff; + + color: #526b7d; + + border: 1px solid #cbd9e6; +} + +.reset-button:hover { + background: #f3f8fc; + + border-color: #9dbbd0; +} + +.search-button { + background: #168ac1; + + color: #ffffff; + + border: 1px solid #168ac1; +} + +.search-button:hover { + background: #0f78a9; +} + +.search-button:disabled { + opacity: 0.55; + + cursor: not-allowed; +} + +.button-spinner { + width: 12px; + height: 12px; + + border: 2px solid + rgba(255, 255, 255, 0.4); + + border-top-color: #ffffff; + + border-radius: 50%; + + animation: + form7-spin 0.7s linear infinite; +} + +@keyframes form7-spin { + to { + transform: rotate(360deg); + } +} + + +/* ========================================================= + ERROR +========================================================= */ + +.error-message { + margin-top: 12px; + + display: flex; + + align-items: center; + + gap: 7px; + + background: #fff5f5; + + border: 1px solid #fecaca; + + color: #b91c1c; + + border-radius: 7px; + + padding: 9px 11px; + + font-size: 11px; +} + +.error-message span { + width: 17px; + height: 17px; + + border-radius: 50%; + + display: flex; + align-items: center; + justify-content: center; + + background: #fee2e2; + + font-weight: 700; +} + + +/* ========================================================= + RESULTS +========================================================= */ + +.form7-results-card { + background: #ffffff; + + border: 1px solid #dbe7f2; + + border-radius: 12px; + + overflow: hidden; + + box-shadow: + 0 2px 8px rgba(30, 64, 100, 0.06); +} + +.results-header { + display: flex; + + align-items: center; + + justify-content: space-between; + + padding: 14px 16px; + + border-bottom: 1px solid #e5edf4; +} + +.results-count { + margin-top: 3px; + + font-size: 10px; + + color: #7b8d9d; +} + +.result-badge { + background: #e0f2fe; + + color: #0369a1; + + border: 1px solid #bae6fd; + + padding: 5px 9px; + + border-radius: 6px; + + font-size: 10px; + + font-weight: 600; +} + + +/* ========================================================= + TABLE +========================================================= */ + +.table-wrapper { + width: 100%; + + overflow-x: auto; +} + +.form7-table { + width: 100%; + + border-collapse: collapse; + + min-width: 850px; +} + +.form7-table th { + background: #f1f7fb; + + color: #49677b; + + font-size: 10px; + + font-weight: 700; + + text-align: left; + + padding: 10px 9px; + + border-bottom: 1px solid #dbe7f2; + + white-space: nowrap; +} + +.form7-table td { + padding: 9px; + + border-bottom: 1px solid #edf2f7; + + font-size: 11px; + + color: #43596a; + + vertical-align: middle; +} + +.form7-table tbody tr { + transition: + background 0.12s ease; +} + +.form7-table tbody tr:hover { + background: #f7fbfe; +} + +.form7-table tbody tr.selected-row { + background: #eaf7fd; +} + +.serial-cell { + width: 35px; + + color: #8a9bab !important; + + text-align: center; +} + +.zone-badge, +.ward-badge { + display: inline-flex; + + align-items: center; + + justify-content: center; + + min-width: 30px; + + padding: 4px 7px; + + border-radius: 5px; + + font-size: 10px; + + font-weight: 600; +} + +.zone-badge { + background: #e0f2fe; + + color: #0369a1; +} + +.ward-badge { + background: #edf6ff; + + color: #2563a6; +} + +.road-cell { + max-width: 170px; + + overflow: hidden; + + text-overflow: ellipsis; + + white-space: nowrap; +} + +.gis-cell { + max-width: 130px; + + overflow: hidden; + + text-overflow: ellipsis; + + white-space: nowrap; + + font-family: + Consolas, + monospace; + + font-size: 10px !important; + + color: #24627f !important; +} + +.name-cell { + max-width: 140px; + + overflow: hidden; + + text-overflow: ellipsis; + + white-space: nowrap; +} + +.status-badge { + display: inline-block; + + max-width: 100px; + + overflow: hidden; + + text-overflow: ellipsis; + + white-space: nowrap; + + background: #f0f7fb; + + color: #39708c; + + border: 1px solid #d7eaf4; + + border-radius: 5px; + + padding: 4px 7px; + + font-size: 9px; + + font-weight: 600; +} + + +/* ========================================================= + ZOOM BUTTON +========================================================= */ + +.zoom-button { + display: inline-flex; + + align-items: center; + + gap: 5px; + + border: 1px solid #b9dceb; + + background: #eff9fd; + + color: #0876a5; + + border-radius: 6px; + + height: 28px; + + padding: 0 8px; + + font-size: 10px; + + font-weight: 600; + + cursor: pointer; +} + +.zoom-button:hover { + background: #dff3fb; + + border-color: #83c7df; +} + +.zoom-button span { + font-size: 13px; +} + + +/* ========================================================= + PAGINATION +========================================================= */ + +.pagination { + display: flex; + + align-items: center; + + justify-content: center; + + gap: 12px; + + padding: 12px; + + border-top: 1px solid #edf2f7; + + color: #6d8090; + + font-size: 10px; +} + +.pagination button { + width: 28px; + height: 28px; + + border-radius: 6px; + + border: 1px solid #cbd9e6; + + background: #ffffff; + + color: #477089; + + cursor: pointer; + + font-size: 16px; +} + +.pagination button:hover:not(:disabled) { + background: #edf8fd; + + border-color: #8fc7df; +} + +.pagination button:disabled { + opacity: 0.4; + + cursor: not-allowed; +} + +.pagination strong { + color: #185579; +} + + +/* ========================================================= + EMPTY STATE +========================================================= */ + +.empty-state { + display: flex; + + flex-direction: column; + + align-items: center; + + justify-content: center; + + min-height: 180px; + + padding: 25px; +} + +.empty-icon { + width: 42px; + height: 42px; + + border-radius: 50%; + + background: #eef7fc; + + border: 1px solid #d6ebf5; + + display: flex; + + align-items: center; + + justify-content: center; + + color: #7db6cf; + + font-size: 22px; + + margin-bottom: 10px; +} + +.empty-title { + font-size: 13px; + + font-weight: 600; + + color: #526b7d; +} + +.empty-description { + margin-top: 5px; + + font-size: 10px; + + color: #8a9aa8; + + text-align: center; +} + + +/* ========================================================= + RESPONSIVE +========================================================= */ + +@media (max-width: 700px) { + + .form7-summary { + grid-template-columns: + 1fr; + } + + .filter-grid { + grid-template-columns: + 1fr; + } + + .filter-actions { + justify-content: stretch; + } + + .reset-button, + .search-button { + flex: 1; + } +} \ No newline at end of file diff --git a/Form7Generartion_Filter/src/runtime/widget.tsx b/Form7Generartion_Filter/src/runtime/widget.tsx new file mode 100644 index 0000000..e9cc45c --- /dev/null +++ b/Form7Generartion_Filter/src/runtime/widget.tsx @@ -0,0 +1,1006 @@ +import React, { useCallback, useEffect, useMemo, useState } from "react"; +import { AllWidgetProps } from "jimu-core"; +import { JimuMapViewComponent, JimuMapView } from "jimu-arcgis"; + +import FeatureLayer from "@arcgis/core/layers/FeatureLayer"; + +/* ========================================================= + TYPES +========================================================= */ + +interface Form7Record { + objectid: number; + zone: string; + ward: string; + roadName: string; + gisId: string; + status: string; + assesseeName: string; + address: string; +} + +interface Props extends AllWidgetProps {} + +/* ========================================================= + LAYER / FIELD CONFIGURATION +========================================================= */ + +const FORM7_POINT_LAYER_URL = + "https://gisgcc.chennaicorporation.gov.in/server/rest/services/Revenue/Form7_Point/FeatureServer/0"; +const FORM7_POINT_LAYER_NAME = "Form 7 Point"; + +const FORM7_FIELDS = { + objectId: "objectid", + zone: "zone_number", + ward: "ward_number", + road: "road_name", + gisId: "final_gis_id", + status: "status", + assesseeName: "assessee_name", + address: "address", +} as const; + +const PAGE_SIZE = 10; + +/* ========================================================= + PURE HELPERS (no component state needed) +========================================================= */ + +const escapeSql = (value: string): string => value.replace(/'/g, "''"); + +/** Safe string coercion for feature attributes — collapses null/undefined to "". */ +const attrToString = (attrs: Record, field: string): string => { + const value = attrs[field]; + return value === null || value === undefined ? "" : String(value); +}; + +const mapFeatureToRecord = (attrs: Record): Form7Record => ({ + objectid: Number(attrs[FORM7_FIELDS.objectId]), + zone: attrToString(attrs, FORM7_FIELDS.zone), + ward: attrToString(attrs, FORM7_FIELDS.ward), + roadName: attrToString(attrs, FORM7_FIELDS.road), + gisId: attrToString(attrs, FORM7_FIELDS.gisId), + status: attrToString(attrs, FORM7_FIELDS.status), + assesseeName: attrToString(attrs, FORM7_FIELDS.assesseeName), + address: attrToString(attrs, FORM7_FIELDS.address), +}); + +/** Builds a `field = 'value' AND ...` WHERE clause from a list of [field, value] pairs. */ +const buildWhere = (pairs: Array<[string, string]>): string => { + const clauses = pairs + .filter(([, value]) => Boolean(value)) + .map(([field, value]) => `${field} = '${escapeSql(value)}'`); + return clauses.length ? clauses.join(" AND ") : "1=1"; +}; + +/* ========================================================= + COMPONENT +========================================================= */ + +const Form7ApprovalPending = (props: Props) => { + const [jimuMapView, setJimuMapView] = useState(null); + const [form7Layer, setForm7Layer] = useState(null); + + const [selectedZone, setSelectedZone] = useState(""); + const [selectedWard, setSelectedWard] = useState(""); + const [selectedRoadName, setSelectedRoadName] = useState(""); + + // Reserved for Editor Tracking fields — enabled once that capability ships. + const [selectedUser, setSelectedUser] = useState(""); + const [selectedDate, setSelectedDate] = useState(""); + + const [zones, setZones] = useState([]); + const [wards, setWards] = useState([]); + const [roads, setRoads] = useState([]); + + const [tableData, setTableData] = useState([]); + const [pointCount, setPointCount] = useState(0); + + const [currentPage, setCurrentPage] = useState(1); + const [loading, setLoading] = useState(false); + const [errorMessage, setErrorMessage] = useState(""); + const [selectedObjectId, setSelectedObjectId] = useState(null); + + /* ======================================================= + MAP VIEW + ======================================================= */ + + const activeViewChangeHandler = useCallback((jmv: JimuMapView) => { + if (jmv) setJimuMapView(jmv); + }, []); + + const getMapForm7Layer = useCallback((): FeatureLayer | null => { + if (!jimuMapView?.view) return null; + const layer = jimuMapView.view.map.layers + .toArray() + .find( + (item: any) => + item.url === FORM7_POINT_LAYER_URL || item.title === FORM7_POINT_LAYER_NAME + ); + return (layer as FeatureLayer) ?? null; + }, [jimuMapView]); + + /* ======================================================= + LOAD FORM 7 POINT LAYER (once) + ======================================================= */ + + useEffect(() => { + const layer = new FeatureLayer({ + url: FORM7_POINT_LAYER_URL, + title: FORM7_POINT_LAYER_NAME, + outFields: ["*"], + }); + + layer + .load() + .then(() => setForm7Layer(layer)) + .catch((error) => { + console.error("Form 7 Point layer loading failed:", error); + setErrorMessage("Unable to load Form 7 Point layer."); + }); + + return () => layer.destroy(); + }, []); + + /* ======================================================= + DISTINCT VALUE LOOKUP (shared by zone/ward/road dropdowns) + ======================================================= */ + + const getDistinctValues = useCallback( + async (layer: FeatureLayer, fieldName: string, where = "1=1"): Promise => { + try { + const query = layer.createQuery(); + query.where = where; + query.outFields = [fieldName]; + query.returnGeometry = false; + query.returnDistinctValues = true; + query.orderByFields = [`${fieldName} ASC`]; + + const result = await layer.queryFeatures(query); + const values = result.features + .map((feature) => attrToString(feature.attributes, fieldName).trim()) + .filter(Boolean); + + return [...new Set(values)]; + } catch (error) { + console.error(`Error loading ${fieldName}:`, error); + return []; + } + }, + [] + ); + + /* ======================================================= + DROPDOWN POPULATION + ======================================================= */ + + useEffect(() => { + if (!form7Layer) return; + + setLoading(true); + getDistinctValues(form7Layer, FORM7_FIELDS.zone) + .then(setZones) + .finally(() => setLoading(false)); + }, [form7Layer, getDistinctValues]); + + useEffect(() => { + setSelectedWard(""); + setSelectedRoadName(""); + + if (!form7Layer || !selectedZone) { + setWards([]); + // Zone cleared: still let roads reflect "no filter" rather than wiping them out. + if (!selectedZone) setRoads([]); + return; + } + + const zoneWhere = buildWhere([[FORM7_FIELDS.zone, selectedZone]]); + getDistinctValues(form7Layer, FORM7_FIELDS.ward, zoneWhere).then(setWards); + getDistinctValues(form7Layer, FORM7_FIELDS.road, zoneWhere).then(setRoads); + }, [selectedZone, form7Layer, getDistinctValues]); + + useEffect(() => { + setSelectedRoadName(""); + + if (!form7Layer) return; + + const where = buildWhere([ + [FORM7_FIELDS.zone, selectedZone], + [FORM7_FIELDS.ward, selectedWard], + ]); + getDistinctValues(form7Layer, FORM7_FIELDS.road, where).then(setRoads); + // Only re-run when ward changes (zone changes are handled by the effect above). + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [selectedWard]); + + /* ======================================================= + WHERE CLAUSE FOR CURRENT FILTER SELECTION + ======================================================= */ + + const currentWhere = useMemo( + () => + buildWhere([ + [FORM7_FIELDS.zone, selectedZone], + [FORM7_FIELDS.ward, selectedWard], + [FORM7_FIELDS.road, selectedRoadName], + ]), + [selectedZone, selectedWard, selectedRoadName] + ); + + /* ======================================================= + MAP FILTER (highlight only matching features on the map) + ======================================================= */ + + const setLayerFilter = useCallback( + async (where: string | null) => { + const mapLayer = getMapForm7Layer(); + if (!jimuMapView?.view || !mapLayer) return; + + try { + const layerView = await jimuMapView.view.whenLayerView(mapLayer); + (layerView as any).filter = where ? { where } : null; + } catch (error) { + console.error("Unable to update Form 7 map filter:", error); + } + }, + [jimuMapView, getMapForm7Layer] + ); + + /* ======================================================= + QUERY FORM 7 FEATURES → TABLE ROWS + ======================================================= */ + + const queryForm7Features = useCallback( + async (where: string): Promise => { + if (!form7Layer) return []; + + const query = form7Layer.createQuery(); + query.where = where; + query.outFields = ["*"]; + query.returnGeometry = true; + query.orderByFields = [`${FORM7_FIELDS.zone} ASC`, `${FORM7_FIELDS.ward} ASC`]; + + const result = await form7Layer.queryFeatures(query); + return result.features.map((feature) => mapFeatureToRecord(feature.attributes)); + }, + [form7Layer] + ); + + // Note: the map is no longer auto-zoomed on Search — only the row-level + // "Zoom" button (handleRowZoom, below) moves the view now. + + /* ======================================================= + SUBMIT + ======================================================= */ + + const handleSubmit = useCallback(async () => { + if (!form7Layer) { + setErrorMessage("Form 7 Point layer is not loaded."); + return; + } + if (!selectedZone) { + setErrorMessage("Please select a zone."); + return; + } + + setErrorMessage(""); + setLoading(true); + setCurrentPage(1); + setSelectedObjectId(null); + + try { + const where = currentWhere; + + const [count, features] = await Promise.all([ + form7Layer.queryFeatureCount({ where }).catch((error) => { + console.error("Feature count error:", error); + return 0; + }), + queryForm7Features(where), + ]); + + setPointCount(count); + setTableData(features); + + // Filter the map to matching features, but don't move the view — + // zooming only happens when the person clicks a row's Zoom button. + await setLayerFilter(where); + } catch (error) { + console.error("Form 7 search error:", error); + setErrorMessage("Unable to retrieve Form 7 Point records."); + setTableData([]); + setPointCount(0); + } finally { + setLoading(false); + } + }, [form7Layer, currentWhere, queryForm7Features, setLayerFilter]); + + /* ======================================================= + RESET + ======================================================= */ + + const handleReset = useCallback(async () => { + setSelectedZone(""); + setSelectedWard(""); + setSelectedRoadName(""); + setSelectedUser(""); + setSelectedDate(""); + setWards([]); + setRoads([]); + setTableData([]); + setPointCount(0); + setCurrentPage(1); + setSelectedObjectId(null); + setErrorMessage(""); + await setLayerFilter(null); + }, [setLayerFilter]); + + /* ======================================================= + ROW ZOOM + HIGHLIGHT + ======================================================= */ + + const handleRowZoom = useCallback( + async (objectid: number) => { + if (!form7Layer || !jimuMapView?.view) return; + + try { + const query = form7Layer.createQuery(); + query.where = `${FORM7_FIELDS.objectId} = ${objectid}`; + query.returnGeometry = true; + query.outFields = ["*"]; + + const result = await form7Layer.queryFeatures(query); + const feature = result.features[0]; + if (!feature) return; + + setSelectedObjectId(objectid); + + const mapLayer = getMapForm7Layer(); + if (mapLayer) { + const layerView = await jimuMapView.view.whenLayerView(mapLayer); + const highlightHandle = (layerView as any).highlight(feature); + setTimeout(() => { + try { + highlightHandle?.remove(); + } catch { + // ignore — handle may already be gone + } + }, 3000); + } + + if (feature.geometry) { + await jimuMapView.view.goTo({ target: feature.geometry, zoom: 19 }, { duration: 800 }); + } + } catch (error) { + console.error("Row zoom error:", error); + } + }, + [form7Layer, jimuMapView, getMapForm7Layer] + ); + + /* ======================================================= + PAGINATION (derived, memoized) + ======================================================= */ + + const totalPages = Math.max(1, Math.ceil(tableData.length / PAGE_SIZE)); + const startIndex = (currentPage - 1) * PAGE_SIZE; + const endIndex = startIndex + PAGE_SIZE; + const paginatedData = useMemo( + () => tableData.slice(startIndex, endIndex), + [tableData, startIndex, endIndex] + ); + + const goToPreviousPage = useCallback( + () => setCurrentPage((page) => Math.max(page - 1, 1)), + [] + ); + const goToNextPage = useCallback( + () => setCurrentPage((page) => Math.min(page + 1, totalPages)), + [totalPages] + ); + + /* ========================================================= + STYLES — memoized so they aren't rebuilt every render. + Only the two `loading`/`selectedZone`-dependent props are + applied via a small override at the JSX call site instead + of rebuilding the whole object. + ========================================================= */ + + const styles = useMemo( + () => + ({ + container: { + width: "100%", + height: "100%", + overflowY: "auto", + overflowX: "hidden", + background: "#f4f7fb", + fontFamily: '"Segoe UI", Arial, sans-serif', + color: "#1f2937", + boxSizing: "border-box", + padding: "16px", + }, + header: { + display: "flex", + flexDirection: "column", + justifyContent: "center", + background: "linear-gradient(135deg, #1565c0 0%, #2e8fe0 60%, #4aa7f0 100%)", + borderRadius: "14px", + padding: "20px 22px", + marginBottom: "16px", + boxShadow: "0 4px 14px rgba(21, 101, 192, 0.28)", + }, + title: { fontSize: "19px", fontWeight: 700, color: "#ffffff", lineHeight: 1.25 }, + subtitle: { marginTop: "4px", fontSize: "12px", color: "rgba(255,255,255,0.85)" }, + summary: { + display: "grid", + gridTemplateColumns: "repeat(3, 1fr)", + gap: "10px", + marginBottom: "14px", + }, + summaryCard: { + display: "flex", + flexDirection: "column", + gap: "4px", + background: "#ffffff", + border: "1px solid #e3e9f0", + borderRadius: "12px", + padding: "14px", + boxShadow: "0 2px 7px rgba(30, 64, 100, 0.05)", + }, + summaryLabel: { + fontSize: "10px", + color: "#8a97a8", + marginBottom: "2px", + textTransform: "uppercase", + letterSpacing: "0.5px", + fontWeight: 600, + }, + summaryValue: { fontSize: "24px", fontWeight: 700, color: "#1f2937" }, + summarySmall: { fontSize: "17px" }, + card: { + background: "#ffffff", + border: "1px solid #e3e9f0", + borderRadius: "12px", + padding: "16px", + marginBottom: "14px", + boxShadow: "0 2px 8px rgba(30, 64, 100, 0.05)", + }, + sectionTitle: { fontSize: "14px", fontWeight: 700, color: "#1f2d3d" }, + description: { + fontSize: "11px", + color: "#8a97a8", + marginTop: "3px", + marginBottom: "14px", + }, + filterGrid: { + display: "grid", + gridTemplateColumns: "repeat(3, 1fr)", + gap: "12px", + }, + field: { display: "flex", flexDirection: "column", minWidth: 0 }, + label: { fontSize: "11px", fontWeight: 600, color: "#5b6b7d", marginBottom: "6px" }, + required: { color: "#dc2626", marginLeft: "3px" }, + select: { + width: "100%", + height: "36px", + boxSizing: "border-box", + border: "1px solid #d7dfe8", + borderRadius: "7px", + background: "#ffffff", + color: "#263f52", + padding: "0 10px", + fontSize: "12px", + outline: "none", + }, + selectDisabled: { background: "#f5f7fa", color: "#a4aebb" }, + disabledInputWrapper: { position: "relative" }, + disabledInput: { + width: "100%", + height: "36px", + boxSizing: "border-box", + border: "1px solid #e1e7ed", + borderRadius: "7px", + background: "#f5f7fa", + color: "#a4aebb", + padding: "0 50px 0 10px", + fontSize: "12px", + outline: "none", + }, + trackingBadge: { + position: "absolute", + right: "7px", + top: "50%", + transform: "translateY(-50%)", + background: "#eef2f6", + color: "#8a97a8", + borderRadius: "5px", + padding: "3px 5px", + fontSize: "9px", + fontWeight: 600, + }, + actions: { + display: "flex", + justifyContent: "flex-end", + gap: "8px", + marginTop: "16px", + paddingTop: "13px", + borderTop: "1px solid #eef2f6", + }, + resetButton: { + height: "36px", + borderRadius: "7px", + padding: "0 16px", + fontSize: "12px", + fontWeight: 600, + cursor: "pointer", + display: "flex", + alignItems: "center", + justifyContent: "center", + gap: "6px", + background: "#ffffff", + color: "#5b6b7d", + border: "1px solid #d7dfe8", + }, + searchButton: { + height: "36px", + borderRadius: "7px", + padding: "0 18px", + fontSize: "12px", + fontWeight: 600, + display: "flex", + alignItems: "center", + justifyContent: "center", + gap: "6px", + background: "linear-gradient(135deg, #1565c0 0%, #2e8fe0 100%)", + color: "#ffffff", + border: "1px solid #1565c0", + }, + error: { + marginTop: "12px", + display: "flex", + alignItems: "center", + gap: "7px", + background: "#fff5f5", + border: "1px solid #fecaca", + color: "#b91c1c", + borderRadius: "7px", + padding: "9px 11px", + fontSize: "11px", + }, + resultsHeader: { + display: "flex", + alignItems: "center", + justifyContent: "space-between", + padding: "14px 16px", + borderBottom: "1px solid #eef2f6", + }, + resultCount: { marginTop: "3px", fontSize: "10px", color: "#8a97a8" }, + resultBadge: { + background: "#e7f1fd", + color: "#1565c0", + border: "1px solid #bcd9f7", + padding: "5px 9px", + borderRadius: "6px", + fontSize: "10px", + fontWeight: 600, + }, + tableWrapper: { width: "100%", overflowX: "auto" }, + table: { width: "100%", borderCollapse: "collapse", minWidth: "850px" }, + th: { + background: "#eaf2fc", + color: "#3c5a78", + fontSize: "10px", + fontWeight: 700, + textAlign: "left", + padding: "10px 9px", + borderBottom: "1px solid #dbe7f2", + whiteSpace: "nowrap", + }, + td: { + padding: "9px", + borderBottom: "1px solid #eef2f6", + fontSize: "11px", + color: "#43596a", + verticalAlign: "middle", + }, + serial: { width: "35px", color: "#a4aebb", textAlign: "center" }, + plainCellText: { color: "#334155", fontSize: "11px", fontWeight: 600 }, + roadCell: { + maxWidth: "170px", + overflow: "hidden", + textOverflow: "ellipsis", + whiteSpace: "nowrap", + }, + gisCell: { + maxWidth: "130px", + overflow: "hidden", + textOverflow: "ellipsis", + whiteSpace: "nowrap", + fontSize: "11px", + color: "#334155", + }, + nameCell: { + maxWidth: "140px", + overflow: "hidden", + textOverflow: "ellipsis", + whiteSpace: "nowrap", + }, + statusCell: { + maxWidth: "130px", + overflow: "hidden", + textOverflow: "ellipsis", + whiteSpace: "nowrap", + fontSize: "11px", + color: "#334155", + }, + zoomButton: { + display: "inline-flex", + alignItems: "center", + gap: "5px", + border: "1px solid #bcd9f7", + background: "#eef6ff", + color: "#1565c0", + borderRadius: "6px", + height: "28px", + padding: "0 8px", + fontSize: "10px", + fontWeight: 600, + cursor: "pointer", + }, + pagination: { + display: "flex", + alignItems: "center", + justifyContent: "center", + gap: "12px", + padding: "12px", + borderTop: "1px solid #eef2f6", + color: "#8a97a8", + fontSize: "10px", + }, + pageButton: { + width: "28px", + height: "28px", + borderRadius: "6px", + border: "1px solid #d7dfe8", + background: "#ffffff", + color: "#1565c0", + cursor: "pointer", + fontSize: "16px", + }, + empty: { + display: "flex", + flexDirection: "column", + alignItems: "center", + justifyContent: "center", + minHeight: "180px", + padding: "25px", + }, + emptyIcon: { + width: "42px", + height: "42px", + borderRadius: "50%", + background: "#eef6ff", + border: "1px solid #d6e9fb", + display: "flex", + alignItems: "center", + justifyContent: "center", + color: "#7db6e8", + fontSize: "22px", + marginBottom: "10px", + }, + emptyTitle: { fontSize: "13px", fontWeight: 600, color: "#5b6b7d" }, + emptyDescription: { + marginTop: "5px", + fontSize: "10px", + color: "#a4aebb", + textAlign: "center", + }, + }) satisfies { [key: string]: React.CSSProperties }, + [] + ); + + const searchDisabled = loading || !selectedZone; + + /* ========================================================= + JSX + ========================================================= */ + + return ( +
+ {props.useMapWidgetIds?.length === 1 && ( + + )} + + {/* HEADER */} +
+
Form 7 Point Search
+
Search and locate Form 7 Point records
+
+ + {/* SUMMARY CARDS */} +
+
+
Total Points
+
{pointCount}
+
+ +
+
Selected Zone
+
+ {selectedZone || "All"} +
+
+ +
+
Selected Ward
+
+ {selectedWard || "All"} +
+
+
+ + {/* FILTER CARD */} +
+
Search Filters
+
+ Select zone, ward and road to filter Form 7 Point records. +
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ + Soon +
+
+ +
+ +
+ + Soon +
+
+
+ +
+ + + +
+ + {errorMessage && ( +
+ ! + {errorMessage} +
+ )} +
+ + {/* RESULTS CARD */} +
+
+
+
Form 7 Point Records
+
+ {tableData.length > 0 + ? `Showing ${startIndex + 1} - ${Math.min(endIndex, tableData.length)} of ${ + tableData.length + }` + : "No records found"} +
+
+ + {tableData.length > 0 && ( +
{tableData.length} Records
+ )} +
+ + {tableData.length > 0 ? ( + <> +
+ + + + + + + + + + + + + + + + {paginatedData.map((record, index) => ( + + + + + + + + + + + + + + + + + + ))} + +
#ZoneWardRoad NameGIS IDAssessee NameStatusAction
+ {startIndex + index + 1} + + {record.zone || "-"} + + {record.ward || "-"} + + {record.roadName || "-"} + + {record.gisId || "-"} + + {record.assesseeName || "-"} + + {record.status ? ( + {record.status} + ) : ( + "-" + )} + + +
+
+ + {totalPages > 1 && ( +
+ + + + Page {currentPage} of {totalPages} + + + +
+ )} + + ) : ( +
+
◌
+
No Form 7 Point Records
+
+ Select a zone and click Search to retrieve Form 7 Point records. +
+
+ )} +
+
+ ); +}; + +export default Form7ApprovalPending; \ No newline at end of file diff --git a/Form7Generartion_Filter/src/setting/setting.tsx b/Form7Generartion_Filter/src/setting/setting.tsx new file mode 100644 index 0000000..1e5fa3d --- /dev/null +++ b/Form7Generartion_Filter/src/setting/setting.tsx @@ -0,0 +1,20 @@ +import { React } from 'jimu-core' +import { type AllWidgetSettingProps } from 'jimu-for-builder' +import { MapWidgetSelector } from 'jimu-ui/advanced/setting-components' + +const Setting = (props: AllWidgetSettingProps) => { + const onMapWidgetSelected = (useMapWidgetIds: string[]) => { + console.log("Selected Map Widget IDs:", useMapWidgetIds); + props.onSettingChange({ + id: props.id, + useMapWidgetIds: useMapWidgetIds + }) + } + + return
+ +
+} + +export default Setting + diff --git a/Form7Generartion_Filter/src/zoom-in.png b/Form7Generartion_Filter/src/zoom-in.png new file mode 100644 index 0000000..73ac96e Binary files /dev/null and b/Form7Generartion_Filter/src/zoom-in.png differ diff --git a/Form7Generartion_Filter/tests/simple-widget.test.tsx b/Form7Generartion_Filter/tests/simple-widget.test.tsx new file mode 100644 index 0000000..e2573e0 --- /dev/null +++ b/Form7Generartion_Filter/tests/simple-widget.test.tsx @@ -0,0 +1,14 @@ +import { React } from 'jimu-core' +import _Widget from '../src/runtime/widget' +import { widgetRender, wrapWidget } from 'jimu-for-test' + +const render = widgetRender() +describe('test simple widget', () => { + it('simple test', () => { + const Widget = wrapWidget(_Widget, { + config: { exampleConfigProperty: 'a' } + }) + const { queryByText } = render() + expect(queryByText('exampleConfigProperty: a').tagName).toBe('P') + }) +}) diff --git a/Form7Query_Approval/config.json b/Form7Query_Approval/config.json new file mode 100644 index 0000000..0ce5fd8 --- /dev/null +++ b/Form7Query_Approval/config.json @@ -0,0 +1,5 @@ +{ + "exampleConfigProperty": "test", + "useMapWidget": true + +} diff --git a/Form7Query_Approval/icon.svg b/Form7Query_Approval/icon.svg new file mode 100644 index 0000000..d2c9ea5 --- /dev/null +++ b/Form7Query_Approval/icon.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Form7Query_Approval/manifest.json b/Form7Query_Approval/manifest.json new file mode 100644 index 0000000..edf7f9e --- /dev/null +++ b/Form7Query_Approval/manifest.json @@ -0,0 +1,19 @@ +{ + "name": "Form7Query_Approval", + "label": "Form7Query_Approval", + "type": "widget", + "version": "1.16.0", + "exbVersion": "1.16.0", + "author": "Esri R&D Center Beijing", + "description": "This is a barebones, simple widget. It includes an example of how to use the config file, and it includes a placeholder SVG icon. It intentionally does not include the following so you can use this to start from scratch: i18n translations, a Settings panel, unit tests. See the documentation for more information on how to implement these features.", + "copyright": "", + "license": "http://www.apache.org/licenses/LICENSE-2.0", + "properties": {}, + "translatedLocales": [ + "en" + ], + "defaultSize": { + "width": 800, + "height": 500 + } +} \ No newline at end of file diff --git a/Form7Query_Approval/src/config.ts b/Form7Query_Approval/src/config.ts new file mode 100644 index 0000000..780aacf --- /dev/null +++ b/Form7Query_Approval/src/config.ts @@ -0,0 +1,7 @@ +import { type ImmutableObject } from 'seamless-immutable' + +export interface Config { + exampleConfigProperty: string +} + +export type IMConfig = ImmutableObject diff --git a/Form7Query_Approval/src/runtime/assets/zoom-in.svg b/Form7Query_Approval/src/runtime/assets/zoom-in.svg new file mode 100644 index 0000000..bb2d2e5 --- /dev/null +++ b/Form7Query_Approval/src/runtime/assets/zoom-in.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Form7Query_Approval/src/runtime/components/LoadingPopup.css b/Form7Query_Approval/src/runtime/components/LoadingPopup.css new file mode 100644 index 0000000..5d83905 --- /dev/null +++ b/Form7Query_Approval/src/runtime/components/LoadingPopup.css @@ -0,0 +1,45 @@ +.loading-overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 1000; + display: flex; + justify-content: center; + align-items: center; + } + + .loading-box { + background: #fff; + padding: 24px; + border-radius: 8px; + width: 280px; + text-align: center; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); + } + + .loading-title { + font-size: 1.2rem; + font-weight: bold; + margin-bottom: 16px; + } + + .spinner { + border: 4px solid #e0e0e0; + border-top: 4px solid #009688; + border-radius: 50%; + width: 32px; + height: 32px; + animation: spin 1s linear infinite; + margin: 0 auto 12px auto; + } + + @keyframes spin { + to { + transform: rotate(360deg); + } + } + + .loading-message { + color: #555; + } + \ No newline at end of file diff --git a/Form7Query_Approval/src/runtime/components/LoadingPopup.tsx b/Form7Query_Approval/src/runtime/components/LoadingPopup.tsx new file mode 100644 index 0000000..0a2cc49 --- /dev/null +++ b/Form7Query_Approval/src/runtime/components/LoadingPopup.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import './LoadingPopup.css'; + +interface LoadingPopupProps { + show: boolean; + message?: string; +} + +const LoadingPopup: React.FC = ({ show, message = "Preparing to download ..." }) => { + if (!show) return null; + + return ( +
+
+

Please Wait..

+
+

{message}

+
+
+ ); +}; + +export default LoadingPopup; diff --git a/Form7Query_Approval/src/runtime/components/LoadingSpinner.jsx b/Form7Query_Approval/src/runtime/components/LoadingSpinner.jsx new file mode 100644 index 0000000..0a2cc49 --- /dev/null +++ b/Form7Query_Approval/src/runtime/components/LoadingSpinner.jsx @@ -0,0 +1,23 @@ +import React from 'react'; +import './LoadingPopup.css'; + +interface LoadingPopupProps { + show: boolean; + message?: string; +} + +const LoadingPopup: React.FC = ({ show, message = "Preparing to download ..." }) => { + if (!show) return null; + + return ( +
+
+

Please Wait..

+
+

{message}

+
+
+ ); +}; + +export default LoadingPopup; diff --git a/Form7Query_Approval/src/runtime/simple_widget.css b/Form7Query_Approval/src/runtime/simple_widget.css new file mode 100644 index 0000000..703e43b --- /dev/null +++ b/Form7Query_Approval/src/runtime/simple_widget.css @@ -0,0 +1,155 @@ +.property-widget-parent { + /* Enables scroll for the whole widget */ + padding: 8px; + overflow-x: hidden; + max-width: 100%; +} + +.property-widget { + font-family: Arial, sans-serif; + background-color: #f9f9f9; + border-radius: 8px; + padding: 16px; + min-width: 350px; +} + + +.widget-title { + font-size: 20px; + margin-bottom: 16px; + color: #1a1a1a; + font-weight: 600; + border-bottom: 1px solid #ddd; + padding-bottom: 4px; +} + +.property_form { + display: grid; + grid-template-columns: 1fr 2fr; + align-items: center; + gap: 8px; + margin-bottom: 10px; + overflow-x: auto; + overflow-y: auto; + max-height: 300px; /* Restrict form height */ +} + + +.property_form label { + margin-bottom: 4px; + font-weight: 500; + color: #333; +} + +.property_form select { + padding: 6px 10px; + border-radius: 6px; + border: 1px solid #ccc; + font-size: 14px; + background-color: #fdfdfd; + transition: border-color 0.2s ease; +} + +.property_form select:focus { + outline: none; + border-color: #0078d4; +} + +#countDiv { + margin-bottom: 20px; + background: #eef6fd; + padding: 12px; + border-radius: 6px; + border: 1px solid #d0e4f3; +} + +#countDiv p { + margin: 4px 0; + font-size: 14px; + color: #333; +} + +button.property_form { + padding: 10px; + border-radius: 6px; + cursor: pointer; + font-weight: 600; + border: none; + font-size: 14px; + transition: background 0.2s ease; +} + +button.property_form:hover { + opacity: 0.9; +} + +.attribute-table { + margin-top: 20px; + background: #fff; + border: 1px solid #ccc; + border-radius: 8px; + padding: 10px; + overflow: auto; /* Enables both vertical and horizontal scroll */ + max-height: 300px; /* Restrict vertical space */ + max-width: 100%; /* Ensure it doesn't overflow container */ +} + +.attribute-table table { + width: max-content; /* Enables horizontal scrolling */ + min-width: 100%; + border-collapse: collapse; + font-size: 13px; +} + +.attribute-table thead th { + position: sticky; + top: 0; + background-color: #f0f0f0; + z-index: 2; +} + + +.attribute-table th { + background: #f3f3f3; + font-weight: 600; +} + +.attribute-table tr:hover { + background-color: #f9f9f9; +} + +button { + font-family: inherit; +} + +.submit-button-fixed { + position: fixed; + bottom: 20px; + right: 20px; + background-color: #0078d4; + color: white; + padding: 10px 20px; + border: none; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + cursor: pointer; + z-index: 1000; +} + +.submit-button-fixed:hover { + background-color: #005fa3; +} +.property-widget { + position: relative; +} + +.submit-button-fixed { + position: absolute; + bottom: 10px; + right: 10px; +} +.widget-container, .esri-widget, .property_form { + max-width: 100%; + box-sizing: border-box; + overflow-x: hidden; +} diff --git a/Form7Query_Approval/src/runtime/widget.tsx b/Form7Query_Approval/src/runtime/widget.tsx new file mode 100644 index 0000000..16dd742 --- /dev/null +++ b/Form7Query_Approval/src/runtime/widget.tsx @@ -0,0 +1,820 @@ +import React, { useState, useEffect } from "react"; +import FeatureLayer from "@arcgis/core/layers/FeatureLayer"; +import { type AllWidgetProps } from 'jimu-core'; +//import "./simple_widget.css"; +import { JimuMapViewComponent, type JimuMapView } from 'jimu-arcgis'; +//import { mapViewManager } from '../../../utils/mapview'; +import zoomInIcon from './assets/zoom-in.svg'; + +const RoadAssetFilter = (props: AllWidgetProps) => { + // State variables (building-only, no road/gis) + const [selectedZone, setSelectedZone] = useState("All"); + const [selectedWard, setSelectedWard] = useState("All"); + const [zoneOptions, setZoneOptions] = useState([]); + const [wardOptions, setWardOptions] = useState([]); + const [jimuMapView, setJimuMapView] = useState(); + const [highlightHandle, setHighlightHandle] = useState(null); + const [selectedUser, setSelectedUser] = useState("All"); + const [selectedDate, setSelectedDate] = useState("All"); // ISO yyyy-mm-dd + const [selectedApproval, setSelectedApproval] = useState("All"); + const [userOptions, setUserOptions] = useState([]); + const [dateOptions, setDateOptions] = useState([]); + const [approvalOptions, setApprovalOptions] = useState([]); + const [buildingCount, setBuildingCount] = useState(null); + const [tableData, setTableData] = useState([]); + const [currentPage, setCurrentPage] = useState(1); + const [itemsPerPage] = useState(10); + const [selectedFeatureId, setSelectedFeatureId] = useState(null); + + // URLs for layers (only Building) + const ZONE_LAYER_URL = "https://gisgcc.chennaicorporation.gov.in/server/rest/services/GCCDepts/GCC_Administration_Boundaries/FeatureServer/3"; + const WARD_LAYER_URL = "https://gisgcc.chennaicorporation.gov.in/server/rest/services/GCCDepts/GCC_Administration_Boundaries/FeatureServer/4"; + const BUILDING_LAYER_URL = "https://gisgcc.chennaicorporation.gov.in/server/rest/services/Revenue/Building_Updation/FeatureServer/0"; + + // Layer name (used to locate map layer) + const BUILDING_LAYER_NAME = "Form 6 Building"; + + // Field mapping (Building only) + const FIELD_MAPPING = { + Building: { + zone: "zone", + ward: "ward", + user: "created_user", + date: "created_date", + approval: "approval" + } + }; + + // Utility to escape single quotes in SQL + const safe = (val: string) => val.replace(/'/g, "''"); + + // ------------------------------------------------------------------------ + // DATE HELPER – using TIMESTAMP literals (proven in summary widget) + // ------------------------------------------------------------------------ + const toTimestampWhere = (fieldName: string, startISO: string, endISO: string) => { + return `${fieldName} >= TIMESTAMP '${startISO} 00:00:00' AND ${fieldName} <= TIMESTAMP '${endISO} 23:59:59'`; + }; + + // Format a value (ms or ISO/string) for display in table (locale) + const formatDate = (dateValue: any) => { + if (!dateValue) return '-'; + if (typeof dateValue === 'number') { + return new Date(dateValue).toLocaleString(); + } + if (typeof dateValue === 'string' && dateValue.includes('T')) { + return new Date(dateValue).toLocaleString(); + } + if (typeof dateValue === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(dateValue)) { + return new Date(`${dateValue} GMT+0530`).toLocaleString(); + } + return dateValue; + }; + + // Convert a feature attribute date (number or string) into ISO yyyy-mm-dd for dropdown + const formatAttrDateToISO = (val: any): string | null => { + if (val == null) return null; + let d: Date; + if (typeof val === 'number') { + d = new Date(val); + } else { + d = new Date(val); + } + if (isNaN(d.getTime())) return null; + const yyyy = d.getFullYear(); + const mm = String(d.getMonth() + 1).padStart(2, '0'); + const dd = String(d.getDate()).padStart(2, '0'); + return `${yyyy}-${mm}-${dd}`; + }; + + // Apply ward definition expression on building layer + const applyWardDefinition = async (wardValue: string) => { + if (!jimuMapView?.view || !wardValue || wardValue === 'All') return; + const view = jimuMapView.view; + const buildingLayer = view.map.layers.find(l => l.title === BUILDING_LAYER_NAME) as FeatureLayer; + if (buildingLayer) { + buildingLayer.definitionExpression = `${FIELD_MAPPING.Building.ward} = '${safe(wardValue)}'`; + await view.whenLayerView(buildingLayer); + } + }; + + const clearWardDefinition = async () => { + if (!jimuMapView?.view) return; + const map = jimuMapView.view.map; + const layer = map.layers.find(l => l.title === BUILDING_LAYER_NAME) as FeatureLayer; + if (layer) { + layer.definitionExpression = ''; + } + }; + + // Zoom to Zone geometry + const zoomToZoneGeometry = async (zoneValue: string) => { + if (!jimuMapView || !zoneValue || zoneValue === 'All') return; + const view = jimuMapView.view; + const zoneLayer = new FeatureLayer({ url: ZONE_LAYER_URL }); + try { + await zoneLayer.load(); + const zoneField = zoneLayer.fields.find(f => f.name === "zone"); + let whereClause: string; + if (zoneField && (zoneField.type === "integer" || zoneField.type === "double")) { + const num = Number(zoneValue); + if (isNaN(num)) return; + whereClause = `zone = ${num}`; + } else { + whereClause = `zone = '${safe(zoneValue)}'`; + } + const query = zoneLayer.createQuery(); + query.where = whereClause; + query.outFields = ["zone"]; + query.returnGeometry = true; + const result = await zoneLayer.queryFeatures(query); + if (result.features.length > 0) { + const geometry = result.features[0].geometry; + await view.goTo({ + target: geometry, + padding: { top: 50, bottom: 50, left: 50, right: 50 }, + duration: 1000 + }); + } + } catch (error) { + console.error("Error zooming to zone geometry:", error); + } + }; + + // Zoom to Ward geometry + const zoomToWardGeometry = async (wardValue: string) => { + if (!jimuMapView || !wardValue || wardValue === 'All') return; + const view = jimuMapView.view; + const wardLayer = new FeatureLayer({ url: WARD_LAYER_URL }); + try { + await wardLayer.load(); + const wardField = wardLayer.fields.find(f => f.name === "ward_no"); + let whereClause: string; + if (wardField && (wardField.type === "integer" || wardField.type === "double")) { + const num = Number(wardValue); + if (isNaN(num)) return; + whereClause = `ward_no = ${num}`; + } else { + whereClause = `ward_no = '${safe(wardValue)}'`; + } + const query = wardLayer.createQuery(); + query.where = whereClause; + query.outFields = ["ward_no"]; + query.returnGeometry = true; + const result = await wardLayer.queryFeatures(query); + if (result.features.length > 0) { + const geometry = result.features[0].geometry; + sessionStorage.setItem("wardgeometry", JSON.stringify(geometry.toJSON())); + await view.goTo({ + target: geometry, + padding: { top: 50, bottom: 50, left: 50, right: 50 }, + duration: 1000 + }); + } + } catch (error) { + console.error("Error zooming to ward geometry:", error); + } + }; + + // Zoom to filtered features (building-only) + const zoomToFilteredFeature = async () => { + if (!jimuMapView) return; + + const view = jimuMapView.view; + const layerUrl = BUILDING_LAYER_URL; + const whereClause = buildWhereClause(); + + const layer = new FeatureLayer({ url: layerUrl }); + try { + await layer.load(); + + const query = layer.createQuery(); + try { + query.where = whereClause; + query.returnGeometry = true; + query.outFields = ["*"]; + } catch (error) { + console.error("Invalid where clause in zoomToFilteredFeature:", whereClause, error); + return; + } + + const result = await layer.queryFeatures(query); + + if (result.features.length === 1) { + const feature = result.features[0]; + await handleRowZoom(feature); + } else if (result.features.length > 1) { + const extentResult = await layer.queryExtent(query); + if (extentResult.extent) { + await view.goTo({ target: extentResult.extent.expand(1.2), duration: 1000 }); + } + } + } catch (err) { + console.error("Error zooming to filtered feature:", err); + } + }; + + useEffect(() => { + const shouldZoom = + (selectedUser && selectedUser !== 'All') || + (selectedDate && selectedDate !== 'All') || + (selectedApproval && selectedApproval !== 'All'); + + if (shouldZoom) { + zoomToFilteredFeature(); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [selectedUser, selectedDate, selectedApproval]); + + // Populate Zone dropdown from Building layer distinct zone values + const populateZone = async () => { + try { + const layer = new FeatureLayer({ url: BUILDING_LAYER_URL }); + const query = layer.createQuery(); + query.returnDistinctValues = true; + query.returnGeometry = false; + query.outFields = [FIELD_MAPPING.Building.zone]; + query.where = "1=1"; + const result = await layer.queryFeatures(query); + if (result) { + const zones = Array.from(new Set( + result.features.map(f => f.attributes[FIELD_MAPPING.Building.zone]).filter(Boolean) + )); + zones.sort((a, b) => { + const na = Number(a), nb = Number(b); + if (!isNaN(na) && !isNaN(nb)) return na - nb; + return String(a).localeCompare(String(b)); + }); + setZoneOptions(['All', ...zones]); + } + } catch (error) { + console.error("Error fetching zones:", error); + } + }; + + useEffect(() => { + populateZone(); + }, []); + + // Populate Ward dropdown based on selected Zone (from Building layer) + const populateWard = async () => { + try { + const layer = new FeatureLayer({ url: BUILDING_LAYER_URL }); + const query = layer.createQuery(); + query.returnDistinctValues = true; + query.returnGeometry = false; + query.outFields = [FIELD_MAPPING.Building.ward]; + if (selectedZone && selectedZone !== 'All') { + query.where = `${FIELD_MAPPING.Building.zone} = '${safe(selectedZone)}'`; + } else { + query.where = "1=1"; + } + const result = await layer.queryFeatures(query); + if (result) { + const wards = Array.from(new Set( + result.features.map(f => f.attributes[FIELD_MAPPING.Building.ward]).filter(Boolean) + )); + wards.sort((a, b) => { + const na = Number(a), nb = Number(b); + if (!isNaN(na) && !isNaN(nb)) return na - nb; + return String(a).localeCompare(String(b)); + }); + setWardOptions(['All', ...wards]); + } + } catch (error) { + console.error("Error fetching wards:", error); + } + }; + + useEffect(() => { + populateWard(); + }, [selectedZone]); + + // Fetch filter options based on building layer (user, date, approval) + const fetchFilterOptions = async () => { + if (!selectedZone) return; + + const layerUrl = BUILDING_LAYER_URL; + const mapping = FIELD_MAPPING.Building; + + try { + const layer = new FeatureLayer({ url: layerUrl }); + const baseQuery = layer.createQuery(); + baseQuery.returnDistinctValues = true; + baseQuery.returnGeometry = false; + + // Zone and ward filtering + let where = "1=1"; + if (selectedZone && selectedZone !== 'All') where = `${mapping.zone} = '${safe(selectedZone)}'`; + if (selectedWard && selectedWard !== 'All') where += ` AND ${mapping.ward} = '${safe(selectedWard)}'`; + + // Approval filter (if already selected) should further narrow options + if (selectedApproval && selectedApproval !== 'All') { + where += ` AND ${mapping.approval} = '${safe(selectedApproval)}'`; + } + + // Fetch Created Users + const userQuery = layer.createQuery(); + userQuery.returnDistinctValues = true; + userQuery.returnGeometry = false; + userQuery.where = where; + userQuery.outFields = [mapping.user]; + const userResult = await layer.queryFeatures(userQuery); + const users = Array.from(new Set( + userResult.features.map(f => f.attributes[mapping.user]).filter(v => v != null) + )); + users.sort(); + setUserOptions(['All', ...users]); + + // Fetch Created Dates -> store as ISO (yyyy-mm-dd) + const dateQuery = layer.createQuery(); + dateQuery.returnDistinctValues = true; + dateQuery.returnGeometry = false; + dateQuery.where = where; + dateQuery.outFields = [mapping.date]; + const dateResult = await layer.queryFeatures(dateQuery); + const rawDates = dateResult.features + .map(f => formatAttrDateToISO(f.attributes[mapping.date])) + .filter(v => v != null) as string[]; + const uniqueDates = Array.from(new Set(rawDates)); + uniqueDates.sort(); + setDateOptions(['All', ...uniqueDates]); + + // Fetch Approval (distinct values). If none, fallback to coded values array. + try { + const approvalQuery = layer.createQuery(); + approvalQuery.returnDistinctValues = true; + approvalQuery.returnGeometry = false; + approvalQuery.where = where; + approvalQuery.outFields = [mapping.approval]; + const approvalResult = await layer.queryFeatures(approvalQuery); + let approvals = Array.from(new Set( + approvalResult.features.map(f => f.attributes[mapping.approval]).filter(v => v != null) + )); + approvals.sort(); + if (approvals.length === 0) { + approvals = ['Approved', 'Pending']; // fallback to coded values + } + setApprovalOptions(['All', ...approvals]); + } catch (err) { + setApprovalOptions(['All', 'Approved', 'Pending']); + } + } catch (error) { + console.error("Error fetching filter options:", error); + } + }; + + useEffect(() => { + fetchFilterOptions(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [selectedZone, selectedWard, selectedApproval]); + + // ------------------------------------------------------------------------ + // BUILD WHERE CLAUSE – FIXED DATE USING TIMESTAMP LITERALS + // ------------------------------------------------------------------------ + const buildWhereClause = () => { + const clauses: string[] = []; + const mapping = FIELD_MAPPING.Building; + + if (selectedZone && selectedZone !== 'All') { + clauses.push(`${mapping.zone}='${safe(selectedZone)}'`); + } + + if (selectedWard && selectedWard !== 'All') { + clauses.push(`${mapping.ward}='${safe(selectedWard)}'`); + } + + if (selectedUser && selectedUser !== 'All') { + clauses.push(`${mapping.user}='${safe(selectedUser)}'`); + } + + if (selectedApproval && selectedApproval !== 'All') { + clauses.push(`${mapping.approval}='${safe(selectedApproval)}'`); + } + + // Date range – using TIMESTAMP literals (works for esriFieldTypeDate) + if (selectedDate && selectedDate !== 'All') { + const dateWhere = toTimestampWhere(mapping.date, selectedDate, selectedDate); + clauses.push(dateWhere); + } + + return clauses.length > 0 ? clauses.join(" AND ") : "1=1"; + }; + + // Count helper for building layer + const getFeatureCount = async (layerUrl: string, whereClause: string): Promise => { + const layer = new FeatureLayer({ url: layerUrl }); + const query = layer.createQuery(); + query.returnGeometry = false; + + try { + query.where = whereClause; + } catch (error) { + console.error("Invalid where clause in count query:", whereClause, error); + return 0; + } + + try { + return await layer.queryFeatureCount(query); + } catch (error) { + console.error("Error counting features:", error); + return 0; + } + }; + + // Fetch counts whenever filters change (only building) + useEffect(() => { + const fetchCounts = async () => { + try { + const buildingWhere = buildWhereClause(); + const bc = await getFeatureCount(BUILDING_LAYER_URL, buildingWhere); + setBuildingCount(bc); + } catch (err) { + console.error(err); + setBuildingCount(null); + } + }; + + fetchCounts(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [selectedZone, selectedWard, selectedUser, selectedDate, selectedApproval]); + + // Row Zoom: zoom to a single feature, highlight it (building) + const handleRowZoom = async (feature: any) => { + const view = jimuMapView?.view; + if (!view || !feature) return; + + if (highlightHandle) { + highlightHandle.remove(); + setHighlightHandle(null); + } + + try { + const layerForHighlight = view.map.layers.find(l => l.url === BUILDING_LAYER_URL); + if (layerForHighlight) { + await layerForHighlight.load(); + const layerView = await view.whenLayerView(layerForHighlight as any); + const highlight = layerView.highlight(feature); + setHighlightHandle(highlight); + } + + setSelectedFeatureId(feature.attributes.OBJECTID); + + const geom = feature.geometry; + if (geom) { + await view.goTo({ target: geom, zoom: 18, duration: 1000 }); + } + } catch (err) { + console.error("Error zooming to feature:", err); + } + }; + + // Submit: apply filters, populate table + const handleSubmit = async (e: React.MouseEvent) => { + e.preventDefault(); + if (!selectedZone) { + alert("Please select a Zone"); + return; + } + const view = jimuMapView?.view; + if (!view) return; + + // Zoom to Ward extent if selected + if (selectedWard && selectedWard !== 'All') { + await zoomToWardGeometry(selectedWard); + } + + // Build whereClause + const whereClause = buildWhereClause(); + console.log("Built WHERE clause:", whereClause); + + // Query features for table (building layer) + const layerUrl = BUILDING_LAYER_URL; + const queryLayer = new FeatureLayer({ url: layerUrl }); + const query = queryLayer.createQuery(); + query.where = whereClause; + query.outFields = ["*"]; + query.returnGeometry = true; + try { + const results = await queryLayer.queryFeatures(query); + setTableData(results.features); + setCurrentPage(1); + + if (results.features.length === 0) { + alert(`No features found for the selected filters in Building layer.`); + } + + // Apply filter to building layer in the active map + const viewMap = view.map; + const buildingLayer = viewMap.layers.find(l => l.title === BUILDING_LAYER_NAME) as FeatureLayer; + if (buildingLayer) { + try { + await buildingLayer.load(); + const lv = await view.whenLayerView(buildingLayer); + if (lv) { + lv.filter = { where: whereClause }; + } + } catch (err) { + console.error("Error applying filter to building layer:", buildingLayer.title, err); + } + } + + // Zoom to filtered extent if needed + const shouldZoomToFeatures = + !selectedWard || selectedWard === 'All'; + + if (shouldZoomToFeatures) { + const fl = new FeatureLayer({ url: layerUrl }); + await fl.load(); + const extentResult = await fl.queryExtent({ where: whereClause }); + if (extentResult.extent) { + await view.goTo({ + target: extentResult.extent.expand(1.2), + duration: 1000 + }); + } + } + } catch (error) { + console.error("Query failed:", error); + alert("An error occurred while querying features."); + } + }; + + // Reset: clear all selections (building-only) + const handleReset = () => { + setSelectedZone("All"); + setSelectedWard("All"); + setSelectedUser("All"); + setSelectedDate("All"); + setSelectedApproval("All"); + setUserOptions([]); + setDateOptions([]); + setApprovalOptions([]); + setBuildingCount(null); + setTableData([]); + setCurrentPage(1); + setSelectedFeatureId(null); + + const view = jimuMapView?.view; + if (highlightHandle) { + highlightHandle.remove(); + setHighlightHandle(null); + } + view?.graphics.removeAll(); + + if (view) { + const clearFilter = async (layerTitle: string) => { + const layer = view.map.layers.find(l => l.title === layerTitle) as FeatureLayer; + if (layer) { + try { + await layer.load(); + const lv = await view.whenLayerView(layer); + if (lv) lv.filter = null; + } catch (err) { + console.error("Error clearing filter on layer:", layerTitle, err); + } + } + }; + + clearFilter(BUILDING_LAYER_NAME); + } + + clearWardDefinition(); + }; + + // Active view change handler + const activeViewChangeHandler = (jmv: JimuMapView) => { + if (jmv && jmv.view) { + setJimuMapView(jmv); + } + }; + + useEffect(() => { + const interval = setInterval(() => { + const view = mapViewManager.getMapView(); + if (view && view.view) { + setJimuMapView(view); + clearInterval(interval); + } + }, 500); + return () => clearInterval(interval); + }, []); + + // Pagination for table + const paginatedData = tableData.slice( + (currentPage - 1) * itemsPerPage, + currentPage * itemsPerPage + ); + + return ( +
+
+ +

Building Search

+ +
+ Count Summary: +

Buildings: {buildingCount !== null ? buildingCount : '-'}

+
+ + {/* Zone selection */} +
+ + +
+ + {/* Ward selection */} +
+ + +
+ + {/* Filters (Zone-Ward-Approval-Date only) */} +
+ {/* Approval */} + + + + {/* Created User */} + + + + {/* Date */} + + + + {/* Submit / Reset */} +
+ + +
+
+ + {/* Feature table */} + {tableData.length > 0 && ( +
+

Feature Details

+ + + + + + + + + + + + + {paginatedData.map((feature, index) => { + const attr = feature.attributes; + const mapping = FIELD_MAPPING.Building; + return ( + + + + + + + + + + + ); + })} + +
ActionSl.NoZoneWardApprovalCreated Date
{(currentPage - 1) * itemsPerPage + index + 1}{attr[mapping.zone]}{attr[mapping.ward]}{attr[mapping.approval] || '-'}{formatDate(attr[mapping.date])}
+ + {/* Pagination controls */} +
+ + + Page {currentPage} of {Math.ceil(tableData.length / itemsPerPage)} + + +
+
+ )} +
+
+ ); +}; + +export default RoadAssetFilter; \ No newline at end of file diff --git a/Form7Query_Approval/src/setting/setting.tsx b/Form7Query_Approval/src/setting/setting.tsx new file mode 100644 index 0000000..1e5fa3d --- /dev/null +++ b/Form7Query_Approval/src/setting/setting.tsx @@ -0,0 +1,20 @@ +import { React } from 'jimu-core' +import { type AllWidgetSettingProps } from 'jimu-for-builder' +import { MapWidgetSelector } from 'jimu-ui/advanced/setting-components' + +const Setting = (props: AllWidgetSettingProps) => { + const onMapWidgetSelected = (useMapWidgetIds: string[]) => { + console.log("Selected Map Widget IDs:", useMapWidgetIds); + props.onSettingChange({ + id: props.id, + useMapWidgetIds: useMapWidgetIds + }) + } + + return
+ +
+} + +export default Setting + diff --git a/Form7Query_Approval/src/zoom-in.png b/Form7Query_Approval/src/zoom-in.png new file mode 100644 index 0000000..73ac96e Binary files /dev/null and b/Form7Query_Approval/src/zoom-in.png differ diff --git a/Form7Query_Approval/tests/simple-widget.test.tsx b/Form7Query_Approval/tests/simple-widget.test.tsx new file mode 100644 index 0000000..e2573e0 --- /dev/null +++ b/Form7Query_Approval/tests/simple-widget.test.tsx @@ -0,0 +1,14 @@ +import { React } from 'jimu-core' +import _Widget from '../src/runtime/widget' +import { widgetRender, wrapWidget } from 'jimu-for-test' + +const render = widgetRender() +describe('test simple widget', () => { + it('simple test', () => { + const Widget = wrapWidget(_Widget, { + config: { exampleConfigProperty: 'a' } + }) + const { queryByText } = render() + expect(queryByText('exampleConfigProperty: a').tagName).toBe('P') + }) +}) diff --git a/custom-popup/config.json b/custom-popup/config.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/custom-popup/config.json @@ -0,0 +1 @@ +{} diff --git a/custom-popup/icon.svg b/custom-popup/icon.svg new file mode 100644 index 0000000..c22ca44 --- /dev/null +++ b/custom-popup/icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/custom-popup/manifest.json b/custom-popup/manifest.json new file mode 100644 index 0000000..fbe5cd2 --- /dev/null +++ b/custom-popup/manifest.json @@ -0,0 +1,20 @@ +{ + "name": "custom-popup", + "type": "widget", + "version": "1.15.0", + "dependency": [ + "jimu-arcgis" + ], + "exbVersion": "1.15.0", + "description": "A hello world starter widget", + "copyright": "", + "license": "", + "properties": {}, + "translatedLocales": [ + "en" + ], + "defaultSize": { + "width": 800, + "height": 500 + } +} \ No newline at end of file diff --git a/custom-popup/src/runtime/custom-popup.css b/custom-popup/src/runtime/custom-popup.css new file mode 100644 index 0000000..65a392e --- /dev/null +++ b/custom-popup/src/runtime/custom-popup.css @@ -0,0 +1,80 @@ +.content-wrapper { + background-color: white !important; +} + +td { + width: 47%; + word-wrap: break-word; + padding: 0% 3%; +} + +.loading-icon { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 1000; + color: rgb(13, 42, 78, 0.79); +} + + +/* +.custom-popup { + padding: 10px; + background-color: #fff; + border-radius: 8px; + max-height: 100%; + overflow-y: auto; +} + +.popup-item { + margin-bottom: 15px; + border: 1px solid #ccc; + border-radius: 6px; + background-color: #f0f0f0; + padding: 10px; +} + +.popup-header { + cursor: pointer; + font-weight: bold; + display: flex; + justify-content: space-between; + padding: 10px; + background-color: #eee; + border-bottom: 1px solid #ddd; +} + +.expand-toggle { + font-size: 18px; + color: #007bff; +} + +.popup-content { + background-color: #fff; + border-top: 1px solid #ddd; + display: flex; + flex-direction: column; + row-gap: -2px; + font-size: 0.7rem; +} + +.popup-row { + display: flex; + padding: 3px 9px; + justify-content: space-between; + box-shadow: 0px 1px #dcd7d7; +} + +.popup-key { + font-weight: bold; + width: 50%; + word-wrap: break-word +} + +.popup-value { + word-wrap: break-word; + flex: 1; + font-weight: bold; + width: 50%; +} */ \ No newline at end of file diff --git a/custom-popup/src/runtime/widget.tsx b/custom-popup/src/runtime/widget.tsx new file mode 100644 index 0000000..dff16a6 --- /dev/null +++ b/custom-popup/src/runtime/widget.tsx @@ -0,0 +1,2571 @@ +// import React, { useEffect, useState, useRef } from 'react'; +// import { JimuMapViewComponent, JimuMapView } from 'jimu-arcgis'; +// import { fetchGISIDFetch, fetchBillNoData_New } from '../../../utils/queries'; +// import './custom-popup.css'; +// import FeatureLayer from '@arcgis/core/layers/FeatureLayer' +// //import { isArray } from 'lodash-es'; +// // import { loadMapView, getJimuMapView } from "../../../../shared/mapviewservice"; +// import { useMapView } from '../../../utils/mapviewservice'; // Import the context +// import { AllWidgetProps, appActions, getAppStore, IMState } from 'jimu-core'; +// import { useSelector } from 'react-redux'; +// //import { cleanup } from '@testing-library/react'; +// //import { RiLoader3Line } from "react-icons/ri"; +// //import LoadingWidget from '../../../common/loading'; + + + + + +// const Popup = (props: AllWidgetProps) => { +// const [jimuMapView, setJimuMapView] = useState(null); +// const [popupContent, setPopupContent] = useState(null); +// const [clickHandle, setClickHandle] = useState(null); // Store event handle +// const [buildingPopup, storeBuildingPopup] = useState(null); +// const [buldingPopupContent, storePopupContent_Building] = useState(null) +// const [buildingLayer, storeBuildingLayer] = useState(null) +// const [clickedFeatDet, storeclickedFeatureDet] = useState(null) +// // const [isVisible, setIsVisible] = useState(false); +// const isVisibleRef = useRef(false); +// const [definitionExpr, setBuildDefinition] = useState(null) +// const [definitionSetActive, flag_definitionSet] = useState(null) +// const [isLoading, setIsLoading] = useState(null) +// const { setMapView } = useMapView(); +// let loadingTimeout; + +// const Establishment_TABLE = new FeatureLayer({ +// url: "https://gisgcc.chennaicorporation.gov.in/server/rest/services/Revenue/SurveyTables/FeatureServer/1" +// }) +// const Property_TABLE = new FeatureLayer({ +// url: 'https://gisgcc.chennaicorporation.gov.in/server/rest/services/Revenue/Buildings_Revenue_MIS/MapServer/5' + +// // url: "https://gisgcc.chennaicorporation.gov.in/server/rest/services/Revenue/SurveyTables/FeatureServer/4" +// }) +// const Professional_TABLE = new FeatureLayer({ +// url: "https://gisgcc.chennaicorporation.gov.in/server/rest/services/Revenue/SurveyTables/FeatureServer/3" +// }) +// const Floor_TABLE = new FeatureLayer({ +// url: "https://gisgcc.chennaicorporation.gov.in/server/rest/services/Revenue/SurveyTables/FeatureServer/2" +// }) + + + + +// const monitoredWidgetIds = ['widget_58', 'widget_59', 'widget_72', 'widget_73', 'widget_66', 'widget_67']; // Replace with actual IDs + + +// const [isVisible, setIsVisible] = useState(false); + + +// const checkMonitoredWidgets = (): boolean => { +// const widgetStates = getAppStore().getState().widgetsRuntimeInfo; +// return monitoredWidgetIds.some( +// (widgetId) => +// widgetStates[widgetId] && widgetStates[widgetId]?.state === 'OPENED' +// ); +// }; + + +// // Function to handle dependent widget visibility +// const updateDependentWidgetVisibility = (): void => { +// const isAnyWidgetOpen = checkMonitoredWidgets(); +// setIsVisible(isAnyWidgetOpen); +// }; + +// useEffect(() => { +// const storeUnsubscribe = getAppStore().subscribe(() => { +// updateDependentWidgetVisibility(); +// }); + +// return () => { +// storeUnsubscribe(); +// }; +// }, []); + +// useEffect(() => { +// let cleanup; + +// if (jimuMapView) { + +// jimuMapView.view.on('popup-open', () => { +// alert('popup open triggered') +// console.log('Popup has been opened!'); +// }); +// jimuMapView.view.on('popup-close', () => { +// console.log('Popup has been closed!'); +// }); + +// if (jimuMapView && !isVisible) { + +// // cleanup = handleMapClick(jimuMapView); +// fetchBuildingLyr() +// } +// } +// }, [jimuMapView]); + + + + +// const BuildDefinition_Usage = useSelector( +// (state: IMState) => state.widgetsState?.['widget_59']?.state?.building +// ); +// const BuildDefinition_Type = useSelector( +// (state: IMState) => state.widgetsState?.['widget_58']?.state?.building +// ); +// const BuildDefinition_RevenueFilter = useSelector( +// (state: IMState) => state.widgetsState?.['widget_67']?.state?.building +// ); +// const BuildDefinition_CommonQry = useSelector( +// (state: IMState) => state.widgetsState?.['widget_36']?.state?.building +// ); +// const BuildDefinition_floor = useSelector( +// (state: IMState) => state.widgetsState?.['widget_66']?.state?.building +// ); + +// useEffect(() => { +// if (BuildDefinition_Usage) { +// setBuildDefinition(BuildDefinition_Usage) +// buildingLayer.refresh() +// } +// }, [BuildDefinition_Usage]) + +// useEffect(() => { +// if (BuildDefinition_Type) { +// setBuildDefinition(BuildDefinition_Type) +// buildingLayer.refresh() +// } +// }, [BuildDefinition_Type]) + +// useEffect(() => { +// if (BuildDefinition_RevenueFilter) { +// setBuildDefinition(BuildDefinition_RevenueFilter) +// buildingLayer.refresh() +// } +// }, [BuildDefinition_RevenueFilter]) + +// useEffect(() => { +// if (BuildDefinition_CommonQry) { +// setBuildDefinition(BuildDefinition_CommonQry) +// buildingLayer.refresh() +// } +// }, [BuildDefinition_CommonQry]) +// useEffect(() => { +// if (BuildDefinition_floor) { +// setBuildDefinition(BuildDefinition_floor) +// buildingLayer.refresh() +// } +// }, [BuildDefinition_floor]) + + +// useEffect(() => { +// if (definitionSetActive) { +// if (buildingLayer.definitionExpression !== definitionExpr) { +// buildingLayer.when(() => { +// buildingLayer.defintionExpression = definitionExpr +// }) +// } +// } +// }, [definitionSetActive]) + + +// useEffect(() => { +// let watchHandle +// if (buildingLayer && jimuMapView) { +// jimuMapView.view.whenLayerView(buildingLayer).then((layerView) => { +// // Watch for layer view updates +// watchHandle = layerView.watch('updating', (isUpdating) => { +// if (isUpdating) { +// // Set loading icon when layer is updating +// if (!isLoading) { +// setIsLoading(true); +// } +// } else { +// // Add a small delay before removing the loading icon + +// clearTimeout(loadingTimeout); +// loadingTimeout = setTimeout(() => { +// setIsLoading(false); +// }, 300); +// } + +// // Update definition expression if required +// buildingLayer.when(() => { +// if (buildingLayer.definitionExpression !== definitionExpr) { +// buildingLayer.definitionExpression = definitionExpr; +// // console.log('Updated definitionExpression:', definitionExpr); +// } +// }); +// }); +// }); +// } + +// // Cleanup +// return () => { +// if (watchHandle) { +// watchHandle.remove(); +// } +// clearTimeout(loadingTimeout); +// }; + +// }, [definitionExpr]) + + + + +// useEffect(() => { +// isVisibleRef.current = isVisible; +// }, [isVisible]); + + + + +// // Function to fetch data from external API +// const fetchSystemPropertyUsage = async (gisId) => { +// let response = await fetchBillNoData_New(gisId); +// if (response && response.length > 0) { +// return response; +// } else { +// return null +// } +// }; +// async function queryRelatedRecords(table, whereClause, id) { + +// let query = table.createQuery() +// query.where = whereClause + +// // const url = BuildingLayeSourceURL + `/` + id + `/query`; // Update with your actual URL +// // const response = await fetch(`${url}?where=${whereClause}&outFields=*&f=json`); +// // const data = await response.json(); +// let data = await table.queryFeatures(query) +// if (data.features.length > 0) { +// return data.features.map(feature => feature.attributes); +// } + +// } +// async function fetchTradeDetails(gccGisId) { +// const relatedBills = await queryRelatedRecords(Establishment_TABLE, `new_formatted_gis_id = '${gccGisId}'`, 1); +// let allTradeDetails = [] +// if (relatedBills) { +// relatedBills.forEach(bill => { +// allTradeDetails.push(`Establishment Name: ${bill.establishment_name}, Trade Nature: ${bill.trade_nature_updated}`); +// }); +// } +// return allTradeDetails.length > 0 ? allTradeDetails.join('
') : "N/A."; +// } + +// async function fetchBillNumbers(gccGisId) { +// const relatedBills = await queryRelatedRecords(Property_TABLE, `new_formatted_gis_id = '${gccGisId}'`, 4); +// let allBills = []; +// if (relatedBills) { +// relatedBills.forEach(bill => { +// allBills.push(bill.bill_no); +// }); +// } +// return allBills.length > 0 ? allBills.join('
') : "N/A"; + +// } + +// async function fetchProfessionCount(gccGisId) { +// const relatedBills = await queryRelatedRecords(Professional_TABLE, `new_formatted_gis_id = '${gccGisId}'`, 1); +// let count +// if (relatedBills) { +// count = relatedBills.length; +// } + +// return count === undefined || count === 0 ? "N/A" : count; +// } + +// async function fetchMaxFloor(gccGisId) { +// const floors = await queryRelatedRecords(Floor_TABLE, `new_formatted_gis_id = '${gccGisId}'`, 2); +// let maxFloor +// if (floors) { +// maxFloor = Math.max(...floors.map(floor => floor.gcc_floor_id), 0); +// } +// return maxFloor && maxFloor > 0 ? `${maxFloor}th Floor` : "N/A"; +// } + +// async function fetchTradeCount(gccGisId) { +// const relatedBills = await queryRelatedRecords(Establishment_TABLE, `new_formatted_gis_id = '${gccGisId}'`, 1); +// let count +// if (relatedBills) { +// count = relatedBills.length; +// } +// return count === undefined || count === 0 ? "N/A" : count; +// } + +// async function fetchAssessmentCount(gccGisId) { +// const relatedBills = await queryRelatedRecords(Property_TABLE, `new_formatted_gis_id = '${gccGisId}'`, 4); +// return relatedBills != undefined && relatedBills.length > 0 ? relatedBills.length : "N/A"; +// } + + +// const fetchBuildingLyr = () => { +// if (jimuMapView) { +// const LandCoverLyr = jimuMapView.view.map.layers.find(layer => layer.title === 'LandCover') +// if (!LandCoverLyr) { +// console.log('LandCover Layer not found in the web map') +// } else { +// // const buildingLyr_qryLyr = LandCoverLyr.layers.find(layer => layer.title === 'Buildings Revenue MIS') +// // const buildingLyr = LandCoverLyr.layers.find(layer => layer.title === 'Surveyed Buildings') +// // const titles = ['buildings', 'current balance', 'arrear balance']; + +// // const buildingLyr_Final = LandCoverLyr.layers.find( +// // layer => titles.includes(layer.title.toLowerCase()) +// // ); + +// const buildingLyr_Final = LandCoverLyr.layers.find(layer => layer.title === 'Buildings') + +// if (buildingLyr_Final) { +// storeBuildingLayer(buildingLyr_Final) +// // setBuildDefinition(buildingLyr_Final.definitionExpression) + +// } else { +// storeBuildingLayer(null) +// console.log('Buildings sublayer not found') +// } +// } +// } +// } + + +// const handleMapClick = (jmv) => { +// try { +// if (jmv) { + + +// // let clickHandle = jmv.view.whenLayerView(buildingLayer).then((layerView) => { +// // if (!layerView || !layerView.hasAllFeatures) { +// // console.warn("LayerView not ready for client-side queries."); +// // return; +// // } + +// // let clickHandle = jmv.view.on('click', async (evt) => { +// // jmv.view.whenLayerView(buildingLayer).then((layerView) => { +// jmv.view.on('click', async (evt) => { + + + + + + +// // if (isVisibleRef.current) { +// // evt.preventDefault(); +// // evt.stopPropagation(); +// // return; +// // } + +// const response = await jmv.view.hitTest(evt); +// if (response.results.length > 0) { +// // const buildingsLayerResult = response.results.find(result => result.layer && result.layer.title === 'Buildings'); +// // const buildingsLayerResult = response.results.find(result => result.graphic.layer && result.graphic.layer.title === 'Buildings'); +// if (buildingLayer) { +// const buildingsLayerResult = response.results.find(result => result.layer && result.layer.title === 'Buildings'); +// // const clickedFeature = response.results[0].graphic; + +// // const targetLayer = buildingLayer// buildingsLayerResult.layer; +// // let definition = targetLayer.definitionExpression +// // setBuildDefinition(definition) +// // storeBuildingLayer(targetLayer) +// if (buildingsLayerResult) { + + + +// let definition = buildingLayer.definitionExpression +// setBuildDefinition(definition) + +// const objectId = buildingsLayerResult.graphic.attributes.objectid;// buildingLayer.objectIdField// +// const query = buildingLayer.createQuery(); +// query.objectIds = [objectId]; +// query.outFields = ['*']; +// const queryResponse = await buildingLayer.queryFeatures(query); + +// if (queryResponse.features.length > 0) { +// const fullFeature = queryResponse.features[0]; +// const gcc_gis_id = fullFeature.attributes.gcc_gis_id; +// if (gcc_gis_id) { +// storeclickedFeatureDet([fullFeature.attributes, evt.mapPoint]) + + +// // const defaultContent = buldingPopupContent +// // const popupTemplate = { +// // title: 'Building Info', +// // content: async () => { + +// // let customContent = await buildCustomContent(oldGisId); + +// // return ` +// //
${defaultContent}
+// //
${customContent}
+// // `; +// // } +// // }; + +// // buildingsLayerResult.graphic.layer.popupTemplate = popupTemplate; + +// // jimuMapView.view.popup.open({ +// // features: [clickedFeature], +// // location: evt.mapPoint, +// // fetchFeatures: true +// // }); +// } +// } +// } +// } +// } +// else +// return +// }); + +// // return () => clickHandle.remove(); // Cleanup function to remove the event listener +// // }) +// } + +// } catch (err) { +// console.error('HitTest error:', err); +// } + + +// }; + +// useEffect(() => { +// let cleanup; +// if (buildingLayer) { +// cleanup = handleMapClick(jimuMapView); +// } +// }, [buildingLayer]) + +// useEffect(() => { +// // if (buildingLayer && definitionExpr) +// // buildingLayer.definitionExpression = definitionExpr +// }, [buildingLayer]) + + + + + +// useEffect(() => { +// if (Array.isArray(clickedFeatDet) && clickedFeatDet.length > 0) { +// // const defaultContent = buldingPopupContent + + +// const popupTemplate = { +// title: 'Building Info', +// content: async () => { + +// let customContent = await buildCustomContent(clickedFeatDet); + +// setTimeout(() => { +// document.querySelectorAll('.show-trade-button').forEach(button => { +// button.addEventListener('click', async (e) => { +// const billNo = e.target.getAttribute('data-billno'); +// const detailsRow = document.querySelector(`.trade-details-row[data-billno="${billNo}"]`); +// const detailsCell = detailsRow?.querySelector('.trade-details-cell'); + +// // Prevent multiple appends +// if (detailsRow && detailsCell && detailsCell.innerHTML.trim() === '') { +// const tradeHTML = await getTradeAssessmentHTML(billNo); +// detailsCell.innerHTML = tradeHTML; +// detailsRow.style.display = 'table-row'; +// } +// }); +// }); +// }, 0); + +// return ` +//

Note: The below property details were from GIS.

+//
${customContent}
+ +// `; +// }, +// actions: [], +// }; +// buildingLayer.popupTemplate = popupTemplate; +// // if (definitionExpr) { +// // buildingLayer.definitionExpression = definitionExpr +// // } +// } +// }, [clickedFeatDet]) + + +// async function getPopupContent(buildingLayerSource) { +// const popupTemplate = buildingLayerSource.graphic.layer.popupTemplate; +// storeBuildingPopup(popupTemplate) +// // If a popupTemplate exists, create content based on it +// if (popupTemplate) { +// const content = await popupTemplate.content +// // const content = await popupTemplate.content.map(async (item) => { +// // // Handle any text or html type content +// // if (typeof item === "string") { +// // return item; +// // } else if (item.type === "text") { +// // return `

${item.text}

`; +// // } +// // // You can handle other types (e.g., fields, media) as needed here +// // return ''; +// // }); + +// return content//.join(''); // Join all parts to form the complete content +// } + + +// } +// function generateDirectionUrl(feature) { +// const { x, y, spatialReference } = feature; + +// let latitude, longitude; +// if (spatialReference.wkid === 4326) { +// latitude = y; +// longitude = x; +// } else if (spatialReference.wkid === 102100) { +// // Conversion from Web Mercator to Lat/Lon +// const auxSphereToLatLon = (x, y) => { +// const rMajor = 6378137; +// const shift = Math.PI * rMajor; +// longitude = (x / shift) * 180.0; +// latitude = (y / shift) * 180.0; +// latitude = (180 / Math.PI) * (2 * Math.atan(Math.exp(latitude * Math.PI / 180.0)) - Math.PI / 2.0); +// }; +// auxSphereToLatLon(x, y); +// } +// return "https://www.google.com/maps?q=" +(latitude) + "," +(longitude); +// // return `http://www.google.com/maps/dir/?api=1&destination=${latitude},${longitude}`; +// } + +// const test = async (params: { Zone: string; ward: string; area: string; loc: string; street: string; GISID: string }) => { +// try { +// // Define the API endpoint +// const newAPIEndPoint = "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=common_api&jsonResp=Yes&subService=getPropertyByGis"; + +// // Convert params to query string +// const queryString = new URLSearchParams(params).toString(); +// const requestUrl = `${newAPIEndPoint}&${queryString}`; + +// // Fetch the data using fetch +// const response = await fetch(requestUrl, { +// method: "GET", +// headers: { +// "Content-Type": "application/json", +// }, +// }); + +// if (!response.ok) { +// throw new Error(`HTTP error! Status: ${response.status}`); +// } + +// const data = await response.json(); + +// // Check if data contains valid results +// if (data && data.ListResult && Object.keys(data.ListResult).length > 0) { +// return data.ListResult; // Return the full result +// } + +// return []; // Return an empty array if no matching results +// } catch (err) { +// console.error("Error fetching data:", err); +// return []; +// } +// }; + + + +// const fetchGISIDFetch_new_erp = async (params: { +// Zone: string; +// ward: string; +// area?: string | null; +// loc?: string | null; +// street?: string | null; +// GISID?: string | null; +// }): Promise => { +// try { +// const baseUrl = +// "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=common_api&jsonResp=Yes&subService=getPropertyByGis"; + +// const { GISID, ...queryParams } = params; + +// // Ensure Zone and ward are always included, remove any other null/undefined values +// const filteredParams = Object.fromEntries( +// Object.entries(queryParams).filter( +// ([key, value]) => +// (key === "Zone" || key === "ward") || (value !== null && value !== undefined && value !== "") +// ) +// ); + +// const queryString = new URLSearchParams(filteredParams as Record).toString(); +// const requestUrl = `${baseUrl}&${queryString}`; + +// console.log("Fetching data from:", requestUrl); + +// const controller = new AbortController(); +// const timeout = setTimeout(() => controller.abort(), 90000); // 10 seconds timeout + +// const response = await fetch(requestUrl, { +// method: "GET", +// signal: controller.signal, +// }); + +// clearTimeout(timeout); + +// if (!response.ok) { +// throw new Error(`HTTP Error: ${response.status} ${response.statusText}`); +// } + +// const result = await response.json(); + +// if (!result?.ListResult || !Array.isArray(result.ListResult)) { +// return { error: "Invalid API response structure" }; +// } + +// if (result.ListResult.length === 0) { +// return { error: "No records found" }; +// } + +// // Ensure proper type comparison and collect all matches +// const matchingRecords = result.ListResult.filter( +// (item: any) => String(item.GISID).trim() === String(GISID).trim() +// ); + +// return matchingRecords.length > 0 ? matchingRecords : { error: "GISID not found in results" }; +// } catch (error: any) { +// if (error.name === "AbortError") { +// return { error: "Request timed out" }; +// } +// console.error("Error fetching data:", error.message); +// return { error: error.message }; +// } +// }; + +// async function fetchTradeLicenseDetails(billNumber, clickedFeatDet) { +// try { +// // Normalize zone/ward (ensure leading 'N' and padding) +// const rawZone = (clickedFeatDet?.[0]?.zone_number_mis || clickedFeatDet?.[0]?.zone_number || '').toString(); +// const rawWard = (clickedFeatDet?.[0]?.ward_number_mis || clickedFeatDet?.[0]?.ward_number || '').toString(); + +// const zone = rawZone.startsWith('N') ? rawZone : 'N' + rawZone.padStart(2, '0'); +// const ward = rawWard.startsWith('N') ? rawWard : 'N' + rawWard.padStart(3, '0'); + +// // First get prof/trade data for this bill +// const profResp = await fetch( +// `https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=common_api&jsonResp=Yes&subService=getProfTradedata&propid=${encodeURIComponent(billNumber)}` +// ); +// const profData = await profResp.json(); + +// if (!profData?.ListResult || !Array.isArray(profData.ListResult)) { +// return `
No professional/trade data available for bill ${billNumber}
`; +// } + +// // filter only trade license items +// const tradeItems = profData.ListResult.filter(it => it.SOURCE === "TRADELICENSE"); +// const profTaxItems = profData.ListResult.filter(it => it.SOURCE === "PROFTAX"); +// console.log("profItems",profTaxItems) + +// // Track PTNAN used in trade licenses +// let collectedPTNAN = new Set(); +// if (tradeItems.length === 0) { +// return `
No trade-license items found for bill ${billNumber}
`; +// } + +// let html = `
Trade License lookups (zone: ${zone}, ward: ${ward}):
`; + +// // Query getTradeLicensedata for each trade item +// for (const item of tradeItems) { +// const licenseNumber = +// item.LICENSE_NUMBER || +// item.licenseNumber || +// item.LICENSE_NO || +// item.LICENCE_NUMBER || +// item.licence_no || +// item.ID; + +// const url = `https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=common_api&jsonResp=Yes&subService=getTradeLicensedata&zone=${encodeURIComponent(zone)}&ward=${encodeURIComponent(ward)}&licenseNumber=${encodeURIComponent(licenseNumber)}`; + +// try { +// const resp = await fetch(url, { method: 'GET' }); +// const json = await resp.json(); + +// html += `
`; +// html += `
Trade licenseNumber: ${licenseNumber}
`; + +// if (json?.ListResult && Array.isArray(json.ListResult) && json.ListResult.length > 0) { +// for (const lic of json.ListResult) { +// // ---- Trade License Details ---- +// html += ` +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +//
Ward / Zone${lic.WARD} / ${lic.ZONE}
Trade License No${lic.LICENSE_NUMBER}
PT Number${lic.PTNAN}
Establishment${lic.ESTABLISHMENT_NAME}
Trade Nature${lic.TRADE_NAME}
Applicant${lic.APPLICANT_NAME} ${lic.FATHER_NAME ? `(S/o: ${lic.FATHER_NAME})` : ''}
Address${lic.APPLICANT_ADDRESS}
Expiry Date${lic.LIC_EXPIRY_DATE?.split(" ")[0]}
Total Fee₹${lic.TOTAL_FEE}
+// `; + +// // ---- Professional Tax Details ---- +// if (lic.PTNAN) { +// collectedPTNAN.add(lic.PTNAN); +// try { +// const ptUrl = `https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=common_api&jsonResp=Yes&subService=getProfessionalTaxData&zone=${encodeURIComponent(lic.ZONE)}&ward=${encodeURIComponent(lic.WARD)}&ptnan=${encodeURIComponent(lic.PTNAN)}`; +// const ptResp = await fetch(ptUrl, { method: "GET" }); +// const ptJson = await ptResp.json(); + +// if (ptJson?.ListResult && Array.isArray(ptJson.ListResult) && ptJson.ListResult.length > 0) { +// for (const pt of ptJson.ListResult) { +// html += ` +//
Professional Tax Details
+// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +//
PTNAN${pt.PTNAN}
Name${pt.NAME}
Area${pt.AREA}
Address${pt.ADDRESS}
Locality${pt.LOCALITY || "N/A"}
Street${pt.STREET}
Ward / Zone${pt.WARD} / ${pt.ZONE}
Demand₹${pt.DEMAND}
Property Tax No${pt.PROPERTYTAX_NUMBER}
Contact${pt.CONTACT_NUMBER || "N/A"}
Created Date${pt.CREATEDDATE}
+// `; +// } +// } else { +// html += `
No Professional Tax data found for PTNAN ${lic.PTNAN}
`; +// } +// } catch (err) { +// console.error("Error fetching professional tax data", err); +// html += `
Error fetching Professional Tax for PTNAN ${lic.PTNAN}
`; +// } +// } +// } +// } else if (json?.ResultStatus === false && json?.Message) { +// html += `
API returned: ${json.Message}
`; +// } else { +// html += `
No records found for licenseNumber ${licenseNumber}
`; +// } + +// html += `
`; +// } catch (err) { +// console.error('Error fetching trade license data', err); +// html += `
Error fetching trade license for ${licenseNumber}
`; +// } +// } +// // console.log("collectedPTNAN",collectedPTNAN) +// // ✅ SHOW NOT LINKED PROFTAX AT END ONLY +// let remainingPT = profTaxItems.filter(pt => !collectedPTNAN.has(pt.ID)); + +// // ✅ REMAINING PROFTAX → FETCH FULL DETAILS USING API 3 +// // let remainingPT = profTaxItems.filter(pt => !collectedPTNAN.has(pt.ID)); + +// if (remainingPT.length > 0) { +// html += ` +//
+// Other Professional Tax +//
+// `; + +// for (const ptItem of remainingPT) { +// try { +// const ptId = ptItem.ID; + +// const ptUrl = `https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=common_api&jsonResp=Yes&subService=getProfessionalTaxData&zone=${encodeURIComponent(zone)}&ward=${encodeURIComponent(ward)}&ptnan=${encodeURIComponent(ptId)}`; + +// const ptResp = await fetch(ptUrl, { method: "GET" }); +// const ptJson = await ptResp.json(); + +// if (ptJson?.ListResult && ptJson.ListResult.length > 0) { +// const pt = ptJson.ListResult[0]; + +// html += ` +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +//
PTNAN${pt.PTNAN}
Name${pt.NAME}
Area${pt.AREA}
Address${pt.ADDRESS}
Street${pt.STREET}
Ward / Zone${pt.WARD} / ${pt.ZONE}
Demand₹${pt.DEMAND}
Property Tax No${pt.PROPERTYTAX_NUMBER}
+// `; +// } else { +// html += `
No PT data found for ${ptId}
`; +// } +// } catch (err) { +// console.error("Error fetching remaining PT", err); +// html += `
Error fetching PT for ${ptItem.ID}
`; +// } +// } +// } + +// return html; +// } catch (err) { +// console.error('fetchTradeLicenseDetails error', err); +// return `
Error while fetching trade license details
`; +// } +// } + +// async function fetchProfessionalTaxDetails(ptnan, zone, ward) { +// try { +// const url = `https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=common_api&jsonResp=Yes&subService=getProfessionalTaxData&zone=${encodeURIComponent(zone)}&ward=${encodeURIComponent(ward)}&ptnan=${encodeURIComponent(ptnan)}`; + +// const resp = await fetch(url, { method: "GET" }); +// const json = await resp.json(); + +// let html = `
Professional Tax Details (zone: ${zone}, ward: ${ward}, PTNAN: ${ptnan}):
`; + +// if (json?.ListResult && Array.isArray(json.ListResult) && json.ListResult.length > 0) { +// for (const item of json.ListResult) { +// html += ` +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +//
PTNAN${item.PTNAN}
Name${item.NAME}
Area${item.AREA}
Address${item.ADDRESS}
Locality${item.LOCALITY || "N/A"}
Street${item.STREET}
Ward / Zone${item.WARD} / ${item.ZONE}
Demand₹${item.DEMAND}
Property Tax No${item.PROPERTYTAX_NUMBER}
Contact${item.CONTACT_NUMBER || "N/A"}
Created Date${item.CREATEDDATE}
+// `; +// } +// } else if (json?.Message) { +// html += `
API returned: ${json.Message}
`; +// } else { +// html += `
No Professional Tax records found for PTNAN ${ptnan}
`; +// } + +// return html; +// } catch (err) { +// console.error("Error fetching professional tax data", err); +// return `
Error fetching Professional Tax details for PTNAN ${ptnan}
`; +// } +// } + + + +// async function getTradeAssessmentHTML(billNumber) { +// let html = ''; + +// try { +// const profTradeResponse = await fetch( +// `https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=common_api&jsonResp=Yes&subService=getProfTradedata&propid=${billNumber}` +// ); +// const profData = await profTradeResponse.json(); + +// if (profData?.ResultStatus === true && Array.isArray(profData.ListResult)) { +// const tradeItems = profData.ListResult.filter(item => item.SOURCE === "TRADELICENSE"); +// const profItems = profData.ListResult.filter(item => item.SOURCE === "PROFTAX"); + + +// } else { +// // html += `
No Professional Trade Assessment data found.
`; +// } +// } catch (err) { +// html += `
Error fetching trade data
`; +// } + +// return html; +// } + + +// async function buildCustomContent(clickedFeatDet) { +// console.log(clickedFeatDet) +// // const billNumbers = await fetchBillNumbers(clickedFeatDet[0].gcc_gis_id); +// // const tradeDetails = await fetchTradeDetails(clickedFeatDet[0].gcc_gis_id); +// // const assessmentCount = await fetchAssessmentCount(clickedFeatDet[0].gcc_gis_id); +// const directionUrl = await generateDirectionUrl(clickedFeatDet[1]); +// // const geocode=getGoogleMapsUrl(clickedFeatDet[1]) +// // const tradeCount = await fetchTradeCount(clickedFeatDet[0].gcc_gis_id); +// // const professionCount = await fetchProfessionCount(clickedFeatDet[0].gcc_gis_id); +// // const maxFloor = await fetchMaxFloor(clickedFeatDet[0].gcc_gis_id); + + + +// // const new_api = await fetchGISIDFetch_new_erp({ +// // Zone: "N02", +// // ward: "N020", +// // area: "MANALI", +// // loc: "VIMALAPURAM", +// // street: "VENUGOPAL STREET", +// // GISID: "G-020-23-01149" +// // }); + + +// const zoneNumber = clickedFeatDet[0].zone_number; +// const formattedZone = "N" + zoneNumber; + +// const wardNumber = clickedFeatDet[0].ward_number; +// const formattedward = "N" + wardNumber; +// const new_api = await fetchGISIDFetch_new_erp({ +// Zone: clickedFeatDet[0].zone_number_mis || formattedZone, +// ward: clickedFeatDet[0].ward_number_mis || formattedward , +// area: clickedFeatDet[0].area_mis, +// loc: clickedFeatDet[0].locality_mis, +// street: clickedFeatDet[0].street_mis, +// GISID: clickedFeatDet[0].gcc_gis_id +// }); +// console.log(new_api); + +// const usage = await fetchSystemPropertyUsage(clickedFeatDet[0].gcc_gis_id); + +// let customContent = ` +// +// +// +// +// +// +// +// + + +//
Zone Number${clickedFeatDet[0].zone_number}
Ward Number${clickedFeatDet[0].ward_number}
Area${clickedFeatDet[0].area_name}
Locality${clickedFeatDet[0].locality}
Road Name${clickedFeatDet[0].road_name}
GIS Id${clickedFeatDet[0].gcc_gis_id}
Locate In MapLocate In Map
+ + + +// `; + +// if (new_api) { +// if (new_api.error) { +// let errorMessage = new_api.error === "Request timed out" +// ? "The ERP API encountered a timeout error." +// : `Error: ${new_api.error}`; + +// customContent += `

${errorMessage}

`; +// } else { +// // Ensure `new_api` is always treated as an array +// const records = Array.isArray(new_api) ? new_api : [new_api]; + +// customContent += `
`; + + +// customContent += ` +//

+// Note: The below property details were fetched from ERP API. +//

+// `; + +// for (const record of records) { +// const billNumber = record.BILL_NUMBER || 'N/A'; + +// customContent += ` +//
+// +// Bill Number: ${billNumber} +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +//
Bill No:${billNumber}
Active Status:${record.ACTIVE_STATUS || 'N/A'}
Zone:${record.ZONE || 'N/A'}
Ward:${record.WARD || 'N/A'}
Area:${record.AREA || 'N/A'}
Locality:${record.LOCALITY || 'N/A'}
Road Name:${record.STREET || 'N/A'}
House No:${record.HOUSENO || 'N/A'}
Old House No:${record.OLD_HOUSENO || 'N/A'}
Owner Name:${record.OWNER_NAME || 'N/A'}
Property Type:${record.PROPERTY_TYPE || 'N/A'}
Property Usage:${record.USG_NAME || 'N/A'}
Total Built-up Area:${record.TOTAL_BUILTUP_AREA || 'N/A'}
Sital Area:${record.SITAL_AREA || 'N/A'}
Total Demand:${record.TOTAL_DEMAND || 'N/A'}
Total Collection:${record.TOTAL_COLLECTION || 'N/A'}
Total Balance:${record.TOTAL_BALANCE || 'N/A'}
Current Demand:${record.CURRENT_DEMAND || 'N/A'}
Current Collection:${record.CURRENT_COLL || 'N/A'}
Current Balance:${record.CURRENT_BALANCE || 'N/A'}
Arrear Demand:${record.ARREAR_DEMAND || 'N/A'}
Arrear Collection:${record.ARREAR_COLL || 'N/A'}
Arrear Balance:${record.ARREAR_BALANCE || 'N/A'}
Mobile No:${record.MOBILE_NO || 'N/A'}
+// `; + +// if (billNumber !== 'N/A') { +// const tradeHTML = await getTradeAssessmentHTML(billNumber); +// customContent += tradeHTML; +// } +// // NEW: fetch trade license details using zone/ward from clickedFeatDet and license (or ID fallback) +// const tradeLicenseHTML = await fetchTradeLicenseDetails(billNumber, clickedFeatDet); +// customContent += tradeLicenseHTML; + + +// customContent += `
`; +// } + +// customContent += `
`; +// } +// } else { +// customContent += `

No records found

`; +// } + +// return customContent; +// } + +// const clearGraphic = () => { +// jimuMapView?.view.graphics.removeAll(); +// setPopupContent(null); + +// }; +// const handleMapView = (view) => { +// setJimuMapView(view) +// setMapView(view) +// // if (!jimuMapView && view) { + +// // let dispatchItem = { 'view': view } + +// // getAppStore().dispatch( +// // appActions.widgetStatePropChange(props.id, 'sharedData.queryString', dispatchItem) +// // ); +// // alert('dispatched item') +// // } + + +// } +// return ( +//
+// {/* JimuMapViewComponent to integrate map in Experience Builder */} + +// {props.useMapWidgetIds && props.useMapWidgetIds.length === 1 && ( +// + +// )} + + +//
+// ); +// }; + +// export default Popup; + +import React, { useEffect, useState, useRef } from 'react'; +import { JimuMapViewComponent, JimuMapView } from 'jimu-arcgis'; +import { fetchGISIDFetch, fetchBillNoData_New } from '../../../utils/queries'; +import './custom-popup.css'; +import FeatureLayer from '@arcgis/core/layers/FeatureLayer' +import { useMapView } from '../../../utils/mapviewservice'; // Import the context +import { AllWidgetProps, appActions, getAppStore, IMState } from 'jimu-core'; +import { useSelector } from 'react-redux'; +import CustomContent from '@arcgis/core/popup/content/CustomContent'; + +const Popup = (props: AllWidgetProps) => { + const [jimuMapView, setJimuMapView] = useState(null); + const [popupContent, setPopupContent] = useState(null); + const [clickHandle, setClickHandle] = useState(null); // Store event handle + const [buildingPopup, storeBuildingPopup] = useState(null); + const [buldingPopupContent, storePopupContent_Building] = useState(null) + const [buildingLayer, storeBuildingLayer] = useState(null) + const [clickedFeatDet, storeclickedFeatureDet] = useState(null) + const isVisibleRef = useRef(false); + const [definitionExpr, setBuildDefinition] = useState(null) + const [definitionSetActive, flag_definitionSet] = useState(null) + const [isLoading, setIsLoading] = useState(null) + const { setMapView } = useMapView(); + let loadingTimeout; + + const Establishment_TABLE = new FeatureLayer({ + url: "https://gisgcc.chennaicorporation.gov.in/server/rest/services/Revenue/SurveyTables/FeatureServer/1" + }) + const Property_TABLE = new FeatureLayer({ + url: 'https://gisgcc.chennaicorporation.gov.in/server/rest/services/Revenue/Buildings_Revenue_MIS/MapServer/5' + }) + const Professional_TABLE = new FeatureLayer({ + url: "https://gisgcc.chennaicorporation.gov.in/server/rest/services/Revenue/SurveyTables/FeatureServer/3" + }) + const Floor_TABLE = new FeatureLayer({ + url: "https://gisgcc.chennaicorporation.gov.in/server/rest/services/Revenue/SurveyTables/FeatureServer/2" + }) + + const monitoredWidgetIds = ['widget_58', 'widget_59', 'widget_72', 'widget_73', 'widget_66', 'widget_67']; + + const [isVisible, setIsVisible] = useState(false); + + const checkMonitoredWidgets = (): boolean => { + const widgetStates = getAppStore().getState().widgetsRuntimeInfo; + return monitoredWidgetIds.some( + (widgetId) => + widgetStates[widgetId] && widgetStates[widgetId]?.state === 'OPENED' + ); + }; + + const updateDependentWidgetVisibility = (): void => { + const isAnyWidgetOpen = checkMonitoredWidgets(); + setIsVisible(isAnyWidgetOpen); + }; + + useEffect(() => { + const storeUnsubscribe = getAppStore().subscribe(() => { + updateDependentWidgetVisibility(); + }); + + return () => { + storeUnsubscribe(); + }; + }, []); + + useEffect(() => { + let cleanup; + + if (jimuMapView) { + + jimuMapView.view.on('popup-open', () => { + alert('popup open triggered') + console.log('Popup has been opened!'); + }); + jimuMapView.view.on('popup-close', () => { + console.log('Popup has been closed!'); + }); + + if (jimuMapView && !isVisible) { + fetchBuildingLyr() + } + } + }, [jimuMapView]); + + const BuildDefinition_Usage = useSelector( + (state: IMState) => state.widgetsState?.['widget_59']?.state?.building + ); + const BuildDefinition_Type = useSelector( + (state: IMState) => state.widgetsState?.['widget_58']?.state?.building + ); + const BuildDefinition_RevenueFilter = useSelector( + (state: IMState) => state.widgetsState?.['widget_67']?.state?.building + ); + const BuildDefinition_CommonQry = useSelector( + (state: IMState) => state.widgetsState?.['widget_36']?.state?.building + ); + const BuildDefinition_floor = useSelector( + (state: IMState) => state.widgetsState?.['widget_66']?.state?.building + ); + + useEffect(() => { + if (BuildDefinition_Usage) { + setBuildDefinition(BuildDefinition_Usage) + buildingLayer.refresh() + } + }, [BuildDefinition_Usage]) + + useEffect(() => { + if (BuildDefinition_Type) { + setBuildDefinition(BuildDefinition_Type) + buildingLayer.refresh() + } + }, [BuildDefinition_Type]) + + useEffect(() => { + if (BuildDefinition_RevenueFilter) { + setBuildDefinition(BuildDefinition_RevenueFilter) + buildingLayer.refresh() + } + }, [BuildDefinition_RevenueFilter]) + + useEffect(() => { + if (BuildDefinition_CommonQry) { + setBuildDefinition(BuildDefinition_CommonQry) + buildingLayer.refresh() + } + }, [BuildDefinition_CommonQry]) + useEffect(() => { + if (BuildDefinition_floor) { + setBuildDefinition(BuildDefinition_floor) + buildingLayer.refresh() + } + }, [BuildDefinition_floor]) + + useEffect(() => { + if (definitionSetActive) { + if (buildingLayer.definitionExpression !== definitionExpr) { + buildingLayer.when(() => { + buildingLayer.defintionExpression = definitionExpr + }) + } + } + }, [definitionSetActive]) + + useEffect(() => { + let watchHandle + if (buildingLayer && jimuMapView) { + jimuMapView.view.whenLayerView(buildingLayer).then((layerView) => { + watchHandle = layerView.watch('updating', (isUpdating) => { + if (isUpdating) { + if (!isLoading) { + setIsLoading(true); + } + } else { + clearTimeout(loadingTimeout); + loadingTimeout = setTimeout(() => { + setIsLoading(false); + }, 300); + } + + buildingLayer.when(() => { + if (buildingLayer.definitionExpression !== definitionExpr) { + buildingLayer.definitionExpression = definitionExpr; + } + }); + }); + }); + } + + return () => { + if (watchHandle) { + watchHandle.remove(); + } + clearTimeout(loadingTimeout); + }; + + }, [definitionExpr]) + + useEffect(() => { + isVisibleRef.current = isVisible; + }, [isVisible]); + + const fetchSystemPropertyUsage = async (gisId) => { + let response = await fetchBillNoData_New(gisId); + if (response && response.length > 0) { + return response; + } else { + return null + } + }; + async function queryRelatedRecords(table, whereClause, id) { + let query = table.createQuery() + query.where = whereClause + let data = await table.queryFeatures(query) + if (data.features.length > 0) { + return data.features.map(feature => feature.attributes); + } + } + async function fetchTradeDetails(gccGisId) { + const relatedBills = await queryRelatedRecords(Establishment_TABLE, `new_formatted_gis_id = '${gccGisId}'`, 1); + let allTradeDetails = [] + if (relatedBills) { + relatedBills.forEach(bill => { + allTradeDetails.push(`Establishment Name: ${bill.establishment_name}, Trade Nature: ${bill.trade_nature_updated}`); + }); + } + return allTradeDetails.length > 0 ? allTradeDetails.join('
') : "N/A."; + } + + async function fetchBillNumbers(gccGisId) { + const relatedBills = await queryRelatedRecords(Property_TABLE, `new_formatted_gis_id = '${gccGisId}'`, 4); + let allBills = []; + if (relatedBills) { + relatedBills.forEach(bill => { + allBills.push(bill.bill_no); + }); + } + return allBills.length > 0 ? allBills.join('
') : "N/A"; + } + + async function fetchProfessionCount(gccGisId) { + const relatedBills = await queryRelatedRecords(Professional_TABLE, `new_formatted_gis_id = '${gccGisId}'`, 1); + let count + if (relatedBills) { + count = relatedBills.length; + } + return count === undefined || count === 0 ? "N/A" : count; + } + + async function fetchMaxFloor(gccGisId) { + const floors = await queryRelatedRecords(Floor_TABLE, `new_formatted_gis_id = '${gccGisId}'`, 2); + let maxFloor + if (floors) { + maxFloor = Math.max(...floors.map(floor => floor.gcc_floor_id), 0); + } + return maxFloor && maxFloor > 0 ? `${maxFloor}th Floor` : "N/A"; + } + + async function fetchTradeCount(gccGisId) { + const relatedBills = await queryRelatedRecords(Establishment_TABLE, `new_formatted_gis_id = '${gccGisId}'`, 1); + let count + if (relatedBills) { + count = relatedBills.length; + } + return count === undefined || count === 0 ? "N/A" : count; + } + + async function fetchAssessmentCount(gccGisId) { + const relatedBills = await queryRelatedRecords(Property_TABLE, `new_formatted_gis_id = '${gccGisId}'`, 4); + return relatedBills != undefined && relatedBills.length > 0 ? relatedBills.length : "N/A"; + } + + const fetchBuildingLyr = () => { + if (jimuMapView) { + const LandCoverLyr = jimuMapView.view.map.layers.find(layer => layer.title === 'LandCover') + if (!LandCoverLyr) { + console.log('LandCover Layer not found in the web map') + } else { + const buildingLyr_Final = LandCoverLyr.layers.find(layer => layer.title === 'Buildings') + + if (buildingLyr_Final) { + storeBuildingLayer(buildingLyr_Final) + } else { + storeBuildingLayer(null) + console.log('Buildings sublayer not found') + } + } + } + } + + const handleMapClick = (jmv) => { + try { + if (jmv) { + jmv.view.on('click', async (evt) => { + const response = await jmv.view.hitTest(evt); + if (response.results.length > 0) { + if (buildingLayer) { + const buildingsLayerResult = response.results.find(result => result.layer && result.layer.title === 'Buildings'); + if (buildingsLayerResult) { + let definition = buildingLayer.definitionExpression + setBuildDefinition(definition) + + const objectId = buildingsLayerResult.graphic.attributes.objectid; + const query = buildingLayer.createQuery(); + query.objectIds = [objectId]; + query.outFields = ['*']; + const queryResponse = await buildingLayer.queryFeatures(query); + + if (queryResponse.features.length > 0) { + const fullFeature = queryResponse.features[0]; + const gcc_gis_id = fullFeature.attributes.gcc_gis_id; + if (gcc_gis_id) { + storeclickedFeatureDet([fullFeature.attributes, evt.mapPoint]) + } + } + } + } + } + else + return + }); + } + } catch (err) { + console.error('HitTest error:', err); + } + }; + + useEffect(() => { + let cleanup; + if (buildingLayer) { + cleanup = handleMapClick(jimuMapView); + } + }, [buildingLayer]) + + useEffect(() => { + }, [buildingLayer]) + + useEffect(() => { + if (Array.isArray(clickedFeatDet) && clickedFeatDet.length > 0) { + + const popupTemplate = { + + title: 'Building Info', + + content: [ + + new CustomContent({ + + outFields: ['*'], + + creator: async () => { + + const container = + document.createElement('div'); + + // ========================================== + // EXISTING BUILDING CONTENT + // ========================================== + + const existingContent = + await buildCustomContent(clickedFeatDet); + + const existingDiv = + document.createElement('div'); + + existingDiv.innerHTML = + existingContent; + + container.appendChild(existingDiv); + + // ========================================== + // BILL SEARCH CONTROL + // ========================================== + + const zoneNumber = clickedFeatDet[0].zone_number_mis || clickedFeatDet[0].zone_number; + const wardNumber = clickedFeatDet[0].ward_number_mis || clickedFeatDet[0].ward_number; + const area = clickedFeatDet[0].area_mis || clickedFeatDet[0].area_name; + const locality = clickedFeatDet[0].locality_mis || clickedFeatDet[0].locality; + const roadName = clickedFeatDet[0].street_mis || clickedFeatDet[0].road_name; + const gisId = clickedFeatDet[0].gcc_gis_id; + + const searchControl = + createBillSearchControl(zoneNumber, wardNumber, area, locality, roadName, gisId); + + container.appendChild(searchControl); + + return container; + } + + }) + + ], + actions: [] + }; + + buildingLayer.popupTemplate = + popupTemplate; + + } + + }, [clickedFeatDet]); + + async function getPopupContent(buildingLayerSource) { + const popupTemplate = buildingLayerSource.graphic.layer.popupTemplate; + storeBuildingPopup(popupTemplate) + if (popupTemplate) { + const content = await popupTemplate.content + return content + } + } + function generateDirectionUrl(feature) { + const { x, y, spatialReference } = feature; + + let latitude, longitude; + if (spatialReference.wkid === 4326) { + latitude = y; + longitude = x; + } else if (spatialReference.wkid === 102100) { + const auxSphereToLatLon = (x, y) => { + const rMajor = 6378137; + const shift = Math.PI * rMajor; + longitude = (x / shift) * 180.0; + latitude = (y / shift) * 180.0; + latitude = (180 / Math.PI) * (2 * Math.atan(Math.exp(latitude * Math.PI / 180.0)) - Math.PI / 2.0); + }; + auxSphereToLatLon(x, y); + } + return "https://www.google.com/maps?q=" + (latitude) + "," + (longitude); + } + + const test = async (params: { Zone: string; ward: string; area: string; loc: string; street: string; GISID: string }) => { + try { + const newAPIEndPoint = "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=common_api&jsonResp=Yes&subService=getPropertyByGis"; + const queryString = new URLSearchParams(params).toString(); + const requestUrl = `${newAPIEndPoint}&${queryString}`; + + const response = await fetch(requestUrl, { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }); + + if (!response.ok) { + throw new Error(`HTTP error! Status: ${response.status}`); + } + + const data = await response.json(); + + if (data && data.ListResult && Object.keys(data.ListResult).length > 0) { + return data.ListResult; + } + + return []; + } catch (err) { + console.error("Error fetching data:", err); + return []; + } + }; + + const fetchGISIDFetch_new_erp = async (params: { + Zone: string; + ward: string; + area?: string | null; + loc?: string | null; + street?: string | null; + GISID?: string | null; + }): Promise => { + try { + const baseUrl = + "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=common_api&jsonResp=Yes&subService=getPropertyByGis"; + + const { GISID, ...queryParams } = params; + + const filteredParams = Object.fromEntries( + Object.entries(queryParams).filter( + ([key, value]) => + (key === "Zone" || key === "ward") || (value !== null && value !== undefined && value !== "") + ) + ); + + const queryString = new URLSearchParams(filteredParams as Record).toString(); + const requestUrl = `${baseUrl}&${queryString}`; + + console.log("Fetching data from:", requestUrl); + + const controller = new AbortController(); + const timeout = setTimeout(() => controller.abort(), 90000); + + const response = await fetch(requestUrl, { + method: "GET", + signal: controller.signal, + }); + + clearTimeout(timeout); + + if (!response.ok) { + throw new Error(`HTTP Error: ${response.status} ${response.statusText}`); + } + + const result = await response.json(); + + if (!result?.ListResult || !Array.isArray(result.ListResult)) { + return { error: "Invalid API response structure" }; + } + + if (result.ListResult.length === 0) { + return { error: "No records found" }; + } + + const matchingRecords = result.ListResult.filter( + (item: any) => String(item.GISID).trim() === String(GISID).trim() + ); + + return matchingRecords.length > 0 ? matchingRecords : { error: "GISID not found in results" }; + } catch (error: any) { + if (error.name === "AbortError") { + return { error: "Request timed out" }; + } + console.error("Error fetching data:", error.message); + return { error: error.message }; + } + }; + + async function fetchTradeLicenseDetails(billNumber, clickedFeatDet) { + try { + const rawZone = (clickedFeatDet?.[0]?.zone_number_mis || clickedFeatDet?.[0]?.zone_number || '').toString(); + const rawWard = (clickedFeatDet?.[0]?.ward_number_mis || clickedFeatDet?.[0]?.ward_number || '').toString(); + + const zone = rawZone.startsWith('N') ? rawZone : 'N' + rawZone.padStart(2, '0'); + const ward = rawWard.startsWith('N') ? rawWard : 'N' + rawWard.padStart(3, '0'); + + const profResp = await fetch( + `https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=common_api&jsonResp=Yes&subService=getProfTradedata&propid=${encodeURIComponent(billNumber)}` + ); + const profData = await profResp.json(); + + if (!profData?.ListResult || !Array.isArray(profData.ListResult)) { + return `
No professional/trade data available for bill ${billNumber}
`; + } + + const tradeItems = profData.ListResult.filter(it => it.SOURCE === "TRADELICENSE"); + const profTaxItems = profData.ListResult.filter(it => it.SOURCE === "PROFTAX"); + console.log("profItems", profTaxItems) + + let collectedPTNAN = new Set(); + if (tradeItems.length === 0) { + return `
No trade-license items found for bill ${billNumber}
`; + } + + let html = `
Trade License lookups (zone: ${zone}, ward: ${ward}):
`; + + for (const item of tradeItems) { + const licenseNumber = + item.LICENSE_NUMBER || + item.licenseNumber || + item.LICENSE_NO || + item.LICENCE_NUMBER || + item.licence_no || + item.ID; + + const url = `https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=common_api&jsonResp=Yes&subService=getTradeLicensedata&zone=${encodeURIComponent(zone)}&ward=${encodeURIComponent(ward)}&licenseNumber=${encodeURIComponent(licenseNumber)}`; + + try { + const resp = await fetch(url, { method: 'GET' }); + const json = await resp.json(); + + html += `
`; + html += `
Trade licenseNumber: ${licenseNumber}
`; + + if (json?.ListResult && Array.isArray(json.ListResult) && json.ListResult.length > 0) { + for (const lic of json.ListResult) { + html += ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ward / Zone${lic.WARD} / ${lic.ZONE}
Trade License No${lic.LICENSE_NUMBER}
PT Number${lic.PTNAN}
Establishment${lic.ESTABLISHMENT_NAME}
Trade Nature${lic.TRADE_NAME}
Applicant${lic.APPLICANT_NAME} ${lic.FATHER_NAME ? `(S/o: ${lic.FATHER_NAME})` : ''}
Address${lic.APPLICANT_ADDRESS}
Expiry Date${lic.LIC_EXPIRY_DATE?.split(" ")[0]}
Total Fee₹${lic.TOTAL_FEE}
+ `; + + if (lic.PTNAN) { + collectedPTNAN.add(lic.PTNAN); + try { + const ptUrl = `https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=common_api&jsonResp=Yes&subService=getProfessionalTaxData&zone=${encodeURIComponent(lic.ZONE)}&ward=${encodeURIComponent(lic.WARD)}&ptnan=${encodeURIComponent(lic.PTNAN)}`; + const ptResp = await fetch(ptUrl, { method: "GET" }); + const ptJson = await ptResp.json(); + + if (ptJson?.ListResult && Array.isArray(ptJson.ListResult) && ptJson.ListResult.length > 0) { + for (const pt of ptJson.ListResult) { + html += ` +
Professional Tax Details
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PTNAN${pt.PTNAN}
Name${pt.NAME}
Area${pt.AREA}
Address${pt.ADDRESS}
Locality${pt.LOCALITY || "N/A"}
Street${pt.STREET}
Ward / Zone${pt.WARD} / ${pt.ZONE}
Demand₹${pt.DEMAND}
Property Tax No${pt.PROPERTYTAX_NUMBER}
Contact${pt.CONTACT_NUMBER || "N/A"}
Created Date${pt.CREATEDDATE}
+ `; + } + } else { + html += `
No Professional Tax data found for PTNAN ${lic.PTNAN}
`; + } + } catch (err) { + console.error("Error fetching professional tax data", err); + html += `
Error fetching Professional Tax for PTNAN ${lic.PTNAN}
`; + } + } + } + } else if (json?.ResultStatus === false && json?.Message) { + html += `
API returned: ${json.Message}
`; + } else { + html += `
No records found for licenseNumber ${licenseNumber}
`; + } + + html += `
`; + } catch (err) { + console.error('Error fetching trade license data', err); + html += `
Error fetching trade license for ${licenseNumber}
`; + } + } + let remainingPT = profTaxItems.filter(pt => !collectedPTNAN.has(pt.ID)); + + if (remainingPT.length > 0) { + html += ` +
+ Other Professional Tax +
+ `; + + for (const ptItem of remainingPT) { + try { + const ptId = ptItem.ID; + + const ptUrl = `https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=common_api&jsonResp=Yes&subService=getProfessionalTaxData&zone=${encodeURIComponent(zone)}&ward=${encodeURIComponent(ward)}&ptnan=${encodeURIComponent(ptId)}`; + + const ptResp = await fetch(ptUrl, { method: "GET" }); + const ptJson = await ptResp.json(); + + if (ptJson?.ListResult && ptJson.ListResult.length > 0) { + const pt = ptJson.ListResult[0]; + + html += ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PTNAN${pt.PTNAN}
Name${pt.NAME}
Area${pt.AREA}
Address${pt.ADDRESS}
Street${pt.STREET}
Ward / Zone${pt.WARD} / ${pt.ZONE}
Demand₹${pt.DEMAND}
Property Tax No${pt.PROPERTYTAX_NUMBER}
+ `; + } else { + html += `
No PT data found for ${ptId}
`; + } + } catch (err) { + console.error("Error fetching remaining PT", err); + html += `
Error fetching PT for ${ptItem.ID}
`; + } + } + } + + return html; + } catch (err) { + console.error('fetchTradeLicenseDetails error', err); + return `
Error while fetching trade license details
`; + } + } + + async function fetchProfessionalTaxDetails(ptnan, zone, ward) { + try { + const url = `https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=common_api&jsonResp=Yes&subService=getProfessionalTaxData&zone=${encodeURIComponent(zone)}&ward=${encodeURIComponent(ward)}&ptnan=${encodeURIComponent(ptnan)}`; + + const resp = await fetch(url, { method: "GET" }); + const json = await resp.json(); + + let html = `
Professional Tax Details (zone: ${zone}, ward: ${ward}, PTNAN: ${ptnan}):
`; + + if (json?.ListResult && Array.isArray(json.ListResult) && json.ListResult.length > 0) { + for (const item of json.ListResult) { + html += ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PTNAN${item.PTNAN}
Name${item.NAME}
Area${item.AREA}
Address${item.ADDRESS}
Locality${item.LOCALITY || "N/A"}
Street${item.STREET}
Ward / Zone${item.WARD} / ${item.ZONE}
Demand₹${item.DEMAND}
Property Tax No${item.PROPERTYTAX_NUMBER}
Contact${item.CONTACT_NUMBER || "N/A"}
Created Date${item.CREATEDDATE}
+ `; + } + } else if (json?.Message) { + html += `
API returned: ${json.Message}
`; + } else { + html += `
No Professional Tax records found for PTNAN ${ptnan}
`; + } + + return html; + } catch (err) { + console.error("Error fetching professional tax data", err); + return `
Error fetching Professional Tax details for PTNAN ${ptnan}
`; + } + } + + async function getTradeAssessmentHTML(billNumber) { + let html = ''; + + try { + const profTradeResponse = await fetch( + `https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=common_api&jsonResp=Yes&subService=getProfTradedata&propid=${billNumber}` + ); + const profData = await profTradeResponse.json(); + + if (profData?.ResultStatus === true && Array.isArray(profData.ListResult)) { + const tradeItems = profData.ListResult.filter(item => item.SOURCE === "TRADELICENSE"); + const profItems = profData.ListResult.filter(item => item.SOURCE === "PROFTAX"); + } else { + } + } catch (err) { + html += `
Error fetching trade data
`; + } + + return html; + } + + // ====================================================== + // BILL NUMBER FORMAT VALIDATION + // Expected: 09-121-01249-000 + // ====================================================== + function validateBillNumber(value: string): boolean { + return /^\d{2}-\d{3}-\d{5}-\d{3}$/.test(value.trim()); + } + + // ====================================================== + // CREATE BILL SEARCH CONTROL + // ====================================================== + function createBillSearchControl( + zoneNumber: string, + wardNumber: string, + area: string, + locality: string, + roadName: string, + gisId: string + ): HTMLElement { + + const container = document.createElement('div'); + + container.style.cssText = ` + margin: 12px 0; + padding: 10px; + border: 1px solid #d9d9d9; + border-radius: 6px; + background: #ffffff; + `; + + const title = document.createElement('div'); + + title.textContent = 'Search by Bill Number'; + + title.style.cssText = ` + font-weight: bold; + margin-bottom: 8px; + color: #444; + font-size: 14px; + `; + + const form = document.createElement('form'); + + form.style.cssText = ` + display: flex; + align-items: center; + gap: 8px; + `; + + const input = document.createElement('input'); + + input.type = 'text'; + input.placeholder = '09-121-01249-000'; + input.maxLength = 16; + + input.style.cssText = ` + flex: 1; + height: 34px; + padding: 6px 10px; + border: 1px solid #bdbdbd; + border-radius: 4px; + font-size: 14px; + box-sizing: border-box; + outline: none; + `; + + const button = document.createElement('button'); + + button.type = 'submit'; + button.textContent = 'Search'; + + button.style.cssText = ` + height: 34px; + padding: 0 16px; + border: none; + border-radius: 4px; + background: #1976d2; + color: white; + font-size: 14px; + cursor: pointer; + `; + + const error = document.createElement('div'); + + error.style.cssText = ` + display: none; + margin-top: 6px; + color: #d32f2f; + font-size: 12px; + `; + + // NEW: results box, where searchBillNumber() renders its output + const resultsBox = document.createElement('div'); + resultsBox.className = 'bill-search-results'; + + // ================================================= + // VALIDATE WHILE TYPING + // ================================================= + // ================================================= +// VALIDATE WHILE TYPING +// ================================================= +input.addEventListener('input', () => { + + const value = input.value.trim(); + + // ================================================= + // IMPORTANT: + // Clear previously searched bill immediately + // whenever the user changes the search text. + // This includes Backspace. + // ================================================= + resultsBox.innerHTML = ''; + + // Reset any previous result/error state + input.style.borderColor = '#bdbdbd'; + + error.style.display = 'none'; + error.textContent = ''; + + // ----------------------------------------------- + // EMPTY SEARCH BOX + // ----------------------------------------------- + if (value === '') { + return; + } + + // ----------------------------------------------- + // VALID BILL NUMBER + // ----------------------------------------------- + if (validateBillNumber(value)) { + + input.style.borderColor = '#4caf50'; + + error.style.display = 'none'; + error.textContent = ''; + + } else { + + // --------------------------------------------- + // INVALID / PARTIAL BILL NUMBER + // --------------------------------------------- + input.style.borderColor = '#d32f2f'; + + error.style.display = 'block'; + + error.textContent = + 'Invalid format. Expected: 09-121-01249-000'; + } + +}); + + // ================================================= + // SEARCH BUTTON + // ================================================= + form.addEventListener('submit', (event) => { + + event.preventDefault(); + + const billNumber = input.value.trim(); + + if (!billNumber) { + input.style.borderColor = '#d32f2f'; + error.style.display = 'block'; + error.textContent = 'Please enter a Bill Number'; + return; + } + + if (!validateBillNumber(billNumber)) { + input.style.borderColor = '#d32f2f'; + error.style.display = 'block'; + error.textContent = + 'Invalid format. Expected: 09-121-01249-000'; + + console.error('Invalid Bill Number:', billNumber); + return; + } + + input.style.borderColor = '#4caf50'; + error.style.display = 'none'; + + console.log('SEARCH BUTTON CLICKED'); + console.log('Bill Number:', billNumber); + + // ---------------------------------- + // REAL SEARCH FUNCTION + // ---------------------------------- + searchBillNumber(billNumber, zoneNumber, wardNumber, area, locality, roadName, gisId, resultsBox); + + }); + + form.appendChild(input); + form.appendChild(button); + + container.appendChild(title); + container.appendChild(form); + container.appendChild(error); + container.appendChild(resultsBox); // NEW + + return container; + } + + // ====================================================== +// CONFIRMATION POPUP: reason for selecting this bill +// ====================================================== +function openReasonConfirmationPopup( + billNumber: string, + gisId: string, + sourceCheckbox: HTMLInputElement +): void { + + const overlay = document.createElement('div'); + overlay.style.cssText = ` + position: fixed; + top: 0; left: 0; right: 0; bottom: 0; + background: rgba(0,0,0,0.4); + display: flex; + align-items: center; + justify-content: center; + z-index: 9999; + `; + + const modal = document.createElement('div'); + modal.style.cssText = ` + background: #fff; + border-radius: 8px; + padding: 18px 20px; + width: 300px; + box-shadow: 0 4px 16px rgba(0,0,0,0.25); + font-size: 14px; + `; + + const title = document.createElement('div'); + title.textContent = `Reason for Bill ${billNumber}`; + title.style.cssText = ` + font-weight: bold; + margin-bottom: 12px; + color: #333; + `; + + const optionsWrap = document.createElement('div'); + optionsWrap.style.cssText = ` + display: flex; + flex-direction: column; + gap: 8px; + margin-bottom: 16px; + `; + + const reasonName = `reason_${billNumber}_${Date.now()}`; + let selectedReason: string | null = null; + + const makeRadioOption = (label: string, value: string) => { + const row = document.createElement('label'); + row.style.cssText = ` + display: flex; + align-items: center; + gap: 8px; + cursor: pointer; + `; + + const radio = document.createElement('input'); + radio.type = 'radio'; + radio.name = reasonName; + radio.value = value; + + radio.addEventListener('change', () => { + if (radio.checked) selectedReason = value; + }); + + const text = document.createElement('span'); + text.textContent = label; + + row.appendChild(radio); + row.appendChild(text); + return row; + }; + + optionsWrap.appendChild(makeRadioOption('Usage Variance', 'USAGE_VARIANCE')); + optionsWrap.appendChild(makeRadioOption('Area Extent', 'AREA_EXTENT')); + + const errorMsg = document.createElement('div'); + errorMsg.style.cssText = ` + display: none; + color: #d32f2f; + font-size: 12px; + margin-bottom: 10px; + `; + errorMsg.textContent = 'Please select a reason.'; + + const buttonRow = document.createElement('div'); + buttonRow.style.cssText = ` + display: flex; + justify-content: flex-end; + gap: 8px; + `; + + const cancelBtn = document.createElement('button'); + cancelBtn.textContent = 'Cancel'; + cancelBtn.style.cssText = ` + padding: 6px 14px; + border: 1px solid #bdbdbd; + border-radius: 4px; + background: #fff; + cursor: pointer; + `; + cancelBtn.addEventListener('click', () => { + sourceCheckbox.checked = false; + document.body.removeChild(overlay); + }); + + const confirmBtn = document.createElement('button'); + confirmBtn.textContent = 'Confirm'; + confirmBtn.style.cssText = ` + padding: 6px 14px; + border: none; + border-radius: 4px; + background: #1976d2; + color: #fff; + cursor: pointer; + `; + confirmBtn.addEventListener('click', async () => { + if (!selectedReason) { + errorMsg.style.display = 'block'; + return; + } + + // TODO: persist selectedReason for (gisId, billNumber) — + // target FeatureLayer/table + field mapping to be decided next. + console.log('Confirmed reason:', { gisId, billNumber, selectedReason }); + + document.body.removeChild(overlay); + }); + + buttonRow.appendChild(cancelBtn); + buttonRow.appendChild(confirmBtn); + + modal.appendChild(title); + modal.appendChild(optionsWrap); + modal.appendChild(errorMsg); + modal.appendChild(buttonRow); + overlay.appendChild(modal); + + document.body.appendChild(overlay); +} + + // ====================================================== + // SEARCH PROPERTY BY BILL NUMBER + // ====================================================== + async function searchBillNumber( + billNumber: string, + zoneNumber: string | number, + wardNumber: string | number, + area: string, + locality: string, + roadName: string, + gisId: string, + resultsBox: HTMLElement + ): Promise { + + console.log("Searching Bill Number:", billNumber); + console.log("Zone:", zoneNumber, "Ward:", wardNumber, "GIS Id:", gisId); + + try { + + const formattedZone = + String(zoneNumber).startsWith("N") ? String(zoneNumber) : `N${zoneNumber}`; + + const formattedWard = + String(wardNumber).startsWith("N") ? String(wardNumber) : `N${wardNumber}`; + + const url = + `https://erp.chennaicorporation.gov.in/pgr/external/mobileservice` + + `?serviceId=common_api` + + `&jsonResp=Yes` + + `&subService=getPropertyByGis` + + `&Zone=${encodeURIComponent(formattedZone)}` + + `&ward=${encodeURIComponent(formattedWard)}`; + + console.log("ERP Bill Search URL:", url); + + const response = await fetch(url); + + if (!response.ok) { + throw new Error(`HTTP ${response.status}: ${response.statusText}`); + } + + const data = await response.json(); + + console.log("ERP API Response:", data); + + if (data?.error) { + resultsBox.innerHTML = ` +

${data.error}

+ `; + return; + } + + // ADDED — catches an API-level rejection distinctly from "no matches" + if (data?.ResultStatus === "false" || data?.ResultStatus === false) { + resultsBox.innerHTML = ` +

+ ERP API request failed (${data?.Message || "Unknown error"}). This usually means a token/access issue, not a missing record. +

+ `; + return; + } + + const records = Array.isArray(data?.ListResult) ? data.ListResult : []; + + if (records.length === 0) { + resultsBox.innerHTML = ` +

No property records found.

+ `; + return; + } + + const searchedBill = billNumber.trim().toUpperCase(); + + // Match on BOTH bill number AND GIS ID, so a bill number that + // belongs to a different property is correctly rejected. + const matchedRecord = records.find( + (record: any) => + String(record.BILL_NUMBER || "").trim().toUpperCase() === searchedBill && + String(record.GISID || "").trim().toUpperCase() === String(gisId || "").trim().toUpperCase() + ); + + if (!matchedRecord) { + resultsBox.innerHTML = ` +

+ Bill Number ${billNumber} does not belong to this property + (GIS Id: ${gisId}). +

+ `; + return; + } + + const record = matchedRecord; + const resultBillNumber = record.BILL_NUMBER || "N/A"; + + resultsBox.innerHTML = ` +
+

+ Property details fetched from ERP API. +

+
+ +
+ + Bill Number: ${resultBillNumber} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Bill No:${resultBillNumber}
Active Status:${record.ACTIVE_STATUS || "N/A"}
Zone:${record.ZONE || "N/A"}
Ward:${record.WARD || "N/A"}
Area:${record.AREA || "N/A"}
Locality:${record.LOCALITY || "N/A"}
Road Name:${record.STREET || "N/A"}
House No:${record.HOUSENO || "N/A"}
Old House No:${record.OLD_HOUSENO || "N/A"}
Owner Name:${record.OWNER_NAME || "N/A"}
Property Type:${record.PROPERTY_TYPE || "N/A"}
Property Usage:${record.USG_NAME || "N/A"}
Total Built-up Area:${record.TOTAL_BUILTUP_AREA || "N/A"}
Sital Area:${record.SITAL_AREA || "N/A"}
Total Demand:${record.TOTAL_DEMAND || "N/A"}
Total Collection:${record.TOTAL_COLLECTION || "N/A"}
Total Balance:${record.TOTAL_BALANCE || "N/A"}
Current Demand:${record.CURRENT_DEMAND || "N/A"}
Current Collection:${record.CURRENT_COLL || "N/A"}
Current Balance:${record.CURRENT_BALANCE || "N/A"}
Arrear Demand:${record.ARREAR_DEMAND || "N/A"}
Arrear Collection:${record.ARREAR_COLL || "N/A"}
Arrear Balance:${record.ARREAR_BALANCE || "N/A"}
Mobile No:${record.MOBILE_NO || "N/A"}
+
+
+ `; + + const billCheckbox = resultsBox.querySelector('.bill-select-checkbox') as HTMLInputElement | null; + if (billCheckbox) { + billCheckbox.addEventListener('click', (e) => e.stopPropagation()); + billCheckbox.addEventListener('change', () => { + if (billCheckbox.checked) { + openReasonConfirmationPopup(resultBillNumber, gisId, billCheckbox); + } + }); + } + + } catch (error) { + + console.error("Bill Number search failed:", error); + + resultsBox.innerHTML = ` +

Failed to fetch property details from ERP API.

+ `; + } + } + + async function buildCustomContent(clickedFeatDet) { + console.log('CONTENT FUNCTION CALLED for GIS ID:', clickedFeatDet?.[0]?.gcc_gis_id); + console.log(clickedFeatDet) + + const directionUrl = await generateDirectionUrl(clickedFeatDet[1]); + + const zoneNumber = clickedFeatDet[0].zone_number; + const formattedZone = "N" + zoneNumber; + + const wardNumber = clickedFeatDet[0].ward_number; + const formattedward = "N" + wardNumber; + const new_api = await fetchGISIDFetch_new_erp({ + Zone: clickedFeatDet[0].zone_number_mis || formattedZone, + ward: clickedFeatDet[0].ward_number_mis || formattedward, + area: clickedFeatDet[0].area_mis, + loc: clickedFeatDet[0].locality_mis, + street: clickedFeatDet[0].street_mis, + GISID: clickedFeatDet[0].gcc_gis_id + }); + console.log(new_api); + + const usage = await fetchSystemPropertyUsage(clickedFeatDet[0].gcc_gis_id); + + let customContent = ` + + + + + + + + + + +
Zone Number${clickedFeatDet[0].zone_number}
Ward Number${clickedFeatDet[0].ward_number}
Area${clickedFeatDet[0].area_name}
Locality${clickedFeatDet[0].locality}
Road Name${clickedFeatDet[0].road_name}
GIS Id${clickedFeatDet[0].gcc_gis_id}
Locate In MapLocate In Map
+ + `; + + return customContent; + } + + const clearGraphic = () => { + jimuMapView?.view.graphics.removeAll(); + setPopupContent(null); + }; + const handleMapView = (view) => { + setJimuMapView(view) + setMapView(view) + } + return ( +
+ {props.useMapWidgetIds && props.useMapWidgetIds.length === 1 && ( + + )} +
+ ); +}; + +export default Popup; + diff --git a/custom-popup/src/setting/setting.tsx b/custom-popup/src/setting/setting.tsx new file mode 100644 index 0000000..3e1d4c8 --- /dev/null +++ b/custom-popup/src/setting/setting.tsx @@ -0,0 +1,18 @@ +import { React } from 'jimu-core' +import { type AllWidgetSettingProps } from 'jimu-for-builder' +import { MapWidgetSelector } from 'jimu-ui/advanced/setting-components' + +const Setting = (props: AllWidgetSettingProps) => { + const onMapWidgetSelected = (useMapWidgetIds: string[]) => { + props.onSettingChange({ + id: props.id, + useMapWidgetIds: useMapWidgetIds + }) + } + return
+ +
+} + +export default Setting +