Merge pull request #5095 from OneCommunityGlobal/Kitchen-Inventory-Management-Implement-Feed-Management-Section

Abhinav - Kitchen inventory management implement feed management section

Author: one-community

src/components/KitchenInterfaces/Processing/ProcessingLandingPage.module.css

@@ -797,16 +797,13 @@
 }
 
 .formGroup input[type="date"] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  cursor: pointer;
 }
 
 .darkModeModal input[type="date"] {
   color-scheme: dark;
 }
 
 .darkModeModal input[type="date"]::-webkit-calendar-picker-indicator {
-  filter: invert(1);
   cursor: pointer;
 }

src/components/KitchenInterfaces/Production/AnimalManagement/AnimalManagement.jsx

@@ -1,15 +1,50 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPaw, faShoppingCart, faBoxOpen, faCalendarAlt } from '@fortawesome/free-solid-svg-icons';
 import { useSelector } from 'react-redux';
 import AnimalOrdersTab from './AnimalOrdersTab';
 import CullingCalendarTab from './CullingCalendarTab';
+import FeedManagementTab from './FeedManagementTab';
 import styles from './AnimalManagement.module.css';
 
 const AnimalManagement = () => {
   const darkMode = useSelector(state => state.theme?.darkMode || false);
   const [activeTab, setActiveTab] = useState('orders');
 
+  useEffect(() => {
+    const handleScroll = () => {
+      const btn = document.querySelector('.back-to-top');
+      if (!btn) return;
+      if (window.scrollY > 300) {
+        btn.style.setProperty('display', 'flex', 'important');
+      } else {
+        btn.style.setProperty('display', 'none', 'important');
+      }
+    };
+
+    const handleBackToTopClick = e => {
+      e.preventDefault();
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+
+    const btn = document.querySelector('.back-to-top');
+    if (btn) {
+      btn.addEventListener('click', handleBackToTopClick);
+    }
+    window.addEventListener('scroll', handleScroll);
+
+    // Initial check
+    handleScroll();
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      if (btn) {
+        btn.removeEventListener('click', handleBackToTopClick);
+        btn.style.display = '';
+      }
+    };
+  }, []);
+
   const [orders, setOrders] = useState([
     {
       id: 'AO-001',
@@ -48,8 +83,35 @@ const AnimalManagement = () => {
     },
   ]);
 
+  const [feedOrders, setFeedOrders] = useState([
+    {
+      id: 'FO-001',
+      supplierName: 'Farm Supply Co.',
+      items: 'Layer Feed (100 lbs), Scratch Grains (50 lbs)',
+      orderedDate: '2024-10-15',
+      expectedDate: '2024-10-18',
+      status: 'delivered',
+    },
+    {
+      id: 'FO-002',
+      supplierName: 'Organic Feed Depot',
+      items: 'Goat Pellets (80 lbs), Hay Bales (10)',
+      orderedDate: '2024-10-22',
+      expectedDate: '2024-10-29',
+      status: 'shipped',
+    },
+  ]);
+
+  const [feedInventory, setFeedInventory] = useState([
+    { id: 'FI-1', name: 'Layer Feed', unit: 'lbs', stockLeft: 75, reorderThreshold: 25 },
+    { id: 'FI-2', name: 'Scratch Grains', unit: 'lbs', stockLeft: 30, reorderThreshold: 15 },
+    { id: 'FI-3', name: 'Goat Pellets', unit: 'lbs', stockLeft: 15, reorderThreshold: 20 },
+    { id: 'FI-4', name: 'Hay Bales', unit: 'bales', stockLeft: 18, reorderThreshold: 10 },
+  ]);
+
   const pendingOrdersCount = orders.filter(o => o.status !== 'delivered').length;
   const upcomingCullingCount = cullingEvents.filter(e => e.status === 'scheduled').length;
+  const pendingFeedOrdersCount = feedOrders.filter(o => o.status !== 'delivered').length;
 
   return (
     <div
@@ -86,7 +148,7 @@ const AnimalManagement = () => {
         <div className={styles['dashboard-card']}>
           <div className={styles['card-info']}>
             <span className={styles['card-title']}>Feed Orders</span>
-            <span className={styles['card-value']}>2</span>
+            <span className={styles['card-value']}>{pendingFeedOrdersCount}</span>
           </div>
           <div className={`${styles['card-icon']} ${styles['icon-feed']}`}>
             <FontAwesomeIcon icon={faBoxOpen} />
@@ -136,16 +198,19 @@ const AnimalManagement = () => {
         {activeTab === 'culling' && (
           <CullingCalendarTab events={cullingEvents} setEvents={setCullingEvents} />
         )}
+        {activeTab === 'feed' && (
+          <FeedManagementTab
+            feedOrders={feedOrders}
+            setFeedOrders={setFeedOrders}
+            feedInventory={feedInventory}
+            setFeedInventory={setFeedInventory}
+          />
+        )}
         {activeTab === 'inventory' && (
           <div className={styles['tab-content']}>
             <div className={styles['empty-state']}>Animal Inventory content coming soon.</div>
           </div>
         )}
-        {activeTab === 'feed' && (
-          <div className={styles['tab-content']}>
-            <div className={styles['empty-state']}>Feed Management content coming soon.</div>
-          </div>
-        )}
       </div>
     </div>
   );