Default Component - Copy this React, Tailwind Component to your project
Build a fully functional and professional SaaS dashboard for 'Pherce.ai' using ReactJS, TailwindCSS, and Recharts. The dashboard must not only include a clean and responsive design but also have fully working functionalities for navigation, interactivity, and data visualization. Follow these detailed instructions for each area of the application: General Requirements: Use React Router to enable navigation between sections (Dashboard, Empleados AI, Chats, Métricas, Integraciones, Configuración). Create a state management system (useContext or Redux) to handle global states, such as user data, notifications, and active tabs. Implement dynamic components that fetch mock data to simulate API responses (e.g., sales data, employee information). Ensure the design is responsive for mobile and desktop. Application Structure: Sidebar: Create a collapsible sidebar with icons and text labels for the following sections: Dashboard (default view when the app loads). Empleados AI (shows a list of employees and their assigned tasks). Chats (opens a chat interface). Métricas (displays various charts). Integraciones (lists available integrations with external apps). Configuración (provides user settings). Cerrar sesión (redirects to a login page). Highlight the active menu item using a distinct style (e.g., a different background color). Header: Include: A greeting with the user's name ('Hola, Victoria'). A search bar to filter employees or data dynamically. Notification icon with a dropdown to show recent alerts. User profile section with a dropdown menu (e.g., View Profile, Logout). Main Content: Banner: Showcase an AI assistant ('Eva') with a friendly welcome message and a brief description. Add a button ('Enviar resumen por WhatsApp') that triggers an alert or mock WhatsApp API integration. Sales Summary: Use Recharts to create an interactive bar chart displaying monthly sales data. Include toggle buttons to switch between chart types (bar, line). Add dynamic filtering (e.g., Hora, Día, Semana, Mes, Año). Important Notifications: Display two interactive cards with real-time updates: 'Tienes 2 nuevas reservas agendadas' with a 'Hacer seguimiento' button that opens a modal. 'Acaba de llegar un nuevo pedido' with a similar button for actions. Add task completion cards ('Tarea cumplida') with check icons. Chats Section: Create a basic chat interface where users can send and receive messages with AI employees. Use mock data to populate chat history. Métricas Section: Use Recharts to create multiple charts (e.g., pie charts, line graphs) for metrics like user engagement and sales growth. Integraciones Section: List available integrations with a description and a 'Conectar' button. Configuración Section: Allow the user to update personal details, adjust preferences, and enable/disable notifications. Additional Requirements: Use TailwindCSS for consistent and modern styling with rounded corners, soft shadows, and clean typography. Add animations with Framer Motion for smooth transitions and hover effects. Ensure all buttons and inputs have interactive states (hover, focus, active). Use mock APIs or JSON files to provide dynamic and realistic content. Expected Result: A complete React application with functional navigation, interactive elements, and a professional UI. The app should be production-ready and easy to extend for future features
