saveinmed/saveinmed-frontend/README.md

SaveInMed Frontend

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:

# 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

# 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

# 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:

/* 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

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)

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

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

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

# Testes unitários (quando configurados)
npm test

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

⚡ 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)

# Instalar Vercel CLI
npm i -g vercel

# Deploy
vercel

# Deploy para produção
vercel --prod

Docker

# 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

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

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

🗺️ Geocodificação

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