Socure Risk Analysis Dashboard

A standalone, framework-agnostic React component for displaying Socure risk analysis data. Built as an npm package that works with any React application - no Retool or external dependencies required.

Features

• 🎨 Fully themeable with custom colors and styles
• 📊 Interactive accordion sections for detailed risk analysis
• 🔍 Supports all Socure risk data types (fraud, synthetic, KYC, etc.)
• 🎯 Customizable code descriptions
• ⚡ No external dependencies on Retool or other platforms
• 🪝 Optional callback for verification actions

Installation

npm install

Usage

Import the component and pass your Socure risk data:

import { RiskAnalysisDashboard } from './src/index';

function App() {
  const riskData = {
    referenceId: "REF-123456789",
    decision: {
      value: "accept",
      modelName: "DecisionModel",
      modelVersion: "2.1",
      details: {
        fraud: { decision: "accept" },
        synthetic: { decision: "accept" },
        emailrisk: { decision: "accept" },
        phonerisk: { decision: "accept" },
        addressrisk: { decision: "accept" }
      }
    },
    fraud: {
      reasonCodes: ["R223", "I206"],
      scores: [{ name: "Sigma", version: "4.0", score: 0.15 }]
    },
    // ... more risk data
  };

  return (
    <RiskAnalysisDashboard
      riskData={riskData}
      codeDescriptions={{
        'R223': 'National ID mismatch',
        'I206': 'Regular inquiry pattern'
      }}
      theme={{
        colorRiskLow: '#059669',
        colorRiskMedium: '#d97706',
        colorRiskHigh: '#dc2626'
      }}
      onStartVerification={() => console.log('Starting verification')}
    />
  );
}

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | riskData | RiskData | Yes | Socure risk analysis data object | | codeDescriptions | Record<string, string> | No | Custom descriptions for risk/info codes | | theme | Partial<ThemeTokens> | No | Custom theme colors and styles | | onStartVerification | () => void | No | Callback when verification is triggered |

Risk Data Structure

The riskData prop expects an object with the following structure:

interface RiskData {
  referenceId: string;
  decision: {
    value: string;
    modelName: string;
    modelVersion: string;
    details: Record<string, any>;
  };
  fraud: {
    reasonCodes: string[];
    scores: Array<{ name: string; version: string; score: number }>;
  };
  synthetic: {
    reasonCodes: string[];
    scores: Array<{ name: string; version: string; score: number }>;
  };
  emailRisk: { reasonCodes: string[]; score: number };
  phoneRisk: { reasonCodes: string[]; score: number };
  addressRisk: { reasonCodes: string[]; score: number };
  nameEmailCorrelation: { reasonCodes: string[]; score: number };
  namePhoneCorrelation: { reasonCodes: string[]; score: number };
  nameAddressCorrelation: { reasonCodes: string[]; score: number };
  kyc: {
    reasonCodes: string[];
    fieldValidations: Record<string, number>;
  };
}

Example

See example-usage.tsx for a complete working example.

Development

npm run dev

Building

npm run build

📚 Documentation

• QUICKSTART.md - Fast guide to publish and use the package
• PUBLISHING.md - Detailed publishing and integration instructions
• PACKAGE_SUMMARY.md - Complete overview of what was built
• example-usage.tsx - Full working example

🎯 Quick Example

import { RiskAnalysisDashboard } from 'socure-risk-dashboard';
import 'socure-risk-dashboard/dist/styles.css';

function App() {
  const socureResponse = {
    referenceId: "REF-123",
    decision: { value: "accept", /* ... */ },
    fraud: { scores: [{ score: 0.15 }], /* ... */ },
    // ... rest of your Socure data
  };

  return <RiskAnalysisDashboard riskData={socureResponse} />;
}

🔧 Technology Stack

• React 18+ - UI framework
• TypeScript - Type safety
• Tailwind CSS - Styling
• Lucide React - Icons
• SafeTurf UI Kit - Theme system
• tsup - Build tool

📦 Distribution

This package includes:

• CommonJS build (index.js)
• ES Module build (index.mjs)
• TypeScript definitions (index.d.ts)
• Compiled CSS (styles.css)
• Source maps for debugging

🤝 Contributing

This is a standalone package. To contribute:

1. Clone the repository
2. Run npm install
3. Make changes in src/
4. Run npm run build to test
5. Submit a pull request

📄 License

MIT