code changes

db.json

 {
   "users": [
     {
-      "mobile": "838938983",
-      "password": "djldlsd",
+      "mobile": "12345678",
+      "password": "test",
       "id": 1,
       "isLogged": true
     }
   ],
   "reservedSeats": [
-    {
-      "userId": 1,
-      "seats": [
-        16,
-        17,
-        15,
-        18,
-        25,
-        26
-      ],
-      "id": 1
-    },
-    {
-      "userId": 2,
-      "seats": [
-        7,
-        8
-      ],
-      "id": 1
-    }
+    
   ]
 }
\ No newline at end of file

package-lock.json

@@ -16,6 +16,7 @@
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.16.0",
         "react-scripts": "5.0.1",
+        "react-tooltip": "^5.21.5",
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
@@ -2944,7 +2945,6 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz",
       "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
-      "dev": true,
       "dependencies": {
         "@floating-ui/utils": "^0.1.3"
       }
@@ -2953,7 +2953,6 @@
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
       "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
-      "dev": true,
       "dependencies": {
         "@floating-ui/core": "^1.4.2",
         "@floating-ui/utils": "^0.1.3"
@@ -2975,8 +2974,7 @@
     "node_modules/@floating-ui/utils": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.4.tgz",
-      "integrity": "sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA==",
-      "dev": true
+      "integrity": "sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA=="
     },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.11",
@@ -10585,6 +10583,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz",
       "integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ=="
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/clean-css": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
@@ -21546,6 +21549,19 @@
         }
       }
     },
+    "node_modules/react-tooltip": {
+      "version": "5.21.5",
+      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.21.5.tgz",
+      "integrity": "sha512-ey70qf6pBGi4U6xpyNlZAHobAhlo2dfxmImR2Bzd/DbLTsAYWz3TEaK+RMFuUZMq6hSPRbUHQSkP2rHBq4uFVg==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0",
+        "classnames": "^2.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

src/components/Base/button/button.css → src/components/Base/button/button.module.css

-button {
+.button {
   padding: 0.7rem 3rem;
   border-radius: 14px;
   font-size: 16px;

src/components/Base/button/index.js

+import styles from "./button.module.css";
+
+function Button({ children, ...props }) {
+  return (
+    <button className={styles.button} {...props}>
+      {children}
+    </button>
+  );
+}
+
+export default Button;

src/components/Base/button/index.jsx

-import "./button.css";
-
-
-function Button({ children, ...props }) {
-  return <button {...props}>{children}</button>;
-}
-
-export default Button;

src/components/Base/input/index.js

-import "./input.css";
+import styles from "./input.module.css";
 
 function Input({ ...props }) {
-  return <input {...props} />;
+  return <input className={styles.input} {...props} />;
 }
 
 export default Input;

src/components/Base/input/input.css → src/components/Base/input/input.module.css

-input {
+.input {
   width: 100%;
   padding: 1rem;
   box-sizing: border-box;

src/components/Base/layout/index.js

-import "./layout.css";
+import styles from "./layout.module.css";
 
-function Layout({title,...props}) {
+function Layout({ title, ...props }) {
   return (
-    <div className="card">
-      <h2>{ title}</h2>
+    <div className={styles.card}>
+      <h2 className={styles.header2}>{title}</h2>
       <div {...props}></div>
     </div>
   );

src/components/Base/layout/layout.css → src/components/Base/layout/layout.module.css

@@ -15,7 +15,7 @@
 .card {
   display: block;
   min-height: 50vh;
-  width: 40dvw;
+  max-width: 30em;
   border-radius: 10px;
   background-color: white;
   margin: 0 auto;

src/components/top-level/confirmation/confirmation.stories.js

@@ -8,8 +8,7 @@ export default {
 
 export const confirmation = {
   args: {
-    ticketCount: 3,
-    seats: [1, 2, 3],
-    bookingId: 1234,
+    seatCount: 3,
+    seats: ["A1", "A2", "A3"],
   },
 };

src/components/top-level/confirmation/index.js

 import Layout from "../../Base/layout";
 import Image from "../../../assets/conform.png";
-import "./confirmation.css";
+import style from "./confirmation.module.css";
 
-function Confirmation({ ticketCount, seats }) {
+function Confirmation({ seatCount, seats }) {
   return (
-    <Layout>
-      <div className="confirmation">
+    <Layout title="Booking Confirmed">
+      <div className={style.confirmation}>
         <img src={Image} height={150} width="auto" />
-        <h2>Booking Confirmed</h2>
-        <h3>Ticket Count:{ticketCount}</h3>
+        <h3>Seat's Count:{seatCount}</h3>
         <h4>
-          Seats:
+          Booked Seats:
           {seats.toString()}
         </h4>
-        {/* <h3>Booking Id:{bookingId}</h3> */}
       </div>
     </Layout>
   );

src/components/top-level/login/index.js

@@ -2,7 +2,7 @@ import { useState } from "react";
 import Button from "../../Base/button";
 import Input from "../../Base/input";
 import Layout from "../../Base/layout";
-import "./login.css";
+import styles from "./login.module.css";
 
 function Login({ onSubmit }) {
   const [mobile, setMobile] = useState("");
@@ -35,7 +35,7 @@ function Login({ onSubmit }) {
           placeholder="Enter Password"
           required
           type="text"
-        maxLength={8}
+          maxLength={8}
           onChange={(e) => setPassword(e.target.value)}
         />
         <Button>Submit</Button>

src/components/top-level/seat-layout/index.js

 // import { useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
 import Button from "../../Base/button";
-import "./seat-layout.css";
+import styles from "./seat-layout.module.css";
 import Seat from "../seat";
 import Confirmation from "../confirmation";
 
@@ -13,7 +13,6 @@ function SeatLayout({
   onClick,
   ...props
 }) {
-  // const navigate = useNavigate();
   const [selectedseat, setSelectedSeat] = useState([...selectedSeats]);
   const [confirmation, setConfirmation] = useState(false);
   const handleSeats = (seat) => {
@@ -39,18 +38,19 @@ function SeatLayout({
   return (
     <>
       {!confirmation ? (
-        <div className="container">
+        <div className={styles.container}>
           <h1>Choose Seats</h1>
-          <div className="curve">
-            <div className="curve-shadow"></div>
+          <div className={styles.curve}>
+            <div className={styles["curve-shadow"]}></div>
           </div>
-          <div className="seat-container">
+          <div className={styles["seat-container"]}>
             {seats?.map((seat) => (
-              <div className="seat">
+              <div className={styles.seat}>
                 {seat?.map((e, i) => (
-                  <div className={`${e === 0 ? "remove-seats" : ""}`}>
+                  <div className={`${e === 0 ? styles["remove-seats"] : ""}`}>
                     <Seat
                       key={e}
+                      seatNo={e}
                       onChange={() => handleSeats(e)}
                       status={
                         selectedseat?.includes(e)
@@ -68,16 +68,16 @@ function SeatLayout({
           <Button onClick={handleConfirm} {...props}>
             Confirm
           </Button>
-          <div className="seat-status">
-            <div className="selected">
+          <div className={styles["seat-status"]}>
+            <div className={styles.selected}>
               <div></div>
               <p>Selected</p>
             </div>
-            <div className="reserved">
+            <div className={styles.reserved}>
               <div></div>
               <p>Reserved</p>
             </div>
-            <div className="available">
+            <div className={styles.available}>
               <div></div>
               <p>Available</p>
             </div>
@@ -93,6 +93,5 @@ SeatLayout.defaultProps = {
   seats: [],
   reservedSeats: [],
   selectedSeats: [],
-  onClick: () => {},
 };
 export default SeatLayout;

src/components/top-level/seat-layout/seat-layout.css → src/components/top-level/seat-layout/seat-layout.module.css

@@ -5,7 +5,7 @@
 
 .seat-container {
   position: relative;
-  bottom: 34px;
+  bottom: 50px;
   left: 15px;
 }
 .seat {
@@ -65,13 +65,12 @@
 }
 .curve-shadow {
   position: absolute;
-  width: 452px;
-  top: 2px;
-  right: -71px;
-  height: 83px;
+  width: 632px;
+  top: 1px;
+  right: -153px;
+  height: 100px;
   background: linear-gradient(180deg, #fff 0%, #fff 0%, #655ccc 100%);
-  /* background: linear-gradient(180deg, #ccc 50%, #ccc 50%); */
   opacity: 0.3;
-  border-radius: 100%/40px 40px 0 0;
-  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
+  border-radius: 100%/100px 100px 0 0;
+  clip-path: polygon(30% 0, 73% 0, 80% 100%, 22% 99%);
 }

src/components/top-level/seat-layout/seat-layout.stories.js

@@ -12,16 +12,16 @@ export default {
 export const seatlayout = {
   args: {
     seats: [
-      [0, 1, 2, 3, 0, 4, 5, 6, 0],
-      [7, 8, 9, 10, 0, 11, 12, 13, 14],
-      [15, 16, 17, 18, 0, 19, 20, 21, 22],
-      [23, 24, 25, 26, 0, 27, 28, 29, 30],
-      [31, 32, 33, 34, 0, 35, 36, 37, 38],
-      [39, 40, 41, 42, 0, 43, 44, 45, 46],
-      [47, 48, 49, 50, 0, 51, 52, 53, 54],
-      [0, 55, 56, 57, 0, 58, 59, 60, 0],
+      [0, "A1", "A2", "A3", 0, "A4", "A5", "A6", 0],
+      ["B1", "B2", "B3", "B4", 0, "B5", "B6", "B7", "B8"],
+      ["C1", "C2", "C3", "C4", 0, "C5", "C6", "C7", "C8"],
+      ["D1", "D2", "D3", "D4", 0, "D5", "D6", "D7", "D8"],
+      ["E1", "E2", "E3", "E4", 0, "E5", "E6", "E7", "E8"],
+      ["F1", "F2", "F3", "F4", 0, "F5", "F6", "F7", "F8"],
+      ["G1", "G2", "G3", "G4", 0, "G5", "G6", "G7", "G8"],
+      [0, "H1", "H2", "H3", 0, "H4", "H5", "H7", 0],
     ],
-    reservedSeats: [1, 2, 45, 54],
-    selectedSeats: [19, 20, 21],
+    reservedSeats: ["A1", "A2", "G1", "G2"],
+    selectedSeats: ["E1", "E2", "E3"],
   },
 };

src/components/top-level/seat/index.js

-import "./seat.css";
-
-function Seat({ onChange, status, ...props }) {
+import { useState } from "react";
+import styles from "./seat.module.css";
 
+function Seat({ onChange, status, seatNo, ...props }) {
+  const [show, setShow] = useState(false);
   const handleCheckbox = () => {
     if (status == "available" || status == "selected") {
       onChange({
@@ -12,19 +13,29 @@ function Seat({ onChange, status, ...props }) {
   };
 
   return (
-    <input
-      type="checkbox"
-      onChange={handleCheckbox}
-  
-      className={` ${
-        status == "selected"
-          ? "checkbox-selected"
-          : status == "reserved"
-          ? "checkbox-reserved"
-          : "checkbox-available"
-      }`}
-      {...props}
-    />
+    <>
+      <div
+        className={styles.tooltip}
+        style={show ? { visibility: "visible" } : {}}
+      >
+        {seatNo}
+        <span className={styles["tooltip-arrow"]} />
+      </div>
+      <input
+        type="checkbox"
+        onChange={handleCheckbox}
+        className={` ${
+          status == "selected"
+            ? styles["checkbox-selected"]
+            : status == "reserved"
+            ? styles["checkbox-reserved"]
+            : styles["checkbox-available"]
+        }`}
+        {...props}
+        onMouseEnter={() => setShow(true)}
+        onMouseLeave={() => setShow(false)}
+      />
+    </>
   );
 }
 

src/components/top-level/seat/seat.css → src/components/top-level/seat/seat.module.css

@@ -10,7 +10,6 @@ input[type="checkbox"] {
   border-radius: 10%;
   border: 1px solid #ccc;
   box-shadow: none;
-
   padding: 0.7rem;
   cursor: pointer;
 }
@@ -27,3 +26,22 @@ input[type="checkbox"] {
 .checkbox-available {
   padding: 0.6rem !important;
 }
+
+.tooltip {
+  width: 15px;
+  position: relative;
+  background: white;
+  color: black;
+  visibility: hidden;
+  padding: 5px;
+  border-radius: 5px;
+  z-index: 1;
+}
+.tooltip-arrow {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  border-width: 5px;
+  border-style: solid;
+  border-color: white transparent transparent;
+}

src/components/top-level/seat/seat.stories.js

@@ -6,15 +6,14 @@ export default {
   argTypes: {
     onChange: { action: "onChange" },
     status: {
-      options: ["available","reserved", "selected"],
+      options: ["available", "reserved", "selected"],
       control: { type: "radio" },
     },
   },
 };
 export const seat = {
-   args: {
-   
-  status: "available",
-    }
-
+  args: {
+    status: "available",
+    seatNo: "A1",
+  },
 };

src/pages/seat-layout.js

 import { useEffect, useLayoutEffect, useState } from "react";
 import SeatLayout from "../components/top-level/seat-layout";
 import { useAppContext } from "../_context";
-import { useParams, useNavigate } from "react-router-dom";
+import { useParams } from "react-router-dom";
 
 export function _Seatlayout({ ...props }) {
   const { userseats, AddOrUpdateSeats, GetAllReservedSeats } = useAppContext();
@@ -9,14 +9,14 @@ export function _Seatlayout({ ...props }) {
   const [selectedSeat, setSelectedSeat] = useState([]);
   const { id } = useParams();
   const [seat] = useState([
-    [0, 1, 2, 3, 0, 4, 5, 6, 0],
-    [7, 8, 9, 10, 0, 11, 12, 13, 14],
-    [15, 16, 17, 18, 0, 19, 20, 21, 22],
-    [23, 24, 25, 26, 0, 27, 28, 29, 30],
-    [31, 32, 33, 34, 0, 35, 36, 37, 38],
-    [39, 40, 41, 42, 0, 43, 44, 45, 46],
-    [47, 48, 49, 50, 0, 51, 52, 53, 54],
-    [0, 55, 56, 57, 0, 58, 59, 60, 0],
+    [0, "A1", "A2", "A3", 0, "A4", "A5", "A6", 0],
+    ["B1", "B2", "B3", "B4", 0, "B5", "B6", "B7", "B8"],
+    ["C1", "C2", "C3", "C4", 0, "C5", "C6", "C7", "C8"],
+    ["D1", "D2", "D3", "D4", 0, "D5", "D6", "D7", "D8"],
+    ["E1", "E2", "E3", "E4", 0, "E5", "E6", "E7", "E8"],
+    ["F1", "F2", "F3", "F4", 0, "F5", "F6", "F7", "F8"],
+    ["G1", "G2", "G3", "G4", 0, "G5", "G6", "G7", "G8"],
+    [0, "H1", "H2", "H3", 0, "H4", "H5", "H7", 0],
   ]);
 
   useLayoutEffect(() => {