Capital Markets SOR Activity Flow Dashboard

A modern UI application for tracking Capital Markets Systems of Record (SORs) and their activities with SLA monitoring. Built with React, Vite, React Flow, and ShadCN UI.

Features

• 📋 Sidebar Navigation: List of all Capital Markets SORs on the left
• 📊 Interactive Flow View: Visual activity flow using React Flow when a SOR is selected
• 🎨 Color-coded Activity Statuses:
  • Not Started: Gray
  • In Progress: Blue
  • Done (SLA Met): Green
  • Done (SLA Missed): Red
• ✅ SLA Tracking: Automatic SLA breach detection based on completion time
• 🟢 SOR Completion Status: SORs are highlighted green when all activities are complete
• 📱 Responsive Design: Modern UI with ShadCN components

Layout

• Left Sidebar: Lists all Capital Markets SORs with:

  • SOR name and status
  • Activity progress indicator (progress bars)
  • Completion badge for completed SORs
  • Click to select and view details

• Main Content Area: Shows selected SOR's:

  • Activity flow diagram (React Flow)
  • Detailed activity cards with SLA information
  • Status legend

Activity Flow

Each SOR has 4 sequential activities:

1. Trade Data Collection
2. Position Reconciliation
3. PNL Calculation
4. PNL Reporting

Activities are dependent on the previous one (sequential workflow).

Activity States

• Not Started: Gray color
• In Progress: Blue color
• Done (SLA Met): Green color
• Done (SLA Missed): Red color

SOR Status

• SORs are highlighted green in the sidebar when all activities are completed
• Selected SOR is highlighted blue

Getting Started

1. Install dependencies:

npm install

2. Run the development server:

npm run dev

3. Open http://localhost:5173 in your browser (Vite uses port 5173 by default)

Project Structure

• src/App.tsx - Main dashboard component with sidebar and detail view
• src/main.tsx - Application entry point
• src/components/SORSidebar.tsx - Left sidebar component listing all SORs
• src/components/SORDetailView.tsx - Main content area showing selected SOR details
• src/components/ActivityFlow.tsx - React Flow visualization component
• src/types/index.ts - TypeScript type definitions
• src/lib/activity-utils.ts - Utility functions for activity status and SLA calculations
• src/data/mock-data.ts - Sample Capital Markets SOR data (5 SORs)

Tech Stack

• React 18 - UI library
• Vite - Build tool and dev server
• React Flow - Flow diagram visualization
• ShadCN UI - UI component library
• Tailwind CSS - Styling
• TypeScript - Type safety