634 lines
37 KiB
TypeScript
634 lines
37 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Activity, Database, FileText, Key, Users, Image as ImageIcon, Megaphone, Layers, TrendingUp, PieChart, BarChart3, Calendar, Target, Send, CheckCircle2, XCircle } from "lucide-react";
|
|
import { useDashboardStats } from "@/modules/admin/hooks";
|
|
import { useCampaignAnalytics } from "@/modules/campaigns/hooks";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import {
|
|
LineChart,
|
|
Line,
|
|
BarChart,
|
|
Bar,
|
|
PieChart as RechartsPie,
|
|
Pie,
|
|
Cell,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
Legend,
|
|
ResponsiveContainer,
|
|
Area,
|
|
AreaChart,
|
|
} from "recharts";
|
|
|
|
const COLORS = ['#404040', '#606060', '#808080', '#a0a0a0', '#505050', '#707070', '#909090'];
|
|
|
|
export default function DashboardPage() {
|
|
const { data, isLoading } = useDashboardStats();
|
|
const { data: campaignAnalyticsData, isLoading: isCampaignLoading } = useCampaignAnalytics();
|
|
const stats = data?.data?.summary;
|
|
const charts = data?.data?.charts;
|
|
const campaignAnalytics = campaignAnalyticsData?.data;
|
|
|
|
if (isLoading || isCampaignLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-screen">
|
|
<div className="text-center space-y-4">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
|
|
<p className="text-muted-foreground">Loading dashboard...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const contentByTypeData = charts?.contentByType.labels.map((label: string, index: number) => ({
|
|
name: label,
|
|
value: charts.contentByType.data[index],
|
|
})) || [];
|
|
|
|
const contentByCorpData = charts?.contentByCorpType.labels.map((label: string, index: number) => ({
|
|
name: label,
|
|
value: charts.contentByCorpType.data[index],
|
|
})) || [];
|
|
|
|
const campaignStatusData = charts?.campaignStatus.labels.map((label: string, index: number) => ({
|
|
name: label,
|
|
value: charts.campaignStatus.data[index],
|
|
})) || [];
|
|
|
|
const userTrendData = charts?.userRegistrationTrend.labels.map((label: string, index: number) => ({
|
|
date: label,
|
|
users: charts.userRegistrationTrend.data[index],
|
|
})) || [];
|
|
|
|
const timelineData = Object.entries(charts?.contentCreationTimeline || {}).map(([date, types]) => {
|
|
const typedTypes = types as Record<string, number>;
|
|
return {
|
|
date,
|
|
...typedTypes,
|
|
};
|
|
});
|
|
|
|
return (
|
|
<div className="space-y-6 pb-8">
|
|
{/* Hero Header - Windows 10 Style */}
|
|
<div className="relative overflow-hidden rounded-lg glass p-8 border">
|
|
<div className="relative z-10">
|
|
<h1 className="text-3xl font-semibold tracking-tight mb-2">Admin CSA Dashboard</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
Enterprise Management & Analytics Platform
|
|
</p>
|
|
<div className="mt-4 flex items-center gap-3">
|
|
<div className="flex items-center gap-2 glass-dark px-3 py-1.5 rounded text-xs">
|
|
<div className="h-1.5 w-1.5 rounded-full bg-foreground"></div>
|
|
<span>System Online</span>
|
|
</div>
|
|
<div className="glass-dark px-3 py-1.5 rounded text-xs">
|
|
{new Date().toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="absolute right-8 top-1/2 -translate-y-1/2 opacity-5">
|
|
<BarChart3 className="h-24 w-24" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Key Metrics - Clean Cards */}
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
|
<Card className="glass border hover:border-foreground/20 transition-colors">
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Total Content</CardTitle>
|
|
<div className="p-2 bg-muted rounded">
|
|
<FileText className="h-4 w-4 text-muted-foreground" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-semibold">{stats?.content.total || 0}</div>
|
|
<p className="text-xs text-muted-foreground mt-1">Across all platforms</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="glass border hover:border-foreground/20 transition-colors">
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Active Users</CardTitle>
|
|
<div className="p-2 bg-muted rounded">
|
|
<Users className="h-4 w-4 text-muted-foreground" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-semibold">{stats?.infra.users || 0}</div>
|
|
<p className="text-xs text-muted-foreground mt-1">Registered users</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="glass border hover:border-foreground/20 transition-colors">
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Campaigns</CardTitle>
|
|
<div className="p-2 bg-muted rounded">
|
|
<Megaphone className="h-4 w-4 text-muted-foreground" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-semibold">{stats?.campaigns || 0}</div>
|
|
<p className="text-xs text-muted-foreground mt-1">Active campaigns</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="glass border hover:border-foreground/20 transition-colors">
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">API Keys</CardTitle>
|
|
<div className="p-2 bg-muted rounded">
|
|
<Key className="h-4 w-4 text-muted-foreground" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-semibold">{stats?.infra.apiKeys || 0}</div>
|
|
<p className="text-xs text-muted-foreground mt-1">Active tokens</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Campaign Analytics Section */}
|
|
{campaignAnalytics && (
|
|
<>
|
|
<div className="flex items-center gap-2 mt-8">
|
|
<Megaphone className="h-5 w-5 text-muted-foreground" />
|
|
<h2 className="text-2xl font-semibold">Campaign Analytics</h2>
|
|
</div>
|
|
|
|
{/* Campaign Summary Cards */}
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
|
<Card className="glass border hover:border-foreground/20 transition-colors">
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Total Campaigns</CardTitle>
|
|
<div className="p-2 bg-muted rounded">
|
|
<Target className="h-4 w-4 text-muted-foreground" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-semibold">{campaignAnalytics.summary.campaigns.total}</div>
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
{campaignAnalytics.summary.campaigns.upcomingCount} upcoming
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="glass border hover:border-foreground/20 transition-colors">
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Target Users</CardTitle>
|
|
<div className="p-2 bg-muted rounded">
|
|
<Users className="h-4 w-4 text-muted-foreground" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-semibold">{campaignAnalytics.summary.delivery.totalTargetUsers}</div>
|
|
<p className="text-xs text-muted-foreground mt-1">Total reached</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="glass border hover:border-foreground/20 transition-colors">
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Delivered</CardTitle>
|
|
<div className="p-2 bg-muted rounded">
|
|
<CheckCircle2 className="h-4 w-4 text-muted-foreground" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-semibold text-green-600">{campaignAnalytics.summary.delivery.totalDelivered}</div>
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
{campaignAnalytics.summary.delivery.overallDeliveryRate} success rate
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="glass border hover:border-foreground/20 transition-colors">
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Failed</CardTitle>
|
|
<div className="p-2 bg-muted rounded">
|
|
<XCircle className="h-4 w-4 text-muted-foreground" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-semibold text-red-600">{campaignAnalytics.summary.delivery.totalFailed}</div>
|
|
<p className="text-xs text-muted-foreground mt-1">Failed deliveries</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Campaign Charts */}
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<Card className="glass border">
|
|
<CardHeader>
|
|
<div className="flex items-center gap-2">
|
|
<PieChart className="h-5 w-5 text-muted-foreground" />
|
|
<CardTitle className="text-base">Campaign Status</CardTitle>
|
|
</div>
|
|
<CardDescription>Distribution by status</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<RechartsPie>
|
|
<Pie
|
|
data={campaignAnalytics.charts.statusDistribution.labels.map((label: string, index: number) => ({
|
|
name: label,
|
|
value: campaignAnalytics.charts.statusDistribution.data[index],
|
|
}))}
|
|
cx="50%"
|
|
cy="50%"
|
|
labelLine={false}
|
|
label={({ name, value }: any) => `${name}: ${value}`}
|
|
outerRadius={80}
|
|
fill="#8884d8"
|
|
dataKey="value"
|
|
>
|
|
{campaignAnalytics.charts.statusDistribution.labels.map((_: any, index: number) => (
|
|
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
|
|
))}
|
|
</Pie>
|
|
<Tooltip />
|
|
<Legend />
|
|
</RechartsPie>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="glass border">
|
|
<CardHeader>
|
|
<div className="flex items-center gap-2">
|
|
<BarChart3 className="h-5 w-5 text-muted-foreground" />
|
|
<CardTitle className="text-base">Delivery Status</CardTitle>
|
|
</div>
|
|
<CardDescription>Success vs failure rate</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<BarChart
|
|
data={campaignAnalytics.charts.deliveryStatusDistribution.labels.map((label: string, index: number) => ({
|
|
name: label,
|
|
value: campaignAnalytics.charts.deliveryStatusDistribution.data[index],
|
|
}))}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" opacity={0.1} />
|
|
<XAxis dataKey="name" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Bar dataKey="value" fill="hsl(var(--foreground))" opacity={0.7} radius={[8, 8, 0, 0]} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="glass border">
|
|
<CardHeader>
|
|
<div className="flex items-center gap-2">
|
|
<TrendingUp className="h-5 w-5 text-muted-foreground" />
|
|
<CardTitle className="text-base">Creation Trend</CardTitle>
|
|
</div>
|
|
<CardDescription>Campaigns created over time</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<AreaChart
|
|
data={campaignAnalytics.charts.creationTrend.labels.map((label: string, index: number) => ({
|
|
date: label,
|
|
count: campaignAnalytics.charts.creationTrend.data[index],
|
|
}))}
|
|
>
|
|
<defs>
|
|
<linearGradient id="colorCampaigns" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor="hsl(var(--foreground))" stopOpacity={0.3}/>
|
|
<stop offset="95%" stopColor="hsl(var(--foreground))" stopOpacity={0}/>
|
|
</linearGradient>
|
|
</defs>
|
|
<CartesianGrid strokeDasharray="3 3" opacity={0.1} />
|
|
<XAxis dataKey="date" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Area type="monotone" dataKey="count" stroke="hsl(var(--foreground))" strokeWidth={2} fillOpacity={1} fill="url(#colorCampaigns)" />
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Top Performing Campaign */}
|
|
{campaignAnalytics.topPerforming.length > 0 && (
|
|
<Card className="glass border">
|
|
<CardHeader>
|
|
<div className="flex items-center gap-2">
|
|
<Target className="h-5 w-5 text-muted-foreground" />
|
|
<CardTitle className="text-base">Top Performing</CardTitle>
|
|
</div>
|
|
<CardDescription>Best campaign by delivery rate</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
{campaignAnalytics.topPerforming.map((campaign: any) => (
|
|
<div key={campaign.id} className="border rounded-lg p-4 space-y-3">
|
|
<div>
|
|
<h4 className="font-medium">{campaign.title}</h4>
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
{new Date(campaign.date).toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-2 text-center">
|
|
<div>
|
|
<div className="text-lg font-semibold">{campaign.targetUsers}</div>
|
|
<div className="text-xs text-muted-foreground">Target</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-lg font-semibold text-green-600">{campaign.successCount}</div>
|
|
<div className="text-xs text-muted-foreground">Success</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-lg font-semibold text-red-600">{campaign.failureCount}</div>
|
|
<div className="text-xs text-muted-foreground">Failed</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between pt-2 border-t">
|
|
<span className="text-sm text-muted-foreground">Delivery Rate</span>
|
|
<span className={`text-lg font-bold ${
|
|
campaign.deliveryRate >= 90 ? 'text-green-600' :
|
|
campaign.deliveryRate >= 70 ? 'text-yellow-600' :
|
|
'text-red-600'
|
|
}`}>
|
|
{campaign.deliveryRate.toFixed(2)}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Content Management Section */}
|
|
<div className="flex items-center gap-2 mt-8">
|
|
<FileText className="h-5 w-5 text-muted-foreground" />
|
|
<h2 className="text-2xl font-semibold">Content Management</h2>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<Card className="glass border">
|
|
<CardHeader>
|
|
<div className="flex items-center gap-2">
|
|
<PieChart className="h-4 w-4 text-muted-foreground" />
|
|
<CardTitle className="text-base">Content Distribution</CardTitle>
|
|
</div>
|
|
<CardDescription>Content breakdown by type</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<RechartsPie>
|
|
<Pie
|
|
data={contentByTypeData}
|
|
cx="50%"
|
|
cy="50%"
|
|
labelLine={false}
|
|
label={({ name, percent }: any) => `${name} ${((percent || 0) * 100).toFixed(0)}%`}
|
|
outerRadius={80}
|
|
fill="#8884d8"
|
|
dataKey="value"
|
|
>
|
|
{contentByTypeData.map((_entry: any, index: number) => (
|
|
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
|
|
))}
|
|
</Pie>
|
|
<Tooltip />
|
|
</RechartsPie>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="glass border">
|
|
<CardHeader>
|
|
<div className="flex items-center gap-2">
|
|
<BarChart3 className="h-5 w-5 text-muted-foreground" />
|
|
<CardTitle className="text-base">Content by Corporation</CardTitle>
|
|
</div>
|
|
<CardDescription>Content distribution across corps</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<BarChart data={contentByCorpData}>
|
|
<CartesianGrid strokeDasharray="3 3" opacity={0.1} />
|
|
<XAxis dataKey="name" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Bar dataKey="value" fill="hsl(var(--foreground))" opacity={0.7} radius={[8, 8, 0, 0]} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="glass border">
|
|
<CardHeader>
|
|
<div className="flex items-center gap-2">
|
|
<TrendingUp className="h-5 w-5 text-muted-foreground" />
|
|
<CardTitle className="text-base">User Registration Trend</CardTitle>
|
|
</div>
|
|
<CardDescription>New user registrations over time</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<AreaChart data={userTrendData}>
|
|
<defs>
|
|
<linearGradient id="colorUsers" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor="hsl(var(--foreground))" stopOpacity={0.3}/>
|
|
<stop offset="95%" stopColor="hsl(var(--foreground))" stopOpacity={0}/>
|
|
</linearGradient>
|
|
</defs>
|
|
<CartesianGrid strokeDasharray="3 3" opacity={0.1} />
|
|
<XAxis dataKey="date" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Area type="monotone" dataKey="users" stroke="hsl(var(--foreground))" strokeWidth={2} fillOpacity={1} fill="url(#colorUsers)" />
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="glass border">
|
|
<CardHeader>
|
|
<div className="flex items-center gap-2">
|
|
<Megaphone className="h-5 w-5 text-muted-foreground" />
|
|
<CardTitle className="text-base">Campaign Status</CardTitle>
|
|
</div>
|
|
<CardDescription>Current campaign distribution</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<RechartsPie>
|
|
<Pie
|
|
data={campaignStatusData}
|
|
cx="50%"
|
|
cy="50%"
|
|
labelLine={false}
|
|
label={({ name, value }: any) => `${name}: ${value}`}
|
|
outerRadius={80}
|
|
fill="#8884d8"
|
|
dataKey="value"
|
|
>
|
|
{campaignStatusData.map((_entry: any, index: number) => (
|
|
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
|
|
))}
|
|
</Pie>
|
|
<Tooltip />
|
|
<Legend />
|
|
</RechartsPie>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{timelineData.length > 0 && (
|
|
<Card className="glass border">
|
|
<CardHeader>
|
|
<div className="flex items-center gap-2">
|
|
<Calendar className="h-5 w-5 text-muted-foreground" />
|
|
<CardTitle className="text-base">Content Creation Timeline</CardTitle>
|
|
</div>
|
|
<CardDescription>Content created over time by type</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ResponsiveContainer width="100%" height={350}>
|
|
<BarChart data={timelineData}>
|
|
<CartesianGrid strokeDasharray="3 3" opacity={0.1} />
|
|
<XAxis dataKey="date" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Legend />
|
|
<Bar dataKey="article" stackId="a" fill="#404040" />
|
|
<Bar dataKey="splash" stackId="a" fill="#606060" />
|
|
<Bar dataKey="promo" stackId="a" fill="#808080" />
|
|
<Bar dataKey="banner" stackId="a" fill="#a0a0a0" />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{charts?.contentMatrix && charts.contentMatrix.length > 0 && (
|
|
<Card className="glass border">
|
|
<CardHeader>
|
|
<CardTitle className="text-base">Content Matrix</CardTitle>
|
|
<CardDescription>Content distribution by type and corporation</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="rounded-lg border border-border/50">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b bg-muted/30">
|
|
<th className="p-3 text-left font-medium text-sm">Content Type</th>
|
|
<th className="p-3 text-left font-medium text-sm">Corporation</th>
|
|
<th className="p-3 text-right font-medium text-sm">Count</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{charts.contentMatrix.map((item: any, index: number) => (
|
|
<tr key={index} className="border-b last:border-0 hover:bg-muted/20 transition-colors">
|
|
<td className="p-3 capitalize text-sm">{item.type}</td>
|
|
<td className="p-3">
|
|
<Badge variant="outline" className="capitalize text-xs">{item.corp}</Badge>
|
|
</td>
|
|
<td className="p-3 text-right font-mono text-sm">{item.count}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
<Card className="glass border">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|
<Database className="h-5 w-5 text-muted-foreground" />
|
|
Infrastructure Overview
|
|
</CardTitle>
|
|
<CardDescription>System resources and services</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid gap-4 md:grid-cols-3">
|
|
<div className="flex items-center gap-4 rounded-lg border border-border/50 p-4 hover:border-foreground/20 transition-colors">
|
|
<div className="rounded bg-muted p-3">
|
|
<Key className="h-6 w-6 text-muted-foreground" />
|
|
</div>
|
|
<div>
|
|
<p className="text-2xl font-semibold">{stats?.infra.apiKeys || 0}</p>
|
|
<p className="text-sm text-muted-foreground">API Keys</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-4 rounded-lg border border-border/50 p-4 hover:border-foreground/20 transition-colors">
|
|
<div className="rounded bg-muted p-3">
|
|
<Database className="h-6 w-6 text-muted-foreground" />
|
|
</div>
|
|
<div>
|
|
<p className="text-2xl font-semibold">{stats?.infra.buckets || 0}</p>
|
|
<p className="text-sm text-muted-foreground">Buckets</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-4 rounded-lg border border-border/50 p-4 hover:border-foreground/20 transition-colors">
|
|
<div className="rounded bg-muted p-3">
|
|
<Users className="h-6 w-6 text-muted-foreground" />
|
|
</div>
|
|
<div>
|
|
<p className="text-2xl font-semibold">{stats?.infra.users || 0}</p>
|
|
<p className="text-sm text-muted-foreground">Users</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="glass border">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|
<FileText className="h-5 w-5 text-muted-foreground" />
|
|
Content Type Breakdown
|
|
</CardTitle>
|
|
<CardDescription>Distribution of content across different types</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid gap-3 md:grid-cols-2 lg:grid-cols-5">
|
|
<div className="rounded-lg border border-border/50 bg-muted/30 p-4 hover:border-foreground/20 transition-colors">
|
|
<div className="flex items-center justify-between">
|
|
<ImageIcon className="h-5 w-5 text-muted-foreground" />
|
|
<span className="text-2xl font-semibold">{stats?.content.splash || 0}</span>
|
|
</div>
|
|
<p className="mt-2 text-sm font-medium">Splash</p>
|
|
</div>
|
|
<div className="rounded-lg border border-border/50 bg-muted/30 p-4 hover:border-foreground/20 transition-colors">
|
|
<div className="flex items-center justify-between">
|
|
<Megaphone className="h-5 w-5 text-muted-foreground" />
|
|
<span className="text-2xl font-semibold">{stats?.content.promo || 0}</span>
|
|
</div>
|
|
<p className="mt-2 text-sm font-medium">Promo</p>
|
|
</div>
|
|
<div className="rounded-lg border border-border/50 bg-muted/30 p-4 hover:border-foreground/20 transition-colors">
|
|
<div className="flex items-center justify-between">
|
|
<FileText className="h-5 w-5 text-muted-foreground" />
|
|
<span className="text-2xl font-semibold">{stats?.content.article || 0}</span>
|
|
</div>
|
|
<p className="mt-2 text-sm font-medium">Article</p>
|
|
</div>
|
|
<div className="rounded-lg border border-border/50 bg-muted/30 p-4 hover:border-foreground/20 transition-colors">
|
|
<div className="flex items-center justify-between">
|
|
<Layers className="h-5 w-5 text-muted-foreground" />
|
|
<span className="text-2xl font-semibold">{stats?.content.banner || 0}</span>
|
|
</div>
|
|
<p className="mt-2 text-sm font-medium">Banner</p>
|
|
</div>
|
|
<div className="rounded-lg border border-border/50 bg-muted/30 p-4 hover:border-foreground/20 transition-colors">
|
|
<div className="flex items-center justify-between">
|
|
<Activity className="h-5 w-5 text-muted-foreground" />
|
|
<span className="text-2xl font-semibold">{stats?.content.floatingWidget || 0}</span>
|
|
</div>
|
|
<p className="mt-2 text-sm font-medium">Widget</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|