Main dev

package.json

@@ -5,12 +5,15 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "predeploy": "npm run build",
+    "deploy":"gh-pages -d dist",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite build; vite preview --host"
   },
   "dependencies": {
     "@reduxjs/toolkit": "^2.2.3",
+    "gh-pages": "^6.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^9.1.1"

src/ConferenceEvent.jsx

@@ -3,10 +3,15 @@ import "./ConferenceEvent.css";
 import TotalCost from "./TotalCost";
 import { useSelector, useDispatch } from "react-redux";
 import { incrementQuantity, decrementQuantity } from "./venueSlice";
+import { incrementAvQuantity, decrementAvQuantity } from "./avSlice";
+import { toggleMealSelection } from "./mealsSlice";
+//items
 const ConferenceEvent = () => {
     const [showItems, setShowItems] = useState(false);
     const [numberOfPeople, setNumberOfPeople] = useState(1);
     const venueItems = useSelector((state) => state.venue);
+    const avItems = useSelector((state)=> state.av);
+    const mealsItems = useSelector((state)=>state.meals)
     const dispatch = useDispatch();
     const remainingAuditoriumQuantity = 3 - venueItems.find(item => item.name === "Auditorium Hall (Capacity:200)").quantity;
 
@@ -29,35 +34,116 @@ const ConferenceEvent = () => {
         }
       };
     const handleIncrementAvQuantity = (index) => {
+      dispatch(incrementAvQuantity(index));
     };
 
     const handleDecrementAvQuantity = (index) => {
+      dispatch(decrementAvQuantity(index));
     };
 
     const handleMealSelection = (index) => {
-
+       const item = mealsItems[index];
+       if(item.selected && item.type === "mealForPeople"){
+        //ensure numberOf People is selected before toggling selection
+        const newNumberOfPeople = item.selected ? numberOfPeople : 0 ;
+        dispatch(toggleMealSelection(index, newNumberOfPeople));
+       }else{
+        dispatch(toggleMealSelection(index));
+       }
     };
 
     const getItemsFromTotalCost = () => {
         const items = [];
+        venueItems.forEach((item)=>{
+          if (item.quantity>0){
+            items.push({...item, type: "venue"});
+          }
+        });
+        avItems.forEach((item)=>{
+          if(item.quantity > 0 && 
+            !items.some((i)=> i.name === item.name && i.type === "av")){
+              items.push({...items, type: "av"})
+            }
+        });
+        mealsItems.forEach((item)=>{
+          if (item.selected){
+            const itemForDisplay = {...item, type: "meals"};
+            if (item.numberOfPeople){
+              itemForDisplay.numberOfPeople = numberOfPeople;
+            }
+            items.push(itemForDisplay);
+          }
+        });
+        return items;
     };
 
     const items = getItemsFromTotalCost();
 
     const ItemsDisplay = ({ items }) => {
-
+          console.log(items);
+          return <>
+          <div className="display_box1" >
+              {items.length === 0 && <p>No items selected</p>}
+              <table className="table_item_data">
+                <thead>
+                  <tr>
+                    <th>Name</th>
+                    <th>Unit Cost</th>
+                    <th>Quantity</th>
+                    <th>Subtotal</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {items.map((item, index)=>(
+                    <tr key={index}>
+                      <td>{item.name}</td>
+                      <td>{item.cost}</td>
+                      <td>
+                        {item.type === "meals" || item.numberOfPeople
+                        ? `For ${numberOfPeople} peopls` : item.quantity
+                        }
+                      </td>
+                      <td>
+                        {item.type === "meals" || item.numberOfPeople
+                        ? `${item.cost * numberOfPeople}`
+                        : `${item.cost * item.quantity}`
+                        }
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+          </div>
+          </>
     };
     const calculateTotalCost = (section) => {
         let totalCost = 0;
         if (section === "venue") {
           venueItems.forEach((item) => {
             totalCost += item.cost * item.quantity;
           });
+        }else if(section === "av"){
+            avItems.forEach((item)=>{
+              totalCost += item.cost * item.quantity;
+            });
+        }else if(section === "meals"){
+          mealsItems.forEach((item) =>{
+            if (item.selected){
+              totalCost += item.cost * numberOfPeople;
+            }
+          })
         }
         return totalCost;
       };
     const venueTotalCost = calculateTotalCost("venue");
-
+    const avTotalCost = calculateTotalCost('av');
+    const mealsTotalCost = calculateTotalCost("meals")
+    const totalCosts = {
+      venue: venueTotalCost,
+      av: avTotalCost,
+      meals: mealsTotalCost,
+      };
+
     const navigateToProducts = (idType) => {
         if (idType == '#venue' || idType == '#addons' || idType == '#meals') {
           if (showItems) { // Check if showItems is false
@@ -157,9 +243,25 @@ const ConferenceEvent = () => {
 
                                 </div>
                                 <div className="addons_selection">
+                                  {
+                                    avItems.map((item, index)=>(
+                                      <div className="av_data venue_main" key={index}>
+                                        <div className="img">
+                                            <img src={item.img} alt={item.name}/>
+                                        </div>
+                                        <div className="text">{item.name}</div>
+                                        <div>${item.cost}</div>
+                                          <div className="addons_btn">
+                                                <button className="btn-warning" onClick={()=>handleDecrementAvQuantity(index)}>&ndash;</button>
+                                                <span className="quantity-value">{item.quantity}</span>
+                                                <button className="btn-success" onClick={()=>handleIncrementAvQuantity(index)}>&#43;</button>
+                                          </div>
+                                      </div>
+                                    ))
+                                  }
 
                                 </div>
-                                <div className="total_cost">Total Cost:</div>
+                                <div className="total_cost">Total Cost: {avTotalCost}</div>
 
                             </div>
 
@@ -173,12 +275,31 @@ const ConferenceEvent = () => {
                                 </div>
 
                                 <div className="input-container venue_selection">
-
+                                    <label htmlFor="numberOfPeople"><h3>Number of people:</h3></label>
+                                    <input type="number" className="input_box5" id="numberOfPeople" value={numberOfPeople}
+                                      onChange={(e)=>setNumberOfPeople(parseInt(e.target.value))}
+                                      min="1"
+                                    />
+
                                 </div>
                                 <div className="meal_selection">
-
+                                    {
+                                      mealsItems.map((item, index)=>(
+                                        <div className="meal_item" key={index} style={{padding: 15}}>
+                                            <div className="inner">
+                                                <input type="checkbox"
+                                                  id={`meal_${index}`}
+                                                  checked={item.selected}
+                                                  onChange={()=>handleMealSelection(index)}
+                                                />
+                                                <label htmlFor={`meal_${index}`}>{item.name}</label>
+                                            </div>
+                                            <div className="meal_cost">${item.cost}</div>
+                                        </div> 
+                                      ))
+                                    }
                                 </div>
-                                <div className="total_cost">Total Cost: </div>
+                                <div className="total_cost">Total Cost: {mealsTotalCost}</div>
 
 
                             </div>

src/TotalCost.jsx

@@ -2,21 +2,23 @@ import React, { useState, useEffect } from 'react';
 import "./TotalCost.css";
 
 const TotalCost = ({ totalCosts, ItemsDisplay }) => {
+
+  const total_amount = totalCosts.venue + totalCosts.av + totalCosts.meals;
 
 
   return (
     <div className="pricing-app">
       <div className="display_box">
         <div className="header">
-          <p className="preheading"><h3>Total cost for the event</h3></p>
+          <div className="preheading"><h3>Total cost for the event</h3></div>
         </div>
         <div>
           <h2 id="pre_fee_cost_display" className="price">
-
+              ${total_amount}
           </h2>
 
-            <div>
-
+            <div className='render_items'>
+                <ItemsDisplay/>
             </div>
         </div>
       </div>

src/avSlice.js

@@ -3,16 +3,51 @@ import { createSlice } from "@reduxjs/toolkit";
 export const avSlice = createSlice({
   name: "av",
   initialState: [
-
+    {
+      img: "https://pixabay.com/images/download/business-20031_640.jpg",
+      name: "Projectors",
+      cost: 200,
+      quantity: 0,
+    },
+    {
+      img: "https://pixabay.com/images/download/speakers-4109274_640.jpg",
+      name: "Speaker",
+      cost: 35,
+      quantity: 0,
+    },
+    {
+      img: "https://pixabay.com/images/download/public-speaking-3926344_640.jpg",
+      name: "Microphones",
+      cost: 45,
+      quantity: 0,
+    },
+    {
+      img: "https://pixabay.com/images/download/whiteboard-2903269_640.png",
+      name: "Whiteboards",
+      cost: 80,
+      quantity: 0,
+    },
+    {
+      img: "https://pixabay.com/images/download/signpost-235079_640.jpg",
+      name: "Signage",
+      cost: 80,
+      quantity: 0,
+    },
   ],
 
 
   reducers: {
     incrementAvQuantity: (state, action) => {
-
+      const item = state[action.payload];
+      if (item){
+        item.quantity++;
+      }
     },
     decrementAvQuantity: (state, action) => {
-
+        const item = state[action.payload];
+        if (item && item.quantity > 0){
+          item.quantity--;
+        }
     },
   },
 });

src/mealsSlice.js

@@ -4,10 +4,14 @@ import { createSlice } from '@reduxjs/toolkit';
 export const mealsSlice = createSlice({
   name: 'meals',
   initialState: [
-
+    { name: 'Breakfast', cost: 50, selected: false },
+    { name: 'High Tea', cost: 25, selected: false },
+    { name: 'Lunch', cost: 65, selected: false },
+    { name: 'Dinner', cost: 70, selected: false },
   ],
   reducers: {
     toggleMealSelection: (state, action) => {
+      state[action.payload].selected = !state[action.payload].selected
     },
   },
 });

src/store.js

@@ -1,9 +1,15 @@
 // store.js
 import { configureStore } from '@reduxjs/toolkit';
 import venueReducer from './venueSlice';
+import avReducer from "./avSlice";
+import mealsReducer from "./mealsSlice";
 
 export default configureStore({
   reducer: {
     venue: venueReducer,
+    av: avReducer,
+    meals: mealsReducer,
   },
 });
+
+

vite.config.js

@@ -3,5 +3,6 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: "/conference_event_planner",
   plugins: [react()],
 })