first commit

components/shared/LocationSelector.tsx

@@ -0,0 +1,119 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Location, Coop, Floor } from '../../types';
+
+interface LocationSelectorProps {
+  locations: Location[];
+  coops: Coop[];
+  floors: Floor[];
+  initialFloorId: string | null;
+  onFloorChange: (floorId: string | null) => void;
+}
+
+const LocationSelector: React.FC<LocationSelectorProps> = ({
+  locations,
+  coops,
+  floors,
+  initialFloorId,
+  onFloorChange,
+}) => {
+  const [selectedLocationId, setSelectedLocationId] = useState<string>('');
+  const [selectedCoopId, setSelectedCoopId] = useState<string>('');
+
+  useEffect(() => {
+    if (initialFloorId) {
+      const floor = floors.find((f) => f.id === initialFloorId);
+      const coop = floor ? coops.find((c) => c.id === floor.coopId) : undefined;
+      const location = coop ? locations.find((l) => l.id === coop.locationId) : undefined;
+      if (location) setSelectedLocationId(location.id);
+      if (coop) setSelectedCoopId(coop.id);
+    } else {
+      setSelectedLocationId(locations[0]?.id || '');
+    }
+  }, [initialFloorId, locations, coops, floors]);
+
+  useEffect(() => {
+    if (!initialFloorId) {
+      const firstCoop = coops.find((c) => c.locationId === selectedLocationId);
+      setSelectedCoopId(firstCoop?.id || '');
+    }
+  }, [selectedLocationId, coops, initialFloorId]);
+
+  useEffect(() => {
+    if (!initialFloorId) {
+      const firstFloor = floors.find((f) => f.coopId === selectedCoopId);
+      onFloorChange(firstFloor?.id || null);
+    }
+    // We only want this to run when the coop changes, not when the parent's floor changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedCoopId, floors, initialFloorId]);
+
+  const availableCoops = useMemo(
+    () => coops.filter((c) => c.locationId === selectedLocationId),
+    [coops, selectedLocationId]
+  );
+  const availableFloors = useMemo(
+    () => floors.filter((f) => f.coopId === selectedCoopId),
+    [floors, selectedCoopId]
+  );
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+      <div>
+        <label htmlFor="location" className="block text-sm font-medium text-gray-700 mb-1">
+          Lokasi
+        </label>
+        <select
+          id="location"
+          value={selectedLocationId}
+          onChange={(e) => setSelectedLocationId(e.target.value)}
+          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500 bg-white"
+        >
+          {locations.map((l) => (
+            <option key={l.id} value={l.id}>
+              {l.name}
+            </option>
+          ))}
+        </select>
+      </div>
+      <div>
+        <label htmlFor="coop" className="block text-sm font-medium text-gray-700 mb-1">
+          Kandang
+        </label>
+        <select
+          id="coop"
+          value={selectedCoopId}
+          onChange={(e) => setSelectedCoopId(e.target.value)}
+          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500 bg-white"
+          disabled={!selectedLocationId}
+        >
+          {availableCoops.map((c) => (
+            <option key={c.id} value={c.id}>
+              {c.name}
+            </option>
+          ))}
+        </select>
+      </div>
+      <div>
+        <label htmlFor="floor" className="block text-sm font-medium text-gray-700 mb-1">
+          Lantai
+        </label>
+        <select
+          id="floor"
+          value={initialFloorId || ''}
+          onChange={(e) => onFloorChange(e.target.value || null)}
+          className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500 bg-white"
+          disabled={!selectedCoopId}
+        >
+          <option value="">-- Pilih Lantai --</option>
+          {availableFloors.map((f) => (
+            <option key={f.id} value={f.id}>
+              {f.name}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+};
+
+export default LocationSelector;