V1 de frontend funcional

2025-09-10 20:01:02 +00:00
parent ccd4ea38ad
commit 46c07568bc
30 changed files with 3202 additions and 1785 deletions
--- a/backend/app/core/pycache/config.cpython-312.pyc
+++ b/backend/app/core/pycache/config.cpython-312.pyc
--- a/backend/app/core/config.py
+++ b/backend/app/core/config.py
@@ -18,6 +18,7 @@ class Settings(BaseSettings):
    # Configuración de CORS para React frontend
    ALLOWED_ORIGINS: List[str] = [
        "http://localhost:3000",  # React dev server
+        "http://localhost:5173",
        "http://frontend:3000",   # Docker container name
    ]
    
--- a/frontend/components.json
+++ b/frontend/components.json
@@ -1,6 +1,6 @@
 {
  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "default",
+  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
@@ -17,5 +17,6 @@
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
-  }
+  },
+  "registries": {}
 }
--- a/frontend/dockerfile
+++ b/frontend/dockerfile
@@ -1,18 +0,0 @@
-FROM node:22-alpine
-
-WORKDIR /app
-
-# Copiar package files primero (para cache optimization)
-COPY package*.json ./
-
-# Instalar dependencias
-RUN npm ci
-
-# Copiar el resto del código
-COPY . .
-
-# Exponer el puerto
-EXPOSE 5173
-
-# Comando para desarrollo (con hot reload)
-CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,17 +10,24 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.7",
    "@radix-ui/react-slot": "^1.2.3",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
-    "lucide-react": "^0.542.0",
+    "lucide-react": "^0.543.0",
    "react": "^19.1.1",
    "react-dom": "^19.1.1",
-    "tailwind-merge": "^3.3.1"
+    "react-dropzone": "^14.3.8",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss-animate": "^1.0.7",
+    "zustand": "^5.0.8"
  },
  "devDependencies": {
    "@eslint/js": "^9.33.0",
-    "@types/node": "^24.3.0",
+    "@tailwindcss/postcss": "^4.1.13",
+    "@types/node": "^24.3.1",
    "@types/react": "^19.1.10",
    "@types/react-dom": "^19.1.7",
    "@vitejs/plugin-react": "^5.0.0",
@@ -30,8 +37,7 @@
    "eslint-plugin-react-refresh": "^0.4.20",
    "globals": "^16.3.0",
    "postcss": "^8.5.6",
-    "tailwindcss": "^3.4.0",
-    "tailwindcss-animate": "^1.0.7",
+    "tailwindcss": "^4.1.13",
    "typescript": "~5.8.3",
    "typescript-eslint": "^8.39.1",
    "vite": "^7.1.2"
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -1,6 +1,6 @@
 export default {
  plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
 }
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,33 +1,8 @@
-import { Button } from "@/components/ui/button"
+import { Layout } from './components/Layout'
+import './App.css'

 function App() {
-  return (
-    <div className="min-h-screen bg-background flex items-center justify-center">
-      <div className="max-w-md mx-auto p-6 space-y-4">
-        <h1 className="text-3xl font-bold text-center">
-          ¡Shadcn UI ! 
-        </h1>
-        
-        <div className="space-y-2">
-          <Button className="w-full">
-            Botón Principal
-          </Button>
-          
-          <Button variant="secondary" className="w-full">
-            Botón Secundario
-          </Button>
-          
-          <Button variant="destructive" className="w-full">
-            Botón de Eliminación
-          </Button>
-          
-          <Button variant="outline" className="w-full">
-            Botón con Borde
-          </Button>
-        </div>
-      </div>
-    </div>
-  )
+  return <Layout />
 }

 export default App
--- a/frontend/src/components/Dashboard.tsx
+++ b/frontend/src/components/Dashboard.tsx
@@ -0,0 +1,345 @@
+import { useEffect, useState } from 'react'
+import { useFileStore } from '@/stores/fileStore'
+import { api } from '@/services/api'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { 
+  Table, 
+  TableBody, 
+  TableCell, 
+  TableHead, 
+  TableHeader, 
+  TableRow 
+} from '@/components/ui/table'
+import { Checkbox } from '@/components/ui/checkbox'
+import { FileUpload } from './FileUpload'
+import { DeleteConfirmDialog } from './DeleteConfirmDialog'
+import { 
+  Upload, 
+  Download, 
+  Trash2, 
+  Search, 
+  FileText,
+  Eye,
+  MessageSquare
+} from 'lucide-react'
+
+export function Dashboard() {
+  const {
+    selectedTema,
+    files,
+    setFiles,
+    loading,
+    setLoading,
+    selectedFiles,
+    toggleFileSelection,
+    selectAllFiles,
+    clearSelection
+  } = useFileStore()
+
+  const [searchTerm, setSearchTerm] = useState('')
+  const [uploadDialogOpen, setUploadDialogOpen] = useState(false)
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
+  const [fileToDelete, setFileToDelete] = useState<string | null>(null)
+  const [deleting, setDeleting] = useState(false)
+  const [downloading, setDownloading] = useState(false)
+
+  useEffect(() => {
+    loadFiles()
+  }, [selectedTema])
+
+  const loadFiles = async () => {
+    try {
+      setLoading(true)
+      const response = await api.getFiles(selectedTema || undefined)
+      setFiles(response.files)
+    } catch (error) {
+      console.error('Error loading files:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleUploadSuccess = () => {
+    loadFiles()
+  }
+
+  // Eliminar archivo individual
+  const handleDeleteSingle = async (filename: string) => {
+    setFileToDelete(filename)
+    setDeleteDialogOpen(true)
+  }
+
+  // Eliminar archivos seleccionados
+  const handleDeleteMultiple = () => {
+    if (selectedFiles.size === 0) return
+    setFileToDelete(null)
+    setDeleteDialogOpen(true)
+  }
+
+  // Confirmar eliminación
+  const confirmDelete = async () => {
+    if (!fileToDelete && selectedFiles.size === 0) return
+
+    setDeleting(true)
+    try {
+      if (fileToDelete) {
+        // Eliminar archivo individual
+        await api.deleteFile(fileToDelete, selectedTema || undefined)
+      } else {
+        // Eliminar archivos seleccionados
+        const filesToDelete = Array.from(selectedFiles)
+        await api.deleteFiles(filesToDelete, selectedTema || undefined)
+        clearSelection()
+      }
+
+      // Recargar archivos
+      await loadFiles()
+      setDeleteDialogOpen(false)
+      setFileToDelete(null)
+    } catch (error) {
+      console.error('Error deleting files:', error)
+    } finally {
+      setDeleting(false)
+    }
+  }
+
+  // Descargar archivo individual
+  const handleDownloadSingle = async (filename: string) => {
+    try {
+      setDownloading(true)
+      await api.downloadFile(filename, selectedTema || undefined)
+    } catch (error) {
+      console.error('Error downloading file:', error)
+    } finally {
+      setDownloading(false)
+    }
+  }
+
+  // Descargar archivos seleccionados
+  const handleDownloadMultiple = async () => {
+    if (selectedFiles.size === 0) return
+    
+    try {
+      setDownloading(true)
+      const filesToDownload = Array.from(selectedFiles)
+      const zipName = selectedTema ? `${selectedTema}_archivos` : 'archivos_seleccionados'
+      await api.downloadMultipleFiles(filesToDownload, selectedTema || undefined, zipName)
+    } catch (error) {
+      console.error('Error downloading files:', error)
+    } finally {
+      setDownloading(false)
+    }
+  }
+
+  const filteredFiles = files.filter(file =>
+    file.name.toLowerCase().includes(searchTerm.toLowerCase())
+  )
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes === 0) return '0 Bytes'
+    const k = 1024
+    const sizes = ['Bytes', 'KB', 'MB', 'GB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+  }
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('es-ES', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    })
+  }
+
+  // Preparar datos para el modal de confirmación
+  const getDeleteDialogProps = () => {
+    if (fileToDelete) {
+      return {
+        title: 'Eliminar archivo',
+        description: `¿Estás seguro de que quieres eliminar "${fileToDelete}"? Esta acción no se puede deshacer.`,
+        fileList: [fileToDelete]
+      }
+    } else {
+      const filesToDelete = Array.from(selectedFiles)
+      return {
+        title: `Eliminar ${filesToDelete.length} archivos`,
+        description: `¿Estás seguro de que quieres eliminar ${filesToDelete.length} archivo${filesToDelete.length !== 1 ? 's' : ''}? Esta acción no se puede deshacer.`,
+        fileList: filesToDelete
+      }
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-full bg-white">
+      {/* Header */}
+      <div className="border-b border-gray-200 p-6">
+        <div className="flex items-center justify-between mb-4">
+          <div>
+            <h2 className="text-2xl font-semibold text-gray-900">
+              {selectedTema ? `Tema: ${selectedTema}` : 'Todos los archivos'}
+            </h2>
+            <p className="text-sm text-gray-600 mt-1">
+              {filteredFiles.length} archivo{filteredFiles.length !== 1 ? 's' : ''}
+            </p>
+          </div>
+          
+          <div className="flex gap-2">
+            <Button onClick={() => setUploadDialogOpen(true)}>
+              <Upload className="w-4 h-4 mr-2" />
+              Subir archivo
+            </Button>
+          </div>
+        </div>
+
+        {/* Search and Actions */}
+        <div className="flex items-center gap-4">
+          <div className="relative flex-1 max-w-sm">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+            <Input
+              placeholder="Buscar archivos..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="pl-10"
+            />
+          </div>
+
+          {selectedFiles.size > 0 && (
+            <div className="flex gap-2">
+              <Button 
+                variant="outline" 
+                size="sm"
+                onClick={handleDownloadMultiple}
+                disabled={downloading}
+              >
+                <Download className="w-4 h-4 mr-2" />
+                {downloading ? 'Descargando...' : `Descargar (${selectedFiles.size})`}
+              </Button>
+              <Button 
+                variant="outline" 
+                size="sm"
+                onClick={handleDeleteMultiple}
+              >
+                <Trash2 className="w-4 h-4 mr-2" />
+                Eliminar ({selectedFiles.size})
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className="flex-1 overflow-auto">
+        {loading ? (
+          <div className="flex items-center justify-center h-64">
+            <p className="text-gray-500">Cargando archivos...</p>
+          </div>
+        ) : filteredFiles.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-64">
+            <FileText className="w-12 h-12 text-gray-400 mb-4" />
+            <p className="text-gray-500">
+              {searchTerm ? 'No se encontraron archivos' : 'No hay archivos en este tema'}
+            </p>
+          </div>
+        ) : (
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-12">
+                  <Checkbox
+                    checked={selectedFiles.size === filteredFiles.length && filteredFiles.length > 0}
+                    onCheckedChange={(checked) => {
+                      if (checked) {
+                        selectAllFiles()
+                      } else {
+                        clearSelection()
+                      }
+                    }}
+                  />
+                </TableHead>
+                <TableHead>Nombre</TableHead>
+                <TableHead>Tamaño</TableHead>
+                <TableHead>Fecha</TableHead>
+                <TableHead>Tema</TableHead>
+                <TableHead className="w-32">Acciones</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredFiles.map((file) => (
+                <TableRow key={file.full_path}>
+                  <TableCell>
+                    <Checkbox
+                      checked={selectedFiles.has(file.name)}
+                      onCheckedChange={() => toggleFileSelection(file.name)}
+                    />
+                  </TableCell>
+                  <TableCell className="font-medium">{file.name}</TableCell>
+                  <TableCell>{formatFileSize(file.size)}</TableCell>
+                  <TableCell>{formatDate(file.last_modified)}</TableCell>
+                  <TableCell>
+                    <span className="px-2 py-1 bg-gray-100 rounded-md text-sm">
+                      {file.tema || 'General'}
+                    </span>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex gap-1">
+                      <Button 
+                        variant="ghost" 
+                        size="sm"
+                        onClick={() => handleDownloadSingle(file.name)}
+                        disabled={downloading}
+                        title="Descargar archivo"
+                      >
+                        <Download className="w-4 h-4" />
+                      </Button>
+                      <Button 
+                        variant="ghost" 
+                        size="sm"
+                        title="Ver chunks"
+                      >
+                        <Eye className="w-4 h-4" />
+                      </Button>
+                      <Button 
+                        variant="ghost" 
+                        size="sm"
+                        title="Generar preguntas"
+                      >
+                        <MessageSquare className="w-4 h-4" />
+                      </Button>
+                      <Button 
+                        variant="ghost" 
+                        size="sm"
+                        onClick={() => handleDeleteSingle(file.name)}
+                        title="Eliminar archivo"
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </div>
+
+      {/* Upload Dialog */}
+      <FileUpload 
+        open={uploadDialogOpen} 
+        onOpenChange={setUploadDialogOpen}
+        onSuccess={handleUploadSuccess}
+      />
+
+      {/* Delete Confirmation Dialog */}
+      <DeleteConfirmDialog
+        open={deleteDialogOpen}
+        onOpenChange={setDeleteDialogOpen}
+        onConfirm={confirmDelete}
+        loading={deleting}
+        {...getDeleteDialogProps()}
+      />
+    </div>
+  )
+}
--- a/frontend/src/components/DeleteConfirmDialog.tsx
+++ b/frontend/src/components/DeleteConfirmDialog.tsx
@@ -0,0 +1,75 @@
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Trash2, AlertTriangle } from 'lucide-react'
+
+interface DeleteConfirmDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onConfirm: () => void
+  title: string
+  description: string
+  fileList?: string[]
+  loading?: boolean
+}
+
+export function DeleteConfirmDialog({
+  open,
+  onOpenChange,
+  onConfirm,
+  title,
+  description,
+  fileList,
+  loading = false
+}: DeleteConfirmDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <div className="flex items-center gap-2">
+            <AlertTriangle className="h-5 w-5 text-red-500" />
+            <DialogTitle>{title}</DialogTitle>
+          </div>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+
+        {fileList && fileList.length > 0 && (
+          <div className="max-h-40 overflow-y-auto bg-gray-50 rounded p-3">
+            <p className="text-sm font-medium mb-2">Archivos a eliminar:</p>
+            <ul className="text-sm space-y-1">
+              {fileList.map((filename, index) => (
+                <li key={index} className="flex items-center gap-2">
+                  <Trash2 className="h-3 w-3 text-gray-400" />
+                  {filename}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={loading}
+          >
+            Cancelar
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={onConfirm}
+            disabled={loading}
+          >
+            {loading ? 'Eliminando...' : 'Eliminar'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
--- a/frontend/src/components/FileUpload.tsx
+++ b/frontend/src/components/FileUpload.tsx
@@ -0,0 +1,178 @@
+import { useCallback, useState } from 'react'
+import { useDropzone } from 'react-dropzone'
+import { useFileStore } from '@/stores/fileStore'
+import { api } from '@/services/api'
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Upload, X, FileText } from 'lucide-react'
+
+interface FileUploadProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onSuccess?: () => void
+}
+
+export function FileUpload({ open, onOpenChange, onSuccess }: FileUploadProps) {
+  const { selectedTema } = useFileStore()
+  const [files, setFiles] = useState<File[]>([])
+  const [tema, setTema] = useState(selectedTema || '')
+  const [uploading, setUploading] = useState(false)
+
+  const onDrop = useCallback((acceptedFiles: File[]) => {
+    setFiles(prev => [...prev, ...acceptedFiles])
+  }, [])
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: {
+      'application/pdf': ['.pdf'],
+      'application/msword': ['.doc'],
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'],
+      'application/vnd.ms-excel': ['.xls'],
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],
+      'application/vnd.ms-powerpoint': ['.ppt'],
+      'application/vnd.openxmlformats-officedocument.presentationml.presentation': ['.pptx'],
+      'text/plain': ['.txt'],
+      'text/csv': ['.csv']
+    },
+    multiple: true
+  })
+
+  const removeFile = (index: number) => {
+    setFiles(files.filter((_, i) => i !== index))
+  }
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes === 0) return '0 Bytes'
+    const k = 1024
+    const sizes = ['Bytes', 'KB', 'MB', 'GB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+  }
+
+  const handleUpload = async () => {
+    if (files.length === 0) return
+
+    setUploading(true)
+    try {
+      for (const file of files) {
+        await api.uploadFile(file, tema || undefined)
+      }
+      
+      // Limpiar y cerrar
+      setFiles([])
+      setTema('')
+      onOpenChange(false)
+      
+      // Aquí deberías recargar la lista de archivos
+      onSuccess?.()
+      
+      // Puedes agregar una función en el store para esto
+      
+    } catch (error) {
+      console.error('Error uploading files:', error)
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Subir archivos</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* Selector de tema */}
+          <div>
+            <Label htmlFor="tema">Tema</Label>
+            <Input
+              id="tema"
+              value={tema}
+              onChange={(e) => setTema(e.target.value)}
+              placeholder="Ej: riesgos, normativa, pyme..."
+              required
+            />
+            {tema.trim() === '' && (
+            <p className="text-sm text-red-500 mt-1">El tema es obligatorio</p>
+        )} 
+          </div>
+
+          {/* Drag & Drop Zone */}
+          <div
+            {...getRootProps()}
+            className={`border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors ${
+              isDragActive
+                ? 'border-blue-400 bg-blue-50'
+                : 'border-gray-300 hover:border-gray-400'
+            }`}
+          >
+            <input {...getInputProps()} />
+            <Upload className="mx-auto h-12 w-12 text-gray-400 mb-4" />
+            {isDragActive ? (
+              <p>Suelta los archivos aquí...</p>
+            ) : (
+              <div>
+                <p className="text-gray-600">
+                  Arrastra archivos aquí o{' '}
+                  <span className="text-blue-600 font-medium">selecciona archivos</span>
+                </p>
+                <p className="text-sm text-gray-500 mt-1">
+                  PDF, Word, Excel, PowerPoint, TXT, CSV
+                </p>
+              </div>
+            )}
+          </div>
+
+          {/* Lista de archivos */}
+          {files.length > 0 && (
+            <div className="max-h-40 overflow-y-auto space-y-2">
+              {files.map((file, index) => (
+                <div
+                  key={index}
+                  className="flex items-center justify-between p-2 bg-gray-50 rounded"
+                >
+                  <div className="flex items-center gap-2 min-w-0">
+                    <FileText className="h-4 w-4 text-gray-400 flex-shrink-0" />
+                    <div className="min-w-0">
+                      <p className="text-sm font-medium truncate">{file.name}</p>
+                      <p className="text-xs text-gray-500">{formatFileSize(file.size)}</p>
+                    </div>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => removeFile(index)}
+                    disabled={uploading}
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Botones */}
+          <div className="flex justify-end gap-2">
+            <Button
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              disabled={uploading}
+            >
+              Cancelar
+            </Button>
+            <Button
+              onClick={handleUpload}
+              disabled={files.length === 0 || uploading || tema.trim() === ''}
+            >
+              {uploading ? 'Subiendo...' : `Subir ${files.length} archivo${files.length !== 1 ? 's' : ''}`}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -0,0 +1,36 @@
+import { useState } from 'react'
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
+import { Button } from '@/components/ui/button'
+import { Menu } from 'lucide-react'
+import { Sidebar } from './Sidebar'
+import { Dashboard } from './Dashboard'
+
+export function Layout() {
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+
+  return (
+    <div className="h-screen flex bg-gray-50">
+      {/* Desktop Sidebar */}
+      <div className="hidden md:flex md:w-64 md:flex-col">
+        <Sidebar />
+      </div>
+
+      {/* Mobile Sidebar */}
+      <Sheet open={sidebarOpen} onOpenChange={setSidebarOpen}>
+        <SheetTrigger asChild>
+          <Button variant="ghost" size="icon" className="md:hidden fixed top-4 left-4 z-40">
+            <Menu className="h-6 w-6" />
+          </Button>
+        </SheetTrigger>
+        <SheetContent side="left" className="w-64 p-0">
+          <Sidebar />
+        </SheetContent>
+      </Sheet>
+
+      {/* Main Content */}
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <Dashboard />
+      </div>
+    </div>
+  )
+}
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -0,0 +1,95 @@
+import { useEffect } from 'react'
+import { useFileStore } from '@/stores/fileStore'
+import { api } from '@/services/api'
+import { Button } from '@/components/ui/button'
+import { FolderIcon, FileText } from 'lucide-react'
+
+export function Sidebar() {
+  const { 
+    temas, 
+    selectedTema, 
+    setTemas, 
+    setSelectedTema, 
+    loading,
+    setLoading 
+  } = useFileStore()
+
+  useEffect(() => {
+    loadTemas()
+  }, [])
+
+  const loadTemas = async () => {
+    try {
+      setLoading(true)
+      const response = await api.getTemas()
+      setTemas(response.temas)
+    } catch (error) {
+      console.error('Error loading temas:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleTemaSelect = (tema: string | null) => {
+    setSelectedTema(tema)
+  }
+
+  return (
+    <div className="bg-white border-r border-gray-200 flex flex-col h-full">
+      {/* Header */}
+      <div className="p-6 border-b border-gray-200">
+        <h1 className="text-xl font-semibold text-gray-900 flex items-center gap-2">
+          <FileText className="h-6 w-6" />
+          DoRa Banorte
+        </h1>
+      </div>
+
+      {/* Temas List */}
+      <div className="flex-1 overflow-y-auto p-4">
+        <div className="space-y-1">
+          <h2 className="text-sm font-medium text-gray-500 mb-3">TEMAS</h2>
+          
+          {/* Todos los archivos */}
+          <Button
+            variant={selectedTema === null ? "secondary" : "ghost"}
+            className="w-full justify-start"
+            onClick={() => handleTemaSelect(null)}
+          >
+            <FolderIcon className="mr-2 h-4 w-4" />
+            Todos los archivos
+          </Button>
+
+          {/* Lista de temas */}
+          {loading ? (
+            <div className="text-sm text-gray-500 px-3 py-2">Cargando...</div>
+          ) : (
+            temas.map((tema) => (
+              <Button
+                key={tema}
+                variant={selectedTema === tema ? "secondary" : "ghost"}
+                className="w-full justify-start"
+                onClick={() => handleTemaSelect(tema)}
+              >
+                <FolderIcon className="mr-2 h-4 w-4" />
+                {tema}
+              </Button>
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div className="p-4 border-t border-gray-200">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={loadTemas}
+          disabled={loading}
+          className="w-full"
+        >
+          Actualizar temas
+        </Button>
+      </div>
+    </div>
+  )
+}
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -5,25 +5,26 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"

 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
        outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
      },
    },
    defaultVariants: {
--- a/frontend/src/components/ui/card.tsx
+++ b/frontend/src/components/ui/card.tsx
@@ -1,79 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
-      className
-    )}
-    {...props}
-  />
-))
-Card.displayName = "Card"
-
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-))
-CardHeader.displayName = "CardHeader"
-
-const CardTitle = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-CardTitle.displayName = "CardTitle"
-
-const CardDescription = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-CardDescription.displayName = "CardDescription"
-
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
-
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-))
-CardFooter.displayName = "CardFooter"
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
--- a/frontend/src/components/ui/checkbox.tsx
+++ b/frontend/src/components/ui/checkbox.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -0,0 +1,120 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
--- a/frontend/src/components/ui/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
--- a/frontend/src/components/ui/label.tsx
+++ b/frontend/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
--- a/frontend/src/components/ui/sheet.tsx
+++ b/frontend/src/components/ui/sheet.tsx
@@ -0,0 +1,138 @@
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
--- a/frontend/src/components/ui/table.tsx
+++ b/frontend/src/components/ui/table.tsx
@@ -0,0 +1,120 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,67 +1,119 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";

-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --radius: 0.5rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-  }
+@plugin "tailwindcss-animate";

-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.129 0.042 264.695);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.129 0.042 264.695);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.129 0.042 264.695);
+  --primary: oklch(0.208 0.042 265.755);
+  --primary-foreground: oklch(0.984 0.003 247.858);
+  --secondary: oklch(0.968 0.007 247.896);
+  --secondary-foreground: oklch(0.208 0.042 265.755);
+  --muted: oklch(0.968 0.007 247.896);
+  --muted-foreground: oklch(0.554 0.046 257.417);
+  --accent: oklch(0.968 0.007 247.896);
+  --accent-foreground: oklch(0.208 0.042 265.755);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.929 0.013 255.508);
+  --input: oklch(0.929 0.013 255.508);
+  --ring: oklch(0.704 0.04 256.788);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.984 0.003 247.858);
+  --sidebar-foreground: oklch(0.129 0.042 264.695);
+  --sidebar-primary: oklch(0.208 0.042 265.755);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.968 0.007 247.896);
+  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+  --sidebar-border: oklch(0.929 0.013 255.508);
+  --sidebar-ring: oklch(0.704 0.04 256.788);
+}
+
+.dark {
+  --background: oklch(0.129 0.042 264.695);
+  --foreground: oklch(0.984 0.003 247.858);
+  --card: oklch(0.208 0.042 265.755);
+  --card-foreground: oklch(0.984 0.003 247.858);
+  --popover: oklch(0.208 0.042 265.755);
+  --popover-foreground: oklch(0.984 0.003 247.858);
+  --primary: oklch(0.929 0.013 255.508);
+  --primary-foreground: oklch(0.208 0.042 265.755);
+  --secondary: oklch(0.279 0.041 260.031);
+  --secondary-foreground: oklch(0.984 0.003 247.858);
+  --muted: oklch(0.279 0.041 260.031);
+  --muted-foreground: oklch(0.704 0.04 256.788);
+  --accent: oklch(0.279 0.041 260.031);
+  --accent-foreground: oklch(0.984 0.003 247.858);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.551 0.027 264.364);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.208 0.042 265.755);
+  --sidebar-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.279 0.041 260.031);
+  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.551 0.027 264.364);
 }

@layer base {
  * {
-    @apply border-border;
+    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,7 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './index.css'
 import App from './App.tsx'
+import './index.css'

 createRoot(document.getElementById('root')!).render(
  <StrictMode>
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -0,0 +1,178 @@
+const API_BASE_URL = 'http://localhost:8000/api/v1'
+
+interface FileUploadResponse {
+  success: boolean
+  message: string
+  file?: {
+    name: string
+    full_path: string
+    tema: string
+    size: number
+    last_modified: string
+    url?: string
+  }
+}
+
+interface FileListResponse {
+  files: Array<{
+    name: string
+    full_path: string
+    tema: string
+    size: number
+    last_modified: string
+    content_type?: string
+  }>
+  total: number
+  tema?: string
+}
+
+interface TemasResponse {
+  temas: string[]
+  total: number
+}
+
+// API calls
+export const api = {
+  // Obtener todos los temas
+  getTemas: async (): Promise<TemasResponse> => {
+    const response = await fetch(`${API_BASE_URL}/files/temas`)
+    if (!response.ok) throw new Error('Error fetching temas')
+    return response.json()
+  },
+
+  // Obtener archivos (todos o por tema)
+  getFiles: async (tema?: string): Promise<FileListResponse> => {
+    const url = tema 
+      ? `${API_BASE_URL}/files/?tema=${encodeURIComponent(tema)}`
+      : `${API_BASE_URL}/files/`
+    
+    const response = await fetch(url)
+    if (!response.ok) throw new Error('Error fetching files')
+    return response.json()
+  },
+
+  // Subir archivo
+  uploadFile: async (file: File, tema?: string): Promise<FileUploadResponse> => {
+    const formData = new FormData()
+    formData.append('file', file)
+    if (tema) formData.append('tema', tema)
+
+    const response = await fetch(`${API_BASE_URL}/files/upload`, {
+      method: 'POST',
+      body: formData,
+    })
+    
+    if (!response.ok) throw new Error('Error uploading file')
+    return response.json()
+  },
+
+  // Eliminar archivo
+  deleteFile: async (filename: string, tema?: string): Promise<void> => {
+    const url = tema 
+      ? `${API_BASE_URL}/files/${encodeURIComponent(filename)}?tema=${encodeURIComponent(tema)}`
+      : `${API_BASE_URL}/files/${encodeURIComponent(filename)}`
+    
+    const response = await fetch(url, { method: 'DELETE' })
+    if (!response.ok) throw new Error('Error deleting file')
+  },
+
+  // Eliminar múltiples archivos
+  deleteFiles: async (filenames: string[], tema?: string): Promise<void> => {
+    const response = await fetch(`${API_BASE_URL}/files/delete-batch`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        files: filenames,
+        tema: tema
+      }),
+    })
+    
+    if (!response.ok) throw new Error('Error deleting files')
+  },
+
+   // Eliminar tema completo
+  deleteTema: async (tema: string): Promise<void> => {
+    const response = await fetch(`${API_BASE_URL}/files/tema/${encodeURIComponent(tema)}/delete-all`, {
+      method: 'DELETE'
+    })
+    
+    if (!response.ok) throw new Error('Error deleting tema')
+  },
+
+   // Descargar archivo individual
+  downloadFile: async (filename: string, tema?: string): Promise<void> => {
+    const url = tema 
+      ? `${API_BASE_URL}/files/${encodeURIComponent(filename)}/download?tema=${encodeURIComponent(tema)}`
+      : `${API_BASE_URL}/files/${encodeURIComponent(filename)}/download`
+    
+    const response = await fetch(url)
+    if (!response.ok) throw new Error('Error downloading file')
+    
+    // Crear blob y descargar
+    const blob = await response.blob()
+    const downloadUrl = window.URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = downloadUrl
+    link.download = filename
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    window.URL.revokeObjectURL(downloadUrl)
+  },
+
+  // Descargar múltiples archivos como ZIP
+  downloadMultipleFiles: async (filenames: string[], tema?: string, zipName?: string): Promise<void> => {
+    const response = await fetch(`${API_BASE_URL}/files/download-batch`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        files: filenames,
+        tema: tema,
+        zip_name: zipName || 'archivos'
+      }),
+    })
+    
+    if (!response.ok) throw new Error('Error downloading files')
+    
+    // Crear blob y descargar ZIP
+    const blob = await response.blob()
+    const downloadUrl = window.URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = downloadUrl
+    
+    // Obtener nombre del archivo del header Content-Disposition
+    const contentDisposition = response.headers.get('Content-Disposition')
+    const filename = contentDisposition?.split('filename=')[1]?.replace(/"/g, '') || 'archivos.zip'
+    
+    link.download = filename
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    window.URL.revokeObjectURL(downloadUrl)
+  },
+
+  // Descargar tema completo
+  downloadTema: async (tema: string): Promise<void> => {
+    const response = await fetch(`${API_BASE_URL}/files/tema/${encodeURIComponent(tema)}/download-all`)
+    if (!response.ok) throw new Error('Error downloading tema')
+    
+    const blob = await response.blob()
+    const downloadUrl = window.URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = downloadUrl
+    
+    const contentDisposition = response.headers.get('Content-Disposition')
+    const filename = contentDisposition?.split('filename=')[1]?.replace(/"/g, '') || `${tema}.zip`
+    
+    link.download = filename
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    window.URL.revokeObjectURL(downloadUrl)
+  },
+
+}
--- a/frontend/src/stores/fileStore.ts
+++ b/frontend/src/stores/fileStore.ts
@@ -0,0 +1,60 @@
+import { create } from 'zustand'
+
+interface FileData {
+  name: string
+  full_path: string
+  tema: string
+  size: number
+  last_modified: string
+  content_type?: string
+  url?: string
+}
+
+interface FileStore {
+  // Estado
+  selectedTema: string | null
+  files: FileData[]
+  temas: string[]
+  loading: boolean
+  selectedFiles: Set<string>
+  
+  // Acciones
+  setSelectedTema: (tema: string | null) => void
+  setFiles: (files: FileData[]) => void
+  setTemas: (temas: string[]) => void
+  setLoading: (loading: boolean) => void
+  toggleFileSelection: (filename: string) => void
+  selectAllFiles: () => void
+  clearSelection: () => void
+}
+
+export const useFileStore = create<FileStore>((set) => ({
+  // Estado inicial
+  selectedTema: null,
+  files: [],
+  temas: [],
+  loading: false,
+  selectedFiles: new Set(),
+
+  // Acciones
+  setSelectedTema: (tema) => set({ selectedTema: tema }),
+  setFiles: (files) => set({ files }),
+  setTemas: (temas) => set({ temas }),
+  setLoading: (loading) => set({ loading }),
+  
+  toggleFileSelection: (filename) => set((state) => {
+    const newSelection = new Set(state.selectedFiles)
+    if (newSelection.has(filename)) {
+      newSelection.delete(filename)
+    } else {
+      newSelection.add(filename)
+    }
+    return { selectedFiles: newSelection }
+  }),
+  
+  selectAllFiles: () => set((state) => ({
+    selectedFiles: new Set(state.files.map(f => f.name))
+  })),
+  
+  clearSelection: () => set({ selectedFiles: new Set() }),
+}))
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -0,0 +1,35 @@
+// Tipos que coinciden con tu backend
+export interface FileInfo {
+  name: string
+  full_path: string
+  tema: string
+  size: number
+  last_modified: string
+  content_type?: string
+  url?: string
+}
+
+export interface FileListResponse {
+  files: FileInfo[]
+  total: number
+  tema?: string
+}
+
+export interface FileUploadResponse {
+  success: boolean
+  message: string
+  file?: FileInfo
+}
+
+export interface TemasResponse {
+  temas: string[]
+  total: number
+}
+
+export interface FileConflictResponse {
+  conflict: boolean
+  message: string
+  existing_file: string
+  suggested_name: string
+  tema?: string
+}
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,92 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  darkMode: ["class"],
  content: [
-    "./pages/**/*.{ts,tsx}",
-    "./components/**/*.{ts,tsx}",
-    "./app/**/*.{ts,tsx}",
-    "./src/**/*.{ts,tsx}",
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
  ],
-  prefix: "",
  theme: {
-  	container: {
-  		center: true,
-  		padding: '2rem',
-  		screens: {
-  			'2xl': '1400px'
-  		}
-  	},
-  	extend: {
-  		colors: {
-  			border: 'hsl(var(--border))',
-  			input: 'hsl(var(--input))',
-  			ring: 'hsl(var(--ring))',
-  			background: 'hsl(var(--background))',
-  			foreground: 'hsl(var(--foreground))',
-  			primary: {
-  				DEFAULT: 'hsl(var(--primary))',
-  				foreground: 'hsl(var(--primary-foreground))'
-  			},
-  			secondary: {
-  				DEFAULT: 'hsl(var(--secondary))',
-  				foreground: 'hsl(var(--secondary-foreground))'
-  			},
-  			destructive: {
-  				DEFAULT: 'hsl(var(--destructive))',
-  				foreground: 'hsl(var(--destructive-foreground))'
-  			},
-  			muted: {
-  				DEFAULT: 'hsl(var(--muted))',
-  				foreground: 'hsl(var(--muted-foreground))'
-  			},
-  			accent: {
-  				DEFAULT: 'hsl(var(--accent))',
-  				foreground: 'hsl(var(--accent-foreground))'
-  			},
-  			popover: {
-  				DEFAULT: 'hsl(var(--popover))',
-  				foreground: 'hsl(var(--popover-foreground))'
-  			},
-  			card: {
-  				DEFAULT: 'hsl(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
-  			},
-  			chart: {
-  				'1': 'hsl(var(--chart-1))',
-  				'2': 'hsl(var(--chart-2))',
-  				'3': 'hsl(var(--chart-3))',
-  				'4': 'hsl(var(--chart-4))',
-  				'5': 'hsl(var(--chart-5))'
-  			}
-  		},
-  		borderRadius: {
-  			lg: 'var(--radius)',
-  			md: 'calc(var(--radius) - 2px)',
-  			sm: 'calc(var(--radius) - 4px)'
-  		},
-  		keyframes: {
-  			'accordion-down': {
-  				from: {
-  					height: '0'
-  				},
-  				to: {
-  					height: 'var(--radix-accordion-content-height)'
-  				}
-  			},
-  			'accordion-up': {
-  				from: {
-  					height: 'var(--radix-accordion-content-height)'
-  				},
-  				to: {
-  					height: '0'
-  				}
-  			}
-  		},
-  		animation: {
-  			'accordion-down': 'accordion-down 0.2s ease-out',
-  			'accordion-up': 'accordion-up 0.2s ease-out'
-  		}
-  	}
+    extend: {},
  },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [],
 }
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -1,21 +1,29 @@
 {
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2020",
+    "target": "ES2022",
    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
+
+    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",
+
+    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    /* Path mapping */
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -1,12 +1,8 @@
 {
  "files": [],
  "references": [
-    {
-      "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.node.json"
-    }
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -2,12 +2,11 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import path from 'path'

-// https://vitejs.dev/config/
 export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
-      "@": path.resolve(__dirname, "./src"),
+      '@': path.resolve(__dirname, './src'),
    },
  },
 })