Dashboard - Copy this React, Tailwind Component to your project
Desenvolver um sistema de dashboard utilizando React.js, replicando a interface apresentada na imagem fornecida. Requisitos do Projeto: Estrutura do Dashboard: Criar uma barra de navegação superior com os seguintes elementos: Logo do sistema ("MatDash"). Menu de navegação com dropdowns (ex.: "Dashboard", "Front Pages", "Apps", "Pages", "UI", "Forms", "Tables", "Charts"). Ícones interativos para modo claro/escuro, notificações, seleção de idioma (bandeira) e avatar do usuário. Menu lateral ou alternativo para navegação se necessário em dispositivos menores. Componentes da Interface: Boas vindas: Um card com um título de boas vindas personalizado (ex.: "Welcome Back, [Usuário]"). Exibição de "Budget" (orçamento) e "Expense" (despesas). Revenue Forecast (Previsão de Receita): Um gráfico de linha mostrando a evolução da receita para os anos de 2022, 2023 e 2024. Utilizar uma biblioteca de gráficos como react chartjs 2 ou Recharts. Cards de Resumo: Customers: Mostrar o total de clientes, variação percentual e mini gráfico. Projects: Mostrar o total de projetos, variação percentual e mini gráfico em barras. Desempenho e Resumo (Performance & Overview): Sessões adicionais para exibição de desempenho recente e variações em clientes ou vendas. Estilo e Design: Utilizar CSS Modules, Styled Components ou Tailwind CSS para estilização. Paleta de cores suaves, como tons de azul, roxo e cores pastel. Layout responsivo para que a interface se adapte perfeitamente a diferentes tamanhos de tela (desktop, tablet e mobile). Componentização: Criar os seguintes componentes reutilizáveis: Navbar barra de navegação superior. Card componente genérico para exibir dados (ex.: Customers, Projects, Budget). Chart componente para gráficos dinâmicos (usando biblioteca de gráficos). Sidebar se necessário, criar um menu lateral para dispositivos móveis. Footer rodapé opcional. Bibliotecas Sugeridas: React Router: Para navegação entre diferentes páginas (mesmo que seja um placeholder no momento). React Icons: Para adicionar ícones aos menus e botões. Chart.js ou ApexCharts: Para gráficos interativos. React Bootstrap ou Tailwind CSS: Para criar layouts responsivos rapidamente.
