export default function Review() { return ( <div>
</div>
) }
/* const validTasks = [ "started", "cloning", "indexing", "reviewing", "done", "errored", ] as const; export type reviewStatus = (typeof validTasks)[number]; export const reviewStatus = pgEnum("review_status", validTasks);
export const reviews = pgTable("reviews", { id: text("id").primaryKey(), prLink: text("pr_link").notNull(), status: reviewStatus("status").notNull(), review: text("review"), createdAt: timestamp("created_at").notNull().defaultNow(), endedAt: timestamp("ended_at"), });
*/
i want a timeline fronthend of tyhis with the canges of validTasks i want to change the process so make it fgood in ui tooo also show the wiking of status
I'll create a timeline UI component that visualizes the review process workflow with the status changes. This will show the progression through each stage with appropriate styling to indicate the current status.
This timeline UI visualizes the review process workflow with the following features:
The component is fully responsive and uses the shadcn/ui components. You can customize the colors, icons, or descriptions by modifying the statusConfig object. The sample data is included for demonstration, but you can pass your own review data to the component.
To use this in your application, simply import the ReviewTimeline component and pass it your review data.
one more same
import { pgTable, text, serial, pgEnum, timestamp } from "drizzle-orm/pg-core";
const validTasks = [ "started", "cloning", "indexing", "planning", "generating", "pushing", "done", "errored" ] as const; export type taskStatus = (typeof validTasks)[number]; export const taskStatus = pgEnum("task_status", validTasks);
export const tasks = pgTable("tasks", { id: text("id").primaryKey(), issueId: text("issue_id").notNull(), issueUrl: text("issue_url").notNull(), issueTitle: text("issue_title").notNull(), threads: text("threads").array().notNull(), status: taskStatus("status").notNull(), plan: text("plan"), pr_link: text("pr_link"), createdAt: timestamp("created_at").notNull().defaultNow(), endedAt: timestamp("ended_at"), });
with tis in task routh
with same ui
I'll create a similar timeline UI component for the task workflow with the updated statuses.
This task timeline UI visualizes the implementation workflow with the following features:
Appropriate Icons: Each status has a relevant icon that represents the action:
Contextual Information:
The component maintains the same visual style as the previous review timeline but is adapted specifically for the task implementation workflow. You can customize the descriptions, icons, or add additional information by modifying the component.
To use this in your application, simply import the TaskTimeline component and pass it your task data.