JPV
João Paulo Valardão

Control Panel - Copy this React, Tailwind Component to your project

## Descrição da Tela: Painel de Controle Allugar #### Barra Lateral Esquerda 1. **Logo e Nome**: **Texto**: "allygar" **Cor**: Roxo escuro (#4A148C) **Fonte**: Sans serif, negrito **Tamanho**: 24px 2. **Menu de Navegação**: **Itens do Menu** (em ordem, com ícones e cores correspondentes): **Resumo**: Ícone de gráfico (🗂️), cor roxo claro (#7E57C2) **Minha frota**: Ícone de carro (🚗), cor roxo claro (#7E57C2) **Financeiro**: Ícone de cifrão (💲), cor roxo claro (#7E57C2) **Clientes**: Ícone de pessoa (👥), cor roxo claro (#7E57C2) **Equipe**: Ícone de grupo (👤), cor roxo claro (#7E57C2) **Suporte**: Ícone de fone de ouvido (🎧), cor roxo claro (#7E57C2) **Configurações**: Ícone de engrenagem (⚙️), cor roxo claro (#7E57C2) **Sair**: Ícone de porta (🚪), cor roxo claro (#7E57C2) #### Seção Principal 1. **Título Principal**: **Texto**: "Resumo Financeiro" **Cor**: Preto (#000000) **Fonte**: Sans serif, negrito **Tamanho**: 32px 2. **Período de Visualização**: **Botões**: Texto: "Desde o início", "Este ano", "6 meses", "Este mês", "Esta semana", "Hoje" Cor do Texto: Branco (#FFFFFF) Cor do Fundo: Roxo (#7E57C2) Borda: Arredondada Tamanho: 12px 3. **Gráfico de Entradas x Despesas**: **Tipo**: Gráfico de linha **Linhas**: **Entradas**: Verde (#388E3C) **Despesas**: Vermelho (#D32F2F) **Eixos**: Preto (#000000) **Valor Destacado**: **Texto**: "R$ 5.898,14" em 10/03/2023 **Cor**: Azul (#1976D2) **Fonte**: Sans serif, regular **Tamanho**: 18px 4. **Caixas de Informação**: **Entradas**: **Valor**: "R$ 20.457,51" **Variação**: " 0.1% Últimos 30 dias" **Cor**: Verde (#388E3C) **Fonte**: Sans serif, negrito **Tamanho**: 24px **Despesas**: **Valor**: "R$ 4.967,03" **Variação**: "+1.2% Últimos 30 dias" **Cor**: Vermelho (#D32F2F) **Fonte**: Sans serif, negrito **Tamanho**: 24px **Margem de Lucro Líquida**: **Valor**: "26%" **Variação**: "+2.4% Últimos 30 dias" **Cor**: Roxo (#7E57C2) **Fonte**: Sans serif, negrito **Tamanho**: 24px **Em Aberto**: **Valor**: "R$ 17.154,00" **Variação**: "+0.5% Últimos 30 dias" **Cor**: Azul (#1976D2) **Fonte**: Sans serif, negrito **Tamanho**: 24px #### Resumo da Frota 1. **Título**: **Texto**: "Resumo da Frota" **Cor**: Preto (#000000) **Fonte**: Sans serif, negrito **Tamanho**: 28px 2. **Gráfico de Pizza**: **Segmentos**: Disponíveis: 15 (Verde claro #81C784) Alugados: 24 (Azul claro #64B5F6) Em Manutenção: 2 (Amarelo #FFEE58) **Total de Veículos**: 41 3. **Mapa**: **Modelo e Placa**: "Honda Start Preta", placa "TRE6E45" **Cor do Ponto**: Vermelho (#D32F2F) 4. **Tabela de Veículos Alugados no Momento**: **Colunas**: Placa Modelo Compra Valor Previsto Despesas Fipe **Exemplo de Linha**: Placa: "FGE6F42" Modelo: "Honda Start Preta" Compra: "04/02/2006" Valor Previsto: "R$ 34.214,00" Despesas: "R$ 17.534,00" Fipe: "R$ 27.000,00" #### Cores e Estilo **Cores Primárias**: Roxo (#4A148C), Branco (#FFFFFF), Cinza claro (#F5F5F5) **Gráficos**: Cores variadas para diferenciação (Azul, Verde, Vermelho) **Ícones**: Correspondentes a cada seção **Tipografia**: Fonte sans serif, tamanhos variados para títulos (32px, 28px) e texto de corpo (24px)

Prompt
Component Preview

About

ControlPanel - Manage your fleet with a sidebar, financial summaries, and interactive charts. Built with React and Tailwind. Download free code!

Share

Last updated 1 month ago