Files
Investidor-V2/resources/js/components/demographic-reading-summary.tsx
T
2026-11-15 18:56:39 +02:00

160 lines
7.0 KiB
TypeScript

import type { DemographicAnalysis } from './demographic-evidence';
import {
demographicReading,
populationLabel,
percentageLabel,
} from '@/lib/demographic-reading';
export default function DemographicReadingSummary({
series,
evidence,
}: {
series: DemographicAnalysis['territories'][number]['series'][number];
evidence: DemographicAnalysis;
}) {
const reading = demographicReading(
series,
evidence.start_year,
evidence.end_year,
);
const current = reading.last;
const sector = evidence.sector ?? 'general';
return (
<section
className="space-y-4 rounded-lg bg-slate-50 p-4"
aria-label="Leitura para o investimento"
>
<h3 className="font-semibold">
Retrato da população · {evidence.end_year}
</h3>
<p className="text-sm">
{series.source} ·{' '}
{current.kind === 'projected'
? 'Projecção'
: 'Tipo de dado não especificado'}
. Valores de apresentação arredondados; os originais permanecem
disponíveis abaixo.
</p>
<dl className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
{[
[
'População total',
populationLabel(current.total),
'pessoas',
],
[
'População rural',
populationLabel(current.rural),
percentageLabel(current.ruralShare) + ' do total',
],
[
'Menores de 15 anos',
populationLabel(current.under15),
percentageLabel(current.under15Share) + ' do total',
],
[
'População de 15 a 64 anos',
populationLabel(current.age15to64),
percentageLabel(current.age15to64Share) + ' do total',
],
].map(([label, value, note]) => (
<div key={label} className="rounded border bg-white p-3">
<dt className="text-sm">{label}</dt>
<dd className="text-2xl font-semibold">{value}</dd>
<dd className="text-sm text-slate-600">{note}</dd>
</div>
))}
</dl>
{evidence.start_year === evidence.end_year ? (
<p>
Está a consultar um único ano. Escolha um ano final
posterior para conhecer a evolução projectada.
</p>
) : (
<div>
<h4 className="font-semibold">
Evolução entre {evidence.start_year} e{' '}
{evidence.end_year}
</h4>
{reading.delta === null ? (
<p>
Faltam totais comparáveis nos anos extremos; não foi
calculado crescimento.
</p>
) : (
<p>
{populationLabel(reading.first.total)} →{' '}
{populationLabel(reading.last.total)} pessoas.
Variação no período:{' '}
{populationLabel(reading.delta)} pessoas (
{percentageLabel(reading.growth)}). Não é uma taxa
anual.
</p>
)}
<details>
<summary>Série anual de população</summary>
<div className="overflow-x-auto">
<table className="w-full text-left text-sm">
<thead>
<tr>
<th>Ano</th>
<th>Total</th>
<th>Urbana</th>
<th>Rural</th>
</tr>
</thead>
<tbody>
{reading.years.map((y) => (
<tr key={y.year}>
<td>{y.year}</td>
<td>{populationLabel(y.total)}</td>
<td>{populationLabel(y.urban)}</td>
<td>{populationLabel(y.rural)}</td>
</tr>
))}
</tbody>
</table>
</div>
</details>
</div>
)}
<div className="space-y-2">
<h4 className="font-semibold">
Como usar estes dados na ideia de investimento
</h4>
{current.ruralShare !== null && (
<p>
{percentageLabel(current.ruralShare)} da população está
em áreas rurais. Para avaliar distribuição, comércio ou
serviços, confronte essa dispersão com acessos,
distâncias, custos de entrega e oferta existente.
</p>
)}
{current.under15Share !== null &&
['general', 'education', 'health'].includes(sector) && (
<p>
Os menores de 15 anos representam{' '}
{percentageLabel(current.under15Share)} do total. É
uma base para estudar serviços educativos e de
saúde, cruzando população-alvo, capacidade
instalada, acessibilidade e rendimento das famílias.
</p>
)}
{current.age15to64 !== null && (
<p>
As {populationLabel(current.age15to64)} pessoas entre 15
e 64 anos ajudam a dimensionar a população nessa faixa
etária. Para planear contratações, faltam qualificações,
participação no mercado de trabalho e disponibilidade.
</p>
)}
<p>
Próximo passo: comparar estes indicadores com empresas e
serviços existentes, infra-estruturas, preços e procura
documentada. Só essa comparação permite fundamentar uma
lacuna de mercado.
</p>
</div>
</section>
);
}