feat: export Roles page as a component and consume it in apps/admin

web/apps/admin/package.json

@@ -19,7 +19,7 @@
     "@radix-ui/react-form": "^0.0.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@raystack/apsara": "^0.53.2",
-    "@raystack/frontier": "^0.78.0",
+    "@raystack/frontier": "workspace:^",
     "@raystack/proton": "0.1.0-b1687af73f994fa9612a023c850aa97c35735af8",
     "@stitches/react": "^1.2.8",
     "@tanstack/react-query": "^5.83.0",

web/apps/admin/src/pages/roles/RolesPage.tsx

@@ -0,0 +1,15 @@
+import { RolesView } from "@raystack/frontier/admin";
+import { useParams, useNavigate } from "react-router-dom";
+
+export function RolesPage() {
+  const { roleId } = useParams();
+  const navigate = useNavigate();
+
+  return (
+    <RolesView
+      selectedRoleId={roleId}
+      onSelectRole={(id) => navigate(`/roles/${encodeURIComponent(id)}`)}
+      onCloseDetail={() => navigate("/roles")}
+    />
+  );
+}

web/apps/admin/src/routes.tsx

@@ -19,8 +19,7 @@ import ProductList from "./containers/products.list";
 import ProductDetails from "./containers/products.list/details";
 import ProductPrices from "./containers/products.list/prices";
 
-import Roles from "./containers/roles.list";
-import RoleDetails from "./containers/roles.list/details";
+import { RolesPage } from "./pages/roles/RolesPage";
 
 import { AppContext } from "./contexts/App";
 import { SuperAdminList } from "./containers/super_admins/list";
@@ -90,9 +89,9 @@ export default memo(function AppRoutes() {
           <Route path=":planId" element={<PlanDetails />} />
         </Route>
 
-        <Route path="roles" element={<Roles />}>
-          <Route path=":roleId" element={<RoleDetails />} />
-        </Route>
+        <Route path="roles" element={<RolesPage />} />
+        <Route path="roles/:roleId" element={<RolesPage />} />
+
         <Route path="products" element={<ProductList />}>
           <Route path=":productId" element={<ProductDetails />} />
         </Route>

web/apps/admin/src/utils/helper.ts

@@ -104,7 +104,9 @@ export const exportCsvFromStream = async <T>(
     }
   }
 
-  const blob = new Blob(chunks, { type: "text/csv" });
+  // BlobPart is a DOM global type; no-undef doesn't recognize type-only refs
+  // eslint-disable-next-line no-undef
+  const blob = new Blob(chunks as BlobPart[], { type: "text/csv" });
   downloadFile(blob, filename);
 };
 

web/lib/admin/components/PageHeader.tsx

@@ -0,0 +1,41 @@
+import type { CSSProperties, PropsWithChildren } from "react";
+import { Flex, Text } from "@raystack/apsara";
+import styles from "./page-header.module.css";
+
+export type PageHeaderTypes = {
+  title: string;
+  breadcrumb: { name: string; href?: string }[];
+  className?: string;
+  style?: CSSProperties;
+};
+
+export function PageHeader({
+  title,
+  breadcrumb,
+  children,
+  className,
+  style = {},
+  ...props
+}: PropsWithChildren<PageHeaderTypes>) {
+  return (
+    <Flex
+      align="center"
+      justify="between"
+      className={className}
+      style={{ padding: "16px 24px", ...style }}
+      {...props}
+    >
+      <Flex align="center" gap="medium">
+        <Flex align="center" gap="small" className={styles.breadcrumb}>
+          <Text style={{ fontSize: "14px", fontWeight: "500" }}>{title}</Text>
+          {breadcrumb.map((item) => (
+            <span key={item.name} className={styles.breadcrumbItem}>
+              {item.name}
+            </span>
+          ))}
+        </Flex>
+      </Flex>
+      <Flex gap="small">{children}</Flex>
+    </Flex>
+  );
+}

web/lib/admin/components/PageTitle.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+
+interface PageTitleProps {
+  title?: string;
+  appName?: string;
+}
+
+export function PageTitle({ title, appName }: PageTitleProps) {
+  const fullTitle = title && appName ? `${title} | ${appName}` : title ?? appName ?? "";
+
+  useEffect(() => {
+    if (fullTitle) document.title = fullTitle;
+    return () => {
+      document.title = appName ?? "";
+    };
+  }, [fullTitle, appName]);
+
+  return null;
+}

web/lib/admin/components/SheetHeader.tsx

@@ -0,0 +1,31 @@
+import type { CSSProperties } from "react";
+import { Cross1Icon } from "@radix-ui/react-icons";
+import { Flex, Text } from "@raystack/apsara";
+
+type SheetHeaderProps = {
+  title: string;
+  onClick: () => void;
+  "data-testid"?: string;
+};
+
+export function SheetHeader({ title, onClick, "data-testid": dataTestId }: SheetHeaderProps) {
+  return (
+    <Flex justify="between" style={styles.header}>
+      <Text size={4} style={{ fontWeight: "500" }}>
+        {title}
+      </Text>
+      <Cross1Icon
+        onClick={onClick}
+        style={{ cursor: "pointer" }}
+        data-testid={dataTestId ?? "admin-close-btn"}
+      />
+    </Flex>
+  );
+}
+
+const styles: { header: CSSProperties } = {
+  header: {
+    padding: "18px 32px",
+    borderBottom: "1px solid var(--rs-color-border-base-primary)",
+  },
+};

web/lib/admin/components/page-header.module.css

@@ -0,0 +1,42 @@
+.breadcrumb {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  font-size: 16px;
+}
+
+.breadcrumb a {
+  text-decoration: none;
+  color: #007bff;
+  display: inline-block;
+  margin-right: 5px;
+}
+
+.breadcrumb a::before {
+  content: ">";
+  color: #666;
+}
+
+.breadcrumb a:first-child::before {
+  content: "";
+}
+
+.breadcrumb a:last-child {
+  margin-right: 0;
+}
+
+.breadcrumbItem {
+  margin-right: 5px;
+}
+
+.breadcrumbItem::before {
+  content: ">";
+  color: #666;
+  margin-right: 5px;
+}
+
+.breadcrumbItem:first-of-type::before {
+  content: "";
+  margin-right: 0;
+}

web/lib/admin/index.ts

@@ -0,0 +1,3 @@
+"use client";
+
+export { default as RolesView } from "./views/roles";

web/lib/admin/utils/connect-timestamp.ts

@@ -0,0 +1,8 @@
+import { timestampDate, type Timestamp } from "@bufbuild/protobuf/wkt";
+
+export function timestampToDate(timestamp?: Timestamp): Date | null {
+  if (!timestamp) return null;
+  return timestampDate(timestamp);
+}
+
+export type TimeStamp = Timestamp;

web/lib/admin/utils/helper.ts

@@ -0,0 +1,12 @@
+export function reduceByKey<T extends Record<string, unknown>>(
+  data: T[],
+  key: keyof T
+): Record<string, T> {
+  return data.reduce(
+    (acc, value) => ({
+      ...acc,
+      [String(value[key])]: value,
+    }),
+    {} as Record<string, T>
+  );
+}

web/apps/admin/src/containers/roles.list/columns.tsx → web/lib/admin/views/roles/columns.tsx

@@ -28,7 +28,13 @@ export const getColumns: () => DataTableColumnDef<Role, unknown>[] = () => {
       classNames: {
         cell: styles.permissionsColumn,
       },
-      cell: info => <Flex>{(info.getValue() as string[]).join(", ")}</Flex>,
+      cell: info => (
+        <Flex direction="column" gap={1} className={styles.permissionsColumn}>
+          {((info.getValue() as string[]) || []).map((p, i) => (
+            <span key={i}>{p}</span>
+          ))}
+        </Flex>
+      ),
       footer: props => props.column.id,
     },
   ];

web/apps/admin/src/containers/roles.list/details.tsx → web/lib/admin/views/roles/details.tsx

@@ -1,9 +1,7 @@
 import { Flex, Text, Grid } from "@raystack/apsara";
-import { useRole } from ".";
-
-export default function RoleDetails() {
-  const { role } = useRole();
+import type { Role } from "@raystack/proton/frontier";
 
+export default function RoleDetails({ role }: { role: Role | null }) {
   return (
     <Flex direction="column" gap={9}>
       <Text size={4}>{role?.name}</Text>

web/apps/admin/src/containers/roles.list/header.tsx → web/lib/admin/views/roles/header.tsx

@@ -1,10 +1,10 @@
 import { DataTable } from "@raystack/apsara";
-import PageHeader from "~/components/page-header";
+import { PageHeader } from "../../components/PageHeader";
 import styles from "./roles.module.css";
 
 const pageHeader = {
   title: "Roles",
-  breadcrumb: [],
+  breadcrumb: [] as { name: string; href?: string }[],
 };
 
 export const RolesHeader = () => {

web/apps/admin/src/containers/roles.list/index.tsx → web/lib/admin/views/roles/index.tsx

@@ -1,25 +1,43 @@
 import { EmptyState, Flex, DataTable, Sheet } from "@raystack/apsara";
-import {
-  Outlet,
-  useNavigate,
-  useOutletContext,
-  useParams,
-} from "react-router-dom";
+import { useCallback, useState } from "react";
 
-import { reduceByKey } from "~/utils/helper";
+import { reduceByKey } from "../../utils/helper";
 import { getColumns } from "./columns";
 import { RolesHeader } from "./header";
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
-import PageTitle from "~/components/page-title";
+import { PageTitle } from "../../components/PageTitle";
 import styles from "./roles.module.css";
-import { SheetHeader } from "~/components/sheet/header";
+import { SheetHeader } from "../../components/SheetHeader";
 import { FrontierServiceQueries, Role } from "@raystack/proton/frontier";
 import { useQuery } from "@connectrpc/connect-query";
 
-type ContextType = { role: Role | null };
-export default function RoleList() {
-  const { roleId } = useParams();
-  const navigate = useNavigate();
+import RoleDetails from "./details";
+
+export type RolesViewProps = {
+  selectedRoleId?: string;
+  onSelectRole?: (roleId: string) => void;
+  onCloseDetail?: () => void;
+  appName?: string;
+};
+
+export default function RolesView({
+  selectedRoleId: controlledRoleId,
+  onSelectRole,
+  onCloseDetail,
+  appName,
+}: RolesViewProps = {}) {
+  const [internalRoleId, setInternalRoleId] = useState<string | undefined>();
+
+  const selectedRoleId = controlledRoleId ?? internalRoleId;
+  const handleClose = useCallback(
+    () => (onCloseDetail ? onCloseDetail() : setInternalRoleId(undefined)),
+    [onCloseDetail]
+  );
+  const handleRowClick = useCallback(
+    (role: Role) =>
+      onSelectRole ? onSelectRole(role.id ?? "") : setInternalRoleId(role.id ?? undefined),
+    [onSelectRole]
+  );
 
   const {
     data: roles = [],
@@ -35,12 +53,6 @@
   );
   const roleMapByName = reduceByKey(roles ?? [], "id");
 
-  function onClose() {
-    navigate("/roles");
-  }
-  function onRowClick(role: Role) {
-    navigate(`${encodeURIComponent(role.id ?? "")}`);
-  }
   if (isError) {
     console.error("ConnectRPC Error:", error);
     return (
@@ -58,14 +70,14 @@
   const columns = getColumns();
   return (
     <DataTable
-      onRowClick={onRowClick}
+      onRowClick={handleRowClick}
       data={roles}
       columns={columns}
       mode="client"
       defaultSort={{ name: "title", order: "asc" }}
       isLoading={isLoading}>
       <Flex direction="column">
-        <PageTitle title="Roles" />
+        <PageTitle title="Roles" appName={appName} />
         <RolesHeader />
         <DataTable.Content
           emptyState={noDataChildren}
@@ -74,18 +86,16 @@
             table: styles.table,
           }}
         />
-        <Sheet open={roleId !== undefined}>
+        <Sheet open={selectedRoleId !== undefined}>
           <Sheet.Content className={styles.sheetContent}>
             <SheetHeader
               title="Role Details"
-              onClick={onClose}
-              data-test-id="role-details-header"
+              onClick={handleClose}
+              data-testid="role-details-header"
             />
             <Flex className={styles.sheetContentBody}>
-              <Outlet
-                context={{
-                  role: roleId ? roleMapByName[roleId] : null,
-                }}
+              <RoleDetails
+                role={selectedRoleId ? roleMapByName[selectedRoleId] ?? null : null}
               />
             </Flex>
           </Sheet.Content>
@@ -95,10 +105,6 @@
   );
 }
 
-export function useRole() {
-  return useOutletContext<ContextType>();
-}
-
 export const noDataChildren = (
   <EmptyState icon={<ExclamationTriangleIcon />} heading="0 role created" />
 );