From f2b62c0384ccbff2dad8fd216f326cec945b64f1 Mon Sep 17 00:00:00 2001
From: Swathi-eGov <swathi.chatrathi@egovernments.org>
Date: Mon, 28 Oct 2024 12:40:55 +0530
Subject: [PATCH 1/2] updated facilitypopup

---
 .../example/public/index.html                 |   2 +-
 .../packages/css/package.json                 |   2 +-
 .../css/src/pages/employee/facility.scss      |  16 ++
 .../microplan/src/components/FacilityPopup.js | 231 ++++++++++--------
 .../src/components/SearchJurisdiction.js      |   8 +-
 health/micro-ui/web/public/index.html         |   2 +-
 6 files changed, 157 insertions(+), 104 deletions(-)

diff --git a/health/micro-ui/web/micro-ui-internals/example/public/index.html b/health/micro-ui/web/micro-ui-internals/example/public/index.html
index 7e924de1d0f..220580a25d5 100644
--- a/health/micro-ui/web/micro-ui-internals/example/public/index.html
+++ b/health/micro-ui/web/micro-ui-internals/example/public/index.html
@@ -16,7 +16,7 @@
   /> -->
   <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-css@1.8.2-beta.34/dist/index.css" />
   <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-components-css@0.0.2-beta.39/dist/index.css" />
-  <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-health-css@0.1.10/dist/index.css" />
+  <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-health-css@0.1.11/dist/index.css" />
 
   <!-- added below css for hcm-workbench module inclusion-->
   <!-- <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-css@1.5.41/dist/index.css" /> -->
diff --git a/health/micro-ui/web/micro-ui-internals/packages/css/package.json b/health/micro-ui/web/micro-ui-internals/packages/css/package.json
index 0f01ed3cfe0..cbd6c6c7173 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/css/package.json
+++ b/health/micro-ui/web/micro-ui-internals/packages/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-health-css",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <jagan.kumar@egov.org.in>",
diff --git a/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/facility.scss b/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/facility.scss
index 9c8b271bf65..e74d203e885 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/facility.scss
+++ b/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/facility.scss
@@ -1,3 +1,19 @@
 .facility-popup{
     max-width: 85% !important;
+}
+
+.facilitypopup-serach-results-wrapper{
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.facility-popup-table-card{
+    border: 1px solid #d6d5d4;
+}
+
+.facilitypopup-tab-serach-wrapper{
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
 }
\ No newline at end of file
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FacilityPopup.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FacilityPopup.js
index 3089751059a..4522c20d827 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FacilityPopup.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FacilityPopup.js
@@ -1,11 +1,12 @@
 import React, { useState, Fragment, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { PopUp, Button, Tab, CheckBox, Card, Toast } from "@egovernments/digit-ui-components";
+import { PopUp, Button, Tab, CheckBox, Card, Toast,SVG } from "@egovernments/digit-ui-components";
 import SearchJurisdiction from "./SearchJurisdiction";
 import { LoaderWithGap, Loader } from "@egovernments/digit-ui-react-components";
 import DataTable from "react-data-table-component";
 import AccessibilityPopUp from "./accessbilityPopUP";
 import SecurityPopUp from "./securityPopUp";
+import { tableCustomStyle } from "./tableCustomStyle";
 
 const FacilityPopUp = ({ details, onClose }) => {
   const { t } = useTranslation();
@@ -183,24 +184,12 @@ const FacilityPopUp = ({ details, onClose }) => {
     }
   }, [isLoadingPlanEmployee, isLoadingCampaign]);
 
-  const handleRowSelect = (row) => {
-    const isSelected = selectedRows.includes(row.id);
-    const newSelectedRows = isSelected
-      ? selectedRows.filter((id) => id !== row.id)
-      : [...selectedRows, row.id];
-
+  const handleRowSelect = (event) => {
+    // Extract the IDs of all selected rows
+    const newSelectedRows = event.selectedRows.map(row => row.id);
+    // Update the state with the list of selected IDs
     setSelectedRows(newSelectedRows);
-    setIsAllSelected(newSelectedRows.length === censusData.length);
-  };
-
-  const handleSelectAll = () => {
-    if (isAllSelected) {
-      setSelectedRows([]);
-    } else {
-      const allRowIds = censusData.map((row) => row.id);
-      setSelectedRows(allRowIds);
-    }
-    setIsAllSelected(!isAllSelected);
+    setIsAllSelected(event.allSelected);
   };
 
   const handleViewDetailsForAccessibility = (row) => {
@@ -216,25 +205,6 @@ const FacilityPopUp = ({ details, onClose }) => {
   };
 
   const columns = [
-    {
-      name: (
-        <CheckBox
-          onChange={handleSelectAll}
-          checked={isAllSelected}
-          label=""
-        />
-      ),
-      cell: (row) => (
-        <CheckBox
-          onChange={() => handleRowSelect(row)}
-          checked={selectedRows.includes(row.id)}
-          label=""
-        />
-      ),
-      sortable: false,
-      allowOverflow: true,
-      width: "6rem"
-    },
     {
       name: t("MP_FACILITY_VILLAGE"), // Change to your column name
       selector: (row) => row.boundaryCode, // Replace with the appropriate field from your data
@@ -243,24 +213,14 @@ const FacilityPopUp = ({ details, onClose }) => {
     {
       name: t("MP_VILLAGE_ACCESSIBILITY_LEVEL"), // Change to your column type
       cell: (row) => (
-        <span
-          style={{ color: "#f47738", textDecoration: "underline", cursor: "pointer" }}
-          onClick={() => handleViewDetailsForAccessibility(row)}
-        >
-          {t("VIEW_DETAILS")}
-        </span>
+        <Button label={t("VIEW_DETAILS")} onClick={() => handleViewDetailsForAccessibility(row)} variation="link" size={"medium"} style={{}} />
       ), // Replace with the appropriate field from your data
       sortable: false,
     },
     {
       name: t("MP_VILLAGE_SECURITY_LEVEL"), // Change to your column type
       cell: (row) => (
-        <span
-          style={{ color: "#f47738", textDecoration: "underline", cursor: "pointer" }}
-          onClick={() => handleViewDetailsForSecurity(row)}
-        >
-          {t("VIEW_DETAILS")}
-        </span>
+        <Button label={t("VIEW_DETAILS")} onClick={() => handleViewDetailsForSecurity(row)} variation="link" size={"medium"} style={{}} />
       ), // Replace with the appropriate field from your data
       sortable: false,
     },
@@ -268,7 +228,7 @@ const FacilityPopUp = ({ details, onClose }) => {
       name: t("MP_FACILITY_TOTALPOPULATION"), // Change to your column type
       selector: (row) => row.totalPopulation, // Replace with the appropriate field from your data
       sortable: false,
-    }
+    },
     // Add more columns as needed
   ];
 
@@ -349,6 +309,11 @@ const FacilityPopUp = ({ details, onClose }) => {
     setCurrentPage(1); // Reset to first page when changing rows per page
   };
 
+  const selectProps = {
+    hideLabel: true,
+    mainClassName: "data-table-select-checkbox",
+  };
+
   return (
     <>
       {loader ? (
@@ -358,8 +323,8 @@ const FacilityPopUp = ({ details, onClose }) => {
           onClose={onClose}
           heading={`${t(`MICROPLAN_ASSIGNMENT_FACILITY`)} ${details?.additionalDetails?.facilityName}`}
           children={[
-            <div>
-              <div className="card-container" style={{ border: "1px solid #D6D5D4", borderRadius: "3px" }}>
+            <div className="facilitypopup-serach-results-wrapper">
+              <div className="facilitypopup-tab-serach-wrapper">
                 <Tab
                   activeLink={activeLink.code}
                   configItemKey="code"
@@ -370,64 +335,136 @@ const FacilityPopUp = ({ details, onClose }) => {
                   style={{
                     width: "auto", // Allow tab width to adjust automatically
                     whiteSpace: "nowrap", // Prevent text from breaking
-                    padding: "10px 15px", // Add padding for spacing
                   }}
                   itemStyle={{ width: "unset !important" }}
                 />
-                <SearchJurisdiction
-                  key={searchKey} // Use key to force re-render
-                  boundaries={boundaries}
-                  jurisdiction={jurisdiction}
-                  onSubmit={censusSearch}
-                  style={{ border: "1px solid black", padding: "10px" }}
-                  onClear={() => censusSearch([])}
-                />
+                <Card className="facility-popup-table-card" type={"primary"}>
+                  <SearchJurisdiction
+                    key={searchKey} // Use key to force re-render
+                    boundaries={boundaries}
+                    jurisdiction={jurisdiction}
+                    onSubmit={censusSearch}
+                    style={{ padding: "0px" }}
+                    onClear={() => censusSearch([])}
+                  />
+                </Card>
               </div>
-              <div className="card-container" style={{ border: "1px solid #D6D5D4", borderRadius: "3px" }}>
+              <Card className="facility-popup-table-card" type={"primary"}>
                 {selectedRows.length > 0 && (
-                  <div className="card-container" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', borderBottom: '1px solid #D6D5D4', padding: '1rem' }}>
-                    <div>
-                      {selectedRows.length} {selectedRows.length === 1 ? t('MICROPLAN_SELECTED') : t('MICROPLAN_SELECTED_PLURAL')}
+                  <div className="selection-state-wrapper">
+                    <div className="svg-state-wrapper">
+                      <SVG.DoneAll width={"1.5rem"} height={"1.5rem"} fill={"#C84C0E"}></SVG.DoneAll>
+                      <div className={"selected-state"}>{`${selectedRows.length} ${
+                        selectedRows?.length === 1 ? t("MICROPLAN_SELECTED") : t("MICROPLAN_SELECTED_PLURAL")
+                      }`}</div>
+                    </div>
+
+                    <div className={`table-actions-wrapper`}>
+                      <Button
+                        className={"campaign-type-alert-button"}
+                        variation="secondary"
+                        label={
+                          facilityAssignedStatus
+                            ? `${t("MICROPLAN_UNASSIGN_FACILITY")} ${details?.additionalDetails?.facilityName}`
+                            : `${t("MICROPLAN_ASSIGN_FACILITY")} ${details?.additionalDetails?.facilityName}`
+                        }
+                        type="button"
+                        onClick={handleAssignUnassign}
+                        size={"large"}
+                        icon={"AddIcon"}
+                      />
                     </div>
-                    <Button
-                      className={"campaign-type-alert-button"}
-                      type={"button"}
-                      size={"large"}
-                      variation={"secondary"}
-                      label={facilityAssignedStatus ? `${t("MICROPLAN_UNASSIGN_FACILITY")} ${details?.additionalDetails?.facilityName}` : `${t("MICROPLAN_ASSIGN_FACILITY")} ${details?.additionalDetails?.facilityName}`}
-                      onClick={handleAssignUnassign}
-                      icon={"AddIcon"}
-                    />
                   </div>
                 )}
-                {tableLoader ? <Loader /> : censusData && (
-                  <DataTable
-                    columns={columns}
-                    data={censusData}
-                    pagination
-                    paginationServer
-                    paginationDefaultPage={currentPage}
-                    paginationPerPage={rowsPerPage}
-                    onChangePage={handlePageChange}
-                    onChangeRowsPerPage={handleRowsPerPageChange}
-                    paginationRowsPerPageOptions={[10, 20, 50, 100]}
-                    paginationTotalRows={totalCensusCount}
-                    highlightOnHover
-                    pointerOnHover
-                    striped
-                    style={{ marginTop: "20px", border: "1px solid #D6D5D4", borderRadius: "3px" }}
-                  />
+                {tableLoader ? (
+                  <Loader />
+                ) : (
+                  censusData && (
+                    <DataTable
+                      columns={columns}
+                      data={censusData}
+                      pagination
+                      paginationServer
+                      paginationDefaultPage={currentPage}
+                      paginationPerPage={rowsPerPage}
+                      onChangePage={handlePageChange}
+                      onChangeRowsPerPage={handleRowsPerPageChange}
+                      paginationRowsPerPageOptions={[10, 20, 50, 100]}
+                      paginationTotalRows={totalCensusCount}
+                      selectableRows
+                      selectableRowsHighlight
+                      noContextMenu
+                      onSelectedRowsChange={handleRowSelect}
+                      customStyles={tableCustomStyle}
+                      selectableRowsComponent={CheckBox}
+                      selectableRowsComponentProps={selectProps}
+                    />
+                  )
                 )}
-                {viewDetails && accessibilityData && (
-                  <AccessibilityPopUp onClose={() => closeViewDetails()} census={accessibilityData} />
+                {viewDetails && accessibilityData && <AccessibilityPopUp onClose={() => closeViewDetails()} census={accessibilityData} />}
+                {viewDetails && securityData && <SecurityPopUp onClose={() => closeViewDetails()} census={securityData} />}
+              </Card>
+              {/* <div className="card-container" style={{ border: "1px solid #D6D5D4", borderRadius: "3px" }}>
+                {selectedRows.length > 0 && (
+                  <div className="selection-state-wrapper">
+                    <div className="svg-state-wrapper">
+                      <SVG.DoneAll width={"1.5rem"} height={"1.5rem"} fill={"#C84C0E"}></SVG.DoneAll>
+                      <div className={"selected-state"}>{`${selectedRows.length} ${
+                        selectedRows?.length === 1 ? t("MICROPLAN_SELECTED") : t("MICROPLAN_SELECTED_PLURAL")
+                      }`}</div>
+                    </div>
+
+                    <div className={`table-actions-wrapper`}>
+                      <Button
+                        className={"campaign-type-alert-button"}
+                        variation="secondary"
+                        label={
+                          facilityAssignedStatus
+                            ? `${t("MICROPLAN_UNASSIGN_FACILITY")} ${details?.additionalDetails?.facilityName}`
+                            : `${t("MICROPLAN_ASSIGN_FACILITY")} ${details?.additionalDetails?.facilityName}`
+                        }
+                        type="button"
+                        onClick={handleAssignUnassign}
+                        size={"large"}
+                        icon={"AddIcon"}
+                      />
+                    </div>
+                  </div>
                 )}
-                {viewDetails && securityData && (
-                  <SecurityPopUp onClose={() => closeViewDetails()} census={securityData} />
+                {tableLoader ? (
+                  <Loader />
+                ) : (
+                  censusData && (
+                    <DataTable
+                      columns={columns}
+                      data={censusData}
+                      pagination
+                      paginationServer
+                      paginationDefaultPage={currentPage}
+                      paginationPerPage={rowsPerPage}
+                      onChangePage={handlePageChange}
+                      onChangeRowsPerPage={handleRowsPerPageChange}
+                      paginationRowsPerPageOptions={[10, 20, 50, 100]}
+                      paginationTotalRows={totalCensusCount}
+                      // style={{ marginTop: "20px", border: "1px solid #D6D5D4", borderRadius: "3px" }}
+                      selectableRows
+                      selectableRowsHighlight
+                      noContextMenu
+                      onSelectedRowsChange={handleRowSelect}
+                      customStyles={tableCustomStyle}
+                      selectableRowsComponent={CheckBox}
+                      selectableRowsComponentProps={selectProps}
+                    />
+                  )
                 )}
-              </div>
+                {viewDetails && accessibilityData && <AccessibilityPopUp onClose={() => closeViewDetails()} census={accessibilityData} />}
+                {viewDetails && securityData && <SecurityPopUp onClose={() => closeViewDetails()} census={securityData} />}
+              </div> */}
               {showToast && (
                 <Toast
-                  type={showToast?.key === "error" ? "error" : showToast?.key === "info" ? "info" : showToast?.key === "warning" ? "warning" : "success"}
+                  type={
+                    showToast?.key === "error" ? "error" : showToast?.key === "info" ? "info" : showToast?.key === "warning" ? "warning" : "success"
+                  }
                   label={t(showToast.label)}
                   transitionTime={showToast.transitionTime}
                   onClose={() => setShowToast(null)}
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/SearchJurisdiction.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/SearchJurisdiction.js
index bffb17b7a71..97f6468b7d0 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/SearchJurisdiction.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/SearchJurisdiction.js
@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { useMyContext } from "../utils/context";
 import { Dropdown, MultiSelectDropdown } from "@egovernments/digit-ui-components";
 
-const SearchJurisdiction = ({ boundaries, jurisdiction, onSubmit = () => { }, onClear = () => { } }) => {
+const SearchJurisdiction = ({ boundaries, jurisdiction, onSubmit = () => { }, onClear = () => { } ,style={}}) => {
   const { t } = useTranslation();
   const {
     state: { hierarchyType, boundaryHierarchy },
@@ -51,10 +51,10 @@ const SearchJurisdiction = ({ boundaries, jurisdiction, onSubmit = () => { }, on
   }
 
   return (
-    <div className={"search-wrapper"}>
+    <div className={"search-wrapper"} style={style}>
       <div className={`search-field-wrapper search custom-both-clear-search`}>
         <LabelFieldPair style={{ flexDirection: "column", gap: "0rem" }}>
-          <CardLabel>{t("SELECT_HIERARCHY_LEVEL")}</CardLabel>
+          <CardLabel style={{width:"100%"}}>{t("SELECT_HIERARCHY_LEVEL")}</CardLabel>
           <Dropdown
             t={t}
             option={hierarchy}
@@ -67,7 +67,7 @@ const SearchJurisdiction = ({ boundaries, jurisdiction, onSubmit = () => { }, on
           />
         </LabelFieldPair>
         <LabelFieldPair style={{ flexDirection: "column", gap: "0rem" }}>
-          <CardLabel>{t("SELECT_BOUNDARIES")}</CardLabel>
+          <CardLabel style={{width:"100%"}}>{t("SELECT_BOUNDARIES")}</CardLabel>
           <div style={{width: "100%" }}>
           <MultiSelectDropdown
             variant={"nestedmultiselect"}
diff --git a/health/micro-ui/web/public/index.html b/health/micro-ui/web/public/index.html
index 2d0b9deb2e9..91f69c1a5d8 100644
--- a/health/micro-ui/web/public/index.html
+++ b/health/micro-ui/web/public/index.html
@@ -11,7 +11,7 @@
   <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-components-css@0.0.2-beta.39/dist/index.css" />
   <!-- added below css for hcm-workbench module inclusion-->
 
-  <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-health-css@0.1.10/dist/index.css" />
+  <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-health-css@0.1.11/dist/index.css" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#00bcd1" />
   <title>DIGIT HCM</title>

From 4779fa8c22ac127c582411410ba552ee32abdbf5 Mon Sep 17 00:00:00 2001
From: Swathi-eGov <swathi.chatrathi@egovernments.org>
Date: Mon, 28 Oct 2024 13:47:17 +0530
Subject: [PATCH 2/2] added review changes

---
 .../microplan/src/components/FacilityPopup.js | 56 -------------------
 .../src/components/SearchJurisdiction.js      |  2 +-
 .../src/components/timelinePopUpWrapper.js    |  2 +-
 3 files changed, 2 insertions(+), 58 deletions(-)

diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FacilityPopup.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FacilityPopup.js
index 4522c20d827..35f4f1a678a 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FacilityPopup.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FacilityPopup.js
@@ -404,62 +404,6 @@ const FacilityPopUp = ({ details, onClose }) => {
                 {viewDetails && accessibilityData && <AccessibilityPopUp onClose={() => closeViewDetails()} census={accessibilityData} />}
                 {viewDetails && securityData && <SecurityPopUp onClose={() => closeViewDetails()} census={securityData} />}
               </Card>
-              {/* <div className="card-container" style={{ border: "1px solid #D6D5D4", borderRadius: "3px" }}>
-                {selectedRows.length > 0 && (
-                  <div className="selection-state-wrapper">
-                    <div className="svg-state-wrapper">
-                      <SVG.DoneAll width={"1.5rem"} height={"1.5rem"} fill={"#C84C0E"}></SVG.DoneAll>
-                      <div className={"selected-state"}>{`${selectedRows.length} ${
-                        selectedRows?.length === 1 ? t("MICROPLAN_SELECTED") : t("MICROPLAN_SELECTED_PLURAL")
-                      }`}</div>
-                    </div>
-
-                    <div className={`table-actions-wrapper`}>
-                      <Button
-                        className={"campaign-type-alert-button"}
-                        variation="secondary"
-                        label={
-                          facilityAssignedStatus
-                            ? `${t("MICROPLAN_UNASSIGN_FACILITY")} ${details?.additionalDetails?.facilityName}`
-                            : `${t("MICROPLAN_ASSIGN_FACILITY")} ${details?.additionalDetails?.facilityName}`
-                        }
-                        type="button"
-                        onClick={handleAssignUnassign}
-                        size={"large"}
-                        icon={"AddIcon"}
-                      />
-                    </div>
-                  </div>
-                )}
-                {tableLoader ? (
-                  <Loader />
-                ) : (
-                  censusData && (
-                    <DataTable
-                      columns={columns}
-                      data={censusData}
-                      pagination
-                      paginationServer
-                      paginationDefaultPage={currentPage}
-                      paginationPerPage={rowsPerPage}
-                      onChangePage={handlePageChange}
-                      onChangeRowsPerPage={handleRowsPerPageChange}
-                      paginationRowsPerPageOptions={[10, 20, 50, 100]}
-                      paginationTotalRows={totalCensusCount}
-                      // style={{ marginTop: "20px", border: "1px solid #D6D5D4", borderRadius: "3px" }}
-                      selectableRows
-                      selectableRowsHighlight
-                      noContextMenu
-                      onSelectedRowsChange={handleRowSelect}
-                      customStyles={tableCustomStyle}
-                      selectableRowsComponent={CheckBox}
-                      selectableRowsComponentProps={selectProps}
-                    />
-                  )
-                )}
-                {viewDetails && accessibilityData && <AccessibilityPopUp onClose={() => closeViewDetails()} census={accessibilityData} />}
-                {viewDetails && securityData && <SecurityPopUp onClose={() => closeViewDetails()} census={securityData} />}
-              </div> */}
               {showToast && (
                 <Toast
                   type={
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/SearchJurisdiction.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/SearchJurisdiction.js
index 9cec9933fcc..1477c209e25 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/SearchJurisdiction.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/SearchJurisdiction.js
@@ -66,7 +66,7 @@ const SearchJurisdiction = ({ boundaries, jurisdiction, onSubmit = () => { }, on
             }}
           />
         </LabelFieldPair>
-        <LabelFieldPair style={{ flexDirection: "column", gap: "0rem", , marginBottom: 0 }}>
+        <LabelFieldPair style={{ flexDirection: "column", gap: "0rem",marginBottom: 0 }}>
           <CardLabel style={{width:"100%"}}>{t("SELECT_BOUNDARIES")}</CardLabel>
           <div style={{width: "100%" }}>
           <MultiSelectDropdown
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/timelinePopUpWrapper.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/timelinePopUpWrapper.js
index d0a77cd30a5..253d32681bd 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/timelinePopUpWrapper.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/timelinePopUpWrapper.js
@@ -33,7 +33,7 @@ const TimelinePopUpWrapper = ({ onClose, businessId, heading }) => {
 
             // Map API response to timeline steps
             const steps = workflowData.ProcessInstances.map((instance, index) => ({
-                label: instance.state.applicationStatus,
+                label: t(instance.state.applicationStatus),
                 variant: 'completed',
                 subElements: [Digit.Utils.microplanv1.epochToDateTime(instance?.auditDetails?.lastModifiedTime),
                 instance?.assignes?.length > 0 ? instance.assignes[0]?.name : 'NA',