oregon-mai/oregon-frontend

Purpose and runtime

T1 Workspace is a Vite/React TypeScript frontend for employee desk booking. It runs locally through the Vite dev server and currently uses a stub authentication flow; no backend implementation is present. Browser localStorage persists the JWT token.

Entry bootstrap and route/provider composition are in src/main.tsx; global styling begins in src/index.css.

Application shell and navigation

The authenticated workspace is organized around a shared layout that supplies the top bar, navigation sidebar, and page content area:

• src/components/Layout.tsx

• src/components/Sidebar.tsx

• src/components/Layout.module.css

The sidebar is also the floor/navigation and “today” booking summary boundary. The principal protected destination is the office map page at /map.

Authentication boundary

Authentication is modeled as a global React context holding the current user and bookings:

• src/context/AuthContext.tsx

• src/types/auth.ts

src/api/authApi.ts defines the login API boundary (POST /auth/login), while the current README-described behavior is a client-side stub accepting an email and password of at least six characters. Login UI lives in src/pages/LoginPage.tsx.

Access control is enforced at routing level by src/components/ProtectedRoute.tsx, which checks for the stored token and redirects unauthenticated users away from /map to /login.

Route and session flow

1. src/main.tsx initializes React routing and wraps routes in AuthProvider.

2. A user submits credentials on src/pages/LoginPage.tsx.

3. The login page calls src/api/authApi.ts; successful authentication updates AuthContext and stores the token in browser storage.

4. ProtectedRoute permits access to src/pages/MapPage.tsx only with an authenticated token.

5. Logout from the shared layout clears session state/token and returns the user to the public login flow.

Office map domain

The office visualization and booking domain types are separated from rendering:

• src/types/map.ts

• src/pages/MapPage.tsx

• src/components/OfficeMap/OfficeMap.tsx

MapPage composes the workspace view. OfficeMap renders desks grouped by zones and exposes desk status distinctions: available, occupied, and booked by the current user. Domain structures include desks, zones, and bookings, enabling the map to remain a presentation/selection layer rather than own authentication state.

Booking interaction flow

Selecting a bookable desk on the map feeds the booking panel:

• src/components/OfficeMap/OfficeMap.tsx

• src/components/BookingPanel/BookingPanel.tsx

• src/context/AuthContext.tsx

BookingPanel presents 15-minute reservation slots. Booking changes are maintained in AuthContext, making them available both to the map (for desk status) and sidebar/widget views (for today’s reservations). This is currently client-side shared state; no booking API or persistence service is represented in the repository.

Key boundaries and extension points

The repository separates external authentication integration (src/api/authApi.ts) from session state (src/context/AuthContext.tsx), and map domain contracts (src/types/map.ts) from visual components. A production backend can replace the auth stub and add booking/map data APIs without changing route protection or the broad page composition. The material platform dependencies are React, TypeScript, Vite, browser routing, and localStorage; no server runtime, database, or external infrastructure is included.