Add pages

// src/web/App.tsx
import "@synthetiq/app-framework/web/styles";
import "./index.css";
import {
  BaseBrowserApp, configureFramework, initTrpc,
  systemRoutes, ProtectedRoute,
} from "@synthetiq/app-framework/web";
import { APP_ID, BASE_PATH, API_BASE } from "../constants";
import { DashboardPage } from "./pages/Dashboard";
import { TasksPage } from "./pages/Tasks";
import { TaskDetailPage } from "./pages/TaskDetail";

configureFramework({ basePath: BASE_PATH, appId: APP_ID, apiBase: API_BASE });
initTrpc();

class App extends BaseBrowserApp {
  constructor() {
    super({ basePath: BASE_PATH, displayName: "Task Tracker" });

    this.useRouter({
      ...systemRoutes(BASE_PATH, "Task Tracker"),
      "/": {
        title: "Dashboard",
        description: "Overview of tasks and recent activity.",
        metaTitle: "Dashboard | Task Tracker",
        metaDescription: "View your task dashboard",
        render: () => (
          <ProtectedRoute>
            <DashboardPage />
          </ProtectedRoute>
        ),
      },
      "/tasks": {
        title: "Tasks",
        description: "List of all tasks with filtering by status and priority.",
        metaTitle: "Tasks | Task Tracker",
        metaDescription: "View and manage your tasks",
        render: () => (
          <ProtectedRoute>
            <TasksPage />
          </ProtectedRoute>
        ),
      },
      "/tasks/:id": {
        title: "Task Detail",
        description: "Detailed view of a single task with edit and status actions.",
        metaTitle: "Task | Task Tracker",
        metaDescription: "View task details",
        render: (routeParams) => (
          <ProtectedRoute>
            <TaskDetailPage id={routeParams?.id ?? ""} />
          </ProtectedRoute>
        ),
      },
    });
  }
}

new App();

// src/web/pages/Tasks.tsx
import { useAuth } from '@synthetiq/app-framework/web';
import { trpcReact } from '../trpc';

export function TasksPage() {
  const { scopes } = useAuth();
  const isAdmin = scopes.includes('tasks:viewAll');

  const { data: tasks, isLoading } = isAdmin
    ? trpcReact.tasks.getAllTasks.useQuery()
    : trpcReact.tasks.getMyTasks.useQuery();

  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      <h1>Tasks</h1>
      {tasks?.map(task => (
        <a key={task.id} href={`/tasks/${task.id}`}>
          {task.title} — {task.status}
        </a>
      ))}
    </div>
  );
}

// src/web/pages/TaskDetail.tsx
import { useAuth } from '@synthetiq/app-framework/web';
import { trpcReact } from '../trpc';

export function TaskDetailPage({ id }: { id: string }) {
  const { scopes } = useAuth();
  const isAdmin = scopes.includes('tasks:viewAll');

  const { data: tasks } = isAdmin
    ? trpcReact.tasks.getAllTasks.useQuery()
    : trpcReact.tasks.getMyTasks.useQuery();

  const utils = trpcReact.useUtils();
  const task = tasks?.find(t => t.id === id);

  const updateMutation = trpcReact.tasks.updateTask.useMutation({
    onSuccess: () => {
      utils.tasks.getMyTasks.invalidate();
      utils.tasks.getAllTasks.invalidate();
    },
  });

  if (!task) return <div>Task not found</div>;

  return (
    <div>
      <h1>{task.title}</h1>
      <p>Status: {task.status}</p>
      <p>Priority: {task.priority}</p>
      <button onClick={() => updateMutation.mutate({ id, status: 'completed' })}>
        Mark Complete
      </button>
    </div>
  );
}

import { useAuth } from "@synthetiq/app-framework/web";

function Header() {
  const { user } = useAuth();
  return <span>Welcome, {user?.name || user?.email}</span>;
}

import { UserMenu } from "@synthetiq/app-framework/web";

function Header() {
  return (
    <header className="flex h-14 items-center justify-between border-b border-border px-4">
      <span className="font-medium">Task Tracker</span>
      <UserMenu />
    </header>
  );
}