Add SKU edit actions
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 2m18s

This commit is contained in:
Cauê Faleiros
2026-07-14 10:18:04 -03:00
parent 060b4da907
commit bc05fb4504
6 changed files with 196 additions and 61 deletions

View File

@@ -1,6 +1,7 @@
import { useEffect, useMemo, useRef, useState } from 'react';
import { Link, useOutletContext } from 'react-router-dom';
import { Download, Filter, Package, PackageCheck, Search, TrendingDown, TrendingUp, X } from 'lucide-react';
import { Download, Eye, Filter, Package, PackageCheck, Pencil, Search, TrendingDown, X } from 'lucide-react';
import { buildSkuEditPath } from '../catalogLinks';
import DateRangePicker from '../components/DateRangePicker';
import PaginationControls from '../components/PaginationControls';
import RefreshStatus from '../components/RefreshStatus';
@@ -630,7 +631,7 @@ const Products = () => {
<col className="w-[130px]" />
<col className="w-[130px]" />
<col className="w-[140px]" />
<col className="w-[150px]" />
<col className="w-[120px]" />
</colgroup>
<thead className="bg-zinc-50 dark:bg-dark-header border-b border-zinc-100 dark:border-dark-border text-zinc-500 dark:text-dark-muted">
<tr>
@@ -684,13 +685,26 @@ const Products = () => {
</td>
<td className="px-6 py-2.5 text-brand-primary font-bold whitespace-nowrap">{formatCurrency(product.revenue)}</td>
<td className="px-4 py-2.5 text-right">
<Link
to={viewMode === 'group' ? `/products/groups/${product.groupKey}` : `/products/${product.id}`}
className="inline-flex items-center whitespace-nowrap text-xs font-bold text-brand-primary hover:opacity-80 transition-opacity bg-brand-primary/10 px-3 py-1.5 rounded-lg cursor-pointer"
>
<TrendingUp className="w-3.5 h-3.5 mr-1.5" />
{viewMode === 'group' ? 'Ver Grupo' : 'Ver Gráfico'}
</Link>
<div className="flex justify-end gap-2">
{viewMode === 'sku' && (
<Link
to={buildSkuEditPath({ sku: product.id, name: product.name, color: product.color, size: product.size })}
className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-dark-input text-dark-text transition-colors hover:bg-dark-border cursor-pointer"
title={`Editar SKU ${product.id}`}
aria-label={`Editar SKU ${product.id}`}
>
<Pencil className="h-3.5 w-3.5" />
</Link>
)}
<Link
to={viewMode === 'group' ? `/products/groups/${product.groupKey}` : `/products/${product.id}`}
className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-brand-primary/10 text-brand-primary transition-opacity hover:opacity-80 cursor-pointer"
title={viewMode === 'group' ? `Ver grupo ${product.name}` : `Ver SKU ${product.id}`}
aria-label={viewMode === 'group' ? `Ver grupo ${product.name}` : `Ver SKU ${product.id}`}
>
<Eye className="h-3.5 w-3.5" />
</Link>
</div>
</td>
</tr>
);