simplified create item. Restructured profile. Simplified availability

frontend/src/components/AvailabilitySettings.tsx

@@ -0,0 +1,165 @@
+import React from 'react';
+
+interface AvailabilityData {
+  generalAvailableAfter: string;
+  generalAvailableBefore: string;
+  specifyTimesPerDay: boolean;
+  weeklyTimes: {
+    sunday: { availableAfter: string; availableBefore: string };
+    monday: { availableAfter: string; availableBefore: string };
+    tuesday: { availableAfter: string; availableBefore: string };
+    wednesday: { availableAfter: string; availableBefore: string };
+    thursday: { availableAfter: string; availableBefore: string };
+    friday: { availableAfter: string; availableBefore: string };
+    saturday: { availableAfter: string; availableBefore: string };
+  };
+}
+
+interface AvailabilitySettingsProps {
+  data: AvailabilityData;
+  onChange: (field: string, value: string | boolean) => void;
+  onWeeklyTimeChange: (day: string, field: 'availableAfter' | 'availableBefore', value: string) => void;
+  showTitle?: boolean;
+}
+
+const AvailabilitySettings: React.FC<AvailabilitySettingsProps> = ({
+  data,
+  onChange,
+  onWeeklyTimeChange,
+  showTitle = true
+}) => {
+  const generateTimeOptions = () => {
+    const options = [];
+    for (let hour = 0; hour < 24; hour++) {
+      const time24 = `${hour.toString().padStart(2, '0')}:00`;
+      const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
+      const period = hour < 12 ? 'AM' : 'PM';
+      const time12 = `${hour12}:00 ${period}`;
+      options.push({ value: time24, label: time12 });
+    }
+    return options;
+  };
+
+  const handleGeneralChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>) => {
+    const { name, value, type } = e.target;
+    if (type === 'checkbox') {
+      const checked = (e.target as HTMLInputElement).checked;
+      onChange(name, checked);
+    } else {
+      onChange(name, value);
+    }
+  };
+
+  return (
+    <div>
+      {showTitle && <h5 className="card-title">Availability</h5>}
+
+      {/* General Times */}
+      <div className="row mb-3">
+        <div className="col-md-6">
+          <label htmlFor="generalAvailableAfter" className="form-label">
+            Available After *
+          </label>
+          <select
+            className="form-select"
+            id="generalAvailableAfter"
+            name="generalAvailableAfter"
+            value={data.generalAvailableAfter}
+            onChange={handleGeneralChange}
+            disabled={data.specifyTimesPerDay}
+            required
+          >
+            {generateTimeOptions().map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className="col-md-6">
+          <label htmlFor="generalAvailableBefore" className="form-label">
+            Available Before *
+          </label>
+          <select
+            className="form-select"
+            id="generalAvailableBefore"
+            name="generalAvailableBefore"
+            value={data.generalAvailableBefore}
+            onChange={handleGeneralChange}
+            disabled={data.specifyTimesPerDay}
+            required
+          >
+            {generateTimeOptions().map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      {/* Checkbox for day-specific times */}
+      <div className="form-check mb-3">
+        <input
+          type="checkbox"
+          className="form-check-input"
+          id="specifyTimesPerDay"
+          name="specifyTimesPerDay"
+          checked={data.specifyTimesPerDay}
+          onChange={handleGeneralChange}
+        />
+        <label className="form-check-label" htmlFor="specifyTimesPerDay">
+          Specify times for each day of the week
+        </label>
+      </div>
+
+      {/* Weekly Times */}
+      {data.specifyTimesPerDay && (
+        <div className="mt-4">
+          <h6>Weekly Schedule</h6>
+          {Object.entries(data.weeklyTimes).map(([day, times]) => (
+            <div key={day} className="row mb-2">
+              <div className="col-md-2">
+                <label className="form-label">
+                  {day.charAt(0).toUpperCase() + day.slice(1)}
+                </label>
+              </div>
+              <div className="col-md-5">
+                <select
+                  className="form-select form-select-sm"
+                  value={times.availableAfter}
+                  onChange={(e) =>
+                    onWeeklyTimeChange(day, 'availableAfter', e.target.value)
+                  }
+                >
+                  {generateTimeOptions().map((option) => (
+                    <option key={option.value} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div className="col-md-5">
+                <select
+                  className="form-select form-select-sm"
+                  value={times.availableBefore}
+                  onChange={(e) =>
+                    onWeeklyTimeChange(day, 'availableBefore', e.target.value)
+                  }
+                >
+                  {generateTimeOptions().map((option) => (
+                    <option key={option.value} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AvailabilitySettings;