Merge branch 'navbar'

apps/frontend-bff/src/app/app.tsx

@@ -1,7 +1,7 @@
 import NxWelcome from './nx-welcome';
 
 import { Link, Route, Routes } from 'react-router-dom';
-import { LandingPage, Offers, UiCommon,Orders, GroupBilling, Summary } from '@spos/ui/common';
+import { LandingPage, Offers, UiCommon,Orders, GroupBilling, Summary, NavBar } from '@spos/ui/common';
 
 export function App() {
   return (
@@ -19,6 +19,7 @@ export function App() {
           }
         />
         <Route path="/orders" element={<Orders />} />
+        <Route path="/navbar" element={<NavBar />} />
         <Route path="/groupBilling" element={<GroupBilling />} />
 
       </Routes>

libs/ui/common/src/index.ts

@@ -3,4 +3,8 @@ export * from './lib/tables/landingPage';
 export * from './lib/offers/offers';
 export * from './lib/orders/orders';
 export * from './lib/summary/summary';
+<<<<<<< HEAD
 export * from './lib/groupBillingPage/groupBillingPage';
+=======
+export * from './lib/utils/navbar';
+>>>>>>> navbar

libs/ui/common/src/lib/orders/orders.css

@@ -19,8 +19,9 @@
     color: white;
     z-index: 1000; 
     animation: fadeIn 0.5s ease-in-out;
-    border-top-left-radius: 80px;
-    border-top-right-radius: 80px;
+    border-top-left-radius: 90px;
+    border-top-right-radius: 90px;
+    padding-top: 40px; 
 }
 
 .close-button {

libs/ui/common/src/lib/orders/orders.tsx

@@ -2,7 +2,7 @@ import './orders.css';
 import { Button, Typography, Box } from "@mui/material";
 import { useState } from 'react';
 import Section from './section';
-
+import BackButton from '../utils/backButton';
 
 export function Orders() {
     const [open, setOpen] = useState(false);
@@ -33,37 +33,80 @@ export function Orders() {
     return (
         <Box margin={10} marginTop="20vw">
             <Box className="bottom-button">
-                <Button variant="contained" onClick={togglePopup} sx={{ width: 500 }}>
+            <Button
+                    onClick={togglePopup}
+                    variant="contained"
+                    color="primary"
+                    style={{
+                        padding: '20px 50px', 
+                        borderRadius: '50px',  
+                        fontSize: '4vw',     
+                    }}
+                    >
                     Orders
                 </Button>
             </Box>
 
             {open && (
                 <Box className="popup-fullscreen">
-                    <Button variant="contained" onClick={togglePopup} className="close-button">
+                    <BackButton onClick={() => setOpen(false)} /> 
+                    <Typography align='center'  
+                                variant="h1" 
+                                component="h2" 
+                                fontSize="7.5vw" 
+                                fontWeight="bold"
+                                style={{ color: 'black' }}>
                         Orders
+<<<<<<< HEAD
                     </Button>
 
                     <Box sx={{
                         display: 'flex',
                         flexDirection: 'column',
+=======
+                    </Typography>
+
+                    <Box sx={{ 
+                        display: 'flex', 
+                        flexDirection: 'column', 
+>>>>>>> navbar
                         alignItems: 'flex-start',
-                        mt: 15,
-                        pl: 2,
-                        maxHeight: '80vh',
-                        overflowY: 'auto'
+                        mt: 4,
+                        pl: 0,
+
                     }}>
+                        <Box width='90%' 
+                            marginLeft='5%' 
+                            bgcolor='#FFFFFF' 
+                            height="62vh"
+                            sx={{
+                                overflowY: 'auto', 
+                                maxHeight: '62vh', 
+                                padding: 2,        
+                            }}>
+
                         {Object.keys(ordersData).map((section) => (
                             <Section
                                 key={section}
                                 title={section.charAt(0).toUpperCase() + section.slice(1)}
                                 orders={ordersData[section]}
                             />
                         ))}
+                        </Box>
+
                     </Box>
 
                     <Box className="bottom-button">
-                        <Button variant="contained" sx={{ width: 500 }}>
+                        <Button
+                        variant="contained"
+
+                        style={{
+                            backgroundColor: '#003366',
+                            padding: '20px 50px', 
+                            borderRadius: '50px',  
+                            fontSize: '4vw',     
+                        }}
+                        >
                             Serve
                         </Button>
                     </Box>

libs/ui/common/src/lib/utils/backButton.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Button } from '@mui/material';
+import { ArrowBack } from '@mui/icons-material';
+
+const BackButton = ({ onClick }) => {
+    return (
+        <Button
+            onClick={onClick} 
+            style={{
+                position: 'absolute',
+                top: 20,
+                left: 20,
+                color: 'white' 
+            }}
+        >
+            <ArrowBack style={{ fontSize: '70px' }} />
+        </Button>
+    );
+};
+
+export default BackButton;

libs/ui/common/src/lib/utils/navbar.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { Box, Button, Typography } from '@mui/material';
+
+const tables = [
+    { id: 1 },
+    { id: 2 },
+    { id: 3 },
+    { id: 4 },
+];
+
+export function NavBar() {
+    const [selectedTable, setSelectedTable] = useState(1);
+
+    return (
+        <Box sx={{ display: 'flex', height: '100vh', alignItems: 'flex-start',backgroundColor: 'lightgray', }}>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+                {tables.map((table) => (
+                    <Button
+                        key={table.id}
+                        variant="contained"
+                        onClick={() => setSelectedTable(table.id)} 
+                        sx={{
+                            width: selectedTable === table.id ? '120px' : '100px', 
+                            height: '100px',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            borderRadius: selectedTable === table.id ? '8px 0 0 8px' : '8px', 
+                            backgroundColor: selectedTable === table.id ? '#003367' : 'green', 
+                            color: 'white',
+                            marginRight: selectedTable === table.id ? '0' : '0px', 
+                        }}
+                    >
+                        <Typography variant="h6">{table.id}</Typography>
+                    </Button>
+                ))}
+            </Box>
+            <Box
+                sx={{
+                    width: '14px', 
+                    height: '100vh',
+                    backgroundColor: '#003366',
+                    marginLeft: 0,
+                }}
+            />
+        </Box>
+    );
+}
+
+export default NavBar;