+
+
diff --git a/src/config/routeConfig.ts b/src/config/routeConfig.ts
index 28f0af3..a59c459 100644
--- a/src/config/routeConfig.ts
+++ b/src/config/routeConfig.ts
@@ -4,7 +4,7 @@ import { ComponentType, lazy } from 'react';
// Definição de tipos para o sistema de rotas
// ============================================================================
-export type RouteGuard = 'public' | 'protected' | 'admin' | 'resource';
+export type RouteGuard = 'public' | 'protected' | 'admin' | 'resource' | 'smart';
export interface RouteDefinition {
path: string;
@@ -292,4 +292,11 @@ export const routeConfig: RouteDefinition[] = [
component: () => import('@/pages/PrioridadesFabricacao'),
guard: 'protected',
},
+
+ // ── Modo Smart (Chão de Fábrica Touch-First) ──────────────
+ {
+ path: '/smart',
+ component: () => import('@/pages/ModoSmart'),
+ guard: 'smart',
+ },
];
diff --git a/src/pages/ModoSmart.tsx b/src/pages/ModoSmart.tsx
new file mode 100644
index 0000000..2b2b154
--- /dev/null
+++ b/src/pages/ModoSmart.tsx
@@ -0,0 +1,182 @@
+import React, { useState, useEffect } from 'react';
+import { SmartHeader } from './smart/components/SmartHeader';
+import { SmartObraSelector } from './smart/components/SmartObraSelector';
+import { SmartHub } from './smart/components/SmartHub';
+import { SmartProducaoFlow } from './smart/components/SmartProducaoFlow';
+import { SmartEmbarqueFlow } from './smart/components/SmartEmbarqueFlow';
+import { SmartMontagemFlow } from './smart/components/SmartMontagemFlow';
+import { SmartConsultaRelatoriosFlow } from './smart/components/SmartConsultaRelatoriosFlow';
+import { OFAtiva } from '@/hooks/useOFsAtivas';
+import { useAuth } from '@/hooks/useAuth';
+import { supabase } from '@/integrations/supabase/client';
+
+export const ModoSmart: React.FC = () => {
+ const { user } = useAuth();
+
+ // Obra ativa selecionada
+ const [obraAtiva, setObraAtiva] = useState(() => {
+ try {
+ const saved = localStorage.getItem('tracksteel_smart_last_of');
+ return saved ? JSON.parse(saved) : null;
+ } catch {
+ return null;
+ }
+ });
+
+ // Tela ativa: 'hub' | 'producao' | 'embarque' | 'montagem' | 'consulta' | 'turno_pdf'
+ const [telaAtiva, setTelaAtiva] = useState<
+ 'hub' | 'producao' | 'embarque' | 'montagem' | 'consulta' | 'turno_pdf'
+ >('hub');
+
+ // Produção do operador hoje
+ const [producaoHoje, setProducaoHoje] = useState<{ totalPecas: number; totalKg: number }>({
+ totalPecas: 0,
+ totalKg: 0,
+ });
+
+ // Carregar produção de hoje do operador
+ const carregarProducaoHoje = React.useCallback(async () => {
+ if (!user || !obraAtiva) return;
+
+ try {
+ const hoje = new Date().toISOString().split('T')[0];
+ const { data } = await supabase
+ .from('apontamentos_producao')
+ .select(`
+ quantidade_produzida,
+ pecas (
+ peso_unitario
+ )
+ `)
+ .eq('of_number', obraAtiva.of_number)
+ .eq('data_apontamento', hoje)
+ .eq('created_by', user.id);
+
+ if (data) {
+ let pecas = 0;
+ let kg = 0;
+ data.forEach((ap: any) => {
+ const q = Number(ap.quantidade_produzida || 0);
+ const p = Number(ap.pecas?.peso_unitario || 0);
+ pecas += q;
+ kg += q * p;
+ });
+ setProducaoHoje({ totalPecas: pecas, totalKg: kg });
+ }
+ } catch (e) {
+ console.error('Erro ao carregar produção hoje:', e);
+ }
+ }, [user, obraAtiva]);
+
+ useEffect(() => {
+ carregarProducaoHoje();
+ }, [carregarProducaoHoje]);
+
+ const handleSelectObra = (of: OFAtiva) => {
+ setObraAtiva(of);
+ setTelaAtiva('hub');
+ };
+
+ const handleTrocarObra = () => {
+ setObraAtiva(null);
+ setTelaAtiva('hub');
+ };
+
+ const handleApontamentoRealizado = (pecasCount: number, pesoKg: number) => {
+ setProducaoHoje((prev) => ({
+ totalPecas: prev.totalPecas + pecasCount,
+ totalKg: prev.totalKg + pesoKg,
+ }));
+ };
+
+ // Determinar título do cabeçalho
+ const getHeaderInfo = () => {
+ if (!obraAtiva) {
+ return {
+ titulo: 'MODO SMART',
+ subtitulo: 'Chão de Fábrica Touch-First',
+ mostrarVoltar: false,
+ };
+ }
+
+ if (telaAtiva === 'hub') {
+ return {
+ titulo: `OF ${obraAtiva.of_number}`,
+ subtitulo: obraAtiva.cliente || 'Central de Operação',
+ mostrarVoltar: false,
+ };
+ }
+
+ const mapaTitulos: Record = {
+ producao: '1. Apontar Produção',
+ embarque: '2. Apontar Embarque',
+ montagem: '3. Apontar Montagem',
+ consulta: '4. Consultar Peças',
+ turno_pdf: 'Relatório do Turno',
+ };
+
+ return {
+ titulo: mapaTitulos[telaAtiva] || 'Modo Smart',
+ subtitulo: `OF ${obraAtiva.of_number}`,
+ mostrarVoltar: true,
+ };
+ };
+
+ const headerInfo = getHeaderInfo();
+
+ return (
+ = ({
+ obra,
+ onVoltarHub,
+ abrirDiretoTurno = false,
+}) => {
+ const { user } = useAuth();
+
+ // Aba ativa: 'consulta' | 'relatorios'
+ const [abaAtiva, setAbaAtiva] = useState<'consulta' | 'relatorios'>(
+ abrirDiretoTurno ? 'relatorios' : 'consulta'
+ );
+
+ // Estados da Consulta
+ const [busca, setBusca] = useState('');
+ const [filtroStatus, setFiltroStatus] = useState<'todos' | 'fabricando' | 'pronto' | 'embarcado' | 'montado'>('todos');
+ const [pecasStatus, setPecasStatus] = useState([]);
+ const [loading, setLoading] = useState(true);
+
+ // Estados de Relatórios
+ const [gerandoPDF, setGerandoPDF] = useState(false);
+
+ // Carregar dados de peças e progresso
+ const carregarDadosCompletos = React.useCallback(async () => {
+ try {
+ setLoading(true);
+
+ const [resPecas, resApontamentos, resExpedidos, resMontados] = await Promise.all([
+ supabase
+ .from('pecas')
+ .select('id, marca, descricao, etapa_fase, quantidade, peso_unitario')
+ .eq('of_number', obra.of_number),
+ supabase
+ .from('apontamentos_producao')
+ .select(`
+ peca_id,
+ quantidade_produzida,
+ processos_fabricacao (
+ nome
+ )
+ `)
+ .eq('of_number', obra.of_number),
+ supabase
+ .from('itens_romaneio_pecas')
+ .select(`
+ marca,
+ quantidade_expedida,
+ romaneios_expedicao!inner(of_number)
+ `)
+ .eq('romaneios_expedicao.of_number', obra.of_number),
+ supabase
+ .from('apontamentos_peca_obra')
+ .select(`
+ marca_peca,
+ quantidade,
+ diario_obra_rdo!inner(of_number)
+ `)
+ .eq('diario_obra_rdo.of_number', obra.of_number),
+ ]);
+
+ // Mapear apontamentos por peça e nome de processo
+ const mapaProc = new Map();
+ (resApontamentos.data || []).forEach((ap: any) => {
+ const pecaId = ap.peca_id;
+ const nomeProc = (ap.processos_fabricacao?.nome || '').toLowerCase();
+ const qtd = Number(ap.quantidade_produzida || 0);
+
+ const atual = mapaProc.get(pecaId) || { corte: 0, montagem: 0, solda: 0, pintura: 0 };
+ if (nomeProc.includes('corte')) atual.corte += qtd;
+ else if (nomeProc.includes('montag')) atual.montagem += qtd;
+ else if (nomeProc.includes('solda')) atual.solda += qtd;
+ else if (nomeProc.includes('pintura')) atual.pintura += qtd;
+
+ mapaProc.set(pecaId, atual);
+ });
+
+ // Mapear expedição por marca
+ const mapaExp = new Map();
+ (resExpedidos.data || []).forEach((item: any) => {
+ const marca = item.marca;
+ mapaExp.set(marca, (mapaExp.get(marca) || 0) + Number(item.quantidade_expedida || 0));
+ });
+
+ // Mapear montagem por marca
+ const mapaMont = new Map();
+ (resMontados.data || []).forEach((item: any) => {
+ const marca = item.marca_peca;
+ mapaMont.set(marca, (mapaMont.get(marca) || 0) + Number(item.quantidade || 0));
+ });
+
+ // Montar PecaStatus
+ const lista: PecaStatus[] = (resPecas.data || []).map((p) => {
+ const procs = mapaProc.get(p.id) || { corte: 0, montagem: 0, solda: 0, pintura: 0 };
+ return {
+ id: p.id,
+ marca: p.marca,
+ descricao: p.descricao,
+ etapa_fase: p.etapa_fase,
+ quantidade: p.quantidade,
+ peso_unitario: p.peso_unitario,
+ corte: procs.corte,
+ montagem: procs.montagem,
+ solda: procs.solda,
+ pintura: procs.pintura,
+ expedido: mapaExp.get(p.marca) || 0,
+ montado_obra: mapaMont.get(p.marca) || 0,
+ };
+ });
+
+ setPecasStatus(lista);
+ } catch (e) {
+ console.error('Erro ao carregar dados de status:', e);
+ toast.error('Erro ao consultar status das peças');
+ } finally {
+ setLoading(false);
+ }
+ }, [obra.of_number]);
+
+ useEffect(() => {
+ carregarDadosCompletos();
+ }, [carregarDadosCompletos]);
+
+ // Filtragem da lista
+ const pecasFiltradas = useMemo(() => {
+ return pecasStatus.filter((p) => {
+ // Filtro texto
+ if (busca.trim()) {
+ const t = busca.toLowerCase();
+ const match = p.marca.toLowerCase().includes(t) || p.descricao?.toLowerCase().includes(t);
+ if (!match) return false;
+ }
+
+ // Filtro status
+ if (filtroStatus === 'todos') return true;
+ if (filtroStatus === 'montado') return p.montado_obra >= p.quantidade;
+ if (filtroStatus === 'embarcado') return p.expedido >= p.quantidade;
+ if (filtroStatus === 'pronto') return p.pintura >= p.quantidade || p.solda >= p.quantidade;
+ if (filtroStatus === 'fabricando') return p.corte > 0 && p.pintura < p.quantidade;
+
+ return true;
+ });
+ }, [pecasStatus, busca, filtroStatus]);
+
+ // Status visual de cada etapa
+ const getBadgeEtapa = (concluido: number, total: number) => {
+ if (concluido >= total && total > 0) {
+ return { icon: = ({ obra, onVoltarHub }) => {
+ const { user } = useAuth();
+
+ // Estados: 'menu' | 'novo_romaneio' | 'selecionar_romaneio' | 'carregando_pecas'
+ const [subTela, setSubTela] = useState<'menu' | 'novo_romaneio' | 'selecionar_romaneio' | 'carregando_pecas'>('menu');
+
+ // Romaneio ativo para carregamento
+ const [romaneioAtivo, setRomaneioAtivo] = useState(null);
+
+ // Lista de romaneios da OF
+ const [romaneios, setRomaneios] = useState([]);
+ const [loadingRomaneios, setLoadingRomaneios] = useState(false);
+
+ // Formulário de Novo Romaneio Rápido
+ const [nomeMotorista, setNomeMotorista] = useState('');
+ const [tipoTransporte, setTipoTransporte] = useState<'caminhao_pequeno' | 'caminhao_trucado' | 'caminhao_munck' | 'carreta_12m'>('caminhao_trucado');
+ const [freteTipo, setFreteTipo] = useState<'proprio' | 'terceiros'>('proprio');
+ const [criandoRomaneio, setCriandoRomaneio] = useState(false);
+
+ // Lista de peças prontas da OF e seus saldos de embarque
+ const [pecasProntas, setPecasProntas] = useState([]);
+ const [loadingPecas, setLoadingPecas] = useState(false);
+
+ // Peça selecionada para adicionar ao caminhão
+ const [pecaEmbarque, setPecaEmbarque] = useState(null);
+ const [qtdEmbarcar, setQtdEmbarcar] = useState(1);
+ const [salvandoItem, setSalvandoItem] = useState(false);
+
+ // Carregar Romaneios Abertos da OF
+ const carregarRomaneios = React.useCallback(async () => {
+ try {
+ setLoadingRomaneios(true);
+ const { data, error } = await supabase
+ .from('romaneios_expedicao')
+ .select('*')
+ .eq('of_number', obra.of_number)
+ .neq('status', 'Entregue')
+ .order('created_at', { ascending: false });
+
+ if (error) throw error;
+ setRomaneios(data || []);
+ } catch (e) {
+ console.error('Erro ao buscar romaneios:', e);
+ } finally {
+ setLoadingRomaneios(false);
+ }
+ }, [obra.of_number]);
+
+ // Carregar Peças com Saldo para Embarque
+ const carregarPecasParaEmbarque = React.useCallback(async () => {
+ try {
+ setLoadingPecas(true);
+
+ const [resPecas, resItensExpedidos] = await Promise.all([
+ supabase
+ .from('pecas')
+ .select('id, marca, descricao, etapa_fase, quantidade, peso_unitario')
+ .eq('of_number', obra.of_number),
+ supabase
+ .from('itens_romaneio_pecas')
+ .select('peca_id, quantidade_expedida'),
+ ]);
+
+ const mapaExpedidas = new Map();
+ if (resItensExpedidos.data) {
+ resItensExpedidos.data.forEach((item) => {
+ const atual = mapaExpedidas.get(item.peca_id) || 0;
+ mapaExpedidas.set(item.peca_id, atual + Number(item.quantidade_expedida || 0));
+ });
+ }
+
+ if (resPecas.data) {
+ const formatadas: PecaPronta[] = resPecas.data.map((p) => {
+ const jaExp = mapaExpedidas.get(p.id) || 0;
+ const saldo = Math.max(0, p.quantidade - jaExp);
+ return {
+ ...p,
+ quantidadeJaExpedida: jaExp,
+ saldoDisponivel: saldo,
+ };
+ });
+ setPecasProntas(formatadas);
+ }
+ } catch (e) {
+ console.error('Erro ao carregar peças para embarque:', e);
+ } finally {
+ setLoadingPecas(false);
+ }
+ }, [obra.of_number]);
+
+ useEffect(() => {
+ carregarRomaneios();
+ carregarPecasParaEmbarque();
+ }, [carregarRomaneios, carregarPecasParaEmbarque]);
+
+ // Criar Novo Romaneio
+ const handleCriarRomaneio = async () => {
+ if (!user) return;
+ try {
+ setCriandoRomaneio(true);
+ const hoje = new Date().toISOString().split('T')[0];
+
+ // Gerar número de romaneio sequencial RO-XX
+ const seq = (romaneios.length + 1).toString().padStart(2, '0');
+ const numRomaneio = `RO${obra.of_number.replace(/\D/g, '')}-${seq}`;
+
+ const novo = {
+ of_number: obra.of_number,
+ numero_romaneio: numRomaneio,
+ data_romaneio: hoje,
+ data_criacao: hoje,
+ revisao: 0,
+ prioridade: 'Normal' as const,
+ status: 'Em planejamento' as const,
+ tipo_transporte: tipoTransporte,
+ frete_tipo: freteTipo,
+ nome_motorista: nomeMotorista || 'Motorista a definir',
+ peso_total_romaneio: 0,
+ created_by: user.id,
+ };
+
+ const { data, error } = await supabase
+ .from('romaneios_expedicao')
+ .insert(novo)
+ .select()
+ .single();
+
+ if (error) throw error;
+
+ smartAudio.playSuccess();
+ toast.success(`Romaneio ${numRomaneio} criado!`);
+ setRomaneioAtivo(data);
+ setSubTela('carregando_pecas');
+ carregarRomaneios();
+ } catch (e: any) {
+ smartAudio.playAlert();
+ console.error('Erro ao criar romaneio:', e);
+ toast.error('Erro ao criar romaneio: ' + (e?.message || 'Falha de conexão'));
+ } finally {
+ setCriandoRomaneio(false);
+ }
+ };
+
+ // Incluir Peça no Romaneio
+ const handleIncluirPeca = async () => {
+ if (!romaneioAtivo || !pecaEmbarque || qtdEmbarcar <= 0) return;
+
+ try {
+ setSalvandoItem(true);
+ const pesoTotalItem = qtdEmbarcar * (pecaEmbarque.peso_unitario || 0);
+
+ const novoItem = {
+ romaneio_id: romaneioAtivo.id,
+ peca_id: pecaEmbarque.id,
+ marca: pecaEmbarque.marca,
+ descricao: pecaEmbarque.descricao,
+ fase: pecaEmbarque.etapa_fase || 'Geral',
+ quantidade_expedida: qtdEmbarcar,
+ peso_unitario: pecaEmbarque.peso_unitario || 0,
+ peso_total: pesoTotalItem,
+ quantidade_faltante: Math.max(0, pecaEmbarque.saldoDisponivel - qtdEmbarcar),
+ };
+
+ const { error } = await supabase.from('itens_romaneio_pecas').insert(novoItem);
+ if (error) throw error;
+
+ // Atualizar o peso total no cabeçalho do romaneio
+ const novoPesoRomaneio = (romaneioAtivo.peso_total_romaneio || 0) + pesoTotalItem;
+ await supabase
+ .from('romaneios_expedicao')
+ .update({ peso_total_romaneio: novoPesoRomaneio })
+ .eq('id', romaneioAtivo.id);
+
+ smartAudio.playSuccess();
+ toast.success(`Adicionado: ${qtdEmbarcar}x ${pecaEmbarque.marca} ao caminhão!`);
+
+ // Atualizar estado local
+ setRomaneioAtivo((prev) => (prev ? { ...prev, peso_total_romaneio: novoPesoRomaneio } : null));
+ setPecaEmbarque(null);
+ carregarPecasParaEmbarque();
+ } catch (e: any) {
+ smartAudio.playAlert();
+ console.error('Erro ao adicionar peça ao romaneio:', e);
+ toast.error('Erro ao incluir no caminhão: ' + (e?.message || ''));
+ } finally {
+ setSalvandoItem(false);
+ }
+ };
+
+ // ─────────────────────────────────────────────────────────────
+ // RENDER: SUBTELA 'MENU'
+ // ─────────────────────────────────────────────────────────────
+ if (subTela === 'menu') {
+ return (
+ = ({
+ titulo = 'MODO SMART',
+ subtitulo,
+ mostrarVoltar = false,
+ onVoltar,
+}) => {
+ const navigate = useNavigate();
+ const { user, signOut } = useAuth();
+ const [soundOn, setSoundOn] = useState(() => smartAudio.isSoundEnabled());
+
+ const handleToggleSound = () => {
+ const novoEstado = smartAudio.toggleSound();
+ setSoundOn(novoEstado);
+ };
+
+ const handleVoltarAoModoCompleto = () => {
+ smartAudio.playClick();
+ try {
+ localStorage.setItem('tracksteel_app_mode', 'complete');
+ } catch {
+ // ignore
+ }
+ navigate('/dashboard');
+ };
+
+ const handleLogout = async () => {
+ smartAudio.playClick();
+ if (window.confirm('Deseja realmente encerrar a sessão?')) {
+ await signOut();
+ navigate('/auth');
+ }
+ };
+
+ return (
+
+
+ );
+};
diff --git a/src/pages/smart/components/SmartHub.tsx b/src/pages/smart/components/SmartHub.tsx
new file mode 100644
index 0000000..e94fd5a
--- /dev/null
+++ b/src/pages/smart/components/SmartHub.tsx
@@ -0,0 +1,206 @@
+import React from 'react';
+import {
+ Hammer,
+ Truck,
+ PackageCheck,
+ Search,
+ ArrowLeftRight,
+ FileText,
+ TrendingUp,
+ Sparkles
+} from 'lucide-react';
+import { OFAtiva } from '@/hooks/useOFsAtivas';
+import { smartAudio } from '@/utils/smartAudio';
+import { Button } from '@/components/ui/button';
+
+interface SmartHubProps {
+ obra: OFAtiva;
+ onTrocarObra: () => void;
+ onNavigate: (destino: 'producao' | 'embarque' | 'montagem' | 'consulta') => void;
+ producaoHoje: { totalPecas: number; totalKg: number };
+ onGerarRelatorioTurno: () => void;
+}
+
+export const SmartHub: React.FC = ({
+ obra,
+ onTrocarObra,
+ onNavigate,
+ producaoHoje,
+ onGerarRelatorioTurno,
+}) => {
+ const handleAcao = (destino: 'producao' | 'embarque' | 'montagem' | 'consulta') => {
+ smartAudio.playClick();
+ onNavigate(destino);
+ };
+
+ return (
+ = ({
+ obra,
+ onVoltarHub,
+ onApontamentoMontagem,
+}) => {
+ const { user } = useAuth();
+
+ const [itens, setItens] = useState([]);
+ const [loading, setLoading] = useState(true);
+
+ // Peça selecionada para apontamento
+ const [itemSelecionado, setItemSelecionado] = useState(null);
+ const [qtdApontar, setQtdApontar] = useState(1);
+ const [salvando, setSalvando] = useState(false);
+
+ // Carregar saldo de peças expedidas vs já montadas
+ const carregarDadosMontagem = React.useCallback(async () => {
+ try {
+ setLoading(true);
+
+ // 1. Buscar peças expedidas em romaneios desta OF
+ const { data: pecasExpedidas, error: errorExp } = await supabase
+ .from('itens_romaneio_pecas')
+ .select(`
+ marca,
+ descricao,
+ peso_unitario,
+ quantidade_expedida,
+ romaneios_expedicao!inner(
+ of_number
+ )
+ `)
+ .eq('romaneios_expedicao.of_number', obra.of_number);
+
+ if (errorExp) throw errorExp;
+
+ const mapaExpedidas = new Map();
+ (pecasExpedidas || []).forEach((item: any) => {
+ const atual = mapaExpedidas.get(item.marca) || {
+ marca: item.marca,
+ descricao: item.descricao || '',
+ peso_unitario: item.peso_unitario || 0,
+ expedido: 0,
+ };
+ atual.expedido += Number(item.quantidade_expedida || 0);
+ mapaExpedidas.set(item.marca, atual);
+ });
+
+ // 2. Buscar apontamentos já feitos no RDO para esta OF
+ const { data: apontamentosRDO, error: errorRDO } = await supabase
+ .from('apontamentos_peca_obra')
+ .select(`
+ marca_peca,
+ quantidade,
+ diario_obra_rdo!inner(
+ of_number
+ )
+ `)
+ .eq('diario_obra_rdo.of_number', obra.of_number);
+
+ if (errorRDO) throw errorRDO;
+
+ const mapaMontadas = new Map();
+ (apontamentosRDO || []).forEach((ap: any) => {
+ const atual = mapaMontadas.get(ap.marca_peca) || 0;
+ mapaMontadas.set(ap.marca_peca, atual + Number(ap.quantidade || 0));
+ });
+
+ // 3. Montar lista de saldos
+ const lista: ItemMontagem[] = Array.from(mapaExpedidas.values()).map((exp) => {
+ const jaMontado = mapaMontadas.get(exp.marca) || 0;
+ const saldo = Math.max(0, exp.expedido - jaMontado);
+ return {
+ marca: exp.marca,
+ descricao: exp.descricao,
+ peso_unitario: exp.peso_unitario,
+ quantidade_expedida: exp.expedido,
+ quantidade_ja_apontada: jaMontado,
+ saldo_disponivel: saldo,
+ };
+ });
+
+ // Ordenar: primeiro os com saldo > 0
+ lista.sort((a, b) => {
+ if (a.saldo_disponivel > 0 && b.saldo_disponivel === 0) return -1;
+ if (a.saldo_disponivel === 0 && b.saldo_disponivel > 0) return 1;
+ return a.marca.localeCompare(b.marca);
+ });
+
+ setItens(lista);
+ } catch (e) {
+ console.error('Erro ao carregar dados de montagem:', e);
+ toast.error('Erro ao buscar peças da obra');
+ } finally {
+ setLoading(false);
+ }
+ }, [obra.of_number]);
+
+ useEffect(() => {
+ carregarDadosMontagem();
+ }, [carregarDadosMontagem]);
+
+ // Obter ou criar RDO de hoje para a OF
+ const obterOuCriarRDO = async (): Promise => {
+ const hoje = new Date().toISOString().split('T')[0];
+
+ // Buscar se já existe RDO hoje
+ const { data: rdoExistente } = await supabase
+ .from('diario_obra_rdo')
+ .select('id')
+ .eq('of_number', obra.of_number)
+ .eq('data', hoje)
+ .maybeSingle();
+
+ if (rdoExistente?.id) {
+ return rdoExistente.id;
+ }
+
+ // Criar novo RDO para o dia
+ const { data: novoRDO, error } = await supabase
+ .from('diario_obra_rdo')
+ .insert({
+ of_number: obra.of_number,
+ data: hoje,
+ responsavel_obra: user?.email || 'Operador Smart',
+ status: 'Em andamento',
+ observacoes: 'Criado via Modo Smart',
+ })
+ .select('id')
+ .single();
+
+ if (error) throw error;
+ return novoRDO.id;
+ };
+
+ // Confirmar Apontamento de Montagem
+ const handleConfirmarMontagem = async () => {
+ if (!itemSelecionado || qtdApontar <= 0) return;
+
+ try {
+ setSalvando(true);
+ const rdoId = await obterOuCriarRDO();
+
+ const { error } = await supabase.from('apontamentos_peca_obra').insert({
+ rdo_id: rdoId,
+ marca_peca: itemSelecionado.marca,
+ quantidade: qtdApontar,
+ periodo: 'Normal',
+ status: 'Montado',
+ });
+
+ if (error) throw error;
+
+ smartAudio.playSuccess();
+ toast.success(`🏗️ Montagem registrada: ${qtdApontar}x ${itemSelecionado.marca}!`);
+
+ if (onApontamentoMontagem) {
+ onApontamentoMontagem();
+ }
+
+ setItemSelecionado(null);
+ carregarDadosMontagem();
+ } catch (e: any) {
+ smartAudio.playAlert();
+ console.error('Erro ao registrar montagem:', e);
+ toast.error('Erro ao registrar montagem: ' + (e?.message || ''));
+ } finally {
+ setSalvando(false);
+ }
+ };
+
+ // ─────────────────────────────────────────────────────────────
+ // RENDER: TECLADO DE APONTAMENTO
+ // ─────────────────────────────────────────────────────────────
+ if (itemSelecionado) {
+ const saldo = itemSelecionado.saldo_disponivel;
+
+ return (
+ = ({ onSelectObra }) => {
+ const { ofsAtivas, isLoading } = useOFsAtivas();
+ const [busca, setBusca] = useState('');
+
+ const filteredOFs = useMemo(() => {
+ if (!busca.trim()) return ofsAtivas;
+ const term = busca.toLowerCase();
+ return ofsAtivas.filter(
+ (of) =>
+ of.of_number?.toLowerCase().includes(term) ||
+ of.cliente?.toLowerCase().includes(term) ||
+ of.descricao_resumida?.toLowerCase().includes(term)
+ );
+ }, [ofsAtivas, busca]);
+
+ const handleSelect = (of: OFAtiva) => {
+ smartAudio.playClick();
+ try {
+ localStorage.setItem('tracksteel_smart_last_of', JSON.stringify(of));
+ } catch {
+ // ignore
+ }
+ onSelectObra(of);
+ };
+
+ return (
+ = ({
+ obra,
+ onApontamentoRealizado,
+ onVoltarHub,
+}) => {
+ const { user } = useAuth();
+ const { data: processos = [], isLoading: loadingProcessos } = useProcessosFabricacao();
+
+ // Estados da esteira guiada
+ const [etapaAtual, setEtapaAtual] = useState<'processo' | 'fase' | 'pecas' | 'quantidade'>('processo');
+ const [processoSelecionado, setProcessoSelecionado] = useState(null);
+ const [faseSelecionada, setFaseSelecionada] = useState('');
+ const [pecaSelecionada, setPecaSelecionada] = useState(null);
+
+ // Quantidade selecionada no teclado rápido
+ const [qtdApontar, setQtdApontar] = useState(1);
+ const [salvando, setSalvando] = useState(false);
+
+ // Dados carregados da OF
+ const [pecas, setPecas] = useState([]);
+ const [apontamentosExistentes, setApontamentosExistentes] = useState([]);
+ const [carregandoDados, setCarregandoDados] = useState(true);
+
+ // Carregar peças e apontamentos da OF
+ const carregarDadosOF = React.useCallback(async () => {
+ try {
+ setCarregandoDados(true);
+
+ const [resPecas, resApontamentos] = await Promise.all([
+ supabase
+ .from('pecas')
+ .select('id, marca, descricao, etapa_fase, quantidade, peso_unitario, perfil_principal')
+ .eq('of_number', obra.of_number),
+ supabase
+ .from('apontamentos_producao')
+ .select('peca_id, processo_id, quantidade_produzida')
+ .eq('of_number', obra.of_number),
+ ]);
+
+ if (resPecas.data) {
+ setPecas(resPecas.data);
+ }
+ if (resApontamentos.data) {
+ setApontamentosExistentes(resApontamentos.data);
+ }
+ } catch (e) {
+ console.error('Erro ao carregar dados da OF:', e);
+ toast.error('Erro ao buscar peças da obra');
+ } finally {
+ setCarregandoDados(false);
+ }
+ }, [obra.of_number]);
+
+ React.useEffect(() => {
+ carregarDadosOF();
+ }, [carregarDadosOF]);
+
+ // Lista de fases únicas da OF
+ const fasesDisponiveis = useMemo(() => {
+ const setFases = new Set();
+ pecas.forEach((p) => {
+ if (p.etapa_fase && p.etapa_fase.trim()) {
+ setFases.add(p.etapa_fase.trim());
+ }
+ });
+ const lista = Array.from(setFases).sort();
+ return lista.length > 0 ? lista : ['Geral'];
+ }, [pecas]);
+
+ // Mapa de produção acumulada por peca_id e processo_id
+ const mapaProducao = useMemo(() => {
+ const mapa = new Map();
+ apontamentosExistentes.forEach((ap) => {
+ const key = `${ap.peca_id}_${ap.processo_id}`;
+ const atual = mapa.get(key) || 0;
+ mapa.set(key, atual + Number(ap.quantidade_produzida || 0));
+ });
+ return mapa;
+ }, [apontamentosExistentes]);
+
+ // Peças filtradas pela fase selecionada com cálculo do saldo
+ const pecasComSaldo = useMemo(() => {
+ if (!processoSelecionado) return [];
+
+ return pecas
+ .filter((p) => {
+ if (!faseSelecionada || faseSelecionada === 'Geral') return true;
+ return p.etapa_fase?.trim() === faseSelecionada;
+ })
+ .map((p) => {
+ const key = `${p.id}_${processoSelecionado.id}`;
+ const jaProduzido = mapaProducao.get(key) || 0;
+ const saldo = Math.max(0, p.quantidade - jaProduzido);
+ return {
+ ...p,
+ jaProduzido,
+ saldo,
+ };
+ })
+ .sort((a, b) => {
+ // Colocar primeiro as que têm saldo pendente
+ if (a.saldo > 0 && b.saldo === 0) return -1;
+ if (a.saldo === 0 && b.saldo > 0) return 1;
+ return a.marca.localeCompare(b.marca);
+ });
+ }, [pecas, faseSelecionada, processoSelecionado, mapaProducao]);
+
+ // Helper de ícone por processo
+ const getIconeProcesso = (nome: string) => {
+ const n = nome.toLowerCase();
+ if (n.includes('corte')) return
+ {/* Cabeçalho Fixo do Modo Smart */}
+ setTelaAtiva('hub')}
+ />
+
+ {/* Conteúdo Principal Touch-First */}
+
+ {!obraAtiva ? (
+ setTelaAtiva(destino)}
+ producaoHoje={producaoHoje}
+ onGerarRelatorioTurno={() => setTelaAtiva('turno_pdf')}
+ />
+ ) : telaAtiva === 'producao' ? (
+ setTelaAtiva('hub')}
+ />
+ ) : telaAtiva === 'embarque' ? (
+ setTelaAtiva('hub')}
+ />
+ ) : telaAtiva === 'montagem' ? (
+ setTelaAtiva('hub')}
+ />
+ ) : telaAtiva === 'consulta' ? (
+ setTelaAtiva('hub')}
+ />
+ ) : telaAtiva === 'turno_pdf' ? (
+ setTelaAtiva('hub')}
+ abrirDiretoTurno={true}
+ />
+ ) : null}
+
+
+ );
+};
+
+export default ModoSmart;
diff --git a/src/pages/smart/components/SmartConsultaRelatoriosFlow.tsx b/src/pages/smart/components/SmartConsultaRelatoriosFlow.tsx
new file mode 100644
index 0000000..96abc3c
--- /dev/null
+++ b/src/pages/smart/components/SmartConsultaRelatoriosFlow.tsx
@@ -0,0 +1,658 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import {
+ Search,
+ FileText,
+ Share2,
+ Download,
+ Mail,
+ X,
+ CheckCircle2,
+ Clock,
+ Circle,
+ AlertCircle,
+ Eye,
+ MessageCircle
+} from 'lucide-react';
+import jsPDF from 'jspdf';
+import autoTable from 'jspdf-autotable';
+import { OFAtiva } from '@/hooks/useOFsAtivas';
+import { useAuth } from '@/hooks/useAuth';
+import { supabase } from '@/integrations/supabase/client';
+import { smartAudio } from '@/utils/smartAudio';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { toast } from 'sonner';
+
+interface SmartConsultaRelatoriosFlowProps {
+ obra: OFAtiva;
+ onVoltarHub: () => void;
+ abrirDiretoTurno?: boolean;
+}
+
+interface PecaStatus {
+ id: string;
+ marca: string;
+ descricao: string;
+ etapa_fase: string;
+ quantidade: number;
+ peso_unitario: number;
+ corte: number;
+ montagem: number;
+ solda: number;
+ pintura: number;
+ expedido: number;
+ montado_obra: number;
+}
+
+export const SmartConsultaRelatoriosFlow: React.FC
+ {/* Navegação entre Abas: Consulta Rápida vs Relatórios */}
+
+ );
+};
diff --git a/src/pages/smart/components/SmartEmbarqueFlow.tsx b/src/pages/smart/components/SmartEmbarqueFlow.tsx
new file mode 100644
index 0000000..b951148
--- /dev/null
+++ b/src/pages/smart/components/SmartEmbarqueFlow.tsx
@@ -0,0 +1,723 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import {
+ Truck,
+ Plus,
+ ListChecks,
+ ChevronRight,
+ Check,
+ Package,
+ User,
+ FileCheck,
+ AlertCircle
+} from 'lucide-react';
+import { OFAtiva } from '@/hooks/useOFsAtivas';
+import { useAuth } from '@/hooks/useAuth';
+import { supabase } from '@/integrations/supabase/client';
+import { smartAudio } from '@/utils/smartAudio';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { toast } from 'sonner';
+
+interface SmartEmbarqueFlowProps {
+ obra: OFAtiva;
+ onVoltarHub: () => void;
+}
+
+interface RomaneioAberto {
+ id: string;
+ numero_romaneio: string;
+ nome_motorista?: string;
+ tipo_transporte?: string;
+ peso_total_romaneio?: number;
+ status?: string;
+ created_at?: string;
+}
+
+interface PecaPronta {
+ id: string;
+ marca: string;
+ descricao: string;
+ etapa_fase: string;
+ quantidade: number;
+ peso_unitario: number;
+ quantidadeJaExpedida: number;
+ saldoDisponivel: number;
+}
+
+export const SmartEmbarqueFlow: React.FC
+
+
+
+
+
+ {/* ─────────────────────────────────────────────────────────────
+ ABA 1: CONSULTA RÁPIDA DE PEÇAS COM TIMELINE
+ ───────────────────────────────────────────────────────────── */}
+ {abaAtiva === 'consulta' && (
+
+ {/* Campo de Busca Gigante Touch */}
+
+ )}
+
+ {/* ─────────────────────────────────────────────────────────────
+ ABA 2: EMISSÃO DE RELATÓRIOS EM PDF & COMPARTILHAMENTO
+ ───────────────────────────────────────────────────────────── */}
+ {abaAtiva === 'relatorios' && (
+
+
+
+ {/* Pílulas de Filtro Rápido */}
+
+
+ setBusca(e.target.value)}
+ placeholder="Digite a marca (ex: V101, P205)..."
+ className="h-14 pl-11 pr-11 bg-slate-800/90 border-slate-700 text-slate-100 text-base font-medium rounded-2xl"
+ />
+ {busca && (
+
+ )}
+
+ {[
+ { id: 'todos', label: 'Todos' },
+ { id: 'fabricando', label: 'Fabricando' },
+ { id: 'pronto', label: 'Pronto Pátio' },
+ { id: 'embarcado', label: 'Embarcado' },
+ { id: 'montado', label: 'Montado' },
+ ].map((f) => (
+
+ ))}
+
+
+ {/* Lista de Peças com Linha do Tempo Visual */}
+
+ {loading ? (
+
+
+
+ Carregando timeline das peças...
+
+ ) : pecasFiltradas.length === 0 ? (
+
+
+ ) : (
+ pecasFiltradas.map((peca) => (
+ Nenhuma peça encontrada
+Verifique o termo de busca ou filtro
+
+
+ ))
+ )}
+
+
+
+
+
+ {peca.marca}
+
+
+ {peca.etapa_fase || 'Estrutural'}
+
+
+
+ Total: {peca.quantidade} un
+
+
+ {peca.descricao || 'Peça Estrutural'}
+
+
+ {/* Linha do Tempo Visual da Peça */}
+
+ {[
+ { nome: 'Corte', valor: peca.corte },
+ { nome: 'Mont.', valor: peca.montagem },
+ { nome: 'Solda', valor: peca.solda },
+ { nome: 'Pint.', valor: peca.pintura },
+ { nome: 'Emb.', valor: peca.expedido },
+ { nome: 'Obra', valor: peca.montado_obra },
+ ].map((etapa, idx) => {
+ const badge = getBadgeEtapa(etapa.valor, peca.quantidade);
+ return (
+
+
+
+ );
+ })}
+
+ {etapa.nome}
+
+
+ {badge.icon}
+
+
+ {badge.label}
+
+
+
+ )}
+
+ {/* Botão de Voltar ao Hub */}
+
+
+
+
+ {/* CARD 1: RELATÓRIO DO MEU TURNO */}
+ + Selecione o Relatório Desejado +
++ Gere documentos oficiais para download ou envio imediato +
+
+
+
+ {/* CARD 2: RELATÓRIO GERAL DA OBRA */}
+
+
+
+
+
+ Opção 1
+
+
+ + Relatório do Meu Turno (Hoje) +
++ Lista todas as peças apontadas por você no turno de hoje +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Opção 2
+
+
+ + Relatório de Produção Geral da Obra +
++ Quadro completo de todas as marcas com avanço por etapa +
+
+
+
+
+ );
+ }
+
+ // ─────────────────────────────────────────────────────────────
+ // RENDER: SUBTELA 'NOVO_ROMANEIO' (FORMULÁRIO TOUCH RÁPIDO)
+ // ─────────────────────────────────────────────────────────────
+ if (subTela === 'novo_romaneio') {
+ return (
+
+
+
+
+
+
+ ETAPA 2 — EXPEDIÇÃO
+
+ + Apontar Embarque & Romaneio +
++ Carregue caminhões com as peças prontas no pátio +
+
+ {/* Opção 1: Criar Novo Romaneio */}
+
+
+ {/* Opção 2: Romaneios em Aberto */}
+
+
+
+
+
+
+ );
+ }
+
+ // ─────────────────────────────────────────────────────────────
+ // RENDER: SUBTELA 'SELECIONAR_ROMANEIO'
+ // ─────────────────────────────────────────────────────────────
+ if (subTela === 'selecionar_romaneio') {
+ return (
+
+
+ NOVO CARREGAMENTO
+
+
+
+ + Dados do Veículo & Frete +
+
+ {/* Nome / Placa do Motorista */}
+
+
+
+
+
+
+ {/* Pílulas Touch: Tipo de Transporte */}
+
+
+
+
+ setNomeMotorista(e.target.value)}
+ placeholder="Ex: João Silva / Placa ABC-1234"
+ className="h-14 pl-11 bg-slate-800/90 border-slate-700 text-slate-100 text-base font-medium rounded-2xl"
+ />
+
+
+
+
+ {/* Pílulas Touch: Tipo de Frete */}
+
+ {[
+ { id: 'caminhao_pequeno', label: 'Caminhão 3/4' },
+ { id: 'caminhao_trucado', label: 'Toco / Trucado' },
+ { id: 'caminhao_munck', label: 'Munck' },
+ { id: 'carreta_12m', label: 'Carreta 12m/15m' },
+ ].map((tipo) => (
+
+ ))}
+
+
+
+
+
+ {[
+ { id: 'proprio', label: 'Frota Própria' },
+ { id: 'terceiros', label: 'Terceirizado' },
+ ].map((f) => (
+
+ ))}
+
+
+
+
+
+
+
+
+ );
+ }
+
+ // ─────────────────────────────────────────────────────────────
+ // RENDER: SUBTELA 'CARREGANDO_PECAS' (CARGA DE PEÇAS NO CAMINHÃO)
+ // ─────────────────────────────────────────────────────────────
+ if (subTela === 'carregando_pecas' && romaneioAtivo) {
+ return (
+
+
+ CONTINUAR CARGA
+
+
+
+ + Selecione o Romaneio +
+
+ {loadingRomaneios ? (
+
+
+
+
+
+ Buscando romaneios abertos...
+
+ ) : romaneios.length === 0 ? (
+
+
+ ) : (
+ romaneios.map((r) => (
+
+ ))
+ )}
+ Nenhum romaneio aberto
++ Crie um novo romaneio para iniciar a expedição +
+
+ {/* Banner do Romaneio Ativo */}
+
+ );
+ }
+
+ return null;
+};
diff --git a/src/pages/smart/components/SmartHeader.tsx b/src/pages/smart/components/SmartHeader.tsx
new file mode 100644
index 0000000..c8d4dfd
--- /dev/null
+++ b/src/pages/smart/components/SmartHeader.tsx
@@ -0,0 +1,141 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Building2, Volume2, VolumeX, LogOut, ArrowLeft } from 'lucide-react';
+import { useAuth } from '@/hooks/useAuth';
+import { smartAudio } from '@/utils/smartAudio';
+import { Button } from '@/components/ui/button';
+
+interface SmartHeaderProps {
+ titulo?: string;
+ subtitulo?: string;
+ mostrarVoltar?: boolean;
+ onVoltar?: () => void;
+}
+
+export const SmartHeader: React.FC
+
+
+ {/* Modal/Seção de Quantidade para o Item Selecionado */}
+ {pecaEmbarque ? (
+
+
+
+
+
+ CAMINHÃO ATIVO
+
+
+ {romaneioAtivo.numero_romaneio}
+
+
+
+ Motorista: {romaneioAtivo.nome_motorista} | Peso:{' '}
+
+ {(romaneioAtivo.peso_total_romaneio || 0).toLocaleString('pt-BR')} kg
+
+
+
+
+ ) : null}
+
+ {/* Lista de Peças Prontas para Embarcar */}
+
+
+ {pecaEmbarque.marca}
+
+
+ Saldo: {pecaEmbarque.saldoDisponivel} un
+
+
+
+
+
+
+
+ {qtdEmbarcar}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Botão Finalizador do Romaneio */}
+
+ Peças com Saldo para Embarque
+
+
+ {loadingPecas ? (
+
+
+ Carregando peças prontas...
+
+ ) : pecasProntas.filter((p) => p.saldoDisponivel > 0).length === 0 ? (
+
+
+ ) : (
+ pecasProntas
+ .filter((p) => p.saldoDisponivel > 0)
+ .map((p) => (
+ + Nenhuma peça com saldo de embarque +
++ Todas as peças prontas já foram embarcadas em romaneios anteriores +
+
+
+ ))
+ )}
+
+
+
+
+
+ {p.marca}
+
+ {p.etapa_fase || 'Estrutural'}
+
+
+
+ Saldo p/ Embarque:{' '}
+ {p.saldoDisponivel} un
+
+
+
+
+
+
+
+ {/* Lado Esquerdo: Botão Voltar ou Logo/Status */}
+
+
+ {mostrarVoltar && onVoltar ? (
+
+ ) : (
+
+
+ {/* Lado Direito: Ações de Controle e Comutação */}
+
+
+
+
+
+
+ )}
+
+ {mostrarVoltar && (
+
+
+ + {titulo} +
+ {subtitulo && ( ++ {subtitulo} +
+ )} +
+
+ )}
+ + {titulo} +
+ {subtitulo && ( ++ {subtitulo} +
+ )} +
+ {/* Controle de Som / Áudio */}
+
+
+ {/* BOTÃO CRUCIAL DE COMUTAÇÃO: VOLTAR AO MODO COMPLETO */}
+
+
+ {/* Botão de Logout */}
+
+
+
+ {/* Barra de Contexto da Obra */}
+
+ );
+};
diff --git a/src/pages/smart/components/SmartMontagemFlow.tsx b/src/pages/smart/components/SmartMontagemFlow.tsx
new file mode 100644
index 0000000..fe6f141
--- /dev/null
+++ b/src/pages/smart/components/SmartMontagemFlow.tsx
@@ -0,0 +1,446 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import {
+ PackageCheck,
+ Building2,
+ Check,
+ RotateCcw,
+ Layers,
+ ChevronRight,
+ AlertCircle
+} from 'lucide-react';
+import { OFAtiva } from '@/hooks/useOFsAtivas';
+import { useAuth } from '@/hooks/useAuth';
+import { supabase } from '@/integrations/supabase/client';
+import { smartAudio } from '@/utils/smartAudio';
+import { Button } from '@/components/ui/button';
+import { toast } from 'sonner';
+
+interface SmartMontagemFlowProps {
+ obra: OFAtiva;
+ onVoltarHub: () => void;
+ onApontamentoMontagem?: () => void;
+}
+
+interface ItemMontagem {
+ marca: string;
+ descricao?: string;
+ peso_unitario?: number;
+ quantidade_expedida: number;
+ quantidade_ja_apontada: number;
+ saldo_disponivel: number;
+}
+
+export const SmartMontagemFlow: React.FC
+
+
+ {/* Grade dos 4 Botões Principais Gigantes */}
+
+
+ OBRA ATIVA
+
+
+
+
+ OF {obra.of_number} — {obra.cliente || 'Obra Industrial'}
+
+
+ {/* BOTÃO 1: PRODUÇÃO */}
+
+
+ {/* BOTÃO 2: EMBARQUE (ROMANEIO) */}
+
+
+ {/* BOTÃO 3: MONTAGEM (OBRA) */}
+
+
+ {/* BOTÃO 4: CONSULTAR PEÇAS & RELATÓRIOS */}
+
+
+
+ {/* Card Informativo de Produção do Operador Hoje */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {producaoHoje.totalPecas}
+
+ Peças Apontadas
+
+
+
+ {producaoHoje.totalKg.toLocaleString('pt-BR', { maximumFractionDigits: 1 })}{' '}
+ kg
+
+ Peso Total
+
+ {/* Resumo da Peça */}
+
+ );
+ }
+
+ // ─────────────────────────────────────────────────────────────
+ // RENDER: LISTA DE PEÇAS DISPONÍVEIS NA OBRA
+ // ─────────────────────────────────────────────────────────────
+ return (
+
+
+
+ {/* Display da Quantidade */}
+
+
+ {itemSelecionado.marca}
+
+
+ Montagem em Obra
+
+
+
+ {itemSelecionado.descricao || 'Peça Estrutural'}
+
+
+ Recebidas no Canteiro: {itemSelecionado.quantidade_expedida} un
+
+ Disponíveis p/ Montar: {saldo} un
+
+
+
+
+ Quantidade Montada Agora
+
+
+
+ {/* Teclado Rápido */}
+
+
+
+
+ {qtdApontar}
+
+
+
+
+
+
+
+
+
+
+ {/* Confirmação */}
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/pages/smart/components/SmartObraSelector.tsx b/src/pages/smart/components/SmartObraSelector.tsx
new file mode 100644
index 0000000..cf0b18e
--- /dev/null
+++ b/src/pages/smart/components/SmartObraSelector.tsx
@@ -0,0 +1,124 @@
+import React, { useState, useMemo } from 'react';
+import { Search, HardHat, Building, ChevronRight, X, AlertCircle } from 'lucide-react';
+import { useOFsAtivas, OFAtiva } from '@/hooks/useOFsAtivas';
+import { smartAudio } from '@/utils/smartAudio';
+import { Input } from '@/components/ui/input';
+
+interface SmartObraSelectorProps {
+ onSelectObra: (of: OFAtiva) => void;
+}
+
+export const SmartObraSelector: React.FC
+
+ ETAPA 3 — CANTEIRO DE OBRAS
+
+
+
+ + Apontar Peças Montadas +
++ Peças entregues no canteiro aguardando fixação/montagem +
+
+ {loading ? (
+
+
+
+
+
+ Consultando entregas no canteiro...
+
+ ) : itens.length === 0 ? (
+
+
+ ) : (
+ itens.map((item) => {
+ const concluida = item.saldo_disponivel <= 0;
+ return (
+ Nenhuma peça recebida na obra
++ É necessário gerar e enviar romaneios de fábrica antes de apontar montagem +
+
+
+ );
+ })
+ )}
+
+
+
+
+
+ {item.marca}
+
+
+
+
+ {item.descricao || 'Peça Estrutural'}
+
+
+
+
+ Entregues: {item.quantidade_expedida}
+
+ {concluida ? (
+
+
+
+
+
+ {/* Título de Instrução Touch */}
+
+ );
+};
diff --git a/src/pages/smart/components/SmartProducaoFlow.tsx b/src/pages/smart/components/SmartProducaoFlow.tsx
new file mode 100644
index 0000000..1f7c46f
--- /dev/null
+++ b/src/pages/smart/components/SmartProducaoFlow.tsx
@@ -0,0 +1,705 @@
+import React, { useState, useMemo } from 'react';
+import {
+ Scissors,
+ Ruler,
+ Puzzle,
+ Zap,
+ Paintbrush,
+ ShieldAlert,
+ Check,
+ Layers,
+ Plus,
+ RotateCcw,
+ AlertTriangle,
+ ChevronRight,
+ Filter
+} from 'lucide-react';
+import { OFAtiva } from '@/hooks/useOFsAtivas';
+import { useProcessosFabricacao, ProcessoFabricacao } from '@/hooks/useProcessosFabricacao';
+import { useAuth } from '@/hooks/useAuth';
+import { supabase } from '@/integrations/supabase/client';
+import { smartAudio } from '@/utils/smartAudio';
+import { Button } from '@/components/ui/button';
+import { toast } from 'sonner';
+
+interface SmartProducaoFlowProps {
+ obra: OFAtiva;
+ onApontamentoRealizado: (pecasCount: number, pesoKg: number) => void;
+ onVoltarHub: () => void;
+}
+
+interface PecaData {
+ id: string;
+ marca: string;
+ descricao: string;
+ etapa_fase: string;
+ quantidade: number;
+ peso_unitario: number;
+ perfil_principal?: string;
+}
+
+interface ApontamentoItem {
+ peca_id: string;
+ processo_id: string;
+ quantidade_produzida: number;
+}
+
+export const SmartProducaoFlow: React.FC
+
+
+ {/* Campo de Busca Grande para Touch */}
+
+
+ + Selecione a Obra / OF +
++ Escolha a obra em que você está operando hoje +
+
+
+
+ {/* Lista de Obras em Cards Touch */}
+
+
+ setBusca(e.target.value)}
+ placeholder="Buscar por OF ou Cliente..."
+ className="h-14 pl-11 pr-11 bg-slate-800/90 border-slate-700 text-slate-100 placeholder:text-slate-500 text-base font-medium rounded-2xl focus-visible:ring-amber-500 focus-visible:border-amber-500"
+ />
+ {busca && (
+
+ )}
+
+ {isLoading ? (
+
+
+
+ Carregando obras ativas...
+
+ ) : filteredOFs.length === 0 ? (
+
+
+ ) : (
+ filteredOFs.map((of) => (
+
+ ))
+ )}
+ Nenhuma obra encontrada
++ {busca ? 'Tente buscar com outro termo' : 'Nenhuma ordem de fabricação ativa no momento'} +
+
+
+ );
+ }
+
+ // ─────────────────────────────────────────────────────────────
+ // RENDER: ETAPA 1.2 — SELEÇÃO DE FASE / SUBCONJUNTO
+ // ─────────────────────────────────────────────────────────────
+ if (etapaAtual === 'fase') {
+ return (
+
+
+ ETAPA 1.1 — FABRICAÇÃO
+
+
+
+ + Qual é o seu Processo? +
++ Selecione o posto de trabalho em que você está operando +
+
+ {loadingProcessos ? (
+
+
+
+
+
+ Carregando etapas...
+
+ ) : processos.length === 0 ? (
+ // Fallback com processos industriais padrões caso a tabela esteja vazia
+ [
+ { id: '1', nome: 'Corte', ordem: 1 },
+ { id: '2', nome: 'Dobra / Furação', ordem: 2 },
+ { id: '3', nome: 'Montagem', ordem: 3 },
+ { id: '4', nome: 'Solda', ordem: 4 },
+ { id: '5', nome: 'Pintura', ordem: 5 },
+ { id: '6', nome: 'Galvanização', ordem: 6 },
+ ].map((p) => (
+
+ ))
+ ) : (
+ processos.map((proc) => (
+
+ ))
+ )}
+
+ {/* Breadcrumb de Processo */}
+
+ );
+ }
+
+ // ─────────────────────────────────────────────────────────────
+ // RENDER: ETAPA 1.3 — LISTA DE PEÇAS (FAST LOOP / STICKY CONTEXT)
+ // ─────────────────────────────────────────────────────────────
+ if (etapaAtual === 'pecas') {
+ return (
+
+
+
+
+ {getIconeProcesso(processoSelecionado?.nome || '')}
+
+ PROCESSO: {processoSelecionado?.nome}
+
+
+
+
+
+ ETAPA 1.2 — SUBCONJUNTO
+
+
+
+ + Qual é a Fase das Peças? +
+
+ {fasesDisponiveis.map((fase) => {
+ const countFase = pecas.filter((p) => (p.etapa_fase || 'Geral').trim() === fase).length;
+ return (
+
+ );
+ })}
+
+
+
+
+ {/* Sticky Context: Breadcrumbs Interativos no Topo */}
+
+ );
+ }
+
+ // ─────────────────────────────────────────────────────────────
+ // RENDER: ETAPA 1.4 — APONTAMENTO DA QUANTIDADE (TECLADO RÁPIDO)
+ // ─────────────────────────────────────────────────────────────
+ if (etapaAtual === 'quantidade' && pecaSelecionada && processoSelecionado) {
+ const key = `${pecaSelecionada.id}_${processoSelecionado.id}`;
+ const jaProduzido = mapaProducao.get(key) || 0;
+ const saldoPendente = Math.max(0, pecaSelecionada.quantidade - jaProduzido);
+
+ const somarQtd = (valor: number) => {
+ smartAudio.playClick();
+ setQtdApontar((prev) => {
+ const nova = prev + valor;
+ return saldoPendente > 0 ? Math.min(saldoPendente, nova) : nova;
+ });
+ };
+
+ const definirTodas = () => {
+ smartAudio.playClick();
+ setQtdApontar(saldoPendente > 0 ? saldoPendente : 1);
+ };
+
+ const zerar = () => {
+ smartAudio.playClick();
+ setQtdApontar(1);
+ };
+
+ return (
+
+
+
+ {/* Lista de Peças */}
+
+
+
+
+
+
+
+ {pecasComSaldo.length} itens
+
+
+ {carregandoDados ? (
+
+
+
+
+
+ Carregando peças...
+
+ ) : pecasComSaldo.length === 0 ? (
+
+
+ ) : (
+ pecasComSaldo.map((item) => {
+ const concluida = item.saldo <= 0;
+ return (
+ Nenhuma peça nesta fase
++ Selecione outra fase ou processo para apontar +
+
+
+ );
+ })
+ )}
+
+
+
+ {/* Barra de Progresso Visual da Peça */}
+
+
+
+
+
+ {item.marca}
+
+ {item.perfil_principal && (
+
+ {item.perfil_principal}
+
+ )}
+
+
+ {item.descricao || 'Peça Estrutural'}
+
+
+
+ Total: {item.quantidade}
+ {concluida ? (
+
+
+
+
+
+ {/* Botão Gigante de Ação de Apontar */}
+
+
+
+
+ {/* Resumo da Peça no Topo */}
+
+ );
+ }
+
+ return null;
+};
diff --git a/src/utils/smartAudio.ts b/src/utils/smartAudio.ts
new file mode 100644
index 0000000..7f1db70
--- /dev/null
+++ b/src/utils/smartAudio.ts
@@ -0,0 +1,177 @@
+// ============================================================================
+// Utilitário de Feedback Sonoro (Web Audio API) e Tátil para o Modo Smart
+// Funciona 100% offline, sem carregar arquivos de áudio externos pesados.
+// ============================================================================
+
+class SmartAudioManager {
+ private audioCtx: AudioContext | null = null;
+ private soundEnabled: boolean = true;
+
+ constructor() {
+ // Carregar preferência salva
+ try {
+ const saved = localStorage.getItem('tracksteel_smart_sound');
+ if (saved !== null) {
+ this.soundEnabled = saved === 'true';
+ }
+ } catch {
+ this.soundEnabled = true;
+ }
+ }
+
+ private getContext(): AudioContext | null {
+ try {
+ if (!this.audioCtx) {
+ const AudioContextClass = window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext;
+ if (AudioContextClass) {
+ this.audioCtx = new AudioContextClass();
+ }
+ }
+ if (this.audioCtx && this.audioCtx.state === 'suspended') {
+ this.audioCtx.resume();
+ }
+ return this.audioCtx;
+ } catch (e) {
+ console.warn('Web Audio API não suportada neste dispositivo', e);
+ return null;
+ }
+ }
+
+ public isSoundEnabled(): boolean {
+ return this.soundEnabled;
+ }
+
+ public setSoundEnabled(enabled: boolean): void {
+ this.soundEnabled = enabled;
+ try {
+ localStorage.setItem('tracksteel_smart_sound', String(enabled));
+ } catch {
+ // ignore
+ }
+ }
+
+ public toggleSound(): boolean {
+ const newState = !this.soundEnabled;
+ this.setSoundEnabled(newState);
+ if (newState) {
+ this.playClick();
+ }
+ return newState;
+ }
+
+ /**
+ * Bip de Sucesso (Apontamento Concluído)
+ * Frequência harmônica dupla suave e ascendente (587Hz -> 880Hz, 120ms)
+ */
+ public playSuccess(): void {
+ this.vibrate([70, 40, 70]);
+ if (!this.soundEnabled) return;
+
+ const ctx = this.getContext();
+ if (!ctx) return;
+
+ try {
+ const osc = ctx.createOscillator();
+ const gain = ctx.createGain();
+
+ osc.type = 'sine';
+ const now = ctx.currentTime;
+
+ // Inicia em Ré5 (587Hz) e sobe para Lá5 (880Hz)
+ osc.frequency.setValueAtTime(587.33, now);
+ osc.frequency.exponentialRampToValueAtTime(880, now + 0.08);
+
+ // Fade out suave para evitar estalo
+ gain.gain.setValueAtTime(0.18, now);
+ gain.gain.exponentialRampToValueAtTime(0.001, now + 0.13);
+
+ osc.connect(gain);
+ gain.connect(ctx.destination);
+
+ osc.start(now);
+ osc.stop(now + 0.14);
+ } catch (e) {
+ console.warn('Erro ao tocar som de sucesso:', e);
+ }
+ }
+
+ /**
+ * Bip de Alerta ou Erro (Saldo insuficiente, conflito)
+ * Frequência grave de aviso (220Hz, 180ms)
+ */
+ public playAlert(): void {
+ this.vibrate([120, 80, 120]);
+ if (!this.soundEnabled) return;
+
+ const ctx = this.getContext();
+ if (!ctx) return;
+
+ try {
+ const osc = ctx.createOscillator();
+ const gain = ctx.createGain();
+
+ osc.type = 'triangle';
+ const now = ctx.currentTime;
+
+ osc.frequency.setValueAtTime(220, now);
+ osc.frequency.linearRampToValueAtTime(180, now + 0.18);
+
+ gain.gain.setValueAtTime(0.2, now);
+ gain.gain.exponentialRampToValueAtTime(0.001, now + 0.19);
+
+ osc.connect(gain);
+ gain.connect(ctx.destination);
+
+ osc.start(now);
+ osc.stop(now + 0.2);
+ } catch (e) {
+ console.warn('Erro ao tocar som de alerta:', e);
+ }
+ }
+
+ /**
+ * Clique sonoro rápido para botões touch
+ */
+ public playClick(): void {
+ this.vibrate(30);
+ if (!this.soundEnabled) return;
+
+ const ctx = this.getContext();
+ if (!ctx) return;
+
+ try {
+ const osc = ctx.createOscillator();
+ const gain = ctx.createGain();
+
+ osc.type = 'sine';
+ const now = ctx.currentTime;
+
+ osc.frequency.setValueAtTime(520, now);
+ gain.gain.setValueAtTime(0.08, now);
+ gain.gain.exponentialRampToValueAtTime(0.001, now + 0.04);
+
+ osc.connect(gain);
+ gain.connect(ctx.destination);
+
+ osc.start(now);
+ osc.stop(now + 0.05);
+ } catch (e) {
+ // ignore
+ }
+ }
+
+ /**
+ * Vibração Háptica para smartphones e tablets
+ */
+ public vibrate(pattern: number | number[]): void {
+ try {
+ if (typeof window !== 'undefined' && 'vibrate' in navigator) {
+ navigator.vibrate(pattern);
+ }
+ } catch {
+ // Navegadores sem suporte a vibração
+ }
+ }
+}
+
+export const smartAudio = new SmartAudioManager();
+
+
+ {/* Display da Quantidade Selecionada */}
+
+
+ {pecaSelecionada.marca}
+
+
+ {processoSelecionado.nome}
+
+
+
+ {pecaSelecionada.descricao}
+
+
+ Total da Peça: {pecaSelecionada.quantidade} un
+
+ Saldo Pendente: {saldoPendente} un
+
+
+
+
+ Quantidade a Apontar Agora
+
+
+
+ {/* Teclado de Ações Rápidas (Botões Gigantes) */}
+
+
+
+
+ {qtdApontar}
+
+
+
+
+
+
+
+
+
+
+ {/* Botão Gigante de Confirmação com Feedback Imediato */}
+
+
+
+
+
+