skeleton check loading

src/pages/receipts/Detail.tsx

@@ -14,6 +14,7 @@ import { clx } from '../../helpers/utils'
 import Button from '../../components/Button'
 import ApproveInvoice from './components/ApproveInvoice'
 import PayInvoice from './components/PayInvoice'
+import Input from '../../components/Input'
 
 const ReceiptsDetail: FC = () => {
 
@@ -24,10 +25,30 @@ const ReceiptsDetail: FC = () => {
 
     return (
         <div className='mt-4'>
-            <div className='flex gap-6 items-center'>
-                <div>{t('receip.detail_account')}</div>
+            <div className='flex xl:flex-row flex-col gap-4 items-center'>
+                <div className='flex gap-6 items-center'>
+                    <div className='whitespace-nowrap'>{t('receip.detail_account')}</div>
 
-                <ApproveInvoice status={getInvoce.data?.data?.invoice?.status} id={id ? id : ''} refetch={getInvoce.refetch} />
+                    <ApproveInvoice status={getInvoce.data?.data?.invoice?.status} id={id ? id : ''} refetch={getInvoce.refetch} />
+                </div>
+
+                {
+                    getInvoce.data?.data?.invoice?.status === 'PENDING' || getInvoce.data?.data?.invoice?.status === 'APPROVED' ?
+                        <div className='flex gap-2 items-center w-full'>
+                            <div className='w-full xl:w-fit'>
+                                <Input
+                                    className='bg-transparent border border-border xl:max-w-40'
+                                    placeholder={t('receip.discount_code')}
+                                />
+                            </div>
+
+                            <Button
+                                label={t('receip.apply')}
+                                className='bg-transparent text-black border border-black mt-1 px-5 w-fit'
+                            />
+                        </div>
+                        : null
+                }
             </div>
 
             {