PeopleDesk - React Native Application

PeopleDesk is an enterprise-grade mobile application bootstrapped using the React Native CLI with TypeScript, MobX-State-Tree (MST), and React Native Paper.

---

1. Project Directory Structure

All application source code lives inside the src/ folder, organized by architectural layers:

• src/assets/: Static media assets, images, and custom fonts.
• src/auth/: Authentication workflows (Login, Loader, Registration, Pin Verification, Password Recovery).
• src/common/:
  • components/: Reusable, core UI components (Input, Dropdowns, DatePickers, Buttons, Layout Wrappers).
  • api/: API-related configurations (e.g. bypass encryption rules).
  • constant/: Styling tokens (Themes.ts), images mapping, and constants.
• src/hooks/: Custom React hooks (e.g. useIsDarkTheme.ts, useSBUSetup.ts).
• src/interfaces/ & src/types/: Strict TypeScript declarations grouped by feature domain.
• src/modules/: Feature-specific sub-folders containing views and screens:
  • arl-core-modules/: Core enterprise/ERP features.
  • SaaS-modules/: SaaS/subscription-related features.
  • customer-registraion/ & emp-register/: Setup and onboarding modules.
  • supplier-core-modules/: Supplier interaction portal.
• src/navigations/: Navigation configuration:
  • RootStack.tsx: Core navigator.
  • RootStackScreensParams.ts: Type declarations for routes and parameters.
  • *Collections.tsx: Lists of screen configurations split by module.
• src/services/: Network service layer executing Axios endpoints.
• src/stores/: MobX-State-Tree models (userInfo, permissionInfo, rootStore, etc.).
• src/themes/: Visual themes (DefaultTheme / DarkTheme) wrapping React Navigation and Paper schemas.

---

2. Coding Guidelines & Usage

Reusable UI Components

Always reuse the custom components defined in src/common/components/ to maintain design consistency and avoid code bloat:

• Layout Wrapper: Use ContainerNew from [Container.tsx](file:///home/arpan/Desktop/people-desk-app/src/common/components/Container.tsx) for scrollable/non-scrollable screens. It handles SafeArea, pull-to-refresh, keyboard offsets, and bottom button bars.
• Inputs: Use CustomInput for standard inputs, and CustomDropDown for select fields.
• Pickers: Use CustomDatePicker and CustomTimePicker.
• Grid layout: Combine Row and Column wrappers.

State Management (MobX-State-Tree)

• Location: All stores must go under src/stores/.
• Registration: Register any new store under RootStore in [rootStore.ts](file:///home/arpan/Desktop/people-desk-app/src/stores/rootStore.ts).
• State mutations: Never mutate the store state directly from components. All state modifications must happen inside .actions(self => ({ ... })) blocks within the store model.