From 55c316543cb46495cdaf73b3db0e67440b4eee01 Mon Sep 17 00:00:00 2001
From: Jagankumar <53823168+jagankumar-egov@users.noreply.github.com>
Date: Sat, 19 Oct 2024 12:54:38 +0530
Subject: [PATCH] connected village screen

---
 .../microplan/src/components/PopInboxTable.js |  5 +++-
 .../src/pages/employee/viewVillage.js         | 23 ++++++++-----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/PopInboxTable.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/PopInboxTable.js
index a4df7363496..52361085400 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/PopInboxTable.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/PopInboxTable.js
@@ -3,6 +3,7 @@ import axios from 'axios';
 import DataTable from 'react-data-table-component';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@egovernments/digit-ui-components';
+import { useHistory } from "react-router-dom";
 
 const censusResponse = {
   "Census": [
@@ -189,7 +190,9 @@ const PopInboxTable = ({...props}) => {
 	const [loading, setLoading] = useState(false);
 	const [totalRows, setTotalRows] = useState(0);
 	const [perPage, setPerPage] = useState(10);
+    const history = useHistory();
 
+    const { campaignId, microplanId,  } = Digit.Hooks.useQueryParams();
 
   const columns = useMemo(() => {
     return [
@@ -197,7 +200,7 @@ const PopInboxTable = ({...props}) => {
         name: t(`INBOX_VILLAGE`),
         cell: (row, index, column, id) => <Button
         label={t(`${row.boundaryCode}`)}
-        onClick={()=>console.log(row)}
+        onClick={()=>history.push(`village-view?campaignId=${campaignId}&microplanId=${microplanId}&boundaryCode=${row?.boundaryCode}`)}
         title={t(`${row.boundaryCode}`)}
         variation="link"
         style={{maxWidth:"1rem"}}
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/viewVillage.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/viewVillage.js
index 0483e212ab3..327af48352b 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/viewVillage.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/viewVillage.js
@@ -11,10 +11,7 @@ import TimelinePopUpWrapper from '../../components/timelinePopUpWrapper';
 const VillageView = () => {
     const location = useLocation();
     const { t } = useTranslation();
-    const queryParams = new URLSearchParams(location.search);
-
-    const microplanId = queryParams.get('microplanId');
-    const boundaryCode = queryParams.get('boundaryCode');
+    const { campaignId, microplanId,boundaryCode  } = Digit.Hooks.useQueryParams();
     const tenantId = Digit.ULBService.getCurrentTenantId();
 
     // Custom hook to fetch census data based on microplanId and boundaryCode
@@ -94,17 +91,17 @@ const VillageView = () => {
 
                     <div className="label-pair">
                         <span className="label-heading">{t(`HCM_MICROPLAN_DISCRICT_LABEL`)}</span>
-                        <span className="label-text">{data.boundaryCode}</span>
+                        <span className="label-text">{data?.boundaryCode}</span>
                     </div>
 
                     <div className="label-pair">
                         <span className="label-heading">{t(`HCM_MICROPLAN_ADMIN_POST_LABEL`)}</span>
-                        <span className="label-text">{data.boundaryCode}</span>
+                        <span className="label-text">{data?.boundaryCode}</span>
                     </div>
 
                     <div className="label-pair">
                         <span className="label-heading">{t(`HCM_MICROPLAN_LOCALITY_LABEL`)}</span>
-                        <span className="label-text">{data.boundaryCode}</span>
+                        <span className="label-text">{data?.boundaryCode}</span>
                     </div>
                 </Card>
 
@@ -182,27 +179,27 @@ const VillageView = () => {
                     {/* Five Label-Text Pairs */}
                     <div className="label-pair">
                         <span className="label-heading">{t(`HCM_MICROPLAN_UPLOADED_TARGET_POPULATION_LABEL`)}</span>
-                        <span className="label-text">{data.additionalDetails.targetPopulation}</span>
+                        <span className="label-text">{data?.additionalDetails?.targetPopulation}</span>
                     </div>
                     <Divider className="" variant="small" />
                     <div className="label-pair">
                         <span className="label-heading">{t(`HCM_MICROPLAN_UPLOADED_TOTAL_POPULATION_LABEL`)}</span>
-                        <span className="label-text">{data.totalPopulation}</span>
+                        <span className="label-text">{data?.totalPopulation}</span>
                     </div>
                     <Divider className="" variant="small" />
                     <div className="label-pair ">
                         <span className="label-heading">{t(`HCM_MICROPLAN_CONFIRM_TARGET_POPULATION_LABEL`)}</span>
-                        <span className="label-text">{data.additionalDetails.confirmedTargetPopulation}</span>
+                        <span className="label-text">{data?.additionalDetails?.confirmedTargetPopulation}</span>
                     </div>
                     <Divider className="" variant="small" />
                     <div className="label-pair">
                         <span className="label-heading">{t(`HCM_MICROPLAN_CONFIRM_TOTAL_POPULATION_LABEL`)}</span>
-                        <span className="label-text">{data.additionalDetails.confirmedTotalPopulation}</span>
+                        <span className="label-text">{data?.additionalDetails?.confirmedTotalPopulation}</span>
                     </div>
                     <Divider className="" variant="small" />
                     <div className="label-pair">
                         <span className="label-heading">{t(`HCM_MICROPLAN_ASSIGNED_DATA_APPROVER_LABEL`)}</span>
-                        <span className="label-text">{data.assignee}</span>
+                        <span className="label-text">{data?.assignee}</span>
                     </div>
                 </Card>
 
@@ -230,7 +227,7 @@ const VillageView = () => {
                 </Card>
 
                 {showCommentLogPopup && (
-                    <TimelinePopUpWrapper onClose={onCommentLogClose} businessId={data.id} heading="HCM_MICROPLAN_STATUS_LOG_LABEL" />
+                    <TimelinePopUpWrapper onClose={onCommentLogClose} businessId={data?.id} heading="HCM_MICROPLAN_STATUS_LOG_LABEL" />
                 )}
 
             </div>