社内案件およびスキルマップ

部門案件・人員・スキル管理 デモ

部門案件・人員・スキル管理 デモアプリ

Flask + RDB化を想定した静的HTMLモック。画面構成、入力項目、テーブル関係の確認用。

ダッシュボード 案件一覧 週次進捗 メンバー 部門目標 スキル DB構造

<main>
  <section id="dashboard" class="section active">
    <div class="page-title">
      <div>
        <h2>ダッシュボード</h2>
        <div class="subtext">案件、進捗、目標、スキルの概況を確認する画面。</div>
      </div>
    </div>

    <div class="card-grid">
      <div class="card"><div class="label">登録案件数</div><div class="value" id="statProjects">0</div></div>
      <div class="card"><div class="label">進行中案件</div><div class="value" id="statActiveProjects">0</div></div>
      <div class="card"><div class="label">登録メンバー</div><div class="value" id="statMembers">0</div></div>
      <div class="card"><div class="label">部門目標</div><div class="value" id="statGoals">0</div></div>
    </div>

    <div class="two-col">
      <div class="panel">
        <h3>注意・遅延案件</h3>
        <div id="riskProjectList"></div>
      </div>
      <div class="panel">
        <h3>最新週次進捗</h3>
        <div class="timeline" id="latestProgressList"></div>
      </div>
    </div>
  </section>

  <section id="projects" class="section">
    <div class="page-title">
      <div>
        <h2>案件一覧</h2>
        <div class="subtext">`projects`、`project_assignments`、`project_goal_links` の確認用画面。</div>
      </div>
      <button class="primary" onclick="showSection('progress')">週次進捗を登録</button>
    </div>

    <div class="panel">
      <div class="toolbar">
        <input id="projectSearch" type="search" placeholder="案件名・依頼元・課題で検索" oninput="renderProjects()" />
        <select id="projectStatusFilter" onchange="renderProjects()">
          <option value="">全ステータス</option>
          <option value="planning">構想中</option>
          <option value="poc">PoC中</option>
          <option value="development">開発中</option>
          <option value="operation">運用中</option>
          <option value="closed">完了</option>
          <option value="stopped">停止</option>
        </select>
        <select id="projectOwnerFilter" onchange="renderProjects()">
          <option value="">全担当者</option>
        </select>
      </div>
      <div id="projectTable"></div>
    </div>

    <div class="panel" id="projectDetailPanel">
      <h3>案件詳細</h3>
      <div id="projectDetail" class="empty">案件一覧の「詳細」ボタンを押すと表示されます。</div>
    </div>
  </section>

  <section id="progress" class="section">
    <div class="page-title">
      <div>
        <h2>週次進捗</h2>
        <div class="subtext">`weekly_progress` に相当する入力・一覧画面。</div>
      </div>
    </div>

    <div class="two-col">
      <div class="panel">
        <h3>週次進捗を登録</h3>
        <form id="progressForm">
          <div class="form-grid">
            <div>
              <label for="progressProject">対象案件</label>
              <select id="progressProject" required></select>
            </div>
            <div>
              <label for="progressMember">記入者・担当者</label>
              <select id="progressMember"></select>
            </div>
            <div>
              <label for="weekStart">対象週の開始日</label>
              <input id="weekStart" type="date" required />
            </div>
            <div>
              <label for="progressStatus">進捗状態</label>
              <select id="progressStatus">
                <option value="good">順調</option>
                <option value="watch">注意</option>
                <option value="delay">遅延</option>
                <option value="blocked">停滞</option>
                <option value="closed">完了</option>
              </select>
            </div>
            <div>
              <label for="progressRate">進捗率</label>
              <input id="progressRate" type="number" min="0" max="100" value="50" />
            </div>
            <div class="full">
              <label for="progressSummary">今週の進捗概要</label>
              <textarea id="progressSummary" placeholder="例：データ取得処理を作成し、社外URLの取得確認を実施"></textarea>
            </div>
            <div class="full">
              <label for="achievement">成果</label>
              <textarea id="achievement" placeholder="例：20件中18件のURLから本文取得できた"></textarea>
            </div>
            <div class="full">
              <label for="issue">課題</label>
              <textarea id="issue" placeholder="例：社内URLは権限・認証のため自動取得が難しい"></textarea>
            </div>
            <div class="full">
              <label for="nextAction">次アクション</label>
              <textarea id="nextAction" placeholder="例：社内データは手動CSV投入パターンを検証する"></textarea>
            </div>
          </div>
          <div style="margin-top:14px; display:flex; gap:10px;">
            <button class="primary" type="submit">登録する</button>
            <button class="secondary" type="button" onclick="resetProgressDemo()">デモデータに戻す</button>
          </div>
        </form>
        <p class="small">このHTML版ではブラウザ内のメモリ上で追加されます。DB保存はFlask実装時に行います。</p>
      </div>

      <div class="panel">
        <h3>進捗履歴</h3>
        <div id="progressList"></div>
      </div>
    </div>
  </section>

  <section id="members" class="section">
    <div class="page-title">
      <div>
        <h2>メンバー</h2>
        <div class="subtext">`members`、`project_assignments`、`member_skills` の確認用画面。</div>
      </div>
    </div>
    <div class="panel">
      <div id="memberTable"></div>
    </div>
  </section>

  <section id="goals" class="section">
    <div class="page-title">
      <div>
        <h2>部門目標</h2>
        <div class="subtext">`fiscal_years` と `department_goals`、案件との紐づけを確認する画面。</div>
      </div>
    </div>
    <div class="panel">
      <div class="toolbar">
        <select id="goalYearFilter" onchange="renderGoals()"></select>
      </div>
      <div id="goalTable"></div>
    </div>
  </section>

  <section id="skills" class="section">
    <div class="page-title">
      <div>
        <h2>スキル</h2>
        <div class="subtext">`skill_categories`、`skills`、`member_skills` の確認用画面。</div>
      </div>
    </div>
    <div class="panel">
      <h3>スキル分類別一覧</h3>
      <div class="skill-matrix" id="skillMatrix"></div>
    </div>
    <div class="panel">
      <h3>メンバー別スキル</h3>
      <div id="memberSkillTable"></div>
    </div>
  </section>

  <section id="schema" class="section">
    <div class="page-title">
      <div>
        <h2>DB構造</h2>
        <div class="subtext">Flask + SQLAlchemy化する際のテーブル関係。</div>
      </div>
    </div>
    <div class="panel">
      <h3>ERイメージ</h3>
      <pre style="background:#0f172a;color:#e5e7eb;padding:16px;border-radius:12px;overflow:auto;"><code>members

├─ project_assignments ─ projects
│ └─ project_goal_links ─ department_goals ─ fiscal_years
│
└─ member_skills ─ skills ─ skill_categories

projects
└─ weekly_progress

テーブル一覧