invoice detail

src/pages/invoice/Detail.tsx

@@ -0,0 +1,199 @@
+import { type FC } from 'react'
+import { Helmet } from 'react-helmet-async'
+import { Printer, TickCircle } from 'iconsax-react'
+import Button from '@/components/Button'
+import Table from '@/components/Table'
+import type { RowDataType } from '@/components/types/TableTypes'
+
+interface InvoiceItem extends RowDataType {
+    id: number
+    image: string | null
+    title: string
+    quantity: string
+    unitPrice: string
+    discount: string
+    totalPrice: string
+    confirmed: boolean
+}
+
+const InvoiceDetail: FC = () => {
+
+    const invoiceData = {
+        invoiceNumber: '#۱۲۳۴۵',
+        confirmDate: '۱۴۰۴/۰۵/۰۳',
+        customerName: 'آلومینیوم نوین',
+        orderDate: '۱۴۰۴/۰۵/۰۳',
+        phoneNumber: '۰۸۶۳۳۲۳۳۳۴۵',
+        orderNumber: '۰۹۱۲۳۴۵۶۷۸۹',
+        address: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.',
+    }
+
+    const items: InvoiceItem[] = [
+        {
+            id: 1,
+            image: null,
+            title: 'شاپینگ بک : پوشش UV برای و پوشش سلفون مات و UV برای و پرجسته',
+            quantity: '۲۰۰۰',
+            unitPrice: '۳,۲۰۵,۰۰۰ ریال',
+            discount: '۱۰٪',
+            totalPrice: '۸,۸۵۰,۰۰۰,۰۰۰ ریال',
+            confirmed: true
+        },
+        {
+            id: 2,
+            image: null,
+            title: 'شاپینگ بک : پوشش UV برای و پوشش سلفون مات و UV برای و پرجسته',
+            quantity: '۱۰۰۰',
+            unitPrice: '۳,۲۰۵,۰۰۰ ریال',
+            discount: '۰',
+            totalPrice: '۳,۲۰۵,۰۰۰,۰۰۰ ریال',
+            confirmed: true
+        }
+    ]
+
+    const handlePrint = () => {
+        window.print()
+    }
+
+    const columns = [
+        {
+            key: 'title',
+            title: 'عنوان',
+            render: (item: InvoiceItem) => (
+                <div className='text-right'>
+                    <div className='text-sm text-black'>{item.title}</div>
+                </div>
+            )
+        },
+        {
+            key: 'quantity',
+            title: 'تعداد',
+            render: (item: InvoiceItem) => (
+                <div className='text-center'>
+                    <div className='text-black'>{item.quantity}</div>
+                </div>
+            )
+        },
+        {
+            key: 'unitPrice',
+            title: 'مبلغ واحد',
+            render: (item: InvoiceItem) => (
+                <div className='text-center'>
+                    <div className='text-black'>{item.unitPrice}</div>
+                </div>
+            )
+        },
+        {
+            key: 'discount',
+            title: 'تخفیف',
+            render: (item: InvoiceItem) => (
+                <div className='text-center'>
+                    <div className='text-black'>{item.discount}</div>
+                </div>
+            )
+        },
+        {
+            key: 'totalPrice',
+            title: 'مبلغ کل',
+            render: (item: InvoiceItem) => (
+                <div className='text-center'>
+                    <div className='text-black'>{item.totalPrice}</div>
+                </div>
+            )
+        },
+        {
+            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>
+                    </div>
+                </Button>
+
+            )
+        }
+    ]
+
+    return (
+        <div className='mt-4 text-sm'>
+            <Helmet>
+                <title>داناک | صورت حساب {invoiceData.invoiceNumber}</title>
+            </Helmet>
+
+            {/* Header */}
+            <div className='flex justify-between items-center mb-6'>
+                <div className='text-sm text-[#8C90A3]'>
+                    صورت حساب {invoiceData.invoiceNumber}
+                </div>
+                <div className='flex gap-3'>
+                    <Button
+                        onClick={handlePrint}
+                        className='bg-white border border-[#FFF1D7] text-black w-[100px] h-9 flex items-center justify-center gap-2'
+                    >
+                        <Printer size={20} color='black' />
+                        <span className='text-xs'>چاپ</span>
+                    </Button>
+                    <Button className='bg-[#E8F0FF] text-[#0047FF] w-[120px] h-9 text-xs'>
+                        پرداخت نشده
+                    </Button>
+                </div>
+            </div>
+
+            {/* بخش اول: اطلاعات صورت حساب */}
+            <div className='bg-white rounded-2xl p-8'>
+                <div className='text-sm mb-6'>اطلاعات صورت حساب</div>
+
+                <div className='flex justify-between gap-x-12 gap-y-5 text-xs'>
+                    <div className='flex flex-col gap-1.5'>
+                        <span className='text-[#8C90A3]'>تاریخ ایجاد سفارش :</span>
+                        <span className='text-black'>{invoiceData.orderDate}</span>
+                    </div>
+                    <div className='flex flex-col gap-1.5'>
+                        <span className='text-[#8C90A3]'>شماره همراه:</span>
+                        <span className='text-black'>{invoiceData.orderNumber}</span>
+                    </div>
+                    <div className='flex flex-col gap-1.5'>
+                        <span className='text-[#8C90A3]'>تاریخ تایید پیش فاکتور:</span>
+                        <span className='text-black'>{invoiceData.confirmDate}</span>
+                    </div>
+                    <div className='flex flex-col gap-1.5'>
+                        <span className='text-[#8C90A3]'>مشتری:</span>
+                        <span className='text-black'>{invoiceData.customerName}</span>
+                    </div>
+                    <div className='flex flex-col gap-1.5'>
+                        <span className='text-[#8C90A3]'>شماره ثابت:</span>
+                        <span className='text-black'>{invoiceData.phoneNumber}</span>
+                    </div>
+                </div>
+
+                <div className='mt-5 flex flex-col gap-1.5 text-xs'>
+                    <span className='text-[#8C90A3]'>آدرس:</span>
+                    <span className='text-black leading-6'>{invoiceData.address}</span>
+                </div>
+            </div>
+
+            {/* بخش دوم: اقلام درخواستی */}
+            <div className='mt-6 bg-white rounded-2xl p-8'>
+                <div className='text-sm mb-6'>اقلام درخواستی</div>
+
+                <Table
+                    columns={columns}
+                    data={items}
+                    showHeader={true}
+                />
+
+                {/* Notes Section */}
+                <div className='mt-8 pt-6 border-t border-[#EBEDF5]'>
+                    <div className='text-xs text-[#8C90A3] leading-6 space-y-2'>
+                        <div>۱- تمام تحویل‌ها، سفارشات با تاکیب مناسب و منعطف، ۱۵ می باشد و مبلغ نهایی براساس تراز نهایی محاسبه می‌گردد.</div>
+                        <div>۲- سفارشات چاپی با اختلاف رنگ ۱۰ الی ۱۵ درصد یا قابل طراحی شده می‌باشد</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default InvoiceDetail

src/router/MainRouter.tsx

@@ -16,6 +16,7 @@ import AnnouncementDetail from '@/pages/annoncement/Detail'
 import AddCriticisms from '@/pages/criticisms/Add'
 import LearningList from '@/pages/learning/List'
 import LearningDetail from '@/pages/learning/Detail'
+import InvoiceDetail from '@/pages/invoice/Detail'
 
 const MainRouter: FC = () => {
     return (
@@ -41,6 +42,7 @@ const MainRouter: FC = () => {
                             <Route path={Paths.criticisms} element={<AddCriticisms />} />
                             <Route path={Paths.learning.list} element={<LearningList />} />
                             <Route path={`${Paths.learning.detail}:id`} element={<LearningDetail />} />
+                            <Route path={`${Paths.proformaInvoice}/:id`} element={<InvoiceDetail />} />
                         </Routes>
                     </div>
                 </div>