add feed in / out button page and also button to redirect to button page

components/feedInButton/FeedInButtonPanel.tsx

@@ -0,0 +1,149 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { api, errorMessage } from '../../services/apiClient.ts';
+import type { Kandang, Site } from '../../types/api.ts';
+import { Banner } from '../ui/Feedback.tsx';
+import FeedInButtonGrid from './FeedInButtonGrid.tsx';
+
+type FeedInButtonPanelProps = {
+  variant?: 'default' | 'kiosk';
+};
+
+const hasConfiguredUrls = (kandang: Kandang): boolean =>
+  (kandang.feed_in_button_urls ?? []).some((entry) => entry.url.trim());
+
+const FeedInButtonPanel: React.FC<FeedInButtonPanelProps> = ({ variant = 'default' }) => {
+  const [sites, setSites] = useState<Site[]>([]);
+  const [kandangs, setKandangs] = useState<Kandang[]>([]);
+  const [selectedSiteId, setSelectedSiteId] = useState<number | null>(null);
+  const [selectedKandangId, setSelectedKandangId] = useState<number | 'all'>('all');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const isKiosk = variant === 'kiosk';
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const nextSites = await api.sites.list();
+        if (cancelled) return;
+        setSites(nextSites);
+        setSelectedSiteId((prev) => {
+          if (prev && nextSites.some((site) => site.id === prev)) return prev;
+          return nextSites[0]?.id ?? null;
+        });
+      } catch (err) {
+        if (!cancelled) setError(errorMessage(err));
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (selectedSiteId == null) {
+      setKandangs([]);
+      return;
+    }
+    let cancelled = false;
+    (async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const nextKandangs = await api.kandangs.list({ site_id: selectedSiteId });
+        if (cancelled) return;
+        setKandangs(nextKandangs);
+        setSelectedKandangId('all');
+      } catch (err) {
+        if (!cancelled) setError(errorMessage(err));
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedSiteId]);
+
+  const filterableKandangs = useMemo(() => kandangs.filter(hasConfiguredUrls), [kandangs]);
+
+  const displayedKandangs = useMemo(() => {
+    if (selectedKandangId === 'all') return filterableKandangs;
+    return filterableKandangs.filter((kandang) => kandang.id === selectedKandangId);
+  }, [filterableKandangs, selectedKandangId]);
+
+  const chipClass = (active: boolean) =>
+    `px-4 py-2 rounded-full text-sm font-semibold border transition-colors ${
+      active
+        ? 'bg-red-600 text-white border-red-600 shadow-sm'
+        : 'bg-white text-gray-700 border-gray-300 hover:border-red-300 hover:text-red-600'
+    }`;
+
+  return (
+    <div className={isKiosk ? 'max-w-5xl mx-auto space-y-6' : 'space-y-6'}>
+      {error && <Banner kind="error">{error}</Banner>}
+
+      {(sites.length > 1 || filterableKandangs.length > 0) && (
+        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-4 space-y-4">
+          {sites.length > 1 && (
+            <div className="flex flex-col sm:flex-row sm:items-center gap-2">
+              <label className="text-sm font-medium text-gray-700 shrink-0" htmlFor="feed-in-site">
+                Site
+              </label>
+              <select
+                id="feed-in-site"
+                value={selectedSiteId ?? ''}
+                onChange={(e) => setSelectedSiteId(e.target.value ? Number(e.target.value) : null)}
+                className="border border-gray-300 rounded-md px-3 py-2 text-sm w-full sm:max-w-xs focus:ring-red-500 focus:border-red-500"
+              >
+                {sites.map((site) => (
+                  <option key={site.id} value={site.id}>
+                    {site.site_name}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+
+          {filterableKandangs.length > 0 && (
+            <div>
+              <p className="text-sm font-medium text-gray-700 mb-2">Kandang</p>
+              <div className="flex flex-wrap gap-2">
+                <button
+                  type="button"
+                  className={chipClass(selectedKandangId === 'all')}
+                  onClick={() => setSelectedKandangId('all')}
+                >
+                  Semua
+                </button>
+                {filterableKandangs.map((kandang) => (
+                  <button
+                    key={kandang.id}
+                    type="button"
+                    className={chipClass(selectedKandangId === kandang.id)}
+                    onClick={() => setSelectedKandangId(kandang.id)}
+                  >
+                    {kandang.kandang_name}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {loading ? (
+        <div className="text-center text-sm text-gray-500 py-10">Memuat kandang...</div>
+      ) : (
+        <FeedInButtonGrid kandangs={displayedKandangs} variant={variant} />
+      )}
+    </div>
+  );
+};
+
+export default FeedInButtonPanel;