@aiquants/daily-report 0.1.1

package/dist/types-CVhwLhSN.d.mts

@@ -0,0 +1,76 @@
+/**
+ * Core data types shared by the daily-report client and server layers.
+ * 日報機能の client / server 層で共有するコアデータ型定義。
+ */
+/** 日報一覧の 1 アイテム (詳細は遅延読み込み)。 */
+type DailyReportItem = {
+    reportHubId: number;
+    businessDate: string | null;
+};
+/** 面談者情報。 */
+type DailyReportInterviewer = {
+    name: string;
+    affiliation: string | null;
+};
+/** レガシー形式 (JSON 埋め込み) のコメント。 */
+type DailyReportComment = {
+    name: string | null;
+    text: string | null;
+    color: string | null;
+};
+/** ラベル定義。 */
+type DailyReportLabelDef = {
+    id: number;
+    name: string;
+    color: string | null;
+};
+/** リレーショナルコメント 1 件。`userId` は難読化済み文字列。 */
+type DailyReportCommentItem = {
+    id: number;
+    userId: string;
+    userName: string;
+    content: string;
+    createdAt: string;
+    isMine: boolean;
+};
+/** 日報詳細 (一覧アイテムの遅延解決結果)。`userId` は難読化済み文字列。 */
+type DailyReportDetail = {
+    reportHubId: number;
+    date: string | null;
+    createdAt: string | null;
+    author: string;
+    userId: string;
+    employeeName: string | null;
+    updatedBy: string | null;
+    updatedAt: string | null;
+    category: string | null;
+    creationCategory: string | null;
+    visitTimeFrom: string | null;
+    visitTimeTo: string | null;
+    customerName: string | null;
+    interviewers: DailyReportInterviewer[];
+    subject: string | null;
+    content: string | null;
+    comments: DailyReportComment[];
+    isRead: boolean;
+    isStarred: boolean;
+    labels: DailyReportLabelDef[];
+    commentItems: DailyReportCommentItem[];
+};
+/**
+ * Minimal display-user shape consumed by the client layer.
+ * client 層が表示に使う最小ユーザー形状 (Google プロフィール等と構造互換)。
+ */
+type DailyReportUser = {
+    id: string;
+    displayName?: string;
+    name?: {
+        familyName?: string;
+        givenName?: string;
+    };
+    emails?: {
+        value: string;
+    }[];
+};
+
+export type { DailyReportItem as D, DailyReportDetail as a, DailyReportUser as b, DailyReportComment as c, DailyReportCommentItem as d, DailyReportInterviewer as e, DailyReportLabelDef as f };

package/dist/types-CVhwLhSN.d.ts

@@ -0,0 +1,76 @@
+/**
+ * Core data types shared by the daily-report client and server layers.
+ * 日報機能の client / server 層で共有するコアデータ型定義。
+ */
+/** 日報一覧の 1 アイテム (詳細は遅延読み込み)。 */
+type DailyReportItem = {
+    reportHubId: number;
+    businessDate: string | null;
+};
+/** 面談者情報。 */
+type DailyReportInterviewer = {
+    name: string;
+    affiliation: string | null;
+};
+/** レガシー形式 (JSON 埋め込み) のコメント。 */
+type DailyReportComment = {
+    name: string | null;
+    text: string | null;
+    color: string | null;
+};
+/** ラベル定義。 */
+type DailyReportLabelDef = {
+    id: number;
+    name: string;
+    color: string | null;
+};
+/** リレーショナルコメント 1 件。`userId` は難読化済み文字列。 */
+type DailyReportCommentItem = {
+    id: number;
+    userId: string;
+    userName: string;
+    content: string;
+    createdAt: string;
+    isMine: boolean;
+};
+/** 日報詳細 (一覧アイテムの遅延解決結果)。`userId` は難読化済み文字列。 */
+type DailyReportDetail = {
+    reportHubId: number;
+    date: string | null;
+    createdAt: string | null;
+    author: string;
+    userId: string;
+    employeeName: string | null;
+    updatedBy: string | null;
+    updatedAt: string | null;
+    category: string | null;
+    creationCategory: string | null;
+    visitTimeFrom: string | null;
+    visitTimeTo: string | null;
+    customerName: string | null;
+    interviewers: DailyReportInterviewer[];
+    subject: string | null;
+    content: string | null;
+    comments: DailyReportComment[];
+    isRead: boolean;
+    isStarred: boolean;
+    labels: DailyReportLabelDef[];
+    commentItems: DailyReportCommentItem[];
+};
+/**
+ * Minimal display-user shape consumed by the client layer.
+ * client 層が表示に使う最小ユーザー形状 (Google プロフィール等と構造互換)。
+ */
+type DailyReportUser = {
+    id: string;
+    displayName?: string;
+    name?: {
+        familyName?: string;
+        givenName?: string;
+    };
+    emails?: {
+        value: string;
+    }[];
+};
+
+export type { DailyReportItem as D, DailyReportDetail as a, DailyReportUser as b, DailyReportComment as c, DailyReportCommentItem as d, DailyReportInterviewer as e, DailyReportLabelDef as f };

package/package.json

@@ -0,0 +1,108 @@
+{
+  "name": "@aiquants/daily-report",
+  "version": "0.1.1",
+  "description": "Reusable daily-report feature package: shared types/schemas, React (Router v7) UI with virtual scrolling + optimistic updates + SSE sync, and a drizzle (mssql) server layer with DI ports (auth, user resolution, redis, external sources).",
+  "sideEffects": false,
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "import": "./dist/client.mjs",
+      "require": "./dist/client.js"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "import": "./dist/server.mjs",
+      "require": "./dist/server.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "daily-report",
+    "react-router",
+    "drizzle",
+    "mssql",
+    "sse",
+    "virtual-scroll",
+    "typescript"
+  ],
+  "author": "AI Quants",
+  "license": "MIT",
+  "dependencies": {
+    "@heroicons/react": "^2.2.0",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.561.0",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^25.9.1",
+    "@types/react": "^19.2.7",
+    "drizzle-orm": "1.0.0-rc.4",
+    "jsdom": "^27.4.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-router": "^7.13.0",
+    "rimraf": "^6.1.2",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.8",
+    "zod": "^3.25.76",
+    "@aiquants/virtualscroll": "1.18.3",
+    "@aiquants/swipe-overlay": "1.2.3"
+  },
+  "peerDependencies": {
+    "drizzle-orm": ">=1.0.0-beta.4 <2.0.0",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "react-router": "^7.0.0",
+    "zod": ">=3.25.0 <5.0.0",
+    "@aiquants/virtualscroll": "^1.18.3",
+    "@aiquants/swipe-overlay": "^1.2.3"
+  },
+  "peerDependenciesMeta": {
+    "drizzle-orm": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=18.0.0",
+    "pnpm": ">=8.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "build:watch": "tsup --watch",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rimraf dist",
+    "publish:patch": "pnpm version patch --no-git-tag-version --no-git-checks && pnpm publish --no-git-checks",
+    "publish:minor": "pnpm version minor --no-git-tag-version --no-git-checks && pnpm publish --no-git-checks",
+    "publish:major": "pnpm version major --no-git-tag-version --no-git-checks && pnpm publish --no-git-checks",
+    "lint": "biome lint src/",
+    "check": "biome check src/",
+    "check:fix": "biome check --write src/",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage"
+  }
+}

package/src/client/components/business-day-thumb-overlay.tsx

@@ -0,0 +1,19 @@
+import type { ScrollBarThumbOverlayRenderProps } from "@aiquants/virtualscroll"
+import type { CSSProperties } from "react"
+
+/**
+ * Tooltip bubble that anchors to the scrollbar thumb while interacting.
+ * スクロール操作中にスクロールバーのサムへ連動表示するツールチップのコンポーネント。
+ */
+export const BusinessDayThumbOverlay = ({ orientation, thumbCenter, label, isDragging, isTapScrollActive, isWheelScrollActive }: ScrollBarThumbOverlayRenderProps & { label: string; isWheelScrollActive: boolean }) => {
+    if (!(label.trim() && (isDragging || isTapScrollActive || isWheelScrollActive))) return null
+    const style: CSSProperties = orientation === "vertical" ? { top: thumbCenter, left: -16, transform: "translate(-100%, -50%)" } : { left: thumbCenter, top: -16, transform: "translate(-50%, -100%)" }
+
+    return (
+        <div className="pointer-events-none absolute flex items-center" style={style}>
+            <div className="rounded-full border border-slate-200 bg-white px-3 py-1 text-slate-700 text-xs shadow-md shadow-slate-400/30 dark:border-slate-700 dark:bg-slate-900/90 dark:text-slate-100">
+                <span className="whitespace-nowrap font-semibold text-slate-800 dark:text-slate-100">{label.trim()}</span>
+            </div>
+        </div>
+    )
+}

package/src/client/components/daily-report-comment-item.tsx

@@ -0,0 +1,81 @@
+import { TrashIcon } from "@heroicons/react/24/outline"
+import { useState } from "react"
+import { resolveCommentColorClass, type UIComment } from "../../shared/comment-adapter"
+import { fallbackText, formatToIsoDate } from "../../shared/text-utils"
+import { cn } from "../ui/cn"
+
+type DailyReportCommentItemProps = {
+    comment: UIComment
+    reportHubId: number
+    businessDate: string
+    onOptimisticDelete: (commentId: number) => void
+    pendingDeleteId: number | string | null
+    onPendingDeleteIdChange: (id: number | string | null) => void
+    onTrashClick: (e: React.MouseEvent | React.TouchEvent, commentId: number | string) => void
+    resolvedIdMap?: Map<number, number>
+}
+
+/**
+ * Checks if the current comment is in a pending delete state, considering temporary ID resolution.
+ * 現在のコメントが削除保留状態かどうかを判定する。一時IDの解決も考慮する。
+ */
+const checkIsPendingDelete = (commentId: number | string, pendingDeleteId: number | string | null, resolvedIdMap?: Map<number, number>): boolean => {
+    if (pendingDeleteId === commentId) return true
+    // Case: commentId is temp, pendingDeleteId is resolved real ID
+    if (typeof commentId === "number" && commentId < 0 && resolvedIdMap?.get(commentId) === pendingDeleteId) return true
+    // Case: pendingDeleteId is temp, commentId is resolved real ID
+    if (typeof pendingDeleteId === "number" && pendingDeleteId < 0 && resolvedIdMap?.get(pendingDeleteId) === commentId) return true
+    return false
+}
+
+/**
+ * Renders a single comment item with delete functionality.
+ * 削除機能付きの単一コメントアイテムを描画するコンポーネント。
+ */
+export const DailyReportCommentItem = ({ comment, reportHubId: _reportHubId, businessDate: _businessDate, onOptimisticDelete, pendingDeleteId, onPendingDeleteIdChange, onTrashClick, resolvedIdMap }: DailyReportCommentItemProps) => {
+    const [isDeleted, setIsDeleted] = useState(false)
+
+    const isPendingDelete = checkIsPendingDelete(comment.id, pendingDeleteId, resolvedIdMap)
+
+    const handleConfirmDelete = (e: React.MouseEvent | React.TouchEvent) => {
+        e.stopPropagation()
+        e.preventDefault()
+
+        onPendingDeleteIdChange(null)
+        setIsDeleted(true)
+
+        if (typeof comment.id === "number") {
+            // Optimistic UI Update (API call is handled by parent hook)
+            onOptimisticDelete(comment.id)
+        }
+    }
+
+    return (
+        <li data-comment-id={comment.id} className={cn("group relative rounded-xl border border-slate-200 bg-white p-3", comment.isMine && "border-blue-200 bg-blue-50", isDeleted && "hidden", isPendingDelete ? "z-50" : "z-0 hover:z-10")}>
+            <div className="mb-1 flex items-center justify-between">
+                <div className={cn("font-semibold text-xs", resolveCommentColorClass(comment.color))}>{fallbackText(comment.authorName)}</div>
+                <div className="flex items-center gap-2">
+                    {comment.createdAt && <div className="text-[10px] text-slate-400">{formatToIsoDate(comment.createdAt)}</div>}
+                    {comment.isMine && !comment.isLegacy && (
+                        <div className="relative">
+                            <button type="button" className={cn("transition-colors", isPendingDelete ? "text-red-500" : "text-slate-400 hover:text-red-500")} title="削除" aria-label="削除" onClick={(e) => onTrashClick(e, comment.id)}>
+                                <TrashIcon className="h-4 w-4" />
+                            </button>
+
+                            {isPendingDelete && (
+                                <button
+                                    type="button"
+                                    data-delete-confirmation
+                                    className="fade-in zoom-in-95 absolute top-full right-0 z-20 mt-1 animate-in whitespace-nowrap rounded-md bg-red-600 px-3 py-1.5 font-bold text-white text-xs shadow-lg duration-200 hover:bg-red-700 active:scale-95"
+                                    onClick={handleConfirmDelete}>
+                                    削除する
+                                </button>
+                            )}
+                        </div>
+                    )}
+                </div>
+            </div>
+            <div className="whitespace-pre-wrap text-slate-700 text-sm leading-relaxed dark:text-slate-200">{comment.content}</div>
+        </li>
+    )
+}

package/src/client/components/daily-report-comment-section.tsx

@@ -0,0 +1,166 @@
+import { useCallback, useEffect, useRef, useState } from "react"
+import type { UIComment } from "../../shared/comment-adapter"
+import { DailyReportCommentItem } from "./daily-report-comment-item"
+
+/**
+ * Custom hook to manage the auto-reset behavior of the pending delete state.
+ * 削除保留状態の自動リセット（タイマーおよび外部クリック）を管理するカスタムフック。
+ */
+const useAutoResetPendingDelete = (pendingDeleteId: number | string | null, onPendingDeleteIdChange: (id: number | string | null) => void) => {
+    const timerRef = useRef<number | null>(null)
+
+    /**
+     * Effect to handle global clicks and reset pending delete state if clicked outside.
+     * 外部クリックを監視し、削除確認ボタン以外がクリックされた場合に削除保留状態をリセットする副作用。
+     *
+     * Purpose: To cancel the delete confirmation mode when the user interacts with other parts of the UI.
+     * Dependencies: [pendingDeleteId, onPendingDeleteIdChange] - Re-runs when the pending ID changes.
+     * Cleanup: Removes event listeners for mousedown and touchstart.
+     */
+    useEffect(() => {
+        if (pendingDeleteId === null) return
+
+        const handleGlobalClick = (e: Event) => {
+            const target = e.target as HTMLElement
+            // Ignore clicks inside the delete confirmation button
+            if (target.closest("[data-delete-confirmation]")) return
+
+            onPendingDeleteIdChange(null)
+        }
+
+        document.addEventListener("mousedown", handleGlobalClick)
+        document.addEventListener("touchstart", handleGlobalClick)
+
+        return () => {
+            document.removeEventListener("mousedown", handleGlobalClick)
+            document.removeEventListener("touchstart", handleGlobalClick)
+        }
+    }, [pendingDeleteId, onPendingDeleteIdChange])
+
+    /**
+     * Effect to clean up the timer on unmount.
+     * アンマウント時にタイマーをクリーンアップする副作用。
+     *
+     * Purpose: To prevent memory leaks and state updates on unmounted components.
+     * Dependencies: [] - Runs only on mount/unmount.
+     * Cleanup: Clears the timeout if it exists.
+     */
+    useEffect(() => {
+        return () => {
+            if (timerRef.current) clearTimeout(timerRef.current)
+        }
+    }, [])
+
+    const handleTrashClick = useCallback(
+        (e: React.MouseEvent | React.TouchEvent, commentId: number | string) => {
+            e.stopPropagation()
+            e.preventDefault()
+
+            if (pendingDeleteId === commentId) return
+
+            onPendingDeleteIdChange(commentId)
+
+            if (timerRef.current) clearTimeout(timerRef.current)
+            // Auto-reset after 5 seconds
+            timerRef.current = window.setTimeout(() => {
+                onPendingDeleteIdChange(null)
+                timerRef.current = null
+            }, 5000)
+        },
+        [pendingDeleteId, onPendingDeleteIdChange],
+    )
+
+    return { handleTrashClick }
+}
+
+type DailyReportCommentListProps = {
+    comments: UIComment[]
+    reportHubId: number
+    businessDate: string
+    onDeleteComment?: (commentId: number) => void
+    pendingDeleteId: number | string | null
+    onPendingDeleteIdChange: (id: number | string | null) => void
+    resolvedIdMap?: Map<number, number>
+}
+
+/**
+ * Renders a list of daily report comments.
+ * 日報コメントのリストを描画するコンポーネント。
+ */
+export const DailyReportCommentList = ({ comments, reportHubId, businessDate, onDeleteComment, pendingDeleteId, onPendingDeleteIdChange, resolvedIdMap }: DailyReportCommentListProps) => {
+    const { handleTrashClick } = useAutoResetPendingDelete(pendingDeleteId, onPendingDeleteIdChange)
+
+    if (comments.length === 0) return null
+
+    return (
+        <ul className="mb-3 space-y-2">
+            {comments.map((comment) => (
+                <DailyReportCommentItem
+                    key={comment.id}
+                    comment={comment}
+                    reportHubId={reportHubId}
+                    businessDate={businessDate}
+                    onOptimisticDelete={onDeleteComment || (() => {})}
+                    pendingDeleteId={pendingDeleteId}
+                    onPendingDeleteIdChange={onPendingDeleteIdChange}
+                    onTrashClick={handleTrashClick}
+                    resolvedIdMap={resolvedIdMap}
+                />
+            ))}
+        </ul>
+    )
+}
+
+type DailyReportCommentFormProps = {
+    reportHubId: number
+    businessDate: string
+    onAddComment?: (content: string) => Promise<void> | void
+}
+
+/**
+ * Renders a form to add a new comment to a daily report.
+ * 日報に新しいコメントを追加するためのフォームを描画するコンポーネント。
+ */
+export const DailyReportCommentForm = ({ reportHubId, businessDate, onAddComment }: DailyReportCommentFormProps) => {
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const formRef = useRef<HTMLFormElement>(null)
+
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+        const formData = new FormData(e.currentTarget)
+        const content = (formData.get("content") as string)?.trim()
+
+        if (!(content && onAddComment)) return
+
+        setIsSubmitting(true)
+        formRef.current?.reset()
+        try {
+            await onAddComment(content)
+        } catch {
+            if (formRef.current) {
+                const input = formRef.current.elements.namedItem("content") as HTMLInputElement
+                if (input) input.value = content
+            }
+        } finally {
+            setIsSubmitting(false)
+        }
+    }
+
+    return (
+        <form className="flex gap-2" ref={formRef} onSubmit={handleSubmit}>
+            <input type="hidden" name="intent" value="addComment" />
+            <input type="hidden" name="reportHubId" value={reportHubId} />
+            <input type="hidden" name="businessDate" value={businessDate} />
+            <input
+                type="text"
+                name="content"
+                placeholder="コメントを追加..."
+                className="flex-1 rounded-lg border border-slate-300 bg-slate-50 px-3 py-2 text-sm focus:border-blue-500 focus:bg-white focus:outline-none dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200"
+                autoComplete="off"
+            />
+            <button type="submit" className="rounded-lg bg-blue-600 px-4 py-2 font-medium text-sm text-white hover:bg-blue-700 disabled:opacity-50" disabled={isSubmitting}>
+                送信
+            </button>
+        </form>
+    )
+}