Feature: Vertex Platform Architecture Abstraction & Template Extraction

src/vertex-template/.dockerignore

@@ -0,0 +1,6 @@
+.git
+.gitignore
+node_modules
+npm-debug.log*
+.vscode
+coverage

src/vertex-template/.env.example

@@ -0,0 +1,21 @@
+NEXTAUTH_SECRET=
+NEXTAUTH_URL=http://localhost:3000
+
+NEXT_PUBLIC_SLACK_BOT_TOKEN=
+NEXT_PUBLIC_SLACK_CHANNEL=notifs-airqo-netmanager-web
+SLACK_WEBHOOK_URL=
+
+NEXT_PUBLIC_API_TOKEN=
+NEXT_PUBLIC_API_BASE_URL=https://api.airqo.net
+NEXT_PUBLIC_API_URL=https://staging-vertex.airqo.net/api/v2/
+NEXT_PUBLIC_ENV=development
+NEXT_PUBLIC_ANALYTICS_URL=https://staging-analytics.airqo.net
+NEXT_PUBLIC_VERTEX_DESKTOP_WINDOWS_DOWNLOAD_URL=
+NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=
+NEXT_PUBLIC_MOCK_PERMISSIONS_ENABLED=false
+ADMIN_SECRET=
+NEXT_PUBLIC_CLOUDINARY_NAME=
+NEXT_PUBLIC_CLOUDINARY_PRESET=
+NEXT_PUBLIC_HCAPTCHA_SITE_KEY=
+CLOUDINARY_API_KEY=
+CLOUDINARY_API_SECRET=

src/vertex-template/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

src/vertex-template/.gitignore

@@ -0,0 +1,125 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Removing the idea
+.idea/
+
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+.env.local
+.env.development
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next/
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Cypress files
+cypress/videos
+cypress/screenshots
+
+# Yarn add output
+.pnp.cjs
+.pnp.loader.mjs
+.yarn/
+.yarnrc.yml
+
+# vscode files
+.vscode/*
+
+.lighthouseci

src/vertex-template/.prettierignore

@@ -0,0 +1,11 @@
+node_modules
+.next
+dist
+build
+*.log
+.DS_Store
+*.lock
+yarn.lock
+package-lock.json
+coverage
+.nyc_output

src/vertex-template/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "useTabs": false,
+  "bracketSpacing": true,
+  "arrowParens": "avoid"
+}

src/vertex-template/Dockerfile

@@ -0,0 +1,41 @@
+# First stage: Build the app
+FROM node:18-alpine AS builder
+
+# Set the working directory
+WORKDIR /app
+
+# Copy package files and install dependencies
+COPY package*.json ./ 
+RUN npm ci
+
+
+# Copy the rest of the application code
+COPY . .
+
+# Build the Next.js app
+RUN npm run build
+
+# Second stage: Production container
+FROM node:18-alpine AS runner
+
+# Set the working directory
+WORKDIR /app
+
+# Copy built files from builder stage
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/package*.json ./
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/start-next.js ./start-next.js
+
+# Add healthcheck
+HEALTHCHECK --interval=30s --timeout=3s \
+    CMD wget --no-verbose --tries=1 --spider http://localhost:3000/ || exit 1
+
+USER node
+
+# Expose the application port
+EXPOSE 3000
+
+# Command to run the application
+CMD ["npm", "run", "start"]

src/vertex-template/README.md

@@ -0,0 +1,92 @@
+# Vertex (Web App).
+
+`vertex` is the AirQo web application for Device and Network management.
+
+## Quick start
+
+1. Install dependencies:
+
+```bash
+cd src/vertex
+npm install
+```
+
+2. Create local environment file:
+
+```bash
+copy .env.example .env
+```
+
+3. Run development server:
+
+```bash
+npm run dev
+```
+
+4. Open `http://localhost:3000`.
+
+## Scripts
+
+- `npm run dev`: Start local development server.
+- `npm run dev:inspect`: Start dev server with Node inspector enabled.
+- `npm run build`: Build production bundle.
+- `npm run start`: Start production server from built output.
+- `npm run lint`: Run lint checks.
+- `npm run format`: Format code with Prettier.
+- `npm run format:check`: Check formatting.
+- `npm run check-size`: Build and run bundle size checks.
+
+## Environment variables
+
+Use `src/vertex/.env.example` as the base. Common variables include:
+
+- `NEXT_PUBLIC_API_URL`: Backend API base URL.
+- `NEXT_PUBLIC_API_BASE_URL`: Public API origin used for measurement URL examples.
+- `NEXT_PUBLIC_ANALYTICS_URL`: Analytics platform URL.
+- `NEXT_PUBLIC_VERTEX_DESKTOP_WINDOWS_DOWNLOAD_URL`: Optional Windows installer URL for Vertex Desktop downloads.
+- `NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN`: Mapbox token for map features.
+- `NEXT_PUBLIC_ENV`: App environment label (for example `development`).
+- `NEXT_PUBLIC_MOCK_PERMISSIONS_ENABLED`: Enables mock permissions when needed.
+- `ADMIN_SECRET`: Secret used by admin/protected server operations.
+- `NEXT_PUBLIC_CLOUDINARY_NAME`: Cloudinary cloud name.
+- `NEXT_PUBLIC_CLOUDINARY_PRESET`: Cloudinary upload preset.
+- `NEXT_PUBLIC_HCAPTCHA_SITE_KEY`: HCaptcha site key needed for the new login flow.
+- `SLACK_WEBHOOK_URL`: Slack webhook for server-side notifications.
+- `NEXT_PUBLIC_SLACK_BOT_TOKEN`, `NEXT_PUBLIC_SLACK_CHANNEL`: Slack client configuration.
+
+## Vertex configuration
+
+Vertex has a typed app configuration surface in `vertex.config.ts`. This is the file that the future `create-vertex-app` CLI will generate or update for each scaffolded instance.
+
+V1 supports two data adapters:
+
+- `mock`: runs locally without API credentials and is the default for generated templates.
+- `airqo`: uses the existing AirQo API, auth, and proxy behavior.
+
+Generic REST backends are intentionally out of scope for v1.
+
+Use `vertex.config.example.ts` as the template-facing reference. Keep validation and shared types in `core/config/vertex-config.ts` so contributors can add config-driven behavior without inventing new config shapes.
+
+## Authentication and SSO
+
+For normal app-local authentication, set:
+
+```bash
+NEXTAUTH_SECRET=<app-specific-secret>
+NEXTAUTH_URL=http://localhost:3001
+```
+
+Notes:
+
+- `NEXTAUTH_SECRET` should be unique to Vertex.
+- `NEXTAUTH_URL` should match the local or production origin for Vertex.
+
+## Related projects
+
+- `src/vertex-desktop`: Electron wrapper that loads the hosted Vertex web app.
+- Most feature and business logic remains in this web app; desktop-specific behavior stays in `src/vertex-desktop`.
+
+## Deployment notes
+
+- Staging and production deployment automation is configured in `.github/workflows/`.
+- This app is deployed independently from desktop installer releases.

src/vertex-template/app/(authenticated)/admin/cohorts/[id]/devices/[deviceId]/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import DeviceDetailsLayout from "@/components/features/devices/device-details-layout";
+import { RouteGuard } from "@/components/layout/accessConfig/route-guard";
+import { PERMISSIONS } from "@/core/permissions/constants";
+
+export default function AdminCohortDeviceDetailsPage() {
+    const params = useParams();
+    const deviceId = params?.deviceId;
+
+    if (!deviceId || typeof deviceId !== 'string') {
+        return (
+            <div className="flex items-center justify-center min-h-[50vh]">
+                <p className="text-muted-foreground">Invalid device ID</p>
+            </div>
+        );
+    }
+
+    return (
+        <RouteGuard permission={PERMISSIONS.DEVICE.VIEW}>
+            <DeviceDetailsLayout deviceId={deviceId} />
+        </RouteGuard>
+    );
+}