fix(sdk): polish views-new empty states, menus and add member flow

web/sdk/react/hooks/useOrganizationProjects.ts

@@ -12,6 +12,7 @@ interface useOrganizationProjectsProps {
 
 export interface UseOrganizationProjectsReturn {
   isFetching: boolean;
+  isFetched: boolean;
   projects: Project[];
   userAccessOnProject: Record<string, string[]>;
   refetch: () => void;
@@ -25,33 +26,35 @@ export const useOrganizationProjects = ({
   const { activeOrganization: organization } = useFrontier();
 
   // Query for organization projects (all projects)
-  const { 
-    data: orgProjectsData, 
-    isLoading: isOrgProjectsLoading, 
+  const {
+    data: orgProjectsData,
+    isLoading: isOrgProjectsLoading,
+    isFetched: isOrgProjectsFetched,
     error: orgProjectsError,
-    refetch: refetchOrgProjects 
+    refetch: refetchOrgProjects
   } = useQuery(
     FrontierServiceQueries.listOrganizationProjects,
-    create(ListOrganizationProjectsRequestSchema, { 
+    create(ListOrganizationProjectsRequestSchema, {
       id: organization?.id || '',
-      withMemberCount 
+      withMemberCount
     }),
     { enabled: !!organization?.id && allProjects }
   );
 
   // Query for current user projects
-  const { 
-    data: userProjectsData, 
-    isLoading: isUserProjectsLoading, 
+  const {
+    data: userProjectsData,
+    isLoading: isUserProjectsLoading,
+    isFetched: isUserProjectsFetched,
     error: userProjectsError,
-    refetch: refetchUserProjects 
+    refetch: refetchUserProjects
   } = useQuery(
     FrontierServiceQueries.listProjectsByCurrentUser,
-    create(ListProjectsByCurrentUserRequestSchema, { 
+    create(ListProjectsByCurrentUserRequestSchema, {
       orgId: organization?.id || '',
       withPermissions: ['update', 'delete'],
       nonInherited: true,
-      withMemberCount 
+      withMemberCount
     }),
     { enabled: !!organization?.id && !allProjects }
   );
@@ -89,6 +92,7 @@ export const useOrganizationProjects = ({
 
   return {
     isFetching: isLoading,
+    isFetched: isUserProjectsFetched || isOrgProjectsFetched,
     projects: projects,
     userAccessOnProject,
     refetch: refetch,

web/sdk/react/hooks/useOrganizationTeams.ts

@@ -16,6 +16,7 @@ export const useOrganizationTeams = ({
   withMemberCount = false
 }: useOrganizationTeamsProps): {
   isFetching: boolean;
+  isFetched: boolean;
   teams: Group[];
   userAccessOnTeam: Record<string, string[]>;
   refetch: () => void;
@@ -27,14 +28,14 @@ export const useOrganizationTeams = ({
   const { activeOrganization: organization } = useFrontier();
 
   // Organization teams query
-  const { data: orgTeamsData, isLoading: isOrgTeamsLoading, error: orgTeamsError, refetch: refetchOrgTeams } = useQuery(
+  const { data: orgTeamsData, isLoading: isOrgTeamsLoading, isFetched: isOrgTeamsFetched, error: orgTeamsError, refetch: refetchOrgTeams } = useQuery(
     FrontierServiceQueries.listOrganizationGroups,
     create(ListOrganizationGroupsRequestSchema, { orgId: organization?.id || '', withMemberCount }),
     { enabled: !!organization?.id && showOrgTeams }
   );
 
-  // User teams query  
-  const { data: userTeamsData, isLoading: isUserTeamsLoading, error: userTeamsError, refetch: refetchUserTeams } = useQuery(
+  // User teams query
+  const { data: userTeamsData, isLoading: isUserTeamsLoading, isFetched: isUserTeamsFetched, error: userTeamsError, refetch: refetchUserTeams } = useQuery(
     FrontierServiceQueries.listCurrentUserGroups,
     create(ListCurrentUserGroupsRequestSchema, { orgId: organization?.id || '', withPermissions, withMemberCount }),
     { enabled: !!organization?.id && !showOrgTeams }
@@ -75,6 +76,7 @@ export const useOrganizationTeams = ({
 
   return {
     isFetching: isTeamsLoading,
+    isFetched: isUserTeamsFetched || isOrgTeamsFetched,
     teams: teams,
     userAccessOnTeam,
     refetch,

web/sdk/react/views-new/billing/billing-view.tsx

@@ -3,7 +3,6 @@
 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,
@@ -28,6 +27,7 @@ import {
   ConfirmCycleSwitchDialog,
   type ConfirmCycleSwitchPayload
 } from './components/confirm-cycle-switch-dialog';
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 
 const cycleSwitchDialogHandle =
   Dialog.createHandle<ConfirmCycleSwitchPayload>();
@@ -162,6 +162,7 @@ export function BillingView({ onNavigateToPlans }: BillingViewProps) {
 
       {hasNoAccess ? (
         <EmptyState
+          variant="empty2"
           icon={<ExclamationTriangleIcon />}
           heading="Restricted Access"
           subHeading="Admin access required, please reach out to your admin to view billing."

web/sdk/react/views-new/members/components/member-columns.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { DotsVerticalIcon } from '@radix-ui/react-icons';
+import { DotsHorizontalIcon } from '@radix-ui/react-icons';
 import {
   Flex,
   Text,
@@ -141,13 +141,13 @@ export const getColumns = ({
               }}
               render={
                 <IconButton
-                  size={3}
+                  size={2}
                   aria-label="Member actions"
                   data-test-id="member-actions-btn"
                 />
               }
             >
-              <DotsVerticalIcon />
+              <DotsHorizontalIcon />
             </Menu.Trigger>
           </Flex>
         );

web/sdk/react/views-new/members/members-view.module.css

@@ -12,6 +12,10 @@
   table-layout: fixed;
 }
 
+.tableRow > td {
+  padding: var(--rs-space-3);
+}
+
 .menuContent {
   min-width: 180px;
 }

web/sdk/react/views-new/members/members-view.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useMemo, useState } from 'react';
-import { ExclamationTriangleIcon, TrashIcon, UpdateIcon } from '@radix-ui/react-icons';
+import { ExclamationTriangleIcon, UpdateIcon } from '@radix-ui/react-icons';
 import {
   Button,
   Tooltip,
@@ -11,8 +11,10 @@ import {
   EmptyState,
   DataTable,
   Dialog,
+  Image,
   Menu
 } from '@raystack/apsara-v1';
+import deleteIcon from '../../assets/delete.svg';
 import { useFrontier } from '../../contexts/FrontierContext';
 import { useOrganizationMembers } from '../../hooks/useOrganizationMembers';
 import { usePermissions } from '../../hooks/usePermissions';
@@ -189,7 +191,8 @@ export function MembersView({ showTeamField = true }: MembersViewProps) {
             }
             classNames={{
               root: styles.tableRoot,
-              table: styles.table
+              table: styles.table,
+              row: styles.tableRow
             }}
           />
         </Flex>
@@ -218,14 +221,24 @@ export function MembersView({ showTeamField = true }: MembersViewProps) {
                 ))}
               {payload?.canRemove && (
                 <Menu.Item
-                  leadingIcon={<TrashIcon />}
+                  leadingIcon={
+                    <Image
+                      src={deleteIcon as unknown as string}
+                      alt="Remove"
+                      width={16}
+                      height={16}
+                    />
+                  }
                   onClick={() =>
                     removeMemberDialogHandle.openWithPayload({
                       memberId: payload.memberId,
                       invited: String(payload.invited)
                     })
                   }
                   data-test-id="remove-member-dropdown-item"
+                  style={{
+                    color: 'var(--rs-color-foreground-danger-primary)'
+                  }}
                 >
                   Remove
                 </Menu.Item>

web/sdk/react/views-new/pat/pat-view.tsx

@@ -9,8 +9,10 @@ import {
   Dialog,
   EmptyState,
   Flex,
+  Image,
   Skeleton
 } from '@raystack/apsara-v1';
+import keyIcon from '../../assets/key.svg';
 import type { DataTableQuery, DataTableSort } from '@raystack/apsara-v1';
 import { useDebouncedState } from '@raystack/apsara-v1/hooks';
 import { useInfiniteQuery } from '@connectrpc/connect-query';
@@ -166,13 +168,22 @@ export function PatsView({ onPATClick }: PatsViewProps = {}) {
         </Flex>
       ) : hasNoPats ? (
         <EmptyState
-          icon={<LockClosedIcon />}
+          variant="empty2"
+          icon={
+            <Image
+              src={keyIcon as unknown as string}
+              alt=""
+              width={40}
+              height={40}
+            />
+          }
           heading="No Personal Access Token Found"
           subHeading={`Create a new to use the Keys of ${t.appName()} platform`}
           primaryAction={
             <Button
-              variant="outline"
-              color="neutral"
+              variant="solid"
+              color="accent"
+              size="small"
               onClick={() => createPATDialogHandle.open(null)}
               data-test-id="frontier-sdk-add-pat-btn"
             >

web/sdk/react/views-new/plans/plans-view.tsx

@@ -151,6 +151,7 @@ export function PlansView() {
       <ViewContainer>
         <ViewHeader title="Plans" description="View and manage your subscription plan." />
         <EmptyState
+          variant="empty2"
           icon={<ExclamationTriangleIcon />}
           heading="No Plans Available"
           subHeading="No plans available at this moment. Please try again later."