From 70dc88cd29a3b38b10262f45adee16a7ed37853a Mon Sep 17 00:00:00 2001
From: Thomas Peterson <info@thomas-peterson.de>
Date: Mon, 6 Oct 2025 10:19:05 +0200
Subject: [PATCH] Better Invoice Layout

---
 .../src/modules/base/BaseComponent.tsx        | 46 +++++++++++++------
 .../src/modules/calc/CalcComponent.tsx        | 23 ++++++++--
 .../src/modules/topbar/TopBarComponent.tsx    |  6 +--
 3 files changed, 53 insertions(+), 22 deletions(-)

diff --git a/src/new/var/plugins/System/PSC/Invoice/InvoiceTS/src/modules/base/BaseComponent.tsx b/src/new/var/plugins/System/PSC/Invoice/InvoiceTS/src/modules/base/BaseComponent.tsx
index 87d133ec3..abaf126a6 100644
--- a/src/new/var/plugins/System/PSC/Invoice/InvoiceTS/src/modules/base/BaseComponent.tsx
+++ b/src/new/var/plugins/System/PSC/Invoice/InvoiceTS/src/modules/base/BaseComponent.tsx
@@ -14,6 +14,7 @@ import OrderService from "../../services/order"
 import InfoFieldComponent from "../info/InfoFieldComponent"
 import React from 'react'
 import OrderAliasComponent from '../order/OrderAliasComponent'
+import CalcComponent from '../calc/CalcComponent'
 
 const BaseComponent = (props) => {
     console.log('BaseComponent rendering')
@@ -60,26 +61,43 @@ const BaseComponent = (props) => {
 
                 {/* Main Content */}
                 { shop.id != 0 && (
-                    <>
-                        {/* Contact Section */}
-                        <div className="mb-4">
+                    <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
+                        {/* Left Column - Main Content (2/3 width) */}
+                        <div className="xl:col-span-2 space-y-4">
+                            {/* Contact Section */}
                             <ContactComponent shop={shop} order={order} />
-                        </div>
 
-                        {/* Positions Section */}
-                        <div className="mb-4">
+                            {/* Positions Section */}
                             <PositionsComponent shop={shop} order={order} />
+
+                            {/* Payment & Shipping Row */}
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <PaymentComponent shop={shop} order={order} />
+                                <ShippingComponent shop={shop} order={order} />
+                            </div>
+
+                            {/* Info Section */}
+                            <InfoFieldComponent shop={shop} order={order} />
                         </div>
 
-                        {/* Payment & Shipping Row */}
-                        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
-                            <PaymentComponent shop={shop} order={order} />
-                            <ShippingComponent shop={shop} order={order} />
+                        {/* Right Column - Summary Sidebar (1/3 width) */}
+                        <div className="xl:col-span-1">
+                            <div className="sticky top-4 space-y-4">
+                                {/* Price Summary Card */}
+                                <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border-2 border-purple-200 dark:border-purple-900">
+                                    <h3 className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-100 flex items-center gap-2">
+                                        <svg className="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                                        </svg>
+                                        Preisübersicht
+                                    </h3>
+                                    <div className="space-y-3">
+                                        <CalcComponent />
+                                    </div>
+                                </div>
+                            </div>
                         </div>
-
-                        {/* Info Section */}
-                        <InfoFieldComponent shop={shop} order={order} />
-                    </>
+                    </div>
                 )}
             </div>
         </div>
diff --git a/src/new/var/plugins/System/PSC/Invoice/InvoiceTS/src/modules/calc/CalcComponent.tsx b/src/new/var/plugins/System/PSC/Invoice/InvoiceTS/src/modules/calc/CalcComponent.tsx
index 62c393695..207acd95c 100644
--- a/src/new/var/plugins/System/PSC/Invoice/InvoiceTS/src/modules/calc/CalcComponent.tsx
+++ b/src/new/var/plugins/System/PSC/Invoice/InvoiceTS/src/modules/calc/CalcComponent.tsx
@@ -38,9 +38,26 @@ class CalcComponent extends React.Component<{  },MyState> {
 
     render() {
         return (
-            <h3>
-                <small className="text-body-secondary"> Netto: <Currency price={this.state.order.net} /> + MwSt.: <Currency price={this.state.order.vat} /> =</small> Brutto: <Currency price={this.state.order.gross} />
-            </h3>
+            <div className="space-y-3">
+                <div className="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
+                    <span className="text-sm font-medium text-gray-600 dark:text-gray-400">Netto</span>
+                    <span className="text-base font-semibold text-gray-800 dark:text-gray-200">
+                        <Currency price={this.state.order.net} />
+                    </span>
+                </div>
+                <div className="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
+                    <span className="text-sm font-medium text-gray-600 dark:text-gray-400">MwSt.</span>
+                    <span className="text-base font-semibold text-gray-800 dark:text-gray-200">
+                        <Currency price={this.state.order.vat} />
+                    </span>
+                </div>
+                <div className="flex justify-between items-center py-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg px-3 mt-2">
+                    <span className="text-base font-bold text-gray-900 dark:text-gray-100">Brutto</span>
+                    <span className="text-xl font-bold text-purple-700 dark:text-purple-400">
+                        <Currency price={this.state.order.gross} />
+                    </span>
+                </div>
+            </div>
         )
     }
 }
diff --git a/src/new/var/plugins/System/PSC/Invoice/InvoiceTS/src/modules/topbar/TopBarComponent.tsx b/src/new/var/plugins/System/PSC/Invoice/InvoiceTS/src/modules/topbar/TopBarComponent.tsx
index d77904faa..37ecde418 100644
--- a/src/new/var/plugins/System/PSC/Invoice/InvoiceTS/src/modules/topbar/TopBarComponent.tsx
+++ b/src/new/var/plugins/System/PSC/Invoice/InvoiceTS/src/modules/topbar/TopBarComponent.tsx
@@ -4,7 +4,6 @@ import * as PropTypes from "prop-types"
 import {Shop} from "../../model/shop"
 import DraftComponent from "../draft/DraftComponent"
 import Order from "../../model/order"
-import CalcComponent from '../calc/CalcComponent'
 import React from 'react'
 
 const TopBarComponent = ({shop, order, change}) => {
@@ -21,12 +20,9 @@ const TopBarComponent = ({shop, order, change}) => {
                 <div className="flex-1 min-w-[200px]">
                     <ShopSelectComponent shop={shop} change={change} />
                 </div>
-                <div className="w-auto">
-                    <CalcComponent />
-                </div>
             </div>
         </div>
-    )  
+    )
 }
 
 TopBarComponent.propTypes = {