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/app/dashboard/notifications/page.tsx

@@ -1,16 +1,10 @@
 "use client"
 
-import { useCallback, useEffect, useMemo, useState } from "react"
 import { useRouter } from "next/navigation"
-import { BellIcon, CheckCheckIcon, RefreshCwIcon } from "lucide-react"
+import { BellIcon, CheckCheckIcon } from "lucide-react"
 import { toast } from "sonner"
 
-import {
-  DashboardPage,
-  DashboardTableShell,
-  DashboardToolbar,
-} from "@/components/dashboard-page"
-import { ListPagination } from "@/components/list-pagination"
+import { DashboardListPage } from "@/components/dashboard/list"
 import { useNotifications } from "@/components/notification-provider"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
@@ -21,51 +15,18 @@ import {
   type NotificationItem,
   type NotificationReadStatus,
 } from "@/lib/api/notification"
-import type { PageResult } from "@/lib/api/admin"
-import { cn, formatDateTime } from "@/lib/utils"
+import { formatDateTime } from "@/lib/utils"
 import { useI18n } from "@/i18n/provider"
 
 export default function DashboardNotificationsPage() {
   const t = useI18n()
   const router = useRouter()
   const { refreshUnreadCount } = useNotifications()
-  const [readStatus, setReadStatus] = useState<NotificationReadStatus>("all")
-  const [page, setPage] = useState(1)
-  const [limit, setLimit] = useState(20)
-  const [loading, setLoading] = useState(true)
-  const [actionLoading, setActionLoading] = useState(false)
-  const [result, setResult] = useState<PageResult<NotificationItem>>({
-    results: [],
-    page: { page: 1, limit: 20, total: 0 },
-  })
-  const readStatusOptions = useMemo<Array<{ value: NotificationReadStatus; label: string }>>(
-    () => [
-      { value: "all", label: t("notification.all") },
-      { value: "unread", label: t("notification.unread") },
-      { value: "read", label: t("notification.read") },
-    ],
-    [t]
-  )
-
-  const loadData = useCallback(async () => {
-    setLoading(true)
-    try {
-      const data = await fetchNotifications({
-        page,
-        limit,
-        readStatus,
-      })
-      setResult(data)
-    } catch (error) {
-      toast.error(error instanceof Error ? error.message : t("notification.loadFailed"))
-    } finally {
-      setLoading(false)
-    }
-  }, [limit, page, readStatus, t])
-
-  useEffect(() => {
-    void loadData()
-  }, [loadData])
+  const readStatusOptions: Array<{ value: NotificationReadStatus; label: string }> = [
+    { value: "all", label: t("notification.all") },
+    { value: "unread", label: t("notification.unread") },
+    { value: "read", label: t("notification.read") },
+  ]
 
   async function openNotification(item: NotificationItem) {
     try {
@@ -81,81 +42,44 @@ export default function DashboardNotificationsPage() {
     }
   }
 
-  async function handleMarkAllRead() {
-    setActionLoading(true)
+  async function markAllRead(reload: () => Promise<void>) {
     try {
       await markAllNotificationsRead()
       await refreshUnreadCount()
-      await loadData()
+      await reload()
       toast.success(t("notification.markAllReadSuccess"))
     } catch (error) {
-      toast.error(error instanceof Error ? error.message : t("notification.markAllReadFailed"))
-    } finally {
-      setActionLoading(false)
+      toast.error(
+        error instanceof Error ? error.message : t("notification.markAllReadFailed")
+      )
     }
   }
 
-  function handleStatusChange(nextStatus: NotificationReadStatus) {
-    setReadStatus(nextStatus)
-    setPage(1)
-  }
-
-  function handlePageChange(nextPage: number) {
-    if (nextPage < 1 || nextPage === page) {
-      return
-    }
-    setPage(nextPage)
-  }
-
-  function handleLimitChange(nextLimit: number) {
-    setLimit(nextLimit)
-    setPage(1)
-  }
-
   return (
-    <DashboardPage>
-      <DashboardToolbar
-        actions={
-          <>
-          <Button variant="outline" onClick={() => void loadData()} disabled={loading}>
-            <RefreshCwIcon className={cn(loading && "animate-spin")} />
-            {t("notification.refresh")}
-          </Button>
-          <Button
-            variant="outline"
-            onClick={() => void handleMarkAllRead()}
-            disabled={actionLoading || result.page.total === 0}
-          >
-            <CheckCheckIcon />
-            {t("notification.markAllRead")}
-          </Button>
-          </>
-        }
-      >
-        {readStatusOptions.map((option) => (
-          <Button
-            key={option.value}
-            variant={option.value === readStatus ? "default" : "outline"}
-            onClick={() => handleStatusChange(option.value)}
-          >
-            {option.label}
-          </Button>
-        ))}
-      </DashboardToolbar>
-
-      <DashboardTableShell
-        pagination={
-          <ListPagination
-            page={result.page.page}
-            limit={result.page.limit}
-            total={result.page.total}
-            loading={loading}
-            onPageChange={handlePageChange}
-            onLimitChange={handleLimitChange}
-          />
-        }
-      >
-        {result.results.length > 0 ? (
+    <DashboardListPage<NotificationItem>
+      filters={[
+        {
+          name: "readStatus",
+          label: t("notification.all"),
+          type: "segment",
+          defaultValue: "all",
+          allValue: "all",
+          options: readStatusOptions,
+        },
+      ]}
+      fetchList={fetchNotifications}
+      renderToolbarActions={({ result, reload }) => (
+        <Button
+          variant="outline"
+          onClick={() => void markAllRead(reload)}
+          disabled={result.page.total === 0}
+        >
+          <CheckCheckIcon />
+          {t("notification.markAllRead")}
+        </Button>
+      )}
+      renderContent={({ result, loading }) =>
+        result.results.length > 0 ? (
           <div className="divide-y">
             {result.results.map((item) => {
               const unread = !item.readAt
@@ -168,8 +92,14 @@ export default function DashboardNotificationsPage() {
                 >
                   <div className="flex flex-wrap items-center gap-2">
                     <BellIcon className="size-4 text-muted-foreground" />
-                    <span className="font-medium">{item.title || t("notification.fallbackTitle")}</span>
-                    {unread ? <Badge>{t("notification.unread")}</Badge> : <Badge variant="outline">{t("notification.read")}</Badge>}
+                    <span className="font-medium">
+                      {item.title || t("notification.fallbackTitle")}
+                    </span>
+                    {unread ? (
+                      <Badge>{t("notification.unread")}</Badge>
+                    ) : (
+                      <Badge variant="outline">{t("notification.read")}</Badge>
+                    )}
                     <span className="ml-auto text-xs text-muted-foreground">
                       {formatDateTime(item.createdAt)}
                     </span>
@@ -185,8 +115,14 @@ export default function DashboardNotificationsPage() {
           <div className="flex min-h-48 items-center justify-center text-sm text-muted-foreground">
             {loading ? t("notification.loading") : t("notification.empty")}
           </div>
-        )}
-      </DashboardTableShell>
-    </DashboardPage>
+        )
+      }
+      labels={{
+        refresh: t("notification.refresh"),
+        loading: t("notification.loading"),
+        empty: t("notification.empty"),
+        loadFailed: t("notification.loadFailed"),
+      }}
+    />
   )
 }