feat: added add organization form

src/app/(dashboard)/dashboard/organizations/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 AddOrganizationForm from "@/components/add-organization-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 Organization
+            </CardTitle>
+            <Separator />
+          </CardHeader>
+
+          <CardContent>
+            <AddOrganizationForm />
+          </CardContent>
+        </Card>
+      </div>
+      <ScrollBar />
+    </ScrollArea>
+  );
+}

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

@@ -1,3 +1,4 @@
+import AddUserForm from "@/components/add-user-form";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -8,7 +9,6 @@ import {
 } from "@/components/ui/card";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
-import UsersAddForm from "@/components/users-add-form";
 
 export default function SettingsDisplayPage() {
   return (
@@ -23,13 +23,8 @@ export default function SettingsDisplayPage() {
           </CardHeader>
 
           <CardContent>
-            <UsersAddForm />
+            <AddUserForm />
           </CardContent>
-          {/* <CardFooter>
-          <Button className="w-full" size="lg">
-            Submit
-          </Button>
-        </CardFooter> */}
         </Card>
       </div>
       <ScrollBar />

src/components/add-organization-form.tsx

@@ -0,0 +1,79 @@
+"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 AddOrganizationForm() {
+  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>
+              {/* <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>
+          )}
+        />
+
+        <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-user-form.tsx

@@ -18,7 +18,7 @@ import {
 import { toast } from "@/components/ui/use-toast";
 import { Input } from "./ui/input";
 
-const items = [
+const roles = [
   {
     id: "ROLE_SUPER_ADMIN",
     label: "ROLE_SUPER_ADMIN",
@@ -68,7 +68,7 @@ const defaultValues: Partial<DisplayFormValues> = {
   roles: ["ROLE_USER"],
 };
 
-export default function UsersAddForm() {
+export default function AddUserForm() {
   const form = useForm<DisplayFormValues>({
     resolver: zodResolver(displayFormSchema),
     defaultValues,
@@ -172,33 +172,33 @@ export default function UsersAddForm() {
                   Select the items you want to display in the sidebar.
                 </FormDescription> */}
               </div>
-              {items.map((item) => (
+              {roles.map((role) => (
                 <FormField
-                  key={item.id}
+                  key={role.id}
                   control={form.control}
                   name="roles"
                   render={({ field }) => {
                     return (
                       <FormItem
-                        key={item.id}
+                        key={role.id}
                         className="flex flex-row items-start space-x-3 space-y-0"
                       >
                         <FormControl>
                           <Checkbox
-                            checked={field.value?.includes(item.id)}
+                            checked={field.value?.includes(role.id)}
                             onCheckedChange={(checked) => {
                               return checked
-                                ? field.onChange([...field.value, item.id])
+                                ? field.onChange([...field.value, role.id])
                                 : field.onChange(
                                     field.value?.filter(
-                                      (value) => value !== item.id
+                                      (value) => value !== role.id
                                     )
                                   );
                             }}
                           />
                         </FormControl>
                         <FormLabel className="font-normal">
-                          {item.label}
+                          {role.label}
                         </FormLabel>
                       </FormItem>
                     );

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

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