From dfbd66b1babc001c72f6fe4097ac37d6463055e7 Mon Sep 17 00:00:00 2001
From: Justfemi <ajibade.olufemi@yahoo.com>
Date: Mon, 29 Jul 2024 09:32:46 +0100
Subject: [PATCH 1/5] feat:added-role-creation-success-modal

---
 .../modals/role-creation-success/index.tsx    | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 src/components/common/modals/role-creation-success/index.tsx

diff --git a/src/components/common/modals/role-creation-success/index.tsx b/src/components/common/modals/role-creation-success/index.tsx
new file mode 100644
index 000000000..7d7b2fa89
--- /dev/null
+++ b/src/components/common/modals/role-creation-success/index.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import CustomButton from "~/components/common/common-button/common-button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "~/components/ui/dialog";
+
+interface ModalProperties {
+  show: boolean;
+  onClose: () => void;
+}
+
+const RoleCreationSuccessModal: React.FC<ModalProperties> = ({
+  show,
+  onClose,
+}) => {
+  return (
+    <>
+      <Dialog open={show} onOpenChange={onClose}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              <h2 className="mb-2 text-left text-lg font-semibold text-neutral-dark-2">
+                Create Role
+              </h2>
+            </DialogTitle>
+            <DialogDescription>
+              <div className="flex items-center justify-center">
+                {/* Put checkmark image here */}
+                <h3>Success</h3>
+                <p>You have created a new role successfully</p>
+              </div>
+              <div className="mt-8">
+                <CustomButton
+                  variant="primary"
+                  onClick={onClose}
+                  className="w-full"
+                >
+                  Continue
+                </CustomButton>
+              </div>
+            </DialogDescription>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+export default RoleCreationSuccessModal;

From aa29fdc63d50e3d193ca7386d5289ae2a64cdff5 Mon Sep 17 00:00:00 2001
From: Justfemi <ajibade.olufemi@yahoo.com>
Date: Mon, 29 Jul 2024 17:08:39 +0100
Subject: [PATCH 2/5] ch:modified roles-and-permission-page for new design
 update

---
 .../roles-and-permissions/page.tsx            | 45 +++++++++----------
 1 file changed, 21 insertions(+), 24 deletions(-)

diff --git a/src/app/dashboard/(user-dashboard)/settings/organization/roles-and-permissions/page.tsx b/src/app/dashboard/(user-dashboard)/settings/organization/roles-and-permissions/page.tsx
index 830c1018f..2873b0226 100644
--- a/src/app/dashboard/(user-dashboard)/settings/organization/roles-and-permissions/page.tsx
+++ b/src/app/dashboard/(user-dashboard)/settings/organization/roles-and-permissions/page.tsx
@@ -17,11 +17,11 @@ type Permission = {
 };
 
 const rolesData: Role[] = [
-  { id: 1, name: "Guest", description: "Read-only access" },
-  { id: 2, name: "User", description: "Read, write, update" },
-  { id: 3, name: "Manager", description: "Read, write, approve" },
-  { id: 4, name: "Project Lead", description: "Manage, coordinate, oversee" },
-  { id: 5, name: "Administrator", description: "Full access, control" },
+  { id: 1, name: "Administrator", description: "Full access, control" },
+  { id: 2, name: "Guest", description: "Read-only access" },
+  { id: 3, name: "User", description: "Read, write, update" },
+  { id: 4, name: "Manager", description: "Read, write, approve" },
+  { id: 5, name: "Project Lead", description: "Manage, coordinate, oversee" },
 ];
 
 const permissionsData: { [key: number]: Permission[] } = {
@@ -90,33 +90,33 @@ const RolesAndPermission = () => {
   };
 
   return (
-    <div className="min-h-screen p-8">
-      <div className="flex">
-        <div className="w-1/4 pr-6">
+    <div className="">
+      <div className="flex gap-8">
+        <div className="w-1/4">
           <h2 className="mb-10 text-xl font-medium">Roles</h2>
-          <ul>
+          <ul className="rounded-md border border-[#CBD5E1] p-3">
             {rolesData.map((role) => (
               <li
                 key={role.id}
-                className={`mb-6 cursor-pointer border-b border-[#CBD5E1] p-2 ${
+                className={`mb-2 cursor-pointer border-[#CBD5E1] p-2 ${
                   selectedRoleId === role.id
                     ? "rounded-md bg-orange-500 text-white"
-                    : "bg-white text-[#0a0a0a] hover:bg-[#F1F5F9]"
+                    : "border-b bg-white text-[#0a0a0a] hover:bg-[#F1F5F9]"
                 }`}
                 onClick={() => handleRoleClick(role.id)}
               >
-                <div className="text-base font-medium">{role.name}</div>
-                <div
+                <h3 className="text-base font-medium">{role.name}</h3>
+                <p
                   className={`text-xs font-normal ${selectedRoleId === role.id ? "text-white" : "text-[#525252]"}`}
                 >
                   {role.description}
-                </div>
+                </p>
               </li>
             ))}
           </ul>
         </div>
         <div className="w-3/4">
-          <div className="flex justify-end">
+          <div className="mb-2 flex justify-end">
             <CustomButton
               variant="primary"
               className="mb-6"
@@ -125,9 +125,9 @@ const RolesAndPermission = () => {
               + Create roles
             </CustomButton>
           </div>
-          <div className="border-l border-[#CBD5E1] pl-6">
-            <div className="border-b border-[#CBD5E1] pb-4">
-              <h2 className="mb-2 text-xl font-semibold text-[#0A0A0A]">
+          <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]">
                 Permissions
               </h2>
               <p className="text-xs font-normal text-[#525252]">
@@ -135,7 +135,7 @@ const RolesAndPermission = () => {
               </p>
             </div>
             {selectedRoleId === undefined ? (
-              <div className="item-center flex flex-col justify-center py-56">
+              <div className="item-center flex flex-col justify-center py-48">
                 <p className="text-center text-sm font-normal text-[#525252]">
                   No list to show
                 </p>
@@ -145,13 +145,10 @@ const RolesAndPermission = () => {
               </div>
             ) : (
               <div className="mt-6">
-                <h3 className="mb-4 font-[#0a0a0a] text-base font-medium">
-                  Transactions Permission
-                </h3>
                 {permissions.map((permission, index) => (
                   <div
                     key={permission.name}
-                    className="mb-6 flex items-center justify-between"
+                    className="mb-4 flex items-center justify-between"
                   >
                     <span className="text-sm font-normal text-[#525252]">
                       {permission.name}
@@ -167,7 +164,7 @@ const RolesAndPermission = () => {
                     </label>
                   </div>
                 ))}
-                <div className="mt-16 flex justify-end">
+                <div className="mt-16 flex justify-center">
                   <button className="rounded border border-[#E2E8F0] bg-[#F1F5F9] px-4 py-2 text-sm font-medium text-[#0F172A] hover:bg-[#c1c9d2]">
                     Save Preferences
                   </button>

From 2687390074f316fc795c2efeaf5fb1a6298b4118 Mon Sep 17 00:00:00 2001
From: Justfemi <ajibade.olufemi@yahoo.com>
Date: Mon, 29 Jul 2024 17:18:46 +0100
Subject: [PATCH 3/5] ch:modified roles-and-permission-page for new design
 update

---
 src/components/common/modals/role-creation/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/common/modals/role-creation/index.tsx b/src/components/common/modals/role-creation/index.tsx
index 2759b6bdd..110a52d6a 100644
--- a/src/components/common/modals/role-creation/index.tsx
+++ b/src/components/common/modals/role-creation/index.tsx
@@ -36,7 +36,7 @@ const RoleCreationModal: React.FC<ModalProperties> = ({ show, onClose }) => {
                 <input
                   type="text"
                   placeholder="e.g: IT Staff"
-                  className="w-full rounded-md border border-border px-3 py-2 shadow-sm outline-none focus:border-primary focus:ring-ring md:w-56"
+                  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>
@@ -45,7 +45,7 @@ const RoleCreationModal: React.FC<ModalProperties> = ({ show, onClose }) => {
                 </label>
                 <textarea
                   placeholder="describe role"
-                  className="min-h-20 w-full resize-none rounded-md border border-border px-3 py-2 shadow-sm outline-none focus:border-primary focus:ring-ring"
+                  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>
               <div className="mt-8 flex items-center justify-end gap-4">

From 9ab55e3b99306f17f556771f07a1298d673c6dfb Mon Sep 17 00:00:00 2001
From: Justfemi <ajibade.olufemi@yahoo.com>
Date: Mon, 29 Jul 2024 19:48:53 +0100
Subject: [PATCH 4/5] ch:added success checkmark image

---
 public/images/role-success-checkmark.png | Bin 0 -> 1834 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 public/images/role-success-checkmark.png

diff --git a/public/images/role-success-checkmark.png b/public/images/role-success-checkmark.png
new file mode 100644
index 0000000000000000000000000000000000000000..4a0079c2c8f7e7733a3b460e07d52efa886f429a
GIT binary patch
literal 1834
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
Y0lg`(u~`rE<p2Nx07*qoM6N<$f~az1NdN!<

literal 0
HcmV?d00001


From 711d2875b8da62876407be499d0392dcdcd8d3f7 Mon Sep 17 00:00:00 2001
From: Justfemi <ajibade.olufemi@yahoo.com>
Date: Mon, 29 Jul 2024 19:49:27 +0100
Subject: [PATCH 5/5] feat:implememted role created successfully modal

---
 .../modals/role-creation-success/index.tsx    | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/components/common/modals/role-creation-success/index.tsx b/src/components/common/modals/role-creation-success/index.tsx
index 7d7b2fa89..cd64848ec 100644
--- a/src/components/common/modals/role-creation-success/index.tsx
+++ b/src/components/common/modals/role-creation-success/index.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import Image from "next/image";
+
 import CustomButton from "~/components/common/common-button/common-button";
 import {
   Dialog,
@@ -8,6 +10,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "~/components/ui/dialog";
+import checkmark from "../../../../../public/images/role-success-checkmark.png";
 
 interface ModalProperties {
   show: boolean;
@@ -23,18 +26,18 @@ const RoleCreationSuccessModal: React.FC<ModalProperties> = ({
       <Dialog open={show} onOpenChange={onClose}>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>
-              <h2 className="mb-2 text-left text-lg font-semibold text-neutral-dark-2">
-                Create Role
-              </h2>
-            </DialogTitle>
+            <DialogTitle></DialogTitle>
             <DialogDescription>
-              <div className="flex items-center justify-center">
-                {/* Put checkmark image here */}
-                <h3>Success</h3>
-                <p>You have created a new role successfully</p>
+              <div className="flex flex-col items-center justify-center">
+                <Image src={checkmark} alt="checkmark" priority />
+                <h3 className="mt-4 text-lg font-semibold text-[#0A0A0A]">
+                  Success
+                </h3>
+                <p className="text-sm font-normal text-[#475569]">
+                  You have created a new role successfully
+                </p>
               </div>
-              <div className="mt-8">
+              <div className="mt-4">
                 <CustomButton
                   variant="primary"
                   onClick={onClose}