implemented alias component import

db.json

@@ -67,19 +67,19 @@
       "userid": "42f0",
       "selected": [
         {
-          "row": 7,
+          "row": 6,
           "seat": 1
         },
         {
-          "row": 7,
+          "row": 6,
           "seat": 2
         },
         {
-          "row": 7,
+          "row": 6,
           "seat": 3
         },
         {
-          "row": 7,
+          "row": 6,
           "seat": 4
         }
       ]
@@ -119,6 +119,20 @@
           "seat": 6
         }
       ]
+    },
+    {
+      "id": "e770",
+      "userid": "e770",
+      "selected": [
+        {
+          "row": 7,
+          "seat": 2
+        },
+        {
+          "row": 7,
+          "seat": 3
+        }
+      ]
     }
   ]
 }
\ No newline at end of file

jsconfig.json

+{
+  "compilerOptions": {
+    "baseUrl": "src",
+    "paths": {
+      "@components/*": ["components/*"]
+    }
+  },
+  "include": ["src"]
+}

src/components/Layout/BookingWrapper/Index.jsx

 import PropTypes from 'prop-types';
 import Seat from './Seat';
 import styles from './styles.module.css';
+import Button from '../../Base/Button/Index';
 
 const BookingWrapper = ({
   selectedSeats,
   seatData,
   currentSeats,
   onSeatAdd,
-  onSeatRemove
+  onSeatRemove,
+  onSeatsConfirm,
+  buttonState
 }) => {
   const handleSeatClick = (row, seat, status) => {
     if (status == 'current-selected') {
@@ -73,6 +76,11 @@ const BookingWrapper = ({
             })}
           </div>
         ))}
+        <div className={styles['btn-wrapper']}>
+          <Button size={'lg'} onClick={onSeatsConfirm} disabled={buttonState}>
+            Confirm
+          </Button>
+        </div>
       </div>
     </div>
   );
@@ -99,5 +107,7 @@ BookingWrapper.propTypes = {
     })
   ),
   onSeatAdd: PropTypes.func.isRequired,
-  onSeatRemove: PropTypes.func.isRequired
+  onSeatRemove: PropTypes.func.isRequired,
+  onSeatsConfirm: PropTypes.func.isRequired,
+  buttonState: PropTypes.bool.isRequired
 };

src/components/Layout/BookingWrapper/styles.module.css

@@ -4,6 +4,8 @@
   align-items: center;
   flex-direction: column;
   gap: 10px;
+  background-color: #3444c5;
+  padding-bottom: 0rem;
 }
 
 .seat-row {
@@ -45,6 +47,10 @@
   width: 100%;
 }
 
+.btn-wrapper {
+  padding: 1em 0;
+}
+
 @media screen and (min-width: 768px) {
   .seat {
     width: 1.8em;

src/components/Layout/Header/styles.module.css

@@ -4,6 +4,7 @@
   align-items: center;
   width: 100%;
   gap: 1rem;
+  background-color: #3444c5;
 }
 
 .title {

src/components/Shared/LogoutButton/LogoutButton.stories.jsx

@@ -5,7 +5,7 @@ export default {
   component: LogoutButton,
   argTypes: {
     onLogout: {
-      action: 'hello'
+      action: 'Logout'
     }
   }
 };

src/components/TopLevel/LegendWrapper/styles.module.css

 .LegendWrapper {
   display: flex;
-  background-color: #3444c5;
   gap: 1rem;
   justify-content: center;
-  padding: 1em 0;
+  background-color: #3444c5;
+  padding: 1rem 0;
 }
 
 @media screen and (min-width: 768px) {

src/components/TopLevel/Login/styles.module.css

@@ -8,7 +8,6 @@
   align-items: center;
   font-family: 'Segoe UI', sans-serif;
   height: 100vh;
-  background-color: #3444c5;
 }
 
 .container {

src/components/TopLevel/SeatSelectionContent/Index.jsx

@@ -5,7 +5,7 @@ import Button from '../../Base/Button/Index';
 import Modal from '../../Shared/Modal/Index';
 import styles from './styles.module.css';
 
-const Index = ({ onChange, onConfirm, disabled }) => {
+const Index = ({ onChange, onConfirm }) => {
   const [isDisabled, setIsDisabled] = useState(true);
 
   const handleInputChange = (e) => {

src/index.css

 @import '../src/assets/fonts.css';
 
-body{
+body {
   margin: 0;
 }
 
-html,body{
+html,
+body {
   height: 100%;
   width: 100%;
 }
 
-#root{
+#root {
   height: 100%;
   width: 100%;
-}
\ No newline at end of file
+  background-color: #3444c5;
+}

src/pages/BookingPage/Index.jsx

 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import BookingWrapper from '../../components/Layout/BookingWrapper/Index';
-import Header from '../../components/Layout/Header/Index';
-import ConfirmSeatContent from '../../components/TopLevel/ConfirmSeatContent/Index';
-import SeatSelectionContent from '../../components/TopLevel/SeatSelectionContent/Index';
-import SuccessModal from '../../components/TopLevel/SuccessModal/Index';
-import Button from '../../components/Base/Button/Index';
-import LegendWrapper from '../../components/TopLevel/LegendWrapper/Index';
-import LogoutButton from '../../components/Shared/LogoutButton/Index';
+import BookingWrapper from '@components/Layout/BookingWrapper/Index';
+import Header from '@components/Layout/Header/Index';
+import ConfirmSeatContent from '@components/TopLevel/ConfirmSeatContent/Index';
+import SeatSelectionContent from '@components/TopLevel/SeatSelectionContent/Index';
+import SuccessModal from '@components/TopLevel/SuccessModal/Index';
+import LegendWrapper from '@components/TopLevel/LegendWrapper/Index';
+import LogoutButton from '@components/Shared/LogoutButton/Index';
 
 import { getItem, reset, setItem } from '../../lib/localStorage';
 import { appConstants } from '../../lib/AppConstants';
@@ -18,9 +17,6 @@ import {
   createSeatApi
 } from '../../lib/api';
 
-import img from '../../assets/images/power-button_12080802.png';
-import styles from './styles.module.css';
-
 const data = [
   ['*', 1, 2, 3, '*', 4, 5, 6, '*'],
   [1, 2, 3, 4, '*', 5, 6, 7, 8],
@@ -95,13 +91,13 @@ const BookingPage = () => {
     }
   };
 
-  const modalClose = () => {
+  const handleSeatSelectionConfirm = () => {
     setItem('modal', false);
     fetchSelectedSeats();
     setShowSeatsModal(false);
   };
 
-  const finalCancel = () => {
+  const handleModalCancel = () => {
     setShowSeatsConfirmationModal(false);
   };
 
@@ -145,7 +141,7 @@ const BookingPage = () => {
     setShowSeatsConfirmationModal(true);
   };
 
-  const seatsFinal = async () => {
+  const handleSeatBooking = async () => {
     try {
       const data = await getSelectedSeatsApi();
       const existingUserSeatMap = data?.find((ele) => ele.id == userId);
@@ -173,45 +169,36 @@ const BookingPage = () => {
   };
 
   return (
-    <div className={styles['seat-booking-wrapper']}>
-      {/* <img
-        src={img}
-        className={styles['logout']}
-        width={30}
-        onClick={() => logout()}
-        title="Logout"
-      /> */}
-      <LogoutButton />
-      <div className={styles['screen-wrapper']}>
-        <Header>Choose Seats</Header>
-        <BookingWrapper
-          seatData={data}
-          selectedSeats={selectedSeats}
-          currentSeats={currentSeats}
-          onSeatRemove={handleSeatRemove}
-          onSeatAdd={handleSeatAdd}
-        />
-      </div>
-      <div className={styles['btn-wrapper']}>
-        <Button size={'lg'} onClick={handleSeatsConfirm} disabled={buttonState}>
-          Confirm
-        </Button>
-      </div>
+    <>
+      <LogoutButton onLogout={logout} />
+      <Header>Choose Seats</Header>
+      <BookingWrapper
+        seatData={data}
+        selectedSeats={selectedSeats}
+        currentSeats={currentSeats}
+        onSeatRemove={handleSeatRemove}
+        onSeatAdd={handleSeatAdd}
+        onSeatsConfirm={handleSeatsConfirm}
+        buttonState={buttonState}
+      />
       <LegendWrapper />
       {showSeatsModal && (
         <SeatSelectionContent
           onChange={onModalChange}
-          onConfirm={modalClose}
+          onConfirm={handleSeatSelectionConfirm}
           disabled={modalButtonState}
         />
       )}
       {showSeatsConfirmationModal && (
-        <ConfirmSeatContent onConfirm={seatsFinal} onCancel={finalCancel} />
+        <ConfirmSeatContent
+          onConfirm={handleSeatBooking}
+          onCancel={handleModalCancel}
+        />
       )}
       {showSuccessModal && (
         <SuccessModal onConfirm={handleSuccessModalConfirm} />
       )}
-    </div>
+    </>
   );
 };
 

src/pages/BookingPage/styles.module.css

-.seat-booking-wrapper {
-  box-sizing: border-box;
-  flex-direction: column;
-  display: flex;
-  justify-content: space-evenly;
-  background-color: #3444c5;
-  height: 100%;
-  overflow-y: auto;
-  width: 100%;
-}
-.screen-wrapper {
-  padding: 0.5em 0;
-}
-
-.btn-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1em 0;
-}
-
-.logout {
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  cursor: pointer;
-}

src/pages/LoginPage/Index.jsx

 import { useNavigate } from 'react-router-dom';
-import Login from '../../components/TopLevel/Login/Index';
+import Login from '@components/TopLevel/Login/Index';
 import { login, createUser, getSelectedSeatsApi } from '../../lib/api';
 import { setItem } from '../../lib/localStorage';
 

vite.config.js

-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+  resolve: {
+    alias: {
+      '@components': path.resolve(__dirname, 'src/components')
+      // Add more aliases as needed
+    }
+  }
+});