Daniel/webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(order): add net/tax/gross breakdown for one-time and monthly totals
All checks were successful
Staging Build / build (push) Successful in 3m28s
Details

Browse Source
This commit is contained in:
DanielS
2026-07-03 08:50:28 +02:00
parent 147dab5607
commit 7a61002ef5
5 changed files with 309 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
shop/components/HomeClient.tsx
View File

@@ -130,14 +130,13 @@ export function HomeClient({ initialUser }: HomeClientProps) {
variants={itemVariants}
className="text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl/tight bg-clip-text text-transparent bg-gradient-to-b from-white via-slate-100 to-slate-400"
>
POS Software <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-indigo-400 to-purple-500 font-black">Lizenzen & Module</span>
CASPOS Software <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-indigo-400 to-purple-500 font-black">Lizenzen & Module</span>
</motion.h1>
<motion.p
variants={itemVariants}
className="mx-auto max-w-[750px] text-slate-400 text-base sm:text-lg md:text-xl font-normal leading-relaxed"
>
Erwerben und verwalten Sie digitale Lizenzen für CASPOS Kassensysteme.
Sofortige Aktivierung und automatische Bereitstellung für Ihre Kunden.
</motion.p>
</div>
@@ -347,46 +346,6 @@ export function HomeClient({ initialUser }: HomeClientProps) {
</div>
</section>
{/* Core values / Features list */}
<section className="w-full py-16 md:py-24 border-t border-slate-900 bg-slate-950/50">
<div className="container max-w-5xl mx-auto px-4">
<div className="grid gap-8 md:grid-cols-2 items-center">
<div className="space-y-6">
<div className="inline-flex items-center gap-1.5 text-xs font-bold text-blue-400 uppercase tracking-widest bg-blue-500/10 border border-blue-500/20 px-3 py-1 rounded-full">
<ShieldCheck className="w-3.5 h-3.5" /> Sicherheit & Stabilität
</div>
<h3 className="text-3xl font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-slate-100 to-slate-400">
Verlässliche Plattform für Lizenz-Aktivierungen
</h3>
<p className="text-slate-400 text-sm sm:text-base leading-relaxed">
Unsere Kassenlösungen sind GoBD-konform und offline-fähig. Über den Lizenz-Management-Server werden alle Lizenzen und Module verschlüsselt übertragen und sind innerhalb weniger Millisekunden auf der Kasse aktiv.
</p>
</div>
<div className="grid gap-4 sm:grid-cols-2">
<div className="p-5 rounded-xl border border-slate-900 bg-slate-950/70 space-y-2">
<CheckCircle2 className="w-5 h-5 text-blue-500" />
<h5 className="font-bold text-sm text-slate-200">GoBD Konformität</h5>
<p className="text-xs text-slate-400">Konform nach allen aktuellen steuerrechtlichen Anforderungen.</p>
</div>
<div className="p-5 rounded-xl border border-slate-900 bg-slate-950/70 space-y-2">
<CheckCircle2 className="w-5 h-5 text-blue-500" />
<h5 className="font-bold text-sm text-slate-200">Same-Day-Bearbeitung</h5>
<p className="text-xs text-slate-400">Bearbeitung und Erstellung Ihrer Lizenzen noch am selben Werktag.</p>
</div>
<div className="p-5 rounded-xl border border-slate-900 bg-slate-950/70 space-y-2">
<CheckCircle2 className="w-5 h-5 text-blue-500" />
<h5 className="font-bold text-sm text-slate-200">Verschlüsselte Keys</h5>
<p className="text-xs text-slate-400">Sichere Lizenz-Authentifizierung direkt auf der Kasse.</p>
</div>
<div className="p-5 rounded-xl border border-slate-900 bg-slate-950/70 space-y-2">
<CheckCircle2 className="w-5 h-5 text-blue-500" />
<h5 className="font-bold text-sm text-slate-200">Partner Support</h5>
<p className="text-xs text-slate-400">Schnelle Hilfe und kompetente Ansprechpartner für Händler.</p>
</div>
</div>
</div>
</div>
</section>
{/* Footer */}
<footer className="w-full border-t border-slate-900 bg-slate-950 py-8 px-4 md:px-6 relative z-10">

77
shop/components/invoice-pdf.tsx
View File

@@ -96,10 +96,18 @@ const styles = StyleSheet.create({
export const InvoicePDF = ({ order, orderSnapshot, customer }: any) => {
const items = orderSnapshot?.items ?? [];
const subtotal = orderSnapshot?.subtotal ?? 0;
const taxAmount = orderSnapshot?.tax_amount ?? 0;
const taxRate = orderSnapshot?.tax_rate ?? 19;
const total = orderSnapshot?.total ?? 0;
const oneTimeItems = items.filter((item: any) => item.billing_interval === 'one_time');
const monthlyItems = items.filter((item: any) => item.billing_interval === 'monthly');
const oneTimeNet = oneTimeItems.reduce((sum: number, item: any) => sum + (item.item_total || 0), 0);
const oneTimeTax = Math.round(oneTimeNet * (taxRate / 100) * 100) / 100;
const oneTimeGross = Math.round((oneTimeNet + oneTimeTax) * 100) / 100;
const monthlyNet = monthlyItems.reduce((sum: number, item: any) => sum + (item.item_total || 0), 0);
const monthlyTax = Math.round(monthlyNet * (taxRate / 100) * 100) / 100;
const monthlyGross = Math.round((monthlyNet + monthlyTax) * 100) / 100;
return (
<Document>
@@ -204,18 +212,57 @@ export const InvoicePDF = ({ order, orderSnapshot, customer }: any) => {
<View style={styles.total}>
<View style={{ width: '50%' }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 3 }}>
<Text>Netto-Zwischensumme:</Text>
<Text>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(subtotal)}</Text>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 3 }}>
<Text>zzgl. {taxRate}% USt:</Text>
<Text>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(taxAmount)}</Text>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 5, borderTopWidth: 1, borderTopColor: '#000', paddingTop: 5 }}>
<Text style={styles.totalLabel}>Gesamtbetrag (brutto):</Text>
<Text style={styles.totalLabel}>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(total)}</Text>
</View>
{oneTimeNet > 0 && (
<View style={{ marginBottom: monthlyNet > 0 ? 10 : 0 }}>
{monthlyNet > 0 && (
<Text style={{ fontWeight: 'bold', marginBottom: 4, fontSize: 11 }}>Einmaliger Betrag:</Text>
)}
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 3 }}>
<Text>Netto-Zwischensumme:</Text>
<Text>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeNet)}</Text>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 3 }}>
<Text>zzgl. {taxRate}% USt:</Text>
<Text>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeTax)}</Text>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 5, borderTopWidth: 1, borderTopColor: '#000', paddingTop: 5 }}>
<Text style={styles.totalLabel}>
{monthlyNet > 0 ? 'Gesamtbetrag einmalig (brutto):' : 'Gesamtbetrag (brutto):'}
</Text>
<Text style={styles.totalLabel}>
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeGross)}
</Text>
</View>
</View>
)}
{oneTimeNet > 0 && monthlyNet > 0 && (
<View style={{ borderTopWidth: 1, borderTopColor: '#eee', marginVertical: 10 }} />
)}
{monthlyNet > 0 && (
<View>
{oneTimeNet > 0 && (
<Text style={{ fontWeight: 'bold', marginBottom: 4, fontSize: 11 }}>Monatlicher Betrag:</Text>
)}
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 3 }}>
<Text>Netto-Zwischensumme:</Text>
<Text>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyNet)} / mtl.</Text>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 3 }}>
<Text>zzgl. {taxRate}% USt:</Text>
<Text>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyTax)} / mtl.</Text>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 5, borderTopWidth: 1, borderTopColor: '#000', paddingTop: 5 }}>
<Text style={styles.totalLabel}>
{oneTimeNet > 0 ? 'Gesamtbetrag monatlich (brutto):' : 'Gesamtbetrag (brutto):'}
</Text>
<Text style={styles.totalLabel}>
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyGross)} / mtl.
</Text>
</View>
</View>
)}
</View>
</View>

26
shop/components/order-wizard.tsx
View File

@@ -442,11 +442,10 @@ export function OrderWizard({
{[1, 2, 3, 4].map(s => (
<div key={s} className="relative z-10 flex flex-col items-center gap-2">
<div
className={`w-10 h-10 rounded-full flex items-center justify-center transition-all duration-500 ${
step >= s
className={`w-10 h-10 rounded-full flex items-center justify-center transition-all duration-500 ${step >= s
? 'bg-primary text-white scale-110 shadow-[0_0_15px_rgba(59,130,246,0.5)]'
: 'bg-slate-800 text-slate-400'
}`}
}`}
>
{step > s ? <Check className="w-6 h-6" /> : s}
</div>
@@ -530,11 +529,10 @@ export function OrderWizard({
{filteredEndCustomers.map(customer => (
<label
key={customer.id}
className={`flex items-start p-4 rounded-xl border-2 cursor-pointer transition-all ${
selectedEndCustomerId === customer.id
className={`flex items-start p-4 rounded-xl border-2 cursor-pointer transition-all ${selectedEndCustomerId === customer.id
? 'border-primary bg-primary/5'
: 'border-white/5 bg-white/5 hover:bg-white/10'
}`}
}`}
>
<input
type="radio"
@@ -641,11 +639,10 @@ export function OrderWizard({
{/* Option 1: Kauf */}
<div
onClick={() => handleBillingIntervalChange('one_time')}
className={`relative p-6 rounded-2xl border-2 cursor-pointer transition-all duration-300 flex flex-col justify-between h-48 hover:shadow-[0_0_20px_rgba(255,255,255,0.05)] ${
selectedBillingInterval === 'one_time'
className={`relative p-6 rounded-2xl border-2 cursor-pointer transition-all duration-300 flex flex-col justify-between h-48 hover:shadow-[0_0_20px_rgba(255,255,255,0.05)] ${selectedBillingInterval === 'one_time'
? 'border-primary bg-primary/10 shadow-[0_0_25px_rgba(59,130,246,0.2)]'
: 'border-white/5 bg-white/5 hover:border-white/20'
}`}
}`}
>
<div>
<div className="flex items-center gap-3 mb-3">
@@ -668,11 +665,10 @@ export function OrderWizard({
{/* Option 2: Abo */}
<div
onClick={() => handleBillingIntervalChange('monthly')}
className={`relative p-6 rounded-2xl border-2 cursor-pointer transition-all duration-300 flex flex-col justify-between h-48 hover:shadow-[0_0_20px_rgba(255,255,255,0.05)] ${
selectedBillingInterval === 'monthly'
className={`relative p-6 rounded-2xl border-2 cursor-pointer transition-all duration-300 flex flex-col justify-between h-48 hover:shadow-[0_0_20px_rgba(255,255,255,0.05)] ${selectedBillingInterval === 'monthly'
? 'border-primary bg-primary/10 shadow-[0_0_25px_rgba(59,130,246,0.2)]'
: 'border-white/5 bg-white/5 hover:border-white/20'
}`}
}`}
>
<div>
<div className="flex items-center gap-3 mb-3">
@@ -1106,7 +1102,7 @@ export function OrderWizard({
<div className="w-20 h-20 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-4 border border-primary/50">
<ShieldCheck className="w-10 h-10 text-primary" />
</div>
<CardTitle className="text-3xl text-white">Bestellung prüfen</CardTitle>
<CardTitle className="text-3xl text-white">Anfrage prüfen</CardTitle>
<CardDescription className="text-slate-300">
Fast fertig! Bitte überprüfen Sie Ihre Auswahl.
</CardDescription>
@@ -1269,10 +1265,10 @@ export function OrderWizard({
initialOrder ? (
<><Loader2 className="mr-2 h-5 w-5 animate-spin" /> Angebot wird aktualisiert...</>
) : (
<><Loader2 className="mr-2 h-5 w-5 animate-spin" /> Bestellung wird verarbeitet...</>
<><Loader2 className="mr-2 h-5 w-5 animate-spin" /> Anfrage wird versendet...</>
)
) : (
initialOrder ? 'Angebot aktualisieren' : 'Kostenpflichtig bestellen'
initialOrder ? 'Angebot aktualisieren' : 'Anfrage versenden'
)}
</Button>
<Button variant="ghost" className="w-full text-white" onClick={prevStep}>