confimed order

src/pages/invoice/Detail.tsx

@@ -1,11 +1,13 @@
-import { type FC } from 'react'
+import { type FC, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { Printer, TickCircle } from 'iconsax-react'
+import ModalConfirm from '@/components/ModalConfirm'
 import Button from '@/components/Button'
 import Table from '@/components/Table'
 import type { RowDataType } from '@/components/types/TableTypes'
 import { useParams } from 'react-router-dom'
-import { useGetInvoiceDetail } from './hooks/useInvoiceData'
+import { useQueryClient } from '@tanstack/react-query'
+import { useConfirmInvoiceItem, useGetInvoiceDetail } from './hooks/useInvoiceData'
 import { NumberFormat } from '@/config/func'
 import moment from 'moment-jalaali'
 import type { InvoiceItem as ApiInvoiceItem } from './types/InvoiceTypes'
@@ -25,7 +27,10 @@ const formatPrice = (num: number) => `${NumberFormat(num)} تومان`
 
 const InvoiceDetail: FC = () => {
     const { id } = useParams()
+    const queryClient = useQueryClient()
     const { data, isPending } = useGetInvoiceDetail(id!)
+    const { mutate: confirmInvoiceItem, isPending: isConfirming } = useConfirmInvoiceItem()
+    const [confirmingItemId, setConfirmingItemId] = useState<string | null>(null)
     const invoice = data?.data
 
     const invoiceData = invoice
@@ -62,6 +67,16 @@ const InvoiceDetail: FC = () => {
         window.print()
     }
 
+    const handleConfirmProforma = () => {
+        if (!confirmingItemId) return
+        confirmInvoiceItem(confirmingItemId, {
+            onSuccess: () => {
+                queryClient.invalidateQueries({ queryKey: ['invoice', id] })
+                setConfirmingItemId(null)
+            },
+        })
+    }
+
     const columns = [
         {
             key: 'title',
@@ -86,14 +101,21 @@ const InvoiceDetail: FC = () => {
         {
             key: 'image',
             title: '',
-            render: () => (
-                <Button className='bg-[#01AC45] text-white w-fit px-6'>
-                    <div className='flex items-center gap-2'>
-                        <TickCircle size={20} color='white' />
-                        <span className='text-xs'>تایید پیش فاکتور</span>
+            render: (item: TableInvoiceItem) => (
+                !item.confirmed ? (
+                    <div onClick={(e) => e.stopPropagation()}>
+                        <Button
+                            onClick={() => setConfirmingItemId(item.id)}
+                            className='bg-[#01AC45] text-white w-fit px-6'
+                            isLoading={isConfirming && confirmingItemId === item.id}
+                        >
+                            <div className='flex items-center gap-2'>
+                                <TickCircle size={20} color='white' />
+                                <span className='text-xs'>تایید پیش فاکتور</span>
+                            </div>
+                        </Button>
                     </div>
-                </Button>
-
+                ) : null
             )
         }
     ]
@@ -233,6 +255,17 @@ const InvoiceDetail: FC = () => {
                     </div>
                 </div>
             </div>
+
+            <ModalConfirm
+                open={!!confirmingItemId}
+                onClose={() => setConfirmingItemId(null)}
+                onConfirm={handleConfirmProforma}
+                title='تایید پیش فاکتور'
+                message='آیا از تایید این پیش فاکتور اطمینان دارید؟'
+                confirmLabel='تایید'
+                cancelLabel='انصراف'
+                isLoading={isConfirming}
+            />
         </div>
     )
 }

src/pages/invoice/hooks/useInvoiceData.ts

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import * as api from "../service/InvoiceService";
 
 export const useGetInvoices = () => {
@@ -15,3 +15,9 @@ export const useGetInvoiceDetail = (id: string) => {
     enabled: !!id,
   });
 };
+
+export const useConfirmInvoiceItem = () => {
+  return useMutation({
+    mutationFn: api.confrimInvoiceItem,
+  });
+};

src/pages/invoice/service/InvoiceService.ts

@@ -10,10 +10,15 @@ export const getInvoices = async (): Promise<InvoicesResponseType> => {
 };
 
 export const getInvoiceDetail = async (
-  id: string
+  id: string,
 ): Promise<InvoiceDetailResponseType> => {
   const { data } = await axios.get<InvoiceDetailResponseType>(
-    `/public/invoice/${id}`
+    `/public/invoice/${id}`,
   );
   return data;
 };
+
+export const confrimInvoiceItem = async (id: string) => {
+  const { data } = await axios.post(`/public/invoice/item/${id}/confirm`);
+  return data;
+};