ibm-developer-skills-network · zinoothant · Apr 3, 2025 · Apr 3, 2025 · Apr 3, 2025
diff --git a/src/AboutUs.jsx b/src/AboutUs.jsx
@@ -4,7 +4,7 @@ const AboutUs = () => {
     return (
         <div className="aboutus_container">
             <p>
-                Welcome to BudgetEase Solutions, your trusted partner in simplifying budget management and financial solutions. At BudgetEase, we understand the importance of effective budget planning and strive to provide intuitive, user-friendly solutions to meet the diverse needs of our clients.
+                Welcome to BudgetEase Solutions Company limited, your trusted partner in simplifying budget management and financial solutions. At BudgetEase, we understand the importance of effective budget planning and strive to provide intuitive, user-friendly solutions to meet the diverse needs of our clients.
             </p>
             <p>With a commitment to efficiency and innovation, we empower individuals and businesses to take control of their finances and achieve their goals with ease.</p>
             <p>At BudgetEase Solutions, our mission is to make budgeting effortless and accessible for everyone. Whether you're a small business owner, a busy professional, or an individual looking to manage your personal finances, we offer tailored solutions to streamline your budgeting process.

diff --git a/src/App.css b/src/App.css
@@ -7,7 +7,7 @@
 .first_page {
   display: flex;
   height: 100vh;
-  background-image: url("https://cdn.pixabay.com/photo/2018/07/05/14/45/conference-3518465_1280.jpg");
+  background-image: url("https://cdn.pixabay.com/photo/2025/03/28/17/58/flowers-9499374_1280.jpg");
   background-size: cover;
   background-position: center;
   justify-content: center;

diff --git a/src/ConferenceEvent.jsx b/src/ConferenceEvent.jsx
@@ -1,12 +1,16 @@
 import React, { useState } from "react";
 import "./ConferenceEvent.css";
 import TotalCost from "./TotalCost";
+import { toggleMealSelection } from "./mealsSlice";
+import { incrementAvQuantity, decrementAvQuantity } from "./avSlice";
 import { useSelector, useDispatch } from "react-redux";
 import { incrementQuantity, decrementQuantity } from "./venueSlice";
 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,42 +33,123 @@ const ConferenceEvent = () => {
         }
       };
     const handleIncrementAvQuantity = (index) => {
-    };
+    dispatch(incrementAvQuantity(index));
+};
 
-    const handleDecrementAvQuantity = (index) => {
-    };
+const handleDecrementAvQuantity = (index) => {
+    dispatch(decrementAvQuantity(index));
+};
 
-    const handleMealSelection = (index) => {
-
-    };
+const handleMealSelection = (index) => {
+    const item = mealsItems[index];
+    if (item.selected && item.type === "mealForPeople") {
+        // Ensure numberOfPeople is set before toggling selection
+        const newNumberOfPeople = item.selected ? numberOfPeople : 0;
+        dispatch(toggleMealSelection(index, newNumberOfPeople));
+    }
+    else {
+        dispatch(toggleMealSelection(index));
+    }
+};
 
-    const getItemsFromTotalCost = () => {
-        const items = [];
-    };
+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({ ...item, 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} people`
+                                    : 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;
-          });
+            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;
-      };
+    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 (
         <>
@@ -157,10 +242,22 @@ 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>
 
                             {/* Meal Section */}
@@ -173,20 +270,36 @@ const ConferenceEvent = () => {
                                 </div>
 
                                 <div className="input-container venue_selection">
-
+                                <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>
                                 <div className="meal_selection">
-
-                                </div>
-                                <div className="total_cost">Total Cost: </div>
-
+    {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: {mealsTotalCost}</div>
 
                             </div>
                         </div>
                     ) : (
                         <div className="total_amount_detail">
-                            <TotalCost totalCosts={totalCosts} handleClick={handleToggleItems} ItemsDisplay={() => <ItemsDisplay items={items} />} />
-                        </div>
+    <TotalCost totalCosts={ totalCosts } ItemsDisplay={() => <ItemsDisplay items={ items } />} />
+</div>
                     )
                 }
 
@@ -200,3 +313,5 @@ const ConferenceEvent = () => {
 };
 
 export default ConferenceEvent;
+
+// By Zin
diff --git a/src/TotalCost.jsx b/src/TotalCost.jsx
@@ -1,27 +1,23 @@
 import React, { useState, useEffect } from 'react';
 import "./TotalCost.css";
-
 const TotalCost = ({ totalCosts, ItemsDisplay }) => {
-
-
-  return (
-    <div className="pricing-app">
-      <div className="display_box">
-        <div className="header">
-          <p className="preheading"><h3>Total cost for the event</h3></p>
-        </div>
-        <div>
-          <h2 id="pre_fee_cost_display" className="price">
-           
-          </h2>
-         
-            <div>
-
+    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>
+                <div>
+                <h2 id="pre_fee_cost_display" className="price">
+    ${total_amount}
+</h2>
+<div className="render_items">
+    <ItemsDisplay />
+</div>
+                </div>
             </div>
         </div>
-      </div>
-    </div>
-  );
+    );
 };
-
-export default TotalCost;
+export default TotalCost;
diff --git a/src/avSlice.js b/src/avSlice.js
@@ -1,18 +1,55 @@
-import { createSlice } from "@reduxjs/toolkit";
+    import { createSlice } from "@reduxjs/toolkit";
 
 export const avSlice = createSlice({
   name: "av",
   initialState: [
-
+        {
+        img: "https://cdn.pixabay.com/photo/2012/03/01/01/10/business-20031_960_720.jpg",
+        name: "Projectors",
+        cost: 200,
+        quantity: 0,
+    },
+    {
+        img: "https://cdn.pixabay.com/photo/2019/04/07/09/41/speakers-4109274_960_720.jpg",
+        name: "Speaker",
+        cost: 35,
+        quantity: 0,
+    },
+    {
+        img: "https://cdn.pixabay.com/photo/2019/01/11/01/54/public-speaking-3926344_960_720.jpg",
+        name: "Microphones",
+        cost: 45,
+        quantity: 0,
+    },
+    {
+        img: "https://cdn.pixabay.com/photo/2017/10/30/19/24/whiteboard-2903269_960_720.png",
+        name: "Whiteboards",
+        cost: 80,
+        quantity: 0,
+    },
+
+    {
+        img: "https://cdn.pixabay.com/photo/2013/12/29/10/15/directory-235079_960_720.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
@@ -1,17 +1,19 @@
-// mealsSlice.js
 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;
+  },
   },
 });
 
 export const { toggleMealSelection } = mealsSlice.actions;
-
-export default mealsSlice.reducer;
+export default mealsSlice.reducer;
diff --git a/src/store.js b/src/store.js
@@ -1,9 +1,12 @@
-// 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,
   },
-});
+});