code changes

src/Components/Auth/Auth.jsx

 import { useState, useEffect } from "react";
-import styles from "./Auth.module.css";
+import styles from "@/Components/Auth/Auth.module.css";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 

src/Components/Auth/Auth.module.css

@@ -23,7 +23,7 @@ body{
 }
 
 .header {
-  font-size: 1.5rem;
+  font-size: 1.5em;
   font-weight: bold;
   margin-bottom: 1.563rem;
 }
@@ -66,7 +66,7 @@ body{
 .forgotLink {
   display: block;
   color: #004e92;
-  font-size: 13px;
+  font-size:0.813em;
   text-align: right;
   text-decoration: none;
   position: relative;
@@ -77,7 +77,7 @@ body{
 
 .signupPrompt {
   margin-top: 1rem;
-  font-size: 0.813rem;
+  font-size: 0.813em;
   color: #333;
 }
 

src/Components/Auth/Auth.stories.jsx

-import { Auth } from "./Auth.jsx";
-import { Login } from "../Form/Login/Login.jsx";
-import { SignUp } from "../Form/SignUp/SignUp.jsx";
+import { Auth } from "@/Components/Auth/Auth.jsx";
+import { Login } from "@/Components/Form/Login/Login.jsx";
+import { SignUp } from "@/Components/Form/SignUp/SignUp.jsx";
 import { action } from "@storybook/addon-actions";
 
 export default {

src/Components/Base/Buttons/Button.jsx

 import PropTypes from 'prop-types';
-import styles from './Button.module.css';
+import styles from '@/Components/Base/Buttons/Button.module.css';
 import clsx from 'clsx';
 
 export const Button = ({ variant, size, label, loading, ...props }) => {

src/Components/Base/Buttons/Button.module.css

-/* 
-.primary{
- padding: 12px 0;
-  background-color: #5b9bd5;
-  color: white;
-  font-size: 1rem;
-  font-weight: 600;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-  min-width: 25rem;
-}
-.secondary{
-    padding: 12px; 
-    min-width: 12rem;
-    border-radius: 15px;
-    border: none;
-    font-size: 18px;
-    font-weight: 600;
-    cursor: pointer;
-}
-.Logout{
-   padding: 12px; 
-    min-width: 5rem;
-    border-radius: 15px;
-    border: none;
-    font-size: 16px;
-    font-weight: 600;
-    cursor: pointer;
-    position: relative;
-    right:1rem;
-    top:10px;
-}
-.Increment{
-    padding: 10px;
-    width: 4.5rem;
-}
-.Decrement{
-    padding: 10px;
-    width: 3.5rem;
-} */
+
  .buttoncolumn {
   display: flex;
   flex-direction: column;
@@ -49,7 +8,7 @@
 
 .button {
   font-weight: 700;
-  font-size: 1rem;
+  font-size: 1em;
   border: none;
   cursor: pointer;
   transition: background-color 0.3s ease;
@@ -66,11 +25,11 @@
 }
 
 .primary:hover {
-  background-color: var(--primary);
+  opacity: 0.8;
 }
 
 .primary:disabled {
-  background-color: #a0c4e3;
+  opacity: 0.5;
   cursor: not-allowed;
   opacity: 0.7;
 
@@ -85,7 +44,7 @@
 }
 
 .secondary:hover { 
-  background-color: #e0e0e0;
+  opacity: 0.5;
 }
 
 .secondary:disabled {
@@ -95,18 +54,18 @@
 
 
 .sm {
-  font-size: 0.875rem;
+  font-size: 0.875em;
   padding: 0.5rem 1rem;
 }
 
 .md {
-  font-size: 1.2rem;
+  font-size: 1.2em;
   padding: 0.75rem 1.25rem;
 }
 .lg {
-  font-size: 1.125rem;
+  font-size: 1.125em;
   padding: 1rem 1.5rem;
 }
 .loading{
-  cursor: wait !important;
+  cursor: wait;
 }
\ No newline at end of file

src/Components/Base/Buttons/Button.stories.jsx

-import { Button } from './Button';
-import styles from '../Buttons/Button.module.css';
+import { Button } from '@/Components/Base/Buttons/Button.jsx';
+import styles from '@/Components/Base/Buttons/Button.module.css';
 export default {
   title: 'Base/Button',
   component: Button,

src/Components/Base/Input/Input.jsx

-import styles from "./Input.module.css"
+import styles from "@/Components/Base/Input/Input.module.css";
+import clsx from 'clsx';
 export const Input =({type='text',placeholder='',isInvalid=false,onChange,value='',errorMessage="",...props}) => {
   return (
     <div >
-      <input className={`${styles.inputbox} ${isInvalid && styles.invalid}`} type={type} placeholder={placeholder}  onChange={onChange} {...props}/>
+      <input className={clsx(styles.inputbox,isInvalid && styles.invalid) } type={type} placeholder={placeholder}  onChange={onChange} {...props}/>
       {errorMessage && <p className={styles.error} style={{
         color:'red'
       }}>{errorMessage}</p>}

src/Components/Base/Input/Input.module.css

 .inputbox{
  padding: 0.75rem 0.875rem;
-  font-size: 1rem;
+  font-size: 1em;
   border: 1px solid #ccc;
   border-radius: 6px;
   outline-offset: 2px;
@@ -9,21 +9,15 @@
   width:100%;
   box-sizing: border-box;
 }
-/* .count{
-   padding:10px;
-   min-width: 10px;
-   width: 5rem;
-} */
+
 
 .invalid{
    border: 1px solid red;
 }
 .invalid:focus{
-   outline-color: red;
+   outline-color: rgb(233, 129, 129);
 }
 .error{
-   /* margin-top: 10px; */
    font-size: small;
-   font-family: 'Segoe UI';
    text-align: left;
 }
\ No newline at end of file

src/Components/Base/Input/Input.stories.jsx

-import { Input } from "./Input";
+import { Input } from "@/Components/Base/Input/Input.jsx";
 
 export default {
   title: "Base/Input",

src/Components/Base/Modal/Modal.jsx

-import styles from "../Modal/Modal.module.css";
+import styles from "@/Components/Base/Modal/Modal.module.css";
 
 export const Modal = ({
   title = "Choose the Number of Seats",

src/Components/Base/Modal/Modal.module.css

@@ -8,7 +8,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 1000;
+  z-index: 0;
   padding: 1rem;
   box-sizing: border-box;
 }
@@ -22,12 +22,12 @@
   width: 100%;
   margin-inline: 1rem;
   position: relative;
-  z-index: 1001;
+  z-index: 1;
   box-sizing: border-box;
 }
 
 .modalheading {
-  font-size: 1.5rem;
+  font-size: 1.5em;
   font-weight: 600;
   text-align: center;
   color: #1f2937;
@@ -45,7 +45,7 @@
   padding: 10px;
   border: 1px solid #d1d5db;
   border-radius: 0.5rem;
-  font-size: 1rem;
+  font-size: 1em;
   outline: none;
   transition: border-color 0.3s;
   width: 100%;
@@ -56,19 +56,5 @@
   border-color: #2563eb;
 }
 
-.modalbutton {
-  background-color: #2563eb;
-  color: white;
-  padding: 0.625rem;
-  border: none;
-  border-radius: 0.5rem;
-  font-size: 1rem;
-  cursor: pointer;
-  transition: background-color 0.3s;
 
-  width: 100%;
-}
 
-.modalbutton:hover {
-  background-color: #1d4ed8;
-}

src/Components/Base/Modal/Modal.stories.jsx

-import { Modal } from "./Modal";
-import { SeatSelectForm } from "../../Form/SeatSelectForm/SeatSelectForm";
+import { Modal } from "@/Components/Base/Modal/Modal.jsx";
+import { SeatSelectForm } from "@/Components/Form/SeatSelectForm/SeatSelectForm";
 export default {
   title: "Base/Modal",
   component: Modal,

src/Components/Base/Select/Select.jsx

-import styles from '../Select/Select.module.css';
+import styles from '@/Components/Base/Select/Select.module.css';
 
 export const Select = ({ label, options, value, onChange }) => {
   return (

src/Components/Base/Select/Select.module.css

@@ -2,16 +2,17 @@
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  font-family: Arial, sans-serif;
 }
 
 .label {
   font-weight: bold;
 }
-
+.select:focus{
+  outline-color:var(--primary);
+}
 .select {
   padding: 0.6rem;
-  font-size: 1rem;
+  font-size: 1em;
   border-radius: 4px;
   
    appearance: none;

src/Components/Base/Select/Select.stories.jsx

 import React from 'react';
-import { Select } from './Select';
+import { Select } from '@/Components/Base/Select/Select.jsx';
 
 export default {
   title: 'Base/Select',
   component: Select,
   argTypes: {
-    label: { control: 'text' }, // Makes 'label' editable in Storybook controls
+    label: { control: 'text' },
     onChange: { action: 'onChange'},
   },
 };

src/Components/Form/Login/Login.jsx

 import { useState } from "react";
-import { Input } from "../../Base/Input/Input";
-import { Button } from "../../Base/Buttons/Button";
-import styles from "./Login.module.css";
+import { Input } from "@/Components/Base/Input/Input";
+import { Button } from "@/Components//Base/Buttons/Button";
+import styles from "@/Components/Form/Login/Login.module.css";
 
 export const Login = ({
   loginHeading = "Login With Your Mobile Number",
@@ -48,13 +48,6 @@ export const Login = ({
 
   return (
     <div className={styles.formcontainer}>
-      {/* <div className={styles.leftcontainer}>
-        <h1 className={styles.text}>{heading}</h1>
-        <p className={styles.content}>{description}</p>
-        <button>{buttonLabel}</button>
-      </div> */}
-
-        {/* <h2 className={styles.headerNew}>{loginHeading}</h2> */}
         <form className={styles.form} onSubmit={handleSubmit}>
           <div className={styles.input}>
             <Input

src/Components/Form/Login/Login.module.css

 
 .formcontainer {
-  /* max-width: 400px; */
-  /* margin: 60px auto; */
-  /* padding: 24px 32px; */
-  /* border: 1px solid #ddd; */
   border-radius: 8px;
-  /* background-color: #fff; */
-  /* box-shadow: 0 2px 8px rgba(0,0,0,0.1); */
-
-
 }
-
 .headerNew {
-  font-size: 1.7rem;
+  font-size: 1.7em;
    font-family:'Segoe UI';
   color: black;
   margin-bottom: 1.5rem;
   text-align: center;
 }
-
 .form {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }
 
-.form input[type="text"]:focus {
-  border-color: #5b9bd5;
-}
-
-.form button:hover {
-  background-color:rgb(52, 74, 199);
-}

src/Components/Form/Login/Login.stories.jsx

-import { Login } from "./Login";
-
+import { Login } from "@/Components/Form/Login/Login.jsx";
+import { action } from '@storybook/addon-actions';
 export default {
   title: "Form/Login",
   component: Login,
    parameters: {
-    backgrounds: { default: 'light',value:'F8F8F8' }
-  },
-  argTypes: {
-    onLogin: {
-      action: "clicked",
-    },
+    backgrounds: { default: 'light' }
   },
+  // argTypes: {
+  //   onLogin: {
+  //     action: "onLogin",
+  //   },
+  // },
 };
 
 export const LoginForm = {
   args: {
     loginHeading: "Login With Your Mobile Number",
     placeholder: "Enter Mobile Number",
+    onLogin:(e)=>action("clicked")(e),
+
   },
   render: (args) => <Login {...args} />,
 };

src/Components/Form/SeatSelectForm/SeatSelectForm.jsx

-import styles from "../../Form/SeatSelectForm/SeatSelectForm.module.css"
-import {Select} from "../../Base/Select/Select.jsx"
-import {Button} from "../../Base/Buttons/Button.jsx"
+import styles from "@/Components/Form/SeatSelectForm/SeatSelectForm.module.css"
+import {Select} from "@/Components/Base/Select/Select.jsx"
+import {Button} from "@/Components/Base/Buttons/Button.jsx"
 import PropTypes from "prop-types";
 
 export const SeatSelectForm = ({ seatOptions, seatCount, setSeatCount, onClose }) => {

src/Components/Form/SeatSelectForm/SeatSelectForm.module.css

@@ -6,32 +6,6 @@
   min-width: auto;
 }
 
-.modalselect {
-  padding: 10px;
-  border: 1px solid #d1d5db;
-  border-radius: 8px;
-  font-size: 16px;
-  outline: none;
-  transition: border-color 0.3s;
-  width: 100%;
-  box-sizing: border-box;
-}
 
-.modalselect:focus {
-  border-color: #2563eb;
-}
 
-.modalbutton {
-  background-color: #2563eb;
-  color: white;
-  padding: 0.625rem;
-  border: none;
-  border-radius: 0.5rem;
-  font-size: 1rem;
-  cursor: pointer;
-  transition: background-color 0.3s;
-}
 
-.modalbutton:hover {
-  background-color: #1d4ed8;
-}

src/Components/Form/SeatSelectForm/SeatSelectForm.stories.jsx

 import React from "react";
-import { SeatSelectForm } from "../../Form/SeatSelectForm/SeatSelectForm.jsx";
+import { SeatSelectForm } from "@/Components/Form/SeatSelectForm/SeatSelectForm.jsx";
 import { action } from "@storybook/addon-actions";
 
 const seatOptions = [

src/Components/Form/SignUp/SignUp.jsx

 import React, { useState } from 'react';
-import { Input } from '../../Base/Input/Input';
-import { Button } from '../../Base/Buttons/Button';
-import styles from './SignUp.module.css';
+import { Input } from '@/Components/Base/Input/Input';
+import { Button } from '@/Components/Base/Buttons/Button';
+import styles from "@/Components/Form/SignUp/SignUp.module.css";
 import { getUserByPhone } from '../../../Api/userApi';
-import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
 export const SignUp = ({
@@ -13,50 +12,43 @@ export const SignUp = ({
   emailPlaceholder = "Email",
   phonePlaceholder = "Phone Number",
 }) => {
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-  const [phoneNumber, setPhoneNumber] = useState('');
-  const [errors, setErrors] = useState({ name: '', email: '', phoneNumber: '' });
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    phoneNumber: '',
+  });
 
-  const handleNameChange = (e) => {
-    setName(e.target.value);
-    setErrors((prev) => ({ ...prev, name: '' }));
-  };
-
-  const handleEmailChange = (e) => {
-    setEmail(e.target.value);
-    setErrors((prev) => ({ ...prev, email: '' }));
-  };
+  const [errors, setErrors] = useState({
+    name: '',
+    email: '',
+    phoneNumber: '',
+  });
 
-  const handlePhoneChange = (e) => {
-    setPhoneNumber(e.target.value);
-    setErrors((prev) => ({ ...prev, phoneNumber: '' }));
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+    setErrors((prev) => ({ ...prev, [name]: '' }));
   };
 
   const validateForm = () => {
     const newErrors = {};
+    const { name, email, phoneNumber } = formData;
 
     if (!name.trim()) newErrors.name = 'Name is required';
 
     if (!email.trim()) {
       newErrors.email = 'Email is required';
-    } else {
-      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-      if (!emailRegex.test(email)) {
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
       newErrors.email = 'Enter a valid email address';
     }
-    }
 
     if (!phoneNumber.trim()) {
       newErrors.phoneNumber = 'Phone number is required';
     } else if (phoneNumber.length < 10) {
       newErrors.phoneNumber = 'Phone number must contain at least 10 digits';
-    } else {
-      const phoneRegex = /^\+?\d{10,15}$/;
-      if (!phoneRegex.test(phoneNumber)) {
+    } else if (!/^\+?\d{10,15}$/.test(phoneNumber)) {
       newErrors.phoneNumber = 'Phone number must contain only digits';
     }
-    }
 
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
@@ -64,11 +56,10 @@ export const SignUp = ({
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-
     if (!validateForm()) return;
 
     try {
-      const res = await getUserByPhone(phoneNumber);
+      const res = await getUserByPhone(formData.phoneNumber);
       if (res.data.length > 0) {
         setErrors((prev) => ({
           ...prev,
@@ -77,14 +68,10 @@ export const SignUp = ({
         return;
       }
 
-      const formData = { name, email, phoneNumber };
       await onSignUpSubmit?.(formData);
-
-      setName('');
-      setEmail('');
-      setPhoneNumber('');
+      setFormData({ name: '', email: '', phoneNumber: '' });
     } catch (error) {
-      toast.error("Something went wrong. Please try again.");
+      console.log(err);
     }
   };
 
@@ -95,25 +82,28 @@ export const SignUp = ({
           <form onSubmit={handleSubmit} className={styles.form}>
             <Input
               type="text"
+              name="name"
               placeholder={namePlaceholder}
-              value={name}
-              onChange={handleNameChange}
+              value={formData.name}
+              onChange={handleInputChange}
               errorMessage={errors.name}
               isInvalid={!!errors.name}
             />
             <Input
               type="text"
+              name="email"
               placeholder={emailPlaceholder}
-              value={email}
-              onChange={handleEmailChange}
+              value={formData.email}
+              onChange={handleInputChange}
               errorMessage={errors.email}
               isInvalid={!!errors.email}
             />
             <Input
               type="text"
+              name="phoneNumber"
               placeholder={phonePlaceholder}
-              value={phoneNumber}
-              onChange={handlePhoneChange}
+              value={formData.phoneNumber}
+              onChange={handleInputChange}
               errorMessage={errors.phoneNumber}
               isInvalid={!!errors.phoneNumber}
             />

src/Components/Form/SignUp/SignUp.module.css

 .SignUpContainer{
     width: 100%;
-  
 }
 .wrapper{
     background-color: white;
@@ -10,9 +9,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  /* padding: 1rem; */
  margin: 0 auto;
-  /* max-width: 30rem; */
   border-radius: 2rem;
   
 }
@@ -27,5 +24,4 @@
   flex-direction: column;
   gap: 1rem;
   min-width: 100%;
-
 }

src/Components/Form/SignUp/SignUp.stories.jsx

-import { SignUp } from "./SignUp.jsx";
+import { SignUp } from "@/Components/Form/SignUp/SignUp.jsx";
 import React from "react";
-
+import { action } from '@storybook/addon-actions';
 export default {
   title: "Form/SignUp",
   component: SignUp,
   parameters: {
     backgrounds: {
-      default: "white",
-      values: [
-        { name: "white", value: "#ffffff" },
-      ],
+      default: "light",
     },
     // layout: "fullscreen"
   },
   argTypes: {
-    onSignUpSubmit: { action: "submitted" },
+    // onSignUpSubmit: { action: "submitted" },
     label: { control: "text"},
     heading:{control:"text"},
     namePlaceholder: { control: "text", defaultValue: "Name" },
@@ -29,5 +26,6 @@ SignUpForm.args = {
   heading:"Create Account",
    namePlaceholder: "Name",
   emailPlaceholder: "Email",
-  phonePlaceholder: "Phone Number"
+  phonePlaceholder: "Phone Number",
+  onSignUpSubmit:(e)=>action("Clicked")(e),
 };

src/Components/Shared/Screen/Screen.stories.jsx

-import { Screen } from "./Screen";
+import { Screen } from "@/Components/Shared/Screen/Screen.jsx";
 
 export default {
   title: "Shared/Screen",
   component: Screen,
   parameters: {
     backgrounds: {
-      default: "blue-bg",
-      values: [{ name: "blue-bg", value: "#3444c5" }],
+      default: "secondary-bg"
     },
   },
   argTypes: {

src/Components/Top-level/Notification/Notification.jsx

 // Notification.jsx
 import PropTypes from "prop-types";
-import styles from "../Notification/Notification.module.css";
-import successImg from "../../../assets/success.png";
-import errorImg from "../../../assets/giferror.gif";
+import styles from "@/Components/Top-level/Notification/Notification.module.css";
+import successImg from "@/assets/success.png";
+import errorImg from "@/assets/giferror.gif";
 import cn from "classnames";
 
 export const Notification = ({ title, type, msg, button, seats }) => {

src/Components/Top-level/Notification/Notification.module.css

@@ -5,7 +5,7 @@
   top: 2rem;
   right: 1.5rem;
   color: white;
-  font-size: 2rem;
+  font-size: 2em;
 }
 
 .container {
@@ -26,24 +26,23 @@
 }
 
 .span {
-  font-size: 4rem;
+  font-size: 4em;
   margin-bottom: 0.5rem;
 }
 
 .title,
 .msg {
   color: #100f0f;
-  font-family: 'Segoe UI', sans-serif;
   font-weight: bold;
 }
 
 .title {
-  font-size: 1.5rem;
+  font-size: 1.5em;
   margin-bottom: 0.5em;
 }
 
 .msg {
-  font-size: 1.5rem;
+  font-size: 1.5em;
   margin: 0.5rem 0 2rem;
   line-height: 1.5;
 }
@@ -72,7 +71,7 @@
 .button button {
   width: 100%;
   padding: 0.75rem 1.5rem;
-  font-size: 1.1rem;
+  font-size: 1.1em;
   font-weight: bold;
   color: white;
   background-color: var(--primary);
@@ -87,10 +86,7 @@
   transform: translateY(-2px);
 }
 
-.button button:focus {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
-}
+
 
 @keyframes fadeIn {
   from {
@@ -150,7 +146,7 @@
   color: #0f5132;
   padding: 0.4rem 0.8rem;
   border-radius: 0.5rem;
-  font-size: 1rem;
+  font-size: 1em;
   font-weight: 500;
 }
 @media(min-width:320px){

src/Components/Top-level/Notification/Notification.stories.jsx

-import { Notification } from '../Notification/Notification.jsx';
+import { Notification } from '@/Components/Top-level/Notification/Notification.jsx';
 import { Button } from '../../Base/Buttons/Button.jsx';
 import successImg from "../../../assets/success.png";
 import errorImg from "../../../assets/giferror.gif";
@@ -8,15 +8,14 @@ export default {
   component: Notification,
   parameters: {
     backgrounds: {
-      default: 'blue-bg',
-      values: [{ name: 'blue-bg', value: '#3444c5' }],
+      default: 'secondary-bg',
     },
   },
   argTypes: {
     title: { control: 'text' },
     msg: { control: 'text' },
     type: { control: { type: 'select' }, options: ['success', 'error'] },
-    button: { control: false }, // button is a JSX element, not editable from controls
+    button: { control: false }, 
   },
 };
 

src/Components/Top-level/Response/Error/Error.jsx

-import { Notification } from "../../Notification/Notification"
+import { Notification } from "@/Components/Top-level/Notification/Notification"
 export const Error = () => {
     const response={
         title:'Failed😢',

src/Components/Top-level/Response/Success/Success.jsx

 import { useEffect, useState } from 'react';
 import Confetti from 'react-confetti';
-import { Notification } from "../../Notification/Notification";
-import { Button } from "../../../Base/Buttons/Button";
+import { Notification } from "@/Components/Top-level/Notification/Notification";
+import { Button } from "@/Components/Base/Buttons/Button";
 
 export const Success = () => {
   const [showConfetti, setShowConfetti] = useState(true);

src/Components/Top-level/Seat-legend/Legend.jsx

-import styles from '../Seat-legend/Legend.module.css'
+import styles from '@/Components/Top-level/Seat-legend/Legend.module.css'
 export const Legend = ({
   labels = {
     selectedLabel: "Selected",

src/Components/Top-level/Seat-legend/Legend.module.css

 
 .seat {
   display: inline-block;
-  width: 7px;
-  height: 7px;
+  width: 0.438rem;
+  height: 0.438rem;
   background-color: transparent;
   border: 2px solid #ccc;
   border-radius: 15px;
@@ -12,14 +12,14 @@
 }
 
 .selected {
-  background-color: #00e4ff;
-  border-color: #00e4ff;
+  background-color:var(--selected);
+  border-color:var(--selected);
 
 }
 
 .reserved {
-  background-color:rgb(91,99,198);
- border-color: rgb(91,99,198);
+  background-color:var(--reserved);
+ border-color: var(--reserved);
 }
 
 .available {
@@ -28,7 +28,6 @@
 
 
 .legend {
-
   display: flex;
   justify-content: space-between;
   justify-content: center;
@@ -47,14 +46,14 @@
   color: white;
   font-family: 'Segoe UI';
   font-weight: 500;
-  font-size: 0.813rem;
+  font-size: 0.813em;
 }
 @media(min-width:425px){
   .legend{
     column-gap: 5rem;
   }
    .legendItem{
-    font-size: 0.938rem;
+    font-size: 0.938em;
    }
 }
 @media (min-width:640px) {
@@ -71,6 +70,6 @@
   }
   .legendItem{
     gap: 0.938rem;
-    font-size: 1.25rem;
+    font-size: 1.25em;
   }
 }

src/Components/Top-level/Seat-legend/SeatLegend.stories.jsx

-import { Legend } from "./Legend";
+import { Legend } from "@/Components/Top-level/Seat-legend/Legend.jsx";
 
 export default {
   title: 'Toplevel/SeatLegend',
   component: Legend,
   parameters: {
     backgrounds: {
-      default: 'blue-bg',
-      values: [
-        { name: 'blue-bg', value: '#3444c5' },
-      ],
+      default: 'secondary-bg',
     },
     layout: "centered",
   },

src/Components/Top-level/Seat/Seat.jsx

 import PropTypes from 'prop-types';
 import cn from 'classnames';
-import styles from './Seat.module.css';
+import styles from '@/Components/Top-level/Seat/Seat.module.css';
 
 export const Seat = ({ seatNo, status, onClick }) => {
   const isMine = status === 'mine' || status === 'mine-unselected';

src/Components/Top-level/Seat/Seat.module.css

@@ -2,8 +2,8 @@
   display: inline-block;
   background-color: transparent;
   border: 0.5px solid rgba(164,175,255,255);         
-  width: 19px;                     
-  height: 19px;                     
+  width: 1.188rem;                     
+  height: 1.188rem;                     
   border-radius: 5px;
   margin: 6px;                      
   cursor: pointer;
@@ -13,20 +13,20 @@
 }
 
 .available:hover {
-  background-color: lab(71.81% 1.61 -0.02);        
+  background-color:var(--available);        
   transform: scale(1.1);            
 }
 
 .selected {
-  background-color:#01fff7;   
-  border-color:#01fff7 ;    
+  background-color:var(--selected);   
+  border-color:var(--selected) ;    
 }
 
 .reserved {
-  background-color:#5b66cb;
+  background-color:var(--reserved);
 }
 .mine{
-  background-color: #01fff7;
+  background-color: var(--selected);
   cursor: pointer;
 }
 .unselected {

src/Components/Top-level/Seat/Seat.stories.jsx

-import { Seat } from './Seat';
+import { Seat } from '@/Components/Top-level/Seat/Seat';
 
 export default {
   title: 'Toplevel/Seat',
   component: Seat,
     parameters:{
    backgrounds: {
-      default: 'blue-bg',
-      values: [
-        { name: 'blue-bg', value: '#3444c5' }, 
-      ],
+      default: 'secondary-bg',
     },
   },
   argTypes: {
@@ -19,12 +16,11 @@ export default {
       },
     },
     seatNo: { table:{disable:true}},
-    // onSelect: { action: 'selected seat' },
     onClick: { action: 'onClick' },
   },
 };
 
-const Template = (args) => {
+export const Seats = (args) => {
   const seats = ["A1"];
   return (
     <div style={{ display: 'flex',justifyContent:"center",marginTop:"13rem"}}>
@@ -35,7 +31,6 @@ const Template = (args) => {
   );
 };
 
-export const Seats = Template.bind({});
 Seats.args = {
   status: 'available',
   seatNo:"A1",

src/Components/Top-level/SeatLayout/SeatLayout.jsx

 import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Seat } from '../Seat/Seat.jsx';
-import styles from './SeatLayout.module.css';
-import { seatsData } from './SeatsData.js';
+import { Seat } from '@/Components/Top-level/Seat/Seat.jsx';
+import styles from '@/Components/Top-level/SeatLayout/SeatLayout.module.css';
+import { seatsData } from '@/Components/Top-level/SeatLayout/SeatsData.js';
 
 const populateSeatsArray = (selectedSeats, reservedSeats, currentReservedSeats) => {
   return seatsData.map(({ row, seats }) =>

src/Components/Top-level/SeatLayout/SeatLayout.module.css

@@ -5,8 +5,6 @@
     align-items: center;
     margin-bottom: 5rem;
     width: 100%;
-  /* overflow-x: auto; */
-
 }
 .seatcontainer {
   display: flex;
@@ -17,28 +15,10 @@
 
 }
 
-
-/* .seats {
-  width: 23px;
-  height: 23px;
-  margin: 0 2px;
-  text-align: center;
-  line-height: 30px;
-  border-radius: 6px;
-  border: 2px solid #999;
-
-} */
  @media(min-width:425px){
   .container{
     align-items:center;
   }
-   /* .seatcontainer:last-child{
-  margin-left:1px;
-
-}
-.seatcontainer:first-child{
-margin-left: 1px;
-} */
  }
 @media (min-width:640px) {
  .seatcontainer{
@@ -50,11 +30,5 @@ margin-left: 1px;
      justify-content: center;
      align-items: center;
   }
-  /* .seatcontainer:last-child{
-  margin-left:1px;
 
 }
-.seatcontainer:first-child{
-margin-left: 1px;
-} */
-}

src/Components/Top-level/SeatLayout/SeatLayout.stories.jsx

-import { SeatLayout } from './SeatLayout';
+import { SeatLayout } from '@/Components/Top-level/SeatLayout/SeatLayout';
 import { action } from '@storybook/addon-actions';
 
 const reservedSeatsSample = ['A1', 'B2', 'C3'];
@@ -10,8 +10,7 @@ export default {
   component: SeatLayout,
   parameters: {
     backgrounds: {
-      default: 'blue-bg',
-      values: [{ name: 'blue-bg', value: '#3444c5' }],
+      default: 'secondary-bg',
     },
     layout: 'centered',
   },
@@ -28,7 +27,6 @@ export default {
       control: { type: 'array' },
       description: 'Seats reserved by the logged-in user',
     },
-    // limit is used internally, not exposed in the controls
   },
 };
 

src/Components/Top-level/Seatselect/Selectseat.jsx

 import { useEffect, useState, useRef } from "react";
-import { getAllUsers, updateUserReservedSeats } from "../../../Api/userApi";
-import { Button } from "../../Base/Buttons/Button";
-import { Legend } from "../Seat-legend/Legend";
-import { SeatLayout } from "../SeatLayout/SeatLayout";
-import { getCurrentUser } from "../../../auth/authService";
-import styles from "./Selectseat.module.css";
+import { getAllUsers, updateUserReservedSeats } from "@/Api/userApi";
+import { Button } from "@/Components/Base/Buttons/Button";
+import { Legend } from "@/Components/Top-level/Seat-legend/Legend";
+import { SeatLayout } from "@/Components/Top-level/SeatLayout/SeatLayout";
+import { getCurrentUser } from "@/auth/authService";
+import styles from "@/Components/Top-level/SeatSelect/Selectseat.module.css";
 import "react-toastify/dist/ReactToastify.css";
 import { toast, ToastContainer } from "react-toastify";
-import { Modal } from "../../Base/Modal/Modal";
-import { SeatSelectForm } from "../../Form/SeatSelectForm/SeatSelectForm";
-import { Screen } from "../../Shared/Screen/Screen";
+import { Modal } from "@/Components/Base/Modal/Modal";
+import { SeatSelectForm } from "@/Components/Form/SeatSelectForm/SeatSelectForm";
+import { Screen } from "@/Components/Shared/Screen/Screen";
 import { AiOutlineLogout } from "react-icons/ai";
 
 export const Selectseat = ({ onLogout }) => {
@@ -63,7 +63,7 @@ export const Selectseat = ({ onLogout }) => {
     }
    const unselectedReserved = selectedData.filter(seat => !selectedSeats.includes(seat));
     const newlySelected = selectedSeats.filter(s => !selectedData.includes(s));
-   
+   console.log("test",unselectedReserved);
     if (unselectedReserved.length > 0 && newlySelected.length < unselectedReserved.length) {
   toast.error(`You unselected ${unselectedReserved.length} reserved seat(s), so you must select ${unselectedReserved.length} new seat(s).`);
   return;
@@ -117,7 +117,7 @@ export const Selectseat = ({ onLogout }) => {
   const handleModal = () => setShowSelect(false);
 
   const seatOptions = Array.from({ length: availableSeats }).map((_, i) => ({
-    value: selectedData.length + i + 1,
+    value: selectedData.length + i + 0,
     label: `${selectedData.length + i + 0} seats`
   }));
 

src/Components/Top-level/Seatselect/Selectseat.module.css

@@ -33,19 +33,6 @@ body {
   max-width: 12rem;
   margin: 0 auto;
 }
-/* 
-.shadow {
-  display: flex;
-  justify-content: center;
-  position: relative;
-  bottom: 1rem;
-  padding: 0 1rem;
-} */
-
-/* labels:{
-signUp:'sdfs'
-/} */
-
 .seatcontainer {
   position: relative;
   bottom:4rem;
@@ -68,7 +55,7 @@ signUp:'sdfs'
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 1000;
+  z-index: 0;
   padding: 1rem;
   box-sizing: border-box;
 }
@@ -82,12 +69,12 @@ signUp:'sdfs'
   width: 100%;
   margin-inline: 1rem;
   position: relative;
-  z-index: 1001;
+  z-index: 0;
   box-sizing: border-box;
 }
 
 .modalheading {
-  font-size: 24px;
+  font-size:2em;
   font-weight: 600;
   text-align: center;
   color: #1f2937;
@@ -112,24 +99,6 @@ signUp:'sdfs'
   box-sizing: border-box;
 }
 
-.modalselect:focus {
-  border-color: #2563eb;
-}
-
-.modalbutton {
-  background-color: #2563eb;
-  color: white;
-  padding: 10px;
-  border: none;
-  border-radius: 8px;
-  font-size: 16px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-}
-
-.modalbutton:hover {
-  background-color: #1d4ed8;
-}
 .logoutButton{
 display: flex;
 justify-content: flex-end;
@@ -138,7 +107,7 @@ top: 2rem;
 right: 1.5rem;
 color: white;
 font-size: 1.5rem;
-z-index: 1001;
+z-index:1 ;
 cursor:pointer;
 }
 
@@ -154,7 +123,7 @@ cursor:pointer;
    font-size: 2.3em;
   }
   .logoutButton{
-    font-size:2rem;
+    font-size:2em;
   }
   .seatcontainer{
    margin-left:1px;

src/Pages/AuthPage.jsx

-import { Login} from "../Components/Form/Login/Login.jsx"
-import { SignUp } from "../Components/Form/SignUp/SignUp";
+import { Login} from "@/Components/Form/Login/Login.jsx"
+import { SignUp } from "@/Components/Form/SignUp/SignUp";
 import { toast } from "react-toastify";
-import { Auth } from "../Components/Auth/Auth.jsx";
-import { getUserByPhone,postUser } from "../Api/userApi.js";
+import { Auth } from "@/Components/Auth/Auth.jsx";
+import { getUserByPhone,postUser } from "@/Api/userApi.js";
 export const AuthPage = () => {
   const handleLogin = async (phoneNumber) => {
     try {

src/Pages/BookingPage.jsx

-import { Selectseat } from "../Components/Top-level/Seatselect/Selectseat";
-import { logout } from "../auth/authService";
+import { Selectseat } from "@/Components/Top-level/Seatselect/Selectseat";
+import { logout } from "@/auth/authService";
 
 export const Bookingpage = () => {
   const onLogout = () => {
@@ -9,7 +9,5 @@ export const Bookingpage = () => {
 
   return (
     <Selectseat  onLogout={onLogout}/>
-  
-
   );
 };

src/Pages/SuccessPage.jsx

 import styled from "styled-components"; 
-import { Success } from "../Components/Top-level/Response/Success/Success";
-import { logout } from "../auth/authService";
+import { Success } from "@/Components/Top-level/Response/Success/Success";
+import { logout } from "@/auth/authService";
 import { AiOutlineLogout } from "react-icons/ai"; 
 
 const Container = styled.div`

src/db.json

@@ -24,13 +24,22 @@
         "F1",
         "F8",
         "D8",
-        "G6",
         "E7",
         "G2",
         "B3",
-        "A3",
         "D6",
-        "A4"
+        "G5",
+        "F5",
+        "F6",
+        "E6",
+        "D5",
+        "G6",
+        "E5",
+        "G7",
+        "A4",
+        "A5",
+        "A6",
+        "A3"
       ]
     },
     {
@@ -164,10 +173,21 @@
       "email": "sakilesh.j@krds.fr",
       "phoneNumber": "9080296978",
       "reservedSeats": [
+        "D7",
+        "C7",
+        "B7",
+        "C6",
+        "C8"
+      ]
+    },
+    {
+      "id": "e662",
+      "name": "mani",
+      "email": "mani@gmail.com",
+      "phoneNumber": "5678943210",
+      "reservedSeats": [
         "D3",
-        "C3",
-        "C4",
-        "C2"
+        "C4"
       ]
     }
   ]

src/index.css

@@ -10,6 +10,9 @@
 :root{
       --primary: #4958cf;
     --secondary: #f1f1f1;
+    --available: lab(71.81% 1.61 -0.02);
+    --selected:#01fff7;
+    --reserved:#5b66cb;
 }
 
 h1,h2,h3,h4,h5,h6,p{

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: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
   server: {
-    host: true,   // same as --host
-    port: 5173,   // or any port you want
-  }
-})
+    host: true,
+    port: 5173,
+  },
+});