From 5a80b16b3e7324fad4343c0f36e70c129a26358d Mon Sep 17 00:00:00 2001 From: Bhanu Anish Date: Thu, 8 Jan 2026 01:17:39 -0600 Subject: [PATCH 01/14] create base structure for inventory page --- .../KIInventory/KIInventory.jsx | 34 ++++++++++++++++ .../KIInventory/KIInventory.module.css | 39 +++++++++++++++++++ .../MetricCards/MetricCard.jsx | 15 +++++++ .../MetricCards/MetricCard.module.css | 20 ++++++++++ src/routes.jsx | 2 + 5 files changed, 110 insertions(+) create mode 100644 src/components/KitchenandInventory/KIInventory/KIInventory.jsx create mode 100644 src/components/KitchenandInventory/KIInventory/KIInventory.module.css create mode 100644 src/components/KitchenandInventory/MetricCards/MetricCard.jsx create mode 100644 src/components/KitchenandInventory/MetricCards/MetricCard.module.css diff --git a/src/components/KitchenandInventory/KIInventory/KIInventory.jsx b/src/components/KitchenandInventory/KIInventory/KIInventory.jsx new file mode 100644 index 0000000000..d53bd21ffb --- /dev/null +++ b/src/components/KitchenandInventory/KIInventory/KIInventory.jsx @@ -0,0 +1,34 @@ +import { useState, useEffect } from 'react'; +// import { useSelector } from 'react-redux'; +import { Nav, NavItem, NavLink } from 'reactstrap'; +import styles from './KIInventory.module.css'; +import MetricCard from '../MetricCards/MetricCard'; + +// import { ENDPOINTS } from '../../utils/URL'; +// import axios from 'axios'; + +const KIInventory = () => { + return ( +
+
+
+

Inventory Management

+

Track ingredients, equipment, and supplies across all kitchen operations

+
+
+ + + + +
+ +
+
+ ); +}; + +export default KIInventory; diff --git a/src/components/KitchenandInventory/KIInventory/KIInventory.module.css b/src/components/KitchenandInventory/KIInventory/KIInventory.module.css new file mode 100644 index 0000000000..6caa343bf5 --- /dev/null +++ b/src/components/KitchenandInventory/KIInventory/KIInventory.module.css @@ -0,0 +1,39 @@ +/* :global(body) { + font-family: 'Poppins', sans-serif; + background: #fff; + margin: 0; + padding: 0; +} */ +.inventoryContainer { + padding: 40px 40px; + margin-left: 0; + font-size: 16px; + line-height: 1.6; + letter-spacing: 0.2px; + width: 100%; +} +.inventorypageheader { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + margin-top: 20px; + margin-bottom: 20px; + width: 100%; + padding-left: 0px; + padding-right: 0px; + margin-left: 10px; + margin-right: 20px; + background: #ffffff; + +} + +.inventoryMetricCards { + width: 100%; + display: flex; + gap: 20px; + border: 1px solid #e0e0e0; + border-radius: 16px; + box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.1); + margin-right: 40px; +} \ No newline at end of file diff --git a/src/components/KitchenandInventory/MetricCards/MetricCard.jsx b/src/components/KitchenandInventory/MetricCards/MetricCard.jsx new file mode 100644 index 0000000000..c06fc1ee1e --- /dev/null +++ b/src/components/KitchenandInventory/MetricCards/MetricCard.jsx @@ -0,0 +1,15 @@ +import React from 'react'; +import styles from './MetricCard.module.css'; + +function MetricCard({ metricname, metricvalue }) { + return ( +
+
{metricname}
+
+

{metricvalue}

+
+
+ ); +} + +export default MetricCard; diff --git a/src/components/KitchenandInventory/MetricCards/MetricCard.module.css b/src/components/KitchenandInventory/MetricCards/MetricCard.module.css new file mode 100644 index 0000000000..2bb797ca58 --- /dev/null +++ b/src/components/KitchenandInventory/MetricCards/MetricCard.module.css @@ -0,0 +1,20 @@ +.metricCard { + width: 100%; + /* height: 150px; */ + border-radius: 8px; + box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.1), -4px 0px 10px rgba(0, 0, 0, 0.1); + padding: 16px; + background-color: #ffffff; + /* margin: 10px; */ +} + +.metricCardHeader { + font-size: 1rem; + font-weight: bold; + margin-bottom: 12px; +} + +.metricCardBody { + font-size: 2rem; + color: #333333; +} \ No newline at end of file diff --git a/src/routes.jsx b/src/routes.jsx index b7169b0b60..1352be2246 100644 --- a/src/routes.jsx +++ b/src/routes.jsx @@ -172,6 +172,7 @@ import CommunityCalendar from './components/CommunityPortal/Calendar/CommunityCa import KitchenandInventoryLogin from './components/KitchenandInventory/Login'; import KIProtectedRoute from './components/common/KitchenandInventory/KIProtectedRoute'; import KIDashboard from './components/KitchenandInventory/KIDashboard/KIDashboard'; +import KIINVENTORY from './components/KitchenandInventory/KIInventory/KIInventory'; // Education Portal import EPProtectedRoute from './components/common/EPDashboard/EPProtectedRoute'; @@ -853,6 +854,7 @@ export default ( {/* ----- END BM Dashboard Routing ----- */} {/* ----- Kitchen and Inventory Portal Routes ----- */} + {/* ----- End of Kitchen and Inventory Portal Routes ----- */} From 0a49e93d1ccb165478c28e351c03e61de0ac046b Mon Sep 17 00:00:00 2001 From: Bhanu Anish Date: Fri, 9 Jan 2026 00:52:22 -0600 Subject: [PATCH 02/14] add navbar and search to view inventory items implement tabs for different categories of inventory --- .../KIInventory/KIInventory.jsx | 88 ++++++++++++++++++- .../KIInventory/KIInventory.module.css | 83 +++++++++++++++-- 2 files changed, 162 insertions(+), 9 deletions(-) diff --git a/src/components/KitchenandInventory/KIInventory/KIInventory.jsx b/src/components/KitchenandInventory/KIInventory/KIInventory.jsx index d53bd21ffb..57c1c78d40 100644 --- a/src/components/KitchenandInventory/KIInventory/KIInventory.jsx +++ b/src/components/KitchenandInventory/KIInventory/KIInventory.jsx @@ -1,13 +1,33 @@ import { useState, useEffect } from 'react'; // import { useSelector } from 'react-redux'; -import { Nav, NavItem, NavLink } from 'reactstrap'; +import { Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap'; import styles from './KIInventory.module.css'; import MetricCard from '../MetricCards/MetricCard'; +import classnames from 'classnames'; +// Icons +import { TbToolsKitchen2 } from 'react-icons/tb'; +import { BsBoxSeam } from 'react-icons/bs'; +import { LiaSeedlingSolid } from 'react-icons/lia'; +import { GiMasonJar } from 'react-icons/gi'; +import { MdOutlineShoppingCart } from 'react-icons/md'; +import { FiSearch } from 'react-icons/fi'; // import { ENDPOINTS } from '../../utils/URL'; // import axios from 'axios'; const KIInventory = () => { + const tabs = [ + 'Ingredients', + 'Equipment & Supplies', + 'Seeds', + 'Canning Supplies', + 'Animal Supplies', + ]; + const [activeTab, setActiveTab] = useState(tabs[0]); + const toggleTab = tab => { + if (activeTab !== tabs[tab]) setActiveTab(tabs[tab]); + }; + // console.log('Active Tab:', activeTab); return (
@@ -21,12 +41,72 @@ const KIInventory = () => {
-