invoice

src/components/Invoice.css

@@ -1,7 +1,7 @@
 .invoice-container {
-  padding: 0;
+  padding: 20px;
+  max-width: 100%;
   margin: 0 auto;
-  max-width: 29.7cm;
   -webkit-print-color-adjust: exact;
   direction: rtl;
   font: 9pt irancell;
@@ -144,3 +144,20 @@ tfoot {
   margin-bottom: 0.5cm;
   margin-top: 0.5cm;
 }
+
+.mobile-scroll-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+@media screen and (max-width: 768px) {
+  .mobile-scroll-wrapper {
+    margin: 0 -20px;
+    padding: 0 20px;
+  }
+
+  .page {
+    min-width: 1200px;
+  }
+}

src/components/Invoice.tsx

@@ -88,6 +88,7 @@ const Invoice = () => {
                 </div>
             </Button>
 
+            <div className="mobile-scroll-wrapper">
                 <div className="page">
                     <h1 className='font-bold text-lg pb-4' style={{ textAlign: 'center' }}>
                         {invoice?.status === 'PAID' ? 'فاکتور (پرداخت شده)' : 'پیش فاکتور (پرداخت نشده)'}
@@ -205,11 +206,11 @@ const Invoice = () => {
                     <table className="content-table">
                         <thead>
                             <tr>
-                            <th>ردیف</th>
-                            <th>شناسه کالا یا خدمت</th>
-                            <th style={{ width: '30%' }}>شرح کالا یا خدمت</th>
-                            <th>آمر</th>
-                            <th>تعداد</th>
+                                <th style={{ width: "1cm" }} >ردیف</th>
+                                <th style={{ width: '2.5cm' }}>شناسه کالا یا خدمت</th>
+                                <th style={{ width: '5cm' }}>شرح کالا یا خدمت</th>
+                                <th style={{ width: "1.5cm" }}>فروشنده</th>
+                                <th style={{ width: "1.5cm" }}>تعداد</th>
                                 <th style={{ width: '2.3cm' }}>مبلغ واحد (ریال)</th>
                                 <th style={{ width: '2.3cm' }}>مبلغ کل (ریال)</th>
                                 <th style={{ width: '2.3cm' }}>تخفیف (ریال)</th>
@@ -222,16 +223,16 @@ const Invoice = () => {
                             {invoice?.items?.map((item: ReceiptDetailItemType, index: number) => (
                                 <tr key={item.id}>
                                     <td>{index + 1}</td>
-                                <td>{item.id.slice(-5)}</td>
+                                    <td>2330000576716</td>
                                     <td>{item.name}</td>
                                     <td>داناک</td>
                                     <td>{item.count}</td>
                                     <td>{NumberFormat(Number(item.unitPrice))}</td>
-                                <td>{NumberFormat(item.totalPrice)}</td>
+                                    <td>{NumberFormat(Number(item.unitPrice) * Number(item.count))}</td>
                                     <td>{NumberFormat(Number(item.discount))}</td>
-                                <td>{NumberFormat(item.totalPrice - Number(item.discount))}</td>
-                                <td>{NumberFormat(invoice.tax)}</td>
-                                <td>{NumberFormat(invoice.totalPrice)}</td>
+                                    <td>{NumberFormat(Number(item.totalPrice))}</td>
+                                    <td>{NumberFormat(Number(item.totalPrice) * 0.1)}</td>
+                                    <td>{NumberFormat(Number(item.totalPrice) * 0.1 + Number(item.totalPrice))}</td>
                                 </tr>
                             ))}
                         </tbody>
@@ -259,10 +260,10 @@ const Invoice = () => {
                                         </div>
                                         <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
                                             <div style={{ width: '40%', display: 'flex', justifyContent: 'center' }}>
-                                            <img className="footer-img" width="150px" src={SignImage} />
+                                                <img className="footer-img" width="170px" src={SignImage} />
                                             </div>
                                             <div style={{ width: '40%', textAlign: 'right', paddingTop: '10px' }}>
-                                            {moment(invoice?.paidAt).format('jYYYY/jMM/jDD')}
+                                                {invoice?.paidAt ? moment(invoice?.paidAt).format('jYYYY/jMM/jDD') : '-'}
                                             </div>
                                         </div>
                                     </div>
@@ -272,6 +273,7 @@ const Invoice = () => {
                     </table>
                 </div>
             </div>
+        </div>
     );
 };
 

src/pages/service/components/ServiceHeader.tsx

@@ -61,7 +61,7 @@ const ServiceHeader: FC<Props> = (props: Props) => {
             </div>
 
             <div className='flex w-full flex-col justify-between xl:items-end'>
-                <div className='xl:hidden flex gap-5 mt-5'>
+                <div className='flex xl:!hidden gap-5 mt-5'>
                     <RadioGroup
                         items={data?.subscriptionPlans?.map((item) => {
                             return {