Komponen / Tampilan data

StateLabel

Label status dokumen/record. Tone menyatakan makna, bukan dekorasi — satu aturan untuk semua modul.

React · BetaFigma · siapFigma Sumber

Tone & gaya

Subtle (isi pucat) untuk daftar, tabel, dan header dokumen — sama di semua tempat agar status mudah dikenali. Solid hanya untuk penekanan khusus, mis. label di atas latar berwarna.

DraftDiprosesBerjalanButuh tindakanSiap ditagihSelesaiDibatalkan

import { StateLabel } from '@divistant/circca-react';

export default function Example() {
  return (
    <div className="grid gap-3">
      <div className="flex flex-wrap gap-2">
        <StateLabel tone="neutral" dot>Draft</StateLabel>
        <StateLabel tone="info" dot>Diproses</StateLabel>
        <StateLabel tone="accent" dot>Berjalan</StateLabel>
        <StateLabel tone="warning" dot>Butuh tindakan</StateLabel>
        <StateLabel tone="highlight" dot>Siap ditagih</StateLabel>
        <StateLabel tone="success" dot>Selesai</StateLabel>
        <StateLabel tone="danger" dot>Dibatalkan</StateLabel>
      </div>
      <div className="flex flex-wrap gap-2">
        <StateLabel tone="neutral" variant="solid">Draft</StateLabel>
        <StateLabel tone="info" variant="solid">Diproses</StateLabel>
        <StateLabel tone="accent" variant="solid">Berjalan</StateLabel>
        <StateLabel tone="warning" variant="solid">Butuh tindakan</StateLabel>
        <StateLabel tone="highlight" variant="solid">Siap ditagih</StateLabel>
        <StateLabel tone="success" variant="solid">Selesai</StateLabel>
        <StateLabel tone="danger" variant="solid">Dibatalkan</StateLabel>
      </div>
    </div>
  );
}

Pemetaan status BizOps

Nama status mengikuti BizOps (ERPNext); tone mengikuti aturan di bawah.

Opportunity

OpenQuotationRepliedConvertedLostClosed

Sales Order

DraftOn HoldTo Deliver and BillTo BillCompletedCancelled

Task

OpenWorkingPending ReviewOverdueCompleted

import { StateLabel, type StateLabelTone } from '@divistant/circca-react';

// Pemetaan status BizOps (ERPNext) → tone. Satu aturan untuk semua modul.
const STATUS: Record<string, [string, StateLabelTone][]> = {
  Opportunity: [['Open', 'neutral'], ['Quotation', 'info'], ['Replied', 'info'], ['Converted', 'success'], ['Lost', 'danger'], ['Closed', 'neutral']],
  'Sales Order': [['Draft', 'neutral'], ['On Hold', 'warning'], ['To Deliver and Bill', 'info'], ['To Bill', 'highlight'], ['Completed', 'success'], ['Cancelled', 'danger']],
  Task: [['Open', 'neutral'], ['Working', 'accent'], ['Pending Review', 'warning'], ['Overdue', 'danger'], ['Completed', 'success']],
};

export default function Example() {
  return (
    <div className="grid gap-3">
      {Object.entries(STATUS).map(([doctype, list]) => (
        <div key={doctype} className="grid grid-cols-[120px_1fr] items-center gap-3">
          <span className="type-caption-semibold text-muted">{doctype}</span>
          <div className="flex flex-wrap gap-2">
            {list.map(([label, tone]) => (
              <StateLabel key={label} tone={tone} size="sm">{label}</StateLabel>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}