feat: PAT list and details views

web/apps/client-demo/src/Router.tsx

@@ -22,6 +22,8 @@ import Teams from './pages/settings/Teams';
 import TeamDetails from './pages/settings/TeamDetails';
 import ServiceAccounts from './pages/settings/ServiceAccounts';
 import ServiceAccountDetails from './pages/settings/ServiceAccountDetails';
+import Pats from './pages/settings/Pats';
+import PatDetails from './pages/settings/PatDetails';
 import Plans from './pages/settings/Plans';
 
 function Router() {
@@ -51,6 +53,8 @@ function Router() {
           <Route path="teams/:teamId" element={<TeamDetails />} />
           <Route path="service-accounts" element={<ServiceAccounts />} />
           <Route path="service-accounts/:serviceAccountId" element={<ServiceAccountDetails />} />
+          <Route path="pats" element={<Pats />} />
+          <Route path="pats/:patId" element={<PatDetails />} />
           <Route path="plans" element={<Plans />} />
         </Route >
         <Route path="*" element={<Navigate to="/" replace />} />

web/apps/client-demo/src/pages/Settings.tsx

@@ -15,6 +15,7 @@ const NAV_ITEMS = [
   { label: 'Tokens', path: 'tokens' },
   { label: 'Teams', path: 'teams' },
   { label: 'Service Accounts', path: 'service-accounts' },
+  { label: 'Personal Access Tokens', path: 'pats' },
   { label: 'Plans', path: 'plans' }
 ];
 

web/apps/client-demo/src/pages/settings/PatDetails.tsx

@@ -0,0 +1,17 @@
+import { useParams, useNavigate } from 'react-router-dom';
+import { PATDetailsView } from '@raystack/frontier/react';
+
+export default function PatDetails() {
+  const { orgId, patId } = useParams<{ orgId: string; patId: string }>();
+  const navigate = useNavigate();
+
+  if (!patId) return null;
+
+  return (
+    <PATDetailsView
+      patId={patId}
+      onNavigateToPats={() => navigate(`/${orgId}/settings/pats`)}
+      onDeleteSuccess={() => navigate(`/${orgId}/settings/pats`)}
+    />
+  );
+}

web/apps/client-demo/src/pages/settings/Pats.tsx

@@ -0,0 +1,13 @@
+import { useParams, useNavigate } from 'react-router-dom';
+import { PatsView } from '@raystack/frontier/react';
+
+export default function Pats() {
+  const { orgId } = useParams<{ orgId: string }>();
+  const navigate = useNavigate();
+
+  return (
+    <PatsView
+      onPATClick={patId => navigate(`/${orgId}/settings/pats/${patId}`)}
+    />
+  );
+}

web/sdk/admin/index.ts

@@ -39,11 +39,11 @@ export {
   DEFAULT_PAGE_SIZE,
   getGroupCountMapFromFirstPage,
   type ConnectRPCPaginatedResponse,
-} from "./utils/connect-pagination";
+} from "~/utils/connect-pagination";
 export {
   transformDataTableQueryToRQLRequest,
   type TransformOptions,
-} from "./utils/transform-query";
+} from "~/utils/transform-query";
 export {
   type Config,
   type AdminTerminologyConfig,

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

@@ -22,8 +22,8 @@
   getConnectNextPageParam,
   getGroupCountMapFromFirstPage,
   DEFAULT_PAGE_SIZE,
-} from "../../utils/connect-pagination";
-import { transformDataTableQueryToRQLRequest } from "../../utils/transform-query";
+} from "~/utils/connect-pagination";
+import { transformDataTableQueryToRQLRequest } from "~/utils/transform-query";
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
 import SidePanelDetails from "./sidepanel-details";
 import { useQueryClient } from "@tanstack/react-query";
@@ -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/invoices/index.tsx

@@ -16,9 +16,9 @@ import { AdminServiceQueries } from "@raystack/proton/frontier";
 import {
   getConnectNextPageParam,
   DEFAULT_PAGE_SIZE,
-} from "../../utils/connect-pagination";
+} from "~/utils/connect-pagination";
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
-import { transformDataTableQueryToRQLRequest } from "../../utils/transform-query";
+import { transformDataTableQueryToRQLRequest } from "~/utils/transform-query";
 import { useTerminology } from "../../hooks/useTerminology";
 
 const NoInvoices = () => {

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

@@ -16,8 +16,8 @@ import {
   getConnectNextPageParam,
   getGroupCountMapFromFirstPage,
   DEFAULT_PAGE_SIZE,
-} from "../../../../utils/connect-pagination";
-import { transformDataTableQueryToRQLRequest } from "../../../../utils/transform-query";
+} from "~/utils/connect-pagination";
+import { transformDataTableQueryToRQLRequest } from "~/utils/transform-query";
 import { useDebounceValue } from "usehooks-ts";
 import { useTerminology } from "../../../../hooks/useTerminology";
 

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

@@ -12,8 +12,8 @@ import {
   getConnectNextPageParam,
   DEFAULT_PAGE_SIZE,
   getGroupCountMapFromFirstPage,
-} from "../../../../utils/connect-pagination";
-import { transformDataTableQueryToRQLRequest } from "../../../../utils/transform-query";
+} from "~/utils/connect-pagination";
+import { transformDataTableQueryToRQLRequest } from "~/utils/transform-query";
 import { useDebounceValue } from "usehooks-ts";
 import { useTerminology } from "../../../../hooks/useTerminology";
 

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

@@ -20,8 +20,8 @@ import { RemoveMember } from './remove-member';
 import {
   getConnectNextPageParam,
   DEFAULT_PAGE_SIZE
-} from '../../../../utils/connect-pagination';
-import { transformDataTableQueryToRQLRequest } from '../../../../utils/transform-query';
+} from '~/utils/connect-pagination';
+import { transformDataTableQueryToRQLRequest } from '~/utils/transform-query';
 import { useDebounceValue } from 'usehooks-ts';
 
 const DEFAULT_SORT: DataTableSort = { name: 'orgJoinedAt', order: 'desc' };

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

@@ -18,8 +18,8 @@ import { ProjectMembersDialog } from "./members";
 import {
   getConnectNextPageParam,
   DEFAULT_PAGE_SIZE
-} from '../../../../utils/connect-pagination';
-import { transformDataTableQueryToRQLRequest } from '../../../../utils/transform-query';
+} from '~/utils/connect-pagination';
+import { transformDataTableQueryToRQLRequest } from '~/utils/transform-query';
 import { useDebounceValue } from 'usehooks-ts';
 import { useTerminology } from "../../../../hooks/useTerminology";
 

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

@@ -20,8 +20,8 @@ import { AssignRole } from "./assign-role";
 import { PROJECT_NAMESPACE } from "../../types";
 import { RemoveMember } from "./remove-member";
 import { AddMembersDropdown } from "./add-members-dropdown";
-import { getConnectNextPageParam, DEFAULT_PAGE_SIZE } from "../../../../../utils/connect-pagination";
-import { transformDataTableQueryToRQLRequest } from "../../../../../utils/transform-query";
+import { getConnectNextPageParam, DEFAULT_PAGE_SIZE } from "~/utils/connect-pagination";
+import { transformDataTableQueryToRQLRequest } from "~/utils/transform-query";
 
 const NoMembers = () => {
   return (

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

@@ -8,8 +8,8 @@ import { OrganizationContext } from "../contexts/organization-context";
 import { PageTitle } from "../../../../components/PageTitle";
 import { FrontierServiceQueries } from "@raystack/proton/frontier";
 import { useInfiniteQuery } from "@connectrpc/connect-query";
-import { getConnectNextPageParam, DEFAULT_PAGE_SIZE } from "../../../../utils/connect-pagination";
-import { transformDataTableQueryToRQLRequest } from "../../../../utils/transform-query";
+import { getConnectNextPageParam, DEFAULT_PAGE_SIZE } from "~/utils/connect-pagination";
+import { transformDataTableQueryToRQLRequest } from "~/utils/transform-query";
 import { getColumns } from "./columns";
 import { useDebounceValue } from "usehooks-ts";
 import { useTerminology } from "../../../../hooks/useTerminology";

web/sdk/admin/views/organizations/list/index.tsx

@@ -20,8 +20,8 @@ import {
   getConnectNextPageParam,
   getGroupCountMapFromFirstPage,
   DEFAULT_PAGE_SIZE,
-} from "../../../utils/connect-pagination";
-import { transformDataTableQueryToRQLRequest } from "../../../utils/transform-query";
+} from "~/utils/connect-pagination";
+import { transformDataTableQueryToRQLRequest } from "~/utils/transform-query";
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
 import { useDebouncedState } from "@raystack/apsara/hooks";
 import { useTerminology } from "../../../hooks/useTerminology";

web/sdk/admin/views/users/list/list.tsx

@@ -11,8 +11,8 @@ import {
   getConnectNextPageParam,
   getGroupCountMapFromFirstPage,
   DEFAULT_PAGE_SIZE,
-} from "../../../utils/connect-pagination";
-import { transformDataTableQueryToRQLRequest } from "../../../utils/transform-query";
+} from "~/utils/connect-pagination";
+import { transformDataTableQueryToRQLRequest } from "~/utils/transform-query";
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
 import { useDebouncedState } from "@raystack/apsara/hooks";
 import { useTerminology } from "../../../hooks/useTerminology";

web/sdk/react/index.ts

@@ -45,6 +45,7 @@ export {
   ServiceAccountDetailsView
 } from './views-new/service-accounts';
 export { PlansView } from './views-new/plans';
+export { PatsView, PATDetailsView } from './views-new/pat';
 
 export type {
   FrontierClientOptions,

web/sdk/react/views-new/pat/components/pat-columns.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import { Button, Text, DataTableColumnDef } from '@raystack/apsara-v1';
+import type { PAT } from '@raystack/proton/frontier';
+import { timestampToDayjs, isNullTimestamp } from '~/utils/timestamp';
+import styles from '../pat-view.module.css';
+
+dayjs.extend(relativeTime);
+
+export function getColumns({
+  dateFormat,
+  onRevoke
+}: {
+  dateFormat: string;
+  onRevoke: (patId: string) => void;
+}): DataTableColumnDef<PAT, unknown>[] {
+  return [
+    {
+      header: 'Title',
+      accessorKey: 'title',
+      cell: ({ getValue }) => (
+        <Text size="regular">{getValue() as string}</Text>
+      )
+    },
+    {
+      header: 'Expiry Date',
+      accessorKey: 'expiresAt',
+      enableSorting: false,
+      cell: ({ row }) => {
+        const date = timestampToDayjs(row.original.expiresAt);
+        return date ? <Text size="regular">{date.format(dateFormat)}</Text> : null;
+      }
+    },
+    {
+      header: 'Last used',
+      accessorKey: 'usedAt',
+      enableSorting: false,
+      cell: ({ row }) => {
+        const pat = row.original;
+        if (!pat.usedAt || isNullTimestamp(pat.usedAt)) return null;
+        const date = timestampToDayjs(pat.usedAt);
+        return date ? <Text size="regular">{date.fromNow()}</Text> : null;
+      }
+    },
+    {
+      header: '',
+      accessorKey: 'id',
+      enableSorting: false,
+      styles: {
+        cell: { width: '73px' }
+      },
+      cell: ({ row }) => (
+        <Button
+          variant="text"
+          color="neutral"
+          size="small"
+          className={styles.revokeButton}
+          onClick={e => {
+            e.stopPropagation();
+            onRevoke(row.original.id);
+          }}
+          data-test-id="frontier-sdk-revoke-pat-btn"
+        >
+          Revoke
+        </Button>
+      )
+    }
+  ];
+}

web/sdk/react/views-new/pat/components/pat-created-dialog.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { InfoCircledIcon } from '@radix-ui/react-icons';
+import {
+  Button,
+  Callout,
+  CopyButton,
+  Dialog,
+  Flex,
+  InputField,
+  Text
+} from '@raystack/apsara-v1';
+
+export interface PATCreatedPayload {
+  token: string;
+  isRegenerated?: boolean;
+}
+
+export interface PATCreatedDialogProps {
+  handle: ReturnType<typeof Dialog.createHandle<PATCreatedPayload>>;
+  onClose?: () => void;
+}
+
+export function PATCreatedDialog({ handle, onClose }: PATCreatedDialogProps) {
+  const handleOpenChange = (open: boolean) => {
+    if (!open) onClose?.();
+  };
+
+  return (
+    <Dialog handle={handle} onOpenChange={handleOpenChange}>
+      {({ payload }) => {
+        const token = payload?.token ?? '';
+        const isRegenerated = payload?.isRegenerated ?? false;
+        const description = isRegenerated
+          ? 'Your personal access token has been regenerated successfully. Please copy and store it securely.'
+          : 'Successfully added a new personal access token. Please copy the token.';
+        return (
+          <Dialog.Content width={400}>
+            <Dialog.Header>
+              <Dialog.Title>Success</Dialog.Title>
+            </Dialog.Header>
+            <Dialog.Body>
+              <Flex direction="column" gap={7}>
+                <Text size="small">{description}</Text>
+                <InputField
+                  value={token}
+                  readOnly
+                  trailingIcon={
+                    token ? (
+                      <CopyButton
+                        text={token}
+                        size={2}
+                        data-test-id="frontier-sdk-pat-token-copy-btn"
+                      />
+                    ) : undefined
+                  }
+                  data-test-id="frontier-sdk-pat-token-input"
+                />
+                <Callout type="alert" icon={<InfoCircledIcon />} width="100%">
+                  Warning : Make sure you copy the above token now. This token
+                  will only be shown once. Store it securely.
+                </Callout>
+              </Flex>
+            </Dialog.Body>
+            <Dialog.Footer>
+              <Flex justify="end">
+                <Button
+                  variant="solid"
+                  color="accent"
+                  size="normal"
+                  onClick={() => handle.close()}
+                  data-test-id="frontier-sdk-pat-created-close-btn"
+                >
+                  Close
+                </Button>
+              </Flex>
+            </Dialog.Footer>
+          </Dialog.Content>
+        );
+      }}
+    </Dialog>
+  );
+}