# To-Do List: Implement Table Features

This file outlines the steps to add Search, Sorting, and Pagination to various pages.

---

### 1. `src/app/(CommonLayout)/management/recycle-bin/page.tsx` - OK

**Goal:** Add search by item name/collection, sort by date, and pagination.

**Steps:**

1.  **State Management:**
    *   In `RecycleBinPage`, add `useState` for `search`, `page`, `limit`, `sortField`, and `sortOrder`.
    *   `const [search, setSearch] = useState("");`
    *   `const [page, setPage] = useState(1);`
    *   `const [limit, setLimit] = useState(10);`
    *   `const [sortField, setSortField] = useState("deletedAt");`
    *   `const [sortOrder, setSortOrder] = useState("desc");`

2.  **Data Fetching:**
    *   Modify `fetchRecycleBinItems` to accept query parameters.
    *   Update the `fetch` call URL to include the new state variables: `/api/recyclebin?search=${search}&page=${page}&limit=${limit}&sortField=${sortField}&sortOrder=${sortOrder}`.
    *   The component should re-fetch data when any of these states change. Use a `useEffect` hook for this.

3.  **UI Updates:**
    *   Add an `<Input>` component for search, binding it to the `search` state.
    *   Make the `Deleted At` table header clickable to trigger sorting.
    *   Add pagination controls (Previous/Next buttons, page limit selector) below the table.

4.  **Backend API (`/api/recyclebin`):**
    *   Modify the `GET` handler to accept and process the query parameters (`search`, `page`, `limit`, `sortField`, `sortOrder`).
    *   Implement filtering logic on the `RecycleBin` model based on the search term.
    *   Implement sorting and pagination in the database query.
    *   Return the `totalPages` count along with the `recycleBinItems` in the JSON response.

---

### 2. `src/app/(CommonLayout)/management/summary/page.tsx` - OK

**Goal:** Add filtering by month (already partially implemented), sorting for the monthly breakdown table, and pagination for the monthly breakdown table.

**Steps:**

1.  **State Management:**
    *   Add `useState` for `sortField` and `sortOrder` for the monthly breakdown table.
    *   `const [sortField, setSortField] = useState("month");`
    *   `const [sortOrder, setSortOrder] = useState("desc");`

2.  **UI Updates:**
    *   Make the `Month` and `Total Expenses` headers in the "Monthly Summary" table clickable to handle sorting.
    *   Since the data is processed client-side, implement a client-side sort on the `Object.entries(filteredMonthlyBreakdown)` array before mapping.
    *   Add pagination controls if the list of months can become very long. This would also be a client-side implementation.

---

### 3. `src/app/(CommonLayout)/management/profit-loss/page.tsx` - OK

**Goal:** Add search, sorting, and pagination.

**Steps:**

1.  **State Management:**
    *   Introduce `useState` hooks for `search`, `page`, `limit`, `sortField`, and `sortOrder`.

2.  **Data Fetching:**
    *   This page fetches data from multiple sources. The implementation will depend on how you want the search and sort to behave. A good approach is to apply filters on the client side after all data is fetched and calculated.

3.  **UI Updates:**
    *   Add a search input to filter the profit/loss entries.
    *   Make table headers clickable for sorting.
    *   Add pagination controls at the bottom of the table.

---

### 4. For all other pages listed below, follow this general pattern:

*   `src/app/(CommonLayout)/management/product-shipped/page.tsx` - OK
*   `src/app/(CommonLayout)/management/product-selling-rate/page.tsx` - OK
*   `src/app/(CommonLayout)/management/other-business-sales/page.tsx` - OK
*   `src/app/(CommonLayout)/management/salary-info/[section]/page.tsx` - OK
*   `src/app/(CommonLayout)/management/other-business-sales/[productId]/page.tsx` - OK
*   `src/app/(CommonLayout)/management/work/[section]/page.tsx` - OK
*   `src/app/(CommonLayout)/management/monthly-salary/salary-info/page.tsx` - OK
*   `src/app/(CommonLayout)/management/monthly-salary/add-employee/page.tsx` - OK
*   `src/app/(CommonLayout)/management/monthly-salary/absent/page.tsx` - OK
*   `src/app/(CommonLayout)/management/main-admin/other-business/page.tsx` - OK
*   `src/app/(CommonLayout)/management/main-admin/due-report/page.tsx` - OK
*   `src/app/(CommonLayout)/management/bill-received/[factory]/page.tsx` - OK
*   `src/app/(CommonLayout)/management/main-admin/due-report/[dueId]/page.tsx` - OK

**General Steps for each file:**

1.  **Identify the primary data-fetching hook** (e.g., `useGet...Query`).
2.  **State Management:**
    *   Add `useState` hooks for `search`, `page`, `limit`, `sortField`, and `sortOrder`.
3.  **Query Object:**
    *   Create a `useMemo` hook to combine the state variables into a `query` object.
4.  **Data Fetching (RTK Query):**
    *   Pass the `query` object to your data-fetching hook (e.g., `useGet...Query(query)`).
5.  **UI Implementation:**
    *   Add an `<Input>` for the search functionality.
    *   Add `onClick` handlers to the `<TableHead>` components for sorting.
    *   Add pagination controls (limit dropdown, next/previous buttons).
6.  **Backend API Slice (`...Api.ts`):**
    *   Update the corresponding query endpoint (e.g., `get...: builder.query(...)`) to accept the query parameters.
    *   Use `URLSearchParams` to construct the query string for the API request.
7.  **Backend API Route (`/api/.../route.ts`):**
    *   Update the `GET` handler to read the query parameters from the request URL.
    *   Use the parameters to perform filtering, sorting, and pagination on your Mongoose model.
    *   Calculate `totalPages` and return it in the response.