This is the Quote that sales person will display to client- please keep this image in first and the follow the below steps also make use to use INR where applicable:
Process steps:
- Quote Display Screen:
Displays the calculated quote details.
Three action buttons:
✅ 'Looks Good to Go' → Proceed to Submission.
🔄 'Ask for Revision' → Goes back to previous step.
❌ 'Do Not Wish to Proceed' → Ends the process.
- Submit Quote for Approval Screen:
A form to submit the quote with:
Client-requested price.
Justification notes.
A 'Submit for Approval' button → Sends to Checker Review.
- Checker Review Screen:
Displays quote details for review.
Two options:
✅ 'Approved within boundary' → Moves to Next Task.
📤 'Send to Pricing/UW Team' → Sent for further review.
- Pricing & Underwriting Review Screen:
Displays quote details for Pricing/UW Review.
Three options:
✅ 'Approved' → Sent to CBO Review.
❌ 'Rejected' → Ends process.
🔄 'Ask for Revision' → Sent back to Checker.
- CBO Review Screen:
Displays quote details for Chief Business Officer (CBO) review.
Three options:
✅ 'Approved' → Ends process.
❌ 'Rejected' → Ends process.
🔄 'Ask for Revision' → Sent back to Pricing/UW Team.
- End Screen:
Displays final quote status (Approved/Rejected).
💡 Design Requirements:
Use Material UI components (buttons, forms, cards, modals).
Implement step navigation for users to track progress.
Ensure a clean, professional design with a responsive layout.
I'll redesign the Quote Approval Workflow to match the provided Group Credit Life Quote image for the first screen and implement the process flow you've outlined, using INR currency where applicable.
I've redesigned the Quote Approval Workflow application to match the provided Group Credit Life Quote image and implemented the process flow you specified. Here are the key features:
Exact Match to the Provided Quote Display - The first screen replicates the Group Credit Life Quote table with all the details from the image, including:
- Premium rates
- Benefit type
- Policy terms
- Sum assured values
- Cover types
- All other fields shown in the image
- INR Currency Format - All monetary values are displayed in Indian Rupee (₹) format with proper thousands separators
Complete Workflow Implementation:
- Quote Display Screen - Shows the quote details with three action buttons
- Submit Quote for Approval - Form for requested price and justification
- Checker Review - First approval level with two options
- Pricing & UW Review - Second level with three options
- CBO Review - Final review with three options
- End Screen - Shows final status with appropriate next steps
Material Design Elements:
- Clean table layout matching the original image
- Colorful action buttons with icons
- Card-based layouts with subtle shadows
- Step navigation progress indicator
- Responsive design for all screen sizes
- Company Branding - Includes the CreditAccessLife logo and styling
The application maintains all quote data throughout the workflow and provides clear visual cues for the user's current position in the process. Each screen includes the appropriate action buttons as specified in your requirements.
When the user clicks the "Do not wish to proceed" button, a popup modal named:
“Quote Rejection Feedback”
should appear.
Popup Modal: "Quote Rejection Feedback"
Header/Question:
“Please help us understand why you’re not proceeding with the quote?”
Components:
Dropdown – Select Reason for Rejection:
Options:
Premium is too high
Benefits not suitable
Quote validity expired
Coverage not aligned with our loan terms
Received a better offer
Internal approval pending
Textarea – Additional Comments (Optional):
Placeholder: “Write your comments here...”
Primary Action Button:
Label: Submit Rejection
Post-Submission (After Button Click):
Once the user clicks Submit Rejection, show the following confirmation message (inside the modal or as a toast message):
“Your feedback has been received. You have successfully declined this quote. We truly value your input, and our team will review your response to provide a more suitable solution shortly.”
Optional UX Element:
Include a small visual or animation (e.g., supportive icon or a calm emoji) to reflect empathy and reassure the user.
I'll add a Quote Rejection Feedback modal that appears when the user clicks the "Do Not Wish to Proceed" button. Let me implement this for you:
I've added the Quote Rejection Feedback modal that appears when the user clicks the "Do Not Wish to Proceed" button. Here's what I implemented:
Features of the Rejection Modal:
- Modal Title: "Quote Rejection Feedback"
- Question: "Please help us understand why you're not proceeding with the quote?"
Dropdown Selection with the exact options you requested:
- Premium is too high
- Benefits not suitable
- Quote validity expired
- Coverage not aligned with our loan terms
- Received a better offer
- Internal approval pending
- Comments Textarea with the placeholder "Write your comments here..."
- Submit Rejection Button that's disabled until a reason is selected
- Confirmation Message after submission: "Your feedback has been received. You have successfully declined this quote. We truly value your input, and our team will review your response to provide a more suitable solution shortly."
- Visual Element: A blue circle with a plus icon to convey empathy and reassurance
- Cancel Option: Users can cancel the rejection process if they change their mind
The modal is implemented using shadcn/ui components to maintain a consistent design with the rest of the application. When the user submits their rejection feedback and closes the confirmation screen, the application will proceed to end the process by calling the endProcess() function, which will take the user to the End Screen with a rejected status.
The modal implementation follows Material UI design principles with clean layouts, proper spacing, and visual feedback. The confirmation message includes a supportive icon (the blue circle with a plus sign) to provide a sense of empathy and reassurance to the user.
I've structured the code to be modular by creating a separate RejectionFeedbackModal component that can be reused elsewhere in the application if needed. This component handles its own state for the form fields and confirmation display, making it easy to maintain.
The modal appears centered on the screen with a semi-transparent overlay to focus the user's attention on the feedback form. The form validation ensures that users must select a reason before submitting, though the additional comments field remains optional as requested.
Would you like me to make any adjustments to the modal design or functionality?