All files / src/components/opc TaskCard.svelte

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script>
  import { deleteTask, assignTask, getTaskTime } from "../../lib/opc-api.js";
 
  let { task, agents = [], onEdit, onDelete, onAssign } = $props();
 
  let showActions = $state(false);
  let timeInfo = $state(null);
 
  const priorityColors = {
    low: "bg-slate-200 text-slate-700",
    medium: "bg-blue-100 text-blue-700",
    high: "bg-amber-100 text-amber-700",
    urgent: "bg-rose-100 text-rose-700"
  };
 
  async function loadTimeInfo() {
    if (task.status === "in_progress") {
      try {
        timeInfo = await getTaskTime(task.id);
      } catch (e) {
        console.error("Failed to load time info:", e);
      }
    }
  }
 
  $effect(() => {
    loadTimeInfo();
  });
 
  async function handleDelete() {
    if (confirm(`Delete task "${task.title}"?`)) {
      try {
        await deleteTask(task.id);
        onDelete?.(task.id);
      } catch (e) {
        alert("Failed to delete task: " + e.message);
      }
    }
  }
 
  async function handleAssignAgent(agentId) {
    try {
      await assignTask(task.id, agentId, "agent");
      onAssign?.(task.id, agentId, "agent");
    } catch (e) {
      alert("Failed to assign agent: " + e.message);
    }
  }
 
  function getAgentIcon(agentId) {
    const icons = {
      pm: "📋",
      cto: "💻",
      coo: "⚙️",
      ceo: "🎯",
      marketing: "📢",
      social_media: "📱"
    };
    return icons[agentId] || "🤖";
  }
</script>
 
<div
  class="bg-white dark:bg-surface-800 rounded-lg p-3 mb-2 shadow-sm border border-surface-200 dark:border-surface-700 cursor-move hover:shadow-md transition-shadow"
  onmouseenter={() => showActions = true}
  onmouseleave={() => showActions = false}
>
  <!-- Priority badge -->
  <div class="flex items-start justify-between mb-2">
    <span class="text-xs px-2 py-0.5 rounded {priorityColors[task.priority] || priorityColors.medium}">
      {task.priority}
    </span>
    {#if showActions}
      <div class="flex gap-1">
        <button
          onclick={() => onEdit?.(task)}
          class="text-xs text-surface-600 hover:text-primary-600 dark:text-surface-400"
          title="Edit"
        >
          ✏️
        </button>
        <button
          onclick={handleDelete}
          class="text-xs text-surface-600 hover:text-rose-600 dark:text-surface-400"
          title="Delete"
        >
          🗑️
        </button>
      </div>
    {/if}
  </div>
 
  <!-- Title -->
  <h4 class="font-medium text-surface-900 dark:text-surface-100 mb-1 text-sm">
    {task.title}
  </h4>
 
  <!-- Description preview -->
  {#if task.description}
    <p class="text-xs text-surface-600 dark:text-surface-400 mb-2 line-clamp-2">
      {task.description}
    </p>
  {/if}
 
  <!-- Tags -->
  {#if task.tags && task.tags.length > 0}
    <div class="flex flex-wrap gap-1 mb-2">
      {#each task.tags as tag}
        <span class="text-xs px-1.5 py-0.5 rounded bg-surface-100 dark:bg-surface-700 text-surface-700 dark:text-surface-300">
          {tag}
        </span>
      {/each}
    </div>
  {/if}
 
  <!-- Assignee and time -->
  <div class="flex items-center justify-between text-xs text-surface-600 dark:text-surface-400">
    <div class="flex items-center gap-1">
      {#if task.assigned_to}
        {#if task.assigned_type === "agent"}
          <span title={task.assigned_to}>
            {getAgentIcon(task.assigned_to)}
          </span>
        {:else}
          <span>👤 {task.assigned_to}</span>
        {/if}
      {:else}
        <button
          onclick={() => showActions = true}
          class="text-surface-500 hover:text-primary-600"
          title="Assign"
        >
          Unassigned
        </button>
      {/if}
    </div>
 
    {#if timeInfo && timeInfo.total_hours > 0}
      <span class="text-xs text-surface-500">
        ⏱️ {timeInfo.total_hours}h
      </span>
    {/if}
  </div>
 
  <!-- Due date -->
  {#if task.due_date}
    <div class="text-xs text-surface-500 mt-1">
      📅 {new Date(task.due_date).toLocaleDateString()}
    </div>
  {/if}
 
  <!-- Quick assign to agent (when hovering) -->
  {#if showActions && !task.assigned_to}
    <div class="mt-2 pt-2 border-t border-surface-200 dark:border-surface-700">
      <div class="text-xs text-surface-600 mb-1">Assign to agent:</div>
      <div class="flex gap-1">
        {#each agents as agent}
          <button
            onclick={() => handleAssignAgent(agent.id)}
            class="text-lg hover:scale-110 transition-transform"
            title={agent.name}
          >
            {getAgentIcon(agent.id)}
          </button>
        {/each}
      </div>
    </div>
  {/if}
</div>