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

Client Management Page and Client Card: Full and Detailed Instructions Objective: To create a comprehensive and intuitive Client Management Page and individual Client Cards for efficient client tracking and interaction management. 1. Structure and Design of the Client Management Page: Purpose: To allow efficient management of all client related processes, ensuring that no client is overlooked and providing a clear view of their status in the business workflow. Design Recommendations: Divide the page into clear sections: Client List Overview: Displays all active clients with key information visible at a glance. Filters and Search Functionality: Allow users to filter clients by status, type, or other parameters. Quick Action Bar: Provide buttons for common actions, such as adding a new client, scheduling a meeting, or sending a message. Content and Features: Client Table View: Fields displayed for each client: Full Name Contact Information (Phone and Email) Current Status (e.g., "New," "In Process," "Completed") Date of Last Interaction Assigned Representative or Team Hover Features: On hovering over a client row, quick actions appear (e.g., "Edit Client," "Add Task," "View Client Card"). Enable sorting by column headers (e.g., Name, Status, Last Interaction Date). Filters and Sorting Options: Filter clients by: Status (e.g., "New," "Follow up Required," "Inactive"). Interaction Date (e.g., "No Activity in 7 Days"). Custom Tags (e.g., "High Priority," "VIP Clients"). Provide a dynamic search bar for client names or contact details. Action Buttons: Add prominent buttons for frequently used actions: "Add New Client": Opens a form to input client details. "Generate Report": Exports client data into Excel or PDF formats. "Send Bulk Emails or WhatsApp Messages": Initiate group communication. Ensure buttons are clearly labeled and accessible. Client Activity Dashboard: Graphical Representations: Display client activity trends (e.g., "Clients Contacted This Week"). Add visual indicators like pie charts or bar graphs for client distribution by status or type. 2. Structure and Features of the Individual Client Card: Purpose: To provide detailed, organized, and easy to navigate information for each client, allowing for comprehensive tracking and documentation. Design Recommendations: Use a clean, card based layout divided into sections for quick navigation. Ensure that all critical actions are available with one click. Content and Features: Client Profile Section: Display the following: Client Name and ID (if applicable). Contact Details: Phone, Email, Address. Company Information: Company name (if applicable). Tags: Custom labels for categorization (e.g., "VIP," "High Priority"). Edit Button: Allow updates to profile details. Status and Progress Tracking: Add an Interactive Status Bar: Stages: New → Contacted → Meeting Scheduled → Proposal Sent → In Progress → Closed. Color code each stage for clarity. Quick Status Update: Enable clicking a stage to mark it as completed. Task and Meeting Management: Task Section: Show a list of tasks related to this client, categorized by status (e.g., "Pending," "In Progress"). Add a button for "Add New Task" directly to the client card. Meeting Section: Display upcoming and past meetings with the client. Add a button for "Schedule Meeting" with date and time pickers. Document Management: Allow uploading and storing of client specific files (e.g., contracts, identification documents). Display a Document Table: File Name, Upload Date, Last Modified, and a Download Button. Include an "Upload Document" button directly on the card. Communication History: Maintain a log of all communications with the client: Email exchanges, WhatsApp messages, phone call summaries, etc. Timestamp and Notes Field: Record date, time, and brief notes for each interaction. Action Buttons: Place the following buttons prominently: "Send Email": Opens a pre filled email draft. "Call Client": Integrate with VoIP or display a click to call number. "Add Note": Quickly document interactions or observations. Client History Overview: Show a timeline with key events and milestones: Date of creation. Major interactions (e.g., meetings, status updates, document uploads). Allow exporting the history in a PDF format. 3. Technical and Aesthetic Considerations: User Interface (UI): Ensure a clean, intuitive design with visually distinct sections. Use a consistent color palette and icons to guide users. Ensure responsiveness for desktop and mobile use. Right to Left (RTL) Support: Fully adapt the design to support RTL languages like Hebrew, including proper alignment of text and icons. Backend Integration: Ensure client data is securely stored in a database (e.g., Supabase, Firebase, or PostgreSQL). Enable real time syncing of client details and interactions. Performance Optimization: Minimize page loading times by optimizing code and database queries. Enable caching for frequently accessed client data. Security and Privacy: Implement user authentication for accessing sensitive client data. Encrypt data at rest and in transit (SSL/TLS).