first commit

apps/web/pages/ingest.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="page">
+    <Header />
+    <main class="container">
+      <header class="page-header">
+        <div>
+          <h1>Ingesta manual</h1>
+          <p>Crea un item de catálogo para pruebas rápidas.</p>
+        </div>
+      </header>
+      <form class="panel" @submit.prevent="submit">
+        <div class="grid">
+          <div>
+            <label>Título</label>
+            <input v-model="form.title" required />
+          </div>
+          <div>
+            <label>Publisher</label>
+            <input v-model="form.publisher" />
+          </div>
+          <div>
+            <label>Source URL</label>
+            <input v-model="form.sourceUrl" />
+          </div>
+          <div>
+            <label>Formato</label>
+            <input v-model="form.format" />
+          </div>
+        </div>
+        <button class="btn" type="submit">Ingestar</button>
+      </form>
+      <div v-if="result" class="panel">Creado: {{ result.item?.id || result.id }}</div>
+      <div v-if="err" class="panel error">Error: {{ err }}</div>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import Header from '~/components/Header.vue'
+import { reactive, ref } from 'vue'
+const config = useRuntimeConfig()
+const form = reactive({ title: '', publisher: '', sourceUrl: '', format: '' })
+const result = ref(null)
+const err = ref(null)
+
+async function submit() {
+  err.value = null
+  result.value = null
+  try {
+    const res = await $fetch(`${config.public.apiBase}/catalog/ingest`, {
+      method: 'POST',
+      body: form
+    })
+    result.value = res
+  } catch (e) {
+    err.value = e.message || String(e)
+  }
+}
+</script>
+
+<style scoped>
+.page {
+  min-height: 100vh;
+  background: #f8fafc;
+  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
+}
+.container {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 2.5rem 1.5rem 4rem;
+}
+.page-header {
+  margin-bottom: 2rem;
+}
+.panel {
+  background: #fff;
+  border-radius: 20px;
+  padding: 1.5rem;
+  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
+}
+.panel.error {
+  border: 1px solid #fecaca;
+  color: #b91c1c;
+}
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+}
+label {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 0.4rem;
+}
+input {
+  width: 100%;
+  padding: 0.5rem;
+  border-radius: 8px;
+  border: 1px solid #cbd5f5;
+}
+.btn {
+  margin-top: 1.2rem;
+  padding: 0.6rem 1.4rem;
+  border-radius: 999px;
+  border: none;
+  background: #0f172a;
+  color: #fff;
+  font-weight: 600;
+}
+</style>