initial commit

src/pages/CategoriesPage.tsx

@@ -0,0 +1,68 @@
+import { useState } from "react";
+import { useQuery } from "convex/react";
+import { api } from "../../convex/_generated/api";
+import type { Doc } from "../../convex/_generated/dataModel";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { CategoryFormDialog } from "@/components/categories/CategoryFormDialog";
+
+function CategorySection({
+  title,
+  categories,
+  onEdit,
+}: {
+  title: string;
+  categories: Doc<"categories">[];
+  onEdit: (c: Doc<"categories">) => void;
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        {categories.length === 0 && (
+          <p className="text-sm text-muted-foreground">Keine Kategorien</p>
+        )}
+        {categories.map((cat) => (
+          <div key={cat._id} className="flex items-center justify-between rounded-lg border p-3">
+            <Badge style={{ backgroundColor: cat.color, color: "#fff", border: "none" }}>
+              {cat.name}
+            </Badge>
+            <Button size="sm" variant="outline" onClick={() => onEdit(cat)}>
+              Bearbeiten
+            </Button>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}
+
+export function CategoriesPage() {
+  const categories = useQuery(api.categories.list);
+  const [edit, setEdit] = useState<Doc<"categories"> | null>(null);
+  const [createOpen, setCreateOpen] = useState(false);
+
+  const income = categories?.filter((c) => c.kind === "einnahme") ?? [];
+  const fixed = categories?.filter((c) => c.kind === "ausgabe" && c.block === "wiederkehrend") ?? [];
+  const variable = categories?.filter((c) => c.kind === "ausgabe" && c.block === "variabel") ?? [];
+
+  return (
+    <div className="space-y-4">
+      <Button onClick={() => setCreateOpen(true)}>Neue Kategorie</Button>
+      <div className="grid gap-4 lg:grid-cols-3">
+        <CategorySection title="Einnahmen" categories={income} onEdit={setEdit} />
+        <CategorySection title="Ausgaben – wiederkehrend" categories={fixed} onEdit={setEdit} />
+        <CategorySection title="Ausgaben – variabel" categories={variable} onEdit={setEdit} />
+      </div>
+      <CategoryFormDialog open={createOpen} onOpenChange={setCreateOpen} />
+      <CategoryFormDialog
+        open={!!edit}
+        onOpenChange={(o) => !o && setEdit(null)}
+        category={edit ?? undefined}
+      />
+    </div>
+  );
+}