- Review the generated Data Specification Language (DSL). You can edit it directly if needed.
+ Review the generated JSON. You can edit it directly if needed.
@@ -664,7 +664,7 @@ const AdvancedPySparkGenerator = () => {
{step === 1 && 'Upload'}
{step === 2 && 'Review'}
- {step === 3 && 'DSL'}
+ {step === 3 && 'JSON'}
{step === 4 && 'Code'}
diff --git a/frontend/src/pages/DataAccuracy.js b/frontend/src/pages/DataAccuracy.js
index ec7a21f..ed935e2 100644
--- a/frontend/src/pages/DataAccuracy.js
+++ b/frontend/src/pages/DataAccuracy.js
@@ -33,7 +33,7 @@ const DataAccuracy = () => {
// Focus on page load
useEffect(() => {
- document.title = 'Acurácia de Dados - DataForgeTest';
+ document.title = 'Acurácia de Dados - SmartDataTest';
}, []);
const handleGoldFileSelect = async (file) => {
diff --git a/frontend/src/pages/DatasetMetrics.js b/frontend/src/pages/DatasetMetrics.js
index 72c9cd3..7db5166 100644
--- a/frontend/src/pages/DatasetMetrics.js
+++ b/frontend/src/pages/DatasetMetrics.js
@@ -25,7 +25,7 @@ const DatasetMetrics = () => {
// Focus management
useEffect(() => {
- document.title = 'Dataset Metrics - DataForgeTest';
+ document.title = 'Dataset Metrics - SmartDataTest';
}, []);
// Handle file selection
diff --git a/frontend/src/pages/LoginPage.js b/frontend/src/pages/LoginPage.js
new file mode 100644
index 0000000..1cff489
--- /dev/null
+++ b/frontend/src/pages/LoginPage.js
@@ -0,0 +1,640 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+ BarChart3,
+ BookOpen,
+ CheckCircle,
+ ChevronRight,
+ Clock,
+ Code,
+ Database,
+ Eye,
+ EyeOff,
+ GraduationCap,
+ Heart,
+ Loader,
+ Lock,
+ LogIn,
+ Mail,
+ Settings,
+ Shield,
+ TestTube,
+ User,
+ Zap,
+} from 'lucide-react';
+import { useAuthContext } from '../context/AuthContext';
+import { useLanguage } from '../context/LanguageContext';
+import LanguageToggle from '../components/LanguageToggle';
+import useAuth from '../hooks/useAuth';
+import useStats from '../hooks/useStats';
+import {
+ floatingNode,
+ popIn,
+ profileCardIn,
+ scaleIn,
+ slideDown,
+ slideInFromLeft,
+ slideInFromRight,
+} from '../styles/animations';
+
+// ---------------------------------------------------------------------------
+// Translations
+// ---------------------------------------------------------------------------
+const translations = {
+ 'pt-BR': {
+ platformName: 'SmartDataTest',
+ loginTitle: 'Bem-vindo de volta',
+ loginSubtitle: 'Faça login para acessar a plataforma de QA em Big Data',
+ emailLabel: 'E-mail',
+ emailPlaceholder: 'seu@email.com',
+ passwordLabel: 'Senha',
+ rememberMe: 'Lembrar-me por 7 dias',
+ loginButton: 'Entrar',
+ loginButtonLoading: 'Autenticando...',
+ demoCredentials: 'Credenciais de demonstração',
+ demoAdmin: 'Admin: admin@smartdatatest.com / admin123',
+ demoEngineer: 'Engenheiro: engineer@smartdatatest.com / engineer123',
+ demoQa: 'QA: qa@smartdatatest.com / qa123456',
+ profileTitle: 'Quase lá!',
+ profileSubtitle: 'Personalize sua experiência na plataforma',
+ profileQuestion: 'Qual é o seu perfil profissional?',
+ profileRoles: [
+ { id: 'tester', label: 'QA / Tester', icon: 'TestTube', desc: 'Teste e validação de dados' },
+ { id: 'data_eng', label: 'Engenheiro de Dados', icon: 'Database', desc: 'Pipelines e ETL' },
+ { id: 'dev', label: 'Desenvolvedor', icon: 'Code', desc: 'Desenvolvimento de software' },
+ { id: 'student', label: 'Estudante', icon: 'GraduationCap', desc: 'Aprendizado e pesquisa' },
+ { id: 'teacher', label: 'Professor / Pesquisador', icon: 'BookOpen', desc: 'Ensino e academia' },
+ { id: 'analyst', label: 'Analista de Dados', icon: 'BarChart3', desc: 'Análise e BI' },
+ { id: 'devops', label: 'DevOps / SRE', icon: 'Settings', desc: 'Infraestrutura e CI/CD' },
+ { id: 'other', label: 'Outra área', icon: 'User', desc: 'Outro perfil profissional' },
+ ],
+ profileOtherPlaceholder: 'Descreva sua área de atuação...',
+ profileButton: 'Acessar plataforma',
+ profileSkip: 'Pular por agora',
+ rightPanelTitle: 'Pipeline de Qualidade',
+ rightPanelSubtitle: 'Monitoramento em tempo real',
+ statsLabels: {
+ tests: 'Testes',
+ datasets: 'Datasets',
+ coverage: 'Cobertura',
+ response: 'Resposta',
+ },
+ footerCopyright: '© 2026 SmartDataTest. Todos os direitos reservados.',
+ footerRights: 'Plataforma de qualidade de dados com suporte de IA — Uso educacional e profissional.',
+ footerBuiltWith: 'Desenvolvido com',
+ footerTech: 'React + Flask + Python 3.12',
+ loading: 'Carregando...',
+ },
+ 'en-US': {
+ platformName: 'SmartDataTest',
+ loginTitle: 'Welcome back',
+ loginSubtitle: 'Sign in to access the Big Data QA platform',
+ emailLabel: 'Email',
+ emailPlaceholder: 'your@email.com',
+ passwordLabel: 'Password',
+ rememberMe: 'Remember me for 7 days',
+ loginButton: 'Sign In',
+ loginButtonLoading: 'Authenticating...',
+ demoCredentials: 'Demo credentials',
+ demoAdmin: 'Admin: admin@smartdatatest.com / admin123',
+ demoEngineer: 'Engineer: engineer@smartdatatest.com / engineer123',
+ demoQa: 'QA: qa@smartdatatest.com / qa123456',
+ profileTitle: 'Almost there!',
+ profileSubtitle: 'Personalize your platform experience',
+ profileQuestion: 'What is your professional profile?',
+ profileRoles: [
+ { id: 'tester', label: 'QA / Tester', icon: 'TestTube', desc: 'Data testing and validation' },
+ { id: 'data_eng', label: 'Data Engineer', icon: 'Database', desc: 'Pipelines and ETL' },
+ { id: 'dev', label: 'Developer', icon: 'Code', desc: 'Software development' },
+ { id: 'student', label: 'Student', icon: 'GraduationCap', desc: 'Learning and research' },
+ { id: 'teacher', label: 'Teacher / Researcher', icon: 'BookOpen', desc: 'Teaching and academia' },
+ { id: 'analyst', label: 'Data Analyst', icon: 'BarChart3', desc: 'Analytics and BI' },
+ { id: 'devops', label: 'DevOps / SRE', icon: 'Settings', desc: 'Infrastructure and CI/CD' },
+ { id: 'other', label: 'Other', icon: 'User', desc: 'Other professional profile' },
+ ],
+ profileOtherPlaceholder: 'Describe your area of work...',
+ profileButton: 'Access platform',
+ profileSkip: 'Skip for now',
+ rightPanelTitle: 'Quality Pipeline',
+ rightPanelSubtitle: 'Real-time monitoring',
+ statsLabels: {
+ tests: 'Tests',
+ datasets: 'Datasets',
+ coverage: 'Coverage',
+ response: 'Response',
+ },
+ footerCopyright: '© 2026 SmartDataTest. All rights reserved.',
+ footerRights: 'AI-powered data quality platform — Educational and professional use.',
+ footerBuiltWith: 'Built with',
+ footerTech: 'React + Flask + Python 3.12',
+ loading: 'Loading...',
+ },
+};
+
+// ---------------------------------------------------------------------------
+// Icon map for role cards
+// ---------------------------------------------------------------------------
+const ROLE_ICONS = {
+ TestTube,
+ Database,
+ Code,
+ GraduationCap,
+ BookOpen,
+ BarChart3,
+ Settings,
+ User,
+};
+
+// ---------------------------------------------------------------------------
+// AnimatedBackground
+// ---------------------------------------------------------------------------
+const BG_LABELS = [
+ 'Parquet', 'PySpark', 'Delta Lake', 'pytest', 'JSON', 'CSV',
+ 'LLM', 'RAG', 'ETL', 'SQL', 'HDFS', 'Kafka', 'Airflow', 'dbt',
+ 'BigQuery', 'Spark', 'Schema', 'NULL Check', 'Assertion', 'Coverage',
+ 'PEP-8', 'pytest-cov', 'Locust', 'Pandas', 'dbt',
+];
+
+function AnimatedBackground() {
+ const nodes = useMemo(
+ () =>
+ BG_LABELS.map((label, i) => ({
+ label,
+ size: 60 + Math.floor(((i * 37) % 61)),
+ top: `${5 + ((i * 17) % 85)}%`,
+ left: `${3 + ((i * 23) % 91)}%`,
+ opacity: 0.1 + ((i % 5) * 0.04),
+ duration: 10 + (i % 8) * 2,
+ delay: (i % 6) * 0.5,
+ })),
+ []
+ );
+
+ return (
+
+ {nodes.map((node) => (
+
+
+ {node.label}
+
+
+ ))}
+
+ );
+}
+
+// ---------------------------------------------------------------------------
+// TopBar
+// ---------------------------------------------------------------------------
+function TopBar() {
+ return (
+
+ );
+}
+
+// ---------------------------------------------------------------------------
+// Right Panel — Pipeline steps
+// ---------------------------------------------------------------------------
+const PIPELINE_STEPS = [
+ { name: 'Data Ingestion', status: 'done', progress: 100 },
+ { name: 'Schema Validation', status: 'done', progress: 100 },
+ { name: 'Quality Checks', status: 'running', progress: 72 },
+ { name: 'Gold Generation', status: 'pending', progress: 0 },
+ { name: 'Report Export', status: 'pending', progress: 0 },
+];
+
+function StatCard({ icon: Icon, label, value, color }) {
+ const [count, setCount] = useState(0);
+ useEffect(() => {
+ const target = parseInt(value.replace(/\D/g, ''), 10) || 0;
+ if (target === 0) return;
+ let current = 0;
+ const step = Math.ceil(target / 60);
+ const timer = setInterval(() => {
+ current = Math.min(current + step, target);
+ setCount(current);
+ if (current >= target) clearInterval(timer);
+ }, 20);
+ return () => clearInterval(timer);
+ }, [value]);
+
+ const displayValue = value.includes('%')
+ ? `${count}%`
+ : value.includes('<')
+ ? value
+ : `${count}+`;
+
+ return (
+
+ {displayValue}
+ {label}
+
+ );
+}
+
+function RightPanel({ t }) {
+ const { tests, datasets, coverage, responseSla } = useStats();
+
+ return (
+
+ {/* Section A — Pipeline */}
+
+
+
{t.rightPanelTitle}
+
{t.rightPanelSubtitle}
+
+
+ {PIPELINE_STEPS.map((step) => (
+
+
+ {step.status === 'done' &&
+
+
+ {step.name}
+ {step.progress}%
+
+
+ {step.status === 'running' ? (
+
+ ) : (
+
+ )}
+
+
+ ))}
+
+
+
+ {/* Section B — Stats (flex-1 to fill remaining space) */}
+
+
+
+ );
+}
+
+// ---------------------------------------------------------------------------
+// Footer
+// ---------------------------------------------------------------------------
+function LoginFooter({ t }) {
+ return (
+
+
+
+
+ {t.platformName}
+ ·
+ {t.footerCopyright}
+
+
+ {t.footerBuiltWith}
+ {t.footerTech}
+
+
v1.0.0 · 2026
+
+
{t.footerRights}
+
+ );
+}
+
+// ---------------------------------------------------------------------------
+// LoginPage
+// ---------------------------------------------------------------------------
+export default function LoginPage() {
+ const { isAuthenticated, hasProfile } = useAuthContext();
+ const { language } = useLanguage();
+ const { handleLogin, handleSaveProfile, clearError, error, isLoading } = useAuth();
+ const navigate = useNavigate();
+ const location = useLocation();
+
+ const [step, setStep] = useState(
+ location.state?.step === 'profile' ? 'profile' : 'login'
+ );
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [showPassword, setShowPassword] = useState(false);
+ const [rememberMe, setRememberMe] = useState(false);
+ const [selectedRole, setSelectedRole] = useState('');
+ const [customRole, setCustomRole] = useState('');
+
+ const t = translations[language];
+
+ useEffect(() => {
+ if (isAuthenticated && hasProfile) {
+ navigate(location.state?.from?.pathname || '/');
+ }
+ if (isAuthenticated && !hasProfile) {
+ setStep('profile');
+ }
+ }, [isAuthenticated, hasProfile, navigate, location.state]);
+
+ const onSubmitLogin = async (e) => {
+ e.preventDefault();
+ const ok = await handleLogin(email, password, rememberMe);
+ if (ok) setStep('profile');
+ };
+
+ const onSubmitProfile = (e) => {
+ e.preventDefault();
+ const role = selectedRole === 'other' ? customRole.trim() : selectedRole;
+ if (!role) return;
+ handleSaveProfile({ role, setAt: new Date().toISOString() });
+ };
+
+ const onSkipProfile = () => {
+ handleSaveProfile({ role: 'unset', setAt: new Date().toISOString() });
+ };
+
+ return (
+
+
+
+
+
+ {/* Left panel */}
+
+
+ {step === 'login' ? (
+
+ {/* Header */}
+
+
+
+
+
{t.loginTitle}
+
{t.loginSubtitle}
+
+
+
+
+
+ {t.demoAdmin}
+ {t.demoEngineer}
+ {t.demoQa}
+
+
+
+ ) : (
+
+ {/* Header */}
+
+
+
+
+
{t.profileTitle}
+
{t.profileSubtitle}
+
+
{t.profileQuestion}
+
+