chim1chim2/ambient
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

carte du jour

Browse Source
This commit is contained in:
LATCHIMY Nicolas
2026-03-01 17:22:28 +04:00
parent 9a6405789f
commit 622db425fa
4 changed files with 375 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/components/BankCard.astro
View File

@@ -5,9 +5,9 @@ const { name, monthly_allowance, type = "FLUX" } = frontmatter;
// --- LOGIQUE DE COULEUR SUBTILE ---
const bankConfigs = {
UpDéjeuner: { color: "#f97316", icon: "🍴" }, // Orange Up
"La Banque Postale": { color: "#137bb1", icon: "🏦" }, // Bleu BP
Sumeria: { color: "#116853", icon: "⚡" }, // Vert d'eau
UpDéjeuner: { color: "#f97316", icon: "🍴" },
"La Banque Postale": { color: "#137bb1", icon: "🏦" },
Sumeria: { color: "#116853", icon: "⚡" },
};
const config = bankConfigs[name as keyof typeof bankConfigs] || {
@@ -16,25 +16,36 @@ const config = bankConfigs[name as keyof typeof bankConfigs] || {
};
const color = config.color;
const now = new Date();
// Importe le type si nécessaire (Astro le génère pour toi)
// import type { CollectionEntry } from 'astro:content';
// --- LOGIQUE DE RÉCUPÉRATION TEMPORELLE DYNAMIQUE ---
const currentMonthEntries = allHumans.filter((h: any) => {
// Remplace 'any' par 'CollectionEntry<"humans">' si tu veux être strict
const d = new Date(h.data.date);
return (
d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()
);
});
// 1. On cherche toutes les entrées qui contiennent réellement des flux
const entriesWithFlux = allHumans.filter((h: any) =>
h.data.manifestations?.some((m: any) => m.cercle === "FLX"),
);
// 2. On trouve la date de la toute dernière transaction enregistrée (pour ne pas être bloqué par un changement de mois vide)
const lastFluxEntry = entriesWithFlux.sort(
(a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime(),
)[0];
// 3. On définit la période de référence (Mois/Année)
const refDate = lastFluxEntry ? new Date(lastFluxEntry.data.date) : new Date();
const refMonth = refDate.getMonth();
const refYear = refDate.getFullYear();
// 4. Somme des flux pour cette période et pour cette banque spécifique
const totalFlux = allHumans.reduce((acc: number, entry: any) => {
const d = new Date(entry.data.date);
const isSamePeriod =
d.getMonth() === refMonth && d.getFullYear() === refYear;
if (!isSamePeriod) return acc;
// Somme des flux
// BankCard.astro (Partie Logique)
const totalFlux = currentMonthEntries.reduce((acc: number, entry: any) => {
const flxManifests =
entry.data.manifestations?.filter((m: any) => {
// ON FILTRE : cercle FLX ET la source doit correspondre au nom de la carte
return m.cercle === "FLX" && m.source === name;
const sourceName = m.source?.trim().toLowerCase();
const cardName = name?.trim().toLowerCase();
return m.cercle === "FLX" && sourceName === cardName;
}) || [];
return (
@@ -46,6 +57,11 @@ const totalFlux = currentMonthEntries.reduce((acc: number, entry: any) => {
);
}, 0);
// Log de contrôle dans ton terminal Lenovo
console.log(
`[${name}] Bilan basé sur : ${refMonth + 1}/${refYear} | Total : ${totalFlux}`,
);
const percentage = Math.max(
0,
Math.min(100, Math.round((totalFlux / monthly_allowance) * 100)),
@@ -128,9 +144,8 @@ else if (percentage < 85) status = { label: "ÉQUILIBRE", color: "#3b82f6" };
.bank-card {
background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
color: #1a202c;
border-color: var(
--accent
) !important; /* Bordure subtile de la couleur de la banque */
border-color: var(--accent) !important;
border-width: 2px;
}
.card-inner {
@@ -145,7 +160,7 @@ else if (percentage < 85) status = { label: "ÉQUILIBRE", color: "#3b82f6" };
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #e2e8f0; /* Souligné subtil */
border-bottom: 1px solid #e2e8f0;
padding-bottom: 5px;
margin-bottom: 10px;
}
@@ -154,7 +169,7 @@ else if (percentage < 85) status = { label: "ÉQUILIBRE", color: "#3b82f6" };
font-weight: bold;
font-family: "Philosopher", serif;
font-size: 1.1rem;
color: var(--accent); /* Nom coloré subtilement */
color: var(--accent);
}
.visual-container {
@@ -169,10 +184,11 @@ else if (percentage < 85) status = { label: "ÉQUILIBRE", color: "#3b82f6" };
overflow: hidden;
gap: 10px;
border: 1px solid rgba(0, 0, 0, 0.05);
padding: 10px 0;
}
.circular-chart {
max-width: 100px;
max-width: 80px;
width: 100%;
}
.circle-bg {
@@ -182,7 +198,7 @@ else if (percentage < 85) status = { label: "ÉQUILIBRE", color: "#3b82f6" };
}
.circle {
fill: none;
stroke: var(--accent); /* La jauge prend la couleur de la banque */
stroke: var(--accent);
stroke-width: 2.8;
stroke-linecap: round;
transition: stroke-dasharray 1s ease;
@@ -196,15 +212,13 @@ else if (percentage < 85) status = { label: "ÉQUILIBRE", color: "#3b82f6" };
}
.status-badge {
background: var(
--state-color
); /* Garde la couleur d'état (vert/orange/rouge) pour la sécurité */
background: var(--state-color);
color: white;
font-size: 0.5rem;
padding: 1px 6px;
padding: 2px 8px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: bold;
}
.card-type-line {
@@ -223,6 +237,7 @@ else if (percentage < 85) status = { label: "ÉQUILIBRE", color: "#3b82f6" };
color: #94a3b8;
margin-bottom: 10px;
min-height: 1.5rem;
line-height: 1.2;
}
.stat-row {
@@ -238,12 +253,12 @@ else if (percentage < 85) status = { label: "ÉQUILIBRE", color: "#3b82f6" };
}
.segment {
width: 14px;
height: 4px;
height: 6px;
background: #e2e8f0;
border-radius: 1px;
}
.segment.active {
background: var(--accent); /* Segments de la couleur de la banque */
background: var(--accent);
}
.card-footer {
@@ -253,5 +268,6 @@ else if (percentage < 85) status = { label: "ÉQUILIBRE", color: "#3b82f6" };
align-items: center;
font-size: 0.6rem;
color: #94a3b8;
padding-top: 10px;
}
</style>