@hienlh/ppm 0.10.4 → 0.11.0

package/src/web/components/jira/jira-panel.tsx

@@ -0,0 +1,201 @@
+import { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { useProjectStore } from "@/stores/project-store";
+import { useJiraStore } from "@/stores/jira-store";
+import { useTabStore } from "@/stores/tab-store";
+import { JiraTicketCard } from "./jira-ticket-card";
+import { JiraWatcherList } from "./jira-watcher-list";
+import { JiraConfigForm } from "./jira-config-form";
+import { JiraDebugPromptDialog } from "./jira-debug-prompt-dialog";
+import { ArrowLeft, Settings2, Plus, ListFilter, RefreshCw, Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import type { JiraWatchResult } from "../../../../src/types/jira";
+
+type SubView = "tickets" | "watchers" | "credentials";
+
+export function JiraPanel() {
+  const activeProject = useProjectStore((s) => s.activeProject);
+  const openTab = useTabStore((s) => s.openTab);
+  const {
+    configs, watchers, results, loadConfigs, loadWatchers, loadResults,
+    loadProjectsWithIds, projectsWithIds, softDeleteResult, resumeDebug, cancelDebug,
+    markRead, unreadCount, loadUnreadCount,
+  } = useJiraStore();
+
+  const [subView, setSubView] = useState<SubView>("tickets");
+  const [loading, setLoading] = useState(false);
+  const [debugTarget, setDebugTarget] = useState<JiraWatchResult | null>(null);
+
+  // Resolve current project → config
+  const projectEntry = projectsWithIds.find((p) => p.name === activeProject?.name);
+  const config = configs.find((c) => c.projectId === projectEntry?.id);
+
+  // Load data on mount and when project changes
+  useEffect(() => {
+    loadConfigs();
+    loadProjectsWithIds();
+  }, []);
+
+  useEffect(() => {
+    if (config) loadWatchers(config.id);
+  }, [config?.id]);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    try { await loadResults(); } catch {}
+    setLoading(false);
+  }, [loadResults]);
+
+  useEffect(() => { refresh(); loadUnreadCount(); }, [config?.id]);
+
+  // WS events for live status updates
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      if (!detail) return;
+      refresh();
+      if (detail.status === "done") {
+        loadUnreadCount();
+        toast.success(`Debug complete: ${detail.issueKey}`, {
+          action: detail.sessionId ? {
+            label: "View",
+            onClick: () => openTab({
+              type: "chat",
+              title: `[Jira] ${detail.issueKey}`,
+              projectId: activeProject?.name ?? null,
+              metadata: { projectName: activeProject?.name, sessionId: detail.sessionId },
+              closable: true,
+            }),
+          } : undefined,
+        });
+      } else if (detail.status === "failed") {
+        toast.error(`Debug failed: ${detail.issueKey}`);
+      }
+    };
+    window.addEventListener("jira:status_change", handler);
+    return () => window.removeEventListener("jira:status_change", handler);
+  }, [refresh, loadUnreadCount]);
+
+  const openSession = useCallback((r: JiraWatchResult) => {
+    if (!r.sessionId) return;
+    if (r.status === "done" && !r.readAt) markRead(r.id);
+    openTab({
+      type: "chat",
+      title: `[Jira] ${r.issueKey}`,
+      projectId: activeProject?.name ?? null,
+      metadata: { projectName: activeProject?.name, sessionId: r.sessionId },
+      closable: true,
+    });
+  }, [openTab, markRead, activeProject]);
+
+  const handleRowClick = (r: JiraWatchResult) => {
+    if (r.sessionId) openSession(r);
+  };
+
+  // No project selected
+  if (!activeProject) {
+    return (
+      <div className="flex items-center justify-center h-32 p-4">
+        <p className="text-xs text-muted-foreground text-center">Select a project to use Jira</p>
+      </div>
+    );
+  }
+
+  // Sub-views: watchers / credentials
+  if (subView !== "tickets") {
+    const title = subView === "watchers" ? "Watchers" : "Jira Credentials";
+    return (
+      <div className="h-full flex flex-col">
+        <div className="shrink-0 px-2 py-2 flex items-center gap-1.5 border-b border-border/50">
+          <Button size="icon" variant="ghost" className="size-7" onClick={() => setSubView("tickets")}>
+            <ArrowLeft className="size-4" />
+          </Button>
+          <h2 className="text-sm font-semibold truncate">{title}</h2>
+        </div>
+        <ScrollArea className="flex-1 min-h-0">
+          <div className="p-3">
+            {subView === "watchers" ? (
+              config ? <JiraWatcherList configId={config.id} /> : <p className="text-xs text-muted-foreground text-center py-4">Configure Jira credentials first.</p>
+            ) : (
+              projectEntry ? <JiraConfigForm projectId={projectEntry.id} existing={config ? { baseUrl: config.baseUrl, email: config.email, hasToken: config.hasToken } : null} /> : <p className="text-xs text-muted-foreground text-center py-4">Project not found in database.</p>
+            )}
+          </div>
+        </ScrollArea>
+      </div>
+    );
+  }
+
+  // Default: ticket list
+  return (
+    <div className="h-full flex flex-col">
+      {/* Header */}
+      <div className="shrink-0 px-3 py-2 flex items-center gap-1.5 border-b border-border/50">
+        <h2 className="text-sm font-semibold flex-1 truncate">Jira</h2>
+        {unreadCount > 0 && (
+          <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-primary text-primary-foreground text-[10px] font-bold">
+            {unreadCount}
+          </span>
+        )}
+        <Button size="icon" variant="ghost" className="size-7" onClick={refresh} disabled={loading} title="Refresh">
+          {loading ? <Loader2 className="size-3.5 animate-spin" /> : <RefreshCw className="size-3.5" />}
+        </Button>
+        <Button size="icon" variant="ghost" className="size-7" onClick={() => setSubView("watchers")} title="Watchers">
+          <ListFilter className="size-3.5" />
+        </Button>
+        <Button size="icon" variant="ghost" className="size-7" onClick={() => setSubView("credentials")} title="Credentials">
+          <Settings2 className="size-3.5" />
+        </Button>
+      </div>
+
+      {/* Ticket list */}
+      <ScrollArea className="flex-1 min-h-0">
+        <div className="p-1.5 space-y-1.5">
+          {!config ? (
+            <EmptyState
+              message="No Jira credentials configured"
+              action="Set up Jira"
+              onAction={() => setSubView("credentials")}
+            />
+          ) : results.length === 0 && watchers.length === 0 ? (
+            <EmptyState
+              message="No watchers yet"
+              action="Add Watcher"
+              onAction={() => setSubView("watchers")}
+            />
+          ) : results.length === 0 ? (
+            <EmptyState message="No tickets yet. Watchers will pick up new issues." />
+          ) : (
+            results.map((r) => (
+              <JiraTicketCard
+                key={r.id}
+                result={r}
+                onDebug={setDebugTarget}
+                onResume={(r) => resumeDebug(r.id)}
+                onCancel={(r) => cancelDebug(r.id)}
+                onOpenSession={openSession}
+                onDelete={softDeleteResult}
+                onClick={handleRowClick}
+              />
+            ))
+          )}
+        </div>
+      </ScrollArea>
+
+      <JiraDebugPromptDialog result={debugTarget} onClose={() => setDebugTarget(null)} />
+    </div>
+  );
+}
+
+function EmptyState({ message, action, onAction }: { message: string; action?: string; onAction?: () => void }) {
+  return (
+    <div className="flex flex-col items-center justify-center py-12 gap-3">
+      <p className="text-xs text-muted-foreground text-center">{message}</p>
+      {action && onAction && (
+        <Button size="sm" variant="outline" className="min-h-[44px]" onClick={onAction}>
+          <Plus className="size-4 mr-1.5" /> {action}
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/web/components/jira/jira-results-panel.tsx

@@ -0,0 +1,184 @@
+import { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useJiraStore } from "@/stores/jira-store";
+import { JiraStatusBadge } from "./jira-status-badge";
+import { JiraTicketDetail } from "./jira-ticket-detail";
+import { JiraDebugPromptDialog } from "./jira-debug-prompt-dialog";
+import { cn } from "@/lib/utils";
+import { RefreshCw, Trash2, Loader2, Play } from "lucide-react";
+import { toast } from "sonner";
+import type { JiraWatchResult, JiraResultStatus } from "../../../../src/types/jira";
+
+export function JiraResultsPanel() {
+  const {
+    results, watchers, configs, loadResults, loadConfigs,
+    softDeleteResult, markRead, unreadCount, loadUnreadCount,
+  } = useJiraStore();
+  const [filterWatcher, setFilterWatcher] = useState<string>("all");
+  const [filterStatus, setFilterStatus] = useState<string>("all");
+  const [loading, setLoading] = useState(false);
+  const [ticketOpen, setTicketOpen] = useState(false);
+  const [selectedIssue, setSelectedIssue] = useState<{ configId: number; issueKey: string } | null>(null);
+  const [debugTarget, setDebugTarget] = useState<JiraWatchResult | null>(null);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    try {
+      await loadResults(
+        filterWatcher !== "all" ? Number(filterWatcher) : undefined,
+        filterStatus !== "all" ? filterStatus : undefined,
+      );
+    } catch {}
+    setLoading(false);
+  }, [filterWatcher, filterStatus, loadResults]);
+
+  useEffect(() => { loadConfigs(); loadUnreadCount(); refresh(); }, []);
+  useEffect(() => { refresh(); }, [filterWatcher, filterStatus]);
+
+  // Listen for jira:status_change WS events dispatched as CustomEvents
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      if (!detail) return;
+      refresh();
+      if (detail.status === "done") {
+        loadUnreadCount();
+        toast.success(`Debug complete: ${detail.issueKey}`, {
+          action: detail.sessionId ? {
+            label: "View",
+            onClick: () => window.dispatchEvent(
+              new CustomEvent("ppm:open-session", { detail: { sessionId: detail.sessionId } }),
+            ),
+          } : undefined,
+        });
+      } else if (detail.status === "failed") {
+        toast.error(`Debug failed: ${detail.issueKey}`);
+      }
+    };
+    window.addEventListener("jira:status_change", handler);
+    return () => window.removeEventListener("jira:status_change", handler);
+  }, [refresh, loadUnreadCount]);
+
+  const handleRowClick = (r: JiraWatchResult) => {
+    // Mark as read if done + unread
+    if (r.status === "done" && !r.readAt) markRead(r.id);
+
+    if (r.status === "done" && r.sessionId) {
+      window.dispatchEvent(new CustomEvent("ppm:open-session", { detail: { sessionId: r.sessionId } }));
+      return;
+    }
+    const watcher = watchers.find((w) => w.id === r.watcherId);
+    const config = configs.find((c) => c.id === watcher?.jiraConfigId);
+    if (config) {
+      setSelectedIssue({ configId: config.id, issueKey: r.issueKey });
+      setTicketOpen(true);
+    }
+  };
+
+  const selectedConfig = selectedIssue
+    ? configs.find((c) => c.id === selectedIssue.configId)
+    : null;
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Filter bar */}
+      <div className="shrink-0 px-3 py-2 flex items-center gap-2 border-b">
+        <Select value={filterWatcher} onValueChange={setFilterWatcher}>
+          <SelectTrigger className="h-8 w-32 text-xs"><SelectValue placeholder="Watcher" /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All watchers</SelectItem>
+            {watchers.map((w) => <SelectItem key={w.id} value={String(w.id)}>{w.name}</SelectItem>)}
+          </SelectContent>
+        </Select>
+        <Select value={filterStatus} onValueChange={setFilterStatus}>
+          <SelectTrigger className="h-8 w-28 text-xs"><SelectValue placeholder="Status" /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All</SelectItem>
+            <SelectItem value="pending">Pending</SelectItem>
+            <SelectItem value="queued">Queued</SelectItem>
+            <SelectItem value="running">Running</SelectItem>
+            <SelectItem value="done">Done</SelectItem>
+            <SelectItem value="failed">Failed</SelectItem>
+          </SelectContent>
+        </Select>
+        {unreadCount > 0 && (
+          <span className="inline-flex items-center justify-center size-5 rounded-full bg-primary text-primary-foreground text-[10px] font-bold">
+            {unreadCount}
+          </span>
+        )}
+        <Button size="icon" variant="ghost" className="size-8 ml-auto" onClick={refresh} disabled={loading}>
+          {loading ? <Loader2 className="size-3.5 animate-spin" /> : <RefreshCw className="size-3.5" />}
+        </Button>
+      </div>
+
+      {/* Results list */}
+      <div className="flex-1 overflow-y-auto">
+        {results.length === 0 ? (
+          <p className="text-sm text-muted-foreground text-center py-8">
+            No results yet. Configure a watcher to start.
+          </p>
+        ) : (
+          results.map((r) => (
+            <div
+              key={r.id}
+              className={cn(
+                "flex items-center gap-2 px-3 py-2 border-b hover:bg-muted/50 cursor-pointer",
+                r.status === "done" && !r.readAt && "bg-primary/5 font-medium border-l-2 border-l-primary",
+              )}
+              onClick={() => handleRowClick(r)}
+            >
+              <JiraStatusBadge status={r.status as JiraResultStatus} />
+              <span className="text-xs font-mono font-medium shrink-0">{r.issueKey}</span>
+              <span className="text-xs text-muted-foreground truncate flex-1">
+                {r.issueSummary ?? ""}
+              </span>
+              {r.status === "queued" && <Loader2 className="size-3.5 text-muted-foreground" />}
+              {r.status === "running" && <Loader2 className="size-3.5 animate-spin text-primary" />}
+              {r.status === "pending" && (
+                <Button size="icon" variant="ghost" className="size-8 shrink-0"
+                  onClick={(e) => { e.stopPropagation(); setDebugTarget(r); }}>
+                  <Play className="size-3.5 text-primary" />
+                </Button>
+              )}
+              <span className="text-[10px] text-muted-foreground shrink-0">
+                {timeAgo(r.createdAt)}
+              </span>
+              <Button
+                size="icon" variant="ghost"
+                className="size-6 shrink-0 text-muted-foreground hover:text-destructive"
+                onClick={(e) => { e.stopPropagation(); softDeleteResult(r.id); }}
+              >
+                <Trash2 className="size-3" />
+              </Button>
+            </div>
+          ))
+        )}
+      </div>
+
+      {/* Debug prompt dialog */}
+      <JiraDebugPromptDialog result={debugTarget} onClose={() => setDebugTarget(null)} />
+
+      {/* Ticket detail dialog */}
+      {selectedIssue && (
+        <JiraTicketDetail
+          open={ticketOpen}
+          onOpenChange={setTicketOpen}
+          configId={selectedIssue.configId}
+          issueKey={selectedIssue.issueKey}
+          baseUrl={selectedConfig?.baseUrl}
+        />
+      )}
+    </div>
+  );
+}
+
+function timeAgo(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return "now";
+  if (mins < 60) return `${mins}m`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h`;
+  return `${Math.floor(hrs / 24)}d`;
+}

package/src/web/components/jira/jira-settings-section.tsx

@@ -0,0 +1,58 @@
+import { useEffect } from "react";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { useJiraStore } from "@/stores/jira-store";
+import { JiraConfigForm } from "./jira-config-form";
+import { JiraWatcherList } from "./jira-watcher-list";
+import { JiraResultsPanel } from "./jira-results-panel";
+
+export function JiraSettingsSection() {
+  const {
+    configs, selectedProjectId, setSelectedProjectId,
+    loadConfigs, loadWatchers, projectsWithIds, loadProjectsWithIds,
+  } = useJiraStore();
+
+  useEffect(() => { loadConfigs(); loadProjectsWithIds(); }, []);
+
+  const selectedConfig = configs.find((c) => c.projectId === selectedProjectId);
+
+  useEffect(() => {
+    if (selectedConfig) loadWatchers(selectedConfig.id);
+  }, [selectedConfig?.id]);
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label className="text-xs text-muted-foreground">Project</label>
+        <Select
+          value={selectedProjectId ? String(selectedProjectId) : ""}
+          onValueChange={(v) => setSelectedProjectId(Number(v))}
+        >
+          <SelectTrigger className="h-9"><SelectValue placeholder="Select project..." /></SelectTrigger>
+          <SelectContent>
+            {projectsWithIds.map((p) => (
+              <SelectItem key={p.id} value={String(p.id)}>{p.name}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {selectedProjectId && (
+        <>
+          <JiraConfigForm
+            projectId={selectedProjectId}
+            existing={selectedConfig ? { baseUrl: selectedConfig.baseUrl, email: selectedConfig.email, hasToken: selectedConfig.hasToken } : null}
+          />
+          {selectedConfig && (
+            <>
+              <Separator />
+              <JiraWatcherList configId={selectedConfig.id} />
+              <Separator />
+              <JiraResultsPanel />
+            </>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

package/src/web/components/jira/jira-status-badge.tsx

@@ -0,0 +1,18 @@
+import { Badge } from "@/components/ui/badge";
+import type { JiraResultStatus } from "../../../../src/types/jira";
+
+const STATUS_STYLES: Record<JiraResultStatus, string> = {
+  pending: "bg-yellow-500/15 text-yellow-600 border-yellow-500/30",
+  queued: "bg-orange-500/15 text-orange-600 border-orange-500/30",
+  running: "bg-blue-500/15 text-blue-600 border-blue-500/30",
+  done: "bg-green-500/15 text-green-600 border-green-500/30",
+  failed: "bg-red-500/15 text-red-600 border-red-500/30",
+};
+
+export function JiraStatusBadge({ status }: { status: JiraResultStatus }) {
+  return (
+    <Badge variant="outline" className={`text-[10px] px-1.5 py-0 ${STATUS_STYLES[status] ?? ""}`}>
+      {status}
+    </Badge>
+  );
+}

package/src/web/components/jira/jira-ticket-card.tsx

@@ -0,0 +1,144 @@
+import { Play, RotateCcw, Square, ExternalLink, Trash2, Loader2, MoreHorizontal } from "lucide-react";
+import {
+  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+import type { JiraWatchResult, JiraResultStatus } from "../../../../src/types/jira";
+
+/** Status dot color */
+const DOT_COLORS: Record<JiraResultStatus, string> = {
+  pending: "bg-yellow-500",
+  queued: "bg-orange-500",
+  running: "bg-blue-500 animate-pulse",
+  done: "bg-green-500",
+  failed: "bg-red-500",
+};
+
+/** Relative time helper */
+function timeAgo(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return "now";
+  if (mins < 60) return `${mins}m`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h`;
+  const days = Math.floor(hrs / 24);
+  return `${days}d`;
+}
+
+interface Props {
+  result: JiraWatchResult;
+  onDebug: (r: JiraWatchResult) => void;
+  onResume: (r: JiraWatchResult) => void;
+  onCancel: (r: JiraWatchResult) => void;
+  onOpenSession: (r: JiraWatchResult) => void;
+  onDelete: (id: number) => void;
+  onClick: (r: JiraWatchResult) => void;
+}
+
+export function JiraTicketCard({ result, onDebug, onResume, onCancel, onOpenSession, onDelete, onClick }: Props) {
+  const r = result;
+  const isUnread = r.status === "done" && !r.readAt;
+  const hasSession = !!r.sessionId;
+  const canResume = r.status === "failed" && hasSession;
+  const canDebug = r.status === "pending" || (r.status === "failed" && !hasSession);
+  const canCancel = r.status === "queued" || r.status === "running";
+  const status = r.status as JiraResultStatus;
+
+  return (
+    <div
+      className={cn(
+        "group rounded bg-card shadow-sm hover:shadow-md hover:bg-accent/50 hover:-translate-y-px cursor-pointer transition-all duration-150",
+        "px-2.5 py-2 space-y-1",
+        isUnread && "ring-1 ring-primary/30",
+      )}
+      onClick={() => onClick(r)}
+    >
+      {/* Line 1: issue key + summary + time */}
+      <div className="flex items-center gap-1.5 min-w-0">
+        <span className="text-xs font-mono font-semibold text-foreground shrink-0">{r.issueKey}</span>
+        {isUnread && <span className="size-1.5 rounded-full bg-primary shrink-0" />}
+        <span className="text-xs text-muted-foreground truncate flex-1 min-w-0">
+          {r.issueSummary || "No summary"}
+        </span>
+        <span className="text-[10px] text-muted-foreground/60 tabular-nums shrink-0">
+          {timeAgo(r.createdAt)}
+        </span>
+      </div>
+
+      {/* Line 2: status dot + label + action buttons */}
+      <div className="flex items-center justify-between min-w-0">
+        <span className="inline-flex items-center gap-1.5 text-[11px] text-muted-foreground">
+          <span className={cn("size-1.5 rounded-full shrink-0", DOT_COLORS[status])} />
+          {status}
+        </span>
+
+        <div
+          className="flex items-center gap-0.5 shrink-0"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {canResume && (
+            <button
+              type="button"
+              className="flex items-center gap-1 h-6 px-1.5 rounded text-[10px] font-medium text-primary hover:bg-primary/10 active:scale-95 transition-colors"
+              onClick={() => onResume(r)}
+              title="Resume debug session"
+            >
+              <RotateCcw className="size-3" />
+              <span>Resume</span>
+            </button>
+          )}
+          {canDebug && (
+            <button
+              type="button"
+              className="flex items-center justify-center size-6 rounded text-muted-foreground hover:text-primary active:scale-95 transition-colors"
+              onClick={() => onDebug(r)}
+              title="Debug"
+            >
+              <Play className="size-3" />
+            </button>
+          )}
+          {canCancel && (
+            <button
+              type="button"
+              className="flex items-center justify-center size-6 rounded text-muted-foreground hover:text-destructive active:scale-95 transition-colors"
+              onClick={() => onCancel(r)}
+              title="Stop debug"
+            >
+              <Square className="size-3" />
+            </button>
+          )}
+          {r.status === "running" && (
+            <Loader2 className="size-3 animate-spin text-primary" />
+          )}
+          {hasSession && (
+            <button
+              type="button"
+              className="flex items-center gap-1 h-6 px-1.5 rounded text-[10px] font-medium text-primary hover:bg-primary/10 active:scale-95 transition-colors"
+              onClick={() => onOpenSession(r)}
+              title="Open session"
+            >
+              <ExternalLink className="size-3" />
+              <span>Open</span>
+            </button>
+          )}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button
+                type="button"
+                className="flex items-center justify-center size-6 rounded text-muted-foreground hover:text-foreground active:scale-95 transition-colors"
+              >
+                <MoreHorizontal className="size-3" />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem className="text-destructive" onClick={() => onDelete(r.id)}>
+                <Trash2 className="size-3.5 mr-2" /> Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    </div>
+  );
+}