Add Page

Create Page Component

// console/src/pages/todos/index.tsx
import { useState, useEffect } from 'react'
import { http, Button, Input } from '@readystart/console-core'

export default function TodosPage() {
  const [todos, setTodos] = useState<any[]>([])
  const [title, setTitle] = useState('')

  const fetchTodos = async () => {
    const res = await http.post('/v1/todos/list')
    if (res.statusCode === 200) setTodos(res.data)
  }

  const addTodo = async () => {
    if (!title) return
    const res = await http.post('/v1/todos/create', { title })
    if (res.statusCode === 200) {
      setTitle('')
      fetchTodos()
    }
  }

  useEffect(() => { fetchTodos() }, [])

  return (
    <div>
      <h2 className="text-lg font-medium mb-4">Todos</h2>
      <div className="flex gap-2 mb-4 max-w-md">
        <Input value={title} onChange={e => setTitle(e.target.value)} placeholder="New todo" />
        <Button onClick={addTodo}>Add</Button>
      </div>
      <div className="space-y-2">
        {todos.map(t => (
          <div key={t.id} className="p-3 bg-white rounded shadow-sm">{t.title}</div>
        ))}
      </div>
    </div>
  )
}

Add Route

// console/src/router/index.tsx
import TodosPage from '@/pages/todos'

// Add to AuthGuard > MainLayout children:
{ path: '/todos', element: <TodosPage /> },

Route Types

AuthGuard Flow

1. Check if token exists in localStorage
2. Call fetchUser() to validate token
3. Call fetchTenants() to get org list
4. Call fetchUser() again to get tenant.role
5. Load fetchConfig() + fetchAll() (billing data) in parallel

On logout, all state is cleared: token, user, billing, tenant.