feat: organization edit page

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

@@ -1,7 +1,9 @@
+"use client"
+
 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";
+import OrganizationForm from "@/components/organization-form";
 import Breadcrumb from "@/components/breadcrumb";
 
 const breadcrumbItems = [
@@ -25,7 +27,11 @@ export default function SettingsDisplayPage() {
             </CardHeader>
 
             <CardContent>
-              <AddOrganizationForm />
+              <OrganizationForm
+                onSubmit={() => {}}
+                btn1_content="Create"
+                btn2_content="Create and add another"
+              />
             </CardContent>
           </Card>
         </div>

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

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

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

@@ -1,13 +1,8 @@
-import AddUserForm from "@/components/user-form";
+"use client";
+
+import UserForm from "@/components/user-form";
 import Breadcrumb from "@/components/breadcrumb";
-import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 
@@ -32,7 +27,11 @@ export default function SettingsDisplayPage() {
             </CardHeader>
 
             <CardContent>
-              <AddUserForm />
+              <UserForm
+                onSubmit={() => {}}
+                btn1_content="Create"
+                btn2_content="Create and add another"
+              />
             </CardContent>
           </Card>
         </div>

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

@@ -1,3 +1,5 @@
+"use client";
+
 import UserForm from "@/components/user-form";
 import Breadcrumb from "@/components/breadcrumb";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -13,11 +15,9 @@ const breadcrumbItems = [
 ];
 
 export default function Page({ params }: { params: { id: string } }) {
-  console.log(params);
 
   const user = dummyUsers.find((user) => user.id === +params.id);
 
-  console.log(user);
 
   return (
     <ScrollArea className="h-[calc(100vh-53px)]">
@@ -33,7 +33,12 @@ export default function Page({ params }: { params: { id: string } }) {
             </CardHeader>
 
             <CardContent>
-              <UserForm user={user as User} />
+              <UserForm
+                user={user as User}
+                onSubmit={() => {}}
+                btn1_content="Save and continue editing"
+                btn2_content="Save changes"
+              />
             </CardContent>
           </Card>
         </div>

src/components/organization-form.tsx

@@ -15,6 +15,7 @@ import {
 } from "@/components/ui/form";
 import { toast } from "@/components/ui/use-toast";
 import { Input } from "./ui/input";
+import { Organization } from "@/types/organization";
 
 const displayFormSchema = z.object({
   name: z.string().trim().min(1, "Name is required."),
@@ -27,10 +28,23 @@ const defaultValues: Partial<DisplayFormValues> = {
   name: "",
 };
 
-export default function AddOrganizationForm() {
+type Props = {
+  organization?: Organization;
+  onSubmit: () => void;
+  btn1_content: string;
+  btn2_content: string;
+};
+export default function OrganizationForm({
+  organization,
+  onSubmit: onFormSubmit,
+  btn1_content,
+  btn2_content,
+}: Props) {
   const form = useForm<DisplayFormValues>({
     resolver: zodResolver(displayFormSchema),
-    defaultValues,
+    defaultValues: {
+      name: organization?.name || "",
+    },
   });
 
   function onSubmit(data: DisplayFormValues) {
@@ -42,6 +56,8 @@ export default function AddOrganizationForm() {
         </pre>
       ),
     });
+
+    onFormSubmit();
   }
 
   return (
@@ -63,10 +79,10 @@ export default function AddOrganizationForm() {
 
         <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/organizations-table/cell-action.tsx

@@ -13,6 +13,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";
 
@@ -48,13 +49,13 @@ export const CellAction: React.FC<CellActionProps> = ({ data }) => {
         <DropdownMenuContent align="end">
           <DropdownMenuLabel>Actions</DropdownMenuLabel>
 
-          <DropdownMenuItem
+          <DropdownMenuItem className="cursor-pointer p-0">
-            className="cursor-pointer"
+            <Link
-            // onClick={() =>
+              href={`/dashboard/organizations/edit/${data.id}`}
-            //   router.push(`#`)
+              className="flex items-center gap-2 px-2 py-1.5 w-full"
-            // }
+            >
-          >
+              <Edit className="h-4 w-4" /> Edit
-            <Edit className="mr-2 h-4 w-4" /> Update
+            </Link>
           </DropdownMenuItem>
           <DropdownMenuItem
             className="cursor-pointer"

src/components/user-form.tsx

@@ -62,7 +62,19 @@ const displayFormSchema = z.object({
 
 type DisplayFormValues = z.infer<typeof displayFormSchema>;
 
-export default function UserForm({ user }: { user?: User }) {
+type Props = {
+  user?: User;
+  onSubmit: () => void;
+  btn1_content: string;
+  btn2_content: string;
+};
+
+export default function UserForm({
+  user,
+  onSubmit: onFormSubmit,
+  btn1_content,
+  btn2_content,
+}: Props) {
   const form = useForm<DisplayFormValues>({
     resolver: zodResolver(displayFormSchema),
     defaultValues: {
@@ -89,6 +101,8 @@ export default function UserForm({ user }: { user?: User }) {
         </pre>
       ),
     });
+
+    onFormSubmit();
   }
 
   return (
@@ -209,10 +223,10 @@ export default function UserForm({ user }: { user?: User }) {
         />
         <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/users-table/cell-action.tsx

@@ -53,10 +53,10 @@ export const CellAction: React.FC<CellActionProps> = ({ data }) => {
             <UserCheck className="mr-2 h-4 w-4" /> Approve User
           </DropdownMenuItem>
 
-          <DropdownMenuItem className="cursor-pointer">
+          <DropdownMenuItem className="cursor-pointer p-0">
             <Link
               href={`/dashboard/users/edit/${data.id}`}
-              className="flex items-center gap-2"
+              className="flex items-center gap-2 px-2 py-1.5 w-full"
             >
               <Edit className="h-4 w-4" /> Edit
             </Link>