diff --git a/pos-frontend/app/inventory/page.tsx b/pos-frontend/app/inventory/page.tsx index 1388bf9..f720283 100644 --- a/pos-frontend/app/inventory/page.tsx +++ b/pos-frontend/app/inventory/page.tsx @@ -1,7 +1,7 @@ "use client" import React, { useState } from 'react' -import { Container, Paper, Table, Button, TextInput, useMantineTheme, Flex, Image } from '@mantine/core' +import { Box, Container, Paper, Table, Button, TextInput, useMantineTheme, Flex, Image } from '@mantine/core' import Example from './query' interface InventoryItem { @@ -49,7 +49,7 @@ export default function InventoryPage() { } return ( - <> + @@ -110,6 +110,6 @@ export default function InventoryPage() { - + ) } diff --git a/pos-frontend/app/layout.tsx b/pos-frontend/app/layout.tsx index c7b50a8..47aabff 100644 --- a/pos-frontend/app/layout.tsx +++ b/pos-frontend/app/layout.tsx @@ -9,6 +9,7 @@ import { import { ColorSchemeScript, MantineProvider } from '@mantine/core' // import { useState } from 'react' import Providers from './query-provider' +import Search from './search' export const metadata = { title: 'My Mantine app', @@ -29,6 +30,9 @@ export default function RootLayout({ + {/*
*/} + {/* */} + {/*
*/} {/* can add a theme */} {/* */} diff --git a/pos-frontend/app/search.tsx b/pos-frontend/app/search.tsx new file mode 100644 index 0000000..a87d879 --- /dev/null +++ b/pos-frontend/app/search.tsx @@ -0,0 +1,52 @@ +"use client" + +import React, { useState } from 'react' +import Fuse from 'fuse.js' + +const data = [ + { title: 'Document 1', content: 'Content of document 1', url: '/inventory' }, + { title: 'Document 2', content: 'Content of document 2', url: '/about' }, +] + +const fuse = new Fuse(data, { + keys: ['title', 'content'], +}) + +const Search = () => { + const [query, setQuery] = useState('') + const [results, setResults] = useState([]) + + const handleSearch = (event: any) => { + const { value } = event.target + setQuery(value) + if (value.trim()) { + const searchResults = fuse.search(value).map(({ item }) => item) + setResults(searchResults) + } else { + setResults([]) + } + } + + return ( +
+ + +
+ ) +} + +export default Search \ No newline at end of file diff --git a/pos-frontend/next.config.js b/pos-frontend/next.config.js new file mode 100644 index 0000000..85b40ad --- /dev/null +++ b/pos-frontend/next.config.js @@ -0,0 +1,10 @@ +// @ts-check + +/** @type {import('next').NextConfig} */ +const nextConfig = { + experimental: { + optimizePackageImports: ['@mantine/core', '@mantine/hooks'], + } +} + +module.exports = nextConfig diff --git a/pos-frontend/package.json b/pos-frontend/package.json index 14e2056..806807f 100644 --- a/pos-frontend/package.json +++ b/pos-frontend/package.json @@ -41,6 +41,7 @@ "dayjs": "^1.11.11", "embla-carousel-react": "^8.0.2", "framer-motion": "^11.0.25", + "fuse.js": "^7.0.0", "level-rocksdb": "^5.0.0", "next": "^14.1.4", "nodejs-polars": "^0.11.0", diff --git a/pos-frontend/pnpm-lock.yaml b/pos-frontend/pnpm-lock.yaml index 808f184..46ab167 100644 --- a/pos-frontend/pnpm-lock.yaml +++ b/pos-frontend/pnpm-lock.yaml @@ -98,6 +98,9 @@ importers: framer-motion: specifier: ^11.0.25 version: 11.1.7(@emotion/is-prop-valid@1.2.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + fuse.js: + specifier: ^7.0.0 + version: 7.0.0 level-rocksdb: specifier: ^5.0.0 version: 5.0.0 @@ -3575,6 +3578,10 @@ packages: functions-have-names@1.2.3: resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==} + fuse.js@7.0.0: + resolution: {integrity: sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==} + engines: {node: '>=10'} + gensync@1.0.0-beta.2: resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==} engines: {node: '>=6.9.0'} @@ -10122,7 +10129,7 @@ snapshots: eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) eslint-plugin-jsx-a11y: 6.8.0(eslint@8.57.0) eslint-plugin-react: 7.34.1(eslint@8.57.0) eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0) @@ -10146,7 +10153,7 @@ snapshots: enhanced-resolve: 5.16.0 eslint: 8.57.0 eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) fast-glob: 3.3.2 get-tsconfig: 4.7.3 is-core-module: 2.13.1 @@ -10168,7 +10175,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0): + eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): dependencies: array-includes: 3.1.8 array.prototype.findlastindex: 1.2.5 @@ -10436,6 +10443,8 @@ snapshots: functions-have-names@1.2.3: {} + fuse.js@7.0.0: {} + gensync@1.0.0-beta.2: {} get-caller-file@2.0.5: {}