Canteen management

App.js

import React, { useState } from "react";

import DailySpecial from "./components/DailySpecial";

import OrderCounter from "./components/OrderCounter";

import MenuList from "./components/MenuList";

import CanteenApp from "./components/CanteenApp";

import DiscountCalculator from "./components/DiscountCalculator";

import OrderDetails from "./components/OrderDetails";

import Cart from "./components/Cart";

function App() {

const [cartItems, setCartItems] = useState([]);

const addToCart = (item) => {

setCartItems((prevItems) => [...prevItems, item]);

};

const removeFromCart = (id) => {

setCartItems(cartItems.filter((item, index) => index !== id));

};

const menuItems = [

{ id: 1, name: "Burger", price: 5.99 },

{ id: 2, name: "Tacos", price: 8.99 },

{ id: 3, name: "Pasta", price: 7.49 },

];

return (

<div className="container">

<h1 className="text-center my-4">Canteen Management Dashboard</h1>

<OrderCounter />

<MenuList items={menuItems} addToCart={addToCart} />

<CanteenApp />

<DiscountCalculator />

<OrderDetails orderId={101} customerName="John Doe" amount={15.99} />

<Cart cartItems={cartItems} removeFromCart={removeFromCart} />

</div>

);

export default App;

AddMenuItem.jsx

import React, { Component } from "react";

class AddMenuItem extends Component {

constructor(props) {

super(props);

this.state = {

name: "",

price: "",

};

handleChange = (e) => {

const { name, value } = e.target;

this.setState({ [name]: value });

};

handleSubmit = (e) => {

const { name, price } = this.state;

// Validate input

if (name.trim() === "" || price.trim() === "" || isNaN(price)) {

alert("Please enter a valid name and price.");

return;

// Pass the new item to the parent component

this.props.onAdd({ name, price: parseFloat(price) });

// Reset the form

this.setState({ name: "", price: "" });

};

render() {

return (

<form onSubmit={this.handleSubmit}>

<div>

<label>

Item Name:

<input

type="text"

name="name"

value={this.state.name}

onChange={this.handleChange}

placeholder="Enter item name"

/>

</label>

</div>
 <div>

<label>

Price:

<input

type="text"

name="price"

value={this.state.price}

onChange={this.handleChange}

placeholder="Enter price"

/>

</label>

</div>

<button type="submit">Add Item</button>

</form>

);

export default AddMenuItem;

CanteenApp.jsx

import React, { Component } from "react";

import AddMenuItem from "./AddMenuItem";

class CanteenApp extends Component {

constructor(props) {

super(props);

this.state = {

menuItems: [],

};

}
 addMenuItem = (item) => {

this.setState((prevState) => ({

menuItems: [...prevState.menuItems, item],

}));

};

render() {

return (

<div>

<h1>Canteen Management Dashboard</h1>

<AddMenuItem onAdd={this.addMenuItem} />

<h2>Menu Items</h2>

<ul>

{this.state.menuItems.length === 0 ? (

<p>No items in the menu. Add some items!</p>

):(

this.state.menuItems.map((item, index) => (

<li key={index}>

{item.name} - ${item.price.toFixed(2)}

</li>

))

)}

</ul>

</div>

);

export default CanteenApp;

import React from "react";

const Cart = ({ cartItems, removeFromCart }) => {

return (

<div>

<h2>Cart</h2>

{cartItems.length === 0 ? (

<p>Cart is empty</p>

):(

<ul>

{cartItems.map((item) => (

<li key={item.id}>

{item.name} - ${item.price} x {item.quantity}

<button onClick={() => removeFromCart(item.id)}>Remove</button>

</li>

))}

</ul>

)}

</div>

);

};

export default Cart;

DailySpecial.jsx

import React from "react";

const DailySpecial = () => (

<div>

<h2>Today's Special</h2>
 <h3>Paneer Tikka</h3>

<p>Price: $6.99</p>

<p>Description: Grilled cottage cheese with spices</p>

</div>

);

export default DailySpecial;

DiscountCalculator.jsx

import React, { Component } from "react";

class DiscountCalculator extends Component {

constructor(props) {

super(props);

this.state = {

originalPrice: 100,

discount: 10,

finalPrice: 100,

};

applyDiscount = () => {

this.setState((prevState) => ({

finalPrice: prevState.originalPrice - (prevState.originalPrice * prevState.discount) / 100,

}));

};

render() {

return (

<div>
 <h2>Discount Calculator</h2>

<p>Original Price: ${this.state.originalPrice}</p>

<p>Discount: {this.state.discount}%</p>

<p>Final Price: ${this.state.finalPrice}</p>

<button onClick={this.applyDiscount}>Apply Discount</button>

</div>

);

export default DiscountCalculator;

FoodItem.jsx

import React from "react";

const FoodItem = ({ name, price, addToCart }) => {

return (

<div className="card text-center shadow-sm p-3 mb-3">

<div className="card-body">

<h5 className="card-title">{name}</h5>

<p className="card-text">Price: ${price.toFixed(2)}</p>

<button className="btn btn-primary" onClick={() => addToCart({ name, price })}>

Add to Cart

</button>

</div>

</div>

);

};

export default FoodItem;

import React from "react";

import FoodItem from "./FoodItem";

const MenuList = ({ items, addToCart }) => {

return (

<div className="container mt-4">

<h2 className="text-center mb-4">Menu</h2>

<div className="row">

{items.map((item) => (

<div key={item.id} className="col-md-4">

<FoodItem name={item.name} price={item.price} addToCart={addToCart} />

</div>

))}

</div>

</div>

);

};

export default MenuList;

OrderCounter.jsx

import React, { Component } from "react";

class OrderCounter extends Component {

constructor(props) {

super(props);

this.state = {

orders: 0,
 totalRevenue: 0,

};

addOrder = (amount) => {

this.setState((prevState) => ({

orders: prevState.orders + 1,

totalRevenue: prevState.totalRevenue + amount,

}));

};

render() {

return (

<div>

<h2>Order Counter</h2>

<p>Orders: {this.state.orders}</p>

<p>Total Revenue: ${this.state.totalRevenue}</p>

<button onClick={() => this.addOrder(10)}>Add Order ($10)</button>

</div>

);

export default OrderCounter;

OrderDetails.jsx

function OrderDetails({ orderId, customerName, amount }) {

return (

<div>

<h3>{orderId}</h3>
 <p>Customer: {customerName}</p>

<p>Total: ${amount}</p>

</div>

);

export default OrderDetails;