<title>🛒 Sistema de Gestão de Loja</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#36CFC9',
accent: '#FF7D00',
danger: '#FF4D4F',
success: '#52C41A',
neutral: '#F5F7FA'
}
}
}
}
</script>
Sistema de Gestão de Loja
✅ Tudo Editável | ✅ Registros Manuais | ✅ Correção de Erros
<!-- Navegação -->
<nav class="bg-white shadow-md sticky top-[88px] z-40">
<div class="container mx-auto px-4 py-2 overflow-x-auto">
<ul class="flex gap-4 whitespace-nowrap">
<li><a href="#cadastros" class="px-3 py-2 rounded-md hover:bg-primary/10 font-medium transition">📋 Cadastros</a></li>
<li><a href="#movimentacoes" class="px-3 py-2 rounded-md hover:bg-primary/10 font-medium transition">💸 Movimentações</a></li>
<li><a href="#financeiro" class="px-3 py-2 rounded-md hover:bg-primary/10 font-medium transition">💰 Financeiro</a></li>
<li><a href="#controle" class="px-3 py-2 rounded-md hover:bg-primary/10 font-medium transition">🛠️ Controle & Ajustes</a></li>
<li><a href="#relatorios" class="px-3 py-2 rounded-md hover:bg-primary/10 font-medium transition">📊 Relatórios</a></li>
<li><a href="#configuracoes" class="px-3 py-2 rounded-md hover:bg-primary/10 font-medium transition">⚙️ Configurações</a></li>
</ul>
</div>
</nav>
<main class="container mx-auto px-4 py-6 space-y-8">
<!-- MÓDULO 1: CADASTROS GERAIS -->
<section id="cadastros" class="bg-white rounded-lg shadow-md p-6">
<h2 class="text-xl font-bold text-primary mb-6 flex items-center gap-2">
<i class="fa fa-address-card"></i> MÓDULO 1 - CADASTROS GERAIS
</h2>
<!-- Registro de Funcionários -->
<div class="mb-8 border rounded-lg p-4">
<h3 class="text-lg font-semibold mb-4 flex justify-between items-center">
🧑💼 Registro de Funcionários
<span class="text-sm text-success">✏️ Todos os campos editáveis</span>
</h3>
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Código Funcionário</label>
<input type="text" class="w-full border rounded px-3 py-2 focus:ring-2 focus:ring-primary/50" value="F001">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Nome Completo</label>
<input type="text" class="w-full border rounded px-3 py-2 focus:ring-2 focus:ring-primary/50" value="Carlos Alberto Silva">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">CPF/RG</label>
<input type="text" class="w-full border rounded px-3 py-2 focus:ring-2 focus:ring-primary/50" value="123.456.789-00">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Cargo/Função</label>
<select class="w-full border rounded px-3 py-2 focus:ring-2 focus:ring-primary/50">
<option>Vendedor</option>
<option>Caixa</option>
<option selected>Gerente</option>
<option>Estoquista</option>
<option>Serviços Gerais</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Data Admissão</label>
<input type="date" class="w-full border rounded px-3 py-2 focus:ring-2 focus:ring-primary/50" value="2022-03-15">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Salário</label>
<input type="number" class="w-full border rounded px-3 py-2 focus:ring-2 focus:ring-primary/50" value="3800.00" step="0.01">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Contato</label>
<input type="tel" class="w-full border rounded px-3 py-2 focus:ring-2 focus:ring-primary/50" value="(86) 99999-8888">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Situação</label>
<select class="w-full border rounded px-3 py-2 focus:ring-2 focus:ring-primary/50">
<option selected>Ativo</option>
<option>Afastado</option>
<option>Demitido</option>
<option>Férias</option>
</select>
</div>
</div>
<!-- Área de Correções e Alterações -->
<div class="bg-yellow-50 border border-yellow-200 rounded p-4">
<h4 class="font-medium text-accent mb-2">📝 Registro de Alterações/Correções</h4>
<textarea class="w-full border rounded px-3 py-2 focus:ring-2 focus:ring-primary/50" rows="2" placeholder="Descreva o que foi alterado, motivo, quem alterou... Ex: Correção de digitação no número de telefone, alterado por João em 30/04/2026"></textarea>
</div>
</div>
<!-- Cadastro de Clientes -->
<div class="mb-8 border rounded-lg p-4">
<h3 class="text-lg font-semibold mb-4">🧾 Cadastro de Clientes</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div><label class="block text-sm">Código</label><input type="text" class="w-full border rounded px-3 py-2" value="C0045"></div>
<div><label class="block text-sm">Nome/Razão Social</label><input type="text" class="w-full border rounded px-3 py-2" value="Maria Eduarda Santos"></div>
<div><label class="block text-sm">CPF/CNPJ</label><input type="text" class="w-full border rounded px-3 py-2" value="987.654.321-11"></div>
<div><label class="block text-sm">Contato</label><input type="tel" class="w-full border rounded px-3 py-2" value="(86) 98888-7777"></div>
<div><label class="block text-sm">Limite de Crédito</label><input type="number" class="w-full border rounded px-3 py-2" value="1500.00" step="0.01"></div>
<div><label class="block text-sm">Observações</label><input type="text" class="w-full border rounded px-3 py-2" placeholder="Informações adicionais"></div>
</div>
</div>
<!-- Cadastro de Fornecedores -->
<div class="mb-8 border rounded-lg p-4">
<h3 class="text-lg font-semibold mb-4">📦 Cadastro de Fornecedores</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div><label class="block text-sm">Código</label><input type="text" class="w-full border rounded px-3 py-2" value="F022"></div>
<div><label class="block text-sm">Razão Social</label><input type="text" class="w-full border rounded px-3 py-2" value="Têxtil Brasil LTDA"></div>
<div><label class="block text-sm">CNPJ</label><input type="text" class="w-full border rounded px-3 py-2" value="12.345.678/0001-90"></div>
<div><label class="block text-sm">Contato</label><input type="tel" class="w-full border rounded px-3 py-2" value="(11) 3333-4444"></div>
<div><label class="block text-sm">Condição Pagamento</label><input type="text" class="w-full border rounded px-3 py-2" value="30/60/90 dias"></div>
<div><label class="block text-sm">Produtos Fornecidos</label><input type="text" class="w-full border rounded px-3 py-2" value="Roupas em geral"></div>
</div>
</div>
<!-- Cadastro de Produtos -->
<div class="border rounded-lg p-4">
<h3 class="text-lg font-semibold mb-4">🛍️ Cadastro de Produtos/Serviços</h3>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div><label class="block text-sm">Código/Barra</label><input type="text" class="w-full border rounded px-3 py-2" value="7891234567890"></div>
<div><label class="block text-sm">Nome/Descrição</label><input type="text" class="w-full border rounded px-3 py-2" value="Camiseta Masculina Azul"></div>
<div><label class="block text-sm">Categoria</label><select class="w-full border rounded px-3 py-2"><option selected>Vestuário</option><option>Alimentos</option><option>Eletrônicos</option></select></div>
<div><label class="block text-sm">Preço Custo</label><input type="number" class="w-full border rounded px-3 py-2" value="29.90" step="0.01"></div>
<div><label class="block text-sm">Preço Venda</label><input type="number" class="w-full border rounded px-3 py-2" value="59.90" step="0.01"></div>
<div><label class="block text-sm">Estoque Atual</label><input type="number" class="w-full border rounded px-3 py-2" value="45"></div>
<div><label class="block text-sm">Estoque Mínimo</label><input type="number" class="w-full border rounded px-3 py-2" value="10"></div>
<div><label class="block text-sm">Fornecedor</label><input type="text" class="w-full border rounded px-3 py-2" value="Têxtil Brasil LTDA"></div>
</div>
<div class="mt-4 bg-yellow-50 border border-yellow-200 rounded p-3">
<p class="text-sm text-accent"><strong>Ajuste Manual:</strong> Se houver diferença entre sistema e contagem física, registre aqui e altere o valor do estoque com justificativa.</p>
<textarea class="w-full border rounded px-3 py-2 mt-1" rows="2" placeholder="Ex: Contagem física apontou 42 unidades, diferença de 3 por quebra, ajustado em 30/04/2026"></textarea>
</div>
</div>
</section>
<!-- MÓDULO 2: MOVIMENTAÇÕES -->
<section id="movimentacoes" class="bg-white rounded-lg shadow-md p-6">
<h2 class="text-xl font-bold text-primary mb-6 flex items-center gap-2">
<i class="fa fa-exchange"></i> MÓDULO 2 - MOVIMENTAÇÕES & OPERAÇÕES
</h2>
<!-- Registro de Vendas -->
<div class="mb-6 border rounded-lg p-4">
<h3 class="text-lg font-semibold mb-3">💵 Registro de Vendas</h3>
<p class="text-sm text-gray-600 mb-4">Registros automáticos OU manuais. Todos podem ser editados, estornados ou corrigidos.</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div><label class="block text-sm">Número da Venda</label><input type="text" class="w-full border rounded px-3 py-2" value="V20260430001"></div>
<div><label class="block text-sm">Cliente</label><input type="text" class="w-full border rounded px-3 py-2" value="Maria Eduarda Santos"></div>
<div><label class="block text-sm">Vendedor</label><input type="text" class="w-full border rounded px-3 py-2" value="Ana Carolina"></div>
<div><label class="block text-sm">Valor Total</label><input type="number" class="w-full border rounded px-3 py-2" value="119.80" step="0.01"></div>
<div><label class="block text-sm">Forma Pagamento</label><select class="w-full border rounded px-3 py-2"><option>Dinheiro</option><option selected>PIX</option><option>Cartão</option><option>Fiado</option></select></div>
<div><label class="block text-sm">Status</label><select class="w-full border rounded px-3 py-2"><option selected>Concluída</option><option>Cancelada</option><option>Estornada</option></select></div>
</div>
<div class="mt-3 bg-red-50 border border-red-200 rounded p-3">
<p class="text-sm text-danger"><strong>Correção/Estorno:</strong> Se houve erro, informe o motivo e altere os dados.</p>
<textarea class="w-full border rounded px-3 py-2 mt-1" rows="2" placeholder="Ex: Valor lançado errado, era R$99,90 e foi registrado R$119,80, corrigido em 30/04/2026"></textarea
Sistema de Gestão de Loja
✅ Tudo Editável | ✅ Registros Manuais | ✅ Correção de Erros