Assembling...
npx arkitekton add HC-116Real-time claims status tracking with X12 276/277 integration, denial management, appeal workflow, and EOB generation.
| Control | HIPAA | SOC2 | GDPR | FedRAMP | HITRUST | CMS-EDE |
|---|---|---|---|---|---|---|
| Audit Logging |
Pre-built solutions that include this construct. Deploy a complete application to Studio.
Patient Portal
HIPAA-compliant patient-facing portal with FHIR R4 data access, clinical document viewing, telehealth integration, appointment scheduling, and secure messaging. Connects to any EHR via standardized APIs.
Claims Processing Hub
End-to-end claims adjudication and processing hub with X12 EDI parsing, eligibility verification, medical coding (ICD-10/CPT), fraud detection, and claims status tracking. Designed for payers and TPAs.
Revenue Cycle Management
Healthcare revenue cycle platform with patient registration, eligibility verification, charge capture, automated coding (ICD-10/CPT), claims submission, denial management, and accounts receivable analytics.
These constructs have compatible ports for seamless integration.
Production-ready out of the box. We deployed to 12 microservices without a single compatibility issue. Highly recommended.
The variant system is a game-changer. Being able to swap between compact and full versions without code changes is brilliant.
Meets all our compliance requirements. Passed our SOC 2 audit without any flags related to this construct.
Clean architecture and zero unnecessary dependencies. This is how every construct should be built.
Dependable and performant. Our p99 latency dropped by 15ms after switching to this from our custom implementation.
ark add HC-116interface ClaimsTableProps { accentColor?: string; }
const CLAIMS = [
{ id: "CLM-2024-0891", date: "2024-03-12", amount: "$1,250.00", status: "Approved", payer: "Blue Cross" },
{ id: "CLM-2024-0890", date: "2024-03-11", amount: "$890.00", status: "Pending", payer: "Aetna" },
{ id: "CLM-2024-0889", date: "2024-03-10", amount: "$2,100.00", status: "Approved", payer: "United" },
{ id: "CLM-2024-0888", date: "2024-03-09", amount: "$450.00", status: "Denied", payer: "Cigna" },
{ id: "CLM-2024-0887", date: "2024-03-08", amount: "$1,800.00", status: "Pending", payer: "Blue Cross" },
{ id: "CLM-2024-0886", date: "2024-03-07", amount: "$675.00", status: "Approved", payer: "Aetna" },
];
const STATUS_COLORS: Record<string,string> = { Approved: "#10B981", Pending: "#F59E0B", Denied: "#EF4444" };
export function ClaimsTable({ accentColor = "#10B981" }: ClaimsTableProps) {
const [filter, setFilter] = useState("All");
const filtered = filter === "All" ? CLAIMS : CLAIMS.filter(c => c.status === filter);
return (
<div className="p-4 space-y-3">
<div className="flex items-center gap-2">
{["All", "Pending", "Approved", "Denied"].map(f => (
<button key={f} onClick={() => setFilter(f)} className={`px-3 py-1 rounded-full text-xs font-medium ${filter === f ? "text-white" : "text-gray-600 bg-gray-100"}`} style={filter === f ? { backgroundColor: accentColor } : undefined}>{f}</button>
))}
</div>
<div className="border border-gray-200 rounded-lg overflow-hidden">
<table className="w-full text-xs">
<thead className="bg-gray-50"><tr>{["Claim ID", "Date", "Amount", "Payer", "Status"].map(h => <th key={h} className="px-3 py-2 text-left font-semibold text-gray-600">{h}</th>)}</tr></thead>
<tbody>
{filtered.map(c => (
<tr key={c.id} className="border-t border-gray-100 hover:bg-gray-50">
<td className="px-3 py-2 font-mono font-medium text-gray-900">{c.id}</td>
<td className="px-3 py-2 text-gray-500">{c.date}</td>
<td className="px-3 py-2 font-medium text-gray-900">{c.amount}</td>
<td className="px-3 py-2 text-gray-500">{c.payer}</td>
<td className="px-3 py-2"><span className="px-2 py-0.5 rounded-full text-[10px] font-medium text-white" style={{ backgroundColor: STATUS_COLORS[c.status] }}>{c.status}</span></td>
</tr>
))}
</tbody>
</table>
</div>
</div>
);
}Showing: Claims Table (standard)
No code variants available yet
Variants for Claims Status Tracker are coming soon