Loan Management System - Copy this React, Tailwind Component to your project

Develop a loan management application that allows users to log in, manage clients, register loans, process payments, and generate receipts. The application should include user roles and permissions. 1. User Login Users should log in with a username and password. Passwords must be encrypted for security. Roles should include admin and employee, with admins having full access to the system. Optional: Include "Forgot Password" functionality. 2. Client Management Client Details: Full Name Identification number (e.g., ID card or passport) Phone number Address Client status (active/inactive) Upon login, the system should display a list of all existing clients. Features: Search and filter clients by name, identification number, or status. Add new clients through a form. 3. Loan Registration Loan Details: Select an existing client. Enter the loan amount. Select payment frequency: weekly, biweekly, or monthly. Start date (chosen manually). Loan duration: Weekly: specify the number of weeks. Biweekly: specify the number of biweekly periods. Monthly: specify the number of months. The end date should be automatically calculated based on the payment frequency and loan duration. Optional: Include an interest rate and calculate the total repayment amount. 4. Payment Management Allow users to record payments against a loan. Automatically calculate the remaining balance after each payment. Generate a receipt for each payment: Receipt Details: Payment date Receipt number (unique) Client name Amount paid Remaining loan balance Original loan amount Payment type (weekly, biweekly, monthly) Loan identifier (for clients with multiple active loans) Provide an option to: View the receipt in the app. Download it as a PDF. 5. Loan Overview and History Display a detailed view of each loan: Total loan amount. Payment frequency and due dates. List of all payments made. Remaining balance. Include filtering and sorting options for loans (e.g., active, completed). 6. Database Requirements Users Table: User ID (primary key) Username Password (encrypted) Role (e.g., admin, employee) Clients Table: Client ID (primary key) Full Name Identification number Phone Address Status (active/inactive) Loans Table: Loan ID (primary key) Client ID (foreign key) Loan amount Payment type (weekly, biweekly, monthly) Loan duration (weeks, biweekly periods, or months) Start date End date Total amount to repay Payments Table: Payment ID (primary key) Loan ID (foreign key) Payment date Amount paid Remaining balance Receipt number (unique) 7. Features Summary User authentication with role based access. Client management: Add, view, and filter clients. Loan registration with automatic calculations. Payment recording and receipt generation (viewable and downloadable). Loan history and balance tracking.