feat: Initial implementation of Annas Rechnungsmanager
Full-stack German accounting & invoice management web application: - Multi-company management (Mandantenverwaltung) with full CRUD - Invoice creation with dynamic line items and automatic tax calculation - Sequential invoice numbering per company (RE-2024-001 format) - §14 UStG compliant PDF invoice generation via @react-pdf/renderer - Customer management (Kundenverwaltung) per company - Tax reports: quarterly USt-Voranmeldung and monthly revenue overview - Email/password authentication via NextAuth.js v5 - Responsive, modern UI with Tailwind CSS and custom shadcn/ui components - Prisma v5 ORM with MySQL/MariaDB schema + demo seed data Stack: Next.js 14 (App Router) · TypeScript · Prisma/MySQL · NextAuth.js https://claude.ai/code/session_01FN53KKxo5ebrGwqFhxzkT9
This commit is contained in:
Claude
@@ -0,0 +1,3 @@
|
|||||||
|
DATABASE_URL="mysql://user:password@localhost:3306/annas_rechnungsmanager"
|
||||||
|
AUTH_SECRET="your-random-secret-here"
|
||||||
|
NEXTAUTH_URL="http://localhost:3000"
|
||||||
+45
@@ -0,0 +1,45 @@
|
|||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.*
|
||||||
|
.yarn/*
|
||||||
|
!.yarn/patches
|
||||||
|
!.yarn/plugins
|
||||||
|
!.yarn/releases
|
||||||
|
!.yarn/versions
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# next.js
|
||||||
|
/.next/
|
||||||
|
/out/
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
*.pem
|
||||||
|
|
||||||
|
# debug
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
.pnpm-debug.log*
|
||||||
|
|
||||||
|
# env files (can opt-in for committing if needed)
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
.env.production
|
||||||
|
|
||||||
|
# vercel
|
||||||
|
.vercel
|
||||||
|
|
||||||
|
# typescript
|
||||||
|
*.tsbuildinfo
|
||||||
|
next-env.d.ts
|
||||||
|
|
||||||
|
/src/generated/prisma
|
||||||
@@ -0,0 +1,73 @@
|
|||||||
|
# Annas Rechnungsmanager
|
||||||
|
|
||||||
|
Buchhaltungs- und Rechnungsverwaltungssystem für Mandanten.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- **Mandantenverwaltung** — Mehrere Unternehmen verwalten
|
||||||
|
- **Rechnungen** — Erstellen, verwalten, als PDF exportieren (§14 UStG konform)
|
||||||
|
- **Kundenverwaltung** — Kundenstammdaten pro Mandant
|
||||||
|
- **Steuerberichte** — USt-Voranmeldung, monatliche & quartalsweise Auswertungen
|
||||||
|
|
||||||
|
## Tech Stack
|
||||||
|
|
||||||
|
- **Next.js 14** (App Router) + TypeScript
|
||||||
|
- **MySQL / MariaDB** via Prisma ORM
|
||||||
|
- **NextAuth.js v5** (Email/Passwort-Login)
|
||||||
|
- **Tailwind CSS** + shadcn/ui
|
||||||
|
- **@react-pdf/renderer** für PDF-Generierung
|
||||||
|
|
||||||
|
## Setup
|
||||||
|
|
||||||
|
### 1. Voraussetzungen
|
||||||
|
|
||||||
|
- Node.js 18+
|
||||||
|
- MySQL oder MariaDB
|
||||||
|
|
||||||
|
### 2. Installation
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. Datenbank konfigurieren
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cp .env.example .env
|
||||||
|
# DATABASE_URL in .env anpassen
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4. Datenbank einrichten
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx prisma migrate dev --name init
|
||||||
|
npx prisma db seed
|
||||||
|
```
|
||||||
|
|
||||||
|
**Demo-Zugangsdaten:** `anna@example.de` / `demo123`
|
||||||
|
|
||||||
|
### 5. Entwicklungsserver starten
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Öffne [http://localhost:3000](http://localhost:3000)
|
||||||
|
|
||||||
|
## Datenbank-Kommandos
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run db:migrate # Migrationen ausführen
|
||||||
|
npm run db:seed # Demo-Daten einspielen
|
||||||
|
npm run db:studio # Prisma Studio öffnen
|
||||||
|
```
|
||||||
|
|
||||||
|
## Rechnungs-Compliance (§14 UStG)
|
||||||
|
|
||||||
|
Alle PDFs enthalten die gesetzlich vorgeschriebenen Pflichtangaben:
|
||||||
|
- Name & Anschrift Rechnungssteller und -empfänger
|
||||||
|
- Steuernummer / USt-IdNr. des Ausstellers
|
||||||
|
- Rechnungsdatum & Rechnungsnummer (fortlaufend)
|
||||||
|
- Leistungsdatum / Lieferdatum
|
||||||
|
- Leistungsbeschreibung
|
||||||
|
- Nettobetrag, USt-Satz, USt-Betrag, Bruttobetrag
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
import { defineConfig, globalIgnores } from "eslint/config";
|
||||||
|
import nextVitals from "eslint-config-next/core-web-vitals";
|
||||||
|
import nextTs from "eslint-config-next/typescript";
|
||||||
|
|
||||||
|
const eslintConfig = defineConfig([
|
||||||
|
...nextVitals,
|
||||||
|
...nextTs,
|
||||||
|
// Override default ignores of eslint-config-next.
|
||||||
|
globalIgnores([
|
||||||
|
// Default ignores of eslint-config-next:
|
||||||
|
".next/**",
|
||||||
|
"out/**",
|
||||||
|
"build/**",
|
||||||
|
"next-env.d.ts",
|
||||||
|
]),
|
||||||
|
]);
|
||||||
|
|
||||||
|
export default eslintConfig;
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
import type { NextConfig } from "next";
|
||||||
|
|
||||||
|
const nextConfig: NextConfig = {
|
||||||
|
/* config options here */
|
||||||
|
};
|
||||||
|
|
||||||
|
export default nextConfig;
|
||||||
Generated
+8518
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,54 @@
|
|||||||
|
{
|
||||||
|
"name": "annas-app",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start",
|
||||||
|
"lint": "eslint",
|
||||||
|
"db:migrate": "prisma migrate dev",
|
||||||
|
"db:seed": "ts-node --compiler-options '{\"module\":\"CommonJS\"}' prisma/seed.ts",
|
||||||
|
"db:studio": "prisma studio"
|
||||||
|
},
|
||||||
|
"prisma": {
|
||||||
|
"seed": "npx ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@auth/prisma-adapter": "^2.11.1",
|
||||||
|
"@hookform/resolvers": "^5.2.2",
|
||||||
|
"@prisma/client": "^5.22.0",
|
||||||
|
"@radix-ui/react-dialog": "^1.1.15",
|
||||||
|
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||||
|
"@radix-ui/react-label": "^2.1.8",
|
||||||
|
"@radix-ui/react-select": "^2.2.6",
|
||||||
|
"@radix-ui/react-separator": "^1.1.8",
|
||||||
|
"@radix-ui/react-slot": "^1.2.4",
|
||||||
|
"@radix-ui/react-toast": "^1.2.15",
|
||||||
|
"@react-pdf/renderer": "^4.3.2",
|
||||||
|
"@types/bcryptjs": "^2.4.6",
|
||||||
|
"bcryptjs": "^3.0.3",
|
||||||
|
"class-variance-authority": "^0.7.1",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"date-fns": "^4.1.0",
|
||||||
|
"lucide-react": "^0.577.0",
|
||||||
|
"next": "16.1.6",
|
||||||
|
"next-auth": "^5.0.0-beta.30",
|
||||||
|
"prisma": "^5.22.0",
|
||||||
|
"react": "19.2.3",
|
||||||
|
"react-dom": "19.2.3",
|
||||||
|
"react-hook-form": "^7.71.2",
|
||||||
|
"tailwind-merge": "^3.5.0",
|
||||||
|
"zod": "^4.3.6"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tailwindcss/postcss": "^4",
|
||||||
|
"@types/node": "^20",
|
||||||
|
"@types/react": "^19",
|
||||||
|
"@types/react-dom": "^19",
|
||||||
|
"eslint": "^9",
|
||||||
|
"eslint-config-next": "16.1.6",
|
||||||
|
"tailwindcss": "^4",
|
||||||
|
"typescript": "^5"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
const config = {
|
||||||
|
plugins: {
|
||||||
|
"@tailwindcss/postcss": {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
@@ -0,0 +1,115 @@
|
|||||||
|
generator client {
|
||||||
|
provider = "prisma-client-js"
|
||||||
|
}
|
||||||
|
|
||||||
|
datasource db {
|
||||||
|
provider = "mysql"
|
||||||
|
url = env("DATABASE_URL")
|
||||||
|
}
|
||||||
|
|
||||||
|
model User {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
email String @unique
|
||||||
|
passwordHash String
|
||||||
|
name String
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
updatedAt DateTime @updatedAt
|
||||||
|
companies Company[]
|
||||||
|
|
||||||
|
@@map("users")
|
||||||
|
}
|
||||||
|
|
||||||
|
model Company {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
name String
|
||||||
|
legalForm String?
|
||||||
|
taxId String?
|
||||||
|
vatId String?
|
||||||
|
address String
|
||||||
|
zip String
|
||||||
|
city String
|
||||||
|
country String @default("DE")
|
||||||
|
email String?
|
||||||
|
phone String?
|
||||||
|
website String?
|
||||||
|
bankIban String?
|
||||||
|
bankBic String?
|
||||||
|
bankName String?
|
||||||
|
invoicePrefix String @default("RE")
|
||||||
|
invoiceSequence Int @default(0)
|
||||||
|
userId String
|
||||||
|
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
|
||||||
|
customers Customer[]
|
||||||
|
invoices Invoice[]
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
updatedAt DateTime @updatedAt
|
||||||
|
|
||||||
|
@@map("companies")
|
||||||
|
}
|
||||||
|
|
||||||
|
model Customer {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
companyId String
|
||||||
|
company Company @relation(fields: [companyId], references: [id], onDelete: Cascade)
|
||||||
|
name String
|
||||||
|
vatId String?
|
||||||
|
taxId String?
|
||||||
|
address String
|
||||||
|
zip String
|
||||||
|
city String
|
||||||
|
country String @default("DE")
|
||||||
|
email String?
|
||||||
|
phone String?
|
||||||
|
invoices Invoice[]
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
updatedAt DateTime @updatedAt
|
||||||
|
|
||||||
|
@@map("customers")
|
||||||
|
}
|
||||||
|
|
||||||
|
model Invoice {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
number String
|
||||||
|
companyId String
|
||||||
|
company Company @relation(fields: [companyId], references: [id], onDelete: Cascade)
|
||||||
|
customerId String
|
||||||
|
customer Customer @relation(fields: [customerId], references: [id])
|
||||||
|
issueDate DateTime
|
||||||
|
deliveryDate DateTime?
|
||||||
|
dueDate DateTime
|
||||||
|
status InvoiceStatus @default(DRAFT)
|
||||||
|
notes String? @db.Text
|
||||||
|
items InvoiceItem[]
|
||||||
|
netTotal Decimal @db.Decimal(10, 2)
|
||||||
|
taxTotal Decimal @db.Decimal(10, 2)
|
||||||
|
grossTotal Decimal @db.Decimal(10, 2)
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
updatedAt DateTime @updatedAt
|
||||||
|
|
||||||
|
@@unique([companyId, number])
|
||||||
|
@@map("invoices")
|
||||||
|
}
|
||||||
|
|
||||||
|
enum InvoiceStatus {
|
||||||
|
DRAFT
|
||||||
|
SENT
|
||||||
|
PAID
|
||||||
|
CANCELLED
|
||||||
|
}
|
||||||
|
|
||||||
|
model InvoiceItem {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
invoiceId String
|
||||||
|
invoice Invoice @relation(fields: [invoiceId], references: [id], onDelete: Cascade)
|
||||||
|
position Int
|
||||||
|
description String @db.Text
|
||||||
|
quantity Decimal @db.Decimal(10, 3)
|
||||||
|
unit String?
|
||||||
|
unitPrice Decimal @db.Decimal(10, 2)
|
||||||
|
taxRate Decimal @db.Decimal(5, 2)
|
||||||
|
netAmount Decimal @db.Decimal(10, 2)
|
||||||
|
taxAmount Decimal @db.Decimal(10, 2)
|
||||||
|
grossAmount Decimal @db.Decimal(10, 2)
|
||||||
|
|
||||||
|
@@map("invoice_items")
|
||||||
|
}
|
||||||
+112
@@ -0,0 +1,112 @@
|
|||||||
|
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("demo123", 12);
|
||||||
|
const user = await prisma.user.upsert({
|
||||||
|
where: { email: "anna@example.de" },
|
||||||
|
update: {},
|
||||||
|
create: {
|
||||||
|
email: "anna@example.de",
|
||||||
|
passwordHash,
|
||||||
|
name: "Anna Musterfrau",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
console.log(`✓ User created: ${user.email}`);
|
||||||
|
|
||||||
|
// 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",
|
||||||
|
vatId: "DE987654321",
|
||||||
|
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.create({
|
||||||
|
data: {
|
||||||
|
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}`);
|
||||||
|
|
||||||
|
// Update company sequence
|
||||||
|
await prisma.company.update({
|
||||||
|
where: { id: company.id },
|
||||||
|
data: { invoiceSequence: 1 },
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log("\n✅ Seed complete!");
|
||||||
|
console.log("Login: anna@example.de / demo123");
|
||||||
|
}
|
||||||
|
|
||||||
|
main()
|
||||||
|
.catch((e) => {
|
||||||
|
console.error(e);
|
||||||
|
process.exit(1);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await prisma.$disconnect();
|
||||||
|
});
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 391 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1 @@
|
|||||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||||
|
After Width: | Height: | Size: 128 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||||
|
After Width: | Height: | Size: 385 B |
@@ -0,0 +1,3 @@
|
|||||||
|
export default function AuthLayout({ children }: { children: React.ReactNode }) {
|
||||||
|
return children;
|
||||||
|
}
|
||||||
@@ -0,0 +1,99 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { signIn } from "next-auth/react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Calculator, AlertCircle } from "lucide-react";
|
||||||
|
|
||||||
|
export default function LoginPage() {
|
||||||
|
const router = useRouter();
|
||||||
|
const [email, setEmail] = useState("");
|
||||||
|
const [password, setPassword] = useState("");
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
async function handleSubmit(e: React.FormEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
setLoading(true);
|
||||||
|
setError("");
|
||||||
|
|
||||||
|
const res = await signIn("credentials", {
|
||||||
|
email,
|
||||||
|
password,
|
||||||
|
redirect: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
setLoading(false);
|
||||||
|
|
||||||
|
if (res?.error) {
|
||||||
|
setError("E-Mail oder Passwort falsch.");
|
||||||
|
} else {
|
||||||
|
router.push("/");
|
||||||
|
router.refresh();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-br from-indigo-50 to-blue-50 flex items-center justify-center p-4">
|
||||||
|
<div className="w-full max-w-md">
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<div className="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-indigo-600 mb-4">
|
||||||
|
<Calculator className="w-7 h-7 text-white" />
|
||||||
|
</div>
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">Annas Rechnungsmanager</h1>
|
||||||
|
<p className="text-gray-500 mt-1">Buchhaltung & Rechnungsverwaltung</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Anmelden</CardTitle>
|
||||||
|
<CardDescription>Geben Sie Ihre Zugangsdaten ein</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
{error && (
|
||||||
|
<div className="flex items-center gap-2 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
|
||||||
|
<AlertCircle className="h-4 w-4 shrink-0" />
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label htmlFor="email">E-Mail</Label>
|
||||||
|
<Input
|
||||||
|
id="email"
|
||||||
|
type="email"
|
||||||
|
placeholder="anna@example.de"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
required
|
||||||
|
autoComplete="email"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label htmlFor="password">Passwort</Label>
|
||||||
|
<Input
|
||||||
|
id="password"
|
||||||
|
type="password"
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
required
|
||||||
|
autoComplete="current-password"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button type="submit" className="w-full" disabled={loading}>
|
||||||
|
{loading ? "Anmelden..." : "Anmelden"}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,252 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { useParams } from "next/navigation";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
||||||
|
import { Users, Plus, Edit, Trash2, ChevronLeft, Mail, Phone } from "lucide-react";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { z } from "zod";
|
||||||
|
|
||||||
|
const schema = z.object({
|
||||||
|
name: z.string().min(1, "Pflichtfeld"),
|
||||||
|
vatId: z.string().optional(),
|
||||||
|
address: z.string().min(1, "Pflichtfeld"),
|
||||||
|
zip: z.string().min(1, "Pflichtfeld"),
|
||||||
|
city: z.string().min(1, "Pflichtfeld"),
|
||||||
|
country: z.string().optional(),
|
||||||
|
email: z.string().email("Ungültige E-Mail").optional().or(z.literal("")),
|
||||||
|
phone: z.string().optional(),
|
||||||
|
});
|
||||||
|
type FormData = z.infer<typeof schema>;
|
||||||
|
|
||||||
|
interface Customer {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
vatId?: string | null | undefined;
|
||||||
|
address: string;
|
||||||
|
zip: string;
|
||||||
|
city: string;
|
||||||
|
email?: string | null | undefined;
|
||||||
|
phone?: string | null | undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CustomerForEdit {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
vatId?: string | undefined;
|
||||||
|
address: string;
|
||||||
|
zip: string;
|
||||||
|
city: string;
|
||||||
|
email?: string | undefined;
|
||||||
|
phone?: string | undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
function CustomerForm({
|
||||||
|
defaultValues,
|
||||||
|
onSubmit,
|
||||||
|
submitLabel,
|
||||||
|
}: {
|
||||||
|
defaultValues?: Partial<FormData>;
|
||||||
|
onSubmit: (d: FormData) => Promise<void>;
|
||||||
|
submitLabel: string;
|
||||||
|
}) {
|
||||||
|
const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm<FormData>({
|
||||||
|
resolver: zodResolver(schema),
|
||||||
|
defaultValues: { country: "DE", ...defaultValues },
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div className="col-span-2 space-y-1.5">
|
||||||
|
<Label>Name *</Label>
|
||||||
|
<Input {...register("name")} placeholder="Beispiel AG" />
|
||||||
|
{errors.name && <p className="text-xs text-red-600">{errors.name.message}</p>}
|
||||||
|
</div>
|
||||||
|
<div className="col-span-2 space-y-1.5">
|
||||||
|
<Label>Straße & Nr. *</Label>
|
||||||
|
<Input {...register("address")} placeholder="Musterstr. 1" />
|
||||||
|
{errors.address && <p className="text-xs text-red-600">{errors.address.message}</p>}
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label>PLZ *</Label>
|
||||||
|
<Input {...register("zip")} placeholder="10115" />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label>Ort *</Label>
|
||||||
|
<Input {...register("city")} placeholder="Berlin" />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label>USt-IdNr.</Label>
|
||||||
|
<Input {...register("vatId")} placeholder="DE..." />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label>E-Mail</Label>
|
||||||
|
<Input {...register("email")} type="email" placeholder="kontakt@..." />
|
||||||
|
</div>
|
||||||
|
<div className="col-span-2 space-y-1.5">
|
||||||
|
<Label>Telefon</Label>
|
||||||
|
<Input {...register("phone")} placeholder="+49..." />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-end pt-2">
|
||||||
|
<Button type="submit" disabled={isSubmitting}>{isSubmitting ? "Speichern..." : submitLabel}</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CustomersPage() {
|
||||||
|
const { id: companyId } = useParams<{ id: string }>();
|
||||||
|
const [customers, setCustomers] = useState<Customer[]>([]);
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [editCustomer, setEditCustomer] = useState<CustomerForEdit | null>(null);
|
||||||
|
|
||||||
|
async function load() {
|
||||||
|
const res = await fetch(`/api/companies/${companyId}/customers`);
|
||||||
|
if (res.ok) setCustomers(await res.json());
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => { load(); }, [companyId]);
|
||||||
|
|
||||||
|
async function handleCreate(data: FormData) {
|
||||||
|
await fetch("/api/customers", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ ...data, companyId }),
|
||||||
|
});
|
||||||
|
setOpen(false);
|
||||||
|
load();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleEdit(data: FormData) {
|
||||||
|
if (!editCustomer) return;
|
||||||
|
await fetch(`/api/customers/${editCustomer.id}`, {
|
||||||
|
method: "PUT",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
setEditCustomer(null);
|
||||||
|
load();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleDelete(customerId: string) {
|
||||||
|
if (!confirm("Kunden wirklich löschen?")) return;
|
||||||
|
await fetch(`/api/customers/${customerId}`, { method: "DELETE" });
|
||||||
|
load();
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Link
|
||||||
|
href={`/companies/${companyId}`}
|
||||||
|
className="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700 mb-6"
|
||||||
|
>
|
||||||
|
<ChevronLeft className="h-4 w-4" /> Zurück zum Mandanten
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between mb-8">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">Kunden</h1>
|
||||||
|
<p className="text-gray-500 mt-1">{customers.length} Kunden</p>
|
||||||
|
</div>
|
||||||
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button><Plus className="h-4 w-4" /> Kunde anlegen</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Neuer Kunde</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<CustomerForm onSubmit={handleCreate} submitLabel="Anlegen" />
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Edit Dialog */}
|
||||||
|
<Dialog open={!!editCustomer} onOpenChange={(o) => !o && setEditCustomer(null)}>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Kunde bearbeiten</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
{editCustomer && (
|
||||||
|
<CustomerForm
|
||||||
|
defaultValues={editCustomer}
|
||||||
|
onSubmit={handleEdit}
|
||||||
|
submitLabel="Speichern"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{customers.length === 0 ? (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="py-12 text-center">
|
||||||
|
<Users className="h-10 w-10 text-gray-300 mx-auto mb-3" />
|
||||||
|
<p className="text-gray-500 text-sm">Noch keine Kunden angelegt</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
{customers.map((customer) => (
|
||||||
|
<Card key={customer.id}>
|
||||||
|
<CardContent className="pt-4">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="font-semibold text-gray-900">{customer.name}</p>
|
||||||
|
<p className="text-sm text-gray-500 mt-0.5">{customer.address}, {customer.zip} {customer.city}</p>
|
||||||
|
{customer.vatId && <p className="text-xs text-gray-400 mt-0.5">USt-IdNr.: {customer.vatId}</p>}
|
||||||
|
<div className="flex gap-3 mt-2">
|
||||||
|
{customer.email && (
|
||||||
|
<span className="flex items-center gap-1 text-xs text-gray-500">
|
||||||
|
<Mail className="h-3 w-3" />{customer.email}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{customer.phone && (
|
||||||
|
<span className="flex items-center gap-1 text-xs text-gray-500">
|
||||||
|
<Phone className="h-3 w-3" />{customer.phone}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-1">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => setEditCustomer({
|
||||||
|
id: customer.id,
|
||||||
|
name: customer.name,
|
||||||
|
address: customer.address,
|
||||||
|
zip: customer.zip,
|
||||||
|
city: customer.city,
|
||||||
|
vatId: customer.vatId ?? undefined,
|
||||||
|
email: customer.email ?? undefined,
|
||||||
|
phone: customer.phone ?? undefined,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<Edit className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="text-red-500 hover:text-red-700 hover:bg-red-50"
|
||||||
|
onClick={() => handleDelete(customer.id)}
|
||||||
|
>
|
||||||
|
<Trash2 className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,57 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { useRouter, useParams } from "next/navigation";
|
||||||
|
import { CompanyForm } from "@/components/company/company-form";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { ChevronLeft } from "lucide-react";
|
||||||
|
|
||||||
|
export default function EditCompanyPage() {
|
||||||
|
const router = useRouter();
|
||||||
|
const { id } = useParams<{ id: string }>();
|
||||||
|
const [company, setCompany] = useState<Record<string, unknown> | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetch(`/api/companies/${id}`).then((r) => r.json()).then(setCompany);
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
async function handleSubmit(data: Record<string, unknown>) {
|
||||||
|
const res = await fetch(`/api/companies/${id}`, {
|
||||||
|
method: "PUT",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
if (res.ok) router.push(`/companies/${id}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!company) return <div className="p-8 text-gray-500">Lade...</div>;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Link
|
||||||
|
href={`/companies/${id}`}
|
||||||
|
className="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700 mb-6"
|
||||||
|
>
|
||||||
|
<ChevronLeft className="h-4 w-4" /> Zurück zum Mandanten
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="mb-8">
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">Mandant bearbeiten</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Mandantendaten</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<CompanyForm
|
||||||
|
defaultValues={company as Record<string, string>}
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
submitLabel="Änderungen speichern"
|
||||||
|
/>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,80 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { InvoiceStatus } from "@prisma/client";
|
||||||
|
import { Download, CheckCircle, Send, Trash2 } from "lucide-react";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
invoice: {
|
||||||
|
id: string;
|
||||||
|
status: InvoiceStatus;
|
||||||
|
companyId: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function InvoiceActions({ invoice }: Props) {
|
||||||
|
const router = useRouter();
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
async function updateStatus(status: InvoiceStatus) {
|
||||||
|
setLoading(true);
|
||||||
|
await fetch(`/api/invoices/${invoice.id}`, {
|
||||||
|
method: "PATCH",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ status }),
|
||||||
|
});
|
||||||
|
setLoading(false);
|
||||||
|
router.refresh();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleDelete() {
|
||||||
|
if (!confirm("Rechnung wirklich löschen?")) return;
|
||||||
|
await fetch(`/api/invoices/${invoice.id}`, { method: "DELETE" });
|
||||||
|
router.push(`/companies/${invoice.companyId}/invoices`);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function downloadPdf() {
|
||||||
|
const res = await fetch(`/api/invoices/${invoice.id}/pdf`);
|
||||||
|
if (!res.ok) return;
|
||||||
|
const blob = await res.blob();
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const a = document.createElement("a");
|
||||||
|
a.href = url;
|
||||||
|
a.download = `rechnung-${invoice.id}.pdf`;
|
||||||
|
a.click();
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Button variant="outline" size="sm" onClick={downloadPdf}>
|
||||||
|
<Download className="h-4 w-4" /> PDF
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{invoice.status === "DRAFT" && (
|
||||||
|
<Button size="sm" onClick={() => updateStatus(InvoiceStatus.SENT)} disabled={loading}>
|
||||||
|
<Send className="h-4 w-4" /> Als versendet markieren
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{invoice.status === "SENT" && (
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
className="bg-green-600 hover:bg-green-700"
|
||||||
|
onClick={() => updateStatus(InvoiceStatus.PAID)}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
<CheckCircle className="h-4 w-4" /> Als bezahlt markieren
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{(invoice.status === "DRAFT" || invoice.status === "CANCELLED") && (
|
||||||
|
<Button variant="outline" size="sm" className="text-red-600 hover:text-red-700 hover:bg-red-50" onClick={handleDelete}>
|
||||||
|
<Trash2 className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,213 @@
|
|||||||
|
import { auth } from "@/lib/auth";
|
||||||
|
import prisma from "@/lib/prisma";
|
||||||
|
import { notFound } from "next/navigation";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { InvoiceStatusBadge } from "@/components/invoice/invoice-status-badge";
|
||||||
|
import { InvoiceActions } from "./invoice-actions";
|
||||||
|
import { formatCurrency, formatDate } from "@/lib/tax";
|
||||||
|
import { ChevronLeft } from "lucide-react";
|
||||||
|
|
||||||
|
export default async function InvoiceDetailPage({
|
||||||
|
params,
|
||||||
|
}: {
|
||||||
|
params: Promise<{ id: string; invoiceId: string }>;
|
||||||
|
}) {
|
||||||
|
const { id, invoiceId } = await params;
|
||||||
|
const session = await auth();
|
||||||
|
|
||||||
|
const invoice = await prisma.invoice.findFirst({
|
||||||
|
where: { id: invoiceId, companyId: id, company: { userId: session!.user!.id! } },
|
||||||
|
include: {
|
||||||
|
items: { orderBy: { position: "asc" } },
|
||||||
|
customer: true,
|
||||||
|
company: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!invoice) notFound();
|
||||||
|
|
||||||
|
// Group items by tax rate for totals block
|
||||||
|
const taxGroups = invoice.items.reduce(
|
||||||
|
(acc, item) => {
|
||||||
|
const rate = Number(item.taxRate);
|
||||||
|
if (!acc[rate]) acc[rate] = { net: 0, tax: 0 };
|
||||||
|
acc[rate].net += Number(item.netAmount);
|
||||||
|
acc[rate].tax += Number(item.taxAmount);
|
||||||
|
return acc;
|
||||||
|
},
|
||||||
|
{} as Record<number, { net: number; tax: number }>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Link
|
||||||
|
href={`/companies/${id}/invoices`}
|
||||||
|
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 Rechnungen
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="flex items-start justify-between mb-8">
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-3 mb-1">
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">{invoice.number}</h1>
|
||||||
|
<InvoiceStatusBadge status={invoice.status} />
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-500">
|
||||||
|
{invoice.customer.name} · {formatDate(invoice.issueDate)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<InvoiceActions invoice={{ id: invoice.id, status: invoice.status, companyId: id }} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
|
<div className="lg:col-span-2 space-y-6">
|
||||||
|
{/* Invoice document preview */}
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
{/* Sender & Recipient */}
|
||||||
|
<div className="grid grid-cols-2 gap-8 mb-8">
|
||||||
|
<div>
|
||||||
|
<p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Absender</p>
|
||||||
|
<p className="font-semibold text-gray-900">{invoice.company.name}</p>
|
||||||
|
{invoice.company.legalForm && <p className="text-sm text-gray-600">{invoice.company.legalForm}</p>}
|
||||||
|
<p className="text-sm text-gray-600">{invoice.company.address}</p>
|
||||||
|
<p className="text-sm text-gray-600">{invoice.company.zip} {invoice.company.city}</p>
|
||||||
|
{invoice.company.taxId && (
|
||||||
|
<p className="text-xs text-gray-500 mt-1">St.-Nr.: {invoice.company.taxId}</p>
|
||||||
|
)}
|
||||||
|
{invoice.company.vatId && (
|
||||||
|
<p className="text-xs text-gray-500">USt-IdNr.: {invoice.company.vatId}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Rechnungsempfänger</p>
|
||||||
|
<p className="font-semibold text-gray-900">{invoice.customer.name}</p>
|
||||||
|
<p className="text-sm text-gray-600">{invoice.customer.address}</p>
|
||||||
|
<p className="text-sm text-gray-600">{invoice.customer.zip} {invoice.customer.city}</p>
|
||||||
|
{invoice.customer.vatId && (
|
||||||
|
<p className="text-xs text-gray-500 mt-1">USt-IdNr.: {invoice.customer.vatId}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Dates */}
|
||||||
|
<div className="grid grid-cols-3 gap-4 mb-8 p-4 bg-gray-50 rounded-lg">
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-500">Rechnungsnummer</p>
|
||||||
|
<p className="text-sm font-semibold text-gray-900">{invoice.number}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-500">Rechnungsdatum</p>
|
||||||
|
<p className="text-sm font-medium text-gray-900">{formatDate(invoice.issueDate)}</p>
|
||||||
|
</div>
|
||||||
|
{invoice.deliveryDate && (
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-500">Leistungsdatum</p>
|
||||||
|
<p className="text-sm font-medium text-gray-900">{formatDate(invoice.deliveryDate)}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-500">Fällig am</p>
|
||||||
|
<p className="text-sm font-medium text-gray-900">{formatDate(invoice.dueDate)}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Items table */}
|
||||||
|
<div className="border border-gray-200 rounded-lg overflow-hidden mb-6">
|
||||||
|
<table className="w-full text-sm">
|
||||||
|
<thead>
|
||||||
|
<tr className="bg-gray-50 border-b border-gray-200">
|
||||||
|
<th className="text-left px-4 py-2.5 font-medium text-gray-600 w-8">#</th>
|
||||||
|
<th className="text-left px-4 py-2.5 font-medium text-gray-600">Beschreibung</th>
|
||||||
|
<th className="text-right px-4 py-2.5 font-medium text-gray-600">Menge</th>
|
||||||
|
<th className="text-right px-4 py-2.5 font-medium text-gray-600">EP (netto)</th>
|
||||||
|
<th className="text-right px-4 py-2.5 font-medium text-gray-600">MwSt.</th>
|
||||||
|
<th className="text-right px-4 py-2.5 font-medium text-gray-600">Betrag (brutto)</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y divide-gray-100">
|
||||||
|
{invoice.items.map((item) => (
|
||||||
|
<tr key={item.id} className="hover:bg-gray-50">
|
||||||
|
<td className="px-4 py-3 text-gray-500">{item.position}</td>
|
||||||
|
<td className="px-4 py-3 text-gray-900">{item.description}</td>
|
||||||
|
<td className="px-4 py-3 text-right text-gray-700">
|
||||||
|
{Number(item.quantity)} {item.unit && <span className="text-gray-500">{item.unit}</span>}
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3 text-right text-gray-700">{formatCurrency(Number(item.unitPrice))}</td>
|
||||||
|
<td className="px-4 py-3 text-right text-gray-700">{Number(item.taxRate)}%</td>
|
||||||
|
<td className="px-4 py-3 text-right font-medium text-gray-900">{formatCurrency(Number(item.grossAmount))}</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Totals */}
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<div className="w-72 space-y-1.5">
|
||||||
|
<div className="flex justify-between text-sm text-gray-600">
|
||||||
|
<span>Nettobetrag</span>
|
||||||
|
<span>{formatCurrency(Number(invoice.netTotal))}</span>
|
||||||
|
</div>
|
||||||
|
{Object.entries(taxGroups).map(([rate, { net, tax }]) => (
|
||||||
|
<div key={rate} className="flex justify-between text-sm text-gray-600">
|
||||||
|
<span>MwSt. {rate}% auf {formatCurrency(net)}</span>
|
||||||
|
<span>{formatCurrency(tax)}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<div className="flex justify-between text-base font-bold text-gray-900 border-t border-gray-300 pt-2">
|
||||||
|
<span>Gesamtbetrag (brutto)</span>
|
||||||
|
<span>{formatCurrency(Number(invoice.grossTotal))}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{invoice.notes && (
|
||||||
|
<div className="mt-6 pt-4 border-t border-gray-200">
|
||||||
|
<p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Hinweise</p>
|
||||||
|
<p className="text-sm text-gray-700 whitespace-pre-wrap">{invoice.notes}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Bank details */}
|
||||||
|
{invoice.company.bankIban && (
|
||||||
|
<div className="mt-4 pt-4 border-t border-gray-100">
|
||||||
|
<p className="text-xs text-gray-500">
|
||||||
|
Bankverbindung: {invoice.company.bankName && `${invoice.company.bankName} · `}
|
||||||
|
IBAN: {invoice.company.bankIban}
|
||||||
|
{invoice.company.bankBic && ` · BIC: ${invoice.company.bankBic}`}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sidebar */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-sm">Zusammenfassung</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3">
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-500">Netto</p>
|
||||||
|
<p className="font-medium text-gray-900">{formatCurrency(Number(invoice.netTotal))}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-500">MwSt.</p>
|
||||||
|
<p className="font-medium text-gray-900">{formatCurrency(Number(invoice.taxTotal))}</p>
|
||||||
|
</div>
|
||||||
|
<div className="border-t border-gray-200 pt-2">
|
||||||
|
<p className="text-xs text-gray-500">Brutto</p>
|
||||||
|
<p className="text-lg font-bold text-gray-900">{formatCurrency(Number(invoice.grossTotal))}</p>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { InvoiceForm } from "@/components/invoice/invoice-form";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
customers: { id: string; name: string }[];
|
||||||
|
companyId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function InvoiceFormClient({ customers, companyId }: Props) {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
async function handleSubmit(data: Record<string, unknown>) {
|
||||||
|
const res = await fetch("/api/invoices", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res.ok) {
|
||||||
|
const invoice = await res.json();
|
||||||
|
router.push(`/companies/${companyId}/invoices/${invoice.id}`);
|
||||||
|
} else {
|
||||||
|
alert("Fehler beim Erstellen der Rechnung.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return <InvoiceForm customers={customers} companyId={companyId} onSubmit={handleSubmit} />;
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
import { auth } from "@/lib/auth";
|
||||||
|
import prisma from "@/lib/prisma";
|
||||||
|
import { notFound, redirect } from "next/navigation";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { InvoiceFormClient } from "./invoice-form-client";
|
||||||
|
import { ChevronLeft } from "lucide-react";
|
||||||
|
|
||||||
|
export default async function NewInvoicePage({ params }: { params: Promise<{ id: string }> }) {
|
||||||
|
const { id } = await params;
|
||||||
|
const session = await auth();
|
||||||
|
|
||||||
|
const company = await prisma.company.findFirst({
|
||||||
|
where: { id, userId: session!.user!.id! },
|
||||||
|
});
|
||||||
|
if (!company) notFound();
|
||||||
|
|
||||||
|
const customers = await prisma.customer.findMany({
|
||||||
|
where: { companyId: id },
|
||||||
|
orderBy: { name: "asc" },
|
||||||
|
select: { id: true, name: true },
|
||||||
|
});
|
||||||
|
|
||||||
|
if (customers.length === 0) {
|
||||||
|
redirect(`/companies/${id}/customers`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Link
|
||||||
|
href={`/companies/${id}/invoices`}
|
||||||
|
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 Rechnungen
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="mb-8">
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">Neue Rechnung</h1>
|
||||||
|
<p className="text-gray-500 mt-1">Für Mandant: {company.name}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Rechnungsdaten</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<InvoiceFormClient customers={customers} companyId={id} />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,92 @@
|
|||||||
|
import { auth } from "@/lib/auth";
|
||||||
|
import prisma from "@/lib/prisma";
|
||||||
|
import { notFound } from "next/navigation";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { InvoiceStatusBadge } from "@/components/invoice/invoice-status-badge";
|
||||||
|
import { formatCurrency, formatDate } from "@/lib/tax";
|
||||||
|
import { Plus, FileText, ChevronLeft } from "lucide-react";
|
||||||
|
|
||||||
|
export default async function InvoicesPage({ params }: { params: Promise<{ id: string }> }) {
|
||||||
|
const { id } = await params;
|
||||||
|
const session = await auth();
|
||||||
|
|
||||||
|
const company = await prisma.company.findFirst({
|
||||||
|
where: { id, userId: session!.user!.id! },
|
||||||
|
});
|
||||||
|
if (!company) notFound();
|
||||||
|
|
||||||
|
const invoices = await prisma.invoice.findMany({
|
||||||
|
where: { companyId: id },
|
||||||
|
include: { customer: { select: { name: true } } },
|
||||||
|
orderBy: { issueDate: "desc" },
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Link
|
||||||
|
href={`/companies/${id}`}
|
||||||
|
className="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700 mb-6"
|
||||||
|
>
|
||||||
|
<ChevronLeft className="h-4 w-4" /> {company.name}
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between mb-8">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">Rechnungen</h1>
|
||||||
|
<p className="text-gray-500 mt-1">{invoices.length} Rechnungen für {company.name}</p>
|
||||||
|
</div>
|
||||||
|
<Button asChild>
|
||||||
|
<Link href={`/companies/${id}/invoices/new`}>
|
||||||
|
<Plus className="h-4 w-4" /> Neue Rechnung
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{invoices.length === 0 ? (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="py-16 text-center">
|
||||||
|
<FileText className="h-12 w-12 text-gray-300 mx-auto mb-4" />
|
||||||
|
<h3 className="font-semibold text-gray-700 mb-2">Noch keine Rechnungen</h3>
|
||||||
|
<p className="text-gray-500 mb-6 text-sm">Erstellen Sie die erste Rechnung für diesen Mandanten.</p>
|
||||||
|
<Button asChild>
|
||||||
|
<Link href={`/companies/${id}/invoices/new`}>
|
||||||
|
<Plus className="h-4 w-4" /> Erste Rechnung erstellen
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
) : (
|
||||||
|
<Card>
|
||||||
|
<div className="divide-y divide-gray-100">
|
||||||
|
{invoices.map((invoice) => (
|
||||||
|
<Link
|
||||||
|
key={invoice.id}
|
||||||
|
href={`/companies/${id}/invoices/${invoice.id}`}
|
||||||
|
className="flex items-center justify-between px-6 py-4 hover:bg-gray-50 transition-colors group"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="p-2 rounded-lg bg-gray-100 group-hover:bg-indigo-50 transition-colors">
|
||||||
|
<FileText className="h-4 w-4 text-gray-500 group-hover:text-indigo-600 transition-colors" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-gray-900">{invoice.number}</p>
|
||||||
|
<p className="text-sm text-gray-500">{invoice.customer.name}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-6">
|
||||||
|
<p className="text-sm text-gray-500">{formatDate(invoice.issueDate)}</p>
|
||||||
|
<InvoiceStatusBadge status={invoice.status} />
|
||||||
|
<p className="font-medium text-gray-900 w-28 text-right">
|
||||||
|
{formatCurrency(Number(invoice.grossTotal))}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,230 @@
|
|||||||
|
import { auth } from "@/lib/auth";
|
||||||
|
import prisma from "@/lib/prisma";
|
||||||
|
import { notFound } from "next/navigation";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { formatCurrency, formatDate } from "@/lib/tax";
|
||||||
|
import {
|
||||||
|
FileText, Users, BarChart3, Plus, Edit, Building2,
|
||||||
|
Mail, Phone, CreditCard, Receipt
|
||||||
|
} from "lucide-react";
|
||||||
|
import { InvoiceStatus } from "@prisma/client";
|
||||||
|
|
||||||
|
const statusLabels: Record<InvoiceStatus, string> = {
|
||||||
|
DRAFT: "Entwurf",
|
||||||
|
SENT: "Versendet",
|
||||||
|
PAID: "Bezahlt",
|
||||||
|
CANCELLED: "Storniert",
|
||||||
|
};
|
||||||
|
|
||||||
|
const statusVariants: Record<InvoiceStatus, "secondary" | "default" | "success" | "destructive" | "warning"> = {
|
||||||
|
DRAFT: "secondary",
|
||||||
|
SENT: "warning",
|
||||||
|
PAID: "success",
|
||||||
|
CANCELLED: "destructive",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default async function CompanyPage({ params }: { params: Promise<{ id: string }> }) {
|
||||||
|
const { id } = await params;
|
||||||
|
const session = await auth();
|
||||||
|
|
||||||
|
const company = await prisma.company.findFirst({
|
||||||
|
where: { id, userId: session!.user!.id! },
|
||||||
|
include: {
|
||||||
|
invoices: {
|
||||||
|
include: { customer: { select: { name: true } } },
|
||||||
|
orderBy: { issueDate: "desc" },
|
||||||
|
take: 5,
|
||||||
|
},
|
||||||
|
_count: { select: { invoices: true, customers: true } },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!company) notFound();
|
||||||
|
|
||||||
|
const revenue = await prisma.invoice.aggregate({
|
||||||
|
where: { companyId: id, status: InvoiceStatus.PAID },
|
||||||
|
_sum: { grossTotal: true },
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-start justify-between mb-8">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="p-3 rounded-xl bg-indigo-50">
|
||||||
|
<Building2 className="h-6 w-6 text-indigo-600" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">{company.name}</h1>
|
||||||
|
<p className="text-gray-500 mt-0.5">
|
||||||
|
{company.legalForm && `${company.legalForm} · `}
|
||||||
|
{company.zip} {company.city}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button variant="outline" asChild>
|
||||||
|
<Link href={`/companies/${id}/edit`}>
|
||||||
|
<Edit className="h-4 w-4" />
|
||||||
|
Bearbeiten
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick Actions */}
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-8">
|
||||||
|
<Link href={`/companies/${id}/invoices/new`} className="block">
|
||||||
|
<Card className="hover:border-indigo-200 hover:shadow-sm transition-all cursor-pointer">
|
||||||
|
<CardContent className="pt-4 pb-4 flex items-center gap-3">
|
||||||
|
<div className="p-2 rounded-lg bg-indigo-50">
|
||||||
|
<Plus className="h-4 w-4 text-indigo-600" />
|
||||||
|
</div>
|
||||||
|
<span className="text-sm font-medium text-gray-700">Rechnung erstellen</span>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Link>
|
||||||
|
<Link href={`/companies/${id}/invoices`} className="block">
|
||||||
|
<Card className="hover:border-blue-200 hover:shadow-sm transition-all cursor-pointer">
|
||||||
|
<CardContent className="pt-4 pb-4 flex items-center gap-3">
|
||||||
|
<div className="p-2 rounded-lg bg-blue-50">
|
||||||
|
<FileText className="h-4 w-4 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
<span className="text-sm font-medium text-gray-700">Rechnungen</span>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Link>
|
||||||
|
<Link href={`/companies/${id}/customers`} className="block">
|
||||||
|
<Card className="hover:border-green-200 hover:shadow-sm transition-all cursor-pointer">
|
||||||
|
<CardContent className="pt-4 pb-4 flex items-center gap-3">
|
||||||
|
<div className="p-2 rounded-lg bg-green-50">
|
||||||
|
<Users className="h-4 w-4 text-green-600" />
|
||||||
|
</div>
|
||||||
|
<span className="text-sm font-medium text-gray-700">Kunden</span>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Link>
|
||||||
|
<Link href={`/companies/${id}/reports`} className="block">
|
||||||
|
<Card className="hover:border-purple-200 hover:shadow-sm transition-all cursor-pointer">
|
||||||
|
<CardContent className="pt-4 pb-4 flex items-center gap-3">
|
||||||
|
<div className="p-2 rounded-lg bg-purple-50">
|
||||||
|
<BarChart3 className="h-4 w-4 text-purple-600" />
|
||||||
|
</div>
|
||||||
|
<span className="text-sm font-medium text-gray-700">Berichte</span>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
|
{/* Recent Invoices */}
|
||||||
|
<div className="lg:col-span-2">
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<h2 className="font-semibold text-gray-900">Letzte Rechnungen</h2>
|
||||||
|
<Link href={`/companies/${id}/invoices`} className="text-sm text-indigo-600 hover:text-indigo-700">
|
||||||
|
Alle anzeigen →
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<Card>
|
||||||
|
{company.invoices.length === 0 ? (
|
||||||
|
<CardContent className="py-8 text-center text-gray-500">
|
||||||
|
<Receipt className="h-8 w-8 mx-auto mb-2 text-gray-300" />
|
||||||
|
<p className="text-sm">Noch keine Rechnungen</p>
|
||||||
|
</CardContent>
|
||||||
|
) : (
|
||||||
|
<div className="divide-y divide-gray-100">
|
||||||
|
{company.invoices.map((invoice) => (
|
||||||
|
<Link
|
||||||
|
key={invoice.id}
|
||||||
|
href={`/companies/${id}/invoices/${invoice.id}`}
|
||||||
|
className="flex items-center justify-between px-4 py-3 hover:bg-gray-50 transition-colors"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-gray-900">{invoice.number}</p>
|
||||||
|
<p className="text-xs text-gray-500">{invoice.customer.name} · {formatDate(invoice.issueDate)}</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Badge variant={statusVariants[invoice.status]}>{statusLabels[invoice.status]}</Badge>
|
||||||
|
<span className="text-sm font-medium text-gray-900">
|
||||||
|
{formatCurrency(Number(invoice.grossTotal))}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Company Info */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-sm">Steuer & Umsatz</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3">
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-500">Bezahlt (gesamt)</p>
|
||||||
|
<p className="font-semibold text-gray-900">{formatCurrency(Number(revenue._sum.grossTotal ?? 0))}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-500">Rechnungen</p>
|
||||||
|
<p className="font-semibold text-gray-900">{company._count.invoices}</p>
|
||||||
|
</div>
|
||||||
|
{company.taxId && (
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-500">Steuernummer</p>
|
||||||
|
<p className="text-sm font-mono text-gray-900">{company.taxId}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{company.vatId && (
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-500">USt-IdNr.</p>
|
||||||
|
<p className="text-sm font-mono text-gray-900">{company.vatId}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{(company.email || company.phone) && (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-sm">Kontakt</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-2">
|
||||||
|
{company.email && (
|
||||||
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||||
|
<Mail className="h-3.5 w-3.5 shrink-0 text-gray-400" />
|
||||||
|
{company.email}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{company.phone && (
|
||||||
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||||
|
<Phone className="h-3.5 w-3.5 shrink-0 text-gray-400" />
|
||||||
|
{company.phone}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{company.bankIban && (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-sm">Bankverbindung</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-1">
|
||||||
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||||
|
<CreditCard className="h-3.5 w-3.5 shrink-0 text-gray-400" />
|
||||||
|
<span className="font-mono text-xs">{company.bankIban}</span>
|
||||||
|
</div>
|
||||||
|
{company.bankName && <p className="text-xs text-gray-500 ml-5">{company.bankName}</p>}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,221 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { useParams } from "next/navigation";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { formatCurrency } from "@/lib/tax";
|
||||||
|
import { ChevronLeft, TrendingUp, BarChart3 } from "lucide-react";
|
||||||
|
|
||||||
|
const MONTHS = ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"];
|
||||||
|
|
||||||
|
interface TaxGroup {
|
||||||
|
netAmount: number;
|
||||||
|
taxAmount: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface MonthData {
|
||||||
|
month: number;
|
||||||
|
invoiceCount: number;
|
||||||
|
netTotal: number;
|
||||||
|
taxTotal: number;
|
||||||
|
grossTotal: number;
|
||||||
|
taxGroups: Record<string, TaxGroup>;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface QuarterData {
|
||||||
|
quarter: number;
|
||||||
|
invoiceCount: number;
|
||||||
|
netTotal: number;
|
||||||
|
taxTotal: number;
|
||||||
|
grossTotal: number;
|
||||||
|
taxGroups: Record<string, TaxGroup>;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ReportData {
|
||||||
|
year: number;
|
||||||
|
monthly: MonthData[];
|
||||||
|
quarterly: QuarterData[];
|
||||||
|
yearTotal: {
|
||||||
|
invoiceCount: number;
|
||||||
|
netTotal: number;
|
||||||
|
taxTotal: number;
|
||||||
|
grossTotal: number;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ReportsPage() {
|
||||||
|
const { id: companyId } = useParams<{ id: string }>();
|
||||||
|
const [year, setYear] = useState(new Date().getFullYear());
|
||||||
|
const [data, setData] = useState<ReportData | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setLoading(true);
|
||||||
|
fetch(`/api/reports?companyId=${companyId}&year=${year}`)
|
||||||
|
.then((r) => r.json())
|
||||||
|
.then((d) => { setData(d); setLoading(false); });
|
||||||
|
}, [companyId, year]);
|
||||||
|
|
||||||
|
const years = Array.from({ length: 5 }, (_, i) => new Date().getFullYear() - i);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Link
|
||||||
|
href={`/companies/${companyId}`}
|
||||||
|
className="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700 mb-6"
|
||||||
|
>
|
||||||
|
<ChevronLeft className="h-4 w-4" /> Zurück zum Mandanten
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between mb-8">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">Steuerberichte</h1>
|
||||||
|
<p className="text-gray-500 mt-1">Auswertungen für Steuererklärung und USt-Voranmeldung</p>
|
||||||
|
</div>
|
||||||
|
<select
|
||||||
|
value={year}
|
||||||
|
onChange={(e) => setYear(Number(e.target.value))}
|
||||||
|
className="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||||
|
>
|
||||||
|
{years.map((y) => <option key={y} value={y}>{y}</option>)}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div className="text-center text-gray-500 py-12">Lade Auswertung...</div>
|
||||||
|
) : data && (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Year Summary */}
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||||
|
<Card>
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<p className="text-sm text-gray-500 mb-1">Rechnungen</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900">{data.yearTotal.invoiceCount}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<p className="text-sm text-gray-500 mb-1">Umsatz (netto)</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900">{formatCurrency(data.yearTotal.netTotal)}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<p className="text-sm text-gray-500 mb-1">USt. gesamt</p>
|
||||||
|
<p className="text-2xl font-bold text-indigo-600">{formatCurrency(data.yearTotal.taxTotal)}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<p className="text-sm text-gray-500 mb-1">Umsatz (brutto)</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900">{formatCurrency(data.yearTotal.grossTotal)}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quarterly UStVA */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<BarChart3 className="h-5 w-5 text-indigo-600" />
|
||||||
|
<CardTitle>USt-Voranmeldung (quartalsweise)</CardTitle>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full text-sm">
|
||||||
|
<thead>
|
||||||
|
<tr className="border-b border-gray-200">
|
||||||
|
<th className="text-left pb-3 text-gray-500 font-medium">Quartal</th>
|
||||||
|
<th className="text-right pb-3 text-gray-500 font-medium">Rechnungen</th>
|
||||||
|
<th className="text-right pb-3 text-gray-500 font-medium">Netto</th>
|
||||||
|
<th className="text-right pb-3 text-gray-500 font-medium">USt. 19%</th>
|
||||||
|
<th className="text-right pb-3 text-gray-500 font-medium">USt. 7%</th>
|
||||||
|
<th className="text-right pb-3 text-gray-500 font-medium">USt. gesamt</th>
|
||||||
|
<th className="text-right pb-3 text-gray-500 font-medium">Brutto</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y divide-gray-100">
|
||||||
|
{data.quarterly.map((q) => (
|
||||||
|
<tr key={q.quarter} className="hover:bg-gray-50">
|
||||||
|
<td className="py-3 font-medium text-gray-900">Q{q.quarter} {year}</td>
|
||||||
|
<td className="py-3 text-right text-gray-700">{q.invoiceCount}</td>
|
||||||
|
<td className="py-3 text-right text-gray-700">{formatCurrency(q.netTotal)}</td>
|
||||||
|
<td className="py-3 text-right text-gray-700">
|
||||||
|
{q.taxGroups["19"] ? formatCurrency(q.taxGroups["19"].taxAmount) : "—"}
|
||||||
|
</td>
|
||||||
|
<td className="py-3 text-right text-gray-700">
|
||||||
|
{q.taxGroups["7"] ? formatCurrency(q.taxGroups["7"].taxAmount) : "—"}
|
||||||
|
</td>
|
||||||
|
<td className="py-3 text-right font-medium text-indigo-700">{formatCurrency(q.taxTotal)}</td>
|
||||||
|
<td className="py-3 text-right font-semibold text-gray-900">{formatCurrency(q.grossTotal)}</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr className="border-t-2 border-gray-300">
|
||||||
|
<td className="pt-3 font-bold text-gray-900">Gesamt {year}</td>
|
||||||
|
<td className="pt-3 text-right font-bold text-gray-900">{data.yearTotal.invoiceCount}</td>
|
||||||
|
<td className="pt-3 text-right font-bold text-gray-900">{formatCurrency(data.yearTotal.netTotal)}</td>
|
||||||
|
<td className="pt-3 text-right font-bold text-gray-900">
|
||||||
|
{formatCurrency(data.quarterly.reduce((s, q) => s + (q.taxGroups["19"]?.taxAmount ?? 0), 0))}
|
||||||
|
</td>
|
||||||
|
<td className="pt-3 text-right font-bold text-gray-900">
|
||||||
|
{formatCurrency(data.quarterly.reduce((s, q) => s + (q.taxGroups["7"]?.taxAmount ?? 0), 0))}
|
||||||
|
</td>
|
||||||
|
<td className="pt-3 text-right font-bold text-indigo-700">{formatCurrency(data.yearTotal.taxTotal)}</td>
|
||||||
|
<td className="pt-3 text-right font-bold text-gray-900">{formatCurrency(data.yearTotal.grossTotal)}</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Monthly breakdown */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<TrendingUp className="h-5 w-5 text-indigo-600" />
|
||||||
|
<CardTitle>Monatliche Übersicht</CardTitle>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full text-sm">
|
||||||
|
<thead>
|
||||||
|
<tr className="border-b border-gray-200">
|
||||||
|
<th className="text-left pb-3 text-gray-500 font-medium">Monat</th>
|
||||||
|
<th className="text-right pb-3 text-gray-500 font-medium">Rechnungen</th>
|
||||||
|
<th className="text-right pb-3 text-gray-500 font-medium">Netto</th>
|
||||||
|
<th className="text-right pb-3 text-gray-500 font-medium">USt.</th>
|
||||||
|
<th className="text-right pb-3 text-gray-500 font-medium">Brutto</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y divide-gray-100">
|
||||||
|
{data.monthly.map((m) => (
|
||||||
|
<tr key={m.month} className={`hover:bg-gray-50 ${m.invoiceCount === 0 ? "opacity-40" : ""}`}>
|
||||||
|
<td className="py-2.5 font-medium text-gray-900">{MONTHS[m.month - 1]} {year}</td>
|
||||||
|
<td className="py-2.5 text-right text-gray-700">{m.invoiceCount || "—"}</td>
|
||||||
|
<td className="py-2.5 text-right text-gray-700">
|
||||||
|
{m.netTotal > 0 ? formatCurrency(m.netTotal) : "—"}
|
||||||
|
</td>
|
||||||
|
<td className="py-2.5 text-right text-indigo-700">
|
||||||
|
{m.taxTotal > 0 ? formatCurrency(m.taxTotal) : "—"}
|
||||||
|
</td>
|
||||||
|
<td className="py-2.5 text-right font-medium text-gray-900">
|
||||||
|
{m.grossTotal > 0 ? formatCurrency(m.grossTotal) : "—"}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { CompanyForm } from "@/components/company/company-form";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { ChevronLeft } from "lucide-react";
|
||||||
|
|
||||||
|
export default function NewCompanyPage() {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
async function handleSubmit(data: Record<string, unknown>) {
|
||||||
|
const res = await fetch("/api/companies", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res.ok) {
|
||||||
|
const company = await res.json();
|
||||||
|
router.push(`/companies/${company.id}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Link
|
||||||
|
href="/companies"
|
||||||
|
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 Mandanten
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="mb-8">
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">Neuer Mandant</h1>
|
||||||
|
<p className="text-gray-500 mt-1">Legen Sie einen neuen Mandanten an</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Mandantendaten</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<CompanyForm
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
submitLabel="Mandant anlegen"
|
||||||
|
/>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,85 @@
|
|||||||
|
import { auth } from "@/lib/auth";
|
||||||
|
import prisma from "@/lib/prisma";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Building2, Plus, FileText, Users } from "lucide-react";
|
||||||
|
|
||||||
|
export default async function CompaniesPage() {
|
||||||
|
const session = await auth();
|
||||||
|
const companies = await prisma.company.findMany({
|
||||||
|
where: { userId: session!.user!.id! },
|
||||||
|
include: { _count: { select: { invoices: true, customers: true } } },
|
||||||
|
orderBy: { name: "asc" },
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center justify-between mb-8">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">Mandanten</h1>
|
||||||
|
<p className="text-gray-500 mt-1">{companies.length} Mandanten verwaltet</p>
|
||||||
|
</div>
|
||||||
|
<Button asChild>
|
||||||
|
<Link href="/companies/new">
|
||||||
|
<Plus className="h-4 w-4" />
|
||||||
|
Mandant anlegen
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{companies.length === 0 ? (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="py-16 text-center">
|
||||||
|
<Building2 className="h-12 w-12 text-gray-300 mx-auto mb-4" />
|
||||||
|
<h3 className="font-semibold text-gray-700 mb-2">Noch keine Mandanten</h3>
|
||||||
|
<p className="text-gray-500 mb-6 text-sm">Legen Sie Ihren ersten Mandanten an, um loszulegen.</p>
|
||||||
|
<Button asChild>
|
||||||
|
<Link href="/companies/new">
|
||||||
|
<Plus className="h-4 w-4" />
|
||||||
|
Ersten Mandanten anlegen
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
|
||||||
|
{companies.map((company) => (
|
||||||
|
<Link key={company.id} href={`/companies/${company.id}`}>
|
||||||
|
<Card className="hover:shadow-md transition-all hover:border-indigo-200 cursor-pointer h-full">
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<div className="p-2 rounded-lg bg-indigo-50 shrink-0">
|
||||||
|
<Building2 className="h-5 w-5 text-indigo-600" />
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0">
|
||||||
|
<CardTitle className="text-base truncate">{company.name}</CardTitle>
|
||||||
|
{company.legalForm && (
|
||||||
|
<p className="text-xs text-gray-500 mt-0.5">{company.legalForm}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex gap-4 text-sm text-gray-600">
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<FileText className="h-3.5 w-3.5" />
|
||||||
|
{company._count.invoices} Rechnungen
|
||||||
|
</span>
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<Users className="h-3.5 w-3.5" />
|
||||||
|
{company._count.customers} Kunden
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{company.city && (
|
||||||
|
<p className="text-xs text-gray-400 mt-2">{company.zip} {company.city}</p>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
import { auth } from "@/lib/auth";
|
||||||
|
import { redirect } from "next/navigation";
|
||||||
|
import { Sidebar } from "@/components/layout/sidebar";
|
||||||
|
|
||||||
|
export default async function DashboardLayout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
const session = await auth();
|
||||||
|
if (!session?.user) redirect("/login");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex min-h-screen bg-gray-50">
|
||||||
|
<Sidebar userName={session.user.name} />
|
||||||
|
<main className="flex-1 overflow-auto">
|
||||||
|
<div className="max-w-7xl mx-auto px-6 py-8">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,156 @@
|
|||||||
|
import { auth } from "@/lib/auth";
|
||||||
|
import prisma from "@/lib/prisma";
|
||||||
|
import { formatCurrency } from "@/lib/tax";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Building2, FileText, Euro, TrendingUp } from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { InvoiceStatus } from "@prisma/client";
|
||||||
|
|
||||||
|
export default async function DashboardPage() {
|
||||||
|
const session = await auth();
|
||||||
|
const userId = session!.user!.id!;
|
||||||
|
|
||||||
|
const [companies, invoiceStats] = await Promise.all([
|
||||||
|
prisma.company.findMany({
|
||||||
|
where: { userId },
|
||||||
|
include: { _count: { select: { invoices: true, customers: true } } },
|
||||||
|
orderBy: { name: "asc" },
|
||||||
|
}),
|
||||||
|
prisma.invoice.aggregate({
|
||||||
|
where: { company: { userId } },
|
||||||
|
_count: true,
|
||||||
|
_sum: { grossTotal: true },
|
||||||
|
}),
|
||||||
|
]);
|
||||||
|
|
||||||
|
const paidTotal = await prisma.invoice.aggregate({
|
||||||
|
where: { company: { userId }, status: InvoiceStatus.PAID },
|
||||||
|
_sum: { grossTotal: true },
|
||||||
|
});
|
||||||
|
|
||||||
|
const openInvoices = await prisma.invoice.count({
|
||||||
|
where: { company: { userId }, status: { in: [InvoiceStatus.SENT, InvoiceStatus.DRAFT] } },
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="mb-8">
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
|
||||||
|
<p className="text-gray-500 mt-1">Übersicht aller Mandanten und Rechnungen</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats */}
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
||||||
|
<Card>
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="p-2 rounded-lg bg-indigo-50">
|
||||||
|
<Building2 className="h-5 w-5 text-indigo-600" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-2xl font-bold text-gray-900">{companies.length}</p>
|
||||||
|
<p className="text-sm text-gray-500">Mandanten</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="p-2 rounded-lg bg-blue-50">
|
||||||
|
<FileText className="h-5 w-5 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-2xl font-bold text-gray-900">{invoiceStats._count}</p>
|
||||||
|
<p className="text-sm text-gray-500">Rechnungen gesamt</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="p-2 rounded-lg bg-yellow-50">
|
||||||
|
<FileText className="h-5 w-5 text-yellow-600" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-2xl font-bold text-gray-900">{openInvoices}</p>
|
||||||
|
<p className="text-sm text-gray-500">Offen / Entwurf</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="p-2 rounded-lg bg-green-50">
|
||||||
|
<Euro className="h-5 w-5 text-green-600" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-2xl font-bold text-gray-900">
|
||||||
|
{formatCurrency(Number(paidTotal._sum.grossTotal ?? 0))}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-gray-500">Bezahlt (brutto)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Companies */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900">Mandanten</h2>
|
||||||
|
<Link
|
||||||
|
href="/companies"
|
||||||
|
className="text-sm text-indigo-600 hover:text-indigo-700 font-medium"
|
||||||
|
>
|
||||||
|
Alle anzeigen →
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{companies.length === 0 ? (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="py-12 text-center">
|
||||||
|
<Building2 className="h-12 w-12 text-gray-300 mx-auto mb-4" />
|
||||||
|
<p className="text-gray-500 mb-4">Noch keine Mandanten angelegt.</p>
|
||||||
|
<Link
|
||||||
|
href="/companies/new"
|
||||||
|
className="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 transition-colors"
|
||||||
|
>
|
||||||
|
Mandant anlegen
|
||||||
|
</Link>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
|
||||||
|
{companies.map((company) => (
|
||||||
|
<Link key={company.id} href={`/companies/${company.id}`}>
|
||||||
|
<Card className="hover:shadow-md transition-shadow cursor-pointer">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">{company.name}</CardTitle>
|
||||||
|
{company.legalForm && (
|
||||||
|
<p className="text-xs text-gray-500">{company.legalForm}</p>
|
||||||
|
)}
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex gap-4 text-sm text-gray-600">
|
||||||
|
<span>{company._count.invoices} Rechnungen</span>
|
||||||
|
<span>{company._count.customers} Kunden</span>
|
||||||
|
</div>
|
||||||
|
{company.city && (
|
||||||
|
<p className="text-xs text-gray-400 mt-1">{company.zip} {company.city}</p>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
import { handlers } from "@/lib/auth";
|
||||||
|
|
||||||
|
export const { GET, POST } = handlers;
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
import { NextRequest, NextResponse } from "next/server";
|
||||||
|
import { auth } from "@/lib/auth";
|
||||||
|
import prisma from "@/lib/prisma";
|
||||||
|
|
||||||
|
export async function GET(_req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||||
|
const session = await auth();
|
||||||
|
if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||||
|
|
||||||
|
const { id } = await params;
|
||||||
|
|
||||||
|
// Verify company belongs to user
|
||||||
|
const company = await prisma.company.findFirst({
|
||||||
|
where: { id, userId: session.user.id },
|
||||||
|
});
|
||||||
|
if (!company) return NextResponse.json({ error: "Not found" }, { status: 404 });
|
||||||
|
|
||||||
|
const customers = await prisma.customer.findMany({
|
||||||
|
where: { companyId: id },
|
||||||
|
orderBy: { name: "asc" },
|
||||||
|
});
|
||||||
|
|
||||||
|
return NextResponse.json(customers);
|
||||||
|
}
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
import { NextRequest, NextResponse } from "next/server";
|
||||||
|
import { auth } from "@/lib/auth";
|
||||||
|
import prisma from "@/lib/prisma";
|
||||||
|
|
||||||
|
export async function GET(_req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||||
|
const session = await auth();
|
||||||
|
if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||||
|
|
||||||
|
const { id } = await params;
|
||||||
|
|
||||||
|
const company = await prisma.company.findFirst({
|
||||||
|
where: { id, userId: session.user.id },
|
||||||
|
});
|
||||||
|
if (!company) return NextResponse.json({ error: "Not found" }, { status: 404 });
|
||||||
|
|
||||||
|
const invoices = await prisma.invoice.findMany({
|
||||||
|
where: { companyId: id },
|
||||||
|
include: { customer: { select: { name: true } } },
|
||||||
|
orderBy: { issueDate: "desc" },
|
||||||
|
});
|
||||||
|
|
||||||
|
return NextResponse.json(invoices);
|
||||||
|
}
|
||||||
@@ -0,0 +1,70 @@
|
|||||||
|
import { NextRequest, NextResponse } from "next/server";
|
||||||
|
import { auth } from "@/lib/auth";
|
||||||
|
import prisma from "@/lib/prisma";
|
||||||
|
import { z } from "zod";
|
||||||
|
|
||||||
|
const companySchema = z.object({
|
||||||
|
name: z.string().min(1),
|
||||||
|
legalForm: z.string().optional(),
|
||||||
|
taxId: z.string().optional(),
|
||||||
|
vatId: z.string().optional(),
|
||||||
|
address: z.string().min(1),
|
||||||
|
zip: z.string().min(1),
|
||||||
|
city: z.string().min(1),
|
||||||
|
country: z.string().optional(),
|
||||||
|
email: z.string().email().optional().or(z.literal("")),
|
||||||
|
phone: z.string().optional(),
|
||||||
|
website: z.string().optional(),
|
||||||
|
bankIban: z.string().optional(),
|
||||||
|
bankBic: z.string().optional(),
|
||||||
|
bankName: z.string().optional(),
|
||||||
|
invoicePrefix: z.string().optional(),
|
||||||
|
});
|
||||||
|
|
||||||
|
async function getCompany(id: string, userId: string) {
|
||||||
|
return prisma.company.findFirst({ where: { id, userId } });
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function GET(_req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||||
|
const session = await auth();
|
||||||
|
if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||||
|
|
||||||
|
const { id } = await params;
|
||||||
|
const company = await getCompany(id, session.user.id);
|
||||||
|
if (!company) return NextResponse.json({ error: "Not found" }, { status: 404 });
|
||||||
|
|
||||||
|
return NextResponse.json(company);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function PUT(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||||
|
const session = await auth();
|
||||||
|
if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||||
|
|
||||||
|
const { id } = await params;
|
||||||
|
const company = await getCompany(id, session.user.id);
|
||||||
|
if (!company) return NextResponse.json({ error: "Not found" }, { status: 404 });
|
||||||
|
|
||||||
|
const body = await req.json();
|
||||||
|
const parsed = companySchema.safeParse(body);
|
||||||
|
if (!parsed.success) return NextResponse.json({ error: parsed.error.issues }, { status: 400 });
|
||||||
|
|
||||||
|
const updated = await prisma.company.update({
|
||||||
|
where: { id },
|
||||||
|
data: parsed.data,
|
||||||
|
});
|
||||||
|
|
||||||
|
return NextResponse.json(updated);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function DELETE(_req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||||
|
const session = await auth();
|
||||||
|
if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||||
|
|
||||||
|
const { id } = await params;
|
||||||
|
const company = await getCompany(id, session.user.id);
|
||||||
|
if (!company) return NextResponse.json({ error: "Not found" }, { status: 404 });
|
||||||
|
|
||||||
|
await prisma.company.delete({ where: { id } });
|
||||||
|
|
||||||
|
return NextResponse.json({ ok: true });
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
import { NextRequest, NextResponse } from "next/server";
|
||||||
|
import { auth } from "@/lib/auth";
|
||||||
|
import prisma from "@/lib/prisma";
|
||||||
|
import { z } from "zod";
|
||||||
|
|
||||||
|
const companySchema = z.object({
|
||||||
|
name: z.string().min(1),
|
||||||
|
legalForm: z.string().optional(),
|
||||||
|
taxId: z.string().optional(),
|
||||||
|
vatId: z.string().optional(),
|
||||||
|
address: z.string().min(1),
|
||||||
|
zip: z.string().min(1),
|
||||||
|
city: z.string().min(1),
|
||||||
|
country: z.string().optional().default("DE"),
|
||||||
|
email: z.string().email().optional().or(z.literal("")),
|
||||||
|
phone: z.string().optional(),
|
||||||
|
website: z.string().optional(),
|
||||||
|
bankIban: z.string().optional(),
|
||||||
|
bankBic: z.string().optional(),
|
||||||
|
bankName: z.string().optional(),
|
||||||
|
invoicePrefix: z.string().optional().default("RE"),
|
||||||
|
});
|
||||||
|
|
||||||
|
export async function GET() {
|
||||||
|
const session = await auth();
|
||||||
|
if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||||
|
|
||||||
|
const companies = await prisma.company.findMany({
|
||||||
|
where: { userId: session.user.id },
|
||||||
|
include: { _count: { select: { invoices: true, customers: true } } },
|
||||||
|
orderBy: { name: "asc" },
|
||||||
|
});
|
||||||
|
|
||||||
|
return NextResponse.json(companies);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function POST(req: NextRequest) {
|
||||||
|
const session = await auth();
|
||||||
|
if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||||
|
|
||||||
|
const body = await req.json();
|
||||||
|
const parsed = companySchema.safeParse(body);
|
||||||
|
if (!parsed.success) {
|
||||||
|
return NextResponse.json({ error: parsed.error.issues }, { status: 400 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const company = await prisma.company.create({
|
||||||
|
data: { ...parsed.data, userId: session.user.id },
|
||||||
|
});
|
||||||
|
|
||||||
|
return NextResponse.json(company, { status: 201 });
|
||||||
|
}
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
import { NextRequest, NextResponse } from "next/server";
|
||||||
|
import { auth } from "@/lib/auth";
|
||||||
|
import prisma from "@/lib/prisma";
|
||||||
|
import { z } from "zod";
|
||||||
|
|
||||||
|
const customerSchema = z.object({
|
||||||
|
name: z.string().min(1),
|
||||||
|
vatId: z.string().optional(),
|
||||||
|
taxId: z.string().optional(),
|
||||||
|
address: z.string().min(1),
|
||||||
|
zip: z.string().min(1),
|
||||||
|
city: z.string().min(1),
|
||||||
|
country: z.string().optional(),
|
||||||
|
email: z.string().email().optional().or(z.literal("")),
|
||||||
|
phone: z.string().optional(),
|
||||||
|
});
|
||||||
|
|
||||||
|
async function getCustomer(id: string, userId: string) {
|
||||||
|
return prisma.customer.findFirst({
|
||||||
|
where: { id, company: { userId } },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function GET(_req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||||
|
const session = await auth();
|
||||||
|
if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||||
|
const { id } = await params;
|
||||||
|
const customer = await getCustomer(id, session.user.id);
|
||||||
|
if (!customer) return NextResponse.json({ error: "Not found" }, { status: 404 });
|
||||||
|
return NextResponse.json(customer);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function PUT(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||||
|
const session = await auth();
|
||||||
|
if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||||
|
const { id } = await params;
|
||||||
|
const customer = await getCustomer(id, session.user.id);
|
||||||
|
if (!customer) return NextResponse.json({ error: "Not found" }, { status: 404 });
|
||||||
|
|
||||||
|
const body = await req.json();
|
||||||
|
const parsed = customerSchema.safeParse(body);
|
||||||
|
if (!parsed.success) return NextResponse.json({ error: parsed.error.issues }, { status: 400 });
|
||||||
|
|
||||||
|
const updated = await prisma.customer.update({ where: { id }, data: parsed.data });
|
||||||
|
return NextResponse.json(updated);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function DELETE(_req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||||
|
const session = await auth();
|
||||||
|
if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||||
|
const { id } = await params;
|
||||||
|
const customer = await getCustomer(id, session.user.id);
|
||||||
|
if (!customer) return NextResponse.json({ error: "Not found" }, { status: 404 });
|
||||||
|
await prisma.customer.delete({ where: { id } });
|
||||||
|
return NextResponse.json({ ok: true });
|
||||||
|
}
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
import { NextRequest, NextResponse } from "next/server";
|
||||||
|
import { auth } from "@/lib/auth";
|
||||||
|
import prisma from "@/lib/prisma";
|
||||||
|
import { z } from "zod";
|
||||||
|
|
||||||
|
const customerSchema = z.object({
|
||||||
|
companyId: z.string().min(1),
|
||||||
|
name: z.string().min(1),
|
||||||
|
vatId: z.string().optional(),
|
||||||
|
taxId: z.string().optional(),
|
||||||
|
address: z.string().min(1),
|
||||||
|
zip: z.string().min(1),
|
||||||
|
city: z.string().min(1),
|
||||||
|
country: z.string().optional().default("DE"),
|
||||||
|
email: z.string().email().optional().or(z.literal("")),
|
||||||
|
phone: z.string().optional(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export async function POST(req: NextRequest) {
|
||||||
|
const session = await auth();
|
||||||
|
if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||||
|
|
||||||
|
const body = await req.json();
|
||||||
|
const parsed = customerSchema.safeParse(body);
|
||||||
|
if (!parsed.success) return NextResponse.json({ error: parsed.error.issues }, { status: 400 });
|
||||||
|
|
||||||
|
// Verify company belongs to user
|
||||||
|
const company = await prisma.company.findFirst({
|
||||||
|
where: { id: parsed.data.companyId, userId: session.user.id },
|
||||||
|
});
|
||||||
|
if (!company) return NextResponse.json({ error: "Company not found" }, { status: 404 });
|
||||||
|
|
||||||
|
const customer = await prisma.customer.create({ data: parsed.data });
|
||||||
|
return NextResponse.json(customer, { status: 201 });
|
||||||
|
}
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
import { NextRequest, NextResponse } from "next/server";
|
||||||
|
import { auth } from "@/lib/auth";
|
||||||
|
import prisma from "@/lib/prisma";
|
||||||
|
|
||||||
|
export async function GET(_req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||||
|
const session = await auth();
|
||||||
|
if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||||
|
|
||||||
|
const { id } = await params;
|
||||||
|
|
||||||
|
const invoice = await prisma.invoice.findFirst({
|
||||||
|
where: { id, company: { userId: session.user.id } },
|
||||||
|
include: {
|
||||||
|
items: { orderBy: { position: "asc" } },
|
||||||
|
customer: true,
|
||||||
|
company: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!invoice) return NextResponse.json({ error: "Not found" }, { status: 404 });
|
||||||
|
|
||||||
|
// Dynamic import to avoid SSR bundling issues with @react-pdf/renderer
|
||||||
|
const { renderToBuffer } = await import("@react-pdf/renderer");
|
||||||
|
const React = (await import("react")).default;
|
||||||
|
const { InvoicePDFDocument } = await import("@/components/invoice/invoice-pdf");
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
const element = React.createElement(InvoicePDFDocument as any, { invoice }) as any;
|
||||||
|
const buffer = await renderToBuffer(element);
|
||||||
|
|
||||||
|
return new NextResponse(new Uint8Array(buffer), {
|
||||||
|
status: 200,
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/pdf",
|
||||||
|
"Content-Disposition": `attachment; filename="rechnung-${invoice.number}.pdf"`,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -0,0 +1,57 @@
|
|||||||
|
import { NextRequest, NextResponse } from "next/server";
|
||||||
|
import { auth } from "@/lib/auth";
|
||||||
|
import prisma from "@/lib/prisma";
|
||||||
|
import { InvoiceStatus } from "@prisma/client";
|
||||||
|
import { z } from "zod";
|
||||||
|
|
||||||
|
async function getInvoice(id: string, userId: string) {
|
||||||
|
return prisma.invoice.findFirst({
|
||||||
|
where: { id, company: { userId } },
|
||||||
|
include: {
|
||||||
|
items: { orderBy: { position: "asc" } },
|
||||||
|
customer: true,
|
||||||
|
company: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function GET(_req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||||
|
const session = await auth();
|
||||||
|
if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||||
|
const { id } = await params;
|
||||||
|
const invoice = await getInvoice(id, session.user.id);
|
||||||
|
if (!invoice) return NextResponse.json({ error: "Not found" }, { status: 404 });
|
||||||
|
return NextResponse.json(invoice);
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusSchema = z.object({
|
||||||
|
status: z.nativeEnum(InvoiceStatus),
|
||||||
|
});
|
||||||
|
|
||||||
|
export async function PATCH(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||||
|
const session = await auth();
|
||||||
|
if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||||
|
const { id } = await params;
|
||||||
|
const invoice = await getInvoice(id, session.user.id);
|
||||||
|
if (!invoice) return NextResponse.json({ error: "Not found" }, { status: 404 });
|
||||||
|
|
||||||
|
const body = await req.json();
|
||||||
|
const parsed = statusSchema.safeParse(body);
|
||||||
|
if (!parsed.success) return NextResponse.json({ error: parsed.error.issues }, { status: 400 });
|
||||||
|
|
||||||
|
const updated = await prisma.invoice.update({
|
||||||
|
where: { id },
|
||||||
|
data: { status: parsed.data.status },
|
||||||
|
});
|
||||||
|
return NextResponse.json(updated);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function DELETE(_req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||||
|
const session = await auth();
|
||||||
|
if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||||
|
const { id } = await params;
|
||||||
|
const invoice = await getInvoice(id, session.user.id);
|
||||||
|
if (!invoice) return NextResponse.json({ error: "Not found" }, { status: 404 });
|
||||||
|
await prisma.invoice.delete({ where: { id } });
|
||||||
|
return NextResponse.json({ ok: true });
|
||||||
|
}
|
||||||
@@ -0,0 +1,74 @@
|
|||||||
|
import { NextRequest, NextResponse } from "next/server";
|
||||||
|
import { auth } from "@/lib/auth";
|
||||||
|
import prisma from "@/lib/prisma";
|
||||||
|
import { generateInvoiceNumber } from "@/lib/invoice-number";
|
||||||
|
import { z } from "zod";
|
||||||
|
|
||||||
|
const itemSchema = z.object({
|
||||||
|
position: z.number().int(),
|
||||||
|
description: z.string().min(1),
|
||||||
|
quantity: z.number().positive(),
|
||||||
|
unit: z.string().optional(),
|
||||||
|
unitPrice: z.number(),
|
||||||
|
taxRate: z.number(),
|
||||||
|
netAmount: z.number(),
|
||||||
|
taxAmount: z.number(),
|
||||||
|
grossAmount: z.number(),
|
||||||
|
});
|
||||||
|
|
||||||
|
const invoiceSchema = z.object({
|
||||||
|
companyId: z.string().min(1),
|
||||||
|
customerId: z.string().min(1),
|
||||||
|
issueDate: z.string(),
|
||||||
|
deliveryDate: z.string().optional(),
|
||||||
|
dueDate: z.string(),
|
||||||
|
notes: z.string().optional(),
|
||||||
|
items: z.array(itemSchema).min(1),
|
||||||
|
netTotal: z.number(),
|
||||||
|
taxTotal: z.number(),
|
||||||
|
grossTotal: z.number(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export async function POST(req: NextRequest) {
|
||||||
|
const session = await auth();
|
||||||
|
if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||||
|
|
||||||
|
const body = await req.json();
|
||||||
|
const parsed = invoiceSchema.safeParse(body);
|
||||||
|
if (!parsed.success) return NextResponse.json({ error: parsed.error.issues }, { status: 400 });
|
||||||
|
|
||||||
|
const { items, companyId, ...invoiceData } = parsed.data;
|
||||||
|
|
||||||
|
// Verify company belongs to user
|
||||||
|
const company = await prisma.company.findFirst({
|
||||||
|
where: { id: companyId, userId: session.user.id },
|
||||||
|
});
|
||||||
|
if (!company) return NextResponse.json({ error: "Company not found" }, { status: 404 });
|
||||||
|
|
||||||
|
const number = await generateInvoiceNumber(companyId);
|
||||||
|
|
||||||
|
const invoice = await prisma.invoice.create({
|
||||||
|
data: {
|
||||||
|
...invoiceData,
|
||||||
|
number,
|
||||||
|
companyId,
|
||||||
|
issueDate: new Date(invoiceData.issueDate),
|
||||||
|
deliveryDate: invoiceData.deliveryDate ? new Date(invoiceData.deliveryDate) : null,
|
||||||
|
dueDate: new Date(invoiceData.dueDate),
|
||||||
|
items: {
|
||||||
|
create: items.map((item) => ({
|
||||||
|
...item,
|
||||||
|
quantity: item.quantity,
|
||||||
|
unitPrice: item.unitPrice,
|
||||||
|
taxRate: item.taxRate,
|
||||||
|
netAmount: item.netAmount,
|
||||||
|
taxAmount: item.taxAmount,
|
||||||
|
grossAmount: item.grossAmount,
|
||||||
|
})),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
include: { items: true, customer: true },
|
||||||
|
});
|
||||||
|
|
||||||
|
return NextResponse.json(invoice, { status: 201 });
|
||||||
|
}
|
||||||
@@ -0,0 +1,101 @@
|
|||||||
|
import { NextRequest, NextResponse } from "next/server";
|
||||||
|
import { auth } from "@/lib/auth";
|
||||||
|
import prisma from "@/lib/prisma";
|
||||||
|
import { InvoiceStatus } from "@prisma/client";
|
||||||
|
|
||||||
|
export async function GET(req: NextRequest) {
|
||||||
|
const session = await auth();
|
||||||
|
if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||||
|
|
||||||
|
const { searchParams } = new URL(req.url);
|
||||||
|
const companyId = searchParams.get("companyId");
|
||||||
|
const year = parseInt(searchParams.get("year") ?? String(new Date().getFullYear()));
|
||||||
|
|
||||||
|
if (!companyId) return NextResponse.json({ error: "companyId required" }, { status: 400 });
|
||||||
|
|
||||||
|
const company = await prisma.company.findFirst({
|
||||||
|
where: { id: companyId, userId: session.user.id },
|
||||||
|
});
|
||||||
|
if (!company) return NextResponse.json({ error: "Not found" }, { status: 404 });
|
||||||
|
|
||||||
|
// Get all paid/sent invoices for the year
|
||||||
|
const invoices = await prisma.invoice.findMany({
|
||||||
|
where: {
|
||||||
|
companyId,
|
||||||
|
status: { in: [InvoiceStatus.PAID, InvoiceStatus.SENT] },
|
||||||
|
issueDate: {
|
||||||
|
gte: new Date(`${year}-01-01`),
|
||||||
|
lt: new Date(`${year + 1}-01-01`),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
include: {
|
||||||
|
items: true,
|
||||||
|
customer: { select: { name: true } },
|
||||||
|
},
|
||||||
|
orderBy: { issueDate: "asc" },
|
||||||
|
});
|
||||||
|
|
||||||
|
// Build monthly summary
|
||||||
|
const monthly: Record<number, {
|
||||||
|
month: number;
|
||||||
|
invoiceCount: number;
|
||||||
|
netTotal: number;
|
||||||
|
taxTotal: number;
|
||||||
|
grossTotal: number;
|
||||||
|
taxGroups: Record<number, { netAmount: number; taxAmount: number }>;
|
||||||
|
}> = {};
|
||||||
|
|
||||||
|
for (let m = 1; m <= 12; m++) {
|
||||||
|
monthly[m] = { month: m, invoiceCount: 0, netTotal: 0, taxTotal: 0, grossTotal: 0, taxGroups: {} };
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const invoice of invoices) {
|
||||||
|
const month = new Date(invoice.issueDate).getMonth() + 1;
|
||||||
|
const m = monthly[month];
|
||||||
|
m.invoiceCount++;
|
||||||
|
m.netTotal += Number(invoice.netTotal);
|
||||||
|
m.taxTotal += Number(invoice.taxTotal);
|
||||||
|
m.grossTotal += Number(invoice.grossTotal);
|
||||||
|
|
||||||
|
for (const item of invoice.items) {
|
||||||
|
const rate = Number(item.taxRate);
|
||||||
|
if (!m.taxGroups[rate]) m.taxGroups[rate] = { netAmount: 0, taxAmount: 0 };
|
||||||
|
m.taxGroups[rate].netAmount += Number(item.netAmount);
|
||||||
|
m.taxGroups[rate].taxAmount += Number(item.taxAmount);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Quarterly
|
||||||
|
const quarterly = [1, 2, 3, 4].map((q) => {
|
||||||
|
const months = [q * 3 - 2, q * 3 - 1, q * 3];
|
||||||
|
const data = months.map((m) => monthly[m]);
|
||||||
|
const taxGroups: Record<number, { netAmount: number; taxAmount: number }> = {};
|
||||||
|
|
||||||
|
for (const m of data) {
|
||||||
|
for (const [rate, group] of Object.entries(m.taxGroups)) {
|
||||||
|
const r = Number(rate);
|
||||||
|
if (!taxGroups[r]) taxGroups[r] = { netAmount: 0, taxAmount: 0 };
|
||||||
|
taxGroups[r].netAmount += group.netAmount;
|
||||||
|
taxGroups[r].taxAmount += group.taxAmount;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
quarter: q,
|
||||||
|
invoiceCount: data.reduce((s, m) => s + m.invoiceCount, 0),
|
||||||
|
netTotal: data.reduce((s, m) => s + m.netTotal, 0),
|
||||||
|
taxTotal: data.reduce((s, m) => s + m.taxTotal, 0),
|
||||||
|
grossTotal: data.reduce((s, m) => s + m.grossTotal, 0),
|
||||||
|
taxGroups,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const yearTotal = {
|
||||||
|
invoiceCount: invoices.length,
|
||||||
|
netTotal: invoices.reduce((s, i) => s + Number(i.netTotal), 0),
|
||||||
|
taxTotal: invoices.reduce((s, i) => s + Number(i.taxTotal), 0),
|
||||||
|
grossTotal: invoices.reduce((s, i) => s + Number(i.grossTotal), 0),
|
||||||
|
};
|
||||||
|
|
||||||
|
return NextResponse.json({ year, monthly: Object.values(monthly), quarterly, yearTotal, invoices });
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@@ -0,0 +1,17 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--background: #f9fafb;
|
||||||
|
--foreground: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: var(--background);
|
||||||
|
color: var(--foreground);
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
import type { Metadata } from "next";
|
||||||
|
import "./globals.css";
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: "Annas Rechnungsmanager",
|
||||||
|
description: "Buchhaltung & Rechnungsverwaltung für Mandanten",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: Readonly<{
|
||||||
|
children: React.ReactNode;
|
||||||
|
}>) {
|
||||||
|
return (
|
||||||
|
<html lang="de">
|
||||||
|
<body>{children}</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,138 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
|
||||||
|
const schema = z.object({
|
||||||
|
name: z.string().min(1, "Name ist erforderlich"),
|
||||||
|
legalForm: z.string().optional(),
|
||||||
|
taxId: z.string().optional(),
|
||||||
|
vatId: z.string().optional(),
|
||||||
|
address: z.string().min(1, "Adresse ist erforderlich"),
|
||||||
|
zip: z.string().min(1, "PLZ ist erforderlich"),
|
||||||
|
city: z.string().min(1, "Ort ist erforderlich"),
|
||||||
|
country: z.string().optional(),
|
||||||
|
email: z.string().email("Ungültige E-Mail").optional().or(z.literal("")),
|
||||||
|
phone: z.string().optional(),
|
||||||
|
website: z.string().optional(),
|
||||||
|
bankIban: z.string().optional(),
|
||||||
|
bankBic: z.string().optional(),
|
||||||
|
bankName: z.string().optional(),
|
||||||
|
invoicePrefix: z.string().optional(),
|
||||||
|
});
|
||||||
|
|
||||||
|
type FormData = z.infer<typeof schema>;
|
||||||
|
|
||||||
|
interface CompanyFormProps {
|
||||||
|
defaultValues?: Partial<FormData>;
|
||||||
|
onSubmit: (data: FormData) => Promise<void>;
|
||||||
|
submitLabel?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function Field({ label, error, children }: { label: string; error?: string; children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label>{label}</Label>
|
||||||
|
{children}
|
||||||
|
{error && <p className="text-xs text-red-600">{error}</p>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CompanyForm({ defaultValues, onSubmit, submitLabel = "Speichern" }: CompanyFormProps) {
|
||||||
|
const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm<FormData>({
|
||||||
|
resolver: zodResolver(schema),
|
||||||
|
defaultValues: { country: "DE", invoicePrefix: "RE", ...defaultValues },
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-3">Stammdaten</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<Field label="Firmenname *" error={errors.name?.message}>
|
||||||
|
<Input {...register("name")} placeholder="Muster GmbH" />
|
||||||
|
</Field>
|
||||||
|
<Field label="Rechtsform" error={errors.legalForm?.message}>
|
||||||
|
<Input {...register("legalForm")} placeholder="GmbH, AG, UG..." />
|
||||||
|
</Field>
|
||||||
|
<Field label="Steuernummer" error={errors.taxId?.message}>
|
||||||
|
<Input {...register("taxId")} placeholder="123/456/78901" />
|
||||||
|
</Field>
|
||||||
|
<Field label="USt-IdNr." error={errors.vatId?.message}>
|
||||||
|
<Input {...register("vatId")} placeholder="DE123456789" />
|
||||||
|
</Field>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-3">Anschrift</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<Field label="Straße & Hausnummer *" error={errors.address?.message}>
|
||||||
|
<Input {...register("address")} placeholder="Musterstraße 1" />
|
||||||
|
</Field>
|
||||||
|
</div>
|
||||||
|
<Field label="PLZ *" error={errors.zip?.message}>
|
||||||
|
<Input {...register("zip")} placeholder="10115" />
|
||||||
|
</Field>
|
||||||
|
<Field label="Ort *" error={errors.city?.message}>
|
||||||
|
<Input {...register("city")} placeholder="Berlin" />
|
||||||
|
</Field>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-3">Kontakt</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<Field label="E-Mail" error={errors.email?.message}>
|
||||||
|
<Input {...register("email")} type="email" placeholder="info@firma.de" />
|
||||||
|
</Field>
|
||||||
|
<Field label="Telefon" error={errors.phone?.message}>
|
||||||
|
<Input {...register("phone")} placeholder="+49 30 12345678" />
|
||||||
|
</Field>
|
||||||
|
<Field label="Website" error={errors.website?.message}>
|
||||||
|
<Input {...register("website")} placeholder="https://firma.de" />
|
||||||
|
</Field>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-3">Bankverbindung</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<Field label="IBAN" error={errors.bankIban?.message}>
|
||||||
|
<Input {...register("bankIban")} placeholder="DE89 3704 0044 0532 0130 00" />
|
||||||
|
</Field>
|
||||||
|
</div>
|
||||||
|
<Field label="BIC" error={errors.bankBic?.message}>
|
||||||
|
<Input {...register("bankBic")} placeholder="COBADEFFXXX" />
|
||||||
|
</Field>
|
||||||
|
<Field label="Kreditinstitut" error={errors.bankName?.message}>
|
||||||
|
<Input {...register("bankName")} placeholder="Commerzbank" />
|
||||||
|
</Field>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-3">Rechnungseinstellungen</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<Field label="Rechnungsnummern-Präfix" error={errors.invoicePrefix?.message}>
|
||||||
|
<Input {...register("invoicePrefix")} placeholder="RE" />
|
||||||
|
</Field>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-gray-500 mt-1">Format: {"{Präfix}"}-{"{Jahr}"}-{"{Nummer}"} z.B. RE-2024-001</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-end pt-2">
|
||||||
|
<Button type="submit" disabled={isSubmitting}>
|
||||||
|
{isSubmitting ? "Speichern..." : submitLabel}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,295 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useCallback } from "react";
|
||||||
|
import { useForm, useFieldArray } from "react-hook-form";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||||
|
import { calcItemAmounts, calcInvoiceTotals, formatCurrency, TAX_RATES } from "@/lib/tax";
|
||||||
|
import { Plus, Trash2 } from "lucide-react";
|
||||||
|
|
||||||
|
interface Customer {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ItemFormData {
|
||||||
|
position: number;
|
||||||
|
description: string;
|
||||||
|
quantity: string;
|
||||||
|
unit: string;
|
||||||
|
unitPrice: string;
|
||||||
|
taxRate: string;
|
||||||
|
netAmount: number;
|
||||||
|
taxAmount: number;
|
||||||
|
grossAmount: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface InvoiceFormValues {
|
||||||
|
customerId: string;
|
||||||
|
issueDate: string;
|
||||||
|
deliveryDate: string;
|
||||||
|
dueDate: string;
|
||||||
|
notes: string;
|
||||||
|
items: ItemFormData[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface InvoiceFormProps {
|
||||||
|
customers: Customer[];
|
||||||
|
companyId: string;
|
||||||
|
onSubmit: (data: Record<string, unknown>) => Promise<void>;
|
||||||
|
defaultValues?: Partial<InvoiceFormValues>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultItem = (): ItemFormData => ({
|
||||||
|
position: 1,
|
||||||
|
description: "",
|
||||||
|
quantity: "1",
|
||||||
|
unit: "Stück",
|
||||||
|
unitPrice: "0.00",
|
||||||
|
taxRate: "19",
|
||||||
|
netAmount: 0,
|
||||||
|
taxAmount: 0,
|
||||||
|
grossAmount: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
export function InvoiceForm({ customers, companyId, onSubmit }: InvoiceFormProps) {
|
||||||
|
const today = new Date().toISOString().split("T")[0];
|
||||||
|
const dueDefault = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split("T")[0];
|
||||||
|
|
||||||
|
const { register, handleSubmit, watch, setValue, control, formState: { errors, isSubmitting } } = useForm<InvoiceFormValues>({
|
||||||
|
defaultValues: {
|
||||||
|
customerId: "",
|
||||||
|
issueDate: today,
|
||||||
|
deliveryDate: today,
|
||||||
|
dueDate: dueDefault,
|
||||||
|
notes: "",
|
||||||
|
items: [defaultItem()],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const { fields, append, remove } = useFieldArray({ control, name: "items" });
|
||||||
|
const watchedItems = watch("items");
|
||||||
|
|
||||||
|
const recalcItem = useCallback((index: number) => {
|
||||||
|
const item = watchedItems[index];
|
||||||
|
if (!item) return;
|
||||||
|
const qty = parseFloat(item.quantity) || 0;
|
||||||
|
const price = parseFloat(item.unitPrice) || 0;
|
||||||
|
const rate = parseFloat(item.taxRate) || 0;
|
||||||
|
const { netAmount, taxAmount, grossAmount } = calcItemAmounts(qty, price, rate);
|
||||||
|
setValue(`items.${index}.netAmount`, netAmount);
|
||||||
|
setValue(`items.${index}.taxAmount`, taxAmount);
|
||||||
|
setValue(`items.${index}.grossAmount`, grossAmount);
|
||||||
|
}, [watchedItems, setValue]);
|
||||||
|
|
||||||
|
const totals = calcInvoiceTotals(
|
||||||
|
watchedItems.map((item) => ({
|
||||||
|
netAmount: item.netAmount ?? 0,
|
||||||
|
taxAmount: item.taxAmount ?? 0,
|
||||||
|
grossAmount: item.grossAmount ?? 0,
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
|
||||||
|
async function handleFormSubmit(data: InvoiceFormValues) {
|
||||||
|
const items = data.items.map((item, i) => {
|
||||||
|
const qty = parseFloat(item.quantity) || 0;
|
||||||
|
const price = parseFloat(item.unitPrice) || 0;
|
||||||
|
const rate = parseFloat(item.taxRate) || 0;
|
||||||
|
const { netAmount, taxAmount, grossAmount } = calcItemAmounts(qty, price, rate);
|
||||||
|
return {
|
||||||
|
position: i + 1,
|
||||||
|
description: item.description,
|
||||||
|
quantity: qty,
|
||||||
|
unit: item.unit || undefined,
|
||||||
|
unitPrice: price,
|
||||||
|
taxRate: rate,
|
||||||
|
netAmount,
|
||||||
|
taxAmount,
|
||||||
|
grossAmount,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const totals = calcInvoiceTotals(items);
|
||||||
|
|
||||||
|
await onSubmit({
|
||||||
|
companyId,
|
||||||
|
customerId: data.customerId,
|
||||||
|
issueDate: data.issueDate,
|
||||||
|
deliveryDate: data.deliveryDate || undefined,
|
||||||
|
dueDate: data.dueDate,
|
||||||
|
notes: data.notes || undefined,
|
||||||
|
items,
|
||||||
|
...totals,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit(handleFormSubmit)} className="space-y-6">
|
||||||
|
{/* Header info */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label>Kunde *</Label>
|
||||||
|
<Select onValueChange={(v) => setValue("customerId", v)}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Kunde auswählen..." />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{customers.map((c) => (
|
||||||
|
<SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
{errors.customerId && <p className="text-xs text-red-600">Pflichtfeld</p>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label>Rechnungsdatum *</Label>
|
||||||
|
<Input type="date" {...register("issueDate", { required: true })} />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label>Leistungsdatum</Label>
|
||||||
|
<Input type="date" {...register("deliveryDate")} />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label>Fällig am *</Label>
|
||||||
|
<Input type="date" {...register("dueDate", { required: true })} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Items */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center justify-between mb-3">
|
||||||
|
<h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wide">Rechnungspositionen</h3>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => append(defaultItem())}
|
||||||
|
>
|
||||||
|
<Plus className="h-3.5 w-3.5" /> Position hinzufügen
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="border border-gray-200 rounded-xl overflow-hidden">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="grid grid-cols-12 gap-2 px-3 py-2 bg-gray-50 border-b border-gray-200 text-xs font-medium text-gray-600">
|
||||||
|
<div className="col-span-4">Beschreibung</div>
|
||||||
|
<div className="col-span-1">Menge</div>
|
||||||
|
<div className="col-span-1">Einh.</div>
|
||||||
|
<div className="col-span-2">Einzelpreis</div>
|
||||||
|
<div className="col-span-1">MwSt.</div>
|
||||||
|
<div className="col-span-2 text-right">Gesamt (brutto)</div>
|
||||||
|
<div className="col-span-1"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{fields.map((field, index) => (
|
||||||
|
<div key={field.id} className="grid grid-cols-12 gap-2 px-3 py-2.5 border-b border-gray-100 last:border-0 items-center">
|
||||||
|
<div className="col-span-4">
|
||||||
|
<Input
|
||||||
|
{...register(`items.${index}.description`, { required: true })}
|
||||||
|
placeholder="Leistungsbeschreibung"
|
||||||
|
className="text-sm"
|
||||||
|
onChange={(e) => {
|
||||||
|
register(`items.${index}.description`).onChange(e);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-1">
|
||||||
|
<Input
|
||||||
|
{...register(`items.${index}.quantity`)}
|
||||||
|
className="text-sm text-right"
|
||||||
|
onBlur={() => recalcItem(index)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-1">
|
||||||
|
<Input
|
||||||
|
{...register(`items.${index}.unit`)}
|
||||||
|
placeholder="Stück"
|
||||||
|
className="text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-2">
|
||||||
|
<Input
|
||||||
|
{...register(`items.${index}.unitPrice`)}
|
||||||
|
className="text-sm text-right"
|
||||||
|
onBlur={() => recalcItem(index)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-1">
|
||||||
|
<Select
|
||||||
|
defaultValue="19"
|
||||||
|
onValueChange={(v) => {
|
||||||
|
setValue(`items.${index}.taxRate`, v);
|
||||||
|
recalcItem(index);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="text-sm">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{TAX_RATES.map((r) => (
|
||||||
|
<SelectItem key={r.value} value={String(r.value)}>
|
||||||
|
{r.value}%
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-2 text-right text-sm font-medium text-gray-900">
|
||||||
|
{formatCurrency(watchedItems[index]?.grossAmount ?? 0)}
|
||||||
|
</div>
|
||||||
|
<div className="col-span-1 flex justify-end">
|
||||||
|
{fields.length > 1 && (
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="h-7 w-7 text-red-400 hover:text-red-600 hover:bg-red-50"
|
||||||
|
onClick={() => remove(index)}
|
||||||
|
>
|
||||||
|
<Trash2 className="h-3.5 w-3.5" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Totals */}
|
||||||
|
<div className="mt-4 flex justify-end">
|
||||||
|
<div className="w-64 space-y-1.5">
|
||||||
|
<div className="flex justify-between text-sm text-gray-600">
|
||||||
|
<span>Netto</span>
|
||||||
|
<span>{formatCurrency(totals.netTotal)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between text-sm text-gray-600">
|
||||||
|
<span>MwSt.</span>
|
||||||
|
<span>{formatCurrency(totals.taxTotal)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between text-base font-semibold text-gray-900 border-t border-gray-200 pt-1.5">
|
||||||
|
<span>Gesamt (brutto)</span>
|
||||||
|
<span>{formatCurrency(totals.grossTotal)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Notes */}
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label>Anmerkungen</Label>
|
||||||
|
<Textarea {...register("notes")} placeholder="Zahlungsbedingungen, Hinweise..." rows={3} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-end pt-2">
|
||||||
|
<Button type="submit" disabled={isSubmitting} size="lg">
|
||||||
|
{isSubmitting ? "Erstelle Rechnung..." : "Rechnung erstellen"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,404 @@
|
|||||||
|
import React from "react";
|
||||||
|
import {
|
||||||
|
Document,
|
||||||
|
Page,
|
||||||
|
Text,
|
||||||
|
View,
|
||||||
|
StyleSheet,
|
||||||
|
} from "@react-pdf/renderer";
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
page: {
|
||||||
|
fontFamily: "Helvetica",
|
||||||
|
fontSize: 9,
|
||||||
|
color: "#111827",
|
||||||
|
paddingTop: 50,
|
||||||
|
paddingBottom: 60,
|
||||||
|
paddingLeft: 55,
|
||||||
|
paddingRight: 55,
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
marginBottom: 30,
|
||||||
|
},
|
||||||
|
companyName: {
|
||||||
|
fontSize: 16,
|
||||||
|
fontFamily: "Helvetica-Bold",
|
||||||
|
color: "#1e1b4b",
|
||||||
|
marginBottom: 3,
|
||||||
|
},
|
||||||
|
companyInfo: {
|
||||||
|
fontSize: 8,
|
||||||
|
color: "#6b7280",
|
||||||
|
lineHeight: 1.5,
|
||||||
|
},
|
||||||
|
invoiceTitle: {
|
||||||
|
fontSize: 22,
|
||||||
|
fontFamily: "Helvetica-Bold",
|
||||||
|
color: "#1e1b4b",
|
||||||
|
marginBottom: 20,
|
||||||
|
},
|
||||||
|
metaGrid: {
|
||||||
|
flexDirection: "row",
|
||||||
|
gap: 0,
|
||||||
|
marginBottom: 20,
|
||||||
|
backgroundColor: "#f9fafb",
|
||||||
|
padding: 10,
|
||||||
|
borderRadius: 4,
|
||||||
|
},
|
||||||
|
metaItem: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
metaLabel: {
|
||||||
|
fontSize: 7,
|
||||||
|
color: "#9ca3af",
|
||||||
|
textTransform: "uppercase",
|
||||||
|
marginBottom: 2,
|
||||||
|
},
|
||||||
|
metaValue: {
|
||||||
|
fontSize: 9,
|
||||||
|
fontFamily: "Helvetica-Bold",
|
||||||
|
color: "#111827",
|
||||||
|
},
|
||||||
|
addressSection: {
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
marginBottom: 25,
|
||||||
|
},
|
||||||
|
addressBlock: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
addressLabel: {
|
||||||
|
fontSize: 7,
|
||||||
|
color: "#9ca3af",
|
||||||
|
textTransform: "uppercase",
|
||||||
|
marginBottom: 4,
|
||||||
|
},
|
||||||
|
addressName: {
|
||||||
|
fontSize: 10,
|
||||||
|
fontFamily: "Helvetica-Bold",
|
||||||
|
color: "#111827",
|
||||||
|
marginBottom: 2,
|
||||||
|
},
|
||||||
|
addressLine: {
|
||||||
|
fontSize: 8.5,
|
||||||
|
color: "#374151",
|
||||||
|
lineHeight: 1.4,
|
||||||
|
},
|
||||||
|
tableHeader: {
|
||||||
|
flexDirection: "row",
|
||||||
|
backgroundColor: "#1e1b4b",
|
||||||
|
paddingVertical: 6,
|
||||||
|
paddingHorizontal: 8,
|
||||||
|
borderRadius: 3,
|
||||||
|
marginBottom: 0,
|
||||||
|
},
|
||||||
|
tableHeaderText: {
|
||||||
|
color: "#ffffff",
|
||||||
|
fontSize: 8,
|
||||||
|
fontFamily: "Helvetica-Bold",
|
||||||
|
},
|
||||||
|
tableRow: {
|
||||||
|
flexDirection: "row",
|
||||||
|
paddingVertical: 5,
|
||||||
|
paddingHorizontal: 8,
|
||||||
|
borderBottomColor: "#e5e7eb",
|
||||||
|
borderBottomWidth: 0.5,
|
||||||
|
},
|
||||||
|
tableRowAlt: {
|
||||||
|
backgroundColor: "#f9fafb",
|
||||||
|
},
|
||||||
|
col_pos: { width: "5%" },
|
||||||
|
col_desc: { width: "40%" },
|
||||||
|
col_qty: { width: "10%", textAlign: "right" },
|
||||||
|
col_unit: { width: "8%", textAlign: "center" },
|
||||||
|
col_price: { width: "14%", textAlign: "right" },
|
||||||
|
col_tax: { width: "8%", textAlign: "center" },
|
||||||
|
col_total: { width: "15%", textAlign: "right" },
|
||||||
|
totalsSection: {
|
||||||
|
marginTop: 15,
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "flex-end",
|
||||||
|
},
|
||||||
|
totalsTable: {
|
||||||
|
width: 220,
|
||||||
|
},
|
||||||
|
totalsRow: {
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
paddingVertical: 3,
|
||||||
|
},
|
||||||
|
totalsLabel: {
|
||||||
|
fontSize: 9,
|
||||||
|
color: "#6b7280",
|
||||||
|
},
|
||||||
|
totalsValue: {
|
||||||
|
fontSize: 9,
|
||||||
|
color: "#374151",
|
||||||
|
},
|
||||||
|
totalsFinalRow: {
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
paddingVertical: 4,
|
||||||
|
borderTopColor: "#1e1b4b",
|
||||||
|
borderTopWidth: 1.5,
|
||||||
|
marginTop: 3,
|
||||||
|
},
|
||||||
|
totalsFinalLabel: {
|
||||||
|
fontSize: 10,
|
||||||
|
fontFamily: "Helvetica-Bold",
|
||||||
|
color: "#1e1b4b",
|
||||||
|
},
|
||||||
|
totalsFinalValue: {
|
||||||
|
fontSize: 10,
|
||||||
|
fontFamily: "Helvetica-Bold",
|
||||||
|
color: "#1e1b4b",
|
||||||
|
},
|
||||||
|
notes: {
|
||||||
|
marginTop: 20,
|
||||||
|
padding: 10,
|
||||||
|
backgroundColor: "#f9fafb",
|
||||||
|
borderRadius: 4,
|
||||||
|
},
|
||||||
|
notesLabel: {
|
||||||
|
fontSize: 7,
|
||||||
|
color: "#9ca3af",
|
||||||
|
textTransform: "uppercase",
|
||||||
|
marginBottom: 3,
|
||||||
|
},
|
||||||
|
notesText: {
|
||||||
|
fontSize: 8.5,
|
||||||
|
color: "#374151",
|
||||||
|
lineHeight: 1.5,
|
||||||
|
},
|
||||||
|
footer: {
|
||||||
|
position: "absolute",
|
||||||
|
bottom: 30,
|
||||||
|
left: 55,
|
||||||
|
right: 55,
|
||||||
|
borderTopColor: "#e5e7eb",
|
||||||
|
borderTopWidth: 0.5,
|
||||||
|
paddingTop: 8,
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
},
|
||||||
|
footerText: {
|
||||||
|
fontSize: 7,
|
||||||
|
color: "#9ca3af",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
function formatMoney(amount: number) {
|
||||||
|
return new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(amount);
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDate(date: Date | string) {
|
||||||
|
return new Intl.DateTimeFormat("de-DE").format(new Date(date));
|
||||||
|
}
|
||||||
|
|
||||||
|
interface InvoicePDFProps {
|
||||||
|
invoice: {
|
||||||
|
number: string;
|
||||||
|
issueDate: Date | string;
|
||||||
|
deliveryDate?: Date | string | null;
|
||||||
|
dueDate: Date | string;
|
||||||
|
notes?: string | null;
|
||||||
|
netTotal: number | string | { toString(): string };
|
||||||
|
taxTotal: number | string | { toString(): string };
|
||||||
|
grossTotal: number | string | { toString(): string };
|
||||||
|
company: {
|
||||||
|
name: string;
|
||||||
|
legalForm?: string | null;
|
||||||
|
taxId?: string | null;
|
||||||
|
vatId?: string | null;
|
||||||
|
address: string;
|
||||||
|
zip: string;
|
||||||
|
city: string;
|
||||||
|
email?: string | null;
|
||||||
|
phone?: string | null;
|
||||||
|
bankIban?: string | null;
|
||||||
|
bankBic?: string | null;
|
||||||
|
bankName?: string | null;
|
||||||
|
};
|
||||||
|
customer: {
|
||||||
|
name: string;
|
||||||
|
vatId?: string | null;
|
||||||
|
address: string;
|
||||||
|
zip: string;
|
||||||
|
city: string;
|
||||||
|
country: string;
|
||||||
|
};
|
||||||
|
items: Array<{
|
||||||
|
position: number;
|
||||||
|
description: string;
|
||||||
|
quantity: number | string | { toString(): string };
|
||||||
|
unit?: string | null;
|
||||||
|
unitPrice: number | string | { toString(): string };
|
||||||
|
taxRate: number | string | { toString(): string };
|
||||||
|
netAmount: number | string | { toString(): string };
|
||||||
|
taxAmount: number | string | { toString(): string };
|
||||||
|
grossAmount: number | string | { toString(): string };
|
||||||
|
}>;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function InvoicePDFDocument({ invoice }: InvoicePDFProps) {
|
||||||
|
const n = (v: unknown) => Number(v);
|
||||||
|
|
||||||
|
// Group items by tax rate
|
||||||
|
const taxGroups = invoice.items.reduce(
|
||||||
|
(acc, item) => {
|
||||||
|
const rate = n(item.taxRate);
|
||||||
|
if (!acc[rate]) acc[rate] = { net: 0, tax: 0 };
|
||||||
|
acc[rate].net += n(item.netAmount);
|
||||||
|
acc[rate].tax += n(item.taxAmount);
|
||||||
|
return acc;
|
||||||
|
},
|
||||||
|
{} as Record<number, { net: number; tax: number }>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Document>
|
||||||
|
<Page size="A4" style={styles.page}>
|
||||||
|
{/* Header */}
|
||||||
|
<View style={styles.header}>
|
||||||
|
<View>
|
||||||
|
<Text style={styles.companyName}>{invoice.company.name}</Text>
|
||||||
|
{invoice.company.legalForm && (
|
||||||
|
<Text style={styles.companyInfo}>{invoice.company.legalForm}</Text>
|
||||||
|
)}
|
||||||
|
<Text style={styles.companyInfo}>{invoice.company.address}</Text>
|
||||||
|
<Text style={styles.companyInfo}>{invoice.company.zip} {invoice.company.city}</Text>
|
||||||
|
{invoice.company.email && (
|
||||||
|
<Text style={styles.companyInfo}>{invoice.company.email}</Text>
|
||||||
|
)}
|
||||||
|
{invoice.company.phone && (
|
||||||
|
<Text style={styles.companyInfo}>{invoice.company.phone}</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
<View style={{ alignItems: "flex-end" }}>
|
||||||
|
{invoice.company.taxId && (
|
||||||
|
<Text style={styles.companyInfo}>St.-Nr.: {invoice.company.taxId}</Text>
|
||||||
|
)}
|
||||||
|
{invoice.company.vatId && (
|
||||||
|
<Text style={styles.companyInfo}>USt-IdNr.: {invoice.company.vatId}</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Invoice Title */}
|
||||||
|
<Text style={styles.invoiceTitle}>Rechnung</Text>
|
||||||
|
|
||||||
|
{/* Address Section */}
|
||||||
|
<View style={styles.addressSection}>
|
||||||
|
<View style={styles.addressBlock}>
|
||||||
|
<Text style={styles.addressLabel}>Rechnungsempfänger</Text>
|
||||||
|
<Text style={styles.addressName}>{invoice.customer.name}</Text>
|
||||||
|
<Text style={styles.addressLine}>{invoice.customer.address}</Text>
|
||||||
|
<Text style={styles.addressLine}>{invoice.customer.zip} {invoice.customer.city}</Text>
|
||||||
|
{invoice.customer.country !== "DE" && (
|
||||||
|
<Text style={styles.addressLine}>{invoice.customer.country}</Text>
|
||||||
|
)}
|
||||||
|
{invoice.customer.vatId && (
|
||||||
|
<Text style={{ ...styles.addressLine, marginTop: 3 }}>
|
||||||
|
USt-IdNr.: {invoice.customer.vatId}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Meta */}
|
||||||
|
<View style={styles.metaGrid}>
|
||||||
|
<View style={styles.metaItem}>
|
||||||
|
<Text style={styles.metaLabel}>Rechnungsnummer</Text>
|
||||||
|
<Text style={styles.metaValue}>{invoice.number}</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.metaItem}>
|
||||||
|
<Text style={styles.metaLabel}>Rechnungsdatum</Text>
|
||||||
|
<Text style={styles.metaValue}>{formatDate(invoice.issueDate)}</Text>
|
||||||
|
</View>
|
||||||
|
{invoice.deliveryDate && (
|
||||||
|
<View style={styles.metaItem}>
|
||||||
|
<Text style={styles.metaLabel}>Leistungsdatum</Text>
|
||||||
|
<Text style={styles.metaValue}>{formatDate(invoice.deliveryDate)}</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
<View style={styles.metaItem}>
|
||||||
|
<Text style={styles.metaLabel}>Fällig am</Text>
|
||||||
|
<Text style={styles.metaValue}>{formatDate(invoice.dueDate)}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Items Table */}
|
||||||
|
<View style={styles.tableHeader}>
|
||||||
|
<Text style={{ ...styles.tableHeaderText, ...styles.col_pos }}>#</Text>
|
||||||
|
<Text style={{ ...styles.tableHeaderText, ...styles.col_desc }}>Beschreibung</Text>
|
||||||
|
<Text style={{ ...styles.tableHeaderText, ...styles.col_qty }}>Menge</Text>
|
||||||
|
<Text style={{ ...styles.tableHeaderText, ...styles.col_unit }}>Einh.</Text>
|
||||||
|
<Text style={{ ...styles.tableHeaderText, ...styles.col_price }}>EP (netto)</Text>
|
||||||
|
<Text style={{ ...styles.tableHeaderText, ...styles.col_tax }}>MwSt.</Text>
|
||||||
|
<Text style={{ ...styles.tableHeaderText, ...styles.col_total }}>Gesamt (brutto)</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{invoice.items.map((item, idx) => (
|
||||||
|
<View key={idx} style={[styles.tableRow, idx % 2 === 1 ? styles.tableRowAlt : {}]}>
|
||||||
|
<Text style={{ ...styles.col_pos, fontSize: 9 }}>{item.position}</Text>
|
||||||
|
<Text style={{ ...styles.col_desc, fontSize: 9 }}>{item.description}</Text>
|
||||||
|
<Text style={{ ...styles.col_qty, fontSize: 9 }}>{n(item.quantity)}</Text>
|
||||||
|
<Text style={{ ...styles.col_unit, fontSize: 9 }}>{item.unit ?? ""}</Text>
|
||||||
|
<Text style={{ ...styles.col_price, fontSize: 9 }}>{formatMoney(n(item.unitPrice))}</Text>
|
||||||
|
<Text style={{ ...styles.col_tax, fontSize: 9 }}>{n(item.taxRate)}%</Text>
|
||||||
|
<Text style={{ ...styles.col_total, fontSize: 9, fontFamily: "Helvetica-Bold" }}>
|
||||||
|
{formatMoney(n(item.grossAmount))}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Totals */}
|
||||||
|
<View style={styles.totalsSection}>
|
||||||
|
<View style={styles.totalsTable}>
|
||||||
|
<View style={styles.totalsRow}>
|
||||||
|
<Text style={styles.totalsLabel}>Nettobetrag</Text>
|
||||||
|
<Text style={styles.totalsValue}>{formatMoney(n(invoice.netTotal))}</Text>
|
||||||
|
</View>
|
||||||
|
{Object.entries(taxGroups).map(([rate, { net, tax }]) => (
|
||||||
|
<View key={rate} style={styles.totalsRow}>
|
||||||
|
<Text style={styles.totalsLabel}>MwSt. {rate}% auf {formatMoney(net)}</Text>
|
||||||
|
<Text style={styles.totalsValue}>{formatMoney(tax)}</Text>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
<View style={styles.totalsFinalRow}>
|
||||||
|
<Text style={styles.totalsFinalLabel}>Gesamtbetrag (inkl. MwSt.)</Text>
|
||||||
|
<Text style={styles.totalsFinalValue}>{formatMoney(n(invoice.grossTotal))}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Notes */}
|
||||||
|
{invoice.notes && (
|
||||||
|
<View style={styles.notes}>
|
||||||
|
<Text style={styles.notesLabel}>Hinweise</Text>
|
||||||
|
<Text style={styles.notesText}>{invoice.notes}</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<View style={styles.footer} fixed>
|
||||||
|
<Text style={styles.footerText}>
|
||||||
|
{invoice.company.name}
|
||||||
|
{invoice.company.taxId ? ` · St.-Nr.: ${invoice.company.taxId}` : ""}
|
||||||
|
{invoice.company.vatId ? ` · USt-IdNr.: ${invoice.company.vatId}` : ""}
|
||||||
|
</Text>
|
||||||
|
{invoice.company.bankIban && (
|
||||||
|
<Text style={styles.footerText}>
|
||||||
|
{invoice.company.bankName ? `${invoice.company.bankName} · ` : ""}
|
||||||
|
IBAN: {invoice.company.bankIban}
|
||||||
|
{invoice.company.bankBic ? ` · BIC: ${invoice.company.bankBic}` : ""}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</Page>
|
||||||
|
</Document>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { InvoiceStatus } from "@prisma/client";
|
||||||
|
|
||||||
|
const statusConfig: Record<InvoiceStatus, { label: string; variant: "secondary" | "default" | "success" | "destructive" | "warning" }> = {
|
||||||
|
DRAFT: { label: "Entwurf", variant: "secondary" },
|
||||||
|
SENT: { label: "Versendet", variant: "warning" },
|
||||||
|
PAID: { label: "Bezahlt", variant: "success" },
|
||||||
|
CANCELLED: { label: "Storniert", variant: "destructive" },
|
||||||
|
};
|
||||||
|
|
||||||
|
export function InvoiceStatusBadge({ status }: { status: InvoiceStatus }) {
|
||||||
|
const config = statusConfig[status];
|
||||||
|
return <Badge variant={config.variant}>{config.label}</Badge>;
|
||||||
|
}
|
||||||
@@ -0,0 +1,83 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
import { usePathname } from "next/navigation";
|
||||||
|
import { signOut } from "next-auth/react";
|
||||||
|
import {
|
||||||
|
Calculator,
|
||||||
|
Building2,
|
||||||
|
FileText,
|
||||||
|
LayoutDashboard,
|
||||||
|
LogOut,
|
||||||
|
ChevronRight,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
|
interface NavItem {
|
||||||
|
label: string;
|
||||||
|
href: string;
|
||||||
|
icon: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
const navItems: NavItem[] = [
|
||||||
|
{ label: "Dashboard", href: "/", icon: <LayoutDashboard className="h-4 w-4" /> },
|
||||||
|
{ label: "Mandanten", href: "/companies", icon: <Building2 className="h-4 w-4" /> },
|
||||||
|
];
|
||||||
|
|
||||||
|
export function Sidebar({ userName }: { userName?: string | null }) {
|
||||||
|
const pathname = usePathname();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<aside className="w-60 shrink-0 flex flex-col bg-white border-r border-gray-200 min-h-screen">
|
||||||
|
{/* Logo */}
|
||||||
|
<div className="flex items-center gap-3 px-4 py-5 border-b border-gray-200">
|
||||||
|
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-indigo-600">
|
||||||
|
<Calculator className="w-4 h-4 text-white" />
|
||||||
|
</div>
|
||||||
|
<span className="font-semibold text-gray-900 text-sm leading-tight">
|
||||||
|
Rechnungs-<br />manager
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Nav */}
|
||||||
|
<nav className="flex-1 px-3 py-4 space-y-0.5">
|
||||||
|
{navItems.map((item) => {
|
||||||
|
const active = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href));
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={item.href}
|
||||||
|
href={item.href}
|
||||||
|
className={cn(
|
||||||
|
"flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
|
||||||
|
active
|
||||||
|
? "bg-indigo-50 text-indigo-700"
|
||||||
|
: "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{item.icon}
|
||||||
|
{item.label}
|
||||||
|
{active && <ChevronRight className="ml-auto h-3 w-3 text-indigo-400" />}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* User */}
|
||||||
|
<div className="px-3 py-4 border-t border-gray-200">
|
||||||
|
{userName && (
|
||||||
|
<p className="text-xs text-gray-500 px-3 mb-2 truncate">{userName}</p>
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="w-full justify-start text-gray-600 hover:text-red-600 hover:bg-red-50"
|
||||||
|
onClick={() => signOut({ callbackUrl: "/login" })}
|
||||||
|
>
|
||||||
|
<LogOut className="h-4 w-4" />
|
||||||
|
Abmelden
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const badgeVariants = cva(
|
||||||
|
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: "border-transparent bg-indigo-100 text-indigo-800",
|
||||||
|
secondary: "border-transparent bg-gray-100 text-gray-800",
|
||||||
|
destructive: "border-transparent bg-red-100 text-red-800",
|
||||||
|
success: "border-transparent bg-green-100 text-green-800",
|
||||||
|
warning: "border-transparent bg-yellow-100 text-yellow-800",
|
||||||
|
outline: "text-gray-700 border-gray-300",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export interface BadgeProps
|
||||||
|
extends React.HTMLAttributes<HTMLDivElement>,
|
||||||
|
VariantProps<typeof badgeVariants> {}
|
||||||
|
|
||||||
|
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||||
|
return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Badge, badgeVariants };
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { Slot } from "@radix-ui/react-slot";
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const buttonVariants = cva(
|
||||||
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: "bg-indigo-600 text-white shadow hover:bg-indigo-700",
|
||||||
|
destructive: "bg-red-500 text-white shadow-sm hover:bg-red-600",
|
||||||
|
outline: "border border-gray-300 bg-white shadow-sm hover:bg-gray-50 text-gray-700",
|
||||||
|
secondary: "bg-gray-100 text-gray-900 shadow-sm hover:bg-gray-200",
|
||||||
|
ghost: "hover:bg-gray-100 text-gray-700",
|
||||||
|
link: "text-indigo-600 underline-offset-4 hover:underline",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: "h-9 px-4 py-2",
|
||||||
|
sm: "h-8 rounded-md px-3 text-xs",
|
||||||
|
lg: "h-10 rounded-lg px-6",
|
||||||
|
icon: "h-9 w-9",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export interface ButtonProps
|
||||||
|
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||||
|
VariantProps<typeof buttonVariants> {
|
||||||
|
asChild?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||||
|
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||||
|
const Comp = asChild ? Slot : "button";
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
Button.displayName = "Button";
|
||||||
|
|
||||||
|
export { Button, buttonVariants };
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||||
|
({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn("rounded-xl border border-gray-200 bg-white shadow-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
);
|
||||||
|
Card.displayName = "Card";
|
||||||
|
|
||||||
|
const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||||
|
({ className, ...props }, ref) => (
|
||||||
|
<div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
|
||||||
|
)
|
||||||
|
);
|
||||||
|
CardHeader.displayName = "CardHeader";
|
||||||
|
|
||||||
|
const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
|
||||||
|
({ className, ...props }, ref) => (
|
||||||
|
<h3 ref={ref} className={cn("font-semibold leading-none tracking-tight text-gray-900", className)} {...props} />
|
||||||
|
)
|
||||||
|
);
|
||||||
|
CardTitle.displayName = "CardTitle";
|
||||||
|
|
||||||
|
const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
|
||||||
|
({ className, ...props }, ref) => (
|
||||||
|
<p ref={ref} className={cn("text-sm text-gray-500", className)} {...props} />
|
||||||
|
)
|
||||||
|
);
|
||||||
|
CardDescription.displayName = "CardDescription";
|
||||||
|
|
||||||
|
const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||||
|
({ className, ...props }, ref) => (
|
||||||
|
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
|
||||||
|
)
|
||||||
|
);
|
||||||
|
CardContent.displayName = "CardContent";
|
||||||
|
|
||||||
|
const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||||
|
({ className, ...props }, ref) => (
|
||||||
|
<div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
|
||||||
|
)
|
||||||
|
);
|
||||||
|
CardFooter.displayName = "CardFooter";
|
||||||
|
|
||||||
|
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
|
||||||
@@ -0,0 +1,81 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
||||||
|
import { X } from "lucide-react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const Dialog = DialogPrimitive.Root;
|
||||||
|
const DialogTrigger = DialogPrimitive.Trigger;
|
||||||
|
const DialogPortal = DialogPrimitive.Portal;
|
||||||
|
const DialogClose = DialogPrimitive.Close;
|
||||||
|
|
||||||
|
const DialogOverlay = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DialogPrimitive.Overlay
|
||||||
|
ref={ref}
|
||||||
|
className={cn("fixed inset-0 z-50 bg-black/50 backdrop-blur-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
||||||
|
|
||||||
|
const DialogContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<DialogPortal>
|
||||||
|
<DialogOverlay />
|
||||||
|
<DialogPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border border-gray-200 bg-white p-6 shadow-xl",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<DialogClose className="absolute right-4 top-4 rounded-md opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
<span className="sr-only">Schließen</span>
|
||||||
|
</DialogClose>
|
||||||
|
</DialogPrimitive.Content>
|
||||||
|
</DialogPortal>
|
||||||
|
));
|
||||||
|
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
||||||
|
|
||||||
|
const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
|
<div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
|
||||||
|
);
|
||||||
|
DialogHeader.displayName = "DialogHeader";
|
||||||
|
|
||||||
|
const DialogTitle = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Title>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DialogPrimitive.Title
|
||||||
|
ref={ref}
|
||||||
|
className={cn("text-lg font-semibold leading-none tracking-tight text-gray-900", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
||||||
|
|
||||||
|
const DialogDescription = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Description>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DialogPrimitive.Description
|
||||||
|
ref={ref}
|
||||||
|
className={cn("text-sm text-gray-500", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DialogDescription.displayName = DialogPrimitive.Description.displayName;
|
||||||
|
|
||||||
|
export {
|
||||||
|
Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose,
|
||||||
|
DialogContent, DialogHeader, DialogTitle, DialogDescription,
|
||||||
|
};
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
|
||||||
|
|
||||||
|
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||||
|
({ className, type, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
className={cn(
|
||||||
|
"flex h-9 w-full rounded-lg border border-gray-300 bg-white px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
Input.displayName = "Input";
|
||||||
|
|
||||||
|
export { Input };
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import * as LabelPrimitive from "@radix-ui/react-label";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const Label = React.forwardRef<
|
||||||
|
React.ElementRef<typeof LabelPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<LabelPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn("text-sm font-medium text-gray-700 leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
Label.displayName = LabelPrimitive.Root.displayName;
|
||||||
|
|
||||||
|
export { Label };
|
||||||
@@ -0,0 +1,86 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as SelectPrimitive from "@radix-ui/react-select";
|
||||||
|
import { Check, ChevronDown } from "lucide-react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const Select = SelectPrimitive.Root;
|
||||||
|
const SelectGroup = SelectPrimitive.Group;
|
||||||
|
const SelectValue = SelectPrimitive.Value;
|
||||||
|
|
||||||
|
const SelectTrigger = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.Trigger>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<SelectPrimitive.Trigger
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex h-9 w-full items-center justify-between rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<SelectPrimitive.Icon asChild>
|
||||||
|
<ChevronDown className="h-4 w-4 text-gray-400" />
|
||||||
|
</SelectPrimitive.Icon>
|
||||||
|
</SelectPrimitive.Trigger>
|
||||||
|
));
|
||||||
|
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
||||||
|
|
||||||
|
const SelectContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
|
||||||
|
>(({ className, children, position = "popper", ...props }, ref) => (
|
||||||
|
<SelectPrimitive.Portal>
|
||||||
|
<SelectPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative z-50 min-w-[8rem] overflow-hidden rounded-lg border border-gray-200 bg-white text-gray-900 shadow-lg animate-in fade-in-0 zoom-in-95",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
position={position}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<SelectPrimitive.Viewport className="p-1">{children}</SelectPrimitive.Viewport>
|
||||||
|
</SelectPrimitive.Content>
|
||||||
|
</SelectPrimitive.Portal>
|
||||||
|
));
|
||||||
|
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
||||||
|
|
||||||
|
const SelectItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.Item>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<SelectPrimitive.Item
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-indigo-50 focus:text-indigo-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
|
<SelectPrimitive.ItemIndicator>
|
||||||
|
<Check className="h-4 w-4" />
|
||||||
|
</SelectPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||||
|
</SelectPrimitive.Item>
|
||||||
|
));
|
||||||
|
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
||||||
|
|
||||||
|
const SelectLabel = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.Label>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<SelectPrimitive.Label
|
||||||
|
ref={ref}
|
||||||
|
className={cn("px-8 py-1.5 text-xs font-semibold text-gray-500", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
||||||
|
|
||||||
|
export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectItem, SelectLabel };
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
|
||||||
|
|
||||||
|
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||||
|
({ className, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<textarea
|
||||||
|
className={cn(
|
||||||
|
"flex min-h-[80px] w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
Textarea.displayName = "Textarea";
|
||||||
|
|
||||||
|
export { Textarea };
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
import NextAuth from "next-auth";
|
||||||
|
import Credentials from "next-auth/providers/credentials";
|
||||||
|
import bcrypt from "bcryptjs";
|
||||||
|
import prisma from "./prisma";
|
||||||
|
|
||||||
|
export const { handlers, auth, signIn, signOut } = NextAuth({
|
||||||
|
session: { strategy: "jwt" },
|
||||||
|
pages: {
|
||||||
|
signIn: "/login",
|
||||||
|
},
|
||||||
|
providers: [
|
||||||
|
Credentials({
|
||||||
|
name: "credentials",
|
||||||
|
credentials: {
|
||||||
|
email: { label: "E-Mail", type: "email" },
|
||||||
|
password: { label: "Passwort", type: "password" },
|
||||||
|
},
|
||||||
|
async authorize(credentials) {
|
||||||
|
if (!credentials?.email || !credentials?.password) return null;
|
||||||
|
|
||||||
|
const user = await prisma.user.findUnique({
|
||||||
|
where: { email: credentials.email as string },
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!user) return null;
|
||||||
|
|
||||||
|
const passwordValid = await bcrypt.compare(
|
||||||
|
credentials.password as string,
|
||||||
|
user.passwordHash
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!passwordValid) return null;
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: user.id,
|
||||||
|
email: user.email,
|
||||||
|
name: user.name,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
callbacks: {
|
||||||
|
async jwt({ token, user }) {
|
||||||
|
if (user) {
|
||||||
|
token.id = user.id;
|
||||||
|
}
|
||||||
|
return token;
|
||||||
|
},
|
||||||
|
async session({ session, token }) {
|
||||||
|
if (token && session.user) {
|
||||||
|
session.user.id = token.id as string;
|
||||||
|
}
|
||||||
|
return session;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
import prisma from "./prisma";
|
||||||
|
|
||||||
|
export async function generateInvoiceNumber(companyId: string): Promise<string> {
|
||||||
|
const year = new Date().getFullYear();
|
||||||
|
|
||||||
|
// Atomically increment the sequence number
|
||||||
|
const company = await prisma.company.update({
|
||||||
|
where: { id: companyId },
|
||||||
|
data: { invoiceSequence: { increment: 1 } },
|
||||||
|
select: { invoicePrefix: true, invoiceSequence: true },
|
||||||
|
});
|
||||||
|
|
||||||
|
const seq = String(company.invoiceSequence).padStart(3, "0");
|
||||||
|
return `${company.invoicePrefix}-${year}-${seq}`;
|
||||||
|
}
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import { PrismaClient } from "@prisma/client";
|
||||||
|
|
||||||
|
const globalForPrisma = globalThis as unknown as {
|
||||||
|
prisma: PrismaClient | undefined;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const prisma = globalForPrisma.prisma ?? new PrismaClient();
|
||||||
|
|
||||||
|
if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;
|
||||||
|
|
||||||
|
export default prisma;
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
export const TAX_RATES = [
|
||||||
|
{ label: "19% MwSt. (Regelsteuersatz)", value: 19 },
|
||||||
|
{ label: "7% MwSt. (ermäßigt)", value: 7 },
|
||||||
|
{ label: "0% (steuerfrei / §13b UStG)", value: 0 },
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
export function calcItemAmounts(
|
||||||
|
quantity: number,
|
||||||
|
unitPrice: number,
|
||||||
|
taxRate: number
|
||||||
|
) {
|
||||||
|
const netAmount = Math.round(quantity * unitPrice * 100) / 100;
|
||||||
|
const taxAmount = Math.round(netAmount * (taxRate / 100) * 100) / 100;
|
||||||
|
const grossAmount = Math.round((netAmount + taxAmount) * 100) / 100;
|
||||||
|
return { netAmount, taxAmount, grossAmount };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function calcInvoiceTotals(
|
||||||
|
items: Array<{ netAmount: number; taxAmount: number; grossAmount: number }>
|
||||||
|
) {
|
||||||
|
const netTotal = items.reduce((sum, i) => sum + i.netAmount, 0);
|
||||||
|
const taxTotal = items.reduce((sum, i) => sum + i.taxAmount, 0);
|
||||||
|
const grossTotal = items.reduce((sum, i) => sum + i.grossAmount, 0);
|
||||||
|
return {
|
||||||
|
netTotal: Math.round(netTotal * 100) / 100,
|
||||||
|
taxTotal: Math.round(taxTotal * 100) / 100,
|
||||||
|
grossTotal: Math.round(grossTotal * 100) / 100,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatCurrency(amount: number | string): string {
|
||||||
|
return new Intl.NumberFormat("de-DE", {
|
||||||
|
style: "currency",
|
||||||
|
currency: "EUR",
|
||||||
|
}).format(Number(amount));
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatDate(date: Date | string): string {
|
||||||
|
return new Intl.DateTimeFormat("de-DE").format(new Date(date));
|
||||||
|
}
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
import { type ClassValue, clsx } from "clsx";
|
||||||
|
import { twMerge } from "tailwind-merge";
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs));
|
||||||
|
}
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
import { auth } from "@/lib/auth";
|
||||||
|
import { NextResponse } from "next/server";
|
||||||
|
|
||||||
|
export default auth((req) => {
|
||||||
|
const isLoggedIn = !!req.auth;
|
||||||
|
const isAuthPage = req.nextUrl.pathname.startsWith("/login");
|
||||||
|
const isApiAuth = req.nextUrl.pathname.startsWith("/api/auth");
|
||||||
|
|
||||||
|
if (isApiAuth) return NextResponse.next();
|
||||||
|
|
||||||
|
if (!isLoggedIn && !isAuthPage) {
|
||||||
|
return NextResponse.redirect(new URL("/login", req.nextUrl));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isLoggedIn && isAuthPage) {
|
||||||
|
return NextResponse.redirect(new URL("/", req.nextUrl));
|
||||||
|
}
|
||||||
|
|
||||||
|
return NextResponse.next();
|
||||||
|
});
|
||||||
|
|
||||||
|
export const config = {
|
||||||
|
matcher: ["/((?!_next/static|_next/image|favicon.ico|public).*)"],
|
||||||
|
};
|
||||||
@@ -0,0 +1,69 @@
|
|||||||
|
export type { Company, Customer, Invoice, InvoiceItem, User, InvoiceStatus } from "@prisma/client";
|
||||||
|
|
||||||
|
export interface InvoiceItemInput {
|
||||||
|
id?: string;
|
||||||
|
position: number;
|
||||||
|
description: string;
|
||||||
|
quantity: number;
|
||||||
|
unit?: string;
|
||||||
|
unitPrice: number;
|
||||||
|
taxRate: number;
|
||||||
|
netAmount: number;
|
||||||
|
taxAmount: number;
|
||||||
|
grossAmount: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface InvoiceFormData {
|
||||||
|
customerId: string;
|
||||||
|
issueDate: string;
|
||||||
|
deliveryDate?: string;
|
||||||
|
dueDate: string;
|
||||||
|
notes?: string;
|
||||||
|
items: InvoiceItemInput[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CompanyFormData {
|
||||||
|
name: string;
|
||||||
|
legalForm?: string;
|
||||||
|
taxId?: string;
|
||||||
|
vatId?: string;
|
||||||
|
address: string;
|
||||||
|
zip: string;
|
||||||
|
city: string;
|
||||||
|
country?: string;
|
||||||
|
email?: string;
|
||||||
|
phone?: string;
|
||||||
|
website?: string;
|
||||||
|
bankIban?: string;
|
||||||
|
bankBic?: string;
|
||||||
|
bankName?: string;
|
||||||
|
invoicePrefix?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CustomerFormData {
|
||||||
|
name: string;
|
||||||
|
vatId?: string;
|
||||||
|
taxId?: string;
|
||||||
|
address: string;
|
||||||
|
zip: string;
|
||||||
|
city: string;
|
||||||
|
country?: string;
|
||||||
|
email?: string;
|
||||||
|
phone?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TaxGroupSummary {
|
||||||
|
taxRate: number;
|
||||||
|
netAmount: number;
|
||||||
|
taxAmount: number;
|
||||||
|
grossAmount: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PeriodReport {
|
||||||
|
period: string;
|
||||||
|
invoiceCount: number;
|
||||||
|
netTotal: number;
|
||||||
|
taxTotal: number;
|
||||||
|
grossTotal: number;
|
||||||
|
taxGroups: TaxGroupSummary[];
|
||||||
|
}
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2017",
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"incremental": true,
|
||||||
|
"plugins": [
|
||||||
|
{
|
||||||
|
"name": "next"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"next-env.d.ts",
|
||||||
|
"**/*.ts",
|
||||||
|
"**/*.tsx",
|
||||||
|
".next/types/**/*.ts",
|
||||||
|
".next/dev/types/**/*.ts",
|
||||||
|
"**/*.mts"
|
||||||
|
],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user