Merge branch 'dev' into fix/footer-logo

hngprojects · Aug 24, 2024 · 6bbda80 · 6bbda80
2 parents 8ae7892 + cd77fee
commit 6bbda80
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 53 deletions.
diff --git a/src/actions/roles-and-permissions.ts b/src/actions/roles-and-permissions.ts
@@ -154,7 +154,7 @@ export const updateRole = async (
 
   try {
     const response = await axios.put(
-      `${apiUrl}/organisations/${currentOrgId}/roles/${roleId}`,
+      `${apiUrl}/api/v1/organisations/${currentOrgId}/roles/${roleId}`,
       payload,
       {
         headers: {

diff --git a/...(admin)/admin/(settings)/settings/organization/roles-and-permissions/create-role/page.tsx b/...(admin)/admin/(settings)/settings/organization/roles-and-permissions/create-role/page.tsx
@@ -3,12 +3,12 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ChevronLeftIcon } from "lucide-react";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 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 {
@@ -122,6 +122,7 @@ const transformPermissions = (apiResponse: APIPermissions[]) => {
 };
 
 function CreateNewRolePage() {
+  const router = useRouter();
   const [currentOrgId] = useLocalStorage<string>("current_orgid", "");
   const [isSaving, setIsSaving] = useState(false);
   const [permissions, setPermissions] = useState<
@@ -164,6 +165,12 @@ function CreateNewRolePage() {
     }
   }, [permissions, setValue]);
 
+  useEffect(() => {
+    if (permissionOptions && permissionOptions.length > 0) {
+      setPermissions(permissionOptions[0].permissions);
+    }
+  }, [permissionOptions]);
+
   const onValid = async (values: UseFormInputs) => {
     setIsSaving(true);
     try {
@@ -176,6 +183,7 @@ function CreateNewRolePage() {
                 "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",
             });
+            router.push("");
           }
           setIsSaving(false);
         })
@@ -281,15 +289,19 @@ function CreateNewRolePage() {
             handleChange={setPermissions}
             permissions={permissions}
           />
-          <CustomButton variant="primary" type="submit" isDisabled={isSaving}>
+          <button
+            type="submit"
+            className="inline-flex h-9 items-center justify-center gap-2 whitespace-nowrap rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+            disabled={isSaving}
+          >
             {isSaving ? (
               <LoadingSpinner
                 className={`mx-auto size-4 animate-spin sm:size-5 ${isSaving && "opacity-50"}`}
               />
             ) : (
               "Create Role"
             )}
-          </CustomButton>
+          </button>
         </div>
       </form>
     </div>

diff --git a/...p/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx b/...p/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx
@@ -162,9 +162,23 @@ const RolesAndPermission = () => {
 
   return (
     <div className="">
-      <div className="flex gap-8">
-        <div className="w-1/4">
-          <h2 className="mb-10 text-xl font-medium">Roles</h2>
+      <div className="mb-7 flex items-end justify-between md:mb-10">
+        <div className="">
+          <h2 className="mb-1.5 text-xl font-medium">Roles</h2>
+          <small className="text-xs text-[#525252]">
+            Manage user roles for members
+          </small>
+        </div>
+        <div className="">
+          <CustomButton variant="primary" className="">
+            <Link href="/dashboard/admin/settings/organization/roles-and-permissions/create-role">
+              + Create roles
+            </Link>
+          </CustomButton>
+        </div>
+      </div>
+      <div className="flex flex-col gap-10 md:flex-row md:gap-11">
+        <div className="md:w-[256px]">
           <ul className="rounded-md border border-[#CBD5E1] p-3">
             {loadingRoles ? (
               <div className="flex justify-center py-8">
@@ -192,14 +206,7 @@ const RolesAndPermission = () => {
             )}
           </ul>
         </div>
-        <div className="w-3/4">
-          <div className="mb-2 flex justify-end">
-            <CustomButton variant="primary" className="mb-6">
-              <Link href="/dashboard/admin/settings/organization/roles-and-permissions/create-role">
-                + Create roles
-              </Link>
-            </CustomButton>
-          </div>
+        <div className="flex-grow">
           <div className="rounded-md border border-[#CBD5E1] px-5 py-6">
             <div className="border-b border-[#CBD5E1] pb-4 pl-2">
               <h2 className="mb-2 text-base font-medium text-[#0A0A0A]">

diff --git a/src/components/common/modals/roles-permissions-creation/index.tsx b/src/components/common/modals/roles-permissions-creation/index.tsx
@@ -2,7 +2,7 @@
 
 import { Dispatch, SetStateAction } from "react";
 
-import CustomButton from "~/components/common/common-button/common-button";
+import LoadingSpinner from "~/components/miscellaneous/loading-spinner";
 import {
   Dialog,
   DialogClose,
@@ -51,10 +51,8 @@ function RolePreferencesCreationModal({
   return (
     <>
       <Dialog>
-        <DialogTrigger asChild>
-          <CustomButton type="button" variant="secondary">
-            Add Permissions
-          </CustomButton>
+        <DialogTrigger className="inline-flex h-9 items-center justify-center gap-2 whitespace-nowrap rounded-md bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground shadow-sm transition-colors hover:bg-secondary/80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50">
+          Add Permissions
         </DialogTrigger>
         <DialogContent className="flex flex-col gap-6">
           <DialogHeader className="!space-y-0 border-b border-[#CBD5E1] p-1 !pt-0 md:p-3">
@@ -65,41 +63,48 @@ function RolePreferencesCreationModal({
               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">
-              {permissions.map((permission, index) => (
-                <div
-                  key={permission.id}
-                  className="flex items-center justify-between pb-1.5"
+          {permissions.length > 0 ? (
+            <div className="flex flex-col gap-8">
+              <div className="flex flex-col gap-4 px-3">
+                {permissions.map((permission, index) => (
+                  <div
+                    key={permission.id}
+                    className="flex items-center justify-between pb-1.5"
+                  >
+                    <span className="text-sm font-normal text-[#525252]">
+                      {permission.name
+                        .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={permission.value}
+                        onChange={(event) =>
+                          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>
+                    </label>
+                  </div>
+                ))}
+              </div>
+              <div className="flex justify-end gap-4">
+                <DialogClose
+                  type="button"
+                  className="rounded border border-[#E2E8F0] bg-[#F1F5F9] px-4 py-2 text-sm font-medium text-[#0F172A] hover:bg-[#c1c9d2]"
                 >
-                  <span className="text-sm font-normal text-[#525252]">
-                    {permission.name
-                      .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={permission.value}
-                      onChange={(event) =>
-                        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>
-                  </label>
-                </div>
-              ))}
+                  Done
+                </DialogClose>
+              </div>
             </div>
-            <div className="flex justify-end gap-4">
-              <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>
-          </div>
+          ) : (
+            <LoadingSpinner
+              stroke="#f85318"
+              className="mx-auto size-4 animate-spin text-primary opacity-50 sm:size-5"
+            />
+          )}
         </DialogContent>
       </Dialog>
     </>