DuOrigin v2 - React + NestJS + Prisma + EUDR API Integration

2026-02-09 09:10:15 -03:00
parent cb90bad239
commit 4122dc6f3b
170 changed files with 31333 additions and 200 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="pt-BR">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/jpeg" href="/logo-duorigin.jpg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="DuOrigin - Compliance EUDR Inteligente para o Agronegócio" />
+    <title>DuOrigin - Compliance EUDR</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "axios": "^1.13.5",
+    "lucide-react": "^0.563.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-hook-form": "^7.71.1",
+    "react-router-dom": "^7.13.0",
+    "recharts": "^3.7.0",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.24",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.19",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^7.3.1"
+  }
+}
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/frontend/public/logo-duorigin.jpg
+++ b/frontend/public/logo-duorigin.jpg
--- a/frontend/public/vite.svg
+++ b/frontend/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -0,0 +1,77 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { AuthProvider } from '@/contexts/AuthContext';
+import ProtectedRoute from '@/components/ProtectedRoute';
+import DashboardLayout from '@/components/DashboardLayout';
+
+// Pages
+import Landing from '@/pages/Landing';
+import Login from '@/pages/Login';
+import Registro from '@/pages/Registro';
+import Dashboard from '@/pages/Dashboard';
+import Empresas from '@/pages/Empresas';
+import EmpresaForm from '@/pages/EmpresaForm';
+import Propriedades from '@/pages/Propriedades';
+import PropriedadeForm from '@/pages/PropriedadeForm';
+import Avaliacoes from '@/pages/Avaliacoes';
+import AvaliacaoDetail from '@/pages/AvaliacaoDetail';
+import Documentos from '@/pages/Documentos';
+import Usuarios from '@/pages/Usuarios';
+
+function App() {
+  return (
+    <AuthProvider>
+      <BrowserRouter>
+        <Routes>
+          {/* Public Routes */}
+          <Route path="/" element={<Landing />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/registro" element={<Registro />} />
+
+          {/* Protected Routes */}
+          <Route
+            element={
+              <ProtectedRoute>
+                <DashboardLayout />
+              </ProtectedRoute>
+            }
+          >
+            <Route path="/dashboard" element={<Dashboard />} />
+            
+            {/* Empresas */}
+            <Route path="/empresas" element={<Empresas />} />
+            <Route path="/empresas/nova" element={<EmpresaForm />} />
+            <Route path="/empresas/:id" element={<EmpresaForm />} />
+            
+            {/* Propriedades */}
+            <Route path="/propriedades" element={<Propriedades />} />
+            <Route path="/propriedades/nova" element={<PropriedadeForm />} />
+            <Route path="/propriedades/:id" element={<PropriedadeForm />} />
+            
+            {/* Avaliações */}
+            <Route path="/avaliacoes" element={<Avaliacoes />} />
+            <Route path="/avaliacoes/nova" element={<AvaliacaoDetail />} />
+            <Route path="/avaliacoes/:id" element={<AvaliacaoDetail />} />
+            
+            {/* Documentos */}
+            <Route path="/documentos" element={<Documentos />} />
+            
+            {/* Usuários (Admin only) */}
+            <Route
+              path="/usuarios"
+              element={
+                <ProtectedRoute adminOnly>
+                  <Usuarios />
+                </ProtectedRoute>
+              }
+            />
+          </Route>
+
+          {/* Catch all */}
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Routes>
+      </BrowserRouter>
+    </AuthProvider>
+  );
+}
+
+export default App;
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -0,0 +1,37 @@
+import axios from 'axios';
+
+const apiClient = axios.create({
+  baseURL: '/api',
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// Request interceptor - adiciona JWT token
+apiClient.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem('duorigin_token');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+// Response interceptor - trata erros de auth
+apiClient.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      localStorage.removeItem('duorigin_token');
+      localStorage.removeItem('duorigin_user');
+      window.location.href = '/login';
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default apiClient;
--- a/frontend/src/assets/react.svg
+++ b/frontend/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/frontend/src/components/DDSModal.tsx
+++ b/frontend/src/components/DDSModal.tsx
@@ -0,0 +1,162 @@
+import { useState } from 'react';
+import { FileText, Loader2, CheckCircle, AlertCircle, Download } from 'lucide-react';
+import Modal from './Modal';
+import { api } from '@/hooks/useApi';
+import { Avaliacao } from '@/types';
+
+interface DDSModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  avaliacao: Avaliacao | null;
+  onSuccess: () => void;
+}
+
+export default function DDSModal({ isOpen, onClose, avaliacao, onSuccess }: DDSModalProps) {
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [result, setResult] = useState<{ success: boolean; message: string; codigo?: string } | null>(null);
+
+  const handleGenerar = async () => {
+    if (!avaliacao) return;
+
+    setIsGenerating(true);
+    setResult(null);
+
+    try {
+      const response = await api.gerarDDS(avaliacao.id);
+      setResult({
+        success: true,
+        message: 'DDS gerada com sucesso!',
+        codigo: response.data.dds_codigo,
+      });
+      onSuccess();
+    } catch (error: unknown) {
+      const err = error as { response?: { data?: { detail?: string } } };
+      setResult({
+        success: false,
+        message: err.response?.data?.detail || 'Erro ao gerar DDS',
+      });
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const handleClose = () => {
+    setResult(null);
+    onClose();
+  };
+
+  if (!avaliacao) return null;
+
+  return (
+    <Modal isOpen={isOpen} onClose={handleClose} title="Gerar Declaração de Due Diligence (DDS)" maxWidth="lg">
+      <div className="space-y-6">
+        {/* Info da avaliação */}
+        <div className="bg-gray-50 rounded-xl p-4">
+          <h3 className="font-semibold text-navy mb-3">Dados da Avaliação</h3>
+          <div className="grid grid-cols-2 gap-4 text-sm">
+            <div>
+              <span className="text-gray-muted">Propriedade:</span>
+              <span className="ml-2 text-navy">{avaliacao.propriedade?.nome || '-'}</span>
+            </div>
+            <div>
+              <span className="text-gray-muted">Data:</span>
+              <span className="ml-2 text-navy">
+                {new Date(avaliacao.data_avaliacao).toLocaleDateString('pt-BR')}
+              </span>
+            </div>
+            <div>
+              <span className="text-gray-muted">Status:</span>
+              <span className={`ml-2 font-medium ${
+                avaliacao.status === 'aprovada' ? 'text-green-600' : 
+                avaliacao.status === 'reprovada' ? 'text-red-500' : 'text-amber-500'
+              }`}>
+                {avaliacao.status.charAt(0).toUpperCase() + avaliacao.status.slice(1)}
+              </span>
+            </div>
+            <div>
+              <span className="text-gray-muted">Score de Risco:</span>
+              <span className="ml-2 text-navy font-medium">{avaliacao.score_risco}%</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Resultado */}
+        {result && (
+          <div className={`rounded-xl p-4 flex items-start gap-3 ${
+            result.success ? 'bg-green-50 border border-green-200' : 'bg-red-50 border border-red-200'
+          }`}>
+            {result.success ? (
+              <CheckCircle className="w-6 h-6 text-green-600 flex-shrink-0" />
+            ) : (
+              <AlertCircle className="w-6 h-6 text-red-500 flex-shrink-0" />
+            )}
+            <div>
+              <p className={result.success ? 'text-green-800' : 'text-red-800'}>
+                {result.message}
+              </p>
+              {result.codigo && (
+                <p className="mt-2 font-mono text-sm bg-white/50 px-2 py-1 rounded inline-block">
+                  Código: {result.codigo}
+                </p>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Aviso */}
+        {!result && (
+          <div className="bg-amber-50 border border-amber-200 rounded-xl p-4 text-sm text-amber-800">
+            <p className="font-medium mb-1">⚠️ Atenção</p>
+            <p>
+              A DDS será gerada no formato compatível com TRACES NT. 
+              Certifique-se de que todos os dados da avaliação estão corretos antes de prosseguir.
+            </p>
+          </div>
+        )}
+
+        {/* Ações */}
+        <div className="flex justify-end gap-3">
+          <button
+            onClick={handleClose}
+            className="btn-secondary"
+          >
+            {result?.success ? 'Fechar' : 'Cancelar'}
+          </button>
+          
+          {!result?.success && (
+            <button
+              onClick={handleGenerar}
+              disabled={isGenerating || avaliacao.status !== 'aprovada'}
+              className="btn-primary flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isGenerating ? (
+                <>
+                  <Loader2 className="w-5 h-5 animate-spin" />
+                  Gerando...
+                </>
+              ) : (
+                <>
+                  <FileText className="w-5 h-5" />
+                  Gerar DDS
+                </>
+              )}
+            </button>
+          )}
+
+          {result?.success && (
+            <button className="btn-primary flex items-center gap-2">
+              <Download className="w-5 h-5" />
+              Baixar DDS
+            </button>
+          )}
+        </div>
+
+        {avaliacao.status !== 'aprovada' && !result && (
+          <p className="text-center text-sm text-gray-muted">
+            ⚠️ A avaliação precisa estar <strong>aprovada</strong> para gerar a DDS.
+          </p>
+        )}
+      </div>
+    </Modal>
+  );
+}
--- a/frontend/src/components/DashboardLayout.tsx
+++ b/frontend/src/components/DashboardLayout.tsx
@@ -0,0 +1,13 @@
+import { Outlet } from 'react-router-dom';
+import Sidebar from './Sidebar';
+
+export default function DashboardLayout() {
+  return (
+    <div className="flex min-h-screen bg-gray-bg">
+      <Sidebar />
+      <main className="ml-64 flex-1 p-8">
+        <Outlet />
+      </main>
+    </div>
+  );
+}
--- a/frontend/src/components/DataTable.tsx
+++ b/frontend/src/components/DataTable.tsx
@@ -0,0 +1,109 @@
+import { ReactNode } from 'react';
+import { ChevronLeft, ChevronRight, Loader2 } from 'lucide-react';
+
+interface Column<T> {
+  key: string;
+  label: string;
+  render?: (item: T) => ReactNode;
+}
+
+interface DataTableProps<T> {
+  columns: Column<T>[];
+  data: T[];
+  isLoading?: boolean;
+  emptyMessage?: string;
+  keyExtractor: (item: T) => string | number;
+  onRowClick?: (item: T) => void;
+  pagination?: {
+    page: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+  };
+}
+
+export default function DataTable<T>({
+  columns,
+  data,
+  isLoading,
+  emptyMessage = 'Nenhum registro encontrado',
+  keyExtractor,
+  onRowClick,
+  pagination,
+}: DataTableProps<T>) {
+  if (isLoading) {
+    return (
+      <div className="glass-card flex items-center justify-center py-12">
+        <Loader2 className="w-8 h-8 text-primary animate-spin" />
+      </div>
+    );
+  }
+
+  if (data.length === 0) {
+    return (
+      <div className="glass-card text-center py-12">
+        <p className="text-gray-muted">{emptyMessage}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="glass-card !p-0 overflow-hidden">
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead className="bg-gray-50">
+            <tr className="text-gray-text text-xs uppercase tracking-wider">
+              {columns.map(col => (
+                <th key={col.key} className="text-left p-4 font-semibold">
+                  {col.label}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {data.map(item => (
+              <tr
+                key={keyExtractor(item)}
+                onClick={() => onRowClick?.(item)}
+                className={`border-t border-gray-100 hover:bg-gray-50 transition ${
+                  onRowClick ? 'cursor-pointer' : ''
+                }`}
+              >
+                {columns.map(col => (
+                  <td key={col.key} className="p-4 text-navy">
+                    {col.render
+                      ? col.render(item)
+                      : (item as Record<string, unknown>)[col.key] as ReactNode}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {pagination && pagination.totalPages > 1 && (
+        <div className="flex items-center justify-between p-4 border-t border-gray-100">
+          <span className="text-sm text-gray-muted">
+            Página {pagination.page} de {pagination.totalPages}
+          </span>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => pagination.onPageChange(pagination.page - 1)}
+              disabled={pagination.page <= 1}
+              className="p-2 rounded-lg hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <ChevronLeft className="w-5 h-5" />
+            </button>
+            <button
+              onClick={() => pagination.onPageChange(pagination.page + 1)}
+              disabled={pagination.page >= pagination.totalPages}
+              className="p-2 rounded-lg hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <ChevronRight className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -0,0 +1,7 @@
+export default function Footer() {
+  return (
+    <footer className="border-t border-gray-200 py-8 px-6 text-center text-gray-muted text-sm bg-white">
+      © {new Date().getFullYear()} DUORIGIN — Compliance EUDR Inteligente. Todos os direitos reservados.
+    </footer>
+  );
+}
--- a/frontend/src/components/Modal.tsx
+++ b/frontend/src/components/Modal.tsx
@@ -0,0 +1,66 @@
+import { ReactNode, useEffect } from 'react';
+import { X } from 'lucide-react';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: ReactNode;
+  maxWidth?: 'sm' | 'md' | 'lg' | 'xl';
+}
+
+const maxWidthClasses = {
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+};
+
+export default function Modal({ isOpen, onClose, title, children, maxWidth = 'md' }: ModalProps) {
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+      document.body.style.overflow = 'hidden';
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+        onClick={onClose}
+      />
+
+      {/* Modal */}
+      <div className={`relative bg-white rounded-2xl shadow-xl w-full ${maxWidthClasses[maxWidth]} max-h-[90vh] overflow-hidden`}>
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-gray-200">
+          <h2 className="text-xl font-semibold text-navy">{title}</h2>
+          <button
+            onClick={onClose}
+            className="p-2 hover:bg-gray-100 rounded-lg transition"
+          >
+            <X className="w-5 h-5 text-gray-muted" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="p-6 overflow-y-auto max-h-[calc(90vh-80px)]">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -0,0 +1,19 @@
+import { Link } from 'react-router-dom';
+
+export default function Navbar() {
+  return (
+    <nav className="fixed top-0 w-full z-50 bg-white/90 backdrop-blur-md border-b border-gray-200 px-6 py-4">
+      <div className="max-w-7xl mx-auto flex items-center justify-between">
+        <Link to="/" className="flex items-center gap-3">
+          <img src="/logo-duorigin.jpg" alt="DuoOrigin" className="w-14 h-14 rounded-lg" />
+          <span className="text-2xl font-bold text-navy">Duo<span className="text-primary">Origin</span></span>
+        </Link>
+        <div className="hidden md:flex items-center gap-8 text-sm text-navy">
+          <a href="#features" className="hover:text-primary transition">Recursos</a>
+          <a href="#about" className="hover:text-primary transition">Sobre</a>
+          <Link to="/login" className="btn-primary text-sm !py-2 !px-6">Acessar Plataforma</Link>
+        </div>
+      </div>
+    </nav>
+  );
+}
--- a/frontend/src/components/ProtectedRoute.tsx
+++ b/frontend/src/components/ProtectedRoute.tsx
@@ -0,0 +1,31 @@
+import { Navigate, useLocation } from 'react-router-dom';
+import { useAuth } from '@/hooks/useAuth';
+import { Loader2 } from 'lucide-react';
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+  adminOnly?: boolean;
+}
+
+export default function ProtectedRoute({ children, adminOnly = false }: ProtectedRouteProps) {
+  const { isAuthenticated, isLoading, user } = useAuth();
+  const location = useLocation();
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-bg">
+        <Loader2 className="w-8 h-8 text-primary animate-spin" />
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
+
+  if (adminOnly && user?.role !== 'admin') {
+    return <Navigate to="/dashboard" replace />;
+  }
+
+  return <>{children}</>;
+}
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -0,0 +1,100 @@
+import { Link, useLocation } from 'react-router-dom';
+import { useAuth } from '@/hooks/useAuth';
+import {
+  LayoutDashboard,
+  Building2,
+  MapPin,
+  ClipboardCheck,
+  FileText,
+  Users,
+  LogOut,
+} from 'lucide-react';
+
+const menuItems = [
+  { path: '/dashboard', icon: LayoutDashboard, label: 'Dashboard' },
+  { path: '/empresas', icon: Building2, label: 'Empresas' },
+  { path: '/propriedades', icon: MapPin, label: 'Propriedades' },
+  { path: '/avaliacoes', icon: ClipboardCheck, label: 'Avaliações' },
+  { path: '/documentos', icon: FileText, label: 'Documentos' },
+];
+
+const adminItems = [
+  { path: '/usuarios', icon: Users, label: 'Usuários' },
+];
+
+export default function Sidebar() {
+  const location = useLocation();
+  const { user, logout } = useAuth();
+
+  const isActive = (path: string) => location.pathname === path;
+
+  return (
+    <aside className="fixed left-0 top-0 h-screen w-64 bg-white border-r border-gray-200 flex flex-col">
+      {/* Logo */}
+      <div className="p-6 border-b border-gray-200">
+        <Link to="/dashboard" className="flex items-center gap-3">
+          <img src="/logo-duorigin.jpg" alt="DuoOrigin" className="w-12 h-12 rounded-lg" />
+          <span className="text-xl font-bold text-navy">Duo<span className="text-primary">Origin</span></span>
+        </Link>
+      </div>
+
+      {/* Menu */}
+      <nav className="flex-1 p-4 overflow-y-auto">
+        <div className="space-y-1">
+          {menuItems.map(item => (
+            <Link
+              key={item.path}
+              to={item.path}
+              className={`sidebar-link ${isActive(item.path) ? 'active' : ''}`}
+            >
+              <item.icon className="w-5 h-5" />
+              <span>{item.label}</span>
+            </Link>
+          ))}
+        </div>
+
+        {user?.role === 'admin' && (
+          <div className="mt-8">
+            <p className="px-4 text-xs font-semibold text-gray-custom uppercase tracking-wider mb-2">
+              Administração
+            </p>
+            <div className="space-y-1">
+              {adminItems.map(item => (
+                <Link
+                  key={item.path}
+                  to={item.path}
+                  className={`sidebar-link ${isActive(item.path) ? 'active' : ''}`}
+                >
+                  <item.icon className="w-5 h-5" />
+                  <span>{item.label}</span>
+                </Link>
+              ))}
+            </div>
+          </div>
+        )}
+      </nav>
+
+      {/* User & Logout */}
+      <div className="p-4 border-t border-gray-200">
+        <div className="flex items-center gap-3 mb-4 px-2">
+          <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
+            <span className="text-primary font-semibold">
+              {user?.nome?.charAt(0)?.toUpperCase() || 'U'}
+            </span>
+          </div>
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium text-navy truncate">{user?.nome}</p>
+            <p className="text-xs text-gray-muted truncate">{user?.email}</p>
+          </div>
+        </div>
+        <button
+          onClick={logout}
+          className="sidebar-link w-full text-red-500 hover:text-red-600 hover:bg-red-50"
+        >
+          <LogOut className="w-5 h-5" />
+          <span>Sair</span>
+        </button>
+      </div>
+    </aside>
+  );
+}
--- a/frontend/src/components/StatsCard.tsx
+++ b/frontend/src/components/StatsCard.tsx
@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { TrendingUp, TrendingDown } from 'lucide-react';
+
+interface StatsCardProps {
+  icon: ReactNode;
+  label: string;
+  value: number | string;
+  trend?: string;
+  trendUp?: boolean;
+}
+
+export default function StatsCard({ icon, label, value, trend, trendUp }: StatsCardProps) {
+  return (
+    <div className="glass-card">
+      <div className="flex items-start justify-between">
+        <div className="text-3xl">{icon}</div>
+        {trend && (
+          <div className={`flex items-center gap-1 text-xs font-medium ${trendUp ? 'text-green-600' : 'text-red-500'}`}>
+            {trendUp ? <TrendingUp className="w-3 h-3" /> : <TrendingDown className="w-3 h-3" />}
+            {trend}
+          </div>
+        )}
+      </div>
+      <div className="mt-4">
+        <div className="text-3xl font-bold text-navy">{value}</div>
+        <div className="text-sm text-gray-muted mt-1">{label}</div>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/contexts/AuthContext.tsx
+++ b/frontend/src/contexts/AuthContext.tsx
@@ -0,0 +1,83 @@
+import { createContext, useState, useEffect, ReactNode } from 'react';
+import apiClient from '@/api/client';
+import { User, AuthResponse, LoginCredentials, RegistroData } from '@/types';
+
+interface AuthContextType {
+  user: User | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  login: (credentials: LoginCredentials) => Promise<void>;
+  registro: (data: RegistroData) => Promise<void>;
+  logout: () => void;
+}
+
+export const AuthContext = createContext<AuthContextType>({} as AuthContextType);
+
+interface AuthProviderProps {
+  children: ReactNode;
+}
+
+export function AuthProvider({ children }: AuthProviderProps) {
+  const [user, setUser] = useState<User | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const token = localStorage.getItem('duorigin_token');
+    const savedUser = localStorage.getItem('duorigin_user');
+    
+    if (token && savedUser) {
+      setUser(JSON.parse(savedUser));
+      // Validar token com backend
+      apiClient.get('/auth/me')
+        .then(response => {
+          setUser(response.data);
+          localStorage.setItem('duorigin_user', JSON.stringify(response.data));
+        })
+        .catch(() => {
+          localStorage.removeItem('duorigin_token');
+          localStorage.removeItem('duorigin_user');
+          setUser(null);
+        })
+        .finally(() => setIsLoading(false));
+    } else {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const login = async (credentials: LoginCredentials) => {
+    const response = await apiClient.post<AuthResponse>('/auth/login', credentials);
+    const { access_token, user } = response.data;
+    
+    localStorage.setItem('duorigin_token', access_token);
+    localStorage.setItem('duorigin_user', JSON.stringify(user));
+    setUser(user);
+  };
+
+  const registro = async (data: RegistroData) => {
+    const response = await apiClient.post<AuthResponse>('/auth/registro', data);
+    const { access_token, user } = response.data;
+    
+    localStorage.setItem('duorigin_token', access_token);
+    localStorage.setItem('duorigin_user', JSON.stringify(user));
+    setUser(user);
+  };
+
+  const logout = () => {
+    localStorage.removeItem('duorigin_token');
+    localStorage.removeItem('duorigin_user');
+    setUser(null);
+  };
+
+  return (
+    <AuthContext.Provider value={{
+      user,
+      isAuthenticated: !!user,
+      isLoading,
+      login,
+      registro,
+      logout,
+    }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
--- a/frontend/src/hooks/useApi.ts
+++ b/frontend/src/hooks/useApi.ts
@@ -0,0 +1,90 @@
+import { useState, useCallback } from 'react';
+import apiClient from '@/api/client';
+import { AxiosError } from 'axios';
+
+interface UseApiState<T> {
+  data: T | null;
+  isLoading: boolean;
+  error: string | null;
+}
+
+interface UseApiReturn<T> extends UseApiState<T> {
+  execute: (...args: unknown[]) => Promise<T | null>;
+  reset: () => void;
+}
+
+export function useApi<T>(
+  apiCall: (...args: unknown[]) => Promise<{ data: T }>
+): UseApiReturn<T> {
+  const [state, setState] = useState<UseApiState<T>>({
+    data: null,
+    isLoading: false,
+    error: null,
+  });
+
+  const execute = useCallback(async (...args: unknown[]): Promise<T | null> => {
+    setState(prev => ({ ...prev, isLoading: true, error: null }));
+    
+    try {
+      const response = await apiCall(...args);
+      setState({ data: response.data, isLoading: false, error: null });
+      return response.data;
+    } catch (err) {
+      const error = err as AxiosError<{ detail?: string }>;
+      const message = error.response?.data?.detail || error.message || 'Erro desconhecido';
+      setState(prev => ({ ...prev, isLoading: false, error: message }));
+      return null;
+    }
+  }, [apiCall]);
+
+  const reset = useCallback(() => {
+    setState({ data: null, isLoading: false, error: null });
+  }, []);
+
+  return { ...state, execute, reset };
+}
+
+// Funções de API helper
+export const api = {
+  // Dashboard
+  getDashboardStats: () => apiClient.get('/dashboard/stats'),
+  
+  // Empresas
+  getEmpresas: () => apiClient.get('/empresas'),
+  getEmpresa: (id: number) => apiClient.get(`/empresas/${id}`),
+  createEmpresa: (data: unknown) => apiClient.post('/empresas', data),
+  updateEmpresa: (id: number, data: unknown) => apiClient.put(`/empresas/${id}`, data),
+  deleteEmpresa: (id: number) => apiClient.delete(`/empresas/${id}`),
+  
+  // Propriedades
+  getPropriedades: (empresaId?: number) => 
+    apiClient.get('/propriedades', { params: empresaId ? { empresa_id: empresaId } : {} }),
+  getPropriedade: (id: number) => apiClient.get(`/propriedades/${id}`),
+  createPropriedade: (data: unknown) => apiClient.post('/propriedades', data),
+  updatePropriedade: (id: number, data: unknown) => apiClient.put(`/propriedades/${id}`, data),
+  deletePropriedade: (id: number) => apiClient.delete(`/propriedades/${id}`),
+  
+  // Avaliações
+  getAvaliacoes: (propriedadeId?: number) =>
+    apiClient.get('/avaliacoes', { params: propriedadeId ? { propriedade_id: propriedadeId } : {} }),
+  getAvaliacao: (id: number) => apiClient.get(`/avaliacoes/${id}`),
+  createAvaliacao: (data: unknown) => apiClient.post('/avaliacoes', data),
+  updateAvaliacao: (id: number, data: unknown) => apiClient.put(`/avaliacoes/${id}`, data),
+  gerarDDS: (id: number) => apiClient.post(`/avaliacoes/${id}/gerar-dds`),
+  
+  // Documentos
+  getDocumentos: (params?: { propriedade_id?: number; avaliacao_id?: number }) =>
+    apiClient.get('/documentos', { params }),
+  uploadDocumento: (formData: FormData) =>
+    apiClient.post('/documentos/upload', formData, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+    }),
+  deleteDocumento: (id: number) => apiClient.delete(`/documentos/${id}`),
+  
+  // Usuários
+  getUsuarios: () => apiClient.get('/usuarios'),
+  getUsuario: (id: number) => apiClient.get(`/usuarios/${id}`),
+  createUsuario: (data: unknown) => apiClient.post('/usuarios', data),
+  updateUsuario: (id: number, data: unknown) => apiClient.put(`/usuarios/${id}`, data),
+  deleteUsuario: (id: number) => apiClient.delete(`/usuarios/${id}`),
+};
--- a/frontend/src/hooks/useAuth.ts
+++ b/frontend/src/hooks/useAuth.ts
@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { AuthContext } from '@/contexts/AuthContext';
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  
+  return context;
+}
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -0,0 +1,60 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --green: #1A7A4C;
+  --green-hover: #15634D;
+  --navy: #2D3142;
+  --gray: #C8C9CB;
+  --gray-text: #8E9196;
+  --text: #5A5D6B;
+}
+
+body {
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  background: #FFFFFF;
+  color: #2D3142;
+}
+
+@layer components {
+  .glass-card {
+    @apply bg-white border border-gray-200 rounded-2xl p-6 transition-all duration-300;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+  }
+
+  .glass-card:hover {
+    @apply border-primary;
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(26, 122, 76, 0.1);
+  }
+
+  .btn-primary {
+    @apply bg-primary hover:bg-primary-hover text-white font-semibold py-3 px-8 rounded-xl transition-all duration-300 inline-block;
+  }
+
+  .btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 32px rgba(26, 122, 76, 0.3);
+  }
+
+  .btn-secondary {
+    @apply border border-gray-custom text-navy hover:border-primary py-3 px-8 rounded-xl transition-all duration-300;
+  }
+
+  .input-field {
+    @apply w-full bg-gray-bg border border-gray-200 rounded-lg px-4 py-3 text-navy focus:border-primary focus:outline-none transition;
+  }
+
+  .sidebar-link {
+    @apply flex items-center gap-3 px-4 py-3 rounded-lg text-gray-text hover:text-primary hover:bg-primary/5 transition-all duration-200;
+  }
+
+  .sidebar-link.active {
+    @apply bg-primary/10 text-primary font-medium;
+  }
+}
+
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: #F5F6F8; }
+::-webkit-scrollbar-thumb { background: #1A7A4C; border-radius: 3px; }
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/frontend/src/pages/AvaliacaoDetail.tsx
+++ b/frontend/src/pages/AvaliacaoDetail.tsx
@@ -0,0 +1,245 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { ArrowLeft, Loader2, FileText, MapPin, Calendar, AlertTriangle, CheckCircle, Clock, XCircle } from 'lucide-react';
+import { api } from '@/hooks/useApi';
+import { Avaliacao } from '@/types';
+import DDSModal from '@/components/DDSModal';
+
+const statusConfig = {
+  pendente: { icon: Clock, color: 'bg-amber-100 text-amber-700', label: 'Pendente' },
+  em_analise: { icon: AlertTriangle, color: 'bg-blue-100 text-blue-700', label: 'Em Análise' },
+  aprovada: { icon: CheckCircle, color: 'bg-green-100 text-green-700', label: 'Aprovada' },
+  reprovada: { icon: XCircle, color: 'bg-red-100 text-red-700', label: 'Reprovada' },
+};
+
+const riscoConfig = {
+  baixo: { color: 'text-green-600', bg: 'bg-green-100', label: 'Baixo' },
+  medio: { color: 'text-amber-600', bg: 'bg-amber-100', label: 'Médio' },
+  alto: { color: 'text-orange-600', bg: 'bg-orange-100', label: 'Alto' },
+  critico: { color: 'text-red-600', bg: 'bg-red-100', label: 'Crítico' },
+};
+
+export default function AvaliacaoDetail() {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const [avaliacao, setAvaliacao] = useState<Avaliacao | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [showDDSModal, setShowDDSModal] = useState(false);
+
+  useEffect(() => {
+    loadAvaliacao();
+  }, [id]);
+
+  const loadAvaliacao = async () => {
+    try {
+      const response = await api.getAvaliacao(Number(id));
+      setAvaliacao(response.data);
+    } catch (error) {
+      console.error('Erro ao carregar avaliação:', error);
+      // Mock
+      setAvaliacao({
+        id: Number(id),
+        propriedade_id: 1,
+        data_avaliacao: '2024-02-01',
+        status: 'aprovada',
+        risco_desmatamento: 'baixo',
+        score_risco: 15,
+        observacoes: 'Propriedade em conformidade com EUDR. Documentação verificada e validada.',
+        dds_gerada: true,
+        dds_codigo: 'DDS-2024-00001',
+        created_at: '2024-02-01',
+        updated_at: '2024-02-01',
+        propriedade: {
+          id: 1,
+          nome: 'Fazenda Santa Maria',
+          codigo_car: 'MT-5107909-F4B8E35DB1',
+          area_total_ha: 1250.5,
+          cidade: 'Sinop',
+          estado: 'MT',
+        } as any,
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-96">
+        <Loader2 className="w-8 h-8 text-primary animate-spin" />
+      </div>
+    );
+  }
+
+  if (!avaliacao) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-gray-muted">Avaliação não encontrada</p>
+      </div>
+    );
+  }
+
+  const status = statusConfig[avaliacao.status];
+  const StatusIcon = status.icon;
+  const risco = riscoConfig[avaliacao.risco_desmatamento];
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-8">
+        <div className="flex items-center gap-4">
+          <button
+            onClick={() => navigate('/avaliacoes')}
+            className="p-2 hover:bg-gray-100 rounded-lg transition"
+          >
+            <ArrowLeft className="w-5 h-5 text-navy" />
+          </button>
+          <div>
+            <h1 className="text-3xl font-bold text-navy">Avaliação #{avaliacao.id}</h1>
+            <p className="text-gray-text text-sm mt-1">
+              {avaliacao.propriedade?.nome}
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => setShowDDSModal(true)}
+            disabled={avaliacao.status !== 'aprovada'}
+            className="btn-primary flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <FileText className="w-5 h-5" />
+            {avaliacao.dds_gerada ? 'Ver DDS' : 'Gerar DDS'}
+          </button>
+        </div>
+      </div>
+
+      <div className="grid md:grid-cols-3 gap-6">
+        {/* Main Info */}
+        <div className="md:col-span-2 space-y-6">
+          {/* Status Card */}
+          <div className="glass-card">
+            <h2 className="text-lg font-semibold text-navy mb-4">Status da Avaliação</h2>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              <div className="p-4 bg-gray-50 rounded-xl text-center">
+                <span className={`inline-flex items-center gap-1.5 text-sm font-medium px-3 py-1.5 rounded-full ${status.color}`}>
+                  <StatusIcon className="w-4 h-4" />
+                  {status.label}
+                </span>
+                <p className="text-xs text-gray-muted mt-2">Status</p>
+              </div>
+              <div className="p-4 bg-gray-50 rounded-xl text-center">
+                <span className={`inline-flex text-sm font-medium px-3 py-1.5 rounded-full ${risco.bg} ${risco.color}`}>
+                  {risco.label}
+                </span>
+                <p className="text-xs text-gray-muted mt-2">Risco</p>
+              </div>
+              <div className="p-4 bg-gray-50 rounded-xl text-center">
+                <span className="text-2xl font-bold text-navy">{avaliacao.score_risco}%</span>
+                <p className="text-xs text-gray-muted mt-1">Score de Risco</p>
+              </div>
+              <div className="p-4 bg-gray-50 rounded-xl text-center">
+                <span className={`text-sm font-medium ${avaliacao.dds_gerada ? 'text-green-600' : 'text-gray-muted'}`}>
+                  {avaliacao.dds_gerada ? '✓ Gerada' : 'Pendente'}
+                </span>
+                <p className="text-xs text-gray-muted mt-2">DDS</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Observações */}
+          <div className="glass-card">
+            <h2 className="text-lg font-semibold text-navy mb-4">Observações</h2>
+            <p className="text-gray-text">
+              {avaliacao.observacoes || 'Sem observações registradas.'}
+            </p>
+          </div>
+
+          {/* DDS Info */}
+          {avaliacao.dds_gerada && avaliacao.dds_codigo && (
+            <div className="glass-card bg-green-50 border-green-200">
+              <div className="flex items-start gap-4">
+                <div className="w-12 h-12 rounded-xl bg-green-100 flex items-center justify-center">
+                  <FileText className="w-6 h-6 text-green-600" />
+                </div>
+                <div>
+                  <h3 className="font-semibold text-green-800">DDS Gerada com Sucesso</h3>
+                  <p className="text-green-700 text-sm mt-1">
+                    Código: <span className="font-mono font-semibold">{avaliacao.dds_codigo}</span>
+                  </p>
+                  <p className="text-green-600 text-xs mt-2">
+                    Declaração compatível com TRACES NT
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Sidebar */}
+        <div className="space-y-6">
+          {/* Propriedade Info */}
+          <div className="glass-card">
+            <h2 className="text-lg font-semibold text-navy mb-4">Propriedade</h2>
+            <div className="space-y-4">
+              <div className="flex items-center gap-3">
+                <MapPin className="w-5 h-5 text-primary" />
+                <div>
+                  <p className="font-medium text-navy">{avaliacao.propriedade?.nome}</p>
+                  <p className="text-xs text-gray-muted">
+                    {avaliacao.propriedade?.cidade}/{avaliacao.propriedade?.estado}
+                  </p>
+                </div>
+              </div>
+              <div className="pt-3 border-t border-gray-100">
+                <p className="text-xs text-gray-muted mb-1">Código CAR</p>
+                <p className="font-mono text-sm text-navy">{avaliacao.propriedade?.codigo_car || '-'}</p>
+              </div>
+              <div className="pt-3 border-t border-gray-100">
+                <p className="text-xs text-gray-muted mb-1">Área Total</p>
+                <p className="font-medium text-navy">
+                  {avaliacao.propriedade?.area_total_ha?.toLocaleString('pt-BR')} ha
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Datas */}
+          <div className="glass-card">
+            <h2 className="text-lg font-semibold text-navy mb-4">Datas</h2>
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <span className="text-gray-muted text-sm flex items-center gap-2">
+                  <Calendar className="w-4 h-4" />
+                  Avaliação
+                </span>
+                <span className="text-navy font-medium">
+                  {new Date(avaliacao.data_avaliacao).toLocaleDateString('pt-BR')}
+                </span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-gray-muted text-sm">Criado em</span>
+                <span className="text-navy">
+                  {new Date(avaliacao.created_at).toLocaleDateString('pt-BR')}
+                </span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-gray-muted text-sm">Atualizado em</span>
+                <span className="text-navy">
+                  {new Date(avaliacao.updated_at).toLocaleDateString('pt-BR')}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* DDS Modal */}
+      <DDSModal
+        isOpen={showDDSModal}
+        onClose={() => setShowDDSModal(false)}
+        avaliacao={avaliacao}
+        onSuccess={loadAvaliacao}
+      />
+    </div>
+  );
+}
--- a/frontend/src/pages/Avaliacoes.tsx
+++ b/frontend/src/pages/Avaliacoes.tsx
@@ -0,0 +1,224 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Plus, Search, ClipboardCheck, Calendar, AlertTriangle, CheckCircle, Clock, XCircle } from 'lucide-react';
+import DataTable from '@/components/DataTable';
+import { api } from '@/hooks/useApi';
+import { Avaliacao } from '@/types';
+
+const statusConfig = {
+  pendente: { icon: Clock, color: 'bg-amber-100 text-amber-700', label: 'Pendente' },
+  em_analise: { icon: AlertTriangle, color: 'bg-blue-100 text-blue-700', label: 'Em Análise' },
+  aprovada: { icon: CheckCircle, color: 'bg-green-100 text-green-700', label: 'Aprovada' },
+  reprovada: { icon: XCircle, color: 'bg-red-100 text-red-700', label: 'Reprovada' },
+};
+
+const riscoConfig = {
+  baixo: { color: 'bg-green-100 text-green-700', label: 'Baixo' },
+  medio: { color: 'bg-amber-100 text-amber-700', label: 'Médio' },
+  alto: { color: 'bg-orange-100 text-orange-700', label: 'Alto' },
+  critico: { color: 'bg-red-100 text-red-700', label: 'Crítico' },
+};
+
+export default function Avaliacoes() {
+  const navigate = useNavigate();
+  const [avaliacoes, setAvaliacoes] = useState<Avaliacao[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  useEffect(() => {
+    loadAvaliacoes();
+  }, []);
+
+  const loadAvaliacoes = async () => {
+    try {
+      const response = await api.getAvaliacoes();
+      setAvaliacoes(response.data);
+    } catch (error) {
+      console.error('Erro ao carregar avaliações:', error);
+      // Mock data
+      setAvaliacoes([
+        {
+          id: 1,
+          propriedade_id: 1,
+          data_avaliacao: '2024-02-01',
+          status: 'aprovada',
+          risco_desmatamento: 'baixo',
+          score_risco: 15,
+          observacoes: 'Propriedade em conformidade com EUDR',
+          dds_gerada: true,
+          dds_codigo: 'DDS-2024-00001',
+          created_at: '2024-02-01',
+          updated_at: '2024-02-01',
+          propriedade: { id: 1, nome: 'Fazenda Santa Maria' } as any,
+        },
+        {
+          id: 2,
+          propriedade_id: 2,
+          data_avaliacao: '2024-02-05',
+          status: 'em_analise',
+          risco_desmatamento: 'medio',
+          score_risco: 45,
+          observacoes: 'Aguardando documentação adicional',
+          dds_gerada: false,
+          created_at: '2024-02-05',
+          updated_at: '2024-02-05',
+          propriedade: { id: 2, nome: 'Sítio Esperança' } as any,
+        },
+        {
+          id: 3,
+          propriedade_id: 3,
+          data_avaliacao: '2024-02-08',
+          status: 'pendente',
+          risco_desmatamento: 'baixo',
+          score_risco: 22,
+          dds_gerada: false,
+          created_at: '2024-02-08',
+          updated_at: '2024-02-08',
+          propriedade: { id: 3, nome: 'Estância Boa Vista' } as any,
+        },
+      ]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const filteredAvaliacoes = avaliacoes.filter(
+    a =>
+      a.propriedade?.nome?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      a.dds_codigo?.includes(searchTerm)
+  );
+
+  const columns = [
+    {
+      key: 'propriedade',
+      label: 'Propriedade',
+      render: (av: Avaliacao) => (
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+            <ClipboardCheck className="w-5 h-5 text-primary" />
+          </div>
+          <div>
+            <div className="font-medium text-navy">{av.propriedade?.nome || '-'}</div>
+            {av.dds_codigo && (
+              <div className="text-xs text-primary font-mono">{av.dds_codigo}</div>
+            )}
+          </div>
+        </div>
+      ),
+    },
+    {
+      key: 'data_avaliacao',
+      label: 'Data',
+      render: (av: Avaliacao) => (
+        <div className="flex items-center gap-2 text-gray-text">
+          <Calendar className="w-4 h-4" />
+          {new Date(av.data_avaliacao).toLocaleDateString('pt-BR')}
+        </div>
+      ),
+    },
+    {
+      key: 'status',
+      label: 'Status',
+      render: (av: Avaliacao) => {
+        const config = statusConfig[av.status];
+        const Icon = config.icon;
+        return (
+          <span className={`inline-flex items-center gap-1.5 text-xs font-medium px-2.5 py-1 rounded-full ${config.color}`}>
+            <Icon className="w-3.5 h-3.5" />
+            {config.label}
+          </span>
+        );
+      },
+    },
+    {
+      key: 'risco_desmatamento',
+      label: 'Risco',
+      render: (av: Avaliacao) => {
+        const config = riscoConfig[av.risco_desmatamento];
+        return (
+          <span className={`text-xs font-medium px-2.5 py-1 rounded-full ${config.color}`}>
+            {config.label}
+          </span>
+        );
+      },
+    },
+    {
+      key: 'score_risco',
+      label: 'Score',
+      render: (av: Avaliacao) => (
+        <div className="flex items-center gap-2">
+          <div className="w-16 h-2 bg-gray-200 rounded-full overflow-hidden">
+            <div
+              className={`h-full rounded-full ${
+                av.score_risco <= 30 ? 'bg-green-500' :
+                av.score_risco <= 60 ? 'bg-amber-500' : 'bg-red-500'
+              }`}
+              style={{ width: `${av.score_risco}%` }}
+            />
+          </div>
+          <span className="text-sm font-medium text-navy">{av.score_risco}%</span>
+        </div>
+      ),
+    },
+    {
+      key: 'dds_gerada',
+      label: 'DDS',
+      render: (av: Avaliacao) => (
+        <span
+          className={`text-xs font-medium px-2 py-1 rounded-full ${
+            av.dds_gerada
+              ? 'bg-green-100 text-green-700'
+              : 'bg-gray-100 text-gray-500'
+          }`}
+        >
+          {av.dds_gerada ? 'Gerada' : 'Pendente'}
+        </span>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-8">
+        <div>
+          <h1 className="text-3xl font-bold text-navy">Avaliações</h1>
+          <p className="text-gray-text text-sm mt-1">
+            Avaliações de due diligence EUDR
+          </p>
+        </div>
+        <button
+          onClick={() => navigate('/avaliacoes/nova')}
+          className="btn-primary flex items-center gap-2"
+        >
+          <Plus className="w-5 h-5" />
+          Nova Avaliação
+        </button>
+      </div>
+
+      {/* Search */}
+      <div className="mb-6">
+        <div className="relative max-w-md">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-muted" />
+          <input
+            type="text"
+            placeholder="Buscar por propriedade ou código DDS..."
+            value={searchTerm}
+            onChange={e => setSearchTerm(e.target.value)}
+            className="input-field pl-10"
+          />
+        </div>
+      </div>
+
+      {/* Table */}
+      <DataTable
+        columns={columns}
+        data={filteredAvaliacoes}
+        isLoading={isLoading}
+        keyExtractor={av => av.id}
+        onRowClick={av => navigate(`/avaliacoes/${av.id}`)}
+        emptyMessage="Nenhuma avaliação encontrada"
+      />
+    </div>
+  );
+}
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -0,0 +1,179 @@
+import { useEffect, useState } from 'react';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
+import { Building2, MapPin, ClipboardCheck, FileText, Loader2 } from 'lucide-react';
+import StatsCard from '@/components/StatsCard';
+import { api } from '@/hooks/useApi';
+import { DashboardStats } from '@/types';
+
+export default function Dashboard() {
+  const [stats, setStats] = useState<DashboardStats | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    loadStats();
+  }, []);
+
+  const loadStats = async () => {
+    try {
+      const response = await api.getDashboardStats();
+      setStats(response.data);
+    } catch (error) {
+      console.error('Erro ao carregar stats:', error);
+      // Mock data para desenvolvimento
+      setStats({
+        total_empresas: 12,
+        total_propriedades: 48,
+        total_avaliacoes: 156,
+        avaliacoes_aprovadas: 142,
+        avaliacoes_pendentes: 8,
+        dds_geradas: 134,
+        avaliacoes_por_mes: [
+          { mes: 'Set', total: 18 },
+          { mes: 'Out', total: 24 },
+          { mes: 'Nov', total: 32 },
+          { mes: 'Dez', total: 28 },
+          { mes: 'Jan', total: 35 },
+          { mes: 'Fev', total: 19 },
+        ],
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-96">
+        <Loader2 className="w-8 h-8 text-primary animate-spin" />
+      </div>
+    );
+  }
+
+  const taxaAprovacao = stats
+    ? Math.round((stats.avaliacoes_aprovadas / stats.total_avaliacoes) * 100)
+    : 0;
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-8">
+        <div>
+          <h1 className="text-3xl font-bold text-navy">Dashboard</h1>
+          <p className="text-gray-text text-sm mt-1">Visão geral do compliance EUDR</p>
+        </div>
+        <div className="text-xs text-gray-muted">
+          Última atualização: {new Date().toLocaleString('pt-BR')}
+        </div>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+        <StatsCard
+          icon={<Building2 className="w-6 h-6 text-primary" />}
+          label="Empresas"
+          value={stats?.total_empresas || 0}
+        />
+        <StatsCard
+          icon={<MapPin className="w-6 h-6 text-primary" />}
+          label="Propriedades"
+          value={stats?.total_propriedades || 0}
+        />
+        <StatsCard
+          icon={<ClipboardCheck className="w-6 h-6 text-primary" />}
+          label="Avaliações"
+          value={stats?.total_avaliacoes || 0}
+        />
+        <StatsCard
+          icon={<FileText className="w-6 h-6 text-primary" />}
+          label="DDS Geradas"
+          value={stats?.dds_geradas || 0}
+          trend={`${taxaAprovacao}%`}
+          trendUp={taxaAprovacao >= 90}
+        />
+      </div>
+
+      {/* Charts */}
+      <div className="grid md:grid-cols-2 gap-6 mb-8">
+        {/* Gráfico de Avaliações por Mês */}
+        <div className="glass-card">
+          <h2 className="text-lg font-semibold text-navy mb-4">📊 Avaliações por Mês</h2>
+          <div className="h-64">
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart data={stats?.avaliacoes_por_mes || []}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#E2E4E8" />
+                <XAxis dataKey="mes" stroke="#8E9196" fontSize={12} />
+                <YAxis stroke="#8E9196" fontSize={12} />
+                <Tooltip
+                  contentStyle={{
+                    background: '#fff',
+                    border: '1px solid #E2E4E8',
+                    borderRadius: '8px',
+                  }}
+                />
+                <Bar dataKey="total" fill="#1A7A4C" radius={[4, 4, 0, 0]} />
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+
+        {/* Resumo */}
+        <div className="glass-card">
+          <h2 className="text-lg font-semibold text-navy mb-4">📋 Resumo</h2>
+          <div className="space-y-4">
+            <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
+              <span className="text-sm text-gray-text">Avaliações Aprovadas</span>
+              <span className="font-semibold text-green-600">{stats?.avaliacoes_aprovadas || 0}</span>
+            </div>
+            <div className="flex items-center justify-between p-3 bg-amber-50 rounded-lg">
+              <span className="text-sm text-gray-text">Avaliações Pendentes</span>
+              <span className="font-semibold text-amber-600">{stats?.avaliacoes_pendentes || 0}</span>
+            </div>
+            <div className="flex items-center justify-between p-3 bg-primary/5 rounded-lg">
+              <span className="text-sm text-gray-text">Taxa de Aprovação</span>
+              <span className="font-semibold text-primary">{taxaAprovacao}%</span>
+            </div>
+            <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+              <span className="text-sm text-gray-text">DDS Geradas</span>
+              <span className="font-semibold text-navy">{stats?.dds_geradas || 0}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Quick Actions */}
+      <div className="glass-card">
+        <h2 className="text-lg font-semibold text-navy mb-4">⚡ Ações Rápidas</h2>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <a
+            href="/empresas"
+            className="p-4 bg-gray-50 rounded-xl hover:bg-primary/5 hover:border-primary border border-transparent transition text-center"
+          >
+            <Building2 className="w-8 h-8 text-primary mx-auto mb-2" />
+            <span className="text-sm text-navy font-medium">Nova Empresa</span>
+          </a>
+          <a
+            href="/propriedades"
+            className="p-4 bg-gray-50 rounded-xl hover:bg-primary/5 hover:border-primary border border-transparent transition text-center"
+          >
+            <MapPin className="w-8 h-8 text-primary mx-auto mb-2" />
+            <span className="text-sm text-navy font-medium">Nova Propriedade</span>
+          </a>
+          <a
+            href="/avaliacoes"
+            className="p-4 bg-gray-50 rounded-xl hover:bg-primary/5 hover:border-primary border border-transparent transition text-center"
+          >
+            <ClipboardCheck className="w-8 h-8 text-primary mx-auto mb-2" />
+            <span className="text-sm text-navy font-medium">Nova Avaliação</span>
+          </a>
+          <a
+            href="/documentos"
+            className="p-4 bg-gray-50 rounded-xl hover:bg-primary/5 hover:border-primary border border-transparent transition text-center"
+          >
+            <FileText className="w-8 h-8 text-primary mx-auto mb-2" />
+            <span className="text-sm text-navy font-medium">Upload Documento</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/pages/Documentos.tsx
+++ b/frontend/src/pages/Documentos.tsx
@@ -0,0 +1,296 @@
+import { useEffect, useState, useRef } from 'react';
+import { FileText, Upload, Search, Trash2, Download, File, Image, FileSpreadsheet, Loader2 } from 'lucide-react';
+import DataTable from '@/components/DataTable';
+import Modal from '@/components/Modal';
+import { api } from '@/hooks/useApi';
+import { Documento } from '@/types';
+
+const iconByType: Record<string, typeof File> = {
+  'application/pdf': FileText,
+  'image/jpeg': Image,
+  'image/png': Image,
+  'application/vnd.ms-excel': FileSpreadsheet,
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': FileSpreadsheet,
+};
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+export default function Documentos() {
+  const [documentos, setDocumentos] = useState<Documento[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [showUploadModal, setShowUploadModal] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [selectedDoc, setSelectedDoc] = useState<Documento | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    loadDocumentos();
+  }, []);
+
+  const loadDocumentos = async () => {
+    try {
+      const response = await api.getDocumentos();
+      setDocumentos(response.data);
+    } catch (error) {
+      console.error('Erro ao carregar documentos:', error);
+      // Mock data
+      setDocumentos([
+        {
+          id: 1,
+          nome: 'CAR_Fazenda_Santa_Maria.pdf',
+          tipo: 'application/pdf',
+          tamanho: 2456789,
+          url: '/uploads/car_fazenda.pdf',
+          propriedade_id: 1,
+          uploaded_by: 1,
+          created_at: '2024-02-01T10:30:00',
+        },
+        {
+          id: 2,
+          nome: 'Licença_Ambiental_2024.pdf',
+          tipo: 'application/pdf',
+          tamanho: 1234567,
+          url: '/uploads/licenca.pdf',
+          empresa_id: 1,
+          uploaded_by: 1,
+          created_at: '2024-02-03T14:15:00',
+        },
+        {
+          id: 3,
+          nome: 'Mapa_Propriedade.png',
+          tipo: 'image/png',
+          tamanho: 3456789,
+          url: '/uploads/mapa.png',
+          propriedade_id: 1,
+          uploaded_by: 1,
+          created_at: '2024-02-05T09:00:00',
+        },
+      ]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+
+    setIsUploading(true);
+    try {
+      for (const file of files) {
+        const formData = new FormData();
+        formData.append('file', file);
+        await api.uploadDocumento(formData);
+      }
+      loadDocumentos();
+      setShowUploadModal(false);
+    } catch (error) {
+      console.error('Erro ao fazer upload:', error);
+    } finally {
+      setIsUploading(false);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!selectedDoc) return;
+    try {
+      await api.deleteDocumento(selectedDoc.id);
+      loadDocumentos();
+    } catch (error) {
+      console.error('Erro ao excluir documento:', error);
+    }
+    setShowDeleteModal(false);
+    setSelectedDoc(null);
+  };
+
+  const filteredDocumentos = documentos.filter(d =>
+    d.nome.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const columns = [
+    {
+      key: 'nome',
+      label: 'Documento',
+      render: (doc: Documento) => {
+        const Icon = iconByType[doc.tipo] || File;
+        return (
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+              <Icon className="w-5 h-5 text-primary" />
+            </div>
+            <div>
+              <div className="font-medium text-navy">{doc.nome}</div>
+              <div className="text-xs text-gray-muted">{formatFileSize(doc.tamanho)}</div>
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      key: 'tipo',
+      label: 'Tipo',
+      render: (doc: Documento) => (
+        <span className="text-sm text-gray-text">
+          {doc.tipo.split('/').pop()?.toUpperCase() || 'Arquivo'}
+        </span>
+      ),
+    },
+    {
+      key: 'created_at',
+      label: 'Data Upload',
+      render: (doc: Documento) => (
+        <span className="text-gray-text">
+          {new Date(doc.created_at).toLocaleDateString('pt-BR')}
+        </span>
+      ),
+    },
+    {
+      key: 'acoes',
+      label: 'Ações',
+      render: (doc: Documento) => (
+        <div className="flex items-center gap-2">
+          <a
+            href={doc.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="p-2 hover:bg-gray-100 rounded-lg transition"
+            title="Download"
+          >
+            <Download className="w-4 h-4 text-gray-muted" />
+          </a>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              setSelectedDoc(doc);
+              setShowDeleteModal(true);
+            }}
+            className="p-2 hover:bg-red-50 rounded-lg transition"
+            title="Excluir"
+          >
+            <Trash2 className="w-4 h-4 text-red-500" />
+          </button>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-8">
+        <div>
+          <h1 className="text-3xl font-bold text-navy">Documentos</h1>
+          <p className="text-gray-text text-sm mt-1">
+            Gestão de documentos e arquivos
+          </p>
+        </div>
+        <button
+          onClick={() => setShowUploadModal(true)}
+          className="btn-primary flex items-center gap-2"
+        >
+          <Upload className="w-5 h-5" />
+          Upload
+        </button>
+      </div>
+
+      {/* Search */}
+      <div className="mb-6">
+        <div className="relative max-w-md">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-muted" />
+          <input
+            type="text"
+            placeholder="Buscar por nome do arquivo..."
+            value={searchTerm}
+            onChange={e => setSearchTerm(e.target.value)}
+            className="input-field pl-10"
+          />
+        </div>
+      </div>
+
+      {/* Table */}
+      <DataTable
+        columns={columns}
+        data={filteredDocumentos}
+        isLoading={isLoading}
+        keyExtractor={doc => doc.id}
+        emptyMessage="Nenhum documento encontrado"
+      />
+
+      {/* Upload Modal */}
+      <Modal
+        isOpen={showUploadModal}
+        onClose={() => setShowUploadModal(false)}
+        title="Upload de Documentos"
+      >
+        <div className="space-y-4">
+          <div
+            className="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center hover:border-primary transition cursor-pointer"
+            onClick={() => fileInputRef.current?.click()}
+          >
+            {isUploading ? (
+              <Loader2 className="w-12 h-12 text-primary mx-auto animate-spin" />
+            ) : (
+              <Upload className="w-12 h-12 text-gray-muted mx-auto mb-4" />
+            )}
+            <p className="text-gray-text mb-2">
+              {isUploading ? 'Enviando...' : 'Clique para selecionar arquivos'}
+            </p>
+            <p className="text-xs text-gray-muted">
+              PDF, imagens ou planilhas (máx. 10MB)
+            </p>
+            <input
+              ref={fileInputRef}
+              type="file"
+              className="hidden"
+              multiple
+              accept=".pdf,.jpg,.jpeg,.png,.xls,.xlsx"
+              onChange={handleUpload}
+              disabled={isUploading}
+            />
+          </div>
+        </div>
+      </Modal>
+
+      {/* Delete Modal */}
+      <Modal
+        isOpen={showDeleteModal}
+        onClose={() => {
+          setShowDeleteModal(false);
+          setSelectedDoc(null);
+        }}
+        title="Confirmar Exclusão"
+      >
+        <p className="text-gray-text mb-6">
+          Tem certeza que deseja excluir o documento <strong>{selectedDoc?.nome}</strong>?
+          Esta ação não pode ser desfeita.
+        </p>
+        <div className="flex justify-end gap-3">
+          <button
+            onClick={() => {
+              setShowDeleteModal(false);
+              setSelectedDoc(null);
+            }}
+            className="btn-secondary"
+          >
+            Cancelar
+          </button>
+          <button
+            onClick={handleDelete}
+            className="bg-red-500 hover:bg-red-600 text-white font-semibold py-3 px-8 rounded-xl transition"
+          >
+            Excluir
+          </button>
+        </div>
+      </Modal>
+    </div>
+  );
+}
--- a/frontend/src/pages/EmpresaForm.tsx
+++ b/frontend/src/pages/EmpresaForm.tsx
@@ -0,0 +1,298 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { ArrowLeft, Loader2, Save, Trash2 } from 'lucide-react';
+import { api } from '@/hooks/useApi';
+import Modal from '@/components/Modal';
+
+const empresaSchema = z.object({
+  nome: z.string().min(3, 'Nome deve ter no mínimo 3 caracteres'),
+  cnpj: z.string().min(14, 'CNPJ inválido'),
+  email: z.string().email('Email inválido').optional().or(z.literal('')),
+  telefone: z.string().optional(),
+  endereco: z.string().optional(),
+  cidade: z.string().optional(),
+  estado: z.string().max(2, 'Use a sigla do estado').optional(),
+  cep: z.string().optional(),
+  eu_operator_id: z.string().optional(),
+});
+
+type EmpresaFormData = z.infer<typeof empresaSchema>;
+
+export default function EmpresaForm() {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const isEditing = Boolean(id);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [error, setError] = useState('');
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<EmpresaFormData>({
+    resolver: zodResolver(empresaSchema),
+  });
+
+  useEffect(() => {
+    if (isEditing) {
+      loadEmpresa();
+    }
+  }, [id]);
+
+  const loadEmpresa = async () => {
+    setIsLoading(true);
+    try {
+      const response = await api.getEmpresa(Number(id));
+      reset(response.data);
+    } catch (error) {
+      console.error('Erro ao carregar empresa:', error);
+      setError('Empresa não encontrada');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const onSubmit = async (data: EmpresaFormData) => {
+    setIsSaving(true);
+    setError('');
+
+    try {
+      if (isEditing) {
+        await api.updateEmpresa(Number(id), data);
+      } else {
+        await api.createEmpresa(data);
+      }
+      navigate('/empresas');
+    } catch (err: unknown) {
+      const error = err as { response?: { data?: { detail?: string } } };
+      setError(error.response?.data?.detail || 'Erro ao salvar empresa');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    try {
+      await api.deleteEmpresa(Number(id));
+      navigate('/empresas');
+    } catch (err: unknown) {
+      const error = err as { response?: { data?: { detail?: string } } };
+      setError(error.response?.data?.detail || 'Erro ao excluir empresa');
+    }
+    setShowDeleteModal(false);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-96">
+        <Loader2 className="w-8 h-8 text-primary animate-spin" />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="flex items-center gap-4 mb-8">
+        <button
+          onClick={() => navigate('/empresas')}
+          className="p-2 hover:bg-gray-100 rounded-lg transition"
+        >
+          <ArrowLeft className="w-5 h-5 text-navy" />
+        </button>
+        <div>
+          <h1 className="text-3xl font-bold text-navy">
+            {isEditing ? 'Editar Empresa' : 'Nova Empresa'}
+          </h1>
+          <p className="text-gray-text text-sm mt-1">
+            {isEditing ? 'Atualize os dados da empresa' : 'Cadastre uma nova empresa operadora'}
+          </p>
+        </div>
+      </div>
+
+      {/* Form */}
+      <div className="glass-card max-w-2xl">
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+          {error && (
+            <div className="bg-red-50 border border-red-200 rounded-lg p-3 text-red-600 text-sm">
+              {error}
+            </div>
+          )}
+
+          <div className="grid md:grid-cols-2 gap-4">
+            <div className="md:col-span-2">
+              <label className="text-sm text-gray-text mb-1 block">Nome da Empresa *</label>
+              <input
+                {...register('nome')}
+                className="input-field"
+                placeholder="Nome da empresa"
+              />
+              {errors.nome && (
+                <p className="text-red-500 text-xs mt-1">{errors.nome.message}</p>
+              )}
+            </div>
+
+            <div>
+              <label className="text-sm text-gray-text mb-1 block">CNPJ *</label>
+              <input
+                {...register('cnpj')}
+                className="input-field"
+                placeholder="00.000.000/0000-00"
+              />
+              {errors.cnpj && (
+                <p className="text-red-500 text-xs mt-1">{errors.cnpj.message}</p>
+              )}
+            </div>
+
+            <div>
+              <label className="text-sm text-gray-text mb-1 block">EU Operator ID</label>
+              <input
+                {...register('eu_operator_id')}
+                className="input-field"
+                placeholder="BR-OP-XXXX-XXX"
+              />
+            </div>
+
+            <div>
+              <label className="text-sm text-gray-text mb-1 block">Email</label>
+              <input
+                type="email"
+                {...register('email')}
+                className="input-field"
+                placeholder="contato@empresa.com"
+              />
+              {errors.email && (
+                <p className="text-red-500 text-xs mt-1">{errors.email.message}</p>
+              )}
+            </div>
+
+            <div>
+              <label className="text-sm text-gray-text mb-1 block">Telefone</label>
+              <input
+                {...register('telefone')}
+                className="input-field"
+                placeholder="(00) 00000-0000"
+              />
+            </div>
+
+            <div className="md:col-span-2">
+              <label className="text-sm text-gray-text mb-1 block">Endereço</label>
+              <input
+                {...register('endereco')}
+                className="input-field"
+                placeholder="Rua, número, bairro"
+              />
+            </div>
+
+            <div>
+              <label className="text-sm text-gray-text mb-1 block">Cidade</label>
+              <input
+                {...register('cidade')}
+                className="input-field"
+                placeholder="Cidade"
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="text-sm text-gray-text mb-1 block">Estado</label>
+                <input
+                  {...register('estado')}
+                  className="input-field"
+                  placeholder="UF"
+                  maxLength={2}
+                />
+                {errors.estado && (
+                  <p className="text-red-500 text-xs mt-1">{errors.estado.message}</p>
+                )}
+              </div>
+              <div>
+                <label className="text-sm text-gray-text mb-1 block">CEP</label>
+                <input
+                  {...register('cep')}
+                  className="input-field"
+                  placeholder="00000-000"
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Actions */}
+          <div className="flex items-center justify-between pt-4 border-t border-gray-200">
+            {isEditing ? (
+              <button
+                type="button"
+                onClick={() => setShowDeleteModal(true)}
+                className="flex items-center gap-2 text-red-500 hover:text-red-600 transition"
+              >
+                <Trash2 className="w-5 h-5" />
+                Excluir
+              </button>
+            ) : (
+              <div />
+            )}
+
+            <div className="flex items-center gap-3">
+              <button
+                type="button"
+                onClick={() => navigate('/empresas')}
+                className="btn-secondary"
+              >
+                Cancelar
+              </button>
+              <button
+                type="submit"
+                disabled={isSaving}
+                className="btn-primary flex items-center gap-2"
+              >
+                {isSaving ? (
+                  <>
+                    <Loader2 className="w-5 h-5 animate-spin" />
+                    Salvando...
+                  </>
+                ) : (
+                  <>
+                    <Save className="w-5 h-5" />
+                    Salvar
+                  </>
+                )}
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+
+      {/* Delete Modal */}
+      <Modal
+        isOpen={showDeleteModal}
+        onClose={() => setShowDeleteModal(false)}
+        title="Confirmar Exclusão"
+      >
+        <p className="text-gray-text mb-6">
+          Tem certeza que deseja excluir esta empresa? Esta ação não pode ser desfeita.
+        </p>
+        <div className="flex justify-end gap-3">
+          <button
+            onClick={() => setShowDeleteModal(false)}
+            className="btn-secondary"
+          >
+            Cancelar
+          </button>
+          <button
+            onClick={handleDelete}
+            className="bg-red-500 hover:bg-red-600 text-white font-semibold py-3 px-8 rounded-xl transition"
+          >
+            Excluir
+          </button>
+        </div>
+      </Modal>
+    </div>
+  );
+}
--- a/frontend/src/pages/Empresas.tsx
+++ b/frontend/src/pages/Empresas.tsx
@@ -0,0 +1,188 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Plus, Search, Building2, MapPin, Phone } from 'lucide-react';
+import DataTable from '@/components/DataTable';
+import { api } from '@/hooks/useApi';
+import { Empresa } from '@/types';
+
+export default function Empresas() {
+  const navigate = useNavigate();
+  const [empresas, setEmpresas] = useState<Empresa[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  useEffect(() => {
+    loadEmpresas();
+  }, []);
+
+  const loadEmpresas = async () => {
+    try {
+      const response = await api.getEmpresas();
+      setEmpresas(response.data);
+    } catch (error) {
+      console.error('Erro ao carregar empresas:', error);
+      // Mock data
+      setEmpresas([
+        {
+          id: 1,
+          nome: 'AgroBrasil Exportações',
+          cnpj: '12.345.678/0001-99',
+          email: 'contato@agrobrasil.com',
+          telefone: '(11) 99999-9999',
+          cidade: 'São Paulo',
+          estado: 'SP',
+          eu_operator_id: 'BR-OP-2024-001',
+          ativo: true,
+          created_at: '2024-01-15',
+          updated_at: '2024-01-15',
+        },
+        {
+          id: 2,
+          nome: 'Fazendas União LTDA',
+          cnpj: '98.765.432/0001-11',
+          email: 'contato@fazendasuniao.com.br',
+          telefone: '(62) 98888-8888',
+          cidade: 'Goiânia',
+          estado: 'GO',
+          eu_operator_id: 'BR-OP-2024-002',
+          ativo: true,
+          created_at: '2024-02-20',
+          updated_at: '2024-02-20',
+        },
+        {
+          id: 3,
+          nome: 'Cooperativa Grãos do Sul',
+          cnpj: '55.444.333/0001-22',
+          email: 'admin@graosul.coop.br',
+          telefone: '(51) 97777-7777',
+          cidade: 'Porto Alegre',
+          estado: 'RS',
+          eu_operator_id: 'BR-OP-2024-003',
+          ativo: true,
+          created_at: '2024-03-10',
+          updated_at: '2024-03-10',
+        },
+      ]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const filteredEmpresas = empresas.filter(
+    e =>
+      e.nome.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      e.cnpj.includes(searchTerm)
+  );
+
+  const columns = [
+    {
+      key: 'nome',
+      label: 'Empresa',
+      render: (empresa: Empresa) => (
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+            <Building2 className="w-5 h-5 text-primary" />
+          </div>
+          <div>
+            <div className="font-medium text-navy">{empresa.nome}</div>
+            <div className="text-xs text-gray-muted">{empresa.cnpj}</div>
+          </div>
+        </div>
+      ),
+    },
+    {
+      key: 'localizacao',
+      label: 'Localização',
+      render: (empresa: Empresa) => (
+        <div className="flex items-center gap-2 text-gray-text">
+          <MapPin className="w-4 h-4" />
+          {empresa.cidade}/{empresa.estado}
+        </div>
+      ),
+    },
+    {
+      key: 'contato',
+      label: 'Contato',
+      render: (empresa: Empresa) => (
+        <div className="space-y-1">
+          <div className="text-sm text-navy">{empresa.email}</div>
+          {empresa.telefone && (
+            <div className="flex items-center gap-1 text-xs text-gray-muted">
+              <Phone className="w-3 h-3" />
+              {empresa.telefone}
+            </div>
+          )}
+        </div>
+      ),
+    },
+    {
+      key: 'eu_operator_id',
+      label: 'EU Operator ID',
+      render: (empresa: Empresa) => (
+        <span className="font-mono text-xs text-primary bg-primary/10 px-2 py-1 rounded">
+          {empresa.eu_operator_id || '-'}
+        </span>
+      ),
+    },
+    {
+      key: 'status',
+      label: 'Status',
+      render: (empresa: Empresa) => (
+        <span
+          className={`text-xs font-medium px-2 py-1 rounded-full ${
+            empresa.ativo
+              ? 'bg-green-100 text-green-700'
+              : 'bg-gray-100 text-gray-500'
+          }`}
+        >
+          {empresa.ativo ? 'Ativa' : 'Inativa'}
+        </span>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-8">
+        <div>
+          <h1 className="text-3xl font-bold text-navy">Empresas</h1>
+          <p className="text-gray-text text-sm mt-1">
+            Gestão de empresas operadoras EUDR
+          </p>
+        </div>
+        <button
+          onClick={() => navigate('/empresas/nova')}
+          className="btn-primary flex items-center gap-2"
+        >
+          <Plus className="w-5 h-5" />
+          Nova Empresa
+        </button>
+      </div>
+
+      {/* Search */}
+      <div className="mb-6">
+        <div className="relative max-w-md">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-muted" />
+          <input
+            type="text"
+            placeholder="Buscar por nome ou CNPJ..."
+            value={searchTerm}
+            onChange={e => setSearchTerm(e.target.value)}
+            className="input-field pl-10"
+          />
+        </div>
+      </div>
+
+      {/* Table */}
+      <DataTable
+        columns={columns}
+        data={filteredEmpresas}
+        isLoading={isLoading}
+        keyExtractor={empresa => empresa.id}
+        onRowClick={empresa => navigate(`/empresas/${empresa.id}`)}
+        emptyMessage="Nenhuma empresa encontrada"
+      />
+    </div>
+  );
+}
--- a/frontend/src/pages/Landing.tsx
+++ b/frontend/src/pages/Landing.tsx
@@ -0,0 +1,258 @@
+import { Link } from 'react-router-dom';
+import Navbar from '@/components/Navbar';
+import Footer from '@/components/Footer';
+import { Shield, Map, FileText, Link2, BarChart3, Globe, Zap, CheckCircle2, Server } from 'lucide-react';
+
+const features = [
+  {
+    icon: <Shield className="w-8 h-8" />,
+    title: 'Due Diligence Automatizada',
+    desc: 'Motor de avaliação EUDR com checklist completo, scoring de risco e flags automáticas',
+  },
+  {
+    icon: <Map className="w-8 h-8" />,
+    title: 'Geolocalização Avançada',
+    desc: 'Mapeamento de áreas com GeoJSON/KML, detecção de sobreposição e análise de desmatamento',
+  },
+  {
+    icon: <FileText className="w-8 h-8" />,
+    title: 'DDS Automatizada',
+    desc: 'Geração, revisão e envio de Declarações de Due Diligence diretamente para a UE',
+  },
+  {
+    icon: <Link2 className="w-8 h-8" />,
+    title: 'Rastreabilidade Completa',
+    desc: 'Cadeia de custódia do produtor ao porto, com histórico imutável de auditoria',
+  },
+  {
+    icon: <BarChart3 className="w-8 h-8" />,
+    title: 'Dashboard Inteligente',
+    desc: 'Visão consolidada de risco, status de DDS, alertas e KPIs em tempo real',
+  },
+  {
+    icon: <Server className="w-8 h-8" />,
+    title: 'Integração Direta via API Oficial EU',
+    desc: 'Conexão machine-to-machine com a API EUDR oficial — submissão automática de DDS',
+  },
+];
+
+const stats = [
+  { value: '5.2K+', label: 'Produtores' },
+  { value: '180K+', label: 'Lotes Rastreados' },
+  { value: '2.4K+', label: 'DDS Enviadas' },
+  { value: '99.2%', label: 'Aprovação' },
+];
+
+const apiFeatures = [
+  {
+    icon: <Zap className="w-6 h-6" />,
+    title: 'Submissão Automática',
+    desc: 'Envie DDS diretamente do DuOrigin para o sistema EUDR sem exportar arquivos',
+  },
+  {
+    icon: <CheckCircle2 className="w-6 h-6" />,
+    title: 'Status em Tempo Real',
+    desc: 'Acompanhe o processamento: SUBMITTED → AVAILABLE com número de referência',
+  },
+  {
+    icon: <Link2 className="w-6 h-6" />,
+    title: 'Cadeia de Suprimentos',
+    desc: 'Referencie DDS de fornecedores e navegue pela supply chain integrada',
+  },
+  {
+    icon: <Shield className="w-6 h-6" />,
+    title: 'Conformance Certified',
+    desc: 'Aprovado em todos os 7 Conformance Tests exigidos pela Comissão Europeia',
+  },
+];
+
+export default function Landing() {
+  return (
+    <div className="min-h-screen bg-white">
+      <Navbar />
+
+      {/* Hero */}
+      <section className="pt-32 pb-20 px-6 bg-gradient-to-b from-white to-gray-bg">
+        <div className="max-w-5xl mx-auto text-center">
+          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-medium bg-primary/10 text-primary border border-primary/20 mb-4">
+            <span className="inline-block w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
+            API EUDR v1.4 Integrada
+          </div>
+          <div className="inline-block px-4 py-1.5 rounded-full text-xs font-medium bg-navy/10 text-navy border border-navy/20 mb-8 ml-2">
+            🇪🇺 Conformidade EUDR 2025 — Regulamento (UE) 2023/1115
+          </div>
+          <h1 className="text-5xl md:text-7xl font-bold mb-6 leading-tight">
+            <span className="text-navy">DUO</span>
+            <span className="text-primary">ORIGIN</span>
+            <br />
+            <span className="text-navy/80">Compliance EUDR</span>
+            <br />
+            <span className="text-primary text-4xl md:text-5xl">Inteligente</span>
+          </h1>
+          <p className="text-xl text-gray-text max-w-2xl mx-auto mb-10">
+            Plataforma completa para gestão de compliance EUDR no agronegócio brasileiro.
+            Due diligence automatizada, rastreabilidade e <strong>integração direta com a API oficial da UE</strong>.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Link to="/login" className="btn-primary text-lg">
+              Começar Agora
+            </Link>
+            <button className="btn-secondary">
+              Agendar Demo
+            </button>
+          </div>
+
+          {/* Stats */}
+          <div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-8 max-w-2xl mx-auto">
+            {stats.map(stat => (
+              <div key={stat.label} className="text-center">
+                <div className="text-2xl font-bold text-primary">{stat.value}</div>
+                <div className="text-xs text-gray-muted mt-1">{stat.label}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* API Integration Section - NEW */}
+      <section className="py-20 px-6 bg-gradient-to-r from-navy to-navy/90">
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center mb-12">
+            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-semibold bg-green-500/20 text-green-400 border border-green-500/30 mb-4">
+              <CheckCircle2 className="w-4 h-4" />
+              API EUDR v1.4 Certified
+            </div>
+            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
+              Integração Oficial <span className="text-primary">EUDR</span>
+            </h2>
+            <p className="text-gray-300 max-w-2xl mx-auto">
+              O DuOrigin conecta diretamente com a API oficial da Comissão Europeia via SOAP/WSDL.
+              Submeta, acompanhe e gerencie suas DDS sem sair da plataforma.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {apiFeatures.map(f => (
+              <div key={f.title} className="bg-white/5 backdrop-blur border border-white/10 rounded-xl p-6 hover:bg-white/10 transition-colors">
+                <div className="text-primary mb-4">{f.icon}</div>
+                <h3 className="text-lg font-semibold text-white mb-2">{f.title}</h3>
+                <p className="text-sm text-gray-400">{f.desc}</p>
+              </div>
+            ))}
+          </div>
+
+          <div className="mt-12 text-center">
+            <div className="inline-flex items-center gap-4 bg-white/5 border border-white/10 rounded-lg px-6 py-4">
+              <div className="flex items-center gap-2">
+                <Globe className="w-5 h-5 text-primary" />
+                <span className="text-white font-medium">Ambientes Suportados:</span>
+              </div>
+              <span className="text-gray-300">ACCEPTANCE (Testes)</span>
+              <span className="text-gray-500">|</span>
+              <span className="text-gray-300">PRODUCTION (Produção)</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features */}
+      <section id="features" className="py-20 px-6 bg-white">
+        <div className="max-w-6xl mx-auto">
+          <h2 className="text-3xl font-bold text-center mb-4 text-navy">
+            Recursos <span className="text-primary">Completos</span>
+          </h2>
+          <p className="text-gray-muted text-center mb-12">
+            Tudo que você precisa para compliance EUDR
+          </p>
+          <div className="grid md:grid-cols-3 gap-6">
+            {features.map(f => (
+              <div key={f.title} className="glass-card">
+                <div className="text-primary mb-4">{f.icon}</div>
+                <h3 className="text-lg font-semibold text-navy mb-2">{f.title}</h3>
+                <p className="text-sm text-gray-text">{f.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Technical Specs - NEW */}
+      <section className="py-16 px-6 bg-gray-bg">
+        <div className="max-w-4xl mx-auto">
+          <h2 className="text-2xl font-bold text-center mb-8 text-navy">
+            Especificações <span className="text-primary">Técnicas</span>
+          </h2>
+          <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+            <div className="grid md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-gray-200">
+              <div className="p-6">
+                <h3 className="font-semibold text-navy mb-4">API EUDR</h3>
+                <ul className="space-y-2 text-sm text-gray-text">
+                  <li className="flex items-center gap-2">
+                    <CheckCircle2 className="w-4 h-4 text-green-500" />
+                    Protocolo SOAP/WSDL
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle2 className="w-4 h-4 text-green-500" />
+                    WS-Security UsernameToken Digest
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle2 className="w-4 h-4 text-green-500" />
+                    GeoJSON para geolocalização
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <CheckCircle2 className="w-4 h-4 text-green-500" />
+                    Suporte V1 e V2 dos serviços
+                  </li>
+                </ul>
+              </div>
+              <div className="p-6">
+                <h3 className="font-semibold text-navy mb-4">Serviços Disponíveis</h3>
+                <ul className="space-y-2 text-sm text-gray-text">
+                  <li className="flex items-center gap-2">
+                    <span className="font-mono text-xs bg-gray-100 px-1.5 py-0.5 rounded">submitDDS</span>
+                    Submissão de DDS
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <span className="font-mono text-xs bg-gray-100 px-1.5 py-0.5 rounded">amendDDS</span>
+                    Alteração de DDS
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <span className="font-mono text-xs bg-gray-100 px-1.5 py-0.5 rounded">retractDds</span>
+                    Cancelar/Retirar
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <span className="font-mono text-xs bg-gray-100 px-1.5 py-0.5 rounded">getDDSInfo</span>
+                    Status e Referência
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section id="about" className="py-20 px-6 bg-white">
+        <div className="max-w-3xl mx-auto text-center">
+          <h2 className="text-3xl font-bold mb-6 text-navy">
+            Pronto para garantir sua <span className="text-primary">conformidade EUDR</span>?
+          </h2>
+          <p className="text-gray-text mb-8">
+            Entre em contato para uma demonstração personalizada do DuoOrigin
+            e veja a integração com a API EUDR em ação.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Link to="/login" className="btn-primary text-lg">
+              Acessar Demo
+            </Link>
+            <a href="mailto:contato@duorigin.com" className="btn-secondary">
+              Falar com Especialista
+            </a>
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -0,0 +1,157 @@
+import { useState } from 'react';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { useAuth } from '@/hooks/useAuth';
+import { Loader2, AlertCircle } from 'lucide-react';
+
+const loginSchema = z.object({
+  email: z.string().email('Email inválido'),
+  password: z.string().min(4, 'Senha deve ter no mínimo 4 caracteres'),
+});
+
+type LoginFormData = z.infer<typeof loginSchema>;
+
+const demoUsers = [
+  { email: 'demo@duorigin.com', password: 'DuoDemo2026', role: 'Admin', desc: 'Acesso completo' },
+  { email: 'operador@duorigin.com', password: 'DuoDemo2026', role: 'Operador', desc: 'Acesso operacional' },
+];
+
+export default function Login() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { login } = useAuth();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const from = (location.state as { from?: { pathname: string } })?.from?.pathname || '/dashboard';
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<LoginFormData>({
+    resolver: zodResolver(loginSchema),
+  });
+
+  const onSubmit = async (data: LoginFormData) => {
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(data);
+      navigate(from, { replace: true });
+    } catch (err: unknown) {
+      const error = err as { response?: { data?: { detail?: string } } };
+      setError(error.response?.data?.detail || (error.response?.data as any)?.message || 'Email ou senha inválidos');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const fillDemo = (idx: number) => {
+    setValue('email', demoUsers[idx].email);
+    setValue('password', demoUsers[idx].password);
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-bg flex items-center justify-center p-4">
+      <div className="w-full max-w-md">
+        {/* Logo */}
+        <div className="text-center mb-8">
+          <Link to="/">
+            <img
+              src="/logo-duorigin.jpg"
+              alt="DuoOrigin"
+              className="w-20 h-20 rounded-xl mx-auto mb-4"
+            />
+          </Link>
+          <h1 className="text-3xl font-bold text-navy">
+            Duo<span className="text-primary">Origin</span>
+          </h1>
+          <p className="text-gray-muted mt-1">Field to Data. Compliance Verified.</p>
+        </div>
+
+        {/* Login Card */}
+        <div className="bg-white rounded-2xl p-8 border border-gray-200 shadow-lg">
+          <h2 className="text-xl font-semibold text-navy mb-6">Acesso ao Sistema</h2>
+
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+            <div>
+              <label className="text-sm text-gray-text mb-1 block">Email</label>
+              <input
+                type="email"
+                {...register('email')}
+                className="input-field"
+                placeholder="seu@email.com"
+              />
+              {errors.email && (
+                <p className="text-red-500 text-xs mt-1">{errors.email.message}</p>
+              )}
+            </div>
+
+            <div>
+              <label className="text-sm text-gray-text mb-1 block">Senha</label>
+              <input
+                type="password"
+                {...register('password')}
+                className="input-field"
+                placeholder="••••••••"
+              />
+              {errors.password && (
+                <p className="text-red-500 text-xs mt-1">{errors.password.message}</p>
+              )}
+            </div>
+
+            {error && (
+              <div className="bg-red-50 border border-red-200 rounded-lg p-3 flex items-center gap-2 text-red-600 text-sm">
+                <AlertCircle className="w-4 h-4" />
+                {error}
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="btn-primary w-full flex items-center justify-center gap-2"
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="w-5 h-5 animate-spin" />
+                  Entrando...
+                </>
+              ) : (
+                'Entrar'
+              )}
+            </button>
+          </form>
+
+          <div className="mt-4 text-center">
+            <Link to="/registro" className="text-sm text-primary hover:underline">
+              Não tem conta? Criar conta
+            </Link>
+          </div>
+
+          {/* Demo Access */}
+          <div className="mt-6 pt-6 border-t border-gray-200">
+            <p className="text-sm text-gray-muted mb-3 text-center">🔑 Acesso Demo</p>
+            <div className="space-y-2">
+              {demoUsers.map((user, idx) => (
+                <button
+                  key={user.email}
+                  onClick={() => fillDemo(idx)}
+                  className="w-full bg-gray-bg hover:bg-gray-100 border border-gray-200 hover:border-primary/20 rounded-lg p-3 text-left transition"
+                >
+                  <div className="text-primary font-semibold text-sm">👤 {user.role}</div>
+                  <div className="text-gray-muted text-xs">{user.email} — {user.desc}</div>
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/pages/PropriedadeForm.tsx
+++ b/frontend/src/pages/PropriedadeForm.tsx
@@ -0,0 +1,330 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { ArrowLeft, Loader2, Save, Trash2 } from 'lucide-react';
+import { api } from '@/hooks/useApi';
+import Modal from '@/components/Modal';
+import { Empresa } from '@/types';
+
+const propriedadeSchema = z.object({
+  nome: z.string().min(3, 'Nome deve ter no mínimo 3 caracteres'),
+  empresa_id: z.string().min(1, 'Selecione uma empresa'),
+  codigo_car: z.string().optional(),
+  area_total_ha: z.string().min(1, 'Área deve ser maior que 0'),
+  latitude: z.string().optional(),
+  longitude: z.string().optional(),
+  cidade: z.string().optional(),
+  estado: z.string().max(2, 'Use a sigla do estado').optional(),
+});
+
+type PropriedadeFormData = z.infer<typeof propriedadeSchema>;
+
+export default function PropriedadeForm() {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const isEditing = Boolean(id);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [error, setError] = useState('');
+  const [empresas, setEmpresas] = useState<Empresa[]>([]);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<PropriedadeFormData>({
+    resolver: zodResolver(propriedadeSchema),
+  });
+
+  useEffect(() => {
+    loadEmpresas();
+    if (isEditing) {
+      loadPropriedade();
+    }
+  }, [id]);
+
+  const loadEmpresas = async () => {
+    try {
+      const response = await api.getEmpresas();
+      setEmpresas(response.data);
+    } catch (error) {
+      console.error('Erro ao carregar empresas:', error);
+      // Mock
+      setEmpresas([
+        { id: 1, nome: 'AgroBrasil Exportações' } as Empresa,
+        { id: 2, nome: 'Fazendas União LTDA' } as Empresa,
+      ]);
+    }
+  };
+
+  const loadPropriedade = async () => {
+    setIsLoading(true);
+    try {
+      const response = await api.getPropriedade(Number(id));
+      const data = response.data;
+      reset({
+        nome: data.nome,
+        empresa_id: String(data.empresa_id),
+        codigo_car: data.codigo_car || '',
+        area_total_ha: String(data.area_total_ha),
+        latitude: data.latitude ? String(data.latitude) : '',
+        longitude: data.longitude ? String(data.longitude) : '',
+        cidade: data.cidade || '',
+        estado: data.estado || '',
+      });
+    } catch (error) {
+      console.error('Erro ao carregar propriedade:', error);
+      setError('Propriedade não encontrada');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const onSubmit = async (data: PropriedadeFormData) => {
+    setIsSaving(true);
+    setError('');
+
+    try {
+      const payload = {
+        ...data,
+        empresa_id: Number(data.empresa_id),
+        area_total_ha: Number(data.area_total_ha),
+        latitude: data.latitude ? Number(data.latitude) : undefined,
+        longitude: data.longitude ? Number(data.longitude) : undefined,
+      };
+      if (isEditing) {
+        await api.updatePropriedade(Number(id), payload);
+      } else {
+        await api.createPropriedade(payload);
+      }
+      navigate('/propriedades');
+    } catch (err: unknown) {
+      const error = err as { response?: { data?: { detail?: string } } };
+      setError(error.response?.data?.detail || 'Erro ao salvar propriedade');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    try {
+      await api.deletePropriedade(Number(id));
+      navigate('/propriedades');
+    } catch (err: unknown) {
+      const error = err as { response?: { data?: { detail?: string } } };
+      setError(error.response?.data?.detail || 'Erro ao excluir propriedade');
+    }
+    setShowDeleteModal(false);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-96">
+        <Loader2 className="w-8 h-8 text-primary animate-spin" />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="flex items-center gap-4 mb-8">
+        <button
+          onClick={() => navigate('/propriedades')}
+          className="p-2 hover:bg-gray-100 rounded-lg transition"
+        >
+          <ArrowLeft className="w-5 h-5 text-navy" />
+        </button>
+        <div>
+          <h1 className="text-3xl font-bold text-navy">
+            {isEditing ? 'Editar Propriedade' : 'Nova Propriedade'}
+          </h1>
+          <p className="text-gray-text text-sm mt-1">
+            {isEditing ? 'Atualize os dados da propriedade' : 'Cadastre uma nova propriedade rural'}
+          </p>
+        </div>
+      </div>
+
+      {/* Form */}
+      <div className="glass-card max-w-2xl">
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+          {error && (
+            <div className="bg-red-50 border border-red-200 rounded-lg p-3 text-red-600 text-sm">
+              {error}
+            </div>
+          )}
+
+          <div className="grid md:grid-cols-2 gap-4">
+            <div className="md:col-span-2">
+              <label className="text-sm text-gray-text mb-1 block">Nome da Propriedade *</label>
+              <input
+                {...register('nome')}
+                className="input-field"
+                placeholder="Nome da propriedade"
+              />
+              {errors.nome && (
+                <p className="text-red-500 text-xs mt-1">{errors.nome.message}</p>
+              )}
+            </div>
+
+            <div>
+              <label className="text-sm text-gray-text mb-1 block">Empresa *</label>
+              <select
+                {...register('empresa_id')}
+                className="input-field"
+              >
+                <option value="">Selecione...</option>
+                {empresas.map(e => (
+                  <option key={e.id} value={e.id}>{e.nome}</option>
+                ))}
+              </select>
+              {errors.empresa_id && (
+                <p className="text-red-500 text-xs mt-1">{errors.empresa_id.message}</p>
+              )}
+            </div>
+
+            <div>
+              <label className="text-sm text-gray-text mb-1 block">Código CAR</label>
+              <input
+                {...register('codigo_car')}
+                className="input-field"
+                placeholder="XX-XXXXXXX-XXXXXXXXXX"
+              />
+            </div>
+
+            <div>
+              <label className="text-sm text-gray-text mb-1 block">Área Total (ha) *</label>
+              <input
+                type="number"
+                step="0.01"
+                {...register('area_total_ha')}
+                className="input-field"
+                placeholder="0.00"
+              />
+              {errors.area_total_ha && (
+                <p className="text-red-500 text-xs mt-1">{errors.area_total_ha.message}</p>
+              )}
+            </div>
+
+            <div>
+              <label className="text-sm text-gray-text mb-1 block">Cidade</label>
+              <input
+                {...register('cidade')}
+                className="input-field"
+                placeholder="Cidade"
+              />
+            </div>
+
+            <div>
+              <label className="text-sm text-gray-text mb-1 block">Estado</label>
+              <input
+                {...register('estado')}
+                className="input-field"
+                placeholder="UF"
+                maxLength={2}
+              />
+              {errors.estado && (
+                <p className="text-red-500 text-xs mt-1">{errors.estado.message}</p>
+              )}
+            </div>
+
+            <div>
+              <label className="text-sm text-gray-text mb-1 block">Latitude</label>
+              <input
+                type="number"
+                step="0.000001"
+                {...register('latitude')}
+                className="input-field"
+                placeholder="-00.000000"
+              />
+            </div>
+
+            <div>
+              <label className="text-sm text-gray-text mb-1 block">Longitude</label>
+              <input
+                type="number"
+                step="0.000001"
+                {...register('longitude')}
+                className="input-field"
+                placeholder="-00.000000"
+              />
+            </div>
+          </div>
+
+          {/* Actions */}
+          <div className="flex items-center justify-between pt-4 border-t border-gray-200">
+            {isEditing ? (
+              <button
+                type="button"
+                onClick={() => setShowDeleteModal(true)}
+                className="flex items-center gap-2 text-red-500 hover:text-red-600 transition"
+              >
+                <Trash2 className="w-5 h-5" />
+                Excluir
+              </button>
+            ) : (
+              <div />
+            )}
+
+            <div className="flex items-center gap-3">
+              <button
+                type="button"
+                onClick={() => navigate('/propriedades')}
+                className="btn-secondary"
+              >
+                Cancelar
+              </button>
+              <button
+                type="submit"
+                disabled={isSaving}
+                className="btn-primary flex items-center gap-2"
+              >
+                {isSaving ? (
+                  <>
+                    <Loader2 className="w-5 h-5 animate-spin" />
+                    Salvando...
+                  </>
+                ) : (
+                  <>
+                    <Save className="w-5 h-5" />
+                    Salvar
+                  </>
+                )}
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+
+      {/* Delete Modal */}
+      <Modal
+        isOpen={showDeleteModal}
+        onClose={() => setShowDeleteModal(false)}
+        title="Confirmar Exclusão"
+      >
+        <p className="text-gray-text mb-6">
+          Tem certeza que deseja excluir esta propriedade? Esta ação não pode ser desfeita.
+        </p>
+        <div className="flex justify-end gap-3">
+          <button
+            onClick={() => setShowDeleteModal(false)}
+            className="btn-secondary"
+          >
+            Cancelar
+          </button>
+          <button
+            onClick={handleDelete}
+            className="bg-red-500 hover:bg-red-600 text-white font-semibold py-3 px-8 rounded-xl transition"
+          >
+            Excluir
+          </button>
+        </div>
+      </Modal>
+    </div>
+  );
+}
--- a/frontend/src/pages/Propriedades.tsx
+++ b/frontend/src/pages/Propriedades.tsx
@@ -0,0 +1,192 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Plus, Search, MapPin, Building2, Ruler } from 'lucide-react';
+import DataTable from '@/components/DataTable';
+import { api } from '@/hooks/useApi';
+import { Propriedade } from '@/types';
+
+export default function Propriedades() {
+  const navigate = useNavigate();
+  const [propriedades, setPropriedades] = useState<Propriedade[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  useEffect(() => {
+    loadPropriedades();
+  }, []);
+
+  const loadPropriedades = async () => {
+    try {
+      const response = await api.getPropriedades();
+      setPropriedades(response.data);
+    } catch (error) {
+      console.error('Erro ao carregar propriedades:', error);
+      // Mock data
+      setPropriedades([
+        {
+          id: 1,
+          nome: 'Fazenda Santa Maria',
+          empresa_id: 1,
+          codigo_car: 'MT-5107909-F4B8E35DB1',
+          area_total_ha: 1250.5,
+          latitude: -12.5432,
+          longitude: -55.7234,
+          cidade: 'Sinop',
+          estado: 'MT',
+          ativo: true,
+          created_at: '2024-01-15',
+          updated_at: '2024-01-15',
+          empresa: { id: 1, nome: 'AgroBrasil Exportações' } as any,
+        },
+        {
+          id: 2,
+          nome: 'Sítio Esperança',
+          empresa_id: 2,
+          codigo_car: 'GO-5208707-A2C3D45EF6',
+          area_total_ha: 320.8,
+          latitude: -16.6799,
+          longitude: -49.2550,
+          cidade: 'Goiânia',
+          estado: 'GO',
+          ativo: true,
+          created_at: '2024-02-20',
+          updated_at: '2024-02-20',
+          empresa: { id: 2, nome: 'Fazendas União LTDA' } as any,
+        },
+        {
+          id: 3,
+          nome: 'Estância Boa Vista',
+          empresa_id: 1,
+          codigo_car: 'MT-5106752-C7D8E90FA1',
+          area_total_ha: 2100.0,
+          latitude: -13.1234,
+          longitude: -56.4567,
+          cidade: 'Sorriso',
+          estado: 'MT',
+          ativo: true,
+          created_at: '2024-03-10',
+          updated_at: '2024-03-10',
+          empresa: { id: 1, nome: 'AgroBrasil Exportações' } as any,
+        },
+      ]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const filteredPropriedades = propriedades.filter(
+    p =>
+      p.nome.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      p.codigo_car?.includes(searchTerm) ||
+      p.cidade?.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const columns = [
+    {
+      key: 'nome',
+      label: 'Propriedade',
+      render: (prop: Propriedade) => (
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+            <MapPin className="w-5 h-5 text-primary" />
+          </div>
+          <div>
+            <div className="font-medium text-navy">{prop.nome}</div>
+            <div className="text-xs text-gray-muted font-mono">{prop.codigo_car || '-'}</div>
+          </div>
+        </div>
+      ),
+    },
+    {
+      key: 'empresa',
+      label: 'Empresa',
+      render: (prop: Propriedade) => (
+        <div className="flex items-center gap-2 text-gray-text">
+          <Building2 className="w-4 h-4" />
+          {prop.empresa?.nome || '-'}
+        </div>
+      ),
+    },
+    {
+      key: 'localizacao',
+      label: 'Localização',
+      render: (prop: Propriedade) => (
+        <span className="text-gray-text">
+          {prop.cidade}/{prop.estado}
+        </span>
+      ),
+    },
+    {
+      key: 'area_total_ha',
+      label: 'Área Total',
+      render: (prop: Propriedade) => (
+        <div className="flex items-center gap-2">
+          <Ruler className="w-4 h-4 text-gray-muted" />
+          <span className="font-medium text-navy">
+            {prop.area_total_ha.toLocaleString('pt-BR')} ha
+          </span>
+        </div>
+      ),
+    },
+    {
+      key: 'status',
+      label: 'Status',
+      render: (prop: Propriedade) => (
+        <span
+          className={`text-xs font-medium px-2 py-1 rounded-full ${
+            prop.ativo
+              ? 'bg-green-100 text-green-700'
+              : 'bg-gray-100 text-gray-500'
+          }`}
+        >
+          {prop.ativo ? 'Ativa' : 'Inativa'}
+        </span>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-8">
+        <div>
+          <h1 className="text-3xl font-bold text-navy">Propriedades</h1>
+          <p className="text-gray-text text-sm mt-1">
+            Gestão de propriedades rurais
+          </p>
+        </div>
+        <button
+          onClick={() => navigate('/propriedades/nova')}
+          className="btn-primary flex items-center gap-2"
+        >
+          <Plus className="w-5 h-5" />
+          Nova Propriedade
+        </button>
+      </div>
+
+      {/* Search */}
+      <div className="mb-6">
+        <div className="relative max-w-md">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-muted" />
+          <input
+            type="text"
+            placeholder="Buscar por nome, CAR ou cidade..."
+            value={searchTerm}
+            onChange={e => setSearchTerm(e.target.value)}
+            className="input-field pl-10"
+          />
+        </div>
+      </div>
+
+      {/* Table */}
+      <DataTable
+        columns={columns}
+        data={filteredPropriedades}
+        isLoading={isLoading}
+        keyExtractor={prop => prop.id}
+        onRowClick={prop => navigate(`/propriedades/${prop.id}`)}
+        emptyMessage="Nenhuma propriedade encontrada"
+      />
+    </div>
+  );
+}
--- a/frontend/src/pages/Registro.tsx
+++ b/frontend/src/pages/Registro.tsx
@@ -0,0 +1,173 @@
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { useAuth } from '@/hooks/useAuth';
+import { Loader2, AlertCircle } from 'lucide-react';
+
+const registroSchema = z.object({
+  nome: z.string().min(3, 'Nome deve ter no mínimo 3 caracteres'),
+  email: z.string().email('Email inválido'),
+  password: z.string().min(6, 'Senha deve ter no mínimo 6 caracteres'),
+  confirmarSenha: z.string(),
+  empresa_nome: z.string().optional(),
+}).refine(data => data.password === data.confirmarSenha, {
+  message: 'Senhas não conferem',
+  path: ['confirmarSenha'],
+});
+
+type RegistroFormData = z.infer<typeof registroSchema>;
+
+export default function Registro() {
+  const navigate = useNavigate();
+  const { registro } = useAuth();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<RegistroFormData>({
+    resolver: zodResolver(registroSchema),
+  });
+
+  const onSubmit = async (data: RegistroFormData) => {
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await registro({
+        nome: data.nome,
+        email: data.email,
+        password: data.password,
+        empresa_nome: data.empresa_nome,
+      });
+      navigate('/dashboard', { replace: true });
+    } catch (err: unknown) {
+      const error = err as { response?: { data?: { detail?: string } } };
+      setError(error.response?.data?.detail || 'Erro ao criar conta');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-bg flex items-center justify-center p-4">
+      <div className="w-full max-w-md">
+        {/* Logo */}
+        <div className="text-center mb-8">
+          <Link to="/">
+            <img
+              src="/logo-duorigin.jpg"
+              alt="DuoOrigin"
+              className="w-20 h-20 rounded-xl mx-auto mb-4"
+            />
+          </Link>
+          <h1 className="text-3xl font-bold text-navy">
+            Duo<span className="text-primary">Origin</span>
+          </h1>
+          <p className="text-gray-muted mt-1">Criar nova conta</p>
+        </div>
+
+        {/* Registro Card */}
+        <div className="bg-white rounded-2xl p-8 border border-gray-200 shadow-lg">
+          <h2 className="text-xl font-semibold text-navy mb-6">Cadastro</h2>
+
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+            <div>
+              <label className="text-sm text-gray-text mb-1 block">Nome completo</label>
+              <input
+                type="text"
+                {...register('nome')}
+                className="input-field"
+                placeholder="Seu nome"
+              />
+              {errors.nome && (
+                <p className="text-red-500 text-xs mt-1">{errors.nome.message}</p>
+              )}
+            </div>
+
+            <div>
+              <label className="text-sm text-gray-text mb-1 block">Email</label>
+              <input
+                type="email"
+                {...register('email')}
+                className="input-field"
+                placeholder="seu@email.com"
+              />
+              {errors.email && (
+                <p className="text-red-500 text-xs mt-1">{errors.email.message}</p>
+              )}
+            </div>
+
+            <div>
+              <label className="text-sm text-gray-text mb-1 block">Nome da Empresa (opcional)</label>
+              <input
+                type="text"
+                {...register('empresa_nome')}
+                className="input-field"
+                placeholder="Sua empresa"
+              />
+            </div>
+
+            <div>
+              <label className="text-sm text-gray-text mb-1 block">Senha</label>
+              <input
+                type="password"
+                {...register('password')}
+                className="input-field"
+                placeholder="••••••••"
+              />
+              {errors.password && (
+                <p className="text-red-500 text-xs mt-1">{errors.password.message}</p>
+              )}
+            </div>
+
+            <div>
+              <label className="text-sm text-gray-text mb-1 block">Confirmar Senha</label>
+              <input
+                type="password"
+                {...register('confirmarSenha')}
+                className="input-field"
+                placeholder="••••••••"
+              />
+              {errors.confirmarSenha && (
+                <p className="text-red-500 text-xs mt-1">{errors.confirmarSenha.message}</p>
+              )}
+            </div>
+
+            {error && (
+              <div className="bg-red-50 border border-red-200 rounded-lg p-3 flex items-center gap-2 text-red-600 text-sm">
+                <AlertCircle className="w-4 h-4" />
+                {error}
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="btn-primary w-full flex items-center justify-center gap-2"
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="w-5 h-5 animate-spin" />
+                  Criando conta...
+                </>
+              ) : (
+                'Criar conta'
+              )}
+            </button>
+          </form>
+
+          <div className="mt-4 text-center">
+            <Link to="/login" className="text-sm text-primary hover:underline">
+              Já tem conta? Fazer login
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/pages/Usuarios.tsx
+++ b/frontend/src/pages/Usuarios.tsx
@@ -0,0 +1,391 @@
+import { useEffect, useState } from 'react';
+import { Plus, Search, Mail, Shield, Edit, Trash2 } from 'lucide-react';
+import DataTable from '@/components/DataTable';
+import Modal from '@/components/Modal';
+import { api } from '@/hooks/useApi';
+import { User as UserType } from '@/types';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+
+const roleLabels = {
+  admin: { label: 'Admin', color: 'bg-purple-100 text-purple-700' },
+  operador: { label: 'Operador', color: 'bg-blue-100 text-blue-700' },
+  visualizador: { label: 'Visualizador', color: 'bg-gray-100 text-gray-700' },
+};
+
+const userSchema = z.object({
+  nome: z.string().min(3, 'Nome deve ter no mínimo 3 caracteres'),
+  email: z.string().email('Email inválido'),
+  role: z.enum(['admin', 'operador', 'visualizador']),
+  senha: z.string().min(6, 'Senha deve ter no mínimo 6 caracteres').optional(),
+});
+
+type UserFormData = z.infer<typeof userSchema>;
+
+export default function Usuarios() {
+  const [usuarios, setUsuarios] = useState<UserType[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [showModal, setShowModal] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [selectedUser, setSelectedUser] = useState<UserType | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState('');
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<UserFormData>({
+    resolver: zodResolver(userSchema),
+  });
+
+  useEffect(() => {
+    loadUsuarios();
+  }, []);
+
+  const loadUsuarios = async () => {
+    try {
+      const response = await api.getUsuarios();
+      setUsuarios(response.data);
+    } catch (error) {
+      console.error('Erro ao carregar usuários:', error);
+      // Mock data
+      setUsuarios([
+        {
+          id: 1,
+          nome: 'Administrador',
+          email: 'admin@duorigin.com',
+          role: 'admin',
+          ativo: true,
+          created_at: '2024-01-01',
+        },
+        {
+          id: 2,
+          nome: 'Operador Sistema',
+          email: 'operador@duorigin.com',
+          role: 'operador',
+          ativo: true,
+          created_at: '2024-01-15',
+        },
+        {
+          id: 3,
+          nome: 'Visualizador',
+          email: 'viewer@duorigin.com',
+          role: 'visualizador',
+          ativo: true,
+          created_at: '2024-02-01',
+        },
+      ]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const openModal = (user?: UserType) => {
+    if (user) {
+      setSelectedUser(user);
+      reset({
+        nome: user.nome,
+        email: user.email,
+        role: user.role,
+      });
+    } else {
+      setSelectedUser(null);
+      reset({
+        nome: '',
+        email: '',
+        role: 'operador',
+        senha: '',
+      });
+    }
+    setShowModal(true);
+    setError('');
+  };
+
+  const onSubmit = async (data: UserFormData) => {
+    setIsSaving(true);
+    setError('');
+
+    try {
+      if (selectedUser) {
+        await api.updateUsuario(selectedUser.id, data);
+      } else {
+        await api.createUsuario(data);
+      }
+      loadUsuarios();
+      setShowModal(false);
+    } catch (err: unknown) {
+      const error = err as { response?: { data?: { detail?: string } } };
+      setError(error.response?.data?.detail || 'Erro ao salvar usuário');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!selectedUser) return;
+    try {
+      await api.deleteUsuario(selectedUser.id);
+      loadUsuarios();
+    } catch (error) {
+      console.error('Erro ao excluir usuário:', error);
+    }
+    setShowDeleteModal(false);
+    setSelectedUser(null);
+  };
+
+  const filteredUsuarios = usuarios.filter(
+    u =>
+      u.nome.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      u.email.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const columns = [
+    {
+      key: 'nome',
+      label: 'Usuário',
+      render: (user: UserType) => (
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
+            <span className="text-primary font-semibold">
+              {user.nome.charAt(0).toUpperCase()}
+            </span>
+          </div>
+          <div>
+            <div className="font-medium text-navy">{user.nome}</div>
+            <div className="text-xs text-gray-muted flex items-center gap-1">
+              <Mail className="w-3 h-3" />
+              {user.email}
+            </div>
+          </div>
+        </div>
+      ),
+    },
+    {
+      key: 'role',
+      label: 'Perfil',
+      render: (user: UserType) => {
+        const config = roleLabels[user.role];
+        return (
+          <span className={`inline-flex items-center gap-1.5 text-xs font-medium px-2.5 py-1 rounded-full ${config.color}`}>
+            <Shield className="w-3.5 h-3.5" />
+            {config.label}
+          </span>
+        );
+      },
+    },
+    {
+      key: 'created_at',
+      label: 'Criado em',
+      render: (user: UserType) => (
+        <span className="text-gray-text">
+          {new Date(user.created_at).toLocaleDateString('pt-BR')}
+        </span>
+      ),
+    },
+    {
+      key: 'status',
+      label: 'Status',
+      render: (user: UserType) => (
+        <span
+          className={`text-xs font-medium px-2 py-1 rounded-full ${
+            user.ativo
+              ? 'bg-green-100 text-green-700'
+              : 'bg-gray-100 text-gray-500'
+          }`}
+        >
+          {user.ativo ? 'Ativo' : 'Inativo'}
+        </span>
+      ),
+    },
+    {
+      key: 'acoes',
+      label: '',
+      render: (user: UserType) => (
+        <div className="flex items-center gap-1">
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              openModal(user);
+            }}
+            className="p-2 hover:bg-gray-100 rounded-lg transition"
+            title="Editar"
+          >
+            <Edit className="w-4 h-4 text-gray-muted" />
+          </button>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              setSelectedUser(user);
+              setShowDeleteModal(true);
+            }}
+            className="p-2 hover:bg-red-50 rounded-lg transition"
+            title="Excluir"
+          >
+            <Trash2 className="w-4 h-4 text-red-500" />
+          </button>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-8">
+        <div>
+          <h1 className="text-3xl font-bold text-navy">Usuários</h1>
+          <p className="text-gray-text text-sm mt-1">
+            Gestão de usuários do sistema
+          </p>
+        </div>
+        <button
+          onClick={() => openModal()}
+          className="btn-primary flex items-center gap-2"
+        >
+          <Plus className="w-5 h-5" />
+          Novo Usuário
+        </button>
+      </div>
+
+      {/* Search */}
+      <div className="mb-6">
+        <div className="relative max-w-md">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-muted" />
+          <input
+            type="text"
+            placeholder="Buscar por nome ou email..."
+            value={searchTerm}
+            onChange={e => setSearchTerm(e.target.value)}
+            className="input-field pl-10"
+          />
+        </div>
+      </div>
+
+      {/* Table */}
+      <DataTable
+        columns={columns}
+        data={filteredUsuarios}
+        isLoading={isLoading}
+        keyExtractor={user => user.id}
+        emptyMessage="Nenhum usuário encontrado"
+      />
+
+      {/* User Modal */}
+      <Modal
+        isOpen={showModal}
+        onClose={() => setShowModal(false)}
+        title={selectedUser ? 'Editar Usuário' : 'Novo Usuário'}
+      >
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+          {error && (
+            <div className="bg-red-50 border border-red-200 rounded-lg p-3 text-red-600 text-sm">
+              {error}
+            </div>
+          )}
+
+          <div>
+            <label className="text-sm text-gray-text mb-1 block">Nome *</label>
+            <input
+              {...register('nome')}
+              className="input-field"
+              placeholder="Nome completo"
+            />
+            {errors.nome && (
+              <p className="text-red-500 text-xs mt-1">{errors.nome.message}</p>
+            )}
+          </div>
+
+          <div>
+            <label className="text-sm text-gray-text mb-1 block">Email *</label>
+            <input
+              type="email"
+              {...register('email')}
+              className="input-field"
+              placeholder="usuario@email.com"
+            />
+            {errors.email && (
+              <p className="text-red-500 text-xs mt-1">{errors.email.message}</p>
+            )}
+          </div>
+
+          <div>
+            <label className="text-sm text-gray-text mb-1 block">Perfil *</label>
+            <select {...register('role')} className="input-field">
+              <option value="admin">Admin</option>
+              <option value="operador">Operador</option>
+              <option value="visualizador">Visualizador</option>
+            </select>
+          </div>
+
+          {!selectedUser && (
+            <div>
+              <label className="text-sm text-gray-text mb-1 block">Senha *</label>
+              <input
+                type="password"
+                {...register('senha')}
+                className="input-field"
+                placeholder="••••••••"
+              />
+              {errors.senha && (
+                <p className="text-red-500 text-xs mt-1">{errors.senha.message}</p>
+              )}
+            </div>
+          )}
+
+          <div className="flex justify-end gap-3 pt-4">
+            <button
+              type="button"
+              onClick={() => setShowModal(false)}
+              className="btn-secondary"
+            >
+              Cancelar
+            </button>
+            <button
+              type="submit"
+              disabled={isSaving}
+              className="btn-primary"
+            >
+              {isSaving ? 'Salvando...' : 'Salvar'}
+            </button>
+          </div>
+        </form>
+      </Modal>
+
+      {/* Delete Modal */}
+      <Modal
+        isOpen={showDeleteModal}
+        onClose={() => {
+          setShowDeleteModal(false);
+          setSelectedUser(null);
+        }}
+        title="Confirmar Exclusão"
+      >
+        <p className="text-gray-text mb-6">
+          Tem certeza que deseja excluir o usuário <strong>{selectedUser?.nome}</strong>?
+          Esta ação não pode ser desfeita.
+        </p>
+        <div className="flex justify-end gap-3">
+          <button
+            onClick={() => {
+              setShowDeleteModal(false);
+              setSelectedUser(null);
+            }}
+            className="btn-secondary"
+          >
+            Cancelar
+          </button>
+          <button
+            onClick={handleDelete}
+            className="bg-red-500 hover:bg-red-600 text-white font-semibold py-3 px-8 rounded-xl transition"
+          >
+            Excluir
+          </button>
+        </div>
+      </Modal>
+    </div>
+  );
+}
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -0,0 +1,99 @@
+export interface User {
+  id: number;
+  nome: string;
+  email: string;
+  role: 'admin' | 'operador' | 'visualizador';
+  empresa_id?: number;
+  ativo: boolean;
+  created_at: string;
+}
+
+export interface AuthResponse {
+  access_token: string;
+  token_type: string;
+  user: User;
+}
+
+export interface Empresa {
+  id: number;
+  nome: string;
+  cnpj: string;
+  email?: string;
+  telefone?: string;
+  endereco?: string;
+  cidade?: string;
+  estado?: string;
+  cep?: string;
+  eu_operator_id?: string;
+  ativo: boolean;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface Propriedade {
+  id: number;
+  nome: string;
+  empresa_id: number;
+  codigo_car?: string;
+  area_total_ha: number;
+  latitude?: number;
+  longitude?: number;
+  cidade?: string;
+  estado?: string;
+  geojson?: object;
+  ativo: boolean;
+  created_at: string;
+  updated_at: string;
+  empresa?: Empresa;
+}
+
+export interface Avaliacao {
+  id: number;
+  propriedade_id: number;
+  data_avaliacao: string;
+  status: 'pendente' | 'em_analise' | 'aprovada' | 'reprovada';
+  risco_desmatamento: 'baixo' | 'medio' | 'alto' | 'critico';
+  score_risco: number;
+  observacoes?: string;
+  dds_gerada: boolean;
+  dds_codigo?: string;
+  avaliador_id?: number;
+  created_at: string;
+  updated_at: string;
+  propriedade?: Propriedade;
+}
+
+export interface Documento {
+  id: number;
+  nome: string;
+  tipo: string;
+  tamanho: number;
+  url: string;
+  propriedade_id?: number;
+  avaliacao_id?: number;
+  empresa_id?: number;
+  uploaded_by: number;
+  created_at: string;
+}
+
+export interface DashboardStats {
+  total_empresas: number;
+  total_propriedades: number;
+  total_avaliacoes: number;
+  avaliacoes_aprovadas: number;
+  avaliacoes_pendentes: number;
+  dds_geradas: number;
+  avaliacoes_por_mes: { mes: string; total: number }[];
+}
+
+export interface LoginCredentials {
+  email: string;
+  password: string;
+}
+
+export interface RegistroData {
+  nome: string;
+  email: string;
+  password: string;
+  empresa_nome?: string;
+}
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,28 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: '#1A7A4C',
+          hover: '#15634D',
+        },
+        navy: '#2D3142',
+        gray: {
+          custom: '#C8C9CB',
+          text: '#5A5D6B',
+          muted: '#8E9196',
+          bg: '#F5F6F8',
+        }
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
+      },
+    },
+  },
+  plugins: [],
+}
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Paths */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"]
+}
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/frontend/tsconfig.tsbuildinfo
+++ b/frontend/tsconfig.tsbuildinfo
@@ -0,0 +1 @@
+{"root":["./src/App.tsx","./src/main.tsx","./src/api/client.ts","./src/components/DDSModal.tsx","./src/components/DashboardLayout.tsx","./src/components/DataTable.tsx","./src/components/Footer.tsx","./src/components/Modal.tsx","./src/components/Navbar.tsx","./src/components/ProtectedRoute.tsx","./src/components/Sidebar.tsx","./src/components/StatsCard.tsx","./src/contexts/AuthContext.tsx","./src/hooks/useApi.ts","./src/hooks/useAuth.ts","./src/pages/AvaliacaoDetail.tsx","./src/pages/Avaliacoes.tsx","./src/pages/Dashboard.tsx","./src/pages/Documentos.tsx","./src/pages/EmpresaForm.tsx","./src/pages/Empresas.tsx","./src/pages/Landing.tsx","./src/pages/Login.tsx","./src/pages/PropriedadeForm.tsx","./src/pages/Propriedades.tsx","./src/pages/Registro.tsx","./src/pages/Usuarios.tsx","./src/types/index.ts"],"version":"5.9.3"}
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    port: 3000,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8100',
+        changeOrigin: true,
+      },
+    },
+  },
+})
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
				`@@ -0,0 +1 @@`
				{"root":["./src/App.tsx","./src/main.tsx","./src/api/client.ts","./src/components/DDSModal.tsx","./src/components/DashboardLayout.tsx","./src/components/DataTable.tsx","./src/components/Footer.tsx","./src/components/Modal.tsx","./src/components/Navbar.tsx","./src/components/ProtectedRoute.tsx","./src/components/Sidebar.tsx","./src/components/StatsCard.tsx","./src/contexts/AuthContext.tsx","./src/hooks/useApi.ts","./src/hooks/useAuth.ts","./src/pages/AvaliacaoDetail.tsx","./src/pages/Avaliacoes.tsx","./src/pages/Dashboard.tsx","./src/pages/Documentos.tsx","./src/pages/EmpresaForm.tsx","./src/pages/Empresas.tsx","./src/pages/Landing.tsx","./src/pages/Login.tsx","./src/pages/PropriedadeForm.tsx","./src/pages/Propriedades.tsx","./src/pages/Registro.tsx","./src/pages/Usuarios.tsx","./src/types/index.ts"],"version":"5.9.3"}