# FISApp UI

Angular 21 SPA — multi-tenant dashboard with a lazy-loaded **PalmVision** sub-app for MPOB-standard palm oil fruit bunch (FFB) ripeness detection.

**Current Angular version:** ^21.1.2  
**Required Node.js:** `^20.19.0 || ^22.12.0 || ^24.0.0`

---

## Setup

### 1. Clone the repository (with submodules)

This project uses Git submodules for shared in-source dependencies (`angularlib`, `dp-ui`, `fis`). Clone recursively to pull them in one step:

```bash
git clone --recurse-submodules https://<your-remote>/fisapp-ui.git
cd fisapp-ui
```

# Clone with submodules
``` for termux
git clone --recursive <your-repo-url>
```

If you already cloned without `--recurse-submodules`, initialise and fetch the submodules manually:

```bash
git submodule update --init --recursive
```

To pull the latest commits for all submodules after an upstream update:

```bash
git submodule update --remote --recursive
```

### 2. Install dependencies

```bash
npm install
```

> Run `npm run clean` whenever a new library is added or if you hit Angular cache issues.

### 3. Start the dev server

```bash
npm start
# → http://localhost:4200
```

The frontend connects to the NestJS backend at `https://localhost:3000`. Start the backend first:

```bash
cd ../server-desktop && npm install && npm run start:dev
```

---

## Submodules

| Alias | Path | Branch |
|---|---|---|
| `angularlib/*` | `src/dependencies/angularlib` | `swopt-eLeave` |
| `dp-ui/*` | `src/dependencies/dp-ui` | `master` |
| `fis/*` | `src/dependencies/fis` | `swopt-eLeave` |

`fis-commons` is CDN-hosted and requires no local checkout.

---

## Common Commands

```bash
npm start                   # Dev server at 0.0.0.0:4200
npm run build               # Production build → dist/fisapp-ui
npm run build:dev           # Dev build → dist/dev
npm run build:prod          # Prod build → dist/rc
npm run build:leave:prod    # Leave-module variant
npm run build:quot:prod     # Quotation variant
npm run build:maf:quot:prod # MAF quotation variant
npm run test                # Karma + Jasmine unit tests
npm run clean               # Clear Angular + npm caches
```

---

## Troubleshooting

### `[ERROR] TS-993004: Unable to import class CommonModule`

A stale Angular build cache inside the `angularlib` submodule. Run:

```bash
npm run clean
```

Or delete the conflicting folder directly:

```powershell
# Windows PowerShell
rm -r -force src/dependencies/angularlib/node_modules/@angular
```

```bash
# Linux / macOS
rm -rf src/dependencies/angularlib/node_modules/@angular
```

---

## PalmVision Sub-App

Lazy-loaded at `/src.palm.vision`. Provides three inference engines:

| Engine | Mode key | Description |
|---|---|---|
| Browser ONNX WASM | `local-onnx` | Runs YOLOv8 (`best.onnx`) via `onnxruntime-web` in a Web Worker |
| Browser TFLite WASM | `local-tflite` | Runs `best_float16.tflite` via TFLite Web API in a Web Worker |
| NestJS Remote | `remote` | Offloads inference to the `server-desktop` backend over WebSocket |

Connection config: `src/src.palm.vision/config/config.json`

```json
{ "connection": { "uacp": "https://localhost:3000", "uacp_ws": "wss://localhost:3000/socket.io", "uacpEmulation": "on" } }
```

Detection classes (MPOB standard): `Ripe`, `Unripe`, `Underripe`, `Overripe`, `Abnormal`, `Empty_Bunch`

---

## Code Scaffolding

```bash
ng generate component component-name
ng generate directive|pipe|service|class|guard|interface|enum|module
```

## Further Help

- Angular CLI: `ng help` or the [Angular CLI docs](https://angular.dev/tools/cli)
- Project architecture: see [`CLAUDE.md`](CLAUDE.md)