Current Bill Cancellation UI Flow
Frontend Repo
Overview
Once the user logs in with WS_CEMP
or SW_CEMP
roles the BillGenie tree option is available on the left panel of the screen.
Workflow Details

Clicking on the BillGenie displays two options as seen in the screenshot below.

Click on the Bill Cancellation option. This routes the user to the search bill screen.
Search Bill
Objective: This option allows employees to search for active bills, download bills, or cancel bills.
For instance, a bill can be cancelled if the tax head information is entered wrong in a bill.
Route - mSeva

Technical Implementation
Initial page -
frontend/billSearch.js at master · egovernments/frontend
Initial MDMS call is made on page load

Example:
{
"code": "WS",
"headerBandLabel": "PAYMENT_COMMON_CONSUMER_CODE",
"pdfModule":"WNS",
"receiptKey": "ws-onetime-receipt",
"cancelReceipt":false,
"cancelBill": true,
"billKey": "ws-bill",
"arrears": true,
"buttons": [
{
"label": "COMMON_BUTTON_HOME",
"citizenUrl": "/wns-citizen/home",
"employeeUrl": "/wns/search"
}
]
}
Form rendering details available in
frontend/billSearchCard.js at master · egovernments/frontend
Table rendering details available in
frontend/searchResults.js at master · egovernments/frontend
The Bill Search API and formatting data is available in
frontend/function.js at master · egovernments/frontend
Table Structure
MUIDataTable
is used to implement the table component.Every column entry is treated as an object.
{
labelName: "Bill No.",
labelKey: "ABG_COMMON_TABLE_COL_BILL_NO"
}
Any customizations at column level are done through the
customBodyRender
hook available with the option property of the columns.

Data fetch, load and render
Once the data is fetched using egov-searcher/bill-genie/billswithaddranduser/_get
API, the returned data is formatted and dispatched to redux.
frontend/function.js at master · egovernments/frontend

As seen in the above screenshot, the data is assigned to a specific path inside props.
frontend/searchResults.js at master · egovernments/frontend

The table component now fetches the data from its props as shown below.

To cancel bills, employees have to click on the Cancel Bill option. The system navigates to the Bill Details page that displays the bill amount and other details. The bill can be cancelled from this page.
frontend/viewBill.js at master · egovernments/frontend
For bill details refer to the document here - Bill Details.
API Used
egov-mdms-service/v1/_search,
egov-searcher/bill-genie/billswithaddranduser/_get
Role Action Mapping
egov-mdms-service/v1/_search
954
egov-searcher/bill-genie/billswithaddranduser/_get
SUPERUSER
, EMPLOYEE
1804
Last updated
Was this helpful?