Claim Status Tracker

Tracks the progress of an insurance claim through its workflow stages.

Preview · Claim Status Tracker

Code

HTML · @primus/ui-core

<div class="card" style="max-width:360px;padding:1.25rem">
  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem">
    <h3 style="margin:0;font-size:0.9rem">Claim CLM-1024</h3>
    <span class="badge warning">In Review</span>
  </div>
  <div class="vstack" style="gap:0.5rem">
    <div class="hstack"><span style="color:var(--success);font-weight:600;width:20px">✓</span><span style="font-size:0.875rem">Submitted</span><span style="font-size:0.75rem;color:var(--muted-foreground);margin-inline-start:auto">Feb 28</span></div>
    <div class="hstack"><span style="color:var(--success);font-weight:600;width:20px">✓</span><span style="font-size:0.875rem">Documentation received</span><span style="font-size:0.75rem;color:var(--muted-foreground);margin-inline-start:auto">Mar 1</span></div>
    <div class="hstack"><span style="color:var(--warning);font-weight:600;width:20px">●</span><span style="font-size:0.875rem;font-weight:500">Under review</span><span style="font-size:0.75rem;color:var(--muted-foreground);margin-inline-start:auto">In progress</span></div>
    <div class="hstack"><span style="color:var(--muted-foreground);width:20px">○</span><span style="font-size:0.875rem;color:var(--muted-foreground)">Decision</span></div>
  </div>
</div>

React

import { ClaimStatusTracker } from 'primus-react-ui';

<ClaimStatusTracker claimId="CLM-1024" steps={[
  { id: 'submitted', label: 'Submitted',    status: 'completed' },
  { id: 'docs',      label: 'Docs',         status: 'completed' },
  { id: 'review',    label: 'Under review', status: 'current' },
  { id: 'decision',  label: 'Decision',     status: 'upcoming' },
]} />

Angular

<primus-claim-status-tracker claimId="CLM-1024"
  status="In Review" [steps]="claimSteps">
</primus-claim-status-tracker>

Props

Prop	Type	Default	Description
claimId	string	—	Claim identifier
steps	Step[]	required	{id,label,status}[]

TypeScript interfaces

type ClaimStepStatus = 'completed' | 'current' | 'upcoming' | 'failed';

interface ClaimStep {
  id:      string;
  label:   string;
  status:  ClaimStepStatus;
  date?:   string;
  note?:   string;
}

const steps: ClaimStep[] = [
  { id: 'submitted', label: 'Submitted',        status: 'completed', date: 'Feb 28' },
  { id: 'docs',      label: 'Documents',         status: 'completed', date: 'Mar 1' },
  { id: 'review',    label: 'Under review',      status: 'current' },
  { id: 'decision',  label: 'Decision',          status: 'upcoming' },
];

Version history

See the Changelog for version history and breaking changes.