project init

frontend/app/admin/projects/page.tsx

@@ -0,0 +1,115 @@
+"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>
+  )
+}