@isi-ui7/bos7-shared 0.2.0

package/src/style-contract.ts

@@ -0,0 +1,132 @@
+export type Ui7FormDensity = "compact" | "comfortable";
+
+export type Ui7ThemeDensity = Ui7FormDensity | "normal";
+
+export interface Ui7FormVisualTokens {
+  labelSpacing: "6px";
+  labelFontSize: "12px";
+  labelFontWeight: 500;
+  labelLineHeight: "16px";
+  inputFontSize: "14px";
+  inputFontWeight: 400;
+  inputLineHeight: "20px";
+  controlHeight: "40px";
+  textareaMinHeight: "88px";
+  rowGap: "16px";
+  sectionGap: "24px";
+  columnGap: "16px";
+  readonlyBackground: "#f4f4f4";
+  readonlyCursor: "default";
+}
+
+export const UI7_FORM_VISUAL_TOKENS: Ui7FormVisualTokens = {
+  labelSpacing: "6px",
+  labelFontSize: "12px",
+  labelFontWeight: 500,
+  labelLineHeight: "16px",
+  inputFontSize: "14px",
+  inputFontWeight: 400,
+  inputLineHeight: "20px",
+  controlHeight: "40px",
+  textareaMinHeight: "88px",
+  rowGap: "16px",
+  sectionGap: "24px",
+  columnGap: "16px",
+  readonlyBackground: "#f4f4f4",
+  readonlyCursor: "default"
+} as const;
+
+export const UI7_FORM_VISUAL_CSS_VARS = {
+  labelSpacing: "--ui7-form-label-gap",
+  labelFontSize: "--ui7-form-label-font-size",
+  labelFontWeight: "--ui7-form-label-font-weight",
+  labelLineHeight: "--ui7-form-label-line-height",
+  inputFontSize: "--ui7-form-input-font-size",
+  inputFontWeight: "--ui7-form-input-font-weight",
+  inputLineHeight: "--ui7-form-input-line-height",
+  controlHeight: "--ui7-form-control-height",
+  textareaMinHeight: "--ui7-form-textarea-min-height",
+  rowGap: "--ui7-form-row-gap",
+  sectionGap: "--ui7-form-section-gap",
+  columnGap: "--ui7-form-column-gap",
+  density: "--ui7-form-density",
+  readonlyBackground: "--ui7-form-readonly-background",
+  readonlyCursor: "--ui7-form-readonly-cursor"
+} as const;
+
+export const UI7_FORM_VISUAL_CLASSNAMES = {
+  scope: "ui7-form-contract",
+  densityCompact: "ui7-form-contract--density-compact",
+  densityComfortable: "ui7-form-contract--density-comfortable",
+  readonly: "ui7-form-contract--readonly",
+  row: "ui7-form-row",
+  section: "ui7-form-section",
+  column: "ui7-form-column",
+  label: "ui7-form-label",
+  labelRequired: "ui7-form-label__required",
+  control: "ui7-form-control",
+  controlReadonly: "ui7-form-control--readonly",
+  helper: "ui7-form-helper",
+  readonlyValue: "ui7-form-readonly-value"
+} as const;
+
+// ── Density tokens ─────────────────────────────────────────────────────────────
+// Applied as inline styles so no external CSS is required.
+
+export const UI7_FORM_DENSITY_TOKENS = {
+  compact: {
+    controlHeight: "2rem",
+    rowGap: "0.75rem",
+    sectionGap: "1rem",
+    columnGap: "0.75rem",
+  },
+  comfortable: {
+    controlHeight: "2.5rem",
+    rowGap: "1rem",
+    sectionGap: "1.5rem",
+    columnGap: "1rem",
+  },
+} as const;
+
+export function normalizeUi7FormDensity(
+  density?: Ui7ThemeDensity | null,
+  fallback: Ui7FormDensity = "compact"
+): Ui7FormDensity {
+  if (density === "compact") return "compact";
+  if (density === "comfortable") return "comfortable";
+  if (density === "normal") return "comfortable";
+  return fallback;
+}
+
+export function getUi7FormDensityClassName(
+  density?: Ui7ThemeDensity | null,
+  fallback: Ui7FormDensity = "compact"
+): string {
+  return normalizeUi7FormDensity(density, fallback) === "compact"
+    ? UI7_FORM_VISUAL_CLASSNAMES.densityCompact
+    : UI7_FORM_VISUAL_CLASSNAMES.densityComfortable;
+}
+
+export function getUi7FormContractClassName(
+  options?: {
+    density?: Ui7ThemeDensity | null;
+    readonly?: boolean;
+    className?: string | null;
+  }
+): string {
+  const classes: string[] = [UI7_FORM_VISUAL_CLASSNAMES.scope];
+
+  if (options?.density !== undefined) {
+    classes.push(getUi7FormDensityClassName(options.density));
+  }
+
+  if (options?.readonly) {
+    classes.push(UI7_FORM_VISUAL_CLASSNAMES.readonly);
+  }
+
+  if (options?.className) {
+    classes.push(options.className);
+  }
+
+  return classes.join(" ");
+}

package/src/types/core.ts

@@ -0,0 +1,46 @@
+export interface QueryParams {
+  cursor?: string;
+  pageSize?: number;
+  sortBy?: string;
+  sortDir?: 'asc' | 'desc';
+  search?: string;
+  filters?: Record<string, unknown>;
+}
+
+export interface QueryResult<T> {
+  data: T[];
+  nextCursor?: string;
+  prevCursor?: string;
+  total?: number;
+}
+
+export interface OffsetPage<T> {
+  data: T[];
+  total: number;
+  page: number;
+  per_page: number;
+  total_pages: number;
+}
+
+export interface OffsetQueryParams {
+  page?: string;
+  per_page?: string;
+  sort_by?: string;
+  sort_dir?: 'asc' | 'desc';
+  search?: string;
+  [key: string]: string | undefined;
+}
+
+export type ServiceAction = 'get' | 'simpan' | 'hapus';
+
+export interface ServiceRequest<T = unknown> {
+  payload?: T;
+}
+
+export interface ServiceResponse<T = unknown> {
+  ok: boolean;
+  data?: T;
+  error?: string;
+}
+
+export type { Notification, Notif7Raw, NotificationListResponse, UnreadCountResponse } from '../types/notification';

package/src/types/notification.ts

@@ -0,0 +1,35 @@
+// Frontend-normalized notification (snake_case) — dipakai oleh page dan shell
+export interface Notification {
+  id:          string;
+  user_id:     string;
+  event_type:  string;
+  title:       string;
+  message:     string;
+  is_read:     boolean;
+  action_url?: string;
+  created_at:  string;
+}
+
+// Raw shape dari notif7 API — Go struct tanpa json tag → PascalCase
+export interface Notif7Raw {
+  ID:         string;
+  UserID:     string;
+  EventType:  string;
+  Title:      string;
+  Body:       string;
+  IsRead:     boolean;
+  RefURL?:    string;
+  CreatedAt:  string;
+  Source?:    string;
+  Channel?:   string;
+}
+
+export interface NotificationListResponse {
+  data:         Notification[];
+  next_cursor?: string;
+  total?:       number;
+}
+
+export interface UnreadCountResponse {
+  unread_count: number;
+}

package/src/workflow/api-client.ts

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+const apiClient = axios.create({
+  baseURL: '/api',
+});
+
+export default apiClient;

package/src/workflow/backend.ts

@@ -0,0 +1,53 @@
+// Workflow-specific backend proxy helpers (Response-based contract).
+
+const BACKEND_URL = process.env.BACKEND_URL ?? 'http://localhost:8081';
+
+export interface WorkflowBackendRequestOptions {
+  query?: URLSearchParams;
+  body?: string;
+  contentType?: string;
+  accessToken?: string;
+}
+
+async function request(
+  method: string,
+  path: string,
+  options: WorkflowBackendRequestOptions = {}
+): Promise<Response> {
+  const url = options.query
+    ? `${BACKEND_URL}${path}?${options.query.toString()}`
+    : `${BACKEND_URL}${path}`;
+
+  return fetch(url, {
+    method,
+    headers: {
+      'Content-Type': options.contentType ?? 'application/json',
+      ...(options.accessToken ? { Authorization: `Bearer ${options.accessToken}` } : {}),
+    },
+    ...(options.body !== undefined ? { body: options.body } : {}),
+  });
+}
+
+export { request as backendRequest };
+
+// safeProxyJson forwards a backend Response back to the caller as JSON.
+// Uses plain web-standard Response (works in both Node and Edge runtimes,
+// and avoids a runtime dynamic import of `next/server` which fails to resolve
+// from this library's path in Next.js 16).
+export async function safeProxyJson(res: Response): Promise<Response> {
+  const text = await res.text();
+  let bodyText: string;
+  let isError = false;
+  try {
+    JSON.parse(text);
+    bodyText = text;
+  } catch {
+    bodyText = JSON.stringify({ error: text || 'empty response' });
+    isError = true;
+  }
+  const status = isError && res.status < 400 ? 502 : res.status;
+  return new Response(bodyText, {
+    status,
+    headers: { 'Content-Type': 'application/json' },
+  });
+}

package/src/workflow/crud-client.ts

@@ -0,0 +1,43 @@
+export async function fetchDetailData<T>(url: string): Promise<T> {
+  const res = await fetch(url);
+  const body = (await res.json().catch(() => ({}))) as { data?: T; error?: string };
+
+  if (!res.ok) {
+    throw new Error(body.error ?? `Gagal memuat data (HTTP ${res.status})`);
+  }
+  if (!body.data) {
+    throw new Error('Gagal memuat data');
+  }
+
+  return body.data;
+}
+
+export async function submitWorkflowForm<TPayload>(
+  url: string,
+  method: 'POST' | 'PUT' | 'PATCH',
+  payload: TPayload,
+): Promise<string> {
+  const res = await fetch(url, {
+    method,
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  });
+  const body = (await res.json().catch(() => ({}))) as { instance_id?: string; error?: string };
+
+  if (res.status === 202 && body.instance_id) {
+    return body.instance_id;
+  }
+
+  throw new Error(body.error ?? `Gagal (HTTP ${res.status})`);
+}
+
+export async function submitWorkflowDelete(url: string): Promise<string> {
+  const res = await fetch(url, { method: 'DELETE' });
+  const body = (await res.json().catch(() => ({}))) as { instance_id?: string; error?: string };
+
+  if (res.status === 202 && body.instance_id) {
+    return body.instance_id;
+  }
+
+  throw new Error(body.error ?? `Gagal (HTTP ${res.status})`);
+}

package/src/workflow/notif7.ts

@@ -0,0 +1,28 @@
+// Workflow-specific notif7 proxy helpers (Response-based contract).
+
+const NOTIF7_URL = process.env.NOTIF7_URL ?? '';
+
+export interface WorkflowNotif7RequestOptions {
+  accessToken?: string;
+  query?: URLSearchParams;
+  body?: string;
+}
+
+export async function notif7Request(
+  method: string,
+  path: string,
+  options: WorkflowNotif7RequestOptions = {}
+): Promise<Response> {
+  const url = options.query
+    ? `${NOTIF7_URL}${path}?${options.query.toString()}`
+    : `${NOTIF7_URL}${path}`;
+
+  return fetch(url, {
+    method,
+    headers: {
+      'Content-Type': 'application/json',
+      ...(options.accessToken ? { Authorization: `Bearer ${options.accessToken}` } : {}),
+    },
+    ...(options.body !== undefined ? { body: options.body } : {}),
+  });
+}

package/src/workflow/starter.ts

@@ -0,0 +1,153 @@
+// BFF helpers untuk memulai workflow7 instance dari Next.js API route handlers.
+// Server-side only — jangan import dari client components.
+//
+// POST /wf/instances/start mengambil branchID dari user JWT (bukan body), jadi
+// helper meneruskan user access_token cookie ke workflow7 sebagai Bearer
+// (BUKAN service M2M token).
+//
+// initiator_context.user_id auto-derived dari JWT sub claim — wajib supaya
+// workflow7 EventRecorder dispatch SSE event `instance.completed` balik ke
+// initiator. Kalau initiatedBy kosong → no dispatch → notifikasi silent.
+
+const WORKFLOW7_URL =
+  process.env.NEXT_PUBLIC_BOS7_WORKFLOW_URL ??
+  process.env.WORKFLOW7_URL ??
+  'http://localhost:8081';
+
+type CookieReqLike = Request & {
+  cookies?: { get?: (name: string) => { value?: string } | undefined };
+};
+
+function decodeJWTSub(token: string): string {
+  try {
+    const parts = token.split('.');
+    if (parts.length < 2) return '';
+    const payload = parts[1].replace(/-/g, '+').replace(/_/g, '/');
+    const claims = JSON.parse(Buffer.from(payload, 'base64').toString('utf-8')) as { sub?: string };
+    return claims.sub ?? '';
+  } catch {
+    return '';
+  }
+}
+
+/** Read the user access_token cookie from a Next.js API route request. */
+export function getUserAccessToken(req: CookieReqLike | Request): string | undefined {
+  const fromHelper = (req as CookieReqLike).cookies?.get?.('access_token')?.value;
+  if (fromHelper) return fromHelper;
+  const cookieHeader = req.headers.get('cookie') ?? '';
+  const match = cookieHeader
+    .split(';')
+    .find((c) => c.trim().startsWith('access_token='));
+  if (!match) return undefined;
+  return match.split('=').slice(1).join('=').trim() || undefined;
+}
+
+/** UUID idempotency key — used as external_ref and embedded in workflow payload. */
+export function newWfIdempotencyKey(): string {
+  return crypto.randomUUID();
+}
+
+export type StartWorkflowInput = {
+  flowId: string;
+  payload: Record<string, unknown>;
+  externalRef?: string;
+  initiatorContext?: { user_id?: string; branch_id?: string };
+  /** User access token dari auth7 — diforward ke workflow7 sebagai Bearer. */
+  userAccessToken: string;
+};
+
+export type StartWorkflowResult = {
+  ok: boolean;
+  instanceId?: string;
+  status?: string;
+  error?: string;
+};
+
+export async function startWorkflow(input: StartWorkflowInput): Promise<StartWorkflowResult> {
+  const userID = decodeJWTSub(input.userAccessToken);
+  const initiatorContext: Record<string, unknown> = { ...(input.initiatorContext ?? {}) };
+  if (!initiatorContext.user_id && userID) {
+    initiatorContext.user_id = userID;
+  }
+
+  const body: Record<string, unknown> = {
+    flow_definition_code: input.flowId,
+    payload: input.payload,
+  };
+  if (input.externalRef) body.external_ref = input.externalRef;
+  if (Object.keys(initiatorContext).length > 0) {
+    body.initiator_context = initiatorContext;
+  }
+
+  let res: Response;
+  try {
+    res = await fetch(`${WORKFLOW7_URL}/wf/instances/start`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${input.userAccessToken}`,
+      },
+      body: JSON.stringify(body),
+    });
+  } catch (e: unknown) {
+    const message = e instanceof Error ? e.message : String(e);
+    return { ok: false, error: `workflow7 unreachable: ${message}` };
+  }
+
+  if (!res.ok) {
+    try {
+      const errBody = (await res.json()) as { error?: { message?: string; code?: string } };
+      const msg = errBody?.error?.message ?? errBody?.error?.code ?? `workflow7 start failed: ${res.status}`;
+      return { ok: false, error: msg };
+    } catch {
+      return { ok: false, error: `workflow7 start failed: ${res.status}` };
+    }
+  }
+
+  // workflow7's FlowInstance struct has no JSON tags → fields marshal as
+  // PascalCase (ID, Status). Lowercase variants kept for forward-compat.
+  const json = (await res.json()) as {
+    data?: { ID?: string; Status?: string; id?: string; status?: string };
+  };
+  const inst = json?.data;
+  return {
+    ok: true,
+    instanceId: inst?.ID ?? inst?.id,
+    status: inst?.Status ?? inst?.status,
+  };
+}
+
+export type WfStartedBody = {
+  instance_id?: string;
+  wf_instance_id: string;
+  status: string;
+};
+
+/**
+ * Standard 202 envelope for "workflow started" responses.
+ * `instanceId` is workflow7's instance UUID (used by SSE RefID match);
+ * `idempotencyKey` is the external_ref/wf_instance_id (financing service uses it
+ * as upsert idempotency key).
+ */
+export function respondWfStarted(
+  result: StartWorkflowResult,
+  idempotencyKey: string,
+): Response {
+  if (!result.ok) {
+    return Response.json(
+      { error: result.error ?? 'workflow_start_failed' },
+      { status: 502 },
+    );
+  }
+  const body: WfStartedBody = {
+    instance_id: result.instanceId,
+    wf_instance_id: idempotencyKey,
+    status: result.status ?? 'STARTED',
+  };
+  return Response.json(body, { status: 202 });
+}
+
+/** Standard 401 envelope when access_token cookie missing. */
+export function respondUnauthorized(): Response {
+  return Response.json({ error: 'unauthorized' }, { status: 401 });
+}

package/src/workflow/use-crud-form.ts

@@ -0,0 +1,176 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import type { CrudForm, FormMode } from "../form-types";
+import {
+  collectAllFields,
+  collectPageFields,
+  getLayoutPageCount,
+  resolveApiPath,
+  runFieldValidation,
+} from "../form-renderer-utils";
+import { fetchDetailData, submitWorkflowForm } from "./crud-client";
+import { useBosSharedI18n } from "../i18n";
+
+export type UseCrudFormOptions<TData extends Record<string, unknown>> = {
+  schema: CrudForm<TData>;
+  mode: FormMode;
+  /** Route params used for API path interpolation, e.g. { id: "123" }. Memoize to avoid re-loads. */
+  params?: Record<string, string>;
+  /** Called with workflow instance_id on successful submit. */
+  onSuccess?: (instanceId: string) => void;
+};
+
+export type UseCrudFormReturn<TData extends Record<string, unknown>> = {
+  form: TData;
+  setForm: (patch: Partial<TData>) => void;
+  loading: boolean;
+  saving: boolean;
+  error: string | null;
+  fieldErrors: Partial<Record<keyof TData, string>>;
+  isDirty: boolean;
+  page: number;
+  pageCount: number;
+  isLastPage: boolean;
+  canGoPrev: boolean;
+  goNext: () => Promise<void>;
+  goPrev: () => void;
+  handleSave: () => Promise<void>;
+};
+
+export function useCrudForm<TData extends Record<string, unknown>>({
+  schema,
+  mode,
+  params = {},
+  onSuccess,
+}: UseCrudFormOptions<TData>): UseCrudFormReturn<TData> {
+  const labels = useBosSharedI18n();
+  const [form, setFormState] = useState<TData>(schema.emptyData);
+  const [initialForm, setInitialForm] = useState<TData>(schema.emptyData);
+  const [loading, setLoading] = useState(mode !== "create");
+  const [saving, setSaving] = useState(false);
+  const [serverError, setServerError] = useState<string | null>(null);
+  const [hasValidationError, setHasValidationError] = useState(false);
+  const [fieldErrors, setFieldErrors] = useState<Partial<Record<keyof TData, string>>>({});
+  const [page, setPage] = useState(0);
+
+  const pageCount = getLayoutPageCount(schema.layout);
+  const isLastPage = page === pageCount - 1;
+
+  const setForm = (patch: Partial<TData>) =>
+    setFormState((prev) => ({ ...prev, ...patch }));
+
+  // stable key derived from params so useEffect doesn't need params in deps
+  const paramsKey = JSON.stringify(params);
+
+  useEffect(() => {
+    if (mode === "create") return;
+    if (!schema.loadApiPath) return;
+    setLoading(true);
+    const url = resolveApiPath(schema.loadApiPath, params);
+    fetchDetailData<Partial<TData>>(url)
+      .then((row) => {
+        const loaded = { ...schema.emptyData, ...row } as TData;
+        setFormState(loaded);
+        setInitialForm(loaded);
+      })
+      .catch((e: unknown) => setServerError(e instanceof Error ? e.message : String(e)))
+      .finally(() => setLoading(false));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mode, paramsKey]);
+
+  const isDirty = useMemo(
+    () => JSON.stringify(form) !== JSON.stringify(initialForm),
+    [form, initialForm],
+  );
+
+  const validatePage = (pageIndex: number) => {
+    return runFieldValidation(collectPageFields(schema.layout, pageIndex), form, mode, labels);
+  };
+
+  const validateAll = () => {
+    const errs = runFieldValidation(collectAllFields(schema.layout), form, mode, labels);
+    if (schema.validate) {
+      return { ...errs, ...schema.validate(form) };
+    }
+    return errs;
+  };
+
+  const goNext = async () => {
+    setServerError(null);
+    setHasValidationError(false);
+    const layout = schema.layout;
+    if (layout.type === "wizard" && layout.validateOnNext) {
+      const errs = validatePage(page);
+      setFieldErrors(errs);
+      if (Object.keys(errs).length > 0) return;
+    }
+    if (layout.type === "wizard") {
+      const stepPath = layout.pages[page]?.stepSaveApiPath;
+      if (stepPath) {
+        setSaving(true);
+        try {
+          const url = resolveApiPath(stepPath, params);
+          await submitWorkflowForm(url, "POST", form);
+        } catch (e: unknown) {
+          setServerError(e instanceof Error ? e.message : String(e));
+          setSaving(false);
+          return;
+        }
+        setSaving(false);
+      }
+    }
+    setPage((p) => Math.min(p + 1, pageCount - 1));
+  };
+
+  const goPrev = () => {
+    setServerError(null);
+    setHasValidationError(false);
+    setPage((p) => Math.max(p - 1, 0));
+  };
+
+  const handleSave = async () => {
+    setServerError(null);
+    const errs = validateAll();
+    setFieldErrors(errs);
+    if (Object.keys(errs).length > 0) {
+      setHasValidationError(true);
+      return;
+    }
+    setHasValidationError(false);
+    setSaving(true);
+    try {
+      let instanceId: string;
+      if (mode === "create") {
+        const url = resolveApiPath(schema.createApiPath, params);
+        instanceId = await submitWorkflowForm(url, "POST", form);
+      } else {
+        if (!schema.updateApiPath) throw new Error("updateApiPath tidak dikonfigurasi");
+        const url = resolveApiPath(schema.updateApiPath, params);
+        instanceId = await submitWorkflowForm(url, "PUT", form);
+      }
+      onSuccess?.(instanceId);
+    } catch (e: unknown) {
+      setServerError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return {
+    form,
+    setForm,
+    loading,
+    saving,
+    error: hasValidationError ? labels.validationError : serverError,
+    fieldErrors,
+    isDirty,
+    page,
+    pageCount,
+    isLastPage,
+    canGoPrev: page > 0,
+    goNext,
+    goPrev,
+    handleSave,
+  };
+}