From b9ea061a2ed9b661df6c068b88de72da8bd18e45 Mon Sep 17 00:00:00 2001
From: mehedi-hasan <mdmehedihasan2810@gmail.com>
Date: Wed, 1 May 2024 20:55:53 +0600
Subject: [PATCH] feat: skill, evaluation add form

---
 .../dashboard/evaluations/add/page.tsx        |  36 ++
 .../(dashboard)/dashboard/skills/add/page.tsx |  36 ++
 src/components/add-skill-form.tsx             |  75 ++++
 src/components/evaluation-form.tsx            | 324 ++++++++++++++++++
 .../evaluations-table/tools-table.tsx         |   2 +-
 src/components/skills-table/tools-table.tsx   |   2 +-
 src/components/ui/command.tsx                 |   2 +-
 7 files changed, 474 insertions(+), 3 deletions(-)
 create mode 100644 src/app/(dashboard)/dashboard/evaluations/add/page.tsx
 create mode 100644 src/app/(dashboard)/dashboard/skills/add/page.tsx
 create mode 100644 src/components/add-skill-form.tsx
 create mode 100644 src/components/evaluation-form.tsx

diff --git a/src/app/(dashboard)/dashboard/evaluations/add/page.tsx b/src/app/(dashboard)/dashboard/evaluations/add/page.tsx
new file mode 100644
index 0000000..fd7a634
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/evaluations/add/page.tsx
@@ -0,0 +1,36 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import Breadcrumb from "@/components/breadcrumb";
+import AddEvaluationForm from "@/components/evaluation-form";
+
+const breadcrumbItems = [
+  { title: "Dashboard", link: "/dashboard" },
+  { title: "Evaluation", link: "/dashboard/evaluations" },
+  { title: "Add" },
+];
+
+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">
+        <Breadcrumb items={breadcrumbItems} />
+        <div className="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 Evaluation
+              </CardTitle>
+              <Separator />
+            </CardHeader>
+
+            <CardContent>
+             <AddEvaluationForm/>
+            </CardContent>
+          </Card>
+        </div>
+        <ScrollBar />
+      </div>
+    </ScrollArea>
+  );
+}
diff --git a/src/app/(dashboard)/dashboard/skills/add/page.tsx b/src/app/(dashboard)/dashboard/skills/add/page.tsx
new file mode 100644
index 0000000..cb8ea7a
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/skills/add/page.tsx
@@ -0,0 +1,36 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import AddSkillForm from "@/components/add-skill-form";
+import Breadcrumb from "@/components/breadcrumb";
+
+const breadcrumbItems = [
+  { title: "Dashboard", link: "/dashboard" },
+  { title: "Skills", link: "/dashboard/skills" },
+  { title: "Add" },
+];
+
+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">
+        <Breadcrumb items={breadcrumbItems} />
+        <div className="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 Skill
+              </CardTitle>
+              <Separator />
+            </CardHeader>
+
+            <CardContent>
+              <AddSkillForm />
+            </CardContent>
+          </Card>
+        </div>
+        <ScrollBar />
+      </div>
+    </ScrollArea>
+  );
+}
diff --git a/src/components/add-skill-form.tsx b/src/components/add-skill-form.tsx
new file mode 100644
index 0000000..ceaca23
--- /dev/null
+++ b/src/components/add-skill-form.tsx
@@ -0,0 +1,75 @@
+"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";
+
+const displayFormSchema = z.object({
+  name: z.string().trim().min(1, "Name is required."),
+});
+
+type DisplayFormValues = z.infer<typeof displayFormSchema>;
+
+// This can come from your database or API.
+const defaultValues: Partial<DisplayFormValues> = {
+  name: "",
+};
+
+export default function AddSkillForm() {
+  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>
+          )}
+        />
+
+        <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>
+  );
+}
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<typeof displayFormSchema>;
+
+// This can come from your database or API.
+const defaultValues: Partial<DisplayFormValues> = {
+  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<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="status"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Status</FormLabel>
+              <Popover
+                open={isStatusPopoverOpen}
+                onOpenChange={setIsStatusPopoverOpen}
+              >
+                <PopoverTrigger asChild>
+                  <FormControl>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      className={cn(
+                        "w-full justify-between",
+                        !field.value && "text-muted-foreground"
+                      )}
+                    >
+                      {field.value
+                        ? statuses.find((status) => status === field.value)
+                        : "Select Status"}
+                      <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </FormControl>
+                </PopoverTrigger>
+                <PopoverContent className="w-[300px]  md:w-[650px] p-0">
+                  <Command>
+                    <CommandList>
+                      <CommandInput
+                        placeholder="Search status..."
+                        className="h-9"
+                      />
+                      <CommandEmpty>No status found.</CommandEmpty>
+                      <CommandGroup>
+                        {statuses.map((status) => (
+                          <CommandItem
+                            value={status}
+                            key={status}
+                            onSelect={() => {
+                              form.setValue("status", status);
+                              setIsStatusPopoverOpen(false);
+                            }}
+                          >
+                            {status}
+                            <CheckIcon
+                              className={cn(
+                                "ml-auto h-4 w-4",
+                                status === field.value
+                                  ? "opacity-100"
+                                  : "opacity-0"
+                              )}
+                            />
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name={`uploadTime`}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Upload Time</FormLabel>
+              <FormControl>
+                <Input type="date" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="uploaderAccount"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Uploader Account</FormLabel>
+              <Popover
+                open={isUploaderPopoverOpen}
+                onOpenChange={setIsUploaderPopoverOpen}
+              >
+                <PopoverTrigger asChild>
+                  <FormControl>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      className={cn(
+                        "w-full justify-between",
+                        !field.value && "text-muted-foreground"
+                      )}
+                    >
+                      {field.value
+                        ? uploaders.find((uploader) => uploader === field.value)
+                        : "Select uploader"}
+                      <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </FormControl>
+                </PopoverTrigger>
+                <PopoverContent className="w-[300px]  md:w-[650px] p-0">
+                  <Command>
+                    <CommandList>
+                      <CommandInput
+                        placeholder="Search uploader..."
+                        className="h-9"
+                      />
+                      <CommandEmpty>No uploader found.</CommandEmpty>
+                      <CommandGroup>
+                        {uploaders.map((uploader) => (
+                          <CommandItem
+                            value={uploader}
+                            key={uploader}
+                            onSelect={() => {
+                              form.setValue("uploaderAccount", uploader);
+                              setIsUploaderPopoverOpen(false);
+                            }}
+                          >
+                            {uploader}
+                            <CheckIcon
+                              className={cn(
+                                "ml-auto h-4 w-4",
+                                uploader === field.value
+                                  ? "opacity-100"
+                                  : "opacity-0"
+                              )}
+                            />
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="developerUser"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Developer User</FormLabel>
+              <Popover
+                open={isDeveloperPopoverOpen}
+                onOpenChange={setIsDeveloperPopoverOpen}
+              >
+                <PopoverTrigger asChild>
+                  <FormControl>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      className={cn(
+                        "w-full justify-between",
+                        !field.value && "text-muted-foreground"
+                      )}
+                    >
+                      {field.value
+                        ? developers.find(
+                            (developer) => developer === field.value
+                          )
+                        : "Select developer"}
+                      <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </FormControl>
+                </PopoverTrigger>
+                <PopoverContent className="w-[300px]  md:w-[650px] p-0">
+                  <Command>
+                    <CommandList>
+                      <CommandInput
+                        placeholder="Search developer..."
+                        className="h-9"
+                      />
+                      <CommandEmpty>No developer found.</CommandEmpty>
+                      <CommandGroup>
+                        {developers.map((developer) => (
+                          <CommandItem
+                            value={developer}
+                            key={developer}
+                            onSelect={() => {
+                              form.setValue("developerUser", developer);
+                              setIsDeveloperPopoverOpen(false);
+                            }}
+                          >
+                            {developer}
+                            <CheckIcon
+                              className={cn(
+                                "ml-auto h-4 w-4",
+                                developer === field.value
+                                  ? "opacity-100"
+                                  : "opacity-0"
+                              )}
+                            />
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+              <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>
+  );
+}
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"
         />
         <Link
-          href="#"
+          href="/dashboard/evaluations/add"
           className={buttonVariants({
             variant: "default",
             // size: "sm",
diff --git a/src/components/skills-table/tools-table.tsx b/src/components/skills-table/tools-table.tsx
index 519d392..c11cd28 100644
--- a/src/components/skills-table/tools-table.tsx
+++ b/src/components/skills-table/tools-table.tsx
@@ -19,7 +19,7 @@ const ToolsTable = ({ skillsData }: { skillsData: Skill[] }) => {
           description="Manage Skills"
         />
         <Link
-          href="#"
+          href="/dashboard/skills/add"
           className={buttonVariants({
             variant: "default",
             // size: "sm",
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index b8c45ea..3a51ec0 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -117,7 +117,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
+      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
       className
     )}
     {...props}