feat(subscriptions): added polar as payment provider for subscriptions

* feature(dashboard): add polar / subscription * wip(payments): manage subscription * wip(payments): add free product, faq and some other improvements * fix(root): change node to bundler in tsconfig * wip(payments): display current subscription * feat(dashboard): schedule project for deletion * wip(payments): support custom products/subscriptions * wip(payments): fix polar scripts * wip(payments): add json package to dockerfiles
2025-02-26 11:24:00 +01:00
parent 86bf9dd064
commit 168ebc3430
105 changed files with 3395 additions and 463 deletions
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-menu.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-menu.tsx
@@ -4,13 +4,16 @@ import { Button } from '@/components/ui/button';
 import { pushModal } from '@/modals';
 import { cn } from '@/utils/cn';
 import {
+  BanknoteIcon,
  ChartLineIcon,
+  DollarSignIcon,
  GanttChartIcon,
  Globe2Icon,
  LayersIcon,
  LayoutPanelTopIcon,
  PlusIcon,
  ScanEyeIcon,
+  ServerIcon,
  UsersIcon,
  WallpaperIcon,
 } from 'lucide-react';
@@ -18,7 +21,9 @@ import type { LucideIcon } from 'lucide-react';
 import { usePathname } from 'next/navigation';

 import { ProjectLink } from '@/components/links';
-import type { IServiceDashboards } from '@openpanel/db';
+import { useNumber } from '@/hooks/useNumerFormatter';
+import type { IServiceDashboards, IServiceOrganization } from '@openpanel/db';
+import { differenceInDays, format } from 'date-fns';

 function LinkWithIcon({
  href,
@@ -52,25 +57,114 @@ function LinkWithIcon({

 interface LayoutMenuProps {
  dashboards: IServiceDashboards;
+  organization: IServiceOrganization;
 }
-export default function LayoutMenu({ dashboards }: LayoutMenuProps) {
+export default function LayoutMenu({
+  dashboards,
+  organization,
+}: LayoutMenuProps) {
+  const number = useNumber();
+  const {
+    isTrial,
+    isExpired,
+    isExceeded,
+    isCanceled,
+    subscriptionEndsAt,
+    subscriptionPeriodEventsCount,
+    subscriptionPeriodEventsLimit,
+  } = organization;
  return (
    <>
-      <ProjectLink
-        href={'/reports'}
-        className={cn(
-          'border rounded p-2 row items-center gap-2 hover:bg-def-200 mb-4',
+      <div className="col border rounded mb-2 divide-y">
+        {process.env.SELF_HOSTED && (
+          <ProjectLink
+            href={'/settings/organization?tab=billing'}
+            className={cn(
+              'rounded p-2 row items-center gap-2 pointer-events-none',
+            )}
+          >
+            <ServerIcon size={20} />
+            <div className="flex-1 col gap-1">
+              <div className="font-medium">Self-hosted</div>
+            </div>
+          </ProjectLink>
        )}
-      >
-        <ChartLineIcon size={20} />
-        <div className="flex-1 col gap-1">
-          <div className="font-medium">Create report</div>
-          <div className="text-sm text-muted-foreground">
-            Visualize your events
+        {isTrial && subscriptionEndsAt && (
+          <ProjectLink
+            href={'/settings/organization?tab=billing'}
+            className={cn(
+              'rounded p-2 row items-center gap-2 hover:bg-def-200 text-destructive',
+            )}
+          >
+            <BanknoteIcon size={20} />
+            <div className="flex-1 col gap-1">
+              <div className="font-medium">
+                Free trial ends in{' '}
+                {differenceInDays(subscriptionEndsAt, new Date())} days
+              </div>
+            </div>
+          </ProjectLink>
+        )}
+        {isExpired && subscriptionEndsAt && (
+          <ProjectLink
+            href={'/settings/organization?tab=billing'}
+            className={cn(
+              'rounded p-2 row gap-2 hover:bg-def-200 text-red-600',
+            )}
+          >
+            <BanknoteIcon size={20} />
+            <div className="flex-1 col gap-0.5">
+              <div className="font-medium">Subscription expired</div>
+              <div className="text-sm opacity-80">
+                {differenceInDays(new Date(), subscriptionEndsAt)} days ago
+              </div>
+            </div>
+          </ProjectLink>
+        )}
+        {isCanceled && subscriptionEndsAt && (
+          <ProjectLink
+            href={'/settings/organization?tab=billing'}
+            className={cn(
+              'rounded p-2 row gap-2 hover:bg-def-200 text-red-600',
+            )}
+          >
+            <BanknoteIcon size={20} />
+            <div className="flex-1 col gap-0.5">
+              <div className="font-medium">Subscription canceled</div>
+              <div className="text-sm opacity-80">
+                {differenceInDays(new Date(), subscriptionEndsAt)} days ago
+              </div>
+            </div>
+          </ProjectLink>
+        )}
+        {isExceeded && subscriptionEndsAt && (
+          <ProjectLink
+            href={'/settings/organization?tab=billing'}
+            className={cn(
+              'rounded p-2 row gap-2 hover:bg-def-200 text-destructive',
+            )}
+          >
+            <BanknoteIcon size={20} />
+            <div className="flex-1 col gap-0.5">
+              <div className="font-medium">Events limit exceeded</div>
+              <div className="text-sm opacity-80">
+                {number.format(subscriptionPeriodEventsCount)} /{' '}
+                {number.format(subscriptionPeriodEventsLimit)}
+              </div>
+            </div>
+          </ProjectLink>
+        )}
+        <ProjectLink
+          href={'/reports'}
+          className={cn('rounded p-2 row gap-2 hover:bg-def-200')}
+        >
+          <ChartLineIcon size={20} />
+          <div className="flex-1 col gap-1">
+            <div className="font-medium">Create report</div>
          </div>
-        </div>
-        <PlusIcon size={16} className="text-muted-foreground" />
-      </ProjectLink>
+          <PlusIcon size={16} className="text-muted-foreground" />
+        </ProjectLink>
+      </div>
      <LinkWithIcon icon={WallpaperIcon} label="Overview" href={'/'} />
      <LinkWithIcon
        icon={LayoutPanelTopIcon}
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-sidebar.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-sidebar.tsx
@@ -14,6 +14,7 @@ import type {
  getProjectsByOrganizationId,
 } from '@openpanel/db';

+import { useAppParams } from '@/hooks/useAppParams';
 import Link from 'next/link';
 import LayoutMenu from './layout-menu';
 import LayoutProjectSelector from './layout-project-selector';
@@ -31,6 +32,8 @@ export function LayoutSidebar({
 }: LayoutSidebarProps) {
  const [active, setActive] = useState(false);
  const pathname = usePathname();
+  const { organizationId } = useAppParams();
+  const organization = organizations.find((o) => o.id === organizationId)!;

  useEffect(() => {
    setActive(false);
@@ -76,7 +79,7 @@ export function LayoutSidebar({
          <SettingsToggle />
        </div>
        <div className="flex flex-grow flex-col gap-2 overflow-auto p-4">
-          <LayoutMenu dashboards={dashboards} />
+          <LayoutMenu dashboards={dashboards} organization={organization} />
        </div>
        <div className="fixed bottom-0 left-0 right-0">
          <div className="h-8 w-full bg-gradient-to-t from-card to-card/0" />
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/last-active-users/chart.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/last-active-users/chart.tsx
@@ -42,9 +42,7 @@ function Tooltip(props: any) {

 const Chart = ({ data }: Props) => {
  const xAxisProps = useXAxisProps();
-  const yAxisProps = useYAxisProps({
-    data: data.map((d) => d.users),
-  });
+  const yAxisProps = useYAxisProps();
  return (
    <div className="aspect-video max-h-[300px] w-full p-4">
      <ResponsiveContainer>
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/rolling-active-users/chart.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/rolling-active-users/chart.tsx
@@ -59,9 +59,7 @@ const Chart = ({ data }: Props) => {
    mau: data.monthly.find((m) => m.date === d.date)?.users,
  }));
  const xAxisProps = useXAxisProps({ interval: 'day' });
-  const yAxisProps = useYAxisProps({
-    data: data.monthly.map((d) => d.users),
-  });
+  const yAxisProps = useYAxisProps();
  return (
    <div className="aspect-video max-h-[300px] w-full p-4">
      <ResponsiveContainer>
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/users-retention-series/chart.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/retention/users-retention-series/chart.tsx
@@ -57,9 +57,7 @@ function Tooltip({ payload }: any) {

 const Chart = ({ data }: Props) => {
  const xAxisProps = useXAxisProps();
-  const yAxisProps = useYAxisProps({
-    data: data.map((d) => d.retention),
-  });
+  const yAxisProps = useYAxisProps();
  return (
    <div className="aspect-video max-h-[300px] w-full p-4">
      <ResponsiveContainer>
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/billing-faq.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/billing-faq.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+import { Widget, WidgetBody, WidgetHead } from '@/components/widget';
+
+const questions = [
+  {
+    question: "What's the free tier?",
+    answer: [
+      'You get 5000 events per month for free. This is mostly for you to try out OpenPanel but also for solo developers or people who want to try out OpenPanel without committing to a paid plan.',
+    ],
+  },
+  {
+    question: 'What happens if my site exceeds the limit?',
+    answer: [
+      "You will not see any new events in OpenPanel until your next billing period. If this happens 2 months in a row, we'll advice you to upgrade your plan.",
+    ],
+  },
+  {
+    question: 'What happens if I cancel my subscription?',
+    answer: [
+      'If you cancel your subscription, you will still have access to OpenPanel until the end of your current billing period. You can reactivate your subscription at any time.',
+      'After your current billing period ends, you will not get access to new data.',
+      "NOTE: If your account has been inactive for 3 months, we'll delete your events.",
+    ],
+  },
+  {
+    question: 'How do I change my billing information?',
+    answer: [
+      'You can change your billing information by clicking the "Manage your subscription" button in the billing section.',
+    ],
+  },
+];
+
+export function BillingFaq() {
+  return (
+    <Widget className="w-full">
+      <WidgetHead className="flex items-center justify-between">
+        <span className="title">Usage</span>
+      </WidgetHead>
+      <Accordion
+        type="single"
+        collapsible
+        className="w-full max-w-screen-md self-center"
+      >
+        {questions.map((q) => (
+          <AccordionItem value={q.question} key={q.question}>
+            <AccordionTrigger className="text-left px-4">
+              {q.question}
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="col gap-2 p-4 pt-2">
+                {q.answer.map((a) => (
+                  <p key={a}>{a}</p>
+                ))}
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </Widget>
+  );
+}
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/billing.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/billing.tsx
@@ -0,0 +1,271 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Switch } from '@/components/ui/switch';
+import { Tooltiper } from '@/components/ui/tooltip';
+import { Widget, WidgetBody, WidgetHead } from '@/components/widget';
+import { WidgetTable } from '@/components/widget-table';
+import { useAppParams } from '@/hooks/useAppParams';
+import useWS from '@/hooks/useWS';
+import { api } from '@/trpc/client';
+import type { IServiceOrganization } from '@openpanel/db';
+import type { IPolarPrice } from '@openpanel/payments';
+import { Loader2Icon } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useQueryState } from 'nuqs';
+import { useEffect, useMemo, useState } from 'react';
+import { toast } from 'sonner';
+
+type Props = {
+  organization: IServiceOrganization;
+};
+
+export default function Billing({ organization }: Props) {
+  const router = useRouter();
+  const { projectId } = useAppParams();
+  const [customerSessionToken, setCustomerSessionToken] = useQueryState(
+    'customer_session_token',
+  );
+  const productsQuery = api.subscription.products.useQuery({
+    organizationId: organization.id,
+  });
+
+  useWS(`/live/organization/${organization.id}`, (event) => {
+    router.refresh();
+  });
+
+  const [recurringInterval, setRecurringInterval] = useState<'year' | 'month'>(
+    (organization.subscriptionInterval as 'year' | 'month') || 'month',
+  );
+
+  const products = useMemo(() => {
+    return (productsQuery.data || []).filter(
+      (product) => product.recurringInterval === recurringInterval,
+    );
+  }, [productsQuery.data, recurringInterval]);
+
+  useEffect(() => {
+    if (organization.subscriptionInterval) {
+      setRecurringInterval(
+        organization.subscriptionInterval as 'year' | 'month',
+      );
+    }
+  }, [organization.subscriptionInterval]);
+
+  function renderBillingTable() {
+    if (productsQuery.isLoading) {
+      return (
+        <div className="center-center p-8">
+          <Loader2Icon className="animate-spin" />
+        </div>
+      );
+    }
+    if (productsQuery.isError) {
+      return (
+        <div className="center-center p-8 font-medium">
+          Issues loading all tiers
+        </div>
+      );
+    }
+    return (
+      <WidgetTable
+        className="w-full max-w-full [&_td]:text-left"
+        data={products}
+        keyExtractor={(item) => item.id}
+        columns={[
+          {
+            name: 'Tier',
+            render(item) {
+              return <div className="font-medium">{item.name}</div>;
+            },
+            className: 'w-full',
+          },
+          {
+            name: 'Price',
+            render(item) {
+              const price = item.prices[0];
+              if (!price) {
+                return null;
+              }
+
+              if (price.amountType === 'free') {
+                return (
+                  <div className="row gap-2 whitespace-nowrap">
+                    <div className="items-center text-right justify-end gap-4 flex-1 row">
+                      <span>Free</span>
+                      <CheckoutButton
+                        disabled={item.disabled}
+                        key={price.id}
+                        price={price}
+                        organization={organization}
+                        projectId={projectId}
+                      />
+                    </div>
+                  </div>
+                );
+              }
+
+              if (price.amountType !== 'fixed') {
+                return null;
+              }
+
+              return (
+                <div className="row gap-2 whitespace-nowrap">
+                  <div className="items-center text-right justify-end gap-4 flex-1 row">
+                    <span>
+                      {new Intl.NumberFormat('en-US', {
+                        style: 'currency',
+                        currency: price.priceCurrency,
+                        minimumFractionDigits: 0,
+                        maximumFractionDigits: 0,
+                      }).format(price.priceAmount / 100)}
+                      {' / '}
+                      {recurringInterval === 'year' ? 'year' : 'month'}
+                    </span>
+                    <CheckoutButton
+                      disabled={item.disabled}
+                      key={price.id}
+                      price={price}
+                      organization={organization}
+                      projectId={projectId}
+                    />
+                  </div>
+                </div>
+              );
+            },
+          },
+        ]}
+      />
+    );
+  }
+
+  return (
+    <>
+      <Widget className="w-full">
+        <WidgetHead className="flex items-center justify-between">
+          <span className="title">Billing</span>
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-muted-foreground">
+              {recurringInterval === 'year'
+                ? 'Yearly (2 months free)'
+                : 'Monthly'}
+            </span>
+            <Switch
+              checked={recurringInterval === 'year'}
+              onCheckedChange={(checked) =>
+                setRecurringInterval(checked ? 'year' : 'month')
+              }
+            />
+          </div>
+        </WidgetHead>
+        <WidgetBody>
+          <div className="-m-4">
+            {renderBillingTable()}
+            <div className="text-center p-4 border-t">
+              <p>Do you need higher limits? </p>
+              <p>
+                Reach out to{' '}
+                <a
+                  className="underline font-medium"
+                  href="mailto:hello@openpanel.dev"
+                >
+                  hello@openpanel.dev
+                </a>{' '}
+                and we'll help you out.
+              </p>
+            </div>
+          </div>
+        </WidgetBody>
+      </Widget>
+      <Dialog
+        open={!!customerSessionToken}
+        onOpenChange={(open) => {
+          setCustomerSessionToken(null);
+          if (!open) {
+            router.refresh();
+          }
+        }}
+      >
+        <DialogContent>
+          <DialogTitle>Subscription created</DialogTitle>
+          <DialogDescription>
+            We have registered your subscription. It'll be activated within a
+            couple of seconds.
+          </DialogDescription>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button>OK</Button>
+            </DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
+function CheckoutButton({
+  price,
+  organization,
+  projectId,
+  disabled,
+}: {
+  price: IPolarPrice;
+  organization: IServiceOrganization;
+  projectId: string;
+  disabled?: string | null;
+}) {
+  const isCurrentPrice = organization.subscriptionPriceId === price.id;
+  const checkout = api.subscription.checkout.useMutation({
+    onSuccess(data) {
+      if (data?.url) {
+        window.location.href = data.url;
+      } else {
+        toast.success('Subscription updated', {
+          description: 'It might take a few seconds to update',
+        });
+      }
+    },
+  });
+
+  const isCanceled =
+    organization.subscriptionStatus === 'active' &&
+    isCurrentPrice &&
+    organization.subscriptionCanceledAt;
+  const isActive =
+    organization.subscriptionStatus === 'active' && isCurrentPrice;
+
+  return (
+    <Tooltiper
+      content={disabled}
+      tooltipClassName="max-w-xs"
+      side="left"
+      disabled={!disabled}
+    >
+      <Button
+        disabled={disabled !== null || (isActive && !isCanceled)}
+        key={price.id}
+        onClick={() => {
+          checkout.mutate({
+            projectId,
+            organizationId: organization.id,
+            productPriceId: price!.id,
+            productId: price.productId,
+          });
+        }}
+        loading={checkout.isLoading}
+        className="w-28"
+        variant={isActive ? 'outline' : 'default'}
+      >
+        {isCanceled ? 'Reactivate' : isActive ? 'Active' : 'Activate'}
+      </Button>
+    </Tooltiper>
+  );
+}
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/current-subscription.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/current-subscription.tsx
@@ -0,0 +1,278 @@
+'use client';
+
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Switch } from '@/components/ui/switch';
+import { Tooltiper } from '@/components/ui/tooltip';
+import { Widget, WidgetBody, WidgetHead } from '@/components/widget';
+import { WidgetTable } from '@/components/widget-table';
+import { useAppParams } from '@/hooks/useAppParams';
+import { useNumber } from '@/hooks/useNumerFormatter';
+import useWS from '@/hooks/useWS';
+import { showConfirm } from '@/modals';
+import Confirm from '@/modals/Confirm';
+import { api } from '@/trpc/client';
+import { cn } from '@/utils/cn';
+import type { IServiceOrganization } from '@openpanel/db';
+import type { IPolarPrice } from '@openpanel/payments';
+import { format } from 'date-fns';
+import { Loader2Icon } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useQueryState } from 'nuqs';
+import { product } from 'ramda';
+import { useEffect, useMemo, useState } from 'react';
+import { toast } from 'sonner';
+
+type Props = {
+  organization: IServiceOrganization;
+};
+
+export default function CurrentSubscription({ organization }: Props) {
+  const router = useRouter();
+  const { projectId } = useAppParams();
+  const number = useNumber();
+  const [customerSessionToken, setCustomerSessionToken] = useQueryState(
+    'customer_session_token',
+  );
+  const productQuery = api.subscription.getCurrent.useQuery({
+    organizationId: organization.id,
+  });
+  const cancelSubscription = api.subscription.cancelSubscription.useMutation({
+    onSuccess(res) {
+      toast.success('Subscription cancelled', {
+        description: 'It might take a few seconds to update',
+      });
+    },
+    onError(error) {
+      toast.error(error.message);
+    },
+  });
+  const portalMutation = api.subscription.portal.useMutation({
+    onSuccess(data) {
+      if (data?.url) {
+        window.location.href = data.url;
+      }
+    },
+  });
+  const checkout = api.subscription.checkout.useMutation({
+    onSuccess(data) {
+      if (data?.url) {
+        window.location.href = data.url;
+      } else {
+        toast.success('Subscription updated', {
+          description: 'It might take a few seconds to update',
+        });
+      }
+    },
+  });
+
+  useWS(`/live/organization/${organization.id}`, () => {
+    productQuery.refetch();
+  });
+
+  function render() {
+    if (productQuery.isLoading) {
+      return (
+        <div className="center-center p-8">
+          <Loader2Icon className="animate-spin" />
+        </div>
+      );
+    }
+    if (productQuery.isError) {
+      return (
+        <div className="center-center p-8 font-medium">
+          Issues loading all tiers
+        </div>
+      );
+    }
+
+    if (!productQuery.data) {
+      return (
+        <div className="center-center p-8 font-medium">
+          No subscription found
+        </div>
+      );
+    }
+
+    const product = productQuery.data;
+    const price = product.prices[0]!;
+    return (
+      <>
+        <div className="gap-4 col">
+          <div className="row justify-between">
+            <div>Name</div>
+            <div className="text-right font-medium">{product.name}</div>
+          </div>
+          {price.amountType === 'fixed' ? (
+            <>
+              <div className="row justify-between">
+                <div>Price</div>
+                <div className="text-right font-medium font-mono">
+                  {number.currency(price.priceAmount / 100)}
+                </div>
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="row justify-between">
+                <div>Price</div>
+                <div className="text-right font-medium font-mono">FREE</div>
+              </div>
+            </>
+          )}
+          <div className="row justify-between">
+            <div>Billing Cycle</div>
+            <div className="text-right font-medium">
+              {price.recurringInterval === 'month' ? 'Monthly' : 'Yearly'}
+            </div>
+          </div>
+          {typeof product.metadata.eventsLimit === 'number' && (
+            <div className="row justify-between">
+              <div>Events per mount</div>
+              <div className="text-right font-medium font-mono">
+                {number.format(product.metadata.eventsLimit)}
+              </div>
+            </div>
+          )}
+        </div>
+        <div className="col gap-2">
+          {organization.isWillBeCanceled || organization.isCanceled ? (
+            <Button
+              loading={checkout.isLoading}
+              onClick={() => {
+                checkout.mutate({
+                  projectId,
+                  organizationId: organization.id,
+                  productPriceId: price!.id,
+                  productId: price.productId,
+                });
+              }}
+            >
+              Reactivate subscription
+            </Button>
+          ) : (
+            <Button
+              variant="destructive"
+              loading={cancelSubscription.isLoading}
+              onClick={() => {
+                showConfirm({
+                  title: 'Cancel subscription',
+                  text: 'Are you sure you want to cancel your subscription?',
+                  onConfirm() {
+                    cancelSubscription.mutate({
+                      organizationId: organization.id,
+                    });
+                  },
+                });
+              }}
+            >
+              Cancel subscription
+            </Button>
+          )}
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <div className="col gap-2 md:w-72 shrink-0">
+      <Widget className="w-full">
+        <WidgetHead className="flex items-center justify-between">
+          <span className="title">Current Subscription</span>
+          <div className="flex items-center gap-2">
+            <div className="relative">
+              <div
+                className={cn(
+                  'h-3 w-3 animate-ping rounded-full bg-emerald-500 opacity-100 transition-all',
+                  organization.isExceeded ||
+                    organization.isExpired ||
+                    (organization.subscriptionStatus !== 'active' &&
+                      'bg-destructive'),
+                  organization.isWillBeCanceled && 'bg-orange-400',
+                )}
+              />
+              <div
+                className={cn(
+                  'absolute left-0 top-0 h-3 w-3 rounded-full bg-emerald-500 transition-all',
+                  organization.isExceeded ||
+                    organization.isExpired ||
+                    (organization.subscriptionStatus !== 'active' &&
+                      'bg-destructive'),
+                  organization.isWillBeCanceled && 'bg-orange-400',
+                )}
+              />
+            </div>
+          </div>
+        </WidgetHead>
+        <WidgetBody className="col gap-8">
+          {organization.isTrial && organization.subscriptionEndsAt && (
+            <Alert variant="warning">
+              <AlertTitle>Free trial</AlertTitle>
+              <AlertDescription>
+                Your organization is on a free trial. It ends on{' '}
+                {format(organization.subscriptionEndsAt, 'PPP')}
+              </AlertDescription>
+            </Alert>
+          )}
+          {organization.isExpired && organization.subscriptionEndsAt && (
+            <Alert variant="destructive">
+              <AlertTitle>Subscription expired</AlertTitle>
+              <AlertDescription>
+                Your subscription has expired. You can reactivate it by choosing
+                a new plan below.
+              </AlertDescription>
+              <AlertDescription>
+                It expired on {format(organization.subscriptionEndsAt, 'PPP')}
+              </AlertDescription>
+            </Alert>
+          )}
+          {organization.isWillBeCanceled && (
+            <Alert variant="warning">
+              <AlertTitle>Subscription canceled</AlertTitle>
+              <AlertDescription>
+                You have canceled your subscription. You can reactivate it by
+                choosing a new plan below.
+              </AlertDescription>
+              <AlertDescription className="font-medium">
+                It'll expire on{' '}
+                {format(organization.subscriptionEndsAt!, 'PPP')}
+              </AlertDescription>
+            </Alert>
+          )}
+          {organization.isCanceled && (
+            <Alert variant="warning">
+              <AlertTitle>Subscription canceled</AlertTitle>
+              <AlertDescription>
+                Your subscription was canceled on{' '}
+                {format(organization.subscriptionCanceledAt!, 'PPP')}
+              </AlertDescription>
+            </Alert>
+          )}
+          {render()}
+        </WidgetBody>
+      </Widget>
+      {organization.hasSubscription && (
+        <button
+          className="text-center mt-2 w-2/3 hover:underline self-center"
+          type="button"
+          onClick={() =>
+            portalMutation.mutate({
+              organizationId: organization.id,
+            })
+          }
+        >
+          Manage your subscription with
+          <span className="font-medium ml-1">Polar Customer Portal</span>
+        </button>
+      )}
+    </div>
+  );
+}
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/edit-organization.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/edit-organization.tsx
@@ -9,7 +9,7 @@ import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';

-import type { getOrganizationBySlug } from '@openpanel/db';
+import type { IServiceOrganization } from '@openpanel/db';

 const validator = z.object({
  id: z.string().min(2),
@@ -18,7 +18,7 @@ const validator = z.object({

 type IForm = z.infer<typeof validator>;
 interface EditOrganizationProps {
-  organization: Awaited<ReturnType<typeof getOrganizationBySlug>>;
+  organization: IServiceOrganization;
 }
 export default function EditOrganization({
  organization,
@@ -41,29 +41,27 @@ export default function EditOrganization({
  });

  return (
-    <section className="max-w-screen-sm">
-      <form
-        onSubmit={handleSubmit((values) => {
-          mutation.mutate(values);
-        })}
-      >
-        <Widget>
-          <WidgetHead className="flex items-center justify-between">
-            <span className="title">Details</span>
-          </WidgetHead>
-          <WidgetBody className="flex items-end gap-2">
-            <InputWithLabel
-              className="flex-1"
-              label="Name"
-              {...register('name')}
-              defaultValue={organization?.name}
-            />
-            <Button size="sm" type="submit" disabled={!formState.isDirty}>
-              Save
-            </Button>
-          </WidgetBody>
-        </Widget>
-      </form>
-    </section>
+    <form
+      onSubmit={handleSubmit((values) => {
+        mutation.mutate(values);
+      })}
+    >
+      <Widget>
+        <WidgetHead className="flex items-center justify-between">
+          <span className="title">Details</span>
+        </WidgetHead>
+        <WidgetBody className="flex items-end gap-2">
+          <InputWithLabel
+            className="flex-1"
+            label="Name"
+            {...register('name')}
+            defaultValue={organization?.name}
+          />
+          <Button size="sm" type="submit" disabled={!formState.isDirty}>
+            Save
+          </Button>
+        </WidgetBody>
+      </Widget>
+    </form>
  );
 }
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/organization.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/organization.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import type { IServiceOrganization } from '@openpanel/db';
+import EditOrganization from './edit-organization';
+
+interface OrganizationProps {
+  organization: IServiceOrganization;
+}
+export default function Organization({ organization }: OrganizationProps) {
+  return (
+    <section className="max-w-screen-sm col gap-8">
+      <EditOrganization organization={organization} />
+    </section>
+  );
+}
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/usage.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/usage.tsx
@@ -0,0 +1,289 @@
+'use client';
+
+import {
+  useXAxisProps,
+  useYAxisProps,
+} from '@/components/report-chart/common/axis';
+import { Widget, WidgetBody, WidgetHead } from '@/components/widget';
+import { useNumber } from '@/hooks/useNumerFormatter';
+import { api } from '@/trpc/client';
+import { formatDate } from '@/utils/date';
+import { getChartColor } from '@/utils/theme';
+import { sum } from '@openpanel/common';
+import type { IServiceOrganization } from '@openpanel/db';
+import { Loader2Icon } from 'lucide-react';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Tooltip as RechartTooltip,
+  ReferenceLine,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+type Props = {
+  organization: IServiceOrganization;
+};
+
+function Card({ title, value }: { title: string; value: string }) {
+  return (
+    <div className="col gap-2 p-4 flex-1 min-w-0" title={`${title}: ${value}`}>
+      <div className="text-muted-foreground truncate">{title}</div>
+      <div className="font-mono text-xl font-bold truncate">{value}</div>
+    </div>
+  );
+}
+
+export default function Usage({ organization }: Props) {
+  const number = useNumber();
+  const xAxisProps = useXAxisProps({ interval: 'day' });
+  const yAxisProps = useYAxisProps({});
+  const usageQuery = api.subscription.usage.useQuery({
+    organizationId: organization.id,
+  });
+
+  const wrapper = (node: React.ReactNode) => (
+    <Widget className="w-full">
+      <WidgetHead className="flex items-center justify-between">
+        <span className="title">Usage</span>
+      </WidgetHead>
+      <WidgetBody>{node}</WidgetBody>
+    </Widget>
+  );
+
+  if (usageQuery.isLoading) {
+    return wrapper(
+      <div className="center-center p-8">
+        <Loader2Icon className="animate-spin" />
+      </div>,
+    );
+  }
+  if (usageQuery.isError) {
+    return wrapper(
+      <div className="center-center p-8 font-medium">
+        Issues loading usage data
+      </div>,
+    );
+  }
+
+  const subscriptionPeriodEventsLimit = organization.hasSubscription
+    ? organization.subscriptionPeriodEventsLimit
+    : 0;
+  const subscriptionPeriodEventsCount = organization.hasSubscription
+    ? organization.subscriptionPeriodEventsCount
+    : 0;
+
+  const domain = [
+    0,
+    Math.max(
+      subscriptionPeriodEventsLimit,
+      subscriptionPeriodEventsCount,
+      ...usageQuery.data.map((item) => item.count),
+    ),
+  ] as [number, number];
+
+  domain[1] += domain[1] * 0.05;
+
+  return wrapper(
+    <>
+      <div className="border-b divide-x divide-border -m-4 mb-4 grid grid-cols-2 md:grid-cols-4">
+        {organization.hasSubscription ? (
+          <>
+            <Card
+              title="Period"
+              value={
+                organization.subscriptionCurrentPeriodStart &&
+                organization.subscriptionCurrentPeriodEnd
+                  ? `${formatDate(organization.subscriptionCurrentPeriodStart)}-${formatDate(organization.subscriptionCurrentPeriodEnd)}`
+                  : '🤷‍♂️'
+              }
+            />
+            <Card
+              title="Limit"
+              value={number.format(subscriptionPeriodEventsLimit)}
+            />
+            <Card
+              title="Events count"
+              value={number.format(subscriptionPeriodEventsCount)}
+            />
+            <Card
+              title="Left to use"
+              value={
+                subscriptionPeriodEventsLimit === 0
+                  ? '👀'
+                  : number.formatWithUnit(
+                      (1 -
+                        subscriptionPeriodEventsCount /
+                          subscriptionPeriodEventsLimit) *
+                        100,
+                      '%',
+                    )
+              }
+            />
+          </>
+        ) : (
+          <>
+            <div className="col-span-2">
+              <Card title="Subscription" value={'No active subscription'} />
+            </div>
+            <div className="col-span-2">
+              <Card
+                title="Events from last 30 days"
+                value={number.format(
+                  sum(usageQuery.data.map((item) => item.count)),
+                )}
+              />
+            </div>
+          </>
+        )}
+      </div>
+      <div className="aspect-video max-h-[300px] w-full p-4">
+        <ResponsiveContainer>
+          <BarChart
+            data={usageQuery.data.map((item) => ({
+              date: new Date(item.day).getTime(),
+              count: item.count,
+              limit: subscriptionPeriodEventsLimit,
+              total: subscriptionPeriodEventsCount,
+            }))}
+            barSize={8}
+          >
+            <defs>
+              <linearGradient id="usage" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="0%"
+                  stopColor={getChartColor(0)}
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="100%"
+                  stopColor={getChartColor(0)}
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+            <RechartTooltip
+              content={<Tooltip />}
+              cursor={{
+                stroke: 'hsl(var(--def-400))',
+                fill: 'hsl(var(--def-200))',
+              }}
+            />
+            {organization.hasSubscription && (
+              <>
+                <ReferenceLine
+                  y={subscriptionPeriodEventsLimit}
+                  stroke={getChartColor(1)}
+                  strokeWidth={2}
+                  strokeDasharray="3 3"
+                  strokeOpacity={0.5}
+                  strokeLinecap="round"
+                  label={{
+                    value: `Limit (${number.format(subscriptionPeriodEventsLimit)})`,
+                    fill: getChartColor(1),
+                    position: 'insideTopRight',
+                    fontSize: 12,
+                  }}
+                />
+                <ReferenceLine
+                  y={subscriptionPeriodEventsCount}
+                  stroke={getChartColor(2)}
+                  strokeWidth={2}
+                  strokeDasharray="3 3"
+                  strokeOpacity={0.5}
+                  strokeLinecap="round"
+                  label={{
+                    value: `Your events count (${number.format(subscriptionPeriodEventsCount)})`,
+                    fill: getChartColor(2),
+                    position:
+                      subscriptionPeriodEventsCount > 1000
+                        ? 'insideTop'
+                        : 'insideBottom',
+                    fontSize: 12,
+                  }}
+                />
+              </>
+            )}
+            <Bar
+              dataKey="count"
+              stroke={getChartColor(0)}
+              strokeWidth={0.5}
+              fill={'url(#usage)'}
+              isAnimationActive={false}
+            />
+            <XAxis {...xAxisProps} dataKey="date" />
+            <YAxis
+              {...yAxisProps}
+              domain={domain}
+              interval={0}
+              ticks={[
+                0,
+                subscriptionPeriodEventsLimit * 0.25,
+                subscriptionPeriodEventsLimit * 0.5,
+                subscriptionPeriodEventsLimit * 0.75,
+                subscriptionPeriodEventsLimit,
+              ]}
+            />
+            <CartesianGrid
+              horizontal={true}
+              vertical={false}
+              strokeDasharray="3 3"
+              strokeOpacity={0.5}
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </>,
+  );
+}
+
+function Tooltip(props: any) {
+  const number = useNumber();
+  const payload = props.payload?.[0]?.payload;
+
+  if (!payload) {
+    return null;
+  }
+  return (
+    <div className="flex min-w-[180px] flex-col gap-2 rounded-xl border bg-card p-3  shadow-xl">
+      <div className="text-sm text-muted-foreground">
+        {formatDate(payload.date)}
+      </div>
+      {payload.limit !== 0 && (
+        <div className="flex items-center gap-2">
+          <div className="h-10 w-1 rounded-full border-2 border-dashed border-chart-1" />
+          <div className="col gap-1">
+            <div className="text-sm text-muted-foreground">Your tier limit</div>
+            <div className="text-lg font-semibold text-chart-1">
+              {number.format(payload.limit)}
+            </div>
+          </div>
+        </div>
+      )}
+      {payload.total !== 0 && (
+        <div className="flex items-center gap-2">
+          <div className="h-10 w-1 rounded-full border-2 border-dashed border-chart-2" />
+          <div className="col gap-1">
+            <div className="text-sm text-muted-foreground">
+              Total events count
+            </div>
+            <div className="text-lg font-semibold text-chart-2">
+              {number.format(payload.total)}
+            </div>
+          </div>
+        </div>
+      )}
+      <div className="flex items-center gap-2">
+        <div className="h-10 w-1 rounded-full bg-chart-0" />
+        <div className="col gap-1">
+          <div className="text-sm text-muted-foreground">Events this day</div>
+          <div className="text-lg font-semibold text-chart-0">
+            {number.format(payload.count)}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/page.tsx
@@ -6,11 +6,15 @@ import { notFound } from 'next/navigation';
 import { parseAsStringEnum } from 'nuqs/server';

 import { auth } from '@openpanel/auth/nextjs';
-import { db } from '@openpanel/db';
+import { db, transformOrganization } from '@openpanel/db';

-import EditOrganization from './edit-organization';
 import InvitesServer from './invites';
 import MembersServer from './members';
+import Billing from './organization/billing';
+import { BillingFaq } from './organization/billing-faq';
+import CurrentSubscription from './organization/current-subscription';
+import Organization from './organization/organization';
+import Usage from './organization/usage';

 interface PageProps {
  params: {
@@ -23,7 +27,8 @@ export default async function Page({
  params: { organizationSlug: organizationId },
  searchParams,
 }: PageProps) {
-  const tab = parseAsStringEnum(['org', 'members', 'invites'])
+  const isBillingEnabled = !process.env.SELF_HOSTED;
+  const tab = parseAsStringEnum(['org', 'billing', 'members', 'invites'])
    .withDefault('org')
    .parseServerSide(searchParams.tab);
  const session = await auth();
@@ -71,6 +76,11 @@ export default async function Page({
        <PageTabsLink href={'?tab=org'} isActive={tab === 'org'}>
          Organization
        </PageTabsLink>
+        {isBillingEnabled && (
+          <PageTabsLink href={'?tab=billing'} isActive={tab === 'billing'}>
+            Billing
+          </PageTabsLink>
+        )}
        <PageTabsLink href={'?tab=members'} isActive={tab === 'members'}>
          Members
        </PageTabsLink>
@@ -79,7 +89,17 @@ export default async function Page({
        </PageTabsLink>
      </PageTabs>

-      {tab === 'org' && <EditOrganization organization={organization} />}
+      {tab === 'org' && <Organization organization={organization} />}
+      {tab === 'billing' && isBillingEnabled && (
+        <div className="flex flex-col-reverse md:flex-row gap-8 max-w-screen-lg">
+          <div className="col gap-8 w-full">
+            <Billing organization={organization} />
+            <Usage organization={organization} />
+            <BillingFaq />
+          </div>
+          <CurrentSubscription organization={organization} />
+        </div>
+      )}
      {tab === 'members' && <MembersServer organizationId={organizationId} />}
      {tab === 'invites' && <InvitesServer organizationId={organizationId} />}
    </Padding>
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/projects/delete-project.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/projects/delete-project.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { Widget, WidgetBody, WidgetHead } from '@/components/widget';
+import { showConfirm } from '@/modals';
+import { api, handleError } from '@/trpc/client';
+import type { IServiceProjectWithClients } from '@openpanel/db';
+import { useQueryClient } from '@tanstack/react-query';
+import { router } from '@trpc/server';
+import { addHours, format, startOfHour } from 'date-fns';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+
+type Props = { project: IServiceProjectWithClients };
+
+export default function DeleteProject({ project }: Props) {
+  const router = useRouter();
+  const mutation = api.project.delete.useMutation({
+    onError: handleError,
+    onSuccess: () => {
+      toast.success('Project updated');
+      router.refresh();
+    },
+  });
+  const cancelDeletionMutation = api.project.cancelDeletion.useMutation({
+    onError: handleError,
+    onSuccess: () => {
+      toast.success('Project updated');
+      router.refresh();
+    },
+  });
+
+  return (
+    <Widget className="max-w-screen-md w-full">
+      <WidgetHead>
+        <span className="title">Delete Project</span>
+      </WidgetHead>
+      <WidgetBody className="col gap-4">
+        <p>
+          Deleting your project will remove it from your organization and all of
+          its data. It'll be permanently deleted after 24 hours.
+        </p>
+        {project?.deleteAt && (
+          <Alert variant="destructive">
+            <AlertTitle>Project scheduled for deletion</AlertTitle>
+            <AlertDescription>
+              This project will be deleted on{' '}
+              <span className="font-medium">
+                {
+                  // add 1 hour and round to the nearest hour
+                  // Since we run cron once an hour
+                  format(
+                    startOfHour(addHours(project.deleteAt, 1)),
+                    'yyyy-MM-dd HH:mm:ss',
+                  )
+                }
+              </span>
+              . Any event associated with this project will be deleted.
+            </AlertDescription>
+          </Alert>
+        )}
+        <div className="row gap-4 justify-end">
+          {project?.deleteAt && (
+            <Button
+              variant="outline"
+              onClick={() => {
+                cancelDeletionMutation.mutate({ projectId: project.id });
+              }}
+            >
+              Cancel deletion
+            </Button>
+          )}
+          <Button
+            disabled={!!project?.deleteAt}
+            variant="destructive"
+            onClick={() => {
+              showConfirm({
+                title: 'Delete Project',
+                text: 'Are you sure you want to delete this project?',
+                onConfirm: () => {
+                  mutation.mutate({ projectId: project.id });
+                },
+              });
+            }}
+          >
+            Delete Project
+          </Button>
+        </div>
+      </WidgetBody>
+    </Widget>
+  );
+}
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/projects/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/projects/page.tsx
@@ -8,6 +8,7 @@ import {
 } from '@openpanel/db';

 import { notFound } from 'next/navigation';
+import DeleteProject from './delete-project';
 import EditProjectDetails from './edit-project-details';
 import EditProjectFilters from './edit-project-filters';
 import ProjectClients from './project-clients';
@@ -34,6 +35,7 @@ export default async function Page({ params: { projectId } }: PageProps) {
        <EditProjectDetails project={project} />
        <EditProjectFilters project={project} />
        <ProjectClients project={project} />
+        <DeleteProject project={project} />
      </div>
    </Padding>
  );
--- a/apps/dashboard/src/components/page-tabs.tsx
+++ b/apps/dashboard/src/components/page-tabs.tsx
@@ -1,5 +1,9 @@
+'use client';
+
 import { cn } from '@/utils/cn';
+import { motion } from 'framer-motion';
 import Link from 'next/link';
+import { useState } from 'react';

 export function PageTabs({
  children,
@@ -27,15 +31,23 @@ export function PageTabsLink({
  isActive?: boolean;
 }) {
  return (
-    <Link
-      className={cn(
-        'inline-block opacity-100 transition-transform hover:translate-y-[-1px]',
-        isActive ? 'opacity-100' : 'opacity-50',
+    <div className="relative">
+      <Link
+        className={cn(
+          'inline-block opacity-100 transition-transform hover:translate-y-[-1px]',
+          isActive ? 'opacity-100' : 'opacity-50',
+        )}
+        href={href}
+      >
+        {children}
+      </Link>
+      {isActive && (
+        <motion.div
+          className="rounded-full absolute -bottom-1 left-0 right-0 h-0.5 bg-primary"
+          layoutId={'page-tabs-link'}
+        />
      )}
-      href={href}
-    >
-      {children}
-    </Link>
+    </div>
  );
 }

--- a/apps/dashboard/src/components/report-chart/area/chart.tsx
+++ b/apps/dashboard/src/components/report-chart/area/chart.tsx
@@ -105,7 +105,6 @@ export function Chart({ data }: Props) {
  }, [series]);

  const yAxisProps = useYAxisProps({
-    data: [data.metrics.max],
    hide: hideYAxis,
  });
  const xAxisProps = useXAxisProps({
--- a/apps/dashboard/src/components/report-chart/common/axis.tsx
+++ b/apps/dashboard/src/components/report-chart/common/axis.tsx
@@ -22,12 +22,7 @@ export function getYAxisWidth(value: string | undefined | null) {
  return charLength * value.length + charLength;
 }

-export const useYAxisProps = ({
-  data,
-  hide,
-  tickFormatter,
-}: {
-  data: number[];
+export const useYAxisProps = (options?: {
  hide?: boolean;
  tickFormatter?: (value: number) => string;
 }) => {
@@ -38,12 +33,14 @@ export const useYAxisProps = ({

  return {
    ...AXIS_FONT_PROPS,
-    width: hide ? 0 : width,
+    width: options?.hide ? 0 : width,
    axisLine: false,
    tickLine: false,
    allowDecimals: false,
    tickFormatter: (value: number) => {
-      const tick = tickFormatter ? tickFormatter(value) : number.short(value);
+      const tick = options?.tickFormatter
+        ? options.tickFormatter(value)
+        : number.short(value);
      const newWidth = getYAxisWidth(tick);
      ref.current.push(newWidth);
      setWidthDebounced(Math.max(...ref.current));
--- a/apps/dashboard/src/components/report-chart/histogram/chart.tsx
+++ b/apps/dashboard/src/components/report-chart/histogram/chart.tsx
@@ -49,7 +49,6 @@ export function Chart({ data }: Props) {
  const { series, setVisibleSeries } = useVisibleSeries(data);
  const rechartData = useRechartDataModel(series);
  const yAxisProps = useYAxisProps({
-    data: [data.metrics.max],
    hide: hideYAxis,
  });
  const xAxisProps = useXAxisProps({
--- a/apps/dashboard/src/components/report-chart/line/chart.tsx
+++ b/apps/dashboard/src/components/report-chart/line/chart.tsx
@@ -110,7 +110,6 @@ export function Chart({ data }: Props) {

  const xAxisProps = useXAxisProps({ interval, hide: hideXAxis });
  const yAxisProps = useYAxisProps({
-    data: [data.metrics.max],
    hide: hideYAxis,
  });
  return (
--- a/apps/dashboard/src/components/report-chart/retention/chart.tsx
+++ b/apps/dashboard/src/components/report-chart/retention/chart.tsx
@@ -15,7 +15,6 @@ import {
 } from 'recharts';

 import { average, round } from '@openpanel/common';
-import { fix } from 'mathjs';
 import { useXAxisProps, useYAxisProps } from '../common/axis';
 import { useReportChartContext } from '../context';
 import { RetentionTooltip } from './tooltip';
@@ -33,7 +32,6 @@ export function Chart({ data }: Props) {

  const xAxisProps = useXAxisProps({ interval, hide: hideXAxis });
  const yAxisProps = useYAxisProps({
-    data: [100],
    hide: hideYAxis,
    tickFormatter: (value) => `${value}%`,
  });
--- a/apps/dashboard/src/components/ui/accordion.tsx
+++ b/apps/dashboard/src/components/ui/accordion.tsx
@@ -11,7 +11,7 @@ const AccordionItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <AccordionPrimitive.Item
    ref={ref}
-    className={cn('border-b', className)}
+    className={cn('border-b [&:last-child]:border-b-0', className)}
    {...props}
  />
 ));
--- a/apps/dashboard/src/components/ui/alert.tsx
+++ b/apps/dashboard/src/components/ui/alert.tsx
@@ -11,6 +11,8 @@ const alertVariants = cva(
        default: 'bg-card text-foreground',
        destructive:
          'border-destructive text-destructive dark:border-destructive [&>svg]:text-destructive',
+        warning:
+          'bg-orange-400/10 border-orange-400 text-orange-600 dark:border-orange-400 [&>svg]:text-orange-400',
      },
    },
    defaultVariants: {
--- a/apps/dashboard/src/components/ui/button.tsx
+++ b/apps/dashboard/src/components/ui/button.tsx
@@ -10,12 +10,12 @@ import Link from 'next/link';
 import * as React from 'react';

 const buttonVariants = cva(
-  'inline-flex flex-shrink-0 select-none items-center justify-center whitespace-nowrap rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex flex-shrink-0 select-none items-center justify-center whitespace-nowrap rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:translate-y-[-1px]',
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        cta: 'bg-highlight text-white hover:bg-highlight',
+        cta: 'bg-highlight text-white hover:bg-highlight/80',
        destructive:
          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
        outline:
--- a/apps/dashboard/src/components/ui/dialog.tsx
+++ b/apps/dashboard/src/components/ui/dialog.tsx
@@ -86,10 +86,7 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
-    className={cn(
-      'text-lg font-semibold leading-none tracking-tight',
-      className,
-    )}
+    className={cn('text-lg font-semibold tracking-tight', className)}
    {...props}
  />
 ));
@@ -101,7 +98,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <DialogPrimitive.Description
    ref={ref}
-    className={cn(' text-muted-foreground', className)}
+    className={cn(' text-muted-foreground mt-2', className)}
    {...props}
  />
 ));
--- a/apps/dashboard/src/components/widget-table.tsx
+++ b/apps/dashboard/src/components/widget-table.tsx
@@ -4,6 +4,7 @@ interface Props<T> {
  columns: {
    name: string;
    render: (item: T) => React.ReactNode;
+    className?: string;
  }[];
  keyExtractor: (item: T) => string;
  data: T[];
@@ -41,7 +42,9 @@ export function WidgetTable<T>({
        <WidgetTableHead>
          <tr>
            {columns.map((column) => (
-              <th key={column.name}>{column.name}</th>
+              <th key={column.name} className={cn(column.className)}>
+                {column.name}
+              </th>
            ))}
          </tr>
        </WidgetTableHead>
@@ -49,10 +52,14 @@ export function WidgetTable<T>({
          {data.map((item) => (
            <tr
              key={keyExtractor(item)}
-              className="border-b border-border text-right  last:border-0 [&_td:first-child]:text-left [&_td]:p-4"
+              className={
+                'border-b border-border text-right last:border-0 [&_td:first-child]:text-left [&_td]:p-4'
+              }
            >
              {columns.map((column) => (
-                <td key={column.name}>{column.render(item)}</td>
+                <td key={column.name} className={cn(column.className)}>
+                  {column.render(item)}
+                </td>
              ))}
            </tr>
          ))}
--- a/apps/dashboard/src/hooks/useNumerFormatter.ts
+++ b/apps/dashboard/src/hooks/useNumerFormatter.ts
@@ -26,11 +26,25 @@ export const shortNumber =
    }).format(value);
  };

+export const formatCurrency =
+  (locale: string) =>
+  (amount: number, currency = 'USD') => {
+    return new Intl.NumberFormat(locale, {
+      style: 'currency',
+      currency: currency,
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(amount);
+  };
+
 export function useNumber() {
-  const locale = 'en-gb';
+  const locale = 'en-US';
  const format = formatNumber(locale);
  const short = shortNumber(locale);
+  const currency = formatCurrency(locale);
+
  return {
+    currency,
    format,
    short,
    shortWithUnit: (value: number | null | undefined, unit?: string | null) => {
--- a/apps/dashboard/src/hooks/useWS.ts
+++ b/apps/dashboard/src/hooks/useWS.ts
@@ -4,7 +4,7 @@ import debounce from 'lodash.debounce';
 import { use, useEffect, useMemo, useState } from 'react';
 import useWebSocket from 'react-use-websocket';

-import { getSuperJson } from '@openpanel/common';
+import { getSuperJson } from '@openpanel/json';

 type UseWSOptions = {
  debounce?: {
--- a/apps/dashboard/src/modals/Confirm.tsx
+++ b/apps/dashboard/src/modals/Confirm.tsx
@@ -20,7 +20,7 @@ export default function Confirm({
  return (
    <ModalContent>
      <ModalHeader title={title} />
-      <p>{text}</p>
+      <p className="text-lg -mt-2">{text}</p>
      <ButtonContainer>
        <Button
          variant="outline"