CompanySwitcher

import { useState } from 'react';
import { CompanySwitcher, ToastProvider, useToast, type CompanyOption } from '@divistant/circca-react';

const companies: CompanyOption[] = [
  { value: 'dikstra', name: 'PT Dikstra Cipta Solusi', description: 'Jasa IT & lisensi software' },
  { value: 'divistant', name: 'PT Divistant Teknologi Indonesia', description: 'Grup DnD' },
];

// Berpindah perusahaan mengganti seluruh konteks data: muat ulang layar di onValueChange, lalu konfirmasi lewat Toast.
// announce={false} karena Toast sudah diumumkan pembaca layar — tanpa Toast, biarkan pengumuman bawaan menyala.
function Switcher() {
  const toast = useToast();
  const [company, setCompany] = useState('dikstra');
  return (
    <CompanySwitcher
      options={companies}
      value={company}
      announce={false}
      onValueChange={(value, option) => {
        setCompany(value);
        toast({ message: `Beralih ke ${option.name}` });
      }}
    />
  );
}

export default function Example() {
  return (
    <ToastProvider>
      <Switcher />
    </ToastProvider>
  );
}

import { useState } from 'react';
import { CompanySwitcher, type CompanyOption } from '@divistant/circca-react';

const companies: CompanyOption[] = [
  { value: 'dikstra', name: 'PT Dikstra Cipta Solusi', description: 'Aktif · 4 modul' },
  { value: 'divistant', name: 'PT Divistant Teknologi Indonesia', description: 'Grup DnD · 6 modul' },
  { value: 'baru', name: 'PT Mitra Energi Persada', description: 'Akses menunggu persetujuan', disabled: true },
];

// Menu lengkap seperti Figma CompanySwitcher/Menu (34:540): judul grup, perusahaan dengan keterangan, centang aksen
// di perusahaan aktif, pemisah, lalu "Kelola akses perusahaan". Perusahaan yang aksesnya belum aktif dinonaktifkan.
// Tanpa Toast, perpindahan diumumkan sendiri ke pembaca layar ("Beralih ke …").
export default function Example() {
  const [company, setCompany] = useState('divistant');
  const [log, setLog] = useState('');
  return (
    <div className="grid justify-items-start gap-2">
      <CompanySwitcher
        options={companies}
        value={company}
        onValueChange={setCompany}
        onManage={() => setLog('Membuka Pengaturan › Akses perusahaan')}
      />
      <p className="type-footnote-default text-muted">
        Perusahaan aktif: <code>{company}</code>
        {log && ` · ${log}`}
      </p>
    </div>
  );
}