mirror of
https://github.com/R0m1k3/CollectFlow.git
synced 2026-10-14 18:58:17 +02:00
Claude
f104719054
Le serveur étant réécrit en Rust, l'interface devient une application
React 19 côté navigateur, compilée par Vite dans dist/ et servie par le
serveur Rust (STATIC_DIR). Composants, styles et logique cliente
inchangés : seule la plomberie Next.js est remplacée.
- Outillage : Vite 8, @vitejs/plugin-react, Tailwind 4 via PostCSS,
React Router 7 (mode déclaratif), index.html, src/main.tsx, alias @/,
proxy /api → localhost:5643 en développement, ESLint sans plugin Next.
- Adaptations (src/shims) : next/link, next/navigation (useRouter avec
refresh, usePathname/useSearchParams suivant aussi les replaceState de
l'interface), next-auth/react (session lue sur /api/auth/session,
déconnexion par /api/auth/logout).
- Actions serveur → POST /api/actions/{nom} (src/lib/rpc.ts) : mêmes noms,
mêmes signatures, mêmes types. La connexion passe par /api/auth/login.
- Pages → table des routes (src/router.tsx) : données lues sur
/api/pages/{nom} avec Suspense (loading.tsx au premier chargement,
page conservée pendant une navigation ou un router.refresh()),
error.tsx en frontière d'erreur, not-found.tsx, titres d'onglet,
pages d'administration réservées aux administrateurs.
- Suppression du code serveur Next.js (routes /api, accès base, Qlik,
authentification, middleware…) ; types utiles à l'interface recopiés
dans src/types/ff.ts.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LG2LLJuswrrTTPKJmunEVf
35 lines
1.6 KiB
TypeScript
35 lines
1.6 KiB
TypeScript
import React from "react";
|
|
|
|
/**
|
|
* Tuile de statistique : intitulé en phrase, valeur en chiffres proportionnels.
|
|
*
|
|
* Pas de `tabular-nums` ici : à grande taille, des chiffres de largeur égale font
|
|
* paraître un nombre court anormalement lâche. Les chiffres tabulaires sont
|
|
* réservés aux colonnes qui s'alignent verticalement (tableau, axes).
|
|
*
|
|
* Extraite de `heatmap-grid.tsx` pour être partagée entre la modale de tendance
|
|
* réseau et la modale de détail mensuel produit. Aucun changement de rendu.
|
|
*/
|
|
export function TuileStat({ label, valeur, indice, couleur, icone: Icone }: {
|
|
label: string;
|
|
valeur: string;
|
|
indice?: string;
|
|
couleur?: string;
|
|
icone?: React.ComponentType<{ className?: string; style?: React.CSSProperties }>;
|
|
}) {
|
|
return (
|
|
<div className="rounded-xl px-3.5 py-3 flex-1 min-w-[160px]" style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)" }}>
|
|
<div className="text-[13px] font-medium" style={{ color: "var(--text-muted)" }}>
|
|
{label}
|
|
</div>
|
|
<div className="flex items-center gap-1.5 mt-1">
|
|
{Icone && <Icone className="w-5 h-5 shrink-0" style={{ color: couleur ?? "var(--text-primary)" }} />}
|
|
<span className="text-[26px] font-bold leading-tight" style={{ color: couleur ?? "var(--text-primary)" }}>
|
|
{valeur}
|
|
</span>
|
|
</div>
|
|
{indice && <div className="text-[12px] mt-1 leading-snug" style={{ color: "var(--text-muted)" }}>{indice}</div>}
|
|
</div>
|
|
);
|
|
}
|