update notification type

src/pages/notifications/List.tsx

@@ -1,10 +1,11 @@
-import { type FC } from 'react'
+import { type FC, useState } 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 EditNotificationTypeModal from './components/EditNotificationTypeModal'
 import type { Notification } from './types/Types'
 
 const NotificationsList: FC = () => {
@@ -20,9 +21,22 @@ const NotificationsList: FC = () => {
     const { data: notificationsData, isLoading } = useGetNotifications(apiParams)
 
     const notifications = notificationsData?.data || []
-    const columns = getNotificationTableColumns()
     const filterFields = useNotificationFiltersFields()
 
+    const [isEditModalOpen, setIsEditModalOpen] = useState(false)
+    const [selectedNotification, setSelectedNotification] = useState<Notification | null>(null)
+
+    const handleEdit = (notification: Notification) => {
+        setSelectedNotification(notification)
+        setIsEditModalOpen(true)
+    }
+
+    const handleCloseModal = () => {
+        setIsEditModalOpen(false)
+        setSelectedNotification(null)
+    }
+
+    const columns = getNotificationTableColumns({ onEdit: handleEdit })
     const totalPages = Math.ceil(notifications.length / limit) || 1
 
     return (
@@ -50,6 +64,12 @@ const NotificationsList: FC = () => {
                     onPageChange: handlePageChange,
                 }}
             />
+
+            <EditNotificationTypeModal
+                open={isEditModalOpen}
+                close={handleCloseModal}
+                notification={selectedNotification}
+            />
         </div>
     )
 }

src/pages/notifications/components/EditNotificationTypeModal.tsx

@@ -0,0 +1,92 @@
+import { type FC, useState, useEffect } from 'react'
+import DefaulModal from '@/components/DefaulModal'
+import Select from '@/components/Select'
+import Button from '@/components/Button'
+import { useUpdateNotification } from '../hooks/useNotificationData'
+import { NotificationType } from '../enum/Enum'
+import type { Notification } from '../types/Types'
+
+interface Props {
+    open: boolean
+    close: () => void
+    notification: Notification | null
+}
+
+const EditNotificationTypeModal: FC<Props> = ({ open, close, notification }) => {
+    const [selectedType, setSelectedType] = useState<NotificationType>(NotificationType.NONE)
+    const { mutate: updateNotification, isPending } = useUpdateNotification()
+
+    useEffect(() => {
+        if (notification) {
+            setSelectedType(notification.notificationType as NotificationType)
+        }
+    }, [notification])
+
+    if (!notification) return null
+
+    const notificationTypeOptions = [
+        { value: NotificationType.SMS, label: 'پیامک' },
+        { value: NotificationType.PUSH, label: 'پوش' },
+        { value: NotificationType.Both, label: 'هر دو' },
+    ]
+
+    const handleSubmit = () => {
+        updateNotification(
+            {
+                id: notification.id,
+                notificationType: selectedType,
+            },
+            {
+                onSuccess: () => {
+                    close()
+                },
+            }
+        )
+    }
+
+    return (
+        <DefaulModal
+            open={open}
+            close={close}
+            isHeader
+            title_header="ویرایش نوع اعلان"
+            width={500}
+        >
+            <div className="mt-6 space-y-4">
+                <div>
+                    <label className="text-sm text-gray-500 mb-1 block">
+                        عنوان
+                    </label>
+                    <p className="text-sm font-medium">
+                        {notification.title || '-'}
+                    </p>
+                </div>
+
+                <div>
+                    <Select
+                        label="نوع اعلان"
+                        items={notificationTypeOptions}
+                        value={selectedType}
+                        onChange={(e) => setSelectedType(e.target.value as NotificationType)}
+                    />
+                </div>
+
+                <div className="flex justify-end gap-3 mt-6 border-t border-gray-200 pt-4">
+                    <Button
+                        label="انصراف"
+                        onClick={close}
+                        className="w-fit px-6 bg-gray-200 text-gray-700 hover:bg-gray-300"
+                    />
+                    <Button
+                        label="ذخیره"
+                        onClick={handleSubmit}
+                        isloading={isPending}
+                        className="w-fit px-6"
+                    />
+                </div>
+            </div>
+        </DefaulModal>
+    )
+}
+
+export default EditNotificationTypeModal

src/pages/notifications/components/NotificationTableColumns.tsx

@@ -1,4 +1,4 @@
-import { Eye } from 'iconsax-react'
+import { Edit } from 'iconsax-react'
 import type { ColumnType } from '@/components/types/TableTypes'
 import type { Notification } from '../types/Types'
 import { formatOptionalDate } from '@/helpers/func'
@@ -13,7 +13,11 @@ const getNotificationTypeVariant = (type: string): 'success' | 'error' | 'warnin
     return variantMap[type] || 'info'
 }
 
-export const getNotificationTableColumns = (): ColumnType<Notification>[] => {
+type Props = {
+    onEdit: (notification: Notification) => void
+}
+
+export const getNotificationTableColumns = ({ onEdit }: Props): ColumnType<Notification>[] => {
     return [
         {
             key: 'title',
@@ -57,11 +61,18 @@ export const getNotificationTableColumns = (): ColumnType<Notification>[] => {
             }
         },
         {
-            key: 'details',
+            key: 'actions',
             title: '',
-            render: () => {
+            render: (item: Notification) => {
                 return (
-                    <Eye size={20} color="#8C90A3" />
+                    <div className="flex gap-2 items-center">
+                        <Edit
+                            onClick={() => onEdit(item)}
+                            size={20}
+                            color="#8C90A3"
+                            className="cursor-pointer"
+                        />
+                    </div>
                 )
             }
         },

src/pages/notifications/enum/Enum.ts

@@ -0,0 +1,6 @@
+export const enum NotificationType {
+  NONE = "none",
+  SMS = "sms",
+  PUSH = "push",
+  Both = "both",
+}

src/pages/notifications/hooks/useNotificationData.ts

@@ -1,5 +1,6 @@
+import type { NotificationType } from "../enum/Enum";
 import * as api from "../service/NotificationService";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 export const useGetNotifications = (
   params?: Record<string, string | number>
@@ -9,3 +10,19 @@ export const useGetNotifications = (
     queryFn: () => api.getNotifications(params),
   });
 };
+
+export const useUpdateNotification = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      id,
+      notificationType,
+    }: {
+      id: string;
+      notificationType: NotificationType;
+    }) => api.updateNotification(id, notificationType),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["notifications"] });
+    },
+  });
+};

src/pages/notifications/service/NotificationService.ts

@@ -1,5 +1,6 @@
 import axios from "@/config/axios";
 import type { GetNotificationsResponse } from "../types/Types";
+import type { NotificationType } from "../enum/Enum";
 
 export const getNotifications = async (
   params?: Record<string, string | number>
@@ -10,3 +11,13 @@ export const getNotifications = async (
   );
   return data;
 };
+
+export const updateNotification = async (
+  id: string,
+  notificationType: NotificationType
+) => {
+  const { data } = await axios.patch(`/admin/notification-preferences/${id}`, {
+    notificationType,
+  });
+  return data;
+};