Primer commit

src/views/IntegrationsView.vue

@@ -0,0 +1,46 @@
+<script setup>
+defineProps({
+  isSidebarOpen: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const services = [
+  { name: 'API Fiscal', status: 'Conectado' },
+  { name: 'Webhook Pagos', status: 'Conectado' },
+  { name: 'Correo transaccional', status: 'Sincronizando' },
+]
+</script>
+
+<template>
+  <main
+    :class="[
+      'min-h-screen bg-slate-50 p-6 pt-24 transition-[margin] duration-300',
+      isSidebarOpen ? 'md:ml-64' : 'md:ml-0',
+    ]"
+  >
+    <section class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+      <h2 class="text-2xl font-semibold tracking-tight text-slate-900">Integraciones</h2>
+      <p class="mt-1 text-sm text-slate-500">Estado de conectores y servicios externos.</p>
+
+      <ul class="mt-5 space-y-3">
+        <li
+          v-for="service in services"
+          :key="service.name"
+          class="flex items-center justify-between rounded-xl border border-slate-200 bg-slate-50 px-4 py-3"
+        >
+          <span class="font-medium text-slate-800">{{ service.name }}</span>
+          <span
+            :class="[
+              'inline-flex rounded-full px-2.5 py-1 text-xs font-semibold',
+              service.status === 'Conectado' ? 'bg-emerald-50 text-emerald-700' : 'bg-amber-50 text-amber-700',
+            ]"
+          >
+            {{ service.status }}
+          </span>
+        </li>
+      </ul>
+    </section>
+  </main>
+</template>