unipo-ui 1.2.0 → 1.3.0

package/src/katalog/wizard.tsx

@@ -0,0 +1,155 @@
+'use client';
+import * as React from 'react';
+import { Wizard, WizardReview, type WizardStep } from '../components/wizard';
+import { useToast } from '../components/overlays';
+import { Skeleton } from '../components/actions';
+import { GalatApi } from '../siakad/galat';
+import { invalidateSiakad, pesanGalat, useSiakad } from '../siakad/provider';
+import { isianSkema, jenisIsian, labelKolom, labelNilai, rapikanGalat, validasiBody, type JenisIsian } from './aturan';
+import { FormulirSkema, useFormulirSkema } from './isian';
+import { useSumber } from './katalog';
+import type { Baris, Skema } from './tipe';
+
+export interface LangkahSkema {
+  id: string;
+  judul: string;
+  keterangan?: string;
+  /** Kolom skema di langkah ini. */
+  kolom: string[];
+}
+
+const KELOMPOK: Array<{ id: string; judul: string; keterangan: string; cocok: (k: string, j: JenisIsian) => boolean }> = [
+  { id: 'identitas', judul: 'Identitas', keterangan: 'Kode, nama, dan jenis.', cocok: (k, j) => /^(kode|nama|judul|jenis|tipe|kategori|level|bidang|perihal|subjek|nomor|no_)/.test(k) || (j === 'enum' && /jenis|tipe|kategori/.test(k)) },
+  { id: 'pihak', judul: 'Pihak terkait', keterangan: 'Mahasiswa, dosen, unit, atau data lain yang dirujuk.', cocok: (_, j) => j === 'acuan' },
+  { id: 'jadwal', judul: 'Waktu', keterangan: 'Tanggal, jam, dan periode.', cocok: (k, j) => j === 'tanggal' || j === 'waktu' || j === 'jam' || /(mulai|selesai|batas|periode|semester)/.test(k) },
+  { id: 'nilai', judul: 'Angka & ketentuan', keterangan: 'Nominal, kuota, dan batas.', cocok: (_, j) => j === 'angka' || j === 'bulat' || j === 'boolean' },
+  { id: 'uraian', judul: 'Uraian', keterangan: 'Keterangan, syarat, dan lampiran.', cocok: (_, j) => j === 'teks-panjang' || j === 'json' || j === 'file' || j === 'daftar' },
+];
+
+/** Bagi isian skema menjadi langkah (identitas, pihak terkait, waktu, angka, uraian, lainnya). */
+export function langkahDariSkema(skema: Skema | undefined, maksPerLangkah = 6): LangkahSkema[] {
+  const sisa = isianSkema(skema).map(([k, s]) => [k, jenisIsian(k, s)] as const);
+  const out: LangkahSkema[] = [];
+  const pakai = new Set<string>();
+  for (const g of KELOMPOK) {
+    const kolom = sisa.filter(([k, j]) => !pakai.has(k) && g.cocok(k, j)).map(([k]) => k);
+    kolom.forEach((k) => pakai.add(k));
+    for (let i = 0; i < kolom.length; i += maksPerLangkah) out.push({ id: `${g.id}-${i}`, judul: g.judul, keterangan: g.keterangan, kolom: kolom.slice(i, i + maksPerLangkah) });
+  }
+  const lain = sisa.filter(([k]) => !pakai.has(k)).map(([k]) => k);
+  if (lain.length) {
+    // Isian lain digabung ke langkah pertama bila sedikit.
+    if (out.length && lain.length <= 2) out[0].kolom.push(...lain);
+    else out.push({ id: 'lain', judul: 'Lainnya', kolom: lain });
+  }
+  return out.length ? out : [{ id: 'semua', judul: 'Data', kolom: [] }];
+}
+
+export interface WizardSumberProps {
+  /** Path sumber data, mis. '/v1/sarpras/peminjaman'. */
+  sumber: string;
+  induk?: Record<string, unknown>;
+  /** Langkah sendiri; bawaan dibagi otomatis dari skema. */
+  langkah?: LangkahSkema[];
+  /** Nilai awal. */
+  nilai?: Record<string, unknown>;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  aside?: React.ReactNode;
+  finishLabel?: string;
+  onSelesai?: (b: Baris) => void;
+}
+
+/**
+ * Formulir tambah bertahap dari skema endpoint POST: tiap langkah divalidasi dengan aturan backend sebelum lanjut,
+ * langkah terakhir ringkasan, lalu dikirim sekali. Galat 422 dari server membuka langkah isian yang salah.
+ */
+export function WizardSumber({ sumber: id, induk, langkah, nilai, title, description, aside, finishLabel, onSelesai }: WizardSumberProps) {
+  const st = useSumber(id);
+  const siakad = useSiakad();
+  const toast = useToast();
+  const op = st.op(st.sumber?.create);
+  const skema = op?.b?.s;
+  const form = useFormulirSkema(skema, { nilai });
+  const [step, setStep] = React.useState(0);
+  const daftar = React.useMemo(() => (langkah ?? langkahDariSkema(skema)).map((l) => ({ ...l, kolom: l.kolom.filter((k) => !(induk && k in induk)) })).filter((l) => l.kolom.length), [langkah, skema, induk]);
+  if (st.loading) return <Skeleton height={320} />;
+  if (st.error) return <GalatApi error={st.error} />;
+  if (!op || !skema) return <GalatApi error={new Error('Sumber ini tidak bisa ditambah lewat API.')} />;
+  const wajib = new Set(skema.rq ?? []);
+  const periksaLangkah = (kolom: string[]) => {
+    const sub: Skema = { ...skema, pr: Object.fromEntries(kolom.map((k) => [k, skema.pr![k]])), rq: (skema.rq ?? []).filter((k) => kolom.includes(k)) };
+    const r = validasiBody(sub, form.nilai);
+    form.setGalat((g) => ({ ...g, ...Object.fromEntries(kolom.map((k) => [k, r.galat[k] ?? ''])) }));
+    const k = Object.keys(r.galat)[0];
+    return k ? `${labelKolom(k)}: ${rapikanGalat(r.galat[k])}` : null;
+  };
+  const steps: WizardStep[] = [
+    ...daftar.map((l) => ({
+      id: l.id,
+      title: l.judul,
+      description: l.keterangan,
+      error: l.kolom.some((k) => form.galat[k]),
+      optional: !l.kolom.some((k) => wajib.has(k)),
+      content: <FormulirSkema skema={skema} form={form} kolom={l.kolom} />,
+      onNext: () => periksaLangkah(l.kolom),
+    })),
+    {
+      id: 'tinjau',
+      title: 'Tinjau',
+      description: 'Periksa lalu kirim.',
+      content: (
+        <WizardReview
+          sections={daftar.map((l, i) => ({
+            title: l.judul,
+            onEdit: () => setStep(i),
+            items: l.kolom.map((k) => ({ label: labelKolom(k), value: tampilNilai(form.nilai[k]) })),
+          }))}
+        />
+      ),
+    },
+  ];
+  return (
+    <Wizard
+      steps={steps}
+      step={step}
+      onStepChange={setStep}
+      title={title ?? `Tambah ${st.sumber?.title.toLowerCase()}`}
+      description={description}
+      aside={aside}
+      finishLabel={finishLabel ?? 'Kirim'}
+      onFinish={async () => {
+        const body = form.kirim();
+        if (!body) {
+          const k = Object.keys(form.galat).find((x) => form.galat[x]);
+          const i = daftar.findIndex((l) => k && l.kolom.includes(k));
+          if (i >= 0) setStep(i);
+          return 'Masih ada isian yang perlu diperbaiki.';
+        }
+        try {
+          const r = await siakad.request({ method: op.m, path: op.path, query: { ...induk } as never, body, multipart: typeof FormData !== 'undefined' && body instanceof FormData });
+          toast.add({ title: `${st.sumber?.title} terkirim`, type: 'success' });
+          invalidateSiakad('katalog:');
+          onSelesai?.((r.data as Baris) ?? {});
+          return null;
+        } catch (e) {
+          if (form.galatServer(e)) {
+            const g = (e as { details?: Record<string, unknown> }).details ?? {};
+            const i = daftar.findIndex((l) => l.kolom.some((k) => k in g));
+            if (i >= 0) setStep(i);
+            return 'Server menolak beberapa isian. Periksa langkah yang ditandai.';
+          }
+          return pesanGalat(e);
+        }
+      }}
+    />
+  );
+}
+
+function tampilNilai(v: unknown): string {
+  if (v === undefined || v === null || v === '') return '–';
+  if (Array.isArray(v)) return v.join(', ') || '–';
+  if (typeof FileList !== 'undefined' && v instanceof FileList) return Array.from(v).map((f) => f.name).join(', ');
+  if (typeof v === 'object') return JSON.stringify(v);
+  return labelNilai(v);
+}

package/src/lib/platform.ts

@@ -0,0 +1,91 @@
+import * as React from 'react';
+
+/** Target aplikasi: web (peramban), desktop (Electron/Tauri), atau mobile (Capacitor/WebView/PWA). */
+export type Platform = 'web' | 'desktop' | 'mobile';
+/** Sistem operasi untuk gaya khas: iOS (Cupertino) atau Android (Material). */
+export type SistemOperasi = 'ios' | 'android' | 'macos' | 'windows' | 'linux' | 'lain';
+
+export interface InfoPlatform {
+  platform: Platform;
+  os: SistemOperasi;
+  /** Layar sentuh (target sentuh lebih besar, tanpa efek sorot). */
+  sentuh: boolean;
+  mobile: boolean;
+  desktop: boolean;
+  ios: boolean;
+  android: boolean;
+}
+
+export interface SetelPlatformOpsi {
+  /** 'auto' mendeteksi Capacitor/Cordova (mobile), Electron/Tauri (desktop), atau peramban (web). */
+  platform?: Platform | 'auto';
+  /** Untuk mobile: 'ios' atau 'android'; 'auto' dari user agent. */
+  os?: SistemOperasi | 'auto';
+  /** Elemen yang diberi atribut data-u-platform/data-u-os (bawaan <html>). */
+  target?: HTMLElement | null;
+}
+
+type W = Window & { Capacitor?: { getPlatform?: () => string; isNativePlatform?: () => boolean }; cordova?: unknown; __TAURI__?: unknown; __TAURI_INTERNALS__?: unknown; electron?: unknown };
+
+/** Deteksi platform dari lingkungan berjalan. */
+export function deteksiPlatform(): { platform: Platform; os: SistemOperasi } {
+  if (typeof window === 'undefined') return { platform: 'web', os: 'lain' };
+  const w = window as W;
+  const ua = navigator.userAgent;
+  const iOS = /iPhone|iPad|iPod/.test(ua) || (/Macintosh/.test(ua) && navigator.maxTouchPoints > 1);
+  const os: SistemOperasi = iOS ? 'ios' : /Android/.test(ua) ? 'android' : /Mac/.test(ua) ? 'macos' : /Win/.test(ua) ? 'windows' : /Linux/.test(ua) ? 'linux' : 'lain';
+  const cap = w.Capacitor?.getPlatform?.();
+  if (cap === 'ios' || cap === 'android') return { platform: 'mobile', os: cap };
+  if (w.cordova) return { platform: 'mobile', os };
+  if (w.__TAURI__ || w.__TAURI_INTERNALS__ || /Electron/.test(ua)) return { platform: 'desktop', os };
+  return { platform: 'web', os };
+}
+
+function info(platform: Platform, os: SistemOperasi): InfoPlatform {
+  const sentuh = typeof window !== 'undefined' ? window.matchMedia?.('(pointer: coarse)').matches || platform === 'mobile' : platform === 'mobile';
+  return { platform, os, sentuh, mobile: platform === 'mobile', desktop: platform === 'desktop', ios: os === 'ios', android: os === 'android' };
+}
+
+let sekarang: InfoPlatform = info('web', 'lain');
+const pendengar = new Set<() => void>();
+
+/**
+ * Atur target platform untuk seluruh komponen UNIPO. Panggil sekali di berkas awal aplikasi
+ * (CLI `npx unipo-ui init --platform mobile --os ios` menuliskannya otomatis):
+ *   setelPlatform({ platform: 'mobile', os: 'android' });
+ * Komponen menyesuaikan: dialog dan panel jadi lembar bawah di mobile, target sentuh 44 px (iOS) / 48 px (Android),
+ * gaya tombol, saklar, dan navigasi mengikuti iOS atau Android, tabel lebih rapat di desktop, area aman layar berponi.
+ */
+export function setelPlatform({ platform = 'auto', os = 'auto', target }: SetelPlatformOpsi = {}): InfoPlatform {
+  const d = deteksiPlatform();
+  const p = platform === 'auto' ? d.platform : platform;
+  let o = os === 'auto' ? d.os : os;
+  if (p === 'mobile' && o !== 'ios' && o !== 'android') o = 'android';
+  sekarang = info(p, o);
+  const el = target ?? (typeof document !== 'undefined' ? document.documentElement : null);
+  if (el) {
+    el.dataset.uPlatform = p;
+    el.dataset.uOs = o;
+    if (sekarang.sentuh) el.dataset.uSentuh = '';
+    else delete el.dataset.uSentuh;
+  }
+  pendengar.forEach((l) => l());
+  return sekarang;
+}
+
+/** Platform aktif (berubah bila setelPlatform dipanggil lagi). */
+export function usePlatform(): InfoPlatform {
+  return React.useSyncExternalStore(
+    (l) => {
+      pendengar.add(l);
+      return () => void pendengar.delete(l);
+    },
+    () => sekarang,
+    () => sekarang,
+  );
+}
+
+/** Platform aktif di luar React. */
+export function platformSekarang(): InfoPlatform {
+  return sekarang;
+}

package/src/siakad/index.ts

@@ -20,4 +20,5 @@ export * from './navigasi';
 export * from './aplikasi';
 export * from './log';
 export * from './pilih';
+export * from './pemeliharaan';
 export * from './berkas';

package/src/siakad/pemeliharaan.tsx

@@ -0,0 +1,118 @@
+'use client';
+import * as React from 'react';
+import { BannerPemeliharaan, ModePemeliharaan, type ModePemeliharaanProps } from '../components/pemeliharaan';
+import { invalidateSiakad } from './provider';
+
+export interface InfoPemeliharaan {
+  /** Pesan dari server (body galat 503). */
+  message?: string;
+  /** Perkiraan selesai, dari header Retry-After atau body `until`/`selesai`. */
+  until?: Date | null;
+}
+
+let sekarang: InfoPemeliharaan | null = null;
+const pendengar = new Set<() => void>();
+
+/** Tandai aplikasi sedang pemeliharaan (null = selesai). Dipanggil otomatis saat API membalas 503. */
+export function laporPemeliharaan(info: InfoPemeliharaan | null) {
+  sekarang = info;
+  pendengar.forEach((l) => l());
+}
+
+/** Status pemeliharaan yang terdeteksi dari API. */
+export function usePemeliharaan(): InfoPemeliharaan | null {
+  return React.useSyncExternalStore(
+    (l) => {
+      pendengar.add(l);
+      return () => void pendengar.delete(l);
+    },
+    () => sekarang,
+    () => null,
+  );
+}
+
+function selesaiDari(retryAfter: string | null, body: Record<string, unknown> | null): Date | null {
+  const b = (body?.error as Record<string, unknown> | undefined) ?? body ?? {};
+  const t = (b.until ?? b.selesai ?? (b.details as Record<string, unknown> | undefined)?.until) as string | undefined;
+  if (t) {
+    const d = new Date(String(t).replace(' ', 'T'));
+    if (!Number.isNaN(d.getTime())) return d;
+  }
+  if (retryAfter) {
+    const n = Number(retryAfter);
+    if (!Number.isNaN(n)) return new Date(Date.now() + n * 1000);
+    const d = new Date(retryAfter);
+    if (!Number.isNaN(d.getTime())) return d;
+  }
+  return null;
+}
+
+/**
+ * Bungkus `fetch` untuk SDK agar balasan 503 dari API menyalakan mode pemeliharaan di seluruh aplikasi:
+ *   new Siakad({ baseUrl, accessToken, fetch: fetchPemeliharaan() })
+ */
+export function fetchPemeliharaan(dasar: typeof fetch = (...a) => globalThis.fetch(...a)): typeof fetch {
+  return async (input, init) => {
+    const r = await dasar(input, init);
+    if (r.status === 503) {
+      let body: Record<string, unknown> | null = null;
+      try {
+        body = await r.clone().json();
+      } catch {
+        /* bukan JSON */
+      }
+      const pesan = ((body?.error as Record<string, unknown> | undefined)?.message ?? body?.message) as string | undefined;
+      laporPemeliharaan({ message: pesan, until: selesaiDari(r.headers.get('retry-after'), body) });
+    } else if (sekarang && r.ok) {
+      laporPemeliharaan(null);
+    }
+    return r;
+  };
+}
+
+export interface GerbangPemeliharaanProps extends Omit<ModePemeliharaanProps, 'until' | 'onRetry'> {
+  children: React.ReactNode;
+  /** Paksa mode pemeliharaan (mis. dari pengaturan aplikasi). */
+  active?: boolean;
+  /** Jadwal pemeliharaan: spanduk muncul sebelumnya, halaman pemeliharaan saat berjalan. */
+  schedule?: { start: Date | string; end?: Date | string | null; message?: React.ReactNode };
+  /** Periksa apakah layanan sudah pulih (bawaan: muat ulang data). */
+  onRetry?: () => void | Promise<void>;
+}
+
+/**
+ * Gerbang aplikasi: tampilkan halaman pemeliharaan saat `active`, saat jadwal berjalan, atau saat API membalas 503
+ * (pasang {@link fetchPemeliharaan} di SDK). Spanduk muncul sebelum jadwal.
+ */
+export function GerbangPemeliharaan({ children, active, schedule, onRetry, message, ...rest }: GerbangPemeliharaanProps) {
+  const dariApi = usePemeliharaan();
+  const [kini, setKini] = React.useState(() => Date.now());
+  React.useEffect(() => {
+    if (!schedule) return;
+    const t = setInterval(() => setKini(Date.now()), 30_000);
+    return () => clearInterval(t);
+  }, [schedule]);
+  const mulai = schedule ? new Date(String(schedule.start).replace(' ', 'T')).getTime() : 0;
+  const akhir = schedule?.end ? new Date(String(schedule.end).replace(' ', 'T')).getTime() : Infinity;
+  const terjadwal = Boolean(schedule && kini >= mulai && kini < akhir);
+  if (active || terjadwal || dariApi) {
+    return (
+      <ModePemeliharaan
+        {...rest}
+        message={dariApi?.message ?? (terjadwal ? schedule?.message : undefined) ?? message}
+        until={dariApi?.until ?? (schedule?.end ? schedule.end : null)}
+        onRetry={async () => {
+          laporPemeliharaan(null);
+          invalidateSiakad('');
+          await onRetry?.();
+        }}
+      />
+    );
+  }
+  return (
+    <>
+      {schedule && <BannerPemeliharaan start={schedule.start} end={schedule.end} message={schedule.message} />}
+      {children}
+    </>
+  );
+}

package/src/siakad/provider.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import type { ApiResult, Meta, Siakad } from 'unipo-siakad-sdk';
 import { Toaster, TooltipProvider } from '../components/overlays';
 import { requestIdDari } from '../components/galat';
+import { laporPemeliharaan } from './pemeliharaan';
 
 const SiakadContext = React.createContext<Siakad | null>(null);
 
@@ -129,6 +130,7 @@ export function useSiakadQuery<T>(key: ReadonlyArray<unknown>, fn: (siakad: Siak
         if (!ctrl.signal.aborted) setState({ result, loading: false, error: null });
       })
       .catch((e: Error) => {
+        if ((e as { status?: number })?.status === 503) laporPemeliharaan({ message: e.message, until: null });
         if (!ctrl.signal.aborted && e?.name !== 'AbortError') setState((s) => ({ ...s, loading: false, error: e }));
       });
     return () => ctrl.abort();