import React, { useState, useEffect } from 'react';
import {
Box,
Button,
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TablePagination,
Chip,
IconButton,
Dialog,
DialogTitle,
DialogContent,
DialogActions,
TextField,
MenuItem,
Select,
FormControl,
InputLabel,
CircularProgress,
Alert,
Typography
} from '@mui/material';
import {
Search,
Add,
Edit,
Delete,
Check,
Warning
} from '@mui/icons-material';
import { InventoryItem } from '../types';
import apiService from '../services/api';
interface InventoryProps {
items: InventoryItem[];
loading: boolean;
error: string | null;
page: number;
rowsPerPage: number;
total: number;
searchTerm: string;
lowStockFilter: boolean;
onPageChange: (newPage: number) => void;
onRowsPerPageChange: (newRowsPerPage: number) => void;
onSearchTermChange: (term: string) => void;
onLowStockFilterChange: (filter: boolean) => void;
}
const Inventory: React.FC<InventoryProps> = ({
items,
loading,
error,
page,
rowsPerPage,
total,
searchTerm,
lowStockFilter,
onPageChange,
onRowsPerPageChange,
onSearchTermChange,
onLowStockFilterChange
}) => {
const [selectedItem, setSelectedItem] = useState<InventoryItem | null>(null);
const [openDialog, setOpenDialog] = useState(false);
const handleChangePage = (event: unknown, newPage: number) => {
onPageChange(newPage);
};
const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
onRowsPerPageChange(parseInt(event.target.value, 10));
};
const handleEditItem = (item: InventoryItem) => {
setSelectedItem(item);
setOpenDialog(true);
};
const getStockStatus = (available: number) => {
if (available === 0) return 'out-of-stock';
if (available < 5) return 'low-stock';
return 'in-stock';
};
const getStockColor = (available: number) => {
if (available === 0) return 'error';
if (available < 5) return 'warning';
return 'success';
};
if (loading) {
return (
<Box display="flex" justifyContent="center" alignItems="center" height="400px">
<CircularProgress />
</Box>
);
}
if (error) {
return <Alert severity="error">{error}</Alert>;
}
return (
<Box>
<Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
<Box display="flex" alignItems="center">
<TextField
variant="outlined"
placeholder="Search inventory..."
value={searchTerm}
onChange={(e) => onSearchTermChange(e.target.value)}
InputProps={{
startAdornment: <Search />,
}}
size="small"
style={{ marginRight: 16 }}
/>
<FormControl size="small" style={{ minWidth: 150 }}>
<InputLabel>Stock Status</InputLabel>
<Select
value={lowStockFilter ? 'low' : 'all'}
onChange={(e) => onLowStockFilterChange(e.target.value === 'low')}
label="Stock Status"
>
<MenuItem value="all">All Items</MenuItem>
<MenuItem value="low">Low Stock Items</MenuItem>
</Select>
</FormControl>
</Box>
<Button
variant="contained"
color="primary"
startIcon={<Add />}
>
Add Inventory Item
</Button>
</Box>
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>Product ID</TableCell>
<TableCell>Sellable ID</TableCell>
<TableCell>Quantity</TableCell>
<TableCell>Available</TableCell>
<TableCell>Allocated</TableCell>
<TableCell>Stock Status</TableCell>
<TableCell>Actions</TableCell>
</TableRow>
</TableHead>
<TableBody>
{items.map((item) => (
<TableRow key={item.id}>
<TableCell>{item.product_id}</TableCell>
<TableCell>{item.sellable_id}</TableCell>
<TableCell>{item.quantity}</TableCell>
<TableCell>{item.available}</TableCell>
<TableCell>{item.allocated}</TableCell>
<TableCell>
<Chip
label={getStockStatus(item.available)}
color={getStockColor(item.available)}
size="small"
icon={item.available < 5 ? <Warning /> : undefined}
/>
</TableCell>
<TableCell>
<IconButton onClick={() => handleEditItem(item)}>
<Edit />
</IconButton>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={total}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
{/* Inventory Item Dialog */}
<Dialog open={openDialog} onClose={() => setOpenDialog(false)} maxWidth="md" fullWidth>
<DialogTitle>
{selectedItem ? 'Edit Inventory Item' : 'Add New Inventory Item'}
</DialogTitle>
<DialogContent>
<p>Inventory item form would go here</p>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenDialog(false)}>Cancel</Button>
<Button variant="contained" color="primary" startIcon={<Check />}>
Save
</Button>
</DialogActions>
</Dialog>
</Box>
);
};
export default Inventory;
