add link to bank slip

apps/admin.saladeaula.digital/app/routes/_.$orgid.payments.$id._index/route.tsx

@@ -180,8 +180,6 @@ export default function Route({ loaderData: { order } }: Route.ComponentProps) {
     reset()
   }, [])
 
-  console.log(order)
-
   return (
     <div className="space-y-2.5">
       <Breadcrumb>
@@ -342,14 +340,29 @@ type PaymentMethodProps = {
 
 type BankSlipPaymentMethodProps = PaymentMethodProps & {}
 
-function BankSlipPaymentMethod({ status }: BankSlipPaymentMethodProps) {
+function BankSlipPaymentMethod({
+  status,
+  invoice
+}: BankSlipPaymentMethodProps) {
   return (
-    <ul className="flex gap-x-1.5">
-      <li>Boleto bancário</li>
-      <li>
-        <Status status={status} />
-      </li>
-    </ul>
+    <div className="space-y-2">
+      <ul className="flex gap-x-1.5">
+        <li>Boleto bancário</li>
+        <li>
+          <Status status={status} />
+        </li>
+      </ul>
+
+      {invoice?.bank_slip ? (
+        <>
+          <Button variant="link" asChild>
+            <a href={invoice.bank_slip.bank_slip_pdf_url} target="_blank">
+              Abrir o boleto bancário
+            </a>
+          </Button>
+        </>
+      ) : null}
+    </div>
   )
 }
 

apps/admin.saladeaula.digital/app/routes/_.$orgid.payments._index/columns.tsx

@@ -1,11 +1,17 @@
 'use client'
 
 import { type ColumnDef } from '@tanstack/react-table'
+import { EllipsisIcon, ReceiptTextIcon } from 'lucide-react'
+import { NavLink } from 'react-router'
 
-// import {
-//   DataTableColumnHeaderSelect,
-//   DataTableColumnSelect
-// } from '@repo/ui/components/data-table'
+import { Button } from '@repo/ui/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@repo/ui/components/ui/dropdown-menu'
+import { Spinner } from '@repo/ui/components/ui/spinner'
 import { columns as columns_, type Order } from '@repo/ui/routes/orders/columns'
 
 export type { Order }
@@ -17,5 +23,41 @@ export const columns: ColumnDef<Order>[] = [
   //   cell: DataTableColumnSelect,
   //   meta: { className: 'w-9' }
   // },
-  ...columns_
+  ...columns_,
+  {
+    id: 'action',
+    cell: ActionMenu,
+    meta: { className: 'w-12' }
+  }
 ]
+
+function ActionMenu({ row }: { row: any }) {
+  return (
+    <div className="flex justify-end items-center">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            className="data-[state=open]:bg-muted text-muted-foreground cursor-pointer"
+            size="icon-sm"
+          >
+            <EllipsisIcon />
+            <span className="sr-only">Abrir menu</span>
+          </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>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}

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

@@ -2,8 +2,15 @@
 
 import { type ColumnDef } from '@tanstack/react-table'
 import { EllipsisIcon, ReceiptTextIcon } from 'lucide-react'
+import { NavLink } from 'react-router'
 
 import { Abbr } from '@repo/ui/components/abbr'
+import {
+  DataTableColumnCpfCnpj,
+  DataTableColumnHeaderSelect,
+  DataTableColumnSelect
+} from '@repo/ui/components/data-table'
+import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
 import { Button } from '@repo/ui/components/ui/button'
 import {
   DropdownMenu,
@@ -12,18 +19,11 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger
 } from '@repo/ui/components/ui/dropdown-menu'
-import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
 import { initials } from '@repo/ui/lib/utils'
-import {
-  DataTableColumnCpfCnpj,
-  DataTableColumnHeaderSelect,
-  DataTableColumnSelect
-} from '@repo/ui/components/data-table'
 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'
+import { CopyToClipboardItem } from '../_app.users._index/columns'
 
 export type { Order }