ADD: added einnahmen, ausgaben and bilanz
This commit is contained in:
hwinkel
@@ -0,0 +1,366 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Link, useLoaderData, useRevalidator } from "react-router";
|
||||
import { requireUser } from "@/session.server";
|
||||
import prisma from "@/lib/prisma.server";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
||||
import { ChevronLeft, Plus, Edit, Trash2, Layers } from "lucide-react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import { formatCurrency, formatDate } from "@/lib/tax";
|
||||
|
||||
export const handle = {
|
||||
breadcrumbs: (data: { companyId: string; companyName: string }) => [
|
||||
{ label: "Mandanten", href: "/companies" },
|
||||
{ label: data.companyName, href: `/companies/${data.companyId}` },
|
||||
{ label: "Anlagevermögen" },
|
||||
],
|
||||
};
|
||||
|
||||
const schema = z.object({
|
||||
bezeichnung: z.string().min(1, "Pflichtfeld"),
|
||||
anschaffungsdatum: z.string().min(1, "Pflichtfeld"),
|
||||
anschaffungskosten: z.coerce.number({ invalid_type_error: "Ungültiger Betrag" }).positive("Betrag muss größer 0 sein"),
|
||||
nutzungsdauerJahre: z.coerce.number().int().min(1, "Mindestens 1 Jahr"),
|
||||
restwert: z.coerce.number().min(0).default(0),
|
||||
beschreibung: z.string().optional(),
|
||||
aktiv: z.boolean().default(true),
|
||||
});
|
||||
type FormData = z.infer<typeof schema>;
|
||||
|
||||
interface Asset {
|
||||
id: string;
|
||||
bezeichnung: string;
|
||||
beschreibung: string | null;
|
||||
anschaffungsdatum: string;
|
||||
anschaffungskosten: number;
|
||||
nutzungsdauerJahre: number;
|
||||
restwert: number;
|
||||
aktiv: boolean;
|
||||
afaJahr: number;
|
||||
buchwert: number;
|
||||
status: "aktiv" | "vollständig abgeschrieben" | "inaktiv";
|
||||
}
|
||||
|
||||
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 });
|
||||
return { companyId: company.id, companyName: company.name };
|
||||
}
|
||||
|
||||
function AnlagegutForm({
|
||||
defaultValues,
|
||||
onSubmit,
|
||||
submitLabel,
|
||||
}: {
|
||||
defaultValues?: Partial<FormData>;
|
||||
onSubmit: (d: FormData) => Promise<void>;
|
||||
submitLabel: string;
|
||||
}) {
|
||||
const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm<FormData>({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: {
|
||||
aktiv: true,
|
||||
restwert: 0,
|
||||
anschaffungsdatum: new Date().toISOString().slice(0, 10),
|
||||
...defaultValues,
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
||||
<div className="space-y-1.5">
|
||||
<Label>Bezeichnung *</Label>
|
||||
<Input {...register("bezeichnung")} placeholder="z.B. Laptop, Firmenwagen, Maschine" />
|
||||
{errors.bezeichnung && <p className="text-xs text-red-600">{errors.bezeichnung.message}</p>}
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<Label>Anschaffungsdatum *</Label>
|
||||
<Input {...register("anschaffungsdatum")} type="date" />
|
||||
{errors.anschaffungsdatum && <p className="text-xs text-red-600">{errors.anschaffungsdatum.message}</p>}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Nutzungsdauer (Jahre) *</Label>
|
||||
<Input {...register("nutzungsdauerJahre")} type="number" min="1" step="1" placeholder="z.B. 5" />
|
||||
{errors.nutzungsdauerJahre && <p className="text-xs text-red-600">{errors.nutzungsdauerJahre.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<Label>Anschaffungskosten (€) *</Label>
|
||||
<Input {...register("anschaffungskosten")} type="number" step="0.01" placeholder="0.00" />
|
||||
{errors.anschaffungskosten && <p className="text-xs text-red-600">{errors.anschaffungskosten.message}</p>}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Restwert (€)</Label>
|
||||
<Input {...register("restwert")} type="number" step="0.01" min="0" placeholder="0.00" />
|
||||
{errors.restwert && <p className="text-xs text-red-600">{errors.restwert.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Beschreibung</Label>
|
||||
<Textarea {...register("beschreibung")} placeholder="Optionale Anmerkung" rows={2} />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input {...register("aktiv")} type="checkbox" id="aktiv" className="rounded border-gray-300" />
|
||||
<Label htmlFor="aktiv">Aktiv (noch im Betrieb)</Label>
|
||||
</div>
|
||||
<div className="flex justify-end pt-2">
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? "Speichern..." : submitLabel}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
const statusConfig = {
|
||||
"aktiv": { label: "aktiv", className: "bg-green-100 text-green-700" },
|
||||
"vollständig abgeschrieben": { label: "abgeschrieben", className: "bg-gray-100 text-gray-500" },
|
||||
"inaktiv": { label: "inaktiv", className: "bg-amber-100 text-amber-700" },
|
||||
};
|
||||
|
||||
export default function AnlagevermoegenPage() {
|
||||
const { companyId, companyName } = useLoaderData<typeof loader>();
|
||||
const { revalidate } = useRevalidator();
|
||||
const [year, setYear] = useState(new Date().getFullYear());
|
||||
const [assets, setAssets] = useState<Asset[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [editAsset, setEditAsset] = useState<Asset | null>(null);
|
||||
|
||||
const years = Array.from({ length: 10 }, (_, i) => new Date().getFullYear() - i);
|
||||
|
||||
async function fetchAssets(y = year) {
|
||||
setLoading(true);
|
||||
const res = await fetch(`/api/anlagevermoegen?companyId=${companyId}&year=${y}`);
|
||||
const data = await res.json();
|
||||
setAssets(data.assets ?? []);
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
useEffect(() => { fetchAssets(); }, [companyId, year]);
|
||||
|
||||
async function handleCreate(data: FormData) {
|
||||
await fetch("/api/anlagevermoegen", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ ...data, companyId }),
|
||||
});
|
||||
setOpen(false);
|
||||
fetchAssets();
|
||||
revalidate();
|
||||
}
|
||||
|
||||
async function handleEdit(data: FormData) {
|
||||
if (!editAsset) return;
|
||||
await fetch(`/api/anlagevermoegen/${editAsset.id}`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
setEditAsset(null);
|
||||
fetchAssets();
|
||||
revalidate();
|
||||
}
|
||||
|
||||
async function handleDelete(id: string) {
|
||||
if (!confirm("Anlagegut wirklich löschen?")) return;
|
||||
await fetch(`/api/anlagevermoegen/${id}`, { method: "DELETE" });
|
||||
fetchAssets();
|
||||
revalidate();
|
||||
}
|
||||
|
||||
const totalAK = assets.reduce((s, a) => s + a.anschaffungskosten, 0);
|
||||
const totalBW = assets.filter((a) => a.aktiv).reduce((s, a) => s + a.buchwert, 0);
|
||||
const totalAfa = assets.reduce((s, a) => s + a.afaJahr, 0);
|
||||
|
||||
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} · Lineare Abschreibung (AfA)</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<select
|
||||
value={year}
|
||||
onChange={(e) => setYear(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-amber-500"
|
||||
>
|
||||
{years.map((y) => <option key={y} value={y}>{y}</option>)}
|
||||
</select>
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button className="bg-amber-600 hover:bg-amber-700">
|
||||
<Plus className="h-4 w-4" /> Anlagegut anlegen
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Neues Anlagegut</DialogTitle>
|
||||
</DialogHeader>
|
||||
<AnlagegutForm onSubmit={handleCreate} submitLabel="Anlegen" />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</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">Anschaffungskosten gesamt</p>
|
||||
<p className="text-xl font-bold text-gray-900">{formatCurrency(totalAK)}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-5 pb-5">
|
||||
<p className="text-xs text-gray-500 mb-1">Buchwert gesamt ({year})</p>
|
||||
<p className="text-xl font-bold text-amber-600">{formatCurrency(totalBW)}</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-gray-900">{formatCurrency(totalAfa)}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Edit Dialog */}
|
||||
<Dialog open={!!editAsset} onOpenChange={(o) => !o && setEditAsset(null)}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Anlagegut bearbeiten</DialogTitle>
|
||||
</DialogHeader>
|
||||
{editAsset && (
|
||||
<AnlagegutForm
|
||||
defaultValues={{
|
||||
bezeichnung: editAsset.bezeichnung,
|
||||
anschaffungsdatum: editAsset.anschaffungsdatum.slice(0, 10),
|
||||
anschaffungskosten: editAsset.anschaffungskosten,
|
||||
nutzungsdauerJahre: editAsset.nutzungsdauerJahre,
|
||||
restwert: editAsset.restwert,
|
||||
beschreibung: editAsset.beschreibung ?? undefined,
|
||||
aktiv: editAsset.aktiv,
|
||||
}}
|
||||
onSubmit={handleEdit}
|
||||
submitLabel="Speichern"
|
||||
/>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{loading ? (
|
||||
<div className="text-center text-gray-500 py-12">Lade Anlagevermögen...</div>
|
||||
) : assets.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="py-12 text-center">
|
||||
<Layers className="h-10 w-10 text-gray-300 mx-auto mb-3" />
|
||||
<p className="text-gray-500 text-sm">Noch keine Anlagegüter erfasst</p>
|
||||
<Button variant="outline" size="sm" className="mt-4" onClick={() => setOpen(true)}>
|
||||
<Plus className="h-4 w-4" /> Erstes Anlagegut anlegen
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Card>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-100 text-xs font-medium text-slate-500 uppercase tracking-wide">
|
||||
<th className="px-4 py-3 text-left">Bezeichnung</th>
|
||||
<th className="px-4 py-3 text-left">Anschaffung</th>
|
||||
<th className="px-4 py-3 text-right">Anschaffungskosten</th>
|
||||
<th className="px-4 py-3 text-right">Nutzungsdauer</th>
|
||||
<th className="px-4 py-3 text-right">AfA {year}</th>
|
||||
<th className="px-4 py-3 text-right">Buchwert {year}</th>
|
||||
<th className="px-4 py-3 text-center">Status</th>
|
||||
<th className="px-4 py-3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{assets.map((asset) => {
|
||||
const s = statusConfig[asset.status];
|
||||
return (
|
||||
<tr key={asset.id} className="hover:bg-slate-50 transition-colors">
|
||||
<td className="px-4 py-3">
|
||||
<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-4 py-3 text-slate-600 whitespace-nowrap">
|
||||
{formatDate(asset.anschaffungsdatum)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right text-slate-800">
|
||||
{formatCurrency(asset.anschaffungskosten)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right text-slate-600">
|
||||
{asset.nutzungsdauerJahre} J.
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right text-slate-800">
|
||||
{asset.afaJahr > 0 ? formatCurrency(asset.afaJahr) : "—"}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right font-medium text-amber-700">
|
||||
{formatCurrency(asset.buchwert)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
<span className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${s.className}`}>
|
||||
{s.label}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex justify-end gap-1">
|
||||
<Button variant="ghost" size="icon" onClick={() => setEditAsset(asset)}>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="text-red-500 hover:text-red-700 hover:bg-red-50"
|
||||
onClick={() => handleDelete(asset.id)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr className="border-t-2 border-slate-200 bg-slate-50">
|
||||
<td colSpan={2} className="px-4 py-3 font-semibold text-slate-700">Gesamt</td>
|
||||
<td className="px-4 py-3 text-right font-bold text-slate-900">{formatCurrency(totalAK)}</td>
|
||||
<td></td>
|
||||
<td className="px-4 py-3 text-right font-bold text-slate-900">{formatCurrency(totalAfa)}</td>
|
||||
<td className="px-4 py-3 text-right font-bold text-amber-700">{formatCurrency(totalBW)}</td>
|
||||
<td colSpan={2}></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user