Update App.tsx
This commit is contained in:
alorig
@@ -5,20 +5,6 @@ import { ScrollToTop } from "./components/common/ScrollToTop";
|
||||
import ProtectedRoute from "./components/auth/ProtectedRoute";
|
||||
import GlobalErrorDisplay from "./components/common/GlobalErrorDisplay";
|
||||
import LoadingStateMonitor from "./components/common/LoadingStateMonitor";
|
||||
import PageTransition from "./components/common/PageTransition";
|
||||
|
||||
// Modern page loader component
|
||||
const PageLoader = () => (
|
||||
<div className="flex items-center justify-center min-h-screen bg-white dark:bg-gray-900">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<div className="relative w-12 h-12">
|
||||
<div className="absolute inset-0 border-4 border-gray-200 dark:border-gray-700 rounded-full"></div>
|
||||
<div className="absolute inset-0 border-4 border-transparent border-t-brand-500 rounded-full animate-spin"></div>
|
||||
</div>
|
||||
<div className="w-2 h-2 bg-brand-500 rounded-full animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Auth pages - loaded immediately (needed for login)
|
||||
import SignIn from "./pages/AuthPages/SignIn";
|
||||
@@ -135,495 +121,361 @@ export default function App() {
|
||||
>
|
||||
{/* Dashboard */}
|
||||
<Route index path="/" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Home />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
<Suspense fallback={null}>
|
||||
<Home />
|
||||
</Suspense>
|
||||
} />
|
||||
|
||||
{/* Planner Module */}
|
||||
<Route path="/planner" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<PlannerDashboard />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
<Suspense fallback={null}>
|
||||
<PlannerDashboard />
|
||||
</Suspense>
|
||||
} />
|
||||
<Route path="/planner/keywords" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Keywords />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
<Suspense fallback={null}>
|
||||
<Keywords />
|
||||
</Suspense>
|
||||
} />
|
||||
<Route path="/planner/clusters" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Clusters />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
<Suspense fallback={null}>
|
||||
<Clusters />
|
||||
</Suspense>
|
||||
} />
|
||||
<Route path="/planner/ideas" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Ideas />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
<Suspense fallback={null}>
|
||||
<Ideas />
|
||||
</Suspense>
|
||||
} />
|
||||
|
||||
{/* Writer Module */}
|
||||
<Route path="/writer" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<WriterDashboard />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/writer/tasks" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Tasks />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/writer/content" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Content />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/writer/drafts" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Drafts />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/writer/images" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Images />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/writer/published" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Published />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
|
||||
{/* Thinker Module */}
|
||||
<Route path="/thinker" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<ThinkerDashboard />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/thinker/prompts" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Prompts />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/thinker/author-profiles" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<AuthorProfiles />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/thinker/profile" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<ThinkerProfile />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/thinker/strategies" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Strategies />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/thinker/image-testing" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<ImageTesting />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
|
||||
{/* Billing Module */}
|
||||
<Route path="/billing/credits" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Credits />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/billing/transactions" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Transactions />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/billing/usage" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Usage />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
|
||||
{/* Reference Data */}
|
||||
<Route path="/reference/seed-keywords" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<SeedKeywords />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/planner/keyword-opportunities" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<KeywordOpportunities />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/reference/industries" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<ReferenceIndustries />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
|
||||
{/* Other Pages */}
|
||||
<Route path="/analytics" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Analytics />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/schedules" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Schedules />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
|
||||
{/* Settings */}
|
||||
<Route path="/settings" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<GeneralSettings />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/settings/users" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Users />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/settings/subscriptions" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Subscriptions />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/settings/system" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<SystemSettings />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/settings/account" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<AccountSettings />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/settings/modules" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<ModuleSettings />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/settings/ai" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<AISettings />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/settings/plans" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Plans />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/settings/industries" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Industries />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/settings/status" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Status />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/settings/integration" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Integration />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/settings/sites" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Sites />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/settings/import-export" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<ImportExport />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
|
||||
{/* Help */}
|
||||
<Route path="/help" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Help />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/help/docs" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Docs />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/help/system-testing" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<SystemTesting />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/help/function-testing" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<FunctionTesting />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
|
||||
{/* UI Elements */}
|
||||
<Route path="/ui-elements/alerts" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Alerts />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/ui-elements/avatars" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Avatars />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/ui-elements/badges" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Badges />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/ui-elements/breadcrumb" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Breadcrumb />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/ui-elements/buttons" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Buttons />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/ui-elements/buttons-group" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<ButtonsGroup />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/ui-elements/cards" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Cards />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/ui-elements/carousel" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Carousel />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/ui-elements/dropdowns" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Dropdowns />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/ui-elements/images" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<ImagesUI />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/ui-elements/links" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Links />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/ui-elements/list" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<List />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/ui-elements/modals" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Modals />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/ui-elements/notifications" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Notifications />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/ui-elements/pagination" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Pagination />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/ui-elements/popovers" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Popovers />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/ui-elements/pricing-table" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<PricingTable />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/ui-elements/progressbar" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Progressbar />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/ui-elements/ribbons" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Ribbons />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/ui-elements/spinners" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Spinners />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/ui-elements/tabs" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Tabs />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/ui-elements/tooltips" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Tooltips />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
<Route path="/ui-elements/videos" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Videos />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
|
||||
{/* Components (Showcase Page) */}
|
||||
<Route path="/components" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Components />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
|
||||
{/* Redirect old notification route */}
|
||||
<Route path="/notifications" element={
|
||||
<PageTransition>
|
||||
<Suspense fallback={<PageLoader />}>
|
||||
<Suspense fallback={null}>
|
||||
<Notifications />
|
||||
</Suspense>
|
||||
</PageTransition>
|
||||
} />
|
||||
</Route>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user