RW
ricardo wellausen

Dashboard - Copy this React, Tailwind Component to your project

Criar uma tela chamada "Dashboard" com os seguintes elementos: 1. **Sidebar fixa** (largura: 64px): - Cor de fundo: branca (#ffffff). - Sombra sutil. - Títulos: - "Dashboard" (ícone: FiHome). - "Clientes" (ícone: FiUsers). - "Atividades" (ícone: FiActivity). - "Agenda" (ícone: FiCalendar). - "Configurações" (ícone: FiSettings). 2. **Cabeçalho fixo**: - Altura: 64px. - Cor de fundo: branca (#ffffff). - Sombras leves. - Elementos: - Nome do sistema: "TRIFONO" (fonte: negrito, tamanho: 24px). - Nome do usuário logado à direita (ex.: "Olá, [Nome]!"). - Ícone de notificação (ícone: FiBell). - Botão de logout (ícone: FiLogOut). 3. **Conteúdo Principal**: - Layout em grid com 4 colunas. - Espaçamento entre elementos: 16px. - **Widgets**: - "Atendimentos do Dia" (número: 32). - "Atividades Pendentes" (número: 15). - "Aniversários do Dia" (número: 3). - "Contas a Pagar" (número: 8). - **Gráficos**: - Gráfico de barras: "Atendimentos por Período" (exibir dados fictícios para teste). - Gráfico de pizza: "Despesas por Categoria" (dados fictícios). 4. **Botões de Ações Rápidas**: - Botões no rodapé da tela: - "Registrar Atividade". - "Adicionar Cliente". - "Criar Evento na Agenda".

Prompt
Component Preview

About

Dashboard - A responsive UI with a fixed sidebar, header, grid layout, widgets, and quick action buttons, built with React and Tailwin. Get code instantly!

Share

Last updated 1 month ago