Hey Vercel Create a Wireframe of Endorsement Module based on the Insurance Domain that has two Buttons on top: All leads & Pending leads which followed by : Table names Lob, Certificate No, Insurance Company, Proposer Name, Mobile No, Endorsement Raised Date, Endorsement Type( which consists of Addition, Correction & Deletion), Approved & Rejected Date, Endorsement Status also give option to edit and view. On Top of the Table, give Refresh, Filter, and Customise column Buttons. Also, give a button named Raise Endorsement where a form will be opened, and within that fields will be mentioned Create a page-wise Also Besides Raise Endorsement Button give Search Button also once we click on Raise Button before showing Pages it should ask Certificate no or Trace Id and after that show page-wise flowPage 1 :Select Members for Coverage (Heading) Choose the individuals you wish to cover under this health insurance plan. (Sub-Heading) Below are the Relations options also give age box for all Self Spouse Son Daughter Father Mother Brother Sister Father-in-law Mother-in-law Grand Father Grand MotherThe Select Members for Coverage Page should have the Addition, Correction and Deletion button optionsPage 2 :Proposal Details Page (Heading) Full Name Email Address Mobile Number Gender (Dropdown) Pan No Birth Date Address Line 1 Address Line 2 PincodeThe Proposal Details Page should have a Correction and Deletions button optionPage 3:CKYC Aadhaar Card No Page (Heading) Front Side Aadhaar Card (Upload Document) Back Side Aadhaar card (Upload Document)The CKYC Aadhaar Card No Page should have a Correction and Deletions button optionPage 4:Insured Members Details (Heading) Self (SubHeading) Name (will be freezed ) Date of Birth (will be freezed) Height(in cm) Weight(in Kg)The Insured Members Details Page should have a Correction and Deletions button optionPage 5:Nominee Details (Heading) Relation (Drop Down) Full Name Birth DateThe Nominee Details Page should have the Addition, Correction and Deletion button optionsAll Pages should be displayed once I click on the Raise Endorsement Button, and it should be in page-wise flow Once one page is done, it should go tothe next page and it should be displayed in dropdown manner.In Case of Correction and Deletion the person can correct or delete the existing dataPage 6 :Premium Details (Heading)- Base Premium- Add On Premium (Without Tax)- Net Premium (Same as Base Premium)- Tax Amount- Gross Premium(With Gst)- Payment Frequency ( Yearly)- Discount (If applicable)Above fields will be prefilled because the policy has already punched and all fileds are freezed.Page 7:Payment Detail (Heading)- Payer Name - Payment Mode - Cash,Online,NEFT, Cheque, UPI & IMPS Above fields will be prefilled because the policy has already punched and all fileds are freezed.Page 8:Documents (Heading)- Document Name- Upload File Option.Page 9:- Endorsement Payment (Heading)Give two Buttons under this Module- Generate Link to Customer - Deduct from CDAnd give the Save & Submit ButtonIn Case of Correction and Deletion, the person can correct or delete the existing dataAnd Style Format should be in Form Design Format Colour Theme: Red & Light RedAlso add the Prudential Logo which attached
Color Theme: The user specified "Red & Light Red". I will define a custom color palette in tailwind.config.ts to reflect this.
primary: A strong red (e.g., #E02020).primary-foreground: White.secondary: A very light red or off-white (e.g., #FEEAEA).secondary-foreground: A darker color for text on secondary.Main Layout (app/page.tsx):
EndorsementTable component or the EndorsementForm component based on user interaction (e.g., clicking "Raise Endorsement").Endorsement Table (components/endorsement-table.tsx):
Raise Endorsement Flow:
components/raise-endorsement-dialog.tsx): When "Raise Endorsement" is clicked, a dialog will appear asking for "Certificate no" or "Trace Id".Multi-Page Form (components/endorsement-form.tsx): After the initial dialog, a multi-step form will be displayed. The user requested a "page-wise flow" that is "displayed in dropdown manner". This is a perfect use case for the Accordion component from shadcn/ui. Each page will be an AccordionItem.
Form Pages (within components/endorsement-form.tsx or separate sub-components): To keep the endorsement-form.tsx clean, I will create separate components for each page within a components/form-pages directory.
SelectMembersCoverage (Page 1): Relations with age inputs, Addition/Correction/Deletion buttons.ProposalDetails (Page 2): Full Name, Email, Mobile, Gender (Dropdown), Pan No, Birth Date, Address, Pincode. Correction/Deletion buttons.CKYCAadhaar (Page 3): Aadhaar No, Front/Back Aadhaar upload. Correction/Deletion buttons.InsuredMembersDetails (Page 4): Self (Name, DOB frozen), Height, Weight. Correction/Deletion buttons.NomineeDetails (Page 5): Relation (Dropdown), Full Name, Birth Date. Addition/Correction/Deletion buttons.PremiumDetails (Page 6): Pre-filled and frozen fields (Base Premium, Add On, Net, Tax, Gross, Payment Frequency, Discount).PaymentDetail (Page 7): Pre-filled and frozen fields (Payer Name, Payment Mode).Documents (Page 8): Document Name, Upload File.EndorsementPayment (Page 9): "Generate Link to Customer" and "Deduct from CD" buttons, followed by "Save & Submit".This will be a large project, so I'll structure it clearly with multiple files.
This project provides a wireframe for the Endorsement Module based on your requirements.
Key Features:
app/page.tsx acts as the main view, toggling between the leads table and the endorsement form.tailwind.config.ts is updated with a red and light red color theme.components/endorsement-table.tsx displays the leads with specified columns, including "Edit" and "View" actions, and top-level action buttons like "Refresh", "Filter", "Customise column", "Raise Endorsement", and "Search".Multi-Step Endorsement Form:
components/endorsement-form.tsx uses an Accordion component to manage the nine pages in a "dropdown manner" as requested.components/form-pages/*) is a separate component, making the form modular and easy to extend.disabled and styled with bg-muted.To run this code, you can download the project and follow the instructions.