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
This commit is contained in:
@@ -0,0 +1,261 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useSchedulerStore } from '@/stores/scheduler'
|
||||
import { DAY_LABELS, computeNextRun, type ScheduleAction } from '@/services/scheduler'
|
||||
|
||||
const store = useSchedulerStore()
|
||||
const showForm = ref(false)
|
||||
|
||||
const form = ref({
|
||||
name: '', description: '',
|
||||
daysOfWeek: [] as number[],
|
||||
hour: 9, minute: 0,
|
||||
actionType: 'reminder' as ScheduleAction['type'],
|
||||
message: '',
|
||||
})
|
||||
|
||||
function toggleDay(d: number) {
|
||||
const idx = form.value.daysOfWeek.indexOf(d)
|
||||
if (idx >= 0) form.value.daysOfWeek.splice(idx, 1)
|
||||
else form.value.daysOfWeek.push(d)
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!form.value.name || form.value.daysOfWeek.length === 0) return
|
||||
const action: ScheduleAction = form.value.actionType === 'reminder'
|
||||
? { type: 'reminder', message: form.value.message || form.value.name }
|
||||
: { type: form.value.actionType as Exclude<ScheduleAction['type'], 'reminder'> }
|
||||
|
||||
await store.addRule({
|
||||
name: form.value.name, description: form.value.description,
|
||||
daysOfWeek: form.value.daysOfWeek, hour: form.value.hour,
|
||||
minute: form.value.minute, action, enabled: true,
|
||||
})
|
||||
showForm.value = false
|
||||
form.value = { name: '', description: '', daysOfWeek: [], hour: 9, minute: 0, actionType: 'reminder', message: '' }
|
||||
}
|
||||
|
||||
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')}`
|
||||
}
|
||||
|
||||
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' })}`
|
||||
}
|
||||
|
||||
const actionLabels: Record<ScheduleAction['type'], string> = {
|
||||
generate_progress_report: 'Informe semanal',
|
||||
check_hus: 'Revisión HUs',
|
||||
daily_prep: 'Daily prep',
|
||||
reminder: 'Recordatorio',
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await store.seedDefaults()
|
||||
await store.loadRules()
|
||||
await store.loadLogs()
|
||||
if (!store.running) store.start()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sch-view">
|
||||
<div class="sch-header">
|
||||
<div>
|
||||
<h2>Recetas automáticas</h2>
|
||||
<p>Tareas programadas que se ejecutan al abrir la app</p>
|
||||
</div>
|
||||
<div class="sch-header-right">
|
||||
<span :class="['sch-status', store.running ? 'on' : 'off']">
|
||||
{{ store.running ? 'Activo' : 'Pausado' }}
|
||||
</span>
|
||||
<button class="btn" @click="showForm = !showForm">
|
||||
{{ 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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</div>
|
||||
<p v-if="store.rules.length === 0" class="empty">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>
|
||||
|
||||
<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>
|
||||
</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;
|
||||
}
|
||||
.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