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

autocommit 15-06-2024-22-35

This commit is contained in:
Jason Qin 2024-06-15 22:35:26 +10:00
parent 9447d4522f
commit 0fca348270
3 changed files with 23 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
pos-frontend/app/global.css Normal file
View File

@ -0,0 +1,5 @@
html,
body {
max-width: 100%;
overflow-x: hidden;
}

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

@ -1,13 +1,9 @@
"use client" "use client"
import React, { useState } from 'react' import React, { useState } from 'react'
import { Box, Container, Paper, Table, Button, TextInput, useMantineTheme, Flex, Image, Grid } from '@mantine/core' import { Box, Container, Paper, Table, Button, TextInput, useMantineTheme, Flex, Image, Grid, Space, Divider } from '@mantine/core'
import Example from './query'
// import { Image as NextImage } from 'next/image'
import NextImage from 'next/image' import NextImage from 'next/image'
import Prawn from "../images/aussietigerprawns.jpg" import Prawn from "../images/aussietigerprawns.jpg"
// import Prawn from "/aussietigerprawns.jpg"
interface InventoryItem { interface InventoryItem {
id: number id: number
@ -18,9 +14,6 @@ interface InventoryItem {
async function fetchBlob(url: string) { async function fetchBlob(url: string) {
const response = await fetch(url) const response = await fetch(url)
// Here is the significant part
// reading the stream as a blob instead of json
return response.blob() return response.blob()
} }
@ -56,7 +49,7 @@ export default function InventoryPage() {
return ( return (
<Box> <Box>
<Container size="md" > <Container size="md" >
<Paper > {/* <Paper >
<Table> <Table>
<thead> <thead>
<tr> <tr>
@ -77,9 +70,11 @@ export default function InventoryPage() {
))} ))}
</tbody> </tbody>
</Table> </Table>
</Paper> </Paper> */}
<Flex style={{ marginTop: theme.spacing.md }}> {/* use a grid */}
<Flex gap="md" style={{ marginTop: theme.spacing.md }}>
<TextInput <TextInput
label="Item name" label="Item name"
placeholder="Enter item name" placeholder="Enter item name"
@ -102,80 +97,29 @@ export default function InventoryPage() {
</Flex> </Flex>
</Container> </Container>
{/* <Grid> <Grid gutter={{ base: 5, xs: 'md', md: 'xl', xl: 'xl' }}>
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}> <Grid.Col span={{ base: 6, md: 2, lg: 1 }}>
<NextImage width={4} src={Prawn} alt="ITEM" />
</Grid.Col>
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
<NextImage width={4} src={Prawn} alt="ITEM" />
</Grid.Col>
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
<NextImage width={4} src={Prawn} alt="ITEM" />
</Grid.Col>
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
<NextImage width={4} src={Prawn} alt="ITEM" />
</Grid.Col>
</Grid> */}
{/* maybe instead, do 4 items on small. And double each time To 8 or 16 */}
<Grid>
<Grid.Col span={{ base: 16, md: 2, lg: 1 }}>
<NextImage width={150} sizes="(max-width: 768px) 100vw, 33vw" src={Prawn} alt="ITEM" />
{/* <NextImage width={500} src={Prawn} alt="ITEM" />
<NextImage width={500} src={Prawn} alt="ITEM" />
<NextImage width={500} src={Prawn} alt="ITEM" /> */}
</Grid.Col>
<Grid.Col span={{ base: 16, md: 2, lg: 1 }}>
<NextImage width={150} src={Prawn} alt="ITEM" /> <NextImage width={150} src={Prawn} alt="ITEM" />
</Grid.Col> </Grid.Col>
<Grid.Col span={{ base: 16, md: 2, lg: 1 }}> <Grid.Col span={{ base: 6, md: 2, lg: 1 }}>
<NextImage width={150} src={Prawn} alt="ITEM" /> <NextImage width={150} src={Prawn} alt="ITEM" />
</Grid.Col> </Grid.Col>
<Grid.Col span={{ base: 16, md: 2, lg: 1 }}> <Grid.Col span={{ base: 6, md: 2, lg: 1 }}>
{/* <NextImage width={500} src={Prawn} alt="ITEM" /> */} <NextImage width={150} src={Prawn} alt="ITEM" />
{/* <img src="../images/aussietigerprawns.jpg" alt="hi"/> */} </Grid.Col>
<Grid.Col span={{ base: 6, md: 2, lg: 1 }}>
<NextImage width={150} src={Prawn} alt="ITEM" />
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<Grid> {/* <Grid>
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>1</Grid.Col> <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>1</Grid.Col>
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>2</Grid.Col> <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>2</Grid.Col>
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>3</Grid.Col> <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>3</Grid.Col>
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>4</Grid.Col> <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>4</Grid.Col>
</Grid> </Grid> */}
<Flex {/* why is there a scroll area on the grid */}
id="GRID OF ITEMS"
mih={50}
bg="rgba(0, 0, 0, .3)"
gap="md"
justify="flex-start"
align="flex-start"
direction="column"
wrap="wrap"
>
{/* would fetch the source from axios */}
{/* <NextImage src={Prawn} alt="ITEM" />
<NextImage src={Prawn} alt="ITEM" />
<NextImage src={Prawn} alt="ITEM" />
<NextImage src={Prawn} alt="ITEM" />
<NextImage src={Prawn} alt="ITEM" />
<NextImage src={Prawn} alt="ITEM" />
<NextImage src={Prawn} alt="ITEM" />
<NextImage src={Prawn} alt="ITEM" />
<NextImage src={Prawn} alt="ITEM" />
<NextImage src={Prawn} alt="ITEM" /> */}
{/* <Example /> */}
{/* <Image component={NextImage} src={Prawn} alt="TIGER PRAWNS" /> */}
{/* from public import everything .jpg */}
{/* create an Image for each */}
{/* <NextImage src="cake.jpg" alt="public/cake" /> */}
</Flex>
</Box> </Box>
) )
} }

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

@ -1,5 +1,3 @@
// "use client"
import '@mantine/core/styles.css' import '@mantine/core/styles.css'
import { import {
hydrate, hydrate,
@ -7,7 +5,6 @@ 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 Providers from './query-provider' import Providers from './query-provider'
import Search from './search' import Search from './search'
@ -16,30 +13,23 @@ export const metadata = {
description: 'I have followed setup instructions carefully', description: 'I have followed setup instructions carefully',
} }
// const queryClient = new QueryClient() import "./global.css"
export default function RootLayout({ export default function RootLayout({
children, children,
}: { }: {
children: React.ReactNode children: React.ReactNode
}) { }) {
// const [queryClient] = useState(() => new QueryClient())
return ( return (
<html lang="en"> <html lang="en">
<head> <head>
<ColorSchemeScript /> <ColorSchemeScript />
</head> </head>
{/* <header> */}
{/* <Search /> */}
{/* </header> */}
<body> <body>
{/* can add a theme */}
{/* <QueryClientProvider client={queryClient}> */}
<Providers> <Providers>
<MantineProvider>{children}</MantineProvider> <MantineProvider>{children}</MantineProvider>
</Providers> </Providers>
{/* </QueryClientProvider> */}
</body> </body>
</html> </html>
) )