# SaveInMed Frontend

## Status (pronto x faltando)

**Pronto**
- Conteúdo descrito neste documento.

**Faltando**
- Confirmar no código o estado real das funcionalidades e atualizar esta seção conforme necessário.

---


Frontend principal da plataforma SaveInMed, desenvolvido com Next.js 15 e React 19.

## 🎯 Propósito

Este é o frontend principal e mais completo do SaveInMed, oferecendo:
- Interface completa para farmácias e distribuidoras
- Gestão de catálogo de produtos
- Sistema de pedidos e pagamentos
- Dashboard administrativo
- Integração com Appwrite para backend
- Checkout com Mercado Pago
- Sistema de notificações em tempo real

## 🚀 Tecnologias

- **Next.js 15.3** - Framework React com SSR e SSG
- **React 19** - Biblioteca UI mais recente
- **TypeScript 5** - Tipagem estática
- **TailwindCSS 4** - Framework CSS utility-first (última versão)
- **Appwrite 18** - Backend as a Service
- **Axios** - Cliente HTTP
- **Mercado Pago SDK React** - Integração de pagamentos
- **Chart.js** - Gráficos e visualizações
- **Lucide React** - Ícones modernos
- **React Hot Toast** - Notificações toast
- **Nodemailer** - Envio de emails

## 📋 Funcionalidades

### Autenticação e Autorização
- Login e registro com Appwrite
- Autenticação via email
- Proteção de rotas
- Sessões persistentes
- Recuperação de senha

### Gestão de Produtos
- Catálogo completo de produtos
- Busca e filtros avançados
- Categorias e subcategorias
- Informações de laboratórios
- Controle de lote e validade
- Upload de imagens

### Pedidos e Vendas
- Carrinho de compras
- Checkout integrado
- Processamento de pagamentos
- Acompanhamento de pedidos
- Histórico de compras
- Notas fiscais

### Dashboard
- Visão geral de vendas
- Gráficos e métricas
- Relatórios personalizados
- Analytics em tempo real

### Gestão de Empresas
- Cadastro de empresas
- Dados da Receita Federal (integração)
- Endereços e contatos
- Configurações de frete
- Geocodificação automática

### Notificações
- Toast notifications
- Emails transacionais
- Alertas de estoque
- Confirmações de pedido

## 🏗️ Arquitetura

```
saveinmed-frontend/
├── src/
│   ├── app/                      # App Router (Next.js 15)
│   │   ├── (auth)/               # Grupo de rotas de autenticação
│   │   ├── (dashboard)/          # Grupo de rotas do dashboard
│   │   ├── api/                  # API Routes
│   │   ├── layout.tsx            # Layout raiz
│   │   └── page.tsx              # Página inicial
│   ├── components/               # Componentes reutilizáveis
│   │   ├── ui/                   # Componentes de UI base
│   │   ├── forms/                # Formulários
│   │   └── charts/               # Gráficos
│   ├── lib/                      # Bibliotecas e utilitários
│   │   ├── appwrite.ts           # Cliente Appwrite
│   │   ├── api.ts                # Cliente API
│   │   └── utils.ts              # Funções utilitárias
│   ├── hooks/                    # Custom hooks
│   ├── types/                    # Tipos TypeScript
│   ├── styles/                   # Estilos globais
│   └── config/                   # Configurações
├── public/                       # Arquivos estáticos
├── next.config.ts
├── tailwind.config.ts
├── tsconfig.json
└── README.md
```

## 🔧 Configuração

### Variáveis de Ambiente

Crie um arquivo `.env.local` na raiz do projeto:

```bash
# Appwrite
NEXT_PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
NEXT_PUBLIC_APPWRITE_PROJECT_ID=your-project-id
NEXT_PUBLIC_APPWRITE_DATABASE_ID=your-database-id

# Collections IDs
NEXT_PUBLIC_APPWRITE_COLLECTION_PRODUTOS_CATALOGO_ID=produtos-catalogo
NEXT_PUBLIC_APPWRITE_COLLECTION_LABORATORIOS_ID=laboratorios
NEXT_PUBLIC_APPWRITE_COLLECTION_CATEGORIAS_ID=categorias
NEXT_PUBLIC_APPWRITE_COLLECTION_SUBCATEGORIAS_ID=subcategorias
NEXT_PUBLIC_APPWRITE_COLLECTION_CARRINHOS_ID=carrinhos
NEXT_PUBLIC_APPWRITE_COLLECTION_PEDIDOS_ID=pedidos
NEXT_PUBLIC_APPWRITE_COLLECTION_USUARIOS_ID=usuarios
NEXT_PUBLIC_APPWRITE_COLLECTION_EMPRESAS_ID=empresas
NEXT_PUBLIC_APPWRITE_COLLECTION_EMPRESAS_DADOS_ID=empresas-dados
NEXT_PUBLIC_APPWRITE_COLLECTION_ENDERECOS_ID=enderecos

# Mercado Pago
NEXT_PUBLIC_MERCADOPAGO_PUBLIC_KEY=your-public-key
MERCADOPAGO_ACCESS_TOKEN=your-access-token

# Email (Nodemailer)
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=your-email@gmail.com
EMAIL_PASSWORD=your-app-password

# Mapbox (para geocodificação)
MAPBOX_ACCESS_TOKEN=your-mapbox-token

# App
NEXT_PUBLIC_APP_URL=http://localhost:3000
```

### Pré-requisitos

- Node.js 20+
- npm, yarn ou pnpm
- Conta Appwrite configurada
- Conta Mercado Pago (para pagamentos)

## 🏃 Execução Local

```bash
# Instalar dependências
npm install

# Modo desenvolvimento com Turbopack
npm run dev

# Aplicação estará disponível em http://localhost:3000
```

## 🏗️ Build e Produção

```bash
# Build para produção
npm run build

# Executar build de produção
npm start

# Lint
npm run lint
```

## 🎨 Estilização com TailwindCSS 4

O projeto utiliza a versão mais recente do TailwindCSS com PostCSS:

```css
/* src/app/globals.css */
@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
}
```

## 📱 Responsividade

Design totalmente responsivo com breakpoints customizados:

- **Mobile**: < 640px
- **Tablet**: 640px - 1024px
- **Desktop**: > 1024px
- **Wide**: > 1536px

## 🔐 Autenticação com Appwrite

```typescript
import { account } from '@/lib/appwrite';

// Login
const session = await account.createEmailPasswordSession(email, password);

// Registro
const user = await account.create('unique()', email, password, name);

// Logout
await account.deleteSession('current');

// Obter usuário atual
const user = await account.get();
```

## 💾 Banco de Dados (Appwrite)

```typescript
import { databases } from '@/lib/appwrite';

// Listar documentos
const products = await databases.listDocuments(
  databaseId,
  collectionId,
  [Query.limit(25)]
);

// Criar documento
const product = await databases.createDocument(
  databaseId,
  collectionId,
  'unique()',
  data
);

// Atualizar documento
await databases.updateDocument(databaseId, collectionId, documentId, data);

// Deletar documento
await databases.deleteDocument(databaseId, collectionId, documentId);
```

## 💳 Integração Mercado Pago

```typescript
import { initMercadoPago, Payment } from '@mercadopago/sdk-react';

initMercadoPago(process.env.NEXT_PUBLIC_MERCADOPAGO_PUBLIC_KEY!);

function CheckoutPage() {
  return (
    <Payment
      initialization={{ amount: 100, preferenceId: 'xxx' }}
      onSubmit={handlePayment}
    />
  );
}
```

## 📊 Gráficos com Chart.js

```typescript
import { Line } from 'react-chartjs-2';

function SalesChart({ data }: { data: number[] }) {
  return (
    <Line
      data={{
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
          label: 'Vendas',
          data: data,
          borderColor: 'rgb(75, 192, 192)',
        }]
      }}
    />
  );
}
```

## 🧪 Testes

```bash
# Testes unitários (quando configurados)
npm test

# E2E tests (quando configurados)
npm run test:e2e
```

> Para matriz completa (com/sem banco e Playwright), veja: [docs/TESTES.md](../docs/TESTES.md)

## ⚡ Performance

Otimizações implementadas:

- **Next.js 15**: App Router com React Server Components
- **Turbopack**: Dev server ultra-rápido
- **Image Optimization**: next/image para otimização automática
- **Font Optimization**: next/font para carregamento eficiente
- **Code Splitting**: Automático por rota
- **ISR**: Incremental Static Regeneration
- **Edge Runtime**: Para rotas que precisam de baixa latência

## 🚀 Deploy

### Vercel (Recomendado)
```bash
# Instalar Vercel CLI
npm i -g vercel

# Deploy
vercel

# Deploy para produção
vercel --prod
```

### Docker
```bash
# Build
docker build -t saveinmed-frontend:latest .

# Run
docker run -p 3000:3000 saveinmed-frontend:latest
```

### Outras Plataformas
- **Netlify**: Suporte completo para Next.js
- **AWS Amplify**: Deploy automático
- **Railway**: Deploy simplificado

## 📧 Envio de Emails

```typescript
import { sendEmail } from '@/lib/email';

await sendEmail({
  to: 'customer@example.com',
  subject: 'Pedido Confirmado',
  html: '<h1>Seu pedido foi confirmado!</h1>',
});
```

## 🗺️ Geocodificação

```typescript
import { geocodeAddress } from '@/lib/mapbox';

const coordinates = await geocodeAddress('Rua Example, 123, São Paulo, SP');
// { latitude: -23.5505, longitude: -46.6333 }
```

## 🔗 Integração com Outros Componentes

- **Appwrite**: Backend principal para autenticação e dados
- **Backend (Go API)**: Operações de alta performance
- **Backoffice (NestJS)**: Funcionalidades administrativas
- **SaveInMed BFF**: Proxy e agregação de dados
- **Mercado Pago**: Processamento de pagamentos

## 📝 Documentação Adicional

Veja os arquivos de documentação na raiz do projeto:
- `CONFIGURACAO_COLLECTIONS_APPWRITE.md`
- `IMPLEMENTACAO_MERCADOPAGO_CHECKOUT.md`
- `MELHORIAS_GESTAO_CATALOGO_PRODUTOS.md`
- E outros...

## 📝 Licença

MIT