feat(admin-ui): add cancellation and status

ui/src/containers/organisations.list/billingaccounts/subscriptions/columns.tsx

@@ -2,6 +2,8 @@ import { V1Beta1Plan, V1Beta1Subscription } from "@raystack/frontier";
 import type { ColumnDef } from "@tanstack/react-table";
 import { createColumnHelper } from "@tanstack/react-table";
 import { Text } from "@raystack/apsara";
+import { capitalizeFirstLetter, getFormattedDateString } from "~/utils/helper";
+import { SUBSCRIPTION_STATUSES } from "~/utils/constants";
 const columnHelper = createColumnHelper<V1Beta1Subscription>();
 
 interface getColumnsOptions {
@@ -28,40 +30,40 @@ export const getColumns: (
       accessorKey: "plan_id",
       cell: (info) => {
         const planId = info.getValue();
-        const planName = `${plansMap[planId]?.title} (${plansMap[planId]?.interval})`;
-        return <Text>{planName}</Text>;
+        const planName = plansMap[planId]?.title;
+        const planInterval = plansMap[planId]?.interval;
+        return planName ? <Text>{planName} ({planInterval})</Text> : '-'
       },
       filterVariant: "text",
     },
     {
       header: "Period start date",
       accessorKey: "current_period_start_at",
-      meta: {
-        headerFilter: false,
-      },
-      cell: (info) =>
-        new Date(info.getValue() as Date).toLocaleString("en", {
-          month: "long",
-          day: "numeric",
-          year: "numeric",
-        }),
-
+      filterVariant: "date",
+      cell: (info) => getFormattedDateString(info.getValue()),
       footer: (props) => props.column.id,
     },
     {
       header: "Period end date",
       accessorKey: "current_period_end_at",
+      filterVariant: "date",
+      cell: (info) => getFormattedDateString(info.getValue()),
+      footer: (props) => props.column.id,
+    },
+    {
+      header: "Cancellation date",
+      accessorKey: "canceled_at",
+      filterVariant: "date",
+      cell: (info) => getFormattedDateString(info.getValue()),
+    },
+    {
+      header: "Status",
+      accessorKey: "state",
+      cell: (info) => capitalizeFirstLetter(info.getValue()),
       meta: {
-        headerFilter: false,
+        data: SUBSCRIPTION_STATUSES
       },
-      cell: (info) =>
-        new Date(info.getValue() as Date).toLocaleString("en", {
-          month: "long",
-          day: "numeric",
-          year: "numeric",
-        }),
-
-      footer: (props) => props.column.id,
+      filterVariant: "select",
     },
   ];
 };

ui/src/containers/organisations.list/billingaccounts/subscriptions/index.tsx

@@ -88,7 +88,7 @@ export default function OrganisationBASubscriptions() {
 export const noDataChildren = (
   <EmptyState>
     <div className="svg-container"></div>
-    <h3>0 subsctription created</h3>
+    <h3>0 subscriptions created</h3>
   </EmptyState>
 );
 

ui/src/contexts/App.tsx

@@ -42,7 +42,7 @@ export const AppContext = createContext<AppContextValue>(
   AppContextDefaultValue
 );
 
-export const AppConextProvider: React.FC<PropsWithChildren> = function ({
+export const AppContextProvider: React.FC<PropsWithChildren> = function ({
   children,
 }) {
   const { client, user, isUserLoading } = useFrontier();

ui/src/main.tsx

@@ -6,7 +6,7 @@ import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import { Toaster } from "sonner";
 import Routes from "./routes";
-import { AppConextProvider } from "./contexts/App";
+import { AppContextProvider } from "./contexts/App";
 
 const getFrontierConfig = () => {
   const frontierEndpoint =
@@ -32,9 +32,9 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
           baseColor="var(--background-base-hover)"
         >
           <FrontierProvider config={frontierConfig}>
-            <AppConextProvider>
+            <AppContextProvider>
               <Routes />
-            </AppConextProvider>
+            </AppContextProvider>
           </FrontierProvider>
           <Toaster richColors />
         </SkeletonTheme>

ui/src/utils/constants.ts

@@ -3,3 +3,12 @@ export const DEFAULT_DATE_FORMAT = "MMM DD, YYYY";
 export const PERMISSIONS = {
   OrganizationNamespace: "app/organization",
 } as const;
+
+
+export const SUBSCRIPTION_STATUSES = [
+  {label: 'Active', value: 'active'},
+  {label: 'Trialing', value: 'trialing'},
+  {label: 'Past due', value: 'past_due'},
+  {label: 'Canceled', value: 'canceled'},
+  {label: 'Ended', value: 'ended'}
+]

ui/src/utils/helper.ts

@@ -1,4 +1,6 @@
+import dayjs from "dayjs";
 import type { TableColumnMetadata } from "~/types/types";
+import { DEFAULT_DATE_FORMAT } from "./constants";
 
 const DEFAULT_REDIRECT = "/";
 const currencySymbolMap: Record<string, string> = {
@@ -48,3 +50,8 @@ export const fetcher = (...args) => fetch(...args).then((res) => res.json());
 
 export const keyToColumnMetaObject = (key: any) =>
   ({ key: key, name: key, value: key } as TableColumnMetadata);
+
+/*
+ * @desc returns date string - Eg, June 13, 2025. return '-' if the date in the argument is invalid.
+ */
+export const getFormattedDateString = (date: string) => date ? dayjs(date).format(DEFAULT_DATE_FORMAT) : '-'