initial commit
This commit is contained in:
Matthias
68
src/pages/CategoriesPage.tsx
Normal file
68
src/pages/CategoriesPage.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
140
src/pages/DashboardPage.tsx
Normal file
140
src/pages/DashboardPage.tsx
Normal file
@@ -0,0 +1,140 @@
|
||||
import { useQuery } from "convex/react";
|
||||
import { api } from "../../convex/_generated/api";
|
||||
import { useFilters } from "@/context/FilterContext";
|
||||
import { useAccountFilterId } from "@/components/layout/AccountFilter";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { MonthlyTrendChart } from "@/components/charts/MonthlyTrendChart";
|
||||
import { CategoryBreakdownChart, FixedVariableSplit } from "@/components/charts/CategoryBreakdownChart";
|
||||
import { amountClass, formatAmount, formatDate, pct } from "@/lib/format";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import type { Id } from "../../convex/_generated/dataModel";
|
||||
|
||||
function KpiCard({ title, value, className }: { title: string; value: string; className?: string }) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">{title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className={`text-2xl font-bold ${className ?? ""}`}>{value}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export function DashboardPage() {
|
||||
const { from, to, monthBasis } = useFilters();
|
||||
const accountId = useAccountFilterId();
|
||||
const categories = useQuery(api.categories.list);
|
||||
const summary = useQuery(api.dashboard.summary, { from, to, accountId, basis: monthBasis });
|
||||
|
||||
if (summary === undefined) {
|
||||
return (
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
{Array.from({ length: 8 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-24" />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const categoryMap = new Map(categories?.map((c) => [c._id, c]));
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
|
||||
<KpiCard title="Einnahmen" value={formatAmount(summary.income)} className={amountClass(summary.income)} />
|
||||
<KpiCard title="Ausgaben" value={formatAmount(summary.expenses)} className={amountClass(summary.expenses)} />
|
||||
<KpiCard title="Fixkosten" value={formatAmount(summary.fixedCosts)} className={amountClass(summary.fixedCosts)} />
|
||||
<KpiCard title="Variabel" value={formatAmount(summary.variableCosts)} className={amountClass(summary.variableCosts)} />
|
||||
<KpiCard title="Saldo" value={formatAmount(summary.balance)} className={amountClass(summary.balance)} />
|
||||
<KpiCard
|
||||
title="Sparquote"
|
||||
value={summary.savingsRate === null ? "–" : pct.format(summary.savingsRate)}
|
||||
/>
|
||||
<KpiCard title="Monatliche Kreditrate" value={formatAmount(summary.totalLoanPayment)} />
|
||||
<KpiCard title="Restschuld gesamt" value={formatAmount(summary.totalRemainingDebt)} />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 xl:grid-cols-2">
|
||||
<MonthlyTrendChart data={summary.monthlyTrend} />
|
||||
<FixedVariableSplit fixed={summary.fixedCosts} variable={summary.variableCosts} />
|
||||
</div>
|
||||
|
||||
<CategoryBreakdownChart data={summary.categoryBreakdown} />
|
||||
|
||||
<div className="grid gap-4 xl:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Letzte Buchungen</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Datum</TableHead>
|
||||
<TableHead>Beschreibung</TableHead>
|
||||
<TableHead className="text-right">Betrag</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{summary.recentTransactions.map((tx) => {
|
||||
const cat = tx.categoryId ? categoryMap.get(tx.categoryId as Id<"categories">) : undefined;
|
||||
return (
|
||||
<TableRow key={tx._id}>
|
||||
<TableCell>{tx.isPending ? "offen" : formatDate(tx.bookingDate)}</TableCell>
|
||||
<TableCell>
|
||||
<div>{tx.description}</div>
|
||||
{cat && (
|
||||
<span className="text-xs" style={{ color: cat.color }}>
|
||||
{cat.name}
|
||||
</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className={`text-right font-medium ${amountClass(tx.amount)}`}>
|
||||
{formatAmount(tx.amount)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Laufende Kredite</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{summary.activeLoans.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">Keine aktiven Kredite</p>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Restschuld</TableHead>
|
||||
<TableHead>Rate</TableHead>
|
||||
<TableHead>Ende</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{summary.activeLoans.map((loan) => (
|
||||
<TableRow key={loan._id}>
|
||||
<TableCell>{loan.name}</TableCell>
|
||||
<TableCell>{formatAmount(loan.currentBalance)}</TableCell>
|
||||
<TableCell>{loan.monthlyPayment ? formatAmount(loan.monthlyPayment) : "–"}</TableCell>
|
||||
<TableCell>{formatDate(loan.payoffDate)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
20
src/pages/ImportPage.tsx
Normal file
20
src/pages/ImportPage.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { CsvImportWizard } from "@/components/import/CsvImportWizard";
|
||||
import { ComdirectSyncPanel } from "@/components/import/ComdirectSyncPanel";
|
||||
|
||||
export function ImportPage() {
|
||||
return (
|
||||
<Tabs defaultValue="csv">
|
||||
<TabsList>
|
||||
<TabsTrigger value="csv">CSV-Import</TabsTrigger>
|
||||
<TabsTrigger value="comdirect">comdirect-Sync</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="csv" className="mt-4">
|
||||
<CsvImportWizard />
|
||||
</TabsContent>
|
||||
<TabsContent value="comdirect" className="mt-4">
|
||||
<ComdirectSyncPanel />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
89
src/pages/LoansPage.tsx
Normal file
89
src/pages/LoansPage.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import { useMemo, 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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { formatAmount } from "@/lib/format";
|
||||
import { LoanFormDialog } from "@/components/loans/LoanFormDialog";
|
||||
import { AmortizationSchedule } from "@/components/loans/AmortizationSchedule";
|
||||
import { buildSchedule, currentBalanceFromSchedule } from "@convex-lib/amortization";
|
||||
|
||||
export function LoansPage() {
|
||||
const loans = useQuery(api.loans.list);
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
const [editLoan, setEditLoan] = useState<Doc<"loans"> | null>(null);
|
||||
const [viewLoan, setViewLoan] = useState<Doc<"loans"> | null>(null);
|
||||
|
||||
const enriched = useMemo(() => {
|
||||
return (loans ?? []).map((loan) => {
|
||||
const startDate = new Date(loan.startDate);
|
||||
const schedule = buildSchedule({
|
||||
principal: loan.principal,
|
||||
annualRate: loan.annualInterestRate,
|
||||
startDate,
|
||||
monthlyPayment: loan.monthlyPayment,
|
||||
termMonths: loan.termMonths,
|
||||
});
|
||||
const balance =
|
||||
loan.currentBalance ?? currentBalanceFromSchedule(schedule.schedule, startDate);
|
||||
return { loan, schedule, balance };
|
||||
});
|
||||
}, [loans]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Button onClick={() => setCreateOpen(true)}>Neuer Kredit</Button>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Kredite</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Gläubiger</TableHead>
|
||||
<TableHead>Summe</TableHead>
|
||||
<TableHead>Zins</TableHead>
|
||||
<TableHead>Rate</TableHead>
|
||||
<TableHead>Restschuld</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{enriched.map(({ loan, balance }) => (
|
||||
<TableRow key={loan._id}>
|
||||
<TableCell>{loan.name}</TableCell>
|
||||
<TableCell>{loan.lender ?? "–"}</TableCell>
|
||||
<TableCell>{formatAmount(loan.principal)}</TableCell>
|
||||
<TableCell>{loan.annualInterestRate.toFixed(2)} %</TableCell>
|
||||
<TableCell>{loan.monthlyPayment ? formatAmount(loan.monthlyPayment) : "–"}</TableCell>
|
||||
<TableCell>{formatAmount(balance)}</TableCell>
|
||||
<TableCell>{loan.status}</TableCell>
|
||||
<TableCell className="space-x-1">
|
||||
<Button size="sm" variant="outline" onClick={() => setEditLoan(loan)}>
|
||||
Bearbeiten
|
||||
</Button>
|
||||
<Button size="sm" variant="ghost" onClick={() => setViewLoan(loan)}>
|
||||
Plan
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{viewLoan && (
|
||||
<AmortizationSchedule loan={viewLoan} onClose={() => setViewLoan(null)} />
|
||||
)}
|
||||
|
||||
<LoanFormDialog open={createOpen} onOpenChange={setCreateOpen} />
|
||||
<LoanFormDialog open={!!editLoan} onOpenChange={(o) => !o && setEditLoan(null)} loan={editLoan ?? undefined} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
71
src/pages/LoginPage.tsx
Normal file
71
src/pages/LoginPage.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useAuthActions } from "@convex-dev/auth/react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export function LoginPage() {
|
||||
const { signIn } = useAuthActions();
|
||||
const navigate = useNavigate();
|
||||
const [mode, setMode] = useState<"signIn" | "signUp">("signIn");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
try {
|
||||
await signIn("password", { email, password, flow: mode });
|
||||
toast.success(mode === "signIn" ? "Willkommen zurück!" : "Konto erstellt");
|
||||
navigate("/");
|
||||
} catch (error) {
|
||||
toast.error(error instanceof Error ? error.message : "Anmeldung fehlgeschlagen");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-muted/30 p-4">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle>Finanz-Dashboard</CardTitle>
|
||||
<CardDescription>Persönliche Finanzverwaltung – Single-User Login</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">E-Mail</Label>
|
||||
<Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Passwort</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" className="w-full" disabled={loading}>
|
||||
{loading ? "Bitte warten…" : mode === "signIn" ? "Anmelden" : "Registrieren"}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
className="w-full"
|
||||
onClick={() => setMode(mode === "signIn" ? "signUp" : "signIn")}
|
||||
>
|
||||
{mode === "signIn" ? "Noch kein Konto? Registrieren" : "Bereits registriert? Anmelden"}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
178
src/pages/SettingsPage.tsx
Normal file
178
src/pages/SettingsPage.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useMutation, useQuery } from "convex/react";
|
||||
import { api } from "../../convex/_generated/api";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export function SettingsPage() {
|
||||
const settings = useQuery(api.settings.get);
|
||||
const accounts = useQuery(api.accounts.list);
|
||||
const updateSettings = useMutation(api.settings.update);
|
||||
const applySalaryShift = useMutation(api.transactions.applySalaryShift);
|
||||
const createAccount = useMutation(api.accounts.create);
|
||||
const updateAccount = useMutation(api.accounts.update);
|
||||
const removeAccount = useMutation(api.accounts.remove);
|
||||
|
||||
const [ownNamesText, setOwnNamesText] = useState("");
|
||||
const [salaryEnabled, setSalaryEnabled] = useState(true);
|
||||
const [dayThreshold, setDayThreshold] = useState(25);
|
||||
const [monthBasis, setMonthBasis] = useState<"effective" | "booking">("effective");
|
||||
|
||||
useEffect(() => {
|
||||
if (settings) {
|
||||
setOwnNamesText(settings.ownNames.join("\n"));
|
||||
setSalaryEnabled(settings.salaryShift.enabled);
|
||||
setDayThreshold(settings.salaryShift.dayThreshold);
|
||||
setMonthBasis(settings.monthBasis);
|
||||
}
|
||||
}, [settings]);
|
||||
|
||||
const saveSettings = async () => {
|
||||
await updateSettings({
|
||||
ownNames: ownNamesText.split("\n").map((s) => s.trim()).filter(Boolean),
|
||||
monthBasis,
|
||||
salaryShift: {
|
||||
enabled: salaryEnabled,
|
||||
categoryNames: settings?.salaryShift.categoryNames ?? ["Gehalt & Besoldung"],
|
||||
dayThreshold,
|
||||
},
|
||||
});
|
||||
toast.success("Einstellungen gespeichert");
|
||||
};
|
||||
|
||||
const [newAccount, setNewAccount] = useState({ name: "", type: "giro", openingBalance: 0 });
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-3xl space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Konten</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{accounts?.map((account) => (
|
||||
<div key={account._id} className="flex flex-wrap items-center gap-2 rounded-lg border p-3">
|
||||
<div className="flex-1">
|
||||
<div className="font-medium">{account.name}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{account.type} · {account.iban ?? "keine IBAN"}
|
||||
{account.externalId && " · comdirect verbunden"}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => updateAccount({ id: account._id, isArchived: !account.isArchived })}
|
||||
>
|
||||
{account.isArchived ? "Reaktivieren" : "Archivieren"}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
onClick={async () => {
|
||||
if (confirm("Konto löschen?")) await removeAccount({ id: account._id });
|
||||
}}
|
||||
>
|
||||
Löschen
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<Separator />
|
||||
<div className="grid gap-2 sm:grid-cols-3">
|
||||
<Input
|
||||
placeholder="Name"
|
||||
value={newAccount.name}
|
||||
onChange={(e) => setNewAccount({ ...newAccount, name: e.target.value })}
|
||||
/>
|
||||
<Select
|
||||
value={newAccount.type}
|
||||
onValueChange={(v) => setNewAccount({ ...newAccount, type: v })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{["giro", "tagesgeld", "kreditkarte", "bar", "sonstiges"].map((t) => (
|
||||
<SelectItem key={t} value={t}>
|
||||
{t}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
await createAccount({
|
||||
name: newAccount.name,
|
||||
type: newAccount.type,
|
||||
openingBalance: newAccount.openingBalance,
|
||||
});
|
||||
setNewAccount({ name: "", type: "giro", openingBalance: 0 });
|
||||
toast.success("Konto angelegt");
|
||||
}}
|
||||
>
|
||||
Konto hinzufügen
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Auto-Kategorisierung & Monatslogik</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<Label>Eigene Namen (für interne Überträge, je Zeile)</Label>
|
||||
<textarea
|
||||
className="mt-2 min-h-24 w-full rounded-md border p-2 text-sm"
|
||||
value={ownNamesText}
|
||||
onChange={(e) => setOwnNamesText(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label>Standard Monats-Basis</Label>
|
||||
<Select value={monthBasis} onValueChange={(v) => setMonthBasis(v as typeof monthBasis)}>
|
||||
<SelectTrigger className="mt-2 w-[220px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="effective">Zuordnungsmonat (effective)</SelectItem>
|
||||
<SelectItem value="booking">Buchungsdatum</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch checked={salaryEnabled} onCheckedChange={setSalaryEnabled} />
|
||||
<Label>Gehalts-Folgemonat-Regel aktiv</Label>
|
||||
</div>
|
||||
<div>
|
||||
<Label>Tag-Schwelle (ab Tag N → Folgemonat)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
className="mt-2 w-32"
|
||||
value={dayThreshold}
|
||||
onChange={(e) => setDayThreshold(Number(e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={saveSettings}>Speichern</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={async () => {
|
||||
const res = await applySalaryShift({});
|
||||
toast.success(`${res.updated} Transaktionen aktualisiert`);
|
||||
}}
|
||||
>
|
||||
Regel auf bestehende anwenden
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
242
src/pages/TransactionsPage.tsx
Normal file
242
src/pages/TransactionsPage.tsx
Normal file
@@ -0,0 +1,242 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import { useMutation, usePaginatedQuery, useQuery } from "convex/react";
|
||||
import {
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
useReactTable,
|
||||
type ColumnDef,
|
||||
} from "@tanstack/react-table";
|
||||
import { api } from "../../convex/_generated/api";
|
||||
import type { Doc, Id } from "../../convex/_generated/dataModel";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { amountClass, formatAmount, formatDate, formatMonth } from "@/lib/format";
|
||||
import { TransactionFormDialog } from "@/components/transactions/TransactionFormDialog";
|
||||
import { AssignMonthDialog } from "@/components/transactions/AssignMonthDialog";
|
||||
import { toast } from "sonner";
|
||||
|
||||
type Tx = Doc<"transactions">;
|
||||
|
||||
export function TransactionsPage() {
|
||||
const [search, setSearch] = useState("");
|
||||
const [type, setType] = useState<"all" | "einnahme" | "ausgabe">("all");
|
||||
const [pendingOnly, setPendingOnly] = useState(false);
|
||||
const [selected, setSelected] = useState<Id<"transactions">[]>([]);
|
||||
const [editTx, setEditTx] = useState<Tx | null>(null);
|
||||
const [assignTx, setAssignTx] = useState<Tx | null>(null);
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
|
||||
const categories = useQuery(api.categories.list);
|
||||
const accounts = useQuery(api.accounts.list);
|
||||
const removeTx = useMutation(api.transactions.remove);
|
||||
const updateTx = useMutation(api.transactions.update);
|
||||
const bulkCategory = useMutation(api.transactions.bulkSetCategory);
|
||||
|
||||
const { results, status, loadMore } = usePaginatedQuery(
|
||||
api.transactions.list,
|
||||
{
|
||||
search: search || undefined,
|
||||
type: type === "all" ? undefined : type,
|
||||
pendingOnly: pendingOnly || undefined,
|
||||
},
|
||||
{ initialNumItems: 50 },
|
||||
);
|
||||
|
||||
const categoryMap = useMemo(() => new Map(categories?.map((c) => [c._id, c])), [categories]);
|
||||
const accountMap = useMemo(() => new Map(accounts?.map((a) => [a._id, a.name])), [accounts]);
|
||||
|
||||
const columns = useMemo<ColumnDef<Tx>[]>(
|
||||
() => [
|
||||
{
|
||||
id: "select",
|
||||
header: () => null,
|
||||
cell: ({ row }) => (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selected.includes(row.original._id)}
|
||||
onChange={(e) => {
|
||||
setSelected((prev) =>
|
||||
e.target.checked
|
||||
? [...prev, row.original._id]
|
||||
: prev.filter((id) => id !== row.original._id),
|
||||
);
|
||||
}}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "bookingDate",
|
||||
header: "Datum",
|
||||
cell: ({ row }) =>
|
||||
row.original.isPending ? "offen" : formatDate(row.original.bookingDate),
|
||||
},
|
||||
{ accessorKey: "description", header: "Beschreibung" },
|
||||
{ accessorKey: "counterparty", header: "Gegenpartei" },
|
||||
{
|
||||
id: "account",
|
||||
header: "Konto",
|
||||
cell: ({ row }) =>
|
||||
row.original.accountId ? accountMap.get(row.original.accountId) ?? "–" : "–",
|
||||
},
|
||||
{
|
||||
id: "category",
|
||||
header: "Kategorie",
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<Select
|
||||
value={row.original.categoryId ?? "none"}
|
||||
onValueChange={async (v) => {
|
||||
if (v === "none") return;
|
||||
await updateTx({ id: row.original._id, categoryId: v as Id<"categories"> });
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="h-8 w-[180px]">
|
||||
<SelectValue placeholder="Kategorie" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{categories?.map((c) => (
|
||||
<SelectItem key={c._id} value={c._id}>
|
||||
<Badge style={{ backgroundColor: c.color, color: "#fff", border: "none" }}>
|
||||
{c.name}
|
||||
</Badge>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "amount",
|
||||
header: () => <span className="float-right">Betrag</span>,
|
||||
cell: ({ row }) => (
|
||||
<span className={`float-right font-medium ${amountClass(row.original.amount)}`}>
|
||||
{formatAmount(row.original.amount)}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "assigned",
|
||||
header: "Zuordnung",
|
||||
cell: ({ row }) => {
|
||||
const bookingMonth = row.original.bookingDate?.slice(0, 7);
|
||||
if (!row.original.assignedMonth || row.original.assignedMonth === bookingMonth) return null;
|
||||
return <Badge variant="outline">{formatMonth(row.original.assignedMonth)}</Badge>;
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
header: "",
|
||||
cell: ({ row }) => (
|
||||
<div className="flex gap-1">
|
||||
<Button size="sm" variant="ghost" onClick={() => setEditTx(row.original)}>
|
||||
Bearbeiten
|
||||
</Button>
|
||||
<Button size="sm" variant="ghost" onClick={() => setAssignTx(row.original)}>
|
||||
Monat…
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={async () => {
|
||||
if (confirm("Transaktion löschen?")) {
|
||||
await removeTx({ id: row.original._id });
|
||||
toast.success("Gelöscht");
|
||||
}
|
||||
}}
|
||||
>
|
||||
Löschen
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
],
|
||||
[categories, categoryMap, accountMap, selected, updateTx, removeTx],
|
||||
);
|
||||
|
||||
const table = useReactTable({ data: results ?? [], columns, getCoreRowModel: getCoreRowModel() });
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Input
|
||||
placeholder="Suche…"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="max-w-xs"
|
||||
/>
|
||||
<Select value={type} onValueChange={(v) => setType(v as typeof type)}>
|
||||
<SelectTrigger className="w-[140px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Alle Typen</SelectItem>
|
||||
<SelectItem value="einnahme">Einnahmen</SelectItem>
|
||||
<SelectItem value="ausgabe">Ausgaben</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input type="checkbox" checked={pendingOnly} onChange={(e) => setPendingOnly(e.target.checked)} />
|
||||
Nur offene
|
||||
</label>
|
||||
<Button onClick={() => setCreateOpen(true)}>Neu</Button>
|
||||
{selected.length > 0 && categories && (
|
||||
<Select
|
||||
onValueChange={async (categoryId) => {
|
||||
await bulkCategory({ ids: selected, categoryId: categoryId as Id<"categories"> });
|
||||
toast.success("Kategorie zugewiesen");
|
||||
setSelected([]);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-[200px]">
|
||||
<SelectValue placeholder="Bulk-Kategorie" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{categories.map((c) => (
|
||||
<SelectItem key={c._id} value={c._id}>
|
||||
{c.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
{table.getHeaderGroups().map((hg) => (
|
||||
<TableRow key={hg.id}>
|
||||
{hg.headers.map((h) => (
|
||||
<TableHead key={h.id}>{flexRender(h.column.columnDef.header, h.getContext())}</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{table.getRowModel().rows.map((row) => (
|
||||
<TableRow key={row.id}>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{status === "CanLoadMore" && (
|
||||
<Button variant="outline" onClick={() => loadMore(50)}>
|
||||
Mehr laden
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<TransactionFormDialog open={createOpen} onOpenChange={setCreateOpen} />
|
||||
<TransactionFormDialog open={!!editTx} onOpenChange={(o) => !o && setEditTx(null)} transaction={editTx ?? undefined} />
|
||||
<AssignMonthDialog transaction={assignTx} onClose={() => setAssignTx(null)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user