Documentation
Intègre TeloDash dans ton projet Next.js en moins d'une heure.
Un projet Next.js avec TypeScript et Tailwind CSS. TeloDash est compatible avec Next.js 14+ et App Router.
Après achat, tu reçois un dossier telodash/ à copier dans ton projet. Place-le dans ton dossier components/.
cp -r telodash/ mon-projet/components/telodash
TeloDash utilise recharts pour les graphiques.
npm install recharts
Importe TeloDash dans ta page dashboard.
import { TeloDash } from "@/components/telodash";Passe tes données via la prop data.
export default function Dashboard() {
const data = {
visiteurs: [...],
revenus: [...],
evenements: [...],
};
return <TeloDash data={data} />;
}Tableau de points de données quotidiens.
const visiteurs = [
{ jour: "Lun", visites: 120, inscrits: 8 },
{ jour: "Mar", visites: 98, inscrits: 5 },
// ...
];Tableau de revenus mensuels.
const revenus = [
{ mois: "Jan", revenus: 45000 },
{ mois: "Fév", revenus: 62000 },
// ...
];Liste des dernières actions dans ton app.
const evenements = [
{
heure: "09:12",
event: "Nouvel utilisateur",
detail: "abel@telopex.online",
type: "user" // "user" | "payment" | "view"
},
// ...
];Modifie les couleurs dans le fichier telodash/config.ts.
export const config = {
couleurPrimaire: "#E2703A",
couleurSecondaire: "#14213D",
fond: "#F8F7FF",
};Tu peux importer chaque composant séparément.
import {
StatCard,
LineGraph,
BarGraph,
PieGraph,
EventList
} from "@/components/telodash";Achat unique — code source complet — support inclus.