feat(admin-ui): unify page header height and surface icon prop on Views

web/apps/admin/src/pages/admins/AdminsPage.tsx

@@ -1,5 +1,6 @@
 import { AdminsView, useAdminPaths } from "@raystack/frontier/admin";
 import { useNavigate } from "react-router-dom";
+import AdminsIcon from "~/assets/icons/admins.svg?react";
 
 export function AdminsPage() {
   const navigate = useNavigate();
@@ -8,6 +9,7 @@ export function AdminsPage() {
   return (
     <AdminsView
       onNavigateToOrg={(orgId: string) => navigate(`/${paths.organizations}/${orgId}`)}
+      icon={<AdminsIcon />}
     />
   );
 }

web/apps/admin/src/pages/plans/PlansPage.tsx

@@ -1,5 +1,6 @@
 import { PlansView } from "@raystack/frontier/admin";
 import { useNavigate, useParams } from "react-router-dom";
+import PlansIcon from "~/assets/icons/plans.svg?react";
 
 export function PlansPage() {
   const { planId } = useParams();
@@ -10,6 +11,7 @@ export function PlansPage() {
       selectedPlanId={planId}
       onCloseDetail={() => navigate("/plans")}
       onSelectPlan={(id: string) => navigate(`/plans/${id}`)}
+      icon={<PlansIcon />}
     />
   );
 }

web/apps/admin/src/pages/preferences/PreferencesPage.tsx

@@ -1,5 +1,6 @@
 import { useParams, useNavigate } from "react-router-dom";
 import { PreferencesView } from "@raystack/frontier/admin";
+import PreferencesIcon from "~/assets/icons/preferences.svg?react";
 
 export function PreferencesPage() {
   const { name } = useParams();
@@ -10,6 +11,7 @@ export function PreferencesPage() {
       selectedPreferenceName={name}
       onCloseDetail={() => navigate("/preferences")}
       onSelectPreference={(prefName: string) => navigate(`/preferences/${prefName}`)}
+      icon={<PreferencesIcon />}
     />
   );
 }

web/apps/admin/src/pages/products/ProductsPage.tsx

@@ -1,5 +1,6 @@
 import { ProductsView } from "@raystack/frontier/admin";
 import { useParams, useNavigate } from "react-router-dom";
+import ProductsIcon from "~/assets/icons/products.svg?react";
 
 export function ProductsPage() {
   const { productId } = useParams();
@@ -11,6 +12,7 @@ export function ProductsPage() {
       onSelectProduct={(id) => navigate(`/products/${encodeURIComponent(id)}`)}
       onCloseDetail={() => navigate("/products")}
       onNavigateToPrices={(id) => navigate(`/products/${encodeURIComponent(id)}/prices`)}
+      icon={<ProductsIcon />}
     />
   );
 }

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

@@ -1,5 +1,6 @@
 import { RolesView } from "@raystack/frontier/admin";
 import { useParams, useNavigate } from "react-router-dom";
+import RolesIcon from "~/assets/icons/roles.svg?react";
 
 export function RolesPage() {
   const { roleId } = useParams();
@@ -10,6 +11,7 @@ export function RolesPage() {
       selectedRoleId={roleId}
       onSelectRole={(id) => navigate(`/roles/${encodeURIComponent(id)}`)}
       onCloseDetail={() => navigate("/roles")}
+      icon={<RolesIcon />}
     />
   );
 }

web/apps/admin/src/pages/webhooks/WebhooksPage.tsx

@@ -2,6 +2,7 @@ import { useContext } from "react";
 import { useMatch, useParams, useNavigate } from "react-router-dom";
 import { WebhooksView } from "@raystack/frontier/admin";
 import { AppContext } from "~/contexts/App";
+import WebhooksIcon from "~/assets/icons/webhooks.svg?react";
 
 export function WebhooksPage() {
   const { config } = useContext(AppContext);
@@ -19,6 +20,7 @@ export function WebhooksPage() {
       onSelectWebhook={(id: string) => navigate(`/webhooks/${encodeURIComponent(id)}`)}
       onOpenCreate={() => navigate("/webhooks/create")}
       enableDelete={enableDelete}
+      icon={<WebhooksIcon />}
     />
   );
 }

web/sdk/admin/components/PageHeader.tsx

@@ -1,9 +1,10 @@
-import type { CSSProperties, PropsWithChildren } from "react";
+import type { CSSProperties, PropsWithChildren, ReactNode } from "react";
 import { Flex, Text } from "@raystack/apsara-v1";
 import styles from "./page-header.module.css";
 
 export type PageHeaderTypes = {
   title: string;
+  icon?: ReactNode;
   breadcrumb: { name: string; href?: string }[];
   // eslint-disable-next-line no-unused-vars -- callback param name is for type documentation
   onBreadcrumbClick?: (item: { name: string; href?: string }) => void;
@@ -13,6 +14,7 @@ export type PageHeaderTypes = {
 
 export function PageHeader({
   title,
+  icon,
   breadcrumb,
   onBreadcrumbClick,
   children,
@@ -25,11 +27,12 @@ export function PageHeader({
       align="center"
       justify="between"
       className={className}
-      style={{ padding: "16px 24px", ...style }}
+      style={{ padding: "16px 24px", minHeight: "var(--rs-space-12)", ...style }}
       {...props}
     >
       <Flex align="center" gap={5}>
-        <Flex align="center" gap={3} className={styles.breadcrumb}>
+        <Flex align="center" gap={2} className={styles.breadcrumb}>
+          {icon}
           <Text style={{ fontSize: "14px", fontWeight: "500" }}>{title}</Text>
           {breadcrumb.map((item) =>
             item.href && onBreadcrumbClick ? (

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

@@ -1,4 +1,5 @@
 import { DataTable, EmptyState, Flex } from "@raystack/apsara-v1";
+import type { ReactNode } from "react";
 import { getColumns } from "./columns";
 import styles from "./admins.module.css";
 import { useQuery } from "@connectrpc/connect-query";
@@ -23,10 +24,12 @@
 };
 
 export type AdminsViewProps = {
   onNavigateToOrg?: (orgId: string) => void;
+  /** Icon rendered in the page header next to the title. */
+  icon?: ReactNode;
 };
 
-export default function AdminsView({ onNavigateToOrg }: AdminsViewProps = {}) {
+export default function AdminsView({ onNavigateToOrg, icon }: AdminsViewProps = {}) {
   const t = useTerminology();
   const {
     data: platformUsersData,
@@ -68,6 +71,7 @@
       <Flex direction="column" className={styles.tableWrapper}>
         <PageHeader
           title={pageHeader.title}
+          icon={icon}
           breadcrumb={pageHeader.breadcrumb}
           className={styles.header}
         />

web/sdk/admin/views/audit-logs/audit-logs.module.css

@@ -5,6 +5,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  min-height: var(--rs-space-12);
 }
 
 .table {

web/sdk/admin/views/invoices/invoices.module.css

@@ -5,6 +5,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  min-height: var(--rs-space-12);
 }
 
 .table {

web/sdk/admin/views/organizations/list/list.module.css

@@ -5,6 +5,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  min-height: var(--rs-space-12);
 }
 
 .table {

web/sdk/admin/views/plans/header.tsx

@@ -1,11 +1,13 @@
+import type { ReactNode } from "react";
 import { DataTable } from "@raystack/apsara-v1";
 import { PageHeader } from "../../components/PageHeader";
 import styles from "./plans.module.css";
 
-export const PlanHeader = ({ header }: any) => {
+export const PlanHeader = ({ header, icon }: { header: any; icon?: ReactNode }) => {
   return (
     <PageHeader
       title={header.title}
+      icon={icon}
       breadcrumb={header?.breadcrumb || []}
       className={styles.header}
     >

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

@@ -1,4 +1,5 @@
 import { EmptyState, Flex, DataTable, Drawer } from "@raystack/apsara-v1";
+import type { ReactNode } from "react";
 import type { Plan } from "@raystack/proton/frontier";
 import { reduceByKey } from "../../utils/helper";
 import { getColumns } from "./columns";
@@ -25,13 +26,16 @@ export type PlansViewProps = {
   onSelectPlan?: (planId: string) => void;
   /** App name displayed in the page title. */
   appName?: string;
+  /** Icon rendered in the page header next to the title. */
+  icon?: ReactNode;
 };
 
 export default function PlansView({
   selectedPlanId,
   onCloseDetail,
   onSelectPlan,
   appName,
+  icon,
 }: PlansViewProps = {}) {
   const {
     data: plansResponse,
@@ -70,7 +74,7 @@ export default function PlansView({
     >
       <Flex direction="column">
         <PageTitle title="Plans" appName={appName} />
-        <PlanHeader header={pageHeader} />
+        <PlanHeader header={pageHeader} icon={icon} />
         <DataTable.Content
           emptyState={noDataChildren}
           classNames={{ root: styles.tableRoot, table: styles.table }}

web/sdk/admin/views/preferences/PreferencesView.tsx

@@ -1,4 +1,5 @@
 import { Flex, EmptyState } from "@raystack/apsara-v1";
+import type { ReactNode } from "react";
 import { createQueryOptions, useTransport } from "@connectrpc/connect-query";
 import {
   AdminServiceQueries,
@@ -20,12 +21,15 @@ export type PreferencesViewProps = {
   /** Called when the detail panel is closed. Use to clear the selected preference. */
   onCloseDetail?: () => void;
   onSelectPreference?: (name: string) => void;
+  /** Icon rendered in the page header next to the title. */
+  icon?: ReactNode;
 };
 
 export default function PreferencesView({
   selectedPreferenceName,
   onCloseDetail,
   onSelectPreference,
+  icon,
 }: PreferencesViewProps = {}) {
   const transport = useTransport();
 
@@ -85,6 +89,7 @@ export default function PreferencesView({
         traits={traits}
         isLoading={isLoading}
         onSelectPreference={onSelectPreference}
+        icon={icon}
       />
     </Flex>
   );

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

@@ -1,4 +1,5 @@
 import { EmptyState, DataTable, Flex } from "@raystack/apsara-v1";
+import type { ReactNode } from "react";
 import { Preference, PreferenceTrait } from "@raystack/proton/frontier";
 import { PageHeader } from "../../components/PageHeader";
 import { getColumns } from "./columns";
@@ -15,13 +16,15 @@ export type PreferencesListProps = {
   traits: PreferenceTrait[];
   isLoading: boolean;
   onSelectPreference?: (name: string) => void;
+  icon?: ReactNode;
 };
 
 export default function PreferencesList({
   preferences,
   traits,
   isLoading,
   onSelectPreference,
+  icon,
 }: PreferencesListProps) {
   const columns = getColumns({
     traits,
@@ -40,6 +43,7 @@ export default function PreferencesList({
       <Flex direction="column" className={styles.tableWrapper}>
         <PageHeader
           title={pageHeader.title}
+          icon={icon}
           breadcrumb={pageHeader.breadcrumb}
           className={styles.header}
         />

web/sdk/admin/views/products/header.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import { DataTable } from "@raystack/apsara-v1";
 import { PageHeader } from "../../components/PageHeader";
 import styles from "./products.module.css";
@@ -13,14 +14,17 @@ const defaultPageHeader = {
 export const ProductsHeader = ({
   header = defaultPageHeader,
   onBreadcrumbClick,
+  icon,
 }: {
   header?: typeof defaultPageHeader;
   // eslint-disable-next-line no-unused-vars -- callback param name is for type documentation
   onBreadcrumbClick?: (item: { name: string; href?: string }) => void;
+  icon?: ReactNode;
 }) => {
   return (
     <PageHeader
       title={header.title}
+      icon={icon}
       breadcrumb={header.breadcrumb}
       onBreadcrumbClick={onBreadcrumbClick}
       className={styles.header}

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

@@ -1,4 +1,5 @@
 import { EmptyState, Flex, DataTable } from "@raystack/apsara-v1";
+import type { ReactNode } from "react";
 import { useQuery } from "@connectrpc/connect-query";
 import { FrontierServiceQueries } from "@raystack/proton/frontier";
 import type { Product } from "@raystack/proton/frontier";
@@ -21,6 +22,8 @@ export type ProductsViewProps = {
   onNavigateToPrices?: (productId: string) => void;
   /** App name displayed in the page title. */
   appName?: string;
+  /** Icon rendered in the page header next to the title. */
+  icon?: ReactNode;
 };
 
 export default function ProductsView({
@@ -29,6 +32,7 @@ export default function ProductsView({
   onCloseDetail,
   onNavigateToPrices,
   appName,
+  icon,
 }: ProductsViewProps = {}) {
   const {
     data: productsResponse,
@@ -78,7 +82,7 @@ export default function ProductsView({
         onRowClick={handleRowClick}
       >
         <Flex direction="column" className={styles.tableWrapper}>
-          <ProductsHeader />
+          <ProductsHeader icon={icon} />
           <DataTable.Content
             emptyState={noDataChildren}
             classNames={{ root: styles.tableRoot }}

web/sdk/admin/views/roles/header.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import { DataTable } from "@raystack/apsara-v1";
 import { PageHeader } from "../../components/PageHeader";
 import styles from "./roles.module.css";
@@ -7,10 +8,11 @@ const pageHeader = {
   breadcrumb: [] as { name: string; href?: string }[],
 };
 
-export const RolesHeader = () => {
+export const RolesHeader = ({ icon }: { icon?: ReactNode }) => {
   return (
     <PageHeader
       title={pageHeader.title}
+      icon={icon}
       breadcrumb={pageHeader.breadcrumb}
       className={styles.header}
     >

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

@@ -1,5 +1,5 @@
 import { EmptyState, Flex, DataTable, Drawer } from "@raystack/apsara-v1";
-import { useCallback, useState } from "react";
+import { useCallback, useState, type ReactNode } from "react";
 
 import { reduceByKey } from "../../utils/helper";
 import { getColumns } from "./columns";
@@ -22,13 +22,16 @@ export type RolesViewProps = {
   onCloseDetail?: () => void;
   /** App name displayed in the page title. */
   appName?: string;
+  /** Icon rendered in the page header next to the title. */
+  icon?: ReactNode;
 };
 
 export default function RolesView({
   selectedRoleId: controlledRoleId,
   onSelectRole,
   onCloseDetail,
   appName,
+  icon,
 }: RolesViewProps = {}) {
   const [internalRoleId, setInternalRoleId] = useState<string | undefined>();
 
@@ -82,7 +85,7 @@ export default function RolesView({
       isLoading={isLoading}>
       <Flex direction="column">
         <PageTitle title="Roles" appName={appName} />
-        <RolesHeader />
+        <RolesHeader icon={icon} />
         <DataTable.Content
           emptyState={noDataChildren}
           classNames={{

web/sdk/admin/views/users/list/list.module.css

@@ -5,6 +5,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  min-height: var(--rs-space-12);
 }
 
 .table {