feat: create criteria form

src/app/(dashboard)/dashboard/criteria/add/page.tsx

@@ -0,0 +1,26 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import AddCriteriaForm from "@/components/add-criteria-form";
+
+export default function SettingsDisplayPage() {
+  return (
+    <ScrollArea className="h-[calc(100vh-53px)]">
+      <div className="flex-1 space-y-4  p-4 md:p-8 pt-6 w-full h-full flex justify-center items-center">
+        <Card className="max-w-[700px] w-full">
+          <CardHeader>
+            <CardTitle className="mb-4 font-bold text-xl">
+              Create Criteria
+            </CardTitle>
+            <Separator />
+          </CardHeader>
+
+          <CardContent>
+            <AddCriteriaForm />
+          </CardContent>
+        </Card>
+      </div>
+      <ScrollBar />
+    </ScrollArea>
+  );
+}

src/components/add-criteria-form.tsx

@@ -0,0 +1,106 @@
+"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 { Textarea } from "./ui/textarea";
+
+const displayFormSchema = z.object({
+  name: z.string().trim().min(1, "Name is required."),
+  description: z.string().trim().min(1, "Description is required."),
+  prompt: z.string().trim().min(1, "Prompt is required."),
+});
+
+type DisplayFormValues = z.infer<typeof displayFormSchema>;
+
+// This can come from your database or API.
+const defaultValues: Partial<DisplayFormValues> = {
+  name: "",
+  description: "",
+  prompt: "",
+};
+
+export default function AddCriteriaForm() {
+  const form = useForm<DisplayFormValues>({
+    resolver: zodResolver(displayFormSchema),
+    defaultValues,
+  });
+
+  function onSubmit(data: DisplayFormValues) {
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    });
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Name</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter Name..." {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="description"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Description</FormLabel>
+              <FormControl>
+                <Textarea placeholder="Enter description..." {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="prompt"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Prompt</FormLabel>
+              <FormControl>
+                <Textarea placeholder="Enter prompt..." {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <div className="flex items-center gap-4">
+          <Button className="w-full" size="lg">
+            Create
+          </Button>
+          <Button variant="secondary" className="w-full" size="lg">
+            Create and add another
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+}

src/components/course-admin-table/tools-table.tsx

@@ -24,17 +24,17 @@ const ToolsTable = ({
           title={`Courses (${courseAdmin.length})`}
           description="Manage Courses"
         />
-        <Link
+        <div></div>
+        {/* <Link
           href="#"
           className={buttonVariants({
             variant: "default",
             // size: "sm",
           })}
-          // className="text-xs md:text-sm"
+          
-          // onClick={() => router.push(`/admin-dashboard/tools/add`)}
         >
           <Plus className="mr-2 h-4 w-4" /> Add Course
-        </Link>
+        </Link> */}
       </div>
       <Separator />
       <DataTable data={courseAdmin} columns={columns} />

src/components/criteria-table/tools-table.tsx

@@ -19,7 +19,7 @@ const ToolsTable = ({ criteriaData }: { criteriaData: Criteria[] }) => {
           description="Manage Criteria"
         />
         <Link
-          href="#"
+          href="/dashboard/criteria/add"
           className={buttonVariants({
             variant: "default",
             // size: "sm",