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

import React, { createContext, useContext, useState, useEffect, useRef } from "react";
import { useForm, useFormContext } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useSelector } from "react-redux";

import Breadcrumb from "../../components/common/Breadcrumb";
import GlobalModel from "../../components/common/GlobalModel";
import ExpenseList from "../../components/Expenses/ExpenseList";
import ViewExpense from "../../components/Expenses/ViewExpense";
import ManageExpense from "../../components/Expenses/ManageExpense";
import ExpenseFilterPanel from "../../components/Expenses/ExpenseFilterPanel";
import ExpenseFilterChips from "../../components/Expenses/ExpenseFilterChips";

import { useFab } from "../../Context/FabContext";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import {
  CREATE_EXEPENSE,
  VIEW_ALL_EXPNESE,
  VIEW_SELF_EXPENSE,
} from "../../utils/constants";

import { defaultFilter, SearchSchema } from "../../components/Expenses/ExpenseSchema";
import PreviewDocument from "../../components/Expenses/PreviewDocument";

// Context
export const ExpenseContext = createContext();
export const useExpenseContext = () => {
  const context = useContext(ExpenseContext);
  if (!context) {
    throw new Error("useExpenseContext must be used within an ExpenseProvider");
  }
  return context;
};

const ExpensePage = () => {
  const selectedProjectId = useSelector(
    (store) => store.localVariables.projectId
  );

  const [filters, setFilters] = useState(defaultFilter);
  const [groupBy, setGroupBy] = useState("transactionDate");
  const [searchText, setSearchText] = useState("");
  const filterPanelRef = useRef();
  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 IsCreatedAble = useHasUserPermission(CREATE_EXEPENSE);
  const IsViewAll = useHasUserPermission(VIEW_ALL_EXPNESE);
  const IsViewSelf = useHasUserPermission(VIEW_SELF_EXPENSE);
  const { setOffcanvasContent, setShowTrigger } = useFab();
  const [filterData, setFilterdata] = useState(defaultFilter);
  const removeFilterChip = (key, id) => {
    setFilters((prev) => {
      const updated = { ...prev };
      if (Array.isArray(updated[key])) {
        updated[key] = updated[key].filter((v) => v !== id);
        filterPanelRef.current?.resetFieldValue(key, updated[key]);
      } else if (key === "dateRange") {
        updated.startDate = null;
        updated.endDate = null;
        filterPanelRef.current?.resetFieldValue("startDate", null);
        filterPanelRef.current?.resetFieldValue("endDate", null);
      }
      return updated;
    });
  };

  useEffect(() => {
    if (IsViewAll || IsViewSelf || IsCreatedAble) {
      setShowTrigger(true);
      setOffcanvasContent(
        "Expense Filters",
        <ExpenseFilterPanel
          ref={filterPanelRef}
          onApply={setFilters}
          handleGroupBy={setGroupBy}
          setFilterdata={setFilterdata}
        />
      );
    }

    return () => {
      setShowTrigger(false);
      setOffcanvasContent("", null);
    };
  }, [IsViewAll, IsViewSelf, IsCreatedAble]);

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

  return (
    <ExpenseContext.Provider value={contextValue}>
      <div className="container-fluid">
        <Breadcrumb
          data={[{ label: "Home", link: "/" }, { label: "Expense" }]}
        />

        {IsViewAll || IsViewSelf || IsCreatedAble ? (
          <>
            <div className="card my-3 px-sm-4 px-0">
              <div className="card-body py-2 px-3">
                <div className="row align-items-center">
                  <div className="col-6">
                    <input
                      type="search"
                      className="form-control form-control-sm w-auto"
                      placeholder="Search Expense"
                      value={searchText}
                      onChange={(e) => setSearchText(e.target.value)}
                    />
                  </div>

                  <div className="col-6 text-end mt-2 mt-sm-0">

                    {IsCreatedAble && (
                      <button
                        className="btn btn-sm btn-primary"
                        type="button"
                        onClick={() =>
                          setManageExpenseModal({
                            IsOpen: true,
                            expenseId: null,
                          })
                        }
                      >
                        <i className="bx bx-plus-circle me-2"></i>
                        <span className="d-none d-md-inline-block">
                          Add New Expense
                        </span>
                      </button>
                    )}
                  </div>
                </div>
              </div>
            </div>



            <ExpenseList
              filters={filters}
              groupBy={groupBy}
              searchText={searchText}
            />
          </>
        ) : (
          <div className="card text-center py-1">
            <i className="fa-solid fa-triangle-exclamation fs-5" />
            <p>
              Access Denied: You don't have permission to perform this action!
            </p>
          </div>
        )}

        {/* Modals */}
        {ManageExpenseModal.IsOpen && (
          <GlobalModel
            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
            size="lg"
            modalType="top"
            closeModal={() => setViewExpense({ expenseId: null, view: false })}
          >
            <ViewExpense ExpenseId={viewExpense.expenseId} />
          </GlobalModel>
        )}

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

export default ExpensePage;