feat: adicionar importacao automatica de pecas via planilha Excel XLS e XLSX
This commit is contained in:
@@ -0,0 +1,631 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||
import { FileSpreadsheet, Upload, Download, CheckCircle2, AlertCircle, Trash2, ArrowLeft, RefreshCw } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import * as XLSX from 'xlsx';
|
||||
|
||||
export interface PecaXLSData {
|
||||
of_number: string;
|
||||
etapa_fase: string;
|
||||
marca: string;
|
||||
descricao: string;
|
||||
quantidade: number;
|
||||
peso_unitario: number;
|
||||
peso_total: number;
|
||||
tratamento_superficial: string;
|
||||
material: string;
|
||||
perfil_principal: string;
|
||||
tem_componentes: boolean;
|
||||
comprimento_ref?: number | string;
|
||||
}
|
||||
|
||||
interface ImportarXLSModalProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onImport: (pecas: any[]) => Promise<void>;
|
||||
ofDefault?: string;
|
||||
}
|
||||
|
||||
export function ImportarXLSModal({
|
||||
open,
|
||||
onOpenChange,
|
||||
onImport,
|
||||
ofDefault = '',
|
||||
}: ImportarXLSModalProps) {
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [pecasProcessadas, setPecasProcessadas] = useState<PecaXLSData[]>([]);
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
const [isImporting, setIsImporting] = useState(false);
|
||||
const [step, setStep] = useState<'upload' | 'preview'>('upload');
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const resetState = () => {
|
||||
setFile(null);
|
||||
setPecasProcessadas([]);
|
||||
setIsProcessing(false);
|
||||
setIsImporting(false);
|
||||
setStep('upload');
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
const handleModalOpenChange = (newOpen: boolean) => {
|
||||
if (!newOpen) {
|
||||
resetState();
|
||||
}
|
||||
onOpenChange(newOpen);
|
||||
};
|
||||
|
||||
// Função auxiliar para converter valores para número seguro
|
||||
const parseNumber = (val: any): number => {
|
||||
if (val === null || val === undefined || val === '') return 0;
|
||||
if (typeof val === 'number') return isNaN(val) ? 0 : val;
|
||||
|
||||
// String: trata "1.413,00" ou "1,413.00" ou "1413"
|
||||
let str = String(val).trim();
|
||||
// Se tiver vírgula e ponto, identifica separador decimal
|
||||
if (str.includes('.') && str.includes(',')) {
|
||||
if (str.indexOf('.') < str.indexOf(',')) {
|
||||
// Ex: 1.413,00 (padrão BR)
|
||||
str = str.replace(/\./g, '').replace(',', '.');
|
||||
} else {
|
||||
// Ex: 1,413.00 (padrão US)
|
||||
str = str.replace(/,/g, '');
|
||||
}
|
||||
} else if (str.includes(',')) {
|
||||
// Ex: 1413,50
|
||||
str = str.replace(',', '.');
|
||||
}
|
||||
|
||||
const num = parseFloat(str);
|
||||
return isNaN(num) ? 0 : num;
|
||||
};
|
||||
|
||||
// Parser robusto do arquivo Excel/XLSX/XLS/CSV
|
||||
const processExcelFile = async (selectedFile: File) => {
|
||||
setIsProcessing(true);
|
||||
try {
|
||||
const data = await selectedFile.arrayBuffer();
|
||||
const workbook = XLSX.read(data, { type: 'array' });
|
||||
|
||||
if (!workbook.SheetNames || workbook.SheetNames.length === 0) {
|
||||
toast.error('O arquivo Excel não contém nenhuma planilha.');
|
||||
setIsProcessing(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const firstSheetName = workbook.SheetNames[0];
|
||||
const worksheet = workbook.Sheets[firstSheetName];
|
||||
|
||||
// Converte para matriz de linhas (array de arrays) para busca flexível do cabeçalho
|
||||
const rawRows: any[][] = XLSX.utils.sheet_to_json(worksheet, { header: 1, defval: '' });
|
||||
|
||||
if (!rawRows || rawRows.length === 0) {
|
||||
toast.error('A planilha selecionada está vazia.');
|
||||
setIsProcessing(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// 1. Procurar a linha de cabeçalho
|
||||
let headerRowIndex = -1;
|
||||
let colMap: { [key: string]: number } = {};
|
||||
|
||||
const normalizeStr = (s: any) =>
|
||||
String(s || '')
|
||||
.toLowerCase()
|
||||
.normalize('NFD')
|
||||
.replace(/[\u0300-\u036f]/g, '')
|
||||
.replace(/[^a-z0-9]/g, '');
|
||||
|
||||
for (let r = 0; r < Math.min(rawRows.length, 15); r++) {
|
||||
const row = rawRows[r];
|
||||
if (!Array.isArray(row)) continue;
|
||||
|
||||
const rowStr = row.map(normalizeStr).join(' ');
|
||||
if (
|
||||
rowStr.includes('marca') ||
|
||||
rowStr.includes('descricao') ||
|
||||
rowStr.includes('perfil') ||
|
||||
rowStr.includes('peso') ||
|
||||
rowStr.includes('quant')
|
||||
) {
|
||||
headerRowIndex = r;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const pecasLidas: PecaXLSData[] = [];
|
||||
|
||||
if (headerRowIndex !== -1) {
|
||||
// Mapeia colunas por nome
|
||||
const headers = rawRows[headerRowIndex].map((h: any) => normalizeStr(h));
|
||||
headers.forEach((h: string, colIdx: number) => {
|
||||
if (h.includes('of') || h.includes('trabalho') || h.includes('numof') || h.includes('numeroof')) colMap['of'] = colIdx;
|
||||
else if (h.includes('fase') || h.includes('etapa')) colMap['fase'] = colIdx;
|
||||
else if (h.includes('marca') || h.includes('posicao') || h.includes('item') || h.includes('pos')) colMap['marca'] = colIdx;
|
||||
else if (h.includes('desc') || h.includes('nome')) colMap['descricao'] = colIdx;
|
||||
else if (h.includes('comp') && (h.includes('componente') || h.includes('composto') || h.includes('con'))) colMap['componentes'] = colIdx;
|
||||
else if (h.includes('quant') || h.includes('qtd')) colMap['quantidade'] = colIdx;
|
||||
else if (h.includes('pesounit') || h.includes('pesodapeca') || (h.includes('unit') && h.includes('peso'))) colMap['peso_unitario'] = colIdx;
|
||||
else if (h.includes('pesototal') || h.includes('totalpeso') || (h.includes('total') && h.includes('peso'))) colMap['peso_total'] = colIdx;
|
||||
else if (h.includes('tratam') || h.includes('superf') || h.includes('pintura') || h.includes('acab')) colMap['tratamento'] = colIdx;
|
||||
else if (h.includes('mat') || h.includes('qualidade') || h.includes('aco')) colMap['material'] = colIdx;
|
||||
else if (h.includes('perfil') || h.includes('perfilprinc')) colMap['perfil_principal'] = colIdx;
|
||||
else if (h.includes('compriment') || h.includes('comprmm') || h.includes('length')) colMap['comprimento'] = colIdx;
|
||||
});
|
||||
|
||||
// Itera sobre as linhas de dados após o cabeçalho
|
||||
for (let r = headerRowIndex + 1; r < rawRows.length; r++) {
|
||||
const row = rawRows[r];
|
||||
if (!row || row.length === 0) continue;
|
||||
|
||||
// Se a linha estiver totalmente vazia
|
||||
if (row.every((cell: any) => cell === '' || cell === null || cell === undefined)) continue;
|
||||
|
||||
const getColVal = (key: string, fallbackIdx?: number) => {
|
||||
if (colMap[key] !== undefined && row[colMap[key]] !== undefined) {
|
||||
return row[colMap[key]];
|
||||
}
|
||||
if (fallbackIdx !== undefined && row[fallbackIdx] !== undefined) {
|
||||
return row[fallbackIdx];
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
const rawMarca = String(getColVal('marca', 2)).trim();
|
||||
const rawDesc = String(getColVal('descricao', 3)).trim();
|
||||
const rawPerfil = String(getColVal('perfil_principal', 9) || rawDesc).trim();
|
||||
|
||||
// Ignora linhas de totalizadores ou sem marca
|
||||
if (!rawMarca || rawMarca.toLowerCase().includes('total')) continue;
|
||||
|
||||
let ofNumber = String(getColVal('of', 0)).trim();
|
||||
if (!ofNumber) {
|
||||
ofNumber = ofDefault || 'B132';
|
||||
}
|
||||
// Normaliza formato da OF se necessário (ex: "B-129" -> "B129")
|
||||
ofNumber = ofNumber.replace(/^B-(\d+)/i, 'B$1');
|
||||
|
||||
let etapaFase = String(getColVal('fase', 1)).trim();
|
||||
if (!etapaFase) etapaFase = 'Fabricação';
|
||||
|
||||
const quantidade = Math.max(1, Math.round(parseNumber(getColVal('quantidade', 4)) || 1));
|
||||
let pesoUnit = parseNumber(getColVal('peso_unitario', 5));
|
||||
let pesoTot = parseNumber(getColVal('peso_total', 6));
|
||||
|
||||
if (pesoTot > 0 && pesoUnit === 0) {
|
||||
pesoUnit = Math.round(pesoTot / quantidade);
|
||||
} else if (pesoUnit > 0 && pesoTot === 0) {
|
||||
pesoTot = Math.round(pesoUnit * quantidade);
|
||||
}
|
||||
|
||||
// Tratamento superficial: regra do usuário -> sempre preencher "pintura" por padrão
|
||||
let tratSuperficial = String(getColVal('tratamento', 7)).trim();
|
||||
if (!tratSuperficial) {
|
||||
tratSuperficial = 'pintura';
|
||||
}
|
||||
|
||||
let material = String(getColVal('material', 8)).trim();
|
||||
if (!material) {
|
||||
material = 'Aço A36';
|
||||
}
|
||||
|
||||
const rawComp = String(getColVal('componentes', 4)).toLowerCase();
|
||||
const temComponentes = rawComp === 'sim' || rawComp === 'true' || rawComp === '1';
|
||||
const comprimentoRef = getColVal('comprimento', 10);
|
||||
|
||||
pecasLidas.push({
|
||||
of_number: ofNumber,
|
||||
etapa_fase: etapaFase,
|
||||
marca: rawMarca,
|
||||
descricao: rawDesc || rawPerfil,
|
||||
quantidade,
|
||||
peso_unitario: pesoUnit,
|
||||
peso_total: pesoTot,
|
||||
tratamento_superficial: tratSuperficial,
|
||||
material,
|
||||
perfil_principal: rawPerfil || rawDesc,
|
||||
tem_componentes: temComponentes,
|
||||
comprimento_ref: comprimentoRef || undefined,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// Fallback por ordem posicional estrita:
|
||||
// Coluna 0: OF, 1: Fase, 2: Marca, 3: Descrição, 4: Quantidade, 5: Peso Unit, 6: Peso Total, 7: Tratamento, 8: Material, 9: Perfil Principal
|
||||
for (let r = 0; r < rawRows.length; r++) {
|
||||
const row = rawRows[r];
|
||||
if (!row || row.length < 3) continue;
|
||||
|
||||
const rawMarca = String(row[2] || row[0]).trim();
|
||||
if (!rawMarca || rawMarca.toLowerCase().includes('marca') || rawMarca.toLowerCase().includes('total')) continue;
|
||||
|
||||
let ofNumber = String(row[0] || ofDefault || 'B132').trim().replace(/^B-(\d+)/i, 'B$1');
|
||||
let etapaFase = String(row[1] || 'Fabricação').trim();
|
||||
let rawDesc = String(row[3] || '').trim();
|
||||
let quantidade = Math.max(1, Math.round(parseNumber(row[4]) || 1));
|
||||
let pesoUnit = parseNumber(row[5]);
|
||||
let pesoTot = parseNumber(row[6]) || (pesoUnit * quantidade);
|
||||
let tratSuperficial = String(row[7] || 'pintura').trim() || 'pintura';
|
||||
let material = String(row[8] || 'Aço A36').trim();
|
||||
let perfilPrincipal = String(row[9] || rawDesc).trim();
|
||||
|
||||
pecasLidas.push({
|
||||
of_number: ofNumber,
|
||||
etapa_fase: etapaFase,
|
||||
marca: rawMarca,
|
||||
descricao: rawDesc || perfilPrincipal,
|
||||
quantidade,
|
||||
peso_unitario: pesoUnit,
|
||||
peso_total: pesoTot,
|
||||
tratamento_superficial: tratSuperficial,
|
||||
material,
|
||||
perfil_principal: perfilPrincipal,
|
||||
tem_componentes: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (pecasLidas.length === 0) {
|
||||
toast.error('Nenhuma linha de peça válida foi identificada no arquivo.');
|
||||
setIsProcessing(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setPecasProcessadas(pecasLidas);
|
||||
setStep('preview');
|
||||
toast.success(`${pecasLidas.length} peça(s) identificada(s) com sucesso no arquivo!`);
|
||||
} catch (err: any) {
|
||||
console.error('Erro ao processar planilha:', err);
|
||||
toast.error(`Falha ao ler o arquivo Excel: ${err.message || 'Formato não suportado'}`);
|
||||
} finally {
|
||||
setIsProcessing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const selected = e.target.files?.[0];
|
||||
if (selected) {
|
||||
setFile(selected);
|
||||
processExcelFile(selected);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
|
||||
e.preventDefault();
|
||||
const droppedFile = e.dataTransfer.files?.[0];
|
||||
if (droppedFile) {
|
||||
setFile(droppedFile);
|
||||
processExcelFile(droppedFile);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
const handleRemovePeca = (index: number) => {
|
||||
setPecasProcessadas(prev => prev.filter((_, idx) => idx !== index));
|
||||
};
|
||||
|
||||
const handleImportSubmit = async () => {
|
||||
if (pecasProcessadas.length === 0) {
|
||||
toast.error('Nenhuma peça para importar.');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsImporting(true);
|
||||
try {
|
||||
const pecasPayload = pecasProcessadas.map(p => ({
|
||||
of_number: p.of_number,
|
||||
etapa_fase: p.etapa_fase,
|
||||
marca: p.marca,
|
||||
descricao: p.descricao,
|
||||
quantidade: p.quantidade,
|
||||
peso_unitario: p.peso_unitario,
|
||||
peso_total: p.peso_total,
|
||||
tratamento_superficial: p.tratamento_superficial || 'pintura',
|
||||
material: p.material,
|
||||
perfil_principal: p.perfil_principal,
|
||||
tem_componentes: p.tem_componentes,
|
||||
}));
|
||||
|
||||
await onImport(pecasPayload);
|
||||
toast.success(`${pecasProcessadas.length} peças importadas com sucesso para a OF!`);
|
||||
handleModalOpenChange(false);
|
||||
} catch (err: any) {
|
||||
console.error('Erro ao importar peças do Excel:', err);
|
||||
toast.error(`Erro ao salvar peças: ${err.message || 'Falha de comunicação'}`);
|
||||
} finally {
|
||||
setIsImporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Gerar e baixar modelo Excel (.xlsx) oficial
|
||||
const handleDownloadModeloXLS = () => {
|
||||
const headers = [
|
||||
'OF',
|
||||
'Fase',
|
||||
'Marca',
|
||||
'Descrição',
|
||||
'Composto por Componentes',
|
||||
'Quantidade',
|
||||
'Peso Unitário (kg)',
|
||||
'Peso Total (kg)',
|
||||
'Tratamento Superficial',
|
||||
'Material',
|
||||
'Perfil Principal',
|
||||
'Comprimento Ref. (mm)'
|
||||
];
|
||||
|
||||
const exampleRows = [
|
||||
[ofDefault || 'B129', '2', '1', 'W 310x38.7', 'SIM', 1, 1413, 1413, 'pintura', 'A572-GR 50', 'W 310x38.7', 3241],
|
||||
[ofDefault || 'B129', '2', '2', 'W 310x38.7', 'SIM', 1, 2549, 2549, 'pintura', 'A572-GR 50', 'W 310x38.7', 6000],
|
||||
[ofDefault || 'B129', '2', '3', 'W 310x38.7', 'SIM', 1, 2379, 2379, 'pintura', 'A572-GR 50', 'W 310x38.7', 5780],
|
||||
[ofDefault || 'B129', '2', '4', 'W 310x38.7', 'SIM', 1, 2287, 2287, 'pintura', 'A572-GR 50', 'W 310x38.7', 5762],
|
||||
[ofDefault || 'B129', '2', '13', 'W 150x13.0', 'NÃO', 1, 2886, 2886, 'pintura', 'A36', 'W 150x13.0', ''],
|
||||
[ofDefault || 'B129', '2', '15', 'L3X3X1/4', 'NÃO', 1, 545, 545, 'pintura', 'A36', 'L3X3X1/4', ''],
|
||||
[ofDefault || 'B129', '2', '20', 'W 150x13.0', 'SIM', 1, 1249, 1249, 'pintura', 'A572-GR 50', 'W 150x13.0', 2841]
|
||||
];
|
||||
|
||||
const ws = XLSX.utils.aoa_to_sheet([headers, ...exampleRows]);
|
||||
|
||||
// Ajusta largura das colunas
|
||||
ws['!cols'] = [
|
||||
{ wch: 10 }, // OF
|
||||
{ wch: 8 }, // Fase
|
||||
{ wch: 10 }, // Marca
|
||||
{ wch: 18 }, // Descrição
|
||||
{ wch: 25 }, // Composto por
|
||||
{ wch: 12 }, // Qtd
|
||||
{ wch: 18 }, // Peso Unit
|
||||
{ wch: 16 }, // Peso Total
|
||||
{ wch: 22 }, // Tratamento
|
||||
{ wch: 16 }, // Material
|
||||
{ wch: 18 }, // Perfil Principal
|
||||
{ wch: 22 } // Comprimento
|
||||
];
|
||||
|
||||
const wb = XLSX.utils.book_new();
|
||||
XLSX.utils.book_append_sheet(wb, ws, 'Lista de Peças');
|
||||
XLSX.writeFile(wb, 'modelo_importacao_pecas.xlsx');
|
||||
toast.success('Modelo Excel (.xlsx) baixado com sucesso!');
|
||||
};
|
||||
|
||||
const totalPesoCalculado = pecasProcessadas.reduce((acc, p) => acc + (p.peso_total || 0), 0);
|
||||
const totalQuantidade = pecasProcessadas.reduce((acc, p) => acc + (p.quantidade || 0), 0);
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleModalOpenChange}>
|
||||
<DialogContent className="max-w-4xl max-h-[90vh] flex flex-col p-6 bg-card text-card-foreground border-border">
|
||||
<DialogHeader className="pb-3 border-b border-border">
|
||||
<DialogTitle className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<FileSpreadsheet className="h-6 w-6 text-emerald-500" />
|
||||
<span className="text-xl font-bold">Importar Peças via Planilha Excel (XLS / XLSX)</span>
|
||||
</div>
|
||||
{ofDefault && (
|
||||
<Badge variant="outline" className="text-sm font-semibold border-primary text-primary">
|
||||
OF Alvo: {ofDefault}
|
||||
</Badge>
|
||||
)}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{step === 'upload' ? (
|
||||
<div className="space-y-6 py-4">
|
||||
{/* Zona de Drop / Upload */}
|
||||
<div
|
||||
onDrop={handleDrop}
|
||||
onDragOver={handleDragOver}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="border-2 border-dashed border-border hover:border-emerald-500 rounded-xl p-8 text-center cursor-pointer transition-colors bg-muted/30 hover:bg-muted/60"
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center space-y-3">
|
||||
<div className="p-4 bg-emerald-500/10 text-emerald-500 rounded-full">
|
||||
<Upload className="h-8 w-8" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-base font-semibold text-foreground">
|
||||
Clique para selecionar ou arraste sua planilha Excel aqui
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Suporta arquivos <b>.xlsx</b>, <b>.xls</b> e <b>.csv</b>
|
||||
</p>
|
||||
</div>
|
||||
<Button type="button" variant="outline" size="sm" className="mt-2 pointer-events-none">
|
||||
Selecionar Arquivo
|
||||
</Button>
|
||||
</div>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".xlsx, .xls, .csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{isProcessing && (
|
||||
<div className="flex items-center justify-center gap-2 text-sm text-muted-foreground p-4 bg-muted/20 rounded-lg">
|
||||
<RefreshCw className="h-4 w-4 animate-spin text-emerald-500" />
|
||||
<span>Processando e validando linhas da planilha...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Informações sobre a estrutura */}
|
||||
<div className="bg-muted/40 rounded-lg p-4 border border-border space-y-2 text-xs text-muted-foreground">
|
||||
<div className="font-semibold text-foreground text-sm flex items-center gap-2">
|
||||
<CheckCircle2 className="h-4 w-4 text-emerald-500" />
|
||||
Ordem e Colunas Suportadas:
|
||||
</div>
|
||||
<p>
|
||||
A planilha pode conter as seguintes colunas (na ordem ou por cabeçalho):
|
||||
</p>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2 font-mono text-[11px] pt-1">
|
||||
<span className="p-1.5 bg-background rounded border border-border">1. OF</span>
|
||||
<span className="p-1.5 bg-background rounded border border-border">2. Fase</span>
|
||||
<span className="p-1.5 bg-background rounded border border-border">3. Marca</span>
|
||||
<span className="p-1.5 bg-background rounded border border-border">4. Descrição</span>
|
||||
<span className="p-1.5 bg-background rounded border border-border">5. Quantidade</span>
|
||||
<span className="p-1.5 bg-background rounded border border-border">6. Peso Unitário (kg)</span>
|
||||
<span className="p-1.5 bg-background rounded border border-border">7. Peso Total (kg)</span>
|
||||
<span className="p-1.5 bg-background rounded border border-border">8. Tratamento (pintura)</span>
|
||||
<span className="p-1.5 bg-background rounded border border-border">9. Material (Aço)</span>
|
||||
<span className="p-1.5 bg-background rounded border border-border">10. Perfil Principal</span>
|
||||
</div>
|
||||
<p className="pt-2 text-[11px]">
|
||||
💡 <i>Dica: O campo de Tratamento Superficial será preenchido automaticamente como <b>"pintura"</b> caso venha em branco.</i>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Ações inferiores */}
|
||||
<div className="flex items-center justify-between pt-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleDownloadModeloXLS}
|
||||
className="flex items-center gap-2 text-xs"
|
||||
>
|
||||
<Download className="h-4 w-4 text-emerald-600" />
|
||||
Baixar Modelo Excel (.xlsx)
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => handleModalOpenChange(false)}
|
||||
>
|
||||
Cancelar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* Step Preview */
|
||||
<div className="flex-1 flex flex-col space-y-4 py-2 overflow-hidden">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 bg-muted/40 p-3 rounded-lg border border-border text-sm">
|
||||
<div className="flex items-center gap-4">
|
||||
<div>
|
||||
<span className="text-muted-foreground">Total de Peças:</span>{' '}
|
||||
<b className="text-foreground text-base">{pecasProcessadas.length}</b> ({totalQuantidade} un.)
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-muted-foreground">Peso Total:</span>{' '}
|
||||
<b className="text-emerald-500 text-base">
|
||||
{totalPesoCalculado.toLocaleString('pt-BR')} kg
|
||||
</b>
|
||||
<span className="text-xs text-muted-foreground ml-1">
|
||||
({(totalPesoCalculado / 1000).toFixed(3)} t)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setStep('upload')}
|
||||
className="flex items-center gap-1 text-xs"
|
||||
>
|
||||
<ArrowLeft className="h-3.5 w-3.5" />
|
||||
Trocar Arquivo
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabela de Preview */}
|
||||
<ScrollArea className="flex-1 max-h-[380px] border border-border rounded-md">
|
||||
<Table>
|
||||
<TableHeader className="bg-muted/60 sticky top-0 z-10">
|
||||
<TableRow>
|
||||
<TableHead className="w-16">OF</TableHead>
|
||||
<TableHead className="w-16">Fase</TableHead>
|
||||
<TableHead className="w-20">Marca</TableHead>
|
||||
<TableHead>Descrição</TableHead>
|
||||
<TableHead className="w-16 text-center">Qtd</TableHead>
|
||||
<TableHead className="w-24 text-right">Peso Un. (kg)</TableHead>
|
||||
<TableHead className="w-24 text-right">Peso Total (kg)</TableHead>
|
||||
<TableHead className="w-24">Tratamento</TableHead>
|
||||
<TableHead className="w-24">Material</TableHead>
|
||||
<TableHead className="w-28">Perfil Princ.</TableHead>
|
||||
<TableHead className="w-12 text-center"></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{pecasProcessadas.map((peca, idx) => (
|
||||
<TableRow key={idx} className="hover:bg-muted/30">
|
||||
<TableCell className="font-semibold text-primary text-xs">{peca.of_number}</TableCell>
|
||||
<TableCell className="text-xs">{peca.etapa_fase}</TableCell>
|
||||
<TableCell className="font-bold text-xs">{peca.marca}</TableCell>
|
||||
<TableCell className="text-xs font-mono">{peca.descricao}</TableCell>
|
||||
<TableCell className="text-center text-xs font-semibold">{peca.quantidade}</TableCell>
|
||||
<TableCell className="text-right text-xs">{peca.peso_unitario.toLocaleString('pt-BR')}</TableCell>
|
||||
<TableCell className="text-right text-xs font-semibold text-emerald-500">
|
||||
{peca.peso_total.toLocaleString('pt-BR')}
|
||||
</TableCell>
|
||||
<TableCell className="text-xs">{peca.tratamento_superficial}</TableCell>
|
||||
<TableCell className="text-xs">{peca.material}</TableCell>
|
||||
<TableCell className="text-xs font-mono">{peca.perfil_principal}</TableCell>
|
||||
<TableCell className="text-center p-1">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleRemovePeca(idx)}
|
||||
className="h-7 w-7 p-0 text-destructive hover:bg-destructive/10"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</ScrollArea>
|
||||
|
||||
<DialogFooter className="pt-3 border-t border-border flex items-center justify-between sm:justify-between w-full">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => handleModalOpenChange(false)}
|
||||
disabled={isImporting}
|
||||
>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleImportSubmit}
|
||||
disabled={isImporting || pecasProcessadas.length === 0}
|
||||
className="bg-emerald-600 hover:bg-emerald-700 text-white font-semibold flex items-center gap-2"
|
||||
>
|
||||
{isImporting ? (
|
||||
<>
|
||||
<RefreshCw className="h-4 w-4 animate-spin" />
|
||||
Importando {pecasProcessadas.length} Peças...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CheckCircle2 className="h-4 w-4" />
|
||||
Confirmar e Importar {pecasProcessadas.length} Peças
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -6,13 +6,15 @@ import { Textarea } from '@/components/ui/textarea';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Upload, FileText, Trash2, Download, Undo2 } from 'lucide-react';
|
||||
import { Upload, FileText, Trash2, Download, Undo2, FileSpreadsheet } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { Peca } from '@/hooks/usePecas';
|
||||
import { ImportarPecasModal } from './ImportarPecasModal';
|
||||
import { ImportarXLSModal } from './ImportarXLSModal';
|
||||
|
||||
interface PecaFormProps {
|
||||
ofNumbers: string[];
|
||||
ofDefault?: string;
|
||||
onSave: (data: any) => Promise<boolean>;
|
||||
onUpdate: (id: string, data: any) => Promise<boolean>;
|
||||
onImportCSV: (file: File) => Promise<boolean>;
|
||||
@@ -30,6 +32,7 @@ interface PecaFormProps {
|
||||
|
||||
export function PecaForm({
|
||||
ofNumbers,
|
||||
ofDefault,
|
||||
onSave,
|
||||
onUpdate,
|
||||
onImportCSV,
|
||||
@@ -92,6 +95,7 @@ export function PecaForm({
|
||||
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [showImportModal, setShowImportModal] = useState(false);
|
||||
const [showXLSModal, setShowXLSModal] = useState(false);
|
||||
|
||||
const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
@@ -361,6 +365,16 @@ export function PecaForm({
|
||||
<Download className="h-4 w-4" />
|
||||
Download Modelo CSV
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setShowXLSModal(true)}
|
||||
className="flex items-center gap-2 border-emerald-600 text-emerald-600 hover:text-emerald-700 hover:bg-emerald-50 dark:hover:bg-emerald-950/30 font-semibold"
|
||||
>
|
||||
<FileSpreadsheet className="h-4 w-4 text-emerald-600" />
|
||||
Importar de XLS
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<input
|
||||
@@ -385,6 +399,13 @@ export function PecaForm({
|
||||
etapa_fase: peca.etapa_fase
|
||||
}))}
|
||||
/>
|
||||
|
||||
<ImportarXLSModal
|
||||
open={showXLSModal}
|
||||
onOpenChange={setShowXLSModal}
|
||||
onImport={onImportPecas}
|
||||
ofDefault={formData.of_number || ofDefault || (ofNumbers && ofNumbers[0]) || ''}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -240,6 +240,7 @@ export default function CadastroPecasFiltrado() {
|
||||
<CardContent>
|
||||
<PecaForm
|
||||
ofNumbers={[ofSelecionada]} // Apenas a OF selecionada
|
||||
ofDefault={ofSelecionada}
|
||||
onSave={handleSave}
|
||||
onUpdate={handleUpdate}
|
||||
onImportCSV={handleImportCSV}
|
||||
|
||||
Reference in New Issue
Block a user