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

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

@@ -0,0 +1,14 @@
+import { PlansView } from "@raystack/frontier/admin";
+import { useNavigate, useParams } from "react-router-dom";
+
+export function PlansPage() {
+  const { planId } = useParams();
+  const navigate = useNavigate();
+
+  return (
+    <PlansView
+      selectedPlanId={planId}
+      onCloseDetail={() => navigate("/plans")}
+    />
+  );
+}

web/apps/admin/src/routes.tsx

@@ -7,8 +7,7 @@ import LoadingState from "./components/states/Loading";
 import UnauthorizedState from "./components/states/Unauthorized";
 
 import App from "./App";
-import PlanList from "./containers/billingplans.list";
-import PlanDetails from "./containers/billingplans.list/details";
+import { PlansPage } from "./pages/plans/PlansPage";
 import Login from "./containers/login";
 import MagicLink from "./containers/magiclink";
 
@@ -84,8 +83,8 @@ export default memo(function AppRoutes() {
 
         <Route path="audit-logs" element={<AuditLogsPage />} />
 
-        <Route path="plans" element={<PlanList />}>
-          <Route path=":planId" element={<PlanDetails />} />
+        <Route path="plans" element={<PlansPage />}>
+          <Route path=":planId" element={<PlansPage />} />
         </Route>
 
         <Route path="roles" element={<RolesPage />}>

web/lib/admin/index.ts

@@ -6,6 +6,7 @@ export { default as InvoicesView } from "./views/invoices";
 export { ProductsView, ProductPricesView } from "./views/products/exports";
 export { default as AuditLogsView } from "./views/audit-logs";
 export { default as AdminsView } from "./views/admins";
+export { default as PlansView } from "./views/plans";
 
 // utils exports
 export {

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

@@ -1,7 +1,7 @@
 import { Link } from "react-router-dom";
 import { type DataTableColumnDef } from "@raystack/apsara";
 import type { Plan } from "@raystack/proton/frontier";
-import { timestampToDate, TimeStamp } from "~/utils/connect-timestamp";
+import { timestampToDate, type TimeStamp } from "../../utils/connect-timestamp";
 
 export const getColumns: () => DataTableColumnDef<
   Plan,

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

@@ -1,9 +1,8 @@
 import { Flex, Text, Grid } from "@raystack/apsara";
-import { usePlan } from ".";
-import { timestampToDate } from "~/utils/connect-timestamp";
+import type { Plan } from "@raystack/proton/frontier";
+import { timestampToDate } from "../../utils/connect-timestamp";
 
-export default function PlanDetails() {
-  const { plan } = usePlan();
+export default function PlanDetails({ plan }: { plan: Plan | null }) {
 
   return (
     <Flex direction="column" gap={9}>

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

@@ -1,5 +1,5 @@
 import { DataTable } from "@raystack/apsara";
-import PageHeader from "~/components/page-header";
+import { PageHeader } from "../../components/PageHeader";
 import styles from "./plans.module.css";
 
 export const PlanHeader = ({ header }: any) => {

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

@@ -1,29 +1,32 @@
 import { EmptyState, Flex, DataTable, Sheet } from "@raystack/apsara";
-import {
-  Outlet,
-  useNavigate,
-  useOutletContext,
-  useParams,
-} from "react-router-dom";
-
 import type { Plan } from "@raystack/proton/frontier";
-import { reduceByKey } from "~/utils/helper";
+import { reduceByKey } from "../../utils/helper";
 import { getColumns } from "./columns";
 import { PlanHeader } from "./header";
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
 import styles from "./plans.module.css";
-import PageTitle from "~/components/page-title";
-import { SheetHeader } from "~/components/sheet/header";
+import { PageTitle } from "../../components/PageTitle";
+import { SheetHeader } from "../../components/SheetHeader";
 import { useQuery } from "@connectrpc/connect-query";
 import { FrontierServiceQueries } from "@raystack/proton/frontier";
+import PlanDetails from "./details";
 
 const pageHeader = {
   title: "Plans",
   breadcrumb: [],
 };
 
-type ContextType = { plan: Plan | null };
-export default function PlanList() {
+export type PlansViewProps = {
+  selectedPlanId?: string;
+  onCloseDetail?: () => void;
+  appName?: string;
+};
+
+export default function PlansView({
+  selectedPlanId,
+  onCloseDetail,
+  appName,
+}: PlansViewProps = {}) {
   const {
     data: plansResponse,
     isLoading: isPlansLoading,
@@ -34,19 +37,9 @@
   });
 
   const plans = plansResponse?.plans || [];
-
-  let { planId } = useParams();
-
   const planMapById = reduceByKey(plans ?? [], "id");
-
   const columns = getColumns();
 
-  const navigate = useNavigate();
-
-  function onClose() {
-    navigate("/plans");
-  }
-
   if (isError) {
     console.error("ConnectRPC Error:", error);
     return (
@@ -70,21 +63,19 @@
       defaultSort={{ name: "title", order: "asc" }}
     >
       <Flex direction="column">
-        <PageTitle title="Plans" />
+        <PageTitle title="Plans" appName={appName} />
         <PlanHeader header={pageHeader} />
         <DataTable.Content
           emptyState={noDataChildren}
           classNames={{ root: styles.tableRoot, table: styles.table }}
         />
       </Flex>
-      <Sheet open={planId !== undefined}>
+      <Sheet open={selectedPlanId !== undefined}>
         <Sheet.Content className={styles.sheetContent}>
-          <SheetHeader title="Plan Details" onClick={onClose} />
+          <SheetHeader title="Plan Details" onClick={onCloseDetail ?? (() => {})} />
           <Flex className={styles.sheetContentBody}>
-            <Outlet
-              context={{
-                plan: planId ? planMapById[planId] : null,
-              }}
+            <PlanDetails
+              plan={selectedPlanId ? planMapById[selectedPlanId] ?? null : null}
             />
           </Flex>
         </Sheet.Content>
@@ -93,10 +84,6 @@
   );
 }
 
-export function usePlan() {
-  return useOutletContext<ContextType>();
-}
-
 export const noDataChildren = (
   <EmptyState icon={<ExclamationTriangleIcon />} heading="0 plan created" />
 );