116 lines
4.4 KiB
TypeScript
116 lines
4.4 KiB
TypeScript
"use client"
|
|
|
|
import { AdminShell } from "@/components/admin/admin-shell"
|
|
import { useDataStore } from "@/lib/data-store"
|
|
import { FolderKanban, Layers, Terminal } from "lucide-react"
|
|
import Link from "next/link"
|
|
|
|
export default function AdminDashboard() {
|
|
const { projects, stackCategories } = useDataStore()
|
|
|
|
const stats = [
|
|
{
|
|
label: "Total Projects",
|
|
value: projects.length,
|
|
icon: FolderKanban,
|
|
href: "/admin/projects",
|
|
},
|
|
{
|
|
label: "Featured Projects",
|
|
value: projects.filter((p) => p.featured).length,
|
|
icon: FolderKanban,
|
|
href: "/admin/projects",
|
|
},
|
|
{
|
|
label: "Stack Categories",
|
|
value: stackCategories.length,
|
|
icon: Layers,
|
|
href: "/admin/stack",
|
|
},
|
|
{
|
|
label: "Total Tech Items",
|
|
value: stackCategories.reduce((acc, cat) => acc + cat.items.length, 0),
|
|
icon: Layers,
|
|
href: "/admin/stack",
|
|
},
|
|
]
|
|
|
|
return (
|
|
<AdminShell>
|
|
<div className="p-8 space-y-8">
|
|
{/* Header */}
|
|
<div className="space-y-2">
|
|
<h1 className="text-2xl font-semibold text-foreground">Dashboard</h1>
|
|
<p className="text-sm text-muted-foreground font-mono">
|
|
<Terminal size={12} className="inline mr-1" />$ atticl admin --status
|
|
</p>
|
|
</div>
|
|
|
|
{/* Stats grid */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{stats.map((stat) => (
|
|
<Link
|
|
key={stat.label}
|
|
href={stat.href}
|
|
className="bg-card border border-border rounded-lg p-6 hover:border-primary/50 transition-colors group"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<stat.icon size={20} className="text-muted-foreground group-hover:text-primary transition-colors" />
|
|
<span className="text-3xl font-semibold text-foreground">{stat.value}</span>
|
|
</div>
|
|
<p className="mt-2 text-sm font-mono text-muted-foreground">{stat.label}</p>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* Quick actions */}
|
|
<div className="space-y-4">
|
|
<h2 className="font-mono text-sm text-muted-foreground uppercase tracking-wider">Quick Actions</h2>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<Link
|
|
href="/admin/projects"
|
|
className="bg-card border border-border rounded-lg p-4 hover:border-primary/50 transition-colors flex items-center gap-4"
|
|
>
|
|
<div className="w-10 h-10 bg-primary/10 rounded-md flex items-center justify-center">
|
|
<FolderKanban size={18} className="text-primary" />
|
|
</div>
|
|
<div>
|
|
<p className="font-medium text-foreground">Manage Projects</p>
|
|
<p className="text-sm text-muted-foreground">Add, edit, or remove projects</p>
|
|
</div>
|
|
</Link>
|
|
<Link
|
|
href="/admin/stack"
|
|
className="bg-card border border-border rounded-lg p-4 hover:border-primary/50 transition-colors flex items-center gap-4"
|
|
>
|
|
<div className="w-10 h-10 bg-primary/10 rounded-md flex items-center justify-center">
|
|
<Layers size={18} className="text-primary" />
|
|
</div>
|
|
<div>
|
|
<p className="font-medium text-foreground">Manage Tech Stack</p>
|
|
<p className="text-sm text-muted-foreground">Update your technology categories</p>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* API placeholder */}
|
|
<div className="bg-card border border-dashed border-border rounded-lg p-6">
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-10 h-10 bg-secondary rounded-md flex items-center justify-center flex-shrink-0">
|
|
<Terminal size={18} className="text-muted-foreground" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<p className="font-medium text-foreground">API Integration</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Currently using mock data. Replace the data store functions with your API calls when ready.
|
|
</p>
|
|
<code className="text-xs font-mono text-primary bg-secondary px-2 py-1 rounded">lib/data-store.tsx</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AdminShell>
|
|
)
|
|
}
|