({
+ resolver: zodResolver(displayFormSchema),
+ defaultValues,
+ });
+
+ function onSubmit(data: DisplayFormValues) {
+ toast({
+ title: "You submitted the following values:",
+ description: (
+
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ });
+ }
+
+ return (
+
+
+ );
+}
diff --git a/src/components/evaluation-form.tsx b/src/components/evaluation-form.tsx
new file mode 100644
index 0000000..e4400aa
--- /dev/null
+++ b/src/components/evaluation-form.tsx
@@ -0,0 +1,324 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form";
+import { toast } from "@/components/ui/use-toast";
+import { Input } from "./ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons";
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+} from "./ui/command";
+import { cn } from "@/lib/utils";
+import { CommandList } from "cmdk";
+import { useState } from "react";
+
+const statuses = [
+ "uploading",
+ "new",
+ "requested",
+ "extraction_running",
+ "skills_extracted",
+ "evaluation_running",
+ "score_requested",
+ "course_creation",
+ "finished",
+ "deleted",
+ "extraction_failed",
+ "evaluation_failed",
+] as const;
+
+const uploaders = ["hello@skilld.team", "johndoe@gmail.com"] as const;
+const developers = ["hello@skilld.team", "johndoe@gmail.com"] as const;
+
+const displayFormSchema = z.object({
+ status: z.string().trim().min(1, "Status is required"),
+ uploadTime: z.string().refine((value) => /^\d{4}-\d{2}-\d{2}$/.test(value), {
+ message: "Upload time should be in the format YYYY-MM-DD",
+ }),
+ uploaderAccount: z
+ .string()
+ .trim()
+ .email()
+ .min(1, "Please select a uploader account"),
+ developerUser: z
+ .string()
+ .trim()
+ .email()
+ .min(1, "Please select a developer user"),
+});
+
+type DisplayFormValues = z.infer;
+
+// This can come from your database or API.
+const defaultValues: Partial = {
+ status: "",
+ uploadTime: "",
+ uploaderAccount: "",
+ developerUser: "",
+};
+
+export default function AddEvaluationForm() {
+ const [isStatusPopoverOpen, setIsStatusPopoverOpen] = useState(false);
+ const [isUploaderPopoverOpen, setIsUploaderPopoverOpen] = useState(false);
+ const [isDeveloperPopoverOpen, setIsDeveloperPopoverOpen] = useState(false);
+
+ const form = useForm({
+ resolver: zodResolver(displayFormSchema),
+ defaultValues,
+ });
+
+ function onSubmit(data: DisplayFormValues) {
+ toast({
+ title: "You submitted the following values:",
+ description: (
+
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ });
+ }
+
+ return (
+
+
+ );
+}
diff --git a/src/components/evaluations-table/tools-table.tsx b/src/components/evaluations-table/tools-table.tsx
index d911edf..82523c4 100644
--- a/src/components/evaluations-table/tools-table.tsx
+++ b/src/components/evaluations-table/tools-table.tsx
@@ -19,7 +19,7 @@ const ToolsTable = ({ evaluationsData }: { evaluationsData: Evaluation[] }) => {
description="Manage Evaluations"
/>
{
description="Manage Skills"
/>