228 lines
8.5 KiB
TypeScript
228 lines
8.5 KiB
TypeScript
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>
|
|
</>
|
|
);
|
|
}
|
|
|