"use client"; import { BarChart3, BriefcaseBusiness, CalendarDays, CheckCircle2, ChevronDown, ChevronRight, ClipboardList, FileText, LayoutDashboard, Lightbulb, Package, Receipt, Search, Settings, Users, Wrench, } from "lucide-react"; import { useState } from "react"; import { Card } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; interface HelpModule { id: string; title: string; icon: any; color: string; description: string; features: string[]; howTo: { step: string; desc: string }[]; tips: string[]; } const MODULES: HelpModule[] = [ { id: "dashboard", title: "Dashboard — Painel Executivo", icon: LayoutDashboard, color: "text-blue-600 bg-blue-500/10 border-blue-500/20", description: "O Dashboard é a tela inicial do sistema. Apresenta de forma visual e em tempo real os principais indicadores de desempenho (KPIs) da sua locadora.", features: [ "Receita do mês e receita anual com variação percentual", "Total de locações ativas e equipamentos disponíveis", "Gráfico de Receita Mensal (barras) e Status da Frota (rosca)", "Taxa de Ocupação da Frota e Ticket Médio por locação", "Fluxo de Caixa consolidado do período", "Próximas devoluções e últimas atividades do sistema", ], howTo: [ { step: "Acessar o Dashboard", desc: "Clique em 'Dashboard' no menu lateral para visualizar todos os KPIs." }, { step: "Interpretar os cartões", desc: "Cada cartão exibe o valor atual e o percentual de variação em relação ao mês anterior. Verde indica crescimento, vermelho indica queda." }, { step: "Analisar os gráficos", desc: "O gráfico de barras mostra a evolução da receita mês a mês. O gráfico de rosca mostra a distribuição da frota (Disponível, Locado, Reservado, Manutenção)." }, { step: "Verificar devoluções", desc: "A tabela 'Próximas Devoluções' lista os contratos com retorno previsto para os próximos dias." }, ], tips: [ "Acesse o Dashboard toda manhã para ter uma visão geral do negócio.", "Use os KPIs de inadimplência para acionar o departamento financeiro rapidamente.", ], }, { id: "clientes", title: "Clientes — Gestão de Carteira", icon: Users, color: "text-emerald-600 bg-emerald-500/10 border-emerald-500/20", description: "O módulo de Clientes centraliza o cadastro e a gestão de toda a carteira de clientes da locadora, incluindo pessoas físicas (CPF) e jurídicas (CNPJ).", features: [ "Cadastro completo: nome, CPF/CNPJ, e-mail, telefone e endereço", "Histórico de locações e contratos por cliente", "Indicadores de inadimplência e status do cliente", "Busca rápida por nome, CPF/CNPJ ou e-mail", "Filtro por status (Ativo / Inativo / Inadimplente)", "Exportação da lista de clientes", ], howTo: [ { step: "Cadastrar novo cliente", desc: "Clique em '+ Novo Cliente' no canto superior direito. Preencha os dados obrigatórios: Nome, Documento (CPF ou CNPJ) e E-mail. Clique em 'Salvar'." }, { step: "Buscar um cliente", desc: "Use a barra de pesquisa para encontrar um cliente pelo nome, CPF, CNPJ ou e-mail. Os resultados são filtrados em tempo real." }, { step: "Editar um cliente", desc: "Clique no ícone de lápis na linha do cliente que deseja editar. Altere os dados necessários e salve." }, { step: "Ver histórico", desc: "Clique no ícone de 'Olho' para visualizar o histórico completo de locações, contratos e pagamentos do cliente." }, ], tips: [ "Mantenha os dados de contato (WhatsApp e e-mail) atualizados para facilitar as cobranças.", "Clientes marcados como 'Inadimplentes' são bloqueados automaticamente de novas locações.", ], }, { id: "equipamentos", title: "Equipamentos — Frota & Patrimônio", icon: Package, color: "text-violet-600 bg-violet-500/10 border-violet-500/20", description: "Gerencia o cadastro completo de toda a frota de máquinas e equipamentos, incluindo controle de disponibilidade, patrimônio, manutenção e localização.", features: [ "Cadastro detalhado: código, marca, modelo, número de série e tag patrimonial", "Status em tempo real: Disponível, Locado, Reservado ou Em Manutenção", "Vinculação a Categorias de Equipamentos", "Registro do valor de reposição e custo de locação por período", "Histórico completo de locações e manutenções do equipamento", "Filtro por status, categoria e disponibilidade", ], howTo: [ { step: "Cadastrar equipamento", desc: "Clique em '+ Novo Equipamento'. Informe: Código interno, Marca, Modelo, Número de Série (chassi) e Tag Patrimonial. Selecione a Categoria e defina o valor de locação." }, { step: "Verificar disponibilidade", desc: "Use os cartões de KPI no topo da página para ver o total de equipamentos por status. O filtro 'Disponível' lista apenas as máquinas livres para locação." }, { step: "Registrar manutenção", desc: "Ao abrir uma OS no módulo de Manutenções, o status do equipamento é alterado automaticamente para 'Em Manutenção'." }, { step: "Ver histórico do equipamento", desc: "Clique no código do equipamento para ver todas as locações, reservas e manutenções registradas para aquela máquina." }, ], tips: [ "Mantenha o campo 'Valor de Reposição' atualizado para cálculo correto de seguros e contratos.", "Use o filtro 'Em Manutenção' para saber quais máquinas estão na oficina e por quanto tempo.", ], }, { id: "categorias", title: "Categorias — Classificação da Frota", icon: BriefcaseBusiness, color: "text-amber-600 bg-amber-500/10 border-amber-500/20", description: "As Categorias permitem organizar e classificar a frota de equipamentos em grupos como 'Escavadeiras', 'Compressores', 'Plataformas Elevatórias', facilitando buscas e relatórios.", features: [ "Criação ilimitada de categorias e subcategorias", "Contagem automática de equipamentos por categoria", "Edição e exclusão de categorias (com validação de vínculos)", ], howTo: [ { step: "Criar uma categoria", desc: "Clique em '+ Nova Categoria'. Informe o nome (ex: 'Escavadeiras Hidráulicas') e opcionalmente uma descrição. Salve." }, { step: "Vincular ao equipamento", desc: "No cadastro de cada equipamento, selecione a Categoria correspondente no campo 'Categoria'." }, ], tips: [ "Organize as categorias de forma hierárquica (ex: 'Movimentação de Terra > Escavadeiras') para facilitar a busca e os relatórios.", ], }, { id: "locacoes", title: "Locações — Controle Operacional", icon: ClipboardList, color: "text-cyan-600 bg-cyan-500/10 border-cyan-500/20", description: "O coração do sistema. Gerencia todo o ciclo de vida das locações de equipamentos: abertura, equipamentos alocados, datas, preços, entregas e devoluções.", features: [ "Criação de locações com seleção de cliente, equipamentos e período", "Cálculo automático do valor total com base no período e na diária/semanal/mensal", "Controle de status: Ativa, Concluída, Cancelada e Em Atraso", "Registro de entrega e devolução com data e responsável", "Geração automática de Contrato e Conta a Receber no Financeiro", "Histórico e filtros por período, cliente e status", ], howTo: [ { step: "Abrir nova locação", desc: "Clique em '+ Nova Locação'. Selecione o Cliente e os Equipamentos desejados. Defina as datas de início e término, a modalidade de cobrança (diária, semanal ou mensal) e o valor acordado." }, { step: "Registrar entrega", desc: "Após abrir a locação, clique em 'Registrar Entrega' para confirmar que os equipamentos foram enviados ao cliente. O status muda para 'Ativa'." }, { step: "Registrar devolução", desc: "Quando os equipamentos retornarem, clique em 'Registrar Devolução'. O sistema verificará avarias, liberará o equipamento e encerrará a locação." }, { step: "Renovar locação", desc: "Locações podem ser renovadas estendendo a data de término. O sistema recalcula automaticamente o valor adicional." }, ], tips: [ "Gere sempre o contrato no momento da abertura da locação para proteger juridicamente a empresa.", "Configure alertas de vencimento para ser notificado quando a locação estiver próxima do término.", ], }, { id: "reservas", title: "Reservas — Agendamento de Frota", icon: CalendarDays, color: "text-teal-600 bg-teal-500/10 border-teal-500/20", description: "Permite que clientes ou equipes reservem equipamentos para datas futuras, garantindo disponibilidade e evitando conflitos de agenda na frota.", features: [ "Criação de reservas futuras com seleção de período e equipamento", "Verificação automática de conflito de disponibilidade", "Status de reserva: Confirmada, Pendente e Cancelada", "Conversão direta de Reserva para Locação com 1 clique", "Notificações de confirmação e vencimento de reserva", ], howTo: [ { step: "Criar uma reserva", desc: "Clique em '+ Nova Reserva'. Selecione o cliente, os equipamentos e as datas desejadas. O sistema verificará automaticamente se os equipamentos estão disponíveis no período." }, { step: "Confirmar reserva", desc: "Após a validação, confirme a reserva. O equipamento ficará bloqueado para o período reservado." }, { step: "Converter em locação", desc: "No dia da retirada, clique em 'Converter em Locação' na reserva. Todos os dados serão transferidos automaticamente." }, { step: "Cancelar reserva", desc: "Clique no ícone de cancelamento. O equipamento ficará imediatamente disponível para novas reservas ou locações." }, ], tips: [ "Use as reservas para gerenciar a demanda antecipada de clientes frequentes.", "Defina uma política de prazo mínimo para cancelamento de reservas.", ], }, { id: "contratos", title: "Contratos — Documentação Jurídica", icon: FileText, color: "text-indigo-600 bg-indigo-500/10 border-indigo-500/20", description: "Gerencia os contratos de locação, permitindo visualização, impressão e controle de vigência de todos os documentos formais da empresa.", features: [ "Geração automática de contratos a partir de uma Locação", "Termos padrão configuráveis no módulo de Configurações", "Controle de vigência (data de início e término do contrato)", "Status: Ativo, Vencido, Encerrado", "Impressão e exportação do contrato em PDF", "Logo e dados da empresa no cabeçalho do contrato", ], howTo: [ { step: "Gerar contrato", desc: "Na tela de Locações, clique em 'Gerar Contrato'. O sistema criará automaticamente um contrato com os dados da locação e os termos padrão configurados." }, { step: "Visualizar contrato", desc: "Na listagem de Contratos, clique no código do contrato para visualizá-lo completo com todos os dados do cliente, equipamentos e cláusulas." }, { step: "Imprimir/Exportar", desc: "Clique em 'Imprimir' para gerar o PDF do contrato. A logo e os dados da empresa (cadastrados em Configurações) aparecerão no cabeçalho." }, { step: "Configurar termos padrão", desc: "Acesse Configurações > Preferências do Sistema para editar as cláusulas que aparecem automaticamente em todos os contratos." }, ], tips: [ "Mantenha a logo e os dados da empresa atualizados em 'Configurações' para que apareçam corretamente nos contratos.", "Contratos vencidos devem ser renovados ou encerrados para manter o histórico organizado.", ], }, { id: "financeiro", title: "Financeiro — Fluxo de Caixa", icon: Receipt, color: "text-green-600 bg-green-500/10 border-green-500/20", description: "Módulo completo de controle financeiro com gestão de Contas a Receber, Contas a Pagar e Extrato de Fluxo de Caixa da locadora.", features: [ "Contas a Receber geradas automaticamente a partir das Locações", "Contas a Pagar geradas a partir das Ordens de Serviço (Manutenções)", "Registro de baixa (quitação) de títulos com 1 clique", "Extrato cronológico completo de entradas e saídas", "Indicadores: Receita do mês, Despesas, Saldo e Inadimplência", "Lançamento manual de receitas e despesas avulsas", ], howTo: [ { step: "Dar baixa em uma cobrança", desc: "Na aba 'Contas a Receber', localize o título e clique em 'Dar Baixa'. O sistema registrará o pagamento e atualizará o saldo do caixa." }, { step: "Registrar pagamento de despesa", desc: "Na aba 'Contas a Pagar', localize a despesa e clique em 'Pagar'. O valor será lançado como saída no Fluxo de Caixa." }, { step: "Lançamento manual", desc: "Clique em '+ Novo Lançamento' para registrar receitas (ex: serviços avulsos) ou despesas (ex: aluguel do galpão) não vinculadas a locações." }, { step: "Ver o extrato", desc: "Acesse a aba 'Extrato / Fluxo de Caixa' para ver todas as movimentações em ordem cronológica, com saldo acumulado." }, ], tips: [ "Reconcilie o fluxo de caixa semanalmente para identificar discrepâncias.", "Títulos marcados como 'Vencidos' são exibidos em destaque vermelho para facilitar a cobrança.", ], }, { id: "agenda", title: "Agenda — Calendário Operacional", icon: CalendarDays, color: "text-orange-600 bg-orange-500/10 border-orange-500/20", description: "Visualização em calendário de todas as movimentações de equipamentos: entregas, devoluções, manutenções programadas e vencimentos de contratos.", features: [ "Visualização mensal, semanal e diária", "Eventos de entrega e devolução de equipamentos", "Manutenções preventivas agendadas", "Vencimentos de contratos e locações", "Criação de eventos personalizados", ], howTo: [ { step: "Navegar pelo calendário", desc: "Use os botões 'Anterior' e 'Próximo' para navegar entre os meses. Clique em um evento para ver seus detalhes." }, { step: "Criar um evento", desc: "Clique em '+ Novo Evento' e preencha o título, data, horário e tipo do evento (entrega, manutenção, visita)." }, { step: "Filtrar eventos", desc: "Use os filtros por tipo de evento para exibir apenas entregas, devoluções ou manutenções no calendário." }, ], tips: [ "Sincronize a agenda com o WhatsApp da equipe para enviar lembretes de entregas e devoluções.", "Consulte a agenda diariamente para planejar a logística de transporte dos equipamentos.", ], }, { id: "manutencoes", title: "Manutenções & Ordens de Serviço", icon: Wrench, color: "text-rose-600 bg-rose-500/10 border-rose-500/20", description: "Controla toda a manutenção preventiva e corretiva da frota, com abertura de Ordens de Serviço (OS), custo, fornecedor e integração com o Financeiro.", features: [ "Abertura de OS com código único, título, descrição e equipamento", "Seleção do tipo de manutenção (Preventiva, Corretiva, Revisão)", "Vinculação ao Fornecedor / Oficina Mecânica responsável", "Geração automática de Conta a Pagar no Financeiro", "Status da OS: Aberta, Em Andamento, Concluída, Cancelada", "Alteração automática do status do equipamento para 'Em Manutenção'", ], howTo: [ { step: "Abrir uma OS", desc: "Clique em '+ Nova Ordem de Serviço'. Selecione o equipamento, informe o título (ex: 'Troca de filtro de óleo'), descrição detalhada e custo estimado." }, { step: "Vincular fornecedor", desc: "Selecione a oficina ou prestador de serviço responsável pela manutenção. Caso não esteja cadastrado, acesse o módulo 'Fornecedores' primeiro." }, { step: "Lançar no Financeiro", desc: "Marque a opção 'Gerar Conta a Pagar' e defina a data de vencimento da fatura. O título será criado automaticamente no módulo Financeiro." }, { step: "Concluir a OS", desc: "Clique no ícone de check verde (✓) ou altere o status para 'Concluída'. O equipamento voltará automaticamente ao status 'Disponível'." }, ], tips: [ "Registre o histórico de manutenções de cada equipamento para controle de vida útil e garantia.", "Programe manutenções preventivas periódicas (ex: revisão a cada 500 horas de uso).", ], }, { id: "fornecedores", title: "Fornecedores — Gestão de Parceiros", icon: BriefcaseBusiness, color: "text-slate-600 bg-slate-500/10 border-slate-500/20", description: "Cadastro de todos os fornecedores, oficinas mecânicas, prestadores de serviço e parceiros comerciais da locadora.", features: [ "Cadastro completo: razão social, CNPJ, e-mail, telefone e endereço", "Classificação por tipo: Oficina, Transportadora, Fornecedor de Peças, Outros", "Histórico de serviços prestados e ordens de serviço vinculadas", "Busca e filtro por tipo de fornecedor", ], howTo: [ { step: "Cadastrar fornecedor", desc: "Clique em '+ Novo Fornecedor'. Preencha os dados da empresa/pessoa, selecione o tipo (ex: 'Oficina Mecânica') e salve." }, { step: "Vincular a uma OS", desc: "Ao abrir uma Ordem de Serviço no módulo de Manutenções, selecione o fornecedor/oficina responsável no campo correspondente." }, { step: "Buscar fornecedor", desc: "Use a busca para localizar um fornecedor pelo nome ou CNPJ. Use o filtro por tipo para filtrar apenas oficinas, transportadoras etc." }, ], tips: [ "Mantenha os dados bancários dos fornecedores cadastrados para facilitar pagamentos.", "Avalie periodicamente os fornecedores com base no custo e qualidade dos serviços.", ], }, { id: "relatorios", title: "Relatórios — Análise Gerencial", icon: BarChart3, color: "text-purple-600 bg-purple-500/10 border-purple-500/20", description: "Central de relatórios gerenciais da locadora, com análises de receita, desempenho da frota, inadimplência e manutenção para apoio à tomada de decisão.", features: [ "Relatório de Receita: faturamento mensal, por cliente e por equipamento", "Relatório de Frota: taxa de ocupação, equipamentos mais locados e rentabilidade", "Relatório Financeiro: DRE simplificado, entradas x saídas e saldo", "Relatório de Manutenção: custo total, frequência e equipamentos com mais OS", "Filtros por período, cliente, equipamento e categoria", ], howTo: [ { step: "Selecionar relatório", desc: "Na página de Relatórios, escolha o tipo: Receita, Frota, Financeiro ou Manutenção através das abas disponíveis." }, { step: "Definir filtros", desc: "Selecione o período desejado (mês, trimestre, semestre ou personalizado). Aplique filtros adicionais por cliente ou equipamento conforme necessário." }, { step: "Exportar relatório", desc: "Clique em 'Exportar PDF' ou 'Exportar Excel' para baixar o relatório formatado com a logo da empresa." }, ], tips: [ "Gere o relatório de receita todo início de mês para acompanhar o desempenho.", "O relatório de frota ajuda a identificar equipamentos 'parados' que precisam ser reposicionados ou vendidos.", ], }, { id: "configuracoes", title: "Configurações — Administração do Sistema", icon: Settings, color: "text-gray-600 bg-gray-500/10 border-gray-500/20", description: "Central de administração do sistema com cadastro da empresa, gestão de usuários, grupos de acesso (permissões) e preferências gerais.", features: [ "Dados da Empresa: Razão Social, CNPJ, telefone, endereço e upload da logo", "Gestão de Usuários: cadastro, edição, ativação/inativação e senha", "Grupos de Acesso: matriz de permissões por módulo (Visualizar, Criar, Editar, Excluir)", "Preferências do Sistema: termos padrão de contratos e alertas automáticos", ], howTo: [ { step: "Atualizar dados da empresa", desc: "Acesse 'Configurações > Dados da Empresa'. Preencha todos os campos e faça o upload da logo. A logo aparecerá nos contratos e relatórios impressos." }, { step: "Cadastrar usuário", desc: "Acesse 'Configurações > Gestão de Usuários' e clique em '+ Novo Usuário'. Informe nome, e-mail, senha e selecione o Grupo de Acesso." }, { step: "Criar grupo de acesso", desc: "Acesse 'Configurações > Grupos de Acesso'. Clique em '+ Novo Grupo', defina o nome e selecione as permissões de cada módulo para o grupo." }, { step: "Configurar termos padrão", desc: "Acesse 'Configurações > Preferências'. Edite o texto que aparecerá automaticamente no rodapé de todos os contratos gerados." }, ], tips: [ "Crie grupos de acesso específicos como 'Operacional', 'Financeiro' e 'Visualizador' para controlar o que cada colaborador pode fazer no sistema.", "Mantenha pelo menos 2 usuários com perfil 'Administrador Geral' para evitar perda de acesso.", ], }, ]; export default function AjudaPage() { const [search, setSearch] = useState(""); const [openModule, setOpenModule] = useState("dashboard"); const filtered = MODULES.filter( (m) => m.title.toLowerCase().includes(search.toLowerCase()) || m.description.toLowerCase().includes(search.toLowerCase()) || m.features.some((f) => f.toLowerCase().includes(search.toLowerCase())) ); return (
{/* Header */}

Dashboard / Suporte

Central de Ajuda & Manual do Sistema

Encontre explicações detalhadas, guias passo a passo e dicas de uso para cada módulo do BlackLoc.

{/* Busca */}
setSearch(e.target.value)} />
{/* Índice de Módulos */} {!search && (
{MODULES.map((m) => { const Icon = m.icon; return ( ); })}
)} {/* Módulos com Accordion */}
{filtered.map((module) => { const Icon = module.icon; const isOpen = openModule === module.id; return ( {/* Header do Accordion */} {/* Conteúdo Expandido */} {isOpen && (
{/* Descrição */}

{module.description}

{/* Funcionalidades */}

📋 Funcionalidades

    {module.features.map((f, i) => (
  • {f}
    • ))}
{/* Como Usar (Passo a passo) */}

🚀 Como Utilizar

    {module.howTo.map((h, i) => (
  1. {i + 1}

    {h.step}

    {h.desc}

    2. ))}
{/* Dicas e Boas Práticas */}

💡 Dicas & Boas Práticas

    {module.tips.map((tip, i) => (
  • {tip}
    • ))}
)} ); })} {filtered.length === 0 && (

Nenhum resultado encontrado para "{search}"

Tente usar termos mais genéricos como o nome do módulo.

)}
{/* Rodapé de Suporte */}

Precisa de mais ajuda?

Entre em contato com nossa equipe de suporte técnico para dúvidas, configurações avançadas ou treinamento da equipe.

📧 suporte@blackredtechnology.com.br 💬 WhatsApp: (83) 9.9882-3181 🕐 Seg a Sex, 08h–18h
); }