invoice

src/pages/invoice/ProformaInvoice.tsx

@@ -1,7 +1,11 @@
 import Tabs from '@/components/Tabs'
 import { useMemo, useState, type FC } from 'react'
 import { Link, useNavigate, useSearchParams } from 'react-router-dom'
-import { ProformaInvoiceStatusEnum } from './enum/InvoiceEnum'
+import {
+    invoiceListTabs,
+    invoiceListTabStatuses,
+    ProformaInvoiceStatusEnum,
+} from './enum/InvoiceEnum'
 import Filters from '@/components/Filters'
 import Table from '@/components/Table'
 import { useGetInvoices } from './hooks/useInvoiceData'
@@ -14,11 +18,10 @@ import moment from 'moment-jalaali'
 import StatusWithText from '@/components/StatusWithText'
 import { Eye } from 'iconsax-react'
 
+const INVOICE_TABS = invoiceListTabs.map((tab) => tab.value)
+
 const isInvoiceTab = (value: string | null): value is ProformaInvoiceStatusEnum =>
-    value === ProformaInvoiceStatusEnum.ALL ||
-    value === ProformaInvoiceStatusEnum.NOT_CONFIRMED ||
-    value === ProformaInvoiceStatusEnum.PARTIALLY_CONFIRMED ||
-    value === ProformaInvoiceStatusEnum.CONFIRMED
+    value !== null && INVOICE_TABS.includes(value as ProformaInvoiceStatusEnum)
 
 const getServiceNames = (invoice: Invoice): string => {
     const names = [...new Set(invoice.items.map((item) => item.product.title))]
@@ -27,29 +30,32 @@ const getServiceNames = (invoice: Invoice): string => {
 
 const ProformaInvoice: FC = () => {
     const navigate = useNavigate()
-    const [searchParams] = useSearchParams()
+    const [searchParams, setSearchParams] = useSearchParams()
     const tabFromQuery = searchParams.get('tab')
-    const [activeTab, setActiveTab] = useState<ProformaInvoiceStatusEnum>(
-        isInvoiceTab(tabFromQuery) ? tabFromQuery : ProformaInvoiceStatusEnum.ALL,
-    )
+    const activeTab = isInvoiceTab(tabFromQuery)
+        ? tabFromQuery
+        : ProformaInvoiceStatusEnum.PENDING
     const [filters, setFilters] = useState<FilterValues>({})
 
-    const { data, isPending } = useGetInvoices()
+    const statuses = invoiceListTabStatuses[activeTab]
+
+    const setActiveTab = (tab: ProformaInvoiceStatusEnum) => {
+        setSearchParams(
+            (current) => {
+                const next = new URLSearchParams(current)
+                next.set('tab', tab)
+                return next
+            },
+            { replace: true },
+        )
+    }
+
+    const { data, isPending } = useGetInvoices({ statuses })
     const invoices = useMemo(() => data?.data ?? [], [data?.data])
 
     const filteredInvoices = useMemo(() => {
         let result = invoices
 
-        // فیلتر تب
-        if (activeTab === ProformaInvoiceStatusEnum.NOT_CONFIRMED) {
-            result = result.filter((inv) => inv.confirmStatus === 'pending')
-        } else if (activeTab === ProformaInvoiceStatusEnum.PARTIALLY_CONFIRMED) {
-            result = result.filter((inv) => inv.confirmStatus === 'partially_confirmed')
-        } else if (activeTab === ProformaInvoiceStatusEnum.CONFIRMED) {
-            result = result.filter((inv) => inv.confirmStatus === 'confirmed')
-        }
-
-        // فیلتر جستجو
         const search = filters.search?.toString().trim()
         if (search) {
             const lower = search.toLowerCase()
@@ -62,7 +68,6 @@ const ProformaInvoice: FC = () => {
             )
         }
 
-        // فیلتر تاریخ
         const dateFilter = filters.date?.toString()
         if (dateFilter) {
             result = result.filter((inv) => {
@@ -72,7 +77,7 @@ const ProformaInvoice: FC = () => {
         }
 
         return result
-    }, [invoices, activeTab, filters])
+    }, [invoices, filters])
 
     const columns: ColumnType<Invoice>[] = [
         {
@@ -101,15 +106,16 @@ const ProformaInvoice: FC = () => {
             render: (item) => <span>{NumberFormat(item.total)} ریال</span>,
         },
         {
-            key: 'confirmStatus',
+            key: 'status',
             title: 'وضعیت تایید',
             render: (item) => {
                 const statusMap = {
                     confirmed: { variant: 'success' as const, text: 'تایید شده' },
                     partially_confirmed: { variant: 'info' as const, text: 'تایید جزئی' },
-                    pending: { variant: 'warning' as const, text: 'تایید نشده' },
+                    pending: { variant: 'warning' as const, text: 'در انتظار تایید' },
+                    archived: { variant: 'info' as const, text: 'آرشیو شده' },
                 }
-                const status = statusMap[item.confirmStatus] ?? statusMap.pending
+                const status = statusMap[item.status] ?? statusMap.pending
                 return (
                     <StatusWithText
                         variant={status.variant}
@@ -118,19 +124,6 @@ const ProformaInvoice: FC = () => {
                 )
             },
         },
-        {
-            key: 'paymentStatus',
-            title: 'وضعیت پرداخت',
-            render: (item) => {
-                const isPaid = item.paidAmount >= item.total && item.total > 0
-                return (
-                    <StatusWithText
-                        variant={isPaid ? 'success' : 'info'}
-                        text={isPaid ? 'پرداخت شده' : 'پرداخت نشده'}
-                    />
-                )
-            },
-        },
         {
             key: 'action',
             title: '',
@@ -157,12 +150,7 @@ const ProformaInvoice: FC = () => {
 
             <div className="mt-8">
                 <Tabs
-                    items={[
-                        { label: 'همه', value: ProformaInvoiceStatusEnum.ALL },
-                        { label: 'تایید نشده', value: ProformaInvoiceStatusEnum.NOT_CONFIRMED },
-                        { label: 'تایید جزئی', value: ProformaInvoiceStatusEnum.PARTIALLY_CONFIRMED },
-                        { label: 'تایید شده', value: ProformaInvoiceStatusEnum.CONFIRMED },
-                    ]}
+                    items={[...invoiceListTabs]}
                     activeTab={activeTab}
                     onTabChange={(tab) => setActiveTab(tab as ProformaInvoiceStatusEnum)}
                 />