-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
mdulko
committed
Mar 29, 2024
1 parent
bc8eadc
commit b6b412c
Showing
6 changed files
with
298 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
103 changes: 103 additions & 0 deletions
103
src/buq/components/MOHApproval/MOHFinalApprovalTable.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| import React, { useMemo } from "react"; | ||
| import Table from "../../../react-components/table/table"; | ||
| import WebTooltip from "../../../react-components/modals/web-tooltip"; | ||
| import { Link } from "react-router-dom"; | ||
| import ResponsiveButton from "../../../react-components/buttons/responsive-button"; | ||
| import useLocalStorage from "../../../react-hooks/useLocalStorage"; | ||
| import {STORAGE_MOH_APPROVAL_PARAMS} from "../../utils/constants"; | ||
| import { addThousandsSeparatorsForStrings } from '../../utils/helpers'; | ||
|
|
||
| const MOHApprovalTable = ({ data, redirectUrl, districtLvl = false }) => { | ||
| const { storedItems: { mohApprovalParams }, handleSaveInLocalStorage } = useLocalStorage(); | ||
|
|
||
| const columns = useMemo( | ||
| () => [ | ||
| { | ||
| Header: () => ( | ||
| <div className="header-moh-approve-status-icon"> | ||
| <div>Status</div> | ||
| <WebTooltip | ||
| shouldDisplayTooltip={true} | ||
| tooltipContent={"All facilities have reported in this period"} | ||
| > | ||
| <i className="fa fa-info-circle"></i> | ||
| </WebTooltip> | ||
| </div> | ||
| ), | ||
| accessor: "status", | ||
| Cell: () => ( | ||
| <div className="fa-check-container"> | ||
| <i className="fa fa-check"></i> | ||
| </div> | ||
| ), | ||
| }, | ||
| { | ||
| Header: `${districtLvl ? "District" : "Facility Name"}`, | ||
| accessor: `${districtLvl ? "district" : "facilityName"}`, | ||
| }, | ||
| { | ||
| Header: "Facility Type", | ||
| accessor: "facilityType", | ||
| }, | ||
| { | ||
| Header: "Pharmaceuticals", | ||
| accessor: "pharmaceuticals", | ||
| Cell: ({ value }) => addThousandsSeparatorsForStrings(value), | ||
| }, | ||
| { | ||
| Header: "Medical supplies & Equipment", | ||
| accessor: "medicalSupplies", | ||
| Cell: ({ value }) => addThousandsSeparatorsForStrings(value), | ||
| }, | ||
| { | ||
| Header: "Radiology (x-rays consumables)", | ||
| accessor: "radiology", | ||
| Cell: ({ value }) => addThousandsSeparatorsForStrings(value), | ||
| }, | ||
| { | ||
| Header: "Diagnostics supplies & Equipment", | ||
| accessor: "diagnosticsSupplies", | ||
| Cell: ({ value }) => addThousandsSeparatorsForStrings(value), | ||
| }, | ||
| { | ||
| Header: "Dental supplies & Equipment", | ||
| accessor: "dentalSupplies", | ||
| Cell: ({ value }) => addThousandsSeparatorsForStrings(value), | ||
| }, | ||
| { | ||
| Header: "Actions", | ||
| accessor: "id", | ||
| Cell: ({ row: { values } }) => { | ||
| if (districtLvl) { | ||
| handleSaveInLocalStorage(STORAGE_MOH_APPROVAL_PARAMS, { | ||
| forecastingPeriodId: mohApprovalParams?.forecastingPeriodId, | ||
| programId: mohApprovalParams?.programId, | ||
| region: mohApprovalParams?.region, | ||
| district: values.district | ||
| }) | ||
| } | ||
| return ( | ||
| <Link to={`${redirectUrl}/${data.facilityId}/${values.id}`}> | ||
| <ResponsiveButton className="proceed"> | ||
| <span>View</span> | ||
| </ResponsiveButton> | ||
| </Link> | ||
| ) | ||
| }, | ||
| }, | ||
| ], | ||
| [] | ||
| ); | ||
|
|
||
| return ( | ||
| <Table | ||
| columns={columns} | ||
| data={data ?? []} | ||
| noItemsMessage="No reports available" | ||
| customReactTableStyle="moh-approve-buq" | ||
| customReactTableContentStyle='moh-approve-buq-content' | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default MOHApprovalTable; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,157 @@ | ||
| import React, { useState, useMemo, useEffect } from 'react'; | ||
| import { toast } from 'react-toastify'; | ||
| import InputWithSuggestionsAndValidation from '../../../react-components/inputs/input-with-suggestions-and-validation'; | ||
| import useBuqCommonFuncs from '../../../react-hooks/useBuqCommonFunctions'; | ||
| import Table from '../../../react-components/table/table'; | ||
| import ResponsiveButton from '../../../react-components/buttons/responsive-button'; | ||
| import Checkbox from '../../../react-components/inputs/checkbox'; | ||
| import ActionBar from '../../../react-components/ActionBar'; | ||
| import Modal from '../../../admin-buq/components/Modal/Modal'; | ||
| import ConfirmModalBody from '../../../react-components/ConfirmModalBody'; | ||
| import { Link } from 'react-router-dom'; | ||
| import { STORAGE_MOH_APPROVAL_PARAMS } from '../../utils/constants'; | ||
| import WebTooltip from '../../../react-components/modals/web-tooltip'; | ||
| import useGeographicZoneGroup from '../../../react-hooks/useGeographicZoneGroup'; | ||
| import useServerService from '../../../react-hooks/useServerService'; | ||
| import useLocalStorage from '../../../react-hooks/useLocalStorage'; | ||
| import useCostCalculationRegion from '../../../react-hooks/useCostCalculationRegion'; | ||
| import ModalErrorMessage from '../../../react-components/ModalErrorMessage'; | ||
| import { addThousandsSeparatorsForStrings } from '../../utils/helpers'; | ||
| import MOHApprovalTable from "./MOHApprovalTable"; | ||
| import useCostCalculationDistrictOrFacility from "../../../react-hooks/useCostCalculationDistrictOrFacility"; | ||
| import MOHFinalApprovalTable from "./MOHFinalApprovalTable"; | ||
|
|
||
| const MohForFinalApproval = ({ loadingModalService, facilityService }) => { | ||
| const { forecastingPeriodsParams } = useBuqCommonFuncs(); | ||
| const { geographicZoneParams } = useGeographicZoneGroup(); | ||
|
|
||
| const [noneSelectedGroup, setNoneSelectedGroup] = useState(false); | ||
| const [noneSelectedForecastingPeriod, setNoneSelectedForecastingPeriod] = | ||
| useState(false); | ||
| const [group, setGroup] = useState(); | ||
| const [forecastingPeriodId, setForecastingPeriodId] = useState(); | ||
| const [data, setData] = useState([]); | ||
|
|
||
| const buqService = useServerService('buqService'); | ||
|
|
||
| const { regionData, programId, fetchRegionData } = useCostCalculationRegion( | ||
| group, | ||
| forecastingPeriodId, | ||
| loadingModalService | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| const groupValues = geographicZoneParams[0]; | ||
| if (group === undefined) { | ||
| setGroup(groupValues) | ||
| } | ||
| }, [geographicZoneParams]) | ||
|
|
||
| const fetchBuqForFinalApproval = () => { | ||
| console.log(programId, forecastingPeriodId, group); | ||
|
|
||
| const elo = buqService.forFinalApproval(programId, forecastingPeriodId, group.value).then(function(response) { | ||
| console.log(response); | ||
|
|
||
| setData(response.content); | ||
| }); | ||
| }; | ||
|
|
||
| const handleSearchButton = () => { | ||
| if (!group) { | ||
| setNoneSelectedGroup(true); | ||
| } | ||
| if (!forecastingPeriodId) { | ||
| setNoneSelectedForecastingPeriod(true); | ||
| } | ||
| if (group && forecastingPeriodId) { | ||
| fetchBuqForFinalApproval(); | ||
| // fetchRegionData(); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <h2 className="bottom-line">Consolidated Summary</h2> | ||
| <div className="approve-buq-page-container"> | ||
| <div className="approve-buq-page-left"> | ||
| <div className="approve-buq-select-section"> | ||
| <div className="approve-buq-select"> | ||
| <p className="is-required">Group</p> | ||
| <InputWithSuggestionsAndValidation | ||
| data={geographicZoneParams} | ||
| defaultValue={geographicZoneParams[0]} | ||
| displayValue="name" | ||
| placeholder="Select group" | ||
| onClick={(value) => { | ||
| setGroup(value); | ||
| setNoneSelectedGroup(false); | ||
| }} | ||
| isInvalid={noneSelectedGroup} | ||
| displayInformation={true} | ||
| /> | ||
| </div> | ||
| <div className="approve-buq-select"> | ||
| <p className="is-required">Forecasting period</p> | ||
| <InputWithSuggestionsAndValidation | ||
| data={forecastingPeriodsParams} | ||
| defaultValue={forecastingPeriodsParams.at(-1)} | ||
| displayValue="name" | ||
| placeholder="Select period" | ||
| onClick={(value) => { | ||
| setForecastingPeriodId(value); | ||
| setNoneSelectedForecastingPeriod(false); | ||
| }} | ||
| isInvalid={noneSelectedForecastingPeriod} | ||
| displayInformation={true} | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className="approve-buq-button"> | ||
| <button | ||
| className="primary" | ||
| type="button" | ||
| onClick={() => handleSearchButton()} | ||
| > | ||
| Search | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <div className="approve-buq-page-container"> | ||
| <MOHFinalApprovalTable | ||
| data={data} | ||
| redirectUrl={`/buq/national-approve/${group?.value}`} | ||
| /> | ||
| </div> | ||
| </div> | ||
| {/*<Modal*/} | ||
| {/* // isOpen={displayFinalApproveModal}*/} | ||
| {/* children={[*/} | ||
| {/* <ConfirmModalBody*/} | ||
| {/* // onConfirm={handleFinalApproveAction}*/} | ||
| {/* confirmMessage={*/} | ||
| {/* 'Are you sure you want to approve this forecasting?'*/} | ||
| {/* }*/} | ||
| {/* // onCancel={() => setDisplayFinalApproveModal(false)}*/} | ||
| {/* confirmButtonText={'Approve'}*/} | ||
| {/* />,*/} | ||
| {/* ]}*/} | ||
| {/* sourceOfFundStyle={true}*/} | ||
| {/*/>*/} | ||
| {/*<ModalErrorMessage*/} | ||
| {/* isOpen={displayFinalApproveErrorModal}*/} | ||
| {/* customMessage="At least one pending approval needs to be selected"*/} | ||
| {/* onClose={() => setDisplayFinalApproveErrorModal(false)}*/} | ||
| {/*/>*/} | ||
| {/*<ActionBar*/} | ||
| {/* onFinalApproveAction={() => setDisplayFinalApproveModal(true)}*/} | ||
| {/* finalApproveButton={true}*/} | ||
| {/* cancelButton={false}*/} | ||
| {/* totalCostInformation={false}*/} | ||
| {/* sourceOfFundButton={false}*/} | ||
| {/*/>*/} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default MohForFinalApproval; |