salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update App.tsx

Browse Source
This commit is contained in:
alorig
2025-11-09 21:34:48 +05:00
parent 526398b84c
commit f0acdb127b
1 changed files with 77 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

302
frontend/src/App.tsx
View File

@@ -5,20 +5,6 @@ import { ScrollToTop } from "./components/common/ScrollToTop";
import ProtectedRoute from "./components/auth/ProtectedRoute"; import ProtectedRoute from "./components/auth/ProtectedRoute";
import GlobalErrorDisplay from "./components/common/GlobalErrorDisplay"; import GlobalErrorDisplay from "./components/common/GlobalErrorDisplay";
import LoadingStateMonitor from "./components/common/LoadingStateMonitor"; 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) // Auth pages - loaded immediately (needed for login)
import SignIn from "./pages/AuthPages/SignIn"; import SignIn from "./pages/AuthPages/SignIn";
@@ -135,495 +121,361 @@ export default function App() {
> >
{/* Dashboard */} {/* Dashboard */}
<Route index path="/" element={ <Route index path="/" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}> <Home />
<Home /> </Suspense>
</Suspense>
</PageTransition>
} /> } />
{/* Planner Module */} {/* Planner Module */}
<Route path="/planner" element={ <Route path="/planner" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}> <PlannerDashboard />
<PlannerDashboard /> </Suspense>
</Suspense>
</PageTransition>
} /> } />
<Route path="/planner/keywords" element={ <Route path="/planner/keywords" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}> <Keywords />
<Keywords /> </Suspense>
</Suspense>
</PageTransition>
} /> } />
<Route path="/planner/clusters" element={ <Route path="/planner/clusters" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}> <Clusters />
<Clusters /> </Suspense>
</Suspense>
</PageTransition>
} /> } />
<Route path="/planner/ideas" element={ <Route path="/planner/ideas" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}> <Ideas />
<Ideas /> </Suspense>
</Suspense>
</PageTransition>
} /> } />
{/* Writer Module */} {/* Writer Module */}
<Route path="/writer" element={ <Route path="/writer" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<WriterDashboard /> <WriterDashboard />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/writer/tasks" element={ <Route path="/writer/tasks" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Tasks /> <Tasks />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/writer/content" element={ <Route path="/writer/content" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Content /> <Content />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/writer/drafts" element={ <Route path="/writer/drafts" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Drafts /> <Drafts />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/writer/images" element={ <Route path="/writer/images" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Images /> <Images />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/writer/published" element={ <Route path="/writer/published" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Published /> <Published />
</Suspense> </Suspense>
</PageTransition>
} /> } />
{/* Thinker Module */} {/* Thinker Module */}
<Route path="/thinker" element={ <Route path="/thinker" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<ThinkerDashboard /> <ThinkerDashboard />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/thinker/prompts" element={ <Route path="/thinker/prompts" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Prompts /> <Prompts />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/thinker/author-profiles" element={ <Route path="/thinker/author-profiles" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<AuthorProfiles /> <AuthorProfiles />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/thinker/profile" element={ <Route path="/thinker/profile" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<ThinkerProfile /> <ThinkerProfile />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/thinker/strategies" element={ <Route path="/thinker/strategies" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Strategies /> <Strategies />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/thinker/image-testing" element={ <Route path="/thinker/image-testing" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<ImageTesting /> <ImageTesting />
</Suspense> </Suspense>
</PageTransition>
} /> } />
{/* Billing Module */} {/* Billing Module */}
<Route path="/billing/credits" element={ <Route path="/billing/credits" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Credits /> <Credits />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/billing/transactions" element={ <Route path="/billing/transactions" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Transactions /> <Transactions />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/billing/usage" element={ <Route path="/billing/usage" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Usage /> <Usage />
</Suspense> </Suspense>
</PageTransition>
} /> } />
{/* Reference Data */} {/* Reference Data */}
<Route path="/reference/seed-keywords" element={ <Route path="/reference/seed-keywords" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<SeedKeywords /> <SeedKeywords />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/planner/keyword-opportunities" element={ <Route path="/planner/keyword-opportunities" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<KeywordOpportunities /> <KeywordOpportunities />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/reference/industries" element={ <Route path="/reference/industries" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<ReferenceIndustries /> <ReferenceIndustries />
</Suspense> </Suspense>
</PageTransition>
} /> } />
{/* Other Pages */} {/* Other Pages */}
<Route path="/analytics" element={ <Route path="/analytics" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Analytics /> <Analytics />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/schedules" element={ <Route path="/schedules" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Schedules /> <Schedules />
</Suspense> </Suspense>
</PageTransition>
} /> } />
{/* Settings */} {/* Settings */}
<Route path="/settings" element={ <Route path="/settings" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<GeneralSettings /> <GeneralSettings />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/settings/users" element={ <Route path="/settings/users" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Users /> <Users />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/settings/subscriptions" element={ <Route path="/settings/subscriptions" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Subscriptions /> <Subscriptions />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/settings/system" element={ <Route path="/settings/system" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<SystemSettings /> <SystemSettings />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/settings/account" element={ <Route path="/settings/account" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<AccountSettings /> <AccountSettings />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/settings/modules" element={ <Route path="/settings/modules" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<ModuleSettings /> <ModuleSettings />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/settings/ai" element={ <Route path="/settings/ai" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<AISettings /> <AISettings />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/settings/plans" element={ <Route path="/settings/plans" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Plans /> <Plans />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/settings/industries" element={ <Route path="/settings/industries" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Industries /> <Industries />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/settings/status" element={ <Route path="/settings/status" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Status /> <Status />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/settings/integration" element={ <Route path="/settings/integration" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Integration /> <Integration />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/settings/sites" element={ <Route path="/settings/sites" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Sites /> <Sites />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/settings/import-export" element={ <Route path="/settings/import-export" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<ImportExport /> <ImportExport />
</Suspense> </Suspense>
</PageTransition>
} /> } />
{/* Help */} {/* Help */}
<Route path="/help" element={ <Route path="/help" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Help /> <Help />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/help/docs" element={ <Route path="/help/docs" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Docs /> <Docs />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/help/system-testing" element={ <Route path="/help/system-testing" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<SystemTesting /> <SystemTesting />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/help/function-testing" element={ <Route path="/help/function-testing" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<FunctionTesting /> <FunctionTesting />
</Suspense> </Suspense>
</PageTransition>
} /> } />
{/* UI Elements */} {/* UI Elements */}
<Route path="/ui-elements/alerts" element={ <Route path="/ui-elements/alerts" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Alerts /> <Alerts />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/ui-elements/avatars" element={ <Route path="/ui-elements/avatars" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Avatars /> <Avatars />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/ui-elements/badges" element={ <Route path="/ui-elements/badges" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Badges /> <Badges />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/ui-elements/breadcrumb" element={ <Route path="/ui-elements/breadcrumb" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Breadcrumb /> <Breadcrumb />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/ui-elements/buttons" element={ <Route path="/ui-elements/buttons" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Buttons /> <Buttons />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/ui-elements/buttons-group" element={ <Route path="/ui-elements/buttons-group" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<ButtonsGroup /> <ButtonsGroup />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/ui-elements/cards" element={ <Route path="/ui-elements/cards" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Cards /> <Cards />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/ui-elements/carousel" element={ <Route path="/ui-elements/carousel" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Carousel /> <Carousel />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/ui-elements/dropdowns" element={ <Route path="/ui-elements/dropdowns" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Dropdowns /> <Dropdowns />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/ui-elements/images" element={ <Route path="/ui-elements/images" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<ImagesUI /> <ImagesUI />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/ui-elements/links" element={ <Route path="/ui-elements/links" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Links /> <Links />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/ui-elements/list" element={ <Route path="/ui-elements/list" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<List /> <List />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/ui-elements/modals" element={ <Route path="/ui-elements/modals" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Modals /> <Modals />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/ui-elements/notifications" element={ <Route path="/ui-elements/notifications" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Notifications /> <Notifications />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/ui-elements/pagination" element={ <Route path="/ui-elements/pagination" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Pagination /> <Pagination />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/ui-elements/popovers" element={ <Route path="/ui-elements/popovers" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Popovers /> <Popovers />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/ui-elements/pricing-table" element={ <Route path="/ui-elements/pricing-table" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<PricingTable /> <PricingTable />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/ui-elements/progressbar" element={ <Route path="/ui-elements/progressbar" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Progressbar /> <Progressbar />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/ui-elements/ribbons" element={ <Route path="/ui-elements/ribbons" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Ribbons /> <Ribbons />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/ui-elements/spinners" element={ <Route path="/ui-elements/spinners" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Spinners /> <Spinners />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/ui-elements/tabs" element={ <Route path="/ui-elements/tabs" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Tabs /> <Tabs />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/ui-elements/tooltips" element={ <Route path="/ui-elements/tooltips" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Tooltips /> <Tooltips />
</Suspense> </Suspense>
</PageTransition>
} /> } />
<Route path="/ui-elements/videos" element={ <Route path="/ui-elements/videos" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Videos /> <Videos />
</Suspense> </Suspense>
</PageTransition>
} /> } />
{/* Components (Showcase Page) */} {/* Components (Showcase Page) */}
<Route path="/components" element={ <Route path="/components" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Components /> <Components />
</Suspense> </Suspense>
</PageTransition>
} /> } />
{/* Redirect old notification route */} {/* Redirect old notification route */}
<Route path="/notifications" element={ <Route path="/notifications" element={
<PageTransition> <Suspense fallback={null}>
<Suspense fallback={<PageLoader />}>
<Notifications /> <Notifications />
</Suspense> </Suspense>
</PageTransition>
} /> } />
</Route> </Route>