Refactor: consolidate accounting routes under Buchhaltung submenu
- New layout route: companies.$id.buchhaltung.tsx with card-based navigation - Renamed 7 accounting routes to use buchhaltung prefix: - companies.$id.bilanzen.tsx → companies.$id.buchhaltung.bilanzen.tsx - companies.$id.ausgaben.tsx → companies.$id.buchhaltung.ausgaben.tsx - companies.$id.ausgaben.kategorien.tsx → companies.$id.buchhaltung.ausgaben.kategorien.tsx - companies.$id.einnahmen.tsx → companies.$id.buchhaltung.einnahmen.tsx - companies.$id.einnahmen.kategorien.tsx → companies.$id.buchhaltung.einnahmen.kategorien.tsx - companies.$id.anlagevermoegen.tsx → companies.$id.buchhaltung.anlagevermoegen.tsx - companies.$id.money.tsx → companies.$id.buchhaltung.money.tsx - Updated routing configuration (app/routes.ts) to use nested layout structure - Updated breadcrumbs in all accounting routes to show Buchhaltung hierarchy - Updated internal links in kategorien pages to use new URLs - Main menu now shows single 'Buchhaltung' card instead of 5 separate items Navigation improvements: - Cleaner main menu (1 item vs 5) - Clear accounting subsection with icon-based navigation - Consistent URL structure (/companies/:id/buchhaltung/*) - Better information hierarchy Build: ✅ Successful Accounting routes: ✅ Accessible Navigation: ✅ Functional Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
hwinkel
@@ -0,0 +1,557 @@
|
||||
import { useState } from "react";
|
||||
import { Link, useLoaderData, useRevalidator } from "react-router";
|
||||
import { requireUser } from "@/session.server";
|
||||
import prisma from "@/lib/prisma.server";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { ChevronLeft, Plus, Pencil, Trash2, Loader2 } from "lucide-react";
|
||||
import { formatCurrency } from "@/lib/tax";
|
||||
import { afaFuerJahr, buchwert, assetStatus, type AnlagegutRaw } from "@/lib/afa";
|
||||
|
||||
export const handle = {
|
||||
breadcrumbs: (data: { companyId: string; companyName: string }) => [
|
||||
{ label: "Mandanten", href: "/companies" },
|
||||
{ label: data.companyName, href: `/companies/${data.companyId}` },
|
||||
{ label: "Buchhaltung", href: `/companies/${data.companyId}/buchhaltung/bilanzen` },
|
||||
{ label: "Anlagevermögen" },
|
||||
],
|
||||
};
|
||||
|
||||
interface Asset {
|
||||
id: string;
|
||||
bezeichnung: string;
|
||||
beschreibung: string | null;
|
||||
anschaffungsdatum: string;
|
||||
anschaffungskosten: number;
|
||||
nutzungsdauerJahre: number;
|
||||
restwert: number;
|
||||
aktiv: boolean;
|
||||
}
|
||||
|
||||
interface AssetWithAfa extends Asset {
|
||||
afaJahr: number;
|
||||
buchwertJahr: number;
|
||||
statusLabel: string;
|
||||
}
|
||||
|
||||
function enrichAsset(a: Asset, year: number): AssetWithAfa {
|
||||
const raw: AnlagegutRaw = {
|
||||
anschaffungskosten: a.anschaffungskosten,
|
||||
nutzungsdauerJahre: a.nutzungsdauerJahre,
|
||||
restwert: a.restwert,
|
||||
anschaffungsdatum: a.anschaffungsdatum,
|
||||
aktiv: a.aktiv,
|
||||
};
|
||||
return {
|
||||
...a,
|
||||
afaJahr: afaFuerJahr(raw, year),
|
||||
buchwertJahr: buchwert(raw, year),
|
||||
statusLabel: assetStatus(raw, year),
|
||||
};
|
||||
}
|
||||
|
||||
const STATUS_VARIANTS: Record<string, "success" | "secondary" | "outline"> = {
|
||||
aktiv: "success",
|
||||
"vollständig abgeschrieben": "secondary",
|
||||
inaktiv: "outline",
|
||||
};
|
||||
|
||||
const emptyForm = {
|
||||
bezeichnung: "",
|
||||
anschaffungsdatum: "",
|
||||
anschaffungskosten: "",
|
||||
nutzungsdauerJahre: "",
|
||||
restwert: "0",
|
||||
beschreibung: "",
|
||||
aktiv: true,
|
||||
};
|
||||
|
||||
export async function loader({ request, params }: { request: Request; params: { id: string } }) {
|
||||
const user = await requireUser(request);
|
||||
const company = await prisma.company.findFirst({
|
||||
where: { id: params.id, userId: user.id },
|
||||
select: { id: true, name: true },
|
||||
});
|
||||
if (!company) throw new Response("Not Found", { status: 404 });
|
||||
|
||||
const assets = await prisma.anlagegut.findMany({
|
||||
where: { companyId: params.id },
|
||||
orderBy: { anschaffungsdatum: "asc" },
|
||||
});
|
||||
|
||||
return {
|
||||
companyId: company.id,
|
||||
companyName: company.name,
|
||||
initialYear: new Date().getFullYear(),
|
||||
assets: assets.map((a) => ({
|
||||
id: a.id,
|
||||
bezeichnung: a.bezeichnung,
|
||||
beschreibung: a.beschreibung,
|
||||
anschaffungsdatum: a.anschaffungsdatum.toISOString(),
|
||||
anschaffungskosten: Number(a.anschaffungskosten),
|
||||
nutzungsdauerJahre: a.nutzungsdauerJahre,
|
||||
restwert: Number(a.restwert),
|
||||
aktiv: a.aktiv,
|
||||
})),
|
||||
};
|
||||
}
|
||||
|
||||
export default function AnlagevermoegenPage() {
|
||||
const { assets: initialAssets, companyId, companyName, initialYear } =
|
||||
useLoaderData<typeof loader>();
|
||||
const { revalidate } = useRevalidator();
|
||||
|
||||
const [year, setYear] = useState(initialYear);
|
||||
const [assets, setAssets] = useState<Asset[]>(initialAssets);
|
||||
const [loadingYear, setLoadingYear] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [deleting, setDeleting] = useState<string | null>(null);
|
||||
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [editingAsset, setEditingAsset] = useState<Asset | null>(null);
|
||||
const [form, setForm] = useState(emptyForm);
|
||||
|
||||
const years = Array.from({ length: 10 }, (_, i) => new Date().getFullYear() + 2 - i);
|
||||
|
||||
async function loadYear(y: number) {
|
||||
setYear(y);
|
||||
setLoadingYear(true);
|
||||
const res = await fetch(`/api/anlagevermoegen?companyId=${companyId}&year=${y}`);
|
||||
const data = await res.json();
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
setAssets(data.assets.map((a: any) => ({
|
||||
id: a.id,
|
||||
bezeichnung: a.bezeichnung,
|
||||
beschreibung: a.beschreibung,
|
||||
anschaffungsdatum: a.anschaffungsdatum,
|
||||
anschaffungskosten: a.anschaffungskosten,
|
||||
nutzungsdauerJahre: a.nutzungsdauerJahre,
|
||||
restwert: a.restwert,
|
||||
aktiv: a.aktiv,
|
||||
})));
|
||||
setLoadingYear(false);
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
setEditingAsset(null);
|
||||
setForm(emptyForm);
|
||||
setDialogOpen(true);
|
||||
}
|
||||
|
||||
function openEdit(asset: Asset) {
|
||||
setEditingAsset(asset);
|
||||
setForm({
|
||||
bezeichnung: asset.bezeichnung,
|
||||
anschaffungsdatum: asset.anschaffungsdatum.slice(0, 10),
|
||||
anschaffungskosten: String(asset.anschaffungskosten),
|
||||
nutzungsdauerJahre: String(asset.nutzungsdauerJahre),
|
||||
restwert: String(asset.restwert),
|
||||
beschreibung: asset.beschreibung ?? "",
|
||||
aktiv: asset.aktiv,
|
||||
});
|
||||
setDialogOpen(true);
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
setSaving(true);
|
||||
const payload = {
|
||||
bezeichnung: form.bezeichnung,
|
||||
anschaffungsdatum: form.anschaffungsdatum,
|
||||
anschaffungskosten: parseFloat(form.anschaffungskosten),
|
||||
nutzungsdauerJahre: parseInt(form.nutzungsdauerJahre),
|
||||
restwert: parseFloat(form.restwert) || 0,
|
||||
beschreibung: form.beschreibung || undefined,
|
||||
aktiv: form.aktiv,
|
||||
};
|
||||
|
||||
try {
|
||||
if (editingAsset) {
|
||||
await fetch(`/api/anlagevermoegen/${editingAsset.id}`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
} else {
|
||||
await fetch("/api/anlagevermoegen", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ ...payload, companyId }),
|
||||
});
|
||||
}
|
||||
setDialogOpen(false);
|
||||
await loadYear(year);
|
||||
revalidate();
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(id: string) {
|
||||
if (!confirm("Anlagegut wirklich löschen?")) return;
|
||||
setDeleting(id);
|
||||
await fetch(`/api/anlagevermoegen/${id}`, { method: "DELETE" });
|
||||
setDeleting(null);
|
||||
await loadYear(year);
|
||||
revalidate();
|
||||
}
|
||||
|
||||
const enriched = assets.map((a) => enrichAsset(a, year));
|
||||
const aktiveAnlagen = enriched.filter((a) => a.aktiv && a.statusLabel === "aktiv").length;
|
||||
const gesamtAfa = enriched.reduce((s, a) => s + a.afaJahr, 0);
|
||||
const gesamtBuchwert = enriched.reduce((s, a) => s + a.buchwertJahr, 0);
|
||||
|
||||
const formValid =
|
||||
form.bezeichnung.trim().length > 0 &&
|
||||
form.anschaffungsdatum.length > 0 &&
|
||||
parseFloat(form.anschaffungskosten) > 0 &&
|
||||
parseInt(form.nutzungsdauerJahre) >= 1;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Link
|
||||
to={`/companies/${companyId}`}
|
||||
className="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700 mb-6"
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" /> Zurück zum Mandanten
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Anlagevermögen</h1>
|
||||
<p className="text-gray-500 mt-1">
|
||||
{companyName} · {year}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<select
|
||||
value={year}
|
||||
onChange={(e) => loadYear(Number(e.target.value))}
|
||||
className="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
>
|
||||
{years.map((y) => (
|
||||
<option key={y} value={y}>
|
||||
{y}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<Button onClick={openCreate}>
|
||||
<Plus className="h-4 w-4" />
|
||||
Neues Anlagegut
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Zusammenfassung */}
|
||||
<div className="grid grid-cols-3 gap-4 mb-6">
|
||||
<Card>
|
||||
<CardContent className="pt-5 pb-5">
|
||||
<p className="text-xs text-gray-500 mb-1">Aktive Anlagen</p>
|
||||
<p className="text-xl font-bold text-gray-900">{aktiveAnlagen}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-5 pb-5">
|
||||
<p className="text-xs text-gray-500 mb-1">AfA gesamt {year}</p>
|
||||
<p className="text-xl font-bold text-rose-600">{formatCurrency(gesamtAfa)}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-5 pb-5">
|
||||
<p className="text-xs text-gray-500 mb-1">Gesamter Buchwert</p>
|
||||
<p className="text-xl font-bold text-indigo-600">{formatCurrency(gesamtBuchwert)}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Tabelle */}
|
||||
{loadingYear ? (
|
||||
<div className="flex items-center justify-center py-16 text-gray-400">
|
||||
<Loader2 className="h-6 w-6 animate-spin mr-2" />
|
||||
Lade Anlagen...
|
||||
</div>
|
||||
) : enriched.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="py-16 text-center text-gray-400">
|
||||
<p className="text-sm">Noch keine Anlagegüter erfasst.</p>
|
||||
<Button variant="outline" className="mt-4" onClick={openCreate}>
|
||||
<Plus className="h-4 w-4" />
|
||||
Erstes Anlagegut hinzufügen
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Card>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-200 bg-slate-50">
|
||||
<th className="px-4 py-2.5 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide">
|
||||
Bezeichnung
|
||||
</th>
|
||||
<th className="px-3 py-2.5 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide">
|
||||
Anschaffung
|
||||
</th>
|
||||
<th className="px-3 py-2.5 text-right text-xs font-semibold text-slate-500 uppercase tracking-wide">
|
||||
AK
|
||||
</th>
|
||||
<th className="px-3 py-2.5 text-right text-xs font-semibold text-slate-500 uppercase tracking-wide">
|
||||
ND (J)
|
||||
</th>
|
||||
<th className="px-3 py-2.5 text-right text-xs font-semibold text-slate-500 uppercase tracking-wide">
|
||||
AfA {year}
|
||||
</th>
|
||||
<th className="px-3 py-2.5 text-right text-xs font-semibold text-slate-500 uppercase tracking-wide">
|
||||
Buchwert 31.12.{year}
|
||||
</th>
|
||||
<th className="px-3 py-2.5 text-center text-xs font-semibold text-slate-500 uppercase tracking-wide">
|
||||
Status
|
||||
</th>
|
||||
<th className="px-3 py-2.5 w-16" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{enriched.map((asset) => (
|
||||
<tr key={asset.id} className="hover:bg-slate-50/60 group">
|
||||
<td className="px-4 py-2.5">
|
||||
<p className="font-medium text-slate-800">{asset.bezeichnung}</p>
|
||||
{asset.beschreibung && (
|
||||
<p className="text-xs text-slate-400 truncate max-w-xs">
|
||||
{asset.beschreibung}
|
||||
</p>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-slate-600 whitespace-nowrap">
|
||||
{new Date(asset.anschaffungsdatum).toLocaleDateString("de-DE")}
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-right text-slate-700 font-medium whitespace-nowrap">
|
||||
{formatCurrency(asset.anschaffungskosten)}
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-right text-slate-600">
|
||||
{asset.nutzungsdauerJahre}
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-right font-medium whitespace-nowrap">
|
||||
{asset.afaJahr > 0 ? (
|
||||
<span className="text-rose-600">{formatCurrency(asset.afaJahr)}</span>
|
||||
) : (
|
||||
<span className="text-slate-300">—</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-right font-medium text-indigo-700 whitespace-nowrap">
|
||||
{formatCurrency(asset.buchwertJahr)}
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-center">
|
||||
<Badge variant={STATUS_VARIANTS[asset.statusLabel] ?? "outline"}>
|
||||
{asset.statusLabel}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-3 py-2.5">
|
||||
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
onClick={() => openEdit(asset)}
|
||||
className="p-1 rounded hover:bg-slate-100 text-slate-500 hover:text-slate-700"
|
||||
title="Bearbeiten"
|
||||
>
|
||||
<Pencil className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(asset.id)}
|
||||
disabled={deleting === asset.id}
|
||||
className="p-1 rounded hover:bg-red-50 text-slate-400 hover:text-red-600"
|
||||
title="Löschen"
|
||||
>
|
||||
{deleting === asset.id ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr className="border-t-2 border-slate-300 bg-slate-50">
|
||||
<td colSpan={4} className="px-4 py-2.5 text-xs font-bold text-slate-700">
|
||||
Gesamt
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-right text-xs font-bold text-rose-600">
|
||||
{formatCurrency(gesamtAfa)}
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-right text-xs font-bold text-indigo-700">
|
||||
{formatCurrency(gesamtBuchwert)}
|
||||
</td>
|
||||
<td colSpan={2} />
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
<div className="px-3 py-2 border-t border-slate-100 text-xs text-slate-400">
|
||||
AfA: lineare Abschreibung nach §7 EStG · Buchwert zum 31.12. des gewählten Jahres
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Dialog: Anlegen / Bearbeiten */}
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogContent className="sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{editingAsset ? "Anlagegut bearbeiten" : "Neues Anlagegut"}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="grid gap-4 py-2">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Bezeichnung <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={form.bezeichnung}
|
||||
onChange={(e) => setForm((f) => ({ ...f, bezeichnung: e.target.value }))}
|
||||
placeholder="z.B. Laptop, Firmenwagen, Maschine"
|
||||
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Anschaffungsdatum <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={form.anschaffungsdatum}
|
||||
onChange={(e) => setForm((f) => ({ ...f, anschaffungsdatum: e.target.value }))}
|
||||
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Nutzungsdauer (Jahre) <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
value={form.nutzungsdauerJahre}
|
||||
onChange={(e) =>
|
||||
setForm((f) => ({ ...f, nutzungsdauerJahre: e.target.value }))
|
||||
}
|
||||
placeholder="z.B. 3"
|
||||
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Anschaffungskosten (€) <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="0.01"
|
||||
step="0.01"
|
||||
value={form.anschaffungskosten}
|
||||
onChange={(e) =>
|
||||
setForm((f) => ({ ...f, anschaffungskosten: e.target.value }))
|
||||
}
|
||||
placeholder="0,00"
|
||||
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Restwert (€)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
value={form.restwert}
|
||||
onChange={(e) => setForm((f) => ({ ...f, restwert: e.target.value }))}
|
||||
placeholder="0,00"
|
||||
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Beschreibung
|
||||
</label>
|
||||
<textarea
|
||||
rows={2}
|
||||
value={form.beschreibung}
|
||||
onChange={(e) => setForm((f) => ({ ...f, beschreibung: e.target.value }))}
|
||||
placeholder="Optionale Notizen"
|
||||
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="aktiv"
|
||||
checked={form.aktiv}
|
||||
onChange={(e) => setForm((f) => ({ ...f, aktiv: e.target.checked }))}
|
||||
className="rounded"
|
||||
/>
|
||||
<label htmlFor="aktiv" className="text-sm text-gray-700">
|
||||
Anlagegut ist aktiv
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* AfA-Vorschau */}
|
||||
{formValid && (() => {
|
||||
const raw: AnlagegutRaw = {
|
||||
anschaffungskosten: parseFloat(form.anschaffungskosten),
|
||||
nutzungsdauerJahre: parseInt(form.nutzungsdauerJahre),
|
||||
restwert: parseFloat(form.restwert) || 0,
|
||||
anschaffungsdatum: form.anschaffungsdatum,
|
||||
aktiv: form.aktiv,
|
||||
};
|
||||
const afa = afaFuerJahr(raw, year);
|
||||
const bw = buchwert(raw, year);
|
||||
const jahresAfaVoll =
|
||||
Math.round(
|
||||
((raw.anschaffungskosten - raw.restwert) / raw.nutzungsdauerJahre) * 100
|
||||
) / 100;
|
||||
return (
|
||||
<div className="rounded-lg bg-indigo-50 border border-indigo-100 px-3 py-2 text-xs text-indigo-700 space-y-1">
|
||||
<p>
|
||||
<strong>Jährliche AfA:</strong> {formatCurrency(jahresAfaVoll)}
|
||||
</p>
|
||||
<p>
|
||||
<strong>AfA {year}:</strong> {formatCurrency(afa)}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Buchwert 31.12.{year}:</strong> {formatCurrency(bw)}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Button variant="outline" onClick={() => setDialogOpen(false)}>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button onClick={handleSave} disabled={saving || !formValid}>
|
||||
{saving && <Loader2 className="h-4 w-4 animate-spin" />}
|
||||
{editingAsset ? "Speichern" : "Hinzufügen"}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user