Skip to content

Bhanu Anish inventory tabs #4948

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bhanuanishakkineni wants to merge 17 commits into
base: development
Choose a base branch
from
Open

Bhanu Anish inventory tabs #4948

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
5a80b16
create base structure for inventory page
bhanuanishakkineni Jan 8, 2026
0a49e93
add navbar and search to view inventory items
bhanuanishakkineni Jan 9, 2026
34302f0
add some scan QR buttons and icon colors
bhanuanishakkineni Jan 10, 2026
3e8573c
Implement dark mode styles for inventory page and metric cards
bhanuanishakkineni Jan 13, 2026
4eea4ec
Add media queries to make the page responsive across screens
bhanuanishakkineni Jan 14, 2026
1dfc533
clean the code by removing commented-out lines.
bhanuanishakkineni Jan 16, 2026
975710d
improve styles of search bar and navbar
bhanuanishakkineni Jan 16, 2026
0936411
Merge branch 'development' into bhanuanish-kitchenandinventory-invent…
bhanuanishakkineni Feb 4, 2026
c9527d2
update internal navbar active tab and darkmode icon colors
bhanuanishakkineni Feb 4, 2026
f7cb421
Merge branch 'bhanuanish-kitchenandinventory-inventorypage' of https:…
bhanuanishakkineni Feb 4, 2026
064fe94
fix darkmode search bar
bhanuanishakkineni Feb 4, 2026
97293f3
Delete package-lock.json
bhanuanishakkineni Feb 4, 2026
9d3a9b8
resolve unit test error
bhanuanishakkineni Feb 4, 2026
f5df014
create KIItem card and implemented ingredients tab
bhanuanishakkineni Feb 7, 2026
40dd84c
add dynamic values for inventory metric cards using sample items data
bhanuanishakkineni Feb 11, 2026
9069a6a
Merge branch 'development' into bhanuanish-ingredients-tab
bhanuanishakkineni Feb 11, 2026
c2e9110
create sample data for items and implement inventory tabs.
bhanuanishakkineni Mar 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
274 changes: 274 additions & 0 deletions src/components/KitchenandInventory/KIInventory/KIInventory.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,274 @@
import { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
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 { LiaSeedlingSolid } from 'react-icons/lia';
import { GiMasonJar } from 'react-icons/gi';
import { PiBarcode } from 'react-icons/pi';
import {
FiSearch,
FiPackage,
FiAlertCircle,
FiAlertTriangle,
FiShoppingCart,
FiArchive,
} from 'react-icons/fi';
import { RiLeafLine } from 'react-icons/ri';
import KIItemCard from './KIItemCard';
import {
ingredients,
preservedItems,
lowStock,
totalItems,
criticalStock,
onsiteGrown,
equipmentAndSupplies,
seeds,
canningSupplies,
animalSupplies,
} from './KIInventorySampleItems.js';

const KIInventory = () => {

Check failure on line 35 in src/components/KitchenandInventory/KIInventory/KIInventory.jsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Refactor this function to reduce its Cognitive Complexity from 19 to the 15 allowed. 


See more on https://sonarcloud.io/project/issues?id=OneCommunityGlobal_HighestGoodNetworkApp&issues=AZzAZm-gl-vY2hRL_0Bf&open=AZzAZm-gl-vY2hRL_0Bf&pullRequest=4948
const darkMode = useSelector(state => state.theme.darkMode);
const tabs = [
'ingredients',
'equipment & supplies',
'seeds',
'canning supplies',
'animal supplies',
];
const [activeTab, setActiveTab] = useState(tabs[0]);
const [searchTerm, setSearchTerm] = useState('');
const toggleTab = tab => {
if (activeTab !== tabs[tab]) setActiveTab(tabs[tab]);
};
useEffect(() => {
// This is where you would fetch real data from an API or database
// For this example, we're using static sample data from KIInventorySampleItems.js
}, []);
let preservedDesc = [];
if (preservedItems.length > 0) {
preservedDesc = preservedItems.map(
item => `${item.presentQuantity} ${item.unit} of ${item.name}`,
);
}
return (
<div className={classnames(styles.inventoryContainer, darkMode ? styles.darkContainer : '')}>
<header className={classnames(styles.inventoryPageHeader, darkMode ? styles.darkHeader : '')}>
<div>
<h2 className={styles.inventoryText}>Inventory Management</h2>
<p>Track ingredients, equipment, and supplies across all kitchen operations</p>
</div>
<div className={styles.inventoryMetricCards}>
<MetricCard metricname={'Total Items'} metricvalue={totalItems} iconcolor={'#023f80'}>
<FiPackage />
</MetricCard>
<MetricCard
metricname={'Critical Stock'}
metricvalue={criticalStock}
iconcolor={'#ef2d2dff'}
>
<FiAlertCircle />
</MetricCard>
<MetricCard metricname={'Low Stock'} metricvalue={lowStock} iconcolor={'#dea208ff'}>
<FiAlertTriangle />
</MetricCard>
<MetricCard metricname={'Onsite Grown'} metricvalue={onsiteGrown} iconcolor={'#12ad36ff'}>
<RiLeafLine />
</MetricCard>
</div>
<Nav className={classnames(styles.inventoryNavBar, darkMode ? styles.darkNavBar : '')}>
<NavItem>
<NavLink
className={classnames(styles.inventoryNavBarLink)}
style={{
backgroundColor: `${activeTab === tabs[0] ? '#a1a5d1' : ''}`,
borderRadius: `${activeTab === tabs[0] ? '30px' : ''}`,
}}
onClick={() => toggleTab(0)}
>
<TbToolsKitchen2 className={styles.inventoryNavBarIcon} />
Ingredients
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames(styles.inventoryNavBarLink)}
style={{
backgroundColor: `${activeTab === tabs[1] ? '#a1a5d1' : ''}`,
borderRadius: `${activeTab === tabs[1] ? '30px' : ''}`,
}}
onClick={() => toggleTab(1)}
>
<FiPackage className={styles.inventoryNavBarIcon} />
Equipment & Supplies
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames(styles.inventoryNavBarLink)}
style={{
backgroundColor: `${activeTab === tabs[2] ? '#a1a5d1' : ''}`,
borderRadius: `${activeTab === tabs[2] ? '30px' : ''}`,
}}
onClick={() => toggleTab(2)}
>
<LiaSeedlingSolid className={styles.inventoryNavBarIcon} />
Seeds
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames(styles.inventoryNavBarLink)}
style={{
backgroundColor: `${activeTab === tabs[3] ? '#a1a5d1' : ''}`,
borderRadius: `${activeTab === tabs[3] ? '30px' : ''}`,
}}
onClick={() => toggleTab(3)}
>
<GiMasonJar className={styles.inventoryNavBarIcon} />
Canning Supplies
</NavLink>
</NavItem>
<NavItem style={{ paddingRight: 0, marginRight: 0 }}>
<NavLink
className={classnames(styles.inventoryNavBarLink)}
style={{
backgroundColor: `${activeTab === tabs[4] ? '#a1a5d1' : ''}`,
borderRadius: `${activeTab === tabs[4] ? '30px' : ''}`,
}}
onClick={() => toggleTab(4)}
>
<FiShoppingCart className={styles.inventoryNavBarIcon} />
Animal Supplies
</NavLink>
</NavItem>
</Nav>
<div className={`${styles.inventoryInteraction}`}>
<div
className={classnames(styles.inventorySearchBar, darkMode ? styles.darkSearchBar : '')}
>
<span className={`${styles.otherIcons}`}>
<FiSearch />
</span>
<input
name="search"
className={classnames(styles.searchBarInput, darkMode ? styles.darkSearchInput : '')}
type="text"
placeholder={`Search ${activeTab}...`}
value={searchTerm}
onChange={e => {
setSearchTerm(e.target.value);
}}
/>
<button className={`${styles.clearSearch}`} onClick={() => setSearchTerm('')}>
x
</button>
</div>
<div>
<button className={classnames(styles.button, styles.addItemButton)}>
{'+ Add Item'}
</button>
<button className={classnames(styles.button, styles.scanBarcodeButton)}>
<span className={`${styles.otherIcons}`}>{<PiBarcode />}</span> {'Scan Barcode'}
</button>
</div>
</div>
</header>
<TabContent
activeTab={activeTab}
className={`${styles.inventoryTabContent} ${darkMode ? styles.darkTabContent : ''}`}
>
<TabPane tabId={tabs[0]}>
<div className={styles.tabContainer}>
{preservedItems.length > 0 && (
<div
className={`${styles.notificationContainer} ${
darkMode ? styles.darkModeNotification : ''
}`}
>
<div className={styles.notificationHeader}>
<p style={{ margin: 0, padding: 0 }}>
<FiArchive style={{ marginRight: '10px' }} />
Preserved Stock Available
</p>
<p style={{ margin: 0, padding: 0, fontSize: 'small' }}>
Extended shelf life items for year-round use
</p>
</div>
<div className={styles.notificationBody}>
<p style={{ color: 'rgb(175, 124, 62)' }}>{preservedDesc.join(', ')}</p>
<div>
<button
className={styles.viewAllButton}
style={darkMode ? { backgroundColor: 'rgb(245, 162, 61)' } : {}}
>
View All
</button>
</div>
</div>
</div>
)}
<div className={styles.ingredientsContainer}>
{ingredients.map(item => (
<div key={item._id}>
<KIItemCard item={item} />
</div>
))}
</div>
</div>
</TabPane>
<TabPane tabId={tabs[1]}>
<div className={styles.tabContainer}>
<div className={styles.ingredientsContainer}>
{equipmentAndSupplies.map(item => (
<div key={item._id}>
<KIItemCard item={item} />
</div>
))}
</div>
</div>
</TabPane>
<TabPane tabId={tabs[2]}>
<div className={styles.tabContainer}>
<div className={styles.ingredientsContainer}>
{seeds.map(item => (
<div key={item._id}>
<KIItemCard item={item} />
</div>
))}
</div>
</div>
</TabPane>
<TabPane tabId={tabs[3]}>
<div className={styles.tabContainer}>
<div className={styles.ingredientsContainer}>
{canningSupplies.map(item => (
<div key={item._id}>
<KIItemCard item={item} />
</div>
))}
</div>
</div>
</TabPane>
<TabPane tabId={tabs[4]}>
<div className={styles.tabContainer}>
<div className={styles.ingredientsContainer}>
{animalSupplies.map(item => (
<div key={item._id}>
<KIItemCard item={item} />
</div>
))}
</div>
</div>
</TabPane>
</TabContent>
</div>
);
};

export default KIInventory;
Loading