mirror of
https://github.com/rennf93/roboco.git
synced 2026-08-03 07:23:24 +02:00
I mean, it's at a good place rn...
This commit is contained in:
Renn F
@@ -0,0 +1,2 @@
|
||||
export { WorkSessionTable } from "./work-session-table";
|
||||
export { WorkSessionFilters } from "./work-session-filters";
|
||||
@@ -0,0 +1,101 @@
|
||||
"use client";
|
||||
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Search, Filter, X } from "lucide-react";
|
||||
import { WorkSessionStatus } from "@/types";
|
||||
|
||||
interface WorkSessionFiltersProps {
|
||||
searchQuery: string;
|
||||
onSearchChange: (value: string) => void;
|
||||
statusFilter: WorkSessionStatus[];
|
||||
onStatusChange: (value: WorkSessionStatus[]) => void;
|
||||
}
|
||||
|
||||
const statuses: { value: WorkSessionStatus; label: string }[] = [
|
||||
{ value: WorkSessionStatus.ACTIVE, label: "Active" },
|
||||
{ value: WorkSessionStatus.COMPLETED, label: "Completed" },
|
||||
{ value: WorkSessionStatus.ABANDONED, label: "Abandoned" },
|
||||
];
|
||||
|
||||
export function WorkSessionFilters({
|
||||
searchQuery,
|
||||
onSearchChange,
|
||||
statusFilter,
|
||||
onStatusChange,
|
||||
}: WorkSessionFiltersProps) {
|
||||
const handleStatusToggle = (status: WorkSessionStatus) => {
|
||||
if (statusFilter.includes(status)) {
|
||||
onStatusChange(statusFilter.filter((s) => s !== status));
|
||||
} else {
|
||||
onStatusChange([...statusFilter, status]);
|
||||
}
|
||||
};
|
||||
|
||||
const clearFilters = () => {
|
||||
onSearchChange("");
|
||||
onStatusChange([]);
|
||||
};
|
||||
|
||||
const hasActiveFilters = searchQuery || statusFilter.length > 0;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center">
|
||||
{/* Search */}
|
||||
<div className="relative flex-1 max-w-sm">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search by branch name..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => onSearchChange(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Status Filter */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" className="gap-2">
|
||||
<Filter className="h-4 w-4" />
|
||||
Status
|
||||
{statusFilter.length > 0 && (
|
||||
<Badge variant="secondary" className="ml-1">
|
||||
{statusFilter.length}
|
||||
</Badge>
|
||||
)}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="w-48">
|
||||
<DropdownMenuLabel>Filter by Status</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
{statuses.map((status) => (
|
||||
<DropdownMenuCheckboxItem
|
||||
key={status.value}
|
||||
checked={statusFilter.includes(status.value)}
|
||||
onCheckedChange={() => handleStatusToggle(status.value)}
|
||||
>
|
||||
{status.label}
|
||||
</DropdownMenuCheckboxItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
{/* Clear Filters */}
|
||||
{hasActiveFilters && (
|
||||
<Button variant="ghost" onClick={clearFilters} className="gap-2">
|
||||
<X className="h-4 w-4" />
|
||||
Clear
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
"use client";
|
||||
|
||||
import { formatDistanceToNow } from "date-fns";
|
||||
import Link from "next/link";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import {
|
||||
GitBranch,
|
||||
GitPullRequest,
|
||||
ExternalLink,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
Clock,
|
||||
GitCommit,
|
||||
} from "lucide-react";
|
||||
import type { WorkSessionSummary, WorkSessionStatus } from "@/types";
|
||||
|
||||
interface WorkSessionTableProps {
|
||||
sessions: WorkSessionSummary[] | undefined;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
function getStatusBadge(status: WorkSessionStatus) {
|
||||
switch (status) {
|
||||
case "active":
|
||||
return (
|
||||
<Badge className="bg-blue-500/10 text-blue-500">
|
||||
<Clock className="h-3 w-3 mr-1" />
|
||||
Active
|
||||
</Badge>
|
||||
);
|
||||
case "completed":
|
||||
return (
|
||||
<Badge className="bg-green-500/10 text-green-500">
|
||||
<CheckCircle2 className="h-3 w-3 mr-1" />
|
||||
Completed
|
||||
</Badge>
|
||||
);
|
||||
case "abandoned":
|
||||
return (
|
||||
<Badge variant="destructive">
|
||||
<XCircle className="h-3 w-3 mr-1" />
|
||||
Abandoned
|
||||
</Badge>
|
||||
);
|
||||
default:
|
||||
return <Badge variant="outline">{status}</Badge>;
|
||||
}
|
||||
}
|
||||
|
||||
export function WorkSessionTable({ sessions, isLoading }: WorkSessionTableProps) {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-14 w-full" />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!sessions || sessions.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-12 text-muted-foreground">
|
||||
<GitCommit className="h-12 w-12 mx-auto mb-4 opacity-50" />
|
||||
<p className="text-lg font-medium">No work sessions found</p>
|
||||
<p className="text-sm">Work sessions are created when agents start working on tasks</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="border rounded-lg">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Branch</TableHead>
|
||||
<TableHead>Task</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>PR</TableHead>
|
||||
<TableHead>Started</TableHead>
|
||||
<TableHead className="w-[80px]">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{sessions.map((session) => (
|
||||
<TableRow key={session.id}>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<GitBranch className="h-4 w-4 text-muted-foreground" />
|
||||
<Link
|
||||
href={`/work-sessions/${session.id}`}
|
||||
className="font-medium hover:underline font-mono text-sm"
|
||||
>
|
||||
{session.branch_name}
|
||||
</Link>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Link
|
||||
href={`/tasks/${session.task_id}`}
|
||||
className="text-sm text-muted-foreground hover:text-foreground hover:underline"
|
||||
>
|
||||
{session.task_id.slice(0, 8)}...
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell>{getStatusBadge(session.status)}</TableCell>
|
||||
<TableCell>
|
||||
{session.has_pr ? (
|
||||
<Badge className="bg-purple-500/10 text-purple-500">
|
||||
<GitPullRequest className="h-3 w-3 mr-1" />
|
||||
PR Open
|
||||
</Badge>
|
||||
) : (
|
||||
<span className="text-sm text-muted-foreground">No PR</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">
|
||||
{formatDistanceToNow(new Date(session.started_at), { addSuffix: true })}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Link href={`/work-sessions/${session.id}`}>
|
||||
<Button variant="ghost" size="icon">
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user