add: transaction history page dark theme
This commit is contained in:
Mahyar Khanbolooki
@@ -1,4 +1,5 @@
|
|||||||
import { DataTableDemo } from '@/components/ui/datatable'
|
import { DataTableDemo } from '@/components/ui/datatable'
|
||||||
|
import { ef } from '@/lib/helpers/utfNumbers'
|
||||||
import { MoneyRecive, MoneySend, Wallet } from 'iconsax-react'
|
import { MoneyRecive, MoneySend, Wallet } from 'iconsax-react'
|
||||||
import { ArrowDownLeft, ArrowUpRight } from 'lucide-react'
|
import { ArrowDownLeft, ArrowUpRight } from 'lucide-react'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
@@ -11,40 +12,40 @@ function TransactionsReviewIndex() {
|
|||||||
<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' size={20} />
|
<MoneySend 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'>140,000,000 ریال</span>
|
<span className='text-xs font-medium mt-1 mb-0.5'>{ef('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'>
|
<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' />
|
<ArrowUpRight size={10} className='stroke-green-600 mb-0.5' />
|
||||||
<div className="mt-0.5">30%</div>
|
<div className="mt-0.5">30%</div>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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="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">
|
<div className="size-8 bg-background rounded-full grid items-center">
|
||||||
<MoneyRecive className='stroke-primary justify-self-center' size={20} />
|
<MoneyRecive 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'>140,000,000 ریال</span>
|
<span className='text-xs font-medium mt-1 mb-0.5'>{ef('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'>
|
<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' />
|
<ArrowUpRight size={10} className='stroke-green-600 mb-0.5' />
|
||||||
<div className="mt-0.5">30%</div>
|
<div className="mt-0.5">30%</div>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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="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">
|
<div className="size-8 bg-background rounded-full grid items-center">
|
||||||
<Wallet className='stroke-primary justify-self-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'>140,000,000 ریال</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 w-min px-1 py-px items-center justify-between rounded-md flex'>
|
<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' />
|
<ArrowDownLeft size={10} className='stroke-red-600 mb-0.5' />
|
||||||
<div className="mt-0.5">30%</div>
|
<div className="mt-0.5">30%</div>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='w-full h-full bg-white rounded-3xl mt-0'>
|
<div className='w-full h-full bg-container rounded-3xl mt-0'>
|
||||||
<DataTableDemo />
|
<DataTableDemo />
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -311,9 +311,9 @@ export type Payment = {
|
|||||||
export const columns: ColumnDef<Payment>[] = [
|
export const columns: ColumnDef<Payment>[] = [
|
||||||
{
|
{
|
||||||
accessorKey: "id",
|
accessorKey: "id",
|
||||||
header: "شماره",
|
header: () => <div className="text-right pr-6">شماره</div>,
|
||||||
cell: ({ row }) => (
|
cell: ({ row }) => (
|
||||||
<div className="capitalize">{row.getValue("id")}</div>
|
<div className="capitalize text-right pr-6">{row.getValue("id")}</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -323,7 +323,7 @@ export const columns: ColumnDef<Payment>[] = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: "date",
|
accessorKey: "date",
|
||||||
header: () => <div className="text-right">تاریخ</div>,
|
header: () => <div className="text-center">تاریخ</div>,
|
||||||
cell: ({ row }) => {
|
cell: ({ row }) => {
|
||||||
const date = parseFloat(row.getValue("date"))
|
const date = parseFloat(row.getValue("date"))
|
||||||
|
|
||||||
@@ -334,12 +334,12 @@ export const columns: ColumnDef<Payment>[] = [
|
|||||||
// }).format(amount)
|
// }).format(amount)
|
||||||
// TODO: convert to jalali
|
// TODO: convert to jalali
|
||||||
|
|
||||||
return <div className="text-right">{date}</div>
|
return <div className="text-center">{date}</div>
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: "status",
|
accessorKey: "status",
|
||||||
header: () => <div className="text-right">وضعیت</div>,
|
header: () => <div className="text-center">وضعیت</div>,
|
||||||
cell: ({ row }) => {
|
cell: ({ row }) => {
|
||||||
const status = Boolean(row.getValue("status"))
|
const status = Boolean(row.getValue("status"))
|
||||||
|
|
||||||
@@ -361,7 +361,7 @@ export const columns: ColumnDef<Payment>[] = [
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<EyeToggleIcon slash={status} />
|
<EyeToggleIcon className="ml-6 place-self-end" slash={status} />
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
@@ -399,10 +399,13 @@ export function DataTableDemo() {
|
|||||||
return (
|
return (
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<div className="rounded-3xl w-full">
|
<div className="rounded-3xl w-full">
|
||||||
<Table>
|
<Table className="w-[1000px]">
|
||||||
<TableHeader>
|
<TableHeader>
|
||||||
{table.getHeaderGroups().map((headerGroup) => (
|
{table.getHeaderGroups().map((headerGroup) => (
|
||||||
<TableRow key={headerGroup.id}>
|
<TableRow
|
||||||
|
className="dark:border-neutral-400"
|
||||||
|
key={headerGroup.id}
|
||||||
|
>
|
||||||
{headerGroup.headers.map((header) => {
|
{headerGroup.headers.map((header) => {
|
||||||
return (
|
return (
|
||||||
<TableHead key={header.id} className="font-light text-xs text-disabled-text text-center">
|
<TableHead key={header.id} className="font-light text-xs text-disabled-text text-center">
|
||||||
@@ -424,7 +427,7 @@ export function DataTableDemo() {
|
|||||||
<TableRow
|
<TableRow
|
||||||
key={row.id}
|
key={row.id}
|
||||||
data-state={row.getIsSelected() && "selected"}
|
data-state={row.getIsSelected() && "selected"}
|
||||||
className="text-center w-full text-xs odd:bg-[#E9EBF433] even:bg-container border-0 border-b h-14 border-r-4 border-r-transparent active:border-r-primary"
|
className="text-center w-full dark:border-background text-xs odd:bg-[#E9EBF433] dark:odd:bg-background/80 even:bg-container border-0 border-b h-14 border-r-4 border-r-transparent active:border-r-primary"
|
||||||
>
|
>
|
||||||
{row.getVisibleCells().map((cell) => (
|
{row.getVisibleCells().map((cell) => (
|
||||||
<TableCell key={cell.id}>
|
<TableCell key={cell.id}>
|
||||||
@@ -451,7 +454,7 @@ export function DataTableDemo() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-end space-x-2 py-4 px-7">
|
<div className="flex items-center justify-end space-x-2 py-4 px-7">
|
||||||
<div className="flex-1 text-sm text-disabled-text">
|
<div className="flex-1 text-sm text-disabled-text">
|
||||||
نمایش: <span className="text-primary">{table.getRowModel().rows.length}</span> از {table.getFilteredRowModel().rows.length}
|
نمایش: <span className="text-primary dark:text-foreground">{table.getRowModel().rows.length}</span> از {table.getFilteredRowModel().rows.length}
|
||||||
</div>
|
</div>
|
||||||
<div className="space-x-2 justify-center flex">
|
<div className="space-x-2 justify-center flex">
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
Reference in New Issue
Block a user