82 lines
2.0 KiB
TypeScript
82 lines
2.0 KiB
TypeScript
import React, { useState } from 'react'
|
|
import { Container, Paper, Col, Table, Button, TextInput, useMantineTheme } from '@mantine/core'
|
|
|
|
interface InventoryItem {
|
|
id: number
|
|
name: string
|
|
price: number
|
|
quantity: number
|
|
}
|
|
|
|
export default function InventoryPage() {
|
|
const theme = useMantineTheme()
|
|
const [items, setItems] = useState<InventoryItem[]>([])
|
|
const [name, setName] = useState('')
|
|
const [price, setPrice] = useState('')
|
|
const [quantity, setQuantity] = useState('')
|
|
|
|
const addItem = () => {
|
|
setItems([
|
|
...items,
|
|
{
|
|
id: items.length + 1,
|
|
name,
|
|
price: parseFloat(price),
|
|
quantity: parseInt(quantity),
|
|
},
|
|
])
|
|
setName('')
|
|
setPrice('')
|
|
setQuantity('')
|
|
}
|
|
|
|
return (
|
|
<Container size="md" padding={theme.spacing.md}>
|
|
<Paper padding={theme.spacing.md}>
|
|
<Table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Name</th>
|
|
<th>Price</th>
|
|
<th>Quantity</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{items.map((item) => (
|
|
<tr key={item.id}>
|
|
<td>{item.id}</td>
|
|
<td>{item.name}</td>
|
|
<td>{item.price}</td>
|
|
<td>{item.quantity}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</Table>
|
|
</Paper>
|
|
|
|
<Col style={{ marginTop: theme.spacing.md }}>
|
|
<TextInput
|
|
label="Item name"
|
|
placeholder="Enter item name"
|
|
value={name}
|
|
onChange={(event) => setName(event.currentTarget.value)}
|
|
/>
|
|
<TextInput
|
|
label="Price"
|
|
placeholder="Enter item price"
|
|
value={price}
|
|
onChange={(event) => setPrice(event.currentTarget.value)}
|
|
/>
|
|
<TextInput
|
|
label="Quantity"
|
|
placeholder="Enter item quantity"
|
|
value={quantity}
|
|
onChange={(event) => setQuantity(event.currentTarget.value)}
|
|
/>
|
|
<Button onClick={addItem}>Add item</Button>
|
|
</Col>
|
|
</Container>
|
|
)
|
|
}
|