[CSM Portal Microapp] Support page: case list, case detail, and app shell

apps/csm-portal/microapp/package.json

@@ -19,9 +19,9 @@
     "@mui/lab": "7.0.1-beta.20",
     "@mui/material": "7.3.6",
     "@tanstack/react-query": "5.90.12",
-    "@wso2/oxygen-ui": "0.2.1",
-    "@wso2/oxygen-ui-charts-react": "0.4.0",
-    "@wso2/oxygen-ui-icons-react": "0.2.1",
+    "@wso2/oxygen-ui": "0.6.1",
+    "@wso2/oxygen-ui-charts-react": "0.6.1",
+    "@wso2/oxygen-ui-icons-react": "0.6.1",
     "axios": "1.13.2",
     "dayjs": "1.11.19",
     "dompurify": "3.4.0",
@@ -57,8 +57,5 @@
     "typescript-eslint": "8.46.4",
     "vite": "7.1.7",
     "vite-tsconfig-paths": "5.1.4"
-  },
-  "allowScripts": {
-    "esbuild@0.25.12": true
   }
 }

apps/csm-portal/microapp/src/App.tsx

@@ -0,0 +1,48 @@
+// Copyright (c) 2026 WSO2 LLC. (https://www.wso2.com).
+//
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import { useLayoutEffect } from "react";
+import { HashRouter as Router, Route, Routes } from "react-router-dom";
+import MainLayout from "@components/layout/MainLayout";
+import { requestDeviceSafeAreaInsets } from "@components/microapp-bridge";
+import SupportPage from "@pages/SupportPage";
+import CaseDetailPage from "@pages/CaseDetailPage";
+
+export default function App() {
+  useLayoutEffect(() => {
+    requestDeviceSafeAreaInsets((data) => {
+      if (!data?.insets) return;
+
+      const { top, right, bottom, left } = data.insets;
+      const root = document.documentElement;
+      root.style.setProperty("--safe-top", `${top}px`);
+      root.style.setProperty("--safe-right", `${right}px`);
+      root.style.setProperty("--safe-bottom", `${bottom}px`);
+      root.style.setProperty("--safe-left", `${left}px`);
+    });
+  }, []);
+
+  return (
+    <Router>
+      <Routes>
+        <Route element={<MainLayout />}>
+          <Route path="/" element={<SupportPage />} />
+          <Route path="/cases/:id" element={<CaseDetailPage />} />
+        </Route>
+      </Routes>
+    </Router>
+  );
+}

apps/csm-portal/microapp/src/components/common/ErrorBoundary.tsx

@@ -0,0 +1,63 @@
+// Copyright (c) 2026 WSO2 LLC. (https://www.wso2.com).
+//
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+// refer: https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
+import * as React from "react";
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+  fallback: React.ReactNode | ((error: unknown, resetErrorBoundary: () => void) => React.ReactNode);
+  onError?: (error: unknown) => void;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: unknown;
+}
+
+export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: unknown): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: unknown, info: React.ErrorInfo): void {
+    console.error(error, info.componentStack);
+    this.props.onError?.(error);
+  }
+
+  resetErrorBoundary = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render(): React.ReactNode {
+    const { hasError, error } = this.state;
+    const { fallback, children } = this.props;
+
+    if (hasError && error) {
+      if (typeof fallback === "function") {
+        return fallback(error, this.resetErrorBoundary);
+      }
+      return fallback;
+    }
+
+    return children;
+  }
+}

apps/csm-portal/microapp/src/components/layout/MainLayout.tsx

@@ -0,0 +1,30 @@
+// Copyright (c) 2026 WSO2 LLC. (https://www.wso2.com).
+//
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import { Box } from "@wso2/oxygen-ui";
+import { Outlet } from "react-router-dom";
+import { TabBar } from "./TabBar";
+
+export default function MainLayout() {
+  return (
+    <>
+      <Box component="main" p={2} pb={15}>
+        <Outlet />
+      </Box>
+      <TabBar />
+    </>
+  );
+}

apps/csm-portal/microapp/src/components/layout/TabBar.tsx

@@ -0,0 +1,62 @@
+// Copyright (c) 2026 WSO2 LLC. (https://www.wso2.com).
+//
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import { useLayoutEffect, useRef } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { BottomNavigation, BottomNavigationAction, Box } from "@wso2/oxygen-ui";
+import { Headset } from "@wso2/oxygen-ui-icons-react";
+
+export function TabBar() {
+  const ref = useRef<HTMLDivElement>(null);
+  const location = useLocation();
+  const isSupportActive = location.pathname === "/" || location.pathname.startsWith("/cases/");
+
+  useLayoutEffect(() => {
+    if (!ref.current) return;
+
+    const observer = new ResizeObserver(([entry]) => {
+      document.documentElement.style.setProperty("--tab-bar-height", `${entry.contentRect.height}px`);
+    });
+
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <Box
+      ref={ref}
+      position="fixed"
+      bgcolor="background.paper"
+      bottom={0}
+      left={0}
+      right={0}
+      pt={1}
+      pb={4}
+      sx={{ borderTop: "1px solid", borderColor: "divider" }}
+    >
+      <BottomNavigation value={isSupportActive ? "support" : false} showLabels>
+        <BottomNavigationAction
+          component={Link}
+          to="/"
+          value="support"
+          label="Support"
+          icon={<Headset />}
+          disableRipple
+        />
+      </BottomNavigation>
+    </Box>
+  );
+}