From 34c116e70afca87c80d619ac7e8846d7279c1ac1 Mon Sep 17 00:00:00 2001
From: Mahyar Khanbolooki <mahyarkhn@proton.me>
Date: Thu, 21 Aug 2025 18:27:14 +0330
Subject: [PATCH] fix: transaction page style

---
 src/app/[name]/(Main)/transactions/page.tsx | 123 ++++++++++++--------
 1 file changed, 76 insertions(+), 47 deletions(-)

diff --git a/src/app/[name]/(Main)/transactions/page.tsx b/src/app/[name]/(Main)/transactions/page.tsx
index 8452d41..dadc3de 100644
--- a/src/app/[name]/(Main)/transactions/page.tsx
+++ b/src/app/[name]/(Main)/transactions/page.tsx
@@ -1,55 +1,84 @@
 import { DataTableDemo } from '@/components/ui/datatable'
 import { ef } from '@/lib/helpers/utfNumbers'
-import { MoneyRecive, MoneySend, Wallet } from 'iconsax-react'
-import { ArrowDownLeft, ArrowUpRight } from 'lucide-react'
+import {
+  ArrowLeft,
+  ArrowRight,
+  MoneyRecive,
+  MoneySend,
+  Wallet
+} from 'iconsax-react'
 import React from 'react'
 
-function TransactionsReviewIndex() {
-    return (
-        <section className='flex flex-col h-full pb-10 pt-6 gap-4'>
-            <h1 className="font-medium text-base">لیست تراکنش ها</h1>
+function TransactionsReviewIndex () {
+  return (
+    <section className='flex flex-col h-full 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 dark:stroke-neutral-200' size={20} />
-                    </div>
-                    <span className='text-xs2 pt-1'>مجموع واریز ها</span>
-                    <span className='text-xs font-medium mt-1 mb-0.5'>{ef('140,000,000 ریال')}</span>
-                    <span className='text-xs2 text-green-600 mt-0.5 bg-green-100 dark:bg-transparent dark:border dark:border-green-400 w-min px-1 py-px items-center justify-between rounded-md flex gap-0.5'>
-                        <ArrowUpRight size={10} className='stroke-green-600 mb-0.5' />
-                        <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 dark:stroke-neutral-200' size={20} />
-                    </div>
-                    <span className='text-xs2 pt-1'>مجموع برداشت ها</span>
-                    <span className='text-xs font-medium mt-1 mb-0.5'>{ef('140,000,000 ریال')}</span>
-                    <span className='text-xs2 text-green-600 mt-0.5 bg-green-100 dark:bg-transparent dark:border dark:border-green-400 w-min px-1 py-px items-center justify-between rounded-md flex gap-0.5'>
-                        <ArrowUpRight size={10} className='stroke-green-600 mb-0.5' />
-                        <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 dark:stroke-neutral-200' size={20} />
-                    </div>
-                    <span className='text-xs2 pt-1'>موجودی کیف پول</span>
-                    <span className='text-xs font-medium mt-1 mb-0.5'>{ef('140,000,000 ریال')}</span>
-                    <span className='text-xs2 text-red-600 mt-0.5 bg-red-100 dark:bg-transparent dark:border dark:border-red-400 w-min px-1 py-px items-center justify-between rounded-md flex gap-1'>
-                        <ArrowDownLeft size={10} className='stroke-red-600 mb-0.5' />
-                        <div className="mt-0.5">30%</div>
-                    </span>
-                </div>
-            </div>
+      <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 dark:stroke-neutral-200'
+              size={20}
+            />
+          </div>
+          <span className='text-xs2 pt-1'>مجموع واریز ها</span>
+          <span className='text-xs font-medium mt-1 mb-0.5'>
+            {ef('140,000,000 ریال')}
+          </span>
+          <span className='text-xs2 text-green-600 mt-0.5 bg-green-100 dark:bg-transparent dark:border dark:border-green-400 w-min px-1 py-px items-center justify-between rounded-md flex gap-0.5'>
+            <ArrowRight
+              size={10}
+              className='stroke-green-600 mb-0.5 -rotate-z-45'
+            />
+            <span className='mt-0.5'>{ef('30%')}</span>
+          </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 dark:stroke-neutral-200'
+              size={20}
+            />
+          </div>
+          <span className='text-xs2 pt-1'>مجموع برداشت ها</span>
+          <span className='text-xs font-medium mt-1 mb-0.5'>
+            {ef('140,000,000 ریال')}
+          </span>
+          <span className='text-xs2 text-green-600 mt-0.5 bg-green-100 dark:bg-transparent dark:border dark:border-green-400 w-min px-1 py-px items-center justify-between rounded-md flex gap-0.5'>
+            <ArrowRight
+              size={10}
+              className='stroke-green-600 mb-0.5 -rotate-z-45'
+            />
+            <span className='mt-0.5'>{ef('30%')}</span>
+          </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 dark:stroke-neutral-200'
+              size={20}
+            />
+          </div>
+          <span className='text-xs2 pt-1'>موجودی کیف پول</span>
+          <span className='text-xs font-medium mt-1 mb-0.5'>
+            {ef('140,000,000 ریال')}
+          </span>
+          <span className='text-xs2 text-red-600 mt-0.5 bg-red-100 dark:bg-transparent dark:border dark:border-red-400 w-min px-1 py-px items-center justify-between rounded-md flex gap-1'>
+            <ArrowLeft
+              size={10}
+              className='stroke-red-600 mb-0.5 -rotate-z-45'
+            />
+            <span className='mt-0.5'>{ef('30%')}</span>
+          </span>
+        </div>
+      </div>
 
-            <div className='w-full h-full bg-container rounded-3xl mt-0'>
-                <DataTableDemo />
-            </div>
-        </section>
-    )
+      <div className='w-full h-full bg-container rounded-3xl mt-0'>
+        <DataTableDemo />
+      </div>
+    </section>
+  )
 }
 
-export default TransactionsReviewIndex
\ No newline at end of file
+export default TransactionsReviewIndex