Alpha v0.1.0 — KAPPA Hub inicial

- Auth con KAPPA (login + token Bearer) - Cliente HTTP para 10 endpoints (proyectos, HUs, bitácoras, planeaciones) - Dashboard multi-proyecto con concepto médico Teloprax - Calendario colombiano con 19 feriados (Ley Emiliani + Pascua) - Scheduler tipo cron con Dexie (reglas recurrentes, toasts, log) - Diseño marca Teloprax: Inter, Space Grotesk, #1A1A2E, rojo #E63946 - Stack: Vue 3 + TypeScript + Pinia + Vite + Bun
2026-05-22 20:18:54 -05:00
commit 66fd4e175a
26 changed files with 2227 additions and 0 deletions
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useProjectsStore } from '@/stores/projects'
+import { useAuthStore } from '@/stores/auth'
+
+const projects = useProjectsStore()
+const auth = useAuthStore()
+
+const project = computed(() => projects.selected)
+</script>
+
+<template>
+  <div class="dashboard" v-if="project">
+    <header class="dash-header">
+      <div>
+        <h2 class="dash-title">{{ project.name }}</h2>
+        <div class="dash-meta-row">
+          <span v-if="project.key" class="dash-meta">Clave: {{ project.key }}</span>
+          <span v-if="project.status" class="dash-badge">{{ project.status }}</span>
+        </div>
+      </div>
+      <div class="dash-user">
+        <span class="user-name">{{ auth.user?.name }}</span>
+      </div>
+    </header>
+
+    <div class="dash-grid">
+      <section class="card">
+        <h3>Historia clínica</h3>
+        <p class="card-desc" v-if="project.description">{{ project.description }}</p>
+        <p class="card-empty" v-else>Sin descripción del paciente</p>
+        <dl class="card-dl" v-if="project.start_date">
+          <dt>Ingreso</dt><dd>{{ project.start_date }}</dd>
+          <dt v-if="project.end_date">Alta prevista</dt><dd v-if="project.end_date">{{ project.end_date }}</dd>
+        </dl>
+      </section>
+
+      <section class="card">
+        <h3>Síntomas</h3>
+        <p class="card-empty">Historias de Usuario detectadas</p>
+      </section>
+
+      <section class="card">
+        <h3>Bitácora</h3>
+        <p class="card-empty">Registro de sesiones</p>
+      </section>
+
+      <section class="card">
+        <h3>Tratamiento</h3>
+        <p class="card-empty">Planeación del proyecto</p>
+      </section>
+
+      <section class="card card-wide">
+        <h3>Transcripciones</h3>
+        <p class="card-empty">Pipeline consultas → diagnóstico</p>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.dashboard { max-width: 1200px; }
+
+.dash-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 28px;
+}
+.dash-title {
+  margin: 0 0 6px;
+  font-size: 22px;
+  font-weight: 700;
+  color: #FFFFFF;
+}
+.dash-meta-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.dash-meta {
+  font-size: 12px;
+  color: #8888AA;
+}
+.dash-badge {
+  font-size: 11px;
+  padding: 2px 10px;
+  background: rgba(230,57,70,0.12);
+  color: #E63946;
+  border-radius: 10px;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+.dash-user {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.user-name {
+  font-size: 12px;
+  color: #8888AA;
+}
+
+.dash-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 18px;
+}
+
+.card {
+  background: #141428;
+  border: 1px solid #2A2A45;
+  border-radius: 8px;
+  padding: 22px;
+}
+.card-wide { grid-column: 1 / -1; }
+.card h3 {
+  margin: 0 0 12px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #E63946;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.card-desc {
+  margin: 0 0 12px;
+  font-size: 13px;
+  color: #B0B0CC;
+  line-height: 1.6;
+}
+.card-empty {
+  margin: 0;
+  font-size: 13px;
+  color: #555577;
+}
+.card-dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 4px 12px;
+  margin: 0;
+  font-size: 13px;
+}
+.card-dl dt { color: #8888AA; font-size: 12px; }
+.card-dl dd { color: #E6EDF3; margin: 0; }
+</style>