refactor(admin): centralize date formatting, fix null-timestamp rendering, and correct table filter attribute

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

@@ -1,4 +1,3 @@
-export const DEFAULT_DATE_FORMAT = "MMM DD, YYYY";
 export const DEFAULT_TOKEN_PRODUCT_NAME = "token";
 
 export const PERMISSIONS = {

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

@@ -1,6 +1,4 @@
-import dayjs from 'dayjs';
 import type { TableColumnMetadata } from '~/types/types';
-import { DEFAULT_DATE_FORMAT } from './constants';
 import { BillingAccount_Address } from '@raystack/proton/frontier';
 
 const currencySymbolMap: Record<string, string> = {
@@ -48,12 +46,6 @@ export const capitalizeFirstLetter = (str: string) => {
 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) : '-';
-
 export const convertBillingAddressToString = (
   address?: BillingAccount_Address
 ) => {

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

@@ -19,4 +19,14 @@ export function isNullTimestamp(timestamp?: Timestamp): boolean {
   return Number(timestamp.seconds) <= 0;
 }
 
+/** Canonical admin date format (matches Apsara). */
+export const DATE_FORMAT = "DD MMM YYYY";
+
+/** Formats a Timestamp, returning "-" for missing/null-time values (which would otherwise render as 01 Jan 1970). */
+export function formatTimestamp(timestamp?: Timestamp, format: string = DATE_FORMAT): string {
+  if (isNullTimestamp(timestamp)) return "-";
+  const date = timestampToDayjs(timestamp);
+  return date ? date.format(format) : "-";
+}
+
 export type TimeStamp = Timestamp;

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

@@ -3,8 +3,8 @@
 import { TerminologyEntity } from "../../hooks/useTerminology";
 import styles from "./admins.module.css";
 
 export const getColumns: (options?: {
   onNavigateToOrg?: (orgId: string) => void;
   t?: {
     organization: TerminologyEntity;
   };
@@ -20,13 +20,15 @@
         cell: styles["first-column"],
         header: styles["first-column"],
       },
-      filterVariant: "text",
+      filterType: "string",
+      enableColumnFilter: true,
       cell: (info) => info.getValue() || "-",
     },
     {
       header: "Email",
       accessorKey: "email",
-      filterVariant: "text",
+      filterType: "string",
+      enableColumnFilter: true,
       cell: (info) => info.getValue() || "-",
     },
     {

web/sdk/admin/views/audit-logs/columns.tsx

@@ -1,16 +1,15 @@
 import { Badge, DataTableColumnDef, Flex, Text } from "@raystack/apsara";
-import dayjs from "dayjs";
 import styles from "./audit-logs.module.css";
 import {
   AuditRecord,
   AuditRecordActor,
   AuditRecordResource,
 } from "@raystack/proton/frontier";
 import {
+  formatTimestamp,
   isNullTimestamp,
   TimeStamp,
-  timestampToDate,
-} from "../../utils/connect-timestamp";
+} from "~/admin/utils/connect-timestamp";
 import { ACTOR_TYPES, getActionBadgeColor } from "./util";
 import { ComponentPropsWithoutRef } from "react";
 import ActorCell from "./actor-cell";
@@ -25,7 +24,7 @@
 }
 
 export const getColumns = ({
   groupCountMap,
   t,
 }: getColumnsOptions): DataTableColumnDef<AuditRecord, unknown>[] => {
   return [
@@ -113,14 +112,13 @@
         if (isNullTimestamp(value)) {
           return <Text>-</Text>;
         }
-        const date = dayjs(timestampToDate(value));
         return (
           <Flex gap={1} direction="column">
             <Text size="small" weight="medium">
-              {date.format("DD MMM YYYY")}
+              {formatTimestamp(value)}
             </Text>
             <Text size="small" variant="secondary">
-              {date.format("hh:mm A")}
+              {formatTimestamp(value, "hh:mm A")}
             </Text>
           </Flex>
         );

web/sdk/admin/views/audit-logs/sidepanel-details.tsx

@@ -9,8 +9,7 @@
 import styles from "./audit-logs.module.css";
 import { AuditRecord } from "@raystack/proton/frontier";
 import { ACTOR_TYPES } from "./util";
-import { timestampToDate } from "../../utils/connect-timestamp";
-import dayjs from "dayjs";
+import { formatTimestamp } from "~/admin/utils/connect-timestamp";
 import { MapIcon } from "../../assets/icons/MapIcon";
 import SidePanelLogDialog from "./sidepanel-log-dialog";
 import ActorCell from "./actor-cell";
@@ -22,7 +21,7 @@
 
 type SidePanelDetailsProps = Partial<AuditRecord> & {
   onClose: () => void;
   onNavigate?: (path: string) => void;
 };
 
 type AuditSessionContext = {
@@ -44,8 +43,6 @@
   const paths = useAdminPaths();
   const { actor, event, resource, occurredAt, id, orgId, orgName, target } =
     rest;
-  const date = dayjs(timestampToDate(occurredAt));
-
   const session = actor?.metadata?.context as AuditSessionContext;
   const location =
     (session && `${session.Location.City}, ${session.Location.Country}`) || "-";
@@ -100,11 +97,11 @@
           </List.Item>
           <List.Item>
             <List.Label className={styles["sidepanel-list"]}>Date</List.Label>
-            <List.Value>{date.format("DD MMM YYYY")}</List.Value>
+            <List.Value>{formatTimestamp(occurredAt)}</List.Value>
           </List.Item>
           <List.Item>
             <List.Label className={styles["sidepanel-list"]}>Time</List.Label>
-            <List.Value>{date.format("hh:mm A")}</List.Value>
+            <List.Value>{formatTimestamp(occurredAt, "hh:mm A")}</List.Value>
           </List.Item>
           <List.Item>
             <List.Label className={styles["sidepanel-list"]}>ID</List.Label>

web/sdk/admin/views/invoices/columns.tsx

@@ -1,11 +1,6 @@
 import { Amount, type DataTableColumnDef, Link, Text } from "@raystack/apsara";
-import dayjs from "dayjs";
 import type { SearchInvoicesResponse_Invoice } from "@raystack/proton/frontier";
-import {
-  isNullTimestamp,
-  TimeStamp,
-  timestampToDate,
-} from "../../utils/connect-timestamp";
+import { formatTimestamp, TimeStamp } from "~/admin/utils/connect-timestamp";
 import { TerminologyEntity } from "../../hooks/useTerminology";
 import styles from "./invoices.module.css";
 
@@ -29,13 +24,9 @@ export const getColumns = ({ t }: GetColumnsOptions): DataTableColumnDef<
       },
       filterType: "date",
       enableColumnFilter: true,
-      cell: ({ getValue }) => {
-        const value = getValue() as TimeStamp;
-        const date = isNullTimestamp(value)
-          ? "-"
-          : dayjs(timestampToDate(value)).format("YYYY-MM-DD");
-        return <Text>{date}</Text>;
-      },
+      cell: ({ getValue }) => (
+        <Text>{formatTimestamp(getValue() as TimeStamp)}</Text>
+      ),
       enableHiding: true,
       enableSorting: true,
     },

web/sdk/admin/views/organizations/details/apis/columns.tsx

@@ -1,6 +1,5 @@
 import { Text, type DataTableColumnDef } from "@raystack/apsara";
-import dayjs from "dayjs";
-import { NULL_DATE } from "../../../../utils/constants";
+import { formatTimestamp, type TimeStamp } from "~/admin/utils/connect-timestamp";
 import styles from "./apis.module.css";
 import type {
   SearchOrganizationServiceUsersResponse_OrganizationServiceUser,
@@ -48,12 +47,9 @@ SearchOrganizationServiceUsersResponse_OrganizationServiceUser,
       enableColumnFilter: true,
     },
     {
-      accessorKey: "created_at",
+      accessorKey: "createdAt",
       header: "Created on",
-      cell: ({ getValue }) => {
-        const value = getValue() as string;
-        return value !== NULL_DATE ? dayjs(value).format("YYYY-MM-DD") : "-";
-      },
+      cell: ({ getValue }) => formatTimestamp(getValue() as TimeStamp),
       enableSorting: true,
       enableColumnFilter: true,
       filterType: "date",

web/sdk/admin/views/organizations/details/apis/details-dialog.tsx

@@ -1,7 +1,6 @@
 import { Dialog, Flex, Skeleton, Tabs, Text, toastManager } from "@raystack/apsara";
 import styles from "./apis.module.css";
 import { useCallback, useEffect, useMemo } from "react";
-import dayjs from "dayjs";
 import { useQuery } from "@connectrpc/connect-query";
 import {
   FrontierServiceQueries,
@@ -10,7 +9,7 @@ import {
   type SearchOrganizationServiceUsersResponse_OrganizationServiceUser
 } from "@raystack/proton/frontier";
 import { create } from "@bufbuild/protobuf";
-import { timestampToDayjs } from "../../../../utils/connect-timestamp";
+import { formatTimestamp } from "~/admin/utils/connect-timestamp";
 import { useTerminology } from "../../../../hooks/useTerminology";
 
 interface ServiceUserDetailsDialogProps {
@@ -129,7 +128,7 @@ export const ServiceUserDetailsDialog = ({
                     >
                       <Text weight="medium">{token.title}</Text>
                       <Text size="micro">
-                        {timestampToDayjs(token.createdAt)?.format("YYYY-MM-DD")}
+                        {formatTimestamp(token.createdAt)}
                       </Text>
                     </Flex>
                   ))}

web/sdk/admin/views/organizations/details/invoices/columns.tsx

@@ -1,14 +1,9 @@
 import styles from "./invoices.module.css";
-import dayjs from "dayjs";
 import { DataTableColumnDef, Link, Amount } from "@raystack/apsara";
 import type {
   SearchOrganizationInvoicesResponse_OrganizationInvoice,
 } from "@raystack/proton/frontier";
-import {
-  isNullTimestamp,
-  TimeStamp,
-  timestampToDate,
-} from "../../../../utils/connect-timestamp";
+import { formatTimestamp, TimeStamp } from "~/admin/utils/connect-timestamp";
 
 // https://docs.stripe.com/invoicing/overview#invoice-statuses
 const InvoiceStatusesMap = {
@@ -38,13 +33,7 @@ export const getColumns = ({
         cell: styles["first-column"],
         header: styles["first-column"],
       },
-      cell: ({ getValue }) => {
-        const value = getValue() as TimeStamp;
-        const date = isNullTimestamp(value)
-          ? "-"
-          : dayjs(timestampToDate(value)).format("YYYY-MM-DD");
-        return date;
-      },
+      cell: ({ getValue }) => formatTimestamp(getValue() as TimeStamp),
       enableSorting: true,
       enableColumnFilter: true,
       filterType: "date",

web/sdk/admin/views/organizations/details/members/columns.tsx

@@ -14,14 +14,9 @@ import type {
 } from "@raystack/proton/frontier";
 import type { UpdateRolePayload } from "./update-role";
 import styles from "./members.module.css";
-import dayjs from "dayjs";
 import { DotsHorizontalIcon, UpdateIcon } from "@radix-ui/react-icons";
 import { DeleteIcon } from "~/admin/assets/icons/DeleteIcon";
-import {
-  isNullTimestamp,
-  TimeStamp,
-  timestampToDate,
-} from "../../../../utils/connect-timestamp";
+import { formatTimestamp, TimeStamp } from "~/admin/utils/connect-timestamp";
 
 const MemberStates = {
   enabled: "Active",
@@ -122,13 +117,9 @@ export const getColumns = ({
     {
       accessorKey: "orgJoinedAt",
       header: "Joined On",
-      cell: ({ getValue }) => {
-        const value = getValue() as TimeStamp;
-        const date = isNullTimestamp(value)
-          ? "-"
-          : dayjs(timestampToDate(value)).format("YYYY-MM-DD");
-        return <Text>{date}</Text>;
-      },
+      cell: ({ getValue }) => (
+        <Text>{formatTimestamp(getValue() as TimeStamp)}</Text>
+      ),
       enableSorting: true,
       enableHiding: true,
       // enableColumnFilter: true,

web/sdk/admin/views/organizations/details/pat/columns.tsx

@@ -12,8 +12,10 @@ import type {
   SearchOrganizationPATsResponse_OrganizationPAT,
 } from "@raystack/proton/frontier";
 import {
+  formatTimestamp,
   isNullTimestamp,
   timestampToDayjs,
+  type TimeStamp,
 } from "~/admin/utils/connect-timestamp";
 import { SCOPES } from "~/admin/utils/constants";
 import { getInitials } from "~/utils";
@@ -25,8 +27,6 @@ interface GetColumnsOptions {
   projectsMap: Record<string, Project>;
 }
 
-const DATE_FORMAT = "DD MMM YYYY";
-
 export function getColumns({
   projectsMap,
 }: GetColumnsOptions): DataTableColumnDef<
@@ -90,10 +90,9 @@ export function getColumns({
       accessorKey: "createdAt",
       header: "Created On",
       styles: { header: { width: "152px" } },
-      cell: ({ row }) => {
-        const date = timestampToDayjs(row.original.createdAt);
-        return date ? <Text>{date.format(DATE_FORMAT)}</Text> : <Text>-</Text>;
-      },
+      cell: ({ getValue }) => (
+        <Text>{formatTimestamp(getValue() as TimeStamp)}</Text>
+      ),
       enableSorting: true,
       enableColumnFilter: true,
       filterType: "date",
@@ -103,12 +102,9 @@ export function getColumns({
       accessorKey: "expiresAt",
       header: "Expiry Date",
       styles: { header: { width: "152px" } },
-      cell: ({ row }) => {
-        const expiresAt = row.original.expiresAt;
-        if (!expiresAt || isNullTimestamp(expiresAt)) return <Text>-</Text>;
-        const date = timestampToDayjs(expiresAt);
-        return date ? <Text>{date.format(DATE_FORMAT)}</Text> : <Text>-</Text>;
-      },
+      cell: ({ getValue }) => (
+        <Text>{formatTimestamp(getValue() as TimeStamp)}</Text>
+      ),
       enableSorting: true,
       enableColumnFilter: true,
       filterType: "date",

web/sdk/admin/views/organizations/details/projects/columns.tsx

@@ -13,12 +13,7 @@ import type {
 } from "@raystack/proton/frontier";
 import styles from "./projects.module.css";
 
-import dayjs from "dayjs";
-import {
-  isNullTimestamp,
-  TimeStamp,
-  timestampToDate,
-} from "../../../../utils/connect-timestamp";
+import { formatTimestamp, TimeStamp } from "~/admin/utils/connect-timestamp";
 import { DotsHorizontalIcon } from "@radix-ui/react-icons";
 import { RenameProjectDialog } from "./rename-project";
 import { useState } from "react";
@@ -276,13 +271,7 @@ export const getColumns = ({
     {
       accessorKey: "createdAt",
       header: "Created On",
-      cell: ({ getValue }) => {
-        const value = getValue() as TimeStamp;
-        const date = isNullTimestamp(value)
-          ? "-"
-          : dayjs(timestampToDate(value)).format("YYYY-MM-DD");
-        return date;
-      },
+      cell: ({ getValue }) => formatTimestamp(getValue() as TimeStamp),
       enableSorting: true,
       enableHiding: true,
       enableColumnFilter: true,

web/sdk/admin/views/organizations/details/side-panel/billing-details-section.tsx

@@ -8,7 +8,10 @@ import { OrganizationContext } from "../contexts/organization-context";
 import { useMutation, useQuery } from "@connectrpc/connect-query";
 import { CreateCheckoutRequestSchema, FrontierServiceQueries, GetUpcomingInvoiceRequestSchema } from "@raystack/proton/frontier";
 import { create } from "@bufbuild/protobuf";
-import { timestampToDayjs } from "../../../../utils/connect-timestamp";
+import {
+  formatTimestamp,
+  isNullTimestamp,
+} from "~/admin/utils/connect-timestamp";
 
 export const BillingDetailsSection = () => {
   const { billingAccount, organization } = useContext(OrganizationContext);
@@ -169,10 +172,10 @@ export const BillingDetailsSection = () => {
         <List.Value className={styles["side-panel-section-item-value"]}>
           {isLoading ? (
             <Skeleton />
-          ) : timestampToDayjs(due_date) ? (
+          ) : !isNullTimestamp(due_date) ? (
             <Flex gap={3}>
               <CalendarIcon />
-              <Text>{timestampToDayjs(due_date)?.format("DD MMM YYYY")}</Text>
+              <Text>{formatTimestamp(due_date)}</Text>
             </Flex>
           ) : (
             <Text>-</Text>

web/sdk/admin/views/organizations/details/side-panel/org-details-section.tsx

@@ -1,11 +1,10 @@
 import { CalendarIcon } from "@radix-ui/react-icons";
 import { Flex, List, Text, CopyButton, Tooltip } from "@raystack/apsara";
 import styles from "./side-panel.module.css";
-import dayjs from "dayjs";
 import { useContext } from "react";
 import { OrganizationContext } from "../contexts/organization-context";
 import type { Organization } from "@raystack/proton/frontier";
-import { timestampToDate } from "../../../../utils/connect-timestamp";
+import { formatTimestamp } from "~/admin/utils/connect-timestamp";
 
 interface OrganizationDetailsSectionProps {
   organization: Organization;
@@ -61,11 +60,7 @@ export const OrganizationDetailsSection = ({
         <List.Value>
           <Flex gap={3}>
             <CalendarIcon />
-            <Text>
-              {dayjs(timestampToDate(organization.createdAt)).format(
-                "DD MMM YYYY",
-              )}
-            </Text>
+            <Text>{formatTimestamp(organization.createdAt)}</Text>
           </Flex>
         </List.Value>
       </List.Item>