Checklist

The status progress checklist tracks completion of sequential setup or operational steps. It shows progress as "3/5 selesai" with visual indicators for each step.

Setup Progress3/5 selesai

1. Konfigurasi tokoSelesai

2. Tambah kasirSelesai

3. Set metode pembayaranSelesai

4. Upload produkMulai →

5. Test transaksi

Anatomy

+-------------------------------------------------------+
| Setup Progress                         3/5 selesai     |
+-------------------------------------------------------+
|                                                        |
| [green check] 1. Konfigurasi toko          Selesai     |
| [green check] 2. Tambah kasir              Selesai     |
| [green check] 3. Set metode pembayaran     Selesai     |
| [green ring]  4. Upload produk           [Mulai ->]    |
| [gray circle] 5. Test transaksi                        |
|                                                        |
+-------------------------------------------------------+

Visual States

State	Icon	Text Style	Right Element
Complete	Green filled circle + white check (20px)	text-2, strikethrough optional	"Selesai" in text-3
Current	Green ring (unfilled, 2px stroke)	text-1, font-semibold	Green "Mulai" button or action link
Pending	Gray circle (filled #D4D0C8)	text-3	---

Progress Header

• Title: "Setup Progress" or context-specific (16px, font-semibold, text-1)
• Counter: "3/5 selesai" (14px, font-mono, text-2)
• Optional progress bar below: 4px height, green fill proportional to completion

React Component

interface ChecklistItem {
  id: string
  label: string
  status: 'complete' | 'current' | 'pending'
  action?: { label: string; onClick: () => void }
}

interface ChecklistProps {
  title: string
  items: ChecklistItem[]
}

export function Checklist({ title, items }: ChecklistProps) {
  const completed = items.filter(i => i.status === 'complete').length

  return (
    <div className="bg-card border border-border rounded-xl p-5">
      {/* Header */}
      <div className="flex items-center justify-between mb-4">
        <h3 className="font-semibold text-1">{title}</h3>
        <span className="font-mono text-sm text-2">
          {completed}/{items.length} selesai
        </span>
      </div>

      {/* Progress bar */}
      <div className="h-1 bg-inset rounded-full mb-5 overflow-hidden">
        <div
          className="h-full bg-brand rounded-full transition-all duration-500"
          style={{ width: `${(completed / items.length) * 100}%` }}
        />
      </div>

      {/* Items */}
      <div className="space-y-3">
        {items.map((item, i) => (
          <div key={item.id} className="flex items-center gap-3">
            {/* Icon */}
            {item.status === 'complete' && (
              <div className="w-5 h-5 rounded-full bg-brand flex items-center justify-center shrink-0">
                <Check className="w-3 h-3 text-white" />
              </div>
            )}
            {item.status === 'current' && (
              <div className="w-5 h-5 rounded-full border-2 border-brand shrink-0" />
            )}
            {item.status === 'pending' && (
              <div className="w-5 h-5 rounded-full bg-border-strong shrink-0" />
            )}

            {/* Label */}
            <span className={cn(
              'flex-1 text-sm',
              item.status === 'complete' && 'text-2',
              item.status === 'current' && 'text-1 font-semibold',
              item.status === 'pending' && 'text-3',
            )}>
              {i + 1}. {item.label}
            </span>

            {/* Right element */}
            {item.status === 'complete' && (
              <span className="text-xs text-3">Selesai</span>
            )}
            {item.status === 'current' && item.action && (
              <button
                onClick={item.action.onClick}
                className="text-xs font-semibold text-brand hover:underline"
              >
                {item.action.label} &rarr;
              </button>
            )}
          </div>
        ))}
      </div>
    </div>
  )
}

Usage

App	Context
ho-finance	Initial store onboarding wizard
store-admin	Daily settlement checklist
stock-app-web	Opname completion steps
Setup wizard	First-time retailer setup

Completion

When all items are complete, replace the progress bar with a success banner: green background, "Semua langkah selesai!" message.

Don't

• Don't use checklists for more than 8 items --- break into phases instead
• Don't allow skipping steps in sequential checklists unless explicitly designed for non-linear flows
• Don't auto-collapse completed items --- keep them visible for reference