Integrated Management System

A complete bill management software to digitilize previously offline billing process.

Request Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Directory tree
3. Features
   • User authentication from backend
   • Searching institutes
   • Bill generation
   • Edit and delete previously saved bills
   • Filter bills by date
   • Institute specific bills
   • View/Add/Edit/Delete Institutes
   • Update profile

About The Project

The goal of this project is to manage saved bills and data of more than 400+ Delhi-based institutes that the Delite Catering Company counts as clients, as well as to digitize the offline billing process.

The Digital Transformation era has begun and businesses need to efficiently utilize and manage data in order to compete in the digital economy of today while also assuring future success. Starting by eliminating paper-based operations is a smart strategy.

Companies should be transformed digitally so that data can be quickly searched for, retrieved, and integrated. This simplifies process implementation and reduces costs.

Built With

(back to top)

Directory tree

│   .gitignore
│   package-lock.json
│   package.json
│   Procfile
│   README.md
|   .env
│
├───client
│   │   package-lock.json
│   │   package-lock.json
│   │   README.md
│   │
│   ├───public
│   │       favicon.ico
│   │       index.html
│   │       logo192.png
│   │       logo512.png
│   │       manifest.json
│   │       robots.txt
│   │
│   └───src
│       │   App.js
│       │   bootstrap.min.css
│       │   index.css
│       │   index.js
│       │
│       ├───actions
│       │       billActions.js
│       │       unitActions.js
│       │       userActions.js
│       │
│       ├───components
│       │   │   Footer.js
│       │   │   Header.js
│       │   │   Main.js
│       │   │
│       │   ├───Bill
│       │   │       index.js
│       │   │       index.module.css
│       │   │
│       │   ├───BillHistory
│       │   │       Filter.js
│       │   │
│       │   ├───form
│       │   │       FormContainer.js
│       │   │
│       │   ├───Institutes
│       │   │   └───Modals
│       │   │           AddInstituteModal.js
│       │   │          EditInstituteModal.js
│       │   │
│       │   └───ui
│       │           Loader.js
│       │           Message.js
│       │
│       ├───constants
│       │       billConstants.js
│       │       unitConstants.js
│       │       userConstants.js
│       │
│       ├───hooks
│       │       useDebounce.js
│       │
│       ├───reducers
│       │       billReducer.js
│       │       unitReducers.js
│       │       userReducers.js
│       │
│       ├───store
│       │       store.js
│       │
│       ├───utils
│       │       dateToString.js
│       │       formatAMPM.js
|       |       printPDF.js
│       │
│       └───views
│               BillHistoryPage.js
│               BillPage.js
│               BillPage.module.css
│               EditBillPage.js
│               HomePage.js
│               InstitutesPage.js
│               LoginPage.js
│               ProfilePage.js
│               RegisterPage.js
│               SchoolBillHistoryPage.js
│
└───server
    │   index.js
    │
    ├───controllers
    │        billController.js
    │        unitController.js
    │        userController.js
    │
    ├───middleware
    │        authMiddleware.js
    │        errorMiddleware.js
    │
    ├───models
    │        billModel.js
    │        unitModel.js
    │        userModel.js
    │
    ├───routes
    │       billRoutes.js
    │       unitRoutes.js
    │       userRoutes.js
    │
    └───utils
            db.js

(back to top)

Features

User authentication from backend

feature1.mp4

• User can enter email ID and password, which is verified in backend using custom controller function.
• Passwords are encrypted and compared using BCryptJS
• An authentication token is generated using JSON Web Token

(back to top)

Searching institutes

feature2.mp4

• Institute list is fetched from backend and populated into an array which is then passed to data attribute of Mantine/core's Select component
• Mantine/core's Select component is searchable using a filter function that has been configured to exclude institutions whose code or name doesn't matches the entered value.
• Once user selects an institute and click on generate bill, redirection takes place with institute id and unit id as url parameters.

(back to top)

Bill generation

feature3.mp4

• Using the unit and institute IDs from URL parameters, the data is fetched from backend. The bill automatically updates fields like the most recent invoice number, the billing/supply address, etc.
• The total/taxable amount is calculated and updated automatically, and fields like date, time, quantity, rate, etc. are kept editable.
• When a user enters all the necessary information and clicks the save button, the bill is stored in the database and the user is redirected to the home page.

(back to top)

Edit and delete previously saved bills

feature4.mp4

• When user navigates to all bills option in navbar, a complete list of latest bills (max 50)
• The total/taxable amount is calculated and updated automatically, and fields like date, time, quantity, rate, etc. are kept editable.
• When a user enters all the necessary information and clicks the save button, the bill is stored in the database and the user is redirected to the home page.
• Using findById(req.params.id) to find the bill deleteOne() methods, a bill can be deleted and from the database.

(back to top)

Print multiple bills

feature5.mp4

• User can select multiple bills from the table and select print option.
• Details of selected bills are fetched and each bill is mapped into the bill component.
• The total content of web page is replaced with all bill components and window.print() method is used. Once done, the document is replaced back with original content.

(back to top)

Filter bills by dates

feature7.mp4

• User can filter bills according to a specific date or a range of dates.
• When a user picks a date or range of dates, a backend request is made, and bills that correspond to the selected dates are returned and displayed in the front end.

(back to top)

Institute specific bills

feature8.mp4

• A user may also search for bills for a specific institute. A backend request is made when an institute is chosen and using the institute ID, bills are filtered and sent back to the client.
• All features are identical to those on the "all bills" page.

(back to top)

View add edit delete Institutes

feature9.mp4

• Users can view a list of all institutes as well as add, edit, and delete them which, in backend, has been implemented using CRUD operations.

(back to top)

Update profile

feature6.mp4

• Users can also update their profile information such as name, email, and password.

(back to top)