Overview

Users can look for the list of the properties registered under their mobile number in My Properties Tab. Each Property for the initial view will display Property Id, Owner Name, Address and status, with view details option, through which User can look up more details about the property registered. If users do not find the property looking for, new property can be registered using the below link “Click here to register new Property”.

Once the user clicks on View Details, the Property Information Page is displayed with all the necessary information about the property.

Technical Implementation Details

Click here to fetch the working code for the My Properties and Property Details common Index.

The template for My properties and Property Information page is present inside pt/pages/citizen/MyProperties. The list of properties is retrieved by calling the search API "/property-services/property/_search".

This API is called using the React hook present inside the index of My Properties and Property information page, a single property is being loaded, bypassing the unique Property Id in the search API.

If search API result is successful, Assessment Search API is called to know the assessment status i.e /property-services/assessment/_search.

If the assessment object returned fetches assessment array details then the fetch bill API is called in order to retrieve the payment details for the particular property. API is /billing-service/bill/v2/_fetchbill

Following is the hook used for the property search API, assessment search and fetch bill.

const { isLoading, isError, error, data } = Digit.Hooks.pt.usePropertySearch(tenantId);
const assessmentData = await Digit.PTService.assessmentSearch({ tenantId, filters: { propertyIds } });
billData = await Digit.PaymentService.fetchBill(tenantId, {
     businessService: "PT",
     consumerCode: propertyIds,
   });

MDMS

No MDMS data is used here, all the data is loaded from Search API.

Localization

For My Properties also the Localization keys are added to the ‘rainmaker-pt’ locale module. To change, update or add, any new localization key is done in the same locale module only.

Overview

This page provides the user interface and API details for My Applications feature in the PT module. Users can review the list of applications and their status registered under their mobile number in the My Applications tab. Initially, only four application will load at once. If the user wants to look for more, the “Load More” option needs to be clicked. Each Application for the initial view will display Application No, Service Category, Property Id, Application Type and status, with Track option, that enables the user to look up more details about the Application. If a user is unable to find their property details on the system, a new Application can be raised using the link provided at the bottom of the page.

Once the user clicks on the Track Button, the Application Details Page is displayed with all the necessary information about the application.

Timeline component: The timeline component is present at the end of the application details which tells about the current status and history of the application passing through various workflows and actions taken.

Technical Implementation Details

Click here to fetch the working code details for My Applications and Application Details common Index.

The template for My Application is present under pt/pages/citizen/PTMyApplications and the Application Details page is present inside pt/pages/citizen named as PTApplicationDetails. The list of Applications is retrieved by calling the search API "/property-services/property/_search"

This API is called using the React hook present inside the index of PTMyapplication and PTApplicationDetails page, a single application is being loaded, bypassing the unique Property Id in the search API.

Following is the hook used for the property search API.

const { isLoading, isError, error, data } = Digit.Hooks.pt.usePropertySearch(tenantId);

Create and Update Util Function

The two main util function and the objective of it are given below:

Create Util Function: While going through the Create flow, all the inputs that the user has entered are stored in a different structure. Since the units are not separated in the flow but incorporated according to each ground, the storing structure is different from the request body of Create API. This function transforms the flow of stored data into the requested body format.

Click here to fetch the code.

Update Util Function: Click here to find detailed information about this function.

MDMS

No MDMS data is used here, all the data is being loaded from Search API.

Localization

For My Applications also the Localization keys are added in the ‘rainmaker-pt’ locale module same as My properties and create. To change, update or add any new localization key is done in the same locale module only.

Overview

This page provides detailed UI information on the Create Property feature available in the Property Tax module.

The objective is to provide user facilities to add a new property, view the property details and the application currently on their number. The feature allows users to update the property or edit the application.

Create Property

Users can add new property using the Create Property button, and while going through the workflow, can add all the valid information, according to the question asked. At the end of the flow, a Check page will be displayed on which the user can cross verify the information entered. On submitting, the application is created.

Create Property Flow

Property Tax information screen will be displayed after login, which helps the user to understand the necessary documents needed to complete the new registration for the property.

Property Details Flow

The user needs to enter the details about the property first. Below is the flow chart for the property details flow**.**

Assessment Details Flow

Then the user will be asked about the assessment details, which contains information about each floor and basement.

Address Details Flow

After entering the details of the property, the user needs to enter the address of the property, where it is located. The flow is straightforward, without any conditional routing.

Users can pinpoint the location in the Geo-location map, according to which pin code and city, as well as locality, is auto-populated.

Owner Details Flow

Finally, the user needs to enter the details, about the property owner, it can be institutional - (Government/ Private) or Single/Multiple Owner. According to which the details will be filled.

Check Page and Acknowledgement Screen

Users can cross-verify the data entered throughout the flows in the Check page. Click on the change button adjacent to the relevant data allows users to change/update the entered data. The user is redirected to the relevant page where data needs to be changed. Repeat the successive flows to submit the application.

For Registration of property, Create API is called. Following is the snippet of the Create API used:1create: "/property-services/property/_create"

If the API response is successful, then the Acknowledgement Screen is displayed, otherwise Failed Acknowledgement Screen is displayed.

Technical Implementation Details

All the screens have been developed using the new-UI structure followed previously in FSM and PGR.

The link for the Create Property Main Index is given below, it can be used to understand the starting point of the flow:

https://github.com/egovernments/digit-ui-internals/blob/development/packages/modules/pt/src/pages/citizen/Create/index.js

PT (Property Tax) Module has been segregated into a specified structure. All the screen configuration is inside PageComponent Folder, and the configuration for routing of the pages are mentioned in the config folder which is common for both Citizen as well as Employee. The snippet for folder structure and routing configuration is given below.

Pages Folder is where the high-level configuration for controlling the whole flow is mentioned, for citizens and employees. Citizen flows include Create, Edit, My Properties, My Application and Search Property. The search property flow carries the index (the main starting point of the whole flow).

After completing the flow the user can download the acknowledgement PDF form of the property created. Click here to find the config for the PDF generation.

Utils Folder basically contains all the methods which are being used throughout the PT module. In case any common method needs to be declared here, it can be imported into other files.

For creating an Application the Create API from Property Tax is being called using the React hooks, which has been declared under hooks/elements/PT as PTService.

MDMS Data

Throughout the flows, data across a few pages are imported from MDMS. Following is the list of pages that are using MDMS data. These pages .js files can be found under page components.

Data React Hooks are used for calling MDMS, so that it could be shared throughout the modules.

Below is the little code snippet for the call used for MDMS.

const { data: OwnerShipCategoryOb } = Digit.Hooks.pt.usePropertyMDMS(stateId, "PropertyTax", "OwnerShipCategory");

Localization

Localization keys are added under the ‘rainmaker-pt’ locale module. In future, if any new labels are implemented in the Property Tax (Citizen) they should also be pushed in the locale DB under rainmaker-pt locale module. Below is an example of few locale labels.

API Call Role Action Mapping

Documents and Resource Links

Objective: To provide employees with the ability to Edit property Details (except Owner Details).

Edit Application

The Edit form can be used to update the details of an approved property, or whenever an application is in a workflow state that allows/require employees to make changes.

All the updatable Input fields are enabled, and all the fields related to owner details are disabled.

After editing and clicking submit when the user is successful the user is redirected to a success screen similar to that in Employee Create.

Technical details

The implementation of the Edit Form can be found in:

The document details are implemented similar to the create application and uses the same MDMS configurations.

APIs Called:1property-services/property/_update

** The Update API is supplied with updated property values from the form, and also all the units that were added at the time of creation are set with active : false , while the new units are set to be active : true

even if no change is made to the units.

Acknowledgement Screen

If the Property Update is successful. then the employee is directed to this screen that shows the Acknowledgement Id and option to download a pdf of the acknowledgement containing property details.

Role Actions

Overview

The Quick Pay feature allows a citizen to quickly view or pay all his pending bills for Property Tax (or any other supported business Service) by clicking links directly from the Digit-UI home screen.

Clicking on the Property Tax link in the Quick Pay section, a user is logged in and redirected to the My Bills Screen. Else, the user has to log in using his mobile number and the OTP sent to the number. The user is redirected to the My Bills screen.

On the My Bills screen, the user finds his pending property Tax bills (displayed as cards) for registered properties. The user can click on the View Details button of the corresponding card to check the detailed bill summary which takes him to the bill details page. There is also a link for the case when the user is unable to find the property tax bills.

The Bill Details screen shows a list of various categories of taxes that are present. After checking the user can select to pay either the full amount or custom amount, which cannot be less than ₹100 and not more than the total tax. These restrictions, however, are customizable as per ULB requirement and can be changed through MDMS.

Click on the Proceed To Pay button redirects the user to the Pay screen. The user is asked to select the payment gateway from a bunch of radio buttons, and then after clicking pay, the user is redirected to the bank payment gateway.

After making a successful payment through the bank gateway, the user is redirected to the response screen which shows the details of the payment and other bill details.

In case the payment fails for any reason the response screen shows the message, that the payment transaction has failed.

Use Case: when user wants to pay for Property for a different mobile number:

My Bills page only displays the properties with pending Taxes, which are associated with the mobile number which is logged in. But if a user wants to search for any other property, then he can click on the link below the My Bills screen which will take the user to the search screen.

On the Search screen, the user can search a property by mobile Number, a unique property ID, or an existing property ID. After mentioning the parameters the search takes the user to the search results screen. Where user can see all the properties with the matching criteria, whether or not they have pending taxes.

From Here on clicking view Details a user is redirected to the bill-details Screen, for the property, just as in the case of My Bills Screen.

Technical Details

My Bills Screen

An MDMS call is made to this page to fetch details based on the defined restrictions such as partial payment is allowed or not, advance payment allowed or not, minimum payable amount etc. for the particular business Service which is supplied into URL.

The MDMS criteria used here for fetching MDMS details are:

Also, the pending bills are fetched for the citizen for the specific business service using the custom hook, that fetches bill for logged-in mobile number.

On this page, for each business service, there is a configuration stored to define what part of the bill is to be displayed.

The configuration returns an object of structure.

Here my-bill key has config for the my-bills screen, this configuration decides what details to show on the card for each service from the bill object returned through fetchBill API.

It is an array of objects, where each object puts the bill detail on the My-Bills bill card.

Each object contains 4 properties ie keyValue, keyPath, fallback, noteStyle. The keynote config is added into the Digit component Registry as getBillDetailsConfigWithBusinessService

Bill Details Screen

It checks for various payment restrictions which are fetched from the MDMS on above mentioned MY Bills description, and also all the tax heads that are to be displayed in the summary are also fetched from the same MDMS.

The structure for payment rule response from the MDMS are -

partPaymentAllowed key when true allows payment less than bill details to be paid otherwise the user can pay only the bill Amount.

minAmountPayable is the minimum bill amount a user can pay.

isAdvanceAllowed if the true user can enter the amount more than the specified.

Payment Screen

The payment screen fetches the payment gateways from an MDMS call.

Response Screen

Search Screen

Search Result Screen

Adding a new Bill detail for the business Service

The keynote config is responsible for adding the new bill UI for adding a new Bill for a business Service.

API Call Role Action Mapping

Objective: To provide employees with the functionality to search property (whether Active or in workflow). based on locality, owner mobile, or unique Property Id.

The employee also can see the dues for property within the search results and can choose to pay the dues if any, by clicking on collect tax.

Users can also view the current property Details page, to view Property Details, where employees can perform actions like assessment, Updation and Mutation, on an approved active Property.

Technical Details

The file for search can be found in:

APIs

The 1st API is used to fetch all the localities, based on the logged**-**in tenant.

The 2nd API is used to fetch the search Table data.

The 3rd API is used to fetch the bills for showing the due taxes present in search results.

Property Details Page

This page is visible to the employee when he clicks the property Id of property in search.

Here employees can see the latest approved Property Details. The employee also has the option to start property assessment, transfer ownership, and Edit Property details flow.

The employee also has the option to view history - this enables the users to view the owner details within the history of the property.

Technical Implementation

The code details can be found in:

APIs

Same as in the case of Application details, But here, The latest approved data is shown and any data which is not in the workflow is filtered out.

Assessment Popup

When an employee selects the action to assess property from the property details page of active property,

A popup is shown having a list of Financial Years:-

A financial Year is selected for the assessment of the property.

Technical Details

The Financial Years are fetched from the MDMS:

Assessment Screen

When selected and clicked on Assess Property the Property Assessment Screen is displayed.

This screen gives the assessment details of the selected financial year from the popup. After clicking on Assess Property, the button changes to “Proceed To Pay” which takes the employee to the common pay screen for employees.

Technical Details

The file for the assessment Details page can be found at the following link :

API Used

The 1st API is provided with financial Year and property Id as parameters to get the payment estimations for the Property.

The 2nd API is used to fetch Property Details.

The 3rd API is used to create an Assessment of the property. Which marks property with the estimated tax.

Role Actions

Objective: To provide citizens with the functionality to apply for Ownership Transfer for an active property.

The Transfer of Ownership Option is provided to citizens on the home screen in the citizen App, under property Tax card.

Upon clicking on “Transfer Property Ownership/Mutation” link, users are taken to property search page just like in case of “search & Pay” option, where he can search for the property he wants to search the property for.

After searching the property the user is shown the property details for the properties based on the search criteria. With Total Dues on top of the card.

If there are dues owed on the property (unpaid taxes), then users are shown a popup stating that the citizen has to clear his dues first. with a proceed to pay button that takes citizens to the common pay page, just like in the case of Search & Pay.

In case of dues cleared the citizen is taken to the Docs required Page, just like in the case of Employee Mutation, where he is shown the list of docs he is supposed to have in order to be able to transfer the property.

on this page after clicking on Transfer of Ownership, the citizen is made to go through the Ownership Transfer flow where he fills in the Ownership details and Mutation Details. After completing the flow citizen is shown with the success screen with his application number and the option to download his acknowledgement as a pdf.

Technical Details

The code for citizen mutation can be found in the link:

MDMS data

The MDMS data is the same as in the case of employee Mutation Screen.

API used

The citizen mutation calls the property-services/property/_update API to update the property status after that the application is gone through the Employee workflow to complete the transfer.

**When Update API is called the documents are updated for the property according to the following snippet:-

Here originalProperty is the property data before mutation, and mutationDocs is the MDMS response for Mutation Docs.

Role Actions

Objective: To provide the employee with the functionality to search the created Applications.

Employee Inbox

The employee inbox screen shows all the created applications which are in the workflow and requires action from that particular employee.

The employee has the ability to search any application based on Application no, Property Id, or mobile number, or he can apply filters, based on the business service (create, edit, or update), application status, locality, and application assigned specifically to him.

By clicking on the /application no in the inbox user goes to the application details page. where he can take action on the application to push it forward or backwards in the workflow.

Technical Details

The file path for inbox can be found in:

digit-ui-internals/Inbox.js at main · egovernments/digit-ui-internals

API Used

The API used for searching the Inbox is

/inbox/v1/_search

The above API is used to fetch the Inbox results based on filters and search criteria.

Customizations

Inbox Screen offers customization for the fields in the inbox table. The fields inside the inbox table are exposed in the component registry service as in the file:

digit-ui-internals/inbox-table-config.js at main · egovernments/digit-ui-internals

It is exposed as PTInboxTableConfig key in component registry service, and can be redefined to reset the columns.

the function returns an object of the following structure:-

{
     PT: {
      inboxColumns: (props) => [
        {
           Header: t("ES_INBOX_UNIQUE_PROPERTY_ID"),
           Cell: ({ row }) => {
             return (
               <div>
                 <span className="link">
                   <Link to={`${props.parentRoute}/application-details/` + row.original?.searchData?.["propertyId"]}>
                     {row.original?.searchData?.["propertyId"]}
                   </Link>
                 </span>
               </div>
             );
           },
         },
       ],
       searchColumns: (props) => [
        {
          Header: t("ES_INBOX_UNIQUE_PROPERTY_ID"),
          accessor: "searchData.propertyId",
          Cell: ({ row }) => {
            return (
              <div>
                <span className="link">
                  <Link to={`${props.parentRoute}/property-details/` + row.original?.searchData?.["propertyId"]}>
                    {row.original?.searchData?.["propertyId"]}
                  </Link>
                </span>
              </div>
            );
          },
        }
      ]
     },
}

the object.PT contains 2 keys inboxCloumns and searchColumns , which are yet again functions.

These functions are provided with props as an argument, which are props supplied to the component called DesktopInbox as can be seen in the following file:-

inboxCloumns and searchColumns functions return an array of objects, each object represents a column.

The inboxCloumns is used for setting columns in the Inbox, while searchColumns is used for setting columns

every column has the following properties:-

1. Header is the head that is used in thead of the column (basically name of the column).

2. accessor is . separated string value that specifies the path within each row to be followed in order to display the value of the column. The structure of the row object is similar to row.original explained below.

3. Cell is function returning a valid JSX, in case some complex component is needed to be rendered. The function is supplied an object with row property, each row containing property details , with row.original being the actual data for the property row which is of the form. The searchData contains search related result associated with the property, while workflowData contains workflow related data associated with property

{
  searchData : {...},
  workflowData : {...}
}

Application Details Page

This page is where the Employee visits after clicking on desired Application No. in the inbox. The user can find a “take action” button at the bottom of the screen and can perform actions, based on the role the employee profile has and the state of the application in the workflow. He can also view the timeline in which he can see which employee made what update in the workflow.

The employee can see details like owner details, address etc, along with the documents attached at the time of creation, and while action performing by any other employee in the workflow. In the case of mutation Application, the employee can see transferer and transferee details.

While performing the action user can upload docs, comments for the next employee in workflow, or they can assign them to a specific employee in the action resultant workflow.

Technical Details

The code for the application details can be found in

APIs Called

The application details page calls the following APIs.

egov-workflow-v2/egov-wf/process/_search?tenantId=pb.amritsar&history=true
/property-services/property/_search
/egov-workflow-v2/egov-wf/businessservice/_search
/filestore/v1/files/url

the 1st API is called to fetch the timeline, through which the Process Instance has gone through.

The 2nd API is called to fetch address, owner-details, and document fileStoreId for all the documents associated with the property.

The 3rd API is called to get current performable actions based on the current state of the process Instance, which is then filtered through according to actions performable by the employee’s role.

The 4th API is called to fetch all the documents for the file store ids.

Role Actions

Overview

This page provides information and details for edit and updates property feature in the PT module. This feature allows the user to edit the application already created or update the property already registered with their mobile number. After verification, the employee can send the application back to the citizen with remarks on any required changes. The edit and update feature allows the users to make these changes. It also allows the user to update the details of the property details online if there are any such upgrades or changes.

Edit Application

On the Application details page, on the employee side, if the property is marked with “Send Back to Citizen”, the edit option will appear dynamically at the end of the page and will be static in nature.

Update Property

On clicking the Update button, users can edit/update the property details by going through the Create flow again. The only exception here is the values will be pre-populated from the Property object received from Property Search API. On completing the flow the Update API is called and the property is updated successfully.

Acknowledgement screen

Technical Implementation Details

Click here to access the Edit/Update property main index.

The main code contains the functions that transform the property object received in Search API to the object. This includes primarily the Assessment flow units suitable for the Create flow since the user has to go through Create flow again with pre-populated details and update the value of the data accordingly. It also contains the routing details for the pages in the Create flow.

Update Util function: this function does the exact opposite of the Create util function (refer Property Tax - My Applications ). The property object which is received from the Property Search API is converted to the Create flow relevant structure so that the values can be pre-populated for the user convenience, on completing the flow, the application is updated. The link for the same is available here.

MDMS

MDMS data used here is the same as the Create flow since the flow structure used for edit/update property is the same as the create property flow. Please refer to the link here for detailed MDMS information.

Localization

For Edit/Update Property also, the Localization keys are being added in the ‘rainmaker-pt’ locale module. To change, update or adding of any new localization key will be done in the same locale module only.

Objective: To provide the employees involved in PT workflow, the functionalities to create a property Application in create workflow.

Create Application

A counter employee can use create an application form, to register a citizen’s property.

Technical Implementation

The file for create Application form for PT can be found in:-

https://github.com/egovernments/digit-ui-internals/blob/main/packages/modules/pt/src/pages/employee/NewApplication/index.js

for creating an application employee enters all the details of the form manually, and Documents are uploaded based on the MDMS configuration found in the file:

https://github.com/egovernments/egov-mdms-data/blob/DEV/data/pb/PropertyTax/Documents.json

MDMS Data

1. https://github.com/egovernments/egov-mdms-data/blob/DEV/data/pb/PropertyTax/Floor.json

2. https://github.com/egovernments/egov-mdms-data/blob/DEV/data/pb/PropertyTax/OccupancyType.json

3. https://github.com/egovernments/egov-mdms-data/blob/DEV/data/pb/PropertyTax/OwnerShipCategory.json

4. https://github.com/egovernments/egov-mdms-data/blob/DEV/data/pb/PropertyTax/OwnerType.json

5. https://github.com/egovernments/egov-mdms-data/blob/DEV/data/pb/PropertyTax/PropertyType.json

6. https://github.com/egovernments/egov-mdms-data/blob/DEV/data/pb/PropertyTax/UsageCategory.json

7. https://github.com/egovernments/egov-mdms-data/blob/DEV/data/pb/PropertyTax/SubOwnerShipCategory.json

The MDMS data for documents is similar to that found in :

**with the noted addition of formDataPath, formArrayAttrPath, in filterCondition and dropdownFilter .

formDataPath path is the form path in form of an array of keys that requires to be followed to a new UI form to check the entered value. similar to jsonPath and parentJsonpath in old UI, While the formArrayAttrPath replaces the arrayAttribute.

The use of the MDMS data within the component can be found in :

https://github.com/egovernments/digit-ui-internals/blob/main/packages/modules/pt/src/pageComponents/SelectDocuments.js

After adding all the valid documents and form values in the form, the user is allowed to submit the form

which calls the property create API:1property-services/property/_create

Acknowledgement Screen

If the Property creation is successful. then the employee is directed to this screen that shows Acknowledgement Id and the option to download a hardcopy of the acknowledgement containing property details.

Role Mapping

Objective: To Provide employees with functionality to transfer Ownership of an active property.

Documents Required for Mutate Property Page

When a property is in Active status and has no dues to pay then Employee is given an option on the property details page to mutate a property.

The doc required page is shown if the property is paid for otherwise it is taken to the payment details page. It shows the employee the list of documents required in order to proceed with the form.

Mutate Property Form

After clicking on the “Transfer of Ownership” button on the required page, the employee is redirected to the Transfer of Ownership or Mutation form. Here the Transferor details are displayed and Employee can fill the transferee details form.

Technical Documentation

The file for mutation can be found on:

MDMS Data Used

Similar to that in employee Property create along with Mutation Documents. Which can be found in:-

APIs Called: 1property-services/property/_update

**When update API is called the documents are updated according to the snippet :-

 documents: [
          ...data.originalData?.documents.filter(
            (oldDoc) => !mutationDocs?.PropertyTax?.MutationDocuments.some((mut) => oldDoc.documentType.includes(mut.code))
          ),
          ...data.documents.documents.map((e) =>
            e.documentType.includes("OWNER.TRANSFERREASONDOCUMENT") ? { ...e, documentType: e.documentType.split(".")[2] } : e
          ),
        ],

Here data.originalData is the property before the update, while data.documents is the documents that were uploaded in the form, and mutationDocs is the MDMS response for Mutation Docs.

Acknowledgement Screen

If the Property Mutation is successful. then the employee is directed to this screen that shows the Acknowledgement Id and the option to download a pdf of the acknowledgement containing property details.

Role Actions