feat: add permissions and roles page

- Tambah halaman permissions & roles beserta modal
- Update Backoffice Sidebar
- Update styling label pada input field

libs/ui/src/molecules/input-field/input-field.tsx

@@ -54,7 +54,7 @@ export const InputField: FC<TInputFieldProps> = ({
       <label
         htmlFor={htmlFor}
         className={cn(
-          'items-start justify-item-start text-start',
+          'items-start justify-item-start text-start !text-neutral-800',
           sizeClasses[size].label
         )}
       >
@@ -70,7 +70,7 @@ export const InputField: FC<TInputFieldProps> = ({
           error &&
             'border-danger-500 hover:border-danger-500 focus:outline-danger-500',
           className,
-          disabled && 'opacity-50 cursor-not-allowed' // Add styles for disabled state
+          disabled && 'opacity-50 cursor-not-allowed'
         )}
         {...rest}
       />

libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx

@@ -4,7 +4,9 @@ import {
   InboxOutlined,
   LogoutOutlined,
   ReloadOutlined,
+  UsergroupAddOutlined,
   UserOutlined,
+  UserSwitchOutlined,
 } from '@ant-design/icons';
 import { Button } from '../../atoms';
 import { FC, ReactElement } from 'react';
@@ -46,6 +48,30 @@ export const BackofficeSidebar: FC = (): ReactElement => {
             <span className="text-p3 font-medium">Gacha Roll</span>
           </Link>
 
+          <Link
+            to="/permissions"
+            className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
+              isActive('/permissions')
+                ? 'bg-primary-500 text-white rounded-md'
+                : 'text-gray-700 hover:bg-gray-100'
+            }`}
+          >
+            <UserSwitchOutlined className="text-[20px]" />
+            <span className="text-p3 font-medium">Permissions</span>
+          </Link>
+
+          <Link
+            to="/roles"
+            className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
+              isActive('/roles')
+                ? 'bg-primary-500 text-white rounded-md'
+                : 'text-gray-700 hover:bg-gray-100'
+            }`}
+          >
+            <UsergroupAddOutlined className="text-[20px]" />
+            <span className="text-p3 font-medium">Roles</span>
+          </Link>
+
           <Link
             to="/accounts"
             className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${