// bu/v7a2.jsx — 案B スプリットビューのブラッシュアップ版
// 確認ポイントは案Bの縦並び行構造のまま、行頭に色付きアイコンチップを追加して
// キャプチャの色味に寄せる（低下=ローズ/上昇=グリーン/経過日数=ブルー/日報=バイオレット）。collab連携ラベルは非表示。
const { AppFrame, PageBar, Face, Icon } = window;
const { P, Q, AreaSpark, ScoreRing, DeltaChip } = window.V4;
const { CardB, HeadB, RailSec, CommentBody, RecordBody, SurveyBody, ThreadBody, LTH } = window.V7;
// キャプチャ寄せの鮮やかトーン
const C2 = {
down: '#e5495f', downBg: '#fdedf0',
up: '#17a05e', upBg: '#e9f7f0',
warn: '#c1860c', warnBg: '#fdf3d9',
sig: '#3b7ce0', sigBg: '#e9f1fd',
doc: '#8f6fe8', docBg: '#f1edfd',
};
// 本文テキスト（3行程度の分量・折りたたみなしで全文表示）
const TXT2 = {
comment: '6月は案件の切り替えがあり、前半はキャッチアップに時間がかかりました。後半は落ち着いてきましたが、新しいチームでの進め方にまだ慣れていない部分があります。次の目標について、資格学習の時間の確保も含めて相談したいです。',
commentPrev: '5月は特に大きな課題はありません。次の目標について相談したいです。',
report: '5月の1on1で目標進捗と困りごとをヒアリング。案件切り替えに伴う引き継ぎ状況を確認し、負荷が高い期間が続いていたためタスクの優先順位を一緒に整理した。次回までの小さな改善アクション（朝会での相談枠の活用）を合意。',
memo: '表情はやや疲れ気味。次回は資格学習の話題を先にこちらから振る。',
};
// 本人コメント：カード下部の灰色帯＋白の吹き出し
function CommentBand2({ th, radius = 13 }) {
return (
本人コメント
前回のコメントを見る
{TXT2.commentPrev}
);
}
// 前回1on1記録：開閉式カード（見出しクリックで本文を開閉）
function RecordCard2({ th }) {
const [open, setOpen] = React.useState(false);
return (
{open && }
);
}
// アンケート詳細：開閉式カード（閉じている間は「変化あり」件数を色付きで表示）
function SurveyCard2({ th }) {
const [open, setOpen] = React.useState(false);
const nChanged = Q.survey.filter((s) => s.cur !== s.prev).length;
const nDown = Q.survey.filter((s) => s.cur < s.prev).length;
const badgeC = nDown > 0 ? { fg: P.down, bg: 'rgba(214,66,89,.09)', line: 'rgba(214,66,89,.28)' } : { fg: P.up, bg: 'rgba(31,146,90,.09)', line: 'rgba(31,146,90,.28)' };
return (
{open &&
}
{open && }
);
}
// 前回1on1記録：本文全文＋自分用メモはフッター扱い
function RecordBody2({ th }) {
return (
<>
{TXT2.report}
);
}
// 行頭の色付きアイコンチップ
function IconChip2({ tone, bg, children }) {
return (
{children}
);
}
const ChipIcons = {
trendDown: ,
trendUp: ,
calendar: ,
doc: ,
};
// 確認ポイント行：案Bの縦並び行構造＋色付きアイコンチップ
function CheckRowCap({ item, idx, last }) {
const border = last ? 'none' : `1px solid ${P.line}`;
if (item.kind === 'signal') {
const isDays = item.reason.includes('未実施');
// ネガティブ=赤 / ポジティブ=緑（意味で判定）
const positive = /上昇|改善|向上|回復/.test(item.reason);
const tone = positive ? C2.up : C2.down;
const bg = positive ? C2.upBg : C2.downBg;
// 未実施アラートの“語り”はここに一本化（レール側は事実のみ）
const label = isDays ? `前回1on1から1か月以上経過（${Q.last.daysAgo}日）` : item.q;
const note = isDays ? '1on1未実施期間' : item.reason;
return (
{isDays ? ChipIcons.calendar : ChipIcons.doc}
{label}
{note}
);
}
const delta = item.cur - item.prev;
const tone = delta < 0 ? C2.down : C2.up;
return (
{delta < 0 ? ChipIcons.trendDown : ChipIcons.trendUp}
{item.prev}
→
{item.cur}
);
}
// 総合スコアの部署／班平均との比較（本人スコアとの差分を控えめに併記）
function AvgCompareRail({ score, deptAvg, teamAvg }) {
const rows = [
{ label: '2部 平均', avg: deptAvg },
{ label: 'B班 平均', avg: teamAvg },
];
return (
{rows.map((r, i) => {
const diff = Math.round((score - r.avg) * 10) / 10;
const up = diff > 0, flat = diff === 0;
const tone = flat ? P.faint : up ? P.up : P.down;
return (
{r.label}
{r.avg.toFixed(1)}
{flat ? '±0.0' : `${up ? '+' : '−'}${Math.abs(diff).toFixed(1)}`}
);
})}
{/* ═ 判断レール（左固定・案Bと同一） ═ */}
{Q.member.name}
{Q.member.dept} ・ {Q.member.role}
勤続 {Q.member.tenure}
総合スコア }>
{Q.summary.score}
/ 5.0
0 ? P.up : Q.summary.delta < 0 ? P.down : '#2a6fdb'} w={120} h={30} id="v7a2rail" />
2月
6月
未実施
前回 {Q.last.date}（{Q.last.daysAgo}日前）
{/* ═ 根拠フロー（右） ═ */}
やや注意}>今回の確認ポイント
{Q.checkpoints.filter((c) => c.src !== 'collab').map((c, i, arr) => )}
コメント
);
}
// ═ 確認ポイント例（実際の表示デザインのままモックした例）═
const EX_WARN = { fg: '#c08a12', bg: '#fdf4dc', line: '#efe0b0' };
const EX_NEG = { fg: C2.down, bg: C2.downBg, line: '#f5cdd5' };
const ExIcons = {
clock: ,
repeat: ,
};
function ExChip({ t, children }) {
return {children};
}
// シグナル型の例行（CheckRowCapのsignal行と同じ造り）
function ExSignalRow({ t, icon, label, note, last }) {
return (
{icon}
{label}
{note}
);
}
// アンケート型の例行（CheckRowCapのsurvey行と同じ造り、トーンは固定指定）
function ExSurveyRow({ t, q, reason, prev, cur, hist, id, last }) {
return (
{ChipIcons.trendDown}
{prev}
→
{cur}
{cur - prev > 0 ? `+${cur - prev}` : cur - prev}
);
}
function CheckExamplesPanel() {
return (
確認ポイント例
自動抽出されたときの実際の表示イメージ。赤＝ネガティブ／黄＝やや注意。
);
}
Object.assign(window, { ScreenV7A2, CheckRowCap, CheckExamplesPanel, CommentBand2, SurveyCard2, RecordCard2, AvgCompareRail, IconChip2, ChipIcons, C2, TXT2 });