apps/canvas/front/src/App.tsx

import { ReactFlowProvider } from "@xyflow/react";
import "./App.css";
import { CanvasBuilder } from "./Canvas";
import { Tabs, TabsTrigger, TabsContent, TabsList } from "./components/ui/tabs";
import { Config } from "./Config";
import { Integrations } from "./Integrations";
import { Toaster } from "./components/ui/toaster";
import { ProjectSelect } from "./ProjectSelect";
import { Logs } from "./Monitoring";
import { Overview } from "./Overview";

export default function App() {
	return (
		<ReactFlowProvider>
			<div className="h-screen flex flex-col p-1">
				<AppImpl />
				<Toaster />
			</div>
		</ReactFlowProvider>
	);
}

function AppImpl() {
	return (
		<Tabs defaultValue="overview" className="flex-1 flex flex-col min-h-0">
			<div className="flex justify-between border-b">
				<TabsList className="!rounded-none">
					<TabsTrigger value="overview">Overview</TabsTrigger>
					<TabsTrigger value="canvas">Canvas</TabsTrigger>
					<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
					<TabsTrigger value="config">Config</TabsTrigger>
					<TabsTrigger value="integrations">Integrations</TabsTrigger>
				</TabsList>
				<ProjectSelect className="w-fit min-w-[150px]" />
			</div>
			<TabsContent value="overview" className="!mt-0 flex-1 min-h-0">
				<Overview />
			</TabsContent>
			<TabsContent value="canvas" className="!mt-0 flex-1 min-h-0">
				<CanvasBuilder />
			</TabsContent>
			<TabsContent value="config" className="!mt-0 flex-1 min-h-0">
				<Config />
			</TabsContent>
			<TabsContent value="integrations" className="!mt-0 flex-1 min-h-0">
				<Integrations />
			</TabsContent>
			<TabsContent value="monitoring" className="!mt-0 flex-1 min-h-0">
				<Logs />
			</TabsContent>
		</Tabs>
	);
}