From 48a54a616efe0087ce7ab0c67d858c0dad5e48c6 Mon Sep 17 00:00:00 2001 From: Tiago Yamamoto Date: Sat, 7 Mar 2026 07:56:20 -0600 Subject: [PATCH] refactor(frontend): type legacy payments and catalog flows --- frontend/src/app/pagamentos/page.tsx | 27 ++- .../src/components/CatalogoProdutosList.tsx | 82 +++----- frontend/src/components/PagamentoForm.tsx | 112 ++++++----- frontend/src/components/PagamentoList.tsx | 45 ++--- frontend/src/hooks/useCatalogoProdutos.ts | 177 ++++++++---------- frontend/src/hooks/usePagamentos.ts | 64 +++---- frontend/src/services/pagamentoService.ts | 34 ++-- frontend/src/types/legacyEntities.ts | 23 +++ 8 files changed, 279 insertions(+), 285 deletions(-) diff --git a/frontend/src/app/pagamentos/page.tsx b/frontend/src/app/pagamentos/page.tsx index 664b533..fdca528 100644 --- a/frontend/src/app/pagamentos/page.tsx +++ b/frontend/src/app/pagamentos/page.tsx @@ -1,4 +1,3 @@ -// @ts-nocheck 'use client'; import { useEffect, useState } from 'react'; @@ -11,11 +10,12 @@ import PagamentoForm from '@/components/PagamentoForm'; import PagamentoList from '@/components/PagamentoList'; import { usePagamentos } from '@/hooks/usePagamentos'; import { PagamentoData } from '@/services/pagamentoService'; +import { PagamentoDocument } from '@/types/legacyEntities'; const GestaoPagamentos = () => { const router = useRouter(); const [user, setUser] = useState | null>(null); - const [editing, setEditing] = useState(null); + const [editing, setEditing] = useState(null); const [activeTab, setActiveTab] = useState<'lista' | 'cadastro'>('lista'); const [searchTerm, setSearchTerm] = useState(''); @@ -41,7 +41,7 @@ const GestaoPagamentos = () => { await listarPagamentos(1, searchTerm); } } catch (error) { - console.error('Usuário não autenticado:', error); + console.error('Usurio no autenticado:', error); router.push('/'); } }; @@ -57,17 +57,17 @@ const GestaoPagamentos = () => { setActiveTab('lista'); } return success; - } else { - const success = await cadastrarPagamento(formData); - if (success) { - setTimeout(() => setActiveTab('lista'), 2000); - } - return success; } + + const success = await cadastrarPagamento(formData); + if (success) { + setTimeout(() => setActiveTab('lista'), 2000); + } + return success; }; - const handleEdit = (pag: Models.Document) => { - setEditing(pag); + const handleEdit = (pagamento: PagamentoDocument) => { + setEditing(pagamento); setActiveTab('cadastro'); }; @@ -99,7 +99,7 @@ const GestaoPagamentos = () => {
-

Verificando autenticação...

+

Verificando autenticao...

); @@ -109,7 +109,7 @@ const GestaoPagamentos = () => {
@@ -178,4 +178,3 @@ const GestaoPagamentos = () => { }; export default GestaoPagamentos; - diff --git a/frontend/src/components/CatalogoProdutosList.tsx b/frontend/src/components/CatalogoProdutosList.tsx index f7459cc..17b1fd7 100644 --- a/frontend/src/components/CatalogoProdutosList.tsx +++ b/frontend/src/components/CatalogoProdutosList.tsx @@ -1,20 +1,20 @@ -import React from "react"; -import { Models } from "@/lib/appwrite"; -import TableActions from "./TableActions"; +import React from 'react'; +import TableActions from './TableActions'; +import { CatalogoProdutoDocument } from '@/types/legacyEntities'; interface CatalogoProdutosListProps { - produtos: Models.Document[]; + produtos: CatalogoProdutoDocument[]; loading: boolean; isChangingPage?: boolean; totalProdutos: number; currentPage: number; pageSize: number; - onEdit: (produto: Models.Document) => void; + onEdit: (produto: CatalogoProdutoDocument) => void; onDelete: (id: string) => void; - onView: (produto: Models.Document) => void; + onView: (produto: CatalogoProdutoDocument) => void; onPrevPage: () => void; onNextPage: () => void; - onRowClick?: (produto: Models.Document) => void; + onRowClick?: (produto: CatalogoProdutoDocument) => void; } const CatalogoProdutosList: React.FC = ({ @@ -42,7 +42,7 @@ const CatalogoProdutosList: React.FC = ({
- {isChangingPage ? "Carregando página..." : "Carregando produtos..."} + {isChangingPage ? 'Carregando pgina...' : 'Carregando produtos...'}
@@ -67,36 +67,17 @@ const CatalogoProdutosList: React.FC = ({ - - - - - - + + + + + + - {produtos.map((produto) => { - const produtoData = produto as any; - const catalogoProduto = produtoData["catalogo-produtos"]; - const nomeProduto = - produtoData.nome || - catalogoProduto?.nome || - produtoData.descricao || - catalogoProduto?.descricao || - "N/A"; + {produtos.map(produto => { + const nomeProduto = produto.nome || produto.descricao || 'N/A'; return ( = ({ onClick={() => onRowClick?.(produto)} > + + + - - -
- Nome do Produto - - Código Interno - - Código EAN - - Descrição - - Preço Atual - - Ações - Nome do ProdutoCdigo InternoCdigo EANDescrioPreo AtualAes
{nomeProduto}{produto['codigo-interno'] || 'N/A'}{produto['codigo-ean'] || 'N/A'}{produto.descricao || 'N/A'} - {produtoData["codigo-interno"] || catalogoProduto?.["codigo-interno"] || "N/A"} - - {produtoData["codigo-ean"] || catalogoProduto?.["codigo-ean"] || "N/A"} - - {produtoData.descricao || catalogoProduto?.descricao || "N/A"} - - {typeof produtoData["preco-atual"] === "number" - ? `R$ ${produtoData["preco-atual"].toFixed(2)}` - : "N/A"} + {typeof produto['preco-atual'] === 'number' ? `R$ ${produto['preco-atual'].toFixed(2)}` : 'N/A'} = ({ disabled={currentPage === 1} className={`px-3 py-1 rounded-md text-sm font-medium ${ currentPage === 1 - ? "bg-gray-100 text-gray-400 cursor-not-allowed" - : "bg-white text-gray-700 hover:bg-gray-50 border border-gray-300" + ? 'bg-gray-100 text-gray-400 cursor-not-allowed' + : 'bg-white text-gray-700 hover:bg-gray-50 border border-gray-300' }`} > Anterior - - Página {currentPage} de {totalPages} - + Pgina {currentPage} de {totalPages} @@ -171,4 +142,3 @@ const CatalogoProdutosList: React.FC = ({ }; export default CatalogoProdutosList; - diff --git a/frontend/src/components/PagamentoForm.tsx b/frontend/src/components/PagamentoForm.tsx index b15d80c..746e375 100644 --- a/frontend/src/components/PagamentoForm.tsx +++ b/frontend/src/components/PagamentoForm.tsx @@ -1,86 +1,112 @@ -import React, { useState, useEffect } from 'react'; -import { Models } from '@/lib/appwrite'; - -// Interface para dados do pagamento -interface PagamentoData { - pedidos: string; - status: 'pendente' | 'pago' | 'cancelado'; - metodo: 'pix' | 'cartao'; - valor: number; -} +import React, { useState, useEffect } from 'react'; +import type { PagamentoData } from '@/services/pagamentoService'; +import { PagamentoDocument } from '@/types/legacyEntities'; interface PagamentoFormProps { onSubmit: (data: PagamentoData) => Promise; onCancel?: () => void; - initialData?: PagamentoData | null; + initialData?: PagamentoDocument | null; loading?: boolean; } -const statusOptions = ['pendente', 'pago', 'cancelado']; -const metodoOptions = ['pix', 'cartao']; +const statusOptions: PagamentoData['status'][] = ['pendente', 'pago', 'cancelado']; +const metodoOptions: PagamentoData['metodo'][] = ['pix', 'cartao']; + +const normalizePedidos = (pedidos: PagamentoDocument['pedidos']): string[] => { + if (Array.isArray(pedidos)) { + return pedidos.map(item => String(item)); + } + if (pedidos && typeof pedidos === 'object') { + return pedidos.$id ? [pedidos.$id] : []; + } + if (typeof pedidos === 'string' && pedidos.trim()) { + return [pedidos.trim()]; + } + return []; +}; const PagamentoForm: React.FC = ({ onSubmit, onCancel, initialData, - loading = false + loading = false, }) => { const [formData, setFormData] = useState({ - pedidos: '', + pedidos: [], status: 'pendente', metodo: 'pix', - valor: 0 + valor: 0, }); + const [pedidoInput, setPedidoInput] = useState(''); const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null); useEffect(() => { if (initialData) { + const pedidos = normalizePedidos(initialData.pedidos); setFormData({ - pedidos: initialData.pedidos || '', + pedidos, status: initialData.status || 'pendente', metodo: initialData.metodo || 'pix', - valor: Number(initialData.valor) || 0 + valor: Number(initialData.valor) || 0, }); - } else { - setFormData({ pedidos: '', status: 'pendente', metodo: 'pix', valor: 0 }); + setPedidoInput(pedidos.join(', ')); + return; } + + setFormData({ pedidos: [], status: 'pendente', metodo: 'pix', valor: 0 }); + setPedidoInput(''); }, [initialData]); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); + const pedidos = pedidoInput + .split(',') + .map(item => item.trim()) + .filter(Boolean); - const success = await onSubmit(formData); + const success = await onSubmit({ ...formData, pedidos }); if (success) { setMessage({ type: 'success', - text: initialData ? '🔄 Pagamento atualizado com sucesso!' : '🎉 Pagamento cadastrado com sucesso!' + text: initialData ? 'Pagamento atualizado com sucesso!' : 'Pagamento cadastrado com sucesso!', }); if (!initialData) { - setFormData({ pedidos: '', status: 'pendente', metodo: 'pix', valor: 0 }); + setFormData({ pedidos: [], status: 'pendente', metodo: 'pix', valor: 0 }); + setPedidoInput(''); } setTimeout(() => setMessage(null), 3000); - } else { - setMessage({ - type: 'error', - text: initialData ? 'Erro ao atualizar pagamento' : 'Erro ao cadastrar pagamento' - }); + return; + } + + setMessage({ + type: 'error', + text: initialData ? 'Erro ao atualizar pagamento' : 'Erro ao cadastrar pagamento', + }); + }; + + const handleSelectChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData(prev => ({ ...prev, [name]: value })); + if (message) { + setMessage(null); } }; - const handleInputChange = (e: React.ChangeEvent) => { - const { name, value } = e.target; - setFormData((prev: PagamentoData) => ({ ...prev, [name]: name === 'valor' ? Number(value) : value })); - if (message) setMessage(null); + const handleValueChange = (e: React.ChangeEvent) => { + setFormData(prev => ({ ...prev, valor: Number(e.target.value) })); + if (message) { + setMessage(null); + } }; return (

- {initialData ? '✏️ Editar Pagamento' : 'Novo Pagamento'} + {initialData ? 'Editar Pagamento' : 'Novo Pagamento'}

{initialData ? 'Atualize os dados do pagamento.' : 'Cadastre um novo pagamento.'} @@ -105,12 +131,12 @@ const PagamentoForm: React.FC = ({ type="text" id="pedidos" name="pedidos" - value={formData.pedidos} - onChange={handleInputChange} + value={pedidoInput} + onChange={e => setPedidoInput(e.target.value)} required disabled={loading} className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed" - placeholder="ID do pedido" + placeholder="ID do pedido ou lista separada por vrgula" />

@@ -122,7 +148,7 @@ const PagamentoForm: React.FC = ({ id="status" name="status" value={formData.status} - onChange={handleInputChange} + onChange={handleSelectChange} className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed" disabled={loading} > @@ -134,13 +160,13 @@ const PagamentoForm: React.FC = ({