admtracksteel/tracksteel_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: abreviacoes W/HP, L, CH, U, RED, TUB e botao Todos travado fixo

Browse Source
This commit is contained in:
Marcos Reifonas
2026-09-21 23:16:05 +00:00
parent 5902b6f8ef
commit 9d476df787
1 changed files with 113 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/smart/components/SmartConsultaRelatoriosFlow.tsx
+113 -46
View File
@@ -238,7 +238,7 @@ export const SmartConsultaRelatoriosFlow: React.FC<SmartConsultaRelatoriosFlowPr
if ((p.etapa_fase || '').trim() !== filtroFase) return false; if ((p.etapa_fase || '').trim() !== filtroFase) return false;
} }
// 2. Filtro rápido de Perfil / Material (W, L, Chapa, Redondo, Tubo) // 2. Filtro rápido de Perfil / Material (W/HP, L, CH, U, RED, TUB)
if (filtroPerfilRapido) { if (filtroPerfilRapido) {
const perfilNorm = (p.perfil_principal || '').toLowerCase(); const perfilNorm = (p.perfil_principal || '').toLowerCase();
const descNorm = (p.descricao || '').toLowerCase(); const descNorm = (p.descricao || '').toLowerCase();
@@ -246,16 +246,56 @@ export const SmartConsultaRelatoriosFlow: React.FC<SmartConsultaRelatoriosFlowPr
const buscaP = filtroPerfilRapido.toLowerCase(); const buscaP = filtroPerfilRapido.toLowerCase();
let bateuPerfil = false; let bateuPerfil = false;
if (buscaP === 'w') { if (buscaP === 'w_hp') {
bateuPerfil = perfilNorm.startsWith('w') || perfilNorm.includes('w150') || perfilNorm.includes('w200') || perfilNorm.includes('w250') || perfilNorm.includes('w310') || perfilNorm.includes('perfil w'); bateuPerfil =
perfilNorm.startsWith('w') ||
perfilNorm.startsWith('hp') ||
perfilNorm.includes('perfil w') ||
perfilNorm.includes('hp') ||
descNorm.startsWith('w') ||
descNorm.startsWith('hp');
} else if (buscaP === 'l') { } else if (buscaP === 'l') {
bateuPerfil = perfilNorm.startsWith('l') || perfilNorm.includes('cant') || descNorm.includes('l2x'); bateuPerfil =
} else if (buscaP === 'chapa') { perfilNorm.startsWith('l') ||
bateuPerfil = perfilNorm.includes('chapa') || perfilNorm.includes('ch.') || descNorm.includes('chapa') || descNorm.includes('arruela'); perfilNorm.includes('cant') ||
} else if (buscaP === 'redondo') { descNorm.startsWith('l') ||
bateuPerfil = perfilNorm.includes('red') || perfilNorm.includes('ferro') || perfilNorm.includes('barra') || perfilNorm.includes('ø') || descNorm.includes('chumb'); descNorm.includes('cant');
} else if (buscaP === 'tubo') { } else if (buscaP === 'ch') {
bateuPerfil = perfilNorm.includes('tubo') || perfilNorm.includes('tubular') || descNorm.includes('tubo'); bateuPerfil =
perfilNorm.includes('chapa') ||
perfilNorm.includes('ch.') ||
perfilNorm.startsWith('ch') ||
perfilNorm.startsWith('pl') ||
descNorm.includes('chapa') ||
descNorm.includes('ch.') ||
descNorm.includes('arruela') ||
matNorm.includes('chapa');
} else if (buscaP === 'u') {
bateuPerfil =
perfilNorm.startsWith('u') ||
perfilNorm.startsWith('c') ||
perfilNorm.includes('perfil u') ||
perfilNorm.includes('viga u') ||
descNorm.startsWith('u') ||
descNorm.includes('perfil u');
} else if (buscaP === 'red') {
bateuPerfil =
perfilNorm.includes('red') ||
perfilNorm.includes('ferro') ||
perfilNorm.includes('barra') ||
perfilNorm.includes('ø') ||
descNorm.includes('red') ||
descNorm.includes('ferro') ||
descNorm.includes('barra') ||
descNorm.includes('chumb') ||
descNorm.includes('ø');
} else if (buscaP === 'tub') {
bateuPerfil =
perfilNorm.includes('tubo') ||
perfilNorm.includes('tubular') ||
perfilNorm.startsWith('tub') ||
descNorm.includes('tubo') ||
descNorm.includes('tubular');
} else { } else {
bateuPerfil = perfilNorm.includes(buscaP) || descNorm.includes(buscaP) || matNorm.includes(buscaP); bateuPerfil = perfilNorm.includes(buscaP) || descNorm.includes(buscaP) || matNorm.includes(buscaP);
} }
@@ -556,17 +596,18 @@ export const SmartConsultaRelatoriosFlow: React.FC<SmartConsultaRelatoriosFlowPr
)} )}
</div> </div>
{/* FILTRO 1: Pílulas Rápidas de Perfis / Materiais Comuns (W, L, Chapa, Redondo, Tubo) */} {/* FILTRO 1: Pílulas Rápidas de Perfis Abreviações (W/HP, L, CH, U, RED, TUB) */}
<div className="flex items-center gap-1.5 overflow-x-auto pb-1.5 mb-1.5 no-scrollbar"> <div className="flex items-center gap-1.5 overflow-x-auto pb-1.5 mb-1.5 no-scrollbar">
<span className="text-[10px] font-black uppercase text-amber-400 px-1 shrink-0"> <span className="text-[10px] font-black uppercase text-amber-400 px-1 shrink-0">
PERFIL: PERFIL:
</span> </span>
{[ {[
{ id: 'w', label: 'W / I' }, { id: 'w_hp', label: 'W/HP' },
{ id: 'l', label: 'L (Cantoneira)' }, { id: 'l', label: 'L' },
{ id: 'chapa', label: 'Chapa' }, { id: 'ch', label: 'CH' },
{ id: 'redondo', label: 'Barra / Redondo' }, { id: 'u', label: 'U' },
{ id: 'tubo', label: 'Tubo' }, { id: 'red', label: 'RED' },
{ id: 'tub', label: 'TUB' },
].map((p) => { ].map((p) => {
const ativo = filtroPerfilRapido === p.id; const ativo = filtroPerfilRapido === p.id;
return ( return (
@@ -577,7 +618,7 @@ export const SmartConsultaRelatoriosFlow: React.FC<SmartConsultaRelatoriosFlowPr
smartAudio.playClick(); smartAudio.playClick();
setFiltroPerfilRapido(ativo ? '' : p.id); setFiltroPerfilRapido(ativo ? '' : p.id);
}} }}
className={`h-8 px-2.5 rounded-lg text-xs font-black whitespace-nowrap transition-all border ${ className={`h-8 px-3 rounded-lg text-xs font-black whitespace-nowrap shrink-0 transition-all border ${
ativo ativo
? 'bg-amber-500 text-slate-950 border-amber-400 shadow-sm' ? 'bg-amber-500 text-slate-950 border-amber-400 shadow-sm'
: 'bg-slate-800 text-slate-300 border-slate-700 hover:border-slate-600' : 'bg-slate-800 text-slate-300 border-slate-700 hover:border-slate-600'
@@ -589,8 +630,8 @@ export const SmartConsultaRelatoriosFlow: React.FC<SmartConsultaRelatoriosFlowPr
})} })}
</div> </div>
{/* FILTRO 2: Fases da Obra */} {/* FILTRO 2: Fases da Obra (Com botão 'Todas' travado/fixo) */}
<div className="flex items-center gap-1.5 overflow-x-auto pb-1.5 mb-1.5 no-scrollbar"> <div className="flex items-center gap-1.5 pb-1.5 mb-1.5">
<span className="text-[10px] font-black uppercase text-blue-400 px-1 shrink-0"> <span className="text-[10px] font-black uppercase text-blue-400 px-1 shrink-0">
FASE: FASE:
</span> </span>
@@ -600,38 +641,63 @@ export const SmartConsultaRelatoriosFlow: React.FC<SmartConsultaRelatoriosFlowPr
smartAudio.playClick(); smartAudio.playClick();
setFiltroFase('todas'); setFiltroFase('todas');
}} }}
className={`h-8 px-2.5 rounded-lg text-xs font-bold whitespace-nowrap transition-all border ${ className={`h-8 px-3 rounded-lg text-xs font-bold whitespace-nowrap shrink-0 transition-all border ${
filtroFase === 'todas' filtroFase === 'todas'
? 'bg-blue-600 text-white border-blue-400 font-black' ? 'bg-blue-600 text-white border-blue-400 font-black shadow-sm'
: 'bg-slate-800 text-slate-300 border-slate-700' : 'bg-slate-800 text-slate-300 border-slate-700'
}`} }`}
> >
Todas Todas
</button> </button>
{fasesUnicas.map((fase) => (
<button {fasesUnicas.length > 0 && <div className="h-4 w-px bg-slate-700 shrink-0" />}
key={fase}
type="button" {/* Demais fases rolando horizontalmente */}
onClick={() => { <div className="flex items-center gap-1.5 overflow-x-auto no-scrollbar flex-1 py-0.5">
smartAudio.playClick(); {fasesUnicas.map((fase) => (
setFiltroFase(fase); <button
}} key={fase}
className={`h-8 px-2.5 rounded-lg text-xs font-bold whitespace-nowrap transition-all border ${ type="button"
filtroFase === fase onClick={() => {
? 'bg-blue-600 text-white border-blue-400 font-black' smartAudio.playClick();
: 'bg-slate-800 text-slate-300 border-slate-700' setFiltroFase(fase);
}`} }}
> className={`h-8 px-3 rounded-lg text-xs font-bold whitespace-nowrap shrink-0 transition-all border ${
Fase {fase} filtroFase === fase
</button> ? 'bg-blue-600 text-white border-blue-400 font-black shadow-sm'
))} : 'bg-slate-800 text-slate-300 border-slate-700'
}`}
>
Fase {fase}
</button>
))}
</div>
</div> </div>
{/* FILTRO 3: Status Fabril e Botão Limpar */} {/* FILTRO 3: Status Fabril (Com botão 'Todos' travado/fixo sem scroll) e Botão Limpar */}
<div className="flex items-center justify-between gap-1.5 pb-2 mb-2 border-b border-slate-800"> <div className="flex items-center gap-1.5 pb-2 mb-2 border-b border-slate-800">
<div className="flex items-center gap-1.5 overflow-x-auto no-scrollbar"> {/* Botão "Todos" fixo/travado à esquerda */}
<button
type="button"
onClick={() => {
smartAudio.playClick();
setFiltroStatus('todos');
}}
className={`h-7 px-3 rounded-md text-[11px] font-bold whitespace-nowrap shrink-0 transition-all ${
filtroStatus === 'todos'
? 'bg-slate-200 text-slate-900 font-black ring-1 ring-white/60 shadow-sm'
: 'bg-slate-800 text-slate-400 hover:text-slate-200 border border-slate-700'
}`}
>
Todos
</button>
{/* Divisor vertical */}
<div className="h-4 w-px bg-slate-700 shrink-0" />
{/* Demais botões roláveis horizontalmente */}
<div className="flex items-center gap-1.5 overflow-x-auto no-scrollbar flex-1 py-0.5">
{[ {[
{ id: 'todos', label: 'Todos' },
{ id: 'fabricando', label: 'Em Fabricação' }, { id: 'fabricando', label: 'Em Fabricação' },
{ id: 'pronto', label: 'Pronto Pátio' }, { id: 'pronto', label: 'Pronto Pátio' },
{ id: 'embarcado', label: 'Embarcado' }, { id: 'embarcado', label: 'Embarcado' },
@@ -644,10 +710,10 @@ export const SmartConsultaRelatoriosFlow: React.FC<SmartConsultaRelatoriosFlowPr
smartAudio.playClick(); smartAudio.playClick();
setFiltroStatus(f.id as any); setFiltroStatus(f.id as any);
}} }}
className={`h-7 px-2 rounded-md text-[11px] font-bold whitespace-nowrap transition-all ${ className={`h-7 px-2.5 rounded-md text-[11px] font-bold whitespace-nowrap shrink-0 transition-all ${
filtroStatus === f.id filtroStatus === f.id
? 'bg-slate-200 text-slate-900 font-black' ? 'bg-slate-200 text-slate-900 font-black shadow-sm'
: 'bg-slate-800/80 text-slate-400 hover:text-slate-200' : 'bg-slate-800/80 text-slate-400 hover:text-slate-200 border border-slate-700/60'
}`} }`}
> >
{f.label} {f.label}
@@ -655,11 +721,12 @@ export const SmartConsultaRelatoriosFlow: React.FC<SmartConsultaRelatoriosFlowPr
))} ))}
</div> </div>
{/* Botão Limpar fixo à direita */}
{temFiltroAtivo && ( {temFiltroAtivo && (
<button <button
type="button" type="button"
onClick={handleLimparFiltros} onClick={handleLimparFiltros}
className="h-7 px-2.5 rounded-lg bg-red-950/50 hover:bg-red-900/60 border border-red-800/60 text-red-300 text-[11px] font-bold flex items-center gap-1 shrink-0 active:scale-95" className="h-7 px-2.5 rounded-lg bg-red-950/50 hover:bg-red-900/60 border border-red-800/60 text-red-300 text-[11px] font-bold flex items-center gap-1 shrink-0 active:scale-95 ml-auto"
title="Limpar todos os filtros aplicados" title="Limpar todos os filtros aplicados"
> >
<RotateCcw className="h-3 w-3" /> <RotateCcw className="h-3 w-3" />