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

2026-09-02 13:33:41 +07:00
1 parent 07b8e2dc25
commit b86bd7a2f4
@@ -0,0 +1,67 @@
+import React from 'react';
+import { AuthProvider, useAuth } from './context/AuthContext.tsx';
+import { FarmProvider } from './context/FarmContext.tsx';
+import AuthPage from './components/auth/AuthPage.tsx';
+import FeedInButtonPanel from './components/feedInButton/FeedInButtonPanel.tsx';
+import { Banner, Spinner } from './components/ui/Feedback.tsx';
+import { useFarm } from './context/FarmContext.tsx';
+
+const ButtonContent: React.FC = () => {
+  const { error } = useFarm();
+
+  return (
+    <div className="min-h-screen bg-gray-100 flex flex-col">
+      <header className="bg-white border-b border-gray-200 px-6 py-4">
+        <div className="max-w-5xl mx-auto flex items-center justify-between gap-4">
+          <div className="flex items-center gap-4">
+            <img src="/favicon.png" alt="Logo" className="h-10 object-contain" />
+            <div>
+              <h1 className="text-xl font-bold text-gray-800">Feed In/Out Button</h1>
+              <p className="text-sm text-gray-500">Pilih kandang untuk memulai hitung feed in</p>
+            </div>
+          </div>
+          <a
+            href="/"
+            className="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 hover:text-red-600 shrink-0"
+          >
+            <i className="fa-solid fa-arrow-left" />
+            Kembali ke Dashboard
+          </a>
+        </div>
+      </header>
+      <main className="flex-1 px-6 py-10">
+        {error && (
+          <div className="max-w-5xl mx-auto mb-6">
+            <Banner kind="error">{error}</Banner>
+          </div>
+        )}
+        <FeedInButtonPanel variant="kiosk" />
+      </main>
+    </div>
+  );
+};
+
+const Gate: React.FC = () => {
+  const { user, loading } = useAuth();
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-100">
+        <Spinner />
+      </div>
+    );
+  }
+  if (!user) return <AuthPage />;
+  return (
+    <FarmProvider>
+      <ButtonContent />
+    </FarmProvider>
+  );
+};
+
+const ButtonApp: React.FC = () => (
+  <AuthProvider>
+    <Gate />
+  </AuthProvider>
+);
+
+export default ButtonApp;