dress/resources/js/pages/admin/manage/order/partials/columns.tsx

import { Link } from '@inertiajs/react';
import type { ColumnDef } from '@tanstack/react-table';
import { format } from 'date-fns';
import { id } from 'date-fns/locale';
import { Pencil, Trash2, Printer } from 'lucide-react';
import { DataTableColumnHeader } from '@/components/data-table-column-header';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import * as orderRoutes from '@/routes/order';
import type { Order } from '@/types/order';

interface ColumnProps {
    onDelete: (order: Order) => void;
    onPrint: (order: Order) => void;
}

export const getColumns = ({ onDelete, onPrint }: ColumnProps): ColumnDef<Order>[] => [
    {
        accessorKey: "invoice_number",
        header: ({ column }) => (
            <DataTableColumnHeader column={column} title="No. Invoice" />
        ),
        cell: ({ row }) => (
            <div className="flex flex-col">
                <span className="font-medium">{row.original.invoice_number}</span>
                <span className="text-xs text-muted-foreground">
                    {format(new Date(row.original.created_at), 'dd MMM yyyy HH:mm', { locale: id })}
                </span>
            </div>
        ),
        meta: { title: "No. Invoice" },
    },
    {
        accessorKey: "customer_name",
        header: ({ column }) => (
            <DataTableColumnHeader column={column} title="Pelanggan" />
        ),
        cell: ({ row }) => (
            <div className="flex flex-col">
                <span>{row.original.customer_name}</span>
                <Badge variant="outline" className="w-fit text-[10px] px-1 py-0 h-4">
                    {row.original.order_channel}
                </Badge>
            </div>
        ),
        meta: { title: "Pelanggan" },
    },
    {
        accessorKey: "items",
        header: ({ column }) => (
            <DataTableColumnHeader column={column} title="Item" />
        ),
        cell: ({ row }) => {
            const items = row.original.items;

            if (!items || !Array.isArray(items) || items.length === 0) {
                return <span className="text-muted-foreground text-xs italic">-</span>;
            }

            return (
                <div className="flex flex-col gap-1">
                    {items.slice(0, 2).map((item, i) => (
                        <div key={i} className="text-xs">
                            <span className="text-muted-foreground">{item.product?.name}:</span>{' '}
                            <span className="font-medium text-primary">{item.qty} x {item.price_formatted}</span>
                        </div>
                    ))}
                    {items.length > 2 && (
                        <span className="text-[10px] text-muted-foreground italic">+{items.length - 2} item lainnya...</span>
                    )}
                </div>
            );
        },
        meta: { title: "Item" },
    },
    {
        accessorKey: "total",
        header: ({ column }) => (
            <DataTableColumnHeader column={column} title="Total" />
        ),
        cell: ({ row }) => (
            <div className="flex flex-col items-end gap-1">
                <span className="font-bold text-primary">
                    {row.original.total_formatted}
                </span>
                <Badge className="text-[10px] h-4 py-0" variant={
                    row.original.order_status === 'delivered' ? 'default' :
                    row.original.order_status === 'pending' ? 'secondary' :
                    row.original.order_status === 'cancelled' ? 'destructive' : 'outline'
                }>
                    {row.original.order_status}
                </Badge>
            </div>
        ),
        meta: { title: "Total" },
    },
    {
        id: "actions",
        header: "Aksi",
        cell: ({ row }) => {
            const order = row.original;

            return (
                <div className="flex items-center gap-2">
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <Button variant="ghost" size="icon" className='text-blue-600 hover:text-blue-700 hover:bg-blue-50 dark:hover:bg-blue-950/20' onClick={() => onPrint(order)}>
                                <Printer className="size-4" />
                            </Button>
                        </TooltipTrigger>
                        <TooltipContent>
                            <p>Cetak Struk</p>
                        </TooltipContent>
                    </Tooltip>
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <Link href={orderRoutes.edit(order.id).url}>
                                <Button variant="ghost" size="icon" className='text-yellow-600 hover:text-yellow-700 hover:bg-yellow-50 dark:hover:bg-yellow-950/20'>
                                    <Pencil className="size-4" />
                                </Button>
                            </Link>
                        </TooltipTrigger>
                        <TooltipContent>
                            <p>Ubah</p>
                        </TooltipContent>
                    </Tooltip>
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <Button variant="ghost" size="icon" className='text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/20' onClick={() => onDelete(order)}>
                                <Trash2 className="size-4" />
                            </Button>
                        </TooltipTrigger>
                        <TooltipContent>
                            <p>Hapus</p>
                        </TooltipContent>
                    </Tooltip>
                </div>
            );
        },
        meta: { title: "Aksi" },
    },
];