Make billing events 1:1 with Stripe events and add unsynced and drift filters on accounts

Author: tjementum

application/account/BackOffice/routes/accounts/-components/AccountBillingEventRow.tsx

@@ -1,6 +1,5 @@
 import type { ReactNode } from "react";
 
-import { Trans } from "@lingui/react/macro";
 import { Badge } from "@repo/ui/components/Badge";
 import { TableCell, TableRow } from "@repo/ui/components/Table";
 import { formatCurrency } from "@repo/utils/currency/formatCurrency";
@@ -12,10 +11,6 @@ import { BILLING_EVENT_VARIANT } from "@/shared/lib/billingEventStyle";
 
 type BillingEventSummary = components["schemas"]["BillingEventSummary"];
 
-function isSameDay(a: string, b: string): boolean {
-  return a.slice(0, 10) === b.slice(0, 10);
-}
-
 export function AccountBillingEventRow({
   event,
   renderDate,
@@ -28,17 +23,11 @@ export function AccountBillingEventRow({
   const variant = BILLING_EVENT_VARIANT[event.eventType];
   const Icon = variant.icon;
   const showPlanTransition = event.fromPlan != null && event.toPlan != null && event.fromPlan !== event.toPlan;
-  const showEffective = event.effectiveAt != null && !isSameDay(event.effectiveAt, event.occurredAt);
   return (
     <TableRow rowKey={event.id}>
       <TableCell className="align-top whitespace-nowrap">
         <div className="flex flex-col leading-tight">
           <span>{renderDate(event.occurredAt)}</span>
-          {showEffective && (
-            <span className="text-xs text-muted-foreground">
-              <Trans>Effective {renderDate(event.effectiveAt)}</Trans>
-            </span>
-          )}
         </div>
       </TableCell>
       <TableCell>

application/account/BackOffice/routes/accounts/-components/AccountsToolbar.tsx

@@ -1,10 +1,12 @@
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
+import { Badge } from "@repo/ui/components/Badge";
+import { Button } from "@repo/ui/components/Button";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@repo/ui/components/InputGroup";
 import { ToggleGroup, ToggleGroupItem } from "@repo/ui/components/ToggleGroup";
 import { useDebounce } from "@repo/ui/hooks/useDebounce";
 import { useNavigate } from "@tanstack/react-router";
-import { SearchIcon, XIcon } from "lucide-react";
+import { CloudOffIcon, SearchIcon, TriangleAlertIcon, XIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 
 import type { SortableTenantProperties } from "@/shared/lib/api/client";
@@ -16,9 +18,11 @@ interface AccountsToolbarProps {
   search: string | undefined;
   plans: SubscriptionPlan[];
   statuses: TenantStatusFilter[];
+  unsynced: boolean;
+  driftDetected: boolean;
 }
 
-export function AccountsToolbar({ search, plans, statuses }: Readonly<AccountsToolbarProps>) {
+export function AccountsToolbar({ search, plans, statuses, unsynced, driftDetected }: Readonly<AccountsToolbarProps>) {
   const navigate = useNavigate();
   const [searchInput, setSearchInput] = useState(search ?? "");
   const debouncedSearch = useDebounce(searchInput, 500);
@@ -137,6 +141,49 @@ export function AccountsToolbar({ search, plans, statuses }: Readonly<AccountsTo
           <Trans>Free</Trans>
         </ToggleGroupItem>
       </ToggleGroup>
+
+      <IssueFilterBadges unsynced={unsynced} driftDetected={driftDetected} />
     </div>
   );
 }
+
+function IssueFilterBadges({ unsynced, driftDetected }: Readonly<{ unsynced: boolean; driftDetected: boolean }>) {
+  const navigate = useNavigate();
+  const clear = (key: "unsynced" | "driftDetected") => () =>
+    navigate({
+      to: "/accounts",
+      search: (previous) => ({
+        search: previous.search,
+        plans: previous.plans,
+        statuses: previous.statuses,
+        unsynced: key === "unsynced" ? undefined : previous.unsynced,
+        driftDetected: key === "driftDetected" ? undefined : previous.driftDetected,
+        orderBy: previous.orderBy as SortableTenantProperties | undefined,
+        sortOrder: previous.sortOrder,
+        pageOffset: undefined
+      })
+    });
+
+  return (
+    <>
+      {unsynced && (
+        <Badge variant="outline" className="gap-1.5 border-amber-500/30 text-amber-600">
+          <CloudOffIcon className="size-3.5" aria-hidden={true} />
+          <Trans>Not synced yet</Trans>
+          <Button variant="ghost" size="icon-xs" aria-label={t`Clear filter`} onClick={clear("unsynced")}>
+            <XIcon className="size-3" />
+          </Button>
+        </Badge>
+      )}
+      {driftDetected && (
+        <Badge variant="outline" className="gap-1.5 border-amber-500/30 text-amber-600">
+          <TriangleAlertIcon className="size-3.5" aria-hidden={true} />
+          <Trans>Drift detected</Trans>
+          <Button variant="ghost" size="icon-xs" aria-label={t`Clear filter`} onClick={clear("driftDetected")}>
+            <XIcon className="size-3" />
+          </Button>
+        </Badge>
+      )}
+    </>
+  );
+}

application/account/BackOffice/routes/accounts/index.tsx

@@ -31,6 +31,8 @@ const accountsSearchSchema = z.object({
   search: z.string().optional(),
   plans: z.array(z.nativeEnum(SubscriptionPlan)).max(10).optional(),
   statuses: z.array(z.nativeEnum(TenantStatusFilter)).max(10).optional(),
+  unsynced: z.boolean().optional(),
+  driftDetected: z.boolean().optional(),
   orderBy: z.nativeEnum(SortableTenantProperties).optional(),
   sortOrder: z.nativeEnum(SortOrder).optional(),
   pageOffset: z.number().int().nonnegative().optional()
@@ -43,7 +45,7 @@ export const Route = createFileRoute("/accounts/")({
 });
 
 function AccountsListPage() {
-  const { search, plans, statuses, orderBy, sortOrder, pageOffset } = Route.useSearch();
+  const { search, plans, statuses, unsynced, driftDetected, orderBy, sortOrder, pageOffset } = Route.useSearch();
   const navigate = useNavigate();
   const [previewTenant, setPreviewTenant] = useState<TenantSummary | null>(null);
 
@@ -56,6 +58,8 @@ function AccountsListPage() {
           Search: search,
           Plans: plans,
           Statuses: statuses,
+          Unsynced: unsynced,
+          DriftDetected: driftDetected,
           OrderBy: orderBy,
           SortOrder: sortOrder,
           PageOffset: pageOffset
@@ -72,7 +76,12 @@ function AccountsListPage() {
   const handleClosePane = useCallback(() => setPreviewTenant(null), []);
 
   const tenants = data?.tenants ?? [];
-  const hasFilters = Boolean(search) || (plans?.length ?? 0) > 0 || (statuses?.length ?? 0) > 0;
+  const hasFilters =
+    Boolean(search) ||
+    (plans?.length ?? 0) > 0 ||
+    (statuses?.length ?? 0) > 0 ||
+    Boolean(unsynced) ||
+    Boolean(driftDetected);
   const showEmpty = !isLoading && tenants.length === 0;
 
   return (
@@ -91,7 +100,13 @@ function AccountsListPage() {
             ) : undefined
           }
         >
-          <AccountsToolbar search={search} plans={plans ?? []} statuses={statuses ?? []} />
+          <AccountsToolbar
+            search={search}
+            plans={plans ?? []}
+            statuses={statuses ?? []}
+            unsynced={unsynced ?? false}
+            driftDetected={driftDetected ?? false}
+          />
 
           {showEmpty ? (
             <Empty>

application/account/BackOffice/shared/components/BillingDriftBanner.tsx

@@ -31,7 +31,7 @@ export function BillingDriftBanner() {
       <span className="flex-1 text-warning-foreground">
         <Trans>{count} accounts have billing drift detected.</Trans>
       </span>
-      <Button size="sm" nativeButton={false} render={<Link to="/accounts" />}>
+      <Button size="sm" nativeButton={false} render={<Link to="/accounts" search={{ driftDetected: true }} />}>
         <Trans>View accounts</Trans>
       </Button>
     </div>

application/account/BackOffice/shared/components/UnsyncedAccountsBanner.tsx

@@ -32,7 +32,7 @@ export function UnsyncedAccountsBanner() {
       <span className="flex-1 text-warning-foreground">
         <Trans>{count} accounts have not been synced yet — MRR trend is incomplete.</Trans>
       </span>
-      <Button size="sm" nativeButton={false} render={<Link to="/accounts" />}>
+      <Button size="sm" nativeButton={false} render={<Link to="/accounts" search={{ unsynced: true }} />}>
         <Trans>View accounts</Trans>
       </Button>
     </div>

application/account/BackOffice/shared/lib/api/labels.ts

@@ -136,6 +136,10 @@ export function getBillingEventTypeLabel(type: BillingEventType): string {
       return t`Billing info updated`;
     case BillingEventType.PaymentMethodUpdated:
       return t`Payment method updated`;
+    case BillingEventType.NoOp:
+      return t`No change`;
+    case BillingEventType.Unclassified:
+      return t`Unclassified`;
     default:
       return String(type);
   }

application/account/BackOffice/shared/lib/billingEventStyle.ts

@@ -4,12 +4,14 @@ import {
   CalendarClockIcon,
   CircleAlertIcon,
   CircleCheckIcon,
+  CircleSlashIcon,
   CircleXIcon,
   CreditCardIcon,
   PauseCircleIcon,
   RefreshCwIcon,
   ReplyIcon,
   RotateCcwIcon,
+  TriangleAlertIcon,
   WalletIcon
 } from "lucide-react";
 
@@ -93,5 +95,13 @@ export const BILLING_EVENT_VARIANT: Record<BillingEventType, BillingEventVariant
   [BillingEventType.PaymentMethodUpdated]: {
     className: "bg-sky-500/10 text-sky-500 border-sky-500/20",
     icon: CreditCardIcon
+  },
+  [BillingEventType.NoOp]: {
+    className: "bg-muted text-muted-foreground border-border",
+    icon: CircleSlashIcon
+  },
+  [BillingEventType.Unclassified]: {
+    className: "bg-amber-500/10 text-amber-600 border-amber-500/30",
+    icon: TriangleAlertIcon
   }
 };

application/account/BackOffice/shared/translations/locale/da-DK.po

@@ -209,6 +209,9 @@ msgstr "Skift tema"
 msgid "Change zoom level"
 msgstr "Skift zoomniveau"
 
+msgid "Clear filter"
+msgstr ""
+
 msgid "Clear filters"
 msgstr "Ryd filtre"
 
@@ -282,9 +285,8 @@ msgstr "Nedgraderet"
 msgid "Downgrading"
 msgstr "Nedgraderer"
 
-#. placeholder {0}: renderDate(event.effectiveAt)
-msgid "Effective {0}"
-msgstr "Gælder fra {0}"
+msgid "Drift detected"
+msgstr ""
 
 msgid "Email"
 msgstr "E-mail"
@@ -472,6 +474,9 @@ msgstr "Ingen faktureringshændelser matcher dine filtre"
 msgid "No billing events yet"
 msgstr "Ingen faktureringshændelser endnu"
 
+msgid "No change"
+msgstr ""
+
 msgid "No invoices, refunds, or credit notes yet."
 msgstr "Ingen fakturaer, refusioner eller kreditnotaer endnu."
 
@@ -526,6 +531,9 @@ msgstr "Ingen brugere matcher din søgning"
 msgid "No users yet"
 msgstr "Ingen brugere endnu"
 
+msgid "Not synced yet"
+msgstr ""
+
 msgid "Occurred"
 msgstr "Tidspunkt"
 
@@ -786,6 +794,9 @@ msgstr "Prøv igen"
 msgid "Try clearing the search or filters to see more results."
 msgstr "Prøv at rydde søgningen eller filtrene for at se flere resultater."
 
+msgid "Unclassified"
+msgstr ""
+
 msgid "Unknown"
 msgstr "Ukendt"
 

application/account/BackOffice/shared/translations/locale/en-US.po

@@ -209,6 +209,9 @@ msgstr "Change theme"
 msgid "Change zoom level"
 msgstr "Change zoom level"
 
+msgid "Clear filter"
+msgstr "Clear filter"
+
 msgid "Clear filters"
 msgstr "Clear filters"
 
@@ -282,9 +285,8 @@ msgstr "Downgraded"
 msgid "Downgrading"
 msgstr "Downgrading"
 
-#. placeholder {0}: renderDate(event.effectiveAt)
-msgid "Effective {0}"
-msgstr "Effective {0}"
+msgid "Drift detected"
+msgstr "Drift detected"
 
 msgid "Email"
 msgstr "Email"
@@ -472,6 +474,9 @@ msgstr "No billing events match your filters"
 msgid "No billing events yet"
 msgstr "No billing events yet"
 
+msgid "No change"
+msgstr "No change"
+
 msgid "No invoices, refunds, or credit notes yet."
 msgstr "No invoices, refunds, or credit notes yet."
 
@@ -526,6 +531,9 @@ msgstr "No users match your search"
 msgid "No users yet"
 msgstr "No users yet"
 
+msgid "Not synced yet"
+msgstr "Not synced yet"
+
 msgid "Occurred"
 msgstr "Occurred"
 
@@ -786,6 +794,9 @@ msgstr "Try again"
 msgid "Try clearing the search or filters to see more results."
 msgstr "Try clearing the search or filters to see more results."
 
+msgid "Unclassified"
+msgstr "Unclassified"
+
 msgid "Unknown"
 msgstr "Unknown"