-
-
-
-
- ) : (
- Venue Room Selection
+ <> +
+ {items.length === 0 &&
+
+
- No items selected
} +| Name | +Unit Cost | +Quantity | +Subtotal | +
|---|---|---|---|
| {item.name} | +${item.cost} | ++ {item.type === "meals" || item.numberOfPeople + ? ` For ${numberOfPeople} people` + : item.quantity} + | ++ {item.type === "meals" || item.numberOfPeople + ? `${item.cost * numberOfPeople}` + : `${item.cost * item.quantity}`} + | +
- {venueItems.map((item, index) => (
-
-
- {/*Necessary Add-ons*/}
-
-
-
- 
-
- {item.name}
- ${item.cost}
-
- {venueItems[index].name === "Auditorium Hall (Capacity:200)" ? (
-
- <>
-
-
- {venueItems[index].quantity > 0 ? ` ${venueItems[index].quantity}` : "0"}
-
+
+ );
+ };
+ 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 navigateToProducts = (idType) => {
+ if (idType == "#venue" || idType == "#addons" || idType == "#meals") {
+ if (showItems) {
+ // Check if showItems is false
+ setShowItems(!showItems); // Toggle showItems to true only if it's currently false
+ }
+ }
+ };
+ const totalCosts = {
+ venue: venueTotalCost,
+ av: avTotalCost,
+ meals: mealsTotalCost,
+ };
+
+ return (
+ <>
+
+
- ))}
Conference Expense Planner
+
+
-
+ navigateToProducts("#venue")}>
+ Venue
+
+ navigateToProducts("#addons")}>
+ Add-ons
+
+ navigateToProducts("#meals")}>
+ Meals
+
+
-
- ) : (
-
-
-
- {venueItems[index].quantity > 0 ? ` ${venueItems[index].quantity}` : "0"}
-
-
-
-
-
- )}
- Total Cost: ${venueTotalCost}
-
-
-
-
-
- {/* Meal Section */}
-
-
-
-
- Add-ons Selection
- -
-
-
- Total Cost:
-
-
-
-
-
-
-
-
- Meals Selection
-
-
-
-
-
-
- Total Cost:
-
-
-
-
+ {!showItems ? (
+
+
+ );
};
export default ConferenceEvent;
diff --git a/src/TotalCost.jsx b/src/TotalCost.jsx
index 845abca9..412e3b39 100644
--- a/src/TotalCost.jsx
+++ b/src/TotalCost.jsx
@@ -1,27 +1,25 @@
-import React, { useState, useEffect } from 'react';
+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*/}
+
+
+ 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"}
+
+
- )
- }
+ )}
+ Total Cost: ${venueTotalCost}
+
+
+ {/* Meal Section */}
+
+
+ Add-ons Selection
+
+ {avItems.map((item, index) => (
+
+
+
+ ))}
+
+
+
+ {item.name}
+ ${item.cost}
+
+
+ {item.quantity}
+
+
+ Total Cost: {avTotalCost}
+
+
-
-
- );
+
+
+ Meals Selection
+
+
+
+
+
+ setNumberOfPeople(parseInt(e.target.value))
+ }
+ min="1"
+ />
+
+
+ {mealsItems.map((item, index) => (
+
+
+
+ ))}
+
+ handleMealSelection(index)}
+ />
+
+
+ ${item.cost}
+ Total Cost: {mealsTotalCost}
+
+ )}
+
-
Total cost for the event
++
Total cost for the event
+- + ${total_amount}
- -
-
-
+
+