plantillas-proyectos/frontend/src/lib/components/dashboard/customs_brokers/columns.ts

import type { ColumnDef } from "@tanstack/table-core";
import { renderComponent, renderSnippet } from "$lib/components/ui/data-table/index.js";
import { createRawSnippet } from "svelte";
import DataTableActions from "./data-table-actions.svelte";
import type { CustomsBroker } from "$lib/api/dashboard/a76/customs-brokers";

export type { CustomsBroker };

export function createColumns(onSuccess?: () => void): ColumnDef<CustomsBroker>[] {
	return [
		{
			accessorKey: "broker_key",
			header: "Clave",
			cell: ({ row }) => {
				const keySnippet = createRawSnippet<[{ key: string }]>((getKey) => {
					const { key } = getKey();
					return {
						render: () =>
							`<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">${key}</code>`
					};
				});
				return renderSnippet(keySnippet, { key: row.original.broker_key });
			}
		},
		{
			accessorKey: "type",
			header: "Tipo",
			cell: ({ row }) => {
				const typeSnippet = createRawSnippet<[{ type: string | null | undefined }]>((getType) => {
					const { type } = getType();
					return {
						render: () => `<div class="max-w-[120px] truncate">${type || '-'}</div>`
					};
				});
				return renderSnippet(typeSnippet, { type: row.original.type });
			}
		},
		{
			accessorKey: "name",
			header: "Nombre Completo",
			cell: ({ row }) => {
				const nameSnippet = createRawSnippet<[{ name: string | null | undefined }]>((getName) => {
					const { name } = getName();
					return {
						render: () => `<div class="max-w-[300px] truncate font-medium">${name || '-'}</div>`
					};
				});
				return renderSnippet(nameSnippet, { name: row.original.name });
			}
		},
		{
			accessorKey: "address",
			header: "Dirección",
			cell: ({ row }) => {
				const addressSnippet = createRawSnippet<[{ address: string | null | undefined }]>((getAddress) => {
					const { address } = getAddress();
					return {
						render: () => `<div class="max-w-[250px] truncate" title="${address || ''}">${address || '-'}</div>`
					};
				});
				return renderSnippet(addressSnippet, { address: row.original.address });
			}
		},
		{
			accessorKey: "postal_code",
			header: "Código Postal",
			cell: ({ row }) => {
				const postalSnippet = createRawSnippet<[{ postal: string | null | undefined }]>((getPostal) => {
					const { postal } = getPostal();
					return {
						render: () => 
							postal 
								? `<code class="bg-muted px-1 py-0.5 rounded text-sm">${postal}</code>`
								: `<span class="text-muted-foreground">-</span>`
					};
				});
				return renderSnippet(postalSnippet, { postal: row.original.postal_code });
			}
		},
		{
			accessorKey: "city",
			header: "Ciudad",
			cell: ({ row }) => {
				const citySnippet = createRawSnippet<[{ city: string | null | undefined }]>((getCity) => {
					const { city } = getCity();
					return {
						render: () => `<div class="max-w-[150px] truncate">${city || '-'}</div>`
					};
				});
				return renderSnippet(citySnippet, { city: row.original.city });
			}
		},
		{
			accessorKey: "state",
			header: "Estado",
			cell: ({ row }) => {
				const stateSnippet = createRawSnippet<[{ state: string | null | undefined }]>((getState) => {
					const { state } = getState();
					return {
						render: () => `<div class="max-w-[150px] truncate">${state || '-'}</div>`
					};
				});
				return renderSnippet(stateSnippet, { state: row.original.state });
			}
		},
		{
			accessorKey: "phone",
			header: "Teléfono",
			cell: ({ row }) => {
				const phoneSnippet = createRawSnippet<[{ phone: string | null | undefined }]>((getPhone) => {
					const { phone } = getPhone();
					return {
						render: () => `<div class="max-w-[140px] truncate text-sm">${phone || '-'}</div>`
					};
				});
				return renderSnippet(phoneSnippet, { phone: row.original.phone });
			}
		},
		{
			accessorKey: "fax",
			header: "Número Fax",
			cell: ({ row }) => {
				const faxSnippet = createRawSnippet<[{ fax: string | null | undefined }]>((getFax) => {
					const { fax } = getFax();
					return {
						render: () => `<div class="max-w-[140px] truncate text-sm">${fax || '-'}</div>`
					};
				});
				return renderSnippet(faxSnippet, { fax: row.original.fax });
			}
		},
		{
			accessorKey: "license",
			header: "Patente",
			cell: ({ row }) => {
				const licenseSnippet = createRawSnippet<[{ license: string | null | undefined }]>((getLicense) => {
					const { license } = getLicense();
					return {
						render: () => 
							license 
								? `<code class="relative rounded bg-blue-100 dark:bg-blue-900 px-[0.3rem] py-[0.2rem] font-mono text-xs font-semibold">${license}</code>`
								: `<span class="text-muted-foreground">-</span>`
					};
				});
				return renderSnippet(licenseSnippet, { license: row.original.license });
			}
		},
		{
			accessorKey: "tax_id",
			header: "RFC",
			cell: ({ row }) => {
				const taxIdSnippet = createRawSnippet<[{ taxId: string | null | undefined }]>((getTaxId) => {
					const { taxId } = getTaxId();
					return {
						render: () => `<div class="max-w-[140px] truncate font-mono text-sm">${taxId || '-'}</div>`
					};
				});
				return renderSnippet(taxIdSnippet, { taxId: row.original.tax_id });
			}
		},
		{
			accessorKey: "email",
			header: "Email",
			cell: ({ row }) => {
				const emailSnippet = createRawSnippet<[{ email: string | null | undefined }]>((getEmail) => {
					const { email } = getEmail();
					return {
						render: () => `<div class="max-w-[200px] truncate text-sm">${email || '-'}</div>`
					};
				});
				return renderSnippet(emailSnippet, { email: row.original.email });
			}
		},
		{
			id: "actions",
			header: "Acciones",
			cell: ({ row }) => {
				return renderComponent(DataTableActions, { 
					broker: row.original,
					onSuccess 
				});
			}
		}
	];
}