89 lines
4.3 KiB
JavaScript
89 lines
4.3 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Truck, FileCheck, CircleAlert, FolderOpen, History, Info, Activity, Search } from 'lucide-react';
|
|
import { toast } from 'sonner';
|
|
|
|
const GrCteView = () => {
|
|
const [selectedFolder, setSelectedFolder] = useState(null);
|
|
const [isAnalyzing, setIsAnalyzing] = useState(false);
|
|
const [logs, setLogs] = useState([]);
|
|
|
|
const handleAnalyze = async () => {
|
|
setIsAnalyzing(true);
|
|
setLogs(prev => [...prev, "[SYSTEM] Iniciando conferência de CTEs e MDF-e..."]);
|
|
setLogs(prev => [...prev, "[IO] Lendo diretório de XMLs..."]);
|
|
|
|
// Simulated logic
|
|
setTimeout(() => {
|
|
setLogs(prev => [...prev, "[PROCESS] Validando sequencial de CTEs..."]);
|
|
}, 1000);
|
|
|
|
setTimeout(() => {
|
|
setLogs(prev => [...prev, "[DATA] CTE #44562 - OK\nCTE #44563 - ERRO: Valor divergente\nCTE #44564 - OK"]);
|
|
}, 2500);
|
|
|
|
setTimeout(() => {
|
|
setIsAnalyzing(false);
|
|
setLogs(prev => [...prev, "[SUCCESS] Conferência finalizada. 1 divergência encontrada."]);
|
|
toast.info("Conferência de CTe finalizada!");
|
|
}, 4500);
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col gap-8 p-6 md:p-10 animate-in fade-in slide-in-from-bottom-4 duration-700">
|
|
<header className="space-y-4">
|
|
<h1 className="text-4xl md:text-6xl font-bold text-slate-800 dark:text-white tracking-tighter leading-none">
|
|
Revisão de <span className="text-[var(--gr-primary)]">Cargas</span>
|
|
</h1>
|
|
<p className="text-slate-400 dark:text-slate-500 text-base md:text-lg font-medium italic opacity-80">
|
|
Validação de Conhecimentos de Transporte e Manifesto de Documentos Fiscais
|
|
</p>
|
|
</header>
|
|
|
|
<div className="max-w-4xl mx-auto w-full">
|
|
<div className="bg-white dark:bg-[#1b1b1b] p-8 md:p-12 rounded-[40px] border border-slate-200 dark:border-white/5 shadow-sm space-y-8 text-center">
|
|
<div className="flex flex-col items-center space-y-6 py-12 border-2 border-dashed border-slate-200 dark:border-white/10 rounded-[32px] bg-slate-50/50 dark:bg-white/[0.02]">
|
|
<div className="p-6 bg-white dark:bg-[#141414] rounded-full text-[var(--gr-primary)] shadow-xl shadow-[var(--gr-primary)]/10">
|
|
<FolderOpen size={64} />
|
|
</div>
|
|
<div className="space-y-2 px-8 max-w-md">
|
|
<h4 className="text-2xl font-bold text-slate-800 dark:text-white uppercase tracking-tighter">Diretório de XMLs</h4>
|
|
<p className="text-sm text-slate-500 font-medium leading-relaxed">Selecione a pasta contendo os arquivos CTE e MDF-e para verificação automática de divergências.</p>
|
|
</div>
|
|
<button
|
|
className="px-8 py-4 bg-slate-800 hover:bg-slate-900 text-white rounded-[20px] font-bold text-xs uppercase tracking-[0.2em] transition-all shadow-lg"
|
|
>
|
|
Selecionar Pasta Local
|
|
</button>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-6 items-center">
|
|
<div className="bg-emerald-50/50 dark:bg-emerald-900/10 p-6 rounded-[24px] border border-emerald-100 dark:border-emerald-900/20 flex gap-4 text-left">
|
|
<Info className="text-emerald-500 shrink-0" size={24} />
|
|
<p className="text-xs text-emerald-800 dark:text-emerald-300 font-medium leading-relaxed">
|
|
O sistema valida sequenciais, valores líquidos e vínculos entre documentos fiscais em segundos.
|
|
</p>
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleAnalyze}
|
|
disabled={isAnalyzing}
|
|
className="w-full flex items-center justify-center gap-3 px-8 py-6 bg-[var(--gr-primary)] hover:bg-[var(--gr-primary-dark)] text-white rounded-[24px] font-bold text-xs uppercase tracking-[0.2em] transition-all shadow-xl shadow-[var(--gr-primary)]/20 hover:scale-[1.02] active:scale-95 disabled:opacity-50"
|
|
>
|
|
{isAnalyzing ? (
|
|
<Activity className="animate-spin" size={20} />
|
|
) : (
|
|
<>
|
|
<FileCheck size={20} />
|
|
Processar Lote Fiscal
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default GrCteView;
|