Problem list

Installation

In a project set up as in Installation, run:

bunx shadcn@4.22.1 add https://organui.com/r/problem-list.json

Or by name: bunx shadcn@4.22.1 add @organui/problem-list.

The source installs into your UI components directory, along with shadcn's table if you do not have it yet. It holds no state, so it renders in server and client components alike.

Usage

import { ProblemList, type Problem } from "@/components/ui/problem-list"

const problems: Problem[] = [
  {
    id: "diabetes",
    name: "Type 2 diabetes mellitus",
    code: { system: "SNOMED CT", value: "44054006" },
    significance: "major",
    onset: "2012-03-06",
  },
  {
    id: "pneumonia",
    name: "Community acquired pneumonia",
    status: "resolved",
    onset: "2024-01-08",
    resolved: "2024-02-01",
  },
]

export function Problems() {
  return <ProblemList problems={problems} caption="Problems" />
}

Active and past

Problems group under Active and Past, each group a labelled set of rows, with its count. A resolved or inactive problem goes under Past, muted. Within each group, major problems lead and are bold, as general practice records mark the conditions that shape care; groupProblems gives the same order for a view of your own.

A code shows under the name with its system, such as SNOMED CT 44054006, so the term can be traced to the record. Set showCodes={false} for a summary.

Dates

An active problem shows when it began, and a past one when it began and ended. Full ISO 8601 dates show as UTC dates in US English; pass formatDate for your own. Records often hold less than a date, such as a year or "Childhood", so any other text reads as written rather than as a guessed day.

A display component: it does not choose, code or reconcile problems. The examples are fictional.

Examples

import { ProblemList } from "@/components/ui/problem-list"
import { problemExampleData } from "@/lib/examples"

import { ProblemList } from "@/components/ui/problem-list"

export function Example() {