feat: atualizacao de rotas
This commit is contained in:
yagostn
parent
8016a0298e
commit
b99807beb3
5 changed files with 432 additions and 247 deletions
301
frontend/App.tsx
301
frontend/App.tsx
|
|
@ -1,4 +1,5 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import React from "react";
|
||||
import { BrowserRouter, Routes, Route, Navigate, useNavigate, useLocation } from "react-router-dom";
|
||||
import { Navbar } from "./components/Navbar";
|
||||
import { Home } from "./pages/Home";
|
||||
import { Dashboard } from "./pages/Dashboard";
|
||||
|
|
@ -14,69 +15,124 @@ import { TermsOfUse } from "./pages/TermsOfUse";
|
|||
import { LGPD } from "./pages/LGPD";
|
||||
import { AuthProvider, useAuth } from "./contexts/AuthContext";
|
||||
import { DataProvider } from "./contexts/DataContext";
|
||||
import { Construction } from "lucide-react";
|
||||
import { UserRole } from "./types";
|
||||
import { ShieldAlert } from "lucide-react";
|
||||
|
||||
const AppContent: React.FC = () => {
|
||||
const { user } = useAuth();
|
||||
const [currentPage, setCurrentPage] = useState("home");
|
||||
// Componente de acesso negado
|
||||
const AccessDenied: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
if (user && currentPage === "login") {
|
||||
setCurrentPage("dashboard");
|
||||
}
|
||||
}, [user, currentPage]);
|
||||
|
||||
const renderPage = () => {
|
||||
if (currentPage === "home")
|
||||
return (
|
||||
<Home onEnter={() => setCurrentPage(user ? "dashboard" : "login")} />
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-brand-purple/5 to-brand-gold/5">
|
||||
<div className="text-center p-8 bg-white rounded-lg shadow-lg max-w-md">
|
||||
<ShieldAlert className="w-16 h-16 text-red-500 mx-auto mb-4" />
|
||||
<h2 className="text-2xl font-bold text-brand-purple mb-2">Acesso Negado</h2>
|
||||
<p className="text-gray-600 mb-6">
|
||||
Você não tem permissão para acessar esta página.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => navigate("/painel")}
|
||||
className="px-6 py-2 bg-brand-gold text-brand-purple font-semibold rounded-lg hover:bg-brand-gold/90 transition-colors"
|
||||
>
|
||||
Voltar ao Dashboard
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
if (currentPage === "login")
|
||||
return user ? <Dashboard /> : <Login onNavigate={setCurrentPage} />;
|
||||
if (currentPage === "register")
|
||||
return user ? <Dashboard /> : <Register onNavigate={setCurrentPage} />;
|
||||
if (currentPage === "privacy")
|
||||
return <PrivacyPolicy onNavigate={setCurrentPage} />;
|
||||
if (currentPage === "terms")
|
||||
return <TermsOfUse onNavigate={setCurrentPage} />;
|
||||
if (currentPage === "lgpd") return <LGPD onNavigate={setCurrentPage} />;
|
||||
};
|
||||
|
||||
if (!user) return <Login onNavigate={setCurrentPage} />;
|
||||
// Componente de rota protegida
|
||||
interface ProtectedRouteProps {
|
||||
children: React.ReactNode;
|
||||
allowedRoles?: UserRole[];
|
||||
}
|
||||
|
||||
switch (currentPage) {
|
||||
case "dashboard":
|
||||
case "events":
|
||||
return <Dashboard initialView="list" />;
|
||||
const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children, allowedRoles }) => {
|
||||
const { user } = useAuth();
|
||||
|
||||
case "request-event":
|
||||
return <Dashboard initialView="create" />;
|
||||
|
||||
case "inspiration":
|
||||
return <InspirationPage />;
|
||||
|
||||
case "team":
|
||||
return <TeamPage />;
|
||||
|
||||
case "finance":
|
||||
return <FinancePage />;
|
||||
|
||||
case "settings":
|
||||
return <SettingsPage />;
|
||||
|
||||
case "courses":
|
||||
return <CourseManagement />;
|
||||
|
||||
default:
|
||||
return <Dashboard initialView="list" />;
|
||||
if (!user) {
|
||||
return <Navigate to="/entrar" replace />;
|
||||
}
|
||||
|
||||
if (allowedRoles && allowedRoles.length > 0 && !allowedRoles.includes(user.role)) {
|
||||
return <AccessDenied />;
|
||||
}
|
||||
|
||||
return <>{children}</>;
|
||||
};
|
||||
|
||||
// Wrapper para páginas que usam o sistema antigo de navegação
|
||||
const PageWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const handleNavigate = (page: string) => {
|
||||
navigate(`/${page}`);
|
||||
};
|
||||
|
||||
const getCurrentPage = () => {
|
||||
const path = location.pathname.substring(1) || "home";
|
||||
return path;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Navbar onNavigate={setCurrentPage} currentPage={currentPage} />
|
||||
<main>{renderPage()}</main>
|
||||
<Navbar onNavigate={handleNavigate} currentPage={getCurrentPage()} />
|
||||
<main>{children}</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
{currentPage === "home" && (
|
||||
// Componente Home com roteamento
|
||||
const HomeWithRouter: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const { user } = useAuth();
|
||||
|
||||
return (
|
||||
<PageWrapper>
|
||||
<Home onEnter={() => navigate(user ? "/painel" : "/entrar")} />
|
||||
<Footer />
|
||||
</PageWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
// Componente de Login com redirecionamento
|
||||
const LoginWithRouter: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const { user } = useAuth();
|
||||
|
||||
if (user) {
|
||||
return <Navigate to="/painel" replace />;
|
||||
}
|
||||
|
||||
return (
|
||||
<PageWrapper>
|
||||
<Login onNavigate={(page) => navigate(`/${page}`)} />
|
||||
</PageWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
// Componente de Registro com redirecionamento
|
||||
const RegisterWithRouter: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const { user } = useAuth();
|
||||
|
||||
if (user) {
|
||||
return <Navigate to="/painel" replace />;
|
||||
}
|
||||
|
||||
return (
|
||||
<PageWrapper>
|
||||
<Register onNavigate={(page) => navigate(`/${page}`)} />
|
||||
</PageWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
// Footer component
|
||||
const Footer: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<footer className="bg-gradient-to-br from-brand-purple to-brand-purple/90 text-brand-black py-12 sm:py-16 md:py-20">
|
||||
<div className="w-full max-w-[1600px] mx-auto px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8 md:gap-10 lg:gap-12 xl:gap-16 mb-8 sm:mb-12 md:mb-16">
|
||||
|
|
@ -116,7 +172,7 @@ const AppContent: React.FC = () => {
|
|||
<li>
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => setCurrentPage("login")}
|
||||
onClick={() => navigate("/entrar")}
|
||||
className="hover:text-brand-black transition-colors"
|
||||
>
|
||||
Área do Cliente
|
||||
|
|
@ -125,7 +181,7 @@ const AppContent: React.FC = () => {
|
|||
<li>
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => setCurrentPage("register")}
|
||||
onClick={() => navigate("/cadastro")}
|
||||
className="hover:text-brand-black transition-colors"
|
||||
>
|
||||
Cadastre sua Formatura
|
||||
|
|
@ -226,21 +282,21 @@ const AppContent: React.FC = () => {
|
|||
<div className="flex flex-wrap justify-center gap-4 sm:gap-6 md:gap-8">
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => setCurrentPage("privacy")}
|
||||
onClick={() => navigate("/privacidade")}
|
||||
className="hover:text-brand-black transition-colors"
|
||||
>
|
||||
Política de Privacidade
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => setCurrentPage("terms")}
|
||||
onClick={() => navigate("/termos")}
|
||||
className="hover:text-brand-black transition-colors"
|
||||
>
|
||||
Termos de Uso
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => setCurrentPage("lgpd")}
|
||||
onClick={() => navigate("/lgpd")}
|
||||
className="hover:text-brand-black transition-colors"
|
||||
>
|
||||
LGPD
|
||||
|
|
@ -249,18 +305,147 @@ const AppContent: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const AppContent: React.FC = () => {
|
||||
const location = useLocation();
|
||||
const showFooter = location.pathname === "/";
|
||||
|
||||
return (
|
||||
<>
|
||||
<Routes>
|
||||
{/* Rotas Públicas */}
|
||||
<Route path="/" element={<HomeWithRouter />} />
|
||||
<Route path="/entrar" element={<LoginWithRouter />} />
|
||||
<Route path="/cadastro" element={<RegisterWithRouter />} />
|
||||
<Route
|
||||
path="/privacidade"
|
||||
element={
|
||||
<PageWrapper>
|
||||
<PrivacyPolicy onNavigate={(page) => window.location.href = `/${page}`} />
|
||||
</PageWrapper>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/termos"
|
||||
element={
|
||||
<PageWrapper>
|
||||
<TermsOfUse onNavigate={(page) => window.location.href = `/${page}`} />
|
||||
</PageWrapper>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/lgpd"
|
||||
element={
|
||||
<PageWrapper>
|
||||
<LGPD onNavigate={(page) => window.location.href = `/${page}`} />
|
||||
</PageWrapper>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Rotas Protegidas - Todos os usuários autenticados */}
|
||||
<Route
|
||||
path="/painel"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<PageWrapper>
|
||||
<Dashboard initialView="list" />
|
||||
</PageWrapper>
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/eventos"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<PageWrapper>
|
||||
<Dashboard initialView="list" />
|
||||
</PageWrapper>
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/inspiracao"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<PageWrapper>
|
||||
<InspirationPage />
|
||||
</PageWrapper>
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Rota de solicitação de evento - Clientes e Administradores */}
|
||||
<Route
|
||||
path="/solicitar-evento"
|
||||
element={
|
||||
<ProtectedRoute allowedRoles={[UserRole.SUPERADMIN, UserRole.BUSINESS_OWNER, UserRole.EVENT_OWNER]}>
|
||||
<PageWrapper>
|
||||
<Dashboard initialView="create" />
|
||||
</PageWrapper>
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Rotas Administrativas - Apenas gestão */}
|
||||
<Route
|
||||
path="/equipe"
|
||||
element={
|
||||
<ProtectedRoute allowedRoles={[UserRole.SUPERADMIN, UserRole.BUSINESS_OWNER]}>
|
||||
<PageWrapper>
|
||||
<TeamPage />
|
||||
</PageWrapper>
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/financeiro"
|
||||
element={
|
||||
<ProtectedRoute allowedRoles={[UserRole.SUPERADMIN, UserRole.BUSINESS_OWNER]}>
|
||||
<PageWrapper>
|
||||
<FinancePage />
|
||||
</PageWrapper>
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/configuracoes"
|
||||
element={
|
||||
<ProtectedRoute allowedRoles={[UserRole.SUPERADMIN, UserRole.BUSINESS_OWNER]}>
|
||||
<PageWrapper>
|
||||
<SettingsPage />
|
||||
</PageWrapper>
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/cursos"
|
||||
element={
|
||||
<ProtectedRoute allowedRoles={[UserRole.SUPERADMIN, UserRole.BUSINESS_OWNER]}>
|
||||
<PageWrapper>
|
||||
<CourseManagement />
|
||||
</PageWrapper>
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Rota padrão - redireciona para home */}
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<AuthProvider>
|
||||
<DataProvider>
|
||||
<AppContent />
|
||||
</DataProvider>
|
||||
</AuthProvider>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -60,18 +60,18 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
case UserRole.SUPERADMIN:
|
||||
case UserRole.BUSINESS_OWNER:
|
||||
return [
|
||||
{ name: "Gestão de Eventos", path: "dashboard" },
|
||||
{ name: "Equipe", path: "team" },
|
||||
{ name: "Gestão de Cursos", path: "courses" },
|
||||
{ name: "Financeiro", path: "finance" },
|
||||
{ name: "Gestão de Eventos", path: "painel" },
|
||||
{ name: "Equipe", path: "equipe" },
|
||||
{ name: "Gestão de Cursos", path: "cursos" },
|
||||
{ name: "Financeiro", path: "financeiro" },
|
||||
];
|
||||
case UserRole.EVENT_OWNER:
|
||||
return [
|
||||
{ name: "Meus Eventos", path: "dashboard" },
|
||||
{ name: "Solicitar Evento", path: "request-event" },
|
||||
{ name: "Meus Eventos", path: "painel" },
|
||||
{ name: "Solicitar Evento", path: "solicitar-evento" },
|
||||
];
|
||||
case UserRole.PHOTOGRAPHER:
|
||||
return [{ name: "Eventos Designados", path: "dashboard" }];
|
||||
return [{ name: "Eventos Designados", path: "painel" }];
|
||||
default:
|
||||
return [];
|
||||
}
|
||||
|
|
@ -287,7 +287,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
<div className="p-5 space-y-3 bg-gray-50">
|
||||
<Button
|
||||
onClick={() => {
|
||||
onNavigate("login");
|
||||
onNavigate("entrar");
|
||||
setIsAccountDropdownOpen(false);
|
||||
}}
|
||||
variant="secondary"
|
||||
|
|
@ -298,7 +298,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
|
||||
<Button
|
||||
onClick={() => {
|
||||
onNavigate("register");
|
||||
onNavigate("cadastro");
|
||||
setIsAccountDropdownOpen(false);
|
||||
}}
|
||||
variant="primary"
|
||||
|
|
@ -468,7 +468,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
<div className="p-5 space-y-3 bg-gray-50">
|
||||
<Button
|
||||
onClick={() => {
|
||||
onNavigate("login");
|
||||
onNavigate("entrar");
|
||||
setIsAccountDropdownOpen(false);
|
||||
}}
|
||||
variant="secondary"
|
||||
|
|
@ -479,7 +479,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
|
||||
<Button
|
||||
onClick={() => {
|
||||
onNavigate("register");
|
||||
onNavigate("cadastro");
|
||||
setIsAccountDropdownOpen(false);
|
||||
}}
|
||||
variant="primary"
|
||||
|
|
@ -587,7 +587,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
size="lg"
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
onNavigate("login");
|
||||
onNavigate("entrar");
|
||||
setIsMobileMenuOpen(false);
|
||||
}}
|
||||
>
|
||||
|
|
@ -597,7 +597,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
className="w-full bg-purple-600 text-white hover:bg-purple-700 focus:ring-purple-500 rounded-lg"
|
||||
size="lg"
|
||||
onClick={() => {
|
||||
onNavigate("register");
|
||||
onNavigate("cadastro");
|
||||
setIsMobileMenuOpen(false);
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -13,21 +13,21 @@ const MOCK_USERS: User[] = [
|
|||
},
|
||||
{
|
||||
id: 'owner-1',
|
||||
name: 'Carlos CEO',
|
||||
name: 'PHOTUM CEO',
|
||||
email: 'empresa@photum.com',
|
||||
role: UserRole.BUSINESS_OWNER,
|
||||
avatar: 'https://i.pravatar.cc/150?u=ceo'
|
||||
},
|
||||
{
|
||||
id: 'photographer-1',
|
||||
name: 'Ana Lente',
|
||||
name: 'COLABORADOR PHOTUM',
|
||||
email: 'foto@photum.com',
|
||||
role: UserRole.PHOTOGRAPHER,
|
||||
avatar: 'https://i.pravatar.cc/150?u=photo'
|
||||
},
|
||||
{
|
||||
id: 'client-1',
|
||||
name: 'Juliana Noiva',
|
||||
name: 'PARCEIRO PHOTUM',
|
||||
email: 'cliente@photum.com',
|
||||
role: UserRole.EVENT_OWNER,
|
||||
avatar: 'https://i.pravatar.cc/150?u=client'
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
|
|||
Não tem uma conta?{' '}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onNavigate?.('register')}
|
||||
onClick={() => onNavigate?.('cadastro')}
|
||||
className="font-medium hover:opacity-80 transition-opacity"
|
||||
style={{ color: '#B9CF33' }}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
|
|||
setIsLoading(false);
|
||||
setSuccess(true);
|
||||
setTimeout(() => {
|
||||
onNavigate('login');
|
||||
onNavigate('entrar');
|
||||
}, 2000);
|
||||
}, 1500);
|
||||
};
|
||||
|
|
@ -88,7 +88,7 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
|
|||
setIsLoading(false);
|
||||
setSuccess(true);
|
||||
setTimeout(() => {
|
||||
onNavigate('login');
|
||||
onNavigate('entrar');
|
||||
}, 2000);
|
||||
}, 1500);
|
||||
};
|
||||
|
|
@ -146,7 +146,7 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
|
|||
<p className="mt-3 text-sm text-gray-600">
|
||||
Já tem uma conta?{' '}
|
||||
<button
|
||||
onClick={() => onNavigate('login')}
|
||||
onClick={() => onNavigate('entrar')}
|
||||
className="font-medium hover:opacity-80 transition-opacity"
|
||||
style={{ color: '#B9CF33' }}
|
||||
>
|
||||
|
|
@ -218,7 +218,7 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
|
|||
Concordo com os{' '}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onNavigate('terms')}
|
||||
onClick={() => onNavigate('termos')}
|
||||
className="hover:opacity-80 transition-opacity underline"
|
||||
style={{ color: '#B9CF33' }}
|
||||
>
|
||||
|
|
@ -227,7 +227,7 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
|
|||
e{' '}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onNavigate('privacy')}
|
||||
onClick={() => onNavigate('privacidade')}
|
||||
className="hover:opacity-80 transition-opacity underline"
|
||||
style={{ color: '#B9CF33' }}
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in a new issue