// 共通コンポーネント
const { useState, useMemo, useEffect, useRef } = React;
function Chip({ kind = "default", children }) {
const palette = {
ok: { bg: "#E6F4EC", fg: "#0F7A3E", bd: "#BFE3CD" },
warn: { bg: "#FFF6DA", fg: "#8A6100", bd: "#F4DC97" },
danger: { bg: "#FCE4E4", fg: "#A41F1F", bd: "#F2BFBF" },
muted: { bg: "#EEF1F5", fg: "#5A6679", bd: "#DCE2EB" },
info: { bg: "#E5EEFC", fg: "#1B4FB3", bd: "#BFD3F2" },
default: { bg: "#EEF1F5", fg: "#3D4756", bd: "#D8DEE7" },
};
const p = palette[kind] || palette.default;
return (
{children}
);
}
function StatusChip({ status }) {
const map = {
"有効": "ok", "在籍": "ok",
"期限間近": "warn",
"期限切れ": "danger", "停止": "danger", "退職": "danger",
"未紐付": "muted",
};
return {status};
}
function KpiCard({ label, value, unit, delta, deltaKind = "muted", sub }) {
return (
{label}
{value}
{unit && {unit}}
{(delta || sub) && (
{sub && {sub}}
{delta && {delta}}
)}
);
}
function SectionCard({ title, action, children, padding = true, style = {} }) {
return (
);
}
// 横棒グラフ
function BarChart({ data, maxValue, format = (v) => v, color = "var(--accent)" }) {
const max = maxValue ?? Math.max(...data.map(d => d.value));
return (
{data.map((d, i) => (
{d.label}
{format(d.value)}
))}
{data.map((d, i) => {
const total = totals[i];
const h = (total / max) * height;
return (
{formatY(total)}
{stacks.map(s => {
const v = d.values[s.key] || 0;
return
;
})}
);
})}
{data.map((d, i) => (
{d.label}
))}
{stacks.map(s => (
{s.label}
))}
);
}
// テーブル
function DataTable({ columns, rows, onRowClick, denseRow = 40, emptyText = "データがありません" }) {
return (
{columns.map((c, i) => (
| {c.title} |
))}
{rows.length === 0 ? (
| {emptyText} |
) : rows.map((r, i) => (
onRowClick(r) : undefined}
style={{
cursor: onRowClick ? "pointer" : "default",
background: i % 2 === 0 ? "#fff" : "#FBFCFE",
height: denseRow,
transition: "background .12s",
}}
onMouseEnter={e => e.currentTarget.style.background = "#EEF4FE"}
onMouseLeave={e => e.currentTarget.style.background = i % 2 === 0 ? "#fff" : "#FBFCFE"}>
{columns.map((c, j) => (
| {c.render ? c.render(r) : r[c.key]} |
))}
))}
);
}
// アイコン (シンプルなSVG)
const Icon = {
car: (p) => (),
user: (p) => (),
card: (p) => (),
dash: (p) => (),
coin: (p) => (),
upload: (p) => (),
settings: (p) => (),
search: (p) => (),
warn: (p) => (),
chevron: (p) => (),
plus: (p) => (),
download: (p) => (),
back: (p) => (),
filter: (p) => (),
bell: (p) => (),
};
function Button({ children, variant = "default", icon, onClick, disabled, style = {} }) {
const variants = {
default: { bg: "#fff", fg: "var(--ink-1)", bd: "var(--border)", hbg: "#F4F6FA" },
primary: { bg: "var(--accent)", fg: "#fff", bd: "var(--accent)", hbg: "var(--accent-dark)" },
danger: { bg: "#fff", fg: "var(--danger)", bd: "#F2BFBF", hbg: "#FCE4E4" },
ghost: { bg: "transparent", fg: "var(--ink-2)", bd: "transparent", hbg: "#F0F3F8" },
};
const v = variants[variant];
const [hover, setHover] = useState(false);
return (
);
}
function Select({ value, onChange, options, placeholder = "選択", style = {}, prefix }) {
return (
);
}
function SearchInput({ value, onChange, placeholder = "検索", style = {} }) {
return (
onChange(e.target.value)}
placeholder={placeholder}
style={{
height: 30, paddingLeft: 28, paddingRight: 10, fontSize: 12.5,
background: "#fff", border: "1px solid var(--border)", borderRadius: 6,
color: "var(--ink-1)", width: "100%", fontFamily: "inherit",
outline: "none",
}}
onFocus={e => e.target.style.borderColor = "var(--accent)"}
onBlur={e => e.target.style.borderColor = "var(--border)"}
/>
);
}
function Field({ label, value, mono }) {
return (
{label}
{value || —}
);
}
const fmtJPY = (n) => "¥" + Number(n).toLocaleString("ja-JP");
const fmtN = (n) => Number(n).toLocaleString("ja-JP");
Object.assign(window, {
Chip, StatusChip, KpiCard, SectionCard, BarChart, ColumnChart,
DataTable, Icon, Button, Select, SearchInput, Field,
fmtJPY, fmtN,
});