feat: basic initial UI layout for mobile and desktop

apps/web/src/router.tsx

@@ -1,43 +1,100 @@
-import { createRootRoute, createRoute, createRouter } from '@tanstack/react-router'
+import { createRootRoute, createRoute, createRouter, Outlet } from '@tanstack/react-router'
 import { RootLayout } from './components/layout'
 import { HomeView } from './routes/home'
 import { GroupsView } from './routes/groups'
 import { PaymentsView } from './routes/payments'
 import { SettingsView } from './routes/settings'
+import { ProfileView } from './routes/profile'
+import { SecurityPage } from './routes/security'
+import { OrganizationsPage } from './routes/organizations'
+import { LoginPage } from './routes/auth/login'
+import { SignupPage } from './routes/auth/signup'
+import { VerifyEmailPage } from './routes/auth/verify-email'
 
 const rootRoute = createRootRoute({
+  component: () => <Outlet />,
+})
+
+const loginRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/login',
+  component: LoginPage,
+})
+
+const signupRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/signup',
+  component: SignupPage,
+})
+
+const verifyEmailRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/verify-email',
+  component: VerifyEmailPage,
+})
+
+// Capa con la navegación de la app autenticada (Sidebar + BottomNav).
+const appLayoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  id: 'app',
   component: RootLayout,
 })
 
 const indexRoute = createRoute({
-  getParentRoute: () => rootRoute,
+  getParentRoute: () => appLayoutRoute,
   path: '/',
   component: HomeView,
 })
 
 const groupsRoute = createRoute({
-  getParentRoute: () => rootRoute,
+  getParentRoute: () => appLayoutRoute,
   path: '/groups',
   component: GroupsView,
 })
 
 const paymentsRoute = createRoute({
-  getParentRoute: () => rootRoute,
+  getParentRoute: () => appLayoutRoute,
   path: '/payments',
   component: PaymentsView,
 })
 
 const settingsRoute = createRoute({
-  getParentRoute: () => rootRoute,
+  getParentRoute: () => appLayoutRoute,
   path: '/settings',
   component: SettingsView,
 })
 
+const securityRoute = createRoute({
+  getParentRoute: () => appLayoutRoute,
+  path: '/seguridad',
+  component: SecurityPage,
+})
+
+const profileRoute = createRoute({
+  getParentRoute: () => appLayoutRoute,
+  path: '/profile',
+  component: ProfileView,
+})
+
+const organizationsRoute = createRoute({
+  getParentRoute: () => appLayoutRoute,
+  path: '/settings/organizations',
+  component: OrganizationsPage,
+})
+
 const routeTree = rootRoute.addChildren([
-  indexRoute,
-  groupsRoute,
-  paymentsRoute,
-  settingsRoute,
+  loginRoute,
+  signupRoute,
+  verifyEmailRoute,
+  appLayoutRoute.addChildren([
+    indexRoute,
+    groupsRoute,
+    paymentsRoute,
+    settingsRoute,
+    securityRoute,
+    organizationsRoute,
+    profileRoute,
+  ]),
 ])
 
 export const router = createRouter({ routeTree })
@@ -46,4 +103,4 @@ declare module '@tanstack/react-router' {
   interface Register {
     router: typeof router
   }
-}
+}