first commit
This commit is contained in:
nBiqoz
14
app/agents/page.tsx
Normal file
14
app/agents/page.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import { AgentsTable } from "@/components/collections/agents-table";
|
||||
|
||||
export default function AgentsPage() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Agents</h1>
|
||||
<p className="text-muted-foreground">Gestion des agents Cercle GPT</p>
|
||||
</div>
|
||||
|
||||
<AgentsTable />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
49
app/analytics/page.tsx
Normal file
49
app/analytics/page.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import { Suspense } from "react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { UsageAnalytics } from "@/components/dashboard/usage-analytics";
|
||||
import { RecentTransactions } from "@/components/dashboard/recent-transactions";
|
||||
import { BarChart3 } from "lucide-react";
|
||||
|
||||
function AnalyticsSkeleton() {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<Card key={i}>
|
||||
<CardContent className="p-6">
|
||||
<div className="animate-pulse space-y-2">
|
||||
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
|
||||
<div className="h-8 bg-gray-200 rounded"></div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AnalyticsPage() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight flex items-center gap-2">
|
||||
<BarChart3 className="h-8 w-8" />
|
||||
Analytics détaillées
|
||||
</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Analyses approfondies des performances et de l'utilisation de
|
||||
Cercle GPT
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Suspense fallback={<AnalyticsSkeleton />}>
|
||||
<div className="space-y-6">
|
||||
{/* Analytics des utilisateurs */}
|
||||
<UsageAnalytics />
|
||||
|
||||
{/* Transactions récentes - toute la largeur */}
|
||||
<RecentTransactions />
|
||||
</div>
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
59
app/api/collections/[collection]/route.ts
Normal file
59
app/api/collections/[collection]/route.ts
Normal file
@@ -0,0 +1,59 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { getDatabase } from '@/lib/db/mongodb';
|
||||
|
||||
const ALLOWED_COLLECTIONS = [
|
||||
'accessroles', 'aclentries', 'actions', 'agentcategories', 'agents',
|
||||
'assistants', 'balances', 'banners', 'conversations', 'conversationtags',
|
||||
'files', 'groups', 'keys', 'memoryentries', 'messages', 'pluginauths',
|
||||
'presets', 'projects', 'promptgroups', 'prompts', 'roles', 'sessions',
|
||||
'sharedlinks', 'tokens', 'toolcalls', 'transactions', 'users'
|
||||
];
|
||||
|
||||
export async function GET(
|
||||
request: NextRequest,
|
||||
{ params }: { params: Promise<{ collection: string }> }
|
||||
) {
|
||||
const { collection } = await params;
|
||||
|
||||
try {
|
||||
|
||||
if (!ALLOWED_COLLECTIONS.includes(collection)) {
|
||||
return NextResponse.json(
|
||||
{ error: 'Collection non autorisée' },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
const { searchParams } = new URL(request.url);
|
||||
const page = parseInt(searchParams.get('page') || '1');
|
||||
const limit = parseInt(searchParams.get('limit') || '20');
|
||||
const filter = JSON.parse(searchParams.get('filter') || '{}');
|
||||
|
||||
const db = await getDatabase();
|
||||
const skip = (page - 1) * limit;
|
||||
|
||||
const [data, total] = await Promise.all([
|
||||
db.collection(collection)
|
||||
.find(filter)
|
||||
.skip(skip)
|
||||
.limit(limit)
|
||||
.sort({ createdAt: -1 })
|
||||
.toArray(),
|
||||
db.collection(collection).countDocuments(filter)
|
||||
]);
|
||||
|
||||
return NextResponse.json({
|
||||
data,
|
||||
total,
|
||||
page,
|
||||
limit,
|
||||
totalPages: Math.ceil(total / limit)
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(`Erreur lors de la récupération de ${collection}:`, error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Erreur serveur' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
75
app/api/metrics/route.ts
Normal file
75
app/api/metrics/route.ts
Normal file
@@ -0,0 +1,75 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { getDatabase } from "@/lib/db/mongodb";
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
const db = await getDatabase();
|
||||
|
||||
// Récupérer toutes les données nécessaires en parallèle
|
||||
const [users, conversations, transactions, balances] = await Promise.all([
|
||||
db.collection("users").find({}).toArray(),
|
||||
db.collection("conversations").find({}).toArray(),
|
||||
db.collection("transactions").find({}).toArray(),
|
||||
db.collection("balances").find({}).toArray(),
|
||||
]);
|
||||
|
||||
// Calculer les utilisateurs actifs (dernière semaine)
|
||||
const oneWeekAgo = new Date();
|
||||
oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
|
||||
const activeUsers = users.filter((user) => {
|
||||
const lastActivity = new Date(user.updatedAt || user.createdAt);
|
||||
return lastActivity >= oneWeekAgo;
|
||||
}).length;
|
||||
|
||||
// Calculer les administrateurs
|
||||
const totalAdmins = users.filter(user => user.role === 'ADMIN').length;
|
||||
|
||||
// Calculer les conversations actives (dernière semaine)
|
||||
const activeConversations = conversations.filter((conv) => {
|
||||
const lastActivity = new Date(conv.updatedAt || conv.createdAt);
|
||||
return lastActivity >= oneWeekAgo;
|
||||
}).length;
|
||||
|
||||
// Calculer le total des messages
|
||||
const totalMessages = conversations.reduce(
|
||||
(sum, conv) => sum + (Array.isArray(conv.messages) ? conv.messages.length : 0),
|
||||
0
|
||||
);
|
||||
|
||||
// Calculer le total des tokens depuis les transactions
|
||||
const totalTokensConsumed = transactions.reduce((sum, transaction) => {
|
||||
return sum + Math.abs(Number(transaction.rawAmount) || 0);
|
||||
}, 0);
|
||||
|
||||
// Calculer le total des crédits depuis balances
|
||||
const totalCredits = balances.reduce((sum, balance) => {
|
||||
return sum + (Number(balance.tokenCredits) || 0);
|
||||
}, 0);
|
||||
|
||||
// Récupérer les transactions récentes (dernières 10)
|
||||
const recentTransactions = transactions
|
||||
.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
|
||||
.slice(0, 10)
|
||||
.map(transaction => ({
|
||||
_id: transaction._id,
|
||||
description: `Transaction ${transaction.tokenType} - ${transaction.model}`,
|
||||
amount: transaction.rawAmount,
|
||||
type: transaction.rawAmount > 0 ? 'credit' : 'debit',
|
||||
createdAt: transaction.createdAt
|
||||
}));
|
||||
|
||||
return NextResponse.json({
|
||||
totalUsers: users.length,
|
||||
activeUsers,
|
||||
totalAdmins,
|
||||
totalCredits,
|
||||
activeConversations,
|
||||
totalMessages: totalMessages,
|
||||
totalTokensConsumed,
|
||||
recentTransactions
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Erreur lors du calcul des métriques:", error);
|
||||
return NextResponse.json({ error: "Erreur serveur" }, { status: 500 });
|
||||
}
|
||||
}
|
||||
61
app/api/stats/route.ts
Normal file
61
app/api/stats/route.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { getDatabase } from "@/lib/db/mongodb";
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
const db = await getDatabase();
|
||||
|
||||
// Récupérer toutes les transactions
|
||||
const transactions = await db.collection("transactions").find({}).toArray();
|
||||
|
||||
// Calculer les tokens par jour (7 derniers jours)
|
||||
const dailyStats = [];
|
||||
const today = new Date();
|
||||
const dayNames = ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"];
|
||||
|
||||
for (let i = 6; i >= 0; i--) {
|
||||
const date = new Date(today);
|
||||
date.setDate(date.getDate() - i);
|
||||
date.setHours(0, 0, 0, 0);
|
||||
|
||||
const nextDate = new Date(date);
|
||||
nextDate.setDate(nextDate.getDate() + 1);
|
||||
|
||||
const dayTransactions = transactions.filter(transaction => {
|
||||
const transactionDate = new Date(transaction.createdAt);
|
||||
return transactionDate >= date && transactionDate < nextDate;
|
||||
});
|
||||
|
||||
const totalTokens = dayTransactions.reduce((sum, transaction) => {
|
||||
return sum + Math.abs(Number(transaction.rawAmount) || 0);
|
||||
}, 0);
|
||||
|
||||
dailyStats.push({
|
||||
name: dayNames[date.getDay()],
|
||||
value: totalTokens
|
||||
});
|
||||
}
|
||||
|
||||
// Calculer la répartition par modèle (vraies données)
|
||||
const modelStats = new Map<string, number>();
|
||||
|
||||
transactions.forEach(transaction => {
|
||||
const model = transaction.model || "Inconnu";
|
||||
const tokens = Math.abs(Number(transaction.rawAmount) || 0);
|
||||
modelStats.set(model, (modelStats.get(model) || 0) + tokens);
|
||||
});
|
||||
|
||||
// Convertir en array et trier par usage
|
||||
const modelData = Array.from(modelStats.entries())
|
||||
.map(([name, value]) => ({ name, value }))
|
||||
.sort((a, b) => b.value - a.value);
|
||||
|
||||
return NextResponse.json({
|
||||
dailyTokens: dailyStats,
|
||||
modelDistribution: modelData
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Erreur lors du calcul des statistiques:", error);
|
||||
return NextResponse.json({ error: "Erreur serveur" }, { status: 500 });
|
||||
}
|
||||
}
|
||||
36
app/api/user-activity/route.ts
Normal file
36
app/api/user-activity/route.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { getDatabase } from "@/lib/db/mongodb";
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
const db = await getDatabase();
|
||||
|
||||
// Récupérer tous les utilisateurs
|
||||
const users = await db.collection("users").find({}).toArray();
|
||||
|
||||
// Calculer les utilisateurs actifs (dernière semaine)
|
||||
const oneWeekAgo = new Date();
|
||||
oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
|
||||
|
||||
let activeUsers = 0;
|
||||
let inactiveUsers = 0;
|
||||
|
||||
users.forEach(user => {
|
||||
const lastActivity = new Date(user.updatedAt || user.createdAt);
|
||||
if (lastActivity >= oneWeekAgo) {
|
||||
activeUsers++;
|
||||
} else {
|
||||
inactiveUsers++;
|
||||
}
|
||||
});
|
||||
|
||||
return NextResponse.json({
|
||||
activeUsers,
|
||||
inactiveUsers,
|
||||
totalUsers: users.length
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Erreur lors du calcul de l'activité des utilisateurs:", error);
|
||||
return NextResponse.json({ error: "Erreur serveur" }, { status: 500 });
|
||||
}
|
||||
}
|
||||
18
app/collections/page.tsx
Normal file
18
app/collections/page.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import { CollectionSelector } from "@/components/collections/collection-selector";
|
||||
|
||||
export default function CollectionsPage() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">
|
||||
Collections
|
||||
</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Explorez toutes les collections de votre base Cercle GPT
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<CollectionSelector />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
16
app/conversations/page.tsx
Normal file
16
app/conversations/page.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import { ConversationsTable } from "@/components/collections/conversations-table";
|
||||
|
||||
export default function ConversationsPage() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Conversations</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Gestion des conversations Cercle GPTTT
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ConversationsTable />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
BIN
app/favicon.ico
BIN
app/favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 19 KiB |
124
app/globals.css
124
app/globals.css
@@ -1,26 +1,122 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
:root {
|
||||
--radius: 0.625rem;
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { Sidebar } from "@/components/layout/sidebar";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
@@ -13,8 +14,8 @@ const geistMono = Geist_Mono({
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "Dashboard - Cercle GPT",
|
||||
description: "Dashboard d'administration pour Cercle GPT",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@@ -23,11 +24,16 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<html lang="fr">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
{children}
|
||||
<div className="flex h-screen">
|
||||
<Sidebar />
|
||||
<main className="flex-1 overflow-auto">
|
||||
<div className="container mx-auto p-6">{children}</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
16
app/messages/page.tsx
Normal file
16
app/messages/page.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import { MessagesTable } from "@/components/collections/messages-table";
|
||||
|
||||
export default function MessagesPage() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Messages</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Historique des messages Cercle GPT
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<MessagesTable />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
233
app/page.tsx
233
app/page.tsx
@@ -1,103 +1,146 @@
|
||||
import Image from "next/image";
|
||||
import { Suspense } from "react";
|
||||
import Link from "next/link";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { OverviewMetrics } from "@/components/dashboard/overview-metrics";
|
||||
import { RealTimeStats } from "@/components/dashboard/real-time-stats";
|
||||
import { RealUserActivityChart } from "@/components/dashboard/charts/real-user-activity-chart";
|
||||
import {
|
||||
Users,
|
||||
MessageSquare,
|
||||
CreditCard,
|
||||
BarChart3,
|
||||
TrendingUp,
|
||||
Activity,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function Home() {
|
||||
export default function Dashboard() {
|
||||
return (
|
||||
<div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
|
||||
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={180}
|
||||
height={38}
|
||||
priority
|
||||
/>
|
||||
<ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
|
||||
<li className="mb-2 tracking-[-.01em]">
|
||||
Get started by editing{" "}
|
||||
<code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
|
||||
app/page.tsx
|
||||
</code>
|
||||
.
|
||||
</li>
|
||||
<li className="tracking-[-.01em]">
|
||||
Save and see your changes instantly.
|
||||
</li>
|
||||
</ol>
|
||||
<div className="space-y-6">
|
||||
{/* En-tête simplifié */}
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight flex items-center gap-2">
|
||||
<TrendingUp className="h-8 w-8" />
|
||||
Vue d'ensemble
|
||||
</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Tableau de bord administrateur Cercle GPT
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 items-center flex-col sm:flex-row">
|
||||
<a
|
||||
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
{/* Métriques principales */}
|
||||
<Suspense
|
||||
fallback={<div className="h-32 bg-muted animate-pulse rounded-lg" />}
|
||||
>
|
||||
<OverviewMetrics />
|
||||
</Suspense>
|
||||
|
||||
{/* Graphiques en temps réel */}
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-xl font-semibold flex items-center gap-2">
|
||||
<Activity className="h-5 w-5" />
|
||||
Statistiques en temps réel
|
||||
</h2>
|
||||
|
||||
<Suspense
|
||||
fallback={<div className="h-64 bg-muted animate-pulse rounded-lg" />}
|
||||
>
|
||||
<RealTimeStats />
|
||||
</Suspense>
|
||||
</div>
|
||||
|
||||
{/* Grille pour activité utilisateurs et actions */}
|
||||
<div className="grid gap-6 md:grid-cols-3">
|
||||
{/* Activité des utilisateurs avec vraies données */}
|
||||
<div className="md:col-span-1">
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="h-64 bg-muted animate-pulse rounded-lg" />
|
||||
}
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
Deploy now
|
||||
</a>
|
||||
<a
|
||||
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Read our docs
|
||||
</a>
|
||||
<RealUserActivityChart />
|
||||
</Suspense>
|
||||
</div>
|
||||
</main>
|
||||
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/file.svg"
|
||||
alt="File icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Learn
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/window.svg"
|
||||
alt="Window icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Examples
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/globe.svg"
|
||||
alt="Globe icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Go to nextjs.org →
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
{/* Actions rapides épurées */}
|
||||
<div className="md:col-span-2 grid gap-4 md:grid-cols-2">
|
||||
<Card className="hover:shadow-md transition-shadow border-l-4 border-l-blue-500">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base flex items-center">
|
||||
<Users className="h-4 w-4 mr-2 text-blue-600" />
|
||||
Utilisateurs
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
Gérer les comptes utilisateurs
|
||||
</p>
|
||||
<Link href="/users">
|
||||
<Button variant="outline" size="sm" className="w-full">
|
||||
Voir les utilisateurs
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="hover:shadow-md transition-shadow border-l-4 border-l-green-500">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base flex items-center">
|
||||
<MessageSquare className="h-4 w-4 mr-2 text-green-600" />
|
||||
Conversations
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
Consulter les discussions
|
||||
</p>
|
||||
<Link href="/conversations">
|
||||
<Button variant="outline" size="sm" className="w-full">
|
||||
Voir les conversations
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="hover:shadow-md transition-shadow border-l-4 border-l-purple-500">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base flex items-center">
|
||||
<CreditCard className="h-4 w-4 mr-2 text-purple-600" />
|
||||
Transactions
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
Historique des paiements
|
||||
</p>
|
||||
<Link href="/transactions">
|
||||
<Button variant="outline" size="sm" className="w-full">
|
||||
Voir les transactions
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="hover:shadow-md transition-shadow border-l-4 border-l-orange-500">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base flex items-center">
|
||||
<BarChart3 className="h-4 w-4 mr-2 text-orange-600" />
|
||||
Analytics
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
Analyses détaillées
|
||||
</p>
|
||||
<Link href="/analytics">
|
||||
<Button variant="outline" size="sm" className="w-full">
|
||||
Voir les analytics
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
18
app/roles/page.tsx
Normal file
18
app/roles/page.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import { RolesTable } from "@/components/collections/roles-table";
|
||||
|
||||
export default function RolesPage() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">
|
||||
Rôles et Permissions
|
||||
</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Gestion des rôles d'accès Cercle GPT
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<RolesTable />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
71
app/settings/page.tsx
Normal file
71
app/settings/page.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
export default function SettingsPage() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Paramètres</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Configuration du dashboard Cercle GPT
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Connexion MongoDB</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-muted-foreground">Statut:</span>
|
||||
<Badge variant="default">Connecté</Badge>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Base de données:
|
||||
</span>
|
||||
<span className="text-sm font-mono">Cercle GPT</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Collections:
|
||||
</span>
|
||||
<span className="text-sm">29 collections</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Informations système</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Version Next.js:
|
||||
</span>
|
||||
<span className="text-sm">15.5.4</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Version Node.js:
|
||||
</span>
|
||||
<span className="text-sm">{process.version}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Environnement:
|
||||
</span>
|
||||
<Badge variant="outline">{process.env.NODE_ENV}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
16
app/transactions/page.tsx
Normal file
16
app/transactions/page.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import { TransactionsTable } from "@/components/collections/transactions-table";
|
||||
|
||||
export default function TransactionsPage() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Transactions</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Historique des transactions Cercle GPT
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<TransactionsTable />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
16
app/users/page.tsx
Normal file
16
app/users/page.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import { UsersTable } from "@/components/collections/users-table";
|
||||
|
||||
export default function UsersPage() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Utilisateurs</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Gestion des utilisateurs Cercle GPTT
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<UsersTable />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user