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

fix(diff-modal): adicionar scroll vertical e thead sticky para todas as pecas

Browse Source
This commit is contained in:
admbrainsteel
2026-10-16 16:40:38 -03:00
parent 1203650c2d
commit 400be62a0e
1 changed files with 13 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pecas/ImportarPecasDiffModal.tsx
+13 -14
View File
@@ -9,7 +9,6 @@ import {
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Checkbox } from '@/components/ui/checkbox'; import { Checkbox } from '@/components/ui/checkbox';
import { import {
AlertTriangle, AlertTriangle,
@@ -224,7 +223,7 @@ export const ImportarPecasDiffModal: React.FC<ImportarPecasDiffModalProps> = ({
return ( return (
<> <>
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-6xl max-h-[92vh] flex flex-col p-0 overflow-hidden bg-background border-border"> <DialogContent className="max-w-6xl h-[90vh] max-h-[92vh] flex flex-col p-0 overflow-hidden bg-background border-border">
{/* Cabeçalho */} {/* Cabeçalho */}
<DialogHeader className="p-4 border-b border-border bg-card flex-shrink-0"> <DialogHeader className="p-4 border-b border-border bg-card flex-shrink-0">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
@@ -367,7 +366,7 @@ export const ImportarPecasDiffModal: React.FC<ImportarPecasDiffModalProps> = ({
</DialogHeader> </DialogHeader>
{/* Barra de Filtros e Ferramentas */} {/* Barra de Filtros e Ferramentas */}
<div className="p-3 border-b border-border bg-muted/20 flex flex-wrap items-center justify-between gap-2 text-xs"> <div className="p-3 border-b border-border bg-muted/20 flex flex-wrap items-center justify-between gap-2 text-xs flex-shrink-0">
{/* Input de Busca */} {/* Input de Busca */}
<div className="relative w-72"> <div className="relative w-72">
<Search className="absolute left-2.5 top-2.5 h-3.5 w-3.5 text-muted-foreground" /> <Search className="absolute left-2.5 top-2.5 h-3.5 w-3.5 text-muted-foreground" />
@@ -411,18 +410,18 @@ export const ImportarPecasDiffModal: React.FC<ImportarPecasDiffModalProps> = ({
</div> </div>
</div> </div>
{/* Tabela de Conciliação e Diff */} {/* Tabela de Conciliação e Diff com Scroll Vertical e Cabeçalho Sticky */}
<ScrollArea className="flex-1"> <div className="flex-1 min-h-0 overflow-y-auto overflow-x-auto w-full">
<div className="p-4"> <div className="p-4">
<table className="w-full text-left text-xs border-collapse"> <table className="w-full text-left text-xs border-collapse">
<thead> <thead className="sticky top-0 z-10 bg-muted/95 backdrop-blur-sm shadow-sm">
<tr className="border-b border-border text-muted-foreground font-semibold bg-muted/40"> <tr className="border-b border-border text-muted-foreground font-semibold">
<th className="p-2 w-10 text-center">Sobrepor</th> <th className="p-2 w-10 text-center bg-muted/95">Sobrepor</th>
<th className="p-2 w-28">Peça / Fase</th> <th className="p-2 w-28 bg-muted/95">Peça / Fase</th>
<th className="p-2 w-44">Perfil / Bitola</th> <th className="p-2 w-44 bg-muted/95">Perfil / Bitola</th>
<th className="p-2 w-40">Status de Produção</th> <th className="p-2 w-40 bg-muted/95">Status de Produção</th>
<th className="p-2">Divergências Detectadas (Diff)</th> <th className="p-2 bg-muted/95">Divergências Detectadas (Diff)</th>
<th className="p-2 w-28 text-center">Lembrete Fabril</th> <th className="p-2 w-28 text-center bg-muted/95">Lembrete Fabril</th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-border"> <tbody className="divide-y divide-border">
@@ -623,7 +622,7 @@ export const ImportarPecasDiffModal: React.FC<ImportarPecasDiffModalProps> = ({
</tbody> </tbody>
</table> </table>
</div> </div>
</ScrollArea> </div>
{/* Rodapé da Janela com Decisão e Ações */} {/* Rodapé da Janela com Decisão e Ações */}
<DialogFooter className="p-3 border-t border-border bg-card flex flex-row items-center justify-between flex-shrink-0"> <DialogFooter className="p-3 border-t border-border bg-card flex flex-row items-center justify-between flex-shrink-0">