+>(({ className, ...props }, ref) => (
+ | [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+ HTMLTableCaptionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+ Table,
+ TableHeader,
+ TableBody,
+ TableFooter,
+ TableHead,
+ TableRow,
+ TableCell,
+ TableCaption,
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 99a7b0c..8ad0270 100644
--- 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;
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index bef5202..c09994b 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,10 +1,10 @@
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(
,
-)
+)
\ No newline at end of file
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
new file mode 100644
index 0000000..f64dd39
--- /dev/null
+++ 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 => {
+ 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 => {
+ 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 => {
+ 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 => {
+ 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 => {
+ 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 => {
+ 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 => {
+ 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 => {
+ 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 => {
+ 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)
+ },
+
+}
\ No newline at end of file
diff --git a/frontend/src/stores/fileStore.ts b/frontend/src/stores/fileStore.ts
new file mode 100644
index 0000000..6819054
--- /dev/null
+++ 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
+
+ // 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((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() }),
+}))
\ No newline at end of file
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
new file mode 100644
index 0000000..d9ed9b4
--- /dev/null
+++ 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
+}
\ No newline at end of file
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 554f6c6..89a305e 100644
--- 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: [],
}
\ No newline at end of file
diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json
index 1b46712..fa340aa 100644
--- 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/*"]
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index afa1ec6..b4336da 100644
--- 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": ".",
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index a962273..4d810c3 100644
--- 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'),
},
},
})
\ No newline at end of file
|