done user and role table, and add user

frontend/src/app/components/permissions/Permissions.jsx

@@ -3,46 +3,24 @@ import DeleteIcon from "../icons/delete";
 import FileIcon from "../icons/file";
 import editUserStyle from "./styles.module.css";
 import React from "react";
+import PlusIcon from "../icons/plus";
 
 const Permissions = ({ sampleData = [] }) => {
   return (
     <>
       {/* Permissions */}
-      <div className={editUserStyle.userPermissions}>
-        {/* Add permissions */}
-        <div className={editUserStyle.imanginaryDiv}></div>
-        <div className={editUserStyle.permissionsContainer}>
-          {/* Header */}
-          <div className={editUserStyle.permissionsHeader}>
-            <p>Permissions</p>
-            <div className={editUserStyle.svgContainer}>
-              <div>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width={24}
-                  height={24}
-                  viewBox="0 0 24 24"
-                  fill="none"
-                >
-                  <path
-                    d="M12 5.29199V18.7087"
-                    stroke="#333649"
-                    strokeWidth={2}
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    d="M5.29102 12H18.7077"
-                    stroke="#333649"
-                    strokeWidth={2}
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-              </div>
-            </div>
+      <div className={editUserStyle.permissionsContainer}>
+        <div className={editUserStyle.permissionsHeader}>
+          <p>Permissions</p>
+          <div className={editUserStyle.svgContainer}>
+            {/* Button ni */}
+            <button>
+              <PlusIcon />
+            </button>
           </div>
+        </div>
 
+        <div className={editUserStyle.wrapper}>
           {sampleData.length === 0 ? (
             // Default Message
             <div className={editUserStyle.permissionDefaultState}>

frontend/src/app/components/permissions/styles.module.css

@@ -1,19 +1,3 @@
-.imanginaryDiv {
-  padding: 18px;
-}
-.userPermissions {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  flex: 1 0 0;
-  align-self: stretch;
-  border-radius: 6px;
-  height: calc(100vh - 175px);
-  position: relative;
-  overflow: auto;
-  scrollbar-width: none;
-}
-
 .permissionsContainer {
   display: flex;
   padding: 24px;
@@ -22,7 +6,6 @@
   align-self: stretch;
   border-radius: 6px;
   background: #1d1e2a;
-  background: color(display-p3 0.1138 0.1191 0.1616);
 }
 .permissionsHeader {
   display: flex;
@@ -41,7 +24,6 @@
   flex: 1 0 0;
 
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 20px;
   font-style: normal;
@@ -58,21 +40,20 @@
   gap: 5px;
   border-radius: 6px;
   background: #27293b;
-  background: color(display-p3 0.1529 0.1608 0.2275);
 }
 
-.svgContainer > div {
+.svgContainer > button {
   display: flex;
   padding: 8px;
+  border: none;
   justify-content: center;
   align-items: center;
   gap: 12px;
   border-radius: 6px;
   background: #27293b;
-  background: color(display-p3 0.1529 0.1608 0.2275);
 }
 
-.permissionDefaultState {
+.wrapper {
   display: flex;
   height: 43.813px;
   padding: 8px 16px;
@@ -80,6 +61,15 @@
   align-items: center;
   align-self: stretch;
 }
+
+.permissionDefaultState {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
 .permissionDefaultState p {
   display: flex;
   justify-content: center;
@@ -88,7 +78,6 @@
   flex: 1 0 0;
   align-self: stretch;
   color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
   font-family: Inter;
   font-size: 16px;
   font-style: normal;
@@ -104,13 +93,10 @@
   align-items: center;
   align-self: stretch;
   border-bottom: 0.5px solid #2e3042;
-  border-bottom: 0.5px solid color(display-p3 0.1831 0.189 0.2535);
 }
 .permissions:hover {
   border-bottom: 1px solid rgba(129, 135, 255, 0.25);
-  border-bottom: 1px solid color(display-p3 0.5098 0.5294 1 / 0.25);
   background: rgba(129, 135, 255, 0.05);
-  background: color(display-p3 0.5098 0.5294 1 / 0.05);
 }
 .permissionsItem {
   display: flex;
@@ -121,7 +107,6 @@
 }
 .permissionsItem > p {
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 16px;
   font-style: normal;
@@ -151,35 +136,40 @@
   stroke: color(display-p3 1 1 1);
   border-radius: 100px;
   border: 1px solid #959aff;
-  border: 1px solid color(display-p3 0.5892 0.6031 0.9766);
   background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
-  background: linear-gradient(
-    180deg,
-    color(display-p3 0.4118 0.4196 0.5725) 0%,
-    color(display-p3 0.1241 0.1265 0.1725) 100%
-  );
 }
 
-.permissionDefaultState {
-  display: flex;
-  height: 43.813px;
-  padding: 8px 16px;
-  justify-content: center;
-  align-items: center;
-  align-self: stretch;
-}
-.permissionDefaultState p {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 12px;
-  flex: 1 0 0;
-  align-self: stretch;
-  color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
-  font-family: Inter;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
+@media (max-width: 768px) {
+  .permissionsContainer {
+    border-radius: 4px;
+    padding: 0 0 24px 0;
+  }
+  .permissionsHeader {
+    padding: 12px 16px;
+  }
+
+  .permissionsHeader > p {
+    color: #fff;
+    font-size: 18px;
+    align-self: stretch;
+  }
+  .svgContainer {
+    display: none;
+  }
+
+  .wrapper {
+    display: flex;
+    padding: 24px 16px 0 16px;
+    align-items: flex-start;
+    align-self: stretch;
+  }
+  .permissionDefaultState {
+    gap: 12px;
+    align-self: stretch;
+  }
+
+  .permissionDefaultState > p {
+    font-weight: 500;
+    text-align: center;
+  }
 }