Move fabric plan form to right side
This commit is contained in:
Cauê Faleiros
@@ -1589,8 +1589,66 @@ const FabricPlanningScreen = () => {
|
||||
{errorMessage}
|
||||
</div>
|
||||
)}
|
||||
<div className="grid grid-cols-1 gap-6 xl:grid-cols-[420px_1fr] xl:items-start">
|
||||
<form onSubmit={handleSubmit} className={`${panelClassName} p-5 xl:sticky xl:top-6`}>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
<div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
|
||||
<p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Planos ativos</p>
|
||||
<p className="mt-2 text-3xl font-bold text-dark-text">{plans.length}</p>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
|
||||
<p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Kg planejado</p>
|
||||
<p className="mt-2 text-3xl font-bold text-dark-text">{formatNumber(totalKg)} kg</p>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
|
||||
<p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Críticos</p>
|
||||
<p className="mt-2 text-3xl font-bold text-dark-text">{plans.filter(plan => plan.priority === 'Crítico').length}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 xl:grid-cols-[1fr_420px] xl:items-start">
|
||||
<div className={`${panelClassName} overflow-hidden`}>
|
||||
<div className="border-b border-dark-border p-5">
|
||||
<h2 className="text-base font-bold text-dark-text">Planos de malha</h2>
|
||||
<p className="mt-1 text-sm font-semibold text-dark-muted">Itens planejados para compra ou recebimento.</p>
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<div className={`${emptyStateClassName} min-h-[220px]`}>
|
||||
<Ruler className="h-8 w-8 text-brand-primary" />
|
||||
<h3 className="text-base font-bold text-dark-text">Carregando planos...</h3>
|
||||
</div>
|
||||
) : plans.length ? (
|
||||
<div className="divide-y divide-dark-border">
|
||||
{plans.map(plan => (
|
||||
<div key={plan.id} className="grid grid-cols-1 gap-3 p-4 md:grid-cols-[1.4fr_1fr_100px_100px_44px] md:items-center">
|
||||
<div>
|
||||
<p className="font-bold text-dark-text">{plan.material}</p>
|
||||
<p className="text-xs font-semibold text-dark-muted">{plan.color}</p>
|
||||
</div>
|
||||
<p className="text-sm font-semibold text-dark-muted">{plan.supplier}</p>
|
||||
<p className="text-sm font-bold text-dark-text">{formatNumber(plan.quantityKg)} kg</p>
|
||||
<span className="w-fit rounded-full border border-dark-border bg-dark-input px-2.5 py-1 text-xs font-bold text-dark-text">{plan.priority}</span>
|
||||
<button
|
||||
type="button"
|
||||
title="Remover plano"
|
||||
aria-label={`Remover plano ${plan.material}`}
|
||||
disabled={isBusy}
|
||||
onClick={() => removePlan(plan.id)}
|
||||
className="inline-flex h-10 w-10 items-center justify-center rounded-lg text-red-400 transition-colors hover:bg-red-500/10 hover:text-red-300 disabled:cursor-not-allowed disabled:opacity-60 cursor-pointer"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className={emptyStateClassName}>
|
||||
<Ruler className="h-8 w-8 text-brand-primary" />
|
||||
<h3 className="text-base font-bold text-dark-text">Nenhum plano de malha cadastrado</h3>
|
||||
<p className="text-sm font-semibold text-dark-muted">Cadastre o primeiro plano no formulário ao lado.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className={`${panelClassName} p-5`}>
|
||||
<h2 className="text-base font-bold text-dark-text">Novo plano de malha</h2>
|
||||
<div className="mt-4 grid grid-cols-1 gap-3">
|
||||
<label className="text-xs font-bold text-dark-muted">
|
||||
@@ -1625,66 +1683,6 @@ const FabricPlanningScreen = () => {
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
<div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
|
||||
<p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Planos ativos</p>
|
||||
<p className="mt-2 text-3xl font-bold text-dark-text">{plans.length}</p>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
|
||||
<p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Kg planejado</p>
|
||||
<p className="mt-2 text-3xl font-bold text-dark-text">{formatNumber(totalKg)} kg</p>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
|
||||
<p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Críticos</p>
|
||||
<p className="mt-2 text-3xl font-bold text-dark-text">{plans.filter(plan => plan.priority === 'Crítico').length}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`${panelClassName} overflow-hidden`}>
|
||||
<div className="border-b border-dark-border p-5">
|
||||
<h2 className="text-base font-bold text-dark-text">Planos de malha</h2>
|
||||
<p className="mt-1 text-sm font-semibold text-dark-muted">Itens planejados para compra ou recebimento.</p>
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<div className={`${emptyStateClassName} min-h-[220px]`}>
|
||||
<Ruler className="h-8 w-8 text-brand-primary" />
|
||||
<h3 className="text-base font-bold text-dark-text">Carregando planos...</h3>
|
||||
</div>
|
||||
) : plans.length ? (
|
||||
<div className="divide-y divide-dark-border">
|
||||
{plans.map(plan => (
|
||||
<div key={plan.id} className="grid grid-cols-1 gap-3 p-4 md:grid-cols-[1.4fr_1fr_100px_100px_44px] md:items-center">
|
||||
<div>
|
||||
<p className="font-bold text-dark-text">{plan.material}</p>
|
||||
<p className="text-xs font-semibold text-dark-muted">{plan.color}</p>
|
||||
</div>
|
||||
<p className="text-sm font-semibold text-dark-muted">{plan.supplier}</p>
|
||||
<p className="text-sm font-bold text-dark-text">{formatNumber(plan.quantityKg)} kg</p>
|
||||
<span className="w-fit rounded-full border border-dark-border bg-dark-input px-2.5 py-1 text-xs font-bold text-dark-text">{plan.priority}</span>
|
||||
<button
|
||||
type="button"
|
||||
title="Remover plano"
|
||||
aria-label={`Remover plano ${plan.material}`}
|
||||
disabled={isBusy}
|
||||
onClick={() => removePlan(plan.id)}
|
||||
className="inline-flex h-10 w-10 items-center justify-center rounded-lg text-red-400 transition-colors hover:bg-red-500/10 hover:text-red-300 disabled:cursor-not-allowed disabled:opacity-60 cursor-pointer"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className={emptyStateClassName}>
|
||||
<Ruler className="h-8 w-8 text-brand-primary" />
|
||||
<h3 className="text-base font-bold text-dark-text">Nenhum plano de malha cadastrado</h3>
|
||||
<p className="text-sm font-semibold text-dark-muted">Cadastre o primeiro plano no formulário ao lado.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user