feat: create configuration form

src/app/(dashboard)/dashboard/configurations/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 AddConfigurationForm from "@/components/add-configuration-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 Configuration
+            </CardTitle>
+            <Separator />
+          </CardHeader>
+
+          <CardContent>
+            <AddConfigurationForm />
+          </CardContent>
+        </Card>
+      </div>
+      <ScrollBar />
+    </ScrollArea>
+  );
+}

src/components/add-configuration-form.tsx

@@ -0,0 +1,90 @@
+"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."),
+  value: z.string().trim().min(1, "Value is required."),
+});
+
+type DisplayFormValues = z.infer<typeof displayFormSchema>;
+
+// This can come from your database or API.
+const defaultValues: Partial<DisplayFormValues> = {
+  name: "",
+  value: "",
+};
+
+export default function AddConfigurationForm() {
+  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="value"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Value</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter value..." {...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/add-organization-form.tsx

@@ -56,10 +56,6 @@ export default function AddOrganizationForm() {
               <FormControl>
                 <Input placeholder="Enter Name..." {...field} />
               </FormControl>
-              {/* <FormDescription>
-                This is your public display name. It can be your real name or a
-                pseudonym. You can only change this once every 30 days.
-              </FormDescription> */}
               <FormMessage />
             </FormItem>
           )}

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

@@ -24,13 +24,10 @@ const ToolsTable = ({
           description="Manage Configurations"
         />
         <Link
-          href="#"
+          href="/dashboard/configurations/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" /> Add Configuration
         </Link>