marco.pms.web/src/pages/RecurringExpense/RecurringExpensePage.jsx

import React, { createContext, useState, useEffect, useContext, useRef } from "react";
import Breadcrumb from "../../components/common/Breadcrumb";
import GlobalModel from "../../components/common/GlobalModel";
import { useFab } from "../../Context/FabContext";
import ManageRecurringExpense from "../../components/RecurringExpense/ManageRecurringExpense";
import RecurringExpenseList from "../../components/RecurringExpense/RecurringExpenseList";
import { PAYEE_RECURRING_EXPENSE } from "../../utils/constants";
import { defaultRecurringExpense, SearchRecurringExpenseSchema } from "../../components/RecurringExpense/RecurringExpenseSchema";
import ViewRecurringExpense from "../../components/RecurringExpense/ViewRecurringExpense";
import HandleRecurringExpenseExport from "../../components/RecurringExpense/HandleRecurringExpenseExport";

export const RecurringExpenseContext = createContext();
export const useRecurringExpenseContext = () => {
  const context = useContext(RecurringExpenseContext);
  if (!context) {
    throw new Error(
      "useRecurringExpenseContext must be used within an ExpenseProvider"
    );
  }
  return context; 
};
const RecurringExpensePage = () => {
  const [ManageRequest, setManageRequest] = useState({
    IsOpen: null,
    RecurringId: null,
  });
  const tableRef = useRef(null);

  const [filteredData, setFilteredData] = useState([]);
  const [exportLoading, setExportLoading] = useState(false);
  const [searchText, setSearchText] = useState("");
  const [filters, setFilters] = useState(defaultRecurringExpense);
  const [viewRecurring, setViewRecurring] = useState({
    view: false,
    recurringId: null,
  });

  const [selectedStatuses, setSelectedStatuses] = useState(
    PAYEE_RECURRING_EXPENSE.map((s) => s.id)
  );

  const [search, setSearch] = useState("");

  const contextValue = {
    setManageRequest,
    setViewRecurring,
  };

  const handleStatusChange = (id) => {
    setSelectedStatuses((prev) =>
      prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id]
    );
  };


  const handleExport = (type) => {
    HandleRecurringExpenseExport(type, filters, search, tableRef, setExportLoading);
  };

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

        {/* Top Bar */}
        <div className="card my-3 px-sm-0 px-0">
          <div className="card-body py-2 px-5">
            <div className="row align-items-center mb-0">
              {/* Left Column: Search + Filter */}
              <div className="col-md-8 col-sm-12 mb-2 mb-md-0">
                <div className="d-flex align-items-center flex-wrap gap-0">
                  <input
                    type="search"
                    className="form-control form-control-sm w-auto"
                    placeholder="Search Recurring Expense"
                    value={search}
                    style={{ minWidth: "200px" }}
                    onChange={(e) => setSearch(e.target.value)}
                  />

                  <div className="dropdown">
                    <a
                      className="dropdown-toggle hide-arrow cursor-pointer p-1"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                      title="Filter"
                    >
                      <i className="bx bx-slider-alt ms-1"></i>
                    </a>
                    <ul className="dropdown-menu p-2 text-capitalize">
                      {PAYEE_RECURRING_EXPENSE.map(({ id, label }) => (
                        <li key={id}>
                          <div className="form-check">
                            <input
                              className="form-check-input"
                              type="checkbox"
                              checked={selectedStatuses.includes(id)}
                              onChange={() => handleStatusChange(id)}
                            />
                            <label className="form-check-label">{label}</label>
                          </div>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </div>

              {/* Right Column: Add Button + 3-Dots Menu */}
              <div className="col-md-4 col-sm-12 text-md-end text-end d-flex justify-content-end align-items-center gap-0">
                <button
                  className="btn btn-sm btn-primary"
                  type="button"
                  onClick={() =>
                    setManageRequest({
                      IsOpen: true,
                      RecurringId: null,
                    })
                  }
                >
                  <i className="bx bx-plus-circle me-2"></i>
                  <span className="d-none d-md-inline-block">
                    Add Recurring Expense
                  </span>
                </button>

                {/* 3-Dots Dropdown */}
                <div className="dropdown">
                  <button
                    className="btn btn-icon"
                    type="button"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                  >
                    <i className="bx bx-dots-vertical-rounded bx-md"></i>
                  </button>

                  <ul className="dropdown-menu dropdown-menu-end shadow-sm" style={{ minWidth: "220px" }}>
                    <li>
                      <button className="dropdown-item" onClick={() => handleExport("print")}>
                        <i className="bx bx-printer me-2"></i> Print
                      </button>
                    </li>

                    <li><hr className="dropdown-divider" /></li>

                    <li>
                      <button className="dropdown-item" onClick={() => handleExport("csv")}>
                        <i className="bx bx-file me-2"></i> CSV
                      </button>
                    </li>

                    <li>
                      <button className="dropdown-item" onClick={() => handleExport("excel")}>
                        <i className="bx bxs-file-export me-2"></i> Excel
                      </button>
                    </li>

                    <li>
                      <button className="dropdown-item" onClick={() => handleExport("pdf")}>
                        <i className="bx bxs-file-pdf me-2"></i> PDF
                      </button>
                    </li>
                  </ul>
                </div>

              </div>

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

        <RecurringExpenseList
          filterStatuses={selectedStatuses}
          search={search}
          tableRef={tableRef}
          onDataFiltered={setFilteredData}
        />

        {ManageRequest.IsOpen && (
          <GlobalModel
            isOpen
            size="lg"
            closeModal={() =>
              setManageRequest({ IsOpen: null, expenseId: null })
            }
          >
            <ManageRecurringExpense
              key={ManageRequest.RecurringId ?? "new"}
              closeModal={() =>
                setManageRequest({ IsOpen: null, RecurringId: null })
              }
              requestToEdit={ManageRequest.RecurringId}
            />
          </GlobalModel>
        )}
        {viewRecurring.view && (
          <GlobalModel
            isOpen
            size="lg"
            closeModal={() =>
              setViewRecurring({ IsOpen: null, recurringId: null })
            }
          >
            {/* <viewRecurring
                            key={viewRecurring.RecurringId ?? "new"}
                            closeModal={() =>
                                setViewRecurring({ IsOpen: null, recurringId: null })
                            }
                            RecurringId={viewRecurring.recurringId}
                        /> */}
            <ViewRecurringExpense RecurringId={viewRecurring.recurringId} />
          </GlobalModel>
        )}
      </div>
    </RecurringExpenseContext.Provider>
  );
};

export default RecurringExpensePage;