reorganizar sidebar: Métricas + Proyectos reales de KAPPA, eliminar Tablero duplicado

2026-05-25 21:11:11 -05:00
parent d0ace4515d
commit 87808577b5
8 changed files with 200 additions and 41 deletions
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { onMounted } from "vue"
+import { useProjectsStore } from "@/stores/projects"
+import { IconFolder, IconExclamationCircle } from "@tabler/icons-vue"
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Skeleton } from "@/components/ui/skeleton"
+
+const projects = useProjectsStore()
+
+const emit = defineEmits<{
+  'select-project': [id: number]
+}>()
+
+onMounted(() => {
+  projects.fetchProjects()
+})
+
+function getStatusVariant(status?: string) {
+  switch (status) {
+    case 'active': return 'default'
+    case 'completed': return 'secondary'
+    case 'paused': return 'outline'
+    default: return 'default'
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 px-4 lg:px-6">
+    <div class="flex items-center justify-between">
+      <div>
+        <h2 class="text-2xl font-bold tracking-tight">Proyectos</h2>
+        <p class="text-muted-foreground">
+          Proyectos asignados en KAPPA
+        </p>
+      </div>
+      <Badge variant="outline" class="text-sm">
+        {{ projects.count }} proyecto{{ projects.count !== 1 ? 's' : '' }}
+      </Badge>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="projects.loading" class="grid grid-cols-1 gap-4 @lg:grid-cols-2 @3xl:grid-cols-3">
+      <Card v-for="i in 6" :key="i">
+        <CardHeader>
+          <Skeleton class="h-5 w-3/4" />
+          <Skeleton class="h-4 w-1/2" />
+        </CardHeader>
+      </Card>
+    </div>
+
+    <!-- Error -->
+    <div v-else-if="projects.error" class="flex flex-col items-center gap-3 py-12 text-center">
+      <IconExclamationCircle class="size-10 text-destructive" />
+      <p class="text-lg font-medium">Error al cargar proyectos</p>
+      <p class="text-sm text-muted-foreground">{{ projects.error }}</p>
+      <button
+        class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+        @click="projects.fetchProjects()"
+      >
+        Reintentar
+      </button>
+    </div>
+
+    <!-- Empty -->
+    <div v-else-if="projects.count === 0" class="flex flex-col items-center gap-3 py-12 text-center">
+      <IconFolder class="size-10 text-muted-foreground" />
+      <p class="text-lg font-medium">Sin proyectos asignados</p>
+      <p class="text-sm text-muted-foreground">
+        No tienes proyectos activos en KAPPA.
+      </p>
+    </div>
+
+    <!-- Project Grid -->
+    <div v-else class="grid grid-cols-1 gap-4 @lg:grid-cols-2 @3xl:grid-cols-3">
+      <Card
+        v-for="p in projects.projects"
+        :key="p.id"
+        :class="[
+          'cursor-pointer transition-colors hover:border-primary/50',
+          projects.selectedId === p.id ? 'border-primary' : '',
+        ]"
+        @click="projects.select(p.id); emit('select-project', p.id)"
+      >
+        <CardHeader>
+          <div class="flex items-start justify-between gap-2">
+            <CardTitle class="text-base">
+              {{ p.initiative_name || p.name || `Proyecto ${p.id}` }}
+            </CardTitle>
+            <Badge :variant="getStatusVariant(p.status)">
+              {{ p.status || 'active' }}
+            </Badge>
+          </div>
+          <CardDescription class="line-clamp-2">
+            {{ p.description || 'Sin descripción' }}
+          </CardDescription>
+          <div v-if="p.key" class="flex items-center gap-2 pt-1">
+            <Badge variant="secondary" class="font-mono text-xs">
+              {{ p.key }}
+            </Badge>
+            <span v-if="p.start_date" class="text-xs text-muted-foreground">
+              {{ p.start_date }}
+            </span>
+          </div>
+        </CardHeader>
+      </Card>
+    </div>
+  </div>
+</template>