chore: remove legacy SDK views and fix admin issues

web/sdk/admin/components/AssignRole.tsx

@@ -6,7 +6,7 @@ import {
   Radio,
   Text,
   toastManager,
-} from "@raystack/apsara-v1";
+} from "@raystack/apsara";
 import type {
   SearchOrganizationUsersResponse_OrganizationUser,
   Role,

web/sdk/admin/components/CustomField.tsx

@@ -5,7 +5,7 @@
   FormLabel,
   FormMessage,
 } from "@radix-ui/react-form";
-import { Flex, Select, Switch, Text, TextArea, Input } from "@raystack/apsara-v1";
+import { Flex, Select, Switch, Text, TextArea, Input } from "@raystack/apsara";
 import React, { CSSProperties } from "react";
 
 import { Control, Controller, UseFormRegister } from "react-hook-form";
@@ -157,7 +157,7 @@
                   }
 
                   default: {
                     const { ref, ...rest } = field;
                     return (
                       <Input
                         {...rest}

web/sdk/admin/components/PageHeader.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties, PropsWithChildren, ReactNode } from "react";
-import { Flex, Text } from "@raystack/apsara-v1";
+import { Flex, Text } from "@raystack/apsara";
 import styles from "./page-header.module.css";
 
 export type PageHeaderTypes = {

web/sdk/admin/components/SheetFooter.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Flex } from "@raystack/apsara-v1";
+import { Flex } from "@raystack/apsara";
 
 type SheetFooterProps = {
   children?: React.ReactNode;

web/sdk/admin/components/SheetHeader.tsx

@@ -1,6 +1,6 @@
 import type { CSSProperties } from "react";
 import { Cross1Icon } from "@radix-ui/react-icons";
-import { Flex, Text } from "@raystack/apsara-v1";
+import { Flex, Text } from "@raystack/apsara";
 
 type SheetHeaderProps = {
   title: string;

web/sdk/admin/views/admins/columns.tsx

@@ -1,10 +1,10 @@
-import { Button, type DataTableColumnDef } from "@raystack/apsara-v1";
+import { Button, type DataTableColumnDef } from "@raystack/apsara";
 import type { ServiceUser, User } from "@raystack/proton/frontier";
 import { TerminologyEntity } from "../../hooks/useTerminology";
 import styles from "./admins.module.css";
 
 export const getColumns: (options?: {
   onNavigateToOrg?: (orgId: string) => void;
   t?: {
     organization: TerminologyEntity;
   };

web/sdk/admin/views/admins/index.tsx

@@ -1,4 +1,4 @@
-import { DataTable, EmptyState, Flex } from "@raystack/apsara-v1";
+import { DataTable, EmptyState, Flex } from "@raystack/apsara";
 import type { ReactNode } from "react";
 import { getColumns } from "./columns";
 import styles from "./admins.module.css";
@@ -24,7 +24,7 @@
 };
 
 export type AdminsViewProps = {
   onNavigateToOrg?: (orgId: string) => void;
   /** Icon rendered in the page header next to the title. */
   icon?: ReactNode;
 };

web/sdk/admin/views/audit-logs/actor-cell.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Flex, getAvatarColor, Text } from "@raystack/apsara-v1";
+import { Avatar, Flex, getAvatarColor, Text } from "@raystack/apsara";
 import { AuditRecordActor } from "@raystack/proton/frontier";
 import { ACTOR_TYPES, getAuditLogActorName } from "./util";
 import systemIcon from "../../assets/images/system.jpg";

web/sdk/admin/views/audit-logs/columns.tsx

@@ -1,4 +1,4 @@
-import { Badge, DataTableColumnDef, Flex, Text } from "@raystack/apsara-v1";
+import { Badge, DataTableColumnDef, Flex, Text } from "@raystack/apsara";
 import dayjs from "dayjs";
 import styles from "./audit-logs.module.css";
 import {
@@ -25,7 +25,7 @@
 }
 
 export const getColumns = ({
   groupCountMap,
   t,
 }: getColumnsOptions): DataTableColumnDef<AuditRecord, unknown>[] => {
   return [

web/sdk/admin/views/audit-logs/index.tsx

@@ -4,8 +4,8 @@
   type DataTableSort,
   EmptyState,
   Flex,
-} from "@raystack/apsara-v1";
-import { useDebouncedState } from "@raystack/apsara-v1/hooks";
+} from "@raystack/apsara";
+import { useDebouncedState } from "@raystack/apsara/hooks";
 import { useCallback, useMemo, useState } from "react";
 import Navbar from "./navbar";
 import styles from "./audit-logs.module.css";
@@ -65,9 +65,9 @@
   /** App name displayed in the page title. */
   appName?: string;
   /** Callback to export audit logs as CSV with the current query filters applied. */
   onExportCsv?: (query: RQLRequest) => Promise<void>;
   /** Navigation callback for links within audit log entries (e.g. to org/user pages). */
   onNavigate?: (path: string) => void;
 };
 
 export default function AuditLogsView({ appName, onExportCsv, onNavigate }: AuditLogsViewProps = {}) {
@@ -137,7 +137,7 @@
         rqlRequest: updatedRQLRequest,
       });
     },
     [queryClient],
   );
 
   const handleLoadMore = async () => {

web/sdk/admin/views/audit-logs/navbar.tsx

@@ -1,4 +1,4 @@
-import { DataTable, Flex, Text, IconButton, Spinner } from "@raystack/apsara-v1";
+import { DataTable, Flex, Text, IconButton, Spinner } from "@raystack/apsara";
 import { CpuChipIcon } from "../../assets/icons/CpuChipIcon";
 import styles from "./audit-logs.module.css";
 import { DownloadIcon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
@@ -9,7 +9,7 @@
 
 interface NavbarProps {
   searchQuery?: string;
   onExportCsv?: (query: RQLRequest) => Promise<void>;
 }
 
 const Navbar = ({ searchQuery, onExportCsv }: NavbarProps) => {

web/sdk/admin/views/audit-logs/sidepanel-details.tsx

@@ -1,11 +1,11 @@
-import { Flex, IconButton, SidePanel } from "@raystack/apsara-v1";
+import { Flex, IconButton, SidePanel } from "@raystack/apsara";
 import {
   Cross2Icon,
   DesktopIcon,
   GlobeIcon,
   TransformIcon,
 } from "@radix-ui/react-icons";
-import { List } from "@raystack/apsara-v1";
+import { List } from "@raystack/apsara";
 import styles from "./audit-logs.module.css";
 import { AuditRecord } from "@raystack/proton/frontier";
 import { ACTOR_TYPES } from "./util";
@@ -22,7 +22,7 @@
 
 type SidePanelDetailsProps = Partial<AuditRecord> & {
   onClose: () => void;
   onNavigate?: (path: string) => void;
 };
 
 type AuditSessionContext = {

web/sdk/admin/views/audit-logs/sidepanel-list-id.tsx

@@ -1,4 +1,4 @@
-import { CopyButton, Flex, List, Text, Tooltip } from "@raystack/apsara-v1";
+import { CopyButton, Flex, List, Text, Tooltip } from "@raystack/apsara";
 import styles from "./audit-logs.module.css";
 
 export default function SidepanelListId({ id = "-" }: { id?: string }) {

web/sdk/admin/views/audit-logs/sidepanel-list-link.tsx

@@ -1,4 +1,4 @@
-import { Button, List } from "@raystack/apsara-v1";
+import { Button, List } from "@raystack/apsara";
 import { ReactNode } from "react";
 import styles from "./audit-logs.module.css";
 

web/sdk/admin/views/audit-logs/sidepanel-log-dialog.tsx

@@ -1,4 +1,4 @@
-import { Dialog, IconButton, CodeBlock } from "@raystack/apsara-v1";
+import { Dialog, IconButton, CodeBlock } from "@raystack/apsara";
 import styles from "./audit-logs.module.css";
 import { AuditRecord } from "@raystack/proton/frontier";
 import { auditLogToJson } from "./util";

web/sdk/admin/views/invoices/columns.tsx

@@ -1,4 +1,4 @@
-import { Amount, type DataTableColumnDef, Link, Text } from "@raystack/apsara-v1";
+import { Amount, type DataTableColumnDef, Link, Text } from "@raystack/apsara";
 import dayjs from "dayjs";
 import type { SearchInvoicesResponse_Invoice } from "@raystack/proton/frontier";
 import {

web/sdk/admin/views/invoices/index.tsx

@@ -4,7 +4,7 @@ import {
   type DataTableSort,
   EmptyState,
   Flex,
-} from "@raystack/apsara-v1";
+} from "@raystack/apsara";
 import { useState } from "react";
 import { PageTitle } from "../../components/PageTitle";
 import { InvoicesNavabar } from "./navbar";

web/sdk/admin/views/invoices/navbar.tsx

@@ -1,4 +1,4 @@
-import { DataTable, Flex, IconButton, Text } from "@raystack/apsara-v1";
+import { DataTable, Flex, IconButton, Text } from "@raystack/apsara";
 import styles from "./invoices.module.css";
 import { InvoicesIcon } from "../../assets/icons/InvoicesIcon";
 import { FocusEvent, useState } from "react";

web/sdk/admin/views/organizations/details/apis/columns.tsx

@@ -1,4 +1,4 @@
-import { Text, type DataTableColumnDef } from "@raystack/apsara-v1";
+import { Text, type DataTableColumnDef } from "@raystack/apsara";
 import dayjs from "dayjs";
 import { NULL_DATE } from "../../../../utils/constants";
 import styles from "./apis.module.css";

web/sdk/admin/views/organizations/details/apis/details-dialog.tsx

@@ -1,4 +1,4 @@
-import { Dialog, Flex, Skeleton, Tabs, Text, toastManager } from "@raystack/apsara-v1";
+import { Dialog, Flex, Skeleton, Tabs, Text, toastManager } from "@raystack/apsara";
 import styles from "./apis.module.css";
 import { useCallback, useEffect, useMemo } from "react";
 import dayjs from "dayjs";

web/sdk/admin/views/organizations/details/apis/index.tsx

@@ -1,5 +1,5 @@
-import { DataTable, EmptyState, Flex } from "@raystack/apsara-v1";
-import type { DataTableQuery, DataTableSort } from "@raystack/apsara-v1";
+import { DataTable, EmptyState, Flex } from "@raystack/apsara";
+import type { DataTableQuery, DataTableSort } from "@raystack/apsara";
 import styles from "./apis.module.css";
 import { InfoCircledIcon, ExclamationTriangleIcon } from "@radix-ui/react-icons";
 import { useCallback, useContext, useEffect, useMemo, useState } from "react";

web/sdk/admin/views/organizations/details/edit/billing.tsx

@@ -10,7 +10,7 @@ import {
   Drawer,
   SidePanel,
   toastManager,
-} from "@raystack/apsara-v1";
+} from "@raystack/apsara";
 import styles from "./edit.module.css";
 import { useCallback, useContext, useEffect, useMemo } from "react";
 import { OrganizationContext } from "../contexts/organization-context";

web/sdk/admin/views/organizations/details/edit/kyc.tsx

@@ -11,7 +11,7 @@ import {
   Switch,
   Text,
   toastManager,
-} from "@raystack/apsara-v1";
+} from "@raystack/apsara";
 import styles from "./edit.module.css";
 import { z } from "zod";
 import { useContext } from "react";

web/sdk/admin/views/organizations/details/edit/organization.tsx

@@ -12,9 +12,9 @@ import {
   SidePanel,
   Text,
   Label,
-} from "@raystack/apsara-v1";
+} from "@raystack/apsara";
 import { Cross1Icon } from "@radix-ui/react-icons";
-import { AvatarUpload } from "../../../../../react/components/avatar-upload";
+import { ImageUpload } from "~/client/components/image-upload";
 import { z } from "zod";
 import { Controller, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -198,7 +198,7 @@ export function EditOrganizationPanel({ open = false, onClose }: { open?: boolea
                         gap={5}
                         style={{ width: "100%" }}
                       >
-                        <AvatarUpload {...field} data-test-id="avatar-upload" />
+                        <ImageUpload {...field} data-test-id="avatar-upload" />
                         <Text>Pick a logo for your {t.organization({ case: "lower" })}</Text>
                       </Flex>
                     </>

web/sdk/admin/views/organizations/details/invoices/columns.tsx

@@ -1,6 +1,6 @@
 import styles from "./invoices.module.css";
 import dayjs from "dayjs";
-import { DataTableColumnDef, Link, Amount } from "@raystack/apsara-v1";
+import { DataTableColumnDef, Link, Amount } from "@raystack/apsara";
 import type {
   SearchOrganizationInvoicesResponse_OrganizationInvoice,
 } from "@raystack/proton/frontier";

web/sdk/admin/views/organizations/details/invoices/index.tsx

@@ -1,5 +1,5 @@
-import { DataTable, EmptyState, Flex } from "@raystack/apsara-v1";
-import type { DataTableQuery, DataTableSort } from "@raystack/apsara-v1";
+import { DataTable, EmptyState, Flex } from "@raystack/apsara";
+import type { DataTableQuery, DataTableSort } from "@raystack/apsara";
 import styles from "./invoices.module.css";
 import { FileTextIcon, ExclamationTriangleIcon } from "@radix-ui/react-icons";
 import { useContext, useEffect, useMemo, useState } from "react";

web/sdk/admin/views/organizations/details/layout/add-tokens-dialog.tsx

@@ -6,7 +6,7 @@ import {
   Label,
   Text,
   toastManager,
-} from "@raystack/apsara-v1";
+} from "@raystack/apsara";
 import React, { useContext } from "react";
 import { OrganizationContext } from "../contexts/organization-context";
 import { Controller, FormProvider, useForm } from "react-hook-form";

web/sdk/admin/views/organizations/details/layout/index.tsx

@@ -1,9 +1,9 @@
 import { OrganizationsDetailsNavabar } from "./navbar";
 import styles from "./layout.module.css";
-import { EmptyState, Flex, Spinner } from "@raystack/apsara-v1";
+import { EmptyState, Flex, Spinner } from "@raystack/apsara";
 import { OrgSidePanel } from "../side-panel/";
 import React, { useState } from "react";
-import { OrganizationIcon } from "@raystack/apsara-v1/icons";
+import { OrganizationIcon } from "@raystack/apsara/icons";
 import { PageTitle } from "../../../../components/PageTitle";
 import { EditKYCPanel } from "../edit/kyc";
 import { EditOrganizationPanel } from "../edit/organization";

web/sdk/admin/views/organizations/details/layout/invite-users-dialog.tsx

@@ -7,7 +7,7 @@ import {
   Text,
   TextArea,
   toastManager
-} from '@raystack/apsara-v1';
+} from '@raystack/apsara';
 import { useContext, useMemo } from 'react';
 import styles from './layout.module.css';
 import { OrganizationContext } from '../contexts/organization-context';

web/sdk/admin/views/organizations/details/layout/navbar.tsx

@@ -1,4 +1,4 @@
-import { SidebarIcon, OrganizationIcon } from "@raystack/apsara-v1/icons";
+import { SidebarIcon, OrganizationIcon } from "@raystack/apsara/icons";
 
 import {
   Flex,
@@ -12,7 +12,7 @@ import {
   getAvatarColor,
   toastManager,
   Search
-} from "@raystack/apsara-v1";
+} from "@raystack/apsara";
 
 import styles from "./layout.module.css";
 import { DotsHorizontalIcon } from "@radix-ui/react-icons";

web/sdk/admin/views/organizations/details/members/columns.tsx

@@ -7,7 +7,7 @@ import {
   Menu,
   IconButton,
   AlertDialog,
-} from "@raystack/apsara-v1";
+} from "@raystack/apsara";
 import type {
   SearchOrganizationUsersResponse_OrganizationUser,
   Role,

web/sdk/admin/views/organizations/details/members/index.tsx

@@ -1,5 +1,5 @@
-import { AlertDialog, DataTable, EmptyState, Flex } from "@raystack/apsara-v1";
-import type { DataTableQuery, DataTableSort } from "@raystack/apsara-v1";
+import { AlertDialog, DataTable, EmptyState, Flex } from "@raystack/apsara";
+import type { DataTableQuery, DataTableSort } from "@raystack/apsara";
 import { PageTitle } from "../../../../components/PageTitle";
 import styles from "./members.module.css";
 import { useContext, useEffect, useMemo, useState } from "react";

web/sdk/admin/views/organizations/details/members/remove-member.tsx

@@ -5,7 +5,7 @@ import {
 } from "@raystack/proton/frontier";
 import { create } from "@bufbuild/protobuf";
 import { useMutation } from "@connectrpc/connect-query";
-import { Button, Dialog, Flex, Text, toastManager } from "@raystack/apsara-v1";
+import { Button, Dialog, Flex, Text, toastManager } from "@raystack/apsara";
 import { ConnectError } from "@connectrpc/connect";
 import { useTerminology } from "../../../../hooks/useTerminology";
 

web/sdk/admin/views/organizations/details/members/update-role.tsx

@@ -13,7 +13,7 @@ import {
   Button,
   Text,
   toastManager,
-} from "@raystack/apsara-v1";
+} from "@raystack/apsara";
 import { ConnectError } from "@connectrpc/connect";
 
 export type UpdateRolePayload = {

web/sdk/admin/views/organizations/details/pat/columns.tsx

@@ -4,7 +4,7 @@ import {
   getAvatarColor,
   Text,
   type DataTableColumnDef,
-} from "@raystack/apsara-v1";
+} from "@raystack/apsara";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import type {

web/sdk/admin/views/organizations/details/pat/components/pat-details-dialog.tsx

@@ -5,7 +5,7 @@ import {
   Skeleton,
   Tabs,
   Text,
-} from "@raystack/apsara-v1";
+} from "@raystack/apsara";
 import { useQuery } from "@connectrpc/connect-query";
 import {
   FrontierServiceQueries,

web/sdk/admin/views/organizations/details/pat/index.tsx

@@ -1,5 +1,5 @@
-import { DataTable, EmptyState, Flex } from "@raystack/apsara-v1";
-import type { DataTableQuery, DataTableSort } from "@raystack/apsara-v1";
+import { DataTable, EmptyState, Flex } from "@raystack/apsara";
+import type { DataTableQuery, DataTableSort } from "@raystack/apsara";
 import { LockClosedIcon, ExclamationTriangleIcon } from "@radix-ui/react-icons";
 import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { useInfiniteQuery, useQuery } from "@connectrpc/connect-query";
@@ -56,6 +56,7 @@ const ZeroState = () => {
     <div className={styles["zero-state-container"]}>
       <EmptyState
         variant="empty2"
+        className={styles["zero-state"]}
         icon={<LockClosedIcon />}
         heading="PAT"
         subHeading="Personal access tokens (PATs) provide programmatic access to organization resources via the API on behalf of a user."

web/sdk/admin/views/organizations/details/pat/pat.module.css

@@ -6,6 +6,10 @@
   padding: var(--rs-space-10);
 }
 
+.zero-state {
+  padding-top: var(--rs-space-17);
+}
+
 .empty-state-subheading {
   max-width: 360px;
   text-wrap: auto;

web/sdk/admin/views/organizations/details/projects/columns.tsx

@@ -5,8 +5,8 @@ import {
   Flex,
   Text,
   Menu,
-} from "@raystack/apsara-v1";
-import type { DataTableColumnDef } from "@raystack/apsara-v1";
+} from "@raystack/apsara";
+import type { DataTableColumnDef } from "@raystack/apsara";
 import type {
   SearchOrganizationProjectsResponse_OrganizationProject,
   User,

web/sdk/admin/views/organizations/details/projects/index.tsx

@@ -4,7 +4,7 @@ import {
   Flex,
   type DataTableQuery,
   type DataTableSort,
-} from "@raystack/apsara-v1";
+} from "@raystack/apsara";
 import { PageTitle } from "../../../../components/PageTitle";
 import styles from "./projects.module.css";
 import { useContext, useEffect, useMemo, useState } from "react";

web/sdk/admin/views/organizations/details/projects/members/add-members-dropdown.tsx

@@ -5,7 +5,7 @@ import {
   Flex,
   getAvatarColor,
   Text,
-} from "@raystack/apsara-v1";
+} from "@raystack/apsara";
 import type React from "react";
 import Skeleton from "react-loading-skeleton";
 import styles from "./members.module.css";

web/sdk/admin/views/organizations/details/projects/members/columns.tsx

@@ -10,8 +10,8 @@ import {
   getAvatarColor,
   Text,
   AlertDialog,
-} from "@raystack/apsara-v1";
-import type { DataTableColumnDef } from "@raystack/apsara-v1";
+} from "@raystack/apsara";
+import type { DataTableColumnDef } from "@raystack/apsara";
 import { DotsHorizontalIcon, UpdateIcon } from "@radix-ui/react-icons";
 import { DeleteIcon } from "~/admin/assets/icons/DeleteIcon";
 import type { UpdateRolePayload } from "./update-role";

web/sdk/admin/views/organizations/details/projects/members/index.tsx

@@ -1,5 +1,5 @@
-import { AlertDialog, DataTable, Dialog, EmptyState, Flex } from "@raystack/apsara-v1";
-import type { DataTableQuery } from "@raystack/apsara-v1";
+import { AlertDialog, DataTable, Dialog, EmptyState, Flex } from "@raystack/apsara";
+import type { DataTableQuery } from "@raystack/apsara";
 import { useCallback, useMemo, useState } from "react";
 import Skeleton from "react-loading-skeleton";
 import {
@@ -12,7 +12,7 @@ import {
 } from "@raystack/proton/frontier";
 import { create } from "@bufbuild/protobuf";
 import { useQuery, useInfiniteQuery } from "@connectrpc/connect-query";
-import { useDebouncedState } from "@raystack/apsara-v1/hooks";
+import { useDebouncedState } from "@raystack/apsara/hooks";
 import styles from "./members.module.css";
 import { UsersIcon } from "../../../../../assets/icons/UsersIcon";
 import { getColumns } from "./columns";

web/sdk/admin/views/organizations/details/projects/members/remove-member.tsx

@@ -8,7 +8,7 @@ import { create } from "@bufbuild/protobuf";
 import { useMutation } from "@connectrpc/connect-query";
 import styles from "./members.module.css";
 
-import { AlertDialog, Button, Flex, Text, toastManager } from "@raystack/apsara-v1";
+import { AlertDialog, Button, Flex, Text, toastManager } from "@raystack/apsara";
 import { useTerminology } from "../../../../../hooks/useTerminology";
 
 interface RemoveMemberProps {