henry/AnnasRechnungsManager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADD: adden rechnungne ohne ust id und logout button

Browse Source
This commit is contained in:
hwinkel
2026-03-11 23:23:24 +01:00
parent f9307d9f4a
commit b8e981eaf3
17 changed files with 263 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+2
View File
@@ -43,3 +43,5 @@ yarn-error.log*
next-env.d.ts
/src/generated/prisma
/db/data
app/components/company/company-form.tsx
+14 -1
View File
@@ -21,6 +21,7 @@ const schema = z.object({
bankBic: z.string().optional(),
bankName: z.string().optional(),
invoicePrefix: z.string().optional(),
kleinunternehmer: z.boolean().optional(),
});
type FormData = z.infer<typeof schema>;
@@ -44,7 +45,7 @@ function Field({ label, error, children }: { label: string; error?: string; chil
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 },
defaultValues: { country: "DE", invoicePrefix: "RE", kleinunternehmer: false, ...defaultValues },
});
return (
@@ -124,6 +125,18 @@ export function CompanyForm({ defaultValues, onSubmit, submitLabel = "Speichern"
</Field>
</div>
<p className="text-xs text-gray-500 mt-1">Format: {"{Präfix}"}-{"{Jahr}"}-{"{Nummer}"} z.B. RE-2024-001</p>
<div className="mt-4">
<label className="flex items-center gap-2 cursor-pointer select-none">
<input
type="checkbox"
{...register("kleinunternehmer")}
className="h-4 w-4 rounded border-gray-300"
/>
<span className="text-sm text-gray-700">
Kleinunternehmer (§19 UStG) — keine Umsatzsteuer
</span>
</label>
</div>
</div>
<div className="flex justify-end pt-2">
app/components/invoice/invoice-form.tsx
+64 -7
View File
@@ -5,7 +5,7 @@ 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 { calcItemAmounts, calcItemAmountsKleinunternehmer, calcInvoiceTotals, formatCurrency, TAX_RATES } from "@/lib/tax";
import { Plus, Trash2 } from "lucide-react";
interface Customer {
@@ -39,6 +39,7 @@ interface InvoiceFormProps {
companyId: string;
onSubmit: (data: Record<string, unknown>) => Promise<void>;
defaultValues?: Partial<InvoiceFormValues>;
defaultKleinunternehmer?: boolean;
}
const defaultItem = (): ItemFormData => ({
@@ -53,9 +54,10 @@ const defaultItem = (): ItemFormData => ({
grossAmount: 0,
});
export function InvoiceForm({ customers, companyId, onSubmit }: InvoiceFormProps) {
export function InvoiceForm({ customers, companyId, onSubmit, defaultKleinunternehmer = false }: 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 [kleinunternehmer, setKleinunternehmer] = useState(defaultKleinunternehmer);
const { register, handleSubmit, watch, setValue, control, formState: { errors, isSubmitting } } = useForm<InvoiceFormValues>({
defaultValues: {
@@ -76,12 +78,19 @@ export function InvoiceForm({ customers, companyId, onSubmit }: InvoiceFormProps
if (!item) return;
const qty = parseFloat(item.quantity) || 0;
const price = parseFloat(item.unitPrice) || 0;
if (kleinunternehmer) {
const { netAmount, taxAmount, grossAmount } = calcItemAmountsKleinunternehmer(qty, price);
setValue(`items.${index}.netAmount`, netAmount);
setValue(`items.${index}.taxAmount`, taxAmount);
setValue(`items.${index}.grossAmount`, grossAmount);
} else {
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]);
}
}, [watchedItems, setValue, kleinunternehmer]);
const totals = calcInvoiceTotals(
watchedItems.map((item) => ({
@@ -95,6 +104,20 @@ export function InvoiceForm({ customers, companyId, onSubmit }: InvoiceFormProps
const items = data.items.map((item, i) => {
const qty = parseFloat(item.quantity) || 0;
const price = parseFloat(item.unitPrice) || 0;
if (kleinunternehmer) {
const { netAmount, taxAmount, grossAmount } = calcItemAmountsKleinunternehmer(qty, price);
return {
position: i + 1,
description: item.description,
quantity: qty,
unit: item.unit || undefined,
unitPrice: price,
taxRate: 0,
netAmount,
taxAmount,
grossAmount,
};
}
const rate = parseFloat(item.taxRate) || 0;
const { netAmount, taxAmount, grossAmount } = calcItemAmounts(qty, price, rate);
return {
@@ -119,6 +142,7 @@ export function InvoiceForm({ customers, companyId, onSubmit }: InvoiceFormProps
deliveryDate: data.deliveryDate || undefined,
dueDate: data.dueDate,
notes: data.notes || undefined,
kleinunternehmer,
items,
...totals,
});
@@ -141,6 +165,23 @@ export function InvoiceForm({ customers, companyId, onSubmit }: InvoiceFormProps
</Select>
{errors.customerId && <p className="text-xs text-red-600">Pflichtfeld</p>}
</div>
<div className="flex items-end pb-0.5">
<label className="flex items-center gap-2 cursor-pointer select-none">
<input
type="checkbox"
checked={kleinunternehmer}
onChange={(e) => {
setKleinunternehmer(e.target.checked);
watchedItems.forEach((_, i) => recalcItem(i));
}}
className="h-4 w-4 rounded border-gray-300"
/>
<span className="text-sm text-gray-700">
Kleinunternehmer (§19 UStG) — keine Umsatzsteuer
</span>
</label>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
@@ -172,18 +213,18 @@ export function InvoiceForm({ customers, companyId, onSubmit }: InvoiceFormProps
</div>
<div className="border border-gray-200 rounded-xl overflow-hidden">
<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={`grid gap-2 px-3 py-2 bg-gray-50 border-b border-gray-200 text-xs font-medium text-gray-600 ${kleinunternehmer ? "grid-cols-11" : "grid-cols-12"}`}>
<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">{kleinunternehmer ? "Einzelpreis (brutto)" : "Einzelpreis"}</div>
{!kleinunternehmer && <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 key={field.id} className={`grid gap-2 px-3 py-2.5 border-b border-gray-100 last:border-0 items-center ${kleinunternehmer ? "grid-cols-11" : "grid-cols-12"}`}>
<div className="col-span-4">
<Input
{...register(`items.${index}.description`, { required: true })}
@@ -212,6 +253,7 @@ export function InvoiceForm({ customers, companyId, onSubmit }: InvoiceFormProps
onBlur={() => recalcItem(index)}
/>
</div>
{!kleinunternehmer && (
<div className="col-span-1">
<Select
defaultValue="19"
@@ -232,6 +274,7 @@ export function InvoiceForm({ customers, companyId, onSubmit }: InvoiceFormProps
</SelectContent>
</Select>
</div>
)}
<div className="col-span-2 text-right text-sm font-medium text-gray-900">
{formatCurrency(watchedItems[index]?.grossAmount ?? 0)}
</div>
@@ -254,6 +297,18 @@ export function InvoiceForm({ customers, companyId, onSubmit }: InvoiceFormProps
<div className="mt-4 flex justify-end">
<div className="w-64 space-y-1.5">
{kleinunternehmer ? (
<>
<div className="flex justify-between text-base font-semibold text-gray-900 border-t border-gray-200 pt-1.5">
<span>Gesamtbetrag</span>
<span>{formatCurrency(totals.grossTotal)}</span>
</div>
<p className="text-xs text-gray-500 pt-1">
Dieser Rechnungsbetrag enthält nach §19 Abs. 1 UStG keine USt.
</p>
</>
) : (
<>
<div className="flex justify-between text-sm text-gray-600">
<span>Netto</span>
<span>{formatCurrency(totals.netTotal)}</span>
@@ -266,6 +321,8 @@ export function InvoiceForm({ customers, companyId, onSubmit }: InvoiceFormProps
<span>Gesamt (brutto)</span>
<span>{formatCurrency(totals.grossTotal)}</span>
</div>
</>
)}
</div>
</div>
</div>
app/components/invoice/invoice-pdf.tsx
+25 -8
View File
@@ -204,6 +204,7 @@ interface InvoicePDFProps {
deliveryDate?: Date | string | null;
dueDate: Date | string;
notes?: string | null;
kleinunternehmer?: boolean;
netTotal: number | string | { toString(): string };
taxTotal: number | string | { toString(): string };
grossTotal: number | string | { toString(): string };
@@ -223,7 +224,6 @@ interface InvoicePDFProps {
};
customer: {
name: string;
vatId?: string | null;
address: string;
zip: string;
city: string;
@@ -296,11 +296,6 @@ export function InvoicePDFDocument({ invoice }: InvoicePDFProps) {
{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>
@@ -330,9 +325,13 @@ export function InvoicePDFDocument({ invoice }: InvoicePDFProps) {
<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_price }}>
{invoice.kleinunternehmer ? "EP (brutto)" : "EP (netto)"}
</Text>
{!invoice.kleinunternehmer && (
<Text style={{ ...styles.tableHeaderText, ...styles.col_tax }}>MwSt.</Text>
<Text style={{ ...styles.tableHeaderText, ...styles.col_total }}>Gesamt (brutto)</Text>
)}
<Text style={{ ...styles.tableHeaderText, ...styles.col_total }}>Gesamt</Text>
</View>
{invoice.items.map((item, idx) => (
@@ -342,7 +341,9 @@ export function InvoicePDFDocument({ invoice }: InvoicePDFProps) {
<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>
{!invoice.kleinunternehmer && (
<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>
@@ -351,6 +352,20 @@ export function InvoicePDFDocument({ invoice }: InvoicePDFProps) {
<View style={styles.totalsSection}>
<View style={styles.totalsTable}>
{invoice.kleinunternehmer ? (
<>
<View style={styles.totalsFinalRow}>
<Text style={styles.totalsFinalLabel}>Gesamtbetrag</Text>
<Text style={styles.totalsFinalValue}>{formatMoney(n(invoice.grossTotal))}</Text>
</View>
<View style={styles.totalsRow}>
<Text style={{ ...styles.totalsLabel, fontSize: 8, fontStyle: "italic" }}>
Dieser Rechnungsbetrag enthält nach §19 Abs. 1 UStG keine USt.
</Text>
</View>
</>
) : (
<>
<View style={styles.totalsRow}>
<Text style={styles.totalsLabel}>Nettobetrag</Text>
<Text style={styles.totalsValue}>{formatMoney(n(invoice.netTotal))}</Text>
@@ -365,6 +380,8 @@ export function InvoicePDFDocument({ invoice }: InvoicePDFProps) {
<Text style={styles.totalsFinalLabel}>Gesamtbetrag (inkl. MwSt.)</Text>
<Text style={styles.totalsFinalValue}>{formatMoney(n(invoice.grossTotal))}</Text>
</View>
</>
)}
</View>
</View>
app/components/layout/topbar.tsx
+20 -3
View File
@@ -1,5 +1,5 @@
import { useMatches, useLocation, Link } from "react-router";
import { ChevronRight, LayoutDashboard } from "lucide-react";
import { useMatches, useLocation, Link, Form } from "react-router";
import { ChevronRight, LayoutDashboard, LogOut } from "lucide-react";
interface Breadcrumb {
label: string;
@@ -107,7 +107,7 @@ export function Topbar({ userName }: { userName?: string | null }) {
</Link>
)}
{/* User */}
{/* User + Logout */}
{userName && (
<div style={{ display: "flex", alignItems: "center", gap: "0.625rem", marginLeft: "1rem", flexShrink: 0 }}>
<span style={{ fontSize: "0.875rem", color: "#64748b" }}>{userName}</span>
@@ -127,6 +127,23 @@ export function Topbar({ userName }: { userName?: string | null }) {
>
{getInitials(userName)}
</div>
<Form method="post" action="/logout">
<button
type="submit"
title="Abmelden"
style={{
display: "flex",
alignItems: "center",
background: "none",
border: "none",
cursor: "pointer",
color: "#94a3b8",
padding: "0.25rem",
}}
>
<LogOut style={{ width: "1rem", height: "1rem" }} />
</button>
</Form>
</div>
)}
</header>
app/lib/tax.ts
+8
View File
@@ -15,6 +15,14 @@ export function calcItemAmounts(
return { netAmount, taxAmount, grossAmount };
}
export function calcItemAmountsKleinunternehmer(
quantity: number,
unitPrice: number
) {
const grossAmount = Math.round(quantity * unitPrice * 100) / 100;
return { netAmount: grossAmount, taxAmount: 0, grossAmount };
}
export function calcInvoiceTotals(
items: Array<{ netAmount: number; taxAmount: number; grossAmount: number }>
) {
app/routes/api.companies.$id.ts
+1
View File
@@ -18,6 +18,7 @@ const companySchema = z.object({
bankBic: z.string().optional(),
bankName: z.string().optional(),
invoicePrefix: z.string().optional(),
kleinunternehmer: z.boolean().optional(),
});
export async function loader({ request, params }: { request: Request; params: { id: string } }) {
app/routes/api.companies.ts
+1
View File
@@ -17,6 +17,7 @@ const companySchema = z.object({
bankBic: z.string().optional(),
bankName: z.string().optional(),
invoicePrefix: z.string().optional().default("RE"),
kleinunternehmer: z.boolean().optional().default(false),
});
export async function loader({ request }: { request: Request }) {
app/routes/api.invoices.ts
+1
View File
@@ -22,6 +22,7 @@ const invoiceSchema = z.object({
deliveryDate: z.string().optional(),
dueDate: z.string(),
notes: z.string().optional(),
kleinunternehmer: z.boolean().optional().default(false),
items: z.array(itemSchema).min(1),
netTotal: z.number(),
taxTotal: z.number(),
app/routes/companies.$id.invoices.$invoiceId.tsx
+27 -3
View File
@@ -45,6 +45,7 @@ export async function loader({
netTotal: Number(invoice.netTotal),
taxTotal: Number(invoice.taxTotal),
grossTotal: Number(invoice.grossTotal),
kleinunternehmer: invoice.kleinunternehmer,
issueDate: invoice.issueDate.toISOString(),
dueDate: invoice.dueDate.toISOString(),
deliveryDate: invoice.deliveryDate?.toISOString() ?? null,
@@ -184,9 +185,6 @@ export default function InvoiceDetailPage() {
<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>
@@ -242,6 +240,18 @@ export default function InvoiceDetailPage() {
<div className="flex justify-end">
<div className="w-72 space-y-1.5">
{invoice.kleinunternehmer ? (
<>
<div className="flex justify-between text-base font-bold text-gray-900 border-t border-gray-300 pt-2">
<span>Gesamtbetrag</span>
<span>{formatCurrency(invoice.grossTotal)}</span>
</div>
<p className="text-xs text-gray-500 pt-1">
Dieser Rechnungsbetrag enthält nach §19 Abs. 1 UStG keine USt.
</p>
</>
) : (
<>
<div className="flex justify-between text-sm text-gray-600">
<span>Nettobetrag</span>
<span>{formatCurrency(invoice.netTotal)}</span>
@@ -256,6 +266,8 @@ export default function InvoiceDetailPage() {
<span>Gesamtbetrag (brutto)</span>
<span>{formatCurrency(invoice.grossTotal)}</span>
</div>
</>
)}
</div>
</div>
@@ -285,6 +297,16 @@ export default function InvoiceDetailPage() {
<CardTitle className="text-sm">Zusammenfassung</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
{invoice.kleinunternehmer ? (
<>
<div className="border-t border-gray-200 pt-2">
<p className="text-xs text-gray-500">Gesamtbetrag</p>
<p className="text-lg font-bold text-gray-900">{formatCurrency(invoice.grossTotal)}</p>
</div>
<p className="text-xs text-gray-400">Keine USt. gem. §19 UStG</p>
</>
) : (
<>
<div>
<p className="text-xs text-gray-500">Netto</p>
<p className="font-medium text-gray-900">{formatCurrency(invoice.netTotal)}</p>
@@ -297,6 +319,8 @@ export default function InvoiceDetailPage() {
<p className="text-xs text-gray-500">Brutto</p>
<p className="text-lg font-bold text-gray-900">{formatCurrency(invoice.grossTotal)}</p>
</div>
</>
)}
</CardContent>
</Card>
</div>
app/routes/companies.$id.invoices.new.tsx
+1 -1
View File
@@ -74,7 +74,7 @@ export default function NewInvoicePage() {
<CardTitle>Rechnungsdaten</CardTitle>
</CardHeader>
<CardContent>
<InvoiceForm customers={customers} companyId={company.id} onSubmit={handleSubmit} />
<InvoiceForm customers={customers} companyId={company.id} defaultKleinunternehmer={company.kleinunternehmer} onSubmit={handleSubmit} />
</CardContent>
</Card>
</div>
db/docker-compose.yml
+1 -4
View File
@@ -9,7 +9,7 @@ services:
MYSQL_USER: annas_user
MYSQL_PASSWORD: annas_password
volumes:
- mariadb_data:/var/lib/mysql
- ./data:/var/lib/mysql
ports:
- "3306:3306"
networks:
@@ -39,9 +39,6 @@ services:
networks:
- db_network
volumes:
mariadb_data:
networks:
db_network:
driver: bridge
package.json
+3 -2
View File
@@ -4,13 +4,14 @@
"private": true,
"type": "module",
"scripts": {
"dev": "docker-compose -f db/docker-compose.yml up -d && react-router dev",
"devfull": "docker-compose -f db/docker-compose.yml up -d && react-router dev",
"dev": "react-router dev",
"build": "react-router build",
"start": "react-router-serve ./build/server/index.js",
"typecheck": "react-router typegen && tsc",
"lint": "eslint",
"db:migrate": "prisma migrate dev",
"db:seed": "ts-node --compiler-options '{\"module\":\"CommonJS\"}' prisma/seed.ts",
"db:seed": "npx ts-node --compiler-options '{\"module\":\"CommonJS\"}' prisma/seed.ts",
"db:studio": "prisma studio"
},
"prisma": {
prisma/migrations/20260311214225_add_kleinunternehmer_to_invoice/migration.sql
+2
View File
@@ -0,0 +1,2 @@
-- AlterTable
ALTER TABLE `invoices` ADD COLUMN `kleinunternehmer` BOOLEAN NOT NULL DEFAULT false;
prisma/migrations/20260311221959_add_kleinunternehmer_to_company/migration.sql
+2
View File
@@ -0,0 +1,2 @@
-- AlterTable
ALTER TABLE `companies` ADD COLUMN `kleinunternehmer` BOOLEAN NOT NULL DEFAULT false;
prisma/schema.prisma
+3
View File
@@ -5,6 +5,7 @@ generator client {
datasource db {
provider = "mysql"
url = env("DATABASE_URL")
shadowDatabaseUrl = env("SHADOW_DATABASE_URL")
}
model User {
@@ -37,6 +38,7 @@ model Company {
bankName String?
invoicePrefix String @default("RE")
invoiceSequence Int @default(0)
kleinunternehmer Boolean @default(false)
userId String
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
customers Customer[]
@@ -77,6 +79,7 @@ model Invoice {
deliveryDate DateTime?
dueDate DateTime
status InvoiceStatus @default(DRAFT)
kleinunternehmer Boolean @default(false)
notes String? @db.Text
items InvoiceItem[]
netTotal Decimal @db.Decimal(10, 2)
prisma/seed.ts
+5 -3
View File
@@ -51,7 +51,6 @@ async function main() {
id: "demo-customer-1",
companyId: company.id,
name: "Beispiel AG",
vatId: "DE987654321",
address: "Beispielweg 5",
zip: "20095",
city: "Hamburg",
@@ -61,8 +60,11 @@ async function main() {
console.log(`✓ Customer created: ${customer.name}`);
// Create demo invoice
const invoice = await prisma.invoice.create({
data: {
const invoice = await prisma.invoice.upsert({
where: { id: "demo-invoice-1" },
update: {},
create: {
id: "demo-invoice-1",
number: "RE-2024-001",
companyId: company.id,
customerId: customer.id,