feat(studio): rediseño con design tokens, pantalla de consumo y rename a Studio
El SPA pasa a llamarse uMind Studio y vive en /studio (el nombre "Orquestador" no le decía nada al cliente final, que ahora es quien lo usa). Diseño: - Los colores viven una sola vez como variables CSS + clases semánticas (.card, .input, .btn-*, .badge-*). Antes cada elemento repetía el par claro/oscuro a mano en cientos de lugares y cambiar un tono era buscar y reemplazar. - darkMode pasa de 'media' a 'class' con toggle propio persistido: el usuario elige, no el sistema operativo. Se aplica antes de montar la app para que no parpadee. - Componentes compartidos (UiModal, UiBadge, UiEmptyState) donde antes había markup duplicado inline. Nueva pantalla de consumo (/tenants/:id/uso): filtros por fecha con atajos, total del período, pendiente de facturar, barra contra el tope del plan, desglose por tipo y gráfico por día. El gráfico son divs con altura porcentual — no vale traer una librería de charts para esto. Rename: - /studio y /portal/studio; /orchestrator redirige 301 conservando la ruta interna, así los enlaces guardados siguen funcionando. Los assets del bundle quedan exentos (el `base` de Vite sigue en /orchestrator/): redirigirlos rompería el SPA. - El submódulo sembrado migra el mismo registro buscando por las tres URLs históricas (/app/umind → /orchestrator → /studio) en vez de dejar entradas duplicadas en el menú. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
023a8af494
commit
d8f9acd1f8
@@ -0,0 +1,198 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { api } from '../lib/api.js'
|
||||
import { apiUmind } from '../lib/contexto.js'
|
||||
import UiEmptyState from '../components/ui/UiEmptyState.vue'
|
||||
|
||||
const props = defineProps({ id: { type: String, required: true } })
|
||||
|
||||
const cargando = ref(true)
|
||||
const error = ref('')
|
||||
const datos = ref(null)
|
||||
|
||||
// Por defecto, el mes en curso.
|
||||
const hoy = new Date()
|
||||
const desde = ref(new Date(hoy.getFullYear(), hoy.getMonth(), 1).toISOString().slice(0, 10))
|
||||
const hasta = ref(hoy.toISOString().slice(0, 10))
|
||||
|
||||
const ETIQUETAS = {
|
||||
ia: { nombre: 'Inteligencia artificial', icono: '🧠', color: '#8eb02f' },
|
||||
ocr: { nombre: 'Lectura de imágenes', icono: '🖼️', color: '#2f7fb0' },
|
||||
whisper: { nombre: 'Transcripción de audio', icono: '🎙️', color: '#b0752f' },
|
||||
}
|
||||
const etiqueta = (t) => ETIQUETAS[t] || { nombre: t, icono: '•', color: '#94a3b8' }
|
||||
|
||||
async function cargar() {
|
||||
cargando.value = true
|
||||
error.value = ''
|
||||
try {
|
||||
datos.value = await api.get(
|
||||
apiUmind(`/umind/uso?tenant_id=${props.id}&desde=${desde.value}&hasta=${hasta.value}`),
|
||||
)
|
||||
} catch (e) {
|
||||
error.value = e.message
|
||||
} finally {
|
||||
cargando.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const moneda = computed(() => datos.value?.plan?.moneda || 'COP')
|
||||
const resumen = computed(() => datos.value?.resumen || [])
|
||||
const totalPeriodo = computed(() => datos.value?.total_periodo || 0)
|
||||
const tope = computed(() => datos.value?.plan?.tope_consumo_mensual || 0)
|
||||
|
||||
const porcentajeTope = computed(() => {
|
||||
if (!tope.value) return 0
|
||||
return Math.min(100, (totalPeriodo.value / tope.value) * 100)
|
||||
})
|
||||
|
||||
function money(v) {
|
||||
return `${moneda.value} ${Number(v || 0).toLocaleString('es-CO', { maximumFractionDigits: 2 })}`
|
||||
}
|
||||
|
||||
function numero(v) {
|
||||
return Number(v || 0).toLocaleString('es-CO', { maximumFractionDigits: 0 })
|
||||
}
|
||||
|
||||
// Consumo por día, para el gráfico. Se arma desde el detalle en vez de pedirle
|
||||
// otro agregado al backend: son a lo sumo 1000 filas y evita un endpoint más.
|
||||
const porDia = computed(() => {
|
||||
const mapa = new Map()
|
||||
for (const u of datos.value?.detalle || []) {
|
||||
const dia = String(u.CreatedAt).slice(0, 10)
|
||||
mapa.set(dia, (mapa.get(dia) || 0) + (u.costo || 0))
|
||||
}
|
||||
const dias = [...mapa.entries()].sort((a, b) => a[0].localeCompare(b[0]))
|
||||
const max = Math.max(...dias.map((d) => d[1]), 0)
|
||||
return { dias, max }
|
||||
})
|
||||
|
||||
function atajo(dias) {
|
||||
const fin = new Date()
|
||||
const ini = new Date()
|
||||
ini.setDate(ini.getDate() - dias)
|
||||
desde.value = ini.toISOString().slice(0, 10)
|
||||
hasta.value = fin.toISOString().slice(0, 10)
|
||||
cargar()
|
||||
}
|
||||
|
||||
onMounted(cargar)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex items-start justify-between gap-4 mb-6">
|
||||
<div>
|
||||
<h1 class="text-xl font-semibold text-texto">Consumo</h1>
|
||||
<p class="text-sm text-tenue mt-0.5">Lo que usaron tus agentes y cuánto cuesta.</p>
|
||||
</div>
|
||||
<router-link :to="`/tenants/${id}`" class="btn-ghost">← Agentes</router-link>
|
||||
</div>
|
||||
|
||||
<!-- Filtros -->
|
||||
<div class="card p-4 mb-4">
|
||||
<div class="flex flex-wrap items-end gap-3">
|
||||
<div>
|
||||
<label class="label">Desde</label>
|
||||
<input v-model="desde" type="date" class="input !w-auto" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="label">Hasta</label>
|
||||
<input v-model="hasta" type="date" class="input !w-auto" />
|
||||
</div>
|
||||
<button class="btn-primary" @click="cargar">Aplicar</button>
|
||||
<div class="flex gap-1 ml-auto">
|
||||
<button class="btn-ghost !px-2.5 !py-1 !text-xs" @click="atajo(6)">7 días</button>
|
||||
<button class="btn-ghost !px-2.5 !py-1 !text-xs" @click="atajo(29)">30 días</button>
|
||||
<button class="btn-ghost !px-2.5 !py-1 !text-xs" @click="atajo(89)">90 días</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="error" class="text-sm text-red-600 dark:text-red-400 mb-4">{{ error }}</p>
|
||||
<p v-if="cargando" class="text-sm text-tenue">Cargando…</p>
|
||||
|
||||
<template v-else-if="datos">
|
||||
<!-- Totales -->
|
||||
<div class="grid gap-3 sm:grid-cols-3 mb-4">
|
||||
<div class="card p-4">
|
||||
<p class="text-xs text-tenue">Consumo del período</p>
|
||||
<p class="text-2xl font-semibold text-texto mt-1 tabular-nums">{{ money(totalPeriodo) }}</p>
|
||||
</div>
|
||||
<div class="card p-4">
|
||||
<p class="text-xs text-tenue">Pendiente de facturar</p>
|
||||
<p class="text-2xl font-semibold text-texto mt-1 tabular-nums">
|
||||
{{ money(datos.pendiente_facturar) }}
|
||||
</p>
|
||||
<p class="text-[11px] text-tenue mt-0.5">Se suma a tu próxima factura.</p>
|
||||
</div>
|
||||
<div class="card p-4">
|
||||
<p class="text-xs text-tenue">Plan</p>
|
||||
<p class="text-lg font-semibold text-texto mt-1">{{ datos.plan?.nombre || 'Sin plan' }}</p>
|
||||
<p v-if="datos.plan" class="text-[11px] text-tenue mt-0.5">
|
||||
Mensualidad {{ money(datos.plan.precio_mensual) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tope -->
|
||||
<div v-if="tope" class="card p-4 mb-4">
|
||||
<div class="flex items-center justify-between text-sm mb-2">
|
||||
<span class="text-texto">Tope mensual</span>
|
||||
<span class="text-tenue tabular-nums">{{ money(totalPeriodo) }} / {{ money(tope) }}</span>
|
||||
</div>
|
||||
<div class="h-2 rounded-full bg-elevado overflow-hidden">
|
||||
<div
|
||||
class="h-full rounded-full transition-all duration-500"
|
||||
:class="porcentajeTope >= 100 ? 'bg-red-500' : porcentajeTope >= 80 ? 'bg-amber-500' : 'bg-brand'"
|
||||
:style="{ width: porcentajeTope + '%' }"
|
||||
></div>
|
||||
</div>
|
||||
<p v-if="porcentajeTope >= 100" class="text-xs text-amber-600 dark:text-amber-400 mt-2">
|
||||
Superaste el tope de tu plan. El servicio sigue funcionando y el excedente se cobra en el próximo ciclo.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Desglose por tipo -->
|
||||
<div class="card divide-y divide-borde mb-4">
|
||||
<div class="px-4 py-3">
|
||||
<h2 class="text-sm font-medium text-texto">Desglose</h2>
|
||||
</div>
|
||||
<UiEmptyState
|
||||
v-if="resumen.length === 0"
|
||||
icono="📊"
|
||||
titulo="Sin consumo en este período"
|
||||
detalle="Cuando tus agentes respondan mensajes, lean imágenes o transcriban audios, vas a verlo acá."
|
||||
/>
|
||||
<div v-for="r in resumen" :key="r.tipo" class="px-4 py-3 flex items-center gap-3">
|
||||
<span class="text-lg">{{ etiqueta(r.tipo).icono }}</span>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-sm text-texto">{{ etiqueta(r.tipo).nombre }}</p>
|
||||
<p class="text-xs text-tenue tabular-nums">
|
||||
{{ numero(r.cantidad) }} {{ r.unidad }} · {{ numero(r.eventos) }} usos
|
||||
</p>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-texto tabular-nums">{{ money(r.costo) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Consumo por día: SVG a mano, no vale una librería de charts por esto -->
|
||||
<div v-if="porDia.dias.length" class="card p-4">
|
||||
<h2 class="text-sm font-medium text-texto mb-3">Por día</h2>
|
||||
<div class="flex items-end gap-1 h-28">
|
||||
<div
|
||||
v-for="[dia, costo] in porDia.dias"
|
||||
:key="dia"
|
||||
class="flex-1 min-w-[3px] bg-brand/70 hover:bg-brand rounded-t transition-colors"
|
||||
:style="{ height: porDia.max ? Math.max(2, (costo / porDia.max) * 100) + '%' : '2px' }"
|
||||
:title="`${dia}: ${money(costo)}`"
|
||||
></div>
|
||||
</div>
|
||||
<div class="flex justify-between text-[11px] text-tenue mt-2">
|
||||
<span>{{ porDia.dias[0][0] }}</span>
|
||||
<span>{{ porDia.dias[porDia.dias.length - 1][0] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user