From cafd273f90d3f275f7dd4b15e52ccabe9a5c9ba9 Mon Sep 17 00:00:00 2001
From: benzbarquilla <benzzbarquilla@gmail.com>
Date: Tue, 3 Mar 2026 16:52:13 +0800
Subject: [PATCH] added components

---
 .../components/permissions/Permissions.jsx    | 134 +++++++++++++
 .../components/permissions/styles.module.css  | 185 ++++++++++++++++++
 .../app/components/searchbar/SearchBar.jsx    |  35 ++++
 .../components/searchbar/styles.module.css    |  46 +++++
 4 files changed, 400 insertions(+)
 create mode 100644 frontend/src/app/components/permissions/Permissions.jsx
 create mode 100644 frontend/src/app/components/permissions/styles.module.css
 create mode 100644 frontend/src/app/components/searchbar/SearchBar.jsx
 create mode 100644 frontend/src/app/components/searchbar/styles.module.css

diff --git a/frontend/src/app/components/permissions/Permissions.jsx b/frontend/src/app/components/permissions/Permissions.jsx
new file mode 100644
index 0000000..620b368
--- /dev/null
+++ b/frontend/src/app/components/permissions/Permissions.jsx
@@ -0,0 +1,134 @@
+import editUserStyle from "./styles.module.css";
+import React from "react";
+
+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>
+
+          {sampleData.length === 0 ? (
+            // Default Message
+            <div className={editUserStyle.permissionDefaultState}>
+              <p>No permission added yet</p>
+            </div>
+          ) : (
+            // Sampple Data(static)
+            sampleData.map((perm, index) => {
+              return (
+                <div className={editUserStyle.permissions} key={index}>
+                  <div className={editUserStyle.permissionsItem}>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width={24}
+                      height={24}
+                      viewBox="0 0 24 24"
+                      fill="none"
+                    >
+                      <path
+                        d="M13.834 3.75V7.41667C13.834 7.65978 13.9306 7.89294 14.1025 8.06485C14.2744 8.23676 14.5075 8.33333 14.7507 8.33333H18.4173"
+                        stroke="#969AF9"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                      <path
+                        d="M16.584 20.25H7.41732C6.93109 20.25 6.46477 20.0568 6.12096 19.713C5.77714 19.3692 5.58398 18.9029 5.58398 18.4167V5.58333C5.58398 5.0971 5.77714 4.63079 6.12096 4.28697C6.46477 3.94315 6.93109 3.75 7.41732 3.75H13.834L18.4173 8.33333V18.4167C18.4173 18.9029 18.2242 19.3692 17.8803 19.713C17.5365 20.0568 17.0702 20.25 16.584 20.25Z"
+                        stroke="#969AF9"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                      <path
+                        d="M9.25 14.7503L11.0833 16.5837L14.75 12.917"
+                        stroke="#969AF9"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                    <p>{perm.permission}</p>
+                  </div>
+                  <div className={editUserStyle.deleteBtn}>
+                    <div className={editUserStyle.deleteSvg}>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width={20}
+                        height={20}
+                        viewBox="0 0 20 20"
+                        fill="none"
+                      >
+                        <path
+                          d="M3.61133 6.00684H16.3891"
+                          stroke="currentColor"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                        <path
+                          d="M8.40234 9.20117V13.9928"
+                          stroke="currentColor"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                        <path
+                          d="M11.5977 9.20117V13.9928"
+                          stroke="currentColor"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                        <path
+                          d="M4.41016 6.00684L5.20877 15.5902C5.20877 16.0138 5.37705 16.42 5.67658 16.7196C5.97612 17.0191 6.38238 17.1874 6.80599 17.1874H13.1949C13.6185 17.1874 14.0247 17.0191 14.3243 16.7196C14.6238 16.42 14.7921 16.0138 14.7921 15.5902L15.5907 6.00684"
+                          stroke="currentColor"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                        <path
+                          d="M7.60352 6.00694V3.61111C7.60352 3.39931 7.68765 3.19618 7.83742 3.04641C7.98719 2.89664 8.19032 2.8125 8.40213 2.8125H11.5966C11.8084 2.8125 12.0115 2.89664 12.1613 3.04641C12.311 3.19618 12.3952 3.39931 12.3952 3.61111V6.00694"
+                          stroke="currentColor"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              );
+            })
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Permissions;
diff --git a/frontend/src/app/components/permissions/styles.module.css b/frontend/src/app/components/permissions/styles.module.css
new file mode 100644
index 0000000..891783d
--- /dev/null
+++ b/frontend/src/app/components/permissions/styles.module.css
@@ -0,0 +1,185 @@
+.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;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  border-radius: 6px;
+  background: #1d1e2a;
+  background: color(display-p3 0.1138 0.1191 0.1616);
+}
+.permissionsHeader {
+  display: flex;
+  padding-bottom: 24px;
+  align-items: flex-start;
+  gap: 17px;
+  align-self: stretch;
+}
+
+.permissionsHeader > p {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 5px;
+  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;
+  font-weight: 500;
+  line-height: normal;
+  width: 163px;
+}
+.svgContainer {
+  display: flex;
+  width: 40px;
+  height: 40px;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 5px;
+  border-radius: 6px;
+  background: #27293b;
+  background: color(display-p3 0.1529 0.1608 0.2275);
+}
+
+.svgContainer > div {
+  display: flex;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  border-radius: 6px;
+  background: #27293b;
+  background: color(display-p3 0.1529 0.1608 0.2275);
+}
+
+.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;
+}
+
+.permissions {
+  display: flex;
+  height: 43.813px;
+  padding: 8px 16px;
+  justify-content: space-between;
+  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;
+  align-items: center;
+  gap: 12px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.permissionsItem > p {
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.deleteBtn {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+}
+.deleteSvg {
+  display: flex;
+  padding: 6px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #959aff00;
+  color: #969af9;
+  aspect-ratio: 1/1;
+  border-radius: 100px;
+}
+
+.deleteSvg:hover {
+  color: #fff;
+  stroke-width: 1px;
+  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;
+}
diff --git a/frontend/src/app/components/searchbar/SearchBar.jsx b/frontend/src/app/components/searchbar/SearchBar.jsx
new file mode 100644
index 0000000..40a317a
--- /dev/null
+++ b/frontend/src/app/components/searchbar/SearchBar.jsx
@@ -0,0 +1,35 @@
+import React from "react";
+import searchBarStyle from "./styles.module.css";
+
+const SearchBar = () => {
+  return (
+    <form className={searchBarStyle.searchBarContainer}>
+      <input
+        className={searchBarStyle.input}
+        type="text"
+        name=""
+        id=""
+        placeholder="Search"
+      />
+      <div className={searchBarStyle.icon}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={24}
+          height={24}
+          viewBox="0 0 24 24"
+          fill="none"
+        >
+          <path
+            d="M19.5527 19.5536L14.7064 14.7074M9.16822 16.7847C13.3741 16.7847 16.7837 13.3751 16.7837 9.1692C16.7837 4.96328 13.3741 1.55371 9.16822 1.55371C4.9623 1.55371 1.55273 4.96328 1.55273 9.1692C1.55273 13.3751 4.9623 16.7847 9.16822 16.7847Z"
+            stroke="#858699"
+            strokeWidth={1.5}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </div>
+    </form>
+  );
+};
+
+export default SearchBar;
diff --git a/frontend/src/app/components/searchbar/styles.module.css b/frontend/src/app/components/searchbar/styles.module.css
new file mode 100644
index 0000000..6f5c566
--- /dev/null
+++ b/frontend/src/app/components/searchbar/styles.module.css
@@ -0,0 +1,46 @@
+.searchBarContainer {
+  display: flex;
+  width: 260px;
+  justify-content: space-between;
+  padding: 6px 6px 6px 12px;
+
+  align-items: center;
+  border-radius: 6px;
+  border: 1px solid #31324a;
+
+  border: 1px solid color(display-p3 0.1922 0.1961 0.2824);
+}
+.searchBarContainer > .input {
+  background-color: red;
+  outline: none;
+  border: none;
+  width: 100%;
+
+  color: #85869b;
+  color: color(display-p3 0.5216 0.5255 0.6);
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -0.09px;
+  caret-color: #575bc7;
+}
+
+.input::placeholder {
+  color: #85869b;
+  color: color(display-p3 0.5216 0.5255 0.6);
+  text-align: start;
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -0.09px;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}