App Expense Part 2

 import React,{useState,useEffect} from "react";

import "bootstrap/dist/css/bootstrap.min.css";

export default function () {
    const [expense,setExpense]=useState([]);
    const [total,setTotal]=useState(0);

    return <>
        <ExpenseForm setExpense={setExpense} setTotal={setTotal}/>
    {/*=================*/}
    <ExpenseList expense={expense} setExpense={setExpense} total={total}/>

    </>
}

//======Form

function ExpenseForm({setExpense,setTotal}) {

    const [name,setName]=useState("");
    const [amount,setAmount]=useState("");
    const [date,setDate]=useState(null);

    function Add() {

        //========
        if(name.length!=0&&amount.length!=0&&date.length!=0){

            setExpense(prevExpense => [...prevExpense, {
                "Name":name,
                "Amount":amount,
                "Date":date
            }]);
            setTotal((p)=>p+parseInt(amount));
            setName("");
            setAmount("");
            setDate("");

        }

    }

    return <>
        <div className={"m-2 p-2 card"}>
            <div>
                <div className="form-group">
                    <label htmlFor="exampleInputEmail1">Expense Name</label>
                    <input value={name} onChange={(e)=>{setName(e.target.value)}} type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                           placeholder="Enter Expense Name"/>
                </div>

                <div className="form-group">
                    <label htmlFor="exampleInputEmail1">Expense Amount</label>
                    <input value={amount} onChange={(e)=>{setAmount(e.target.value)}} type="number" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                           placeholder="Enter Expense Amount"/>
                </div>
                <div className="form-group">
                    <label htmlFor="exampleInputEmail1">Expense Date</label>
                    <input value={date} onChange={(e)=>{setDate(e.target.value)}} type="date" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                           placeholder="Enter Expense Date"/>
                </div>

                <div className={"mt-2"}>
                    <button onClick={Add} className="btn btn-primary">Add</button>
                </div>

            </div>
        </div>
    </>
}

function ExpenseList({expense,setExpense,total}) {
  const [oldArray,setOldArray]=useState([]);
  function Delete(index) {
      setExpense((prev) => prev.filter((_, i) => i !== index));
  }

  function SearchByName(valuesSearch) {
      if(oldArray.length==0){
          setOldArray(expense);
      }
      //=========filter===========
      if(valuesSearch.length==0){
          ViewAll();
      }else
      {
          const filterValue = oldArray.filter((item) =>
              item.Name.toLowerCase().includes(valuesSearch.toLowerCase())
          );
          setExpense(filterValue);
      }
  }
  function SearchByDate(valuesSearch) {

      if(oldArray.length==0){
          setOldArray(expense);
      }
      //=========filter===========
      const filterValue=oldArray.filter((item)=>item.Date==valuesSearch);
      setExpense(filterValue);
  }

  function ViewAll() {
      if(oldArray.length!=0){
          setExpense(oldArray);
          setOldArray([]);
      }
  }


    return <>
        <div className="m-2 p-2 card">
            <label className="fw-bold">Filter</label>
            <div className={"d-flex p-2"}>
                <input onChange={(e)=>SearchByName(e.target.value)} className="form-control" placeholder={"Search By Name"}/>
                <input onChange={(e)=>SearchByDate(e.target.value)} className="form-control" placeholder={"Search By Name"} type={"date"}/>
                <button onClick={ViewAll} className="btn btn-primary">View All</button>
            </div>
            <table className="table">
                <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Name</th>
                    <th scope="col">Amount</th>
                    <th scope="col">Date</th>
                    <th scope="col">Delete</th>
                </tr>
                </thead>
                <tbody>


                {
                    expense.map((item,index)=>{
                        return <tr>
                            <th scope="row">{index+1}</th>
                            <td>{item.Name}</td>
                            <td>{item.Amount}</td>
                            <td>{item.Date}</td>
                            <td><button onClick={()=>Delete(index)} className={"btn btn-danger"}>Delete</button></td>
                        </tr>
                    })
                }

                </tbody>
            </table>

            <div className="d-flex justify-content-end p-3">
            <span className="fw-bold">
                Total: {total}
            </span>
            </div>

        </div>
     </>
}