Remix

Make your own version of BioArte Control

Get an exact, working copy in your account, then change anything with chat.

Original by Servico Online

What would you change?

Start free with 40 credits. No card needed.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.

# BioArte - Instrucoes Completas do Projeto

## Visao Geral

Sistema de governanca de embalagens para a empresa Biotrop, desenvolvido em duas versoes paralelas:
- **Next.js** (React/TypeScript) - Para deploy na Vercel
- **Laravel/Blade** (PHP) - Arquivos independentes com CSS/JS proprio

---

## PROMPT COMPLETO PARA NOVA CONVERSA

Copie o texto abaixo para iniciar uma nova conversa no v0.app ou outro assistente:

```
Preciso criar um sistema completo de governanca de embalagens chamado "BioArte" para a empresa Biotrop.

### TECNOLOGIAS
- Next.js 16 com App Router e TypeScript
- Tailwind CSS v4 com shadcn/ui
- Recharts para graficos
- Versao paralela em Laravel/Blade com CSS/JS proprio (sem dependencias externas)

### IDENTIDADE VISUAL
- Cor principal do menu/sidebar: #01363f (verde escuro Biotrop)
- Logo: usar icone de folha/planta estilizado
- Nome do sistema: "BioArte"
- Paleta: Verde escuro (#01363f), Branco, Cinzas (slate)
- Estilo: Moderno, profissional, limpo

### LAYOUT - DUAS OPCOES
1. **Menu TOP (padrao)**: Mega-menu horizontal com dropdowns agrupados:
   - Dashboard (link direto)
   - Operacional: Arte, PCP, TBI
   - Cadastros: Fornecedores, Clientes
   - Gestao: Tarefas, Indicadores, Emails
   - Ficha Tecnica (link direto)
   - Configuracoes: Usuarios, Integracoes

2. **Menu LATERAL**: Sidebar tradicional a esquerda com grupos colapsaveis

3. Botao para alternar entre layouts (salvar preferencia em localStorage)
4. Espacamento adequado no conteudo (min padding 1.5rem)

### MODULOS DO SISTEMA

#### 1. Dashboard
- 4 cards de estatisticas: Total Artes, Pendentes, Aprovadas, Em Revisao
- Grafico de barras: Artes por mes (ultimos 6 meses)
- Grafico de rosca/pizza: Status das artes (distribuicao)
- Grafico de linha: Tendencia de aprovacoes
- Lista: Atividades recentes e Top fornecedores

#### 2. Arte (Aprovacao de Arte)
- Lista com tabela: filtros por status, cliente, fornecedor, periodo
- Status: Pendente, Em Analise, Aprovado, Rejeitado, Em Revisao
- Edicao com abas: Setores, Arquivos, PDF Preview, Atividades, Conversas
- Fluxo de aprovacao por setor (cada setor aprova sua parte)
- Historico de versoes
- Upload de arquivos

#### 3. PCP (Planejamento e Controle de Producao)
- Layout KANBAN com colunas arrastaveis
- Colunas: Aguardando, Em Producao, Em Transito, Entregue, Atrasado
- Cards com: Numero OC, SKU, Fornecedor, Progresso (%), Data Entrega
- Cores indicativas de prazo (verde, amarelo, vermelho)
- Filtros por fornecedor, cliente, periodo

#### 4. Fornecedores
- Lista com tabela e busca
- Status: Ativo, Inativo, Em Analise, Bloqueado
- Dados: CNPJ, Razao Social, Contato, Email, Telefone
- Edicao com abas: Dados, Documentos, Historico, Avaliacoes
- Indicador de rating/avaliacao

#### 5. TBI (Termo de Baixa de Impressao)
- Lista de TBIs enviados aos fornecedores
- Status: Pendente, Enviado, Visualizado, Aceito, Rejeitado
- Dados: Numero, Fornecedor, Arte vinculada, Data envio
- Historico de envios e respostas

#### 6. Clientes
- Lista com tabela
- Dados: Codigo, Nome, Segmento, Status
- Edicao com SKUs vinculados
- Historico de artes por cliente

#### 7. Emails
- Lista de emails enviados pelo sistema
- Status: Enviado, Entregue, Aberto, Erro
- Filtros por tipo, destinatario, periodo
- Preview do email enviado

#### 8. Indicadores
- Dashboard analitico com KPIs
- Graficos: Tendencia mensal, Por fornecedor, Por setor, Por status
- Cards: SLA de aprovacao, Tempo medio, Taxa de rejeicao
- Ranking de produtividade por usuario
- Filtros por periodo

#### 9. Usuarios
- Lista de usuarios do sistema
- Perfis: Administrador, Aprovador, Operador, Visualizador
- Dados: Nome, Email, Setor, Perfil, Status
- Edicao com permissoes granulares

#### 10. Tarefas e Timesheet
- Lista de tarefas com timer em tempo real (play/pause/stop)
- Vinculacao com projetos/clientes/artes
- Timesheet semanal: grid de horas por projeto x dia
- Lancamento manual de horas
- Aprovacao de horas por gestor
- Relatorios de produtividade

#### 11. Ficha Tecnica (SPEC)
- Visual estilo documento oficial (como um PDF formal)
- Header verde com logo Biotrop e titulo "FICHA DE PRODUTO"
- Informacoes do cabecalho: Produto, SKU, Versao, Data
- Blocos por setor com campos especificos:
  - Dados Tecnicos: dimensoes, peso, material
  - Paletizacao: camadas, unidades por palete
  - Ficha do Produto: composicao, validade
  - Fabricante: dados do fornecedor
- Edicao INLINE em cada bloco (botao editar no bloco)
- Multiplos responsaveis e revisores por setor
- Controle de versao com navegador (anterior/proxima)
- Historico de aprovacoes com assinaturas
- Fluxo: Pendente > Em Edicao > Aguardando Revisao > Aprovado/Rejeitado
- Exportar para PDF

#### 12. Integracoes
- Pagina principal: visao geral de todas integracoes com status
- Subpaginas:

**Dynamics 365 (ERP Microsoft)**:
  - Status de conexao, ultima sincronizacao
  - Tabs: Visao Geral, Mapeamento de Campos, Webhooks, Logs, Regras
  - Mapeamento de campos ERP <> BioArte
  - Configuracao de webhooks para eventos
  - Logs de sincronizacao com filtros
  - Fluxo ERP: OC gerada > Avalia se novo ou repeticao > Integra

**Mercado Eletronico**:
  - Conexao API, status
  - Lista de fornecedores sincronizados
  - Cotacoes abertas e historico
  - Pedidos integrados

**OneDrive/SharePoint**:
  - Conexao Microsoft, pastas configuradas
  - Lista de pastas sincronizadas com contagem de arquivos
  - Status de sincronizacao, ultima atualizacao
  - Log de atividades de arquivos

### INTERNACIONALIZACAO (i18n)
- Suporte a 3 idiomas: PT-BR (padrao), Ingles (EN), Espanhol (ES)
- Seletor de idioma no menu (icone de globo)
- Arquivos de traducao separados por idioma
- Next.js: usar next-intl com arquivos JSON em /messages/
- Laravel: sistema nativo com arquivos PHP em /lang/

### ESTRUTURA LARAVEL (independente do Next.js)
- Rotas diretas no web.php (sem Controllers)
- Views Blade para todas as paginas
- CSS proprio em /public/css/app.css (2000+ linhas, inclui utilitarios tipo Tailwind)
- JS proprio em /public/js/app.js (vanilla JS)
- Chart.js via CDN para graficos
- Arquivos de traducao em /lang/pt-BR/, /lang/en/, /lang/es/
- Documentacao de instalacao (INSTALACAO.md)
- Namespace 'demo' para uso em projeto Laravel existente

### DADOS MOCKADOS
- Usar dados ficticios realistas para demonstracao
- Nomes de fornecedores: Flexoprint, Grafica Modelo, Embalagens Premium, etc.
- Nomes de clientes: Agro Solutions, FarmTech, GreenCrop, etc.
- SKUs: BIO-001, BIO-002, FERT-100, etc.

### RESPONSIVIDADE
- Mobile-first
- Sidebar colapsa em telas menores
- Menu top adapta para menu hamburguer em mobile
- Tabelas com scroll horizontal em mobile
- Cards empilham verticalmente em mobile

### QUALIDADE
- Codigo limpo e bem organizado
- Componentes reutilizaveis
- Separacao de concerns (componentes, hooks, utils)
- Tipagem TypeScript completa
- Acessibilidade (ARIA labels, semantica HTML)
- Performance (lazy loading, otimizacao de imagens)
```

---

## ESTRUTURA DE ARQUIVOS

### Next.js (App Router)

```
/app
  /(admin)
    /page.tsx                    # Dashboard
    /arte/page.tsx               # Lista de artes
    /arte/[id]/page.tsx          # Edicao de arte
    /arte/nova/page.tsx          # Nova arte
    /pcp/page.tsx                # Kanban PCP
    /fornecedores/page.tsx       # Lista fornecedores
    /fornecedores/edicao/page.tsx
    /tbi/page.tsx                # Lista TBI
    /clientes/page.tsx           # Lista clientes
    /clientes/edicao/page.tsx
    /emails/page.tsx             # Lista emails
    /indicadores/page.tsx        # Dashboard indicadores
    /usuarios/page.tsx           # Lista usuarios
    /tarefas/page.tsx            # Lista tarefas
    /tarefas/timesheet/page.tsx  # Timesheet semanal
    /ficha-tecnica/page.tsx      # Lista fichas
    /ficha-tecnica/[id]/page.tsx # Visualizar/editar ficha
    /ficha-tecnica/nova/page.tsx # Nova ficha
    /integracoes/page.tsx        # Visao geral
    /integracoes/dynamics365/page.tsx
    /integracoes/mercado-eletronico/page.tsx
    /integracoes/onedrive/page.tsx
    /layout.tsx                  # Layout admin com sidebar/topbar
  /layout.tsx                    # Layout root
  /globals.css                   # Estilos globais

/components
  /app-sidebar.tsx               # Menu lateral
  /app-topbar.tsx                # Menu superior
  /page-header.tsx               # Header das paginas
  /layout-provider.tsx           # Provider de layout
  /language-switcher.tsx         # Seletor de idioma
  /ui/                           # Componentes shadcn

/messages
  /pt-BR.json                    # Traducoes portugues
  /en.json                       # Traducoes ingles
  /es.json                       # Traducoes espanhol

/i18n
  /config.ts                     # Configuracao i18n
  /request.ts                    # Request handler
```

### Laravel/Blade

```
/laravel
  /routes
    /web.php                     # Rotas diretas para views

/resources/views
    /layouts
      /app.blade.php             # Layout principal
      /app-topbar.blade.php      # Layout com topbar
    /components
      /sidebar.blade.php         # Menu lateral
      /topbar.blade.php          # Menu superior
      /language-switcher.blade.php
    /dashboard/index.blade.php
    /arte/index.blade.php
    /arte/show.blade.php
    /arte/create.blade.php
    /pcp/index.blade.php
    /fornecedores/index.blade.php
    /fornecedores/edit.blade.php
    /tbi/index.blade.php
    /clientes/index.blade.php
    /clientes/edit.blade.php
    /emails/index.blade.php
    /indicadores/index.blade.php
    /usuarios/index.blade.php
    /tarefas/index.blade.php
    /tarefas/timesheet.blade.php
    /ficha-tecnica/index.blade.php
    /ficha-tecnica/show.blade.php
    /ficha-tecnica/create.blade.php
    /integracoes/index.blade.php

---

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.