GroupedList

import { useState } from 'react';
import { GroupedList, Select, Switch } from '@divistant/circca-react';

// Pengaturan notifikasi: Switch langsung berlaku (tanpa tombol Simpan). Label baris otomatis terhubung ke kontrolnya.
export default function Example() {
  const [approval, setApproval] = useState(true);
  return (
    <GroupedList className="max-w-[420px]">
      <GroupedList.Section title="Notifikasi email" footer="Dikirim ke andri@divistant.com. Notifikasi di aplikasi tetap muncul.">
        <GroupedList.Row label="PO menunggu persetujuan" control={<Switch size="sm" checked={approval} onCheckedChange={setApproval} />} />
        <GroupedList.Row label="Invoice jatuh tempo" description="3 hari sebelum tanggal jatuh tempo" control={<Switch size="sm" defaultChecked />} />
        <GroupedList.Row label="Komentar dan @mention" control={<Switch size="sm" />} />
      </GroupedList.Section>
      <GroupedList.Section title="Ringkasan">
        <GroupedList.Row
          label="Ringkasan harian"
          control={
            <Select
              size="sm"
              defaultValue="0800"
              options={[
                { value: 'off', label: 'Tidak dikirim' },
                { value: '0800', label: '08.00' },
                { value: '1700', label: '17.00' },
              ]}
            />
          }
        />
      </GroupedList.Section>
    </GroupedList>
  );
}

import type { MouseEvent } from 'react';
import { GroupedList, formatMoney } from '@divistant/circca-react';
import { Bank, Buildings, Percent, UsersThree } from '@phosphor-icons/react';

const stop = (e: MouseEvent) => e.preventDefault();

// Pengaturan perusahaan: baris navigasi (tautan penuh baris + chevron) dengan ikon Tile, dan baris nilai hanya-baca.
// Dengan Next.js: <GroupedList.Row asChild label="…"><Link href="/pengaturan/perusahaan" /></GroupedList.Row>.
export default function Example() {
  return (
    <GroupedList className="max-w-[420px]">
      <GroupedList.Section title="Perusahaan">
        <GroupedList.Row icon={Buildings} label="Profil perusahaan" value="PT Dikstra Solusi" href="#" onClick={stop} />
        <GroupedList.Row icon={Bank} iconTone="success" label="Rekening bank" value="2 rekening" href="#" onClick={stop} />
        <GroupedList.Row icon={Percent} iconTone="warning" label="Pajak" value="PPN 11%" href="#" onClick={stop} />
        <GroupedList.Row icon={UsersThree} iconTone="neutral" label="Pengguna dan peran" value="14" numeric href="#" onClick={stop} />
      </GroupedList.Section>
      <GroupedList.Section title="Batas persetujuan" footer="Diatur Admin Keuangan. PO di atas batas butuh persetujuan Direksi.">
        <GroupedList.Row label="Manajer" value={formatMoney(100_000_000)} numeric />
        <GroupedList.Row label="Direksi" value="Tanpa batas" />
      </GroupedList.Section>
    </GroupedList>
  );
}

import { GroupedList, Input, Select, Switch } from '@divistant/circca-react';

// Form ringkas di inspector/ponsel: label kiri, kontrol Small di kanan (Input lebar 160 seperti Figma).
export default function Example() {
  return (
    <GroupedList className="max-w-[420px]">
      <GroupedList.Section title="Termin penagihan" footer="Persentase termin harus berjumlah 100%.">
        <GroupedList.Row label="Termin 1 (DP)" control={<Input size="sm" defaultValue="60" suffix="%" className="w-40" inputClassName="text-right tabular-nums" />} />
        <GroupedList.Row label="Termin 2 (BAST)" control={<Input size="sm" defaultValue="40" suffix="%" className="w-40" inputClassName="text-right tabular-nums" />} />
        <GroupedList.Row
          label="Jatuh tempo"
          control={
            <Select
              size="sm"
              defaultValue="30"
              className="w-40"
              options={[
                { value: '14', label: '14 hari' },
                { value: '30', label: '30 hari' },
                { value: '45', label: '45 hari' },
              ]}
            />
          }
        />
        <GroupedList.Row label="Kirim invoice otomatis" control={<Switch size="sm" defaultChecked />} />
      </GroupedList.Section>
    </GroupedList>
  );
}