Feat: implemented Profile page and KYC verification process on user dashboard.

[Iwueseiter]

Resolves #45

Overview

This pull request adds new components for user profile and document upload functionality to the user dashboard for KYC verification, focusing on personal details, ID verification, and document upload processes.

Components Added

1. PersonalDetails.tsx

   • Implements a form for capturing user personal information
   • Includes fields for:
     • Full Name
     • Email Address
     • Date of Birth
     • Nationality
     • Residential Address
   • Uses React state management for form data
   • Styled with Tailwind CSS for a dark, modern UI

2. Complete.tsx

   • Document upload component for completed document verification
   • Allows users to view and remove uploaded documents
   • Supports uploading front ID, back ID, and proof of address
   • Includes file removal functionality
   • Uses Image components for icons

3. driversLicense.tsx

   • Main document upload workflow component
   • Manages file upload state
   • Renders different upload stages based on uploaded document count
   • Supports file uploads for ID front, back, and proof of address
   • Integrates CompleteDocumentUpload and IncompleteDocumentUpload components

4. incompleteUpload.tsx

   • Handles partial document upload scenarios
   • Supports uploading individual document types
   • Provides file removal and management functionality
   • Styled consistently with other upload components

5. kyc.tsx

   • Implements a comprehensive KYC (Know Your Customer) verification workflow
   • Multi-step process with tabs for:
     • Personal Details
     • Upload Documents
     • Selfie Verification
   • Navigation between steps
   • Conditional rendering of verification progress

6. nationalID.tsx

   • Specific component for National ID document upload
   • File validation for document type and size
   • Support for JPG, PNG, PDF uploads
   • Error handling for invalid file uploads
   • Drag-and-drop and browse file upload options

7. passport.tsx

   • Similar to nationalID.tsx
   • Tailored for passport document uploads
   • Consistent file upload and validation logic

8. PendingVerification: Displays user profile details during pending verification

9. SelfieVerification: Handles selfie capture and initial face processing

10. UploadDocuments: Allows users to upload different types of ID documents (National ID, Driver's License, Passport)

11. VerificationProgress: Shows verification submission status

12. VerifiedDetails: Displays verified user profile information

13. Changes in profile.tsx

• Added enum for verification status
• Implemented dynamic rendering based on verification state
• Added initial mock profile data
• Created method to handle KYC initiation

Profile Flow States

The new implementation supports three key verification states:

• Not Started: Prompt to begin KYC
• Pending: Tracking verification submission
• Verified: Displaying completed profile information

Key Features

• Responsive design with dark theme
• Modular component structure
• Form validation and state management
• State management for verification process
• Support for multiple ID document types
• Selfie verification with camera access
• File upload with drag-and-drop support

Styling

• Utilized Tailwind CSS for styling
• Custom color scheme with dark backgrounds
• Responsive layout
• Icon integration imported from figma Design