Merge pull request #37 from DushanSenadheera/amith

Add Admin Bookings

client/src/components/Admin-Bookings/Admin_Booking_Table.jsx

@@ -0,0 +1,153 @@
+import React, { useState } from "react";
+import Booking_Data from "../../helpers/Admin_Booking_Data";
+
+const BookingTable = () => {
+  const [bookedTickets, setBookedTickets] = useState(Booking_Data);
+
+  const [formData, setFormData] = useState({
+    user: "",
+    movie: "",
+    date: "",
+    time: "",
+    category: "Economy",
+    seats: "",
+    status: "Payment Successful",
+  });
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prevData) => ({ ...prevData, [name]: value }));
+  };
+
+  const handleBooking = () => {
+    const newTicket = { ...formData };
+    setBookedTickets((prevTickets) => [...prevTickets, newTicket]);
+    setFormData({
+      user: "",
+      movie: "",
+      date: "",
+      time: "",
+      category: "Economy",
+      seats: "",
+      status: "Payment Successful",
+    });
+  };
+
+  const handleRemove = (index) => {
+    const updatedTickets = [...bookedTickets];
+    updatedTickets.splice(index, 1);
+    setBookedTickets(updatedTickets);
+  };
+
+  return (
+    <div className="booking-container">
+      <div className="booking-table-container">
+        <div className="booking-table">
+          <table>
+            <thead>
+              <tr>
+                <th>User</th>
+                <th>Movie</th>
+                <th>Date</th>
+                <th>Time</th>
+                <th>Category</th>
+                <th>Seats</th>
+                <th>Status</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {bookedTickets.map((ticket, index) => (
+                <tr
+                  key={index}
+                  className={`${
+                    index % 2 === 0 ? "even-row" : "odd-row"
+                  } ${ticket.status.toLowerCase()}`}
+                >
+                  <td>{ticket.user}</td>
+                  <td>{ticket.movie}</td>
+                  <td>{ticket.date}</td>
+                  <td>{ticket.time}</td>
+                  <td>{ticket.category}</td>
+                  <td>{ticket.seats}</td>
+                  <td>{ticket.status}</td>
+                  <td>
+                    <button onClick={() => handleRemove(index)}>Remove</button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div className="booking-form">
+        <form>
+          <label>User:</label>
+          <input
+            type="text"
+            name="user"
+            value={formData.user}
+            onChange={handleChange}
+          />
+
+          <label>Movie:</label>
+          <input
+            type="text"
+            name="movie"
+            value={formData.movie}
+            onChange={handleChange}
+          />
+
+          <label>Date:</label>
+          <input
+            type="date"
+            name="date"
+            value={formData.date}
+            onChange={handleChange}
+          />
+
+          <label>Time:</label>
+          <input
+            type="time"
+            name="time"
+            value={formData.time}
+            onChange={handleChange}
+          />
+
+          <label>Category:</label>
+          <select
+            name="category"
+            value={formData.category}
+            onChange={handleChange}
+          >
+            <option value="Economy">Economy</option>
+            <option value="Business">Business</option>
+            <option value="First Class">First Class</option>
+          </select>
+
+          <label>Seats:</label>
+          <input
+            type="text"
+            name="seats"
+            value={formData.seats}
+            onChange={handleChange}
+          />
+
+          <label>Status:</label>
+          <select name="status" value={formData.status} onChange={handleChange}>
+            <option value="Payment Successful">Payment Successful</option>
+            <option value="Pending">Pending</option>
+            <option value="Cancel">Cancel</option>
+          </select>
+
+          <button type="button" onClick={handleBooking}>
+            Book a Ticket
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default BookingTable;

client/src/helpers/Admin_Booking_Data.jsx

@@ -0,0 +1,94 @@
+const Booking_Data = [
+  {
+    user: "u_name01",
+    movie: "Avatar",
+    date: "2024-01-01",
+    time: "08.00pm",
+    category: "Economy",
+    seats: "12,13,14",
+    status: "Payment Successful",
+  },
+  {
+    user: "u_name02",
+    movie: "Batman",
+    date: "2024-02-01",
+    time: "05.00pm",
+    category: "First Class",
+    seats: "1,2",
+    status: "Cancel",
+  },
+  {
+    user: "u_name03",
+    movie: "Avatar",
+    date: "2024-01-01",
+    time: "08.00pm",
+    category: "Economy",
+    seats: "18,19",
+    status: "Payment Pending",
+  },
+  {
+    user: "u_name04",
+    movie: "Avatar",
+    date: "2024-01-01",
+    time: "08.00pm",
+    category: "Economy",
+    seats: "30,31",
+    status: "Payment Successful",
+  },
+  {
+    user: "u_name05",
+    movie: "Avatar",
+    date: "2024-01-01",
+    time: "08.00pm",
+    category: "Economy",
+    seats: "24,25",
+    status: "Payment Successful",
+  },
+  {
+    user: "u_name06",
+    movie: "Avatar",
+    date: "2024-01-01",
+    time: "08.00pm",
+    category: "Business",
+    seats: "7,8",
+    status: "Payment Successful",
+  },
+  {
+    user: "u_name07",
+    movie: "Avatar",
+    date: "2024-01-01",
+    time: "08.00pm",
+    category: "First Class",
+    seats: "5",
+    status: "Payment Successful",
+  },
+  {
+    user: "u_name08",
+    movie: "Avatar",
+    date: "2024-01-01",
+    time: "08.00pm",
+    category: "Business",
+    seats: "13",
+    status: "Payment Successful",
+  },
+  {
+    user: "u_name09",
+    movie: "Avatar",
+    date: "2024-01-01",
+    time: "08.00pm",
+    category: "Business",
+    seats: "9,10,11,12,15",
+    status: "Cancel",
+  },
+  {
+    user: "u_name10",
+    movie: "Avatar",
+    date: "2024-01-01",
+    time: "08.00pm",
+    category: "Economy",
+    seats: "20,21",
+    status: "Payment Successful",
+  },
+];
+
+export default Booking_Data;

client/src/index.css

@@ -1,21 +1,21 @@
-:root{
+/* :root{
   background-color: #161616;
   color: #D80000;
 }
 
 html{
   background-color: #f5f5f5;
   font-family: 'Roboto', sans-serif;
-} 
+}  */
 
 *{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
-p{
+/* p{
   color: #ffffff;
 
-} 
+}  */
 

client/src/pages/Admin/Admin_Bookings.jsx

@@ -1,9 +1,13 @@
-function Admin_Booking() {
+import "./Admin_Bookings.css";
+import React from "react";
+import BookingTable from "../components/Admin-Bookings/Admin_Booking_Table";
+
+const BookingPage = () => {
   return (
-    <div>
-      <h1>bookings</h1>
+    <div className="Admin_Booking_Page">
+      <BookingTable />
     </div>
   );
-}
+};
 
-export default Admin_Booking;
+export default BookingPage;

client/src/pages/Admin/Admin_Layout.css

@@ -5,6 +5,7 @@
 
 .Header-Section {
     top: 0;
+    left: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -42,6 +43,8 @@
     margin-top: 4rem;
     display: flex;
     flex-direction: row;
+    height: 100vh;
+    width: 100%;
 }
 
 .Left-Side-Navbar {