-
-
+
);
};
diff --git a/src/avSlice.js b/src/avSlice.js
index cdd79aac..e542a887 100644
--- a/src/avSlice.js
+++ b/src/avSlice.js
@@ -1,18 +1,71 @@
+// avSlice.js
import { createSlice } from "@reduxjs/toolkit";
export const avSlice = createSlice({
name: "av",
+
initialState: [
-
- ],
+ // Projectors
+ {
+ //img: "https://pixabay.com/photos/business-computer-conference-20031/",
+ img: "https://cdn.pixabay.com/photo/2012/03/01/01/10/business-20031_1280.jpg",
+ name: "Projectors",
+ cost: 200,
+ quantity: 0,
+ },
+
+ // Speaker
+ {
+ img: "https://pixabay.com/images/download/speakers-4109274_640.jpg",
+ //img: "https://cdn.pixabay.com/photo/2019/04/07/09/41/speakers-4109274_1280.jpg",
+ name: "Speaker",
+ cost: 35,
+ quantity: 0,
+ },
+
+ // Mic
+ {
+ img: "https://pixabay.com/images/download/public-speaking-3926344_640.jpg",
+ //img: "https://cdn.pixabay.com/photo/2019/01/11/01/54/public-speaking-3926344_1280.jpg",
+ name: "Microphones",
+ cost: 45,
+ quantity: 0,
+ },
+ // Whiteboards
+ {
+ img: "https://pixabay.com/images/download/whiteboard-2903269_640.png",
+ //img: "https://cdn.pixabay.com/photo/2017/10/30/19/24/whiteboard-2903269_1280.png",
+ name: "Whiteboards",
+ cost: 80,
+ quantity: 0,
+ },
+
+ // Signaling
+ {
+ img: "https://pixabay.com/images/download/signpost-235079_640.jpg",
+ //img: "https://cdn.pixabay.com/photo/2013/12/29/10/15/directory-235079_1280.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--;
+ }
},
},
});
diff --git a/src/mealsSlice.js b/src/mealsSlice.js
index faf8138a..11b08bb6 100644
--- a/src/mealsSlice.js
+++ b/src/mealsSlice.js
@@ -3,11 +3,17 @@ 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;
},
},
});
diff --git a/src/store.js b/src/store.js
index f05b9f8f..603d8ae9 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,9 +1,14 @@
// 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,
},
});
diff --git a/src/venueSlice.js b/src/venueSlice.js
index 350d353a..1d6b006e 100644
--- a/src/venueSlice.js
+++ b/src/venueSlice.js
@@ -3,49 +3,61 @@ import { createSlice } from "@reduxjs/toolkit";
export const venueSlice = createSlice({
name: "venue",
+
initialState: [
+ // Conference Room
{
img: "https://pixabay.com/images/download/chairs-2181916_640.jpg",
name: "Conference Room (Capacity:15)",
cost: 3500,
quantity: 0,
},
+
+ // Auditorium Hall
{
img: "https://pixabay.com/images/download/event-venue-1597531_640.jpg",
name: "Auditorium Hall (Capacity:200)",
cost: 5500,
quantity: 0,
},
+
+ // Presentation Room
{
img: "https://pixabay.com/images/download/convention-center-3908238_640.jpg",
name: "Presentation Room (Capacity:50)",
cost: 700,
quantity: 0,
},
+
+ // Large Meeting Room
{
img: "https://pixabay.com/images/download/chairs-2181916_640.jpg",
name: "Large Meeting Room (Capacity:10)",
cost: 900,
quantity: 0,
},
+
+ // Small Meeting Room
{
img: "https://pixabay.com/images/download/laptops-593296_640.jpg",
name: "Small Meeting Room (Capacity:5)",
cost: 1100,
quantity: 0,
},
-
+
],
+
reducers: {
-
incrementQuantity: (state, action) => {
const { payload: index } = action;
if (state[index]) {
if (state[index].name === " Auditorium Hall (Capacity:200)" && state[index].quantity >= 3) {
- return; }
+ return;
+ }
state[index].quantity++;
}
},
+
decrementQuantity: (state, action) => {
const { payload: index } = action;
if (state[index] && state[index].quantity > 0) {
-
-
- Venue Room Selection
-
- {venueItems.map((item, index) => (
-
+
+ )
};
export default ConferenceEvent;
diff --git a/src/TotalCost.jsx b/src/TotalCost.jsx
index 845abca9..5bc3a553 100644
--- a/src/TotalCost.jsx
+++ b/src/TotalCost.jsx
@@ -1,25 +1,35 @@
+// TotalCost.jsx
import React, { useState, useEffect } from 'react';
+
import "./TotalCost.css";
+
const TotalCost = ({ totalCosts, ItemsDisplay }) => {
-
+ const total_amount = totalCosts.venue + totalCosts.av + totalCosts.meals;
return (
-
-
- {/*Necessary Add-ons*/}
-
- 
-
- {item.name}
- ${item.cost}
-
- {venueItems[index].name === "Auditorium Hall (Capacity:200)" ? (
-
- <>
-
-
- {venueItems[index].quantity > 0 ? ` ${venueItems[index].quantity}` : "0"}
-
-
-
- ) : (
-
-
-
-
- {venueItems[index].quantity > 0 ? ` ${venueItems[index].quantity}` : "0"}
-
-
-
-
+ }
+ }
+
+ const totalCosts = {
+ venue: venueTotalCost,
+ av: avTotalCost,
+ meals: mealsTotalCost,
+ };
+
+ return (
+ <>
+
+
- ))}
+
Conference Expense Planner
+
- Total Cost: ${venueTotalCost}
-
-
+
+
+
+ ) : (
+
+ {!showItems
+ ?
+ (
+
+
+ {/* Venue Section */}
+
-
+
-
+
- Venue Room Selection
+
+
-
+ {venueItems.map((item, index) => (
+
-
+
+ ))}
+
+
+
+ {item.name}
+ ${item.cost}
+
+
+ {venueItems[index].name === "Auditorium Hall (Capacity:200)" ? (
+
+ <>
+
+
+
+ {venueItems[index].quantity > 0 ? ` ${venueItems[index].quantity}` : "0"}
+
+
+
+
+ ) : (
+
+
+
+
+
+ {venueItems[index].quantity > 0 ? ` ${venueItems[index].quantity}` : "0"}
+
+
+
+
+
+
+ )}
+ Add-ons Selection
+Total Cost: ${venueTotalCost}
+
+ {/*Necessary Add-ons*/}
+
+
+
-
+
- Add-ons Selection
+Total Cost:
+
+ {avItems.map((item, index) => (
+
-
+
+ ))}
+
+
+
+
+
+ {item.name}
+
+
+
+ ${item.cost}
+
+
+
+
+
+
+ {item.quantity}
+
+
+
+
+
+ Total Cost: ${avTotalCost}
+
- {/* Meal Section */}
+
+ {/* Meal Section */}
+
+
-
+ ))}
+
+
+
+
- Meals Selection
+Meals Selection
-
+
-
+
+
+ setNumberOfPeople(parseInt(e.target.value))}
+ min='1'
+ />
+
+
+
- ) : (
-
+ {mealsItems.map((item, index) => (
+
-
-
-
+
+
+ handleMealSelection(index)}
+ />
-
- Total Cost:
+
+
+ ${item.cost}
+
-
-
- )
- }
+
+ Total Cost: ${mealsTotalCost}
+
+
+
-
+ )
+ }
- );
+
+
-
+
Total cost for the event
++
+ Total cost for the event +
+- + ${total_amount}
- -
-
-
+
+
+
+