project init

2025-12-01 02:29:08 +01:00
commit 78a0f6c646
106 changed files with 13132 additions and 0 deletions
--- a/frontend/app/admin/stack/page.tsx
+++ b/frontend/app/admin/stack/page.tsx
@@ -0,0 +1,158 @@
+"use client"
+
+import { useState } from "react"
+import { AdminShell } from "@/components/admin/admin-shell"
+import { StackForm } from "@/components/admin/stack-form"
+import { useDataStore } from "@/lib/data-store"
+import type { StackCategory } from "@/lib/types"
+import { Button } from "@/components/ui/button"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { Plus, Pencil, Trash2, Terminal, Layers } from "lucide-react"
+
+export default function StackPage() {
+  const { stackCategories, addStackCategory, updateStackCategory, deleteStackCategory } = useDataStore()
+  const [isFormOpen, setIsFormOpen] = useState(false)
+  const [editingCategory, setEditingCategory] = useState<StackCategory | null>(null)
+  const [deletingCategory, setDeletingCategory] = useState<StackCategory | null>(null)
+
+  const handleCreate = () => {
+    setEditingCategory(null)
+    setIsFormOpen(true)
+  }
+
+  const handleEdit = (category: StackCategory) => {
+    setEditingCategory(category)
+    setIsFormOpen(true)
+  }
+
+  const handleSubmit = (data: Omit<StackCategory, "id">) => {
+    if (editingCategory) {
+      updateStackCategory(editingCategory.id, data)
+    } else {
+      addStackCategory(data)
+    }
+    setIsFormOpen(false)
+    setEditingCategory(null)
+  }
+
+  const handleDelete = () => {
+    if (deletingCategory) {
+      deleteStackCategory(deletingCategory.id)
+      setDeletingCategory(null)
+    }
+  }
+
+  const totalItems = stackCategories.reduce((acc, cat) => acc + cat.items.length, 0)
+
+  return (
+    <AdminShell>
+      <div className="p-8 space-y-8">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div className="space-y-2">
+            <h1 className="text-2xl font-semibold text-foreground">Tech Stack</h1>
+            <p className="text-sm text-muted-foreground font-mono">
+              <Terminal size={12} className="inline mr-1" />$ atticl stack --list ({stackCategories.length} categories,{" "}
+              {totalItems} items)
+            </p>
+          </div>
+          <Button onClick={handleCreate} className="gap-2">
+            <Plus size={16} />
+            Add Category
+          </Button>
+        </div>
+
+        {/* Categories grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {stackCategories.map((category) => (
+            <div
+              key={category.id}
+              className="bg-card border border-border rounded-lg p-5 hover:border-primary/30 transition-colors"
+            >
+              <div className="flex items-start justify-between mb-4">
+                <div className="flex items-center gap-2">
+                  <Layers size={16} className="text-primary" />
+                  <h3 className="font-mono text-sm text-primary uppercase tracking-wider">{category.title}</h3>
+                </div>
+                <div className="flex items-center gap-1">
+                  <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => handleEdit(category)}>
+                    <Pencil size={14} />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 hover:text-destructive"
+                    onClick={() => setDeletingCategory(category)}
+                  >
+                    <Trash2 size={14} />
+                  </Button>
+                </div>
+              </div>
+
+              <ul className="space-y-1.5">
+                {category.items.map((item) => (
+                  <li key={item} className="text-sm text-muted-foreground font-mono flex items-center gap-2">
+                    <span className="w-1 h-1 bg-muted-foreground rounded-full" />
+                    {item}
+                  </li>
+                ))}
+              </ul>
+
+              <p className="mt-4 text-xs text-muted-foreground">
+                {category.items.length} {category.items.length === 1 ? "item" : "items"}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        {stackCategories.length === 0 && (
+          <div className="text-center py-12 text-muted-foreground">
+            <p className="font-mono">No tech stack categories yet.</p>
+            <Button onClick={handleCreate} variant="link" className="mt-2">
+              Add your first category
+            </Button>
+          </div>
+        )}
+
+        {/* Form dialog */}
+        <Dialog open={isFormOpen} onOpenChange={setIsFormOpen}>
+          <DialogContent className="max-w-md">
+            <DialogHeader>
+              <DialogTitle className="font-mono">{editingCategory ? "Edit Category" : "New Category"}</DialogTitle>
+            </DialogHeader>
+            <StackForm category={editingCategory} onSubmit={handleSubmit} onCancel={() => setIsFormOpen(false)} />
+          </DialogContent>
+        </Dialog>
+
+        {/* Delete confirmation */}
+        <AlertDialog open={!!deletingCategory} onOpenChange={() => setDeletingCategory(null)}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Delete Category</AlertDialogTitle>
+              <AlertDialogDescription>
+                Are you sure you want to delete the "{deletingCategory?.title}" category? This will remove all{" "}
+                {deletingCategory?.items.length} technologies in it.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogAction onClick={handleDelete} className="bg-destructive text-destructive-foreground">
+                Delete
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+    </AdminShell>
+  )
+}