Update package.json

frontend/src/components/basic/Layout.tsx

@@ -187,10 +187,10 @@ const Layout = ({ children }: LayoutProps) => {
       });
       const userWorkspaces = orgUserProjects;
       if (
-        userWorkspaces.length === 0 &&
-        router.asPath !== '/noprojects' &&
-        !router.asPath.includes('home') &&
-        !router.asPath.includes('settings') ||
+        (userWorkspaces.length === 0 &&
+          router.asPath !== '/noprojects' &&
+          !router.asPath.includes('home') &&
+          !router.asPath.includes('settings')) ||
         router.asPath === '/dashboard/undefined'
       ) {
         router.push('/noprojects');
@@ -199,13 +199,13 @@ const Layout = ({ children }: LayoutProps) => {
           .split('/')
           [router.asPath.split('/').length - 1].split('?')[0];
 
-        if (!['heroku', 'vercel', 'github', 'netlify'].includes(intendedWorkspaceId)) {
+        if (!['callback', 'create', 'authorize'].includes(intendedWorkspaceId)) {
           localStorage.setItem('projectData.id', intendedWorkspaceId);
         }
-
+        
         // If a user is not a member of a workspace they are trying to access, just push them to one of theirs
         if (
-          !['heroku', 'vercel', 'github', 'netlify'].includes(intendedWorkspaceId) &&
+          !['callback', 'create', 'authorize'].includes(intendedWorkspaceId) &&
           !userWorkspaces
             .map((workspace: { _id: string }) => workspace._id)
             .includes(intendedWorkspaceId)
@@ -246,16 +246,15 @@ const Layout = ({ children }: LayoutProps) => {
 
   return (
     <>
-      <div className="fixed w-full md:block flex flex-col h-screen">
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.2.2/cdn.js" defer />
+      <div className="h-screen w-full flex-col overflow-x-hidden hidden md:flex">
         <NavBarDashboard />
-        <div className="flex flex-col md:flex-row flex-1">
-          <aside className="bg-bunker-600 border-r border-mineshaft-500 w-full md:w-60 h-screen">
-            <nav className="flex flex-col justify-between items-between h-full">
+        <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row dark">
+          <aside className="w-full border-r border-mineshaft-500 bg-bunker-600 md:w-60">
+            <nav className="items-between flex h-full flex-col justify-between">
               {/* <div className="py-6"></div> */}
               <div>
-                <div className="flex justify-center w-full mt-[4.5rem] mb-6 bg-bunker-600 h-20 flex-col items-center px-4">
-                  <div className="text-gray-400 self-start ml-1 mb-1 text-xs font-semibold tracking-wide">
+                <div className="mt-6 mb-6 flex h-20 w-full flex-col items-center justify-center bg-bunker-600 px-4">
+                  <div className="ml-1 mb-1 self-start text-xs font-semibold tracking-wide text-gray-400">
                     {t('nav:menu.project')}
                   </div>
                   {Object.keys(workspaceMapping).length > 0 ? (
@@ -279,29 +278,29 @@ const Layout = ({ children }: LayoutProps) => {
                 <ul>
                   {Object.keys(workspaceMapping).length > 0 &&
                     menuItems.map(({ href, title, emoji }) => (
-                      <li className="mt-0.5 mx-2" key={title}>
+                      <li className="mx-2 mt-0.5" key={title}>
                         {router.asPath.split('/')[1] === href.split('/')[1] &&
                         (['project', 'billing', 'org', 'personal'].includes(
                           router.asPath.split('/')[2]
                         )
                           ? router.asPath.split('/')[2] === href.split('/')[2]
                           : true) ? (
-                          <div className="flex relative px-0.5 py-2.5 text-white text-sm rounded cursor-pointer bg-primary-50/10">
-                            <div className="absolute top-0 my-1 ml-1 inset-0 bg-primary w-1 rounded-xl mr-1" />
-                            <p className="w-6 ml-4 mr-2 flex items-center justify-center text-lg">
+                          <div className="relative flex cursor-pointer rounded bg-primary-50/10 px-0.5 py-2.5 text-sm text-white">
+                            <div className="absolute inset-0 top-0 my-1 ml-1 mr-1 w-1 rounded-xl bg-primary" />
+                            <p className="ml-4 mr-2 flex w-6 items-center justify-center text-lg">
                               {emoji}
                             </p>
                             {title}
                           </div>
                         ) : router.asPath === '/noprojects' ? (
-                          <div className="flex p-2.5 text-white text-sm rounded">
-                            <p className="w-10 flex items-center justify-center text-lg">{emoji}</p>
+                          <div className="flex rounded p-2.5 text-sm text-white">
+                            <p className="flex w-10 items-center justify-center text-lg">{emoji}</p>
                             {title}
                           </div>
                         ) : (
                           <Link href={href}>
-                            <div className="flex p-2.5 text-white text-sm rounded cursor-pointer hover:bg-primary-50/5">
-                              <p className="w-10 flex items-center justify-center text-lg">
+                            <div className="flex cursor-pointer rounded p-2.5 text-sm text-white hover:bg-primary-50/5">
+                              <p className="flex w-10 items-center justify-center text-lg">
                                 {emoji}
                               </p>
                               {title}
@@ -312,11 +311,11 @@ const Layout = ({ children }: LayoutProps) => {
                     ))}
                 </ul>
               </div>
-              <div className="w-full mt-40 mb-4 px-2">
+              <div className="mt-40 mb-4 w-full px-2">
                 {router.asPath.split('/')[1] === 'home' ? (
-                  <div className="flex relative px-0.5 py-2.5 text-white text-sm rounded cursor-pointer bg-primary-50/10">
-                    <div className="absolute top-0 my-1 ml-1 inset-0 bg-primary w-1 rounded-xl mr-1" />
-                    <p className="w-6 ml-4 mr-2 flex items-center justify-center text-lg">
+                  <div className="relative flex cursor-pointer rounded bg-primary-50/10 px-0.5 py-2.5 text-sm text-white">
+                    <div className="absolute inset-0 top-0 my-1 ml-1 mr-1 w-1 rounded-xl bg-primary" />
+                    <p className="ml-4 mr-2 flex w-6 items-center justify-center text-lg">
                       <FontAwesomeIcon icon={faBookOpen} />
                     </p>
                     Infisical Guide
@@ -336,8 +335,8 @@ const Layout = ({ children }: LayoutProps) => {
                   </div>
                 ) : (
                   <Link href={`/home/${workspaceMapping[workspaceSelected as any]}`}>
-                    <div className="relative flex p-2.5 overflow-visible text-white h-10 text-sm rounded cursor-pointer bg-white/10 hover:bg-primary-50/[0.15] mt-max">
-                      <p className="w-10 flex items-center justify-center text-lg">
+                    <div className="mt-max relative flex h-10 cursor-pointer overflow-visible rounded bg-white/10 p-2.5 text-sm text-white hover:bg-primary-50/[0.15]">
+                      <p className="flex w-10 items-center justify-center text-lg">
                         <FontAwesomeIcon icon={faBookOpen} />
                       </p>
                       Infisical Guide
@@ -369,12 +368,12 @@ const Layout = ({ children }: LayoutProps) => {
             error={error}
             loading={loading}
           />
-          <main className="flex-1 bg-bunker-800">{children}</main>
+          <main className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 dark:[color-scheme:dark]">{children}</main>
         </div>
       </div>
-      <div className="md:hidden bg-bunker-800 w-screen h-screen flex flex-col justify-center items-center">
-        <FontAwesomeIcon icon={faMobile} className="text-gray-300 text-7xl mb-8" />
-        <p className="text-gray-200 px-6 text-center text-lg max-w-sm">
+      <div className="flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 z-[200] md:hidden">
+        <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
+        <p className="max-w-sm px-6 text-center text-lg text-gray-200">
           {` ${t('common:no-mobile')} `}
         </p>
       </div>

frontend/src/components/basic/Listbox.tsx

@@ -58,7 +58,7 @@ const ListBox = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <Listbox.Options className="border border-mineshaft-700 z-50 p-2 absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-bunker text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+            <Listbox.Options className="border border-mineshaft-700 z-[70] p-2 absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-bunker text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm no-scrollbar no-scrollbar::-webkit-scrollbar">
               {data.map((person, personIdx) => (
                 <Listbox.Option
                   key={`${person}.${personIdx + 1}`}

frontend/src/components/basic/dialog/AddWorkspaceDialog.tsx

@@ -36,7 +36,7 @@ const AddWorkspaceDialog = ({
   return (
     <div>
       <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-20" onClose={closeModal}>
+        <Dialog as="div" className="relative z-[100]" onClose={closeModal}>
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"
@@ -49,7 +49,7 @@ const AddWorkspaceDialog = ({
             <div className="fixed inset-0 bg-black bg-opacity-70" />
           </Transition.Child>
 
-          <div className="fixed inset-0 overflow-y-auto z-50">
+          <div className="fixed inset-0 overflow-y-auto">
             <div className="flex min-h-full items-center justify-center p-4 text-center">
               <Transition.Child
                 as={Fragment}
@@ -60,7 +60,7 @@ const AddWorkspaceDialog = ({
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
+                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
                   <Dialog.Title
                     as="h3"
                     className="text-lg font-medium leading-6 text-gray-400"
@@ -69,7 +69,7 @@ const AddWorkspaceDialog = ({
                   </Dialog.Title>
                   <div className="mt-2">
                     <p className="text-sm text-gray-500">
-                      This project will contain your environmental variables.
+                      This project will contain your secrets and configs.
                     </p>
                   </div>
                   <div className="max-h-28 mt-4">

frontend/src/components/basic/dialog/DeleteEnvVar.tsx

@@ -15,7 +15,7 @@ export const DeleteEnvVar = ({ isOpen, onClose, onSubmit }: Props) => {
   return (
     <div>
       <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={() => {}}>
+        <Dialog as="div" className="relative z-[80]" onClose={() => {}}>
           <div className="fixed inset-0 overflow-y-auto">
             <Transition.Child
               as={Fragment}

frontend/src/components/basic/dialog/IntegrationAccessTokenDialog.tsx

@@ -1,119 +0,0 @@
-import { Fragment, useState } from "react";
-import { Dialog, Transition } from "@headlessui/react";
-
-import Button from "../buttons/Button";
-import InputField from "../InputField";
-
-interface IntegrationOption {
-  clientId: string;
-  clientSlug?: string; // vercel-integration specific
-  docsLink: string;
-  image: string;
-  isAvailable: boolean;
-  name: string;
-  slug: string;
-  type: string;
-}
-
-type Props = {
-  isOpen: boolean;
-  closeModal: () => void;
-  selectedIntegrationOption: IntegrationOption | null
-  handleIntegrationOption: (arg:{
-    integrationOption: IntegrationOption,
-    accessToken?: string;
-})=>void;
-};
-
-const IntegrationAccessTokenDialog = ({
-    isOpen,
-    closeModal,
-    selectedIntegrationOption,
-    handleIntegrationOption
-}:Props) => {
-    const [accessToken, setAccessToken] = useState('');
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const submit = async () => {
-        try {
-            if (selectedIntegrationOption && accessToken !== '') {
-                handleIntegrationOption({
-                    integrationOption: selectedIntegrationOption,
-                    accessToken
-                });
-                closeModal();
-                setAccessToken('');
-            }
-        } catch (err) {
-            console.log(err);
-        }
-    }
-
-    return (
-        <div>
-            <Transition appear show={isOpen} as={Fragment}>
-                <Dialog as="div" className="relative z-10" onClose={() => {
-                    closeModal();
-                }}>
-                    <Transition.Child
-                        as={Fragment}
-                        enter="ease-out duration-300"
-                        enterFrom="opacity-0"
-                        enterTo="opacity-100"
-                        leave="ease-in duration-200"
-                        leaveFrom="opacity-100"
-                        leaveTo="opacity-0"
-                    >
-                        <div className="fixed inset-0 bg-black bg-opacity-70" />
-                    </Transition.Child>
-                    <div className="fixed inset-0 overflow-y-auto">
-                        <div className="flex min-h-full items-center justify-center p-4 text-center">
-                            <Transition.Child
-                                as={Fragment}
-                                enter="ease-out duration-300"
-                                enterFrom="opacity-0 scale-95"
-                                enterTo="opacity-100 scale-100"
-                                leave="ease-in duration-200"
-                                leaveFrom="opacity-100 scale-100"
-                                leaveTo="opacity-0 scale-95"
-                            >
-                                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
-                                <Dialog.Title
-                                    as="h3"
-                                    className="text-lg font-medium leading-6 text-gray-400"
-                                >
-                                    {`Enter your ${selectedIntegrationOption?.name} API Key`}
-                                </Dialog.Title>
-                                <div className="mt-2 mb-2">
-                                    <p className="text-sm text-gray-500">
-                                        {`This integration requires you to obtain an API key from ${selectedIntegrationOption?.name ?? ''} and store it with Infisical.`}
-                                    </p>
-                                </div>
-                                <div className="mt-6 max-w-max">
-                                    <InputField
-                                        label="API Key"
-                                        onChangeHandler={setAccessToken}
-                                        type="varName"
-                                        value={accessToken}
-                                        placeholder=""
-                                        isRequired
-                                    />
-                                    <div className="mt-4">
-                                        <Button 
-                                            onButtonPressed={submit}
-                                            color="mineshaft"
-                                            text="Connect"
-                                            size="md"
-                                        />
-                                    </div>
-                                </div>
-                                </Dialog.Panel>
-                            </Transition.Child>
-                        </div>
-                    </div>
-                </Dialog>
-            </Transition>
-        </div>
-    );
-}
-
-export default IntegrationAccessTokenDialog;

frontend/src/components/basic/dialog/UpgradePlan.tsx

@@ -42,15 +42,15 @@ const UpgradePlanModal = ({
                 leaveFrom='opacity-100 scale-100'
                 leaveTo='opacity-0 scale-95'
               >
-                <Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-md bg-bunker border border-bunker-400 p-6 pt-5 text-left align-middle shadow-xl transition-all'>
+                <Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-md bg-bunker border border-mineshaft-500 p-6 pt-5 text-left align-middle shadow-xl transition-all'>
                   <Dialog.Title
                     as='h3'
-                    className='text-lg font-medium leading-6 text-bunker-200'
+                    className='text-xl font-medium leading-6 text-primary'
                   >
                     Unleash Infisical&apos;s Full Power
                   </Dialog.Title>
                   <div className='mt-2'>
-                    <p className='text-sm text-bunker-300 mb-0.5'>
+                    <p className='text-sm text-bunker-300 mb-1'>
                       {text}
                     </p>
                     <p className='text-sm text-bunker-300'>
@@ -60,7 +60,7 @@ const UpgradePlanModal = ({
                   <div className='mt-4'>
                     <button
                       type='button'
-                      className='inline-flex justify-center rounded-md border border-transparent bg-primary opacity-90 hover:opacity-100 px-4 py-2 text-sm font-medium text-black hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
+                      className='inline-flex justify-center rounded-md border border-transparent bg-primary opacity-80 hover:opacity-100 px-4 py-2 text-sm font-medium text-black hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
                       onClick={() => router.push(`/settings/billing/${localStorage.getItem("projectData.id")}`)}
                     >
                       Upgrade Now

frontend/src/components/basic/popups/BottomRightPopup.tsx

@@ -34,7 +34,7 @@ const BottonRightPopup = ({
 }: PopupProps): JSX.Element => {
   return (
     <div
-      className="z-50 drop-shadow-xl border-gray-600/50 border flex flex-col items-start bg-bunker max-w-xl text-gray-200 pt-3 pb-4 rounded-md absolute bottom-0 right-0 mr-6 mb-6"
+      className="z-[100] drop-shadow-xl border-gray-600/50 border flex flex-col items-start bg-bunker max-w-xl text-gray-200 pt-3 pb-4 rounded-md absolute bottom-0 right-0 mr-6 mb-6"
       role="alert"
     >
       <div className="flex flex-row items-center justify-between w-full border-b border-gray-600/70 pb-3 px-6">

frontend/src/components/basic/table/EnvironmentsTable.tsx

@@ -34,12 +34,13 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
       const subscriptions = await getOrganizationSubscriptions({
         orgId
       });
-      setPlan(subscriptions.data[0].plan.product);
+      if (subscriptions) {
+        setPlan(subscriptions.data[0].plan.product)
+      }
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-
   const onEnvCreateCB = async (env: Env) => {
     try {
       await onCreateEnv(env);
@@ -69,25 +70,25 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
 
   return (
     <>
-      <div className="flex flex-row justify-between w-full">
-        <div className="flex flex-col w-full">
-          <p className="text-xl font-semibold mb-3">Project Environments</p>
-          <p className="text-base text-gray-400 mb-4">
+      <div className="flex w-full flex-row justify-between">
+        <div className="flex w-full flex-col">
+          <p className="mb-3 text-xl font-semibold">Project Environments</p>
+          <p className="mb-4 text-base text-gray-400">
             Choose which environments will show up in your dashboard like development, staging,
             production
           </p>
-          <p className="text-sm mr-1 text-gray-500 self-start">
+          <p className="mr-1 self-start text-sm text-gray-500">
             Note: the text in slugs shows how these environmant should be accessed in CLI.
           </p>
         </div>
         <div className="w-48">
           <Button
-            text="Add New Env"
+            text="Add New Environment"
             onButtonPressed={() => {
-              if (plan !== plans.starter || host !== "https://app.infisical.com") {
-                handlePopUpOpen('createUpdateEnv')
+              if (plan !== plans.starter || host !== 'https://app.infisical.com') {
+                handlePopUpOpen('createUpdateEnv');
               } else {
-                handlePopUpOpen('upgradePlan')
+                handlePopUpOpen('upgradePlan');
               }
             }}
             color="mineshaft"
@@ -96,32 +97,30 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
           />
         </div>
       </div>
-      <div className="table-container w-full bg-bunker rounded-md mb-6 border border-mineshaft-700 relative mt-1">
-        <div className="absolute rounded-t-md w-full h-12 bg-white/5" />
-        <table className="w-full my-1">
+      <div className="table-container relative mb-6 mt-1 w-full rounded-md border border-mineshaft-700 bg-bunker">
+        <div className="absolute h-12 w-full rounded-t-md bg-white/5" />
+        <table className="my-1 w-full">
           <thead className="text-bunker-300">
             <tr>
-              <th className="text-left pl-6 pt-2.5 pb-2">Name</th>
-              <th className="text-left pl-6 pt-2.5 pb-2">Slug</th>
+              <th className="pl-6 pt-2.5 pb-2 text-left">Name</th>
+              <th className="pl-6 pt-2.5 pb-2 text-left">Slug</th>
               <th aria-label="buttons" />
             </tr>
           </thead>
           <tbody>
             {data?.length > 0 ? (
               data.map(({ name, slug }) => (
-                <tr key={name} className="bg-bunker-800 hover:bg-bunker-800/5 duration-100">
-                  <td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
-                    {name}
-                  </td>
-                  <td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">{slug}</td>
-                  <td className="py-2 border-mineshaft-700 border-t flex justify-end">
-                    <div className="hover:opacity-100 duration-200 flex items-center mr-2">
+                <tr key={name} className="bg-bunker-800 duration-100 hover:bg-bunker-800/5">
+                  <td className="border-t border-mineshaft-700 py-2 pl-6 text-gray-300">{name}</td>
+                  <td className="border-t border-mineshaft-700 py-2 pl-6 text-gray-300">{slug}</td>
+                  <td className="flex justify-end border-t border-mineshaft-700 py-2">
+                    <div className="mr-2 flex items-center duration-200 hover:opacity-100">
                       <Button
                         onButtonPressed={() => {
-                          if (plan !== plans.starter || host !== "https://app.infisical.com") {
-                            handlePopUpOpen('createUpdateEnv', { name, slug })
+                          if (plan !== plans.starter || host !== 'https://app.infisical.com') {
+                            handlePopUpOpen('createUpdateEnv', { name, slug });
                           } else {
-                            handlePopUpOpen('upgradePlan')
+                            handlePopUpOpen('upgradePlan');
                           }
                         }}
                         color="mineshaft"
@@ -129,13 +128,13 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
                         icon={faPencil}
                       />
                     </div>
-                    <div className="opacity-50 hover:opacity-100 duration-200 flex items-center mr-6">
+                    <div className="mr-6 flex items-center opacity-50 duration-200 hover:opacity-100">
                       <Button
                         onButtonPressed={() => {
-                          if (plan !== plans.starter || host !== "https://app.infisical.com") {
-                            handlePopUpOpen('deleteEnv', { name, slug })
+                          if (plan !== plans.starter || host !== 'https://app.infisical.com') {
+                            handlePopUpOpen('deleteEnv', { name, slug });
                           } else {
-                            handlePopUpOpen('upgradePlan')
+                            handlePopUpOpen('upgradePlan');
                           }
                         }}
                         color="red"
@@ -148,8 +147,8 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
               ))
             ) : (
               <tr>
-                <td colSpan={4} className="text-center pt-7 pb-4 text-bunker-400">
-                  No environmants found
+                <td colSpan={4} className="pt-7 pb-4 text-center text-bunker-400">
+                  No environments found
                 </td>
               </tr>
             )}
@@ -172,7 +171,7 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
           onCreateSubmit={onEnvCreateCB}
           onEditSubmit={onEnvUpdateCB}
         />
-        <UpgradePlanModal 
+        <UpgradePlanModal
           isOpen={popUp.upgradePlan.isOpen}
           onClose={() => handlePopUpClose('upgradePlan')}
           text="You can add custom environments if you switch to Infisical's Team plan."

frontend/src/components/basic/table/ProjectUsersTable.tsx

@@ -0,0 +1,299 @@
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import { faX } from '@fortawesome/free-solid-svg-icons';
+import { plans } from 'public/data/frequentConstants';
+
+import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
+import { Select, SelectItem } from '@app/components/v2';
+import updateUserProjectPermission from '@app/ee/api/memberships/UpdateUserProjectPermission';
+import getOrganizationSubscriptions from '@app/pages/api/organization/GetOrgSubscription';
+import changeUserRoleInWorkspace from '@app/pages/api/workspace/changeUserRoleInWorkspace';
+import deleteUserFromWorkspace from '@app/pages/api/workspace/deleteUserFromWorkspace';
+import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';
+import getProjectInfo from '@app/pages/api/workspace/getProjectInfo';
+import uploadKeys from '@app/pages/api/workspace/uploadKeys';
+
+import { decryptAssymmetric, encryptAssymmetric } from '../../utilities/cryptography/crypto';
+import guidGenerator from '../../utilities/randomId';
+import Button from '../buttons/Button';
+import UpgradePlanModal from '../dialog/UpgradePlan';
+
+// const roles = ['admin', 'user'];
+// TODO: Set type for this
+type Props = {
+  userData: any[];
+  changeData: (users: any[]) => void;
+  myUser: string;
+  filter: string;
+};
+
+type EnvironmentProps = {
+  name: string;
+  slug: string;
+}
+
+/**
+ * This is the component that shows the users of a certin project
+ * #TODO: add the possibility of choosing and doing operations on multiple users.
+ * @param {*} props
+ * @returns
+ */
+const ProjectUsersTable = ({ userData, changeData, myUser, filter }: Props) => {
+  const [roleSelected, setRoleSelected] = useState(
+    Array(userData?.length).fill(userData.map((user) => user.role))
+  );
+  const host = window.location.origin;
+  const router = useRouter();
+  const [myRole, setMyRole] = useState('member');
+  const [currentPlan, setCurrentPlan] = useState('');
+  const [workspaceEnvs, setWorkspaceEnvs] = useState<EnvironmentProps[]>([]);
+  const [isUpgradeModalOpen, setIsUpgradeModalOpen] = useState(false);
+  const { createNotification } = useNotificationContext();
+
+  const workspaceId = router.query.id as string;
+  // Delete the row in the table (e.g. a user)
+  // #TODO: Add a pop-up that warns you that the user is going to be deleted.
+  const handleDelete = (membershipId: string, index: number) => {
+    // setUserIdToBeDeleted(userId);
+    // onClick();
+    deleteUserFromWorkspace(membershipId);
+    changeData(userData.filter((v, i) => i !== index));
+    setRoleSelected([
+      ...roleSelected.slice(0, index),
+      ...roleSelected.slice(index + 1, userData?.length)
+    ]);
+  };
+
+  // Update the rold of a certain user
+  const handleRoleUpdate = (index: number, e: string) => {
+    changeUserRoleInWorkspace(userData[index].membershipId, e.toLowerCase());
+    changeData([
+      ...userData.slice(0, index),
+      ...[
+        {
+          key: userData[index].key,
+          firstName: userData[index].firstName,
+          lastName: userData[index].lastName,
+          email: userData[index].email,
+          role: e.toLocaleLowerCase(),
+          status: userData[index].status,
+          userId: userData[index].userId,
+          membershipId: userData[index].membershipId,
+          publicKey: userData[index].publicKey,
+          deniedPermissions: userData[index].deniedPermissions
+        }
+      ],
+      ...userData.slice(index + 1, userData?.length)
+    ]);
+    createNotification({
+      text: `Successfully changed user role.`,
+      type: 'success'
+    });
+  };
+
+  const handlePermissionUpdate = (index: number, val: string, membershipId: string, slug: string ) => {
+    let denials: { ability: string; environmentSlug: string; }[];
+    if (val === "Read Only") {
+      denials = [{
+        ability: "write",
+        environmentSlug: slug
+      }];
+    } else if (val === "No Access") {
+      denials = [{
+        ability: "write",
+        environmentSlug: slug
+      }, {
+        ability: "read",
+        environmentSlug: slug
+      }];
+    } else {
+      denials = [];
+    }
+
+    if (currentPlan !== plans.professional && host === 'https://app.infisical.com') {
+      setIsUpgradeModalOpen(true);
+    } else {
+      const allDenials = userData[index].deniedPermissions.filter((perm: { ability: string; environmentSlug: string; }) => perm.environmentSlug !== slug).concat(denials);
+      updateUserProjectPermission({ membershipId, denials: allDenials});
+      changeData([
+        ...userData.slice(0, index),
+        ...[
+          {
+            key: userData[index].key,
+            firstName: userData[index].firstName,
+            lastName: userData[index].lastName,
+            email: userData[index].email,
+            role: userData[index].role,
+            status: userData[index].status,
+            userId: userData[index].userId,
+            membershipId: userData[index].membershipId,
+            publicKey: userData[index].publicKey,
+            deniedPermissions: allDenials
+          }
+        ],
+        ...userData.slice(index + 1, userData?.length)
+      ]);
+      createNotification({
+        text: `Successfully changed user permissions.`,
+        type: 'success'
+      });
+    }
+  };
+
+  useEffect(() => {
+    setMyRole(userData.filter((user) => user.email === myUser)[0]?.role);
+    (async () => {
+      const result = await getProjectInfo({ projectId: workspaceId });
+      setWorkspaceEnvs(result.environments);
+
+      const orgId = localStorage.getItem('orgData.id') as string;
+      const subscriptions = await getOrganizationSubscriptions({
+        orgId
+      });
+      if (subscriptions) {
+        setCurrentPlan(subscriptions.data[0].plan.product)
+      }
+    })();
+  }, [userData, myUser]);
+
+  const grantAccess = async (id: string, publicKey: string) => {
+    const result = await getLatestFileKey({ workspaceId });
+
+    const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY') as string;
+
+    // assymmetrically decrypt symmetric key with local private key
+    const key = decryptAssymmetric({
+      ciphertext: result.latestKey.encryptedKey,
+      nonce: result.latestKey.nonce,
+      publicKey: result.latestKey.sender.publicKey,
+      privateKey: PRIVATE_KEY
+    });
+
+    const { ciphertext, nonce } = encryptAssymmetric({
+      plaintext: key,
+      publicKey,
+      privateKey: PRIVATE_KEY
+    });
+
+    uploadKeys(workspaceId, id, ciphertext, nonce);
+    router.reload();
+  };
+
+  const closeUpgradeModal = () => {
+    setIsUpgradeModalOpen(false);
+  }
+
+  return (
+    <div className="table-container bg-bunker rounded-md mb-6 border border-mineshaft-700 relative mt-1 min-w-max">
+      <div className="absolute rounded-t-md w-full h-[3.25rem] bg-white/5" />
+      <UpgradePlanModal
+        isOpen={isUpgradeModalOpen}
+        onClose={closeUpgradeModal}
+        text="You can change user permissions if you switch to Infisical's Professional plan."
+      />
+      <table className="w-full my-0.5">
+        <thead className="text-gray-400 text-sm font-light">
+          <tr>
+            <th className="text-left pl-4 py-3.5">NAME</th>
+            <th className="text-left pl-4 py-3.5">EMAIL</th>
+            <th className="text-left pl-6 pr-10 py-3.5">ROLE</th>
+            {workspaceEnvs.map(env => (
+              <th key={guidGenerator()} className="text-left pl-8 py-1 max-w-min break-normal">
+                <span>{env.name.toUpperCase()}<br/></span> 
+                {/* <span>PERMISSION</span> */}
+              </th>
+            ))}
+            <th aria-label="buttons" />
+          </tr>
+        </thead>
+        <tbody>
+          {userData?.filter(
+            (user) =>
+              user.firstName?.toLowerCase().includes(filter) ||
+              user.lastName?.toLowerCase().includes(filter) ||
+              user.email?.toLowerCase().includes(filter)
+          ).length > 0 &&
+            userData
+              ?.filter(
+                (user) =>
+                  user.firstName?.toLowerCase().includes(filter) ||
+                  user.lastName?.toLowerCase().includes(filter) ||
+                  user.email?.toLowerCase().includes(filter)
+              )
+              .map((row, index) => (
+                <tr key={guidGenerator()} className="bg-bunker-800 hover:bg-bunker-700">
+                  <td className="pl-4 py-2 border-mineshaft-700 border-t text-gray-300">
+                    {row.firstName} {row.lastName}
+                  </td>
+                  <td className="pl-4 py-2 border-mineshaft-700 border-t text-gray-300">
+                    {row.email}
+                  </td>
+                  <td className="pl-6 pr-10 py-2 border-mineshaft-700 border-t text-gray-300">
+                    <div className="justify-start h-full flex flex-row items-center">
+                      <Select 
+                        className="w-36"
+                        // open={isOpen}
+                        onValueChange={(e) => handleRoleUpdate(index, e)}
+                        value={row.role}
+                        disabled={myRole !== 'admin' || myUser === row.email}
+                        // onOpenChange={(open) => setIsOpen(open)}
+                      >
+                        <SelectItem value="admin">Admin</SelectItem>
+                        <SelectItem value="member">Member</SelectItem>
+                      </Select>
+                      {row.status === 'completed' && myUser !== row.email && (
+                        <div className="border border-mineshaft-700 rounded-md bg-white/5 hover:bg-primary text-white hover:text-black duration-200">
+                          <Button
+                            onButtonPressed={() => grantAccess(row.userId, row.publicKey)}
+                            color="mineshaft"
+                            text="Grant Access"
+                            size="md"
+                          />
+                        </div>
+                      )}
+                    </div>
+                  </td>
+                  {workspaceEnvs.map((env) => <td key={guidGenerator()} className="pl-8 py-2 border-mineshaft-700 border-t text-gray-300">
+                    <Select 
+                      className="w-36"
+                      // open={isOpen}
+                      onValueChange={(val) => handlePermissionUpdate(index, val, row.membershipId, env.slug)}
+                      value={
+                        // eslint-disable-next-line no-nested-ternary
+                        (row.deniedPermissions.filter((perm: any) => perm.environmentSlug === env.slug).map((perm: {ability: string}) => perm.ability).includes("write") && row.deniedPermissions.filter((perm: any) => perm.environmentSlug === env.slug).map((perm: {ability: string}) => perm.ability).includes("read"))
+                        ? "No Access"
+                        : (row.deniedPermissions.filter((perm: any) => perm.environmentSlug === env.slug).map((perm: {ability: string}) => perm.ability).includes("write") ? "Read Only" : "Read & Write")
+                      }
+                      disabled={myRole !== 'admin'}
+                      // onOpenChange={(open) => setIsOpen(open)}
+                    >
+                      <SelectItem value="No Access">No Access</SelectItem>
+                      <SelectItem value="Read Only">Read Only</SelectItem>
+                      <SelectItem value="Read & Write">Read & Write</SelectItem>
+                    </Select>
+                  </td>)}
+                  <td className="flex flex-row justify-end pl-8 pr-8 py-2 border-t border-0.5 border-mineshaft-700">
+                    {myUser !== row.email &&
+                    // row.role !== "admin" &&
+                    myRole !== 'member' ? (
+                      <div className="opacity-50 hover:opacity-100 flex items-center mt-0.5">
+                        <Button
+                          onButtonPressed={() => handleDelete(row.membershipId, index)}
+                          color="red"
+                          size="icon-sm"
+                          icon={faX}
+                        />
+                      </div>
+                    ) : (
+                      <div className="w-9 h-9" />
+                    )}
+                  </td>
+                </tr>
+              ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default ProjectUsersTable;

frontend/src/components/basic/table/UserTable.tsx

@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { faX } from '@fortawesome/free-solid-svg-icons';
 
+import changeUserRoleInOrganization from '@app/pages/api/organization/changeUserRoleInOrganization';
 import deleteUserFromOrganization from '@app/pages/api/organization/deleteUserFromOrganization';
-import changeUserRoleInWorkspace from '@app/pages/api/workspace/changeUserRoleInWorkspace';
 import deleteUserFromWorkspace from '@app/pages/api/workspace/deleteUserFromWorkspace';
 import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';
 import uploadKeys from '@app/pages/api/workspace/uploadKeys';
@@ -55,9 +55,9 @@ const UserTable = ({ userData, changeData, myUser, filter, resendInvite, isOrg }
     ]);
   };
 
-  // Update the rold of a certain user
+  // Update the role of a certain user
   const handleRoleUpdate = (index: number, e: string) => {
-    changeUserRoleInWorkspace(userData[index].membershipId, e);
+    changeUserRoleInOrganization(String(localStorage.getItem("orgData.id")), userData[index].membershipId, e);
     changeData([
       ...userData.slice(0, index),
       ...[
@@ -110,14 +110,14 @@ const UserTable = ({ userData, changeData, myUser, filter, resendInvite, isOrg }
   };
 
   return (
-    <div className="table-container bg-bunker rounded-md mb-6 border border-mineshaft-700 relative mt-1">
+    <div className="table-container bg-bunker rounded-md mb-6 border border-mineshaft-700 relative mt-1 min-w-max">
       <div className="absolute rounded-t-md w-full h-[3.25rem] bg-white/5" />
       <table className="w-full my-0.5">
         <thead className="text-gray-400 text-sm font-light">
           <tr>
-            <th className="text-left pl-6 py-3.5">FIRST NAME</th>
-            <th className="text-left pl-6 py-3.5">LAST NAME</th>
-            <th className="text-left pl-6 py-3.5">EMAIL</th>
+            <th className="text-left pl-4 py-3.5">NAME</th>
+            <th className="text-left pl-4 py-3.5">EMAIL</th>
+            <th className="text-left pl-6 pr-10 py-3.5">ROLE</th>
             <th aria-label="buttons" />
           </tr>
         </thead>
@@ -136,35 +136,30 @@ const UserTable = ({ userData, changeData, myUser, filter, resendInvite, isOrg }
                   user.email?.toLowerCase().includes(filter)
               )
               .map((row, index) => (
-                <tr key={guidGenerator()} className="bg-bunker-800 hover:bg-bunker-800/5">
-                  <td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
-                    {row.firstName}
+                <tr key={guidGenerator()} className="bg-bunker-800 hover:bg-bunker-700">
+                  <td className="pl-4 py-2 border-mineshaft-700 border-t text-gray-300">
+                    {row.firstName} {row.lastName}
                   </td>
-                  <td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
-                    {row.lastName}
-                  </td>
-                  <td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
+                  <td className="pl-4 py-2 border-mineshaft-700 border-t text-gray-300">
                     {row.email}
                   </td>
-                  <td className="flex flex-row justify-end pr-8 py-2 border-t border-0.5 border-mineshaft-700">
-                    <div className="justify-end mr-6 mx-2 w-full h-full flex flex-row items-center">
-                      {row.status === 'granted' &&
+                  <td className="pl-6 pr-10 py-2 border-mineshaft-700 border-t text-gray-300">
+                    <div className="justify-start h-full flex flex-row items-center">
+                      {row.status === 'accepted' &&
                       ((myRole === 'admin' && row.role !== 'owner') || myRole === 'owner') &&
-                      myUser !== row.email ? (
+                      (myUser !== row.email) ? (
                         <Listbox
                           isSelected={row.role}
                           onChange={(e) => handleRoleUpdate(index, e)}
                           data={
                             myRole === 'owner' ? ['owner', 'admin', 'member'] : ['admin', 'member']
                           }
-                          text="Role: "
                         />
                       ) : (
                         row.status !== 'invited' &&
                         row.status !== 'verified' && (
                           <Listbox
                             isSelected={row.role}
-                            text="Role: "
                             onChange={() => {
                               throw new Error('Function not implemented.');
                             }}
@@ -173,7 +168,7 @@ const UserTable = ({ userData, changeData, myUser, filter, resendInvite, isOrg }
                         )
                       )}
                       {(row.status === 'invited' || row.status === 'verified') && (
-                        <div className="w-full pl-9">
+                        <div className="w-full pr-20">
                           <Button
                             onButtonPressed={() => deleteMembershipAndResendInvite(row.email)}
                             color="mineshaft"
@@ -193,10 +188,12 @@ const UserTable = ({ userData, changeData, myUser, filter, resendInvite, isOrg }
                         </div>
                       )}
                     </div>
+                  </td>
+                  <td className="flex flex-row justify-end pl-8 pr-8 py-2 border-t border-0.5 border-mineshaft-700">
                     {myUser !== row.email &&
                     // row.role !== "admin" &&
                     myRole !== 'member' ? (
-                      <div className="opacity-50 hover:opacity-100 flex items-center">
+                      <div className="opacity-50 hover:opacity-100 flex items-center mt-0.5">
                         <Button
                           onButtonPressed={() => handleDelete(row.membershipId, index)}
                           color="red"

frontend/src/components/dashboard/AddTagsMenu.tsx

@@ -0,0 +1,63 @@
+import { Fragment } from 'react';
+import { useRouter } from 'next/router';
+import { faCheckSquare, faPlus, faSquare } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Menu, Transition } from '@headlessui/react';
+import { Tag } from 'public/data/frequentInterfaces';
+
+/**
+ * This is the menu that is used to add more tags to a secret
+ * @param {object} obj
+ * @param {Tag[]} obj.allTags - all available tags for a vertain project
+ * @param {Tag[]} obj.currentTags - currently selected tags for a certain secret
+ * @param {function} obj.modifyTags - modify tags for a certain secret
+ * @param {Tag[]} obj.position - currently selected tags for a certain secret
+ */
+const AddTagsMenu = ({ allTags, currentTags, modifyTags, position }: { allTags: Tag[]; currentTags: Tag[]; modifyTags: (value: Tag[], position: number) => void; position: number; }) => {
+  const router = useRouter();
+  return (
+    <Menu as="div" className="ml-2 relative inline-block text-left">
+      <Menu.Button
+        as="div"
+        className="flex justify-center items-center font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
+      >
+        <div className='bg-mineshaft/30 cursor-pointer rounded-sm text-sm text-mineshaft-200/50 hover:bg-mineshaft/70 duration-200 flex items-center'>
+          <FontAwesomeIcon icon={faPlus} className="p-[0.28rem]"/>
+          {currentTags?.length > 2 && <span className='pr-2'>{currentTags.length - 2}</span>}
+        </div>
+      </Menu.Button>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="absolute z-[90] text-sm drop-shadow-xl right-0 mt-0.5 w-[12rem] origin-top-right rounded-md bg-mineshaft-600 border border-mineshaft-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none p-1 space-y-1">
+          {allTags?.map((tag) => { return (
+            <Menu.Item key={tag._id}>
+              <button
+                type="button"
+                className={`${currentTags?.map(currentTag => currentTag.name).includes(tag.name) ? "opacity-30 cursor-default" : "hover:bg-mineshaft-700"} w-full text-left bg-mineshaft-800 px-2 py-0.5 text-bunker-200 rounded-sm flex items-center`}
+                onClick={() => {if (!currentTags?.map(currentTag => currentTag.name).includes(tag.name)) {modifyTags(currentTags.concat([tag]), position)}}}
+              >
+                {currentTags?.map(currentTag => currentTag.name).includes(tag.name) ? <FontAwesomeIcon icon={faCheckSquare} className="text-xs mr-2 text-primary"/> : <FontAwesomeIcon icon={faSquare} className="text-xs mr-2"/>} {tag.name}
+              </button>
+            </Menu.Item>
+          )})}
+          <button
+            type="button"
+            className='w-full text-left bg-mineshaft-800 hover:bg-primary hover:text-black duration-200 px-2 py-0.5 text-bunker-200 rounded-sm'
+            onClick={() => router.push(`/settings/project/${String(router.query.id)}`)}
+          >
+            <FontAwesomeIcon icon={faPlus} className="mr-2 text-xs" />Add more tags
+          </button>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+};
+
+export default AddTagsMenu;

frontend/src/components/dashboard/CommentField.tsx

@@ -18,7 +18,7 @@ const CommentField = ({
     <div className="relative mt-4 px-4 pt-6">
       <p className="text-sm text-bunker-300 pl-0.5">{t('dashboard:sidebar.comments')}</p>
       <textarea
-        className="placeholder:text-bunker-400 h-32 w-full bg-bunker-800 px-2 py-1.5 rounded-md border border-mineshaft-500 text-sm text-bunker-300 outline-none focus:ring-2 ring-primary-800 ring-opacity-70"
+        className="placeholder:text-bunker-400 dark:[color-scheme:dark] h-32 w-full bg-bunker-800 px-2 py-1.5 rounded-md border border-mineshaft-500 text-sm text-bunker-300 outline-none focus:ring-2 ring-primary-800 ring-opacity-70"
         value={comment}
         onChange={(e) => modifyComment(e.target.value, position)}
         placeholder="Leave any comments here..."

frontend/src/components/dashboard/CompareSecretsModal.tsx

@@ -0,0 +1,88 @@
+import { SetStateAction, useEffect, useState } from 'react';
+import Image from 'next/image';
+
+import { WorkspaceEnv } from '@app/hooks/api/types';
+
+import getSecretsForProject from '../utilities/secrets/getSecretsForProject';
+import { Modal, ModalContent } from '../v2';
+
+interface Secrets {
+  label: string;
+  secret: string;
+}
+
+interface CompareSecretsModalProps {
+  compareModal: boolean;
+  setCompareModal: React.Dispatch<SetStateAction<boolean>>;
+  selectedEnv: WorkspaceEnv;
+  workspaceEnvs: WorkspaceEnv[];
+  workspaceId: string;
+  currentSecret: {
+    key: string;
+    value: string;
+  };
+}
+
+const CompareSecretsModal = ({
+  compareModal,
+  setCompareModal,
+  selectedEnv,
+  workspaceEnvs,
+  workspaceId,
+  currentSecret
+}: CompareSecretsModalProps) => {
+  const [secrets, setSecrets] = useState<Secrets[]>([]);
+
+  const getEnvSecrets = async () => {
+    const workspaceEnvironments = workspaceEnvs?.filter((env) => env !== selectedEnv);
+    const newSecrets = await Promise.all(
+      workspaceEnvironments.map(async (env) => {
+        // #TODO: optimize this query somehow...
+        const allSecrets = await getSecretsForProject({ env: env.slug, workspaceId });
+        const secret =
+          allSecrets.find((item) => item.key === currentSecret.key)?.value ?? 'Not found';
+        return { label: env.name, secret };
+      })
+    );
+    setSecrets([{ label: selectedEnv.name, secret: currentSecret.value }, ...newSecrets]);
+  };
+
+  useEffect(() => {
+    if (compareModal) {
+      (async () => {
+        await getEnvSecrets();
+      })();
+    }
+  }, [compareModal]);
+
+  return (
+    <Modal isOpen={compareModal} onOpenChange={setCompareModal}>
+      <ModalContent title={currentSecret?.key} onOpenAutoFocus={(e) => e.preventDefault()}>
+        <div className="space-y-4">
+          {secrets.length === 0 ? (
+            <div className="flex items-center bg-bunker-900 justify-center h-full py-4 rounded-md">
+              <Image
+                src="/images/loading/loading.gif"
+                height={60}
+                width={100}
+                alt="infisical loading indicator"
+              />
+            </div>
+          ) : (
+            secrets.map((item) => (
+              <div key={`${currentSecret.key}${item.label}`} className="space-y-0.5">
+                <p className="text-sm text-bunker-300">{item.label}</p>
+                <input
+                  defaultValue={item.secret}
+                  className="h-no-capture border border-mineshaft-500 text-md min-w-16 no-scrollbar::-webkit-scrollbar peer z-10 w-full rounded-md bg-bunker-800 px-2 py-1.5 font-mono text-gray-400 caret-white outline-none duration-200 no-scrollbar focus:ring-2 focus:ring-primary/50 "
+                  readOnly
+                />
+              </div>
+            ))
+          )}
+        </div>
+      </ModalContent>
+    </Modal>
+  );
+};
+export default CompareSecretsModal;

frontend/src/components/dashboard/ConfirmEnvOverwriteModal.tsx

@@ -0,0 +1,42 @@
+import { Button, Modal, ModalContent } from '../v2';
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  onOverwriteConfirm: (preserve: 'old' | 'new') => void;
+  duplicateKeys: string[];
+};
+
+const ConfirmEnvOverwriteModal = ({
+  isOpen,
+  onClose,
+  duplicateKeys,
+  onOverwriteConfirm
+}: Props): JSX.Element => {
+  return (
+    <Modal isOpen={isOpen}>
+      <ModalContent
+        title="Duplicate Secrets"
+        footerContent={
+          <div className="flex items-center gap-4">
+            <Button colorSchema="primary" onClick={() => onOverwriteConfirm('old')}>
+              Keep Old
+            </Button>
+            <Button colorSchema="danger" onClick={() => onOverwriteConfirm('new')}>
+              Overwrite
+            </Button>
+          </div>
+        }
+        onClose={onClose}
+      >
+        <div className="flex flex-col gap-2">
+          <p className='text-gray-400'>Your file contains the following duplicate secrets:</p>
+          <p className="text-sm text-gray-500">{duplicateKeys.join(', ')}</p>
+          <p className='text-md text-gray-400'>Are you sure you want to overwrite these secrets?</p>
+        </div>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default ConfirmEnvOverwriteModal;

frontend/src/components/dashboard/DashboardInputField.tsx

@@ -1,8 +1,9 @@
 import { memo, SyntheticEvent, useRef } from 'react';
-import { faCircle } from '@fortawesome/free-solid-svg-icons';
+import { faCircle, faExclamationCircle, faEye, faLayerGroup } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import guidGenerator from '../utilities/randomId';
+import { HoverObject } from '../v2/HoverCard';
 
 const REGEX = /([$]{.*?})/g;
 
@@ -10,10 +11,13 @@ interface DashboardInputFieldProps {
   position: number;
   onChangeHandler: (value: string, position: number) => void;
   value: string | undefined;
-  type: 'varName' | 'value';
+  type: 'varName' | 'value' | 'comment';
   blurred?: boolean;
   isDuplicate?: boolean;
-  override?: boolean;
+  isCapitalized?: boolean;
+  overrideEnabled?: boolean;
+  modifyValueOverride?: (value: string | undefined, position: number) => void;
+  isSideBarOpen?: boolean;
 }
 
 /**
@@ -26,6 +30,8 @@ interface DashboardInputFieldProps {
  * @param {boolean} obj.blurred - whether the input field should be blurred (behind the gray dots) or not; this can be turned on/off in the dashboard
  * @param {boolean} obj.isDuplicate - if the key name is duplicated
  * @param {boolean} obj.override - whether a secret/row should be displalyed as overriden
+ * 
+ * 
  * @returns
  */
 
@@ -36,7 +42,10 @@ const DashboardInputField = ({
   value,
   blurred,
   isDuplicate,
-  override
+  isCapitalized,
+  overrideEnabled,
+  modifyValueOverride,
+  isSideBarOpen
 }: DashboardInputFieldProps) => {
   const ref = useRef<HTMLDivElement | null>(null);
   const syncScroll = (e: SyntheticEvent<HTMLDivElement>) => {
@@ -51,41 +60,97 @@ const DashboardInputField = ({
     const error = startsWithNumber || isDuplicate;
 
     return (
-      <div className="flex-col w-full">
+      <div className={`relative flex-col w-full h-10 ${
+        error && value !== '' ? 'bg-red/[0.15]' : ''
+      } ${
+        isSideBarOpen && 'bg-mineshaft-700 duration-200'
+      }`}>
         <div
-          className={`group relative flex flex-col justify-center w-full border ${
-            error ? 'border-red' : 'border-mineshaft-500'
-          } rounded-md`}
+          className={`group relative flex flex-col justify-center items-center h-full ${
+            error ? 'w-max' : 'w-full'
+          }`}
         >
           <input
-            onChange={(e) => onChangeHandler(e.target.value.toUpperCase(), position)}
+            onChange={(e) => onChangeHandler(isCapitalized ? e.target.value.toUpperCase() : e.target.value, position)}
             type={type}
             value={value}
-            className={`z-10 peer font-mono ph-no-capture bg-bunker-800 rounded-md caret-white text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 ${
-              error ? 'focus:ring-red/50' : 'focus:ring-primary/50'
+            className={`z-10 peer font-mono ph-no-capture bg-transparent h-full caret-bunker-200 text-sm px-2 w-full min-w-16 outline-none ${
+              error ? 'text-red-600 focus:text-red-500' : 'text-bunker-300 focus:text-bunker-100'
             } duration-200`}
             spellCheck="false"
           />
         </div>
         {startsWithNumber && (
-          <p className="text-red text-xs mt-0.5 mx-1 mb-2 max-w-xs">
-            Should not start with a number
-          </p>
+          <div className='absolute right-2 top-2 text-red z-50'>
+            <HoverObject 
+              text="Secret names should not start with a number"
+              icon={faExclamationCircle}
+              color="red"
+            />
+          </div>
         )}
-        {isDuplicate && !startsWithNumber && (
-          <p className="text-red text-xs mt-0.5 mx-1 mb-2 max-w-xs">
-            Secret names should be unique
-          </p>
+        {isDuplicate && value !== '' && !startsWithNumber && (
+          <div className='absolute right-2 top-2 text-red z-50'>
+            <HoverObject 
+              text="Secret names should be unique"
+              icon={faExclamationCircle}
+              color="red"
+            />
+          </div>
         )}
+        {!error && <div className={`absolute right-0 top-0 text-red z-50 ${
+          overrideEnabled ? 'visible group-hover:bg-mineshaft-700' : 'invisible group-hover:visible bg-mineshaft-700'
+        } cursor-pointer duration-0 h-10 flex items-center px-2`}>
+          <button type="button" onClick={() => {
+            if (modifyValueOverride) {
+              if (overrideEnabled === false) {
+                modifyValueOverride('', position);
+              } else {
+                modifyValueOverride(undefined, position);
+              }
+            }
+          }}>
+            <HoverObject 
+              text={overrideEnabled ? 'This secret is overriden with your personal value' : 'You can override this secret with a personal value'}
+              icon={faLayerGroup}
+              color={overrideEnabled ? 'primary' : 'bunker-400'}
+            />
+          </button>
+        </div>}
+      </div>
+    );
+  }
+  if (type === 'comment') {
+    const startsWithNumber = !Number.isNaN(Number(value?.charAt(0))) && value !== '';
+    const error = startsWithNumber || isDuplicate;
+
+    return (
+      <div title={value} className={`relative flex-col w-full h-10 ${
+        isSideBarOpen && 'bg-mineshaft-700 duration-200'
+      }`}>
+        <div
+          className={`group relative flex flex-col justify-center items-center ${
+            error ? 'w-max' : 'w-full'
+          }`}
+        >
+          <input
+            onChange={(e) => onChangeHandler(e.target.value, position)}
+            type={type}
+            value={value}
+            className='z-10 peer ph-no-capture bg-transparent py-2.5 caret-bunker-200 text-sm px-2 w-full min-w-16 outline-none text-bunker-300 focus:text-bunker-100 placeholder:text-bunker-400 placeholder:focus:text-transparent placeholder duration-200'
+            spellCheck="false"
+            placeholder='–'
+          />
+        </div>
       </div>
     );
   }
   if (type === 'value') {
     return (
       <div className="flex-col w-full">
-        <div className="group relative whitespace-pre	flex flex-col justify-center w-full border border-mineshaft-500 rounded-md">
-          {override === true && (
-            <div className="bg-primary-300 absolute top-[0.1rem] right-[0.1rem] z-10 w-min text-xxs px-1 text-black opacity-80 rounded-md">
+        <div className="group relative whitespace-pre	flex flex-col justify-center w-full">
+          {overrideEnabled === true && (
+            <div className="bg-primary-500 rounded-sm absolute top-[0.1rem] right-[0.1rem] z-0 w-min text-xxs px-1 text-black opacity-80">
               Override enabled
             </div>
           )}
@@ -95,19 +160,19 @@ const DashboardInputField = ({
             onScroll={syncScroll}
             className={`${
               blurred
-                ? 'text-transparent group-hover:text-transparent focus:text-transparent active:text-transparent'
+                ? 'text-transparent focus:text-transparent active:text-transparent'
                 : ''
-            } z-10 peer font-mono ph-no-capture bg-transparent rounded-md caret-white text-transparent text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-200 no-scrollbar no-scrollbar::-webkit-scrollbar`}
+            } z-10 peer font-mono ph-no-capture bg-transparent caret-white text-transparent text-sm px-2 py-2 w-full min-w-16 outline-none duration-200 no-scrollbar no-scrollbar::-webkit-scrollbar`}
             spellCheck="false"
           />
           <div
             ref={ref}
             className={`${
-              blurred && !override
-                ? 'text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-400 peer-active:text-gray-400'
+              blurred && !overrideEnabled
+                ? 'text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-100 peer-active:text-gray-400 duration-200'
                 : ''
-            } ${override ? 'text-primary-300' : 'text-gray-400'}
-            absolute flex flex-row whitespace-pre font-mono z-0 ph-no-capture overflow-x-scroll bg-bunker-800 h-9 rounded-md text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-100 no-scrollbar no-scrollbar::-webkit-scrollbar`}
+            } ${overrideEnabled ? 'text-primary-300' : 'text-gray-400'}
+            absolute flex flex-row whitespace-pre font-mono z-0 ${blurred ? 'invisible' : 'visible'} peer-focus:visible mt-0.5 ph-no-capture overflow-x-scroll bg-transparent h-10 text-sm px-2 py-2 w-full min-w-16 outline-none duration-100 no-scrollbar no-scrollbar::-webkit-scrollbar`}
           >
             {value?.split(REGEX).map((word, id) => {
               if (word.match(REGEX) !== null) {
@@ -137,16 +202,20 @@ const DashboardInputField = ({
             })}
           </div>
           {blurred && (
-            <div className="absolute flex flex-row items-center z-20 peer pr-2 bg-bunker-800 group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible h-9 w-full rounded-md text-gray-400/50 text-clip">
+            <div className={`absolute flex flex-row justify-between items-center z-0 peer pr-2 ${
+              isSideBarOpen ? 'bg-mineshaft-700 duration-200' : 'bg-mineshaft-800'
+            } peer-active:hidden peer-focus:hidden group-hover:bg-white/[0.00] duration-100 h-10 w-full text-bunker-400 text-clip`}>
               <div className="px-2 flex flex-row items-center overflow-x-scroll no-scrollbar no-scrollbar::-webkit-scrollbar">
                 {value?.split('').map(() => (
                   <FontAwesomeIcon
                     key={guidGenerator()}
-                    className="text-xxs mx-0.5"
+                    className="text-xxs mr-0.5"
                     icon={faCircle}
                   />
                 ))}
+                {value?.split('').length === 0 && <span className='text-bunker-400/80'>EMPTY</span>}
               </div>
+              <div className='invisible group-hover:visible cursor-pointer'><FontAwesomeIcon icon={faEye} /></div>
             </div>
           )}
         </div>
@@ -163,8 +232,10 @@ function inputPropsAreEqual(prev: DashboardInputFieldProps, next: DashboardInput
     prev.type === next.type &&
     prev.position === next.position &&
     prev.blurred === next.blurred &&
-    prev.override === next.override &&
-    prev.isDuplicate === next.isDuplicate
+    prev.isCapitalized === next.isCapitalized &&
+    prev.overrideEnabled === next.overrideEnabled &&
+    prev.isDuplicate === next.isDuplicate &&
+    prev.isSideBarOpen === next.isSideBarOpen
   );
 }
 

frontend/src/components/dashboard/DeleteActionButton.tsx

@@ -1,26 +1,42 @@
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import Button from '../basic/buttons/Button';
 import { DeleteEnvVar } from '../basic/dialog/DeleteEnvVar';
 
 type Props = {
-  onSubmit: () => void
+  onSubmit: () => void;
+  isPlain?: boolean;
 }
 
-export const DeleteActionButton = ({ onSubmit }: Props) => {
+export const DeleteActionButton = ({ onSubmit, isPlain }: Props) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false)
 
   return (
-    <div className="bg-[#9B3535] opacity-70 hover:opacity-100 w-[4.5rem] h-[2.5rem] rounded-md duration-200 ml-2">
-      <Button
+    <div className={`${
+      !isPlain 
+      ? 'bg-[#9B3535] opacity-70 hover:opacity-100 w-[4.5rem] h-[2.5rem] rounded-md duration-200 ml-2'
+      : 'cursor-pointer w-[1.5rem] h-[2.35rem] mr-2 flex items-center justfy-center'}`}>
+      {isPlain 
+      ? <div
+        onKeyDown={() => null}
+        role="button"
+        tabIndex={0}
+        onClick={() => setOpen(true)}
+        className="invisible group-hover:visible"
+      >
+        <FontAwesomeIcon className="text-bunker-300 hover:text-red pl-2 pr-6 text-lg mt-0.5" icon={faXmark} />
+      </div>
+      : <Button
         text={String(t("Delete"))}
         // onButtonPressed={onSubmit}
         color="red"
         size="md"
         onButtonPressed={() => setOpen(true)}
-      />
+      />}
       <DeleteEnvVar 
         isOpen={open}
         onClose={() => {

frontend/src/components/dashboard/DownloadSecretsMenu.tsx

@@ -31,7 +31,7 @@ const DownloadSecretMenu = ({ data, env }: { data: SecretDataProps[]; env: strin
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute z-50 drop-shadow-xl right-0 mt-0.5 w-[12rem] origin-top-right rounded-md bg-bunker border border-mineshaft-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none p-2 space-y-2">
+        <Menu.Items className="absolute z-[90] drop-shadow-xl right-0 mt-0.5 w-[12rem] origin-top-right rounded-md bg-bunker border border-mineshaft-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none p-2 space-y-2">
           <Menu.Item>
             <Button
               color="mineshaft"

frontend/src/components/dashboard/DropZone.tsx

@@ -64,7 +64,8 @@ const DropZone = ({
           key,
           value: keyPairs[key as keyof typeof keyPairs].value,
           comment: keyPairs[key as keyof typeof keyPairs].comments.join('\n'),
-          type: 'shared'
+          type: 'shared',
+          tags: []
         }));
         break;
       }
@@ -86,7 +87,8 @@ const DropZone = ({
             key,
             value: keyPairs[key as keyof typeof keyPairs]?.toString() ?? '',
             comment,
-            type: 'shared'
+            type: 'shared',
+            tags: []
           };
         });
         break;
@@ -152,7 +154,7 @@ const DropZone = ({
     </div>
   ) : keysExist ? (
     <div
-      className="opacity-60 hover:opacity-100 duration-200 relative bg-mineshaft-900 max-w-[calc(100%-1rem)] w-full outline-dashed outline-chicago-600 rounded-md outline-2 flex flex-col items-center justify-center mb-16 mx-auto mt-1 py-8 px-2"
+      className="opacity-60 hover:opacity-100 duration-200 relative bg-mineshaft-900 max-w-[calc(100%-1rem)] w-full outline-dashed outline-chicago-600 rounded-md outline-2 flex flex-col items-center justify-center mb-4 mx-auto mt-1 py-8 px-2"
       onDragEnter={handleDragEnter}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}

frontend/src/components/dashboard/KeyPair.tsx

@@ -1,21 +1,57 @@
-import { faEllipsis } from '@fortawesome/free-solid-svg-icons';
+import { faEllipsis, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { SecretDataProps } from 'public/data/frequentInterfaces';
+import { SecretDataProps, Tag } from 'public/data/frequentInterfaces';
 
+import AddTagsMenu from './AddTagsMenu';
 import DashboardInputField from './DashboardInputField';
+import { DeleteActionButton } from './DeleteActionButton';
 
 interface KeyPairProps {
   keyPair: SecretDataProps;
   modifyKey: (value: string, position: number) => void;
   modifyValue: (value: string, position: number) => void;
-  modifyValueOverride: (value: string, position: number) => void;
+  modifyValueOverride: (value: string | undefined, position: number) => void;
+  modifyComment: (value: string, position: number) => void;
+  modifyTags: (value: Tag[], position: number) => void;
   isBlurred: boolean;
   isDuplicate: boolean;
   toggleSidebar: (id: string) => void;
   sidebarSecretId: string;
   isSnapshot: boolean;
+  isCapitalized: boolean;
+  deleteRow?: (props: DeleteRowFunctionProps) => void;
+  tags: Tag[];
+  togglePITSidebar?: (value: boolean) => void;
 }
 
+export interface DeleteRowFunctionProps {
+  ids: string[];
+  secretName: string;
+}
+
+const colors = [
+  'bg-[#f1c40f]/40',
+  'bg-[#cb1c8d]/40',
+  'bg-[#badc58]/40',
+  'bg-[#ff5400]/40',
+  'bg-[#3AB0FF]/40',
+  'bg-[#6F1AB6]/40',
+  'bg-[#C40B13]/40',
+  'bg-[#332FD0]/40'
+]
+
+
+const colorsText = [
+  'text-[#fcf0c3]/70',
+  'text-[#f2c6e3]/70',
+  'text-[#eef6d5]/70',
+  'text-[#ffddcc]/70',
+  'text-[#f0fffd]/70',
+  'text-[#FFE5F1]/70',
+  'text-[#FFDEDE]/70',
+  'text-[#DFF6FF]/70'
+]
+
 /**
  * This component represent a single row for an environemnt variable on the dashboard
  * @param {object} obj
@@ -23,11 +59,16 @@ interface KeyPairProps {
  * @param {function} obj.modifyKey - modify the key of a certain environment variable
  * @param {function} obj.modifyValue - modify the value of a certain environment variable
  * @param {function} obj.modifyValueOverride - modify the value of a certain environment variable if it is overriden
+ * @param {function} obj.modifyComment - modify the comment of a certain environment variable
+ * @param {function} obj.modifyTags - modify the tags of a certain environment variable
  * @param {boolean} obj.isBlurred - if the blurring setting is turned on
  * @param {boolean} obj.isDuplicate - list of all the duplicates secret names on the dashboard
  * @param {function} obj.toggleSidebar - open/close/switch sidebar
  * @param {string} obj.sidebarSecretId - the id of a secret for the side bar is displayed
  * @param {boolean} obj.isSnapshot - whether this keyPair is in a snapshot. If so, it won't have some features like sidebar
+ * @param {function} obj.deleteRow - a function to delete a certain keyPair
+ * @param {function} obj.togglePITSidebar - open or close the Point-in-time recovery sidebar
+ * @param {Tag[]} obj.tags - tags for a certain secret
  * @returns
  */
 const KeyPair = ({
@@ -35,66 +76,110 @@ const KeyPair = ({
   modifyKey,
   modifyValue,
   modifyValueOverride,
+  modifyComment,
+  modifyTags,
   isBlurred,
   isDuplicate,
   toggleSidebar,
   sidebarSecretId,
-  isSnapshot
-}: KeyPairProps) => (
+  isCapitalized,
+  isSnapshot, 
+  deleteRow,
+  togglePITSidebar,
+  tags
+}: KeyPairProps) => {
+  const tagData = (tags.map((tag, index) => {return {
+    ...tag, 
+    color: colors[index%colors.length], 
+    colorText: colorsText[index%colorsText.length]
+  }}));
+
+  return (
   <div
-    className={`mx-1 flex flex-col items-center ml-1 ${isSnapshot && 'pointer-events-none'} ${
-      keyPair.id === sidebarSecretId && 'bg-mineshaft-500 duration-200'
-    } rounded-md`}
+    className={`group flex flex-col items-center border-b border-mineshaft-500 hover:bg-white/[0.03] duration-100 ${isSnapshot && 'pointer-events-none'} ${
+      keyPair.id === sidebarSecretId && 'bg-mineshaft-700 duration-200'
+    }`}
   >
-    <div className="relative flex flex-row justify-between w-full max-w-5xl mr-auto max-h-14 my-1 items-start px-1">
-      {keyPair.valueOverride && (
-        <div className="group font-normal group absolute top-[1rem] left-[0.2rem] z-40 inline-block text-gray-300 underline hover:text-primary duration-200">
-          <div className="w-1 h-1 rounded-full bg-primary z-40" />
-          <span className="absolute z-50 hidden group-hover:flex group-hover:animate-popdown duration-200 w-[10.5rem] -left-[0.4rem] -top-[1.7rem] translate-y-full px-2 py-2 bg-mineshaft-500 rounded-b-md rounded-r-md text-center text-gray-100 text-sm after:content-[''] after:absolute after:left-0 after:bottom-[100%] after:-translate-x-0 after:border-8 after:border-x-transparent after:border-t-transparent after:border-b-mineshaft-500">
-            This secret is overriden
-          </span>
-        </div>
-      )}
-      <div className="min-w-xl w-96">
-        <div className="flex pr-1.5 items-center rounded-lg mt-4 md:mt-0 max-h-16">
+    <div className="relative flex flex-row justify-between w-full mr-auto max-h-14 items-center">
+      <div className="w-1/5 border-r border-mineshaft-600 flex flex-row items-center">
+        <div className='text-bunker-400 text-xs flex items-center justify-center w-14 h-10 cursor-default'>{keyPair.pos + 1}</div>
+        <div className="flex items-center max-h-16 w-full">
           <DashboardInputField
+            isCapitalized = {isCapitalized}
             onChangeHandler={modifyKey}
             type="varName"
             position={keyPair.pos}
             value={keyPair.key}
             isDuplicate={isDuplicate}
+            overrideEnabled={keyPair.valueOverride !== undefined}
+            modifyValueOverride={modifyValueOverride}
+            isSideBarOpen={keyPair.id === sidebarSecretId}
           />
         </div>
       </div>
-      <div className="w-full min-w-xl">
+      <div className="w-5/12 border-r border-mineshaft-600">
         <div
-          className={`flex min-w-xl items-center ${
-            !isSnapshot && 'pr-1.5'
-          } rounded-lg mt-4 md:mt-0 max-h-10`}
+          className='flex items-center rounded-lg mt-4 md:mt-0 max-h-10'
         >
           <DashboardInputField
-            onChangeHandler={keyPair.valueOverride ? modifyValueOverride : modifyValue}
+            onChangeHandler={keyPair.valueOverride !== undefined ? modifyValueOverride : modifyValue}
             type="value"
             position={keyPair.pos}
-            value={keyPair.valueOverride ? keyPair.valueOverride : keyPair.value}
+            value={keyPair.valueOverride !== undefined ? keyPair.valueOverride : keyPair.value}
             blurred={isBlurred}
-            override={Boolean(keyPair.valueOverride)}
+            overrideEnabled={keyPair.valueOverride !== undefined}
+            isSideBarOpen={keyPair.id === sidebarSecretId}
           />
         </div>
       </div>
-      {!isSnapshot && (
-        <div
-          onKeyDown={() => null}
-          role="button"
-          tabIndex={0}
-          onClick={() => toggleSidebar(keyPair.id)}
-          className="cursor-pointer w-[2.35rem] h-[2.35rem] bg-mineshaft-700 hover:bg-chicago-700 rounded-md flex flex-row justify-center items-center duration-200"
-        >
-          <FontAwesomeIcon className="text-gray-300 px-2.5 text-lg mt-0.5" icon={faEllipsis} />
+      <div className="w-2/12 border-r border-mineshaft-600">
+        <div className="flex items-center max-h-16">
+          <DashboardInputField
+            onChangeHandler={modifyComment}
+            type="comment"
+            position={keyPair.pos}
+            value={keyPair.comment}
+            isDuplicate={isDuplicate}
+            isSideBarOpen={keyPair.id === sidebarSecretId}
+          />
         </div>
-      )}
+      </div>
+      <div className="w-2/12 h-10 flex items-center overflow-visible overflow-r-scroll no-scrollbar no-scrollbar::-webkit-scrollbar">
+        <div className="flex items-center max-h-16">
+          {keyPair.tags?.map((tag, index) => (
+            index < 2 && <div key={keyPair.pos} className={`ml-2 px-1.5 ${tagData.filter(tagDp => tagDp._id === tag._id)[0]?.color} rounded-sm text-sm ${tagData.filter(tagDp => tagDp._id === tag._id)[0]?.colorText} flex items-center`}>
+              <span className='mb-0.5 cursor-default'>{tag.name}</span>
+              <FontAwesomeIcon icon={faXmark} className="ml-1 cursor-pointer p-1" onClick={() => modifyTags(keyPair.tags.filter(ttag => ttag._id !== tag._id), keyPair.pos)}/>
+            </div>
+          ))}
+          
+          <AddTagsMenu allTags={tags} currentTags={keyPair.tags} modifyTags={modifyTags} position={keyPair.pos} />
+        </div>
+      </div>
+      <div
+        onKeyDown={() => null}
+        role="button"
+        tabIndex={0}
+        onClick={() => {
+          if (togglePITSidebar) {
+            togglePITSidebar(false);
+          }
+          toggleSidebar(keyPair.id)
+        }}
+        className={`cursor-pointer w-[1.5rem] h-[2.35rem] ml-auto group-hover:bg-mineshaft-700 z-50 rounded-md invisible group-hover:visible flex flex-row justify-center items-center ${isSnapshot ?? 'invisible'}`}
+      >
+        <FontAwesomeIcon className="text-bunker-300 hover:text-primary text-lg" icon={faEllipsis} />
+      </div>
+      <div className={`group-hover:bg-mineshaft-700 z-50 ${isSnapshot ?? 'invisible'}`}>
+        <DeleteActionButton
+          onSubmit={() => { if (deleteRow) {
+            deleteRow({ ids: [keyPair.id], secretName: keyPair?.key })
+          }}}
+          isPlain
+        />
+      </div>
     </div>
   </div>
-);
+)};
 
 export default KeyPair;

frontend/src/components/dashboard/SideBar.tsx

@@ -2,14 +2,16 @@
 import { useState } from 'react';
 import Image from 'next/image';
 import { useTranslation } from 'next-i18next';
-import { faX } from '@fortawesome/free-solid-svg-icons';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import SecretVersionList from '@app/ee/components/SecretVersionList';
+import { WorkspaceEnv } from '@app/hooks/api/types';
 
 import Button from '../basic/buttons/Button';
 import Toggle from '../basic/Toggle';
 import CommentField from './CommentField';
+import CompareSecretsModal from './CompareSecretsModal';
 import DashboardInputField from './DashboardInputField';
 import { DeleteActionButton } from './DeleteActionButton';
 import GenerateSecretMenu from './GenerateSecretMenu';
@@ -40,6 +42,9 @@ interface SideBarProps {
   sharedToHide: string[];
   setSharedToHide: (values: string[]) => void;
   deleteRow: (props: DeleteRowFunctionProps) => void;
+  workspaceEnvs: WorkspaceEnv[];
+  selectedEnv: WorkspaceEnv;
+  workspaceId: string;
 }
 
 /**
@@ -63,15 +68,19 @@ const SideBar = ({
   modifyComment,
   buttonReady,
   savePush,
-  deleteRow
+  deleteRow,
+  workspaceEnvs,
+  selectedEnv,
+  workspaceId
 }: SideBarProps) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [isLoading, setIsLoading] = useState(false);
-  const [overrideEnabled, setOverrideEnabled] = useState(data[0].valueOverride !== undefined);
+  const [overrideEnabled, setOverrideEnabled] = useState(data[0]?.valueOverride !== undefined);
+  const [compareModal, setCompareModal] = useState(false);
   const { t } = useTranslation();
 
   return (
-    <div className="absolute border-l border-mineshaft-500 bg-bunker h-full w-96 top-14 right-0 z-40 shadow-xl flex flex-col justify-between">
+    <div className="absolute border-l border-mineshaft-500 bg-bunker h-full w-[28rem] sticky top-0 right-0 z-[70] shadow-xl flex flex-col justify-between">
       {isLoading ? (
         <div className="flex items-center justify-center h-full">
           <Image
@@ -92,35 +101,39 @@ const SideBar = ({
               className="p-1"
               onClick={() => toggleSidebar('None')}
             >
-              <FontAwesomeIcon icon={faX} className="w-4 h-4 text-bunker-300 cursor-pointer" />
+              <FontAwesomeIcon icon={faXmark} className="w-4 h-4 text-bunker-300 cursor-pointer" />
             </div>
           </div>
           <div className="mt-4 px-4 pointer-events-none">
             <p className="text-sm text-bunker-300">{t('dashboard:sidebar.key')}</p>
-            <DashboardInputField
-              onChangeHandler={modifyKey}
-              type="varName"
-              position={data[0]?.pos}
-              value={data[0]?.key}
-              isDuplicate={false}
-              blurred={false}
-            />
+            <div className='rounded-md border overflow-hidden border-mineshaft-600 bg-white/5'>
+              <DashboardInputField
+                onChangeHandler={modifyKey}
+                type="varName"
+                position={data[0]?.pos}
+                value={data[0]?.key}
+                isDuplicate={false}
+                blurred={false}
+              />
+            </div>
           </div>
-          {data[0]?.value ? (
+          {(data[0]?.value || data[0]?.value === "") ? (
             <div
               className={`relative mt-2 px-4 ${
                 overrideEnabled && 'opacity-40 pointer-events-none'
               } duration-200`}
             >
               <p className="text-sm text-bunker-300">{t('dashboard:sidebar.value')}</p>
-              <DashboardInputField
-                onChangeHandler={modifyValue}
-                type="value"
-                position={data[0].pos}
-                value={data[0]?.value}
-                isDuplicate={false}
-                blurred
-              />
+              <div className='rounded-md border overflow-hidden border-mineshaft-600 bg-white/5'>
+                <DashboardInputField
+                  onChangeHandler={modifyValue}
+                  type="value"
+                  position={data[0].pos}
+                  value={data[0]?.value}
+                  isDuplicate={false}
+                  blurred
+                />
+              </div>
               <div className="absolute bg-bunker-800 right-[1.07rem] top-[1.6rem] z-50">
                 <GenerateSecretMenu modifyValue={modifyValue} position={data[0]?.pos} />
               </div>
@@ -134,7 +147,7 @@ const SideBar = ({
             </div>
           )}
           <div className="mt-4 px-4">
-            {data[0]?.value && (
+            {(data[0]?.value || data[0]?.value === "") && (
               <div className="flex flex-row items-center justify-between my-2 pl-1 pr-2">
                 <p className="text-sm text-bunker-300">{t('dashboard:sidebar.override')}</p>
                 <Toggle
@@ -150,14 +163,16 @@ const SideBar = ({
                 !overrideEnabled && 'opacity-40 pointer-events-none'
               } duration-200`}
             >
-              <DashboardInputField
-                onChangeHandler={modifyValueOverride}
-                type="value"
-                position={data[0]?.pos}
-                value={overrideEnabled ? data[0]?.valueOverride : data[0]?.value}
-                isDuplicate={false}
-                blurred
-              />
+              <div className='rounded-md border overflow-hidden border-mineshaft-600 bg-white/5'>
+                <DashboardInputField
+                  onChangeHandler={modifyValueOverride}
+                  type="value"
+                  position={data[0]?.pos}
+                  value={overrideEnabled ? data[0]?.valueOverride : data[0]?.value}
+                  isDuplicate={false}
+                  blurred
+                />
+              </div>
               <div className="absolute right-[0.57rem] top-[0.3rem] z-50">
                 <GenerateSecretMenu modifyValue={modifyValueOverride} position={data[0]?.pos} />
               </div>
@@ -171,20 +186,38 @@ const SideBar = ({
           />
         </div>
       )}
-      <div className="flex justify-start max-w-sm mt-4 px-4 mt-full mb-[4.7rem]">
-        <Button
-          text={String(t('common:save-changes'))}
-          onButtonPressed={savePush}
-          color="primary"
-          size="md"
-          active={buttonReady}
-          textDisabled="Saved"
-        />
-        <DeleteActionButton
-          onSubmit={() =>
-            deleteRow({ ids: data.map((secret) => secret.id), secretName: data[0]?.key })
-          }
-        />
+      <div className="mt-full mt-4 mb-4 flex max-w-sm flex-col justify-start space-y-2 px-4">
+        <div>
+          <Button
+            text="Compare secret across environments"
+            color="mineshaft"
+            size="md"
+            onButtonPressed={() => setCompareModal(true)}
+          />
+          <CompareSecretsModal
+            compareModal={compareModal}
+            setCompareModal={setCompareModal}
+            currentSecret={{ key: data[0]?.key, value: data[0]?.value }}
+            workspaceEnvs={workspaceEnvs}
+            selectedEnv={selectedEnv}
+            workspaceId={workspaceId}
+          />
+        </div>
+        <div className="flex">
+          <Button
+            text={String(t('common:save-changes'))}
+            onButtonPressed={savePush}
+            color="primary"
+            size="md"
+            active={buttonReady}
+            textDisabled="Saved"
+          />
+          <DeleteActionButton
+            onSubmit={() =>
+              deleteRow({ ids: data.map((secret) => secret.id), secretName: data[0]?.key })
+            }
+          />
+        </div>
       </div>
     </div>
   );

frontend/src/components/integrations/Integration.tsx

@@ -4,7 +4,7 @@ import { useRouter } from 'next/router';
 import { faArrowRight, faRotate, faX } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 // TODO: This needs to be moved from public folder
-import { contextNetlifyMapping, reverseContextNetlifyMapping } from 'public/data/frequentConstants';
+import { contextNetlifyMapping, integrationSlugNameMapping, reverseContextNetlifyMapping } from 'public/data/frequentConstants';
 
 import Button from '@app/components/basic/buttons/Button';
 import ListBox from '@app/components/basic/Listbox';
@@ -18,6 +18,8 @@ interface Integration {
   isActive: boolean;
   app: string | null;
   appId: string | null;
+  path: string | null;
+  region: string | null;
   createdAt: string;
   updatedAt: string;
   environment: string;
@@ -52,6 +54,7 @@ const IntegrationTile = ({
   environments = [],
   handleDeleteIntegration
 }: Props) => {
+
   // set initial environment. This find will only execute when component is mounting
   const [integrationEnvironment, setIntegrationEnvironment] = useState<Props['environments'][0]>(
     environments.find(({ slug }) => slug === integration.environment) || {
@@ -72,7 +75,16 @@ const IntegrationTile = ({
       });
       
       setApps(tempApps);
-      setIntegrationApp(integration.app ? integration.app : tempApps[0].name);
+      
+      if (integration?.app) {
+        setIntegrationApp(integration.app);
+      } else if (integration?.path && integration?.region) {
+        setIntegrationApp(`${integration.path} (${integration.region})`);
+      } else if (tempApps.length > 0) {
+          setIntegrationApp(tempApps[0].name)
+        } else {
+          setIntegrationApp('');
+        }
 
       switch (integration.integration) {
         case 'vercel':
@@ -174,7 +186,7 @@ const IntegrationTile = ({
     return <div />;
   };
 
-  if (!integrationApp || apps.length === 0) return <div />;
+  if (!integrationApp) return <div />;
 
   return (
     <div className="max-w-5xl p-6 mx-6 mb-8 rounded-md bg-white/5 flex justify-between">
@@ -201,7 +213,8 @@ const IntegrationTile = ({
         <div className="mr-2">
           <p className="text-gray-400 text-xs font-semibold mb-2">INTEGRATION</p>
           <div className="py-2.5 bg-white/[.07] rounded-md pl-4 pr-10 text-sm font-semibold text-gray-300">
-            {integration.integration.charAt(0).toUpperCase() + integration.integration.slice(1)}
+            {/* {integration.integration.charAt(0).toUpperCase() + integration.integration.slice(1)} */}
+            {integrationSlugNameMapping[integration.integration]}
           </div>
         </div>
         <div className="mr-2">

frontend/src/components/integrations/IntegrationSection.tsx

@@ -14,6 +14,8 @@ interface Integration {
   isActive: boolean;
   app: string | null;
   appId: string | null;
+  path: string | null;
+  region: string | null;
   createdAt: string;
   updatedAt: string;
   environment: string;

frontend/src/components/navigation/NavBarDashboard.tsx

@@ -93,7 +93,7 @@ export default function Navbar() {
   };
 
   return (
-    <div className="absolute flex flex-row justify-between w-full bg-bunker text-white border-b border-mineshaft-500 z-50">
+    <div className="flex flex-row justify-between w-full bg-bunker text-white border-b border-mineshaft-500 z-[61]">
       <div className="m-auto flex justify-start items-center mx-4">
         <div className="flex flex-row items-center">
           <div className="flex justify-center py-4">
@@ -166,8 +166,8 @@ export default function Navbar() {
             leaveFrom="transform opacity-100 scale-100"
             leaveTo="transform opacity-0 scale-95"
           >
-            <Menu.Items className="absolute right-0 mt-0.5 w-64 origin-top-right divide-y divide-gray-700 rounded-md bg-bunker border border-mineshaft-700 shadow-lg ring-1 ring-black z-20 ring-opacity-5 focus:outline-none">
-              <div className="px-1 py-1 ">
+            <Menu.Items className="absolute right-0 mt-0.5 w-64 origin-top-right divide-y divide-gray-700 rounded-md bg-bunker border border-mineshaft-700 shadow-lg ring-1 ring-black z-[65] ring-opacity-5 focus:outline-none">
+              <div className="px-1 py-1 z-[100]">
                 <div className="text-gray-400 self-start ml-2 mt-2 text-xs font-semibold tracking-wide">
                   {t('nav:user.signed-in-as')}
                 </div>

frontend/src/components/navigation/NavHeader.tsx

@@ -1,10 +1,7 @@
-import { useEffect, useState } from 'react';
-import { useRouter } from 'next/router';
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-import getOrganization from '@app/pages/api/organization/GetOrg';
-import getProjectInfo from '@app/pages/api/workspace/getProjectInfo';
+import { useOrganization, useWorkspace } from '@app/context';
 
 /**
  * This is the component at the top of almost every page.
@@ -22,40 +19,23 @@ export default function NavHeader({
   pageName: string;
   isProjectRelated?: boolean;
 }): JSX.Element {
-  const [orgName, setOrgName] = useState('');
-  const [workspaceName, setWorkspaceName] = useState('');
-  const router = useRouter();
-
-  useEffect(() => {
-    (async () => {
-      const orgId = localStorage.getItem('orgData.id');
-      const org = await getOrganization({
-        orgId: orgId || ''
-      });
-      setOrgName(org.name);
-
-      const workspace = await getProjectInfo({
-        projectId: String(router.query.id)
-      });
-      setWorkspaceName(workspace.name);
-    })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const { currentWorkspace } = useWorkspace();
+  const { currentOrg } = useOrganization();
 
   return (
-    <div className="pt-20 ml-6 flex flex-row items-center">
-      <div className="bg-primary-900 h-6 w-6 rounded-md flex items-center justify-center text-mineshaft-100 mr-2">
-        {orgName?.charAt(0)}
+    <div className="ml-6 flex flex-row items-center pt-8">
+      <div className="mr-2 flex h-6 w-6 items-center justify-center rounded-md bg-primary-900 text-mineshaft-100">
+        {currentOrg?.name?.charAt(0)}
       </div>
-      <div className="text-primary text-sm font-semibold">{orgName}</div>
+      <div className="text-sm font-semibold text-primary">{currentOrg?.name}</div>
       {isProjectRelated && (
         <>
-          <FontAwesomeIcon icon={faAngleRight} className="ml-3 text-sm text-gray-400 mr-3" />
-          <div className="font-semibold text-primary text-sm">{workspaceName}</div>
+          <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />
+          <div className="text-sm font-semibold text-primary">{currentWorkspace?.name}</div>
         </>
       )}
-      <FontAwesomeIcon icon={faAngleRight} className="ml-3 text-sm text-gray-400 mr-3" />
-      <div className="text-gray-400 text-sm">{pageName}</div>
+      <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />
+      <div className="text-sm text-gray-400">{pageName}</div>
     </div>
   );
 }

frontend/src/components/utilities/SecurityClient.ts

@@ -1,27 +1,18 @@
-import token from '@app/pages/api/auth/Token';
+import { getAuthToken, setAuthToken } from '@app/reactQuery';
 
+// depreciated: go for apiRequest module in config/api
 export default class SecurityClient {
-  static #token = '';
-
   static setToken(tokenStr: string) {
-    this.#token = tokenStr;
+    setAuthToken(tokenStr);
   }
 
   static async fetchCall(resource: RequestInfo, options?: RequestInit | undefined) {
     const req = new Request(resource, options);
 
-    if (this.#token === '') {
-      try {
-        // TODO: This should be moved to a context to do it only once when app loads
-        // this try catch saves route guard from a stuck state
-        this.setToken(await token());
-      } catch (error) {
-        console.error('Unauthorized access');
-      }
-    }
+    const token = getAuthToken();
 
-    if (this.#token) {
-      req.headers.set('Authorization', `Bearer ${this.#token}`);
+    if (token) {
+      req.headers.set('Authorization', `Bearer ${token}`);
     }
 
     return fetch(req);

frontend/src/components/utilities/attemptLogin.ts

@@ -189,8 +189,9 @@ const attemptLogin = async (
                 // eslint-disable-next-line no-template-curly-in-string
                 value: 'mongodb+srv://${DB_USERNAME}:${DB_PASSWORD}@mongodb.net',
                 valueOverride: undefined,
-                comment: 'This is an example of secret referencing.',
-                id: ''
+                comment: 'Secret referencing example',
+                id: '',
+                tags: []
               },
               {
                 pos: 1,
@@ -198,8 +199,9 @@ const attemptLogin = async (
                 value: 'OVERRIDE_THIS',
                 valueOverride: undefined,
                 comment:
-                  'This is an example of secret overriding. Your team can have a shared value of a secret, while you can override it to whatever value you need',
-                id: ''
+                  'Override secrets with personal value',
+                id: '',
+                tags: []
               },
               {
                 pos: 2,
@@ -207,8 +209,9 @@ const attemptLogin = async (
                 value: 'OVERRIDE_THIS',
                 valueOverride: undefined,
                 comment:
-                  'This is an example of secret overriding. Your team can have a shared value of a secret, while you can override it to whatever value you need',
-                id: ''
+                  'Another secret override',
+                id: '',
+                tags: []
               },
               {
                 pos: 3,
@@ -216,7 +219,8 @@ const attemptLogin = async (
                 value: 'user1234',
                 valueOverride: 'user1234',
                 comment: '',
-                id: ''
+                id: '',
+                tags: []
               },
               {
                 pos: 4,
@@ -224,7 +228,8 @@ const attemptLogin = async (
                 value: 'example_password',
                 valueOverride: 'example_password',
                 comment: '',
-                id: ''
+                id: '',
+                tags: []
               },
               {
                 pos: 5,
@@ -232,7 +237,8 @@ const attemptLogin = async (
                 value: 'example_twillio_token',
                 valueOverride: undefined,
                 comment: '',
-                id: ''
+                id: '',
+                tags: []
               },
               {
                 pos: 6,
@@ -240,7 +246,8 @@ const attemptLogin = async (
                 value: 'http://localhost:3000',
                 valueOverride: undefined,
                 comment: '',
-                id: ''
+                id: '',
+                tags: []
               }
             ];
             const secrets = await encryptSecrets({

frontend/src/components/utilities/config/index.ts

@@ -4,11 +4,13 @@ const POSTHOG_HOST =
   process.env.NEXT_PUBLIC_POSTHOG_HOST! || "https://app.posthog.com";
 const STRIPE_PRODUCT_PRO = process.env.NEXT_PUBLIC_STRIPE_PRODUCT_PRO!;
 const STRIPE_PRODUCT_STARTER = process.env.NEXT_PUBLIC_STRIPE_PRODUCT_STARTER!;
+const SITE_URL = "https://app.infisical.com";
 
 export {
   ENV,
   POSTHOG_API_KEY,
   POSTHOG_HOST,
+  SITE_URL,
   STRIPE_PRODUCT_PRO,
   STRIPE_PRODUCT_STARTER
 };

frontend/src/components/utilities/generateBackupPDF.ts

@@ -1,5 +1,7 @@
 import { jsPDF } from 'jspdf';
 
+import { SITE_URL } from './config';
+
 interface PDFProps {
   personalName: string;
   personalEmail: string;
@@ -73,7 +75,7 @@ function generateBackupPDF({ personalName, personalEmail, generatedKey }: PDFPro
   doc.roundedRect(170, 488, 375, 35, 5, 5, 'F');
   doc.setTextColor(23, 23, 23);
   doc.setFontSize(14);
-  doc.text('https://app.infisical.com/login', 180, 420);
+  doc.text(`${SITE_URL}/login`, 180, 420);
   doc.text(personalEmail, 180, 465);
   doc.text(generatedKey, 180, 510);
   doc.text('Need help? Contact us at [email protected]', 32, 575);

frontend/src/components/utilities/secrets/encryptSecrets.ts

@@ -1,6 +1,6 @@
 import crypto from 'crypto';
 
-import { SecretDataProps } from 'public/data/frequentInterfaces';
+import { SecretDataProps, Tag } from 'public/data/frequentInterfaces';
 
 import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';
 
@@ -20,6 +20,7 @@ interface EncryptedSecretProps {
   secretValueIV: string;
   secretValueTag: string;
   type: 'personal' | 'shared';
+  tags: Tag[];
 }
 
 /**
@@ -105,7 +106,8 @@ const encryptSecrets = async ({
         type:
           secret.valueOverride === undefined || secret?.value !== secret?.valueOverride
             ? 'shared'
-            : 'personal'
+            : 'personal',
+        tags: secret.tags
       };
 
       return result;

frontend/src/components/utilities/secrets/getSecretsForProject.ts

@@ -1,3 +1,5 @@
+import { Tag } from 'public/data/frequentInterfaces';
+
 import getSecrets from '@app/pages/api/files/GetSecrets';
 import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';
 
@@ -17,6 +19,7 @@ interface EncryptedSecretProps {
   secretValueIV: string;
   secretValueTag: string;
   type: 'personal' | 'shared';
+  tags: Tag[];
 }
 
 interface SecretProps {
@@ -25,12 +28,13 @@ interface SecretProps {
   type: 'personal' | 'shared';
   comment: string;
   id: string;
+  tags: Tag[];
 }
 
 interface FunctionProps {
   env: string;
-  setIsKeyAvailable: any;
-  setData: any;
+  setIsKeyAvailable?: any;
+  setData?: any;
   workspaceId: string;
 }
 
@@ -58,7 +62,9 @@ const getSecretsForProject = async ({
 
     const latestKey = await getLatestFileKey({ workspaceId });
     // This is called isKeyAvailable but what it really means is if a person is able to create new key pairs
-    setIsKeyAvailable(!latestKey ? encryptedSecrets.length === 0 : true);
+    if (typeof setIsKeyAvailable === 'function') {
+      setIsKeyAvailable(!latestKey ? encryptedSecrets.length === 0 : true);
+    }
 
     const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY') as string;
 
@@ -105,7 +111,8 @@ const getSecretsForProject = async ({
           key: plainTextKey,
           value: plainTextValue,
           type: secret.type,
-          comment: plainTextComment
+          comment: plainTextComment,
+          tags: secret.tags
         });
       });
     }
@@ -128,10 +135,16 @@ const getSecretsForProject = async ({
       )[0]?.value,
       comment: tempDecryptedSecrets.filter(
         (secret) => secret.key === key && secret.type === 'shared'
-      )[0]?.comment
+      )[0]?.comment,
+      tags: tempDecryptedSecrets.filter(
+        (secret) => secret.key === key && secret.type === 'shared'
+      )[0]?.tags
     }));
 
-    setData(result);
+    if (typeof setData === 'function') {
+      setData(result);
+    }
+  
     return result;
   } catch (error) {
     console.log('Something went wrong during accessing or decripting secrets.');

frontend/src/components/v2/Button/Button.tsx

@@ -18,14 +18,15 @@ const buttonVariants = cva(
     'font-inter font-medium',
     'cursor-pointer',
     'inline-flex items-center justify-center',
-    'relative'
+    'relative',
+    'whitespace-nowrap'
   ],
   {
     variants: {
       colorSchema: {
-        primary: ['bg-primary', 'text-black', 'border-primary hover:bg-opacity-80'],
+        primary: ['bg-primary', 'text-black', 'border-primary bg-opacity-80 hover:bg-opacity-100'],
         secondary: ['bg-mineshaft', 'text-gray-300', 'border-mineshaft hover:bg-opacity-80'],
-        danger: ['bg-red', 'text-white', 'border-red']
+        danger: ['bg-red', 'text-white', 'border-red hover:bg-opacity-90']
       },
       variant: {
         solid: '',
@@ -33,7 +34,7 @@ const buttonVariants = cva(
         plain: ''
       },
       isDisabled: {
-        true: 'bg-opacity-70 cursor-not-allowed',
+        true: 'bg-mineshaft opacity-40 cursor-not-allowed',
         false: ''
       },
       isFullWidth: {
@@ -45,9 +46,9 @@ const buttonVariants = cva(
         false: ''
       },
       size: {
-        xs: ['text-xs', 'py-1', 'px-2'],
-        sm: ['text-sm', 'py-2', 'px-4'],
-        md: ['text-md', 'py-2', 'px-6'],
+        xs: ['text-xs', 'py-1', 'px-1'],
+        sm: ['text-sm', 'py-2', 'px-2'],
+        md: ['text-md', 'py-2', 'px-4'],
         lg: ['text-lg', 'py-2', 'px-8']
       }
     },
@@ -75,7 +76,7 @@ const buttonVariants = cva(
       {
         colorSchema: 'secondary',
         variant: 'plain',
-        className: 'text-mineshaft'
+        className: 'text-mineshaft-300'
       },
       {
         colorSchema: 'danger',
@@ -101,7 +102,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       children,
       isDisabled = false,
       className = '',
-      size = 'md',
+      size = 'sm',
       variant = 'solid',
       isFullWidth,
       isRounded = true,
@@ -144,9 +145,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         )}
         <span
           className={twMerge(
-            'transition-all shrink-0 cursor-pointer',
+            'shrink-0 cursor-pointer transition-all',
             loadingToggleClass,
-            size === 'xs' ? 'mr-1' : 'mr-2'
+            leftIcon && 'ml-2',
+            size === 'xs' ? 'mr-1' : 'mr-3'
           )}
         >
           {leftIcon}
@@ -154,9 +156,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         <span className={twMerge('transition-all', loadingToggleClass)}>{children}</span>
         <span
           className={twMerge(
-            'transition-all shrink-0 cursor-pointer',
+            'shrink-0 cursor-pointer transition-all',
             loadingToggleClass,
-            size === 'xs' ? 'ml-1' : 'ml-2'
+            size === 'xs' ? 'ml-1' : 'ml-3'
           )}
         >
           {rightIcon}

frontend/src/components/v2/Card/Card.tsx

@@ -8,9 +8,9 @@ export type CardTitleProps = {
 };
 
 export const CardTitle = ({ children, className, subTitle }: CardTitleProps) => (
-  <div className={twMerge('p-6 pb-4 font-sans text-xl font-medium', className)}>
+  <div className={twMerge('px-6 py-4 mb-5 font-sans text-lg font-normal border-b border-mineshaft-600', className)}>
     {children}
-    {subTitle && <p className="py-1 text-sm font-normal text-gray-400">{subTitle}</p>}
+    {subTitle && <p className="pt-0.5 text-sm font-normal text-gray-400">{subTitle}</p>}
   </div>
 );
 
@@ -29,7 +29,7 @@ export type CardBodyProps = {
 };
 
 export const CardBody = ({ children, className }: CardBodyProps) => (
-  <div className={twMerge('p-6 pt-0', className)}>{children}</div>
+  <div className={twMerge('px-6 pb-6 pt-0', className)}>{children}</div>
 );
 
 export type CardProps = {
@@ -47,7 +47,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
       <div
         ref={ref}
         className={twMerge(
-          'flex flex-col w-full font-inter text-gray-200 bg-mineshaft-700 shadow-md',
+          'flex w-full flex-col bg-mineshaft-800 font-inter text-gray-200 shadow-md',
           isFullHeight && 'h-full',
           isRounded && 'rounded-md',
           isPlain && 'shadow-none',

frontend/src/components/v2/Checkbox/Checkbox.tsx

@@ -28,8 +28,9 @@ export const Checkbox = ({
     <div className="flex items-center font-inter text-bunker-300">
       <CheckboxPrimitive.Root
         className={twMerge(
-          'flex items-center justify-center w-5 h-5 mr-3 transition-all rounded shadow hover:bg-bunker-200 bg-bunker-300',
+          'flex items-center justify-center w-4 h-4 mr-3 transition-all rounded shadow border border-mineshaft-400 hover:bg-mineshaft-500 bg-mineshaft-600',
           isDisabled && 'bg-bunker-400 hover:bg-bunker-400',
+          isChecked && 'bg-primary hover:bg-primary',
           className
         )}
         required={isRequired}

frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useState } from 'react';
+
+import { useToggle } from '@app/hooks';
+
+import { Button } from '../Button';
+import { FormControl } from '../FormControl';
+import { Input } from '../Input';
+import { Modal, ModalContent } from '../Modal';
+
+type Props = {
+  isOpen?: boolean;
+  onClose?: () => void;
+  onChange?: (isOpen: boolean) => void;
+  deleteKey: string;
+  title: string;
+  onDeleteApproved: () => Promise<void>;
+};
+
+export const DeleteActionModal = ({
+  isOpen,
+  onClose,
+  onChange,
+  deleteKey,
+  onDeleteApproved,
+  title
+}: Props): JSX.Element => {
+  const [inputData, setInputData] = useState('');
+  const [isLoading, setIsLoading] = useToggle();
+
+  useEffect(() => {
+    setInputData('');
+  }, [isOpen]);
+
+  const onDelete = async () => {
+    setIsLoading.on();
+    try {
+      await onDeleteApproved();
+    } catch {
+      setIsLoading.off();
+    } finally {
+      setIsLoading.off();
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onOpenChange={(isOpenState) => {
+        setInputData('');
+        if (onChange) onChange(isOpenState);
+      }}
+    >
+      <ModalContent
+        title={title}
+        subTitle="This action is irreversible!"
+        footerContent={
+          <div className="flex items-center">
+            <Button
+              className="mr-4"
+              colorSchema="danger"
+              isDisabled={!(deleteKey === inputData) || isLoading}
+              onClick={onDelete}
+              isLoading={isLoading}
+            >
+              Delete
+            </Button>
+            <Button variant="plain" colorSchema="secondary" onClick={onClose}>
+              Cancel
+            </Button>
+          </div>
+        }
+        onClose={onClose}
+      >
+        <form>
+          <FormControl
+            label={
+              <div className="pb-2 text-sm">
+                Type <span className="font-bold">{deleteKey}</span> to delete the resource
+              </div>
+            }
+            className="mb-4"
+          >
+            <Input value={inputData} onChange={(e) => setInputData(e.target.value)} />
+          </FormControl>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/components/v2/DeleteActionModal/index.tsx

@@ -0,0 +1 @@
+export { DeleteActionModal } from './DeleteActionModal';

frontend/src/components/v2/FormControl/FormControl.tsx

@@ -11,7 +11,7 @@ export type FormLabelProps = {
 };
 
 export const FormLabel = ({ id, label, isRequired }: FormLabelProps) => (
-  <Label.Root className="text-mineshaft-300 text-sm font-medium block mb-1 ml-0.5" htmlFor={id}>
+  <Label.Root className="mb-1 ml-0.5 block text-sm font-medium text-mineshaft-300" htmlFor={id}>
     {label}
     {isRequired && <span className="ml-1 text-red">*</span>}
   </Label.Root>
@@ -25,7 +25,7 @@ export type FormHelperTextProps = {
 export const FormHelperText = ({ isError, text }: FormHelperTextProps) => (
   <div
     className={twMerge(
-      'text-xs font-inter flex items-center opacity-90 text-mineshaft-300 mt-2',
+      'mt-2 flex items-center font-inter text-xs text-mineshaft-300 opacity-90',
       isError && 'text-red-600'
     )}
   >
@@ -46,6 +46,7 @@ export type FormControlProps = {
   helperText?: ReactNode;
   errorText?: ReactNode;
   children: JSX.Element;
+  className?: string;
 };
 
 export const FormControl = ({
@@ -55,10 +56,11 @@ export const FormControl = ({
   helperText,
   errorText,
   id,
-  isError
+  isError,
+  className
 }: FormControlProps): JSX.Element => {
   return (
-    <div>
+    <div className={twMerge('mb-4', className)}>
       {typeof label === 'string' ? (
         <FormLabel label={label} isRequired={isRequired} id={id} />
       ) : (

frontend/src/components/v2/HoverCard/HoverCard.tsx

@@ -0,0 +1,42 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as HoverCard from '@radix-ui/react-hover-card';
+
+type Props = {
+  text: string;
+  icon: IconProp;
+  color: string;
+};
+
+export type HoverCardProps = Props;
+
+export const HoverObject = ({
+    text,
+    icon,
+    color
+  }: Props): JSX.Element => (
+  <HoverCard.Root openDelay={50}>
+    <HoverCard.Trigger asChild>
+      <a
+        className="ImageTrigger z-20"
+      >
+        <FontAwesomeIcon icon={icon} className={`text-${color}`} />
+      </a>
+    </HoverCard.Trigger>
+    <HoverCard.Portal>
+      <HoverCard.Content className="HoverCardContent z-[300]" sideOffset={5}>
+        <div className='bg-bunker-700 border border-mineshaft-600 p-2 rounded-md drop-shadow-xl text-bunker-300'>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 15 }}>
+            <div>
+              <div className="Text bold">{text}</div>
+            </div>
+          </div>
+        </div>
+
+        <HoverCard.Arrow className="border-mineshaft-600" />
+      </HoverCard.Content>
+    </HoverCard.Portal>
+  </HoverCard.Root>
+);
+
+HoverObject.displayName = 'HoverCard';

frontend/src/components/v2/HoverCard/index.tsx

@@ -0,0 +1,2 @@
+export type { HoverCardProps } from './HoverCard';
+export { HoverObject } from './HoverCard';

frontend/src/components/v2/IconButton/IconButton.tsx

@@ -14,7 +14,7 @@ const iconButtonVariants = cva(
   [
     'button',
     'transition-all',
-    'font-inter font-medium',
+    'font-inter font-medium user-select-none',
     'cursor-pointer',
     'inline-flex items-center justify-center',
     'relative'
@@ -22,9 +22,9 @@ const iconButtonVariants = cva(
   {
     variants: {
       colorSchema: {
-        primary: ['bg-primary', 'text-black', 'border-primary hover:bg-opacity-80'],
-        secondary: ['bg-mineshaft', 'text-gray-300', 'border-mineshaft hover:bg-opacity-80'],
-        danger: ['bg-red', 'text-white', 'border-red']
+        primary: ['bg-primary', 'text-black', 'border-primary hover:opacity-80'],
+        secondary: ['bg-mineshaft', 'text-gray-300', 'border-mineshaft hover:bg-bunker-400'],
+        danger: ['bg-[#973939] hover:bg-red', 'text-white', 'border-red']
       },
       variant: {
         solid: '',
@@ -40,10 +40,10 @@ const iconButtonVariants = cva(
         false: ''
       },
       size: {
-        xs: ['text-xs', 'py-1', 'px-2'],
-        sm: ['text-sm', 'py-2', 'px-3'],
-        md: ['text-md', 'py-3', 'px-4'],
-        lg: ['text-lg', 'py-3', 'px-6']
+        xs: ['text-xs', 'py-2', 'px-2'],
+        sm: ['text-sm', 'py-3', 'px-3'],
+        md: ['text-md', 'py-4', 'px-4'],
+        lg: ['text-lg', 'py-6', 'px-6']
       }
     },
     compoundVariants: [
@@ -80,7 +80,7 @@ const iconButtonVariants = cva(
       {
         colorSchema: ['danger', 'primary', 'secondary'],
         variant: ['plain'],
-        className: 'bg-transparent py-1 px-1'
+        className: 'bg-transparent py-1 px-1 text-bunker-300'
       }
     ]
   }
@@ -97,7 +97,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
       ariaLabel,
       isDisabled = false,
       className,
-      size = 'md',
+      size = 'sm',
       variant = 'solid',
       isRounded = true,
       colorSchema = 'primary',

frontend/src/components/v2/Input/Input.tsx

@@ -8,10 +8,11 @@ type Props = {
   isRequired?: boolean;
   leftIcon?: ReactNode;
   rightIcon?: ReactNode;
+  isDisabled?: boolean;
 };
 
 const inputVariants = cva(
-  'input w-full py-2 text-gray-400 placeholder-gray-500 placeholder-opacity-50',
+  'input w-full py-2 text-gray-400 placeholder-gray-500 placeholder-opacity-50 outline-none focus:ring-2',
   {
     variants: {
       size: {
@@ -46,7 +47,7 @@ const inputParentContainerVariants = cva('inline-flex font-inter items-center bo
     },
     isError: {
       true: 'border-red',
-      false: 'border-mineshaft-400'
+      false: 'border-mineshaft-500'
     },
     isFullWidth: {
       true: 'w-full',
@@ -70,6 +71,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       className,
       isRounded = true,
       isFullWidth = true,
+      isDisabled,
       isError = false,
       isRequired,
       leftIcon,
@@ -87,9 +89,10 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           {...props}
           required={isRequired}
           ref={ref}
+          disabled={isDisabled}
           className={twMerge(
-            leftIcon ? 'pl-9' : 'pl-4',
-            rightIcon ? 'pr-9' : 'pr-4',
+            leftIcon ? 'pl-9' : 'pl-2.5',
+            rightIcon ? 'pr-9' : 'pr-2.5',
             inputVariants({ className, isError, size, isRounded, variant })
           )}
         />

frontend/src/components/v2/Menu/Menu.tsx

@@ -31,18 +31,20 @@ export const MenuItem = <T extends ElementType = 'button'>({
   as: Item = 'button',
   description,
   // wrapping in forward ref with generic component causes the loss of ts definitions on props
-  inputRef
+  inputRef,
+  ...props
 }: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => (
   <li
     className={twMerge(
-      'px-2 py-3 font-inter flex flex-col text-sm text-white transition-all rounded cursor-pointer hover:bg-gray-700',
-      isSelected && 'text-primary',
-      isDisabled && 'text-gray-500 hover:bg-transparent cursor-not-allowed',
+      'px-1 py-2.5 mt-0.5 font-inter flex flex-col text-sm text-bunker-100 transition-all rounded cursor-pointer hover:bg-mineshaft-600 duration-50',
+      isSelected && 'bg-mineshaft-500',
+      isDisabled && 'hover:bg-transparent cursor-not-allowed',
       className
     )}
   >
-    <Item type="button" role="menuitem" class="flex items-center" ref={inputRef}>
-      {icon && <span className="mr-2">{icon}</span>}
+    <Item type="button" role="menuitem" className="flex items-center relative" ref={inputRef} {...props}>
+      <div className={`${isSelected ? "visisble" : "invisible"} absolute w-[0.25rem] rounded-md h-8 bg-primary`}/>
+      {icon && <span className="mr-3 ml-4 w-5">{icon}</span>}
       <span className="flex-grow text-left">{children}</span>
     </Item>
     {description && <span className="mt-2 text-xs">{description}</span>}

frontend/src/components/v2/Modal/Modal.tsx

@@ -11,33 +11,34 @@ export type ModalContentProps = DialogPrimitive.DialogContentProps & {
   title?: ReactNode;
   subTitle?: string;
   footerContent?: ReactNode;
+  onClose?: () => void;
 };
 
 export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
-  ({ children, title, subTitle, className, footerContent, ...props }, forwardedRef) => (
+  ({ children, title, subTitle, className, footerContent, onClose, ...props }, forwardedRef) => (
     <DialogPrimitive.Portal>
       <DialogPrimitive.Overlay
-        className="fixed inset-0 w-full h-full animate-fadeIn"
-        style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
+        className="fixed inset-0 h-full w-full animate-fadeIn z-[70]"
+        style={{ backgroundColor: 'rgba(0, 0, 0, 0.7)' }}
       />
       <DialogPrimitive.Content {...props} ref={forwardedRef}>
         <Card
           isRounded
           className={twMerge(
-            'fixed max-w-md animate-popIn top-1/2 left-1/2 -translate-y-2/4 -translate-x-2/4',
+            'fixed top-1/2 left-1/2 max-w-lg border border-mineshaft-600 -translate-y-2/4 -translate-x-2/4 animate-popIn drop-shadow-2xl z-[90]',
             className
           )}
         >
           {title && <CardTitle subTitle={subTitle}>{title}</CardTitle>}
           <CardBody>{children}</CardBody>
           {footerContent && <CardFooter>{footerContent}</CardFooter>}
-          <DialogPrimitive.Close aria-label="Close" asChild>
+          <DialogPrimitive.Close aria-label="Close" asChild onClick={onClose}>
             <IconButton
               variant="plain"
               ariaLabel="close"
-              className="absolute top-2.5 right-2.5 text-white hover:bg-gray-600 rounded"
+              className="absolute top-4 right-6 rounded text-bunker-400 hover:text-bunker-50"
             >
-              <FontAwesomeIcon icon={faTimes} size="sm" className="cursor-pointer" />
+              <FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" />
             </IconButton>
           </DialogPrimitive.Close>
         </Card>
@@ -55,3 +56,6 @@ export const Modal = ({ isOpen, ...props }: ModalProps) => (
 
 export const ModalTrigger = DialogPrimitive.Trigger;
 export type ModalTriggerProps = DialogPrimitive.DialogTriggerProps;
+
+export const ModalClose = DialogPrimitive.Close;
+export type ModalCloseProps = DialogPrimitive.DialogCloseProps;

frontend/src/components/v2/Modal/index.tsx

@@ -1,2 +1,2 @@
-export type { ModalContentProps, ModalProps, ModalTriggerProps } from './Modal';
-export { Modal, ModalContent, ModalTrigger } from './Modal';
+export type { ModalCloseProps, ModalContentProps, ModalProps, ModalTriggerProps } from './Modal';
+export { Modal, ModalClose, ModalContent, ModalTrigger } from './Modal';

frontend/src/components/v2/Select/Select.tsx

@@ -10,39 +10,48 @@ type Props = {
   children: ReactNode;
   placeholder?: string;
   className?: string;
+  dropdownContainerClassName?: string;
   isLoading?: boolean;
+  position?: 'item-aligned' | 'popper';
 };
 
 export type SelectProps = SelectPrimitive.SelectProps & Props;
 
 export const Select = forwardRef<HTMLButtonElement, SelectProps>(
-  ({ children, placeholder, className, isLoading, ...props }, ref): JSX.Element => {
+  (
+    { children, placeholder, className, isLoading, dropdownContainerClassName, position, ...props },
+    ref
+  ): JSX.Element => {
     return (
       <SelectPrimitive.Root {...props}>
         <SelectPrimitive.Trigger
           ref={ref}
           className={twMerge(
-            `inline-flex items-center justify-between data-[placeholder]:text-gray-500
-            px-4 py-2.5 font-inter text-sm text-white rounded-md bg-mineshaft-800`,
+            `inline-flex items-center justify-between rounded-md
+            bg-bunker-800 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-gray-500`,
             className
           )}
         >
           <SelectPrimitive.Value placeholder={placeholder} />
-          <SelectPrimitive.Icon className="ml-3">
-            <FontAwesomeIcon icon={faChevronDown} size="sm" />
-          </SelectPrimitive.Icon>
+          {!props.disabled && (
+            <SelectPrimitive.Icon className="ml-3">
+              <FontAwesomeIcon icon={faChevronDown} size="sm" />
+            </SelectPrimitive.Icon>
+          )}
         </SelectPrimitive.Trigger>
         <SelectPrimitive.Portal>
           <SelectPrimitive.Content
-            position="popper"
-            sideOffset={5}
-            className="overflow-hidden text-white rounded-md shadow-md font-inter bg-mineshaft-800"
+            className={twMerge(
+              'relative left-4 top-1 overflow-hidden rounded-md bg-bunker-800 font-inter text-bunker-100 shadow-md z-[100]',
+              dropdownContainerClassName
+            )}
+            position={position}
             style={{ width: 'var(--radix-select-trigger-width)' }}
           >
             <SelectPrimitive.ScrollUpButton>
               <FontAwesomeIcon icon={faChevronUp} size="sm" />
             </SelectPrimitive.ScrollUpButton>
-            <SelectPrimitive.Viewport className="p-2">
+            <SelectPrimitive.Viewport className="p-1">
               {isLoading ? (
                 <div className="flex items-center justify-center">
                   <Spinner size="xs" />
@@ -75,17 +84,17 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
       <SelectPrimitive.Item
         {...props}
         className={twMerge(
-          `text-sm rounded-sm transition-all hover:text-primary 
-          hover:bg-mineshaft-700 flex items-center pl-10 pr-4 py-2 cursor-pointer 
-          select-none outline-none relative`,
-          isSelected && 'text-primary',
-          isDisabled && 'text-gray-600 hover:bg-transparent cursor-not-allowed hover:text-gray-600',
+          `relative flex cursor-pointer
+          select-none items-center rounded-md py-2 pl-10 pr-4 mb-0.5 text-sm
+          outline-none transition-all hover:bg-mineshaft-500`,
+          isSelected && 'bg-primary',
+          isDisabled && 'cursor-not-allowed text-gray-600 hover:bg-transparent hover:text-gray-600',
           className
         )}
         ref={forwardedRef}
       >
-        <SelectPrimitive.ItemIndicator className="absolute left-2">
-          <FontAwesomeIcon icon={faCheck} size="sm" />
+        <SelectPrimitive.ItemIndicator className="absolute left-3.5 text-primary">
+          <FontAwesomeIcon icon={faCheck} />
         </SelectPrimitive.ItemIndicator>
         <SelectPrimitive.ItemText className="">{children}</SelectPrimitive.ItemText>
       </SelectPrimitive.Item>

frontend/src/components/v2/Table/Table.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode, TdHTMLAttributes } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 export type TableContainerProps = {
@@ -14,7 +14,7 @@ export const TableContainer = ({
 }: TableContainerProps): JSX.Element => (
   <div
     className={twMerge(
-      'overflow-x-auto font-inter shadow-md relative border border-solid border-mineshaft-700',
+      'relative w-full overflow-x-auto border border-solid border-mineshaft-700 font-inter shadow-md',
       isRounded && 'rounded-md',
       className
     )}
@@ -32,7 +32,7 @@ export type TableProps = {
 export const Table = ({ children, className }: TableProps): JSX.Element => (
   <table
     className={twMerge(
-      'bg-bunker-800 p-2 roun  text-gray-300 w-full text-sm text-left rounded-md',
+      'w-full rounded rounded-md  bg-bunker-800 p-2 text-left text-sm text-gray-300',
       className
     )}
   >
@@ -47,7 +47,7 @@ export type THeadProps = {
 };
 
 export const THead = ({ children, className }: THeadProps): JSX.Element => (
-  <thead className={twMerge('text-xs bg-bunker text-bunker-300 uppercase', className)}>
+  <thead className={twMerge('bg-bunker text-xs uppercase text-bunker-300', className)}>
     {children}
   </thead>
 );
@@ -56,20 +56,22 @@ export const THead = ({ children, className }: THeadProps): JSX.Element => (
 export type TrProps = {
   children: ReactNode;
   className?: string;
-};
+} & HTMLAttributes<HTMLTableRowElement>;
 
-export const Tr = ({ children, className }: TrProps): JSX.Element => (
-  <tr className={twMerge('border border-solid border-mineshaft-700', className)}>{children}</tr>
+export const Tr = ({ children, className, ...props }: TrProps): JSX.Element => (
+  <tr className={twMerge('border border-solid border-mineshaft-700 hover:bg-bunker-700', className)} {...props}>
+    {children}
+  </tr>
 );
 
 // table head columns
 export type ThProps = {
-  children: ReactNode;
+  children?: ReactNode;
   className?: string;
 };
 
 export const Th = ({ children, className }: ThProps): JSX.Element => (
-  <th className={twMerge('px-6 py-3 font-medium', className)}>{children}</th>
+  <th className={twMerge('px-5 pt-4 pb-3.5 font-medium font-semibold bg-bunker-500', className)}>{children}</th>
 );
 
 // table body
@@ -84,10 +86,12 @@ export const TBody = ({ children, className }: TBodyProps): JSX.Element => (
 
 // table body columns
 export type TdProps = {
-  children: ReactNode;
+  children?: ReactNode;
   className?: string;
-};
+} & TdHTMLAttributes<HTMLTableCellElement>;
 
-export const Td = ({ children, className }: TdProps): JSX.Element => (
-  <td className={twMerge('text-left px-6 py-3', className)}>{children}</td>
+export const Td = ({ children, className, ...props }: TdProps): JSX.Element => (
+  <td className={twMerge('px-5 py-2 text-left', className)} {...props}>
+    {children}
+  </td>
 );

frontend/src/components/v2/UpgradePlanModal/UpgradePlanModal.tsx

@@ -0,0 +1,36 @@
+import Link from 'next/link';
+
+import { Button } from '../Button';
+import { Modal, ModalClose, ModalContent } from '../Modal';
+
+type Props = {
+  isOpen?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+  text: string;
+};
+
+export const UpgradePlanModal = ({ text, isOpen, onOpenChange }: Props): JSX.Element => (
+  <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+    <ModalContent
+      title="Unleash Infisical's Full Power"
+      footerContent={[
+        <Link
+          href={`/settings/billing/${localStorage.getItem('projectData.id') as string}`}
+          key="upgrade-plan"
+        >
+          <Button className="mr-4">Upgrade Plan</Button>
+        </Link>,
+        <ModalClose asChild key="upgrade-plan-cancel">
+          <Button colorSchema="secondary" variant="plain">
+            Cancel
+          </Button>
+        </ModalClose>
+      ]}
+    >
+      <p className="mb-4 text-bunker-300">{text}</p>
+      <p className="font-medium text-bunker-300">
+        Upgrade and get access to this, as well as to other powerful enhancements.
+      </p>
+    </ModalContent>
+  </Modal>
+);

frontend/src/components/v2/UpgradePlanModal/index.tsx

@@ -0,0 +1 @@
+export { UpgradePlanModal } from './UpgradePlanModal';

frontend/src/components/v2/index.tsx

@@ -1,6 +1,7 @@
 export * from './Button';
 export * from './Card';
 export * from './Checkbox';
+export * from './DeleteActionModal';
 export * from './Dropdown';
 export * from './FormControl';
 export * from './IconButton';
@@ -12,3 +13,4 @@ export * from './Spinner';
 export * from './Switch';
 export * from './Table';
 export * from './TextArea';
+export * from './UpgradePlanModal';

frontend/src/config/request.ts

@@ -0,0 +1,19 @@
+import axios from 'axios';
+
+import { getAuthToken } from '@app/reactQuery';
+
+export const apiRequest = axios.create({
+  baseURL: '/',
+  headers: {
+    'Content-Type': 'application/json'
+  }
+});
+
+apiRequest.interceptors.request.use((config) => {
+  const token = getAuthToken();
+  if (token && config.headers) {
+    // eslint-disable-next-line no-param-reassign
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});

frontend/src/const.ts

@@ -15,10 +15,32 @@ export const publicPaths = [
   `/privacy`,
   `/terms`,
   `/subprocessors`,
+  `/verify-email`,
+  `/password-reset`
 ];
 
 export const languageMap = {
-  en: "English",
-  ko: "한국어",
-  fr: "Français",
+  en: 'English',
+  ko: '한국어',
+  fr: 'Français'
 };
+
+interface Mapping {
+  [key: string]: string;
+}
+
+const plansDev: Mapping = {
+  starter: 'prod_Mb4ATFT5QAHoPM',
+  team: 'prod_NEpD2WMXUS2eDn',
+  professional: 'prod_Mb4CetZ2jE7jdl',
+  enterprise: 'licence_key_required'
+};
+
+const plansProd: Mapping = {
+  starter: 'prod_Mb8oR5XNwyFTul',
+  team: 'prod_NEp7fAB3UJWK6A',
+  professional: 'prod_Mb8pUIpA0OUi5N',
+  enterprise: 'licence_key_required'
+};
+
+export const plans = plansProd || plansDev;

frontend/src/context/AuthContext/AuthContext.tsx

@@ -0,0 +1,49 @@
+import { ReactNode, useEffect } from 'react';
+import { useRouter } from 'next/router';
+
+import { publicPaths } from '@app/const';
+import { useToggle } from '@app/hooks';
+import { useGetAuthToken } from '@app/hooks/api';
+import { isLoggedIn } from '@app/reactQuery';
+
+type Props = {
+  children: ReactNode;
+};
+
+// TODO(akhilmhdh): Using react-simple-animate from hard dom offloading
+// smoother dom offloading needs to be done
+
+// Authentication controller
+// Does route checking
+// Provide a context for whole app to notify user is authorized or not
+export const AuthProvider = ({ children }: Props): JSX.Element => {
+  const { isLoading } = useGetAuthToken();
+  const { pathname, push } = useRouter();
+  const [isReady, setIsReady] = useToggle(false);
+
+  useEffect(() => {
+    // check if loading of auth is done
+    if (!isLoading) {
+      // not a public path and not authenticated kick to login page
+      if (!publicPaths.includes(pathname) && !isLoggedIn()) {
+        push('/login').then(() => {
+          setIsReady.on();
+        });
+      } else {
+        // else good to go
+        setIsReady.on();
+      }
+    }
+  }, [pathname, isLoading]);
+
+  // wait for app to load the auth state
+  if (isLoading || !isReady) {
+    return (
+      <div className="flex items-center justify-center w-screen h-screen bg-bunker-800">
+        <img src="/images/loading/loading.gif" height={70} width={120} alt="infisical loading indicator" />
+      </div>
+    );
+  }
+
+  return children as JSX.Element;
+};

frontend/src/context/AuthContext/index.tsx

@@ -0,0 +1 @@
+export { AuthProvider } from './AuthContext';

frontend/src/context/OrganizationContext/OrganizationContext.tsx

@@ -0,0 +1,46 @@
+import { createContext, ReactNode, useContext, useMemo } from 'react';
+
+import { useGetOrganization } from '@app/hooks/api';
+import { Organization } from '@app/hooks/api/types';
+
+import { useWorkspace } from '../WorkspaceContext';
+
+type TOrgContext = {
+  orgs?: Organization[];
+  currentOrg?: Organization;
+  isLoading: boolean;
+};
+
+const OrgContext = createContext<TOrgContext | null>(null);
+
+type Props = {
+  children: ReactNode;
+};
+
+export const OrgProvider = ({ children }: Props): JSX.Element => {
+  const { currentWorkspace } = useWorkspace();
+  const { data: userOrgs, isLoading } = useGetOrganization();
+
+  const currentWsOrgID = currentWorkspace?.organization;
+
+  // memorize the workspace details for the context
+  const value = useMemo<TOrgContext>(
+    () => ({
+      orgs: userOrgs,
+      currentOrg: (userOrgs || []).find(({ _id }) => _id === currentWsOrgID),
+      isLoading
+    }),
+    [currentWsOrgID, userOrgs, isLoading]
+  );
+
+  return <OrgContext.Provider value={value}>{children}</OrgContext.Provider>;
+};
+
+export const useOrganization = () => {
+  const ctx = useContext(OrgContext);
+  if (!ctx) {
+    throw new Error('useOrganization to be used within <OrgContext.Provider>');
+  }
+
+  return ctx;
+};

frontend/src/context/OrganizationContext/index.tsx

@@ -0,0 +1 @@
+export { OrgProvider, useOrganization } from './OrganizationContext';

frontend/src/context/SubscriptionContext/SubscriptionContext.tsx

@@ -0,0 +1,47 @@
+import { createContext, ReactNode, useContext, useMemo } from 'react';
+
+import { useGetOrgSubscription } from '@app/hooks/api';
+import { GetSubscriptionPlan } from '@app/hooks/api/types';
+
+import { useWorkspace } from '../WorkspaceContext';
+// import { Subscription } from '@app/hooks/api/workspace/types';
+
+type TSubscriptionContext = {
+  subscription?: GetSubscriptionPlan;
+  subscriptionPlan: string;
+  isLoading: boolean;
+};
+
+const SubscriptionContext = createContext<TSubscriptionContext | null>(null);
+
+type Props = {
+  children: ReactNode;
+};
+
+export const SubscriptionProvider = ({ children }: Props): JSX.Element => {
+  const { currentWorkspace } = useWorkspace();
+  const { data, isLoading } = useGetOrgSubscription({
+    orgID: currentWorkspace?.organization || ''
+  });
+
+  // memorize the workspace details for the context
+  const value = useMemo<TSubscriptionContext>(
+    () => ({
+      subscription: data,
+      subscriptionPlan: data?.data?.[0]?.plan?.product || '',
+      isLoading
+    }),
+    [data, isLoading]
+  );
+
+  return <SubscriptionContext.Provider value={value}>{children}</SubscriptionContext.Provider>;
+};
+
+export const useSubscription = () => {
+  const ctx = useContext(SubscriptionContext);
+  if (!ctx) {
+    throw new Error('useSubscription has to be used within <SubscriptionContext.Provider>');
+  }
+
+  return ctx;
+};

frontend/src/context/SubscriptionContext/index.tsx

@@ -0,0 +1 @@
+export { SubscriptionProvider, useSubscription } from './SubscriptionContext';

frontend/src/context/UserContext/UserContext.tsx

@@ -0,0 +1,38 @@
+import { createContext, ReactNode, useContext, useMemo } from 'react';
+
+import { useGetUser } from '@app/hooks/api';
+import { User } from '@app/hooks/api/types';
+
+type TUserContext = {
+  user: User;
+  isLoading: boolean;
+};
+
+const UserContext = createContext<TUserContext | null>(null);
+
+type Props = {
+  children: ReactNode;
+};
+
+export const UserProvider = ({ children }: Props): JSX.Element => {
+  const { data, isLoading } = useGetUser();
+
+  // memorize the workspace details for the context
+  const value = useMemo<TUserContext>(() => {
+    return {
+      user: data!,
+      isLoading
+    };
+  }, [data, isLoading]);
+
+  return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
+};
+
+export const useUser = () => {
+  const ctx = useContext(UserContext);
+  if (!ctx) {
+    throw new Error('useUser has to be used within <UserContext.Provider>');
+  }
+
+  return ctx;
+};

frontend/src/context/UserContext/index.tsx

@@ -0,0 +1 @@
+export { UserProvider, useUser } from './UserContext';

frontend/src/context/WorkspaceContext/WorkspaceContext.tsx

@@ -0,0 +1,44 @@
+import { createContext, ReactNode, useContext, useMemo } from 'react';
+import { useRouter } from 'next/router';
+
+import { useGetUserWorkspaces } from '@app/hooks/api';
+import { Workspace } from '@app/hooks/api/workspace/types';
+
+type TWorkspaceContext = {
+  workspaces: Workspace[];
+  currentWorkspace?: Workspace;
+  isLoading: boolean;
+};
+
+const WorkspaceContext = createContext<TWorkspaceContext | null>(null);
+
+type Props = {
+  children: ReactNode;
+};
+
+export const WorkspaceProvider = ({ children }: Props): JSX.Element => {
+  const { data: ws, isLoading } = useGetUserWorkspaces();
+  const router = useRouter();
+  const workspaceId = router.query.id;
+
+  // memorize the workspace details for the context
+  const value = useMemo<TWorkspaceContext>(() => {
+    const wsId = workspaceId || localStorage.getItem('projectData.id');
+    return {
+      workspaces: ws || [],
+      currentWorkspace: (ws || []).find(({ _id: id }) => id === wsId),
+      isLoading
+    };
+  }, [ws, workspaceId, isLoading]);
+
+  return <WorkspaceContext.Provider value={value}>{children}</WorkspaceContext.Provider>;
+};
+
+export const useWorkspace = () => {
+  const ctx = useContext(WorkspaceContext);
+  if (!ctx) {
+    throw new Error('useWorkspace has to be used within <WorkspaceContext.Provider>');
+  }
+
+  return ctx;
+};

frontend/src/context/WorkspaceContext/index.tsx

@@ -0,0 +1 @@
+export { useWorkspace, WorkspaceProvider } from './WorkspaceContext';

frontend/src/context/index.tsx

@@ -0,0 +1,5 @@
+export { AuthProvider } from './AuthContext';
+export { OrgProvider, useOrganization } from './OrganizationContext';
+export { SubscriptionProvider, useSubscription } from './SubscriptionContext';
+export { UserProvider, useUser } from './UserContext';
+export { useWorkspace, WorkspaceProvider } from './WorkspaceContext';

frontend/src/ee/api/memberships/UpdateUserProjectPermission.ts

@@ -0,0 +1,39 @@
+import SecurityClient from '@app/components/utilities/SecurityClient';
+
+/**
+ * This function updates user permissions for a certain environment in a project
+ * @param {object} obj
+ * @param {string} obj.membershipId - membershipId of a certain user in a project
+ * @param {*[]} obj.denials - permissions that we are prohibitting users to do
+ * @returns
+ */
+const updateUserProjectPermission = async ({
+  membershipId,
+  denials
+}: {
+  membershipId: string;
+  denials: {
+    ability: string;
+    environmentSlug: string;
+  }[]
+}) =>
+  SecurityClient.fetchCall(`/api/v1/membership/${membershipId}/deny-permissions`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+      permissions: denials
+    })
+  }).then(async (res) => {
+    console.log({
+      permissions: denials
+    }, res)
+    if (res && res.status === 200) {
+      return res.json();
+    }
+    console.log('Failed to update user permissions for a certain environment in a project');
+    return undefined;
+  });
+
+export default updateUserProjectPermission;

frontend/src/ee/components/ActivitySideBar.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
-import { faX } from '@fortawesome/free-solid-svg-icons';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import getActionData from '@app/ee/api/secrets/GetActionData';
@@ -154,7 +154,7 @@ const ActivitySideBar = ({ toggleSidebar, currentAction }: SideBarProps) => {
               tabIndex={0}
               onClick={() => toggleSidebar('')}
             >
-              <FontAwesomeIcon icon={faX} className="w-4 h-4 text-bunker-300 cursor-pointer" />
+              <FontAwesomeIcon icon={faXmark} className="w-4 h-4 text-bunker-300 cursor-pointer" />
             </div>
           </div>
           <div className="flex flex-col px-4">
@@ -163,7 +163,7 @@ const ActivitySideBar = ({ toggleSidebar, currentAction }: SideBarProps) => {
               actionMetaData?.name === 'deleteSecrets') &&
               actionData?.map((item, id) => (
                 <div key={`secret.${id + 1}`}>
-                  <div className="text-xs text-bunker-200 mt-4 pl-1">
+                  <div className="text-xs text-bunker-200 mt-4 pl-1 ph-no-capture">
                     {item.newSecretVersion.key}
                   </div>
                   <DashboardInputField
@@ -183,7 +183,7 @@ const ActivitySideBar = ({ toggleSidebar, currentAction }: SideBarProps) => {
                     {item.newSecretVersion.key}
                   </div>
                   <div className="text-bunker-100 font-mono rounded-md overflow-hidden">
-                    <div className="bg-red/30 px-2">
+                    <div className="bg-red/30 px-2 ph-no-capture">
                       -{' '}
                       {patienceDiff(
                         item.oldSecretVersion.value.split(''),
@@ -201,7 +201,7 @@ const ActivitySideBar = ({ toggleSidebar, currentAction }: SideBarProps) => {
                           )
                       )}
                     </div>
-                    <div className="bg-green-500/30 px-2">
+                    <div className="bg-green-500/30 px-2 ph-no-capture">
                       +{' '}
                       {patienceDiff(
                         item.oldSecretVersion.value.split(''),

frontend/src/ee/components/PITRecoverySidebar.tsx

@@ -3,8 +3,9 @@ import { useEffect, useState } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
-import { faX } from '@fortawesome/free-solid-svg-icons';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Tag } from 'public/data/frequentInterfaces';
 
 import Button from '@app/components/basic/buttons/Button';
 import {
@@ -48,6 +49,7 @@ interface EncrypetedSecretVersionListProps {
   secretKeyTag: string;
   environment: string;
   type: 'personal' | 'shared';
+  tags: Tag[];
 }
 
 /**
@@ -106,6 +108,7 @@ const PITRecoverySidebar = ({ toggleSidebar, setSnapshotData, chosenSnapshot }:
         pos,
         type: encryptedSecretVersion.type,
         environment: encryptedSecretVersion.environment,
+        tags: encryptedSecretVersion.tags,
         key: decryptSymmetric({
           ciphertext: encryptedSecretVersion.secretKeyCiphertext,
           iv: encryptedSecretVersion.secretKeyIV,
@@ -134,6 +137,9 @@ const PITRecoverySidebar = ({ toggleSidebar, setSnapshotData, chosenSnapshot }:
       environment: decryptedSecretVersions.filter(
         (secret: SecretDataProps) => secret.key === key && secret.type === 'shared'
       )[0].environment,
+      tags: decryptedSecretVersions.filter(
+        (secret: SecretDataProps) => secret.key === key && secret.type === 'shared'
+      )[0].tags,
       value: decryptedSecretVersions.filter(
         (secret: SecretDataProps) => secret.key === key && secret.type === 'shared'
       )[0]?.value,
@@ -155,7 +161,7 @@ const PITRecoverySidebar = ({ toggleSidebar, setSnapshotData, chosenSnapshot }:
     <div
       className={`absolute border-l border-mineshaft-500 ${
         isLoading ? 'bg-bunker-800' : 'bg-bunker'
-      } fixed h-full w-96 top-14 right-0 z-40 shadow-xl flex flex-col justify-between`}
+      } fixed h-full w-[28rem] right-0 z-[70] shadow-xl flex flex-col justify-between sticky top-0`}
     >
       {isLoading ? (
         <div className="flex items-center justify-center h-full mb-8">
@@ -177,7 +183,7 @@ const PITRecoverySidebar = ({ toggleSidebar, setSnapshotData, chosenSnapshot }:
               className="p-1"
               onClick={() => toggleSidebar(false)}
             >
-              <FontAwesomeIcon icon={faX} className="w-4 h-4 text-bunker-300 cursor-pointer" />
+              <FontAwesomeIcon icon={faXmark} className="w-4 h-4 text-bunker-300 cursor-pointer" />
             </div>
           </div>
           <div className="flex flex-col px-2 py-2 overflow-y-auto h-[92vh]">

frontend/src/ee/components/SecretVersionList.tsx

@@ -89,7 +89,7 @@ const SecretVersionList = ({ secretId }: { secretId: string }) => {
             />
           </div>
         ) : (
-          <div className="h-48 overflow-y-auto overflow-x-none">
+          <div className="h-48 overflow-y-auto overflow-x-none dark:[color-scheme:dark]">
             {secretVersions ? (
               secretVersions
                 ?.sort((a, b) => b.createdAt.localeCompare(a.createdAt))
@@ -113,7 +113,7 @@ const SecretVersionList = ({ secretId }: { secretId: string }) => {
                         })}
                       </div>
                       <div className="">
-                        <p className="break-words">
+                        <p className="break-words ph-no-capture">
                           <span className="py-0.5 px-1 rounded-md bg-primary-200/10 mr-1.5">
                             Value:
                           </span>

frontend/src/hooks/api/auth/index.tsx

@@ -0,0 +1 @@
+export { useGetAuthToken } from './queries';

frontend/src/hooks/api/auth/queries.tsx

@@ -0,0 +1,26 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { apiRequest } from '@app/config/request';
+import { setAuthToken } from '@app/reactQuery';
+
+import { GetAuthTokenAPI } from './types';
+
+const authKeys = {
+  getAuthToken: ['token'] as const
+};
+
+// Refresh token is set as cookie when logged in
+// Using that we fetch the auth bearer token needed for auth calls
+const fetchAuthToken = async () => {
+  const { data } = await apiRequest.post<GetAuthTokenAPI>('/api/v1/auth/token', undefined, {
+    withCredentials: true
+  });
+
+  return data;
+};
+
+export const useGetAuthToken = () =>
+  useQuery(authKeys.getAuthToken, fetchAuthToken, {
+    onSuccess: (data) => setAuthToken(data.token),
+    retry: 0
+  });

frontend/src/hooks/api/auth/types.ts

@@ -0,0 +1,3 @@
+export type GetAuthTokenAPI = {
+  token: string;
+};

frontend/src/hooks/api/index.tsx

@@ -0,0 +1,8 @@
+export * from './auth';
+export * from './keys';
+export * from './organization';
+export * from './serviceTokens';
+export * from './subscriptions';
+export * from './tags';
+export * from './users';
+export * from './workspace';

frontend/src/hooks/api/integrationAuth/index.tsx

@@ -0,0 +1,3 @@
+export {
+    useGetIntegrationAuthApps,
+    useGetIntegrationAuthById} from './queries';

frontend/src/hooks/api/integrationAuth/queries.tsx

@@ -0,0 +1,38 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import {
+    App,
+    IntegrationAuth} from './types';
+
+const integrationAuthKeys = {
+    getIntegrationAuthById: (integrationAuthId: string) => [{ integrationAuthId }, 'integrationAuth'] as const,
+    getIntegrationAuthApps: (integrationAuthId: string) => [{ integrationAuthId }, 'integrationAuthApps'] as const,
+}
+
+const fetchIntegrationAuthById = async (integrationAuthId: string) => {
+    const { data } = await apiRequest.get<{ integrationAuth: IntegrationAuth }>(`/api/v1/integration-auth/${integrationAuthId}`);
+    return data.integrationAuth;
+}
+
+const fetchIntegrationAuthApps = async (integrationAuthId: string) => {
+    const { data } = await apiRequest.get<{ apps: App[] }>(`/api/v1/integration-auth/${integrationAuthId}/apps`);
+    return data.apps;
+}
+
+export const useGetIntegrationAuthById = (integrationAuthId: string) => {
+    return useQuery({
+        queryKey: integrationAuthKeys.getIntegrationAuthById(integrationAuthId),
+        queryFn: () => fetchIntegrationAuthById(integrationAuthId),
+        enabled: true
+    });
+}
+
+export const useGetIntegrationAuthApps = (integrationAuthId: string) => {
+    return useQuery({
+        queryKey: integrationAuthKeys.getIntegrationAuthApps(integrationAuthId),
+        queryFn: () =>  fetchIntegrationAuthApps(integrationAuthId),
+        enabled: true
+    });
+}

frontend/src/hooks/api/integrationAuth/types.ts

@@ -0,0 +1,13 @@
+export type IntegrationAuth = {
+    _id: string;
+    workspace: string;
+    integration: string;
+    teamId?: string;
+    accountId?: string;
+}
+
+export type App = {
+    name: string;
+    appId?: string;
+    owner?: string;
+}

frontend/src/hooks/api/keys/index.tsx

@@ -0,0 +1 @@
+export { useGetUserWsKey, useUploadWsKey } from './queries';

frontend/src/hooks/api/keys/queries.tsx

@@ -0,0 +1,31 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+
+import { apiRequest } from '@app/config/request';
+
+import { UploadWsKeyDTO, UserWsKeyPair } from './types';
+
+const encKeyKeys = {
+  getUserWorkspaceKey: (workspaceID: string) => ['worksapce-key-pair', { workspaceID }] as const
+};
+
+const fetchUserWsKey = async (workspaceID: string) => {
+  const { data } = await apiRequest.get<{ latestKey: UserWsKeyPair }>(
+    `/api/v1/key/${workspaceID}/latest`
+  );
+
+  return data.latestKey;
+};
+
+export const useGetUserWsKey = (workspaceID: string) =>
+  useQuery({
+    queryKey: encKeyKeys.getUserWorkspaceKey(workspaceID),
+    queryFn: () => fetchUserWsKey(workspaceID),
+    enabled: Boolean(workspaceID)
+  });
+
+// mutations
+export const useUploadWsKey = () =>
+  useMutation<{}, {}, UploadWsKeyDTO>({
+    mutationFn: ({ encryptedKey, nonce, userId, workspaceId }) =>
+      apiRequest.post(`/api/v1/key/${workspaceId}`, { key: { userId, encryptedKey, nonce } })
+  });

frontend/src/hooks/api/keys/types.ts

@@ -0,0 +1,29 @@
+export type UserWsKeyPair = {
+  _id: string;
+  encryptedKey: string;
+  nonce: string;
+  sender: Sender;
+  receiver: string;
+  workspace: string;
+  createdAt: string;
+  updatedAt: string;
+  __v: number;
+};
+
+export type Sender = {
+  _id: string;
+  email: string;
+  createdAt: string;
+  updatedAt: string;
+  __v: number;
+  firstName: string;
+  lastName: string;
+  publicKey: string;
+};
+
+export type UploadWsKeyDTO = {
+  userId: string;
+  encryptedKey: string;
+  nonce: string;
+  workspaceId: string;
+};

frontend/src/hooks/api/organization/index.ts

@@ -0,0 +1 @@
+export { useGetOrganization } from './queries';

frontend/src/hooks/api/organization/queries.tsx

@@ -0,0 +1,18 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { apiRequest } from '@app/config/request';
+
+import { Organization } from './types';
+
+const organizationKeys = {
+  getUserOrganization: ['organization'] as const
+};
+
+const fetchUserOrganization = async () => {
+  const { data } = await apiRequest.get<{ organizations: Organization[] }>('/api/v1/organization');
+
+  return data.organizations;
+};
+
+export const useGetOrganization = () =>
+  useQuery({ queryKey: organizationKeys.getUserOrganization, queryFn: fetchUserOrganization });

frontend/src/hooks/api/organization/types.ts

@@ -0,0 +1,6 @@
+export type Organization = {
+  _id: string;
+  name: string;
+  createAt: string;
+  updatedAt: string;
+};

frontend/src/hooks/api/serviceTokens/index.ts

@@ -0,0 +1 @@
+export { useCreateServiceToken, useDeleteServiceToken, useGetUserWsServiceTokens } from './queries';

frontend/src/hooks/api/serviceTokens/queries.tsx

@@ -0,0 +1,61 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { apiRequest } from '@app/config/request';
+
+import {
+  CreateServiceTokenDTO,
+  CreateServiceTokenRes,
+  DeleteServiceTokenRes,
+  ServiceToken
+} from './types';
+
+const serviceTokenKeys = {
+  getAllWorkspaceServiceToken: (workspaceID: string) => [{ workspaceID }, 'service-tokens'] as const
+};
+
+const fetchWorkspaceServiceTokens = async (workspaceID: string) => {
+  const { data } = await apiRequest.get<{ serviceTokenData: ServiceToken[] }>(
+    `/api/v2/workspace/${workspaceID}/service-token-data`
+  );
+
+  return data.serviceTokenData;
+};
+
+type UseGetWorkspaceServiceTokensProps = { workspaceID: string };
+
+export const useGetUserWsServiceTokens = ({ workspaceID }: UseGetWorkspaceServiceTokensProps) =>
+  useQuery({
+    queryKey: serviceTokenKeys.getAllWorkspaceServiceToken(workspaceID),
+    queryFn: () => fetchWorkspaceServiceTokens(workspaceID),
+    enabled: Boolean(workspaceID)
+  });
+
+// mutation
+export const useCreateServiceToken = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<CreateServiceTokenRes, {}, CreateServiceTokenDTO>({
+    mutationFn: async (body) => {
+      const { data } = await apiRequest.post('/api/v2/service-token/', body);
+      data.serviceToken += `.${  body.randomBytes}`;
+      return data;
+    },
+    onSuccess: ({ serviceTokenData: { workspace } }) => {
+      queryClient.invalidateQueries(serviceTokenKeys.getAllWorkspaceServiceToken(workspace));
+    }
+  });
+};
+
+export const useDeleteServiceToken = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<DeleteServiceTokenRes, {}, string>({
+    mutationFn: async (serviceTokenId) => {
+      const { data } = await apiRequest.delete(`/api/v2/service-token/${serviceTokenId}`);
+      return data;
+    },
+    onSuccess: ({ serviceTokenData: { workspace } }) => {
+      queryClient.invalidateQueries(serviceTokenKeys.getAllWorkspaceServiceToken(workspace));
+    }
+  });
+};

frontend/src/hooks/api/serviceTokens/types.ts

@@ -0,0 +1,29 @@
+export type ServiceToken = {
+  _id: string;
+  name: string;
+  workspace: string;
+  environment: string;
+  user: string;
+  expiresAt: string;
+  createdAt: string;
+  updatedAt: string;
+  __v: number;
+};
+
+export type CreateServiceTokenDTO = {
+  name: string;
+  workspaceId: string;
+  environment: string;
+  expiresIn: number;
+  encryptedKey: string;
+  iv: string;
+  tag: string;
+  randomBytes: string;
+};
+
+export type CreateServiceTokenRes = {
+  serviceToken: string;
+  serviceTokenData: ServiceToken;
+};
+
+export type DeleteServiceTokenRes = { serviceTokenData: ServiceToken };

frontend/src/hooks/api/subscriptions/index.tsx

@@ -0,0 +1 @@
+export { useGetOrgSubscription } from './queries';

frontend/src/hooks/api/subscriptions/queries.tsx

@@ -0,0 +1,30 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { apiRequest } from '@app/config/request';
+
+import { GetSubscriptionPlan } from './types';
+
+// import { Workspace } from './types';
+
+const subscriptionKeys = {
+  getOrgSubsription: (orgID: string) => ['subscription', { orgID }] as const
+};
+
+const fetchOrgSubscription = async (orgID: string) => {
+  const { data } = await apiRequest.get<{ subscriptions: GetSubscriptionPlan }>(
+    `/api/v1/organization/${orgID}/subscriptions`
+  );
+
+  return data.subscriptions;
+};
+
+type UseGetOrgSubscriptionProps = {
+  orgID: string;
+};
+
+export const useGetOrgSubscription = ({ orgID }: UseGetOrgSubscriptionProps) =>
+  useQuery({
+    queryKey: subscriptionKeys.getOrgSubsription(orgID),
+    queryFn: () => fetchOrgSubscription(orgID),
+    enabled: Boolean(orgID)
+  });

frontend/src/hooks/api/subscriptions/types.ts

@@ -0,0 +1,25 @@
+export type GetSubscriptionPlan = {
+  data: { plan: SubscriptionPlan }[];
+};
+
+export type SubscriptionPlan = {
+  id: string;
+  object: string;
+  active: boolean;
+  aggregate_usage: unknown;
+  amount: 1400;
+  amount_decimal: 1400;
+  billing_scheme: string;
+  created: 1674833546;
+  currency: string;
+  interval: string;
+  interval_count: 1;
+  livemode: false;
+  metadata: {};
+  nickname: null;
+  product: string;
+  tiers_mode: unknown;
+  transform_usage: unknown;
+  trial_period_days: unknown;
+  usage_type: string;
+};

frontend/src/hooks/api/tags/index.tsx

@@ -0,0 +1,3 @@
+export { useGetWsTags } from './queries';
+export { useCreateWsTag } from './queries';
+export { useDeleteWsTag } from './queries';

frontend/src/hooks/api/tags/queries.tsx

@@ -0,0 +1,62 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { apiRequest } from '@app/config/request';
+
+import {
+  CreateTagDTO,
+  CreateTagRes,
+  DeleteTagDTO,
+  DeleteWsTagRes,
+  UserWsTags
+} from './types';
+
+
+const workspaceTags = {
+  getWsTags: (workspaceID: string) => ['workspace-tags', { workspaceID }] as const
+};
+
+const fetchWsTag = async (workspaceID: string) => {
+  const { data } = await apiRequest.get<{ workspaceTags: UserWsTags }>(
+    `/api/v2/workspace/${workspaceID}/tags`
+  );
+
+  return data.workspaceTags;
+};
+
+export const useGetWsTags = (workspaceID: string) =>
+  useQuery({
+    queryKey: workspaceTags.getWsTags(workspaceID),
+    queryFn: () => fetchWsTag(workspaceID),
+    enabled: Boolean(workspaceID)
+  });
+
+export const useCreateWsTag = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<CreateTagRes, {}, CreateTagDTO>({
+    mutationFn: async ({ workspaceID, tagName, tagSlug }) => {
+      const { data } = await apiRequest.post(`/api/v2/workspace/${workspaceID}/tags`, {
+        name: tagName,
+        slug: tagSlug
+      })
+      return data;
+    },
+    onSuccess: (tagData) => {
+      queryClient.invalidateQueries(workspaceTags.getWsTags(tagData?.workspace));
+    }
+  });
+};
+
+export const useDeleteWsTag = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<DeleteWsTagRes, {}, DeleteTagDTO>({
+    mutationFn: async ({ tagID }) => {
+      const { data } = await apiRequest.delete(`/api/v2/workspace/tags/${tagID}`);
+      return data
+    },
+    onSuccess: (tagData) => {
+      queryClient.invalidateQueries(workspaceTags.getWsTags(tagData?.workspace));
+    }
+  });
+};

frontend/src/hooks/api/tags/types.ts

@@ -0,0 +1,39 @@
+export type UserWsTags = WsTag[];
+
+export type WsTag = {
+  _id: string;
+  name: string;
+  slug: string;
+  workspace: string;
+  createdAt: string;
+  updatedAt: string;
+  __v: number;
+}
+
+export type WorkspaceTag = { _id: string; name: string; slug: string };
+
+export type CreateTagDTO = {
+  workspaceID: string;
+  tagSlug: string;
+  tagName: string;
+};
+
+export type CreateTagRes = {
+  name: string;
+  slug: string;
+  workspace: string;
+  createdAt: string;
+  user: string;
+  _id: string;
+};
+
+export type DeleteTagDTO = { tagID: string; };
+
+export type DeleteWsTagRes = {
+  name: string;
+  slug: string;
+  workspace: string;
+  createdAt: string;
+  user: string;
+  _id: string;
+};

frontend/src/hooks/api/types.ts

@@ -0,0 +1,16 @@
+export type { GetAuthTokenAPI } from './auth/types';
+export type { UserWsKeyPair } from './keys/types';
+export type { Organization } from './organization/types';
+export type { CreateServiceTokenDTO, ServiceToken } from './serviceTokens/types';
+export type { GetSubscriptionPlan, SubscriptionPlan } from './subscriptions/types';
+export type { User } from './users/types';
+export type {
+  CreateEnvironmentDTO,
+  DeleteEnvironmentDTO,
+  DeleteWorkspaceDTO,
+  RenameWorkspaceDTO,
+  UpdateEnvironmentDTO,
+  Workspace,
+  WorkspaceEnv,
+  WorkspaceTag
+} from './workspace/types';

frontend/src/hooks/api/users/index.tsx

@@ -0,0 +1,7 @@
+export {
+  fetchOrgUsers,
+  useAddUserToWs,
+  useGetOrgUsers,
+  useGetUser,
+  useLogoutUser
+} from './queries';

frontend/src/hooks/api/users/queries.tsx

@@ -0,0 +1,84 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+
+import {
+  decryptAssymmetric,
+  encryptAssymmetric
+} from '@app/components/utilities/cryptography/crypto';
+import { apiRequest } from '@app/config/request';
+import { setAuthToken } from '@app/reactQuery';
+
+import { useUploadWsKey } from '../keys/queries';
+import { AddUserToWsDTO, AddUserToWsRes, OrgUser, User } from './types';
+
+const userKeys = {
+  getUser: ['user'] as const,
+  getOrgUsers: (orgId: string) => [{ orgId }, 'user']
+};
+
+const fetchUserDetails = async () => {
+  const { data } = await apiRequest.get<{ user: User }>('/api/v1/user');
+
+  return data.user;
+};
+
+export const useGetUser = () => useQuery(userKeys.getUser, fetchUserDetails);
+
+export const fetchOrgUsers = async (orgId: string) => {
+  const { data } = await apiRequest.get<{ users: OrgUser[] }>(
+    `/api/v1/organization/${orgId}/users`
+  );
+
+  return data.users;
+};
+
+export const useGetOrgUsers = (orgId: string) =>
+  useQuery(userKeys.getOrgUsers(orgId), () => fetchOrgUsers(orgId));
+
+// mutation
+export const useAddUserToWs = () => {
+  const uploadWsKey = useUploadWsKey();
+
+  return useMutation<{ data: AddUserToWsRes }, {}, AddUserToWsDTO>({
+    mutationFn: ({ email, workspaceId }) =>
+      apiRequest.post(`/api/v1/workspace/${workspaceId}/invite-signup`, { email }),
+    onSuccess: ({ data }, { workspaceId }) => {
+      const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY');
+      if (!PRIVATE_KEY) return;
+
+      // assymmetrically decrypt symmetric key with local private key
+      const key = decryptAssymmetric({
+        ciphertext: data.latestKey.encryptedKey,
+        nonce: data.latestKey.nonce,
+        publicKey: data.latestKey.sender.publicKey,
+        privateKey: PRIVATE_KEY
+      });
+
+      const { ciphertext: inviteeCipherText, nonce: inviteeNonce } = encryptAssymmetric({
+        plaintext: key,
+        publicKey: data.invitee.publicKey,
+        privateKey: PRIVATE_KEY
+      });
+
+      uploadWsKey.mutate({
+        encryptedKey: inviteeCipherText,
+        nonce: inviteeNonce,
+        userId: data.invitee._id,
+        workspaceId
+      });
+    }
+  });
+};
+
+export const useLogoutUser = () =>
+  useMutation({
+    mutationFn: () => apiRequest.post('/api/v1/auth/logout'),
+    onSuccess: () => {
+      setAuthToken('');
+      // Delete the cookie by not setting a value; Alternatively clear the local storage
+      localStorage.setItem('publicKey', '');
+      localStorage.setItem('encryptedPrivateKey', '');
+      localStorage.setItem('iv', '');
+      localStorage.setItem('tag', '');
+      localStorage.setItem('PRIVATE_KEY', '');
+    }
+  });

frontend/src/hooks/api/users/types.ts

@@ -0,0 +1,39 @@
+import { UserWsKeyPair } from '../keys/types';
+
+export type User = {
+  seenIps: string[];
+  _id: string;
+  email: string;
+  createdAt: Date;
+  updatedAt: Date;
+  __v: number;
+  firstName: string;
+  lastName: string;
+  publicKey: string;
+};
+
+export type OrgUser = {
+  _id: string;
+  user: {
+    email: string;
+    firstName: string;
+    lastName: string;
+    _id: string;
+    publicKey: string;
+  };
+  inviteEmail: string;
+  organization: string;
+  role: 'owner' | 'admin' | 'member';
+  status: 'invited' | 'accepted';
+  deniedPermissions: any[];
+};
+
+export type AddUserToWsDTO = {
+  workspaceId: string;
+  email: string;
+};
+
+export type AddUserToWsRes = {
+  invitee: OrgUser['user'];
+  latestKey: UserWsKeyPair;
+};

frontend/src/hooks/api/workspace/index.tsx

@@ -0,0 +1,11 @@
+export {
+  useCreateWorkspace,
+  useCreateWsEnvironment,
+  useDeleteWorkspace,
+  useDeleteWsEnvironment,
+  useGetUserWorkspaces,
+  useGetWorkspaceById,
+  useRenameWorkspace,
+  useToggleAutoCapitalization,
+  useUpdateWsEnvironment} from './queries';
+  

frontend/src/hooks/api/workspace/queries.tsx

@@ -0,0 +1,134 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { apiRequest } from '@app/config/request';
+
+import {
+  CreateEnvironmentDTO,
+  CreateWorkspaceDTO,
+  DeleteEnvironmentDTO,
+  DeleteWorkspaceDTO,
+  RenameWorkspaceDTO,
+  ToggleAutoCapitalizationDTO,
+  UpdateEnvironmentDTO,
+  Workspace
+} from './types';
+
+
+const workspaceKeys = {
+  getWorkspaceById: (workspaceId: string) => [{ workspaceId }, 'workspace'] as const,
+  getAllUserWorkspace: ['workspaces'] as const
+};
+
+const fetchWorkspaceById = async (workspaceId: string) => {
+  const { data } = await apiRequest.get<{ workspace: Workspace }>(`/api/v1/workspace/${workspaceId}`);
+  return data.workspace; 
+}
+
+const fetchUserWorkspaces = async () => {
+  const { data } = await apiRequest.get<{ workspaces: Workspace[] }>('/api/v1/workspace');
+  return data.workspaces;
+};
+
+export const useGetWorkspaceById = (workspaceId: string) => {
+  return useQuery({
+    queryKey: workspaceKeys.getWorkspaceById(workspaceId),
+    queryFn: () => fetchWorkspaceById(workspaceId),
+    enabled: true
+  });
+};
+
+export const useGetUserWorkspaces = () =>
+  useQuery(workspaceKeys.getAllUserWorkspace, fetchUserWorkspaces);
+
+// mutation
+export const useCreateWorkspace = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{ data: { workspace: Workspace } }, {}, CreateWorkspaceDTO>({
+    mutationFn: async ({ organizationId, workspaceName }) =>
+      apiRequest.post('/api/v1/workspace', { workspaceName, organizationId }),
+    onSuccess: () => {
+      queryClient.invalidateQueries(workspaceKeys.getAllUserWorkspace);
+    }
+  });
+};
+
+export const useRenameWorkspace = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, RenameWorkspaceDTO>({
+    mutationFn: ({ workspaceID, newWorkspaceName }) =>
+      apiRequest.post(`/api/v1/workspace/${workspaceID}/name`, { name: newWorkspaceName }),
+    onSuccess: () => {
+      queryClient.invalidateQueries(workspaceKeys.getAllUserWorkspace);
+    }
+  });
+};
+
+export const useToggleAutoCapitalization = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, ToggleAutoCapitalizationDTO>({
+    mutationFn: ({ workspaceID, state }) =>
+      apiRequest.patch(`/api/v2/workspace/${workspaceID}/auto-capitalization`, { autoCapitalization: state }),
+    onSuccess: () => {
+      queryClient.invalidateQueries(workspaceKeys.getAllUserWorkspace);
+    }
+  });
+};
+
+export const useDeleteWorkspace = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, DeleteWorkspaceDTO>({
+    mutationFn: ({ workspaceID }) => apiRequest.delete(`/api/v1/workspace/${workspaceID}`),
+    onSuccess: () => {
+      queryClient.invalidateQueries(workspaceKeys.getAllUserWorkspace);
+    }
+  });
+};
+
+export const useCreateWsEnvironment = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, CreateEnvironmentDTO>({
+    mutationFn: ({ workspaceID, environmentName, environmentSlug }) =>
+      apiRequest.post(`/api/v2/workspace/${workspaceID}/environments`, {
+        environmentName,
+        environmentSlug
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries(workspaceKeys.getAllUserWorkspace);
+    }
+  });
+};
+
+export const useUpdateWsEnvironment = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, UpdateEnvironmentDTO>({
+    mutationFn: ({ workspaceID, environmentName, environmentSlug, oldEnvironmentSlug }) =>
+      apiRequest.put(`/api/v2/workspace/${workspaceID}/environments`, {
+        environmentName,
+        environmentSlug,
+        oldEnvironmentSlug
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries(workspaceKeys.getAllUserWorkspace);
+    }
+  });
+};
+
+export const useDeleteWsEnvironment = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, DeleteEnvironmentDTO>({
+    mutationFn: ({ workspaceID, environmentSlug }) =>
+      apiRequest.delete(`/api/v2/workspace/${workspaceID}/environments`, {
+        data: { environmentSlug }
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries(workspaceKeys.getAllUserWorkspace);
+    }
+  });
+};

frontend/src/hooks/api/workspace/types.ts

@@ -0,0 +1,37 @@
+export type Workspace = {
+  __v: number;
+  _id: string;
+  name: string;
+  organization: string;
+  autoCapitalization: boolean;
+  environments: WorkspaceEnv[];
+};
+
+export type WorkspaceEnv = { name: string; slug: string };
+export type WorkspaceTag = { _id: string; name: string; slug: string };
+
+// mutation dto
+export type CreateWorkspaceDTO = {
+  workspaceName: string;
+  organizationId: string;
+};
+
+export type RenameWorkspaceDTO = { workspaceID: string; newWorkspaceName: string };
+export type ToggleAutoCapitalizationDTO = { workspaceID: string; state: boolean };
+
+export type DeleteWorkspaceDTO = { workspaceID: string };
+
+export type CreateEnvironmentDTO = {
+  workspaceID: string;
+  environmentSlug: string;
+  environmentName: string;
+};
+
+export type UpdateEnvironmentDTO = {
+  workspaceID: string;
+  oldEnvironmentSlug: string;
+  environmentSlug: string;
+  environmentName: string;
+};
+
+export type DeleteEnvironmentDTO = { workspaceID: string; environmentSlug: string };

frontend/src/hooks/index.ts

@@ -1 +1,2 @@
 export { usePopUp } from './usePopUp';
+export { useToggle } from './useToggle';

frontend/src/hooks/usePopUp.tsx

@@ -21,7 +21,7 @@ interface UsePopUpReturn<T extends Readonly<string[]> | UsePopUpProps[]> {
   popUp: UsePopUpState<T>;
   handlePopUpOpen: (popUpName: keyof UsePopUpState<T>, data?: unknown) => void;
   handlePopUpClose: (popUpName: keyof UsePopUpState<T>) => void;
-  handlePopUpToggle: (popUpName: keyof UsePopUpState<T>) => void;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<T>, state?: boolean) => void;
 }
 
 /**
@@ -50,10 +50,10 @@ export const usePopUp = <T extends Readonly<string[]> | UsePopUpProps[]>(
     setPopUp((oldState) => ({ ...oldState, [popUpName]: { isOpen: false } }));
   }, []);
 
-  const handlePopUpToggle = useCallback((popUpName: keyof UsePopUpState<T>) => {
+  const handlePopUpToggle = useCallback((popUpName: keyof UsePopUpState<T>, state?: boolean) => {
     setPopUp((oldState) => ({
       ...oldState,
-      [popUpName]: { isOpen: !oldState[popUpName].isOpen }
+      [popUpName]: { isOpen: typeof state === 'undefined' ? !oldState[popUpName].isOpen : state }
     }));
   }, []);
 

frontend/src/hooks/useToggle.tsx

@@ -0,0 +1,30 @@
+import { useCallback, useState } from 'react';
+
+type VoidFn = () => void;
+
+type UseToggleReturn = [
+  boolean,
+  {
+    on: VoidFn;
+    off: VoidFn;
+    toggle: VoidFn;
+  }
+];
+
+export const useToggle = (initialState = false): UseToggleReturn => {
+  const [value, setValue] = useState(initialState);
+
+  const on = useCallback(() => {
+    setValue(true);
+  }, []);
+
+  const off = useCallback(() => {
+    setValue(false);
+  }, []);
+
+  const toggle = useCallback((isOpen?: boolean) => {
+    setValue((prev) => (typeof isOpen === 'boolean' ? isOpen : !prev));
+  }, []);
+
+  return [value, { on, off, toggle }];
+};

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -0,0 +1,439 @@
+/* eslint-disable no-nested-ternary */
+/* eslint-disable no-unexpected-multiline */
+/* eslint-disable react-hooks/exhaustive-deps */
+import crypto from 'crypto';
+
+import { useEffect, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useTranslation } from 'next-i18next';
+import {
+  faBookOpen,
+  faFileLines,
+  faGear,
+  faKey,
+  faMobile,
+  faPlug,
+  faPlus,
+  faUser
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+
+import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
+import onboardingCheck from '@app/components/utilities/checks/OnboardingCheck';
+import { tempLocalStorage } from '@app/components/utilities/checks/tempLocalStorage';
+import { encryptAssymmetric } from '@app/components/utilities/cryptography/crypto';
+import {
+  Button,
+  Checkbox,
+  FormControl,
+  Input,
+  Menu,
+  MenuItem,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem
+} from '@app/components/v2';
+import { useOrganization, useUser, useWorkspace } from '@app/context';
+import { usePopUp } from '@app/hooks';
+import { fetchOrgUsers, useAddUserToWs, useCreateWorkspace, useUploadWsKey } from '@app/hooks/api';
+import getOrganizations from '@app/pages/api/organization/getOrgs';
+import getOrganizationUserProjects from '@app/pages/api/organization/GetOrgUserProjects';
+
+import { Navbar } from './components/NavBar';
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+const formSchema = yup.object({
+  name: yup.string().required().label('Project Name').trim(),
+  addMembers: yup.bool().required().label('Add Members')
+});
+
+type TAddProjectFormData = yup.InferType<typeof formSchema>;
+
+export const AppLayout = ({ children }: LayoutProps) => {
+  const router = useRouter();
+  const { createNotification } = useNotificationContext();
+
+  // eslint-disable-next-line prefer-const
+  let { workspaces, currentWorkspace } = useWorkspace();
+  const { currentOrg } = useOrganization();
+  workspaces = workspaces.filter(ws => ws.organization === currentOrg?._id)
+  const { user } = useUser();
+
+  const createWs = useCreateWorkspace();
+  const uploadWsKey = useUploadWsKey();
+  const addWsUser = useAddUserToWs();
+
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    'addNewWs'
+  ] as const);
+  const {
+    control,
+    formState: { isSubmitting },
+    reset,
+    handleSubmit
+  } = useForm<TAddProjectFormData>({
+    resolver: yupResolver(formSchema)
+  });
+
+  const [workspaceMapping, setWorkspaceMapping] = useState<Map<string, string>[]>([]);
+  const [workspaceSelected, setWorkspaceSelected] = useState('∞');
+  const [totalOnboardingActionsDone, setTotalOnboardingActionsDone] = useState(0);
+
+  const { t } = useTranslation();
+
+  // TODO(akhilmhdh): This entire logic will be rechecked and will try to avoid
+  // Placing the localstorage as much as possible
+  // Wait till tony integrates the azure and its launched
+  useEffect(() => {
+    // Put a user in a workspace if they're not in one yet
+    const putUserInWorkSpace = async () => {
+      if (tempLocalStorage('orgData.id') === '') {
+        const userOrgs = await getOrganizations();
+        localStorage.setItem('orgData.id', userOrgs[0]._id);
+      }
+
+      const orgUserProjects = await getOrganizationUserProjects({
+        orgId: tempLocalStorage('orgData.id')
+      });
+      const userWorkspaces = orgUserProjects;
+      if (
+        (userWorkspaces.length === 0 &&
+          router.asPath !== '/noprojects' &&
+          !router.asPath.includes('home') &&
+          !router.asPath.includes('settings')) ||
+        router.asPath === '/dashboard/undefined'
+      ) {
+        router.push('/noprojects');
+      } else if (router.asPath !== '/noprojects') {
+        const intendedWorkspaceId = router.asPath
+          .split('/')
+          [router.asPath.split('/').length - 1].split('?')[0];
+
+        if (!['callback', 'create', 'authorize'].includes(intendedWorkspaceId)) {
+          localStorage.setItem('projectData.id', intendedWorkspaceId);
+        }
+
+        // If a user is not a member of a workspace they are trying to access, just push them to one of theirs
+        if (
+          !['callback', 'create', 'authorize'].includes(intendedWorkspaceId) &&
+          !userWorkspaces
+            .map((workspace: { _id: string }) => workspace._id)
+            .includes(intendedWorkspaceId)
+        ) {
+          router.push(`/dashboard/${userWorkspaces[0]._id}`);
+        } else {
+          setWorkspaceMapping(
+            Object.fromEntries(
+              userWorkspaces.map((workspace: any) => [workspace.name, workspace._id])
+            ) as any
+          );
+          setWorkspaceSelected(
+            Object.fromEntries(
+              userWorkspaces.map((workspace: any) => [workspace._id, workspace.name])
+            )[router.asPath.split('/')[router.asPath.split('/').length - 1].split('?')[0]]
+          );
+        }
+      }
+    };
+    putUserInWorkSpace();
+    onboardingCheck({ setTotalOnboardingActionsDone });
+  }, [router.query.id]);
+
+  useEffect(() => {
+    try {
+      if (
+        workspaceMapping[workspaceSelected as any] &&
+        `${workspaceMapping[workspaceSelected as any]}` !==
+          router.asPath.split('/')[router.asPath.split('/').length - 1].split('?')[0]
+      ) {
+        localStorage.setItem('projectData.id', `${workspaceMapping[workspaceSelected as any]}`);
+        router.push(`/dashboard/${workspaceMapping[workspaceSelected as any]}`);
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  }, [workspaceSelected]);
+
+  const onCreateProject = async ({ name, addMembers }: TAddProjectFormData) => {
+    // type check
+    if (!currentOrg?._id) return;
+    try {
+      const {
+        data: {
+          workspace: { _id: newWorkspaceId }
+        }
+      } = await createWs.mutateAsync({
+        organizationId: currentOrg?._id,
+        workspaceName: name
+      });
+
+      const randomBytes = crypto.randomBytes(16).toString('hex');
+      const PRIVATE_KEY = String(localStorage.getItem('PRIVATE_KEY'));
+      const { ciphertext, nonce } = encryptAssymmetric({
+        plaintext: randomBytes,
+        publicKey: user.publicKey,
+        privateKey: PRIVATE_KEY
+      });
+
+      await uploadWsKey.mutateAsync({
+        encryptedKey: ciphertext,
+        nonce,
+        userId: user?._id,
+        workspaceId: newWorkspaceId
+      });
+
+      if (addMembers) {
+        console.log('adding other users');
+        // not using hooks because need at this point only
+        const orgUsers = await fetchOrgUsers(currentOrg._id);
+        orgUsers.forEach(({ status, user: orgUser }) => {
+          // skip if status of org user is not accepted
+          // this orgUser is the person who created the ws
+          if (status !== 'accepted' || user.email === orgUser.email) return;
+          addWsUser.mutate({ email: orgUser.email, workspaceId: newWorkspaceId });
+        });
+      }
+      createNotification({ text: 'Workspace created', type: 'success' });
+      handlePopUpClose('addNewWs');
+      router.push(`/dashboard/${newWorkspaceId}`);
+    } catch (err) {
+      console.error(err);
+      createNotification({ text: 'Failed to create workspace', type: 'error' });
+    }
+  };
+
+  return (
+    <>
+      <div className="hidden h-screen w-full flex-col overflow-x-hidden md:flex dark">
+        <Navbar />
+        <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
+          <aside className="w-full border-r border-mineshaft-500 bg-mineshaft-900 md:w-60">
+            <nav className="items-between flex h-full flex-col justify-between">
+              <div>
+                {currentWorkspace 
+                ? <div className="w-full p-4 mt-3 mb-4">
+                  <p className="text-xs font-semibold ml-1.5 mb-1 uppercase text-gray-400">Project</p>
+                  <Select
+                    defaultValue={currentWorkspace?._id}
+                    value={currentWorkspace?._id}
+                    className="w-full py-2.5 bg-mineshaft-600 font-medium"
+                    onValueChange={(value) => {
+                      router.push(`/dashboard/${value}`);
+                    }}
+                    position="popper"
+                    dropdownContainerClassName="left-0 text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 z-50"
+                  >
+                    {workspaces.map(({ _id, name }) => (
+                      <SelectItem key={`ws-layout-list-${_id}`} value={_id} className={`${currentWorkspace?._id === _id && "bg-mineshaft-600"}`}>
+                        {name}
+                      </SelectItem>
+                    ))}
+                    <hr className="mt-1 mb-1 h-px border-0 bg-gray-700" />
+                    <div className="w-full">
+                      <Button
+                        className="w-full py-2 text-bunker-200 bg-mineshaft-500 hover:bg-primary/90 hover:text-black"
+                        color="mineshaft"
+                        size="sm"
+                        onClick={() => handlePopUpOpen('addNewWs')}
+                        leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                      >
+                        Add Project
+                      </Button>
+                    </div>
+                  </Select>
+                </div>
+                : <div className="w-full p-4 mt-3 mb-4">
+                  <Button
+                    className="w-full py-2 text-bunker-200 bg-mineshaft-500 hover:bg-primary/90 hover:text-black"
+                    color="mineshaft"
+                    size="sm"
+                    onClick={() => handlePopUpOpen('addNewWs')}
+                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                  >
+                    Add Project
+                  </Button>
+                </div>}
+                <div className={`${currentWorkspace ? "block" : "hidden"}`}>
+                  <Menu>
+                    <Link href={`/dashboard/${currentWorkspace?._id}`} passHref>
+                      <a>
+                        <MenuItem
+                          isSelected={router.asPath === `/dashboard/${currentWorkspace?._id}`}
+                          icon={<FontAwesomeIcon icon={faKey} size="lg" />}
+                        >
+                          {t('nav:menu.secrets')}
+                        </MenuItem>
+                      </a>
+                    </Link>
+                    <Link href={`/users/${currentWorkspace?._id}`} passHref>
+                      <a>
+                        <MenuItem
+                          isSelected={router.asPath === `/users/${currentWorkspace?._id}`}
+                          icon={<FontAwesomeIcon icon={faUser} size="lg" />}
+                        >
+                          {t('nav:menu.members')}
+                        </MenuItem>
+                      </a>
+                    </Link>
+                    <Link href={`/integrations/${currentWorkspace?._id}`} passHref>
+                      <a>
+                        <MenuItem
+                          isSelected={router.asPath === `/integrations/${currentWorkspace?._id}`}
+                          icon={<FontAwesomeIcon icon={faPlug} size="lg" />}
+                        >
+                          {t('nav:menu.integrations')}
+                        </MenuItem>
+                      </a>
+                    </Link>
+                    <Link href={`/activity/${currentWorkspace?._id}`} passHref>
+                      <a>
+                        <MenuItem
+                          isSelected={router.asPath === `/activity/${currentWorkspace?._id}`}
+                          icon={<FontAwesomeIcon icon={faFileLines} size="lg" />}
+                        >
+                          Activity Logs
+                        </MenuItem>
+                      </a>
+                    </Link>
+                    <Link href={`/settings/project/${currentWorkspace?._id}`} passHref>
+                      <a>
+                        <MenuItem
+                          isSelected={
+                            router.asPath === `/settings/project/${currentWorkspace?._id}`
+                          }
+                          icon={<FontAwesomeIcon icon={faGear} size="lg" />}
+                        >
+                          {t('nav:menu.project-settings')}
+                        </MenuItem>
+                      </a>
+                    </Link>
+                  </Menu>
+                </div>
+              </div>
+              <div className="mt-40 mb-4 w-full px-2">
+                {router.asPath.split('/')[1] === 'home' ? (
+                  <div className="relative flex cursor-pointer rounded bg-primary-50/10 px-0.5 py-2.5 text-sm text-white">
+                    <div className="absolute inset-0 top-0 my-1 ml-1 mr-1 w-1 rounded-xl bg-primary" />
+                    <p className="ml-4 mr-2 flex w-6 items-center justify-center text-lg">
+                      <FontAwesomeIcon icon={faBookOpen} />
+                    </p>
+                    Infisical Guide
+                    <img
+                      src={`/images/progress-${totalOnboardingActionsDone === 0 ? '0' : ''}${
+                        totalOnboardingActionsDone === 1 ? '14' : ''
+                      }${totalOnboardingActionsDone === 2 ? '28' : ''}${
+                        totalOnboardingActionsDone === 3 ? '43' : ''
+                      }${totalOnboardingActionsDone === 4 ? '57' : ''}${
+                        totalOnboardingActionsDone === 5 ? '71' : ''
+                      }.svg`}
+                      height={58}
+                      width={58}
+                      alt="progress bar"
+                      className="absolute right-2 -top-2"
+                    />
+                  </div>
+                ) : (
+                  <Link href={`/home/${currentWorkspace?._id}`}>
+                    <div className="mt-max relative flex h-10 cursor-pointer overflow-visible rounded bg-white/10 p-2.5 text-sm text-white hover:bg-primary-50/[0.15]">
+                      <p className="flex w-10 items-center justify-center text-lg">
+                        <FontAwesomeIcon icon={faBookOpen} />
+                      </p>
+                      Infisical Guide
+                      <img
+                        src={`/images/progress-${totalOnboardingActionsDone === 0 ? '0' : ''}${
+                          totalOnboardingActionsDone === 1 ? '14' : ''
+                        }${totalOnboardingActionsDone === 2 ? '28' : ''}${
+                          totalOnboardingActionsDone === 3 ? '43' : ''
+                        }${totalOnboardingActionsDone === 4 ? '57' : ''}${
+                          totalOnboardingActionsDone === 5 ? '71' : ''
+                        }.svg`}
+                        height={58}
+                        width={58}
+                        alt="progress bar"
+                        className="absolute right-2 -top-2"
+                      />
+                    </div>
+                  </Link>
+                )}
+              </div>
+            </nav>
+          </aside>
+          <Modal
+            isOpen={popUp.addNewWs.isOpen}
+            onOpenChange={(isModalOpen) => {
+              handlePopUpToggle('addNewWs', isModalOpen);
+              reset();
+            }}
+          >
+            <ModalContent
+              title="Create a new project"
+              subTitle="This project will contain your secrets and configurations."
+            >
+              <form onSubmit={handleSubmit(onCreateProject)}>
+                <Controller
+                  control={control}
+                  name="name"
+                  defaultValue=""
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Project Name"
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} placeholder="Type your project name" />
+                    </FormControl>
+                  )}
+                />
+                <div className='pl-1 mt-4'>
+                  <Controller
+                    control={control}
+                    name="addMembers"
+                    defaultValue
+                    render={({ field: { onBlur, value, onChange } }) => (
+                      <Checkbox
+                        id="add-project-layout"
+                        isChecked={value}
+                        onCheckedChange={onChange}
+                        onBlur={onBlur}
+                      >
+                        Add all members of my organization to this project
+                      </Checkbox>
+                    )}
+                  />
+                </div>
+                <div className="mt-7 flex items-center">
+                  <Button
+                    isDisabled={isSubmitting}
+                    isLoading={isSubmitting}
+                    key="layout-create-project-submit"
+                    className=""
+                    type="submit"
+                  >
+                    Create Project
+                  </Button>
+                </div>
+              </form>
+            </ModalContent>
+          </Modal>
+          <main className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 dark:[color-scheme:dark]">
+            {children}
+          </main>
+        </div>
+      </div>
+      <div className="z-[200] flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
+        <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
+        <p className="max-w-sm px-6 text-center text-lg text-gray-200">
+          {` ${t('common:no-mobile')} `}
+        </p>
+      </div>
+    </>
+  );
+};

frontend/src/layouts/AppLayout/components/NavBar/NavBar.tsx

@@ -0,0 +1,305 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable react/jsx-key */
+import { Fragment, useMemo } from 'react';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import { TFunction, useTranslation } from 'next-i18next';
+import { faGithub, faSlack } from '@fortawesome/free-brands-svg-icons';
+import { faCircleQuestion } from '@fortawesome/free-regular-svg-icons';
+import {
+  faAngleDown,
+  faBook,
+  faCoins,
+  faEnvelope,
+  faGear,
+  faPlus,
+  faRightFromBracket
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Menu, Transition } from '@headlessui/react';
+
+import guidGenerator from '@app/components/utilities/randomId';
+import { useOrganization, useUser } from '@app/context';
+import { useLogoutUser } from '@app/hooks/api';
+
+const supportOptions = (t: TFunction) => [
+  [
+    <FontAwesomeIcon className="pl-1.5 pr-3 text-lg" icon={faSlack} />,
+    t('nav:support.slack'),
+    'https://join.slack.com/t/infisical/shared_invite/zt-1dgg63ln8-G7PCNJdCymAT9YF3j1ewVA'
+  ],
+  [
+    <FontAwesomeIcon className="pl-1.5 pr-3 text-lg" icon={faBook} />,
+    t('nav:support.docs'),
+    'https://infisical.com/docs/getting-started/introduction'
+  ],
+  [
+    <FontAwesomeIcon className="pl-1.5 pr-3 text-lg" icon={faGithub} />,
+    t('nav:support.issue'),
+    'https://github.com/Infisical/infisical-cli/issues'
+  ],
+  [
+    <FontAwesomeIcon className="pl-1.5 pr-3 text-lg" icon={faEnvelope} />,
+    t('nav:support.email'),
+    'mailto:[email protected]'
+  ]
+];
+
+export interface ICurrentOrg {
+  name: string;
+}
+
+export interface IUser {
+  firstName: string;
+  lastName: string;
+  email: string;
+}
+
+/**
+ * This is the navigation bar in the main app.
+ * It has two main components: support options and user menu (inlcudes billing, logout, org/user settings)
+ * @returns NavBar
+ */
+export const Navbar = () => {
+  const router = useRouter();
+
+  const { currentOrg, orgs } = useOrganization();
+  const { user } = useUser();
+
+  const logout = useLogoutUser();
+
+  const { t } = useTranslation();
+
+  // remove this memo
+  const supportOptionsList = useMemo(() => supportOptions(t), [t]);
+
+  const closeApp = async () => {
+    try {
+      console.log('Logging out...');
+      await logout.mutateAsync();
+      router.push('/login');
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <div className="z-[70] flex w-full flex-row justify-between border-b border-mineshaft-500 bg-mineshaft-900 text-white">
+      <div className="m-auto mx-4 flex items-center justify-start">
+        <div className="flex flex-row items-center">
+          <div className="flex justify-center py-4">
+            <Image src="/images/logotransparent.png" height={23} width={57} alt="logo" />
+          </div>
+          <a href="#" className="mx-2 text-2xl font-semibold text-white">
+            Infisical
+          </a>
+        </div>
+      </div>
+      <div className="relative z-40 mx-2 flex items-center justify-start">
+        <a
+          href="https://infisical.com/docs/getting-started/introduction"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="mr-4 flex items-center rounded-md px-3 py-2 text-sm text-gray-200 duration-200 hover:bg-white/10"
+        >
+          <FontAwesomeIcon icon={faBook} className="mr-2 text-xl" />
+          Docs
+        </a>
+        <Menu as="div" className="relative inline-block text-left">
+          <div className="mr-4">
+            <Menu.Button className="inline-flex w-full justify-center rounded-md px-2 py-2 text-sm font-medium text-gray-200 duration-200 hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
+              <FontAwesomeIcon className="text-xl" icon={faCircleQuestion} />
+            </Menu.Button>
+          </div>
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-100"
+            enterFrom="transform opacity-0 scale-95"
+            enterTo="transform opacity-100 scale-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="transform opacity-100 scale-100"
+            leaveTo="transform opacity-0 scale-95"
+          >
+            <Menu.Items className="absolute right-0 z-20 mt-0.5 w-64 origin-top-right rounded-md border border-mineshaft-700 bg-bunker px-2 py-1.5 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+              {supportOptionsList.map(([icon, text, url]) => (
+                <a
+                  key={guidGenerator()}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  href={String(url)}
+                  className="flex w-full items-center rounded-md py-0.5 font-normal text-gray-300 duration-200"
+                >
+                  <div className="relative flex w-full cursor-pointer select-none items-center justify-start rounded-md py-2 px-2 text-gray-400 duration-200 hover:bg-white/10 hover:text-gray-200">
+                    {icon}
+                    <div className="text-sm">{text}</div>
+                  </div>
+                </a>
+              ))}
+            </Menu.Items>
+          </Transition>
+        </Menu>
+        <Menu as="div" className="relative mr-4 inline-block text-left">
+          <div>
+            <Menu.Button className="inline-flex w-full justify-center rounded-md py-2 pr-2 pl-2 text-sm font-medium text-gray-200 duration-200 hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
+              {user?.firstName} {user?.lastName}
+              <FontAwesomeIcon
+                icon={faAngleDown}
+                className="ml-2 mt-1 text-sm text-gray-300 hover:text-lime-100"
+              />
+            </Menu.Button>
+          </div>
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-100"
+            enterFrom="transform opacity-0 scale-95"
+            enterTo="transform opacity-100 scale-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="transform opacity-100 scale-100"
+            leaveTo="transform opacity-0 scale-95"
+          >
+            <Menu.Items className="absolute right-0 z-[125] mt-0.5 w-68 origin-top-right divide-y divide-mineshaft-700 drop-shadow-2xl rounded-md border border-mineshaft-700 bg-mineshaft-900 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+              <div className="px-1 py-1">
+                <div className="ml-2 mt-2 self-start text-xs font-semibold tracking-wide text-gray-400">
+                  {t('nav:user.signed-in-as')}
+                </div>
+                <div
+                  onKeyDown={() => null}
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => router.push(`/settings/personal/${router.query.id}`)}
+                  className="mx-1 my-1 flex cursor-pointer flex-row items-center rounded-md px-1 hover:bg-white/5"
+                >
+                  <div className="flex h-8 w-9 items-center justify-center rounded-full bg-white/10 text-gray-300">
+                    {user?.firstName?.charAt(0)}
+                  </div>
+                  <div className="flex w-full items-center justify-between">
+                    <div>
+                      <p className="px-2 pt-1 text-sm text-gray-300">
+                        {' '}
+                        {user?.firstName} {user?.lastName}
+                      </p>
+                      <p className="px-2 pb-1 text-xs text-gray-400"> {user?.email}</p>
+                    </div>
+                    <FontAwesomeIcon
+                      icon={faGear}
+                      className="mr-1 cursor-pointer rounded-md p-2 text-lg text-gray-400 hover:bg-white/10"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div className="px-2 pt-2">
+                <div className="ml-2 mt-2 self-start text-xs font-semibold tracking-wide text-gray-400">
+                  {t('nav:user.current-organization')}
+                </div>
+                <div
+                  onKeyDown={() => null}
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => router.push(`/settings/org/${router.query.id}`)}
+                  className="mt-2 flex cursor-pointer flex-row items-center rounded-md px-2 py-1 hover:bg-white/5"
+                >
+                  <div className="flex h-7 w-8 items-center justify-center rounded-md bg-white/10 text-gray-300">
+                    {currentOrg?.name?.charAt(0)}
+                  </div>
+                  <div className="flex w-full items-center justify-between">
+                    <p className="px-2 text-sm text-gray-300">{currentOrg?.name}</p>
+                    <FontAwesomeIcon
+                      icon={faGear}
+                      className="cursor-pointer rounded-md p-2 text-lg text-gray-400 hover:bg-white/10"
+                    />
+                  </div>
+                </div>
+                <button
+                  // onClick={buttonAction}
+                  type="button"
+                  className="w-full cursor-pointer"
+                >
+                  <div
+                    onKeyDown={() => null}
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => router.push(`/settings/billing/${router.query.id}`)}
+                    className="relative mt-1 flex cursor-pointer select-none justify-start rounded-md py-2 px-2 text-gray-400 duration-200 hover:bg-white/5 hover:text-gray-200"
+                  >
+                    <FontAwesomeIcon className="pl-1.5 pr-3 text-lg" icon={faCoins} />
+                    <div className="text-sm">{t('nav:user.usage-billing')}</div>
+                  </div>
+                </button>
+                <button
+                  type="button"
+                  // onClick={buttonAction}
+                  className="mb-2 w-full cursor-pointer"
+                >
+                  <div
+                    onKeyDown={() => null}
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => router.push(`/settings/org/${router.query.id}?invite`)}
+                    className="relative mt-1 flex cursor-pointer select-none justify-start rounded-md py-2 pl-10 pr-4 text-gray-400 duration-200 hover:bg-primary/100 hover:font-semibold hover:text-black"
+                  >
+                    <span className="absolute inset-y-0 left-0 flex items-center rounded-lg pl-3 pr-4">
+                      <FontAwesomeIcon icon={faPlus} className="ml-1" />
+                    </span>
+                    <div className="ml-1 text-sm">{t('nav:user.invite')}</div>
+                  </div>
+                </button>
+              </div>
+              {orgs && orgs?.length > 1 && (
+                <div className="px-1 pt-1">
+                  <div className="ml-2 mt-2 self-start text-xs font-semibold tracking-wide text-gray-400">
+                    {t('nav:user.other-organizations')}
+                  </div>
+                  <div className="mt-3 mb-2 flex flex-col items-start px-1">
+                    {orgs
+                      ?.filter((org: { _id: string }) => org._id !== currentOrg?._id)
+                      .map((org: { _id: string; name: string }) => (
+                        <div
+                          onKeyDown={() => null}
+                          role="button"
+                          tabIndex={0}
+                          key={guidGenerator()}
+                          onClick={() => {
+                            localStorage.setItem('orgData.id', org._id);
+                            router.reload();
+                          }}
+                          className="flex w-full cursor-pointer flex-row items-center justify-start rounded-md p-1.5 hover:bg-white/5"
+                        >
+                          <div className="flex h-7 w-8 items-center justify-center rounded-md bg-white/10 text-gray-300">
+                            {org.name.charAt(0)}
+                          </div>
+                          <div className="flex w-full items-center justify-between">
+                            <p className="px-2 text-sm text-gray-300">{org.name}</p>
+                          </div>
+                        </div>
+                      ))}
+                  </div>
+                </div>
+              )}
+              <div className="px-1 py-1">
+                <Menu.Item>
+                  {({ active }) => (
+                    <button
+                      type="button"
+                      onClick={closeApp}
+                      className={`${
+                        active ? 'bg-red font-semibold text-white' : 'text-gray-400'
+                      } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
+                    >
+                      <div className="relative flex cursor-pointer select-none items-center justify-start">
+                        <FontAwesomeIcon
+                          className="ml-1.5 mr-3 text-lg"
+                          icon={faRightFromBracket}
+                        />
+                        {t('common:logout')}
+                      </div>
+                    </button>
+                  )}
+                </Menu.Item>
+              </div>
+            </Menu.Items>
+          </Transition>
+        </Menu>
+      </div>
+    </div>
+  );
+};

frontend/src/layouts/AppLayout/components/NavBar/index.tsx

@@ -0,0 +1 @@
+export { Navbar } from './NavBar';