code changes

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

@@ -16,11 +16,13 @@
   margin: 5rem auto;
   text-align: center;
   width: 100%;
-  max-width: 25rem;
-  padding: 3rem;
+  max-width: 15rem;
+  padding: 2rem;
   background-color: #eff0ef;
   border-radius: 2rem;
   animation: fadeIn 0.5s ease-in-out;
+
+ 
 }
 
 .span {
@@ -151,3 +153,20 @@
   font-size: 1rem;
   font-weight: 500;
 }
+@media(min-width:320px){
+  .container{
+    padding: 2rem;
+    
+  }
+}
+@media(min-width:425px){
+  .container{
+    max-width: 21rem;
+  }
+}
+@media (min-width:640px){
+  .container{
+    max-width: 23rem;
+    padding: 3rem;
+  }
+}
\ No newline at end of file

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

@@ -35,18 +35,14 @@
   align-items: center;
    margin:0 auto;
     margin-top: 1rem;
-  gap: 2.188px;
+  gap: 1rem;
   width: 100%;
-/* 
-  flex-direction: column; */
-
-
 }
 
 .legendItem {
   display: inline-flex;
   align-items: center;
-  gap: 3px;
+  gap: 1px;
   font-size: 0.875px;
   color: white;
   font-family: 'Segoe UI';

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: 18px;                     
-  height: 18px;                     
+  width: 19px;                     
+  height: 19px;                     
   border-radius: 5px;
   margin: 6px;                      
   cursor: pointer;
@@ -12,9 +12,8 @@
   box-shadow:2px 4px 8px rgba(0,0,0,0.2) ;
 }
 
-
 .available:hover {
-  background-color: lab(52.35% 1.51 0);        
+  background-color: lab(71.81% 1.61 -0.02);        
   transform: scale(1.1);            
 }
 

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

@@ -30,6 +30,7 @@ export const SeatLayout = ({
   currentReservedSeats = [],
   limit,
   onSelectionChange,
+  
 }) => {
   const [localSelectedSeats, setLocalSelectedSeats] = useState(currentReservedSeats);
 
@@ -58,17 +59,15 @@ export const SeatLayout = ({
         const newlySelected = updated.filter(
           (s) => !currentReservedSeats.includes(s)
         );
-
         const unselectedMine = currentReservedSeats.filter(
           (s) => !updated.includes(s)
         );
 
         const totalAllowed = limit + unselectedMine.length;
-
         if (newlySelected.length < totalAllowed) {
           return [...updated, seatNo];
         } else {
-          return updated; // reject selection
+        return updated;
         }
       }
     });

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

-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { getAllUsers, updateUserReservedSeats } from "../../../Api/userApi";
 import { Button } from "../../Base/Buttons/Button";
 import { Legend } from "../Seat-legend/Legend";
@@ -11,7 +11,7 @@ import { Modal } from "../../Base/Modal/Modal";
 import { SeatSelectForm } from "../../Form/SeatSelectForm/SeatSelectForm";
 import { Screen } from "../../Shared/Screen/Screen";
 import { AiOutlineLogout } from "react-icons/ai";
-import { useRef } from "react";
+
 export const Selectseat = ({ onLogout }) => {
   const [selectedSeats, setSelectedSeats] = useState([]);
   const [selectedData, setselectedData] = useState([]);
@@ -19,8 +19,8 @@ export const Selectseat = ({ onLogout }) => {
   const [seatCount, setSeatCount] = useState(1);
   const [availableSeats, setAvailableSeats] = useState(0);
   const [showSelect, setShowSelect] = useState(true);
- 
- const hasWelcomed = useRef(false);
+
+  const hasWelcomed = useRef(false);
 
   useEffect(() => {
     getAllUsers()
@@ -37,15 +37,13 @@ export const Selectseat = ({ onLogout }) => {
 
         setselectedData(userSeats);
         setreservedSeats(othersReserved);
+        setSeatCount(userSeats.length);
+        setShowSelect(true);
 
         const available = totalSeats - allReserved.length;
         setAvailableSeats(available);
 
-        // if (userSeats.length > 0) {
-        //   setSeatCount(userSeats.length);
-        //   setShowSelect(false); 
-        // }
-         if (currentUser?.name && !hasWelcomed.current) {
+        if (currentUser?.name && !hasWelcomed.current) {
           toast.success(`Welcome, ${currentUser.name}`);
           hasWelcomed.current = true;
         }
@@ -64,8 +62,10 @@ export const Selectseat = ({ onLogout }) => {
       return;
     }
 
-    if (selectedData.length === 0 && selectedSeats.length < seatCount) {
-      toast.info(`Please select ${seatCount} seat(s)`);
+    const newlySelected = selectedSeats.filter(s => !selectedData.includes(s));
+
+    if (newlySelected.length < seatCount - selectedData.length) {
+      toast.error(`You must select exactly ${seatCount - selectedData.length} new seats`);
       return;
     }
 
@@ -83,12 +83,10 @@ export const Selectseat = ({ onLogout }) => {
           .flatMap(u => u.reservedSeats || [])
           .filter(seat => !currentUser.reservedSeats.includes(seat));
 
-        const conflictSeats = selectedSeats.filter(seat =>
-          latestReserved.includes(seat)
-        );
+        const conflictSeats = selectedSeats.filter(seat => latestReserved.includes(seat));
 
         if (conflictSeats.length > 0) {
-          toast.error(`The following seat(s) were just taken: ${conflictSeats.join(", ")}`);
+          toast.error(`The following seats were just taken: ${conflictSeats.join(", ")}`);
           return;
         }
 
@@ -97,32 +95,24 @@ export const Selectseat = ({ onLogout }) => {
       .then(res => {
         if (res) {
           toast.success("Seats booked!");
-          hasWelcomed.current=true;
-           const finalSeats = [...selectedData, ...selectedSeats];
-            localStorage.setItem("bookedSeats", JSON.stringify(selectedSeats)); 
-            console.log(selectedSeats);
+          hasWelcomed.current = true;
+          localStorage.setItem("bookedSeats", JSON.stringify(selectedSeats));
           setSelectedSeats([]);
-          setTimeout(() => {
-            window.location.replace("/success");
-          }, 1000);
+          setTimeout(() => window.location.replace("/success"), 1000);
         }
       })
       .catch(err => {
         console.error("Error confirming seats", err);
         toast.error("Failed to confirm seats");
-        setTimeout(() => {
-          window.location.replace("/error");
-        }, 1000);
+        setTimeout(() => window.location.replace("/error"), 1000);
       });
   };
 
-  const handleModal = () => {
-    setShowSelect(false);
-  };
+  const handleModal = () => setShowSelect(false);
 
   const seatOptions = Array.from({ length: availableSeats }).map((_, i) => ({
-    value: i + 1,
-    label: `${i + 1} ${i + 1 === 1 ? "seat" : "seats"}`
+    value: selectedData.length + i + 1,
+    label: `${selectedData.length + i + 0} seats`
   }));
 
   return (
@@ -139,7 +129,7 @@ export const Selectseat = ({ onLogout }) => {
             selectedSeats={selectedSeats}
             reservedSeats={reservedSeats}
             currentReservedSeats={selectedData}
-            limit={seatCount}
+            limit={seatCount - selectedData.length}
             onSelectionChange={setSelectedSeats}
           />
         </div>
@@ -150,7 +140,7 @@ export const Selectseat = ({ onLogout }) => {
             label="Confirm"
             size="md"
             onClick={confirmHandler}
-            disabled={selectedData.length === 0 && selectedSeats.length !== seatCount}
+            disabled={seatCount === 0 || selectedSeats.length < seatCount - selectedData.length}
           />
         </div>
 
@@ -161,7 +151,11 @@ export const Selectseat = ({ onLogout }) => {
 
       {showSelect && (
         <Modal
-          title="Choose Number of Seats"
+             title={
+              selectedData.length > 0
+              ? `You have already booked ${selectedData.length} seat(s). Add more?`
+              : "Choose Number of Seats"
+         }
           availableSeats={availableSeats}
           seatCount={seatCount}
           setSeatCount={setSeatCount}

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

@@ -51,6 +51,7 @@ signUp:'sdfs'
   width: 100%;
   overflow-x: auto; 
   overflow: visible !important;
+  margin-left: 3px;
 
 }
 
@@ -154,5 +155,8 @@ cursor:pointer;
   .logoutButton{
     font-size:2rem;
   }
+  .seatcontainer{
+   margin-left:1px;
+  }
  
 }
\ No newline at end of file

src/db.json

@@ -6,13 +6,13 @@
       "name": "Mani",
       "reservedSeats": [
         "G3",
-        "F3",
-        "G2",
-        "C2",
-        "C8",
+        "E4",
+        "G4",
         "F4",
+        "E3",
         "F7",
-        "F8"
+        "E8",
+        "G8"
       ]
     },
     {
@@ -20,18 +20,15 @@
       "phoneNumber": "9361775481",
       "name": "mani",
       "reservedSeats": [
-        "F5",
-        "E5",
-        "G5",
-        "F6",
-        "E6",
-        "E7",
-        "E8",
+        "F3",
+        "F2",
+        "F1",
+        "F8",
+        "D8",
         "G6",
-        "G7",
-        "G8",
-        "D7",
-        "D8"
+        "E7",
+        "D5",
+        "D6"
       ]
     },
     {
@@ -41,13 +38,7 @@
       "phoneNumber": "9934782103",
       "reservedSeats": [
         "B4",
-        "D4",
-        "E3",
-        "A3",
-        "A2",
-        "A1",
-        "H1",
-        "H2"
+        "D4"
       ]
     },
     {
@@ -64,7 +55,10 @@
       "name": "abinesh",
       "email": "abi@gmail.com",
       "phoneNumber": "1234587690",
-      "reservedSeats": []
+      "reservedSeats": [
+        "C5",
+        "B5"
+      ]
     },
     {
       "id": "8ebe",
@@ -78,11 +72,7 @@
       "name": "ganesh",
       "email": "ganesh@gmail.com",
       "phoneNumber": "9786543219",
-      "reservedSeats": [
-        "C6",
-        "C7",
-        "B8"
-      ]
+      "reservedSeats": []
     },
     {
       "id": "9659",
@@ -174,7 +164,8 @@
       "reservedSeats": [
         "D3",
         "C3",
-        "C4"
+        "C4",
+        "C2"
       ]
     }
   ]