Refactor code structure for improved readability and maintainability

2026-02-23 19:08:57 +01:00
parent 9ed4437906
commit b92cc19137
68 changed files with 6303 additions and 5940 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -1,24 +1,41 @@
-# Logs
-logs
-*.log
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
+.pnpm-debug.log*

-node_modules
-dist
-dist-ssr
-*.local
+# env files (can opt-in for committing if needed)
+.env*

-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,73 +0,0 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## React Compiler
-
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
--- a/frontend/components.json
+++ b/frontend/components.json
@@ -1,15 +1,17 @@
 {
  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "default",
-  "rsc": false,
+  "style": "new-york",
+  "rsc": true,
  "tsx": true,
  "tailwind": {
-    "config": "tailwind.config.ts",
-    "css": "src/styles/globals.css",
-    "baseColor": "slate",
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
+  "iconLibrary": "lucide",
+  "rtl": false,
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
@@ -17,5 +19,5 @@
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
-  "iconLibrary": "lucide"
+  "registries": {}
 }
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -1,23 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { defineConfig, globalIgnores } from 'eslint/config'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs.flat.recommended,
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-  },
-])
--- a/frontend/eslint.config.mjs
+++ b/frontend/eslint.config.mjs
@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <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>frontend</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
--- a/frontend/next.config.ts
+++ b/frontend/next.config.ts
@@ -0,0 +1,16 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'images.unsplash.com',
+        port: '',
+        pathname: '/**',
+      },
+    ],
+  },
+};
+
+export default nextConfig;
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,59 +1,33 @@
 {
  "name": "frontend",
+  "version": "0.1.0",
  "private": true,
-  "version": "0.0.0",
-  "type": "module",
  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
  },
  "dependencies": {
-    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-scroll-area": "^1.2.10",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-toast": "^1.2.15",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@tanstack/react-form": "^1.28.3",
-    "@tanstack/react-query": "^5.90.21",
-    "@tanstack/react-router": "^1.162.2",
-    "axios": "^1.13.5",
-    "date-fns": "^4.1.0",
-    "lucide-react": "^0.575.0",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "zod": "^4.3.6"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.39.1",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@tailwindcss/postcss": "^4.2.0",
-    "@tailwindcss/vite": "^4.2.0",
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
-    "autoprefixer": "^10.4.24",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
-    "eslint": "^9.39.1",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
-    "globals": "^16.5.0",
-    "postcss": "^8.5.6",
-    "tailwind-merge": "^3.5.0",
-    "tailwindcss": "^4.2.0",
-    "tailwindcss-animate": "^1.0.7",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.48.0",
-    "vite": "^7.3.1"
+    "lucide-react": "^0.575.0",
+    "next": "16.1.6",
+    "radix-ui": "^1.4.3",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "shadcn": "^3.8.5",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5"
  }
 }
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    '@tailwindcss/postcss': {},
-    autoprefixer: {},
-  },
-};
--- a/frontend/postcss.config.mjs
+++ b/frontend/postcss.config.mjs
@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;
--- a/frontend/public/file.svg
+++ b/frontend/public/file.svg
@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
--- a/frontend/public/globe.svg
+++ b/frontend/public/globe.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
--- a/frontend/public/next.svg
+++ b/frontend/public/next.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
--- a/frontend/public/vercel.svg
+++ b/frontend/public/vercel.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
--- a/frontend/public/vite.svg
+++ b/frontend/public/vite.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/frontend/public/window.svg
+++ b/frontend/public/window.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
--- a/frontend/skills-lock.json
+++ b/frontend/skills-lock.json
@@ -1,10 +0,0 @@
-{
-  "version": 1,
-  "skills": {
-    "shadcn-ui": {
-      "source": "google-labs-code/stitch-skills",
-      "sourceType": "github",
-      "computedHash": "dadbca54d35a33fe73e40018611af2179689305bf6da812ab2643987fefd9da3"
-    }
-  }
-}
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,38 +0,0 @@
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Badge } from '@/components/ui/badge';
-
-function App() {
-  return (
-    <div className="min-h-screen bg-background">
-      <div className="container mx-auto p-6">
-        <Card>
-          <CardHeader>
-            <CardTitle>Quasar - Biblioteca de Videojuegos</CardTitle>
-            <CardDescription>
-              Aplicación para gestionar tu colección personal de videojuegos
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex gap-4">
-              <Button>Botón Primario</Button>
-              <Button variant="secondary">Botón Secundario</Button>
-              <Button variant="outline">Botón Outline</Button>
-            </div>
-            <div className="space-y-2">
-              <Input placeholder="Buscar juegos..." />
-            </div>
-            <div className="flex gap-2">
-              <Badge variant="default">Etiqueta</Badge>
-              <Badge variant="secondary">Secundaria</Badge>
-              <Badge variant="outline">Outline</Badge>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-}
-
-export default App;
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -1,165 +0,0 @@
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-// Función para unir clases de Tailwind
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-// Configuración base de la API
-const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000';
-
-// Interceptor para manejar errores comunes
-async function handleApiError(response: Response) {
-  if (!response.ok) {
-    const errorData = await response.json().catch(() => ({}));
-
-    // Manejar errores de autenticación
-    if (response.status === 401) {
-      throw new Error('No autorizado. Por favor inicia sesión.');
-    }
-
-    // Manejar errores de validación
-    if (response.status === 422) {
-      const fieldErrors = errorData.errors || {};
-      const errorMessage = Object.entries(fieldErrors)
-        .map(([field, errors]) => `${field}: ${Array.isArray(errors) ? errors.join(', ') : errors}`)
-        .join('; ');
-      throw new Error(errorMessage || 'Error de validación');
-    }
-
-    // Manejar errores de servidor
-    if (response.status >= 500) {
-      throw new Error('Error del servidor. Por favor intenta de nuevo más tarde.');
-    }
-
-    // Manejar otros errores
-    throw new Error(errorData.message || 'Error en la solicitud');
-  }
-
-  return response;
-}
-
-// Función genérica para peticiones GET
-export async function apiGet<T>(endpoint: string, params?: Record<string, any>): Promise<T> {
-  const url = new URL(`${API_BASE_URL}${endpoint}`);
-
-  if (params) {
-    Object.entries(params).forEach(([key, value]) => {
-      if (value !== undefined && value !== null) {
-        url.searchParams.append(key, String(value));
-      }
-    });
-  }
-
-  const response = await fetch(url.toString(), {
-    method: 'GET',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
-
-  await handleApiError(response);
-  return response.json();
-}
-
-// Función genérica para peticiones POST
-export async function apiPost<T>(endpoint: string, data: any): Promise<T> {
-  const response = await fetch(`${API_BASE_URL}${endpoint}`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(data),
-  });
-
-  await handleApiError(response);
-  return response.json();
-}
-
-// Función genérica para peticiones PUT
-export async function apiPut<T>(endpoint: string, data: any): Promise<T> {
-  const response = await fetch(`${API_BASE_URL}${endpoint}`, {
-    method: 'PUT',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(data),
-  });
-
-  await handleApiError(response);
-  return response.json();
-}
-
-// Función genérica para peticiones DELETE
-export async function apiDelete<T>(endpoint: string): Promise<T> {
-  const response = await fetch(`${API_BASE_URL}${endpoint}`, {
-    method: 'DELETE',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
-
-  await handleApiError(response);
-  return response.json();
-}
-
-// Función para subir archivos
-export async function apiUpload<T>(
-  endpoint: string,
-  file: File,
-  additionalData?: Record<string, any>
-): Promise<T> {
-  const formData = new FormData();
-  formData.append('file', file);
-
-  if (additionalData) {
-    Object.entries(additionalData).forEach(([key, value]) => {
-      formData.append(key, String(value));
-    });
-  }
-
-  const response = await fetch(`${API_BASE_URL}${endpoint}`, {
-    method: 'POST',
-    body: formData,
-  });
-
-  await handleApiError(response);
-  return response.json();
-}
-
-// Función para peticiones con paginación
-export async function apiGetPaginated<T>(
-  endpoint: string,
-  page: number = 1,
-  limit: number = 10,
-  filters?: Record<string, any>
-): Promise<{
-  data: T[];
-  pagination: {
-    page: number;
-    limit: number;
-    total: number;
-    totalPages: number;
-  };
-}> {
-  const params = {
-    page,
-    limit,
-    ...filters,
-  };
-
-  return apiGet(endpoint, params);
-}
-
-// Función para buscar
-export async function apiSearch<T>(
-  endpoint: string,
-  query: string,
-  filters?: Record<string, any>
-): Promise<T[]> {
-  return apiGet(endpoint, {
-    search: query,
-    ...filters,
-  });
-}
--- a/frontend/src/api/games.ts
+++ b/frontend/src/api/games.ts
@@ -1,80 +0,0 @@
-import { apiGet, apiPost, apiPut, apiDelete, apiGetPaginated, apiSearch } from './client';
-import type { Game, GameFilters, GameFormData, PaginatedResponse } from '@/types';
-
-// Obtener todos los juegos con paginación
-export const getGames = async (page: number = 1, limit: number = 10, filters?: GameFilters) => {
-  return apiGetPaginated<Game>('/api/games', page, limit, filters);
-};
-
-// Obtener un juego por ID
-export const getGameById = async (id: number) => {
-  return apiGet<Game>(`/api/games/${id}`);
-};
-
-// Crear un nuevo juego
-export const createGame = async (data: GameFormData) => {
-  return apiPost<Game>('/api/games', data);
-};
-
-// Actualizar un juego existente
-export const updateGame = async (id: number, data: GameFormData) => {
-  return apiPut<Game>(`/api/games/${id}`, data);
-};
-
-// Eliminar un juego
-export const deleteGame = async (id: number) => {
-  return apiDelete(`/api/games/${id}`);
-};
-
-// Buscar juegos
-export const searchGames = async (query: string, filters?: GameFilters) => {
-  return apiSearch<Game>('/api/games', query, filters);
-};
-
-// Obtener juegos por plataforma
-export const getGamesByPlatform = async (
-  platformId: number,
-  page: number = 1,
-  limit: number = 10
-) => {
-  return apiGetPaginated<Game>(`/api/games/platform/${platformId}`, page, limit);
-};
-
-// Obtener juegos por etiqueta
-export const getGamesByTag = async (tagId: number, page: number = 1, limit: number = 10) => {
-  return apiGetPaginated<Game>(`/api/games/tag/${tagId}`, page, limit);
-};
-
-// Obtener juegos sin ROM
-export const getGamesWithoutRom = async (page: number = 1, limit: number = 10) => {
-  return apiGetPaginated<Game>('/api/games/without-rom', page, limit);
-};
-
-// Obtener juegos metadata pendiente
-export const getGamesWithPendingMetadata = async (page: number = 1, limit: number = 10) => {
-  return apiGetPaginated<Game>('/api/games/pending-metadata', page, limit);
-};
-
-// Actualizar metadata de un juego
-export const updateGameMetadata = async (id: number, metadata: any) => {
-  return apiPut<Game>(`/api/games/${id}/metadata`, metadata);
-};
-
-// Enriquecer metadata de un juego
-export const enrichGameMetadata = async (id: number, source: 'igdb' | 'rawg' | 'thegamesdb') => {
-  return apiPost<Game>(`/api/games/${id}/enrich`, { source });
-};
-
-// Obtener estadísticas de juegos
-export const getGameStats = async () => {
-  return apiGet<{
-    totalGames: number;
-    gamesWithRom: number;
-    gamesWithoutRom: number;
-    gamesWithMetadata: number;
-    gamesWithoutMetadata: number;
-    totalPlatforms: number;
-    totalTags: number;
-    averageRating: number;
-  }>('/api/games/stats');
-};
--- a/frontend/src/api/import.ts
+++ b/frontend/src/api/import.ts
@@ -1,76 +0,0 @@
-import { apiGet, apiPost, apiPut, apiDelete, apiUpload } from './client';
-import type { ImportRomFormData } from '@/types';
-
-// Iniciar escaneo de directorio
-export const startDirectoryScan = async (directoryPath: string) => {
-  return apiPost('/api/import/scan', { directoryPath });
-};
-
-// Obtener estado del escaneo
-export const getScanStatus = async (scanId: string) => {
-  return apiGet(`/api/import/scan/${scanId}/status`);
-};
-
-// Obtener lista de ROMs detectadas
-export const getDetectedRoms = async (scanId: string) => {
-  return apiGet(`/api/import/scan/${scanId}/roms`);
-};
-
-// Procesar ROMs detectadas
-export const processDetectedRoms = async (scanId: string, romIds: number[]) => {
-  return apiPost(`/api/import/scan/${scanId}/process`, { romIds });
-};
-
-// Importar ROM manualmente
-export const importRom = async (data: ImportRomFormData & { file: File }) => {
-  const { file, ...rest } = data;
-  return apiUpload('/api/import/rom', file, rest);
-};
-
-// Obtener historial de importaciones
-export const getImportHistory = async (page: number = 1, limit: number = 10) => {
-  return apiGet(`/api/import/history?page=${page}&limit=${limit}`);
-};
-
-// Obtener estadísticas de importación
-export const getImportStats = async () => {
-  return apiGet<{
-    totalImports: number;
-    successfulImports: number;
-    failedImports: number;
-    totalRomsScanned: number;
-    totalRomsImported: number;
-    averageProcessingTime: number;
-    lastImportDate?: string;
-  }>('/api/import/stats');
-};
-
-// Cancelar escaneo en progreso
-export const cancelScan = async (scanId: string) => {
-  return apiDelete(`/api/import/scan/${scanId}`);
-};
-
-// Reintentar importación fallida
-export const retryImport = async (importId: number) => {
-  return apiPost(`/api/import/retry/${importId}`);
-};
-
-// Eliminar registro de importación
-export const deleteImportRecord = async (importId: number) => {
-  return apiDelete(`/api/import/history/${importId}`);
-};
-
-// Obtener información de archivo ROM
-export const getRomInfo = async (romPath: string) => {
-  return apiGet(`/api/import/rom-info?path=${encodeURIComponent(romPath)}`);
-};
-
-// Verificar integridad de ROM
-export const verifyRomIntegrity = async (romPath: string, romType: string) => {
-  return apiPost('/api/import/verify-rom', { romPath, romType });
-};
-
-// Obtener directorios disponibles para escaneo
-export const getAvailableDirectories = async () => {
-  return apiGet<string[]>('/api/import/directories');
-};
--- a/frontend/src/api/platforms.ts
+++ b/frontend/src/api/platforms.ts
@@ -1,52 +0,0 @@
-import { apiGet, apiPost, apiPut, apiDelete, apiGetPaginated, apiSearch } from './client';
-import type { Platform, PlatformFilters, PlatformFormData } from '@/types';
-
-// Obtener todas las plataformas con paginación
-export const getPlatforms = async (
-  page: number = 1,
-  limit: number = 10,
-  filters?: PlatformFilters
-) => {
-  return apiGetPaginated<Platform>('/api/platforms', page, limit, filters);
-};
-
-// Obtener todas las plataformas (sin paginación para selectores)
-export const getAllPlatforms = async () => {
-  return apiGet<Platform[]>('/api/platforms/all');
-};
-
-// Obtener una plataforma por ID
-export const getPlatformById = async (id: number) => {
-  return apiGet<Platform>(`/api/platforms/${id}`);
-};
-
-// Crear una nueva plataforma
-export const createPlatform = async (data: PlatformFormData) => {
-  return apiPost<Platform>('/api/platforms', data);
-};
-
-// Actualizar una plataforma existente
-export const updatePlatform = async (id: number, data: PlatformFormData) => {
-  return apiPut<Platform>(`/api/platforms/${id}`, data);
-};
-
-// Eliminar una plataforma
-export const deletePlatform = async (id: number) => {
-  return apiDelete(`/api/platforms/${id}`);
-};
-
-// Buscar plataformas
-export const searchPlatforms = async (query: string, filters?: PlatformFilters) => {
-  return apiSearch<Platform>('/api/platforms', query, filters);
-};
-
-// Obtener estadísticas de plataformas
-export const getPlatformStats = async () => {
-  return apiGet<{
-    totalPlatforms: number;
-    totalGames: number;
-    averageGamesPerPlatform: number;
-    mostPopularPlatform: string;
-    leastPopularPlatform: string;
-  }>('/api/platforms/stats');
-};
--- a/frontend/src/api/settings.ts
+++ b/frontend/src/api/settings.ts
@@ -1,107 +0,0 @@
-import { apiGet, apiPost, apiPut } from './client';
-import type { SettingsFormData } from '@/types';
-
-// Obtener configuración actual
-export const getSettings = async () => {
-  return apiGet('/api/settings');
-};
-
-// Actualizar configuración
-export const updateSettings = async (data: SettingsFormData) => {
-  return apiPut('/api/settings', data);
-};
-
-// Probar conexión con IGDB
-export const testIgdbConnection = async (apiKey: string) => {
-  return apiPost('/api/settings/test-igdb', { apiKey });
-};
-
-// Probar conexión con RAWG
-export const testRawgConnection = async (apiKey: string) => {
-  return apiPost('/api/settings/test-rawg', { apiKey });
-};
-
-// Probar conexión con TheGamesDB
-export const testThegamesdbConnection = async (apiKey: string) => {
-  return apiPost('/api/settings/test-thegamesdb', { apiKey });
-};
-
-// Obtener estado de servicios externos
-export const getExternalServicesStatus = async () => {
-  return apiGet<{
-    igdb: { connected: boolean; lastChecked?: string };
-    rawg: { connected: boolean; lastChecked?: string };
-    thegamesdb: { connected: boolean; lastChecked?: string };
-  }>('/api/settings/services-status');
-};
-
-// Obtener configuración de importación automática
-export const getAutoImportConfig = async () => {
-  return apiGet('/api/settings/auto-import');
-};
-
-// Actualizar configuración de importación automática
-export const updateAutoImportConfig = async (enabled: boolean, directory?: string) => {
-  return apiPut('/api/settings/auto-import', { enabled, directory });
-};
-
-// Obtener configuración de exportación
-export const getExportConfig = async () => {
-  return apiGet('/api/settings/export');
-};
-
-// Actualizar configuración de exportación
-export const updateExportConfig = async (format: 'csv' | 'json', fields: string[]) => {
-  return apiPut('/api/settings/export', { format, fields });
-};
-
-// Exportar datos
-export const exportData = async (format: 'csv' | 'json', filters?: Record<string, any>) => {
-  const params = new URLSearchParams();
-  params.append('format', format);
-
-  if (filters) {
-    Object.entries(filters).forEach(([key, value]) => {
-      if (value !== undefined && value !== null) {
-        params.append(key, String(value));
-      }
-    });
-  }
-
-  const response = await fetch(`/api/settings/export?${params.toString()}`, {
-    method: 'GET',
-  });
-
-  if (!response.ok) {
-    throw new Error('Error al exportar datos');
-  }
-
-  return response.blob();
-};
-
-// Obtener estadísticas del sistema
-export const getSystemStats = async () => {
-  return apiGet<{
-    totalGames: number;
-    totalPlatforms: number;
-    totalTags: number;
-    totalRoms: number;
-    totalSize: number;
-    averageRating: number;
-    recentActivity: Array<{
-      type: string;
-      message: string;
-      timestamp: string;
-    }>;
-  }>('/api/settings/system-stats');
-};
-
-// Limpiar caché
-export const clearCache = async () => {
-  return apiPost('/api/settings/clear-cache');
-};
-
-// Obtener versión del sistema
-export const getSystemVersion = async () => {
-  return apiGet('/api/settings/version');
-};
--- a/frontend/src/api/tags.ts
+++ b/frontend/src/api/tags.ts
@@ -1,68 +0,0 @@
-import { apiGet, apiPost, apiPut, apiDelete, apiGetPaginated, apiSearch } from './client';
-import type { Tag, TagFilters, TagFormData } from '@/types';
-
-// Obtener todas las etiquetas con paginación
-export const getTags = async (page: number = 1, limit: number = 10, filters?: TagFilters) => {
-  return apiGetPaginated<Tag>('/api/tags', page, limit, filters);
-};
-
-// Obtener todas las etiquetas (sin paginación para selectores)
-export const getAllTags = async () => {
-  return apiGet<Tag[]>('/api/tags/all');
-};
-
-// Obtener una etiqueta por ID
-export const getTagById = async (id: number) => {
-  return apiGet<Tag>(`/api/tags/${id}`);
-};
-
-// Crear una nueva etiqueta
-export const createTag = async (data: TagFormData) => {
-  return apiPost<Tag>('/api/tags', data);
-};
-
-// Actualizar una etiqueta existente
-export const updateTag = async (id: number, data: TagFormData) => {
-  return apiPut<Tag>(`/api/tags/${id}`, data);
-};
-
-// Eliminar una etiqueta
-export const deleteTag = async (id: number) => {
-  return apiDelete(`/api/tags/${id}`);
-};
-
-// Buscar etiquetas
-export const searchTags = async (query: string, filters?: TagFilters) => {
-  return apiSearch<Tag>('/api/tags', query, filters);
-};
-
-// Obtener etiquetas más usadas
-export const getPopularTags = async (limit: number = 10) => {
-  return apiGet<Tag[]>(`/api/tags/popular?limit=${limit}`);
-};
-
-// Obtener etiquetas por juego
-export const getTagsByGame = async (gameId: number) => {
-  return apiGet<Tag[]>(`/api/tags/game/${gameId}`);
-};
-
-// Asignar etiquetas a un juego
-export const assignTagsToGame = async (gameId: number, tagIds: number[]) => {
-  return apiPost(`/api/games/${gameId}/tags`, { tagIds });
-};
-
-// Eliminar etiquetas de un juego
-export const removeTagsFromGame = async (gameId: number, tagIds: number[]) => {
-  return apiPost(`/api/games/${gameId}/tags/remove`, { tagIds });
-};
-
-// Obtener estadísticas de etiquetas
-export const getTagStats = async () => {
-  return apiGet<{
-    totalTags: number;
-    totalTaggedGames: number;
-    averageTagsPerGame: number;
-    mostUsedTag: string;
-    leastUsedTag: string;
-  }>('/api/tags/stats');
-};
--- a/frontend/src/app/favicon.ico
+++ b/frontend/src/app/favicon.ico
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -0,0 +1,297 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: #0a0a12;
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.11 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.11 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: #00d0e0;
+  --primary-foreground: #0a0a12;
+  --secondary: oklch(0.18 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.18 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: #f0c040;
+  --accent-foreground: #0a0a12;
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: #00f0ff;
+  --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.11 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: #00f0ff;
+  --sidebar-primary-foreground: #0a0a12;
+  --sidebar-accent: oklch(0.18 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: #00f0ff;
+}
+
+.dark {
+  --background: #0a0a12;
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.11 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.11 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: #00d0e0;
+  --primary-foreground: #0a0a12;
+  --secondary: oklch(0.18 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.18 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: #f0c040;
+  --accent-foreground: #0a0a12;
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: #00f0ff;
+  --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.11 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: #00f0ff;
+  --sidebar-primary-foreground: #0a0a12;
+  --sidebar-accent: oklch(0.18 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: #00f0ff;
+}
+
+/* Mass Effect-inspired theme customizations */
+:root {
+  /* Custom colors for Mass Effect theme */
+  --mass-effect-dark: #0a0a12;
+  --mass-effect-cyan: #00d0e0;
+  --mass-effect-gold: #f0c040;
+  --mass-effect-cyan-glow: rgba(0, 208, 224, 0.5);
+  --mass-effect-gold-glow: rgba(240, 192, 64, 0.5);
+  --glass-bg: rgba(10, 10, 18, 0.7);
+  --glass-border: rgba(0, 208, 224, 0.2);
+}
+
+/* Glassmorphism effect */
+.glass {
+  background: var(--glass-bg);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid var(--glass-border);
+}
+
+/* Glow effects */
+.glow-cyan {
+  box-shadow: 0 0 10px var(--mass-effect-cyan-glow);
+}
+
+.glow-cyan-intense {
+  box-shadow: 0 0 20px var(--mass-effect-cyan-glow), 0 0 40px var(--mass-effect-cyan);
+}
+
+.glow-gold {
+  box-shadow: 0 0 10px var(--mass-effect-gold-glow);
+}
+
+/* Text effects */
+.text-glow-cyan {
+  text-shadow: 0 0 10px var(--mass-effect-cyan-glow);
+}
+
+.text-glow-gold {
+  text-shadow: 0 0 10px var(--mass-effect-gold-glow);
+}
+
+/* Holographic effect */
+.holographic {
+  position: relative;
+  overflow: hidden;
+}
+
+.holographic::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(0, 240, 255, 0.2),
+    transparent
+  );
+  animation: holographic-scan 3s infinite;
+}
+
+@keyframes holographic-scan {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+/* Pulse animation for system status */
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.pulse {
+  animation: pulse 2s infinite;
+}
+
+/* Hover glow effect */
+.hover-glow:hover {
+  box-shadow: 0 0 15px var(--mass-effect-cyan-glow);
+  transform: translateY(-2px);
+  transition: all 0.3s ease;
+}
+
+/* Starfield background */
+.starfield {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  background-image:
+    radial-gradient(2px 2px at 20px 30px, #eee, transparent),
+    radial-gradient(2px 2px at 40px 70px, #eee, transparent),
+    radial-gradient(1px 1px at 50px 50px, #eee, transparent),
+    radial-gradient(1px 1px at 80px 10px, #eee, transparent),
+    radial-gradient(2px 2px at 130px 80px, #eee, transparent);
+  background-repeat: repeat;
+  background-size: 200px 200px;
+  opacity: 0.3;
+  animation: starfield-move 120s linear infinite;
+}
+
+@keyframes starfield-move {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-200px);
+  }
+}
+
+/* Custom button styles */
+.btn-mission {
+  background: linear-gradient(45deg, var(--mass-effect-cyan), var(--mass-effect-gold));
+  border: none;
+  color: var(--mass-effect-dark);
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  padding: 12px 24px;
+  border-radius: 4px;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.btn-mission:hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 20px var(--mass-effect-cyan-glow), 0 0 40px var(--mass-effect-gold-glow);
+}
+
+.btn-mission::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.2),
+    transparent
+  );
+  transition: left 0.5s;
+}
+
+.btn-mission:hover::before {
+  left: 100%;
+}
+
+/* Search bar glow effect */
+.search-glow:focus {
+  box-shadow: 0 0 0 1px var(--mass-effect-cyan), 0 0 15px var(--mass-effect-cyan-glow);
+  border-color: var(--mass-effect-cyan);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-family: 'Inter', sans-serif;
+    overflow-x: hidden;
+  }
+}
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -0,0 +1,38 @@
+import type { Metadata } from 'next';
+import { Geist, Geist_Mono } from 'next/font/google';
+import './globals.css';
+
+const geistSans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
+});
+
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
+});
+
+export const metadata: Metadata = {
+  title: 'Quasar - Tu Biblioteca de Videojuegos',
+  description:
+    'Gestiona tu colección de videojuegos con Quasar. Organiza, escanea y explora tu biblioteca personal.',
+  keywords: ['videojuegos', 'emulador', 'retro gaming', 'video game library'],
+  openGraph: {
+    title: 'Quasar - Tu Biblioteca de Videojuegos',
+    description:
+      'Gestiona tu colección de videojuegos con Quasar. Organiza, escanea y explora tu biblioteca personal.',
+    type: 'website',
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="es" suppressHydrationWarning>
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body>
+    </html>
+  );
+}
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -0,0 +1,28 @@
+import Navbar from '@/components/landing/Navbar';
+import Hero from '@/components/landing/Hero';
+import GameGrid from '@/components/landing/GameGrid';
+import Footer from '@/components/landing/Footer';
+
+export default function Home() {
+  return (
+    <div className="min-h-screen" style={{ backgroundColor: 'var(--mass-effect-dark)' }}>
+      {/* Starfield Background */}
+      <div className="starfield"></div>
+
+      {/* Navbar */}
+      <Navbar />
+
+      {/* Main Content */}
+      <main id="main-content" className="pt-16">
+        {/* Hero Section */}
+        <Hero />
+
+        {/* Game Grid Section */}
+        <GameGrid />
+      </main>
+
+      {/* Footer */}
+      <Footer />
+    </div>
+  );
+}
--- a/frontend/src/assets/react.svg
+++ b/frontend/src/assets/react.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/frontend/src/components/landing/Footer.tsx
+++ b/frontend/src/components/landing/Footer.tsx
@@ -0,0 +1,55 @@
+'use client';
+
+import React from 'react';
+
+const Footer = () => {
+  return (
+    <footer className="glass py-8 px-4" role="contentinfo">
+      <div className="container mx-auto">
+        <div className="flex flex-col md:flex-row justify-between items-center">
+          {/* System Status */}
+          <div className="flex items-center mb-4 md:mb-0">
+            <div className="flex items-center mr-2">
+              <div
+                className="w-3 h-3 rounded-full mr-2 pulse"
+                style={{ backgroundColor: 'var(--mass-effect-cyan)' }}
+              ></div>
+              <span
+                className="text-sm font-mono uppercase tracking-wider"
+                style={{ color: 'var(--mass-effect-cyan)' }}
+              >
+                SYSTEM STATUS: ONLINE
+              </span>
+            </div>
+          </div>
+
+          {/* Navigation Links */}
+          <div className="flex space-x-6 mb-4 md:mb-0">
+            <a href="#" className="text-gray-400 hover:text-cyan-400 transition-colors">
+              About
+            </a>
+            <a href="#" className="text-gray-400 hover:text-cyan-400 transition-colors">
+              Support
+            </a>
+            <a href="#" className="text-gray-400 hover:text-cyan-400 transition-colors">
+              API
+            </a>
+            <a href="#" className="text-gray-400 hover:text-cyan-400 transition-colors">
+              Privacy
+            </a>
+            <a href="#" className="text-gray-400 hover:text-cyan-400 transition-colors">
+              Terms
+            </a>
+          </div>
+
+          {/* Copyright */}
+          <div className="text-sm text-gray-400">
+            © {new Date().getFullYear()} QUASAR. All rights reserved.
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
--- a/frontend/src/components/landing/GameGrid.tsx
+++ b/frontend/src/components/landing/GameGrid.tsx
@@ -0,0 +1,189 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Card, CardContent } from '@/components/ui/card';
+import Image from 'next/image';
+
+interface Game {
+  id: number;
+  title: string;
+  coverImage: string;
+  rating: number;
+  genre: string;
+  year: number;
+  platform: string;
+}
+
+const GameGrid = () => {
+  const [hoveredGame, setHoveredGame] = useState<number | null>(null);
+
+  const games: Game[] = [
+    {
+      id: 1,
+      title: 'Nebula Warriors',
+      coverImage:
+        'https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80',
+      rating: 92,
+      genre: 'Action',
+      year: 2023,
+      platform: 'Multi',
+    },
+    {
+      id: 2,
+      title: 'Cyber Revolution',
+      coverImage:
+        'https://images.unsplash.com/photo-1550745165-9bc0b252726a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80',
+      rating: 88,
+      genre: 'RPG',
+      year: 2022,
+      platform: 'PC',
+    },
+    {
+      id: 3,
+      title: 'Quantum Escape',
+      coverImage:
+        'https://images.unsplash.com/photo-1538481199705-c710c4e965fc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80',
+      rating: 85,
+      genre: 'Puzzle',
+      year: 2023,
+      platform: 'Console',
+    },
+    {
+      id: 4,
+      title: 'Galactic Frontline',
+      coverImage:
+        'https://images.unsplash.com/photo-1550745165-9bc0b252726a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80',
+      rating: 90,
+      genre: 'Strategy',
+      year: 2023,
+      platform: 'Multi',
+    },
+    {
+      id: 5,
+      title: 'Digital Horizon',
+      coverImage:
+        'https://images.unsplash.com/photo-1518709268805-4e9042af2176?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80',
+      rating: 87,
+      genre: 'Racing',
+      year: 2022,
+      platform: 'Console',
+    },
+    {
+      id: 6,
+      title: 'Shadow Protocol',
+      coverImage:
+        'https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80',
+      rating: 91,
+      genre: 'Stealth',
+      year: 2023,
+      platform: 'PC',
+    },
+  ];
+
+  return (
+    <section className="py-16 px-4" id="games" aria-labelledby="games-title">
+      <div className="container mx-auto">
+        <h2
+          id="games-title"
+          className="text-3xl md:text-4xl font-bold text-center mb-12 uppercase tracking-wider"
+          style={{
+            color: 'var(--mass-effect-gold)',
+            textShadow: '0 0 10px var(--mass-effect-gold-glow)',
+          }}
+        >
+          Game Library
+        </h2>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          {games.map((game) => (
+            <Card
+              key={game.id}
+              className="relative overflow-hidden border-0 glass hover-glow cursor-pointer transition-all duration-300"
+              onMouseEnter={() => setHoveredGame(game.id)}
+              onMouseLeave={() => setHoveredGame(null)}
+            >
+              <div className="relative h-64">
+                <Image
+                  src={game.coverImage}
+                  alt={`Portada del juego ${game.title}`}
+                  fill
+                  className="object-cover"
+                  loading="lazy"
+                />
+
+                {/* Overlay with game info on hover */}
+                <div
+                  className={`absolute inset-0 bg-black bg-opacity-80 flex flex-col justify-end p-4 transition-opacity duration-300 ${
+                    hoveredGame === game.id ? 'opacity-100' : 'opacity-0'
+                  }`}
+                >
+                  <h3
+                    className="text-xl font-bold mb-2"
+                    style={{ color: 'var(--mass-effect-cyan)' }}
+                  >
+                    {game.title}
+                  </h3>
+
+                  <div className="grid grid-cols-2 gap-2 text-sm">
+                    <div>
+                      <span className="text-gray-400">RATING:</span>
+                      <span className="ml-2 font-bold" style={{ color: 'var(--mass-effect-gold)' }}>
+                        {game.rating}%
+                      </span>
+                    </div>
+                    <div>
+                      <span className="text-gray-400">GENRE:</span>
+                      <span className="ml-2">{game.genre}</span>
+                    </div>
+                    <div>
+                      <span className="text-gray-400">YEAR:</span>
+                      <span className="ml-2">{game.year}</span>
+                    </div>
+                    <div>
+                      <span className="text-gray-400">PLATFORM:</span>
+                      <span className="ml-2">{game.platform}</span>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Holographic border effect */}
+                {hoveredGame === game.id && (
+                  <div
+                    className="absolute inset-0 holographic pointer-events-none"
+                    aria-hidden="true"
+                  ></div>
+                )}
+              </div>
+
+              <CardContent className="p-4">
+                <h3 className="text-lg font-bold mb-2" style={{ color: 'var(--mass-effect-cyan)' }}>
+                  {game.title}
+                </h3>
+                <div className="flex justify-between items-center">
+                  <div className="flex items-center">
+                    <div
+                      className="w-2 h-2 rounded-full mr-2"
+                      style={{ backgroundColor: 'var(--mass-effect-gold)' }}
+                    ></div>
+                    <span className="text-sm text-gray-300">{game.genre}</span>
+                  </div>
+                  <div className="flex items-center">
+                    <span
+                      className="text-sm font-bold mr-1"
+                      style={{ color: 'var(--mass-effect-gold)' }}
+                    >
+                      {game.rating}
+                    </span>
+                    <span className="text-sm text-gray-400">/100</span>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default GameGrid;
--- a/frontend/src/components/landing/Hero.tsx
+++ b/frontend/src/components/landing/Hero.tsx
@@ -0,0 +1,121 @@
+'use client';
+
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import Image from 'next/image';
+
+const Hero = () => {
+  return (
+    <section
+      className="relative min-h-screen flex items-center justify-center overflow-hidden"
+      id="hero"
+      aria-labelledby="hero-title"
+    >
+      {/* Background Image */}
+      <div className="absolute inset-0 z-0">
+        <Image
+          src="https://images.unsplash.com/photo-1446776653964-20c1d3a81b06?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80"
+          alt="Fondo espacial con estrellas para el juego destacado"
+          fill
+          className="object-cover"
+          priority
+        />
+        <div className="absolute inset-0 bg-black opacity-60"></div>
+      </div>
+
+      {/* Holographic Border Effect */}
+      <div className="absolute inset-0 z-10 holographic pointer-events-none"></div>
+
+      {/* Content */}
+      <div className="relative z-20 text-center px-4 max-w-4xl mx-auto">
+        <div className="mb-6">
+          <h2
+            id="hero-title"
+            className="text-3xl md:text-4xl font-bold uppercase tracking-wider mb-4"
+            style={{
+              color: 'var(--mass-effect-gold)',
+              textShadow: '0 0 10px var(--mass-effect-gold-glow)',
+            }}
+          >
+            Featured Mission
+          </h2>
+          <h1
+            className="text-5xl md:text-7xl font-bold uppercase tracking-wider mb-6"
+            style={{
+              color: 'var(--mass-effect-cyan)',
+              textShadow: '0 0 15px var(--mass-effect-cyan-glow)',
+            }}
+          >
+            Stellar Odyssey
+          </h1>
+          <p
+            className="text-lg md:text-xl text-white max-w-2xl mx-auto mb-8"
+            style={{ textShadow: '0 0 5px rgba(0, 0, 0, 0.8)' }}
+          >
+            Embark on an epic journey through uncharted galaxies. Command your starship, explore
+            alien worlds, and uncover the mysteries of the universe in this groundbreaking space
+            exploration adventure.
+          </p>
+        </div>
+
+        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+          <Button
+            className="btn-mission text-lg px-8 py-3"
+            onClick={() => console.log('Mission Start clicked')}
+          >
+            MISSION START
+          </Button>
+          <Button
+            variant="outline"
+            className="border-cyan-500 text-cyan-500 hover:bg-cyan-500 hover:text-black text-lg px-8 py-3"
+            onClick={() => console.log('Learn More clicked')}
+          >
+            LEARN MORE
+          </Button>
+        </div>
+
+        {/* Game Stats */}
+        <div className="grid grid-cols-3 gap-4 mt-12 max-w-md mx-auto">
+          <div className="text-center">
+            <div className="text-2xl font-bold" style={{ color: 'var(--mass-effect-cyan)' }}>
+              94%
+            </div>
+            <div className="text-sm text-gray-300">RATING</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold" style={{ color: 'var(--mass-effect-cyan)' }}>
+              50+
+            </div>
+            <div className="text-sm text-gray-300">HOURS</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold" style={{ color: 'var(--mass-effect-cyan)' }}>
+              4K
+            </div>
+            <div className="text-sm text-gray-300">GRAPHICS</div>
+          </div>
+        </div>
+      </div>
+
+      {/* Scroll Indicator */}
+      <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20">
+        <div className="animate-bounce">
+          <svg
+            width="30"
+            height="30"
+            viewBox="0 0 30 30"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M15 20L8 13L9.4 11.6L15 17.2L20.6 11.6L22 13L15 20Z"
+              fill="var(--mass-effect-cyan)"
+            />
+          </svg>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Hero;
--- a/frontend/src/components/landing/Navbar.tsx
+++ b/frontend/src/components/landing/Navbar.tsx
@@ -0,0 +1,160 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+
+const Navbar = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
+  return (
+    <nav className="fixed top-0 left-0 right-0 z-50 glass">
+      <div className="container mx-auto px-4 py-4">
+        <div className="flex items-center justify-between">
+          {/* Logo */}
+          <div className="flex items-center space-x-2">
+            <h1
+              className="text-2xl font-bold text-glow-cyan"
+              style={{ color: 'var(--mass-effect-cyan)' }}
+            >
+              QUASAR
+            </h1>
+          </div>
+
+          {/* Search Bar - Desktop */}
+          <div className="hidden md:flex flex-1 max-w-md mx-8">
+            <Input
+              type="text"
+              placeholder="SEARCH GAMES..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="search-glow bg-transparent border border-gray-600 text-white placeholder-gray-400"
+              style={{ borderColor: 'var(--mass-effect-cyan)' }}
+              aria-label="Campo de búsqueda de juegos"
+            />
+          </div>
+
+          {/* Navigation Links - Desktop */}
+          <div className="hidden md:flex items-center space-x-6">
+            <a
+              href="#"
+              className="text-white hover:text-glow-cyan transition-colors"
+              style={{ textShadow: '0 0 5px var(--mass-effect-cyan-glow)' }}
+            >
+              GAMES
+            </a>
+            <a
+              href="#"
+              className="text-white hover:text-glow-cyan transition-colors"
+              style={{ textShadow: '0 0 5px var(--mass-effect-cyan-glow)' }}
+            >
+              LIBRARY
+            </a>
+            <a
+              href="#"
+              className="text-white hover:text-glow-cyan transition-colors"
+              style={{ textShadow: '0 0 5px var(--mass-effect-cyan-glow)' }}
+            >
+              STATS
+            </a>
+            <Button
+              variant="outline"
+              className="border-cyan-500 text-cyan-500 hover:bg-cyan-500 hover:text-black"
+            >
+              LOGIN
+            </Button>
+          </div>
+
+          {/* Mobile Menu Button */}
+          <div className="md:hidden">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={toggleMenu}
+              className="text-white"
+              aria-label={isMenuOpen ? 'Cerrar menú' : 'Abrir menú'}
+              aria-expanded={isMenuOpen}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                {isMenuOpen ? (
+                  <path d="M18 6L6 18M6 6l12 12" />
+                ) : (
+                  <>
+                    <line x1="4" y1="6" x2="20" y2="6" />
+                    <line x1="4" y1="12" x2="20" y2="12" />
+                    <line x1="4" y1="18" x2="20" y2="18" />
+                  </>
+                )}
+              </svg>
+            </Button>
+          </div>
+        </div>
+
+        {/* Mobile Menu */}
+        {isMenuOpen && (
+          <div className="md:hidden mt-4 glass rounded-lg p-4">
+            {/* Search Bar - Mobile */}
+            <div className="mb-4">
+              <Input
+                type="text"
+                placeholder="SEARCH GAMES..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="search-glow bg-transparent border border-gray-600 text-white placeholder-gray-400 w-full"
+                style={{ borderColor: 'var(--mass-effect-cyan)' }}
+              />
+            </div>
+
+            {/* Navigation Links - Mobile */}
+            <div className="flex flex-col space-y-3">
+              <a
+                href="#"
+                className="text-white hover:text-glow-cyan transition-colors py-2"
+                tabIndex={isMenuOpen ? 0 : -1}
+              >
+                GAMES
+              </a>
+              <a
+                href="#"
+                className="text-white hover:text-glow-cyan transition-colors py-2"
+                tabIndex={isMenuOpen ? 0 : -1}
+              >
+                LIBRARY
+              </a>
+              <a
+                href="#"
+                className="text-white hover:text-glow-cyan transition-colors py-2"
+                tabIndex={isMenuOpen ? 0 : -1}
+              >
+                STATS
+              </a>
+              <Button
+                variant="outline"
+                className="border-cyan-500 text-cyan-500 hover:bg-cyan-500 hover:text-black w-full"
+              >
+                LOGIN
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;
--- a/frontend/src/components/layout/Header.tsx
+++ b/frontend/src/components/layout/Header.tsx
@@ -1,88 +0,0 @@
-import { Link, useLocation } from '@tanstack/react-router';
-import { Menu, Search, Settings, Gamepad2, Home, FileText } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
-
-interface HeaderProps {
-  onMenuToggle?: () => void;
-}
-
-const navigation = [
-  { name: 'Dashboard', href: '/', icon: Home },
-  { name: 'Juegos', href: '/games', icon: Gamepad2 },
-  { name: 'Importar ROMs', href: '/import', icon: FileText },
-  { name: 'Configuración', href: '/settings', icon: Settings },
-];
-
-export function Header({ onMenuToggle }: HeaderProps) {
-  const location = useLocation();
-
-  return (
-    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="container flex h-14 items-center">
-        {/* Botón de menú para móviles */}
-        <Button variant="ghost" size="sm" className="mr-4 md:hidden" onClick={onMenuToggle}>
-          <Menu className="h-5 w-5" />
-          <span className="sr-only">Toggle menu</span>
-        </Button>
-
-        {/* Logo y título */}
-        <div className="mr-4 hidden md:flex">
-          <Link to="/" className="mr-6 flex items-center space-x-2">
-            <Gamepad2 className="h-6 w-6" />
-            <span className="hidden font-bold sm:inline-block">Quasar</span>
-          </Link>
-        </div>
-
-        {/* Navegación principal */}
-        <nav className="flex items-center space-x-6 text-sm font-medium">
-          {navigation.map((item) => {
-            const Icon = item.icon;
-            const isActive = location.pathname === item.href;
-
-            return (
-              <Link
-                key={item.name}
-                to={item.href}
-                className={cn(
-                  'transition-colors hover:text-foreground/80',
-                  isActive ? 'text-foreground' : 'text-foreground/60'
-                )}
-              >
-                <span className="flex items-center space-x-1">
-                  <Icon className="h-4 w-4" />
-                  <span>{item.name}</span>
-                </span>
-              </Link>
-            );
-          })}
-        </nav>
-
-        {/* Barra de búsqueda */}
-        <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
-          <div className="w-full flex-1 md:w-auto md:flex-none">
-            {/* Placeholder para barra de búsqueda */}
-            <Button
-              variant="outline"
-              className="relative h-8 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64"
-            >
-              <Search className="mr-2 h-4 w-4" />
-              Buscar juegos...
-              <kbd className="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
-                ⌘K
-              </kbd>
-            </Button>
-          </div>
-        </div>
-
-        {/* Usuario y acciones */}
-        <div className="flex items-center space-x-2">
-          <Button variant="ghost" size="sm">
-            <Settings className="h-4 w-4" />
-            <span className="sr-only">Configuración</span>
-          </Button>
-        </div>
-      </div>
-    </header>
-  );
-}
--- a/frontend/src/components/layout/Layout.tsx
+++ b/frontend/src/components/layout/Layout.tsx
@@ -1,14 +0,0 @@
-import { Outlet } from '@tanstack/react-router';
-import { AppSidebar } from './Sidebar';
-
-export function Layout() {
-  return (
-    <AppSidebar>
-      <main className="flex-1 p-6">
-        <div className="space-y-6">
-          <Outlet />
-        </div>
-      </main>
-    </AppSidebar>
-  );
-}
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -1,309 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarTrigger,
-  useSidebar,
-} from '@/components/ui/sidebar';
-import {
-  Gamepad2,
-  Home,
-  Settings,
-  User,
-  Database,
-  Star,
-  TrendingUp,
-  ChevronRight,
-  ChevronsUpDown,
-} from 'lucide-react';
-
-const data = {
-  user: {
-    name: 'Game Library',
-    email: 'admin@gamelibrary.com',
-    avatar: '/avatars/default.jpg',
-  },
-  teams: [
-    {
-      name: 'Personal',
-      logo: Gamepad2,
-      plan: 'Standard',
-    },
-    {
-      name: 'Work',
-      logo: Database,
-      plan: 'Professional',
-    },
-  ],
-  navMain: [
-    {
-      title: 'Dashboard',
-      url: '/',
-      icon: Home,
-      isActive: true,
-    },
-    {
-      title: 'Games',
-      url: '/games',
-      icon: Gamepad2,
-      items: [
-        {
-          title: 'All Games',
-          url: '/games',
-        },
-        {
-          title: 'Favorites',
-          url: '/games/favorites',
-        },
-        {
-          title: 'Recently Played',
-          url: '/games/recent',
-        },
-      ],
-    },
-    {
-      title: 'Collections',
-      url: '/collections',
-      icon: Star,
-      items: [
-        {
-          title: 'My Collections',
-          url: '/collections',
-        },
-        {
-          title: 'Shared Collections',
-          url: '/collections/shared',
-        },
-      ],
-    },
-    {
-      title: 'Statistics',
-      url: '/stats',
-      icon: TrendingUp,
-    },
-    {
-      title: 'Settings',
-      url: '/settings',
-      icon: Settings,
-    },
-  ],
-};
-
-function TeamSwitcher({
-  teams,
-}: {
-  teams: {
-    name: string;
-    logo: React.ElementType;
-    plan: string;
-  }[];
-}) {
-  const { isMobile } = useSidebar();
-  const [activeTeam, setActiveTeam] = React.useState(teams[0]);
-
-  if (!activeTeam) {
-    return null;
-  }
-
-  return (
-    <SidebarMenu>
-      <SidebarMenuItem>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <SidebarMenuButton
-              size="lg"
-              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-            >
-              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                <activeTeam.logo className="size-4" />
-              </div>
-              <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-medium">{activeTeam.name}</span>
-                <span className="truncate text-xs">{activeTeam.plan}</span>
-              </div>
-              <ChevronsUpDown className="ml-auto" />
-            </SidebarMenuButton>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
-            align="start"
-            side={isMobile ? 'bottom' : 'right'}
-            sideOffset={4}
-          >
-            <DropdownMenuGroup>
-              <DropdownMenuLabel className="text-muted-foreground text-xs">Teams</DropdownMenuLabel>
-              {teams.map((team) => (
-                <DropdownMenuItem
-                  key={team.name}
-                  onClick={() => setActiveTeam(team)}
-                  className="cursor-pointer"
-                >
-                  <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg mr-2">
-                    <team.logo className="size-4" />
-                  </div>
-                  <div className="grid flex-1 text-left text-sm leading-tight">
-                    <span className="truncate font-medium">{team.name}</span>
-                    <span className="truncate text-xs">{team.plan}</span>
-                  </div>
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuGroup>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </SidebarMenuItem>
-    </SidebarMenu>
-  );
-}
-
-function NavMain({
-  items,
-}: {
-  items: {
-    title: string;
-    url: string;
-    icon?: React.ElementType;
-    isActive?: boolean;
-    items?: {
-      title: string;
-      url: string;
-    }[];
-  }[];
-}) {
-  return (
-    <SidebarGroup>
-      <SidebarGroupLabel>Main Navigation</SidebarGroupLabel>
-      <SidebarMenu>
-        {items.map((item) => (
-          <Collapsible key={item.title} defaultOpen={item.isActive} className="group/collapsible">
-            <SidebarMenuItem>
-              <CollapsibleTrigger render={<SidebarMenuButton tooltip={item.title} />}>
-                {item.icon && <item.icon />}
-                <span>{item.title}</span>
-                <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-              </CollapsibleTrigger>
-              <CollapsibleContent>
-                <SidebarMenuSub>
-                  {item.items?.map((subItem) => (
-                    <SidebarMenuSubItem key={subItem.title}>
-                      <SidebarMenuSubButton render={<a href={subItem.url} />}>
-                        <span>{subItem.title}</span>
-                      </SidebarMenuSubButton>
-                    </SidebarMenuSubItem>
-                  ))}
-                </SidebarMenuSub>
-              </CollapsibleContent>
-            </SidebarMenuItem>
-          </Collapsible>
-        ))}
-      </SidebarMenu>
-    </SidebarGroup>
-  );
-}
-
-function NavUser({ user }: { user: { name: string; email: string; avatar: string } }) {
-  const { isMobile } = useSidebar();
-
-  return (
-    <SidebarMenu>
-      <SidebarMenuItem>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <SidebarMenuButton
-              size="lg"
-              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-            >
-              <Avatar className="h-8 w-8 rounded-full">
-                <AvatarImage src={user.avatar} alt={user.name} />
-                <AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
-              </Avatar>
-              <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-medium">{user.name}</span>
-                <span className="truncate text-xs text-muted-foreground">{user.email}</span>
-              </div>
-              <ChevronsUpDown className="ml-auto size-4" />
-            </SidebarMenuButton>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
-            align="start"
-            side={isMobile ? 'bottom' : 'right'}
-            sideOffset={4}
-          >
-            <DropdownMenuLabel className="text-muted-foreground text-xs">
-              Logged in as
-            </DropdownMenuLabel>
-            <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <User className="mr-2 h-4 w-4" />
-                <span>Profile</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <Settings className="mr-2 h-4 w-4" />
-                <span>Settings</span>
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>
-              <span>Log out</span>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </SidebarMenuItem>
-    </SidebarMenu>
-  );
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-  return (
-    <SidebarProvider>
-      <Sidebar collapsible="icon" {...props}>
-        <SidebarHeader>
-          <TeamSwitcher teams={data.teams} />
-        </SidebarHeader>
-        <SidebarContent>
-          <NavMain items={data.navMain} />
-        </SidebarContent>
-        <SidebarFooter>
-          <NavUser user={data.user} />
-        </SidebarFooter>
-        <SidebarRail />
-      </Sidebar>
-      <SidebarInset>
-        <header className="flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4 transition-[width,height] ease-linear group-has-[collapsible=icon]/sidebar-wrapper:h-12">
-          <div className="flex items-center gap-2">
-            <SidebarTrigger className="-ml-1" />
-            <div className="flex items-center gap-2">
-              <Gamepad2 className="h-6 w-6" />
-              <h1 className="text-lg font-semibold">Game Library</h1>
-            </div>
-          </div>
-        </header>
-      </SidebarInset>
-    </SidebarProvider>
-  );
-}
--- a/frontend/src/components/ui/alert.tsx
+++ b/frontend/src/components/ui/alert.tsx
@@ -1,69 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { AlertTriangle, CheckCircle, Info, XCircle } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-
-const alertVariants = cva(
-  'relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:-top-1 [&>svg]:-left-1 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-foreground',
-  {
-    variants: {
-      variant: {
-        default: 'bg-background text-foreground border',
-        destructive:
-          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
-        success: 'border-green-500/50 text-green-700 dark:border-green-500 [&>svg]:text-green-700',
-        warning:
-          'border-yellow-500/50 text-yellow-700 dark:border-yellow-500 [&>svg]:text-yellow-700',
-        info: 'border-blue-500/50 text-blue-700 dark:border-blue-500 [&>svg]:text-blue-700',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  }
-);
-
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
-));
-Alert.displayName = 'Alert';
-
-const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h5
-      ref={ref}
-      className={cn('mb-1 font-medium leading-none tracking-tight', className)}
-      {...props}
-    />
-  )
-);
-AlertTitle.displayName = 'AlertTitle';
-
-const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
-));
-AlertDescription.displayName = 'AlertDescription';
-
-const AlertIcon = ({ variant }: { variant?: VariantProps<typeof alertVariants>['variant'] }) => {
-  switch (variant) {
-    case 'destructive':
-      return <XCircle className="h-4 w-4" />;
-    case 'success':
-      return <CheckCircle className="h-4 w-4" />;
-    case 'warning':
-      return <AlertTriangle className="h-4 w-4" />;
-    case 'info':
-      return <Info className="h-4 w-4" />;
-    default:
-      return <Info className="h-4 w-4" />;
-  }
-};
-
-export { Alert, AlertTitle, AlertDescription, AlertIcon };
--- a/frontend/src/components/ui/badge.tsx
+++ b/frontend/src/components/ui/badge.tsx
@@ -1,31 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
-
-const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-  {
-    variants: {
-      variant: {
-        default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
-        secondary:
-          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        destructive:
-          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
-        outline: 'text-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  }
-);
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
-}
-
-export { Badge, badgeVariants };
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -1,47 +1,64 @@
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"

 const buttonVariants = cva(
-  'inline-flex items-center justify-center 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',
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        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 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
      },
    },
    defaultVariants: {
-      variant: 'default',
-      size: 'default',
+      variant: "default",
+      size: "default",
    },
  }
-);
+)

-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
 }

-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
-    return (
-      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
-    );
-  }
-);
-Button.displayName = 'Button';
-
-export { Button, buttonVariants };
+export { Button, buttonVariants }
--- a/frontend/src/components/ui/card.tsx
+++ b/frontend/src/components/ui/card.tsx
@@ -1,55 +1,92 @@
-import * as React from 'react';
-import { cn } from '@/lib/utils';
+import * as React from "react"

-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
    <div
-      ref={ref}
-      className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 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<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h3
-      ref={ref}
-      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
      {...props}
    />
  )
-);
-CardTitle.displayName = 'CardTitle';
+}

-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p 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} />
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", 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} />
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
  )
-);
-CardFooter.displayName = 'CardFooter';
+}

-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
--- a/frontend/src/components/ui/checkbox.tsx
+++ b/frontend/src/components/ui/checkbox.tsx
@@ -1,26 +0,0 @@
-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 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 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/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -1,23 +1,21 @@
-import * as React from 'react';
-import { cn } from '@/lib/utils';
+import * as React from "react"

-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+import { cn } from "@/lib/utils"

-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-Input.displayName = 'Input';
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}

-export { Input };
+export { Input }
--- a/frontend/src/components/ui/label.tsx
+++ b/frontend/src/components/ui/label.tsx
@@ -1,19 +0,0 @@
-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/scroll-area.tsx
+++ b/frontend/src/components/ui/scroll-area.tsx
@@ -1,44 +0,0 @@
-import * as React from 'react';
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-
-import { cn } from '@/lib/utils';
-
-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn('relative overflow-hidden', className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = 'vertical', ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      'flex touch-none select-none transition-colors',
-      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
-      orientation === 'horizontal' && 'h-2.5 w-full border-t border-t-transparent p-[1px]',
-      className
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
-export { ScrollArea, ScrollBar };
--- a/frontend/src/components/ui/select.tsx
+++ b/frontend/src/components/ui/select.tsx
@@ -1,151 +0,0 @@
-import * as React from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { Check, ChevronDown, ChevronUp } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-
-const Select = SelectPrimitive.Root;
-
-const SelectGroup = SelectPrimitive.Group;
-
-const SelectValue = SelectPrimitive.Value;
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn('flex cursor-default items-center justify-center py-1', className)}
-    {...props}
-  >
-    <ChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn('flex cursor-default items-center justify-center py-1', className)}
-    {...props}
-  >
-    <ChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-));
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = 'popper', ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        position === 'popper' &&
-          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-        className
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          'p-1',
-          position === 'popper' &&
-            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
-    {...props}
-  />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
-    {...props}
-  />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-};
--- a/frontend/src/components/ui/table.tsx
+++ b/frontend/src/components/ui/table.tsx
@@ -1,91 +0,0 @@
-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-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
-      className
-    )}
-    {...props}
-  />
-));
-TableHead.displayName = 'TableHead';
-
-const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', 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/components/ui/textarea.tsx
+++ b/frontend/src/components/ui/textarea.tsx
@@ -1,23 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-Textarea.displayName = 'Textarea';
-
-export { Textarea };
--- a/frontend/src/form/config.tsx
+++ b/frontend/src/form/config.tsx
@@ -1,98 +0,0 @@
-import { z } from 'zod';
-
-// Esquemas de validación comunes
-export const commonSchemas = {
-  // Validación de strings
-  string: (min = 1, max = 255) =>
-    z.string().min(min, 'Este campo es requerido').max(max, 'Máximo 255 caracteres'),
-
-  // Validación de emails
-  email: z.string().email('Por favor ingresa un email válido').min(1, 'Este campo es requerido'),
-
-  // Validación de números
-  number: (min = 0, max = Number.MAX_SAFE_INTEGER) =>
-    z.number().min(min, 'Debe ser un número positivo').max(max, 'Número demasiado grande'),
-
-  // Validación de fechas
-  date: z
-    .date()
-    .refine(
-      (date) => date instanceof Date && !isNaN(date.getTime()),
-      'Por favor ingresa una fecha válida'
-    ),
-
-  // Validación de booleanos
-  boolean: z.boolean(),
-
-  // Validación de arrays
-  array: (min = 1, max = 100) =>
-    z
-      .array(z.unknown())
-      .min(min, 'Al menos un elemento requerido')
-      .max(max, 'Máximo 100 elementos'),
-};
-
-// Función para manejar errores de formulario
-export function getFieldError(
-  fieldErrors: Record<string, string[]>,
-  fieldName: string
-): string | undefined {
-  const errors = fieldErrors[fieldName];
-  return errors?.[0];
-}
-
-// Función para manejar errores de formulario global
-export function getGlobalError(fieldErrors: Record<string, string[]>): string | undefined {
-  const globalErrors = Object.values(fieldErrors).flat();
-  return globalErrors?.[0];
-}
-
-// Esquemas específicos para la aplicación
-export const appSchemas = {
-  // Esquema para crear/editar juegos
-  gameSchema: z.object({
-    title: commonSchemas.string(1, 100),
-    description: commonSchemas.string(0, 2000),
-    platformId: commonSchemas.number(1, Number.MAX_SAFE_INTEGER),
-    releaseYear: commonSchemas.number(1900, new Date().getFullYear() + 5),
-    rating: z.number().min(0).max(10).optional(),
-    tags: commonSchemas.array(0, 50).optional(),
-    romFile: z.string().optional(),
-    metadataSource: z.enum(['igdb', 'rawg', 'thegamesdb', 'manual']).optional(),
-  }),
-
-  // Esquema para importar ROMs
-  importRomSchema: z.object({
-    romPath: commonSchemas.string(1, 500),
-    platformId: commonSchemas.number(1, Number.MAX_SAFE_INTEGER),
-    autoScan: z.boolean().default(true),
-  }),
-
-  // Esquema para configuración
-  settingsSchema: z.object({
-    igdbApiKey: commonSchemas.string(0, 100).optional(),
-    rawgApiKey: commonSchemas.string(0, 100).optional(),
-    thegamesdbApiKey: commonSchemas.string(0, 100).optional(),
-    defaultRomDirectory: commonSchemas.string(0, 500).optional(),
-    autoImportEnabled: z.boolean().default(true),
-    metadataSourcePriority: z
-      .array(z.enum(['igdb', 'rawg', 'thegamesdb']))
-      .default(['igdb', 'rawg', 'thegamesdb']),
-  }),
-
-  // Esquema para plataformas
-  platformSchema: z.object({
-    name: commonSchemas.string(1, 50),
-    description: commonSchemas.string(0, 500),
-    manufacturer: commonSchemas.string(0, 100),
-    releaseYear: commonSchemas.number(1900, new Date().getFullYear() + 5),
-    romExtension: z.string().optional(),
-  }),
-
-  // Esquema para etiquetas
-  tagSchema: z.object({
-    name: commonSchemas.string(1, 30),
-    color: z.string().regex(/^#[0-9A-F]{6}$/i, 'Color inválido. Use formato #RRGGBB'),
-    description: commonSchemas.string(0, 200),
-  }),
-};
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,68 +0,0 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"

 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
+  return twMerge(clsx(inputs))
 }
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,10 +0,0 @@
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import './styles/globals.css';
-import App from './App.tsx';
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-);
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -1,232 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import {
-  Gamepad2,
-  Database,
-  Tag,
-  Download,
-  Upload,
-  TrendingUp,
-  Clock,
-  AlertCircle,
-} from 'lucide-react';
-
-// Datos simulados para el dashboard
-const stats = {
-  totalGames: 156,
-  gamesWithRom: 128,
-  gamesWithoutRom: 28,
-  gamesWithMetadata: 142,
-  gamesWithoutMetadata: 14,
-  totalPlatforms: 12,
-  totalTags: 45,
-  averageRating: 7.8,
-};
-
-const recentGames = [
-  {
-    id: 1,
-    title: 'The Legend of Zelda: Breath of the Wild',
-    platform: 'Nintendo Switch',
-    rating: 9.5,
-    addedDate: '2024-01-10',
-  },
-  { id: 2, title: 'God of War', platform: 'PlayStation 4', rating: 9.2, addedDate: '2024-01-09' },
-  { id: 3, title: 'Cyberpunk 2077', platform: 'PC', rating: 8.7, addedDate: '2024-01-08' },
-  {
-    id: 4,
-    title: 'Super Mario Odyssey',
-    platform: 'Nintendo Switch',
-    rating: 9.0,
-    addedDate: '2024-01-07',
-  },
-  {
-    id: 5,
-    title: 'Red Dead Redemption 2',
-    platform: 'PlayStation 4',
-    rating: 9.3,
-    addedDate: '2024-01-06',
-  },
-];
-
-const pendingTasks = [
-  { id: 1, title: 'Enriquecer metadata para 14 juegos', priority: 'high', type: 'metadata' },
-  { id: 2, title: 'Importar 28 ROMs detectadas', priority: 'medium', type: 'import' },
-  { id: 3, title: 'Actualizar información de 5 juegos', priority: 'low', type: 'update' },
-];
-
-export function DashboardPage() {
-  return (
-    <div className="space-y-6">
-      {/* Encabezado */}
-      <div>
-        <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
-        <p className="text-muted-foreground">Resumen general de tu colección de videojuegos</p>
-      </div>
-
-      {/* Estadísticas principales */}
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Total de Juegos</CardTitle>
-            <Gamepad2 className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{stats.totalGames}</div>
-            <p className="text-xs text-muted-foreground">+12% desde el mes pasado</p>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Juegos con ROM</CardTitle>
-            <Download className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{stats.gamesWithRom}</div>
-            <p className="text-xs text-muted-foreground">de {stats.totalGames} juegos</p>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Juegos con Metadata</CardTitle>
-            <Database className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{stats.gamesWithMetadata}</div>
-            <p className="text-xs text-muted-foreground">{stats.gamesWithoutMetadata} pendientes</p>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Plataformas</CardTitle>
-            <Tag className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{stats.totalPlatforms}</div>
-            <p className="text-xs text-muted-foreground">{stats.totalTags} etiquetas</p>
-          </CardContent>
-        </Card>
-      </div>
-
-      <div className="grid gap-6 md:grid-cols-2">
-        {/* Tareas pendientes */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Tareas Pendientes</CardTitle>
-            <CardDescription>
-              Acciones necesarias para mantener tu colección actualizada
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              {pendingTasks.map((task) => (
-                <div key={task.id} className="flex items-center space-x-3">
-                  <div className="flex-shrink-0">
-                    {task.priority === 'high' && <AlertCircle className="h-5 w-5 text-red-500" />}
-                    {task.priority === 'medium' && <Clock className="h-5 w-5 text-yellow-500" />}
-                    {task.priority === 'low' && <TrendingUp className="h-5 w-5 text-green-500" />}
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <p className="text-sm font-medium text-gray-900 truncate">{task.title}</p>
-                    <div className="flex items-center space-x-2 mt-1">
-                      <Badge variant="secondary" className="text-xs">
-                        {task.type}
-                      </Badge>
-                      <Badge
-                        variant={
-                          task.priority === 'high'
-                            ? 'destructive'
-                            : task.priority === 'medium'
-                              ? 'default'
-                              : 'secondary'
-                        }
-                        className="text-xs"
-                      >
-                        {task.priority}
-                      </Badge>
-                    </div>
-                  </div>
-                  <Button size="sm" variant="outline">
-                    Ver
-                  </Button>
-                </div>
-              ))}
-            </div>
-            <div className="mt-4 pt-4 border-t">
-              <Button className="w-full" variant="outline">
-                Ver todas las tareas
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Juegos recientes */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Juegos Recientes</CardTitle>
-            <CardDescription>Últimos juegos añadidos a tu colección</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              {recentGames.map((game) => (
-                <div key={game.id} className="flex items-center space-x-3">
-                  <div className="flex-shrink-0">
-                    <div className="h-10 w-10 bg-gray-200 rounded-md flex items-center justify-center">
-                      <Gamepad2 className="h-6 w-6 text-gray-400" />
-                    </div>
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <p className="text-sm font-medium text-gray-900 truncate">{game.title}</p>
-                    <div className="flex items-center space-x-2 mt-1">
-                      <Badge variant="outline" className="text-xs">
-                        {game.platform}
-                      </Badge>
-                      <div className="flex items-center">
-                        <span className="text-sm text-gray-500">★</span>
-                        <span className="text-sm font-medium ml-1">{game.rating}</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="text-sm text-gray-500">{game.addedDate}</div>
-                </div>
-              ))}
-            </div>
-            <div className="mt-4 pt-4 border-t">
-              <Button className="w-full" variant="outline">
-                Ver todos los juegos
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Acciones rápidas */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Acciones Rápidas</CardTitle>
-          <CardDescription>Acciones comunes para gestionar tu colección</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="grid gap-4 md:grid-cols-3">
-            <Button className="h-auto p-4 flex flex-col items-center space-y-2" variant="outline">
-              <Download className="h-6 w-6" />
-              <span>Importar ROMs</span>
-            </Button>
-            <Button className="h-auto p-4 flex flex-col items-center space-y-2" variant="outline">
-              <Upload className="h-6 w-6" />
-              <span>Exportar Datos</span>
-            </Button>
-            <Button className="h-auto p-4 flex flex-col items-center space-y-2" variant="outline">
-              <Database className="h-6 w-6" />
-              <span>Gestionar Plataformas</span>
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
--- a/frontend/src/pages/GameDetailPage.tsx
+++ b/frontend/src/pages/GameDetailPage.tsx
@@ -1,350 +0,0 @@
-import { useState } from 'react';
-import { useNavigate, useParams } from '@tanstack/react-router';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { Label } from '@/components/ui/label';
-import { Alert, AlertDescription } from '@/components/ui/alert';
-import {
-  ArrowLeft,
-  Edit,
-  Trash2,
-  Download,
-  Star,
-  Calendar,
-  HardDrive,
-  Tag,
-  ExternalLink,
-  Info,
-  AlertCircle,
-} from 'lucide-react';
-import { Game } from '@/types';
-
-// Datos simulados para el detalle del juego
-const mockGame: Game = {
-  id: 1,
-  title: 'The Legend of Zelda: Breath of the Wild',
-  description:
-    'The Legend of Zelda: Breath of the Wild es un juego de acción-aventura desarrollado y publicado por Nintendo para la consola Nintendo Switch y la consola Wii U. Es el decimonoveno juego principal de la serie The Legend of Zelda y fue lanzado mundialmente en marzo de 2017. El juego presenta un mundo abierto con un diseño de física y química avanzado que permite a los jugadores resolver problemas de man creativas.',
-  platformId: 1,
-  platform: {
-    id: 1,
-    name: 'Nintendo Switch',
-    description: 'Consola híbrida de Nintendo',
-    manufacturer: 'Nintendo',
-    releaseYear: 2017,
-    romExtension: 'nsp',
-  },
-  releaseYear: 2017,
-  rating: 9.5,
-  tags: [
-    { id: 1, name: 'Aventura', color: '#3B82F6', description: 'Juegos de aventura' },
-    { id: 2, name: 'Acción', color: '#EF4444', description: 'Juegos de acción' },
-    { id: 3, name: 'Open World', color: '#10B981', description: 'Mundo abierto' },
-  ],
-  romFile: {
-    id: 1,
-    filename: 'zelda_botw.nsp',
-    path: '/roms/nintendo-switch',
-    size: 14485760,
-    checksum: 'abc123def456',
-    gameId: 1,
-  },
-  metadataSource: 'manual',
-  igdbId: '12345',
-  rawgId: '67890',
-  thegamesdbId: '54321',
-  createdAt: new Date('2024-01-10'),
-  updatedAt: new Date('2024-01-15'),
-};
-
-export function GameDetailPage() {
-  const navigate = useNavigate();
-  const { gameId } = useParams({ from: '/games/$gameId' });
-  const [game] = useState<Game>(mockGame);
-
-  const handleEdit = () => {
-    navigate({ to: `/games/${game.id}/edit` });
-  };
-
-  const handleDelete = () => {
-    // TODO: Implementar eliminación del juego
-    console.log('Eliminar juego:', game.id);
-  };
-
-  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];
-  };
-
-  return (
-    <div className="space-y-6">
-      {/* Encabezado con botón de retroceso */}
-      <div className="flex items-center gap-4">
-        <Button variant="ghost" onClick={() => navigate({ to: '/games' })} className="gap-2">
-          <ArrowLeft className="h-4 w-4" />
-          Volver
-        </Button>
-        <div>
-          <h1 className="text-3xl font-bold tracking-tight">{game.title}</h1>
-          <p className="text-muted-foreground">Detalles del juego</p>
-        </div>
-      </div>
-
-      {/* Acciones */}
-      <div className="flex gap-2">
-        <Button onClick={handleEdit} className="gap-2">
-          <Edit className="h-4 w-4" />
-          Editar
-        </Button>
-        <Button variant="outline" className="gap-2">
-          <Download className="h-4 w-4" />
-          Descargar ROM
-        </Button>
-        <Button
-          variant="outline"
-          onClick={handleDelete}
-          className="gap-2 text-destructive hover:text-destructive"
-        >
-          <Trash2 className="h-4 w-4" />
-          Eliminar
-        </Button>
-      </div>
-
-      <div className="grid gap-6 md:grid-cols-3">
-        {/* Información principal */}
-        <div className="md:col-span-2 space-y-6">
-          {/* Descripción */}
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <Info className="h-5 w-5" />
-                Descripción
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="text-muted-foreground leading-relaxed">{game.description}</p>
-            </CardContent>
-          </Card>
-
-          {/* Información técnica */}
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <HardDrive className="h-5 w-5" />
-                Información Técnica
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="grid gap-4 md:grid-cols-2">
-                <div>
-                  <Label className="text-sm font-medium">Plataforma</Label>
-                  <p className="text-sm text-muted-foreground">{game.platform?.name}</p>
-                </div>
-                <div>
-                  <Label className="text-sm font-medium">Año de lanzamiento</Label>
-                  <p className="text-sm text-muted-foreground">
-                    {game.releaseYear || 'Desconocido'}
-                  </p>
-                </div>
-                <div>
-                  <Label className="text-sm font-medium">Tamaño del archivo</Label>
-                  <p className="text-sm text-muted-foreground">
-                    {game.romFile ? formatFileSize(game.romFile.size) : 'No disponible'}
-                  </p>
-                </div>
-                <div>
-                  <Label className="text-sm font-medium">Checksum</Label>
-                  <p className="text-sm font-mono text-muted-foreground">
-                    {game.romFile ? game.romFile.checksum : 'No disponible'}
-                  </p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Etiquetas */}
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <Tag className="h-5 w-5" />
-                Etiquetas
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="flex flex-wrap gap-2">
-                {game.tags.map((tag) => (
-                  <Badge
-                    key={tag.id}
-                    variant="secondary"
-                    style={{ backgroundColor: tag.color }}
-                    className="text-white"
-                  >
-                    {tag.name}
-                  </Badge>
-                ))}
-                {game.tags.length === 0 && (
-                  <p className="text-sm text-muted-foreground">No hay etiquetas asignadas</p>
-                )}
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* Panel lateral */}
-        <div className="space-y-6">
-          {/* Estado del juego */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Estado</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="flex items-center justify-between">
-                <span className="text-sm font-medium">Calificación</span>
-                <div className="flex items-center gap-1">
-                  <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
-                  <span className="font-medium">{game.rating || '-'}</span>
-                </div>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-sm font-medium">ROM</span>
-                <Badge variant={game.romFile ? 'default' : 'secondary'}>
-                  {game.romFile ? 'Disponible' : 'No disponible'}
-                </Badge>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-sm font-medium">Metadata</span>
-                <Badge variant={game.metadataSource ? 'default' : 'secondary'}>
-                  {game.metadataSource || 'Manual'}
-                </Badge>
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Fuentes externas */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Fuentes Externas</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-3">
-              <div className="flex items-center justify-between">
-                <span className="text-sm">IGDB</span>
-                <div className="flex items-center gap-2">
-                  {game.igdbId ? (
-                    <>
-                      <Badge variant="outline">Conectado</Badge>
-                      <Button size="sm" variant="ghost">
-                        <ExternalLink className="h-3 w-3" />
-                      </Button>
-                    </>
-                  ) : (
-                    <Badge variant="secondary">No conectado</Badge>
-                  )}
-                </div>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-sm">RAWG</span>
-                <div className="flex items-center gap-2">
-                  {game.rawgId ? (
-                    <>
-                      <Badge variant="outline">Conectado</Badge>
-                      <Button size="sm" variant="ghost">
-                        <ExternalLink className="h-3 w-3" />
-                      </Button>
-                    </>
-                  ) : (
-                    <Badge variant="secondary">No conectado</Badge>
-                  )}
-                </div>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-sm">TheGamesDB</span>
-                <div className="flex items-center gap-2">
-                  {game.thegamesdbId ? (
-                    <>
-                      <Badge variant="outline">Conectado</Badge>
-                      <Button size="sm" variant="ghost">
-                        <ExternalLink className="h-3 w-3" />
-                      </Button>
-                    </>
-                  ) : (
-                    <Badge variant="secondary">No conectado</Badge>
-                  )}
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Fechas */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Información de Registro</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-3">
-              <div>
-                <Label className="text-sm font-medium">Fecha de creación</Label>
-                <p className="text-sm text-muted-foreground">
-                  {game.createdAt.toLocaleDateString()}
-                </p>
-              </div>
-              <div>
-                <Label className="text-sm font-medium">Última actualización</Label>
-                <p className="text-sm text-muted-foreground">
-                  {game.updatedAt.toLocaleDateString()}
-                </p>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      </div>
-
-      {/* Acciones adicionales */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Acciones Rápidas</CardTitle>
-          <CardDescription>Acciones adicionales para gestionar este juego</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-            <Button variant="outline" className="gap-2">
-              <ExternalLink className="h-4 w-4" />
-              Buscar Metadata
-            </Button>
-            <Button variant="outline" className="gap-2">
-              <Calendar className="h-4 w-4" />
-              Añadir Fecha de Compra
-            </Button>
-            <Button variant="outline" className="gap-2">
-              <Tag className="h-4 w-4" />
-              Gestionar Etiquetas
-            </Button>
-            <Button variant="outline" className="gap-2">
-              <Download className="h-4 w-4" />
-              Exportar Datos
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Alerta de información */}
-      <Alert>
-        <Info className="h-4 w-4" />
-        <AlertDescription>
-          Esta es una vista previa del juego. Algunas características pueden no estar completamente
-          implementadas en esta versión de demostración.
-        </AlertDescription>
-      </Alert>
-    </div>
-  );
-}
--- a/frontend/src/pages/GamesPage.tsx
+++ b/frontend/src/pages/GamesPage.tsx
@@ -1,435 +0,0 @@
-import { useState } from 'react';
-import { useNavigate } from '@tanstack/react-router';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Badge } from '@/components/ui/badge';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Label } from '@/components/ui/label';
-import { Search, Filter, Plus, Eye, Edit, Trash2, Star } from 'lucide-react';
-import { Game } from '@/types';
-
-// Datos simulados para la lista de juegos
-const mockGames: Game[] = [
-  {
-    id: 1,
-    title: 'The Legend of Zelda: Breath of the Wild',
-    description: 'Un juego de acción-aventura desarrollado por Nintendo',
-    platformId: 1,
-    platform: { id: 1, name: 'Nintendo Switch', description: 'Consola híbrida de Nintendo' },
-    releaseYear: 2017,
-    rating: 9.5,
-    tags: [{ id: 1, name: 'Aventura', color: '#3B82F6', description: 'Juegos de aventura' }],
-    romFile: {
-      id: 1,
-      filename: 'zelda_botw.nsp',
-      path: '/roms/nintendo-switch',
-      size: 14485760,
-      checksum: 'abc123',
-    },
-    metadataSource: 'manual',
-    createdAt: new Date('2024-01-10'),
-    updatedAt: new Date('2024-01-10'),
-  },
-  {
-    id: 2,
-    title: 'God of War',
-    description: 'Un juego de acción-aventura basado en la mitología nórdica',
-    platformId: 2,
-    platform: { id: 2, name: 'PlayStation 4', description: 'Consola de Sony' },
-    releaseYear: 2018,
-    rating: 9.2,
-    tags: [{ id: 2, name: 'Acción', color: '#EF4444', description: 'Juegos de acción' }],
-    romFile: {
-      id: 2,
-      filename: 'god_of_war.iso',
-      path: '/roms/ps4',
-      size: 45234120,
-      checksum: 'def456',
-    },
-    metadataSource: 'igdb',
-    createdAt: new Date('2024-01-09'),
-    updatedAt: new Date('2024-01-09'),
-  },
-  {
-    id: 3,
-    title: 'Cyberpunk 2077',
-    description: 'Un RPG de acción en mundo abierto ambientado en Night City',
-    platformId: 3,
-    platform: { id: 3, name: 'PC', description: 'Plataforma de computadora personal' },
-    releaseYear: 2020,
-    rating: 8.7,
-    tags: [{ id: 3, name: 'RPG', color: '#10B981', description: 'Juegos de rol' }],
-    romFile: undefined,
-    metadataSource: 'rawg',
-    createdAt: new Date('2024-01-08'),
-    updatedAt: new Date('2024-01-08'),
-  },
-];
-
-const platforms = [
-  { id: 1, name: 'Nintendo Switch' },
-  { id: 2, name: 'PlayStation 4' },
-  { id: 3, name: 'PC' },
-  { id: 4, name: 'Xbox One' },
-];
-
-const tags = [
-  { id: 1, name: 'Aventura', color: '#3B82F6' },
-  { id: 2, name: 'Acción', color: '#EF4444' },
-  { id: 3, name: 'RPG', color: '#10B981' },
-  { id: 4, name: 'Estrategia', color: '#F59E0B' },
-];
-
-export function GamesPage() {
-  const navigate = useNavigate();
-  const [searchTerm, setSearchTerm] = useState('');
-  const [selectedPlatform, setSelectedPlatform] = useState<string>('');
-  const [selectedTags, setSelectedTags] = useState<string[]>([]);
-  const [sortBy, setSortBy] = useState<string>('title');
-  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
-  const [currentPage, setCurrentPage] = useState(1);
-  const [games] = useState<Game[]>(mockGames);
-
-  // Filtrar y ordenar juegos
-  const filteredGames = games
-    .filter((game) => {
-      const matchesSearch =
-        game.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        game.description?.toLowerCase().includes(searchTerm.toLowerCase());
-      const matchesPlatform = !selectedPlatform || game.platformId.toString() === selectedPlatform;
-      const matchesTags =
-        selectedTags.length === 0 ||
-        selectedTags.some((tagId) => game.tags.some((tag) => tag.id.toString() === tagId));
-
-      return matchesSearch && matchesPlatform && matchesTags;
-    })
-    .sort((a, b) => {
-      let aValue: string | number = '';
-      let bValue: string | number = '';
-
-      switch (sortBy) {
-        case 'title':
-          aValue = a.title?.toLowerCase() || '';
-          bValue = b.title?.toLowerCase() || '';
-          break;
-        case 'platform':
-          aValue = a.platform?.name?.toLowerCase() || '';
-          bValue = b.platform?.name?.toLowerCase() || '';
-          break;
-        case 'releaseYear':
-          aValue = a.releaseYear || 0;
-          bValue = b.releaseYear || 0;
-          break;
-        case 'rating':
-          aValue = a.rating || 0;
-          bValue = b.rating || 0;
-          break;
-        default:
-          aValue = a.title?.toLowerCase() || '';
-          bValue = b.title?.toLowerCase() || '';
-      }
-
-      if (sortOrder === 'asc') {
-        return aValue > bValue ? 1 : -1;
-      } else {
-        return aValue < bValue ? 1 : -1;
-      }
-    });
-
-  const handleSort = (field: string) => {
-    if (sortBy === field) {
-      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
-    } else {
-      setSortBy(field);
-      setSortOrder('asc');
-    }
-  };
-
-  const handleTagToggle = (tagId: string) => {
-    setSelectedTags((prev) =>
-      prev.includes(tagId) ? prev.filter((id) => id !== tagId) : [...prev, tagId]
-    );
-  };
-
-  const clearFilters = () => {
-    setSearchTerm('');
-    setSelectedPlatform('');
-    setSelectedTags([]);
-    setSortBy('title');
-    setSortOrder('asc');
-    setCurrentPage(1);
-  };
-
-  const handleGameClick = (gameId: number) => {
-    navigate({ to: `/games/${gameId}` });
-  };
-
-  return (
-    <div className="space-y-6">
-      {/* Encabezado */}
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-        <div>
-          <h1 className="text-3xl font-bold tracking-tight">Juegos</h1>
-          <p className="text-muted-foreground">Gestiona tu colección de videojuegos</p>
-        </div>
-        <Button onClick={() => navigate({ to: '/games/create' })}>
-          <Plus className="mr-2 h-4 w-4" />
-          Nuevo Juego
-        </Button>
-      </div>
-
-      {/* Filtros */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <Filter className="h-5 w-5" />
-            Filtros y Búsqueda
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-            {/* Búsqueda */}
-            <div className="space-y-2">
-              <Label htmlFor="search">Buscar</Label>
-              <div className="relative">
-                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-                <Input
-                  id="search"
-                  placeholder="Buscar juegos..."
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                  className="pl-8"
-                />
-              </div>
-            </div>
-
-            {/* Plataforma */}
-            <div className="space-y-2">
-              <Label htmlFor="platform">Plataforma</Label>
-              <Select value={selectedPlatform} onValueChange={setSelectedPlatform}>
-                <SelectTrigger>
-                  <SelectValue placeholder="Todas las plataformas" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="">Todas las plataformas</SelectItem>
-                  {platforms.map((platform) => (
-                    <SelectItem key={platform.id} value={platform.id.toString()}>
-                      {platform.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            {/* Ordenar por */}
-            <div className="space-y-2">
-              <Label htmlFor="sort">Ordenar por</Label>
-              <Select value={sortBy} onValueChange={setSortBy}>
-                <SelectTrigger>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="title">Título</SelectItem>
-                  <SelectItem value="releaseYear">Año de lanzamiento</SelectItem>
-                  <SelectItem value="rating">Calificación</SelectItem>
-                  <SelectItem value="platform">Plataforma</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            {/* Acciones */}
-            <div className="space-y-2">
-              <Label>&nbsp;</Label>
-              <div className="flex gap-2">
-                <Button variant="outline" onClick={clearFilters}>
-                  Limpiar filtros
-                </Button>
-              </div>
-            </div>
-          </div>
-
-          {/* Filtros de etiquetas */}
-          <div className="mt-4 space-y-2">
-            <Label>Etiquetas</Label>
-            <div className="flex flex-wrap gap-2">
-              {tags.map((tag) => (
-                <Badge
-                  key={tag.id}
-                  variant={selectedTags.includes(tag.id.toString()) ? 'default' : 'outline'}
-                  className="cursor-pointer"
-                  style={
-                    selectedTags.includes(tag.id.toString()) ? { backgroundColor: tag.color } : {}
-                  }
-                  onClick={() => handleTagToggle(tag.id.toString())}
-                >
-                  {tag.name}
-                </Badge>
-              ))}
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Tabla de juegos */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Lista de Juegos ({filteredGames.length})</CardTitle>
-          <CardDescription>
-            {filteredGames.length === 0 ? 'No se encontraron juegos' : 'Juegos en tu colección'}
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="rounded-md border">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead
-                    className="cursor-pointer hover:bg-muted/50"
-                    onClick={() => handleSort('title')}
-                  >
-                    Título {sortBy === 'title' && (sortOrder === 'asc' ? '↑' : '↓')}
-                  </TableHead>
-                  <TableHead>Plataforma</TableHead>
-                  <TableHead
-                    className="cursor-pointer hover:bg-muted/50"
-                    onClick={() => handleSort('releaseYear')}
-                  >
-                    Año {sortBy === 'releaseYear' && (sortOrder === 'asc' ? '↑' : '↓')}
-                  </TableHead>
-                  <TableHead
-                    className="cursor-pointer hover:bg-muted/50"
-                    onClick={() => handleSort('rating')}
-                  >
-                    Calificación {sortBy === 'rating' && (sortOrder === 'asc' ? '↑' : '↓')}
-                  </TableHead>
-                  <TableHead>Etiquetas</TableHead>
-                  <TableHead>ROM</TableHead>
-                  <TableHead className="w-[100px]">Acciones</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {filteredGames.map((game) => (
-                  <TableRow
-                    key={game.id}
-                    className="cursor-pointer hover:bg-muted/50"
-                    onClick={() => handleGameClick(game.id)}
-                  >
-                    <TableCell className="font-medium">{game.title}</TableCell>
-                    <TableCell>{game.platform?.name}</TableCell>
-                    <TableCell>{game.releaseYear || '-'}</TableCell>
-                    <TableCell>
-                      {game.rating ? (
-                        <div className="flex items-center gap-1">
-                          <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
-                          <span>{game.rating}</span>
-                        </div>
-                      ) : (
-                        '-'
-                      )}
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex flex-wrap gap-1">
-                        {game.tags.map((tag) => (
-                          <Badge
-                            key={tag.id}
-                            variant="secondary"
-                            style={{ backgroundColor: tag.color }}
-                            className="text-white"
-                          >
-                            {tag.name}
-                          </Badge>
-                        ))}
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      {game.romFile ? (
-                        <Badge variant="default">✓</Badge>
-                      ) : (
-                        <Badge variant="secondary">-</Badge>
-                      )}
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex items-center gap-1">
-                        <Button
-                          size="sm"
-                          variant="ghost"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            navigate({ to: `/games/${game.id}` });
-                          }}
-                        >
-                          <Eye className="h-4 w-4" />
-                        </Button>
-                        <Button
-                          size="sm"
-                          variant="ghost"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            navigate({ to: `/games/${game.id}/edit` });
-                          }}
-                        >
-                          <Edit className="h-4 w-4" />
-                        </Button>
-                        <Button
-                          size="sm"
-                          variant="ghost"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            // TODO: Implementar eliminación
-                          }}
-                        >
-                          <Trash2 className="h-4 w-4" />
-                        </Button>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-
-          {/* Paginación */}
-          <div className="flex items-center justify-between space-x-2 py-4">
-            <div className="text-sm text-muted-foreground">
-              Mostrando {filteredGames.length} juegos
-            </div>
-            <div className="flex items-center space-x-2">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
-                disabled={currentPage === 1}
-              >
-                Anterior
-              </Button>
-              <span className="text-sm">Página {currentPage}</span>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setCurrentPage(currentPage + 1)}
-                disabled={filteredGames.length < 10}
-              >
-                Siguiente
-              </Button>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
--- a/frontend/src/query/client.tsx
+++ b/frontend/src/query/client.tsx
@@ -1,36 +0,0 @@
-import { QueryClient } from '@tanstack/react-query';
-
-export const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      staleTime: 1000 * 60 * 5, // 5 minutos
-      refetchOnWindowFocus: false,
-      retry: (failureCount, error) => {
-        // No reintentar si es un error de 404 o 401
-        if (error instanceof Error) {
-          const status = (error as any).status;
-          if (status === 404 || status === 401) {
-            return false;
-          }
-        }
-        // Reintentar hasta 3 veces para otros errores
-        return failureCount < 3;
-      },
-      retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000), // Exponential backoff
-    },
-    mutations: {
-      retry: (failureCount, error) => {
-        // No reintentar si es un error de 404 o 401
-        if (error instanceof Error) {
-          const status = (error as any).status;
-          if (status === 404 || status === 401) {
-            return false;
-          }
-        }
-        // Reintentar hasta 2 veces para otros errores
-        return failureCount < 2;
-      },
-      retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000), // Exponential backoff
-    },
-  },
-});
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -1,99 +0,0 @@
-import { createRootRoute, createRoute, createRouter } from '@tanstack/react-router';
-import { lazy } from 'react';
-
-// Layout principal
-const Layout = lazy(() => import('./components/layout/Layout'));
-
-// Páginas
-const DashboardPage = lazy(() => import('./pages/DashboardPage'));
-const GamesPage = lazy(() => import('./pages/GamesPage'));
-const GameDetailPage = lazy(() => import('./pages/GameDetailPage'));
-const CreateGamePage = lazy(() => import('./pages/CreateGamePage'));
-const ImportRomPage = lazy(() => import('./pages/ImportRomPage'));
-const SettingsPage = lazy(() => import('./pages/SettingsPage'));
-const PlatformsPage = lazy(() => import('./pages/PlatformsPage'));
-const TagsPage = lazy(() => import('./pages/TagsPage'));
-const ExportPage = lazy(() => import('./pages/ExportPage'));
-
-// Ruta raíz
-const rootRoute = createRootRoute({
-  component: Layout,
-});
-
-// Rutas principales
-const dashboardRoute = createRoute({
-  path: '/',
-  component: DashboardPage,
-  getParentRoute: () => rootRoute,
-});
-
-const gamesRoute = createRoute({
-  path: '/games',
-  component: GamesPage,
-  getParentRoute: () => rootRoute,
-});
-
-const gameDetailRoute = createRoute({
-  path: '/games/$gameId',
-  component: GameDetailPage,
-  getParentRoute: () => rootRoute,
-});
-
-const createGameRoute = createRoute({
-  path: '/games/create',
-  component: CreateGamePage,
-  getParentRoute: () => rootRoute,
-});
-
-const importRoute = createRoute({
-  path: '/import',
-  component: ImportRomPage,
-  getParentRoute: () => rootRoute,
-});
-
-const settingsRoute = createRoute({
-  path: '/settings',
-  component: SettingsPage,
-  getParentRoute: () => rootRoute,
-});
-
-const platformsRoute = createRoute({
-  path: '/platforms',
-  component: PlatformsPage,
-  getParentRoute: () => rootRoute,
-});
-
-const tagsRoute = createRoute({
-  path: '/tags',
-  component: TagsPage,
-  getParentRoute: () => rootRoute,
-});
-
-const exportRoute = createRoute({
-  path: '/export',
-  component: ExportPage,
-  getParentRoute: () => rootRoute,
-});
-
-// Ruta de not found
-const notFoundRoute = createRoute({
-  path: '*',
-  component: () => <div>Página no encontrada</div>,
-  getParentRoute: () => rootRoute,
-});
-
-// Crear router
-export const router = createRouter({
-  routeTree: rootRoute.addChildren([
-    dashboardRoute,
-    gamesRoute,
-    gameDetailRoute,
-    createGameRoute,
-    importRoute,
-    settingsRoute,
-    platformsRoute,
-    tagsRoute,
-    exportRoute,
-    notFoundRoute,
-  ]),
-});
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -1,60 +0,0 @@
-@import "tailwindcss/preflight";
-@import "tailwindcss";
-
-@layer base {
-  :root {
-    --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: 263.4 70% 50.4%;
-    --primary-foreground: 210 40% 98%;
-    --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: 263.4 70% 50.4%;
-    --radius: 0.5rem;
-  }
-
-  .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: 263.4 70% 50.4%;
-    --primary-foreground: 210 40% 98%;
-    --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: 263.4 70% 50.4%;
-  }
-}
-
-@layer base {
-  * {
-    border-color: hsl(var(--border));
-  }
-  body {
-    background-color: hsl(var(--background));
-    color: hsl(var(--foreground));
-    font-feature-settings: 'rlig' 1, 'calt' 1;
-  }
-}
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -1,238 +0,0 @@
-// Tipos base de la aplicación
-export interface BaseEntity {
-  id: number;
-  createdAt: Date;
-  updatedAt: Date;
-}
-
-// Tipos de Juego
-export interface Game extends BaseEntity {
-  title: string;
-  description?: string;
-  platformId: number;
-  platform?: Platform;
-  releaseYear?: number;
-  rating?: number;
-  tags: Tag[];
-  romFile?: RomFile;
-  metadataSource?: 'igdb' | 'rawg' | 'thegamesdb' | 'manual';
-  igdbId?: string;
-  rawgId?: string;
-  thegamesdbId?: string;
-}
-
-// Tipos de Plataforma
-export interface Platform extends BaseEntity {
-  name: string;
-  description?: string;
-  manufacturer?: string;
-  releaseYear?: number;
-  romExtension?: string;
-  games: Game[];
-}
-
-// Tipos de ROM
-export interface RomFile extends BaseEntity {
-  filename: string;
-  path: string;
-  size: number;
-  checksum: string;
-  gameId: number;
-  game?: Game;
-}
-
-// Tipos de Etiqueta
-export interface Tag extends BaseEntity {
-  name: string;
-  color: string;
-  description?: string;
-  games: Game[];
-}
-
-// Tipos de Compra
-export interface Purchase extends BaseEntity {
-  gameId: number;
-  game?: Game;
-  price: number;
-  currency: string;
-  purchaseDate: Date;
-  store?: string;
-  notes?: string;
-}
-
-// Tipos de Historial de Precios
-export interface PriceHistory extends BaseEntity {
-  gameId: number;
-  game?: Game;
-  price: number;
-  currency: string;
-  date: Date;
-}
-
-// Tipos de Arte
-export interface Artwork extends BaseEntity {
-  gameId: number;
-  game?: Game;
-  type: 'cover' | 'screenshot' | 'logo' | 'banner';
-  url: string;
-  width?: number;
-  height?: number;
-}
-
-// Tipos de Configuración
-export interface Settings {
-  igdbApiKey?: string;
-  rawgApiKey?: string;
-  thegamesdbApiKey?: string;
-  defaultRomDirectory?: string;
-  autoImportEnabled: boolean;
-  metadataSourcePriority: ('igdb' | 'rawg' | 'thegamesdb')[];
-}
-
-// Tipos de API Response
-export interface ApiResponse<T> {
-  data: T;
-  message?: string;
-  error?: string;
-}
-
-export interface PaginatedResponse<T> {
-  data: T[];
-  pagination: {
-    page: number;
-    limit: number;
-    total: number;
-    totalPages: number;
-  };
-}
-
-// Tipos de Filtros
-export interface GameFilters {
-  search?: string;
-  platformId?: number;
-  tags?: number[];
-  rating?: number;
-  releaseYear?: number;
-  metadataSource?: string;
-  hasRom?: boolean;
-}
-
-export interface PlatformFilters {
-  search?: string;
-  manufacturer?: string;
-  releaseYear?: number;
-}
-
-export interface TagFilters {
-  search?: string;
-  color?: string;
-}
-
-// Tipos de Formularios
-export interface GameFormData {
-  title: string;
-  description?: string;
-  platformId: number;
-  releaseYear?: number;
-  rating?: number;
-  tags?: number[];
-  romFile?: File;
-  metadataSource?: 'igdb' | 'rawg' | 'thegamesdb' | 'manual';
-}
-
-export interface PlatformFormData {
-  name: string;
-  description?: string;
-  manufacturer?: string;
-  releaseYear?: number;
-  romExtension?: string;
-}
-
-export interface TagFormData {
-  name: string;
-  color: string;
-  description?: string;
-}
-
-export interface ImportRomFormData {
-  romPath: string;
-  platformId: number;
-  autoScan: boolean;
-}
-
-export interface SettingsFormData {
-  igdbApiKey?: string;
-  rawgApiKey?: string;
-  thegamesdbApiKey?: string;
-  defaultRomDirectory?: string;
-  autoImportEnabled: boolean;
-  metadataSourcePriority: ('igdb' | 'rawg' | 'thegamesdb')[];
-}
-
-// Tipos de Metadata
-export interface GameMetadata {
-  title: string;
-  description?: string;
-  releaseDate?: string;
-  rating?: number;
-  genres?: string[];
-  platforms?: string[];
-  coverUrl?: string;
-  screenshots?: string[];
-  developer?: string;
-  publisher?: string;
-  region?: string;
-  language?: string;
-}
-
-// Tipos de Errores
-export interface ApiError {
-  message: string;
-  code?: string;
-  details?: Record<string, string[]>;
-}
-
-export interface ValidationError {
-  field: string;
-  message: string;
-}
-
-// Tipos de UI
-export interface MenuItem {
-  label: string;
-  href: string;
-  icon?: string;
-  children?: MenuItem[];
-}
-
-export interface BreadcrumbItem {
-  label: string;
-  href?: string;
-}
-
-export interface TableColumn<T> {
-  key: keyof T;
-  label: string;
-  sortable?: boolean;
-  render?: (value: any, record: T) => React.ReactNode;
-}
-
-// Tipos de Hooks
-export interface UseQueryOptions<T> {
-  enabled?: boolean;
-  refetchOnWindowFocus?: boolean;
-  refetchOnMount?: boolean;
-  refetchOnReconnect?: boolean;
-  staleTime?: number;
-  cacheTime?: number;
-  retry?: number;
-  retryDelay?: number;
-}
-
-export interface UseMutationOptions<T> {
-  onSuccess?: (data: T) => void;
-  onError?: (error: Error) => void;
-  onSettled?: () => void;
-  retry?: number;
-  retryDelay?: number;
-}
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -1,76 +0,0 @@
-import type { Config } from 'tailwindcss';
-import tailwindcssAnimate from 'tailwindcss-animate';
-
-const config: Config = {
-  darkMode: 'class',
-  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}', './index.html'],
-  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))',
-        card: 'hsl(var(--card))',
-        cardForeground: 'hsl(var(--card-foreground))',
-        popover: 'hsl(var(--popover))',
-        popoverForeground: 'hsl(var(--popover-foreground))',
-        muted: 'hsl(var(--muted))',
-        mutedForeground: 'hsl(var(--muted-foreground))',
-        accent: 'hsl(var(--accent))',
-        accentForeground: 'hsl(var(--accent-foreground))',
-        destructive: 'hsl(var(--destructive))',
-        destructiveForeground: 'hsl(var(--destructive-foreground))',
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        sidebar: {
-          DEFAULT: 'hsl(var(--sidebar))',
-          foreground: 'hsl(var(--sidebar-foreground))',
-          primary: 'hsl(var(--sidebar-primary))',
-          primaryForeground: 'hsl(var(--sidebar-primary-foreground))',
-          accent: 'hsl(var(--sidebar-accent))',
-          accentForeground: 'hsl(var(--sidebar-accent-foreground))',
-          border: 'hsl(var(--sidebar-border))',
-          ring: 'hsl(var(--sidebar-ring))',
-        },
-      },
-      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',
-      },
-    },
-  },
-  plugins: [tailwindcssAnimate],
-};
-
-export default config;
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -1,32 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "types": ["vite/client"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["src"]
-}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -1,7 +1,34 @@
 {
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
 }
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2023",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "types": ["node"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,23 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import tailwindcss from '@tailwindcss/vite';
-import path from 'path';
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src'),
-    },
-  },
-  server: {
-    port: 5173,
-    proxy: {
-      '/api': {
-        target: 'http://localhost:3000',
-        changeOrigin: true,
-      },
-    },
-  },
-});
				`@@ -0,0 +1 @@`
				`<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>`
				`@@ -0,0 +1 @@`
				<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
				`@@ -0,0 +1 @@`
				`<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>`
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>