60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
|
import { useEffect, useState } from "react";
|
||
|
|
import api from "../Api";
|
||
|
|
import { ServerTypeLabels, type ServersType } from "../types/enums";
|
||
|
|
|
||
|
|
interface ServerCount {
|
||
|
|
type: ServersType;
|
||
|
|
total: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const ServerCardMetrics = () => {
|
||
|
|
const [counts, setCounts] = useState<ServerCount[]>([]);
|
||
|
|
const [error, setError] = useState<string | null>(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const fetchCounts = async () => {
|
||
|
|
try {
|
||
|
|
const { data } = await api.get<Record<ServersType, number>>("/api/servers/type");
|
||
|
|
const normalized = Object.entries(data).map(([type, total]) => ({
|
||
|
|
type: type as ServersType,
|
||
|
|
total,
|
||
|
|
}));
|
||
|
|
setCounts(normalized);
|
||
|
|
} catch (err: any) {
|
||
|
|
const message = err?.response?.data?.message || "Falha ao carregar o total de servidores.";
|
||
|
|
setError(message);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
fetchCounts();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
if (error) {
|
||
|
|
return <div className={Styles.error}>{error}</div>;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (counts.length === 0) {
|
||
|
|
return <div className={Styles.placeholder}>Carregando métricas...</div>;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={Styles.grid}>
|
||
|
|
{counts.map(({ type, total }) => (
|
||
|
|
<div key={type} className={Styles.card}>
|
||
|
|
<p className={Styles.label}>{ServerTypeLabels[type]}</p>
|
||
|
|
<p className={Styles.value}>{total}</p>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const Styles = {
|
||
|
|
grid: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
|
||
|
|
card: "rounded-lg border border-cardBorder bg-card p-4 shadow-sm space-y-1",
|
||
|
|
label: "text-sm text-text-secondary uppercase tracking-wide",
|
||
|
|
value: "text-3xl font-semibold text-text",
|
||
|
|
placeholder: "p-4 rounded-lg border border-cardBorder bg-card text-text-secondary text-sm",
|
||
|
|
error: "p-4 rounded-lg border border-red-200 bg-red-50 text-red-600 text-sm",
|
||
|
|
};
|