feat: support pickup booking date ranges

src/PickupConfigEditor.js

@@ -94,6 +94,9 @@ const PickupConfigEditor = () => {
     if (newConfig[index].desiredDate) {
       delete newConfig[index].desiredDate;
     }
+    if (newConfig[index].desiredDateRange) {
+      delete newConfig[index].desiredDateRange;
+    }
     setConfig(newConfig);
   };
   
@@ -104,6 +107,41 @@ const PickupConfigEditor = () => {
     if (newConfig[index].desiredWeekday) {
       delete newConfig[index].desiredWeekday;
     }
+    if (newConfig[index].desiredDateRange) {
+      delete newConfig[index].desiredDateRange;
+    }
+    setConfig(newConfig);
+  };
+
+  const handleDateRangeChange = (index, field, value) => {
+    const newConfig = [...config];
+    const nextRange = {
+      start: newConfig[index].desiredDateRange?.start || null,
+      end: newConfig[index].desiredDateRange?.end || null
+    };
+    if (field === 'start') {
+      nextRange.start = value || null;
+      if (nextRange.end && value && value > nextRange.end) {
+        nextRange.end = value;
+      }
+    } else if (field === 'end') {
+      nextRange.end = value || null;
+      if (nextRange.start && value && value < nextRange.start) {
+        nextRange.start = value;
+      }
+    }
+    const hasRange = Boolean(nextRange.start || nextRange.end);
+    if (hasRange) {
+      newConfig[index].desiredDateRange = nextRange;
+      if (newConfig[index].desiredWeekday) {
+        delete newConfig[index].desiredWeekday;
+      }
+      if (newConfig[index].desiredDate) {
+        delete newConfig[index].desiredDate;
+      }
+    } else if (newConfig[index].desiredDateRange) {
+      delete newConfig[index].desiredDateRange;
+    }
     setConfig(newConfig);
   };
 
@@ -139,10 +177,13 @@ const PickupConfigEditor = () => {
               <th className="px-4 py-2">Nur benachrichtigen</th>
               <th className="px-4 py-2">Wochentag</th>
               <th className="px-4 py-2">Spezifisches Datum</th>
+              <th className="px-4 py-2">Datumsbereich</th>
             </tr>
           </thead>
           <tbody>
-            {config.map((item, index) => (
+            {config.map((item, index) => {
+              const hasDateRange = Boolean(item.desiredDateRange?.start || item.desiredDateRange?.end);
+              return (
               <tr key={index} className={index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}>
                 <td className="px-4 py-2 text-center">
                   <input 
@@ -178,7 +219,7 @@ const PickupConfigEditor = () => {
                     value={item.desiredWeekday || ''}
                     onChange={(e) => handleWeekdayChange(index, e.target.value)}
                     className="border rounded p-1 w-full"
-                    disabled={item.desiredDate}
+                    disabled={item.desiredDate || hasDateRange}
                   >
                     <option value="">Kein Wochentag</option>
                     {weekdays.map((day) => (
@@ -192,11 +233,37 @@ const PickupConfigEditor = () => {
                     value={item.desiredDate || ''}
                     onChange={(e) => handleDateChange(index, e.target.value)}
                     className="border rounded p-1 w-full"
-                    disabled={item.desiredWeekday}
+                    disabled={item.desiredWeekday || hasDateRange}
                   />
                 </td>
+                <td className="px-4 py-2">
+                  <div className="grid grid-cols-1 gap-2">
+                    <div>
+                      <label className="block text-xs text-gray-500 mb-1">Von</label>
+                      <input
+                        type="date"
+                        value={item.desiredDateRange?.start || ''}
+                        onChange={(e) => handleDateRangeChange(index, 'start', e.target.value)}
+                        className="border rounded p-1 w-full"
+                        disabled={item.desiredWeekday || item.desiredDate}
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-xs text-gray-500 mb-1">Bis</label>
+                      <input
+                        type="date"
+                        value={item.desiredDateRange?.end || ''}
+                        onChange={(e) => handleDateRangeChange(index, 'end', e.target.value)}
+                        className="border rounded p-1 w-full"
+                        disabled={item.desiredWeekday || item.desiredDate}
+                        min={item.desiredDateRange?.start || undefined}
+                      />
+                    </div>
+                  </div>
+                </td>
               </tr>
-            ))}
+            );
+            })}
           </tbody>
         </table>
       </div>