refactor: replace DashboardPage and DashboardTableShell with DashboardListPage for notifications and permissions

- Updated DashboardNotificationsPage to utilize DashboardListPage for improved structure and functionality.
- Simplified state management and data fetching in DashboardNotificationsPage.
- Refactored DashboardPermissionsPage to use DashboardListPage, enhancing filter and pagination handling.
- Introduced DashboardListPage component to standardize list rendering with filters and pagination.
- Added utility functions for managing filters and pagination in the new DashboardListPage component.
- Improved code readability and maintainability by consolidating common logic into reusable components.

web/components/dashboard/crud/dashboard-crud-page.tsx

@@ -209,6 +209,12 @@ export function DashboardCrudPage<TItem, TPayload>({
   )
   const { draftFilters, appliedFilters, setDraftFilter, applyFilters } =
     useDashboardCrudFilters(filters)
+  const filtersKey = filters
+    .map(
+      (filter) =>
+        `${filter.name}:${String(filter.defaultValue)}:${String(filter.allValue)}:${filter.trim ? "1" : "0"}:${filter.valueType ?? ""}`
+    )
+    .join("|")
   const [page, setPage] = useState(1)
   const [limit, setLimit] = useState(pageSize)
   const [loading, setLoading] = useState(true)
@@ -238,7 +244,8 @@ export function DashboardCrudPage<TItem, TPayload>({
     } finally {
       setLoading(false)
     }
-  }, [appliedFilters, fetchList, filters, labels.loadFailed, limit, page])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [appliedFilters, fetchList, filtersKey, labels.loadFailed, limit, page])
 
   useEffect(() => {
     void loadData()

web/components/dashboard/crud/index.ts

@@ -1,5 +1,9 @@
 export { DashboardCrudPage } from "./dashboard-crud-page"
 export { DashboardCrudFormDialog } from "./dashboard-crud-form-dialog"
+export {
+  buildDashboardCrudQuery,
+  normalizeDashboardCrudPageResult,
+} from "./dashboard-crud-utils"
 export {
   createDashboardStatusColumn,
   createDashboardStatusToggleAction,
@@ -15,6 +19,8 @@ export type {
 } from "./dashboard-crud-page"
 export type {
   DashboardCrudFormField,
+  DashboardCrudFilterStateConfig,
   DashboardCrudPageResult,
+  DashboardCrudQueryFilter,
   DashboardCrudQueryValue,
 } from "./dashboard-crud-utils"

web/components/dashboard/crud/use-dashboard-crud-filters.ts

@@ -10,9 +10,13 @@ import {
 export function useDashboardCrudFilters(
   filters: ReadonlyArray<DashboardCrudFilterStateConfig>
 ) {
+  const defaultsKey = filters
+    .map((filter) => `${filter.name}:${String(filter.defaultValue)}`)
+    .join("|")
   const initialFilters = useMemo(
     () => buildDashboardCrudInitialFilters(filters),
-    [filters]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [defaultsKey]
   )
   const [draftFilters, setDraftFilters] = useState(initialFilters)
   const [appliedFilters, setAppliedFilters] = useState(initialFilters)
@@ -33,11 +37,23 @@ export function useDashboardCrudFilters(
     setAppliedFilters(draftFilters)
   }
 
+  function applyFilter(name: string, value: string | number | undefined) {
+    setDraftFilters((current) => ({
+      ...current,
+      [name]: value,
+    }))
+    setAppliedFilters((current) => ({
+      ...current,
+      [name]: value,
+    }))
+  }
+
   return {
     draftFilters,
     appliedFilters,
     setDraftFilter,
     setDraftFilters,
+    applyFilter,
     applyFilters,
   }
 }