confimed order

src/components/DefaulModal.tsx

@@ -27,7 +27,7 @@ const DefaulModal: FC<Props> = (props: Props) => {
                     <Fragment>
                         <div style={{ maxWidth: props.width }} className='xl:justify-center xl:items-center items-end flex overflow-x-hidden  overflow-y-auto fixed inset-0 z-[9999999]  h-auto top-0 bottom-0 m-auto outline-none focus:outline-none xl:max-w-xl mx-auto'>
                             <div className='relative xl:h-full max-h-[80%] bottom-0 left-0  flex xl:items-center sm:h-auto w-full xl:my-6 xl:p-2'>
-                                <div className='h-auto p-5 lg:min-w-full overflow-y-auto rounded-3xl rounded-b-none xl:rounded-b-3xl relative flex flex-col w-full outline-none focus:outline-none bg-card border border-border'>
+                                <div className='h-auto p-5 lg:min-w-full overflow-y-auto rounded-3xl rounded-b-none xl:rounded-b-3xl relative flex flex-col w-full outline-none focus:outline-none bg-card border border-border bg-white'>
 
                                     {
                                         props.isHeader && props.title_header &&

src/components/ModalConfirm.tsx

@@ -0,0 +1,48 @@
+import { type FC } from 'react'
+import DefaulModal from './DefaulModal'
+import Button from './Button'
+
+interface Props {
+    open: boolean
+    onClose: () => void
+    onConfirm: () => void
+    title?: string
+    message?: string
+    confirmLabel?: string
+    cancelLabel?: string
+    isLoading?: boolean
+}
+
+const ModalConfirm: FC<Props> = ({
+    open,
+    onClose,
+    onConfirm,
+    title = 'تایید',
+    message = 'آیا از انجام این عمل اطمینان دارید؟',
+    confirmLabel = 'تایید',
+    cancelLabel = 'انصراف',
+    isLoading = false,
+}) => {
+    return (
+        <DefaulModal open={open} close={onClose} isHeader title_header={title}>
+            <div className='flex flex-col gap-6 mt-6'>
+                <p className=' text-[#8C90A3] text-center'>{message}</p>
+                <div className='flex gap-3 justify-end'>
+                    <Button
+                        label={cancelLabel}
+                        onClick={onClose}
+                        className='bg-[#EBEDF5] text-black'
+                    />
+                    <Button
+                        label={confirmLabel}
+                        onClick={onConfirm}
+                        isLoading={isLoading}
+                        className='bg-[#01AC45] text-white'
+                    />
+                </div>
+            </div>
+        </DefaulModal>
+    )
+}
+
+export default ModalConfirm

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;
+};