ProcureLinc-Mobile-App/README.md

# ProcureLinc — Mobile App

ProcureLinc is a React Native mobile application for an **e-procurement platform** that lets registered contractors take part in **e-auctions** and **e-tenders** from their phone. It covers the full journey: contractor onboarding with eKYC, browsing live auctions/tenders, purchasing/EMD payments, document submission, and secure bidding.

- **Platform:** Android & iOS (React Native 0.79, React 19)
- **App ID:** `com.procure`
- **Backend:** REST + WebSocket APIs (base URL configured in [src/Services/ApiCall/ApiUrls.tsx](src/Services/ApiCall/ApiUrls.tsx))

---

## Features

- **Contractor registration** — multi-stage onboarding (Stage 1–3) including partnership details.
- **eKYC verification** — Organization PAN, Aadhaar (OTP), and GST verification flows; KYC web view.
- **Authentication & security** — login, reset password, two-factor auth, **device binding**, **DSC (Digital Signature Certificate) binding**, and request/response encryption.
- **e-Auctions** — live auction listings, forward & reverse auctions, item-wise & auction-wise EMD documents, technical document templates, purchase + transaction status.
- **e-Tenders** — live tender listings, tender details, proceed-to-bid, and **Envelope A / B / C** plus **QCBS / LCS** submission with file uploads.
- **Real-time bidding** — STOMP over SockJS WebSocket updates.
- **Dashboard & profile** — auction/tender dashboard counts, contractor profile view/edit, purchased tenders & auctions.
- **Smooth UX** — native-stack screen transitions, animated custom bottom tab bar, Lottie animations, and theming (light/dark via `useTheme`).

---

## Tech Stack

| Area | Library |
|------|---------|
| Framework | React Native 0.79, React 19 |
| Navigation | `@react-navigation/native`, `native-stack`, `bottom-tabs`, `drawer` |
| State | Redux Toolkit, `react-redux`, `redux-persist` |
| Data fetching | TanStack React Query, Axios |
| Forms & validation | Formik, Yup |
| Real-time | `@stomp/stompjs`, `sockjs-client` |
| Animation / UI | Reanimated, Gesture Handler, Lottie, Lucide icons, SVG, Linear Gradient |
| Security | `crypto-js`, `jsencrypt`, `react-native-device-info` |
| Documents | `exceljs`, `xlsx`, `react-native-blob-util`, `react-native-fs`, document picker |
| Device | Permissions, Geolocation, Haptic Feedback, WebView |

---

## Project Structure

```
src/
├── Axios/          # Axios instance & interceptors
├── Component/      # Shared components
├── components/     # App-level components (e.g. AppStatusBar)
├── Constant/       # Colors, NavigationString, static config
├── Helper/         # Helper utilities
├── Hooks/          # Custom hooks (e.g. useTheme)
├── Images/         # Image assets
├── Navigation/     # MainStack, Bottom tabs, Drawer, NavigationService
├── Permission/     # Runtime permission handling
├── Redux/          # Store, slices, persistence
├── Screens/        # Feature screens (Auction, Tender, Bidding, Login, etc.)
├── Services/       # API calls & endpoint URLs
├── Styles/         # Shared styles
├── Utils/          # Utilities (encryption, formatting, etc.)
├── api/            # API helpers
├── lottie/         # Lottie animation files
├── socket/         # WebSocket (STOMP/SockJS) setup
└── theme/          # Typography & theme tokens
```

Navigation entry points:
- [App.tsx](App.tsx) → [src/Navigation/Routes.jsx](src/Navigation/Routes.jsx) → [src/Navigation/MainStack.jsx](src/Navigation/MainStack.jsx)
- Bottom tabs (Home / Auction / Tender / Profile): [src/Navigation/Bottom.tsx](src/Navigation/Bottom.tsx)

---

## Getting Started

> **Note:** Complete the [React Native environment setup](https://reactnative.dev/docs/set-up-your-environment) first.

### Prerequisites

- Node.js **>= 18**
- JDK 17, Android SDK / Android Studio (for Android)
- Xcode + CocoaPods (for iOS, macOS only)

### 1. Install dependencies

```sh
npm install
```

### 2. Configure the backend URL

Set the active `BASE_URL` in [src/Services/ApiCall/ApiUrls.tsx](src/Services/ApiCall/ApiUrls.tsx). The default points to the demo environment:

```ts
const BASE_URL = `https://eproc.godemo.in/`;
```

### 3. Start Metro

```sh
npm start
```

### 4. Run the app

**Android**

```sh
npm run android
```

**iOS** (first run / after native dependency changes, install pods):

```sh
bundle install            # first time only
bundle exec pod install
npm run ios
```

---

## Available Scripts

| Script | Description |
|--------|-------------|
| `npm start` | Start the Metro dev server |
| `npm run android` | Build & run on Android |
| `npm run ios` | Build & run on iOS |
| `npm run lint` | Run ESLint |
| `npm test` | Run Jest tests |
| `npm run create:users` | Run the user-seeding script (`scripts/create-users.js`) |

> If a transition or native change doesn't appear, restart Metro with a clean cache: `npx react-native start --reset-cache`.

---

## Repository

This project is hosted on the internal Git server:

```
http://git.lincpay/EProcurement/ProcureLinc-Mobile-App.git
```

---

## Troubleshooting

- **Metro stale cache** — `npx react-native start --reset-cache`.
- **Android build issues** — `cd android && ./gradlew clean`, then rebuild.
- **iOS pods out of date** — re-run `bundle exec pod install`.
- General help: [React Native Troubleshooting](https://reactnative.dev/docs/troubleshooting).