Skip to content

feat(frontend): Loss Prevention module and store risk scoring (#124, #125)#152

Merged
TFT444 merged 3 commits into
devfrom
feature/lp-frontend
Jun 23, 2026
Merged

feat(frontend): Loss Prevention module and store risk scoring (#124, #125)#152
TFT444 merged 3 commits into
devfrom
feature/lp-frontend

Conversation

@TFT444

@TFT444 TFT444 commented Jun 21, 2026

Copy link
Copy Markdown
Owner

Summary

Merge order: Merge PR #150 (LP demo data) before this PR, otherwise LP_INCIDENTS and LP_STORE_RISK imports will be missing.

Features

KPI section

  • Open LP incidents count (with critical sub-count)
  • Total estimated financial exposure across open incidents
  • High-risk stores count (risk score >= 80)
  • Portfolio average risk score

LP Incident feed

  • Filter by rule: All / LP-001 / LP-002 / LP-003 / LP-004
  • Filter by severity: All / Critical / High
  • Each incident card shows: severity badge, rule ID, store, operator, detection signal, detected time, and estimated loss
  • Click any incident → full detail panel (slide-in overlay):
    • Meta grid: signal, MTTD, store, operator, terminal, risk score, estimated loss, detected at
    • Description
    • Event timeline with visual markers
    • Automated response actions
    • Recommendations

Store Risk Leaderboard (issue #125)

  • Ranked by risk score (desc)
  • Animated risk bar with colour coding (red >= 80, orange >= 60, green < 60)
  • Trend indicator (up/stable/down) per store
  • Open incident count badge
  • Highest detection signal name

How to test

  1. Merge PR feat(data): LP_INCIDENTS and LP_STORE_RISK demo data (#126) #150 first (LP demo data)
  2. cd frontend && npm run dev
  3. Log in to the demo portal
  4. Click Loss Prevention on the portal grid — should now be active (orange, not greyed out)
  5. Verify 4 KPI cards populate with data
  6. Test filters (rule ID and severity)
  7. Click an incident card — detail panel should slide in from the right
  8. Verify all 10 stores appear in the risk leaderboard

Closes #124
Closes #125


Adds LossPrevention.jsx — a full LP incident dashboard with:
- KPI stat cards (open incidents, total exposure, high-risk stores,
  portfolio avg risk)
- Filterable LP incident feed (by rule ID and severity) with
  clickable slide-in detail panel showing timeline, auto-defence,
  and recommendations
- Store Risk Leaderboard with animated risk bars, trend indicators,
  and highest detection signal per store (covers issue #125)

Wires the module into App.jsx (route 'lp') and activates Loss
Prevention in Portal.jsx module grid. Depends on LP_INCIDENTS and
LP_STORE_RISK exports from data.js (PR #150).

Closes #124
Closes #125
@vercel

vercel Bot commented Jun 21, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
retail-shield Ready Ready Preview, Comment Jun 23, 2026 6:35pm

…x Vercel build

Vercel builds this branch in isolation — importing LP_INCIDENTS and
LP_STORE_RISK from LossPrevention.jsx failed at bundle time because
those exports were only present on the feature/lp-demo-data branch
(PR #150), not here. Adding them directly to data.js on this branch
so the preview deployment can build successfully.

@TFT444 TFT444 left a comment

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ready to merge

@TFT444 TFT444 merged commit 5b457d0 into dev Jun 23, 2026
9 checks passed
@TFT444 TFT444 deleted the feature/lp-frontend branch June 23, 2026 18:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant