diff --git a/src/components/ui/datatable.tsx b/src/components/ui/datatable.tsx
index dabc801..0eb8624 100644
--- a/src/components/ui/datatable.tsx
+++ b/src/components/ui/datatable.tsx
@@ -1,504 +1,521 @@
-"use client"
+'use client'
 
-import * as React from "react"
+import * as React from 'react'
 import {
-    ColumnDef,
-    ColumnFiltersState,
-    SortingState,
-    VisibilityState,
-    flexRender,
-    getCoreRowModel,
-    getFilteredRowModel,
-    getPaginationRowModel,
-    getSortedRowModel,
-    useReactTable,
-} from "@tanstack/react-table"
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable
+} from '@tanstack/react-table'
 
-import { Button } from "@/components/ui/button"
+import { Button } from '@/components/ui/button'
 import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from "@/components/ui/table"
-import clsx from "clsx"
-import { EyeToggleIcon } from "../icons/EyeToggleIcon"
-import { ArrowLeft2, ArrowRight2 } from "iconsax-react"
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@/components/ui/table'
+import clsx from 'clsx'
+import { EyeToggleIcon } from '../icons/EyeToggleIcon'
+import { ArrowLeft2, ArrowRight2 } from 'iconsax-react'
+import { ef } from '@/lib/helpers/utfNumbers'
 
 const data: Payment[] = [
-    {
-        id: "m5gr84i9",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "3u1reuv4",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "derv1ws0",
-        type: 'تایپ',
-        status: false,
-        date: 14040401,
-    },
-    {
-        id: "5kma53ae",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "bhqecj4p",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "m5gr84i9",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "3u1reuv4",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "derv1ws0",
-        type: 'تایپ',
-        status: false,
-        date: 14040401,
-    },
-    {
-        id: "5kma53ae",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "bhqecj4p",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "m5gr84i9",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "3u1reuv4",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "derv1ws0",
-        type: 'تایپ',
-        status: false,
-        date: 14040401,
-    },
-    {
-        id: "5kma53ae",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "bhqecj4p",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "m5gr84i9",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "3u1reuv4",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "derv1ws0",
-        type: 'تایپ',
-        status: false,
-        date: 14040401,
-    },
-    {
-        id: "5kma53ae",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "bhqecj4p",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "m5gr84i9",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "3u1reuv4",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "derv1ws0",
-        type: 'تایپ',
-        status: false,
-        date: 14040401,
-    },
-    {
-        id: "5kma53ae",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "bhqecj4p",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "m5gr84i9",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "3u1reuv4",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "derv1ws0",
-        type: 'تایپ',
-        status: false,
-        date: 14040401,
-    },
-    {
-        id: "5kma53ae",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "bhqecj4p",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "m5gr84i9",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "3u1reuv4",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "derv1ws0",
-        type: 'تایپ',
-        status: false,
-        date: 14040401,
-    },
-    {
-        id: "5kma53ae",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "bhqecj4p",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "m5gr84i9",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "3u1reuv4",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "derv1ws0",
-        type: 'تایپ',
-        status: false,
-        date: 14040401,
-    },
-    {
-        id: "5kma53ae",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "bhqecj4p",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "m5gr84i9",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "3u1reuv4",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "derv1ws0",
-        type: 'تایپ',
-        status: false,
-        date: 14040401,
-    },
-    {
-        id: "5kma53ae",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
-    {
-        id: "bhqecj4p",
-        type: 'تایپ',
-        status: true,
-        date: 14040401,
-    },
+  {
+    id: 'm5gr84i9',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: '3u1reuv4',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: 'derv1ws0',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: false,
+    date: 14040401
+  },
+  {
+    id: '5kma53ae',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: 'bhqecj4p',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: 'm5gr84i9',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: '3u1reuv4',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: 'derv1ws0',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: false,
+    date: 14040401
+  },
+  {
+    id: '5kma53ae',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: 'bhqecj4p',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: 'm5gr84i9',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: '3u1reuv4',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: 'derv1ws0',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: false,
+    date: 14040401
+  },
+  {
+    id: '5kma53ae',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: 'bhqecj4p',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: 'm5gr84i9',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: '3u1reuv4',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: 'derv1ws0',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: false,
+    date: 14040401
+  },
+  {
+    id: '5kma53ae',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: 'bhqecj4p',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: 'm5gr84i9',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: '3u1reuv4',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: 'derv1ws0',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: false,
+    date: 14040401
+  },
+  {
+    id: '5kma53ae',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: 'bhqecj4p',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: 'm5gr84i9',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: '3u1reuv4',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: 'derv1ws0',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: false,
+    date: 14040401
+  },
+  {
+    id: '5kma53ae',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: 'bhqecj4p',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: 'm5gr84i9',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: '3u1reuv4',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: 'derv1ws0',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: false,
+    date: 14040401
+  },
+  {
+    id: '5kma53ae',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: 'bhqecj4p',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: 'm5gr84i9',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: '3u1reuv4',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: 'derv1ws0',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: false,
+    date: 14040401
+  },
+  {
+    id: '5kma53ae',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: 'bhqecj4p',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: 'm5gr84i9',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: '3u1reuv4',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: 'derv1ws0',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: false,
+    date: 14040401
+  },
+  {
+    id: '5kma53ae',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  },
+  {
+    id: 'bhqecj4p',
+    type: 'لورم ایپسوم متن ساختگی با تولید سادگی',
+    status: true,
+    date: 14040401
+  }
 ]
 
 export type Payment = {
-    id: string
-    type: string
-    // status: "pending" | "processing" | "success" | "failed"
-    status: boolean
-    date: number
+  id: string
+  type: string
+  // status: "pending" | "processing" | "success" | "failed"
+  status: boolean
+  date: number
 }
 
 export const columns: ColumnDef<Payment>[] = [
-    {
-        accessorKey: "id",
-        header: () => <div className="text-right pr-6">شماره</div>,
-        cell: ({ row }) => (
-            <div className="capitalize text-right pr-6">{row.getValue("id")}</div>
-        ),
-    },
-    {
-        accessorKey: "type",
-        header: () => "نوع تراکنش",
-        cell: ({ row }) => <div className="capitalize">{row.getValue("type")}</div>,
-    },
-    {
-        accessorKey: "date",
-        header: () => <div className="text-center">تاریخ</div>,
-        cell: ({ row }) => {
-            const date = parseFloat(row.getValue("date"))
+  {
+    accessorKey: 'id',
+    header: () => <div className='text-right pr-6'>شماره</div>,
+    cell: ({ row }) => (
+      <div className='capitalize text-right pr-6'>{row.getValue('id')}</div>
+    )
+  },
+  {
+    accessorKey: 'type',
+    header: () => <div className='text-center'>نوع تراکنش</div>,
+    cell: ({ row }) => <div className='capitalize'>{row.getValue('type')}</div>
+  },
+  {
+    accessorKey: 'date',
+    header: () => <div className='text-center'>تاریخ</div>,
+    cell: ({ row }) => {
+      const date = parseFloat(row.getValue('date'))
 
-            // Format the amount as a dollar amount
-            //   const formatted = new Intl.NumberFormat("en-US", {
-            //     style: "currency",
-            //     currency: "USD",
-            //   }).format(amount)
-            // TODO: convert to jalali
+      // Format the amount as a dollar amount
+      //   const formatted = new Intl.NumberFormat("en-US", {
+      //     style: "currency",
+      //     currency: "USD",
+      //   }).format(amount)
+      // TODO: convert to jalali
 
-            return <div className="text-center">{date}</div>
-        },
-    },
-    {
-        accessorKey: "status",
-        header: () => <div className="text-center">وضعیت</div>,
-        cell: ({ row }) => {
-            const status = Boolean(row.getValue("status"))
+      return <div className='text-center'>{date}</div>
+    }
+  },
+  {
+    accessorKey: 'status',
+    header: () => <div className='text-center'>وضعیت</div>,
+    cell: ({ row }) => {
+      const status = Boolean(row.getValue('status'))
 
-            const str = status ? 'پاسخ داده شده' : 'پاسخ داده نشده';
+      const str = status ? 'پاسخ داده شده' : 'پاسخ داده نشده'
 
-            return (
-                <div className='text-right flex items-center justify-center gap-x-2'>
-                    <span className={clsx('size-2 rounded-full', status ? 'bg-[#00BA4B]' : 'bg-transparent border border-primary')}></span>
-                    {str}
-                </div>
-            )
-        },
-    },
-    {
-        id: "actions",
-        enableHiding: false,
-        cell: ({ row }) => {
-            const status = Boolean(row.getValue("status"))
+      return (
+        <div className='text-right flex items-center justify-center gap-x-2'>
+          <span
+            className={clsx(
+              'size-2 rounded-full',
+              status ? 'bg-[#00BA4B]' : 'bg-transparent border border-primary'
+            )}
+          ></span>
+          {str}
+        </div>
+      )
+    }
+  },
+  {
+    id: 'actions',
+    enableHiding: false,
+    cell: ({ row }) => {
+      const status = Boolean(row.getValue('status'))
 
-            return (
-                <>
-                    <EyeToggleIcon className="ml-6 place-self-end" slash={status} />
-                </>
-            )
-        },
-    },
+      return (
+        <>
+          <EyeToggleIcon className='ml-6 place-self-end' slash={status} />
+        </>
+      )
+    }
+  }
 ]
 
-export function DataTableDemo() {
-    const [sorting, setSorting] = React.useState<SortingState>([])
-    const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-        []
-    )
-    const [columnVisibility, setColumnVisibility] =
-        React.useState<VisibilityState>({})
-    const [rowSelection, setRowSelection] = React.useState({})
+export function DataTableDemo () {
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  )
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({})
+  const [rowSelection, setRowSelection] = React.useState({})
 
-    const table = useReactTable({
-        data,
-        columns,
-        onSortingChange: setSorting,
-        onColumnFiltersChange: setColumnFilters,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        onColumnVisibilityChange: setColumnVisibility,
-        onRowSelectionChange: setRowSelection,
-        state: {
-            sorting,
-            columnFilters,
-            columnVisibility,
-            rowSelection,
-        },
-    })
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection
+    }
+  })
 
-    return (
-        <div className="w-full">
-            <div className="rounded-3xl w-full">
-                <Table className="w-[1000px]">
-                    <TableHeader>
-                        {table.getHeaderGroups().map((headerGroup) => (
-                            <TableRow
-                                className="dark:border-neutral-400"
-                                key={headerGroup.id}
-                            >
-                                {headerGroup.headers.map((header) => {
-                                    return (
-                                        <TableHead key={header.id} className="font-light text-xs text-disabled-text text-center">
-                                            {header.isPlaceholder
-                                                ? null
-                                                : flexRender(
-                                                    header.column.columnDef.header,
-                                                    header.getContext()
-                                                )}
-                                        </TableHead>
-                                    )
-                                })}
-                            </TableRow>
-                        ))}
-                    </TableHeader>
-                    <TableBody>
-                        {table.getRowModel().rows?.length ? (
-                            table.getRowModel().rows.map((row) => (
-                                <TableRow
-                                    key={row.id}
-                                    data-state={row.getIsSelected() && "selected"}
-                                    className="text-center w-full dark:border-background text-xs odd:bg-[#E9EBF433] dark:odd:bg-background/80 even:bg-container border-0 border-b h-14 border-r-4 border-r-transparent active:border-r-primary"
-                                >
-                                    {row.getVisibleCells().map((cell) => (
-                                        <TableCell key={cell.id}>
-                                            {flexRender(
-                                                cell.column.columnDef.cell,
-                                                cell.getContext()
-                                            )}
-                                        </TableCell>
-                                    ))}
-                                </TableRow>
-                            ))
-                        ) : (
-                            <TableRow>
-                                <TableCell
-                                    colSpan={columns.length}
-                                    className="h-24 text-center"
-                                >
-                                    No results.
-                                </TableCell>
-                            </TableRow>
-                        )}
-                    </TableBody>
-                </Table>
-            </div>
-            <div className="flex items-center justify-end space-x-2 py-4 px-7">
-                <div className="flex-1 text-sm text-disabled-text">
-                    نمایش: <span className="text-primary dark:text-foreground">{table.getRowModel().rows.length}</span> از {table.getFilteredRowModel().rows.length}
-                </div>
-                <div className="space-x-2 justify-center flex">
-                    <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => table.previousPage()}
-                        hidden={!table.getCanPreviousPage()}
+  return (
+    <div className='w-full'>
+      <div className='rounded-3xl w-full'>
+        <Table className='w-[727px] md:w-full'>
+          <TableHeader>
+            {table.getHeaderGroups().map(headerGroup => (
+              <TableRow
+                className='dark:border-neutral-400 border-[#EAEDF5] h-14'
+                key={headerGroup.id}
+              >
+                {headerGroup.headers.map(header => {
+                  return (
+                    <TableHead
+                      key={header.id}
+                      className='font-light text-xs text-disabled-text text-center'
                     >
-                        <ArrowRight2 size={12} className="stroke-[#A8ABBF]" />
-                    </Button>
-                    <Button
-                        variant='secondary'
-                        size="sm"
-                        onClick={() => table.previousPage()}
-                        hidden={!table.getCanPreviousPage()}
-                    >
-                        {table.getState().pagination.pageIndex}
-                    </Button>
-                    <Button
-                        variant='default'
-                        size="sm"
-                        hidden={!table.getCanPreviousPage() && !table.getCanNextPage()}
-                    >
-                        {table.getState().pagination.pageIndex + 1}
-                    </Button>
-                    <Button
-                        variant='secondary'
-                        size="sm"
-                        onClick={() => table.nextPage()}
-                        hidden={!table.getCanNextPage()}
-                    >
-                        {table.getState().pagination.pageIndex + 2}
-                    </Button>
-
-                    <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => table.nextPage()}
-                        hidden={!table.getCanNextPage()}
-                    >
-                        <ArrowLeft2 size={12} className="stroke-[#A8ABBF]" />
-                    </Button>
-                </div>
-            </div>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  )
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map(row => (
+                <TableRow
+                  key={row.id}
+                  className='text-center w-full border-b-[#EAEDF5] dark:border-b-background text-xs odd:bg-[#E9EBF433] bg-border dark:odd:bg-background/80 even:bg-container border-0 border-b! h-14 border-r-4! border-r-transparent active:border-r-primary dark:active:border-r-foreground'
+                >
+                  {row.getVisibleCells().map(cell => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className='h-24 text-center'
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <div className='flex items-center justify-end space-x-2 pt-4 px-7 pb-11'>
+        <div className='flex-1 text-sm text-disabled-text'>
+          نمایش:{' '}
+          <span className='text-primary dark:text-foreground'>
+            {ef(table.getRowModel().rows.length)}
+          </span>{' '}
+          از {ef(table.getFilteredRowModel().rows.length)}
         </div>
-    )
+        <div className='space-x-2 justify-center flex'>
+          <Button
+            variant='ghost'
+            size='sm'
+            className='size-6'
+            onClick={() => table.previousPage()}
+            hidden={!table.getCanPreviousPage()}
+          >
+            <ArrowRight2 size={12} className='stroke-[#A8ABBF]' />
+          </Button>
+          <Button
+            variant='secondary'
+            size='sm'
+            className='dark:bg-disabled bg-[#EAECF5] text-xs size-6'
+            onClick={() => table.previousPage()}
+            hidden={!table.getCanPreviousPage()}
+          >
+            {ef(table.getState().pagination.pageIndex)}
+          </Button>
+          <Button
+            variant='default'
+            className='text-white dark:text-foreground text-xs size-6'
+            size='sm'
+            hidden={!table.getCanPreviousPage() && !table.getCanNextPage()}
+          >
+            {ef(table.getState().pagination.pageIndex + 1)}
+          </Button>
+          <Button
+            variant='secondary'
+            size='sm'
+            className='dark:bg-disabled bg-[#EAECF5] text-xs size-6'
+            onClick={() => table.nextPage()}
+            hidden={!table.getCanNextPage()}
+          >
+            {ef(table.getState().pagination.pageIndex + 2)}
+          </Button>
+
+          <Button
+            variant='ghost'
+            size='sm'
+            className='size-6'
+            onClick={() => table.nextPage()}
+            hidden={!table.getCanNextPage()}
+          >
+            <ArrowLeft2 size={12} className='stroke-[#A8ABBF]' />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
 }