WorkflowMCP

<script> import { onMount } from 'svelte'; import GanttChart from '$lib/components/GanttChart.svelte'; let tasks = []; let projects = []; let loading = true; let error = null; let selectedView = 'tasks'; // 'tasks' or 'projects' onMount(async () => { await loadData(); }); async function loadData() { try { loading = true; const [tasksResponse, projectsResponse] = await Promise.all([ fetch('/api/tasks'), fetch('/api/projects') ]); if (tasksResponse.ok && projectsResponse.ok) { tasks = await tasksResponse.json(); projects = await projectsResponse.json(); } else { error = 'Failed to load data'; } } catch (e) { error = 'Error loading data: ' + e.message; } finally { loading = false; } } </script> <svelte:head> <title>간트 차트 - WorkflowMCP Dashboard</title> </svelte:head> <div class="space-y-6"> <div class="flex items-center justify-between"> <h1 class="text-3xl font-bold text-gray-900">간트 차트</h1> <div class="flex items-center space-x-4"> <!-- View Selector --> <div class="flex bg-gray-100 rounded-lg p-1"> <button class="px-3 py-1 text-sm rounded-md transition-colors {selectedView === 'tasks' ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-600 hover:text-gray-900'}" on:click={() => selectedView = 'tasks'} > 작업 기반 </button> <button class="px-3 py-1 text-sm rounded-md transition-colors {selectedView === 'projects' ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-600 hover:text-gray-900'}" on:click={() => selectedView = 'projects'} > 프로젝트 기반 </button> </div> <button on:click={loadData} class="btn btn-secondary"> 🔄 새로고침 </button> </div> </div> {#if loading} <div class="flex justify-center items-center h-96"> <div class="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-600"></div> </div> {:else if error} <div class="bg-red-50 border border-red-200 rounded-md p-4"> <div class="text-red-800">{error}</div> </div> {:else} <!-- Chart Container --> <div class="card"> <div class="mb-4 flex items-center justify-between"> <h3 class="text-lg font-semibold text-gray-900"> {selectedView === 'tasks' ? '작업별 타임라인' : '프로젝트별 타임라인'} </h3> <div class="text-sm text-gray-500"> 총 {selectedView === 'tasks' ? tasks.length : projects.length}개 항목 </div> </div> <GanttChart data={selectedView === 'tasks' ? tasks : projects} type={selectedView} /> </div> <!-- Legend --> <div class="card"> <h3 class="text-lg font-semibold text-gray-900 mb-4">범례</h3> <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> <div class="flex items-center space-x-2"> <div class="w-4 h-4 bg-gray-400 rounded"></div> <span class="text-sm text-gray-600">대기중</span> </div> <div class="flex items-center space-x-2"> <div class="w-4 h-4 bg-blue-500 rounded"></div> <span class="text-sm text-gray-600">진행중</span> </div> <div class="flex items-center space-x-2"> <div class="w-4 h-4 bg-green-500 rounded"></div> <span class="text-sm text-gray-600">완료</span> </div> <div class="flex items-center space-x-2"> <div class="w-4 h-4 bg-red-500 rounded"></div> <span class="text-sm text-gray-600">지연</span> </div> </div> </div> {/if} </div>