Claim Tracker

Detailed claims tracking with documents, timeline, and status.

Preview · Claim Tracker

Code

HTML · @primus/ui-core

<div class="card" style="max-width:340px;padding:1.25rem">
  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem">
    <h3 style="margin:0;font-size:0.9rem">CLM-2048</h3>
    <span class="badge accent">Submitted</span>
  </div>
  <progress value="25" max="100"></progress>
  <p style="margin:0.5rem 0 0;font-size:0.75rem;color:var(--muted-foreground)">Step 1 of 4 — Awaiting adjuster assignment</p>
</div>

React

import { PrimusClaimTracker } from '@/components/ui/primus-claim-tracker';

<PrimusClaimTracker
  claim={{
    id: 'clm-1',
    claimNumber: 'CLM-2048',
    type: 'Auto Collision',
    status: 'under_review',
    amount: 4500,
    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 },
    ],
  }}
  onContactSupport={() => console.log('Contact support')}
/>

Angular

<primus-claim-tracker claimId="CLM-2048" status="Submitted" [steps]="claimSteps">
</primus-claim-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.