feat: added add account form

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

@@ -0,0 +1,26 @@
+import AddAccountForm from "@/components/add-account-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 Account
+            </CardTitle>
+            <Separator />
+          </CardHeader>
+
+          <CardContent>
+            <AddAccountForm />
+          </CardContent>
+        </Card>
+      </div>
+      <ScrollBar />
+    </ScrollArea>
+  );
+}

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

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

src/components/add-account-form.tsx

@@ -0,0 +1,146 @@
+"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";
+
+const displayFormSchema = z.object({
+  email: z
+    .string({
+      required_error: "Please select a user.",
+    })
+    .trim()
+    .email(),
+  balance: z.string().trim().min(1, "Balance is required."),
+  organization: z
+    .string({
+      required_error: "Please select an organization.",
+    })
+    .trim(),
+});
+
+type DisplayFormValues = z.infer<typeof displayFormSchema>;
+
+// This can come from your database or API.
+const defaultValues: Partial<DisplayFormValues> = {
+  balance: "",
+  email: "",
+  organization: "",
+};
+
+export default function AddAccountForm() {
+  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="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>User</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a user" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem value="johndoe@gmail.com">
+                    johndoe@gmail.com
+                  </SelectItem>
+                  <SelectItem value="adramov@gmail.com">
+                    adramov@gmail.com
+                  </SelectItem>
+                  <SelectItem value="hello@gmail.com">
+                    hello@gmail.com
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="balance"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Balance</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter balance..." {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="organization"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>User</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a organization" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem value="Skilld">Skilld</SelectItem>
+                  <SelectItem value="Ecareers">Ecareers</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>
+  );
+}