Payment: Attendance Approval Flow

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

@@ -97,7 +97,10 @@ 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"
   ].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("CONTEXT_PATH") || "ADMIN";
+  const moduleCode = ["payments", `boundary-${hierarchyType}`];
   const modulePrefix = "hcm";
   const language = Digit.StoreData.getCurrentLanguage();
   const { isLoading, data: store } = Digit.Services.useStore({
@@ -19,18 +29,104 @@ export const PaymentsModule = ({ stateCode, userType, tenants }) => {
     language,
     modulePrefix,
   });
+  let user = Digit?.SessionStorage.get("User");
+  const staffs = Digit.Hooks.payments.useProjectStaffSearch({
+    data: {
+      "ProjectStaff": {
+        "staffId": [user?.info?.uuid]
+      }
+    },
+    params: {
+      "tenantId": tenantId,
+      "offset": 0,
+      "limit": 100
+    },
+    config: {
+      select: (data) => {
+        return data?.map(item => {
+          return {
+            "id": item.projectId,
+            "tenantId": tenantId,
+            "userId": item.userId,
+          };
+        })
+      }
+    }
+  });
+
+  const staffProjects = staffs?.data;
+
+  const assignedProjects = Digit.Hooks.payments.useProjectSearch({
+    data: {
+      "Projects": staffProjects?.map((staff) => {
+        return {
+          "id": staff?.id,
+          "tenantId": tenantId,
+        };
+      })
+    },
+    params: {
+      "tenantId": tenantId,
+      "offset": 0,
+      "limit": 100
+    },
+    config: {
+      enabled: staffProjects?.length > 0 ? true : false
+    }
+  });
 
+  const IndividualRequestCriteria = {
+    url: `/health-individual/v1/_search`,
+    params: {
+      tenantId: tenantId,
+      offset: 0,
+      limit: 100,
+    },
+    body: {
+      Individual: {
+        userUuid: staffProjects?.map((staff) => {
+          return staff.userId;
+        })
+      }
+    },
+    config: {
+      enabled: staffProjects?.length > 0 ? true : false,
+      select: (data) => {
+        return data;
+      },
+    },
+  };
 
-  return (
-    <ProviderContext>
-      <EmployeeApp path={path} stateCode={stateCode} userType={userType} tenants={tenants}/>
-    </ProviderContext>
-  );
+  const { isLoading: isIndividualsLoading, data: IndividualData } = Digit.Hooks.useCustomAPIHook(IndividualRequestCriteria);
+
+
+  Digit.SessionStorage.set("staffProjects", assignedProjects?.data);
+  Digit.SessionStorage.set("UserIndividual", IndividualData?.Individual);
+
+
+  if (isLoading || staffs?.isLoading || assignedProjects?.isLoading || isIndividualsLoading) {
+    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 = () => {
@@ -39,4 +135,4 @@ export const initPaymentComponents = () => {
   Object.entries(componentsToRegister).forEach(([key, value]) => {
     Digit.ComponentRegistryService.setComponent(key, value);
   });
-};
+};

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

@@ -0,0 +1,132 @@
+import React, { useEffect, useReducer, useState, useMemo, use } from "react";
+
+import _ from "lodash";
+import CustomInboxSearchLinks from "./custom_comp/link_section";
+import CustomSearchComponent from "./custom_comp/search_section";
+
+import { useTranslation } from "react-i18next";
+import CustomFilter from "./custom_comp/filter_section";
+import CustomInboxTable from "./custom_comp/table_inbox";
+import { FilterCard, Toast } from "@egovernments/digit-ui-components";
+import BillSearchBox from "./BillSearchBox";
+
+const CustomBillInbox = () => {
+    const { t } = useTranslation();
+    const [showToast, setShowToast] = useState(null);
+    const [filterCriteria, setFilterCriteria] = useState(null);
+    const [selectedProject, setSelectedProject] = useState({});
+    //-------//
+
+    const [currentPage, setCurrentPage] = useState(1);
+    const [rowsPerPage, setRowsPerPage] = useState(5);
+    const [selectedStatus, setSelectedStatus] = useState("PENDINGFORAPPROVAL");
+
+    const [searchQuery, setSearchQuery] = useState(null);
+
+    //   useEffect(() => { }, [selectedProject]);
+
+    const handleProjectChange = (selectedProject) => {
+        // setSelectedProject(selectedProject);
+    };
+
+    const handleFilterUpdate = (newFilter) => {
+        // setFilterCriteria(newFilter);
+        // triggerMusterRollApprove(newFilter);
+    };
+
+    // useEffect(() => {
+    //   // handleCreateRateAnalysis();
+    //   // triggerMusterRollApprove();
+    // }, [totalRows, currentPage, rowsPerPage, searchQuery]);
+
+    // useEffect(() => {
+    //   setTotalRows(childrenData?.totalCount);
+    // }, [childrenData]);
+
+    const handlePaginationChange = (page) => {
+        setCurrentPage(page);
+
+        // triggerMusterRollApprove(filterCriteria, selectedStatus, rowsPerPage, page);
+    };
+    const handleRowsPerPageChange = (newPerPage, page) => {
+        setRowsPerPage(newPerPage); // Update the rows per page state
+        setCurrentPage(page); // Optionally reset the current page or maintain it
+        // refetchPlanEmployee();
+        // handleCreateRateAnalysis();
+        // triggerMusterRollApprove(filterCriteria, selectedStatus, newPerPage, page);
+    };
+    const callServiceOnTap = (status) => {
+        if (status.code == "HCM_AM_PENDING_FOR_APPROVAL") {
+            //   setRowsPerPage(5); // Update the rows per page state
+            //   setCurrentPage(1);
+            //   setSelectedStatus("PENDINGFORAPPROVAL");
+            //   triggerMusterRollApprove(filterCriteria, "PENDINGFORAPPROVAL", 5, 1);
+        } else {
+            //   setRowsPerPage(5); // Update the rows per page state
+            //   setCurrentPage(1);
+            //   setSelectedStatus("APPROVED");
+            //   triggerMusterRollApprove(filterCriteria, "APPROVED", 5, 1);
+        }
+    };
+
+    return (
+        <React.Fragment>
+            <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+                <div style={{ width: "100%", display: "flex", flexDirection: "row", gap: "24px" }}>
+                    <div style={{ width: "20%", display: "flex", flexDirection: "row" }}>
+                        <CustomInboxSearchLinks
+                            headerText={"HCM_AM_BILL_INBOX"}
+                            links={[
+                                {
+                                    url: "/employee/payments/my-bills",
+                                    text: "HCM_AM_MY_BILLS_LINK",
+                                },
+                            ]}
+                        ></CustomInboxSearchLinks>
+                    </div>
+                    <div style={{ width: "80%", display: "flex", flexDirection: "row" }}>
+                        <BillSearchBox onProjectSelect={handleProjectChange}></BillSearchBox>
+                    </div>
+                </div>
+
+                <div style={{ width: "100%", display: "flex", flexDirection: "row", gap: "24px" }}>
+                    <div
+                        style={{
+                            width: "20%",
+                            display: "flex",
+                            flexDirection: "row",
+                            height: "60vh",
+                            overflowY: "auto",
+                        }}
+                    >
+                        <CustomFilter projectData={selectedProject} onFilterChange={handleFilterUpdate}></CustomFilter>
+                    </div>
+                    <div style={{ width: "80%", display: "flex", flexDirection: "row", height: "60vh", minHeight: "60vh" }}>
+                        <CustomInboxTable
+                            // statusCount={childrenData?.statusCount}
+                            handleTabChange={callServiceOnTap}
+                            rowsPerPage={rowsPerPage}
+                            customHandleRowsPerPageChange={handleRowsPerPageChange}
+                        // customHandlePaginationChange={handlePaginationChange}
+                        // isLoading={childrenDataLoading}
+                        // tableData={childrenData?.data}
+                        // totalCount={childrenData?.totalCount}
+                        ></CustomInboxTable>
+                    </div>
+                </div>
+            </div>
+            {showToast && (
+                <Toast
+                    style={{ zIndex: 10001 }}
+                    label={showToast.label}
+                    type={showToast.key}
+                    // error={showToast.key === "error"}
+                    transitionTime={showToast.transitionTime}
+                    onClose={() => setShowToast(null)}
+                />
+            )}
+        </React.Fragment>
+    );
+};
+
+export default CustomBillInbox;

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

@@ -0,0 +1,66 @@
+import { SubmitBar, LinkLabel, Label } from "@egovernments/digit-ui-react-components";
+import React, { useContext, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Card, Dropdown, TextBlock, TextInput, ButtonGroup, Button } from "@egovernments/digit-ui-components";
+
+const BillSearchBox = ({ onLevelSelect }) => {
+    const { t } = useTranslation();
+
+
+    const onSubmit = (data, e) => {
+        onLevelSelect();
+    };
+
+    const clearSearch = () => {
+        onLevelSelect();
+    };
+
+    const closeToast = () => {
+        setShowToast(null);
+    };
+
+    const handleFilterRefresh = () => { };
+
+    return (
+        <React.Fragment>
+            <Card variant="search">
+                {/*<div style={{ maxWidth: "100%", width: "100%" }}>
+          <TextBlock body={t("HCM_AM_ATTENDANCE_ID")}></TextBlock>
+          <TextInput type="text"></TextInput>
+        </div>*/}
+                <div style={{ maxWidth: "100%", width: "100%" }}>
+                    <TextBlock body={`${t("HCM_AM_BILL_AGGREGATION_FOR_EMPLOYEE_MAPPED_AT")}`}></TextBlock>
+                    <Dropdown
+                        t={t}
+                        option={[
+                            { "name": "HCM_AM_DISTRICT_LEVEL", "code": 'HCM_AM_DISTRICT_LEVEL' },
+                            { "name": "HCM_AM_PROVIENCE_LEVEL", "code": "HCM_AM_PROVIENCE_LEVEL" }
+                        ]}
+                        name={"code"}
+                        optionKey={"name"}
+                        select={(value) => {
+                            //    handleProjectChange(value);
+                        }}
+                    />
+                </div>
+
+                <ButtonGroup
+                    buttonsArray={[
+                        <Button variation="teritiary" label={t(`HCM_AM_CLEAR`)} type="button" onClick={() => { }} size="large" />,
+                        <Button variation="primary" label={t(`HCM_AM_SEARCH`)} type="button" onClick={() => { }} size="large" />,
+                    ]}
+                ></ButtonGroup>
+
+                {/*showToast && <Toast 
+          error={showToast.error}
+          warning={showToast.warning}
+          label={t(showToast.label)}
+          isDleteBtn={true}
+          onClose={closeToast} />
+       */}
+            </Card>
+        </React.Fragment>
+    );
+};
+
+export default BillSearchBox;