From eaba5d7201c4cc17779801e6d9b404c4ed23ea22 Mon Sep 17 00:00:00 2001 From: Shreyag02 Date: Fri, 10 Jul 2026 11:59:47 +0530 Subject: [PATCH 1/4] fix(admin): unify date format with Apsara and correct table filter attribute --- web/sdk/admin/views/admins/columns.tsx | 4 +-- web/sdk/admin/views/invoices/columns.tsx | 2 +- .../organizations/details/apis/columns.tsx | 2 +- .../details/apis/details-dialog.tsx | 2 +- .../details/invoices/columns.tsx | 2 +- .../organizations/details/members/columns.tsx | 2 +- .../details/projects/columns.tsx | 2 +- .../organizations/details/tokens/columns.tsx | 2 +- .../views/organizations/list/columns.tsx | 4 +-- web/sdk/admin/views/plans/columns.tsx | 17 ++++------ web/sdk/admin/views/plans/details.tsx | 10 ++---- web/sdk/admin/views/preferences/columns.tsx | 2 +- web/sdk/admin/views/preferences/details.tsx | 2 +- web/sdk/admin/views/products/columns.tsx | 26 +++++---------- .../admin/views/products/prices/columns.tsx | 32 +++++++------------ web/sdk/admin/views/roles/columns.tsx | 6 ++-- web/sdk/admin/views/users/list/columns.tsx | 2 +- .../admin/views/webhooks/webhooks/columns.tsx | 6 ++-- 18 files changed, 48 insertions(+), 77 deletions(-) diff --git a/web/sdk/admin/views/admins/columns.tsx b/web/sdk/admin/views/admins/columns.tsx index 5170814c5..5df5c252c 100644 --- a/web/sdk/admin/views/admins/columns.tsx +++ b/web/sdk/admin/views/admins/columns.tsx @@ -20,13 +20,13 @@ export const getColumns: (options?: { cell: styles["first-column"], header: styles["first-column"], }, - filterVariant: "text", + filterType: "string", cell: (info) => info.getValue() || "-", }, { header: "Email", accessorKey: "email", - filterVariant: "text", + filterType: "string", cell: (info) => info.getValue() || "-", }, { diff --git a/web/sdk/admin/views/invoices/columns.tsx b/web/sdk/admin/views/invoices/columns.tsx index 9c6459e5e..beefce2d2 100644 --- a/web/sdk/admin/views/invoices/columns.tsx +++ b/web/sdk/admin/views/invoices/columns.tsx @@ -33,7 +33,7 @@ export const getColumns = ({ t }: GetColumnsOptions): DataTableColumnDef< const value = getValue() as TimeStamp; const date = isNullTimestamp(value) ? "-" - : dayjs(timestampToDate(value)).format("YYYY-MM-DD"); + : dayjs(timestampToDate(value)).format("DD MMM YYYY"); return {date}; }, enableHiding: true, diff --git a/web/sdk/admin/views/organizations/details/apis/columns.tsx b/web/sdk/admin/views/organizations/details/apis/columns.tsx index 402ba34e8..672a91c21 100644 --- a/web/sdk/admin/views/organizations/details/apis/columns.tsx +++ b/web/sdk/admin/views/organizations/details/apis/columns.tsx @@ -52,7 +52,7 @@ SearchOrganizationServiceUsersResponse_OrganizationServiceUser, header: "Created on", cell: ({ getValue }) => { const value = getValue() as string; - return value !== NULL_DATE ? dayjs(value).format("YYYY-MM-DD") : "-"; + return value !== NULL_DATE ? dayjs(value).format("DD MMM YYYY") : "-"; }, enableSorting: true, enableColumnFilter: true, diff --git a/web/sdk/admin/views/organizations/details/apis/details-dialog.tsx b/web/sdk/admin/views/organizations/details/apis/details-dialog.tsx index 93f7d583f..0234c878e 100644 --- a/web/sdk/admin/views/organizations/details/apis/details-dialog.tsx +++ b/web/sdk/admin/views/organizations/details/apis/details-dialog.tsx @@ -129,7 +129,7 @@ export const ServiceUserDetailsDialog = ({ > {token.title} - {timestampToDayjs(token.createdAt)?.format("YYYY-MM-DD")} + {timestampToDayjs(token.createdAt)?.format("DD MMM YYYY")} ))} diff --git a/web/sdk/admin/views/organizations/details/invoices/columns.tsx b/web/sdk/admin/views/organizations/details/invoices/columns.tsx index c24cf9dda..d901f49be 100644 --- a/web/sdk/admin/views/organizations/details/invoices/columns.tsx +++ b/web/sdk/admin/views/organizations/details/invoices/columns.tsx @@ -42,7 +42,7 @@ export const getColumns = ({ const value = getValue() as TimeStamp; const date = isNullTimestamp(value) ? "-" - : dayjs(timestampToDate(value)).format("YYYY-MM-DD"); + : dayjs(timestampToDate(value)).format("DD MMM YYYY"); return date; }, enableSorting: true, diff --git a/web/sdk/admin/views/organizations/details/members/columns.tsx b/web/sdk/admin/views/organizations/details/members/columns.tsx index 366bf2a03..da1ea926d 100644 --- a/web/sdk/admin/views/organizations/details/members/columns.tsx +++ b/web/sdk/admin/views/organizations/details/members/columns.tsx @@ -126,7 +126,7 @@ export const getColumns = ({ const value = getValue() as TimeStamp; const date = isNullTimestamp(value) ? "-" - : dayjs(timestampToDate(value)).format("YYYY-MM-DD"); + : dayjs(timestampToDate(value)).format("DD MMM YYYY"); return {date}; }, enableSorting: true, diff --git a/web/sdk/admin/views/organizations/details/projects/columns.tsx b/web/sdk/admin/views/organizations/details/projects/columns.tsx index fe58440c6..d9559d706 100644 --- a/web/sdk/admin/views/organizations/details/projects/columns.tsx +++ b/web/sdk/admin/views/organizations/details/projects/columns.tsx @@ -280,7 +280,7 @@ export const getColumns = ({ const value = getValue() as TimeStamp; const date = isNullTimestamp(value) ? "-" - : dayjs(timestampToDate(value)).format("YYYY-MM-DD"); + : dayjs(timestampToDate(value)).format("DD MMM YYYY"); return date; }, enableSorting: true, diff --git a/web/sdk/admin/views/organizations/details/tokens/columns.tsx b/web/sdk/admin/views/organizations/details/tokens/columns.tsx index 38dc02aad..c5401b5b6 100644 --- a/web/sdk/admin/views/organizations/details/tokens/columns.tsx +++ b/web/sdk/admin/views/organizations/details/tokens/columns.tsx @@ -42,7 +42,7 @@ export const getColumns = ({ t }: GetColumnsOptions): DataTableColumnDef< const value = getValue() as TimeStamp; const date = isNullTimestamp(value) ? "-" - : dayjs(timestampToDate(value)).format("YYYY-MM-DD"); + : dayjs(timestampToDate(value)).format("DD MMM YYYY"); return date; }, enableSorting: true, diff --git a/web/sdk/admin/views/organizations/list/columns.tsx b/web/sdk/admin/views/organizations/list/columns.tsx index b3b57abeb..f75d64b82 100644 --- a/web/sdk/admin/views/organizations/list/columns.tsx +++ b/web/sdk/admin/views/organizations/list/columns.tsx @@ -122,7 +122,7 @@ export const getColumns = ({ const value = getValue() as TimeStamp; const date = isNullTimestamp(value) ? "-" - : dayjs(timestampToDate(value)).format("YYYY-MM-DD"); + : dayjs(timestampToDate(value)).format("DD MMM YYYY"); return {date}; }, enableColumnFilter: true, @@ -175,7 +175,7 @@ export const getColumns = ({ const value = getValue() as TimeStamp; const date = isNullTimestamp(value) ? "-" - : dayjs(timestampToDate(value)).format("YYYY-MM-DD"); + : dayjs(timestampToDate(value)).format("DD MMM YYYY"); return {date}; }, enableHiding: true, diff --git a/web/sdk/admin/views/plans/columns.tsx b/web/sdk/admin/views/plans/columns.tsx index 843a32fb2..ddd87406c 100644 --- a/web/sdk/admin/views/plans/columns.tsx +++ b/web/sdk/admin/views/plans/columns.tsx @@ -1,6 +1,6 @@ import { Text, type DataTableColumnDef } from "@raystack/apsara"; import type { Plan } from "@raystack/proton/frontier"; -import { timestampToDate, type TimeStamp } from "../../utils/connect-timestamp"; +import { timestampToDayjs, type TimeStamp } from "../../utils/connect-timestamp"; import styles from "./plans.module.css"; export const getColumns: (options?: { @@ -17,7 +17,7 @@ export const getColumns: (options?: { cell: styles["first-column"], header: styles["first-column"], }, - filterVariant: "text", + filterType: "string", cell: ({ getValue }) => { const id = getValue() as string; return ( @@ -34,13 +34,13 @@ export const getColumns: (options?: { { header: "Title", accessorKey: "title", - filterVariant: "text", + filterType: "string", cell: (info) => info.getValue(), }, { header: "Interval", accessorKey: "interval", - filterVariant: "text", + filterType: "string", cell: (info) => info.getValue(), }, { @@ -48,13 +48,8 @@ export const getColumns: (options?: { accessorKey: "createdAt", cell: ({ getValue }) => { const timestamp = getValue() as TimeStamp | undefined; - const date = timestampToDate(timestamp); - if (!date) return "-"; - return date.toLocaleString("en", { - month: "long", - day: "numeric", - year: "numeric", - }); + const date = timestampToDayjs(timestamp); + return date ? date.format("DD MMM YYYY") : "-"; }, }, ]; diff --git a/web/sdk/admin/views/plans/details.tsx b/web/sdk/admin/views/plans/details.tsx index fab192f4b..548de3ca2 100644 --- a/web/sdk/admin/views/plans/details.tsx +++ b/web/sdk/admin/views/plans/details.tsx @@ -1,6 +1,6 @@ import { Flex, Text, Grid } from "@raystack/apsara"; import type { Plan } from "@raystack/proton/frontier"; -import { timestampToDate } from "../../utils/connect-timestamp"; +import { timestampToDayjs } from "../../utils/connect-timestamp"; export default function PlanDetails({ plan }: { plan: Plan | null }) { @@ -20,12 +20,8 @@ export default function PlanDetails({ plan }: { plan: Plan | null }) { Created At {(() => { - const date = timestampToDate(plan?.createdAt); - return date ? date.toLocaleString("en", { - month: "long", - day: "numeric", - year: "numeric", - }) : "-"; + const date = timestampToDayjs(plan?.createdAt); + return date ? date.format("DD MMM YYYY") : "-"; })()} diff --git a/web/sdk/admin/views/preferences/columns.tsx b/web/sdk/admin/views/preferences/columns.tsx index c63c37364..c934cb989 100644 --- a/web/sdk/admin/views/preferences/columns.tsx +++ b/web/sdk/admin/views/preferences/columns.tsx @@ -23,7 +23,7 @@ export const getColumns: ( cell: styles["first-column"], header: styles["first-column"], }, - filterVariant: "text", + filterType: "string", cell: (info) => info.getValue(), footer: (props) => props.column.id, }, diff --git a/web/sdk/admin/views/preferences/details.tsx b/web/sdk/admin/views/preferences/details.tsx index e000af806..9343655f0 100644 --- a/web/sdk/admin/views/preferences/details.tsx +++ b/web/sdk/admin/views/preferences/details.tsx @@ -170,7 +170,7 @@ export default function PreferenceDetails({ key: "Last updated", value: preference?.updatedAt && - dayjs(timestampDate(preference.updatedAt)).format("MMM DD, YYYY hh:mm:ss A"), + dayjs(timestampDate(preference.updatedAt)).format("DD MMM YYYY hh:mm:ss A"), }, ]; diff --git a/web/sdk/admin/views/products/columns.tsx b/web/sdk/admin/views/products/columns.tsx index 7bc7417d6..2b2453bd6 100644 --- a/web/sdk/admin/views/products/columns.tsx +++ b/web/sdk/admin/views/products/columns.tsx @@ -1,6 +1,6 @@ import { Flex, Image, Amount, type DataTableColumnDef } from "@raystack/apsara"; import type { Product } from "@raystack/proton/frontier"; -import { timestampToDate, TimeStamp } from "../../utils/connect-timestamp"; +import { timestampToDayjs, TimeStamp } from "../../utils/connect-timestamp"; import styles from "./products.module.css"; export const getColumns = ( @@ -79,7 +79,7 @@ export const getColumns = ( { header: "Product Id", accessorKey: "id", - filterVariant: "text", + filterType: "string", cell: (info) => info.getValue(), }, { @@ -87,30 +87,20 @@ export const getColumns = ( accessorKey: "createdAt", cell: ({ getValue }) => { const timestamp = getValue() as TimeStamp | undefined; - const date = timestampToDate(timestamp); - if (!date) return "-"; - return date.toLocaleString("en", { - month: "long", - day: "numeric", - year: "numeric", - }); + const date = timestampToDayjs(timestamp); + return date ? date.format("DD MMM YYYY") : "-"; }, - filterVariant: "date", + filterType: "date", }, { header: "Updated on", accessorKey: "updatedAt", cell: ({ getValue }) => { const timestamp = getValue() as TimeStamp | undefined; - const date = timestampToDate(timestamp); - if (!date) return "-"; - return date.toLocaleString("en", { - month: "long", - day: "numeric", - year: "numeric", - }); + const date = timestampToDayjs(timestamp); + return date ? date.format("DD MMM YYYY") : "-"; }, - filterVariant: "date", + filterType: "date", }, ]; }; diff --git a/web/sdk/admin/views/products/prices/columns.tsx b/web/sdk/admin/views/products/prices/columns.tsx index 2038e45be..0f58013b5 100644 --- a/web/sdk/admin/views/products/prices/columns.tsx +++ b/web/sdk/admin/views/products/prices/columns.tsx @@ -1,7 +1,7 @@ import type { Price as PriceType } from "@raystack/proton/frontier"; import { Amount } from "@raystack/apsara"; import type { DataTableColumnDef } from "@raystack/apsara"; -import { timestampToDate, TimeStamp } from "../../../utils/connect-timestamp"; +import { timestampToDayjs, TimeStamp } from "../../../utils/connect-timestamp"; import styles from "./prices.module.css"; export const getColumns = ( @@ -16,31 +16,31 @@ export const getColumns = ( header: styles["first-column"], }, cell: (info) => info.getValue(), - filterVariant: "text", + filterType: "string", }, { header: "name", accessorKey: "name", cell: (info) => info.getValue(), - filterVariant: "text", + filterType: "string", }, { header: "interval", accessorKey: "interval", cell: (info) => info.getValue(), - filterVariant: "text", + filterType: "string", }, { header: "Usage Type", accessorKey: "usageType", cell: (info) => info.getValue(), - filterVariant: "text", + filterType: "string", }, { header: "billing_scheme", accessorKey: "billingScheme", cell: (info) => info.getValue(), - filterVariant: "text", + filterType: "string", }, { header: "Amount", @@ -51,20 +51,15 @@ export const getColumns = ( currency={row.original.currency} /> ), - filterVariant: "text", + filterType: "string", }, { header: "creation date", accessorKey: "createdAt", cell: ({ getValue }) => { const timestamp = getValue() as TimeStamp | undefined; - const date = timestampToDate(timestamp); - if (!date) return "-"; - return date.toLocaleString("en", { - month: "long", - day: "numeric", - year: "numeric", - }); + const date = timestampToDayjs(timestamp); + return date ? date.format("DD MMM YYYY") : "-"; }, }, { @@ -73,13 +68,8 @@ export const getColumns = ( enableColumnFilter: false, cell: ({ getValue }) => { const timestamp = getValue() as TimeStamp | undefined; - const date = timestampToDate(timestamp); - if (!date) return "-"; - return date.toLocaleString("en", { - month: "long", - day: "numeric", - year: "numeric", - }); + const date = timestampToDayjs(timestamp); + return date ? date.format("DD MMM YYYY") : "-"; }, }, ]; diff --git a/web/sdk/admin/views/roles/columns.tsx b/web/sdk/admin/views/roles/columns.tsx index bc7ff80df..07e331912 100644 --- a/web/sdk/admin/views/roles/columns.tsx +++ b/web/sdk/admin/views/roles/columns.tsx @@ -10,19 +10,19 @@ export const getColumns: () => DataTableColumnDef[] = () => { cell: styles["first-column"], header: styles["first-column"], }, - filterVariant: "text", + filterType: "string", cell: ({ getValue }) => getValue(), }, { header: "Title", accessorKey: "title", - filterVariant: "text", + filterType: "string", cell: info => info.getValue(), }, { header: "Name", accessorKey: "name", - filterVariant: "text", + filterType: "string", cell: info => info.getValue(), }, { diff --git a/web/sdk/admin/views/users/list/columns.tsx b/web/sdk/admin/views/users/list/columns.tsx index 0083dc7d7..a3a852e55 100644 --- a/web/sdk/admin/views/users/list/columns.tsx +++ b/web/sdk/admin/views/users/list/columns.tsx @@ -72,7 +72,7 @@ export const getColumns = ({ const value = getValue() as TimeStamp; const date = isNullTimestamp(value) ? "-" - : dayjs(timestampToDate(value)).format("YYYY-MM-DD"); + : dayjs(timestampToDate(value)).format("DD MMM YYYY"); return {date}; }, enableHiding: true, diff --git a/web/sdk/admin/views/webhooks/webhooks/columns.tsx b/web/sdk/admin/views/webhooks/webhooks/columns.tsx index 46c45c0a8..34fe5ad2f 100644 --- a/web/sdk/admin/views/webhooks/webhooks/columns.tsx +++ b/web/sdk/admin/views/webhooks/webhooks/columns.tsx @@ -34,13 +34,13 @@ export const getColumns: ( cell: styles["first-column"], header: styles["first-column"], }, - filterVariant: "text", + filterType: "string", cell: (info) => info.getValue() || "-", }, { header: "State", accessorKey: "state", - filterVariant: "text", + filterType: "string", classNames: { cell: styles.stateColumn, header: styles.stateColumn }, cell: (info) => info.getValue() || "-", }, @@ -57,7 +57,7 @@ export const getColumns: ( const value = getValue() as TimeStamp; const date = isNullTimestamp(value) ? "-" - : dayjs(timestampToDate(value)).format("YYYY-MM-DD"); + : dayjs(timestampToDate(value)).format("DD MMM YYYY"); return {date}; }, }, From bd5357781abdba87d27735975431398a3b8ea993 Mon Sep 17 00:00:00 2001 From: Shreyag02 Date: Fri, 10 Jul 2026 13:25:31 +0530 Subject: [PATCH 2/4] refactor(admin): centralize timestamp formatting and guard null dates --- web/sdk/admin/utils/connect-timestamp.ts | 18 +++++++++++++ web/sdk/admin/views/invoices/columns.tsx | 17 +++--------- .../details/apis/details-dialog.tsx | 5 ++-- .../details/invoices/columns.tsx | 15 ++--------- .../organizations/details/members/columns.tsx | 17 +++--------- .../details/projects/columns.tsx | 15 ++--------- .../organizations/details/tokens/columns.tsx | 16 ++--------- .../views/organizations/list/columns.tsx | 27 +++++-------------- web/sdk/admin/views/plans/columns.tsx | 8 ++---- web/sdk/admin/views/plans/details.tsx | 9 ++----- web/sdk/admin/views/preferences/details.tsx | 7 ++--- web/sdk/admin/views/products/columns.tsx | 14 +++------- .../admin/views/products/prices/columns.tsx | 14 +++------- web/sdk/admin/views/users/list/columns.tsx | 13 ++------- .../admin/views/webhooks/webhooks/columns.tsx | 14 +++------- 15 files changed, 59 insertions(+), 150 deletions(-) diff --git a/web/sdk/admin/utils/connect-timestamp.ts b/web/sdk/admin/utils/connect-timestamp.ts index aef04cdb5..28c5a2553 100644 --- a/web/sdk/admin/utils/connect-timestamp.ts +++ b/web/sdk/admin/utils/connect-timestamp.ts @@ -19,4 +19,22 @@ export function isNullTimestamp(timestamp?: Timestamp): boolean { return Number(timestamp.seconds) <= 0; } +/** Canonical date format used across the admin UI (matches Apsara). */ +export const DATE_FORMAT = "DD MMM YYYY"; + +/** + * Formats a Timestamp for display, returning "-" for missing or null-time + * values (e.g. { seconds: 0 }, 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) : "-"; +} + +/** Table cell renderer that formats a Timestamp column value via formatTimestamp. */ +export function timestampCell({ getValue, }: { getValue: () => unknown; }): string { + return formatTimestamp(getValue() as Timestamp | undefined); +} + export type TimeStamp = Timestamp; diff --git a/web/sdk/admin/views/invoices/columns.tsx b/web/sdk/admin/views/invoices/columns.tsx index beefce2d2..f7c453bf0 100644 --- a/web/sdk/admin/views/invoices/columns.tsx +++ b/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 "../../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("DD MMM YYYY"); - return {date}; - }, + cell: ({ getValue }) => ( + {formatTimestamp(getValue() as TimeStamp)} + ), enableHiding: true, enableSorting: true, }, diff --git a/web/sdk/admin/views/organizations/details/apis/details-dialog.tsx b/web/sdk/admin/views/organizations/details/apis/details-dialog.tsx index 0234c878e..c06b20e49 100644 --- a/web/sdk/admin/views/organizations/details/apis/details-dialog.tsx +++ b/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 "../../../../utils/connect-timestamp"; import { useTerminology } from "../../../../hooks/useTerminology"; interface ServiceUserDetailsDialogProps { @@ -129,7 +128,7 @@ export const ServiceUserDetailsDialog = ({ > {token.title} - {timestampToDayjs(token.createdAt)?.format("DD MMM YYYY")} + {formatTimestamp(token.createdAt)} ))} diff --git a/web/sdk/admin/views/organizations/details/invoices/columns.tsx b/web/sdk/admin/views/organizations/details/invoices/columns.tsx index d901f49be..c54ac2971 100644 --- a/web/sdk/admin/views/organizations/details/invoices/columns.tsx +++ b/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 { timestampCell } from "../../../../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("DD MMM YYYY"); - return date; - }, + cell: timestampCell, enableSorting: true, enableColumnFilter: true, filterType: "date", diff --git a/web/sdk/admin/views/organizations/details/members/columns.tsx b/web/sdk/admin/views/organizations/details/members/columns.tsx index da1ea926d..a883ac8ea 100644 --- a/web/sdk/admin/views/organizations/details/members/columns.tsx +++ b/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 "../../../../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("DD MMM YYYY"); - return {date}; - }, + cell: ({ getValue }) => ( + {formatTimestamp(getValue() as TimeStamp)} + ), enableSorting: true, enableHiding: true, // enableColumnFilter: true, diff --git a/web/sdk/admin/views/organizations/details/projects/columns.tsx b/web/sdk/admin/views/organizations/details/projects/columns.tsx index d9559d706..069edcbd6 100644 --- a/web/sdk/admin/views/organizations/details/projects/columns.tsx +++ b/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 { timestampCell } from "../../../../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("DD MMM YYYY"); - return date; - }, + cell: timestampCell, enableSorting: true, enableHiding: true, enableColumnFilter: true, diff --git a/web/sdk/admin/views/organizations/details/tokens/columns.tsx b/web/sdk/admin/views/organizations/details/tokens/columns.tsx index c5401b5b6..6b6536f29 100644 --- a/web/sdk/admin/views/organizations/details/tokens/columns.tsx +++ b/web/sdk/admin/views/organizations/details/tokens/columns.tsx @@ -1,6 +1,4 @@ import styles from "./tokens.module.css"; -import { NULL_DATE } from "../../../../utils/constants"; -import dayjs from "dayjs"; import { Avatar, DataTableColumnDef, @@ -12,11 +10,7 @@ import { import type { SearchOrganizationTokensResponse_OrganizationToken, } from "@raystack/proton/frontier"; -import { - isNullTimestamp, - TimeStamp, - timestampToDate, -} from "../../../../utils/connect-timestamp"; +import { timestampCell } from "../../../../utils/connect-timestamp"; import { TerminologyEntity } from "../../../../hooks/useTerminology"; interface GetColumnsOptions { @@ -38,13 +32,7 @@ export const getColumns = ({ t }: GetColumnsOptions): DataTableColumnDef< header: styles["first-column"], }, styles: { header: { width: "180px" } }, - cell: ({ getValue }) => { - const value = getValue() as TimeStamp; - const date = isNullTimestamp(value) - ? "-" - : dayjs(timestampToDate(value)).format("DD MMM YYYY"); - return date; - }, + cell: timestampCell, enableSorting: true, enableColumnFilter: true, filterType: "date", diff --git a/web/sdk/admin/views/organizations/list/columns.tsx b/web/sdk/admin/views/organizations/list/columns.tsx index f75d64b82..0db5120bb 100644 --- a/web/sdk/admin/views/organizations/list/columns.tsx +++ b/web/sdk/admin/views/organizations/list/columns.tsx @@ -10,12 +10,7 @@ import type { SearchOrganizationsResponse_OrganizationResult, Plan, } from "@raystack/proton/frontier"; -import { - isNullTimestamp, - TimeStamp, - timestampToDate, -} from "../../../utils/connect-timestamp"; -import dayjs from "dayjs"; +import { formatTimestamp, TimeStamp } from "../../../utils/connect-timestamp"; import styles from "./list.module.css"; export const SUBSCRIPTION_STATES = { @@ -118,13 +113,9 @@ export const getColumns = ({ accessorKey: "subscriptionCycleEndAt", header: "Cycle ends on", filterType: "date", - cell: ({ getValue }) => { - const value = getValue() as TimeStamp; - const date = isNullTimestamp(value) - ? "-" - : dayjs(timestampToDate(value)).format("DD MMM YYYY"); - return {date}; - }, + cell: ({ getValue }) => ( + {formatTimestamp(getValue() as TimeStamp)} + ), enableColumnFilter: true, // enableSorting: true, enableHiding: true, @@ -171,13 +162,9 @@ export const getColumns = ({ accessorKey: "createdAt", header: "Created On", filterType: "date", - cell: ({ getValue }) => { - const value = getValue() as TimeStamp; - const date = isNullTimestamp(value) - ? "-" - : dayjs(timestampToDate(value)).format("DD MMM YYYY"); - return {date}; - }, + cell: ({ getValue }) => ( + {formatTimestamp(getValue() as TimeStamp)} + ), enableHiding: true, defaultHidden: true, enableSorting: true, diff --git a/web/sdk/admin/views/plans/columns.tsx b/web/sdk/admin/views/plans/columns.tsx index ddd87406c..9802b01df 100644 --- a/web/sdk/admin/views/plans/columns.tsx +++ b/web/sdk/admin/views/plans/columns.tsx @@ -1,6 +1,6 @@ import { Text, type DataTableColumnDef } from "@raystack/apsara"; import type { Plan } from "@raystack/proton/frontier"; -import { timestampToDayjs, type TimeStamp } from "../../utils/connect-timestamp"; +import { timestampCell } from "../../utils/connect-timestamp"; import styles from "./plans.module.css"; export const getColumns: (options?: { @@ -46,11 +46,7 @@ export const getColumns: (options?: { { header: "Created At", accessorKey: "createdAt", - cell: ({ getValue }) => { - const timestamp = getValue() as TimeStamp | undefined; - const date = timestampToDayjs(timestamp); - return date ? date.format("DD MMM YYYY") : "-"; - }, + cell: timestampCell, }, ]; }; diff --git a/web/sdk/admin/views/plans/details.tsx b/web/sdk/admin/views/plans/details.tsx index 548de3ca2..87a85c4f7 100644 --- a/web/sdk/admin/views/plans/details.tsx +++ b/web/sdk/admin/views/plans/details.tsx @@ -1,6 +1,6 @@ import { Flex, Text, Grid } from "@raystack/apsara"; import type { Plan } from "@raystack/proton/frontier"; -import { timestampToDayjs } from "../../utils/connect-timestamp"; +import { formatTimestamp } from "../../utils/connect-timestamp"; export default function PlanDetails({ plan }: { plan: Plan | null }) { @@ -18,12 +18,7 @@ export default function PlanDetails({ plan }: { plan: Plan | null }) { Created At - - {(() => { - const date = timestampToDayjs(plan?.createdAt); - return date ? date.format("DD MMM YYYY") : "-"; - })()} - + {formatTimestamp(plan?.createdAt)} diff --git a/web/sdk/admin/views/preferences/details.tsx b/web/sdk/admin/views/preferences/details.tsx index 9343655f0..93c9bc8e1 100644 --- a/web/sdk/admin/views/preferences/details.tsx +++ b/web/sdk/admin/views/preferences/details.tsx @@ -11,12 +11,11 @@ import { } from "@raystack/apsara"; import { useCallback, useEffect, useState } from "react"; import Skeleton from "react-loading-skeleton"; -import dayjs from "dayjs"; import { useMutation, createConnectQueryKey, useTransport } from "@connectrpc/connect-query"; import { handleConnectError } from "~/utils/error"; import { AdminServiceQueries, CreatePreferencesRequestSchema, ListPreferencesResponse } from "@raystack/proton/frontier"; import { Preference, PreferenceTrait, PreferenceTrait_InputType } from "@raystack/proton/frontier"; -import { timestampDate } from "@bufbuild/protobuf/wkt"; +import { DATE_FORMAT, formatTimestamp } from "../../utils/connect-timestamp"; import { useQueryClient } from "@tanstack/react-query"; import { create } from "@bufbuild/protobuf"; @@ -168,9 +167,7 @@ export default function PreferenceDetails({ }, { key: "Last updated", - value: - preference?.updatedAt && - dayjs(timestampDate(preference.updatedAt)).format("DD MMM YYYY hh:mm:ss A"), + value: formatTimestamp(preference?.updatedAt, `${DATE_FORMAT} hh:mm:ss A`), }, ]; diff --git a/web/sdk/admin/views/products/columns.tsx b/web/sdk/admin/views/products/columns.tsx index 2b2453bd6..575023325 100644 --- a/web/sdk/admin/views/products/columns.tsx +++ b/web/sdk/admin/views/products/columns.tsx @@ -1,6 +1,6 @@ import { Flex, Image, Amount, type DataTableColumnDef } from "@raystack/apsara"; import type { Product } from "@raystack/proton/frontier"; -import { timestampToDayjs, TimeStamp } from "../../utils/connect-timestamp"; +import { timestampCell } from "../../utils/connect-timestamp"; import styles from "./products.module.css"; export const getColumns = ( @@ -85,21 +85,13 @@ export const getColumns = ( { header: "Created on", accessorKey: "createdAt", - cell: ({ getValue }) => { - const timestamp = getValue() as TimeStamp | undefined; - const date = timestampToDayjs(timestamp); - return date ? date.format("DD MMM YYYY") : "-"; - }, + cell: timestampCell, filterType: "date", }, { header: "Updated on", accessorKey: "updatedAt", - cell: ({ getValue }) => { - const timestamp = getValue() as TimeStamp | undefined; - const date = timestampToDayjs(timestamp); - return date ? date.format("DD MMM YYYY") : "-"; - }, + cell: timestampCell, filterType: "date", }, ]; diff --git a/web/sdk/admin/views/products/prices/columns.tsx b/web/sdk/admin/views/products/prices/columns.tsx index 0f58013b5..a13b5ae5e 100644 --- a/web/sdk/admin/views/products/prices/columns.tsx +++ b/web/sdk/admin/views/products/prices/columns.tsx @@ -1,7 +1,7 @@ import type { Price as PriceType } from "@raystack/proton/frontier"; import { Amount } from "@raystack/apsara"; import type { DataTableColumnDef } from "@raystack/apsara"; -import { timestampToDayjs, TimeStamp } from "../../../utils/connect-timestamp"; +import { timestampCell } from "../../../utils/connect-timestamp"; import styles from "./prices.module.css"; export const getColumns = ( @@ -56,21 +56,13 @@ export const getColumns = ( { header: "creation date", accessorKey: "createdAt", - cell: ({ getValue }) => { - const timestamp = getValue() as TimeStamp | undefined; - const date = timestampToDayjs(timestamp); - return date ? date.format("DD MMM YYYY") : "-"; - }, + cell: timestampCell, }, { header: "Updated date", accessorKey: "updatedAt", enableColumnFilter: false, - cell: ({ getValue }) => { - const timestamp = getValue() as TimeStamp | undefined; - const date = timestampToDayjs(timestamp); - return date ? date.format("DD MMM YYYY") : "-"; - }, + cell: timestampCell, }, ]; }; diff --git a/web/sdk/admin/views/users/list/columns.tsx b/web/sdk/admin/views/users/list/columns.tsx index a3a852e55..605e23bee 100644 --- a/web/sdk/admin/views/users/list/columns.tsx +++ b/web/sdk/admin/views/users/list/columns.tsx @@ -6,15 +6,10 @@ import { getAvatarColor, Text, } from "@raystack/apsara"; -import dayjs from "dayjs"; import styles from "./list.module.css"; import { getUserName, USER_STATES, UserState } from "../util"; import { User } from "@raystack/proton/frontier"; -import { - isNullTimestamp, - TimeStamp, - timestampToDate, -} from "../../../utils/connect-timestamp"; +import { formatTimestamp, TimeStamp } from "../../../utils/connect-timestamp"; interface getColumnsOptions { groupCountMap: Record>; @@ -69,11 +64,7 @@ export const getColumns = ({ header: "Joined on", filterType: "date", cell: ({ getValue }) => { - const value = getValue() as TimeStamp; - const date = isNullTimestamp(value) - ? "-" - : dayjs(timestampToDate(value)).format("DD MMM YYYY"); - return {date}; + return {formatTimestamp(getValue() as TimeStamp)}; }, enableHiding: true, enableSorting: true, diff --git a/web/sdk/admin/views/webhooks/webhooks/columns.tsx b/web/sdk/admin/views/webhooks/webhooks/columns.tsx index 34fe5ad2f..156b7d967 100644 --- a/web/sdk/admin/views/webhooks/webhooks/columns.tsx +++ b/web/sdk/admin/views/webhooks/webhooks/columns.tsx @@ -8,11 +8,9 @@ import { import styles from "./webhooks.module.css"; import { type Webhook } from "@raystack/proton/frontier"; import { - timestampToDate, - isNullTimestamp, + formatTimestamp, type TimeStamp, } from "../../../utils/connect-timestamp"; -import dayjs from "dayjs"; import { useState } from "react"; import type { useMutation } from "@connectrpc/connect-query"; import { DeleteWebhookDialog } from "./delete"; @@ -53,13 +51,9 @@ export const getColumns: ( header: "Created at", accessorKey: "createdAt", classNames: { cell: styles.dateColumn, header: styles.dateColumn }, - cell: ({ getValue }) => { - const value = getValue() as TimeStamp; - const date = isNullTimestamp(value) - ? "-" - : dayjs(timestampToDate(value)).format("DD MMM YYYY"); - return {date}; - }, + cell: ({ getValue }) => ( + {formatTimestamp(getValue() as TimeStamp)} + ), }, { header: "Action", From c6186255f62bf40f8505018c616e457548856f66 Mon Sep 17 00:00:00 2001 From: Shreyag02 Date: Fri, 10 Jul 2026 14:25:13 +0530 Subject: [PATCH 3/4] refactor(admin): extend shared timestamp formatting to side panels and cleanup --- web/apps/admin/src/utils/constants.ts | 1 - web/apps/admin/src/utils/helper.ts | 8 -------- web/sdk/admin/views/audit-logs/columns.tsx | 8 +++----- .../views/audit-logs/sidepanel-details.tsx | 9 +++------ .../organizations/details/apis/columns.tsx | 3 ++- .../organizations/details/pat/columns.tsx | 19 +++++++------------ .../side-panel/billing-details-section.tsx | 9 ++++++--- .../side-panel/org-details-section.tsx | 9 ++------- .../side-panel/plan-details-section.tsx | 17 ++++++++--------- .../details/layout/side-panel-details.tsx | 4 ++-- .../details/layout/side-panel-membership.tsx | 7 ++----- .../views/plans/components/plan-card.tsx | 7 +++++-- 12 files changed, 40 insertions(+), 61 deletions(-) diff --git a/web/apps/admin/src/utils/constants.ts b/web/apps/admin/src/utils/constants.ts index ded60ed1a..82b78dbb6 100644 --- a/web/apps/admin/src/utils/constants.ts +++ b/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 = { diff --git a/web/apps/admin/src/utils/helper.ts b/web/apps/admin/src/utils/helper.ts index 275b483ce..1898e1e01 100644 --- a/web/apps/admin/src/utils/helper.ts +++ b/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 = { @@ -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 ) => { diff --git a/web/sdk/admin/views/audit-logs/columns.tsx b/web/sdk/admin/views/audit-logs/columns.tsx index 600d82c51..9ebca0680 100644 --- a/web/sdk/admin/views/audit-logs/columns.tsx +++ b/web/sdk/admin/views/audit-logs/columns.tsx @@ -1,5 +1,4 @@ import { Badge, DataTableColumnDef, Flex, Text } from "@raystack/apsara"; -import dayjs from "dayjs"; import styles from "./audit-logs.module.css"; import { AuditRecord, @@ -7,9 +6,9 @@ import { AuditRecordResource, } from "@raystack/proton/frontier"; import { + formatTimestamp, isNullTimestamp, TimeStamp, - timestampToDate, } from "../../utils/connect-timestamp"; import { ACTOR_TYPES, getActionBadgeColor } from "./util"; import { ComponentPropsWithoutRef } from "react"; @@ -113,14 +112,13 @@ export const getColumns = ({ if (isNullTimestamp(value)) { return -; } - const date = dayjs(timestampToDate(value)); return ( - {date.format("DD MMM YYYY")} + {formatTimestamp(value)} - {date.format("hh:mm A")} + {formatTimestamp(value, "hh:mm A")} ); diff --git a/web/sdk/admin/views/audit-logs/sidepanel-details.tsx b/web/sdk/admin/views/audit-logs/sidepanel-details.tsx index 2f6fe46d5..5d09d45eb 100644 --- a/web/sdk/admin/views/audit-logs/sidepanel-details.tsx +++ b/web/sdk/admin/views/audit-logs/sidepanel-details.tsx @@ -9,8 +9,7 @@ import { List } from "@raystack/apsara"; 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 "../../utils/connect-timestamp"; import { MapIcon } from "../../assets/icons/MapIcon"; import SidePanelLogDialog from "./sidepanel-log-dialog"; import ActorCell from "./actor-cell"; @@ -44,8 +43,6 @@ export default function SidePanelDetails({ 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 @@ export default function SidePanelDetails({ Date - {date.format("DD MMM YYYY")} + {formatTimestamp(occurredAt)} Time - {date.format("hh:mm A")} + {formatTimestamp(occurredAt, "hh:mm A")} ID diff --git a/web/sdk/admin/views/organizations/details/apis/columns.tsx b/web/sdk/admin/views/organizations/details/apis/columns.tsx index 672a91c21..5555e11f7 100644 --- a/web/sdk/admin/views/organizations/details/apis/columns.tsx +++ b/web/sdk/admin/views/organizations/details/apis/columns.tsx @@ -1,6 +1,7 @@ import { Text, type DataTableColumnDef } from "@raystack/apsara"; import dayjs from "dayjs"; import { NULL_DATE } from "../../../../utils/constants"; +import { DATE_FORMAT } from "../../../../utils/connect-timestamp"; import styles from "./apis.module.css"; import type { SearchOrganizationServiceUsersResponse_OrganizationServiceUser, @@ -52,7 +53,7 @@ SearchOrganizationServiceUsersResponse_OrganizationServiceUser, header: "Created on", cell: ({ getValue }) => { const value = getValue() as string; - return value !== NULL_DATE ? dayjs(value).format("DD MMM YYYY") : "-"; + return value !== NULL_DATE ? dayjs(value).format(DATE_FORMAT) : "-"; }, enableSorting: true, enableColumnFilter: true, diff --git a/web/sdk/admin/views/organizations/details/pat/columns.tsx b/web/sdk/admin/views/organizations/details/pat/columns.tsx index 6ae66ee0b..52c191d07 100644 --- a/web/sdk/admin/views/organizations/details/pat/columns.tsx +++ b/web/sdk/admin/views/organizations/details/pat/columns.tsx @@ -12,6 +12,7 @@ import type { SearchOrganizationPATsResponse_OrganizationPAT, } from "@raystack/proton/frontier"; import { + formatTimestamp, isNullTimestamp, timestampToDayjs, } from "~/admin/utils/connect-timestamp"; @@ -25,8 +26,6 @@ interface GetColumnsOptions { projectsMap: Record; } -const DATE_FORMAT = "DD MMM YYYY"; - export function getColumns({ projectsMap, }: GetColumnsOptions): DataTableColumnDef< @@ -90,10 +89,9 @@ export function getColumns({ accessorKey: "createdAt", header: "Created On", styles: { header: { width: "152px" } }, - cell: ({ row }) => { - const date = timestampToDayjs(row.original.createdAt); - return date ? {date.format(DATE_FORMAT)} : -; - }, + cell: ({ row }) => ( + {formatTimestamp(row.original.createdAt)} + ), enableSorting: true, enableColumnFilter: true, filterType: "date", @@ -103,12 +101,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 -; - const date = timestampToDayjs(expiresAt); - return date ? {date.format(DATE_FORMAT)} : -; - }, + cell: ({ row }) => ( + {formatTimestamp(row.original.expiresAt)} + ), enableSorting: true, enableColumnFilter: true, filterType: "date", diff --git a/web/sdk/admin/views/organizations/details/side-panel/billing-details-section.tsx b/web/sdk/admin/views/organizations/details/side-panel/billing-details-section.tsx index b82e91411..80d5ac46b 100644 --- a/web/sdk/admin/views/organizations/details/side-panel/billing-details-section.tsx +++ b/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 "../../../../utils/connect-timestamp"; export const BillingDetailsSection = () => { const { billingAccount, organization } = useContext(OrganizationContext); @@ -169,10 +172,10 @@ export const BillingDetailsSection = () => { {isLoading ? ( - ) : timestampToDayjs(due_date) ? ( + ) : !isNullTimestamp(due_date) ? ( - {timestampToDayjs(due_date)?.format("DD MMM YYYY")} + {formatTimestamp(due_date)} ) : ( - diff --git a/web/sdk/admin/views/organizations/details/side-panel/org-details-section.tsx b/web/sdk/admin/views/organizations/details/side-panel/org-details-section.tsx index 881c8b458..048c2b32e 100644 --- a/web/sdk/admin/views/organizations/details/side-panel/org-details-section.tsx +++ b/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 "../../../../utils/connect-timestamp"; interface OrganizationDetailsSectionProps { organization: Organization; @@ -61,11 +60,7 @@ export const OrganizationDetailsSection = ({ - - {dayjs(timestampToDate(organization.createdAt)).format( - "DD MMM YYYY", - )} - + {formatTimestamp(organization.createdAt)} diff --git a/web/sdk/admin/views/organizations/details/side-panel/plan-details-section.tsx b/web/sdk/admin/views/organizations/details/side-panel/plan-details-section.tsx index 7a570f75d..2df143ebd 100644 --- a/web/sdk/admin/views/organizations/details/side-panel/plan-details-section.tsx +++ b/web/sdk/admin/views/organizations/details/side-panel/plan-details-section.tsx @@ -7,7 +7,10 @@ import { OrganizationContext } from "../contexts/organization-context"; import { useQuery } from "@connectrpc/connect-query"; import { FrontierServiceQueries, ListSubscriptionsRequestSchema, GetPlanRequestSchema } from "@raystack/proton/frontier"; import { create } from "@bufbuild/protobuf"; -import { timestampToDayjs } from "../../../../utils/connect-timestamp"; +import { + formatTimestamp, + isNullTimestamp, +} from "../../../../utils/connect-timestamp"; export const PlanDetailsSection = () => { const { billingAccount, organization } = useContext(OrganizationContext); @@ -69,13 +72,11 @@ export const PlanDetailsSection = () => { {isLoading ? ( - ) : timestampToDayjs(activeSubscription?.currentPeriodStartAt) ? ( + ) : !isNullTimestamp(activeSubscription?.currentPeriodStartAt) ? ( - {timestampToDayjs(activeSubscription?.currentPeriodStartAt)?.format( - "DD MMM YYYY", - )} + {formatTimestamp(activeSubscription?.currentPeriodStartAt)} ) : ( @@ -90,13 +91,11 @@ export const PlanDetailsSection = () => { {isLoading ? ( - ) : timestampToDayjs(activeSubscription?.currentPeriodEndAt) ? ( + ) : !isNullTimestamp(activeSubscription?.currentPeriodEndAt) ? ( - {timestampToDayjs(activeSubscription?.currentPeriodEndAt)?.format( - "DD MMM YYYY", - )} + {formatTimestamp(activeSubscription?.currentPeriodEndAt)} ) : ( diff --git a/web/sdk/admin/views/users/details/layout/side-panel-details.tsx b/web/sdk/admin/views/users/details/layout/side-panel-details.tsx index 5c4711b96..cd40198c2 100644 --- a/web/sdk/admin/views/users/details/layout/side-panel-details.tsx +++ b/web/sdk/admin/views/users/details/layout/side-panel-details.tsx @@ -3,7 +3,7 @@ import { CalendarIcon } from "@radix-ui/react-icons"; import styles from "./side-panel.module.css"; import { UserState, USER_STATES } from "../../util"; import { useUser } from "../user-context"; -import { timestampToDayjs } from "../../../../utils/connect-timestamp"; +import { formatTimestamp } from "../../../../utils/connect-timestamp"; export const SidePanelDetails = () => { const { user } = useUser(); @@ -37,7 +37,7 @@ export const SidePanelDetails = () => { - {timestampToDayjs(user?.createdAt)?.format("DD MMM YYYY")} + {formatTimestamp(user?.createdAt)} diff --git a/web/sdk/admin/views/users/details/layout/side-panel-membership.tsx b/web/sdk/admin/views/users/details/layout/side-panel-membership.tsx index 3dc0831c3..9fd778957 100644 --- a/web/sdk/admin/views/users/details/layout/side-panel-membership.tsx +++ b/web/sdk/admin/views/users/details/layout/side-panel-membership.tsx @@ -1,11 +1,10 @@ import { Flex, List, Text, Avatar } from "@raystack/apsara"; -import dayjs from "dayjs"; import { CalendarIcon } from "@radix-ui/react-icons"; import Skeleton from "react-loading-skeleton"; import { type SearchUserOrganizationsResponse_UserOrganization } from "@raystack/proton/frontier"; import styles from "./side-panel.module.css"; import { MembershipDropdown } from "./membership-dropdown"; -import { timestampToDate, isNullTimestamp } from "../../../../utils/connect-timestamp"; +import { formatTimestamp } from "../../../../utils/connect-timestamp"; interface SidePanelMembershipProps { data?: SearchUserOrganizationsResponse_UserOrganization; @@ -69,9 +68,7 @@ export const SidePanelMembership = ({ - {data?.orgJoinedOn && !isNullTimestamp(data.orgJoinedOn) - ? dayjs(timestampToDate(data.orgJoinedOn)).format("DD MMM YYYY") - : "-"} + {formatTimestamp(data?.orgJoinedOn)} diff --git a/web/sdk/client/views/plans/components/plan-card.tsx b/web/sdk/client/views/plans/components/plan-card.tsx index acb16deba..8911b1b24 100644 --- a/web/sdk/client/views/plans/components/plan-card.tsx +++ b/web/sdk/client/views/plans/components/plan-card.tsx @@ -12,7 +12,10 @@ import { import { useFrontier } from '~/client/contexts/FrontierContext'; import { usePlans } from '../hooks/use-plans'; import { PlanChangeAction, getPlanChangeAction } from '~/client/utils'; -import { SUBSCRIPTION_STATES } from '~/client/utils/constants'; +import { + DEFAULT_DATE_SHORT_FORMAT, + SUBSCRIPTION_STATES +} from '~/client/utils/constants'; import { timestampToDayjs } from '~/utils/timestamp'; import { IntervalKeys, @@ -141,7 +144,7 @@ export function PlanCard({ sub.state === SUBSCRIPTION_STATES.TRIALING ); - const shortDateFormat = config?.shortDateFormat || 'DD MMM'; + const shortDateFormat = config?.shortDateFormat || DEFAULT_DATE_SHORT_FORMAT; const trialEndDate = trialSubscription?.trialEndsAt ? timestampToDayjs(trialSubscription?.trialEndsAt)?.format(shortDateFormat) : ''; From 3149d4b359318b93f85b86b26f33967955327959 Mon Sep 17 00:00:00 2001 From: Shreyag02 Date: Mon, 13 Jul 2026 23:12:09 +0530 Subject: [PATCH 4/4] =?UTF-8?q?=20refactor(admin):=20address=20review=20?= =?UTF-8?q?=E2=80=94=20use=20~/admin=20alias=20imports=20and=20inline=20ti?= =?UTF-8?q?mestamp=20cell?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/sdk/admin/utils/connect-timestamp.ts | 12 ++---------- web/sdk/admin/views/audit-logs/columns.tsx | 2 +- web/sdk/admin/views/audit-logs/sidepanel-details.tsx | 2 +- web/sdk/admin/views/invoices/columns.tsx | 2 +- .../views/organizations/details/apis/columns.tsx | 2 +- .../organizations/details/apis/details-dialog.tsx | 2 +- .../views/organizations/details/invoices/columns.tsx | 4 ++-- .../views/organizations/details/members/columns.tsx | 2 +- .../views/organizations/details/projects/columns.tsx | 4 ++-- .../details/side-panel/billing-details-section.tsx | 2 +- .../details/side-panel/org-details-section.tsx | 2 +- .../details/side-panel/plan-details-section.tsx | 2 +- .../views/organizations/details/tokens/columns.tsx | 4 ++-- web/sdk/admin/views/organizations/list/columns.tsx | 2 +- web/sdk/admin/views/plans/columns.tsx | 4 ++-- web/sdk/admin/views/plans/details.tsx | 2 +- web/sdk/admin/views/preferences/details.tsx | 2 +- web/sdk/admin/views/products/columns.tsx | 6 +++--- web/sdk/admin/views/products/prices/columns.tsx | 6 +++--- .../users/details/layout/side-panel-details.tsx | 2 +- .../users/details/layout/side-panel-membership.tsx | 2 +- web/sdk/admin/views/users/list/columns.tsx | 2 +- web/sdk/admin/views/webhooks/webhooks/columns.tsx | 2 +- 23 files changed, 32 insertions(+), 40 deletions(-) diff --git a/web/sdk/admin/utils/connect-timestamp.ts b/web/sdk/admin/utils/connect-timestamp.ts index 28c5a2553..4c3e01f91 100644 --- a/web/sdk/admin/utils/connect-timestamp.ts +++ b/web/sdk/admin/utils/connect-timestamp.ts @@ -19,22 +19,14 @@ export function isNullTimestamp(timestamp?: Timestamp): boolean { return Number(timestamp.seconds) <= 0; } -/** Canonical date format used across the admin UI (matches Apsara). */ +/** Canonical admin date format (matches Apsara). */ export const DATE_FORMAT = "DD MMM YYYY"; -/** - * Formats a Timestamp for display, returning "-" for missing or null-time - * values (e.g. { seconds: 0 }, which would otherwise render as 01 Jan 1970). - */ +/** 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) : "-"; } -/** Table cell renderer that formats a Timestamp column value via formatTimestamp. */ -export function timestampCell({ getValue, }: { getValue: () => unknown; }): string { - return formatTimestamp(getValue() as Timestamp | undefined); -} - export type TimeStamp = Timestamp; diff --git a/web/sdk/admin/views/audit-logs/columns.tsx b/web/sdk/admin/views/audit-logs/columns.tsx index 9ebca0680..889e9306e 100644 --- a/web/sdk/admin/views/audit-logs/columns.tsx +++ b/web/sdk/admin/views/audit-logs/columns.tsx @@ -9,7 +9,7 @@ import { formatTimestamp, isNullTimestamp, TimeStamp, -} from "../../utils/connect-timestamp"; +} from "~/admin/utils/connect-timestamp"; import { ACTOR_TYPES, getActionBadgeColor } from "./util"; import { ComponentPropsWithoutRef } from "react"; import ActorCell from "./actor-cell"; diff --git a/web/sdk/admin/views/audit-logs/sidepanel-details.tsx b/web/sdk/admin/views/audit-logs/sidepanel-details.tsx index 5d09d45eb..0bbb2b176 100644 --- a/web/sdk/admin/views/audit-logs/sidepanel-details.tsx +++ b/web/sdk/admin/views/audit-logs/sidepanel-details.tsx @@ -9,7 +9,7 @@ import { List } from "@raystack/apsara"; import styles from "./audit-logs.module.css"; import { AuditRecord } from "@raystack/proton/frontier"; import { ACTOR_TYPES } from "./util"; -import { formatTimestamp } from "../../utils/connect-timestamp"; +import { formatTimestamp } from "~/admin/utils/connect-timestamp"; import { MapIcon } from "../../assets/icons/MapIcon"; import SidePanelLogDialog from "./sidepanel-log-dialog"; import ActorCell from "./actor-cell"; diff --git a/web/sdk/admin/views/invoices/columns.tsx b/web/sdk/admin/views/invoices/columns.tsx index f7c453bf0..06db232f8 100644 --- a/web/sdk/admin/views/invoices/columns.tsx +++ b/web/sdk/admin/views/invoices/columns.tsx @@ -1,6 +1,6 @@ import { Amount, type DataTableColumnDef, Link, Text } from "@raystack/apsara"; import type { SearchInvoicesResponse_Invoice } from "@raystack/proton/frontier"; -import { formatTimestamp, TimeStamp } from "../../utils/connect-timestamp"; +import { formatTimestamp, TimeStamp } from "~/admin/utils/connect-timestamp"; import { TerminologyEntity } from "../../hooks/useTerminology"; import styles from "./invoices.module.css"; diff --git a/web/sdk/admin/views/organizations/details/apis/columns.tsx b/web/sdk/admin/views/organizations/details/apis/columns.tsx index 5555e11f7..e299d5fd3 100644 --- a/web/sdk/admin/views/organizations/details/apis/columns.tsx +++ b/web/sdk/admin/views/organizations/details/apis/columns.tsx @@ -1,7 +1,7 @@ import { Text, type DataTableColumnDef } from "@raystack/apsara"; import dayjs from "dayjs"; import { NULL_DATE } from "../../../../utils/constants"; -import { DATE_FORMAT } from "../../../../utils/connect-timestamp"; +import { DATE_FORMAT } from "~/admin/utils/connect-timestamp"; import styles from "./apis.module.css"; import type { SearchOrganizationServiceUsersResponse_OrganizationServiceUser, diff --git a/web/sdk/admin/views/organizations/details/apis/details-dialog.tsx b/web/sdk/admin/views/organizations/details/apis/details-dialog.tsx index c06b20e49..e44e91616 100644 --- a/web/sdk/admin/views/organizations/details/apis/details-dialog.tsx +++ b/web/sdk/admin/views/organizations/details/apis/details-dialog.tsx @@ -9,7 +9,7 @@ import { type SearchOrganizationServiceUsersResponse_OrganizationServiceUser } from "@raystack/proton/frontier"; import { create } from "@bufbuild/protobuf"; -import { formatTimestamp } from "../../../../utils/connect-timestamp"; +import { formatTimestamp } from "~/admin/utils/connect-timestamp"; import { useTerminology } from "../../../../hooks/useTerminology"; interface ServiceUserDetailsDialogProps { diff --git a/web/sdk/admin/views/organizations/details/invoices/columns.tsx b/web/sdk/admin/views/organizations/details/invoices/columns.tsx index c54ac2971..47ec8f15a 100644 --- a/web/sdk/admin/views/organizations/details/invoices/columns.tsx +++ b/web/sdk/admin/views/organizations/details/invoices/columns.tsx @@ -3,7 +3,7 @@ import { DataTableColumnDef, Link, Amount } from "@raystack/apsara"; import type { SearchOrganizationInvoicesResponse_OrganizationInvoice, } from "@raystack/proton/frontier"; -import { timestampCell } from "../../../../utils/connect-timestamp"; +import { formatTimestamp, TimeStamp } from "~/admin/utils/connect-timestamp"; // https://docs.stripe.com/invoicing/overview#invoice-statuses const InvoiceStatusesMap = { @@ -33,7 +33,7 @@ export const getColumns = ({ cell: styles["first-column"], header: styles["first-column"], }, - cell: timestampCell, + cell: ({ getValue }) => formatTimestamp(getValue() as TimeStamp), enableSorting: true, enableColumnFilter: true, filterType: "date", diff --git a/web/sdk/admin/views/organizations/details/members/columns.tsx b/web/sdk/admin/views/organizations/details/members/columns.tsx index a883ac8ea..50a2ce1ec 100644 --- a/web/sdk/admin/views/organizations/details/members/columns.tsx +++ b/web/sdk/admin/views/organizations/details/members/columns.tsx @@ -16,7 +16,7 @@ import type { UpdateRolePayload } from "./update-role"; import styles from "./members.module.css"; import { DotsHorizontalIcon, UpdateIcon } from "@radix-ui/react-icons"; import { DeleteIcon } from "~/admin/assets/icons/DeleteIcon"; -import { formatTimestamp, TimeStamp } from "../../../../utils/connect-timestamp"; +import { formatTimestamp, TimeStamp } from "~/admin/utils/connect-timestamp"; const MemberStates = { enabled: "Active", diff --git a/web/sdk/admin/views/organizations/details/projects/columns.tsx b/web/sdk/admin/views/organizations/details/projects/columns.tsx index 069edcbd6..3a14a59d2 100644 --- a/web/sdk/admin/views/organizations/details/projects/columns.tsx +++ b/web/sdk/admin/views/organizations/details/projects/columns.tsx @@ -13,7 +13,7 @@ import type { } from "@raystack/proton/frontier"; import styles from "./projects.module.css"; -import { timestampCell } 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"; @@ -271,7 +271,7 @@ export const getColumns = ({ { accessorKey: "createdAt", header: "Created On", - cell: timestampCell, + cell: ({ getValue }) => formatTimestamp(getValue() as TimeStamp), enableSorting: true, enableHiding: true, enableColumnFilter: true, diff --git a/web/sdk/admin/views/organizations/details/side-panel/billing-details-section.tsx b/web/sdk/admin/views/organizations/details/side-panel/billing-details-section.tsx index 80d5ac46b..efd2b0f48 100644 --- a/web/sdk/admin/views/organizations/details/side-panel/billing-details-section.tsx +++ b/web/sdk/admin/views/organizations/details/side-panel/billing-details-section.tsx @@ -11,7 +11,7 @@ import { create } from "@bufbuild/protobuf"; import { formatTimestamp, isNullTimestamp, -} from "../../../../utils/connect-timestamp"; +} from "~/admin/utils/connect-timestamp"; export const BillingDetailsSection = () => { const { billingAccount, organization } = useContext(OrganizationContext); diff --git a/web/sdk/admin/views/organizations/details/side-panel/org-details-section.tsx b/web/sdk/admin/views/organizations/details/side-panel/org-details-section.tsx index 048c2b32e..50e9d4dae 100644 --- a/web/sdk/admin/views/organizations/details/side-panel/org-details-section.tsx +++ b/web/sdk/admin/views/organizations/details/side-panel/org-details-section.tsx @@ -4,7 +4,7 @@ import styles from "./side-panel.module.css"; import { useContext } from "react"; import { OrganizationContext } from "../contexts/organization-context"; import type { Organization } from "@raystack/proton/frontier"; -import { formatTimestamp } from "../../../../utils/connect-timestamp"; +import { formatTimestamp } from "~/admin/utils/connect-timestamp"; interface OrganizationDetailsSectionProps { organization: Organization; diff --git a/web/sdk/admin/views/organizations/details/side-panel/plan-details-section.tsx b/web/sdk/admin/views/organizations/details/side-panel/plan-details-section.tsx index 2df143ebd..10cfad2b9 100644 --- a/web/sdk/admin/views/organizations/details/side-panel/plan-details-section.tsx +++ b/web/sdk/admin/views/organizations/details/side-panel/plan-details-section.tsx @@ -10,7 +10,7 @@ import { create } from "@bufbuild/protobuf"; import { formatTimestamp, isNullTimestamp, -} from "../../../../utils/connect-timestamp"; +} from "~/admin/utils/connect-timestamp"; export const PlanDetailsSection = () => { const { billingAccount, organization } = useContext(OrganizationContext); diff --git a/web/sdk/admin/views/organizations/details/tokens/columns.tsx b/web/sdk/admin/views/organizations/details/tokens/columns.tsx index 6b6536f29..431caf00b 100644 --- a/web/sdk/admin/views/organizations/details/tokens/columns.tsx +++ b/web/sdk/admin/views/organizations/details/tokens/columns.tsx @@ -10,7 +10,7 @@ import { import type { SearchOrganizationTokensResponse_OrganizationToken, } from "@raystack/proton/frontier"; -import { timestampCell } from "../../../../utils/connect-timestamp"; +import { formatTimestamp, TimeStamp } from "~/admin/utils/connect-timestamp"; import { TerminologyEntity } from "../../../../hooks/useTerminology"; interface GetColumnsOptions { @@ -32,7 +32,7 @@ export const getColumns = ({ t }: GetColumnsOptions): DataTableColumnDef< header: styles["first-column"], }, styles: { header: { width: "180px" } }, - cell: timestampCell, + cell: ({ getValue }) => formatTimestamp(getValue() as TimeStamp), enableSorting: true, enableColumnFilter: true, filterType: "date", diff --git a/web/sdk/admin/views/organizations/list/columns.tsx b/web/sdk/admin/views/organizations/list/columns.tsx index 0db5120bb..c48258bb5 100644 --- a/web/sdk/admin/views/organizations/list/columns.tsx +++ b/web/sdk/admin/views/organizations/list/columns.tsx @@ -10,7 +10,7 @@ import type { SearchOrganizationsResponse_OrganizationResult, Plan, } from "@raystack/proton/frontier"; -import { formatTimestamp, TimeStamp } from "../../../utils/connect-timestamp"; +import { formatTimestamp, TimeStamp } from "~/admin/utils/connect-timestamp"; import styles from "./list.module.css"; export const SUBSCRIPTION_STATES = { diff --git a/web/sdk/admin/views/plans/columns.tsx b/web/sdk/admin/views/plans/columns.tsx index 9802b01df..14961846d 100644 --- a/web/sdk/admin/views/plans/columns.tsx +++ b/web/sdk/admin/views/plans/columns.tsx @@ -1,6 +1,6 @@ import { Text, type DataTableColumnDef } from "@raystack/apsara"; import type { Plan } from "@raystack/proton/frontier"; -import { timestampCell } from "../../utils/connect-timestamp"; +import { formatTimestamp, TimeStamp } from "~/admin/utils/connect-timestamp"; import styles from "./plans.module.css"; export const getColumns: (options?: { @@ -46,7 +46,7 @@ export const getColumns: (options?: { { header: "Created At", accessorKey: "createdAt", - cell: timestampCell, + cell: ({ getValue }) => formatTimestamp(getValue() as TimeStamp), }, ]; }; diff --git a/web/sdk/admin/views/plans/details.tsx b/web/sdk/admin/views/plans/details.tsx index 87a85c4f7..0473a75bc 100644 --- a/web/sdk/admin/views/plans/details.tsx +++ b/web/sdk/admin/views/plans/details.tsx @@ -1,6 +1,6 @@ import { Flex, Text, Grid } from "@raystack/apsara"; import type { Plan } from "@raystack/proton/frontier"; -import { formatTimestamp } from "../../utils/connect-timestamp"; +import { formatTimestamp } from "~/admin/utils/connect-timestamp"; export default function PlanDetails({ plan }: { plan: Plan | null }) { diff --git a/web/sdk/admin/views/preferences/details.tsx b/web/sdk/admin/views/preferences/details.tsx index 93c9bc8e1..1ba89061b 100644 --- a/web/sdk/admin/views/preferences/details.tsx +++ b/web/sdk/admin/views/preferences/details.tsx @@ -15,7 +15,7 @@ import { useMutation, createConnectQueryKey, useTransport } from "@connectrpc/co import { handleConnectError } from "~/utils/error"; import { AdminServiceQueries, CreatePreferencesRequestSchema, ListPreferencesResponse } from "@raystack/proton/frontier"; import { Preference, PreferenceTrait, PreferenceTrait_InputType } from "@raystack/proton/frontier"; -import { DATE_FORMAT, formatTimestamp } from "../../utils/connect-timestamp"; +import { DATE_FORMAT, formatTimestamp } from "~/admin/utils/connect-timestamp"; import { useQueryClient } from "@tanstack/react-query"; import { create } from "@bufbuild/protobuf"; diff --git a/web/sdk/admin/views/products/columns.tsx b/web/sdk/admin/views/products/columns.tsx index 575023325..41251cfdd 100644 --- a/web/sdk/admin/views/products/columns.tsx +++ b/web/sdk/admin/views/products/columns.tsx @@ -1,6 +1,6 @@ import { Flex, Image, Amount, type DataTableColumnDef } from "@raystack/apsara"; import type { Product } from "@raystack/proton/frontier"; -import { timestampCell } from "../../utils/connect-timestamp"; +import { formatTimestamp, TimeStamp } from "~/admin/utils/connect-timestamp"; import styles from "./products.module.css"; export const getColumns = ( @@ -85,13 +85,13 @@ export const getColumns = ( { header: "Created on", accessorKey: "createdAt", - cell: timestampCell, + cell: ({ getValue }) => formatTimestamp(getValue() as TimeStamp), filterType: "date", }, { header: "Updated on", accessorKey: "updatedAt", - cell: timestampCell, + cell: ({ getValue }) => formatTimestamp(getValue() as TimeStamp), filterType: "date", }, ]; diff --git a/web/sdk/admin/views/products/prices/columns.tsx b/web/sdk/admin/views/products/prices/columns.tsx index a13b5ae5e..e0d2cfbcd 100644 --- a/web/sdk/admin/views/products/prices/columns.tsx +++ b/web/sdk/admin/views/products/prices/columns.tsx @@ -1,7 +1,7 @@ import type { Price as PriceType } from "@raystack/proton/frontier"; import { Amount } from "@raystack/apsara"; import type { DataTableColumnDef } from "@raystack/apsara"; -import { timestampCell } from "../../../utils/connect-timestamp"; +import { formatTimestamp, TimeStamp } from "~/admin/utils/connect-timestamp"; import styles from "./prices.module.css"; export const getColumns = ( @@ -56,13 +56,13 @@ export const getColumns = ( { header: "creation date", accessorKey: "createdAt", - cell: timestampCell, + cell: ({ getValue }) => formatTimestamp(getValue() as TimeStamp), }, { header: "Updated date", accessorKey: "updatedAt", enableColumnFilter: false, - cell: timestampCell, + cell: ({ getValue }) => formatTimestamp(getValue() as TimeStamp), }, ]; }; diff --git a/web/sdk/admin/views/users/details/layout/side-panel-details.tsx b/web/sdk/admin/views/users/details/layout/side-panel-details.tsx index cd40198c2..f02cabb02 100644 --- a/web/sdk/admin/views/users/details/layout/side-panel-details.tsx +++ b/web/sdk/admin/views/users/details/layout/side-panel-details.tsx @@ -3,7 +3,7 @@ import { CalendarIcon } from "@radix-ui/react-icons"; import styles from "./side-panel.module.css"; import { UserState, USER_STATES } from "../../util"; import { useUser } from "../user-context"; -import { formatTimestamp } from "../../../../utils/connect-timestamp"; +import { formatTimestamp } from "~/admin/utils/connect-timestamp"; export const SidePanelDetails = () => { const { user } = useUser(); diff --git a/web/sdk/admin/views/users/details/layout/side-panel-membership.tsx b/web/sdk/admin/views/users/details/layout/side-panel-membership.tsx index 9fd778957..49de4da73 100644 --- a/web/sdk/admin/views/users/details/layout/side-panel-membership.tsx +++ b/web/sdk/admin/views/users/details/layout/side-panel-membership.tsx @@ -4,7 +4,7 @@ import Skeleton from "react-loading-skeleton"; import { type SearchUserOrganizationsResponse_UserOrganization } from "@raystack/proton/frontier"; import styles from "./side-panel.module.css"; import { MembershipDropdown } from "./membership-dropdown"; -import { formatTimestamp } from "../../../../utils/connect-timestamp"; +import { formatTimestamp } from "~/admin/utils/connect-timestamp"; interface SidePanelMembershipProps { data?: SearchUserOrganizationsResponse_UserOrganization; diff --git a/web/sdk/admin/views/users/list/columns.tsx b/web/sdk/admin/views/users/list/columns.tsx index 605e23bee..d45f6007c 100644 --- a/web/sdk/admin/views/users/list/columns.tsx +++ b/web/sdk/admin/views/users/list/columns.tsx @@ -9,7 +9,7 @@ import { import styles from "./list.module.css"; import { getUserName, USER_STATES, UserState } from "../util"; import { User } from "@raystack/proton/frontier"; -import { formatTimestamp, TimeStamp } from "../../../utils/connect-timestamp"; +import { formatTimestamp, TimeStamp } from "~/admin/utils/connect-timestamp"; interface getColumnsOptions { groupCountMap: Record>; diff --git a/web/sdk/admin/views/webhooks/webhooks/columns.tsx b/web/sdk/admin/views/webhooks/webhooks/columns.tsx index 156b7d967..f1113c611 100644 --- a/web/sdk/admin/views/webhooks/webhooks/columns.tsx +++ b/web/sdk/admin/views/webhooks/webhooks/columns.tsx @@ -10,7 +10,7 @@ import { type Webhook } from "@raystack/proton/frontier"; import { formatTimestamp, type TimeStamp, -} from "../../../utils/connect-timestamp"; +} from "~/admin/utils/connect-timestamp"; import { useState } from "react"; import type { useMutation } from "@connectrpc/connect-query"; import { DeleteWebhookDialog } from "./delete";