autocommit 25-05-2024-11-28

pos-frontend/app/inventory/page.tsx

@@ -1,49 +1,81 @@
-import { Container } from '@mantine/core'
-import { Flex, Button } from '@mantine/core'
-import React from "react"
+import React, { useState } from 'react'
+import { Container, Paper, Col, Table, Button, TextInput, useMantineTheme } from '@mantine/core'
 
-const NavLink = (props: any) =>
-  <li className="nav-item">
-    <a className="nav-link" href={props.href}>
-      {props.children}
-    </a>
-  </li>
-
-const Text = (props: any) =>
-  <p>{props.children}</p>
+interface InventoryItem {
+  id: number
+  name: string
+  price: number
+  quantity: number
+}
 
 export default function InventoryPage() {
-  const demoProps = {
-    bg: 'var(--mantine-color-blue-light)',
-    h: 50,
-    mt: 'md',
+  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 {...demoProps}>Default Container</Container>
+    <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>
 
-      <Container size="xs" {...demoProps}>
-        xs Container
+      <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>
-
-      <Container px={0} size="30rem" {...demoProps}>
-        30rem Container without padding
-      </Container>
-
-      <Flex
-        mih={50}
-        bg="rgba(0, 0, 0, .3)"
-        gap="md"
-        justify="flex-start"
-        align="flex-start"
-        direction="row"
-        wrap="wrap"
-      >
-        <Button>Button 1</Button>
-        <Button>Button 2</Button>
-        <Button>Button 3</Button>
-      </Flex>
-    </>
   )
 }