-
Dashboard
+
Git Activity
GitHub activity overview
diff --git a/frontend/src/pages/JiraPage.tsx b/frontend/src/pages/JiraPage.tsx
new file mode 100644
index 0000000..e61e55f
--- /dev/null
+++ b/frontend/src/pages/JiraPage.tsx
@@ -0,0 +1,384 @@
+import { useState, Fragment } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { useQuery } from '@tanstack/react-query';
+import { ChevronRight, ChevronDown, ChevronsUpDown, ChevronUp, PanelRightClose, PanelRightOpen } from 'lucide-react';
+import { getJiraEpics, getSettings, getJiraIssueDetail } from '@/api/client';
+import type { JiraEpic, JiraIssue } from '@/api/client';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Badge } from '@/components/ui/badge';
+
+function qualityColor(score: number): string {
+ if (score <= 20) return 'text-red-600';
+ if (score <= 40) return 'text-orange-500';
+ if (score <= 60) return 'text-yellow-500';
+ if (score <= 80) return 'text-lime-500';
+ return 'text-green-600';
+}
+
+function qualityBarColor(score: number): string {
+ if (score <= 20) return 'bg-red-500';
+ if (score <= 40) return 'bg-orange-500';
+ if (score <= 60) return 'bg-yellow-400';
+ if (score <= 80) return 'bg-lime-500';
+ return 'bg-green-500';
+}
+
+const priorityVariants: Record
= {
+ Highest: 'destructive',
+ High: 'destructive',
+ Medium: 'secondary',
+ Low: 'outline',
+ Lowest: 'outline',
+};
+
+const priorityOrder: Record = {
+ Highest: 0, High: 1, Medium: 2, Low: 3, Lowest: 4,
+};
+
+type SortField = 'key' | 'summary' | 'assignee' | 'priority';
+type SortDir = 'asc' | 'desc';
+
+function PriorityBadge({ priority }: { priority: string | null }) {
+ if (!priority) return —;
+ return (
+
+ {priority}
+
+ );
+}
+
+function SortIcon({ field, sortField, sortDir }: { field: SortField; sortField: SortField; sortDir: SortDir }) {
+ if (sortField !== field) return ;
+ return sortDir === 'asc'
+ ?
+ : ;
+}
+
+function IssueRow({ issue, indent, host, onSelect, selected }: {
+ issue: JiraIssue; indent?: boolean; host: string;
+ onSelect: (key: string) => void; selected: boolean;
+}) {
+ return (
+
+
+
+ {issue.key}
+
+
+
+
+
+ {issue.status ?? '—'}
+
+ {issue.assignee ?? '—'}
+
+
+
+ {issue.storyPoints ?? '—'}
+
+
+ );
+}
+
+function sortEpics(epics: JiraEpic[], field: SortField, dir: SortDir): JiraEpic[] {
+ return [...epics].sort((a, b) => {
+ let cmp = 0;
+ if (field === 'key') {
+ cmp = a.key.localeCompare(b.key);
+ } else if (field === 'summary') {
+ cmp = (a.summary ?? '').localeCompare(b.summary ?? '');
+ } else if (field === 'assignee') {
+ cmp = (a.assignee ?? '').localeCompare(b.assignee ?? '');
+ } else if (field === 'priority') {
+ cmp = (priorityOrder[a.priority ?? ''] ?? 99) - (priorityOrder[b.priority ?? ''] ?? 99);
+ }
+ return dir === 'asc' ? cmp : -cmp;
+ });
+}
+
+export function JiraPage() {
+ const [expanded, setExpanded] = useState>(new Set());
+ const [sortField, setSortField] = useState('key');
+ const [sortDir, setSortDir] = useState('asc');
+ const [selectedKey, setSelectedKey] = useState(null);
+ const [panelOpen, setPanelOpen] = useState(true);
+
+ const { data: epics = [], isLoading, isError, error } = useQuery({
+ queryKey: ['jira', 'epics'],
+ queryFn: getJiraEpics,
+ });
+
+ const { data: settings = {} } = useQuery({
+ queryKey: ['admin', 'settings'],
+ queryFn: getSettings,
+ });
+
+ const jiraHost = (settings['jira.host'] ?? '').replace(/\/$/, '');
+
+ const { data: issueDetail, isLoading: detailLoading } = useQuery({
+ queryKey: ['jira', 'issue', selectedKey],
+ queryFn: () => getJiraIssueDetail(selectedKey!),
+ enabled: !!selectedKey,
+ });
+
+ const errorMessage: string = isError
+ ? ((error as any)?.response?.data?.error ?? (error as any)?.message ?? 'Unknown error')
+ : '';
+
+ const toggle = (key: string) => {
+ setExpanded((prev) => {
+ const next = new Set(prev);
+ if (next.has(key)) next.delete(key);
+ else next.add(key);
+ return next;
+ });
+ };
+
+ const handleSort = (field: SortField) => {
+ if (sortField === field) {
+ setSortDir((d) => d === 'asc' ? 'desc' : 'asc');
+ } else {
+ setSortField(field);
+ setSortDir('asc');
+ }
+ };
+
+ const sortedEpics = sortEpics(epics, sortField, sortDir);
+
+ const expandAll = () => setExpanded(new Set(epics.map((e: JiraEpic) => e.key)));
+ const collapseAll = () => setExpanded(new Set());
+
+ const thClass = "cursor-pointer select-none hover:text-foreground";
+
+ return (
+
+ {/* Main content */}
+
+
+
+
Jira
+
Project tickets
+
+
+ {epics.length > 0 && (
+
+
+ ·
+
+
+ )}
+
+
+
+
+ {isLoading ? (
+
Loading...
+ ) : isError ? (
+
+
Failed to load Jira tickets
+
{errorMessage}
+
+ ) : epics.length === 0 ? (
+
+ No tickets found. Make sure Jira Host, Project, Email and API Token are configured in{' '}
+ Configuration.
+
+ ) : (
+
+
+
+
+
+ handleSort('key')}>
+ Key
+
+ handleSort('summary')}>
+ Title
+
+ Status
+ handleSort('assignee')}>
+ Assignee
+
+ handleSort('priority')}>
+ Priority
+
+ SP
+
+
+
+ {sortedEpics.map((epic: JiraEpic) => (
+
+ { toggle(epic.key); setSelectedKey(epic.key); }}
+ >
+
+
+ {expanded.has(epic.key)
+ ?
+ : }
+ e.stopPropagation()}
+ >
+ {epic.key}
+
+
+ ({epic.children.length})
+
+
+
+
+
+
+ {epic.status ?? '—'}
+
+ {epic.assignee ?? '—'}
+
+
+
+ {epic.storyPoints ?? '—'}
+
+
+ {expanded.has(epic.key) && epic.children.map((child: JiraIssue) => (
+
+ ))}
+
+ ))}
+
+
+
+
+ )}
+
+
+ {/* Right panel */}
+ {panelOpen &&
}
+