Migración a shadcn-vue + Tailwind CSS v4
- Tailwind CSS v4 con @tailwindcss/vite - shadcn-vue: 19 componentes UI (button, card, dialog, table, select, tabs, sidebar, separator, breadcrumb, badge, avatar, dropdown-menu, tooltip, input, switch, sheet, skeleton) - Sidebar collapsible con íconos Lucide - Theme Teloprax en CSS variables (rojo #E63946, negro #1A1A2E) - LoginView, DashboardView, CalendarView, SchedulerView migrados - Eliminado AppShell.vue manual (reemplazado por SidebarProvider) - Layout con breadcrumb, sidebar trigger, header unificado
This commit is contained in:
+112
-169
@@ -2,6 +2,13 @@
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useSchedulerStore } from '@/stores/scheduler'
|
||||
import { DAY_LABELS, computeNextRun, type ScheduleAction } from '@/services/scheduler'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import { Plus, XCircle, CheckCircle2, Clock } from 'lucide-vue-next'
|
||||
|
||||
const store = useSchedulerStore()
|
||||
const showForm = ref(false)
|
||||
@@ -38,14 +45,14 @@ async function handleSubmit() {
|
||||
function fmtNextRun(date: Date | null | undefined): string {
|
||||
if (!date) return '—'
|
||||
return date.toLocaleDateString('es-CO', { weekday: 'short', month: 'short', day: 'numeric' })
|
||||
+ ` ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
|
||||
+ ` ${String(date.getHours()).padStart(2,'0')}:${String(date.getMinutes()).padStart(2,'0')}`
|
||||
}
|
||||
|
||||
function fmtLastRun(iso: string | null): string {
|
||||
if (!iso) return 'Nunca'
|
||||
const d = new Date(iso)
|
||||
return d.toLocaleDateString('es-CO', { month: 'short', day: 'numeric' })
|
||||
+ ` ${d.toLocaleTimeString('es-CO', { hour: '2-digit', minute: '2-digit' })}`
|
||||
+ ` ${d.toLocaleTimeString('es-CO', { hour:'2-digit', minute:'2-digit' })}`
|
||||
}
|
||||
|
||||
const actionLabels: Record<ScheduleAction['type'], string> = {
|
||||
@@ -64,198 +71,134 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sch-view">
|
||||
<div class="sch-header">
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h2>Recetas automáticas</h2>
|
||||
<p>Tareas programadas que se ejecutan al abrir la app</p>
|
||||
<h1 class="text-2xl font-bold tracking-tight">Recetas automáticas</h1>
|
||||
<p class="text-sm text-muted-foreground mt-1">Tareas programadas que se ejecutan al abrir la app</p>
|
||||
</div>
|
||||
<div class="sch-header-right">
|
||||
<span :class="['sch-status', store.running ? 'on' : 'off']">
|
||||
<div class="flex items-center gap-3">
|
||||
<Badge :variant="store.running ? 'default' : 'secondary'" class="text-[11px]">
|
||||
{{ store.running ? 'Activo' : 'Pausado' }}
|
||||
</span>
|
||||
<button class="btn" @click="showForm = !showForm">
|
||||
{{ showForm ? 'Cancelar' : '+ Nueva receta' }}
|
||||
</button>
|
||||
</Badge>
|
||||
<Button size="sm" @click="showForm = !showForm">
|
||||
<Plus class="size-4 mr-1" />
|
||||
{{ showForm ? 'Cancelar' : 'Nueva receta' }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showForm" class="sch-form">
|
||||
<div class="form-row">
|
||||
<div class="form-group flex-2">
|
||||
<label>Nombre</label>
|
||||
<input v-model="form.name" placeholder="Ej: Informe semanal de avance" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Descripción</label>
|
||||
<input v-model="form.description" placeholder="Opcional" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Días</label>
|
||||
<div class="day-pills">
|
||||
<button v-for="(l, i) in DAY_LABELS" :key="i"
|
||||
:class="['day-pill', { active: form.daysOfWeek.includes(i) }]"
|
||||
@click="toggleDay(i)">{{ l }}</button>
|
||||
<Card v-if="showForm">
|
||||
<CardContent class="p-4 space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-1.5 col-span-2">
|
||||
<label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Nombre</label>
|
||||
<Input v-model="form.name" placeholder="Ej: Informe semanal de avance" />
|
||||
</div>
|
||||
<div class="space-y-1.5 col-span-2">
|
||||
<label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Descripción</label>
|
||||
<Input v-model="form.description" placeholder="Opcional" />
|
||||
</div>
|
||||
<div class="space-y-1.5 col-span-2">
|
||||
<label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Días</label>
|
||||
<div class="flex gap-1.5 flex-wrap">
|
||||
<button v-for="(l, i) in DAY_LABELS" :key="i" type="button"
|
||||
:class="['px-3 py-1 text-xs rounded-full border transition-colors',
|
||||
form.daysOfWeek.includes(i)
|
||||
? 'bg-primary text-primary-foreground border-primary'
|
||||
: 'bg-background text-muted-foreground border-border hover:border-primary']"
|
||||
@click="toggleDay(i)">{{ l }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Hora</label>
|
||||
<div class="time-inputs">
|
||||
<input type="number" v-model.number="form.hour" min="0" max="23" class="time-in" />
|
||||
<span>:</span>
|
||||
<input type="number" v-model.number="form.minute" min="0" max="59" class="time-in" />
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Hora</label>
|
||||
<div class="flex items-center gap-1">
|
||||
<Input type="number" v-model.number="form.hour" min="0" max="23" class="w-16 text-center" />
|
||||
<span class="text-muted-foreground">:</span>
|
||||
<Input type="number" v-model.number="form.minute" min="0" max="59" class="w-16 text-center" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1.5 col-span-2">
|
||||
<label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Acción</label>
|
||||
<Select v-model="form.actionType">
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="generate_progress_report">Generar informe de avance</SelectItem>
|
||||
<SelectItem value="check_hus">Revisar estado de HUs</SelectItem>
|
||||
<SelectItem value="daily_prep">Daily prep</SelectItem>
|
||||
<SelectItem value="reminder">Recordatorio personalizado</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group flex-2">
|
||||
<label>Acción</label>
|
||||
<select v-model="form.actionType">
|
||||
<option value="generate_progress_report">Generar informe de avance</option>
|
||||
<option value="check_hus">Revisar estado de HUs</option>
|
||||
<option value="daily_prep">Daily prep</option>
|
||||
<option value="reminder">Recordatorio personalizado</option>
|
||||
</select>
|
||||
<div v-if="form.actionType === 'reminder'" class="space-y-1.5">
|
||||
<label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Mensaje</label>
|
||||
<Input v-model="form.message" placeholder="Ej: Preparar informe para gerencia" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row" v-if="form.actionType === 'reminder'">
|
||||
<div class="form-group flex-2">
|
||||
<label>Mensaje</label>
|
||||
<input v-model="form.message" placeholder="Ej: Preparar informe para gerencia" />
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn primary" @click="handleSubmit">Guardar receta</button>
|
||||
</div>
|
||||
<Button class="w-full" @click="handleSubmit">Guardar receta</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div class="sch-rules">
|
||||
<div v-for="rule in store.rules" :key="rule.id" :class="['sch-rule', { disabled: !rule.enabled }]">
|
||||
<div class="rule-info">
|
||||
<div class="rule-name">{{ rule.name }}</div>
|
||||
<div v-if="rule.description" class="rule-desc">{{ rule.description }}</div>
|
||||
<div class="rule-meta">
|
||||
<span class="meta-tag">{{ rule.daysOfWeek.map(d => DAY_LABELS[d]).join(', ') }}</span>
|
||||
<span class="meta-tag">{{ String(rule.hour).padStart(2,'0') }}:{{ String(rule.minute).padStart(2,'0') }}</span>
|
||||
<span class="meta-tag type">{{ actionLabels[rule.action.type] }}</span>
|
||||
<div class="space-y-2">
|
||||
<div v-for="rule in store.rules" :key="rule.id"
|
||||
:class="['flex items-center gap-4 p-4 rounded-lg border bg-card transition-opacity', !rule.enabled && 'opacity-40']">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="font-medium text-sm">{{ rule.name }}</div>
|
||||
<div v-if="rule.description" class="text-xs text-muted-foreground mt-0.5">{{ rule.description }}</div>
|
||||
<div class="flex gap-1.5 mt-1.5 flex-wrap">
|
||||
<Badge variant="outline" class="text-[10px]">{{ rule.daysOfWeek.map(d => DAY_LABELS[d]).join(', ') }}</Badge>
|
||||
<Badge variant="outline" class="text-[10px]">{{ String(rule.hour).padStart(2,'0') }}:{{ String(rule.minute).padStart(2,'0') }}</Badge>
|
||||
<Badge variant="secondary" class="text-[10px]">{{ actionLabels[rule.action.type] }}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rule-exec">
|
||||
<div class="exec-next">Próx: {{ fmtNextRun(computeNextRun(rule)) }}</div>
|
||||
<div class="exec-last">Últ: {{ fmtLastRun(rule.lastRun) }}</div>
|
||||
<div class="text-right flex-shrink-0">
|
||||
<div class="text-xs text-emerald-400">Próx: {{ fmtNextRun(computeNextRun(rule)) }}</div>
|
||||
<div class="text-[11px] text-muted-foreground">Últ: {{ fmtLastRun(rule.lastRun) }}</div>
|
||||
</div>
|
||||
<div class="rule-actions">
|
||||
<button :class="['toggle-btn', rule.enabled ? 'on' : 'off']" @click="store.toggleRule(rule.id!)">
|
||||
{{ rule.enabled ? 'ON' : 'OFF' }}
|
||||
</button>
|
||||
<button class="del-btn" @click="store.deleteRule(rule.id!)">×</button>
|
||||
<div class="flex items-center gap-2 flex-shrink-0">
|
||||
<Switch :checked="rule.enabled" @update:checked="store.toggleRule(rule.id!)" />
|
||||
<Button variant="ghost" size="icon" class="size-7 text-muted-foreground hover:text-destructive" @click="store.deleteRule(rule.id!)">
|
||||
<XCircle class="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="store.rules.length === 0" class="empty">No hay recetas configuradas</p>
|
||||
<p v-if="store.rules.length === 0" class="text-center text-sm text-muted-foreground py-8">No hay recetas configuradas</p>
|
||||
</div>
|
||||
|
||||
<div class="sch-log" v-if="store.logs.length > 0">
|
||||
<h3>Historial</h3>
|
||||
<div v-for="log in store.logs.slice(0, 10)" :key="log.id" class="log-entry">
|
||||
<span :class="['log-dot', log.success ? 'ok' : 'fail']"></span>
|
||||
<span class="log-time">{{ fmtLastRun(log.executedAt) }}</span>
|
||||
<span class="log-name">{{ log.ruleName }}</span>
|
||||
<span class="log-msg">{{ log.message }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Card v-if="store.logs.length > 0">
|
||||
<CardHeader class="pb-2">
|
||||
<CardTitle class="text-sm font-medium">Historial de ejecuciones</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-1">
|
||||
<div v-for="log in store.logs.slice(0, 10)" :key="log.id" class="flex items-center gap-2 text-xs py-0.5">
|
||||
<CheckCircle2 v-if="log.success" class="size-3 text-emerald-400 flex-shrink-0" />
|
||||
<XCircle v-else class="size-3 text-destructive flex-shrink-0" />
|
||||
<span class="text-muted-foreground w-[100px] flex-shrink-0">{{ fmtLastRun(log.executedAt) }}</span>
|
||||
<span class="font-medium">{{ log.ruleName }}</span>
|
||||
<span class="text-muted-foreground truncate">{{ log.message }}</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div class="sch-toasts" v-if="store.notifications.length > 0">
|
||||
<div v-for="n in store.notifications.slice(0, 5)" :key="n.id" class="sch-toast">
|
||||
<span class="toast-time">{{ n.time }}</span>
|
||||
<span class="toast-msg">{{ n.message }}</span>
|
||||
<button class="toast-close" @click="store.dismissNotification(n.id)">×</button>
|
||||
<div v-if="store.notifications.length > 0" class="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-sm">
|
||||
<div v-for="n in store.notifications.slice(0, 5)" :key="n.id"
|
||||
class="flex items-center gap-3 p-3 rounded-lg border bg-card border-l-[3px] border-l-primary text-xs shadow-lg animate-[slideIn_0.3s_ease]">
|
||||
<Clock class="size-3 text-muted-foreground flex-shrink-0" />
|
||||
<span class="text-muted-foreground flex-shrink-0">{{ n.time }}</span>
|
||||
<span class="flex-1">{{ n.message }}</span>
|
||||
<button class="text-muted-foreground hover:text-destructive" @click="store.dismissNotification(n.id)">×</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sch-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }
|
||||
.sch-header h2 { margin: 0 0 3px; font-size: 18px; color: var(--text-primary); font-weight: 700; }
|
||||
.sch-header p { margin: 0; font-size: 13px; color: var(--text-secondary); }
|
||||
.sch-header-right { display: flex; align-items: center; gap: 12px; }
|
||||
.sch-status { font-size: 11px; padding: 3px 10px; border-radius: 10px; font-weight: 600; }
|
||||
.sch-status.on { background: rgba(63,185,80,0.1); color: var(--success); }
|
||||
.sch-status.off { background: rgba(136,136,170,0.1); color: var(--text-muted); }
|
||||
|
||||
.btn {
|
||||
padding: 6px 16px; background: var(--bg-secondary); border: 1px solid var(--border);
|
||||
border-radius: var(--radius); color: var(--text-primary); font-size: 13px; cursor: pointer;
|
||||
@keyframes slideIn {
|
||||
from { transform: translateX(100%); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
.btn:hover { border-color: var(--accent); }
|
||||
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; margin-top: 6px; }
|
||||
.btn.primary:hover { background: var(--accent-hover); }
|
||||
|
||||
.sch-form {
|
||||
padding: 20px; background: var(--bg-secondary); border: 1px solid var(--border);
|
||||
border-radius: var(--radius); margin-bottom: 22px; display: flex; flex-direction: column; gap: 12px;
|
||||
}
|
||||
.form-row { display: flex; gap: 12px; }
|
||||
.form-group { display: flex; flex-direction: column; gap: 4px; flex: 1; }
|
||||
.form-group.flex-2 { flex: 2; }
|
||||
.form-group label { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
|
||||
.form-group input, .form-group select {
|
||||
padding: 8px 10px; background: var(--bg-input); border: 1px solid var(--border);
|
||||
border-radius: 6px; color: var(--text-primary); font-size: 13px; outline: none;
|
||||
}
|
||||
.form-group input:focus, .form-group select:focus { border-color: var(--accent); }
|
||||
.day-pills { display: flex; gap: 5px; }
|
||||
.day-pill {
|
||||
padding: 4px 10px; background: var(--bg-input); border: 1px solid var(--border);
|
||||
border-radius: 14px; color: var(--text-secondary); font-size: 12px; cursor: pointer;
|
||||
}
|
||||
.day-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }
|
||||
.time-inputs { display: flex; align-items: center; gap: 4px; }
|
||||
.time-in { width: 50px; text-align: center; }
|
||||
|
||||
.sch-rules { display: flex; flex-direction: column; gap: 8px; }
|
||||
.sch-rule {
|
||||
display: flex; align-items: center; gap: 14px; padding: 14px 16px;
|
||||
background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius);
|
||||
}
|
||||
.sch-rule.disabled { opacity: 0.4; }
|
||||
.rule-info { flex: 1; min-width: 0; }
|
||||
.rule-name { font-size: 14px; color: var(--text-primary); font-weight: 500; }
|
||||
.rule-desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
|
||||
.rule-meta { display: flex; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
|
||||
.meta-tag { font-size: 11px; padding: 1px 8px; background: var(--bg-primary); border-radius: 10px; color: var(--text-secondary); }
|
||||
.meta-tag.type { color: var(--accent); }
|
||||
.rule-exec { flex-shrink: 0; text-align: right; }
|
||||
.exec-next { font-size: 12px; color: var(--success); }
|
||||
.exec-last { font-size: 11px; color: var(--text-muted); }
|
||||
.rule-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
|
||||
.toggle-btn { padding: 3px 12px; border-radius: 10px; border: none; font-size: 10px; font-weight: 700; cursor: pointer; }
|
||||
.toggle-btn.on { background: rgba(63,185,80,0.15); color: var(--success); }
|
||||
.toggle-btn.off { background: rgba(136,136,170,0.1); color: var(--text-muted); }
|
||||
.del-btn { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--text-muted); }
|
||||
.del-btn:hover { color: var(--error); }
|
||||
|
||||
.sch-log { margin-top: 28px; padding: 16px 18px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); }
|
||||
.sch-log h3 { margin: 0 0 10px; font-size: 13px; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
|
||||
.log-entry { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; }
|
||||
.log-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
|
||||
.log-dot.ok { background: var(--success); }
|
||||
.log-dot.fail { background: var(--error); }
|
||||
.log-time { color: var(--text-muted); white-space: nowrap; }
|
||||
.log-name { color: var(--text-secondary); font-weight: 500; white-space: nowrap; }
|
||||
.log-msg { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.sch-toasts { position: fixed; bottom: 16px; right: 16px; z-index: 100; display: flex; flex-direction: column; gap: 6px; max-width: 380px; }
|
||||
.sch-toast {
|
||||
display: flex; align-items: center; gap: 8px; padding: 10px 14px;
|
||||
background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius);
|
||||
border-left: 3px solid var(--accent); font-size: 12px; animation: slideIn 0.3s ease;
|
||||
}
|
||||
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
|
||||
.toast-time { color: var(--text-muted); white-space: nowrap; }
|
||||
.toast-msg { color: var(--text-primary); flex: 1; }
|
||||
.toast-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; }
|
||||
.toast-close:hover { color: var(--error); }
|
||||
|
||||
.empty { color: var(--text-muted); text-align: center; padding: 32px; font-size: 13px; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user