Your commit message here

db.json

@@ -124,15 +124,18 @@
       "id": "6543217890",
       "Mobile": "6543217890",
       "Name": "praba"
+    },
+    {
+      "id": "9078563412",
+      "Mobile": "9078563412",
+      "Name": "Raja"
     }
   ],
   "seats": [
     {
       "userId": "9677655288",
       "seats": [
-        "D1",
-        "D2",
-        "D3"
+        "A1"
       ],
       "status": "booked",
       "id": "4271"
@@ -151,7 +154,9 @@
     {
       "userId": "9500403346",
       "seats": [
-        "F3"
+        "D1",
+        "D2",
+        "D5"
       ],
       "status": "booked",
       "id": "b4fe"
@@ -203,6 +208,17 @@
         "E8"
       ],
       "status": "booked"
+    },
+    {
+      "id": "0c64",
+      "userId": "9078563412",
+      "seats": [
+        "G1",
+        "G2",
+        "G3",
+        "G4"
+      ],
+      "status": "booked"
     }
   ]
 }
\ No newline at end of file

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "axios": "^1.9.0",
         "classnames": "^2.5.1",
+        "fireworks-js": "^2.10.8",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-icons": "^5.5.0",
@@ -2856,6 +2857,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/fireworks-js": {
+      "version": "2.10.8",
+      "resolved": "https://registry.npmjs.org/fireworks-js/-/fireworks-js-2.10.8.tgz",
+      "integrity": "sha512-UZNxeJvRmQzLisN4iriWXqKojG9TDJqc0dPmkUw0/+AEQQ3w8z1Jx2YdFSiBGSVb/u4dPTQXU109GMVblzhfpg==",
+      "license": "MIT"
+    },
     "node_modules/flat-cache": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "axios": "^1.9.0",
     "classnames": "^2.5.1",
+    "fireworks-js": "^2.10.8",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-icons": "^5.5.0",

src/components/Form/form/Input.jsx

@@ -4,6 +4,7 @@ export const Input = ({
   onChange,
   placeholder,
   type,
+  required,
   icon: Icon,
   ...props
 }) => {
@@ -19,6 +20,7 @@ export const Input = ({
         placeholder={placeholder}
         type={type}
         onChange={onChange}
+        required={required}
         {...props}
       />
     </div>

src/components/Forms/Login/Login.jsx

@@ -21,8 +21,13 @@ export const Login = ({ onClick, onSwitch }) => {
 
   const HandleButton = (e) => {
     e.preventDefault();
+    if (!value) {
+      toast.info("Please Enter Your Number");
+      return;
+    }
+
     if (!/^[6-9]\d{9}$/.test(value)) {
-      toast.info("Please enter a valid 10-digit number");
+      toast.info("Invalid Number");
       return;
     }
     if (value.length < 10) {
@@ -52,6 +57,7 @@ export const Login = ({ onClick, onSwitch }) => {
                 pattern="[6-9][0-9]{9}"
                 min="0"
                 icon={FaPhoneAlt}
+                required
               />
             </div>
             {islesser && (
@@ -61,7 +67,7 @@ export const Login = ({ onClick, onSwitch }) => {
               <Button
                 children="Submit"
                 onClick={HandleButton}
-                disabled={value.trim().length === 0}
+                // disabled={value.trim().length === 0}
               />
               <div className={styles.foot}>
                 Don't have an account?{" "}

src/components/Layout/Card/Header.jsx

-// import styles  from './Styles.module.css';
-
-export const Header=({title,Color,className})=>{
-    return(
-        <div className={className}>
-            <h2 style={{color:Color}}>{title}</h2>
-        </div>
-    )
-}
+export const Header = ({ title, Color, className }) => {
+  return (
+    <div className={className}>
+      <h2 style={{ color: Color }}>{title}</h2>
+    </div>
+  );
+};

src/components/Response/Index.jsx

@@ -31,7 +31,7 @@ export const Summary = ({ success: propSuccess }) => {
 
           <div className={styles.qrContainer}>
             <img src={Success} alt="QR code" className={styles.qr} />
-            <p className={styles.qrNote}>Scan this QR code at the entrance</p>
+            <p className={styles.qrNote}>Your Seat, Secured in Seconds</p>
           </div>
 
           {bookingInfo && (
@@ -51,7 +51,11 @@ export const Summary = ({ success: propSuccess }) => {
                 </div>
               </div>
               <div className={styles.row}>
-                <span className={styles.label}>User Number</span>
+                <span className={styles.label}>Seat Number</span>
+                <span className={styles.value}>{bookingInfo.seats.length}</span>
+              </div>
+              <div className={styles.row}>
+                <span className={styles.label}>Mobile Number</span>
                 <span className={styles.value}>{bookingInfo.userId}</span>
               </div>
               <div className={styles.row}>

src/components/Response/Styles.module.css

@@ -5,6 +5,7 @@
   justify-content: center;
   min-height: 100vh;
   padding: 1rem;
+  margin: 1rem;
 }
 
 .success {
@@ -96,7 +97,7 @@
 .seatWrapper {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.25rem;
+  gap: 0.1rem;
   margin-left: 2rem;
 }
 
@@ -160,3 +161,9 @@
   color: #6b7280;
   margin-bottom: 1rem;
 }
+
+@media (min-width: 768px) {
+  .pageContainer {
+    margin: 0;
+  }
+}

src/components/Top-level/Counter/Counter.jsx

@@ -5,7 +5,7 @@ import { Input } from "../../Form/form/Input";
 import { Header } from "../../Layout/Card//Header";
 import { toast } from "react-toastify";
 
-const Counter = ({ onSubmit, className, onChange }) => {
+const Counter = ({ onSubmit, className, onChange, onClick }) => {
   const [count, setCount] = useState(0);
   console.log(onSubmit);
   const Num = (e) => {
@@ -27,6 +27,9 @@ const Counter = ({ onSubmit, className, onChange }) => {
     } else {
       toast.info("no seats selected");
     }
+    if (onClick) {
+      onClick(count);
+    }
   };
 
   return (

src/components/Top-level/Counter/Counter.stories.jsx

 import Counter from "./Counter";
-
 export default {
   title: "Top Level",
   component: Counter,
@@ -7,7 +6,7 @@ export default {
     layout: "centered",
   },
   argTypes: {
-    onClick: { action: "Seat-Selecteds" },
+    onClick: { action: "Seat-Selected" },
   },
 };
 

src/components/Top-level/SeatSelection/SeatSelection.stories.jsx

 import { SeatSelectionComponent } from "./Index";
-
 export default {
   title: "Top-Level/Seat-Selection",
   component: SeatSelectionComponent,
@@ -12,8 +11,8 @@ export default {
 };
 
 export const SeatSelection = {
-  args:{
-    seats:[
+  args: {
+    seats: [
       [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"],
@@ -23,8 +22,8 @@ export const SeatSelection = {
       ["G1", "G2", "G3", "G4", 0, "G5", "G6", "G7", "G8"],
       [0, "H1", "H2", "H3", 0, "H4", "H5", "H7", 0],
     ],
-    seatLimit:2,
-    reservedSeats:["A1"],
-    selectedSeats:[],
+    seatLimit: 2,
+    reservedSeats: ["A1"],
+    selectedSeats: [],
   },
 };

src/context/Index.jsx

@@ -47,7 +47,7 @@ export function ContextProvider({ children }) {
       const existingUser = await api.loginUser(mobile);
 
       if (existingUser) {
-        toast.error("Mobile number already registered. Please log in.");
+        toast.info("You're registered! Log in instead");
         navigate("/");
         return;
       }

src/pages/SeatBooking.jsx

@@ -72,7 +72,7 @@ function SeatBooking() {
     try {
       const validSeats = seats.filter((s) => typeof s === "string" && s.trim());
 
-      if (validSeats.length < initialLimit) {
+      if (validSeats.length !== initialLimit) {
         toast.info(`Please select ${initialLimit} seat(s).`);
         return;
       }
@@ -112,7 +112,7 @@ function SeatBooking() {
       sessionStorage.setItem("selectedSeats", JSON.stringify(validSeats));
 
       if (typeof clearSelection === "function") clearSelection();
-      navigate("/Ticket", {
+      navigate("/ticket", {
         state: {
           success: true,
           bookingInfo: {

src/pages/SeatLimit.jsx

@@ -3,6 +3,7 @@ import Counter from "../components/Top-level/Counter/Counter";
 import { useAppContext } from "../context/Index";
 import styles from "./Styles.module.css";
 import { MdEventSeat } from "react-icons/md";
+import { Header } from "../components/Layout/Card/Header";
 export const SeatLimit = () => {
   const totalSeats = 60;
   const { reservedSeats } = useAppContext();
@@ -17,7 +18,11 @@ export const SeatLimit = () => {
     <>
       <div className={styles.seat}>
         <MdEventSeat className={styles.icon} />
-        <p className={styles.line}>Remaining Seats Available: {Seat}</p>
+        <Header
+          title={`Remaining Seats Available:${Seat}`}
+          Color="#fff"
+          className={styles.line}
+        />
       </div>
       <Counter onSubmit={handleSeat} />
     </>

src/pages/Styles.module.css

@@ -40,11 +40,12 @@
 .line {
   font-size: 1rem;
   color: #c7d2fe;
-  font-weight: 500;
+  font-weight: 300;
   margin-bottom: 1rem;
   display: flex;
   justify-content: center;
-  margin-left: 1rem;
+  margin-left: 2.9rem;
+  flex-wrap: wrap;
 }
 .line p {
   text-align: center;
@@ -52,8 +53,10 @@
 .icon {
   color: #fff;
   position: absolute;
-  margin-left: 0.5rem;
-  margin-top: 4px;
+  margin-left: 0;
+  margin-top: 1rem;
+  height: 2rem;
+  width: 2rem;
 }
 
 @media (min-width: 768px) {
@@ -71,9 +74,12 @@
     min-width: 40rem;
   }
   .icon {
-    margin-left: 3.5rem;
+    margin-left: 0.5rem;
+    margin-top: 0.3rem;
+    height: 1.5rem;
+    width: 1.5rem;
   }
   .line {
-    margin-left: 2rem;
+    margin-left: 2.5rem;
   }
 }