feat(frontend-workflow): Addition of group billing page

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, Summary } from '@spos/ui/common';
+import { LandingPage, Offers, UiCommon,Orders, GroupBilling, Summary } from '@spos/ui/common';
 
 export function App() {
   return (
@@ -19,6 +19,7 @@ export function App() {
           }
         />
         <Route path="/orders" element={<Orders />} />
+        <Route path="/groupBilling" element={<GroupBilling />} />
 
       </Routes>
       {/* END: routes */}

libs/ui/common/src/index.ts

@@ -2,4 +2,5 @@ export * from './lib/ui-common';
 export * from './lib/tables/landingPage';
 export * from './lib/offers/offers';
 export * from './lib/orders/orders';
-export * from './lib/summary/summary';
+export * from './lib/summary/summary';
+export * from './lib/groupBillingPage/groupBillingPage';

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

@@ -0,0 +1,90 @@
+html {
+  min-height: 100%;
+  width: 100%;
+  padding: 0;
+}
+
+body {
+  background-color: #d9d9d9;
+  font-family: 'Montserrat', sans-serif;
+  margin: 0;
+  padding: 0;
+
+  min-height: 100vh;
+  width: 100%;
+}
+
+#billing-container {
+  padding-top: 8dvh;
+  padding-left: 5dvw;
+  padding-right: 5dvw;
+
+  min-height: 100vh;
+  width: 100%;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+h2 {
+  font-weight: normal; /* You can change to 400 for regular weight */
+  font-size: 5vw;
+  padding-left: 100px;
+}
+
+#table-title {
+  text-decoration: underline;
+}
+
+#billing-section {
+  margin-top: 2vw;
+}
+
+#billing-section > div:not(:first-child) {
+  margin-top: 2dvh;
+}
+
+table {
+  width: 100%;
+}
+
+table > tbody > tr {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-left: 3dvw;
+}
+
+td {
+  font-weight: 400;
+  font-size: 3vw;
+
+  align-items: center;
+}
+
+#summary-section {
+  padding-left: 5dvw;
+  padding-right: 5dvw;
+  padding-top: 1vw;
+
+  background-color: #d9d9d9; /* Ajoute un fond clair */
+  padding-bottom: 3vh;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid rgba(0, 0, 0, 1); /* Couleur de la ligne de séparation */
+  margin: 20px 0;
+}
+
+#summary-section > div {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#summary-section > div > p {
+  font-size: 3vw;
+}

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

@@ -0,0 +1,75 @@
+import './groupBillingPage.css';
+import { Button, Typography, Box } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+
+export function GroupBilling() {
+  const navigate = useNavigate();
+  const billingData = [
+    {
+      number : 1,
+      elements : [
+        {quantity : 1, item: {id: 1, name: "Coca", price: 1.5}},
+        {quantity : 2, item: {id: 2, name: "Fried chicken", price: 4.35}}
+      ]
+    },
+    {
+      number : 2,
+      elements : [
+        {quantity : 1, item: {id: 3, name: "Orangina", price: 1.5}},
+        {quantity : 6, item: {id: 4, name: "Mozzarella stick", price: 1}}
+      ]
+    }
+  ];
+
+  const totalPrice = billingData.reduce((total, { elements }) => {
+    return total + elements.reduce((sum, { quantity, item }) => {
+      return sum + quantity * item.price;
+    }, 0);
+  }, 0);
+
+  const validatePayment = () => {
+    console.log({totalPrice})
+    navigate("/")
+}
+
+  return (
+    <div id='billing-container' className='container'>
+      <Box className="group-billing">
+        <Typography align='left'  variant="h1" component="h2" fontSize="8vw" fontWeight="bold">
+          Billing
+        </Typography>
+        <div id="billing-section">
+          {billingData.map(table => (
+            <div key={table.number}>
+              <Typography id='table-title' align='left'  variant="h3" component="h3" fontSize="5vw" fontWeight="bold" >
+                {"Table " + table.number}
+              </Typography>
+              <table>
+                {table.elements.map(element => (
+                  <tbody key={element.item.id}>
+                    <tr>
+                      <td>{element.quantity} x {element.item.name}</td>
+                      <td>{element.quantity * element.item.price}$</td>
+                    </tr>
+                  </tbody>
+                ))}
+              </table>
+            </div>
+          ))}
+        </div>
+      </Box>
+      <Box id="summary-section">
+        <hr />
+        <div>
+          <p>Total : {totalPrice}$</p>
+          <Button onClick={validatePayment} variant="contained" color="inherit"
+            style={{padding: '20px 50px', borderRadius: '50px', fontSize: '4vw'}}>
+            Paid
+          </Button>
+        </div>
+      </Box>
+    </div>
+  );
+}
+
+export default GroupBilling;

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

@@ -43,25 +43,25 @@ export function Orders() {
                     <Button variant="contained" onClick={togglePopup} className="close-button">
                         Orders
                     </Button>
-                    
-                    <Box sx={{ 
-                        display: 'flex', 
-                        flexDirection: 'column', 
+
+                    <Box sx={{
+                        display: 'flex',
+                        flexDirection: 'column',
                         alignItems: 'flex-start',
                         mt: 15,
                         pl: 2,
                         maxHeight: '80vh',
                         overflowY: 'auto'
                     }}>
                         {Object.keys(ordersData).map((section) => (
-                            <Section 
-                                key={section} 
-                                title={section.charAt(0).toUpperCase() + section.slice(1)} 
-                                orders={ordersData[section]} 
+                            <Section
+                                key={section}
+                                title={section.charAt(0).toUpperCase() + section.slice(1)}
+                                orders={ordersData[section]}
                             />
                         ))}
                     </Box>
-                    
+
                     <Box className="bottom-button">
                         <Button variant="contained" sx={{ width: 500 }}>
                             Serve