Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/ti-infinite/GSMApplication/llms.txt

Use this file to discover all available pages before exploring further.

The GSM Application frontend is a static single-page application built with Vite 6 and React 19. It ships a locale-prefixed router, per-tenant theming, and fully typed API client hooks generated directly from the backend OpenAPI specifications. The final build artifact is a plain dist/ folder deployed to AWS S3 and served globally through CloudFront.

​
Technology Stack

Core Framework

React 19 with TypeScript, bundled by Vite 6. Strict mode is on by default. Path alias @/ maps to src/.

Styling

Tailwind CSS v4 via the PostCSS plugin. CSS custom properties carry per-tenant brand colors applied at runtime.

Routing

React Router v7 with locale-prefixed routes (/en/…, /es/…). The locale is read from localStorage on first load.

Data Fetching

TanStack Query v5 wraps every API call. Query keys, stale times, and suspense boundaries are configured per feature.

Internationalisation

i18next with react-i18next loads translation files for English (en.json) and Spanish (es.json) from messages/.

Session & Cookies

js-cookie reads and writes the gsm_exp, gsm_user_name, and gsm_company cookies set after a successful login.

UI Primitives

Radix UI (Dialog, DropdownMenu, Tooltip, Slot) provides accessible headless components. Icons come from lucide-react.

Notifications

sonner renders rich-colour toast notifications anchored to the top-center of the viewport.

​
Project Structure

The codebase follows a domain-driven layout where each slice of product functionality lives under src/features/ and every piece of shared infrastructure lives under src/shared/. 
src/
├── app/
│   └── providers/          # QueryProvider, TenantProvider, i18n bootstrap
├── features/
│   ├── dashboard/          # DashboardActivity, QuickCards
│   ├── productivity/       # Labor assignment wizard + checkout view
│   ├── products/           # Product picker wizard
│   ├── resources/          # Training materials viewer
│   ├── settings/           # Account preferences + password change
│   └── sop/                # Standard Operating Procedures viewer
├── layouts/
│   ├── DashboardLayout.tsx # Shell with Sidebar + Topbar
│   └── LocaleLayout.tsx    # Sets i18n locale from :locale param
├── pages/
│   ├── LoginPage.tsx        # Tenant resolution + credential form
│   ├── DashboardPage.tsx    # Quick-access cards + activity feed
│   └── ModulePage.tsx       # Dynamic module renderer
└── shared/
    ├── api/                 # Generated API clients (auth / application / operations)
    ├── components/          # AuthGuard, ErrorBoundary, renderers, …
    ├── hooks/               # useMenu, useLocale, useBiEmbed, …
    ├── lib/                 # auth.ts, tenant.ts, theme.ts, fetcher.ts, …
    └── ui/                  # Primitive UI components (button, skeleton, dialog, …)
messages/
├── en.json
└── es.json
swagger/
├── gsm-auth.json
├── gsm-application.json
└── gsm-operations.json

​
Orval API Code Generation

Rather than writing API client code by hand, the project uses Orval to generate fully typed React Query hooks from the three backend OpenAPI specs stored in swagger/. 
npm run generate   # runs: orval
Orval reads orval.config.ts and writes to src/shared/api/:
Config keyInput specOutput directoryMutator
gsmApplicationswagger/gsm-application.jsonsrc/shared/api/application/applicationFetch
gsmAuthswagger/gsm-auth.jsonsrc/shared/api/auth/authFetch
gsmOperationsswagger/gsm-operations.jsonsrc/shared/api/operations/operationsFetch
Each generator uses mode: 'tags-split' so hooks are grouped by OpenAPI tag into separate files. The gsmOperations generator additionally filters to only the Integrations and Operations tags from the spec. All hooks are wrapped by a custom mutator function defined in src/shared/lib/fetcher.ts that attaches credentials and handles auth errors globally.
Re-run npm run generate whenever a backend OpenAPI spec changes. The generated files under src/shared/api/ are committed to source control so the CI build does not require a live backend.

​
Vite Dev Proxy

In development, all requests matching /api/* are proxied to http://localhost:80, which is where the local gateway listens. This avoids CORS issues and mirrors the production routing handled by YARP inside the gateway container. 
// vite.config.ts
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:80',
      changeOrigin: true,
    },
  },
},

​
Build & Chunking

npm run build runs tsc -b for type checking and then vite build, emitting optimised output to dist/. Manual chunk splitting keeps vendor bundles separate from application code:
ChunkLibraries
vendor-reactreact, react-dom
vendor-routerreact-router-dom
vendor-query@tanstack/react-query
vendor-i18ni18next, react-i18next
vendor-uilucide-react, @radix-ui/react-dropdown-menu, @radix-ui/react-dialog, @radix-ui/react-tooltip, @radix-ui/react-slot
vendor-utilsclsx, tailwind-merge, class-variance-authority, js-cookie

​
Local Development

1

Copy environment variables

cp .env.example .env.local
Set VITE_TENANT_DEFAULT to the default Company ID shown on the login page (e.g. IH001) and VITE_TENANT_IDS to a comma-separated list of all tenant IDs that should be selectable in the login panel (e.g. IH001,AG001).
2

Install dependencies

npm install
3

Generate API clients

npm run generate
This step is only needed when the OpenAPI specs have changed since your last checkout.
4

Start the dev server

npm run dev
The app is available at http://localhost:5173. Hot module replacement is enabled; the Vite proxy forwards /api/* to http://localhost:80.
The proxy target is http://localhost:80. The backend gateway (or the full Docker Compose stack) must be running before any authenticated page will load correctly.

​
Environment Variables

VariableDescriptionExample
VITE_TENANT_DEFAULTDefault Company ID pre-filled in the login formIH001
VITE_TENANT_IDSComma-separated list of selectable tenant IDsIH001,AG001
Both variables are baked into the JavaScript bundle at build time by Vite. Changing them requires a full rebuild.

​
Explore Further

Routing & i18n

Deep dive into the locale-prefixed route tree, AuthGuard logic, and the i18next language-switching setup.

Features

Detailed documentation for Login & Tenant Resolution, Dashboard, Productivity, Products, Module Renderers, and Session Management.

Build docs developers (and LLMs) love

Get started for freeTalk to us