list of notification perfereneces

src/config/Pages.ts

@@ -78,4 +78,7 @@ export const Pages = {
   pagers: {
     list: "/pagers/list",
   },
+  notifications: {
+    list: "/notifications/list",
+  },
 };

src/langs/fa.json

@@ -66,7 +66,8 @@
     "admins": "مدیران",
     "shipment_methods": "روش های ارسال",
     "reviews": "نظرات",
-    "pagers": "پیجرها"
+    "pagers": "پیجرها",
+    "notifications": "تنظیمات اعلانات"
   },
   "shipment": {
     "dineIn": "سرو در محل",

src/pages/notifications/List.tsx

@@ -0,0 +1,57 @@
+import { type FC } from 'react'
+import Table from '@/components/Table'
+import Filters from '@/components/Filters'
+import { useGetNotifications } from './hooks/useNotificationData'
+import { useNotificationFilters } from './hooks/useNotificationFilters'
+import { getNotificationTableColumns } from './components/NotificationTableColumns'
+import { useNotificationFiltersFields } from './components/NotificationFiltersFields'
+import type { Notification } from './types/Types'
+
+const NotificationsList: FC = () => {
+    const {
+        filters,
+        currentPage,
+        apiParams,
+        handleFiltersChange,
+        handlePageChange,
+        limit,
+    } = useNotificationFilters()
+
+    const { data: notificationsData, isLoading } = useGetNotifications(apiParams)
+
+    const notifications = notificationsData?.data || []
+    const columns = getNotificationTableColumns()
+    const filterFields = useNotificationFiltersFields()
+
+    const totalPages = Math.ceil(notifications.length / limit) || 1
+
+    return (
+        <div className='mt-5'>
+            <div className='flex justify-between items-center'>
+                <h1 className='text-lg font-light'>لیست اعلانات</h1>
+            </div>
+
+            <div className='mt-8'>
+                <Filters
+                    fields={filterFields}
+                    onChange={handleFiltersChange}
+                    initialValues={filters}
+                    searchField="search"
+                />
+            </div>
+
+            <Table<Notification>
+                columns={columns}
+                data={notifications as Notification[]}
+                isloading={isLoading}
+                pagination={{
+                    currentPage,
+                    totalPages,
+                    onPageChange: handlePageChange,
+                }}
+            />
+        </div>
+    )
+}
+
+export default NotificationsList

src/pages/notifications/components/NotificationFiltersFields.tsx

@@ -0,0 +1,22 @@
+import { useMemo } from 'react'
+import type { FieldType } from '@/components/Filters'
+
+export const useNotificationFiltersFields = (): FieldType[] => {
+    return useMemo(() => [
+        {
+            type: 'input',
+            name: 'search',
+            placeholder: 'جستجو (عنوان یا رستوران)',
+        },
+        {
+            type: 'select',
+            name: 'notificationType',
+            placeholder: 'نوع اعلان',
+            options: [
+                { value: 'sms', label: 'پیامک' },
+                { value: 'push', label: 'پوش' },
+                { value: 'both', label: 'هر دو' },
+            ],
+        },
+    ], [])
+}

src/pages/notifications/components/NotificationTableColumns.tsx

@@ -0,0 +1,69 @@
+import { Eye } from 'iconsax-react'
+import type { ColumnType } from '@/components/types/TableTypes'
+import type { Notification } from '../types/Types'
+import { formatOptionalDate } from '@/helpers/func'
+import Status from '@/components/Status'
+
+const getNotificationTypeVariant = (type: string): 'success' | 'error' | 'warning' | 'info' | 'pending' => {
+    const variantMap: Record<string, 'success' | 'error' | 'warning' | 'info' | 'pending'> = {
+        'sms': 'info',
+        'push': 'warning',
+        'both': 'success',
+    }
+    return variantMap[type] || 'info'
+}
+
+export const getNotificationTableColumns = (): ColumnType<Notification>[] => {
+    return [
+        {
+            key: 'title',
+            title: 'عنوان',
+            render: (item: Notification) => {
+                return (
+                    <div className="max-w-xs truncate" title={item.title}>
+                        {item.title || '-'}
+                    </div>
+                )
+            }
+        },
+        {
+            key: 'notificationType',
+            title: 'نوع اعلان',
+            render: (item: Notification) => {
+                const typeLabels: Record<string, string> = {
+                    'sms': 'پیامک',
+                    'push': 'پوش',
+                    'both': 'هر دو',
+                }
+                return (
+                    <Status
+                        variant={getNotificationTypeVariant(item.notificationType)}
+                        label={typeLabels[item.notificationType] || item.notificationType}
+                    />
+                )
+            }
+        },
+        {
+            key: 'createdAt',
+            title: 'تاریخ ثبت',
+            render: (item: Notification) => {
+                return formatOptionalDate(item.createdAt, {
+                    year: 'numeric',
+                    month: '2-digit',
+                    day: '2-digit',
+                    hour: '2-digit',
+                    minute: '2-digit',
+                })
+            }
+        },
+        {
+            key: 'details',
+            title: '',
+            render: () => {
+                return (
+                    <Eye size={20} color="#8C90A3" />
+                )
+            }
+        },
+    ]
+}

src/pages/notifications/hooks/useNotificationData.ts

@@ -0,0 +1,11 @@
+import * as api from "../service/NotificationService";
+import { useQuery } from "@tanstack/react-query";
+
+export const useGetNotifications = (
+  params?: Record<string, string | number>
+) => {
+  return useQuery({
+    queryKey: ["notifications", params],
+    queryFn: () => api.getNotifications(params),
+  });
+};

src/pages/notifications/hooks/useNotificationFilters.ts

@@ -0,0 +1,46 @@
+import { useState, useMemo } from "react";
+import type { FilterValues } from "@/components/Filters";
+
+const DEFAULT_PAGE = 1;
+const DEFAULT_LIMIT = 10;
+
+export const useNotificationFilters = () => {
+  const [filters, setFilters] = useState<FilterValues>({});
+  const [currentPage, setCurrentPage] = useState(DEFAULT_PAGE);
+  const [limit] = useState(DEFAULT_LIMIT);
+
+  const apiParams = useMemo(() => {
+    const params: Record<string, string | number> = {
+      page: currentPage,
+      limit: limit,
+    };
+
+    if (filters.search) {
+      params.search = filters.search as string;
+    }
+
+    if (filters.notificationType) {
+      params.notificationType = filters.notificationType as string;
+    }
+
+    return params;
+  }, [filters, currentPage, limit]);
+
+  const handleFiltersChange = (newFilters: FilterValues) => {
+    setFilters(newFilters);
+    setCurrentPage(DEFAULT_PAGE);
+  };
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  return {
+    filters,
+    currentPage,
+    apiParams,
+    handleFiltersChange,
+    handlePageChange,
+    limit,
+  };
+};

src/pages/notifications/service/NotificationService.ts

@@ -0,0 +1,12 @@
+import axios from "@/config/axios";
+import type { GetNotificationsResponse } from "../types/Types";
+
+export const getNotifications = async (
+  params?: Record<string, string | number>
+): Promise<GetNotificationsResponse> => {
+  const { data } = await axios.get<GetNotificationsResponse>(
+    "/admin/notification-preferences",
+    { params }
+  );
+  return data;
+};

src/pages/notifications/types/Types.ts

@@ -0,0 +1,14 @@
+import type { IResponse } from "@/types/response.types";
+import type { RowDataType } from "@/components/types/TableTypes";
+
+export interface Notification extends RowDataType {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  restaurant: string;
+  title: string;
+  notificationType: "sms" | "push" | "both";
+}
+
+export type GetNotificationsResponse = IResponse<Notification[]>;

src/router/Main.tsx

@@ -39,6 +39,7 @@ import UpdateCoupon from '@/pages/coupon/Update'
 import ReviewsList from '@/pages/review/List'
 import DetailReview from '@/pages/review/Detail'
 import PagersList from '@/pages/pager/List'
+import NotificationsList from '@/pages/notifications/List'
 const MainRouter: FC = () => {
 
     const { hasSubMenu } = useSharedStore()
@@ -95,6 +96,8 @@ const MainRouter: FC = () => {
                             <Route path={Pages.reviews.detail + ':id'} element={<DetailReview />} />
 
                             <Route path={Pages.pagers.list} element={<PagersList />} />
+
+                            <Route path={Pages.notifications.list} element={<NotificationsList />} />
                         </Routes>
                     </div>
                 </div>

src/shared/SideBar.tsx

@@ -173,6 +173,15 @@ const SideBar: FC = () => {
                             name='roles'
                             activeName='roles'
                         />
+
+                        <SideBarItem
+                            icon={<NotificationStatus variant={isActive('notifications') ? 'Bold' : 'Outline'} color={isActive('notifications') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.notifications')}
+                            isActive={isActive('notifications')}
+                            link={Pages.notifications.list}
+                            name='notifications'
+                            activeName='notifications'
+                        />
                     </div>
 
                     <div className={clx(