453 lines
22 KiB
Vue
453 lines
22 KiB
Vue
<script setup>
|
|
import { ref, computed, watch, onMounted } from 'vue'
|
|
import { supabase } from '@/lib/supabase/client'
|
|
import { useTenantStore } from '@/stores/tenantStore'
|
|
import { useLayout } from '@/layout/composables/layout'
|
|
|
|
const { layoutConfig, isDarkTheme } = useLayout()
|
|
const tenantStore = useTenantStore()
|
|
|
|
// ── Período ───────────────────────────────────────────────
|
|
const PERIODS = [
|
|
{ label: 'Esta semana', value: 'week' },
|
|
{ label: 'Este mês', value: 'month' },
|
|
{ label: 'Últimos 3 meses', value: '3months' },
|
|
{ label: 'Últimos 6 meses', value: '6months' },
|
|
]
|
|
|
|
const selectedPeriod = ref('month')
|
|
|
|
function periodRange (period) {
|
|
const now = new Date()
|
|
let start, end
|
|
if (period === 'week') {
|
|
start = new Date(now); start.setDate(now.getDate() - now.getDay()); start.setHours(0, 0, 0, 0)
|
|
end = new Date(now); end.setHours(23, 59, 59, 999)
|
|
} else if (period === 'month') {
|
|
start = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0, 0)
|
|
end = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59, 999)
|
|
} else if (period === '3months') {
|
|
start = new Date(now.getFullYear(), now.getMonth() - 2, 1, 0, 0, 0, 0)
|
|
end = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59, 999)
|
|
} else if (period === '6months') {
|
|
start = new Date(now.getFullYear(), now.getMonth() - 5, 1, 0, 0, 0, 0)
|
|
end = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59, 999)
|
|
}
|
|
return { start, end }
|
|
}
|
|
|
|
// ── Dados ─────────────────────────────────────────────────
|
|
const loading = ref(false)
|
|
const sessions = ref([])
|
|
const loadError = ref('')
|
|
|
|
async function loadSessions () {
|
|
const uid = tenantStore.user?.id || null
|
|
const tenantId = tenantStore.activeTenantId || null
|
|
if (!uid || !tenantId) return
|
|
|
|
const { start, end } = periodRange(selectedPeriod.value)
|
|
loading.value = true
|
|
loadError.value = ''
|
|
sessions.value = []
|
|
|
|
try {
|
|
const { data, error } = await supabase
|
|
.from('agenda_eventos')
|
|
.select('id, inicio_em, fim_em, status, modalidade, tipo, titulo, titulo_custom, patient_id, patients(nome_completo)')
|
|
.eq('tenant_id', tenantId)
|
|
.eq('owner_id', uid)
|
|
.gte('inicio_em', start.toISOString())
|
|
.lte('inicio_em', end.toISOString())
|
|
.order('inicio_em', { ascending: false })
|
|
.limit(500)
|
|
if (error) throw error
|
|
sessions.value = data || []
|
|
} catch (e) {
|
|
loadError.value = e?.message || 'Falha ao carregar relatório.'
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
// ── Métricas ──────────────────────────────────────────────
|
|
const total = computed(() => sessions.value.length)
|
|
const realizadas = computed(() => sessions.value.filter(s => s.status === 'realizado').length)
|
|
const faltas = computed(() => sessions.value.filter(s => s.status === 'faltou').length)
|
|
const canceladas = computed(() => sessions.value.filter(s => s.status === 'cancelado').length)
|
|
const agendadas = computed(() => sessions.value.filter(s => !s.status || s.status === 'agendado').length)
|
|
const remarcadas = computed(() => sessions.value.filter(s => s.status === 'remarcado').length)
|
|
const taxaRealizacao = computed(() => {
|
|
const denom = realizadas.value + faltas.value + canceladas.value
|
|
if (!denom) return null
|
|
return Math.round((realizadas.value / denom) * 100)
|
|
})
|
|
|
|
// ── Filtro de status na tabela ────────────────────────────
|
|
const filtroTabela = ref(null) // null = todos
|
|
|
|
const sessionsFiltradas = computed(() => {
|
|
if (!filtroTabela.value) return sessions.value
|
|
if (filtroTabela.value === 'agendado') return sessions.value.filter(s => !s.status || s.status === 'agendado')
|
|
return sessions.value.filter(s => s.status === filtroTabela.value)
|
|
})
|
|
|
|
function toggleFiltroTabela (val) {
|
|
filtroTabela.value = filtroTabela.value === val ? null : val
|
|
}
|
|
|
|
// ── Quick-stats config ────────────────────────────────────
|
|
const quickStats = computed(() => [
|
|
{ label: 'Total', value: total.value, filter: null, cls: '', valCls: 'text-[var(--text-color)]' },
|
|
{ label: 'Realizadas', value: realizadas.value, filter: 'realizado', cls: 'qs-ok', valCls: 'text-green-500' },
|
|
{ label: 'Faltas', value: faltas.value, filter: 'faltou', cls: 'qs-danger', valCls: 'text-red-500' },
|
|
{ label: 'Canceladas', value: canceladas.value, filter: 'cancelado', cls: 'qs-warn', valCls: 'text-orange-500' },
|
|
{ label: 'Agendadas', value: agendadas.value, filter: 'agendado', cls: 'qs-info', valCls: 'text-sky-500' },
|
|
{ label: 'Taxa realização', value: taxaRealizacao.value != null ? `${taxaRealizacao.value}%` : '—', filter: null, cls: taxaRealizacao.value != null && taxaRealizacao.value >= 85 ? 'qs-ok' : '', valCls: taxaRealizacao.value != null && taxaRealizacao.value >= 85 ? 'text-green-500' : 'text-[var(--text-color)]' },
|
|
])
|
|
|
|
// ── Gráfico ───────────────────────────────────────────────
|
|
function isoWeek (d) {
|
|
const dt = new Date(d)
|
|
const day = dt.getDay() || 7
|
|
dt.setDate(dt.getDate() + 4 - day)
|
|
const yearStart = new Date(dt.getFullYear(), 0, 1)
|
|
const wk = Math.ceil((((dt - yearStart) / 86400000) + 1) / 7)
|
|
return `${dt.getFullYear()}-S${String(wk).padStart(2, '0')}`
|
|
}
|
|
function isoMonth (d) {
|
|
const dt = new Date(d)
|
|
return `${dt.getFullYear()}-${String(dt.getMonth() + 1).padStart(2, '0')}`
|
|
}
|
|
function monthLabel (key) {
|
|
const [y, m] = key.split('-')
|
|
const names = ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez']
|
|
return `${names[Number(m) - 1]}/${y}`
|
|
}
|
|
|
|
const chartData = computed(() => {
|
|
const groupBy = selectedPeriod.value === 'week' ? isoWeek : isoMonth
|
|
const labelFn = selectedPeriod.value === 'week' ? k => k : monthLabel
|
|
const buckets = {}
|
|
for (const s of sessions.value) {
|
|
const key = groupBy(s.inicio_em)
|
|
if (!buckets[key]) buckets[key] = { realizado: 0, faltou: 0, cancelado: 0, outros: 0 }
|
|
const st = s.status || 'agendado'
|
|
if (st === 'realizado') buckets[key].realizado++
|
|
else if (st === 'faltou') buckets[key].faltou++
|
|
else if (st === 'cancelado') buckets[key].cancelado++
|
|
else buckets[key].outros++
|
|
}
|
|
const keys = Object.keys(buckets).sort()
|
|
return {
|
|
labels: keys.map(labelFn),
|
|
datasets: [
|
|
{ label: 'Realizadas', backgroundColor: '#22c55e', data: keys.map(k => buckets[k].realizado), barThickness: 20 },
|
|
{ label: 'Faltas', backgroundColor: '#ef4444', data: keys.map(k => buckets[k].faltou), barThickness: 20 },
|
|
{ label: 'Canceladas', backgroundColor: '#f97316', data: keys.map(k => buckets[k].cancelado), barThickness: 20 },
|
|
{ label: 'Outros', backgroundColor: '#93c5fd', data: keys.map(k => buckets[k].outros), barThickness: 20 },
|
|
]
|
|
}
|
|
})
|
|
|
|
const chartOptions = computed(() => {
|
|
const ds = getComputedStyle(document.documentElement)
|
|
const borderColor = ds.getPropertyValue('--surface-border') || '#e2e8f0'
|
|
const textMutedColor = ds.getPropertyValue('--text-color-secondary') || '#64748b'
|
|
return {
|
|
maintainAspectRatio: false,
|
|
plugins: { legend: { labels: { color: textMutedColor } } },
|
|
scales: {
|
|
x: { stacked: true, ticks: { color: textMutedColor }, grid: { color: 'transparent' } },
|
|
y: { stacked: true, ticks: { color: textMutedColor, precision: 0 }, grid: { color: borderColor, drawTicks: false } }
|
|
}
|
|
}
|
|
})
|
|
|
|
// ── Tabela helpers ────────────────────────────────────────
|
|
const STATUS_LABEL = {
|
|
agendado: 'Agendado', realizado: 'Realizado', faltou: 'Faltou',
|
|
cancelado: 'Cancelado', remarcado: 'Remarcado', bloqueado: 'Bloqueado',
|
|
}
|
|
const STATUS_SEVERITY = {
|
|
agendado: 'info', realizado: 'success', faltou: 'danger',
|
|
cancelado: 'warn', remarcado: 'secondary', bloqueado: 'secondary',
|
|
}
|
|
|
|
function fmtDateTimeBR (iso) {
|
|
if (!iso) return '—'
|
|
const d = new Date(iso)
|
|
if (Number.isNaN(d.getTime())) return iso
|
|
const dd = String(d.getDate()).padStart(2, '0')
|
|
const mm = String(d.getMonth() + 1).padStart(2, '0')
|
|
const yy = d.getFullYear()
|
|
const hh = String(d.getHours()).padStart(2, '0')
|
|
const mi = String(d.getMinutes()).padStart(2, '0')
|
|
return `${dd}/${mm}/${yy} ${hh}:${mi}`
|
|
}
|
|
function sessionTitle (s) { return s.titulo_custom || s.titulo || (s.tipo ? s.tipo : 'Sessão') }
|
|
function patientName (s) { return s.patients?.nome_completo || '—' }
|
|
|
|
// ── Watch & mount ─────────────────────────────────────────
|
|
watch(selectedPeriod, () => { filtroTabela.value = null; loadSessions() })
|
|
watch([() => layoutConfig.primary, () => layoutConfig.surface, isDarkTheme], () => {})
|
|
onMounted(loadSessions)
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Sentinel -->
|
|
<div class="h-px" />
|
|
|
|
<!-- ══════════════════════════════════════════════════════
|
|
HERO sticky
|
|
═══════════════════════════════════════════════════════ -->
|
|
<section
|
|
class="sticky mx-3 md:mx-4 mb-3 z-20 overflow-hidden rounded-md border border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-card,#fff)] px-3 py-2.5 transition-[border-radius] duration-200"
|
|
:style="{ top: 'var(--layout-sticky-top, 56px)' }"
|
|
>
|
|
<!-- Blobs -->
|
|
<div class="absolute inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
|
|
<div class="absolute w-64 h-64 -top-16 -right-8 rounded-full blur-[60px] bg-indigo-500/10" />
|
|
<div class="absolute w-72 h-72 top-0 -left-16 rounded-full blur-[60px] bg-emerald-400/[0.08]" />
|
|
</div>
|
|
|
|
<div class="relative z-[1] flex items-center gap-3 flex-wrap">
|
|
|
|
<!-- Brand -->
|
|
<div class="flex items-center gap-2 flex-shrink-0">
|
|
<div class="grid place-items-center w-9 h-9 rounded-md flex-shrink-0 bg-indigo-500/10 text-indigo-500">
|
|
<i class="pi pi-chart-bar text-base" />
|
|
</div>
|
|
<div class="min-w-0 hidden lg:block">
|
|
<div class="text-[1rem] font-bold tracking-tight text-[var(--text-color)]">Relatórios</div>
|
|
<div class="text-[1rem] text-[var(--text-color-secondary)]">Visão geral das suas sessões</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Seletor de período -->
|
|
<div class="flex-1 min-w-0 hidden xl:flex items-center mx-2">
|
|
<SelectButton
|
|
v-model="selectedPeriod"
|
|
:options="PERIODS"
|
|
option-label="label"
|
|
option-value="value"
|
|
:allow-empty="false"
|
|
size="small"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Refresh -->
|
|
<div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
|
|
<Button
|
|
icon="pi pi-refresh"
|
|
severity="secondary"
|
|
outlined
|
|
class="h-9 w-9 rounded-full"
|
|
:loading="loading"
|
|
title="Recarregar"
|
|
@click="loadSessions"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Seletor de período — mobile (abaixo da linha principal) -->
|
|
<div class="xl:hidden relative z-[1] mt-2.5 flex flex-wrap gap-1.5">
|
|
<button
|
|
v-for="p in PERIODS"
|
|
:key="p.value"
|
|
class="inline-flex items-center px-3 py-1 rounded-full text-[1rem] font-semibold border-[1.5px] cursor-pointer transition-all duration-150 select-none"
|
|
:class="selectedPeriod === p.value
|
|
? 'bg-[var(--primary-color,#6366f1)] border-[var(--primary-color,#6366f1)] text-white'
|
|
: 'border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-ground,#f8fafc)] text-[var(--text-color-secondary)] hover:border-indigo-300 hover:text-[var(--text-color)]'"
|
|
@click="selectedPeriod = p.value"
|
|
>
|
|
{{ p.label }}
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ══════════════════════════════════════════════════════
|
|
CONTEÚDO
|
|
═══════════════════════════════════════════════════════ -->
|
|
<div class="px-3 md:px-4 pb-8 flex flex-col gap-3">
|
|
|
|
<!-- Erro -->
|
|
<Message v-if="loadError" severity="error">{{ loadError }}</Message>
|
|
|
|
<!-- Loading skeleton -->
|
|
<div v-if="loading" class="flex flex-col gap-3">
|
|
<!-- Stats skeleton -->
|
|
<div class="flex flex-wrap gap-2">
|
|
<div v-for="n in 6" :key="n" class="flex-1 min-w-[80px] h-[72px] rounded-md bg-[var(--surface-border,#e2e8f0)] animate-pulse" />
|
|
</div>
|
|
<!-- Chart skeleton -->
|
|
<div class="rounded-md border border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-card,#fff)] h-[280px] animate-pulse" />
|
|
</div>
|
|
|
|
<template v-else>
|
|
|
|
<!-- ── QUICK-STATS clicáveis ────────────────────── -->
|
|
<div class="flex flex-wrap gap-2">
|
|
<div
|
|
v-for="s in quickStats"
|
|
:key="s.label"
|
|
class="flex flex-col gap-0.5 px-4 py-2.5 rounded-md border flex-1 min-w-[80px] transition-[border-color,box-shadow,background] duration-150"
|
|
:class="[
|
|
s.filter !== null ? 'cursor-pointer select-none' : '',
|
|
s.filter !== null && filtroTabela === s.filter
|
|
? 'border-[var(--primary-color,#6366f1)] shadow-[0_0_0_3px_rgba(99,102,241,0.15)] bg-[var(--surface-card,#fff)]'
|
|
: s.cls === 'qs-ok'
|
|
? 'border-green-500/25 bg-green-500/5 hover:border-green-500/40'
|
|
: s.cls === 'qs-danger'
|
|
? 'border-red-500/25 bg-red-500/5 hover:border-red-500/40'
|
|
: s.cls === 'qs-warn'
|
|
? 'border-orange-500/25 bg-orange-500/5 hover:border-orange-500/40'
|
|
: s.cls === 'qs-info'
|
|
? 'border-sky-500/25 bg-sky-500/5 hover:border-sky-500/40'
|
|
: 'border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-card,#fff)] hover:border-indigo-300/50'
|
|
]"
|
|
@click="s.filter !== null ? toggleFiltroTabela(s.filter) : null"
|
|
>
|
|
<div class="text-[1.35rem] font-bold leading-none" :class="s.valCls">{{ s.value }}</div>
|
|
<div class="text-[1rem] text-[var(--text-color-secondary)] opacity-75 whitespace-nowrap">{{ s.label }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chip de filtro ativo na tabela -->
|
|
<div v-if="filtroTabela" class="flex items-center gap-2">
|
|
<span class="text-[1rem] text-[var(--text-color-secondary)]">Filtrando por:</span>
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[0.75rem] font-semibold bg-[var(--primary-color,#6366f1)] text-white">
|
|
{{ STATUS_LABEL[filtroTabela] || filtroTabela }}
|
|
<button class="ml-0.5 opacity-70 hover:opacity-100" @click="filtroTabela = null">
|
|
<i class="pi pi-times text-[0.6rem]" />
|
|
</button>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- ── GRÁFICO ──────────────────────────────────── -->
|
|
<div v-if="total > 0" class="rounded-md border border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-card,#fff)] overflow-hidden">
|
|
<div class="flex items-center justify-between px-4 py-3 border-b border-[var(--surface-border,#e2e8f0)]">
|
|
<div class="flex items-center gap-2">
|
|
<i class="pi pi-chart-bar text-[var(--text-color-secondary)] opacity-60" />
|
|
<span class="font-semibold text-[1rem] text-[var(--text-color)]">
|
|
Sessões por {{ selectedPeriod === 'week' ? 'semana' : 'mês' }}
|
|
</span>
|
|
</div>
|
|
<span class="text-[0.72rem] text-[var(--text-color-secondary)] opacity-60">{{ total }} sessão{{ total !== 1 ? 'ões' : '' }}</span>
|
|
</div>
|
|
<div class="p-4">
|
|
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-64" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── TABELA ───────────────────────────────────── -->
|
|
<div class="rounded-md border border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-card,#fff)] overflow-hidden">
|
|
|
|
<!-- Cabeçalho da seção -->
|
|
<div class="flex items-center justify-between px-4 py-3 border-b border-[var(--surface-border,#e2e8f0)]">
|
|
<div class="flex items-center gap-2">
|
|
<i class="pi pi-table text-[var(--text-color-secondary)] opacity-60" />
|
|
<span class="font-semibold text-[1rem] text-[var(--text-color)]">Sessões no período</span>
|
|
<span
|
|
v-if="filtroTabela"
|
|
class="text-[0.72rem] text-[var(--text-color-secondary)] opacity-70"
|
|
>(filtrado)</span>
|
|
</div>
|
|
<span class="inline-flex items-center justify-center min-w-[22px] h-[22px] px-1.5 rounded-full bg-[var(--primary-color,#6366f1)] text-white text-[1rem] font-bold">
|
|
{{ sessionsFiltradas.length }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Empty state (sem dados no período) -->
|
|
<div
|
|
v-if="!sessions.length"
|
|
class="flex flex-col items-center justify-center gap-3 py-14 px-6 text-center border-2 border-dashed border-[var(--surface-border,#e2e8f0)] mx-4 my-4 rounded-md bg-[var(--surface-ground,#f8fafc)]"
|
|
>
|
|
<div class="relative">
|
|
<div class="grid place-items-center w-16 h-16 rounded-2xl bg-[var(--surface-card,#fff)] border border-[var(--surface-border,#e2e8f0)] shadow-sm text-[var(--text-color-secondary)]">
|
|
<i class="pi pi-chart-bar text-3xl opacity-25" />
|
|
</div>
|
|
<div class="absolute -top-1.5 -right-1.5 w-6 h-6 rounded-full bg-[var(--surface-card,#fff)] border border-[var(--surface-border,#e2e8f0)] shadow-sm grid place-items-center">
|
|
<i class="pi pi-times text-[0.58rem] text-[var(--text-color-secondary)] opacity-50" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="font-bold text-[0.9rem] text-[var(--text-color)] mb-0.5">Nenhuma sessão no período</div>
|
|
<div class="text-[1rem] text-[var(--text-color-secondary)] max-w-xs">Tente selecionar um período diferente.</div>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2 mt-1 justify-center">
|
|
<button
|
|
v-for="p in PERIODS"
|
|
:key="p.value"
|
|
class="inline-flex items-center px-3 py-1 rounded-full text-[0.75rem] font-semibold border cursor-pointer transition-colors duration-150"
|
|
:class="selectedPeriod === p.value
|
|
? 'bg-[var(--primary-color,#6366f1)] border-[var(--primary-color,#6366f1)] text-white'
|
|
: 'border-[var(--surface-border,#e2e8f0)] text-[var(--text-color-secondary)] hover:border-indigo-300'"
|
|
@click="selectedPeriod = p.value"
|
|
>
|
|
{{ p.label }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empty state (filtro sem resultado) -->
|
|
<div
|
|
v-else-if="!sessionsFiltradas.length"
|
|
class="flex flex-col items-center gap-2 py-10 text-center text-[var(--text-color-secondary)]"
|
|
>
|
|
<i class="pi pi-filter-slash text-2xl opacity-30" />
|
|
<div class="font-semibold text-[0.88rem]">Nenhuma sessão com este status</div>
|
|
<Button label="Limpar filtro" icon="pi pi-times" severity="secondary" outlined size="small" class="rounded-full mt-1" @click="filtroTabela = null" />
|
|
</div>
|
|
|
|
<!-- DataTable -->
|
|
<DataTable
|
|
v-else
|
|
:value="sessionsFiltradas"
|
|
:rows="20"
|
|
paginator
|
|
:rows-per-page-options="[10, 20, 50]"
|
|
scrollable
|
|
scroll-height="480px"
|
|
class="rel-datatable"
|
|
>
|
|
<Column field="inicio_em" header="Data / Hora" :sortable="true" style="min-width: 140px">
|
|
<template #body="{ data }">
|
|
<span class="font-medium">{{ fmtDateTimeBR(data.inicio_em) }}</span>
|
|
</template>
|
|
</Column>
|
|
|
|
<Column header="Paciente" style="min-width: 160px">
|
|
<template #body="{ data }">{{ patientName(data) }}</template>
|
|
</Column>
|
|
|
|
<Column header="Sessão" style="min-width: 160px">
|
|
<template #body="{ data }">{{ sessionTitle(data) }}</template>
|
|
</Column>
|
|
|
|
<Column field="modalidade" header="Modalidade" style="min-width: 110px">
|
|
<template #body="{ data }">
|
|
{{ data.modalidade === 'online' ? 'Online' : data.modalidade === 'presencial' ? 'Presencial' : data.modalidade || '—' }}
|
|
</template>
|
|
</Column>
|
|
|
|
<Column field="status" header="Status" style="min-width: 110px">
|
|
<template #body="{ data }">
|
|
<Tag
|
|
:value="STATUS_LABEL[data.status] || data.status || 'Agendado'"
|
|
:severity="STATUS_SEVERITY[data.status] || 'info'"
|
|
/>
|
|
</template>
|
|
</Column>
|
|
</DataTable>
|
|
</div>
|
|
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.rel-datatable :deep(.p-datatable-table-container) { border-radius: 0; }
|
|
.rel-datatable :deep(th) { background: var(--surface-ground) !important; font-size: 0.82rem; }
|
|
.rel-datatable :deep(td) { font-size: 0.85rem; }
|
|
</style> |