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

style: harmonizar modal de pecas e botoes 3D para modo claro e escuro com paleta industrial sobria

Browse Source
This commit is contained in:
Marcos Reifonas
2026-09-23 13:28:03 +00:00
parent 4da2444938
commit b8d91d1371
2 changed files with 108 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/viewer3d/ModelViewer3D.tsx
+12 -12
View File
@@ -956,33 +956,33 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
<div className="absolute top-4 right-4 z-20 flex flex-col items-end gap-2.5 pointer-events-auto"> <div className="absolute top-4 right-4 z-20 flex flex-col items-end gap-2.5 pointer-events-auto">
<ViewCube onSelectView={handleViewCubeSelect} mainCameraRef={activeCameraRef} /> <ViewCube onSelectView={handleViewCubeSelect} mainCameraRef={activeCameraRef} />
{/* Card de Controle de Seleção Flutuante Abaixo do Cubo */} {/* Card de Controle de Seleção Flutuante Harmonizado Abaixo do Cubo */}
<div <div
className={`flex flex-col items-stretch gap-1.5 p-2 rounded-2xl backdrop-blur-xl border transition-all duration-300 shadow-xl ${ className={`flex flex-col items-stretch gap-1.5 p-2 rounded-2xl backdrop-blur-md border transition-all duration-200 shadow-lg ${
selectedCount > 0 selectedCount > 0
? 'bg-slate-900/95 border-fuchsia-500/50 shadow-fuchsia-950/50 ring-1 ring-fuchsia-500/30' ? 'bg-white/95 dark:bg-slate-900/95 border-slate-300 dark:border-slate-700 shadow-slate-300/40 dark:shadow-slate-950/60 ring-1 ring-blue-500/20'
: 'bg-white/80 dark:bg-slate-900/70 border-slate-200/80 dark:border-slate-800/80 opacity-75 hover:opacity-100' : 'bg-white/80 dark:bg-slate-900/70 border-slate-200 dark:border-slate-800/80 opacity-75 hover:opacity-100'
}`} }`}
style={{ minWidth: '130px' }} style={{ minWidth: '130px' }}
> >
{/* Badge Indicador de Seleção Ativa */} {/* Badge Indicador de Seleção Ativa Sóbrio */}
{selectedCount > 0 && ( {selectedCount > 0 && (
<div className="flex items-center justify-center gap-1.5 px-2 py-0.5 mb-0.5 rounded-full bg-fuchsia-500/20 border border-fuchsia-500/30 text-fuchsia-300 text-[10px] font-mono font-bold animate-in fade-in zoom-in-95 duration-200"> <div className="flex items-center justify-center gap-1.5 px-2 py-0.5 mb-0.5 rounded-full bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-800 dark:text-slate-200 text-[10px] font-mono font-bold animate-in fade-in zoom-in-95 duration-200">
<span className="w-1.5 h-1.5 rounded-full bg-fuchsia-500 animate-pulse shadow-sm shadow-fuchsia-500" /> <span className="w-1.5 h-1.5 rounded-full bg-fuchsia-500 shadow-sm" />
<span> <span>
{selectedCount} {selectedCount === 1 ? 'peça' : 'peças'} {selectedCount} {selectedCount === 1 ? 'peça' : 'peças'}
</span> </span>
</div> </div>
)} )}
{/* Botão Gerar Lista da Seleção ("Acende" e Habilita quando há peças selecionadas) */} {/* Botão Gerar Lista da Seleção (Azul Escuro no claro / Azul Elegante no escuro) */}
<button <button
onClick={() => setIsSelectionModalOpen(true)} onClick={() => setIsSelectionModalOpen(true)}
disabled={selectedCount === 0} disabled={selectedCount === 0}
className={`flex items-center justify-center gap-1.5 px-2.5 py-1.5 rounded-xl text-[11px] font-bold transition-all duration-200 cursor-pointer ${ className={`flex items-center justify-center gap-1.5 px-2.5 py-1.5 rounded-xl text-[11px] font-bold transition-all duration-200 cursor-pointer ${
selectedCount > 0 selectedCount > 0
? 'bg-gradient-to-r from-fuchsia-600 to-pink-600 hover:from-fuchsia-500 hover:to-pink-500 text-white shadow-lg shadow-fuchsia-950/60 scale-[1.02] active:scale-[0.98]' ? 'bg-blue-950 hover:bg-blue-900 text-white shadow-sm dark:bg-blue-600 dark:hover:bg-blue-500 scale-[1.02] active:scale-[0.98]'
: 'bg-slate-100 dark:bg-slate-800/50 text-slate-400 dark:text-slate-500 border border-slate-200 dark:border-slate-700/50 cursor-not-allowed opacity-50' : 'bg-slate-100 dark:bg-slate-800/50 text-slate-400 dark:text-slate-500 border border-slate-200 dark:border-slate-800 cursor-not-allowed opacity-50'
}`} }`}
title={ title={
selectedCount > 0 selectedCount > 0
@@ -994,13 +994,13 @@ export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
<span className="whitespace-nowrap">Gerar lista</span> <span className="whitespace-nowrap">Gerar lista</span>
</button> </button>
{/* Botão Limpar Seleção */} {/* Botão Limpar Seleção Harmonizado */}
<button <button
onClick={handleClearSelection} onClick={handleClearSelection}
disabled={selectedCount === 0} disabled={selectedCount === 0}
className={`flex items-center justify-center gap-1.5 px-2.5 py-1 rounded-xl text-[10px] font-semibold transition-all duration-200 cursor-pointer ${ className={`flex items-center justify-center gap-1.5 px-2.5 py-1 rounded-xl text-[10px] font-semibold transition-all duration-200 cursor-pointer ${
selectedCount > 0 selectedCount > 0
? 'text-rose-400 hover:text-rose-300 hover:bg-rose-500/10 border border-rose-500/20 active:scale-[0.98]' ? 'text-slate-600 hover:text-rose-600 hover:bg-rose-50 border border-slate-200 dark:border-slate-700 dark:text-slate-400 dark:hover:text-rose-300 dark:hover:bg-rose-950/30 active:scale-[0.98]'
: 'text-slate-400 dark:text-slate-600 border border-transparent cursor-not-allowed opacity-40' : 'text-slate-400 dark:text-slate-600 border border-transparent cursor-not-allowed opacity-40'
}`} }`}
title="Desmarcar todas as peças" title="Desmarcar todas as peças"
src/components/viewer3d/SelectionListModal.tsx
+73 -64
View File
@@ -107,7 +107,6 @@ export const SelectionListModal: React.FC<SelectionListModalProps> = ({
const workbook = XLSX.utils.book_new(); const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Peças Selecionadas'); XLSX.utils.book_append_sheet(workbook, worksheet, 'Peças Selecionadas');
// Ajuste de largura das colunas
worksheet['!cols'] = [ worksheet['!cols'] = [
{ wch: 6 }, { wch: 6 },
{ wch: 24 }, { wch: 24 },
@@ -156,205 +155,215 @@ export const SelectionListModal: React.FC<SelectionListModalProps> = ({
}; };
return ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md animate-in fade-in duration-200"> <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/40 dark:bg-slate-950/70 backdrop-blur-sm animate-in fade-in duration-200">
<div className="relative w-full max-w-4xl max-h-[90vh] flex flex-col bg-slate-900 border border-slate-700/80 rounded-2xl shadow-2xl overflow-hidden text-slate-100"> <div className="relative w-full max-w-4xl max-h-[90vh] flex flex-col bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-2xl overflow-hidden text-slate-800 dark:text-slate-100">
{/* Header do Modal com Destaque Magenta */}
<div className="flex items-center justify-between px-6 py-4 border-b border-slate-800 bg-gradient-to-r from-slate-900 via-slate-900/90 to-fuchsia-950/30"> {/* Cabeçalho do Modal Harmonizado */}
<div className="flex items-center justify-between px-6 py-4 border-b border-slate-200 dark:border-slate-800 bg-slate-50/90 dark:bg-slate-950/70">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2.5 rounded-xl bg-fuchsia-500/20 text-fuchsia-400 border border-fuchsia-500/40 shadow-lg shadow-fuchsia-950/50"> <div className="p-2.5 rounded-xl bg-blue-50 text-blue-900 border border-blue-200 dark:bg-blue-950/50 dark:text-blue-300 dark:border-blue-900/60 shadow-sm">
<FileSpreadsheet className="w-5 h-5 text-fuchsia-400" /> <FileSpreadsheet className="w-5 h-5" />
</div> </div>
<div> <div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<h3 className="text-lg font-bold text-white tracking-tight"> <h3 className="text-lg font-bold text-slate-900 dark:text-white tracking-tight">
Lista de Peças Selecionadas no 3D Lista de Peças Selecionadas no 3D
</h3> </h3>
<span className="px-2.5 py-0.5 rounded-full text-xs font-mono font-bold bg-fuchsia-500/20 text-fuchsia-300 border border-fuchsia-500/40"> <span className="px-2.5 py-0.5 rounded-full text-xs font-mono font-bold bg-slate-200/90 text-slate-800 border border-slate-300 dark:bg-slate-800 dark:text-slate-200 dark:border-slate-700">
{totalPhysicalPieces} {totalPhysicalPieces === 1 ? 'peça' : 'peças'} {totalPhysicalPieces} {totalPhysicalPieces === 1 ? 'peça' : 'peças'}
</span> </span>
</div> </div>
<p className="text-xs text-slate-400 mt-0.5"> <p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
Relação consolidada das peças marcadas em magenta permanente no modelo 3D Relação consolidada das peças marcadas na cena 3D
</p> </p>
</div> </div>
</div> </div>
<button <button
onClick={onClose} onClick={onClose}
className="p-2 text-slate-400 hover:text-white rounded-lg hover:bg-slate-800/80 transition-all cursor-pointer" className="p-2 text-slate-400 hover:text-slate-700 dark:hover:text-white rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-all cursor-pointer"
title="Fechar"
> >
<X className="w-5 h-5" /> <X className="w-5 h-5" />
</button> </button>
</div> </div>
{/* KPIs Resumo no Topo */} {/* KPIs Resumo no Topo (Tons Sóbrios de Azul Escuro, Verde Escuro e Cinza) */}
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3 p-6 pb-4 bg-slate-950/40 border-b border-slate-800/60"> <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 p-6 pb-4 bg-slate-50/60 dark:bg-slate-950/40 border-b border-slate-200/90 dark:border-slate-800/80">
<div className="p-3 rounded-xl bg-slate-900/80 border border-slate-800 flex items-center gap-3"> {/* Card 1: Total de Peças (Azul Escuro no claro / Azul Claro no escuro) */}
<div className="p-2 rounded-lg bg-fuchsia-500/10 text-fuchsia-400 border border-fuchsia-500/20"> <div className="p-3 rounded-xl bg-white dark:bg-slate-950/50 border border-slate-200 dark:border-slate-800 shadow-sm flex items-center gap-3">
<div className="p-2 rounded-lg bg-blue-50 text-blue-900 border border-blue-200/80 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-900/60">
<Box className="w-4 h-4" /> <Box className="w-4 h-4" />
</div> </div>
<div> <div>
<span className="text-[10px] uppercase font-mono tracking-wider text-slate-400 block"> <span className="text-[10px] uppercase font-mono tracking-wider text-slate-500 dark:text-slate-400 block">
Total de Peças Total de Peças
</span> </span>
<span className="text-lg font-extrabold text-fuchsia-300 font-mono"> <span className="text-lg font-extrabold text-blue-950 dark:text-blue-300 font-mono">
{totalPhysicalPieces} {totalPhysicalPieces}
</span> </span>
</div> </div>
</div> </div>
<div className="p-3 rounded-xl bg-slate-900/80 border border-slate-800 flex items-center gap-3"> {/* Card 2: Marcas Distintas (Cinza Escuro no claro / Cinza Claro no escuro) */}
<div className="p-2 rounded-lg bg-cyan-500/10 text-cyan-400 border border-cyan-500/20"> <div className="p-3 rounded-xl bg-white dark:bg-slate-950/50 border border-slate-200 dark:border-slate-800 shadow-sm flex items-center gap-3">
<div className="p-2 rounded-lg bg-slate-100 text-slate-700 border border-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-700">
<Layers className="w-4 h-4" /> <Layers className="w-4 h-4" />
</div> </div>
<div> <div>
<span className="text-[10px] uppercase font-mono tracking-wider text-slate-400 block"> <span className="text-[10px] uppercase font-mono tracking-wider text-slate-500 dark:text-slate-400 block">
Marcas Distintas Marcas Distintas
</span> </span>
<span className="text-lg font-extrabold text-cyan-300 font-mono"> <span className="text-lg font-extrabold text-slate-800 dark:text-slate-200 font-mono">
{totalDistinctMarks} {totalDistinctMarks}
</span> </span>
</div> </div>
</div> </div>
<div className="p-3 rounded-xl bg-slate-900/80 border border-slate-800 flex items-center gap-3"> {/* Card 3: Ordem de Fabricação (Verde Escuro no claro / Verde Claro no escuro) */}
<div className="p-2 rounded-lg bg-emerald-500/10 text-emerald-400 border border-emerald-500/20"> <div className="p-3 rounded-xl bg-white dark:bg-slate-950/50 border border-slate-200 dark:border-slate-800 shadow-sm flex items-center gap-3">
<div className="p-2 rounded-lg bg-emerald-50 text-emerald-800 border border-emerald-200/80 dark:bg-emerald-950/50 dark:text-emerald-400 dark:border-emerald-900/60">
<CheckCircle2 className="w-4 h-4" /> <CheckCircle2 className="w-4 h-4" />
</div> </div>
<div> <div>
<span className="text-[10px] uppercase font-mono tracking-wider text-slate-400 block"> <span className="text-[10px] uppercase font-mono tracking-wider text-slate-500 dark:text-slate-400 block">
Ordem de Fabricação Ordem de Fabricação
</span> </span>
<span className="text-sm font-bold text-emerald-300 truncate max-w-[120px] block"> <span className="text-sm font-bold text-emerald-900 dark:text-emerald-300 truncate max-w-[120px] block">
{selectedOF || 'N/A'} {selectedOF || 'N/A'}
</span> </span>
</div> </div>
</div> </div>
<div className="p-3 rounded-xl bg-slate-900/80 border border-slate-800 flex items-center gap-3"> {/* Card 4: Status / Seleção (Cinza Neutro / Azul) */}
<div className="p-2 rounded-lg bg-amber-500/10 text-amber-400 border border-amber-500/20"> <div className="p-3 rounded-xl bg-white dark:bg-slate-950/50 border border-slate-200 dark:border-slate-800 shadow-sm flex items-center gap-3">
<div className="p-2 rounded-lg bg-slate-100 text-slate-600 border border-slate-200 dark:bg-slate-800 dark:text-slate-400 dark:border-slate-700">
<Clock className="w-4 h-4" /> <Clock className="w-4 h-4" />
</div> </div>
<div> <div>
<span className="text-[10px] uppercase font-mono tracking-wider text-slate-400 block"> <span className="text-[10px] uppercase font-mono tracking-wider text-slate-500 dark:text-slate-400 block">
Status Status
</span> </span>
<span className="text-sm font-bold text-amber-300 block"> <span className="text-sm font-bold text-slate-700 dark:text-slate-300 block">
{totalPhysicalPieces > 0 ? 'Filtro Ativo' : 'Vazio'} {totalPhysicalPieces > 0 ? 'Filtro Ativo' : 'Vazio'}
</span> </span>
</div> </div>
</div> </div>
</div> </div>
{/* Tabela de Itens Selecionados com Rolagem Suave */} {/* Tabela de Itens Selecionados Sóbria e Harmonizada */}
<div className="flex-1 overflow-y-auto p-6"> <div className="flex-1 overflow-y-auto p-6">
{consolidatedList.length === 0 ? ( {consolidatedList.length === 0 ? (
<div className="flex flex-col items-center justify-center py-16 text-center text-slate-500"> <div className="flex flex-col items-center justify-center py-16 text-center text-slate-500">
<Box className="w-12 h-12 stroke-[1.5] mb-3 text-slate-600" /> <Box className="w-12 h-12 stroke-[1.5] mb-3 text-slate-400 dark:text-slate-600" />
<p className="text-sm font-semibold text-slate-400">Nenhuma peça selecionada</p> <p className="text-sm font-semibold text-slate-600 dark:text-slate-400">Nenhuma peça selecionada</p>
<p className="text-xs text-slate-500 max-w-xs mt-1"> <p className="text-xs text-slate-500 max-w-xs mt-1">
Clique nas peças na cena 3D (ou clique duplo para pegar todas da mesma marca) para incluí-las nesta lista. Clique nas peças na cena 3D (ou clique duplo para selecionar todas da mesma marca) para incluí-las nesta lista.
</p> </p>
</div> </div>
) : ( ) : (
<div className="border border-slate-800 rounded-xl overflow-hidden shadow-inner bg-slate-950/40"> <div className="border border-slate-200 dark:border-slate-800 rounded-xl overflow-hidden shadow-sm bg-white dark:bg-slate-950/40">
<table className="w-full text-left text-xs"> <table className="w-full text-left text-xs">
<thead className="bg-slate-800/80 text-slate-300 uppercase font-mono text-[10px] tracking-wider border-b border-slate-700/80"> <thead className="bg-slate-100/90 dark:bg-slate-800/90 text-slate-700 dark:text-slate-300 uppercase font-mono text-[10px] tracking-wider border-b border-slate-200 dark:border-slate-700/80">
<tr> <tr>
<th className="py-3 px-4 font-semibold">Marca Principal</th> <th className="py-3 px-4 font-semibold">Marca Principal</th>
<th className="py-3 px-3 font-semibold text-center">Fase</th> <th className="py-3 px-3 font-semibold text-center">Fase</th>
<th className="py-3 px-4 font-semibold">Perfil / Bitola</th> <th className="py-3 px-4 font-semibold">Perfil / Bitola</th>
<th className="py-3 px-3 font-semibold text-center text-fuchsia-400"> <th className="py-3 px-3 font-semibold text-center text-blue-900 dark:text-blue-300">
Qtd. 3D Qtd. 3D
</th> </th>
<th className="py-3 px-3 font-semibold text-center">Qtd. OF</th> <th className="py-3 px-3 font-semibold text-center">Qtd. OF</th>
<th className="py-3 px-4 font-semibold text-center">Etapa / Apontamento</th> <th className="py-3 px-4 font-semibold text-center">Etapa / Apontamento</th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-slate-800/60 font-medium"> <tbody className="divide-y divide-slate-200/80 dark:divide-slate-800/60 font-medium">
{consolidatedList.map((item, idx) => ( {consolidatedList.map((item, idx) => {
const isPendente = !item.currentStage || item.currentStage.toLowerCase().includes('pendente');
return (
<tr <tr
key={`${item.phase}_${item.pieceMark}_${idx}`} key={`${item.phase}_${item.pieceMark}_${idx}`}
className="hover:bg-slate-800/40 transition-colors" className="hover:bg-slate-50 dark:hover:bg-slate-800/40 transition-colors"
> >
<td className="py-3 px-4 font-mono font-bold text-white flex items-center gap-2"> <td className="py-3 px-4 font-mono font-bold text-slate-900 dark:text-white flex items-center gap-2">
<span className="w-2 h-2 rounded-full bg-fuchsia-500 inline-block shadow-sm shadow-fuchsia-500" /> <span className="w-2 h-2 rounded-full bg-fuchsia-500 inline-block shadow-sm" title="Marcada no 3D" />
{item.pieceMark} {item.pieceMark}
</td> </td>
<td className="py-3 px-3 text-center"> <td className="py-3 px-3 text-center">
<span className="px-2 py-0.5 rounded-full text-[10px] font-mono font-bold bg-slate-800 text-slate-300 border border-slate-700"> <span className="px-2 py-0.5 rounded-full text-[10px] font-mono font-bold bg-slate-100 text-slate-700 border border-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-700">
{item.phase} {item.phase}
</span> </span>
</td> </td>
<td className="py-3 px-4 font-mono text-slate-300"> <td className="py-3 px-4 font-mono text-slate-700 dark:text-slate-300">
{item.section} {item.section}
</td> </td>
<td className="py-3 px-3 text-center font-mono font-extrabold text-sm text-fuchsia-300"> <td className="py-3 px-3 text-center font-mono font-extrabold text-sm text-blue-950 dark:text-blue-300">
{item.selectedCount} {item.selectedCount}
</td> </td>
<td className="py-3 px-3 text-center font-mono text-slate-400"> <td className="py-3 px-3 text-center font-mono text-slate-600 dark:text-slate-400">
{item.pointedQty} / {item.totalQty} {item.pointedQty} / {item.totalQty}
</td> </td>
<td className="py-3 px-4 text-center"> <td className="py-3 px-4 text-center">
<span <span
className="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider inline-flex items-center gap-1.5" className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider inline-flex items-center gap-1.5 border ${
style={{ isPendente
backgroundColor: `${item.stageColor}20`, ? 'bg-slate-100 text-slate-700 border-slate-200 dark:bg-slate-800 dark:text-slate-400 dark:border-slate-700'
color: item.stageColor, : 'bg-emerald-50 text-emerald-900 border-emerald-200/80 dark:bg-emerald-950/50 dark:text-emerald-300 dark:border-emerald-800/60'
border: `1px solid ${item.stageColor}40`, }`}
}}
> >
<span <span
className="w-1.5 h-1.5 rounded-full" className={`w-1.5 h-1.5 rounded-full ${
style={{ backgroundColor: item.stageColor }} isPendente ? 'bg-slate-400 dark:bg-slate-500' : 'bg-emerald-600 dark:bg-emerald-400'
}`}
/> />
{item.currentStage} {item.currentStage}
</span> </span>
</td> </td>
</tr> </tr>
))} );
})}
</tbody> </tbody>
</table> </table>
</div> </div>
)} )}
</div> </div>
{/* Rodapé com Botões de Ação */} {/* Rodapé com Botões de Ação Harmonizados */}
<div className="flex flex-wrap items-center justify-between gap-3 px-6 py-4 border-t border-slate-800 bg-slate-900/90"> <div className="flex flex-wrap items-center justify-between gap-3 px-6 py-4 border-t border-slate-200 dark:border-slate-800 bg-slate-50/90 dark:bg-slate-950/70">
<button <button
onClick={() => { onClick={() => {
onClearSelection(); onClearSelection();
toast.info('Seleção 3D limpa com sucesso.'); toast.info('Seleção 3D limpa com sucesso.');
}} }}
disabled={totalPhysicalPieces === 0} disabled={totalPhysicalPieces === 0}
className="flex items-center gap-1.5 px-3 py-2 rounded-xl text-xs font-semibold text-rose-400 hover:text-rose-300 hover:bg-rose-500/10 border border-rose-500/20 disabled:opacity-40 disabled:cursor-not-allowed transition-all cursor-pointer" className="flex items-center gap-1.5 px-3 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:text-rose-600 hover:bg-rose-50 border border-slate-300 dark:border-slate-700 dark:text-slate-400 dark:hover:text-rose-300 dark:hover:bg-rose-950/30 disabled:opacity-40 disabled:cursor-not-allowed transition-all cursor-pointer"
> >
<Trash2 className="w-4 h-4" /> <Trash2 className="w-4 h-4" />
<span>Limpar Seleção</span> <span>Limpar Seleção</span>
</button> </button>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2.5">
<button <button
onClick={handleCopy} onClick={handleCopy}
disabled={totalPhysicalPieces === 0} disabled={totalPhysicalPieces === 0}
className="flex items-center gap-1.5 px-4 py-2 rounded-xl text-xs font-semibold bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 disabled:opacity-40 disabled:cursor-not-allowed transition-all cursor-pointer" className="flex items-center gap-1.5 px-4 py-2 rounded-xl text-xs font-semibold bg-white hover:bg-slate-100 text-slate-700 border border-slate-300 shadow-sm dark:bg-slate-800 dark:hover:bg-slate-700 dark:text-slate-200 dark:border-slate-700 disabled:opacity-40 disabled:cursor-not-allowed transition-all cursor-pointer"
> >
{copied ? ( {copied ? (
<> <>
<Check className="w-4 h-4 text-emerald-400" /> <Check className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
<span className="text-emerald-400">Copiado!</span> <span className="text-emerald-700 dark:text-emerald-400">Copiado!</span>
</> </>
) : ( ) : (
<> <>
<Copy className="w-4 h-4 text-slate-300" /> <Copy className="w-4 h-4 text-slate-600 dark:text-slate-300" />
<span>Copiar Lista</span> <span>Copiar Lista</span>
</> </>
)} )}
</button> </button>
{/* Exportar Excel em tom Azul Escuro / Verde Escuro Industrial */}
<button <button
onClick={handleExportExcel} onClick={handleExportExcel}
disabled={totalPhysicalPieces === 0} disabled={totalPhysicalPieces === 0}
className="flex items-center gap-2 px-5 py-2 rounded-xl text-xs font-bold bg-gradient-to-r from-fuchsia-600 to-pink-600 hover:from-fuchsia-500 hover:to-pink-500 text-white shadow-lg shadow-fuchsia-950/60 disabled:opacity-40 disabled:cursor-not-allowed transition-all cursor-pointer" className="flex items-center gap-2 px-5 py-2 rounded-xl text-xs font-bold bg-blue-950 hover:bg-blue-900 text-white shadow-md shadow-blue-950/20 dark:bg-blue-600 dark:hover:bg-blue-500 dark:shadow-blue-950/40 disabled:opacity-40 disabled:cursor-not-allowed transition-all cursor-pointer"
> >
<Download className="w-4 h-4" /> <Download className="w-4 h-4" />
<span>Exportar Excel (.xlsx)</span> <span>Exportar Excel (.xlsx)</span>