VIBN Frontend for Coolify deployment
This commit is contained in:
227
app/[workspace]/project/[projectId]/progress/page.tsx
Normal file
227
app/[workspace]/project/[projectId]/progress/page.tsx
Normal file
@@ -0,0 +1,227 @@
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ListChecks, Clock, DollarSign, GitBranch, ExternalLink, User } from "lucide-react";
|
||||
import { PageHeader } from "@/components/layout/page-header";
|
||||
|
||||
// Mock data
|
||||
const PROGRESS_ITEMS = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Implemented Product Vision page with file upload",
|
||||
description: "Created dynamic layout system with file upload capabilities for ChatGPT exports",
|
||||
contributor: "Mark Henderson",
|
||||
date: "2025-11-11",
|
||||
time: "2h 15m",
|
||||
tokens: 45000,
|
||||
cost: 0.68,
|
||||
github_link: "https://github.com/user/repo/commit/abc123",
|
||||
type: "feature"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Updated left rail navigation structure",
|
||||
description: "Refactored navigation to remove rounded edges and improve active state",
|
||||
contributor: "Mark Henderson",
|
||||
date: "2025-11-11",
|
||||
time: "45m",
|
||||
tokens: 12000,
|
||||
cost: 0.18,
|
||||
github_link: "https://github.com/user/repo/commit/def456",
|
||||
type: "improvement"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Added section summaries to Overview page",
|
||||
description: "Created cards for Product Vision, Progress, UI UX, Code, Deployment, and Automation",
|
||||
contributor: "Mark Henderson",
|
||||
date: "2025-11-11",
|
||||
time: "1h 30m",
|
||||
tokens: 32000,
|
||||
cost: 0.48,
|
||||
github_link: "https://github.com/user/repo/commit/ghi789",
|
||||
type: "feature"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Fixed database connection issues",
|
||||
description: "Resolved connection pooling and error handling in API routes",
|
||||
contributor: "Mark Henderson",
|
||||
date: "2025-11-10",
|
||||
time: "30m",
|
||||
tokens: 8000,
|
||||
cost: 0.12,
|
||||
github_link: "https://github.com/user/repo/commit/jkl012",
|
||||
type: "fix"
|
||||
},
|
||||
];
|
||||
|
||||
export default async function ProgressPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ projectId: string }>;
|
||||
}) {
|
||||
const { projectId } = await params;
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
projectId={projectId}
|
||||
projectName="AI Proxy"
|
||||
projectEmoji="🤖"
|
||||
pageName="Progress"
|
||||
/>
|
||||
<div className="flex h-full flex-col overflow-auto">
|
||||
{/* Hero Section */}
|
||||
<div className="border-b bg-gradient-to-r from-green-500/5 to-green-500/10 p-8">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-500/10">
|
||||
<ListChecks className="h-6 w-6 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Progress</h1>
|
||||
<p className="text-muted-foreground">Development activity and velocity</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 p-6">
|
||||
<div className="mx-auto max-w-6xl space-y-6">
|
||||
{/* Summary Stats */}
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
<Card>
|
||||
<CardContent className="pt-4 pb-3">
|
||||
<div className="text-xs text-muted-foreground mb-1">Total Items</div>
|
||||
<div className="text-2xl font-bold">{PROGRESS_ITEMS.length}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-4 pb-3">
|
||||
<div className="text-xs text-muted-foreground mb-1">Total Time</div>
|
||||
<div className="text-2xl font-bold">5h 0m</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-4 pb-3">
|
||||
<div className="text-xs text-muted-foreground mb-1">Total Cost</div>
|
||||
<div className="text-2xl font-bold">$1.46</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-4 pb-3">
|
||||
<div className="text-xs text-muted-foreground mb-1">Total Tokens</div>
|
||||
<div className="text-2xl font-bold">97K</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Progress List */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>Development Activity</CardTitle>
|
||||
<CardDescription>Sorted by latest</CardDescription>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" size="sm">
|
||||
Latest
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm">
|
||||
Cost
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm">
|
||||
Time
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{PROGRESS_ITEMS.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="flex flex-col gap-3 rounded-lg border p-4 hover:bg-accent/50 transition-colors"
|
||||
>
|
||||
{/* Header Row */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h3 className="font-semibold">{item.title}</h3>
|
||||
<Badge variant={
|
||||
item.type === 'feature' ? 'default' :
|
||||
item.type === 'fix' ? 'destructive' :
|
||||
'secondary'
|
||||
} className="text-xs">
|
||||
{item.type}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">{item.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Metadata Row */}
|
||||
<div className="flex items-center gap-6 text-sm">
|
||||
{/* Contributor */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<User className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-muted-foreground">{item.contributor}</span>
|
||||
</div>
|
||||
|
||||
{/* Time */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Clock className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-muted-foreground">{item.time}</span>
|
||||
</div>
|
||||
|
||||
{/* Tokens */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-muted-foreground">{item.tokens.toLocaleString()} tokens</span>
|
||||
</div>
|
||||
|
||||
{/* Cost */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<DollarSign className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-muted-foreground">${item.cost.toFixed(2)}</span>
|
||||
</div>
|
||||
|
||||
{/* GitHub Link */}
|
||||
<div className="ml-auto">
|
||||
<Button variant="ghost" size="sm" className="h-7" asChild>
|
||||
<a href={item.github_link} target="_blank" rel="noopener noreferrer">
|
||||
<GitBranch className="mr-1.5 h-3.5 w-3.5" />
|
||||
Commit
|
||||
<ExternalLink className="ml-1.5 h-3 w-3" />
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Date */}
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{new Date(item.date).toLocaleDateString('en-US', {
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user