feat(furniture-web): add ant protected route shell

2026-03-11 10:48:12 -06:00 · 2026-03-11 10:48:12 -06:00 · db32bc8d60
commit db32bc8d60
parent 70b9ef1f3f
17 changed files with 1605 additions and 273 deletions
--- a/docker/40-runtime-config.sh
+++ b/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:-https://furniture-display-demo.dream-views.com/availability}",
+  THALOS_DEFAULT_TENANT_ID: "${THALOS_DEFAULT_TENANT_ID:-demo-tenant}"
 };
 EOT
--- a/docs/architecture/frontend-boundary.md
+++ b/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

@ -18,3 +21,5 @@

 - Furniture availability lookup
 - Protected quick-reload actions for recent furniture ids
+- Reservation draft workflow (local projection) for UX validation until reservation APIs are exposed
+- Session inspection route and auth-state-aware route shell
--- a/docs/runbooks/containerization.md
+++ b/docs/runbooks/containerization.md
@ -11,6 +11,9 @@ docker build -t agilewebs/furniture-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:22380/availability \
+  -e THALOS_DEFAULT_TENANT_ID=demo-tenant \
  --name furniture-web agilewebs/furniture-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

--- a/docs/runbooks/local-development.md
+++ b/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:22380/availability \
+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`.

--- a/docs/runbooks/testing.md
+++ b/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 availability flow, and reservation draft workflow.

 ## Notes

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -11,8 +11,11 @@
    "test:ci": "vitest run --coverage=false"
  },
  "dependencies": {
+    "@ant-design/icons": "^6.0.0",
+    "antd": "^5.27.0",
    "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",
--- a/public/runtime-config.js
+++ b/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: "https://furniture-display-demo.dream-views.com/availability",
+  THALOS_DEFAULT_TENANT_ID: "demo-tenant"
 };
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@ -13,25 +13,32 @@ vi.mock('./api/dashboardApi', () => ({
 }));

 import { loadDashboard } from './api/dashboardApi';
-import { getSessionMe, loginSession } from './api/sessionApi';
+import { getSessionMe } from './api/sessionApi';
 import App from './App';

 describe('Furniture App', () => {
  beforeEach(() => {
    vi.mocked(loadDashboard).mockReset();
    vi.mocked(getSessionMe).mockReset();
-    vi.mocked(loginSession).mockReset();
+    window.__APP_CONFIG__ = {
+      API_BASE_URL: 'http://localhost:8080',
+      THALOS_AUTH_BASE_URL: 'https://auth.dream-views.com',
+      THALOS_DEFAULT_RETURN_URL: 'https://furniture-display-demo.dream-views.com/availability',
+      THALOS_DEFAULT_TENANT_ID: 'demo-tenant'
+    };
+    window.history.pushState({}, '', '/availability');
  });

-  it('requires login when session is missing', async () => {
+  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('button', { name: 'Sign In' })).toBeInTheDocument());
-    fireEvent.click(screen.getByRole('button', { name: 'Sign In' }));
+    await waitFor(() => expect(screen.getByRole('link', { name: 'Continue with Google' })).toBeInTheDocument());
+    const link = screen.getByRole('link', { name: 'Continue with Google' }) as HTMLAnchorElement;

-    await waitFor(() => expect(loginSession).toHaveBeenCalledTimes(1));
+    expect(link.href).toContain('/api/identity/oidc/google/start');
+    expect(link.href).toContain('tenantId=demo-tenant');
  });

  it('loads protected availability data', async () => {
@ -54,7 +61,33 @@ describe('Furniture App', () => {

    await waitFor(() => {
      expect(loadDashboard).toHaveBeenCalledWith('FURN-001');
-      expect(screen.getByText(/Chair/)).toBeInTheDocument();
+      expect(screen.getAllByText(/Chair/).length).toBeGreaterThan(0);
    });
  });
+
+  it('allows creating local reservation records after loading availability', async () => {
+    vi.mocked(getSessionMe).mockResolvedValue({
+      isAuthenticated: true,
+      subjectId: 'demo-user',
+      tenantId: 'demo-tenant',
+      provider: 0
+    });
+    vi.mocked(loadDashboard).mockResolvedValue({
+      furnitureId: 'FURN-001',
+      displayName: 'Chair',
+      quantityAvailable: 4
+    });
+
+    render(<App />);
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Load Availability' })).toBeInTheDocument());
+    fireEvent.click(screen.getByRole('button', { name: 'Load Availability' }));
+    await waitFor(() => expect(screen.getAllByText('Chair').length).toBeGreaterThan(0));
+
+    fireEvent.click(screen.getByText('Reservations'));
+    fireEvent.change(screen.getByPlaceholderText('Customer name'), { target: { value: 'Jane Doe' } });
+    fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '2' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Create Reservation' }));
+
+    await waitFor(() => expect(screen.getByText('Jane Doe')).toBeInTheDocument());
+  });
 });
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,190 +1,279 @@
-import { useState } from 'react';
+import { CalendarOutlined, DatabaseOutlined, LoginOutlined, ReloadOutlined } from '@ant-design/icons';
+import { Alert, Button, Card, Descriptions, Empty, Form, Input, InputNumber, Layout, Menu, Result, Space, Spin, Table, Tag, Typography } from 'antd';
+import { type ReactNode, useMemo, useState } from 'react';
+import { BrowserRouter, Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import { loadDashboard, type FurnitureAvailabilityResponse } from './api/dashboardApi';
-import { SessionProvider, useSessionContext } from './auth/sessionContext';
 import type { IdentityProvider } from './api/sessionApi';
+import { SessionProvider, useSessionContext } from './auth/sessionContext';
+import { buildGoogleOidcStartUrl } from './auth/oidcLogin';

-type RouteKey = 'overview' | 'actions';
+type AppRoute = '/availability' | '/reservations' | '/session';
+type ReservationRecord = {
+  key: string;
+  reservationId: string;
+  furnitureId: string;
+  customerName: string;
+  quantity: number;
+  status: 'pending' | 'confirmed';
+  createdAt: string;
+};
+
+const routeItems: Array<{ key: AppRoute; label: string; icon: ReactNode }> = [
+  { key: '/availability', label: 'Availability', icon: <DatabaseOutlined /> },
+  { key: '/reservations', label: 'Reservations', icon: <CalendarOutlined /> },
+  { key: '/session', label: 'Session', icon: <LoginOutlined /> }
+];

 function App() {
  return (
    <SessionProvider>
-      <FurnitureShell />
+      <BrowserRouter>
+        <FurnitureShell />
+      </BrowserRouter>
    </SessionProvider>
  );
 }

 function FurnitureShell() {
  const session = useSessionContext();
-  const [route, setRoute] = useState<RouteKey>('overview');
+  const location = useLocation();
+  const navigate = useNavigate();
+
  const [furnitureId, setFurnitureId] = useState('FURN-001');
  const [availability, setAvailability] = useState<FurnitureAvailabilityResponse | null>(null);
  const [history, setHistory] = useState<FurnitureAvailabilityResponse[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
+  const [reservations, setReservations] = useState<ReservationRecord[]>([]);
+  const [globalError, setGlobalError] = useState<string | null>(null);
+  const [loadingAvailability, setLoadingAvailability] = useState(false);
+  const [creatingReservation, setCreatingReservation] = useState(false);
+
+  const loginUrl = useMemo(() => buildGoogleOidcStartUrl(window.location.href), []);
+  const selectedKey = useMemo(() => {
+    const candidate = routeItems.find((item) => location.pathname.startsWith(item.key));
+    return candidate?.key ?? '/availability';
+  }, [location.pathname]);

  const loadAvailability = async (targetFurnitureId = furnitureId) => {
-    setLoading(true);
-    setError(null);
+    setLoadingAvailability(true);
+    setGlobalError(null);
    try {
      const response = await loadDashboard(targetFurnitureId);
      setAvailability(response);
-      setHistory((previous) => [response, ...previous.filter((item) => item.furnitureId !== response.furnitureId)].slice(0, 5));
+      setHistory((previous) => [response, ...previous.filter((item) => item.furnitureId !== response.furnitureId)].slice(0, 8));
    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Unable to load furniture availability.');
+      setGlobalError(err instanceof Error ? err.message : 'Unable to load furniture availability.');
    } finally {
-      setLoading(false);
+      setLoadingAvailability(false);
+    }
+  };
+
+  const createReservation = async (values: { customerName: string; quantity: number }) => {
+    setCreatingReservation(true);
+    setGlobalError(null);
+    try {
+      if (!availability) {
+        setGlobalError('Load availability before creating a reservation.');
+        return;
+      }
+
+      if (values.quantity > availability.quantityAvailable) {
+        setGlobalError('Requested quantity is greater than current availability.');
+        return;
+      }
+
+      // Temporary local reservation projection until reservation endpoints are exposed by furniture-bff.
+      const timestamp = new Date().toISOString();
+      const reservationId = `RSV-${Date.now().toString(36).toUpperCase()}`;
+      setReservations((previous) => [
+        {
+          key: reservationId,
+          reservationId,
+          furnitureId: availability.furnitureId,
+          customerName: values.customerName,
+          quantity: values.quantity,
+          status: 'pending',
+          createdAt: timestamp
+        },
+        ...previous
+      ]);
+    } finally {
+      setCreatingReservation(false);
    }
  };

  if (session.status === 'loading') {
    return (
-      <main className="app">
-        <h1>Furniture Web</h1>
-        <p className="muted">Restoring session...</p>
-      </main>
+      <div className="fullscreen-center">
+        <Spin size="large" />
+      </div>
    );
  }

  if (session.status !== 'authenticated' || !session.profile) {
    return (
      <main className="app">
-        <h1>Furniture Web</h1>
-        <p className="muted">Sign in with Thalos to access furniture operations.</p>
-        {session.error && <div className="alert">{session.error}</div>}
-        <LoginCard />
+        <Result
+          status="403"
+          title="Authentication Required"
+          subTitle="Sign in through the central auth host to access furniture 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">
-      <h1>Furniture Web</h1>
-      <p className="muted">Availability MVP with protected routes and resilient request handling.</p>
+    <Layout className="full-layout">
+      <Layout.Sider width={240} breakpoint="lg" collapsedWidth={0}>
+        <div className="brand">Furniture Web</div>
+        <Menu
+          mode="inline"
+          selectedKeys={[selectedKey]}
+          items={routeItems}
+          onClick={(event) => navigate(event.key as AppRoute)}
+        />
+      </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 danger onClick={() => void session.logout()}>
+              Logout
+            </Button>
+          </Space>
+        </Layout.Header>
+        <Layout.Content className="content">
+          <Typography.Title level={3}>Furniture Operations</Typography.Title>
+          <Typography.Paragraph type="secondary">
+            Protected furniture workflow shell with Ant Design components and resilient auth-aware UX.
+          </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 row">
-        <span className="badge">subject: {session.profile.subjectId}</span>
-        <span className="badge">tenant: {session.profile.tenantId}</span>
-        <span className="badge">provider: {providerLabel(session.profile.provider)}</span>
-        <span className="spacer" />
-        <button type="button" className="secondary" onClick={() => void session.refresh()}>
-          Refresh Session
-        </button>
-        <button type="button" className="warn" onClick={() => void session.logout()}>
-          Logout
-        </button>
-      </section>
-
-      <section className="card tabs" aria-label="route-shell">
-        <button
-          type="button"
-          className={route === 'overview' ? 'active' : undefined}
-          onClick={() => setRoute('overview')}
-        >
-          Availability
-        </button>
-        <button
-          type="button"
-          className={route === 'actions' ? 'active' : undefined}
-          onClick={() => setRoute('actions')}
-        >
-          Quick Actions
-        </button>
-      </section>
-
-      {session.error && <div className="alert">{session.error}</div>}
-      {error && <div className="alert">{error}</div>}
-
-      {route === 'overview' && (
-        <section className="card col">
-          <div className="row">
-            <label className="col">
-              Furniture Id
-              <input value={furnitureId} onChange={(event) => setFurnitureId(event.target.value)} />
-            </label>
-            <button type="button" onClick={() => void loadAvailability()} disabled={loading}>
-              {loading ? 'Loading...' : 'Load Availability'}
-            </button>
-          </div>
-          <pre>{JSON.stringify(availability, null, 2)}</pre>
-        </section>
-      )}
-
-      {route === 'actions' && (
-        <section className="card col">
-          <strong>Recent lookups</strong>
-          <div className="row">
-            {history.length === 0 && <span className="muted">No lookups yet.</span>}
-            {history.map((item) => (
-              <button
-                key={item.furnitureId}
-                type="button"
-                className="ghost"
-                onClick={() => {
-                  setFurnitureId(item.furnitureId);
-                  void loadAvailability(item.furnitureId);
-                }}
-              >
-                {item.furnitureId} ({item.quantityAvailable})
-              </button>
-            ))}
-          </div>
-          <p className="muted">Use quick actions to repeat common availability checks.</p>
-        </section>
-      )}
-    </main>
-  );
-}
-
-function LoginCard() {
-  const session = useSessionContext();
-  const [subjectId, setSubjectId] = useState('demo-user');
-  const [tenantId, setTenantId] = useState('demo-tenant');
-  const [provider, setProvider] = useState<IdentityProvider>(0);
-  const [externalToken, setExternalToken] = useState('');
-  const [error, setError] = useState<string | null>(null);
-  const [submitting, setSubmitting] = useState(false);
-
-  const onSubmit = async () => {
-    setSubmitting(true);
-    setError(null);
-    try {
-      await session.login({ subjectId, tenantId, provider, externalToken });
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Login failed.');
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <section className="card col">
-      <div className="grid">
-        <label className="col">
-          Subject Id
-          <input value={subjectId} onChange={(event) => setSubjectId(event.target.value)} />
-        </label>
-        <label className="col">
-          Tenant Id
-          <input value={tenantId} onChange={(event) => setTenantId(event.target.value)} />
-        </label>
-        <label className="col">
-          Provider
-          <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>
+          <Routes>
+            <Route
+              path="/availability"
+              element={
+                <Card title="Availability Lookup">
+                  <Space direction="vertical" size="middle" style={{ width: '100%' }}>
+                    <Space wrap>
+                      <Input
+                        value={furnitureId}
+                        onChange={(event) => setFurnitureId(event.target.value)}
+                        placeholder="Furniture Id"
+                        style={{ width: 260 }}
+                      />
+                      <Button type="primary" loading={loadingAvailability} onClick={() => void loadAvailability()}>
+                        Load Availability
+                      </Button>
+                    </Space>
+                    {availability ? (
+                      <Descriptions bordered size="small" column={1}>
+                        <Descriptions.Item label="Furniture Id">{availability.furnitureId}</Descriptions.Item>
+                        <Descriptions.Item label="Display Name">{availability.displayName}</Descriptions.Item>
+                        <Descriptions.Item label="Quantity Available">{availability.quantityAvailable}</Descriptions.Item>
+                      </Descriptions>
+                    ) : (
+                      <Empty description="No availability loaded." />
+                    )}
+                    <Typography.Title level={5}>Recent Lookups</Typography.Title>
+                    <Table<FurnitureAvailabilityResponse>
+                      pagination={false}
+                      rowKey={(record) => record.furnitureId}
+                      dataSource={history}
+                      columns={[
+                        { title: 'Furniture Id', dataIndex: 'furnitureId' },
+                        { title: 'Display Name', dataIndex: 'displayName' },
+                        { title: 'Quantity', dataIndex: 'quantityAvailable' },
+                        {
+                          title: 'Action',
+                          render: (_, record) => (
+                            <Button
+                              size="small"
+                              onClick={() => {
+                                setFurnitureId(record.furnitureId);
+                                void loadAvailability(record.furnitureId);
+                              }}
+                            >
+                              Reuse
+                            </Button>
+                          )
+                        }
+                      ]}
+                    />
+                  </Space>
+                </Card>
+              }
+            />
+            <Route
+              path="/reservations"
+              element={
+                <Card title="Reservation Drafting">
+                  <Space direction="vertical" size="middle" style={{ width: '100%' }}>
+                    <Typography.Paragraph type="secondary">
+                      Creates local reservation projections to validate UX while backend reservation endpoints are staged.
+                    </Typography.Paragraph>
+                    <Form layout="vertical" onFinish={(values) => void createReservation(values)}>
+                      <Form.Item label="Customer Name" name="customerName" rules={[{ required: true }]}>
+                        <Input placeholder="Customer name" />
+                      </Form.Item>
+                      <Form.Item
+                        label="Quantity"
+                        name="quantity"
+                        initialValue={1}
+                        rules={[{ required: true, type: 'number', min: 1 }]}
+                      >
+                        <InputNumber min={1} style={{ width: '100%' }} />
+                      </Form.Item>
+                      <Button type="primary" htmlType="submit" loading={creatingReservation}>
+                        Create Reservation
+                      </Button>
+                    </Form>
+                    <Table<ReservationRecord>
+                      pagination={false}
+                      dataSource={reservations}
+                      columns={[
+                        { title: 'Reservation Id', dataIndex: 'reservationId' },
+                        { title: 'Furniture Id', dataIndex: 'furnitureId' },
+                        { title: 'Customer', dataIndex: 'customerName' },
+                        { title: 'Quantity', dataIndex: 'quantity' },
+                        {
+                          title: 'Status',
+                          render: (_, record) => <Tag color={record.status === 'confirmed' ? 'green' : 'gold'}>{record.status}</Tag>
+                        },
+                        { title: 'Created At', dataIndex: 'createdAt' }
+                      ]}
+                    />
+                  </Space>
+                </Card>
+              }
+            />
+            <Route
+              path="/session"
+              element={
+                <Card title="Session Details">
+                  <pre>{JSON.stringify(session.profile, null, 2)}</pre>
+                </Card>
+              }
+            />
+            <Route path="/" element={<Navigate to="/availability" replace />} />
+            <Route path="*" element={<Navigate to="/availability" replace />} />
+          </Routes>
+        </Layout.Content>
+      </Layout>
+    </Layout>
  );
 }

--- a/src/api/client.test.ts
+++ b/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,14 @@ 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 runtime defaults for return URL and tenant when present', () => {
+    window.__APP_CONFIG__ = {
+      THALOS_DEFAULT_RETURN_URL: 'https://furniture-display-demo.dream-views.com/availability',
+      THALOS_DEFAULT_TENANT_ID: 'tenant-1'
+    };
+
+    expect(getThalosDefaultReturnUrl()).toBe('https://furniture-display-demo.dream-views.com/availability');
+    expect(getThalosDefaultTenantId()).toBe('tenant-1');
+  });
 });
--- a/src/api/client.ts
+++ b/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}/availability`;
+}
+
+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' });
 }
--- a/src/auth/oidcLogin.test.ts
+++ b/src/auth/oidcLogin.test.ts
@ -0,0 +1,31 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { buildGoogleOidcStartUrl } from './oidcLogin';
+
+describe('oidc login url builder', () => {
+  afterEach(() => {
+    delete window.__APP_CONFIG__;
+    vi.unstubAllEnvs();
+  });
+
+  it('builds Google start URL with safe return URL and tenant context', () => {
+    window.__APP_CONFIG__ = {
+      THALOS_AUTH_BASE_URL: 'https://auth.dream-views.com',
+      THALOS_DEFAULT_TENANT_ID: 'demo-tenant'
+    };
+
+    const url = buildGoogleOidcStartUrl('https://furniture-display-demo.dream-views.com/availability');
+    expect(url).toContain('/api/identity/oidc/google/start');
+    expect(url).toContain('tenantId=demo-tenant');
+    expect(url).toContain(encodeURIComponent('https://furniture-display-demo.dream-views.com/availability'));
+  });
+
+  it('falls back to default return URL when protocol is invalid', () => {
+    window.__APP_CONFIG__ = {
+      THALOS_AUTH_BASE_URL: 'https://auth.dream-views.com',
+      THALOS_DEFAULT_RETURN_URL: 'https://furniture-display-demo.dream-views.com/availability'
+    };
+
+    const url = buildGoogleOidcStartUrl('javascript:alert(1)');
+    expect(url).toContain(encodeURIComponent('https://furniture-display-demo.dream-views.com/availability'));
+  });
+});
--- a/src/auth/oidcLogin.ts
+++ b/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();
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import 'antd/dist/reset.css';
 import App from './App';
 import './styles.css';

--- a/src/styles.css
+++ b/src/styles.css
@ -1,138 +1,60 @@
 :root {
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
-  color: #111827;
-  background: radial-gradient(circle at top, #f7f8fb 0%, #eef2ff 45%, #f8fafc 100%);
+  background: radial-gradient(circle at 20% 0%, #f8fbff 0%, #eef4ff 45%, #f7fafc 100%);
 }

 * {
  box-sizing: border-box;
 }

-body {
-  margin: 0;
-  min-height: 100vh;
-}
-
+html,
+body,
 #root {
-  min-height: 100vh;
+  margin: 0;
+  min-height: 100%;
+  height: 100%;
 }

 .app {
-  width: min(960px, 94vw);
-  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 {
+  min-height: 100%;
  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 1rem;
+  place-items: center;
+  padding: 2rem 1rem;
 }

-.alert {
-  border-radius: 10px;
-  padding: 0.7rem 0.9rem;
-  border: 1px solid #fecaca;
-  background: #fef2f2;
-  color: #7f1d1d;
+.fullscreen-center {
+  height: 100%;
+  display: grid;
+  place-items: center;
 }

-.muted {
-  color: #475569;
+.full-layout {
+  min-height: 100%;
 }

-.badge {
-  display: inline-block;
-  border-radius: 999px;
-  background: #e2e8f0;
-  color: #0f172a;
-  padding: 0.2rem 0.6rem;
-  font-size: 0.78rem;
-  font-weight: 600;
+.brand {
+  color: #e2e8f0;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  padding: 1rem;
 }

-.tabs {
+.header {
+  background: #ffffff;
+  border-bottom: 1px solid #e2e8f0;
  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.75rem;
+  padding-inline: 1rem;
 }

-.tabs button {
-  background: #dbeafe;
-  color: #1e3a8a;
+.content {
+  padding: 1.25rem;
 }

-.tabs button.active {
-  background: #1d4ed8;
-  color: #ffffff;
-}
-
-.spacer {
-  flex: 1;
+.stack-gap {
+  margin-bottom: 1rem;
 }

 pre {
--- a/src/test/setup.ts
+++ b/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;