add payment details page

apps/insights.saladeaula.digital/app/routes/_app.payments._index/columns.tsx

@@ -1,13 +1,15 @@
 'use client'
 
 import { type ColumnDef } from '@tanstack/react-table'
-import { EllipsisIcon } from 'lucide-react'
+import { EllipsisIcon, ReceiptTextIcon } from 'lucide-react'
 
 import { Abbr } from '@repo/ui/components/abbr'
 import { Button } from '@repo/ui/components/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger
 } from '@repo/ui/components/ui/dropdown-menu'
 import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
@@ -20,6 +22,8 @@ import {
 import { columns as columns_, type Order } from '@repo/ui/routes/orders/columns'
 
 import { CopyToClipboardItem } from '../_app.users._index/columns'
+import { Spinner } from '@repo/ui/components/ui/spinner'
+import { NavLink } from 'react-router'
 
 export type { Order }
 
@@ -83,6 +87,17 @@ function ActionMenu({ row }: { row: any }) {
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" className="w-36 *:cursor-pointer">
+          <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
+            <NavLink to={`${row.id}`}>
+              {({ isPending }) => (
+                <>
+                  {isPending ? <Spinner /> : <ReceiptTextIcon />}
+                  Detalhes
+                </>
+              )}
+            </NavLink>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
           <CopyToClipboardItem text={row.id} />
         </DropdownMenuContent>
       </DropdownMenu>