Bssp
About the Project
Project Overview
After gathering detailed requirements from our CEO, I developed an application with the following roles and permissions:
- Admin: Has full access, including management of all users, branches, and projects.
- Branch Manager: Can oversee agents in their branch, create quotations, and start projects.
- Agent: Limited to their projects; they can create, manage, and finalize quotations and start new projects.
Quotation System
The app enables agents to create quotations for potential solar installations, categorized into Residential and Commercial. Here’s how it works:
- Form Completion: Agents fill out a detailed form based on the project type (Residential or Commercial). This extensive form gathers essential data, validated at each step.
- Calculation & Validation: Once all fields are filled, agents click 'Validate and Calculate.' The backend verifies the data and sends a calculation back to the frontend for display.
- PDF Generation: After finalizing the information, agents can click 'Generate PDF.' This triggers a backend request, which generates the PDF in Base64 format and sends it to the frontend for viewing.
- Customer Copy & Cloud Storage: Upon submission, the finalized PDF is sent to the customer and saved securely in the cloud. If the agent makes changes to the form, the PDF is invalidated, and they must revalidate and regenerate it.
Quotation Management
All generated quotations are displayed in a Quotation Table with key details. Agents can:
- View PDFs: Clicking 'View PDF' opens a drawer displaying the specific PDF document.
- Consumer Onboarding: Agents can onboard consumers from the table, navigating to a 3-step process with built-in validation. They cannot proceed without completing each section.
Consumer Table & Project Initiation
On the Consumer Table, agents can view all onboarded consumers. Each row includes:
- Consumer Information: Clicking 'Info' reveals detailed consumer data.
- Start Project: Agents can initiate a project based on a selected quotation. The project creation is a 5-step process, each step requiring completion before proceeding to the next.
Project Tracking & Phases
Once a project is started, it appears on the Home Page for easy tracking. Each project is divided into phases:
- Phase Updates: Agents update each phase as the project progresses, keeping track of milestones and project status in real-time.
Technical Highlights
On the Consumer Table, agents can view all onboarded consumers. Each row includes:
- Role-Based Access Control: Implemented strict access control to limit actions based on user roles.
- PDF Handling: Efficiently generated, displayed, and stored PDFs using a seamless backend-front integration with Base64 encoding.
- Real-Time Project Updates: Phased project tracking gives agents a clear view of project stages and allows for systematic updates.
Technologies Used
ReactTypescriptMuiAxios
Image Gallery
