Sales Team Monitor Portal — Case Study

Challenge

Sales managers at Shape Solutions needed live visibility into their team's attendance, work status, timelogs, and leave — without logging into the full OneOps admin. A lightweight, read-only portal on a dedicated subdomain was required with API-key auth and real-time data refresh.

Solution Architecture

API-key authentication — session-scoped key stored in sessionStorage, verified via /health endpoint
Live dashboard — team size, clocked-in count, on-leave count with 60-second auto-refresh (configurable)
Live team table — per-employee status: clocked in, late, on leave, active timer, offline; work-from location and clock-in time
Employee detail views — tabbed history for attendance analytics, timelog summaries, and leave breakdowns
Custom analytics UI — donut punctuality chart, bar chart of hours worked, KPI cards — built with hand-rolled SVG components (no chart library)
Production deployment — Vite static build with Apache .htaccess for SPA routing, gzip, cache, and security headers

flowchart TB
  Manager[Sales Manager] --> SPA[React SPA]
  SPA --> Auth[API Key Auth]
  SPA --> Dashboard[Live Dashboard]
  SPA --> Employees[Team Directory]
  SPA --> Detail[Employee Detail]
  Auth --> API[OneOps Sales Monitor API]
  Dashboard --> API
  Employees --> API
  Detail --> API

Results

Delivered v1.0 read-only monitoring portal integrated with 9 OneOps /api/sales-monitor/v1 endpoints
Built custom design system with brand blue + accent cyan, glass-card login, skeleton loaders, and responsive layout
Enabled managers to track punctuality rates, late arrivals, and leave status without full platform access
Shipped production-ready static deployment config for subdomain hosting

Timeline

| Phase | Focus | |-------|-------| | Foundation | API client layer, typed response envelopes, auth flow | | Dashboard | Live overview, team status table, polling with React Query | | Analytics | Attendance KPIs, custom SVG charts, employee history tabs | | Launch | Apache SPA config, error/empty states, team search |

Solution Architecture

API-key authentication — session-scoped key stored in sessionStorage, verified via /health endpoint

Live dashboard — team size, clocked-in count, on-leave count with 60-second auto-refresh (configurable)

Live team table — per-employee status: clocked in, late, on leave, active timer, offline; work-from location and clock-in time

Employee detail views — tabbed history for attendance analytics, timelog summaries, and leave breakdowns

Custom analytics UI — donut punctuality chart, bar chart of hours worked, KPI cards — built with hand-rolled SVG components (no chart library)

Production deployment — Vite static build with Apache .htaccess for SPA routing, gzip, cache, and security headers

flowchart TB Manager[Sales Manager] --> SPA[React SPA] SPA --> Auth[API Key Auth] SPA --> Dashboard[Live Dashboard] SPA --> Employees[Team Directory] SPA --> Detail[Employee Detail] Auth --> API[OneOps Sales Monitor API] Dashboard --> API Employees --> API Detail --> API

Results

Delivered v1.0 read-only monitoring portal integrated with 9 OneOps /api/sales-monitor/v1 endpoints

Built custom design system with brand blue + accent cyan, glass-card login, skeleton loaders, and responsive layout

Enabled managers to track punctuality rates, late arrivals, and leave status without full platform access

Shipped production-ready static deployment config for subdomain hosting

Timeline