first commit

AppContent.tsx

@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+import type { View } from './types/common.ts';
+import { useFarm } from './context/FarmContext.tsx';
+import Sidebar from './components/Sidebar.tsx';
+import Header from './components/Header.tsx';
+import CycleTimeline from './components/CycleTimeline.tsx';
+import Dashboard from './components/Dashboard.tsx';
+import DataManagementPage from './components/counting/DataManagementPage.tsx';
+import WeightMonitoringPage from './components/WeightMonitoringPage.tsx';
+import WeightStandardPage from './components/WeightStandardPage.tsx';
+import FeedSackCountingPage from './components/FeedSackCountingPage.tsx';
+import CobbStandardPage from './components/CobbStandardPage.tsx';
+import IotPanelPage from './components/IotPanelPage.tsx';
+import FcrDashboardPage from './components/FcrDashboardPage.tsx';
+import EefDashboardPage from './components/EefDashboardPage.tsx';
+import SettingsPage from './components/SettingsPage.tsx';
+import { Banner } from './components/ui/Feedback.tsx';
+
+const AppContent: React.FC = () => {
+  const { error, loading } = useFarm();
+  const [view, setView] = useState<View>('dashboard');
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+  const [isTimelineVisible, setIsTimelineVisible] = useState(false);
+  const goSettings = () => setView('kandangSettings');
+
+  const renderView = () => {
+    switch (view) {
+      case 'dashboard':
+        return <Dashboard setView={setView} />;
+      case 'dataManagement':
+        return <DataManagementPage onSettings={goSettings} />;
+      case 'weightMonitoring':
+        return <WeightMonitoringPage onSettings={goSettings} />;
+      case 'weightStandard':
+        return <WeightStandardPage />;
+      case 'feedSackCounting':
+        return <FeedSackCountingPage onSettings={goSettings} />;
+      case 'cobbStandard':
+        return <CobbStandardPage />;
+      case 'iotPanel':
+        return <IotPanelPage onSettings={goSettings} />;
+      case 'fcrDashboard':
+        return <FcrDashboardPage onSettings={goSettings} />;
+      case 'eefDashboard':
+        return <EefDashboardPage onSettings={goSettings} />;
+      case 'kandangSettings':
+        return <SettingsPage />;
+      default:
+        return <Dashboard setView={setView} />;
+    }
+  };
+
+  return (
+    <div className="flex h-screen bg-gray-100">
+      <Sidebar
+        isCollapsed={isSidebarCollapsed}
+        view={view}
+        setView={setView}
+        onToggleCollapse={() => setIsSidebarCollapsed((v) => !v)}
+      />
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <Header
+          onToggleSidebar={() => setIsSidebarCollapsed((v) => !v)}
+          isTimelineVisible={isTimelineVisible}
+          onToggleTimeline={() => setIsTimelineVisible((v) => !v)}
+        />
+        <div className="flex-1 overflow-x-hidden overflow-y-auto">
+          {isTimelineVisible && (
+            <div className="px-4 sm:px-6 lg:px-8 pt-4 sm:pt-6 lg:pt-8">
+              <CycleTimeline />
+            </div>
+          )}
+          <div
+            className={
+              isTimelineVisible
+                ? 'px-4 sm:px-6 lg:px-8 pb-8'
+                : 'px-4 sm:px-6 lg:px-8 pt-4 sm:pt-6 lg:pt-8 pb-8'
+            }
+          >
+            {error && (
+              <div className="mb-4">
+                <Banner kind="error">{error}</Banner>
+              </div>
+            )}
+            {renderView()}
+          </div>
+        </div>
+      </div>
+      {loading && (
+        <div className="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-8 shadow-2xl flex flex-col items-center">
+            <div className="relative w-16 h-16 mb-4">
+              <div className="absolute inset-0 border-4 border-gray-200 rounded-full"></div>
+              <div className="absolute inset-0 border-4 border-red-600 rounded-full border-t-transparent animate-spin"></div>
+            </div>
+            <p className="text-gray-700 font-semibold text-lg">Memuat Data...</p>
+            <p className="text-gray-500 text-sm mt-2">Mohon tunggu sebentar</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AppContent;