76 lines
2.4 KiB
TypeScript
76 lines
2.4 KiB
TypeScript
import { useEffect } from "react";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { issuesApi } from "../api/issues";
|
|
import { useCompany } from "../context/CompanyContext";
|
|
import { useBreadcrumbs } from "../context/BreadcrumbContext";
|
|
import { queryKeys } from "../lib/queryKeys";
|
|
import { StatusIcon } from "../components/StatusIcon";
|
|
import { PriorityIcon } from "../components/PriorityIcon";
|
|
import { EntityRow } from "../components/EntityRow";
|
|
import { EmptyState } from "../components/EmptyState";
|
|
import { PageSkeleton } from "../components/PageSkeleton";
|
|
import { formatDate } from "../lib/utils";
|
|
import { ListTodo } from "lucide-react";
|
|
|
|
export function MyIssues() {
|
|
const { selectedCompanyId } = useCompany();
|
|
const { setBreadcrumbs } = useBreadcrumbs();
|
|
|
|
useEffect(() => {
|
|
setBreadcrumbs([{ label: "My Issues" }]);
|
|
}, [setBreadcrumbs]);
|
|
|
|
const { data: issues, isLoading, error } = useQuery({
|
|
queryKey: queryKeys.issues.list(selectedCompanyId!),
|
|
queryFn: () => issuesApi.list(selectedCompanyId!),
|
|
enabled: !!selectedCompanyId,
|
|
});
|
|
|
|
if (!selectedCompanyId) {
|
|
return <EmptyState icon={ListTodo} message="Select a company to view your issues." />;
|
|
}
|
|
|
|
if (isLoading) {
|
|
return <PageSkeleton variant="list" />;
|
|
}
|
|
|
|
// Show issues that are not assigned (user-created or unassigned)
|
|
const myIssues = (issues ?? []).filter(
|
|
(i) => !i.assigneeAgentId && !["done", "cancelled"].includes(i.status)
|
|
);
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{error && <p className="text-sm text-destructive">{error.message}</p>}
|
|
|
|
{myIssues.length === 0 && (
|
|
<EmptyState icon={ListTodo} message="No issues assigned to you." />
|
|
)}
|
|
|
|
{myIssues.length > 0 && (
|
|
<div className="border border-border">
|
|
{myIssues.map((issue) => (
|
|
<EntityRow
|
|
key={issue.id}
|
|
identifier={issue.identifier ?? issue.id.slice(0, 8)}
|
|
title={issue.title}
|
|
to={`/issues/${issue.identifier ?? issue.id}`}
|
|
leading={
|
|
<>
|
|
<PriorityIcon priority={issue.priority} />
|
|
<StatusIcon status={issue.status} />
|
|
</>
|
|
}
|
|
trailing={
|
|
<span className="text-xs text-muted-foreground">
|
|
{formatDate(issue.createdAt)}
|
|
</span>
|
|
}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|