no-image

+ Data +	+ Dia +	+ Capacidade +	+ Carga Atual +	Status
+ {d.date} +	+ {d.day} +	+ {d.cap} Ton +	+ + + {d.sales.toFixed(3)} Ton + + + 85 + ? "bg-orange-500" + : "bg-emerald-500" + }`} + style={{ + width: `${Math.min(occupancy, 100)}%`, + }} + > + + +	+ + + {d.available === "Sim" + ? "• Disponível" + : "• Esgotado"} + + {!isFull && ( + + )} + +

+ Loja +	+ Nome da Loja +	+ Entrega +	+ Estoque +	+ Pertence +	+ Bloq +	+ Transf +
+ Nenhuma filial encontrada +
+ {stock.store} +	+ {stock.storeName} +	+ +	+ {formatNumber(stock.quantity)} +	+ +	+ {stock.blocked \|\| "0"} +	+ {stock.transfer \|\| 0} +

+ {h} +
+ {item.productId} +	+ {item.description} +	+ {item.package} +	+ {item.color \|\| "-"} +	+ {item.local} +	+ {formatCurrency(item.price)} +	+ {item.quantity.toFixed(3)} +	+ {formatCurrency(item.subTotal)} +

+ {/* Overlay */} +

+ + {/* Modal */} +

+ {/* Header */} +

+ {product.code} - {product.name} +

+ +

+ + {/* Content */} +

+ Selecione a loja de estoque e forma de entrega +

+ + {/* LOCAL DE ESTOQUE */} +

+ + LOCAL DE ESTOQUE + + {loading ? ( +

+ + Carregando lojas... + +

+ ) : stocks.length > 0 ? ( + { + setSelectedStore(value); + if (errors.stockStore) { + setErrors((prev) => ({ ...prev, stockStore: undefined })); + } + }} + placeholder="Selecione a loja..." + label="" + className="w-full" + /> + ) : ( +

+ Nenhuma loja de estoque disponível +

+ )} + {errors.stockStore && ( +

+ {errors.stockStore} +

+ )} +

+ + {/* TIPO DE ENTREGA */} +

+ + TIPO DE ENTREGA + +

+ {deliveryTypes.map((dt) => ( + + { + setDeliveryType(e.target.value); + if (errors.deliveryType) { + setErrors((prev) => ({ + ...prev, + deliveryType: undefined, + })); + } + }} + className="w-4 h-4 text-orange-500 border-slate-300 focus:ring-orange-500 focus:ring-2 cursor-pointer" + /> + + {dt.description} + + + ))} +

+ {errors.deliveryType && ( +

+ {errors.deliveryType} +

+ )} +

+ Informe a forma de entrega do produto +

+ + {/* Actions */} +

+ + +

+ ); +}; + +export default ProductStoreDeliveryModal; + diff --git a/components/ReceivePixDialog.tsx b/components/ReceivePixDialog.tsx new file mode 100644 index 0000000..691b8e6 --- /dev/null +++ b/components/ReceivePixDialog.tsx @@ -0,0 +1,241 @@ +import React, { useState, useEffect } from "react"; +import QRCode from "react-qr-code"; +import { formatCurrency } from "../utils/formatters"; +import { Input } from "./ui/input"; +import { Label } from "./ui/label"; + +interface ReceivePixDialogProps { + isOpen: boolean; + onClose: () => void; + onConfirm: (value: number) => void; + orderId: number; + customerName: string; + orderValue: number; + showQrCode: boolean; + qrCodeValue?: string; + pixValue?: number; + processing?: boolean; +} + +const ReceivePixDialog: React.FC = ({ + isOpen, + onClose, + onConfirm, + orderId, + customerName, + orderValue, + showQrCode, + qrCodeValue = "", + pixValue = 0, + processing = false, +}) => { + const [inputValue, setInputValue] = useState(""); + const [isModalAnimating, setIsModalAnimating] = useState(false); + const [shouldRenderModal, setShouldRenderModal] = useState(false); + + useEffect(() => { + if (isOpen) { + setShouldRenderModal(true); + setTimeout(() => setIsModalAnimating(true), 10); + if (!showQrCode) { + setInputValue(orderValue.toFixed(2)); + } + } else { + setIsModalAnimating(false); + const timer = setTimeout(() => setShouldRenderModal(false), 300); + return () => clearTimeout(timer); + } + }, [isOpen, showQrCode, orderValue]); + + const handleConfirm = () => { + const value = parseFloat(inputValue); + if (isNaN(value) || value <= 0) { + return; + } + onConfirm(value); + }; + + const handleCopyQrCode = () => { + if (qrCodeValue) { + navigator.clipboard.writeText(qrCodeValue); + } + }; + + if (!shouldRenderModal) return null; + + return ( +

+ {/* Overlay */} +

+ + {/* Dialog */} +

+ {/* Header */} +

+ +

Recebimento via PIX

+ {showQrCode ? "QR Code gerado" : "Informe o valor"} +

+ +

+ + {/* Content */} +

+ {!showQrCode ? ( +

+ Informe o valor a ser recebido via PIX + setInputValue(e.target.value)} + placeholder="0.00" + className="mt-2" + /> +

+ Valor máximo: {formatCurrency(orderValue)} +

+ ) : ( +

+ {/* Informações do pedido */} +

+ Pedido +

{orderId}

+ Cliente +

{customerName}

+ Valor +

+ {formatCurrency(pixValue)} +

+ + {/* QR Code */} +

+ +

+ + {/* Código PIX */} +

+ + Código PIX (copiar e colar) + +

+ (e.target as HTMLInputElement).select()} + className="font-mono text-xs" + /> + +

+ )} +

+ + {/* Actions */} +

+ {!showQrCode ? ( + <> + + + + ) : ( + + )} +

+ ); +}; + +export default ReceivePixDialog; + diff --git a/components/RelatedProductCard.tsx b/components/RelatedProductCard.tsx new file mode 100644 index 0000000..419bd3c --- /dev/null +++ b/components/RelatedProductCard.tsx @@ -0,0 +1,75 @@ +import React, { useState } from "react"; +import { Product } from "../types"; +import NoImagePlaceholder from "./NoImagePlaceholder"; + +interface RelatedProductCardProps { + product: Product; + onAddToCart: (product: Product) => void; + onClick?: () => void; +} + +/** + * RelatedProductCard Component + * Componente reutilizável para exibir cards de produtos relacionados (Compre Junto / Similares) + * + * @param product - Dados do produto + * @param onAddToCart - Callback para adicionar ao carrinho + * @param onClick - Callback quando o card é clicado (opcional) + */ +const RelatedProductCard: React.FC = ({ + product, + onAddToCart, + onClick, +}) => { + const [imageError, setImageError] = useState(false); + + return ( +

+ {product.image && !product.image.includes("placeholder") && !imageError ? ( + {product.name}

setImageError(true)} + /> + ) : ( + + )} +

+ {product.name} +

+ R${" "} + {product.price.toLocaleString("pt-BR", { + minimumFractionDigits: 2, + maximumFractionDigits: 2, + })} +

+ +

+ ); +}; + +export default RelatedProductCard; + + diff --git a/components/SearchInput.tsx b/components/SearchInput.tsx new file mode 100644 index 0000000..c10ae5d --- /dev/null +++ b/components/SearchInput.tsx @@ -0,0 +1,108 @@ +import React from "react"; + +interface SearchInputProps { + value: string; + onChange: (value: string) => void; + onSearch: () => void; + placeholder?: string; + loading?: boolean; + disabled?: boolean; + minLength?: number; +} + +/** + * SearchInput Component + * Componente reutilizável para campo de busca com botão de pesquisa + * + * @param value - Valor atual do input + * @param onChange - Callback quando o valor muda + * @param onSearch - Callback quando o botão de busca é clicado ou Enter é pressionado + * @param placeholder - Texto placeholder do input + * @param loading - Indica se está carregando + * @param disabled - Indica se está desabilitado + * @param minLength - Tamanho mínimo para habilitar a busca + */ +const SearchInput: React.FC = ({ + value, + onChange, + onSearch, + placeholder = "Ex: Cimento, Tijolo, Furadeira...", + loading = false, + disabled = false, + minLength = 3, +}) => { + const isValid = value.trim().length >= minLength; + + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === "Enter" && !loading && isValid) { + onSearch(); + } + }; + + return ( +

+ onChange(e.target.value)} + onKeyDown={handleKeyDown} + disabled={disabled || loading} + /> + + {value.trim().length > 0 && value.trim().length < minLength && ( +

+ Digite pelo menos {minLength} caracteres +

+ )} + +

+ ); +}; + +export default SearchInput; diff --git a/components/StatCard.tsx b/components/StatCard.tsx new file mode 100644 index 0000000..787b255 --- /dev/null +++ b/components/StatCard.tsx @@ -0,0 +1,43 @@ +import React from "react"; + +interface StatCardProps { + label: string; + value: string; + trend?: string; + color: string; +} + +const StatCard: React.FC = ({ + label, + value, + trend, + color, +}) => ( +

+ + {label} + + {trend && ( + + {trend} + + )} +

+ {value} +

+); + +export default StatCard; + + + diff --git a/components/StimulsoftViewer.tsx b/components/StimulsoftViewer.tsx new file mode 100644 index 0000000..157cf1b --- /dev/null +++ b/components/StimulsoftViewer.tsx @@ -0,0 +1,334 @@ +import React, { useEffect, useRef, useState } from "react"; + +interface StimulsoftViewerProps { + requestUrl: string; + action?: string; + width?: string; + height?: string; + onClose?: () => void; + orderId?: number; + model?: string; +} + +/** + * StimulsoftViewer Component + * Componente para renderizar o Stimulsoft Reports Viewer + * Baseado no componente stimulsoft-viewer-angular do portal Angular + * + * O componente usa a biblioteca Stimulsoft Reports.JS para processar o JSON + * retornado pelo servidor e renderizar o viewer + */ +const StimulsoftViewer: React.FC = ({ + requestUrl, + action, + width = "100%", + height = "800px", + onClose, + orderId, + model, +}) => { + const viewerRef = useRef(null); + const iframeRef = useRef(null); + const formRef = useRef(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + // Gerar ID único para o viewer (deve ser declarado antes do useEffect) + const viewerIdRef = useRef( + `stimulsoft-viewer-${Date.now()}-${Math.random().toString(36).substr(2, 9)}` + ); + const viewerId = viewerIdRef.current; + + // Construir a URL base (sem query params, pois vamos usar POST) + const baseUrl = action ? requestUrl.replace("{action}", action) : requestUrl; + const urlWithoutParams = baseUrl.split("?")[0]; + + useEffect(() => { + let isMounted = true; + + if (!viewerRef.current) return; + + // Limpar conteúdo anterior + viewerRef.current.innerHTML = ""; + + // Extrair parâmetros da URL original se não foram fornecidos via props + const urlParams = new URLSearchParams(baseUrl.split("?")[1] || ""); + const finalOrderId = orderId + ? String(orderId) + : urlParams.get("orderId") || ""; + const finalModel = model || urlParams.get("model") || "A"; + + // Criar iframe + const iframe = document.createElement("iframe"); + iframe.name = `stimulsoft-viewer-iframe-${Date.now()}`; + iframe.style.width = "100%"; + iframe.style.height = "100%"; + iframe.style.border = "none"; + iframe.style.borderRadius = "0 0 1.5rem 1.5rem"; + iframe.title = "Stimulsoft Viewer"; + iframe.allow = "fullscreen"; + + // Criar formulário que faz POST com multipart/form-data + // O componente Angular stimulsoft-viewer-angular faz POST com esses parâmetros + // O navegador vai criar o boundary automaticamente quando usamos multipart/form-data + const form = document.createElement("form"); + form.method = "POST"; + form.action = urlWithoutParams; + form.target = iframe.name; + form.setAttribute("enctype", "multipart/form-data"); + form.style.display = "none"; + + // Adicionar campos do formulário conforme a requisição funcional do Angular + const fields = { + orderId: finalOrderId, + model: finalModel, + stiweb_component: "Viewer", + stiweb_imagesScalingFactor: "1", + stiweb_action: "AngularViewerData", + }; + + // Log para debug + console.log("StimulsoftViewer - URL:", urlWithoutParams); + console.log("StimulsoftViewer - Campos:", fields); + + Object.entries(fields).forEach(([key, value]) => { + const input = document.createElement("input"); + input.type = "hidden"; + input.name = key; + input.value = String(value); + form.appendChild(input); + }); + + // Verificar se orderId está vazio (pode causar erro 500) + if (!finalOrderId) { + setError("Erro: orderId não foi fornecido."); + setLoading(false); + return; + } + + let loadTimeout: NodeJS.Timeout; + let errorDetected = false; + + const handleIframeLoad = () => { + if (isMounted && !errorDetected) { + // Verificar se houve erro no iframe (status 500, etc) + try { + const iframeDoc = + iframe.contentDocument || iframe.contentWindow?.document; + if (iframeDoc) { + const bodyText = + iframeDoc.body?.innerText || iframeDoc.body?.textContent || ""; + // Se o conteúdo contém indicadores de erro + if ( + bodyText.includes("500") || + bodyText.includes("Internal Server Error") || + bodyText.includes("Error") + ) { + errorDetected = true; + setError( + "Erro ao carregar o relatório. O servidor retornou um erro." + ); + setLoading(false); + return; + } + } + } catch (e) { + // CORS pode impedir acesso ao conteúdo do iframe, mas isso é normal + console.log( + "Não foi possível verificar conteúdo do iframe (pode ser CORS):", + e + ); + } + + clearTimeout(loadTimeout); + setLoading(false); + } + }; + + const handleIframeError = () => { + if (isMounted) { + errorDetected = true; + setError( + "Erro ao carregar o relatório. Verifique a URL e a conexão com o servidor." + ); + setLoading(false); + } + }; + + // Timeout para detectar se o iframe não carregou + loadTimeout = setTimeout(() => { + if (isMounted && loading) { + // Verificar se o iframe realmente carregou + try { + if (iframe.contentWindow && iframe.contentDocument) { + // Iframe carregou, mas pode ter demorado + handleIframeLoad(); + } else { + errorDetected = true; + setError("Timeout ao carregar o relatório. Verifique a conexão."); + setLoading(false); + } + } catch (e) { + // CORS pode impedir acesso, mas isso não significa erro + // Se passou muito tempo, pode ser um problema + errorDetected = true; + setError("Timeout ao carregar o relatório."); + setLoading(false); + } + } + }, 30000); // 30 segundos de timeout + + iframe.addEventListener("load", handleIframeLoad); + iframe.addEventListener("error", handleIframeError); + + // Adicionar iframe primeiro ao DOM e aguardar estar pronto + if (viewerRef.current) { + viewerRef.current.appendChild(iframe); + } + + formRef.current = form; + iframeRef.current = iframe; + + // Aguardar o iframe estar completamente carregado antes de submeter o formulário + const waitForIframeReady = () => { + if (!isMounted) return; + + // Verificar se o iframe está pronto + try { + // Tentar acessar o contentWindow para verificar se está pronto + if (iframe.contentWindow) { + // Iframe está pronto, adicionar formulário e submeter + // Adicionar formulário ao body do documento + document.body.appendChild(form); + + // Aguardar um pequeno delay antes de submeter + setTimeout(() => { + if (isMounted && formRef.current) { + try { + console.log("Submetendo formulário para:", urlWithoutParams); + formRef.current.submit(); + } catch (e) { + console.error("Erro ao submeter formulário:", e); + errorDetected = true; + setError("Erro ao enviar requisição ao servidor."); + setLoading(false); + } + } + }, 50); + } else { + // Iframe ainda não está pronto, tentar novamente + setTimeout(waitForIframeReady, 10); + } + } catch (e) { + // Erro ao acessar contentWindow (pode ser CORS), mas continuar mesmo assim + document.body.appendChild(form); + setTimeout(() => { + if (isMounted && formRef.current) { + try { + console.log("Submetendo formulário para:", urlWithoutParams); + formRef.current.submit(); + } catch (err) { + console.error("Erro ao submeter formulário:", err); + errorDetected = true; + setError("Erro ao enviar requisição ao servidor."); + setLoading(false); + } + } + }, 100); + } + }; + + // Aguardar um pouco antes de verificar se o iframe está pronto + setTimeout(waitForIframeReady, 50); + + return () => { + isMounted = false; + clearTimeout(loadTimeout); + if (iframeRef.current) { + iframeRef.current.removeEventListener("load", handleIframeLoad); + iframeRef.current.removeEventListener("error", handleIframeError); + } + // Remover formulário do body se ainda estiver lá + if (formRef.current && formRef.current.parentNode) { + formRef.current.parentNode.removeChild(formRef.current); + } + }; + }, [baseUrl, urlWithoutParams, orderId, model]); + + return ( +

+ {/*

{title}

+ Agendamento de Entrega: +

+ Capacidade Operacional +

+ {items.length} {items.length === 1 ? "Produto" : "Produtos"} +

+ {item.name} +

{finalTitle}

Novo Cliente

+ Editar Item do Pedido +

+ #{productDetail?.title || item.name} +

+ {label} +

Visualização da Imagem

+ Itens do pedido {orderId.toString()} +

+ {includeModelP ? "Selecione o modelo de orçamento" : "Selecione o modelo de pedido"} +

+ {p.name} +

+ Detalhes do Produto +

+ {productDetail?.title || product.name} +

+ Descrição +

+ Adicionar ao Carrinho +

+ Compre Junto +

+ Produtos Similares +

+ {product.name} +

+ {product.code} - {product.name} +

+ Selecione a loja de estoque e forma de entrega +

Recebimento via PIX

+ {product.name} +