RPTPL Prism - Documentation

Overview

RPTPL Prism is a Vue 3 + TypeScript web application for personalization studio operations. It communicates with the RPTPL backend API via GraphQL and is deployed as a standalone SPA.

Technology Stack

Frontend

Vue 3 (Composition API + script setup)
TypeScript
Vite 8 (build tool)
Vue Router 4
Pinia (state management)
Axios (HTTP client)

Quality

ESLint 10 (flat config)
Prettier (formatting)
vue-tsc (type checking)
Vitest (unit tests)
@vitest/coverage-v8 (coverage)
Husky + lint-staged (git hooks)

Git Hooks

All hooks are managed via Husky. They enforce code quality, type safety, and commit conventions.

Pre-Commit Checks:

lint-staged — Prettier formatting + ESLint fix on staged files
vue-tsc — TypeScript type check
Vitest — Run unit tests
Debug code detection (console.log, debugger, .only())
Sensitive file detection (.env, .pem, .key)
Merge conflict detection (<<<<<<< HEAD)

Pre-Push Checks (full on protected branches):

vue-tsc — Full TypeScript type check
ESLint — Full source scan
Vitest — Tests with code coverage report
Production build verification
Large file detection (>1MB)
Hardcoded secrets detection
Conventional commit message format

Other Hooks:

commit-msg — Enforces conventional commits (feat:, fix:, docs:, etc.)
post-merge — Automatically runs npm install after pull

Project Structure

            Prism/
├── src/
│   ├── __tests__/          Unit tests
│   ├── api/                Axios client + GraphQL helpers
│   ├── components/         Reusable UI components
│   ├── layouts/            Page layout components
│   ├── router/             Vue Router configuration
│   ├── stores/             Pinia stores
│   ├── views/              Page view components
│   ├── App.vue             Root component
│   ├── main.ts             App entry point
│   └── style.css           Global styles
├── .husky/                 Git hooks (Husky)
├── .editorconfig           Editor settings
├── .env.example            Environment template
├── .prettierrc             Prettier configuration
├── eslint.config.js        ESLint flat config
├── index.html              HTML entry point
├── package.json            Dependencies + scripts
├── tsconfig.json           TypeScript config
├── vite.config.ts          Vite configuration
└── vitest.config.ts        Vitest configuration
        

Available Scripts

Command	Description
`npm run dev`	Start development server with HMR
`npm run build`	Type check + production build
`npm run lint`	Run ESLint on source files
`npm run format`	Format code with Prettier
`npm run typecheck`	Run vue-tsc type checking
`npm test`	Run Vitest unit tests
`npm run test:coverage`	Run tests with coverage report

API Integration

Prism communicates with the RPTPL backend via GraphQL. The API client is configured in src/api/client.ts.

GraphQL Request Helper

            import { graphqlRequest } from '../api/client'

const query = `
  query GetData($id: ID!) {
    item(id: $id) {
      id
      name
    }
  }
`

const result = await graphqlRequest(query, { id: '123' })
        

Auth Interceptor

The Axios client automatically attaches the auth token from localStorage and redirects to login on 401 responses.

Environment Variables

Copy .env.example to .env and configure:

            VITE_API_SERVER_URL=https://server.roadpilot.co.in
VITE_API_BASE_URL=https://server.roadpilot.co.in/public/graphql
VITE_APP_NAME=RPTPL Prism
VITE_APP_ENV=development
        

Access Control

Prism verifies access on initial load by calling the RPTPL backend API. The SPA sends a POST /api/prism/verify-access request and checks the response before rendering.

How It Works

1

User visits prism.rptpl.com — Vue SPA loads

2

SPA calls POST /api/prism/verify-access (route: routes/web.php)

3

PrismAccessController checks IP against doc_access_controls table (active, non-expired entries)

4

Attempt logged to doc_access_logs with access_method = 'prism'

5

Returns 200 { "access": true } or 403 { "access": false }

6

SPA renders the app or an "Access Denied" page accordingly

API Endpoint

            POST /api/prism/verify-access
Content-Type: application/json

{ "page": "/" }

Response 200:
{ "access": true, "message": "Access granted" }

Response 403:
{ "access": false, "message": "Access denied..." }

Response 429:
{ "access": false, "message": "Too many failed attempts..." }
        

Rate Limiting

After 10 failed attempts within 15 minutes, the IP is temporarily blocked (429 response). Contact the system administrator to whitelist your IP in the doc_access_controls table.

Note: Access is managed in the same doc_access_controls table as the documentation portal. Add an entry with your IP and is_active = 1 to grant access to both docs and Prism. Logs are stored in doc_access_logs with access_method = 'prism'.

Repository

The Prism source code is hosted on GitHub: github.com/Road-Pilot-Technologies-PVT-LTD/Prism