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:
+83
-98
@@ -1,47 +1,36 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { getColombianHolidays, isHoliday } from '@/services/calendar'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
|
||||
|
||||
const today = new Date()
|
||||
const currentYear = ref(today.getFullYear())
|
||||
const currentMonth = ref(today.getMonth())
|
||||
const selectedDate = ref<Date | null>(null)
|
||||
|
||||
const MONTHS = [
|
||||
'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
|
||||
'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre',
|
||||
]
|
||||
const WEEKDAYS = ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb']
|
||||
const MONTHS = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre']
|
||||
const WEEKDAYS = ['Dom','Lun','Mar','Mié','Jue','Vie','Sáb']
|
||||
|
||||
const holidays = computed(() => {
|
||||
const h = getColombianHolidays(currentYear.value)
|
||||
return new Map(h.map(h => [`${h.date.getFullYear()}-${h.date.getMonth()}-${h.date.getDate()}`, h.name]))
|
||||
})
|
||||
|
||||
const daysInMonth = computed(() => {
|
||||
const weeks = computed(() => {
|
||||
const year = currentYear.value
|
||||
const month = currentMonth.value
|
||||
const firstDay = new Date(year, month, 1).getDay()
|
||||
const totalDays = new Date(year, month + 1, 0).getDate()
|
||||
|
||||
return Array.from({ length: firstDay + totalDays }, (_, i) => {
|
||||
if (i < firstDay) return { day: null, isToday: false, isHoliday: false, isWeekend: false, isSelected: false, holidayName: undefined as string | undefined }
|
||||
const days: (number | null)[] = Array.from({ length: 42 }, (_, i) => {
|
||||
const d = i - firstDay + 1
|
||||
const date = new Date(year, month, d)
|
||||
const key = `${year}-${month}-${d}`
|
||||
const h = holidays.value.get(key)
|
||||
const dow = date.getDay()
|
||||
return {
|
||||
day: d,
|
||||
isToday: d === today.getDate() && month === today.getMonth() && year === today.getFullYear(),
|
||||
isHoliday: !!h || dow === 0,
|
||||
holidayName: h,
|
||||
isWeekend: dow === 0 || dow === 6,
|
||||
isSelected: selectedDate.value
|
||||
? selectedDate.value.getDate() === d && selectedDate.value.getMonth() === month && selectedDate.value.getFullYear() === year
|
||||
: false,
|
||||
}
|
||||
return d > 0 && d <= totalDays ? d : null
|
||||
})
|
||||
const weeks: (number | null)[][] = []
|
||||
for (let i = 0; i < days.length; i += 7) weeks.push(days.slice(i, i + 7))
|
||||
return weeks
|
||||
})
|
||||
|
||||
const selectedHoliday = computed(() => {
|
||||
@@ -50,100 +39,96 @@ const selectedHoliday = computed(() => {
|
||||
return h.holiday ? h.name : null
|
||||
})
|
||||
|
||||
function isWorkingDay(date: Date): boolean {
|
||||
const dow = date.getDay()
|
||||
if (dow === 0 || dow === 6) return false
|
||||
return !isHoliday(date).holiday
|
||||
function isWeekend(date: Date): boolean {
|
||||
return date.getDay() === 0 || date.getDay() === 6
|
||||
}
|
||||
|
||||
function selectDay(day: number) {
|
||||
selectedDate.value = new Date(currentYear.value, currentMonth.value, day)
|
||||
}
|
||||
|
||||
function prevMonth() {
|
||||
if (currentMonth.value === 0) { currentMonth.value = 11; currentYear.value-- }
|
||||
else currentMonth.value--
|
||||
}
|
||||
|
||||
function nextMonth() {
|
||||
if (currentMonth.value === 11) { currentMonth.value = 0; currentYear.value++ }
|
||||
else currentMonth.value++
|
||||
}
|
||||
|
||||
function selectDay(day: number | null) {
|
||||
if (day !== null) selectedDate.value = new Date(currentYear.value, currentMonth.value, day)
|
||||
function dayClasses(day: number | null) {
|
||||
if (day === null) return 'text-muted-foreground/20 cursor-default'
|
||||
const d = new Date(currentYear.value, currentMonth.value, day)
|
||||
const key = `${currentYear.value}-${currentMonth.value}-${day}`
|
||||
const isHol = holidays.value.has(key)
|
||||
const isToday = day === today.getDate() && currentMonth.value === today.getMonth() && currentYear.value === today.getFullYear()
|
||||
const isSel = selectedDate.value?.getDate() === day && selectedDate.value?.getMonth() === currentMonth.value && selectedDate.value?.getFullYear() === currentYear.value
|
||||
const wknd = isWeekend(d)
|
||||
|
||||
let cls = 'cursor-pointer hover:bg-accent rounded-md'
|
||||
if (isToday) cls += ' bg-primary/10 text-primary font-bold'
|
||||
else if (wknd) cls += ' text-muted-foreground/50'
|
||||
else if (isHol) cls += ' text-primary'
|
||||
|
||||
if (isSel) cls += ' ring-2 ring-primary ring-inset'
|
||||
return cls
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="cal-view">
|
||||
<div class="cal-nav">
|
||||
<button @click="prevMonth" class="cal-nav-btn">←</button>
|
||||
<h2>{{ MONTHS[currentMonth] }} {{ currentYear }}</h2>
|
||||
<button @click="nextMonth" class="cal-nav-btn">→</button>
|
||||
<button class="cal-today" @click="currentMonth = today.getMonth(); currentYear = today.getFullYear()">Hoy</button>
|
||||
</div>
|
||||
|
||||
<div class="cal-grid">
|
||||
<div v-for="w in WEEKDAYS" :key="w" class="cal-header">{{ w }}</div>
|
||||
<div
|
||||
v-for="(d, i) in daysInMonth"
|
||||
:key="i"
|
||||
:class="['cal-day', { empty: d.day === null, today: d.isToday, weekend: d.isWeekend && !d.isHoliday, holiday: d.isHoliday, selected: d.isSelected }]"
|
||||
@click="selectDay(d.day)"
|
||||
>
|
||||
<span v-if="d.day" class="cal-num">{{ d.day }}</span>
|
||||
<span v-if="d.holidayName" class="cal-hol">{{ d.holidayName.slice(0, 3) }}</span>
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<Button variant="outline" size="icon" @click="prevMonth">
|
||||
<ChevronLeft class="size-4" />
|
||||
</Button>
|
||||
<h2 class="text-lg font-bold min-w-[180px]">{{ MONTHS[currentMonth] }} {{ currentYear }}</h2>
|
||||
<Button variant="outline" size="icon" @click="nextMonth">
|
||||
<ChevronRight class="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" @click="currentMonth = today.getMonth(); currentYear = today.getFullYear()">Hoy</Button>
|
||||
</div>
|
||||
|
||||
<div class="cal-legend">
|
||||
<span><span class="leg-dot w-day"></span> Laboral</span>
|
||||
<span><span class="leg-dot w-end"></span> Fin de semana</span>
|
||||
<span><span class="leg-dot w-hol"></span> Feriado</span>
|
||||
</div>
|
||||
<Card>
|
||||
<CardContent class="p-4">
|
||||
<div class="grid grid-cols-7 gap-px bg-border rounded-lg overflow-hidden">
|
||||
<div v-for="w in WEEKDAYS" :key="w" class="text-center text-[11px] font-semibold text-muted-foreground uppercase tracking-wider py-2 bg-card">
|
||||
{{ w }}
|
||||
</div>
|
||||
<template v-for="(week, wi) in weeks" :key="wi">
|
||||
<div v-for="(day, di) in week" :key="`${wi}-${di}`"
|
||||
:class="[
|
||||
'aspect-square flex flex-col items-center justify-center text-sm bg-card transition-colors',
|
||||
dayClasses(day)
|
||||
]"
|
||||
@click="day && selectDay(day)"
|
||||
>
|
||||
<template v-if="day">
|
||||
<span class="leading-none">{{ day }}</span>
|
||||
<span v-if="holidays.get(`${currentYear}-${currentMonth}-${day}`)" class="text-[8px] leading-tight truncate max-w-full px-0.5 opacity-70">
|
||||
{{ holidays.get(`${currentYear}-${currentMonth}-${day}`)!.slice(0, 3) }}
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedDate" class="cal-info">
|
||||
<h3>{{ selectedDate.toLocaleDateString('es-CO', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) }}</h3>
|
||||
<p v-if="selectedHoliday">Feriado: <strong>{{ selectedHoliday }}</strong></p>
|
||||
<p v-else-if="isWorkingDay(selectedDate)">Día laboral</p>
|
||||
<p v-else>Fin de semana</p>
|
||||
<div class="flex gap-4 mt-3 text-xs text-muted-foreground">
|
||||
<span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-sm bg-border" /> Laboral</span>
|
||||
<span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-sm bg-muted" /> Fin de semana</span>
|
||||
<span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-sm bg-primary" /> Feriado</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div v-if="selectedDate" class="text-sm text-muted-foreground">
|
||||
<span class="capitalize font-medium text-foreground">
|
||||
{{ selectedDate.toLocaleDateString('es-CO', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) }}
|
||||
</span>
|
||||
<span v-if="selectedHoliday"> — <Badge variant="secondary" class="text-xs">Feriado: {{ selectedHoliday }}</Badge></span>
|
||||
<span v-else-if="isWeekend(selectedDate)"> — Fin de semana</span>
|
||||
<span v-else> — Día laboral</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.cal-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
|
||||
.cal-nav h2 { margin: 0; font-size: 18px; color: var(--text-primary); min-width: 180px; font-weight: 700; }
|
||||
.cal-nav-btn {
|
||||
padding: 5px 14px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
.cal-nav-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
|
||||
.cal-today { margin-left: auto; padding: 5px 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); color: var(--accent); cursor: pointer; font-size: 13px; font-weight: 500; }
|
||||
.cal-today:hover { background: var(--bg-tertiary); }
|
||||
|
||||
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
|
||||
.cal-header { padding: 9px 4px; text-align: center; font-size: 11px; font-weight: 600; color: var(--text-muted); background: var(--bg-secondary); text-transform: uppercase; letter-spacing: 0.3px; }
|
||||
.cal-day { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px; background: var(--bg-primary); cursor: pointer; transition: background 0.1s; }
|
||||
.cal-day:hover { background: var(--bg-tertiary); }
|
||||
.cal-day.empty { cursor: default; background: var(--bg-primary); }
|
||||
.cal-day.today { background: #1E1040; }
|
||||
.cal-day.today .cal-num { color: var(--accent); font-weight: 700; }
|
||||
.cal-day.weekend { color: var(--text-muted); background: #161630; }
|
||||
.cal-day.holiday { color: var(--accent); }
|
||||
.cal-day.holiday .cal-hol { font-size: 8px; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
|
||||
.cal-day.selected { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 2px; }
|
||||
.cal-num { font-size: 14px; font-weight: 500; }
|
||||
|
||||
.cal-legend { display: flex; gap: 18px; margin-top: 12px; font-size: 11px; color: var(--text-muted); }
|
||||
.leg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
|
||||
.w-day { background: var(--border); }
|
||||
.w-end { background: #161630; }
|
||||
.w-hol { background: var(--accent); }
|
||||
|
||||
.cal-info { margin-top: 22px; padding: 18px 20px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); }
|
||||
.cal-info h3 { margin: 0 0 6px; font-size: 15px; color: var(--text-primary); text-transform: capitalize; }
|
||||
.cal-info p { margin: 0; font-size: 13px; color: var(--text-secondary); }
|
||||
</style>
|
||||
|
||||
+84
-132
@@ -1,145 +1,97 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useProjectsStore } from '@/stores/projects'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { Activity, AlertTriangle, ClipboardList, FileText } from 'lucide-vue-next'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
|
||||
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 v-if="project" class="space-y-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight">{{ project.name }}</h1>
|
||||
<div class="flex items-center gap-2 mt-1">
|
||||
<span v-if="project.key" class="text-sm text-muted-foreground">Clave: {{ project.key }}</span>
|
||||
<Badge v-if="project.status" variant="outline" class="text-xs">
|
||||
{{ project.status }}
|
||||
</Badge>
|
||||
</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 class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle class="text-sm font-medium">Historias de Usuario</CardTitle>
|
||||
<ClipboardList class="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="text-2xl font-bold">—</div>
|
||||
<p class="text-xs text-muted-foreground">HUs en el proyecto</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle class="text-sm font-medium">Síntomas activos</CardTitle>
|
||||
<Activity class="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="text-2xl font-bold">—</div>
|
||||
<p class="text-xs text-muted-foreground">HUs en progreso</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle class="text-sm font-medium">Riesgos</CardTitle>
|
||||
<AlertTriangle class="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="text-2xl font-bold">—</div>
|
||||
<p class="text-xs text-muted-foreground">Riesgos detectados</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle class="text-sm font-medium">Transcripciones</CardTitle>
|
||||
<FileText class="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="text-2xl font-bold">—</div>
|
||||
<p class="text-xs text-muted-foreground">Sesiones procesadas</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Historia clínica</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p v-if="project.description" class="text-sm text-muted-foreground leading-relaxed">
|
||||
{{ project.description }}
|
||||
</p>
|
||||
<p v-else class="text-sm text-muted-foreground italic">Sin descripción del paciente</p>
|
||||
|
||||
<div v-if="project.start_date" class="grid grid-cols-2 gap-4 mt-4">
|
||||
<div>
|
||||
<span class="text-xs text-muted-foreground">Ingreso</span>
|
||||
<p class="text-sm font-medium">{{ project.start_date }}</p>
|
||||
</div>
|
||||
<div v-if="project.end_date">
|
||||
<span class="text-xs text-muted-foreground">Alta prevista</span>
|
||||
<p class="text-sm font-medium">{{ project.end_date }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div v-else class="flex items-center justify-center h-full text-muted-foreground text-sm">
|
||||
<p v-if="projects.loading">Cargando pacientes...</p>
|
||||
<p v-else>Seleccioná un paciente del panel lateral</p>
|
||||
</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>
|
||||
|
||||
+41
-158
@@ -1,11 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const email = ref('')
|
||||
const password = ref('')
|
||||
const showPassword = ref(false)
|
||||
|
||||
async function handleLogin() {
|
||||
if (!email.value || !password.value) return
|
||||
@@ -14,171 +16,52 @@ async function handleLogin() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="login-bg">
|
||||
<div class="login-card">
|
||||
<div class="login-circles">
|
||||
<span class="c c1"></span>
|
||||
<span class="c c2"></span>
|
||||
<span class="c c3"></span>
|
||||
</div>
|
||||
|
||||
<h1 class="login-brand">teloprax</h1>
|
||||
<p class="login-tagline">Tecnología con prescripción</p>
|
||||
|
||||
<div class="login-divider"></div>
|
||||
|
||||
<p class="login-sub">Centro de diagnóstico multi-proyecto</p>
|
||||
|
||||
<form @submit.prevent="handleLogin" class="login-form">
|
||||
<div class="field">
|
||||
<label>Email</label>
|
||||
<input v-model="email" type="email" placeholder="ricardo@..." autocomplete="email" />
|
||||
<div class="flex min-h-svh flex-col items-center justify-center bg-background p-6">
|
||||
<Card class="w-full max-w-[400px]">
|
||||
<CardHeader class="text-center pb-4">
|
||||
<div class="flex items-center justify-center gap-1.5 mb-3">
|
||||
<span class="block rounded-full border-2 border-primary opacity-35 w-[10px] h-[10px]" />
|
||||
<span class="block rounded-full border-2 border-primary opacity-65 w-[14px] h-[14px]" />
|
||||
<span class="block rounded-full bg-primary w-[18px] h-[18px]" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Contraseña</label>
|
||||
<div class="password-wrap">
|
||||
<input
|
||||
<CardTitle class="font-display text-2xl font-bold">teloprax</CardTitle>
|
||||
<CardDescription class="text-xs mt-1">Tecnología con prescripción</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<form @submit.prevent="handleLogin" class="flex flex-col gap-4">
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Email</label>
|
||||
<Input
|
||||
v-model="email"
|
||||
type="email"
|
||||
placeholder="ricardo@..."
|
||||
autocomplete="email"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Contraseña</label>
|
||||
<Input
|
||||
v-model="password"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
<button type="button" class="toggle-btn" @click="showPassword = !showPassword">
|
||||
{{ showPassword ? '◉' : '◎' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="auth.error" class="error-msg">{{ auth.error }}</p>
|
||||
<div v-if="auth.error" class="text-xs text-destructive bg-destructive/10 rounded-md px-3 py-2">
|
||||
{{ auth.error }}
|
||||
</div>
|
||||
|
||||
<button type="submit" class="login-btn" :disabled="auth.loading">
|
||||
{{ auth.loading ? 'Ingresando...' : 'Iniciar diagnóstico' }}
|
||||
</button>
|
||||
</form>
|
||||
<Button type="submit" class="w-full mt-2" :disabled="auth.loading">
|
||||
{{ auth.loading ? 'Ingresando...' : 'Iniciar diagnóstico' }}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<p class="login-footer">kappa.lambdaanalytics.co</p>
|
||||
</div>
|
||||
<p class="text-center text-[11px] text-muted-foreground/50 mt-6">
|
||||
kappa.lambdaanalytics.co
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.login-bg {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #1A1A2E;
|
||||
}
|
||||
.login-card {
|
||||
width: 420px;
|
||||
padding: 44px 40px;
|
||||
background: #141428;
|
||||
border: 1px solid #2A2A45;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-circles {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.c {
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #E63946;
|
||||
}
|
||||
.c1 { width: 10px; height: 10px; opacity: 0.35; }
|
||||
.c2 { width: 14px; height: 14px; opacity: 0.65; }
|
||||
.c3 { width: 18px; height: 18px; background: #E63946; border: none; }
|
||||
|
||||
.login-brand {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 26px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: -0.5px;
|
||||
margin: 0;
|
||||
}
|
||||
.login-tagline {
|
||||
margin: 4px 0 0;
|
||||
font-size: 13px;
|
||||
color: #E63946;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
.login-divider {
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
background: #2A2A45;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.login-sub {
|
||||
margin: 0 0 28px;
|
||||
font-size: 13px;
|
||||
color: #8888AA;
|
||||
}
|
||||
|
||||
.login-form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
|
||||
.field { display: flex; flex-direction: column; gap: 5px; }
|
||||
.field label { font-size: 11px; color: #8888AA; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
|
||||
.field input {
|
||||
padding: 10px 12px;
|
||||
background: #1A1A2E;
|
||||
border: 1px solid #2A2A45;
|
||||
border-radius: 6px;
|
||||
color: #E6EDF3;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.field input:focus {
|
||||
border-color: #E63946;
|
||||
box-shadow: 0 0 0 2px rgba(230,57,70,0.12);
|
||||
}
|
||||
.field input::placeholder { color: #555577; }
|
||||
.password-wrap { position: relative; }
|
||||
.password-wrap input { width: 100%; box-sizing: border-box; padding-right: 40px; }
|
||||
.toggle-btn {
|
||||
position: absolute;
|
||||
right: 8px; top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none; border: none;
|
||||
color: #8888AA; font-size: 16px;
|
||||
cursor: pointer; padding: 4px;
|
||||
}
|
||||
.toggle-btn:hover { color: #E6EDF3; }
|
||||
|
||||
.error-msg {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: #F85149;
|
||||
padding: 8px 12px;
|
||||
background: rgba(248,81,73,0.08);
|
||||
border: 1px solid rgba(248,81,73,0.15);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
padding: 11px;
|
||||
background: #E63946;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
margin-top: 6px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.login-btn:hover { background: #C62E3A; }
|
||||
.login-btn:disabled { opacity: 0.5; cursor: default; }
|
||||
|
||||
.login-footer {
|
||||
margin: 28px 0 0;
|
||||
font-size: 11px;
|
||||
color: #444466;
|
||||
}
|
||||
</style>
|
||||
|
||||
+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