From 0692c34cf53af04e475b580a2680b70418efac93 Mon Sep 17 00:00:00 2001 From: Damian <37555910+DCRepublic@users.noreply.github.com> Date: Mon, 1 Apr 2024 19:45:39 -0400 Subject: [PATCH] formatting and errors --- src/app/(header)/admin/analytics/card.js | 1 - src/app/(header)/admin/analytics/page.tsx | 25 +- src/app/(header)/admin/calendar/page.tsx | 16 +- src/app/(header)/admin/menu/page.tsx | 89 ++---- src/app/(header)/admin/scratch/PD/page.tsx | 34 +- src/app/(header)/admin/staff/page.tsx | 4 +- src/app/(header)/kitchen_display/actions.ts | 1 - src/app/(header)/kitchen_display/page.tsx | 186 ++++++----- src/app/(header)/layout.tsx | 7 +- src/app/(header)/point_of_sale/navBarPOS.js | 13 +- .../(header)/point_of_sale/page.module.css | 1 - src/app/(header)/point_of_sale/page.tsx | 118 +++---- src/app/(header)/point_of_sale/pageold.tsx | 26 +- src/app/api/cal/route.js | 11 +- src/app/api/orders/route.ts | 2 - src/app/api/print/route.tsx | 1 - src/app/components/bottomBar.tsx | 146 +++++++++ src/app/components/labelAvatar.js | 2 +- src/app/components/topBar.tsx | 299 ++++++++---------- src/app/layout.tsx | 11 +- src/app/login/layout.tsx | 2 +- src/app/login/page.tsx | 1 - src/app/order_display/dr_display/page.tsx | 30 +- src/app/order_display/page.tsx | 14 +- src/app/page.tsx | 8 +- 25 files changed, 507 insertions(+), 541 deletions(-) create mode 100644 src/app/components/bottomBar.tsx diff --git a/src/app/(header)/admin/analytics/card.js b/src/app/(header)/admin/analytics/card.js index f807985..98b9c41 100644 --- a/src/app/(header)/admin/analytics/card.js +++ b/src/app/(header)/admin/analytics/card.js @@ -1,7 +1,6 @@ // Admin Analytics import { Typography, CardContent, Card, CardActions } from '@mui/material'; import styles from './page.module.css'; -import { TrendingUp, TrendingDown } from '@mui/icons-material'; import { useTheme } from '@mui/material/styles'; export default function BasicCard({ title, data, up }) { diff --git a/src/app/(header)/admin/analytics/page.tsx b/src/app/(header)/admin/analytics/page.tsx index a5b1aaf..239f0c7 100644 --- a/src/app/(header)/admin/analytics/page.tsx +++ b/src/app/(header)/admin/analytics/page.tsx @@ -1,21 +1,16 @@ // Admin Analytics 'use client'; -import { Grid, Container, Box, Fade } from '@mui/material'; -import styles from './page.module.css'; -import { LineChart } from '@mui/x-charts/LineChart'; -import BasicCard from './card.js'; -import LabelAvatar from '@/app/components/labelAvatar.js'; +import { Box, Container, Grid } from '@mui/material'; import { BarChart } from '@mui/x-charts/BarChart'; -import { axisClasses } from '@mui/x-charts'; import dayjs, { Dayjs } from 'dayjs'; +import BasicCard from './card.js'; +import styles from './page.module.css'; -import { PieChart, pieArcLabelClasses, pieArcClasses } from '@mui/x-charts/PieChart'; import { useTheme } from '@mui/material/styles'; -import React, { useState, useEffect, useRef } from 'react'; -import moment from 'moment'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { DatePicker } from '@mui/x-date-pickers/DatePicker'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import React, { useEffect } from 'react'; import useSWR from 'swr'; @@ -39,8 +34,8 @@ export default function Analytics() { let tempTotal = 0; let tempDaily = 0; let tempDailyOrders = 0; - let labels: any = {}; - let values: any = []; + const labels: any = {}; + const values: any = []; for (const order of data.orders) { //(order); @@ -59,11 +54,11 @@ export default function Analytics() { }; const pieChart = async () => { - let labels: any = {}; + const labels: any = {}; if (isLoading == false && !error) { data2 = []; - let filteredOrders = data.orders.filter((a: any) => { + const filteredOrders = data.orders.filter((a: any) => { return dayjs(currentDaySelected).isSame(dayjs(a.createdAt), 'day'); }); @@ -102,7 +97,7 @@ export default function Analytics() { }); return ( - + fetch(url).then((res) => res.json()); -import LabelAvatar from '@/app/components/labelAvatar'; -import { AnyARecord } from 'dns'; export default function Home() { const { data, error, isLoading } = useSWR('/api/cal', fetcher, { refreshInterval: 1000 }); @@ -29,7 +21,7 @@ export default function Home() { } return ( - + fetch(url).then((res) => res.json()); @@ -207,7 +184,7 @@ export default function Home() { } }); } else if (windowTitle == 'New Item') { - let temp = Object.assign({}, SelectedItem); + const temp = Object.assign({}, SelectedItem); temp._id = temp.friendlyName.replace(/\s+/g, '-').toLowerCase(); await axios.post('/api/dishes', temp).then((response) => { @@ -224,7 +201,7 @@ export default function Home() { }; const newOption = () => { - let temp = Object.assign([], SelectedItem.options); + const temp = Object.assign([], SelectedItem.options); temp.push(blankOption); @@ -399,8 +376,8 @@ export default function Home() { }; const handleSpecificOptionUpdate = (option_id: any, value: any, text: any) => { - let theItem = Object.assign({}, SelectedItem); - let index = theItem.options.findIndex((option: any) => option._id == option_id); + const theItem = Object.assign({}, SelectedItem); + const index = theItem.options.findIndex((option: any) => option._id == option_id); for (const option of theItem.options) { if (index != -1) { @@ -524,7 +501,7 @@ export default function Home() { }; return ( - + @@ -565,7 +542,7 @@ export default function Home() { - + {!open ? ( diff --git a/src/app/(header)/admin/scratch/PD/page.tsx b/src/app/(header)/admin/scratch/PD/page.tsx index e99e42b..3289ee2 100644 --- a/src/app/(header)/admin/scratch/PD/page.tsx +++ b/src/app/(header)/admin/scratch/PD/page.tsx @@ -1,19 +1,17 @@ -'use client' -import { Grid } from "@mui/material"; -import FullCalendar from '@fullcalendar/react' -import dayGridPlugin from '@fullcalendar/daygrid' // a plugin! +'use client'; +import FullCalendar from '@fullcalendar/react'; +import dayGridPlugin from '@fullcalendar/daygrid'; // a plugin! -export default function personalPD(){ - return ( - - ); - -} \ No newline at end of file +export default function personalPD() { + return ( + + ); +} diff --git a/src/app/(header)/admin/staff/page.tsx b/src/app/(header)/admin/staff/page.tsx index df1332a..29e7478 100644 --- a/src/app/(header)/admin/staff/page.tsx +++ b/src/app/(header)/admin/staff/page.tsx @@ -1,5 +1,5 @@ 'use client'; -import { Grid, Avatar, Container, Typography, Chip } from '@mui/material'; +import { Grid, Avatar, Container, Chip } from '@mui/material'; import styles from './page.module.css'; import LabelAvatar from '@/app/components/labelAvatar'; import { @@ -7,11 +7,9 @@ import { GridRowsProp, GridColDef, gridClasses, - GridToolbar, GridToolbarColumnsButton, GridToolbarContainer, GridToolbarExport, - GridCsvExportOptions, GridToolbarDensitySelector, } from '@mui/x-data-grid'; diff --git a/src/app/(header)/kitchen_display/actions.ts b/src/app/(header)/kitchen_display/actions.ts index 504809f..ad25a66 100644 --- a/src/app/(header)/kitchen_display/actions.ts +++ b/src/app/(header)/kitchen_display/actions.ts @@ -1,6 +1,5 @@ 'use server'; -import { Any } from '@react-spring/web'; export const connect = async (ePosDev: any, ePosDevice: any, PRINTER_IP: any, printerPort: any) => { //setConnectionStatus('Connecting ...'); console.log(ePosDev); diff --git a/src/app/(header)/kitchen_display/page.tsx b/src/app/(header)/kitchen_display/page.tsx index 4dcb58f..3e21780 100644 --- a/src/app/(header)/kitchen_display/page.tsx +++ b/src/app/(header)/kitchen_display/page.tsx @@ -4,12 +4,9 @@ THEN... In the backend change around the api to accept a list of the already for THEN... CRY */ 'use client'; -import React, { useRef, useState } from 'react'; -import { Box, Card, CardHeader, Container, Typography, useTheme, Slide } from '@mui/material'; +import React, { useRef } from 'react'; +import { Box, Card, CardHeader, Container, Typography, useTheme } from '@mui/material'; import { - Table, - TableBody, - TableContainer, FormGroup, FormControlLabel, Switch, @@ -18,27 +15,20 @@ import { Chip, Grid, Badge, - TextField, Divider, - ImageListItem, - ImageList, } from '@mui/material'; -import { Sensors, Print, Update } from '@mui/icons-material'; +import { Print, Update } from '@mui/icons-material'; import { Masonry } from '@mui/lab'; -import CardContent from '@mui/material/CardContent'; -import styles from '../page.module.css'; import axios from 'axios'; import Script from 'next/script'; import moment from 'moment'; import useSWR from 'swr'; -import { gridColumnGroupsLookupSelector } from '@mui/x-data-grid'; -import { disposeEmitNodes } from 'typescript'; const fetcher = (url: any) => fetch(url).then((res) => res.json()); export default function Home() { const theme = useTheme(); - + const [windowSize, setWindowSize]: any[] = React.useState([]); const { data, error, isLoading } = useSWR('/api/orders', fetcher, { refreshInterval: 1000 }); //axios.get('/api/dishes').then((reponse) => console.log(reponse)); const ePosDevice = useRef(); @@ -67,7 +57,7 @@ export default function Home() { const connect = async () => { setConnectionStatus('Connecting ...'); - let ePosDev = new window.epson.ePOSDevice(); + const ePosDev = new window.epson.ePOSDevice(); ePosDevice.current = ePosDev; await ePosDev.connect(PRINTER_IP, printerPort, (data: any) => { @@ -91,8 +81,7 @@ export default function Home() { }); }; React.useEffect(() => { - // - //console.log(window.epson.ePOSDevice()); + setWindowSize([window.innerWidth, window.innerHeight]); }, []); function queueDelete(item: any) { @@ -113,11 +102,15 @@ export default function Home() { } const orders = []; filteredOrders = filteredOrders.sort((a: any, b: any) => { - let a2 = moment(a.createdAt); - let b2 = moment(b.createdAt); + const a2 = moment(a.createdAt); + const b2 = moment(b.createdAt); return b2.diff(a2); }); + filteredOrders = filteredOrders.filter((a: any) => { + return moment().isSame(moment(a.createdAt), 'day'); + }); + for (const item of filteredOrders) { const status = item.status; let statusColor = 'grey'; @@ -131,73 +124,65 @@ export default function Home() { } orders.push( - <> - - - + + + - - {item.customerName} - - - - - - - - - + {item.customerName} + + + + + + + - - - {deleteSwitch ? ( - - - - ) : null} - - - - - + ) : null} + + + + - - - - , + + + + , ); } @@ -207,10 +192,10 @@ export default function Home() { const DishAndOptions = (props: any) => { let options = []; - let DishAndOptions = []; + const DishAndOptions = []; - for (let item of props.dishes) { - for (let option of item.options) { + for (const item of props.dishes) { + for (const option of item.options) { options.push( <> @@ -286,10 +271,10 @@ export default function Home() { const completeOrder = async (item: any) => { //PRINT2(item); const url = '/api/orders/' + item._id; - let theitem = Object.assign({}, item); + const theitem = Object.assign({}, item); - let foodies = Object.assign({}, theitem); - let drinkies = Object.assign({}, theitem); + const foodies = Object.assign({}, theitem); + const drinkies = Object.assign({}, theitem); foodies['dishes'] = theitem.dishes.filter((item: any) => item.tag == 'food'); drinkies['dishes'] = theitem.dishes.filter((item: any) => item.tag == 'drink'); if (foodies.dishes.length > 0) { @@ -311,7 +296,7 @@ export default function Home() { //PRINT2(item); const url = '/api/orders/' + SelectedOrder._id; - let theitem = Object.assign({}, SelectedOrder); + const theitem = Object.assign({}, SelectedOrder); await axios.delete(url, theitem).then((response) => { console.log(response); @@ -321,7 +306,7 @@ export default function Home() { const updateOrder = async (item: any) => { const url = '/api/orders/' + item._id; - let theitem = Object.assign({}, item); + const theitem = Object.assign({}, item); if (theitem.status == 'new') { theitem.status = 'in_progress'; @@ -329,6 +314,12 @@ export default function Home() { console.log(response); }); } + if (theitem.status == 'in_progress') { + theitem.status = 'completed'; + await axios.put(url, theitem).then((response) => { + console.log(response); + }); + } /* else if (theitem['status'] == 'in_progress') { @@ -343,7 +334,7 @@ export default function Home() { }; return ( -
+ {deleteMe ? ( <> @@ -408,11 +399,14 @@ export default function Home() { - - - - - -
+ + + + ); } diff --git a/src/app/(header)/layout.tsx b/src/app/(header)/layout.tsx index 89595af..3f854f5 100644 --- a/src/app/(header)/layout.tsx +++ b/src/app/(header)/layout.tsx @@ -1,7 +1,7 @@ -import { Grid, Toolbar, Typography, Button, Container } from '@mui/material'; -import { useSession } from 'next-auth/react'; +import { Container } from '@mui/material'; import { redirect } from 'next/navigation'; import { config } from '@/app/lib/auth'; +import BottomNavigation from '@/app/components/bottomBar'; import { getServerSession } from 'next-auth/next'; export default async function SideBar({ children }: { children: React.ReactNode }) { @@ -12,7 +12,8 @@ export default async function SideBar({ children }: { children: React.ReactNode if (session) { return (
- {children} + + {children}
); } diff --git a/src/app/(header)/point_of_sale/navBarPOS.js b/src/app/(header)/point_of_sale/navBarPOS.js index a77b492..6d39bab 100644 --- a/src/app/(header)/point_of_sale/navBarPOS.js +++ b/src/app/(header)/point_of_sale/navBarPOS.js @@ -9,25 +9,16 @@ import { Typography, Drawer, ListItemButton, - Card, IconButton, Container, } from '@mui/material'; import { useTheme } from '@mui/material/styles'; -import { - Menu, - Insights, - Settings, - CalendarMonth, - Home, - Person, - ArrowBackIos, -} from '@mui/icons-material'; +import { Insights, Settings, CalendarMonth, Home, Person, ArrowBackIos } from '@mui/icons-material'; import MenuIcon from '@mui/icons-material/Menu'; -import { useRouter, usePathname } from 'next/navigation'; +import { useRouter } from 'next/navigation'; /* New box in the sub global on click fly out card with 3 sub links diff --git a/src/app/(header)/point_of_sale/page.module.css b/src/app/(header)/point_of_sale/page.module.css index 8b13789..e69de29 100644 --- a/src/app/(header)/point_of_sale/page.module.css +++ b/src/app/(header)/point_of_sale/page.module.css @@ -1 +0,0 @@ - diff --git a/src/app/(header)/point_of_sale/page.tsx b/src/app/(header)/point_of_sale/page.tsx index 6311c5e..711bbc8 100644 --- a/src/app/(header)/point_of_sale/page.tsx +++ b/src/app/(header)/point_of_sale/page.tsx @@ -1,44 +1,31 @@ 'use client'; +import Printer from '@/app/components/printer'; +import DeleteIcon from '@mui/icons-material/Delete'; import { + Alert, Box, + Button, Card, CardContent, + CircularProgress, Container, - Typography, - Button, + Divider, + Fade, Grid, + IconButton, + InputBase, List, + ListItem, ListItemButton, - CircularProgress, ListItemText, - Divider, - ListItem, - Tabs, Tab, - IconButton, - Alert, - InputBase, - TextField, - Fade, + Tabs, + Typography, } from '@mui/material'; -import DeleteIcon from '@mui/icons-material/Delete'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; -import { orange, cyan, blueGrey } from '@mui/material/colors'; -import React, { useState, useEffect, useRef } from 'react'; -import { - BreakfastDiningOutlined, - FmdGoodSharp, - LegendToggle, - NoFoodSharp, -} from '@mui/icons-material'; -import { AnyKeys, ConnectionStates } from 'mongoose'; -import { Rock_3D } from 'next/font/google'; import axios from 'axios'; -import useSWR from 'swr'; import moment from 'moment'; -import { Dictionary } from '@fullcalendar/core/internal'; -import Printer from '@/app/components/printer'; -import { setIPCookie, getIPCookie } from './action'; +import React, { useEffect, useRef, useState } from 'react'; +import useSWR from 'swr'; const fetcher = (url: any) => fetch(url).then((res) => res.json()); @@ -95,7 +82,7 @@ export default function App() { //const ip = await getIPCookie(); // Set_PRINTERIP(ip); setConnectionStatus('Connecting ...'); - let ePosDev = new window.epson.ePOSDevice(); + const ePosDev = new window.epson.ePOSDevice(); ePosDevice.current = ePosDev; await ePosDev.connect(PRINTER_IP, printerPort, (data: any) => { @@ -261,7 +248,7 @@ export default function App() { __v: 0, }, */ //let temp = Object.assign({}, item); - let temp = { + const temp = { _uuid: index, _id: item._id, friendlyName: item.friendlyName, @@ -273,7 +260,7 @@ export default function App() { setIndex(index + 1); - let editedOrder = Array.from(currentOrder); + const editedOrder = Array.from(currentOrder); editedOrder.push(temp); //console.log('EDITED ORDER', editedOrder); setCurrentOrder(editedOrder); @@ -287,12 +274,12 @@ export default function App() { //setOptions(false); //console.log('props to follow'); //console.log(props); - let temp = Object.assign([], currentOrder); + const temp = Object.assign([], currentOrder); //this finds the first match, but we want it to delete current item! //fix later by making sure ALL fields match for (const thing of currentOrder) { if (thing == props) { - let index = temp.indexOf(thing); + const index = temp.indexOf(thing); temp.splice(index, 1); //setOptions(false); //console.log('options set to false'); @@ -305,10 +292,10 @@ export default function App() { }; const removeOption = async (itemToRemoveFrom: any, optionToRemove: any) => { - let temp = Object.assign([], currentOrder); + const temp = Object.assign([], currentOrder); const index = currentOrder.findIndex((item: any) => item._uuid == itemToRemoveFrom._uuid); - let optionIndex = currentOrder[index].options.findIndex( + const optionIndex = currentOrder[index].options.findIndex( (item: any) => item._id == optionToRemove._id, ); @@ -340,7 +327,7 @@ export default function App() { //handleClose(); //Current order should just be a mirror of the dishes array You will attach below each order is simply a dish object. - let thing1 = { + const thing1 = { customerName: name, total: runningTotal, hidden: false, @@ -348,7 +335,7 @@ export default function App() { dishes: currentOrder, }; - let toPrintServer = { + const toPrintServer = { customerName: name, total: runningTotal, hidden: false, @@ -361,14 +348,14 @@ export default function App() { //break food and drinks into seperate lists so that they can each be on their own recipts. - let foodies = { + const foodies = { customerName: name, total: runningTotal, hidden: false, notes: '', dishes: currentOrder.filter((item: any) => item.tag == 'food'), }; - let drinkies = { + const drinkies = { customerName: name, total: runningTotal, hidden: false, @@ -390,45 +377,17 @@ export default function App() { //console.log(thing1); + //Send order to db await axios.post('/api/orders', thing1).then((response) => { if (response.status == 200) { - console.log('order confirmed!: ' + name); - /* - handleClose(); - setSuccess(true); - setTimeout(handleSuccess, 3000); - setCurrentOrder([]); - setName(''); - setRunningTotal(0); - setOneCard(''); - setOptions(false); - - */ - /* - if (foodies.dishes.length > 0) { - PRINT2(foodies); - } - if (drinkies.dishes.length > 0) { - PRINT2(drinkies); - }*/ - } else { - console.log('failed'); - - setFailure(true); - setTimeout(handleFailure, 3000); - } - }); - - await axios.post('/api/print', toPrintServer).then((response) => { - if (response.status == 200) { - setSuccess(true); - setTimeout(handleSuccess, 3000); } else { + console.log('failed to send order to backend'); setFailure(true); setTimeout(handleFailure, 3000); } }); + //Check if there is still more to pay if (currentOrder.total - 7 > 0 && paymentType == 'swipe') { setPayMore(true); } else { @@ -441,10 +400,21 @@ export default function App() { setOneCard(''); setOptions(false); } + + //Send order to print server/tablet + await axios.post('/api/print', toPrintServer).then((response) => { + if (response.status == 200) { + setSuccess(true); + setTimeout(handleSuccess, 3000); + } else { + setFailure(true); + setTimeout(handleFailure, 3000); + } + }); }; const pay2 = async (name: string, paymentType: string) => { - let toPrintServer2 = { + const toPrintServer2 = { customerName: name, total: runningTotal, hidden: false, @@ -536,10 +506,10 @@ export default function App() { const OptionsComponent = (props: any) => { const specific = []; - let item = data.dishes.filter((item: any) => item.friendlyName == props.friendlyName); + const item = data.dishes.filter((item: any) => item.friendlyName == props.friendlyName); for (const option of item) { - let temp: any = option.options; + const temp: any = option.options; for (const subOption of temp) { const multi = subOption.allowQuantity; @@ -562,9 +532,9 @@ export default function App() { const index = currentOrder.findIndex((item: any) => item._uuid == _uuid); setCurrentDish(currentOrder[index]); - let theOptions: any = Array.from(currentOrder[index].options); + const theOptions: any = Array.from(currentOrder[index].options); theOptions.push(option); - let editedOrder: any = Array.from(currentOrder); + const editedOrder: any = Array.from(currentOrder); editedOrder[index].options = theOptions; //editedOrder[currentOrder.length - 1] = editedDish; setCurrentOrder(editedOrder); diff --git a/src/app/(header)/point_of_sale/pageold.tsx b/src/app/(header)/point_of_sale/pageold.tsx index cb70239..32e5041 100644 --- a/src/app/(header)/point_of_sale/pageold.tsx +++ b/src/app/(header)/point_of_sale/pageold.tsx @@ -2,15 +2,13 @@ //You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. //Learn more: https://nextjs.org/docs/getting-started/react-essentials -import { Box, Card, CardHeader, Container, Typography, Button, Grid, AppBar } from '@mui/material'; -import Toolbar from '@mui/material/Toolbar'; -import IconButton from '@mui/material/IconButton'; import MenuIcon from '@mui/icons-material/Menu'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; -import { orange, cyan, blueGrey } from '@mui/material/colors'; -import React, { useState, useEffect } from 'react'; -import { LegendToggle } from '@mui/icons-material'; -import { AnyKeys } from 'mongoose'; +import { AppBar, Box, Button, Card, Container, Grid, Typography } from '@mui/material'; +import { blueGrey, cyan, orange } from '@mui/material/colors'; +import IconButton from '@mui/material/IconButton'; +import { createTheme } from '@mui/material/styles'; +import Toolbar from '@mui/material/Toolbar'; +import React, { useEffect, useState } from 'react'; export default function App() { const [user, setUser] = useState('izzy'); @@ -54,9 +52,9 @@ export default function App() { }; const renderFoodButtons = () => { - let buttons = []; - for (var prop in dict) { - let currentDish = prop; + const buttons = []; + for (const prop in dict) { + const currentDish = prop; buttons.push( + + + ); + nameButton = session.user?.name; + } else { + authenticated = false; + loginLink = <>; + nameButton = 'Log In'; + } + } + + const [anchorElNav, setAnchorElNav] = React.useState(null); + const [anchorElUser, setAnchorElUser] = React.useState(null); + const pathname = usePathname(); + const [value, setValue] = React.useState('recents'); + + const handleChange = (event: React.SyntheticEvent, newValue: string) => { + setValue(newValue); + }; + + const handleOpenNavMenu = (event: React.MouseEvent) => { + setAnchorElNav(event.currentTarget); + }; + + const handleOpenUserMenu = (event: React.MouseEvent) => { + if (authenticated) { + setAnchorElUser(event.currentTarget); + } + }; + + const handleCloseNavMenu = (page: any) => { + setAnchorElNav(null); + }; + React.useEffect(() => { + setWindowSize([window.innerWidth, window.innerHeight]); + }, []); + + return ( + <> + {authenticated && windowSize[0] <= 600 ? ( + + + } + LinkComponent={Link} + href="/" + /> + } + /> + } + /> + } + /> + } + /> + + + ) : null} + + ); +} +export default BottomBar; diff --git a/src/app/components/labelAvatar.js b/src/app/components/labelAvatar.js index 048f924..b12962e 100644 --- a/src/app/components/labelAvatar.js +++ b/src/app/components/labelAvatar.js @@ -1,6 +1,6 @@ //Top Bar 'use client'; -import { Avatar, Grid, Typography } from '@mui/material'; +import { Typography } from '@mui/material'; import { useTheme } from '@mui/material/styles'; export default function LabelAvatar({ title }) { diff --git a/src/app/components/topBar.tsx b/src/app/components/topBar.tsx index 519bda6..3a5c3de 100644 --- a/src/app/components/topBar.tsx +++ b/src/app/components/topBar.tsx @@ -1,22 +1,17 @@ 'use client'; -import React, { useState, useEffect, useRef } from 'react'; +import React from 'react'; import AppBar from '@mui/material/AppBar'; import Box from '@mui/material/Box'; import Toolbar from '@mui/material/Toolbar'; -import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; import Menu from '@mui/material/Menu'; -import MenuIcon from '@mui/icons-material/Menu'; import Container from '@mui/material/Container'; -import Avatar from '@mui/material/Avatar'; import Button from '@mui/material/Button'; -import Tooltip from '@mui/material/Tooltip'; import MenuItem from '@mui/material/MenuItem'; import CookieIcon from '@mui/icons-material/Cookie'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; import { useSession } from 'next-auth/react'; -import { useLayoutEffect } from 'react'; const pages = [ { name: 'POS', link: '/point_of_sale' }, @@ -28,6 +23,8 @@ const pages = [ const settings: any = []; function ResponsiveAppBar(props: any) { + const [windowSize, setWindowSize]: any[] = React.useState([]); + const { data: session, status } = useSession(); const handleCloseUserMenu = () => { @@ -64,6 +61,11 @@ function ResponsiveAppBar(props: any) { const [anchorElNav, setAnchorElNav] = React.useState(null); const [anchorElUser, setAnchorElUser] = React.useState(null); const pathname = usePathname(); + const [value, setValue] = React.useState('recents'); + + const handleChange = (event: React.SyntheticEvent, newValue: string) => { + setValue(newValue); + }; const handleOpenNavMenu = (event: React.MouseEvent) => { setAnchorElNav(event.currentTarget); @@ -78,89 +80,65 @@ function ResponsiveAppBar(props: any) { const handleCloseNavMenu = (page: any) => { setAnchorElNav(null); }; + React.useEffect(() => { + setWindowSize([window.innerWidth, window.innerHeight]); + }, []); return ( - - - - - - CRUMB CAFE{' '} - + <> + + + + + + CRUMB CAFE + - - - CRUMB CAFE - + + + CRUMB CAFE + - - {authenticated ? ( - <> - - - - - + + {authenticated ? ( + <> + {pages.map((page) => ( - + {pathname == page.link ? ( + + ) : ( + + )} ))} - - - - {pages.map((page) => ( - - {pathname == page.link ? ( - - ) : ( - - )} - - ))} - - - ) : ( - <> - )} - - - - - - + + + ) : ( + <> + )} + - - {/* - {settings.map((setting: any) => ( - - {setting} - - ))} - - */} + + + + - {loginLink} - - - - - + + {loginLink} + + + + + + ); } export default ResponsiveAppBar; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a7581e2..b178f95 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,9 +1,10 @@ 'use client'; import ThemeRegistry from './ThemeRegistry'; import { NextAuthProvider } from './NextAuthProvider'; -import { NextURL } from 'next/dist/server/web/next-url'; import Script from 'next/script'; import Navigation from '@/app/components/topBar'; +import BottomNavigation from '@/app/components/bottomBar'; + import { usePathname } from 'next/navigation'; export default function RootLayout({ children }: { children: React.ReactNode }) { @@ -25,10 +26,10 @@ export default function RootLayout({ children }: { children: React.ReactNode }) - <> - {pathname != '/order_display' && } - {children} - + + {pathname != '/order_display' && } + + {children} diff --git a/src/app/login/layout.tsx b/src/app/login/layout.tsx index 5c58501..66d4d3a 100644 --- a/src/app/login/layout.tsx +++ b/src/app/login/layout.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Grid, AppBar, Toolbar, IconButton, Typography, Button, Container } from '@mui/material'; +import { Grid, AppBar, Toolbar, Typography, Button, Container } from '@mui/material'; //import Navigation from './navBarPOS.js'; import Navigation from '@/app/components/topBar'; diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index edbc5b0..f268da3 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -1,7 +1,6 @@ 'use client'; import React from 'react'; import { TextField, Button, Typography, Grid, Card } from '@mui/material'; -import styles from './page.module.css'; import { useSession } from 'next-auth/react'; export default function Login() { diff --git a/src/app/order_display/dr_display/page.tsx b/src/app/order_display/dr_display/page.tsx index 21ee550..ed5690b 100644 --- a/src/app/order_display/dr_display/page.tsx +++ b/src/app/order_display/dr_display/page.tsx @@ -1,32 +1,12 @@ 'use client'; import React from 'react'; -import { Box, Card, CardHeader, Container, Typography, useTheme, Slide } from '@mui/material'; -import { - Table, - TableBody, - TableCell, - TableContainer, - TableHead, - TableRow, - Paper, - ButtonGroup, - Button, - Chip, - Grid, - List, - ListItem, - ListItemAvatar, - Divider, - ListItemText, - Drawer, -} from '@mui/material'; +import { Card, Container, Typography } from '@mui/material'; +import { ButtonGroup, Button, Chip, Grid } from '@mui/material'; import { Close, Update } from '@mui/icons-material'; import CardContent from '@mui/material/CardContent'; -import styles from '../page.module.css'; import axios from 'axios'; import useSWR from 'swr'; -import { gridColumnGroupsLookupSelector } from '@mui/x-data-grid'; const fetcher = (url: any) => fetch(url).then((res) => res.json()); @@ -120,7 +100,7 @@ export default function Home() { const Options = (props: any) => { const options = []; const specific = []; - for (let item of props.options) { + for (const item of props.options) { options.push( <> @@ -143,7 +123,7 @@ export default function Home() { const completeOrder = async (item: any) => { const url = '/api/orders/' + item._id; - let theitem = Object.assign({}, item); + const theitem = Object.assign({}, item); theitem['updates'].push({ _id: theitem['_id'], @@ -160,7 +140,7 @@ export default function Home() { const updateOrder = async (item: any) => { const url = '/api/orders/' + item._id; - let theitem = Object.assign({}, item); + const theitem = Object.assign({}, item); if (theitem['status'] == 'new') { theitem['updates'].push({ diff --git a/src/app/order_display/page.tsx b/src/app/order_display/page.tsx index c8f8362..b2fac96 100644 --- a/src/app/order_display/page.tsx +++ b/src/app/order_display/page.tsx @@ -2,28 +2,16 @@ import { Box, Card, - CardHeader, Container, Typography, List, ListItem, Divider, ListItemAvatar, - Avatar, ListItemText, } from '@mui/material'; -import { - Table, - TableBody, - TableCell, - TableContainer, - TableHead, - TableRow, - Paper, -} from '@mui/material'; + import Grid from '@mui/material/Unstable_Grid2'; // Grid version 2 -import CardContent from '@mui/material/CardContent'; -import styles from '../page.module.css'; import useSWR from 'swr'; diff --git a/src/app/page.tsx b/src/app/page.tsx index 58d8463..b519ea8 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,13 +1,7 @@ 'use client'; -import { Container, Typography, Grid, Card, CardContent, CardActionArea } from '@mui/material'; -import CrumbParticles from './components/particles'; -import { useRouter } from 'next/navigation'; +import { Typography, Grid, Card } from '@mui/material'; import styles from './page.module.css'; -import { getServerSession } from 'next-auth/next'; -import { redirect } from 'next/navigation'; import Link from 'next/link'; -import { useTheme } from '@mui/material'; -import Navigation from '@/app/components/topBar'; // Home.displayName = 'Home';