User Role being displayed in Pop, Plan and Fac

health/micro-ui/web/micro-ui-internals/example/public/index.html

@@ -12,7 +12,7 @@
   <title>DIGIT</title>
   <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />
   <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />
-  <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].37/dist/index.css" />
+  <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].38/dist/index.css" />
 
   <!-- added below css for hcm-workbench module inclusion-->
   <!-- <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" /> -->

health/micro-ui/web/micro-ui-internals/example/src/UICustomizations.js

@@ -803,9 +803,9 @@ export const UICustomizations = {
           let options = [];
 
           if (row?.status == "DRAFT") {
-            options = [{ code: "1", name: "Edit Setup" }];
+            options = [{ code: "1", name: "MP_ACTIONS_EDIT_SETUP" }];
           } else {
-            options = [{ code: "1", name: "View Summary" }];
+            options = [{ code: "1", name: "MP_ACTIONS_VIEW_SUMMARY" }];
           }
 
           const handleDownload = () => {
@@ -833,15 +833,15 @@ export const UICustomizations = {
                 <Dropdown
                   option={options}
                   select={(e) => {
-                    if (e.name == "Edit Setup") {
+                    if (e.name ==  "MP_ACTIONS_EDIT_SETUP") {
                       window.location.href = `/${window.contextPath}/employee/microplan/setup-microplan?key=${1}&microplanId=${row.id}&campaignId=${row.campaignDetails.id}`;
                     }
-                    if (e.name == "View Summary") {
+                    if (e.name == "MP_ACTIONS_VIEW_SUMMARY") {
                       window.location.href = `/${window.contextPath}/employee/microplan/setup-microplan?key=${10}&microplanId=${row.id}&campaignId=${row.campaignDetails.id}&setup-completed=true`;
                     }
                   }}
                   optionKey={"name"}
-                  selected={{ code: "1", name: "Actions" }}
+                  selected={{ code: "1", name: "MP_ACTIONS_FOR_MICROPLAN_SEARCH" }}
                 />
               )}
             </div>

health/micro-ui/web/micro-ui-internals/packages/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-health-css",
-  "version": "0.1.37",
+  "version": "0.1.38",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <[email protected]>",

health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplan.scss

@@ -347,4 +347,69 @@
   text-align: -webkit-center;
   gap: 24px;
   margin-right: 3rem;
-}
+}
+
+.role-summary-sub-heading {
+
+  color: theme(digitv2.lightTheme.primary-2) !important;
+  margin-bottom: 0rem;
+  font-size: 1rem;
+  display:flex;
+  justify-content: space-between;
+
+
+
+
+}
+
+.fac-middle-child {
+  border: 1px solid #ddd;
+  border-radius: 0.1rem;
+  padding: 1rem;
+  background-color: #FAFAFA;
+  margin: 1rem 0;
+}
+
+.fac-kpi-container {
+  display: flex;
+  justify-content: space-between; /* Spread items evenly */
+  gap: 0rem; /* Add spacing between items */
+  align-items: center;
+}
+
+.fac-kpi-card {
+  flex: 1; /* Ensure equal width for all items */
+  text-align: center;
+  padding: 0.5rem; 
+}
+
+.fac-kpi-card:last-child {
+  border-right: none; /* Remove border from the last item */
+}
+
+.fac-kpi-card .highlighted {
+  color: #d9534f; /* Red color for emphasis (like "5500") */
+  font-weight: bold;
+}
+
+.mp-fac-key{
+    font-family: Roboto, sans-serif; /* Fallback to sans-serif in case Roboto isn't available */
+    font-size: 1rem; /* 16px */
+    font-weight: 400; /* Regular weight */
+
+    text-align: center; /* Center-align text */
+    text-underline-position: from-font; /* Preserve font-based underline position */
+    text-decoration-skip-ink: none; /* Ensure underlines do not skip over glyphs */
+}
+
+.mp-fac-value {
+  font-family: Roboto, sans-serif; /* Fallback to sans-serif in case Roboto isn't available */
+  font-size: 1.5rem; /* 24px */
+  font-weight: 700; /* Bold weight */
+
+  text-align: center; /* Center-align text */
+  text-underline-position: from-font; /* Preserve font-based underline position */
+  text-decoration-skip-ink: none; /* Ensure underlines do not skip over glyphs */
+  color:#0B4B66;
+}
+

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FacilityPopup.js

@@ -1,16 +1,16 @@
 import React, { useState, Fragment, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { PopUp, Button, Tab, CheckBox, Card, Toast, SVG } from "@egovernments/digit-ui-components";
+import { PopUp, Button, Tab, CheckBox, Card, Toast, SVG,TooltipWrapper } from "@egovernments/digit-ui-components";
 import SearchJurisdiction from "./SearchJurisdiction";
-import { LoaderWithGap, Loader } from "@egovernments/digit-ui-react-components";
+import { LoaderWithGap, Loader,InfoBannerIcon } from "@egovernments/digit-ui-react-components";
 import DataTable from "react-data-table-component";
 import AccessibilityPopUp from "./accessbilityPopUP";
 import SecurityPopUp from "./securityPopUp";
-import { getTableCustomStyle, tableCustomStyle } from "./tableCustomStyle";
-import VillageHierarchyTooltipWrapper from "./VillageHierarchyTooltipWrapper";
+import {  tableCustomStyle } from "./tableCustomStyle";
 
 const FacilityPopUp = ({ details, onClose, updateDetails }) => {
   const { t } = useTranslation();
+  const url = Digit.Hooks.useQueryParams();
   const currentUserUuid = Digit.UserService.getUser().info.uuid;
   const tenantId = Digit.ULBService.getCurrentTenantId();
   const [facilityAssignedStatus, setFacilityAssignedStatus] = useState(false);
@@ -31,6 +31,8 @@ const FacilityPopUp = ({ details, onClose, updateDetails }) => {
   const [rowsPerPage, setRowsPerPage] = useState(10);
   const [disabledAction, setDisabledAction] = useState(false);
   const [boundaryData, setBoundaryData] = useState([]);
+  const VillageHierarchyTooltipWrapper = Digit.ComponentRegistryService.getComponent("VillageHierarchyTooltipWrapper");
+  const [kpiParams, setKpiParams] = useState([]);
   const configNavItem = [
     {
       code: t(`MICROPLAN_UNASSIGNED_FACILITIES`),
@@ -68,18 +70,18 @@ const FacilityPopUp = ({ details, onClose, updateDetails }) => {
   }, [currentPage, rowsPerPage])
 
   // fetch the process instance for the current microplan to check if we need to disabled actions or not  
-  const { isLoading:isProcessLoading, data: processData, } = Digit.Hooks.useCustomAPIHook({
+  const { isLoading: isProcessLoading, data: processData, } = Digit.Hooks.useCustomAPIHook({
     url: "/egov-workflow-v2/egov-wf/process/_search",
     params: {
-       tenantId: tenantId,
-       history: true,
-        businessIds: microplanId,
-   },
+      tenantId: tenantId,
+      history: true,
+      businessIds: microplanId,
+    },
     config: {
-        enabled: true,
-        select: (data) => {
-          return data?.ProcessInstances;
-     },
+      enabled: true,
+      select: (data) => {
+        return data?.ProcessInstances;
+      },
     },
   });
 
@@ -231,7 +233,7 @@ const FacilityPopUp = ({ details, onClose, updateDetails }) => {
 
   const columns = [
     {
-      name: t("MP_FACILITY_VILLAGE"), 
+      name: t("MP_FACILITY_VILLAGE"),
       cell: (row) => (
         <div style={{ display: "flex", alignItems: "center", gap: ".5rem" }}>
           <span>{t(`${row.boundaryCode}`)}</span>
@@ -305,12 +307,12 @@ const FacilityPopUp = ({ details, onClose, updateDetails }) => {
         onSuccess: async (result) => {
           setSelectedRows([]);
           updateDetails(newDetails);
-          if(facilityAssignedStatus){
-            setShowToast({ key: "success", label: `${ t("UNASSIGNED_SUCESS")} ${details?.additionalDetails?.facilityName}`, transitionTime: 5000 });
+          if (facilityAssignedStatus) {
+            setShowToast({ key: "success", label: `${t("UNASSIGNED_SUCESS")} ${details?.additionalDetails?.facilityName}`, transitionTime: 5000 });
+
 
-
-          }else{
-            setShowToast({ key: "success", label: `${ t("ASSIGNED_SUCESS")} ${details?.additionalDetails?.facilityName}`, transitionTime: 5000 });
+          } else {
+            setShowToast({ key: "success", label: `${t("ASSIGNED_SUCESS")} ${details?.additionalDetails?.facilityName}`, transitionTime: 5000 });
           }
         },
         onError: async (result) => {
@@ -356,6 +358,31 @@ const FacilityPopUp = ({ details, onClose, updateDetails }) => {
     },
   ];
 
+  useEffect(() => {
+    if (details) {
+      setKpiParams([
+        { key: "facilityName", value: details?.additionalDetails?.facilityName || t("NA") },
+        { key: "facilityType", value: details?.additionalDetails?.facilityType || t("NA") },
+        { key: "facilityStatus", value: details?.additionalDetails?.facilityStatus || t("NA")},
+        { key: "capacity", value: details?.additionalDetails?.capacity || t("NA") },
+        { key: "servingPopulation", value: details?.additionalDetails?.servingPopulation || t("NA") },
+        { key: "fixedPost", value: details?.additionalDetails?.fixedPost || t("NA") },
+        { key: "residingVillage", value: details?.residingBoundary || t("NA")}
+      ]);
+    }
+  }, [details]);
+
+  const customRenderers = {
+
+  residingVillage: (value) => (
+    <p className="mp-fac-value">
+      <span style={{ color: "#0B4B66" }}>{value}</span>{" "}
+      <VillageHierarchyTooltipWrapper boundaryCode={details?.residingBoundary} placement={"bottom"} />
+    </p>
+
+  )};
+
+
   return (
     <>
       {loader ? (
@@ -366,6 +393,16 @@ const FacilityPopUp = ({ details, onClose, updateDetails }) => {
           heading={`${t(`MICROPLAN_ASSIGNMENT_FACILITY`)} ${details?.additionalDetails?.facilityName}`}
           children={[
             <div className="facilitypopup-serach-results-wrapper">
+              <Card className="fac-middle-child">
+                <div className="fac-kpi-container">
+                  {kpiParams.map(({ key, value }) => (
+                    <div key={key} className="fac-kpi-card">
+                      {customRenderers[key] ? customRenderers[key](value) : <p className="mp-fac-value">{value}</p>}
+                      <p className="mp-fac-key">{t(`MICROPLAN_${key.toUpperCase()}`)}</p>
+                    </div>
+                  ))}
+                </div>
+              </Card>
               <div className="facilitypopup-tab-serach-wrapper">
                 <Tab
                   activeLink={activeLink.code}
@@ -487,4 +524,4 @@ const FacilityPopUp = ({ details, onClose, updateDetails }) => {
   );
 };
 
-export default FacilityPopUp;
+export default FacilityPopUp;

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FormulaConfigWrapper.js

@@ -532,7 +532,7 @@ const FormulaConfigWrapper = ({ onSelect, props: customProps }) => {
 
           <div className="card-container" style={{ width: "77vw", marginBottom: "2.5rem" }}>
             <FormulaConfiguration
-              category={ruleConfigurationCategories[formulaInternalKey - 1]?.category}
+              category={`FORMULA_${ruleConfigurationCategories[formulaInternalKey - 1]?.category}`}
               formulas={[...filteredFormulas?.filter((item) => !deletedFormulas?.includes(item.output)), ...customFormula]}
               onSelect={onSelect}
               customProps={customProps}

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FormulaConfiguration.js

@@ -271,8 +271,10 @@ const FormulaConfiguration = ({ onSelect, category, customProps, formulas: initi
   return (
     <>
       <Card className="middle-child">
-        <Header className="uploader-sub-heading">{t(`SUB_HEADING_${category}`)}</Header>
+        <Header className="uploader-sub-heading">{t(category)}</Header>
+        {(category==="FORMULA_CAMPAIGN_VEHICLES")?  <p className="mp-description">{t(`FORMULA_VEHICLE_DESCRIPTION`)}</p>:
         <p className="mp-description">{t(`FORMULA_CONFIGURATION_DESCRIPTION`)}</p>
+        }
       </Card>
       <Card>
         {filteredFormulas.map((formula, index) => {

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/RoleTableComposer.js

@@ -1,4 +1,4 @@
-import { Button, Card, Dropdown, Loader, MultiSelectDropdown, TableMolecule, Toast } from "@egovernments/digit-ui-components";
+import { Button, Card, Dropdown, Loader, MultiSelectDropdown, TableMolecule, Toast, CardText,PopUp } from "@egovernments/digit-ui-components";
 import React, { Fragment, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import DataTable from "react-data-table-component";
@@ -60,6 +60,7 @@ function RoleTableComposer({ nationalRoles }) {
   const { mutate: planEmployeeCreate } = Digit.Hooks.microplanv1.usePlanEmployeeCreate();
   const { mutate: planEmployeeUpdate } = Digit.Hooks.microplanv1.usePlanEmployeeUpdate();
   const [isLoading, setIsLoading] = useState(null);
+  const [unassignPopup, setUnassignPopup] = useState(false); //true when set to rows
   const topBoundary = state?.boundaryHierarchy.find((boundary) => boundary.parentBoundaryType === null);
   const topBoundaryCode = topBoundary?.boundaryType;
   const topBoundaryValue = totalFormData?.BOUNDARY?.boundarySelection?.boundaryData?.[topBoundaryCode]
@@ -309,14 +310,16 @@ function RoleTableComposer({ nationalRoles }) {
       onSuccess: (data) => {
         queryClient.invalidateQueries("PLAN_SEARCH_EMPLOYEE_WITH_TAGGING");
         refetchHrms();
-        setIsLoading(false);
         setShowToast({ key: "success", label: t("UNASSIGNED_SUCCESSFULLY") });
+        setIsLoading(false);
       },
       onError: (error, variables) => {
-        setIsLoading(false);
         setShowToast({ key: "error", label: error?.message ? error.message : t("FAILED_TO_UPDATE_RESOURCE") });
+        setIsLoading(false);
       },
     });
+
+    setUnassignPopup(false);
   };
 
   const columns = [
@@ -423,7 +426,7 @@ function RoleTableComposer({ nationalRoles }) {
             label={isUserAlreadyAssignedActive ? t(`UNASSIGN`) : t(`ASSIGN`)}
             icon={isUserAlreadyAssignedActive ? "Close" : "DoubleArrow"}
             isSuffix={isUserAlreadyAssignedActive ? false : true}
-            onClick={(value) => (isUserAlreadyAssignedActive ? handleUpdateAssignEmployee(row) : handleAssignEmployee(row))}
+            onClick={(value) => (isUserAlreadyAssignedActive ? setUnassignPopup(row) : handleAssignEmployee(row))}
           />
         );
       },
@@ -549,6 +552,40 @@ function RoleTableComposer({ nationalRoles }) {
           onClose={closeToast}
         />
       )}
+
+      {unassignPopup && (
+        <PopUp
+          className={"popUpClass"}
+          type={"default"}
+          heading={t("USERTAG_CONFIRM_TO_UNASSIGN")}
+          equalWidthButtons={true}
+          children={[
+            <div>
+              <CardText style={{ margin: 0 }}>{t("USERTAG_CONFIRM_TO_UNASSIGN_DESC")}</CardText>
+            </div>,
+          ]}
+          onOverlayClick={() => {
+            setUnassignPopup(false);
+          }}
+          footerChildren={[
+            <Button
+              type={"button"}
+              size={"large"}
+              variation={"primary"}
+              label={t("YES")}
+              onClick={() => {
+                handleUpdateAssignEmployee(unassignPopup);
+              }}
+            />,
+            <Button type={"button"} size={"large"} variation={"secondary"} label={t("NO")} onClick={() => { setUnassignPopup(false); }} />,
+          ]}
+          sortFooterChildren={true}
+          onClose={() => {
+            setUnassignPopup(false);
+          }}
+        ></PopUp>
+      )}
+
     </>
   );
 }