Antigravity AI Agent
319 lines
11 KiB
TypeScript
319 lines
11 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { HybridBackend } from './services/backend.ts';
|
|
|
|
import { Sidebar } from './components/Sidebar.tsx';
|
|
import { Menu } from 'lucide-react';
|
|
|
|
import { ToastContainer } from './components/Toast.tsx';
|
|
|
|
import { Dashboard } from './views/Dashboard.tsx';
|
|
import { LeadsView } from './views/LeadsView.tsx';
|
|
import { PublicContactForm } from './views/PublicContactForm.tsx';
|
|
import { PatientsView } from './views/PatientsView.tsx';
|
|
import { AgendaView } from './views/AgendaView.tsx';
|
|
import { OrthoView } from './views/OrthoView.tsx';
|
|
import { FinanceiroView } from './views/FinanceiroView.tsx';
|
|
import { MeusTratamentos } from './views/MeusTratamentos';
|
|
import { LancarGTO } from './views/LancarGTO';
|
|
import { LoginView } from './views/LoginView.tsx';
|
|
import { LandingPage } from './views/LandingPage.tsx';
|
|
import { UpdateDbView } from './views/UpdateDbView.tsx';
|
|
import { ClinicasView } from './views/ClinicasView.tsx';
|
|
import { DentistRegisterView } from './views/DentistRegisterView.tsx';
|
|
import { DentistasView, EspecialidadesView, PlanosView, SyncView, ProcedimentosView } from './views/AdminViews.tsx';
|
|
import { NotificationsView } from './views/NotificationsView.tsx';
|
|
import { ReportsView } from './views/ReportsView.tsx';
|
|
|
|
export type ViewKey =
|
|
| 'landing'
|
|
| 'dashboard'
|
|
| 'leads'
|
|
| 'public'
|
|
| 'pacientes'
|
|
| 'agenda'
|
|
| 'ortodontia'
|
|
| 'financeiro'
|
|
| 'login'
|
|
| 'update'
|
|
| 'dentistas'
|
|
| 'especialidades'
|
|
| 'procedimentos'
|
|
| 'planos'
|
|
| 'tratamentos'
|
|
| 'lancar-gto'
|
|
| 'notificacoes'
|
|
| 'clinicas'
|
|
| 'sync'
|
|
| 'relatorios'
|
|
| 'cadastro-dentista';
|
|
|
|
// ------- URL <-> VIEW mapping -------
|
|
const ROUTE_MAP: Record<string, ViewKey> = {
|
|
'/': 'landing',
|
|
'/dashboard': 'dashboard',
|
|
'/landing': 'landing',
|
|
'/leads': 'leads',
|
|
'/contato': 'public',
|
|
'/pacientes': 'pacientes',
|
|
'/agenda': 'agenda',
|
|
'/ortodontia': 'ortodontia',
|
|
'/financeiro': 'financeiro',
|
|
'/login': 'login',
|
|
'/update': 'update',
|
|
'/clinicas': 'clinicas',
|
|
'/admin/dentistas': 'dentistas',
|
|
'/admin/especialidades': 'especialidades',
|
|
'/admin/procedimentos': 'procedimentos',
|
|
'/admin/planos': 'planos',
|
|
'/admin/sync': 'sync',
|
|
'/tratamentos': 'tratamentos',
|
|
'/lancar-gto': 'lancar-gto',
|
|
'/notificacoes': 'notificacoes',
|
|
'/relatorios': 'relatorios',
|
|
'/cadastro-dentista': 'cadastro-dentista',
|
|
};
|
|
|
|
const VIEW_TO_ROUTE: Record<ViewKey, string> = {
|
|
landing: '/',
|
|
dashboard: '/dashboard',
|
|
leads: '/leads',
|
|
public: '/contato',
|
|
pacientes: '/pacientes',
|
|
agenda: '/agenda',
|
|
ortodontia: '/ortodontia',
|
|
financeiro: '/financeiro',
|
|
login: '/login',
|
|
update: '/update',
|
|
clinicas: '/clinicas',
|
|
dentistas: '/admin/dentistas',
|
|
especialidades: '/admin/especialidades',
|
|
procedimentos: '/admin/procedimentos',
|
|
planos: '/admin/planos',
|
|
tratamentos: '/tratamentos',
|
|
'lancar-gto': '/lancar-gto',
|
|
notificacoes: '/notificacoes',
|
|
relatorios: '/relatorios',
|
|
sync: '/admin/sync',
|
|
'cadastro-dentista': '/cadastro-dentista'
|
|
};
|
|
|
|
/** Get the hash path, e.g. "/#/pacientes" → "/pacientes" */
|
|
function getHashPath(): string {
|
|
const hash = window.location.hash;
|
|
if (hash.startsWith('#/')) return hash.slice(1); // "#/pacientes" → "/pacientes"
|
|
if (hash === '#' || hash === '') return '/';
|
|
return '/';
|
|
}
|
|
|
|
/** Resolve current URL to a ViewKey */
|
|
function resolveViewFromUrl(): ViewKey {
|
|
// Legacy support: ?p=contato
|
|
if (window.location.search.includes('p=contato')) return 'public';
|
|
// Legacy support: #update_db (old non-slash hash)
|
|
if (window.location.hash === '#update_db') return 'update';
|
|
|
|
const path = getHashPath();
|
|
return ROUTE_MAP[path] ?? 'dashboard';
|
|
}
|
|
|
|
/** Push a new hash-based URL without reloading the page */
|
|
function navigate(view: ViewKey) {
|
|
const route = VIEW_TO_ROUTE[view];
|
|
window.location.hash = route;
|
|
}
|
|
|
|
// ------- App -------
|
|
const App: React.FC = () => {
|
|
const [isSidebarOpen, setSidebarOpen] = useState(false);
|
|
const currentRole = HybridBackend.getCurrentRole();
|
|
const activeWorkspace = HybridBackend.getActiveWorkspace();
|
|
const clinColor = activeWorkspace?.cor || '#2563eb';
|
|
|
|
const isViewAllowed = (view: ViewKey, role: string): boolean => {
|
|
if (['landing', 'login', 'public', 'update'].includes(view)) return true;
|
|
if (role === 'admin' || role === 'donoclinica') return true;
|
|
|
|
const permissions: Record<string, ViewKey[]> = {
|
|
paciente: ['tratamentos', 'notificacoes'],
|
|
dentista: ['dashboard', 'pacientes', 'agenda', 'ortodontia', 'tratamentos', 'notificacoes', 'clinicas'],
|
|
funcionario: ['dashboard', 'leads', 'pacientes', 'agenda', 'financeiro', 'tratamentos', 'lancar-gto', 'notificacoes', 'clinicas'],
|
|
};
|
|
|
|
return permissions[role]?.includes(view) || false;
|
|
};
|
|
|
|
const getDefaultViewForRole = (role: string): ViewKey => {
|
|
if (role === 'paciente') return 'tratamentos';
|
|
return 'dashboard';
|
|
};
|
|
|
|
const getInitialView = (): ViewKey => {
|
|
const fromUrl = resolveViewFromUrl();
|
|
const role = HybridBackend.getCurrentRole();
|
|
|
|
// If user is authenticated, and trying to go to landing or login, send to default for role
|
|
if (HybridBackend.isAuthenticated() && ['landing', 'login'].includes(fromUrl)) return getDefaultViewForRole(role);
|
|
|
|
// If URL points to a protected view but user is not auth'd → landing (or login)
|
|
const isProtected = !['landing', 'login', 'public'].includes(fromUrl);
|
|
if (isProtected && !HybridBackend.isAuthenticated()) return 'landing';
|
|
|
|
// Verify permission for the view
|
|
if (HybridBackend.isAuthenticated() && !isViewAllowed(fromUrl, role)) {
|
|
return getDefaultViewForRole(role);
|
|
}
|
|
|
|
return fromUrl;
|
|
};
|
|
|
|
const [currentView, setCurrentView] = useState<ViewKey>(getInitialView);
|
|
|
|
// Keep URL in sync when view changes programmatically via sidebar
|
|
const handleNavigate = (view: ViewKey) => {
|
|
if (isViewAllowed(view, currentRole)) {
|
|
setCurrentView(view);
|
|
navigate(view);
|
|
setSidebarOpen(false); // Close sidebar on mobile after navigation
|
|
}
|
|
};
|
|
|
|
// Sync view when user uses browser back/forward buttons
|
|
useEffect(() => {
|
|
const onHashChange = () => {
|
|
const fromUrl = resolveViewFromUrl();
|
|
const role = HybridBackend.getCurrentRole();
|
|
const isProtected = !['landing', 'login', 'public'].includes(fromUrl);
|
|
|
|
if (isProtected && !HybridBackend.isAuthenticated()) {
|
|
setCurrentView('landing');
|
|
navigate('landing');
|
|
return;
|
|
}
|
|
|
|
if (HybridBackend.isAuthenticated() && !isViewAllowed(fromUrl, role)) {
|
|
const defView = getDefaultViewForRole(role);
|
|
setCurrentView(defView);
|
|
navigate(defView);
|
|
return;
|
|
}
|
|
|
|
setCurrentView(fromUrl);
|
|
};
|
|
window.addEventListener('hashchange', onHashChange);
|
|
return () => window.removeEventListener('hashchange', onHashChange);
|
|
}, []);
|
|
|
|
// Inject dynamic brand color
|
|
useEffect(() => {
|
|
document.documentElement.style.setProperty('--brand-color', clinColor);
|
|
document.documentElement.style.setProperty('--brand-color-soft', `${clinColor}11`);
|
|
}, [clinColor]);
|
|
|
|
// On mount: if there's no hash yet, write the current view into the URL
|
|
useEffect(() => {
|
|
if (!window.location.hash || window.location.hash === '#update_db') {
|
|
navigate(currentView);
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
const renderView = () => {
|
|
switch (currentView) {
|
|
case 'landing': return <LandingPage onGetStarted={() => handleNavigate('login')} />;
|
|
case 'dashboard': return <Dashboard />;
|
|
case 'leads': return <LeadsView />;
|
|
case 'public': return <PublicContactForm />;
|
|
case 'pacientes': return <PatientsView />;
|
|
case 'agenda': return <AgendaView />;
|
|
case 'ortodontia': return <OrthoView />;
|
|
case 'financeiro': return <FinanceiroView />;
|
|
case 'dentistas': return <DentistasView />;
|
|
case 'especialidades': return <EspecialidadesView />;
|
|
case 'procedimentos': return <ProcedimentosView />;
|
|
case 'planos': return <PlanosView />;
|
|
case 'sync': return <SyncView />;
|
|
case 'tratamentos': return <MeusTratamentos />;
|
|
case 'lancar-gto': return <LancarGTO />;
|
|
case 'update': return <UpdateDbView />;
|
|
case 'clinicas': return <ClinicasView />;
|
|
case 'notificacoes': return <NotificationsView />;
|
|
case 'relatorios': return <ReportsView />;
|
|
case 'cadastro-dentista': return <DentistRegisterView />;
|
|
case 'login':
|
|
default:
|
|
return <LoginView onLoginSuccess={() => {
|
|
const role = HybridBackend.getCurrentRole();
|
|
handleNavigate(getDefaultViewForRole(role));
|
|
}} />;
|
|
}
|
|
};
|
|
|
|
const isStandaloneView = ['landing', 'login', 'public', 'update', 'cadastro-dentista'].includes(currentView);
|
|
|
|
return (
|
|
<>
|
|
<div className="flex h-screen bg-gray-50 text-gray-800 overflow-hidden relative">
|
|
<style>{`
|
|
:root { --brand-color: ${clinColor}; }
|
|
.bg-brand { background-color: var(--brand-color); }
|
|
.text-brand { color: var(--brand-color); }
|
|
.border-brand { border-color: var(--brand-color); }
|
|
.hover\\:bg-brand:hover { background-color: var(--brand-color); }
|
|
.focus\\:ring-brand:focus { --tw-ring-color: var(--brand-color); }
|
|
`}</style>
|
|
|
|
{!isStandaloneView && (
|
|
<>
|
|
{/* Mobile Hamburger Overlay */}
|
|
{isSidebarOpen && (
|
|
<div
|
|
className="fixed inset-0 bg-black/50 z-20 md:hidden backdrop-blur-sm transition-opacity"
|
|
onClick={() => setSidebarOpen(false)}
|
|
></div>
|
|
)}
|
|
|
|
{/* Sidebar with mobile toggle logic */}
|
|
<div className={`fixed inset-y-0 left-0 z-30 transform transition-transform duration-300 md:relative md:translate-x-0 ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'}`}>
|
|
<Sidebar
|
|
activeTab={currentView}
|
|
setActiveTab={(t) => handleNavigate(t as ViewKey)}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
<main className={`flex-1 h-full relative flex flex-col min-w-0`}>
|
|
{!isStandaloneView && (
|
|
<>
|
|
{/* Mobile Navbar Header */}
|
|
<div className="md:hidden flex items-center justify-between px-4 py-3 bg-white border-b border-gray-200">
|
|
<button
|
|
onClick={() => setSidebarOpen(true)}
|
|
className="p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
|
|
>
|
|
<Menu size={24} />
|
|
</button>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-8 h-8 rounded flex items-center justify-center text-white font-bold text-sm shadow-sm" style={{ backgroundColor: clinColor }}>
|
|
S
|
|
</div>
|
|
<span className="font-bold text-gray-800 text-sm tracking-tight uppercase">SCOREODONTO</span>
|
|
</div>
|
|
<div className="w-8"></div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
<div className="flex-1 overflow-y-auto p-4 md:p-8 pb-20 scroll-smooth">
|
|
<div className="max-w-7xl mx-auto h-full">
|
|
{renderView()}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<ToastContainer />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default App; |