chore: frontend file restructure

packages/mern-sample-app/app-vite-react/src/app/inputs/InputLocaleSelect/InputLocaleSelect.tsx

@@ -47,7 +47,6 @@ export function InputLocaleSelect({ value, onChange }: InputLocaleSelectProps) {
       <Tooltip title={t("systemLanguage")} data-driver="systemLanguage">
         <IconButton size="medium" onClick={handleClickListItem}>
           <Box width="1.5rem" height="1.5rem">
-            {/*selectedItem ? <Typography>{selectedItem.toUpperCase()}</Typography> : <Translate />*/}
             {selectedItem ? <Flag locale={selectedItem} /> : <Translate />}
           </Box>
         </IconButton>

packages/mern-sample-app/app-vite-react/src/app/pages/Home/UserCreateFormButton.tsx → packages/mern-sample-app/app-vite-react/src/app/pages/admin-settings/manage-users/UserCreateFormButton.tsx

@@ -2,7 +2,7 @@ import type { User } from "@org/lib-api-client";
 
 import { Add } from "@mui/icons-material";
 import { Button, Dialog, DialogContent } from "@mui/material";
-import { UserForm } from "@org/app-vite-react/app/pages/Home/UserForm";
+import { UserForm } from "@org/app-vite-react/app/pages/admin-settings/manage-users/UserForm";
 import { tsrClient } from "@org/app-vite-react/lib/@ts-rest";
 import { useState } from "react";
 

packages/mern-sample-app/app-vite-react/src/app/pages/Home/HomePage.tsx → packages/mern-sample-app/app-vite-react/src/app/pages/admin-settings/manage-users/index.tsx

@@ -7,8 +7,8 @@ import {
   ServerDatatable,
   DEFAULT_PAGINATION_OPTIONS,
 } from "@org/app-vite-react/app/components/Datatable";
-import { FixedBadge } from "@org/app-vite-react/app/pages/Home/FixedBadge";
-import { UserCreateFormButton } from "@org/app-vite-react/app/pages/Home/UserCreateFormButton";
+import { FixedBadge } from "@org/app-vite-react/app/pages/admin-settings/manage-users/FixedBadge";
+import { UserCreateFormButton } from "@org/app-vite-react/app/pages/admin-settings/manage-users/UserCreateFormButton";
 import { tsrQuery } from "@org/app-vite-react/lib/@ts-rest";
 import { useState } from "react";
 
@@ -18,7 +18,7 @@ import { useState } from "react";
   return { paginationOptions: JSON.stringify(paginationOptions) };
 }*/
 
-export function HomePage() {
+export function ManageUsersPage() {
   const { data, isPending } = tsrQuery.User.findAll.useQuery({
     queryKey: ["User.findAll"],
     staleTime: 1000,

packages/mern-sample-app/app-vite-react/src/app/pages/Home/IndexPage.tsx → packages/mern-sample-app/app-vite-react/src/app/pages/home/index.tsx

@@ -1,7 +1,7 @@
 import * as icons from "@mui/icons-material";
 import * as mui from "@mui/material";
 
-export function IndexPage() {
+export function HomePage() {
   const dependencies = [
     {
       name: "React",

packages/mern-sample-app/app-vite-react/src/app/routes.tsx

@@ -1,20 +1,17 @@
 import type { NavigationRoute } from "@org/app-vite-react/route-typings";
-
 import * as icons from "@mui/icons-material";
 import { Protect } from "@org/app-vite-react/app/components/Protect";
-import { HomePage } from "@org/app-vite-react/app/pages/Home";
-import { Status404Page } from "@org/app-vite-react/app/pages/Status404";
-
-import { IndexPage } from "./pages/Home/IndexPage";
+import { ManageUsersPage } from "@org/app-vite-react/app/pages/admin-settings/manage-users";
+import { HomePage } from "@org/app-vite-react/app/pages/home";
 
 export const routes: NavigationRoute[] = [
   {
     variant: "single",
-    label: () => "Index",
+    label: () => "Home",
     path: "/",
-    Component: () => <IndexPage />,
+    Component: () => <HomePage />,
     handle: {
-      crumb: () => "Index",
+      crumb: () => "Home",
     },
   },
   {
@@ -35,7 +32,7 @@ export const routes: NavigationRoute[] = [
         },
         Component: () => (
           <Protect roles={["admin"]}>
-            <HomePage />
+            <ManageUsersPage />
           </Protect>
         ),
       },
@@ -44,7 +41,7 @@ export const routes: NavigationRoute[] = [
   {
     variant: "single",
     label: () => "",
-    Component: Status404Page,
+    Component: () => <div>Not found</div>,
     path: "*",
     hidden: true,
   },

packages/mern-sample-app/app-vite-react/src/main.tsx

@@ -1,21 +1,44 @@
 import "@org/app-vite-react/lib/i18next/i18n";
 
 import { Layout as layoutElement } from "@org/app-vite-react/app/layout";
-import { ProtectedRoute as protectedRoute } from "@org/app-vite-react/app/pages/ProtectedRoute";
-import { RootErrorPage as errorElement } from "@org/app-vite-react/app/pages/RootError";
 import { providers } from "@org/app-vite-react/app/providers";
 import { routes } from "@org/app-vite-react/app/routes";
 import { MuiCssBaseline as cssBaseline } from "@org/app-vite-react/lib/@mui";
 import { reactServer } from "@org/app-vite-react/server";
+import { useRouteError } from "react-router-dom";
+import { KeycloakRoute, type KeycloakUser } from "@org/app-vite-react/lib/keycloak-js";
+import { sigUser } from "@org/app-vite-react/signals/sigUser";
+import { type RouteObject } from "react-router-dom";
 
 import "@org/app-vite-react/main.css";
 
+function RootErrorPage() {
+  const error = useRouteError() as Error;
+  return (
+    <div>
+      <h1>Uh oh, something went terribly wrong 😩</h1>
+      <pre>{error.message || JSON.stringify(error)}</pre>
+      <button onClick={() => (window.location.href = "/")}>Click here to reload the app</button>
+    </div>
+  );
+}
+
+function ProtectedRoute({
+  secure,
+  Component,
+}: {
+  secure: (user: KeycloakUser | null) => boolean;
+  Component: NonNullable<RouteObject["Component"]>;
+}) {
+  return <KeycloakRoute user={sigUser.value} secure={secure} Component={Component} />;
+}
+
 reactServer.run({
   rootId: "root",
   routes,
   providers,
-  errorElement,
+  errorElement: RootErrorPage,
   layoutElement,
   cssBaseline,
-  protectedRoute,
+  protectedRoute: ProtectedRoute,
 });

packages/mern-sample-app/app-vite-react/test/App.test.tsx

@@ -1,11 +1,11 @@
 /// <reference types="@testing-library/jest-dom" />
 
-import { Status404Page } from "@org/app-vite-react/app/pages/Status404/Status404Page";
+import { HomePage } from "@org/app-vite-react/app/pages/home";
 import { render, screen } from "@testing-library/react";
 
 describe("App", () => {
   it("renders the App component", () => {
-    render(<Status404Page />);
+    render(<HomePage />);
 
     screen.debug(); // prints out the jsx in the App component unto the command line
   });