feat: implement frontend login functionality with form handling and error management

apps/frontend/app/app.css

@@ -1,15 +1,9 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 @theme {
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
+  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 html,
 body {
-  @apply bg-white dark:bg-gray-950;
-
-  @media (prefers-color-scheme: dark) {
-    color-scheme: dark;
-  }
 }

apps/frontend/app/components/Form/Button.tsx

@@ -0,0 +1,36 @@
+export type SubmitButtonProps = {
+  loading?: boolean;
+  label?:
+    | {
+        default: string;
+        loading: string;
+      }
+    | string;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+export function SubmitButton({ loading, label, ...props }: SubmitButtonProps) {
+  return (
+    <button
+      type="submit"
+      disabled={loading}
+      style={{
+        padding: '10px 14px',
+        borderRadius: 6,
+        border: 'none',
+        backgroundColor: 'var(--iris-9)',
+        color: 'white',
+      }}
+      {...props}
+    >
+      {loading ? (typeof label === 'string' ? 'Submitting…' : label?.loading ?? 'Submitting…') : typeof label === 'string' ? label : label?.default ?? 'Submit'}
+    </button>
+  );
+}
+
+export function ResetButton(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button type="reset" {...props} style={{ padding: '10px 14px', borderRadius: 6, border: '1px solid var(--gray-5)', background: 'white', ...props.style }}>
+      {props.children ?? 'Reset'}
+    </button>
+  );
+}

apps/frontend/app/components/Form/TextField.tsx

@@ -0,0 +1,93 @@
+import type { AnyFieldMeta } from '@tanstack/react-form';
+import { LucideEye, LucideEyeClosed } from 'lucide-react';
+import { useCallback, useId, useState } from 'react';
+
+export type TextFieldProps = {
+  label?: string;
+  value?: string;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement>;
+  labelDivProps?: React.HTMLAttributes<HTMLDivElement>;
+} & React.InputHTMLAttributes<HTMLInputElement> & {
+    type?: 'password';
+    showPasswordToggle?: boolean;
+  };
+
+export function TextField({ label, value, onChange, labelProps, labelDivProps, showPasswordToggle, ...rest }: TextFieldProps) {
+  const id = useId();
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const handlePasswordVisibilitySet = useCallback(
+    (e: React.MouseEvent | React.TouchEvent, visible: boolean) => {
+      if (rest.type !== 'password') return;
+      e.preventDefault();
+      setIsPasswordVisible(() => visible);
+    },
+    [rest.type]
+  );
+  return (
+    <label htmlFor={id} style={{ display: 'block', marginBottom: 8 }} {...labelProps}>
+      {label && (
+        <div style={{ fontSize: 12, color: 'var(--gray-9)', marginBottom: 6 }} {...labelDivProps}>
+          {label}
+        </div>
+      )}
+      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 8 }}>
+        <input
+          {...rest}
+          type={rest.type === 'password' ? (isPasswordVisible && showPasswordToggle ? 'text' : 'password') : rest.type}
+          id={id}
+          value={value}
+          onChange={onChange}
+          style={{
+            width: '100%',
+            padding: '10px 12px',
+            borderRadius: 6,
+            border: '1px solid var(--gray-5)',
+            ...rest?.style,
+          }}
+        />
+
+        <div
+          style={{ position: 'absolute', right: 12 }}
+          onMouseDown={(e) => {
+            handlePasswordVisibilitySet(e, true);
+          }}
+          onMouseUp={(e) => {
+            handlePasswordVisibilitySet(e, false);
+          }}
+          onMouseLeave={(e) => {
+            handlePasswordVisibilitySet(e, false);
+          }}
+          onTouchStart={(e) => {
+            handlePasswordVisibilitySet(e, true);
+          }}
+          onTouchEnd={(e) => {
+            handlePasswordVisibilitySet(e, false);
+          }}
+        >
+          {showPasswordToggle ? isPasswordVisible ? <LucideEye size={16} /> : <LucideEyeClosed size={16} /> : null}
+        </div>
+      </div>
+    </label>
+  );
+}
+
+export type TextFieldErrorMessageProps = AnyFieldMeta & {
+  errorMessage?: string;
+};
+
+export function TextFieldErrorMessage({ isValid, errors, errorMessage }: TextFieldErrorMessageProps) {
+  return (
+    !isValid && (
+      <div
+        style={{
+          marginTop: 4,
+          fontSize: 12,
+          color: 'var(--red-9)',
+        }}
+      >
+        {errorMessage ?? errors?.reduce((msg, err) => msg + err.message + ' ', '')}
+      </div>
+    )
+  );
+}

apps/frontend/app/components/home/TablePlaceholder.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Flex, Text, Button, Separator, Box, Badge } from '@radix-ui/themes';
+
+export default function TablePlaceholder() {
+  return (
+    <Flex direction="column" gap="3" p="4">
+      <Flex justify="between" align="center">
+        <Text weight="bold">Proxy Hosts</Text>
+        <Button size="1">Add Host</Button>
+      </Flex>
+      <Separator size="4" />
+      {[1, 2, 3].map((i) => (
+        <Flex key={i} justify="between" align="center">
+          <Box>
+            <Text size="2" weight="bold" as="div">
+              {`host-${i}.example.com`}
+            </Text>
+            <Text size="1" color="gray">
+              {`http://10.0.0.${i}:8080`}
+            </Text>
+          </Box>
+          <Badge color="green">Online</Badge>
+        </Flex>
+      ))}
+    </Flex>
+  );
+}

apps/frontend/app/components/layout/SidebarContent.tsx

@@ -0,0 +1,89 @@
+import type React from 'react';
+import { Box, Button, Flex, Heading, Separator, Text } from '@radix-ui/themes';
+import type { NavItem } from './types';
+import { Home, Globe, ArrowRight, Lock, Settings, User } from 'lucide-react';
+import { useLayout } from '../../providers/LayoutProvider';
+
+const navItems: { label: NavItem; icon: React.ReactNode }[] = [
+  { label: 'Dashboard', icon: <Home size={16} /> },
+  { label: 'Proxy Hosts', icon: <Globe size={16} /> },
+  { label: 'Redirection', icon: <ArrowRight size={16} /> },
+  { label: 'SSL', icon: <Lock size={16} /> },
+  { label: 'Settings', icon: <Settings size={16} /> },
+  { label: 'Profile', icon: <User size={16} /> },
+] as const;
+
+export function SidebarContent() {
+  const { activeTab, setActiveTab, setIsMobileMenuOpen } = useLayout();
+
+  return (
+    <Flex direction="column" gap="2" p="4" style={{ height: '100%' }}>
+      <Flex align="center" gap="2" mb="6" px="2">
+        <Box
+          style={{
+            width: 32,
+            height: 32,
+            backgroundColor: 'var(--iris-9)',
+            borderRadius: 'var(--radius-2)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: 'white',
+            fontWeight: 'bold',
+          }}
+        >
+          Y
+        </Box>
+        <Heading size="4" weight="bold">
+          YANPM
+        </Heading>
+      </Flex>
+
+      <Flex direction="column" gap="1">
+        {navItems.map((item) => (
+          <Button
+            key={item.label}
+            variant={activeTab === item.label ? 'soft' : 'ghost'}
+            color={activeTab === item.label ? 'iris' : 'gray'}
+            onClick={() => {
+              setActiveTab(item.label);
+              setIsMobileMenuOpen(false);
+            }}
+            style={{ cursor: 'pointer', width: '100%', justifyContent: 'flex-start' }}
+          >
+            <Flex align="center" gap="3">
+              {item.icon}
+              <Text size="2" weight={activeTab === item.label ? 'bold' : 'medium'}>
+                {item.label}
+              </Text>
+            </Flex>
+          </Button>
+        ))}
+      </Flex>
+
+      <Box style={{ marginTop: 'auto' }} pt="4">
+        <Separator size="4" mb="4" />
+        <Flex align="center" gap="3" px="2">
+          <Box
+            style={{
+              width: 32,
+              height: 32,
+              backgroundColor: 'var(--gray-5)',
+              borderRadius: '50%',
+            }}
+          />
+          <Box>
+            <Text size="1" weight="bold" as="div">
+              Admin User
+            </Text>
+            <Text size="1" color="gray">
+              admin@example.com
+            </Text>
+          </Box>
+        </Flex>
+      </Box>
+    </Flex>
+  );
+}
+
+export default SidebarContent;

apps/frontend/app/components/layout/types.ts

@@ -0,0 +1 @@
+export type NavItem = 'Dashboard' | 'Proxy Hosts' | 'Redirection' | 'SSL' | 'Settings' | 'Profile';

apps/frontend/app/components/theme.tsx

@@ -0,0 +1,16 @@
+import type React from 'react';
+import { Theme } from '@radix-ui/themes';
+
+export type AppThemeProps = {
+  children: React.ReactNode;
+};
+
+export function AppTheme({ children }: AppThemeProps) {
+  return (
+    <Theme accentColor="iris" grayColor="slate" panelBackground="translucent" radius="large">
+      {children}
+    </Theme>
+  );
+}
+
+export default AppTheme;

apps/frontend/app/hooks/ResponseHelper.tsx

@@ -0,0 +1,110 @@
+import { Text } from '@radix-ui/themes';
+import { AxiosError } from 'axios';
+import { useLocation, useNavigate } from 'react-router';
+import { toast } from 'react-toastify';
+
+export enum ResponseErrorToastId {
+  NetworkError = 'network-error',
+}
+
+export type DefaultResponseErrorHandlerOptions = {
+  disableUnauthorizedHandling?: boolean;
+  disableHandleUnexpectedErrors?: boolean;
+  disableIgnoreCanceledRequests?: boolean;
+};
+
+/**
+ *
+ * @param err error value
+ * @returns {boolean} true if the error was handled, false otherwise
+ */
+const defaultResponseErrorHandler =
+  (navigate: ReturnType<typeof useNavigate>, location: ReturnType<typeof useLocation>) =>
+  (err: unknown, options?: DefaultResponseErrorHandlerOptions): boolean => {
+    if (!(err instanceof AxiosError) && !options?.disableHandleUnexpectedErrors) {
+      toast.error(
+        <div>
+          <Text weight="bold">Unexpected Error:</Text>
+          <br /> An unexpected error occurred. Please try again later.
+        </div>,
+        {
+          position: 'top-center',
+          autoClose: false,
+          hideProgressBar: false,
+          closeOnClick: true,
+          pauseOnHover: true,
+          draggable: false,
+          progress: undefined,
+          theme: 'colored',
+        }
+      );
+      return true;
+    }
+
+    if (!(err instanceof AxiosError)) return false;
+
+    if (err.message === 'canceled') {
+      // request was aborted, ignore but return true to indicate it was handled
+      return !options?.disableIgnoreCanceledRequests;
+    }
+
+    if (err.message === 'Network Error') {
+      toast.error(
+        <div>
+          <Text weight="bold">Network Error:</Text>
+          <br /> Unable to reach the server. Please check your internet connection and try again.
+        </div>,
+        {
+          toastId: ResponseErrorToastId.NetworkError,
+          position: 'top-center',
+          autoClose: false,
+          hideProgressBar: false,
+          closeOnClick: true,
+          pauseOnHover: true,
+          draggable: false,
+          progress: undefined,
+          theme: 'colored',
+        }
+      );
+      return true;
+    }
+
+    // handle 401 Unauthorized globally
+    if (err.status === 401 && !options?.disableUnauthorizedHandling) {
+      // store current path for redirect after login
+      const currentPath = location.pathname + location.search;
+      const searchParam = new URLSearchParams();
+      searchParam.set('redirect', currentPath);
+      searchParam.set('message', 'Session expired, please log in again');
+      navigate(`/login?${searchParam.toString()}`);
+      return true;
+    }
+
+    if (err.status === 403) {
+      toast.error(
+        <div>
+          <Text weight="bold">Forbidden:</Text>
+          <br /> You do not have permission to perform this action.
+        </div>,
+        {
+          position: 'top-center',
+          autoClose: 5000,
+          hideProgressBar: false,
+          closeOnClick: true,
+          pauseOnHover: true,
+          draggable: false,
+          progress: undefined,
+          theme: 'colored',
+        }
+      );
+      return true;
+    }
+
+    return false;
+  };
+
+export function useResponseErrorHandler() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  return { defaultResponseErrorHandler: defaultResponseErrorHandler(navigate, location) };
+}

apps/frontend/app/providers/ApiProvider.tsx

@@ -1,9 +1,10 @@
-import { createContext, use, useContext, type PropsWithChildren } from 'react';
+import { createContext, use, type PropsWithChildren } from 'react';
 import { createTanstackApi, createApi } from '../lib/api';
 import axios from 'axios';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useNavigate } from 'react-router';
 
-type ApiProviderProps = PropsWithChildren<{}>;
+type ApiProviderProps = PropsWithChildren<object>;
 type ApiContextType = {
   apiClient: ReturnType<typeof createApi>;
   tanstackApiClient: ReturnType<typeof createTanstackApi>;
@@ -31,11 +32,33 @@ const queryClient = new QueryClient();
  */
 
 export const ApiProvider: React.FC<ApiProviderProps> = ({ children }) => {
+  const navigate = useNavigate();
   const axiosInstance = axios.create({
     withCredentials: true,
   });
+
+  const internalAxiosInstance = axios.create({
+    withCredentials: true,
+  });
+
+  internalAxiosInstance.interceptors.response.use(
+    (response) => response,
+    (error) => {
+      // only handle 403 errors
+      if (!error.response) return Promise.reject(error);
+
+      if (error.response.status === 401) {
+        // redirect to login page
+        return navigate('/login', {});
+      }
+
+      return Promise.reject(error);
+    }
+  );
+
   const apiClient = createApi(axiosInstance);
-  const tanstackApiClient = createTanstackApi(axiosInstance);
+  const tanstackApiClient = createTanstackApi(internalAxiosInstance);
+
   return (
     <QueryClientProvider client={queryClient}>
       <ApiContext

apps/frontend/app/providers/FormProvider.tsx

@@ -0,0 +1,18 @@
+import { createFormHook, createFormHookContexts } from '@tanstack/react-form';
+import { TextField, TextFieldErrorMessage } from '../components/Form/TextField';
+import { ResetButton, SubmitButton } from '../components/Form/Button';
+
+const { fieldContext, formContext } = createFormHookContexts();
+
+export const formHook = createFormHook({
+  fieldComponents: {
+    TextField,
+    TextFieldErrorMessage,
+  },
+  formComponents: {
+    SubmitButton,
+    ResetButton,
+  },
+  fieldContext,
+  formContext,
+});

apps/frontend/app/providers/LayoutProvider.tsx

@@ -0,0 +1,38 @@
+import { createContext, use, useState, type PropsWithChildren } from 'react';
+import type { NavItem } from '../components/layout/types';
+
+type LayoutProviderProps = PropsWithChildren<object>;
+type LayoutContextType = {
+  activeTab: NavItem;
+  setActiveTab: (tab: NavItem) => void;
+  isMobileMenuOpen: boolean;
+  setIsMobileMenuOpen: (open: boolean) => void;
+};
+
+const LayoutContext = createContext<LayoutContextType | null>(null);
+
+export const LayoutProvider: React.FC<LayoutProviderProps> = ({ children }) => {
+  const [activeTab, setActiveTab] = useState<NavItem>('Dashboard');
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  return (
+    <LayoutContext
+      value={{
+        activeTab,
+        setActiveTab,
+        isMobileMenuOpen,
+        setIsMobileMenuOpen,
+      }}
+    >
+      {children}
+    </LayoutContext>
+  );
+};
+
+export function useLayout() {
+  const context = use(LayoutContext);
+  if (!context) {
+    throw new Error('useLayout must be used within a LayoutProvider');
+  }
+  return context;
+}

apps/frontend/app/root.tsx

@@ -1,8 +1,11 @@
 import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router';
 import type { Route } from './+types/root';
+import '@radix-ui/themes/styles.css';
 import './app.css';
-import { Theme } from '@radix-ui/themes';
+import AppTheme from './components/theme';
 import { ApiProvider } from './providers/ApiProvider';
+import { LayoutProvider } from './providers/LayoutProvider';
+// import { LayoutContainer } from './routes/layout';
 
 export const links: Route.LinksFunction = () => [];
 
@@ -26,11 +29,13 @@ export function Layout({ children }: { children: React.ReactNode }) {
 
 export default function App() {
   return (
-    <Theme>
+    <AppTheme>
       <ApiProvider>
-        <Outlet />
+        <LayoutProvider>
+          <Outlet />
+        </LayoutProvider>
       </ApiProvider>
-    </Theme>
+    </AppTheme>
   );
 }
 

apps/frontend/app/routes.ts

@@ -1,7 +1,9 @@
-import { type RouteConfig, index, route } from '@react-router/dev/routes';
+import { type RouteConfig, index, layout, route } from '@react-router/dev/routes';
 
 export default [
-  index('routes/home.tsx'),
+  route('login', 'routes/auth/login.tsx'),
+  layout('routes/layout.tsx', [index('routes/home.tsx')]),
+  // route('init', 'routes/init.tsx'),
   // catch-all 404 route
   route('*', 'routes/404.tsx'),
 ] satisfies RouteConfig;

apps/frontend/app/routes/auth/login.tsx

@@ -0,0 +1,139 @@
+import { Box, Container, Flex, Heading } from '@radix-ui/themes';
+import { useMutation } from '@tanstack/react-query';
+import { useNavigate } from 'react-router';
+import { Slide, toast, ToastContainer } from 'react-toastify';
+import * as v from 'valibot';
+import { useResponseErrorHandler } from '../../hooks/ResponseHelper';
+import { useApi } from '../../providers/ApiProvider';
+import { formHook } from '../../providers/FormProvider';
+import type { Route } from './+types/login';
+
+const loginFormSchema = v.object({
+  username: v.pipe(v.string(), v.trim(), v.minLength(1, 'Username is required')),
+  password: v.pipe(v.string(), v.minLength(1, 'Password is required')),
+});
+
+// eslint-disable-next-line no-empty-pattern
+export function meta({}: Route.MetaArgs): Route.MetaDescriptors {
+  return [{ title: 'Login | YANPM' }];
+}
+
+export default function LoginRoute() {
+  const navigate = useNavigate();
+  const { tanstackApiClient } = useApi();
+  const { defaultResponseErrorHandler } = useResponseErrorHandler();
+
+  const { mutateAsync: login, isPending } = useMutation({
+    ...tanstackApiClient.mutation('post', '/api/auth/login').mutationOptions,
+    onSuccess: async () => {
+      navigate('/');
+    },
+    onError: (error) => {
+      if (defaultResponseErrorHandler(error)) return;
+      console.error('Login failed:', error);
+    },
+  });
+
+  const form = formHook.useAppForm({
+    defaultValues: {
+      username: '',
+      password: '',
+    },
+    validators: {
+      onBlur: loginFormSchema,
+      onSubmit: loginFormSchema,
+    },
+
+    onSubmit: async ({ value }) => {
+      toast.dismiss();
+      return await login({ body: { password: value.password, username: value.username } });
+    },
+  });
+
+  return (
+    <>
+      <Flex align="center" justify="center" style={{ minHeight: 'calc(100vh - 64px)' }}>
+        <Container size="3" p="0">
+          <Box
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              maxWidth: 420,
+              margin: '40px auto',
+              backgroundColor: 'white',
+              padding: 24,
+              borderRadius: 8,
+              boxShadow: '0 6px 18px rgba(15,23,42,0.2)',
+            }}
+          >
+            <Heading size="6" style={{ marginBottom: 16, alignSelf: 'center' }}>
+              Sign In
+            </Heading>
+            <form
+              onSubmit={(e) => {
+                e.preventDefault();
+                form.handleSubmit();
+              }}
+            >
+              <form.AppField
+                name="username"
+                children={(field) => (
+                  <>
+                    <field.TextField
+                      label={'Username'}
+                      value={field.state.value}
+                      autoComplete="username"
+                      spellCheck={false}
+                      required
+                      onChange={(e) => field.handleChange(e.target.value)}
+                    />
+                    <field.TextFieldErrorMessage {...field.state.meta} />
+                  </>
+                )}
+              />
+
+              <form.AppField
+                name="password"
+                children={(field) => (
+                  <>
+                    <field.TextField
+                      label={'Password'}
+                      value={field.state.value}
+                      type="password"
+                      required
+                      autoComplete="current-password"
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      showPasswordToggle
+                    />
+                    <field.TextFieldErrorMessage {...field.state.meta} />
+                  </>
+                )}
+              />
+
+              <div style={{ marginTop: 18, display: 'flex', gap: 8 }}>
+                <form.SubmitButton
+                  loading={isPending}
+                  label={{
+                    default: 'Sign In',
+                    loading: 'Signing In…',
+                  }}
+                />
+              </div>
+            </form>
+          </Box>
+        </Container>
+      </Flex>
+      <ToastContainer
+        position="top-center"
+        autoClose={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable={false}
+        theme="colored"
+        transition={Slide}
+      />
+    </>
+  );
+}

apps/frontend/app/routes/home.tsx

@@ -1,13 +1,73 @@
-import { Text } from '@radix-ui/themes';
+import { Box, Button, Card, Flex, Grid, Heading, Text } from '@radix-ui/themes';
 import type { Route } from './+types/home';
-import { useContext } from 'react';
+import TablePlaceholder from '../components/home/TablePlaceholder';
-import { useApi } from '../providers/ApiProvider';
+import { useLayout } from '../providers/LayoutProvider';
-import { useQuery } from '@tanstack/react-query';
 
+// eslint-disable-next-line no-empty-pattern
 export function meta({}: Route.MetaArgs) {
-  return [{ title: 'YANPM' }, { name: 'description', content: 'Welcome to Yet Another Nginx Proxy Manager!' }];
+  return [{ title: 'Proxy Host Demo | YANPM' }, { name: 'description', content: 'Demo of the unified navigation paradigm.' }];
 }
 
-export default function Home() {
+export default function ProxyHostDemo() {
-  return <Text>Welcome to Yet Another Nginx Proxy Manager!</Text>;
+  const { activeTab } = useLayout();
+  return (
+    <Box>
+      <Heading size="7" mb="1">
+        {activeTab}
+      </Heading>
+      <Text color="gray" mb="4" as="p">
+        This is the {activeTab.toLowerCase()} page demo.
+      </Text>
+
+      <Grid columns={{ initial: '1', sm: '2', lg: '3' }} gap="4">
+        <Card size="2">
+          <Flex direction="column" gap="2">
+            <Text size="2" weight="bold">
+              Status Overview
+            </Text>
+            <Text size="2" color="gray">
+              Everything is running smoothly in your {activeTab.toLowerCase()} section.
+            </Text>
+            <Button variant="surface" size="1" style={{ width: 'fit-content' }} mt="1">
+              View Details
+            </Button>
+          </Flex>
+        </Card>
+        <Card size="2">
+          <Flex direction="column" gap="2">
+            <Text size="2" weight="bold">
+              Recent Activity
+            </Text>
+            <Text size="2" color="gray">
+              No recent changes detected in the last 24 hours.
+            </Text>
+            <Button variant="surface" size="1" style={{ width: 'fit-content' }} mt="1">
+              Refresh
+            </Button>
+          </Flex>
+        </Card>
+        <Card size="2">
+          <Flex direction="column" gap="2">
+            <Text size="2" weight="bold">
+              Quick Actions
+            </Text>
+            <Text size="2" color="gray">
+              Common tasks related to {activeTab.toLowerCase()} are available here.
+            </Text>
+            <Button variant="solid" size="1" style={{ width: 'fit-content' }} mt="1">
+              Get Started
+            </Button>
+          </Flex>
+        </Card>
+      </Grid>
+
+      {activeTab === 'Proxy Hosts' && (
+        <Box mt="6">
+          <Card variant="surface">
+            <TablePlaceholder />
+          </Card>
+        </Box>
+      )}
+    </Box>
+  );
 }

apps/frontend/app/routes/layout.tsx

@@ -0,0 +1,88 @@
+import { Flex, Box, Container, Dialog, Heading, IconButton, TextField } from '@radix-ui/themes';
+import SidebarContent from '../components/layout/SidebarContent';
+import { useLayout } from '../providers/LayoutProvider';
+import { Menu, Search, Bell } from 'lucide-react';
+import { Outlet } from 'react-router';
+
+export default function LayoutContainer() {
+  const { activeTab, isMobileMenuOpen, setIsMobileMenuOpen } = useLayout();
+  return (
+    <Flex style={{ minHeight: '100vh', backgroundColor: 'var(--gray-2)' }}>
+      {/* Desktop Sidebar */}
+      <Box
+        display={{ initial: 'none', md: 'block' }}
+        style={{
+          width: '260px',
+          backgroundColor: 'white',
+          borderRight: '1px solid var(--gray-4)',
+          position: 'sticky',
+          top: 0,
+          minHeight: '100vh',
+          overflowY: 'auto',
+        }}
+      >
+        <SidebarContent />
+      </Box>
+
+      {/* Main Content Area */}
+      <Box style={{ flex: 1, minWidth: 0 }}>
+        {' '}
+        {/* Top Header (Mobile & Desktop) */}
+        <Flex
+          align="center"
+          justify="between"
+          px="4"
+          style={{
+            height: '64px',
+            backgroundColor: 'white',
+            borderBottom: '1px solid var(--gray-4)',
+            position: 'sticky',
+            top: 0,
+            zIndex: 10,
+          }}
+        >
+          <Flex align="center" gap="3">
+            <Box display={{ md: 'none' }}>
+              <Dialog.Root open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
+                <Dialog.Trigger>
+                  <IconButton variant="ghost" color="gray">
+                    <Menu />
+                  </IconButton>
+                </Dialog.Trigger>
+                <Dialog.Content
+                  style={{
+                    position: 'fixed',
+                    left: 0,
+                    top: 0,
+                    bottom: 0,
+                    margin: 0,
+                    width: '280px',
+                    borderRadius: 0,
+                    padding: 0,
+                  }}
+                >
+                  <SidebarContent />
+                </Dialog.Content>
+              </Dialog.Root>
+            </Box>
+            <Heading size="4">{activeTab}</Heading>
+          </Flex>
+
+          <Flex align="center" gap="3">
+            <TextField.Root placeholder="Search..." size="2">
+              <TextField.Slot>
+                <Search />
+              </TextField.Slot>
+            </TextField.Root>
+            <IconButton variant="ghost" color="gray">
+              <Bell />
+            </IconButton>
+          </Flex>
+        </Flex>
+        <Container size="4" p="5" style={{ paddingTop: 20 }}>
+          <Outlet />
+        </Container>
+      </Box>
+    </Flex>
+  );
+}

apps/frontend/app/vite-env.d.ts

@@ -1,7 +1,6 @@
 interface ViteTypeOptions {
-  // By adding this line, you can make the type of ImportMetaEnv strict
+  // disallow unknown keys.
-  // to disallow unknown keys.
+  strictImportMetaEnv: unknown;
-  // strictImportMetaEnv: unknown
 }
 
 interface ImportMetaEnv {