From 3d31713c69514814e48badc9f5cb6a483362df6e Mon Sep 17 00:00:00 2001
From: Abdulmalik Yusuf <31839174+abdulmalikyusuf@users.noreply.github.com>
Date: Tue, 13 Aug 2024 21:32:16 +0100
Subject: [PATCH 1/5] feat: implemented create roles page

---
 src/actions/roles-and-permissions.ts          | 114 ++++++++++++++
 .../create-role/page.tsx                      | 144 ++++++++++++++++++
 .../roles-and-permissions/page.tsx            |  88 ++++++-----
 .../roles-permissions-creation/index.tsx      | 110 +++++++++++++
 src/schemas/index.ts                          |  12 ++
 5 files changed, 427 insertions(+), 41 deletions(-)
 create mode 100644 src/actions/roles-and-permissions.ts
 create mode 100644 src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/create-role/page.tsx
 create mode 100644 src/components/common/modals/roles-permissions-creation/index.tsx

diff --git a/src/actions/roles-and-permissions.ts b/src/actions/roles-and-permissions.ts
new file mode 100644
index 000000000..5125a7e71
--- /dev/null
+++ b/src/actions/roles-and-permissions.ts
@@ -0,0 +1,114 @@
+"use server";
+
+import axios from "axios";
+import { z } from "zod";
+
+import { auth } from "~/lib/auth";
+import { roleSchema } from "~/schemas";
+
+const apiUrl = process.env.API_URL;
+
+export const getRoles = async (org_id: string) => {
+  const session = await auth();
+
+  try {
+    const response = await axios.get(
+      `${apiUrl}/api/v1/organisations/${org_id}/roles`,
+      {
+        headers: {
+          Authorization: `Bearer ${session?.access_token}`,
+        },
+      },
+    );
+
+    return {
+      data: response.data,
+    };
+  } catch (error) {
+    return axios.isAxiosError(error) && error.response
+      ? {
+          error: error.response.data.message || "Failed.",
+          status: error.response.status,
+        }
+      : {
+          error: "An unexpected error occurred.",
+        };
+  }
+};
+
+export const createRole = async (
+  values: z.infer<typeof roleSchema>,
+  org_id: string,
+) => {
+  const validatedFields = roleSchema.safeParse(values);
+  if (!validatedFields.success) {
+    return {
+      error: "Create Role Failed. Please check your inputs.",
+    };
+  }
+
+  const session = await auth();
+  const payload = validatedFields.data;
+
+  try {
+    const response = await axios.post(
+      `${apiUrl}/api/v1/organisations/${org_id}/roles`,
+      payload,
+      {
+        headers: {
+          Authorization: `Bearer ${session?.access_token}`,
+        },
+      },
+    );
+    return {
+      data: response.data,
+    };
+  } catch (error) {
+    return axios.isAxiosError(error) && error.response
+      ? {
+          error: error.response.data.message || "Role creation failed.",
+          status: error.response.status,
+        }
+      : {
+          error: "An unexpected error occurred.",
+        };
+  }
+};
+export const updatePermissions = async (
+  values: z.infer<typeof roleSchema>,
+  org_id: string,
+) => {
+  const validatedFields = roleSchema.safeParse(values);
+  if (!validatedFields.success) {
+    return {
+      error: "Create Role Failed. Please check your inputs.",
+    };
+  }
+
+  const session = await auth();
+  const payload = validatedFields.data;
+
+  try {
+    const response = await axios.post(
+      `${apiUrl}/api/v1/organisations/${org_id}/roles`,
+      payload,
+      {
+        headers: {
+          Authorization: `Bearer ${session?.access_token}`,
+        },
+      },
+    );
+    return {
+      data: response.data,
+    };
+  } catch (error) {
+    return axios.isAxiosError(error) && error.response
+      ? {
+          error: error.response.data.message || "Role creation failed.",
+          status: error.response.status,
+        }
+      : {
+          error: "An unexpected error occurred.",
+        };
+  }
+};
diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/create-role/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/create-role/page.tsx
new file mode 100644
index 000000000..2d7322842
--- /dev/null
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/create-role/page.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ChevronLeftIcon } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { createRole } from "~/actions/roles-and-permissions";
+import RolePermissionsCreationModal from "~/components/common/modals/roles-permissions-creation";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "~/components/ui/select";
+import { useLocalStorage } from "~/hooks/use-local-storage";
+import { roleSchema } from "~/schemas";
+
+type UseFormInputs = z.infer<typeof roleSchema>;
+type Permission = {
+  [key: string]: boolean;
+};
+
+function CreateNewRolePage() {
+  const [org_id] = useLocalStorage<string>("current_orgid", "");
+  const [permissions, setPermissions] = useState<Permission>({});
+
+  const { register, handleSubmit } = useForm<UseFormInputs>({
+    mode: "onBlur",
+    resolver: zodResolver(roleSchema),
+  });
+
+  const onValid = async (values: UseFormInputs) => {
+    try {
+      const { error, status } = await createRole(values, org_id);
+      if (error && status) {
+        // show toast
+      } else {
+        // show toast dismiss modal
+      }
+      return;
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  return (
+    <div className="flex w-full max-w-[682px] flex-col gap-6">
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center gap-4 text-[##0A0A0A]">
+          <Link
+            href="/dashboard/admin/settings/organization/roles-and-permissions"
+            className=""
+          >
+            <ChevronLeftIcon className="size-6" />
+          </Link>
+          <h3 className="text-[28px] font-semibold">Create Role</h3>
+        </div>
+        <p className="w-full max-w-[610px] text-sm leading-normal text-[#525252]">
+          Custom roles let you group permissions and assign them to principals
+          in your organization. You can manually select permissions or import
+          permissions from another role.
+        </p>
+      </div>
+      <div className="flex w-full flex-col gap-6">
+        <form
+          onSubmit={handleSubmit(onValid)}
+          className="flex w-full flex-col gap-6"
+        >
+          <div className="flex w-full max-w-[620px] flex-col gap-2">
+            <label className="mb-2 block text-left text-base font-bold text-neutral-dark-2">
+              Name of role
+            </label>
+            <input
+              type="text"
+              placeholder="e.g: IT Staff"
+              {...register("name")}
+              className="!w-full rounded-md border border-border bg-transparent px-3 py-2 shadow-sm outline-none focus:border-primary focus:ring-ring md:w-56"
+            />
+          </div>
+          <div className="flex w-full max-w-[620px] flex-col gap-2">
+            <label className="block text-left text-base font-bold text-neutral-dark-2">
+              Permissions
+            </label>
+            <Select {...register("permissions")}>
+              <SelectTrigger>
+                <SelectValue
+                  placeholder="Select Permissions"
+                  className="text-neutral-dark-2"
+                />
+              </SelectTrigger>
+              <SelectContent>
+                {[
+                  {
+                    name: "Super Admin",
+                    description: "Full control and Full Permissions",
+                  },
+                  {
+                    name: "Admin",
+                    description: "Full control and Limited Permissions",
+                  },
+                  {
+                    name: "User",
+                    description: "Limited Control and Limited Permissions",
+                  },
+                  {
+                    name: "Custom Role",
+                    description: "Custom Control and Custom Permissions",
+                  },
+                ].map((permission) => (
+                  <SelectItem
+                    key={permission.name}
+                    value={permission.name}
+                    className="flex flex-col items-start gap-1 px-1.5 py-[14px] text-neutral-dark-1 hover:rounded-sm hover:bg-[#F4F4F5] hover:text-neutral-dark-2"
+                  >
+                    <h6 className="font-medium">{permission.name}</h6>
+                    <p className="text-sm">{permission.description}</p>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex w-full max-w-[620px] flex-col gap-2">
+            <label className="block text-left text-base font-bold text-neutral-dark-2">
+              Role Description
+            </label>
+            <textarea
+              placeholder="describe role"
+              {...register("description")}
+              className="min-h-20 w-full resize-none rounded-md border border-border bg-transparent px-3 py-2 shadow-sm outline-none focus:border-primary focus:ring-ring"
+            />
+          </div>
+        </form>
+        <div className="">
+          <RolePermissionsCreationModal handleSubmit={setPermissions} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default CreateNewRolePage;
diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx
index 66eb20c31..74861e679 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx
@@ -1,12 +1,15 @@
 "use client";
 
+import Link from "next/link";
 import { useEffect, useState } from "react";
 
 import { getApiUrl } from "~/actions/getApiUrl";
+import { getRoles, updatePermissions } from "~/actions/roles-and-permissions";
 import CustomButton from "~/components/common/common-button/common-button";
-import RoleCreationModal from "~/components/common/modals/role-creation";
 import LoadingSpinner from "~/components/miscellaneous/loading-spinner";
 import { useToast } from "~/components/ui/use-toast";
+import { useLocalStorage } from "~/hooks/use-local-storage";
+import { Organisation } from "~/types";
 
 type Role = {
   id: number;
@@ -21,24 +24,24 @@ type Permission = {
 const RolesAndPermission = () => {
   const [selectedRoleId, setSelectedRoleId] = useState<number | undefined>();
   const [permissions, setPermissions] = useState<Permission>({});
-  const [isModalOpen, setIsModalOpen] = useState(false);
   const [roles, setRoles] = useState<Role[]>([]);
   const [apiUrl, setApiUrl] = useState("");
   const { toast } = useToast();
   const [loadingRoles, setLoadingRoles] = useState<boolean>(true);
   const [loadingPermissions, setLoadingPermissions] = useState<boolean>(false);
   const [loadingRequest, setLoadingRequest] = useState<boolean>(false);
-  const org_id = "9ca4512c-f665-4901-ba63-0b6492e47d32";
+  const [userOrg, setUserOrg] = useLocalStorage<Organisation[]>("user_org", []);
 
   useEffect(() => {
-    setLoadingRoles(true);
     const fetchData = async () => {
       try {
         const url = await getApiUrl();
         setApiUrl(url);
-        const response = await fetch(`${url}/organisations/${org_id}/roles`);
-        const data = await response.json();
-        setRoles(data);
+        const { data, error } = await getRoles(
+          userOrg.at(0)?.organisation_id ??
+            "8912fe8c-8ed8-4f06-b48b-941167000875",
+        );
+        setRoles(data.data);
         setLoadingRoles(false);
       } catch (error: unknown) {
         toast({
@@ -50,6 +53,7 @@ const RolesAndPermission = () => {
         setLoadingRoles(false);
       }
     };
+    setLoadingRoles(true);
     fetchData();
   }, [toast]);
 
@@ -59,7 +63,7 @@ const RolesAndPermission = () => {
         setLoadingPermissions(true);
         try {
           const response = await fetch(
-            `${apiUrl}/organisations/${org_id}/roles/${selectedRoleId}`,
+            `${apiUrl}/organisations/${userOrg.at(0)?.organisation_id}/roles/${selectedRoleId}`,
           );
           const permissionsData = await response.json();
           setPermissions(permissionsData.permission_list);
@@ -75,7 +79,14 @@ const RolesAndPermission = () => {
       }
     };
     fetchPermissions();
-  }, [selectedRoleId, apiUrl, org_id, toast]);
+    // setPermissions({
+    //   "Can view transactions": true,
+    //   "Can view refunds": true,
+    //   "Can log refunds": true,
+    //   "Can view users": true,
+    //   "Can create users": true,
+    // });
+  }, [selectedRoleId, apiUrl, userOrg, toast]);
 
   const handleRoleClick = (roleId: number) => {
     setSelectedRoleId(roleId);
@@ -125,12 +136,8 @@ const RolesAndPermission = () => {
     setLoadingRequest(false);
   };
 
-  const handleModalOpen = () => {
-    setIsModalOpen(true);
-  };
-
-  const handleModalClose = () => {
-    setIsModalOpen(false);
+  const handlePermissionsChange = async () => {
+    await updatePermissions({}, "");
   };
 
   return (
@@ -139,39 +146,39 @@ const RolesAndPermission = () => {
         <div className="w-1/4">
           <h2 className="mb-10 text-xl font-medium">Roles</h2>
           <ul className="rounded-md border border-[#CBD5E1] p-3">
-            {loadingRoles && (
+            {loadingRoles ? (
               <div className="flex justify-center py-8">
                 <LoadingSpinner className="size-4 animate-spin stroke-orange-500 sm:size-5" />
               </div>
-            )}
-            {roles.map((role) => (
-              <li
-                key={role.id}
-                className={`mb-2 cursor-pointer border-[#CBD5E1] p-2 ${
-                  selectedRoleId === role.id
-                    ? "rounded-md bg-orange-500 text-white"
-                    : "border-b bg-white text-[#0a0a0a] hover:bg-[#F1F5F9]"
-                }`}
-                onClick={() => handleRoleClick(role.id)}
-              >
-                <h3 className="text-base font-medium">{role.name}</h3>
-                <p
-                  className={`text-xs font-normal ${selectedRoleId === role.id ? "text-white" : "text-[#525252]"}`}
+            ) : (
+              roles.map((role) => (
+                <li
+                  key={role.id}
+                  className={`mb-2 cursor-pointer border-[#CBD5E1] p-2 ${
+                    selectedRoleId === role.id
+                      ? "rounded-md bg-orange-500 text-white"
+                      : "border-b bg-white text-[#0a0a0a] hover:bg-[#F1F5F9]"
+                  }`}
+                  onClick={() => handleRoleClick(role.id)}
                 >
-                  {role.description}
-                </p>
-              </li>
-            ))}
+                  <h3 className="text-base font-medium">{role.name}</h3>
+                  <p
+                    className={`text-xs font-normal ${selectedRoleId === role.id ? "text-white" : "text-[#525252]"}`}
+                  >
+                    {role.description}
+                    {/* Full control and Full Permissions */}
+                  </p>
+                </li>
+              ))
+            )}
           </ul>
         </div>
         <div className="w-3/4">
           <div className="mb-2 flex justify-end">
-            <CustomButton
-              variant="primary"
-              className="mb-6"
-              onClick={handleModalOpen}
-            >
-              + Create roles
+            <CustomButton variant="primary" className="mb-6">
+              <Link href="/dashboard/admin/settings/organization/roles-and-permissions/create-role">
+                + Create roles
+              </Link>
             </CustomButton>
           </div>
           <div className="rounded-md border border-[#CBD5E1] px-5 py-6">
@@ -238,7 +245,6 @@ const RolesAndPermission = () => {
           </div>
         </div>
       </div>
-      <RoleCreationModal show={isModalOpen} onClose={handleModalClose} />
     </div>
   );
 };
diff --git a/src/components/common/modals/roles-permissions-creation/index.tsx b/src/components/common/modals/roles-permissions-creation/index.tsx
new file mode 100644
index 000000000..b2fd6f9fa
--- /dev/null
+++ b/src/components/common/modals/roles-permissions-creation/index.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { Dispatch, SetStateAction, useState } from "react";
+
+import CustomButton from "~/components/common/common-button/common-button";
+import LoadingSpinner from "~/components/miscellaneous/loading-spinner";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "~/components/ui/dialog";
+
+type Permission = {
+  [key: string]: boolean;
+};
+
+const perm = {
+  "Can view transactions": false,
+  "Can view refunds": false,
+  "Can log refunds": false,
+  "Can view users": false,
+  "Can create users": false,
+  "Can blacklist/whitelist users": false,
+};
+
+const RolePreferencesCreationModal: React.FC = ({
+  handleSubmit,
+}: {
+  handleSubmit: Dispatch<SetStateAction<Permission>>;
+}) => {
+  const [permissions, setPermissions] = useState<Permission>(perm);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const handleToggle = (permission: string, value: boolean) => {
+    setPermissions({
+      ...permissions,
+      [permission]: value,
+    });
+  };
+
+  return (
+    <>
+      <Dialog>
+        <DialogTrigger asChild>
+          <CustomButton type="button" variant="primary">
+            Add Permissions
+          </CustomButton>
+        </DialogTrigger>
+        <DialogContent className="flex flex-col gap-6">
+          <DialogHeader className="!space-y-0 border-b border-[#CBD5E1] p-1 !pt-0 md:p-3">
+            <DialogTitle className="mb-1 text-base font-medium text-[#0A0A0A]">
+              Permissions
+            </DialogTitle>
+            <DialogDescription className="text-xs font-normal text-[#525252]">
+              See the list of permissions for this role
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-8">
+            <div className="flex flex-col gap-4 px-3">
+              {Object.keys(permissions).map((permission) => (
+                <div
+                  key={permission}
+                  className="flex items-center justify-between pb-1.5"
+                >
+                  <span className="text-sm font-normal text-[#525252]">
+                    {permission
+                      .replaceAll("_", " ")
+                      .replaceAll(/\b\w/g, (l) => l.toUpperCase())}
+                  </span>
+                  <label className="relative inline-flex cursor-pointer items-center">
+                    <input
+                      type="checkbox"
+                      className="peer sr-only"
+                      checked={permissions[permission]}
+                      onChange={(event) =>
+                        handleToggle(permission, event.target.checked)
+                      }
+                    />
+                    <div className="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-orange-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-4 peer-focus:ring-orange-300 dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-orange-800"></div>
+                  </label>
+                </div>
+              ))}
+            </div>
+            <div className="flex justify-end gap-4">
+              <DialogClose className="rounded border border-[#E2E8F0] bg-[#F1F5F9] px-4 py-2 text-sm font-medium text-[#0F172A] hover:bg-[#c1c9d2]">
+                Cancel
+              </DialogClose>
+              <CustomButton
+                variant="primary"
+                onClick={() => handleSubmit(permissions)}
+              >
+                {isSaving ? (
+                  <LoadingSpinner className="mx-auto size-4 animate-spin sm:size-5" />
+                ) : (
+                  "Create Role"
+                )}
+              </CustomButton>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+export default RolePreferencesCreationModal;
diff --git a/src/schemas/index.ts b/src/schemas/index.ts
index 89455d07b..9dda0723c 100644
--- a/src/schemas/index.ts
+++ b/src/schemas/index.ts
@@ -100,3 +100,15 @@ export const productSchema = z.object({
   price: z.string(),
   category: z.string(),
 });
+
+export const roleSchema = z.object({
+  name: z.string().min(2, {
+    message: "name is required",
+  }),
+  permissions: z.string().min(2, {
+    message: "Role Permissions must be at least 2 characters.",
+  }),
+  description: z.string().min(2, {
+    message: "Role description must be at least 2 characters.",
+  }),
+});

From c004e0e05db7702fd5dc76a43ac460c84402ff50 Mon Sep 17 00:00:00 2001
From: Abdulmalik Yusuf <31839174+abdulmalikyusuf@users.noreply.github.com>
Date: Thu, 15 Aug 2024 21:33:43 +0100
Subject: [PATCH 2/5] Feat: integrated the Roles and Permissions page with the
 API.

---
 src/actions/roles-and-permissions.ts          |  74 ++++-
 .../create-role/page.tsx                      | 279 ++++++++++++++----
 .../roles-and-permissions/page.tsx            | 140 +++++----
 .../roles-permissions-creation/index.tsx      |  82 +++--
 src/schemas/index.ts                          |  14 +-
 5 files changed, 413 insertions(+), 176 deletions(-)

diff --git a/src/actions/roles-and-permissions.ts b/src/actions/roles-and-permissions.ts
index 5125a7e71..e0cee7b68 100644
--- a/src/actions/roles-and-permissions.ts
+++ b/src/actions/roles-and-permissions.ts
@@ -35,6 +35,64 @@ export const getRoles = async (org_id: string) => {
         };
   }
 };
+export const getPermissions = async () => {
+  const session = await auth();
+
+  try {
+    const response = await axios.get(
+      `${apiUrl}/api/v1/organisations/permissions`,
+      {
+        headers: {
+          Authorization: `Bearer ${session?.access_token}`,
+        },
+      },
+    );
+
+    return {
+      data: response.data,
+    };
+  } catch (error) {
+    return axios.isAxiosError(error) && error.response
+      ? {
+          error: error.response.data.message || "Failed.",
+          status: error.response.status,
+        }
+      : {
+          error: "An unexpected error occurred.",
+        };
+  }
+};
+
+export const getRolePermissions = async (
+  currentOrgId: string,
+  roleId: string,
+) => {
+  const session = await auth();
+
+  try {
+    const response = await axios.get(
+      `${apiUrl}/api/v1/organisations/${currentOrgId}/roles/${roleId}`,
+      {
+        headers: {
+          Authorization: `Bearer ${session?.access_token}`,
+        },
+      },
+    );
+
+    return {
+      data: response.data.data,
+    };
+  } catch (error) {
+    return axios.isAxiosError(error) && error.response
+      ? {
+          error: error.response.data.message || "Failed.",
+          status: error.response.status,
+        }
+      : {
+          error: "An unexpected error occurred.",
+        };
+  }
+};
 
 export const createRole = async (
   values: z.infer<typeof roleSchema>,
@@ -60,6 +118,7 @@ export const createRole = async (
         },
       },
     );
+
     return {
       data: response.data,
     };
@@ -74,11 +133,16 @@ export const createRole = async (
         };
   }
 };
-export const updatePermissions = async (
+const roleSchemaWithId = roleSchema.extend({
+  id: z.string().uuid(),
+  permissions: z.array(z.string().uuid()),
+});
+export const updateRole = async (
   values: z.infer<typeof roleSchema>,
-  org_id: string,
+  currentOrgId: string,
+  roleId: string,
 ) => {
-  const validatedFields = roleSchema.safeParse(values);
+  const validatedFields = roleSchemaWithId.safeParse(values);
   if (!validatedFields.success) {
     return {
       error: "Create Role Failed. Please check your inputs.",
@@ -89,8 +153,8 @@ export const updatePermissions = async (
   const payload = validatedFields.data;
 
   try {
-    const response = await axios.post(
-      `${apiUrl}/api/v1/organisations/${org_id}/roles`,
+    const response = await axios.put(
+      `${apiUrl}/organisations/${currentOrgId}/roles/${roleId}`,
       payload,
       {
         headers: {
diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/create-role/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/create-role/page.tsx
index 2d7322842..30d3fb5bf 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/create-role/page.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/create-role/page.tsx
@@ -3,12 +3,14 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ChevronLeftIcon } from "lucide-react";
 import Link from "next/link";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
-import { createRole } from "~/actions/roles-and-permissions";
+import { createRole, getPermissions } from "~/actions/roles-and-permissions";
+import CustomButton from "~/components/common/common-button/common-button";
 import RolePermissionsCreationModal from "~/components/common/modals/roles-permissions-creation";
+import LoadingSpinner from "~/components/miscellaneous/loading-spinner";
 import {
   Select,
   SelectContent,
@@ -16,36 +18,187 @@ import {
   SelectTrigger,
   SelectValue,
 } from "~/components/ui/select";
+import { toast } from "~/components/ui/use-toast";
 import { useLocalStorage } from "~/hooks/use-local-storage";
 import { roleSchema } from "~/schemas";
 
 type UseFormInputs = z.infer<typeof roleSchema>;
-type Permission = {
-  [key: string]: boolean;
+type Role = {
+  name: string;
+  description: string;
+  permissions: Record<string, boolean>;
+};
+
+const permOptions: Role[] = [
+  {
+    name: "Super Admin",
+    description: "Full control and Full Permissions",
+    permissions: {
+      "Can view transactions": true,
+      "Can view refunds": true,
+      "Can view users": true,
+      "Can create users": true,
+      "Can blacklist/whitelist users": true,
+    },
+  },
+  {
+    name: "Admin",
+    description: "Full control and Limited Permissions",
+    permissions: {
+      "Can view transactions": true,
+      "Can view refunds": true,
+      "Can view users": true,
+      "Can create users": true,
+      "Can blacklist/whitelist users": false,
+    },
+  },
+  {
+    name: "User",
+    description: "Limited Control and Limited Permissions",
+    permissions: {
+      "Can view transactions": true,
+      "Can view refunds": true,
+      "Can view users": false,
+      "Can create users": false,
+      "Can blacklist/whitelist users": false,
+    },
+  },
+  {
+    name: "Custom Role",
+    description: "Custom Control and Custom Permissions",
+    permissions: {
+      "Can view transactions": false,
+      "Can view refunds": false,
+      "Can view users": false,
+      "Can create users": false,
+      "Can blacklist/whitelist users": false,
+    },
+  },
+];
+
+type APIPermissions = {
+  name: string;
+  id: string;
+  description: string;
+};
+
+type PermissionOption = {
+  name: string;
+  description: string;
+  permissions: {
+    id: string;
+    name: string;
+    description: string;
+    value: boolean;
+  }[];
+};
+
+const transformPermissions = (apiResponse: APIPermissions[]) => {
+  // eslint-disable-next-line unicorn/no-array-reduce
+  const apiResponseMap = apiResponse.reduce<Record<string, APIPermissions>>(
+    (accumulator, permission) => {
+      accumulator[permission.name.toLowerCase()] = permission;
+      return accumulator;
+    },
+    {},
+  );
+
+  const transformedPermOptions = permOptions.map((role) => ({
+    name: role.name,
+    description: role.description,
+    permissions: Object.keys(role.permissions).map((permName) => {
+      const permKey = permName.toLowerCase();
+      const apiPerm = apiResponseMap[permKey];
+
+      return {
+        id: apiPerm.id,
+        name: permName,
+        description: apiPerm.description,
+        value: role.permissions[permName],
+      };
+    }),
+  }));
+  return transformedPermOptions;
 };
 
 function CreateNewRolePage() {
-  const [org_id] = useLocalStorage<string>("current_orgid", "");
-  const [permissions, setPermissions] = useState<Permission>({});
+  const [currentOrgId] = useLocalStorage<string>("current_orgid", "");
+  const [isSaving, setIsSaving] = useState(false);
+  const [permissions, setPermissions] = useState<
+    PermissionOption["permissions"] | []
+  >([]);
+  const [permissionOptions, setPermissionOptions] = useState<
+    PermissionOption[] | []
+  >([]);
 
-  const { register, handleSubmit } = useForm<UseFormInputs>({
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+  } = useForm<UseFormInputs>({
     mode: "onBlur",
     resolver: zodResolver(roleSchema),
   });
 
+  useEffect(() => {
+    const fetchPermissions = async () => {
+      await getPermissions()
+        .then((data) => {
+          if (data.data) setPermissionOptions(transformPermissions(data.data));
+        })
+        .catch((error) => {
+          // eslint-disable-next-line no-console
+          console.log(error);
+        });
+    };
+    fetchPermissions();
+  }, []);
+
+  useEffect(() => {
+    if (permissions.length > 0) {
+      const permissionIds = permissions
+        .filter((permission) => permission.value === true)
+        .map((permission) => permission.id);
+      setValue("permissions", permissionIds as [string, ...string[]]);
+    }
+  }, [permissions, setValue]);
+
   const onValid = async (values: UseFormInputs) => {
+    setIsSaving(true);
     try {
-      const { error, status } = await createRole(values, org_id);
-      if (error && status) {
-        // show toast
-      } else {
-        // show toast dismiss modal
-      }
-      return;
-    } catch (error) {
-      console.log(error);
+      await createRole(values, currentOrgId)
+        .then((data) => {
+          if (!data.error) {
+            toast({
+              title: "🎉 Role Created Successfully!",
+              description:
+                "You have successfully created the new role Role Name. You can now assign this role to team members and manage their permissions in the Roles & Permissions section.",
+              variant: "default",
+            });
+          }
+          setIsSaving(false);
+        })
+        .catch((error) => {
+          toast({
+            title: "⚠️ Error Creating Role",
+            description:
+              "Oops! Something went wrong while trying to create the new role. Please check your input and try again. If the problem persists, contact support.",
+            variant: "destructive",
+          });
+          setIsSaving(false);
+        });
+    } catch {
+      toast({
+        title: "⚠️ Error Creating Role",
+        description:
+          "Oops! Something went wrong while trying to create the new role. Please check your input and try again. If the problem persists, contact support.",
+        variant: "destructive",
+      });
+      setIsSaving(false);
     }
   };
+
   return (
     <div className="flex w-full max-w-[682px] flex-col gap-6">
       <div className="flex flex-col gap-2">
@@ -64,11 +217,11 @@ function CreateNewRolePage() {
           permissions from another role.
         </p>
       </div>
-      <div className="flex w-full flex-col gap-6">
-        <form
-          onSubmit={handleSubmit(onValid)}
-          className="flex w-full flex-col gap-6"
-        >
+      <form
+        onSubmit={handleSubmit(onValid)}
+        className="flex w-full flex-col gap-6"
+      >
+        <div className="flex w-full flex-col gap-6">
           <div className="flex w-full max-w-[620px] flex-col gap-2">
             <label className="mb-2 block text-left text-base font-bold text-neutral-dark-2">
               Name of role
@@ -84,43 +237,33 @@ function CreateNewRolePage() {
             <label className="block text-left text-base font-bold text-neutral-dark-2">
               Permissions
             </label>
-            <Select {...register("permissions")}>
-              <SelectTrigger>
-                <SelectValue
-                  placeholder="Select Permissions"
-                  className="text-neutral-dark-2"
-                />
-              </SelectTrigger>
-              <SelectContent>
-                {[
-                  {
-                    name: "Super Admin",
-                    description: "Full control and Full Permissions",
-                  },
-                  {
-                    name: "Admin",
-                    description: "Full control and Limited Permissions",
-                  },
-                  {
-                    name: "User",
-                    description: "Limited Control and Limited Permissions",
-                  },
-                  {
-                    name: "Custom Role",
-                    description: "Custom Control and Custom Permissions",
-                  },
-                ].map((permission) => (
-                  <SelectItem
-                    key={permission.name}
-                    value={permission.name}
-                    className="flex flex-col items-start gap-1 px-1.5 py-[14px] text-neutral-dark-1 hover:rounded-sm hover:bg-[#F4F4F5] hover:text-neutral-dark-2"
-                  >
-                    <h6 className="font-medium">{permission.name}</h6>
-                    <p className="text-sm">{permission.description}</p>
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+            <div className="flex flex-col gap-0.5">
+              <Select
+                onValueChange={(value) => setPermissions(JSON.parse(value))}
+              >
+                <SelectTrigger className="!text-left">
+                  <SelectValue
+                    placeholder="Select Permissions"
+                    className="text-neutral-dark-2"
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  {permissionOptions.map((option) => (
+                    <SelectItem
+                      key={option.name}
+                      value={JSON.stringify(option.permissions)}
+                      className="flex flex-col items-start gap-1 px-1.5 py-[14px] text-neutral-dark-1 hover:rounded-sm hover:bg-[#F4F4F5] hover:text-neutral-dark-2"
+                    >
+                      <h6 className="font-medium">{option.name}</h6>
+                      <p className="text-sm">{option.description}</p>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {errors.permissions && (
+                <p className="text-red-500">Please select valid permissions.</p>
+              )}
+            </div>
           </div>
           <div className="flex w-full max-w-[620px] flex-col gap-2">
             <label className="block text-left text-base font-bold text-neutral-dark-2">
@@ -132,11 +275,23 @@ function CreateNewRolePage() {
               className="min-h-20 w-full resize-none rounded-md border border-border bg-transparent px-3 py-2 shadow-sm outline-none focus:border-primary focus:ring-ring"
             />
           </div>
-        </form>
-        <div className="">
-          <RolePermissionsCreationModal handleSubmit={setPermissions} />
         </div>
-      </div>
+        <div className="flex gap-x-6">
+          <RolePermissionsCreationModal
+            handleChange={setPermissions}
+            permissions={permissions}
+          />
+          <CustomButton variant="primary" type="submit" isDisabled={isSaving}>
+            {isSaving ? (
+              <LoadingSpinner
+                className={`mx-auto size-4 animate-spin sm:size-5 ${isSaving && "opacity-50"}`}
+              />
+            ) : (
+              "Create Role"
+            )}
+          </CustomButton>
+        </div>
+      </form>
     </div>
   );
 }
diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx
index 74861e679..3dc5a59ae 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx
@@ -4,43 +4,54 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 
 import { getApiUrl } from "~/actions/getApiUrl";
-import { getRoles, updatePermissions } from "~/actions/roles-and-permissions";
+import {
+  getPermissions,
+  getRolePermissions,
+  getRoles,
+  updateRole,
+} from "~/actions/roles-and-permissions";
 import CustomButton from "~/components/common/common-button/common-button";
 import LoadingSpinner from "~/components/miscellaneous/loading-spinner";
 import { useToast } from "~/components/ui/use-toast";
 import { useLocalStorage } from "~/hooks/use-local-storage";
-import { Organisation } from "~/types";
 
 type Role = {
-  id: number;
+  id: string;
   name: string;
   description: string;
 };
 
 type Permission = {
-  [key: string]: boolean;
+  id: string;
+  name: string;
+  description: string;
 };
 
 const RolesAndPermission = () => {
-  const [selectedRoleId, setSelectedRoleId] = useState<number | undefined>();
-  const [permissions, setPermissions] = useState<Permission>({});
+  const [selectedRoleId, setSelectedRoleId] = useState<string | undefined>();
+  const [permissions, setPermissions] = useState<string[] | []>([]);
+  const [allPermission, setAllPermissions] = useState<Permission[] | []>([]);
   const [roles, setRoles] = useState<Role[]>([]);
   const [apiUrl, setApiUrl] = useState("");
   const { toast } = useToast();
   const [loadingRoles, setLoadingRoles] = useState<boolean>(true);
   const [loadingPermissions, setLoadingPermissions] = useState<boolean>(false);
   const [loadingRequest, setLoadingRequest] = useState<boolean>(false);
-  const [userOrg, setUserOrg] = useLocalStorage<Organisation[]>("user_org", []);
+  const [currentOrgId] = useLocalStorage<string | undefined>(
+    "current_orgid",
+    "",
+  );
 
   useEffect(() => {
+    if (!currentOrgId) return;
     const fetchData = async () => {
       try {
         const url = await getApiUrl();
         setApiUrl(url);
-        const { data, error } = await getRoles(
-          userOrg.at(0)?.organisation_id ??
-            "8912fe8c-8ed8-4f06-b48b-941167000875",
-        );
+        const { data, error } = await getRoles(currentOrgId);
+
+        if (error) throw new Error("");
+
         setRoles(data.data);
         setLoadingRoles(false);
       } catch (error: unknown) {
@@ -55,19 +66,24 @@ const RolesAndPermission = () => {
     };
     setLoadingRoles(true);
     fetchData();
-  }, [toast]);
+  }, [currentOrgId]);
 
   useEffect(() => {
     const fetchPermissions = async () => {
       if (selectedRoleId) {
         setLoadingPermissions(true);
         try {
-          const response = await fetch(
-            `${apiUrl}/organisations/${userOrg.at(0)?.organisation_id}/roles/${selectedRoleId}`,
+          await getRolePermissions(currentOrgId, selectedRoleId).then(
+            (data) => {
+              const rolesData = data.data;
+              if (rolesData.permissions.length > 0) {
+                setPermissions(
+                  rolesData.permissions.map((permission) => permission.id),
+                );
+              }
+              setLoadingPermissions(false);
+            },
           );
-          const permissionsData = await response.json();
-          setPermissions(permissionsData.permission_list);
-          setLoadingPermissions(false);
         } catch {
           toast({
             title: "An error occurred",
@@ -79,67 +95,64 @@ const RolesAndPermission = () => {
       }
     };
     fetchPermissions();
-    // setPermissions({
-    //   "Can view transactions": true,
-    //   "Can view refunds": true,
-    //   "Can log refunds": true,
-    //   "Can view users": true,
-    //   "Can create users": true,
-    // });
-  }, [selectedRoleId, apiUrl, userOrg, toast]);
+  }, [selectedRoleId, apiUrl, currentOrgId, toast]);
 
-  const handleRoleClick = (roleId: number) => {
+  useEffect(() => {
+    const fetchPermissions = async () => {
+      await getPermissions()
+        .then((data) => {
+          if (data.data) setAllPermissions(data.data);
+        })
+        .catch((error) => {
+          // eslint-disable-next-line no-console
+          console.log(error);
+        });
+    };
+    fetchPermissions();
+  }, []);
+
+  const handleRoleClick = (roleId: string) => {
     setSelectedRoleId(roleId);
   };
 
-  const handleToggle = (permission: string, value: boolean) => {
-    setPermissions({
-      ...permissions,
-      [permission]: value,
-    });
+  const handleToggle = (permissionId: string, checked: boolean) => {
+    if (checked) {
+      setPermissions((previous) => [...previous, permissionId]);
+    } else {
+      setPermissions((previous) =>
+        previous.filter((id) => id !== permissionId),
+      );
+    }
   };
 
   const handleSave = async () => {
+    if (!selectedRoleId) return;
+    const selectedRole =
+      roles.some((role) => role.id === selectedRoleId) &&
+      roles.find((role) => role.id === selectedRoleId);
     setLoadingRequest(true);
     try {
-      const response = await fetch(
-        `${apiUrl}/organisations/${org_id}/${selectedRoleId}/permissions`,
-        {
-          method: "PUT",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({ permission_list: permissions }),
-        },
-      );
-
-      if (response.ok) {
+      await updateRole(
+        { ...selectedRole, permissions },
+        currentOrgId,
+        selectedRoleId,
+      ).then(() => {
         toast({
           title: "Success",
-          description: "Permissions updated successfully",
+          description: "Role updated successfully",
           variant: "default",
         });
-      } else {
-        toast({
-          title: "Error",
-          description: "Failed to update permissions",
-          variant: "destructive",
-        });
-      }
+      });
     } catch {
       toast({
         title: "Error",
-        description: "Failed to update permissions",
+        description: "Failed to update role",
         variant: "destructive",
       });
     }
     setLoadingRequest(false);
   };
 
-  const handlePermissionsChange = async () => {
-    await updatePermissions({}, "");
-  };
-
   return (
     <div className="">
       <div className="flex gap-8">
@@ -166,7 +179,6 @@ const RolesAndPermission = () => {
                     className={`text-xs font-normal ${selectedRoleId === role.id ? "text-white" : "text-[#525252]"}`}
                   >
                     {role.description}
-                    {/* Full control and Full Permissions */}
                   </p>
                 </li>
               ))
@@ -203,15 +215,15 @@ const RolesAndPermission = () => {
               <div className="item-center flex justify-center py-48">
                 <LoadingSpinner className="size-4 animate-spin stroke-orange-500 sm:size-5" />
               </div>
-            ) : (
+            ) : allPermission.length > 0 ? (
               <div className="mt-6">
-                {Object.keys(permissions).map((permission) => (
+                {allPermission.map((permission) => (
                   <div
-                    key={permission}
+                    key={permission.id}
                     className="mb-4 flex items-center justify-between"
                   >
                     <span className="text-sm font-normal text-[#525252]">
-                      {permission
+                      {permission.name
                         .replaceAll("_", " ")
                         .replaceAll(/\b\w/g, (l) => l.toUpperCase())}
                     </span>
@@ -219,9 +231,9 @@ const RolesAndPermission = () => {
                       <input
                         type="checkbox"
                         className="peer sr-only"
-                        checked={permissions[permission]}
+                        checked={permissions.includes(permission.id)}
                         onChange={(event) =>
-                          handleToggle(permission, event.target.checked)
+                          handleToggle(permission.id, event.target.checked)
                         }
                       />
                       <div className="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-orange-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-4 peer-focus:ring-orange-300 dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-orange-800"></div>
@@ -241,6 +253,8 @@ const RolesAndPermission = () => {
                   </button>
                 </div>
               </div>
+            ) : (
+              <p className="">Ooops! Something went wrong.</p>
             )}
           </div>
         </div>
diff --git a/src/components/common/modals/roles-permissions-creation/index.tsx b/src/components/common/modals/roles-permissions-creation/index.tsx
index b2fd6f9fa..3c8bc230f 100644
--- a/src/components/common/modals/roles-permissions-creation/index.tsx
+++ b/src/components/common/modals/roles-permissions-creation/index.tsx
@@ -1,9 +1,8 @@
 "use client";
 
-import { Dispatch, SetStateAction, useState } from "react";
+import { Dispatch, SetStateAction } from "react";
 
 import CustomButton from "~/components/common/common-button/common-button";
-import LoadingSpinner from "~/components/miscellaneous/loading-spinner";
 import {
   Dialog,
   DialogClose,
@@ -15,38 +14,45 @@ import {
 } from "~/components/ui/dialog";
 
 type Permission = {
-  [key: string]: boolean;
+  id: string;
+  name: string;
+  description: string;
+  value: boolean;
 };
 
-const perm = {
-  "Can view transactions": false,
-  "Can view refunds": false,
-  "Can log refunds": false,
-  "Can view users": false,
-  "Can create users": false,
-  "Can blacklist/whitelist users": false,
-};
-
-const RolePreferencesCreationModal: React.FC = ({
-  handleSubmit,
+function RolePreferencesCreationModal({
+  permissions,
+  handleChange,
 }: {
-  handleSubmit: Dispatch<SetStateAction<Permission>>;
-}) => {
-  const [permissions, setPermissions] = useState<Permission>(perm);
-  const [isSaving, setIsSaving] = useState(false);
-
-  const handleToggle = (permission: string, value: boolean) => {
-    setPermissions({
-      ...permissions,
-      [permission]: value,
-    });
+  permissions: Permission[];
+  handleChange: Dispatch<
+    SetStateAction<
+      | {
+          id: string;
+          name: string;
+          description: string;
+          value: boolean;
+        }[]
+      | []
+    >
+  >;
+}) {
+  const handleToggle = (index: number, checked: boolean) => {
+    const currentElement = permissions.at(index);
+    if (currentElement) {
+      currentElement.value = checked;
+      handleChange([
+        ...permissions.slice(0, index),
+        currentElement,
+        ...permissions.slice(index + 1),
+      ]);
+    }
   };
-
   return (
     <>
       <Dialog>
         <DialogTrigger asChild>
-          <CustomButton type="button" variant="primary">
+          <CustomButton type="button" variant="secondary">
             Add Permissions
           </CustomButton>
         </DialogTrigger>
@@ -61,13 +67,13 @@ const RolePreferencesCreationModal: React.FC = ({
           </DialogHeader>
           <div className="flex flex-col gap-8">
             <div className="flex flex-col gap-4 px-3">
-              {Object.keys(permissions).map((permission) => (
+              {permissions.map((permission, index) => (
                 <div
-                  key={permission}
+                  key={permission.id}
                   className="flex items-center justify-between pb-1.5"
                 >
                   <span className="text-sm font-normal text-[#525252]">
-                    {permission
+                    {permission.name
                       .replaceAll("_", " ")
                       .replaceAll(/\b\w/g, (l) => l.toUpperCase())}
                   </span>
@@ -75,9 +81,9 @@ const RolePreferencesCreationModal: React.FC = ({
                     <input
                       type="checkbox"
                       className="peer sr-only"
-                      checked={permissions[permission]}
+                      checked={permission.value}
                       onChange={(event) =>
-                        handleToggle(permission, event.target.checked)
+                        handleToggle(index, event.target.checked)
                       }
                     />
                     <div className="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-orange-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-4 peer-focus:ring-orange-300 dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-orange-800"></div>
@@ -87,24 +93,14 @@ const RolePreferencesCreationModal: React.FC = ({
             </div>
             <div className="flex justify-end gap-4">
               <DialogClose className="rounded border border-[#E2E8F0] bg-[#F1F5F9] px-4 py-2 text-sm font-medium text-[#0F172A] hover:bg-[#c1c9d2]">
-                Cancel
+                Done
               </DialogClose>
-              <CustomButton
-                variant="primary"
-                onClick={() => handleSubmit(permissions)}
-              >
-                {isSaving ? (
-                  <LoadingSpinner className="mx-auto size-4 animate-spin sm:size-5" />
-                ) : (
-                  "Create Role"
-                )}
-              </CustomButton>
             </div>
           </div>
         </DialogContent>
       </Dialog>
     </>
   );
-};
+}
 
 export default RolePreferencesCreationModal;
diff --git a/src/schemas/index.ts b/src/schemas/index.ts
index 9dda0723c..34bb938fd 100644
--- a/src/schemas/index.ts
+++ b/src/schemas/index.ts
@@ -101,13 +101,21 @@ export const productSchema = z.object({
   category: z.string(),
 });
 
+const permissionsSchema = z.object({
+  "Can view transactions": z.boolean(),
+  "Can view refunds": z.boolean(),
+  "Can log refunds": z.boolean(),
+  "Can view users": z.boolean(),
+  "Can create users": z.boolean(),
+  "Can blacklist/whitelist users": z.boolean(),
+});
 export const roleSchema = z.object({
   name: z.string().min(2, {
     message: "name is required",
   }),
-  permissions: z.string().min(2, {
-    message: "Role Permissions must be at least 2 characters.",
-  }),
+  permissions: z
+    .array(z.string().uuid())
+    .nonempty("At least one permission must be selected"),
   description: z.string().min(2, {
     message: "Role description must be at least 2 characters.",
   }),

From e80bfee04b92b14d351b978a172767b5eb828673 Mon Sep 17 00:00:00 2001
From: Abdulmalik Yusuf <31839174+abdulmalikyusuf@users.noreply.github.com>
Date: Thu, 15 Aug 2024 22:44:20 +0100
Subject: [PATCH 3/5] fix: lint errors

---
 .../organization/roles-and-permissions/create-role/page.tsx   | 2 +-
 .../settings/organization/roles-and-permissions/page.tsx      | 4 ++--
 src/schemas/index.ts                                          | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/create-role/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/create-role/page.tsx
index 30d3fb5bf..b52da934e 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/create-role/page.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/create-role/page.tsx
@@ -179,7 +179,7 @@ function CreateNewRolePage() {
           }
           setIsSaving(false);
         })
-        .catch((error) => {
+        .catch(() => {
           toast({
             title: "⚠️ Error Creating Role",
             description:
diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx
index 3dc5a59ae..d1c7fadf2 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx
@@ -50,7 +50,7 @@ const RolesAndPermission = () => {
         setApiUrl(url);
         const { data, error } = await getRoles(currentOrgId);
 
-        if (error) throw new Error("");
+        if (error) throw new Error("An error occurred!");
 
         setRoles(data.data);
         setLoadingRoles(false);
@@ -66,7 +66,7 @@ const RolesAndPermission = () => {
     };
     setLoadingRoles(true);
     fetchData();
-  }, [currentOrgId]);
+  }, [currentOrgId, toast]);
 
   useEffect(() => {
     const fetchPermissions = async () => {
diff --git a/src/schemas/index.ts b/src/schemas/index.ts
index 34bb938fd..2411becbc 100644
--- a/src/schemas/index.ts
+++ b/src/schemas/index.ts
@@ -101,7 +101,7 @@ export const productSchema = z.object({
   category: z.string(),
 });
 
-const permissionsSchema = z.object({
+export const permissionsSchema = z.object({
   "Can view transactions": z.boolean(),
   "Can view refunds": z.boolean(),
   "Can log refunds": z.boolean(),

From fe17e476b491ed5eea2cfb30452fa25382b412e1 Mon Sep 17 00:00:00 2001
From: Abdulmalik Yusuf <31839174+abdulmalikyusuf@users.noreply.github.com>
Date: Fri, 16 Aug 2024 06:29:23 +0100
Subject: [PATCH 4/5] fix: lint errors

---
 src/actions/roles-and-permissions.ts                  |  2 +-
 .../organization/roles-and-permissions/page.tsx       | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/actions/roles-and-permissions.ts b/src/actions/roles-and-permissions.ts
index e0cee7b68..365fa1ae2 100644
--- a/src/actions/roles-and-permissions.ts
+++ b/src/actions/roles-and-permissions.ts
@@ -138,7 +138,7 @@ const roleSchemaWithId = roleSchema.extend({
   permissions: z.array(z.string().uuid()),
 });
 export const updateRole = async (
-  values: z.infer<typeof roleSchema>,
+  values: z.infer<typeof roleSchemaWithId>,
   currentOrgId: string,
   roleId: string,
 ) => {
diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx
index d1c7fadf2..bcc443380 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx
@@ -70,7 +70,7 @@ const RolesAndPermission = () => {
 
   useEffect(() => {
     const fetchPermissions = async () => {
-      if (selectedRoleId) {
+      if (selectedRoleId && currentOrgId) {
         setLoadingPermissions(true);
         try {
           await getRolePermissions(currentOrgId, selectedRoleId).then(
@@ -78,7 +78,9 @@ const RolesAndPermission = () => {
               const rolesData = data.data;
               if (rolesData.permissions.length > 0) {
                 setPermissions(
-                  rolesData.permissions.map((permission) => permission.id),
+                  rolesData.permissions.map(
+                    (permission: Permission) => permission.id,
+                  ),
                 );
               }
               setLoadingPermissions(false);
@@ -126,10 +128,11 @@ const RolesAndPermission = () => {
   };
 
   const handleSave = async () => {
-    if (!selectedRoleId) return;
+    if (!selectedRoleId || !currentOrgId) return;
     const selectedRole =
       roles.some((role) => role.id === selectedRoleId) &&
       roles.find((role) => role.id === selectedRoleId);
+    if (!selectedRole) return;
     setLoadingRequest(true);
     try {
       await updateRole(
@@ -231,7 +234,7 @@ const RolesAndPermission = () => {
                       <input
                         type="checkbox"
                         className="peer sr-only"
-                        checked={permissions.includes(permission.id)}
+                        checked={permissions.includes(permission.id as never)}
                         onChange={(event) =>
                           handleToggle(permission.id, event.target.checked)
                         }

From 39e0b9786a076337b94c79d7c0a2a7db8b4b79a3 Mon Sep 17 00:00:00 2001
From: Abdulmalik Yusuf <31839174+abdulmalikyusuf@users.noreply.github.com>
Date: Fri, 16 Aug 2024 12:50:21 +0100
Subject: [PATCH 5/5] fix: linting errors

---
 src/actions/roles-and-permissions.ts                   |  2 +-
 .../organization/roles-and-permissions/page.tsx        | 10 ++++++++--
 .../common/modals/roles-permissions-creation/index.tsx |  5 ++++-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/actions/roles-and-permissions.ts b/src/actions/roles-and-permissions.ts
index 365fa1ae2..df047dcd5 100644
--- a/src/actions/roles-and-permissions.ts
+++ b/src/actions/roles-and-permissions.ts
@@ -49,7 +49,7 @@ export const getPermissions = async () => {
     );
 
     return {
-      data: response.data,
+      data: response.data.data,
     };
   } catch (error) {
     return axios.isAxiosError(error) && error.response
diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx
index bcc443380..c358705d5 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx
@@ -31,6 +31,8 @@ const RolesAndPermission = () => {
   const [selectedRoleId, setSelectedRoleId] = useState<string | undefined>();
   const [permissions, setPermissions] = useState<string[] | []>([]);
   const [allPermission, setAllPermissions] = useState<Permission[] | []>([]);
+  const [isAllPermissionsLoaded, setIsAllPermissionsLoaded] =
+    useState<boolean>(false);
   const [roles, setRoles] = useState<Role[]>([]);
   const [apiUrl, setApiUrl] = useState("");
   const { toast } = useToast();
@@ -103,11 +105,13 @@ const RolesAndPermission = () => {
     const fetchPermissions = async () => {
       await getPermissions()
         .then((data) => {
+          setIsAllPermissionsLoaded(true);
           if (data.data) setAllPermissions(data.data);
         })
         .catch((error) => {
           // eslint-disable-next-line no-console
           console.log(error);
+          setIsAllPermissionsLoaded(true);
         });
     };
     fetchPermissions();
@@ -218,7 +222,7 @@ const RolesAndPermission = () => {
               <div className="item-center flex justify-center py-48">
                 <LoadingSpinner className="size-4 animate-spin stroke-orange-500 sm:size-5" />
               </div>
-            ) : allPermission.length > 0 ? (
+            ) : isAllPermissionsLoaded ? (
               <div className="mt-6">
                 {allPermission.map((permission) => (
                   <div
@@ -257,7 +261,9 @@ const RolesAndPermission = () => {
                 </div>
               </div>
             ) : (
-              <p className="">Ooops! Something went wrong.</p>
+              <div className="item-center flex justify-center py-48">
+                <LoadingSpinner className="size-4 animate-spin stroke-orange-500 sm:size-5" />
+              </div>
             )}
           </div>
         </div>
diff --git a/src/components/common/modals/roles-permissions-creation/index.tsx b/src/components/common/modals/roles-permissions-creation/index.tsx
index 3c8bc230f..66b82a7d9 100644
--- a/src/components/common/modals/roles-permissions-creation/index.tsx
+++ b/src/components/common/modals/roles-permissions-creation/index.tsx
@@ -92,7 +92,10 @@ function RolePreferencesCreationModal({
               ))}
             </div>
             <div className="flex justify-end gap-4">
-              <DialogClose className="rounded border border-[#E2E8F0] bg-[#F1F5F9] px-4 py-2 text-sm font-medium text-[#0F172A] hover:bg-[#c1c9d2]">
+              <DialogClose
+                type="button"
+                className="rounded border border-[#E2E8F0] bg-[#F1F5F9] px-4 py-2 text-sm font-medium text-[#0F172A] hover:bg-[#c1c9d2]"
+              >
                 Done
               </DialogClose>
             </div>