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 { PrimusClaimTracker } from '@/components/ui/primus-claim-tracker';

<PrimusClaimTracker
  claim={{
    id: 'clm-1',
    claimNumber: 'CLM-1024',
    type: 'Home Water Damage',
    status: 'under_review',
    amount: 8200,
    submittedDate: '2026-02-28',
    updatedDate: '2026-03-01',
    steps: [
      { label: 'Submitted',    completed: true, date: 'Feb 28' },
      { label: 'Documents',   completed: true, date: 'Mar 1' },
      { label: 'Under Review', completed: false },
      { label: 'Decision',    completed: false },
    ],
  }}
/>

Angular

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

Props

Prop	Type	Default	Description
claim	Claim	required	Claim data to display
currency	string	'USD'	Currency for amount display
onContactSupport	() => void	—	Contact support callback

TypeScript interfaces

interface Claim {
  id:            string;
  claimNumber:   string;
  type:          string;
  status:        'submitted' | 'under_review' | 'approved' | 'processing' | 'paid' | 'denied';
  amount:        number;
  submittedDate: string;   // ISO 8601
  updatedDate:   string;   // ISO 8601
  steps:         { label: string; completed: boolean; date?: string }[];
}

Version history

See the Changelog for version history and breaking changes.