119 lines
2.7 KiB
TypeScript
119 lines
2.7 KiB
TypeScript
'use client'
|
|
|
|
import { formatCNPJ, formatCPF } from '@brazilian-utils/brazilian-utils'
|
|
import { type ColumnDef } from '@tanstack/react-table'
|
|
|
|
import { Abbr } from '@repo/ui/components/abbr'
|
|
import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
|
|
import { initials } from '@repo/ui/lib/utils'
|
|
|
|
// This type is used to define the shape of our data.
|
|
// You can use a Zod schema here if you want.
|
|
export type Order = {
|
|
id: string
|
|
total: number
|
|
status: 'pending' | 'processing' | 'success' | 'failed'
|
|
payment_method: 'PIX' | 'CREDIT_CARD' | 'MANUAL' | 'failed'
|
|
name: string
|
|
}
|
|
|
|
const formatted = new Intl.DateTimeFormat('pt-BR', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
})
|
|
|
|
export const columns: ColumnDef<Order>[] = [
|
|
{
|
|
header: 'Comprador',
|
|
cell: ({ row }) => {
|
|
const { name, email } = row.original
|
|
|
|
return (
|
|
<div className="flex gap-2.5 items-center">
|
|
<Avatar className="size-10 hidden lg:block">
|
|
<AvatarFallback>{initials(name)}</AvatarFallback>
|
|
</Avatar>
|
|
|
|
<ul>
|
|
<li className="font-bold">
|
|
<Abbr>{name}</Abbr>
|
|
</li>
|
|
<li className="text-muted-foreground text-sm">
|
|
<Abbr>{email}</Abbr>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|
|
},
|
|
{
|
|
header: 'CNPJ/CPF',
|
|
cell: ({ row }) => {
|
|
const { cpf, cnpj } = row.original
|
|
|
|
if (cpf) {
|
|
return <>{formatCPF(cpf)}</>
|
|
}
|
|
|
|
if (cnpj) {
|
|
return <>{formatCNPJ(cnpj)}</>
|
|
}
|
|
|
|
return <></>
|
|
}
|
|
},
|
|
{
|
|
accessorKey: 'payment_method',
|
|
header: 'Forma de pag.'
|
|
},
|
|
{
|
|
accessorKey: 'status',
|
|
header: 'Status'
|
|
},
|
|
{
|
|
accessorKey: 'total',
|
|
header: 'Valor total',
|
|
cell: ({ row }) => {
|
|
const amount = parseFloat(row.getValue('total'))
|
|
const formatted = new Intl.NumberFormat('pt-BR', {
|
|
style: 'currency',
|
|
currency: 'BRL'
|
|
}).format(amount)
|
|
|
|
return <div className="font-medium">{formatted}</div>
|
|
}
|
|
},
|
|
{
|
|
header: 'Comprado em',
|
|
cell: ({ row }) => {
|
|
const createdAt = new Date(row.original.create_date)
|
|
return formatted.format(createdAt)
|
|
}
|
|
},
|
|
{
|
|
header: 'Vencimento em',
|
|
cell: ({ row }) => {
|
|
try {
|
|
const dueDate = new Date(row.original.due_date)
|
|
return formatted.format(dueDate)
|
|
} catch {
|
|
return 'N/A'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
header: 'Pago em',
|
|
cell: ({ row }) => {
|
|
if (row.original.payment_date) {
|
|
const createdAt = new Date(row.original.payment_date)
|
|
return formatted.format(createdAt)
|
|
}
|
|
|
|
return <></>
|
|
}
|
|
}
|
|
]
|