merge: integrate restaurant-admin-web auth and web updates

docker/40-runtime-config.sh

@@ -4,6 +4,8 @@ set -eu
 cat > /usr/share/nginx/html/runtime-config.js <<EOT
 window.__APP_CONFIG__ = {
   API_BASE_URL: "${API_BASE_URL:-http://localhost:8080}",
-  THALOS_AUTH_BASE_URL: "${THALOS_AUTH_BASE_URL:-${API_BASE_URL:-http://localhost:8080}}"
+  THALOS_AUTH_BASE_URL: "${THALOS_AUTH_BASE_URL:-${API_BASE_URL:-http://localhost:8080}}",
+  THALOS_DEFAULT_RETURN_URL: "${THALOS_DEFAULT_RETURN_URL:-http://localhost:23480/config}",
+  THALOS_DEFAULT_TENANT_ID: "${THALOS_DEFAULT_TENANT_ID:-demo-tenant}"
 };
 EOT

docs/architecture/frontend-boundary.md

@@ -3,12 +3,15 @@
 - This repository hosts a React edge application for a single BFF.
 - Frontend data access flows through `src/api/*` adapter modules.
 - The UI does not access DAL or internal services directly.
-- Route shell and protected sections are session-aware via Thalos session endpoints.
+- Route shell uses Ant Design layout/menu and keeps business views behind session checks.
+- Unauthenticated users are redirected to the central auth host OIDC start endpoint.
 
 ## Runtime Base URLs
 
 - `API_BASE_URL` for business BFF calls.
 - `THALOS_AUTH_BASE_URL` for session login/refresh/logout/me.
+- `THALOS_DEFAULT_RETURN_URL` for safe callback fallback.
+- `THALOS_DEFAULT_TENANT_ID` for OIDC tenant context defaults.
 
 ## Protected Workflow Endpoints
 
@@ -17,5 +20,6 @@
 
 ## UI Workflow Coverage
 
-- Restaurant admin config lookup
+- Restaurant config lookup
-- Service window updates
+- Service-window management
+- Protected route shell for config, service-window, and session inspection

docs/runbooks/containerization.md

@@ -11,6 +11,9 @@ docker build -t agilewebs/restaurant-admin-web:dev .
 ```bash
 docker run --rm -p 8080:8080 \
   -e API_BASE_URL=http://host.docker.internal:8080 \
+  -e THALOS_AUTH_BASE_URL=http://host.docker.internal:22080 \
+  -e THALOS_DEFAULT_RETURN_URL=http://localhost:23480/config \
+  -e THALOS_DEFAULT_TENANT_ID=demo-tenant \
   --name restaurant-admin-web agilewebs/restaurant-admin-web:dev
 ```
 
@@ -19,6 +22,7 @@ docker run --rm -p 8080:8080 \
 - Build-time fallback: `VITE_API_BASE_URL`
 - Runtime override: container env `API_BASE_URL`
 - Runtime file generated at startup: `/runtime-config.js`
+- Central OIDC login context is configured through runtime env vars, not hardcoded per build.
 
 ## Health Check
 

docs/runbooks/local-development.md

@@ -11,12 +11,14 @@ npm install
 ```bash
 VITE_API_BASE_URL=http://localhost:8080 \
 VITE_THALOS_AUTH_BASE_URL=http://localhost:20080 \
+VITE_THALOS_DEFAULT_RETURN_URL=http://localhost:23480/config \
+VITE_THALOS_DEFAULT_TENANT_ID=demo-tenant \
 npm run dev
 ```
 
 ## Auth Model
 
-- Login is executed against Thalos session endpoints.
+- Login is executed via central Thalos OIDC start endpoint.
 - Business calls are gated behind session checks.
 - Session cookies are sent with `credentials: include`.
 

docs/runbooks/testing.md

@@ -16,7 +16,8 @@ npm run test:ci
 
 - `src/api/client.test.ts`: runtime-config precedence and fallback behavior.
 - `src/api/dashboardApi.test.ts`: endpoint path/query composition and payload mapping.
-- `src/App.test.tsx`: protected-route render and workflow trigger behavior.
+- `src/auth/oidcLogin.test.ts`: OIDC start-url generation and safe return-url fallback.
+- `src/App.test.tsx`: central login screen, protected config flow, and service-window workflow.
 
 ## Notes
 

package.json

@@ -11,8 +11,12 @@
     "test:ci": "vitest run --coverage=false"
   },
   "dependencies": {
+    "@ant-design/icons": "^6.1.0",
+    "antd": "^5.27.4",
+    "dayjs": "^1.11.13",
     "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react-dom": "^19.1.1",
+    "react-router-dom": "^7.9.2"
   },
   "devDependencies": {
     "@types/react": "^19.1.10",

public/runtime-config.js

@@ -1,4 +1,6 @@
 window.__APP_CONFIG__ = {
   API_BASE_URL: "http://localhost:8080",
-  THALOS_AUTH_BASE_URL: "http://localhost:20080"
+  THALOS_AUTH_BASE_URL: "http://localhost:20080",
+  THALOS_DEFAULT_RETURN_URL: "http://localhost:23480/config",
+  THALOS_DEFAULT_TENANT_ID: "demo-tenant"
 };

src/App.test.tsx

@@ -22,6 +22,24 @@ describe('Restaurant Admin App', () => {
     vi.mocked(loadDashboard).mockReset();
     vi.mocked(setServiceWindow).mockReset();
     vi.mocked(getSessionMe).mockReset();
+    window.__APP_CONFIG__ = {
+      API_BASE_URL: 'http://localhost:8080',
+      THALOS_AUTH_BASE_URL: 'https://auth.dream-views.com',
+      THALOS_DEFAULT_RETURN_URL: 'https://restaurant-admin-demo.dream-views.com/config',
+      THALOS_DEFAULT_TENANT_ID: 'demo-tenant'
+    };
+    window.history.pushState({}, '', '/config');
+  });
+
+  it('shows central login action when session is missing', async () => {
+    vi.mocked(getSessionMe).mockResolvedValue({ isAuthenticated: false, subjectId: '', tenantId: '', provider: 0 });
+
+    render(<App />);
+
+    await waitFor(() => expect(screen.getByRole('link', { name: 'Continue with Google' })).toBeInTheDocument());
+    const link = screen.getByRole('link', { name: 'Continue with Google' }) as HTMLAnchorElement;
+    expect(link.href).toContain('/api/identity/oidc/google/start');
+    expect(link.href).toContain('tenantId=demo-tenant');
   });
 
   it('loads admin config for authenticated users', async () => {
@@ -31,7 +49,7 @@ describe('Restaurant Admin App', () => {
       tenantId: 'demo-tenant',
       provider: 0
     });
-    vi.mocked(loadDashboard).mockResolvedValue({ contextId: 'demo-context', summary: 'config' });
+    vi.mocked(loadDashboard).mockResolvedValue({ contextId: 'demo-context', summary: 'configured' });
 
     render(<App />);
 
@@ -51,13 +69,13 @@ describe('Restaurant Admin App', () => {
     vi.mocked(setServiceWindow).mockResolvedValue({
       contextId: 'demo-context',
       applied: true,
-      message: 'ok'
+      message: 'applied'
     });
 
     render(<App />);
 
-    await waitFor(() => expect(screen.getByRole('button', { name: 'Service Window' })).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText('Service Window')).toBeInTheDocument());
-    fireEvent.click(screen.getByRole('button', { name: 'Service Window' }));
+    fireEvent.click(screen.getByText('Service Window'));
     fireEvent.click(screen.getByRole('button', { name: 'Apply Service Window' }));
 
     await waitFor(() => expect(setServiceWindow).toHaveBeenCalledTimes(1));

src/App.tsx

@@ -1,4 +1,25 @@
-import { useState } from 'react';
+import { ControlOutlined, DeploymentUnitOutlined, ReloadOutlined, SettingOutlined } from '@ant-design/icons';
+import {
+  Alert,
+  Button,
+  Card,
+  Descriptions,
+  Form,
+  Input,
+  Layout,
+  Menu,
+  Result,
+  Select,
+  Space,
+  Spin,
+  Table,
+  Tag,
+  TimePicker,
+  Typography
+} from 'antd';
+import dayjs, { Dayjs } from 'dayjs';
+import { type ReactNode, useMemo, useState } from 'react';
+import { BrowserRouter, Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import {
   loadDashboard,
   setServiceWindow,
@@ -6,262 +27,265 @@ import {
   type SetServiceWindowRequest,
   type SetServiceWindowResponse
 } from './api/dashboardApi';
-import { SessionProvider, useSessionContext } from './auth/sessionContext';
 import type { IdentityProvider } from './api/sessionApi';
+import { buildGoogleOidcStartUrl } from './auth/oidcLogin';
+import { SessionProvider, useSessionContext } from './auth/sessionContext';
 
-type RouteKey = 'overview' | 'actions';
+type AppRoute = '/config' | '/window' | '/session';
+
+type ServiceWindowFormValues = {
+  contextId: string;
+  day: number;
+  openAt: Dayjs;
+  closeAt: Dayjs;
+  updatedBy: string;
+};
+
+const routeItems: Array<{ key: AppRoute; label: string; icon: ReactNode }> = [
+  { key: '/config', label: 'Config', icon: <SettingOutlined /> },
+  { key: '/window', label: 'Service Window', icon: <ControlOutlined /> },
+  { key: '/session', label: 'Session', icon: <DeploymentUnitOutlined /> }
+];
+
+const dayOptions = [
+  { label: 'Sunday', value: 0 },
+  { label: 'Monday', value: 1 },
+  { label: 'Tuesday', value: 2 },
+  { label: 'Wednesday', value: 3 },
+  { label: 'Thursday', value: 4 },
+  { label: 'Friday', value: 5 },
+  { label: 'Saturday', value: 6 }
+];
 
 function App() {
   return (
     <SessionProvider>
+      <BrowserRouter>
         <RestaurantAdminShell />
+      </BrowserRouter>
     </SessionProvider>
   );
 }
 
 function RestaurantAdminShell() {
   const session = useSessionContext();
-  const [route, setRoute] = useState<RouteKey>('overview');
+  const location = useLocation();
+  const navigate = useNavigate();
 
   const [contextId, setContextId] = useState('demo-context');
   const [configPayload, setConfigPayload] = useState<RestaurantAdminConfigResponse | null>(null);
-
-  const [windowRequest, setWindowRequest] = useState<SetServiceWindowRequest>({
-    contextId: 'demo-context',
-    day: 1,
-    openAt: '08:00:00',
-    closeAt: '22:00:00',
-    updatedBy: 'admin-operator'
-  });
   const [windowResponse, setWindowResponse] = useState<SetServiceWindowResponse | null>(null);
+  const [windowHistory, setWindowHistory] = useState<SetServiceWindowResponse[]>([]);
+  const [globalError, setGlobalError] = useState<string | null>(null);
+  const [loadingConfig, setLoadingConfig] = useState(false);
+  const [submittingWindow, setSubmittingWindow] = useState(false);
 
-  const [error, setError] = useState<string | null>(null);
+  const loginUrl = useMemo(() => buildGoogleOidcStartUrl(window.location.href), []);
-  const [loading, setLoading] = useState(false);
+  const selectedKey = useMemo(() => {
+    const candidate = routeItems.find((item) => location.pathname.startsWith(item.key));
+    return candidate?.key ?? '/config';
+  }, [location.pathname]);
 
   const loadConfig = async () => {
-    setLoading(true);
+    setLoadingConfig(true);
-    setError(null);
+    setGlobalError(null);
     try {
       const payload = await loadDashboard(contextId);
       setConfigPayload(payload);
-      setWindowRequest((previous) => ({ ...previous, contextId }));
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load restaurant admin configuration.');
+      setGlobalError(err instanceof Error ? err.message : 'Failed to load restaurant admin configuration.');
     } finally {
-      setLoading(false);
+      setLoadingConfig(false);
     }
   };
 
-  const applyServiceWindow = async () => {
+  const applyServiceWindow = async (values: ServiceWindowFormValues) => {
-    setLoading(true);
+    setSubmittingWindow(true);
-    setError(null);
+    setGlobalError(null);
+
+    const request: SetServiceWindowRequest = {
+      contextId: values.contextId,
+      day: values.day,
+      openAt: `${values.openAt.format('HH:mm')}:00`,
+      closeAt: `${values.closeAt.format('HH:mm')}:00`,
+      updatedBy: values.updatedBy
+    };
+
     try {
-      const payload = await setServiceWindow(windowRequest);
+      const payload = await setServiceWindow(request);
       setWindowResponse(payload);
+      // Keep recent responses bounded so the session view stays readable over long demos.
+      setWindowHistory((previous) => [payload, ...previous].slice(0, 8));
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to set service window.');
+      setGlobalError(err instanceof Error ? err.message : 'Failed to set service window.');
     } finally {
-      setLoading(false);
+      setSubmittingWindow(false);
     }
   };
 
   if (session.status === 'loading') {
     return (
-      <main className="app">
+      <div className="fullscreen-center">
-        <h1>Restaurant Admin Web</h1>
+        <Spin size="large" />
-        <p className="muted">Restoring session...</p>
+      </div>
-      </main>
     );
   }
 
   if (session.status !== 'authenticated' || !session.profile) {
     return (
       <main className="app">
-        <h1>Restaurant Admin Web</h1>
+        <Result
-        <p className="muted">Sign in with Thalos to access protected routes.</p>
+          status="403"
-        {session.error && <div className="alert">{session.error}</div>}
+          title="Authentication Required"
-        <LoginCard />
+          subTitle="Sign in through the central auth host to access restaurant administration workflows."
+          extra={
+            <Button type="primary" href={loginUrl}>
+              Continue with Google
+            </Button>
+          }
+        />
+        {session.error && <Alert type="error" showIcon message={session.error} />}
       </main>
     );
   }
 
   return (
-    <main className="app">
+    <Layout className="full-layout">
-      <h1>Restaurant Admin Web</h1>
+      <Layout.Sider width={240} breakpoint="lg" collapsedWidth={0}>
-      <p className="muted">Control-plane configuration and service-window management MVP workflows.</p>
+        <div className="brand">Restaurant Admin Web</div>
-
+        <Menu
-      <section className="card row">
+          mode="inline"
-        <span className="badge">subject: {session.profile.subjectId}</span>
+          selectedKeys={[selectedKey]}
-        <span className="badge">tenant: {session.profile.tenantId}</span>
+          items={routeItems}
-        <span className="badge">provider: {providerLabel(session.profile.provider)}</span>
+          onClick={(event) => navigate(event.key as AppRoute)}
-        <span className="spacer" />
+        />
-        <button type="button" className="secondary" onClick={() => void session.refresh()}>
+      </Layout.Sider>
+      <Layout>
+        <Layout.Header className="header">
+          <Space wrap>
+            <Tag color="blue">subject: {session.profile.subjectId}</Tag>
+            <Tag color="geekblue">tenant: {session.profile.tenantId}</Tag>
+            <Tag color="purple">provider: {providerLabel(session.profile.provider)}</Tag>
+          </Space>
+          <Space>
+            <Button icon={<ReloadOutlined />} onClick={() => void session.refresh()}>
               Refresh Session
-        </button>
+            </Button>
-        <button type="button" className="warn" onClick={() => void session.logout()}>
+            <Button danger onClick={() => void session.logout()}>
               Logout
-        </button>
+            </Button>
-      </section>
+          </Space>
+        </Layout.Header>
+        <Layout.Content className="content">
+          <Typography.Title level={3}>Restaurant Administration</Typography.Title>
+          <Typography.Paragraph type="secondary">
+            Protected control-plane workflows for restaurant configuration and service windows.
+          </Typography.Paragraph>
+          {session.error && <Alert className="stack-gap" type="warning" showIcon message={session.error} />}
+          {globalError && <Alert className="stack-gap" type="error" showIcon message={globalError} />}
 
-      <section className="card tabs" aria-label="route-shell">
+          <Routes>
-        <button
+            <Route
-          type="button"
+              path="/config"
-          className={route === 'overview' ? 'active' : undefined}
+              element={
-          onClick={() => setRoute('overview')}
+                <Card title="Configuration">
-        >
+                  <Space direction="vertical" size="middle" style={{ width: '100%' }}>
-          Config
+                    <Space wrap>
-        </button>
+                      <Input
-        <button
+                        value={contextId}
-          type="button"
+                        onChange={(event) => setContextId(event.target.value)}
-          className={route === 'actions' ? 'active' : undefined}
+                        placeholder="Context Id"
-          onClick={() => setRoute('actions')}
+                        style={{ width: 280 }}
-        >
+                      />
-          Service Window
+                      <Button type="primary" loading={loadingConfig} onClick={() => void loadConfig()}>
-        </button>
+                        Load Config
-      </section>
+                      </Button>
-
+                    </Space>
-      {session.error && <div className="alert">{session.error}</div>}
+                    {configPayload ? (
-      {error && <div className="alert">{error}</div>}
+                      <Descriptions bordered size="small" column={1}>
-
+                        <Descriptions.Item label="Context Id">{configPayload.contextId}</Descriptions.Item>
-      {route === 'overview' && (
+                        <Descriptions.Item label="Summary">{configPayload.summary}</Descriptions.Item>
-        <section className="card col">
+                      </Descriptions>
-          <div className="row">
+                    ) : (
-            <label className="col">
+                      <Typography.Text type="secondary">No admin configuration loaded.</Typography.Text>
-              Context Id
-              <input value={contextId} onChange={(event) => setContextId(event.target.value)} />
-            </label>
-            <button type="button" onClick={() => void loadConfig()} disabled={loading}>
-              {loading ? 'Loading...' : 'Load Config'}
-            </button>
-          </div>
-          <pre>{JSON.stringify(configPayload, null, 2)}</pre>
-        </section>
                     )}
-
+                  </Space>
-      {route === 'actions' && (
+                </Card>
-        <section className="card col">
-          <div className="grid">
-            <label className="col">
-              Context Id
-              <input
-                value={windowRequest.contextId}
-                onChange={(event) => setWindowRequest((previous) => ({ ...previous, contextId: event.target.value }))}
-              />
-            </label>
-            <label className="col">
-              Day Of Week
-              <select
-                value={windowRequest.day}
-                onChange={(event) =>
-                  setWindowRequest((previous) => ({
-                    ...previous,
-                    day: Number(event.target.value)
-                  }))
               }
+            />
+            <Route
+              path="/window"
+              element={
+                <Card title="Service Window">
+                  <Space direction="vertical" size="middle" style={{ width: '100%' }}>
+                    <Form<ServiceWindowFormValues>
+                      layout="vertical"
+                      initialValues={{
+                        contextId,
+                        day: 1,
+                        openAt: dayjs('08:00', 'HH:mm'),
+                        closeAt: dayjs('22:00', 'HH:mm'),
+                        updatedBy: 'admin-operator'
+                      }}
+                      onFinish={(values) => void applyServiceWindow(values)}
                     >
-                <option value={0}>Sunday</option>
+                      <Form.Item name="contextId" label="Context Id" rules={[{ required: true }]}>
-                <option value={1}>Monday</option>
+                        <Input placeholder="Context Id" />
-                <option value={2}>Tuesday</option>
+                      </Form.Item>
-                <option value={3}>Wednesday</option>
+                      <Form.Item name="day" label="Day Of Week" rules={[{ required: true }]}>
-                <option value={4}>Thursday</option>
+                        <Select options={dayOptions} />
-                <option value={5}>Friday</option>
+                      </Form.Item>
-                <option value={6}>Saturday</option>
+                      <Form.Item name="openAt" label="Open At" rules={[{ required: true }]}>
-              </select>
+                        <TimePicker format="HH:mm" style={{ width: '100%' }} />
-            </label>
+                      </Form.Item>
-            <label className="col">
+                      <Form.Item name="closeAt" label="Close At" rules={[{ required: true }]}>
-              Open At
+                        <TimePicker format="HH:mm" style={{ width: '100%' }} />
-              <input
+                      </Form.Item>
-                type="time"
+                      <Form.Item name="updatedBy" label="Updated By" rules={[{ required: true }]}>
-                value={windowRequest.openAt.slice(0, 5)}
+                        <Input placeholder="Operator Id" />
-                onChange={(event) =>
+                      </Form.Item>
-                  setWindowRequest((previous) => ({
+                      <Button type="primary" htmlType="submit" loading={submittingWindow}>
-                    ...previous,
+                        Apply Service Window
-                    openAt: `${event.target.value}:00`
+                      </Button>
-                  }))
+                    </Form>
-                }
+                    {windowResponse && (
-              />
+                      <Descriptions bordered size="small" column={1}>
-            </label>
+                        <Descriptions.Item label="Context Id">{windowResponse.contextId}</Descriptions.Item>
-            <label className="col">
+                        <Descriptions.Item label="Applied">{String(windowResponse.applied)}</Descriptions.Item>
-              Close At
+                        <Descriptions.Item label="Message">{windowResponse.message}</Descriptions.Item>
-              <input
+                      </Descriptions>
-                type="time"
-                value={windowRequest.closeAt.slice(0, 5)}
-                onChange={(event) =>
-                  setWindowRequest((previous) => ({
-                    ...previous,
-                    closeAt: `${event.target.value}:00`
-                  }))
-                }
-              />
-            </label>
-            <label className="col">
-              Updated By
-              <input
-                value={windowRequest.updatedBy}
-                onChange={(event) => setWindowRequest((previous) => ({ ...previous, updatedBy: event.target.value }))}
-              />
-            </label>
-          </div>
-          <button type="button" onClick={() => void applyServiceWindow()} disabled={loading}>
-            {loading ? 'Applying...' : 'Apply Service Window'}
-          </button>
-          <pre>{JSON.stringify(windowResponse, null, 2)}</pre>
-        </section>
                     )}
-    </main>
+                    <Table<SetServiceWindowResponse>
-  );
+                      pagination={false}
-}
+                      rowKey={(record) => `${record.contextId}-${record.message}-${record.applied ? '1' : '0'}`}
-
+                      dataSource={windowHistory}
-function LoginCard() {
+                      columns={[
-  const session = useSessionContext();
+                        { title: 'Context Id', dataIndex: 'contextId' },
-  const [subjectId, setSubjectId] = useState('demo-user');
+                        {
-  const [tenantId, setTenantId] = useState('demo-tenant');
+                          title: 'Applied',
-  const [provider, setProvider] = useState<IdentityProvider>(0);
+                          render: (_, record) => <Tag color={record.applied ? 'green' : 'red'}>{String(record.applied)}</Tag>
-  const [externalToken, setExternalToken] = useState('');
+                        },
-  const [error, setError] = useState<string | null>(null);
+                        { title: 'Message', dataIndex: 'message' }
-  const [submitting, setSubmitting] = useState(false);
+                      ]}
-
+                    />
-  const onSubmit = async () => {
+                  </Space>
-    setSubmitting(true);
+                </Card>
-    setError(null);
-    try {
-      await session.login({ subjectId, tenantId, provider, externalToken });
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Login failed.');
-    } finally {
-      setSubmitting(false);
               }
-  };
+            />
-
+            <Route
-  return (
+              path="/session"
-    <section className="card col">
+              element={
-      <div className="grid">
+                <Card title="Session Details">
-        <label className="col">
+                  <pre>{JSON.stringify(session.profile, null, 2)}</pre>
-          Subject Id
+                </Card>
-          <input value={subjectId} onChange={(event) => setSubjectId(event.target.value)} />
+              }
-        </label>
+            />
-        <label className="col">
+            <Route path="/" element={<Navigate to="/config" replace />} />
-          Tenant Id
+            <Route path="*" element={<Navigate to="/config" replace />} />
-          <input value={tenantId} onChange={(event) => setTenantId(event.target.value)} />
+          </Routes>
-        </label>
+        </Layout.Content>
-        <label className="col">
+      </Layout>
-          Provider
+    </Layout>
-          <select value={String(provider)} onChange={(event) => setProvider(Number(event.target.value) as IdentityProvider)}>
-            <option value="0">Internal JWT</option>
-            <option value="1">Azure AD (simulated)</option>
-            <option value="2">Google (simulated)</option>
-          </select>
-        </label>
-      </div>
-      <label className="col">
-        External Token (optional)
-        <input value={externalToken} onChange={(event) => setExternalToken(event.target.value)} />
-      </label>
-      <button type="button" onClick={() => void onSubmit()} disabled={submitting}>
-        {submitting ? 'Signing In...' : 'Sign In'}
-      </button>
-      {error && <div className="alert">{error}</div>}
-    </section>
   );
 }
 

src/api/client.test.ts

@@ -1,5 +1,5 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
-import { getApiBaseUrl, getThalosAuthBaseUrl } from './client';
+import { getApiBaseUrl, getThalosAuthBaseUrl, getThalosDefaultReturnUrl, getThalosDefaultTenantId } from './client';
 
 describe('client runtime base URLs', () => {
   afterEach(() => {
@@ -38,4 +38,28 @@ describe('client runtime base URLs', () => {
   it('falls back to localhost default when both runtime and env are missing', () => {
     expect(getApiBaseUrl()).toBe('http://localhost:8080');
   });
+
+  it('uses configured default return URL when present', () => {
+    window.__APP_CONFIG__ = {
+      THALOS_DEFAULT_RETURN_URL: 'https://restaurant-admin-demo.dream-views.com/config'
+    };
+
+    expect(getThalosDefaultReturnUrl()).toBe('https://restaurant-admin-demo.dream-views.com/config');
+  });
+
+  it('falls back to location-based return URL when no return URL is configured', () => {
+    expect(getThalosDefaultReturnUrl()).toBe(`${window.location.origin}/config`);
+  });
+
+  it('uses configured default tenant when present', () => {
+    window.__APP_CONFIG__ = {
+      THALOS_DEFAULT_TENANT_ID: 'tenant-alpha'
+    };
+
+    expect(getThalosDefaultTenantId()).toBe('tenant-alpha');
+  });
+
+  it('falls back to demo tenant when no tenant is configured', () => {
+    expect(getThalosDefaultTenantId()).toBe('demo-tenant');
+  });
 });

src/api/client.ts

@@ -3,6 +3,8 @@ declare global {
     __APP_CONFIG__?: {
       API_BASE_URL?: string;
       THALOS_AUTH_BASE_URL?: string;
+      THALOS_DEFAULT_RETURN_URL?: string;
+      THALOS_DEFAULT_TENANT_ID?: string;
     };
   }
 }
@@ -47,6 +49,24 @@ export function getThalosAuthBaseUrl(): string {
   return import.meta.env.VITE_THALOS_AUTH_BASE_URL ?? getApiBaseUrl();
 }
 
+export function getThalosDefaultReturnUrl(): string {
+  const runtimeValue = window.__APP_CONFIG__?.THALOS_DEFAULT_RETURN_URL;
+  if (runtimeValue && runtimeValue.length > 0) {
+    return runtimeValue;
+  }
+
+  return import.meta.env.VITE_THALOS_DEFAULT_RETURN_URL ?? `${window.location.origin}/config`;
+}
+
+export function getThalosDefaultTenantId(): string {
+  const runtimeValue = window.__APP_CONFIG__?.THALOS_DEFAULT_TENANT_ID;
+  if (runtimeValue && runtimeValue.length > 0) {
+    return runtimeValue;
+  }
+
+  return import.meta.env.VITE_THALOS_DEFAULT_TENANT_ID ?? 'demo-tenant';
+}
+
 export async function getJson<T>(path: string, baseUrl = getApiBaseUrl()): Promise<T> {
   return requestJson<T>(baseUrl, path, { method: 'GET' });
 }

src/auth/oidcLogin.test.ts

@@ -0,0 +1,38 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { buildGoogleOidcStartUrl } from './oidcLogin';
+
+describe('oidc login url', () => {
+  afterEach(() => {
+    delete window.__APP_CONFIG__;
+    vi.unstubAllEnvs();
+  });
+
+  it('builds google oidc start url from runtime config', () => {
+    window.__APP_CONFIG__ = {
+      THALOS_AUTH_BASE_URL: 'https://auth.dream-views.com',
+      THALOS_DEFAULT_RETURN_URL: 'https://restaurant-admin-demo.dream-views.com/config',
+      THALOS_DEFAULT_TENANT_ID: 'tenant-alpha'
+    };
+
+    const result = buildGoogleOidcStartUrl('https://restaurant-admin-demo.dream-views.com/window?day=1');
+    const parsed = new URL(result);
+
+    expect(parsed.origin).toBe('https://auth.dream-views.com');
+    expect(parsed.pathname).toBe('/api/identity/oidc/google/start');
+    expect(parsed.searchParams.get('tenantId')).toBe('tenant-alpha');
+    expect(parsed.searchParams.get('returnUrl')).toBe('https://restaurant-admin-demo.dream-views.com/window?day=1');
+  });
+
+  it('falls back to default return url when provided return url is invalid', () => {
+    window.__APP_CONFIG__ = {
+      THALOS_AUTH_BASE_URL: 'https://auth.dream-views.com',
+      THALOS_DEFAULT_RETURN_URL: 'https://restaurant-admin-demo.dream-views.com/config',
+      THALOS_DEFAULT_TENANT_ID: 'tenant-alpha'
+    };
+
+    const result = buildGoogleOidcStartUrl('not-a-url');
+    const parsed = new URL(result);
+
+    expect(parsed.searchParams.get('returnUrl')).toBe('https://restaurant-admin-demo.dream-views.com/config');
+  });
+});

src/auth/oidcLogin.ts

@@ -0,0 +1,25 @@
+import { getThalosAuthBaseUrl, getThalosDefaultReturnUrl, getThalosDefaultTenantId } from '../api/client';
+
+export function buildGoogleOidcStartUrl(returnUrl = window.location.href, tenantId = getThalosDefaultTenantId()): string {
+  const authBase = getThalosAuthBaseUrl().replace(/\/+$/, '');
+  const safeReturnUrl = sanitizeReturnUrl(returnUrl);
+  const query = new URLSearchParams({
+    returnUrl: safeReturnUrl,
+    tenantId
+  });
+
+  return `${authBase}/api/identity/oidc/google/start?${query.toString()}`;
+}
+
+function sanitizeReturnUrl(rawReturnUrl: string): string {
+  try {
+    const parsed = new URL(rawReturnUrl);
+    if (parsed.protocol === 'https:' || parsed.protocol === 'http:') {
+      return parsed.toString();
+    }
+  } catch {
+    return getThalosDefaultReturnUrl();
+  }
+
+  return getThalosDefaultReturnUrl();
+}

src/main.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import 'antd/dist/reset.css';
 import './styles.css';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(

src/styles.css

@@ -1,138 +1,60 @@
 :root {
   font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
-  color: #111827;
+  background: radial-gradient(circle at 20% 0%, #f8fbff 0%, #eef4ff 45%, #f7fafc 100%);
-  background: radial-gradient(circle at top, #f7f8fb 0%, #eef2ff 45%, #f8fafc 100%);
 }
 
 * {
   box-sizing: border-box;
 }
 
-body {
+html,
-  margin: 0;
+body,
-  min-height: 100vh;
-}
-
 #root {
-  min-height: 100vh;
+  margin: 0;
+  min-height: 100%;
+  height: 100%;
 }
 
 .app {
-  width: min(960px, 94vw);
+  min-height: 100%;
-  margin: 0 auto;
-  padding: 1.5rem 0 3rem;
-}
-
-.card {
-  background: #ffffff;
-  border: 1px solid #dbe3f4;
-  border-radius: 14px;
-  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
-  padding: 1rem;
-  margin-top: 1rem;
-}
-
-.row {
-  display: flex;
-  gap: 0.75rem;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.col {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-input,
-select,
-textarea {
-  border: 1px solid #c8d2ea;
-  border-radius: 10px;
-  padding: 0.6rem 0.8rem;
-  font: inherit;
-}
-
-textarea {
-  min-height: 120px;
-  resize: vertical;
-}
-
-button {
-  border: none;
-  border-radius: 10px;
-  padding: 0.6rem 0.9rem;
-  font-weight: 600;
-  cursor: pointer;
-  background: #1d4ed8;
-  color: #ffffff;
-}
-
-button.secondary {
-  background: #475569;
-}
-
-button.warn {
-  background: #b91c1c;
-}
-
-button.ghost {
-  background: #e2e8f0;
-  color: #0f172a;
-}
-
-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  place-items: center;
-  gap: 1rem;
+  padding: 2rem 1rem;
 }
 
-.alert {
+.fullscreen-center {
-  border-radius: 10px;
+  height: 100%;
-  padding: 0.7rem 0.9rem;
+  display: grid;
-  border: 1px solid #fecaca;
+  place-items: center;
-  background: #fef2f2;
-  color: #7f1d1d;
 }
 
-.muted {
+.full-layout {
-  color: #475569;
+  min-height: 100%;
 }
 
-.badge {
+.brand {
-  display: inline-block;
+  color: #e2e8f0;
-  border-radius: 999px;
+  font-weight: 700;
-  background: #e2e8f0;
+  letter-spacing: 0.04em;
-  color: #0f172a;
+  padding: 1rem;
-  padding: 0.2rem 0.6rem;
-  font-size: 0.78rem;
-  font-weight: 600;
 }
 
-.tabs {
+.header {
+  background: #ffffff;
+  border-bottom: 1px solid #e2e8f0;
   display: flex;
-  gap: 0.5rem;
+  justify-content: space-between;
-  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+  padding-inline: 1rem;
 }
 
-.tabs button {
+.content {
-  background: #dbeafe;
+  padding: 1.25rem;
-  color: #1e3a8a;
 }
 
-.tabs button.active {
+.stack-gap {
-  background: #1d4ed8;
+  margin-bottom: 1rem;
-  color: #ffffff;
-}
-
-.spacer {
-  flex: 1;
 }
 
 pre {

src/test/setup.ts

@@ -1 +1,30 @@
 import '@testing-library/jest-dom/vitest';
+
+if (!window.matchMedia) {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: (query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: () => undefined,
+      removeListener: () => undefined,
+      addEventListener: () => undefined,
+      removeEventListener: () => undefined,
+      dispatchEvent: () => false
+    })
+  });
+}
+
+if (!window.ResizeObserver) {
+  class ResizeObserverMock {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+
+  window.ResizeObserver = ResizeObserverMock;
+}
+
+const originalGetComputedStyle = window.getComputedStyle.bind(window);
+window.getComputedStyle = ((element: Element) => originalGetComputedStyle(element)) as typeof window.getComputedStyle;