@aiquants/daily-report 0.1.1

package/src/client/components/daily-report-detail-list.tsx

@@ -0,0 +1,676 @@
+/**
+ * Virtual-scroll based detailed daily report view backed by fetcher-driven data hooks.
+ * useFetcher ベースのデータフックで日報詳細を提供する仮想スクロールビュー。
+ */
+
+import { type ScrollBarTapCircleOptions, type ScrollBarThumbOverlayRenderProps, tapScrollCircleSampleVisual, VirtualScroll, type VirtualScrollHandle } from "@aiquants/virtualscroll"
+
+/**
+ * Handle type augmented with E2E test helper methods.
+ * E2E テスト用ヘルパーメソッドで拡張されたハンドル型。
+ */
+type DailyReportVirtualScrollHandle = VirtualScrollHandle & {
+    findReportIndex: (id: number) => number
+    getReportItem: (index: number) => DailyReportItem | undefined
+    selectItem: (id: number) => void
+}
+
+import { Check, Star, Trash2 } from "lucide-react"
+import { type RefObject, useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { fallbackText, formatToIsoDate } from "../../shared/text-utils"
+import type { DailyReportDetail, DailyReportItem } from "../../shared/types"
+import { type DailyReportFieldLabels, useDailyReportConfig } from "../config-context"
+import { useDailyReportActionContext } from "../contexts/daily-report-action-context"
+import { useDailyReportDetail, useDailyReportPrefetch } from "../hooks/use-daily-report"
+import { useDailyReportComments } from "../hooks/use-daily-report-comments"
+import { useDynamicViewportHeight } from "../hooks/use-dynamic-viewport-height"
+import { EMPTY_ITEM, FAST_SCROLL_INERTIA_OPTIONS, FAST_SCROLL_WHEEL_MULTIPLIER, PREFETCH_LOOKAHEAD, PREFETCH_MAX_DATES, VIRTUAL_SCROLL_OVERSCAN_COUNT } from "../utils/constants"
+import { BusinessDayThumbOverlay } from "./business-day-thumb-overlay"
+import { DailyReportCommentForm, DailyReportCommentList } from "./daily-report-comment-section"
+import { DailyReportEditForm } from "./daily-report-edit-form"
+import { UnreadIndicator } from "./unread-indicator"
+
+/**
+ * Observes container height changes and reports measured values upstream.
+ * コンテナの高さ変化を監視し測定結果を親へ通知するフック。
+ */
+const useReportItemHeightObserver = (ref: RefObject<HTMLDivElement | null>, itemId: number, onHeightMeasured: (id: number, height: number) => void) => {
+    useEffect(() => {
+        const element = ref.current
+        if (!element) return
+
+        const resizeObserver = new ResizeObserver(() => {
+            onHeightMeasured(itemId, element.offsetHeight)
+        })
+        resizeObserver.observe(element)
+        return () => resizeObserver.disconnect()
+    }, [itemId, onHeightMeasured, ref])
+}
+
+/**
+ * Wraps a daily report item row, observing its height and providing a stable test identifier.
+ * 日報アイテム行をラップし、高さを監視するとともに安定したテスト識別子を提供するコンポーネント。
+ */
+const DailyReportDetailRow = ({ itemId, onHeightMeasured, children }: { itemId: number; onHeightMeasured: (id: number, height: number) => void; children: React.ReactNode }) => {
+    const elementRef = useRef<HTMLDivElement | null>(null)
+    useReportItemHeightObserver(elementRef, itemId, onHeightMeasured)
+    return (
+        <div ref={elementRef} className="px-2 pb-3" data-daily-report-button={itemId}>
+            {children}
+        </div>
+    )
+}
+
+/**
+ * Formats interviewer labels with optional affiliation.
+ * 面談者情報を所属付きのラベル文字列に整形する関数。
+ */
+const formatInterviewerLabel = (interviewer: DailyReportDetail["interviewers"][number]): string => {
+    if (interviewer.affiliation?.trim()) {
+        return `${interviewer.name}（${interviewer.affiliation}）`
+    }
+    return interviewer.name
+}
+
+type DailyReportDetailListProps = {
+    dailyReportItems: DailyReportItem[]
+    userId?: string | null
+    selectedItemId?: number | null
+    onSelectItem?: (id: number | null) => void
+}
+
+/**
+ * Daily report detail cards rendered with dynamic height virtual scroll.
+ * 動的高さの仮想スクロールで日報詳細カードを描画するコンポーネント。
+ */
+export const DailyReportDetailList = ({ dailyReportItems, userId, selectedItemId, onSelectItem }: DailyReportDetailListProps) => {
+    const [itemHeights, setItemHeights] = useState<Map<number, number>>(new Map())
+    const scrollContainerRef = useRef<HTMLDivElement | null>(null)
+    const virtualScrollRef = useRef<VirtualScrollHandle>(null)
+    const { viewportHeight, updateViewportHeight } = useDynamicViewportHeight(scrollContainerRef, { enableMutationObserver: true })
+    const prefetchDailyReportByDate = useDailyReportPrefetch()
+    const [overlayLabel, setOverlayLabel] = useState<string>("")
+    const [isWheelScrollActive, setIsWheelScrollActive] = useState(false)
+    const wheelResetTimerRef = useRef<number | null>(null)
+    const scrollEndTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+    const dailyReportItemsRef = useRef(dailyReportItems)
+    dailyReportItemsRef.current = dailyReportItems
+
+    // 同一 selectedItemId かつ同一 index への重複スクロールを防止する ref
+    const lastScrolledRef = useRef<{ id: number; index: number } | null>(null)
+
+    useEffect(() => {
+        if (selectedItemId != null && virtualScrollRef.current) {
+            const index = dailyReportItems.findIndex((item) => item.reportHubId === selectedItemId)
+            if (index !== -1) {
+                // ID もインデックスも同じなら再スクロール不要
+                if (lastScrolledRef.current?.id === selectedItemId && lastScrolledRef.current?.index === index) return
+                virtualScrollRef.current.scrollToIndex(index, { align: "top" })
+                lastScrolledRef.current = { id: selectedItemId, index }
+            }
+        } else {
+            lastScrolledRef.current = null
+        }
+    }, [selectedItemId, dailyReportItems])
+
+    // onSelectItem の最新参照を保持する ref (useEffect 依存配列を不要にする)
+    const onSelectItemRef = useRef(onSelectItem)
+    onSelectItemRef.current = onSelectItem
+
+    useEffect(() => {
+        if (virtualScrollRef.current) {
+            const el = document.querySelector(".test-daily-report-detail-list")
+            if (el) {
+                const handle = virtualScrollRef.current
+                const extendedHandle: DailyReportVirtualScrollHandle = Object.assign({}, handle, {
+                    findReportIndex: (id: number) => dailyReportItemsRef.current.findIndex((item) => item.reportHubId === id),
+                    getReportItem: (index: number) => dailyReportItemsRef.current[index],
+                    selectItem: (id: number) => onSelectItemRef.current?.(id),
+                })
+                ;(el as Element & { __virtualScroll: DailyReportVirtualScrollHandle }).__virtualScroll = extendedHandle
+            }
+        }
+    })
+
+    const itemCount = dailyReportItems.length
+
+    const getItem = useCallback(
+        (index: number): DailyReportItem => {
+            if (index >= itemCount) return EMPTY_ITEM
+            return dailyReportItems[index]
+        },
+        [dailyReportItems, itemCount],
+    )
+
+    const schedulePrefetchForRange = useCallback(
+        (fromIndex: number, toIndex: number) => {
+            if (itemCount === 0) return
+            const boundedFrom = Math.max(0, fromIndex)
+            const boundedTo = Math.min(itemCount - 1, toIndex)
+            if (boundedFrom > boundedTo) return
+
+            const businessDates = new Set<string>()
+            for (let index = boundedFrom; index <= boundedTo; index++) {
+                const candidate = getItem(index)
+                if (candidate.businessDate) businessDates.add(candidate.businessDate)
+                if (businessDates.size >= PREFETCH_MAX_DATES) break
+            }
+            businessDates.forEach((date) => {
+                prefetchDailyReportByDate(date)
+            })
+        },
+        [getItem, itemCount, prefetchDailyReportByDate],
+    )
+
+    /**
+     * Handles visible range changes to update overlay label and schedule prefetching.
+     * 表示範囲の変更を処理し、オーバーレイラベルの更新とプリフェッチのスケジュールを行う。
+     */
+    const handleRangeChange = useCallback(
+        ({ renderingStartIndex, renderingEndIndex, visibleStartIndex }: { renderingStartIndex: number; renderingEndIndex: number; visibleStartIndex: number }) => {
+            if (itemCount === 0) return
+            const firstVisibleItem = getItem(visibleStartIndex)
+            if (firstVisibleItem?.businessDate) {
+                setOverlayLabel(formatToIsoDate(firstVisibleItem.businessDate))
+            }
+            schedulePrefetchForRange(renderingStartIndex, renderingEndIndex)
+            schedulePrefetchForRange(renderingEndIndex + 1, renderingEndIndex + PREFETCH_LOOKAHEAD)
+            schedulePrefetchForRange(renderingStartIndex - PREFETCH_LOOKAHEAD, renderingStartIndex - 1)
+        },
+        [getItem, itemCount, schedulePrefetchForRange],
+    )
+
+    const handleScroll = useCallback(() => {
+        const container = scrollContainerRef.current
+        if (!container) return
+
+        if (!container.classList.contains("is-scrolling")) {
+            container.classList.add("is-scrolling")
+        }
+
+        if (scrollEndTimerRef.current) {
+            clearTimeout(scrollEndTimerRef.current)
+        }
+
+        scrollEndTimerRef.current = setTimeout(() => {
+            if (container) {
+                container.classList.remove("is-scrolling")
+            }
+            scrollEndTimerRef.current = null
+        }, 150)
+    }, [])
+
+    const renderThumbOverlay = useCallback((props: ScrollBarThumbOverlayRenderProps) => <BusinessDayThumbOverlay {...props} label={overlayLabel} isWheelScrollActive={isWheelScrollActive} />, [overlayLabel, isWheelScrollActive])
+
+    /**
+     * Sets up wheel event listener to toggle overlay visibility.
+     * ホイールイベントリスナーを設定し、オーバーレイの表示状態を切り替える。
+     */
+    useEffect(() => {
+        const el = scrollContainerRef.current
+        if (!el) return
+        const onWheel = () => {
+            setIsWheelScrollActive(true)
+            if (wheelResetTimerRef.current) clearTimeout(wheelResetTimerRef.current)
+            wheelResetTimerRef.current = window.setTimeout(() => {
+                setIsWheelScrollActive(false)
+                wheelResetTimerRef.current = null
+            }, 240)
+        }
+        el.addEventListener("wheel", onWheel, { passive: true })
+        return () => {
+            el.removeEventListener("wheel", onWheel)
+            if (wheelResetTimerRef.current) clearTimeout(wheelResetTimerRef.current)
+        }
+    }, [])
+
+    const updateItemHeight = useCallback((id: number, height: number) => {
+        setItemHeights((prev) => {
+            if (prev.get(id) === height) return prev
+            const newMap = new Map(prev)
+            newMap.set(id, height)
+            return newMap
+        })
+        if (virtualScrollRef.current) {
+            const index = dailyReportItemsRef.current.findIndex((item) => item.reportHubId === id)
+            if (index !== -1) {
+                virtualScrollRef.current.updateItemSize(index, height)
+            }
+        }
+    }, [])
+
+    const getItemHeight = useCallback(
+        (index: number) => {
+            const item = getItem(index)
+            return itemHeights.get(item.reportHubId) || 350
+        },
+        [getItem, itemHeights],
+    )
+
+    const getItemKey = useCallback(
+        (index: number) => {
+            const item = getItem(index)
+            return item.reportHubId
+        },
+        [getItem],
+    )
+
+    const tapScrollCircleOptions = useMemo<ScrollBarTapCircleOptions>(() => ({ enabled: true, renderVisual: tapScrollCircleSampleVisual }), [])
+
+    /**
+     * Updates viewport height when item count changes.
+     * アイテム数変更時にビューポート高さを更新する。
+     */
+    useEffect(() => {
+        if (itemCount >= 0) updateViewportHeight()
+    }, [itemCount, updateViewportHeight])
+
+    /**
+     * Schedules initial prefetch when items are loaded.
+     * アイテム読み込み時に初期プリフェッチをスケジュールする。
+     */
+    useEffect(() => {
+        if (itemCount === 0) return
+        schedulePrefetchForRange(0, Math.min(itemCount - 1, PREFETCH_LOOKAHEAD))
+    }, [itemCount, schedulePrefetchForRange])
+
+    const handleCommentAdded = useCallback((itemId: number) => {
+        const index = dailyReportItemsRef.current.findIndex((item) => item.reportHubId === itemId)
+        if (index >= 0) {
+            setTimeout(() => virtualScrollRef.current?.scrollToIndex(index, { align: "bottom" }), 300)
+        }
+    }, [])
+
+    const renderItem = useCallback((item: DailyReportItem) => <DailyReportItemContainer key={item.reportHubId} item={item} onHeightMeasured={updateItemHeight} onCommentAdded={handleCommentAdded} userId={userId} />, [updateItemHeight, handleCommentAdded, userId])
+
+    return (
+        <>
+            <div ref={scrollContainerRef} className="flex min-h-0 flex-1 flex-col">
+                <VirtualScroll
+                    ref={virtualScrollRef}
+                    itemCount={itemCount}
+                    getItem={getItem}
+                    getItemKey={getItemKey}
+                    getItemHeight={getItemHeight}
+                    viewportSize={viewportHeight}
+                    overscanCount={VIRTUAL_SCROLL_OVERSCAN_COUNT}
+                    scrollBarOptions={{
+                        width: 8,
+                        tapScrollCircleOptions: tapScrollCircleOptions,
+                        renderThumbOverlay: renderThumbOverlay,
+                    }}
+                    behaviorOptions={{
+                        wheelSpeedMultiplier: FAST_SCROLL_WHEEL_MULTIPLIER,
+                        inertiaOptions: FAST_SCROLL_INERTIA_OPTIONS,
+                    }}
+                    onRangeChange={handleRangeChange}
+                    onScroll={handleScroll}
+                    className="t-detail-list test-daily-report-detail-list relative w-full">
+                    {renderItem}
+                </VirtualScroll>
+            </div>
+            {itemCount === 0 && (
+                <div className="py-8 text-center">
+                    <p className="text-slate-500">データがありません</p>
+                </div>
+            )}
+        </>
+    )
+}
+
+/**
+ * Loading skeleton for the virtual scroll detail entry.
+ * 仮想スクロール詳細行の読み込み中スケルトン表示。
+ */
+const SkeletonReportItem = () => (
+    <div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
+        <div className="mb-4 flex flex-wrap gap-2">
+            <div className="h-6 w-20 rounded-full bg-slate-200"></div>
+            <div className="h-6 w-24 rounded-full bg-slate-200"></div>
+            <div className="h-6 w-24 rounded-full bg-slate-200"></div>
+            <div className="h-6 w-28 rounded-full bg-slate-200"></div>
+        </div>
+        <div className="mb-3 grid gap-3 md:grid-cols-[minmax(0,1fr)_220px]">
+            <div className="space-y-3">
+                <div className="h-5 w-40 rounded bg-slate-200"></div>
+                <div className="h-5 w-56 rounded bg-slate-200"></div>
+                <div className="h-24 rounded-lg bg-slate-200"></div>
+            </div>
+            <div className="rounded-xl bg-slate-100 p-3">
+                <div className="mb-2 h-4 w-24 rounded bg-slate-200"></div>
+                <div className="mb-2 h-4 w-28 rounded bg-slate-200"></div>
+                <div className="h-4 w-32 rounded bg-slate-200"></div>
+            </div>
+        </div>
+        <div className="space-y-3">
+            <div className="h-4 w-24 rounded bg-slate-200"></div>
+            <div className="flex flex-wrap gap-2">
+                <div className="h-6 w-16 rounded-full bg-slate-200"></div>
+                <div className="h-6 w-16 rounded-full bg-slate-200"></div>
+                <div className="h-6 w-16 rounded-full bg-slate-200"></div>
+            </div>
+            <div className="space-y-2">
+                <div className="h-16 rounded-lg bg-slate-200"></div>
+                <div className="h-16 rounded-lg bg-slate-200"></div>
+            </div>
+        </div>
+    </div>
+)
+
+/**
+ * Chooses the appropriate daily report item representation based on fetch state.
+ * フェッチ状態に応じて日報アイテムの表示コンポーネントを選択する関数。
+ */
+const DailyReportItemContainer = ({ item, onHeightMeasured, onCommentAdded, userId }: { item: DailyReportItem; onHeightMeasured: (id: number, height: number) => void; onCommentAdded?: (itemId: number) => void; userId?: string | null }) => {
+    const { report, error, isLoading, isRefetching } = useDailyReportDetail(item.reportHubId, item.businessDate)
+    const { removeStaleItem } = useDailyReportActionContext()
+    const { draftLabelName } = useDailyReportConfig()
+    const [isEditing, setIsEditing] = useState(false)
+    const [hasBypassedAutoEdit, setHasBypassedAutoEdit] = useState(false)
+    // 自動編集モード (ドラフト検出による自動遷移) かどうかを追跡
+    const autoEditingRef = useRef(false)
+
+    // フェッチが一度でも試行されたかを追跡する ref
+    const hasEverFetched = useRef(false)
+    if (isRefetching) hasEverFetched.current = true
+
+    // フェッチ完了後に report が null → stale アイテムとしてリストから除去する安全弁
+    // 外部リソース同期: useDailyReportDetail のフェッチ結果に反応する
+    useEffect(() => {
+        if (!(report || isLoading || isRefetching || error) && hasEverFetched.current && item.reportHubId > 0) {
+            removeStaleItem(item.reportHubId)
+        }
+    }, [report, isLoading, isRefetching, error, item.reportHubId, removeStaleItem])
+
+    const isDraft = report?.labels.some((l) => l.name === draftLabelName)
+    const isMine = userId && report?.userId === userId
+
+    // ドラフトレポートの自動編集モード制御
+    // - ドラフト状態かつ自分のレポート: 自動的にエディタモード
+    // - SSE でドラフト→公開に遷移: 自動編集モードの場合のみビューモードへ解除
+    useEffect(() => {
+        if (report && isMine && isDraft && !isEditing && !hasBypassedAutoEdit) {
+            setIsEditing(true)
+            autoEditingRef.current = true
+        } else if (report && !isDraft && isEditing && autoEditingRef.current) {
+            // SSE で下書き→公開に遷移: 自動編集モードの場合のみビューモードへ
+            setIsEditing(false)
+            autoEditingRef.current = false
+        }
+    }, [report, isMine, isDraft, isEditing, hasBypassedAutoEdit])
+
+    return (
+        <DailyReportDetailRow itemId={item.reportHubId} onHeightMeasured={onHeightMeasured}>
+            {error ? (
+                <DailyReportError itemId={item.reportHubId} />
+            ) : !report ? (
+                <SkeletonReportItem />
+            ) : isEditing ? (
+                <DailyReportEditForm
+                    report={report}
+                    onCancel={() => {
+                        setIsEditing(false)
+                        setHasBypassedAutoEdit(true)
+                    }}
+                    onPublishSuccess={() => {
+                        setIsEditing(false)
+                    }}
+                />
+            ) : (
+                <DailyReportResolvedItem item={item} report={report} onCommentAdded={onCommentAdded} userId={userId} onDoubleClick={isMine ? () => setIsEditing(true) : undefined} />
+            )}
+        </DailyReportDetailRow>
+    )
+}
+
+/**
+ * Renders the header section of a daily report.
+ * 日報のヘッダー部分を描画するコンポーネント。
+ */
+const DailyReportHeader = ({
+    report,
+    isRead,
+    isStarred,
+    isMine,
+    onToggleRead,
+    onToggleStar,
+    onDelete,
+    visitTimeDisplay,
+    categoryLabel,
+    fieldLabels,
+}: {
+    report: DailyReportDetail
+    isRead: boolean
+    isStarred: boolean
+    isMine: boolean
+    onToggleRead: () => void
+    onToggleStar: () => void
+    onDelete: () => void
+    visitTimeDisplay: string
+    categoryLabel: string
+    fieldLabels: DailyReportFieldLabels
+}) => (
+    <div className="flex flex-wrap items-center gap-2 font-medium text-slate-600 text-xs">
+        <button
+            type="button"
+            onClick={onToggleRead}
+            className="flex h-6 w-6 items-center justify-center rounded-full transition-colors hover:bg-slate-200 focus:outline-none dark:hover:bg-slate-700"
+            title={isRead ? "未読にする" : "既読にする"}
+            data-detail-read-button={report.reportHubId}>
+            {isRead ? <Check className="h-3.5 w-3.5 text-blue-500" /> : <UnreadIndicator className="text-xs" />}
+        </button>
+        <button
+            type="button"
+            onClick={onToggleStar}
+            className="flex h-6 w-6 items-center justify-center rounded-full transition-colors hover:bg-slate-200 focus:outline-none dark:hover:bg-slate-700"
+            title={isStarred ? "スターを外す" : "スターを付ける"}
+            data-detail-star-button={report.reportHubId}>
+            {isStarred ? <Star className="h-3.5 w-3.5 fill-yellow-400 text-yellow-400" /> : <Star className="h-3.5 w-3.5 text-slate-300 dark:text-slate-500" />}
+        </button>
+        {isMine && (
+            <button type="button" onClick={onDelete} data-detail-delete-button={report.reportHubId} className="text-lg leading-none transition-transform focus:outline-none active:scale-125" title="削除する">
+                <Trash2 className="h-4 w-4 text-slate-300 hover:text-red-500" />
+            </button>
+        )}
+        <span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-blue-50 px-3 py-1 font-semibold text-blue-700 text-xs">
+            <span className="text-[10px] text-blue-500 uppercase tracking-wide">{fieldLabels.id}</span>
+            {report.reportHubId}
+        </span>
+        <span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-slate-100 px-3 py-1">
+            <span className="text-[10px] text-slate-400 uppercase tracking-wide">{fieldLabels.businessDate}</span>
+            {formatToIsoDate(report.date)}
+        </span>
+        <span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-slate-100 px-3 py-1">
+            <span className="text-[10px] text-slate-400 uppercase tracking-wide">{fieldLabels.author}</span>
+            {fallbackText(report.employeeName)}
+        </span>
+        <span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-slate-100 px-3 py-1">
+            <span className="text-[10px] text-slate-400 uppercase tracking-wide">{fieldLabels.visitTime}</span>
+            {visitTimeDisplay || "-"}
+        </span>
+        <span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-slate-100 px-3 py-1">
+            <span className="text-[10px] text-slate-400 uppercase tracking-wide">{fieldLabels.updatedAt}</span>
+            {formatToIsoDate(report.updatedAt)}
+        </span>
+        {categoryLabel && (
+            <span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-amber-100 px-3 py-1 text-amber-700">
+                <span className="text-[10px] text-amber-500 uppercase tracking-wide">{fieldLabels.category}</span>
+                {categoryLabel}
+            </span>
+        )}
+    </div>
+)
+
+/**
+ * Renders the side panel with detailed metadata.
+ * 詳細なメタデータを表示するサイドパネルを描画するコンポーネント。
+ */
+const MetadataPanel = ({ report, visitTimeDisplay, categoryLabel, fieldLabels }: { report: DailyReportDetail; visitTimeDisplay: string; categoryLabel: string; fieldLabels: DailyReportFieldLabels }) => (
+    <div className="flex flex-col gap-3 rounded-xl bg-slate-100 p-4 text-slate-600 text-xs">
+        <div className="flex flex-col gap-1">
+            <span className="font-semibold text-[10px] text-slate-500 uppercase tracking-wide">{fieldLabels.author}</span>
+            <span className="text-slate-700 text-sm">{fallbackText(report.author)}</span>
+        </div>
+        <div className="flex flex-col gap-1">
+            <span className="font-semibold text-[10px] text-slate-500 uppercase tracking-wide">{fieldLabels.createdAt}</span>
+            <span className="text-slate-700 text-sm">{formatToIsoDate(report.createdAt)}</span>
+        </div>
+        <div className="flex flex-col gap-1">
+            <span className="font-semibold text-[10px] text-slate-500 uppercase tracking-wide">{fieldLabels.updatedBy}</span>
+            <span className="text-slate-700 text-sm">{fallbackText(report.updatedBy)}</span>
+        </div>
+        <div className="flex flex-col gap-1">
+            <span className="font-semibold text-[10px] text-slate-500 uppercase tracking-wide">{fieldLabels.updatedAt}</span>
+            <span className="text-slate-700 text-sm">{formatToIsoDate(report.updatedAt)}</span>
+        </div>
+        <div className="flex flex-col gap-1">
+            <span className="font-semibold text-[10px] text-slate-500 uppercase tracking-wide">{fieldLabels.businessDate}</span>
+            <span className="text-slate-700 text-sm">{formatToIsoDate(report.date)}</span>
+        </div>
+        {visitTimeDisplay && (
+            <div className="flex flex-col gap-1">
+                <span className="font-semibold text-[10px] text-slate-500 uppercase tracking-wide">{fieldLabels.visitTime}</span>
+                <span className="text-slate-700 text-sm">{visitTimeDisplay}</span>
+            </div>
+        )}
+        {categoryLabel && (
+            <div className="flex flex-col gap-1">
+                <span className="font-semibold text-[10px] text-slate-500 uppercase tracking-wide">{fieldLabels.categoryInfo}</span>
+                <span className="text-slate-700 text-sm">{categoryLabel}</span>
+            </div>
+        )}
+    </div>
+)
+
+/**
+ * Renders the resolved daily report detail card with metadata and content.
+ * 解決済みの日報詳細カードをメタデータと内容込みで描画する関数。
+ */
+const DailyReportResolvedItem = ({ item, report, onCommentAdded, userId, onDoubleClick }: { item: DailyReportItem; report: DailyReportDetail; onCommentAdded?: (itemId: number) => void; userId?: string | null; onDoubleClick?: () => void }) => {
+    const formContainerRef = useRef<HTMLDivElement>(null)
+    // 表示中ユーザーはアクションコンテキストから取得する (root loader 非依存)
+    const { toggleStar, toggleRead, pendingStarUpdates, pendingReadUpdates, deleteReport, user } = useDailyReportActionContext()
+    const { uiComments, handleAddComment, handleDeleteComment, pendingDeleteId, setPendingDeleteId, resolvedIdMap } = useDailyReportComments(report, user, userId)
+    const { fieldLabels } = useDailyReportConfig()
+
+    const handleAddCommentWrapper = async (content: string) => {
+        await handleAddComment(content)
+        onCommentAdded?.(item.reportHubId)
+    }
+
+    const isStarred = pendingStarUpdates.current.has(report.reportHubId) ? (pendingStarUpdates.current.get(report.reportHubId) ?? false) : report.isStarred
+    const isRead = pendingReadUpdates.current.has(report.reportHubId) ? (pendingReadUpdates.current.get(report.reportHubId) ?? false) : report.isRead
+    const isMine = !!(userId && report.userId === userId)
+
+    const handleToggleRead = async () => {
+        try {
+            await toggleRead(report.reportHubId, !isRead, report.date ?? "")
+        } catch {}
+    }
+
+    const handleToggleStar = async () => {
+        try {
+            await toggleStar(report.reportHubId, !isStarred, report.date ?? "")
+        } catch {}
+    }
+
+    const handleDelete = async () => {
+        if (!confirm("本当に削除しますか？")) return
+        await deleteReport(report.reportHubId, report.date ?? "")
+    }
+
+    const normalizedContent = useMemo(() => (report.content ? report.content.replace(/<br\s*\/??\s*>/gi, "\n").trim() : ""), [report.content])
+    const visitTimeDisplay = useMemo(() => {
+        const from = report.visitTimeFrom?.trim()
+        const to = report.visitTimeTo?.trim()
+        return from && to ? `${from} - ${to}` : from || to || ""
+    }, [report.visitTimeFrom, report.visitTimeTo])
+    const categoryLabel = useMemo(() => {
+        const labels: string[] = []
+        if (report.category?.trim()) labels.push(`${fieldLabels.category}: ${report.category}`)
+        if (report.creationCategory?.trim()) labels.push(`${fieldLabels.creationCategory}: ${report.creationCategory}`)
+        return labels.join(" / ")
+    }, [report.category, report.creationCategory, fieldLabels.category, fieldLabels.creationCategory])
+
+    return (
+        // biome-ignore lint/a11y/noStaticElementInteractions: Double click to edit feature
+        <div
+            onDoubleClick={onDoubleClick}
+            className={`flex h-full w-full flex-col rounded-2xl border bg-white p-4 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:border-blue-300 hover:shadow-lg dark:border-slate-700 dark:bg-slate-900/70 ${!isRead ? "border-l-4 border-l-blue-500" : ""}`}>
+            <div className="flex flex-col gap-4">
+                <DailyReportHeader
+                    report={report}
+                    isRead={isRead}
+                    isStarred={isStarred}
+                    isMine={isMine}
+                    onToggleRead={handleToggleRead}
+                    onToggleStar={handleToggleStar}
+                    onDelete={handleDelete}
+                    visitTimeDisplay={visitTimeDisplay}
+                    categoryLabel={categoryLabel}
+                    fieldLabels={fieldLabels}
+                />
+                <div className="grid gap-4 md:grid-cols-[minmax(0,1fr)_240px]">
+                    <div className="flex flex-col gap-4">
+                        <div className="grid gap-3 sm:grid-cols-2">
+                            <div className="flex flex-col gap-1">
+                                <span className="font-semibold text-slate-500 text-xs uppercase tracking-wide">{fieldLabels.customer}</span>
+                                <span className="font-semibold text-base text-slate-900">{fallbackText(report.customerName)}</span>
+                            </div>
+                            <div className="flex flex-col gap-1">
+                                <span className="font-semibold text-slate-500 text-xs uppercase tracking-wide">{fieldLabels.subject}</span>
+                                <span className="text-slate-700 text-sm">{fallbackText(report.subject)}</span>
+                            </div>
+                        </div>
+                        {normalizedContent && (
+                            <div className="flex flex-col gap-2">
+                                <span className="font-semibold text-slate-500 text-xs uppercase tracking-wide">{fieldLabels.content}</span>
+                                <div className="whitespace-pre-wrap rounded-xl bg-slate-50 p-3 text-slate-700 text-sm leading-relaxed">{normalizedContent}</div>
+                            </div>
+                        )}
+                        {report.interviewers.length > 0 && (
+                            <div className="flex flex-col gap-2">
+                                <span className="font-semibold text-slate-500 text-xs uppercase tracking-wide">{fieldLabels.interviewers}</span>
+                                <ul className="flex flex-wrap gap-2">
+                                    {report.interviewers.map((interviewer) => (
+                                        <li key={`${interviewer.name}-${interviewer.affiliation || ""}`} className="rounded-full bg-slate-100 px-3 py-1 text-slate-600 text-xs">
+                                            {formatInterviewerLabel(interviewer)}
+                                        </li>
+                                    ))}
+                                </ul>
+                            </div>
+                        )}
+                        {uiComments.length > 0 && (
+                            <div className="flex flex-col gap-2">
+                                <span className="font-semibold text-slate-500 text-xs uppercase tracking-wide">{fieldLabels.comments}</span>
+                                <DailyReportCommentList
+                                    comments={uiComments}
+                                    reportHubId={report.reportHubId}
+                                    businessDate={report.date ?? ""}
+                                    onDeleteComment={handleDeleteComment}
+                                    pendingDeleteId={pendingDeleteId}
+                                    onPendingDeleteIdChange={setPendingDeleteId}
+                                    resolvedIdMap={resolvedIdMap}
+                                />
+                            </div>
+                        )}
+                        <div className="mt-auto" ref={formContainerRef}>
+                            <DailyReportCommentForm reportHubId={report.reportHubId} businessDate={report.date ?? ""} onAddComment={handleAddCommentWrapper} />
+                        </div>
+                    </div>
+                    <MetadataPanel report={report} visitTimeDisplay={visitTimeDisplay} categoryLabel={categoryLabel} fieldLabels={fieldLabels} />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+/**
+ * Displays an error banner when daily report detail retrieval fails.
+ * 日報詳細の取得に失敗した際のエラーバナーを表示する関数。
+ */
+const DailyReportError = ({ itemId }: { itemId: number }) => (
+    <div className="rounded-2xl border border-red-200 bg-red-50 p-4 text-red-700 text-sm">
+        <p>日報 {itemId.toLocaleString()} の読み込みに失敗しました。</p>
+    </div>
+)