[FEAT] Implement modules page projects modules

api/internal/handler/module.go

@@ -140,14 +140,26 @@ func (h *ModuleHandler) Update(c *gin.Context) {
 		return
 	}
 	var body struct {
-		Name        string `json:"name"`
-		Description string `json:"description"`
-		Status      string `json:"status"`
-		StartDate   string `json:"start_date"`
-		TargetDate  string `json:"target_date"`
+		Name        string  `json:"name"`
+		Description string  `json:"description"`
+		Status      string  `json:"status"`
+		StartDate   string  `json:"start_date"`
+		TargetDate  string  `json:"target_date"`
+		LeadID      *string `json:"lead_id"`
 	}
 	_ = c.ShouldBindJSON(&body)
-	mod, err := h.Module.Update(c.Request.Context(), slug, projectID, moduleID, user.ID, body.Name, body.Description, body.Status, parseOptionalDate(body.StartDate), parseOptionalDate(body.TargetDate))
+	var leadIDPtr *uuid.UUID
+	if body.LeadID != nil {
+		if *body.LeadID != "" {
+			id, parseErr := uuid.Parse(*body.LeadID)
+			if parseErr != nil {
+				c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid lead_id", "detail": "must be a valid UUID"})
+				return
+			}
+			leadIDPtr = &id
+		}
+	}
+	mod, err := h.Module.Update(c.Request.Context(), slug, projectID, moduleID, user.ID, body.Name, body.Description, body.Status, parseOptionalDate(body.StartDate), parseOptionalDate(body.TargetDate), body.LeadID != nil, leadIDPtr)
 	if err != nil {
 		if err == service.ErrModuleNotFound || err == service.ErrProjectForbidden || err == service.ErrProjectNotFound {
 			c.JSON(http.StatusNotFound, gin.H{"error": "Not found"})

api/internal/service/module.go

@@ -100,7 +100,7 @@ func (s *ModuleService) Get(ctx context.Context, workspaceSlug string, projectID
 	return mod, nil
 }
 
-func (s *ModuleService) Update(ctx context.Context, workspaceSlug string, projectID, moduleID uuid.UUID, userID uuid.UUID, name, description, status string, startDate, targetDate *time.Time) (*model.Module, error) {
+func (s *ModuleService) Update(ctx context.Context, workspaceSlug string, projectID, moduleID uuid.UUID, userID uuid.UUID, name, description, status string, startDate, targetDate *time.Time, leadIDSet bool, leadID *uuid.UUID) (*model.Module, error) {
 	mod, err := s.Get(ctx, workspaceSlug, projectID, moduleID, userID)
 	if err != nil {
 		return nil, err
@@ -120,6 +120,9 @@ func (s *ModuleService) Update(ctx context.Context, workspaceSlug string, projec
 	if targetDate != nil {
 		mod.TargetDate = targetDate
 	}
+	if leadIDSet {
+		mod.LeadID = leadID
+	}
 	if err := s.ms.Update(ctx, mod); err != nil {
 		return nil, err
 	}

ui/src/api/types.ts

@@ -375,6 +375,7 @@ export interface ModuleApiResponse {
   status: string;
   project_id: string;
   workspace_id: string;
+  lead_id?: string | null;
   sort_order?: number;
   issue_count?: number;
   created_at: string;

ui/src/components/AddExistingWorkItemModal.tsx

@@ -0,0 +1,274 @@
+import { useEffect, useState, useMemo } from "react";
+import { createPortal } from "react-dom";
+import { Button } from "./ui";
+import { issueService } from "../services/issueService";
+import { moduleService } from "../services/moduleService";
+import type { IssueApiResponse } from "../api/types";
+
+const IconSearch = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    aria-hidden
+  >
+    <circle cx="11" cy="11" r="8" />
+    <path d="m21 21-4.35-4.35" />
+  </svg>
+);
+
+function displayId(issue: IssueApiResponse, projectIdentifier: string): string {
+  return `${projectIdentifier}-${issue.sequence_id ?? issue.id.slice(-4)}`;
+}
+
+export interface AddExistingWorkItemModalProps {
+  open: boolean;
+  onClose: () => void;
+  workspaceSlug: string;
+  projectId: string;
+  moduleId: string;
+  projectIdentifier: string;
+  onAdded?: () => void;
+}
+
+export function AddExistingWorkItemModal({
+  open,
+  onClose,
+  workspaceSlug,
+  projectId,
+  moduleId,
+  projectIdentifier,
+  onAdded,
+}: AddExistingWorkItemModalProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [projectIssues, setProjectIssues] = useState<IssueApiResponse[]>([]);
+  const [moduleIssueIds, setModuleIssueIds] = useState<Set<string>>(new Set());
+  const [loading, setLoading] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!open || !workspaceSlug || !projectId || !moduleId) return;
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    Promise.all([
+      issueService.list(workspaceSlug, projectId, { limit: 2000 }),
+      moduleService.listIssueIds(workspaceSlug, projectId, moduleId),
+    ])
+      .then(([issues, ids]) => {
+        if (cancelled) return;
+        setProjectIssues(issues ?? []);
+        setModuleIssueIds(new Set(ids ?? []));
+        setSelectedIds(new Set());
+      })
+      .catch(() => {
+        if (!cancelled) setError("Failed to load work items");
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [open, workspaceSlug, projectId, moduleId]);
+
+  useEffect(() => {
+    if (!open) {
+      setSearchQuery("");
+      setSelectedIds(new Set());
+    }
+  }, [open]);
+
+  const availableIssues = useMemo(() => {
+    return projectIssues.filter((i) => !moduleIssueIds.has(i.id));
+  }, [projectIssues, moduleIssueIds]);
+
+  const filteredIssues = useMemo(() => {
+    if (!searchQuery.trim()) return availableIssues;
+    const q = searchQuery.trim().toLowerCase();
+    return availableIssues.filter((issue) => {
+      const id = displayId(issue, projectIdentifier);
+      const name = (issue.name ?? "").toLowerCase();
+      return id.toLowerCase().includes(q) || name.includes(q);
+    });
+  }, [availableIssues, searchQuery, projectIdentifier]);
+
+  const selectAll = () => {
+    if (filteredIssues.length === 0) return;
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      filteredIssues.forEach((i) => next.add(i.id));
+      return next;
+    });
+  };
+
+  const toggleOne = (id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const handleAdd = async () => {
+    if (selectedIds.size === 0) return;
+    setSubmitting(true);
+    setError(null);
+    try {
+      const ids = Array.from(selectedIds);
+      const BATCH = 5;
+      for (let i = 0; i < ids.length; i += BATCH) {
+        await Promise.all(
+          ids
+            .slice(i, i + BATCH)
+            .map((issueId) =>
+              moduleService.addIssue(
+                workspaceSlug,
+                projectId,
+                moduleId,
+                issueId,
+              ),
+            ),
+        );
+      }
+      onAdded?.();
+      onClose();
+    } catch {
+      setError("Failed to add work items");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const selectedCount = selectedIds.size;
+  const selectionLabel =
+    selectedCount === 0
+      ? "No work items selected"
+      : `${selectedCount} work item${selectedCount === 1 ? "" : "s"} selected`;
+
+  const footer = (
+    <div className="flex w-full items-center justify-between">
+      <button
+        type="button"
+        onClick={selectAll}
+        className="text-sm font-medium text-(--brand-default) hover:underline"
+      >
+        Select all
+      </button>
+      <div className="flex gap-2">
+        <Button variant="secondary" onClick={onClose} disabled={submitting}>
+          Cancel
+        </Button>
+        <Button
+          onClick={handleAdd}
+          disabled={selectedCount === 0 || submitting}
+          className="gap-1.5"
+        >
+          Add selected work items
+        </Button>
+      </div>
+    </div>
+  );
+
+  if (!open) return null;
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="add-existing-work-item-title"
+    >
+      <div
+        className="absolute inset-0 bg-(--bg-backdrop)"
+        onClick={onClose}
+        aria-hidden
+      />
+      <div
+        className="relative z-10 flex w-full max-w-md flex-col rounded-lg border border-(--border-subtle) bg-(--bg-surface-1) shadow-(--shadow-overlay)"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex flex-col gap-3 border-b border-(--border-subtle) px-5 py-4">
+          <div className="relative">
+            <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-(--txt-icon-tertiary)">
+              <IconSearch />
+            </span>
+            <input
+              type="text"
+              placeholder="Type to search"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="h-9 w-full rounded-md border border-(--border-subtle) bg-(--bg-surface-1) py-2 pl-9 pr-3 text-sm text-(--txt-primary) placeholder:text-(--txt-placeholder) focus:outline-none"
+              aria-label="Search work items"
+            />
+          </div>
+          <span
+            id="add-existing-work-item-title"
+            className="inline-flex w-fit rounded-full bg-(--bg-layer-2) px-3 py-1 text-sm text-(--txt-secondary)"
+          >
+            {selectionLabel}
+          </span>
+        </div>
+
+        <div className="flex min-h-0 flex-1 flex-col overflow-hidden px-5 py-4">
+          {error && (
+            <p className="mb-2 text-sm text-(--txt-danger-primary)">{error}</p>
+          )}
+          {loading ? (
+            <p className="py-8 text-center text-sm text-(--txt-tertiary)">
+              Loading work items…
+            </p>
+          ) : filteredIssues.length === 0 ? (
+            <p className="py-8 text-center text-sm text-(--txt-tertiary)">
+              {availableIssues.length === 0
+                ? "No other work items in this project."
+                : "No matching work items."}
+            </p>
+          ) : (
+            <ul className="max-h-64 overflow-y-auto divide-y divide-(--border-subtle)">
+              {filteredIssues.map((issue) => {
+                const id = displayId(issue, projectIdentifier);
+                const checked = selectedIds.has(issue.id);
+                return (
+                  <li key={issue.id}>
+                    <label className="flex cursor-pointer items-center gap-3 py-2.5 hover:bg-(--bg-layer-1-hover)">
+                      <input
+                        type="checkbox"
+                        checked={checked}
+                        onChange={() => toggleOne(issue.id)}
+                        className="size-4 shrink-0 rounded border-(--border-subtle)"
+                      />
+                      <span
+                        className="size-2 shrink-0 rounded-full bg-(--txt-primary)"
+                        aria-hidden
+                      />
+                      <span className="min-w-0 flex-1 truncate text-sm">
+                        <span className="font-medium text-(--txt-primary)">
+                          {id}
+                        </span>
+                        <span className="ml-2 text-(--txt-secondary)">
+                          {issue.name || "—"}
+                        </span>
+                      </span>
+                    </label>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
+
+        <div className="flex w-full border-t border-(--border-subtle) px-5 py-4">
+          {footer}
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}