@goplusvn/core 0.1.52 → 0.1.53

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/notification/storage/in-memory.ts

@@ -1,56 +0,0 @@
-import type { Notification, NotificationStorage } from "../types";
-
-/**
- * In-memory notification storage for development/testing
- * In production, replace with database storage
- */
-export class InMemoryStorage implements NotificationStorage {
-  private notifications = new Map<string, Notification>();
-
-  async save(notification: Notification): Promise<void> {
-    this.notifications.set(notification.id, notification);
-  }
-
-  async findByUserId(
-    userId: string,
-    options?: { unreadOnly?: boolean },
-  ): Promise<Notification[]> {
-    const result: Notification[] = [];
-
-    for (const notification of this.notifications.values()) {
-      if (notification.userId === userId) {
-        if (options?.unreadOnly && notification.status === "read") {
-          continue;
-        }
-        result.push(notification);
-      }
-    }
-
-    return result.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
-  }
-
-  async findById(id: string): Promise<Notification | null> {
-    return this.notifications.get(id) || null;
-  }
-
-  async markAsRead(id: string): Promise<void> {
-    const notification = this.notifications.get(id);
-    if (notification) {
-      notification.status = "read";
-      notification.readAt = new Date();
-    }
-  }
-
-  async markAllAsRead(userId: string): Promise<void> {
-    for (const notification of this.notifications.values()) {
-      if (notification.userId === userId && notification.status !== "read") {
-        notification.status = "read";
-        notification.readAt = new Date();
-      }
-    }
-  }
-
-  async delete(id: string): Promise<void> {
-    this.notifications.delete(id);
-  }
-}

package/src/notification/storage/index.ts

@@ -1 +0,0 @@
-export { InMemoryStorage } from "./in-memory";

package/src/notification/types.ts

@@ -1,51 +0,0 @@
-// Notification Types
-export type NotificationType =
-  | "info"
-  | "warning"
-  | "error"
-  | "success"
-  | "approval";
-export type NotificationChannel = "in-app" | "email" | "sms";
-export type NotificationStatus = "pending" | "sent" | "read" | "failed";
-
-export interface Notification {
-  id: string;
-  userId: string;
-  title: string;
-  content: string;
-  type: NotificationType;
-  channel: NotificationChannel;
-  status: NotificationStatus;
-  /** Link to navigate when clicked */
-  link?: string;
-  /** Additional metadata */
-  metadata?: Record<string, unknown>;
-  createdAt: Date;
-  readAt?: Date;
-}
-
-export interface CreateNotificationInput {
-  userId: string;
-  title: string;
-  content: string;
-  type?: NotificationType;
-  channel?: NotificationChannel;
-  link?: string;
-  metadata?: Record<string, unknown>;
-}
-
-export interface NotificationStorage {
-  save(notification: Notification): Promise<void>;
-  findByUserId(
-    userId: string,
-    options?: { unreadOnly?: boolean },
-  ): Promise<Notification[]>;
-  findById(id: string): Promise<Notification | null>;
-  markAsRead(id: string): Promise<void>;
-  markAllAsRead(userId: string): Promise<void>;
-  delete(id: string): Promise<void>;
-}
-
-export interface NotificationServiceOptions {
-  storage?: NotificationStorage;
-}