cswine
/
point-of-sales
1
1
Fork 0
Code Issues 2 Pull Requests Packages Projects 1 Releases Wiki Activity

autocommit 10-06-2024-16-04

This commit is contained in:
Jasen Qin 2024-06-10 16:04:36 +10:00
parent 3fc5034997
commit 6745ae91f5
3 changed files with 32 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
pos-frontend/app/inventory/page.tsx
View File

@ -1,5 +1,7 @@
"use client"
import React, { useState } from 'react' import React, { useState } from 'react'
import { Container, Paper, Col, Table, Button, TextInput, useMantineTheme } from '@mantine/core' import { Container, Paper, Table, Button, TextInput, useMantineTheme, Flex, Image } from '@mantine/core'
import Example from './query' import Example from './query'
interface InventoryItem { interface InventoryItem {
@ -48,8 +50,8 @@ export default function InventoryPage() {
return ( return (
<> <>
<Container size="md" padding={theme.spacing.md}> <Container size="md" >
<Paper padding={theme.spacing.md}> <Paper >
<Table> <Table>
<thead> <thead>
<tr> <tr>
@ -72,7 +74,7 @@ export default function InventoryPage() {
</Table> </Table>
</Paper> </Paper>
<Col style={{ marginTop: theme.spacing.md }}> <Flex style={{ marginTop: theme.spacing.md }}>
<TextInput <TextInput
label="Item name" label="Item name"
placeholder="Enter item name" placeholder="Enter item name"
@ -92,7 +94,7 @@ export default function InventoryPage() {
onChange={(event) => setQuantity(event.currentTarget.value)} onChange={(event) => setQuantity(event.currentTarget.value)}
/> />
<Button onClick={addItem}>Add item</Button> <Button onClick={addItem}>Add item</Button>
</Col> </Flex>
</Container> </Container>
<Flex <Flex
id="GRID OF ITEMS" id="GRID OF ITEMS"

21
pos-frontend/app/layout.tsx
View File

@ -1,4 +1,4 @@
"use client" // "use client"
import '@mantine/core/styles.css' import '@mantine/core/styles.css'
import { import {
@ -7,12 +7,13 @@ import {
QueryClientProvider, QueryClientProvider,
} from '@tanstack/react-query' } from '@tanstack/react-query'
import { ColorSchemeScript, MantineProvider } from '@mantine/core' import { ColorSchemeScript, MantineProvider } from '@mantine/core'
import { useState } from 'react' // import { useState } from 'react'
import Providers from './query-provider'
// export const metadata = { export const metadata = {
// title: 'My Mantine app', title: 'My Mantine app',
// description: 'I have followed setup instructions carefully', description: 'I have followed setup instructions carefully',
// } }
// const queryClient = new QueryClient() // const queryClient = new QueryClient()
@ -21,7 +22,7 @@ export default function RootLayout({
}: { }: {
children: React.ReactNode children: React.ReactNode
}) { }) {
const [queryClient] = useState(() => new QueryClient()) // const [queryClient] = useState(() => new QueryClient())
return ( return (
<html lang="en"> <html lang="en">
@ -30,9 +31,11 @@ export default function RootLayout({
</head> </head>
<body> <body>
{/* can add a theme */} {/* can add a theme */}
<QueryClientProvider client={queryClient}> {/* <QueryClientProvider client={queryClient}> */}
<Providers>
<MantineProvider>{children}</MantineProvider> <MantineProvider>{children}</MantineProvider>
</QueryClientProvider> </Providers>
{/* </QueryClientProvider> */}
</body> </body>
</html> </html>
) )

13
pos-frontend/app/query-provider.tsx Normal file
View File

@ -0,0 +1,13 @@
// app/providers.jsx
'use client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { useState } from 'react'
export default function Providers({ children }: any) {
const [queryClient] = useState(() => new QueryClient())
return (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
)
}