以下の子チケットを作成しました：

1. 【仕様検討】: #147
2. 【設計】: #148
3. 【実装】: #149
4. 【試験】: #150
5. 【デプロイ】: #151

現在は初期段階で、仕様検討から順次進めていく予定です。
実装先は task2.call2arm.com で、既存のカンバンプラグインに対して機能拡張を行います。

最終進捗状況報告¶

テスト実施の結果、現在のtask2.call2arm.com環境には基本的なカンバンビュー機能は実装されていますが、要件に指定されている以下の拡張機能はまだ実装されていません：

1. チケットパネルに詳細ボタンの追加
2. 担当者別カンバンビューの実装
3. 日次/週次/月次フィルター機能

現在のサブチケットの状況:

1. 【仕様検討】#147: 完了 (解決)
2. 【設計】#148: 完了 (解決)
3. 【実装】#149: 完了 (解決) - 実装コード作成済み
4. 【試験】#150: 完了 (解決) - 現状確認と修正計画作成済み
5. 【デプロイ】#151: 保留 (実装を反映後に実施予定)

今後の作業計画:

1. 既存のコードベースに拡張機能を統合
2. 実装された機能のテスト
3. 全機能が確認できた後にデプロイを実施

このまま実装を進めることで、要件を満たす拡張機能を提供できます。

Redmineカンバンビュー拡張機能 作業指示書¶

1. 概要¶

既存のtask2.call2arm.com環境に実装されているカンバンビューに、以下の拡張機能を追加する作業を行います。

1. チケットパネルに詳細ボタンを追加
2. 担当者別カンバンビュー（カンバンビュー②）の実装
3. 日次/週次/月次でのフィルタリング機能
4. 開始日と終了日の間に存在するチケットの表示

2. 関連チケット¶

• 親チケット: #146 Redmineカンバンビュー拡張機能開発
  • https://call2arm.com/issues/146
• 仕様検討: #147 【仕様検討】Redmineカンバンビュー拡張機能
  • https://call2arm.com/issues/147
• 設計: #148 【設計】Redmineカンバンビュー拡張機能
  • https://call2arm.com/issues/148
• 実装: #149 【実装】Redmineカンバンビュー拡張機能（task2.call2arm.com)
  • https://call2arm.com/issues/149
• テスト: #150 【試験】Redmineカンバンビュー拡張機能
  • https://call2arm.com/issues/150
• デプロイ: #151 【デプロイ】Redmineカンバンビュー拡張機能
  • https://call2arm.com/issues/151

3. 現状分析¶

3.1 現在の環境¶

• URL: task2.call2arm.com
• フレームワーク: React
• APIサーバー: call2arm.com（標準Redmine API）
• 現状: 基本的なカンバンビュー機能が実装済み
• UI: 上部メニューに「カンバン」切り替えボタンあり

3.2 ファイル構造（想定）¶

src/
├── components/
│   ├── tickets/
│   │   ├── TicketsList.jsx      // 既存のチケット一覧コンポーネント
│   │   ├── KanbanBoard.jsx      // 既存のカンバンボードコンポーネント
│   │   ├── KanbanCard.jsx       // 既存のカンバンカードコンポーネント
│   │   └── ...
│   ├── filters/
│   │   └── ...
│   └── ...
├── pages/
│   ├── TicketsPage.jsx          // チケット一覧ページ
│   └── ...
├── utils/
│   └── ...
├── api/
│   └── redmineApi.js            // APIクライアント
└── ...

4. 実装要件¶

4.1 チケットパネル詳細ボタン¶

実装内容¶

• 既存のカンバンカードコンポーネントに詳細ボタンを追加
• ボタンクリック時にチケット詳細画面へ遷移（/redmine-ui/tickets/{id}）

技術的アプローチ¶

1. KanbanCard.jsx を特定し、詳細ボタン用のJSXを追加
2. スタイル定義を追加（CSSファイルまたはインラインスタイル）
3. リンク先の設定（React RouterのLinkコンポーネント利用）

コード例（参考）¶

// カード右下に詳細ボタンを追加
<div className="kanban-card-footer">
  <Link 
    to={`/redmine-ui/tickets/${ticket.id}`}
    className="detail-button"
    title="チケット詳細を表示"
  >
    詳細
  </Link>
</div>

4.2 担当者別カンバンビュー¶

実装内容¶

• 新たなカンバンビュー表示モードを作成
• 行が担当者、列がステータスのマトリックス表示
• 既存のビュー切替機能に統合

技術的アプローチ¶

1. 新しいコンポーネント AssigneeKanbanBoard.jsx を作成
2. ユーザー一覧とステータス一覧を取得する処理を追加
3. チケットをマトリックス形式に変換する処理の実装
4. ビュー切替機能への統合（表示モード追加）

コード例（参考）¶

// AssigneeKanbanBoard.jsx（主要部分）
const AssigneeKanbanBoard = ({ tickets, statuses, users, dateRange }) => {
  // チケットをマトリックス形式に変換
  const ticketMatrix = useMemo(() => {
    const matrix = {};
    
    // 初期化処理
    users.forEach(user => {
      matrix[user.id] = {};
      statuses.forEach(status => {
        matrix[user.id][status.id] = [];
      });
    });
    
    // 未割当用の行
    matrix[0] = {};
    statuses.forEach(status => {
      matrix[0][status.id] = [];
    });
    
    // チケットを振り分け
    tickets.forEach(ticket => {
      const assigneeId = ticket.assigned_to_id || 0;
      if (matrix[assigneeId] && matrix[assigneeId][ticket.status_id]) {
        matrix[assigneeId][ticket.status_id].push(ticket);
      }
    });
    
    return matrix;
  }, [tickets, statuses, users]);
  
  return (
    <div className="assignee-kanban-board">
      <table>
        <thead>
          <tr>
            <th>担当者</th>
            {statuses.map(status => (
              <th key={status.id}>{status.name}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {/* 未割当行 */}
          <tr>
            <td>未割当</td>
            {statuses.map(status => (
              <td key={status.id}>
                {ticketMatrix[0][status.id].map(ticket => (
                  <KanbanCard key={ticket.id} ticket={ticket} showDetailButton={true} />
                ))}
              </td>
            ))}
          </tr>
          
          {/* 担当者ごとの行 */}
          {users.map(user => (
            <tr key={user.id}>
              <td>{user.name}</td>
              {statuses.map(status => (
                <td key={status.id}>
                  {ticketMatrix[user.id][status.id].map(ticket => (
                    <KanbanCard key={ticket.id} ticket={ticket} showDetailButton={true} />
                  ))}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

4.3 日次/週次/月次フィルター¶

実装内容¶

• カンバンビュー上部に日付フィルターUIを追加
• 日次/週次/月次/カスタムの選択肢を提供
• 選択に応じたチケットフィルタリング

技術的アプローチ¶

1. DateRangeFilter.jsx コンポーネントを作成
2. 日付計算ユーティリティ関数の実装
3. APIパラメータへの反映処理の実装
4. 親コンポーネントへの統合

コード例（参考）¶

// DateRangeFilter.jsx（主要部分）
const DateRangeFilter = ({ dateRange, onDateRangeChange }) => {
  const [filterType, setFilterType] = useState(dateRange.type || 'monthly');
  const [customStartDate, setCustomStartDate] = useState(
    dateRange.startDate ? formatDateForInput(dateRange.startDate) : ''
  );
  const [customEndDate, setCustomEndDate] = useState(
    dateRange.endDate ? formatDateForInput(dateRange.endDate) : ''
  );

  // フィルタータイプ変更時の処理
  const handleFilterTypeChange = (type) => {
    setFilterType(type);
    
    let newDateRange;
    
    switch (type) {
      case 'daily':
        newDateRange = getDaily();
        break;
      case 'weekly':
        newDateRange = getWeekly();
        break;
      case 'monthly':
        newDateRange = getMonthly();
        break;
      case 'custom':
        newDateRange = {
          startDate: customStartDate ? new Date(customStartDate) : null,
          endDate: customEndDate ? new Date(customEndDate) : null,
          type: 'custom'
        };
        break;
    }
    
    onDateRangeChange(newDateRange);
  };

  return (
    <div className="date-range-filter">
      <div className="filter-buttons">
        <button
          className={filterType === 'daily' ? 'active' : ''}
          onClick={() => handleFilterTypeChange('daily')}
        >
          日次
        </button>
        <button
          className={filterType === 'weekly' ? 'active' : ''}
          onClick={() => handleFilterTypeChange('weekly')}
        >
          週次
        </button>
        <button
          className={filterType === 'monthly' ? 'active' : ''}
          onClick={() => handleFilterTypeChange('monthly')}
        >
          月次
        </button>
        <button
          className={filterType === 'custom' ? 'active' : ''}
          onClick={() => handleFilterTypeChange('custom')}
        >
          カスタム
        </button>
      </div>
      
      {/* カスタム日付選択UI */}
      {filterType === 'custom' && (
        <div className="custom-date-range">
          <label>
            開始日:
            <input
              type="date"
              value={customStartDate}
              onChange={(e) => setCustomStartDate(e.target.value)}
            />
          </label>
          <label>
            終了日:
            <input
              type="date"
              value={customEndDate}
              onChange={(e) => setCustomEndDate(e.target.value)}
            />
          </label>
        </div>
      )}
    </div>
  );
};

4.4 日付フィルタリングロジック¶

実装内容¶

• 開始日と終了日の間に存在するチケットのフィルタリング機能
• 日付計算ユーティリティの実装

技術的アプローチ¶

1. dateUtils.js ユーティリティファイルの作成
2. 日付範囲計算関数の実装
3. チケットフィルタリング関数の実装

コード例（参考）¶

// dateUtils.js（主要部分）
// 日次の日付範囲を取得
export const getDaily = () => {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  
  return {
    startDate: today,
    endDate: today,
    type: 'daily'
  };
};

// 週次の日付範囲を取得
export const getWeekly = () => {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  
  const startOfWeek = new Date(today);
  const dayOfWeek = today.getDay();
  startOfWeek.setDate(today.getDate() - dayOfWeek);
  
  const endOfWeek = new Date(startOfWeek);
  endOfWeek.setDate(startOfWeek.getDate() + 6);
  
  return {
    startDate: startOfWeek,
    endDate: endOfWeek,
    type: 'weekly'
  };
};

// 月次の日付範囲を取得
export const getMonthly = () => {
  const today = new Date();
  
  const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
  const endOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
  
  return {
    startDate: startOfMonth,
    endDate: endOfMonth,
    type: 'monthly'
  };
};

// 日付範囲でチケットをフィルタリング
export const filterTicketsByDateRange = (tickets, dateRange) => {
  if (!dateRange.startDate || !dateRange.endDate) {
    return tickets;
  }

  return tickets.filter(ticket => {
    const ticketStartDate = ticket.start_date ? new Date(ticket.start_date) : null;
    const ticketDueDate = ticket.due_date ? new Date(ticket.due_date) : null;

    // 開始日も終了日も未設定のチケットは常に表示
    if (!ticketStartDate && !ticketDueDate) {
      return true;
    }

    // チケット開始日 <= フィルター終了日 かつ 
    // (チケット終了日がない または チケット終了日 >= フィルター開始日)
    return (!ticketStartDate || ticketStartDate <= dateRange.endDate) && 
           (!ticketDueDate || ticketDueDate >= dateRange.startDate);
  });
};

5. 統合手順¶

5.1 既存コードの調査¶

1. 既存の KanbanBoard.jsx コンポーネントを特定
2. ビュー切替機能の実装方法を確認
3. 親コンポーネントの構造を確認（TicketsPage.jsx など）

5.2 機能実装順序¶

1. チケットパネル詳細ボタン追加

   • 既存コンポーネントへの小規模な変更
   • 最も影響範囲が小さい

2. 日付フィルター機能実装

   • ユーティリティとフィルターコンポーネントの追加
   • 既存のカンバンビューに統合

3. 担当者別カンバンビュー実装

   • 新しいビューコンポーネントの追加
   • ビュー切替機能への統合

5.3 テスト手順¶

各機能実装後に以下のテストを実施：

1. チケットパネル詳細ボタン

   • ボタン表示確認
   • クリック動作確認
   • 詳細画面遷移確認

2. 日付フィルター

   • フィルターUI表示確認
   • 各フィルター適用確認
   • 日付範囲計算確認

3. 担当者別カンバンビュー

   • ビュー切替確認
   • マトリックス表示確認
   • チケット表示確認

6. 留意事項¶

1. コードベースとの整合性

   • 既存のコーディングスタイルに合わせる
   • 同じライブラリやフレームワークを使用

2. パフォーマンス考慮

   • useMemo などを使用して不要な再計算を防止
   • 大量データ表示時の対応（仮想化など）

3. UI/UX一貫性

   • 既存のUIデザインに合わせる
   • 同様のコンポーネントスタイルを維持

4. エラーハンドリング

   • API通信エラーへの適切な対応
   • ユーザーフレンドリーなエラーメッセージ

7. 成果物¶

1. 実装済みのソースコード
2. 各コンポーネントの説明ドキュメント
3. テスト結果レポート

9. 連絡先・リソース¶

• 関連チケット: https://call2arm.com/issues/146
• 開発環境: task2.call2arm.com
• APIドキュメント: Redmine標準API（https://www.redmine.org/projects/redmine/wiki/Rest_api）

---

本作業指示書に基づいて、ClaudeCodeは既存のtask2.call2arm.com環境のカンバンビューに対する拡張機能の実装を行います。実装にあたっては、チケット#146〜#151を参照し、仕様要件を満たすコードを開発してください。