mirror of
https://github.com/Hestia-Homes/assessment-model.git
synced 2026-06-08 11:37:25 +00:00
subtasks
This commit is contained in:
Jun-te Kim
parent
2825eb1062
commit
c8d38c11d5
6 changed files with 744 additions and 0 deletions
26
src/app/api/tasks/[taskId]/route.ts
Normal file
26
src/app/api/tasks/[taskId]/route.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import { db } from "@/app/db/db";
|
||||
import { subTasks } from "@/app/db/schema/tasks/subtask";
|
||||
import { eq } from "drizzle-orm";
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
|
||||
export async function GET(
|
||||
request: NextRequest,
|
||||
{ params }: { params: Promise<{ taskId: string }> }
|
||||
) {
|
||||
try {
|
||||
const { taskId } = await params;
|
||||
const taskSubTasks = await db
|
||||
.select()
|
||||
.from(subTasks)
|
||||
.where(eq(subTasks.taskId, taskId))
|
||||
.orderBy(subTasks.updatedAt);
|
||||
|
||||
return NextResponse.json(taskSubTasks);
|
||||
} catch (error) {
|
||||
console.error("Error fetching subtasks:", error);
|
||||
return NextResponse.json(
|
||||
{ error: "Failed to fetch subtasks" },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
37
src/app/api/tasks/route.ts
Normal file
37
src/app/api/tasks/route.ts
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import { db } from "@/app/db/db";
|
||||
import { tasks } from "@/app/db/schema/tasks/tasks";
|
||||
import { desc, count } from "drizzle-orm";
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
const { searchParams } = new URL(request.url);
|
||||
const limit = parseInt(searchParams.get("limit") || "20");
|
||||
const offset = parseInt(searchParams.get("offset") || "0");
|
||||
|
||||
const allTasks = await db
|
||||
.select()
|
||||
.from(tasks)
|
||||
.orderBy(desc(tasks.updatedAt))
|
||||
.limit(limit)
|
||||
.offset(offset);
|
||||
|
||||
const countResult = await db
|
||||
.select({ count: count() })
|
||||
.from(tasks);
|
||||
const total = countResult[0].count;
|
||||
|
||||
return NextResponse.json({
|
||||
tasks: allTasks,
|
||||
total,
|
||||
limit,
|
||||
offset,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error fetching tasks:", error);
|
||||
return NextResponse.json(
|
||||
{ error: "Failed to fetch tasks" },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
146
src/app/iq/IQDashboard.tsx
Normal file
146
src/app/iq/IQDashboard.tsx
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import TaskList from "./TaskList";
|
||||
import SubtaskDetails from "./SubtaskDetails";
|
||||
|
||||
export interface Task {
|
||||
id: string;
|
||||
taskSource: string;
|
||||
jobStarted: string | null;
|
||||
jobCompleted: string | null;
|
||||
status: string;
|
||||
service: string | null;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface SubTask {
|
||||
id: string;
|
||||
taskId: string;
|
||||
jobStarted: string | null;
|
||||
jobCompleted: string | null;
|
||||
status: string;
|
||||
inputs: string | null;
|
||||
outputs: string | null;
|
||||
cloudLogsURL: string | null;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
interface TasksResponse {
|
||||
tasks: Task[];
|
||||
total: number;
|
||||
limit: number;
|
||||
offset: number;
|
||||
}
|
||||
|
||||
export default function IQDashboard() {
|
||||
const [tasks, setTasks] = useState<Task[]>([]);
|
||||
const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
|
||||
const [subtasks, setSubtasks] = useState<SubTask[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [limit, setLimit] = useState(20);
|
||||
const [offset, setOffset] = useState(0);
|
||||
const [loadingMore, setLoadingMore] = useState(false);
|
||||
|
||||
// Fetch tasks with pagination
|
||||
const fetchTasks = async (newLimit: number, newOffset: number) => {
|
||||
try {
|
||||
if (newOffset === 0) setLoading(true);
|
||||
else setLoadingMore(true);
|
||||
|
||||
const response = await fetch(
|
||||
`/api/tasks?limit=${newLimit}&offset=${newOffset}`
|
||||
);
|
||||
if (!response.ok) throw new Error("Failed to fetch tasks");
|
||||
const data: TasksResponse = await response.json();
|
||||
|
||||
if (newOffset === 0) {
|
||||
setTasks(data.tasks);
|
||||
} else {
|
||||
setTasks((prev) => [...prev, ...data.tasks]);
|
||||
}
|
||||
|
||||
setTotal(data.total);
|
||||
setLimit(data.limit);
|
||||
setOffset(newOffset + data.tasks.length);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "An error occurred");
|
||||
if (newOffset === 0) setTasks([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setLoadingMore(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Initial load (first 20)
|
||||
useEffect(() => {
|
||||
fetchTasks(20, 0);
|
||||
}, []);
|
||||
|
||||
const handleLoadMore = () => {
|
||||
fetchTasks(20, offset);
|
||||
};
|
||||
|
||||
const handleRefresh = () => {
|
||||
setOffset(0);
|
||||
fetchTasks(20, 0);
|
||||
};
|
||||
|
||||
// Fetch subtasks when a task is selected
|
||||
useEffect(() => {
|
||||
if (!selectedTaskId) {
|
||||
setSubtasks([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const fetchSubtasks = async () => {
|
||||
try {
|
||||
const response = await fetch(`/api/tasks/${selectedTaskId}`);
|
||||
if (!response.ok) throw new Error("Failed to fetch subtasks");
|
||||
const data = await response.json();
|
||||
setSubtasks(data);
|
||||
} catch (err) {
|
||||
setSubtasks([]);
|
||||
}
|
||||
};
|
||||
|
||||
fetchSubtasks();
|
||||
}, [selectedTaskId]);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen bg-gray-50">
|
||||
{/* Left sidebar - Task list */}
|
||||
<div className="w-1/3 border-r border-gray-200 bg-white">
|
||||
<TaskList
|
||||
tasks={tasks}
|
||||
selectedTaskId={selectedTaskId}
|
||||
onSelectTask={setSelectedTaskId}
|
||||
loading={loading}
|
||||
loadingMore={loadingMore}
|
||||
error={error}
|
||||
total={total}
|
||||
onLoadMore={handleLoadMore}
|
||||
onRefresh={handleRefresh}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Right side - Subtask details */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{selectedTaskId ? (
|
||||
<SubtaskDetails
|
||||
selectedTaskId={selectedTaskId}
|
||||
subtasks={subtasks}
|
||||
task={tasks.find((t) => t.id === selectedTaskId)}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-full text-gray-500">
|
||||
Select a task to view its subtasks
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
237
src/app/iq/SubtaskDetails.tsx
Normal file
237
src/app/iq/SubtaskDetails.tsx
Normal file
|
|
@ -0,0 +1,237 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { SubTask, Task } from "./IQDashboard";
|
||||
import { Badge } from "@/app/shadcn_components/ui/badge";
|
||||
import { ScrollArea } from "@/app/shadcn_components/ui/scroll-area";
|
||||
import { Card } from "@/app/shadcn_components/ui/card";
|
||||
import { Button } from "@/app/shadcn_components/ui/button";
|
||||
|
||||
interface SubtaskDetailsProps {
|
||||
selectedTaskId: string;
|
||||
subtasks: SubTask[];
|
||||
task?: Task;
|
||||
}
|
||||
|
||||
function getStatusColor(
|
||||
status: string
|
||||
): "default" | "secondary" | "destructive" | "outline" {
|
||||
switch (status.toLowerCase()) {
|
||||
case "completed":
|
||||
return "default";
|
||||
case "in progress":
|
||||
return "secondary";
|
||||
case "failed":
|
||||
return "destructive";
|
||||
default:
|
||||
return "outline";
|
||||
}
|
||||
}
|
||||
|
||||
function formatJson(jsonString: string | null): string {
|
||||
if (!jsonString) return "N/A";
|
||||
try {
|
||||
return JSON.stringify(JSON.parse(jsonString), null, 2);
|
||||
} catch {
|
||||
return jsonString;
|
||||
}
|
||||
}
|
||||
|
||||
function CopyableCodeBlock({
|
||||
content,
|
||||
label,
|
||||
}: {
|
||||
content: string;
|
||||
label: string;
|
||||
}) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const handleCopy = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(content);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
} catch (err) {
|
||||
console.error("Failed to copy:", err);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<p className="text-sm font-medium text-gray-900">{label}</p>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleCopy}
|
||||
className="h-6 px-2 text-xs"
|
||||
>
|
||||
{copied ? "✓ Copied" : "Copy"}
|
||||
</Button>
|
||||
</div>
|
||||
<pre className="bg-gray-50 p-3 rounded text-xs overflow-x-auto border border-gray-200 text-gray-700">
|
||||
{content}
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SubtaskDetails({
|
||||
selectedTaskId,
|
||||
subtasks,
|
||||
task,
|
||||
}: SubtaskDetailsProps) {
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Task Header */}
|
||||
{task && (
|
||||
<div className="p-6 border-b border-gray-200 bg-white">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-xl font-semibold text-gray-900">
|
||||
{task.taskSource}
|
||||
</h2>
|
||||
<Badge variant={getStatusColor(task.status)}>
|
||||
{task.status}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<p className="text-gray-600">Task ID</p>
|
||||
<code className="text-xs font-mono text-gray-900 break-all">
|
||||
{task.id}
|
||||
</code>
|
||||
</div>
|
||||
{task.service && (
|
||||
<div>
|
||||
<p className="text-gray-600">Service</p>
|
||||
<p className="text-gray-900">{task.service}</p>
|
||||
</div>
|
||||
)}
|
||||
{task.jobStarted && (
|
||||
<div>
|
||||
<p className="text-gray-600">Job Started</p>
|
||||
<p className="text-gray-900 text-xs">
|
||||
{new Date(task.jobStarted).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{task.jobCompleted && (
|
||||
<div>
|
||||
<p className="text-gray-600">Job Completed</p>
|
||||
<p className="text-gray-900 text-xs">
|
||||
{new Date(task.jobCompleted).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<p className="text-gray-600">Updated</p>
|
||||
<p className="text-gray-900 text-xs">
|
||||
{new Date(task.updatedAt).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Subtasks List */}
|
||||
<ScrollArea className="flex-1 p-6">
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">
|
||||
Subtasks ({subtasks.length})
|
||||
</h3>
|
||||
|
||||
{subtasks.length === 0 && (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
No subtasks found
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-4">
|
||||
{subtasks.map((subtask, index) => (
|
||||
<Card key={subtask.id} className="p-4">
|
||||
<div className="space-y-3">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-gray-900">
|
||||
Subtask {index + 1}
|
||||
</p>
|
||||
<code className="text-xs font-mono text-gray-600">
|
||||
{subtask.id}
|
||||
</code>
|
||||
</div>
|
||||
<Badge variant={getStatusColor(subtask.status)}>
|
||||
{subtask.status}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Timeline */}
|
||||
<div className="grid grid-cols-2 gap-3 text-sm">
|
||||
{subtask.jobStarted && (
|
||||
<div>
|
||||
<p className="text-gray-600 text-xs">Started</p>
|
||||
<p className="text-gray-900 text-xs">
|
||||
{new Date(subtask.jobStarted).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{subtask.jobCompleted && (
|
||||
<div>
|
||||
<p className="text-gray-600 text-xs">Completed</p>
|
||||
<p className="text-gray-900 text-xs">
|
||||
{new Date(subtask.jobCompleted).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Inputs */}
|
||||
{subtask.inputs && (
|
||||
<CopyableCodeBlock
|
||||
content={formatJson(subtask.inputs)}
|
||||
label="Inputs"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Outputs */}
|
||||
{subtask.outputs && (
|
||||
<CopyableCodeBlock
|
||||
content={formatJson(subtask.outputs)}
|
||||
label="Outputs"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Cloud Logs */}
|
||||
{subtask.cloudLogsURL && (
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-900 mb-2">
|
||||
Cloud Logs
|
||||
</p>
|
||||
<a
|
||||
href={subtask.cloudLogsURL}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 hover:text-blue-800 text-xs break-all"
|
||||
>
|
||||
{subtask.cloudLogsURL}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Updated */}
|
||||
<p className="text-xs text-gray-500">
|
||||
Updated: {new Date(subtask.updatedAt).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
293
src/app/iq/TaskList.tsx
Normal file
293
src/app/iq/TaskList.tsx
Normal file
|
|
@ -0,0 +1,293 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import { Task } from "./IQDashboard";
|
||||
import { Badge } from "@/app/shadcn_components/ui/badge";
|
||||
import { ScrollArea } from "@/app/shadcn_components/ui/scroll-area";
|
||||
import { Button } from "@/app/shadcn_components/ui/button";
|
||||
import { Input } from "@/app/shadcn_components/ui/input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/app/shadcn_components/ui/select";
|
||||
|
||||
interface TaskListProps {
|
||||
tasks: Task[];
|
||||
selectedTaskId: string | null;
|
||||
onSelectTask: (taskId: string) => void;
|
||||
loading: boolean;
|
||||
loadingMore: boolean;
|
||||
error: string | null;
|
||||
total: number;
|
||||
onLoadMore: () => void;
|
||||
onRefresh: () => void;
|
||||
}
|
||||
|
||||
type SortOption = "recent" | "oldest" | "status" | "service";
|
||||
|
||||
function getStatusColor(
|
||||
status: string
|
||||
): "default" | "secondary" | "destructive" | "outline" {
|
||||
switch (status.toLowerCase()) {
|
||||
case "completed":
|
||||
case "in progress":
|
||||
return "default";
|
||||
case "failed":
|
||||
return "destructive";
|
||||
default:
|
||||
return "secondary";
|
||||
}
|
||||
}
|
||||
|
||||
export default function TaskList({
|
||||
tasks,
|
||||
selectedTaskId,
|
||||
onSelectTask,
|
||||
loading,
|
||||
loadingMore,
|
||||
error,
|
||||
total,
|
||||
onLoadMore,
|
||||
onRefresh,
|
||||
}: TaskListProps) {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [statusFilter, setStatusFilter] = useState<string>("all");
|
||||
const [serviceFilter, setServiceFilter] = useState<string>("all");
|
||||
const [sortBy, setSortBy] = useState<SortOption>("recent");
|
||||
|
||||
// Get unique statuses and services for filter options
|
||||
const uniqueStatuses = useMemo(
|
||||
() => [...new Set(tasks.map((t) => t.status))].sort(),
|
||||
[tasks]
|
||||
);
|
||||
const uniqueServices = useMemo(
|
||||
() =>
|
||||
[...new Set(tasks.map((t) => t.service).filter(Boolean))].sort() as string[],
|
||||
[tasks]
|
||||
);
|
||||
|
||||
// Filter and sort tasks
|
||||
const filteredTasks = useMemo(() => {
|
||||
let result = tasks;
|
||||
|
||||
// Status filter
|
||||
if (statusFilter !== "all") {
|
||||
result = result.filter((t) => t.status === statusFilter);
|
||||
}
|
||||
|
||||
// Service filter
|
||||
if (serviceFilter !== "all") {
|
||||
result = result.filter((t) => t.service === serviceFilter);
|
||||
}
|
||||
|
||||
// Search query
|
||||
if (searchQuery) {
|
||||
const query = searchQuery.toLowerCase();
|
||||
result = result.filter(
|
||||
(t) =>
|
||||
t.id.toLowerCase().includes(query) ||
|
||||
t.taskSource.toLowerCase().includes(query) ||
|
||||
(t.service?.toLowerCase().includes(query) ?? false)
|
||||
);
|
||||
}
|
||||
|
||||
// Sort
|
||||
const sorted = [...result];
|
||||
switch (sortBy) {
|
||||
case "recent":
|
||||
sorted.sort(
|
||||
(a, b) =>
|
||||
new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
|
||||
);
|
||||
break;
|
||||
case "oldest":
|
||||
sorted.sort(
|
||||
(a, b) =>
|
||||
new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime()
|
||||
);
|
||||
break;
|
||||
case "status":
|
||||
sorted.sort((a, b) => a.status.localeCompare(b.status));
|
||||
break;
|
||||
case "service":
|
||||
sorted.sort((a, b) =>
|
||||
(a.service ?? "").localeCompare(b.service ?? "")
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
return sorted;
|
||||
}, [tasks, statusFilter, serviceFilter, searchQuery, sortBy]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Header */}
|
||||
<div className="p-6 border-b border-gray-200 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-gray-900">Tasks</h2>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
{filteredTasks.length} of {tasks.length} (Total: {total})
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onRefresh}
|
||||
disabled={loading}
|
||||
className="text-xs"
|
||||
>
|
||||
↻ Refresh
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="p-4 border-b border-gray-200 space-y-3 bg-gray-50">
|
||||
{/* Search */}
|
||||
<Input
|
||||
placeholder="Search by ID, source, or service..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="text-sm"
|
||||
/>
|
||||
|
||||
{/* Sort */}
|
||||
<Select value={sortBy} onValueChange={(value) => setSortBy(value as SortOption)}>
|
||||
<SelectTrigger className="text-sm">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="recent">Most Recent</SelectItem>
|
||||
<SelectItem value="oldest">Oldest First</SelectItem>
|
||||
<SelectItem value="status">By Status</SelectItem>
|
||||
<SelectItem value="service">By Service</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* Status Filter */}
|
||||
{uniqueStatuses.length > 0 && (
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<SelectTrigger className="text-sm">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Statuses</SelectItem>
|
||||
{uniqueStatuses.map((status) => (
|
||||
<SelectItem key={status} value={status}>
|
||||
{status}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
|
||||
{/* Service Filter */}
|
||||
{uniqueServices.length > 0 && (
|
||||
<Select value={serviceFilter} onValueChange={setServiceFilter}>
|
||||
<SelectTrigger className="text-sm">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Services</SelectItem>
|
||||
{uniqueServices.map((service) => (
|
||||
<SelectItem key={service} value={service}>
|
||||
{service}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
|
||||
{/* Reset Filters */}
|
||||
{(searchQuery || statusFilter !== "all" || serviceFilter !== "all") && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSearchQuery("");
|
||||
setStatusFilter("all");
|
||||
setServiceFilter("all");
|
||||
}}
|
||||
className="w-full text-xs"
|
||||
>
|
||||
Clear Filters
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<ScrollArea className="flex-1">
|
||||
{error && (
|
||||
<div className="p-4 m-4 bg-red-50 border border-red-200 rounded text-red-700">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading && (
|
||||
<div className="p-4 text-center text-gray-500">
|
||||
Loading tasks...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && !error && tasks.length === 0 && (
|
||||
<div className="p-4 text-center text-gray-500">
|
||||
No tasks found
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="divide-y divide-gray-200 pb-4">
|
||||
{filteredTasks.map((task) => (
|
||||
<button
|
||||
key={task.id}
|
||||
onClick={() => onSelectTask(task.id)}
|
||||
className={`w-full text-left p-4 transition-colors hover:bg-gray-50 ${
|
||||
selectedTaskId === task.id ? "bg-blue-50 border-l-4 border-blue-500" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<code className="text-xs font-mono text-gray-600 truncate">
|
||||
{task.id}
|
||||
</code>
|
||||
<Badge variant={getStatusColor(task.status)}>
|
||||
{task.status}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
<p className="font-medium text-gray-900 truncate">
|
||||
{task.taskSource}
|
||||
</p>
|
||||
{task.service && (
|
||||
<p className="text-xs text-gray-500">{task.service}</p>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-gray-400">
|
||||
{new Date(task.updatedAt).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
|
||||
{/* Load More Button */}
|
||||
{tasks.length < total && (
|
||||
<div className="p-4 flex justify-center border-t border-gray-200">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onLoadMore}
|
||||
disabled={loadingMore}
|
||||
className="text-xs"
|
||||
>
|
||||
{loadingMore ? "Loading..." : "Load More"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
5
src/app/iq/page.tsx
Normal file
5
src/app/iq/page.tsx
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import IQDashboard from "./IQDashboard";
|
||||
|
||||
export default function IQPage() {
|
||||
return <IQDashboard />;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue