fix: transaction page style
This commit is contained in:
Mahyar Khanbolooki
@@ -1,55 +1,84 @@
|
|||||||
import { DataTableDemo } from '@/components/ui/datatable'
|
import { DataTableDemo } from '@/components/ui/datatable'
|
||||||
import { ef } from '@/lib/helpers/utfNumbers'
|
import { ef } from '@/lib/helpers/utfNumbers'
|
||||||
import { MoneyRecive, MoneySend, Wallet } from 'iconsax-react'
|
import {
|
||||||
import { ArrowDownLeft, ArrowUpRight } from 'lucide-react'
|
ArrowLeft,
|
||||||
|
ArrowRight,
|
||||||
|
MoneyRecive,
|
||||||
|
MoneySend,
|
||||||
|
Wallet
|
||||||
|
} from 'iconsax-react'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
|
||||||
function TransactionsReviewIndex() {
|
function TransactionsReviewIndex () {
|
||||||
return (
|
return (
|
||||||
<section className='flex flex-col h-full pb-10 pt-6 gap-4'>
|
<section className='flex flex-col h-full pb-10 pt-6 gap-4'>
|
||||||
<h1 className="font-medium text-base">لیست تراکنش ها</h1>
|
<h1 className='font-medium text-base'>لیست تراکنش ها</h1>
|
||||||
|
|
||||||
<div className="grid grid-cols-3 gap-2 h-28">
|
<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='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">
|
<div className='size-8 bg-background rounded-full grid items-center'>
|
||||||
<MoneySend className='stroke-primary justify-self-center dark:stroke-neutral-200' size={20} />
|
<MoneySend
|
||||||
</div>
|
className='stroke-primary justify-self-center dark:stroke-neutral-200'
|
||||||
<span className='text-xs2 pt-1'>مجموع واریز ها</span>
|
size={20}
|
||||||
<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'>
|
</div>
|
||||||
<ArrowUpRight size={10} className='stroke-green-600 mb-0.5' />
|
<span className='text-xs2 pt-1'>مجموع واریز ها</span>
|
||||||
<div className="mt-0.5">30%</div>
|
<span className='text-xs font-medium mt-1 mb-0.5'>
|
||||||
</span>
|
{ef('140,000,000 ریال')}
|
||||||
</div>
|
</span>
|
||||||
<div className="w-full h-full flex flex-col items-center justify-between p-2.5 text-center bg-container rounded-xl">
|
<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'>
|
||||||
<div className="size-8 bg-background rounded-full grid items-center">
|
<ArrowRight
|
||||||
<MoneyRecive className='stroke-primary justify-self-center dark:stroke-neutral-200' size={20} />
|
size={10}
|
||||||
</div>
|
className='stroke-green-600 mb-0.5 -rotate-z-45'
|
||||||
<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='mt-0.5'>{ef('30%')}</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'>
|
</span>
|
||||||
<ArrowUpRight size={10} className='stroke-green-600 mb-0.5' />
|
</div>
|
||||||
<div className="mt-0.5">30%</div>
|
<div className='w-full h-full flex flex-col items-center justify-between p-2.5 text-center bg-container rounded-xl'>
|
||||||
</span>
|
<div className='size-8 bg-background rounded-full grid items-center'>
|
||||||
</div>
|
<MoneyRecive
|
||||||
<div className="w-full h-full flex flex-col items-center justify-between p-2.5 text-center bg-container rounded-xl">
|
className='stroke-primary justify-self-center dark:stroke-neutral-200'
|
||||||
<div className="size-8 bg-background rounded-full grid items-center">
|
size={20}
|
||||||
<Wallet className='stroke-primary justify-self-center dark:stroke-neutral-200' size={20} />
|
/>
|
||||||
</div>
|
</div>
|
||||||
<span className='text-xs2 pt-1'>موجودی کیف پول</span>
|
<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-xs font-medium mt-1 mb-0.5'>
|
||||||
<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'>
|
{ef('140,000,000 ریال')}
|
||||||
<ArrowDownLeft size={10} className='stroke-red-600 mb-0.5' />
|
</span>
|
||||||
<div className="mt-0.5">30%</div>
|
<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'>
|
||||||
</span>
|
<ArrowRight
|
||||||
</div>
|
size={10}
|
||||||
</div>
|
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'>
|
<div className='w-full h-full bg-container rounded-3xl mt-0'>
|
||||||
<DataTableDemo />
|
<DataTableDemo />
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default TransactionsReviewIndex
|
export default TransactionsReviewIndex
|
||||||
|
|||||||
Reference in New Issue
Block a user