marco.pms.web/src/pages/Expense/ExpensePage.jsx

import React, { createContext, useContext, useState } from "react";

import ExpenseList from "../../components/Expenses/ExpenseList";
import ViewExpense from "../../components/Expenses/ViewExpense";
import Breadcrumb from "../../components/common/Breadcrumb";
import GlobalModel from "../../components/common/GlobalModel";
import PreviewDocument from "../../components/Expenses/PreviewDocument";
import ManageExpense from "../../components/Expenses/ManageExpense";
import { useProjectName } from "../../hooks/useProjects";
import { useExpenseStatus } from "../../hooks/masterHook/useMaster";

export const ExpenseContext = createContext();
export const useExpenseContext = () => useContext(ExpenseContext);

const ExpensePage = () => {
  const [ManageExpenseModal, setManageExpenseModal] = useState({
    IsOpen: null,
    expenseId: null,
  });
  const [viewExpense, setViewExpense] = useState({
    expenseId: null,
    view: false,
  });
  const [ViewDocument, setDocumentView] = useState({
    IsOpen: false,
    Image: null,
  });

  const contextValue = {
    setViewExpense,
    setManageExpenseModal,
    setDocumentView,
  };

  const { projectNames } = useProjectName();
  const {} = useExpenseStatus();
  return (
    <ExpenseContext.Provider value={contextValue}>
      <div className="container-fluid">
        <Breadcrumb
          data={[
            { label: "Home", link: "/" },
            { label: "Expense", link: null },
          ]}
        />
        <div className="card my-1 text-start px-0">
          <div className="card-body py-1 px-1">
            <div className="row">
              <div className="col-5 col-sm-4">
                <label className="mb-0">
                  <input
                    type="search"
                    className="form-control form-control-sm"
                    placeholder="Search Expense..."
                    aria-controls="DataTables_Table_0"
                  />
                </label>
                <div className="dropdown d-inline-block" >
                  <i
                    className="bx bx-slider-alt ms-2"
                    id="filterDropdown"
                    data-bs-toggle="dropdown"
                    role="button"
                    aria-expanded="false"
                    style={{ cursor: "pointer" }}
                  ></i>

                  <div
                    className="dropdown-menu p-3"
                    aria-labelledby="filterDropdown"
                    style={{ minWidth: "500px",}} 
                  >
                    <div className="row g-2">
                      <div className="col-md-6">
                        <label className="form-label">Project</label>
                        <select className="form-select form-select-sm">
                          <option value="1">Project A</option>
                          <option value="2">Project B</option>
                          <option value="3">Project C</option>
                        </select>
                      </div>

                      <div className="col-md-6">
                        <label className="form-label">Select Project</label>
                        <select className="form-select form-select-sm">
                          {projectNames?.map((project)=>(
                                 <option key={project.id} value={project.id}>{project.name}</option>
                          ))}
                        </select>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="col-7 col-sm-8 text-end gap-2">
                <button
                  type="button"
                  data-bs-toggle="tooltip"
                  data-bs-offset="0,8"
                  data-bs-placement="top"
                  data-bs-custom-class="tooltip"
                  title="Add New Expense"
                  className={`p-1 me-2 bg-primary rounded-circle `}
                  onClick={() =>
                    setManageExpenseModal({
                      IsOpen: true,
                      expenseId: null,
                    })
                  }
                >
                  <i className="bx bx-plus fs-4 text-white"></i>
                </button>
              </div>
            </div>
          </div>
        </div>

        <ExpenseList />
        {ManageExpenseModal.IsOpen && (
          <GlobalModel
            isOpen={ManageExpenseModal.IsOpen}
            size="lg"
            closeModal={() =>
              setManageExpenseModal({
                IsOpen: null,
                expenseId: null,
              })
            }
          >
            <ManageExpense
              key={ManageExpenseModal.expenseId ?? "new"}
              expenseToEdit={ManageExpenseModal.expenseId}
              closeModal={() =>
                setManageExpenseModal({ IsOpen: null, expenseId: null })
              }
            />
          </GlobalModel>
        )}

        {viewExpense.view && (
          <GlobalModel
            isOpen={viewExpense.view}
            size="lg"
            modalType="top"
            closeModal={() =>
              setViewExpense({
                expenseId: null,
                view: false,
              })
            }
          >
            <ViewExpense ExpenseId={viewExpense.expenseId} />
          </GlobalModel>
        )}

        {ViewDocument.IsOpen && (
          <GlobalModel
            size="lg"
            key={ViewDocument.IsOpen ?? "new"}
            isOpen={ViewDocument.IsOpen}
            closeModal={() => setDocumentView({ IsOpen: false, Image: null })}
          >
            <PreviewDocument imageUrl={ViewDocument.Image} />
          </GlobalModel>
        )}
      </div>
    </ExpenseContext.Provider>
  );
};

export default ExpensePage;