Dateien nach "frontend/src/tools" hochladen

frontend/src/tools/bestellungen.jsx

@@ -7,6 +7,7 @@ const STATUS = {
   in_arbeit:  { label:'In Arbeit',  color:'#4ecdc4', bg:'rgba(78,205,196,0.12)'  },
   fertig:     { label:'Fertig',     color:'#6bcb77', bg:'rgba(107,203,119,0.12)' },
 };
+const BEZAHLT = { color:'#c084fc', bg:'rgba(192,132,252,0.12)' };
 const STATUS_KEYS = ['warteliste','in_arbeit','fertig'];
 
 const PREISE = [
@@ -116,6 +117,19 @@ function BestellungDetail({ id, toast, onBack }) {
           {id ? (editMode?'Bearbeiten':order?.name) : 'Neue Bestellung'}
         </h1>
         {order && !editMode && <StatusBadge status={order.status} onClick={cycleOrderStatus}/>}
+        {order && !editMode && (
+          <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={{
+              background: order.bezahlt ? BEZAHLT.bg : 'rgba(255,255,255,0.05)',
+              border:`1px solid ${order.bezahlt ? BEZAHLT.color+'55' : 'rgba(255,255,255,0.1)'}`,
+              borderRadius:20, padding:'4px 12px',
+              color: order.bezahlt ? BEZAHLT.color : 'rgba(255,255,255,0.4)',
+              fontFamily:'monospace', fontSize:10, cursor:'pointer', whiteSpace:'nowrap',
+            }}>
+            {order.bezahlt ? '💜 Bezahlt' : '○ Bezahlen'}
+          </button>
+        )}
         {order && !editMode && (
           <button onClick={()=>setEditMode(true)} style={{background:'transparent',border:'none',cursor:'pointer',padding:4}}>
             <EditIcon size={18} color="rgba(255,255,255,0.5)"/>
@@ -161,9 +175,14 @@ function BestellungDetail({ id, toast, onBack }) {
 
       {order && !editMode && (
         <>
-          {order.bemerkung && (
+          {(order.bemerkung || order.bezahlt) && (
             <div style={{...S.card,marginBottom:10,padding:'10px 14px'}}>
-              <div style={{color:'rgba(255,255,255,0.45)',fontFamily:'monospace',fontSize:12,lineHeight:1.6}}>{order.bemerkung}</div>
+              {order.bezahlt && (
+                <div style={{color:BEZAHLT.color,fontFamily:'monospace',fontSize:11,marginBottom:order.bemerkung?6:0}}>
+                  💜 Bezahlt am {new Date(order.bezahlt_am).toLocaleDateString('de-DE',{day:'2-digit',month:'2-digit',year:'numeric'})}
+                </div>
+              )}
+              {order.bemerkung && <div style={{color:'rgba(255,255,255,0.45)',fontFamily:'monospace',fontSize:12,lineHeight:1.6}}>{order.bemerkung}</div>}
             </div>
           )}
 
@@ -370,7 +389,7 @@ export default function Bestellungen({ toast, mobile }) {
   const [orders,      setOrders]      = useState([]);
   const [loading,     setLoading]     = useState(true);
   const [search,      setSearch]      = useState('');
-  const [filterStatus,setFilter]      = useState('alle');
+  const [filterStatus,setFilter]      = useState('warteliste');
   const [openId,      setOpenId]      = useState(null);
   const [delId,       setDelId]       = useState(null);
   const [newMode,     setNewMode]     = useState(false);
@@ -388,7 +407,11 @@ export default function Bestellungen({ toast, mobile }) {
 
   const filtered = orders.filter(o => {
     const ms = !search.trim() || o.name.toLowerCase().includes(search.toLowerCase());
-    const mf = filterStatus==='alle' || o.status===filterStatus;
+    const mf = filterStatus==='alle'
+      ? true
+      : filterStatus==='bezahlt'
+        ? o.bezahlt
+        : o.status===filterStatus && !o.bezahlt;
     return ms && mf;
   });
 
@@ -423,11 +446,18 @@ export default function Bestellungen({ toast, mobile }) {
 
       {/* Status-Filter */}
       <div style={{display:'flex',gap:6,marginBottom:14,flexWrap:'wrap'}}>
-        {[['alle','Alle','rgba(255,255,255,0.6)','rgba(255,255,255,0.1)'],...Object.entries(STATUS).map(([k,v])=>[k,v.label,v.color,v.bg])].map(([k,l,c,bg])=>(
+        {[
+          ['alle',       'Alle',       'rgba(255,255,255,0.6)', 'rgba(255,255,255,0.1)'],
+          ['warteliste', 'Warteliste', '#ffe66d',               'rgba(255,230,109,0.12)'],
+          ['in_arbeit',  'In Arbeit',  '#4ecdc4',               'rgba(78,205,196,0.12)' ],
+          ['fertig',     'Fertig',     '#6bcb77',               'rgba(107,203,119,0.12)'],
+          ['bezahlt',    'Bezahlt',    BEZAHLT.color,           BEZAHLT.bg              ],
+        ].map(([k,l,col,bg])=>(
           <button key={k} onClick={()=>setFilter(k)} style={{
-            padding:'5px 12px',borderRadius:20,border:`1px solid ${filterStatus===k?c:'rgba(255,255,255,0.1)'}`,
+            padding:'5px 12px',borderRadius:20,
+            border:`1px solid ${filterStatus===k?col:'rgba(255,255,255,0.1)'}`,
             background:filterStatus===k?bg:'transparent',
-            color:filterStatus===k?c:'rgba(255,255,255,0.4)',
+            color:filterStatus===k?col:'rgba(255,255,255,0.4)',
             fontFamily:'monospace',fontSize:11,cursor:'pointer',
           }}>{l}</button>
         ))}
@@ -459,7 +489,15 @@ export default function Bestellungen({ toast, mobile }) {
                   {new Date(order.created_at).toLocaleDateString('de-DE')}
                 </div>
               </button>
-              <StatusBadge status={order.status} small/>
+              <div style={{display:'flex',gap:5,alignItems:'center'}}>
+                {order.bezahlt && (
+                  <span style={{background:BEZAHLT.bg,border:`1px solid ${BEZAHLT.color}44`,
+                    borderRadius:20,padding:'3px 10px',color:BEZAHLT.color,fontFamily:'monospace',fontSize:10}}>
+                    💜 Bezahlt
+                  </span>
+                )}
+                {!order.bezahlt && <StatusBadge status={order.status} small/>}
+              </div>
             </div>
 
             {/* Positions-Fortschritt + Festpreis-Summe */}