Guide empty production order workflow

src/pages/ProductionOrders.tsx

@@ -353,6 +353,37 @@ const ProductionOrders = () => {
             </div>
           </div>
 
+          {summary.orders.length === 0 ? (
+            <div className="rounded-2xl border border-dark-border bg-dark-card p-6 shadow-sm">
+              <div className="mx-auto max-w-3xl text-center">
+                <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl border border-brand-primary/30 bg-brand-primary/10 text-brand-primary">
+                  <ClipboardList className="h-6 w-6" />
+                </div>
+                <h2 className="mt-4 text-lg font-bold text-dark-text">Nenhuma ordem de produção neste período</h2>
+                <p className="mt-2 text-sm font-semibold leading-6 text-dark-muted">As OPs só são criadas depois que o Plano de Corte confirma SKUs com material e dados prontos para produção.</p>
+              </div>
+              <div className="mx-auto mt-6 grid max-w-4xl grid-cols-1 gap-3 md:grid-cols-3">
+                {[
+                  ['01', 'Resolver bloqueios', 'Confirme saldos de material e dados de composição pendentes.'],
+                  ['02', 'Definir o corte', 'Escolha SKUs liberados e revise a prévia das OPs.'],
+                  ['03', 'Acompanhar produção', 'Gere as OPs aqui e registre o consumo de material.'],
+                ].map(([number, title, description]) => (
+                  <div key={number} className="rounded-xl border border-dark-border bg-dark-input/45 p-4 text-left">
+                    <span className="text-xs font-bold tracking-[0.16em] text-dark-muted">{number}</span>
+                    <h3 className="mt-3 text-sm font-bold text-dark-text">{title}</h3>
+                    <p className="mt-1 text-xs font-semibold leading-5 text-dark-muted">{description}</p>
+                  </div>
+                ))}
+              </div>
+              <div className="mt-6 flex justify-center">
+                <Link to="/cutting" className="inline-flex h-10 items-center gap-2 rounded-lg border border-brand-primary/35 bg-brand-primary/10 px-4 text-sm font-bold text-brand-primary transition-colors hover:bg-brand-primary/20">
+                  <ClipboardList className="h-4 w-4" />
+                  Abrir Plano de Corte
+                </Link>
+              </div>
+            </div>
+          ) : (
+          <>
           {activeOrders.length > 0 && (
           <form onSubmit={handleProductionExit} className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm">
             <div className="flex flex-col gap-2 lg:flex-row lg:items-start lg:justify-between">
@@ -654,17 +685,10 @@ const ProductionOrders = () => {
                 <div className="rounded-2xl border border-dark-border bg-dark-input p-4 text-brand-primary">
                   <ClipboardList className="h-7 w-7" />
                 </div>
-                <p className="mt-4 text-sm font-bold text-dark-text">Nenhuma ordem de produção encontrada.</p>
+                <p className="mt-4 text-sm font-bold text-dark-text">Nenhuma ordem encontrada neste filtro.</p>
                 <p className="mt-1 max-w-md text-sm font-medium text-dark-muted">
-                  Gere ordens pelo Plano de Corte para acompanhar status, produto, quantidade e baixa de material dentro do Graphs.
+                  Ajuste a busca ou o status para ver outra parte da fila de produção.
                 </p>
-                <Link
-                  to="/cutting"
-                  className="mt-5 inline-flex h-10 items-center gap-2 rounded-lg border border-brand-primary/35 bg-brand-primary/10 px-4 text-sm font-bold text-brand-primary transition-colors hover:bg-brand-primary/20"
-                >
-                  <ClipboardList className="h-4 w-4" />
-                  Ir para Plano de Corte
-                </Link>
               </div>
             )}
 
@@ -685,6 +709,8 @@ const ProductionOrders = () => {
               }}
             />
           </div>
+          </>
+          )}
         </div>
       )}
     </div>