Dateien nach "frontend/src/tools" hochladen

frontend/src/tools/bestellungen.jsx

@@ -121,11 +121,28 @@ function BestellungDetail({ id, toast, onBack }) {
           {id ? (editMode?'Bearbeiten':order?.name) : 'Neue Bestellung'}
         </h1>
         {order && !editMode && <StatusBadge status={order.status} onClick={cycleOrderStatus}/>}
-        {order?.bezahlt && !editMode && (
+        {order && !editMode && (
-        <div style={{...S.card,marginBottom:10,padding:'10px 14px',border:'1px solid rgba(192,132,252,0.2)',background:'rgba(192,132,252,0.06)'}}>
+        <div style={{...S.card,marginBottom:10,padding:'10px 14px',
-          <div style={{color:'rgba(192,132,252,0.8)',fontFamily:'monospace',fontSize:11}}>
+          border:`1px solid ${order.bezahlt?'rgba(192,132,252,0.25)':'rgba(255,255,255,0.06)'}`,
+          background:order.bezahlt?'rgba(192,132,252,0.06)':'rgba(255,255,255,0.02)',
+          display:'flex',flexDirection:'column',gap:8}}>
+          <button
+            onClick={()=>api(`/tools/bestellungen/${id}`,{method:'PUT',body:{bezahlt:!order.bezahlt}}).then(u=>{setOrder(u);toast(u.bezahlt?'Als bezahlt markiert':'Bezahlung aufgehoben');})}
+            style={{
+              alignSelf:'flex-start',
+              background: order.bezahlt ? BEZAHLT.bg : 'rgba(255,255,255,0.05)',
+              border:`1px solid ${order.bezahlt ? BEZAHLT.color+'55' : 'rgba(255,255,255,0.15)'}`,
+              borderRadius:20, padding:'5px 14px',
+              color: order.bezahlt ? BEZAHLT.color : 'rgba(255,255,255,0.45)',
+              fontFamily:'monospace', fontSize:11, cursor:'pointer',
+            }}>
+            {order.bezahlt ? '💜 Als bezahlt markiert' : '○ Als bezahlt markieren'}
+          </button>
+          {order.bezahlt && (
+            <div style={{color:'rgba(192,132,252,0.7)',fontFamily:'monospace',fontSize:11}}>
               🔒 Bezahlte Bestellungen können nicht bearbeitet werden.
             </div>
+          )}
         </div>
       )}
       {order && !editMode && (
@@ -221,10 +238,12 @@ function BestellungDetail({ id, toast, onBack }) {
                 <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:8}}>
                   <span style={{color:'#fff',fontFamily:'monospace',fontSize:13,flex:1}}>{item.calc_name}</span>
                   <div style={{display:'flex',gap:6,alignItems:'center'}}>
-                    <StatusBadge status={item.status||'warteliste'} onClick={()=>cycleItemStatus(item)} small/>
+                    <StatusBadge status={item.status||'warteliste'} onClick={order.bezahlt?undefined:()=>cycleItemStatus(item)} small/>
+                    {!order.bezahlt && (
                       <button onClick={()=>removeItem(item.id)} style={{background:'transparent',border:'none',cursor:'pointer',padding:2}}>
                         <XIcon size={14} color="rgba(255,255,255,0.3)"/>
                       </button>
+                    )}
                   </div>
                 </div>
 
@@ -233,11 +252,11 @@ function BestellungDetail({ id, toast, onBack }) {
                   <div>
                     <div style={{...S.head,marginBottom:4}}>STÜCKZAHL GESAMT</div>
                     <div style={{display:'flex',alignItems:'center',background:'rgba(255,255,255,0.05)',borderRadius:7,border:'1px solid rgba(255,255,255,0.1)',overflow:'hidden'}}>
-                      <button onClick={()=>item.stueckzahl>1&&updateItem(item.id,{stueckzahl:item.stueckzahl-1})}
+                      <button onClick={()=>!order.bezahlt&&item.stueckzahl>1&&updateItem(item.id,{stueckzahl:item.stueckzahl-1})}
-                        style={{padding:'6px 10px',background:'transparent',border:'none',color:'rgba(255,255,255,0.6)',fontSize:18,cursor:'pointer'}}>−</button>
+                        style={{padding:'6px 10px',background:'transparent',border:'none',color:order.bezahlt?'rgba(255,255,255,0.15)':'rgba(255,255,255,0.6)',fontSize:18,cursor:order.bezahlt?'default':'pointer'}}>−</button>
                       <span style={{color:'#fff',fontFamily:"'Space Mono',monospace",fontSize:14,flex:1,textAlign:'center'}}>{item.stueckzahl}</span>
-                      <button onClick={()=>updateItem(item.id,{stueckzahl:item.stueckzahl+1})}
+                      <button onClick={()=>!order.bezahlt&&updateItem(item.id,{stueckzahl:item.stueckzahl+1})}
-                        style={{padding:'6px 10px',background:'transparent',border:'none',color:'rgba(255,255,255,0.6)',fontSize:18,cursor:'pointer'}}>+</button>
+                        style={{padding:'6px 10px',background:'transparent',border:'none',color:order.bezahlt?'rgba(255,255,255,0.15)':'rgba(255,255,255,0.6)',fontSize:18,cursor:order.bezahlt?'default':'pointer'}}>+</button>
                     </div>
                   </div>
                   <div>