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

Standardize operations page layout

Browse Source
This commit is contained in:
Cauê Faleiros
2026-07-17 10:10:59 -03:00
parent 0cae89277f
commit 1dcc565299
2 changed files with 36 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/pages/PlanningIssues.tsx
View File

@@ -260,8 +260,7 @@ const PlanningIssues = () => {
})}
</div>
<div className="rounded-2xl border border-dark-border bg-dark-card shadow-sm">
<div className="flex flex-col gap-3 border-b border-dark-border p-4 xl:flex-row xl:items-center xl:justify-between">
<div className="grid grid-cols-1 gap-3 rounded-2xl border border-dark-border bg-dark-card p-4 shadow-sm xl:grid-cols-[minmax(360px,1fr)_auto] xl:items-center">
<div className="flex flex-col gap-3 md:flex-row md:items-center">
<div className="relative w-full md:w-96">
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-dark-muted" />
@@ -292,12 +291,12 @@ const PlanningIssues = () => {
<div className="text-sm font-semibold text-dark-muted">
{formatNumber(rows.length)} SKUs pendentes
</div>
</div>
</div>
{isLoading && !products.length ? (
<PlanningIssuesSkeleton />
) : rows.length ? (
<>
<div className="overflow-hidden rounded-2xl border border-dark-border bg-dark-card shadow-sm">
<div className="overflow-x-auto">
<table className="w-full min-w-[1180px] table-fixed text-left text-sm">
<colgroup>
@@ -325,8 +324,8 @@ const PlanningIssues = () => {
<tbody className="divide-y divide-dark-border">
{paginatedRows.map(row => (
<tr key={row.id} className="transition-colors hover:bg-dark-input/50">
<td className="px-6 py-3 font-mono text-[11px] text-dark-muted">#{row.id}</td>
<td className="max-w-0 px-6 py-3">
<td className="px-6 py-2.5 font-mono text-[11px] text-dark-muted">#{row.id}</td>
<td className="max-w-0 px-6 py-2.5">
<div className="truncate font-semibold text-dark-text" title={row.name}>{row.name}</div>
<div className="mt-1 flex min-w-0 items-center gap-2 text-[10px] font-semibold text-dark-muted">
<span className="truncate">Cor: {row.color || '-'}</span>
@@ -335,10 +334,10 @@ const PlanningIssues = () => {
{row.hasOverride && <span className="rounded-full border border-brand-primary/25 bg-brand-primary/10 px-2 py-0.5 text-brand-primary">manual</span>}
</div>
</td>
<td className="px-6 py-3">
<td className="px-6 py-2.5">
<ProductTypeBadge type={row.productType} />
</td>
<td className="px-6 py-3">
<td className="px-6 py-2.5">
<div className="flex flex-wrap gap-1.5">
{row.issues.map(issue => (
<span
@@ -351,10 +350,10 @@ const PlanningIssues = () => {
))}
</div>
</td>
<td className="px-6 py-3 text-xs font-bold text-dark-text">{row.familyLabel}</td>
<td className="px-6 py-3 whitespace-nowrap font-bold text-dark-text">{formatNumber(row.quantitySold)} un.</td>
<td className="px-6 py-3 whitespace-nowrap font-bold text-brand-primary">{formatCurrency(row.revenue)}</td>
<td className="px-4 py-3 text-right">
<td className="px-6 py-2.5 text-xs font-bold text-dark-text">{row.familyLabel}</td>
<td className="px-6 py-2.5 whitespace-nowrap font-bold text-dark-text">{formatNumber(row.quantitySold)} un.</td>
<td className="px-6 py-2.5 whitespace-nowrap font-bold text-brand-primary">{formatCurrency(row.revenue)}</td>
<td className="px-4 py-2.5 text-right">
<div className="flex justify-end gap-2">
<button
type="button"
@@ -396,9 +395,9 @@ const PlanningIssues = () => {
setCurrentPage(1);
}}
/>
</>
</div>
) : (
<div className="flex flex-col items-center justify-center px-6 py-16 text-center">
<div className="flex flex-col items-center justify-center rounded-2xl border border-dark-border bg-dark-card px-6 py-16 text-center shadow-sm">
{products.length ? (
<>
<CheckCircle2 className="h-10 w-10 text-emerald-300" />
@@ -414,7 +413,6 @@ const PlanningIssues = () => {
)}
</div>
)}
</div>
{editingProduct && (
<SkuPlanningModal