Payment: Attendance Approval Flow

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

@@ -97,7 +97,13 @@ module.exports = function (app) {
     "/plan-service",
     "/health-project",
     "/service-request",
-    "/census-service"
+    "/census-service",
+    "/health-attendance/v1/_search",
+    "/health-individual/v1/_search",
+    "/health-muster-roll",
+    "/health-expense/bill/v1/_search",
+    "/health-expense-calculator/v1/_calculate",
+    "/filestore/v1/files/id"
   ].forEach((location) => app.use(location, createProxy));
   ["/pb-egov-assets"].forEach((location) => app.use(location, assetsProxy));
   ["/mdms-v2/v2/_create"].forEach((location) => app.use(location, mdmsProxy));

health/micro-ui/web/micro-ui-internals/packages/modules/health-payments/package.json

@@ -26,7 +26,9 @@
     "react-hook-form": "6.15.8",
     "react-i18next": "11.16.2",
     "react-query": "3.6.1",
-    "react-router-dom": "5.3.0"
+    "react-router-dom": "5.3.0",
+    "react-data-table-component": "7.6.2"
+
   },
   "author": "Ramkrishna <[email protected]>",
   "license": "MIT"

health/micro-ui/web/micro-ui-internals/packages/modules/health-payments/src/Module.js

@@ -1,16 +1,26 @@
 import { Loader } from "@egovernments/digit-ui-react-components";
-import React,{useState} from "react";
+import React, { useState } from "react";
 import { useRouteMatch } from "react-router-dom";
 import { default as EmployeeApp } from "./pages/employee";
 import PaymentsCard from "./components/PaymentsCard";
 import { overrideHooks, updateCustomConfigs } from "./utils";
 import { ProviderContext } from "./utils/context";
+import BoundaryComponent from "./components/sample";
+import CampaignNameSelection from "./components/campaign_dropdown";
+import CustomInboxSearchComposer from "./components/custom_inbox_composer";
+import CustomInboxSearchLinks from "./components/custom_comp/link_section";
+import CustomSearchComponent from "./components/custom_comp/search_section";
+import CustomFilter from "./components/custom_comp/filter_section";
+import CustomInboxTable from "./components/custom_comp/table_inbox";
 
 export const PaymentsModule = ({ stateCode, userType, tenants }) => {
   const { path, url } = useRouteMatch();
   const tenantId = Digit.ULBService.getCurrentTenantId();
 
-  const moduleCode = ["payments"];
+  const hierarchyType = "MICROPLAN";
+
+  // const hierarchyType = window?.globalConfigs?.getConfig("HIERARCHY_TYPE") || "ADMIN";
+  const moduleCode = ["payments", `boundary-${hierarchyType}`];
   const modulePrefix = "hcm";
   const language = Digit.StoreData.getCurrentLanguage();
   const { isLoading, data: store } = Digit.Services.useStore({
@@ -19,18 +29,49 @@ export const PaymentsModule = ({ stateCode, userType, tenants }) => {
     language,
     modulePrefix,
   });
+  let user = Digit?.SessionStorage.get("User");
+  const { isLoading: isPaymentsModuleInitializing } = Digit.Hooks.payments.usePaymentsInitialization({
+    tenantId: tenantId,
+  });
 
-
-  return (
-    <ProviderContext>
-      <EmployeeApp path={path} stateCode={stateCode} userType={userType} tenants={tenants}/>
-    </ProviderContext>
+  const { isLoading: isMDMSLoading, data: mdmsData } = Digit.Hooks.useCustomMDMS(
+    Digit.ULBService.getCurrentTenantId(),
+    "HCM",
+    [{ name: "BOUNDARYTYPES" }, { name: "paymentsConfig" }],
+    {
+      cacheTime: Infinity,
+    },
+    { schemaCode: "PAYMENTS_MASTER_DATA" } //mdmsv2
   );
+
+  const sortedBoundaryData = mdmsData?.MdmsRes?.HCM?.BOUNDARYTYPES?.sort((a, b) => a.order - b.order);
+  const paymentsConfig = mdmsData?.MdmsRes?.HCM?.paymentsConfig?.[0];
+
+  Digit.SessionStorage.set("boundaryHierarchyOrder", sortedBoundaryData);
+  Digit.SessionStorage.set("paymentsConfig", paymentsConfig);
+
+  if (isPaymentsModuleInitializing || isMDMSLoading) {
+    return <Loader />;
+  } else {
+    return (
+      <ProviderContext>
+        <EmployeeApp path={path} stateCode={stateCode} userType={userType} tenants={tenants} />
+      </ProviderContext>
+    );
+  }
 };
 
 const componentsToRegister = {
   PaymentsModule,
-  PaymentsCard
+  PaymentsCard,
+  BoundaryComponent,
+  CampaignNameSelection,
+  //
+  CustomInboxSearchComposer,
+  CustomInboxSearchLinks,
+  CustomSearchComponent,
+  CustomFilter,
+  CustomInboxTable,
 };
 
 export const initPaymentComponents = () => {

health/micro-ui/web/micro-ui-internals/packages/modules/health-payments/src/components/BreadCrumbs.js

@@ -0,0 +1,142 @@
+import React, { useEffect, useState, Fragment } from "react";
+import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
+
+const BreadCrumbs = (props) => {
+    const [expanded, setExpanded] = useState(false);
+    const [crumbsToDisplay, setCrumbsToDisplay] = useState([...props?.crumbs]);
+
+    useEffect(() => {
+        if (props?.maxItems && props?.crumbs.length > props?.maxItems && !expanded) {
+            const startCrumbs = props.crumbs.slice(0, props?.itemsBeforeCollapse || Math.ceil(props.maxItems / 2));
+            const endCrumbs = props.crumbs.slice(
+                -1 * (props?.itemsAfterCollapse || Math.floor(props.maxItems / 2))
+            );
+
+            let updatedCrumbs = startCrumbs.concat(
+                [{ show: true, content: props?.expandText || "..." }],
+                endCrumbs
+            );
+            setCrumbsToDisplay(updatedCrumbs);
+        } else {
+            setCrumbsToDisplay([...props.crumbs]);
+        }
+    }, [props.crumbs, props.maxItems, expanded, props.itemsBeforeCollapse, props.itemsAfterCollapse, props?.expandText]);
+
+    function handleRedirect(path) {
+        const host = window.location.origin; // Dynamically get the base URL
+        window.location.href = `${host}${path}`;
+    }
+
+    function isLast(index) {
+        // Filter crumbs to only include those that are displayed
+        let validCrumbs = crumbsToDisplay?.filter((crumb) => crumb?.show === true);
+
+        // Check if all crumbs have the same `internalLink` or `externalLink`
+        const allHaveSameInternalLink = validCrumbs.every((crumb) => crumb.internalLink === validCrumbs[0].internalLink);
+        const allHaveSameExternalLink = validCrumbs.every((crumb) => crumb.externalLink === validCrumbs[0].externalLink);
+
+        // If all visible crumbs have the same link, determine last crumb by index
+        if (allHaveSameInternalLink || allHaveSameExternalLink) {
+            return index === validCrumbs.length - 1;
+        }
+
+        // Check if the current crumb is the last one in the validCrumbs list
+        return (
+            validCrumbs?.findIndex((ob) => {
+                const linkToCheck = ob?.externalLink || ob?.internalLink; // Use externalLink if it exists, else internalLink
+                const currentLink = crumbsToDisplay?.[index]?.externalLink || crumbsToDisplay?.[index]?.internalLink;
+
+                return linkToCheck === currentLink;
+            }) ===
+            validCrumbs?.length - 1
+        );
+    }
+
+    const handleCrumbClick = () => {
+        setExpanded(!expanded);
+    };
+
+    const validCrumbsMain = crumbsToDisplay?.filter((crumb) => crumb?.show === true);
+
+    return (
+        <ol
+            className={`digit-bread-crumb ${props?.className ? props?.className : ""}`}
+            style={props?.style}
+        >
+            {validCrumbsMain?.map((crumb, ci) => {
+                if (!crumb?.show) return null;
+                if (crumb?.isBack)
+                    return (
+                        <li
+                            key={ci}
+                            style={props?.itemStyle}
+                            className="digit-bread-crumb--item back-crumb-item"
+                        >
+                            <span onClick={() => window.history.back()}>{crumb.content}</span>
+                        </li>
+                    );
+
+                return (
+                    <Fragment>
+                        <li
+                            key={ci}
+                            style={props?.itemStyle}
+                            className="digit-bread-crumb--item"
+                        >
+                            {isLast(ci) || (!crumb?.internalLink && !crumb?.externalLink) ? (
+                                <span
+                                    className={`digit-bread-crumb-content ${isLast(ci) ? "current" : "default"}`}
+                                    style={props?.spanStyle}
+                                    onClick={(crumb.content === "..." || crumb.content === props?.expandText) ? handleCrumbClick : null}
+                                >
+                                    {crumb?.icon && crumb.icon}
+                                    {crumb.content}
+                                </span>
+                            ) : crumb?.externalLink ? (
+                                <Link
+                                    className="digit-bread-crumb-content"
+                                    onClick={() => handleRedirect(crumb?.externalLink)}
+                                >
+                                    {crumb?.icon && crumb.icon}
+                                    {crumb.content}
+                                </Link>
+                            ) : (
+                                <Link
+                                    to={{ pathname: crumb.internalLink, state: { count: crumb?.count }, search: crumb?.query }}
+                                    className={`digit-bread-crumb-content ${isLast(ci) ? "current" : "default"}`}
+                                >
+                                    {crumb?.icon && crumb.icon}
+                                    {crumb.content}
+                                </Link>
+                            )}
+                            {!isLast(ci) && (
+                                <div className="digit-bread-crumb-seperator">
+                                    {props?.customSeparator ? props?.customSeparator : "/"}
+                                </div>
+                            )}
+                        </li>
+                    </Fragment>
+                );
+            })}
+        </ol>
+    );
+};
+
+BreadCrumbs.propTypes = {
+    crumbs: PropTypes.array,
+    className: PropTypes.string,
+    style: PropTypes.object,
+    spanStyle: PropTypes.object,
+    customSeparator: PropTypes.element,
+    maxItems: PropTypes.number,
+    itemsAfterCollapse: PropTypes.number,
+    itemsBeforeCollapse: PropTypes.number,
+    expandText: PropTypes.string
+};
+
+BreadCrumbs.defaultProps = {
+    successful: true,
+};
+
+export default BreadCrumbs;