From fabfcdd9d5475935413842e2fb876209063b1ecc Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Mon, 27 Apr 2026 03:12:28 +0530
Subject: [PATCH 1/9] fix: update service accounts

---
 .../components/add-service-account-dialog.tsx |  11 +-
 .../delete-service-account-dialog.module.css  |   3 +
 .../delete-service-account-dialog.tsx         |   9 +-
 .../manage-project-access-dialog.tsx          |  24 +++-
 .../components/projects-cell.module.css       |  11 ++
 .../components/projects-cell.tsx              |  33 +++--
 .../components/revoke-token-dialog.module.css |   3 +
 .../components/revoke-token-dialog.tsx        |   7 +-
 .../service-account-columns.module.css        |  11 ++
 .../components/service-account-columns.tsx    |  15 +-
 .../hooks/useServiceUserTokens.ts             | 130 ++++++++++++++++++
 .../service-account-details-view.module.css   |  36 +++--
 .../service-account-details-view.tsx          |  67 ++++++---
 .../service-accounts-view.module.css          |   4 +
 .../service-accounts-view.tsx                 |  31 ++++-
 15 files changed, 326 insertions(+), 69 deletions(-)
 create mode 100644 web/sdk/react/views-new/service-accounts/components/delete-service-account-dialog.module.css
 create mode 100644 web/sdk/react/views-new/service-accounts/components/projects-cell.module.css
 create mode 100644 web/sdk/react/views-new/service-accounts/components/revoke-token-dialog.module.css
 create mode 100644 web/sdk/react/views-new/service-accounts/components/service-account-columns.module.css
 create mode 100644 web/sdk/react/views-new/service-accounts/hooks/useServiceUserTokens.ts

diff --git a/web/sdk/react/views-new/service-accounts/components/add-service-account-dialog.tsx b/web/sdk/react/views-new/service-accounts/components/add-service-account-dialog.tsx
index 84f376bbf..fc7cdb71e 100644
--- a/web/sdk/react/views-new/service-accounts/components/add-service-account-dialog.tsx
+++ b/web/sdk/react/views-new/service-accounts/components/add-service-account-dialog.tsx
@@ -39,6 +39,7 @@ import {
 import { PERMISSIONS } from '../../../../utils';
 import { useFrontier } from '../../../contexts/FrontierContext';
 import { useTerminology } from '../../../hooks/useTerminology';
+import { cacheFreshServiceUserToken } from '../hooks/useServiceUserTokens';
 
 const DEFAULT_KEY_NAME = 'Initial Generated Key';
 
@@ -99,7 +100,7 @@ export function AddServiceAccountDialog({
       withMemberCount: false
     }),
     {
-      enabled: Boolean(orgId)
+      enabled: Boolean(orgId),
     }
   );
 
@@ -189,6 +190,14 @@ export function AddServiceAccountDialog({
           })
         );
 
+        if (tokenResponse.token) {
+          cacheFreshServiceUserToken(
+            queryClient,
+            serviceUserId,
+            tokenResponse.token
+          );
+        }
+
         toastManager.add({ title: 'Service account created', type: 'success' });
         handle.close();
         reset();
diff --git a/web/sdk/react/views-new/service-accounts/components/delete-service-account-dialog.module.css b/web/sdk/react/views-new/service-accounts/components/delete-service-account-dialog.module.css
new file mode 100644
index 000000000..6742c54f4
--- /dev/null
+++ b/web/sdk/react/views-new/service-accounts/components/delete-service-account-dialog.module.css
@@ -0,0 +1,3 @@
+.body {
+  border-bottom: none !important;
+}
diff --git a/web/sdk/react/views-new/service-accounts/components/delete-service-account-dialog.tsx b/web/sdk/react/views-new/service-accounts/components/delete-service-account-dialog.tsx
index 57f2c8e65..f2eb2291c 100644
--- a/web/sdk/react/views-new/service-accounts/components/delete-service-account-dialog.tsx
+++ b/web/sdk/react/views-new/service-accounts/components/delete-service-account-dialog.tsx
@@ -17,6 +17,7 @@ import {
 } from '@raystack/apsara-v1';
 import { useFrontier } from '../../../contexts/FrontierContext';
 import { useQueryClient } from '@tanstack/react-query';
+import styles from './delete-service-account-dialog.module.css';
 
 export type DeleteServiceAccountPayload = { serviceAccountId: string };
 
@@ -76,11 +77,9 @@ export function DeleteServiceAccountDialog({ handle, refetch }: DeleteServiceAcc
       {({ payload: rawPayload }) => {
         const payload = rawPayload as DeleteServiceAccountPayload | undefined;
         return (
-          <AlertDialog.Content width={400}>
-            <AlertDialog.Header>
+          <AlertDialog.Content width={400} showCloseButton={false}>
+            <AlertDialog.Body className={styles.body}>
               <AlertDialog.Title>Delete Service Account</AlertDialog.Title>
-            </AlertDialog.Header>
-            <AlertDialog.Body>
               <Text size="small" variant="secondary">
                 This action is irreversible and may result in the deletion of all
                 keys associated with this account. Are you sure you want to
@@ -109,7 +108,7 @@ export function DeleteServiceAccountDialog({ handle, refetch }: DeleteServiceAcc
                   loading={isLoading}
                   loaderText="Deleting..."
                 >
-                  Yes, Do it
+                  Delete
                 </Button>
               </Flex>
             </AlertDialog.Footer>
diff --git a/web/sdk/react/views-new/service-accounts/components/manage-project-access-dialog.tsx b/web/sdk/react/views-new/service-accounts/components/manage-project-access-dialog.tsx
index 2860c4780..ad1d230f1 100644
--- a/web/sdk/react/views-new/service-accounts/components/manage-project-access-dialog.tsx
+++ b/web/sdk/react/views-new/service-accounts/components/manage-project-access-dialog.tsx
@@ -55,6 +55,10 @@ function getColumns({
       id: 'checkbox',
       accessorKey: 'id',
       enableSorting: false,
+      styles: {
+        cell: { width: '40px', minWidth: '40px', maxWidth: '40px' },
+        header: { width: '40px', minWidth: '40px', maxWidth: '40px' }
+      },
       cell: ({ getValue }) => {
         const projectId = getValue() as string;
         const entry = permMap[projectId];
@@ -63,7 +67,7 @@ function getColumns({
         return (
           <Flex>
             {isLoading ? (
-              <Spinner />
+              <Spinner size={2} />
             ) : (
               <Checkbox
                 checked={checked}
@@ -86,16 +90,21 @@ function getColumns({
       id: 'access',
       accessorKey: 'id',
       enableSorting: false,
+      styles: {
+        cell: { width: '180px', minWidth: '180px', maxWidth: '180px' },
+        header: { width: '180px', minWidth: '180px', maxWidth: '180px' }
+      },
       cell: ({ getValue }) => {
         const projectId = getValue() as string;
         const entry = permMap[projectId];
         const isChecked = entry?.value ?? false;
+        const isLoading = entry?.isLoading ?? false;
         const roleId = entry?.roleId || PERMISSIONS.RoleProjectViewer;
         return (
           <Select
             value={roleId}
             onValueChange={val => onRoleChange(projectId, val)}
-            disabled={!isChecked}
+            disabled={!isChecked || isLoading}
           >
             <Select.Trigger className={styles.accessSelectTrigger}>
               <Select.Value placeholder="Viewer" />
@@ -351,7 +360,11 @@ export function ManageProjectAccessDialog({
           <Dialog.Title>Manage Project Access</Dialog.Title>
         </Dialog.Header>
         <Dialog.Body className={styles.manageAccessDialogBody}>
-          <Flex direction="column" gap={7}>
+          <Flex
+            direction="column"
+            gap={7}
+            className={styles.manageAccessBodyInner}
+          >
             <Text size="small" variant="secondary">
               Note: Choose a project to join and specify the access type.
             </Text>
@@ -359,11 +372,14 @@ export function ManageProjectAccessDialog({
               data={projects}
               columns={columns}
               isLoading={isLoading}
+              loadingRowCount={9}
               defaultSort={{ name: 'title', order: 'asc' }}
               mode="client"
             >
               <DataTable.Content
-                classNames={{ root: styles.manageAccessTableRoot }}
+                classNames={{
+                  root: styles.manageAccessTableRoot
+                }}
               />
             </DataTable>
           </Flex>
diff --git a/web/sdk/react/views-new/service-accounts/components/projects-cell.module.css b/web/sdk/react/views-new/service-accounts/components/projects-cell.module.css
new file mode 100644
index 000000000..aaa03e208
--- /dev/null
+++ b/web/sdk/react/views-new/service-accounts/components/projects-cell.module.css
@@ -0,0 +1,11 @@
+.text {
+  display: block;
+  max-width: 400px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tooltipContent {
+  max-width: 550px;
+}
diff --git a/web/sdk/react/views-new/service-accounts/components/projects-cell.tsx b/web/sdk/react/views-new/service-accounts/components/projects-cell.tsx
index fb144c56e..7571ba6c7 100644
--- a/web/sdk/react/views-new/service-accounts/components/projects-cell.tsx
+++ b/web/sdk/react/views-new/service-accounts/components/projects-cell.tsx
@@ -1,13 +1,14 @@
 'use client';
 
 import { useMemo } from 'react';
-import { Text } from '@raystack/apsara-v1';
+import { Skeleton, Text, Tooltip } from '@raystack/apsara-v1';
 import { useQuery } from '@connectrpc/connect-query';
 import { create } from '@bufbuild/protobuf';
 import {
   FrontierServiceQueries,
   ListServiceUserProjectsRequestSchema
 } from '@raystack/proton/frontier';
+import styles from './projects-cell.module.css';
 
 interface ProjectsCellProps {
   serviceUserId: string;
@@ -15,7 +16,7 @@ interface ProjectsCellProps {
 }
 
 export function ProjectsCell({ serviceUserId, orgId }: ProjectsCellProps) {
-  const { data } = useQuery(
+  const { data, isLoading } = useQuery(
     FrontierServiceQueries.listServiceUserProjects,
     create(ListServiceUserProjectsRequestSchema, {
       id: serviceUserId,
@@ -32,16 +33,24 @@ export function ProjectsCell({ serviceUserId, orgId }: ProjectsCellProps) {
     return projects.map(p => p.title).join(', ');
   }, [data]);
 
+  if (isLoading) {
+    return <Skeleton height="16px" width="200px" />;
+  }
+
+  if (!projectNames) {
+    return <Text size="small">-</Text>;
+  }
+
   return (
-    <Text
-      size="small"
-      style={{
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
-      }}
-    >
-      {projectNames || '-'}
-    </Text>
+    <Tooltip>
+      <Tooltip.Trigger
+        render={<Text size="small" className={styles.text} />}
+      >
+        {projectNames}
+      </Tooltip.Trigger>
+      <Tooltip.Content className={styles.tooltipContent}>
+        {projectNames}
+      </Tooltip.Content>
+    </Tooltip>
   );
 }
diff --git a/web/sdk/react/views-new/service-accounts/components/revoke-token-dialog.module.css b/web/sdk/react/views-new/service-accounts/components/revoke-token-dialog.module.css
new file mode 100644
index 000000000..6742c54f4
--- /dev/null
+++ b/web/sdk/react/views-new/service-accounts/components/revoke-token-dialog.module.css
@@ -0,0 +1,3 @@
+.body {
+  border-bottom: none !important;
+}
diff --git a/web/sdk/react/views-new/service-accounts/components/revoke-token-dialog.tsx b/web/sdk/react/views-new/service-accounts/components/revoke-token-dialog.tsx
index b8fec3b82..ef8222743 100644
--- a/web/sdk/react/views-new/service-accounts/components/revoke-token-dialog.tsx
+++ b/web/sdk/react/views-new/service-accounts/components/revoke-token-dialog.tsx
@@ -16,6 +16,7 @@ import {
 } from '@raystack/apsara-v1';
 import { useFrontier } from '../../../contexts/FrontierContext';
 import { useTerminology } from '../../../hooks/useTerminology';
+import styles from './revoke-token-dialog.module.css';
 
 export type RevokeTokenPayload = { tokenId: string };
 
@@ -68,11 +69,9 @@ export function RevokeTokenDialog({
       {({ payload: rawPayload }) => {
         const payload = rawPayload as RevokeTokenPayload | undefined;
         return (
-          <AlertDialog.Content width={400}>
-            <AlertDialog.Header>
+          <AlertDialog.Content width={400} showCloseButton={false}>
+            <AlertDialog.Body className={styles.body}>
               <AlertDialog.Title>Revoke API Key</AlertDialog.Title>
-            </AlertDialog.Header>
-            <AlertDialog.Body>
               <Text size="small" variant="secondary">
                 This is an irreversible action doing this might lead to
                 discontinuation of access to the {t.appName()} features. Do you
diff --git a/web/sdk/react/views-new/service-accounts/components/service-account-columns.module.css b/web/sdk/react/views-new/service-accounts/components/service-account-columns.module.css
new file mode 100644
index 000000000..6b11add69
--- /dev/null
+++ b/web/sdk/react/views-new/service-accounts/components/service-account-columns.module.css
@@ -0,0 +1,11 @@
+.actionsCell {
+  visibility: hidden;
+}
+
+tr:hover .actionsCell {
+  visibility: visible;
+}
+
+.actionButton {
+  transition: none;
+}
diff --git a/web/sdk/react/views-new/service-accounts/components/service-account-columns.tsx b/web/sdk/react/views-new/service-accounts/components/service-account-columns.tsx
index a2a21439d..4c79a5709 100644
--- a/web/sdk/react/views-new/service-accounts/components/service-account-columns.tsx
+++ b/web/sdk/react/views-new/service-accounts/components/service-account-columns.tsx
@@ -12,6 +12,7 @@ import type { ServiceUser } from '@raystack/proton/frontier';
 import type { Timestamp } from '@bufbuild/protobuf/wkt';
 import { timestampToDayjs } from '../../../../utils/timestamp';
 import { ProjectsCell } from './projects-cell';
+import styles from './service-account-columns.module.css';
 
 export interface ServiceAccountMenuPayload {
   serviceAccountId: string;
@@ -47,6 +48,10 @@ export const getColumns = ({
     id: 'projects',
     accessorKey: 'id',
     enableSorting: false,
+    styles: {
+      cell: { maxWidth: '600px' },
+      header: { maxWidth: '600px' }
+    },
     cell: ({ getValue }) => {
       const serviceUserId = getValue() as string;
       return <ProjectsCell serviceUserId={serviceUserId} orgId={orgId} />;
@@ -55,6 +60,10 @@ export const getColumns = ({
   {
     header: 'Created On',
     accessorKey: 'createdAt',
+    styles: {
+      cell: { maxWidth: '300px' },
+      header: { maxWidth: '300px' }
+    },
     cell: ({ getValue }) => {
       const value = getValue() as Timestamp | undefined;
       return (
@@ -70,7 +79,8 @@ export const getColumns = ({
     accessorKey: 'id',
     enableSorting: false,
     styles: {
-      cell: { width: '48px' }
+      cell: { width: '48px', minWidth: '48px', maxWidth: '48px' },
+      header: { width: '48px', minWidth: '48px', maxWidth: '48px' }
     },
     cell: ({ getValue }) => {
       const serviceAccountId = getValue() as string;
@@ -78,7 +88,7 @@ export const getColumns = ({
       if (!canUpdateWorkspace) return null;
 
       return (
-        <Flex align="center" justify="center">
+        <Flex align="center" justify="center" className={styles.actionsCell}>
           <Menu.Trigger
             handle={menuHandle}
             payload={{
@@ -91,6 +101,7 @@ export const getColumns = ({
                 size={3}
                 aria-label="Service account actions"
                 data-test-id="frontier-sdk-service-account-actions-btn"
+                className={styles.actionButton}
               />
             }
           >
diff --git a/web/sdk/react/views-new/service-accounts/hooks/useServiceUserTokens.ts b/web/sdk/react/views-new/service-accounts/hooks/useServiceUserTokens.ts
new file mode 100644
index 000000000..e973342be
--- /dev/null
+++ b/web/sdk/react/views-new/service-accounts/hooks/useServiceUserTokens.ts
@@ -0,0 +1,130 @@
+import {
+  useQuery,
+  createConnectQueryKey,
+  useTransport
+} from '@connectrpc/connect-query';
+import { useMemo } from 'react';
+import { useQueryClient, type QueryClient } from '@tanstack/react-query';
+import { create } from '@bufbuild/protobuf';
+import {
+  FrontierServiceQueries,
+  ListServiceUserTokensRequestSchema,
+  ListServiceUserTokensResponseSchema,
+  type ServiceUserToken
+} from '@raystack/proton/frontier';
+
+interface UseServiceUserTokensOptions {
+  id: string;
+  orgId: string;
+  enableFetch?: boolean;
+}
+
+type FreshTokensMap = Record<string, ServiceUserToken>;
+
+const getFreshTokensCacheKey = (serviceUserId: string) =>
+  ['frontier:fresh-service-user-tokens', serviceUserId] as const;
+
+export const cacheFreshServiceUserToken = (
+  queryClient: QueryClient,
+  serviceUserId: string,
+  token: ServiceUserToken
+) => {
+  if (!token.id) return;
+  const key = getFreshTokensCacheKey(serviceUserId);
+  const prev = queryClient.getQueryData<FreshTokensMap>(key) ?? {};
+  queryClient.setQueryData(key, { ...prev, [token.id]: token });
+};
+
+export const useServiceUserTokens = ({
+  id,
+  orgId,
+  enableFetch
+}: UseServiceUserTokensOptions) => {
+  const queryClient = useQueryClient();
+  const transport = useTransport();
+
+  const { data: tokensData, isLoading } = useQuery(
+    FrontierServiceQueries.listServiceUserTokens,
+    create(ListServiceUserTokensRequestSchema, {
+      id,
+      orgId
+    }),
+    {
+      enabled: Boolean(id) && Boolean(orgId) && Boolean(enableFetch)
+    }
+  );
+
+  const freshTokensMap = queryClient.getQueryData<FreshTokensMap>(
+    getFreshTokensCacheKey(id)
+  );
+
+  const tokens = useMemo(() => {
+    const list = tokensData?.tokens ?? [];
+    if (!freshTokensMap) return list;
+    return list.map(t => {
+      if (!t?.id) return t;
+      const fresh = freshTokensMap[t.id];
+      return fresh?.token ? { ...t, token: fresh.token } : t;
+    });
+  }, [tokensData, freshTokensMap]);
+
+  const getQueryKey = () => {
+    return createConnectQueryKey({
+      schema: FrontierServiceQueries.listServiceUserTokens,
+      transport,
+      input: create(ListServiceUserTokensRequestSchema, {
+        id,
+        orgId
+      }),
+      cardinality: 'finite'
+    });
+  };
+
+  const addToken = (token: ServiceUserToken) => {
+    const queryKey = getQueryKey();
+    const currentData = queryClient.getQueryData(queryKey);
+    const existingTokens = currentData?.tokens ?? [];
+    const filteredTokens = existingTokens.filter(t => t !== undefined);
+    queryClient.setQueryData(
+      queryKey,
+      create(ListServiceUserTokensResponseSchema, {
+        tokens: [token, ...filteredTokens]
+      })
+    );
+    cacheFreshServiceUserToken(queryClient, id, token);
+  };
+
+  const removeToken = (tokenId: string) => {
+    const queryKey = getQueryKey();
+    const currentData = queryClient.getQueryData(queryKey);
+    const existingTokens = currentData?.tokens ?? [];
+    const filteredTokens = existingTokens.filter(
+      t => t?.id !== tokenId && t !== undefined
+    );
+    queryClient.setQueryData(
+      queryKey,
+      create(ListServiceUserTokensResponseSchema, {
+        tokens: filteredTokens
+      })
+    );
+
+    const freshKey = getFreshTokensCacheKey(id);
+    const prevFresh = queryClient.getQueryData<FreshTokensMap>(freshKey);
+    if (prevFresh && tokenId in prevFresh) {
+      const { [tokenId]: _removed, ...rest } = prevFresh;
+      queryClient.setQueryData(freshKey, rest);
+    }
+  };
+
+  const clearFreshTokens = () => {
+    queryClient.removeQueries({ queryKey: getFreshTokensCacheKey(id) });
+  };
+
+  return {
+    tokens,
+    isLoading,
+    addToken,
+    removeToken,
+    clearFreshTokens
+  };
+};
diff --git a/web/sdk/react/views-new/service-accounts/service-account-details-view.module.css b/web/sdk/react/views-new/service-accounts/service-account-details-view.module.css
index e9d71e182..ace8f3464 100644
--- a/web/sdk/react/views-new/service-accounts/service-account-details-view.module.css
+++ b/web/sdk/react/views-new/service-accounts/service-account-details-view.module.css
@@ -21,24 +21,32 @@
   border-bottom: none;
 }
 
-.tokenBox {
-  padding: var(--rs-space-3) var(--rs-space-4);
-  border-radius: var(--rs-radius-2);
-  border: 1px solid var(--rs-color-border-base-primary);
-  background: var(--rs-color-background-base-primary-hover);
-}
-
 .tokenText {
-  max-width: 90%;
   word-break: break-all;
 }
 
+.copyButton {
+  visibility: hidden;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.tokenItem:hover .copyButton {
+  visibility: visible;
+}
+
+.copySuccessIcon {
+  flex-shrink: 0;
+}
+
 .menuContent {
   min-width: 180px;
 }
 
 .manageAccessDialogContent {
-  max-height: 80vh;
+  max-height: 650px;
+  display: flex;
+  flex-direction: column;
 }
 
 .manageAccessDialogBody {
@@ -47,12 +55,14 @@
   overflow: hidden;
 }
 
+.manageAccessBodyInner {
+  flex: 1;
+  min-height: 0;
+}
+
 .manageAccessTableRoot {
   border: none;
-  max-height: 560px;
-  overflow: auto;
 }
-
 .accessSelectTrigger {
-  min-width: 120px;
+  width: 100%;
 }
diff --git a/web/sdk/react/views-new/service-accounts/service-account-details-view.tsx b/web/sdk/react/views-new/service-accounts/service-account-details-view.tsx
index e69b4cec5..01a22ca52 100644
--- a/web/sdk/react/views-new/service-accounts/service-account-details-view.tsx
+++ b/web/sdk/react/views-new/service-accounts/service-account-details-view.tsx
@@ -19,6 +19,7 @@ import {
   Image
 } from '@raystack/apsara-v1';
 import deleteIcon from '../../assets/delete.svg';
+import keyIcon from '../../assets/key.svg';
 import { useQuery } from '@connectrpc/connect-query';
 import { create } from '@bufbuild/protobuf';
 import {
@@ -31,7 +32,7 @@ import { useTerminology } from '../../hooks/useTerminology';
 import { usePermissions } from '../../hooks/usePermissions';
 import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
 import { PERMISSIONS, shouldShowComponent } from '../../../utils';
-import { useServiceUserTokens } from '../../views/api-keys/hooks/useServiceUserTokens';
+import { useServiceUserTokens } from './hooks/useServiceUserTokens';
 import { ViewContainer } from '../../components/view-container';
 import { ViewHeader } from '../../components/view-header';
 import { AddTokenForm } from './components/add-token-form';
@@ -84,7 +85,8 @@ export function ServiceAccountDetailsView({
     tokens: serviceUserTokens,
     isLoading: isTokensLoading,
     addToken,
-    removeToken
+    removeToken,
+    clearFreshTokens
   } = useServiceUserTokens({
     id: serviceAccountId,
     orgId,
@@ -113,32 +115,38 @@ export function ServiceAccountDetailsView({
     [permissions, resource]
   );
 
-  const isLoading = isServiceUserLoading || isTokensLoading || isPermissionsFetching;
+  const isLoading = !organization?.id || isServiceUserLoading || isTokensLoading || isPermissionsFetching;
 
   const serviceAccountTitle = serviceUser?.title || '';
 
+  const handleNavigateToServiceAccounts = useCallback(() => {
+    clearFreshTokens();
+    onNavigateToServiceAccounts?.();
+  }, [clearFreshTokens, onNavigateToServiceAccounts]);
+
   const handleDeleteSuccess = useCallback(() => {
+    clearFreshTokens();
     onDeleteSuccess?.();
-  }, [onDeleteSuccess]);
+  }, [clearFreshTokens, onDeleteSuccess]);
 
   return (
     <ViewContainer>
       <ViewHeader
-        title={isServiceUserLoading ? '' : serviceAccountTitle}
+        title={isLoading ? '' : serviceAccountTitle}
         breadcrumb={
           <Breadcrumb size="small">
             <Breadcrumb.Item
               href="#"
               onClick={(e: MouseEvent) => {
                 e.preventDefault();
-                onNavigateToServiceAccounts?.();
+                handleNavigateToServiceAccounts();
               }}
             >
               {serviceAccountsLabel}
             </Breadcrumb.Item>
             <Breadcrumb.Separator />
             <Breadcrumb.Item current>
-              {isServiceUserLoading ? (
+              {isLoading ? (
                 <Skeleton height="16px" width="100px" />
               ) : (
                 serviceAccountTitle
@@ -153,19 +161,23 @@ export function ServiceAccountDetailsView({
       </ViewHeader>
 
       <Flex direction="column" gap={7}>
-        {isServiceUserLoading ? (
-          <Skeleton height="20px" width="300px" />
+        {isLoading ? (
+          <>
+            <Skeleton height="20px" width="300px" />
+            <Skeleton height="20px" />
+          </>
         ) : (
-          <Text size="regular" variant="secondary">
-            Create API key for accessing {t.appName()} and its features
-          </Text>
+          <>
+            <Text size="regular" variant="secondary">
+              Create API key for accessing {t.appName()} and its features
+            </Text>
+            <AddTokenForm
+              serviceUserId={serviceAccountId}
+              onAddToken={addToken}
+            />
+          </>
         )}
 
-        <AddTokenForm
-          serviceUserId={serviceAccountId}
-          onAddToken={addToken}
-        />
-
         {serviceUserTokens.length > 0 && (
           <TokenList
             tokens={serviceUserTokens}
@@ -213,6 +225,14 @@ function ActionsMenu({ serviceAccountId }: ActionsMenuProps) {
       <Menu handle={actionsMenuHandle} modal={false}>
         <Menu.Content align="start" className={styles.menuContent}>
           <Menu.Item
+            leadingIcon={
+              <Image
+                src={keyIcon as unknown as string}
+                alt="Manage access"
+                width={16}
+                height={16}
+              />
+            }
             onClick={() => manageAccessDialogHandle.open(null)}
             data-test-id="frontier-sdk-service-account-manage-access-btn"
           >
@@ -301,26 +321,29 @@ function TokenItem({ token }: { token: ServiceUserToken }) {
         </Button>
       </Flex>
       {token?.token ? (
-        <Flex gap={3} direction="column">
+        <>
           <Text size="small" variant="secondary">
             Note: Please save your key securely, it cannot be recovered after
             leaving this page
           </Text>
-          <Flex className={styles.tokenBox} justify="between" gap={5} align="center">
+          <Flex align="center" gap={3}>
             <Text size="regular" weight="medium" className={styles.tokenText}>
               {encodedToken}
             </Text>
             {isCopied ? (
-              <CheckCircledIcon color="var(--rs-color-foreground-success-primary)" />
+              <CheckCircledIcon
+                color="var(--rs-color-foreground-success-primary)"
+                className={styles.copySuccessIcon}
+              />
             ) : (
               <CopyIcon
                 onClick={onCopy}
                 data-test-id="frontier-sdk-service-account-token-copy-btn"
-                style={{ cursor: 'pointer' }}
+                className={styles.copyButton}
               />
             )}
           </Flex>
-        </Flex>
+        </>
       ) : null}
     </Flex>
   );
diff --git a/web/sdk/react/views-new/service-accounts/service-accounts-view.module.css b/web/sdk/react/views-new/service-accounts/service-accounts-view.module.css
index 71f576f85..96262f0f9 100644
--- a/web/sdk/react/views-new/service-accounts/service-accounts-view.module.css
+++ b/web/sdk/react/views-new/service-accounts/service-accounts-view.module.css
@@ -2,6 +2,10 @@
   border: none;
 }
 
+.table {
+  table-layout: fixed;
+}
+
 .menuContent {
   min-width: 180px;
 }
diff --git a/web/sdk/react/views-new/service-accounts/service-accounts-view.tsx b/web/sdk/react/views-new/service-accounts/service-accounts-view.tsx
index caaaeaae7..5148b6c9d 100644
--- a/web/sdk/react/views-new/service-accounts/service-accounts-view.tsx
+++ b/web/sdk/react/views-new/service-accounts/service-accounts-view.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useMemo, useState } from 'react';
-import { ExclamationTriangleIcon, KeyboardIcon, TrashIcon } from '@radix-ui/react-icons';
+import { ExclamationTriangleIcon, KeyboardIcon } from '@radix-ui/react-icons';
 import {
   Button,
   Tooltip,
@@ -11,8 +11,11 @@ import {
   DataTable,
   Dialog,
   AlertDialog,
-  Menu
+  Menu,
+  Image
 } from '@raystack/apsara-v1';
+import deleteIcon from '../../assets/delete.svg';
+import keyIcon from '../../assets/key.svg';
 import { useQuery } from '@connectrpc/connect-query';
 import { create } from '@bufbuild/protobuf';
 import {
@@ -106,7 +109,7 @@ export function ServiceAccountsView({
   );
 
   const isPermissionsLoading =
-    isActiveOrganizationLoading || isPermissionsFetching;
+    !organization?.id || isActiveOrganizationLoading || isPermissionsFetching;
 
   const isLoading = isPermissionsLoading || isServiceUsersLoading;
 
@@ -219,7 +222,8 @@ export function ServiceAccountsView({
                 />
               }
               classNames={{
-                root: styles.tableRoot
+                root: styles.tableRoot,
+                table: styles.table
               }}
             />
           </Flex>
@@ -233,7 +237,14 @@ export function ServiceAccountsView({
             <Menu.Content align="end" className={styles.menuContent}>
               {payload?.canManageAccess && (
                 <Menu.Item
-                  leadingIcon={<KeyboardIcon />}
+                  leadingIcon={
+                    <Image
+                      src={keyIcon as unknown as string}
+                      alt="Manage access"
+                      width={16}
+                      height={16}
+                    />
+                  }
                   onClick={() => {
                     if (payload) {
                       setManageAccessServiceUserId(payload.serviceAccountId);
@@ -247,7 +258,14 @@ export function ServiceAccountsView({
               )}
               {payload?.canDelete && (
                 <Menu.Item
-                  leadingIcon={<TrashIcon />}
+                  leadingIcon={
+                    <Image
+                      src={deleteIcon as unknown as string}
+                      alt="Delete"
+                      width={16}
+                      height={16}
+                    />
+                  }
                   onClick={() =>
                     payload &&
                     deleteDialogHandle.openWithPayload({
@@ -255,6 +273,7 @@ export function ServiceAccountsView({
                     })
                   }
                   data-test-id="frontier-sdk-delete-account-menu-item"
+                  style={{ color: 'var(--rs-color-foreground-danger-primary)' }}
                 >
                   Delete Account
                 </Menu.Item>

From 79f063c51b4ab45ed627fa3f0e6b50e1fe2131cd Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Mon, 27 Apr 2026 03:16:18 +0530
Subject: [PATCH 2/9] fix: copy button usage

---
 .../service-account-details-view.module.css   |  5 ---
 .../service-account-details-view.tsx          | 41 +++++--------------
 2 files changed, 10 insertions(+), 36 deletions(-)

diff --git a/web/sdk/react/views-new/service-accounts/service-account-details-view.module.css b/web/sdk/react/views-new/service-accounts/service-account-details-view.module.css
index ace8f3464..afbb01ee7 100644
--- a/web/sdk/react/views-new/service-accounts/service-account-details-view.module.css
+++ b/web/sdk/react/views-new/service-accounts/service-account-details-view.module.css
@@ -28,17 +28,12 @@
 .copyButton {
   visibility: hidden;
   flex-shrink: 0;
-  cursor: pointer;
 }
 
 .tokenItem:hover .copyButton {
   visibility: visible;
 }
 
-.copySuccessIcon {
-  flex-shrink: 0;
-}
-
 .menuContent {
   min-width: 180px;
 }
diff --git a/web/sdk/react/views-new/service-accounts/service-account-details-view.tsx b/web/sdk/react/views-new/service-accounts/service-account-details-view.tsx
index 01a22ca52..dd33afee1 100644
--- a/web/sdk/react/views-new/service-accounts/service-account-details-view.tsx
+++ b/web/sdk/react/views-new/service-accounts/service-account-details-view.tsx
@@ -1,11 +1,7 @@
 'use client';
 
-import { useState, useMemo, useCallback, MouseEvent } from 'react';
-import {
-  DotsHorizontalIcon,
-  CheckCircledIcon,
-  CopyIcon
-} from '@radix-ui/react-icons';
+import { useMemo, useCallback, MouseEvent } from 'react';
+import { DotsHorizontalIcon } from '@radix-ui/react-icons';
 import {
   Breadcrumb,
   Skeleton,
@@ -16,7 +12,8 @@ import {
   AlertDialog,
   Dialog,
   IconButton,
-  Image
+  Image,
+  CopyButton
 } from '@raystack/apsara-v1';
 import deleteIcon from '../../assets/delete.svg';
 import keyIcon from '../../assets/key.svg';
@@ -30,7 +27,6 @@ import {
 import { useFrontier } from '../../contexts/FrontierContext';
 import { useTerminology } from '../../hooks/useTerminology';
 import { usePermissions } from '../../hooks/usePermissions';
-import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
 import { PERMISSIONS, shouldShowComponent } from '../../../utils';
 import { useServiceUserTokens } from './hooks/useServiceUserTokens';
 import { ViewContainer } from '../../components/view-container';
@@ -289,19 +285,8 @@ function TokenList({
 }
 
 function TokenItem({ token }: { token: ServiceUserToken }) {
-  const [isCopied, setIsCopied] = useState(false);
-  const { copy } = useCopyToClipboard();
-
   const encodedToken = 'Basic ' + btoa(`${token?.id}:${token?.token}`);
 
-  async function onCopy() {
-    const res = await copy(encodedToken);
-    if (res) {
-      setIsCopied(true);
-      setTimeout(() => setIsCopied(false), 1000);
-    }
-  }
-
   return (
     <Flex className={styles.tokenItem} direction="column" gap={3}>
       <Flex justify="between" align="center">
@@ -330,18 +315,12 @@ function TokenItem({ token }: { token: ServiceUserToken }) {
             <Text size="regular" weight="medium" className={styles.tokenText}>
               {encodedToken}
             </Text>
-            {isCopied ? (
-              <CheckCircledIcon
-                color="var(--rs-color-foreground-success-primary)"
-                className={styles.copySuccessIcon}
-              />
-            ) : (
-              <CopyIcon
-                onClick={onCopy}
-                data-test-id="frontier-sdk-service-account-token-copy-btn"
-                className={styles.copyButton}
-              />
-            )}
+            <CopyButton
+              text={encodedToken}
+              size={2}
+              className={styles.copyButton}
+              data-test-id="frontier-sdk-service-account-token-copy-btn"
+            />
           </Flex>
         </>
       ) : null}

From 04e6ecc6bf3fab78a76733e823b05a5b98a17269 Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Mon, 27 Apr 2026 03:30:23 +0530
Subject: [PATCH 3/9] chore: update import paths

---
 .../components/add-service-account-dialog.tsx |  6 +++---
 .../components/add-token-form.tsx             |  2 +-
 .../delete-service-account-dialog.tsx         |  2 +-
 .../manage-project-access-dialog.tsx          |  4 ++--
 .../components/revoke-token-dialog.tsx        |  4 ++--
 .../components/service-account-columns.tsx    |  2 +-
 .../service-account-details-view.tsx          | 16 +++++++--------
 .../service-accounts-view.tsx                 | 20 +++++++++----------
 web/sdk/tsconfig.json                         |  3 +++
 9 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/web/sdk/react/views-new/service-accounts/components/add-service-account-dialog.tsx b/web/sdk/react/views-new/service-accounts/components/add-service-account-dialog.tsx
index fc7cdb71e..783cd16cc 100644
--- a/web/sdk/react/views-new/service-accounts/components/add-service-account-dialog.tsx
+++ b/web/sdk/react/views-new/service-accounts/components/add-service-account-dialog.tsx
@@ -36,9 +36,9 @@ import {
   Skeleton,
   toastManager
 } from '@raystack/apsara-v1';
-import { PERMISSIONS } from '../../../../utils';
-import { useFrontier } from '../../../contexts/FrontierContext';
-import { useTerminology } from '../../../hooks/useTerminology';
+import { PERMISSIONS } from '~/utils';
+import { useFrontier } from '~/react/contexts/FrontierContext';
+import { useTerminology } from '~/react/hooks/useTerminology';
 import { cacheFreshServiceUserToken } from '../hooks/useServiceUserTokens';
 
 const DEFAULT_KEY_NAME = 'Initial Generated Key';
diff --git a/web/sdk/react/views-new/service-accounts/components/add-token-form.tsx b/web/sdk/react/views-new/service-accounts/components/add-token-form.tsx
index 6c2cc511d..2f99aaa15 100644
--- a/web/sdk/react/views-new/service-accounts/components/add-token-form.tsx
+++ b/web/sdk/react/views-new/service-accounts/components/add-token-form.tsx
@@ -12,7 +12,7 @@ import {
   CreateServiceUserTokenRequestSchema,
   type ServiceUserToken
 } from '@raystack/proton/frontier';
-import { useFrontier } from '../../../contexts/FrontierContext';
+import { useFrontier } from '~/react/contexts/FrontierContext';
 import styles from '../service-account-details-view.module.css';
 
 const tokenSchema = yup
diff --git a/web/sdk/react/views-new/service-accounts/components/delete-service-account-dialog.tsx b/web/sdk/react/views-new/service-accounts/components/delete-service-account-dialog.tsx
index f2eb2291c..b1de80cd2 100644
--- a/web/sdk/react/views-new/service-accounts/components/delete-service-account-dialog.tsx
+++ b/web/sdk/react/views-new/service-accounts/components/delete-service-account-dialog.tsx
@@ -15,7 +15,7 @@ import {
   Flex,
   toastManager
 } from '@raystack/apsara-v1';
-import { useFrontier } from '../../../contexts/FrontierContext';
+import { useFrontier } from '~/react/contexts/FrontierContext';
 import { useQueryClient } from '@tanstack/react-query';
 import styles from './delete-service-account-dialog.module.css';
 
diff --git a/web/sdk/react/views-new/service-accounts/components/manage-project-access-dialog.tsx b/web/sdk/react/views-new/service-accounts/components/manage-project-access-dialog.tsx
index ad1d230f1..209001e4f 100644
--- a/web/sdk/react/views-new/service-accounts/components/manage-project-access-dialog.tsx
+++ b/web/sdk/react/views-new/service-accounts/components/manage-project-access-dialog.tsx
@@ -26,8 +26,8 @@ import {
   type Policy
 } from '@raystack/proton/frontier';
 import { orderBy } from 'lodash';
-import { useFrontier } from '../../../contexts/FrontierContext';
-import { PERMISSIONS } from '../../../../utils';
+import { useFrontier } from '~/react/contexts/FrontierContext';
+import { PERMISSIONS } from '~/utils';
 import styles from '../service-account-details-view.module.css';
 
 const PROJECT_ROLES = [
diff --git a/web/sdk/react/views-new/service-accounts/components/revoke-token-dialog.tsx b/web/sdk/react/views-new/service-accounts/components/revoke-token-dialog.tsx
index ef8222743..4828901ba 100644
--- a/web/sdk/react/views-new/service-accounts/components/revoke-token-dialog.tsx
+++ b/web/sdk/react/views-new/service-accounts/components/revoke-token-dialog.tsx
@@ -14,8 +14,8 @@ import {
   Flex,
   toastManager
 } from '@raystack/apsara-v1';
-import { useFrontier } from '../../../contexts/FrontierContext';
-import { useTerminology } from '../../../hooks/useTerminology';
+import { useFrontier } from '~/react/contexts/FrontierContext';
+import { useTerminology } from '~/react/hooks/useTerminology';
 import styles from './revoke-token-dialog.module.css';
 
 export type RevokeTokenPayload = { tokenId: string };
diff --git a/web/sdk/react/views-new/service-accounts/components/service-account-columns.tsx b/web/sdk/react/views-new/service-accounts/components/service-account-columns.tsx
index 4c79a5709..6d6869dfd 100644
--- a/web/sdk/react/views-new/service-accounts/components/service-account-columns.tsx
+++ b/web/sdk/react/views-new/service-accounts/components/service-account-columns.tsx
@@ -10,7 +10,7 @@ import {
 } from '@raystack/apsara-v1';
 import type { ServiceUser } from '@raystack/proton/frontier';
 import type { Timestamp } from '@bufbuild/protobuf/wkt';
-import { timestampToDayjs } from '../../../../utils/timestamp';
+import { timestampToDayjs } from '~/utils/timestamp';
 import { ProjectsCell } from './projects-cell';
 import styles from './service-account-columns.module.css';
 
diff --git a/web/sdk/react/views-new/service-accounts/service-account-details-view.tsx b/web/sdk/react/views-new/service-accounts/service-account-details-view.tsx
index dd33afee1..61b410e01 100644
--- a/web/sdk/react/views-new/service-accounts/service-account-details-view.tsx
+++ b/web/sdk/react/views-new/service-accounts/service-account-details-view.tsx
@@ -15,8 +15,8 @@ import {
   Image,
   CopyButton
 } from '@raystack/apsara-v1';
-import deleteIcon from '../../assets/delete.svg';
-import keyIcon from '../../assets/key.svg';
+import deleteIcon from '~/react/assets/delete.svg';
+import keyIcon from '~/react/assets/key.svg';
 import { useQuery } from '@connectrpc/connect-query';
 import { create } from '@bufbuild/protobuf';
 import {
@@ -24,13 +24,13 @@ import {
   GetServiceUserRequestSchema,
   type ServiceUserToken
 } from '@raystack/proton/frontier';
-import { useFrontier } from '../../contexts/FrontierContext';
-import { useTerminology } from '../../hooks/useTerminology';
-import { usePermissions } from '../../hooks/usePermissions';
-import { PERMISSIONS, shouldShowComponent } from '../../../utils';
+import { useFrontier } from '~/react/contexts/FrontierContext';
+import { useTerminology } from '~/react/hooks/useTerminology';
+import { usePermissions } from '~/react/hooks/usePermissions';
+import { PERMISSIONS, shouldShowComponent } from '~/utils';
 import { useServiceUserTokens } from './hooks/useServiceUserTokens';
-import { ViewContainer } from '../../components/view-container';
-import { ViewHeader } from '../../components/view-header';
+import { ViewContainer } from '~/react/components/view-container';
+import { ViewHeader } from '~/react/components/view-header';
 import { AddTokenForm } from './components/add-token-form';
 import {
   RevokeTokenDialog,
diff --git a/web/sdk/react/views-new/service-accounts/service-accounts-view.tsx b/web/sdk/react/views-new/service-accounts/service-accounts-view.tsx
index 5148b6c9d..915d1de0b 100644
--- a/web/sdk/react/views-new/service-accounts/service-accounts-view.tsx
+++ b/web/sdk/react/views-new/service-accounts/service-accounts-view.tsx
@@ -14,22 +14,22 @@ import {
   Menu,
   Image
 } from '@raystack/apsara-v1';
-import deleteIcon from '../../assets/delete.svg';
-import keyIcon from '../../assets/key.svg';
+import deleteIcon from '~/react/assets/delete.svg';
+import keyIcon from '~/react/assets/key.svg';
 import { useQuery } from '@connectrpc/connect-query';
 import { create } from '@bufbuild/protobuf';
 import {
   FrontierServiceQueries,
   ListOrganizationServiceUsersRequestSchema
 } from '@raystack/proton/frontier';
-import { useFrontier } from '../../contexts/FrontierContext';
-import { usePermissions } from '../../hooks/usePermissions';
-import { useTerminology } from '../../hooks/useTerminology';
-import { AuthTooltipMessage } from '../../utils';
-import { PERMISSIONS, shouldShowComponent } from '../../../utils';
-import { DEFAULT_DATE_FORMAT } from '../../utils/constants';
-import { ViewContainer } from '../../components/view-container';
-import { ViewHeader } from '../../components/view-header';
+import { useFrontier } from '~/react/contexts/FrontierContext';
+import { usePermissions } from '~/react/hooks/usePermissions';
+import { useTerminology } from '~/react/hooks/useTerminology';
+import { AuthTooltipMessage } from '~/react/utils';
+import { PERMISSIONS, shouldShowComponent } from '~/utils';
+import { DEFAULT_DATE_FORMAT } from '~/react/utils/constants';
+import { ViewContainer } from '~/react/components/view-container';
+import { ViewHeader } from '~/react/components/view-header';
 import {
   getColumns,
   type ServiceAccountMenuPayload
diff --git a/web/sdk/tsconfig.json b/web/sdk/tsconfig.json
index ae6ee0f0a..522fe167e 100644
--- a/web/sdk/tsconfig.json
+++ b/web/sdk/tsconfig.json
@@ -9,6 +9,9 @@
       "DOM"
     ],
     "paths": {
+      "~/utils": [
+        "./utils/index.ts"
+      ],
       "~/*": [
         "./*"
       ],

From 7992ad276b2f4bd019d5a59ead81ff74b434b116 Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Mon, 27 Apr 2026 05:04:00 +0530
Subject: [PATCH 4/9] fix: billing and plans page

---
 .../src/pages/settings/Billing.tsx            |   5 +-
 web/sdk/react/hooks/useBillingPermission.ts   |  13 +-
 .../views-new/billing/billing-view.module.css |   8 +-
 .../react/views-new/billing/billing-view.tsx  | 169 +++++++----
 .../components/billing-details-card.tsx       |  50 ++--
 .../components/billing-details-dialog.tsx     | 263 ------------------
 .../confirm-cycle-switch-dialog.tsx           |  13 +-
 .../views-new/billing/components/invoices.tsx | 160 ++++++-----
 .../billing/components/payment-issue.tsx      |   5 +-
 .../components/payment-method-card.tsx        |  50 ++--
 .../components/upcoming-billing-cycle.tsx     |  18 +-
 .../upcoming-plan-change-banner.tsx           |   5 +-
 .../components/confirm-plan-change-dialog.tsx |   1 -
 .../plans/components/feature-table.tsx        |  38 ++-
 .../plans/components/plan-card.module.css     |  20 +-
 .../views-new/plans/components/plan-card.tsx  |   5 +-
 web/sdk/react/views-new/plans/plans-view.tsx  |  44 ++-
 17 files changed, 390 insertions(+), 477 deletions(-)
 delete mode 100644 web/sdk/react/views-new/billing/components/billing-details-dialog.tsx

diff --git a/web/apps/client-demo/src/pages/settings/Billing.tsx b/web/apps/client-demo/src/pages/settings/Billing.tsx
index 77183ec7b..bb32fa610 100644
--- a/web/apps/client-demo/src/pages/settings/Billing.tsx
+++ b/web/apps/client-demo/src/pages/settings/Billing.tsx
@@ -1,5 +1,8 @@
 import { BillingView } from '@raystack/frontier/react';
+import { useNavigate, useParams } from 'react-router-dom';
 
 export default function Billing() {
-  return <BillingView />;
+  const { orgId } = useParams<{ orgId: string }>();
+  const navigate = useNavigate();
+  return <BillingView onNavigateToPlans={() => navigate(`/${orgId}/settings/plans`)} />;
 }
diff --git a/web/sdk/react/hooks/useBillingPermission.ts b/web/sdk/react/hooks/useBillingPermission.ts
index 293253628..50d22fb47 100644
--- a/web/sdk/react/hooks/useBillingPermission.ts
+++ b/web/sdk/react/hooks/useBillingPermission.ts
@@ -12,6 +12,10 @@ export const useBillingPermission = () => {
       {
         permission: PERMISSIONS.DeletePermission,
         resource
+      },
+      {
+        permission: PERMISSIONS.UpdatePermission,
+        resource
       }
     ],
     [resource]
@@ -22,17 +26,22 @@ export const useBillingPermission = () => {
     !!activeOrganization?.id
   );
 
-  const { isAllowed } = useMemo(() => {
+  const { isAllowed, canSeeBilling } = useMemo(() => {
     return {
       isAllowed: shouldShowComponent(
         permissions,
         `${PERMISSIONS.DeletePermission}::${resource}`
+      ),
+      canSeeBilling: shouldShowComponent(
+        permissions,
+        `${PERMISSIONS.UpdatePermission}::${resource}`
       )
     };
   }, [permissions, resource]);
 
   return {
     isFetching,
-    isAllowed
+    isAllowed,
+    canSeeBilling
   };
 };
diff --git a/web/sdk/react/views-new/billing/billing-view.module.css b/web/sdk/react/views-new/billing/billing-view.module.css
index b4c5572c4..947c8879c 100644
--- a/web/sdk/react/views-new/billing/billing-view.module.css
+++ b/web/sdk/react/views-new/billing/billing-view.module.css
@@ -40,12 +40,6 @@
   text-align: right;
 }
 
-.linkColumn > a {
+.viewInvoiceBtn {
   color: var(--rs-color-foreground-accent-primary);
-  text-decoration: none;
-}
-
-.dialogFormBody {
-  max-height: 424px;
-  overflow-y: auto;
 }
diff --git a/web/sdk/react/views-new/billing/billing-view.tsx b/web/sdk/react/views-new/billing/billing-view.tsx
index 36f7e5d9d..0e464b149 100644
--- a/web/sdk/react/views-new/billing/billing-view.tsx
+++ b/web/sdk/react/views-new/billing/billing-view.tsx
@@ -1,12 +1,18 @@
 'use client';
 
-import { useEffect, useMemo } from 'react';
-import { Flex, Dialog, toastManager } from '@raystack/apsara-v1';
+import { useCallback, useEffect, useMemo } from 'react';
+import qs from 'query-string';
+import { Flex, Dialog, EmptyState, toastManager } from '@raystack/apsara-v1';
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import {
+  CreateCheckoutRequestSchema,
   ListInvoicesRequestSchema,
   FrontierServiceQueries
 } from '@raystack/proton/frontier';
-import { useQuery as useConnectQuery } from '@connectrpc/connect-query';
+import {
+  useMutation,
+  useQuery as useConnectQuery
+} from '@connectrpc/connect-query';
 import { create } from '@bufbuild/protobuf';
 import { useFrontier } from '../../contexts/FrontierContext';
 import { useBillingPermission } from '../../hooks/useBillingPermission';
@@ -22,11 +28,9 @@ import {
   ConfirmCycleSwitchDialog,
   type ConfirmCycleSwitchPayload
 } from './components/confirm-cycle-switch-dialog';
-import { BillingDetailsDialog } from './components/billing-details-dialog';
 
 const cycleSwitchDialogHandle =
   Dialog.createHandle<ConfirmCycleSwitchPayload>();
-const billingDetailsDialogHandle = Dialog.createHandle();
 
 export interface BillingViewProps {
   onNavigateToPlans?: () => void;
@@ -45,7 +49,10 @@ export function BillingView({ onNavigateToPlans }: BillingViewProps) {
     activeOrganization
   } = useFrontier();
 
-  const { isAllowed, isFetching } = useBillingPermission();
+  const { isAllowed, canSeeBilling, isFetching } = useBillingPermission();
+
+  const isPermissionsLoading = !activeOrganization?.id || isFetching;
+  const hasNoAccess = !canSeeBilling && !isPermissionsLoading;
 
   const {
     data: invoicesData,
@@ -58,7 +65,7 @@ export function BillingView({ onNavigateToPlans }: BillingViewProps) {
       nonzeroAmountOnly: true
     }),
     {
-      enabled: !!activeOrganization?.id
+      enabled: !!activeOrganization?.id && canSeeBilling
     }
   );
 
@@ -74,7 +81,7 @@ export function BillingView({ onNavigateToPlans }: BillingViewProps) {
     }
   }, [invoicesError]);
 
-  const isLoading =
+  const isLoading = !activeOrganization?.id ||
     isBillingAccountLoading ||
     isActiveSubscriptionLoading ||
     isInvoicesLoading ||
@@ -93,54 +100,116 @@ export function BillingView({ onNavigateToPlans }: BillingViewProps) {
     cycleSwitchDialogHandle.openWithPayload({ planId });
   }
 
-  function handleBillingDetailsUpdateClick() {
-    billingDetailsDialogHandle.open(null);
-  }
+  const { mutateAsync: createCheckoutMutation, isPending: isCheckoutPending } =
+    useMutation(FrontierServiceQueries.createCheckout, {
+      onError: (err: Error) => {
+        toastManager.add({
+          title: 'Something went wrong',
+          description: err?.message,
+          type: 'error'
+        });
+      }
+    });
+
+  const handleBillingDetailsUpdateClick = useCallback(async () => {
+    const orgId = activeOrganization?.id || '';
+    if (!orgId) return;
+
+    try {
+      const query = qs.stringify(
+        {
+          details: btoa(
+            qs.stringify({
+              organization_id: orgId,
+              type: 'billing'
+            })
+          ),
+          checkout_id: '{{.CheckoutID}}'
+        },
+        { encode: false }
+      );
+      const cancel_url = `${config?.billing?.cancelUrl}?${query}`;
+      const success_url = `${config?.billing?.successUrl}?${query}`;
+
+      const resp = await createCheckoutMutation(
+        create(CreateCheckoutRequestSchema, {
+          orgId,
+          cancelUrl: cancel_url,
+          successUrl: success_url,
+          setupBody: {
+            paymentMethod: false,
+            customerPortal: true
+          }
+        })
+      );
+      const checkoutUrl = resp?.checkoutSession?.checkoutUrl;
+      if (checkoutUrl) {
+        window.location.href = checkoutUrl;
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }, [
+    activeOrganization?.id,
+    createCheckoutMutation,
+    config?.billing?.cancelUrl,
+    config?.billing?.successUrl
+  ]);
 
   return (
     <ViewContainer>
       <ViewHeader title="Billing" description={description} />
 
-      <Flex direction="column" gap={7}>
-        <PaymentIssue
-          isLoading={isLoading}
-          subscription={activeSubscription}
-          invoices={invoices}
-        />
-
-        <UpcomingPlanChangeBanner
-          isLoading={isLoading}
-          subscription={activeSubscription}
-          isAllowed={isAllowed}
-        />
-
-        <Flex gap={7}>
-          <PaymentMethodCard
-            paymentMethod={paymentMethod}
-            isLoading={isLoading}
-            isAllowed={isAllowed}
-          />
-          <BillingDetailsCard
-            billingAccount={billingAccount}
-            isLoading={isLoading}
-            isAllowed={isAllowed}
-            disabled={isOrganizationKycCompleted}
-            onUpdateClick={handleBillingDetailsUpdateClick}
-          />
-        </Flex>
-
-        <UpcomingBillingCycle
-          isAllowed={isAllowed}
-          isPermissionLoading={isFetching}
-          onCycleSwitchClick={handleCycleSwitchClick}
-          onNavigateToPlans={onNavigateToPlans}
+      {hasNoAccess ? (
+        <EmptyState
+          icon={<ExclamationTriangleIcon />}
+          heading="Restricted Access"
+          subHeading="Admin access required, please reach out to your admin to view billing."
         />
-
-        <Invoices />
-      </Flex>
-
-      <ConfirmCycleSwitchDialog handle={cycleSwitchDialogHandle} />
-      <BillingDetailsDialog handle={billingDetailsDialogHandle} />
+      ) : (
+        <>
+          <Flex direction="column" gap={7}>
+            <PaymentIssue
+              isLoading={isLoading}
+              subscription={activeSubscription}
+              invoices={invoices}
+            />
+
+            <UpcomingPlanChangeBanner
+              isLoading={isLoading}
+              subscription={activeSubscription}
+              isAllowed={isAllowed}
+            />
+
+            <Flex gap={7}>
+              <PaymentMethodCard
+                paymentMethod={paymentMethod}
+                isLoading={isLoading}
+                isAllowed={isAllowed}
+              />
+              <BillingDetailsCard
+                billingAccount={billingAccount}
+                isLoading={isLoading}
+                isAllowed={isAllowed}
+                disabled={isOrganizationKycCompleted}
+                isActionLoading={isCheckoutPending}
+                onUpdateClick={handleBillingDetailsUpdateClick}
+              />
+            </Flex>
+
+            <UpcomingBillingCycle
+              isAllowed={isAllowed}
+              isPermissionLoading={isPermissionsLoading}
+              onCycleSwitchClick={handleCycleSwitchClick}
+              onNavigateToPlans={onNavigateToPlans}
+            />
+
+            <Invoices />
+          </Flex>
+
+          <ConfirmCycleSwitchDialog handle={cycleSwitchDialogHandle} />
+        </>
+      )}
     </ViewContainer>
   );
 }
diff --git a/web/sdk/react/views-new/billing/components/billing-details-card.tsx b/web/sdk/react/views-new/billing/components/billing-details-card.tsx
index a28f0abd3..84d658964 100644
--- a/web/sdk/react/views-new/billing/components/billing-details-card.tsx
+++ b/web/sdk/react/views-new/billing/components/billing-details-card.tsx
@@ -10,6 +10,7 @@ interface BillingDetailsCardProps {
   isLoading: boolean;
   isAllowed: boolean;
   disabled?: boolean;
+  isActionLoading?: boolean;
   onUpdateClick?: () => void;
 }
 
@@ -18,11 +19,12 @@ export function BillingDetailsCard({
   isLoading,
   isAllowed,
   disabled = false,
+  isActionLoading = false,
   onUpdateClick
 }: BillingDetailsCardProps) {
   const btnText =
     billingAccount?.email || billingAccount?.name ? 'Update' : 'Add details';
-  const isButtonDisabled = isLoading || disabled;
+  const isButtonDisabled = isLoading || disabled || isActionLoading;
 
   const address = convertBillingAddressToString(billingAccount?.address);
 
@@ -32,7 +34,7 @@ export function BillingDetailsCard({
         <Text size="regular" weight="medium">
           Billing details
         </Text>
-        {isAllowed ? (
+        {!isLoading && isAllowed ? (
           <Tooltip>
             <Tooltip.Trigger
               disabled={!isButtonDisabled}
@@ -44,6 +46,8 @@ export function BillingDetailsCard({
                 size="small"
                 onClick={onUpdateClick}
                 disabled={isButtonDisabled}
+                loading={isActionLoading}
+                loaderText={btnText}
                 data-test-id="frontier-sdk-billing-details-update-button"
               >
                 {btnText}
@@ -57,22 +61,32 @@ export function BillingDetailsCard({
           </Tooltip>
         ) : null}
       </Flex>
-      <Flex direction="column" gap={2}>
-        <Text size="mini" weight="medium" variant="secondary">
-          Name
-        </Text>
-        <Text size="regular">
-          {isLoading ? <Skeleton /> : billingAccount?.name || 'N/A'}
-        </Text>
-      </Flex>
-      <Flex direction="column" gap={2}>
-        <Text size="mini" weight="medium" variant="secondary">
-          Address
-        </Text>
-        <Text size="regular">
-          {isLoading ? <Skeleton /> : address || 'N/A'}
-        </Text>
-      </Flex>
+      {isLoading ? (
+        <Flex direction="column" gap={2}>
+          <Skeleton height={16} width={60} />
+          <Skeleton height={20} width={250} />
+        </Flex>
+      ) : (
+        <Flex direction="column" gap={2}>
+          <Text size="mini" weight="medium" variant="secondary">
+            Name
+          </Text>
+          <Text size="regular">{billingAccount?.name || 'N/A'}</Text>
+        </Flex>
+      )}
+      {isLoading ? (
+        <Flex direction="column" gap={2}>
+          <Skeleton height={16} width={80} />
+          <Skeleton height={20} width={300} />
+        </Flex>
+      ) : (
+        <Flex direction="column" gap={2}>
+          <Text size="mini" weight="medium" variant="secondary">
+            Address
+          </Text>
+          <Text size="regular">{address || 'N/A'}</Text>
+        </Flex>
+      )}
     </div>
   );
 }
diff --git a/web/sdk/react/views-new/billing/components/billing-details-dialog.tsx b/web/sdk/react/views-new/billing/components/billing-details-dialog.tsx
deleted file mode 100644
index f82957ebb..000000000
--- a/web/sdk/react/views-new/billing/components/billing-details-dialog.tsx
+++ /dev/null
@@ -1,263 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-import { useForm } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as yup from 'yup';
-import {
-  createConnectQueryKey,
-  useMutation
-} from '@connectrpc/connect-query';
-import { useQueryClient } from '@tanstack/react-query';
-import {
-  Button,
-  Dialog,
-  Flex,
-  InputField,
-  Skeleton,
-  toastManager
-} from '@raystack/apsara-v1';
-import { create } from '@bufbuild/protobuf';
-import {
-  FrontierServiceQueries,
-  UpdateBillingAccountRequestSchema,
-  BillingAccountRequestBodySchema,
-  BillingAccount_AddressSchema,
-  BillingAccount_TaxSchema,
-  type BillingAccount
-} from '@raystack/proton/frontier';
-import { useFrontier } from '../../../contexts/FrontierContext';
-import styles from '../billing-view.module.css';
-
-type DialogHandle = ReturnType<typeof Dialog.createHandle>;
-
-const billingDetailsSchema = yup.object({
-  name: yup.string().required('Name is required'),
-  email: yup.string().email('Invalid email').required('Email is required'),
-  address: yup.string().optional(),
-  postalCode: yup.string().optional(),
-  city: yup.string().optional(),
-  state: yup.string().optional(),
-  country: yup.string().optional(),
-  taxId: yup.string().optional()
-});
-
-type BillingDetailsFormData = yup.InferType<typeof billingDetailsSchema>;
-
-export interface BillingDetailsDialogProps {
-  handle: DialogHandle;
-}
-
-export function BillingDetailsDialog({ handle }: BillingDetailsDialogProps) {
-  const { billingAccount, isBillingAccountLoading } = useFrontier();
-
-  return (
-    <Dialog handle={handle}>
-      {() => (
-        <BillingDetailsContent
-          handle={handle}
-          billingAccount={billingAccount}
-          isLoading={isBillingAccountLoading}
-        />
-      )}
-    </Dialog>
-  );
-}
-
-interface BillingDetailsContentProps {
-  handle: DialogHandle;
-  billingAccount?: BillingAccount;
-  isLoading: boolean;
-}
-
-function BillingDetailsContent({
-  handle,
-  billingAccount,
-  isLoading
-}: BillingDetailsContentProps) {
-  const queryClient = useQueryClient();
-
-  const { mutateAsync: updateBillingAccount, isPending } = useMutation(
-    FrontierServiceQueries.updateBillingAccount,
-    {
-      onSuccess: () => {
-        queryClient.invalidateQueries({
-          queryKey: createConnectQueryKey({
-            schema: FrontierServiceQueries.getBillingAccount,
-            cardinality: 'finite'
-          })
-        });
-      }
-    }
-  );
-
-  const {
-    reset,
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting }
-  } = useForm<BillingDetailsFormData>({
-    resolver: yupResolver(billingDetailsSchema)
-  });
-
-  useEffect(() => {
-    if (billingAccount) {
-      reset({
-        name: billingAccount.name || '',
-        email: billingAccount.email || '',
-        address: billingAccount.address?.line1 || '',
-        postalCode: billingAccount.address?.postalCode || '',
-        city: billingAccount.address?.city || '',
-        state: billingAccount.address?.state || '',
-        country: billingAccount.address?.country || '',
-        taxId: billingAccount.taxData?.[0]?.id || ''
-      });
-    }
-  }, [billingAccount, reset]);
-
-  async function onSubmit(data: BillingDetailsFormData) {
-    if (!billingAccount?.id) return;
-    try {
-      const taxData = data.taxId
-        ? [
-            create(BillingAccount_TaxSchema, {
-              id: data.taxId,
-              type: billingAccount.taxData?.[0]?.type || ''
-            })
-          ]
-        : [];
-
-      await updateBillingAccount(
-        create(UpdateBillingAccountRequestSchema, {
-          id: billingAccount.id,
-          body: create(BillingAccountRequestBodySchema, {
-            name: data.name,
-            email: data.email,
-            address: create(BillingAccount_AddressSchema, {
-              line1: data.address || '',
-              line2: billingAccount.address?.line2 || '',
-              city: data.city || '',
-              state: data.state || '',
-              postalCode: data.postalCode || '',
-              country: data.country || ''
-            }),
-            taxData
-          })
-        })
-      );
-
-      handle.close();
-      toastManager.add({
-        title: 'Billing details updated',
-        type: 'success'
-      });
-    } catch (err: unknown) {
-      toastManager.add({
-        title: 'Something went wrong',
-        description:
-          err instanceof Error ? err.message : 'Failed to update billing details',
-        type: 'error'
-      });
-    }
-  }
-
-  const isBusy = isSubmitting || isPending;
-
-  return (
-    <Dialog.Content width={480}>
-      <Dialog.Header>
-        <Dialog.Title>Billing details</Dialog.Title>
-      </Dialog.Header>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <Dialog.Body>
-          <Flex direction="column" gap={7} className={styles.dialogFormBody}>
-            {isLoading ? (
-              <>
-                <Skeleton height="58px" />
-                <Skeleton height="58px" />
-                <Skeleton height="58px" />
-              </>
-            ) : (
-              <>
-                <InputField
-                  label="Name"
-                  size="large"
-                  {...register('name')}
-                  error={errors.name?.message}
-                />
-                <InputField
-                  label="Email"
-                  size="large"
-                  type="email"
-                  {...register('email')}
-                  error={errors.email?.message}
-                />
-                <InputField
-                  label="Address"
-                  size="large"
-                  {...register('address')}
-                  error={errors.address?.message}
-                />
-                <InputField
-                  label="Pincode"
-                  size="large"
-                  {...register('postalCode')}
-                  error={errors.postalCode?.message}
-                />
-                <InputField
-                  label="City"
-                  size="large"
-                  {...register('city')}
-                  error={errors.city?.message}
-                />
-                <InputField
-                  label="State"
-                  size="large"
-                  {...register('state')}
-                  error={errors.state?.message}
-                />
-                <InputField
-                  label="Country"
-                  size="large"
-                  {...register('country')}
-                  error={errors.country?.message}
-                />
-                <InputField
-                  label="Tax ID"
-                  size="large"
-                  optional
-                  {...register('taxId')}
-                  error={errors.taxId?.message}
-                />
-              </>
-            )}
-          </Flex>
-        </Dialog.Body>
-        <Dialog.Footer>
-          <Flex justify="end" gap={5}>
-            <Button
-              variant="outline"
-              color="neutral"
-              type="button"
-              onClick={() => handle.close()}
-              data-test-id="frontier-sdk-billing-details-cancel-button"
-            >
-              Cancel
-            </Button>
-            <Button
-              variant="solid"
-              color="accent"
-              type="submit"
-              disabled={isLoading || isBusy}
-              loading={isBusy}
-              loaderText="Updating..."
-              data-test-id="frontier-sdk-billing-details-update-button"
-            >
-              Update
-            </Button>
-          </Flex>
-        </Dialog.Footer>
-      </form>
-    </Dialog.Content>
-  );
-}
diff --git a/web/sdk/react/views-new/billing/components/confirm-cycle-switch-dialog.tsx b/web/sdk/react/views-new/billing/components/confirm-cycle-switch-dialog.tsx
index 0649ffaaf..a50904dac 100644
--- a/web/sdk/react/views-new/billing/components/confirm-cycle-switch-dialog.tsx
+++ b/web/sdk/react/views-new/billing/components/confirm-cycle-switch-dialog.tsx
@@ -2,6 +2,7 @@
 
 import { useMemo } from 'react';
 import {
+  Amount,
   Button,
   Skeleton,
   Text,
@@ -40,6 +41,7 @@ export function ConfirmCycleSwitchDialog({
     isAllPlansLoading
   } = useFrontier();
   const dateFormat = config?.dateFormat || DEFAULT_DATE_FORMAT;
+  const hideDecimals = config?.billing?.hideDecimals;
 
   const {
     checkoutPlan,
@@ -64,6 +66,7 @@ export function ConfirmCycleSwitchDialog({
             paymentMethod={paymentMethod}
             activeSubscription={activeSubscription}
             dateFormat={dateFormat}
+            hideDecimals={hideDecimals}
             isLoading={isLoading}
             isPlanActionLoading={isPlanActionLoading}
             checkoutPlan={checkoutPlan}
@@ -84,6 +87,7 @@ interface ConfirmCycleSwitchContentProps {
   paymentMethod: ReturnType<typeof useFrontier>['paymentMethod'];
   activeSubscription: ReturnType<typeof useFrontier>['activeSubscription'];
   dateFormat: string;
+  hideDecimals?: boolean;
   isLoading: boolean;
   isPlanActionLoading: boolean;
   checkoutPlan: ReturnType<typeof usePlans>['checkoutPlan'];
@@ -99,6 +103,7 @@ function ConfirmCycleSwitchContent({
   paymentMethod,
   activeSubscription,
   dateFormat,
+  hideDecimals,
   isLoading,
   isPlanActionLoading,
   checkoutPlan,
@@ -243,8 +248,12 @@ function ConfirmCycleSwitchContent({
             <Text size="small" variant="secondary">
               You can save{' '}
               <Text as="span" size="small" weight="medium">
-                {savings.currency === 'usd' ? '$' : ''}
-                {savings.amount}
+                <Amount
+                  value={savings.amount}
+                  currency={savings.currency}
+                  valueInMinorUnits={false}
+                  hideDecimals={hideDecimals}
+                />
               </Text>{' '}
               with {savings.interval} cycle.
             </Text>
diff --git a/web/sdk/react/views-new/billing/components/invoices.tsx b/web/sdk/react/views-new/billing/components/invoices.tsx
index d60ce684a..6a2873ae6 100644
--- a/web/sdk/react/views-new/billing/components/invoices.tsx
+++ b/web/sdk/react/views-new/billing/components/invoices.tsx
@@ -14,7 +14,9 @@ import type {
   DataTableQuery,
   DataTableSort
 } from '@raystack/apsara-v1';
-import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
+import {
+  ExclamationTriangleIcon,
+} from '@radix-ui/react-icons';
 import { useInfiniteQuery } from '@connectrpc/connect-query';
 import {
   FrontierServiceQueries,
@@ -58,77 +60,82 @@ const getColumns = ({
   SearchOrganizationInvoicesResponse_OrganizationInvoice,
   unknown
 >[] => [
-  {
-    header: 'Date',
-    id: 'created_at',
-    accessorKey: 'createdAt',
-    enableSorting: true,
-    cell: ({ getValue }) => {
-      const value = getValue() as TimeStamp;
-      const date = timestampToDayjs(value);
-      return (
-        <Text size="regular" variant="secondary">
-          {date ? date.format(dateFormat) : '-'}
-        </Text>
-      );
-    }
-  },
-  {
-    header: 'Status',
-    accessorKey: 'state',
-    enableSorting: true,
-    enableHiding: true,
-    enableGrouping: true,
-    groupLabelsMap: InvoiceStatusesMap,
-    showGroupCount: true,
-    groupCountMap: groupCountMap['state'] || {},
-    cell: ({ getValue }) => {
-      const value = getValue() as keyof typeof InvoiceStatusesMap;
-      return (
-        <Text size="regular" variant="secondary">
-          {InvoiceStatusesMap[value] ?? capitalize(value as string)}
-        </Text>
-      );
-    }
-  },
-  {
-    header: 'Amount',
-    accessorKey: 'amount',
-    enableSorting: true,
-    enableHiding: true,
-    cell: ({ row, getValue }) => {
-      const value = Number(getValue());
-      return (
-        <Text size="regular" variant="secondary">
-          <Amount currency={row?.original?.currency} value={value} />
-        </Text>
-      );
-    }
-  },
-  {
-    header: '',
-    accessorKey: 'invoiceLink',
-    enableSorting: false,
-    classNames: {
-      cell: styles.linkColumn
+    {
+      header: 'Date',
+      id: 'created_at',
+      accessorKey: 'createdAt',
+      enableSorting: true,
+      cell: ({ getValue }) => {
+        const value = getValue() as TimeStamp;
+        const date = timestampToDayjs(value);
+        return (
+          <Text size="regular" variant="secondary">
+            {date ? date.format(dateFormat) : '-'}
+          </Text>
+        );
+      }
     },
-    cell: ({ getValue }) => {
-      const link = getValue() as string;
-      if (!link) return null;
-      return (
-        <Button
-          variant="text"
-          color="neutral"
-          size="small"
-          onClick={() => window.open(link, '_blank', 'noopener,noreferrer')}
-          data-test-id="frontier-sdk-view-invoice-link"
-        >
-          View invoice
-        </Button>
-      );
+    {
+      header: 'Status',
+      accessorKey: 'state',
+      enableSorting: true,
+      enableHiding: true,
+      enableGrouping: true,
+      groupLabelsMap: InvoiceStatusesMap,
+      showGroupCount: true,
+      groupCountMap: groupCountMap['state'] || {},
+      cell: ({ getValue }) => {
+        const value = getValue() as keyof typeof InvoiceStatusesMap;
+        return (
+          <Text size="regular" variant="secondary">
+            {InvoiceStatusesMap[value] ?? capitalize(value as string)}
+          </Text>
+        );
+      }
+    },
+    {
+      header: 'Amount',
+      accessorKey: 'amount',
+      enableSorting: true,
+      enableHiding: true,
+      cell: ({ row, getValue }) => {
+        const value = Number(getValue());
+        return (
+          <Text size="regular" variant="secondary">
+            <Amount currency={row?.original?.currency} value={value} />
+          </Text>
+        );
+      }
+    },
+    {
+      header: '',
+      accessorKey: 'invoiceLink',
+      enableSorting: false,
+      classNames: {
+        cell: styles.linkColumn
+      },
+      styles: {
+        cell: { width: '120px', maxWidth: '120px' },
+        header: { width: '120px', maxWidth: '120px' }
+      },
+      cell: ({ getValue }) => {
+        const link = getValue() as string;
+        if (!link) return null;
+        return (
+          <Button
+            variant="text"
+            color="neutral"
+            size="small"
+            className={styles.viewInvoiceBtn}
+            onClick={() => window.open(link, '_blank', 'noopener,noreferrer')}
+            data-test-id="frontier-sdk-view-invoice-link"
+          >
+            View invoice
+          </Button>
+        );
+      }
     }
-  }
-];
+  ];
 
 const NoInvoices = () => (
   <EmptyState
@@ -185,7 +192,7 @@ export function Invoices() {
       infiniteData?.pages?.flatMap(page => page.organizationInvoices) ?? [],
     [infiniteData]
   );
-  const loading = (isLoading || isFetchingNextPage) && !isError;
+  const loading = (!activeOrganization?.id || isLoading || isFetchingNextPage) && !isError;
 
   const onTableQueryChange = (newQuery: DataTableQuery) => {
     setTableQuery(newQuery);
@@ -212,14 +219,21 @@ export function Invoices() {
       columns={columns}
       data={invoices}
       isLoading={loading}
+      loadingRowCount={5}
       defaultSort={DEFAULT_SORT}
       mode="server"
       onTableQueryChange={onTableQueryChange}
       onLoadMore={fetchMore}
       query={tableQuery}
     >
-      <Flex direction="column" style={{ width: '100%' }}>
-        <DataTable.Toolbar />
+      <Flex direction="column" gap={4} style={{ width: '100%' }}>
+        <Flex justify="between" align="center">
+          <Text size="small" weight="medium">
+            Billing transactions
+          </Text>
+          <DataTable.DisplayControls
+          />
+        </Flex>
         <DataTable.Content
           emptyState={isError ? <ErrorState /> : <NoInvoices />}
         />
diff --git a/web/sdk/react/views-new/billing/components/payment-issue.tsx b/web/sdk/react/views-new/billing/components/payment-issue.tsx
index 4d2d5cd81..9a815385e 100644
--- a/web/sdk/react/views-new/billing/components/payment-issue.tsx
+++ b/web/sdk/react/views-new/billing/components/payment-issue.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useCallback } from 'react';
-import { Button, Skeleton, Text, Flex } from '@raystack/apsara-v1';
+import { Button, Text, Flex } from '@raystack/apsara-v1';
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import { INVOICE_STATES, SUBSCRIPTION_STATES } from '../../../utils/constants';
 import { Subscription, Invoice } from '@raystack/proton/frontier';
@@ -33,8 +33,7 @@ export function PaymentIssue({
     window.location.href = openInvoices[0]?.hostedUrl || '';
   }, [openInvoices]);
 
-  if (isLoading) return <Skeleton />;
-  if (!isPastDue) return null;
+  if (isLoading || !isPastDue) return null;
 
   return (
     <Flex className={styles.paymentIssueBox} justify="between" align="center">
diff --git a/web/sdk/react/views-new/billing/components/payment-method-card.tsx b/web/sdk/react/views-new/billing/components/payment-method-card.tsx
index a3e619613..762e3f7ae 100644
--- a/web/sdk/react/views-new/billing/components/payment-method-card.tsx
+++ b/web/sdk/react/views-new/billing/components/payment-method-card.tsx
@@ -90,6 +90,8 @@ export function PaymentMethodCard({
 
   const isBtnDisabled = isLoading || isActionLoading;
 
+  const actionBtnText = isPaymentMethodAvailable ? 'Update' : 'Add method';
+
   const actionBtn = (
     <Button
       variant="outline"
@@ -97,9 +99,11 @@ export function PaymentMethodCard({
       size="small"
       onClick={updatePaymentMethod}
       disabled={isBtnDisabled}
+      loading={isActionLoading}
+      loaderText={actionBtnText}
       data-test-id="frontier-sdk-update-payment-method-btn"
     >
-      {isPaymentMethodAvailable ? 'Update' : 'Add method'}
+      {actionBtnText}
     </Button>
   );
 
@@ -109,7 +113,7 @@ export function PaymentMethodCard({
         <Text size="regular" weight="medium">
           Payment method
         </Text>
-        {isAllowed ? (
+        {!isLoading && isAllowed ? (
           isBtnDisabled ? (
             <Tooltip>
               <Tooltip.Trigger render={<span />}>
@@ -122,22 +126,32 @@ export function PaymentMethodCard({
           ) : actionBtn
         ) : null}
       </Flex>
-      <Flex direction="column" gap={2}>
-        <Text size="mini" weight="medium" variant="secondary">
-          Card information
-        </Text>
-        <Text size="regular">
-          {isLoading ? <Skeleton /> : cardInfo}
-        </Text>
-      </Flex>
-      <Flex direction="column" gap={2}>
-        <Text size="mini" weight="medium" variant="secondary">
-          Expiry
-        </Text>
-        <Text size="regular">
-          {isLoading ? <Skeleton /> : cardExp}
-        </Text>
-      </Flex>
+      {isLoading ? (
+        <Flex direction="column" gap={2}>
+          <Skeleton height={16} width={100} />
+          <Skeleton height={20} width={250} />
+        </Flex>
+      ) : (
+        <Flex direction="column" gap={2}>
+          <Text size="mini" weight="medium" variant="secondary">
+            Card information
+          </Text>
+          <Text size="regular">{cardInfo}</Text>
+        </Flex>
+      )}
+      {isLoading ? (
+        <Flex direction="column" gap={2}>
+          <Skeleton height={16} width={60} />
+          <Skeleton height={20} width={150} />
+        </Flex>
+      ) : (
+        <Flex direction="column" gap={2}>
+          <Text size="mini" weight="medium" variant="secondary">
+            Expiry
+          </Text>
+          <Text size="regular">{cardExp}</Text>
+        </Flex>
+      )}
     </div>
   );
 }
diff --git a/web/sdk/react/views-new/billing/components/upcoming-billing-cycle.tsx b/web/sdk/react/views-new/billing/components/upcoming-billing-cycle.tsx
index 1a2fe3d38..1c2aa9830 100644
--- a/web/sdk/react/views-new/billing/components/upcoming-billing-cycle.tsx
+++ b/web/sdk/react/views-new/billing/components/upcoming-billing-cycle.tsx
@@ -57,9 +57,11 @@ export function UpcomingBillingCycle({
 }: UpcomingBillingCycleProps) {
   const {
     billingAccount,
+    isBillingAccountLoading,
     config,
     activeSubscription,
     trialSubscription,
+    isActiveSubscriptionLoading,
     isActiveOrganizationLoading,
     basePlan,
     allPlans,
@@ -119,13 +121,13 @@ export function UpcomingBillingCycle({
   const planInfo =
     activeSubscription || basePlan
       ? {
-          message: `You are subscribed to ${planName}.`,
-          action: { label: 'Upgrade' }
-        }
+        message: `You are subscribed to ${planName}.`,
+        action: { label: 'Upgrade' }
+      }
       : {
-          message: 'You are not subscribed to any plan',
-          action: { label: 'Subscribe' }
-        };
+        message: 'You are not subscribed to any plan',
+        action: { label: 'Subscribe' }
+      };
 
   const alreadyPhased = activeSubscription?.phases?.find(
     phase => phase.planId === switchablePlan?.id
@@ -143,6 +145,8 @@ export function UpcomingBillingCycle({
 
   const isLoading =
     isActiveOrganizationLoading ||
+    isBillingAccountLoading ||
+    isActiveSubscriptionLoading ||
     isInvoiceLoading ||
     isMemberCountLoading ||
     isAllPlansLoading ||
@@ -151,7 +155,7 @@ export function UpcomingBillingCycle({
   const isUserOnlyTrialing = !activeSubscription?.id && trialSubscription?.id;
   const dueDate = upcomingInvoice?.dueDate || upcomingInvoice?.periodEndAt;
 
-  if (isLoading) return <Skeleton />;
+  if (isLoading) return <Skeleton height={49} />;
 
   if (dueDate && !isUserOnlyTrialing) {
     const switchableIntervalName = switchablePlan
diff --git a/web/sdk/react/views-new/billing/components/upcoming-plan-change-banner.tsx b/web/sdk/react/views-new/billing/components/upcoming-plan-change-banner.tsx
index 3d45bda04..e6f368ed4 100644
--- a/web/sdk/react/views-new/billing/components/upcoming-plan-change-banner.tsx
+++ b/web/sdk/react/views-new/billing/components/upcoming-plan-change-banner.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useCallback, useMemo } from 'react';
-import { Button, Skeleton, Text, Flex, toastManager } from '@raystack/apsara-v1';
+import { Button, Text, Flex, toastManager } from '@raystack/apsara-v1';
 import { InfoCircledIcon } from '@radix-ui/react-icons';
 import { useFrontier } from '../../../contexts/FrontierContext';
 import {
@@ -132,8 +132,7 @@ export function UpcomingPlanChangeBanner({
     nextPhase?.planId ||
     (subscription?.state === 'active' && nextPhase?.reason === 'cancel');
 
-  if (showLoader) return <Skeleton />;
-  if (!showBanner) return null;
+  if (showLoader || !showBanner) return null;
 
   return (
     <Flex className={styles.currentPlanInfoBox} justify="between" align="center">
diff --git a/web/sdk/react/views-new/plans/components/confirm-plan-change-dialog.tsx b/web/sdk/react/views-new/plans/components/confirm-plan-change-dialog.tsx
index 5874db06e..5d42195fb 100644
--- a/web/sdk/react/views-new/plans/components/confirm-plan-change-dialog.tsx
+++ b/web/sdk/react/views-new/plans/components/confirm-plan-change-dialog.tsx
@@ -250,7 +250,6 @@ function ConfirmPlanChangeContent({
                   value={amount || 0}
                   currency={currency}
                   hideDecimals={config?.billing?.hideDecimals}
-                  valueInMinorUnits={false}
                 />
               </Text>
             </Text>
diff --git a/web/sdk/react/views-new/plans/components/feature-table.tsx b/web/sdk/react/views-new/plans/components/feature-table.tsx
index bbda2116f..11889b02f 100644
--- a/web/sdk/react/views-new/plans/components/feature-table.tsx
+++ b/web/sdk/react/views-new/plans/components/feature-table.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Flex, Image, Text } from '@raystack/apsara-v1';
+import { Flex, Image, Skeleton, Text } from '@raystack/apsara-v1';
 import { InfoCircledIcon } from '@radix-ui/react-icons';
 import { get } from 'lodash';
 import {
@@ -45,13 +45,47 @@ export interface FeatureTableProps {
   features: string[];
   plans: PlanIntervalPricing[];
   selectedIntervals: Record<string, IntervalKeys>;
+  isLoading?: boolean;
 }
 
+const SKELETON_ROW_COUNT = 5;
+
 export function FeatureTable({
   features,
   plans,
-  selectedIntervals
+  selectedIntervals,
+  isLoading = false
 }: FeatureTableProps) {
+  if (isLoading) {
+    return (
+      <Flex className={styles.table}>
+        <Flex direction="column" className={styles.featureColumn}>
+          {Array.from({ length: SKELETON_ROW_COUNT }).map((_, i) => (
+            <Flex key={i} className={styles.cell}>
+              <Skeleton height={16} width="60%" />
+            </Flex>
+          ))}
+        </Flex>
+        {plans.map(plan => (
+          <Flex
+            key={plan.slug}
+            direction="column"
+            className={styles.planColumn}
+          >
+            {Array.from({ length: SKELETON_ROW_COUNT }).map((_, i) => (
+              <Flex
+                key={i}
+                className={`${styles.cell} ${styles.valueCell}`}
+              >
+                <Skeleton height={16} width={40} />
+              </Flex>
+            ))}
+          </Flex>
+        ))}
+      </Flex>
+    );
+  }
+
   if (features.length === 0) return null;
 
   return (
diff --git a/web/sdk/react/views-new/plans/components/plan-card.module.css b/web/sdk/react/views-new/plans/components/plan-card.module.css
index a07856fdc..91db2d03e 100644
--- a/web/sdk/react/views-new/plans/components/plan-card.module.css
+++ b/web/sdk/react/views-new/plans/components/plan-card.module.css
@@ -4,7 +4,8 @@
   gap: var(--rs-space-6);
   width: 272px;
   min-width: 272px;
-  padding: var(--rs-space-5) var(--rs-space-5) var(--rs-space-9) var(--rs-space-5);
+  padding: var(--rs-space-5) var(--rs-space-5) var(--rs-space-9)
+    var(--rs-space-5);
   box-sizing: border-box;
   background: var(--rs-color-background-base-primary);
 }
@@ -23,3 +24,20 @@
   min-height: 32px;
   width: 100%;
 }
+
+.intervalTabs {
+  align-items: center;
+}
+
+.intervalTabsList {
+  width: fit-content;
+}
+
+.intervalTab {
+  height: var(--rs-space-5);
+  padding: 0 var(--rs-space-2);
+  font-size: var(--rs-font-size-mini);
+  font-weight: var(--rs-font-weight-medium);
+  line-height: var(--rs-line-height-mini);
+  letter-spacing: var(--rs-letter-spacing-mini);
+}
diff --git a/web/sdk/react/views-new/plans/components/plan-card.tsx b/web/sdk/react/views-new/plans/components/plan-card.tsx
index f57887343..40adc91fa 100644
--- a/web/sdk/react/views-new/plans/components/plan-card.tsx
+++ b/web/sdk/react/views-new/plans/components/plan-card.tsx
@@ -179,7 +179,6 @@ export function PlanCard({
                   value={amount || 0}
                   currency={selectedIntervalPricing?.currency}
                   hideDecimals={config?.billing?.hideDecimals}
-                  valueInMinorUnits={false}
                 />
               </Text>
               <Text size="small" variant="secondary">
@@ -208,12 +207,14 @@ export function PlanCard({
           <Tabs
             value={selectedInterval}
             onValueChange={value => onIntervalChange(value as IntervalKeys)}
+            className={styles.intervalTabs}
           >
-            <Tabs.List>
+            <Tabs.List className={styles.intervalTabsList}>
               {planIntervals.map(key => (
                 <Tabs.Tab
                   value={key}
                   key={key}
+                  className={styles.intervalTab}
                   data-test-id={`frontier-sdk-plan-interval-toggle-${plan.slug}-${key}`}
                 >
                   {IntervalLabelMap[key]}
diff --git a/web/sdk/react/views-new/plans/plans-view.tsx b/web/sdk/react/views-new/plans/plans-view.tsx
index eeafc8c7d..0437e8138 100644
--- a/web/sdk/react/views-new/plans/plans-view.tsx
+++ b/web/sdk/react/views-new/plans/plans-view.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import {
   Dialog,
   EmptyState,
@@ -41,14 +41,14 @@ export function PlansView() {
     isActiveOrganizationLoading,
     basePlan,
     allPlans,
-    isAllPlansLoading
+    isAllPlansLoading,
+    activeOrganization,
   } = useFrontier();
-  console.log({ basePlan, allPlans });
 
   const { isFetching: isPermissionsFetching, isAllowed: canChangePlan } =
     useBillingPermission();
 
-  const { data: featuresData } = useQuery(
+  const { data: featuresData, isLoading: isFeaturesLoading } = useQuery(
     FrontierServiceQueries.listFeatures,
     create(ListFeaturesRequestSchema, {})
   );
@@ -71,7 +71,7 @@ export function PlansView() {
     [plans]
   );
 
-  const isLoading =
+  const isLoading = !activeOrganization?.id ||
     isAllPlansLoading ||
     isPermissionsFetching ||
     isActiveSubscriptionLoading ||
@@ -96,30 +96,28 @@ export function PlansView() {
       .filter(Boolean);
   }, [features, totalFeatures]);
 
-  const [selectedIntervals, setSelectedIntervals] = useState<
+  const [intervalOverrides, setIntervalOverrides] = useState<
     Record<string, IntervalKeys>
   >({});
 
-  useEffect(() => {
-    if (groupedPlans.length === 0) return;
-
-    const defaults: Record<string, IntervalKeys> = {};
+  const selectedIntervals = useMemo<Record<string, IntervalKeys>>(() => {
+    const result: Record<string, IntervalKeys> = {};
     groupedPlans.forEach(plan => {
-      if (selectedIntervals[plan.slug]) return;
-      const planIntervals = Object.values(plan.intervals)
+      if (intervalOverrides[plan.slug]) {
+        result[plan.slug] = intervalOverrides[plan.slug];
+        return;
+      }
+      const sortedIntervals = Object.values(plan.intervals)
         .sort((a, b) => a.weightage - b.weightage)
         .map(i => i.interval);
       const activePlanInterval = Object.values(plan.intervals).find(
         p => p.planId === activeSubscription?.planId
       );
-      defaults[plan.slug] =
-        activePlanInterval?.interval || planIntervals[0] || 'year';
+      result[plan.slug] =
+        activePlanInterval?.interval || sortedIntervals[0] || 'year';
     });
-
-    if (Object.keys(defaults).length > 0) {
-      setSelectedIntervals(prev => ({ ...prev, ...defaults }));
-    }
-  }, [groupedPlans, activeSubscription?.planId]);
+    return result;
+  }, [groupedPlans, activeSubscription?.planId, intervalOverrides]);
 
   let currentPlanPricing: IntervalPricingWithPlan | undefined;
   groupedPlans.forEach(group => {
@@ -177,12 +175,9 @@ export function PlansView() {
             key={plan.slug}
             plan={plan}
             currentPlan={currentPlanPricing}
-            selectedInterval={
-              selectedIntervals[plan.slug] ||
-              Object.keys(plan.intervals)[0] as IntervalKeys
-            }
+            selectedInterval={selectedIntervals[plan.slug]}
             onIntervalChange={interval =>
-              setSelectedIntervals(prev => ({
+              setIntervalOverrides(prev => ({
                 ...prev,
                 [plan.slug]: interval
               }))
@@ -199,6 +194,7 @@ export function PlansView() {
         features={sortedFeatures}
         plans={groupedPlans}
         selectedIntervals={selectedIntervals}
+        isLoading={isFeaturesLoading}
       />
 
       <ConfirmPlanChangeDialog handle={confirmPlanChangeHandle} />

From 66226c1fab6eeaa439ff355e7599803081a547ac Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Mon, 27 Apr 2026 05:20:10 +0530
Subject: [PATCH 5/9] fix: plans table overflow bug

---
 .../react/components/view-container/view-container.module.css  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web/sdk/react/components/view-container/view-container.module.css b/web/sdk/react/components/view-container/view-container.module.css
index bc5c01e87..34144ad8b 100644
--- a/web/sdk/react/components/view-container/view-container.module.css
+++ b/web/sdk/react/components/view-container/view-container.module.css
@@ -2,10 +2,11 @@
   background-color: var(--rs-color-background-base-primary);
   width: 100%;
   height: 100%;
-  padding: var(--rs-space-9) var(--rs-space-11);
   overflow: auto;
 }
 
 .content {
   width: 100%;
+  padding: var(--rs-space-9) var(--rs-space-11);
+  box-sizing: border-box;
 }

From 2294ec836cfc1a99b7fd9f220672371d90d7a1f3 Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Mon, 27 Apr 2026 23:07:43 +0530
Subject: [PATCH 6/9] fix: remove console log and fix loading

---
 web/sdk/react/views-new/preferences/preferences-view.tsx | 1 -
 web/sdk/react/views-new/tokens/tokens-view.tsx           | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/sdk/react/views-new/preferences/preferences-view.tsx b/web/sdk/react/views-new/preferences/preferences-view.tsx
index 42bbf25a0..002d1de40 100644
--- a/web/sdk/react/views-new/preferences/preferences-view.tsx
+++ b/web/sdk/react/views-new/preferences/preferences-view.tsx
@@ -17,7 +17,6 @@ export function PreferencesView({ children }: PreferencesViewProps) {
   const { theme, setTheme } = useTheme();
   const { preferences, isLoading, isFetching, updatePreferences } =
     usePreferences({});
-  console.log(theme);
 
   const newsletterValue =
     preferences?.[PREFERENCE_OPTIONS.NEWSLETTER]?.value ?? 'false';
diff --git a/web/sdk/react/views-new/tokens/tokens-view.tsx b/web/sdk/react/views-new/tokens/tokens-view.tsx
index 16bd9e578..23c569cd2 100644
--- a/web/sdk/react/views-new/tokens/tokens-view.tsx
+++ b/web/sdk/react/views-new/tokens/tokens-view.tsx
@@ -80,6 +80,7 @@ export function TokensView() {
   }, [transactionsError]);
 
   const isLoading =
+    !activeOrganization?.id ||
     isActiveOrganizationLoading ||
     isBillingAccountLoading ||
     isTokensLoading ||

From 4a46e24f929b668c4fb7ee199003eeb370b6d13b Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Tue, 28 Apr 2026 12:13:13 +0530
Subject: [PATCH 7/9] chore: add optional toast and theme support

---
 web/sdk/react/contexts/FrontierProvider.tsx | 26 ++++++++++++++++++---
 web/sdk/shared/types.ts                     |  2 ++
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/web/sdk/react/contexts/FrontierProvider.tsx b/web/sdk/react/contexts/FrontierProvider.tsx
index ffe76500b..ceb7d3157 100644
--- a/web/sdk/react/contexts/FrontierProvider.tsx
+++ b/web/sdk/react/contexts/FrontierProvider.tsx
@@ -6,8 +6,9 @@ import { withMaxAllowedInstancesGuard } from './useMaxAllowedInstancesGuard';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { TransportProvider } from '@connectrpc/connect-query';
 import { createConnectTransport } from '@connectrpc/connect-web';
-import { useMemo } from 'react';
+import { ComponentType, ReactNode, useMemo } from 'react';
 import { createFetchWithCreds } from '../utils/fetch';
+import { Toast } from '@raystack/apsara-v1';
 
 export const multipleFrontierProvidersError =
   "Frontier: You've added multiple <FrontierProvider> components in your React component tree. Wrap your components in a single <FrontierProvider>.";
@@ -15,7 +16,7 @@ export const multipleFrontierProvidersError =
 export const queryClient = new QueryClient();
 
 export const FrontierProvider = (props: FrontierProviderProps) => {
-  const { children, initialState, config, theme, customHeaders, ...options } =
+  const { children, initialState, config, theme, customHeaders, renderThemeProvider = true, renderToastProvider = true, ...options } =
     props;
 
   const transport = useMemo(
@@ -36,7 +37,11 @@ export const FrontierProvider = (props: FrontierProviderProps) => {
             config={config}
             {...options}
           >
-            <ThemeProvider {...theme}>{children}</ThemeProvider>
+            <OptionalProvider provider={ThemeProvider} shouldRender={renderThemeProvider} providerProps={theme}>
+              <OptionalProvider provider={Toast.Provider} shouldRender={renderToastProvider}>
+                {children}
+              </OptionalProvider>
+            </OptionalProvider>
           </FrontierContextProvider>
         </CustomizationProvider>
       </TransportProvider>
@@ -51,3 +56,18 @@ export const FrontierProviderGaurd =
     'FrontierProvider',
     multipleFrontierProvidersError
   );
+
+export const OptionalProvider = <T extends { children?: ReactNode }>({
+  children,
+  provider: Provider,
+  shouldRender = true,
+  providerProps
+}: {
+  children?: ReactNode;
+  provider: ComponentType<T>;
+  shouldRender?: boolean;
+  providerProps?: Omit<T, 'children'>;
+}) => {
+  if (shouldRender) return <Provider {...(providerProps as T)}>{children}</Provider>;
+  return children
+};
\ No newline at end of file
diff --git a/web/sdk/shared/types.ts b/web/sdk/shared/types.ts
index 7e07f7cc0..d9ea47f43 100644
--- a/web/sdk/shared/types.ts
+++ b/web/sdk/shared/types.ts
@@ -60,4 +60,6 @@ export interface FrontierProviderProps {
   initialState?: InitialState;
   customHeaders?: Record<string, CustomHeaderValue>;
   theme?: ThemeProviderProps;
+  renderToastProvider?: boolean;
+  renderThemeProvider?: boolean;
 }

From 9668eefc1622b551c88c10c88c711f0e7913bedb Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Tue, 28 Apr 2026 15:46:37 +0530
Subject: [PATCH 8/9] fix: fix table column shift

---
 web/sdk/react/views-new/billing/components/invoices.tsx    | 4 +++-
 .../react/views-new/members/components/member-columns.tsx  | 3 ++-
 web/sdk/react/views-new/members/members-view.module.css    | 3 +++
 web/sdk/react/views-new/members/members-view.tsx           | 3 ++-
 .../react/views-new/projects/components/member-columns.tsx | 7 ++++++-
 .../views-new/projects/components/project-columns.tsx      | 7 ++++++-
 .../views-new/projects/project-details-view.module.css     | 4 ++++
 web/sdk/react/views-new/projects/project-details-view.tsx  | 3 ++-
 web/sdk/react/views-new/projects/projects-view.module.css  | 4 ++++
 web/sdk/react/views-new/projects/projects-view.tsx         | 3 ++-
 .../react/views-new/teams/components/member-columns.tsx    | 7 ++++++-
 web/sdk/react/views-new/teams/team-details-view.module.css | 4 ++++
 web/sdk/react/views-new/teams/team-details-view.tsx        | 3 ++-
 13 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/web/sdk/react/views-new/billing/components/invoices.tsx b/web/sdk/react/views-new/billing/components/invoices.tsx
index 6a2873ae6..c674a539b 100644
--- a/web/sdk/react/views-new/billing/components/invoices.tsx
+++ b/web/sdk/react/views-new/billing/components/invoices.tsx
@@ -234,7 +234,9 @@ export function Invoices() {
           <DataTable.DisplayControls
           />
         </Flex>
-        <DataTable.Content
+        <DataTable.VirtualizedContent
+          rowHeight={48}
+          groupHeaderHeight={48}
           emptyState={isError ? <ErrorState /> : <NoInvoices />}
         />
       </Flex>
diff --git a/web/sdk/react/views-new/members/components/member-columns.tsx b/web/sdk/react/views-new/members/components/member-columns.tsx
index 19717b076..9915db22e 100644
--- a/web/sdk/react/views-new/members/components/member-columns.tsx
+++ b/web/sdk/react/views-new/members/components/member-columns.tsx
@@ -111,7 +111,8 @@ export const getColumns = ({
       accessorKey: 'id',
       enableSorting: false,
       styles: {
-        cell: { width: '48px' }
+        cell: { width: '48px' },
+        header: { width: '48px' }
       },
       cell: ({ row }) => {
         const member = row.original;
diff --git a/web/sdk/react/views-new/members/members-view.module.css b/web/sdk/react/views-new/members/members-view.module.css
index f3df5d5d0..78da80ac9 100644
--- a/web/sdk/react/views-new/members/members-view.module.css
+++ b/web/sdk/react/views-new/members/members-view.module.css
@@ -8,6 +8,9 @@
   border: none;
 }
 
+.table {
+  table-layout: fixed;
+}
 
 .menuContent {
   min-width: 180px;
diff --git a/web/sdk/react/views-new/members/members-view.tsx b/web/sdk/react/views-new/members/members-view.tsx
index a3131685d..a5fc80f96 100644
--- a/web/sdk/react/views-new/members/members-view.tsx
+++ b/web/sdk/react/views-new/members/members-view.tsx
@@ -188,7 +188,8 @@ export function MembersView({ showTeamField = true }: MembersViewProps) {
               />
             }
             classNames={{
-              root: styles.tableRoot
+              root: styles.tableRoot,
+              table: styles.table
             }}
           />
         </Flex>
diff --git a/web/sdk/react/views-new/projects/components/member-columns.tsx b/web/sdk/react/views-new/projects/components/member-columns.tsx
index 7bd4e763a..738c04276 100644
--- a/web/sdk/react/views-new/projects/components/member-columns.tsx
+++ b/web/sdk/react/views-new/projects/components/member-columns.tsx
@@ -75,6 +75,10 @@ export function getColumns({
     {
       header: 'Role',
       accessorKey: 'email',
+      styles: {
+        cell: { maxWidth: '300px' },
+        header: { maxWidth: '300px' }
+      },
       cell: ({ row }) => {
         const member = row.original;
         const roleList = member.isTeam
@@ -95,7 +99,8 @@ export function getColumns({
       accessorKey: 'id',
       enableSorting: false,
       styles: {
-        cell: { width: '32px' }
+        cell: { width: '32px' },
+        header: { width: '32px' }
       },
       cell: ({ row }) => {
         if (!canUpdateProject) return null;
diff --git a/web/sdk/react/views-new/projects/components/project-columns.tsx b/web/sdk/react/views-new/projects/components/project-columns.tsx
index 6a7515897..3a759e9b1 100644
--- a/web/sdk/react/views-new/projects/components/project-columns.tsx
+++ b/web/sdk/react/views-new/projects/components/project-columns.tsx
@@ -57,6 +57,10 @@ export const getColumns = ({
       header: 'Members',
       accessorKey: 'membersCount',
       enableSorting: false,
+      styles: {
+        cell: { maxWidth: '300px' },
+        header: { maxWidth: '300px' }
+      },
       cell: ({ row }) => {
         const project = row.original as Project;
         return <MembersCell projectId={project.id || ''} />;
@@ -67,7 +71,8 @@ export const getColumns = ({
       accessorKey: 'id',
       enableSorting: false,
       styles: {
-        cell: { width: '48px' }
+        cell: { width: '48px' },
+        header: { width: '48px' }
       },
       cell: ({ row }) => {
         const project = row.original as Project;
diff --git a/web/sdk/react/views-new/projects/project-details-view.module.css b/web/sdk/react/views-new/projects/project-details-view.module.css
index 685cbc235..2674282bc 100644
--- a/web/sdk/react/views-new/projects/project-details-view.module.css
+++ b/web/sdk/react/views-new/projects/project-details-view.module.css
@@ -8,6 +8,10 @@
   border: none;
 }
 
+.table {
+  table-layout: fixed;
+}
+
 .menuContent {
   min-width: 160px;
 }
diff --git a/web/sdk/react/views-new/projects/project-details-view.tsx b/web/sdk/react/views-new/projects/project-details-view.tsx
index bfee5b675..c351570a9 100644
--- a/web/sdk/react/views-new/projects/project-details-view.tsx
+++ b/web/sdk/react/views-new/projects/project-details-view.tsx
@@ -413,7 +413,8 @@ export function ProjectDetailsView({
               />
             }
             classNames={{
-              root: styles.tableRoot
+              root: styles.tableRoot,
+              table: styles.table
             }}
           />
         </Flex>
diff --git a/web/sdk/react/views-new/projects/projects-view.module.css b/web/sdk/react/views-new/projects/projects-view.module.css
index cef9196f1..ef5ab7df4 100644
--- a/web/sdk/react/views-new/projects/projects-view.module.css
+++ b/web/sdk/react/views-new/projects/projects-view.module.css
@@ -2,6 +2,10 @@
   border: none;
 }
 
+.table {
+  table-layout: fixed;
+}
+
 .menuContent {
   min-width: 6;
 }
diff --git a/web/sdk/react/views-new/projects/projects-view.tsx b/web/sdk/react/views-new/projects/projects-view.tsx
index d82e91df2..6ecdf7750 100644
--- a/web/sdk/react/views-new/projects/projects-view.tsx
+++ b/web/sdk/react/views-new/projects/projects-view.tsx
@@ -211,7 +211,8 @@ export function ProjectsView({
               />
             }
             classNames={{
-              root: styles.tableRoot
+              root: styles.tableRoot,
+              table: styles.table
             }}
           />
         </Flex>
diff --git a/web/sdk/react/views-new/teams/components/member-columns.tsx b/web/sdk/react/views-new/teams/components/member-columns.tsx
index 9a1badd09..38f12cd49 100644
--- a/web/sdk/react/views-new/teams/components/member-columns.tsx
+++ b/web/sdk/react/views-new/teams/components/member-columns.tsx
@@ -65,6 +65,10 @@ export function getColumns({
     {
       header: 'Role',
       accessorKey: 'email',
+      styles: {
+        cell: { maxWidth: '300px' },
+        header: { maxWidth: '300px' }
+      },
       cell: ({ row }) => {
         const member = row.original;
         const roleList =
@@ -84,7 +88,8 @@ export function getColumns({
       accessorKey: 'id',
       enableSorting: false,
       styles: {
-        cell: { width: '32px' }
+        cell: { width: '32px' },
+        header: { width: '32px' }
       },
       cell: ({ row }) => {
         if (!canUpdateGroup) return null;
diff --git a/web/sdk/react/views-new/teams/team-details-view.module.css b/web/sdk/react/views-new/teams/team-details-view.module.css
index 4f38f483c..8cd2868e7 100644
--- a/web/sdk/react/views-new/teams/team-details-view.module.css
+++ b/web/sdk/react/views-new/teams/team-details-view.module.css
@@ -2,6 +2,10 @@
   border: none;
 }
 
+.table {
+  table-layout: fixed;
+}
+
 .menuContent {
   min-width: 160px;
 }
diff --git a/web/sdk/react/views-new/teams/team-details-view.tsx b/web/sdk/react/views-new/teams/team-details-view.tsx
index c345e6d16..d80a6e33f 100644
--- a/web/sdk/react/views-new/teams/team-details-view.tsx
+++ b/web/sdk/react/views-new/teams/team-details-view.tsx
@@ -362,7 +362,8 @@ export function TeamDetailsView({
               />
             }
             classNames={{
-              root: styles.tableRoot
+              root: styles.tableRoot,
+              table: styles.table
             }}
           />
         </Flex>

From 926a20b7a93cee1c6da4f1ccec57f51b01ee3ebb Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Thu, 30 Apr 2026 01:40:21 +0530
Subject: [PATCH 9/9] fix: button disable state

---
 .../views-new/billing/components/billing-details-card.tsx  | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/sdk/react/views-new/billing/components/billing-details-card.tsx b/web/sdk/react/views-new/billing/components/billing-details-card.tsx
index 84d658964..a99864204 100644
--- a/web/sdk/react/views-new/billing/components/billing-details-card.tsx
+++ b/web/sdk/react/views-new/billing/components/billing-details-card.tsx
@@ -24,7 +24,8 @@ export function BillingDetailsCard({
 }: BillingDetailsCardProps) {
   const btnText =
     billingAccount?.email || billingAccount?.name ? 'Update' : 'Add details';
-  const isButtonDisabled = isLoading || disabled || isActionLoading;
+  const isRestricted = isLoading || disabled;
+  const isButtonDisabled = isRestricted || isActionLoading;
 
   const address = convertBillingAddressToString(billingAccount?.address);
 
@@ -37,7 +38,7 @@ export function BillingDetailsCard({
         {!isLoading && isAllowed ? (
           <Tooltip>
             <Tooltip.Trigger
-              disabled={!isButtonDisabled}
+              disabled={!isRestricted}
               render={<span />}
             >
               <Button
@@ -53,7 +54,7 @@ export function BillingDetailsCard({
                 {btnText}
               </Button>
             </Tooltip.Trigger>
-            {isButtonDisabled && (
+            {isRestricted && (
               <Tooltip.Content>
                 Contact support to update your billing address.
               </Tooltip.Content>