accept pager

src/pages/pager/List.tsx

@@ -9,6 +9,7 @@ import type { RowDataType } from '@/components/types/TableTypes'
 import { useGetPagers } from './hooks/usePagerData'
 import PagerDetailModal from './components/PagerDetailModal'
 import { useTranslation } from 'react-i18next'
+import { PagerStatus } from './enum/Enum'
 
 const PagersList: FC = () => {
     const { t } = useTranslation('global')
@@ -56,6 +57,13 @@ const PagersList: FC = () => {
     const columns = getPagerTableColumns({ onViewDetails: handleViewDetails, t })
     const filterFields = usePagerFiltersFields()
 
+    const getRowClassName = (item: Pager & RowDataType) => {
+        if (item.status !== PagerStatus.Pending) {
+            return 'opacity-30'
+        }
+        return ''
+    }
+
     return (
         <div className='mt-5'>
             <div className='flex justify-between items-center'>
@@ -75,6 +83,7 @@ const PagersList: FC = () => {
                 columns={columns}
                 data={paginatedPagers as (Pager & RowDataType)[]}
                 isloading={isLoading}
+                rowClassName={getRowClassName}
                 pagination={{
                     currentPage,
                     totalPages: totalPagesCount,

src/pages/pager/components/PagerDetailModal.tsx

@@ -1,14 +1,12 @@
-import { type FC, useState, useEffect } from 'react'
+import { type FC } from 'react'
 import DefaulModal from '@/components/DefaulModal'
 import type { Pager } from '../types/Types'
 import { formatOptionalDate } from '@/helpers/func'
 import Status from '@/components/Status'
-import Select from '@/components/Select'
 import Button from '@/components/Button'
 import { useTranslation } from 'react-i18next'
 import { useUpdatePagerStatus } from '../hooks/usePagerData'
 import { PagerStatus } from '../enum/Enum'
-import type { ItemsSelectType } from '@/components/Select'
 
 interface Props {
     open: boolean
@@ -18,24 +16,10 @@ interface Props {
 
 const PagerDetailModal: FC<Props> = ({ open, close, pager }) => {
     const { t } = useTranslation('global')
-    const [selectedStatus, setSelectedStatus] = useState<string>('')
     const { mutate: updateStatus, isPending } = useUpdatePagerStatus()
 
-    useEffect(() => {
-        if (pager) {
-            setSelectedStatus(pager.status)
-        }
-    }, [pager])
-
     if (!pager) return null
 
-    const statusOptions: ItemsSelectType[] = [
-        { value: PagerStatus.Pending, label: t('pager.status.pending') },
-        { value: PagerStatus.Acknowledged, label: t('pager.status.acknowledged') },
-        { value: PagerStatus.Rejected, label: t('pager.status.rejected') },
-        { value: PagerStatus.Completed, label: t('pager.status.completed') },
-    ]
-
     const getStatusVariant = (status: string) => {
         switch (status) {
             case PagerStatus.Pending:
@@ -52,21 +36,29 @@ const PagerDetailModal: FC<Props> = ({ open, close, pager }) => {
     }
 
     const getStatusLabel = (status: string) => {
-        const option = statusOptions.find(opt => opt.value === status)
+        switch (status) {
-        return option?.label || status
+            case PagerStatus.Pending:
+                return t('pager.status.pending')
+            case PagerStatus.Acknowledged:
+                return t('pager.status.acknowledged')
+            case PagerStatus.Rejected:
+                return t('pager.status.rejected')
+            case PagerStatus.Completed:
+                return t('pager.status.completed')
+            default:
+                return status
+        }
     }
 
-    const handleSaveStatus = () => {
+    const handleMarkAsCompleted = () => {
-        if (selectedStatus && selectedStatus !== pager.status) {
+        updateStatus(
-            updateStatus(
+            { id: pager.id, status: PagerStatus.Completed },
-                { id: pager.id, status: selectedStatus as PagerStatus },
+            {
-                {
+                onSuccess: () => {
-                    onSuccess: () => {
+                    close()
-                        close()
+                },
-                    },
+            }
-                }
+        )
-            )
-        }
     }
 
     const statusVariant = getStatusVariant(pager.status)
@@ -138,28 +130,16 @@ const PagerDetailModal: FC<Props> = ({ open, close, pager }) => {
                     </p>
                 </div>
 
-                <div className='border-t border-gray-200 pt-4'>
+                {pager.status === PagerStatus.Pending && (
-                    <label className="text-sm text-gray-500 mb-1 block">
+                    <div className="flex justify-end mt-6 border-t border-gray-200 pt-4">
-                        {t('pager.change_status')}
+                        <Button
-                    </label>
+                            label="متوجه شدم"
-                    <Select
+                            onClick={handleMarkAsCompleted}
-                        key={pager.id}
+                            isloading={isPending}
-                        items={statusOptions}
+                            className="w-fit px-6"
-                        defaultValue={selectedStatus}
+                        />
-                        onChange={(e) => setSelectedStatus(e.target.value)}
+                    </div>
-                        className="mt-1"
+                )}
-                    />
-                </div>
-
-                <div className="flex justify-end mt-6">
-                    <Button
-                        label={t('pager.save')}
-                        onClick={handleSaveStatus}
-                        isloading={isPending}
-                        disabled={selectedStatus === pager.status || !selectedStatus}
-                        className="w-fit px-6"
-                    />
-                </div>
             </div>
         </DefaulModal>
     )