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
@@ -83,11 +83,21 @@ type Pages = {
|
||||
"id": string;
|
||||
};
|
||||
};
|
||||
"/companies/:id/ausgaben/kategorien": {
|
||||
params: {
|
||||
"id": string;
|
||||
};
|
||||
};
|
||||
"/companies/:id/einnahmen": {
|
||||
params: {
|
||||
"id": string;
|
||||
};
|
||||
};
|
||||
"/companies/:id/einnahmen/kategorien": {
|
||||
params: {
|
||||
"id": string;
|
||||
};
|
||||
};
|
||||
"/companies/:id/anlagevermoegen": {
|
||||
params: {
|
||||
"id": string;
|
||||
@@ -200,6 +210,17 @@ type Pages = {
|
||||
"id": string;
|
||||
};
|
||||
};
|
||||
"/api/companies/:id/buchungkategorien": {
|
||||
params: {
|
||||
"id": string;
|
||||
};
|
||||
};
|
||||
"/api/companies/:id/buchungkategorien/:katId": {
|
||||
params: {
|
||||
"id": string;
|
||||
"katId": string;
|
||||
};
|
||||
};
|
||||
"/api/anlagevermoegen": {
|
||||
params: {};
|
||||
};
|
||||
@@ -213,7 +234,7 @@ type Pages = {
|
||||
type RouteFiles = {
|
||||
"root.tsx": {
|
||||
id: "root";
|
||||
page: "/" | "/login" | "/logout" | "/companies" | "/companies/new" | "/companies/:id" | "/companies/:id/edit" | "/companies/:id/customers" | "/companies/:id/leistungen" | "/companies/:id/invoices" | "/companies/:id/invoices/new" | "/companies/:id/invoices/:invoiceId" | "/companies/:id/invoices/:invoiceId/edit" | "/companies/:id/reports" | "/companies/:id/bilanzen" | "/companies/:id/ausgaben" | "/companies/:id/einnahmen" | "/companies/:id/anlagevermoegen" | "/companies/:id/money" | "/archiv" | "/settings/password" | "/admin/mandanten" | "/admin/users" | "/admin/users/new" | "/admin/users/:id" | "/admin/logs" | "/api/companies" | "/api/companies/:id" | "/api/companies/:id/customers" | "/api/companies/:id/invoices" | "/api/companies/:id/money" | "/api/customers" | "/api/customers/:id" | "/api/services" | "/api/services/:id" | "/api/invoices" | "/api/invoices/:id" | "/api/invoices/:id/pdf" | "/api/invoices/:id/xml" | "/api/reports" | "/api/bilanzen" | "/api/ausgaben" | "/api/ausgaben/:id" | "/api/einnahmen" | "/api/einnahmen/:id" | "/api/anlagevermoegen" | "/api/anlagevermoegen/:id";
|
||||
page: "/" | "/login" | "/logout" | "/companies" | "/companies/new" | "/companies/:id" | "/companies/:id/edit" | "/companies/:id/customers" | "/companies/:id/leistungen" | "/companies/:id/invoices" | "/companies/:id/invoices/new" | "/companies/:id/invoices/:invoiceId" | "/companies/:id/invoices/:invoiceId/edit" | "/companies/:id/reports" | "/companies/:id/bilanzen" | "/companies/:id/ausgaben" | "/companies/:id/ausgaben/kategorien" | "/companies/:id/einnahmen" | "/companies/:id/einnahmen/kategorien" | "/companies/:id/anlagevermoegen" | "/companies/:id/money" | "/archiv" | "/settings/password" | "/admin/mandanten" | "/admin/users" | "/admin/users/new" | "/admin/users/:id" | "/admin/logs" | "/api/companies" | "/api/companies/:id" | "/api/companies/:id/customers" | "/api/companies/:id/invoices" | "/api/companies/:id/money" | "/api/customers" | "/api/customers/:id" | "/api/services" | "/api/services/:id" | "/api/invoices" | "/api/invoices/:id" | "/api/invoices/:id/pdf" | "/api/invoices/:id/xml" | "/api/reports" | "/api/bilanzen" | "/api/ausgaben" | "/api/ausgaben/:id" | "/api/einnahmen" | "/api/einnahmen/:id" | "/api/companies/:id/buchungkategorien" | "/api/companies/:id/buchungkategorien/:katId" | "/api/anlagevermoegen" | "/api/anlagevermoegen/:id";
|
||||
};
|
||||
"routes/login.tsx": {
|
||||
id: "routes/login";
|
||||
@@ -225,7 +246,7 @@ type RouteFiles = {
|
||||
};
|
||||
"routes/dashboard-layout.tsx": {
|
||||
id: "routes/dashboard-layout";
|
||||
page: "/" | "/companies" | "/companies/new" | "/companies/:id" | "/companies/:id/edit" | "/companies/:id/customers" | "/companies/:id/leistungen" | "/companies/:id/invoices" | "/companies/:id/invoices/new" | "/companies/:id/invoices/:invoiceId" | "/companies/:id/invoices/:invoiceId/edit" | "/companies/:id/reports" | "/companies/:id/bilanzen" | "/companies/:id/ausgaben" | "/companies/:id/einnahmen" | "/companies/:id/anlagevermoegen" | "/companies/:id/money" | "/archiv" | "/settings/password";
|
||||
page: "/" | "/companies" | "/companies/new" | "/companies/:id" | "/companies/:id/edit" | "/companies/:id/customers" | "/companies/:id/leistungen" | "/companies/:id/invoices" | "/companies/:id/invoices/new" | "/companies/:id/invoices/:invoiceId" | "/companies/:id/invoices/:invoiceId/edit" | "/companies/:id/reports" | "/companies/:id/bilanzen" | "/companies/:id/ausgaben" | "/companies/:id/ausgaben/kategorien" | "/companies/:id/einnahmen" | "/companies/:id/einnahmen/kategorien" | "/companies/:id/anlagevermoegen" | "/companies/:id/money" | "/archiv" | "/settings/password";
|
||||
};
|
||||
"routes/home.tsx": {
|
||||
id: "routes/home";
|
||||
@@ -283,10 +304,18 @@ type RouteFiles = {
|
||||
id: "routes/companies.$id.ausgaben";
|
||||
page: "/companies/:id/ausgaben";
|
||||
};
|
||||
"routes/companies.$id.ausgaben.kategorien.tsx": {
|
||||
id: "routes/companies.$id.ausgaben.kategorien";
|
||||
page: "/companies/:id/ausgaben/kategorien";
|
||||
};
|
||||
"routes/companies.$id.einnahmen.tsx": {
|
||||
id: "routes/companies.$id.einnahmen";
|
||||
page: "/companies/:id/einnahmen";
|
||||
};
|
||||
"routes/companies.$id.einnahmen.kategorien.tsx": {
|
||||
id: "routes/companies.$id.einnahmen.kategorien";
|
||||
page: "/companies/:id/einnahmen/kategorien";
|
||||
};
|
||||
"routes/companies.$id.anlagevermoegen.tsx": {
|
||||
id: "routes/companies.$id.anlagevermoegen";
|
||||
page: "/companies/:id/anlagevermoegen";
|
||||
@@ -403,6 +432,14 @@ type RouteFiles = {
|
||||
id: "routes/api.einnahmen.$id";
|
||||
page: "/api/einnahmen/:id";
|
||||
};
|
||||
"routes/api.companies.$id.buchungkategorien.ts": {
|
||||
id: "routes/api.companies.$id.buchungkategorien";
|
||||
page: "/api/companies/:id/buchungkategorien";
|
||||
};
|
||||
"routes/api.companies.$id.buchungkategorien.$katId.ts": {
|
||||
id: "routes/api.companies.$id.buchungkategorien.$katId";
|
||||
page: "/api/companies/:id/buchungkategorien/:katId";
|
||||
};
|
||||
"routes/api.anlagevermoegen.ts": {
|
||||
id: "routes/api.anlagevermoegen";
|
||||
page: "/api/anlagevermoegen";
|
||||
@@ -432,7 +469,9 @@ type RouteModules = {
|
||||
"routes/companies.$id.reports": typeof import("./app/routes/companies.$id.reports.tsx");
|
||||
"routes/companies.$id.bilanzen": typeof import("./app/routes/companies.$id.bilanzen.tsx");
|
||||
"routes/companies.$id.ausgaben": typeof import("./app/routes/companies.$id.ausgaben.tsx");
|
||||
"routes/companies.$id.ausgaben.kategorien": typeof import("./app/routes/companies.$id.ausgaben.kategorien.tsx");
|
||||
"routes/companies.$id.einnahmen": typeof import("./app/routes/companies.$id.einnahmen.tsx");
|
||||
"routes/companies.$id.einnahmen.kategorien": typeof import("./app/routes/companies.$id.einnahmen.kategorien.tsx");
|
||||
"routes/companies.$id.anlagevermoegen": typeof import("./app/routes/companies.$id.anlagevermoegen.tsx");
|
||||
"routes/companies.$id.money": typeof import("./app/routes/companies.$id.money.tsx");
|
||||
"routes/archiv": typeof import("./app/routes/archiv.tsx");
|
||||
@@ -462,6 +501,8 @@ type RouteModules = {
|
||||
"routes/api.ausgaben.$id": typeof import("./app/routes/api.ausgaben.$id.ts");
|
||||
"routes/api.einnahmen": typeof import("./app/routes/api.einnahmen.ts");
|
||||
"routes/api.einnahmen.$id": typeof import("./app/routes/api.einnahmen.$id.ts");
|
||||
"routes/api.companies.$id.buchungkategorien": typeof import("./app/routes/api.companies.$id.buchungkategorien.ts");
|
||||
"routes/api.companies.$id.buchungkategorien.$katId": typeof import("./app/routes/api.companies.$id.buchungkategorien.$katId.ts");
|
||||
"routes/api.anlagevermoegen": typeof import("./app/routes/api.anlagevermoegen.ts");
|
||||
"routes/api.anlagevermoegen.$id": typeof import("./app/routes/api.anlagevermoegen.$id.ts");
|
||||
};
|
||||
@@ -0,0 +1,62 @@
|
||||
// Generated by React Router
|
||||
|
||||
import type { GetInfo, GetAnnotations } from "react-router/internal";
|
||||
|
||||
type Module = typeof import("../api.companies.$id.buchungkategorien.$katId.js")
|
||||
|
||||
type Info = GetInfo<{
|
||||
file: "routes/api.companies.$id.buchungkategorien.$katId.ts",
|
||||
module: Module
|
||||
}>
|
||||
|
||||
type Matches = [{
|
||||
id: "root";
|
||||
module: typeof import("../../root.js");
|
||||
}, {
|
||||
id: "routes/api.companies.$id.buchungkategorien.$katId";
|
||||
module: typeof import("../api.companies.$id.buchungkategorien.$katId.js");
|
||||
}];
|
||||
|
||||
type Annotations = GetAnnotations<Info & { module: Module, matches: Matches }, false>;
|
||||
|
||||
export namespace Route {
|
||||
// links
|
||||
export type LinkDescriptors = Annotations["LinkDescriptors"];
|
||||
export type LinksFunction = Annotations["LinksFunction"];
|
||||
|
||||
// meta
|
||||
export type MetaArgs = Annotations["MetaArgs"];
|
||||
export type MetaDescriptors = Annotations["MetaDescriptors"];
|
||||
export type MetaFunction = Annotations["MetaFunction"];
|
||||
|
||||
// headers
|
||||
export type HeadersArgs = Annotations["HeadersArgs"];
|
||||
export type HeadersFunction = Annotations["HeadersFunction"];
|
||||
|
||||
// middleware
|
||||
export type MiddlewareFunction = Annotations["MiddlewareFunction"];
|
||||
|
||||
// clientMiddleware
|
||||
export type ClientMiddlewareFunction = Annotations["ClientMiddlewareFunction"];
|
||||
|
||||
// loader
|
||||
export type LoaderArgs = Annotations["LoaderArgs"];
|
||||
|
||||
// clientLoader
|
||||
export type ClientLoaderArgs = Annotations["ClientLoaderArgs"];
|
||||
|
||||
// action
|
||||
export type ActionArgs = Annotations["ActionArgs"];
|
||||
|
||||
// clientAction
|
||||
export type ClientActionArgs = Annotations["ClientActionArgs"];
|
||||
|
||||
// HydrateFallback
|
||||
export type HydrateFallbackProps = Annotations["HydrateFallbackProps"];
|
||||
|
||||
// Component
|
||||
export type ComponentProps = Annotations["ComponentProps"];
|
||||
|
||||
// ErrorBoundary
|
||||
export type ErrorBoundaryProps = Annotations["ErrorBoundaryProps"];
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
// Generated by React Router
|
||||
|
||||
import type { GetInfo, GetAnnotations } from "react-router/internal";
|
||||
|
||||
type Module = typeof import("../api.companies.$id.buchungkategorien.js")
|
||||
|
||||
type Info = GetInfo<{
|
||||
file: "routes/api.companies.$id.buchungkategorien.ts",
|
||||
module: Module
|
||||
}>
|
||||
|
||||
type Matches = [{
|
||||
id: "root";
|
||||
module: typeof import("../../root.js");
|
||||
}, {
|
||||
id: "routes/api.companies.$id.buchungkategorien";
|
||||
module: typeof import("../api.companies.$id.buchungkategorien.js");
|
||||
}];
|
||||
|
||||
type Annotations = GetAnnotations<Info & { module: Module, matches: Matches }, false>;
|
||||
|
||||
export namespace Route {
|
||||
// links
|
||||
export type LinkDescriptors = Annotations["LinkDescriptors"];
|
||||
export type LinksFunction = Annotations["LinksFunction"];
|
||||
|
||||
// meta
|
||||
export type MetaArgs = Annotations["MetaArgs"];
|
||||
export type MetaDescriptors = Annotations["MetaDescriptors"];
|
||||
export type MetaFunction = Annotations["MetaFunction"];
|
||||
|
||||
// headers
|
||||
export type HeadersArgs = Annotations["HeadersArgs"];
|
||||
export type HeadersFunction = Annotations["HeadersFunction"];
|
||||
|
||||
// middleware
|
||||
export type MiddlewareFunction = Annotations["MiddlewareFunction"];
|
||||
|
||||
// clientMiddleware
|
||||
export type ClientMiddlewareFunction = Annotations["ClientMiddlewareFunction"];
|
||||
|
||||
// loader
|
||||
export type LoaderArgs = Annotations["LoaderArgs"];
|
||||
|
||||
// clientLoader
|
||||
export type ClientLoaderArgs = Annotations["ClientLoaderArgs"];
|
||||
|
||||
// action
|
||||
export type ActionArgs = Annotations["ActionArgs"];
|
||||
|
||||
// clientAction
|
||||
export type ClientActionArgs = Annotations["ClientActionArgs"];
|
||||
|
||||
// HydrateFallback
|
||||
export type HydrateFallbackProps = Annotations["HydrateFallbackProps"];
|
||||
|
||||
// Component
|
||||
export type ComponentProps = Annotations["ComponentProps"];
|
||||
|
||||
// ErrorBoundary
|
||||
export type ErrorBoundaryProps = Annotations["ErrorBoundaryProps"];
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
// Generated by React Router
|
||||
|
||||
import type { GetInfo, GetAnnotations } from "react-router/internal";
|
||||
|
||||
type Module = typeof import("../companies.$id.ausgaben.kategorien.js")
|
||||
|
||||
type Info = GetInfo<{
|
||||
file: "routes/companies.$id.ausgaben.kategorien.tsx",
|
||||
module: Module
|
||||
}>
|
||||
|
||||
type Matches = [{
|
||||
id: "root";
|
||||
module: typeof import("../../root.js");
|
||||
}, {
|
||||
id: "routes/dashboard-layout";
|
||||
module: typeof import("../dashboard-layout.js");
|
||||
}, {
|
||||
id: "routes/companies.$id.ausgaben.kategorien";
|
||||
module: typeof import("../companies.$id.ausgaben.kategorien.js");
|
||||
}];
|
||||
|
||||
type Annotations = GetAnnotations<Info & { module: Module, matches: Matches }, false>;
|
||||
|
||||
export namespace Route {
|
||||
// links
|
||||
export type LinkDescriptors = Annotations["LinkDescriptors"];
|
||||
export type LinksFunction = Annotations["LinksFunction"];
|
||||
|
||||
// meta
|
||||
export type MetaArgs = Annotations["MetaArgs"];
|
||||
export type MetaDescriptors = Annotations["MetaDescriptors"];
|
||||
export type MetaFunction = Annotations["MetaFunction"];
|
||||
|
||||
// headers
|
||||
export type HeadersArgs = Annotations["HeadersArgs"];
|
||||
export type HeadersFunction = Annotations["HeadersFunction"];
|
||||
|
||||
// middleware
|
||||
export type MiddlewareFunction = Annotations["MiddlewareFunction"];
|
||||
|
||||
// clientMiddleware
|
||||
export type ClientMiddlewareFunction = Annotations["ClientMiddlewareFunction"];
|
||||
|
||||
// loader
|
||||
export type LoaderArgs = Annotations["LoaderArgs"];
|
||||
|
||||
// clientLoader
|
||||
export type ClientLoaderArgs = Annotations["ClientLoaderArgs"];
|
||||
|
||||
// action
|
||||
export type ActionArgs = Annotations["ActionArgs"];
|
||||
|
||||
// clientAction
|
||||
export type ClientActionArgs = Annotations["ClientActionArgs"];
|
||||
|
||||
// HydrateFallback
|
||||
export type HydrateFallbackProps = Annotations["HydrateFallbackProps"];
|
||||
|
||||
// Component
|
||||
export type ComponentProps = Annotations["ComponentProps"];
|
||||
|
||||
// ErrorBoundary
|
||||
export type ErrorBoundaryProps = Annotations["ErrorBoundaryProps"];
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
// Generated by React Router
|
||||
|
||||
import type { GetInfo, GetAnnotations } from "react-router/internal";
|
||||
|
||||
type Module = typeof import("../companies.$id.einnahmen.kategorien.js")
|
||||
|
||||
type Info = GetInfo<{
|
||||
file: "routes/companies.$id.einnahmen.kategorien.tsx",
|
||||
module: Module
|
||||
}>
|
||||
|
||||
type Matches = [{
|
||||
id: "root";
|
||||
module: typeof import("../../root.js");
|
||||
}, {
|
||||
id: "routes/dashboard-layout";
|
||||
module: typeof import("../dashboard-layout.js");
|
||||
}, {
|
||||
id: "routes/companies.$id.einnahmen.kategorien";
|
||||
module: typeof import("../companies.$id.einnahmen.kategorien.js");
|
||||
}];
|
||||
|
||||
type Annotations = GetAnnotations<Info & { module: Module, matches: Matches }, false>;
|
||||
|
||||
export namespace Route {
|
||||
// links
|
||||
export type LinkDescriptors = Annotations["LinkDescriptors"];
|
||||
export type LinksFunction = Annotations["LinksFunction"];
|
||||
|
||||
// meta
|
||||
export type MetaArgs = Annotations["MetaArgs"];
|
||||
export type MetaDescriptors = Annotations["MetaDescriptors"];
|
||||
export type MetaFunction = Annotations["MetaFunction"];
|
||||
|
||||
// headers
|
||||
export type HeadersArgs = Annotations["HeadersArgs"];
|
||||
export type HeadersFunction = Annotations["HeadersFunction"];
|
||||
|
||||
// middleware
|
||||
export type MiddlewareFunction = Annotations["MiddlewareFunction"];
|
||||
|
||||
// clientMiddleware
|
||||
export type ClientMiddlewareFunction = Annotations["ClientMiddlewareFunction"];
|
||||
|
||||
// loader
|
||||
export type LoaderArgs = Annotations["LoaderArgs"];
|
||||
|
||||
// clientLoader
|
||||
export type ClientLoaderArgs = Annotations["ClientLoaderArgs"];
|
||||
|
||||
// action
|
||||
export type ActionArgs = Annotations["ActionArgs"];
|
||||
|
||||
// clientAction
|
||||
export type ClientActionArgs = Annotations["ClientActionArgs"];
|
||||
|
||||
// HydrateFallback
|
||||
export type HydrateFallbackProps = Annotations["HydrateFallbackProps"];
|
||||
|
||||
// Component
|
||||
export type ComponentProps = Annotations["ComponentProps"];
|
||||
|
||||
// ErrorBoundary
|
||||
export type ErrorBoundaryProps = Annotations["ErrorBoundaryProps"];
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
|
||||
# Annas Rechnungsmanager (CLAUDE onboarding)
|
||||
|
||||
## 1. Projektüberblick
|
||||
|
||||
Annas Rechnungsmanager ist ein Buchhaltungs- und Rechnungsverwaltungssystem für Steuerberater und Buchhalter mit Mandantenverwaltung. Funktionalitäten:
|
||||
- Mandantenverwaltung (CRUD, Archiv, Papierkorb)
|
||||
- Rechnungsverwaltung (Erstellen, PDF-/XML-Export, Zahlung eintragen)
|
||||
- Kundenverwaltung (Stammdaten pro Mandant)
|
||||
- Steuerberichte (USt-Voranmeldung, Monats-/Quartalsreport)
|
||||
- Benutzerverwaltung mit Rollen (ADMIN, USER)
|
||||
- Audit-Log (Aktionen + IP + Benutzer)
|
||||
|
||||
## 2. Tech Stack (Schlüsseltechnologien)
|
||||
|
||||
- `Node.js 22+`, `TypeScript`
|
||||
- REMIX/React Router v7 (Server-/Client-CSS, SSR, file-based routing)
|
||||
- `Prisma` + `MariaDB` (MySQL-kompatibel)
|
||||
- Authentifizierung: cookie-basierte Sessions, `bcryptjs`
|
||||
- UI: `Tailwind CSS v4`, `shadcn/ui`, Remix components
|
||||
- PDF: `@react-pdf/renderer`
|
||||
- Deployment: `Docker`, `docker-compose`, optional `k8s`
|
||||
|
||||
## 3. Repository-Architektur
|
||||
|
||||
- `app/` - Remiх/React-Router-Quellcode
|
||||
- `components/` - shared UI und Domain-Komponenten (`company`, `invoice`, `layout`, `ui`)
|
||||
- `lib/` - Datenbank, Logik, Helpers
|
||||
- `routes/` - Datei-Routing-Endpunkte und APIs
|
||||
- `session.server.ts` - Session/Auth-Handling
|
||||
- `types/index.ts` - globale Typen
|
||||
- `prisma/` - Schema, Migrationen, Seeder
|
||||
- `scripts/` - CLI-Hilfs-Skripte (`setup-admin`, `reset-password`)
|
||||
- `docker-compose.yml`, `Dockerfile`, `k8s.yml` - Deployment & Infrastruktur
|
||||
|
||||
## 4. Schlüsseldateien
|
||||
|
||||
- `app/root.tsx` - Root-Layout und Fehlergrenzen
|
||||
- `app/entry.server.tsx` - Server-Entry (SSR)
|
||||
- `app/routes/index.tsx` (`home`, `dashboard`, `login`, `settings`)
|
||||
- `app/routes/api.*` - REST-API-Endpunkte für CRUD (companies, invoices, etc.)
|
||||
- `app/lib/prisma.server.ts` - Prisma-Client-Initialisierung
|
||||
- `app/lib/logger.server.ts`, `rate-limiter.server.ts` - Infrastruktur
|
||||
- `prisma/schema.prisma` - Datenmodell
|
||||
- `package.json` und `tsconfig.json` - Build / Lint / Types
|
||||
|
||||
## 5. Konventionen & Code-Richtlinien
|
||||
|
||||
- FS-basierte React Router v7 Routen
|
||||
- Server-Endpunkte in `app/routes/api.*` als Remix-Loaders/Actions
|
||||
- Mutationen und Datenzugriffe in `app/lib` (Prisma, Tax, utils)
|
||||
- Typescript-sicher und null-safe; bevorzugt `unknown`/`guard`-Checks für externe Daten
|
||||
- UI-Toolkit: shadcn-Komponenten + Tailwind Utility-Klassen
|
||||
- Error-Handling mit Remix `redirect`, `json`, `badRequest`
|
||||
|
||||
## 6. Häufige Aufgaben und Workflows
|
||||
|
||||
- Lokale Entwicklung: `npm install`, `.env` konfigurieren, `npx prisma migrate deploy`, `npm run dev`
|
||||
- DB initialisieren/seeden: `npm run db:seed`; `npm run db:migrate`
|
||||
- Admin einrichten: `npm run setup-admin` (oder via Docker-Env `ADMIN_PASSWORD` beim Start)
|
||||
- Passwort reset: `npm run reset-password`
|
||||
- Automatische Migration beim Containerstart (Production)
|
||||
|
||||
## 7. Spezielle Hinweise für Claude
|
||||
|
||||
- Bevorzuge präzise Änderungen in bestehendem Code (letzte Routen und Libs).
|
||||
- Halte Backward-Kompatibilität: bestehende API-Contracts in `api.*` sollen intakt bleiben.
|
||||
- Dokumentiere bei komplexen Änderungen Business-Logik (Steuern, Rechnungscodes, UStG §14).
|
||||
- Vollständige Test: `npm run typecheck`, ggf. `npm run lint` (falls eingerichtet).
|
||||
|
||||
## 8. Agent-Persona (optional)
|
||||
|
||||
- Rolle: Full-stack Remix / TypeScript-Fachkraft für deutsche Rechnungssoftware
|
||||
- Fokus: Feature-Implementierung im Domain-Kontext (Invoices, Reports, Clients)
|
||||
- Toolpräferenzen: `read_file`, `grep_search`, `replace_string_in_file` und `run_in_terminal` für Verifikation
|
||||
- Vermeide: ungetestete massive Refactorings ohne vorhandenen Abdeckungsstatus
|
||||
|
||||
## 9. Weiteres
|
||||
|
||||
- `CLAUDE.md` wird als Projekt-spezifisches Onboarding für ChatGPT/Claude-Agenten genutzt.
|
||||
- Für Dev-Workflows und PR-Beschreibungen, bitte auf `README.md` und `package.json` verweisen.
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
export const DEFAULT_AUSGABE_KATEGORIEN = [
|
||||
"Waren, Rohstoffe, Hilfsstoffe",
|
||||
"Geringwertige Wirtschaftsgüter",
|
||||
"Abschreibungen",
|
||||
"Miete",
|
||||
"Strom, Wasser",
|
||||
"Telekommunikationskosten",
|
||||
"Fortbildungskosten/Messen",
|
||||
"Beiträge",
|
||||
"Versicherungen",
|
||||
"Werbekosten",
|
||||
"Zinsen",
|
||||
"Reisekosten",
|
||||
"Reparaturen / Instandhaltung",
|
||||
"Bürobedarf",
|
||||
"Repräsentationskosten",
|
||||
"Sonstiger Betriebsbedarf",
|
||||
"Nebenkosten des Geldverkehrs",
|
||||
];
|
||||
|
||||
export const DEFAULT_EINNAHME_KATEGORIEN = [
|
||||
"Fußpflege/Verkauf/Gutscheine",
|
||||
"Privateinlagen",
|
||||
"Darlehen",
|
||||
"Steuererstattungen",
|
||||
"Versicherungserstattungen",
|
||||
"Zinserträge",
|
||||
"Miet-/Pachteinnahmen",
|
||||
"Veräußerungserlöse",
|
||||
"Eigenverbrauch",
|
||||
"Sonstige Einnahmen",
|
||||
];
|
||||
@@ -19,7 +19,9 @@ export default [
|
||||
route("companies/:id/reports", "routes/companies.$id.reports.tsx"),
|
||||
route("companies/:id/bilanzen", "routes/companies.$id.bilanzen.tsx"),
|
||||
route("companies/:id/ausgaben", "routes/companies.$id.ausgaben.tsx"),
|
||||
route("companies/:id/ausgaben/kategorien", "routes/companies.$id.ausgaben.kategorien.tsx"),
|
||||
route("companies/:id/einnahmen", "routes/companies.$id.einnahmen.tsx"),
|
||||
route("companies/:id/einnahmen/kategorien", "routes/companies.$id.einnahmen.kategorien.tsx"),
|
||||
route("companies/:id/anlagevermoegen", "routes/companies.$id.anlagevermoegen.tsx"),
|
||||
route("companies/:id/money", "routes/companies.$id.money.tsx"),
|
||||
route("archiv", "routes/archiv.tsx"),
|
||||
@@ -55,6 +57,8 @@ export default [
|
||||
route("api/ausgaben/:id", "routes/api.ausgaben.$id.ts"),
|
||||
route("api/einnahmen", "routes/api.einnahmen.ts"),
|
||||
route("api/einnahmen/:id", "routes/api.einnahmen.$id.ts"),
|
||||
route("api/companies/:id/buchungkategorien", "routes/api.companies.$id.buchungkategorien.ts"),
|
||||
route("api/companies/:id/buchungkategorien/:katId", "routes/api.companies.$id.buchungkategorien.$katId.ts"),
|
||||
route("api/anlagevermoegen", "routes/api.anlagevermoegen.ts"),
|
||||
route("api/anlagevermoegen/:id", "routes/api.anlagevermoegen.$id.ts"),
|
||||
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
import { getApiUser } from "@/session.server";
|
||||
import prisma from "@/lib/prisma.server";
|
||||
import { z } from "zod";
|
||||
|
||||
const updateSchema = z.object({
|
||||
name: z.string().min(1, "Name ist erforderlich").max(100),
|
||||
});
|
||||
|
||||
export async function action({
|
||||
request,
|
||||
params,
|
||||
}: {
|
||||
request: Request;
|
||||
params: { id: string; katId: string };
|
||||
}) {
|
||||
const user = await getApiUser(request);
|
||||
if (!user) return Response.json({ error: "Unauthorized" }, { status: 401 });
|
||||
|
||||
const kat = await prisma.buchungKategorie.findFirst({
|
||||
where: { id: params.katId, companyId: params.id, company: { userId: user.id } },
|
||||
});
|
||||
if (!kat) return Response.json({ error: "Not found" }, { status: 404 });
|
||||
|
||||
if (request.method === "DELETE") {
|
||||
const usedCount = await prisma.buchung.count({
|
||||
where: { companyId: params.id, kategorie: kat.name, isBusinessRecord: true },
|
||||
});
|
||||
if (usedCount > 0) {
|
||||
return Response.json(
|
||||
{ error: `Kategorie wird von ${usedCount} Buchung(en) verwendet und kann nicht gelöscht werden.` },
|
||||
{ status: 409 }
|
||||
);
|
||||
}
|
||||
await prisma.buchungKategorie.delete({ where: { id: params.katId } });
|
||||
return Response.json({ ok: true });
|
||||
}
|
||||
|
||||
if (request.method === "PUT") {
|
||||
const body = await request.json();
|
||||
const parsed = updateSchema.safeParse(body);
|
||||
if (!parsed.success) return Response.json({ error: parsed.error.issues }, { status: 400 });
|
||||
|
||||
const updated = await prisma.buchungKategorie.update({
|
||||
where: { id: params.katId },
|
||||
data: { name: parsed.data.name },
|
||||
});
|
||||
return Response.json(updated);
|
||||
}
|
||||
|
||||
return Response.json({ error: "Method not allowed" }, { status: 405 });
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import { getApiUser } from "@/session.server";
|
||||
import prisma from "@/lib/prisma.server";
|
||||
import { z } from "zod";
|
||||
|
||||
const createSchema = z.object({
|
||||
name: z.string().min(1, "Name ist erforderlich").max(100),
|
||||
typ: z.enum(["AUSGABE", "EINNAHME"]),
|
||||
});
|
||||
|
||||
export async function loader({ request, params }: { request: Request; params: { id: string } }) {
|
||||
const user = await getApiUser(request);
|
||||
if (!user) return Response.json({ error: "Unauthorized" }, { status: 401 });
|
||||
|
||||
const company = await prisma.company.findFirst({
|
||||
where: { id: params.id, userId: user.id },
|
||||
select: { id: true },
|
||||
});
|
||||
if (!company) return Response.json({ error: "Not found" }, { status: 404 });
|
||||
|
||||
const { searchParams } = new URL(request.url);
|
||||
const typ = searchParams.get("typ") as "AUSGABE" | "EINNAHME" | null;
|
||||
if (!typ || !["AUSGABE", "EINNAHME"].includes(typ)) {
|
||||
return Response.json({ error: "typ (AUSGABE|EINNAHME) required" }, { status: 400 });
|
||||
}
|
||||
|
||||
const kats = await prisma.buchungKategorie.findMany({
|
||||
where: { companyId: params.id, typ },
|
||||
orderBy: { name: "asc" },
|
||||
});
|
||||
|
||||
const withUsage = await Promise.all(
|
||||
kats.map(async (k) => ({
|
||||
id: k.id,
|
||||
name: k.name,
|
||||
typ: k.typ,
|
||||
inUse:
|
||||
(await prisma.buchung.count({
|
||||
where: { companyId: params.id, kategorie: k.name, isBusinessRecord: true },
|
||||
})) > 0,
|
||||
}))
|
||||
);
|
||||
|
||||
return Response.json(withUsage);
|
||||
}
|
||||
|
||||
export async function action({ request, params }: { request: Request; params: { id: string } }) {
|
||||
const user = await getApiUser(request);
|
||||
if (!user) return Response.json({ error: "Unauthorized" }, { status: 401 });
|
||||
|
||||
const company = await prisma.company.findFirst({
|
||||
where: { id: params.id, userId: user.id },
|
||||
select: { id: true },
|
||||
});
|
||||
if (!company) return Response.json({ error: "Not found" }, { status: 404 });
|
||||
|
||||
const body = await request.json();
|
||||
const parsed = createSchema.safeParse(body);
|
||||
if (!parsed.success) return Response.json({ error: parsed.error.issues }, { status: 400 });
|
||||
|
||||
const kat = await prisma.buchungKategorie.create({
|
||||
data: {
|
||||
companyId: params.id,
|
||||
name: parsed.data.name,
|
||||
typ: parsed.data.typ,
|
||||
},
|
||||
});
|
||||
|
||||
return Response.json(kat, { status: 201 });
|
||||
}
|
||||
@@ -0,0 +1,270 @@
|
||||
import { useState } from "react";
|
||||
import { Link, useLoaderData, useRevalidator } from "react-router";
|
||||
import { requireUser } from "@/session.server";
|
||||
import prisma from "@/lib/prisma.server";
|
||||
import { DEFAULT_AUSGABE_KATEGORIEN } from "@/lib/kategorie-defaults";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import { ChevronLeft, Plus, Pencil, Trash2, Loader2 } from "lucide-react";
|
||||
|
||||
export const handle = {
|
||||
breadcrumbs: (data: { companyId: string; companyName: string }) => [
|
||||
{ label: "Mandanten", href: "/companies" },
|
||||
{ label: data.companyName, href: `/companies/${data.companyId}` },
|
||||
{ label: "Betriebsausgaben", href: `/companies/${data.companyId}/ausgaben` },
|
||||
{ label: "Kategorien" },
|
||||
],
|
||||
};
|
||||
|
||||
interface Kategorie {
|
||||
id: string;
|
||||
name: string;
|
||||
inUse: boolean;
|
||||
}
|
||||
|
||||
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 });
|
||||
|
||||
// Auto-seed Standardkategorien wenn noch keine vorhanden
|
||||
const existing = await prisma.buchungKategorie.count({
|
||||
where: { companyId: params.id, typ: "AUSGABE" },
|
||||
});
|
||||
if (existing === 0) {
|
||||
await prisma.buchungKategorie.createMany({
|
||||
data: DEFAULT_AUSGABE_KATEGORIEN.map((name) => ({
|
||||
companyId: params.id,
|
||||
name,
|
||||
typ: "AUSGABE",
|
||||
})),
|
||||
skipDuplicates: true,
|
||||
});
|
||||
}
|
||||
|
||||
const kats = await prisma.buchungKategorie.findMany({
|
||||
where: { companyId: params.id, typ: "AUSGABE" },
|
||||
orderBy: { name: "asc" },
|
||||
});
|
||||
|
||||
const withUsage = await Promise.all(
|
||||
kats.map(async (k) => ({
|
||||
id: k.id,
|
||||
name: k.name,
|
||||
inUse:
|
||||
(await prisma.buchung.count({
|
||||
where: { companyId: params.id, kategorie: k.name, isBusinessRecord: true },
|
||||
})) > 0,
|
||||
}))
|
||||
);
|
||||
|
||||
return {
|
||||
companyId: company.id,
|
||||
companyName: company.name,
|
||||
kategorien: withUsage,
|
||||
};
|
||||
}
|
||||
|
||||
export default function AusgabenKategorienPage() {
|
||||
const { kategorien: initialKategorien, companyId, companyName } =
|
||||
useLoaderData<typeof loader>();
|
||||
const { revalidate } = useRevalidator();
|
||||
|
||||
const [kategorien, setKategorien] = useState<Kategorie[]>(initialKategorien);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [deleting, setDeleting] = useState<string | null>(null);
|
||||
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [name, setName] = useState("");
|
||||
const [nameError, setNameError] = useState("");
|
||||
|
||||
async function reload() {
|
||||
const res = await fetch(`/api/companies/${companyId}/buchungkategorien?typ=AUSGABE`);
|
||||
const data: Kategorie[] = await res.json();
|
||||
setKategorien(data);
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
setEditingId(null);
|
||||
setName("");
|
||||
setNameError("");
|
||||
setDialogOpen(true);
|
||||
}
|
||||
|
||||
function openEdit(k: Kategorie) {
|
||||
setEditingId(k.id);
|
||||
setName(k.name);
|
||||
setNameError("");
|
||||
setDialogOpen(true);
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
if (!name.trim()) { setNameError("Name ist erforderlich"); return; }
|
||||
setSaving(true);
|
||||
try {
|
||||
if (editingId) {
|
||||
const res = await fetch(`/api/companies/${companyId}/buchungkategorien/${editingId}`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ name: name.trim() }),
|
||||
});
|
||||
if (!res.ok) { setNameError("Fehler beim Speichern"); return; }
|
||||
} else {
|
||||
const res = await fetch(`/api/companies/${companyId}/buchungkategorien`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ name: name.trim(), typ: "AUSGABE" }),
|
||||
});
|
||||
if (!res.ok) { setNameError("Kategorie existiert bereits"); return; }
|
||||
}
|
||||
setDialogOpen(false);
|
||||
await reload();
|
||||
revalidate();
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(k: Kategorie) {
|
||||
if (!confirm(`Kategorie "${k.name}" wirklich löschen?`)) return;
|
||||
setDeleting(k.id);
|
||||
const res = await fetch(`/api/companies/${companyId}/buchungkategorien/${k.id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
if (!res.ok) {
|
||||
const data = await res.json();
|
||||
alert(data.error ?? "Löschen fehlgeschlagen");
|
||||
} else {
|
||||
await reload();
|
||||
revalidate();
|
||||
}
|
||||
setDeleting(null);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Link
|
||||
to={`/companies/${companyId}/ausgaben`}
|
||||
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 zu Betriebsausgaben
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Ausgaben-Kategorien</h1>
|
||||
<p className="text-gray-500 mt-1">{companyName}</p>
|
||||
</div>
|
||||
<Button onClick={openCreate} className="bg-rose-600 hover:bg-rose-700">
|
||||
<Plus className="h-4 w-4" />
|
||||
Neue Kategorie
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{kategorien.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="py-16 text-center text-gray-400">
|
||||
<p className="text-sm">Noch keine Kategorien vorhanden.</p>
|
||||
<Button variant="outline" className="mt-4" onClick={openCreate}>
|
||||
<Plus className="h-4 w-4" /> Erste Kategorie anlegen
|
||||
</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">
|
||||
Name
|
||||
</th>
|
||||
<th className="px-3 py-2.5 text-center text-xs font-semibold text-slate-500 uppercase tracking-wide">
|
||||
In Verwendung
|
||||
</th>
|
||||
<th className="px-3 py-2.5 w-20" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{kategorien.map((k) => (
|
||||
<tr key={k.id} className="hover:bg-slate-50/60 group">
|
||||
<td className="px-4 py-2.5 text-slate-700 font-medium">{k.name}</td>
|
||||
<td className="px-3 py-2.5 text-center">
|
||||
{k.inUse ? (
|
||||
<span className="text-xs text-emerald-600 font-medium">Ja</span>
|
||||
) : (
|
||||
<span className="text-xs text-slate-400">Nein</span>
|
||||
)}
|
||||
</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(k)}
|
||||
className="p-1 rounded hover:bg-slate-100 text-slate-500 hover:text-slate-700"
|
||||
title="Umbenennen"
|
||||
>
|
||||
<Pencil className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(k)}
|
||||
disabled={k.inUse || deleting === k.id}
|
||||
className="p-1 rounded hover:bg-red-50 text-slate-400 hover:text-red-600 disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
title={k.inUse ? "Wird verwendet – kann nicht gelöscht werden" : "Löschen"}
|
||||
>
|
||||
{deleting === k.id ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogContent className="sm:max-w-sm">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{editingId ? "Kategorie umbenennen" : "Neue Kategorie"}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="py-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Name <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => { setName(e.target.value); setNameError(""); }}
|
||||
onKeyDown={(e) => e.key === "Enter" && handleSave()}
|
||||
placeholder="z.B. Marketingkosten"
|
||||
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-rose-500"
|
||||
autoFocus
|
||||
/>
|
||||
{nameError && <p className="mt-1 text-xs text-red-500">{nameError}</p>}
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Button variant="outline" onClick={() => setDialogOpen(false)}>Abbrechen</Button>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
disabled={saving || !name.trim()}
|
||||
className="bg-rose-600 hover:bg-rose-700"
|
||||
>
|
||||
{saving && <Loader2 className="h-4 w-4 animate-spin" />}
|
||||
{editingId ? "Speichern" : "Anlegen"}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 { AUSGABE_KATEGORIEN, KATEGORIE_LABELS, type AusgabeKategorieKey } from "@/lib/ausgaben";
|
||||
import { DEFAULT_AUSGABE_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 Ausgabe {
|
||||
id: string;
|
||||
kategorie: AusgabeKategorieKey;
|
||||
kategorie: string;
|
||||
betrag: number;
|
||||
steuersatz: number;
|
||||
zahlungsart: "KASSE" | "BANK";
|
||||
@@ -35,7 +37,7 @@ interface Ausgabe {
|
||||
}
|
||||
|
||||
const emptyForm = {
|
||||
kategorie: "SONSTIGER_BETRIEBSBEDARF" as AusgabeKategorieKey,
|
||||
kategorie: "",
|
||||
betrag: "",
|
||||
steuersatz: 19,
|
||||
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: "AUSGABE" },
|
||||
});
|
||||
if (katCount === 0) {
|
||||
await prisma.buchungKategorie.createMany({
|
||||
data: DEFAULT_AUSGABE_KATEGORIEN.map((name) => ({
|
||||
companyId: params.id,
|
||||
name,
|
||||
typ: "AUSGABE",
|
||||
})),
|
||||
skipDuplicates: true,
|
||||
});
|
||||
}
|
||||
|
||||
const kategorien = await prisma.buchungKategorie.findMany({
|
||||
where: { companyId: params.id, typ: "AUSGABE" },
|
||||
orderBy: { name: "asc" },
|
||||
select: { name: true },
|
||||
});
|
||||
|
||||
const year = new Date().getFullYear();
|
||||
const ausgaben = 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),
|
||||
ausgaben: ausgaben.map((a) => ({
|
||||
id: a.id,
|
||||
kategorie: (a.kategorie || "SONSTIGER_BETRIEBSBEDARF") as AusgabeKategorieKey,
|
||||
kategorie: a.kategorie ?? "",
|
||||
betrag: Number(a.amount),
|
||||
steuersatz: a.steuersatz || 19,
|
||||
steuersatz: (a.steuersatz as number | null) ?? 19,
|
||||
zahlungsart: (a.zahlungsart as "KASSE" | "BANK") || "BANK",
|
||||
datum: a.date.toISOString(),
|
||||
beschreibung: a.description,
|
||||
@@ -79,7 +103,7 @@ export async function loader({ request, params }: { request: Request; params: {
|
||||
}
|
||||
|
||||
export default function AusgabenPage() {
|
||||
const { ausgaben: initialAusgaben, companyId, companyName, initialYear } =
|
||||
const { ausgaben: initialAusgaben, companyId, companyName, initialYear, kategorien } =
|
||||
useLoaderData<typeof loader>();
|
||||
const { revalidate } = useRevalidator();
|
||||
|
||||
@@ -92,6 +116,7 @@ export default function AusgabenPage() {
|
||||
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 AusgabenPage() {
|
||||
setYear(y);
|
||||
setLoadingYear(true);
|
||||
const res = await fetch(`/api/ausgaben?companyId=${companyId}&year=${y}`);
|
||||
const data: Ausgabe[] = await res.json();
|
||||
setAusgaben(data);
|
||||
const raw: Array<Record<string, unknown>> = await res.json();
|
||||
setAusgaben(raw.map((a) => ({
|
||||
id: a.id as string,
|
||||
kategorie: (a.kategorie as string) ?? "",
|
||||
betrag: Number(a.amount),
|
||||
steuersatz: (a.steuersatz as number | null) ?? 19,
|
||||
zahlungsart: ((a.zahlungsart as string) || "BANK") as "KASSE" | "BANK",
|
||||
datum: a.date as string,
|
||||
beschreibung: (a.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 AusgabenPage() {
|
||||
return s + (rate > 0 ? Math.round((a.betrag / (1 + rate)) * rate * 100) / 100 : 0);
|
||||
}, 0);
|
||||
|
||||
const activeMonate = useMemo(() => {
|
||||
const set = new Set(ausgaben.map((a) => new Date(a.datum).getMonth()));
|
||||
return Array.from({ length: 12 }, (_, i) => i).filter((m) => set.has(m));
|
||||
}, [ausgaben]);
|
||||
|
||||
const pivot = useMemo(() => {
|
||||
const map = new Map<string, Map<number, Ausgabe[]>>();
|
||||
for (const a of ausgaben) {
|
||||
if (!map.has(a.kategorie)) map.set(a.kategorie, new Map());
|
||||
const monat = new Date(a.datum).getMonth();
|
||||
const inner = map.get(a.kategorie)!;
|
||||
if (!inner.has(monat)) inner.set(monat, []);
|
||||
inner.get(monat)!.push(a);
|
||||
}
|
||||
return map;
|
||||
}, [ausgaben]);
|
||||
|
||||
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 AusgabenPage() {
|
||||
>
|
||||
{years.map((y) => <option key={y} value={y}>{y}</option>)}
|
||||
</select>
|
||||
<Link
|
||||
to={`/companies/${companyId}/ausgaben/kategorien`}
|
||||
className="text-sm text-gray-500 hover:text-gray-700 underline-offset-2 hover:underline"
|
||||
>
|
||||
Kategorien verwalten
|
||||
</Link>
|
||||
<Button onClick={openCreate} className="bg-rose-600 hover:bg-rose-700">
|
||||
<Plus className="h-4 w-4" />
|
||||
Neue Ausgabe
|
||||
@@ -238,7 +296,7 @@ export default function AusgabenPage() {
|
||||
</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 AusgabenPage() {
|
||||
<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">
|
||||
{ausgaben.map((a) => {
|
||||
const rate = a.steuersatz / 100;
|
||||
const netto = rate > 0 ? Math.round((a.betrag / (1 + rate)) * 100) / 100 : a.betrag;
|
||||
{activeKategorien.map((kat) => {
|
||||
const katMap = pivot.get(kat)!;
|
||||
const katGesamt = [...katMap.values()].flat().reduce((s, a) => s + a.betrag, 0);
|
||||
return (
|
||||
<tr key={a.id} className="hover:bg-slate-50/60 group">
|
||||
<td className="px-4 py-2.5 text-slate-600 whitespace-nowrap">
|
||||
{new Date(a.datum).toLocaleDateString("de-DE")}
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-slate-700 font-medium">
|
||||
{KATEGORIE_LABELS[a.kategorie]}
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-right font-medium text-rose-700 whitespace-nowrap">
|
||||
{formatCurrency(a.betrag)}
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-center">
|
||||
{a.steuersatz > 0 ? (
|
||||
<Badge variant="secondary">{a.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">
|
||||
{a.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">
|
||||
{a.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(a)}
|
||||
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(a.id)}
|
||||
disabled={deleting === a.id}
|
||||
className="p-1 rounded hover:bg-red-50 text-slate-400 hover:text-red-600"
|
||||
title="Löschen"
|
||||
>
|
||||
{deleting === a.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, a) => s + a.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-rose-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-rose-700 whitespace-nowrap">
|
||||
{formatCurrency(katGesamt)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
@@ -338,13 +361,20 @@ export default function AusgabenPage() {
|
||||
</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-rose-600">{formatCurrency(gesamt)}</td>
|
||||
<td />
|
||||
<td className="px-3 py-2.5 text-right text-xs font-bold text-slate-600">
|
||||
{formatCurrency(gesamt - vorstGesamt)}
|
||||
<td className="px-4 py-2.5 text-xs font-bold text-slate-700">Gesamt</td>
|
||||
{activeMonate.map((m) => {
|
||||
const monatSum = ausgaben
|
||||
.filter((a) => new Date(a.datum).getMonth() === m)
|
||||
.reduce((s, a) => s + a.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-rose-600 whitespace-nowrap">
|
||||
{formatCurrency(gesamt)}
|
||||
</td>
|
||||
<td colSpan={3} />
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
@@ -352,6 +382,116 @@ export default function AusgabenPage() {
|
||||
</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, a) => s + a.betrag, 0);
|
||||
const monatVorst = items.reduce((s, a) => {
|
||||
const rate = a.steuersatz / 100;
|
||||
return s + (rate > 0 ? Math.round((a.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((a) => {
|
||||
const rate = a.steuersatz / 100;
|
||||
const netto = rate > 0 ? Math.round((a.betrag / (1 + rate)) * 100) / 100 : a.betrag;
|
||||
return (
|
||||
<tr key={a.id} className="hover:bg-slate-50/60 group">
|
||||
<td className="px-3 py-2 text-slate-600 whitespace-nowrap">
|
||||
{new Date(a.datum).toLocaleDateString("de-DE")}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-right font-medium text-rose-700 whitespace-nowrap">
|
||||
{formatCurrency(a.betrag)}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-center">
|
||||
{a.steuersatz > 0 ? (
|
||||
<Badge variant="secondary">{a.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">
|
||||
{a.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]">
|
||||
{a.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(a); }}
|
||||
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(a.id)}
|
||||
disabled={deleting === a.id}
|
||||
className="p-1 rounded hover:bg-red-50 text-slate-400 hover:text-red-600"
|
||||
title="Löschen"
|
||||
>
|
||||
{deleting === a.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-rose-600">{formatCurrency(monatGesamt)}</td>
|
||||
<td />
|
||||
<td className="px-3 py-2 text-right text-xs font-bold text-slate-600">
|
||||
{formatCurrency(monatGesamt - monatVorst)}
|
||||
</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 AusgabenPage() {
|
||||
</label>
|
||||
<select
|
||||
value={form.kategorie}
|
||||
onChange={(e) => setForm((f) => ({ ...f, kategorie: e.target.value as AusgabeKategorieKey }))}
|
||||
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-rose-500"
|
||||
>
|
||||
{AUSGABE_KATEGORIEN.map((k) => (
|
||||
<option key={k} value={k}>{KATEGORIE_LABELS[k]}</option>
|
||||
{kategorien.map((k) => (
|
||||
<option key={k} value={k}>{k}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,270 @@
|
||||
import { useState } from "react";
|
||||
import { Link, useLoaderData, useRevalidator } from "react-router";
|
||||
import { requireUser } from "@/session.server";
|
||||
import prisma from "@/lib/prisma.server";
|
||||
import { DEFAULT_EINNAHME_KATEGORIEN } from "@/lib/kategorie-defaults";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import { ChevronLeft, Plus, Pencil, Trash2, Loader2 } from "lucide-react";
|
||||
|
||||
export const handle = {
|
||||
breadcrumbs: (data: { companyId: string; companyName: string }) => [
|
||||
{ label: "Mandanten", href: "/companies" },
|
||||
{ label: data.companyName, href: `/companies/${data.companyId}` },
|
||||
{ label: "Sonstige Einnahmen", href: `/companies/${data.companyId}/einnahmen` },
|
||||
{ label: "Kategorien" },
|
||||
],
|
||||
};
|
||||
|
||||
interface Kategorie {
|
||||
id: string;
|
||||
name: string;
|
||||
inUse: boolean;
|
||||
}
|
||||
|
||||
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 });
|
||||
|
||||
// Auto-seed Standardkategorien wenn noch keine vorhanden
|
||||
const existing = await prisma.buchungKategorie.count({
|
||||
where: { companyId: params.id, typ: "EINNAHME" },
|
||||
});
|
||||
if (existing === 0) {
|
||||
await prisma.buchungKategorie.createMany({
|
||||
data: DEFAULT_EINNAHME_KATEGORIEN.map((name) => ({
|
||||
companyId: params.id,
|
||||
name,
|
||||
typ: "EINNAHME",
|
||||
})),
|
||||
skipDuplicates: true,
|
||||
});
|
||||
}
|
||||
|
||||
const kats = await prisma.buchungKategorie.findMany({
|
||||
where: { companyId: params.id, typ: "EINNAHME" },
|
||||
orderBy: { name: "asc" },
|
||||
});
|
||||
|
||||
const withUsage = await Promise.all(
|
||||
kats.map(async (k) => ({
|
||||
id: k.id,
|
||||
name: k.name,
|
||||
inUse:
|
||||
(await prisma.buchung.count({
|
||||
where: { companyId: params.id, kategorie: k.name, isBusinessRecord: true },
|
||||
})) > 0,
|
||||
}))
|
||||
);
|
||||
|
||||
return {
|
||||
companyId: company.id,
|
||||
companyName: company.name,
|
||||
kategorien: withUsage,
|
||||
};
|
||||
}
|
||||
|
||||
export default function EinnahmenKategorienPage() {
|
||||
const { kategorien: initialKategorien, companyId, companyName } =
|
||||
useLoaderData<typeof loader>();
|
||||
const { revalidate } = useRevalidator();
|
||||
|
||||
const [kategorien, setKategorien] = useState<Kategorie[]>(initialKategorien);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [deleting, setDeleting] = useState<string | null>(null);
|
||||
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [name, setName] = useState("");
|
||||
const [nameError, setNameError] = useState("");
|
||||
|
||||
async function reload() {
|
||||
const res = await fetch(`/api/companies/${companyId}/buchungkategorien?typ=EINNAHME`);
|
||||
const data: Kategorie[] = await res.json();
|
||||
setKategorien(data);
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
setEditingId(null);
|
||||
setName("");
|
||||
setNameError("");
|
||||
setDialogOpen(true);
|
||||
}
|
||||
|
||||
function openEdit(k: Kategorie) {
|
||||
setEditingId(k.id);
|
||||
setName(k.name);
|
||||
setNameError("");
|
||||
setDialogOpen(true);
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
if (!name.trim()) { setNameError("Name ist erforderlich"); return; }
|
||||
setSaving(true);
|
||||
try {
|
||||
if (editingId) {
|
||||
const res = await fetch(`/api/companies/${companyId}/buchungkategorien/${editingId}`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ name: name.trim() }),
|
||||
});
|
||||
if (!res.ok) { setNameError("Fehler beim Speichern"); return; }
|
||||
} else {
|
||||
const res = await fetch(`/api/companies/${companyId}/buchungkategorien`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ name: name.trim(), typ: "EINNAHME" }),
|
||||
});
|
||||
if (!res.ok) { setNameError("Kategorie existiert bereits"); return; }
|
||||
}
|
||||
setDialogOpen(false);
|
||||
await reload();
|
||||
revalidate();
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(k: Kategorie) {
|
||||
if (!confirm(`Kategorie "${k.name}" wirklich löschen?`)) return;
|
||||
setDeleting(k.id);
|
||||
const res = await fetch(`/api/companies/${companyId}/buchungkategorien/${k.id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
if (!res.ok) {
|
||||
const data = await res.json();
|
||||
alert(data.error ?? "Löschen fehlgeschlagen");
|
||||
} else {
|
||||
await reload();
|
||||
revalidate();
|
||||
}
|
||||
setDeleting(null);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Link
|
||||
to={`/companies/${companyId}/einnahmen`}
|
||||
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 zu Sonstige Einnahmen
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Einnahmen-Kategorien</h1>
|
||||
<p className="text-gray-500 mt-1">{companyName}</p>
|
||||
</div>
|
||||
<Button onClick={openCreate} className="bg-emerald-600 hover:bg-emerald-700">
|
||||
<Plus className="h-4 w-4" />
|
||||
Neue Kategorie
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{kategorien.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="py-16 text-center text-gray-400">
|
||||
<p className="text-sm">Noch keine Kategorien vorhanden.</p>
|
||||
<Button variant="outline" className="mt-4" onClick={openCreate}>
|
||||
<Plus className="h-4 w-4" /> Erste Kategorie anlegen
|
||||
</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">
|
||||
Name
|
||||
</th>
|
||||
<th className="px-3 py-2.5 text-center text-xs font-semibold text-slate-500 uppercase tracking-wide">
|
||||
In Verwendung
|
||||
</th>
|
||||
<th className="px-3 py-2.5 w-20" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{kategorien.map((k) => (
|
||||
<tr key={k.id} className="hover:bg-slate-50/60 group">
|
||||
<td className="px-4 py-2.5 text-slate-700 font-medium">{k.name}</td>
|
||||
<td className="px-3 py-2.5 text-center">
|
||||
{k.inUse ? (
|
||||
<span className="text-xs text-emerald-600 font-medium">Ja</span>
|
||||
) : (
|
||||
<span className="text-xs text-slate-400">Nein</span>
|
||||
)}
|
||||
</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(k)}
|
||||
className="p-1 rounded hover:bg-slate-100 text-slate-500 hover:text-slate-700"
|
||||
title="Umbenennen"
|
||||
>
|
||||
<Pencil className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(k)}
|
||||
disabled={k.inUse || deleting === k.id}
|
||||
className="p-1 rounded hover:bg-red-50 text-slate-400 hover:text-red-600 disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
title={k.inUse ? "Wird verwendet – kann nicht gelöscht werden" : "Löschen"}
|
||||
>
|
||||
{deleting === k.id ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogContent className="sm:max-w-sm">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{editingId ? "Kategorie umbenennen" : "Neue Kategorie"}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="py-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Name <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => { setName(e.target.value); setNameError(""); }}
|
||||
onKeyDown={(e) => e.key === "Enter" && handleSave()}
|
||||
placeholder="z.B. Beratungseinnahmen"
|
||||
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"
|
||||
autoFocus
|
||||
/>
|
||||
{nameError && <p className="mt-1 text-xs text-red-500">{nameError}</p>}
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Button variant="outline" onClick={() => setDialogOpen(false)}>Abbrechen</Button>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
disabled={saving || !name.trim()}
|
||||
className="bg-emerald-600 hover:bg-emerald-700"
|
||||
>
|
||||
{saving && <Loader2 className="h-4 w-4 animate-spin" />}
|
||||
{editingId ? "Speichern" : "Anlegen"}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
export default {
|
||||
plugins: {
|
||||
"@tailwindcss/postcss": {},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,31 @@
|
||||
-- Migration: Buchung.kategorie Keys → Anzeigelabels
|
||||
-- Ausgaben (ENTNAHME)
|
||||
UPDATE buchungen SET kategorie = 'Waren, Rohstoffe, Hilfsstoffe' WHERE kategorie = 'WAREN_ROHSTOFFE';
|
||||
UPDATE buchungen SET kategorie = 'Geringwertige Wirtschaftsgüter' WHERE kategorie = 'GERINGWERTIGE_WIRTSCHAFTSGUETER';
|
||||
UPDATE buchungen SET kategorie = 'Abschreibungen' WHERE kategorie = 'ABSCHREIBUNGEN';
|
||||
UPDATE buchungen SET kategorie = 'Miete' WHERE kategorie = 'MIETE';
|
||||
UPDATE buchungen SET kategorie = 'Strom, Wasser' WHERE kategorie = 'STROM_WASSER';
|
||||
UPDATE buchungen SET kategorie = 'Telekommunikationskosten' WHERE kategorie = 'TELEKOMMUNIKATION';
|
||||
UPDATE buchungen SET kategorie = 'Fortbildungskosten/Messen' WHERE kategorie = 'FORTBILDUNG_MESSEN';
|
||||
UPDATE buchungen SET kategorie = 'Beiträge' WHERE kategorie = 'BEITRAEGE';
|
||||
UPDATE buchungen SET kategorie = 'Versicherungen' WHERE kategorie = 'VERSICHERUNGEN';
|
||||
UPDATE buchungen SET kategorie = 'Werbekosten' WHERE kategorie = 'WERBEKOSTEN';
|
||||
UPDATE buchungen SET kategorie = 'Zinsen' WHERE kategorie = 'ZINSEN';
|
||||
UPDATE buchungen SET kategorie = 'Reisekosten' WHERE kategorie = 'REISEKOSTEN';
|
||||
UPDATE buchungen SET kategorie = 'Reparaturen / Instandhaltung' WHERE kategorie = 'REPARATUREN_INSTANDHALTUNG';
|
||||
UPDATE buchungen SET kategorie = 'Bürobedarf' WHERE kategorie = 'BUEROBEDARF';
|
||||
UPDATE buchungen SET kategorie = 'Repräsentationskosten' WHERE kategorie = 'REPRAESENTATIONSKOSTEN';
|
||||
UPDATE buchungen SET kategorie = 'Sonstiger Betriebsbedarf' WHERE kategorie = 'SONSTIGER_BETRIEBSBEDARF';
|
||||
UPDATE buchungen SET kategorie = 'Nebenkosten des Geldverkehrs' WHERE kategorie = 'NEBENKOSTEN_GELDVERKEHR';
|
||||
|
||||
-- Einnahmen (EINLAGE)
|
||||
UPDATE buchungen SET kategorie = 'Fußpflege/Verkauf/Gutscheine' WHERE kategorie = 'FUSSPFLEGE';
|
||||
UPDATE buchungen SET kategorie = 'Privateinlagen' WHERE kategorie = 'PRIVATEINLAGEN';
|
||||
UPDATE buchungen SET kategorie = 'Darlehen' WHERE kategorie = 'DARLEHEN';
|
||||
UPDATE buchungen SET kategorie = 'Steuererstattungen' WHERE kategorie = 'STEUERERSTATTUNGEN';
|
||||
UPDATE buchungen SET kategorie = 'Versicherungserstattungen' WHERE kategorie = 'VERSICHERUNGSERSTATTUNGEN';
|
||||
UPDATE buchungen SET kategorie = 'Zinserträge' WHERE kategorie = 'ZINSERTRAEGE';
|
||||
UPDATE buchungen SET kategorie = 'Miet-/Pachteinnahmen' WHERE kategorie = 'VERMIETUNG_VERPACHTUNG';
|
||||
UPDATE buchungen SET kategorie = 'Veräußerungserlöse' WHERE kategorie = 'VERAEUSSERUNGSERLOES';
|
||||
UPDATE buchungen SET kategorie = 'Eigenverbrauch' WHERE kategorie = 'EIGENVERBRAUCH';
|
||||
UPDATE buchungen SET kategorie = 'Sonstige Einnahmen' WHERE kategorie = 'SONSTIGE_EINNAHMEN';
|
||||
+188
@@ -0,0 +1,188 @@
|
||||
import { PrismaClient } from "@prisma/client";
|
||||
import bcrypt from "bcryptjs";
|
||||
const prisma = new PrismaClient();
|
||||
async function main() {
|
||||
console.log("Seeding database...");
|
||||
// Create demo user
|
||||
const passwordHash = await bcrypt.hash("annas_password", 12);
|
||||
const user = await prisma.user.upsert({
|
||||
where: { email: "anna@example.de" },
|
||||
update: {},
|
||||
create: {
|
||||
email: "anna@example.de",
|
||||
username: "anna",
|
||||
passwordHash,
|
||||
name: "Anna Musterfrau",
|
||||
role: "ADMIN",
|
||||
},
|
||||
});
|
||||
console.log(`✓ User created: ${user.email} (username: ${user.username}, role: ${user.role})`);
|
||||
// Create demo company
|
||||
const company = await prisma.company.upsert({
|
||||
where: { id: "demo-company-1" },
|
||||
update: {},
|
||||
create: {
|
||||
id: "demo-company-1",
|
||||
name: "Muster GmbH",
|
||||
legalForm: "GmbH",
|
||||
taxId: "123/456/78901",
|
||||
vatId: "DE123456789",
|
||||
address: "Musterstraße 1",
|
||||
zip: "10115",
|
||||
city: "Berlin",
|
||||
email: "info@muster-gmbh.de",
|
||||
phone: "+49 30 12345678",
|
||||
bankName: "Musterbank",
|
||||
bankIban: "DE89 3704 0044 0532 0130 00",
|
||||
bankBic: "COBADEFFXXX",
|
||||
invoicePrefix: "RE",
|
||||
userId: user.id,
|
||||
},
|
||||
});
|
||||
console.log(`✓ Company created: ${company.name}`);
|
||||
// Create demo customer
|
||||
const customer = await prisma.customer.upsert({
|
||||
where: { id: "demo-customer-1" },
|
||||
update: {},
|
||||
create: {
|
||||
id: "demo-customer-1",
|
||||
companyId: company.id,
|
||||
name: "Beispiel AG",
|
||||
address: "Beispielweg 5",
|
||||
zip: "20095",
|
||||
city: "Hamburg",
|
||||
email: "kontakt@beispiel-ag.de",
|
||||
},
|
||||
});
|
||||
console.log(`✓ Customer created: ${customer.name}`);
|
||||
// Create demo invoice
|
||||
const invoice = await prisma.invoice.upsert({
|
||||
where: { id: "demo-invoice-1" },
|
||||
update: {},
|
||||
create: {
|
||||
id: "demo-invoice-1",
|
||||
number: "RE-2024-001",
|
||||
companyId: company.id,
|
||||
customerId: customer.id,
|
||||
issueDate: new Date("2024-01-15"),
|
||||
deliveryDate: new Date("2024-01-15"),
|
||||
dueDate: new Date("2024-02-14"),
|
||||
status: "SENT",
|
||||
netTotal: 1000.0,
|
||||
taxTotal: 190.0,
|
||||
grossTotal: 1190.0,
|
||||
items: {
|
||||
create: [
|
||||
{
|
||||
position: 1,
|
||||
description: "Buchhaltungsleistungen Januar 2024",
|
||||
quantity: 10,
|
||||
unit: "h",
|
||||
unitPrice: 100.0,
|
||||
taxRate: 19.0,
|
||||
netAmount: 1000.0,
|
||||
taxAmount: 190.0,
|
||||
grossAmount: 1190.0,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
console.log(`✓ Invoice created: ${invoice.number}`);
|
||||
const invoice2 = await prisma.invoice.upsert({
|
||||
where: { id: "demo-invoice-2" },
|
||||
update: {},
|
||||
create: {
|
||||
id: "demo-invoice-2",
|
||||
number: "RE-2024-002",
|
||||
companyId: company.id,
|
||||
customerId: customer.id,
|
||||
issueDate: new Date("2026-02-15"),
|
||||
deliveryDate: new Date("2026-02-15"),
|
||||
dueDate: new Date("2026-03-14"),
|
||||
status: "PAID",
|
||||
netTotal: 2000.0,
|
||||
taxTotal: 380.0,
|
||||
grossTotal: 2380.0,
|
||||
items: {
|
||||
create: [
|
||||
{
|
||||
position: 1,
|
||||
description: "Buchhaltungsleistungen Februar 2024",
|
||||
quantity: 10,
|
||||
unit: "h",
|
||||
unitPrice: 200.0,
|
||||
taxRate: 19.0,
|
||||
netAmount: 2000.0,
|
||||
taxAmount: 380.0,
|
||||
grossAmount: 2380.0,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
console.log(`✓ Invoice created: ${invoice2.number}`);
|
||||
// Update company sequence
|
||||
await prisma.company.update({
|
||||
where: { id: company.id },
|
||||
data: { invoiceSequence: 1 },
|
||||
});
|
||||
// Seed BuchungKategorien for demo company
|
||||
const einnahmeKategorien = [
|
||||
"Fußpflege",
|
||||
"Privateinlagen",
|
||||
"Darlehen",
|
||||
"Steuererstattungen",
|
||||
"Versicherungserstattungen",
|
||||
"Zinsertrage",
|
||||
"Vermietung/Verpachtung",
|
||||
"Veräußerungserlös",
|
||||
"Eigenverbrauch",
|
||||
"Sonstige Einnahmen",
|
||||
];
|
||||
const ausgabeKategorien = [
|
||||
"Waren und Rohstoffe",
|
||||
"Geringwertige Wirtschaftsgüter",
|
||||
"Abschreibungen",
|
||||
"Miete",
|
||||
"Strom und Wasser",
|
||||
"Telekommunikation",
|
||||
"Fortbildung und Messen",
|
||||
"Beiträge",
|
||||
"Versicherungen",
|
||||
"Werbekosten",
|
||||
"Zinsen",
|
||||
"Reisekosten",
|
||||
"Reparaturen und Instandhaltung",
|
||||
"Bürobedarf",
|
||||
"Repräsentationskosten",
|
||||
"Sonstiger Betriebsbedarf",
|
||||
"Nebenkosten Geldverkehr",
|
||||
];
|
||||
for (const name of einnahmeKategorien) {
|
||||
await prisma.buchungKategorie.upsert({
|
||||
where: { companyId_name_typ: { companyId: company.id, name, typ: "EINNAHME" } },
|
||||
update: {},
|
||||
create: { companyId: company.id, name, typ: "EINNAHME" },
|
||||
});
|
||||
}
|
||||
console.log(`✓ Seeded ${einnahmeKategorien.length} Einnahme categories`);
|
||||
for (const name of ausgabeKategorien) {
|
||||
await prisma.buchungKategorie.upsert({
|
||||
where: { companyId_name_typ: { companyId: company.id, name, typ: "AUSGABE" } },
|
||||
update: {},
|
||||
create: { companyId: company.id, name, typ: "AUSGABE" },
|
||||
});
|
||||
}
|
||||
console.log(`✓ Seeded ${ausgabeKategorien.length} Ausgabe categories`);
|
||||
console.log("\n✅ Seed complete!");
|
||||
console.log("Login: anna@example.de / annas_password");
|
||||
}
|
||||
main()
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
process.exit(1);
|
||||
})
|
||||
.finally(async () => {
|
||||
await prisma.$disconnect();
|
||||
});
|
||||
@@ -0,0 +1,3 @@
|
||||
export default {
|
||||
ssr: true,
|
||||
};
|
||||
@@ -12,6 +12,7 @@
|
||||
"target": "ES2022",
|
||||
"strict": true,
|
||||
"allowJs": true,
|
||||
"noEmit": true,
|
||||
"skipLibCheck": true,
|
||||
"paths": {
|
||||
"@/*": ["./app/*"]
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import { defineConfig } from "vite";
|
||||
import { reactRouter } from "@react-router/dev/vite";
|
||||
import tsconfigPaths from "vite-tsconfig-paths";
|
||||
export default defineConfig({
|
||||
plugins: [reactRouter(), tsconfigPaths()],
|
||||
});
|
||||
Reference in New Issue
Block a user