Provider Toaster

Introduction

The Provider Admin app is primarily used to display statistical data, including the number of applications, financial data, available benefits, and the applicants' list If any seeker applies for benefits available to him/her, the provider can see the details.

Architecture

The Provider Admin App is a web-based application designed to display statistical data such as the number of applications, financial data, available benefits, and the applicants' list. The architecture should be scalable, modular, and maintainable, incorporating modern practices and frameworks.

Framework: React (with TypeScript) Key Responsibilities:

  • User Interface (UI) rendering.

  • Interactive dashboards and data visualization.

  • Form submissions and user interaction handling.

Structure:

  • Components:

    • Dashboard: Displays statistical data (applications, financial stats, available benefits).

    • Benefits List: Shows available benefits with filtering and search functionality.

    • Applicants List: Displays the list of applicants with details.

    • Collapsible View: Allows viewing and managing applicant details (e.g., approve/reject with supporting documents).

  • State Management:

    • React Query for server state management (API calls, caching).

    • Routing: React Router for navigation (e.g., Dashboard, Benefits, Applicants).

  • UI Framework: Chakra UI for consistent styling and responsiveness.

Key Features

Authentication and User Management:

  1. Login:

    1. Enter username and password

  2. User registration:

    1. Enter Name, Username, Email Id, Mobile number, Gender, Password

  3. Accept the terms and conditions

Dashboard:-

  1. Key metrics:-

    1. Applicant Overview: -

    2. Total number of applicants

    3. New Applicants

    4. Accepted Applicants

    5. Rejected Applicants

    6. Financial Overview

    7. Total Budget

    8. Number of Sponsors

    9. Pie chart

    10. All Benefits Summary

    11. Benefit list status-wise data

    12. Collapsible view with Sponsor-wise Budget, Number of Sponsors, Deadlines

    13. Visual Representation

    14. Disbursal Rate

    15. Breakdown by Gender, Caste, Level of study, Day Scholar / Hostler Ratio

Benefits Management:

  1. List of Benefits:

    1. Display benefit name, number of applicants, Approved, Rejected, Disbursal Pending, Deadline

  2. Search and Filter:

    1. Search by benefit name

    2. Filter by valid till and created at

    3. Sorting by Ascending and Descending

  3. Action :

    1. View application list

  4. Application List :

    1. Display Applicant Name, Application ID, Order ID (Beneficiary), Status

  5. Applicant Details:

    1. Display Status,Id, Application Id, Student name, Father name, Current class, Previous tear marks, Student type, Aadhar Last4Digits, Caste, Income, gender, Disability, document list (only id can see)

  6. Benefit form:

    1. Schema get by API convert it into RJSF form

    2. Display the schemes-wise fields and validations for it.

    3. Prefilled data from the beneficiary app.

    4. After submitting data generate application_id and submission_id which send to the beneficiary app

Technical Details

Frontend: -

  1. Framework and Libraries:

    1. React (TypeScript) type safety and code maintainability

  2. UI Framework:

    1. Chakra UI for responsive and consistent UI components

  3. Data Visualization:

    1. react-apexcharts for displaying charts and graphs

  4. Build Tool:

    1. Vite: Faster development and optimized builds for production

  5. Programming Language:

    1. TypeScript : Ensures type safety, better code quality, and maintainability

  6. API Specification:

    1. RESTful APIs:

      1. Endpoint structure:

/user/oauth/token
/user/users/_createnovalidate
/application/v1/_appstat
/application/v1/_fundsstat
/application/v1/scholarships/top-3
/benefits/v1/_search
/benefits/v1/collapse/_get
/benefits/v1/getApplicationsByBenefitId
/application/v1/getByApplicationId
/api/select
/api/application-init

  1. Environment Management:

    1. Environment variables managed via .env files

  2. Tools and Integrations:

    1. IDE: Visual Studio Code

    2. Linting: ESLint and Prettier for code formatting and quality

    3. Extensions: SonarQube for IDE, Codeium: Free AI-powered code acceleration toolkit

Installation and Deployment

  1. Prerequisites:

    1. Node js version v20.17.0

    2. Yarn version 1.22.22

    3. Git

    4. rjsf/chakra-ui (^5.21.2)

    5. rjsf/validator-ajv8(^5.21.2)

    6. Ka-table (^11.3.0)

  2. Clone the Repository

    1. git clone https://github.com/PSMRI/benefits-provider-app-ui

  3. Install dependencies:

    1. yarn install

  4. Create an environment configuration file:

VITE_SCHEMA_API=
VITE_APP_PROXY_ASSETS=
VITES_APP_CONTEXT=
VITE_APP_BASE_UBA_UI=
VITE_BAP_ID=
VITE_BAP_URI=
VITE_BPP_ID=
VITE_BPP_URI=
VITE_BENEFICIERY_IFRAME_URL=
VITE_LOGIN_AUTH_TOKEN=

  1. Start the development server:

    1. Yarn run dev

Usage Guide

  1. Login

    1. Navigate to the application URL on DEV or UAT

    2. Enter your credentials (username and password)

    3. Click the Login button to access the admin dashboard

  1. User Registration

    1. Click on “Don’t have an account? Register Now” button

    2. Navigate to the route /user/register

    3. Fill the following details:

      1. Name

      2. Username

      3. Email Id

      4. Mobile number

      5. Select gender

      6. Password

    4. Accept Terms and Conditions

    5. Click on “Proceed” button

    6. Navigate to Login page

  1. Dashboard Overview:

    1. After successful login, navigate to the dashboard page.

  2. The Dashboard provides an overview of:

    1. Applicant overview:

    2. Total Applicants:Displays the number of applications received

    3. New Applicants: Displays the number of New applicants

    4. Accepted Applicants: Displays the number of accepted applicants.

    5. Rejected Applicants: Displays the number of rejected applicants for any reason of eligibility.

  1. Financial Overview:

    1. Total Budget: Total allocated funds

    2. Number of Sponsors

    3. Pie chart: Shows Funds utilized and remaining

    4. Popular benefits

  1. All Benefits Summary

    1. Lists all active,draft,closed benefits

    2. In collapsable view display the sponsor wise data

  1. Visual Representation:

    1. Weekwise Disbursal Rate bar chart in percentage

    2. Gender wise, caste wise, level of study wise and day scholar/ hostler wise pie chart in number

  1. View all benefits:

    1. After click on View all benefits button Navigate to /benefit_list

    2. Show status wise list of benefits available. With name, applicants,approved, rejected, disbursal pending, Deadline, action

    3. We can search any benefit by name

    4. Filter by valid till and created at

    5. Sorting by ascending and descending order

    6. After click on action button it navigate to /:id/applicants_list

  1. View Application list:

    1. /:id/applicants_list for this route we can see all application under selected benefit id

    2. Having facility to search by applicant name and sort by Ascending and Descending order

    3. Display list having Applicant Name, Application Id, Order ID (Beneficiary), status, Actions

  1. View Applicant details:

    1. After click on action navigate to /application_detail/:id

    2. It will display the applicant details as, Status, Id, Application Id, Student Name, Father Name, current class, Previous Year Marks, Student type, Aadhar Last4Digits, Caste, Income, Gender, Disability, Supporting documents

  1. Application form:

    1. From route /benefit/:id/apply we can come see the application form

    2. This form is built using RJSF

    3. First get the schema from /select API and convert the schema in the form of RJSF format acceptable

    4. Having validations and prefill data from the beneficiary app

    5. And after submitting data we cal /application-int api we get application_id and submission_id which sent to the beneficiary app

  2. Logout:

    1. Click on the text Logout in the top-right corner.

Troubleshooting

This guide addresses common issues users might face and provides solutions to help resolve them

  1. Login Issues

  2. Problem: Incorrect email or password.

    1. Solution:

      1. Verify that the credentials are correct

      2. Ensure the Caps Lock key is off

      3. Register username and password by clicking on Register Now button and fill the correct data having regex validation.

  3. Problem: Unable to access the login page

    1. Solution:

      1. Check your internet connection

      2. Ensure the URL is correct

      3. Clear browser cache and cookies, then try again

  1. Problem: Dashboard shows blank charts or no data.

    1. Solution

      1. Check the backend API status. Ensure the server is running

      2. Open the browser console (usually F12 > Console tab) and check for API errors.

      3. Ensure environment variables are correctly configured in the frontend .env file.

  2. Problem: The benefits list is not updating after changes.

    1. Solution

      1. Clear the browser cache and refresh the page

      2. Check the frontend network tab (F12 > Network) to ensure the API call succeeded

  3. Problem: Unable to view applicant details.

    1. Solution

      1. Verify that the backend API endpoint for fetching applicant details is accessible.

      2. Check for network errors in the browser developer tools.

  4. Problem: The app layout is broken or misaligned.

    1. Solution

      1. Clear your browser cache and refresh the page

      2. Ensure that the correct version of dependencies (e.g., Chakra UI) is installed.

      3. Verify the frontend build process does not generate warnings or errors

  5. Problem: Variables are undefined or not working.

    1. Solution

      1. Ensure .env files are correctly placed in the root directories of the frontend

      2. Restart the development server after editing .env files.

  1. Problem: API calls are failing in DEV/UAT.

    1. Solution

      1. Check if the DEV/UAT API URL is correctly configured in the frontend environment variables.

      2. Inspect server logs for errors related to the API.

  1. Problem: API calls showing CORS issues:

    1. Solution

      1. Add proxy setting at local in vite.config.ts file

      2. In dev or UAT created service as /uba-ui/

PreviousEnd User GuideNextDeveloper Guide

Last updated

Was this helpful?