add back and refresh button

src/pages/invoice/DetailPerfomaInvoice.tsx

@@ -3,6 +3,8 @@ import { Link, useParams } from 'react-router-dom';
 import moment from 'moment-jalaali';
 import { Edit } from 'iconsax-react';
 import { Paths } from '@/config/Paths';
+import BackButton from '@/components/BackButton';
+import RefreshButton from '@/components/RefreshButton';
 import { useGetInvoiceDetail } from './hooks/useInvoiceData';
 import InvoicePaymentsSection from './components/InvoicePaymentsSection';
 import { formatItemDiscountDisplay } from './utils/invoiceItem';
@@ -12,7 +14,7 @@ const formatAmount = (amount: number) =>
 
 const DetailPerfomaInvoice: FC = () => {
   const { id } = useParams<{ id: string }>();
-  const { data: invoiceData, isLoading } = useGetInvoiceDetail(id);
+  const { data: invoiceData, isLoading, refetch, isFetching } = useGetInvoiceDetail(id);
   const invoice = invoiceData?.data;
 
   if (isLoading || !invoice) {
@@ -31,20 +33,25 @@ const DetailPerfomaInvoice: FC = () => {
   return (
     <div className="mt-5">
       <div className="flex items-center justify-between">
-        <h1 className="text-lg font-light">
-          پیش فاکتور #{invoice.invoiceNumber}
-        </h1>
-        <Link to={Paths.perfomaInvoice.update + invoice.id}>
-          <button
-            type="button"
-            className="flex items-center gap-2 rounded-xl bg-primary px-5 py-2.5 text-sm hover:opacity-90"
-          >
-            <Edit size={18} color="black" />
-            ویرایش
-          </button>
-        </Link>
+        <BackButton to={Paths.perfomaInvoice.list} />
+        <div className="flex items-center gap-3">
+          <RefreshButton onClick={() => refetch()} isLoading={isFetching} />
+          <Link to={Paths.perfomaInvoice.update + invoice.id}>
+            <button
+              type="button"
+              className="flex items-center gap-2 rounded-xl bg-primary px-5 py-2.5 text-sm hover:opacity-90"
+            >
+              <Edit size={18} color="black" />
+              ویرایش
+            </button>
+          </Link>
+        </div>
       </div>
 
+      <h1 className="text-lg font-light mt-4">
+        پیش فاکتور #{invoice.invoiceNumber}
+      </h1>
+
       <div className="mt-8 rounded-3xl bg-white p-6">
         <div className="font-light">اطلاعات پیش فاکتور</div>
 

src/pages/invoice/ProformaInvoice.tsx

@@ -2,6 +2,7 @@ import Tabs from '@/components/Tabs'
 import { useMemo, useState, type FC } from 'react'
 import { ProformaInvoiceStatusEnum } from './enum/InvoiceEnum'
 import Filters from '@/components/Filters'
+import RefreshButton from '@/components/RefreshButton'
 import Table from '@/components/Table'
 import { Eye, Add, Edit2 } from 'iconsax-react'
 import { Link } from 'react-router-dom'
@@ -16,7 +17,7 @@ const ProformaInvoice: FC = () => {
     const [page, setPage] = useState(1)
     const [filters, setFilters] = useState<FilterValues>({})
 
-    const { data, isLoading } = useGetInvoice(page)
+    const { data, isLoading, refetch, isFetching } = useGetInvoice(page)
 
     const meta = data?.meta
 
@@ -86,12 +87,15 @@ const ProformaInvoice: FC = () => {
         <div className='mt-5'>
             <div className='flex justify-between items-center'>
                 <h1 className='text-lg font-light'>پیش فاکتورها</h1>
-                <Link to={Paths.perfomaInvoice.create}>
-                    <button className='flex items-center gap-2 px-4 py-2 bg-primary text-black text-sm font-medium rounded-xl hover:opacity-90 transition-opacity'>
-                        <Add size={18} />
-                        پیش فاکتور جدید
-                    </button>
-                </Link>
+                <div className='flex items-center gap-3'>
+                    <RefreshButton onClick={() => refetch()} isLoading={isFetching} />
+                    <Link to={Paths.perfomaInvoice.create}>
+                        <button className='flex items-center gap-2 px-4 py-2 bg-primary text-black text-sm font-medium rounded-xl hover:opacity-90 transition-opacity'>
+                            <Add size={18} />
+                            پیش فاکتور جدید
+                        </button>
+                    </Link>
+                </div>
             </div>
 
             <div className='mt-8'>