69 lines
2.5 KiB
TypeScript
69 lines
2.5 KiB
TypeScript
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>
|
||
);
|
||
}
|