From f32d032b38633266add9a87e3b068824e8dd46b3 Mon Sep 17 00:00:00 2001
From: mehedi-hasan <mdmehedihasan2810@gmail.com>
Date: Sat, 20 Apr 2024 02:30:54 +0600
Subject: [PATCH] feat: create api communication form

---
 .../dashboard/api-communications/add/page.tsx |  26 ++
 src/components/add-account-form.tsx           |   2 +-
 src/components/add-api-communication-form.tsx | 241 ++++++++++++++++++
 .../api-communication-table/tools-table.tsx   |   7 +-
 4 files changed, 269 insertions(+), 7 deletions(-)
 create mode 100644 src/app/(dashboard)/dashboard/api-communications/add/page.tsx
 create mode 100644 src/components/add-api-communication-form.tsx

diff --git a/src/app/(dashboard)/dashboard/api-communications/add/page.tsx b/src/app/(dashboard)/dashboard/api-communications/add/page.tsx
new file mode 100644
index 0000000..324814c
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/api-communications/add/page.tsx
@@ -0,0 +1,26 @@
+import AddAPICommunicationForm from "@/components/add-api-communication-form";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+
+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 API Communication
+            </CardTitle>
+            <Separator />
+          </CardHeader>
+
+          <CardContent>
+            <AddAPICommunicationForm />
+          </CardContent>
+        </Card>
+      </div>
+      <ScrollBar />
+    </ScrollArea>
+  );
+}
diff --git a/src/components/add-account-form.tsx b/src/components/add-account-form.tsx
index 60bb61e..c310355 100644
--- a/src/components/add-account-form.tsx
+++ b/src/components/add-account-form.tsx
@@ -115,7 +115,7 @@ export default function AddAccountForm() {
           name="organization"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>User</FormLabel>
+              <FormLabel>Organization</FormLabel>
               <Select onValueChange={field.onChange} defaultValue={field.value}>
                 <FormControl>
                   <SelectTrigger>
diff --git a/src/components/add-api-communication-form.tsx b/src/components/add-api-communication-form.tsx
new file mode 100644
index 0000000..e9b0ac7
--- /dev/null
+++ b/src/components/add-api-communication-form.tsx
@@ -0,0 +1,241 @@
+"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 {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
+import { Textarea } from "./ui/textarea";
+
+const displayFormSchema = z.object({
+  pt: z
+    .string({
+      required_error: "PT is required.",
+    })
+    .trim()
+    .min(1, "PT is required."),
+  messages: z
+    .string({
+      required_error: "Messages are required.",
+    })
+    .trim()
+    .min(1, "Messages is required."),
+  completion: z
+    .string({
+      required_error: "Completion is required.",
+    })
+    .trim()
+    .min(1, "Completion is required."),
+  ct: z
+    .string({
+      required_error: "CT is required.",
+    })
+    .trim()
+    .min(1, "CT is required."),
+  tt: z
+    .string({
+      required_error: "TT is required.",
+    })
+    .trim()
+    .min(1, "TT is required."),
+  status: z
+    .string({
+      required_error: "Status is required.",
+    })
+    .trim()
+    .min(1, "Status is required."),
+  type: z
+    .string({
+      required_error: "Type is required.",
+    })
+    .trim()
+    .min(1, "Type is required."),
+  evaluation: z
+    .string({
+      required_error: "Evaluation is required.",
+    })
+    .trim()
+    .min(1, "Evaluation is required."),
+});
+
+type DisplayFormValues = z.infer<typeof displayFormSchema>;
+
+// This can come from your database or API.
+const defaultValues: Partial<DisplayFormValues> = {
+  pt: "",
+  messages: "",
+  completion: "",
+  ct: "",
+  tt: "",
+  status: "",
+  type: "",
+  evaluation: "",
+};
+
+export default function AddAPICommunicationForm() {
+  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="pt"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>PT</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter PT..." {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="messages"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Messages</FormLabel>
+              <FormControl>
+                <Textarea placeholder="Enter messages..." {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="completion"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Completion</FormLabel>
+              <FormControl>
+                <Textarea placeholder="Enter completion..." {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="ct"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>CT</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter CT..." {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="tt"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>TT</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter TT..." {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="status"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Status</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter Status..." {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="type"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Type</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter type..." {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="evaluation"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Evaluation</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a Evaluation" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem value="Uploaded at: 2023-09-20 00:00:00 - Uploader: jschultz@php.net - Developer: fabien@potencier.org - Status: finished">
+                    Uploaded at: 2023-09-20 00:00:00 - Uploader:
+                    jschultz@php.net - Developer: fabien@potencier.org - Status:
+                    finished
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+              <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/api-communication-table/tools-table.tsx b/src/components/api-communication-table/tools-table.tsx
index 3ba586f..2771f4b 100644
--- a/src/components/api-communication-table/tools-table.tsx
+++ b/src/components/api-communication-table/tools-table.tsx
@@ -8,7 +8,6 @@ import { columns } from "./columns";
 import Link from "next/link";
 import { Plus } from "lucide-react";
 import { buttonVariants } from "@/components/ui/button";
-import { Organization } from "@/types/organization";
 import { ApiCommunication } from "@/types/api-communication";
 
 const ToolsTable = ({
@@ -24,13 +23,10 @@ const ToolsTable = ({
           description="Manage Api Communications"
         />
         <Link
-          href="#"
+          href="/dashboard/api-communications/add"
           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" />{" "}
           <span className="md:hidden">Add</span>{" "}
@@ -39,7 +35,6 @@ const ToolsTable = ({
       </div>
       <Separator />
       <DataTable data={apiCommunications} columns={columns} />
-      {/* <DataTable data={tasks} columns={columns} /> */}
     </>
   );
 };