feat: add mobile slot configuration

Replace the mobile table with a searchable card editor while retaining the desktop table. Add a mobile-friendly date picker layout and sticky save action.
2026-08-05 18:42:40 +02:00
parent 8931418bf7
commit 6d4051be38
8 changed files with 573 additions and 9 deletions
--- a/.commitmessage
+++ b/.commitmessage
@@ -1,5 +1,4 @@
-fix: tolerate same-day pickup profile check
+feat: add mobile slot configuration

-Allow configured stores to ignore a visible same-day profile pickup when booking
-a future pickup slot, starting with store 33875. Keep the default profile check
-behavior unchanged for all other stores.
+Replace the mobile table with a searchable card editor while retaining the
+desktop table. Add a mobile-friendly date picker layout and sticky save action.
--- a/src/App.css
+++ b/src/App.css
@@ -119,7 +119,7 @@ pre {
    gap: 12px;
  }
  
-  button {
+  .button-container button {
    width: 100%;
  }

@@ -129,6 +129,39 @@ pre {
  }
 }

+.range-picker-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.range-picker-modal {
+  width: 100%;
+  max-width: 32rem;
+  overflow: hidden;
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.25);
+}
+
+@media (max-width: 767px) {
+  .range-picker-backdrop {
+    align-items: flex-end;
+    padding: 0;
+  }
+
+  .range-picker-modal {
+    max-height: calc(100dvh - 1rem);
+    border-radius: 8px 8px 0 0;
+    overflow-y: auto;
+  }
+}
+
@keyframes dashboard-row-glow {
  0% {
    background-color: rgba(59, 130, 246, 0.25);
--- a/src/App.js
+++ b/src/App.js
@@ -836,6 +836,7 @@ function App() {
      onHideEntry={hideEntry}
      onDeleteEntry={deleteEntry}
      canDelete={Boolean(session?.isAdmin)}
+      isDirty={isDirty}
      focusedStoreId={focusedStoreId}
      onClearFocus={() => setFocusedStoreId(null)}
      userLocation={userLocationWithLabel}
--- a/src/components/DashboardView.js
+++ b/src/components/DashboardView.js
@@ -10,6 +10,7 @@ import {
  useReactTable
 } from '@tanstack/react-table';
 import NotificationPanel from './NotificationPanel';
+import MobileConfigList from './MobileConfigList';

 const CONFIG_TABLE_STATE_KEY = 'dashboardConfigTableState';
 const columnHelper = createColumnHelper();
@@ -215,6 +216,7 @@ const DashboardView = ({
  onHideEntry,
  onDeleteEntry,
  canDelete,
+  isDirty,
  focusedStoreId,
  onClearFocus,
  userLocation,
@@ -966,7 +968,28 @@ const DashboardView = ({
        </section>
      </div>

-      <div className="overflow-x-auto">
+      <MobileConfigList
+        entries={visibleConfig}
+        regularPickupMap={regularPickupMap}
+        weekdays={weekdays}
+        formatRangeLabel={formatRangeLabel}
+        formatRegularPickup={formatRegularPickup}
+        onToggleActive={onToggleActive}
+        onToggleAutoDeactivate={onToggleAutoDeactivate}
+        onToggleProfileCheck={onToggleProfileCheck}
+        onToggleOnlyNotify={onToggleOnlyNotify}
+        onToggleDormantSkip={onToggleDormantSkip}
+        onWeekdayChange={onWeekdayChange}
+        onRangePickerRequest={onRangePickerRequest}
+        onHideEntry={onHideEntry}
+        onDeleteEntry={onDeleteEntry}
+        canDelete={canDelete}
+        isDirty={isDirty}
+        onSaveConfig={onSaveConfig}
+        onResetConfig={onResetConfig}
+      />
+
+      <div className="desktop-config-table overflow-x-auto">
        <table className="min-w-full bg-white border border-gray-200">
          <thead className="bg-gray-100">
            {configTable.getHeaderGroups().map((headerGroup) => (
@@ -1007,7 +1030,7 @@ const DashboardView = ({
        </table>
      </div>

-      <div className="mt-6 flex justify-between">
+      <div className="desktop-config-actions mt-6 flex justify-between">
        <button onClick={onResetConfig} className="bg-gray-500 hover:bg-gray-600 text-white py-2 px-4 rounded">
          Zurücksetzen
        </button>
--- a/src/components/MobileConfigList.css
+++ b/src/components/MobileConfigList.css
@@ -0,0 +1,262 @@
+.mobile-config-list {
+  display: none;
+}
+
+@media (max-width: 767px) {
+  .mobile-config-list {
+    display: block;
+    padding-bottom: 5.5rem;
+  }
+
+  .mobile-config-list__heading {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 1.25rem 0 0.75rem;
+  }
+
+  .mobile-config-list__heading h2,
+  .mobile-config-card h3 {
+    margin: 0;
+    color: #1f2937;
+  }
+
+  .mobile-config-list__heading h2 {
+    font-size: 1.125rem;
+  }
+
+  .mobile-config-list__heading p,
+  .mobile-config-card__header p,
+  .mobile-config-card small {
+    margin: 0.15rem 0 0;
+    color: #6b7280;
+    font-size: 0.75rem;
+  }
+
+  .mobile-config-list__filters {
+    display: grid;
+    gap: 0.6rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .mobile-config-list__search input {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 2.75rem;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    padding: 0.5rem 0.75rem;
+    background: #fff;
+  }
+
+  .mobile-config-list__filter-tabs {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.35rem;
+  }
+
+  .mobile-config-list__filter-tabs button {
+    width: auto;
+    min-height: 2.35rem;
+    border: 1px solid #cbd5e1;
+    border-radius: 5px;
+    background: #fff;
+    color: #374151;
+    font-size: 0.8125rem;
+  }
+
+  .mobile-config-list__filter-tabs button.is-selected {
+    border-color: #2563eb;
+    background: #2563eb;
+    color: #fff;
+  }
+
+  .mobile-config-list__cards {
+    display: grid;
+    gap: 0.75rem;
+  }
+
+  .mobile-config-card {
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    background: #fff;
+    padding: 0.9rem;
+  }
+
+  .mobile-config-card__header,
+  .mobile-config-card__switch-row,
+  .mobile-config-card__check-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+  }
+
+  .mobile-config-card__slots {
+    margin-top: 0.45rem !important;
+  }
+
+  .mobile-config-card__store-link {
+    flex: 0 0 auto;
+    width: 2.5rem;
+    height: 2.5rem;
+    display: grid;
+    place-items: center;
+    border: 1px solid #cbd5e1;
+    border-radius: 5px;
+    color: #475569;
+  }
+
+  .mobile-config-card__store-link svg {
+    width: 1.15rem;
+    height: 1.15rem;
+  }
+
+  .mobile-config-card__switch-row {
+    margin-top: 0.9rem;
+    padding: 0.75rem 0;
+    border-top: 1px solid #e5e7eb;
+    border-bottom: 1px solid #e5e7eb;
+  }
+
+  .mobile-config-card input[type='checkbox'] {
+    width: 1.2rem;
+    height: 1.2rem;
+    flex: 0 0 auto;
+  }
+
+  .mobile-config-card__core-fields {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
+    gap: 0.6rem;
+    margin: 0.85rem 0;
+  }
+
+  .mobile-config-card__core-fields label,
+  .mobile-config-card__range {
+    width: 100%;
+    min-width: 0;
+    display: grid;
+    gap: 0.25rem;
+    color: #4b5563;
+    font-size: 0.75rem;
+    text-align: left;
+  }
+
+  .mobile-config-card__core-fields select,
+  .mobile-config-card__range {
+    box-sizing: border-box;
+    min-height: 2.6rem;
+    border: 1px solid #cbd5e1;
+    border-radius: 5px;
+    background: #fff;
+  }
+
+  .mobile-config-card__range {
+    align-content: center;
+    padding: 0.4rem 0.55rem;
+  }
+
+  .mobile-config-card__range strong {
+    overflow: hidden;
+    color: #1f2937;
+    font-size: 0.8rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .mobile-config-card__check-row {
+    justify-content: flex-start;
+    padding: 0.25rem 0;
+    color: #374151;
+    font-size: 0.875rem;
+  }
+
+  .mobile-config-card__check-row span {
+    display: grid;
+    gap: 0.1rem;
+  }
+
+  .mobile-config-card__details {
+    margin-top: 0.8rem;
+    border-top: 1px solid #e5e7eb;
+  }
+
+  .mobile-config-card__details summary {
+    padding: 0.75rem 0;
+    color: #374151;
+    font-size: 0.875rem;
+    font-weight: 600;
+    cursor: pointer;
+  }
+
+  .mobile-config-card__details[open] summary {
+    margin-bottom: 0.2rem;
+  }
+
+  .mobile-config-card__actions {
+    display: flex;
+    gap: 0.6rem;
+    margin-top: 0.65rem;
+  }
+
+  .mobile-config-card__actions button,
+  .mobile-config-list__reset,
+  .mobile-config-list__save {
+    min-height: 2.5rem;
+    border: 1px solid #cbd5e1;
+    border-radius: 5px;
+    padding: 0.5rem 0.75rem;
+    background: #fff;
+    color: #374151;
+    font-size: 0.875rem;
+  }
+
+  .mobile-config-card__actions button {
+    width: auto;
+    flex: 1;
+  }
+
+  .mobile-config-card__actions button.is-danger {
+    border-color: #fecaca;
+    color: #b91c1c;
+  }
+
+  .mobile-config-list__empty {
+    margin: 1.5rem 0;
+    text-align: center;
+    color: #6b7280;
+    font-size: 0.875rem;
+  }
+
+  .mobile-config-list__save-bar {
+    position: fixed;
+    z-index: 30;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: grid;
+    grid-template-columns: 1fr 1.4fr;
+    gap: 0.6rem;
+    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
+    border-top: 1px solid #cbd5e1;
+    background: #fff;
+    box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.12);
+  }
+
+  .mobile-config-list__save {
+    border-color: #2563eb;
+    background: #2563eb;
+    color: #fff;
+    font-weight: 600;
+  }
+
+  .desktop-config-table,
+  .desktop-config-actions {
+    display: none;
+  }
+
+  .App {
+    padding: 0;
+  }
+}
--- a/src/components/MobileConfigList.js
+++ b/src/components/MobileConfigList.js
@@ -0,0 +1,181 @@
+import { useMemo, useState } from 'react';
+import './MobileConfigList.css';
+
+const FILTER_OPTIONS = [
+  { value: 'all', label: 'Alle' },
+  { value: 'active', label: 'Aktiv' },
+  { value: 'inactive', label: 'Inaktiv' }
+];
+
+const MobileConfigList = ({
+  entries,
+  regularPickupMap,
+  weekdays,
+  formatRangeLabel,
+  formatRegularPickup,
+  onToggleActive,
+  onToggleAutoDeactivate,
+  onToggleProfileCheck,
+  onToggleOnlyNotify,
+  onToggleDormantSkip,
+  onWeekdayChange,
+  onRangePickerRequest,
+  onHideEntry,
+  onDeleteEntry,
+  canDelete,
+  isDirty,
+  onSaveConfig,
+  onResetConfig
+}) => {
+  const [search, setSearch] = useState('');
+  const [activityFilter, setActivityFilter] = useState('all');
+
+  const filteredEntries = useMemo(() => {
+    const normalizedSearch = search.trim().toLocaleLowerCase('de-DE');
+    return (Array.isArray(entries) ? entries : []).filter((entry) => {
+      if (activityFilter === 'active' && !entry.active) {
+        return false;
+      }
+      if (activityFilter === 'inactive' && entry.active) {
+        return false;
+      }
+      if (!normalizedSearch) {
+        return true;
+      }
+      return `${entry.label || ''} ${entry.id || ''}`.toLocaleLowerCase('de-DE').includes(normalizedSearch);
+    });
+  }, [activityFilter, entries, search]);
+
+  return (
+    <section className="mobile-config-list" aria-label="Slot-Konfiguration">
+      <div className="mobile-config-list__heading">
+        <div>
+          <h2>Slot-Konfiguration</h2>
+          <p>{entries.length} Betriebe</p>
+        </div>
+      </div>
+
+      <div className="mobile-config-list__filters">
+        <label className="mobile-config-list__search">
+          <span className="sr-only">Betrieb suchen</span>
+          <input
+            type="search"
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder="Betrieb oder ID suchen"
+          />
+        </label>
+        <div className="mobile-config-list__filter-tabs" aria-label="Aktivitätsfilter">
+          {FILTER_OPTIONS.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              className={activityFilter === option.value ? 'is-selected' : ''}
+              aria-pressed={activityFilter === option.value}
+              onClick={() => setActivityFilter(option.value)}
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="mobile-config-list__cards">
+        {filteredEntries.map((entry) => {
+          const range = entry.desiredDateRange || (entry.desiredDate ? { start: entry.desiredDate, end: entry.desiredDate } : null);
+          const slots = formatRegularPickup(regularPickupMap?.[entry.id]);
+          return (
+            <article key={entry.id} className="mobile-config-card" data-store-row={entry.id}>
+              <header className="mobile-config-card__header">
+                <div>
+                  <h3>{entry.label || `Store ${entry.id}`}</h3>
+                  <p>#{entry.id}</p>
+                  {slots && <p className="mobile-config-card__slots">Slots: {slots}</p>}
+                </div>
+                <a
+                  href={`https://foodsharing.de/store/${entry.id}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="mobile-config-card__store-link"
+                  aria-label={`${entry.label || `Store ${entry.id}`} bei Foodsharing öffnen`}
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                    <path d="M12.293 2.293a1 1 0 011.414 0L18 6.586V7a1 1 0 01-1 1h-.586l-3.707-3.707a1 1 0 010-1.414z" />
+                    <path d="M3 5a2 2 0 012-2h5a1 1 0 010 2H5v10h10v-5a1 1 0 112 0v5a2 2 0 01-2 2H5a2 2 0 01-2-2V5z" />
+                    <path d="M11 3a1 1 0 100 2h2v2a1 1 0 102 0V4a1 1 0 00-1-1h-3z" />
+                  </svg>
+                </a>
+              </header>
+
+              <label className="mobile-config-card__switch-row">
+                <span>
+                  <strong>Automatisch buchen</strong>
+                  <small>{entry.active ? 'Aktiv' : 'Inaktiv'}</small>
+                </span>
+                <input
+                  type="checkbox"
+                  checked={!!entry.active}
+                  onChange={() => onToggleActive(entry.id)}
+                  aria-label={`${entry.label || entry.id} automatisch buchen`}
+                />
+              </label>
+
+              <div className="mobile-config-card__core-fields">
+                <label>
+                  <span>Wochentag</span>
+                  <select value={entry.desiredWeekday || ''} onChange={(event) => onWeekdayChange(entry.id, event.target.value)}>
+                    <option value="">Kein Wochentag</option>
+                    {weekdays.map((day) => <option key={day} value={day}>{day}</option>)}
+                  </select>
+                </label>
+                <button type="button" className="mobile-config-card__range" onClick={() => onRangePickerRequest(entry.id)}>
+                  <span>Datum / Zeitraum</span>
+                  <strong>{formatRangeLabel(range?.start || '', range?.end || '')}</strong>
+                </button>
+              </div>
+
+              <label className="mobile-config-card__check-row">
+                <input type="checkbox" checked={!!entry.onlyNotify} onChange={() => onToggleOnlyNotify(entry.id)} />
+                <span>
+                  <strong>Nur benachrichtigen</strong>
+                  <small>Keinen Slot automatisch buchen</small>
+                </span>
+              </label>
+
+              <details className="mobile-config-card__details">
+                <summary>Weitere Optionen</summary>
+                <label className="mobile-config-card__check-row">
+                  <input type="checkbox" checked={entry.checkProfileId !== false} onChange={() => onToggleProfileCheck(entry.id)} />
+                  <span>Profil prüfen</span>
+                </label>
+                <label className="mobile-config-card__check-row">
+                  <input type="checkbox" checked={entry.autoDeactivate !== false} onChange={() => onToggleAutoDeactivate(entry.id)} />
+                  <span>Nach erfolgreicher Aktion deaktivieren</span>
+                </label>
+                <label className="mobile-config-card__check-row">
+                  <input type="checkbox" checked={!entry.skipDormantCheck} onChange={() => onToggleDormantSkip(entry.id)} />
+                  <span>Inaktivitätswarnung</span>
+                </label>
+                <div className="mobile-config-card__actions">
+                  <button type="button" onClick={() => onHideEntry(entry.id)}>Ausblenden</button>
+                  {canDelete && <button type="button" className="is-danger" onClick={() => onDeleteEntry(entry.id)}>Löschen</button>}
+                </div>
+              </details>
+            </article>
+          );
+        })}
+      </div>
+
+      {filteredEntries.length === 0 && <p className="mobile-config-list__empty">Keine passenden Betriebe gefunden.</p>}
+
+      {isDirty && (
+        <div className="mobile-config-list__save-bar">
+          <button type="button" className="mobile-config-list__reset" onClick={onResetConfig}>Zurücksetzen</button>
+          <button type="button" className="mobile-config-list__save" onClick={onSaveConfig}>Speichern</button>
+        </div>
+      )}
+    </section>
+  );
+};
+
+export default MobileConfigList;
--- a/src/components/MobileConfigList.test.js
+++ b/src/components/MobileConfigList.test.js
@@ -0,0 +1,65 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import MobileConfigList from './MobileConfigList';
+
+const entry = {
+  id: '33875',
+  label: 'Balkanbäckerei',
+  active: false,
+  autoDeactivate: true,
+  checkProfileId: true,
+  onlyNotify: false,
+  skipDormantCheck: false
+};
+
+const props = {
+  entries: [entry, { ...entry, id: '69375', label: 'Donat', active: true }],
+  regularPickupMap: {},
+  weekdays: ['Montag', 'Dienstag'],
+  formatRangeLabel: () => 'Kein Zeitraum',
+  formatRegularPickup: () => null,
+  onToggleActive: jest.fn(),
+  onToggleAutoDeactivate: jest.fn(),
+  onToggleProfileCheck: jest.fn(),
+  onToggleOnlyNotify: jest.fn(),
+  onToggleDormantSkip: jest.fn(),
+  onWeekdayChange: jest.fn(),
+  onRangePickerRequest: jest.fn(),
+  onHideEntry: jest.fn(),
+  onDeleteEntry: jest.fn(),
+  canDelete: true,
+  isDirty: true,
+  onSaveConfig: jest.fn(),
+  onResetConfig: jest.fn()
+};
+
+describe('MobileConfigList', () => {
+  beforeEach(() => jest.clearAllMocks());
+
+  it('filters entries by search and activity', () => {
+    render(<MobileConfigList {...props} />);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Aktiv' }));
+    expect(screen.getByText('Donat')).toBeInTheDocument();
+    expect(screen.queryByText('Balkanbäckerei')).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Alle' }));
+    fireEvent.change(screen.getByPlaceholderText('Betrieb oder ID suchen'), { target: { value: '33875' } });
+    expect(screen.getByText('Balkanbäckerei')).toBeInTheDocument();
+    expect(screen.queryByText('Donat')).not.toBeInTheDocument();
+  });
+
+  it('uses the existing configuration callbacks', () => {
+    render(<MobileConfigList {...props} />);
+
+    fireEvent.click(screen.getByLabelText('Balkanbäckerei automatisch buchen'));
+    fireEvent.click(screen.getAllByText('Kein Zeitraum')[0]);
+    fireEvent.click(screen.getAllByText('Weitere Optionen')[0]);
+    fireEvent.click(screen.getAllByLabelText('Profil prüfen')[0]);
+    fireEvent.click(screen.getByText('Speichern'));
+
+    expect(props.onToggleActive).toHaveBeenCalledWith('33875');
+    expect(props.onRangePickerRequest).toHaveBeenCalledWith('33875');
+    expect(props.onToggleProfileCheck).toHaveBeenCalledWith('33875');
+    expect(props.onSaveConfig).toHaveBeenCalledTimes(1);
+  });
+});
--- a/src/components/RangePickerModal.js
+++ b/src/components/RangePickerModal.js
@@ -121,9 +121,9 @@ const RangePickerModal = ({
  };

  return (
-    <div className="fixed inset-0 z-40 flex items-center justify-center bg-black bg-opacity-40 px-4" onClick={onClose}>
+    <div className="range-picker-backdrop" onClick={onClose}>
      <div
-        className="bg-white rounded-2xl shadow-2xl w-full max-w-lg"
+        className="range-picker-modal bg-white rounded-2xl shadow-2xl w-full max-w-lg"
        onClick={(event) => event.stopPropagation()}
      >
        <div className="px-5 pt-5 pb-3 border-b">