Design P6: Angebote-Liste als Tabelle mit Reitern, Aktionen als Textlinks

Reiter statt Filterknoepfe, Statusspalte mit Badge, Stripe-Links, Mail-Zeile und Aktionen (E-Mail senden als Textlink, Zurueckziehen als danger), Spalten Angelegt und Gueltig bis nach Breite ausgeblendet. Mindestbreite der Statusspalte, damit Woerter nicht mitten im Wort brechen. Neues Angebot ohne Icon in der Werkzeugleiste, Hinweis als table-foot.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/components/offers/OffersView.jsx

@@ -1,5 +1,4 @@
 import { useState } from 'react'
-import { FaPlus } from 'react-icons/fa6'
 import { Button } from '../ui'
 import OfferList from './OfferList'
 import OfferForm from './OfferForm'
@@ -13,23 +12,19 @@ export default function OffersView({ customerId, customerName }) {
 
   return (
     <div>
-      {message && <div className="area-message">{message}</div>}
-      {!showForm && (
-        <div style={{ marginBottom: 12 }}>
-          <Button variant="primary" onClick={() => { setMessage(''); setShowForm(true) }}><FaPlus /> Neues Angebot</Button>
-        </div>
-      )}
-      {showForm && (
-        <div style={{ marginBottom: 16 }}>
-          <OfferForm
-            fixedCustomerId={customerId}
-            fixedCustomerName={customerName}
-            onCreated={(text) => { setMessage(text); setShowForm(false); reload() }}
-            onCancel={() => setShowForm(false)}
-          />
-        </div>
-      )}
+      {message && <p className="msg ok mb-2" role="status">{message}</p>}
+      <div className="toolbar">
+        <Button variant="primary" onClick={() => { setMessage(''); setShowForm(true) }}>Neues Angebot</Button>
+      </div>
       <OfferList customerId={customerId} reloadKey={reloadKey} onMessage={setMessage} onChanged={reload} />
+      {showForm && (
+        <OfferForm
+          fixedCustomerId={customerId}
+          fixedCustomerName={customerName}
+          onCreated={(text) => { setMessage(text); setShowForm(false); reload() }}
+          onCancel={() => setShowForm(false)}
+        />
+      )}
     </div>
   )
 }