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"
import React, { useState } from 'react'
import { Box, Container, Paper, Table, Button, TextInput, useMantineTheme, Flex, Image, Grid } from '@mantine/core'
import Example from './query'
// import { Image as NextImage } from 'next/image'
import { Box, Container, Paper, Table, Button, TextInput, useMantineTheme, Flex, Image, Grid, Space, Divider } from '@mantine/core'
import NextImage from 'next/image'
import Prawn from "../images/aussietigerprawns.jpg"
// import Prawn from "/aussietigerprawns.jpg"
interface InventoryItem {
id: number
@ -18,9 +14,6 @@ interface InventoryItem {
async function fetchBlob(url: string) {
const response = await fetch(url)
// Here is the significant part
// reading the stream as a blob instead of json
return response.blob()
}
@ -56,7 +49,7 @@ export default function InventoryPage() {
return (
<Box>
<Container size="md" >
<Paper >
{/* <Paper >
<Table>
<thead>
<tr>
@ -77,9 +70,11 @@ export default function InventoryPage() {
))}
</tbody>
</Table>
</Paper>
</Paper> */}
<Flex style={{ marginTop: theme.spacing.md }}>
{/* use a grid */}
<Flex gap="md" style={{ marginTop: theme.spacing.md }}>
<TextInput
label="Item name"
placeholder="Enter item name"
@ -102,80 +97,29 @@ export default function InventoryPage() {
</Flex>
</Container>
{/* <Grid>
<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.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 }}>
<Grid gutter={{ base: 5, xs: 'md', md: 'xl', xl: 'xl' }}>
<Grid.Col span={{ base: 6, md: 2, lg: 1 }}>
<NextImage width={150} src={Prawn} alt="ITEM" />
</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" />
</Grid.Col>
<Grid.Col span={{ base: 16, md: 2, lg: 1 }}>
{/* <NextImage width={500} src={Prawn} alt="ITEM" /> */}
{/* <img src="../images/aussietigerprawns.jpg" alt="hi"/> */}
<Grid.Col span={{ base: 6, md: 2, lg: 1 }}>
<NextImage width={150} src={Prawn} alt="ITEM" />
</Grid.Col>
<Grid.Col span={{ base: 6, md: 2, lg: 1 }}>
<NextImage width={150} src={Prawn} alt="ITEM" />
</Grid.Col>
</Grid>
<Grid>
{/* <Grid>
<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 }}>3</Grid.Col>
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>4</Grid.Col>
</Grid>
</Grid> */}
<Flex
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>
{/* why is there a scroll area on the grid */}
</Box>
)
}

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

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