VIBN Frontend for Coolify deployment
This commit is contained in:
179
app/[workspace]/project/[projectId]/analytics/page.tsx
Normal file
179
app/[workspace]/project/[projectId]/analytics/page.tsx
Normal file
@@ -0,0 +1,179 @@
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { BarChart3, DollarSign, TrendingUp, Zap } from "lucide-react";
|
||||
|
||||
export default async function AnalyticsPage({
|
||||
params,
|
||||
}: {
|
||||
params: { projectId: string };
|
||||
}) {
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* Page Header */}
|
||||
<div className="border-b bg-card/50 px-6 py-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Analytics</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Cost analysis, token usage, and performance metrics
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-auto p-6">
|
||||
<div className="mx-auto max-w-6xl space-y-6">
|
||||
{/* Key Metrics */}
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Total Cost</CardTitle>
|
||||
<DollarSign className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">$12.50</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
<TrendingUp className="mr-1 inline h-3 w-3" />
|
||||
+8% from last month
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Tokens Used</CardTitle>
|
||||
<Zap className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">2.5M</div>
|
||||
<p className="text-xs text-muted-foreground">Across all sessions</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Avg Cost/Session</CardTitle>
|
||||
<BarChart3 className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">$0.30</div>
|
||||
<p className="text-xs text-muted-foreground">Per coding session</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Cost/Feature</CardTitle>
|
||||
<DollarSign className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">$1.56</div>
|
||||
<p className="text-xs text-muted-foreground">Average per feature</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Detailed Analytics */}
|
||||
<Tabs defaultValue="costs" className="space-y-4">
|
||||
<TabsList>
|
||||
<TabsTrigger value="costs">Costs</TabsTrigger>
|
||||
<TabsTrigger value="tokens">Tokens</TabsTrigger>
|
||||
<TabsTrigger value="performance">Performance</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="costs" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Cost Breakdown</CardTitle>
|
||||
<CardDescription>
|
||||
AI usage costs over time
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex h-[300px] items-center justify-center border-2 border-dashed rounded-lg">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Cost chart visualization coming soon
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Cost by Model</CardTitle>
|
||||
<CardDescription>
|
||||
Breakdown by AI model used
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
{[
|
||||
{ model: "Claude Sonnet 4", cost: "$8.20", percentage: 66 },
|
||||
{ model: "GPT-4", cost: "$3.10", percentage: 25 },
|
||||
{ model: "Gemini Pro", cost: "$1.20", percentage: 9 },
|
||||
].map((item, i) => (
|
||||
<div key={i} className="space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="font-medium">{item.model}</span>
|
||||
<span className="text-muted-foreground">{item.cost}</span>
|
||||
</div>
|
||||
<div className="h-2 rounded-full bg-muted overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-primary"
|
||||
style={{ width: `${item.percentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="tokens" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Token Usage</CardTitle>
|
||||
<CardDescription>
|
||||
Token consumption over time
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex h-[300px] items-center justify-center border-2 border-dashed rounded-lg">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Token usage chart coming soon
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="performance" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Development Velocity</CardTitle>
|
||||
<CardDescription>
|
||||
Features completed over time
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex h-[300px] items-center justify-center border-2 border-dashed rounded-lg">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Velocity metrics coming soon
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user