docs: adicionar documentação inicial do projeto #4
220
README.md
220
README.md
|
|
@ -1,36 +1,216 @@
|
||||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
# Portal Calendário Dias Rota
|
||||||
|
|
||||||
## Getting Started
|
Sistema de gerenciamento de calendário de entregas com integração ao banco de dados Oracle, desenvolvido com Next.js 16 e TypeScript.
|
||||||
|
|
||||||
First, run the development server:
|
## Descrição
|
||||||
|
|
||||||
|
O Portal Calendário Dias Rota é uma aplicação web que permite visualizar e gerenciar dias de entrega em um calendário interativo. O sistema oferece controle sobre capacidades de entrega, dias úteis e status de disponibilidade para cada data.
|
||||||
|
|
||||||
|
### Funcionalidades Principais
|
||||||
|
|
||||||
|
- **Calendário Interativo**: Visualização de datas com informações de entrega
|
||||||
|
- **Gestão de Capacidades**: Configuração de capacidade de entrega por dia
|
||||||
|
- **Controle de Dias Úteis**: Definição de quantidade de dias úteis para vendas
|
||||||
|
- **Status de Entrega**: Ativação/desativação de entregas por data específica
|
||||||
|
- **Integração Oracle**: Conexão direta com banco de dados Oracle usando pool de conexões
|
||||||
|
- **Interface Responsiva**: Design moderno com Tailwind CSS e componentes Radix UI
|
||||||
|
|
||||||
|
## Tecnologias
|
||||||
|
|
||||||
|
- **Framework**: [Next.js 16.1.1](https://nextjs.org/) (App Router)
|
||||||
|
- **Linguagem**: TypeScript 5
|
||||||
|
- **Banco de Dados**: Oracle Database (via node-oracledb 6.9.0)
|
||||||
|
- **Estilização**: Tailwind CSS 3.4.1
|
||||||
|
- **UI Components**:
|
||||||
|
- Radix UI (Dialog, Popover, Label, Alert Dialog)
|
||||||
|
- Lucide React (ícones)
|
||||||
|
- Sonner (notificações toast)
|
||||||
|
- **Gerenciamento de Estado**: Jotai 2.16.0
|
||||||
|
- **Utilitários**:
|
||||||
|
- date-fns 4.1.0 (manipulação de datas)
|
||||||
|
- clsx + tailwind-merge (classes CSS)
|
||||||
|
- class-variance-authority (variantes de componentes)
|
||||||
|
|
||||||
|
## Estrutura do Projeto
|
||||||
|
|
||||||
|
```
|
||||||
|
portal-dias-rota/
|
||||||
|
├── src/
|
||||||
|
│ ├── app/
|
||||||
|
│ │ ├── dias-rota/ # Página principal do calendário
|
||||||
|
│ │ │ ├── page.tsx # Server component
|
||||||
|
│ │ │ └── pagina.tsx # Client component com lógica do calendário
|
||||||
|
│ │ ├── action/ # Server actions
|
||||||
|
│ │ ├── data-access/ # Camada de acesso a dados
|
||||||
|
│ │ └── globals.css # Estilos globais
|
||||||
|
│ ├── components/
|
||||||
|
│ │ ├── kibo-ui/ # Componentes customizados do calendário
|
||||||
|
│ │ └── ui/ # Componentes UI (shadcn/ui)
|
||||||
|
│ ├── db/
|
||||||
|
│ │ └── oracle.ts # Configuração e pool de conexões Oracle
|
||||||
|
│ └── lib/ # Utilitários
|
||||||
|
├── ecosystem.config.js # Configuração PM2 para produção
|
||||||
|
├── next.config.mjs # Configuração Next.js
|
||||||
|
├── tailwind.config.ts # Configuração Tailwind CSS
|
||||||
|
└── package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
## Instalação
|
||||||
|
|
||||||
|
### Pré-requisitos
|
||||||
|
|
||||||
|
- Node.js 20+ instalado
|
||||||
|
- Acesso a um banco de dados Oracle
|
||||||
|
- Oracle Instant Client (opcional, para modo Thick)
|
||||||
|
|
||||||
|
### Passos
|
||||||
|
|
||||||
|
1. Clone o repositório:
|
||||||
|
```bash
|
||||||
|
git clone <url-do-repositorio>
|
||||||
|
cd portal-dias-rota
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Instale as dependências:
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Configure as variáveis de ambiente criando um arquivo `.env`:
|
||||||
|
```env
|
||||||
|
# Configurações Oracle
|
||||||
|
ORACLE_USER=seu_usuario
|
||||||
|
ORACLE_PASSWORD=sua_senha
|
||||||
|
ORACLE_CONNECTION_STRING=host:porta/servico
|
||||||
|
|
||||||
|
# Pool de Conexões (opcional)
|
||||||
|
ORACLE_POOL_MIN=1
|
||||||
|
ORACLE_POOL_MAX=30
|
||||||
|
ORACLE_POOL_INCREMENT=1
|
||||||
|
ORACLE_QUEUE_TIMEOUT=60000
|
||||||
|
ORACLE_INACTIVITY_TIMEOUT=20000
|
||||||
|
|
||||||
|
# Oracle Thick Mode (opcional)
|
||||||
|
# ORACLE_LIB_DIR=/caminho/para/instantclient
|
||||||
|
```
|
||||||
|
|
||||||
|
## Uso
|
||||||
|
|
||||||
|
### Desenvolvimento
|
||||||
|
|
||||||
|
Execute o servidor de desenvolvimento:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm run dev
|
npm run dev
|
||||||
# or
|
|
||||||
yarn dev
|
|
||||||
# or
|
|
||||||
pnpm dev
|
|
||||||
# or
|
|
||||||
bun dev
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
Acesse [http://localhost:3000](http://localhost:3000) no navegador.
|
||||||
|
|
||||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
### Produção
|
||||||
|
|
||||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
1. Build da aplicação:
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
## Learn More
|
2. Inicie o servidor de produção:
|
||||||
|
```bash
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
|
||||||
To learn more about Next.js, take a look at the following resources:
|
O servidor rodará na porta **3003** (configurável em `package.json`).
|
||||||
|
|
||||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
### Deploy com PM2
|
||||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
|
||||||
|
|
||||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
O projeto inclui configuração para PM2 (`ecosystem.config.js`):
|
||||||
|
|
||||||
## Deploy on Vercel
|
```bash
|
||||||
|
pm2 start ecosystem.config.js
|
||||||
|
```
|
||||||
|
|
||||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
## Funcionalidades do Calendário
|
||||||
|
|
||||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
### Visualização de Dados
|
||||||
|
|
||||||
|
Cada dia no calendário exibe:
|
||||||
|
- **Capacidades**: Capacidade total de entrega
|
||||||
|
- **Peso Venda**: Peso disponível para venda
|
||||||
|
- **Disponível**: Quantidade disponível para entrega
|
||||||
|
|
||||||
|
### Configurações Globais
|
||||||
|
|
||||||
|
- **Capacidade**: Define a capacidade padrão de entrega
|
||||||
|
- **Dias Úteis**: Configura quantos dias úteis são considerados para vendas
|
||||||
|
|
||||||
|
### Interação com Datas
|
||||||
|
|
||||||
|
- Clique em uma data para ativar/desativar entregas
|
||||||
|
- Confirmação via dialog antes de aplicar mudanças
|
||||||
|
- Feedback visual com cores:
|
||||||
|
- **Cinza (#6B7280)**: Entrega ativa
|
||||||
|
- **Vermelho (#EF4444)**: Sem entrega
|
||||||
|
|
||||||
|
## Banco de Dados
|
||||||
|
|
||||||
|
### Conexão Oracle
|
||||||
|
|
||||||
|
O sistema utiliza o `node-oracledb` em modo **Thin** (padrão), que não requer binários nativos. Para usar o modo Thick, configure a variável `ORACLE_LIB_DIR`.
|
||||||
|
|
||||||
|
### Pool de Conexões
|
||||||
|
|
||||||
|
- Gerenciamento automático de conexões
|
||||||
|
- Configuração de pool min/max
|
||||||
|
- Timeout e incremento configuráveis
|
||||||
|
- Auto-commit habilitado para operações de escrita
|
||||||
|
|
||||||
|
### Funções Disponíveis
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Executar queries
|
||||||
|
executeOracleQuery(sql: string, binds?: any[]): Promise<any[]>
|
||||||
|
|
||||||
|
// Executar updates
|
||||||
|
executeOracleUpdate(sql: string, binds?: any[]): Promise<number>
|
||||||
|
|
||||||
|
// Obter pool
|
||||||
|
getOraclePool(): Promise<oracledb.Pool>
|
||||||
|
|
||||||
|
// Fechar pool
|
||||||
|
closeOraclePool(): Promise<void>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Segurança
|
||||||
|
|
||||||
|
- Variáveis de ambiente para credenciais sensíveis
|
||||||
|
- Prepared statements para prevenir SQL injection
|
||||||
|
- Pool de conexões com timeout configurável
|
||||||
|
- Validação de entrada no frontend
|
||||||
|
|
||||||
|
## Scripts Disponíveis
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev # Servidor de desenvolvimento
|
||||||
|
npm run build # Build de produção
|
||||||
|
npm start # Servidor de produção (porta 3003)
|
||||||
|
npm run lint # Verificação de código com ESLint
|
||||||
|
```
|
||||||
|
|
||||||
|
## Contribuindo
|
||||||
|
|
||||||
|
1. Faça um fork do projeto
|
||||||
|
2. Crie uma branch para sua feature (`git checkout -b feature/nova-funcionalidade`)
|
||||||
|
3. Commit suas mudanças (`git commit -m 'Adiciona nova funcionalidade'`)
|
||||||
|
4. Push para a branch (`git push origin feature/nova-funcionalidade`)
|
||||||
|
5. Abra um Pull Request
|
||||||
|
|
||||||
|
## Licença
|
||||||
|
|
||||||
|
Este projeto é privado e proprietário.
|
||||||
|
|
||||||
|
## Autor
|
||||||
|
|
||||||
|
Desenvolvido por Joelson
|
||||||
|
|
||||||
|
## Suporte
|
||||||
|
|
||||||
|
Para questões e suporte, entre em contato com a equipe de desenvolvimento.
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue