SESP/sgse-app
2
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: Add explicit TypeScript types and improve error handling for employee reports.

Browse Source
This commit is contained in:
killer-cf
2025-11-22 16:52:31 -03:00
parent b8a2e67f3a
commit 3cc35d3a1e
1 changed files with 552 additions and 329 deletions
Download Patch File Download Diff File Expand all files Collapse all files

411
apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/relatorios/+page.svelte
View File

@@ -1,31 +1,40 @@
<script lang="ts">
import { useConvexClient } from "convex-svelte";
import { api } from "@sgse-app/backend/convex/_generated/api";
import { onMount } from "svelte";
import { resolve } from "$app/paths";
import { useConvexClient } from 'convex-svelte';
import { api } from '@sgse-app/backend/convex/_generated/api';
import { onMount } from 'svelte';
import { resolve } from '$app/paths';
const client = useConvexClient();
type Row = { _id: string; nome: string; valor: number; count: number };
let rows: Array<Row> = $state<Array<Row>>([]);
let isLoading = $state(true);
let notice = $state<{ kind: "error" | "success"; text: string } | null>(null);
let notice = $state<{ kind: 'error' | 'success'; text: string } | null>(null);
let containerWidth = $state(1200);
onMount(async () => {
try {
const simbolos = await client.query(api.simbolos.getAll, {} as any);
const funcionarios = await client.query(api.funcionarios.getAll, {} as any);
const simbolos = await client.query(api.simbolos.getAll, {});
const funcionarios = await client.query(api.funcionarios.getAll, {});
const counts: Record<string, number> = {};
for (const f of funcionarios) counts[f.simboloId] = (counts[f.simboloId] ?? 0) + 1;
rows = simbolos.map((s: any) => ({
for (const f of funcionarios) {
const sId = String(f.simboloId);
counts[sId] = (counts[sId] ?? 0) + 1;
}
rows = simbolos.map((s) => ({
_id: String(s._id),
nome: s.nome as string,
nome: s.nome,
valor: Number(s.valor || 0),
count: counts[String(s._id)] ?? 0,
count: counts[String(s._id)] ?? 0
}));
} catch (e) {
notice = { kind: "error", text: "Falha ao carregar dados de relatórios." };
if (e instanceof Error) {
notice = { kind: 'error', text: e.message };
} else {
notice = { kind: 'error', text: 'Falha ao carregar dados de relatórios.' };
}
} finally {
isLoading = false;
}
@@ -69,7 +78,7 @@
}
function createAreaPath(data: Array<Row>, getValue: (r: Row) => number, max: number): string {
if (data.length === 0) return "";
if (data.length === 0) return '';
const n = data.length;
let path = `M ${getX(0, n)} ${chartHeight - padding.bottom}`;
@@ -80,82 +89,166 @@
}
path += ` L ${getX(n - 1, n)} ${chartHeight - padding.bottom}`;
path += " Z";
path += ' Z';
return path;
}
</script>
<div class="container mx-auto px-4 py-6 max-w-7xl">
<div class="container mx-auto max-w-7xl px-4 py-6">
<!-- Breadcrumb -->
<div class="text-sm breadcrumbs mb-4">
<div class="breadcrumbs mb-4 text-sm">
<ul>
<li><a href={resolve('/')} class="hover:text-primary">Dashboard</a></li>
<li><a href={resolve('/recursos-humanos')} class="hover:text-primary">Recursos Humanos</a></li>
<li><a href={resolve('/recursos-humanos/funcionarios')} class="hover:text-primary">Funcionários</a></li>
<li class="font-semibold text-primary">Relatórios</li>
<li>
<a href={resolve('/recursos-humanos')} class="hover:text-primary">Recursos Humanos</a>
</li>
<li>
<a href={resolve('/recursos-humanos/funcionarios')} class="hover:text-primary"
>Funcionários</a
>
</li>
<li class="text-primary font-semibold">Relatórios</li>
</ul>
</div>
<!-- Header -->
<div class="flex items-center gap-4 mb-8">
<div class="p-3 bg-primary/10 rounded-xl">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
<div class="mb-8 flex items-center gap-4">
<div class="bg-primary/10 rounded-xl p-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="text-primary h-8 w-8"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
/>
</svg>
</div>
<div>
<h1 class="text-3xl font-bold text-base-content">Relatórios de Funcionários</h1>
<p class="text-base-content/60 mt-1">Análise de distribuição de salários e funcionários por símbolo</p>
<h1 class="text-base-content text-3xl font-bold">Relatórios de Funcionários</h1>
<p class="text-base-content/60 mt-1">
Análise de distribuição de salários e funcionários por símbolo
</p>
</div>
</div>
{#if notice}
<div class="alert mb-6" class:alert-error={notice.kind === "error"} class:alert-success={notice.kind === "success"}>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
<div
class="alert mb-6"
class:alert-error={notice.kind === 'error'}
class:alert-success={notice.kind === 'success'}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
class="h-6 w-6 shrink-0 stroke-current"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
<span>{notice.text}</span>
</div>
{/if}
{#if isLoading}
<div class="flex justify-center items-center py-20">
<div class="flex items-center justify-center py-20">
<span class="loading loading-spinner loading-lg text-primary"></span>
</div>
{:else}
<div class="space-y-6 chart-container">
<div class="chart-container space-y-6">
<!-- Gráfico 1: Símbolo x Salário (Valor) - Layer Chart -->
<div class="card bg-base-100 shadow-lg hover:shadow-xl transition-shadow border border-base-300">
<div
class="card bg-base-100 border-base-300 border shadow-lg transition-shadow hover:shadow-xl"
>
<div class="card-body p-6">
<div class="flex items-center gap-3 mb-6">
<div class="p-2.5 bg-primary/10 rounded-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
<div class="mb-6 flex items-center gap-3">
<div class="bg-primary/10 rounded-lg p-2.5">
<svg
xmlns="http://www.w3.org/2000/svg"
class="text-primary h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div class="flex-1">
<h3 class="text-lg font-bold text-base-content">Distribuição de Salários por Símbolo</h3>
<p class="text-sm text-base-content/60 mt-0.5">Valores dos símbolos cadastrados no sistema</p>
<h3 class="text-base-content text-lg font-bold">
Distribuição de Salários por Símbolo
</h3>
<p class="text-base-content/60 mt-0.5 text-sm">
Valores dos símbolos cadastrados no sistema
</p>
</div>
</div>
<div class="w-full overflow-x-auto bg-base-200/30 rounded-xl p-4">
<svg width={chartWidth} height={chartHeight} role="img" aria-label="Gráfico de área: salário por símbolo">
<div class="bg-base-200/30 w-full overflow-x-auto rounded-xl p-4">
<svg
width={chartWidth}
height={chartHeight}
role="img"
aria-label="Gráfico de área: salário por símbolo"
>
{#if rows.length === 0}
<text x="16" y="32" class="opacity-60">Sem dados</text>
{:else}
{@const max = getMax(rows, (r) => r.valor)}
<!-- Grid lines -->
{#each [0,1,2,3,4,5] as t}
{@const val = Math.round((max/5) * t)}
{#each [0, 1, 2, 3, 4, 5] as t (t)}
{@const val = Math.round((max / 5) * t)}
{@const y = chartHeight - padding.bottom - scaleY(val, max)}
<line x1={padding.left} y1={y} x2={chartWidth - padding.right} y2={y} stroke="currentColor" stroke-opacity="0.1" stroke-dasharray="4,4" />
<text x={padding.left - 8} y={y + 4} text-anchor="end" class="text-[10px] opacity-70">{`R$ ${val.toLocaleString('pt-BR')}`}</text>
<line
x1={padding.left}
y1={y}
x2={chartWidth - padding.right}
y2={y}
stroke="currentColor"
stroke-opacity="0.1"
stroke-dasharray="4,4"
/>
<text
x={padding.left - 8}
y={y + 4}
text-anchor="end"
class="text-[10px] opacity-70">{`R$ ${val.toLocaleString('pt-BR')}`}</text
>
{/each}
<!-- Eixos -->
<line x1={padding.left} y1={chartHeight - padding.bottom} x2={chartWidth - padding.right} y2={chartHeight - padding.bottom} stroke="currentColor" stroke-opacity="0.3" stroke-width="2" />
<line x1={padding.left} y1={padding.top} x2={padding.left} y2={chartHeight - padding.bottom} stroke="currentColor" stroke-opacity="0.3" stroke-width="2" />
<line
x1={padding.left}
y1={chartHeight - padding.bottom}
x2={chartWidth - padding.right}
y2={chartHeight - padding.bottom}
stroke="currentColor"
stroke-opacity="0.3"
stroke-width="2"
/>
<line
x1={padding.left}
y1={padding.top}
x2={padding.left}
y2={chartHeight - padding.bottom}
stroke="currentColor"
stroke-opacity="0.3"
stroke-width="2"
/>
<!-- Area fill (camada) -->
<path
@@ -166,32 +259,54 @@
<!-- Line -->
<polyline
points={rows.map((r, i) => {
points={rows
.map((r, i) => {
const x = getX(i, rows.length);
const y = chartHeight - padding.bottom - scaleY(r.valor, max);
return `${x},${y}`;
}).join(' ')}
})
.join(' ')}
fill="none"
stroke="rgb(59, 130, 246)"
stroke-width="3"
/>
<!-- Data points -->
{#each rows as r, i}
{#each rows as r, i (r._id)}
{@const x = getX(i, rows.length)}
{@const y = chartHeight - padding.bottom - scaleY(r.valor, max)}
<circle cx={x} cy={y} r="5" fill="rgb(59, 130, 246)" stroke="white" stroke-width="2" />
<text x={x} y={y - 12} text-anchor="middle" class="text-[10px] font-semibold fill-primary">
<circle
cx={x}
cy={y}
r="5"
fill="rgb(59, 130, 246)"
stroke="white"
stroke-width="2"
/>
<text
{x}
y={y - 12}
text-anchor="middle"
class="fill-primary text-[10px] font-semibold"
>
{`R$ ${r.valor.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`}
</text>
{/each}
<!-- Eixo X labels -->
{#each rows as r, i}
{#each rows as r, i (r._id)}
{@const x = getX(i, rows.length)}
<foreignObject x={x - 40} y={chartHeight - padding.bottom + 15} width="80" height="70">
<foreignObject
x={x - 40}
y={chartHeight - padding.bottom + 15}
width="80"
height="70"
>
<div class="flex items-center justify-center text-center">
<span class="text-[11px] font-medium text-base-content/80 leading-tight" style="word-wrap: break-word; hyphens: auto;">
<span
class="text-base-content/80 text-[11px] leading-tight font-medium"
style="word-wrap: break-word; hyphens: auto;"
>
{r.nome}
</span>
</div>
@@ -212,37 +327,88 @@
</div>
<!-- Gráfico 2: Quantidade de Funcionários por Símbolo - Layer Chart -->
<div class="card bg-base-100 shadow-lg hover:shadow-xl transition-shadow border border-base-300">
<div
class="card bg-base-100 border-base-300 border shadow-lg transition-shadow hover:shadow-xl"
>
<div class="card-body p-6">
<div class="flex items-center gap-3 mb-6">
<div class="p-2.5 bg-secondary/10 rounded-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
<div class="mb-6 flex items-center gap-3">
<div class="bg-secondary/10 rounded-lg p-2.5">
<svg
xmlns="http://www.w3.org/2000/svg"
class="text-secondary h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
/>
</svg>
</div>
<div class="flex-1">
<h3 class="text-lg font-bold text-base-content">Distribuição de Funcionários por Símbolo</h3>
<p class="text-sm text-base-content/60 mt-0.5">Quantidade de funcionários alocados em cada símbolo</p>
<h3 class="text-base-content text-lg font-bold">
Distribuição de Funcionários por Símbolo
</h3>
<p class="text-base-content/60 mt-0.5 text-sm">
Quantidade de funcionários alocados em cada símbolo
</p>
</div>
</div>
<div class="w-full overflow-x-auto bg-base-200/30 rounded-xl p-4">
<svg width={chartWidth} height={chartHeight} role="img" aria-label="Gráfico de área: quantidade por símbolo">
<div class="bg-base-200/30 w-full overflow-x-auto rounded-xl p-4">
<svg
width={chartWidth}
height={chartHeight}
role="img"
aria-label="Gráfico de área: quantidade por símbolo"
>
{#if rows.length === 0}
<text x="16" y="32" class="opacity-60">Sem dados</text>
{:else}
{@const maxC = getMax(rows, (r) => r.count)}
<!-- Grid lines -->
{#each [0,1,2,3,4,5] as t}
{@const val = Math.round((maxC/5) * t)}
{#each [0, 1, 2, 3, 4, 5] as t (t)}
{@const val = Math.round((maxC / 5) * t)}
{@const y = chartHeight - padding.bottom - scaleY(val, Math.max(1, maxC))}
<line x1={padding.left} y1={y} x2={chartWidth - padding.right} y2={y} stroke="currentColor" stroke-opacity="0.1" stroke-dasharray="4,4" />
<text x={padding.left - 6} y={y + 4} text-anchor="end" class="text-[10px] opacity-70">{val}</text>
<line
x1={padding.left}
y1={y}
x2={chartWidth - padding.right}
y2={y}
stroke="currentColor"
stroke-opacity="0.1"
stroke-dasharray="4,4"
/>
<text
x={padding.left - 6}
y={y + 4}
text-anchor="end"
class="text-[10px] opacity-70">{val}</text
>
{/each}
<!-- Eixos -->
<line x1={padding.left} y1={chartHeight - padding.bottom} x2={chartWidth - padding.right} y2={chartHeight - padding.bottom} stroke="currentColor" stroke-opacity="0.3" stroke-width="2" />
<line x1={padding.left} y1={padding.top} x2={padding.left} y2={chartHeight - padding.bottom} stroke="currentColor" stroke-opacity="0.3" stroke-width="2" />
<line
x1={padding.left}
y1={chartHeight - padding.bottom}
x2={chartWidth - padding.right}
y2={chartHeight - padding.bottom}
stroke="currentColor"
stroke-opacity="0.3"
stroke-width="2"
/>
<line
x1={padding.left}
y1={padding.top}
x2={padding.left}
y2={chartHeight - padding.bottom}
stroke="currentColor"
stroke-opacity="0.3"
stroke-width="2"
/>
<!-- Area fill (camada) -->
<path
@@ -253,32 +419,54 @@
<!-- Line -->
<polyline
points={rows.map((r, i) => {
points={rows
.map((r, i) => {
const x = getX(i, rows.length);
const y = chartHeight - padding.bottom - scaleY(r.count, Math.max(1, maxC));
return `${x},${y}`;
}).join(' ')}
})
.join(' ')}
fill="none"
stroke="rgb(236, 72, 153)"
stroke-width="3"
/>
<!-- Data points -->
{#each rows as r, i}
{#each rows as r, i (r._id)}
{@const x = getX(i, rows.length)}
{@const y = chartHeight - padding.bottom - scaleY(r.count, Math.max(1, maxC))}
<circle cx={x} cy={y} r="5" fill="rgb(236, 72, 153)" stroke="white" stroke-width="2" />
<text x={x} y={y - 12} text-anchor="middle" class="text-[10px] font-semibold fill-secondary">
<circle
cx={x}
cy={y}
r="5"
fill="rgb(236, 72, 153)"
stroke="white"
stroke-width="2"
/>
<text
{x}
y={y - 12}
text-anchor="middle"
class="fill-secondary text-[10px] font-semibold"
>
{r.count}
</text>
{/each}
<!-- Eixo X labels -->
{#each rows as r, i}
{#each rows as r, i (r._id)}
{@const x = getX(i, rows.length)}
<foreignObject x={x - 40} y={chartHeight - padding.bottom + 15} width="80" height="70">
<foreignObject
x={x - 40}
y={chartHeight - padding.bottom + 15}
width="80"
height="70"
>
<div class="flex items-center justify-center text-center">
<span class="text-[11px] font-medium text-base-content/80 leading-tight" style="word-wrap: break-word; hyphens: auto;">
<span
class="text-base-content/80 text-[11px] leading-tight font-medium"
style="word-wrap: break-word; hyphens: auto;"
>
{r.nome}
</span>
</div>
@@ -299,22 +487,37 @@
</div>
<!-- Tabela Resumo -->
<div class="card bg-base-100 shadow-lg border border-base-300">
<div class="card bg-base-100 border-base-300 border shadow-lg">
<div class="card-body p-6">
<div class="flex items-center gap-3 mb-6">
<div class="p-2.5 bg-accent/10 rounded-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
<div class="mb-6 flex items-center gap-3">
<div class="bg-accent/10 rounded-lg p-2.5">
<svg
xmlns="http://www.w3.org/2000/svg"
class="text-accent h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
/>
</svg>
</div>
<div class="flex-1">
<h3 class="text-lg font-bold text-base-content">Tabela Resumo - Símbolos e Funcionários</h3>
<p class="text-sm text-base-content/60 mt-0.5">Visão detalhada dos dados apresentados nos gráficos</p>
<h3 class="text-base-content text-lg font-bold">
Tabela Resumo - Símbolos e Funcionários
</h3>
<p class="text-base-content/60 mt-0.5 text-sm">
Visão detalhada dos dados apresentados nos gráficos
</p>
</div>
</div>
<div class="overflow-x-auto">
<table class="table table-zebra">
<table class="table-zebra table">
<thead>
<tr>
<th class="bg-base-200">Símbolo</th>
@@ -326,34 +529,54 @@
<tbody>
{#if rows.length === 0}
<tr>
<td colspan="4" class="text-center text-base-content/60 py-8">Nenhum dado disponível</td>
<td colspan="4" class="text-base-content/60 py-8 text-center"
>Nenhum dado disponível</td
>
</tr>
{:else}
{#each rows as row}
{#each rows as row (row._id)}
<tr class="hover">
<td class="font-semibold">{row.nome}</td>
<td class="text-right font-mono">
{row.valor.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
{row.valor.toLocaleString('pt-BR', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
})}
</td>
<td class="text-right">
<span class="badge badge-primary badge-outline">{row.count}</span>
</td>
<td class="text-right font-mono font-semibold text-primary">
{(row.valor * row.count).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
<td class="text-primary text-right font-mono font-semibold">
{(row.valor * row.count).toLocaleString('pt-BR', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
})}
</td>
</tr>
{/each}
<!-- Total Geral -->
<tr class="font-bold bg-base-200 border-t-2 border-base-300">
<tr class="bg-base-200 border-base-300 border-t-2 font-bold">
<td>TOTAL GERAL</td>
<td class="text-right font-mono">
{rows.reduce((sum, r) => sum + r.valor, 0).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
{rows
.reduce((sum, r) => sum + r.valor, 0)
.toLocaleString('pt-BR', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
})}
</td>
<td class="text-right">
<span class="badge badge-primary">{rows.reduce((sum, r) => sum + r.count, 0)}</span>
<span class="badge badge-primary"
>{rows.reduce((sum, r) => sum + r.count, 0)}</span
>
</td>
<td class="text-right font-mono text-primary text-lg">
{rows.reduce((sum, r) => sum + (r.valor * r.count), 0).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
<td class="text-primary text-right font-mono text-lg">
{rows
.reduce((sum, r) => sum + r.valor * r.count, 0)
.toLocaleString('pt-BR', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
})}
</td>
</tr>
{/if}