Configure React Router initial setup

application/account-management/WebApp/package.json

@@ -11,6 +11,8 @@
     "react": "18.3.0-canary-c47c306a7-20231109",
     "react-aria-components": "^1.0.0-rc.0",
     "react-dom": "18.3.0-canary-c47c306a7-20231109",
+    "react-dom-confetti": "^0.2.0",
+    "react-router-dom": "^6.19.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {

application/account-management/WebApp/src/App.tsx

@@ -1,7 +1,9 @@
-import { CreateTenantForm } from "@/ui/tenant/CreateTenantForm.tsx";
-
 function App() {
-  return <CreateTenantForm />;
+  return (
+    <div className="App">
+      <h1>Account Management</h1>
+    </div>
+  );
 }
 
 export default App;

application/account-management/WebApp/src/error-page.tsx

@@ -0,0 +1,18 @@
+import { useRouteError } from "react-router-dom";
+
+type ErrorObject = { statusText?: string; message?: string };
+export default function ErrorPage() {
+  const error = useRouteError() as ErrorObject;
+
+  console.error(error);
+
+  return (
+    <div className="flex flex-col justify-center items-center w-full">
+      <h1>Oops!</h1>
+      <p>Sorry, an unexpected error has occurred.</p>
+      <p>
+        <i>{error.statusText || error.message}</i>
+      </p>
+    </div>
+  );
+}

application/account-management/WebApp/src/main.css

@@ -77,3 +77,13 @@
     @apply bg-background text-foreground;
   }
 }
+
+@layer base {
+  html,
+  body,
+  #root {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }
+}

application/account-management/WebApp/src/main.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App";
+import { RouterProvider } from "react-router-dom";
 import "./main.css";
+import { router } from "./router";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>
 );

application/account-management/WebApp/src/router.tsx

@@ -0,0 +1,27 @@
+import { createBrowserRouter } from "react-router-dom";
+import Root from "@/routes/root.tsx";
+import ErrorPage from "@/error-page.tsx";
+import { CreateTenantForm } from "./ui/tenant/CreateTenantForm";
+import { CreatedTenantSuccess } from "./ui/tenant/CreatedTenantSuccess";
+
+export const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Root />,
+    errorElement: <ErrorPage />,
+    children: [
+      {
+        path: "/tenant/:id",
+        element: <h1>Tenant</h1>,
+      },
+      {
+        path: "/tenant/create",
+        element: <CreateTenantForm />,
+      },
+      {
+        path: "/tenant/create/success",
+        element: <CreatedTenantSuccess />,
+      },
+    ],
+  },
+]);

application/account-management/WebApp/src/routes/root.tsx

@@ -0,0 +1,39 @@
+import { Outlet, useNavigate } from "react-router-dom";
+import AcmeLogo from "@/ui/acme-logo.svg";
+import { Button } from "react-aria-components";
+
+export default function Root() {
+  const navigate = useNavigate();
+
+  function handleCreateTenant() {
+    navigate("/tenant/create");
+  }
+
+  return (
+    <div className="flex flex-row h-full w-full">
+      <div className="flex gap-2 flex-col h-full w-80 border-r border-border bg-gray-100 px-6">
+        <h1 className="flex gap-1 items-center order-1 border-t border-border px-4 py-8">
+          <AcmeLogo className="w-6 h-6" /> ACME Company
+        </h1>
+        <div className="justify-start flex flex-row border-b border-border py-4">
+          <Button className="bg-blue-600 text-white py-2 px-4 rounded-full" onPress={handleCreateTenant}>
+            Create Tenant
+          </Button>
+        </div>
+        <nav className="grow">
+          <ul>
+            <li className="p-4 hover:bg-gray-200 rounded-xl cursor-pointer">
+              <a href={`/`}>Account Management</a>
+            </li>
+            <li className="p-4 hover:bg-gray-200 rounded-xl cursor-pointer">
+              <a href={`/user-management`}>User Management</a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+      <div className="flex flex-col w-full h-full bg-background">
+        <Outlet />
+      </div>
+    </div>
+  );
+}

application/account-management/WebApp/src/ui/tenant/CreateTenantForm.tsx

@@ -10,9 +10,9 @@ export function CreateTenantForm() {
     <Form
       action={formAction}
       validationErrors={state.errors}
-      className="w-screen h-screen bg-slate-900 flex flex-col p-2 justify-center items-center"
+      className="w-full h-full flex flex-col p-2 justify-center items-center border-border border"
     >
-      <div className="flex flex-col w-fit bg-slate-300 rounded-sm p-4 gap-2">
+      <div className="flex flex-col w-fit bg-gray-200 rounded p-4 gap-2 shadow-sm">
         <h1 className="text-xl font-bold">Create a tenant</h1>
         <TextField name={"subdomain"} autoFocus className={"flex flex-col"} isRequired>
           <Label>Subdomain</Label>
@@ -31,10 +31,9 @@ export function CreateTenantForm() {
           <Input className="p-2 rounded-md border border-black" placeholder="email" />
           <FieldError />
         </TextField>
-
         <Button
           type="submit"
-          className="bg-slate-500 p-2 rounded-md text-white text-sm border border-black hover:bg-slate-400 w-fit"
+          className="bg-blue-600 p-2 rounded-md text-white text-sm border border-border shadow-lg hover:bg-slate-400 w-fit"
         >
           Create tenant!
         </Button>

application/account-management/WebApp/src/ui/tenant/CreatedTenantSuccess.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+import { Button } from "react-aria-components";
+import Confetti, { type ConfettiConfig } from "react-dom-confetti";
+
+const config: ConfettiConfig = {
+  angle: 90,
+  spread: 360,
+  startVelocity: 28,
+  elementCount: 170,
+  dragFriction: 0.12,
+  duration: 3000,
+  stagger: 3,
+  width: "10px",
+  height: "10px",
+  //perspective: "500px",
+  colors: ["#a864fd", "#29cdff", "#78ff44", "#ff718d", "#fdff6a"],
+};
+
+export function CreatedTenantSuccess() {
+  const [confetti, setConfetti] = useState(false);
+
+  useEffect(() => {
+    setConfetti(true);
+  }, []);
+
+  return (
+    <div className="items-center flex flex-col justify-center h-full">
+      <div className="p-8 bg-gray-800 text-white rounded-xl shadow-md text-center gap-4 flex flex-col">
+        <h1 className="text-2xl">Success!</h1>
+        <p>Your tenant has been created.</p>
+        <div className="self-center absolute top-10">
+          <Confetti active={confetti} config={config} />
+        </div>
+      </div>
+    </div>
+  );
+}

application/account-management/WebApp/src/ui/tenant/actions.ts

@@ -1,6 +1,7 @@
 import { z } from "zod";
 import { accountManagementApi } from "@/lib/api/client.ts";
 import { getApiError, getFieldErrors } from "@/lib/apiErrorListSchema.ts";
+import { router } from "@/router";
 
 export type State = {
   errors?: {
@@ -46,6 +47,7 @@ export async function createTenant(_: State, formData: FormData): Promise<State>
     if (result.response.ok) {
       // invalidate cache
       // redirect
+      router.navigate("/tenant/create/success");
       return {};
     }