Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix navbar/discount/invoice bugs from manual QA, add VAT breakdown, shipping-address override, checkout persistence, redesigned mobile menu

Browse Source 
Bug fixes:
- Navbar login/logout state now updates immediately (custom ep-auth-changed
  event) instead of requiring a hard reload
- Status-change email links were broken by an un-encoded "#" in the order
  number; fixed for all 4 status emails
- Cart discount code: manual input field restored (was removed entirely)
- Quote-label underline now scales with the label's actual text width
- Number Ranges admin list now shows the invoice prefix/counter columns

Pricing & VAT:
- Prices show the real per-product VAT rate ("inkl. X% MwSt.") instead of
  a generic disclosure
- Cart/checkout/confirmation totals show the actual € amount of VAT
  included, broken down per rate when a cart spans more than one
  (new lib/taxBreakdown.ts, shared with the invoice PDF's own math)
- Account order pages gained product thumbnails and the same VAT breakdown

Low-stock warning: a "Nur noch wenige verfügbar" badge/hint across the
shop grid, spotlight, and add-to-cart variant pickers, driven by the
existing lowStockThreshold field (still never exposes raw stock counts).

Invoice PDFs: product thumbnails on every line item, a plain "Netto"
label (rate was redundant, already stated on the MwSt. line below), no
more duplicate USt-IdNr. in the header, and — for a Stornorechnung
specifically — an explicit "Versand" line that was previously only
folded silently into the tax totals.

Checkout:
- Optional deviating shipping address (separate from the billing address
  used for the invoice), with its own toggle + address form
- Full checkout draft persistence (name/address/shipping/payment
  selections) survives navigating away and back, via localStorage
- Invoice PDF shows a third "Lieferadresse" block when the shipping
  address differs from billing

Mobile navigation: fullscreen panel with a circular reveal animation from
the hamburger's corner, replacing the old in-flow accordion drawer; no
login CTA inside it (redundant with the always-visible header icon).

Admin-facing (Payload backend, mirrored where the frontend has a ported
copy of the same renderer): dashboard rebuilt as individual cards, split
into 3 task queues (received/processing/returns) instead of 2, revenue
and order counts now exclude cancelled/returned orders immediately, and
the low-stock alert links to the specific affected product(s) instead of
the unfiltered list. A new immediate email notifies the shop owner the
moment an order comes in, instead of only via the daily digest.

Testimonials admin list now groups by page instead of interleaving all
three grids' entries. ~45 English admin field descriptions translated to
German for consistency.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Marco
2026-07-22 22:52:15 +00:00
parent 7a9fed6f95
commit 43944d8cc8
39 changed files with 1435 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/lib/invoicePdf.tsx
+63 -24
View File
@@ -1,6 +1,7 @@
import React from "react";
import { Document, Page, View, Text, StyleSheet, renderToBuffer } from "@react-pdf/renderer";
import { Document, Page, View, Text, Image, StyleSheet, renderToBuffer } from "@react-pdf/renderer";
import { formatDate } from "./format";
import { computeTaxBreakdown } from "./taxBreakdown";
// Generated synchronously in the checkout request (see app/lib/orderEmail.ts)
// and attached to the order-confirmation email, plus available on-demand via
@@ -37,8 +38,12 @@ const styles = StyleSheet.create({
wordmark: { fontFamily: "Helvetica-Bold", fontSize: 14 },
kindLabel: { fontFamily: "Helvetica-Bold", fontSize: 22, color: BRAND, letterSpacing: 1 },
body: { padding: 32, paddingBottom: 90 },
addressRow: { flexDirection: "row", justifyContent: "space-between", marginBottom: 24 },
addressRow: { flexDirection: "row", flexWrap: "wrap", justifyContent: "space-between", rowGap: 12, marginBottom: 24 },
addressBlock: { width: "45%" },
// Narrower variant for when a 3rd (shipping) block joins Von/An — three
// of these plus the row's own space-between still fit a Page's width
// without any block cramping its text.
addressBlockThird: { width: "30%" },
addressLabel: { fontSize: 8, color: TEXT_MUTED, marginBottom: 4, textTransform: "uppercase" },
addressLine: { fontSize: 10, lineHeight: 1.5 },
metaRow: { flexDirection: "row", gap: 10, marginBottom: 16, flexWrap: "wrap" },
@@ -51,6 +56,8 @@ const styles = StyleSheet.create({
tableHeader: { flexDirection: "row", backgroundColor: BG_MUTED, paddingVertical: 8, paddingHorizontal: 10 },
tableRow: { flexDirection: "row", paddingVertical: 8, paddingHorizontal: 10, borderTopWidth: 1, borderTopColor: BORDER },
tableRowAlt: { backgroundColor: BG_MUTED },
colImage: { width: 28 },
itemImage: { width: 28, height: 28, borderRadius: 3 },
colName: { flex: 3 },
colQty: { flex: 1, textAlign: "right" },
colPrice: { flex: 1, textAlign: "right" },
@@ -85,7 +92,15 @@ function formatPrice(amount: number): string {
return new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(amount);
}
export type InvoiceItem = { productName: string; quantity: number; unitPrice: number; taxRatePercent: number; bundleContents?: string | null; variantName?: string | null };
export type InvoiceItem = {
productName: string;
quantity: number;
unitPrice: number;
taxRatePercent: number;
bundleContents?: string | null;
variantName?: string | null;
imageUrl?: string | null;
};
export type InvoiceOrder = {
orderNumber: string;
@@ -100,6 +115,20 @@ export type InvoiceOrder = {
zip: string;
city: string;
country: string;
// Optional package destination distinct from the "An" recipient above —
// when set, the invoice shows both addresses (billing stays "An", this
// becomes its own "Lieferadresse" block) instead of implying the order
// shipped to the billing address, which is only true when this is unset.
hasDifferentShippingAddress?: boolean;
shippingFirstName?: string | null;
shippingLastName?: string | null;
shippingDeliveryMethod?: "address" | "packstation" | null;
shippingStreet?: string | null;
shippingPackstationNumber?: string | null;
shippingPostNumber?: string | null;
shippingZip?: string | null;
shippingCity?: string | null;
shippingCountry?: string | null;
paymentMethodTitle: string;
items: InvoiceItem[];
subtotal: number;
@@ -172,20 +201,12 @@ function isPaidImmediately(paymentMethodTitle: string): boolean {
// rates. Falls back to the seller's default rate for any line that
// predates this field (older orders had no per-item snapshot).
function groupByTaxRate(order: InvoiceOrder, defaultRate: number): { rate: number; net: number; tax: number; gross: number }[] {
const groups = new Map<number, number>();
for (const item of order.items) {
const rate = item.taxRatePercent ?? defaultRate;
const lineGross = item.quantity * item.unitPrice;
groups.set(rate, (groups.get(rate) ?? 0) + lineGross);
}
const scale = order.subtotal > 0 ? (order.subtotal - order.discountAmount + order.shippingCost) / order.subtotal : 1;
return Array.from(groups.entries())
.map(([rate, lineGross]) => {
const gross = lineGross * scale;
const net = gross / (1 + rate / 100);
return { rate, net, tax: gross - net, gross };
})
.sort((a, b) => b.rate - a.rate);
return computeTaxBreakdown(
order.items.map((item) => ({ quantity: item.quantity, unitPrice: item.unitPrice, taxRatePercent: item.taxRatePercent ?? defaultRate })),
order.subtotal,
order.discountAmount,
order.shippingCost,
);
}
// Exported (not just used internally by renderInvoicePdf below) so
@@ -199,6 +220,11 @@ export function InvoiceDocument({ order, seller }: { order: InvoiceOrder; seller
const paid = isPaidImmediately(order.paymentMethodTitle);
const deliveryLine =
order.deliveryMethod === "address" ? order.street : `Packstation ${order.packstationNumber} · Postnummer ${order.postNumber}`;
const shippingLine =
order.shippingDeliveryMethod === "packstation"
? `Packstation ${order.shippingPackstationNumber} · Postnummer ${order.shippingPostNumber}`
: order.shippingStreet;
const addressBlockStyle = order.hasDifferentShippingAddress ? styles.addressBlockThird : styles.addressBlock;
return (
<Document>
@@ -210,7 +236,7 @@ export function InvoiceDocument({ order, seller }: { order: InvoiceOrder; seller
<View style={styles.body}>
<View style={styles.addressRow}>
<View style={styles.addressBlock}>
<View style={addressBlockStyle}>
<Text style={styles.addressLabel}>Von</Text>
<Text style={styles.addressLine}>{seller.sellerName}</Text>
<Text style={styles.addressLine}>{seller.sellerStreet}</Text>
@@ -219,7 +245,7 @@ export function InvoiceDocument({ order, seller }: { order: InvoiceOrder; seller
</Text>
<Text style={styles.addressLine}>{seller.sellerCountry}</Text>
</View>
<View style={styles.addressBlock}>
<View style={addressBlockStyle}>
<Text style={styles.addressLabel}>An</Text>
<Text style={styles.addressLine}>
{order.customerFirstName} {order.customerLastName}
@@ -230,6 +256,19 @@ export function InvoiceDocument({ order, seller }: { order: InvoiceOrder; seller
</Text>
<Text style={styles.addressLine}>{order.country}</Text>
</View>
{order.hasDifferentShippingAddress && (
<View style={addressBlockStyle}>
<Text style={styles.addressLabel}>Lieferadresse</Text>
<Text style={styles.addressLine}>
{order.shippingFirstName} {order.shippingLastName}
</Text>
<Text style={styles.addressLine}>{shippingLine}</Text>
<Text style={styles.addressLine}>
{order.shippingZip} {order.shippingCity}
</Text>
<Text style={styles.addressLine}>{order.shippingCountry}</Text>
</View>
)}
</View>
<View style={styles.metaRow}>
@@ -245,10 +284,6 @@ export function InvoiceDocument({ order, seller }: { order: InvoiceOrder; seller
<Text style={styles.metaLabel}>Bestellnummer</Text>
<Text style={styles.metaValue}>{order.orderNumber}</Text>
</View>
<View style={styles.metaBox}>
<Text style={styles.metaLabel}>USt-IdNr.</Text>
<Text style={styles.metaValue}>{seller.vatId}</Text>
</View>
{paid && (
<View style={styles.paidBadge}>
<Text style={styles.paidBadgeText}>✓ Bereits beglichen ({order.paymentMethodTitle})</Text>
@@ -258,6 +293,7 @@ export function InvoiceDocument({ order, seller }: { order: InvoiceOrder; seller
<View style={styles.table}>
<View style={styles.tableHeader}>
<View style={styles.colImage} />
<Text style={[styles.colName, styles.headerCell]}>Artikel</Text>
<Text style={[styles.colQty, styles.headerCell]}>Menge</Text>
<Text style={[styles.colPrice, styles.headerCell]}>Einzelpreis</Text>
@@ -265,6 +301,9 @@ export function InvoiceDocument({ order, seller }: { order: InvoiceOrder; seller
</View>
{order.items.map((item, i) => (
<View style={[styles.tableRow, i % 2 === 1 ? styles.tableRowAlt : {}]} key={i}>
<View style={styles.colImage}>
{item.imageUrl && <Image src={item.imageUrl} style={styles.itemImage} />}
</View>
<View style={styles.colName}>
<Text>
{item.productName}
@@ -294,7 +333,7 @@ export function InvoiceDocument({ order, seller }: { order: InvoiceOrder; seller
{rateGroups.map((g) => (
<React.Fragment key={g.rate}>
<View style={styles.summaryRow}>
<Text style={styles.summaryLabel}>Netto ({g.rate}%)</Text>
<Text style={styles.summaryLabel}>Netto</Text>
<Text style={styles.summaryValue}>{formatPrice(g.net)}</Text>
</View>
<View style={styles.summaryRow}>