improvements: revise admin console docs and display server admin badge on users tables

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

@@ -56,6 +56,7 @@ export type OrgUser = {
     lastName: string;
     id: string;
     publicKey: string;
+    superAdmin: boolean;
   };
   inviteEmail: string;
   organization: string;

frontend/src/layouts/AdminLayout/AdminLayout.tsx

@@ -157,7 +157,7 @@ export const AdminLayout = ({ children }: LayoutProps) => {
                         {user?.superAdmin && (
                           <Link href="/admin" legacyBehavior>
                             <DropdownMenuItem className="mt-1 border-t border-mineshaft-600">
-                              Admin Panel
+                              Server Admin Console
                             </DropdownMenuItem>
                           </Link>
                         )}

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -487,7 +487,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                         {user?.superAdmin && (
                           <Link href="/admin" legacyBehavior>
                             <DropdownMenuItem className="mt-1 border-t border-mineshaft-600">
-                              Server Admin Panel
+                              Server Admin Console
                             </DropdownMenuItem>
                           </Link>
                         )}
@@ -749,7 +749,8 @@ export const AppLayout = ({ children }: LayoutProps) => {
                           </MenuItem>
                         </a>
                       </Link>
-                      {(window.location.origin.includes("https://app.infisical.com") || window.location.origin.includes("https://eu.infisical.com") ||
+                      {(window.location.origin.includes("https://app.infisical.com") ||
+                        window.location.origin.includes("https://eu.infisical.com") ||
                         window.location.origin.includes("https://gamma.infisical.com")) && (
                         <Link href={`/org/${currentOrg?.id}/billing`} passHref>
                           <a>

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx

@@ -7,6 +7,7 @@ import { twMerge } from "tailwind-merge";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
+  Badge,
   Button,
   DropdownMenu,
   DropdownMenuContent,
@@ -188,7 +189,14 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
                       className="h-10 w-full cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
                       onClick={() => router.push(`/org/${orgId}/memberships/${orgMembershipId}`)}
                     >
-                      <Td className={isActive ? "" : "text-mineshaft-400"}>{name}</Td>
+                      <Td className={isActive ? "" : "text-mineshaft-400"}>
+                        {name}
+                        {u.superAdmin && (
+                          <Badge variant="primary" className="ml-2">
+                            Server Admin
+                          </Badge>
+                        )}
+                      </Td>
                       <Td className={isActive ? "" : "text-mineshaft-400"}>{username}</Td>
                       <Td>
                         <OrgPermissionCan

frontend/src/views/admin/DashboardPage/DashboardPage.tsx

@@ -125,7 +125,7 @@ export const AdminDashboardPage = () => {
     <div className="container mx-auto max-w-7xl px-4 pb-12 text-white dark:[color-scheme:dark]">
       <div className="mx-auto mb-6 w-full max-w-7xl pt-6">
         <div className="mb-8 flex flex-col items-start justify-between text-xl">
-          <h1 className="text-3xl font-semibold">Admin Dashboard</h1>
+          <h1 className="text-3xl font-semibold">Server Admin Console</h1>
           <p className="text-base text-bunker-300">Manage your instance level configurations.</p>
         </div>
       </div>

frontend/src/views/admin/DashboardPage/UserPanel.tsx

@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { createNotification } from "@app/components/notifications";
 import {
+  Badge,
   Button,
   DeleteActionModal,
   EmptyState,
@@ -69,12 +70,19 @@ const UserPanelTable = ({
               {isLoading && <TableSkeleton columns={4} innerKey="users" />}
               {!isLoading &&
                 data?.pages?.map((users) =>
-                  users.map(({ username, email, firstName, lastName, id }) => {
+                  users.map(({ username, email, firstName, lastName, id, superAdmin }) => {
                     const name = firstName || lastName ? `${firstName} ${lastName}` : "-";
 
                     return (
                       <Tr key={`user-${id}`} className="w-full">
-                        <Td className="w-5/12">{name}</Td>
+                        <Td className="w-5/12">
+                          {name}
+                          {superAdmin && (
+                            <Badge variant="primary" className="ml-2">
+                              Server Admin
+                            </Badge>
+                          )}
+                        </Td>
                         <Td className="w-5/12">{email}</Td>
                         <Td>
                           {userId !== id && (