KPI's na lista de beneficiários

src/routes/admin/beneficiarios/+page.server.ts

@@ -1,6 +1,6 @@
 import { db } from '$lib/server/db';
 import * as schema from '$lib/server/db/schema';
-import { asc, eq, or, like } from 'drizzle-orm';
+import { asc, eq, or, like, sql } from 'drizzle-orm';
 import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ url }) => {
@@ -8,6 +8,19 @@ export const load: PageServerLoad = async ({ url }) => {
 	const status = url.searchParams.get('status') || '';
 
 	try {
+		const totalFamiliesResult = db
+			.select({ count: sql<number>`count(*)` })
+			.from(schema.beneficiaries)
+			.where(eq(schema.beneficiaries.isParent, true))
+			.get();
+		const totalFamilies = totalFamiliesResult?.count ?? 0;
+
+		const totalBeneficiariesResult = db
+			.select({ count: sql<number>`count(*)` })
+			.from(schema.beneficiaries)
+			.get();
+		const totalBeneficiaries = totalBeneficiariesResult?.count ?? 0;
+
 		let query = db
 			.select()
 			.from(schema.beneficiaries)
@@ -33,6 +46,8 @@ export const load: PageServerLoad = async ({ url }) => {
 
 		return {
 			beneficiaries: list,
+			totalFamilies,
+			totalBeneficiaries,
 			search,
 			status: status || 'todos'
 		};
@@ -40,6 +55,8 @@ export const load: PageServerLoad = async ({ url }) => {
 		console.error('Error loading beneficiaries:', err);
 		return {
 			beneficiaries: [],
+			totalFamilies: 0,
+			totalBeneficiaries: 0,
 			search,
 			status: status || 'todos',
 			error: 'Erro ao carregar a lista de beneficiários.'

src/routes/admin/beneficiarios/+page.svelte

@@ -113,6 +113,41 @@
 		</div>
 	</div>
 
+	<!-- Indicadores/Estatísticas -->
+	<div class="row g-3 mb-4">
+		<div class="col-12 col-sm-6">
+			<div class="card border-0 shadow-sm rounded-4 p-3 bg-white h-100 d-flex flex-row align-items-center gap-3">
+				<div class="stats-icon rounded-3 p-3 d-flex align-items-center justify-content-center" style="background-color: rgba(44, 86, 46, 0.1); color: #2c562e; width: 60px; height: 60px; flex-shrink: 0;">
+					<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-house-door-fill" viewBox="0 0 16 16">
+						<path d="M6.5 14.5v-3.507c0-.31.25-.56.56-.56h2c.31 0 .56.25.56.56v3.507c0 .31-.25.56-.56.56H7.06a.56.56 0 0 1-.56-.56"/>
+						<path d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
+						<path d="M8 .757 1.01 6.855a.5.5 0 0 0-.01.768l.66.583a.5.5 0 0 0 .702-.055L8 2.501l5.64 5.65a.5.5 0 0 0 .702.054l.66-.583a.5.5 0 0 0-.01-.767L8 .757z"/>
+					</svg>
+				</div>
+				<div>
+					<span class="text-secondary small fw-semibold d-block text-uppercase" style="letter-spacing: 0.05em; font-size: 0.75rem;">Famílias</span>
+					<span class="fs-2 fw-bold text-dark lh-1">{data.totalFamilies}</span>
+					<span class="text-muted small d-block mt-1" style="font-size: 0.75rem;">Número de famílias (IsParent=true)</span>
+				</div>
+			</div>
+		</div>
+
+		<div class="col-12 col-sm-6">
+			<div class="card border-0 shadow-sm rounded-4 p-3 bg-white h-100 d-flex flex-row align-items-center gap-3">
+				<div class="stats-icon rounded-3 p-3 d-flex align-items-center justify-content-center" style="background-color: rgba(252, 181, 21, 0.15); color: #b78104; width: 60px; height: 60px; flex-shrink: 0;">
+					<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-people-fill" viewBox="0 0 16 16">
+						<path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"/>
+					</svg>
+				</div>
+				<div>
+					<span class="text-secondary small fw-semibold d-block text-uppercase" style="letter-spacing: 0.05em; font-size: 0.75rem;">Total de Beneficiários</span>
+					<span class="fs-2 fw-bold text-dark lh-1">{data.totalBeneficiaries}</span>
+					<span class="text-muted small d-block mt-1" style="font-size: 0.75rem;">Todos os registos na base de dados</span>
+				</div>
+			</div>
+		</div>
+	</div>
+
 	<div class="card border-0 shadow-sm rounded-4 p-3 mb-4 bg-white">
 		<form method="GET" class="row g-3 align-items-end">
 			<div class="col-md-6 col-lg-7">