add: transaction history page dark theme

src/components/ui/datatable.tsx

@@ -311,9 +311,9 @@ export type Payment = {
 export const columns: ColumnDef<Payment>[] = [
     {
         accessorKey: "id",
-        header: "شماره",
+        header: () => <div className="text-right pr-6">شماره</div>,
         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",
-        header: () => <div className="text-right">تاریخ</div>,
+        header: () => <div className="text-center">تاریخ</div>,
         cell: ({ row }) => {
             const date = parseFloat(row.getValue("date"))
 
@@ -334,12 +334,12 @@ export const columns: ColumnDef<Payment>[] = [
             //   }).format(amount)
             // TODO: convert to jalali
 
-            return <div className="text-right">{date}</div>
+            return <div className="text-center">{date}</div>
         },
     },
     {
         accessorKey: "status",
-        header: () => <div className="text-right">وضعیت</div>,
+        header: () => <div className="text-center">وضعیت</div>,
         cell: ({ row }) => {
             const status = Boolean(row.getValue("status"))
 
@@ -361,7 +361,7 @@ export const columns: ColumnDef<Payment>[] = [
 
             return (
                 <>
-                    <EyeToggleIcon slash={status} />
+                    <EyeToggleIcon className="ml-6 place-self-end" slash={status} />
                 </>
             )
         },
@@ -399,10 +399,13 @@ export function DataTableDemo() {
     return (
         <div className="w-full">
             <div className="rounded-3xl w-full">
-                <Table>
+                <Table className="w-[1000px]">
                     <TableHeader>
                         {table.getHeaderGroups().map((headerGroup) => (
-                            <TableRow key={headerGroup.id}>
+                            <TableRow
+                                className="dark:border-neutral-400"
+                                key={headerGroup.id}
+                            >
                                 {headerGroup.headers.map((header) => {
                                     return (
                                         <TableHead key={header.id} className="font-light text-xs text-disabled-text text-center">
@@ -424,7 +427,7 @@ export function DataTableDemo() {
                                 <TableRow
                                     key={row.id}
                                     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) => (
                                         <TableCell key={cell.id}>
@@ -451,7 +454,7 @@ export function DataTableDemo() {
             </div>
             <div className="flex items-center justify-end space-x-2 py-4 px-7">
                 <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 className="space-x-2 justify-center flex">
                     <Button