autocommit 25-05-2024-11-28

pos-frontend/app/inventory/page.tsx

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