Add read-only production runtime audit

apps/web/app/_components/EvidencePanel.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import type { Citation } from "@duoc-thu/shared-types";
+import type { Citation, MonographPickerState } from "@duoc-thu/shared-types";
 import { CitationCard } from "@duoc-thu/ui";
 import { BookOpen, X, ShieldCheck, Layers, FileSearch } from "lucide-react";
 import { cn } from "@duoc-thu/ui";
@@ -10,6 +10,8 @@ interface EvidencePanelProps {
   citations: Citation[];
   activeCitationIndex: number | null;
   onSelectCitation: (citation: Citation, index: number) => void;
+  monographPicker?: MonographPickerState | null;
+  onToggleSection?: (sectionKey: string) => void;
   onClose?: () => void;
   className?: string;
 }
@@ -18,6 +20,8 @@ export function EvidencePanel({
   citations,
   activeCitationIndex,
   onSelectCitation,
+  monographPicker,
+  onToggleSection,
   onClose,
   className,
 }: EvidencePanelProps) {
@@ -36,13 +40,15 @@ export function EvidencePanel({
           </div>
           <div>
             <h3 className="m-0 text-xs font-bold text-txt-primary flex items-center gap-1.5">
-              <span>Bằng Chứng Dược Thư</span>
+              <span>{monographPicker ? "Thuộc tính thuốc" : "Bằng Chứng Dược Thư"}</span>
               <span className="rounded-full bg-accent-primary px-2 py-0.5 text-[0.65rem] font-extrabold text-txt-inverse">
-                {citations.length}
+                {monographPicker ? monographPicker.sections.length : citations.length}
               </span>
             </h3>
             <p className="m-0 text-[0.68rem] text-txt-muted">
-              Căn cứ chính thức Dược thư QGVN 2018
+              {monographPicker
+                ? "Chọn mục cần xem trong chuyên luận"
+                : "Căn cứ chính thức Dược thư QGVN 2018"}
             </p>
           </div>
         </div>
@@ -60,7 +66,47 @@ export function EvidencePanel({
 
       {/* Citations List */}
       <div className="flex-1 overflow-y-auto p-4 space-y-3">
-        {citations.length === 0 ? (
+        {monographPicker ? (
+          <>
+            <div className="rounded-2xl border border-border-accent bg-accent-soft/40 p-4">
+              <p className="m-0 text-sm font-extrabold text-accent-primary">
+                {monographPicker.drugName}
+              </p>
+              <p className="m-0 mt-1 text-[0.7rem] text-txt-muted">
+                Chuyên luận · Dược thư Quốc gia Việt Nam 2018
+              </p>
+            </div>
+            <div className="space-y-2">
+              {monographPicker.sections.map((section) => {
+                const checked = monographPicker.selectedSectionKeys.includes(
+                  section.sectionKey
+                );
+                return (
+                  <label
+                    key={section.sectionKey}
+                    className={cn(
+                      "flex cursor-pointer items-center gap-3 rounded-xl border px-3 py-2.5 text-xs transition-colors",
+                      checked
+                        ? "border-border-accent bg-accent-soft text-accent-primary font-bold"
+                        : "border-transparent text-txt-secondary hover:border-border-subtle hover:bg-surface-elevated"
+                    )}
+                  >
+                    <input
+                      type="checkbox"
+                      checked={checked}
+                      onChange={() => onToggleSection?.(section.sectionKey)}
+                      className="h-4 w-4 rounded border-border-active accent-[var(--accent-primary)]"
+                    />
+                    <span>{section.sectionTitle}</span>
+                  </label>
+                );
+              })}
+            </div>
+            <p className="m-0 rounded-xl bg-surface-elevated p-3 text-[0.7rem] leading-relaxed text-txt-muted">
+              Không chọn mục nào rồi nhấn Gửi tra cứu để hiển thị toàn bộ chuyên luận.
+            </p>
+          </>
+        ) : citations.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-64 text-center p-6 text-txt-muted space-y-3">
             <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-surface-elevated border border-border-subtle text-txt-muted">
               <BookOpen className="h-6 w-6" />