Backup
This commit is contained in:
parent
749138b541
commit
da7e7ef3ef
@ -343,7 +343,7 @@ CREATE TABLE `article` (
|
||||
`init_status` int(8) NOT NULL,
|
||||
`lager_file_file` varchar(255) DEFAULT NULL,
|
||||
`lager_file_preview` varchar(255) DEFAULT NULL,
|
||||
`preis` float DEFAULT NULL,
|
||||
`preis` float DEFAULT 0,
|
||||
`upload_article` int(1) DEFAULT 0,
|
||||
`upload_article_status` int(4) DEFAULT NULL,
|
||||
`upload_center` int(1) DEFAULT 0,
|
||||
|
||||
@ -11,7 +11,6 @@ export class App {
|
||||
private searchParams: any
|
||||
private setSearchParams: any
|
||||
|
||||
|
||||
constructor(jwt: String) {
|
||||
let token = container.resolve(Token)
|
||||
token.currentToken = jwt
|
||||
@ -19,7 +18,6 @@ export class App {
|
||||
}
|
||||
|
||||
init(): void {
|
||||
|
||||
this.buildUi()
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ import "reflect-metadata";
|
||||
import * as $ from "jquery";
|
||||
import { App } from "./app/app";
|
||||
|
||||
let jwt_token: String = "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpYXQiOjE3NTk3NDE2OTYsImV4cCI6MTc1OTc0NTI5Niwicm9sZXMiOlsiUk9MRV9BRE1JTiIsIlJPTEVfU0hPUF9PUEVSQVRPUiIsIlJPTEVfVVNFUiIsIlJPTEVfVVNFUiIsIlJPTEVfUFNDX0NvbGxlY3RfQ29udGFjdF9FZGl0IiwiUk9MRV9QU0NfQ29sbGVjdF9Db250YWN0X0FkZCIsIlJPTEVfUFNDX0NvbGxlY3RfQ29udGFjdF9EZWxldGUiLCJST0xFX1BTQ19Db2xsZWN0X0NvbnRhY3RfTG9jayIsIlJPTEVfUFNDX1IyX1NlbmRjbG91ZF9TaG93Il0sInVpZCI6MX0.jFEl7EgvuFKOhG_MwRjQ1Tbx7Q48PSwfxuZUGxt0vGRSPj5ImoLJTQEsf0hQqaXIMG-kerbNXNfbvYniZT1xCBUSWADCg3Io_5QJrGhC8Su0FHOeT1iCICFV11_1q0r6PGA_KaBTVNDrMGvDx06UdrKwIosocRa1cHDmf_vUqmPy8OsqeKwSm0mqaiDuRIIsBQvxEiPz5l5R0QEHaKObUAfb1eXBSV7R3-QNX4EKDUjeoT8YiF04ZlLe2qOOkRW0gCmEEKyxgwIvbeucwipaiNVRUeroAQ7FlTaIW3GoXAsDs7yaXeDZVRnNz3Q4Rkfss0J_OL1BAgW0muQJvBDEfw";
|
||||
declare var jwt_token: String;
|
||||
let app = new App(jwt_token);
|
||||
app.init();
|
||||
app.run();
|
||||
|
||||
@ -1,20 +1,21 @@
|
||||
import { Shop } from '../../model/shop'
|
||||
import ContactComponent from '../contact/ContactComponent'
|
||||
import TopBarComponent from '../topbar/TopBarComponent'
|
||||
import PositionsComponent from '../positions/PositionsComponent'
|
||||
import {useEffect, useState} from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import Order from "../../model/order"
|
||||
import PaymentComponent from "../payment/PaymentComponent"
|
||||
import ShippingComponent from "../shipping/ShippingComponent"
|
||||
import ButtonComponent from "../button/ButtonComponent"
|
||||
import {useParams} from "react-router-dom"
|
||||
import {container} from "tsyringe-neo"
|
||||
import { useParams } from "react-router-dom"
|
||||
import { container } from "tsyringe-neo"
|
||||
import OrderState from "../../state/order"
|
||||
import OrderService from "../../services/order"
|
||||
import InfoFieldComponent from "../info/InfoFieldComponent"
|
||||
import React from 'react'
|
||||
import OrderAliasComponent from '../order/OrderAliasComponent'
|
||||
import CalcComponent from '../calc/CalcComponent'
|
||||
import DraftComponent from '../draft/DraftComponent'
|
||||
import TypeSelectComponent from '../type/TypeSelectComponent'
|
||||
import ShopSelectComponent from '../shop/ShopSelectComponent'
|
||||
|
||||
const BaseComponent = (props) => {
|
||||
console.log('BaseComponent rendering')
|
||||
@ -35,8 +36,7 @@ const BaseComponent = (props) => {
|
||||
let params = useParams()
|
||||
|
||||
useEffect(() => {
|
||||
console.log('BaseComponent mounted', params)
|
||||
if(params.uuid) {
|
||||
if (params.uuid) {
|
||||
loadOrder(params.uuid)
|
||||
}
|
||||
}, [])
|
||||
@ -44,23 +44,38 @@ const BaseComponent = (props) => {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-gray-900 dark:to-gray-800 text-gray-900 dark:text-gray-100 antialiased">
|
||||
<div className='w-full px-6 py-4'>
|
||||
{/* Header Section */}
|
||||
<div className="flex items-center justify-between gap-4 mb-4">
|
||||
<div className="flex-1">
|
||||
<OrderAliasComponent order={order} />
|
||||
</div>
|
||||
<div>
|
||||
<ButtonComponent loadOrder={loadOrder}/>
|
||||
</div>
|
||||
</div>
|
||||
{/* Top Header Section - Settings & Controls */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 mb-4 animate-fade-in">
|
||||
{/* First Row: Order Info & Action Buttons */}
|
||||
<div className="flex flex-wrap items-center gap-4 mb-4">
|
||||
{/* Left: Order Number & Draft Toggle */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="font-semibold text-lg text-gray-800 dark:text-gray-100">
|
||||
NR: <span className="text-[#EA641B]">{order.alias || '---'}</span>
|
||||
</div>
|
||||
<div className="border-l border-gray-300 dark:border-gray-600 h-8"></div>
|
||||
<DraftComponent order={order} />
|
||||
</div>
|
||||
|
||||
{/* Top Bar Section */}
|
||||
<div className="mb-4">
|
||||
<TopBarComponent shop={shop} order={order} change={setShop} />
|
||||
{/* Right: Action Buttons */}
|
||||
<div className="ml-auto">
|
||||
<ButtonComponent loadOrder={loadOrder} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Second Row: Type & Shop Selection */}
|
||||
<div className="flex flex-wrap items-center gap-4 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="flex-1 min-w-[200px]">
|
||||
<TypeSelectComponent order={order} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-[200px]">
|
||||
<ShopSelectComponent shop={shop} change={setShop} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
{ shop.id != 0 && (
|
||||
{shop.id != 0 && (
|
||||
<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">
|
||||
@ -84,9 +99,9 @@ const BaseComponent = (props) => {
|
||||
<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">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border-2 border-orange-200 dark:border-orange-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">
|
||||
<svg className="w-5 h-5 text-[#EA641B]" 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
|
||||
@ -102,7 +117,7 @@ const BaseComponent = (props) => {
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default BaseComponent
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { Button as BaseButton } from "flowbite-react"
|
||||
import React from 'react'
|
||||
|
||||
const Button = ({ type , variant , onClick }) => {
|
||||
const Button = ({ type , variant , onClick, className = "" }) => {
|
||||
return (
|
||||
<BaseButton color={variant} onClick={onClick} size="sm" className="p-1.5">
|
||||
<BaseButton color={variant} onClick={onClick} size="sm" className={`p-1.5 ${className}`}>
|
||||
{ type == 1 &&
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" className="w-4 h-4">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
|
||||
|
||||
@ -51,13 +51,12 @@ class ButtonComponent extends Component<{loadOrder},{disabled: boolean}> {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="flex gap-3 flex-wrap">
|
||||
<Button.Group>
|
||||
<Button
|
||||
size="md"
|
||||
color="blue"
|
||||
disabled={this.state.disabled}
|
||||
onClick={(e:any) => this.handleSave(e)}
|
||||
className="shadow-md hover:shadow-lg transition-shadow"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" fill="none" className="mr-2 h-5 w-5">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 20.25h12A2.25 2.25 0 0 0 20.25 18V7.5L16.5 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25zm9.75-16.5v5h-9.5v-5zM13 5.5V7m-6.75 4.25h11.5v6.5H6.25Z"></path>
|
||||
@ -69,14 +68,13 @@ class ButtonComponent extends Component<{loadOrder},{disabled: boolean}> {
|
||||
color="success"
|
||||
disabled={!this.orderState.getCurrentOrder().value.saved}
|
||||
onClick={(e:any) => this.handlePrint(e)}
|
||||
className="shadow-md hover:shadow-lg transition-shadow"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="mr-2 h-5 w-5">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0 1 10.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0 .229 2.523a1.125 1.125 0 0 1-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.318 0h1.091A2.25 2.25 0 0 0 21 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 0 0-1.913-.247M6.34 18H5.25A2.25 2.25 0 0 1 3 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 0 1 1.913-.247m10.5 0a48.536 48.536 0 0 0-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.659M18 10.5h.008v.008H18V10.5Zm-3 0h.008v.008H15V10.5Z"></path>
|
||||
</svg>
|
||||
Drucken
|
||||
</Button>
|
||||
</div>
|
||||
</Button.Group>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -51,9 +51,9 @@ class CalcComponent extends React.Component<{ },MyState> {
|
||||
<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">
|
||||
<div className="flex justify-between items-center py-3 bg-orange-50 dark:bg-orange-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">
|
||||
<span className="text-xl font-bold text-[#EA641B] dark:text-orange-400">
|
||||
<Currency price={this.state.order.gross} />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -6,6 +6,7 @@ import { useModal } from '@ebay/nice-modal-react'
|
||||
import { Address } from "../../model/address"
|
||||
import { Shop } from "../../model/shop"
|
||||
import React from 'react'
|
||||
import { Button as FlowbiteButton } from "flowbite-react"
|
||||
|
||||
const AddressModalComponent = ({handleAdd, handleEdit, address, shop}) => {
|
||||
const addressModal = useModal(AddressModal)
|
||||
@ -34,12 +35,12 @@ const AddressModalComponent = ({handleAdd, handleEdit, address, shop}) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={'flex gap-1'}>
|
||||
<Button type={1} variant="success" onClick={showAddModal} />
|
||||
<FlowbiteButton.Group>
|
||||
<Button type={1} variant="success" onClick={showAddModal} className="!rounded-r-none" />
|
||||
<Button type={2} variant="info" onClick={() => {
|
||||
showEditModal(address)
|
||||
}} />
|
||||
</div>
|
||||
}} className="!rounded-l-none" />
|
||||
</FlowbiteButton.Group>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -33,9 +33,9 @@ const ContactComponent = ({order, shop}) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 animate-fade-in border-2 border-blue-200 dark:border-blue-900">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 animate-fade-in border-2 border-orange-200 dark:border-orange-900">
|
||||
<h2 className="text-lg font-semibold mb-3 text-gray-800 dark:text-gray-100 flex items-center gap-2">
|
||||
<svg className="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<svg className="w-6 h-6 text-[#EA641B]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
Kontakt & Konto
|
||||
|
||||
@ -9,6 +9,7 @@ import ContactService from "../../services/contact"
|
||||
import { Address } from "../../model/address"
|
||||
import AddressService from "../../services/address"
|
||||
import React from 'react'
|
||||
import { Button as FlowbiteButton } from "flowbite-react"
|
||||
|
||||
const ContactModalComponent = ({shop, handleAdd, handleEdit, contact}) => {
|
||||
|
||||
@ -56,12 +57,12 @@ const ContactModalComponent = ({shop, handleAdd, handleEdit, contact}) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={'flex gap-1'}>
|
||||
<Button type={1} variant="success" onClick={showAddModal} />
|
||||
<FlowbiteButton.Group>
|
||||
<Button type={1} variant="success" onClick={showAddModal} className="!rounded-r-none" />
|
||||
<Button type={2} variant="info" onClick={() => {
|
||||
showEditModal(contact)
|
||||
}} />
|
||||
</div>
|
||||
}} className="!rounded-l-none" />
|
||||
</FlowbiteButton.Group>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -35,9 +35,9 @@ const InfoFieldComponent = ({shop, order}) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 animate-fade-in border-2 border-amber-200 dark:border-amber-900">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 animate-fade-in border-2 border-orange-200 dark:border-orange-900">
|
||||
<h2 className="text-lg font-semibold mb-3 text-gray-800 dark:text-gray-100 flex items-center gap-2">
|
||||
<svg className="w-6 h-6 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<svg className="w-6 h-6 text-[#EA641B]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
Zusatzinformationen
|
||||
@ -52,7 +52,7 @@ const InfoFieldComponent = ({shop, order}) => {
|
||||
name="basketField1"
|
||||
value={basketField1}
|
||||
onChange={e => changeBasketField1(e.target.value)}
|
||||
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-amber-500 dark:focus:border-amber-500"
|
||||
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-[#EA641B] focus:border-[#EA641B] block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-[#EA641B] dark:focus:border-[#EA641B]"
|
||||
placeholder={shop.basketField1 || "Info 1"}
|
||||
/>
|
||||
</div>
|
||||
@ -65,7 +65,7 @@ const InfoFieldComponent = ({shop, order}) => {
|
||||
name="basketField2"
|
||||
value={basketField2}
|
||||
onChange={e => changeBasketField2(e.target.value)}
|
||||
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-amber-500 dark:focus:border-amber-500"
|
||||
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-[#EA641B] focus:border-[#EA641B] block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-[#EA641B] dark:focus:border-[#EA641B]"
|
||||
placeholder={shop.basketField2 || "Info 2"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -44,9 +44,9 @@ const PaymentComponent = ({ shop, order }) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 animate-fade-in border-2 border-emerald-200 dark:border-emerald-900">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 animate-fade-in border-2 border-orange-200 dark:border-orange-900">
|
||||
<h2 className="text-lg font-semibold mb-3 text-gray-800 dark:text-gray-100 flex items-center gap-2">
|
||||
<svg className="w-6 h-6 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<svg className="w-6 h-6 text-[#EA641B]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
|
||||
</svg>
|
||||
Zahlart
|
||||
|
||||
@ -20,9 +20,7 @@ const EditPositionComponent = ({position, shop, changePos}) => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<Button type={2} variant="gray" onClick={handleShow}/>
|
||||
</div>
|
||||
<Button type={2} variant="gray" onClick={handleShow} className="!rounded-r-none" />
|
||||
|
||||
<Modal size="7xl" show={show} onClose={() => handleClose()}>
|
||||
<Modal.Header className="text-mauve12 m-0 text-[17px] font-medium">
|
||||
|
||||
@ -9,21 +9,21 @@ const ItemsComponent = ({positions, delPos, shop, changePos}) => {
|
||||
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<div className="overflow-x-auto rounded-lg border border-orange-100 dark:border-orange-900">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b-2 border-gray-200 dark:border-gray-700">
|
||||
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700 dark:text-gray-300">Pos</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700 dark:text-gray-300">Titel</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-700 dark:text-gray-300">Anzahl</th>
|
||||
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700 dark:text-gray-300">Netto</th>
|
||||
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700 dark:text-gray-300">MwSt</th>
|
||||
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700 dark:text-gray-300">Brutto</th>
|
||||
<th className="text-right py-3 px-4 text-sm font-semibold text-gray-700 dark:text-gray-300">Status</th>
|
||||
<th className="py-3 px-4 text-sm font-semibold text-gray-700 dark:text-gray-300"></th>
|
||||
<thead className="bg-gradient-to-r from-orange-50 to-red-50 dark:from-orange-950 dark:to-red-950">
|
||||
<tr className="border-b-2 border-orange-200 dark:border-orange-800">
|
||||
<th className="text-left py-4 px-4 text-xs font-bold uppercase tracking-wider text-[#EA641B] dark:text-orange-300">Pos</th>
|
||||
<th className="text-left py-4 px-4 text-xs font-bold uppercase tracking-wider text-[#EA641B] dark:text-orange-300">Titel</th>
|
||||
<th className="text-left py-4 px-4 text-xs font-bold uppercase tracking-wider text-[#EA641B] dark:text-orange-300">Anzahl</th>
|
||||
<th className="text-right py-4 px-4 text-xs font-bold uppercase tracking-wider text-[#EA641B] dark:text-orange-300">Netto</th>
|
||||
<th className="text-right py-4 px-4 text-xs font-bold uppercase tracking-wider text-[#EA641B] dark:text-orange-300">MwSt</th>
|
||||
<th className="text-right py-4 px-4 text-xs font-bold uppercase tracking-wider text-[#EA641B] dark:text-orange-300">Brutto</th>
|
||||
<th className="text-right py-4 px-4 text-xs font-bold uppercase tracking-wider text-[#EA641B] dark:text-orange-300">Status</th>
|
||||
<th className="py-4 px-4 text-xs font-bold uppercase tracking-wider text-[#EA641B] dark:text-orange-300"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<tbody className="divide-y divide-orange-100 dark:divide-orange-900 bg-white dark:bg-gray-800">
|
||||
{positions.map((object, i) => (
|
||||
<PosComponent
|
||||
pos={object}
|
||||
@ -38,11 +38,12 @@ const ItemsComponent = ({positions, delPos, shop, changePos}) => {
|
||||
</table>
|
||||
|
||||
{positions.length === 0 && (
|
||||
<div className="text-center py-8 text-gray-500 dark:text-gray-400">
|
||||
<svg className="w-16 h-16 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
<div className="text-center py-12 bg-gradient-to-br from-orange-50/50 to-red-50/50 dark:from-orange-950/30 dark:to-red-950/30">
|
||||
<svg className="w-20 h-20 mx-auto mb-4 text-orange-300 dark:text-orange-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
<p className="text-lg">Keine Positionen vorhanden</p>
|
||||
<p className="text-lg font-medium text-[#EA641B]">Keine Positionen vorhanden</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Fügen Sie Ihre erste Position hinzu</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -5,6 +5,7 @@ import Button from '../base/Button'
|
||||
import EditPositionComponent from './EditPositionComponent'
|
||||
import { Shop } from '../../model/shop'
|
||||
import Currency from '../base/Currency'
|
||||
import { Button as FlowbiteButton } from "flowbite-react"
|
||||
|
||||
|
||||
const PosComponent = ({index, pos, delPos, changePos, shop}) => {
|
||||
@ -14,24 +15,34 @@ const PosComponent = ({index, pos, delPos, changePos, shop}) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<tr className="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
|
||||
<td className="py-3 px-4 text-sm text-gray-700 dark:text-gray-300">{index + 1}</td>
|
||||
<td className="py-3 px-4 text-sm text-gray-700 dark:text-gray-300 font-medium">{pos.product.title}</td>
|
||||
<td className="py-3 px-4 text-sm text-gray-700 dark:text-gray-300">{pos.count}</td>
|
||||
<td className="py-3 px-4 text-sm text-right text-gray-700 dark:text-gray-300">
|
||||
<tr className="hover:bg-orange-50/50 dark:hover:bg-orange-950/30 transition-all duration-150">
|
||||
<td className="py-4 px-4">
|
||||
<span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-orange-100 dark:bg-orange-900 text-[#EA641B] dark:text-orange-300 text-xs font-bold">
|
||||
{index + 1}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4 px-4 text-sm text-gray-900 dark:text-gray-100 font-medium">{pos.product.title}</td>
|
||||
<td className="py-4 px-4">
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-[#EA641B] dark:bg-orange-900 dark:text-orange-300">
|
||||
{pos.count}x
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4 px-4 text-sm text-right text-gray-700 dark:text-gray-300">
|
||||
<Currency price={pos.price.allNet} />
|
||||
</td>
|
||||
<td className="py-3 px-4 text-sm text-right text-gray-700 dark:text-gray-300">
|
||||
<td className="py-4 px-4 text-sm text-right text-gray-600 dark:text-gray-400">
|
||||
<Currency price={pos.price.allVat} />
|
||||
</td>
|
||||
<td className="py-3 px-4 text-sm text-right text-gray-700 dark:text-gray-300 font-semibold">
|
||||
<td className="py-4 px-4 text-sm text-right font-semibold text-[#EA641B] dark:text-orange-300">
|
||||
<Currency price={pos.price.allGross} />
|
||||
</td>
|
||||
<td className="py-3 px-4 text-sm text-right text-gray-700 dark:text-gray-300"></td>
|
||||
<td className="py-3 px-4 text-sm text-right">
|
||||
<div className="flex gap-2 justify-end">
|
||||
<EditPositionComponent shop={shop} position={pos} changePos={changePos} />
|
||||
<Button type={5} variant={'failure'} onClick={() => deletePos(pos.uuid)} />
|
||||
<td className="py-4 px-4 text-sm text-right text-gray-700 dark:text-gray-300"></td>
|
||||
<td className="py-4 px-4 text-sm text-right">
|
||||
<div className="flex justify-end">
|
||||
<FlowbiteButton.Group>
|
||||
<EditPositionComponent shop={shop} position={pos} changePos={changePos} />
|
||||
<Button type={5} variant={'failure'} onClick={() => deletePos(pos.uuid)} className="!rounded-l-none" />
|
||||
</FlowbiteButton.Group>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -43,9 +43,9 @@ const PositionsComponent = ({order, shop, updateOrder}) => {
|
||||
}, [positions])
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 animate-fade-in border-2 border-indigo-200 dark:border-indigo-900">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 animate-fade-in border-2 border-orange-200 dark:border-orange-900">
|
||||
<h2 className="text-lg font-semibold mb-3 text-gray-800 dark:text-gray-100 flex items-center gap-2">
|
||||
<svg className="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<svg className="w-6 h-6 text-[#EA641B]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
|
||||
</svg>
|
||||
Positionen
|
||||
|
||||
@ -44,7 +44,7 @@ const ShippingComponent = ({shop, order}) => {
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 animate-fade-in border-2 border-orange-200 dark:border-orange-900">
|
||||
<h2 className="text-lg font-semibold mb-3 text-gray-800 dark:text-gray-100 flex items-center gap-2">
|
||||
<svg className="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<svg className="w-6 h-6 text-[#EA641B]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
|
||||
</svg>
|
||||
Versandart
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user