Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| dc20985524 | |||
| 98b8c009ed | |||
| d88759ed08 | |||
| 4218d9090f |
@@ -0,0 +1,89 @@
|
|||||||
|
import { createClient } from '@supabase/supabase-js';
|
||||||
|
|
||||||
|
const supabaseUrl = 'https://supabase.reifonas.cloud';
|
||||||
|
const supabaseKey = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJzdXBhYmFzZSIsImlhdCI6MTc3Mjk5NTUwMCwiZXhwIjo0OTI4NjY5MTAwLCJyb2xlIjoic2VydmljZV9yb2xlIn0._n2Kj2f29z1u0pOYUGqAr-1Xjt-xQpK9KDhhhGvOIro';
|
||||||
|
|
||||||
|
const sbERP = createClient(supabaseUrl, supabaseKey, { db: { schema: 'TS_ERP' } });
|
||||||
|
const sbPub = createClient(supabaseUrl, supabaseKey, { db: { schema: 'public' } });
|
||||||
|
|
||||||
|
async function del(table, col, val) {
|
||||||
|
if (!val) return;
|
||||||
|
let res = await sbERP.from(table).delete().eq(col, val);
|
||||||
|
if (res.error && res.error.message.includes("does not exist")) {
|
||||||
|
res = await sbPub.from(table).delete().eq(col, val);
|
||||||
|
}
|
||||||
|
if (res.error) console.log(` ❌ Erro em ${table}: ${res.error.message}`);
|
||||||
|
else console.log(` ✅ ${table} limpo.`);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function delIn(table, col, vals) {
|
||||||
|
if (!vals || vals.length === 0) return;
|
||||||
|
let res = await sbERP.from(table).delete().in(col, vals);
|
||||||
|
if (res.error && res.error.message.includes("does not exist")) {
|
||||||
|
res = await sbPub.from(table).delete().in(col, vals);
|
||||||
|
}
|
||||||
|
if (res.error) console.log(` ❌ Erro em ${table}: ${res.error.message}`);
|
||||||
|
else console.log(` ✅ ${table} limpo.`);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getOF(ofNumber) {
|
||||||
|
let res = await sbERP.from('ordens_fabricacao').select('id').eq('num_of', ofNumber).single();
|
||||||
|
if (res.error) {
|
||||||
|
res = await sbPub.from('ordens_fabricacao').select('id').eq('num_of', ofNumber).single();
|
||||||
|
}
|
||||||
|
return res.data ? res.data.id : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getPecas(ofNumber) {
|
||||||
|
let res = await sbERP.from('pecas').select('id').eq('of_number', ofNumber);
|
||||||
|
if (res.error) {
|
||||||
|
res = await sbPub.from('pecas').select('id').eq('of_number', ofNumber);
|
||||||
|
}
|
||||||
|
return res.data ? res.data.map(p => p.id) : [];
|
||||||
|
}
|
||||||
|
|
||||||
|
async function deleteOF(ofNumber) {
|
||||||
|
console.log(`\nIniciando EXCLUSÃO TOTAL da OF: ${ofNumber}`);
|
||||||
|
|
||||||
|
const ofId = await getOF(ofNumber);
|
||||||
|
const pecaIds = await getPecas(ofNumber);
|
||||||
|
|
||||||
|
console.log(` - ID da OF encontrado: ${ofId || 'Nenhum (já excluída?)'}`);
|
||||||
|
console.log(` - Total de peças encontradas: ${pecaIds.length}`);
|
||||||
|
|
||||||
|
// 1. Limpar dependências de peças
|
||||||
|
if (pecaIds.length > 0) {
|
||||||
|
await delIn('itens_romaneio_pecas', 'peca_id', pecaIds);
|
||||||
|
await delIn('itens_prioridade_fabricacao', 'peca_id', pecaIds);
|
||||||
|
await delIn('processos_pecas_datas', 'peca_id', pecaIds);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. Limpar dependências diretas de of_number
|
||||||
|
await del('logs_apontamentos_automaticos', 'of_number', ofNumber);
|
||||||
|
await del('romaneios_expedicao', 'of_number', ofNumber);
|
||||||
|
await del('apontamentos_producao', 'of_number', ofNumber);
|
||||||
|
await del('apontamentos_diario_recursos', 'of_number', ofNumber);
|
||||||
|
await del('prioridades_fabricacao', 'of_number', ofNumber);
|
||||||
|
|
||||||
|
// 3. Limpar cronogramas
|
||||||
|
if (ofId) {
|
||||||
|
await del('cronogramas_of', 'of_id', ofId);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 4. Excluir Peças
|
||||||
|
await del('pecas', 'of_number', ofNumber);
|
||||||
|
|
||||||
|
// 5. Excluir OF
|
||||||
|
await del('ordens_fabricacao', 'num_of', ofNumber);
|
||||||
|
|
||||||
|
console.log(`✅ Fim da rotina para a OF ${ofNumber}.\n`);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function run() {
|
||||||
|
const ofsToTest = ['B117', 'B114'];
|
||||||
|
for (const of of ofsToTest) {
|
||||||
|
await deleteOF(of);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
run();
|
||||||
@@ -6,11 +6,12 @@ import { Badge } from '@/components/ui/badge';
|
|||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
import { AlertTriangle, Calendar, Hash, TrendingUp, ExternalLink } from 'lucide-react';
|
import { AlertTriangle, Calendar, Hash, TrendingUp, ExternalLink } from 'lucide-react';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { InconsistenciaItem } from '@/hooks/useAuditoriaInconsistencias';
|
||||||
|
|
||||||
interface InconsistenciaDetalhesModalProps {
|
interface InconsistenciaDetalhesModalProps {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
onOpenChange: (open: boolean) => void;
|
onOpenChange: (open: boolean) => void;
|
||||||
inconsistencia: any;
|
inconsistencia: InconsistenciaItem | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const InconsistenciaDetalhesModal: React.FC<InconsistenciaDetalhesModalProps> = ({
|
export const InconsistenciaDetalhesModal: React.FC<InconsistenciaDetalhesModalProps> = ({
|
||||||
|
|||||||
@@ -17,8 +17,7 @@ import {
|
|||||||
Settings,
|
Settings,
|
||||||
Shield,
|
Shield,
|
||||||
UserCog,
|
UserCog,
|
||||||
Cog,
|
Cog
|
||||||
Globe
|
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { MenuItem, MenuGroup } from './types';
|
import { MenuItem, MenuGroup } from './types';
|
||||||
|
|
||||||
@@ -71,12 +70,6 @@ export const menuGroups: MenuGroup[] = [
|
|||||||
key: "inconsistencias",
|
key: "inconsistencias",
|
||||||
title: "Ver Inconsistências",
|
title: "Ver Inconsistências",
|
||||||
url: "/ferramentas/inconsistencias",
|
url: "/ferramentas/inconsistencias",
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "webclone",
|
|
||||||
title: "WebClone AI",
|
|
||||||
url: "/ferramentas/webclone",
|
|
||||||
icon: Globe,
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ export type RouteGuard = 'public' | 'protected' | 'admin' | 'resource';
|
|||||||
|
|
||||||
export interface RouteDefinition {
|
export interface RouteDefinition {
|
||||||
path: string;
|
path: string;
|
||||||
component: () => Promise<{ default: ComponentType<any> }>;
|
component: () => Promise<{ default: ComponentType<unknown> }>;
|
||||||
guard: RouteGuard;
|
guard: RouteGuard;
|
||||||
resourceKey?: string;
|
resourceKey?: string;
|
||||||
}
|
}
|
||||||
@@ -78,12 +78,7 @@ export const routeConfig: RouteDefinition[] = [
|
|||||||
guard: 'resource',
|
guard: 'resource',
|
||||||
resourceKey: 'ferramentas-inconsistencias',
|
resourceKey: 'ferramentas-inconsistencias',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/ferramentas/webclone',
|
|
||||||
component: () => import('@/pages/WebClone'),
|
|
||||||
guard: 'resource',
|
|
||||||
resourceKey: 'ferramentas-webclone',
|
|
||||||
},
|
|
||||||
|
|
||||||
// ── Estoque ──────────────────────────────────────────────
|
// ── Estoque ──────────────────────────────────────────────
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -3,15 +3,15 @@ import { useState, useCallback } from 'react';
|
|||||||
import { supabase } from '@/integrations/supabase/client';
|
import { supabase } from '@/integrations/supabase/client';
|
||||||
import { naturalSort } from '@/utils/naturalSort';
|
import { naturalSort } from '@/utils/naturalSort';
|
||||||
|
|
||||||
interface InconsistenciaItem {
|
export interface InconsistenciaItem {
|
||||||
marca: string;
|
marca: string;
|
||||||
tipo: string;
|
tipo: string;
|
||||||
descricao: string;
|
descricao: string;
|
||||||
detalhes: any;
|
detalhes: Record<string, unknown>;
|
||||||
acaoSugerida?: string;
|
acaoSugerida?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ResultadoAuditoria {
|
export interface ResultadoAuditoria {
|
||||||
inconsistencias: {
|
inconsistencias: {
|
||||||
processos: InconsistenciaItem[];
|
processos: InconsistenciaItem[];
|
||||||
quantidades: InconsistenciaItem[];
|
quantidades: InconsistenciaItem[];
|
||||||
@@ -253,8 +253,9 @@ export const useAuditoriaInconsistencias = () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Aplicar ordenação natural
|
// Aplicar ordenação natural
|
||||||
Object.keys(inconsistencias).forEach(categoria => {
|
Object.keys(inconsistencias).forEach(key => {
|
||||||
(inconsistencias as any)[categoria].sort((a: any, b: any) => naturalSort(a.marca, b.marca));
|
const categoria = key as keyof typeof inconsistencias;
|
||||||
|
inconsistencias[categoria].sort((a: InconsistenciaItem, b: InconsistenciaItem) => naturalSort(a.marca, b.marca));
|
||||||
});
|
});
|
||||||
|
|
||||||
const resultado: ResultadoAuditoria = {
|
const resultado: ResultadoAuditoria = {
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import { StandardCard } from '@/components/layout/StandardCard';
|
|||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { Plus, Printer, Edit, Trash2, Eye, RefreshCw, Check, ShoppingCart } from 'lucide-react';
|
import { Plus, Printer, Edit, Trash2, Eye, RefreshCw, Check, ShoppingCart } from 'lucide-react';
|
||||||
import { useSolicitacoesCompra } from '@/hooks/useSolicitacoesCompra';
|
import { useSolicitacoesCompra, SolicitacaoCompra, ItemSolicitacao } from '@/hooks/useSolicitacoesCompra';
|
||||||
import { useUserFunction } from '@/hooks/useUserFunction';
|
import { useUserFunction } from '@/hooks/useUserFunction';
|
||||||
import { SolicitacaoComprasModal } from '@/components/solicitacao-compras/SolicitacaoComprasModal';
|
import { SolicitacaoComprasModal } from '@/components/solicitacao-compras/SolicitacaoComprasModal';
|
||||||
import { SolicitacaoComprasPreviewModal } from '@/components/solicitacao-compras/SolicitacaoComprasPreviewModal';
|
import { SolicitacaoComprasPreviewModal } from '@/components/solicitacao-compras/SolicitacaoComprasPreviewModal';
|
||||||
@@ -25,7 +25,7 @@ const statusColors = {
|
|||||||
export default function SolicitacaoCompras() {
|
export default function SolicitacaoCompras() {
|
||||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
const [isPreviewOpen, setIsPreviewOpen] = useState(false);
|
const [isPreviewOpen, setIsPreviewOpen] = useState(false);
|
||||||
const [selectedSolicitacao, setSelectedSolicitacao] = useState(null);
|
const [selectedSolicitacao, setSelectedSolicitacao] = useState<SolicitacaoCompra | null>(null);
|
||||||
const { isComprador } = useUserFunction();
|
const { isComprador } = useUserFunction();
|
||||||
const {
|
const {
|
||||||
solicitacoes,
|
solicitacoes,
|
||||||
@@ -44,7 +44,7 @@ export default function SolicitacaoCompras() {
|
|||||||
isComprandoDireto
|
isComprandoDireto
|
||||||
} = useSolicitacoesCompra();
|
} = useSolicitacoesCompra();
|
||||||
|
|
||||||
const handlePrint = (solicitacao: any) => {
|
const handlePrint = (solicitacao: SolicitacaoCompra) => {
|
||||||
try {
|
try {
|
||||||
const printContent = `
|
const printContent = `
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
@@ -129,7 +129,7 @@ export default function SolicitacaoCompras() {
|
|||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody class="bg-white divide-y divide-gray-200">
|
<tbody class="bg-white divide-y divide-gray-200">
|
||||||
${solicitacao.itens.map((item: any, index: number) => `
|
${solicitacao.itens.map((item: ItemSolicitacao, index: number) => `
|
||||||
<tr${index % 2 === 1 ? ' class="hover:bg-gray-50"' : ''}>
|
<tr${index % 2 === 1 ? ' class="hover:bg-gray-50"' : ''}>
|
||||||
<td class="px-4 py-3 text-xs font-medium text-gray-800 break-words">${item.material?.descricao || 'Material não encontrado'}</td>
|
<td class="px-4 py-3 text-xs font-medium text-gray-800 break-words">${item.material?.descricao || 'Material não encontrado'}</td>
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-center text-gray-600 text-xs">${item.material?.unidade || 'UN'}</td>
|
<td class="px-4 py-3 whitespace-nowrap text-center text-gray-600 text-xs">${item.material?.unidade || 'UN'}</td>
|
||||||
@@ -180,7 +180,7 @@ export default function SolicitacaoCompras() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleEdit = (solicitacao: any) => {
|
const handleEdit = (solicitacao: SolicitacaoCompra) => {
|
||||||
if (!canEdit(solicitacao)) {
|
if (!canEdit(solicitacao)) {
|
||||||
alert('Você só pode editar suas próprias solicitações.');
|
alert('Você só pode editar suas próprias solicitações.');
|
||||||
return;
|
return;
|
||||||
@@ -189,12 +189,12 @@ export default function SolicitacaoCompras() {
|
|||||||
setIsModalOpen(true);
|
setIsModalOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handlePreview = (solicitacao: any) => {
|
const handlePreview = (solicitacao: SolicitacaoCompra) => {
|
||||||
setSelectedSolicitacao(solicitacao);
|
setSelectedSolicitacao(solicitacao);
|
||||||
setIsPreviewOpen(true);
|
setIsPreviewOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDelete = (solicitacao: any) => {
|
const handleDelete = (solicitacao: SolicitacaoCompra) => {
|
||||||
if (!canDelete(solicitacao)) {
|
if (!canDelete(solicitacao)) {
|
||||||
if (solicitacao.status !== 'Em planejamento') {
|
if (solicitacao.status !== 'Em planejamento') {
|
||||||
alert('⚠️ PERMISSÃO NEGADA\n\nSolicitações com status diferente de "Em planejamento" só podem ser excluídas por compradores.');
|
alert('⚠️ PERMISSÃO NEGADA\n\nSolicitações com status diferente de "Em planejamento" só podem ser excluídas por compradores.');
|
||||||
@@ -209,25 +209,25 @@ export default function SolicitacaoCompras() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleRevisar = (solicitacao: any) => {
|
const handleRevisar = (solicitacao: SolicitacaoCompra) => {
|
||||||
if (window.confirm(`Tem certeza que deseja enviar a solicitação ${solicitacao.numero_sc} para revisão?`)) {
|
if (window.confirm(`Tem certeza que deseja enviar a solicitação ${solicitacao.numero_sc} para revisão?`)) {
|
||||||
revisar({ id: solicitacao.id, created_by: solicitacao.created_by });
|
revisar({ id: solicitacao.id, created_by: solicitacao.created_by });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleAceitar = (solicitacao: any) => {
|
const handleAceitar = (solicitacao: SolicitacaoCompra) => {
|
||||||
if (window.confirm(`Tem certeza que deseja aceitar a solicitação ${solicitacao.numero_sc}?`)) {
|
if (window.confirm(`Tem certeza que deseja aceitar a solicitação ${solicitacao.numero_sc}?`)) {
|
||||||
aceitar({ id: solicitacao.id, created_by: solicitacao.created_by });
|
aceitar({ id: solicitacao.id, created_by: solicitacao.created_by });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleComprar = (solicitacao: any) => {
|
const handleComprar = (solicitacao: SolicitacaoCompra) => {
|
||||||
if (window.confirm(`Tem certeza que deseja marcar a solicitação ${solicitacao.numero_sc} como comprada?`)) {
|
if (window.confirm(`Tem certeza que deseja marcar a solicitação ${solicitacao.numero_sc} como comprada?`)) {
|
||||||
comprar({ id: solicitacao.id, created_by: solicitacao.created_by });
|
comprar({ id: solicitacao.id, created_by: solicitacao.created_by });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleComprarDireto = (solicitacao: any) => {
|
const handleComprarDireto = (solicitacao: SolicitacaoCompra) => {
|
||||||
if (window.confirm(`Você deseja passar o status dessa SC ${solicitacao.numero_sc} para "Comprado"?`)) {
|
if (window.confirm(`Você deseja passar o status dessa SC ${solicitacao.numero_sc} para "Comprado"?`)) {
|
||||||
comprarDireto({ id: solicitacao.id, created_by: solicitacao.created_by });
|
comprarDireto({ id: solicitacao.id, created_by: solicitacao.created_by });
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
|
|||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { Search, Eye, Download, FileText, AlertTriangle, CheckCircle } from 'lucide-react';
|
import { Search, Eye, Download, FileText, AlertTriangle, CheckCircle } from 'lucide-react';
|
||||||
import { useOFsAtivas } from '@/hooks/useOFsAtivas';
|
import { useOFsAtivas } from '@/hooks/useOFsAtivas';
|
||||||
import { useAuditoriaInconsistencias } from '@/hooks/useAuditoriaInconsistencias';
|
import { useAuditoriaInconsistencias, InconsistenciaItem } from '@/hooks/useAuditoriaInconsistencias';
|
||||||
import { InconsistenciaDetalhesModal } from '@/components/auditoria/InconsistenciaDetalhesModal';
|
import { InconsistenciaDetalhesModal } from '@/components/auditoria/InconsistenciaDetalhesModal';
|
||||||
import { generateProfessionalPDF } from '@/utils/pdfGenerator';
|
import { generateProfessionalPDF } from '@/utils/pdfGenerator';
|
||||||
import { toast } from '@/hooks/use-toast';
|
import { toast } from '@/hooks/use-toast';
|
||||||
@@ -18,7 +18,7 @@ const VerInconsistencias = () => {
|
|||||||
const [selectedFase, setSelectedFase] = useState<string>('');
|
const [selectedFase, setSelectedFase] = useState<string>('');
|
||||||
const [selectedProcesso, setSelectedProcesso] = useState<string>('todas');
|
const [selectedProcesso, setSelectedProcesso] = useState<string>('todas');
|
||||||
const [fasesDaOF, setFasesDaOF] = useState<string[]>([]);
|
const [fasesDaOF, setFasesDaOF] = useState<string[]>([]);
|
||||||
const [detalhesModal, setDetalhesModal] = useState<{ open: boolean; inconsistencia: any }>({
|
const [detalhesModal, setDetalhesModal] = useState<{ open: boolean; inconsistencia: InconsistenciaItem | null }>({
|
||||||
open: false,
|
open: false,
|
||||||
inconsistencia: null
|
inconsistencia: null
|
||||||
});
|
});
|
||||||
@@ -113,7 +113,7 @@ const VerInconsistencias = () => {
|
|||||||
|
|
||||||
const getTotalInconsistencias = () => {
|
const getTotalInconsistencias = () => {
|
||||||
if (!resultadoAuditoria) return 0;
|
if (!resultadoAuditoria) return 0;
|
||||||
return Object.values(resultadoAuditoria.inconsistencias).reduce((total, categoria: any) => total + categoria.length, 0);
|
return Object.values(resultadoAuditoria.inconsistencias).reduce((total, categoria: InconsistenciaItem[]) => total + categoria.length, 0);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -262,7 +262,7 @@ const VerInconsistencias = () => {
|
|||||||
<CardTitle className="capitalize">
|
<CardTitle className="capitalize">
|
||||||
Inconsistências de {categoria}
|
Inconsistências de {categoria}
|
||||||
<Badge variant="secondary" className="ml-2">
|
<Badge variant="secondary" className="ml-2">
|
||||||
{(inconsistencias as any[]).length}
|
{(inconsistencias as InconsistenciaItem[]).length}
|
||||||
</Badge>
|
</Badge>
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
@@ -274,7 +274,7 @@ const VerInconsistencias = () => {
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
{(inconsistencias as any[]).map((item, index) => (
|
{(inconsistencias as InconsistenciaItem[]).map((item, index) => (
|
||||||
<div key={index} className="flex items-center justify-between p-3 border rounded-lg">
|
<div key={index} className="flex items-center justify-between p-3 border rounded-lg">
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<div className="font-medium">{item.descricao}</div>
|
<div className="font-medium">{item.descricao}</div>
|
||||||
|
|||||||
@@ -1,201 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Badge } from "@/components/ui/badge";
|
|
||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
||||||
import { Globe, Play, CheckCircle2, AlertCircle, RefreshCw, ExternalLink, Code } from "lucide-react";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
|
|
||||||
export default function WebClone() {
|
|
||||||
const [url, setUrl] = useState('');
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [result, setResult] = useState<any>(null);
|
|
||||||
const [activeTab, setActiveTab] = useState('clone');
|
|
||||||
|
|
||||||
const handleClone = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!url) {
|
|
||||||
toast.error('Por favor, insira uma URL válida');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoading(true);
|
|
||||||
toast.info(`Iniciando clonagem inteligente de ${url}...`);
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Comunicando com a API do Crawler na porta 3001 (ou rota de gateway)
|
|
||||||
const res = await fetch('http://localhost:3001/api/crawl', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ startUrl: url, maxPages: 5 })
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!res.ok) {
|
|
||||||
throw new Error('Falha ao comunicar com o serviço de clonagem');
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await res.json();
|
|
||||||
setResult(data);
|
|
||||||
toast.success('Clonagem e recriação concluídas com sucesso!');
|
|
||||||
setActiveTab('resultados');
|
|
||||||
} catch (error: any) {
|
|
||||||
console.error(error);
|
|
||||||
toast.error(error.message || 'Erro ao realizar o clone da página');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="container mx-auto p-6 space-y-6 max-w-7xl">
|
|
||||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
|
||||||
<div>
|
|
||||||
<h1 className="text-3xl font-bold tracking-tight flex items-center gap-2">
|
|
||||||
<Globe className="h-8 w-8 text-primary" /> WebClone AI
|
|
||||||
</h1>
|
|
||||||
<p className="text-muted-foreground">
|
|
||||||
Clonagem inteligente avançada, mocking de SPAs e recriação generativa de componentes.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<Badge variant="outline" className="px-3 py-1 text-sm bg-primary/10 text-primary border-primary/20">
|
|
||||||
Playwright + IA + Service Workers
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full space-y-6">
|
|
||||||
<TabsList className="grid w-full md:w-[400px] grid-cols-2">
|
|
||||||
<TabsTrigger value="clone">Nova Clonagem</TabsTrigger>
|
|
||||||
<TabsTrigger value="resultados" disabled={!result}>Resultados</TabsTrigger>
|
|
||||||
</TabsList>
|
|
||||||
|
|
||||||
<TabsContent value="clone" className="space-y-6">
|
|
||||||
<Card className="border-border/50 shadow-sm backdrop-blur-sm bg-card/95">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Iniciar Processo de Clonagem</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Insira a URL do site. O sistema irá extrair o HTML, processar o Shadow DOM, criar mocks de API XHR/Fetch e emular formulários via IA.
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<form onSubmit={handleClone} className="space-y-4">
|
|
||||||
<div className="flex flex-col sm:flex-row gap-3">
|
|
||||||
<div className="relative flex-1">
|
|
||||||
<Globe className="absolute left-3 top-3 h-5 w-5 text-muted-foreground" />
|
|
||||||
<Input
|
|
||||||
type="url"
|
|
||||||
placeholder="https://exemplo.com.br"
|
|
||||||
value={url}
|
|
||||||
onChange={(e) => setUrl(e.target.value)}
|
|
||||||
className="pl-10 h-12 text-base"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
size="lg"
|
|
||||||
disabled={loading}
|
|
||||||
className="h-12 px-6 font-semibold shadow-md hover:shadow-lg transition-all"
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<>
|
|
||||||
<RefreshCw className="mr-2 h-5 w-5 animate-spin" /> Processando...
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Play className="mr-2 h-5 w-5 fill-current" /> Clonar Site
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
||||||
<Card className="border-border/50 bg-card/50 hover:bg-card/80 transition-colors">
|
|
||||||
<CardHeader className="pb-2">
|
|
||||||
<CardTitle className="text-lg flex items-center gap-2 text-primary">
|
|
||||||
<CheckCircle2 className="h-5 w-5" /> Mocks de Rede (SPA)
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="text-sm text-muted-foreground">
|
|
||||||
Injeta um Service Worker local para responder chamadas XHR e Fetch gravadas durante a sessão original, permitindo que sites React/Vue funcionem offline.
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="border-border/50 bg-card/50 hover:bg-card/80 transition-colors">
|
|
||||||
<CardHeader className="pb-2">
|
|
||||||
<CardTitle className="text-lg flex items-center gap-2 text-emerald-500">
|
|
||||||
<Code className="h-5 w-5" /> Recriação com IA
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="text-sm text-muted-foreground">
|
|
||||||
Detecta formulários quebrados ou áreas dinâmicas vazias e usa LLMs multimodais para reescrever o componente em Vanilla JS/CSS funcional.
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="border-border/50 bg-card/50 hover:bg-card/80 transition-colors">
|
|
||||||
<CardHeader className="pb-2">
|
|
||||||
<CardTitle className="text-lg flex items-center gap-2 text-amber-500">
|
|
||||||
<AlertCircle className="h-5 w-5" /> Declarative Shadow DOM
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="text-sm text-muted-foreground">
|
|
||||||
Vasculha e abre as árvores de Shadow DOM ocultas, convertendo-as para templates declarativos para perfeita fidelidade visual.
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</TabsContent>
|
|
||||||
|
|
||||||
<TabsContent value="resultados">
|
|
||||||
{result && (
|
|
||||||
<Card className="border-border/50 shadow-sm backdrop-blur-sm bg-card/95">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="flex items-center gap-2">
|
|
||||||
<CheckCircle2 className="h-6 w-6 text-emerald-500" /> Relatório do Clone
|
|
||||||
</CardTitle>
|
|
||||||
<CardDescription>Detalhes da extração e emulação do site {result.rootUrl}</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-6">
|
|
||||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4 p-4 rounded-lg bg-muted/50 border border-border/50">
|
|
||||||
<div>
|
|
||||||
<div className="text-sm text-muted-foreground">Páginas Clonadas</div>
|
|
||||||
<div className="text-2xl font-bold text-primary">{result.totalPages || result.pages?.length || 1}</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="text-sm text-muted-foreground">Tempo de Crawl</div>
|
|
||||||
<div className="text-2xl font-bold">{result.crawlTime ? `${(result.crawlTime / 1000).toFixed(1)}s` : 'N/A'}</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="text-sm text-muted-foreground">Profundidade Máx</div>
|
|
||||||
<div className="text-2xl font-bold">{result.crawlDepth || 1}</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="text-sm text-muted-foreground">Status</div>
|
|
||||||
<Badge variant="default" className="bg-emerald-500 text-white mt-1">Concluído</Badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-4">
|
|
||||||
<Button
|
|
||||||
onClick={() => window.open(`http://localhost:3000`, '_blank')}
|
|
||||||
className="flex items-center gap-2 bg-primary hover:bg-primary/90"
|
|
||||||
>
|
|
||||||
<ExternalLink className="h-4 w-4" /> Acessar Site Clonado Local
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => setActiveTab('clone')}
|
|
||||||
>
|
|
||||||
Clonar Outro Site
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
</TabsContent>
|
|
||||||
</Tabs>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -38,4 +38,3 @@ export { default as PrioridadesFabricacao } from './PrioridadesFabricacao';
|
|||||||
export { default as MapaInterativo } from './MapaInterativo';
|
export { default as MapaInterativo } from './MapaInterativo';
|
||||||
export { default as Atribuicoes } from './Atribuicoes';
|
export { default as Atribuicoes } from './Atribuicoes';
|
||||||
export { default as VerInconsistencias } from './VerInconsistencias';
|
export { default as VerInconsistencias } from './VerInconsistencias';
|
||||||
export { default as WebClone } from './WebClone';
|
|
||||||
|
|||||||
Reference in New Issue
Block a user