The RSK Pettycash Manager is a web-based application designed to help individuals or small businesses manage their petty cash transactions efficiently. The application provides tools for tracking expenses, managing capital, and maintaining financial records.
- Expense Management: Users can add, edit, and delete their expenses, including details such as title, category, date, price, quantity, and description.
- Capital Management: Allows users to add and edit their capital amounts, providing an overview of their available funds.
- Dashboard Overview: Provides a comprehensive dashboard with detailed insights, including graphical representations of expenses and capital.
- User Profile: Users can manage their profiles, including personal details and avatars.
- Responsive Design: The application is designed to be responsive and works seamlessly on various devices and screen sizes.
- Frontend: React.js, Bootstrap, React Router
- Backend: Node.js, Express.js
- Database: MongoDB
- Authentication: JSON Web Tokens (JWT)
- Additional Libraries: Axios, jspdf, React Toastify
The Header component manages the application's top navigation bar. It includes the following elements:
- Brand logo link to the home page.
- Navigation links for Signup and Login, depending on the user's authentication status.
- Dashboard navigation with various options for managing expenses, capital, and user profile.
- User details and logout functionality.
The Footer component represents the application's footer. It contains the following details:
- Copyright text and the developer's name.
- Social media links (LinkedIn and GitHub).
The Signup component facilitates new user registration with the following functionalities:
-
Input Fields:
- Name, Email, Mobile Number, Password, and Avatar selection.
-
Avatar Selection:
- Users can select avatars from a pre-defined list.
-
Password Validation:
- Validates the password against specific criteria: at least 8 characters long, containing 1 uppercase letter, 1 number, and 1 symbol.
-
Submission and Verification:
- Submits the entered data for user registration.
- Displays a waiting state for email verification with a redirect option for verifying email through OTP.
The Login component provides users with the ability to log into their accounts and includes the following functionalities:
-
Input Fields:
- Users can input their registered Email and Password to log in.
-
Password Recovery:
- Offers the option to reset the password via a "Forgot Password" link.
-
Authentication:
- Validates user credentials by sending the entered data to the backend for authentication.
- On successful login, stores user details (Token, UserId, UserName, and Avatar) in local storage.
-
Navigation:
- Redirects users to the dashboard upon successful login.
The Forgot Password component allows users to reset their password through the following functionalities:
-
Input Fields:
- Users can input their registered email to receive a One-Time Password (OTP) to reset the password.
-
Sending OTP:
- Sends a request to the backend to generate and dispatch the OTP to the provided email address.
- Notifies the user upon successful or failed dispatch of the OTP.
The Forgot Password Verification component provides the means to verify the OTP and set a new password. It encompasses:
-
OTP Verification:
- Allows the user to enter the received OTP along with a new password.
- Validates the format of the new password, ensuring it meets the required criteria.
- Sends the OTP and the new password to the backend for verification and updates.
-
Error Handling:
- Informs the user of any errors in the OTP verification or password reset process.
The Edit User Details component enables users to modify their personal details. It encompasses the following features:
-
Form Fields:
- Allows users to change their name, mobile number, email, and avatar.
-
Fetching User Data:
- Retrieves the existing user details to pre-fill the form fields for modification.
-
Sending OTP:
- Sends a One-Time Password (OTP) to the updated email address for verification.
-
Update User Details:
- Validates and updates the user's details upon successful OTP verification.
The Edit User OTP Verification component validates the OTP received for modifying the user details. It includes:
- Input OTP:
- Enables the user to input the OTP received on the updated email.
- Update Confirmation:
- Verifies the OTP and updates the user details upon successful verification.
- Provides an option to re-enter the OTP if it's incorrect or expired.
The dashboard component offers a comprehensive view of key financial data in the application:
-
Capital Balance: Displays the current balance of available capital.
-
Total Expense Amount: Represents the accumulated expense amount.
-
Expense Transaction Count: Shows the total count of expense transactions.
-
Line Chart Component: The dashboard also incorporates a Line chart component, showcasing a visual representation of financial data for better analysis.
-
BarChart Component: The dashboard also incorporates a barchart component, showcasing a visual representation day wise expenses.
The Add Capital component facilitates the addition of capital to the petty cash system. Key features include:
- Adding Capital:
- Allows authorized users to add capital to the system by specifying the amount.
- Authentication Check:
- Verifies user credentials and redirects to the login page if not authenticated.
The Add Expense feature enables users to input and register expenses. Its functionalities consist of:
- Expense Input:
- Users can provide details such as title, category, date, price, quantity, and a description.
- Authentication Verification:
- Ensures that only authenticated users can add expenses, redirecting to the login page if not verified.
The Edit Capital component enables users to modify the existing capital amount in the system. It includes:
- Edit Capital Amount:
- Allows authorized users to input an updated capital amount for the system.
- Authentication Check:
- Ensures users are authenticated before enabling capital amount modifications.
The Edit Expense feature facilitates the modification of existing expense details. Key aspects are:
- Expense Details Update:
- Users can modify various details such as title, category, date, price, quantity, and description of an existing expense.
- Authentication Verification:
- Ensures authorized access to edit expense details.
The All Expenses component provides a comprehensive overview of the expenses recorded in the system. Its functionalities include:
-
Display All Expenses:
- Lists all recorded expenses, showcasing details such as title, category, date, description, price, quantity, and total price.
-
Search Functionality:
- Enables users to search expenses by title, category, or description using the search bar.
-
Export to PDF:
- Allows users to export all expense transactions to a PDF file.
-
Edit Expenses:
- Provides the ability to edit existing expenses, modifying various details.
-
Delete Expenses:
- Enables the removal of specific expense transactions after user confirmation.
-
Authentication Check:
- Ensures only authenticated users can view, edit, or delete expenses.
To run the application locally:
- Clone this repository.
- Navigate to the project directory and install dependencies using
npm install
. - Start the frontend and backend servers using
npm start
. - Access the application in your web browser at
http://localhost:3000
.
The frontend is deployed on Netlify, and users can access the live application through RSK Pettycash Manager.
- Shanmugam R. - GitHub