X-POS—Cross-Platform Point-of-Sale App

Role & context

1. 01

   Layered separation of concerns

   atomic-design components, per-domain service modules, and Redux slices — screens never call axios directly

2. 02

   RBAC from a single source of truth

   a 5-role × 14-permission matrix with role normalization, reused by a can() gate across UI and route guards

3. 03

   Resilient auth

   a response interceptor refreshes the JWT with a single-flight flag and a failed-request queue, replaying parked 401s after one refresh

4. 04

   Circular-dependency-safe wiring

   injectStore() plus runtime dynamic import() of thunks inside the interceptor to break the api → store → slices → services → api cycle

5. 05

   Disciplined persistence

   redux-persist whitelist limited to auth tokens + theme, so stale server data and PII are not persisted

6. 06

   API/domain decoupling with strict TypeScript and explicit DTO → domain mappers with defensive type coercion

• Circular import deadlock — the axios layer needs the store for the token, but the store imports slices that import the services that import axios.

  FixLazy injectStore(store) called once at bootstrap, plus runtime dynamic imports of the refreshToken/logoutUser thunks inside the interceptor instead of at module load.

• Parallel requests all 401-ing at once would each trigger a separate token refresh (a refresh stampede).

  FixA single-flight refresh guarded by an isRefreshing flag; other failed requests park in a queue, resolve with the new token, and retry automatically.