スタッフ

{filtered.length} 件

({ value: r.id, label: r.name }))} />

set("code", v)} placeholder="A0001" /> set("lastName", v)} placeholder="山田" /> set("firstName", v)} placeholder="太郎" /> set("lastKana", v)} placeholder="ヤマダ" /> set("firstKana", v)} placeholder="タロウ" /> set("email", v)} placeholder="name@adfproject.jp" />

所属・職種

set("joined", v)} /> set("roles", v)} roles={roles} />

set("note", v)} rows={2} placeholder="任意" />
        </Field>
      </div>
    </Modal>
  );
};

// ============================================
// WORK SCREEN
// ============================================
const WorkScreen = ({ works, setWorks, staff, role, addLog, onOpenDetail, externalEditing, clearExternalEditing }) => {
  const toast = useToast();
  const [q, setQ] = useState("");
  const [statusFilter, setStatusFilter] = useState("");
  const [typeFilter, setTypeFilter] = useState("");
  const [sort, setSort] = useState({ key: "code", dir: "desc" });
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(25);
  const [selected, setSelected] = useState(new Set());
  const [editing, setEditing] = useState(null);
  const [confirmDelete, setConfirmDelete] = useState(null);
  const canEdit = role !== "viewer";

useEffect(() => {
    if (externalEditing) { setEditing(externalEditing); clearExternalEditing?.(); }
  }, [externalEditing]);

const filtered = useMemo(() => {
    let r = works;
    if (q) {
      const ql = q.toLowerCase();
      r = r.filter(w =>
        w.title.includes(q) || w.titleEn?.toLowerCase().includes(ql) ||
        w.code.toLowerCase().includes(ql) ||
        (CLIENT_BY_ID[w.clientId]?.name || "").includes(q)
      );
    }
    if (statusFilter) r = r.filter(w => w.status === statusFilter);
    if (typeFilter)   r = r.filter(w => w.type === typeFilter);

r = [...r].sort((a, b) => {
      const dir = sort.dir === "asc" ? 1 : -1;
      const av = a[sort.key] ?? ""; const bv = b[sort.key] ?? "";
      if (av < bv) return -1 * dir;
      if (av > bv) return  1 * dir;
      return 0;
    });
    return r;
  }, [works, q, statusFilter, typeFilter, sort]);

const paged = filtered.slice((page - 1) * pageSize, page * pageSize);
  useEffect(() => { setPage(1); }, [q, statusFilter, typeFilter]);

return (
    <>
      <div className="list-header">
        <div className="list-title-row">
          <h1 className="list-title">作品</h1>
          <Badge>{filtered.length} 件</Badge>
          <div style={{ flex: 1 }} />
          <Button icon="download" onClick={exportCSV}>CSVエクスポート</Button>
          <Button icon="plus" variant="accent" onClick={() => setEditing("new")} disabled={!canEdit}>新規作品</Button>
        </div>

<div className="list-toolbar">
          <div className="grow">
            <SearchInput value={q} onChange={setQ} placeholder="作品名・コード・クライアントで検索…" />
          </div>
          <div style={{ width: 160 }}>
            <Select
              value={statusFilter} onChange={setStatusFilter} placeholder="ステータス（すべて）"
              options={Object.entries(WORK_STATUS).map(([k, v]) => ({ value: k, label: v.label }))}
            />
          </div>
          <div style={{ width: 130 }}>
            <Select
              value={typeFilter} onChange={setTypeFilter} placeholder="形式（すべて）"
              options={["TV", "Movie", "OVA", "ONA", "CM", "Other"].map(v => ({ value: v, label: v }))}
            />
          </div>
          {(q || statusFilter || typeFilter) && (
            <Button variant="ghost" size="sm" onClick={() => { setQ(""); setStatusFilter(""); setTypeFilter(""); }}>
              フィルター解除
            </Button>
          )}
        </div>

{selected.size > 0 && (
          <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "6px 10px", background: "var(--accent-soft)", border: "1px solid var(--accent-border)", borderRadius: 6, fontSize: 12 }}>
            <span style={{ color: "var(--accent)", fontWeight: 500 }}>{selected.size}件を選択中</span>
            <span style={{ flex: 1 }} />
            <Button size="sm" variant="ghost" onClick={() => setSelected(new Set())}>解除</Button>
            <Button size="sm" icon="trash" variant="danger" onClick={() => setConfirmDelete({ bulk: true })} disabled={!canEdit}>削除</Button>
          </div>
        )}
      </div>

<DataTable
        columns={columns}
        rows={paged}
        sort={sort}
        onSortChange={setSort}
        selected={selected}
        onSelectedChange={setSelected}
        onRowClick={(r) => onOpenDetail ? onOpenDetail(r.id) : (canEdit ? setEditing(r) : null)}
        rowActions={(r) => (
          <>
            <IconButton icon="edit"  title="編集" onClick={() => canEdit && setEditing(r)} />
            <IconButton icon="trash" title="削除" onClick={() => canEdit && setConfirmDelete(r)} />
          </>
        )}
      />

{editing && (
        <WorkEditModal
          work={editing === "new" ? null : editing}
          staff={staff}
          onClose={() => setEditing(null)}
          onSave={handleSave}
        />
      )}
      <ConfirmDialog
        open={!!confirmDelete}
        title="作品を削除"
        message={confirmDelete?.bulk
          ? `選択中の ${selected.size} 件の作品を削除します。この操作は取り消せません。`
          : `「${confirmDelete?.title}」を削除します。この操作は取り消せません。`}
        onCancel={() => setConfirmDelete(null)}
        onConfirm={handleDelete}
      />
    </>
  );
};

const addTag = () => {
    const t = tagInput.trim();
    if (t && !form.tags.includes(t)) set("tags", [...form.tags, t]);
    setTagInput("");
  };

return (
    <Modal
      open
      onClose={onClose}
      size="lg"
      title={work ? `作品編集 · ${work.title}` : "新規作品登録"}
      subtitle={work ? `作品コード ${work.code}` : "作品コード・クライアントを入力してください"}
      footer={
        <>
          <span className="grow" />
          <Button onClick={onClose}>キャンセル</Button>
          <Button variant="accent" onClick={submit}>{work ? "保存" : "登録"}</Button>
        </>
      }
    >
      <div className="form-grid">
        <div className="form-section-title">基本情報</div>
        <Field label="作品コード" required error={errors.code}>
          <Input value={form.code} onChange={v => set("code", v.toUpperCase())} placeholder="ADF-2025-01" />
        </Field>
        <Field label="ステータス">
          <Select value={form.status} onChange={v => set("status", v)}
            options={Object.entries(WORK_STATUS).map(([k, v]) => ({ value: k, label: v.label }))} />
        </Field>
        <Field label="作品名 (邦題)" required error={errors.title} span={2}>
          <Input value={form.title} onChange={v => set("title", v)} placeholder="作品タイトル" />
        </Field>
        <Field label="作品名 (英題)" span={2}>
          <Input value={form.titleEn} onChange={v => set("titleEn", v)} placeholder="English Title" />
        </Field>
        <Field label="取引先" required error={errors.clientId} span={2}
          hint="取引先マスターに未登録の場合は、取引先画面で先に追加してください">
          <ComboBox
            value={form.clientId}
            onChange={v => set("clientId", v)}
            placeholder="取引先を選択..."
            options={CLIENTS.filter(c => c.status === "active" || c.id === form.clientId).map(c => ({
              value: c.id,
              label: c.name,
              sub: `${c.code} · ${CLIENT_TYPES[c.type]?.label || c.type}${c.contactPerson && c.contactPerson !== "—" ? ` · 担当: ${c.contactPerson}` : ""}`,
              searchKey: `${c.name} ${c.nameKana} ${c.code} ${c.contactPerson || ""}`,
              leading: (
                <span className="mono text-xs" style={{ width: 38, color: "var(--text-faint)", flexShrink: 0 }}>{c.code}</span>
              ),
            }))}
          />
        </Field>

<div className="form-section-title">区分・規模</div>
        <Field label="形式">
          <Select value={form.type} onChange={v => set("type", v)}
            options={["TV", "Movie", "OVA", "ONA", "CM", "Other"].map(v => ({ value: v, label: v }))} />
        </Field>
        <Field label="話数">
          <Input type="number" value={form.episodes} onChange={v => set("episodes", v)} />
        </Field>
        <Field label="開始日">
          <Input type="date" value={form.startDate} onChange={v => set("startDate", v)} />
        </Field>
        <Field label="終了日">
          <Input type="date" value={form.endDate} onChange={v => set("endDate", v)} />
        </Field>
        <Field label="予算 (円)" span={2}>
          <Input type="number" value={form.budget} onChange={v => set("budget", v)} placeholder="0" />
        </Field>

<div className="form-section-title">担当</div>
        <Field label="プロデューサー">
          <ComboBox
            value={form.producer}
            onChange={v => set("producer", v)}
            placeholder="プロデューサーを選択..."
            options={staff.filter(s => s.status !== "inactive").map(s => ({
              value: s.id,
              label: `${s.lastName} ${s.firstName}`,
              sub: `${s.code} · ${DEPT_BY_ID[s.dept]?.name || ""}${(s.roles || []).map(rid => ROLE_BY_ID[rid]?.name).filter(Boolean).slice(0, 2).join(" / ") ? " · " + (s.roles || []).map(rid => ROLE_BY_ID[rid]?.name).filter(Boolean).slice(0, 2).join(" / ") : ""}`,
              searchKey: `${s.lastName} ${s.firstName} ${s.lastKana} ${s.firstKana} ${s.code}`,
              leading: <Avatar id={s.id} name={initialsFor(s)} size="sm" />,
            }))}
          />
        </Field>
        <Field label="監督">
          <ComboBox
            value={form.director}
            onChange={v => set("director", v)}
            placeholder="監督を選択..."
            clearable
            options={staff.filter(s => s.status !== "inactive").map(s => ({
              value: s.id,
              label: `${s.lastName} ${s.firstName}`,
              sub: `${s.code} · ${DEPT_BY_ID[s.dept]?.name || ""}`,
              searchKey: `${s.lastName} ${s.firstName} ${s.lastKana} ${s.firstKana} ${s.code}`,
              leading: <Avatar id={s.id} name={initialsFor(s)} size="sm" />,
            }))}
          />
        </Field>

<div className="form-section-title">タグ</div>
        <Field span={2}>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 4, padding: 6, border: "1px solid var(--border)", borderRadius: 4, background: "var(--surface)", minHeight: 32 }}>
            {form.tags.map(t => (
              <button key={t} type="button" className="tag" style={{ cursor: "pointer" }} onClick={() => set("tags", form.tags.filter(x => x !== t))}>
                {t} <Icon name="close" size={10} style={{ marginLeft: 2 }} />
              </button>
            ))}
            <input
              style={{ border: "none", outline: "none", flex: 1, minWidth: 100, padding: "2px 4px", fontSize: 12.5, background: "transparent" }}
              value={tagInput}
              onChange={e => setTagInput(e.target.value)}
              onKeyDown={e => { if (e.key === "Enter") { e.preventDefault(); addTag(); } }}
              placeholder={form.tags.length === 0 ? "タグを入力（例: ファンタジー, 続編）" : "+ 追加"}
            />
          </div>
        </Field>
      </div>
    </Modal>
  );
};

// ============================================
// CLIENT SCREEN (取引先)
// ============================================
const ClientScreen = ({ clients, setClients, works, role, addLog }) => {
  const toast = useToast();
  const [q, setQ] = useState("");
  const [typeFilter, setTypeFilter] = useState("");
  const [statusFilter, setStatusFilter] = useState("");
  const [sort, setSort] = useState({ key: "code", dir: "asc" });
  const [editing, setEditing] = useState(null);
  const [confirmDelete, setConfirmDelete] = useState(null);
  const canEdit = role !== "viewer";

const worksCount = (cid) => works.filter(w => w.clientId === cid).length;
  const activeWorksCount = (cid) => works.filter(w => w.clientId === cid && (w.status === "in_production" || w.status === "post_production")).length;

return (
    <>
      <div className="list-header">
        <div className="list-title-row">
          <h1 className="list-title">取引先</h1>
          <Badge>{filtered.length} 件</Badge>
          <div style={{ flex: 1 }} />
          <Button icon="download" onClick={exportCSV}>CSVエクスポート</Button>
          <Button icon="plus" variant="accent" onClick={() => setEditing("new")} disabled={!canEdit}>新規取引先</Button>
        </div>
        <div className="list-toolbar">
          <div className="grow">
            <SearchInput value={q} onChange={setQ} placeholder="取引先名・コード・担当窓口で検索…" />
          </div>
          <div style={{ width: 180 }}>
            <Select value={typeFilter} onChange={setTypeFilter} placeholder="種別（すべて）"
              options={Object.entries(CLIENT_TYPES).map(([k, v]) => ({ value: k, label: v.label }))} />
          </div>
          <div style={{ width: 130 }}>
            <Select value={statusFilter} onChange={setStatusFilter} placeholder="状態（すべて）"
              options={Object.entries(CLIENT_STATUS).map(([k, v]) => ({ value: k, label: v.label }))} />
          </div>
          {(q || typeFilter || statusFilter) && (
            <Button variant="ghost" size="sm" onClick={() => { setQ(""); setTypeFilter(""); setStatusFilter(""); }}>
              フィルター解除
            </Button>
          )}
        </div>
      </div>

<DataTable
        columns={columns} rows={filtered}
        sort={sort} onSortChange={setSort}
        onRowClick={(r) => canEdit ? setEditing(r) : null}
        rowActions={(r) => (
          <>
            <IconButton icon="edit"  onClick={() => canEdit && setEditing(r)} title="編集" />
            <IconButton icon="trash" onClick={() => canEdit && setConfirmDelete(r)} title="削除" />
          </>
        )}
      />

{editing && (
        <Modal
          open onClose={() => setEditing(null)}
          size="lg"
          title={editing === "new" ? "新規取引先登録" : `取引先編集 · ${editing.name}`}
        >
          <ClientForm
            initial={editing === "new" ? null : editing}
            onSubmit={handleSave}
            onClose={() => setEditing(null)}
          />
        </Modal>
      )}

<ConfirmDialog
        open={!!confirmDelete}
        title="取引先を削除"
        message={
          worksCount(confirmDelete?.id || "") > 0
            ? `「${confirmDelete?.name}」には${worksCount(confirmDelete?.id)}件の作品が紐付いています。先に作品の取引先を変更してください。`
            : `「${confirmDelete?.name}」を削除します。この操作は取り消せません。`
        }
        onCancel={() => setConfirmDelete(null)}
        onConfirm={handleDelete}
      />
    </>
  );
};

return (
    <>
      <div className="form-grid">
        <div className="form-section-title">基本情報</div>
        <Field label="取引先コード" required error={errors.code}>
          <Input value={form.code} onChange={v => set("code", v.toUpperCase())} placeholder="TAS" />
        </Field>
        <Field label="状態">
          <Select value={form.status} onChange={v => set("status", v)}
            options={Object.entries(CLIENT_STATUS).map(([k, v]) => ({ value: k, label: v.label }))} />
        </Field>
        <Field label="取引先名" required error={errors.name} span={2}>
          <Input value={form.name} onChange={v => set("name", v)} placeholder="東京アニメーションスタジオ" />
        </Field>
        <Field label="カナ" span={2}>
          <Input value={form.nameKana} onChange={v => set("nameKana", v)} placeholder="トウキョウアニメーションスタジオ" />
        </Field>
        <Field label="種別" span={2}>
          <Select value={form.type} onChange={v => set("type", v)}
            options={Object.entries(CLIENT_TYPES).map(([k, v]) => ({ value: k, label: v.label }))} />
        </Field>

<div className="form-section-title">連絡先</div>
        <Field label="担当窓口" span={2}>
          <Input value={form.contactPerson} onChange={v => set("contactPerson", v)} placeholder="氏名" />
        </Field>
        <Field label="メールアドレス" error={errors.contactEmail}>
          <Input value={form.contactEmail} onChange={v => set("contactEmail", v)} placeholder="contact@example.jp" />
        </Field>
        <Field label="電話番号">
          <Input value={form.contactPhone} onChange={v => set("contactPhone", v)} placeholder="03-XXXX-XXXX" />
        </Field>

<Field label="備考" span={2}>
          <Textarea value={form.note} onChange={v => set("note", v)} rows={2} placeholder="任意" />
        </Field>
      </div>
      <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 18, paddingTop: 14, borderTop: "1px solid var(--border)" }}>
        <Button onClick={onClose}>キャンセル</Button>
        <Button variant="accent" onClick={submit}>{initial ? "保存" : "登録"}</Button>
      </div>
    </>
  );
};

// ============================================
// DEPT SCREEN (light)
// ============================================
const DeptScreen = ({ depts, setDepts, staff, role, addLog }) => {
  const toast = useToast();
  const [q, setQ] = useState("");
  const [editing, setEditing] = useState(null);
  const [confirmDelete, setConfirmDelete] = useState(null);
  const canEdit = role !== "viewer";

const filtered = useMemo(() =>
    depts.filter(d => !q || d.name.includes(q) || d.code.toLowerCase().includes(q.toLowerCase()) || d.nameEn?.toLowerCase().includes(q.toLowerCase()))
  , [depts, q]);

return (
    <>
      <div className="list-header">
        <div className="list-title-row">
          <h1 className="list-title">部署</h1>
          <Badge>{filtered.length} 件</Badge>
          <div style={{ flex: 1 }} />
          <Button icon="plus" variant="accent" onClick={() => setEditing("new")} disabled={!canEdit}>新規部署</Button>
        </div>
        <div className="list-toolbar">
          <div style={{ width: 300 }}>
            <SearchInput value={q} onChange={setQ} placeholder="部署名・コードで検索…" />
          </div>
        </div>
      </div>

<DataTable
        columns={columns} rows={filtered}
        onRowClick={(r) => canEdit ? setEditing(r) : null}
        rowActions={(r) => (
          <>
            <IconButton icon="edit"  onClick={() => canEdit && setEditing(r)} title="編集" />
            <IconButton icon="trash" onClick={() => canEdit && setConfirmDelete(r)} title="削除" />
          </>
        )}
      />

{editing && (
        <Modal
          open onClose={() => setEditing(null)}
          title={editing === "new" ? "新規部署登録" : `部署編集 · ${editing.name}`}
          footer={<DeptFormFooter onClose={() => setEditing(null)} />}
        >
          <DeptForm
            initial={editing === "new" ? null : editing}
            staff={staff}
            onSubmit={handleSave}
            onClose={() => setEditing(null)}
          />
        </Modal>
      )}

<ConfirmDialog
        open={!!confirmDelete}
        title="部署を削除"
        message={`「${confirmDelete?.name}」を削除します。所属スタッフの再配置を必ず行ってください。`}
        onCancel={() => setConfirmDelete(null)}
        onConfirm={handleDelete}
      />
    </>
  );
};

const DeptFormFooter = () => null; // placeholder; form has its own footer via portal? We'll inline.

return (
    <>
      <div className="form-grid">
        <Field label="部署コード" required error={errors.code}>
          <Input value={form.code} onChange={v => set("code", v.toUpperCase())} placeholder="PRD" />
        </Field>
        <Field label="部署名" required error={errors.name}>
          <Input value={form.name} onChange={v => set("name", v)} placeholder="プロダクション部" />
        </Field>
        <Field label="英名" span={2}>
          <Input value={form.nameEn} onChange={v => set("nameEn", v)} placeholder="Production" />
        </Field>
        <Field label="部署長" span={2}>
          <ComboBox
            value={form.manager}
            onChange={v => set("manager", v)}
            placeholder="未設定（あとから設定可）"
            clearable
            options={staff.filter(s => s.status !== "inactive").map(s => ({
              value: s.id,
              label: `${s.lastName} ${s.firstName}`,
              sub: `${s.code} · ${DEPT_BY_ID[s.dept]?.name || ""}`,
              searchKey: `${s.lastName} ${s.firstName} ${s.lastKana} ${s.firstKana} ${s.code}`,
              leading: <Avatar id={s.id} name={initialsFor(s)} size="sm" />,
            }))}
          />
        </Field>
        <Field label="備考" span={2}>
          <Textarea value={form.note} onChange={v => set("note", v)} rows={2} />
        </Field>
      </div>
      <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 18, paddingTop: 14, borderTop: "1px solid var(--border)" }}>
        <Button onClick={onClose}>キャンセル</Button>
        <Button variant="accent" onClick={submit}>{initial ? "保存" : "登録"}</Button>
      </div>
    </>
  );
};

// ============================================
// ROLE SCREEN (light)
// ============================================
const RoleScreen = ({ roles, setRoles, staff, role, addLog, categories, setCategories }) => {
  const toast = useToast();
  const [q, setQ] = useState("");
  const [catFilter, setCatFilter] = useState("");
  const [editing, setEditing] = useState(null);
  const [confirmDelete, setConfirmDelete] = useState(null);
  const [catManagerOpen, setCatManagerOpen] = useState(false);
  const canEdit = role !== "viewer";

const catNames = useMemo(() => [...categories].sort((a, b) => a.order - b.order).map(c => c.name), [categories]);

const filtered = useMemo(() => {
    let r = roles;
    if (q) r = r.filter(x => x.name.includes(q) || x.code.toLowerCase().includes(q.toLowerCase()));
    if (catFilter) r = r.filter(x => x.category === catFilter);
    // sort by category order then name
    const orderMap = Object.fromEntries(categories.map(c => [c.name, c.order]));
    return [...r].sort((a, b) => {
      const ao = orderMap[a.category] ?? 999;
      const bo = orderMap[b.category] ?? 999;
      if (ao !== bo) return ao - bo;
      return a.code.localeCompare(b.code);
    });
  }, [roles, q, catFilter, categories]);

return (
    <>
      <div className="list-header">
        <div className="list-title-row">
          <h1 className="list-title">職種</h1>
          <Badge>{filtered.length} 件</Badge>
          <span className="muted text-xs">/ {categories.length}カテゴリ</span>
          <div style={{ flex: 1 }} />
          <Button icon="grid" onClick={() => setCatManagerOpen(true)} disabled={!canEdit}>カテゴリ管理</Button>
          <Button icon="plus" variant="accent" onClick={() => setEditing("new")} disabled={!canEdit}>新規職種</Button>
        </div>
        <div className="list-toolbar">
          <div style={{ width: 280 }}>
            <SearchInput value={q} onChange={setQ} placeholder="職種名・コードで検索…" />
          </div>
          <div style={{ width: 200 }}>
            <Select value={catFilter} onChange={setCatFilter} placeholder="カテゴリ（すべて）"
              options={catNames.map(c => ({ value: c, label: c }))} />
          </div>
          {(q || catFilter) && (
            <Button variant="ghost" size="sm" onClick={() => { setQ(""); setCatFilter(""); }}>
              フィルター解除
            </Button>
          )}
        </div>
      </div>

{editing && (
        <Modal
          open onClose={() => setEditing(null)}
          title={editing === "new" ? "新規職種登録" : `職種編集 · ${editing.name}`}
        >
          <RoleForm
            initial={editing === "new" ? null : editing}
            categories={catNames}
            onSubmit={handleSave}
            onClose={() => setEditing(null)}
          />
        </Modal>
      )}

{catManagerOpen && (
        <CategoryManagerModal
          categories={categories}
          setCategories={setCategories}
          roles={roles}
          setRoles={setRoles}
          addLog={addLog}
          onClose={() => setCatManagerOpen(false)}
        />
      )}

<ConfirmDialog
        open={!!confirmDelete}
        title="職種を削除"
        message={`「${confirmDelete?.name}」を削除します。この職種が割り当てられているスタッフは未設定になります。`}
        onCancel={() => setConfirmDelete(null)}
        onConfirm={handleDelete}
      />
    </>
  );
};

// ============================================
// CATEGORY MANAGER MODAL (manage 職種カテゴリ)
// ============================================
const CategoryManagerModal = ({ categories, setCategories, roles, setRoles, addLog, onClose }) => {
  const toast = useToast();
  const [editing, setEditing] = useState(null); // category being edited inline
  const [draft, setDraft] = useState({ name: "", description: "" });
  const [adding, setAdding] = useState(false);
  const [newCat, setNewCat] = useState({ name: "", description: "" });
  const [confirmDelete, setConfirmDelete] = useState(null);

const sorted = useMemo(() => [...categories].sort((a, b) => a.order - b.order), [categories]);
  const roleCount = (catName) => roles.filter(r => r.category === catName).length;

return (
    <>
      <Modal
        open
        onClose={onClose}
        size="lg"
        title="カテゴリ管理"
        subtitle="職種マスターのカテゴリを追加・編集・並び替え"
        footer={
          <>
            <span className="grow text-xs faint">
              <Icon name="info" size={12} /> 名称変更は紐付く全ての職種に自動反映されます
            </span>
            <Button onClick={onClose}>閉じる</Button>
          </>
        }
      >
        <div style={{ border: "1px solid var(--border)", borderRadius: 6, overflow: "hidden", background: "var(--surface)" }}>
          {sorted.map((c, i) => {
            const isEditing = editing === c.id;
            const cnt = roleCount(c.name);
            return (
              <div
                key={c.id}
                style={{
                  display: "grid",
                  gridTemplateColumns: "26px 1fr 80px 100px",
                  alignItems: "center",
                  gap: 12,
                  padding: "10px 14px",
                  borderTop: i > 0 ? "1px solid var(--border)" : "none",
                  background: isEditing ? "var(--accent-soft)" : undefined,
                }}
              >
                {/* Order controls */}
                <div style={{ display: "flex", flexDirection: "column", gap: 1 }}>
                  <button
                    className="icon-btn"
                    style={{ width: 16, height: 14, padding: 0 }}
                    onClick={() => move(c, -1)} disabled={i === 0} title="上へ"
                  ><Icon name="chevron-down" size={9} style={{ transform: "rotate(180deg)" }} /></button>
                  <button
                    className="icon-btn"
                    style={{ width: 16, height: 14, padding: 0 }}
                    onClick={() => move(c, 1)} disabled={i === sorted.length - 1} title="下へ"
                  ><Icon name="chevron-down" size={9} /></button>
                </div>

{/* Name + description */}
                <div style={{ minWidth: 0 }}>
                  {isEditing ? (
                    <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                      <Input
                        value={draft.name} onChange={v => setDraft(d => ({ ...d, name: v }))}
                        placeholder="カテゴリ名"
                        autoFocus
                        onKeyDown={e => { if (e.key === "Enter") saveEdit(c); if (e.key === "Escape") cancelEdit(); }}
                      />
                      <Input
                        value={draft.description} onChange={v => setDraft(d => ({ ...d, description: v }))}
                        placeholder="説明（任意）"
                      />
                    </div>
                  ) : (
                    <>
                      <div style={{ fontSize: 13, fontWeight: 500, display: "flex", alignItems: "center", gap: 6 }}>
                        {c.name}
                        <span className="mono text-xs faint">{c.id}</span>
                      </div>
                      {c.description && <div className="text-xs muted" style={{ marginTop: 2 }}>{c.description}</div>}
                    </>
                  )}
                </div>

{/* Role count */}
                <div style={{ textAlign: "right", fontSize: 11.5 }}>
                  <span className="mono">{cnt}</span>
                  <span className="faint text-xs"> 職種</span>
                </div>

{/* Actions */}
                <div style={{ display: "flex", justifyContent: "flex-end", gap: 2 }}>
                  {isEditing ? (
                    <>
                      <Button size="sm" onClick={cancelEdit}>キャンセル</Button>
                      <Button size="sm" variant="accent" onClick={() => saveEdit(c)}>保存</Button>
                    </>
                  ) : (
                    <>
                      <IconButton icon="edit"  onClick={() => startEdit(c)} title="編集" />
                      <IconButton icon="trash" onClick={() => setConfirmDelete(c)} title="削除" />
                    </>
                  )}
                </div>
              </div>
            );
          })}

{/* Add new row */}
          {adding ? (
            <div style={{
              display: "grid", gridTemplateColumns: "26px 1fr 80px 100px", gap: 12,
              padding: "10px 14px", borderTop: "1px solid var(--border)",
              background: "var(--bg-subtle)",
            }}>
              <div />
              <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                <Input
                  value={newCat.name} onChange={v => setNewCat(c => ({ ...c, name: v }))}
                  placeholder="新しいカテゴリ名" autoFocus
                  onKeyDown={e => { if (e.key === "Enter") addCategory(); if (e.key === "Escape") { setAdding(false); setNewCat({ name: "", description: "" }); } }}
                />
                <Input
                  value={newCat.description} onChange={v => setNewCat(c => ({ ...c, description: v }))}
                  placeholder="説明（任意）"
                />
              </div>
              <div />
              <div style={{ display: "flex", justifyContent: "flex-end", gap: 2 }}>
                <Button size="sm" onClick={() => { setAdding(false); setNewCat({ name: "", description: "" }); }}>キャンセル</Button>
                <Button size="sm" variant="accent" onClick={addCategory}>追加</Button>
              </div>
            </div>
          ) : (
            <button
              className="dropdown-item"
              style={{
                width: "100%", padding: "10px 14px", borderTop: "1px solid var(--border)",
                color: "var(--text-muted)", borderRadius: 0,
              }}
              onClick={() => setAdding(true)}
            >
              <Icon name="plus" size={13} />
              <span>カテゴリを追加</span>
            </button>
          )}
        </div>

<div style={{ marginTop: 14, fontSize: 11.5, color: "var(--text-subtle)", lineHeight: 1.6 }}>
          <strong style={{ color: "var(--text-muted)" }}>使い方:</strong> カテゴリ名を変更すると、そのカテゴリに属するすべての職種に自動で反映されます。
          職種が紐付いているカテゴリは削除できません。先に職種の所属カテゴリを変更してから削除してください。
        </div>
      </Modal>

<ConfirmDialog
        open={!!confirmDelete}
        title="カテゴリを削除"
        message={`カテゴリ「${confirmDelete?.name}」を削除します。${roleCount(confirmDelete?.name || "") > 0 ? `このカテゴリには${roleCount(confirmDelete?.name)}件の職種が紐付いているため、削除できません。` : "この操作は取り消せません。"}`}
        onCancel={() => setConfirmDelete(null)}
        onConfirm={handleDelete}
      />
    </>
  );
};

// ============================================
// ACCESS USERS SCREEN — admin only
// ============================================
const AccessUsersScreen = ({ users, setUsers, staff, role, addLog }) => {
  const toast = useToast();
  const [q, setQ] = useState("");
  const [roleFilter, setRoleFilter] = useState("");
  const [statusFilter, setStatusFilter] = useState("");
  const [sort, setSort] = useState({ key: "lastLogin", dir: "desc" });
  const [inviteOpen, setInviteOpen] = useState(false);
  const [confirmAction, setConfirmAction] = useState(null);
  const isAdmin = role === "admin";

const counts = useMemo(() => ({
    total:   users.length,
    active:  users.filter(u => u.status === "active").length,
    admin:   users.filter(u => u.role === "admin" && u.status === "active").length,
    pending: users.filter(u => u.status === "pending").length,
  }), [users]);

return (
    <>
      <div className="list-header">
        <div className="list-title-row">
          <h1 className="list-title">アクセスユーザー</h1>
          <Badge>{counts.total} 件</Badge>
          <div style={{ flex: 1 }} />
          <Button icon="plus" variant="accent" onClick={() => setInviteOpen(true)} disabled={!isAdmin}>
            ユーザーを招待
          </Button>
        </div>

{/* Stats row */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, maxWidth: 540 }}>
          {[
            { label: "有効ユーザー", value: counts.active, sub: `全${counts.total}人中` },
            { label: "管理者", value: counts.admin, sub: "管理者ロール" },
            { label: "招待中", value: counts.pending, sub: "未ログイン" },
          ].map((s) => (
            <div key={s.label} style={{ background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 6, padding: "10px 12px" }}>
              <div className="text-xs faint">{s.label}</div>
              <div style={{ fontSize: 20, fontWeight: 600, letterSpacing: "-0.02em", marginTop: 2, lineHeight: 1.1 }}>{s.value}</div>
              <div className="text-xs muted" style={{ marginTop: 2 }}>{s.sub}</div>
            </div>
          ))}
        </div>

<div className="list-toolbar">
          <div className="grow">
            <SearchInput value={q} onChange={setQ} placeholder="氏名・メールで検索…" />
          </div>
          <div style={{ width: 150 }}>
            <Select value={roleFilter} onChange={setRoleFilter} placeholder="ロール（すべて）"
              options={Object.entries(USER_ROLES).map(([k, v]) => ({ value: k, label: v.label }))} />
          </div>
          <div style={{ width: 130 }}>
            <Select value={statusFilter} onChange={setStatusFilter} placeholder="状態（すべて）"
              options={Object.entries(USER_STATUS).map(([k, v]) => ({ value: k, label: v.label }))} />
          </div>
          {(q || roleFilter || statusFilter) && (
            <Button variant="ghost" size="sm" onClick={() => { setQ(""); setRoleFilter(""); setStatusFilter(""); }}>
              フィルター解除
            </Button>
          )}
        </div>

{!isAdmin && (
          <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 12px", background: "var(--warning-soft)", border: "1px solid transparent", borderRadius: 6, fontSize: 12, color: "var(--warning)" }}>
            <Icon name="lock" size={13} />
            <span>この画面は管理者ロールのみ編集できます。閲覧専用モードです。</span>
          </div>
        )}
      </div>

<DataTable
        columns={columns}
        rows={filtered}
        sort={sort}
        onSortChange={setSort}
        rowActions={(u) => (
          <DropdownMenu
            align="right"
            trigger={<IconButton icon="more" title="操作" />}
            items={[
              ...(u.status === "pending"
                ? [{ label: "招待を再送", icon: "upload", onClick: () => resendInvite(u) }]
                : []
              ),
              ...(u.status === "active"
                ? [{ label: "無効化",  icon: "lock", danger: true, onClick: () => setConfirmAction({ type: "disable", user: u }) }]
                : [{ label: "有効化",  icon: "check", onClick: () => toggleStatus(u) }]
              ),
              { type: "divider" },
              { label: "Entra IDで開く", icon: "shield", onClick: () => toast("Entra ID 管理ポータルを開きます（モック）") },
            ].filter(Boolean)}
          />
        )}
      />

<p className="text-xs muted" style={{ marginTop: 16, lineHeight: 1.7 }}>
        <Icon name="info" size={11} />{" "}
        ロール変更は即時反映されます。退職スタッフのアクセス権は無効化のみ行い、レコード自体は監査のため残します。
        Entra ID側でアカウントが削除された場合、次回ログイン時に該当ユーザーは自動的に無効化されます。
      </p>

{inviteOpen && (
        <InviteUserModal
          staff={staff}
          existingUsers={users}
          onClose={() => setInviteOpen(false)}
          onInvite={inviteUser}
        />
      )}

<ConfirmDialog
        open={confirmAction?.type === "disable"}
        title="アクセスを無効化"
        message={`${confirmAction?.user?.email} のシステムアクセスを無効化します。次回のログイン試行は拒否されますが、ユーザー記録自体は監査のため残ります。後から有効化することもできます。`}
        confirmLabel="無効化"
        onCancel={() => setConfirmAction(null)}
        onConfirm={() => toggleStatus(confirmAction.user)}
      />
    </>
  );
};

// Invite user modal — スタッフから選択のみ
const InviteUserModal = ({ staff, existingUsers, onClose, onInvite }) => {
  const [staffId, setStaffId] = useState("");
  const [role, setRole] = useState("editor");
  const [errors, setErrors] = useState({});

const eligibleStaff = useMemo(() =>
    staff.filter(s => s.status === "active" && !existingUsers.some(u => u.staffId === s.id))
  , [staff, existingUsers]);

return (
    <Modal
      open
      onClose={onClose}
      title="ユーザーを招待"
      subtitle="スタッフマスターから選択してアクセス権を付与します"
      footer={
        <>
          <span className="grow text-xs faint">
            <Icon name="info" size={12} /> 招待後、本人がサインインするまで「招待中」状態
          </span>
          <Button onClick={onClose}>キャンセル</Button>
          <Button variant="accent" onClick={submit}>招待を送信</Button>
        </>
      }
    >
      <div className="form-grid">
        <Field label="スタッフ" required error={errors.staffId} span={2}
          hint={`現在 ${eligibleStaff.length} 名のスタッフが招待可能（既にユーザー登録済みのスタッフは除外）`}>
          <ComboBox
            value={staffId}
            onChange={setStaffId}
            placeholder="スタッフを検索・選択..."
            options={eligibleStaff.map(s => ({
              value: s.id,
              label: `${s.lastName} ${s.firstName}`,
              sub: `${s.code} · ${DEPT_BY_ID[s.dept]?.name || ""} · ${s.email}`,
              searchKey: `${s.lastName} ${s.firstName} ${s.lastKana} ${s.firstKana} ${s.code} ${s.email}`,
              leading: <Avatar id={s.id} name={initialsFor(s)} size="sm" />,
            }))}
          />
        </Field>

{staffId && (
          <Field label="送信先メールアドレス" span={2} hint="スタッフマスターのメールアドレスに招待を送信します">
            <Input value={STAFF_BY_ID[staffId]?.email || ""} readOnly />
          </Field>
        )}

<div className="form-section-title">付与するロール</div>
        <Field span={2}>
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            {Object.entries(USER_ROLES).map(([k, v]) => (
              <label
                key={k}
                style={{
                  display: "flex", alignItems: "center", gap: 10,
                  padding: "10px 12px",
                  border: `1px solid ${role === k ? "var(--accent)" : "var(--border)"}`,
                  borderRadius: 6,
                  background: role === k ? "var(--accent-soft)" : "var(--surface)",
                  cursor: "pointer",
                }}
              >
                <input
                  type="radio"
                  checked={role === k}
                  onChange={() => setRole(k)}
                  style={{ accentColor: "var(--accent)" }}
                />
                <span style={{ flex: 1 }}>
                  <span style={{ fontSize: 13, fontWeight: 500, display: "block" }}>{v.label}</span>
                  <span style={{ fontSize: 11.5, color: "var(--text-subtle)" }}>{v.description}</span>
                </span>
              </label>
            ))}
          </div>
        </Field>
      </div>
    </Modal>
  );
};

// ============================================
// AUDIT LOG SCREEN
// ============================================
const AuditLogScreen = ({ log }) => {
  const [q, setQ] = useState("");
  const [entityFilter, setEntityFilter] = useState("");
  const [actionFilter, setActionFilter] = useState("");

const filtered = useMemo(() => {
    let r = log;
    if (entityFilter) r = r.filter(l => l.entity === entityFilter);
    if (actionFilter) r = r.filter(l => l.action === actionFilter);
    if (q) {
      const ql = q.toLowerCase();
      r = r.filter(l =>
        l.entityId.toLowerCase().includes(ql) ||
        l.after.toLowerCase().includes(ql) ||
        l.before.toLowerCase().includes(ql) ||
        l.note.toLowerCase().includes(ql)
      );
    }
    return r;
  }, [log, q, entityFilter, actionFilter]);

return (
    <>
      <div className="list-header">
        <div className="list-title-row">
          <h1 className="list-title">変更履歴</h1>
          <Badge>{filtered.length} 件</Badge>
          <div style={{ flex: 1 }} />
          <Button icon="download" onClick={() => downloadCSV("audit_log.csv", columns.filter(c => c.key !== "user").concat([{ key: "user", label: "実行者", value: r => r.user }]).map(c => ({ label: c.label, value: c.value || (r => r[c.key]) })), filtered)}>
            CSVエクスポート
          </Button>
        </div>
        <div className="list-toolbar">
          <div className="grow">
            <SearchInput value={q} onChange={setQ} placeholder="ID・内容・備考で検索…" />
          </div>
          <div style={{ width: 160 }}>
            <Select value={entityFilter} onChange={setEntityFilter} placeholder="対象（すべて）"
              options={Object.entries(ENTITY_LABEL).map(([k, v]) => ({ value: k, label: v }))} />
          </div>
          <div style={{ width: 130 }}>
            <Select value={actionFilter} onChange={setActionFilter} placeholder="操作（すべて）"
              options={[{ value: "create", label: "作成" }, { value: "update", label: "更新" }, { value: "delete", label: "削除" }]} />
          </div>
        </div>
      </div>

<DataTable columns={columns} rows={filtered} />
    </>
  );
};

// ============================================
// CSV Import modal (mock)
// ============================================
const CSVImportModal = ({ open, onClose, onImport }) => {
  const [stage, setStage] = useState("drop"); // drop | preview | done
  const [file, setFile] = useState(null);
  useEffect(() => { if (open) { setStage("drop"); setFile(null); } }, [open]);

return (
    <Modal
      open={open} onClose={onClose}
      title="スタッフCSVインポート"
      subtitle="UTF-8 (BOM可) / 1行目をヘッダーとして読み込みます"
      footer={
        stage === "preview"
          ? <>
              <span className="grow text-sm muted">3件中3件が新規追加されます</span>
              <Button onClick={onClose}>キャンセル</Button>
              <Button variant="accent" onClick={doImport}>インポート実行</Button>
            </>
          : <><span className="grow" /><Button onClick={onClose}>閉じる</Button></>
      }
    >
      {stage === "drop" && (
        <div
          style={{ border: "2px dashed var(--border-strong)", borderRadius: 8, padding: 36, textAlign: "center", color: "var(--text-subtle)" }}
          onDragOver={e => e.preventDefault()}
          onDrop={e => { e.preventDefault(); const f = e.dataTransfer.files?.[0]; if (f) onFile(f); }}
        >
          <Icon name="upload" size={28} style={{ marginBottom: 8, color: "var(--text-faint)" }} />
          <div style={{ fontSize: 13, color: "var(--text)" }}>CSVファイルをドラッグ&ドロップ</div>
          <div style={{ fontSize: 11.5, marginTop: 4 }}>または <a href="#" style={{ color: "var(--accent)" }} onClick={(e) => { e.preventDefault(); onFile({ name: "staff_import.csv" }); }}>ファイルを選択</a></div>
          <div style={{ marginTop: 14, fontSize: 11, color: "var(--text-faint)" }}>
            <a href="#" style={{ color: "var(--accent)" }}>テンプレートをダウンロード</a>
          </div>
        </div>
      )}
      {stage === "preview" && (
        <>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12, fontSize: 12.5 }}>
            <Icon name="check" size={14} style={{ color: "var(--success)" }} />
            <strong>{file?.name}</strong>
            <span className="muted">· 3行を検出</span>
          </div>
          <div className="table-wrap" style={{ fontSize: 11.5 }}>
            <table className="data-table">
              <thead>
                <tr><th>社員番号</th><th>姓</th><th>名</th><th>メール</th><th>部署</th><th>状態</th></tr>
              </thead>
              <tbody>
                <tr><td className="mono">A0031</td><td>新井</td><td>真由</td><td>arai.m@adfproject.jp</td><td>制作進行</td><td><Badge tone="success">新規</Badge></td></tr>
                <tr><td className="mono">A0032</td><td>西村</td><td>誠</td><td>nishimura.m@adfproject.jp</td><td>原画</td><td><Badge tone="success">新規</Badge></td></tr>
                <tr><td className="mono">A0033</td><td>大野</td><td>颯太</td><td>ono.s@adfproject.jp</td><td>動画</td><td><Badge tone="success">新規</Badge></td></tr>
              </tbody>
            </table>
          </div>
        </>
      )}
      {stage === "done" && (
        <div style={{ textAlign: "center", padding: 24 }}>
          <Icon name="check" size={32} style={{ color: "var(--success)" }} />
          <div style={{ fontSize: 13, marginTop: 8 }}>インポートが完了しました</div>
        </div>
      )}
    </Modal>
  );
};

Object.assign(window, {
  LoginScreen, Sidebar, TopBar, MenuScreen,
  StaffScreen, WorkScreen, DeptScreen, RoleScreen, ClientScreen,
  AccessUsersScreen, AuditLogScreen, CSVImportModal, CategoryManagerModal,
});

社内システム
共通マスター登録

こんにちは、{currentUser.lastName}さん

スタッフマスター

作品マスター

取引先マスター

部署マスター

職種マスター

最近の変更

スタッフ

社内システム共通マスター登録

こんにちは、{currentUser.lastName}さん

スタッフマスター

作品マスター

取引先マスター

部署マスター

職種マスター

最近の変更

スタッフ

社内システム
共通マスター登録