blyzer/graphs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish product stock table layout
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 42s
Details

Browse Source
This commit is contained in:
Cauê Faleiros
2026-07-06 13:23:07 -03:00
parent 8a9f47f569
commit 67116d13c4
1 changed files with 22 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/pages/Products.tsx
View File

@@ -24,8 +24,8 @@ type ProductRow = ProductAnalyticsItem & {
const riskStyles: Record<StockRisk, { label: string; className: string; dotClass: string }> = {
rupture: {
label: 'Sem estoque',
className: 'border-fuchsia-400/35 bg-fuchsia-400/10 text-fuchsia-300',
dotClass: 'bg-fuchsia-400'
className: 'border-zinc-500/30 bg-zinc-500/10 text-zinc-300',
dotClass: 'bg-zinc-400'
},
critical: {
label: 'Até 7 dias',
@@ -575,7 +575,18 @@ const Products = () => {
) : (
<div className={`bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl overflow-hidden shadow-sm ${isRefreshing ? 'refreshing-content' : ''}`} aria-busy={isRefreshing}>
<div className="overflow-x-auto">
<table className="w-full text-left text-sm">
<table className="w-full min-w-[1320px] table-fixed text-left text-sm">
<colgroup>
<col className="w-[120px]" />
<col className="w-[390px]" />
<col className="w-[170px]" />
<col className="w-[130px]" />
<col className="w-[120px]" />
<col className="w-[130px]" />
<col className="w-[130px]" />
<col className="w-[140px]" />
<col className="w-[110px]" />
</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>
<th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">ID Produto</th>
@@ -596,31 +607,31 @@ const Products = () => {
return (
<tr key={product.id} className="hover:bg-zinc-50/80 dark:hover:bg-dark-input/50 transition-colors group">
<td className="px-6 py-2.5 font-mono text-[11px] text-zinc-400 dark:text-dark-muted">#{product.id}</td>
<td className="px-6 py-2.5">
<div className="font-semibold text-zinc-900 dark:text-dark-text">{product.name}</div>
<td className="max-w-0 px-6 py-2.5">
<div className="truncate font-semibold text-zinc-900 dark:text-dark-text" title={product.name}>{product.name}</div>
<div className="text-[10px] text-zinc-400 dark:text-dark-muted font-medium">Preço Atual: {formatCurrency(product.lastPrice)}</div>
</td>
<td className="px-6 py-2.5">
<span className={`inline-flex items-center gap-2 rounded-full border px-2.5 py-1 text-xs font-bold ${style.className}`}>
<span className={`inline-flex items-center gap-2 whitespace-nowrap rounded-full border px-2.5 py-1 text-xs font-bold ${style.className}`}>
<span className={`h-2 w-2 rounded-full ${style.dotClass}`} />
{style.label}
</span>
</td>
<td className="px-6 py-2.5">
<td className="px-6 py-2.5 whitespace-nowrap">
<div className="flex items-center gap-2">
<Package className="w-3.5 h-3.5 text-zinc-400 dark:text-dark-muted" />
<span className="font-bold text-zinc-900 dark:text-dark-text">{formatNumber(product.quantitySold)} un.</span>
</div>
</td>
<td className="px-6 py-2.5 font-bold text-zinc-900 dark:text-dark-text">{formatNumber(product.stock)} un.</td>
<td className="px-6 py-2.5 text-zinc-500 dark:text-dark-muted">{formatNumber(product.dailySales, 2)} un./dia</td>
<td className="px-6 py-2.5">
<td className="px-6 py-2.5 font-bold text-zinc-900 dark:text-dark-text whitespace-nowrap">{formatNumber(product.stock)} un.</td>
<td className="px-6 py-2.5 text-zinc-500 dark:text-dark-muted whitespace-nowrap">{formatNumber(product.dailySales, 2)} un./dia</td>
<td className="px-6 py-2.5 whitespace-nowrap">
<span className="inline-flex items-center gap-1.5 font-bold text-zinc-900 dark:text-dark-text">
<TrendingDown className="h-3.5 w-3.5 text-zinc-400 dark:text-dark-muted" />
{formatDays(product.daysOfCover)}
</span>
</td>
<td className="px-6 py-2.5 text-brand-primary font-bold">{formatCurrency(product.revenue)}</td>
<td className="px-6 py-2.5 text-brand-primary font-bold whitespace-nowrap">{formatCurrency(product.revenue)}</td>
<td className="px-6 py-2.5 text-right">
<Link
to={`/products/${product.id}`}