@aiquants/daily-report 0.1.1

package/src/client/components/daily-report-page.tsx

@@ -0,0 +1,147 @@
+/**
+ * Top-level daily-report page content (chrome-agnostic).
+ * アプリのレイアウトに依存しない日報ページ本体コンポーネント。
+ *
+ * アプリ側のルートは本コンポーネントを自前のレイアウト (Main 等) で包み、
+ * `config` でヘッダー描画・パス・ラベル名を注入する。
+ */
+import { Suspense, useCallback, useEffect, useState } from "react"
+import { Await, useRevalidator } from "react-router"
+import type { DailyReportItem, DailyReportUser } from "../../shared/types"
+import { type DailyReportClientConfigInput, DailyReportConfigProvider, useDailyReportConfig } from "../config-context"
+import { DailyReportActionProvider } from "../contexts/daily-report-action-context"
+import { DAILY_REPORT_FETCH_DEBOUNCE_MS } from "../utils/constants"
+import { DailyReportResolvedContent } from "./daily-report-resolved-content"
+
+/**
+ * Synchronizes resolved daily report ids into the action context provider state.
+ * Also renders the resolved content after synchronization trigger is set.
+ *
+ * 解決済みの日報 ID を Action Context 側へ同期し、解決済みコンテンツを描画するコンポーネント。
+ */
+const DailyReportResolvedSync = ({ dailyReportItems, userId, onResolved }: { dailyReportItems: DailyReportItem[]; userId?: string | null; onResolved: (items: DailyReportItem[]) => void }) => {
+    /**
+     * Notifies parent when resolved items change.
+     * Dependencies:
+     * - dailyReportItems: latest resolved list from Await.
+     * - onResolved: parent synchronization callback.
+     * Cleanup:
+     * - None (pure synchronization side effect).
+     *
+     * 解決済み items が変化したときに親へ通知します。
+     * 依存配列:
+     * - dailyReportItems: Await で解決された最新リスト
+     * - onResolved: 親への同期コールバック
+     * クリーンアップ:
+     * - なし（同期のみの副作用）
+     */
+    useEffect(() => {
+        onResolved(dailyReportItems)
+    }, [dailyReportItems, onResolved])
+
+    return <DailyReportResolvedContent dailyReportItems={dailyReportItems} userId={userId} />
+}
+
+/**
+ * Error display component for daily report data fetch failures.
+ * 日報データの取得失敗時に表示するエラーコンポーネント。
+ */
+export const DailyReportLoadError = () => {
+    const { title, renderHeader } = useDailyReportConfig()
+    const { revalidate } = useRevalidator()
+    return (
+        <>
+            {renderHeader({ title, annotation: <span className="font-bold text-red-500">Error</span> })}
+            <div className="h-full bg-slate-50 p-2">
+                <div className="mx-auto flex h-full w-full max-w-6xl flex-1 flex-col gap-6">
+                    <div className="flex h-full flex-1 flex-col items-center justify-center gap-4 rounded-lg border border-red-200 bg-white p-4 text-slate-500 shadow-sm dark:border-red-900 dark:bg-slate-900/70 dark:text-slate-400">
+                        <p className="font-medium text-red-600">日報データの読み込みに失敗しました。</p>
+                        <button type="button" onClick={() => revalidate()} className="rounded bg-slate-100 px-4 py-2 text-slate-700 text-sm hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700">
+                            再読み込み
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+/**
+ * Suspense fallback while daily report identifiers resolve.
+ * 日報 ID 解決中のサスペンスフォールバック。
+ */
+export const DailyReportLoading = () => {
+    const { title, renderHeader } = useDailyReportConfig()
+    return (
+        <>
+            {renderHeader({
+                title,
+                annotation: (
+                    <div className="flex flex-wrap gap-2 leading-none">
+                        <span>総件数: 読み込み中...</span>
+                        <span>デバウンス: {DAILY_REPORT_FETCH_DEBOUNCE_MS} ms</span>
+                    </div>
+                ),
+            })}
+            <div className="h-full bg-slate-50 p-2">
+                <div className="mx-auto flex h-full w-full max-w-6xl flex-1 flex-col gap-6">
+                    <div className="flex h-full flex-1 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-500 shadow-sm dark:border-slate-700 dark:bg-slate-900/70 dark:text-slate-300">日報 ID を読み込み中です...</div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export type DailyReportPageProps = {
+    /** 表示中ユーザー (楽観的コメントの作者名等に使用)。 */
+    user?: DailyReportUser
+    /** 難読化済みの内部ユーザー ID (未登録ユーザーは null)。 */
+    userId?: string | null
+    /** clientLoader で defer した日報 ID 一覧 (Promise) または解決済み配列。 */
+    dailyReportIds?: Promise<DailyReportItem[]> | DailyReportItem[] | null
+    /** クライアント設定の部分上書き (ヘッダー描画・パス・ラベル名・フィールドラベルなど)。 */
+    config?: DailyReportClientConfigInput
+}
+
+/**
+ * Daily report page content rendering provider, suspense boundary, and resolved views.
+ * プロバイダー・サスペンス境界・解決済みビューを描画する日報ページ本体。
+ */
+const DailyReportPageInner = ({ user, userId, dailyReportIds }: Omit<DailyReportPageProps, "config">) => {
+    const [resolvedInitialItems, setResolvedInitialItems] = useState<DailyReportItem[]>([])
+
+    const handleResolvedItems = useCallback((items: DailyReportItem[]) => {
+        setResolvedInitialItems(items)
+    }, [])
+
+    return (
+        <DailyReportActionProvider user={user} initialItems={resolvedInitialItems} userId={userId}>
+            <Suspense fallback={<DailyReportLoading />}>
+                {/* Resolve で非同期取得済み ID を確定表示 */}
+                {dailyReportIds ? (
+                    <Await resolve={dailyReportIds} errorElement={<DailyReportLoadError />}>
+                        {(resolvedItems) => {
+                            if (!resolvedItems) {
+                                throw new Error("Daily report ids resolve must not be null")
+                            }
+                            // 非 null を保証して以降の処理で利用
+                            return <DailyReportResolvedSync dailyReportItems={resolvedItems as DailyReportItem[]} userId={userId} onResolved={handleResolvedItems} />
+                        }}
+                    </Await>
+                ) : (
+                    <DailyReportLoading />
+                )}
+            </Suspense>
+        </DailyReportActionProvider>
+    )
+}
+
+/**
+ * Chrome-agnostic daily report page with client configuration provider.
+ * 設定プロバイダー込みの日報ページコンポーネント。
+ */
+export const DailyReportPage = ({ config, ...rest }: DailyReportPageProps) => (
+    <DailyReportConfigProvider config={config}>
+        <DailyReportPageInner {...rest} />
+    </DailyReportConfigProvider>
+)

package/src/client/components/daily-report-resolved-content.tsx

@@ -0,0 +1,139 @@
+import { Plus } from "lucide-react"
+import type { ReactNode } from "react"
+import { useEffect, useMemo, useState } from "react"
+import { useSearchParams } from "react-router"
+import type { DailyReportItem } from "../../shared/types"
+import { useDailyReportConfig } from "../config-context"
+import { useDailyReportActionContext } from "../contexts/daily-report-action-context"
+import { Button } from "../ui/button"
+import { Label } from "../ui/label"
+import { Switch } from "../ui/switch"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs"
+import { DAILY_REPORT_FETCH_DEBOUNCE_MS } from "../utils/constants"
+import { DailyReportDetailList } from "./daily-report-detail-list"
+import { DailyReportList } from "./daily-report-list"
+
+const tabTriggerClass = "min-w-24 p-2 font-medium text-slate-600 text-xs transition-colors data-[state=active]:bg-white data-[state=active]:text-slate-900 sm:min-w-36 sm:text-sm dark:text-slate-300 dark:data-[state=active]:bg-slate-800 dark:data-[state=active]:text-slate-100"
+
+type DailyReportResolvedContentProps = {
+    dailyReportItems: DailyReportItem[]
+    userId?: string | null
+}
+
+/**
+ * Displays fetched daily reports with layout and tabbed virtual scroll views.
+ * レイアウトとタブ付き仮想スクロールで取得済み日報を表示するコンポーネント。
+ */
+export const DailyReportResolvedContent = ({ dailyReportItems: _initialItems, userId }: DailyReportResolvedContentProps) => {
+    // 自動既読設定
+    const [autoMarkRead, setAutoMarkRead] = useState(false)
+    const { title, renderHeader, showDevControls } = useDailyReportConfig()
+    const { isSseEnabled, toggleSse, createReport, items: dailyReportItems } = useDailyReportActionContext()
+    const [searchParams] = useSearchParams()
+
+    // 選択状態の管理 (タブ間で共有)
+    const [selectedItemId, setSelectedItemId] = useState<number | null>(() => {
+        if (dailyReportItems.length === 0) return null
+        return dailyReportItems[0].reportHubId
+    })
+
+    const handleCreateReport = async () => {
+        const businessDateParam = searchParams.get("businessDate")
+        const today = new Date().toISOString().split("T")[0]
+        const dateToUse = businessDateParam || today
+        const newId = await createReport(dateToUse)
+        setSelectedItemId(newId)
+    }
+
+    /**
+     * Effect to load the auto-read setting from local storage on mount.
+     * マウント時にローカルストレージから自動既読設定を読み込む副作用。
+     *
+     * Purpose: To persist user preference for auto-read behavior.
+     * Dependencies: [] - Runs only on mount.
+     * Cleanup: None.
+     */
+    useEffect(() => {
+        const stored = localStorage.getItem("daily-report-auto-read")
+        if (stored === "true") {
+            setAutoMarkRead(true)
+        }
+    }, [])
+
+    const handleAutoMarkReadChange = (checked: boolean) => {
+        setAutoMarkRead(checked)
+        localStorage.setItem("daily-report-auto-read", String(checked))
+    }
+
+    const tabItems = useMemo<{ value: string; label: string; content: ReactNode }[]>(
+        () => [
+            {
+                value: "list",
+                label: "📄 List",
+                content: <DailyReportList dailyReportItems={dailyReportItems} autoMarkRead={autoMarkRead} selectedReportHubId={selectedItemId} onSelectItem={setSelectedItemId} userId={userId} />,
+            },
+            {
+                value: "tree",
+                label: "🌳 Tree",
+                content: <div className="flex flex-1 items-center justify-center rounded-lg border border-slate-300 border-dashed bg-white p-6 text-slate-500 transition-colors dark:border-slate-700 dark:bg-slate-900/70 dark:text-slate-300">Tree ビューは現在準備中です</div>,
+            },
+            {
+                value: "detailList",
+                label: "📋 DetailList",
+                content: <DailyReportDetailList dailyReportItems={dailyReportItems} userId={userId} selectedItemId={selectedItemId} onSelectItem={setSelectedItemId} />,
+            },
+        ],
+        [dailyReportItems, autoMarkRead, selectedItemId, userId],
+    )
+
+    return (
+        <>
+            {renderHeader({
+                title,
+                annotation: (
+                    <div className="flex flex-wrap gap-2 leading-1">
+                        <span>総件数: {dailyReportItems.length.toLocaleString()} 件</span>
+                        <span>デバウンス: {DAILY_REPORT_FETCH_DEBOUNCE_MS} ms</span>
+                    </div>
+                ),
+            })}
+            <div className="h-full bg-slate-50 dark:bg-slate-500">
+                <div className="flex h-full w-full max-w-6xl flex-1 flex-col p-1">
+                    <Tabs defaultValue="list" className="flex h-full flex-1 flex-col">
+                        <div className="flex items-center justify-between gap-2 rounded-md bg-slate-50 p-1 transition-colors dark:bg-slate-900/70 dark:text-slate-200">
+                            <TabsList className="scrollbar-none flex w-full touch-pan-x flex-nowrap overflow-x-auto overflow-y-hidden bg-transparent p-0">
+                                {tabItems.map(({ value, label }) => (
+                                    <TabsTrigger key={value} value={value} className={tabTriggerClass}>
+                                        {label}
+                                    </TabsTrigger>
+                                ))}
+                            </TabsList>
+                            <div className="flex shrink-0 items-center space-x-1 px-2">
+                                <Button variant="ghost" size="icon" onClick={handleCreateReport} title="日報を作成">
+                                    <Plus className="h-4 w-4" />
+                                </Button>
+                                {showDevControls && (
+                                    <div className="hidden items-center space-x-1 sm:flex">
+                                        <Switch id="sse-mode" checked={isSseEnabled} onCheckedChange={toggleSse} className="scale-75" />
+                                        <Label htmlFor="sse-mode" className="cursor-pointer text-slate-500 text-xs">
+                                            購読
+                                        </Label>
+                                    </div>
+                                )}
+                                <Switch id="auto-read-mode" checked={autoMarkRead} onCheckedChange={handleAutoMarkReadChange} className="scale-75" />
+                                <Label htmlFor="auto-read-mode" className="cursor-pointer text-slate-500 text-xs">
+                                    自動既読
+                                </Label>
+                            </div>
+                        </div>
+                        {tabItems.map(({ value, content }) => (
+                            <TabsContent key={value} value={value} className="mt-0 flex h-full min-h-0 flex-1 flex-col">
+                                {content}
+                            </TabsContent>
+                        ))}
+                    </Tabs>
+                </div>
+            </div>
+        </>
+    )
+}

package/src/client/components/unread-indicator.tsx

@@ -0,0 +1,13 @@
+import { cn } from "../ui/cn"
+
+type UnreadIndicatorProps = {
+    className?: string
+}
+
+/**
+ * A simple blue dot indicator used to represent unread status.
+ * 未読状態を表すためのシンプルな青いドットインジケーター。
+ */
+export const UnreadIndicator = ({ className }: UnreadIndicatorProps) => {
+    return <span className={cn("text-blue-500", className)}>●</span>
+}

package/src/client/config-context.tsx

@@ -0,0 +1,129 @@
+/**
+ * Client-side DI configuration for the daily-report UI (paths, chrome slots, labels).
+ * 日報 UI のクライアント側 DI 設定 (パス・クローム差し込み・ラベル名) を提供するコンテキスト。
+ */
+import { createContext, type ReactNode, useContext, useMemo } from "react"
+
+/** ヘッダー描画スロットに渡される引数。 */
+export type DailyReportHeaderProps = {
+    title: string
+    annotation?: ReactNode
+}
+
+/**
+ * Display labels for the report detail/list fields, sections, and side-pane tabs.
+ * 日報の詳細/一覧カードのフィールド・セクション・タブ見出しの表示ラベル群。
+ *
+ * パッケージは中立な英語ラベルのみを既定として同梱し、ドメイン固有の表現 (言語・業務語彙) は
+ * 消費アプリが `fieldLabels` で注入する。これによりパッケージ本体が業務ドメイン知識を持たない。
+ */
+export type DailyReportFieldLabels = {
+    id: string
+    businessDate: string
+    author: string
+    visitTime: string
+    createdAt: string
+    updatedAt: string
+    updatedBy: string
+    category: string
+    categoryInfo: string
+    creationCategory: string
+    customer: string
+    subject: string
+    content: string
+    interviewers: string
+    comments: string
+    tabArticle: string
+    tabRelations: string
+    relationsEmpty: string
+}
+
+/** クライアント層の設定一式。 */
+export type DailyReportClientConfig = {
+    /** 画面タイトル (ヘッダーへ渡す)。 */
+    title: string
+    /** API ベースパス (例 `/daily_report/api`)。末尾スラッシュ無し。 */
+    apiBasePath: string
+    /** SSE エンドポイントパス (例 `/sse/daily_report/updates`)。 */
+    ssePath: string
+    /** 下書き状態を表すラベル名。UI の編集モード判定に使う。既定はプレースホルダーなので消費側で自アプリのラベル名へ上書きする。 */
+    draftLabelName: string
+    /** 詳細/一覧カードのフィールド見出しラベル。既定は中立英語。アプリが自ドメインの表記を注入する。 */
+    fieldLabels: DailyReportFieldLabels
+    /** ヘッダー描画スロット。アプリのヘッダーコンポーネントを差し込む。 */
+    renderHeader: (props: DailyReportHeaderProps) => ReactNode
+    /** 開発向けコントロール (SSE 購読トグル等) を表示するか。 */
+    showDevControls: boolean
+}
+
+/**
+ * Partial client-config override. `fieldLabels` may itself be partially overridden.
+ * クライアント設定の部分上書き型。`fieldLabels` も部分上書き可 (プロバイダーが深くマージする)。
+ */
+export type DailyReportClientConfigInput = Partial<Omit<DailyReportClientConfig, "fieldLabels">> & {
+    fieldLabels?: Partial<DailyReportFieldLabels>
+}
+
+/** 中立英語のフィールドラベル既定 (ドメイン非依存)。 */
+export const defaultDailyReportFieldLabels: DailyReportFieldLabels = {
+    id: "ID",
+    businessDate: "Business date",
+    author: "Author",
+    visitTime: "Visit time",
+    createdAt: "Created at",
+    updatedAt: "Updated at",
+    updatedBy: "Updated by",
+    category: "Category",
+    categoryInfo: "Category",
+    creationCategory: "Creation category",
+    customer: "Customer",
+    subject: "Subject",
+    content: "Content",
+    interviewers: "Attendees",
+    comments: "Comments",
+    tabArticle: "Overview",
+    tabRelations: "Related",
+    relationsEmpty: "No related view configured yet.",
+}
+
+/** 既定設定 (消費側は必要なフィールドのみ部分上書きする)。 */
+export const defaultDailyReportClientConfig: DailyReportClientConfig = {
+    title: "Daily Reports",
+    apiBasePath: "/daily_report/api",
+    ssePath: "/sse/daily_report/updates",
+    // 中立プレースホルダー。実運用のラベル名 (アプリ固有) は Provider / config prop で上書きする。
+    draftLabelName: "draft",
+    fieldLabels: defaultDailyReportFieldLabels,
+    renderHeader: ({ title, annotation }) => (
+        <header className="flex flex-wrap items-baseline justify-between gap-2 px-2 py-1">
+            <span className="text-nowrap text-slate-700 text-sm dark:text-slate-200">{title}</span>
+            {annotation ? <span className="text-slate-600 text-xs dark:text-slate-300">{annotation}</span> : null}
+        </header>
+    ),
+    showDevControls: false,
+}
+
+const DailyReportConfigContext = createContext<DailyReportClientConfig>(defaultDailyReportClientConfig)
+
+/**
+ * Provides a partial override of the daily-report client configuration.
+ * 日報クライアント設定の部分上書きを提供するプロバイダー。
+ */
+export const DailyReportConfigProvider = ({ config, children }: { config?: DailyReportClientConfigInput; children: ReactNode }) => {
+    // 部分設定を既定値へ浅くマージする (fieldLabels のみ 1 段深くマージして部分上書きを許す)
+    const merged = useMemo<DailyReportClientConfig>(
+        () => ({
+            ...defaultDailyReportClientConfig,
+            ...config,
+            fieldLabels: { ...defaultDailyReportFieldLabels, ...(config?.fieldLabels ?? {}) },
+        }),
+        [config],
+    )
+    return <DailyReportConfigContext.Provider value={merged}>{children}</DailyReportConfigContext.Provider>
+}
+
+/**
+ * Reads the daily-report client configuration (defaults when no provider).
+ * 日報クライアント設定を読む (プロバイダー未設置時は既定値)。
+ */
+export const useDailyReportConfig = (): DailyReportClientConfig => useContext(DailyReportConfigContext)