@locusai/web 0.1.0

package/src/components/TaskCard.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { type Task, TaskPriority } from "@locusai/shared";
+import { Calendar, Lock, MoreHorizontal, Tag, Trash2 } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+
+interface TaskCardProps {
+  task: Task;
+  onClick: () => void;
+  onDelete: (id: number) => void;
+  isDragging?: boolean;
+}
+
+const PRIORITY_COLORS: Record<TaskPriority, string> = {
+  [TaskPriority.LOW]: "var(--text-muted)",
+  [TaskPriority.MEDIUM]: "#38bdf8",
+  [TaskPriority.HIGH]: "#f59e0b",
+  [TaskPriority.CRITICAL]: "#ef4444",
+};
+
+export function TaskCard({
+  task,
+  onClick,
+  onDelete,
+  isDragging,
+}: TaskCardProps) {
+  const [showMenu, setShowMenu] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setShowMenu(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const isLocked =
+    task.lockedBy && (!task.lockExpiresAt || task.lockExpiresAt > Date.now());
+  const priority = (task.priority as TaskPriority) || TaskPriority.MEDIUM;
+
+  return (
+    <div
+      className={cn(
+        "group relative bg-card border rounded-xl overflow-hidden shadow-sm transition-all hover:shadow-md hover:border-muted-foreground/20 cursor-pointer",
+        isDragging && "opacity-50 scale-95 rotate-1 shadow-lg"
+      )}
+      draggable
+      onDragStart={(e) => {
+        e.dataTransfer.setData("taskId", String(task.id));
+        e.dataTransfer.effectAllowed = "move";
+      }}
+    >
+      <div className="p-4" onClick={onClick}>
+        <div className="flex items-start gap-2 mb-3">
+          <div className="flex flex-col items-center gap-1.5 pt-1">
+            <span
+              className="h-2 w-2 rounded-full shrink-0"
+              style={{ background: PRIORITY_COLORS[priority] }}
+              title={`Priority: ${priority}`}
+            />
+            {isLocked && (
+              <span title={`Locked by ${task.lockedBy}`}>
+                <Lock size={12} className="text-muted-foreground" />
+              </span>
+            )}
+          </div>
+          <h4 className="text-[14px] font-semibold leading-tight text-foreground flex-1">
+            {task.title}
+          </h4>
+        </div>
+
+        {task.labels.length > 0 && (
+          <div className="flex flex-wrap gap-1.5 mb-4">
+            {task.labels.slice(0, 3).map((l) => (
+              <span
+                key={l}
+                className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-sm bg-secondary text-[10px] font-bold uppercase tracking-wider text-muted-foreground"
+              >
+                <Tag size={10} /> {l}
+              </span>
+            ))}
+            {task.labels.length > 3 && (
+              <span className="px-1.5 py-0.5 rounded-sm bg-secondary text-[10px] font-bold text-muted-foreground">
+                +{task.labels.length - 3}
+              </span>
+            )}
+          </div>
+        )}
+
+        <div className="flex justify-between items-center pt-2 border-t mt-auto">
+          <div className="flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground">
+            <Calendar size={12} />
+            <span>{new Date(task.createdAt).toLocaleDateString()}</span>
+          </div>
+          {task.assigneeRole && (
+            <div className="h-6 w-6 rounded-full bg-primary text-primary-foreground text-[10px] font-bold flex items-center justify-center border shadow-sm">
+              {task.assigneeRole.charAt(0).toUpperCase()}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="absolute top-2 right-2" ref={menuRef}>
+        <button
+          className="p-1 rounded-md text-muted-foreground opacity-0 group-hover:opacity-100 hover:bg-secondary hover:text-foreground transition-all"
+          onClick={(e) => {
+            e.stopPropagation();
+            setShowMenu(!showMenu);
+          }}
+        >
+          <MoreHorizontal size={14} />
+        </button>
+
+        {showMenu && (
+          <div className="absolute top-full right-0 mt-1 w-32 bg-popover border rounded-md p-1 shadow-lg z-50 animate-in fade-in slide-in-from-top-1 duration-200">
+            <button
+              className="flex items-center gap-2 w-full px-2 py-1.5 text-xs font-medium text-destructive rounded-sm hover:bg-destructive/10 transition-colors"
+              onClick={(e) => {
+                e.stopPropagation();
+                if (confirm("Are you sure you want to delete this task?")) {
+                  onDelete(task.id);
+                }
+                setShowMenu(false);
+              }}
+            >
+              <Trash2 size={14} />
+              Delete
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/TaskCreateModal.tsx

@@ -0,0 +1,243 @@
+"use client";
+
+import { AssigneeRole, TaskPriority, TaskStatus } from "@locusai/shared";
+import { Plus, X } from "lucide-react";
+import { useState } from "react";
+import { Button, Dropdown, Input, Modal, Textarea } from "@/components/ui";
+import { taskService } from "@/services";
+
+interface TaskCreateModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onCreated: () => void;
+  initialStatus?: TaskStatus;
+  sprintId?: number | null;
+}
+
+const STATUS_OPTIONS = Object.values(TaskStatus).map((status) => ({
+  value: status,
+  label: status.replace(/_/g, " "),
+  color: getStatusColor(status),
+}));
+
+const PRIORITY_OPTIONS = [
+  { value: TaskPriority.LOW, label: "Low", color: "var(--text-muted)" },
+  { value: TaskPriority.MEDIUM, label: "Medium", color: "#38bdf8" },
+  { value: TaskPriority.HIGH, label: "High", color: "#f59e0b" },
+  { value: TaskPriority.CRITICAL, label: "Critical", color: "#ef4444" },
+];
+
+const ASSIGNEE_OPTIONS = Object.values(AssigneeRole).map((role) => ({
+  value: role,
+  label: role.charAt(0) + role.slice(1).toLowerCase(),
+}));
+
+function getStatusColor(status: TaskStatus): string {
+  const colors: Record<TaskStatus, string> = {
+    [TaskStatus.BACKLOG]: "#64748b",
+    [TaskStatus.IN_PROGRESS]: "#f59e0b",
+    [TaskStatus.REVIEW]: "#a855f7",
+    [TaskStatus.VERIFICATION]: "#38bdf8",
+    [TaskStatus.DONE]: "#10b981",
+    [TaskStatus.BLOCKED]: "#ef4444",
+  };
+  return colors[status];
+}
+
+export function TaskCreateModal({
+  isOpen,
+  onClose,
+  onCreated,
+  initialStatus = TaskStatus.BACKLOG,
+  sprintId = null,
+}: TaskCreateModalProps) {
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [status, setStatus] = useState<TaskStatus>(initialStatus);
+  const [priority, setPriority] = useState<TaskPriority>(TaskPriority.MEDIUM);
+  const [assigneeRole, setAssigneeRole] = useState<AssigneeRole | undefined>();
+  const [labels, setLabels] = useState<string[]>([]);
+  const [labelInput, setLabelInput] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const resetForm = () => {
+    setTitle("");
+    setDescription("");
+    setStatus(initialStatus);
+    setPriority(TaskPriority.MEDIUM);
+    setAssigneeRole(undefined);
+    setLabels([]);
+    setLabelInput("");
+  };
+
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+
+  const handleAddLabel = () => {
+    const trimmedLabel = labelInput.trim();
+    if (trimmedLabel && !labels.includes(trimmedLabel)) {
+      setLabels([...labels, trimmedLabel]);
+      setLabelInput("");
+    }
+  };
+
+  const handleRemoveLabel = (label: string) => {
+    setLabels(labels.filter((l) => l !== label));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!title.trim()) return;
+
+    setIsSubmitting(true);
+    try {
+      await taskService.create({
+        title: title.trim(),
+        description,
+        status,
+        priority,
+        labels,
+        assigneeRole,
+        sprintId,
+      });
+
+      handleClose();
+      onCreated();
+    } catch (err) {
+      console.error("Failed to create task:", err);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title="Create New Task"
+      size="lg"
+    >
+      <form onSubmit={handleSubmit} className="space-y-8 py-2">
+        <div className="space-y-3">
+          <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground ml-1">
+            Task Title <span className="text-destructive">*</span>
+          </label>
+          <Input
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder="e.g. Implement authentication flow"
+            autoFocus
+            className="text-lg font-medium h-12"
+          />
+        </div>
+
+        <div className="space-y-3">
+          <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground ml-1">
+            Description
+          </label>
+          <Textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder="Provide context for this task..."
+            rows={5}
+            className="resize-none"
+          />
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <Dropdown
+            label="Initial Status"
+            value={status}
+            onChange={setStatus}
+            options={STATUS_OPTIONS}
+          />
+          <Dropdown
+            label="Priority Level"
+            value={priority}
+            onChange={setPriority}
+            options={PRIORITY_OPTIONS}
+          />
+          <Dropdown
+            label="Primary Assignee"
+            value={assigneeRole}
+            onChange={setAssigneeRole}
+            options={ASSIGNEE_OPTIONS}
+            placeholder="Unassigned"
+          />
+        </div>
+
+        <div className="space-y-4">
+          <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground ml-1">
+            Task Labels
+          </label>
+          <div className="flex flex-wrap gap-2 min-h-[32px]">
+            {labels.length === 0 && (
+              <span className="text-xs text-muted-foreground/50 italic py-1">
+                No labels added...
+              </span>
+            )}
+            {labels.map((label) => (
+              <span
+                key={label}
+                className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-secondary text-secondary-foreground text-[11px] font-semibold border shadow-sm transition-all hover:bg-secondary/80 translate-y-0 hover:-translate-y-0.5"
+              >
+                {label}
+                <button
+                  type="button"
+                  onClick={() => handleRemoveLabel(label)}
+                  className="text-muted-foreground hover:text-destructive transition-colors shrink-0"
+                >
+                  <X size={12} />
+                </button>
+              </span>
+            ))}
+          </div>
+          <div className="flex gap-3">
+            <Input
+              value={labelInput}
+              onChange={(e) => setLabelInput(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  handleAddLabel();
+                }
+              }}
+              placeholder="Add labels (e.g. Bug, Feature)..."
+              className="flex-1 h-10"
+            />
+            <Button
+              type="button"
+              onClick={handleAddLabel}
+              variant="secondary"
+              size="icon"
+              disabled={!labelInput.trim()}
+              className="h-10 w-10 shrink-0"
+            >
+              <Plus size={18} />
+            </Button>
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-3 pt-6 border-t mt-4">
+          <Button
+            type="button"
+            onClick={handleClose}
+            variant="ghost"
+            className="px-6"
+          >
+            Discard
+          </Button>
+          <Button
+            type="submit"
+            disabled={!title.trim() || isSubmitting}
+            className="px-8 shadow-lg shadow-primary/10"
+          >
+            {isSubmitting ? "Creating..." : "Create Task"}
+          </Button>
+        </div>
+      </form>
+    </Modal>
+  );
+}