@goplusvn/core 0.1.52 → 0.1.54

package/src/notification/ui/notification-bell.tsx

@@ -0,0 +1,244 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import type React from "react"
+import { useParams, useRouter } from "next/navigation"
+import {
+  Badge,
+  Button,
+  DynamicIcon,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  ScrollArea,
+} from "../../ui/primitives"
+import { toast } from "sonner"
+import useSWR from "swr"
+import { Bell, CheckCheck } from "lucide-react"
+
+
+/**
+ * Chuông thông báo in-app dùng chung mọi app goerp — truyền vào MainLayout qua
+ * prop `notificationSlot`. Engine + bảng: @goerp/core/notification + feature
+ * notifications; app cung cấp API mỏng (mẫu vinhhoa /api/notifications*).
+ * Tự fetch dữ liệu app:
+ *  - badge: poll GET /api/notifications/unread-count mỗi 45s
+ *  - list: fetch GET /api/notifications khi MỞ dropdown
+ *  - toast khi số chưa đọc tăng giữa 2 lần poll (tin mới)
+ * Không dùng SSE (nhất quán codebase — polling).
+ */
+
+interface NotiItem {
+  id: string
+  type: string
+  category: string | null
+  title: string
+  content: string
+  url: string | null
+  iconName: string | null
+  isRead: boolean
+  createdAt: string
+}
+interface ListResp {
+  items: NotiItem[]
+  nextCursor: string | null
+  total: number
+  unreadCount: number
+}
+
+const fetcher = (url: string) =>
+  fetch(url).then((r) => {
+    if (!r.ok) throw new Error(String(r.status))
+    return r.json()
+  })
+
+function timeAgo(d: string): string {
+  const s = Math.floor((Date.now() - new Date(d).getTime()) / 1000)
+  if (s < 60) return "vừa xong"
+  const m = Math.floor(s / 60)
+  if (m < 60) return `${m} phút trước`
+  const h = Math.floor(m / 60)
+  if (h < 24) return `${h} giờ trước`
+  const day = Math.floor(h / 24)
+  if (day < 7) return `${day} ngày trước`
+  return new Date(d).toLocaleDateString("vi-VN")
+}
+
+export function NotificationBell({
+  settingsSlot,
+}: {
+  /** Slot cài đặt dưới danh sách (vd toggle Web Push của app). */
+  settingsSlot?: React.ReactNode
+}) {
+  const router = useRouter()
+  const params = useParams()
+  const lang = (params?.lang as string) || "vi"
+  const [open, setOpen] = useState(false)
+
+  // Badge: poll số chưa đọc (nhẹ) — chạy nền kể cả khi đóng.
+  const { data: countData, mutate: mutateCount } = useSWR<{ count: number }>(
+    "/api/notifications/unread-count",
+    fetcher,
+    { refreshInterval: 45_000, revalidateOnFocus: true }
+  )
+  const unread = countData?.count ?? 0
+
+  // List: chỉ fetch khi mở dropdown.
+  const { data: listData, mutate: mutateList } = useSWR<ListResp>(
+    open ? "/api/notifications?take=10&filter=all" : null,
+    fetcher
+  )
+  const items = listData?.items ?? []
+
+  // Toast khi có tin mới (số chưa đọc tăng).
+  const prevUnread = useRef<number | null>(null)
+  useEffect(() => {
+    if (countData?.count == null) return
+    const cur = countData.count
+    if (prevUnread.current != null && cur > prevUnread.current) {
+      toast.info("Bạn có thông báo mới", {
+        description: `${cur} thông báo chưa đọc`,
+      })
+      if (open) void mutateList()
+    }
+    prevUnread.current = cur
+  }, [countData?.count, open, mutateList])
+
+  // Badge số trên icon PWA (iOS 16.4+/Android khi đã cài) — best-effort.
+  useEffect(() => {
+    if (!("setAppBadge" in navigator)) return
+    if (unread > 0) void navigator.setAppBadge(unread).catch(() => {})
+    else void navigator.clearAppBadge?.().catch(() => {})
+  }, [unread])
+
+  async function markRead(ids: string[]) {
+    try {
+      await fetch("/api/notifications/read", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ids }),
+      })
+      void mutateCount()
+      void mutateList()
+    } catch {
+      /* best-effort */
+    }
+  }
+
+  async function markAllRead() {
+    try {
+      await fetch("/api/notifications/read", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ all: true }),
+      })
+      void mutateCount()
+      void mutateList()
+    } catch {
+      /* best-effort */
+    }
+  }
+
+  function onItemClick(n: NotiItem) {
+    if (!n.isRead) void markRead([n.id])
+    setOpen(false)
+    if (n.url) router.push(`/${lang}${n.url}`)
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen} modal>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="relative"
+          aria-label="Thông báo"
+        >
+          <Bell className="size-4" />
+          {unread > 0 && (
+            <Badge
+              // top-0 (không thò LÊN khỏi nút) để header h-11 trong SidebarInset
+              // overflow-hidden KHÔNG cắt mất phần trên của badge; vẫn nằm góc
+              // trên-phải nút, thò nhẹ sang phải.
+              className="absolute top-0 -end-1 h-4 min-w-4 justify-center px-1 text-[10px] leading-none"
+              aria-live="polite"
+              role="status"
+            >
+              {unread > 99 ? "99+" : unread}
+            </Badge>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="end" className="w-[380px] p-0">
+        <div className="flex items-center justify-between border-b border-border p-3">
+          <h3 className="text-sm font-semibold">Thông báo</h3>
+          {unread > 0 && (
+            <Button
+              variant="link"
+              className="h-auto gap-1 p-0 text-xs text-primary"
+              onClick={markAllRead}
+            >
+              <CheckCheck className="size-3.5" />
+              Đánh dấu đã đọc tất cả
+            </Button>
+          )}
+        </div>
+
+        <ScrollArea className="max-h-[340px]">
+          {items.length === 0 ? (
+            <p className="px-6 py-10 text-center text-sm text-muted-foreground">
+              Chưa có thông báo
+            </p>
+          ) : (
+            <ul className="divide-y divide-border">
+              {items.map((n) => (
+                <li key={n.id}>
+                  <button
+                    type="button"
+                    onClick={() => onItemClick(n)}
+                    className="flex w-full items-start gap-3 px-4 py-3 text-left hover:bg-accent hover:text-accent-foreground"
+                  >
+                    <span className="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
+                      <DynamicIcon
+                        name={(n.iconName as any) || "Bell"}
+                        className="size-4"
+                      />
+                    </span>
+                    <span className="min-w-0 flex-1">
+                      <span className="block truncate text-sm font-medium">
+                        {n.title}
+                      </span>
+                      <span className="mt-0.5 block text-xs text-muted-foreground line-clamp-2">
+                        {n.content}
+                      </span>
+                      <span className="mt-1 block text-[11px] text-muted-foreground">
+                        {timeAgo(n.createdAt)}
+                      </span>
+                    </span>
+                    {!n.isRead && (
+                      <span className="mt-1.5 size-2 shrink-0 rounded-full bg-primary" />
+                    )}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </ScrollArea>
+
+        <div className="border-t border-border p-2">
+          {settingsSlot}
+          <Button
+            variant="ghost"
+            className="w-full text-sm text-primary"
+            onClick={() => {
+              setOpen(false)
+              router.push(`/${lang}/notifications`)
+            }}
+          >
+            Xem tất cả thông báo
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/src/notification/ui/notifications-inbox.tsx

@@ -0,0 +1,193 @@
+"use client"
+
+import { useState } from "react"
+import { useParams, useRouter } from "next/navigation"
+import { Badge, Button, DynamicIcon } from "../../ui/primitives"
+import useSWRInfinite from "swr/infinite"
+import { CheckCheck, Inbox } from "lucide-react"
+
+/**
+ * Trang hộp thư thông báo đầy đủ (Phase 1 — bản gọn để "Xem tất cả" trong chuông
+ * hoạt động). Lọc tất cả/chưa đọc, tải thêm (cursor), đánh dấu đã đọc.
+ */
+
+interface NotiItem {
+  id: string
+  type: string
+  category: string | null
+  title: string
+  content: string
+  url: string | null
+  iconName: string | null
+  isRead: boolean
+  createdAt: string
+}
+interface ListResp {
+  items: NotiItem[]
+  nextCursor: string | null
+  total: number
+  unreadCount: number
+}
+
+const fetcher = (url: string) =>
+  fetch(url).then((r) => {
+    if (!r.ok) throw new Error(String(r.status))
+    return r.json()
+  })
+
+function timeAgo(d: string): string {
+  const s = Math.floor((Date.now() - new Date(d).getTime()) / 1000)
+  if (s < 60) return "vừa xong"
+  const m = Math.floor(s / 60)
+  if (m < 60) return `${m} phút trước`
+  const h = Math.floor(m / 60)
+  if (h < 24) return `${h} giờ trước`
+  const day = Math.floor(h / 24)
+  if (day < 7) return `${day} ngày trước`
+  return new Date(d).toLocaleDateString("vi-VN")
+}
+
+const makeGetKey =
+  (filter: "all" | "unread") => (index: number, prev: ListResp | null) => {
+    if (prev && !prev.nextCursor) return null // hết trang
+    const cursor = index === 0 ? "" : prev?.nextCursor
+    return `/api/notifications?take=20&filter=${filter}${cursor ? `&cursor=${cursor}` : ""}`
+  }
+
+export function NotificationsInbox() {
+  const router = useRouter()
+  const params = useParams()
+  const lang = (params?.lang as string) || "vi"
+  const [tab, setTab] = useState<"all" | "unread">("all")
+
+  // Hai bộ SWRInfinite riêng cho 2 tab → chuyển tab tức thì, không lẫn cache.
+  const all = useSWRInfinite<ListResp>(makeGetKey("all"), fetcher)
+  const unread = useSWRInfinite<ListResp>(makeGetKey("unread"), fetcher)
+  const swr = tab === "all" ? all : unread
+
+  const pages = swr.data ?? []
+  const items = pages.flatMap((p) => p.items)
+  const unreadCount = (all.data ?? [])[0]?.unreadCount ?? 0
+  const hasMore =
+    pages.length > 0 && pages[pages.length - 1]?.nextCursor != null
+  const loading = swr.isLoading || swr.isValidating
+
+  function refresh() {
+    void all.mutate()
+    void unread.mutate()
+  }
+
+  async function markAllRead() {
+    await fetch("/api/notifications/read", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ all: true }),
+    }).catch(() => {})
+    refresh()
+  }
+
+  async function onItemClick(n: NotiItem) {
+    if (!n.isRead) {
+      await fetch("/api/notifications/read", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ids: [n.id] }),
+      }).catch(() => {})
+      refresh()
+    }
+    if (n.url) router.push(`/${lang}${n.url}`)
+  }
+
+  return (
+    <div className="mx-auto w-full max-w-3xl">
+      <div className="mb-4 flex items-center justify-between">
+        <div>
+          <h1 className="text-xl font-semibold">Thông báo</h1>
+          <p className="text-sm text-muted-foreground">
+            {unreadCount > 0
+              ? `${unreadCount} thông báo chưa đọc`
+              : "Đã đọc hết"}
+          </p>
+        </div>
+        {unreadCount > 0 && (
+          <Button variant="outline" size="sm" onClick={markAllRead}>
+            <CheckCheck className="mr-1 size-4" />
+            Đánh dấu đã đọc tất cả
+          </Button>
+        )}
+      </div>
+
+      <div className="mb-3 flex gap-2">
+        <Button
+          variant={tab === "all" ? "default" : "ghost"}
+          size="sm"
+          onClick={() => setTab("all")}
+        >
+          Tất cả
+        </Button>
+        <Button
+          variant={tab === "unread" ? "default" : "ghost"}
+          size="sm"
+          onClick={() => setTab("unread")}
+        >
+          Chưa đọc
+          {unreadCount > 0 && <Badge className="ml-1">{unreadCount}</Badge>}
+        </Button>
+      </div>
+
+      <div className="rounded-lg border border-border bg-card">
+        {items.length === 0 && !loading ? (
+          <div className="flex flex-col items-center gap-2 py-16 text-muted-foreground">
+            <Inbox className="size-8" />
+            <p className="text-sm">Chưa có thông báo</p>
+          </div>
+        ) : (
+          <ul className="divide-y divide-border">
+            {items.map((n) => (
+              <li key={n.id}>
+                <button
+                  type="button"
+                  onClick={() => onItemClick(n)}
+                  className={`flex w-full items-start gap-3 px-4 py-3 text-left hover:bg-accent hover:text-accent-foreground ${
+                    n.isRead ? "" : "bg-primary/5"
+                  }`}
+                >
+                  <span className="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
+                    <DynamicIcon
+                      name={(n.iconName as any) || "Bell"}
+                      className="size-4"
+                    />
+                  </span>
+                  <span className="min-w-0 flex-1">
+                    <span className="block text-sm font-medium">{n.title}</span>
+                    <span className="mt-0.5 block text-sm text-muted-foreground">
+                      {n.content}
+                    </span>
+                    <span className="mt-1 block text-xs text-muted-foreground">
+                      {timeAgo(n.createdAt)}
+                    </span>
+                  </span>
+                  {!n.isRead && (
+                    <span className="mt-1.5 size-2 shrink-0 rounded-full bg-primary" />
+                  )}
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      {hasMore && (
+        <div className="mt-4 flex justify-center">
+          <Button
+            variant="outline"
+            onClick={() => swr.setSize(swr.size + 1)}
+            disabled={loading}
+          >
+            {loading ? "Đang tải…" : "Tải thêm"}
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/system/pages/__tests__/system-jobs-page.test.tsx

@@ -0,0 +1,92 @@
+/**
+ * Smoke render trang "Tác vụ định kỳ": mount thật (jsdom) với fetch giả — bắt
+ * lỗi import/hook trước khi app tiêu thụ. Trang này chỉ mở được sau đăng nhập
+ * (quyền admin) nên không kiểm được bằng cách gọi HTTP ẩn danh.
+ */
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { SystemJobsPage } from "../system-jobs-page";
+
+const JOB = {
+  name: "zns-dispatch",
+  cronTime: "* * * * *",
+  isRunning: true,
+  nextDate: null,
+  enabled: true,
+  status: "idle" as const,
+  lastRun: "2026-08-01T06:00:00.000Z",
+  nextRun: "2026-08-01T06:01:00.000Z",
+  error: null,
+  inMemory: true,
+};
+
+const LOG = {
+  id: "log1",
+  jobName: "zns-dispatch",
+  startedAt: "2026-08-01T06:00:00.000Z",
+  finishedAt: "2026-08-01T06:00:02.000Z",
+  durationMs: 2000,
+  status: "success" as const,
+  error: null,
+  summary: null,
+  actions: [{ time: "2026-08-01T06:00:01.000Z", action: "Gửi 3 tin ZNS" }],
+};
+
+function mockFetch(jobs = [JOB]) {
+  const calls: string[] = [];
+  global.fetch = vi.fn(async (input: RequestInfo | URL) => {
+    const url = String(input);
+    calls.push(url);
+    const body = url.includes("/history")
+      ? { data: [LOG], meta: { total: 1 } }
+      : { data: jobs };
+    return new Response(JSON.stringify(body), {
+      status: 200,
+      headers: { "Content-Type": "application/json" },
+    });
+  }) as unknown as typeof fetch;
+  return calls;
+}
+
+describe("SystemJobsPage", () => {
+  afterEach(() => vi.restoreAllMocks());
+
+  it("render job từ API kèm lịch chạy", async () => {
+    mockFetch();
+    render(<SystemJobsPage />);
+
+    await waitFor(() => expect(screen.getByText("zns-dispatch")).toBeDefined());
+    expect(screen.getByText("* * * * *")).toBeDefined();
+    expect(screen.getByText("Chờ")).toBeDefined();
+  });
+
+  it("bung dòng → gọi endpoint lịch sử và hiện actions của lần chạy", async () => {
+    const calls = mockFetch();
+    render(<SystemJobsPage apiUrl="/api/jobs" />);
+
+    await waitFor(() => expect(screen.getByText("zns-dispatch")).toBeDefined());
+    fireEvent.click(screen.getByText("zns-dispatch"));
+
+    await waitFor(() => expect(screen.getByText("Thành công")).toBeDefined());
+    expect(
+      calls.some((u) => u.startsWith("/api/jobs/zns-dispatch/history?")),
+    ).toBe(true);
+
+    // Bung tiếp một lần chạy mới thấy nhật ký actions.
+    fireEvent.click(screen.getByText("Thành công"));
+    expect(screen.getByText("Gửi 3 tin ZNS")).toBeDefined();
+  });
+
+  it("job chỉ-còn-trong-DB: khoá nút chạy/tạm dừng", async () => {
+    mockFetch([{ ...JOB, inMemory: false }]);
+    render(<SystemJobsPage />);
+
+    await waitFor(() => expect(screen.getByText("Chỉ lịch sử")).toBeDefined());
+    const actionButtons = screen
+      .getAllByRole("button")
+      .filter((b) => b.getAttribute("title")?.includes("Không khả dụng"));
+    expect(actionButtons).toHaveLength(2);
+    actionButtons.forEach((b) => expect(b.hasAttribute("disabled")).toBe(true));
+  });
+});