+
+ );
+ }
+ if (!loading && items.length === 0) {
+ return No tickets found.
;
+ }
+ return (
+
+ {items.map((t) => (
+
+ );
+}
+
+type AuthenticatedViewProps = {
+ workspaceId: string | undefined;
+ projects: JiraProject[];
+ presets: JiraTaskPreset[];
+ onStartTask: (ticket: JiraTicket, preset: JiraTaskPreset) => void;
+ onOpenTicket: (ticket: JiraTicket) => void;
+};
+
+function AuthenticatedView({
+ workspaceId,
+ projects,
+ presets,
+ onStartTask,
+ onOpenTicket,
+}: AuthenticatedViewProps) {
+ const state = useFilterState();
+ const search = useJiraSearch(workspaceId ?? null, state.effectiveJql);
+
+ return (
+ <>
+
+ {
+ if (!v) setOpenTicket(null);
+ }}
+ workspaceId={workspaceId}
+ ticketKey={openTicket?.key}
+ initialTicket={openTicket}
+ presets={taskPresets}
+ onStartTask={(ticket, preset) => {
+ setOpenTicket(null);
+ onStartTask(ticket, preset);
+ }}
+ />
+
+ );
+}
diff --git a/apps/web/app/jira/page.tsx b/apps/web/app/jira/page.tsx
new file mode 100644
index 0000000000..daf99a1af2
--- /dev/null
+++ b/apps/web/app/jira/page.tsx
@@ -0,0 +1,65 @@
+import {
+ listWorkspacesAction,
+ listWorkflowsAction,
+ listWorkspaceWorkflowStepsAction,
+} from "@/app/actions/workspaces";
+import { fetchUserSettings } from "@/lib/api";
+import { StateHydrator } from "@/components/state-hydrator";
+import { mapUserSettingsResponse } from "@/lib/ssr/user-settings";
+import { JiraPageClient } from "./jira-page-client";
+import type { Workflow, WorkflowStep, Workspace, UserSettingsResponse } from "@/lib/types/http";
+import type { AppState } from "@/lib/state/store";
+
+export default async function JiraPage() {
+ let workspaces: Workspace[] = [];
+ let workflows: Workflow[] = [];
+ let steps: WorkflowStep[] = [];
+ let workspaceId: string | undefined;
+ let userSettingsResponse: UserSettingsResponse | null = null;
+
+ try {
+ const [workspacesResponse, settingsResponse] = await Promise.all([
+ listWorkspacesAction(),
+ fetchUserSettings({ cache: "no-store" }).catch(() => null),
+ ]);
+ workspaces = workspacesResponse.workspaces;
+ userSettingsResponse = settingsResponse;
+ workspaceId = settingsResponse?.settings?.workspace_id || workspaces[0]?.id;
+
+ if (workspaceId) {
+ const [workflowsRes, stepsRes] = await Promise.all([
+ listWorkflowsAction(workspaceId),
+ listWorkspaceWorkflowStepsAction(workspaceId),
+ ]);
+ workflows = workflowsRes.workflows;
+ steps = stepsRes.steps;
+ }
+ } catch (error) {
+ console.error("Failed to load Jira page data:", error);
+ }
+
+ const mappedUserSettings = mapUserSettingsResponse(userSettingsResponse);
+
+ const initialState: PartialChecking Jira status…
}
+ {loaded && !configured &&
+
+ Import Jira ticket
+ setValue(e.target.value)}
+ placeholder="PROJ-123 or paste ticket URL"
+ className="h-8 text-xs"
+ onKeyDown={(e) => {
+ if (e.key === "Enter" && !e.shiftKey) {
+ e.preventDefault();
+ void submit();
+ }
+ }}
+ />
+ {error && (
+ + {error} +
+ )} +
+
+
+
+
+ Link to Jira ticket
+ setValue(e.target.value)}
+ placeholder="PROJ-123 or paste ticket URL"
+ className="h-8 text-xs"
+ onKeyDown={(e) => {
+ if (e.key === "Enter" && !e.shiftKey) {
+ e.preventDefault();
+ void submit();
+ }
+ }}
+ />
+ {error && (
+ + {error} +
+ )} +
+
+
+
+
+ );
+}
+
+function AuthFields({ form, loading, update }: FieldsRowProps) {
+ return (
+
+
+ update("siteUrl", e.target.value)}
+ disabled={loading}
+ />
+
+
+
+ update("defaultProjectKey", e.target.value.toUpperCase())}
+ disabled={loading}
+ />
+
+
+
+ );
+}
+
+function SessionSnippet() {
+ const [show, setShow] = useState(false);
+ return (
+
+
+
+
+
+
+ update("email", e.target.value)}
+ disabled={loading}
+ />
+
+
+
+ {show && (
+
+ );
+}
+
+type SecretFieldProps = FieldsRowProps & { hasSavedSecret: boolean };
+
+function secretPlaceholder(isApiToken: boolean, hasSavedSecret: boolean): string {
+ if (hasSavedSecret) return "••••••••";
+ return isApiToken ? "paste token here" : "paste cloud.session.token value";
+}
+
+function formatExpiry(expiresAt: string): { label: string; tone: "ok" | "warn" | "danger" } {
+ const diffMs = new Date(expiresAt).getTime() - Date.now();
+ if (Number.isNaN(diffMs)) return { label: "Expiry unknown", tone: "warn" };
+ if (diffMs <= 0) return { label: "Cookie expired — paste a fresh one", tone: "danger" };
+ const hours = diffMs / (60 * 60 * 1000);
+ if (hours < 24) {
+ const h = Math.max(1, Math.round(hours));
+ return { label: `Cookie expires in ${h}h`, tone: "danger" };
+ }
+ const days = Math.round(hours / 24);
+ return {
+ label: `Cookie expires in ${days} day${days === 1 ? "" : "s"}`,
+ tone: days < 7 ? "warn" : "ok",
+ };
+}
+
+const TONE_CLASSES: Record<"ok" | "warn" | "danger", string> = {
+ ok: "text-muted-foreground",
+ warn: "text-amber-600 dark:text-amber-400",
+ danger: "text-destructive",
+};
+
+function CookieExpiry({ expiresAt }: { expiresAt: string }) {
+ const { label, tone } = formatExpiry(expiresAt);
+ const absolute = new Date(expiresAt).toLocaleString();
+ return (
+
+ {COOKIE_INSTRUCTIONS}
+
+ )}
+ + {label} +
+ ); +} + +type SecretFieldPropsWithExpiry = SecretFieldProps & { secretExpiresAt?: string | null }; + +function SecretField({ + form, + loading, + update, + hasSavedSecret, + secretExpiresAt, +}: SecretFieldPropsWithExpiry) { + const isApiToken = form.authMethod === "api_token"; + return ( +
+
+ update("secret", e.target.value)}
+ disabled={loading}
+ />
+ {!isApiToken && hasSavedSecret && secretExpiresAt && (
+
+ );
+}
+
+function TestResultAlert({ result }: { result: TestJiraConnectionResult | null }) {
+ if (!result) return null;
+ return (
+ + Create a token at{" "} + + id.atlassian.com/manage-profile/security/api-tokens + +
+ )} + {!isApiToken &&
+
+
+ {hasConfig && (
+
+ )}
+
+ );
+}
+
+type JiraSettingsProps = {
+ workspaceId: string;
+};
+
+function useJiraSettings(workspaceId: string) {
+ const { toast } = useToast();
+ const [config, setConfig] = useState
+
+ );
+}
+
+export function JiraSettings({ workspaceId }: JiraSettingsProps) {
+ const s = useJiraSettings(workspaceId);
+ const missingSecret = !s.config?.hasSecret && !s.form.secret;
+ const disableSave =
+ s.saving ||
+ !s.form.siteUrl ||
+ (s.form.authMethod === "api_token" && !s.form.email) ||
+ missingSecret;
+ const disableTest = missingSecret;
+
+ return (
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/web/components/jira/jira-ticket-button.tsx b/apps/web/components/jira/jira-ticket-button.tsx
new file mode 100644
index 0000000000..593eeed1b1
--- /dev/null
+++ b/apps/web/components/jira/jira-ticket-button.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { useState } from "react";
+import { IconTicket } from "@tabler/icons-react";
+import { Button } from "@kandev/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@kandev/ui/tooltip";
+import { JiraTicketDialog } from "./jira-ticket-dialog";
+import { extractJiraKey } from "./jira-ticket-common";
+
+export { extractJiraKey };
+
+type JiraTicketButtonProps = {
+ workspaceId: string | null | undefined;
+ taskTitle: string | undefined | null;
+};
+
+// JiraTicketButton sits in the task top bar. It extracts a Jira key from the
+// task title and opens a full ticket dialog on click.
+export function JiraTicketButton({ workspaceId, taskTitle }: JiraTicketButtonProps) {
+ const ticketKey = extractJiraKey(taskTitle);
+ const [open, setOpen] = useState(false);
+
+ if (!workspaceId || !ticketKey) return null;
+
+ return (
+ <>
+
+
+ {isAuth ? "Jira authentication required." : cleanJiraErrorMessage(error)}
+
+ {isAuth && (
+
+ )}
+
+ );
+ }
+
+ return (
+
+ {isAuth ? (
+ <>
+
+ );
+}
diff --git a/apps/web/components/jira/jira-ticket-dialog.tsx b/apps/web/components/jira/jira-ticket-dialog.tsx
new file mode 100644
index 0000000000..e7034440fe
--- /dev/null
+++ b/apps/web/components/jira/jira-ticket-dialog.tsx
@@ -0,0 +1,347 @@
+"use client";
+
+import { IconExternalLink, IconRefresh, IconPlus } from "@tabler/icons-react";
+import { Badge } from "@kandev/ui/badge";
+import { Button } from "@kandev/ui/button";
+import { Dialog, DialogContent, DialogTitle } from "@kandev/ui/dialog";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@kandev/ui/dropdown-menu";
+import type { JiraTicket, JiraTransition } from "@/lib/types/jira";
+import {
+ IconLabel,
+ JiraErrorMessage,
+ PersonCell,
+ formatRelative,
+ statusBadgeClass,
+ useTicketState,
+ type TicketState,
+} from "./jira-ticket-common";
+import type { JiraTaskPreset } from "./my-jira/presets";
+
+type JiraTicketDialogProps = {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+ workspaceId: string | null | undefined;
+ ticketKey: string | null | undefined;
+ /** Shown while the full ticket is loading so the dialog doesn't flash empty. */
+ initialTicket?: JiraTicket | null;
+ /** Presets shown in the footer "Start task" menu. Required when onStartTask is set. */
+ presets?: JiraTaskPreset[];
+ /** If provided, shows a "Start task" menu in the dialog footer. */
+ onStartTask?: (ticket: JiraTicket, preset: JiraTaskPreset) => void;
+};
+
+function dialogTitle(ticket: JiraTicket | null, ticketKey: string | null | undefined): string {
+ return ticket?.summary ?? ticketKey ?? "Jira ticket";
+}
+
+function effectiveTicketKey(
+ ticket: JiraTicket | null,
+ ticketKey: string | null | undefined,
+): string {
+ return ticketKey ?? ticket?.key ?? "";
+}
+
+export function JiraTicketDialog({
+ open,
+ onOpenChange,
+ workspaceId,
+ ticketKey,
+ initialTicket,
+ presets,
+ onStartTask,
+}: JiraTicketDialogProps) {
+ const enabled = open && !!workspaceId && !!ticketKey;
+ const state = useTicketState(workspaceId ?? "", ticketKey ?? "", enabled);
+ const ticket = state.ticket ?? initialTicket ?? null;
+ const showFooter = ticket !== null && onStartTask !== undefined && presets !== undefined;
+
+ const errorOnly = state.error !== null && ticket === null;
+
+ return (
+
+ );
+}
+
+function DialogBody({
+ ticket,
+ state,
+ ticketKey,
+ workspaceId,
+}: {
+ ticket: JiraTicket | null;
+ state: TicketState;
+ ticketKey: string;
+ workspaceId: string | null | undefined;
+}) {
+ return (
+
+
+
+
+ ) : (
+ Jira authentication required
++ Your Jira session expired or needs step-up authentication. Reconnect to view this + ticket. +
+{cleanJiraErrorMessage(error)}
+ )} +
+ {state.error && ticket && (
+
+ );
+}
+
+function TicketFooter({
+ ticket,
+ presets,
+ onStartTask,
+}: {
+ ticket: JiraTicket;
+ presets: JiraTaskPreset[];
+ onStartTask: (ticket: JiraTicket, preset: JiraTaskPreset) => void;
+}) {
+ return (
+
+
+ )}
+ {!ticket && state.loading && (
+ Loading ticket…
+ )}
+ {ticket &&
+
+
+
+
+
+ {presets.map((p) => {
+ const Icon = p.icon;
+ return (
+ onStartTask(ticket, p)}
+ className="cursor-pointer"
+ >
+
+ );
+ })}
+
+
+
+ );
+}
+
+type TopBarProps = {
+ ticket: JiraTicket | null;
+ loading: boolean;
+ onRefresh: () => void;
+};
+
+function TicketTopBar({ ticket, loading, onRefresh }: TopBarProps) {
+ return (
+
+ {p.label}
+ {p.hint}
+
+
+ {ticket?.url && (
+
+ )}
+
+
+ );
+}
+
+function TicketBody({
+ ticket,
+ state,
+ ticketKey,
+}: {
+ ticket: JiraTicket;
+ state: TicketState;
+ ticketKey: string;
+}) {
+ return (
+
+
+ );
+}
+
+function TicketHeading({ ticket, ticketKey }: { ticket: JiraTicket; ticketKey: string }) {
+ return (
+
+
+
+
+
+ );
+}
+
+function SectionHeading({ children }: { children: React.ReactNode }) {
+ return
+ {ticketKey}
+ {ticket.issueType && (
+ <>
+ ·
+
+ {ticket.summary}
+{children}
;
+}
+
+function DescriptionSection({ description }: { description: string }) {
+ return (
+
+ {description ? (
+
+ {description}
+ ) : (
+ No description.
+ )}
+
+
+ {ticket.statusName}
+
+
+ )}
+ {hasTransitions && (
+
+ {list.map((t) => (
+
+ ))}
+
+ )}
+
+ Details
+
+
+
+
+
+
+
+
+
+ {ticket.projectKey}
+
+
+
+ {label}
+
+ );
+}
+
+function MetaFooter({ ticket }: { ticket: JiraTicket }) {
+ const updated = formatRelative(ticket.updated);
+ if (!updated) return null;
+ return (
+ {children}
+
+ Updated {updated}
+
+ );
+}
diff --git a/apps/web/components/jira/my-jira/filter-bar.tsx b/apps/web/components/jira/my-jira/filter-bar.tsx
new file mode 100644
index 0000000000..7bf0f8df20
--- /dev/null
+++ b/apps/web/components/jira/my-jira/filter-bar.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { Button } from "@kandev/ui/button";
+import type { JiraProject } from "@/lib/types/jira";
+import { AssigneePill, ProjectPill, StatusPill } from "./filter-pills";
+import type { FilterState } from "./filter-model";
+import { DEFAULT_FILTERS } from "./filter-model";
+
+type FilterBarProps = {
+ filters: FilterState;
+ onChange: (filters: FilterState) => void;
+ projects: JiraProject[];
+ hasActiveFilters: boolean;
+ onClear: () => void;
+};
+
+export function FilterBar({
+ filters,
+ onChange,
+ projects,
+ hasActiveFilters,
+ onClear,
+}: FilterBarProps) {
+ return (
+
+ onChange({ ...filters, projectKeys })}
+ />
+ onChange({ ...filters, statusCategories })}
+ />
+ onChange({ ...filters, assignee })}
+ />
+ {hasActiveFilters && (
+
+ )}
+
+ );
+}
+
+export function hasActiveFilters(f: FilterState): boolean {
+ return (
+ f.projectKeys.length > 0 ||
+ f.statusCategories.length > 0 ||
+ f.assignee !== DEFAULT_FILTERS.assignee ||
+ f.searchText.trim().length > 0
+ );
+}
diff --git a/apps/web/components/jira/my-jira/filter-model.test.ts b/apps/web/components/jira/my-jira/filter-model.test.ts
new file mode 100644
index 0000000000..b98a203e3b
--- /dev/null
+++ b/apps/web/components/jira/my-jira/filter-model.test.ts
@@ -0,0 +1,76 @@
+import { describe, expect, it } from "vitest";
+import { DEFAULT_FILTERS, filtersToJql, filtersEqual } from "./filter-model";
+
+describe("filtersToJql", () => {
+ it("produces default query for default state", () => {
+ expect(filtersToJql(DEFAULT_FILTERS)).toBe("assignee = currentUser() ORDER BY updated DESC");
+ });
+
+ it("omits where clause when everything is open", () => {
+ expect(filtersToJql({ ...DEFAULT_FILTERS, assignee: "anyone" })).toBe("ORDER BY updated DESC");
+ });
+
+ it("quotes project keys", () => {
+ const jql = filtersToJql({ ...DEFAULT_FILTERS, projectKeys: ["SC", "ECOM"] });
+ expect(jql).toBe(
+ `project in ("SC", "ECOM") AND assignee = currentUser() ORDER BY updated DESC`,
+ );
+ });
+
+ it("maps status categories to Jira labels", () => {
+ const jql = filtersToJql({
+ ...DEFAULT_FILTERS,
+ statusCategories: ["new", "indeterminate"],
+ assignee: "anyone",
+ });
+ expect(jql).toBe(`statusCategory in ("To Do", "In Progress") ORDER BY updated DESC`);
+ });
+
+ it("detects ticket key in search text", () => {
+ const jql = filtersToJql({ ...DEFAULT_FILTERS, searchText: "SC-123", assignee: "anyone" });
+ expect(jql).toBe(`key = "SC-123" ORDER BY updated DESC`);
+ });
+
+ it("uses text search for free-form query", () => {
+ const jql = filtersToJql({
+ ...DEFAULT_FILTERS,
+ searchText: "login bug",
+ assignee: "anyone",
+ });
+ expect(jql).toBe(`text ~ "login bug" ORDER BY updated DESC`);
+ });
+
+ it("escapes quotes in search text", () => {
+ const jql = filtersToJql({
+ ...DEFAULT_FILTERS,
+ searchText: `"bad" query`,
+ assignee: "anyone",
+ });
+ expect(jql).toBe(`text ~ "\\"bad\\" query" ORDER BY updated DESC`);
+ });
+
+ it("renders unassigned filter", () => {
+ expect(filtersToJql({ ...DEFAULT_FILTERS, assignee: "unassigned" })).toBe(
+ "assignee is EMPTY ORDER BY updated DESC",
+ );
+ });
+
+ it("switches sort clause", () => {
+ expect(filtersToJql({ ...DEFAULT_FILTERS, sort: "priority", assignee: "anyone" })).toBe(
+ "ORDER BY priority DESC, updated DESC",
+ );
+ expect(filtersToJql({ ...DEFAULT_FILTERS, sort: "created", assignee: "anyone" })).toBe(
+ "ORDER BY created DESC",
+ );
+ });
+});
+
+describe("filtersEqual", () => {
+ it("returns true for deep-equal state", () => {
+ expect(filtersEqual(DEFAULT_FILTERS, { ...DEFAULT_FILTERS })).toBe(true);
+ });
+
+ it("returns false when arrays differ", () => {
+ expect(filtersEqual(DEFAULT_FILTERS, { ...DEFAULT_FILTERS, projectKeys: ["X"] })).toBe(false);
+ });
+});
diff --git a/apps/web/components/jira/my-jira/filter-model.ts b/apps/web/components/jira/my-jira/filter-model.ts
new file mode 100644
index 0000000000..eb8184aa9e
--- /dev/null
+++ b/apps/web/components/jira/my-jira/filter-model.ts
@@ -0,0 +1,90 @@
+import type { JiraStatusCategory } from "@/lib/types/jira";
+
+export type AssigneeFilter = "me" | "unassigned" | "anyone";
+export type SortKey = "updated" | "created" | "priority";
+
+export type FilterState = {
+ projectKeys: string[];
+ statusCategories: JiraStatusCategory[];
+ assignee: AssigneeFilter;
+ searchText: string;
+ sort: SortKey;
+};
+
+export const DEFAULT_FILTERS: FilterState = {
+ projectKeys: [],
+ statusCategories: [],
+ assignee: "me",
+ searchText: "",
+ sort: "updated",
+};
+
+export const STATUS_CATEGORY_OPTIONS: { value: JiraStatusCategory; label: string }[] = [
+ { value: "new", label: "To Do" },
+ { value: "indeterminate", label: "In Progress" },
+ { value: "done", label: "Done" },
+];
+
+function quote(value: string): string {
+ return `"${value.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
+}
+
+const TICKET_KEY_RE = /^[A-Z][A-Z0-9]+-\d+$/;
+
+function searchClause(raw: string): string | null {
+ const trimmed = raw.trim();
+ if (!trimmed) return null;
+ if (TICKET_KEY_RE.test(trimmed)) return `key = ${quote(trimmed)}`;
+ return `text ~ ${quote(trimmed)}`;
+}
+
+function statusClause(categories: JiraStatusCategory[]): string | null {
+ if (categories.length === 0) return null;
+ const labels = categories.map((c) => {
+ if (c === "new") return quote("To Do");
+ if (c === "indeterminate") return quote("In Progress");
+ return quote("Done");
+ });
+ return `statusCategory in (${labels.join(", ")})`;
+}
+
+function assigneeClause(a: AssigneeFilter): string | null {
+ if (a === "me") return "assignee = currentUser()";
+ if (a === "unassigned") return "assignee is EMPTY";
+ return null;
+}
+
+function projectClause(keys: string[]): string | null {
+ if (keys.length === 0) return null;
+ return `project in (${keys.map(quote).join(", ")})`;
+}
+
+function sortClause(s: SortKey): string {
+ if (s === "created") return "ORDER BY created DESC";
+ if (s === "priority") return "ORDER BY priority DESC, updated DESC";
+ return "ORDER BY updated DESC";
+}
+
+export function filtersToJql(f: FilterState): string {
+ const clauses = [
+ projectClause(f.projectKeys),
+ statusClause(f.statusCategories),
+ assigneeClause(f.assignee),
+ searchClause(f.searchText),
+ ].filter((c): c is string => c !== null);
+ const where = clauses.join(" AND ");
+ const order = sortClause(f.sort);
+ return where ? `${where} ${order}` : order;
+}
+
+export function filtersEqual(a: FilterState, b: FilterState): boolean {
+ return (
+ a.assignee === b.assignee &&
+ a.sort === b.sort &&
+ a.searchText === b.searchText &&
+ a.projectKeys.length === b.projectKeys.length &&
+ a.projectKeys.every((k, i) => k === b.projectKeys[i]) &&
+ a.statusCategories.length === b.statusCategories.length &&
+ a.statusCategories.every((c, i) => c === b.statusCategories[i])
+ );
+}
diff --git a/apps/web/components/jira/my-jira/filter-pills.tsx b/apps/web/components/jira/my-jira/filter-pills.tsx
new file mode 100644
index 0000000000..0c42ee59bb
--- /dev/null
+++ b/apps/web/components/jira/my-jira/filter-pills.tsx
@@ -0,0 +1,195 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { IconChevronDown, IconX } from "@tabler/icons-react";
+import { Checkbox } from "@kandev/ui/checkbox";
+import { Input } from "@kandev/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@kandev/ui/popover";
+import type { JiraProject, JiraStatusCategory } from "@/lib/types/jira";
+import { STATUS_CATEGORY_OPTIONS, type AssigneeFilter } from "./filter-model";
+
+type PillShellProps = {
+ label: string;
+ summary: string | null;
+ active: boolean;
+ onClear?: () => void;
+ children: React.ReactNode;
+};
+
+function PillShell({ label, summary, active, onClear, children }: PillShellProps) {
+ const [open, setOpen] = useState(false);
+ return (
+
+
+
+
+ {active && onClear && (
+
+ )}
+
+
+ setQuery(e.target.value)}
+ placeholder="Search projects…"
+ className="h-7 text-xs"
+ />
+
+
+ {filtered.length === 0 && (
+
+ No projects match.
+ )}
+ {filtered.map((p) => (
+
+ ))}
+
+ {STATUS_CATEGORY_OPTIONS.map((o) => (
+
+ ))}
+
+
+ {ASSIGNEE_OPTIONS.map((o) => (
+
+ ))}
+
+
+
+
+