Module Code

Before starting with Employee Module Code you should aware of these things.
Project structure:- Project Structure
Dependency:- Install Dependency
Import Components:- Import required components

Employee Module Card -

In the Employee module first, we create the Homecard like how we are creating for citizens.
So Employee card contains Total application, Inbox, and Create Birth-registration.

BRCard:-

In BrCard.js we are reusing the components that are already present in our digit-UI-component. we import the Icon and EmployeeModuleCard.

import { PersonIcon, EmployeeModuleCard } from "@egovernments/digit-ui-react-components";
import React from "react";
import { useTranslation } from "react-i18next";

const BRCard = () => {
  const ADMIN = Digit.Utils.hrmsAccess();
  if (!ADMIN) {
    return null;
  }
    const { t } = useTranslation();
    const tenantId = Digit.ULBService.getCurrentTenantId();
   
    const propsForModuleCard = {
        Icon : <PersonIcon/>,
        moduleName: t("Birth Registration"),
        kpis: [
            {
                // count:  isLoading ? "-" : data?.EmployeCount?.totalEmployee,
                label: t("TOTAL Application"),
                link: `/digit-ui/employee/br/Inbox`
            },
         
        ],
        links: [
            {
                label: t("Inbox"),
                link: `/digit-ui/employee/br/Inbox`
            },
            {
                label: t("Create Birth-Registration"),
                link: `/digit-ui/citizen/br/birth`
            }           
        ]
    }

    return <EmployeeModuleCard {...propsForModuleCard} />
};

export default BRCard;

Inbox Screen:-
On Birth-Registration card we add the Inbox link so once we open the inbox will able to see the search , filter ,create and all List of birth-register application.

Inbox.js -

import React, { useState, useCallback ,  useEffect  } from "react";
import { useTranslation } from "react-i18next";
import { format, isValid } from "date-fns";
import { Header ,Loader } from "@egovernments/digit-ui-react-components";
import DesktopInbox from "./DesktopInbox";
import axios from 'axios';
const Inbox = ({ tenants, parentRoute }) => {
  const { t } = useTranslation()
  Digit.SessionStorage.set("ENGAGEMENT_TENANTS", tenants);
  const tenantId = Digit.ULBService.getCurrentTenantId();
  const [pageSize, setPageSize] = useState(10);
  const [pageOffset, setPageOffset] = useState(0);
  const [searchParams, setSearchParams] = useState({
    eventStatus: [],
    range: {
      startDate: null,
      endDate: new Date(""),
      title: ""
    },
    ulb: tenants?.find(tenant => tenant?.code === tenantId)
  });
  let isMobile = window.Digit.Utils.browser.isMobile();
  const [data, setData] = useState([]);
const {isLoading } = data;
  // Using useEffect to call the API once mounted and set the data
  useEffect(() => {
    (async () => {
      const result = await axios("https://62f0e3e5e2bca93cd23f2ada.mockapi.io/birth");
      setData(result.data);
      console.log("gooo" ,result.data);
    })();
  }, []);

  const getSearchFields = () => {
    return [
      {
        label: t("EVENTS_ULB_LABEL"),
        name: "ulb",
        type: "ulb",
      },
      {
        label: t("Baby's NAME"),
        name: "babyLastName"
      }
    ]
  }

  const links = [
    {
      text: t("Create Birth-Registration"),
      link: "/digit-ui/citizen/br/birth",
    }
  ]


    
  const onSearch = (params) => {
    let updatedParams = { ...params };
    if (!params?.ulb) {
      updatedParams = { ...params, ulb: { code: tenantId } }
    }
    setSearchParams({ ...searchParams, ...updatedParams });
  }

  const handleFilterChange = (data) => {
    setSearchParams({ ...searchParams, ...data })
  }

  const globalSearch = (rows, columnIds) => {
    // return rows;
    return rows?.filter(row =>
     
      (searchParams?.babyLastName ? row.original?.babyLastName?.toUpperCase().startsWith(searchParams?.babyLastName.toUpperCase()) : true) 
     ) }

  const fetchNextPage = useCallback(() => {
    setPageOffset((prevPageOffSet) => ((parseInt(prevPageOffSet) + parseInt(pageSize))));
  }, [pageSize])

  const fetchPrevPage = useCallback(() => {
    setPageOffset((prevPageOffSet) => ((parseInt(prevPageOffSet) - parseInt(pageSize))));
  }, [pageSize])

  const handlePageSizeChange = (e) => {
    setPageSize((prevPageSize) => (e.target.value));
  };


  if (isLoading) {
    return (
      <Loader />
    );
  }
  

  return (
    <div>
      <Header>
        {t("Birth-registration")}
      
      </Header>
      <p>{}</p>
      <DesktopInbox
        t={t}
        data={data}
        links={links}
        parentRoute={parentRoute}
        searchParams={searchParams}
        onSearch={onSearch}
        globalSearch={globalSearch}
        searchFields={getSearchFields()}
        onFilterChange={handleFilterChange}
        pageSizeLimit={pageSize}
        totalRecords={data?.totalCount}
        title={"Birth-registration"}
        iconName={"calender"}
        currentPage={parseInt(pageOffset / pageSize)}
        onNextPage={fetchNextPage}
        onPrevPage={fetchPrevPage}
        onPageSizeChange={handlePageSizeChange}
      />
    </div>
  );
}

export default Inbox;

DesktopInbox.js:-

import React ,{useState, useEffect}from "react";
import { format } from "date-fns";
import { Link } from "react-router-dom";
import { Loader } from "@egovernments/digit-ui-react-components";
import ApplicationTable from "./ApplicationTable";
import EventLink from "./EventLink";
import axios from 'axios';
import Search from "./Search";
import DropdownUlb from "./DropdownUlb";
import Filter from "./Filter";


const DesktopInbox = ({ isLoading,  t, onSearch, parentRoute, title, iconName, links, globalSearch, searchFields, searchParams, onFilterChange, pageSizeLimit, totalRecords, currentPage, onNextPage, onPrevPage, onPageSizeChange }) => {


  
  const [data, setData] = useState([]);
  useEffect(() => {
    (async () => {
      const result = await axios("https://62f0e3e5e2bca93cd23f2ada.mockapi.io/birth");
      setData(result.data);
      console.log("gooo" ,result.data);
    })();
  }, []);

  

  const columns = React.useMemo(() => {
    return [
      {
        Header: t("Baby's First Name"),
        accessor: "babyFirstName",
        Cell: ({ row }) => {
         
          return (
            <div>
              <span className="link">
                <Link to={`details/${row.original.id}`}>{row.original["babyFirstName"]}</Link>
              </span>
            </div>
          );
        },
      },
      {
        Header: "Baby's Last Name",
        accessor: "babyLastName"
      },
     
      {
        Header: "City",
        accessor: "permanentCity"
      },
      {
        Header: "Hospital Name",
        accessor: "hospitalName"
      },
      
    ]
  })

  let result;
  
 
  if (isLoading) {
    result = <Loader />
  } else if (data?.length > 0) {
    result = <ApplicationTable
      t={t}
      data={data}
      columns={columns}
      globalSearch={globalSearch}
      onSearch={searchParams}
      pageSizeLimit={pageSizeLimit}
      totalRecords={totalRecords}
      currentPage={currentPage}
      onNextPage={onNextPage}
      onPrevPage={onPrevPage}
      onPageSizeChange={onPageSizeChange}
      getCellProps={(cellInfo) => {
        return {
          style: {
            minWidth: cellInfo.column.Header === t("ES_INBOX_APPLICATION_NO") ? "240px" : "",
            padding: "20px 18px",
            fontSize: "16px",
          },
        };
      }}
    />
  }

  return (
    <div className="inbox-container">
      <div className="filters-container">
      <EventLink title={"Birth-registration"} icon={iconName} links={links} />
        <div>
          <Filter onFilterChange={onFilterChange} searchParams={searchParams} />
        </div>
      </div>
      <div style={{ flex: 1 }}>
        <Search
          t={t}
          onSearch={onSearch}
          type="desktop"
          searchFields={searchFields}
          isInboxPage={true}
          searchParams={searchParams}
        />
        
        <div className="result" style={{ marginLeft: "24px", flex: 1 }}>
       {result}
        </div>
      </div>
    </div>
  )
}

export default DesktopInbox;

ApplicationTable:-

In ApplicationTable we are importing the Table where it’s already present in our digit-UI-react-components. so we reusing this component. In Table, we are passing the data, column, global search , onSearch, filter, pagination, pagesize limit, total record, current page, Next page, PreviousPage, pagesizechange.

Event Link: -
In Event Link, we are creating the create Birth-register module small card and adding the create link there.

Search:-

Filter:-

Routing:-

Register Details:-

On Index Page, we are able to see the table in the table Baby’s First name is accessible we can click on which information we need to see in detail. for the details page, we are creating the Register Details Page.

Module.js:-
module.js is the entry point where we can register all components and Modules.

So After adding all components to the module.js again we need to enable modules into the web->src-> app.js and in example->src->index.js. there we need to import.

App.js:-

index.js:-