From 6eae3c4aae0eb731d4dcca743b10d85f1ba41638 Mon Sep 17 00:00:00 2001
From: Claude <claude@webklar.local>
Date: Tue, 6 Oct 2026 12:09:52 +0000
Subject: [PATCH] Design P6: E-Mail-Speicher als Tabelle, Erledigt als Textlink
 mit data-storage-done

Kundenspalte mit Mindestbreite (col-name) und Erledigt/Bestellt ohne Umbruch, damit am Handy und bei 1440 px keine Woerter mitten im Wort brechen.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 src/pages/StorageTasksPage.jsx | 109 +++++++++++++++++++--------------
 src/styles/global.css          |   3 +
 2 files changed, 66 insertions(+), 46 deletions(-)

diff --git a/src/pages/StorageTasksPage.jsx b/src/pages/StorageTasksPage.jsx
index 3b2c984..f240e1d 100644
--- a/src/pages/StorageTasksPage.jsx
+++ b/src/pages/StorageTasksPage.jsx
@@ -1,11 +1,9 @@
 import { useCallback, useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
-import { FaSpinner, FaRotateRight } from 'react-icons/fa6'
-import { PageHeader, Card, Badge, Button } from '../components/ui'
+import { PageHeader, Card, Badge, Button, EmptyState } from '../components/ui'
 import { listStorageTasks, markStorageDone } from '../lib/teamApi'
-import { fmtDate, fmtDateTime } from '../lib/format'
-import { changeText, failedText, isOverdue, orderedKind, partialText, scopeText, summaryText, taskText } from '../lib/storageFormat'
-import '../styles/admin-areas.css'
+import { fmtDateTime } from '../lib/format'
+import { changeText, failedText, orderedKind, partialText, scopeText, storageDue, summaryText, taskText } from '../lib/storageFormat'
 
 // E-Mail-Speicher (Kunden -> E-Mail-Speicher): Zusatzspeicher-Aufgaben in konsoleH wie im frueheren Admin-Panel
 export default function StorageTasksPage() {
@@ -39,57 +37,76 @@ export default function StorageTasksPage() {
     <div className="page">
       <PageHeader title="E-Mail-Speicher" subtitle="Zusatzspeicher der Abos in konsoleH einrichten und senken" />
       {error && (
-        <div className="area-error area-inline">
-          {error} <Button size="sm" variant="ghost" onClick={load}><FaRotateRight /> Erneut versuchen</Button>
+        <div className="flex items-center gap-2 wrap mb-2">
+          <span className="msg err" role="alert">{error}</span>
+          <Button onClick={load}>Erneut versuchen</Button>
         </div>
       )}
-      {!data && !error && <FaSpinner className="spinner" />}
+      {!data && !error && <div className="loading">Wird geladen …</div>}
       {data && (
         <>
-          <div className={`area-summary ${summary.warn ? 'warn' : ''}`}>{summary.text}</div>
-          <Card pad={false}>
-            <div className="area-rows">
-              <div className="area-row storage-row head"><span>Fällig</span><span>Kunde</span><span>Aufgabe in konsoleH</span><span>Bestellt</span><span /></div>
-              {data.tasks.length === 0 && <div className="area-row"><span className="area-muted">Keine offenen Speicher-Aufgaben.</span></div>}
-              {data.tasks.map((t) => (
-                <div key={t.id} className="area-row storage-row">
-                  <span>
-                    {t.kind === 'einrichten'
-                      ? <><Badge tone="warn">jetzt einrichten</Badge><br /><span className="area-muted">bestellt {fmtDateTime(t.createdAt)}</span></>
-                      : <><Badge tone={isOverdue(t) ? 'warn' : 'muted'}>zum Periodenende</Badge><br />{fmtDate(t.dueAt)}</>}
-                  </span>
-                  <span>
-                    <Link to={`/customers/${t.customerId}`}><strong>{t.customerName}</strong></Link>
-                    {t.customerCode && <><br /><span className="area-muted">Kd.-Nr. {t.customerCode}</span></>}
-                    {t.email && <><br /><span className="area-muted">{t.email}</span></>}
-                    <br /><span className="area-muted">{t.productLabel}</span>
-                  </span>
-                  <span>
-                    <strong>{taskText(t)}</strong>
-                    <br /><span className="area-muted">{scopeText(t)}</span>
-                    <br /><span className="area-muted">{changeText(t)}</span>
-                    {t.partial && <><br /><span className="area-danger">{partialText(t)}</span></>}
-                  </span>
-                  <span>{fmtDateTime(t.createdAt)}<br /><span className="area-muted">{orderedKind(t)}</span></span>
-                  <span>
-                    <Button size="sm" variant="primary" data-storage-done={t.id} onClick={() => done(t)} disabled={busyId === t.id}>
-                      {busyId === t.id ? <FaSpinner className="spinner" /> : 'Erledigt'}
-                    </Button>
-                  </span>
-                </div>
-              ))}
-            </div>
-          </Card>
+          <p className={summary.warn ? 'msg warn mb-2' : 'muted mb-2'}>{summary.text}</p>
+          {data.tasks.length === 0 ? (
+            <EmptyState title="Keine offenen Speicher-Aufgaben." />
+          ) : (
+            <table className="table table-wrap">
+              <thead>
+                <tr>
+                  <th className="hide-sm">Fällig</th>
+                  <th className="col-name">Kunde</th>
+                  <th>Aufgabe in konsoleH</th>
+                  <th className="hide-md">Bestellt</th>
+                  <th />
+                </tr>
+              </thead>
+              <tbody>
+                {data.tasks.map((t) => {
+                  const due = storageDue(t)
+                  return (
+                    <tr key={t.id}>
+                      <td className="hide-sm">
+                        <Badge tone={due.tone}>{due.label}</Badge>
+                        <div className={due.subMuted ? 'cell-sub' : undefined}>{due.sub}</div>
+                      </td>
+                      <td>
+                        <div className="cell-title"><Link className="link" to={`/customers/${t.customerId}`}>{t.customerName}</Link></div>
+                        {t.customerCode && <div className="cell-sub">Kd.-Nr. {t.customerCode}</div>}
+                        {t.email && <div className="cell-sub">{t.email}</div>}
+                        <div className="cell-sub">{t.productLabel}</div>
+                      </td>
+                      <td>
+                        <div className="cell-title">{taskText(t)}</div>
+                        <div className="cell-sub">{scopeText(t)}</div>
+                        <div className="cell-sub">{changeText(t)}</div>
+                        {t.partial && <div className="cell-sub"><span className="msg err">{partialText(t)}</span></div>}
+                      </td>
+                      <td className="hide-md nowrap">
+                        {fmtDateTime(t.createdAt)}
+                        <div className="cell-sub">{orderedKind(t)}</div>
+                      </td>
+                      <td className="nowrap">
+                        <button type="button" className="link" data-storage-done={t.id} onClick={() => done(t)} disabled={busyId === t.id}>
+                          {busyId === t.id ? 'Speichert …' : 'Erledigt'}
+                        </button>
+                      </td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          )}
           {data.failed.length > 0 && (
-            <Card title="Gescheiterte Änderungen (letzte 30 Tage)">
+            <Card className="mt-3" title="Gescheiterte Änderungen (letzte 30 Tage)">
               {data.failed.map((f) => (
-                <div key={f.id} style={{ marginBottom: 6 }}>
-                  {fmtDateTime(f.createdAt)} · <strong>{f.customerName}</strong> · <span className="area-muted">{failedText(f)}</span>
+                <div key={f.id} className="list-row">
+                  <div className="list-row-text">
+                    {fmtDateTime(f.createdAt)} · <strong>{f.customerName}</strong> · <span className="muted">{failedText(f)}</span>
+                  </div>
                 </div>
               ))}
             </Card>
           )}
-          <p className="area-muted" style={{ marginTop: 12 }}>
+          <p className="table-foot">
             Jedes Abo bringt 5 GB E-Mail-Speicher mit, jedes Zusatzpaket 5 GB dazu. „Einrichten“: Postfachgrenze in konsoleH jetzt auf den Zielwert setzen. „Zum Periodenende“: erst am genannten Tag auf den Zielwert senken. Die Grenzen gelten für den Gesamtspeicher des Kunden (5 GB + 5 GB je Paket); er verteilt ihn nach seiner Vorgabe auf seine Postfächer (§ 3 Abs. 4). Angezeigt wird die Domain der Kontakt-Adresse, eine eigene Mail-Domain ist im Portal nicht gespeichert. „Vergeben“ zählt, was konsoleH gerade hält: eine Verringerung zählt erst nach „Erledigt“. Danach „Erledigt“ drücken – der Kunde hat seine Bestätigung schon bekommen.
           </p>
         </>
diff --git a/src/styles/global.css b/src/styles/global.css
index e9cd89e..503b6bc 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1220,6 +1220,9 @@ div.cell-actions { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6p
 /* gibt ihr die Tabelle (td bricht ueberall) fast nichts ab und "Abschluss" oder "Zurueckziehen" brechen mitten im Wort. */
 .table-wrap th.col-status { min-width: 7rem; }
 @media (min-width: 861px) { .table-wrap th.col-status { min-width: 12rem; } }
+/* E-Mail-Speicher: die Kundenspalte wird nicht schmaler als ein ganzer Name ("Physiotherapie"); die Aufgabespalte ist lang und */
+/* nimmt sonst fast die ganze Breite, und td bricht ueberall: am Handy stuende "Physiothe-rapie" in 65 px. */
+.table-wrap th.col-name { min-width: 7rem; }
 /* ===== ENDE Kunden-Unterseiten (P6) ===== */
 
 /* ===== KOMPAT (bis P10) ===== */