import React, { useState, useEffect } from 'react';
import { Box, Typography } from '@mui/material';
import Inventory from '../components/Inventory';
import { InventoryItem } from '../types';
import apiService from '../services/api';
const InventoryPage: React.FC = () => {
const [items, setItems] = useState<InventoryItem[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(10);
const [total, setTotal] = useState(0);
const [searchTerm, setSearchTerm] = useState('');
const [lowStockFilter, setLowStockFilter] = useState(false);
useEffect(() => {
fetchInventory();
}, [page, rowsPerPage, searchTerm, lowStockFilter]);
const fetchInventory = async () => {
try {
setLoading(true);
setError(null);
let items: InventoryItem[];
if (lowStockFilter) {
items = await apiService.getLowStockItems();
} else {
items = await apiService.getInventory();
}
// For pagination simulation
const startIndex = page * rowsPerPage;
const endIndex = startIndex + rowsPerPage;
const paginatedItems = items.slice(startIndex, endIndex);
setItems(paginatedItems);
setTotal(items.length);
} catch (err) {
setError('Failed to fetch inventory');
console.error(err);
} finally {
setLoading(false);
}
};
return (
<Box>
<Typography variant="h4" gutterBottom>
Inventory
</Typography>
<Inventory
items={items}
loading={loading}
error={error}
page={page}
rowsPerPage={rowsPerPage}
total={total}
searchTerm={searchTerm}
lowStockFilter={lowStockFilter}
onPageChange={setPage}
onRowsPerPageChange={setRowsPerPage}
onSearchTermChange={setSearchTerm}
onLowStockFilterChange={setLowStockFilter}
/>
</Box>
);
};
export default InventoryPage;
