Base Principal del Proyecto

2025-11-18 13:09:42 -03:00
commit be30b3ca18
24 changed files with 2018 additions and 0 deletions
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -0,0 +1,18 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+# Copiar package files
+COPY package*.json ./
+
+# Instalar dependencias
+RUN npm install
+
+# Copiar código
+COPY . .
+
+# Exponer puerto
+EXPOSE 5173
+
+# Comando por defecto
+CMD ["npm", "run", "dev", "--", "--host"]
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Checklist Inteligente - Sistema de Inspecciones</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "checklist-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.1",
+    "axios": "^1.6.5",
+    "react-signature-canvas": "^1.0.6",
+    "lucide-react": "^0.303.0",
+    "clsx": "^2.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1",
+    "vite": "^5.0.11"
+  }
+}
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -0,0 +1,363 @@
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
+import { useState, useEffect } from 'react'
+
+function App() {
+  const [user, setUser] = useState(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    // Verificar si hay token guardado
+    const token = localStorage.getItem('token')
+    const userData = localStorage.getItem('user')
+    
+    if (token && userData) {
+      setUser(JSON.parse(userData))
+    }
+    setLoading(false)
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-100">
+        <div className="text-xl">Cargando...</div>
+      </div>
+    )
+  }
+
+  return (
+    <Router>
+      <div className="min-h-screen bg-gray-50">
+        {!user ? (
+          <LoginPage setUser={setUser} />
+        ) : (
+          <DashboardPage user={user} setUser={setUser} />
+        )}
+      </div>
+    </Router>
+  )
+}
+
+// Componente de Login
+function LoginPage({ setUser }) {
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const handleLogin = async (e) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+
+    try {
+      const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000'
+      const response = await fetch(`${API_URL}/api/auth/login`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ username, password }),
+      })
+
+      const data = await response.json()
+
+      if (!response.ok) {
+        throw new Error(data.detail || 'Error al iniciar sesión')
+      }
+
+      // Guardar token y usuario
+      localStorage.setItem('token', data.access_token)
+      localStorage.setItem('user', JSON.stringify(data.user))
+      setUser(data.user)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-500 to-blue-700 px-4">
+      <div className="max-w-md w-full bg-white rounded-lg shadow-xl p-8">
+        <div className="text-center mb-8">
+          <h1 className="text-3xl font-bold text-gray-900">Checklist Inteligente</h1>
+          <p className="text-gray-600 mt-2">Sistema de Inspecciones</p>
+        </div>
+
+        <form onSubmit={handleLogin} className="space-y-6">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Usuario
+            </label>
+            <input
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="admin"
+              required
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Contraseña
+            </label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="••••••••"
+              required
+            />
+          </div>
+
+          {error && (
+            <div className="bg-red-50 text-red-600 px-4 py-3 rounded-lg text-sm">
+              {error}
+            </div>
+          )}
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {loading ? 'Iniciando sesión...' : 'Iniciar Sesión'}
+          </button>
+        </form>
+
+        <div className="mt-8 pt-6 border-t border-gray-200">
+          <p className="text-sm text-gray-600 text-center">Usuarios de prueba:</p>
+          <div className="mt-2 space-y-1 text-xs text-gray-500 text-center">
+            <p><strong>Admin:</strong> admin / admin123</p>
+            <p><strong>Mecánico:</strong> mecanico1 / mecanico123</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Componente Dashboard
+function DashboardPage({ user, setUser }) {
+  const [checklists, setChecklists] = useState([])
+  const [inspections, setInspections] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [activeTab, setActiveTab] = useState('checklists')
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  const loadData = async () => {
+    try {
+      const token = localStorage.getItem('token')
+      const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000'
+
+      // Cargar checklists
+      const checklistsRes = await fetch(`${API_URL}/api/checklists?active_only=true`, {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+        },
+      })
+      const checklistsData = await checklistsRes.json()
+      setChecklists(checklistsData)
+
+      // Cargar inspecciones
+      const inspectionsRes = await fetch(`${API_URL}/api/inspections?limit=10`, {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+        },
+      })
+      const inspectionsData = await inspectionsRes.json()
+      setInspections(inspectionsData)
+
+    } catch (error) {
+      console.error('Error loading data:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleLogout = () => {
+    localStorage.removeItem('token')
+    localStorage.removeItem('user')
+    setUser(null)
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-100">
+      {/* Header */}
+      <header className="bg-white shadow">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <div className="flex justify-between items-center">
+            <div>
+              <h1 className="text-2xl font-bold text-gray-900">Checklist Inteligente</h1>
+              <p className="text-sm text-gray-600">
+                Bienvenido, {user.full_name || user.username} ({user.role === 'admin' ? 'Administrador' : 'Mecánico'})
+              </p>
+            </div>
+            <button
+              onClick={handleLogout}
+              className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition"
+            >
+              Cerrar Sesión
+            </button>
+          </div>
+        </div>
+      </header>
+
+      {/* Tabs */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-6">
+        <div className="bg-white rounded-lg shadow overflow-hidden">
+          <div className="border-b border-gray-200">
+            <nav className="flex -mb-px">
+              <button
+                onClick={() => setActiveTab('checklists')}
+                className={`px-6 py-3 text-sm font-medium border-b-2 ${
+                  activeTab === 'checklists'
+                    ? 'border-blue-500 text-blue-600'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                }`}
+              >
+                Checklists
+              </button>
+              <button
+                onClick={() => setActiveTab('inspections')}
+                className={`px-6 py-3 text-sm font-medium border-b-2 ${
+                  activeTab === 'inspections'
+                    : 'border-blue-500 text-blue-600'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                }`}
+              >
+                Inspecciones
+              </button>
+            </nav>
+          </div>
+
+          <div className="p-6">
+            {loading ? (
+              <div className="text-center py-12">
+                <div className="text-gray-500">Cargando datos...</div>
+              </div>
+            ) : activeTab === 'checklists' ? (
+              <ChecklistsTab checklists={checklists} user={user} />
+            ) : (
+              <InspectionsTab inspections={inspections} user={user} />
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Info Card */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-6 mb-6">
+        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+          <h3 className="text-sm font-medium text-blue-800 mb-2">📘 Información del MVP</h3>
+          <p className="text-sm text-blue-700">
+            Este es el MVP funcional del sistema de checklists inteligentes. 
+            El frontend completo con todas las funcionalidades se encuentra en desarrollo. 
+            Puedes probar la API completa en: <a href="http://localhost:8000/docs" target="_blank" className="underline font-medium">http://localhost:8000/docs</a>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function ChecklistsTab({ checklists, user }) {
+  if (checklists.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-gray-500">No hay checklists activos</p>
+        <p className="text-sm text-gray-400 mt-2">Ejecuta ./init-data.sh para crear datos de ejemplo</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      {checklists.map((checklist) => (
+        <div key={checklist.id} className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
+          <div className="flex justify-between items-start">
+            <div>
+              <h3 className="text-lg font-semibold text-gray-900">{checklist.name}</h3>
+              <p className="text-sm text-gray-600 mt-1">{checklist.description}</p>
+              <div className="flex gap-4 mt-3 text-sm">
+                <span className="text-gray-500">
+                  Puntuación máxima: <strong>{checklist.max_score}</strong>
+                </span>
+                <span className="text-gray-500">
+                  Modo IA: <strong className="capitalize">{checklist.ai_mode}</strong>
+                </span>
+              </div>
+            </div>
+            {user.role === 'mechanic' && (
+              <button className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">
+                Nueva Inspección
+              </button>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function InspectionsTab({ inspections, user }) {
+  if (inspections.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-gray-500">No hay inspecciones registradas</p>
+        <p className="text-sm text-gray-400 mt-2">Crea tu primera inspección</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      {inspections.map((inspection) => (
+        <div key={inspection.id} className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
+          <div className="flex justify-between items-start">
+            <div>
+              <div className="flex items-center gap-3">
+                <h3 className="text-lg font-semibold text-gray-900">
+                  {inspection.vehicle_plate}
+                </h3>
+                <span className={`px-2 py-1 text-xs font-medium rounded-full ${
+                  inspection.status === 'completed'
+                    ? 'bg-green-100 text-green-800'
+                    : 'bg-yellow-100 text-yellow-800'
+                }`}>
+                  {inspection.status === 'completed' ? 'Completada' : 'Borrador'}
+                </span>
+              </div>
+              <p className="text-sm text-gray-600 mt-1">
+                {inspection.vehicle_brand} {inspection.vehicle_model} - {inspection.vehicle_km} km
+              </p>
+              <div className="flex gap-4 mt-3 text-sm">
+                <span className="text-gray-500">
+                  OR: <strong>{inspection.or_number || 'N/A'}</strong>
+                </span>
+                <span className="text-gray-500">
+                  Score: <strong>{inspection.score}/{inspection.max_score}</strong> ({inspection.percentage.toFixed(1)}%)
+                </span>
+                {inspection.flagged_items_count > 0 && (
+                  <span className="text-red-600">
+                    ⚠️ <strong>{inspection.flagged_items_count}</strong> elementos señalados
+                  </span>
+                )}
+              </div>
+            </div>
+            <button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
+              Ver Detalle
+            </button>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default App
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: true,
+    port: 5173,
+    watch: {
+      usePolling: true
+    }
+  }
+})