Spaces:
Running
Running
Ctrl+K
- images Upload 6 image(s)
- 1.52 kB initial commit
- 234 Bytes Crie um projeto React + Vite (sem Tailwind) que implemente o front-end completo de um sistema de gestão de projetos, baseado no seguinte design system, páginas e funcionalidades. Use CSS puro ou CSS Modules, com componentes reutilizáveis, responsivos e consistentes com o estilo definido. O projeto deve ser visualmente funcional, sem necessidade de back-end ou persistência de dados. IMAGEM E FUNCIONALIDADE DO KANBAN BOARD: Descrição do Protótipo (Imagem 1) A primeira imagem exibe a interface principal de uma aplicação web chamada "Kanban Board". O design é limpo, minimalista e utiliza um esquema de cores predominantemente branco e cinza escuro (modo escuro). Elementos Principais: Cabeçalho Superior: No canto superior esquerdo, o título "Kanban Board" é exibido, com a data "quinta-feira, 4 de setembro" logo abaixo. No canto superior direito, há um menu de navegação com as opções "Dashboard", "Projetos" e "Relatórios", cada uma acompanhada de um ícone. Ao lado, há um ícone de perfil de usuário. Barra de Ações: Abaixo do cabeçalho, há uma barra de ferramentas que inclui um campo de busca com o texto "Buscar tarefas...", um filtro para "Todos os projetos" e um botão preto destacado com o texto "+ Nova Tarefa". Painel de Resumo: Horizontalmente, são exibidos cinco cartões de resumo que fornecem uma contagem total das tarefas em cada status: Total: 0 A Fazer: 0 Em Progresso: 0 Revisão: 0 Concluído: 0 Colunas do Kanban: O espaço principal da tela é ocupado por quatro colunas verticais, representando as fases de um fluxo de trabalho: A Fazer (fundo cinza claro) Revisão (fundo amarelo claro) Em Progresso (fundo azul claro) Concluído (fundo verde claro) Cada coluna possui um cabeçalho com seu título e um contador (atualmente em "0"). Dentro de cada coluna, há um espaço reservado com a mensagem "Nenhuma tarefa", indicando que o quadro está vazio. Descrição da Funcionalidade (Imagem 2) A segunda imagem mostra a mesma interface de fundo, mas com uma janela modal (pop-up) sobreposta, que é ativada ao clicar no botão "+ Nova Tarefa". Esta janela serve para criar uma nova tarefa. Elementos da Janela "Nova Tarefa": Título: A janela é intitulada "Nova Tarefa" com o subtítulo "Crie uma nova tarefa para seu projeto". Campos do Formulário: Título *: Campo de texto obrigatório para digitar o título da tarefa. Descrição: Campo de texto maior, opcional, para descrever a tarefa. Projeto *: Menu suspenso (dropdown) para selecionar o projeto ao qual a tarefa pertence. Status: Menu suspenso para definir o status inicial da tarefa (ex: "A Fazer"). Prioridade: Menu suspenso para selecionar a prioridade (ex: "Média"). Data de Vencimento: Campo para selecionar uma data no formato dd/mm/aaaa. Horas Estimadas: Campo para inserir o tempo estimado para a tarefa (ex: 2.5). Horas Reais: Campo para registrar o tempo real gasto (ex: 3). Tarefa Recorrente: Uma caixa de seleção (checkbox). Tags: Um campo para digitar e adicionar tags, com um botão "+" para confirmar a adição. Botões de Ação: Na parte inferior da janela, há dois botões: "Cancelar" (fundo branco) e "Criar Tarefa" (fundo preto).IMAGEM E FUNCIONALIDADE DASHBOARD: 1. Descrição da Página "Dashboard" (Primeira Imagem) A primeira imagem mostra a tela principal do "Dashboard" do sistema de gestão. Assim como a página do Kanban, ela mantém um design limpo e organizado, com foco em fornecer uma visão geral e rápida das informações mais importantes. Elementos Principais: Cabeçalho Superior: No canto esquerdo, exibe o título "Dashboard" e a data "quinta-feira, 4 de setembro". No canto direito, o menu de navegação contém ícones e links para "Projetos", "Kanban" e "Relatórios", além do ícone de perfil do usuário. Cartões de Resumo (Topo): Projetos Ativos: Mostra o número total de projetos. Atualmente, exibe o número "0" com o subtítulo "Total de projetos". Tarefas Hoje: Indica o progresso das tarefas do dia. Mostra a contagem "0/0" e uma barra de progresso vazia. Horas Hoje: Registra o tempo trabalhado no dia. Exibe "0h" com o subtítulo "Tempo trabalhado". Painéis Principais (Corpo da Página): Painel "Tarefas de Hoje": Um card grande à esquerda com o título "Tarefas de Hoje" e o subtítulo "Suas tarefas programadas para hoje". No centro, um ícone de calendário com a mensagem "Nenhuma tarefa programada para hoje" e um botão "Adicionar Tarefa". No canto superior direito deste painel, há um botão preto "+ Nova Tarefa", indicando uma ação rápida para criar uma tarefa. Painel "Projetos Ativos": Um card à direita com o título "Projetos Ativos" e o subtítulo "Seus projetos em andamento". Um link "Ver Todos" no canto superior direito para navegar para a lista completa de projetos. No centro, um ícone de usuário com a mensagem "Nenhum projeto criado" e um botão "Criar Projeto". 2. Descrição da Funcionalidade "Nova Tarefa" (Segunda Imagem) Esta imagem demonstra a funcionalidade de criar uma nova tarefa diretamente a partir do Dashboard. A janela modal (pop-up) que aparece é idêntica àquela presente na página do Kanban Board, garantindo consistência na experiência do usuário. Detalhes da Funcionalidade: Ação: Ao clicar no botão "+ Nova Tarefa" (localizado no painel "Tarefas de Hoje" do Dashboard), uma janela pop-up chamada "Nova Tarefa" é exibida. Formulário de Criação: A janela contém um formulário completo para registrar os detalhes da tarefa: Título *: Campo obrigatório para o nome da tarefa. Descrição: Campo opcional para detalhes adicionais. Projeto *: Menu para associar a tarefa a um projeto existente. Status: Menu para definir o estado inicial (ex: A Fazer). Prioridade: Menu para classificar a urgência da tarefa. Data de Vencimento: Campo para definir um prazo. Horas Estimadas e Horas Reais: Campos para controle de tempo. Tarefa Recorrente: Opção para marcar se a tarefa se repete. Tags: Campo para adicionar etiquetas de organização. Botões: "Cancelar" para fechar a janela e "Criar Tarefa" para salvar. 3. Descrição da Funcionalidade "Novo Projeto" (Terceira Imagem) A terceira imagem mostra o resultado da interação com o painel de "Projetos Ativos" no Dashboard. Ao clicar em "Criar Projeto", o usuário é levado a uma nova página chamada "Gestão de Projetos", e a funcionalidade de criação de um novo projeto é imediatamente ativada através de uma janela modal. Detalhes da Página e Funcionalidade: Página de Fundo ("Gestão de Projetos"): O cabeçalho indica o título da página e a data. Vários cartões de resumo são visíveis ao fundo, como "Total de Projetos", "Clientes", "Progresso Médio", etc. Há uma barra de busca e um botão "+ Novo Projeto". Janela Modal "Novo Projeto": Ação: Esta janela aparece para que o usuário possa criar um novo projeto. Formulário de Criação: Nome do Projeto *: Campo de texto obrigatório para o nome do projeto. Cliente *: Campo obrigatório para digitar o nome do cliente associado. Descrição: Campo de texto opcional para uma descrição detalhada do projeto. Cor do Projeto: Uma paleta com 12 opções de cores para personalização visual e identificação rápida do projeto. Botões: Na parte inferior, estão os botões "Cancelar" e "Criar Projeto" para finalizar a ação. IMAGEM DESCREVANDO A PÁGINA KANBAN BOARD Descrição da Imagem "Kanban Board" A imagem exibe a interface principal de uma aplicação de gerenciamento de projetos chamada "Kanban Board". O design é minimalista e limpo, utilizando um tema claro (fundo branco com elementos em cinza, preto e cores sutis) para facilitar a visualização e organização. Elementos Principais: Cabeçalho Superior: No canto superior esquerdo, o logotipo e o título do projeto, "Kanban Board", são exibidos, com a data "quinta-feira, 4 de setembro" logo abaixo. No canto superior direito, há um menu de navegação principal com links para "Dashboard", "Projetos" e "Relatórios", cada um acompanhado por um ícone. Ao final, um ícone de perfil de usuário é visível. Barra de Ações e Filtros: Logo abaixo do cabeçalho, uma barra de ferramentas permite ao usuário interagir com o quadro. Ela contém um campo de busca com o texto "Buscar tarefas...". Ao lado da busca, há um filtro de projetos com a opção "Todos os projetos" selecionada. No canto direito desta barra, um botão preto destacado com o texto "+ Nova Tarefa" permite a criação de novas atividades. Painel de Resumo de Tarefas: Uma linha de cinco pequenos cartões (cards) oferece uma visão geral e quantitativa das tarefas no quadro: Total: 0 A Fazer: 0 Em Progresso: 0 Revisão: 0 Concluído: 0 Cada cartão possui um círculo colorido associado, correspondendo às colunas do quadro. Colunas do Kanban: O corpo principal da página é dividido em quatro colunas verticais que representam as etapas do fluxo de trabalho. Cada coluna tem um cabeçalho colorido e um contador, que atualmente marca "0". As colunas são: A Fazer (fundo cinza claro) Revisão (fundo amarelo claro) Em Progresso (fundo azul claro) Concluído (fundo verde claro) Dentro de cada coluna, há um espaço indicando que não há tarefas nessa etapa, com a mensagem. FUNCIONALIDADE GESTÃO DE PROJETO 1. Descrição da Página "Gestão de Projetos" (Primeira Imagem) A primeira imagem exibe a página principal de "Gestão de Projetos". A interface é clara, organizada e informativa, utilizando um tema branco (light mode) para apresentar os dados. O objetivo da página é fornecer uma visão geral de todos os projetos e permitir o seu gerenciamento. Elementos Principais: Cabeçalho Superior: À esquerda, o título "Gestão de Projetos" e a data "quinta-feira, 4 de setembro". À direita, o menu de navegação com links para "Dashboard", "Kanban" e "Relatórios", além do ícone de perfil do usuário. Painel de Resumo (Cards Superiores): Uma fileira com cinco cartões que exibem métricas chave de forma resumida: Total de Projetos: 0 ativos. Clientes: 0 clientes únicos. Tarefas: 0/0 (concluídas/total). Horas Trabalhadas: 0.0h total registrado. Progresso Médio: 0% de conclusão geral. Barra de Ações e Filtros: Abaixo dos cards, há uma barra com: Um campo para "Buscar projetos...". Um filtro para "Todos os clientes". Um filtro de ordenação, como "Mais recentes". Um botão preto "+ Novo Projeto" no canto direito. Área de Conteúdo Principal: Como nenhum projeto foi criado ainda, a área principal exibe uma mensagem centralizada. Um ícone de uma pasta vazia. O título "Nenhum projeto criado". O subtítulo "Comece criando seu primeiro projeto para organizar suas tarefas". Um botão de ação centralizado "+ Criar Primeiro Projeto". 2. Descrição da Funcionalidade "Novo Projeto" (Segunda Imagem) A segunda imagem mostra a mesma página de "Gestão de Projetos", mas desta vez com a funcionalidade de criação de projeto ativada. Ao clicar em qualquer um dos botões ("+ Novo Projeto" ou "+ Criar Primeiro Projeto"), uma janela modal (pop-up) é sobreposta à tela. Detalhes da Janela "Novo Projeto": Ação: A janela é aberta para permitir que o usuário insira as informações de um novo projeto. Título: A janela é chamada de "Novo Projeto", com a instrução "Crie um novo projeto para organizar suas tarefas". Formulário de Criação: Nome do Projeto *: Um campo de texto obrigatório para inserir o nome do projeto. Cliente *: Um campo de texto obrigatório para associar o projeto a um cliente. Descrição: Uma área de texto maior, opcional, para fornecer mais detalhes sobre o projeto. Cor do Projeto: Uma paleta visual com 12 opções de cores vibrantes. Isso permite ao usuário escolher uma cor para identificar facilmente o projeto em outras telas do sistema. Botões de Ação: Na parte inferior da janela, há dois botões: "Cancelar", para fechar o pop-up sem salvar, e "Criar Projeto", um botão preto para confirmar e criar o novo projeto. : IMAGEM DESCREVENDO A PÁGINA RELATÓRIOS IA Descrição da Página "Relatórios IA" A imagem apresenta a página "Relatórios IA", uma seção do sistema focada em fornecer análises e insights gerados por Inteligência Artificial sobre o desempenho de projetos e tarefas. A interface segue o mesmo padrão visual das outras telas, com um design limpo, organizado em cards e utilizando um tema claro (light mode). Elementos Principais: Cabeçalho Superior: No canto esquerdo, o título da página "Relatórios IA" e a data "quinta-feira, 4 de setembro". No canto direito, o menu de navegação permite alternar entre "Projetos", "Kanban" e "Dashboard", finalizando com o ícone de perfil do usuário. Barra de Filtros: Logo abaixo do cabeçalho, dois menus suspensos (dropdowns) permitem filtrar os dados exibidos nos relatórios: Filtro de projetos: "Todos os projetos". Filtro de período: "Este mês". Painéis de Relatórios (Cards): Distribuição por Prioridade: Analisa a proporção de tarefas por nível de prioridade. Mostra uma legenda com cores: Vermelho para Alta, Amarelo para Média e Verde para Baixa. Atualmente, todas as categorias marcam 0 (0%). Insights de IA: Este é o card principal e mais descritivo. Ele explica o propósito da funcionalidade: "Análises automáticas e recomendações personalizadas" que transformam tarefas em insights acionáveis, capturando tempo investido, padrões de produtividade e métricas de desempenho. Detalha os tipos de relatórios disponíveis: Diário (ações das últimas 24h) e Semanal (tendências de 7 dias, metas e otimização). Contém dois botões de ação: "+ Relatório diário" e "+ Relatório semanal". Produtividade: Mede o volume de tarefas concluídas. Exibe 0.0% com uma barra de progresso vazia e a contagem 0/0. Eficiência: Compara o tempo gasto com o tempo estimado. Mostra 100.0% com o subtítulo "0.0h de 0.0h estimadas". Em Progresso: Indica o número de tarefas que estão sendo trabalhadas no momento. Mostra o número 0 com o subtítulo "Tarefas ativas". Atrasadas: Alerta sobre tarefas que ultrapassaram o prazo. Mostra o número 0 com um ícone de exclamação vermelho e o subtítulo "Precisam atenção". ( junte os ois textos)
- 72.8 kB 1. Dashboard
- 388 Bytes initial commit