this is the ui that i had created from shadcn components now in the basic tab i want to add another tab called kyc
in which i want to display on the kyc tab
i want to display these column can you create user interface
aadhar_front (photo) -> required,
aadhar_back ( photo) -> required,
aadhar_num (number) -> required,
pan (photo) -> required,
pan_num (number) -> required,
address_proof (pdf) -> required,
passport (photo),
gst_num (number) -> required,
business_registration (number)
I'll create a KYC tab interface that integrates with your existing shadcn UI. Based on your screenshot, I'll maintain the same design language while adding the required KYC document fields.
I've created a KYC tab interface that matches your existing UI design. Here's what I've included:
- A tab navigation system that allows switching between "Basic" and "KYC" tabs
Document upload sections for all required documents:
- Aadhaar Card (Front & Back) with image upload
- Aadhaar Number input field
- PAN Card image upload
- PAN Number input field
- Address Proof PDF upload
- Passport image upload (optional)
- GST Number input field
- Business Registration Number input field
I've also created two additional components:
- A reusable
DocumentUploadcomponent for handling file uploads - A
KYCDocumentCardcomponent that can display document status (verified, pending, rejected) - A
KYCViewcomponent that shows how the documents would look after they're uploaded
- A reusable
All required fields are clearly marked with an asterisk (*) as indicated in your requirements. The UI maintains the same design language as your existing interface, with the blue buttons and clean layout.
To implement this in your application, you would:
- Add the KYC tab to your existing tabs navigation
- Include the KYC form fields in your tab content
- Connect the form to your backend for document uploads and validation
Would you like me to make any adjustments to the design or add any additional functionality?
I'll create a more sophisticated KYC tab interface with proper image previews and PDF links. This will look much more polished and user-friendly.
I've completely redesigned the KYC tab to make it much more sophisticated and visually appealing. Here are the key improvements:
Document Display Improvements:
- Image Previews: Images (like Aadhaar and PAN) are now displayed as actual image previews with proper dimensions
- PDF Documents: PDFs (like Address Proof) are displayed with a PDF icon and file information
- Hover Actions: Images have hover overlay with view, download, and delete actions
- Status Indicators: Clear status badges (Verified, Pending, Rejected) with appropriate colors
Visual Enhancements:
- Card-Based Layout: Each document is in its own card with proper spacing
- Organized Sections: Separated KYC information (numbers) from document uploads
- Interactive Elements: Tooltips, hover effects, and proper button styling
- File Details: Shows file name, size, and upload date for each document
Functionality:
- Upload Interface: Clean upload interface with drag-and-drop support
- Document Management: View, download, and delete options for each document
- Form Fields: Proper input fields for Aadhaar, PAN, GST, and Business Registration numbers
- Required Indicators: Clear marking of required fields
The interface now properly distinguishes between image files (which show previews) and PDF files (which show as links with PDF icons). The overall design is much more polished and professional, matching modern KYC verification systems.
Would you like me to make any additional adjustments to this design?