feat: add Einnahmen Kategorien management page with CRUD functionality
- Implemented a new route for managing Einnahmen Kategorien. - Added auto-seeding of default Einnahmen Kategorien if none exist. - Integrated category usage tracking to prevent deletion of in-use categories. - Enhanced Einnahmen page to link to the new Kategorien management. - Updated Prisma schema and seed script to include default categories. - Added a modal for detailed view of Einnahmen by category and month. - Refactored existing Einnahmen page to accommodate new category structure. - Introduced PostCSS configuration for Tailwind CSS support. - Created a new migration to update existing category labels in the database. - Added TypeScript configuration for stricter type checking. - Set up Vite configuration for improved development experience with React Router.
This commit is contained in:
hwinkel
@@ -1,4 +1,4 @@
|
||||
import { useState } from "react";
|
||||
import { useState, useMemo } from "react";
|
||||
import { Link, useLoaderData, useRevalidator } from "react-router";
|
||||
import { requireUser } from "@/session.server";
|
||||
import prisma from "@/lib/prisma.server";
|
||||
@@ -8,7 +8,7 @@ import { Badge } from "@/components/ui/badge";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import { ChevronLeft, Plus, Pencil, Trash2, Loader2, Banknote, Landmark } from "lucide-react";
|
||||
import { formatCurrency } from "@/lib/tax";
|
||||
import { EINNAHME_KATEGORIEN, EINNAHME_LABELS, type EinnahmeKategorieKey } from "@/lib/einnahmen";
|
||||
import { DEFAULT_EINNAHME_KATEGORIEN } from "@/lib/kategorie-defaults";
|
||||
|
||||
export const handle = {
|
||||
breadcrumbs: (data: { companyId: string; companyName: string }) => [
|
||||
@@ -18,6 +18,8 @@ export const handle = {
|
||||
],
|
||||
};
|
||||
|
||||
const MONAT_LABELS = ["Jan","Feb","Mär","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Dez"];
|
||||
|
||||
const STEUERSAETZE = [
|
||||
{ label: "Keine (0 %)", value: 0 },
|
||||
{ label: "7 %", value: 7 },
|
||||
@@ -26,7 +28,7 @@ const STEUERSAETZE = [
|
||||
|
||||
interface Einnahme {
|
||||
id: string;
|
||||
kategorie: EinnahmeKategorieKey;
|
||||
kategorie: string;
|
||||
betrag: number;
|
||||
steuersatz: number;
|
||||
zahlungsart: "KASSE" | "BANK";
|
||||
@@ -35,7 +37,7 @@ interface Einnahme {
|
||||
}
|
||||
|
||||
const emptyForm = {
|
||||
kategorie: "SONSTIGE_EINNAHMEN" as EinnahmeKategorieKey,
|
||||
kategorie: "",
|
||||
betrag: "",
|
||||
steuersatz: 0,
|
||||
zahlungsart: "BANK" as "KASSE" | "BANK",
|
||||
@@ -51,6 +53,27 @@ export async function loader({ request, params }: { request: Request; params: {
|
||||
});
|
||||
if (!company) throw new Response("Not Found", { status: 404 });
|
||||
|
||||
// Auto-seed Standardkategorien wenn noch keine vorhanden
|
||||
const katCount = await prisma.buchungKategorie.count({
|
||||
where: { companyId: params.id, typ: "EINNAHME" },
|
||||
});
|
||||
if (katCount === 0) {
|
||||
await prisma.buchungKategorie.createMany({
|
||||
data: DEFAULT_EINNAHME_KATEGORIEN.map((name) => ({
|
||||
companyId: params.id,
|
||||
name,
|
||||
typ: "EINNAHME",
|
||||
})),
|
||||
skipDuplicates: true,
|
||||
});
|
||||
}
|
||||
|
||||
const kategorien = await prisma.buchungKategorie.findMany({
|
||||
where: { companyId: params.id, typ: "EINNAHME" },
|
||||
orderBy: { name: "asc" },
|
||||
select: { name: true },
|
||||
});
|
||||
|
||||
const year = new Date().getFullYear();
|
||||
const einnahmen = await prisma.buchung.findMany({
|
||||
where: {
|
||||
@@ -66,11 +89,12 @@ export async function loader({ request, params }: { request: Request; params: {
|
||||
companyId: company.id,
|
||||
companyName: company.name,
|
||||
initialYear: year,
|
||||
kategorien: kategorien.map((k) => k.name),
|
||||
einnahmen: einnahmen.map((e) => ({
|
||||
id: e.id,
|
||||
kategorie: (e.kategorie || "SONSTIGE_EINNAHMEN") as EinnahmeKategorieKey,
|
||||
kategorie: e.kategorie ?? "",
|
||||
betrag: Number(e.amount),
|
||||
steuersatz: e.steuersatz || 0,
|
||||
steuersatz: (e.steuersatz as number | null) ?? 0,
|
||||
zahlungsart: (e.zahlungsart as "KASSE" | "BANK") || "BANK",
|
||||
datum: e.date.toISOString(),
|
||||
beschreibung: e.description,
|
||||
@@ -79,7 +103,7 @@ export async function loader({ request, params }: { request: Request; params: {
|
||||
}
|
||||
|
||||
export default function EinnahmenPage() {
|
||||
const { einnahmen: initialEinnahmen, companyId, companyName, initialYear } =
|
||||
const { einnahmen: initialEinnahmen, companyId, companyName, initialYear, kategorien } =
|
||||
useLoaderData<typeof loader>();
|
||||
const { revalidate } = useRevalidator();
|
||||
|
||||
@@ -92,6 +116,7 @@ export default function EinnahmenPage() {
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [form, setForm] = useState(emptyForm);
|
||||
const [cellModal, setCellModal] = useState<{ kategorie: string; monat: number } | null>(null);
|
||||
|
||||
const years = Array.from({ length: 5 }, (_, i) => new Date().getFullYear() - i);
|
||||
|
||||
@@ -99,14 +124,22 @@ export default function EinnahmenPage() {
|
||||
setYear(y);
|
||||
setLoadingYear(true);
|
||||
const res = await fetch(`/api/einnahmen?companyId=${companyId}&year=${y}`);
|
||||
const data: Einnahme[] = await res.json();
|
||||
setEinnahmen(data);
|
||||
const raw: Array<Record<string, unknown>> = await res.json();
|
||||
setEinnahmen(raw.map((e) => ({
|
||||
id: e.id as string,
|
||||
kategorie: (e.kategorie as string) ?? "",
|
||||
betrag: Number(e.amount),
|
||||
steuersatz: (e.steuersatz as number | null) ?? 0,
|
||||
zahlungsart: ((e.zahlungsart as string) || "BANK") as "KASSE" | "BANK",
|
||||
datum: e.date as string,
|
||||
beschreibung: (e.description as string | null) ?? null,
|
||||
})));
|
||||
setLoadingYear(false);
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
setEditingId(null);
|
||||
setForm({ ...emptyForm, datum: `${year}-01-01` });
|
||||
setForm({ ...emptyForm, datum: `${year}-01-01`, kategorie: kategorien[0] ?? "" });
|
||||
setDialogOpen(true);
|
||||
}
|
||||
|
||||
@@ -173,6 +206,25 @@ export default function EinnahmenPage() {
|
||||
return s + (rate > 0 ? Math.round((e.betrag / (1 + rate)) * rate * 100) / 100 : 0);
|
||||
}, 0);
|
||||
|
||||
const activeMonate = useMemo(() => {
|
||||
const set = new Set(einnahmen.map((e) => new Date(e.datum).getMonth()));
|
||||
return Array.from({ length: 12 }, (_, i) => i).filter((m) => set.has(m));
|
||||
}, [einnahmen]);
|
||||
|
||||
const pivot = useMemo(() => {
|
||||
const map = new Map<string, Map<number, Einnahme[]>>();
|
||||
for (const e of einnahmen) {
|
||||
if (!map.has(e.kategorie)) map.set(e.kategorie, new Map());
|
||||
const monat = new Date(e.datum).getMonth();
|
||||
const inner = map.get(e.kategorie)!;
|
||||
if (!inner.has(monat)) inner.set(monat, []);
|
||||
inner.get(monat)!.push(e);
|
||||
}
|
||||
return map;
|
||||
}, [einnahmen]);
|
||||
|
||||
const activeKategorien = useMemo(() => Array.from(pivot.keys()), [pivot]);
|
||||
|
||||
const formValid = form.kategorie && parseFloat(form.betrag) > 0 && form.datum.length > 0;
|
||||
|
||||
return (
|
||||
@@ -197,6 +249,12 @@ export default function EinnahmenPage() {
|
||||
>
|
||||
{years.map((y) => <option key={y} value={y}>{y}</option>)}
|
||||
</select>
|
||||
<Link
|
||||
to={`/companies/${companyId}/einnahmen/kategorien`}
|
||||
className="text-sm text-gray-500 hover:text-gray-700 underline-offset-2 hover:underline"
|
||||
>
|
||||
Kategorien verwalten
|
||||
</Link>
|
||||
<Button onClick={openCreate} className="bg-emerald-600 hover:bg-emerald-700">
|
||||
<Plus className="h-4 w-4" />
|
||||
Neue Einnahme
|
||||
@@ -238,7 +296,7 @@ export default function EinnahmenPage() {
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Liste */}
|
||||
{/* Pivottabelle */}
|
||||
{loadingYear ? (
|
||||
<div className="flex items-center justify-center py-16 text-gray-400">
|
||||
<Loader2 className="h-6 w-6 animate-spin mr-2" />
|
||||
@@ -260,77 +318,42 @@ export default function EinnahmenPage() {
|
||||
<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">Datum</th>
|
||||
<th className="px-3 py-2.5 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide">Kategorie</th>
|
||||
<th className="px-3 py-2.5 text-right text-xs font-semibold text-slate-500 uppercase tracking-wide">Brutto</th>
|
||||
<th className="px-3 py-2.5 text-center text-xs font-semibold text-slate-500 uppercase tracking-wide">MwSt.</th>
|
||||
<th className="px-3 py-2.5 text-right text-xs font-semibold text-slate-500 uppercase tracking-wide">Netto</th>
|
||||
<th className="px-3 py-2.5 text-center text-xs font-semibold text-slate-500 uppercase tracking-wide">Zahlung</th>
|
||||
<th className="px-3 py-2.5 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide">Notiz</th>
|
||||
<th className="px-3 py-2.5 w-16" />
|
||||
<th className="px-4 py-2.5 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide">Kategorie</th>
|
||||
{activeMonate.map((m) => (
|
||||
<th key={m} className="px-3 py-2.5 text-right text-xs font-semibold text-slate-500 uppercase tracking-wide">
|
||||
{MONAT_LABELS[m]}
|
||||
</th>
|
||||
))}
|
||||
<th className="px-3 py-2.5 text-right text-xs font-semibold text-slate-500 uppercase tracking-wide">Gesamt</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{einnahmen.map((e) => {
|
||||
const rate = e.steuersatz / 100;
|
||||
const netto = rate > 0 ? Math.round((e.betrag / (1 + rate)) * 100) / 100 : e.betrag;
|
||||
{activeKategorien.map((kat) => {
|
||||
const katMap = pivot.get(kat)!;
|
||||
const katGesamt = [...katMap.values()].flat().reduce((s, e) => s + e.betrag, 0);
|
||||
return (
|
||||
<tr key={e.id} className="hover:bg-slate-50/60 group">
|
||||
<td className="px-4 py-2.5 text-slate-600 whitespace-nowrap">
|
||||
{new Date(e.datum).toLocaleDateString("de-DE")}
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-slate-700 font-medium">
|
||||
{EINNAHME_LABELS[e.kategorie]}
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-right font-medium text-emerald-700 whitespace-nowrap">
|
||||
{formatCurrency(e.betrag)}
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-center">
|
||||
{e.steuersatz > 0 ? (
|
||||
<Badge variant="secondary">{e.steuersatz} %</Badge>
|
||||
) : (
|
||||
<span className="text-slate-300 text-xs">—</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-right text-slate-600 whitespace-nowrap">
|
||||
{formatCurrency(netto)}
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-center">
|
||||
{e.zahlungsart === "BANK" ? (
|
||||
<span className="inline-flex items-center gap-1 text-xs text-blue-600 font-medium">
|
||||
<Landmark className="h-3 w-3" /> Bank
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1 text-xs text-amber-600 font-medium">
|
||||
<Banknote className="h-3 w-3" /> Kasse
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-slate-400 text-xs truncate max-w-xs">
|
||||
{e.beschreibung ?? ""}
|
||||
</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(e)}
|
||||
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(e.id)}
|
||||
disabled={deleting === e.id}
|
||||
className="p-1 rounded hover:bg-red-50 text-slate-400 hover:text-red-600"
|
||||
title="Löschen"
|
||||
>
|
||||
{deleting === e.id ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
<tr key={kat} className="hover:bg-slate-50/60">
|
||||
<td className="px-4 py-2.5 text-slate-700 font-medium">{kat}</td>
|
||||
{activeMonate.map((m) => {
|
||||
const items = katMap.get(m);
|
||||
const sum = items?.reduce((s, e) => s + e.betrag, 0) ?? 0;
|
||||
return (
|
||||
<td key={m} className="px-3 py-2.5 text-right">
|
||||
{items ? (
|
||||
<button
|
||||
onClick={() => setCellModal({ kategorie: kat, monat: m })}
|
||||
className="text-emerald-700 font-medium hover:underline cursor-pointer whitespace-nowrap"
|
||||
>
|
||||
{formatCurrency(sum)}
|
||||
</button>
|
||||
) : (
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
<span className="text-slate-300">—</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
<td className="px-3 py-2.5 text-right font-bold text-emerald-700 whitespace-nowrap">
|
||||
{formatCurrency(katGesamt)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
@@ -338,13 +361,20 @@ export default function EinnahmenPage() {
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr className="border-t-2 border-slate-300 bg-slate-50">
|
||||
<td colSpan={2} 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-emerald-600">{formatCurrency(gesamt)}</td>
|
||||
<td />
|
||||
<td className="px-3 py-2.5 text-right text-xs font-bold text-slate-600">
|
||||
{formatCurrency(gesamt - ustGesamt)}
|
||||
<td className="px-4 py-2.5 text-xs font-bold text-slate-700">Gesamt</td>
|
||||
{activeMonate.map((m) => {
|
||||
const monatSum = einnahmen
|
||||
.filter((e) => new Date(e.datum).getMonth() === m)
|
||||
.reduce((s, e) => s + e.betrag, 0);
|
||||
return (
|
||||
<td key={m} className="px-3 py-2.5 text-right text-xs font-bold text-slate-700 whitespace-nowrap">
|
||||
{formatCurrency(monatSum)}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
<td className="px-3 py-2.5 text-right text-xs font-bold text-emerald-600 whitespace-nowrap">
|
||||
{formatCurrency(gesamt)}
|
||||
</td>
|
||||
<td colSpan={3} />
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
@@ -352,6 +382,116 @@ export default function EinnahmenPage() {
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Zellen-Detail-Modal */}
|
||||
<Dialog open={!!cellModal} onOpenChange={(o) => !o && setCellModal(null)}>
|
||||
<DialogContent className="sm:max-w-2xl max-h-[80vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{cellModal && `${cellModal.kategorie} – ${MONAT_LABELS[cellModal.monat]} ${year}`}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
{cellModal && (() => {
|
||||
const items = pivot.get(cellModal.kategorie)?.get(cellModal.monat) ?? [];
|
||||
const monatGesamt = items.reduce((s, e) => s + e.betrag, 0);
|
||||
const monatUst = items.reduce((s, e) => {
|
||||
const rate = e.steuersatz / 100;
|
||||
return s + (rate > 0 ? Math.round((e.betrag / (1 + rate)) * rate * 100) / 100 : 0);
|
||||
}, 0);
|
||||
return (
|
||||
<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-3 py-2 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide">Datum</th>
|
||||
<th className="px-3 py-2 text-right text-xs font-semibold text-slate-500 uppercase tracking-wide">Brutto</th>
|
||||
<th className="px-3 py-2 text-center text-xs font-semibold text-slate-500 uppercase tracking-wide">MwSt.</th>
|
||||
<th className="px-3 py-2 text-right text-xs font-semibold text-slate-500 uppercase tracking-wide">Netto</th>
|
||||
<th className="px-3 py-2 text-center text-xs font-semibold text-slate-500 uppercase tracking-wide">Zahlung</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide">Notiz</th>
|
||||
<th className="px-3 py-2 w-16" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{items.map((e) => {
|
||||
const rate = e.steuersatz / 100;
|
||||
const netto = rate > 0 ? Math.round((e.betrag / (1 + rate)) * 100) / 100 : e.betrag;
|
||||
return (
|
||||
<tr key={e.id} className="hover:bg-slate-50/60 group">
|
||||
<td className="px-3 py-2 text-slate-600 whitespace-nowrap">
|
||||
{new Date(e.datum).toLocaleDateString("de-DE")}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-right font-medium text-emerald-700 whitespace-nowrap">
|
||||
{formatCurrency(e.betrag)}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-center">
|
||||
{e.steuersatz > 0 ? (
|
||||
<Badge variant="secondary">{e.steuersatz} %</Badge>
|
||||
) : (
|
||||
<span className="text-slate-300 text-xs">—</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-right text-slate-600 whitespace-nowrap">
|
||||
{formatCurrency(netto)}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-center">
|
||||
{e.zahlungsart === "BANK" ? (
|
||||
<span className="inline-flex items-center gap-1 text-xs text-blue-600 font-medium">
|
||||
<Landmark className="h-3 w-3" /> Bank
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1 text-xs text-amber-600 font-medium">
|
||||
<Banknote className="h-3 w-3" /> Kasse
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-slate-400 text-xs truncate max-w-[12rem]">
|
||||
{e.beschreibung ?? ""}
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
onClick={() => { setCellModal(null); openEdit(e); }}
|
||||
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(e.id)}
|
||||
disabled={deleting === e.id}
|
||||
className="p-1 rounded hover:bg-red-50 text-slate-400 hover:text-red-600"
|
||||
title="Löschen"
|
||||
>
|
||||
{deleting === e.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 className="px-3 py-2 text-xs font-bold text-slate-700">Gesamt</td>
|
||||
<td className="px-3 py-2 text-right text-xs font-bold text-emerald-600">{formatCurrency(monatGesamt)}</td>
|
||||
<td />
|
||||
<td className="px-3 py-2 text-right text-xs font-bold text-slate-600">
|
||||
{formatCurrency(monatGesamt - monatUst)}
|
||||
</td>
|
||||
<td colSpan={3} />
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Dialog */}
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
@@ -394,11 +534,11 @@ export default function EinnahmenPage() {
|
||||
</label>
|
||||
<select
|
||||
value={form.kategorie}
|
||||
onChange={(e) => setForm((f) => ({ ...f, kategorie: e.target.value as EinnahmeKategorieKey }))}
|
||||
onChange={(e) => setForm((f) => ({ ...f, kategorie: 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-emerald-500"
|
||||
>
|
||||
{EINNAHME_KATEGORIEN.map((k) => (
|
||||
<option key={k} value={k}>{EINNAHME_LABELS[k]}</option>
|
||||
{kategorien.map((k) => (
|
||||
<option key={k} value={k}>{k}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user