722 lines
24 KiB
Svelte
722 lines
24 KiB
Svelte
<script lang="ts">
|
|
import { api } from '@sgse-app/backend/convex/_generated/api';
|
|
import { useQuery } from 'convex-svelte';
|
|
import { onMount } from 'svelte';
|
|
import { afterNavigate, goto, replaceState } from '$app/navigation';
|
|
import { resolve } from '$app/paths';
|
|
import { UserPlus, Mail, Clock, Award, TrendingUp, Zap, Users, Database } from 'lucide-svelte';
|
|
import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
|
|
import { loginModalStore } from '$lib/stores/loginModal.svelte';
|
|
|
|
// Queries para dados do dashboard
|
|
const statsQuery = useQuery(api.dashboard.getStats, {});
|
|
const activityQuery = useQuery(api.dashboard.getRecentActivity, {});
|
|
|
|
// Queries para monitoramento em tempo real
|
|
const statusSistemaQuery = useQuery(api.monitoramento.getStatusSistema, {});
|
|
const atividadeBDQuery = useQuery(api.monitoramento.getAtividadeBancoDados, {});
|
|
const distribuicaoQuery = useQuery(api.monitoramento.getDistribuicaoRequisicoes, {});
|
|
|
|
// Estado para animações
|
|
let currentTime = $state(new Date());
|
|
let showAlert = $state(false);
|
|
let alertType = $state<'auth_required' | 'access_denied' | 'invalid_token' | null>(null);
|
|
let redirectRoute = $state('');
|
|
|
|
// Limpar URL após navegação estar completa
|
|
afterNavigate(({ to }) => {
|
|
if (to?.url.searchParams.has('error')) {
|
|
const error = to.url.searchParams.get('error');
|
|
const route = to.url.searchParams.get('route') || to.url.searchParams.get('redirect') || '';
|
|
|
|
if (error) {
|
|
alertType = error as typeof alertType;
|
|
redirectRoute = route;
|
|
showAlert = true;
|
|
|
|
// Se for erro de autenticação, abrir modal de login automaticamente
|
|
if (error === 'auth_required') {
|
|
loginModalStore.open(route || to.url.pathname);
|
|
}
|
|
|
|
// Limpar URL usando SvelteKit (após router estar inicializado)
|
|
try {
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
replaceState(resolve(to.url.pathname as any), {});
|
|
} catch {
|
|
// Se ainda não estiver pronto, usar goto com replaceState
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
goto(resolve(to.url.pathname as any), { replaceState: true, noScroll: true });
|
|
}
|
|
|
|
// Auto-fechar após 10 segundos
|
|
setTimeout(() => {
|
|
showAlert = false;
|
|
}, 10000);
|
|
}
|
|
}
|
|
});
|
|
|
|
onMount(() => {
|
|
// Verificar se há erro na URL ao carregar a página
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
if (urlParams.has('error')) {
|
|
const error = urlParams.get('error');
|
|
const route = urlParams.get('route') || urlParams.get('redirect') || '';
|
|
|
|
if (error === 'auth_required') {
|
|
loginModalStore.open(route || window.location.pathname);
|
|
}
|
|
}
|
|
|
|
// Atualizar relógio a cada segundo
|
|
const interval = setInterval(() => {
|
|
currentTime = new Date();
|
|
}, 1000);
|
|
|
|
return () => clearInterval(interval);
|
|
});
|
|
|
|
function closeAlert() {
|
|
showAlert = false;
|
|
}
|
|
|
|
function getAlertMessage(): { title: string; message: string; icon: string } {
|
|
switch (alertType) {
|
|
case 'auth_required':
|
|
return {
|
|
title: 'Autenticação Necessária',
|
|
message: `Para acessar "${redirectRoute}", você precisa fazer login no sistema.`,
|
|
icon: '🔐'
|
|
};
|
|
case 'access_denied':
|
|
return {
|
|
title: 'Acesso Negado',
|
|
message: `Você não tem permissão para acessar "${redirectRoute}". Entre em contato com a equipe de TI para solicitar acesso.`,
|
|
icon: '⛔'
|
|
};
|
|
case 'invalid_token':
|
|
return {
|
|
title: 'Sessão Expirada',
|
|
message: 'Sua sessão expirou. Por favor, faça login novamente.',
|
|
icon: '⏰'
|
|
};
|
|
default:
|
|
return {
|
|
title: 'Aviso',
|
|
message: 'Ocorreu um erro. Tente novamente.',
|
|
icon: '⚠️'
|
|
};
|
|
}
|
|
}
|
|
|
|
// Função para formatar números
|
|
function formatNumber(num: number): string {
|
|
return new Intl.NumberFormat('pt-BR').format(num);
|
|
}
|
|
|
|
// Função para calcular porcentagem
|
|
function calcPercentage(value: number, total: number): number {
|
|
if (total === 0) return 0;
|
|
return Math.round((value / total) * 100);
|
|
}
|
|
|
|
// Obter saudação baseada na hora
|
|
function getSaudacao(): string {
|
|
const hora = currentTime.getHours();
|
|
if (hora < 12) return 'Bom dia';
|
|
if (hora < 18) return 'Boa tarde';
|
|
return 'Boa noite';
|
|
}
|
|
</script>
|
|
|
|
<ProtectedRoute>
|
|
<main class="container mx-auto px-4 py-4">
|
|
<!-- Alerta de Acesso Negado / Autenticação -->
|
|
{#if showAlert}
|
|
{@const alertData = getAlertMessage()}
|
|
<div
|
|
class="alert {alertType === 'access_denied'
|
|
? 'alert-error'
|
|
: alertType === 'auth_required'
|
|
? 'alert-warning'
|
|
: 'alert-info'} mb-6 animate-pulse shadow-xl"
|
|
>
|
|
<div class="flex items-start gap-4">
|
|
<span class="text-4xl">{alertData.icon}</span>
|
|
<div class="flex-1">
|
|
<h3 class="mb-1 text-lg font-bold">{alertData.title}</h3>
|
|
<p class="text-sm">{alertData.message}</p>
|
|
{#if alertType === 'access_denied'}
|
|
<div class="mt-3 flex gap-2">
|
|
<a href={resolve('/abrir-chamado')} class="btn btn-sm btn-primary">
|
|
<UserPlus class="h-4 w-4" strokeWidth={2} />
|
|
Abrir Chamado
|
|
</a>
|
|
<a href={resolve('/ti')} class="btn btn-sm btn-ghost">
|
|
<Mail class="h-4 w-4" strokeWidth={2} />
|
|
Contatar TI
|
|
</a>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-circle btn-ghost" onclick={closeAlert}
|
|
>✕</button
|
|
>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Cabeçalho com Boas-vindas -->
|
|
<div class="from-primary/20 to-secondary/20 mb-6 rounded-2xl bg-linear-to-r p-8 shadow-lg">
|
|
<div class="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
|
|
<div>
|
|
<h1 class="text-primary mb-2 text-4xl font-bold">
|
|
{getSaudacao()}! 👋
|
|
</h1>
|
|
<p class="text-base-content/80 text-xl">
|
|
Bem-vindo ao SGSE - Sistema de Gerenciamento de Secretaria
|
|
</p>
|
|
<p class="text-base-content/60 mt-2 text-sm">
|
|
{currentTime.toLocaleDateString('pt-BR', {
|
|
weekday: 'long',
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
})}
|
|
-
|
|
{currentTime.toLocaleTimeString('pt-BR')}
|
|
</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<div class="badge badge-primary badge-lg">Sistema Online</div>
|
|
<div class="badge badge-success badge-lg">Atualizado</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cards de Estatísticas Principais -->
|
|
{#if statsQuery.isLoading}
|
|
<div class="flex items-center justify-center py-12">
|
|
<span class="loading loading-spinner loading-lg text-primary"></span>
|
|
</div>
|
|
{:else if statsQuery.data}
|
|
<div class="mb-6 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
|
|
<!-- Total de Funcionários -->
|
|
<div
|
|
class="card transform bg-linear-to-br from-blue-500/10 to-blue-600/20 shadow-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl"
|
|
>
|
|
<div class="card-body">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-base-content/70 text-sm font-semibold">Total de Funcionários</p>
|
|
<h2 class="text-primary mt-2 text-4xl font-bold">
|
|
{formatNumber(statsQuery.data.totalFuncionarios)}
|
|
</h2>
|
|
<p class="text-base-content/60 mt-1 text-xs">
|
|
{statsQuery.data.funcionariosAtivos} ativos
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="radial-progress text-primary"
|
|
style="--value:{calcPercentage(
|
|
statsQuery.data.funcionariosAtivos,
|
|
statsQuery.data.totalFuncionarios
|
|
)}; --size:4rem;"
|
|
>
|
|
<span class="text-xs font-bold"
|
|
>{calcPercentage(
|
|
statsQuery.data.funcionariosAtivos,
|
|
statsQuery.data.totalFuncionarios
|
|
)}%</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Solicitações Pendentes -->
|
|
<div
|
|
class="card transform bg-linear-to-br from-yellow-500/10 to-yellow-600/20 shadow-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl"
|
|
>
|
|
<div class="card-body">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-base-content/70 text-sm font-semibold">Solicitações Pendentes</p>
|
|
<h2 class="text-warning mt-2 text-4xl font-bold">4</h2>
|
|
<p class="text-base-content/60 mt-1 text-xs">de 5 total</p>
|
|
</div>
|
|
<div class="bg-warning/20 rounded-full p-4">
|
|
<Clock class="text-warning h-8 w-8" strokeWidth={2} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Símbolos Cadastrados -->
|
|
<div
|
|
class="card transform bg-linear-to-br from-green-500/10 to-green-600/20 shadow-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl"
|
|
>
|
|
<div class="card-body">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-base-content/70 text-sm font-semibold">Símbolos Cadastrados</p>
|
|
<h2 class="text-success mt-2 text-4xl font-bold">
|
|
{formatNumber(statsQuery.data.totalSimbolos)}
|
|
</h2>
|
|
<p class="text-base-content/60 mt-1 text-xs">
|
|
{statsQuery.data.cargoComissionado} CC / {statsQuery.data.funcaoGratificada} FG
|
|
</p>
|
|
</div>
|
|
<div class="bg-success/20 rounded-full p-4">
|
|
<Award class="text-success h-8 w-8" strokeWidth={2} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Atividade 24h -->
|
|
{#if activityQuery.data}
|
|
<div
|
|
class="card transform bg-linear-to-br from-purple-500/10 to-purple-600/20 shadow-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl"
|
|
>
|
|
<div class="card-body">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-base-content/70 text-sm font-semibold">Atividade (24h)</p>
|
|
<p class="text-base-content/60 mt-1 text-xs">
|
|
{activityQuery.data.funcionariosCadastrados24h} cadastros
|
|
</p>
|
|
</div>
|
|
<div class="bg-secondary/20 rounded-full p-4">
|
|
<TrendingUp class="text-secondary h-8 w-8" strokeWidth={2} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- Monitoramento em Tempo Real -->
|
|
{#if statusSistemaQuery?.data}
|
|
{@const status = statusSistemaQuery.data}
|
|
{@const atividade = atividadeBDQuery?.data || {
|
|
historico: Array.from({ length: 30 }, () => ({ entradas: 0, saidas: 0 }))
|
|
}}
|
|
{@const distribuicao = distribuicaoQuery?.data || {
|
|
queries: 0,
|
|
mutations: 0,
|
|
leituras: 0,
|
|
escritas: 0
|
|
}}
|
|
{@const maxAtividade =
|
|
atividade.historico && atividade.historico.length > 0
|
|
? Math.max(
|
|
1,
|
|
...atividade.historico.map((p) => Math.max(p.entradas || 0, p.saidas || 0))
|
|
)
|
|
: 1}
|
|
|
|
<div class="mb-6">
|
|
<div class="mb-4 flex items-center gap-3">
|
|
<div class="bg-error/10 animate-pulse rounded-lg p-2">
|
|
<Zap class="text-error h-6 w-6" strokeWidth={2} />
|
|
</div>
|
|
<div>
|
|
<h2 class="text-base-content text-2xl font-bold">Monitoramento em Tempo Real</h2>
|
|
<p class="text-base-content/60 text-sm">
|
|
Atualizado a cada segundo • {new Date(status.ultimaAtualizacao).toLocaleTimeString(
|
|
'pt-BR'
|
|
)}
|
|
</p>
|
|
</div>
|
|
<div class="badge badge-error badge-lg ml-auto gap-2">
|
|
<span
|
|
class="bg-error absolute inline-flex h-3 w-3 animate-ping rounded-full opacity-75"
|
|
></span>
|
|
<span class="bg-error relative inline-flex h-3 w-3 rounded-full"></span>
|
|
LIVE
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cards de Status do Sistema -->
|
|
<div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
|
|
<!-- Usuários Online -->
|
|
<div
|
|
class="card from-primary/10 to-primary/5 border-primary/20 border-2 bg-linear-to-br shadow-lg"
|
|
>
|
|
<div class="card-body p-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-base-content/70 text-xs font-semibold uppercase">
|
|
Usuários Online
|
|
</p>
|
|
<h3 class="text-primary mt-1 text-3xl font-bold">
|
|
{status.usuariosOnline}
|
|
</h3>
|
|
<p class="text-base-content/60 mt-1 text-xs">sessões ativas</p>
|
|
</div>
|
|
<div class="bg-primary/20 rounded-full p-3">
|
|
<Users class="text-primary h-6 w-6" strokeWidth={2} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Total de Registros -->
|
|
<div
|
|
class="card from-success/10 to-success/5 border-success/20 border-2 bg-linear-to-br shadow-lg"
|
|
>
|
|
<div class="card-body p-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-base-content/70 text-xs font-semibold uppercase">
|
|
Total Registros
|
|
</p>
|
|
<h3 class="text-success mt-1 text-3xl font-bold">
|
|
{status.totalRegistros.toLocaleString('pt-BR')}
|
|
</h3>
|
|
<p class="text-base-content/60 mt-1 text-xs">no banco de dados</p>
|
|
</div>
|
|
<div class="bg-success/20 rounded-full p-3">
|
|
<Database class="text-success h-6 w-6" strokeWidth={2} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tempo Médio de Resposta -->
|
|
<div
|
|
class="card from-info/10 to-info/5 border-info/20 border-2 bg-linear-to-br shadow-lg"
|
|
>
|
|
<div class="card-body p-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-base-content/70 text-xs font-semibold uppercase">
|
|
Tempo Resposta
|
|
</p>
|
|
<h3 class="text-info mt-1 text-3xl font-bold">
|
|
{status.tempoMedioResposta}ms
|
|
</h3>
|
|
<p class="text-base-content/60 mt-1 text-xs">média atual</p>
|
|
</div>
|
|
<div class="bg-info/20 rounded-full p-3">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="text-info h-6 w-6"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M13 10V3L4 14h7v7l9-11h-7z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Uso de Sistema -->
|
|
<div
|
|
class="card from-warning/10 to-warning/5 border-warning/20 border-2 bg-linear-to-br shadow-lg"
|
|
>
|
|
<div class="card-body p-4">
|
|
<div>
|
|
<p class="text-base-content/70 mb-2 text-xs font-semibold uppercase">
|
|
Uso do Sistema
|
|
</p>
|
|
<div class="space-y-2">
|
|
<div>
|
|
<div class="mb-1 flex justify-between text-xs">
|
|
<span class="text-base-content/70">CPU</span>
|
|
<span class="text-warning font-bold">{status.cpuUsada}%</span>
|
|
</div>
|
|
<progress
|
|
class="progress progress-warning w-full"
|
|
value={status.cpuUsada}
|
|
max="100"
|
|
></progress>
|
|
</div>
|
|
<div>
|
|
<div class="mb-1 flex justify-between text-xs">
|
|
<span class="text-base-content/70">Memória</span>
|
|
<span class="text-warning font-bold">{status.memoriaUsada}%</span>
|
|
</div>
|
|
<progress
|
|
class="progress progress-warning w-full"
|
|
value={status.memoriaUsada}
|
|
max="100"
|
|
></progress>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Gráfico de Atividade do Banco de Dados em Tempo Real -->
|
|
<div class="card bg-base-100 mb-6 shadow-xl">
|
|
<div class="card-body">
|
|
<div class="mb-4 flex items-center justify-between">
|
|
<div>
|
|
<h3 class="text-base-content text-xl font-bold">Atividade do Banco de Dados</h3>
|
|
<p class="text-base-content/60 text-sm">
|
|
Entradas e saídas em tempo real (último minuto)
|
|
</p>
|
|
</div>
|
|
<div class="badge badge-success gap-2">
|
|
<span class="loading loading-spinner loading-xs"></span>
|
|
Atualizando
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative h-64">
|
|
<!-- Eixo Y -->
|
|
<div
|
|
class="absolute top-0 bottom-8 left-0 flex w-10 flex-col justify-between pr-2 text-right"
|
|
>
|
|
{#each [10, 8, 6, 4, 2, 0] as val (val)}
|
|
<span class="text-base-content/60 text-xs">{val}</span>
|
|
{/each}
|
|
</div>
|
|
|
|
<!-- Grid e Barras -->
|
|
<div class="absolute top-0 right-4 bottom-8 left-12">
|
|
<!-- Grid horizontal -->
|
|
{#each [0, 1, 2, 3, 4, 5] as i (i)}
|
|
<div
|
|
class="border-base-content/10 absolute right-0 left-0 border-t"
|
|
style="top: {(i / 5) * 100}%;"
|
|
></div>
|
|
{/each}
|
|
|
|
<!-- Barras de atividade -->
|
|
<div class="flex h-full items-end justify-around gap-1">
|
|
{#each atividade.historico || [] as ponto, idx (idx)}
|
|
{@const entradas = ponto?.entradas || 0}
|
|
{@const saidas = ponto?.saidas || 0}
|
|
<div class="group relative flex h-full flex-1 items-end gap-0.5">
|
|
<!-- Entradas (verde) -->
|
|
<div
|
|
class="from-success to-success/70 flex-1 rounded-t bg-linear-to-t transition-all duration-300 hover:scale-110"
|
|
style="height: {(entradas / maxAtividade) * 100}%; min-height: 2px;"
|
|
title="Entradas: {entradas}"
|
|
></div>
|
|
<!-- Saídas (vermelho) -->
|
|
<div
|
|
class="from-error to-error/70 flex-1 rounded-t bg-linear-to-t transition-all duration-300 hover:scale-110"
|
|
style="height: {(saidas / maxAtividade) * 100}%; min-height: 2px;"
|
|
title="Saídas: {saidas}"
|
|
></div>
|
|
|
|
<!-- Tooltip no hover -->
|
|
<div
|
|
class="bg-base-300 text-base-content absolute bottom-full left-1/2 z-10 mb-2 -translate-x-1/2 rounded px-2 py-1 text-xs whitespace-nowrap opacity-0 shadow-lg transition-opacity group-hover:opacity-100"
|
|
>
|
|
<div>↑ {entradas} entradas</div>
|
|
<div>↓ {saidas} saídas</div>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Linha do eixo X -->
|
|
<div
|
|
class="border-base-content/30 absolute right-4 bottom-8 left-12 border-t-2"
|
|
></div>
|
|
|
|
<!-- Labels do eixo X -->
|
|
<div
|
|
class="text-base-content/60 absolute right-4 bottom-0 left-12 flex justify-between text-xs"
|
|
>
|
|
<span>-60s</span>
|
|
<span>-30s</span>
|
|
<span>agora</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Legenda -->
|
|
<div class="border-base-300 mt-4 flex justify-center gap-6 border-t pt-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="from-success to-success/70 h-4 w-4 rounded bg-linear-to-t"></div>
|
|
<span class="text-base-content/70 text-sm">Entradas no BD</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="from-error to-error/70 h-4 w-4 rounded bg-linear-to-t"></div>
|
|
<span class="text-base-content/70 text-sm">Saídas do BD</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Distribuição de Requisições -->
|
|
<div class="mb-6 grid grid-cols-1 gap-6 md:grid-cols-2">
|
|
<div class="card bg-base-100 shadow-xl">
|
|
<div class="card-body">
|
|
<h3 class="text-base-content mb-4 text-lg font-bold">Tipos de Operações</h3>
|
|
<div class="space-y-3">
|
|
<div>
|
|
<div class="mb-1 flex justify-between text-sm">
|
|
<span>Queries (Leituras)</span>
|
|
<span class="text-primary font-bold">{distribuicao?.queries ?? 0}</span>
|
|
</div>
|
|
<progress
|
|
class="progress progress-primary w-full"
|
|
value={distribuicao?.queries ?? 0}
|
|
max={Math.max(
|
|
(distribuicao?.queries ?? 0) + (distribuicao?.mutations ?? 0),
|
|
1
|
|
)}
|
|
></progress>
|
|
</div>
|
|
<div>
|
|
<div class="mb-1 flex justify-between text-sm">
|
|
<span>Mutations (Escritas)</span>
|
|
<span class="text-secondary font-bold">{distribuicao?.mutations ?? 0}</span>
|
|
</div>
|
|
<progress
|
|
class="progress progress-secondary w-full"
|
|
value={distribuicao?.mutations ?? 0}
|
|
max={Math.max(
|
|
(distribuicao?.queries ?? 0) + (distribuicao?.mutations ?? 0),
|
|
1
|
|
)}
|
|
></progress>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-base-100 shadow-xl">
|
|
<div class="card-body">
|
|
<h3 class="text-base-content mb-4 text-lg font-bold">Operações no Banco</h3>
|
|
<div class="space-y-3">
|
|
<div>
|
|
<div class="mb-1 flex justify-between text-sm">
|
|
<span>Leituras</span>
|
|
<span class="text-info font-bold">{distribuicao?.leituras ?? 0}</span>
|
|
</div>
|
|
<progress
|
|
class="progress progress-info w-full"
|
|
value={distribuicao?.leituras ?? 0}
|
|
max={Math.max(
|
|
(distribuicao?.leituras ?? 0) + (distribuicao?.escritas ?? 0),
|
|
1
|
|
)}
|
|
></progress>
|
|
</div>
|
|
<div>
|
|
<div class="mb-1 flex justify-between text-sm">
|
|
<span>Escritas</span>
|
|
<span class="text-warning font-bold">{distribuicao?.escritas ?? 0}</span>
|
|
</div>
|
|
<progress
|
|
class="progress progress-warning w-full"
|
|
value={distribuicao?.escritas ?? 0}
|
|
max={Math.max(
|
|
(distribuicao?.leituras ?? 0) + (distribuicao?.escritas ?? 0),
|
|
1
|
|
)}
|
|
></progress>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Cards de Status -->
|
|
<div class="grid grid-cols-1 gap-6 md:grid-cols-3">
|
|
<div class="card bg-base-100 shadow-xl">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-lg">Status do Sistema</h3>
|
|
<div class="mt-4 space-y-2">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm">Banco de Dados</span>
|
|
<span class="badge badge-success">Online</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm">API</span>
|
|
<span class="badge badge-success">Operacional</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm">Backup</span>
|
|
<span class="badge badge-success">Atualizado</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-base-100 shadow-xl">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-lg">Acesso Rápido</h3>
|
|
<div class="mt-4 space-y-2">
|
|
<a
|
|
href={resolve('/recursos-humanos/funcionarios/cadastro')}
|
|
class="btn btn-sm btn-primary w-full"
|
|
>
|
|
Novo Funcionário
|
|
</a>
|
|
<a
|
|
href={resolve('/recursos-humanos/simbolos/cadastro')}
|
|
class="btn btn-sm btn-primary w-full"
|
|
>
|
|
Novo Símbolo
|
|
</a>
|
|
<a href={resolve('/ti/painel-administrativo')} class="btn btn-sm btn-primary w-full">
|
|
Painel Admin
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-base-100 shadow-xl">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-lg">Informações</h3>
|
|
<div class="mt-4 space-y-2 text-sm">
|
|
<p class="text-base-content/70">
|
|
<strong>Versão:</strong> 1.0.0
|
|
</p>
|
|
<p class="text-base-content/70">
|
|
<strong>Última Atualização:</strong>
|
|
{new Date().toLocaleDateString('pt-BR')}
|
|
</p>
|
|
<p class="text-base-content/70">
|
|
<strong>Suporte:</strong> TI SGSE
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
<!-- Mensagem de erro ou estado vazio -->
|
|
<div class="alert alert-warning">
|
|
<span>Não foi possível carregar os dados do dashboard.</span>
|
|
</div>
|
|
{/if}
|
|
</main>
|
|
</ProtectedRoute>
|
|
|
|
<style>
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.card {
|
|
animation: fadeIn 0.5s ease-out;
|
|
}
|
|
</style>
|