ADUANASOFT/plantillas-proyectos
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Se homologalizo el estilo igual que en clases

Browse Source
This commit is contained in:
Kevin_Ramirez
2026-05-07 17:06:17 -05:00
parent 246f2d33f7
commit ec04edd8c0
2 changed files with 51 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
frontend/src/lib/components/dashboard/goods/parts/columns.ts
View File

@@ -19,42 +19,19 @@ function formatCurrency(amount: number | null, currency: string | null): string
}
export type GoodsPartsColumnOptions = {
canEdit?: boolean;
canDelete?: boolean;
canEdit?: boolean;
canDelete?: boolean;
};
export function createColumns(
onSuccess?: () => void,
options: GoodsPartsColumnOptions = {}
onSuccess?: () => void,
options: GoodsPartsColumnOptions = {}
): ColumnDef<Part>[] {
const { canEdit = false, canDelete = false } = options;
const { canEdit = false, canDelete = false } = options;
return [
{
id: "select",
header: ({ table }) => {
const headerCheckbox = createRawSnippet<[{ table: import("@tanstack/table-core").Table<Part> }]>((getTable) => {
const { table: t } = getTable();
return {
render: () => {
const input = document.createElement('input');
input.type = 'checkbox';
input.checked = t.getIsAllPageRowsSelected();
input.indeterminate = t.getIsSomePageRowsSelected();
input.onchange = (e) => t.toggleAllPageRowsSelected(!!(e.target as HTMLInputElement).checked);
// Usamos el componente Checkbox si es posible, pero para snippets crudos en TanStack 5
// a veces es más directo un input o un Snippet de Svelte.
// Aquí usaremos renderComponent para el Checkbox real.
return "<span></span>";
}
};
});
return renderComponent(Checkbox, {
checked: table.getIsAllPageRowsSelected(),
indeterminate: table.getIsSomePageRowsSelected(),
onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value),
"aria-label": "Select all"
});
},
header: "", // Cabecera vacía para igualar a Clases
cell: ({ row }) => {
return renderComponent(Checkbox, {
checked: row.getIsSelected(),
@@ -62,6 +39,7 @@ export function createColumns(
"aria-label": "Select row"
});
},
size: 40,
enableSorting: false,
enableHiding: false
},
@@ -74,16 +52,15 @@ export function createColumns(
const statusSnippet = createRawSnippet<[{ active: boolean }]>((getStatus) => {
const { active } = getStatus();
return {
render: () => active
? `<span class="inline-flex items-center rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">Activo</span>`
: `<span class="inline-flex items-center rounded-full bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/10">Inactivo</span>`
render: () => active
? `<span class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-[10px] font-bold uppercase text-green-700 dark:bg-green-900/30 dark:text-green-400">Activo</span>`
: `<span class="inline-flex items-center rounded-full bg-red-100 px-2 py-0.5 text-[10px] font-bold uppercase text-red-700 dark:bg-red-900/30 dark:text-red-400">Inactivo</span>`
};
});
return renderSnippet(statusSnippet, { active: row.original.is_active });
}
},
{
accessorKey: "part_number",
header: "No. Parte",
@@ -100,7 +77,6 @@ export function createColumns(
}
},
{
accessorKey: "description_spanish",
header: "Descripción",
@@ -110,7 +86,7 @@ export function createColumns(
const { desc } = getDesc();
return {
render: () =>
`<div class="max-w-[250px] truncate text-xs font-medium uppercase text-muted-foreground" title="${desc}">${desc || '-'}</div>`
`<div class="max-w-[250px] truncate text-sm font-medium text-foreground" title="${desc}">${desc || '-'}</div>`
};
});
return renderSnippet(descSnippet, { desc: row.original.description_spanish || '' });
@@ -125,14 +101,14 @@ export function createColumns(
const { desc } = getDesc();
return {
render: () =>
`<div class="max-w-[200px] truncate text-xs text-muted-foreground/70" title="${desc}">${desc || '-'}</div>`
`<div class="max-w-[200px] truncate text-sm text-muted-foreground" title="${desc}">${desc || '-'}</div>`
};
});
return renderSnippet(descEnSnippet, { desc: row.original.description_english || '' });
}
},
// CLASE - Estilo de Clases (borde azul)
{
accessorKey: "part_class",
header: "Clase",
@@ -141,29 +117,33 @@ export function createColumns(
const classSnippet = createRawSnippet<[{ cls: string }]>((getCls) => {
const { cls } = getCls();
return {
render: () => `<div class="text-xs font-mono">${cls || '-'}</div>`
render: () => cls
? `<span class="inline-flex items-center rounded-md border border-blue-200 bg-blue-50 px-2 py-1 font-mono text-xs font-bold text-blue-700 dark:border-blue-800 dark:bg-blue-900/30 dark:text-blue-400">${cls}</span>`
: `<span class="text-xs text-muted-foreground">-</span>`
};
});
return renderSnippet(classSnippet, { cls: row.original.part_class || '' });
}
},
// TIPO - Estilo de Clases (píldora oscura)
{
accessorKey: "commercial_part_number",
accessorKey: "commercial_part_number",
header: "Tipo",
cell: ({ row }) => {
const typeSnippet = createRawSnippet<[{ val: string }]>((getType) => {
const { val } = getType();
return {
render: () => `<div class="text-xs text-muted-foreground">${val || '-'}</div>`
render: () => val
? `<span class="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-bold tracking-wider uppercase text-slate-700 dark:bg-slate-800 dark:text-slate-400">${val}</span>`
: `<span class="text-xs text-muted-foreground">-</span>`
};
});
return renderSnippet(typeSnippet, { val: row.original.commercial_part_number || '' });
}
},
// 7. U.M. (Unidad de Medida)
// U.M. - Estilo de Clases (texto plano claro)
{
accessorKey: "unit_of_measure",
header: "U.M.",
@@ -171,15 +151,14 @@ export function createColumns(
const umSnippet = createRawSnippet<[{ um: string | null }]>((getUm) => {
const { um } = getUm();
return {
render: () =>
`<span class="inline-flex items-center rounded-sm bg-blue-50 dark:bg-blue-900 text-blue-700 dark:text-blue-300 px-1.5 py-0.5 text-[10px] font-bold ring-1 ring-inset ring-blue-700/10">${um || '-'}</span>`
render: () => `<div class="text-sm text-muted-foreground">${um || '-'}</div>`
};
});
return renderSnippet(umSnippet, { um: row.original.unit_of_measure });
}
},
// 8. FRACCION
// FRACCION - Estilo de Clases (texto naranja)
{
accessorKey: "fraction",
header: "Fracción",
@@ -188,7 +167,7 @@ export function createColumns(
const fracSnippet = createRawSnippet<[{ fr: string }]>((getFrac) => {
const { fr } = getFrac();
return {
render: () => `<span class="font-mono text-xs bg-slate-100 dark:bg-slate-800 px-1.5 py-0.5 rounded">${fr || '-'}</span>`
render: () => `<span class="font-mono text-xs text-orange-600 dark:text-orange-400">${fr || '-'}</span>`
};
});
return renderSnippet(fracSnippet, {
@@ -197,7 +176,7 @@ export function createColumns(
}
},
// 9. U.M.T. (del inv_data)
// U.M.T.
{
id: "stock_uom",
header: "U.M.T.",
@@ -205,14 +184,14 @@ export function createColumns(
const umtSnippet = createRawSnippet<[{ umt: string }]>((getUmt) => {
const { umt } = getUmt();
return {
render: () => `<div class="text-xs font-mono">${umt || '-'}</div>`
render: () => `<div class="text-xs font-mono text-muted-foreground">${umt || '-'}</div>`
};
});
return renderSnippet(umtSnippet, { umt: row.original.inv_data?.stock_uom || '' });
}
},
// 10. COSTO
// COSTO - Texto plano
{
accessorKey: "unit_cost",
header: "Costo",
@@ -221,17 +200,17 @@ export function createColumns(
const costSnippet = createRawSnippet<[{ amount: number | null, curr: string | null }]>((getCost) => {
const { amount, curr } = getCost();
return {
render: () => `<div class="font-mono text-xs font-medium">${formatCurrency(amount, curr)}</div>`
render: () => `<div class="font-mono text-xs font-medium text-foreground">${formatCurrency(amount, curr)}</div>`
};
});
return renderSnippet(costSnippet, {
amount: row.original.unit_cost,
curr: row.original.currency_key
return renderSnippet(costSnippet, {
amount: row.original.unit_cost,
curr: row.original.currency_key
});
}
},
// 11. MONEDA
// MONEDA - Texto plano para igualar el estilo minimalista
{
accessorKey: "currency_key",
header: "Moneda",
@@ -239,14 +218,14 @@ export function createColumns(
const currSnippet = createRawSnippet<[{ curr: string }]>((getCurr) => {
const { curr } = getCurr();
return {
render: () => `<span class="inline-flex items-center rounded-sm bg-emerald-50 dark:bg-emerald-900 text-emerald-700 dark:text-emerald-300 px-1.5 py-0.5 text-[10px] font-bold">${curr || '-'}</span>`
render: () => `<span class="text-[10px] font-bold text-emerald-600 dark:text-emerald-400">${curr || '-'}</span>`
};
});
return renderSnippet(currSnippet, { curr: row.original.currency_key || '' });
}
},
// 12. PESO UNITARIO
// PESO UNITARIO
{
accessorKey: "unit_weight",
header: "Peso Unitario",
@@ -256,19 +235,19 @@ export function createColumns(
const { weight, type } = getWeight();
return {
render: () => {
if (weight === null || weight === undefined) return '<span>-</span>';
return `<div class="text-xs font-mono">${Number(weight).toFixed(4)} ${type || ''}</div>`;
if (weight === null || weight === undefined) return '<span class="text-muted-foreground">-</span>';
return `<div class="text-xs font-mono text-muted-foreground">${Number(weight).toFixed(4)} ${type || ''}</div>`;
}
};
});
return renderSnippet(weightSnippet, {
return renderSnippet(weightSnippet, {
weight: row.original.unit_weight,
type: row.original.weight_type
});
}
},
// 13. U.M. EXIST (Stock UOM del inv_data)
// U.M. EXIST
{
id: "equivalent_uom",
header: "U.M. Exist",
@@ -276,14 +255,14 @@ export function createColumns(
const eqUomSnippet = createRawSnippet<[{ uom: string }]>((getUom) => {
const { uom } = getUom();
return {
render: () => `<div class="text-xs">${uom || '-'}</div>`
render: () => `<div class="text-xs text-muted-foreground">${uom || '-'}</div>`
};
});
return renderSnippet(eqUomSnippet, { uom: row.original.inv_data?.equivalent_uom || '' });
}
},
// 14. FECHA MODIFICACIÓN
// FECHA MODIFICACIÓN
{
accessorKey: "updated_at",
header: "Fecha Modificación",
@@ -291,7 +270,7 @@ export function createColumns(
cell: ({ row }) => {
const dateSnippet = createRawSnippet<[{ date: string }]>((getDate) => {
const { date } = getDate();
if (!date) return { render: () => '<span>-</span>' };
if (!date) return { render: () => '<span class="text-muted-foreground">-</span>' };
const formatted = new Date(date).toLocaleDateString('es-MX', {
year: 'numeric',
month: '2-digit',
@@ -311,11 +290,11 @@ export function createColumns(
header: "",
cell: ({ row }) => {
return renderComponent(DataTableActions, {
item: row.original,
onSuccess,
canEdit,
canDelete
});
item: row.original,
onSuccess,
canEdit,
canDelete
});
}
}
];

8
frontend/src/lib/components/dashboard/goods/parts/data-table.svelte
View File

@@ -95,14 +95,14 @@
bind:this={scrollContainer}
>
<Table.Root class="w-full">
<Table.Header class="bg-background sticky top-0 z-10 shadow-sm">
<Table.Header class="bg-background sticky top-0 z-10">
{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
<Table.Row>
{#each headerGroup.headers as header (header.id)}
<Table.Head class="whitespace-nowrap p-0">
{#if !header.isPlaceholder}
<button
class="group flex h-full w-full items-center gap-2 px-3 py-2 text-left hover:bg-muted/50"
class="group flex h-full w-full items-center gap-2 px-2 py-2 text-left hover:bg-muted/50"
onclick={header.column.getToggleSortingHandler()}
disabled={!header.column.getCanSort()}
>
@@ -174,11 +174,11 @@
}}
ondblclick={() => onRowDoubleClick?.(row.original)}
class="cursor-pointer transition-colors {row.getIsSelected()
? 'bg-blue-50/50 dark:bg-blue-900/20'
? 'bg-primary/10'
: 'hover:bg-muted/50'}"
>
{#each row.getVisibleCells() as cell (cell.id)}
<Table.Cell class="whitespace-nowrap px-3 py-2">
<Table.Cell class="whitespace-nowrap px-2 py-1">
<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
</Table.Cell>
{/each}