feat: PAT list and details views

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

@@ -21,6 +21,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';
 
 function Router() {
   return (
@@ -48,6 +50,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 >
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes >

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

@@ -13,7 +13,8 @@ const NAV_ITEMS = [
   { label: 'Projects', path: 'projects' },
   { label: 'Tokens', path: 'tokens' },
   { label: 'Teams', path: 'teams' },
-  { label: 'Service Accounts', path: 'service-accounts' }
+  { label: 'Service Accounts', path: 'service-accounts' },
+  { label: 'Personal Access Tokens', path: 'pats' }
 ];
 
 export default function Settings() {

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/react/index.ts

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

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

@@ -0,0 +1,75 @@
+'use client';
+
+import { InfoCircledIcon } from '@radix-ui/react-icons';
+import {
+  Button,
+  Callout,
+  CopyButton,
+  Dialog,
+  Flex,
+  InputField,
+  Text
+} from '@raystack/apsara-v1';
+import styles from '../pat-view.module.css';
+
+export interface PATCreatedDialogProps {
+  handle: ReturnType<typeof Dialog.createHandle<string>>;
+  onClose?: () => void;
+}
+
+export function PATCreatedDialog({ handle, onClose }: PATCreatedDialogProps) {
+  const handleOpenChange = (open: boolean) => {
+    if (!open) onClose?.();
+  };
+
+  return (
+    <Dialog handle={handle} onOpenChange={handleOpenChange}>
+      {({ payload: token }) => (
+        <Dialog.Content width={400}>
+          <Dialog.Header>
+            <Dialog.Title>Success</Dialog.Title>
+          </Dialog.Header>
+          <Dialog.Body>
+            <Flex direction="column" gap={7}>
+              <Text size="small">
+                You&apos;ve successfully added a new personal access token. Copy
+                the token now
+              </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 />} className={styles.callout}>
+                Warning : Make sure you copy the above token now. We don&apos;t
+                store it and you will not be able to see it again.
+              </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>
+  );
+}