boonkerz/printshopcreator
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases 2 Wiki Activity

Better Invoice Layout

Browse Source
This commit is contained in:
Thomas Peterson 2025-10-06 10:19:05 +02:00
parent 0bc2af8002
commit 70dc88cd29
3 changed files with 53 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/new/var/plugins/System/PSC/Invoice/InvoiceTS/src/modules/base/BaseComponent.tsx
View File

@ -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>

23
src/new/var/plugins/System/PSC/Invoice/InvoiceTS/src/modules/calc/CalcComponent.tsx
View File

@ -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>
)
}
}

4
src/new/var/plugins/System/PSC/Invoice/InvoiceTS/src/modules/topbar/TopBarComponent.tsx
View File

@ -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,9 +20,6 @@ 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>
)