@isi-ui7/bos7-shared 0.2.0

package/src/notifications-bff.ts

@@ -0,0 +1,273 @@
+import { getUserIDFromRequest, NOTIF7_URL, notif7Fetch } from './notif7';
+
+type Notif7Raw = {
+  ID: string;
+  UserID?: string;
+  EventType?: string;
+  Title?: string;
+  Body?: string;
+  IsRead: boolean;
+  RefURL?: string;
+  CreatedAt: string;
+  Payload?: Record<string, unknown>;
+};
+
+type ReqLike = Request & {
+  cookies?: { get?: (name: string) => { value?: string } | undefined };
+};
+
+const DEFAULT_TASK_EVENT_TYPES = new Set([
+  'task.assign',
+  'task.assigned',
+  'task.delegated_to_you',
+  'task.pool_completed',
+]);
+
+function getAccessToken(req: ReqLike | Request): string | undefined {
+  return (req as ReqLike).cookies?.get?.('access_token')?.value
+    ?? (req.headers.get('cookie') ?? '')
+      .split(';')
+      .find((c) => c.trim().startsWith('access_token='))
+      ?.split('=').slice(1).join('=')
+      .trim();
+}
+
+function extractTaskId(n: Notif7Raw): string | undefined {
+  const payload = n.Payload;
+  if (!payload) return undefined;
+  const candidates = [payload.task_id, payload.taskId, payload.taskID, payload.id, payload.ref_id];
+  for (const value of candidates) {
+    if (typeof value === 'string' && value.trim() !== '') return value;
+  }
+  return undefined;
+}
+
+// Informational event types that should render in the bell panel without a
+// link target. `instance.completed`/`instance.cancelled` for auto-approval
+// flows are status updates the user just acknowledges — there's no actionable
+// follow-up screen, so a clickable link only adds noise (and dead-ends at
+// /inbox/history when the user isn't a workflow operator).
+const INFO_ONLY_EVENT_TYPES = new Set([
+  'instance.completed',
+  'instance.cancelled',
+]);
+
+function resolveActionHref(
+  n: Notif7Raw,
+  workflowBaseUrl: string,
+  taskEventTypes: Set<string>
+): string | undefined {
+  const eventType = (n.EventType || '').toLowerCase();
+  if (INFO_ONLY_EVENT_TYPES.has(eventType)) return undefined;
+  if (!taskEventTypes.has(eventType)) return n.RefURL || undefined;
+  const taskId = extractTaskId(n);
+  return taskId ? `${workflowBaseUrl}/inbox/${taskId}` : `${workflowBaseUrl}/inbox`;
+}
+
+export interface NotificationBffOptions {
+  workflowBaseUrl?: string;
+  taskEventTypes?: Set<string>;
+  includeUserID?: boolean;
+  graceful?: boolean;
+  tableActionField?: 'action_url' | 'ref_url';
+  bellTitleMap?: Record<string, string>;
+  bellTimestampLocale?: boolean;
+}
+
+export async function handleNotificationsGet(req: Request, options: NotificationBffOptions = {}): Promise<Response> {
+  const workflowBaseUrl = options.workflowBaseUrl || process.env.NEXT_PUBLIC_BOS7_WORKFLOW_URL || 'https://workflow.bos7.local';
+  const taskEventTypes = options.taskEventTypes || DEFAULT_TASK_EVENT_TYPES;
+  const includeUserID = options.includeUserID ?? true;
+  const graceful = options.graceful ?? true;
+  const tableActionField = options.tableActionField || 'action_url';
+  const bellTitleMap = options.bellTitleMap || {};
+  const bellTimestampLocale = options.bellTimestampLocale ?? false;
+
+  const url = new URL(req.url);
+  const searchParams = url.searchParams;
+  const isOffsetMode = searchParams.has('page') || searchParams.has('per_page');
+  const accessToken = getAccessToken(req);
+  const userID = includeUserID ? getUserIDFromRequest(req as ReqLike) : undefined;
+
+  try {
+    if (isOffsetMode) {
+      const page = Math.max(1, Number(searchParams.get('page') ?? '1'));
+      const perPage = Math.max(1, Number(searchParams.get('per_page') ?? '20'));
+      const isReadFilter = searchParams.get('is_read');
+
+      const query = new URLSearchParams({
+        limit: String(perPage),
+        offset: String((page - 1) * perPage),
+      });
+      if (isReadFilter) query.set('is_read', isReadFilter);
+
+      const listRes = await notif7Fetch('GET', '/api/v1/notifications', { userID, accessToken, query });
+      if (!listRes.ok) {
+        return Response.json({ data: [], total: 0, page, per_page: perPage, total_pages: 0 });
+      }
+
+      const { data: raw, total = 0 } = await listRes.json() as { data: Notif7Raw[]; total?: number };
+      const data = (raw ?? []).map((n) => {
+        const actionHref = resolveActionHref(n, workflowBaseUrl, taskEventTypes);
+        if (tableActionField === 'ref_url') {
+          return {
+            id: n.ID,
+            title: n.Title,
+            message: n.Body || '',
+            event_type: n.EventType || '',
+            is_read: n.IsRead,
+            created_at: n.CreatedAt,
+            ref_url: actionHref,
+          };
+        }
+        return {
+          id: n.ID,
+          user_id: n.UserID,
+          event_type: n.EventType,
+          title: n.Title,
+          message: n.Body,
+          is_read: n.IsRead,
+          action_url: actionHref,
+          created_at: n.CreatedAt,
+        };
+      });
+      return Response.json({ data, total, page, per_page: perPage, total_pages: Math.ceil(total / perPage) || 1 });
+    }
+
+    const [listRes, countRes] = await Promise.all([
+      notif7Fetch('GET', '/api/v1/notifications', {
+        userID,
+        accessToken,
+        query: new URLSearchParams({ limit: '20' }),
+      }),
+      notif7Fetch('GET', '/api/v1/notifications/unread-count', { userID, accessToken }),
+    ]);
+
+    if (!listRes.ok || !countRes.ok) {
+      return Response.json({ notifications: [], badgeCount: 0 });
+    }
+
+    const { data: rawNotifs } = await listRes.json() as { data: Notif7Raw[] };
+    const { unread_count } = await countRes.json() as { unread_count?: number };
+
+    const notifications = (rawNotifs ?? []).map((n) => {
+      const eventType = (n.EventType ?? '').toLowerCase();
+      const ts = bellTimestampLocale
+        ? new Date(n.CreatedAt).toLocaleString('id-ID', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' })
+        : n.CreatedAt;
+      return {
+        id: n.ID,
+        title: n.Title ?? bellTitleMap[eventType] ?? n.EventType,
+        description: n.Body,
+        timestamp: ts,
+        read: n.IsRead,
+        actionHref: resolveActionHref(n, workflowBaseUrl, taskEventTypes),
+      };
+    });
+
+    return Response.json({ notifications, badgeCount: unread_count ?? 0 });
+  } catch {
+    if (!graceful) return Response.json({ error: 'notification backend error' }, { status: 502 });
+    if (isOffsetMode) {
+      const page = Math.max(1, Number(searchParams.get('page') ?? '1'));
+      const perPage = Math.max(1, Number(searchParams.get('per_page') ?? '20'));
+      return Response.json({ data: [], total: 0, page, per_page: perPage, total_pages: 0 });
+    }
+    return Response.json({ notifications: [], badgeCount: 0 });
+  }
+}
+
+export async function handleNotificationsMarkAllRead(req: Request, options: { includeUserID?: boolean; path?: string; graceful?: boolean } = {}): Promise<Response> {
+  const includeUserID = options.includeUserID ?? true;
+  const path = options.path || '/api/v1/notifications/read-all';
+  const graceful = options.graceful ?? false;
+  const accessToken = getAccessToken(req);
+  const userID = includeUserID ? getUserIDFromRequest(req as ReqLike) : undefined;
+  try {
+    const res = await notif7Fetch('POST', path, { userID, accessToken, body: '{}' });
+    const json = await res.json().catch(() => ({}));
+    return Response.json(json, { status: res.status });
+  } catch {
+    if (graceful) return Response.json({ ok: true });
+    return Response.json({ ok: false }, { status: 502 });
+  }
+}
+
+export async function handleNotificationsReadOne(req: Request, id: string, options: { includeUserID?: boolean; graceful?: boolean } = {}): Promise<Response> {
+  const includeUserID = options.includeUserID ?? true;
+  const graceful = options.graceful ?? false;
+  const accessToken = getAccessToken(req);
+  const userID = includeUserID ? getUserIDFromRequest(req as ReqLike) : undefined;
+  try {
+    const res = await notif7Fetch('PATCH', `/api/v1/notifications/${id}/read`, { userID, accessToken });
+    const json = await res.json().catch(() => ({}));
+    return Response.json(json, { status: res.ok ? 200 : res.status });
+  } catch {
+    if (graceful) return Response.json({ ok: true });
+    return Response.json({ ok: false }, { status: 502 });
+  }
+}
+
+export async function handleNotificationsStream(req: Request, options: { preferAccessToken?: boolean } = {}): Promise<Response> {
+  void options; // preferAccessToken retained for backward-compat; no longer used
+  const accessToken = getAccessToken(req);
+
+  if (!accessToken) {
+    return new Response(
+      JSON.stringify({ error: { code: 'MISSING_TOKEN', message: 'access_token cookie required for SSE stream' } }),
+      { status: 401, headers: { 'Content-Type': 'application/json' } },
+    );
+  }
+  const token = accessToken;
+
+  const upstreamRes = await fetch(`${NOTIF7_URL}/api/v1/stream`, {
+    headers: { ...(token ? { Authorization: `Bearer ${token}` } : {}) },
+  });
+
+  if (!upstreamRes.ok || !upstreamRes.body) {
+    return new Response('data: {"type":"error"}\n\n', {
+      headers: { 'Content-Type': 'text/event-stream' },
+    });
+  }
+
+  // Pipe upstream notif7 SSE bytes to the client through an explicit
+  // TransformStream. Returning upstreamRes.body directly relies on Node's
+  // fetch ReadableStream propagating chunks immediately, which doesn't happen
+  // reliably under Next.js dev; the TransformStream forces per-chunk flushing.
+  //
+  // Also injects a synthetic `{type:"new_notification"}` envelope after each
+  // notif7 event chunk so `@isi-ui7/realtime` useNotificationBell — which
+  // expects {type:"badge_sync"|"new_notification"} — fires its onMessage and
+  // refreshes the badge. The original notif7 chunk is forwarded untouched so
+  // page-level listeners that read EventType/RefID still work.
+  const decoder = new TextDecoder();
+  const encoder = new TextEncoder();
+  const SYNTHETIC = encoder.encode('data: {"type":"new_notification"}\n\n');
+  const transform = new TransformStream<Uint8Array, Uint8Array>({
+    transform(chunk, controller) {
+      controller.enqueue(chunk);
+      // Heuristic: any chunk that begins with `data: {` and contains a notif7
+      // `EventType` field is a real notification. Heartbeats start with `:`
+      // and the initial `: connected\n\n` is also a comment — skip both.
+      const text = decoder.decode(chunk, { stream: true });
+      if (text.startsWith('data: {') && text.includes('"EventType"')) {
+        controller.enqueue(SYNTHETIC);
+      }
+    },
+  });
+  void upstreamRes.body.pipeTo(transform.writable).catch(() => {
+    /* upstream closed — TransformStream will close client side */
+  });
+
+  return new Response(transform.readable, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache, no-transform',
+      Connection: 'keep-alive',
+      // Without X-Accel-Buffering, some proxies/runtimes buffer SSE chunks until
+      // the connection closes — live events never reach the browser, only the
+      // catch-up replay on reconnect. Setting `no` forces flush-per-chunk.
+      'X-Accel-Buffering': 'no',
+    },
+  });
+}

package/src/observability/otel-init.ts

@@ -0,0 +1,41 @@
+// OTel init untuk Next.js BFF — dipanggil sekali dari instrumentation.ts setiap app.
+// Tidak ada side-effect jika OTEL_EXPORTER_OTLP_ENDPOINT tidak di-set.
+//
+// Usage di instrumentation.ts (root dari Next.js project):
+//   export async function register() {
+//     if (process.env.NEXT_RUNTIME === 'nodejs') {
+//       const { initOtel } = await import('@isi-ui7/bos7-shared')
+//       await initOtel(process.env.OTEL_SERVICE_NAME)
+//     }
+//   }
+let initialized = false
+
+export async function initOtel(serviceName?: string): Promise<void> {
+  if (initialized) return
+  initialized = true
+
+  const endpoint = process.env.OTEL_EXPORTER_OTLP_ENDPOINT
+  if (!endpoint) return // no-op jika endpoint tidak dikonfigurasi
+
+  const [
+    { NodeSDK },
+    { OTLPTraceExporter },
+    { getNodeAutoInstrumentations },
+  ] = await Promise.all([
+    import('@opentelemetry/sdk-node'),
+    import('@opentelemetry/exporter-trace-otlp-http'),
+    import('@opentelemetry/auto-instrumentations-node'),
+  ])
+
+  const sdk = new NodeSDK({
+    serviceName: serviceName ?? process.env.OTEL_SERVICE_NAME ?? 'bos7-bff',
+    traceExporter: new OTLPTraceExporter({ url: `${endpoint}/v1/traces` }),
+    instrumentations: [
+      getNodeAutoInstrumentations({
+        '@opentelemetry/instrumentation-fs': { enabled: false }, // terlalu verbose
+      }),
+    ],
+  })
+
+  sdk.start()
+}

package/src/page-layout.tsx

@@ -0,0 +1,69 @@
+import type { ReactNode } from 'react';
+
+type BreadcrumbItem = {
+  label: string;
+  href?: string;
+};
+
+export function PageLayout({ children }: { children: ReactNode }) {
+  return <div className="page">{children}</div>;
+}
+
+export function PageHeader({
+  title,
+  subtitle,
+  titleExtra,
+  breadcrumbs,
+  children,
+}: {
+  title: string;
+  subtitle?: string;
+  titleExtra?: ReactNode;
+  breadcrumbs?: BreadcrumbItem[];
+  children?: ReactNode;
+}) {
+  return (
+    <div className="page__header">
+      <div>
+        {breadcrumbs && breadcrumbs.length > 0 ? (
+          <div className="page__breadcrumb" aria-label="Breadcrumb">
+            {breadcrumbs.map((item, index) => (
+              <span key={`${item.label}-${index}`} className="page__breadcrumb-segment">
+                {index > 0 ? <span>/</span> : null}
+                <span className="page__breadcrumb-current">{item.label}</span>
+              </span>
+            ))}
+          </div>
+        ) : null}
+        {titleExtra ? (
+          <div className="page__title-row">
+            <h2 className="page__title">{title}</h2>
+            {titleExtra}
+          </div>
+        ) : (
+          <h2 className="page__title">{title}</h2>
+        )}
+        {subtitle && <p className="page__subtitle">{subtitle}</p>}
+      </div>
+      {children && <div className="page__actions">{children}</div>}
+    </div>
+  );
+}
+
+export function PageBody({ children }: { children: ReactNode }) {
+  return <div className="page__body">{children}</div>;
+}
+
+export function PageFooter({
+  children,
+  spread = false,
+}: {
+  children: ReactNode;
+  spread?: boolean;
+}) {
+  return (
+    <div className={`page__footer${spread ? ' page__footer--spread' : ''}`}>
+      {children}
+    </div>
+  );
+}