add: transaction history & its datatable

2025-07-22 22:42:58 +03:30
parent 2454107da0
commit b9d14478a1
8 changed files with 1116 additions and 0 deletions
@@ -0,0 +1,54 @@
+import { DataTableDemo } from '@/components/ui/datatable'
+import { MoneyRecive, MoneySend, Wallet } from 'iconsax-react'
+import { ArrowDownLeft, ArrowUpRight } from 'lucide-react'
+import React from 'react'
+
+function TransactionsReviewIndex() {
+    return (
+        <section className='flex flex-col h-svh pb-10 pt-6 gap-4'>
+            <h1 className="font-medium text-base">لیست تراکنش ها</h1>
+
+            <div className="grid grid-cols-3 gap-2 h-28">
+                <div className="w-full h-full flex flex-col items-center justify-center p-2.5 text-center bg-container rounded-xl">
+                    <div className="size-8 bg-background rounded-full grid items-center">
+                        <MoneySend className='stroke-primary justify-self-center' size={20} />
+                    </div>
+                    <span className='text-xs2 pt-1'>مجموع واریز ها</span>
+                    <span className='text-xs font-medium mt-1'>140,000,000 ریال</span>
+                    <span className='text-xs2 text-green-60mt-0.5 0 bg-green-100 w-min px-1 py-px items-center justify-between rounded-md flex'>
+                        <ArrowUpRight size={10} className='stroke-green-600' />
+                        <div className="mt-0.5">30%</div>
+                    </span>
+                </div>
+                <div className="w-full h-full flex flex-col items-center justify-between p-2.5 text-center bg-container rounded-xl">
+                    <div className="size-8 bg-background rounded-full grid items-center">
+                        <MoneyRecive className='stroke-primary justify-self-center' size={20} />
+                    </div>
+                    <span className='text-xs2 pt-1'>مجموع برداشت ها</span>
+                    <span className='text-xs font-medium mt-1'>140,000,000 ریال</span>
+                    <span className='text-xs2 text-green-60mt-0.5 0 bg-green-100 w-min px-1 py-px items-center justify-between rounded-md flex'>
+                        <ArrowUpRight size={10} className='stroke-green-600' />
+                        <div className="mt-0.5">30%</div>
+                    </span>
+                </div>
+                <div className="w-full h-full flex flex-col items-center justify-between p-2.5 text-center bg-container rounded-xl">
+                    <div className="size-8 bg-background rounded-full grid items-center">
+                        <Wallet className='stroke-primary justify-self-center' size={20} />
+                    </div>
+                    <span className='text-xs2 pt-1'>موجودی کیف پول</span>
+                    <span className='text-xs font-medium mt-1'>140,000,000 ریال</span>
+                    <span className='text-xs2 text-red-600 mt-0.5 bg-red-100 w-min px-1 py-px items-center justify-between rounded-md flex'>
+                        <ArrowDownLeft size={10} className='stroke-red-600' />
+                        <div className="mt-0.5">30%</div>
+                    </span>
+                </div>
+            </div>
+
+            <div className='w-full h-full bg-white rounded-3xl mt-0'>
+                <DataTableDemo />
+            </div>
+        </section>
+    )
+}
+
+export default TransactionsReviewIndex