import '@vly-ai/integrations';
import { Toaster } from "@/components/ui/sonner";
import { WhatsAppButton } from "@/components/site/WhatsAppButton";
import { RequireAdmin } from "@/components/RequireAdmin";
import { RequireAuth } from "@/components/RequireAuth";
import { VlyToolbar } from "../vly-toolbar-readonly.tsx";
import { ConvexAuthProvider } from "@convex-dev/auth/react";
import { ConvexReactClient } from "convex/react";
import React, { StrictMode, useEffect, lazy, Suspense } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter, Route, Routes, useLocation } from "react-router";
import { I18nProvider } from "@/lib/i18n";
import "./index.css";
// Lazy load route components for better code splitting
const Landing = lazy(() => import("./pages/Landing.tsx"));
const AuthPage = lazy(() => import("./pages/Auth.tsx"));
const Dashboard = lazy(() => import("./pages/Dashboard.tsx"));
const NotFound = lazy(() => import("./pages/NotFound.tsx"));
const LeadPage = lazy(() => import("./pages/LeadPage.tsx"));
const AiAutomation = lazy(() => import("./pages/AiAutomation.tsx"));
const About = lazy(() => import("./pages/About.tsx"));
const AiAgents = lazy(() => import("./pages/AiAgents.tsx"));
const TechnologyServices = lazy(() => import("./pages/TechnologyServices.tsx"));
const BusinessAutomation = lazy(() => import("./pages/services/BusinessAutomation.tsx"));
const WorkflowAutomation = lazy(() => import("./pages/services/WorkflowAutomation.tsx"));
const CustomAiDevelopment = lazy(() => import("./pages/services/CustomAiDevelopment.tsx"));
const AiIntegrations = lazy(() => import("./pages/services/AiIntegrations.tsx"));
const CloudInfra = lazy(() => import("./pages/services/CloudInfra.tsx"));
const SolutionsPage = lazy(() => import("./pages/Solutions.tsx"));
const IndustriesPage = lazy(() => import("./pages/Industries.tsx"));
const IndustryPage = lazy(() => import("./pages/IndustryPage.tsx"));
const CaseStudies = lazy(() => import("./pages/CaseStudies.tsx"));
const AutomationAssessment = lazy(() => import("./pages/AutomationAssessment.tsx"));
const AiSalesAgent = lazy(() => import("./pages/agents/AiSalesAgent.tsx"));
const AiSupportAgent = lazy(() => import("./pages/agents/AiSupportAgent.tsx"));
const AiWhatsappAgent = lazy(() => import("./pages/agents/AiWhatsappAgent.tsx"));
const AiReceptionist = lazy(() => import("./pages/agents/AiReceptionist.tsx"));
const AiKnowledgeAgent = lazy(() => import("./pages/agents/AiKnowledgeAgent.tsx"));
const AiOperationsAgent = lazy(() => import("./pages/agents/AiOperationsAgent.tsx"));
const AiHrAgent = lazy(() => import("./pages/agents/AiHrAgent.tsx"));
const WebDevelopment = lazy(() => import("./pages/services/WebDevelopment.tsx"));
const SoftwareDevelopment = lazy(() => import("./pages/services/SoftwareDevelopment.tsx"));
const MobileAppDevelopment = lazy(() => import("./pages/services/MobileAppDevelopment.tsx"));
const EcommerceDevelopment = lazy(() => import("./pages/services/EcommerceDevelopment.tsx"));
const Cybersecurity = lazy(() => import("./pages/services/Cybersecurity.tsx"));
const DigitalMarketing = lazy(() => import("./pages/services/DigitalMarketing.tsx"));
const PerformanceMarketing = lazy(() => import("./pages/services/PerformanceMarketing.tsx"));
const GisMapping = lazy(() => import("./pages/services/GisMapping.tsx"));
const LidarProcessing = lazy(() => import("./pages/services/LidarProcessing.tsx"));
const WebHosting = lazy(() => import("./pages/services/WebHosting.tsx"));
const ThreatModelling = lazy(() => import("./pages/cybersecurity/ThreatModelling.tsx"));
const RiskManagement = lazy(() => import("./pages/cybersecurity/RiskManagement.tsx"));
const VulnerabilityManagement = lazy(() => import("./pages/cybersecurity/VulnerabilityManagement.tsx"));
const PenetrationTesting = lazy(() => import("./pages/cybersecurity/PenetrationTesting.tsx"));
const ApplicationSecurity = lazy(() => import("./pages/cybersecurity/ApplicationSecurity.tsx"));
const SecurityArchitecture = lazy(() => import("./pages/cybersecurity/SecurityArchitecture.tsx"));
const SecurityAudits = lazy(() => import("./pages/cybersecurity/SecurityAudits.tsx"));
const IndustrialCybersecurity = lazy(() => import("./pages/cybersecurity/IndustrialCybersecurity.tsx"));
const SecurityMonitoringSiem = lazy(() => import("./pages/cybersecurity/SecurityMonitoringSiem.tsx"));
const EndpointDetection = lazy(() => import("./pages/cybersecurity/EndpointDetection.tsx"));
const RegulatoryCompliance = lazy(() => import("./pages/cybersecurity/RegulatoryCompliance.tsx"));
const AiSolutions = lazy(() => import("./pages/AiSolutions.tsx"));
const Blog = lazy(() => import("./pages/Blog.tsx"));
const Faq = lazy(() => import("./pages/Faq.tsx"));
const Pricing = lazy(() => import("./pages/Pricing.tsx"));
const Store = lazy(() => import("./pages/Store.tsx"));
const Support = lazy(() => import("./pages/Support.tsx"));
const BlogPost = lazy(() => import("./pages/BlogPost.tsx"));
const Privacy = lazy(() => import("./pages/Privacy.tsx"));
const Terms = lazy(() => import("./pages/Terms.tsx"));
const Refunds = lazy(() => import("./pages/Refunds.tsx"));
// Admin panel
const AdminLayout = lazy(() => import("./pages/admin/AdminLayout.tsx"));
const AdminDashboard = lazy(() => import("./pages/admin/AdminDashboard.tsx"));
const AdminLeads = lazy(() => import("./pages/admin/AdminLeads.tsx"));
const AdminQuotes = lazy(() => import("./pages/admin/AdminQuotes.tsx"));
const AdminCustomers = lazy(() => import("./pages/admin/AdminCustomers.tsx"));
const AdminPages = lazy(() => import("./pages/admin/AdminPages.tsx"));
const AdminHomepage = lazy(() => import("./pages/admin/AdminHomepage.tsx"));
const AdminMenus = lazy(() => import("./pages/admin/AdminMenus.tsx"));
const AdminBlog = lazy(() => import("./pages/admin/AdminBlog.tsx"));
const AdminServices = lazy(() => import("./pages/admin/AdminServices.tsx"));
const AdminFaqs = lazy(() => import("./pages/admin/AdminFaqs.tsx"));
const AdminTestimonials = lazy(() => import("./pages/admin/AdminTestimonials.tsx"));
const AdminAgents = lazy(() => import("./pages/admin/AdminAgents.tsx"));
const AdminKnowledge = lazy(() => import("./pages/admin/AdminKnowledge.tsx"));
const AdminConversations = lazy(() => import("./pages/admin/AdminConversations.tsx"));
const AdminProducts = lazy(() => import("./pages/admin/AdminProducts.tsx"));
const AdminOrders = lazy(() => import("./pages/admin/AdminOrders.tsx"));
const AdminCoupons = lazy(() => import("./pages/admin/AdminCoupons.tsx"));
const AdminReviews = lazy(() => import("./pages/admin/AdminReviews.tsx"));
const AdminTickets = lazy(() => import("./pages/admin/AdminTickets.tsx"));
const AdminUsers = lazy(() => import("./pages/admin/AdminUsers.tsx"));
const AdminRoles = lazy(() => import("./pages/admin/AdminRoles.tsx"));
const AdminNotifications = lazy(() => import("./pages/admin/AdminNotifications.tsx"));
const AdminAudit = lazy(() => import("./pages/admin/AdminAudit.tsx"));
const AdminRedirects = lazy(() => import("./pages/admin/AdminRedirects.tsx"));
const AdminBackup = lazy(() => import("./pages/admin/AdminBackup.tsx"));
const AdminSettings = lazy(() => import("./pages/admin/AdminSettings.tsx"));
// Simple loading fallback for route transitions
function RouteLoading() {
return (
);
}
/** Silent error boundary — if VlyToolbar crashes it renders nothing instead of
* crashing the whole app (e.g. hook errors in WebContainer environment). */
class ToolbarErrorBoundary extends React.Component<
{ children: React.ReactNode },
{ hasError: boolean }
> {
state = { hasError: false };
static getDerivedStateFromError() {
return { hasError: true };
}
componentDidCatch(err: Error) {
console.warn("[VlyToolbar] Caught error, toolbar disabled:", err.message);
}
render() {
return this.state.hasError ? null : this.props.children;
}
}
/** Hard guard so runtime errors never leave the preview as a blank page. */
class RootErrorBoundary extends React.Component<
{ children: React.ReactNode },
{ hasError: boolean; message: string; stack: string }
> {
state = { hasError: false, message: "", stack: "" };
static getDerivedStateFromError(error: Error) {
return {
hasError: true,
message: error.message || "Unknown runtime error",
stack: error.stack || "",
};
}
componentDidCatch(err: Error) {
console.error("[WebContainer preview] Root crash:", err);
}
render() {
if (this.state.hasError) {
return (
Preview runtime error
{this.state.message}
{this.state.stack && (
{this.state.stack}
)}
);
}
return this.props.children;
}
}
const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL as string);
/** Scrolls to the top of the window on every route change. */
function ScrollToTop() {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
return null;
}
function RouteSyncer() {
const location = useLocation();
useEffect(() => {
window.parent.postMessage(
{ type: "iframe-route-change", path: location.pathname },
"*",
);
}, [location.pathname]);
useEffect(() => {
function handleMessage(event: MessageEvent) {
if (event.data?.type === "navigate") {
if (event.data.direction === "back") window.history.back();
if (event.data.direction === "forward") window.history.forward();
}
}
window.addEventListener("message", handleMessage);
return () => window.removeEventListener("message", handleMessage);
}, []);
return null;
}
createRoot(document.getElementById("root")!).render(
}>
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
}
/>
}
/>
}
>
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
} />
,
);