feat: edit account page

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

@@ -1,4 +1,6 @@
-import AddAccountForm from "@/components/add-account-form";
+"use client"
+
+import AccountForm from "@/components/account-form";
 import Breadcrumb from "@/components/breadcrumb";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
@@ -10,25 +12,29 @@ const breadcrumbItems = [
   { title: "Add" },
 ];
 
-export default function SettingsDisplayPage() {
+export default function Page() {
   return (
     <ScrollArea className="h-[calc(100vh-53px)]">
-     <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
+      <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 Account
-            </CardTitle>
-            <Separator />
-          </CardHeader>
+          <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>
+            <CardContent>
+              <AccountForm
+                onSubmit={() => {}}
+                btn1_content="Create"
+                btn2_content="Create and add another"
+              />
+            </CardContent>
+          </Card>
+        </div>
       </div>
       <ScrollBar />
     </ScrollArea>

src/app/(dashboard)/dashboard/accounts/edit/[id]/page.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import AccountForm from "@/components/account-form";
+import Breadcrumb from "@/components/breadcrumb";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { dummyAccounts } from "@/constants/data";
+import { Account } from "@/types/account";
+
+const breadcrumbItems = [
+  { title: "Dashboard", link: "/dashboard" },
+  { title: "Accounts", link: "/dashboard/accounts" },
+  { title: "Edit" },
+];
+
+export default function Page({ params }: { params: { id: string } }) {
+
+  const account = dummyAccounts.find((account) => account.id === +params.id);
+  
+  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">
+                Edit Account
+              </CardTitle>
+              <Separator />
+            </CardHeader>
+
+            <CardContent>
+              <AccountForm
+                account={account as Account}
+                onSubmit={() => {}}
+                btn1_content="Save and continue editing"
+                btn2_content="Save changes"
+              />
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+      <ScrollBar />
+    </ScrollArea>
+  );
+}

src/components/account-form.tsx

@@ -22,20 +22,15 @@ import {
   SelectTrigger,
   SelectValue,
 } from "./ui/select";
+import { Account } from "@/types/account";
 
 const displayFormSchema = z.object({
-  email: z
-    .string({
-      required_error: "Please select a user.",
-    })
-    .trim()
-    .email(),
+  email: z.string().trim().min(1, { message: "Please select a user." }).email(),
   balance: z.string().trim().min(1, "Balance is required."),
   organization: z
-    .string({
-      required_error: "Please select an organization.",
-    })
-    .trim(),
+    .string()
+    .trim()
+    .min(1, { message: "Please select an organization." }),
 });
 
 type DisplayFormValues = z.infer<typeof displayFormSchema>;
@@ -47,10 +42,26 @@ const defaultValues: Partial<DisplayFormValues> = {
   organization: "",
 };
 
-export default function AddAccountForm() {
+type Props = {
+  account?: Account;
+  onSubmit: () => void;
+  btn1_content: string;
+  btn2_content: string;
+};
+
+export default function AccountForm({
+  account,
+  onSubmit: onFormSubmit,
+  btn1_content,
+  btn2_content,
+}: Props) {
   const form = useForm<DisplayFormValues>({
     resolver: zodResolver(displayFormSchema),
-    defaultValues,
+    defaultValues: {
+      balance: account?.balance ? String(account?.balance) : "",
+      email: account?.email || "",
+      organization: account?.organization || "",
+    },
   });
 
   function onSubmit(data: DisplayFormValues) {
@@ -73,21 +84,19 @@ export default function AddAccountForm() {
           render={({ field }) => (
             <FormItem>
               <FormLabel>User</FormLabel>
-              <Select onValueChange={field.onChange} defaultValue={field.value}>
+              <Select onValueChange={field.onChange} value={field.value}>
                 <FormControl>
                   <SelectTrigger>
                     <SelectValue placeholder="Select a user" />
                   </SelectTrigger>
                 </FormControl>
                 <SelectContent>
-                  <SelectItem value="johndoe@gmail.com">
-                    johndoe@gmail.com
+                  <SelectItem value="john@gmail.com">john@gmail.com</SelectItem>
+                  <SelectItem value="sarah@example.com">
+                    sarah@example.com
                   </SelectItem>
-                  <SelectItem value="adramov@gmail.com">
-                    adramov@gmail.com
-                  </SelectItem>
-                  <SelectItem value="hello@gmail.com">
-                    hello@gmail.com
+                  <SelectItem value="michael@example.com">
+                    michael@example.com
                   </SelectItem>
                 </SelectContent>
               </Select>
@@ -123,8 +132,11 @@ export default function AddAccountForm() {
                   </SelectTrigger>
                 </FormControl>
                 <SelectContent>
-                  <SelectItem value="Skilld">Skilld</SelectItem>
-                  <SelectItem value="Ecareers">Ecareers</SelectItem>
+                  <SelectItem value="XYZ Tech Inc.">XYZ Tech Inc.</SelectItem>
+                  <SelectItem value="ABC Solutions">ABC Solutions</SelectItem>
+                  <SelectItem value="Acme Corporation">
+                    Acme Corporation
+                  </SelectItem>
                 </SelectContent>
               </Select>
               <FormMessage />
@@ -134,10 +146,10 @@ export default function AddAccountForm() {
 
         <div className="flex items-center gap-4 flex-col sm:flex-row">
           <Button className="w-full" size="lg">
-            Create
+            {btn1_content}
           </Button>
           <Button variant="secondary" className="w-full" size="lg">
-            Create and add another
+            {btn2_content}
           </Button>
         </div>
       </form>

src/components/accounts-table/cell-action.tsx

@@ -14,6 +14,7 @@ import { Organization } from "@/types/organization";
 import { User } from "@/types/user";
 
 import { BookCheck, Edit, MoreHorizontal, Trash } from "lucide-react";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
@@ -49,14 +50,15 @@ export const CellAction: React.FC<CellActionProps> = ({ data }) => {
         <DropdownMenuContent align="end">
           <DropdownMenuLabel>Actions</DropdownMenuLabel>
 
-          <DropdownMenuItem
-            className="cursor-pointer"
-            // onClick={() =>
-            //   router.push(`#`)
-            // }
-          >
-            <Edit className="mr-2 h-4 w-4" /> Update
+          <DropdownMenuItem className="cursor-pointer p-0">
+            <Link
+              href={`/dashboard/accounts/edit/${data.id}`}
+              className="flex items-center gap-2 px-2 py-1.5 w-full"
+            >
+              <Edit className="h-4 w-4" /> Edit
+            </Link>
           </DropdownMenuItem>
+
           <DropdownMenuItem
             className="cursor-pointer"
             onClick={() => setIsDeleteModalOpen(true)}

src/constants/data.ts

@@ -89,7 +89,7 @@ export const dummyAccounts: Account[] = [
   {
     id: 2,
     email: "sarah@example.com",
-    balance: 0,
+    balance: 2000,
     organization: "ABC Solutions",
     accountHistory: "None",
     created_at: new Date().toISOString(),